summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss26
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;