Add css util classes

This commit is contained in:
Giuseppe Criscione 2023-05-09 18:49:26 +02:00
parent ce584470fa
commit b547215824
3 changed files with 70 additions and 23 deletions

View File

@ -102,3 +102,17 @@
}
}
}
@mixin make-util($name, $property, $list) {
@each $k, $v in $list {
$suffix: '';
@if $k != '' {
$suffix: '-#{$k}';
}
.#{$name}#{$suffix} {
#{$property}: #{$v};
}
}
}

View File

@ -0,0 +1,26 @@
@include make-util('mt', 'margin-top', $spacers);
@include make-util('ml', 'margin-left', $spacers);
@include make-util('mb', 'margin-bottom', $spacers);
@include make-util('mr', 'margin-right', $spacers);
@include make-util('pt', 'padding-top', $spacers);
@include make-util('pl', 'padding-left', $spacers);
@include make-util('pb', 'padding-bottom', $spacers);
@include make-util('pr', 'padding-right', $spacers);
@include make-util('min-w', 'min-width', (0: 0, 100: 100%));
@include make-util('max-w', 'max-width', (0: 0, 100: 100%));
@include make-util('flex', 'display', ('': 'flex'));
@include make-util('flex', 'flex-wrap', ('wrap': 'wrap', 'nowrap': 'nowrap'));
@include make-util('flex-grow', 'flex-grow', (0: 0, 1: 1));
@include make-util('text', 'font-size', $font-sizes);
@include make-util('text', 'color', $font-colors);
.truncate {
@include ellipsis;
}
@include make-util('whitespace', 'white-space', ('': 'nowrap', 'wrap': 'normal'));

View File

@ -15,15 +15,15 @@ $responsive-breakpoints: (
// Colors
// ===
$color-base-100: hsl(0deg, 0%, 15%) !default;
$color-base-200: hsl(0deg, 0%, 32%) !default;
$color-base-300: hsl(0deg, 0%, 49%) !default;
$color-base-400: hsl(0deg, 0%, 59%) !default;
$color-base-500: hsl(0deg, 0%, 79%) !default;
$color-base-600: hsl(0deg, 0%, 89%) !default;
$color-base-700: hsl(0deg, 0%, 93%) !default;
$color-base-800: hsl(0deg, 0%, 97%) !default;
$color-base-900: hsl(0deg, 0%, 99%) !default;
$color-base-100: hsl(208deg, 10%, 15%) !default;
$color-base-200: hsl(208deg, 10%, 32%) !default;
$color-base-300: hsl(208deg, 10%, 49%) !default;
$color-base-400: hsl(208deg, 10%, 59%) !default;
$color-base-500: hsl(208deg, 10%, 79%) !default;
$color-base-600: hsl(208deg, 10%, 89%) !default;
$color-base-700: hsl(208deg, 10%, 93%) !default;
$color-base-800: hsl(208deg, 10%, 97%) !default;
$color-base-900: hsl(208deg, 10%, 99%) !default;
$color-accent-100: $color-blue-100;
$color-accent-200: $color-blue-200;
@ -69,6 +69,19 @@ $color-error-900: $color-red-900;
// Common values
// ===
$spacers: (0: 0, 1: 0.125rem, 2: 0.25rem, 3: 0.375rem, 4: 0.5rem, 5: 0.625rem, 6: 0.75rem, 7: 0.75rem, 8: 1rem, 9: 1.5rem, 10: 2rem);
$font-sizes: ('xs': 0.75rem, 's': 0.875rem, 'm': 1rem, 'l': 1.125rem, 'xl': 1.25rem);
$font-colors: (
'accent': $color-accent-500,
'light': $color-base-300,
'medium': $color-base-200,
'success': $color-success-400,
'warning': $color-warning-400,
'error': $color-error-400
);
$border-radius: 4px;
$border-radius-round: 50%;
@ -170,7 +183,6 @@ $select-padding-left: 1.5rem;
$select-padding-right: 0.5rem;
$input-search-padding-left: 2rem;
$input-search-width: 28rem;
// ===
// Inputs
@ -203,12 +215,12 @@ $input-range-padding-v: 0.875rem;
$input-range-padding-h: 0;
$input-range-width: 15rem;
$input-range-track-height: 0.25rem;
$input-range-thumb-width: 1rem;
$input-range-thumb-height: 1rem;
$input-range-track-height: 0.375rem;
$input-range-thumb-width: 1.125rem;
$input-range-thumb-height: 1.125rem;
$input-range-thumb-border-radius: $border-radius-round;
$input-range-value-padding-v: 0;
$input-range-value-padding-v: 0.25rem;
$input-range-value-padding-h: 0.5rem;
$input-array-margin-bottom: 0.5rem;
@ -435,7 +447,7 @@ $main-margin-left: $main-margin + $sidebar-width;
$component-margin-bottom: 1rem;
$component-padding: 1.5rem;
$component-box-shadow: 0 0 0.75rem -0.125rem rgba($color-black, 0.05);
$component-box-shadow: 0.125rem 0.125rem 0.25rem -0.125rem rgba($color-black, 0.1);
$caption-margin-bottom: 1rem;
$caption-letter-spacing: 1px;
@ -465,14 +477,11 @@ $dashboard-chart-height: 14rem;
$pages-list-headers-padding-v: 0.25rem;
$pages-list-headers-padding-h: 0;
$page-children-toggle-margin-right: 0.25rem;
$page-children-toggle-margin-bottom: 0.125rem;
$pages-item-padding-v: 0.5rem;
$pages-item-padding-h: 0;
$pages-item-cell-padding-v: 0.25rem;
$pages-item-cell-padding-h: 0.5rem;
$pages-item-cell-padding-h: 0.25rem;
$page-language-padding-v: 0.125rem;
$page-language-padding-h: 0.25rem;
@ -480,10 +489,8 @@ $page-language-min-width: 1.125rem;
$page-status-label-margin-right: 0.375rem;
$pages-level-2-padding-left: 1.5rem;
$pages-level-3-padding-left: 3rem;
$pages-level-4-padding-left: 4.5rem;
$pages-level-5-padding-left: 6rem;
$pages-levels: 10;
$pages-level-padding: 1.75rem;
$page-info-margin-bottom: 0.75rem;
$page-info-padding-v: 0;