From e4b0878935e9307f1e4bc725731fb19acdb13ee0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 13 Oct 2020 11:27:33 -0300 Subject: [PATCH 1/6] Improvements on checkbox and radio --- scss/abstracts/icon/mixin-mask-icon.scss | 4 +-- scss/abstracts/icon/variables.scss | 2 ++ scss/components/checkbox/checkbox.scss | 44 +++++++++++++++--------- 3 files changed, 31 insertions(+), 19 deletions(-) diff --git a/scss/abstracts/icon/mixin-mask-icon.scss b/scss/abstracts/icon/mixin-mask-icon.scss index 62ba5b3f..2ef45590 100644 --- a/scss/abstracts/icon/mixin-mask-icon.scss +++ b/scss/abstracts/icon/mixin-mask-icon.scss @@ -1,4 +1,4 @@ -@mixin ch-mask-icon ($image, $option: 'complete') { +@mixin ch-mask-icon ($image, $option: 'complete', $backgroundColor: ch-get-color(text, 2)) { mask-image: url(#{$image}); -webkit-mask-image: url(#{$image}); @@ -7,6 +7,6 @@ -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; - background-color: #{ch-get-color(text, 2)}; + background-color: $backgroundColor; } } diff --git a/scss/abstracts/icon/variables.scss b/scss/abstracts/icon/variables.scss index b96c1147..cd02edf5 100644 --- a/scss/abstracts/icon/variables.scss +++ b/scss/abstracts/icon/variables.scss @@ -18,3 +18,5 @@ $ch-icon-angle-left: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov $ch-icon-nav-expand: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMS40LDIuMjIwNDQ2MDVlLTE2IEwxOC42LDIuMjIwNDQ2MDVlLTE2IEMxOS4zNzMxOTg2LDguMDAxMDMxN2UtMTcgMjAsMC42MjY4MDEzNSAyMCwxLjQgTDIwLDEzLjYgQzIwLDE0LjM3MzE5ODYgMTkuMzczMTk4NiwxNSAxOC42LDE1IEwxLjQsMTUgQzAuNjI2ODAxMzUsMTUgNS4zODc3ODczNWUtMTYsMTQuMzczMTk4NiA0LjQ0MDg5MjFlLTE2LDEzLjYgTDAsMS40IEMtOS40Njg5NTI1MmUtMTcsMC42MjY4MDEzNSAwLjYyNjgwMTM1LDEuNDIwMzQyODhlLTE2IDEuNCwyLjIyMDQ0NjA1ZS0xNiBaIE0xOC4zLDEgTDQsMSBMNCwxNCBMMTguMywxNCBDMTguNjg2NTk5MywxNCAxOSwxMy42ODY1OTkzIDE5LDEzLjMgTDE5LDEuNyBDMTksMS4zMTM0MDA2OCAxOC42ODY1OTkzLDEgMTguMywxIFogTTYuNzE4NzUsMTEuMzc1IEw2LjUsMTEuMTU2MjUgQzYuNDE2NjY2MjUsMTEuMDkzNzQ5NyA2LjM3NSwxMS4wMTA0MTcyIDYuMzc1LDEwLjkwNjI1IEM2LjM3NSwxMC44MDIwODI4IDYuNDE2NjY2MjUsMTAuNzA4MzMzNyA2LjUsMTAuNjI1IEw5LjEyNSw4LjAzMTI1IEw0LDguMDMxMjUgTDQsNi45Njg3NSBMOS4xMjUsNi45Njg3NSBMNi41LDQuMzc1IEM2LjQxNjY2NjI1LDQuMjkxNjY2MjUgNi4zNzUsNC4xOTc5MTcxOSA2LjM3NSw0LjA5Mzc1IEM2LjM3NSwzLjk4OTU4MjgxIDYuNDE2NjY2MjUsMy45MDYyNTAzMSA2LjUsMy44NDM3NSBMNi43MTg3NSwzLjYyNSBDNi44MDIwODM3NSwzLjU0MTY2NjI1IDYuODkwNjI0NTMsMy41IDYuOTg0Mzc1LDMuNSBDNy4wNzgxMjU0NywzLjUgNy4xNjY2NjYyNSwzLjU0MTY2NjI1IDcuMjUsMy42MjUgTDEwLjg3NSw3LjI1IEMxMC45NTgzMzM3LDcuMzEyNTAwMzEgMTEsNy4zOTU4MzI4MSAxMSw3LjUgQzExLDcuNjA0MTY3MTkgMTAuOTU4MzMzNyw3LjY4NzQ5OTY5IDEwLjg3NSw3Ljc1IEw3LjI1LDExLjM3NSBDNy4xNjY2NjYyNSwxMS40NTgzMzM3IDcuMDc4MTI1NDcsMTEuNSA2Ljk4NDM3NSwxMS41IEM2Ljg5MDYyNDUzLDExLjUgNi44MDIwODM3NSwxMS40NTgzMzM3IDYuNzE4NzUsMTEuMzc1IFoiPjwvcGF0aD48L3N2Zz4='; $ch-icon-nav-retract: 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMS40LDIuMjIwNDQ2MDVlLTE2IEwxOC42LDIuMjIwNDQ2MDVlLTE2IEMxOS4zNzMxOTg2LDguMDAxMDMxN2UtMTcgMjAsMC42MjY4MDEzNSAyMCwxLjQgTDIwLDEzLjYgQzIwLDE0LjM3MzE5ODYgMTkuMzczMTk4NiwxNSAxOC42LDE1IEwxLjQsMTUgQzAuNjI2ODAxMzUsMTUgNS4zODc3ODczNWUtMTYsMTQuMzczMTk4NiA0LjQ0MDg5MjFlLTE2LDEzLjYgTDAsMS40IEMtOS40Njg5NTI1MmUtMTcsMC42MjY4MDEzNSAwLjYyNjgwMTM1LDEuNDIwMzQyODhlLTE2IDEuNCwyLjIyMDQ0NjA1ZS0xNiBaIE0xOC4zLDEgTDksMSBMOSwxNCBMMTguMywxNCBDMTguNjg2NTk5MywxNCAxOSwxMy42ODY1OTkzIDE5LDEzLjMgTDE5LDEuNyBDMTksMS4zMTM0MDA2OCAxOC42ODY1OTkzLDEgMTguMywxIFogTTYuMjgxMjUsMTEuMzc1IEw2LjUsMTEuMTU2MjUgQzYuNTgzMzMzNzUsMTEuMDkzNzQ5NyA2LjYyNSwxMS4wMTA0MTcyIDYuNjI1LDEwLjkwNjI1IEM2LjYyNSwxMC44MDIwODI4IDYuNTgzMzMzNzUsMTAuNzA4MzMzNyA2LjUsMTAuNjI1IEwzLjg3NSw4LjAzMTI1IEw5LDguMDMxMjUgTDksNi45Njg3NSBMMy44NzUsNi45Njg3NSBMNi41LDQuMzc1IEM2LjU4MzMzMzc1LDQuMjkxNjY2MjUgNi42MjUsNC4xOTc5MTcxOSA2LjYyNSw0LjA5Mzc1IEM2LjYyNSwzLjk4OTU4MjgxIDYuNTgzMzMzNzUsMy45MDYyNTAzMSA2LjUsMy44NDM3NSBMNi4yODEyNSwzLjYyNSBDNi4xOTc5MTYyNSwzLjU0MTY2NjI1IDYuMTA5Mzc1NDcsMy41IDYuMDE1NjI1LDMuNSBDNS45MjE4NzQ1MywzLjUgNS44MzMzMzM3NSwzLjU0MTY2NjI1IDUuNzUsMy42MjUgTDIuMTI1LDcuMjUgQzIuMDQxNjY2MjUsNy4zMTI1MDAzMSAyLDcuMzk1ODMyODEgMiw3LjUgQzIsNy42MDQxNjcxOSAyLjA0MTY2NjI1LDcuNjg3NDk5NjkgMi4xMjUsNy43NSBMNS43NSwxMS4zNzUgQzUuODMzMzMzNzUsMTEuNDU4MzMzNyA1LjkyMTg3NDUzLDExLjUgNi4wMTU2MjUsMTEuNSBDNi4xMDkzNzU0NywxMS41IDYuMTk3OTE2MjUsMTEuNDU4MzMzNyA2LjI4MTI1LDExLjM3NSBaIj48L3BhdGg+PC9zdmc+'; + +$ch-icon-check: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDEzLjUwNSA5MS45NTFMMTMzLjQ5IDM3MS45NjZsLTk4Ljk5NS05OC45OTVjLTQuNjg2LTQuNjg2LTEyLjI4NC00LjY4Ni0xNi45NzEgMEw2LjIxMSAyODQuMjg0Yy00LjY4NiA0LjY4Ni00LjY4NiAxMi4yODQgMCAxNi45NzFsMTE4Ljc5NCAxMTguNzk0YzQuNjg2IDQuNjg2IDEyLjI4NCA0LjY4NiAxNi45NzEgMGwyOTkuODEzLTI5OS44MTNjNC42ODYtNC42ODYgNC42ODYtMTIuMjg0IDAtMTYuOTcxbC0xMS4zMTQtMTEuMzE0Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcgMHoiLz48L3N2Zz4= ' diff --git a/scss/components/checkbox/checkbox.scss b/scss/components/checkbox/checkbox.scss index 1415616d..2451aaf4 100644 --- a/scss/components/checkbox/checkbox.scss +++ b/scss/components/checkbox/checkbox.scss @@ -31,9 +31,7 @@ + label:before, + label:after { - $empty: ''; - - content: $empty; + content: ''; } // 2.1. Wrapper @@ -71,13 +69,34 @@ width: $size; height: $size; } - + } + + // 3. Checkbox + + @at-root .ch-checkbox > input[type="checkbox"] { &:checked + label:after { - background: #{ch-get-color(primary)}; + @include ch-mask-icon($ch-icon-check 'only-mask', $option: 'complete', $backgroundColor: ch-get-color(text, 1)); } } - // 3. Label + // 4. Radio + + @at-root .ch-radio > input[type="radio"] { + + label:before, + &:checked + label:after { + border-radius: ch-get-border-radius(circle); + } + + &:checked + label:before { + border-color: ch-get-color(primary, focus); + } + + &:checked + label:after { + background: ch-get-color(primary); + } + } + + // 5. Label > input[type="checkbox"] + label, > input[type="radio"] + label { @@ -92,7 +111,7 @@ } } - // 4. Disabled and readonly states + // 6. Disabled and readonly states > input { &:disabled, @@ -137,7 +156,7 @@ } } - // 5. Negative variation + // 7. Negative variation &--negative { color: #{ch-get-color(negative)}; @@ -163,13 +182,4 @@ } } } - - // 6. Radio - - @at-root .ch-radio > input[type="radio"] { - + label:before, - &:checked + label:after { - border-radius: ch-get-border-radius(circle); - } - } } From b096e98554363a63a0564f02107680ada555f7f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 13 Oct 2020 13:27:17 -0300 Subject: [PATCH 2/6] Small improvements on tag --- examples/components/tag.html | 14 ++++++++++++++ scss/components/tag/tag.scss | 34 ++++++++-------------------------- 2 files changed, 22 insertions(+), 26 deletions(-) diff --git a/examples/components/tag.html b/examples/components/tag.html index 164762b6..6da1e76b 100644 --- a/examples/components/tag.html +++ b/examples/components/tag.html @@ -50,6 +50,20 @@ tags + +

+ +
+ tags + + tags + + tags + + tags + + tags +
diff --git a/scss/components/tag/tag.scss b/scss/components/tag/tag.scss index 1f341804..83825857 100644 --- a/scss/components/tag/tag.scss +++ b/scss/components/tag/tag.scss @@ -5,6 +5,7 @@ @include ch-text-caption; @include ch-truncate; + @include ch-border-radius(circle); display: inline-block; position: relative; @@ -16,6 +17,7 @@ vertical-align: middle; padding-right: ch-get-space(s); padding-left: ch-get-space(s); + background-color: ch-get-color(neutral, 2); // 2. Close button @@ -47,24 +49,8 @@ } } - // 3. Background - - &, - &:after { - @include ch-border-radius(circle); - } - - &:after { - display: block; - position: absolute; - top: 0; - left: 0; - z-index: -1; - - content: ''; - width: 100%; - height: 100%; - background: #{ch-get-color(neutral, 2)}; + &.has-border { + box-shadow: 0 0 0px 1px currentColor; } // 4. Support variations @@ -72,12 +58,15 @@ @each $variation in (info, warning, positive, negative) { &--#{$variation} { color: ch-get-color($variation); + background-image: linear-gradient(90deg, rgba(#fff, 0.85), rgba(#fff, 0.85)); + background-color: ch-get-color($variation); + // 4.1. Close button > .ch-tag-close { background-color: ch-get-color($variation); - + &:hover:focus, &:hover, &:focus, @@ -85,13 +74,6 @@ background-color: ch-get-color($variation, focus); } } - - // 4.2. Background - - &:after { - opacity: 0.15; - background: #{ch-get-color($variation)}; - } } } } From 5bd8f4a9588a49d4fc9f18ef160371b5d1d2c1cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Mon, 26 Oct 2020 14:40:08 -0300 Subject: [PATCH 3/6] Improve checkbox colors --- scss/components/checkbox/checkbox.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/scss/components/checkbox/checkbox.scss b/scss/components/checkbox/checkbox.scss index 2451aaf4..6740a9b5 100644 --- a/scss/components/checkbox/checkbox.scss +++ b/scss/components/checkbox/checkbox.scss @@ -74,8 +74,17 @@ // 3. Checkbox @at-root .ch-checkbox > input[type="checkbox"] { + &:checked:not([readonly]) + label:before { + background-color: ch-get-color(primary); + border-color: ch-get-color(primary); + } + &:checked + label:after { - @include ch-mask-icon($ch-icon-check 'only-mask', $option: 'complete', $backgroundColor: ch-get-color(text, 1)); + @include ch-mask-icon($ch-icon-check 'only-mask', $option: 'complete', $backgroundColor: ch-get-color(neutral, 1)); + } + + &[readonly] + label:after { + background-color: ch-get-color(text, 1); } } From a2ca1e20c4900c1b9ae1cff9533330d8250cb90a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Mon, 26 Oct 2020 14:53:10 -0300 Subject: [PATCH 4/6] Improve warning tag --- scss/components/tag/tag.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/scss/components/tag/tag.scss b/scss/components/tag/tag.scss index 83825857..fa6dc925 100644 --- a/scss/components/tag/tag.scss +++ b/scss/components/tag/tag.scss @@ -57,21 +57,20 @@ @each $variation in (info, warning, positive, negative) { &--#{$variation} { - color: ch-get-color($variation); + color: if($variation != 'warning', ch-get-color($variation), ch-get-color($variation, focus)); background-image: linear-gradient(90deg, rgba(#fff, 0.85), rgba(#fff, 0.85)); background-color: ch-get-color($variation); - // 4.1. Close button > .ch-tag-close { - background-color: ch-get-color($variation); + background-color: if($variation != 'warning', ch-get-color($variation), ch-get-color($variation, focus)); &:hover:focus, &:hover, &:focus, &:active { - background-color: ch-get-color($variation, focus); + background-color: if($variation != 'warning', ch-get-color($variation, focus), ch-get-color($variation, active)); } } } From 87798d0df1414f60d1304124e6272090a870061e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 27 Oct 2020 11:43:29 -0300 Subject: [PATCH 5/6] Change tag default to have border --- examples/components/tag.html | 10 +++++----- scss/components/tag/tag.scss | 5 +++-- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/examples/components/tag.html b/examples/components/tag.html index 6da1e76b..b6d2a59a 100644 --- a/examples/components/tag.html +++ b/examples/components/tag.html @@ -54,15 +54,15 @@

- tags + tags - tags + tags - tags + tags - tags + tags - tags + tags
diff --git a/scss/components/tag/tag.scss b/scss/components/tag/tag.scss index fa6dc925..04bab5e1 100644 --- a/scss/components/tag/tag.scss +++ b/scss/components/tag/tag.scss @@ -18,6 +18,7 @@ padding-right: ch-get-space(s); padding-left: ch-get-space(s); background-color: ch-get-color(neutral, 2); + box-shadow: 0 0 0px 1px currentColor; // 2. Close button @@ -49,8 +50,8 @@ } } - &.has-border { - box-shadow: 0 0 0px 1px currentColor; + &.is-borderless { + box-shadow: none; } // 4. Support variations From 3fd4f5f3eadc13955b26fd9393101c6699bfb012 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thiago=20Thim=C3=B3teo?= Date: Tue, 27 Oct 2020 11:55:22 -0300 Subject: [PATCH 6/6] Improvements on table --- scss/components/table/table.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/scss/components/table/table.scss b/scss/components/table/table.scss index 99dc672c..0a10bf03 100644 --- a/scss/components/table/table.scss +++ b/scss/components/table/table.scss @@ -11,6 +11,7 @@ &-header, thead { display: table-header-group; + background-color: ch-get-color(neutral, 2); } // 3. Content @@ -81,6 +82,11 @@ vertical-align: middle; } + th { + @include ch-space-inset(default, s); + font-weight: ch-get-text-weight(semibold); + } + // 5.1. Leading, actions and compact variation .ch-table-cell--leading,