diff options
| author | Volpeon <git@volpeon.ink> | 2023-03-01 09:43:44 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2023-03-01 09:43:44 +0100 |
| commit | 015a5d5f009c270d82cd4a32f1faa64120a04723 (patch) | |
| tree | 722954da0c1367c550c1659abf1c371fd95f13bf | |
| parent | Badge (diff) | |
| download | iro-design-015a5d5f009c270d82cd4a32f1faa64120a04723.tar.gz iro-design-015a5d5f009c270d82cd4a32f1faa64120a04723.tar.bz2 iro-design-015a5d5f009c270d82cd4a32f1faa64120a04723.zip | |
Badge again
| -rw-r--r-- | src/objects/_badge.scss | 39 | ||||
| -rw-r--r-- | tpl/views/badge.pug | 4 |
2 files changed, 30 insertions, 13 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index fd0fdc7..4ecde17 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
| @@ -42,6 +42,17 @@ | |||
| 42 | --bg: fn.global-color(--accent --primary --solid --obj-lo), | 42 | --bg: fn.global-color(--accent --primary --solid --obj-lo), |
| 43 | ), | 43 | ), |
| 44 | ), | 44 | ), |
| 45 | |||
| 46 | --accent-quiet: ( | ||
| 47 | --bg: fn.global-color(--accent --primary --quiet --bg), | ||
| 48 | --label: fn.global-color(--accent --primary --quiet --fg), | ||
| 49 | --hover: ( | ||
| 50 | --bg: fn.global-color(--accent --primary --quiet --obj), | ||
| 51 | ), | ||
| 52 | --active: ( | ||
| 53 | --bg: fn.global-color(--accent --primary --quiet --obj-lo), | ||
| 54 | ), | ||
| 55 | ) | ||
| 45 | ), | 56 | ), |
| 46 | ), 'colors'); | 57 | ), 'colors'); |
| 47 | 58 | ||
| @@ -66,19 +77,21 @@ | |||
| 66 | } | 77 | } |
| 67 | } | 78 | } |
| 68 | 79 | ||
| 69 | @include iro.bem-modifier('accent') { | 80 | @each $variant in 'accent' 'accent-quiet' { |
| 70 | background-color: fn.color(--accent --bg); | 81 | @include iro.bem-modifier($variant) { |
| 71 | color: fn.color(--accent --label); | 82 | background-color: fn.color(--#{$variant} --bg); |
| 72 | 83 | color: fn.color(--#{$variant} --label); | |
| 73 | &:link, | 84 | |
| 74 | &:visited, | 85 | &:link, |
| 75 | &:enabled { | 86 | &:visited, |
| 76 | &:hover { | 87 | &:enabled { |
| 77 | background-color: fn.color(--accent --hover --bg); | 88 | &:hover { |
| 78 | } | 89 | background-color: fn.color(--#{$variant} --hover --bg); |
| 79 | 90 | } | |
| 80 | &:active { | 91 | |
| 81 | background-color: fn.color(--accent --active --bg); | 92 | &:active { |
| 93 | background-color: fn.color(--#{$variant} --active --bg); | ||
| 94 | } | ||
| 82 | } | 95 | } |
| 83 | } | 96 | } |
| 84 | } | 97 | } |
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index ce41f25..e81a723 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug | |||
| @@ -5,6 +5,10 @@ mixin view-badge | |||
| 5 | = ' ' | 5 | = ' ' |
| 6 | +badge('accent')= 'new' | 6 | +badge('accent')= 'new' |
| 7 | = ' ' | 7 | = ' ' |
| 8 | +badge('accent-quiet')= 'new' | ||
| 9 | = ' ' | ||
| 8 | +badge(size=200)= '100' | 10 | +badge(size=200)= '100' |
| 9 | = ' ' | 11 | = ' ' |
| 10 | +badge('accent')(size=200)= 'new' | 12 | +badge('accent')(size=200)= 'new' |
| 13 | = ' ' | ||
| 14 | +badge('accent-quiet')(size=200)= 'new' | ||