summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/objects/_action-button.scss83
-rw-r--r--src/objects/_button.scss80
-rw-r--r--tpl/objects/action-button.pug1
-rw-r--r--tpl/objects/button.pug3
4 files changed, 61 insertions, 106 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 08ac625..ab9e38b 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -95,11 +95,11 @@
95 display: inline-block; 95 display: inline-block;
96 padding: fn.dim(--pad-y) fn.dim(--pad-x); 96 padding: fn.dim(--pad-y) fn.dim(--pad-x);
97 overflow: hidden; 97 overflow: hidden;
98 border: 1px solid fn.color(--border); 98 border: 1px solid fn.color(--disabled --border);
99 border-radius: fn.dim(--rounding); 99 border-radius: fn.dim(--rounding);
100 background-color: fn.color(--bg); 100 background-color: fn.color(--disabled --bg);
101 box-shadow: fn.color(--shadow); 101 box-shadow: fn.color(--disabled --shadow);
102 color: fn.color(--label); 102 color: fn.color(--disabled --label);
103 line-height: 1; 103 line-height: 1;
104 text-align: center; 104 text-align: center;
105 text-decoration: none; 105 text-decoration: none;
@@ -109,6 +109,11 @@
109 &:link, 109 &:link,
110 &:visited, 110 &:visited,
111 &:enabled { 111 &:enabled {
112 border-color: fn.color(--border);
113 background-color: fn.color(--bg);
114 box-shadow: fn.color(--shadow);
115 color: fn.color(--label);
116
112 &:hover { 117 &:hover {
113 border-color: fn.color(--hover --border); 118 border-color: fn.color(--hover --border);
114 background-color: fn.color(--hover --bg); 119 background-color: fn.color(--hover --bg);
@@ -134,14 +139,14 @@
134 } 139 }
135 140
136 @include iro.bem-is('selected') { 141 @include iro.bem-is('selected') {
137 border-color: fn.color(--selected --border);
138 background-color: fn.color(--selected --bg);
139 box-shadow: fn.color(--selected --shadow);
140 color: fn.color(--selected --label);
141
142 &:link, 142 &:link,
143 &:visited, 143 &:visited,
144 &:enabled { 144 &:enabled {
145 border-color: fn.color(--selected --border);
146 background-color: fn.color(--selected --bg);
147 box-shadow: fn.color(--selected --shadow);
148 color: fn.color(--selected --label);
149
145 &:hover, 150 &:hover,
146 &:active { 151 &:active {
147 border-color: fn.color(--selected --hover --border); 152 border-color: fn.color(--selected --hover --border);
@@ -165,11 +170,16 @@
165 border-color: transparent; 170 border-color: transparent;
166 background-color: transparent; 171 background-color: transparent;
167 box-shadow: none; 172 box-shadow: none;
168 color: fn.color(--quiet --label); 173 color: fn.color(--quiet --disabled --label);
169 174
170 &:link, 175 &:link,
171 &:visited, 176 &:visited,
172 &:enabled { 177 &:enabled {
178 border-color: transparent;
179 background-color: transparent;
180 box-shadow: none;
181 color: fn.color(--quiet --label);
182
173 &:hover { 183 &:hover {
174 border-color: transparent; 184 border-color: transparent;
175 background-color: fn.color(--quiet --hover --bg); 185 background-color: fn.color(--quiet --hover --bg);
@@ -195,14 +205,17 @@
195 } 205 }
196 206
197 @include iro.bem-is('selected') { 207 @include iro.bem-is('selected') {
198 border-color: transparent;
199 background-color: fn.color(--quiet --selected --bg); 208 background-color: fn.color(--quiet --selected --bg);
200 box-shadow: none; 209 color: fn.color(--quiet --disabled --label);
201 color: fn.color(--quiet --selected --label); 210
202
203 &:link, 211 &:link,
204 &:visited, 212 &:visited,
205 &:enabled { 213 &:enabled {
214 border-color: transparent;
215 background-color: fn.color(--quiet --selected --bg);
216 box-shadow: none;
217 color: fn.color(--quiet --selected --label);
218
206 &:hover, 219 &:hover,
207 &:active { 220 &:active {
208 border-color: transparent; 221 border-color: transparent;
@@ -228,47 +241,5 @@
228 padding-left: fn.dim(--pad-y); 241 padding-left: fn.dim(--pad-y);
229 border-radius: 100em; 242 border-radius: 100em;
230 } 243 }
231
232 @include iro.bem-is('disabled') {
233 border-color: fn.color(--disabled --border);
234 background-color: fn.color(--disabled --bg);
235 box-shadow: fn.color(--disabled --shadow);
236 color: fn.color(--disabled --label);
237
238 &:link,
239 &:visited,
240 &:enabled {
241 &:hover,
242 &:active {
243 border-color: fn.color(--disabled --border);
244 background-color: fn.color(--disabled --bg);
245 box-shadow: fn.color(--disabled --shadow);
246 color: fn.color(--disabled --label);
247 }
248 }
249
250 @include iro.bem-modifier('quiet') {
251 border-color: transparent;
252 background-color: transparent;
253 box-shadow: none;
254 color: fn.color(--quiet --disabled --label);
255
256 &:link,
257 &:visited,
258 &:enabled {
259 &:hover,
260 &:active {
261 border-color: transparent;
262 background-color: transparent;
263 box-shadow: none;
264 color: fn.color(--quiet --disabled --label);
265 }
266 }
267
268 @include iro.bem-is('selected') {
269 background-color: fn.color(--quiet --selected --bg);
270 }
271 }
272 }
273 } 244 }
274} 245}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index f93f342..15804f1 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,10 +2,24 @@
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4@mixin button-variant($variant) { 4@mixin button-variant($variant) {
5 border-color: fn.color(--#{$variant} --bg); 5 &:link,
6 background-color: fn.color(--#{$variant} --bg); 6 &:visited,
7 box-shadow: fn.color(--#{$variant} --shadow); 7 &:enabled {
8 color: fn.color(--#{$variant} --label); 8 border-color: fn.color(--#{$variant} --bg);
9 background-color: fn.color(--#{$variant} --bg);
10 box-shadow: fn.color(--#{$variant} --shadow);
11 color: fn.color(--#{$variant} --label);
12 }
13
14 @include iro.bem-modifier('outline') {
15 &:link,
16 &:visited,
17 &:enabled {
18 background-color: transparent;
19 box-shadow: none;
20 color: fn.color(--#{$variant} --outline-label);
21 }
22 }
9 23
10 &:link, 24 &:link,
11 &:visited, 25 &:visited,
@@ -24,12 +38,6 @@
24 color: fn.color(--#{$variant} --active --label); 38 color: fn.color(--#{$variant} --active --label);
25 } 39 }
26 } 40 }
27
28 @include iro.bem-modifier('outline') {
29 background-color: transparent;
30 box-shadow: none;
31 color: fn.color(--#{$variant} --outline-label);
32 }
33} 41}
34 42
35@include iro.props-namespace('button') { 43@include iro.props-namespace('button') {
@@ -111,24 +119,26 @@
111 ), 'colors'); 119 ), 'colors');
112 120
113 @include iro.bem-object(iro.props-namespace()) { 121 @include iro.bem-object(iro.props-namespace()) {
114 display: inline-block; 122 display: inline-block;
115 padding: fn.dim(--pad-y) fn.dim(--pad-x); 123 padding: fn.dim(--pad-y) fn.dim(--pad-x);
116 border: 2px solid transparent; 124 border: 2px solid transparent;
117 border-radius: fn.dim(--rounding); 125 border-radius: fn.dim(--rounding);
118 font-weight: 500; 126 border-color: fn.color(--any --disabled --bg);
119 line-height: 1; 127 background-color: fn.color(--any --disabled --bg);
120 text-align: center; 128 box-shadow: fn.color(--any --disabled --shadow);
121 text-decoration: none; 129 color: fn.color(--any --disabled --label);
130 font-weight: 500;
131 line-height: 1;
132 text-align: center;
133 text-decoration: none;
122 134
123 @include iro.bem-modifier('block') { 135 @include iro.bem-modifier('block') {
124 display: block; 136 display: block;
125 } 137 }
126 138
127 @include iro.bem-modifier('native') { 139 @include iro.bem-modifier('outline') {
128 @include iro.bem-modifier('block') { 140 background-color: transparent;
129 box-sizing: border-box; 141 box-shadow: none;
130 width: 100%;
131 }
132 } 142 }
133 143
134 @include button-variant('secondary'); 144 @include button-variant('secondary');
@@ -147,29 +157,5 @@
147 color: fn.color(--any --key-focus --label); 157 color: fn.color(--any --key-focus --label);
148 } 158 }
149 } 159 }
150
151 @include iro.bem-is('disabled') {
152 border-color: fn.color(--any --disabled --bg);
153 background-color: fn.color(--any --disabled --bg);
154 box-shadow: fn.color(--any --disabled --shadow);
155 color: fn.color(--any --disabled --label);
156
157 &:link,
158 &:visited,
159 &:enabled {
160 &:hover,
161 &:active {
162 border-color: fn.color(--any --disabled --bg);
163 background-color: fn.color(--any --disabled --bg);
164 box-shadow: fn.color(--any --disabled --shadow);
165 color: fn.color(--any --disabled --label);
166 }
167 }
168
169 @include iro.bem-modifier('outline') {
170 background-color: transparent;
171 box-shadow: none;
172 }
173 }
174 } 160 }
175} 161}
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index a695bee..d752fa6 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -7,7 +7,6 @@ mixin action-button
7 'o-action-button--block': attributes.block, 7 'o-action-button--block': attributes.block,
8 'o-action-button--quiet': attributes.quiet, 8 'o-action-button--quiet': attributes.quiet,
9 'o-action-button--round': attributes.round, 9 'o-action-button--round': attributes.round,
10 'is-disabled': attributes.disabled,
11 'is-selected': attributes.selected 10 'is-selected': attributes.selected
12 } 11 }
13 if (attributes.class) { 12 if (attributes.class) {
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 3b10ea0..8cae2f1 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -3,8 +3,7 @@ mixin a-button
3 let classes = { 3 let classes = {
4 'o-button': true, 4 'o-button': true,
5 'o-button--block': attributes.block, 5 'o-button--block': attributes.block,
6 'o-button--outline': attributes.outline, 6 'o-button--outline': attributes.outline
7 'is-disabled': attributes.disabled
8 } 7 }
9 if (attributes.variant) { 8 if (attributes.variant) {
10 classes['o-button--' + attributes.variant] = true 9 classes['o-button--' + attributes.variant] = true
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 11:33:22 +0000