From bd183941b11cdf549d2ee90f308be7266b7aec4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 5 May 2020 11:59:25 -0300 Subject: [PATCH 1/9] Add is leading icon and is trailing icon mixins --- scss/abstracts/icon/index.scss | 2 ++ scss/abstracts/icon/mixin-has-icon.scss | 18 ++++++------------ scss/abstracts/icon/mixin-is-leading-icon.scss | 7 +++++++ .../abstracts/icon/mixin-is-trailing-icon.scss | 7 +++++++ 4 files changed, 22 insertions(+), 12 deletions(-) create mode 100644 scss/abstracts/icon/mixin-is-leading-icon.scss create mode 100644 scss/abstracts/icon/mixin-is-trailing-icon.scss diff --git a/scss/abstracts/icon/index.scss b/scss/abstracts/icon/index.scss index b8889e2d..dbb5d237 100644 --- a/scss/abstracts/icon/index.scss +++ b/scss/abstracts/icon/index.scss @@ -2,3 +2,5 @@ @import './function-get-icon-size'; @import './mixin-has-icon'; @import './mixin-mask-icon'; +@import './mixin-is-leading-icon'; +@import './mixin-is-trailing-icon'; diff --git a/scss/abstracts/icon/mixin-has-icon.scss b/scss/abstracts/icon/mixin-has-icon.scss index 73ad8ca2..79c6b686 100644 --- a/scss/abstracts/icon/mixin-has-icon.scss +++ b/scss/abstracts/icon/mixin-has-icon.scss @@ -7,12 +7,9 @@ padding-right: #{$padding} !important; > .ch-icon:last-child, - > .ch-toggle-icon { - position: absolute; - top: 50%; - left: auto; - right: calc((#{$padding}) / 2); - transform: translate(50%, -50%); + > .ch-toggle-icon, + > .ch-spinner:last-child { + @include ch-is-trailing-icon; } } @@ -20,12 +17,9 @@ padding-left: #{$padding} !important; > .ch-icon:first-child, - > .ch-toggle-icon { - position: absolute; - top: 50%; - left: calc((#{$padding}) / 2); - right: auto; - transform: translate(-50%, -50%); + > .ch-toggle-icon, + > .ch-spinner:first-child { + @include ch-is-leading-icon; } } } diff --git a/scss/abstracts/icon/mixin-is-leading-icon.scss b/scss/abstracts/icon/mixin-is-leading-icon.scss new file mode 100644 index 00000000..4a37d255 --- /dev/null +++ b/scss/abstracts/icon/mixin-is-leading-icon.scss @@ -0,0 +1,7 @@ +@mixin ch-is-leading-icon($padding: ch-calc-box-height()) { + position: absolute; + top: 50%; + left: calc((#{$padding}) / 2); + right: auto; + transform: translate(-50%, -50%); +} diff --git a/scss/abstracts/icon/mixin-is-trailing-icon.scss b/scss/abstracts/icon/mixin-is-trailing-icon.scss new file mode 100644 index 00000000..1153ef23 --- /dev/null +++ b/scss/abstracts/icon/mixin-is-trailing-icon.scss @@ -0,0 +1,7 @@ +@mixin ch-is-trailing-icon($padding: ch-calc-box-height()) { + position: absolute; + top: 50%; + left: auto; + right: calc((#{$padding}) / 2); + transform: translate(50%, -50%); +} From 225e226aac8dd07e2dbc1fc6db95d12edb607fd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 5 May 2020 11:59:56 -0300 Subject: [PATCH 2/9] Add mixin to input negative variation --- scss/abstracts/input/index.scss | 1 + scss/abstracts/input/mixin-input-negative.scss | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 scss/abstracts/input/mixin-input-negative.scss diff --git a/scss/abstracts/input/index.scss b/scss/abstracts/input/index.scss index 97b57b35..e5a35a57 100644 --- a/scss/abstracts/input/index.scss +++ b/scss/abstracts/input/index.scss @@ -1 +1,2 @@ @import './mixin-input'; +@import './mixin-input-negative'; diff --git a/scss/abstracts/input/mixin-input-negative.scss b/scss/abstracts/input/mixin-input-negative.scss new file mode 100644 index 00000000..7fc48190 --- /dev/null +++ b/scss/abstracts/input/mixin-input-negative.scss @@ -0,0 +1,17 @@ +@mixin ch-input-negative { + border-color: #{ch-get-color(negative)}; + + // 4.1. Focus interaction + + &:hover:focus, + &:hover, + &:focus { + border-color: #{ch-get-color(negative, focus)}; + } + + // 4.2. Active interaction + + &:active { + border-color: #{ch-get-color(negative, active)}; + } +} From 81e0421a323a8b53367afbf42fdb4ab87de1a226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 5 May 2020 12:00:09 -0300 Subject: [PATCH 3/9] Add size variation to input mixin --- scss/abstracts/input/mixin-input.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/scss/abstracts/input/mixin-input.scss b/scss/abstracts/input/mixin-input.scss index 54d72d64..6d4263e8 100644 --- a/scss/abstracts/input/mixin-input.scss +++ b/scss/abstracts/input/mixin-input.scss @@ -1,13 +1,11 @@ -@mixin ch-input { +@mixin ch-input($size: s) { $inset-type: squish; - $size: s; $border-rule: box; $border-color: ch-get-color(border); @include ch-space-inset($inset-type, $size); @include ch-border($border-rule, $border-color); @include ch-border-radius(1); - background-color: #{ch-get-color(neutral, 1)}; &:active { From 565338821924ccbf902d777dde41e274a28d0942 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 5 May 2020 12:00:23 -0300 Subject: [PATCH 4/9] Add icons variation to input --- examples/components/input.html | 58 ++++++++++++++-- scss/components/input/input.scss | 111 +++++++++++++++++++++++++------ 2 files changed, 141 insertions(+), 28 deletions(-) diff --git a/examples/components/input.html b/examples/components/input.html index 42110ea0..010fc40f 100644 --- a/examples/components/input.html +++ b/examples/components/input.html @@ -12,13 +12,57 @@
- - - - - - - + + + + + + + + +
+
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
diff --git a/scss/components/input/input.scss b/scss/components/input/input.scss index 4e613dcc..94687674 100644 --- a/scss/components/input/input.scss +++ b/scss/components/input/input.scss @@ -1,46 +1,115 @@ -.ch-input, -.ch-textarea, -.ch-file { +/*********************** +STYLES DIRECTLY ON INPUT +************************/ + +input.ch-input, +input.ch-file, +textarea.ch-textarea { // 1. Base @include ch-input; // 2. Fluid variation - &--fluid { width: 100%; } - // 3. Small variation + // 2. Small variation &--small { - $inset-type: squish; - $size: xs; - $border-rule: box; - $border-color: ch-get-color(border); - - @include ch-space-inset($inset-type, $size); - @include ch-border($border-rule, $border-color); + @include ch-input(xs); } // 4. Negative variation &--negative { - border-color: #{ch-get-color(negative)}; + @include ch-input-negative; + } +} + +/*************************** +STYLES ON INPUT CONTAINER +**************************/ - // 4.1. Focus interaction +.ch-input, +.ch-file { + // 1. Base + + &:not(input) > input { + @include ch-input; + } + + // 2. Fluid variation + + &--fluid, + &--fluid:not(input) > input { + width: 100%; + } + + // 3. Negative variation + + &--negative:not(input) > input { + @include ch-input-negative; + } - &:hover:focus, - &:hover, - &:focus { - border-color: #{ch-get-color(negative, focus)}; + // 4. Icons variation + + &.has-leadingIcon, + &.has-trailingIcon { + position: relative; + + > .ch-icon, + > .ch-spinner { + z-index: #{ch-get-z-index(1, 1)}; + } + + > .ch-icon { + font-size: #{ch-get-icon-size(s)}; + } + } + + &.has-leadingIcon { + > input { + @include ch-has-icon; + } + + > .ch-icon:first-child, + > .ch-spinner:first-child { + @include ch-is-leading-icon; + } + } + + &.has-trailingIcon { + > input { + @include ch-has-icon(right); + } + + > .ch-icon:last-child, + > .ch-spinner:last-child { + @include ch-is-trailing-icon; + } + } + + // 5. Small variation + + &--small { + &:not(input) > input { + @include ch-input(xs); } - // 4.2. Active interaction + // 5.1 Icons variation + + &.has-leadingIcon, + &.has-trailingIcon { + > .ch-icon { + font-size: #{ch-get-icon-size(xs)}; + } - &:active { - border-color: #{ch-get-color(negative, active)}; + > .ch-spinner { + width: #{ch-get-icon-size(s)}; + height: #{ch-get-icon-size(s)}; + } } } } From 90a0a56b8543dfd5b6a1ef1cd2190e1da4d378ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 5 May 2020 12:33:19 -0300 Subject: [PATCH 5/9] Improve disabled input style --- examples/components/input.html | 2 +- scss/components/input/input.scss | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/examples/components/input.html b/examples/components/input.html index 010fc40f..fe9da395 100644 --- a/examples/components/input.html +++ b/examples/components/input.html @@ -44,7 +44,7 @@ -
+
diff --git a/scss/components/input/input.scss b/scss/components/input/input.scss index 94687674..63c13d69 100644 --- a/scss/components/input/input.scss +++ b/scss/components/input/input.scss @@ -53,6 +53,12 @@ STYLES ON INPUT CONTAINER @include ch-input-negative; } + // 4. Disabled variation + + &.is-disabled:not(input) > input { + opacity: 1; + } + // 4. Icons variation &.has-leadingIcon, From cba4a88b54fbecf5168241ed066416c3a977d1b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 5 May 2020 14:36:11 -0300 Subject: [PATCH 6/9] Improve icons variation on buttons --- examples/components/button.html | 12 ++++++------ scss/components/button/button.scss | 24 +++++++----------------- scss/components/icon/has-icon.scss | 8 ++++---- 3 files changed, 17 insertions(+), 27 deletions(-) diff --git a/examples/components/button.html b/examples/components/button.html index 1fb7631e..7cb12166 100644 --- a/examples/components/button.html +++ b/examples/components/button.html @@ -55,15 +55,15 @@

- + Action - + Action - + Action @@ -71,15 +71,15 @@

- + Action - + Action - + Action diff --git a/scss/components/button/button.scss b/scss/components/button/button.scss index 3ad45284..26748f15 100644 --- a/scss/components/button/button.scss +++ b/scss/components/button/button.scss @@ -217,31 +217,21 @@ // 6. Small variation &--small { - $box-height: ch-calc-box-height(ch-get-text-size(), ch-get-space(xxs)); - @include ch-space-inset(squish, xs); - &.has-icon { - @include ch-has-icon(left, $box-height); - } - - &.has-iconRight { - @include ch-has-icon(right, $box-height); - } - - &.has-icon, - &.has-iconRight { + &.has-leadingIcon, + &.has-trailingIcon { > .ch-icon { font-size: #{ch-get-icon-size(s)}; } } } - // 7. Icon variation + // // 7. Icon variation &--icon, - &.has-icon, - &.has-iconRight { + &.has-leadingIcon, + &.has-trailingIcon { > .ch-icon:first-child, > .ch-icon:last-child { font-size: #{ch-get-icon-size(s)}; @@ -249,8 +239,8 @@ } &--icon.ch-button--small, - &.has-icon.ch-button--small, - &.has-iconRight.ch-button--small { + &.has-leadingIcon.ch-button--small, + &.has-trailingIcon.ch-button--small { > .ch-icon:first-child, > .ch-icon:last-child { font-size: #{ch-get-icon-size(xs)}; diff --git a/scss/components/icon/has-icon.scss b/scss/components/icon/has-icon.scss index 696d6eb2..45b3d648 100644 --- a/scss/components/icon/has-icon.scss +++ b/scss/components/icon/has-icon.scss @@ -1,7 +1,7 @@ -.has-icon { +.has-leadingIcon { @include ch-has-icon; +} - @at-root &Right { - @include ch-has-icon(right); - } +.has-trailingIcon { + @include ch-has-icon(right); } From bcba30b74c77287d3b912e342ea8deee7ea0d877 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 5 May 2020 14:39:13 -0300 Subject: [PATCH 7/9] Improve icon variations on menu --- examples/components/menu.html | 8 ++++---- scss/components/menu/menu.scss | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/components/menu.html b/examples/components/menu.html index 0ca12f99..54c8fb96 100644 --- a/examples/components/menu.html +++ b/examples/components/menu.html @@ -20,17 +20,17 @@