administrator/pas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Marek Lesko
2025-10-22 14:44:25 +00:00
parent 498d2c7ade
commit 9d644a9b79
275 changed files with 35799 additions and 35712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Web/public/scss/helpers/_border-color.scss
View File

@@ -1,18 +1,18 @@
@use "../variables" as *;
@use "sass:meta"; // Import meta module for working with keyword arguments
// Mixin to dynamically generate classes based on provided colors
@mixin syntax-colors2($args2...) {
@each $name2, $color2 in meta.keywords($args2) {
html .border-#{$name2} {
border: 1px solid #{$color2} !important;
}
}
}
// Including the mixin with variables and CSS variables
@include syntax-colors2($primary: var(--mat-sys-primary),
$secondary: var(--mat-sys-secondary),
$success: $success,
$warning: $warning,
@use "../variables" as *;
@use "sass:meta"; // Import meta module for working with keyword arguments
// Mixin to dynamically generate classes based on provided colors
@mixin syntax-colors2($args2...) {
@each $name2, $color2 in meta.keywords($args2) {
html .border-#{$name2} {
border: 1px solid #{$color2} !important;
}
}
}
// Including the mixin with variables and CSS variables
@include syntax-colors2($primary: var(--mat-sys-primary),
$secondary: var(--mat-sys-secondary),
$success: $success,
$warning: $warning,
$error: var(--mat-sys-error));

64
Web/public/scss/helpers/_border.scss
View File

@@ -1,32 +1,32 @@
@use 'variables';
$utilities: (
'border': (
property: border,
class: b,
values: variables.$borders
),
'border-top': (
property: border-top,
class: b-t,
values: variables.$borders
),
'border-bottom': (
property: border-bottom,
class: b-b,
values: variables.$borders
),
'border-left': (
property: border-left,
class: b-l,
values: variables.$borders
),
'border-right': (
property: border-right,
class: b-r,
values: variables.$borders
),
);
@use 'variables';
$utilities: (
'border': (
property: border,
class: b,
values: variables.$borders
),
'border-top': (
property: border-top,
class: b-t,
values: variables.$borders
),
'border-bottom': (
property: border-bottom,
class: b-b,
values: variables.$borders
),
'border-left': (
property: border-left,
class: b-l,
values: variables.$borders
),
'border-right': (
property: border-right,
class: b-r,
values: variables.$borders
),
);

72
Web/public/scss/helpers/_color.scss
View File

@@ -1,37 +1,37 @@
@use "sass:meta";
@use "../variables" as *;
@mixin syntax-colors($args...) {
@each $name, $color in meta.keywords($args) {
html .bg-#{$name} {
background-color: $color !important;
}
html .text-#{$name} {
color: $color !important;
}
}
}
@include syntax-colors($primary: var(--mat-sys-primary),
$secondary: var(--mat-sys-secondary),
$success: $success,
$warning: $warning,
$error: var(--mat-sys-error),
$white: $white,
$light: $light,
$light-error: var(--mat-sys-error-fixed-dim),
$light-secondary: var(--mat-sys-secondary-fixed-dim),
$light-success: $light-success,
$light-warning: $light-warning,
$light-primary: var(--mat-sys-primary-fixed-dim));
.fill-warning svg {
fill: $warning;
color: $warning;
}
.fill-light svg {
fill: $light;
color: $light;
@use "sass:meta";
@use "../variables" as *;
@mixin syntax-colors($args...) {
@each $name, $color in meta.keywords($args) {
html .bg-#{$name} {
background-color: $color !important;
}
html .text-#{$name} {
color: $color !important;
}
}
}
@include syntax-colors($primary: var(--mat-sys-primary),
$secondary: var(--mat-sys-secondary),
$success: $success,
$warning: $warning,
$error: var(--mat-sys-error),
$white: $white,
$light: $light,
$light-error: var(--mat-sys-error-fixed-dim),
$light-secondary: var(--mat-sys-secondary-fixed-dim),
$light-success: $light-success,
$light-warning: $light-warning,
$light-primary: var(--mat-sys-primary-fixed-dim));
.fill-warning svg {
fill: $warning;
color: $warning;
}
.fill-light svg {
fill: $light;
color: $light;
}

116
Web/public/scss/helpers/_custom-flex.scss
View File

