From 28782218a0526538d5fd7ef456941d9dd5553798 Mon Sep 17 00:00:00 2001 From: vuquangpham Date: Tue, 30 May 2023 14:10:39 +0700 Subject: [PATCH 1/4] feat(helper): introduce function that generate property --- scss/_helpers.scss | 31 ++++++++++++++++++++++++++++--- scss/transitions.scss | 7 ++++++- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 9a425ef..ca7ad03 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -275,6 +275,9 @@ $is_value_key_as_postfix: false; $is_inline: false; + // separate option + $has_separate: false; + @if ($input-type=='map') { $value: map-get($data, "value"); $prefix: map-get($data, "prefix"); @@ -284,6 +287,11 @@ $has_hyphen: map-get($data, "hyphen"); } + // has separate + @if map-has-key($data, 'separate') { + $has_separate: map-get($data, 'separate') + } + // type $has_type: map-has-key($data, "type"); $type: map-get($data, "type"); @@ -315,9 +323,26 @@ } @each $val in $value { - @if not is-ignored($prop, $val) { - .#{$prefix}#{$hyphen}#{replace-prop($val)} { - #{$prop}: #{$val}; + @if $val { + + // separate functional + @if $has_separate and str-index($val, '-') { + $list: (); + + @each $property in str-split($val, '-') { + $list: append($list, $property) + } + .#{$prefix}#{$hyphen}#{replace-prop($val)} { + #{$prop}: #{$list}; + } + + } @else { + // default + @if not is-ignored($prop, $val) { + .#{$prefix}#{$hyphen}#{replace-prop($val)} { + #{$prop}: #{$val}; + } + } } } } diff --git a/scss/transitions.scss b/scss/transitions.scss index 623042e..fef725e 100644 --- a/scss/transitions.scss +++ b/scss/transitions.scss @@ -20,7 +20,12 @@ $dataset: ( opacity:( selectors:'.t-opacity', inline:'transition-property: opacity' - ) + ), + transition-property:( + prefix: "t", + separate: true, + value: transform transform-opacity opacity-color + ), ); // print From 6cca199bfb67264f9338c36d55ae827b0e2e42bb Mon Sep 17 00:00:00 2001 From: vuquangpham Date: Wed, 31 May 2023 17:03:23 +0700 Subject: [PATCH 2/4] Revert "feat(helper): introduce function that generate property" This reverts commit 28782218a0526538d5fd7ef456941d9dd5553798. --- scss/_helpers.scss | 31 +++---------------------------- scss/transitions.scss | 7 +------ 2 files changed, 4 insertions(+), 34 deletions(-) diff --git a/scss/_helpers.scss b/scss/_helpers.scss index ca7ad03..9a425ef 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -275,9 +275,6 @@ $is_value_key_as_postfix: false; $is_inline: false; - // separate option - $has_separate: false; - @if ($input-type=='map') { $value: map-get($data, "value"); $prefix: map-get($data, "prefix"); @@ -287,11 +284,6 @@ $has_hyphen: map-get($data, "hyphen"); } - // has separate - @if map-has-key($data, 'separate') { - $has_separate: map-get($data, 'separate') - } - // type $has_type: map-has-key($data, "type"); $type: map-get($data, "type"); @@ -323,26 +315,9 @@ } @each $val in $value { - @if $val { - - // separate functional - @if $has_separate and str-index($val, '-') { - $list: (); - - @each $property in str-split($val, '-') { - $list: append($list, $property) - } - .#{$prefix}#{$hyphen}#{replace-prop($val)} { - #{$prop}: #{$list}; - } - - } @else { - // default - @if not is-ignored($prop, $val) { - .#{$prefix}#{$hyphen}#{replace-prop($val)} { - #{$prop}: #{$val}; - } - } + @if not is-ignored($prop, $val) { + .#{$prefix}#{$hyphen}#{replace-prop($val)} { + #{$prop}: #{$val}; } } } diff --git a/scss/transitions.scss b/scss/transitions.scss index fef725e..623042e 100644 --- a/scss/transitions.scss +++ b/scss/transitions.scss @@ -20,12 +20,7 @@ $dataset: ( opacity:( selectors:'.t-opacity', inline:'transition-property: opacity' - ), - transition-property:( - prefix: "t", - separate: true, - value: transform transform-opacity opacity-color - ), + ) ); // print From 9426ce531707d267cbea6965dbd7473b28c25e61 Mon Sep 17 00:00:00 2001 From: vuquangpham Date: Wed, 31 May 2023 17:08:28 +0700 Subject: [PATCH 3/4] feat(transition): add transition atomic css code --- scss/transitions.scss | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/scss/transitions.scss b/scss/transitions.scss index 623042e..0e5bdef 100644 --- a/scss/transitions.scss +++ b/scss/transitions.scss @@ -20,7 +20,31 @@ $dataset: ( opacity:( selectors:'.t-opacity', inline:'transition-property: opacity' - ) + ), + opacity-color:( + selectors:'.t-opacity-color', + inline:'transition-property: opacity, color' + ), + transform :( + selectors:'.t-transform', + inline:'transition-property: transform' + ), + transform-opacity :( + selectors:'.t-transform-opacity ', + inline:'transition-property: transform, opacity' + ), + transform-opacity-color:( + selectors:'.t-transform-opacity-color', + inline:'transition-property: transform, opacity, color' + ), + transform-color:( + selectors:'.t-transform-color', + inline:'transition-property: transform, color' + ), + color :( + selectors:'.t-color', + inline:'transition-property: color' + ), ); // print From 54735d70a9c443894c366959b4540a6c96a1e0cf Mon Sep 17 00:00:00 2001 From: vuquangpham Date: Wed, 31 May 2023 17:10:13 +0700 Subject: [PATCH 4/4] feat(transition): add generate file --- css/transitions.css | 44 +++++++++++++++++++++++++++++++++++++------- 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/css/transitions.css b/css/transitions.css index 7082cb3..7e5cddd 100644 --- a/css/transitions.css +++ b/css/transitions.css @@ -4,23 +4,53 @@ */ /* 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; +} + +/* transform */ +.t-transform { + transition-property:transform; +} + +/* transform-opacity */ +.t-transform-opacity { + transition-property:transform, opacity; +} + +/* transform-opacity-color */ +.t-transform-opacity-color { + transition-property:transform, opacity, color; +} + +/* transform-color */ +.t-transform-color { + transition-property:transform, color; +} + +/* color */ +.t-color { + transition-property:color; }