mirror of
https://github.com/getformwork/formwork.git
synced 2025-01-18 05:58:20 +01:00
Add css util classes
This commit is contained in:
parent
ce584470fa
commit
b547215824
@ -102,3 +102,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin make-util($name, $property, $list) {
|
||||
@each $k, $v in $list {
|
||||
$suffix: '';
|
||||
|
||||
@if $k != '' {
|
||||
$suffix: '-#{$k}';
|
||||
}
|
||||
|
||||
.#{$name}#{$suffix} {
|
||||
#{$property}: #{$v};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
26
panel/assets/scss/components/_utils.scss
Normal file
26
panel/assets/scss/components/_utils.scss
Normal 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'));
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user