@@ -1,59 +1,59 @@
@media (min-width: 1200px) {
body {
.d-lg-flex {
display: flex !important;
}
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
.align-items-lg-center {
align-items: center !important;
}
}
}
@media (min-width: 960px) {
.d-md-none {
display: none !important;
}
}
@media (min-width: 768px) {
body {
.d-sm-flex {
display: flex !important;
}
}
}
@media (max-width: 767px) {
.p-xs-6 {
padding: 0 6px !important;
}
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-1-auto {
flex: 1 1 0%;
}
.hstack {
display: flex;
flex-direction: row;
gap: 20px;
}
@media (max-width: 767px) {
.hstack {
flex-direction: column;
}
@media (min-width: 1200px) {
body {
.d-lg-flex {
display: flex !important;
}
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
.align-items-lg-center {
align-items: center !important;
}
}
}
@media (min-width: 960px) {
.d-md-none {
display: none !important;
}
}
@media (min-width: 768px) {
body {
.d-sm-flex {
display: flex !important;
}
}
}
@media (max-width: 767px) {
.p-xs-6 {
padding: 0 6px !important;
}
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-1-auto {
flex: 1 1 0%;
}
.hstack {
display: flex;
flex-direction: row;
gap: 20px;
}
@media (max-width: 767px) {
.hstack {
flex-direction: column;
}
}

14
Web/public/scss/helpers/_display.scss
View File

@@ -1,8 +1,8 @@
@use "variables";
$utilities: (
"display": (property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none,
),
@use "variables";
$utilities: (
"display": (property: display,
class: d,
values: inline inline-block block grid table table-row table-cell flex inline-flex none,
),
);

140
Web/public/scss/helpers/_flexbox.scss
View File

@@ -1,71 +1,71 @@
@use "variables";
$utilities: (
"flex": (property: flex,
class: flex,
values: (fill: 1 1 auto,
),
),
"flex-direction": (property: flex-direction,
class: flex,
values: (row: row,
row-reverse: row-reverse,
col: column,
col-reverse: column-reverse,
),
),
"flex-grow": (property: flex-grow,
class: flex,
values: (grow-0: 0,
grow-1: 1,
),
),
"flex-shrink": (property: flex-shrink,
class: flex,
values: (shrink-0: 0,
shrink-1: 1,
),
),
"flex-wrap": (property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse,
),
"justify-content": (property: justify-content,
class: justify-content,
values: (start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
),
),
"align-content": (property: align-content,
class: align-content,
values: (start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
),
),
"align-items": (property: align-items,
class: align-items,
values: (start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
),
),
"align-self": (property: align-self,
class: align-self,
values: (auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
),
),
@use "variables";
$utilities: (
"flex": (property: flex,
class: flex,
values: (fill: 1 1 auto,
),
),
"flex-direction": (property: flex-direction,
class: flex,
values: (row: row,
row-reverse: row-reverse,
col: column,
col-reverse: column-reverse,
),
),
"flex-grow": (property: flex-grow,
class: flex,
values: (grow-0: 0,
grow-1: 1,
),
),
"flex-shrink": (property: flex-shrink,
class: flex,
values: (shrink-0: 0,
shrink-1: 1,
),
),
"flex-wrap": (property: flex-wrap,
class: flex,
values: wrap nowrap wrap-reverse,
),
"justify-content": (property: justify-content,
class: justify-content,
values: (start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
),
),
"align-content": (property: align-content,
class: align-content,
values: (start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
stretch: stretch,
),
),
"align-items": (property: align-items,
class: align-items,
values: (start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
),
),
"align-self": (property: align-self,
class: align-self,
values: (auto: auto,
start: flex-start,
end: flex-end,
center: center,
baseline: baseline,
stretch: stretch,
),
),
);

50
Web/public/scss/helpers/_functions.scss
View File

@@ -1,25 +1,25 @@
@use "sass:map";
// It makes the value negative.
@function negativify-map($map) {
$result: ();
@each $key, $value in $map {
@if $key !=0 {
$result: map.merge($result, ("-" + $key: (-$value)));
}
}
@return $result;
}
// It allows to combine multiple maps together.
@function map-collect($maps...) {
$collection: ();
@each $map in $maps {
$collection: map.merge($collection, $map);
}
@return $collection;
}
@use "sass:map";
// It makes the value negative.
@function negativify-map($map) {
$result: ();
@each $key, $value in $map {
@if $key !=0 {
$result: map.merge($result, ("-" + $key: (-$value)));
}
}
@return $result;
}
// It allows to combine multiple maps together.
@function map-collect($maps...) {
$collection: ();
@each $map in $maps {
$collection: map.merge($collection, $map);
}
@return $collection;
}

30
Web/public/scss/helpers/_icon-size.scss
View File

@@ -1,15 +1,15 @@
@use "sass:meta";
$columns: 54;
@mixin icon_size {
@for $i from 1 through $columns {
.icon-#{$i} {
height: #{$i}px !important;
width: #{$i}px !important;
line-height: #{$i + 8}px !important;
}
}
}
@include icon_size;
@use "sass:meta";
$columns: 54;
@mixin icon_size {
@for $i from 1 through $columns {
.icon-#{$i} {
height: #{$i}px !important;
width: #{$i}px !important;
line-height: #{$i + 8}px !important;
}
}
}
@include icon_size;

214
Web/public/scss/helpers/_index.scss
View File

@@ -1,108 +1,108 @@
@use "sass:map";
@use "sass:meta";
@use "sass:list";
@use "variables";
@use "functions";
@use "flexbox";
@use "display";
@use "border";
@use "text";
@use "spacing";
@use "rounded";
$utilities: functions.map-collect(variables.$utilities,
display.$utilities,
flexbox.$utilities,
spacing.$utilities,
border.$utilities,
rounded.$utilities,
text.$utilities);
@each $key, $utility in $utilities {
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
{
$values: list.zip($values, $values);
}
$properties: map.get($utility, property);
$property-class-prefix: map.get($utility, class);
// Utility class maybe empty, (e.g. with position class)
$property-class-prefix-hyphen: if($property-class-prefix =="",
$property-class-prefix,
$property-class-prefix + "-"
);
@each $class-modifier, $value in $values {
.#{$property-class-prefix-hyphen + $class-modifier} {
@each $property in $properties {
#{$property}: $value !important;
}
}
}
}
$ltrutilities: functions.map-collect(spacing.$ltr);
@each $key, $utility in $ltrutilities {
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
{
$values: list.zip($values, $values);
}
$properties: map.get($utility, property);
$property-class-prefix: map.get($utility, class);
// Utility class maybe empty, (e.g. with position class)
$property-class-prefix-hyphen: if($property-class-prefix =="",
$property-class-prefix,
$property-class-prefix + "-"
);
@each $class-modifier, $value in $values {
[dir="ltr"] .#{$property-class-prefix-hyphen + $class-modifier} {
@each $property in $properties {
#{$property}: $value !important;
}
}
}
}
$rtlutilities: functions.map-collect(spacing.$rtl);
@each $key, $utility in $rtlutilities {
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
{
$values: list.zip($values, $values);
}
$properties: map.get($utility, property);
$property-class-prefix: map.get($utility, class);
// Utility class maybe empty, (e.g. with position class)
$property-class-prefix-hyphen: if($property-class-prefix =="",
$property-class-prefix,
$property-class-prefix + "-"
);
@each $class-modifier, $value in $values {
[dir="rtl"] .#{$property-class-prefix-hyphen + $class-modifier} {
@each $property in $properties {
#{$property}: $value !important;
}
}
}
@use "sass:map";
@use "sass:meta";
@use "sass:list";
@use "variables";
@use "functions";
@use "flexbox";
@use "display";
@use "border";
@use "text";
@use "spacing";
@use "rounded";
$utilities: functions.map-collect(variables.$utilities,
display.$utilities,
flexbox.$utilities,
spacing.$utilities,
border.$utilities,
rounded.$utilities,
text.$utilities);
@each $key, $utility in $utilities {
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
{
$values: list.zip($values, $values);
}
$properties: map.get($utility, property);
$property-class-prefix: map.get($utility, class);
// Utility class maybe empty, (e.g. with position class)
$property-class-prefix-hyphen: if($property-class-prefix =="",
$property-class-prefix,
$property-class-prefix + "-"
);
@each $class-modifier, $value in $values {
.#{$property-class-prefix-hyphen + $class-modifier} {
@each $property in $properties {
#{$property}: $value !important;
}
}
}
}
$ltrutilities: functions.map-collect(spacing.$ltr);
@each $key, $utility in $ltrutilities {
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
{
$values: list.zip($values, $values);
}
$properties: map.get($utility, property);
$property-class-prefix: map.get($utility, class);
// Utility class maybe empty, (e.g. with position class)
$property-class-prefix-hyphen: if($property-class-prefix =="",
$property-class-prefix,
$property-class-prefix + "-"
);
@each $class-modifier, $value in $values {
[dir="ltr"] .#{$property-class-prefix-hyphen + $class-modifier} {
@each $property in $properties {
#{$property}: $value !important;
}
}
}
}
$rtlutilities: functions.map-collect(spacing.$rtl);
@each $key, $utility in $rtlutilities {
$values: map.get($utility, values);
// If the values are a list or string, convert it into a map
@if meta.type-of($values)=="string" or meta.type-of(list.nth($values, 1)) !="list"
{
$values: list.zip($values, $values);
}
$properties: map.get($utility, property);
$property-class-prefix: map.get($utility, class);
// Utility class maybe empty, (e.g. with position class)
$property-class-prefix-hyphen: if($property-class-prefix =="",
$property-class-prefix,
$property-class-prefix + "-"
);
@each $class-modifier, $value in $values {
[dir="rtl"] .#{$property-class-prefix-hyphen + $class-modifier} {
@each $property in $properties {
#{$property}: $value !important;
}
}
}
}

