summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-27 13:21:57 +0200
committerVolpeon <git@volpeon.ink>2025-07-27 13:21:57 +0200
commit3c59a39f5b6eb15b368bea1ad74e3222858c35ef (patch)
tree8cec0e01a56d7c7388d4a2e990c9b4a866705df1 /src/objects/_button.scss
parentAdd option for explicit dark theme (diff)
downloadiro-design-3c59a39f5b6eb15b368bea1ad74e3222858c35ef.tar.gz
iro-design-3c59a39f5b6eb15b368bea1ad74e3222858c35ef.tar.bz2
iro-design-3c59a39f5b6eb15b368bea1ad74e3222858c35ef.zip
Add highlighted state to button
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss29
1 files changed, 29 insertions, 0 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 8fbec78..c4ecd87 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -109,6 +109,35 @@
109 } 109 }
110 } 110 }
111 111
112 @include bem.is('highlighted') {
113 &:link,
114 &:visited,
115 &:enabled {
116 &,
117 &:hover,
118 &:focus-visible {
119 border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
120 }
121
122 box-shadow:
123 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
124 props.get(vars.$shadow-x)
125 props.get(vars.$shadow-y)
126 props.get(vars.$shadow-blur)
127 props.get(vars.$shadow-grow)
128 props.get($theme, list.join($key, --highlighted --shadow-color)...);
129
130 &:focus-visible {
131 box-shadow:
132 props.get(vars.$shadow-x)
133 props.get(vars.$shadow-y)
134 props.get(vars.$shadow-blur)
135 props.get(vars.$shadow-grow)
136 props.get($theme, list.join($key, --shadow-color)...);
137 }
138 }
139 }
140
112 @include bem.is('selected') { 141 @include bem.is('selected') {
113 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 142 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 143 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);