summaryrefslogtreecommitdiffstats
path: root/src/objects/_badge.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-10-16 20:42:06 +0200
committerVolpeon <git@volpeon.ink>2023-10-16 20:42:06 +0200
commit9d3bdbc9ddb29a3fb8aeddbab31411c2c3cd4454 (patch)
tree4655fa4618a9585d4e6b989a8db0e8923f1ec2a4 /src/objects/_badge.scss
parentUpdate (diff)
downloadiro-design-9d3bdbc9ddb29a3fb8aeddbab31411c2c3cd4454.tar.gz
iro-design-9d3bdbc9ddb29a3fb8aeddbab31411c2c3cd4454.tar.bz2
iro-design-9d3bdbc9ddb29a3fb8aeddbab31411c2c3cd4454.zip
Added primary badge
Diffstat (limited to 'src/objects/_badge.scss')
-rw-r--r--src/objects/_badge.scss17
1 files changed, 15 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 }