78
Web/public/scss/helpers/_rounded.scss
View File

@@ -1,40 +1,40 @@
@use "variables";
$utilities: (
"border-radius": (property: border-radius,
class: rounded,
values: variables.$radius,
),
"border-top-left-radius": (property: border-top-left-radius,
class: r-t-l,
values: variables.$radius,
),
"border-top-right-radius": (property: border-top-right-radius,
class: r-t-r,
values: variables.$radius,
),
"border-bottom-right-radius": (property: border-bottom-right-radius,
class: r-b-r,
values: variables.$radius,
),
"border-bottom-left-radius": (property: border-bottom-left-radius,
class: r-b-l,
values: variables.$radius,
),
"border-top-radius": (property: border-top-left-radius border-top-right-radius,
class: r-t,
values: variables.$radius,
),
"border-bottom-radius": (property: border-bottom-left-radius border-bottom-right-radius,
class: r-b,
values: variables.$radius,
),
"border-left-radius": (property: border-top-left-radius border-bottom-left-radius,
class: r-l,
values: variables.$radius,
),
"border-right-radius": (property: border-top-right-radius border-bottom-right-radius,
class: r-r,
values: variables.$radius,
),
@use "variables";
$utilities: (
"border-radius": (property: border-radius,
class: rounded,
values: variables.$radius,
),
"border-top-left-radius": (property: border-top-left-radius,
class: r-t-l,
values: variables.$radius,
),
"border-top-right-radius": (property: border-top-right-radius,
class: r-t-r,
values: variables.$radius,
),
"border-bottom-right-radius": (property: border-bottom-right-radius,
class: r-b-r,
values: variables.$radius,
),
"border-bottom-left-radius": (property: border-bottom-left-radius,
class: r-b-l,
values: variables.$radius,
),
"border-top-radius": (property: border-top-left-radius border-top-right-radius,
class: r-t,
values: variables.$radius,
),
"border-bottom-radius": (property: border-bottom-left-radius border-bottom-right-radius,
class: r-b,
values: variables.$radius,
),
"border-left-radius": (property: border-top-left-radius border-bottom-left-radius,
class: r-l,
values: variables.$radius,
),
"border-right-radius": (property: border-top-right-radius border-bottom-right-radius,
class: r-r,
values: variables.$radius,
),
);

270
Web/public/scss/helpers/_spacing.scss
View File

@@ -1,136 +1,136 @@
@use "sass:map";
@use "variables";
$utilities: (
"margin": (property: margin,
class: m,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-x": (property: margin-left margin-right,
class: m-x,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-y": (property: margin-top margin-bottom,
class: m-y,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-top": (property: margin-top,
class: m-t,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-bottom": (property: margin-bottom,
class: m-b,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"negative-margin": (property: margin,
class: m,
values: variables.$negative-spacers,
),
"negative-margin-x": (property: margin-left margin-right,
class: m-x,
values: variables.$negative-spacers,
),
"negative-margin-y": (property: margin-top margin-bottom,
class: m-y,
values: variables.$negative-spacers,
),
"negative-margin-top": (property: margin-top,
class: m-t,
values: variables.$negative-spacers,
),
"negative-margin-right": (property: margin-right,
class: m-r,
values: variables.$negative-spacers,
),
"negative-margin-bottom": (property: margin-bottom,
class: m-b,
values: variables.$negative-spacers,
),
"negative-margin-left": (property: margin-left,
class: m-l,
values: variables.$negative-spacers,
),
"padding": (property: padding,
class: p,
values: variables.$spacers,
),
"padding-x": (property: padding-left padding-right,
class: p-x,
values: variables.$spacers,
),
"padding-y": (property: padding-top padding-bottom,
class: p-y,
values: variables.$spacers,
),
"padding-top": (property: padding-top,
class: p-t,
values: variables.$spacers,
),
"padding-bottom": (property: padding-bottom,
class: p-b,
values: variables.$spacers,
),
"gap": (property: gap,
class: gap,
values: variables.$spacers,
),
);
$ltr: (
"margin-right": (property: margin-right,
class: m-r,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-left": (property: margin-left,
class: m-l,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"padding-left": (property: padding-left,
class: p-l,
values: variables.$spacers,
),
"padding-right": (property: padding-right,
class: p-r,
values: variables.$spacers,
),
);
$rtl: (
"margin-right": (property: margin-left,
class: m-r,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-left": (property: margin-right,
class: m-l,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"padding-left": (property: padding-right,
class: p-l,
values: variables.$spacers,
),
"padding-right": (property: padding-left,
class: p-r,
values: variables.$spacers,
),
@use "sass:map";
@use "variables";
$utilities: (
"margin": (property: margin,
class: m,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-x": (property: margin-left margin-right,
class: m-x,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-y": (property: margin-top margin-bottom,
class: m-y,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-top": (property: margin-top,
class: m-t,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-bottom": (property: margin-bottom,
class: m-b,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"negative-margin": (property: margin,
class: m,
values: variables.$negative-spacers,
),
"negative-margin-x": (property: margin-left margin-right,
class: m-x,
values: variables.$negative-spacers,
),
"negative-margin-y": (property: margin-top margin-bottom,
class: m-y,
values: variables.$negative-spacers,
),
"negative-margin-top": (property: margin-top,
class: m-t,
values: variables.$negative-spacers,
),
"negative-margin-right": (property: margin-right,
class: m-r,
values: variables.$negative-spacers,
),
"negative-margin-bottom": (property: margin-bottom,
class: m-b,
values: variables.$negative-spacers,
),
"negative-margin-left": (property: margin-left,
class: m-l,
values: variables.$negative-spacers,
),
"padding": (property: padding,
class: p,
values: variables.$spacers,
),
"padding-x": (property: padding-left padding-right,
class: p-x,
values: variables.$spacers,
),
"padding-y": (property: padding-top padding-bottom,
class: p-y,
values: variables.$spacers,
),
"padding-top": (property: padding-top,
class: p-t,
values: variables.$spacers,
),
"padding-bottom": (property: padding-bottom,
class: p-b,
values: variables.$spacers,
),
"gap": (property: gap,
class: gap,
values: variables.$spacers,
),
);
$ltr: (
"margin-right": (property: margin-right,
class: m-r,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-left": (property: margin-left,
class: m-l,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"padding-left": (property: padding-left,
class: p-l,
values: variables.$spacers,
),
"padding-right": (property: padding-right,
class: p-r,
values: variables.$spacers,
),
);
$rtl: (
"margin-right": (property: margin-left,
class: m-r,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"margin-left": (property: margin-right,
class: m-l,
values: map.merge(variables.$spacers,
(auto: auto,
)),
),
"padding-left": (property: padding-right,
class: p-l,
values: variables.$spacers,
),
"padding-right": (property: padding-left,
class: p-r,
values: variables.$spacers,
),
);

166
Web/public/scss/helpers/_text.scss
View File

@@ -1,84 +1,84 @@
@use "sass:map";
@use "variables";
$utilities: (
"font-size": (
property: font-size,
class: f-s,
values: variables.$font-sizes,
),
"font-weight": (
property: font-weight,
class: f-w,
values: variables.$font-wieghts,
),
"font-style": (
property: font-style,
class: font,
values: italic normal,
),
"text-align": (
property: text-align,
class: text,
values: center right left,
),
"text-decoration": (
property: text-decoration,
class: text,
values: none underline line-through,
),
"text-transform": (
property: text-transform,
class: text,
values: capitalize uppercase lowercase,
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
),
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (
break: break-word,
),
),
"text-overflow": (
property: text-overflow,
class: text,
values: ellipsis,
),
"text-color": (
property: color,
class: text,
values: (
reset: inherit,
current: currentColor,
),
),
);
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
}
.lh-lg {
line-height: 36px !important;
}
.lh-sm {
line-height: 20px !important;
}
.lh-normal {
line-height: normal !important;
@use "sass:map";
@use "variables";
$utilities: (
"font-size": (
property: font-size,
class: f-s,
values: variables.$font-sizes,
),
"font-weight": (
property: font-weight,
class: f-w,
values: variables.$font-wieghts,
),
"font-style": (
property: font-style,
class: font,
values: italic normal,
),
"text-align": (
property: text-align,
class: text,
values: center right left,
),
"text-decoration": (
property: text-decoration,
class: text,
values: none underline line-through,
),
"text-transform": (
property: text-transform,
class: text,
values: capitalize uppercase lowercase,
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
),
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (
break: break-word,
),
),
"text-overflow": (
property: text-overflow,
class: text,
values: ellipsis,
),
"text-color": (
property: color,
class: text,
values: (
reset: inherit,
current: currentColor,
),
),
);
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
}
.lh-lg {
line-height: 36px !important;
}
.lh-sm {
line-height: 20px !important;
}
.lh-normal {
line-height: normal !important;
}

204
Web/public/scss/helpers/_variables.scss
View File

@@ -1,102 +1,102 @@
@use "functions" as *;
// Utility Map
$utilities: () !default;
// Spacing
$spacer: 16px !default;
$spacers: (
0: 0,
2: $spacer * 0.125,
4: $spacer * 0.25,
5: 5px,
6: 7px,
8: $spacer * 0.5,
10: 10px,
12: $spacer * 0.75,
14: 14px,
15: 15px,
16: $spacer,
20: 20px,
24: $spacer * 1.5,
30: 30px,
32: $spacer * 2,
44: 44px,
48: $spacer * 3,
60: 60px,
66: 66px,
80: 80px,
) !default;
$negative-spacers: negativify-map($spacers) !default;
// Border
$border-color: var(--mat-sys-outline-variant) !default;
$borders: (
0: 0,
1: 1px solid $border-color,
2: 2px solid $border-color,
4: 4px solid $border-color,
8: 8px solid $border-color,
) !default;
// Border radius
$radius-base: 7px !default;
$radius: (
0: 0,
7: $radius-base,
8: $radius-base * 2,
12: $radius-base * 3,
16: $radius-base * 4,
full: 9999px,
) !default;
// Text
$font-wieghts: (
100: 100,
200: 200,
300: 300,
400: 400,
500: 500,
600: 600,
700: 700,
800: 800,
900: 900,
) !default;
$font-sizes: (
0: 0,
10: 10px,
12: 12px,
14: 14px,
15: 15px,
16: 16px,
18: 18px,
20: 20px,
21: 21px,
24: 24px,
28: 28px,
30: 30px,
36: 36px,
40: 40px,
48: 48px,
) !default;
// Sizing
$sizes: (
0: 0,
20: 20%,
25: 25%,
40: 40%,
50: 50%,
60: 60%,
75: 75%,
80: 80%,
full: 100%,
auto: auto,
) !default;
@use "functions" as *;
// Utility Map
$utilities: () !default;
// Spacing
$spacer: 16px !default;
$spacers: (
0: 0,
2: $spacer * 0.125,
4: $spacer * 0.25,
5: 5px,
6: 7px,
8: $spacer * 0.5,
10: 10px,
12: $spacer * 0.75,
14: 14px,
15: 15px,
16: $spacer,
20: 20px,
24: $spacer * 1.5,
30: 30px,
32: $spacer * 2,
44: 44px,
48: $spacer * 3,
60: 60px,
66: 66px,
80: 80px,
) !default;
$negative-spacers: negativify-map($spacers) !default;
// Border
$border-color: var(--mat-sys-outline-variant) !default;
$borders: (
0: 0,
1: 1px solid $border-color,
2: 2px solid $border-color,
4: 4px solid $border-color,
8: 8px solid $border-color,
) !default;
// Border radius
$radius-base: 7px !default;
$radius: (
0: 0,
7: $radius-base,
8: $radius-base * 2,
12: $radius-base * 3,
16: $radius-base * 4,
full: 9999px,
) !default;
// Text
$font-wieghts: (
100: 100,
200: 200,
300: 300,
400: 400,
500: 500,
600: 600,
700: 700,
800: 800,
900: 900,
) !default;
$font-sizes: (
0: 0,
10: 10px,
12: 12px,
14: 14px,
15: 15px,
16: 16px,
18: 18px,
20: 20px,
21: 21px,
24: 24px,
28: 28px,
30: 30px,
36: 36px,
40: 40px,
48: 48px,
) !default;
// Sizing
$sizes: (
0: 0,
20: 20%,
25: 25%,
40: 40%,
50: 50%,
60: 60%,
75: 75%,
80: 80%,
full: 100%,
auto: auto,
) !default;