diff --git a/examples/components/tag.html b/examples/components/tag.html index 164762b6..b6d2a59a 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/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..6740a9b5 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,43 @@ width: $size; height: $size; } - + } + + // 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 { - background: #{ch-get-color(primary)}; + @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); } } - // 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 +120,7 @@ } } - // 4. Disabled and readonly states + // 6. Disabled and readonly states > input { &:disabled, @@ -137,7 +165,7 @@ } } - // 5. Negative variation + // 7. Negative variation &--negative { color: #{ch-get-color(negative)}; @@ -163,13 +191,4 @@ } } } - - // 6. Radio - - @at-root .ch-radio > input[type="radio"] { - + label:before, - &:checked + label:after { - border-radius: ch-get-border-radius(circle); - } - } } 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, diff --git a/scss/components/tag/tag.scss b/scss/components/tag/tag.scss index 1f341804..04bab5e1 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,8 @@ vertical-align: middle; 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 @@ -47,51 +50,30 @@ } } - // 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)}; + &.is-borderless { + box-shadow: none; } // 4. Support variations @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)); } } - - // 4.2. Background - - &:after { - opacity: 0.15; - background: #{ch-get-color($variation)}; - } } } }