diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_action-button.scss | 83 | ||||
-rw-r--r-- | src/objects/_button.scss | 80 |
2 files changed, 60 insertions, 103 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 | } |