diff options
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r-- | src/objects/_button.scss | 26 |
1 files changed, 13 insertions, 13 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 9d5a8a1..1809ba6 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -2,7 +2,7 @@ | |||
2 | @use 'sass:map'; | 2 | @use 'sass:map'; |
3 | @use 'sass:meta'; | 3 | @use 'sass:meta'; |
4 | @use 'sass:string'; | 4 | @use 'sass:string'; |
5 | @use 'iro-sass/src/iro-sass' as iro; | 5 | @use 'iro-sass/src/bem' as bem; |
6 | @use 'iro-sass/src/props'; | 6 | @use 'iro-sass/src/props'; |
7 | @use '../props' as *; | 7 | @use '../props' as *; |
8 | @use '../core.vars' as core; | 8 | @use '../core.vars' as core; |
@@ -19,7 +19,7 @@ | |||
19 | border-color: transparent; | 19 | border-color: transparent; |
20 | } | 20 | } |
21 | 21 | ||
22 | @include iro.bem-modifier('outline') { | 22 | @include bem.modifier('outline') { |
23 | &:link, | 23 | &:link, |
24 | &:visited, | 24 | &:visited, |
25 | &:enabled { | 25 | &:enabled { |
@@ -62,14 +62,14 @@ | |||
62 | props.get($theme, list.join($key, --key-focus --outline)...); | 62 | props.get($theme, list.join($key, --key-focus --outline)...); |
63 | } | 63 | } |
64 | 64 | ||
65 | @include iro.bem-modifier('outline') { | 65 | @include bem.modifier('outline') { |
66 | background-color: transparent; | 66 | background-color: transparent; |
67 | border-color: props.get($theme, list.join($key, --disabled --outline-border)...); | 67 | border-color: props.get($theme, list.join($key, --disabled --outline-border)...); |
68 | } | 68 | } |
69 | 69 | ||
70 | @include -apply-theme($theme, $key); | 70 | @include -apply-theme($theme, $key); |
71 | 71 | ||
72 | @include iro.bem-modifier('primary') { | 72 | @include bem.modifier('primary') { |
73 | @include -apply-theme($theme, list.join($key, --primary)); | 73 | @include -apply-theme($theme, list.join($key, --primary)); |
74 | } | 74 | } |
75 | } | 75 | } |
@@ -77,7 +77,7 @@ | |||
77 | @mixin styles { | 77 | @mixin styles { |
78 | @include materialize-at-root(meta.module-variables('vars')); | 78 | @include materialize-at-root(meta.module-variables('vars')); |
79 | 79 | ||
80 | @include iro.bem-object('button') { | 80 | @include bem.object('button') { |
81 | position: relative; | 81 | position: relative; |
82 | display: inline-block; | 82 | display: inline-block; |
83 | padding-block: props.get(vars.$pad-b); | 83 | padding-block: props.get(vars.$pad-b); |
@@ -111,25 +111,25 @@ | |||
111 | } | 111 | } |
112 | } | 112 | } |
113 | 113 | ||
114 | @include iro.bem-elem('label') { | 114 | @include bem.elem('label') { |
115 | margin-inline: props.get(vars.$pad-i-label); | 115 | margin-inline: props.get(vars.$pad-i-label); |
116 | } | 116 | } |
117 | 117 | ||
118 | @include iro.bem-modifier('block') { | 118 | @include bem.modifier('block') { |
119 | display: block; | 119 | display: block; |
120 | } | 120 | } |
121 | 121 | ||
122 | @include iro.bem-modifier('outline') { | 122 | @include bem.modifier('outline') { |
123 | background-color: transparent; | 123 | background-color: transparent; |
124 | } | 124 | } |
125 | 125 | ||
126 | @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { | 126 | @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { |
127 | @include iro.bem-modifier($mod) { | 127 | @include bem.modifier($mod) { |
128 | padding-block: props.get($pad-b); | 128 | padding-block: props.get($pad-b); |
129 | padding-inline: props.get($pad-i); | 129 | padding-inline: props.get($pad-i); |
130 | font-size: props.get($font-size); | 130 | font-size: props.get($font-size); |
131 | 131 | ||
132 | @include iro.bem-elem('label') { | 132 | @include bem.elem('label') { |
133 | margin-inline: props.get($pad-i-label); | 133 | margin-inline: props.get($pad-i-label); |
134 | } | 134 | } |
135 | } | 135 | } |
@@ -138,18 +138,18 @@ | |||
138 | @include -apply-static-theme(vars.$default-theme); | 138 | @include -apply-static-theme(vars.$default-theme); |
139 | 139 | ||
140 | @each $theme in map.keys(props.get(vars.$themes)) { | 140 | @each $theme in map.keys(props.get(vars.$themes)) { |
141 | @include iro.bem-modifier(string.slice($theme, 3)) { | 141 | @include bem.modifier(string.slice($theme, 3)) { |
142 | @include -apply-theme(vars.$themes, $theme); | 142 | @include -apply-theme(vars.$themes, $theme); |
143 | } | 143 | } |
144 | } | 144 | } |
145 | 145 | ||
146 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 146 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
147 | @include iro.bem-modifier(string.slice($theme, 3)) { | 147 | @include bem.modifier(string.slice($theme, 3)) { |
148 | @include -apply-static-theme(vars.$static-themes, $theme); | 148 | @include -apply-static-theme(vars.$static-themes, $theme); |
149 | } | 149 | } |
150 | } | 150 | } |
151 | 151 | ||
152 | @include iro.bem-modifier('round') { | 152 | @include bem.modifier('round') { |
153 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); | 153 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); |
154 | padding-inline: 0; | 154 | padding-inline: 0; |
155 | border-radius: 100em; | 155 | border-radius: 100em; |