From 0e096737bb03d441a86a7d90b1321155f8fc961b Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Fri, 10 Nov 2023 10:57:10 +0700 Subject: [PATCH 01/14] feat: build up default spacing --- css/spacing.css | 250 ++++++++++++++++++++++++++++++++++++++++++++- scss/_helpers.scss | 9 ++ scss/spacing.scss | 31 +++++- 3 files changed, 281 insertions(+), 9 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index 6fc13f4..efd5b3e 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -26,22 +26,262 @@ /** * Vertical Spacing */ +/** + * default spacing + */ :root { - --spacing-0:0; + --bb-spacing-0:0; + --bb-spacing-1:1px; + --bb-spacing-2:2px; + --bb-spacing-4:4px; + --bb-spacing-6:6px; + --bb-spacing-8:8px; + --bb-spacing-12:12px; + --bb-spacing-16:16px; + --bb-spacing-24:24px; + --bb-spacing-32:32px; + --bb-spacing-48:48px; + --bb-spacing-64:64px; + --bb-spacing-96:96px; + --bb-spacing-128:128px; } .pt0 { - padding-top:var(--spacing-0); + padding-top:var(--bb-spacing-0); } .pb0 { - padding-bottom:var(--spacing-0); + padding-bottom:var(--bb-spacing-0); } .mt0 { - margin-top:var(--spacing-0); + margin-top:var(--bb-spacing-0); } .mb0 { - margin-bottom:var(--spacing-0); + margin-bottom:var(--bb-spacing-0); +} + +.pt1 { + padding-top:var(--bb-spacing-1); +} + +.pb1 { + padding-bottom:var(--bb-spacing-1); +} + +.mt1 { + margin-top:var(--bb-spacing-1); +} + +.mb1 { + margin-bottom:var(--bb-spacing-1); +} + +.pt2 { + padding-top:var(--bb-spacing-2); +} + +.pb2 { + padding-bottom:var(--bb-spacing-2); +} + +.mt2 { + margin-top:var(--bb-spacing-2); +} + +.mb2 { + margin-bottom:var(--bb-spacing-2); +} + +.pt4 { + padding-top:var(--bb-spacing-4); +} + +.pb4 { + padding-bottom:var(--bb-spacing-4); +} + +.mt4 { + margin-top:var(--bb-spacing-4); +} + +.mb4 { + margin-bottom:var(--bb-spacing-4); +} + +.pt6 { + padding-top:var(--bb-spacing-6); +} + +.pb6 { + padding-bottom:var(--bb-spacing-6); +} + +.mt6 { + margin-top:var(--bb-spacing-6); +} + +.mb6 { + margin-bottom:var(--bb-spacing-6); +} + +.pt8 { + padding-top:var(--bb-spacing-8); +} + +.pb8 { + padding-bottom:var(--bb-spacing-8); +} + +.mt8 { + margin-top:var(--bb-spacing-8); +} + +.mb8 { + margin-bottom:var(--bb-spacing-8); +} + +.pt12 { + padding-top:var(--bb-spacing-12); +} + +.pb12 { + padding-bottom:var(--bb-spacing-12); +} + +.mt12 { + margin-top:var(--bb-spacing-12); +} + +.mb12 { + margin-bottom:var(--bb-spacing-12); +} + +.pt16 { + padding-top:var(--bb-spacing-16); +} + +.pb16 { + padding-bottom:var(--bb-spacing-16); +} + +.mt16 { + margin-top:var(--bb-spacing-16); +} + +.mb16 { + margin-bottom:var(--bb-spacing-16); +} + +.pt24 { + padding-top:var(--bb-spacing-24); +} + +.pb24 { + padding-bottom:var(--bb-spacing-24); +} + +.mt24 { + margin-top:var(--bb-spacing-24); +} + +.mb24 { + margin-bottom:var(--bb-spacing-24); +} + +.pt32 { + padding-top:var(--bb-spacing-32); +} + +.pb32 { + padding-bottom:var(--bb-spacing-32); +} + +.mt32 { + margin-top:var(--bb-spacing-32); +} + +.mb32 { + margin-bottom:var(--bb-spacing-32); +} + +.pt48 { + padding-top:var(--bb-spacing-48); +} + +.pb48 { + padding-bottom:var(--bb-spacing-48); +} + +.mt48 { + margin-top:var(--bb-spacing-48); +} + +.mb48 { + margin-bottom:var(--bb-spacing-48); +} + +.pt64 { + padding-top:var(--bb-spacing-64); +} + +.pb64 { + padding-bottom:var(--bb-spacing-64); +} + +.mt64 { + margin-top:var(--bb-spacing-64); +} + +.mb64 { + margin-bottom:var(--bb-spacing-64); +} + +.pt96 { + padding-top:var(--bb-spacing-96); +} + +.pb96 { + padding-bottom:var(--bb-spacing-96); +} + +.mt96 { + margin-top:var(--bb-spacing-96); +} + +.mb96 { + margin-bottom:var(--bb-spacing-96); +} + +.pt128 { + padding-top:var(--bb-spacing-128); +} + +.pb128 { + padding-bottom:var(--bb-spacing-128); +} + +.mt128 { + margin-top:var(--bb-spacing-128); +} + +.mb128 { + margin-bottom:var(--bb-spacing-128); +} + +/* Breakpoint md */ +@media only screen and (max-width:1024px) { + :root { + --bb-spacing-32:30px; + --bb-spacing-48:40px; + --bb-spacing-64:50px; + --bb-spacing-96:60px; + --bb-spacing-128:70px; + } +} +:root { + --bb-spacing-default:10px; + --bb-spacing-heading:20px; + --bb-spacing-paragraph:var(--bb-spacing-16); } diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 9a425ef..206d882 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -439,4 +439,13 @@ } @return --#{$project-prefix}#{$prop}; +} + +@function map-search($list, $value) { + @for $i from 1 through length($list) { + @if (nth($list, $i) == $value) { + @return true; + } + } + @return false; } \ No newline at end of file diff --git a/scss/spacing.scss b/scss/spacing.scss index a702eca..2a4cc50 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -40,7 +40,7 @@ $classes: ("m":"margin", "p":"padding"); // and changed compare with the previous value @if $value != $previous_postfix { - @include get-variable(spacing-#{replace-prop($postfix)}, #{format-value($value)}); + @include get-variable(bb-spacing-#{replace-prop($postfix)}, #{format-value($value)}); } } } @@ -54,7 +54,7 @@ $classes: ("m":"margin", "p":"padding"); $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing); //@debug $value, $postfix; - @include get-variable(spacing-#{replace-prop($postfix)}, #{format-value($value)}); + @include get-variable(bb-spacing-#{replace-prop($postfix)}, #{format-value($value)}); } } @@ -64,7 +64,7 @@ $classes: ("m":"margin", "p":"padding"); $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing); //@debug $value, $postfix; - $var: var(#{get-variable(spacing-#{replace-prop($postfix)})}); + $var: var(#{get-variable(bb-spacing-#{replace-prop($postfix)})}); .pt#{replace-prop($postfix)} { padding-top: #{$var}; @@ -84,4 +84,27 @@ $classes: ("m":"margin", "p":"padding"); } } -@include vertical-spacing($vertical_spacing); \ No newline at end of file +/** + * default spacing + */ + +@mixin print-default-spacing($data) { + + // print + $list: map-get($vertical_spacing, 'values'); + + :root { + @each $name, $value in $data { + $isValid: map-search($list, $value); + // if the value is not existing in the $default_spacing, create 'px' for it + @if (not $isValid) { + @include get-variable(bb-spacing-#{replace-prop($name)}, format-value($value)); + } @else { + @include get-variable(bb-spacing-#{replace-prop($name)}, var(#{get-variable(bb-spacing-#{replace-prop($value)})})); + } + } + } +} + +@include vertical-spacing($vertical_spacing); +@include print-default-spacing($default_spacing); From bd17d30407387c0f2f89d0ce2b7911a67d237928 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Fri, 10 Nov 2023 10:57:53 +0700 Subject: [PATCH 02/14] feat: build up new default spacing --- scss/_config.scss | 69 ++++++++++++++++++++++++++--------------------- 1 file changed, 38 insertions(+), 31 deletions(-) diff --git a/scss/_config.scss b/scss/_config.scss index 5518c73..dc34b0b 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -3,44 +3,51 @@ @import "defs"; // Project info -//$info: ( -// name: 'Atomic CSS', -// variable-prefix: '' -//); +$info: ( + name: 'Atomic CSS', + variable-prefix: '' +); // font family -//$fonts: ( -// primary: ( -// font-face: "'Be Vietnam Pro', sans-serif", -// weight: 400 500 700 -// ), -// icomoon: "'icomoon', fantasy" -//); +$fonts: ( + primary: ( + font-face: "'Be Vietnam Pro', sans-serif", + weight: 400 500 700 + ), + icomoon: "'icomoon', fantasy" +); // colors -//$colors: ( -// primary: '#1c44ad', -// dark: '#1a1b1c', -// "gray": '#f6f6f6', -// light-blue: '#115df7', -// dark-blue: '#21297d' -//); +$colors: ( + primary: '#1c44ad', + dark: '#1a1b1c', + "gray": '#f6f6f6', + light-blue: '#115df7', + dark-blue: '#21297d' +); // aspect ratio -//$aspect_ratio: ( -// "custom":"1280/768" -//); +$aspect_ratio: ( + "custom":"1280/768" +); // breakpoints -//$breakpoints: ( -// "lg": 1280px, -// "md": 1024px, -// "sm": 768px, -// "xs": 480px, -//); +$breakpoints: ( + "lg": 1280px, + "md": 1024px, + "sm": 768px, + "xs": 480px, +); // vertical spacing -//$vertical_spacing: ( -// "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, -// "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, -//); \ No newline at end of file +$vertical_spacing: ( + "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, + "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, +); + +// default spacing +$default_spacing: ( + 'default':10, + 'heading':20, + 'paragraph':16, +); \ No newline at end of file From 2b916286efffeb94cb3b00faef252198ec9724a7 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Fri, 10 Nov 2023 13:14:10 +0700 Subject: [PATCH 03/14] fix: rename custom name spacing method --- scss/_config.scss | 4 ++-- scss/spacing.scss | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/scss/_config.scss b/scss/_config.scss index dc34b0b..ac3ee14 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -45,8 +45,8 @@ $vertical_spacing: ( "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, ); -// default spacing -$default_spacing: ( +// custom spacing +$custom_spacing: ( 'default':10, 'heading':20, 'paragraph':16, diff --git a/scss/spacing.scss b/scss/spacing.scss index 2a4cc50..39c013d 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -88,16 +88,16 @@ $classes: ("m":"margin", "p":"padding"); * default spacing */ -@mixin print-default-spacing($data) { +@mixin print-custom-name-spacing($data) { - // print - $list: map-get($vertical_spacing, 'values'); + // get value list from $vertical_spacing + $allowedValuesList: map-get($vertical_spacing, 'values'); :root { @each $name, $value in $data { - $isValid: map-search($list, $value); - // if the value is not existing in the $default_spacing, create 'px' for it - @if (not $isValid) { + $isAllowedValue: map-search($allowedValuesList, $value); + // if the value is not existing in the $vertical_spacing, create 'px' for it + @if (not $isAllowedValue) { @include get-variable(bb-spacing-#{replace-prop($name)}, format-value($value)); } @else { @include get-variable(bb-spacing-#{replace-prop($name)}, var(#{get-variable(bb-spacing-#{replace-prop($value)})})); @@ -107,4 +107,4 @@ $classes: ("m":"margin", "p":"padding"); } @include vertical-spacing($vertical_spacing); -@include print-default-spacing($default_spacing); +@include print-custom-name-spacing($custom_spacing); From e59f25a75a01149f93eaa6e8b4ac975a2c64b9cf Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:55:03 +0700 Subject: [PATCH 04/14] fix: build up create variable in root method and horizontal spacing --- css/spacing.css | 223 +++++++++++++++++++++++++++------------------ scss/_config.scss | 17 +++- scss/_helpers.scss | 24 ++++- scss/spacing.scss | 37 +++----- 4 files changed, 185 insertions(+), 116 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index efd5b3e..b65e408 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -4,284 +4,333 @@ */ /* Margin auto */ .m-auto { - margin:auto; + margin:auto; } .mt-auto { - margin-top:auto; + margin-top:auto; } .mr-auto { - margin-right:auto; + margin-right:auto; } .mb-auto { - margin-bottom:auto; + margin-bottom:auto; } .ml-auto { - margin-left:auto; + margin-left:auto; } /** - * Vertical Spacing + * General spacing variables */ /** - * default spacing + * custom spacing */ :root { - --bb-spacing-0:0; - --bb-spacing-1:1px; - --bb-spacing-2:2px; - --bb-spacing-4:4px; - --bb-spacing-6:6px; - --bb-spacing-8:8px; - --bb-spacing-12:12px; - --bb-spacing-16:16px; - --bb-spacing-24:24px; - --bb-spacing-32:32px; - --bb-spacing-48:48px; - --bb-spacing-64:64px; - --bb-spacing-96:96px; - --bb-spacing-128:128px; + --bb-spacing-default:10px; + --bb-spacing-heading:20px; + --bb-spacing-paragraph:var(--bb-spacing-16); +} + +:root { + --bb-gap-vc-column:var(--bb-gap-20); + --bb-gap-container:40px; +} + +:root { + --bb-spacing-0:0; + --bb-spacing-1:1px; + --bb-spacing-2:2px; + --bb-spacing-4:4px; + --bb-spacing-6:6px; + --bb-spacing-8:8px; + --bb-spacing-12:12px; + --bb-spacing-16:16px; + --bb-spacing-24:24px; + --bb-spacing-32:32px; + --bb-spacing-48:48px; + --bb-spacing-64:64px; + --bb-spacing-96:96px; + --bb-spacing-128:128px; } .pt0 { - padding-top:var(--bb-spacing-0); + padding-top:var(--bb-spacing-0); } .pb0 { - padding-bottom:var(--bb-spacing-0); + padding-bottom:var(--bb-spacing-0); } .mt0 { - margin-top:var(--bb-spacing-0); + margin-top:var(--bb-spacing-0); } .mb0 { - margin-bottom:var(--bb-spacing-0); + margin-bottom:var(--bb-spacing-0); } .pt1 { - padding-top:var(--bb-spacing-1); + padding-top:var(--bb-spacing-1); } .pb1 { - padding-bottom:var(--bb-spacing-1); + padding-bottom:var(--bb-spacing-1); } .mt1 { - margin-top:var(--bb-spacing-1); + margin-top:var(--bb-spacing-1); } .mb1 { - margin-bottom:var(--bb-spacing-1); + margin-bottom:var(--bb-spacing-1); } .pt2 { - padding-top:var(--bb-spacing-2); + padding-top:var(--bb-spacing-2); } .pb2 { - padding-bottom:var(--bb-spacing-2); + padding-bottom:var(--bb-spacing-2); } .mt2 { - margin-top:var(--bb-spacing-2); + margin-top:var(--bb-spacing-2); } .mb2 { - margin-bottom:var(--bb-spacing-2); + margin-bottom:var(--bb-spacing-2); } .pt4 { - padding-top:var(--bb-spacing-4); + padding-top:var(--bb-spacing-4); } .pb4 { - padding-bottom:var(--bb-spacing-4); + padding-bottom:var(--bb-spacing-4); } .mt4 { - margin-top:var(--bb-spacing-4); + margin-top:var(--bb-spacing-4); } .mb4 { - margin-bottom:var(--bb-spacing-4); + margin-bottom:var(--bb-spacing-4); } .pt6 { - padding-top:var(--bb-spacing-6); + padding-top:var(--bb-spacing-6); } .pb6 { - padding-bottom:var(--bb-spacing-6); + padding-bottom:var(--bb-spacing-6); } .mt6 { - margin-top:var(--bb-spacing-6); + margin-top:var(--bb-spacing-6); } .mb6 { - margin-bottom:var(--bb-spacing-6); + margin-bottom:var(--bb-spacing-6); } .pt8 { - padding-top:var(--bb-spacing-8); + padding-top:var(--bb-spacing-8); } .pb8 { - padding-bottom:var(--bb-spacing-8); + padding-bottom:var(--bb-spacing-8); } .mt8 { - margin-top:var(--bb-spacing-8); + margin-top:var(--bb-spacing-8); } .mb8 { - margin-bottom:var(--bb-spacing-8); + margin-bottom:var(--bb-spacing-8); } .pt12 { - padding-top:var(--bb-spacing-12); + padding-top:var(--bb-spacing-12); } .pb12 { - padding-bottom:var(--bb-spacing-12); + padding-bottom:var(--bb-spacing-12); } .mt12 { - margin-top:var(--bb-spacing-12); + margin-top:var(--bb-spacing-12); } .mb12 { - margin-bottom:var(--bb-spacing-12); + margin-bottom:var(--bb-spacing-12); } .pt16 { - padding-top:var(--bb-spacing-16); + padding-top:var(--bb-spacing-16); } .pb16 { - padding-bottom:var(--bb-spacing-16); + padding-bottom:var(--bb-spacing-16); } .mt16 { - margin-top:var(--bb-spacing-16); + margin-top:var(--bb-spacing-16); } .mb16 { - margin-bottom:var(--bb-spacing-16); + margin-bottom:var(--bb-spacing-16); } .pt24 { - padding-top:var(--bb-spacing-24); + padding-top:var(--bb-spacing-24); } .pb24 { - padding-bottom:var(--bb-spacing-24); + padding-bottom:var(--bb-spacing-24); } .mt24 { - margin-top:var(--bb-spacing-24); + margin-top:var(--bb-spacing-24); } .mb24 { - margin-bottom:var(--bb-spacing-24); + margin-bottom:var(--bb-spacing-24); } .pt32 { - padding-top:var(--bb-spacing-32); + padding-top:var(--bb-spacing-32); } .pb32 { - padding-bottom:var(--bb-spacing-32); + padding-bottom:var(--bb-spacing-32); } .mt32 { - margin-top:var(--bb-spacing-32); + margin-top:var(--bb-spacing-32); } .mb32 { - margin-bottom:var(--bb-spacing-32); + margin-bottom:var(--bb-spacing-32); } .pt48 { - padding-top:var(--bb-spacing-48); + padding-top:var(--bb-spacing-48); } .pb48 { - padding-bottom:var(--bb-spacing-48); + padding-bottom:var(--bb-spacing-48); } .mt48 { - margin-top:var(--bb-spacing-48); + margin-top:var(--bb-spacing-48); } .mb48 { - margin-bottom:var(--bb-spacing-48); + margin-bottom:var(--bb-spacing-48); } .pt64 { - padding-top:var(--bb-spacing-64); + padding-top:var(--bb-spacing-64); } .pb64 { - padding-bottom:var(--bb-spacing-64); + padding-bottom:var(--bb-spacing-64); } .mt64 { - margin-top:var(--bb-spacing-64); + margin-top:var(--bb-spacing-64); } .mb64 { - margin-bottom:var(--bb-spacing-64); + margin-bottom:var(--bb-spacing-64); } .pt96 { - padding-top:var(--bb-spacing-96); + padding-top:var(--bb-spacing-96); } .pb96 { - padding-bottom:var(--bb-spacing-96); + padding-bottom:var(--bb-spacing-96); } .mt96 { - margin-top:var(--bb-spacing-96); + margin-top:var(--bb-spacing-96); } .mb96 { - margin-bottom:var(--bb-spacing-96); + margin-bottom:var(--bb-spacing-96); } .pt128 { - padding-top:var(--bb-spacing-128); + padding-top:var(--bb-spacing-128); } .pb128 { - padding-bottom:var(--bb-spacing-128); + padding-bottom:var(--bb-spacing-128); } .mt128 { - margin-top:var(--bb-spacing-128); + margin-top:var(--bb-spacing-128); } .mb128 { - margin-bottom:var(--bb-spacing-128); + margin-bottom:var(--bb-spacing-128); } /* Breakpoint md */ @media only screen and (max-width:1024px) { - :root { - --bb-spacing-32:30px; - --bb-spacing-48:40px; - --bb-spacing-64:50px; - --bb-spacing-96:60px; - --bb-spacing-128:70px; - } + :root { + --bb-spacing-32:30px; + --bb-spacing-48:40px; + --bb-spacing-64:50px; + --bb-spacing-96:60px; + --bb-spacing-128:70px; + } } :root { - --bb-spacing-default:10px; - --bb-spacing-heading:20px; - --bb-spacing-paragraph:var(--bb-spacing-16); + --bb-gap-20:20px; + --bb-gap-40:40px; +} + +.pt20 { + padding-top:var(--bb-gap-20); +} + +.pb20 { + padding-bottom:var(--bb-gap-20); +} + +.mt20 { + margin-top:var(--bb-gap-20); +} + +.mb20 { + margin-bottom:var(--bb-gap-20); +} + +.pt40 { + padding-top:var(--bb-gap-40); +} + +.pb40 { + padding-bottom:var(--bb-gap-40); +} + +.mt40 { + margin-top:var(--bb-gap-40); +} + +.mb40 { + margin-bottom:var(--bb-gap-40); +} + +/* Breakpoint md */ +@media only screen and (max-width:1024px) { + :root { + --bb-gap-40:20px; + } } diff --git a/scss/_config.scss b/scss/_config.scss index ac3ee14..ce424c8 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -5,7 +5,7 @@ // Project info $info: ( name: 'Atomic CSS', - variable-prefix: '' + variable-prefix: 'bb' ); // font family @@ -39,6 +39,7 @@ $breakpoints: ( "xs": 480px, ); + // vertical spacing $vertical_spacing: ( "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, @@ -50,4 +51,16 @@ $custom_spacing: ( 'default':10, 'heading':20, 'paragraph':16, -); \ No newline at end of file +); + +// horizontal spacing +$horizontal_spacing: ( + "values":20 40, + "md":20 20, +); + +// gap spacing (horizontal) +$gap_spacing: ( + "vc-column":20, + "container":40px, +) diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 206d882..23e6dd6 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -448,4 +448,26 @@ } } @return false; -} \ No newline at end of file +} + +// Define if the value is containing any 'px' postfix, create 'px' if it not +@mixin print-variables-in-root($map_name, $map_container , $key_name, $prefix) { + $project-prefix: map-get($info, 'variable-prefix'); + + // get value list from $map_name + $allowedValuesList: map-get($map_container, $key_name); + + :root { + @each $name, $value in $map_name { + $isHavingUnit: get-unit($value); + $isAllowedValue: map-search($allowedValuesList, $value); + // if the value is existing in the $map_name and it does not have unit value => create variable value + @if ($isAllowedValue and $isHavingUnit == "") { + @include get-variable(#{$prefix}-#{replace-prop($name)}, var(#{get-variable(#{$prefix}-#{replace-prop($value)})})); + } @else { + @include get-variable(#{$prefix}-#{replace-prop($name)}, format-value($value)); + } + } + } +} + diff --git a/scss/spacing.scss b/scss/spacing.scss index 39c013d..d9e9a7b 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -19,10 +19,11 @@ $classes: ("m":"margin", "p":"padding"); } /** - * Vertical Spacing + * General spacing variables */ -@mixin vertical-spacing($vertical_spacing) { +@mixin generate-spacing-variables($vertical_spacing, $prefix) { + $project-prefix: map-get($info, 'variable-prefix'); @each $breakpoint, $values in $vertical_spacing { @if is-breakpoint($breakpoint) { // Responsive value @@ -40,7 +41,7 @@ $classes: ("m":"margin", "p":"padding"); // and changed compare with the previous value @if $value != $previous_postfix { - @include get-variable(bb-spacing-#{replace-prop($postfix)}, #{format-value($value)}); + @include get-variable(#{$prefix}-#{replace-prop($postfix)}, #{format-value($value)}); } } } @@ -54,7 +55,7 @@ $classes: ("m":"margin", "p":"padding"); $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing); //@debug $value, $postfix; - @include get-variable(bb-spacing-#{replace-prop($postfix)}, #{format-value($value)}); + @include get-variable(#{$prefix}-#{replace-prop($postfix)}, #{format-value($value)}); } } @@ -64,7 +65,7 @@ $classes: ("m":"margin", "p":"padding"); $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing); //@debug $value, $postfix; - $var: var(#{get-variable(bb-spacing-#{replace-prop($postfix)})}); + $var: var(#{get-variable(#{$prefix}-#{replace-prop($postfix)})}); .pt#{replace-prop($postfix)} { padding-top: #{$var}; @@ -85,26 +86,10 @@ $classes: ("m":"margin", "p":"padding"); } /** - * default spacing + * custom spacing */ +@include print-variables-in-root($custom_spacing, $vertical_spacing, 'values', 'spacing'); +@include print-variables-in-root($gap_spacing, $horizontal_spacing, 'values', 'gap'); -@mixin print-custom-name-spacing($data) { - - // get value list from $vertical_spacing - $allowedValuesList: map-get($vertical_spacing, 'values'); - - :root { - @each $name, $value in $data { - $isAllowedValue: map-search($allowedValuesList, $value); - // if the value is not existing in the $vertical_spacing, create 'px' for it - @if (not $isAllowedValue) { - @include get-variable(bb-spacing-#{replace-prop($name)}, format-value($value)); - } @else { - @include get-variable(bb-spacing-#{replace-prop($name)}, var(#{get-variable(bb-spacing-#{replace-prop($value)})})); - } - } - } -} - -@include vertical-spacing($vertical_spacing); -@include print-custom-name-spacing($custom_spacing); +@include generate-spacing-variables($vertical_spacing, 'spacing'); +@include generate-spacing-variables($horizontal_spacing, 'gap'); From 79bc1366b433a8f4e5c15706fb9eb860ef0b9f58 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 14 Nov 2023 13:53:53 +0700 Subject: [PATCH 05/14] fix(default-spacing): remove redundant commit --- css/spacing.css | 200 ++++++++++++++++++++++----------------------- scss/_helpers.scss | 2 +- 2 files changed, 101 insertions(+), 101 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index b65e408..dd86cb0 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -4,23 +4,23 @@ */ /* Margin auto */ .m-auto { - margin:auto; + margin:auto; } .mt-auto { - margin-top:auto; + margin-top:auto; } .mr-auto { - margin-right:auto; + margin-right:auto; } .mb-auto { - margin-bottom:auto; + margin-bottom:auto; } .ml-auto { - margin-left:auto; + margin-left:auto; } /** @@ -30,307 +30,307 @@ * custom spacing */ :root { - --bb-spacing-default:10px; - --bb-spacing-heading:20px; - --bb-spacing-paragraph:var(--bb-spacing-16); + --bb-spacing-default:10px; + --bb-spacing-heading:20px; + --bb-spacing-paragraph:var(--bb-spacing-16); } :root { - --bb-gap-vc-column:var(--bb-gap-20); - --bb-gap-container:40px; + --bb-gap-vc-column:var(--bb-gap-20); + --bb-gap-container:40px; } :root { - --bb-spacing-0:0; - --bb-spacing-1:1px; - --bb-spacing-2:2px; - --bb-spacing-4:4px; - --bb-spacing-6:6px; - --bb-spacing-8:8px; - --bb-spacing-12:12px; - --bb-spacing-16:16px; - --bb-spacing-24:24px; - --bb-spacing-32:32px; - --bb-spacing-48:48px; - --bb-spacing-64:64px; - --bb-spacing-96:96px; - --bb-spacing-128:128px; + --bb-spacing-0:0; + --bb-spacing-1:1px; + --bb-spacing-2:2px; + --bb-spacing-4:4px; + --bb-spacing-6:6px; + --bb-spacing-8:8px; + --bb-spacing-12:12px; + --bb-spacing-16:16px; + --bb-spacing-24:24px; + --bb-spacing-32:32px; + --bb-spacing-48:48px; + --bb-spacing-64:64px; + --bb-spacing-96:96px; + --bb-spacing-128:128px; } .pt0 { - padding-top:var(--bb-spacing-0); + padding-top:var(--bb-spacing-0); } .pb0 { - padding-bottom:var(--bb-spacing-0); + padding-bottom:var(--bb-spacing-0); } .mt0 { - margin-top:var(--bb-spacing-0); + margin-top:var(--bb-spacing-0); } .mb0 { - margin-bottom:var(--bb-spacing-0); + margin-bottom:var(--bb-spacing-0); } .pt1 { - padding-top:var(--bb-spacing-1); + padding-top:var(--bb-spacing-1); } .pb1 { - padding-bottom:var(--bb-spacing-1); + padding-bottom:var(--bb-spacing-1); } .mt1 { - margin-top:var(--bb-spacing-1); + margin-top:var(--bb-spacing-1); } .mb1 { - margin-bottom:var(--bb-spacing-1); + margin-bottom:var(--bb-spacing-1); } .pt2 { - padding-top:var(--bb-spacing-2); + padding-top:var(--bb-spacing-2); } .pb2 { - padding-bottom:var(--bb-spacing-2); + padding-bottom:var(--bb-spacing-2); } .mt2 { - margin-top:var(--bb-spacing-2); + margin-top:var(--bb-spacing-2); } .mb2 { - margin-bottom:var(--bb-spacing-2); + margin-bottom:var(--bb-spacing-2); } .pt4 { - padding-top:var(--bb-spacing-4); + padding-top:var(--bb-spacing-4); } .pb4 { - padding-bottom:var(--bb-spacing-4); + padding-bottom:var(--bb-spacing-4); } .mt4 { - margin-top:var(--bb-spacing-4); + margin-top:var(--bb-spacing-4); } .mb4 { - margin-bottom:var(--bb-spacing-4); + margin-bottom:var(--bb-spacing-4); } .pt6 { - padding-top:var(--bb-spacing-6); + padding-top:var(--bb-spacing-6); } .pb6 { - padding-bottom:var(--bb-spacing-6); + padding-bottom:var(--bb-spacing-6); } .mt6 { - margin-top:var(--bb-spacing-6); + margin-top:var(--bb-spacing-6); } .mb6 { - margin-bottom:var(--bb-spacing-6); + margin-bottom:var(--bb-spacing-6); } .pt8 { - padding-top:var(--bb-spacing-8); + padding-top:var(--bb-spacing-8); } .pb8 { - padding-bottom:var(--bb-spacing-8); + padding-bottom:var(--bb-spacing-8); } .mt8 { - margin-top:var(--bb-spacing-8); + margin-top:var(--bb-spacing-8); } .mb8 { - margin-bottom:var(--bb-spacing-8); + margin-bottom:var(--bb-spacing-8); } .pt12 { - padding-top:var(--bb-spacing-12); + padding-top:var(--bb-spacing-12); } .pb12 { - padding-bottom:var(--bb-spacing-12); + padding-bottom:var(--bb-spacing-12); } .mt12 { - margin-top:var(--bb-spacing-12); + margin-top:var(--bb-spacing-12); } .mb12 { - margin-bottom:var(--bb-spacing-12); + margin-bottom:var(--bb-spacing-12); } .pt16 { - padding-top:var(--bb-spacing-16); + padding-top:var(--bb-spacing-16); } .pb16 { - padding-bottom:var(--bb-spacing-16); + padding-bottom:var(--bb-spacing-16); } .mt16 { - margin-top:var(--bb-spacing-16); + margin-top:var(--bb-spacing-16); } .mb16 { - margin-bottom:var(--bb-spacing-16); + margin-bottom:var(--bb-spacing-16); } .pt24 { - padding-top:var(--bb-spacing-24); + padding-top:var(--bb-spacing-24); } .pb24 { - padding-bottom:var(--bb-spacing-24); + padding-bottom:var(--bb-spacing-24); } .mt24 { - margin-top:var(--bb-spacing-24); + margin-top:var(--bb-spacing-24); } .mb24 { - margin-bottom:var(--bb-spacing-24); + margin-bottom:var(--bb-spacing-24); } .pt32 { - padding-top:var(--bb-spacing-32); + padding-top:var(--bb-spacing-32); } .pb32 { - padding-bottom:var(--bb-spacing-32); + padding-bottom:var(--bb-spacing-32); } .mt32 { - margin-top:var(--bb-spacing-32); + margin-top:var(--bb-spacing-32); } .mb32 { - margin-bottom:var(--bb-spacing-32); + margin-bottom:var(--bb-spacing-32); } .pt48 { - padding-top:var(--bb-spacing-48); + padding-top:var(--bb-spacing-48); } .pb48 { - padding-bottom:var(--bb-spacing-48); + padding-bottom:var(--bb-spacing-48); } .mt48 { - margin-top:var(--bb-spacing-48); + margin-top:var(--bb-spacing-48); } .mb48 { - margin-bottom:var(--bb-spacing-48); + margin-bottom:var(--bb-spacing-48); } .pt64 { - padding-top:var(--bb-spacing-64); + padding-top:var(--bb-spacing-64); } .pb64 { - padding-bottom:var(--bb-spacing-64); + padding-bottom:var(--bb-spacing-64); } .mt64 { - margin-top:var(--bb-spacing-64); + margin-top:var(--bb-spacing-64); } .mb64 { - margin-bottom:var(--bb-spacing-64); + margin-bottom:var(--bb-spacing-64); } .pt96 { - padding-top:var(--bb-spacing-96); + padding-top:var(--bb-spacing-96); } .pb96 { - padding-bottom:var(--bb-spacing-96); + padding-bottom:var(--bb-spacing-96); } .mt96 { - margin-top:var(--bb-spacing-96); + margin-top:var(--bb-spacing-96); } .mb96 { - margin-bottom:var(--bb-spacing-96); + margin-bottom:var(--bb-spacing-96); } .pt128 { - padding-top:var(--bb-spacing-128); + padding-top:var(--bb-spacing-128); } .pb128 { - padding-bottom:var(--bb-spacing-128); + padding-bottom:var(--bb-spacing-128); } .mt128 { - margin-top:var(--bb-spacing-128); + margin-top:var(--bb-spacing-128); } .mb128 { - margin-bottom:var(--bb-spacing-128); + margin-bottom:var(--bb-spacing-128); } /* Breakpoint md */ @media only screen and (max-width:1024px) { - :root { - --bb-spacing-32:30px; - --bb-spacing-48:40px; - --bb-spacing-64:50px; - --bb-spacing-96:60px; - --bb-spacing-128:70px; - } + :root { + --bb-spacing-32:30px; + --bb-spacing-48:40px; + --bb-spacing-64:50px; + --bb-spacing-96:60px; + --bb-spacing-128:70px; + } } :root { - --bb-gap-20:20px; - --bb-gap-40:40px; + --bb-gap-20:20px; + --bb-gap-40:40px; } .pt20 { - padding-top:var(--bb-gap-20); + padding-top:var(--bb-gap-20); } .pb20 { - padding-bottom:var(--bb-gap-20); + padding-bottom:var(--bb-gap-20); } .mt20 { - margin-top:var(--bb-gap-20); + margin-top:var(--bb-gap-20); } .mb20 { - margin-bottom:var(--bb-gap-20); + margin-bottom:var(--bb-gap-20); } .pt40 { - padding-top:var(--bb-gap-40); + padding-top:var(--bb-gap-40); } .pb40 { - padding-bottom:var(--bb-gap-40); + padding-bottom:var(--bb-gap-40); } .mt40 { - margin-top:var(--bb-gap-40); + margin-top:var(--bb-gap-40); } .mb40 { - margin-bottom:var(--bb-gap-40); + margin-bottom:var(--bb-gap-40); } /* Breakpoint md */ @media only screen and (max-width:1024px) { - :root { - --bb-gap-40:20px; - } + :root { + --bb-gap-40:20px; + } } diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 23e6dd6..cf72c4a 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -459,7 +459,7 @@ :root { @each $name, $value in $map_name { - $isHavingUnit: get-unit($value); + $isHavingUnit: get-unit($value) == ""; $isAllowedValue: map-search($allowedValuesList, $value); // if the value is existing in the $map_name and it does not have unit value => create variable value @if ($isAllowedValue and $isHavingUnit == "") { From b7edb7a3809ab871cc8a97490613a73c7cded600 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 14 Nov 2023 13:57:39 +0700 Subject: [PATCH 06/14] fix(default-spacing): remove redundant commit --- css/spacing.css | 182 +++++++++++++++++++++++----------------------- scss/_config.scss | 54 +++++++------- 2 files changed, 118 insertions(+), 118 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index dd86cb0..c4da7ed 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -30,307 +30,307 @@ * custom spacing */ :root { - --bb-spacing-default:10px; - --bb-spacing-heading:20px; - --bb-spacing-paragraph:var(--bb-spacing-16); + --spacing-default:10px; + --spacing-heading:20px; + --spacing-paragraph:16px; } :root { - --bb-gap-vc-column:var(--bb-gap-20); - --bb-gap-container:40px; + --gap-vc-column:20px; + --gap-container:40px; } :root { - --bb-spacing-0:0; - --bb-spacing-1:1px; - --bb-spacing-2:2px; - --bb-spacing-4:4px; - --bb-spacing-6:6px; - --bb-spacing-8:8px; - --bb-spacing-12:12px; - --bb-spacing-16:16px; - --bb-spacing-24:24px; - --bb-spacing-32:32px; - --bb-spacing-48:48px; - --bb-spacing-64:64px; - --bb-spacing-96:96px; - --bb-spacing-128:128px; + --spacing-0:0; + --spacing-1:1px; + --spacing-2:2px; + --spacing-4:4px; + --spacing-6:6px; + --spacing-8:8px; + --spacing-12:12px; + --spacing-16:16px; + --spacing-24:24px; + --spacing-32:32px; + --spacing-48:48px; + --spacing-64:64px; + --spacing-96:96px; + --spacing-128:128px; } .pt0 { - padding-top:var(--bb-spacing-0); + padding-top:var(--spacing-0); } .pb0 { - padding-bottom:var(--bb-spacing-0); + padding-bottom:var(--spacing-0); } .mt0 { - margin-top:var(--bb-spacing-0); + margin-top:var(--spacing-0); } .mb0 { - margin-bottom:var(--bb-spacing-0); + margin-bottom:var(--spacing-0); } .pt1 { - padding-top:var(--bb-spacing-1); + padding-top:var(--spacing-1); } .pb1 { - padding-bottom:var(--bb-spacing-1); + padding-bottom:var(--spacing-1); } .mt1 { - margin-top:var(--bb-spacing-1); + margin-top:var(--spacing-1); } .mb1 { - margin-bottom:var(--bb-spacing-1); + margin-bottom:var(--spacing-1); } .pt2 { - padding-top:var(--bb-spacing-2); + padding-top:var(--spacing-2); } .pb2 { - padding-bottom:var(--bb-spacing-2); + padding-bottom:var(--spacing-2); } .mt2 { - margin-top:var(--bb-spacing-2); + margin-top:var(--spacing-2); } .mb2 { - margin-bottom:var(--bb-spacing-2); + margin-bottom:var(--spacing-2); } .pt4 { - padding-top:var(--bb-spacing-4); + padding-top:var(--spacing-4); } .pb4 { - padding-bottom:var(--bb-spacing-4); + padding-bottom:var(--spacing-4); } .mt4 { - margin-top:var(--bb-spacing-4); + margin-top:var(--spacing-4); } .mb4 { - margin-bottom:var(--bb-spacing-4); + margin-bottom:var(--spacing-4); } .pt6 { - padding-top:var(--bb-spacing-6); + padding-top:var(--spacing-6); } .pb6 { - padding-bottom:var(--bb-spacing-6); + padding-bottom:var(--spacing-6); } .mt6 { - margin-top:var(--bb-spacing-6); + margin-top:var(--spacing-6); } .mb6 { - margin-bottom:var(--bb-spacing-6); + margin-bottom:var(--spacing-6); } .pt8 { - padding-top:var(--bb-spacing-8); + padding-top:var(--spacing-8); } .pb8 { - padding-bottom:var(--bb-spacing-8); + padding-bottom:var(--spacing-8); } .mt8 { - margin-top:var(--bb-spacing-8); + margin-top:var(--spacing-8); } .mb8 { - margin-bottom:var(--bb-spacing-8); + margin-bottom:var(--spacing-8); } .pt12 { - padding-top:var(--bb-spacing-12); + padding-top:var(--spacing-12); } .pb12 { - padding-bottom:var(--bb-spacing-12); + padding-bottom:var(--spacing-12); } .mt12 { - margin-top:var(--bb-spacing-12); + margin-top:var(--spacing-12); } .mb12 { - margin-bottom:var(--bb-spacing-12); + margin-bottom:var(--spacing-12); } .pt16 { - padding-top:var(--bb-spacing-16); + padding-top:var(--spacing-16); } .pb16 { - padding-bottom:var(--bb-spacing-16); + padding-bottom:var(--spacing-16); } .mt16 { - margin-top:var(--bb-spacing-16); + margin-top:var(--spacing-16); } .mb16 { - margin-bottom:var(--bb-spacing-16); + margin-bottom:var(--spacing-16); } .pt24 { - padding-top:var(--bb-spacing-24); + padding-top:var(--spacing-24); } .pb24 { - padding-bottom:var(--bb-spacing-24); + padding-bottom:var(--spacing-24); } .mt24 { - margin-top:var(--bb-spacing-24); + margin-top:var(--spacing-24); } .mb24 { - margin-bottom:var(--bb-spacing-24); + margin-bottom:var(--spacing-24); } .pt32 { - padding-top:var(--bb-spacing-32); + padding-top:var(--spacing-32); } .pb32 { - padding-bottom:var(--bb-spacing-32); + padding-bottom:var(--spacing-32); } .mt32 { - margin-top:var(--bb-spacing-32); + margin-top:var(--spacing-32); } .mb32 { - margin-bottom:var(--bb-spacing-32); + margin-bottom:var(--spacing-32); } .pt48 { - padding-top:var(--bb-spacing-48); + padding-top:var(--spacing-48); } .pb48 { - padding-bottom:var(--bb-spacing-48); + padding-bottom:var(--spacing-48); } .mt48 { - margin-top:var(--bb-spacing-48); + margin-top:var(--spacing-48); } .mb48 { - margin-bottom:var(--bb-spacing-48); + margin-bottom:var(--spacing-48); } .pt64 { - padding-top:var(--bb-spacing-64); + padding-top:var(--spacing-64); } .pb64 { - padding-bottom:var(--bb-spacing-64); + padding-bottom:var(--spacing-64); } .mt64 { - margin-top:var(--bb-spacing-64); + margin-top:var(--spacing-64); } .mb64 { - margin-bottom:var(--bb-spacing-64); + margin-bottom:var(--spacing-64); } .pt96 { - padding-top:var(--bb-spacing-96); + padding-top:var(--spacing-96); } .pb96 { - padding-bottom:var(--bb-spacing-96); + padding-bottom:var(--spacing-96); } .mt96 { - margin-top:var(--bb-spacing-96); + margin-top:var(--spacing-96); } .mb96 { - margin-bottom:var(--bb-spacing-96); + margin-bottom:var(--spacing-96); } .pt128 { - padding-top:var(--bb-spacing-128); + padding-top:var(--spacing-128); } .pb128 { - padding-bottom:var(--bb-spacing-128); + padding-bottom:var(--spacing-128); } .mt128 { - margin-top:var(--bb-spacing-128); + margin-top:var(--spacing-128); } .mb128 { - margin-bottom:var(--bb-spacing-128); + margin-bottom:var(--spacing-128); } /* Breakpoint md */ @media only screen and (max-width:1024px) { :root { - --bb-spacing-32:30px; - --bb-spacing-48:40px; - --bb-spacing-64:50px; - --bb-spacing-96:60px; - --bb-spacing-128:70px; + --spacing-32:30px; + --spacing-48:40px; + --spacing-64:50px; + --spacing-96:60px; + --spacing-128:70px; } } :root { - --bb-gap-20:20px; - --bb-gap-40:40px; + --gap-20:20px; + --gap-40:40px; } .pt20 { - padding-top:var(--bb-gap-20); + padding-top:var(--gap-20); } .pb20 { - padding-bottom:var(--bb-gap-20); + padding-bottom:var(--gap-20); } .mt20 { - margin-top:var(--bb-gap-20); + margin-top:var(--gap-20); } .mb20 { - margin-bottom:var(--bb-gap-20); + margin-bottom:var(--gap-20); } .pt40 { - padding-top:var(--bb-gap-40); + padding-top:var(--gap-40); } .pb40 { - padding-bottom:var(--bb-gap-40); + padding-bottom:var(--gap-40); } .mt40 { - margin-top:var(--bb-gap-40); + margin-top:var(--gap-40); } .mb40 { - margin-bottom:var(--bb-gap-40); + margin-bottom:var(--gap-40); } /* Breakpoint md */ @media only screen and (max-width:1024px) { :root { - --bb-gap-40:20px; + --gap-40:20px; } } diff --git a/scss/_config.scss b/scss/_config.scss index ce424c8..15b38e6 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -3,41 +3,41 @@ @import "defs"; // Project info -$info: ( - name: 'Atomic CSS', - variable-prefix: 'bb' -); +//$info: ( +// name: 'Atomic CSS', +// variable-prefix: 'bb' +//); // font family -$fonts: ( - primary: ( - font-face: "'Be Vietnam Pro', sans-serif", - weight: 400 500 700 - ), - icomoon: "'icomoon', fantasy" -); +//$fonts: ( +// primary: ( +// font-face: "'Be Vietnam Pro', sans-serif", +// weight: 400 500 700 +// ), +// icomoon: "'icomoon', fantasy" +//); // colors -$colors: ( - primary: '#1c44ad', - dark: '#1a1b1c', - "gray": '#f6f6f6', - light-blue: '#115df7', - dark-blue: '#21297d' -); +//$colors: ( +// primary: '#1c44ad', +// dark: '#1a1b1c', +// "gray": '#f6f6f6', +// light-blue: '#115df7', +// dark-blue: '#21297d' +//); // aspect ratio -$aspect_ratio: ( - "custom":"1280/768" -); +//$aspect_ratio: ( +// "custom":"1280/768" +//); // breakpoints -$breakpoints: ( - "lg": 1280px, - "md": 1024px, - "sm": 768px, - "xs": 480px, -); +//$breakpoints: ( +// "lg": 1280px, +// "md": 1024px, +// "sm": 768px, +// "xs": 480px, +//); // vertical spacing From 3d1590304cf2c830bf315b625b17a59df43ac243 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 14 Nov 2023 18:15:03 +0700 Subject: [PATCH 07/14] fix(default-spacing): remove redundant commit and add comment --- scss/_config.scss | 5 ++--- scss/_helpers.scss | 34 ++++++++++++++++++++-------------- scss/spacing.scss | 4 ++-- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/scss/_config.scss b/scss/_config.scss index 15b38e6..be2cd36 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -5,7 +5,7 @@ // Project info //$info: ( // name: 'Atomic CSS', -// variable-prefix: 'bb' +// variable-prefix: '' //); // font family @@ -39,7 +39,6 @@ // "xs": 480px, //); - // vertical spacing $vertical_spacing: ( "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, @@ -63,4 +62,4 @@ $horizontal_spacing: ( $gap_spacing: ( "vc-column":20, "container":40px, -) +); diff --git a/scss/_helpers.scss b/scss/_helpers.scss index cf72c4a..f404a3f 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -441,6 +441,8 @@ @return --#{$project-prefix}#{$prop}; } +// Find a value from the key in list +// ($list:0 1 2 4 6 8 12 16 24 32 48 64 96 128, $value: 48) => true @function map-search($list, $value) { @for $i from 1 through length($list) { @if (nth($list, $i) == $value) { @@ -450,23 +452,27 @@ @return false; } -// Define if the value is containing any 'px' postfix, create 'px' if it not -@mixin print-variables-in-root($map_name, $map_container , $key_name, $prefix) { - $project-prefix: map-get($info, 'variable-prefix'); - - // get value list from $map_name - $allowedValuesList: map-get($map_container, $key_name); +// Define if the value is containing any CSS unit, create CSS unit if it not +@mixin print-variables-in-root($list_responsive_values, $list_responsive_names, $variable_name) { + // get value list from $list_responsive_names + $allowed_values_list: map-get($list_responsive_values, "values"); :root { - @each $name, $value in $map_name { - $isHavingUnit: get-unit($value) == ""; - $isAllowedValue: map-search($allowedValuesList, $value); - // if the value is existing in the $map_name and it does not have unit value => create variable value - @if ($isAllowedValue and $isHavingUnit == "") { - @include get-variable(#{$prefix}-#{replace-prop($name)}, var(#{get-variable(#{$prefix}-#{replace-prop($value)})})); - } @else { - @include get-variable(#{$prefix}-#{replace-prop($name)}, format-value($value)); + @each $responsive_name, $responsive_value in $list_responsive_names { + $newValue: format-value($responsive_value); // e.g. 90px + + // check if $responsive_value is containing any CSS unit + $has_unit: get-unit($responsive_value) != ""; + + // check if $responsive_value in $list_responsive_names + $is_allowed_value: map-search($allowed_values_list, $responsive_value); + + // use responsive variable + @if ($is_allowed_value and not $has_unit) { + $newValue: var(#{get-variable(#{$variable_name}-#{replace-prop($responsive_value)})}); // => var(--$variable_name-90); } + + @include get-variable(#{$variable_name}-#{replace-prop($responsive_name)}, $newValue); // => --gap-container: $newValue; } } } diff --git a/scss/spacing.scss b/scss/spacing.scss index d9e9a7b..b26b6e4 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -88,8 +88,8 @@ $classes: ("m":"margin", "p":"padding"); /** * custom spacing */ -@include print-variables-in-root($custom_spacing, $vertical_spacing, 'values', 'spacing'); -@include print-variables-in-root($gap_spacing, $horizontal_spacing, 'values', 'gap'); +@include print-variables-in-root($vertical_spacing, $custom_spacing, 'spacing'); +@include print-variables-in-root($horizontal_spacing, $gap_spacing, 'gap'); @include generate-spacing-variables($vertical_spacing, 'spacing'); @include generate-spacing-variables($horizontal_spacing, 'gap'); From cc5faf4e41b4153b75b4e60760cdd6a8aca53fe2 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Thu, 23 Nov 2023 09:45:27 +0700 Subject: [PATCH 08/14] fix(loading): add comment --- scss/_config.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_config.scss b/scss/_config.scss index be2cd36..4a782aa 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -45,7 +45,7 @@ $vertical_spacing: ( "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, ); -// custom spacing +// custom spacing (vertical) $custom_spacing: ( 'default':10, 'heading':20, From 7969910eafd77a32a95ce381478ddb13056ff97f Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 28 Nov 2023 10:10:31 +0700 Subject: [PATCH 09/14] fix(loading): add comment and change name for spacing generator function --- css/spacing.css | 312 ++--------------------- dist/atomic.css | 596 +++++++++++++++++++++++--------------------- dist/atomic.min.css | 2 +- scss/_config.scss | 34 +-- scss/_defs.scss | 14 +- scss/spacing.scss | 2 +- 6 files changed, 365 insertions(+), 595 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index c4da7ed..8fef571 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -4,23 +4,23 @@ */ /* Margin auto */ .m-auto { - margin:auto; + margin: auto; } .mt-auto { - margin-top:auto; + margin-top: auto; } .mr-auto { - margin-right:auto; + margin-right: auto; } .mb-auto { - margin-bottom:auto; + margin-bottom: auto; } .ml-auto { - margin-left:auto; + margin-left: auto; } /** @@ -30,307 +30,41 @@ * custom spacing */ :root { - --spacing-default:10px; - --spacing-heading:20px; - --spacing-paragraph:16px; + --spacing-0px: 0; } -:root { - --gap-vc-column:20px; - --gap-container:40px; -} - -:root { - --spacing-0:0; - --spacing-1:1px; - --spacing-2:2px; - --spacing-4:4px; - --spacing-6:6px; - --spacing-8:8px; - --spacing-12:12px; - --spacing-16:16px; - --spacing-24:24px; - --spacing-32:32px; - --spacing-48:48px; - --spacing-64:64px; - --spacing-96:96px; - --spacing-128:128px; -} - -.pt0 { - padding-top:var(--spacing-0); -} - -.pb0 { - padding-bottom:var(--spacing-0); -} - -.mt0 { - margin-top:var(--spacing-0); -} - -.mb0 { - margin-bottom:var(--spacing-0); -} - -.pt1 { - padding-top:var(--spacing-1); -} - -.pb1 { - padding-bottom:var(--spacing-1); +.pt0px { + padding-top: var(--spacing-0px); } -.mt1 { - margin-top:var(--spacing-1); +.pb0px { + padding-bottom: var(--spacing-0px); } -.mb1 { - margin-bottom:var(--spacing-1); +.mt0px { + margin-top: var(--spacing-0px); } -.pt2 { - padding-top:var(--spacing-2); +.mb0px { + margin-bottom: var(--spacing-0px); } -.pb2 { - padding-bottom:var(--spacing-2); -} - -.mt2 { - margin-top:var(--spacing-2); -} - -.mb2 { - margin-bottom:var(--spacing-2); -} - -.pt4 { - padding-top:var(--spacing-4); -} - -.pb4 { - padding-bottom:var(--spacing-4); -} - -.mt4 { - margin-top:var(--spacing-4); -} - -.mb4 { - margin-bottom:var(--spacing-4); -} - -.pt6 { - padding-top:var(--spacing-6); -} - -.pb6 { - padding-bottom:var(--spacing-6); -} - -.mt6 { - margin-top:var(--spacing-6); -} - -.mb6 { - margin-bottom:var(--spacing-6); -} - -.pt8 { - padding-top:var(--spacing-8); -} - -.pb8 { - padding-bottom:var(--spacing-8); -} - -.mt8 { - margin-top:var(--spacing-8); -} - -.mb8 { - margin-bottom:var(--spacing-8); -} - -.pt12 { - padding-top:var(--spacing-12); -} - -.pb12 { - padding-bottom:var(--spacing-12); -} - -.mt12 { - margin-top:var(--spacing-12); -} - -.mb12 { - margin-bottom:var(--spacing-12); -} - -.pt16 { - padding-top:var(--spacing-16); -} - -.pb16 { - padding-bottom:var(--spacing-16); -} - -.mt16 { - margin-top:var(--spacing-16); -} - -.mb16 { - margin-bottom:var(--spacing-16); -} - -.pt24 { - padding-top:var(--spacing-24); -} - -.pb24 { - padding-bottom:var(--spacing-24); -} - -.mt24 { - margin-top:var(--spacing-24); -} - -.mb24 { - margin-bottom:var(--spacing-24); -} - -.pt32 { - padding-top:var(--spacing-32); -} - -.pb32 { - padding-bottom:var(--spacing-32); -} - -.mt32 { - margin-top:var(--spacing-32); -} - -.mb32 { - margin-bottom:var(--spacing-32); -} - -.pt48 { - padding-top:var(--spacing-48); -} - -.pb48 { - padding-bottom:var(--spacing-48); -} - -.mt48 { - margin-top:var(--spacing-48); -} - -.mb48 { - margin-bottom:var(--spacing-48); -} - -.pt64 { - padding-top:var(--spacing-64); -} - -.pb64 { - padding-bottom:var(--spacing-64); -} - -.mt64 { - margin-top:var(--spacing-64); -} - -.mb64 { - margin-bottom:var(--spacing-64); -} - -.pt96 { - padding-top:var(--spacing-96); -} - -.pb96 { - padding-bottom:var(--spacing-96); -} - -.mt96 { - margin-top:var(--spacing-96); -} - -.mb96 { - margin-bottom:var(--spacing-96); -} - -.pt128 { - padding-top:var(--spacing-128); -} - -.pb128 { - padding-bottom:var(--spacing-128); -} - -.mt128 { - margin-top:var(--spacing-128); -} - -.mb128 { - margin-bottom:var(--spacing-128); -} - -/* Breakpoint md */ -@media only screen and (max-width:1024px) { - :root { - --spacing-32:30px; - --spacing-48:40px; - --spacing-64:50px; - --spacing-96:60px; - --spacing-128:70px; - } -} :root { - --gap-20:20px; - --gap-40:40px; -} - -.pt20 { - padding-top:var(--gap-20); -} - -.pb20 { - padding-bottom:var(--gap-20); -} - -.mt20 { - margin-top:var(--gap-20); -} - -.mb20 { - margin-bottom:var(--gap-20); -} - -.pt40 { - padding-top:var(--gap-40); + --gap-0px: 0; } -.pb40 { - padding-bottom:var(--gap-40); +.pt0px { + padding-top: var(--gap-0px); } -.mt40 { - margin-top:var(--gap-40); +.pb0px { + padding-bottom: var(--gap-0px); } -.mb40 { - margin-bottom:var(--gap-40); +.mt0px { + margin-top: var(--gap-0px); } -/* Breakpoint md */ -@media only screen and (max-width:1024px) { - :root { - --gap-40:20px; - } +.mb0px { + margin-bottom: var(--gap-0px); } diff --git a/dist/atomic.css b/dist/atomic.css index 7d7ee2c..7d3ba89 100644 --- a/dist/atomic.css +++ b/dist/atomic.css @@ -8,46 +8,69 @@ */ /* Margin auto */ .m-auto { - margin:auto; + margin: auto; } .mt-auto { - margin-top:auto; + margin-top: auto; } .mr-auto { - margin-right:auto; + margin-right: auto; } .mb-auto { - margin-bottom:auto; + margin-bottom: auto; } .ml-auto { - margin-left:auto; + margin-left: auto; } /** - * Vertical Spacing + * General spacing variables */ +/** + * custom spacing + */ +:root { + --spacing-0px: 0; +} + +.pt0px { + padding-top: var(--spacing-0px); +} + +.pb0px { + padding-bottom: var(--spacing-0px); +} + +.mt0px { + margin-top: var(--spacing-0px); +} + +.mb0px { + margin-bottom: var(--spacing-0px); +} + :root { - --spacing-0:0; + --gap-0px: 0; } -.pt0 { - padding-top:var(--spacing-0); +.pt0px { + padding-top: var(--gap-0px); } -.pb0 { - padding-bottom:var(--spacing-0); +.pb0px { + padding-bottom: var(--gap-0px); } -.mt0 { - margin-top:var(--spacing-0); +.mt0px { + margin-top: var(--gap-0px); } -.mb0 { - margin-bottom:var(--spacing-0); +.mb0px { + margin-bottom: var(--gap-0px); } /** @@ -56,175 +79,175 @@ */ /* Positions */ .ps-absolute { - position:absolute; + position: absolute; } .ps-fixed { - position:fixed; + position: fixed; } .ps-relative { - position:relative; + position: relative; } .ps-static { - position:static; + position: static; } .ps-sticky { - position:sticky; + position: sticky; } /* Coordinates */ .t0 { - top:0; + top: 0; } .r0 { - right:0; + right: 0; } .b0 { - bottom:0; + bottom: 0; } .l0 { - left:0; + left: 0; } .t50p { - top:50%; + top: 50%; } .r50p { - right:50%; + right: 50%; } .b50p { - bottom:50%; + bottom: 50%; } .l50p { - left:50%; + left: 50%; } .t100p { - top:100%; + top: 100%; } .r100p { - right:100%; + right: 100%; } .b100p { - bottom:100%; + bottom: 100%; } .l100p { - left:100%; + left: 100%; } /* Coordinates - auto */ .t-auto { - top:auto; + top: auto; } .r-auto { - right:auto; + right: auto; } .b-auto { - bottom:auto; + bottom: auto; } .l-auto { - left:auto; + left: auto; } /* ab-center */ .ab-center { - position:absolute; - top:50%; - left:50%; - transform:translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } /* ab-center-v */ .ab-center-v { - position:absolute; - top:50%; - transform:translateY(-50%); + position: absolute; + top: 50%; + transform: translateY(-50%); } /* ab-center-h */ .ab-center-h { - position:absolute; - left:50%; - transform:translateX(-50%); + position: absolute; + left: 50%; + transform: translateX(-50%); } /* ab-full */ .ab-full, .ab-full-b:before, .ab-full-a:after, .ab-full-ba:before, .ab-full-ba:after { - position:absolute; - top:0; - right:0; - bottom:0; - left:0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } /* ab-full-content */ .ab-full-b:before, .ab-full-a:after, .ab-full-ba:before, .ab-full-ba:after { - content:""; + content: ""; } /* z-hide */ .z-hide { - z-index:-1; + z-index: -1; } /* z-index */ .z1 { - z-index:1; + z-index: 1; } .z2 { - z-index:2; + z-index: 2; } .z3 { - z-index:3; + z-index: 3; } .z4 { - z-index:4; + z-index: 4; } .z5 { - z-index:5; + z-index: 5; } .z10 { - z-index:10; + z-index: 10; } .z20 { - z-index:20; + z-index: 20; } .z30 { - z-index:30; + z-index: 30; } .z40 { - z-index:40; + z-index: 40; } .z100 { - z-index:100; + z-index: 100; } .z99999999 { - z-index:99999999; + z-index: 99999999; } /** @@ -233,187 +256,187 @@ */ /* font-family */ .ff-sans { - font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .ff-serif { - font-family:Georgia, Cambria, "Times New Roman", Times, serif; + font-family: Georgia, Cambria, "Times New Roman", Times, serif; } /* color */ .fc-white { - color:#fff; + color: #fff; } .fc-black { - color:#000; + color: #000; } /* background-color */ .bg-white { - background-color:#fff; + background-color: #fff; } .bg-black { - background-color:#000; + background-color: #000; } /* font-weight */ .fw-normal { - font-weight:400; + font-weight: 400; } .fw-bold { - font-weight:700; + font-weight: 700; } /* line-height */ .lh-xs { - line-height:1; + line-height: 1; } .lh-sm { - line-height:1.15; + line-height: 1.15; } .lh-md { - line-height:1.3; + line-height: 1.3; } .lh-lg { - line-height:1.6; + line-height: 1.6; } .lh-xl { - line-height:1.92; + line-height: 1.92; } .lh-xxl { - line-height:2; + line-height: 2; } .lh-unset { - line-height:unset; + line-height: unset; } /* font-style */ .fs-normal { - font-style:normal; + font-style: normal; } .fs-italic { - font-style:italic; + font-style: italic; } /* text-transform */ .tt-capitalize { - text-transform:capitalize; + text-transform: capitalize; } .tt-lowercase { - text-transform:lowercase; + text-transform: lowercase; } .tt-uppercase { - text-transform:uppercase; + text-transform: uppercase; } .tt-none { - text-transform:none; + text-transform: none; } .tt-unset { - text-transform:unset; + text-transform: unset; } /* text-decoration */ .td-underline { - text-decoration:underline; + text-decoration: underline; } .td-none { - text-decoration:none; + text-decoration: none; } /* text-align */ .ta-left { - text-align:left; + text-align: left; } .ta-center { - text-align:center; + text-align: center; } .ta-right { - text-align:right; + text-align: right; } .ta-justify { - text-align:justify; + text-align: justify; } /* white-space */ .ws-normal { - white-space:normal; + white-space: normal; } .ws-nowrap { - white-space:nowrap; + white-space: nowrap; } .ws-pre { - white-space:pre; + white-space: pre; } .ws-pre-wrap { - white-space:pre-wrap; + white-space: pre-wrap; } .ws-pre-line { - white-space:pre-line; + white-space: pre-line; } /* word-break */ .wb-normal { - word-break:normal; + word-break: normal; } .wb-break-all { - word-break:break-all; + word-break: break-all; } .wb-keep-all { - word-break:keep-all; + word-break: keep-all; } .wb-inherit { - word-break:inherit; + word-break: inherit; } .wb-initial { - word-break:initial; + word-break: initial; } .wb-unset { - word-break:unset; + word-break: unset; } /* break-word */ .break-word { - word-break:break-word; - word-wrap:break-word; - overflow-wrap:break-word; - hyphens:auto; + word-break: break-word; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; } :root { - --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - --font-serif:Georgia, Cambria, "Times New Roman", Times, serif; + --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --font-serif: Georgia, Cambria, "Times New Roman", Times, serif; } :root { - --color-white:#fff; - --color-black:#000; + --color-white: #fff; + --color-black: #000; } /** @@ -422,47 +445,47 @@ */ /* display */ .d-block { - display:block; + display: block; } .d-inline { - display:inline; + display: inline; } .d-inline-block { - display:inline-block; + display: inline-block; } .d-flex { - display:flex; + display: flex; } .d-inline-flex { - display:inline-flex; + display: inline-flex; } .d-grid { - display:grid; + display: grid; } .d-inline-grid { - display:inline-grid; + display: inline-grid; } .d-table { - display:table; + display: table; } .d-table-cell { - display:table-cell; + display: table-cell; } .d-none { - display:none; + display: none; } .d-unset { - display:unset; + display: unset; } /** @@ -471,153 +494,153 @@ */ /* align-content */ .ac-stretch { - align-content:stretch; + align-content: stretch; } .ac-center { - align-content:center; + align-content: center; } .ac-start { - align-content:flex-start; + align-content: flex-start; } .ac-end { - align-content:flex-end; + align-content: flex-end; } .ac-space-between { - align-content:space-between; + align-content: space-between; } .ac-space-around { - align-content:space-around; + align-content: space-around; } /* align-items */ .ai-stretch { - align-items:stretch; + align-items: stretch; } .ai-center { - align-items:center; + align-items: center; } .ai-start { - align-items:flex-start; + align-items: flex-start; } .ai-end { - align-items:flex-end; + align-items: flex-end; } .ai-baseline { - align-items:baseline; + align-items: baseline; } /* align-self */ .as-auto { - align-self:auto; + align-self: auto; } .as-stretch { - align-self:stretch; + align-self: stretch; } .as-center { - align-self:center; + align-self: center; } .as-start { - align-self:flex-start; + align-self: flex-start; } .as-end { - align-self:flex-end; + align-self: flex-end; } .as-baseline { - align-self:baseline; + align-self: baseline; } /* flex-direction */ .fd-row { - flex-direction:row; + flex-direction: row; } .fd-row-reverse { - flex-direction:row-reverse; + flex-direction: row-reverse; } .fd-column { - flex-direction:column; + flex-direction: column; } .fd-column-reverse { - flex-direction:column-reverse; + flex-direction: column-reverse; } /* flex-wrap */ .fw-nowrap { - flex-wrap:nowrap; + flex-wrap: nowrap; } .fw-wrap { - flex-wrap:wrap; + flex-wrap: wrap; } .fw-wrap-reverse { - flex-wrap:wrap-reverse; + flex-wrap: wrap-reverse; } /* justify-content */ .jc-start { - justify-content:flex-start; + justify-content: flex-start; } .jc-end { - justify-content:flex-end; + justify-content: flex-end; } .jc-center { - justify-content:center; + justify-content: center; } .jc-space-between { - justify-content:space-between; + justify-content: space-between; } .jc-space-around { - justify-content:space-around; + justify-content: space-around; } .jc-space-evenly { - justify-content:space-evenly; + justify-content: space-evenly; } /* fl-center */ .fl-center { - display:flex; - align-items:center; - justify-content:center; + display: flex; + align-items: center; + justify-content: center; } /* fl-center-v */ .fl-center-v { - display:flex; - align-items:center; + display: flex; + align-items: center; } /* fl-center-h */ .fl-center-h { - display:flex; - justify-content:center; + display: flex; + justify-content: center; } /* fl-grid */ .fl-grid { - display:flex; - flex-wrap:wrap; + display: flex; + flex-wrap: wrap; } /** @@ -626,55 +649,55 @@ */ /* transition */ .t { - transition-duration:.25s; - transition-property:all; - transition-timing-function:ease; - transition-delay:0s; + transition-duration: .25s; + transition-property: all; + transition-timing-function: ease; + transition-delay: 0s; } /* slow */ .t-slow { - transition-duration:.6s; + transition-duration: .6s; } /* fast */ .t-fast { - transition-duration:.1s; + transition-duration: .1s; } /* opacity */ .t-opacity { - transition-property:opacity; + transition-property: opacity; } /* opacity-color */ .t-opacity-color { - transition-property:opacity, color; + transition-property: opacity, color; } /* transform */ .t-transform { - transition-property:transform; + transition-property: transform; } /* transform-opacity */ .t-transform-opacity { - transition-property:transform, opacity; + transition-property: transform, opacity; } /* transform-opacity-color */ .t-transform-opacity-color { - transition-property:transform, opacity, color; + transition-property: transform, opacity, color; } /* transform-color */ .t-transform-color { - transition-property:transform, color; + transition-property: transform, color; } /* color */ .t-color { - transition-property:color; + transition-property: color; } /** @@ -683,28 +706,28 @@ */ /* object-fit */ .of-fill { - object-fit:fill; + object-fit: fill; } .of-contain { - object-fit:contain; + object-fit: contain; } .of-cover { - object-fit:cover; + object-fit: cover; } .of-scale-down { - object-fit:scale-down; + object-fit: scale-down; } .of-none { - object-fit:none; + object-fit: none; } /* object-position */ .op-center { - object-position:center; + object-position: center; } /** @@ -713,29 +736,29 @@ */ /* pointer-events */ .pe-auto { - pointer-events:auto; + pointer-events: auto; } .pe-none { - pointer-events:none; + pointer-events: none; } /* user-select */ .us-auto { - user-select:auto; + user-select: auto; } .us-none { - user-select:none; + user-select: none; } /* user-drag */ .ud-auto { - user-drag:auto; + user-drag: auto; } .ud-none { - user-drag:none; + user-drag: none; } /** @@ -744,45 +767,45 @@ */ /* overflow */ .overflow-visible { - overflow:visible; + overflow: visible; } .overflow-hidden { - overflow:hidden; + overflow: hidden; } .overflow-scroll { - overflow:scroll; + overflow: scroll; } .overflow-auto { - overflow:auto; + overflow: auto; } /* overflow-x */ .overflow-x-hidden { - overflow-x:hidden; + overflow-x: hidden; } .overflow-x-scroll { - overflow-x:scroll; + overflow-x: scroll; } .overflow-x-auto { - overflow-x:auto; + overflow-x: auto; } /* overflow-y */ .overflow-y-hidden { - overflow-y:hidden; + overflow-y: hidden; } .overflow-y-scroll { - overflow-y:scroll; + overflow-y: scroll; } .overflow-y-auto { - overflow-y:auto; + overflow-y: auto; } /** @@ -791,44 +814,44 @@ */ /* bar-pill */ .bar-pill { - border-radius:1000px; + border-radius: 1000px; } /* bar-circle */ .bar-circle { - border-radius:100%; + border-radius: 100%; } /* border-radius */ .bar0 { - border-radius:0; + border-radius: 0; } .bar3px { - border-radius:3px; + border-radius: 3px; } .bar5px { - border-radius:5px; + border-radius: 5px; } .bar10px { - border-radius:10px; + border-radius: 10px; } .bar15px { - border-radius:15px; + border-radius: 15px; } /** * Skeleton */ .skeleton-bg { - background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==); - background-size:30px; - background-repeat:no-repeat; - background-position:center; - background-color:#eee; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==); + background-size: 30px; + background-repeat: no-repeat; + background-position: center; + background-color: #eee; } /** @@ -836,94 +859,94 @@ */ /* w-auto */ .w-auto { - width:auto; + width: auto; } /* width */ .w0 { - width:0; + width: 0; } .w10 { - width:10%; + width: 10%; } .w20 { - width:20%; + width: 20%; } .w25 { - width:25%; + width: 25%; } .w30 { - width:30%; + width: 30%; } .w40 { - width:40%; + width: 40%; } .w50 { - width:50%; + width: 50%; } .w60 { - width:60%; + width: 60%; } .w70 { - width:70%; + width: 70%; } .w75 { - width:75%; + width: 75%; } .w80 { - width:80%; + width: 80%; } .w90 { - width:90%; + width: 90%; } .w100 { - width:100%; + width: 100%; } /* w33 */ .w33 { - width:33.33%; + width: 33.33%; } /* w66 */ .w66 { - width:66.67%; + width: 66.67%; } /* w-screen */ .w-screen { - width:100vw; + width: 100vw; } /* h-auto */ .h-auto { - height:auto; + height: auto; } /* height */ .h0 { - height:0; + height: 0; } .h100 { - height:100%; + height: 100%; } /* h-screen */ .h-screen { - height:100vh; + height: 100vh; } /** @@ -932,35 +955,35 @@ */ /* cursor */ .c-auto { - cursor:auto; + cursor: auto; } .c-default { - cursor:default; + cursor: default; } .c-pointer { - cursor:pointer; + cursor: pointer; } .c-text { - cursor:text; + cursor: text; } .c-wait { - cursor:wait; + cursor: wait; } .c-move { - cursor:move; + cursor: move; } .c-not-allowed { - cursor:not-allowed; + cursor: not-allowed; } .c-help { - cursor:help; + cursor: help; } /** @@ -968,87 +991,88 @@ */ /* aspect-ratio */ .ar-auto { - aspect-ratio:auto; + aspect-ratio: auto; } .ar-inherit { - aspect-ratio:inherit; + aspect-ratio: inherit; } .ar-unset { - aspect-ratio:unset; + aspect-ratio: unset; } .ar-1 { - aspect-ratio:1; + aspect-ratio: 1; } .ar-169 { - aspect-ratio:16/9; + aspect-ratio: 16/9; } .ar-43 { - aspect-ratio:4/3; + aspect-ratio: 4/3; } .ar-12 { - aspect-ratio:1/2; + aspect-ratio: 1/2; } /** * Flex grid */ .flex-grid-template { - --grid-gap-x:30px; - --grid-gap-y:30px; - --grid-col:3; + --grid-gap-x: 30px; + --grid-gap-y: 30px; + --grid-col: 3; /* calculate new width */ - --grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1)); - --grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col)); - display:flex; - flex-wrap:wrap; - gap:var(--grid-gap-y) var(--grid-gap-x); + --grid-gap-x-total: calc(var(--grid-gap-x) * (var(--grid-col) - 1)); + --grid-space-each: calc(var(--grid-gap-x-total) / var(--grid-col)); + display: flex; + flex-wrap: wrap; + gap: var(--grid-gap-y) var(--grid-gap-x); } .flex-grid-template > * { - width:calc(100% / var(--grid-col) - var(--grid-space-each)); + width: calc(100% / var(--grid-col) - var(--grid-space-each)); } -@media only screen and (max-width:768px) { +@media only screen and (max-width: 768px) { .flex-grid-template { - --grid-col:2; + --grid-col: 2; } } -@media only screen and (max-width:480px) { + +@media only screen and (max-width: 480px) { .flex-grid-template { - --grid-col:1; + --grid-col: 1; } } /** * Background object fit */ .img-wrapper-cover > img { - object-position:center center; - height:100%; - width:100%; - min-height:100%; - min-width:100%; - max-height:100%; - max-width:100%; - display:block; - object-fit:cover; + object-position: center center; + height: 100%; + width: 100%; + min-height: 100%; + min-width: 100%; + max-height: 100%; + max-width: 100%; + display: block; + object-fit: cover; } .img-wrapper-contain > img { - object-position:center center; - height:100%; - width:100%; - min-height:100%; - min-width:100%; - max-height:100%; - max-width:100%; - display:block; - object-fit:contain; + object-position: center center; + height: 100%; + width: 100%; + min-height: 100%; + min-width: 100%; + max-height: 100%; + max-width: 100%; + display: block; + object-fit: contain; } /** @@ -1056,13 +1080,13 @@ */ ul.list-style-none, .list-style-none ul { - margin:0; - list-style:none; + margin: 0; + list-style: none; } ul.list-style-none > li, .list-style-none ul > li { - padding:0; + padding: 0; } /* @@ -1070,12 +1094,12 @@ ul.list-style-none > li, * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/ */ .visually-hidden { - position:absolute; - overflow:hidden; - clip:rect(0 0 0 0); - width:1px; - height:1px; - margin:-1px; - padding:0; - border:0; + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; } diff --git a/dist/atomic.min.css b/dist/atomic.min.css index 9fc1844..412b203 100644 --- a/dist/atomic.min.css +++ b/dist/atomic.min.css @@ -2,4 +2,4 @@ * Atomic CSS 1.1.10 * https://github.com/viivue/atomic-css */ -.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}:root{--spacing-0:0}.pt0{padding-top:var(--spacing-0)}.pb0{padding-bottom:var(--spacing-0)}.mt0{margin-top:var(--spacing-0)}.mb0{margin-bottom:var(--spacing-0)}.ps-absolute{position:absolute}.ps-fixed{position:fixed}.ps-relative{position:relative}.ps-static{position:static}.ps-sticky{position:sticky}.t0{top:0}.r0{right:0}.b0{bottom:0}.l0{left:0}.t50p{top:50%}.r50p{right:50%}.b50p{bottom:50%}.l50p{left:50%}.t100p{top:100%}.r100p{right:100%}.b100p{bottom:100%}.l100p{left:100%}.t-auto{top:auto}.r-auto{right:auto}.b-auto{bottom:auto}.l-auto{left:auto}.ab-center,.ab-center-v{position:absolute;top:50%}.ab-center{left:50%;transform:translate(-50%,-50%)}.ab-center-v{transform:translateY(-50%)}.ab-center-h{position:absolute;left:50%;transform:translateX(-50%)}.ab-full,.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{position:absolute;top:0;right:0;bottom:0;left:0}.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{content:""}.z-hide{z-index:-1}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.z5{z-index:5}.z10{z-index:10}.z20{z-index:20}.z30{z-index:30}.z40{z-index:40}.z100{z-index:100}.z99999999{z-index:99999999}.ff-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.ff-serif{font-family:Georgia,Cambria,"Times New Roman",Times,serif}.fc-white{color:#fff}.fc-black{color:#000}.bg-white{background-color:#fff}.bg-black{background-color:#000}.fw-normal{font-weight:400}.fw-bold{font-weight:700}.lh-xs{line-height:1}.lh-sm{line-height:1.15}.lh-md{line-height:1.3}.lh-lg{line-height:1.6}.lh-xl{line-height:1.92}.lh-xxl{line-height:2}.lh-unset{line-height:unset}.fs-normal{font-style:normal}.fs-italic{font-style:italic}.tt-capitalize{text-transform:capitalize}.tt-lowercase{text-transform:lowercase}.tt-uppercase{text-transform:uppercase}.tt-none{text-transform:none}.tt-unset{text-transform:unset}.td-underline{text-decoration:underline}.td-none{text-decoration:none}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.ta-justify{text-align:justify}.ws-normal{white-space:normal}.ws-nowrap{white-space:nowrap}.ws-pre{white-space:pre}.ws-pre-wrap{white-space:pre-wrap}.ws-pre-line{white-space:pre-line}.wb-normal{word-break:normal}.wb-break-all{word-break:break-all}.wb-keep-all{word-break:keep-all}.wb-inherit{word-break:inherit}.wb-initial{word-break:initial}.wb-unset{word-break:unset}.break-word{word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--font-serif:Georgia, Cambria, "Times New Roman", Times, serif;--color-white:#fff;--color-black:#000}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-inline-grid{display:inline-grid}.d-table{display:table}.d-table-cell{display:table-cell}.d-none{display:none}.d-unset{display:unset}.ac-stretch{align-content:stretch}.ac-center{align-content:center}.ac-start{align-content:flex-start}.ac-end{align-content:flex-end}.ac-space-between{align-content:space-between}.ac-space-around{align-content:space-around}.ai-stretch{align-items:stretch}.ai-center{align-items:center}.ai-start{align-items:flex-start}.ai-end{align-items:flex-end}.ai-baseline{align-items:baseline}.as-auto{align-self:auto}.as-stretch{align-self:stretch}.as-center{align-self:center}.as-start{align-self:flex-start}.as-end{align-self:flex-end}.as-baseline{align-self:baseline}.fd-row{flex-direction:row}.fd-row-reverse{flex-direction:row-reverse}.fd-column{flex-direction:column}.fd-column-reverse{flex-direction:column-reverse}.fw-nowrap{flex-wrap:nowrap}.fw-wrap{flex-wrap:wrap}.fw-wrap-reverse{flex-wrap:wrap-reverse}.jc-start{justify-content:flex-start}.jc-end{justify-content:flex-end}.jc-center{justify-content:center}.jc-space-between{justify-content:space-between}.jc-space-around{justify-content:space-around}.jc-space-evenly{justify-content:space-evenly}.fl-center{justify-content:center}.fl-center,.fl-center-v{display:flex;align-items:center}.fl-center-h{display:flex;justify-content:center}.fl-grid{display:flex;flex-wrap:wrap}.t{transition-duration:.25s;transition-property:all;transition-timing-function:ease;transition-delay:0s}.t-slow{transition-duration:.6s}.t-fast{transition-duration:.1s}.t-opacity{transition-property:opacity}.t-opacity-color{transition-property:opacity,color}.t-transform{transition-property:transform}.t-transform-opacity{transition-property:transform,opacity}.t-transform-opacity-color{transition-property:transform,opacity,color}.t-transform-color{transition-property:transform,color}.t-color{transition-property:color}.of-fill{object-fit:fill}.of-contain{object-fit:contain}.of-cover{object-fit:cover}.of-scale-down{object-fit:scale-down}.of-none{object-fit:none}.op-center{object-position:center}.pe-auto{pointer-events:auto}.pe-none{pointer-events:none}.us-auto{user-select:auto}.us-none{user-select:none}.ud-auto{user-drag:auto}.ud-none{user-drag:none}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.bar-pill{border-radius:1000px}.bar-circle{border-radius:100%}.bar0{border-radius:0}.bar3px{border-radius:3px}.bar5px{border-radius:5px}.bar10px{border-radius:10px}.bar15px{border-radius:15px}.skeleton-bg{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==);background-size:30px;background-repeat:no-repeat;background-position:center;background-color:#eee}.w-auto{width:auto}.w0{width:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w33{width:33.33%}.w66{width:66.67%}.w-screen{width:100vw}.h-auto{height:auto}.h0{height:0}.h100{height:100%}.h-screen{height:100vh}.c-auto{cursor:auto}.c-default{cursor:default}.c-pointer{cursor:pointer}.c-text{cursor:text}.c-wait{cursor:wait}.c-move{cursor:move}.c-not-allowed{cursor:not-allowed}.c-help{cursor:help}.ar-auto{aspect-ratio:auto}.ar-inherit{aspect-ratio:inherit}.ar-unset{aspect-ratio:unset}.ar-1{aspect-ratio:1}.ar-169{aspect-ratio:16/9}.ar-43{aspect-ratio:4/3}.ar-12{aspect-ratio:1/2}.flex-grid-template{--grid-gap-x:30px;--grid-gap-y:30px;--grid-col:3;--grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));--grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));display:flex;flex-wrap:wrap;gap:var(--grid-gap-y) var(--grid-gap-x)}.flex-grid-template>*{width:calc(100%/var(--grid-col) - var(--grid-space-each))}@media only screen and (max-width:768px){.flex-grid-template{--grid-col:2}}@media only screen and (max-width:480px){.flex-grid-template{--grid-col:1}}.img-wrapper-contain>img,.img-wrapper-cover>img{object-position:center center;height:100%;width:100%;min-height:100%;min-width:100%;max-height:100%;max-width:100%;display:block;object-fit:cover}.img-wrapper-contain>img{object-fit:contain}.list-style-none ul,ul.list-style-none{margin:0;list-style:none}.list-style-none ul>li,ul.list-style-none>li{padding:0}.visually-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0} \ No newline at end of file +.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}:root{--spacing-0px:0;--gap-0px:0}.pt0px{padding-top:var(--gap-0px)}.pb0px{padding-bottom:var(--gap-0px)}.mt0px{margin-top:var(--gap-0px)}.mb0px{margin-bottom:var(--gap-0px)}.ps-absolute{position:absolute}.ps-fixed{position:fixed}.ps-relative{position:relative}.ps-static{position:static}.ps-sticky{position:sticky}.t0{top:0}.r0{right:0}.b0{bottom:0}.l0{left:0}.t50p{top:50%}.r50p{right:50%}.b50p{bottom:50%}.l50p{left:50%}.t100p{top:100%}.r100p{right:100%}.b100p{bottom:100%}.l100p{left:100%}.t-auto{top:auto}.r-auto{right:auto}.b-auto{bottom:auto}.l-auto{left:auto}.ab-center,.ab-center-v{position:absolute;top:50%}.ab-center{left:50%;transform:translate(-50%,-50%)}.ab-center-v{transform:translateY(-50%)}.ab-center-h{position:absolute;left:50%;transform:translateX(-50%)}.ab-full,.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{position:absolute;top:0;right:0;bottom:0;left:0}.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{content:""}.z-hide{z-index:-1}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.z5{z-index:5}.z10{z-index:10}.z20{z-index:20}.z30{z-index:30}.z40{z-index:40}.z100{z-index:100}.z99999999{z-index:99999999}.ff-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.ff-serif{font-family:Georgia,Cambria,"Times New Roman",Times,serif}.fc-white{color:#fff}.fc-black{color:#000}.bg-white{background-color:#fff}.bg-black{background-color:#000}.fw-normal{font-weight:400}.fw-bold{font-weight:700}.lh-xs{line-height:1}.lh-sm{line-height:1.15}.lh-md{line-height:1.3}.lh-lg{line-height:1.6}.lh-xl{line-height:1.92}.lh-xxl{line-height:2}.lh-unset{line-height:unset}.fs-normal{font-style:normal}.fs-italic{font-style:italic}.tt-capitalize{text-transform:capitalize}.tt-lowercase{text-transform:lowercase}.tt-uppercase{text-transform:uppercase}.tt-none{text-transform:none}.tt-unset{text-transform:unset}.td-underline{text-decoration:underline}.td-none{text-decoration:none}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.ta-justify{text-align:justify}.ws-normal{white-space:normal}.ws-nowrap{white-space:nowrap}.ws-pre{white-space:pre}.ws-pre-wrap{white-space:pre-wrap}.ws-pre-line{white-space:pre-line}.wb-normal{word-break:normal}.wb-break-all{word-break:break-all}.wb-keep-all{word-break:keep-all}.wb-inherit{word-break:inherit}.wb-initial{word-break:initial}.wb-unset{word-break:unset}.break-word{word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--font-serif:Georgia, Cambria, "Times New Roman", Times, serif;--color-white:#fff;--color-black:#000}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-inline-grid{display:inline-grid}.d-table{display:table}.d-table-cell{display:table-cell}.d-none{display:none}.d-unset{display:unset}.ac-stretch{align-content:stretch}.ac-center{align-content:center}.ac-start{align-content:flex-start}.ac-end{align-content:flex-end}.ac-space-between{align-content:space-between}.ac-space-around{align-content:space-around}.ai-stretch{align-items:stretch}.ai-center{align-items:center}.ai-start{align-items:flex-start}.ai-end{align-items:flex-end}.ai-baseline{align-items:baseline}.as-auto{align-self:auto}.as-stretch{align-self:stretch}.as-center{align-self:center}.as-start{align-self:flex-start}.as-end{align-self:flex-end}.as-baseline{align-self:baseline}.fd-row{flex-direction:row}.fd-row-reverse{flex-direction:row-reverse}.fd-column{flex-direction:column}.fd-column-reverse{flex-direction:column-reverse}.fw-nowrap{flex-wrap:nowrap}.fw-wrap{flex-wrap:wrap}.fw-wrap-reverse{flex-wrap:wrap-reverse}.jc-start{justify-content:flex-start}.jc-end{justify-content:flex-end}.jc-center{justify-content:center}.jc-space-between{justify-content:space-between}.jc-space-around{justify-content:space-around}.jc-space-evenly{justify-content:space-evenly}.fl-center{justify-content:center}.fl-center,.fl-center-v{display:flex;align-items:center}.fl-center-h{display:flex;justify-content:center}.fl-grid{display:flex;flex-wrap:wrap}.t{transition-duration:.25s;transition-property:all;transition-timing-function:ease;transition-delay:0s}.t-slow{transition-duration:.6s}.t-fast{transition-duration:.1s}.t-opacity{transition-property:opacity}.t-opacity-color{transition-property:opacity,color}.t-transform{transition-property:transform}.t-transform-opacity{transition-property:transform,opacity}.t-transform-opacity-color{transition-property:transform,opacity,color}.t-transform-color{transition-property:transform,color}.t-color{transition-property:color}.of-fill{object-fit:fill}.of-contain{object-fit:contain}.of-cover{object-fit:cover}.of-scale-down{object-fit:scale-down}.of-none{object-fit:none}.op-center{object-position:center}.pe-auto{pointer-events:auto}.pe-none{pointer-events:none}.us-auto{user-select:auto}.us-none{user-select:none}.ud-auto{user-drag:auto}.ud-none{user-drag:none}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.bar-pill{border-radius:1000px}.bar-circle{border-radius:100%}.bar0{border-radius:0}.bar3px{border-radius:3px}.bar5px{border-radius:5px}.bar10px{border-radius:10px}.bar15px{border-radius:15px}.skeleton-bg{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==);background-size:30px;background-repeat:no-repeat;background-position:center;background-color:#eee}.w-auto{width:auto}.w0{width:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w33{width:33.33%}.w66{width:66.67%}.w-screen{width:100vw}.h-auto{height:auto}.h0{height:0}.h100{height:100%}.h-screen{height:100vh}.c-auto{cursor:auto}.c-default{cursor:default}.c-pointer{cursor:pointer}.c-text{cursor:text}.c-wait{cursor:wait}.c-move{cursor:move}.c-not-allowed{cursor:not-allowed}.c-help{cursor:help}.ar-auto{aspect-ratio:auto}.ar-inherit{aspect-ratio:inherit}.ar-unset{aspect-ratio:unset}.ar-1{aspect-ratio:1}.ar-169{aspect-ratio:16/9}.ar-43{aspect-ratio:4/3}.ar-12{aspect-ratio:1/2}.flex-grid-template{--grid-gap-x:30px;--grid-gap-y:30px;--grid-col:3;--grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));--grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));display:flex;flex-wrap:wrap;gap:var(--grid-gap-y) var(--grid-gap-x)}.flex-grid-template>*{width:calc(100%/var(--grid-col) - var(--grid-space-each))}@media only screen and (max-width:768px){.flex-grid-template{--grid-col:2}}@media only screen and (max-width:480px){.flex-grid-template{--grid-col:1}}.img-wrapper-contain>img,.img-wrapper-cover>img{object-position:center center;height:100%;width:100%;min-height:100%;min-width:100%;max-height:100%;max-width:100%;display:block;object-fit:cover}.img-wrapper-contain>img{object-fit:contain}.list-style-none ul,ul.list-style-none{margin:0;list-style:none}.list-style-none ul>li,ul.list-style-none>li{padding:0}.visually-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0} \ No newline at end of file diff --git a/scss/_config.scss b/scss/_config.scss index 4a782aa..5c8807c 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -40,26 +40,26 @@ //); // vertical spacing -$vertical_spacing: ( - "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, - "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, -); +//$vertical_spacing: ( +// "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, +// "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, +//); // custom spacing (vertical) -$custom_spacing: ( - 'default':10, - 'heading':20, - 'paragraph':16, -); +//$custom_spacing: ( +// 'default':10, +// 'heading':20, +// 'paragraph':16, +//); // horizontal spacing -$horizontal_spacing: ( - "values":20 40, - "md":20 20, -); +//$horizontal_spacing: ( +// "values":20 40, +// "md":20 20, +//); // gap spacing (horizontal) -$gap_spacing: ( - "vc-column":20, - "container":40px, -); +//$gap_spacing: ( +// "vc-column":20, +// "container":40px, +//); diff --git a/scss/_defs.scss b/scss/_defs.scss index 7730114..2aff46c 100644 --- a/scss/_defs.scss +++ b/scss/_defs.scss @@ -47,9 +47,21 @@ $colors: (); // vertical spacing $vertical_spacing: ( - "values": 0 + "values": 0px ); +// custom spacing (vertical) +$custom_spacing: (); + +// horizontal spacing +$horizontal_spacing: ( + "values":0, +); + +// gap spacing (horizontal) +$gap_spacing: (); + + // horizontal spacing //$horizontal_spacing: ( // "values": 0 100 200, diff --git a/scss/spacing.scss b/scss/spacing.scss index b26b6e4..638e463 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -22,7 +22,7 @@ $classes: ("m":"margin", "p":"padding"); * General spacing variables */ -@mixin generate-spacing-variables($vertical_spacing, $prefix) { +@mixin generate-spacing-variables($axis_spacing, $prefix) { $project-prefix: map-get($info, 'variable-prefix'); @each $breakpoint, $values in $vertical_spacing { @if is-breakpoint($breakpoint) { From 6c589e99a177516e03dfcf776a48c84824d43870 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 28 Nov 2023 10:10:58 +0700 Subject: [PATCH 10/14] Revert "fix(loading): add comment and change name for spacing generator function" This reverts commit 7969910eafd77a32a95ce381478ddb13056ff97f. --- css/spacing.css | 312 +++++++++++++++++++++-- dist/atomic.css | 596 +++++++++++++++++++++----------------------- dist/atomic.min.css | 2 +- scss/_config.scss | 34 +-- scss/_defs.scss | 14 +- scss/spacing.scss | 2 +- 6 files changed, 595 insertions(+), 365 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index 8fef571..c4da7ed 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -4,23 +4,23 @@ */ /* Margin auto */ .m-auto { - margin: auto; + margin:auto; } .mt-auto { - margin-top: auto; + margin-top:auto; } .mr-auto { - margin-right: auto; + margin-right:auto; } .mb-auto { - margin-bottom: auto; + margin-bottom:auto; } .ml-auto { - margin-left: auto; + margin-left:auto; } /** @@ -30,41 +30,307 @@ * custom spacing */ :root { - --spacing-0px: 0; + --spacing-default:10px; + --spacing-heading:20px; + --spacing-paragraph:16px; } -.pt0px { - padding-top: var(--spacing-0px); +:root { + --gap-vc-column:20px; + --gap-container:40px; +} + +:root { + --spacing-0:0; + --spacing-1:1px; + --spacing-2:2px; + --spacing-4:4px; + --spacing-6:6px; + --spacing-8:8px; + --spacing-12:12px; + --spacing-16:16px; + --spacing-24:24px; + --spacing-32:32px; + --spacing-48:48px; + --spacing-64:64px; + --spacing-96:96px; + --spacing-128:128px; +} + +.pt0 { + padding-top:var(--spacing-0); +} + +.pb0 { + padding-bottom:var(--spacing-0); +} + +.mt0 { + margin-top:var(--spacing-0); +} + +.mb0 { + margin-bottom:var(--spacing-0); +} + +.pt1 { + padding-top:var(--spacing-1); +} + +.pb1 { + padding-bottom:var(--spacing-1); } -.pb0px { - padding-bottom: var(--spacing-0px); +.mt1 { + margin-top:var(--spacing-1); } -.mt0px { - margin-top: var(--spacing-0px); +.mb1 { + margin-bottom:var(--spacing-1); } -.mb0px { - margin-bottom: var(--spacing-0px); +.pt2 { + padding-top:var(--spacing-2); } +.pb2 { + padding-bottom:var(--spacing-2); +} + +.mt2 { + margin-top:var(--spacing-2); +} + +.mb2 { + margin-bottom:var(--spacing-2); +} + +.pt4 { + padding-top:var(--spacing-4); +} + +.pb4 { + padding-bottom:var(--spacing-4); +} + +.mt4 { + margin-top:var(--spacing-4); +} + +.mb4 { + margin-bottom:var(--spacing-4); +} + +.pt6 { + padding-top:var(--spacing-6); +} + +.pb6 { + padding-bottom:var(--spacing-6); +} + +.mt6 { + margin-top:var(--spacing-6); +} + +.mb6 { + margin-bottom:var(--spacing-6); +} + +.pt8 { + padding-top:var(--spacing-8); +} + +.pb8 { + padding-bottom:var(--spacing-8); +} + +.mt8 { + margin-top:var(--spacing-8); +} + +.mb8 { + margin-bottom:var(--spacing-8); +} + +.pt12 { + padding-top:var(--spacing-12); +} + +.pb12 { + padding-bottom:var(--spacing-12); +} + +.mt12 { + margin-top:var(--spacing-12); +} + +.mb12 { + margin-bottom:var(--spacing-12); +} + +.pt16 { + padding-top:var(--spacing-16); +} + +.pb16 { + padding-bottom:var(--spacing-16); +} + +.mt16 { + margin-top:var(--spacing-16); +} + +.mb16 { + margin-bottom:var(--spacing-16); +} + +.pt24 { + padding-top:var(--spacing-24); +} + +.pb24 { + padding-bottom:var(--spacing-24); +} + +.mt24 { + margin-top:var(--spacing-24); +} + +.mb24 { + margin-bottom:var(--spacing-24); +} + +.pt32 { + padding-top:var(--spacing-32); +} + +.pb32 { + padding-bottom:var(--spacing-32); +} + +.mt32 { + margin-top:var(--spacing-32); +} + +.mb32 { + margin-bottom:var(--spacing-32); +} + +.pt48 { + padding-top:var(--spacing-48); +} + +.pb48 { + padding-bottom:var(--spacing-48); +} + +.mt48 { + margin-top:var(--spacing-48); +} + +.mb48 { + margin-bottom:var(--spacing-48); +} + +.pt64 { + padding-top:var(--spacing-64); +} + +.pb64 { + padding-bottom:var(--spacing-64); +} + +.mt64 { + margin-top:var(--spacing-64); +} + +.mb64 { + margin-bottom:var(--spacing-64); +} + +.pt96 { + padding-top:var(--spacing-96); +} + +.pb96 { + padding-bottom:var(--spacing-96); +} + +.mt96 { + margin-top:var(--spacing-96); +} + +.mb96 { + margin-bottom:var(--spacing-96); +} + +.pt128 { + padding-top:var(--spacing-128); +} + +.pb128 { + padding-bottom:var(--spacing-128); +} + +.mt128 { + margin-top:var(--spacing-128); +} + +.mb128 { + margin-bottom:var(--spacing-128); +} + +/* Breakpoint md */ +@media only screen and (max-width:1024px) { + :root { + --spacing-32:30px; + --spacing-48:40px; + --spacing-64:50px; + --spacing-96:60px; + --spacing-128:70px; + } +} :root { - --gap-0px: 0; + --gap-20:20px; + --gap-40:40px; +} + +.pt20 { + padding-top:var(--gap-20); +} + +.pb20 { + padding-bottom:var(--gap-20); +} + +.mt20 { + margin-top:var(--gap-20); +} + +.mb20 { + margin-bottom:var(--gap-20); +} + +.pt40 { + padding-top:var(--gap-40); } -.pt0px { - padding-top: var(--gap-0px); +.pb40 { + padding-bottom:var(--gap-40); } -.pb0px { - padding-bottom: var(--gap-0px); +.mt40 { + margin-top:var(--gap-40); } -.mt0px { - margin-top: var(--gap-0px); +.mb40 { + margin-bottom:var(--gap-40); } -.mb0px { - margin-bottom: var(--gap-0px); +/* Breakpoint md */ +@media only screen and (max-width:1024px) { + :root { + --gap-40:20px; + } } diff --git a/dist/atomic.css b/dist/atomic.css index 7d3ba89..7d7ee2c 100644 --- a/dist/atomic.css +++ b/dist/atomic.css @@ -8,69 +8,46 @@ */ /* Margin auto */ .m-auto { - margin: auto; + margin:auto; } .mt-auto { - margin-top: auto; + margin-top:auto; } .mr-auto { - margin-right: auto; + margin-right:auto; } .mb-auto { - margin-bottom: auto; + margin-bottom:auto; } .ml-auto { - margin-left: auto; + margin-left:auto; } /** - * General spacing variables + * Vertical Spacing */ -/** - * custom spacing - */ -:root { - --spacing-0px: 0; -} - -.pt0px { - padding-top: var(--spacing-0px); -} - -.pb0px { - padding-bottom: var(--spacing-0px); -} - -.mt0px { - margin-top: var(--spacing-0px); -} - -.mb0px { - margin-bottom: var(--spacing-0px); -} - :root { - --gap-0px: 0; + --spacing-0:0; } -.pt0px { - padding-top: var(--gap-0px); +.pt0 { + padding-top:var(--spacing-0); } -.pb0px { - padding-bottom: var(--gap-0px); +.pb0 { + padding-bottom:var(--spacing-0); } -.mt0px { - margin-top: var(--gap-0px); +.mt0 { + margin-top:var(--spacing-0); } -.mb0px { - margin-bottom: var(--gap-0px); +.mb0 { + margin-bottom:var(--spacing-0); } /** @@ -79,175 +56,175 @@ */ /* Positions */ .ps-absolute { - position: absolute; + position:absolute; } .ps-fixed { - position: fixed; + position:fixed; } .ps-relative { - position: relative; + position:relative; } .ps-static { - position: static; + position:static; } .ps-sticky { - position: sticky; + position:sticky; } /* Coordinates */ .t0 { - top: 0; + top:0; } .r0 { - right: 0; + right:0; } .b0 { - bottom: 0; + bottom:0; } .l0 { - left: 0; + left:0; } .t50p { - top: 50%; + top:50%; } .r50p { - right: 50%; + right:50%; } .b50p { - bottom: 50%; + bottom:50%; } .l50p { - left: 50%; + left:50%; } .t100p { - top: 100%; + top:100%; } .r100p { - right: 100%; + right:100%; } .b100p { - bottom: 100%; + bottom:100%; } .l100p { - left: 100%; + left:100%; } /* Coordinates - auto */ .t-auto { - top: auto; + top:auto; } .r-auto { - right: auto; + right:auto; } .b-auto { - bottom: auto; + bottom:auto; } .l-auto { - left: auto; + left:auto; } /* ab-center */ .ab-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position:absolute; + top:50%; + left:50%; + transform:translate(-50%, -50%); } /* ab-center-v */ .ab-center-v { - position: absolute; - top: 50%; - transform: translateY(-50%); + position:absolute; + top:50%; + transform:translateY(-50%); } /* ab-center-h */ .ab-center-h { - position: absolute; - left: 50%; - transform: translateX(-50%); + position:absolute; + left:50%; + transform:translateX(-50%); } /* ab-full */ .ab-full, .ab-full-b:before, .ab-full-a:after, .ab-full-ba:before, .ab-full-ba:after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + position:absolute; + top:0; + right:0; + bottom:0; + left:0; } /* ab-full-content */ .ab-full-b:before, .ab-full-a:after, .ab-full-ba:before, .ab-full-ba:after { - content: ""; + content:""; } /* z-hide */ .z-hide { - z-index: -1; + z-index:-1; } /* z-index */ .z1 { - z-index: 1; + z-index:1; } .z2 { - z-index: 2; + z-index:2; } .z3 { - z-index: 3; + z-index:3; } .z4 { - z-index: 4; + z-index:4; } .z5 { - z-index: 5; + z-index:5; } .z10 { - z-index: 10; + z-index:10; } .z20 { - z-index: 20; + z-index:20; } .z30 { - z-index: 30; + z-index:30; } .z40 { - z-index: 40; + z-index:40; } .z100 { - z-index: 100; + z-index:100; } .z99999999 { - z-index: 99999999; + z-index:99999999; } /** @@ -256,187 +233,187 @@ */ /* font-family */ .ff-sans { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } .ff-serif { - font-family: Georgia, Cambria, "Times New Roman", Times, serif; + font-family:Georgia, Cambria, "Times New Roman", Times, serif; } /* color */ .fc-white { - color: #fff; + color:#fff; } .fc-black { - color: #000; + color:#000; } /* background-color */ .bg-white { - background-color: #fff; + background-color:#fff; } .bg-black { - background-color: #000; + background-color:#000; } /* font-weight */ .fw-normal { - font-weight: 400; + font-weight:400; } .fw-bold { - font-weight: 700; + font-weight:700; } /* line-height */ .lh-xs { - line-height: 1; + line-height:1; } .lh-sm { - line-height: 1.15; + line-height:1.15; } .lh-md { - line-height: 1.3; + line-height:1.3; } .lh-lg { - line-height: 1.6; + line-height:1.6; } .lh-xl { - line-height: 1.92; + line-height:1.92; } .lh-xxl { - line-height: 2; + line-height:2; } .lh-unset { - line-height: unset; + line-height:unset; } /* font-style */ .fs-normal { - font-style: normal; + font-style:normal; } .fs-italic { - font-style: italic; + font-style:italic; } /* text-transform */ .tt-capitalize { - text-transform: capitalize; + text-transform:capitalize; } .tt-lowercase { - text-transform: lowercase; + text-transform:lowercase; } .tt-uppercase { - text-transform: uppercase; + text-transform:uppercase; } .tt-none { - text-transform: none; + text-transform:none; } .tt-unset { - text-transform: unset; + text-transform:unset; } /* text-decoration */ .td-underline { - text-decoration: underline; + text-decoration:underline; } .td-none { - text-decoration: none; + text-decoration:none; } /* text-align */ .ta-left { - text-align: left; + text-align:left; } .ta-center { - text-align: center; + text-align:center; } .ta-right { - text-align: right; + text-align:right; } .ta-justify { - text-align: justify; + text-align:justify; } /* white-space */ .ws-normal { - white-space: normal; + white-space:normal; } .ws-nowrap { - white-space: nowrap; + white-space:nowrap; } .ws-pre { - white-space: pre; + white-space:pre; } .ws-pre-wrap { - white-space: pre-wrap; + white-space:pre-wrap; } .ws-pre-line { - white-space: pre-line; + white-space:pre-line; } /* word-break */ .wb-normal { - word-break: normal; + word-break:normal; } .wb-break-all { - word-break: break-all; + word-break:break-all; } .wb-keep-all { - word-break: keep-all; + word-break:keep-all; } .wb-inherit { - word-break: inherit; + word-break:inherit; } .wb-initial { - word-break: initial; + word-break:initial; } .wb-unset { - word-break: unset; + word-break:unset; } /* break-word */ .break-word { - word-break: break-word; - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; + word-break:break-word; + word-wrap:break-word; + overflow-wrap:break-word; + hyphens:auto; } :root { - --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - --font-serif: Georgia, Cambria, "Times New Roman", Times, serif; + --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + --font-serif:Georgia, Cambria, "Times New Roman", Times, serif; } :root { - --color-white: #fff; - --color-black: #000; + --color-white:#fff; + --color-black:#000; } /** @@ -445,47 +422,47 @@ */ /* display */ .d-block { - display: block; + display:block; } .d-inline { - display: inline; + display:inline; } .d-inline-block { - display: inline-block; + display:inline-block; } .d-flex { - display: flex; + display:flex; } .d-inline-flex { - display: inline-flex; + display:inline-flex; } .d-grid { - display: grid; + display:grid; } .d-inline-grid { - display: inline-grid; + display:inline-grid; } .d-table { - display: table; + display:table; } .d-table-cell { - display: table-cell; + display:table-cell; } .d-none { - display: none; + display:none; } .d-unset { - display: unset; + display:unset; } /** @@ -494,153 +471,153 @@ */ /* align-content */ .ac-stretch { - align-content: stretch; + align-content:stretch; } .ac-center { - align-content: center; + align-content:center; } .ac-start { - align-content: flex-start; + align-content:flex-start; } .ac-end { - align-content: flex-end; + align-content:flex-end; } .ac-space-between { - align-content: space-between; + align-content:space-between; } .ac-space-around { - align-content: space-around; + align-content:space-around; } /* align-items */ .ai-stretch { - align-items: stretch; + align-items:stretch; } .ai-center { - align-items: center; + align-items:center; } .ai-start { - align-items: flex-start; + align-items:flex-start; } .ai-end { - align-items: flex-end; + align-items:flex-end; } .ai-baseline { - align-items: baseline; + align-items:baseline; } /* align-self */ .as-auto { - align-self: auto; + align-self:auto; } .as-stretch { - align-self: stretch; + align-self:stretch; } .as-center { - align-self: center; + align-self:center; } .as-start { - align-self: flex-start; + align-self:flex-start; } .as-end { - align-self: flex-end; + align-self:flex-end; } .as-baseline { - align-self: baseline; + align-self:baseline; } /* flex-direction */ .fd-row { - flex-direction: row; + flex-direction:row; } .fd-row-reverse { - flex-direction: row-reverse; + flex-direction:row-reverse; } .fd-column { - flex-direction: column; + flex-direction:column; } .fd-column-reverse { - flex-direction: column-reverse; + flex-direction:column-reverse; } /* flex-wrap */ .fw-nowrap { - flex-wrap: nowrap; + flex-wrap:nowrap; } .fw-wrap { - flex-wrap: wrap; + flex-wrap:wrap; } .fw-wrap-reverse { - flex-wrap: wrap-reverse; + flex-wrap:wrap-reverse; } /* justify-content */ .jc-start { - justify-content: flex-start; + justify-content:flex-start; } .jc-end { - justify-content: flex-end; + justify-content:flex-end; } .jc-center { - justify-content: center; + justify-content:center; } .jc-space-between { - justify-content: space-between; + justify-content:space-between; } .jc-space-around { - justify-content: space-around; + justify-content:space-around; } .jc-space-evenly { - justify-content: space-evenly; + justify-content:space-evenly; } /* fl-center */ .fl-center { - display: flex; - align-items: center; - justify-content: center; + display:flex; + align-items:center; + justify-content:center; } /* fl-center-v */ .fl-center-v { - display: flex; - align-items: center; + display:flex; + align-items:center; } /* fl-center-h */ .fl-center-h { - display: flex; - justify-content: center; + display:flex; + justify-content:center; } /* fl-grid */ .fl-grid { - display: flex; - flex-wrap: wrap; + display:flex; + flex-wrap:wrap; } /** @@ -649,55 +626,55 @@ */ /* transition */ .t { - transition-duration: .25s; - transition-property: all; - transition-timing-function: ease; - transition-delay: 0s; + transition-duration:.25s; + transition-property:all; + transition-timing-function:ease; + transition-delay:0s; } /* slow */ .t-slow { - transition-duration: .6s; + transition-duration:.6s; } /* fast */ .t-fast { - transition-duration: .1s; + transition-duration:.1s; } /* opacity */ .t-opacity { - transition-property: opacity; + transition-property:opacity; } /* opacity-color */ .t-opacity-color { - transition-property: opacity, color; + transition-property:opacity, color; } /* transform */ .t-transform { - transition-property: transform; + transition-property:transform; } /* transform-opacity */ .t-transform-opacity { - transition-property: transform, opacity; + transition-property:transform, opacity; } /* transform-opacity-color */ .t-transform-opacity-color { - transition-property: transform, opacity, color; + transition-property:transform, opacity, color; } /* transform-color */ .t-transform-color { - transition-property: transform, color; + transition-property:transform, color; } /* color */ .t-color { - transition-property: color; + transition-property:color; } /** @@ -706,28 +683,28 @@ */ /* object-fit */ .of-fill { - object-fit: fill; + object-fit:fill; } .of-contain { - object-fit: contain; + object-fit:contain; } .of-cover { - object-fit: cover; + object-fit:cover; } .of-scale-down { - object-fit: scale-down; + object-fit:scale-down; } .of-none { - object-fit: none; + object-fit:none; } /* object-position */ .op-center { - object-position: center; + object-position:center; } /** @@ -736,29 +713,29 @@ */ /* pointer-events */ .pe-auto { - pointer-events: auto; + pointer-events:auto; } .pe-none { - pointer-events: none; + pointer-events:none; } /* user-select */ .us-auto { - user-select: auto; + user-select:auto; } .us-none { - user-select: none; + user-select:none; } /* user-drag */ .ud-auto { - user-drag: auto; + user-drag:auto; } .ud-none { - user-drag: none; + user-drag:none; } /** @@ -767,45 +744,45 @@ */ /* overflow */ .overflow-visible { - overflow: visible; + overflow:visible; } .overflow-hidden { - overflow: hidden; + overflow:hidden; } .overflow-scroll { - overflow: scroll; + overflow:scroll; } .overflow-auto { - overflow: auto; + overflow:auto; } /* overflow-x */ .overflow-x-hidden { - overflow-x: hidden; + overflow-x:hidden; } .overflow-x-scroll { - overflow-x: scroll; + overflow-x:scroll; } .overflow-x-auto { - overflow-x: auto; + overflow-x:auto; } /* overflow-y */ .overflow-y-hidden { - overflow-y: hidden; + overflow-y:hidden; } .overflow-y-scroll { - overflow-y: scroll; + overflow-y:scroll; } .overflow-y-auto { - overflow-y: auto; + overflow-y:auto; } /** @@ -814,44 +791,44 @@ */ /* bar-pill */ .bar-pill { - border-radius: 1000px; + border-radius:1000px; } /* bar-circle */ .bar-circle { - border-radius: 100%; + border-radius:100%; } /* border-radius */ .bar0 { - border-radius: 0; + border-radius:0; } .bar3px { - border-radius: 3px; + border-radius:3px; } .bar5px { - border-radius: 5px; + border-radius:5px; } .bar10px { - border-radius: 10px; + border-radius:10px; } .bar15px { - border-radius: 15px; + border-radius:15px; } /** * Skeleton */ .skeleton-bg { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==); - background-size: 30px; - background-repeat: no-repeat; - background-position: center; - background-color: #eee; + background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==); + background-size:30px; + background-repeat:no-repeat; + background-position:center; + background-color:#eee; } /** @@ -859,94 +836,94 @@ */ /* w-auto */ .w-auto { - width: auto; + width:auto; } /* width */ .w0 { - width: 0; + width:0; } .w10 { - width: 10%; + width:10%; } .w20 { - width: 20%; + width:20%; } .w25 { - width: 25%; + width:25%; } .w30 { - width: 30%; + width:30%; } .w40 { - width: 40%; + width:40%; } .w50 { - width: 50%; + width:50%; } .w60 { - width: 60%; + width:60%; } .w70 { - width: 70%; + width:70%; } .w75 { - width: 75%; + width:75%; } .w80 { - width: 80%; + width:80%; } .w90 { - width: 90%; + width:90%; } .w100 { - width: 100%; + width:100%; } /* w33 */ .w33 { - width: 33.33%; + width:33.33%; } /* w66 */ .w66 { - width: 66.67%; + width:66.67%; } /* w-screen */ .w-screen { - width: 100vw; + width:100vw; } /* h-auto */ .h-auto { - height: auto; + height:auto; } /* height */ .h0 { - height: 0; + height:0; } .h100 { - height: 100%; + height:100%; } /* h-screen */ .h-screen { - height: 100vh; + height:100vh; } /** @@ -955,35 +932,35 @@ */ /* cursor */ .c-auto { - cursor: auto; + cursor:auto; } .c-default { - cursor: default; + cursor:default; } .c-pointer { - cursor: pointer; + cursor:pointer; } .c-text { - cursor: text; + cursor:text; } .c-wait { - cursor: wait; + cursor:wait; } .c-move { - cursor: move; + cursor:move; } .c-not-allowed { - cursor: not-allowed; + cursor:not-allowed; } .c-help { - cursor: help; + cursor:help; } /** @@ -991,88 +968,87 @@ */ /* aspect-ratio */ .ar-auto { - aspect-ratio: auto; + aspect-ratio:auto; } .ar-inherit { - aspect-ratio: inherit; + aspect-ratio:inherit; } .ar-unset { - aspect-ratio: unset; + aspect-ratio:unset; } .ar-1 { - aspect-ratio: 1; + aspect-ratio:1; } .ar-169 { - aspect-ratio: 16/9; + aspect-ratio:16/9; } .ar-43 { - aspect-ratio: 4/3; + aspect-ratio:4/3; } .ar-12 { - aspect-ratio: 1/2; + aspect-ratio:1/2; } /** * Flex grid */ .flex-grid-template { - --grid-gap-x: 30px; - --grid-gap-y: 30px; - --grid-col: 3; + --grid-gap-x:30px; + --grid-gap-y:30px; + --grid-col:3; /* calculate new width */ - --grid-gap-x-total: calc(var(--grid-gap-x) * (var(--grid-col) - 1)); - --grid-space-each: calc(var(--grid-gap-x-total) / var(--grid-col)); - display: flex; - flex-wrap: wrap; - gap: var(--grid-gap-y) var(--grid-gap-x); + --grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1)); + --grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col)); + display:flex; + flex-wrap:wrap; + gap:var(--grid-gap-y) var(--grid-gap-x); } .flex-grid-template > * { - width: calc(100% / var(--grid-col) - var(--grid-space-each)); + width:calc(100% / var(--grid-col) - var(--grid-space-each)); } -@media only screen and (max-width: 768px) { +@media only screen and (max-width:768px) { .flex-grid-template { - --grid-col: 2; + --grid-col:2; } } - -@media only screen and (max-width: 480px) { +@media only screen and (max-width:480px) { .flex-grid-template { - --grid-col: 1; + --grid-col:1; } } /** * Background object fit */ .img-wrapper-cover > img { - object-position: center center; - height: 100%; - width: 100%; - min-height: 100%; - min-width: 100%; - max-height: 100%; - max-width: 100%; - display: block; - object-fit: cover; + object-position:center center; + height:100%; + width:100%; + min-height:100%; + min-width:100%; + max-height:100%; + max-width:100%; + display:block; + object-fit:cover; } .img-wrapper-contain > img { - object-position: center center; - height: 100%; - width: 100%; - min-height: 100%; - min-width: 100%; - max-height: 100%; - max-width: 100%; - display: block; - object-fit: contain; + object-position:center center; + height:100%; + width:100%; + min-height:100%; + min-width:100%; + max-height:100%; + max-width:100%; + display:block; + object-fit:contain; } /** @@ -1080,13 +1056,13 @@ */ ul.list-style-none, .list-style-none ul { - margin: 0; - list-style: none; + margin:0; + list-style:none; } ul.list-style-none > li, .list-style-none ul > li { - padding: 0; + padding:0; } /* @@ -1094,12 +1070,12 @@ ul.list-style-none > li, * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/ */ .visually-hidden { - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - border: 0; + position:absolute; + overflow:hidden; + clip:rect(0 0 0 0); + width:1px; + height:1px; + margin:-1px; + padding:0; + border:0; } diff --git a/dist/atomic.min.css b/dist/atomic.min.css index 412b203..9fc1844 100644 --- a/dist/atomic.min.css +++ b/dist/atomic.min.css @@ -2,4 +2,4 @@ * Atomic CSS 1.1.10 * https://github.com/viivue/atomic-css */ -.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}:root{--spacing-0px:0;--gap-0px:0}.pt0px{padding-top:var(--gap-0px)}.pb0px{padding-bottom:var(--gap-0px)}.mt0px{margin-top:var(--gap-0px)}.mb0px{margin-bottom:var(--gap-0px)}.ps-absolute{position:absolute}.ps-fixed{position:fixed}.ps-relative{position:relative}.ps-static{position:static}.ps-sticky{position:sticky}.t0{top:0}.r0{right:0}.b0{bottom:0}.l0{left:0}.t50p{top:50%}.r50p{right:50%}.b50p{bottom:50%}.l50p{left:50%}.t100p{top:100%}.r100p{right:100%}.b100p{bottom:100%}.l100p{left:100%}.t-auto{top:auto}.r-auto{right:auto}.b-auto{bottom:auto}.l-auto{left:auto}.ab-center,.ab-center-v{position:absolute;top:50%}.ab-center{left:50%;transform:translate(-50%,-50%)}.ab-center-v{transform:translateY(-50%)}.ab-center-h{position:absolute;left:50%;transform:translateX(-50%)}.ab-full,.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{position:absolute;top:0;right:0;bottom:0;left:0}.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{content:""}.z-hide{z-index:-1}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.z5{z-index:5}.z10{z-index:10}.z20{z-index:20}.z30{z-index:30}.z40{z-index:40}.z100{z-index:100}.z99999999{z-index:99999999}.ff-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.ff-serif{font-family:Georgia,Cambria,"Times New Roman",Times,serif}.fc-white{color:#fff}.fc-black{color:#000}.bg-white{background-color:#fff}.bg-black{background-color:#000}.fw-normal{font-weight:400}.fw-bold{font-weight:700}.lh-xs{line-height:1}.lh-sm{line-height:1.15}.lh-md{line-height:1.3}.lh-lg{line-height:1.6}.lh-xl{line-height:1.92}.lh-xxl{line-height:2}.lh-unset{line-height:unset}.fs-normal{font-style:normal}.fs-italic{font-style:italic}.tt-capitalize{text-transform:capitalize}.tt-lowercase{text-transform:lowercase}.tt-uppercase{text-transform:uppercase}.tt-none{text-transform:none}.tt-unset{text-transform:unset}.td-underline{text-decoration:underline}.td-none{text-decoration:none}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.ta-justify{text-align:justify}.ws-normal{white-space:normal}.ws-nowrap{white-space:nowrap}.ws-pre{white-space:pre}.ws-pre-wrap{white-space:pre-wrap}.ws-pre-line{white-space:pre-line}.wb-normal{word-break:normal}.wb-break-all{word-break:break-all}.wb-keep-all{word-break:keep-all}.wb-inherit{word-break:inherit}.wb-initial{word-break:initial}.wb-unset{word-break:unset}.break-word{word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--font-serif:Georgia, Cambria, "Times New Roman", Times, serif;--color-white:#fff;--color-black:#000}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-inline-grid{display:inline-grid}.d-table{display:table}.d-table-cell{display:table-cell}.d-none{display:none}.d-unset{display:unset}.ac-stretch{align-content:stretch}.ac-center{align-content:center}.ac-start{align-content:flex-start}.ac-end{align-content:flex-end}.ac-space-between{align-content:space-between}.ac-space-around{align-content:space-around}.ai-stretch{align-items:stretch}.ai-center{align-items:center}.ai-start{align-items:flex-start}.ai-end{align-items:flex-end}.ai-baseline{align-items:baseline}.as-auto{align-self:auto}.as-stretch{align-self:stretch}.as-center{align-self:center}.as-start{align-self:flex-start}.as-end{align-self:flex-end}.as-baseline{align-self:baseline}.fd-row{flex-direction:row}.fd-row-reverse{flex-direction:row-reverse}.fd-column{flex-direction:column}.fd-column-reverse{flex-direction:column-reverse}.fw-nowrap{flex-wrap:nowrap}.fw-wrap{flex-wrap:wrap}.fw-wrap-reverse{flex-wrap:wrap-reverse}.jc-start{justify-content:flex-start}.jc-end{justify-content:flex-end}.jc-center{justify-content:center}.jc-space-between{justify-content:space-between}.jc-space-around{justify-content:space-around}.jc-space-evenly{justify-content:space-evenly}.fl-center{justify-content:center}.fl-center,.fl-center-v{display:flex;align-items:center}.fl-center-h{display:flex;justify-content:center}.fl-grid{display:flex;flex-wrap:wrap}.t{transition-duration:.25s;transition-property:all;transition-timing-function:ease;transition-delay:0s}.t-slow{transition-duration:.6s}.t-fast{transition-duration:.1s}.t-opacity{transition-property:opacity}.t-opacity-color{transition-property:opacity,color}.t-transform{transition-property:transform}.t-transform-opacity{transition-property:transform,opacity}.t-transform-opacity-color{transition-property:transform,opacity,color}.t-transform-color{transition-property:transform,color}.t-color{transition-property:color}.of-fill{object-fit:fill}.of-contain{object-fit:contain}.of-cover{object-fit:cover}.of-scale-down{object-fit:scale-down}.of-none{object-fit:none}.op-center{object-position:center}.pe-auto{pointer-events:auto}.pe-none{pointer-events:none}.us-auto{user-select:auto}.us-none{user-select:none}.ud-auto{user-drag:auto}.ud-none{user-drag:none}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.bar-pill{border-radius:1000px}.bar-circle{border-radius:100%}.bar0{border-radius:0}.bar3px{border-radius:3px}.bar5px{border-radius:5px}.bar10px{border-radius:10px}.bar15px{border-radius:15px}.skeleton-bg{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==);background-size:30px;background-repeat:no-repeat;background-position:center;background-color:#eee}.w-auto{width:auto}.w0{width:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w33{width:33.33%}.w66{width:66.67%}.w-screen{width:100vw}.h-auto{height:auto}.h0{height:0}.h100{height:100%}.h-screen{height:100vh}.c-auto{cursor:auto}.c-default{cursor:default}.c-pointer{cursor:pointer}.c-text{cursor:text}.c-wait{cursor:wait}.c-move{cursor:move}.c-not-allowed{cursor:not-allowed}.c-help{cursor:help}.ar-auto{aspect-ratio:auto}.ar-inherit{aspect-ratio:inherit}.ar-unset{aspect-ratio:unset}.ar-1{aspect-ratio:1}.ar-169{aspect-ratio:16/9}.ar-43{aspect-ratio:4/3}.ar-12{aspect-ratio:1/2}.flex-grid-template{--grid-gap-x:30px;--grid-gap-y:30px;--grid-col:3;--grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));--grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));display:flex;flex-wrap:wrap;gap:var(--grid-gap-y) var(--grid-gap-x)}.flex-grid-template>*{width:calc(100%/var(--grid-col) - var(--grid-space-each))}@media only screen and (max-width:768px){.flex-grid-template{--grid-col:2}}@media only screen and (max-width:480px){.flex-grid-template{--grid-col:1}}.img-wrapper-contain>img,.img-wrapper-cover>img{object-position:center center;height:100%;width:100%;min-height:100%;min-width:100%;max-height:100%;max-width:100%;display:block;object-fit:cover}.img-wrapper-contain>img{object-fit:contain}.list-style-none ul,ul.list-style-none{margin:0;list-style:none}.list-style-none ul>li,ul.list-style-none>li{padding:0}.visually-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0} \ No newline at end of file +.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}:root{--spacing-0:0}.pt0{padding-top:var(--spacing-0)}.pb0{padding-bottom:var(--spacing-0)}.mt0{margin-top:var(--spacing-0)}.mb0{margin-bottom:var(--spacing-0)}.ps-absolute{position:absolute}.ps-fixed{position:fixed}.ps-relative{position:relative}.ps-static{position:static}.ps-sticky{position:sticky}.t0{top:0}.r0{right:0}.b0{bottom:0}.l0{left:0}.t50p{top:50%}.r50p{right:50%}.b50p{bottom:50%}.l50p{left:50%}.t100p{top:100%}.r100p{right:100%}.b100p{bottom:100%}.l100p{left:100%}.t-auto{top:auto}.r-auto{right:auto}.b-auto{bottom:auto}.l-auto{left:auto}.ab-center,.ab-center-v{position:absolute;top:50%}.ab-center{left:50%;transform:translate(-50%,-50%)}.ab-center-v{transform:translateY(-50%)}.ab-center-h{position:absolute;left:50%;transform:translateX(-50%)}.ab-full,.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{position:absolute;top:0;right:0;bottom:0;left:0}.ab-full-a:after,.ab-full-b:before,.ab-full-ba:after,.ab-full-ba:before{content:""}.z-hide{z-index:-1}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.z5{z-index:5}.z10{z-index:10}.z20{z-index:20}.z30{z-index:30}.z40{z-index:40}.z100{z-index:100}.z99999999{z-index:99999999}.ff-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}.ff-serif{font-family:Georgia,Cambria,"Times New Roman",Times,serif}.fc-white{color:#fff}.fc-black{color:#000}.bg-white{background-color:#fff}.bg-black{background-color:#000}.fw-normal{font-weight:400}.fw-bold{font-weight:700}.lh-xs{line-height:1}.lh-sm{line-height:1.15}.lh-md{line-height:1.3}.lh-lg{line-height:1.6}.lh-xl{line-height:1.92}.lh-xxl{line-height:2}.lh-unset{line-height:unset}.fs-normal{font-style:normal}.fs-italic{font-style:italic}.tt-capitalize{text-transform:capitalize}.tt-lowercase{text-transform:lowercase}.tt-uppercase{text-transform:uppercase}.tt-none{text-transform:none}.tt-unset{text-transform:unset}.td-underline{text-decoration:underline}.td-none{text-decoration:none}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.ta-justify{text-align:justify}.ws-normal{white-space:normal}.ws-nowrap{white-space:nowrap}.ws-pre{white-space:pre}.ws-pre-wrap{white-space:pre-wrap}.ws-pre-line{white-space:pre-line}.wb-normal{word-break:normal}.wb-break-all{word-break:break-all}.wb-keep-all{word-break:keep-all}.wb-inherit{word-break:inherit}.wb-initial{word-break:initial}.wb-unset{word-break:unset}.break-word{word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--font-serif:Georgia, Cambria, "Times New Roman", Times, serif;--color-white:#fff;--color-black:#000}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-grid{display:grid}.d-inline-grid{display:inline-grid}.d-table{display:table}.d-table-cell{display:table-cell}.d-none{display:none}.d-unset{display:unset}.ac-stretch{align-content:stretch}.ac-center{align-content:center}.ac-start{align-content:flex-start}.ac-end{align-content:flex-end}.ac-space-between{align-content:space-between}.ac-space-around{align-content:space-around}.ai-stretch{align-items:stretch}.ai-center{align-items:center}.ai-start{align-items:flex-start}.ai-end{align-items:flex-end}.ai-baseline{align-items:baseline}.as-auto{align-self:auto}.as-stretch{align-self:stretch}.as-center{align-self:center}.as-start{align-self:flex-start}.as-end{align-self:flex-end}.as-baseline{align-self:baseline}.fd-row{flex-direction:row}.fd-row-reverse{flex-direction:row-reverse}.fd-column{flex-direction:column}.fd-column-reverse{flex-direction:column-reverse}.fw-nowrap{flex-wrap:nowrap}.fw-wrap{flex-wrap:wrap}.fw-wrap-reverse{flex-wrap:wrap-reverse}.jc-start{justify-content:flex-start}.jc-end{justify-content:flex-end}.jc-center{justify-content:center}.jc-space-between{justify-content:space-between}.jc-space-around{justify-content:space-around}.jc-space-evenly{justify-content:space-evenly}.fl-center{justify-content:center}.fl-center,.fl-center-v{display:flex;align-items:center}.fl-center-h{display:flex;justify-content:center}.fl-grid{display:flex;flex-wrap:wrap}.t{transition-duration:.25s;transition-property:all;transition-timing-function:ease;transition-delay:0s}.t-slow{transition-duration:.6s}.t-fast{transition-duration:.1s}.t-opacity{transition-property:opacity}.t-opacity-color{transition-property:opacity,color}.t-transform{transition-property:transform}.t-transform-opacity{transition-property:transform,opacity}.t-transform-opacity-color{transition-property:transform,opacity,color}.t-transform-color{transition-property:transform,color}.t-color{transition-property:color}.of-fill{object-fit:fill}.of-contain{object-fit:contain}.of-cover{object-fit:cover}.of-scale-down{object-fit:scale-down}.of-none{object-fit:none}.op-center{object-position:center}.pe-auto{pointer-events:auto}.pe-none{pointer-events:none}.us-auto{user-select:auto}.us-none{user-select:none}.ud-auto{user-drag:auto}.ud-none{user-drag:none}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.bar-pill{border-radius:1000px}.bar-circle{border-radius:100%}.bar0{border-radius:0}.bar3px{border-radius:3px}.bar5px{border-radius:5px}.bar10px{border-radius:10px}.bar15px{border-radius:15px}.skeleton-bg{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4Ij4NCjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTA1MjU0IiBzdHJva2Utd2lkdGg9IjEwIiByPSI0NSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY2IDQ0IiBzdHlsZT0iJiMxMDsgICAgLyogc3Ryb2tlLWRhc2hhcnJheTogMTY2IDQ0OyAqLyYjMTA7Ij4NCiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+DQo8L2NpcmNsZT4NCjwvc3ZnPg==);background-size:30px;background-repeat:no-repeat;background-position:center;background-color:#eee}.w-auto{width:auto}.w0{width:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w33{width:33.33%}.w66{width:66.67%}.w-screen{width:100vw}.h-auto{height:auto}.h0{height:0}.h100{height:100%}.h-screen{height:100vh}.c-auto{cursor:auto}.c-default{cursor:default}.c-pointer{cursor:pointer}.c-text{cursor:text}.c-wait{cursor:wait}.c-move{cursor:move}.c-not-allowed{cursor:not-allowed}.c-help{cursor:help}.ar-auto{aspect-ratio:auto}.ar-inherit{aspect-ratio:inherit}.ar-unset{aspect-ratio:unset}.ar-1{aspect-ratio:1}.ar-169{aspect-ratio:16/9}.ar-43{aspect-ratio:4/3}.ar-12{aspect-ratio:1/2}.flex-grid-template{--grid-gap-x:30px;--grid-gap-y:30px;--grid-col:3;--grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));--grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));display:flex;flex-wrap:wrap;gap:var(--grid-gap-y) var(--grid-gap-x)}.flex-grid-template>*{width:calc(100%/var(--grid-col) - var(--grid-space-each))}@media only screen and (max-width:768px){.flex-grid-template{--grid-col:2}}@media only screen and (max-width:480px){.flex-grid-template{--grid-col:1}}.img-wrapper-contain>img,.img-wrapper-cover>img{object-position:center center;height:100%;width:100%;min-height:100%;min-width:100%;max-height:100%;max-width:100%;display:block;object-fit:cover}.img-wrapper-contain>img{object-fit:contain}.list-style-none ul,ul.list-style-none{margin:0;list-style:none}.list-style-none ul>li,ul.list-style-none>li{padding:0}.visually-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;padding:0;border:0} \ No newline at end of file diff --git a/scss/_config.scss b/scss/_config.scss index 5c8807c..4a782aa 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -40,26 +40,26 @@ //); // vertical spacing -//$vertical_spacing: ( -// "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, -// "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, -//); +$vertical_spacing: ( + "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, + "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, +); // custom spacing (vertical) -//$custom_spacing: ( -// 'default':10, -// 'heading':20, -// 'paragraph':16, -//); +$custom_spacing: ( + 'default':10, + 'heading':20, + 'paragraph':16, +); // horizontal spacing -//$horizontal_spacing: ( -// "values":20 40, -// "md":20 20, -//); +$horizontal_spacing: ( + "values":20 40, + "md":20 20, +); // gap spacing (horizontal) -//$gap_spacing: ( -// "vc-column":20, -// "container":40px, -//); +$gap_spacing: ( + "vc-column":20, + "container":40px, +); diff --git a/scss/_defs.scss b/scss/_defs.scss index 2aff46c..7730114 100644 --- a/scss/_defs.scss +++ b/scss/_defs.scss @@ -47,21 +47,9 @@ $colors: (); // vertical spacing $vertical_spacing: ( - "values": 0px + "values": 0 ); -// custom spacing (vertical) -$custom_spacing: (); - -// horizontal spacing -$horizontal_spacing: ( - "values":0, -); - -// gap spacing (horizontal) -$gap_spacing: (); - - // horizontal spacing //$horizontal_spacing: ( // "values": 0 100 200, diff --git a/scss/spacing.scss b/scss/spacing.scss index 638e463..b26b6e4 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -22,7 +22,7 @@ $classes: ("m":"margin", "p":"padding"); * General spacing variables */ -@mixin generate-spacing-variables($axis_spacing, $prefix) { +@mixin generate-spacing-variables($vertical_spacing, $prefix) { $project-prefix: map-get($info, 'variable-prefix'); @each $breakpoint, $values in $vertical_spacing { @if is-breakpoint($breakpoint) { From c0dea600ed3552eef0d8b88a185235e9cfa024a8 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 28 Nov 2023 10:15:56 +0700 Subject: [PATCH 11/14] fix(default-spacing): add comment for _config.scss and change parameter name in spacing.scss --- css/spacing.css | 304 +++------------------------------------------- scss/_config.scss | 34 +++--- scss/_defs.scss | 12 ++ scss/spacing.scss | 2 +- 4 files changed, 49 insertions(+), 303 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index c4da7ed..8b1cb6d 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -4,23 +4,23 @@ */ /* Margin auto */ .m-auto { - margin:auto; + margin: auto; } .mt-auto { - margin-top:auto; + margin-top: auto; } .mr-auto { - margin-right:auto; + margin-right: auto; } .mb-auto { - margin-bottom:auto; + margin-bottom: auto; } .ml-auto { - margin-left:auto; + margin-left: auto; } /** @@ -30,307 +30,41 @@ * custom spacing */ :root { - --spacing-default:10px; - --spacing-heading:20px; - --spacing-paragraph:16px; -} - -:root { - --gap-vc-column:20px; - --gap-container:40px; -} - -:root { - --spacing-0:0; - --spacing-1:1px; - --spacing-2:2px; - --spacing-4:4px; - --spacing-6:6px; - --spacing-8:8px; - --spacing-12:12px; - --spacing-16:16px; - --spacing-24:24px; - --spacing-32:32px; - --spacing-48:48px; - --spacing-64:64px; - --spacing-96:96px; - --spacing-128:128px; + --spacing-0: 0; } .pt0 { - padding-top:var(--spacing-0); + padding-top: var(--spacing-0); } .pb0 { - padding-bottom:var(--spacing-0); + padding-bottom: var(--spacing-0); } .mt0 { - margin-top:var(--spacing-0); + margin-top: var(--spacing-0); } .mb0 { - margin-bottom:var(--spacing-0); -} - -.pt1 { - padding-top:var(--spacing-1); -} - -.pb1 { - padding-bottom:var(--spacing-1); -} - -.mt1 { - margin-top:var(--spacing-1); -} - -.mb1 { - margin-bottom:var(--spacing-1); -} - -.pt2 { - padding-top:var(--spacing-2); -} - -.pb2 { - padding-bottom:var(--spacing-2); -} - -.mt2 { - margin-top:var(--spacing-2); -} - -.mb2 { - margin-bottom:var(--spacing-2); -} - -.pt4 { - padding-top:var(--spacing-4); -} - -.pb4 { - padding-bottom:var(--spacing-4); -} - -.mt4 { - margin-top:var(--spacing-4); -} - -.mb4 { - margin-bottom:var(--spacing-4); -} - -.pt6 { - padding-top:var(--spacing-6); + margin-bottom: var(--spacing-0); } -.pb6 { - padding-bottom:var(--spacing-6); -} - -.mt6 { - margin-top:var(--spacing-6); -} - -.mb6 { - margin-bottom:var(--spacing-6); -} - -.pt8 { - padding-top:var(--spacing-8); -} - -.pb8 { - padding-bottom:var(--spacing-8); -} - -.mt8 { - margin-top:var(--spacing-8); -} - -.mb8 { - margin-bottom:var(--spacing-8); -} - -.pt12 { - padding-top:var(--spacing-12); -} - -.pb12 { - padding-bottom:var(--spacing-12); -} - -.mt12 { - margin-top:var(--spacing-12); -} - -.mb12 { - margin-bottom:var(--spacing-12); -} - -.pt16 { - padding-top:var(--spacing-16); -} - -.pb16 { - padding-bottom:var(--spacing-16); -} - -.mt16 { - margin-top:var(--spacing-16); -} - -.mb16 { - margin-bottom:var(--spacing-16); -} - -.pt24 { - padding-top:var(--spacing-24); -} - -.pb24 { - padding-bottom:var(--spacing-24); -} - -.mt24 { - margin-top:var(--spacing-24); -} - -.mb24 { - margin-bottom:var(--spacing-24); -} - -.pt32 { - padding-top:var(--spacing-32); -} - -.pb32 { - padding-bottom:var(--spacing-32); -} - -.mt32 { - margin-top:var(--spacing-32); -} - -.mb32 { - margin-bottom:var(--spacing-32); -} - -.pt48 { - padding-top:var(--spacing-48); -} - -.pb48 { - padding-bottom:var(--spacing-48); -} - -.mt48 { - margin-top:var(--spacing-48); -} - -.mb48 { - margin-bottom:var(--spacing-48); -} - -.pt64 { - padding-top:var(--spacing-64); -} - -.pb64 { - padding-bottom:var(--spacing-64); -} - -.mt64 { - margin-top:var(--spacing-64); -} - -.mb64 { - margin-bottom:var(--spacing-64); -} - -.pt96 { - padding-top:var(--spacing-96); -} - -.pb96 { - padding-bottom:var(--spacing-96); -} - -.mt96 { - margin-top:var(--spacing-96); -} - -.mb96 { - margin-bottom:var(--spacing-96); -} - -.pt128 { - padding-top:var(--spacing-128); -} - -.pb128 { - padding-bottom:var(--spacing-128); -} - -.mt128 { - margin-top:var(--spacing-128); -} - -.mb128 { - margin-bottom:var(--spacing-128); -} - -/* Breakpoint md */ -@media only screen and (max-width:1024px) { - :root { - --spacing-32:30px; - --spacing-48:40px; - --spacing-64:50px; - --spacing-96:60px; - --spacing-128:70px; - } -} :root { - --gap-20:20px; - --gap-40:40px; -} - -.pt20 { - padding-top:var(--gap-20); -} - -.pb20 { - padding-bottom:var(--gap-20); -} - -.mt20 { - margin-top:var(--gap-20); + --gap-0: 0; } -.mb20 { - margin-bottom:var(--gap-20); -} - -.pt40 { - padding-top:var(--gap-40); -} - -.pb40 { - padding-bottom:var(--gap-40); +.pt0 { + padding-top: var(--gap-0); } -.mt40 { - margin-top:var(--gap-40); +.pb0 { + padding-bottom: var(--gap-0); } -.mb40 { - margin-bottom:var(--gap-40); +.mt0 { + margin-top: var(--gap-0); } -/* Breakpoint md */ -@media only screen and (max-width:1024px) { - :root { - --gap-40:20px; - } +.mb0 { + margin-bottom: var(--gap-0); } diff --git a/scss/_config.scss b/scss/_config.scss index 4a782aa..5c8807c 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -40,26 +40,26 @@ //); // vertical spacing -$vertical_spacing: ( - "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, - "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, -); +//$vertical_spacing: ( +// "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, +// "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, +//); // custom spacing (vertical) -$custom_spacing: ( - 'default':10, - 'heading':20, - 'paragraph':16, -); +//$custom_spacing: ( +// 'default':10, +// 'heading':20, +// 'paragraph':16, +//); // horizontal spacing -$horizontal_spacing: ( - "values":20 40, - "md":20 20, -); +//$horizontal_spacing: ( +// "values":20 40, +// "md":20 20, +//); // gap spacing (horizontal) -$gap_spacing: ( - "vc-column":20, - "container":40px, -); +//$gap_spacing: ( +// "vc-column":20, +// "container":40px, +//); diff --git a/scss/_defs.scss b/scss/_defs.scss index 7730114..0ff7ae4 100644 --- a/scss/_defs.scss +++ b/scss/_defs.scss @@ -50,6 +50,18 @@ $vertical_spacing: ( "values": 0 ); +// custom spacing (vertical) +$custom_spacing: (); + +// horizontal spacing +$horizontal_spacing: ( + "values":0, +); + +// gap spacing (horizontal) +$gap_spacing: (); + + // horizontal spacing //$horizontal_spacing: ( // "values": 0 100 200, diff --git a/scss/spacing.scss b/scss/spacing.scss index b26b6e4..638e463 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -22,7 +22,7 @@ $classes: ("m":"margin", "p":"padding"); * General spacing variables */ -@mixin generate-spacing-variables($vertical_spacing, $prefix) { +@mixin generate-spacing-variables($axis_spacing, $prefix) { $project-prefix: map-get($info, 'variable-prefix'); @each $breakpoint, $values in $vertical_spacing { @if is-breakpoint($breakpoint) { From 04bea31d17c6ea3e69ec9f4f057b16d537f749f2 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 28 Nov 2023 11:34:22 +0700 Subject: [PATCH 12/14] fix(default-spacing): add comment and check condition --- css/spacing.css | 38 ++++++++++----------------------- scss/_config.scss | 20 +++++++++++------ scss/_defs.scss | 16 ++++---------- scss/_helpers.scss | 8 +++++-- scss/spacing.scss | 53 ++++++++++++++++++++++++---------------------- 5 files changed, 62 insertions(+), 73 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index 8b1cb6d..7453124 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -4,23 +4,23 @@ */ /* Margin auto */ .m-auto { - margin: auto; + margin: auto; } .mt-auto { - margin-top: auto; + margin-top: auto; } .mr-auto { - margin-right: auto; + margin-right: auto; } .mb-auto { - margin-bottom: auto; + margin-bottom: auto; } .ml-auto { - margin-left: auto; + margin-left: auto; } /** @@ -30,41 +30,25 @@ * custom spacing */ :root { - --spacing-0: 0; + --spacing-0: 0; } .pt0 { - padding-top: var(--spacing-0); + padding-top: var(--spacing-0); } .pb0 { - padding-bottom: var(--spacing-0); + padding-bottom: var(--spacing-0); } .mt0 { - margin-top: var(--spacing-0); + margin-top: var(--spacing-0); } .mb0 { - margin-bottom: var(--spacing-0); + margin-bottom: var(--spacing-0); } :root { - --gap-0: 0; -} - -.pt0 { - padding-top: var(--gap-0); -} - -.pb0 { - padding-bottom: var(--gap-0); -} - -.mt0 { - margin-top: var(--gap-0); -} - -.mb0 { - margin-bottom: var(--gap-0); + --spacing-x-0: 0; } diff --git a/scss/_config.scss b/scss/_config.scss index 1341bd6..fc0b135 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -39,14 +39,20 @@ // "xs": 480px, //); +// SPACING +// 40% => --spacing-x-40: 40% +// 40 => --spacing-x-40: 40px +// 40px => --spacing-x-40px: 40px +// 40em => --spacing-x-40em: 40em + // vertical spacing //$vertical_spacing: ( // "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128, // "md": 0 1 2 4 6 8 12 16 24 30 40 50 60 70, //); -// custom spacing (vertical) -//$custom_spacing: ( +// custom vertical spacing +//$custom_vertical_spacing: ( // 'default':10, // 'heading':20, // 'paragraph':16, @@ -55,13 +61,13 @@ // horizontal spacing //$horizontal_spacing: ( // "values":20 40, -// "md":20 20, +// "md": 20 20, //); -// gap spacing (horizontal) -//$gap_spacing: ( -// "vc-column":20, -// "container":40px, +// custom horizontal spacing (gap) +//$custom_horizontal_spacing: ( +// "gap-vc-column":20, +// "gap-container":40px, // Add unit to not use the responsive value //); // loading class diff --git a/scss/_defs.scss b/scss/_defs.scss index 76f11eb..ac7c7f6 100644 --- a/scss/_defs.scss +++ b/scss/_defs.scss @@ -50,24 +50,16 @@ $vertical_spacing: ( "values": 0 ); -// custom spacing (vertical) -$custom_spacing: (); +// custom vertical spacing +$custom_vertical_spacing: (); // horizontal spacing $horizontal_spacing: ( "values":0, ); -// gap spacing (horizontal) -$gap_spacing: (); - - -// horizontal spacing -//$horizontal_spacing: ( -// "values": 0 100 200, -// "lg":0 50 200, -// "md":0 20 100, -//); +// custom horizontal spacing (gap) +$custom_horizontal_spacing: (); // coordinate values (for position top, right, bottom left) $coordinate_values: ( diff --git a/scss/_helpers.scss b/scss/_helpers.scss index f404a3f..005fb7c 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -452,7 +452,7 @@ @return false; } -// Define if the value is containing any CSS unit, create CSS unit if it not +// Check if the value is containing any CSS unit, create CSS unit if it not @mixin print-variables-in-root($list_responsive_values, $list_responsive_names, $variable_name) { // get value list from $list_responsive_names $allowed_values_list: map-get($list_responsive_values, "values"); @@ -472,7 +472,11 @@ $newValue: var(#{get-variable(#{$variable_name}-#{replace-prop($responsive_value)})}); // => var(--$variable_name-90); } - @include get-variable(#{$variable_name}-#{replace-prop($responsive_name)}, $newValue); // => --gap-container: $newValue; + @if ($variable_name == "spacing") { + @include get-variable(#{$variable_name}-#{replace-prop($responsive_name)}, $newValue); // => --$variable_name-$responsive_name: $newValue; + } @else { + @include get-variable(#{replace-prop($responsive_name)}, $newValue); // => --$responsive_name: $newValue; + } } } } diff --git a/scss/spacing.scss b/scss/spacing.scss index 638e463..b709bbd 100644 --- a/scss/spacing.scss +++ b/scss/spacing.scss @@ -24,20 +24,20 @@ $classes: ("m":"margin", "p":"padding"); @mixin generate-spacing-variables($axis_spacing, $prefix) { $project-prefix: map-get($info, 'variable-prefix'); - @each $breakpoint, $values in $vertical_spacing { + @each $breakpoint, $values in $axis_spacing { @if is-breakpoint($breakpoint) { // Responsive value @include media-screen($breakpoint) { :root { @for $i from 1 through length($values) { $value: nth($values, $i); - $postfix: get-desktop-value($i, $vertical_spacing); + $postfix: get-desktop-value($i, $axis_spacing); //@debug $value, $postfix; /// if changed compare with desktop value @if $value != $postfix { - $previous_postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing); + $previous_postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing); // and changed compare with the previous value @if $value != $previous_postfix { @@ -52,44 +52,47 @@ $classes: ("m":"margin", "p":"padding"); :root { @for $i from 1 through length($values) { $value: nth($values, $i); - $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing); + $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing); //@debug $value, $postfix; - @include get-variable(#{$prefix}-#{replace-prop($postfix)}, #{format-value($value)}); } } - // margin padding top bottom - @for $i from 1 through length($values) { - $value: nth($values, $i); - $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $vertical_spacing); - //@debug $value, $postfix; + @if ($prefix == "spacing") { + // margin padding top bottom + @for $i from 1 through length($values) { + $value: nth($values, $i); + $postfix: get-previous-breakpoint-value($i, $value, $breakpoint, $axis_spacing); + //@debug $value, $postfix; - $var: var(#{get-variable(#{$prefix}-#{replace-prop($postfix)})}); + $var: var(#{get-variable(#{$prefix}-#{replace-prop($postfix)})}); - .pt#{replace-prop($postfix)} { - padding-top: #{$var}; - } - .pb#{replace-prop($postfix)} { - padding-bottom: #{$var}; - } - .mt#{replace-prop($postfix)} { - margin-top: #{$var}; - } - .mb#{replace-prop($postfix)} { - margin-bottom: #{$var}; + + .pt#{replace-prop($postfix)} { + padding-top: #{$var}; + } + .pb#{replace-prop($postfix)} { + padding-bottom: #{$var}; + } + .mt#{replace-prop($postfix)} { + margin-top: #{$var}; + } + .mb#{replace-prop($postfix)} { + margin-bottom: #{$var}; + } } } } } + } /** * custom spacing */ -@include print-variables-in-root($vertical_spacing, $custom_spacing, 'spacing'); -@include print-variables-in-root($horizontal_spacing, $gap_spacing, 'gap'); +@include print-variables-in-root($vertical_spacing, $custom_vertical_spacing, 'spacing'); +@include print-variables-in-root($horizontal_spacing, $custom_horizontal_spacing, 'spacing-x'); @include generate-spacing-variables($vertical_spacing, 'spacing'); -@include generate-spacing-variables($horizontal_spacing, 'gap'); +@include generate-spacing-variables($horizontal_spacing, 'spacing-x'); From ece68c252ad57b982e8ececa7e9b9750fdef4a7d Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 28 Nov 2023 13:44:16 +0700 Subject: [PATCH 13/14] refactor(default-spacing): format codes --- css/spacing.css | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/css/spacing.css b/css/spacing.css index 7453124..1925f18 100644 --- a/css/spacing.css +++ b/css/spacing.css @@ -4,23 +4,23 @@ */ /* Margin auto */ .m-auto { - margin: auto; + margin:auto; } .mt-auto { - margin-top: auto; + margin-top:auto; } .mr-auto { - margin-right: auto; + margin-right:auto; } .mb-auto { - margin-bottom: auto; + margin-bottom:auto; } .ml-auto { - margin-left: auto; + margin-left:auto; } /** @@ -30,25 +30,25 @@ * custom spacing */ :root { - --spacing-0: 0; + --spacing-0:0; } .pt0 { - padding-top: var(--spacing-0); + padding-top:var(--spacing-0); } .pb0 { - padding-bottom: var(--spacing-0); + padding-bottom:var(--spacing-0); } .mt0 { - margin-top: var(--spacing-0); + margin-top:var(--spacing-0); } .mb0 { - margin-bottom: var(--spacing-0); + margin-bottom:var(--spacing-0); } :root { - --spacing-x-0: 0; + --spacing-x-0:0; } From be80699c87dcee5a53ca3c342e5fb3a15e740393 Mon Sep 17 00:00:00 2001 From: Pau15122 <77733880+vandangnhathung@users.noreply.github.com> Date: Tue, 28 Nov 2023 13:52:45 +0700 Subject: [PATCH 14/14] docs(default-spacing): update comment --- scss/_helpers.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 005fb7c..3c40687 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -441,7 +441,7 @@ @return --#{$project-prefix}#{$prop}; } -// Find a value from the key in list +// Return true if a list contains a specified value. // ($list:0 1 2 4 6 8 12 16 24 32 48 64 96 128, $value: 48) => true @function map-search($list, $value) { @for $i from 1 through length($list) {