diff options
-rw-r--r-- | src/objects/_badge.scss | 17 | ||||
-rw-r--r-- | tpl/views/badge.pug | 4 |
2 files changed, 19 insertions, 2 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss index c359abc..7258cc0 100644 --- a/src/objects/_badge.scss +++ b/src/objects/_badge.scss | |||
@@ -32,6 +32,17 @@ | |||
32 | --shadow: fn.global-color(--focus --shadow), | 32 | --shadow: fn.global-color(--focus --shadow), |
33 | ), | 33 | ), |
34 | 34 | ||
35 | --primary: ( | ||
36 | --bg: fn.global-color(--fg-lo), | ||
37 | --label: fn.global-color(--bg), | ||
38 | --hover: ( | ||
39 | --bg: fn.global-color(--fg), | ||
40 | ), | ||
41 | --active: ( | ||
42 | --bg: fn.global-color(--fg), | ||
43 | ), | ||
44 | ), | ||
45 | |||
35 | --accent: ( | 46 | --accent: ( |
36 | --bg: fn.global-color(--accent --primary --solid --bg), | 47 | --bg: fn.global-color(--accent --primary --solid --bg), |
37 | --label: fn.global-color(--accent --primary --solid --fg), | 48 | --label: fn.global-color(--accent --primary --solid --fg), |
@@ -77,7 +88,7 @@ | |||
77 | } | 88 | } |
78 | } | 89 | } |
79 | 90 | ||
80 | @each $variant in 'accent' 'accent-quiet' { | 91 | @each $variant in 'primary' 'accent' 'accent-quiet' { |
81 | @include iro.bem-modifier($variant) { | 92 | @include iro.bem-modifier($variant) { |
82 | background-color: fn.color(--#{$variant} --bg); | 93 | background-color: fn.color(--#{$variant} --bg); |
83 | color: fn.color(--#{$variant} --label); | 94 | color: fn.color(--#{$variant} --label); |
@@ -101,7 +112,9 @@ | |||
101 | &:enabled { | 112 | &:enabled { |
102 | @include iro.bem-at-theme('keyboard') { | 113 | @include iro.bem-at-theme('keyboard') { |
103 | &:focus { | 114 | &:focus { |
104 | box-shadow: inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | 115 | background-color: transparent; |
116 | box-shadow: inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | ||
117 | color: currentColor; | ||
105 | } | 118 | } |
106 | } | 119 | } |
107 | } | 120 | } |
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug index e81a723..9979049 100644 --- a/tpl/views/badge.pug +++ b/tpl/views/badge.pug | |||
@@ -3,12 +3,16 @@ mixin view-badge | |||
3 | .c-box | 3 | .c-box |
4 | +badge= '100' | 4 | +badge= '100' |
5 | = ' ' | 5 | = ' ' |
6 | +badge('primary')= 'new' | ||
7 | = ' ' | ||
6 | +badge('accent')= 'new' | 8 | +badge('accent')= 'new' |
7 | = ' ' | 9 | = ' ' |
8 | +badge('accent-quiet')= 'new' | 10 | +badge('accent-quiet')= 'new' |
9 | = ' ' | 11 | = ' ' |
10 | +badge(size=200)= '100' | 12 | +badge(size=200)= '100' |
11 | = ' ' | 13 | = ' ' |
14 | +badge('primary')(size=200)= 'new' | ||
15 | = ' ' | ||
12 | +badge('accent')(size=200)= 'new' | 16 | +badge('accent')(size=200)= 'new' |
13 | = ' ' | 17 | = ' ' |
14 | +badge('accent-quiet')(size=200)= 'new' | 18 | +badge('accent-quiet')(size=200)= 'new' |