diff options
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r-- | src/objects/_button.scss | 80 |
1 files changed, 33 insertions, 47 deletions
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 | } |