diff options
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r-- | src/objects/_button.scss | 22 |
1 files changed, 11 insertions, 11 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 854e1e3..e4a656c 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -22,9 +22,9 @@ | |||
22 | &:link, | 22 | &:link, |
23 | &:visited, | 23 | &:visited, |
24 | &:enabled { | 24 | &:enabled { |
25 | color: props.get($theme, list.join($key, --outline-label)); | 25 | color: props.get($theme, list.join($key, --outline-label)...); |
26 | background-color: transparent; | 26 | background-color: transparent; |
27 | border-color: props.get($theme, list.join($key, --outline-border)); | 27 | border-color: props.get($theme, list.join($key, --outline-border)...); |
28 | } | 28 | } |
29 | } | 29 | } |
30 | 30 | ||
@@ -33,37 +33,37 @@ | |||
33 | &:enabled { | 33 | &:enabled { |
34 | &:hover, | 34 | &:hover, |
35 | &:focus-visible { | 35 | &:focus-visible { |
36 | color: props.get($theme, list.join($key, --hover --label)); | 36 | color: props.get($theme, list.join($key, --hover --label)...); |
37 | background-color: props.get($theme, list.join($key, --hover --bg)); | 37 | background-color: props.get($theme, list.join($key, --hover --bg)...); |
38 | border-color: transparent; | 38 | border-color: transparent; |
39 | } | 39 | } |
40 | 40 | ||
41 | &:active { | 41 | &:active { |
42 | color: props.get($theme, list.join($key, --active --label)); | 42 | color: props.get($theme, list.join($key, --active --label)...); |
43 | background-color: props.get($theme, list.join($key, --active --bg)); | 43 | background-color: props.get($theme, list.join($key, --active --bg)...); |
44 | border-color: transparent; | 44 | border-color: transparent; |
45 | } | 45 | } |
46 | } | 46 | } |
47 | } | 47 | } |
48 | 48 | ||
49 | @mixin -apply-static-theme($theme, $key: ()) { | 49 | @mixin -apply-static-theme($theme, $key: ()) { |
50 | color: props.get($theme, list.join($key, --disabled --label)); | 50 | color: props.get($theme, list.join($key, --disabled --label)...); |
51 | background-color: props.get($theme, list.join($key, --disabled --bg)); | 51 | background-color: props.get($theme, list.join($key, --disabled --bg)...); |
52 | border-color: transparent; | 52 | border-color: transparent; |
53 | 53 | ||
54 | &::after { | 54 | &::after { |
55 | outline: props.get($theme, list.join($key, --key-focus --border)) solid props.get(vars.$key-focus--border-width); | 55 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); |
56 | box-shadow: | 56 | box-shadow: |
57 | 0 | 57 | 0 |
58 | 0 | 58 | 0 |
59 | 0 | 59 | 0 |
60 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 60 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
61 | props.get($theme, list.join($key, --key-focus --outline)); | 61 | props.get($theme, list.join($key, --key-focus --outline)...); |
62 | } | 62 | } |
63 | 63 | ||
64 | @include iro.bem-modifier('outline') { | 64 | @include iro.bem-modifier('outline') { |
65 | background-color: transparent; | 65 | background-color: transparent; |
66 | border-color: props.get($theme, list.join($key, --disabled --outline-border)); | 66 | border-color: props.get($theme, list.join($key, --disabled --outline-border)...); |
67 | } | 67 | } |
68 | 68 | ||
69 | @include -apply-theme($theme, $key); | 69 | @include -apply-theme($theme, $key); |