diff options
author | Volpeon <git@volpeon.ink> | 2025-07-27 13:21:57 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2025-07-27 13:21:57 +0200 |
commit | 3c59a39f5b6eb15b368bea1ad74e3222858c35ef (patch) | |
tree | 8cec0e01a56d7c7388d4a2e990c9b4a866705df1 /src/objects/_button.scss | |
parent | Add option for explicit dark theme (diff) | |
download | iro-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.scss | 29 |
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)...); |