diff options
Diffstat (limited to 'src/objects')
53 files changed, 2969 insertions, 3065 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss deleted file mode 100644 index 1dd4b84..0000000 --- a/src/objects/_action-button.scss +++ /dev/null | |||
@@ -1,213 +0,0 @@ | |||
1 | @use 'sass:list'; | ||
2 | @use 'sass:map'; | ||
3 | @use 'sass:meta'; | ||
4 | @use 'sass:string'; | ||
5 | @use 'iro-sass/src/bem'; | ||
6 | @use 'iro-sass/src/props'; | ||
7 | @use '../props' as *; | ||
8 | |||
9 | @forward 'action-button.vars'; | ||
10 | @use 'action-button.vars' as vars; | ||
11 | |||
12 | @mixin -apply-theme($theme, $key: ()) { | ||
13 | color: props.get($theme, list.join($key, --disabled --label-color)...); | ||
14 | background-color: props.get($theme, list.join($key, --disabled --bg-color)...); | ||
15 | border-color: props.get($theme, list.join($key, --disabled --border-color)...); | ||
16 | |||
17 | &::after { | ||
18 | outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); | ||
19 | box-shadow: | ||
20 | 0 | ||
21 | 0 | ||
22 | 0 | ||
23 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
24 | props.get($theme, list.join($key, --key-focus --outline-color)...); | ||
25 | } | ||
26 | |||
27 | &:link, | ||
28 | &:visited, | ||
29 | &:enabled { | ||
30 | color: props.get($theme, list.join($key, --label-color)...); | ||
31 | background-color: props.get($theme, list.join($key, --bg-color)...); | ||
32 | border-color: props.get($theme, list.join($key, --border-color)...); | ||
33 | |||
34 | &:hover, | ||
35 | &:focus-visible { | ||
36 | color: props.get($theme, list.join($key, --hover --label-color)...); | ||
37 | background-color: props.get($theme, list.join($key, --hover --bg-color)...); | ||
38 | border-color: props.get($theme, list.join($key, --hover --border-color)...); | ||
39 | } | ||
40 | |||
41 | &:active { | ||
42 | color: props.get($theme, list.join($key, --active --label-color)...); | ||
43 | background-color: props.get($theme, list.join($key, --active --bg-color)...); | ||
44 | border-color: props.get($theme, list.join($key, --active --border-color)...); | ||
45 | } | ||
46 | } | ||
47 | |||
48 | @include bem.modifier('quiet') { | ||
49 | color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); | ||
50 | background-color: transparent; | ||
51 | border-color: transparent; | ||
52 | |||
53 | &:link, | ||
54 | &:visited, | ||
55 | &:enabled { | ||
56 | color: props.get($theme, list.join($key, --quiet --label-color)...); | ||
57 | background-color: transparent; | ||
58 | border-color: transparent; | ||
59 | |||
60 | &:hover, | ||
61 | &:focus-visible { | ||
62 | color: props.get($theme, list.join($key, --quiet --hover --label-color)...); | ||
63 | background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); | ||
64 | border-color: transparent; | ||
65 | } | ||
66 | |||
67 | &:active { | ||
68 | color: props.get($theme, list.join($key, --quiet --active --label-color)...); | ||
69 | background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); | ||
70 | border-color: transparent; | ||
71 | } | ||
72 | } | ||
73 | } | ||
74 | |||
75 | @include bem.is('selected') { | ||
76 | color: props.get($theme, list.join($key, --selected --disabled --label-color)...); | ||
77 | background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); | ||
78 | border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); | ||
79 | |||
80 | &:link, | ||
81 | &:visited, | ||
82 | &:enabled { | ||
83 | color: props.get($theme, list.join($key, --selected --label-color)...); | ||
84 | background-color: props.get($theme, list.join($key, --selected --bg-color)...); | ||
85 | border-color: props.get($theme, list.join($key, --selected --border-color)...); | ||
86 | |||
87 | &:hover, | ||
88 | &:focus-visible { | ||
89 | color: props.get($theme, list.join($key, --selected --hover --label-color)...); | ||
90 | background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); | ||
91 | border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); | ||
92 | } | ||
93 | |||
94 | &:active { | ||
95 | color: props.get($theme, list.join($key, --selected --active --label-color)...); | ||
96 | background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); | ||
97 | border-color: props.get($theme, list.join($key, --selected --active --border-color)...); | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | } | ||
102 | |||
103 | @mixin styles { | ||
104 | @include materialize-at-root(meta.module-variables('vars')); | ||
105 | |||
106 | @include bem.object('action-button') { | ||
107 | position: relative; | ||
108 | display: inline-block; | ||
109 | padding-block: props.get(vars.$pad-b); | ||
110 | padding-inline: props.get(vars.$pad-i); | ||
111 | line-height: props.get(vars.$line-height); | ||
112 | text-align: center; | ||
113 | text-decoration: none; | ||
114 | text-overflow: ellipsis; | ||
115 | white-space: nowrap; | ||
116 | border: props.get(vars.$border-width) solid transparent; | ||
117 | border-radius: props.get(vars.$rounding); | ||
118 | |||
119 | &::after { | ||
120 | position: absolute; | ||
121 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); | ||
122 | z-index: 1; | ||
123 | display: none; | ||
124 | pointer-events: none; | ||
125 | content: ''; | ||
126 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
127 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
128 | } | ||
129 | |||
130 | &:link, | ||
131 | &:visited, | ||
132 | &:enabled { | ||
133 | &:focus-visible { | ||
134 | &::after { | ||
135 | display: block; | ||
136 | } | ||
137 | } | ||
138 | } | ||
139 | |||
140 | @include bem.elem('label') { | ||
141 | margin-inline: props.get(vars.$pad-i-label); | ||
142 | } | ||
143 | |||
144 | @include -apply-theme(vars.$default-theme); | ||
145 | |||
146 | @each $theme in map.keys(props.get(vars.$themes)) { | ||
147 | @include bem.modifier(string.slice($theme, 3)) { | ||
148 | @include -apply-theme(vars.$themes, $theme); | ||
149 | } | ||
150 | } | ||
151 | |||
152 | @include bem.modifier('pill') { | ||
153 | padding-inline: props.get(vars.$pad-i-pill); | ||
154 | border-radius: 100em; | ||
155 | |||
156 | &::after { | ||
157 | border-radius: 100em; | ||
158 | } | ||
159 | } | ||
160 | |||
161 | @include bem.modifier('icon') { | ||
162 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); | ||
163 | padding-inline: 0; | ||
164 | } | ||
165 | |||
166 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
167 | @include bem.modifier($mod) { | ||
168 | padding-block: props.get($pad-b); | ||
169 | padding-inline: props.get($pad-i); | ||
170 | font-size: props.get($font-size); | ||
171 | |||
172 | @include bem.elem('label') { | ||
173 | margin-inline: props.get($pad-i-label); | ||
174 | } | ||
175 | |||
176 | @include bem.modifier('pill') { | ||
177 | padding-inline: props.get($pad-i-pill); | ||
178 | } | ||
179 | |||
180 | @include bem.modifier('icon') { | ||
181 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); | ||
182 | padding-inline: 0; | ||
183 | } | ||
184 | } | ||
185 | } | ||
186 | |||
187 | @include bem.modifier('align-block') { | ||
188 | margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); | ||
189 | |||
190 | @include bem.modifier('pill') { | ||
191 | margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); | ||
192 | } | ||
193 | |||
194 | @include bem.modifier('icon') { | ||
195 | margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
196 | } | ||
197 | |||
198 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
199 | @include bem.modifier($mod) { | ||
200 | margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); | ||
201 | |||
202 | @include bem.modifier('pill') { | ||
203 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); | ||
204 | } | ||
205 | |||
206 | @include bem.modifier('icon') { | ||
207 | margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
208 | } | ||
209 | } | ||
210 | } | ||
211 | } | ||
212 | } | ||
213 | } | ||
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss deleted file mode 100644 index 8c3d510..0000000 --- a/src/objects/_action-button.vars.scss +++ /dev/null | |||
@@ -1,193 +0,0 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:string'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | @use '../core.vars' as core; | ||
5 | |||
6 | $line-height: props.def(--o-action-button--line-height, 1.4) !default; | ||
7 | $pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default; | ||
8 | $pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default; | ||
9 | $pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default; | ||
10 | $pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; | ||
11 | $border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; | ||
12 | $rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; | ||
13 | $font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; | ||
14 | |||
15 | $pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default; | ||
16 | $pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
17 | $pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default; | ||
18 | $pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; | ||
19 | $font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; | ||
20 | |||
21 | $pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default; | ||
22 | $pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default; | ||
23 | $pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default; | ||
24 | $pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; | ||
25 | $font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; | ||
26 | |||
27 | $pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default; | ||
28 | $pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default; | ||
29 | $pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default; | ||
30 | $pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; | ||
31 | $font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; | ||
32 | |||
33 | $key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
34 | $key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
35 | $key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
36 | |||
37 | $fixed-sizes: ( | ||
38 | 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, | ||
39 | 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, | ||
40 | 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, | ||
41 | ) !default; | ||
42 | |||
43 | $themes: props.def(--o-action-button, (), 'color'); | ||
44 | |||
45 | $default-theme-override: () !default; | ||
46 | $default-theme: map.deep-merge(( | ||
47 | --bg-color: props.get(core.$theme, --base, --75), | ||
48 | --label-color: props.get(core.$theme, --text), | ||
49 | --border-color: props.get(core.$theme, --border-strong), | ||
50 | |||
51 | --hover: ( | ||
52 | --bg-color: props.get(core.$theme, --border-mute), | ||
53 | --label-color: props.get(core.$theme, --heading), | ||
54 | --border-color: props.get(core.$theme, --text-mute-more), | ||
55 | ), | ||
56 | |||
57 | --active: ( | ||
58 | --bg-color: props.get(core.$theme, --border), | ||
59 | --label-color: props.get(core.$theme, --heading), | ||
60 | --border-color: props.get(core.$theme, --text-mute), | ||
61 | ), | ||
62 | |||
63 | --disabled: ( | ||
64 | --bg-color: props.get(core.$theme, --bg-l1), | ||
65 | --label-color: props.get(core.$theme, --border-strong), | ||
66 | --border-color: props.get(core.$theme, --border), | ||
67 | ), | ||
68 | |||
69 | --key-focus: ( | ||
70 | --border-color: props.get(core.$theme, --focus, --border), | ||
71 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
72 | ), | ||
73 | |||
74 | --selected: ( | ||
75 | --bg-color: props.get(core.$theme, --heading), | ||
76 | --label-color: props.get(core.$theme, --base, --50), | ||
77 | --border-color: props.get(core.$theme, --heading), | ||
78 | |||
79 | --hover: ( | ||
80 | --bg-color: props.get(core.$theme, --text), | ||
81 | --label-color: props.get(core.$theme, --base, --50), | ||
82 | --border-color: props.get(core.$theme, --text), | ||
83 | ), | ||
84 | |||
85 | --active: ( | ||
86 | --bg-color: props.get(core.$theme, --text-mute), | ||
87 | --label-color: props.get(core.$theme, --base, --50), | ||
88 | --border-color: props.get(core.$theme, --text-mute), | ||
89 | ), | ||
90 | |||
91 | --disabled: ( | ||
92 | --bg-color: props.get(core.$theme, --border-mute), | ||
93 | --label-color: props.get(core.$theme, --border-strong), | ||
94 | --border-color: props.get(core.$theme, --border-mute), | ||
95 | ), | ||
96 | ), | ||
97 | |||
98 | --quiet: ( | ||
99 | --label-color: props.get(core.$theme, --text), | ||
100 | |||
101 | --hover: ( | ||
102 | --bg-color: props.get(core.$theme, --border-mute), | ||
103 | --label-color: props.get(core.$theme, --heading), | ||
104 | ), | ||
105 | |||
106 | --active: ( | ||
107 | --bg-color: props.get(core.$theme, --border), | ||
108 | --label-color: props.get(core.$theme, --heading), | ||
109 | ), | ||
110 | |||
111 | --disabled: ( | ||
112 | --label-color: props.get(core.$theme, --border-strong), | ||
113 | ), | ||
114 | ), | ||
115 | ), $default-theme-override) !default; | ||
116 | $default-theme: props.def(--o-action-button, $default-theme, 'color'); | ||
117 | |||
118 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
119 | $button-theme: --static-#{string.slice($theme, 3)}; | ||
120 | |||
121 | $themes: props.merge($themes, ( | ||
122 | $button-theme: ( | ||
123 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
124 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
125 | --border-color: props.get(core.$transparent-colors, $theme, --400), | ||
126 | |||
127 | --hover: ( | ||
128 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
129 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
130 | --border-color: props.get(core.$transparent-colors, $theme, --500), | ||
131 | ), | ||
132 | |||
133 | --active: ( | ||
134 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
135 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
136 | --border-color: props.get(core.$transparent-colors, $theme, --600), | ||
137 | ), | ||
138 | |||
139 | --disabled: ( | ||
140 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
141 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
142 | --border-color: props.get(core.$transparent-colors, $theme, --300), | ||
143 | ), | ||
144 | |||
145 | --key-focus: ( | ||
146 | --border-color: props.get(core.$transparent-colors, $theme, --900), | ||
147 | --outline-color: props.get(core.$transparent-colors, $theme, --300), | ||
148 | ), | ||
149 | |||
150 | --selected: ( | ||
151 | --bg-color: props.get(core.$transparent-colors, $theme, --800), | ||
152 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
153 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
154 | |||
155 | --hover: ( | ||
156 | --bg-color: props.get(core.$transparent-colors, $theme, --900), | ||
157 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
158 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
159 | ), | ||
160 | |||
161 | --active: ( | ||
162 | --bg-color: props.get(core.$transparent-colors, $theme, --900), | ||
163 | --label-color: props.get(core.$transparent-colors, $theme, --text), | ||
164 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
165 | ), | ||
166 | |||
167 | --disabled: ( | ||
168 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
169 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
170 | --border-color: props.get(core.$transparent-colors, $theme, --100), | ||
171 | ), | ||
172 | ), | ||
173 | |||
174 | --quiet: ( | ||
175 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
176 | |||
177 | --hover: ( | ||
178 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
179 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
180 | ), | ||
181 | |||
182 | --active: ( | ||
183 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
184 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
185 | ), | ||
186 | |||
187 | --disabled: ( | ||
188 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
189 | ), | ||
190 | ), | ||
191 | ) | ||
192 | )); | ||
193 | } | ||
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss index 825f7ce..697ac18 100644 --- a/src/objects/_alert.scss +++ b/src/objects/_alert.scss | |||
@@ -8,19 +8,33 @@ | |||
8 | @use 'alert.vars' as vars; | 8 | @use 'alert.vars' as vars; |
9 | 9 | ||
10 | @mixin styles { | 10 | @mixin styles { |
11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
12 | 12 | ||
13 | @include bem.object('alert') { | 13 | @include bem.object('alert') { |
14 | padding-block: props.get(vars.$pad-b); | 14 | padding-block: props.get(vars.$pad-b); |
15 | padding-inline: props.get(vars.$pad-i); | 15 | padding-inline: props.get(vars.$pad-i); |
16 | background-color: props.get(vars.$bg-color); | 16 | background-color: props.get(vars.$bg-color); |
17 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | 17 | border: props.get(vars.$border-width) solid transparent; |
18 | border-radius: props.get(vars.$rounding); | 18 | border-color: props.get(vars.$border-color); |
19 | border-radius: props.get(vars.$rounding); | ||
20 | box-shadow: | ||
21 | props.get(vars.$shadow-x) | ||
22 | props.get(vars.$shadow-y) | ||
23 | props.get(vars.$shadow-blur) | ||
24 | props.get(vars.$shadow-grow) | ||
25 | props.get(vars.$shadow-color); | ||
19 | 26 | ||
20 | @each $mod, $theme in vars.$themes-config { | 27 | @each $mod, $theme in vars.$themes-config { |
21 | @include bem.modifier($mod) { | 28 | @include bem.modifier($mod) { |
22 | border-color: props.get(vars.$themes, $theme, --border-color); | 29 | background-color: props.get(vars.$themes, $theme, --bg-color); |
23 | } | 30 | border-color: props.get(vars.$themes, $theme, --border-color); |
24 | } | 31 | box-shadow: |
25 | } | 32 | props.get(vars.$shadow-x) |
33 | props.get(vars.$shadow-y) | ||
34 | props.get(vars.$shadow-blur) | ||
35 | props.get(vars.$shadow-grow) | ||
36 | props.get(vars.$themes, $theme, --shadow-color); | ||
37 | } | ||
38 | } | ||
39 | } | ||
26 | } | 40 | } |
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss index 53c9e68..62d3414 100644 --- a/src/objects/_alert.vars.scss +++ b/src/objects/_alert.vars.scss | |||
@@ -6,22 +6,31 @@ $pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; | |||
6 | $pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; | 6 | $pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default; |
7 | $rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; | 7 | $rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default; |
8 | 8 | ||
9 | $shadow-x: props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default; | ||
10 | $shadow-y: props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default; | ||
11 | $shadow-blur: props.def(--o-alert--shadow-blur, props.get(core.$shadow--l2--blur)) !default; | ||
12 | $shadow-grow: props.def(--o-alert--shadow-grow, props.get(core.$shadow--l2--grow)) !default; | ||
13 | |||
9 | $bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | 14 | $bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; |
10 | $border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), 'color') !default; | 15 | $border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute), 'color') !default; |
16 | |||
17 | $shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; | ||
11 | 18 | ||
12 | $themes-config: ( | 19 | $themes-config: ( |
13 | accent: --accent, | 20 | accent: --accent, |
14 | positive: --positive, | 21 | positive: --positive, |
15 | negative: --negative, | 22 | negative: --negative, |
16 | warning: --warning, | 23 | warning: --warning, |
17 | ) !default; | 24 | ) !default; |
18 | 25 | ||
19 | $themes: props.def(--o-alert, (), 'color'); | 26 | $themes: props.def(--o-alert, (), 'color'); |
20 | 27 | ||
21 | @each $theme, $key in $themes-config { | 28 | @each $theme, $key in $themes-config { |
22 | $themes: props.merge($themes, ( | 29 | $themes: props.merge($themes, ( |
23 | $key: ( | 30 | $key: ( |
24 | --border-color: props.get(core.$theme, $key, --700), | 31 | --bg-color: props.get(core.$theme, --bg-l2), |
25 | ) | 32 | --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800), |
26 | )); | 33 | --shadow-color: props.get(core.$theme, $key, --200), |
34 | ) | ||
35 | )); | ||
27 | } | 36 | } |
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index fc4ffcd..9d51ffb 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss | |||
@@ -7,111 +7,120 @@ | |||
7 | @use 'avatar.vars' as vars; | 7 | @use 'avatar.vars' as vars; |
8 | 8 | ||
9 | @mixin status($indicator-size) { | 9 | @mixin status($indicator-size) { |
10 | @include bem.elem('status') { | 10 | @include bem.elem('status') { |
11 | inline-size: props.get($indicator-size); | 11 | inline-size: props.get($indicator-size); |
12 | block-size: props.get($indicator-size); | 12 | block-size: props.get($indicator-size); |
13 | 13 | ||
14 | @include bem.next-elem('content') { | 14 | @include bem.sibling-elem('content') { |
15 | mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at | 15 | mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at |
16 | calc(100% - .5 * props.get($indicator-size)) | 16 | calc(100% - .5 * props.get($indicator-size)) |
17 | calc(100% - .5 * props.get($indicator-size)), | 17 | calc(100% - .5 * props.get($indicator-size)), |
18 | transparent 95%, | 18 | transparent 95%, |
19 | #fff); | 19 | #fff); |
20 | } | 20 | } |
21 | } | 21 | } |
22 | } | 22 | } |
23 | 23 | ||
24 | @mixin styles { | 24 | @mixin styles { |
25 | @include materialize-at-root(meta.module-variables('vars')); | 25 | @include materialize-at-root(meta.module-variables('vars')); |
26 | 26 | ||
27 | @include bem.object('avatar') { | 27 | @include bem.object('avatar') { |
28 | position: relative; | 28 | position: relative; |
29 | display: inline-block; | 29 | display: inline-block; |
30 | font-size: props.get(vars.$font-size); | 30 | font-size: props.get(vars.$font-size); |
31 | font-style: normal; | 31 | font-style: normal; |
32 | vertical-align: .05em; | 32 | vertical-align: .05em; |
33 | border-radius: props.get(vars.$rounding); | 33 | border-radius: props.get(vars.$rounding); |
34 | 34 | ||
35 | &::after { | 35 | &::after { |
36 | position: absolute; | 36 | position: absolute; |
37 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | 37 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); |
38 | z-index: 1; | 38 | z-index: 1; |
39 | display: none; | 39 | display: none; |
40 | pointer-events: none; | 40 | pointer-events: none; |
41 | content: ''; | 41 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
42 | border: props.get(vars.$key-focus--border-offset) solid transparent; | 42 | content: ''; |
43 | border-radius: props.get(vars.$rounding); | 43 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
44 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | 44 | border-radius: props.get(vars.$rounding); |
45 | box-shadow: | 45 | box-shadow: |
46 | 0 | 46 | 0 |
47 | 0 | 47 | 0 |
48 | 0 | 48 | 0 |
49 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 49 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
50 | props.get(vars.$key-focus--outline-color); | 50 | props.get(vars.$key-focus--outline-color); |
51 | } | 51 | } |
52 | 52 | ||
53 | @include bem.elem('status') { | 53 | @include bem.elem('status') { |
54 | position: absolute; | 54 | position: absolute; |
55 | inset-block-end: 0; | 55 | inset-block-end: 0; |
56 | inset-inline-end: 0; | 56 | inset-inline-end: 0; |
57 | } | 57 | } |
58 | 58 | ||
59 | @include status(vars.$indicator-size); | 59 | @include status(vars.$indicator-size); |
60 | 60 | ||
61 | @include bem.elem('content') { | 61 | @include bem.elem('content') { |
62 | display: block; | 62 | display: block; |
63 | inline-size: props.get(vars.$size); | 63 | inline-size: props.get(vars.$size); |
64 | block-size: props.get(vars.$size); | 64 | block-size: props.get(vars.$size); |
65 | line-height: props.get(vars.$size); | 65 | line-height: props.get(vars.$size); |
66 | text-align: center; | 66 | text-align: center; |
67 | object-fit: cover; | 67 | object-fit: cover; |
68 | object-position: center center; | 68 | object-position: center center; |
69 | border-radius: props.get(vars.$rounding); | 69 | border-radius: props.get(vars.$rounding); |
70 | } | 70 | } |
71 | 71 | ||
72 | @include bem.modifier('circle') { | 72 | @include bem.modifier('circle') { |
73 | border-radius: 100%; | 73 | border-radius: 100%; |
74 | 74 | ||
75 | &::after { | 75 | &::after { |
76 | border-radius: 100%; | 76 | border-radius: 100%; |
77 | } | 77 | } |
78 | 78 | ||
79 | @include bem.elem('content') { | 79 | @include bem.elem('content') { |
80 | border-radius: 100%; | 80 | border-radius: 100%; |
81 | } | 81 | } |
82 | } | 82 | } |
83 | 83 | ||
84 | @include bem.modifier('placeholder') { | 84 | @include bem.modifier('placeholder') { |
85 | @include bem.elem('content') { | 85 | @include bem.elem('content') { |
86 | background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); | 86 | background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); |
87 | } | 87 | } |
88 | } | 88 | } |
89 | 89 | ||
90 | @include bem.modifier('colored') { | 90 | @include bem.modifier('colored') { |
91 | @include bem.elem('content') { | 91 | @include bem.elem('content') { |
92 | color: #fff; | 92 | color: #fff; |
93 | background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); | 93 | background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); |
94 | } | 94 | } |
95 | } | 95 | } |
96 | 96 | ||
97 | @each $mod, $size, $font-size, $indicator-size in vars.$sizes { | 97 | @include bem.modifier('colored-gradient') { |
98 | @include bem.modifier($mod) { | 98 | @include bem.elem('content') { |
99 | font-size: props.get($font-size); | 99 | color: #fff; |
100 | background: linear-gradient(props.get(vars.$bg-angle), | ||
101 | hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)), | ||
102 | hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l))); | ||
103 | } | ||
104 | } | ||
105 | |||
106 | @each $mod, $size, $font-size, $indicator-size in vars.$sizes { | ||
107 | @include bem.modifier($mod) { | ||
108 | font-size: props.get($font-size); | ||
100 | 109 | ||
101 | @include status($indicator-size); | 110 | @include status($indicator-size); |
102 | 111 | ||
103 | @include bem.elem('content') { | 112 | @include bem.elem('content') { |
104 | inline-size: props.get($size); | 113 | inline-size: props.get($size); |
105 | block-size: props.get($size); | 114 | block-size: props.get($size); |
106 | line-height: props.get($size); | 115 | line-height: props.get($size); |
107 | } | 116 | } |
108 | } | 117 | } |
109 | } | 118 | } |
110 | 119 | ||
111 | &:focus-visible { | 120 | &:focus-visible { |
112 | &::after { | 121 | &::after { |
113 | display: block; | 122 | display: block; |
114 | } | 123 | } |
115 | } | 124 | } |
116 | } | 125 | } |
117 | } | 126 | } |
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss index 72fb397..2374f5a 100644 --- a/src/objects/_avatar.vars.scss +++ b/src/objects/_avatar.vars.scss | |||
@@ -39,14 +39,20 @@ $bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default; | |||
39 | $bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default; | 39 | $bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default; |
40 | $bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default; | 40 | $bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default; |
41 | 41 | ||
42 | $bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default; | ||
43 | $bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default; | ||
44 | $bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default; | ||
45 | |||
46 | $bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default; | ||
47 | |||
42 | $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | 48 | $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; |
43 | $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | 49 | $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; |
44 | 50 | ||
45 | $sizes: ( | 51 | $sizes: ( |
46 | 'xs' $size--xs $font-size--xs $indicator-size--xs, | 52 | 'xs' $size--xs $font-size--xs $indicator-size--xs, |
47 | 'sm' $size--sm $font-size--sm $indicator-size--sm, | 53 | 'sm' $size--sm $font-size--sm $indicator-size--sm, |
48 | 'lg' $size--lg $font-size--lg $indicator-size--lg, | 54 | 'lg' $size--lg $font-size--lg $indicator-size--lg, |
49 | 'xl' $size--xl $font-size--xl $indicator-size--xl, | 55 | 'xl' $size--xl $font-size--xl $indicator-size--xl, |
50 | 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, | 56 | 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, |
51 | 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, | 57 | 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, |
52 | ) !default; | 58 | ) !default; |
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index 9cc9e2e..346cf5f 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss | |||
@@ -7,17 +7,17 @@ | |||
7 | @use 'backdrop.vars' as vars; | 7 | @use 'backdrop.vars' as vars; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include bem.object('backdrop') { | 12 | @include bem.object('backdrop') { |
13 | position: fixed; | 13 | position: fixed; |
14 | inset: 0; | 14 | inset: 0; |
15 | z-index: props.get(vars.$z-index); | 15 | z-index: props.get(vars.$z-index); |
16 | box-sizing: border-box; | 16 | box-sizing: border-box; |
17 | display: flex; | 17 | display: flex; |
18 | flex-direction: column; | 18 | flex-direction: column; |
19 | overflow: auto; | 19 | overflow: auto; |
20 | background-color: props.get(vars.$bg-color); | 20 | background-color: props.get(vars.$bg-color); |
21 | backdrop-filter: blur(props.get(vars.$blur)); | 21 | backdrop-filter: blur(props.get(vars.$blur)); |
22 | } | 22 | } |
23 | } | 23 | } |
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss deleted file mode 100644 index 9f3e307..0000000 --- a/src/objects/_badge.scss +++ /dev/null | |||
@@ -1,144 +0,0 @@ | |||
1 | @use 'sass:list'; | ||
2 | @use 'sass:map'; | ||
3 | @use 'sass:meta'; | ||
4 | @use 'sass:string'; | ||
5 | @use 'iro-sass/src/bem'; | ||
6 | @use 'iro-sass/src/props'; | ||
7 | @use '../props' as *; | ||
8 | @use '../core.vars' as core; | ||
9 | |||
10 | @forward 'badge.vars'; | ||
11 | @use 'badge.vars' as vars; | ||
12 | |||
13 | @mixin -apply-theme($theme, $key: (), $static: false) { | ||
14 | color: props.get($theme, list.join($key, --label)...); | ||
15 | background-color: props.get($theme, list.join($key, --bg)...); | ||
16 | |||
17 | &:link, | ||
18 | &:visited, | ||
19 | &:enabled { | ||
20 | &:hover, | ||
21 | &:focus-visible { | ||
22 | color: props.get($theme, list.join($key, --hover --label)...); | ||
23 | background-color: props.get($theme, list.join($key, --hover --bg)...); | ||
24 | } | ||
25 | |||
26 | &:active { | ||
27 | color: props.get($theme, list.join($key, --active --label)...); | ||
28 | background-color: props.get($theme, list.join($key, --active --bg)...); | ||
29 | } | ||
30 | } | ||
31 | |||
32 | @include bem.modifier('quiet') { | ||
33 | color: props.get($theme, list.join($key, --quiet --label)...); | ||
34 | background-color: props.get($theme, list.join($key, --quiet --bg)...); | ||
35 | |||
36 | &:link, | ||
37 | &:visited, | ||
38 | &:enabled { | ||
39 | &:hover, | ||
40 | &:focus-visible { | ||
41 | color: props.get($theme, list.join($key, --quiet --hover --label)...); | ||
42 | background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); | ||
43 | } | ||
44 | |||
45 | &:active { | ||
46 | color: props.get($theme, list.join($key, --quiet --active --label)...); | ||
47 | background-color: props.get($theme, list.join($key, --quiet --active --bg)...); | ||
48 | } | ||
49 | } | ||
50 | } | ||
51 | |||
52 | @if $static { | ||
53 | &::after { | ||
54 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); | ||
55 | box-shadow: | ||
56 | 0 | ||
57 | 0 | ||
58 | 0 | ||
59 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
60 | props.get($theme, list.join($key, --key-focus --outline)...); | ||
61 | } | ||
62 | } | ||
63 | } | ||
64 | |||
65 | @mixin styles { | ||
66 | @include materialize-at-root(meta.module-variables('vars')); | ||
67 | |||
68 | @include bem.object('badge') { | ||
69 | position: relative; | ||
70 | display: inline-block; | ||
71 | padding-block: props.get(vars.$pad-b); | ||
72 | padding-inline: props.get(vars.$pad-i); | ||
73 | font-size: props.get(vars.$font-size); | ||
74 | line-height: props.get(core.$font--standard--line-height); | ||
75 | text-align: center; | ||
76 | text-decoration: none; | ||
77 | background-clip: padding-box; | ||
78 | border-radius: props.get(vars.$rounding); | ||
79 | |||
80 | &::after { | ||
81 | position: absolute; | ||
82 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
83 | z-index: 1; | ||
84 | display: none; | ||
85 | pointer-events: none; | ||
86 | content: ''; | ||
87 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
88 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
89 | } | ||
90 | |||
91 | &:link, | ||
92 | &:visited, | ||
93 | &:enabled { | ||
94 | &:focus-visible { | ||
95 | &::after { | ||
96 | display: block; | ||
97 | } | ||
98 | } | ||
99 | } | ||
100 | |||
101 | @include bem.elem('label') { | ||
102 | margin-inline: props.get(vars.$pad-i-label); | ||
103 | } | ||
104 | |||
105 | @include -apply-theme(vars.$default-theme, $static: true); | ||
106 | |||
107 | @each $theme in map.keys(props.get(vars.$themes)) { | ||
108 | @include bem.modifier(string.slice($theme, 3)) { | ||
109 | @include -apply-theme(vars.$themes, $theme); | ||
110 | } | ||
111 | } | ||
112 | |||
113 | @each $theme in map.keys(props.get(vars.$static-themes)) { | ||
114 | @include bem.modifier(string.slice($theme, 3)) { | ||
115 | @include -apply-theme(vars.$static-themes, $theme, true); | ||
116 | } | ||
117 | } | ||
118 | |||
119 | @include bem.modifier('pill') { | ||
120 | padding-inline: props.get(vars.$pad-i-pill); | ||
121 | border-radius: 10em; | ||
122 | |||
123 | &::after { | ||
124 | border-radius: 10em; | ||
125 | } | ||
126 | } | ||
127 | |||
128 | @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { | ||
129 | @include bem.modifier($mod) { | ||
130 | padding-block: props.get($pad-b); | ||
131 | padding-inline: props.get($pad-i); | ||
132 | font-size: props.get($font-size); | ||
133 | |||
134 | @include bem.elem('label') { | ||
135 | margin-inline: props.get($pad-i-label); | ||
136 | } | ||
137 | |||
138 | @include bem.modifier('pill') { | ||
139 | padding-inline: props.get($pad-i-pill); | ||
140 | } | ||
141 | } | ||
142 | } | ||
143 | } | ||
144 | } | ||
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss deleted file mode 100644 index ff07148..0000000 --- a/src/objects/_badge.vars.scss +++ /dev/null | |||
@@ -1,161 +0,0 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:string'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | @use '../core.vars' as core; | ||
5 | |||
6 | $pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default; | ||
7 | $pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default; | ||
8 | $pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default; | ||
9 | $pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default; | ||
10 | $rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default; | ||
11 | $font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default; | ||
12 | |||
13 | $pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default; | ||
14 | $pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default; | ||
15 | $pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default; | ||
16 | $pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default; | ||
17 | $font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default; | ||
18 | |||
19 | $pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default; | ||
20 | $pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default; | ||
21 | $pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default; | ||
22 | $pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default; | ||
23 | $font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default; | ||
24 | |||
25 | $pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default; | ||
26 | $pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default; | ||
27 | $pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default; | ||
28 | $pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default; | ||
29 | $font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default; | ||
30 | |||
31 | $key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
32 | $key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
33 | $key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
34 | |||
35 | $sizes: ( | ||
36 | 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm, | ||
37 | 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg, | ||
38 | 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, | ||
39 | ) !default; | ||
40 | |||
41 | $default-theme-override: () !default; | ||
42 | $default-theme: props.def(--o-badge, ( | ||
43 | --bg: props.get(core.$theme, --heading), | ||
44 | --label: props.get(core.$theme, --bg-l2), | ||
45 | |||
46 | --hover: ( | ||
47 | --bg: props.get(core.$theme, --text), | ||
48 | --label: props.get(core.$theme, --bg-l2), | ||
49 | ), | ||
50 | |||
51 | --active: ( | ||
52 | --bg: props.get(core.$theme, --text-mute), | ||
53 | --label: props.get(core.$theme, --bg-l2), | ||
54 | ), | ||
55 | |||
56 | --key-focus: ( | ||
57 | --label: props.get(core.$theme, --focus, --text), | ||
58 | --border: props.get(core.$theme, --focus, --border), | ||
59 | --outline: props.get(core.$theme, --focus, --outline), | ||
60 | ), | ||
61 | |||
62 | --quiet: ( | ||
63 | --bg: props.get(core.$theme, --border-mute), | ||
64 | --label: props.get(core.$theme, --heading), | ||
65 | |||
66 | --hover: ( | ||
67 | --bg: props.get(core.$theme, --border), | ||
68 | --label: props.get(core.$theme, --heading), | ||
69 | ), | ||
70 | |||
71 | --active: ( | ||
72 | --bg: props.get(core.$theme, --border-strong), | ||
73 | --label: props.get(core.$theme, --heading), | ||
74 | ), | ||
75 | ) | ||
76 | ), 'color') !default; | ||
77 | $default-theme: props.merge($default-theme, $default-theme-override); | ||
78 | |||
79 | $static-themes: props.def(--o-badge, (), 'color'); | ||
80 | |||
81 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | ||
82 | $badge-theme: --static-#{string.slice($theme, 3)}; | ||
83 | |||
84 | $static-themes: props.merge($static-themes, ( | ||
85 | $badge-theme: ( | ||
86 | --bg: props.get(core.$transparent-colors, $theme, --800), | ||
87 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
88 | |||
89 | --hover: ( | ||
90 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
91 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
92 | ), | ||
93 | |||
94 | --active: ( | ||
95 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
96 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
97 | ), | ||
98 | |||
99 | --key-focus: ( | ||
100 | --bg: props.get(core.$transparent-colors, $theme, --100), | ||
101 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
102 | --border: props.get(core.$transparent-colors, $theme, --900), | ||
103 | --outline: props.get(core.$transparent-colors, $theme, --300), | ||
104 | ), | ||
105 | |||
106 | --quiet: ( | ||
107 | --bg: props.get(core.$transparent-colors, $theme, --200), | ||
108 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
109 | --hover: ( | ||
110 | --bg: props.get(core.$transparent-colors, $theme, --300), | ||
111 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
112 | ), | ||
113 | --active: ( | ||
114 | --bg: props.get(core.$transparent-colors, $theme, --400), | ||
115 | --label: props.get(core.$transparent-colors, $theme, --900), | ||
116 | ), | ||
117 | ) | ||
118 | ) | ||
119 | )); | ||
120 | } | ||
121 | |||
122 | $themes-config: ( | ||
123 | accent: --accent, | ||
124 | positive: --positive, | ||
125 | negative: --negative, | ||
126 | warning: --warning, | ||
127 | ) !default; | ||
128 | |||
129 | $themes: props.def(--o-badge, (), 'color'); | ||
130 | |||
131 | @each $theme, $key in $themes-config { | ||
132 | $themes: props.merge($themes, ( | ||
133 | --#{$theme}: ( | ||
134 | --bg: props.get(core.$theme, #{$key}-static, --900), | ||
135 | --label: props.get(core.$theme, #{$key}-static, --900-text), | ||
136 | |||
137 | --hover: ( | ||
138 | --bg: props.get(core.$theme, #{$key}-static, --1000), | ||
139 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | ||
140 | ), | ||
141 | |||
142 | --active: ( | ||
143 | --bg: props.get(core.$theme, #{$key}-static, --1100), | ||
144 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | ||
145 | ), | ||
146 | |||
147 | --quiet: ( | ||
148 | --bg: props.get(core.$theme, $key, --200), | ||
149 | --label: props.get(core.$theme, $key, --1100), | ||
150 | --hover: ( | ||
151 | --bg: props.get(core.$theme, $key, --300), | ||
152 | --label: props.get(core.$theme, $key, --1200), | ||
153 | ), | ||
154 | --active: ( | ||
155 | --bg: props.get(core.$theme, $key, --400), | ||
156 | --label: props.get(core.$theme, $key, --1300), | ||
157 | ), | ||
158 | ) | ||
159 | ) | ||
160 | )); | ||
161 | } | ||
diff --git a/src/objects/_button.scss b/src/objects/_button.scss index aaf55b5..8163cf9 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss | |||
@@ -5,154 +5,281 @@ | |||
5 | @use 'iro-sass/src/bem'; | 5 | @use 'iro-sass/src/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; | ||
9 | 8 | ||
10 | @forward 'button.vars'; | 9 | @forward 'button.vars'; |
11 | @use 'button.vars' as vars; | 10 | @use 'button.vars' as vars; |
12 | 11 | ||
13 | @mixin -apply-theme($theme, $key: ()) { | 12 | @mixin -apply-theme($theme, $key: ()) { |
14 | &:link, | 13 | color: props.get($theme, list.join($key, --disabled --label-color)...); |
15 | &:visited, | 14 | background-color: props.get($theme, list.join($key, --disabled --bg-color)...); |
16 | &:enabled { | 15 | border-color: props.get($theme, list.join($key, --disabled --border-color)...); |
17 | color: props.get($theme, list.join($key, --label)...); | ||
18 | background-color: props.get($theme, list.join($key, --bg)...); | ||
19 | border-color: transparent; | ||
20 | } | ||
21 | |||
22 | @include bem.modifier('outline') { | ||
23 | &:link, | ||
24 | &:visited, | ||
25 | &:enabled { | ||
26 | color: props.get($theme, list.join($key, --outline-label)...); | ||
27 | background-color: transparent; | ||
28 | border-color: props.get($theme, list.join($key, --outline-border)...); | ||
29 | } | ||
30 | } | ||
31 | 16 | ||
32 | &:link, | 17 | &::after { |
33 | &:visited, | 18 | outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); |
34 | &:enabled { | 19 | box-shadow: |
35 | &:hover, | 20 | 0 |
36 | &:focus-visible { | 21 | 0 |
37 | color: props.get($theme, list.join($key, --hover --label)...); | 22 | 0 |
38 | background-color: props.get($theme, list.join($key, --hover --bg)...); | 23 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
39 | border-color: transparent; | 24 | props.get($theme, list.join($key, --key-focus --outline-color)...); |
40 | } | 25 | } |
41 | 26 | ||
42 | &:active { | 27 | &:link, |
43 | color: props.get($theme, list.join($key, --active --label)...); | 28 | &:visited, |
44 | background-color: props.get($theme, list.join($key, --active --bg)...); | 29 | &:enabled { |
45 | border-color: transparent; | 30 | color: props.get($theme, list.join($key, --label-color)...); |
46 | } | 31 | background-color: props.get($theme, list.join($key, --bg-color)...); |
47 | } | 32 | border-color: props.get($theme, list.join($key, --border-color)...); |
48 | } | 33 | box-shadow: |
34 | props.get(vars.$shadow-x) | ||
35 | props.get(vars.$shadow-y) | ||
36 | props.get(vars.$shadow-blur) | ||
37 | props.get(vars.$shadow-grow) | ||
38 | props.get($theme, list.join($key, --shadow-color)...); | ||
39 | |||
40 | &:hover, | ||
41 | &:focus-visible { | ||
42 | color: props.get($theme, list.join($key, --hover --label-color)...); | ||
43 | background-color: props.get($theme, list.join($key, --hover --bg-color)...); | ||
44 | border-color: props.get($theme, list.join($key, --hover --border-color)...); | ||
45 | } | ||
49 | 46 | ||
50 | @mixin -apply-static-theme($theme, $key: ()) { | 47 | &:active { |
51 | color: props.get($theme, list.join($key, --disabled --label)...); | 48 | color: props.get($theme, list.join($key, --active --label-color)...); |
52 | background-color: props.get($theme, list.join($key, --disabled --bg)...); | 49 | background-color: props.get($theme, list.join($key, --active --bg-color)...); |
53 | border-color: transparent; | 50 | border-color: props.get($theme, list.join($key, --active --border-color)...); |
51 | box-shadow: none; | ||
52 | } | ||
53 | } | ||
54 | 54 | ||
55 | &::after { | 55 | @include bem.modifier('badge') { |
56 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); | 56 | color: props.get($theme, list.join($key, --badge --label-color)...); |
57 | box-shadow: | 57 | background-color: props.get($theme, list.join($key, --badge --bg-color)...); |
58 | 0 | 58 | border-color: props.get($theme, list.join($key, --badge --border-color)...); |
59 | 0 | 59 | box-shadow: none; |
60 | 0 | 60 | |
61 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 61 | &:link, |
62 | props.get($theme, list.join($key, --key-focus --outline)...); | 62 | &:visited, |
63 | } | 63 | &:enabled { |
64 | 64 | color: props.get($theme, list.join($key, --badge --label-color)...); | |
65 | @include bem.modifier('outline') { | 65 | background-color: props.get($theme, list.join($key, --badge --bg-color)...); |
66 | background-color: transparent; | 66 | border-color: props.get($theme, list.join($key, --badge --border-color)...); |
67 | border-color: props.get($theme, list.join($key, --disabled --outline-border)...); | 67 | box-shadow: none; |
68 | } | 68 | |
69 | &:hover, | ||
70 | &:focus-visible { | ||
71 | color: props.get($theme, list.join($key, --badge --hover --label-color)...); | ||
72 | background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...); | ||
73 | border-color: props.get($theme, list.join($key, --badge --hover --border-color)...); | ||
74 | } | ||
75 | |||
76 | &:active { | ||
77 | color: props.get($theme, list.join($key, --badge --active --label-color)...); | ||
78 | background-color: props.get($theme, list.join($key, --badge --active --bg-color)...); | ||
79 | border-color: props.get($theme, list.join($key, --badge --active --border-color)...); | ||
80 | } | ||
81 | } | ||
82 | } | ||
83 | |||
84 | @include bem.modifier('quiet') { | ||
85 | color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); | ||
86 | background-color: transparent; | ||
87 | border-color: transparent; | ||
88 | |||
89 | &:link, | ||
90 | &:visited, | ||
91 | &:enabled { | ||
92 | color: props.get($theme, list.join($key, --quiet --label-color)...); | ||
93 | background-color: transparent; | ||
94 | border-color: transparent; | ||
95 | box-shadow: none; | ||
96 | |||
97 | &:hover, | ||
98 | &:focus-visible { | ||
99 | color: props.get($theme, list.join($key, --quiet --hover --label-color)...); | ||
100 | background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...); | ||
101 | border-color: transparent; | ||
102 | } | ||
103 | |||
104 | &:active { | ||
105 | color: props.get($theme, list.join($key, --quiet --active --label-color)...); | ||
106 | background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...); | ||
107 | border-color: transparent; | ||
108 | } | ||
109 | } | ||
110 | } | ||
111 | |||
112 | @include bem.is('highlighted') { | ||
113 | &:link, | ||
114 | &:visited, | ||
115 | &:enabled { | ||
116 | &, | ||
117 | &:hover, | ||
118 | &:focus-visible { | ||
119 | border-color: props.get($theme, list.join($key, --highlighted --border-color)...); | ||
120 | } | ||
121 | |||
122 | box-shadow: | ||
123 | 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), | ||
124 | props.get(vars.$shadow-x) | ||
125 | props.get(vars.$shadow-y) | ||
126 | props.get(vars.$shadow-blur) | ||
127 | props.get(vars.$shadow-grow) | ||
128 | props.get($theme, list.join($key, --highlighted --shadow-color)...); | ||
129 | |||
130 | &:focus-visible { | ||
131 | box-shadow: | ||
132 | props.get(vars.$shadow-x) | ||
133 | props.get(vars.$shadow-y) | ||
134 | props.get(vars.$shadow-blur) | ||
135 | props.get(vars.$shadow-grow) | ||
136 | props.get($theme, list.join($key, --shadow-color)...); | ||
137 | } | ||
138 | } | ||
139 | } | ||
140 | |||
141 | @include bem.is('selected') { | ||
142 | color: props.get($theme, list.join($key, --selected --disabled --label-color)...); | ||
143 | background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); | ||
144 | border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); | ||
69 | 145 | ||
70 | @include -apply-theme($theme, $key); | 146 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') { |
147 | color: props.get($theme, list.join($key, --selected --label-color)...); | ||
148 | background-color: props.get($theme, list.join($key, --selected --bg-color)...); | ||
149 | border-color: props.get($theme, list.join($key, --selected --border-color)...); | ||
150 | } | ||
71 | 151 | ||
72 | @include bem.modifier('primary') { | 152 | &:link, |
73 | @include -apply-theme($theme, list.join($key, --primary)); | 153 | &:visited, |
74 | } | 154 | &:enabled { |
155 | &:hover, | ||
156 | &:focus-visible { | ||
157 | color: props.get($theme, list.join($key, --selected --hover --label-color)...); | ||
158 | background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); | ||
159 | border-color: props.get($theme, list.join($key, --selected --hover --border-color)...); | ||
160 | } | ||
161 | |||
162 | &:active { | ||
163 | color: props.get($theme, list.join($key, --selected --active --label-color)...); | ||
164 | background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); | ||
165 | border-color: props.get($theme, list.join($key, --selected --active --border-color)...); | ||
166 | } | ||
167 | } | ||
168 | } | ||
75 | } | 169 | } |
76 | 170 | ||
77 | @mixin styles { | 171 | @mixin styles { |
78 | @include materialize-at-root(meta.module-variables('vars')); | 172 | @include materialize-at-root(meta.module-variables('vars')); |
79 | 173 | ||
80 | @include bem.object('button') { | 174 | @include bem.object('button') { |
81 | position: relative; | 175 | position: relative; |
82 | display: inline-block; | 176 | display: inline-block; |
83 | padding-block: props.get(vars.$pad-b); | 177 | padding-block: props.get(vars.$pad-b); |
84 | padding-inline: props.get(vars.$pad-i); | 178 | padding-inline: props.get(vars.$pad-i); |
85 | font-size: props.get(vars.$font-size); | 179 | text-overflow: ellipsis; |
86 | font-weight: 500; | 180 | font-size: props.get(vars.$font-size); |
87 | line-height: props.get(vars.$line-height); | 181 | line-height: props.get(vars.$line-height); |
88 | text-align: center; | 182 | text-align: center; |
89 | text-decoration: none; | 183 | white-space: nowrap; |
90 | border: props.get(vars.$border-width) solid transparent; | 184 | text-decoration: none; |
91 | border-radius: props.get(vars.$rounding); | 185 | border: props.get(vars.$border-width) solid transparent; |
186 | border-radius: props.get(vars.$rounding); | ||
187 | transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s; | ||
92 | 188 | ||
93 | &::after { | 189 | &::after { |
94 | position: absolute; | 190 | position: absolute; |
95 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); | 191 | inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); |
96 | z-index: 1; | 192 | z-index: 1; |
97 | display: none; | 193 | display: none; |
98 | pointer-events: none; | 194 | pointer-events: none; |
99 | content: ''; | 195 | outline: transparent solid props.get(vars.$key-focus--border-width); |
100 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | 196 | content: ''; |
101 | outline: transparent solid props.get(vars.$key-focus--border-width); | 197 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); |
102 | } | 198 | } |
103 | 199 | ||
104 | &:link, | 200 | &:link, |
105 | &:visited, | 201 | &:visited, |
106 | &:enabled { | 202 | &:enabled { |
107 | &:focus-visible { | 203 | &:focus-visible { |
108 | &::after { | 204 | transition: none; |
109 | display: block; | ||
110 | } | ||
111 | } | ||
112 | } | ||
113 | 205 | ||
114 | @include bem.elem('label') { | 206 | &::after { |
115 | margin-inline: props.get(vars.$pad-i-label); | 207 | display: block; |
116 | } | 208 | } |
117 | 209 | } | |
118 | @include bem.modifier('block') { | 210 | } |
119 | display: block; | 211 | |
120 | } | 212 | @include bem.elem('label') { |
121 | 213 | margin-inline: props.get(vars.$pad-i-label); | |
122 | @include bem.modifier('outline') { | 214 | } |
123 | background-color: transparent; | 215 | |
124 | } | 216 | @include -apply-theme(vars.$default-theme); |
217 | |||
218 | @each $theme in map.keys(props.get(vars.$themes)) { | ||
219 | @include bem.modifier(string.slice($theme, 3)) { | ||
220 | @include -apply-theme(vars.$themes, $theme); | ||
221 | } | ||
222 | } | ||
223 | |||
224 | @include bem.modifier('pill') { | ||
225 | padding-inline: props.get(vars.$pad-i-pill); | ||
226 | border-radius: 100em; | ||
125 | 227 | ||
126 | @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { | 228 | &::after { |
127 | @include bem.modifier($mod) { | 229 | border-radius: 100em; |
128 | padding-block: props.get($pad-b); | 230 | } |
129 | padding-inline: props.get($pad-i); | 231 | } |
130 | font-size: props.get($font-size); | ||
131 | 232 | ||
132 | @include bem.elem('label') { | 233 | @include bem.modifier('icon') { |
133 | margin-inline: props.get($pad-i-label); | 234 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); |
134 | } | 235 | padding-inline: 0; |
135 | } | 236 | } |
136 | } | ||
137 | 237 | ||
138 | @include -apply-static-theme(vars.$default-theme); | 238 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { |
239 | @include bem.modifier($mod) { | ||
240 | padding-block: props.get($pad-b); | ||
241 | padding-inline: props.get($pad-i); | ||
242 | font-size: props.get($font-size); | ||
139 | 243 | ||
140 | @each $theme in map.keys(props.get(vars.$themes)) { | 244 | @include bem.elem('label') { |
141 | @include bem.modifier(string.slice($theme, 3)) { | 245 | margin-inline: props.get($pad-i-label); |
142 | @include -apply-theme(vars.$themes, $theme); | 246 | } |
143 | } | ||
144 | } | ||
145 | 247 | ||
146 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 248 | @include bem.modifier('pill') { |
147 | @include bem.modifier(string.slice($theme, 3)) { | 249 | padding-inline: props.get($pad-i-pill); |
148 | @include -apply-static-theme(vars.$static-themes, $theme); | 250 | } |
149 | } | 251 | |
150 | } | 252 | @include bem.modifier('icon') { |
253 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); | ||
254 | padding-inline: 0; | ||
255 | } | ||
256 | } | ||
257 | } | ||
258 | |||
259 | @include bem.modifier('align-block') { | ||
260 | margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); | ||
261 | |||
262 | @include bem.modifier('pill') { | ||
263 | margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); | ||
264 | } | ||
265 | |||
266 | @include bem.modifier('icon') { | ||
267 | margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); | ||
268 | } | ||
269 | |||
270 | @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { | ||
271 | @include bem.modifier($mod) { | ||
272 | margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); | ||
151 | 273 | ||
152 | @include bem.modifier('round') { | 274 | @include bem.modifier('pill') { |
153 | inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); | 275 | margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); |
154 | padding-inline: 0; | 276 | } |
155 | border-radius: 100em; | 277 | |
156 | } | 278 | @include bem.modifier('icon') { |
157 | } | 279 | margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); |
280 | } | ||
281 | } | ||
282 | } | ||
283 | } | ||
284 | } | ||
158 | } | 285 | } |
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 4f7b552..6e2298f 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss | |||
@@ -4,165 +4,371 @@ | |||
4 | @use '../core.vars' as core; | 4 | @use '../core.vars' as core; |
5 | 5 | ||
6 | $line-height: props.def(--o-button--line-height, 1.4) !default; | 6 | $line-height: props.def(--o-button--line-height, 1.4) !default; |
7 | $pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; | 7 | $border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default; |
8 | $pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; | 8 | $rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default; |
9 | $pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default; | ||
10 | $border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default; | ||
11 | $rounding: props.def(--o-button--rounding, 10em) !default; | ||
12 | $font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; | ||
13 | 9 | ||
14 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; | 10 | $pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default; |
15 | $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; | 11 | $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; |
16 | $pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default; | 12 | $pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default; |
13 | $pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default; | ||
17 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; | 14 | $font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; |
18 | 15 | ||
19 | $pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; | 16 | $pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default; |
20 | $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; | 17 | $pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default; |
21 | $pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default; | 18 | $pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !default; |
19 | $pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default; | ||
20 | $font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default; | ||
21 | |||
22 | $pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default; | ||
23 | $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default; | ||
24 | $pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default; | ||
25 | $pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default; | ||
22 | $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; | 26 | $font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; |
23 | 27 | ||
24 | $pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; | 28 | $pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default; |
25 | $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default; | 29 | $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default; |
30 | $pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default; | ||
26 | $pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; | 31 | $pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; |
27 | $font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; | 32 | $font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; |
28 | 33 | ||
34 | $shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default; | ||
35 | $shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default; | ||
36 | $shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default; | ||
37 | $shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default; | ||
38 | |||
29 | $key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 39 | $key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; |
30 | $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | 40 | $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; |
31 | $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | 41 | $key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; |
32 | 42 | ||
33 | $sizes: ( | 43 | $fixed-sizes: ( |
34 | 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, | 44 | 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, |
35 | 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, | 45 | 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg, |
36 | 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, | 46 | 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, |
37 | ) !default; | 47 | ) !default; |
38 | 48 | ||
49 | $themes: props.def(--o-button, (), 'color'); | ||
50 | |||
39 | $default-theme-override: () !default; | 51 | $default-theme-override: () !default; |
40 | $default-theme: props.def(--o-button, ( | 52 | $default-theme: map.deep-merge(( |
41 | --bg: props.get(core.$theme, --border-mute), | 53 | --bg-color: props.get(core.$theme, --bg-l2), |
42 | --label: props.get(core.$theme, --text), | 54 | --label-color: props.get(core.$theme, --text), |
43 | --outline-border: props.get(core.$theme, --border), | 55 | --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), |
44 | --outline-label: props.get(core.$theme, --text), | 56 | --shadow-color: props.get(core.$theme, --shadow), |
57 | |||
58 | --hover: ( | ||
59 | --bg-color: props.get(core.$theme, --bg-l1), | ||
60 | --label-color: props.get(core.$theme, --heading), | ||
61 | --border-color: props.get(core.$theme, --border), | ||
62 | ), | ||
63 | |||
64 | --active: ( | ||
65 | --bg-color: props.get(core.$theme, --border-mute), | ||
66 | --label-color: props.get(core.$theme, --heading), | ||
67 | --border-color: props.get(core.$theme, --border-strong), | ||
68 | ), | ||
69 | |||
70 | --disabled: ( | ||
71 | --bg-color: transparent, | ||
72 | --label-color: props.get(core.$theme, --border-strong), | ||
73 | --border-color: props.get(core.$theme, --text-disabled), | ||
74 | ), | ||
75 | |||
76 | --key-focus: ( | ||
77 | --border-color: props.get(core.$theme, --focus, --border), | ||
78 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
79 | ), | ||
80 | |||
81 | --highlighted: ( | ||
82 | --border-color: props.get(core.$theme, --focus, --border), | ||
83 | --shadow-color: props.get(core.$theme, --focus, --outline), | ||
84 | ), | ||
85 | |||
86 | --selected: ( | ||
87 | --bg-color: props.get(core.$theme, --text), | ||
88 | --label-color: props.get(core.$theme, --base, --50), | ||
89 | --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading), | ||
90 | |||
91 | --hover: ( | ||
92 | --bg-color: props.get(core.$theme, --heading), | ||
93 | --label-color: props.get(core.$theme, --base, --50), | ||
94 | --border-color: props.get(core.$theme, --heading), | ||
95 | ), | ||
96 | |||
97 | --active: ( | ||
98 | --bg-color: props.get(core.$theme, --heading), | ||
99 | --label-color: props.get(core.$theme, --base, --50), | ||
100 | --border-color: props.get(core.$theme, --heading), | ||
101 | ), | ||
102 | |||
103 | --disabled: ( | ||
104 | --bg-color: props.get(core.$theme, --border-mute), | ||
105 | --label-color: props.get(core.$theme, --border-strong), | ||
106 | --border-color: props.get(core.$theme, --border-mute), | ||
107 | ), | ||
108 | ), | ||
109 | |||
110 | --badge: ( | ||
111 | --bg-color: props.get(core.$theme, --border-mute), | ||
112 | --label-color: props.get(core.$theme, --heading), | ||
113 | --border-color: props.get(core.$theme, --border-mute), | ||
114 | |||
115 | --hover: ( | ||
116 | --bg-color: props.get(core.$theme, --border), | ||
117 | --label-color: props.get(core.$theme, --heading), | ||
118 | --border-color: props.get(core.$theme, --border), | ||
119 | ), | ||
45 | 120 | ||
46 | --hover: ( | 121 | --active: ( |
47 | --bg: props.get(core.$theme, --border), | 122 | --bg-color: props.get(core.$theme, --border-strong), |
48 | --label: props.get(core.$theme, --heading), | 123 | --label-color: props.get(core.$theme, --heading), |
49 | ), | 124 | --border-color: props.get(core.$theme, --border-strong), |
125 | ), | ||
126 | ), | ||
50 | 127 | ||
51 | --active: ( | 128 | --quiet: ( |
52 | --bg: props.get(core.$theme, --border-strong), | 129 | --label-color: props.get(core.$theme, --text), |
53 | --label: props.get(core.$theme, --heading), | ||
54 | ), | ||
55 | 130 | ||
56 | --disabled: ( | 131 | --hover: ( |
57 | --bg: props.get(core.$theme, --border-mute), | 132 | --bg-color: props.get(core.$theme, --border-mute), |
58 | --outline-border: props.get(core.$theme, --border), | 133 | --label-color: props.get(core.$theme, --heading), |
59 | --label: props.get(core.$theme, --text-disabled), | 134 | ), |
60 | ), | ||
61 | 135 | ||
62 | --key-focus: ( | 136 | --active: ( |
63 | --label: props.get(core.$theme, --focus, --text), | 137 | --bg-color: props.get(core.$theme, --border), |
64 | --border: props.get(core.$theme, --focus, --border), | 138 | --label-color: props.get(core.$theme, --heading), |
65 | --outline: props.get(core.$theme, --focus, --outline), | 139 | ), |
66 | ), | ||
67 | 140 | ||
68 | --primary: ( | 141 | --disabled: ( |
69 | --bg: props.get(core.$theme, --base, --900), | 142 | --label-color: props.get(core.$theme, --border-strong), |
70 | --label: props.get(core.$theme, --base, --900-text), | 143 | ), |
71 | --outline-border: props.get(core.$theme, --base, --900), | 144 | ), |
72 | --outline-label: props.get(core.$theme, --text), | 145 | ), $default-theme-override) !default; |
146 | $default-theme: props.def(--o-button, $default-theme, 'color'); | ||
73 | 147 | ||
74 | --hover: ( | 148 | $default-theme-dark-override: () !default; |
75 | --bg: props.get(core.$theme, --base, --800), | 149 | $default-theme-dark: map.deep-merge(( |
76 | --label: props.get(core.$theme, --base, --800-text), | 150 | --bg-color: props.get(core.$theme, --border-mute), |
77 | ), | 151 | --border-color: props.get(core.$theme, --border-mute), |
78 | 152 | ||
79 | --active: ( | 153 | --hover: ( |
80 | --bg: props.get(core.$theme, --base, --700), | 154 | --bg-color: props.get(core.$theme, --border), |
81 | --label: props.get(core.$theme, --base, --700-text), | 155 | --border-color: props.get(core.$theme, --border), |
82 | ), | 156 | ), |
83 | ), | ||
84 | ), 'color') !default; | ||
85 | $default-theme: props.merge($default-theme, $default-theme-override); | ||
86 | 157 | ||
87 | $static-themes: props.def(--o-button, (), 'color'); | 158 | --active: ( |
159 | --bg-color: props.get(core.$theme, --border-strong), | ||
160 | --border-color: props.get(core.$theme, --border-strong), | ||
161 | ), | ||
162 | |||
163 | --selected: ( | ||
164 | --border-color: props.get(core.$theme, --text), | ||
165 | ), | ||
166 | ), $default-theme-override) !default; | ||
167 | $default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); | ||
88 | 168 | ||
89 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | 169 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
90 | $button-theme: --static-#{string.slice($theme, 3)}; | 170 | $button-theme: --static-#{string.slice($theme, 3)}; |
171 | |||
172 | $themes: props.merge($themes, ( | ||
173 | $button-theme: ( | ||
174 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
175 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
176 | --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400), | ||
177 | --shadow-color: props.get(core.$transparent-colors, --black, --200), | ||
178 | |||
179 | --hover: ( | ||
180 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
181 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
182 | --border-color: props.get(core.$transparent-colors, $theme, --400), | ||
183 | ), | ||
184 | |||
185 | --active: ( | ||
186 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
187 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
188 | --border-color: props.get(core.$transparent-colors, $theme, --500), | ||
189 | ), | ||
190 | |||
191 | --disabled: ( | ||
192 | --bg-color: props.get(core.$transparent-colors, $theme, --100), | ||
193 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
194 | --border-color: props.get(core.$transparent-colors, $theme, --300), | ||
195 | ), | ||
91 | 196 | ||
92 | $static-themes: props.merge($static-themes, ( | 197 | --key-focus: ( |
93 | $button-theme: ( | 198 | --border-color: props.get(core.$transparent-colors, $theme, --900), |
94 | --bg: props.get(core.$transparent-colors, $theme, --200), | 199 | --outline-color: props.get(core.$transparent-colors, $theme, --300), |
95 | --label: props.get(core.$transparent-colors, $theme, --900), | 200 | ), |
96 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | ||
97 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | ||
98 | 201 | ||
99 | --hover: ( | 202 | --highlighted: ( |
100 | --bg: props.get(core.$transparent-colors, $theme, --300), | 203 | --border-color: props.get(core.$transparent-colors, $theme, --900), |
101 | --label: props.get(core.$transparent-colors, $theme, --900), | 204 | --shadow-color: props.get(core.$transparent-colors, --black, --200), |
102 | ), | 205 | ), |
103 | 206 | ||
104 | --active: ( | 207 | --selected: ( |
105 | --bg: props.get(core.$transparent-colors, $theme, --400), | 208 | --bg-color: props.get(core.$transparent-colors, $theme, --800), |
106 | --label: props.get(core.$transparent-colors, $theme, --900), | 209 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
107 | ), | 210 | --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), |
108 | 211 | ||
109 | --disabled: ( | 212 | --hover: ( |
110 | --bg: props.get(core.$transparent-colors, $theme, --200), | 213 | --bg-color: props.get(core.$transparent-colors, $theme, --900), |
111 | --outline-border: props.get(core.$transparent-colors, $theme, --300), | 214 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
112 | --label: props.get(core.$transparent-colors, $theme, --500), | 215 | --border-color: props.get(core.$transparent-colors, $theme, --100), |
113 | ), | 216 | ), |
114 | 217 | ||
115 | --key-focus: ( | 218 | --active: ( |
116 | --bg: props.get(core.$transparent-colors, $theme, --100), | 219 | --bg-color: props.get(core.$transparent-colors, $theme, --900), |
117 | --label: props.get(core.$transparent-colors, $theme, --900), | 220 | --label-color: props.get(core.$transparent-colors, $theme, --text), |
118 | --border: props.get(core.$transparent-colors, $theme, --900), | 221 | --border-color: props.get(core.$transparent-colors, $theme, --100), |
119 | --outline: props.get(core.$transparent-colors, $theme, --300), | 222 | ), |
120 | ), | ||
121 | 223 | ||
122 | --primary: ( | 224 | --disabled: ( |
123 | --bg: props.get(core.$transparent-colors, $theme, --800), | 225 | --bg-color: props.get(core.$transparent-colors, $theme, --200), |
124 | --label: props.get(core.$transparent-colors, $theme, --text), | 226 | --label-color: props.get(core.$transparent-colors, $theme, --500), |
125 | --outline-border: props.get(core.$transparent-colors, $theme, --800), | 227 | --border-color: props.get(core.$transparent-colors, $theme, --100), |
126 | --outline-label: props.get(core.$transparent-colors, $theme, --900), | 228 | ), |
127 | 229 | ), | |
128 | --hover: ( | ||
129 | --bg: props.get(core.$transparent-colors, $theme, --900), | ||
130 | --label: props.get(core.$transparent-colors, $theme, --text), | ||
131 | ), | ||
132 | 230 | ||
133 | --active: ( | 231 | --badge: ( |
134 | --bg: props.get(core.$transparent-colors, $theme, --900), | 232 | --bg-color: props.get(core.$transparent-colors, $theme, --200), |
135 | --label: props.get(core.$transparent-colors, $theme, --text), | 233 | --label-color: props.get(core.$transparent-colors, $theme, --900), |
136 | ), | 234 | --border-color: transparent, |
137 | ) | 235 | |
138 | ) | 236 | --hover: ( |
139 | )); | 237 | --bg-color: props.get(core.$transparent-colors, $theme, --300), |
238 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
239 | --border-color: transparent, | ||
240 | ), | ||
241 | |||
242 | --active: ( | ||
243 | --bg-color: props.get(core.$transparent-colors, $theme, --400), | ||
244 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
245 | --border-color: transparent, | ||
246 | ), | ||
247 | ), | ||
248 | |||
249 | --quiet: ( | ||
250 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
251 | |||
252 | --hover: ( | ||
253 | --bg-color: props.get(core.$transparent-colors, $theme, --200), | ||
254 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
255 | ), | ||
256 | |||
257 | --active: ( | ||
258 | --bg-color: props.get(core.$transparent-colors, $theme, --300), | ||
259 | --label-color: props.get(core.$transparent-colors, $theme, --900), | ||
260 | ), | ||
261 | |||
262 | --disabled: ( | ||
263 | --label-color: props.get(core.$transparent-colors, $theme, --500), | ||
264 | ), | ||
265 | ), | ||
266 | ) | ||
267 | )); | ||
140 | } | 268 | } |
141 | 269 | ||
142 | $themes-config: ( | 270 | $themes-config: ( |
143 | accent: --accent, | 271 | accent: --accent, |
144 | negative: --negative, | 272 | positive: --positive, |
273 | negative: --negative, | ||
274 | warning: --warning, | ||
145 | ) !default; | 275 | ) !default; |
146 | 276 | ||
147 | $themes: props.def(--o-button, (), 'color'); | ||
148 | |||
149 | @each $theme, $key in $themes-config { | 277 | @each $theme, $key in $themes-config { |
150 | $themes: props.merge($themes, ( | 278 | $themes: props.merge($themes, ( |
151 | --#{$theme}: ( | 279 | --#{$theme}: ( |
152 | --bg: props.get(core.$theme, #{$key}-static, --900), | 280 | --bg-color: props.get(core.$theme, $key, --100), |
153 | --label: props.get(core.$theme, #{$key}-static, --900-text), | 281 | --label-color: props.get(core.$theme, $key, --1100), |
154 | --outline-border: props.get(core.$theme, $key, --900), | 282 | --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), |
155 | --outline-label: props.get(core.$theme, $key, --1000), | 283 | --shadow-color: props.get(core.$theme, $key, --200), |
284 | |||
285 | --hover: ( | ||
286 | --bg-color: props.get(core.$theme, $key, --200), | ||
287 | --label-color: props.get(core.$theme, $key, --1200), | ||
288 | --border-color: props.get(core.$theme, $key, --600), | ||
289 | ), | ||
290 | |||
291 | --active: ( | ||
292 | --bg-color: props.get(core.$theme, $key, --300), | ||
293 | --label-color: props.get(core.$theme, $key, --1300), | ||
294 | --border-color: props.get(core.$theme, $key, --800), | ||
295 | ), | ||
296 | |||
297 | --disabled: ( | ||
298 | --bg-color: props.get(core.$theme, --bg-l1), | ||
299 | --label-color: props.get(core.$theme, --border-strong), | ||
300 | --border-color: props.get(core.$theme, --border), | ||
301 | ), | ||
302 | |||
303 | --key-focus: ( | ||
304 | --border-color: props.get(core.$theme, --focus, --border), | ||
305 | --outline-color: props.get(core.$theme, --focus, --outline), | ||
306 | ), | ||
307 | |||
308 | --highlighted: ( | ||
309 | --border-color: props.get(core.$theme, $key, --900), | ||
310 | --shadow-color: props.get(core.$theme, $key, --200), | ||
311 | ), | ||
312 | |||
313 | --selected: ( | ||
314 | --bg-color: props.get(core.$theme, #{$key}-static, --900), | ||
315 | --label-color: props.get(core.$theme, #{$key}-static, --900-text), | ||
316 | --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000), | ||
317 | |||
318 | --hover: ( | ||
319 | --bg-color: props.get(core.$theme, #{$key}-static, --1000), | ||
320 | --label-color: props.get(core.$theme, #{$key}-static, --1000-text), | ||
321 | --border-color: props.get(core.$theme, #{$key}-static, --1000), | ||
322 | ), | ||
323 | |||
324 | --active: ( | ||
325 | --bg-color: props.get(core.$theme, #{$key}-static, --1100), | ||
326 | --label-color: props.get(core.$theme, #{$key}-static, --1100-text), | ||
327 | --border-color: props.get(core.$theme, #{$key}-static, --1100), | ||
328 | ), | ||
329 | |||
330 | --disabled: ( | ||
331 | --bg-color: props.get(core.$theme, --border-mute), | ||
332 | --label-color: props.get(core.$theme, --border-strong), | ||
333 | --border-color: props.get(core.$theme, --border-mute), | ||
334 | ), | ||
335 | ), | ||
156 | 336 | ||
157 | --hover: ( | 337 | --badge: ( |
158 | --bg: props.get(core.$theme, #{$key}-static, --1000), | 338 | --bg-color: props.get(core.$theme, $key, --100), |
159 | --label: props.get(core.$theme, #{$key}-static, --1000-text), | 339 | --label-color: props.get(core.$theme, $key, --1100), |
160 | ), | 340 | --border-color: props.get(core.$theme, $key, --300), |
341 | |||
342 | --hover: ( | ||
343 | --bg-color: props.get(core.$theme, $key, --200), | ||
344 | --label-color: props.get(core.$theme, $key, --1200), | ||
345 | --border-color: props.get(core.$theme, $key, --400), | ||
346 | ), | ||
347 | |||
348 | --active: ( | ||
349 | --bg-color: props.get(core.$theme, $key, --300), | ||
350 | --label-color: props.get(core.$theme, $key, --1300), | ||
351 | --border-color: props.get(core.$theme, $key, --500), | ||
352 | ), | ||
353 | ), | ||
161 | 354 | ||
162 | --active: ( | 355 | --quiet: ( |
163 | --bg: props.get(core.$theme, #{$key}-static, --1100), | 356 | --label-color: props.get(core.$theme, $key, --1100), |
164 | --label: props.get(core.$theme, #{$key}-static, --1100-text), | 357 | |
165 | ), | 358 | --hover: ( |
166 | ) | 359 | --bg-color: props.get(core.$theme, $key, --200), |
167 | )); | 360 | --label-color: props.get(core.$theme, $key, --1200), |
361 | ), | ||
362 | |||
363 | --active: ( | ||
364 | --bg-color: props.get(core.$theme, $key, --300), | ||
365 | --label-color: props.get(core.$theme, $key, --1300), | ||
366 | ), | ||
367 | |||
368 | --disabled: ( | ||
369 | --label-color: props.get(core.$theme, --border-strong), | ||
370 | ), | ||
371 | ), | ||
372 | ) | ||
373 | )); | ||
168 | } | 374 | } |
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index e6f266d..ebab339 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -8,194 +8,270 @@ | |||
8 | @use 'card.vars' as vars; | 8 | @use 'card.vars' as vars; |
9 | 9 | ||
10 | @mixin styles { | 10 | @mixin styles { |
11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
12 | 12 | ||
13 | @include bem.object('card') { | 13 | @include bem.object('card') { |
14 | position: relative; | 14 | position: relative; |
15 | display: flex; | 15 | display: flex; |
16 | flex-direction: column; | 16 | flex-direction: column; |
17 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); | 17 | background-color: props.get(vars.$bg-color); |
18 | background-color: props.get(vars.$bg-color); | 18 | border: props.get(vars.$border-width) solid transparent; |
19 | background-clip: content-box; | 19 | border-color: props.get(vars.$border-color); |
20 | border: props.get(vars.$key-focus--border-offset) solid transparent; | 20 | border-radius: props.get(vars.$rounding); |
21 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | 21 | transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s; |
22 | transition: transform .2s; | ||
23 | 22 | ||
24 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 23 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
25 | &:hover, | 24 | &:hover, |
26 | &:active, | 25 | &:active, |
27 | &:focus-visible { | 26 | &:focus-visible { |
28 | transform: translateY(props.get(vars.$hover--offset-b)); | 27 | background-color: props.get(vars.$hover--bg-color); |
28 | border-color: props.get(vars.$hover--border-color); | ||
29 | box-shadow: none; | ||
30 | transform: translateY(props.get(vars.$hover--offset-b)); | ||
31 | } | ||
29 | 32 | ||
30 | @include bem.elem('body') { | 33 | &:focus-visible { |
31 | @include bem.modifier('hidden') { | 34 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
32 | visibility: visible; | 35 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
33 | opacity: 1; | 36 | border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent; |
34 | transition: | 37 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); |
35 | opacity .2s ease, | 38 | box-shadow: |
36 | visibility .2s linear; | 39 | 0 0 0 |
37 | } | 40 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
38 | } | 41 | props.get(vars.$key-focus--outline-color); |
39 | } | 42 | transition: transform .2s; |
43 | } | ||
44 | } | ||
40 | 45 | ||
41 | &:focus-visible { | 46 | @include bem.modifier('borderless') { |
42 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | 47 | border-color: props.get(vars.$bg-color); |
43 | box-shadow: | 48 | } |
44 | 0 | ||
45 | 0 | ||
46 | 0 | ||
47 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
48 | props.get(vars.$key-focus--outline-color); | ||
49 | } | ||
50 | } | ||
51 | 49 | ||
52 | @include bem.elem('avatar') { | 50 | @include bem.modifier('shadow') { |
53 | margin-block-start: props.get(vars.$pad-b); | 51 | box-shadow: |
54 | margin-inline-start: props.get(vars.$pad-i); | 52 | props.get(vars.$shadow-x) |
55 | } | 53 | props.get(vars.$shadow-y) |
54 | props.get(vars.$shadow-blur) | ||
55 | props.get(vars.$shadow-grow) | ||
56 | props.get(vars.$shadow-color); | ||
56 | 57 | ||
57 | @include bem.elem('image') { | 58 | @include bem.modifier('quiet') { |
58 | display: block; | 59 | @include bem.elem('image') { |
59 | flex: 0 0 auto; | 60 | box-shadow: |
60 | inline-size: 100%; | 61 | props.get(vars.$shadow-x) |
61 | object-fit: cover; | 62 | props.get(vars.$shadow-y) |
62 | transition: transform .2s, opacity .2s; | 63 | props.get(vars.$shadow-blur) |
64 | props.get(vars.$shadow-grow) | ||
65 | props.get(vars.$shadow-color); | ||
66 | } | ||
67 | } | ||
68 | } | ||
63 | 69 | ||
64 | &:first-child { | 70 | @include bem.elem('avatar') { |
65 | border-start-start-radius: props.get(vars.$rounding); | 71 | margin-block-start: props.get(vars.$pad-b); |
66 | border-start-end-radius: props.get(vars.$rounding); | 72 | margin-inline-start: props.get(vars.$pad-i); |
67 | } | 73 | } |
68 | 74 | ||
69 | &:last-child { | 75 | @include bem.elem('image') { |
70 | border-end-start-radius: props.get(vars.$rounding); | 76 | position: relative; |
71 | border-end-end-radius: props.get(vars.$rounding); | 77 | display: block; |
72 | } | 78 | flex: 0 0 auto; |
79 | inline-size: calc(100% + 2 * props.get(vars.$border-width)); | ||
80 | margin: calc(-1 * props.get(vars.$border-width)); | ||
81 | overflow: hidden; | ||
82 | object-fit: cover; | ||
83 | transition: background-color .2s, transform .2s, opacity .2s; | ||
73 | 84 | ||
74 | @include bem.next-elem('avatar') { | 85 | &:first-child { |
75 | margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); | 86 | border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); |
76 | } | 87 | border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); |
77 | } | 88 | } |
78 | 89 | ||
79 | @include bem.elem('body') { | 90 | &:last-child { |
80 | flex: 1 0 auto; | 91 | border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); |
81 | padding-block: props.get(vars.$pad-b); | 92 | border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); |
82 | padding-inline: props.get(vars.$pad-i); | 93 | } |
83 | 94 | ||
84 | &::before { | 95 | @include bem.next-elem('avatar') { |
85 | display: block; | 96 | margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); |
86 | margin-block: -100em 100em; | 97 | } |
87 | content: ''; | 98 | } |
88 | } | ||
89 | 99 | ||
90 | @include bem.modifier('hidden') { | 100 | @include bem.elem('image-img') { |
91 | position: absolute; | 101 | display: block; |
92 | inset-block-end: 0; | 102 | inline-size: 100%; |
93 | inset-inline: 0; | 103 | object-fit: cover; |
94 | z-index: 10; | 104 | } |
95 | visibility: hidden; | ||
96 | background-color: props.get(vars.$bg-color); | ||
97 | //border-end-start-radius: props.get(vars.$rounding); | ||
98 | //border-end-end-radius: props.get(vars.$rounding); | ||
99 | opacity: 0; | ||
100 | transition: | ||
101 | opacity .2s ease, | ||
102 | visibility 0s .2s linear; | ||
103 | 105 | ||
104 | @include bem.next-elem('image') { | 106 | @include bem.elem('image-overlay') { |
105 | border-start-start-radius: props.get(vars.$rounding); | 107 | position: absolute; |
106 | border-start-end-radius: props.get(vars.$rounding); | 108 | inset-block-end: 0; |
107 | } | 109 | inset-inline: 0; |
108 | } | 110 | z-index: 5; |
109 | } | 111 | padding-block: props.get(vars.$image-overlay--pad-b); |
112 | padding-inline: props.get(vars.$image-overlay--pad-i); | ||
113 | } | ||
110 | 114 | ||
111 | @include bem.elem('content') { | 115 | @include bem.elem('body') { |
112 | margin-block-start: props.get(vars.$spacing); | 116 | flex: 1 0 auto; |
113 | } | 117 | padding-block: props.get(vars.$pad-b); |
118 | padding-inline: props.get(vars.$pad-i); | ||
114 | 119 | ||
115 | @include bem.elem('footer') { | 120 | &::before { |
116 | flex: 0 0 auto; | 121 | display: block; |
117 | padding-block: 0 props.get(vars.$pad-b); | 122 | margin-block: -100em 100em; |
118 | padding-inline: props.get(vars.$pad-i); | 123 | content: ''; |
119 | margin-block-start: calc(-1 * props.get(vars.$pad-b)); | 124 | } |
125 | } | ||
120 | 126 | ||
121 | &::before { | 127 | @include bem.elem('content') { |
122 | display: block; | 128 | margin-block-start: props.get(vars.$spacing); |
123 | block-size: props.get(vars.$divider-width); | 129 | } |
124 | margin-block: props.get(vars.$spacing); | ||
125 | content: ''; | ||
126 | background-color: props.get(vars.$divider-width); | ||
127 | } | ||
128 | } | ||
129 | 130 | ||
130 | @include bem.modifier('quiet') { | 131 | @include bem.elem('footer') { |
131 | position: relative; | 132 | flex: 0 0 auto; |
132 | margin: 0; | 133 | padding-block: 0 props.get(vars.$pad-b); |
133 | background-color: transparent; | 134 | padding-inline: props.get(vars.$pad-i); |
134 | border: 0; | 135 | margin-block-start: calc(-1 * props.get(vars.$pad-b)); |
135 | 136 | ||
136 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | 137 | &::before { |
137 | &:hover, | 138 | display: block; |
138 | &:active, | 139 | block-size: props.get(vars.$divider-width); |
139 | &:focus-visible { | 140 | margin-block: props.get(vars.$spacing); |
140 | transform: none; | 141 | content: ''; |
142 | background-color: props.get(vars.$divider-width); | ||
143 | } | ||
144 | } | ||
141 | 145 | ||
142 | @include bem.elem('image') { | 146 | @include bem.modifier('quiet') { |
143 | background-color: props.get(vars.$quiet--hover--image-color); | 147 | margin-inline: 0; |
144 | opacity: .75; | 148 | background-color: transparent; |
145 | transform: translateY(props.get(vars.$hover--offset-b)); | 149 | border: 0; |
146 | } | 150 | box-shadow: none; |
147 | } | ||
148 | 151 | ||
149 | &:focus-visible { | 152 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { |
150 | outline: none; | 153 | &:hover, |
151 | box-shadow: none; | 154 | &:active, |
155 | &:focus-visible { | ||
156 | background-color: transparent; | ||
157 | transform: none; | ||
152 | 158 | ||
153 | @include bem.elem('image') { | 159 | @include bem.elem('image') { |
154 | background-color: props.get(vars.$quiet--hover--image-color); | 160 | background-color: props.get(vars.$quiet--hover--image-color); |
155 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | 161 | opacity: .75; |
156 | box-shadow: | 162 | transform: translateY(props.get(vars.$hover--offset-b)); |
157 | 0 | 163 | } |
158 | 0 | 164 | } |
159 | 0 | ||
160 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
161 | props.get(vars.$key-focus--outline-color); | ||
162 | opacity: 1; | ||
163 | } | ||
164 | } | ||
165 | } | ||
166 | 165 | ||
167 | @include bem.elem('image') { | 166 | &:focus-visible { |
168 | position: relative; | 167 | margin: 0; |
169 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); | 168 | outline: none; |
170 | background-color: props.get(vars.$quiet--image-color); | 169 | border: 0; |
171 | background-clip: padding-box; | 170 | box-shadow: none; |
172 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
173 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
174 | } | ||
175 | 171 | ||
176 | @include bem.elem('body') { | 172 | @include bem.elem('image') { |
177 | padding: 0; | 173 | margin: calc(-1 * props.get(vars.$key-focus--border-width)); |
178 | padding-block-start: props.get(vars.$spacing); | 174 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
179 | } | 175 | background-color: props.get(vars.$quiet--hover--image-color); |
176 | border: props.get(vars.$key-focus--border-offset) solid transparent; | ||
177 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
178 | box-shadow: | ||
179 | 0 | ||
180 | 0 | ||
181 | 0 | ||
182 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
183 | props.get(vars.$key-focus--outline-color); | ||
184 | opacity: 1; | ||
185 | } | ||
186 | } | ||
187 | } | ||
180 | 188 | ||
181 | @include bem.elem('footer') { | 189 | @include bem.elem('image') { |
182 | padding-inline: 0; | 190 | position: relative; |
183 | } | 191 | background-color: props.get(vars.$quiet--image-color); |
184 | } | 192 | background-clip: padding-box; |
193 | border-radius: props.get(vars.$rounding); | ||
194 | } | ||
185 | 195 | ||
186 | @include bem.modifier('horizontal') { | 196 | @include bem.elem('body') { |
187 | flex-direction: row; | 197 | padding: 0; |
188 | align-items: center; | 198 | padding-block-start: props.get(vars.$spacing); |
199 | } | ||
189 | 200 | ||
190 | @include bem.elem('body') { | 201 | @include bem.elem('footer') { |
191 | flex: 0 0 auto; | 202 | padding-inline: 0; |
203 | } | ||
204 | } | ||
192 | 205 | ||
193 | @include bem.modifier('main') { | 206 | @include bem.modifier('thumbnail') { |
194 | flex-shrink: 1; | 207 | @include bem.elem('image') { |
195 | inline-size: 100%; | 208 | border-radius: props.get(vars.$rounding); |
196 | min-inline-size: 0; | 209 | } |
197 | } | 210 | |
198 | } | 211 | @include bem.elem('body') { |
199 | } | 212 | position: absolute; |
200 | } | 213 | inset-block-end: calc(-1 * props.get(vars.$border-width)); |
214 | inset-inline: calc(-1 * props.get(vars.$border-width)); | ||
215 | z-index: 10; | ||
216 | visibility: hidden; | ||
217 | background-color: props.get(vars.$hover--bg-color); | ||
218 | border-color: transparent; | ||
219 | border-style: solid; | ||
220 | border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); | ||
221 | border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); | ||
222 | border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); | ||
223 | opacity: 0; | ||
224 | transition: | ||
225 | border-color .2s ease, | ||
226 | opacity .2s ease, | ||
227 | visibility 0s .2s linear; | ||
228 | } | ||
229 | |||
230 | @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { | ||
231 | &:hover, | ||
232 | &:active, | ||
233 | &:focus-visible { | ||
234 | @include bem.elem('body') { | ||
235 | visibility: visible; | ||
236 | border-color: props.get(vars.$hover--border-color); | ||
237 | opacity: 1; | ||
238 | transition: | ||
239 | border-color .2s ease, | ||
240 | opacity .2s ease, | ||
241 | visibility .2s linear; | ||
242 | } | ||
243 | } | ||
244 | } | ||
245 | } | ||
246 | |||
247 | @include bem.modifier('horizontal') { | ||
248 | flex-direction: row; | ||
249 | align-items: center; | ||
250 | |||
251 | @include bem.elem('image') { | ||
252 | align-self: stretch; | ||
253 | inline-size: auto; | ||
254 | |||
255 | &:first-child { | ||
256 | border-start-end-radius: 0; | ||
257 | border-end-start-radius: props.get(vars.$rounding); | ||
258 | } | ||
259 | |||
260 | &:last-child { | ||
261 | border-start-end-radius: props.get(vars.$rounding); | ||
262 | border-end-start-radius: 0; | ||
263 | } | ||
264 | } | ||
265 | |||
266 | @include bem.elem('body') { | ||
267 | flex: 0 0 auto; | ||
268 | |||
269 | @include bem.modifier('main') { | ||
270 | flex-shrink: 1; | ||
271 | inline-size: 100%; | ||
272 | min-inline-size: 0; | ||
273 | } | ||
274 | } | ||
275 | } | ||
276 | } | ||
201 | } | 277 | } |
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index 8ee7158..ebfba10 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss | |||
@@ -2,21 +2,35 @@ | |||
2 | @use 'iro-sass/src/props'; | 2 | @use 'iro-sass/src/props'; |
3 | @use '../core.vars' as core; | 3 | @use '../core.vars' as core; |
4 | 4 | ||
5 | $divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; | 5 | $divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; |
6 | $pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; | 6 | $border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default; |
7 | $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; | 7 | $sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default; |
8 | $spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; | 8 | $pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; |
9 | $rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; | 9 | $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; |
10 | $spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; | ||
11 | $rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; | ||
12 | $image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default; | ||
13 | $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default; | ||
10 | 14 | ||
11 | $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; | 15 | $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; |
12 | 16 | ||
17 | $shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default; | ||
18 | $shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default; | ||
19 | $shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default; | ||
20 | $shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default; | ||
21 | |||
13 | $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 22 | $key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; |
14 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | 23 | $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; |
15 | $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | 24 | $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; |
16 | 25 | ||
26 | $shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default; | ||
17 | $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | 27 | $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; |
28 | $border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; | ||
18 | $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; | 29 | $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; |
19 | 30 | ||
31 | $hover--bg-color: props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default; | ||
32 | $hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default; | ||
33 | |||
20 | $key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; | 34 | $key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; |
21 | $key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | 35 | $key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; |
22 | $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | 36 | $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; |
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 82dd596..5faafb9 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss | |||
@@ -9,223 +9,223 @@ | |||
9 | @use 'checkbox.vars' as vars; | 9 | @use 'checkbox.vars' as vars; |
10 | 10 | ||
11 | @mixin styles { | 11 | @mixin styles { |
12 | @include materialize-at-root(meta.module-variables('vars')); | 12 | @include materialize-at-root(meta.module-variables('vars')); |
13 | 13 | ||
14 | @include bem.object('checkbox') { | 14 | @include bem.object('checkbox') { |
15 | position: relative; | 15 | position: relative; |
16 | display: inline-block; | 16 | display: inline-block; |
17 | padding-block: props.get(vars.$pad-b); | 17 | padding-block: props.get(vars.$pad-b); |
18 | padding-inline: props.get(vars.$pad-i); | 18 | padding-inline: props.get(vars.$pad-i); |
19 | margin-inline: | 19 | margin-inline: |
20 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) | 20 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
21 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); | 21 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); |
22 | 22 | ||
23 | @include bem.elem('box') { | 23 | @include bem.elem('box') { |
24 | position: relative; | 24 | position: relative; |
25 | display: inline-block; | 25 | display: inline-block; |
26 | flex: 0 0 auto; | 26 | flex: 0 0 auto; |
27 | inline-size: props.get(vars.$size); | 27 | inline-size: props.get(vars.$size); |
28 | block-size: props.get(vars.$size); | 28 | block-size: props.get(vars.$size); |
29 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); | 29 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); |
30 | vertical-align: top; | 30 | vertical-align: top; |
31 | background-color: props.get(vars.$box-border-color); | 31 | background-color: props.get(vars.$box-border-color); |
32 | background-clip: padding-box; | 32 | background-clip: padding-box; |
33 | border: props.get(vars.$key-focus--border-offset) solid transparent; | 33 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
34 | border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); | 34 | border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); |
35 | 35 | ||
36 | &::before, | 36 | &::before, |
37 | &::after { | 37 | &::after { |
38 | position: absolute; | 38 | position: absolute; |
39 | display: block; | 39 | display: block; |
40 | content: ''; | 40 | content: ''; |
41 | } | 41 | } |
42 | 42 | ||
43 | &::before { | 43 | &::before { |
44 | inset-block-start: props.get(vars.$border-width); | 44 | inset-block-start: props.get(vars.$border-width); |
45 | inset-inline-start: props.get(vars.$border-width); | 45 | inset-inline-start: props.get(vars.$border-width); |
46 | z-index: 2; | 46 | z-index: 2; |
47 | inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); | 47 | inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); |
48 | block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); | 48 | block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); |
49 | background-color: props.get(vars.$box-bg-color); | 49 | background-color: props.get(vars.$box-bg-color); |
50 | transition: transform .2s ease; | 50 | transition: transform .2s ease; |
51 | } | 51 | } |
52 | 52 | ||
53 | &::after { | 53 | &::after { |
54 | inset-block-start: calc(.5 * props.get(vars.$size) - 1px); | 54 | inset-block-start: calc(.5 * props.get(vars.$size) - 1px); |
55 | inset-inline-start: calc(1.5 * props.get(vars.$border-width)); | 55 | inset-inline-start: calc(1.5 * props.get(vars.$border-width)); |
56 | z-index: 3; | 56 | z-index: 3; |
57 | box-sizing: border-box; | 57 | box-sizing: border-box; |
58 | inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); | 58 | inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); |
59 | block-size: 0; | 59 | block-size: 0; |
60 | border-color: props.get(vars.$box-bg-color); | 60 | border-color: props.get(vars.$box-bg-color); |
61 | border-style: solid; | 61 | border-style: solid; |
62 | border-radius: 2px; | 62 | border-radius: 2px; |
63 | transition: transform .2s ease; | 63 | transform: scale(0); |
64 | transform: scale(0); | 64 | transition: transform .2s ease; |
65 | border-block-width: 0 2px; | 65 | border-block-width: 0 2px; |
66 | border-inline-width: 0 2px; | 66 | border-inline-width: 0 2px; |
67 | } | 67 | } |
68 | } | 68 | } |
69 | 69 | ||
70 | @include bem.elem('check-icon') { | 70 | @include bem.elem('check-icon') { |
71 | position: absolute; | 71 | position: absolute; |
72 | inset-block-start: calc(1 * props.get(vars.$border-width)); | 72 | inset-block-start: calc(1 * props.get(vars.$border-width)); |
73 | inset-inline-start: calc(1 * props.get(vars.$border-width)); | 73 | inset-inline-start: calc(1 * props.get(vars.$border-width)); |
74 | z-index: 2; | 74 | z-index: 2; |
75 | display: block; | 75 | display: block; |
76 | inline-size: calc(100% - 2 * props.get(vars.$border-width)); | 76 | inline-size: calc(100% - 2 * props.get(vars.$border-width)); |
77 | block-size: calc(100% - 2 * props.get(vars.$border-width)); | 77 | block-size: calc(100% - 2 * props.get(vars.$border-width)); |
78 | margin: 0; | 78 | margin: 0; |
79 | color: props.get(vars.$box-bg-color); | 79 | color: props.get(vars.$box-bg-color); |
80 | stroke-width: fn.px-to-rem(3px); | 80 | stroke-width: fn.px-to-rem(3px); |
81 | transition: transform .2s ease; | 81 | transform: scale(0); |
82 | transform: scale(0); | 82 | transform-origin: 40% 90%; |
83 | transform-origin: 40% 90%; | 83 | transition: transform .2s ease; |
84 | } | 84 | } |
85 | 85 | ||
86 | @include bem.elem('label') { | 86 | @include bem.elem('label') { |
87 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); | 87 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); |
88 | } | 88 | } |
89 | 89 | ||
90 | @include bem.elem('native') { | 90 | @include bem.elem('native') { |
91 | position: absolute; | 91 | position: absolute; |
92 | inset-block-start: 0; | 92 | inset-block-start: 0; |
93 | inset-inline-start: 0; | 93 | inset-inline-start: 0; |
94 | z-index: -1; | 94 | z-index: -1; |
95 | inline-size: 100%; | 95 | inline-size: 100%; |
96 | block-size: 100%; | 96 | block-size: 100%; |
97 | padding: 0; | 97 | padding: 0; |
98 | margin: 0; | 98 | margin: 0; |
99 | overflow: hidden; | 99 | overflow: hidden; |
100 | appearance: none; | 100 | appearance: none; |
101 | border-radius: props.get(vars.$rounding); | 101 | border-radius: props.get(vars.$rounding); |
102 | 102 | ||
103 | &:hover, | 103 | &:hover, |
104 | &:focus-visible { | 104 | &:focus-visible { |
105 | @include bem.sibling-elem('label') { | 105 | @include bem.sibling-elem('label') { |
106 | color: props.get(vars.$hover--label-color); | 106 | color: props.get(vars.$hover--label-color); |
107 | } | 107 | } |
108 | 108 | ||
109 | @include bem.sibling-elem('box') { | 109 | @include bem.sibling-elem('box') { |
110 | background-color: props.get(vars.$hover--box-border-color); | 110 | background-color: props.get(vars.$hover--box-border-color); |
111 | } | 111 | } |
112 | } | 112 | } |
113 | 113 | ||
114 | &:checked { | 114 | &:checked { |
115 | @include bem.sibling-elem('box') { | 115 | @include bem.sibling-elem('box') { |
116 | &::before { | 116 | &::before { |
117 | transform: scale(0); | 117 | transform: scale(0); |
118 | } | 118 | } |
119 | 119 | ||
120 | @include bem.elem('check-icon') { | 120 | @include bem.elem('check-icon') { |
121 | transform: scale(1); | 121 | transform: scale(1); |
122 | } | 122 | } |
123 | } | 123 | } |
124 | } | 124 | } |
125 | 125 | ||
126 | &:indeterminate { | 126 | &:indeterminate { |
127 | @include bem.sibling-elem('box') { | 127 | @include bem.sibling-elem('box') { |
128 | &::before { | 128 | &::before { |
129 | transform: scale(0); | 129 | transform: scale(0); |
130 | } | 130 | } |
131 | 131 | ||
132 | &::after { | 132 | &::after { |
133 | transform: scale(1); | 133 | transform: scale(1); |
134 | } | 134 | } |
135 | 135 | ||
136 | @include bem.elem('check-icon') { | 136 | @include bem.elem('check-icon') { |
137 | transform: scale(0); | 137 | transform: scale(0); |
138 | } | 138 | } |
139 | } | 139 | } |
140 | } | 140 | } |
141 | 141 | ||
142 | &:disabled { | 142 | &:disabled { |
143 | @include bem.sibling-elem('label') { | 143 | @include bem.sibling-elem('label') { |
144 | color: props.get(vars.$disabled--label-color); | 144 | color: props.get(vars.$disabled--label-color); |
145 | } | 145 | } |
146 | 146 | ||
147 | @include bem.sibling-elem('box') { | 147 | @include bem.sibling-elem('box') { |
148 | background-color: props.get(vars.$disabled--box-border-color); | 148 | background-color: props.get(vars.$disabled--box-border-color); |
149 | 149 | ||
150 | &::before { | 150 | &::before { |
151 | background-color: props.get(vars.$disabled--box-bg-color); | 151 | background-color: props.get(vars.$disabled--box-bg-color); |
152 | } | 152 | } |
153 | } | 153 | } |
154 | } | 154 | } |
155 | 155 | ||
156 | &:focus-visible { | 156 | &:focus-visible { |
157 | @include bem.sibling-elem('label') { | 157 | @include bem.sibling-elem('label') { |
158 | color: props.get(vars.$key-focus--label-color); | 158 | color: props.get(vars.$key-focus--label-color); |
159 | } | 159 | } |
160 | 160 | ||
161 | @include bem.sibling-elem('box') { | 161 | @include bem.sibling-elem('box') { |
162 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | 162 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
163 | box-shadow: | 163 | box-shadow: |
164 | 0 | 164 | 0 |
165 | 0 | 165 | 0 |
166 | 0 | 166 | 0 |
167 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 167 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
168 | props.get(vars.$key-focus--outline-color); | 168 | props.get(vars.$key-focus--outline-color); |
169 | } | 169 | } |
170 | } | 170 | } |
171 | } | 171 | } |
172 | 172 | ||
173 | @include bem.modifier('standalone') { | 173 | @include bem.modifier('standalone') { |
174 | @include bem.elem('box') { | 174 | @include bem.elem('box') { |
175 | margin-block-start: 0; | 175 | margin-block-start: 0; |
176 | } | 176 | } |
177 | } | 177 | } |
178 | 178 | ||
179 | @include bem.modifier('accent') { | 179 | @include bem.modifier('accent') { |
180 | @include bem.elem('native') { | 180 | @include bem.elem('native') { |
181 | &:checked { | 181 | &:checked { |
182 | @include bem.sibling-elem('box') { | 182 | @include bem.sibling-elem('box') { |
183 | background-color: props.get(vars.$accent--box-border-color); | 183 | background-color: props.get(vars.$accent--box-border-color); |
184 | } | 184 | } |
185 | 185 | ||
186 | &:hover, | 186 | &:hover, |
187 | &:focus-visible { | 187 | &:focus-visible { |
188 | @include bem.sibling-elem('box') { | 188 | @include bem.sibling-elem('box') { |
189 | background-color: props.get(vars.$accent--hover--box-border-color); | 189 | background-color: props.get(vars.$accent--hover--box-border-color); |
190 | } | 190 | } |
191 | } | 191 | } |
192 | } | 192 | } |
193 | 193 | ||
194 | &:indeterminate { | 194 | &:indeterminate { |
195 | @include bem.sibling-elem('box') { | 195 | @include bem.sibling-elem('box') { |
196 | background-color: props.get(vars.$accent--box-border-color); | 196 | background-color: props.get(vars.$accent--box-border-color); |
197 | } | 197 | } |
198 | 198 | ||
199 | &:hover, | 199 | &:hover, |
200 | &:focus-visible { | 200 | &:focus-visible { |
201 | @include bem.sibling-elem('box') { | 201 | @include bem.sibling-elem('box') { |
202 | background-color: props.get(vars.$accent--hover--box-border-color); | 202 | background-color: props.get(vars.$accent--hover--box-border-color); |
203 | } | 203 | } |
204 | } | 204 | } |
205 | } | 205 | } |
206 | 206 | ||
207 | &:disabled { | 207 | &:disabled { |
208 | @include bem.sibling-elem('box') { | 208 | @include bem.sibling-elem('box') { |
209 | background-color: props.get(vars.$disabled--box-border-color); | 209 | background-color: props.get(vars.$disabled--box-border-color); |
210 | 210 | ||
211 | &::before { | 211 | &::before { |
212 | background-color: props.get(vars.$disabled--box-bg-color); | 212 | background-color: props.get(vars.$disabled--box-bg-color); |
213 | } | 213 | } |
214 | } | 214 | } |
215 | 215 | ||
216 | &:checked { | 216 | &:checked { |
217 | @include bem.sibling-elem('box') { | 217 | @include bem.sibling-elem('box') { |
218 | background-color: props.get(vars.$disabled--box-border-color); | 218 | background-color: props.get(vars.$disabled--box-border-color); |
219 | } | 219 | } |
220 | } | 220 | } |
221 | 221 | ||
222 | &:indeterminate { | 222 | &:indeterminate { |
223 | @include bem.sibling-elem('box') { | 223 | @include bem.sibling-elem('box') { |
224 | background-color: props.get(vars.$disabled--box-border-color); | 224 | background-color: props.get(vars.$disabled--box-border-color); |
225 | } | 225 | } |
226 | } | 226 | } |
227 | } | 227 | } |
228 | } | 228 | } |
229 | } | 229 | } |
230 | } | 230 | } |
231 | } | 231 | } |
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss index aee26e6..25a0d3d 100644 --- a/src/objects/_checkbox.vars.scss +++ b/src/objects/_checkbox.vars.scss | |||
@@ -7,7 +7,7 @@ $label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) | |||
7 | $border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; | 7 | $border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default; |
8 | $pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; | 8 | $pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default; |
9 | $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; | 9 | $pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default; |
10 | $rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default; | 10 | $rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default; |
11 | $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; | 11 | $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default; |
12 | 12 | ||
13 | $key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 13 | $key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; |
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 65f1718..27af173 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss | |||
@@ -10,138 +10,195 @@ | |||
10 | @use 'divider.vars' as vars; | 10 | @use 'divider.vars' as vars; |
11 | 11 | ||
12 | @mixin styles { | 12 | @mixin styles { |
13 | @include materialize-at-root(meta.module-variables('vars')); | 13 | @include materialize-at-root(meta.module-variables('vars')); |
14 | 14 | ||
15 | @include bem.object('divider') { | 15 | @include bem.object('divider') { |
16 | display: flex; | 16 | display: flex; |
17 | flex: 0 0 auto; | 17 | flex: 0 0 auto; |
18 | flex-direction: row; | 18 | flex-direction: row; |
19 | align-items: center; | 19 | align-items: center; |
20 | block-size: 1em; | 20 | block-size: 1em; |
21 | margin-block: props.get(vars.$margin-b); | 21 | margin-block: props.get(vars.$margin-b); |
22 | font-size: props.get(vars.$strong--label-font-size); | 22 | font-size: props.get(vars.$strong--label-font-size); |
23 | font-weight: 700; | 23 | font-weight: 700; |
24 | line-height: 1; | 24 | line-height: 1; |
25 | color: props.get(vars.$strong--label-color); | 25 | color: props.get(vars.$strong--label-color); |
26 | text-transform: uppercase; | 26 | text-transform: uppercase; |
27 | letter-spacing: .5px; | 27 | letter-spacing: .5px; |
28 | background-color: transparent; | 28 | background-color: transparent; |
29 | 29 | ||
30 | &::before, | 30 | &::before, |
31 | &::after { | 31 | &::after { |
32 | flex: 1 1 auto; | 32 | flex: 1 1 auto; |
33 | inline-size: 100%; | 33 | inline-size: 100%; |
34 | block-size: props.get(vars.$strong--border-width); | 34 | block-size: props.get(vars.$strong--border-width); |
35 | content: ''; | 35 | content: ''; |
36 | background-color: props.get(vars.$strong--bg-color); | 36 | background-color: props.get(vars.$strong--bg-color); |
37 | } | 37 | } |
38 | 38 | ||
39 | &::before { | 39 | &::before { |
40 | display: block; | 40 | display: block; |
41 | } | 41 | } |
42 | 42 | ||
43 | @include bem.elem('label') { | 43 | @include bem.elem('label') { |
44 | flex: 0 0 auto; | 44 | flex: 0 0 auto; |
45 | } | 45 | } |
46 | 46 | ||
47 | @include bem.modifier('vertical') { | 47 | @include bem.modifier('vertical') { |
48 | align-self: stretch; | 48 | align-self: stretch; |
49 | inline-size: 1px; | 49 | inline-size: props.get(vars.$vertical--border-width); |
50 | block-size: auto; | 50 | block-size: auto; |
51 | margin-block: 0; | 51 | margin-block: 0; |
52 | background-color: props.get(vars.$faint--bg-color); | 52 | background-color: props.get(vars.$strong--bg-color); |
53 | 53 | ||
54 | &::before, | 54 | &::before, |
55 | &::after { | 55 | &::after { |
56 | display: none; | 56 | display: none; |
57 | } | 57 | } |
58 | } | 58 | } |
59 | 59 | ||
60 | @include bem.modifier('medium') { | 60 | @include bem.modifier('dot') { |
61 | font-size: props.get(vars.$medium--label-font-size); | 61 | align-self: center; |
62 | font-weight: 500; | 62 | inline-size: props.get(vars.$dot--size); |
63 | color: props.get(vars.$medium--label-color); | 63 | block-size: props.get(vars.$dot--size); |
64 | margin-block: 0; | ||
65 | background-color: props.get(vars.$strong--bg-color); | ||
66 | border-radius: props.get(vars.$dot--size); | ||
64 | 67 | ||
65 | &::before, | 68 | &::before, |
66 | &::after { | 69 | &::after { |
67 | block-size: props.get(vars.$medium--border-width); | 70 | display: none; |
68 | background-color: props.get(vars.$medium--bg-color); | 71 | } |
69 | } | 72 | } |
70 | } | ||
71 | 73 | ||
72 | @include bem.modifier('faint') { | 74 | @include bem.modifier('medium') { |
73 | font-size: props.get(vars.$faint--label-font-size); | 75 | font-size: props.get(vars.$medium--label-font-size); |
74 | font-weight: 500; | 76 | font-weight: 500; |
75 | color: props.get(vars.$faint--label-color); | 77 | color: props.get(vars.$medium--label-color); |
76 | 78 | ||
77 | &::before, | 79 | &::before, |
78 | &::after { | 80 | &::after { |
79 | block-size: props.get(vars.$faint--border-width); | 81 | block-size: props.get(vars.$medium--border-width); |
80 | background-color: props.get(vars.$faint--bg-color); | 82 | background-color: props.get(vars.$medium--bg-color); |
81 | } | 83 | } |
82 | 84 | ||
83 | @include bem.modifier('vertical') { | 85 | @include bem.modifier('vertical') { |
84 | background-color: props.get(vars.$vertical--faint--bg-color); | 86 | background-color: props.get(vars.$medium--bg-color); |
85 | } | 87 | } |
86 | } | ||
87 | 88 | ||
88 | @include bem.modifier('labelled') { | 89 | @include bem.modifier('dot') { |
89 | &::before { | 90 | background-color: props.get(vars.$medium--bg-color); |
90 | margin-inline-end: 1em; | 91 | } |
91 | } | 92 | } |
92 | 93 | ||
93 | &::after { | 94 | @include bem.modifier('quiet') { |
94 | display: block; | 95 | font-size: props.get(vars.$quiet--label-font-size); |
95 | margin-inline-start: 1em; | 96 | font-weight: 500; |
96 | } | 97 | color: props.get(vars.$quiet--label-color); |
97 | } | ||
98 | 98 | ||
99 | @each $theme in map.keys(props.get(vars.$themes)) { | 99 | &::before, |
100 | @include bem.modifier(string.slice($theme, 3)) { | 100 | &::after { |
101 | &::before, | 101 | block-size: props.get(vars.$quiet--border-width); |
102 | &::after { | 102 | background-color: props.get(vars.$quiet--bg-color); |
103 | background-color: props.get(vars.$themes, $theme, --bg); | 103 | } |
104 | } | ||
105 | 104 | ||
106 | @include bem.elem('label') { | 105 | @include bem.modifier('vertical') { |
107 | color: props.get(vars.$themes, $theme, --label); | 106 | background-color: props.get(vars.$vertical--quiet--bg-color); |
108 | } | 107 | } |
109 | } | ||
110 | } | ||
111 | 108 | ||
112 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 109 | @include bem.modifier('dot') { |
113 | @include bem.modifier(string.slice($theme, 3)) { | 110 | background-color: props.get(vars.$dot--quiet--bg-color); |
114 | &::before, | 111 | } |
115 | &::after { | 112 | } |
116 | background-color: props.get(vars.$static-themes, $theme, --strong, --bg); | ||
117 | } | ||
118 | 113 | ||
119 | @include bem.elem('label') { | 114 | @include bem.modifier('faint') { |
120 | color: props.get(vars.$static-themes, $theme, --strong, --label); | 115 | font-size: props.get(vars.$faint--label-font-size); |
121 | } | 116 | font-weight: 500; |
117 | color: props.get(vars.$faint--label-color); | ||
122 | 118 | ||
123 | @include bem.modifier('medium') { | 119 | &::before, |
124 | &::before, | 120 | &::after { |
125 | &::after { | 121 | block-size: props.get(vars.$faint--border-width); |
126 | background-color: props.get(vars.$static-themes, $theme, --medium, --bg); | 122 | background-color: props.get(vars.$faint--bg-color); |
127 | } | 123 | } |
124 | |||
125 | @include bem.modifier('vertical') { | ||
126 | background-color: props.get(vars.$vertical--quiet--bg-color); | ||
127 | } | ||
128 | |||
129 | @include bem.modifier('dot') { | ||
130 | background-color: props.get(vars.$dot--quiet--bg-color); | ||
131 | } | ||
132 | } | ||
133 | |||
134 | @include bem.modifier('labelled') { | ||
135 | &::before { | ||
136 | margin-inline-end: 1em; | ||
137 | } | ||
138 | |||
139 | &::after { | ||
140 | display: block; | ||
141 | margin-inline-start: 1em; | ||
142 | } | ||
143 | } | ||
144 | |||
145 | @each $theme in map.keys(props.get(vars.$themes)) { | ||
146 | @include bem.modifier(string.slice($theme, 3)) { | ||
147 | &::before, | ||
148 | &::after { | ||
149 | background-color: props.get(vars.$themes, $theme, --bg); | ||
150 | } | ||
151 | |||
152 | @include bem.elem('label') { | ||
153 | color: props.get(vars.$themes, $theme, --label); | ||
154 | } | ||
155 | } | ||
156 | } | ||
157 | |||
158 | @each $theme in map.keys(props.get(vars.$static-themes)) { | ||
159 | @include bem.modifier(string.slice($theme, 3)) { | ||
160 | &::before, | ||
161 | &::after { | ||
162 | background-color: props.get(vars.$static-themes, $theme, --strong, --bg); | ||
163 | } | ||
164 | |||
165 | @include bem.elem('label') { | ||
166 | color: props.get(vars.$static-themes, $theme, --strong, --label); | ||
167 | } | ||
168 | |||
169 | @include bem.modifier('medium') { | ||
170 | &::before, | ||
171 | &::after { | ||
172 | background-color: props.get(vars.$static-themes, $theme, --medium, --bg); | ||
173 | } | ||
174 | |||
175 | @include bem.elem('label') { | ||
176 | color: props.get(vars.$static-themes, $theme, --medium, --label); | ||
177 | } | ||
178 | } | ||
179 | |||
180 | @include bem.modifier('quiet') { | ||
181 | &::before, | ||
182 | &::after { | ||
183 | background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); | ||
184 | } | ||
128 | 185 | ||
129 | @include bem.elem('label') { | 186 | @include bem.elem('label') { |
130 | color: props.get(vars.$static-themes, $theme, --medium, --label); | 187 | color: props.get(vars.$static-themes, $theme, --quiet, --label); |
131 | } | 188 | } |
132 | } | 189 | } |
133 | 190 | ||
134 | @include bem.modifier('faint') { | 191 | @include bem.modifier('faint') { |
135 | &::before, | 192 | &::before, |
136 | &::after { | 193 | &::after { |
137 | background-color: props.get(vars.$static-themes, $theme, --faint, --bg); | 194 | background-color: props.get(vars.$static-themes, $theme, --faint, --bg); |
138 | } | 195 | } |
139 | 196 | ||
140 | @include bem.elem('label') { | 197 | @include bem.elem('label') { |
141 | color: props.get(vars.$static-themes, $theme, --faint, --label); | 198 | color: props.get(vars.$static-themes, $theme, --faint, --label); |
142 | } | 199 | } |
143 | } | 200 | } |
144 | } | 201 | } |
145 | } | 202 | } |
146 | } | 203 | } |
147 | } | 204 | } |
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 1117fd5..688fbb3 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss | |||
@@ -3,7 +3,9 @@ | |||
3 | @use 'iro-sass/src/props'; | 3 | @use 'iro-sass/src/props'; |
4 | @use '../core.vars' as core; | 4 | @use '../core.vars' as core; |
5 | 5 | ||
6 | $margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; | 6 | $margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; |
7 | $vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default; | ||
8 | $dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default; | ||
7 | 9 | ||
8 | $strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; | 10 | $strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; |
9 | $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; | 11 | $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; |
@@ -11,6 +13,9 @@ $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props. | |||
11 | $medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; | 13 | $medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; |
12 | $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; | 14 | $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; |
13 | 15 | ||
16 | $quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default; | ||
17 | $quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default; | ||
18 | |||
14 | $faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; | 19 | $faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; |
15 | $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; | 20 | $faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; |
16 | 21 | ||
@@ -20,46 +25,55 @@ $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core | |||
20 | $medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; | 25 | $medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; |
21 | $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; | 26 | $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; |
22 | 27 | ||
23 | $faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; | 28 | $quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default; |
24 | $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; | 29 | $quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; |
30 | |||
31 | $faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
32 | $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default; | ||
33 | |||
34 | $vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
25 | 35 | ||
26 | $vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | 36 | $dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default; |
27 | 37 | ||
28 | $static-themes: props.def(--o-divider, (), 'color'); | 38 | $static-themes: props.def(--o-divider, (), 'color'); |
29 | 39 | ||
30 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | 40 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
31 | $button-theme: --static-#{string.slice($theme, 3)}; | 41 | $button-theme: --static-#{string.slice($theme, 3)}; |
32 | 42 | ||
33 | $static-themes: props.merge($static-themes, ( | 43 | $static-themes: props.merge($static-themes, ( |
34 | $button-theme: ( | 44 | $button-theme: ( |
35 | --strong: ( | 45 | --strong: ( |
36 | --bg: props.get(core.$transparent-colors, $theme, --800), | 46 | --bg: props.get(core.$transparent-colors, $theme, --800), |
37 | --label: props.get(core.$transparent-colors, $theme, --900), | 47 | --label: props.get(core.$transparent-colors, $theme, --900), |
38 | ), | 48 | ), |
39 | --medium: ( | 49 | --medium: ( |
40 | --bg: props.get(core.$transparent-colors, $theme, --300), | 50 | --bg: props.get(core.$transparent-colors, $theme, --300), |
41 | --label: props.get(core.$transparent-colors, $theme, --500), | 51 | --label: props.get(core.$transparent-colors, $theme, --500), |
42 | ), | 52 | ), |
43 | --faint: ( | 53 | --quiet: ( |
44 | --bg: props.get(core.$transparent-colors, $theme, --300), | 54 | --bg: props.get(core.$transparent-colors, $theme, --300), |
45 | --label: props.get(core.$transparent-colors, $theme, --500), | 55 | --label: props.get(core.$transparent-colors, $theme, --500), |
46 | ), | 56 | ), |
47 | ) | 57 | --faint: ( |
48 | )); | 58 | --bg: props.get(core.$transparent-colors, $theme, --200), |
59 | --label: props.get(core.$transparent-colors, $theme, --400), | ||
60 | ), | ||
61 | ) | ||
62 | )); | ||
49 | } | 63 | } |
50 | 64 | ||
51 | $themes-config: ( | 65 | $themes-config: ( |
52 | accent: --accent, | 66 | accent: --accent, |
53 | negative: --negative, | 67 | negative: --negative, |
54 | ) !default; | 68 | ) !default; |
55 | 69 | ||
56 | $themes: props.def(--o-divider, (), 'color'); | 70 | $themes: props.def(--o-divider, (), 'color'); |
57 | 71 | ||
58 | @each $theme, $key in $themes-config { | 72 | @each $theme, $key in $themes-config { |
59 | $themes: props.merge($themes, ( | 73 | $themes: props.merge($themes, ( |
60 | --#{$theme}: ( | 74 | --#{$theme}: ( |
61 | --bg: props.get(core.$theme, $key, --800), | 75 | --bg: props.get(core.$theme, $key, --800), |
62 | --label: props.get(core.$theme, $key, --1000), | 76 | --label: props.get(core.$theme, $key, --1000), |
63 | ) | 77 | ) |
64 | )); | 78 | )); |
65 | } | 79 | } |
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss index ce2dfa7..fd36535 100644 --- a/src/objects/_emoji.scss +++ b/src/objects/_emoji.scss | |||
@@ -8,43 +8,43 @@ | |||
8 | @use 'emoji.vars' as vars; | 8 | @use 'emoji.vars' as vars; |
9 | 9 | ||
10 | @mixin styles { | 10 | @mixin styles { |
11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
12 | 12 | ||
13 | @include bem.object('emoji') { | 13 | @include bem.object('emoji') { |
14 | position: relative; | 14 | position: relative; |
15 | display: inline-block; | 15 | display: inline-block; |
16 | inline-size: calc(props.get(vars.$size)); | 16 | inline-size: calc(props.get(vars.$size)); |
17 | block-size: calc(props.get(vars.$size)); | 17 | block-size: calc(props.get(vars.$size)); |
18 | padding: calc(props.get(vars.$pad)); | 18 | padding: calc(props.get(vars.$pad)); |
19 | margin: calc(-1 * props.get(vars.$pad)); | 19 | margin: calc(-1 * props.get(vars.$pad)); |
20 | vertical-align: props.get(vars.$valign); | 20 | vertical-align: props.get(vars.$valign); |
21 | object-fit: contain; | 21 | object-fit: contain; |
22 | 22 | ||
23 | @include bem.modifier('icon') { | 23 | @include bem.modifier('icon') { |
24 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); | 24 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); |
25 | vertical-align: props.get(icon.$valign); | 25 | vertical-align: props.get(icon.$valign); |
26 | } | 26 | } |
27 | 27 | ||
28 | @each $mod, $size, $valign in vars.$sizes { | 28 | @each $mod, $size, $valign in vars.$sizes { |
29 | @include bem.modifier($mod) { | 29 | @include bem.modifier($mod) { |
30 | inline-size: props.get($size); | 30 | inline-size: props.get($size); |
31 | block-size: props.get($size); | 31 | block-size: props.get($size); |
32 | vertical-align: props.get($valign); | 32 | vertical-align: props.get($valign); |
33 | 33 | ||
34 | @include bem.modifier('icon') { | 34 | @include bem.modifier('icon') { |
35 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); | 35 | margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); |
36 | } | 36 | } |
37 | } | 37 | } |
38 | } | 38 | } |
39 | 39 | ||
40 | @include bem.modifier('zoomable') { | 40 | @include bem.modifier('zoomable') { |
41 | border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); | 41 | border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); |
42 | transition: transform .2s ease, background-color .2s ease; | 42 | transition: transform .2s ease, background-color .2s ease; |
43 | 43 | ||
44 | &:hover { | 44 | &:hover { |
45 | background-color: props.get(vars.$bg-color); | 45 | background-color: props.get(vars.$bg-color); |
46 | transform: scale(props.get(vars.$zoom)); | 46 | transform: scale(props.get(vars.$zoom)); |
47 | } | 47 | } |
48 | } | 48 | } |
49 | } | 49 | } |
50 | } | 50 | } |
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss index fbfb935..b7a8a43 100644 --- a/src/objects/_emoji.vars.scss +++ b/src/objects/_emoji.vars.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | 4 | ||
5 | $size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; | 5 | $size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; |
6 | $pad: props.def(--o-emoji--pad, .3em) !default; | 6 | $pad: props.def(--o-emoji--pad, .3em) !default; |
7 | $rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default; | 7 | $rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default; |
8 | $zoom: props.def(--o-emoji--zoom, 3) !default; | 8 | $zoom: props.def(--o-emoji--zoom, 3) !default; |
9 | $valign: props.def(--o-emoji--valign, -.25em) !default; | 9 | $valign: props.def(--o-emoji--valign, -.25em) !default; |
10 | 10 | ||
@@ -18,9 +18,9 @@ $size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default; | |||
18 | $valign--200: props.def(--o-emoji--200--valign, -1em) !default; | 18 | $valign--200: props.def(--o-emoji--200--valign, -1em) !default; |
19 | 19 | ||
20 | $sizes: ( | 20 | $sizes: ( |
21 | '125' $size--125 $valign--125, | 21 | '125' $size--125 $valign--125, |
22 | '150' $size--150 $valign--150, | 22 | '150' $size--150 $valign--150, |
23 | '200' $size--200 $valign--200, | 23 | '200' $size--200 $valign--200, |
24 | ) !default; | 24 | ) !default; |
25 | 25 | ||
26 | $bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | 26 | $bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; |
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 564ab2b..aa12eb5 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
@@ -7,70 +7,70 @@ | |||
7 | @use 'field-label.vars' as vars; | 7 | @use 'field-label.vars' as vars; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include bem.object('field-label') { | 12 | @include bem.object('field-label') { |
13 | @include bem.elem('label') { | 13 | @include bem.elem('label') { |
14 | display: block; | 14 | display: block; |
15 | flex: 0 0 auto; | 15 | flex: 0 0 auto; |
16 | padding-inline-end: props.get(vars.$spacing-i); | 16 | padding-inline-end: props.get(vars.$spacing-i); |
17 | font-size: props.get(vars.$label-font-size); | 17 | font-size: props.get(vars.$label-font-size); |
18 | font-weight: 400; | 18 | font-weight: 400; |
19 | line-height: 1.3; | 19 | line-height: 1.3; |
20 | color: props.get(vars.$label-color); | 20 | color: props.get(vars.$label-color); |
21 | 21 | ||
22 | @include bem.next-elem('content') { | 22 | @include bem.next-elem('content') { |
23 | margin-block-start: props.get(vars.$spacing-b); | 23 | margin-block-start: props.get(vars.$spacing-b); |
24 | } | 24 | } |
25 | } | 25 | } |
26 | 26 | ||
27 | @include bem.elem('content') { | 27 | @include bem.elem('content') { |
28 | display: block; | 28 | display: block; |
29 | flex: 1 1 auto; | 29 | flex: 1 1 auto; |
30 | } | 30 | } |
31 | 31 | ||
32 | @include bem.elem('hint') { | 32 | @include bem.elem('hint') { |
33 | display: block; | 33 | display: block; |
34 | margin-block-start: props.get(vars.$spacing-b); | 34 | margin-block-start: props.get(vars.$spacing-b); |
35 | font-size: props.get(vars.$hint-font-size); | 35 | font-size: props.get(vars.$hint-font-size); |
36 | color: props.get(vars.$hint-color); | 36 | color: props.get(vars.$hint-color); |
37 | } | 37 | } |
38 | 38 | ||
39 | @include bem.is('invalid') { | 39 | @include bem.is('invalid') { |
40 | @include bem.elem('hint') { | 40 | @include bem.elem('hint') { |
41 | color: props.get(vars.$error-hint-color); | 41 | color: props.get(vars.$error-hint-color); |
42 | } | 42 | } |
43 | } | 43 | } |
44 | 44 | ||
45 | @include bem.is('disabled') { | 45 | @include bem.is('disabled') { |
46 | @include bem.elem('label', 'hint') { | 46 | @include bem.elem('label', 'hint') { |
47 | color: props.get(vars.$disabled-color); | 47 | color: props.get(vars.$disabled-color); |
48 | } | 48 | } |
49 | } | 49 | } |
50 | 50 | ||
51 | @include bem.modifier('align-start', 'align-end') { | 51 | @include bem.modifier('align-start', 'align-end') { |
52 | display: flex; | 52 | display: flex; |
53 | align-items: baseline; | 53 | align-items: baseline; |
54 | 54 | ||
55 | @include bem.elem('label') { | 55 | @include bem.elem('label') { |
56 | display: inline-block; | 56 | display: inline-block; |
57 | 57 | ||
58 | @include bem.next-elem('content') { | 58 | @include bem.next-elem('content') { |
59 | margin-block-start: 0; | 59 | margin-block-start: 0; |
60 | } | 60 | } |
61 | } | 61 | } |
62 | } | 62 | } |
63 | 63 | ||
64 | @include bem.modifier('align-start') { | 64 | @include bem.modifier('align-start') { |
65 | @include bem.elem('label') { | 65 | @include bem.elem('label') { |
66 | text-align: start; | 66 | text-align: start; |
67 | } | 67 | } |
68 | } | 68 | } |
69 | 69 | ||
70 | @include bem.modifier('align-end') { | 70 | @include bem.modifier('align-end') { |
71 | @include bem.elem('label') { | 71 | @include bem.elem('label') { |
72 | text-align: end; | 72 | text-align: end; |
73 | } | 73 | } |
74 | } | 74 | } |
75 | } | 75 | } |
76 | } | 76 | } |
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss new file mode 100644 index 0000000..27e0f6a --- /dev/null +++ b/src/objects/_figure.scss | |||
@@ -0,0 +1,26 @@ | |||
1 | @use 'sass:meta'; | ||
2 | @use 'iro-sass/src/bem'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | @use '../props' as *; | ||
5 | |||
6 | @forward 'figure.vars'; | ||
7 | @use 'figure.vars' as vars; | ||
8 | |||
9 | @mixin styles { | ||
10 | @include materialize-at-root(meta.module-variables('vars')); | ||
11 | |||
12 | @include bem.object('figure') { | ||
13 | @include bem.elem('caption') { | ||
14 | padding-block: props.get(vars.$pad-b); | ||
15 | font-size: props.get(vars.$font-size); | ||
16 | color: props.get(vars.$text-color); | ||
17 | border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); | ||
18 | |||
19 | &::before { | ||
20 | display: block; | ||
21 | margin-block: -100em 100em; | ||
22 | content: ''; | ||
23 | } | ||
24 | } | ||
25 | } | ||
26 | } | ||
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss new file mode 100644 index 0000000..78f5d15 --- /dev/null +++ b/src/objects/_figure.vars.scss | |||
@@ -0,0 +1,9 @@ | |||
1 | @use 'iro-sass/src/props'; | ||
2 | @use '../core.vars' as core; | ||
3 | |||
4 | $pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default; | ||
5 | $border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default; | ||
6 | $font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default; | ||
7 | |||
8 | $text-color: props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default; | ||
9 | $border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default; | ||
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index f5932f5..d27b595 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
@@ -7,54 +7,54 @@ | |||
7 | @use 'heading.vars' as vars; | 7 | @use 'heading.vars' as vars; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include bem.object('heading') { | 12 | @include bem.object('heading') { |
13 | display: block; | 13 | display: block; |
14 | margin-block-start: props.get(vars.$margin-bs); | 14 | margin-block-start: props.get(vars.$margin-bs); |
15 | font-family: props.get(vars.$font-family); | 15 | font-family: props.get(vars.$font-family); |
16 | font-weight: props.get(vars.$font-weight); | 16 | font-weight: props.get(vars.$font-weight); |
17 | font-feature-settings: props.get(vars.$feature-settings); | 17 | font-feature-settings: props.get(vars.$feature-settings); |
18 | line-height: props.get(vars.$line-height); | 18 | line-height: props.get(vars.$line-height); |
19 | color: props.get(vars.$text-color); | 19 | color: props.get(vars.$text-color); |
20 | text-transform: none; | 20 | text-transform: none; |
21 | letter-spacing: normal; | 21 | letter-spacing: normal; |
22 | transform: translateX(props.get(vars.$offset)); | ||
23 | 22 | ||
24 | & + & { | 23 | & + & { |
25 | margin-block-start: props.get(vars.$margin-bs-sibling); | 24 | margin-block-start: props.get(vars.$margin-bs-sibling); |
26 | } | 25 | } |
27 | 26 | ||
28 | @include bem.elem('highlight') { | 27 | @include bem.elem('highlight') { |
29 | background-image: linear-gradient(to top, | 28 | background-image: linear-gradient(to top, |
30 | transparent .05em, | 29 | transparent .05em, |
31 | props.get(vars.$bg-color) .05em, | 30 | props.get(vars.$bg-color) .05em, |
32 | props.get(vars.$bg-color) .5em, | 31 | props.get(vars.$bg-color) .5em, |
33 | transparent .5em); | 32 | transparent .5em); |
34 | } | 33 | } |
35 | 34 | ||
36 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { | 35 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { |
37 | @include bem.modifier($mod) { | 36 | @include bem.modifier($mod) { |
38 | font-family: props.get($font-family); | 37 | font-family: props.get($font-family); |
39 | font-size: props.get($font-size); | 38 | font-size: props.get($font-size); |
40 | font-weight: props.get($font-weight); | 39 | font-weight: props.get($font-weight); |
41 | font-feature-settings: props.get($feature-settings); | 40 | font-feature-settings: props.get($feature-settings); |
42 | line-height: props.get($line-height); | 41 | line-height: props.get($line-height); |
43 | letter-spacing: props.get($letter-spacing); | 42 | letter-spacing: props.get($letter-spacing); |
44 | } | 43 | } |
45 | } | 44 | } |
46 | 45 | ||
47 | @include bem.modifier('display') { | 46 | @include bem.modifier('display') { |
48 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { | 47 | @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { |
49 | @include bem.modifier($mod) { | 48 | @include bem.modifier($mod) { |
50 | font-family: props.get($font-family); | 49 | font-family: props.get($font-family); |
51 | font-size: props.get($font-size); | 50 | font-size: props.get($font-size); |
52 | font-weight: props.get($font-weight); | 51 | font-weight: props.get($font-weight); |
53 | font-feature-settings: props.get($feature-settings); | 52 | font-feature-settings: props.get($feature-settings); |
54 | line-height: props.get($line-height); | 53 | line-height: props.get($line-height); |
55 | letter-spacing: props.get($letter-spacing); | 54 | letter-spacing: props.get($letter-spacing); |
56 | } | 55 | transform: translateX(props.get(vars.$offset)); |
57 | } | 56 | } |
58 | } | 57 | } |
59 | } | 58 | } |
59 | } | ||
60 | } | 60 | } |
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index 90278c8..1d6df26 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss | |||
@@ -56,12 +56,12 @@ $letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; | |||
56 | $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; | 56 | $feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default; |
57 | 57 | ||
58 | $sizes: ( | 58 | $sizes: ( |
59 | 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, | 59 | 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, |
60 | 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, | 60 | 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm, |
61 | 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, | 61 | 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md, |
62 | 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, | 62 | 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg, |
63 | 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, | 63 | 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl, |
64 | 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, | 64 | 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl, |
65 | ) !default; | 65 | ) !default; |
66 | 66 | ||
67 | $display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; | 67 | $display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; |
@@ -114,10 +114,10 @@ $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, pro | |||
114 | $display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; | 114 | $display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default; |
115 | 115 | ||
116 | $display--sizes: ( | 116 | $display--sizes: ( |
117 | 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs, | 117 | 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs, |
118 | 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm, | 118 | 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm, |
119 | 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md, | 119 | 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md, |
120 | 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg, | 120 | 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg, |
121 | 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl, | 121 | 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl, |
122 | 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl, | 122 | 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl, |
123 | ) !default; | 123 | ) !default; |
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index 187938e..1941960 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss | |||
@@ -7,19 +7,19 @@ | |||
7 | @use 'icon.vars' as vars; | 7 | @use 'icon.vars' as vars; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include bem.object('icon') { | 12 | @include bem.object('icon') { |
13 | display: inline; | 13 | display: inline; |
14 | inline-size: props.get(vars.$size); | 14 | inline-size: props.get(vars.$size); |
15 | block-size: props.get(vars.$size); | 15 | block-size: props.get(vars.$size); |
16 | vertical-align: props.get(vars.$valign); | 16 | vertical-align: props.get(vars.$valign); |
17 | stroke-linecap: round; | 17 | stroke-width: props.get(vars.$stroke-width); |
18 | stroke-linejoin: round; | 18 | stroke-linecap: round; |
19 | stroke-width: props.get(vars.$stroke-width); | 19 | stroke-linejoin: round; |
20 | 20 | ||
21 | @include bem.modifier('block') { | 21 | @include bem.modifier('block') { |
22 | display: block; | 22 | display: block; |
23 | } | 23 | } |
24 | } | 24 | } |
25 | } | 25 | } |
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index b62c353..b95148f 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss | |||
@@ -9,127 +9,127 @@ | |||
9 | @use 'lightbox.vars' as vars; | 9 | @use 'lightbox.vars' as vars; |
10 | 10 | ||
11 | @mixin styles { | 11 | @mixin styles { |
12 | @include materialize-at-root(meta.module-variables('vars')); | 12 | @include materialize-at-root(meta.module-variables('vars')); |
13 | 13 | ||
14 | @include bem.object('lightbox') { | 14 | @include bem.object('lightbox') { |
15 | flex: 1 1 auto; | 15 | flex: 1 1 auto; |
16 | min-block-size: 0; | 16 | min-block-size: 0; |
17 | 17 | ||
18 | @include bem.elem('header') { | 18 | @include bem.elem('header') { |
19 | display: flex; | 19 | display: flex; |
20 | grid-area: header; | 20 | grid-area: header; |
21 | align-items: flex-start; | 21 | align-items: flex-start; |
22 | padding-block-start: props.get(vars.$pad); | 22 | padding-block-start: props.get(vars.$pad); |
23 | padding-inline: props.get(vars.$pad); | 23 | padding-inline: props.get(vars.$pad); |
24 | } | 24 | } |
25 | 25 | ||
26 | @include bem.elem('img') { | 26 | @include bem.elem('img') { |
27 | box-sizing: border-box; | 27 | box-sizing: border-box; |
28 | display: block; | 28 | display: block; |
29 | grid-area: content; | 29 | grid-area: content; |
30 | place-self: center; | 30 | place-self: center; |
31 | inline-size: auto; | 31 | inline-size: auto; |
32 | max-inline-size: 100%; | 32 | max-inline-size: 100%; |
33 | block-size: auto; | 33 | block-size: auto; |
34 | max-block-size: props.get(vars.$image--max-height); | 34 | max-block-size: props.get(vars.$image--max-height); |
35 | padding: props.get(vars.$pad); | 35 | padding: props.get(vars.$pad); |
36 | margin-inline: auto; | 36 | margin-inline: auto; |
37 | border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); | 37 | border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); |
38 | } | 38 | } |
39 | 39 | ||
40 | @include bem.elem('thumbnails') { | 40 | @include bem.elem('thumbnails') { |
41 | display: none; | 41 | display: none; |
42 | grid-area: thumbnails; | 42 | grid-area: thumbnails; |
43 | gap: props.get(vars.$thumbnails--spacing); | 43 | gap: props.get(vars.$thumbnails--spacing); |
44 | padding: props.get(vars.$pad); | 44 | padding: props.get(vars.$pad); |
45 | margin-block-start: calc(-1 * props.get(vars.$pad)); | 45 | margin-block-start: calc(-1 * props.get(vars.$pad)); |
46 | overflow: auto; | 46 | overflow: auto; |
47 | } | 47 | } |
48 | 48 | ||
49 | @include bem.elem('close-btn') { | 49 | @include bem.elem('close-btn') { |
50 | display: none; | 50 | display: none; |
51 | flex: 0 0 auto; | 51 | flex: 0 0 auto; |
52 | margin-block-start: calc(-.5 * props.get(vars.$pad)); | 52 | margin-block-start: calc(-.5 * props.get(vars.$pad)); |
53 | margin-inline: auto calc(-.5 * props.get(vars.$pad)); | 53 | margin-inline: auto calc(-.5 * props.get(vars.$pad)); |
54 | font-size: props.get(vars.$close-button--font-size); | 54 | font-size: props.get(vars.$close-button--font-size); |
55 | } | 55 | } |
56 | 56 | ||
57 | @include bem.elem('nav-btn') { | 57 | @include bem.elem('nav-btn') { |
58 | position: relative; | 58 | position: relative; |
59 | display: none; | 59 | display: none; |
60 | align-self: center; | 60 | align-self: center; |
61 | overflow: visible; | 61 | overflow: visible; |
62 | font-size: props.get(vars.$nav-button--font-size); | 62 | font-size: props.get(vars.$nav-button--font-size); |
63 | 63 | ||
64 | &::before { | 64 | &::before { |
65 | position: absolute; | 65 | position: absolute; |
66 | inset-block-start: 50%; | 66 | inset-block-start: 50%; |
67 | display: block; | 67 | display: block; |
68 | inline-size: props.get(vars.$nav-button--inline-size); | 68 | inline-size: props.get(vars.$nav-button--inline-size); |
69 | block-size: props.get(vars.$nav-button--block-size); | 69 | block-size: props.get(vars.$nav-button--block-size); |
70 | content: ''; | 70 | content: ''; |
71 | transform: translateY(-50%); | 71 | transform: translateY(-50%); |
72 | } | 72 | } |
73 | 73 | ||
74 | @include bem.modifier('prev') { | 74 | @include bem.modifier('prev') { |
75 | grid-area: prev; | 75 | grid-area: prev; |
76 | margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); | 76 | margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); |
77 | 77 | ||
78 | &::before { | 78 | &::before { |
79 | inset-inline-start: 0; | 79 | inset-inline-start: 0; |
80 | } | 80 | } |
81 | } | 81 | } |
82 | 82 | ||
83 | @include bem.modifier('next') { | 83 | @include bem.modifier('next') { |
84 | grid-area: next; | 84 | grid-area: next; |
85 | margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); | 85 | margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); |
86 | 86 | ||
87 | &::before { | 87 | &::before { |
88 | inset-inline-end: 0; | 88 | inset-inline-end: 0; |
89 | } | 89 | } |
90 | } | 90 | } |
91 | } | 91 | } |
92 | 92 | ||
93 | @include bem.modifier('interactive') { | 93 | @include bem.modifier('interactive') { |
94 | display: grid; | 94 | display: grid; |
95 | grid-template-areas: | 95 | grid-template-areas: |
96 | 'header header header' | 96 | 'header header header' |
97 | 'prev content next' | 97 | 'prev content next' |
98 | 'thumbnails thumbnails thumbnails'; | 98 | 'thumbnails thumbnails thumbnails'; |
99 | grid-template-rows: auto minmax(0, 1fr) auto auto; | 99 | grid-template-rows: auto minmax(0, 1fr) auto auto; |
100 | grid-template-columns: auto minmax(0, 1fr) auto; | 100 | grid-template-columns: auto minmax(0, 1fr) auto; |
101 | 101 | ||
102 | @include bem.modifier('fullscreen') { | 102 | @include bem.modifier('fullscreen') { |
103 | block-size: props.get(vars.$fullscreen--height); | 103 | block-size: props.get(vars.$fullscreen--height); |
104 | } | 104 | } |
105 | 105 | ||
106 | @include bem.elem('img') { | 106 | @include bem.elem('img') { |
107 | display: none; | 107 | display: none; |
108 | max-block-size: 100%; | 108 | max-block-size: 100%; |
109 | margin-inline: 0; | 109 | margin-inline: 0; |
110 | 110 | ||
111 | @include bem.multi('&:target', 'is' 'visible') { | 111 | @include bem.multi('&:target', 'is' 'visible') { |
112 | display: block; | 112 | display: block; |
113 | } | 113 | } |
114 | } | 114 | } |
115 | 115 | ||
116 | @include bem.elem('thumbnails') { | 116 | @include bem.elem('thumbnails') { |
117 | display: flex; | 117 | display: flex; |
118 | } | 118 | } |
119 | 119 | ||
120 | @include bem.elem('close-btn') { | 120 | @include bem.elem('close-btn') { |
121 | display: block; | 121 | display: block; |
122 | } | 122 | } |
123 | 123 | ||
124 | @include bem.elem('nav-btn') { | 124 | @include bem.elem('nav-btn') { |
125 | display: block; | 125 | display: block; |
126 | } | 126 | } |
127 | } | 127 | } |
128 | 128 | ||
129 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 129 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
130 | @include bem.modifier(string.slice($theme, 3)) { | 130 | @include bem.modifier(string.slice($theme, 3)) { |
131 | color: props.get(vars.$static-themes, $theme, --text); | 131 | color: props.get(vars.$static-themes, $theme, --text); |
132 | } | 132 | } |
133 | } | 133 | } |
134 | } | 134 | } |
135 | } | 135 | } |
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index cc926e4..6d22aa8 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss | |||
@@ -23,11 +23,11 @@ $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(cor | |||
23 | $static-themes: props.def(--o-lightbox, (), 'color'); | 23 | $static-themes: props.def(--o-lightbox, (), 'color'); |
24 | 24 | ||
25 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | 25 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
26 | $lightbox-theme: --static-#{string.slice($theme, 3)}; | 26 | $lightbox-theme: --static-#{string.slice($theme, 3)}; |
27 | 27 | ||
28 | $static-themes: props.merge($static-themes, ( | 28 | $static-themes: props.merge($static-themes, ( |
29 | $lightbox-theme: ( | 29 | $lightbox-theme: ( |
30 | --text: props.get(core.$transparent-colors, $theme, --800), | 30 | --text: props.get(core.$transparent-colors, $theme, --800), |
31 | ) | 31 | ) |
32 | )); | 32 | )); |
33 | } | 33 | } |
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 4d31874..f370067 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss | |||
@@ -8,95 +8,95 @@ | |||
8 | @use 'menu.vars' as vars; | 8 | @use 'menu.vars' as vars; |
9 | 9 | ||
10 | @mixin styles { | 10 | @mixin styles { |
11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
12 | 12 | ||
13 | @include bem.object('menu') { | 13 | @include bem.object('menu') { |
14 | display: flex; | 14 | display: flex; |
15 | flex-direction: column; | 15 | flex-direction: column; |
16 | gap: props.get(vars.$spacing); | 16 | gap: props.get(vars.$spacing); |
17 | 17 | ||
18 | @include bem.elem('header') { | 18 | @include bem.elem('header') { |
19 | padding-block: props.get(vars.$item--pad-b); | 19 | padding-block: props.get(vars.$item--pad-b); |
20 | padding-inline: props.get(vars.$item--pad-i); | 20 | padding-inline: props.get(vars.$item--pad-i); |
21 | font-size: props.get(vars.$header--font-size); | 21 | font-size: props.get(vars.$header--font-size); |
22 | font-weight: 500; | 22 | font-weight: 500; |
23 | color: props.get(vars.$header--label-color); | 23 | color: props.get(vars.$header--label-color); |
24 | text-transform: uppercase; | 24 | text-transform: uppercase; |
25 | letter-spacing: .5px; | 25 | letter-spacing: .5px; |
26 | 26 | ||
27 | @include bem.next-twin-elem { | 27 | @include bem.next-twin-elem { |
28 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); | 28 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); |
29 | } | 29 | } |
30 | } | 30 | } |
31 | 31 | ||
32 | @include bem.elem('item') { | 32 | @include bem.elem('item') { |
33 | padding-block: props.get(vars.$item--pad-b); | 33 | padding-block: props.get(vars.$item--pad-b); |
34 | padding-inline: props.get(vars.$item--pad-i); | 34 | padding-inline: props.get(vars.$item--pad-i); |
35 | margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); | 35 | margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); |
36 | color: props.get(vars.$item--disabled--label-color); | 36 | color: props.get(vars.$item--disabled--label-color); |
37 | background-clip: padding-box; | 37 | background-clip: padding-box; |
38 | border: props.get(vars.$item--key-focus--outline-width) solid transparent; | 38 | border: props.get(vars.$item--key-focus--outline-width) solid transparent; |
39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); | 39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); |
40 | 40 | ||
41 | &:link, | 41 | &:link, |
42 | &:visited, | 42 | &:visited, |
43 | &:enabled { | 43 | &:enabled { |
44 | color: currentColor; | 44 | color: currentColor; |
45 | 45 | ||
46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { | 46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { |
47 | color: props.get(vars.$item--hover--label-color); | 47 | color: props.get(vars.$item--hover--label-color); |
48 | background-color: props.get(vars.$item--hover--bg-color); | 48 | background-color: props.get(vars.$item--hover--bg-color); |
49 | } | 49 | } |
50 | 50 | ||
51 | &:active { | 51 | &:active { |
52 | color: props.get(vars.$item--active--label-color); | 52 | color: props.get(vars.$item--active--label-color); |
53 | background-color: props.get(vars.$item--active--bg-color); | 53 | background-color: props.get(vars.$item--active--bg-color); |
54 | } | 54 | } |
55 | 55 | ||
56 | &:focus-visible { | 56 | &:focus-visible { |
57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); | 57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
58 | box-shadow: | 58 | box-shadow: |
59 | 0 | 59 | 0 |
60 | 0 | 60 | 0 |
61 | 0 | 61 | 0 |
62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | 62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) |
63 | props.get(vars.$item--key-focus--outline-color); | 63 | props.get(vars.$item--key-focus--outline-color); |
64 | } | 64 | } |
65 | } | 65 | } |
66 | 66 | ||
67 | @include bem.next-elem('header') { | 67 | @include bem.next-elem('header') { |
68 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); | 68 | margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); |
69 | } | 69 | } |
70 | } | 70 | } |
71 | 71 | ||
72 | @include bem.elem('header') { | 72 | @include bem.elem('header') { |
73 | &:link, | 73 | &:link, |
74 | &:visited, | 74 | &:visited, |
75 | &:enabled { | 75 | &:enabled { |
76 | color: props.get(vars.$header--label-color); | 76 | color: props.get(vars.$header--label-color); |
77 | } | 77 | } |
78 | } | 78 | } |
79 | 79 | ||
80 | @include bem.elem('separator') { | 80 | @include bem.elem('separator') { |
81 | block-size: 1px; | 81 | block-size: 1px; |
82 | margin-block: props.get(vars.$separator-width); | 82 | margin-block: props.get(vars.$separator-width); |
83 | margin-inline: props.get(vars.$item--pad-i); | 83 | margin-inline: props.get(vars.$item--pad-i); |
84 | background-color: props.get(vars.$separator-color); | 84 | background-color: props.get(vars.$separator-color); |
85 | } | 85 | } |
86 | 86 | ||
87 | @include bem.elem('slot') { | 87 | @include bem.elem('slot') { |
88 | padding-block: props.get(vars.$item--pad-b); | 88 | padding-block: props.get(vars.$item--pad-b); |
89 | padding-inline: props.get(vars.$item--pad-i); | 89 | padding-inline: props.get(vars.$item--pad-i); |
90 | } | 90 | } |
91 | 91 | ||
92 | @include bem.elem('icon-slot') { | 92 | @include bem.elem('icon-slot') { |
93 | display: flex; | 93 | display: flex; |
94 | justify-content: center; | 94 | justify-content: center; |
95 | inline-size: props.get(icon.$size); | 95 | inline-size: props.get(icon.$size); |
96 | } | 96 | } |
97 | 97 | ||
98 | @include bem.modifier('pull') { | 98 | @include bem.modifier('pull') { |
99 | margin: calc(-1 * props.get(vars.$item--pad-i)); | 99 | margin: calc(-1 * props.get(vars.$item--pad-i)); |
100 | } | 100 | } |
101 | } | 101 | } |
102 | } | 102 | } |
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss index 59d4c51..ec03c62 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss | |||
@@ -9,183 +9,183 @@ | |||
9 | @use 'navbar.vars' as vars; | 9 | @use 'navbar.vars' as vars; |
10 | 10 | ||
11 | @mixin styles { | 11 | @mixin styles { |
12 | @include materialize-at-root(meta.module-variables('vars')); | 12 | @include materialize-at-root(meta.module-variables('vars')); |
13 | 13 | ||
14 | @include bem.object('navbar') { | 14 | @include bem.object('navbar') { |
15 | display: flex; | 15 | display: flex; |
16 | block-size: props.get(vars.$block-size); | 16 | block-size: props.get(vars.$block-size); |
17 | 17 | ||
18 | @include bem.elem('item-content-text') { | 18 | @include bem.elem('item-content-text') { |
19 | margin-inline: props.get(vars.$item--pad-i-label); | 19 | margin-inline: props.get(vars.$item--pad-i-label); |
20 | } | 20 | } |
21 | 21 | ||
22 | @include bem.elem('item-content') { | 22 | @include bem.elem('item-content') { |
23 | position: relative; | 23 | position: relative; |
24 | padding-block: props.get(vars.$item--pad-b); | 24 | padding-block: props.get(vars.$item--pad-b); |
25 | padding-inline: props.get(vars.$item--pad-i); | 25 | padding-inline: props.get(vars.$item--pad-i); |
26 | font-size: props.get(vars.$item--font-size); | 26 | font-size: props.get(vars.$item--font-size); |
27 | color: currentColor; | 27 | color: currentColor; |
28 | white-space: nowrap; | 28 | white-space: nowrap; |
29 | border-radius: 100em; | 29 | border-radius: 100em; |
30 | 30 | ||
31 | &::after { | 31 | &::after { |
32 | position: absolute; | 32 | position: absolute; |
33 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | 33 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); |
34 | z-index: -10; | 34 | z-index: -10; |
35 | display: block; | 35 | display: block; |
36 | pointer-events: none; | 36 | visibility: hidden; |
37 | visibility: hidden; | 37 | pointer-events: none; |
38 | content: ''; | 38 | outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); |
39 | border-radius: 100em; | 39 | content: ''; |
40 | outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); | 40 | border-radius: 100em; |
41 | box-shadow: | 41 | box-shadow: |
42 | 0 | 42 | 0 |
43 | 0 | 43 | 0 |
44 | 0 | 44 | 0 |
45 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 45 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
46 | props.get(vars.$default-theme, --key-focus, --outline); | 46 | props.get(vars.$default-theme, --key-focus, --outline); |
47 | } | 47 | } |
48 | } | 48 | } |
49 | 49 | ||
50 | @include bem.elem('item') { | 50 | @include bem.elem('item') { |
51 | display: flex; | 51 | display: flex; |
52 | flex-direction: column; | 52 | flex-direction: column; |
53 | align-items: center; | 53 | align-items: center; |
54 | justify-content: center; | 54 | justify-content: center; |
55 | inline-size: 100%; | 55 | inline-size: 100%; |
56 | padding-inline: calc(.5 * props.get(vars.$spacing)); | 56 | padding-inline: calc(.5 * props.get(vars.$spacing)); |
57 | font-weight: 500; | 57 | font-weight: 500; |
58 | color: props.get(vars.$default-theme, --disabled, --label-color); | 58 | color: props.get(vars.$default-theme, --disabled, --label-color); |
59 | 59 | ||
60 | &:link, | 60 | &:link, |
61 | &:visited, | 61 | &:visited, |
62 | &:enabled { | 62 | &:enabled { |
63 | color: props.get(vars.$default-theme, --label-color); | 63 | color: props.get(vars.$default-theme, --label-color); |
64 | 64 | ||
65 | &:hover, | 65 | &:hover, |
66 | &:focus-visible { | 66 | &:focus-visible { |
67 | color: props.get(vars.$default-theme, --hover, --label-color); | 67 | color: props.get(vars.$default-theme, --hover, --label-color); |
68 | 68 | ||
69 | @include bem.elem('item-content') { | 69 | @include bem.elem('item-content') { |
70 | background-color: props.get(vars.$default-theme, --hover, --bg-color); | 70 | background-color: props.get(vars.$default-theme, --hover, --bg-color); |
71 | } | 71 | } |
72 | } | 72 | } |
73 | 73 | ||
74 | &:focus-visible { | 74 | &:focus-visible { |
75 | @include bem.elem('item-content') { | 75 | @include bem.elem('item-content') { |
76 | &::after { | 76 | &::after { |
77 | visibility: visible; | 77 | visibility: visible; |
78 | } | 78 | } |
79 | } | 79 | } |
80 | } | 80 | } |
81 | 81 | ||
82 | &:active { | 82 | &:active { |
83 | color: props.get(vars.$default-theme, --active, --label-color); | 83 | color: props.get(vars.$default-theme, --active, --label-color); |
84 | 84 | ||
85 | @include bem.elem('item-content') { | 85 | @include bem.elem('item-content') { |
86 | background-color: props.get(vars.$default-theme, --active, --bg-color); | 86 | background-color: props.get(vars.$default-theme, --active, --bg-color); |
87 | } | 87 | } |
88 | } | 88 | } |
89 | } | 89 | } |
90 | 90 | ||
91 | @include bem.is('selected') { | 91 | @include bem.is('selected') { |
92 | font-weight: bold; | 92 | font-weight: bold; |
93 | color: props.get(vars.$default-theme, --selected, --disabled, --label-color); | 93 | color: props.get(vars.$default-theme, --selected, --disabled, --label-color); |
94 | 94 | ||
95 | @include bem.elem('item-content') { | 95 | @include bem.elem('item-content') { |
96 | background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); | 96 | background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); |
97 | } | 97 | } |
98 | 98 | ||
99 | &:link, | 99 | &:link, |
100 | &:visited, | 100 | &:visited, |
101 | &:enabled { | 101 | &:enabled { |
102 | color: props.get(vars.$default-theme, --selected, --label-color); | 102 | color: props.get(vars.$default-theme, --selected, --label-color); |
103 | 103 | ||
104 | @include bem.elem('item-content') { | 104 | @include bem.elem('item-content') { |
105 | background-color: props.get(vars.$default-theme, --selected, --bg-color); | 105 | background-color: props.get(vars.$default-theme, --selected, --bg-color); |
106 | } | 106 | } |
107 | 107 | ||
108 | &:hover, | 108 | &:hover, |
109 | &:focus-visible { | 109 | &:focus-visible { |
110 | color: props.get(vars.$default-theme, --selected, --hover, --label-color); | 110 | color: props.get(vars.$default-theme, --selected, --hover, --label-color); |
111 | 111 | ||
112 | @include bem.elem('item-content') { | 112 | @include bem.elem('item-content') { |
113 | background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); | 113 | background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); |
114 | } | 114 | } |
115 | } | 115 | } |
116 | 116 | ||
117 | &:active { | 117 | &:active { |
118 | color: props.get(vars.$default-theme, --selected, --active, --label-color); | 118 | color: props.get(vars.$default-theme, --selected, --active, --label-color); |
119 | 119 | ||
120 | @include bem.elem('item-content') { | 120 | @include bem.elem('item-content') { |
121 | background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); | 121 | background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); |
122 | } | 122 | } |
123 | } | 123 | } |
124 | } | 124 | } |
125 | } | 125 | } |
126 | } | 126 | } |
127 | 127 | ||
128 | @include bem.modifier('hide-unselected') { | 128 | @include bem.modifier('hide-unselected') { |
129 | @include bem.elem('item') { | 129 | @include bem.elem('item') { |
130 | display: none; | 130 | display: none; |
131 | 131 | ||
132 | @include bem.is('selected') { | 132 | @include bem.is('selected') { |
133 | display: flex; | 133 | display: flex; |
134 | } | 134 | } |
135 | } | 135 | } |
136 | } | 136 | } |
137 | 137 | ||
138 | @include bem.modifier('adapt') { | 138 | @include bem.modifier('adapt') { |
139 | gap: props.get(vars.$spacing); | 139 | gap: props.get(vars.$spacing); |
140 | block-size: 100%; | 140 | block-size: 100%; |
141 | 141 | ||
142 | @include bem.elem('item') { | 142 | @include bem.elem('item') { |
143 | padding-inline: 0; | 143 | padding-inline: 0; |
144 | } | 144 | } |
145 | } | 145 | } |
146 | 146 | ||
147 | 147 | ||
148 | @include bem.modifier('align-block') { | 148 | @include bem.modifier('align-block') { |
149 | margin-inline: calc(-1 * props.get(vars.$item--pad-i)); | 149 | margin-inline: calc(-1 * props.get(vars.$item--pad-i)); |
150 | } | 150 | } |
151 | 151 | ||
152 | @include bem.modifier('quiet') { | 152 | @include bem.modifier('quiet') { |
153 | @include bem.elem('item') { | 153 | @include bem.elem('item') { |
154 | @include bem.is('selected') { | 154 | @include bem.is('selected') { |
155 | color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); | 155 | color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); |
156 | 156 | ||
157 | @include bem.elem('item-content') { | 157 | @include bem.elem('item-content') { |
158 | background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); | 158 | background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); |
159 | } | 159 | } |
160 | 160 | ||
161 | &:link, | 161 | &:link, |
162 | &:visited, | 162 | &:visited, |
163 | &:enabled { | 163 | &:enabled { |
164 | color: props.get(vars.$default-theme, --quiet, --selected, --label-color); | 164 | color: props.get(vars.$default-theme, --quiet, --selected, --label-color); |
165 | 165 | ||
166 | @include bem.elem('item-content') { | 166 | @include bem.elem('item-content') { |
167 | background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); | 167 | background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); |
168 | } | 168 | } |
169 | 169 | ||
170 | &:hover, | 170 | &:hover, |
171 | &:focus-visible { | 171 | &:focus-visible { |
172 | color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); | 172 | color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); |
173 | 173 | ||
174 | @include bem.elem('item-content') { | 174 | @include bem.elem('item-content') { |
175 | background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); | 175 | background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); |
176 | } | 176 | } |
177 | } | 177 | } |
178 | 178 | ||
179 | &:active { | 179 | &:active { |
180 | color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); | 180 | color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); |
181 | 181 | ||
182 | @include bem.elem('item-content') { | 182 | @include bem.elem('item-content') { |
183 | background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); | 183 | background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); |
184 | } | 184 | } |
185 | } | 185 | } |
186 | } | 186 | } |
187 | } | 187 | } |
188 | } | 188 | } |
189 | } | 189 | } |
190 | } | 190 | } |
191 | } | 191 | } |
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss index da280fd..8e18def 100644 --- a/src/objects/_navbar.vars.scss +++ b/src/objects/_navbar.vars.scss | |||
@@ -7,7 +7,7 @@ $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !defa | |||
7 | $spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default; | 7 | $spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default; |
8 | 8 | ||
9 | $item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; | 9 | $item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; |
10 | $item--pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--25)) !default; | 10 | $item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default; |
11 | $item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default; | 11 | $item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default; |
12 | $item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; | 12 | $item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; |
13 | 13 | ||
@@ -17,68 +17,68 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props | |||
17 | 17 | ||
18 | $default-theme-override: () !default; | 18 | $default-theme-override: () !default; |
19 | $default-theme: map.deep-merge(( | 19 | $default-theme: map.deep-merge(( |
20 | --label-color: props.get(core.$theme, --text), | 20 | --label-color: props.get(core.$theme, --text), |
21 | 21 | ||
22 | --hover: ( | 22 | --hover: ( |
23 | --bg-color: props.get(core.$theme, --border-mute), | 23 | --bg-color: props.get(core.$theme, --border-mute), |
24 | --label-color: props.get(core.$theme, --heading), | 24 | --label-color: props.get(core.$theme, --heading), |
25 | ), | 25 | ), |
26 | 26 | ||
27 | --active: ( | 27 | --active: ( |
28 | --bg-color: props.get(core.$theme, --border), | 28 | --bg-color: props.get(core.$theme, --border), |
29 | --label-color: props.get(core.$theme, --heading), | 29 | --label-color: props.get(core.$theme, --heading), |
30 | ), | 30 | ), |
31 | 31 | ||
32 | --disabled: ( | 32 | --disabled: ( |
33 | --label-color: props.get(core.$theme, --border-strong), | 33 | --label-color: props.get(core.$theme, --border-strong), |
34 | ), | 34 | ), |
35 | 35 | ||
36 | --key-focus: ( | 36 | --key-focus: ( |
37 | --label: props.get(core.$theme, --focus, --text), | 37 | --label: props.get(core.$theme, --focus, --text), |
38 | --border: props.get(core.$theme, --focus, --border), | 38 | --border: props.get(core.$theme, --focus, --border), |
39 | --outline: props.get(core.$theme, --focus, --outline), | 39 | --outline: props.get(core.$theme, --focus, --outline), |
40 | ), | 40 | ), |
41 | 41 | ||
42 | --selected: ( | 42 | --selected: ( |
43 | --bg-color: props.get(core.$theme, --heading), | 43 | --bg-color: props.get(core.$theme, --heading), |
44 | --label-color: props.get(core.$theme, --base, --50), | 44 | --label-color: props.get(core.$theme, --base, --50), |
45 | 45 | ||
46 | --hover: ( | 46 | --hover: ( |
47 | --bg-color: props.get(core.$theme, --text), | 47 | --bg-color: props.get(core.$theme, --text), |
48 | --label-color: props.get(core.$theme, --base, --50), | 48 | --label-color: props.get(core.$theme, --base, --50), |
49 | ), | 49 | ), |
50 | 50 | ||
51 | --active: ( | 51 | --active: ( |
52 | --bg-color: props.get(core.$theme, --text-mute), | 52 | --bg-color: props.get(core.$theme, --text-mute), |
53 | --label-color: props.get(core.$theme, --base, --50), | 53 | --label-color: props.get(core.$theme, --base, --50), |
54 | ), | 54 | ), |
55 | 55 | ||
56 | --disabled: ( | 56 | --disabled: ( |
57 | --bg-color: props.get(core.$theme, --border-mute), | 57 | --bg-color: props.get(core.$theme, --border-mute), |
58 | --label-color: props.get(core.$theme, --border-strong), | 58 | --label-color: props.get(core.$theme, --border-strong), |
59 | ), | 59 | ), |
60 | ), | 60 | ), |
61 | 61 | ||
62 | --quiet: ( | 62 | --quiet: ( |
63 | --selected: ( | 63 | --selected: ( |
64 | --bg-color: props.get(core.$theme, --accent, --200), | 64 | --bg-color: props.get(core.$theme, --accent, --200), |
65 | --label-color: props.get(core.$theme, --accent, --1100), | 65 | --label-color: props.get(core.$theme, --accent, --1100), |
66 | 66 | ||
67 | --hover: ( | 67 | --hover: ( |
68 | --bg-color: props.get(core.$theme, --accent, --300), | 68 | --bg-color: props.get(core.$theme, --accent, --300), |
69 | --label-color: props.get(core.$theme, --accent, --1200), | 69 | --label-color: props.get(core.$theme, --accent, --1200), |
70 | ), | 70 | ), |
71 | 71 | ||
72 | --active: ( | 72 | --active: ( |
73 | --bg-color: props.get(core.$theme, --accent, --400), | 73 | --bg-color: props.get(core.$theme, --accent, --400), |
74 | --label-color: props.get(core.$theme, --accent, --1300), | 74 | --label-color: props.get(core.$theme, --accent, --1300), |
75 | ), | 75 | ), |
76 | 76 | ||
77 | --disabled: ( | 77 | --disabled: ( |
78 | --bg-color: props.get(core.$theme, --accent, --200), | 78 | --bg-color: props.get(core.$theme, --accent, --200), |
79 | --label-color: props.get(core.$theme, --accent, --800), | 79 | --label-color: props.get(core.$theme, --accent, --800), |
80 | ), | 80 | ), |
81 | ) | 81 | ) |
82 | ) | 82 | ) |
83 | ), $default-theme-override) !default; | 83 | ), $default-theme-override) !default; |
84 | $default-theme: props.def(--o-navbar, $default-theme, 'color'); | 84 | $default-theme: props.def(--o-navbar, $default-theme, 'color'); |
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index 8a6cdb2..79c0f6c 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss | |||
@@ -7,57 +7,57 @@ | |||
7 | @use '../core.vars' as core; | 7 | @use '../core.vars' as core; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include bem.object('palette') { | 10 | @include bem.object('palette') { |
11 | display: flex; | 11 | display: flex; |
12 | block-size: 3em; | 12 | block-size: 3em; |
13 | 13 | ||
14 | @include bem.elem('item') { | 14 | @include bem.elem('item') { |
15 | flex: 1 1 auto; | 15 | flex: 1 1 auto; |
16 | 16 | ||
17 | $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); | 17 | $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); |
18 | $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); | 18 | $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); |
19 | 19 | ||
20 | @for $i from 1 through list.length($levels) { | 20 | @for $i from 1 through list.length($levels) { |
21 | $key: list.nth(map.keys($levels), $i); | 21 | $key: list.nth(map.keys($levels), $i); |
22 | 22 | ||
23 | &:nth-child(#{$i}) { | 23 | &:nth-child(#{$i}) { |
24 | background-color: props.get(core.$theme, --base, $key); | 24 | background-color: props.get(core.$theme, --base, $key); |
25 | } | 25 | } |
26 | } | 26 | } |
27 | } | 27 | } |
28 | 28 | ||
29 | @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { | 29 | @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { |
30 | $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); | 30 | $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); |
31 | 31 | ||
32 | @include bem.modifier(string.slice($palette-name, 3)) { | 32 | @include bem.modifier(string.slice($palette-name, 3)) { |
33 | @include bem.elem('item') { | 33 | @include bem.elem('item') { |
34 | @for $i from 1 through list.length($levels) { | 34 | @for $i from 1 through list.length($levels) { |
35 | $key: list.nth(map.keys($levels), $i); | 35 | $key: list.nth(map.keys($levels), $i); |
36 | 36 | ||
37 | &:nth-child(#{$i}) { | 37 | &:nth-child(#{$i}) { |
38 | background-color: props.get(core.$theme, $palette-name, $key); | 38 | background-color: props.get(core.$theme, $palette-name, $key); |
39 | } | 39 | } |
40 | } | 40 | } |
41 | } | 41 | } |
42 | } | 42 | } |
43 | } | 43 | } |
44 | 44 | ||
45 | @include bem.modifier('static') { | 45 | @include bem.modifier('static') { |
46 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { | 46 | @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { |
47 | $levels: map.get(config.$static-colors, --levels); | 47 | $levels: map.get(config.$static-colors, --levels); |
48 | 48 | ||
49 | @include bem.modifier(string.slice($palette-name, 3)) { | 49 | @include bem.modifier(string.slice($palette-name, 3)) { |
50 | @include bem.elem('item') { | 50 | @include bem.elem('item') { |
51 | @for $i from 1 through list.length($levels) { | 51 | @for $i from 1 through list.length($levels) { |
52 | $key: list.nth(map.keys($levels), $i); | 52 | $key: list.nth(map.keys($levels), $i); |
53 | 53 | ||
54 | &:nth-child(#{$i}) { | 54 | &:nth-child(#{$i}) { |
55 | background-color: props.get(core.$theme, #{$palette-name}-static, $key); | 55 | background-color: props.get(core.$theme, #{$palette-name}-static, $key); |
56 | } | 56 | } |
57 | } | 57 | } |
58 | } | 58 | } |
59 | } | 59 | } |
60 | } | 60 | } |
61 | } | 61 | } |
62 | } | 62 | } |
63 | } | 63 | } |
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss new file mode 100644 index 0000000..80fc913 --- /dev/null +++ b/src/objects/_placeholders.scss | |||
@@ -0,0 +1,22 @@ | |||
1 | @use 'sass:meta'; | ||
2 | @use 'iro-sass/src/bem'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | @use '../props' as *; | ||
5 | |||
6 | @forward 'placeholders.vars'; | ||
7 | @use 'placeholders.vars' as vars; | ||
8 | |||
9 | @mixin styles { | ||
10 | @include materialize-at-root(meta.module-variables('vars')); | ||
11 | |||
12 | @include bem.object('placeholders') { | ||
13 | @include bem.elem('placeholder') { | ||
14 | display: inline-block; | ||
15 | min-block-size: props.get(vars.$min-block-size); | ||
16 | vertical-align: middle; | ||
17 | background-color: currentColor; | ||
18 | border-radius: props.get(vars.$rounding); | ||
19 | opacity: props.get(vars.$opacity); | ||
20 | } | ||
21 | } | ||
22 | } | ||
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss new file mode 100644 index 0000000..a2e41e2 --- /dev/null +++ b/src/objects/_placeholders.vars.scss | |||
@@ -0,0 +1,6 @@ | |||
1 | @use 'iro-sass/src/props'; | ||
2 | @use '../core.vars' as core; | ||
3 | |||
4 | $min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default; | ||
5 | $rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default; | ||
6 | $opacity: props.def(--o-placeholder--opacity, .5) !default; | ||
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss index 3fe6310..2746477 100644 --- a/src/objects/_popover.scss +++ b/src/objects/_popover.scss | |||
@@ -7,33 +7,39 @@ | |||
7 | @use 'popover.vars' as vars; | 7 | @use 'popover.vars' as vars; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include bem.object('popover') { | 12 | @include bem.object('popover') { |
13 | position: fixed; | 13 | position: fixed; |
14 | inset-block-start: 0; | 14 | inset-block-start: 0; |
15 | inset-inline-start: 0; | 15 | inset-inline-start: 0; |
16 | z-index: props.get(vars.$z-index); | 16 | z-index: props.get(vars.$z-index); |
17 | padding-block: props.get(vars.$pad-b); | 17 | padding-block: props.get(vars.$pad-b); |
18 | padding-inline: props.get(vars.$pad-i); | 18 | padding-inline: props.get(vars.$pad-i); |
19 | margin: 0; | 19 | margin: 0; |
20 | color: currentColor; | 20 | color: currentColor; |
21 | background-color: props.get(vars.$bg-color); | 21 | background-color: props.get(vars.$bg-color); |
22 | filter: props.get(vars.$filter); | 22 | border: props.get(vars.$border-width) solid transparent; |
23 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | 23 | border-color: props.get(vars.$border-color); |
24 | border-radius: props.get(vars.$rounding); | 24 | border-radius: props.get(vars.$rounding); |
25 | transform: translate(var(--x), var(--y)); | 25 | box-shadow: |
26 | props.get(vars.$shadow-x) | ||
27 | props.get(vars.$shadow-y) | ||
28 | props.get(vars.$shadow-blur) | ||
29 | props.get(vars.$shadow-grow) | ||
30 | props.get(vars.$shadow-color); | ||
31 | transform: translate(var(--x), var(--y)); | ||
26 | 32 | ||
27 | @include bem.modifier('up-left') { | 33 | @include bem.modifier('up-left') { |
28 | transform: translate(var(--x), calc(var(--y) - 100%)); | 34 | transform: translate(var(--x), calc(var(--y) - 100%)); |
29 | } | 35 | } |
30 | 36 | ||
31 | @include bem.modifier('up-right') { | 37 | @include bem.modifier('up-right') { |
32 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); | 38 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); |
33 | } | 39 | } |
34 | 40 | ||
35 | @include bem.modifier('down-right') { | 41 | @include bem.modifier('down-right') { |
36 | transform: translate(calc(var(--x) - 100%), var(--y)); | 42 | transform: translate(calc(var(--x) - 100%), var(--y)); |
37 | } | 43 | } |
38 | } | 44 | } |
39 | } | 45 | } |
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss index b76112e..e560d1b 100644 --- a/src/objects/_popover.vars.scss +++ b/src/objects/_popover.vars.scss | |||
@@ -9,6 +9,11 @@ $separator-width: props.def(--o-popover--separator-width, props.get(core.$size-- | |||
9 | $rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; | 9 | $rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default; |
10 | $border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; | 10 | $border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default; |
11 | 11 | ||
12 | $bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | 12 | $shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default; |
13 | $border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !default; | 13 | $shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default; |
14 | $filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow)), 'color') !default; | 14 | $shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default; |
15 | $shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default; | ||
16 | |||
17 | $bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; | ||
18 | $border-color: props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default; | ||
19 | $shadow-color: props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default; | ||
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index aef6b92..8327a15 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss | |||
@@ -8,147 +8,147 @@ | |||
8 | @use 'radio.vars' as vars; | 8 | @use 'radio.vars' as vars; |
9 | 9 | ||
10 | @mixin styles { | 10 | @mixin styles { |
11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
12 | 12 | ||
13 | @include bem.object('radio') { | 13 | @include bem.object('radio') { |
14 | position: relative; | 14 | position: relative; |
15 | display: inline-block; | 15 | display: inline-block; |
16 | padding-block: props.get(vars.$pad-b); | 16 | padding-block: props.get(vars.$pad-b); |
17 | padding-inline: props.get(vars.$pad-i); | 17 | padding-inline: props.get(vars.$pad-i); |
18 | margin-inline: | 18 | margin-inline: |
19 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) | 19 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
20 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); | 20 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); |
21 | 21 | ||
22 | @include bem.elem('circle') { | 22 | @include bem.elem('circle') { |
23 | display: inline-block; | 23 | display: inline-block; |
24 | flex: 0 0 auto; | 24 | flex: 0 0 auto; |
25 | inline-size: props.get(vars.$diameter); | 25 | inline-size: props.get(vars.$diameter); |
26 | block-size: props.get(vars.$diameter); | 26 | block-size: props.get(vars.$diameter); |
27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); | 27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); |
28 | vertical-align: top; | 28 | vertical-align: top; |
29 | background-color: props.get(vars.$circle-border-color); | 29 | background-color: props.get(vars.$circle-border-color); |
30 | background-clip: padding-box; | 30 | background-clip: padding-box; |
31 | border: props.get(vars.$key-focus--border-offset) solid transparent; | 31 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
32 | border-radius: 2em; | 32 | border-radius: 2em; |
33 | 33 | ||
34 | &::after { | 34 | &::after { |
35 | position: relative; | 35 | position: relative; |
36 | inset-block-start: props.get(vars.$border-width); | 36 | inset-block-start: props.get(vars.$border-width); |
37 | inset-inline-start: props.get(vars.$border-width); | 37 | inset-inline-start: props.get(vars.$border-width); |
38 | display: block; | 38 | display: block; |
39 | inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); | 39 | inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); |
40 | block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); | 40 | block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); |
41 | content: ''; | 41 | content: ''; |
42 | background-color: props.get(vars.$circle-bg-color); | 42 | background-color: props.get(vars.$circle-bg-color); |
43 | border-radius: props.get(vars.$diameter); | 43 | border-radius: props.get(vars.$diameter); |
44 | transition: transform .2s ease; | 44 | transition: transform .2s ease; |
45 | } | 45 | } |
46 | } | 46 | } |
47 | 47 | ||
48 | @include bem.elem('label') { | 48 | @include bem.elem('label') { |
49 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); | 49 | margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); |
50 | } | 50 | } |
51 | 51 | ||
52 | @include bem.elem('native') { | 52 | @include bem.elem('native') { |
53 | position: absolute; | 53 | position: absolute; |
54 | inset-block-start: 0; | 54 | inset-block-start: 0; |
55 | inset-inline-start: 0; | 55 | inset-inline-start: 0; |
56 | z-index: -1; | 56 | z-index: -1; |
57 | inline-size: 100%; | 57 | inline-size: 100%; |
58 | block-size: 100%; | 58 | block-size: 100%; |
59 | padding: 0; | 59 | padding: 0; |
60 | margin: 0; | 60 | margin: 0; |
61 | overflow: hidden; | 61 | overflow: hidden; |
62 | appearance: none; | 62 | appearance: none; |
63 | border-radius: props.get(vars.$rounding); | 63 | border-radius: props.get(vars.$rounding); |
64 | 64 | ||
65 | &:hover, | 65 | &:hover, |
66 | &:focus-visible { | 66 | &:focus-visible { |
67 | @include bem.sibling-elem('label') { | 67 | @include bem.sibling-elem('label') { |
68 | color: props.get(vars.$hover--label-color); | 68 | color: props.get(vars.$hover--label-color); |
69 | } | 69 | } |
70 | 70 | ||
71 | @include bem.sibling-elem('circle') { | 71 | @include bem.sibling-elem('circle') { |
72 | background-color: props.get(vars.$hover--circle-border-color); | 72 | background-color: props.get(vars.$hover--circle-border-color); |
73 | } | 73 | } |
74 | } | 74 | } |
75 | 75 | ||
76 | &:checked { | 76 | &:checked { |
77 | @include bem.sibling-elem('circle') { | 77 | @include bem.sibling-elem('circle') { |
78 | &::after { | 78 | &::after { |
79 | transform: scale(.44); | 79 | transform: scale(.44); |
80 | } | 80 | } |
81 | } | 81 | } |
82 | } | 82 | } |
83 | 83 | ||
84 | &:disabled { | 84 | &:disabled { |
85 | @include bem.sibling-elem('label') { | 85 | @include bem.sibling-elem('label') { |
86 | color: props.get(vars.$disabled--label-color); | 86 | color: props.get(vars.$disabled--label-color); |
87 | } | 87 | } |
88 | 88 | ||
89 | @include bem.sibling-elem('circle') { | 89 | @include bem.sibling-elem('circle') { |
90 | background-color: props.get(vars.$disabled--circle-border-color); | 90 | background-color: props.get(vars.$disabled--circle-border-color); |
91 | 91 | ||
92 | &::after { | 92 | &::after { |
93 | background-color: props.get(vars.$disabled--circle-bg-color); | 93 | background-color: props.get(vars.$disabled--circle-bg-color); |
94 | } | 94 | } |
95 | } | 95 | } |
96 | } | 96 | } |
97 | 97 | ||
98 | &:focus-visible { | 98 | &:focus-visible { |
99 | @include bem.sibling-elem('label') { | 99 | @include bem.sibling-elem('label') { |
100 | color: props.get(vars.$key-focus--label-color); | 100 | color: props.get(vars.$key-focus--label-color); |
101 | } | 101 | } |
102 | 102 | ||
103 | @include bem.sibling-elem('circle') { | 103 | @include bem.sibling-elem('circle') { |
104 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | 104 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
105 | box-shadow: | 105 | box-shadow: |
106 | 0 | 106 | 0 |
107 | 0 | 107 | 0 |
108 | 0 | 108 | 0 |
109 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 109 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
110 | props.get(vars.$key-focus--outline-color); | 110 | props.get(vars.$key-focus--outline-color); |
111 | } | 111 | } |
112 | } | 112 | } |
113 | } | 113 | } |
114 | 114 | ||
115 | @include bem.modifier('standalone') { | 115 | @include bem.modifier('standalone') { |
116 | @include bem.elem('circle') { | 116 | @include bem.elem('circle') { |
117 | margin-block-start: 0; | 117 | margin-block-start: 0; |
118 | } | 118 | } |
119 | } | 119 | } |
120 | 120 | ||
121 | @include bem.modifier('accent') { | 121 | @include bem.modifier('accent') { |
122 | @include bem.elem('native') { | 122 | @include bem.elem('native') { |
123 | &:checked { | 123 | &:checked { |
124 | @include bem.sibling-elem('circle') { | 124 | @include bem.sibling-elem('circle') { |
125 | background-color: props.get(vars.$accent--circle-border-color); | 125 | background-color: props.get(vars.$accent--circle-border-color); |
126 | } | 126 | } |
127 | 127 | ||
128 | &:hover, | 128 | &:hover, |
129 | &:focus-visible { | 129 | &:focus-visible { |
130 | @include bem.sibling-elem('circle') { | 130 | @include bem.sibling-elem('circle') { |
131 | background-color: props.get(vars.$accent--hover--circle-border-color); | 131 | background-color: props.get(vars.$accent--hover--circle-border-color); |
132 | } | 132 | } |
133 | } | 133 | } |
134 | } | 134 | } |
135 | 135 | ||
136 | &:disabled { | 136 | &:disabled { |
137 | @include bem.sibling-elem('circle') { | 137 | @include bem.sibling-elem('circle') { |
138 | background-color: props.get(vars.$disabled--circle-border-color); | 138 | background-color: props.get(vars.$disabled--circle-border-color); |
139 | 139 | ||
140 | &::after { | 140 | &::after { |
141 | background-color: props.get(vars.$disabled--circle-bg-color); | 141 | background-color: props.get(vars.$disabled--circle-bg-color); |
142 | } | 142 | } |
143 | } | 143 | } |
144 | 144 | ||
145 | &:checked { | 145 | &:checked { |
146 | @include bem.sibling-elem('circle') { | 146 | @include bem.sibling-elem('circle') { |
147 | background-color: props.get(vars.$disabled--circle-border-color); | 147 | background-color: props.get(vars.$disabled--circle-border-color); |
148 | } | 148 | } |
149 | } | 149 | } |
150 | } | 150 | } |
151 | } | 151 | } |
152 | } | 152 | } |
153 | } | 153 | } |
154 | } | 154 | } |
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss index 51ea581..b18ae2b 100644 --- a/src/objects/_radio.vars.scss +++ b/src/objects/_radio.vars.scss | |||
@@ -7,7 +7,7 @@ $label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) ! | |||
7 | $border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; | 7 | $border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default; |
8 | $pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; | 8 | $pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default; |
9 | $pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; | 9 | $pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default; |
10 | $rounding: props.def(--o-radio--rounding, props.get(core.$rounding)) !default; | 10 | $rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default; |
11 | $spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; | 11 | $spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default; |
12 | 12 | ||
13 | $key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 13 | $key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; |
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss index 6c60777..4a1feda 100644 --- a/src/objects/_side-nav.scss +++ b/src/objects/_side-nav.scss | |||
@@ -8,83 +8,83 @@ | |||
8 | @use 'side-nav.vars' as vars; | 8 | @use 'side-nav.vars' as vars; |
9 | 9 | ||
10 | @mixin styles { | 10 | @mixin styles { |
11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
12 | 12 | ||
13 | @include bem.object('side-nav') { | 13 | @include bem.object('side-nav') { |
14 | display: flex; | 14 | display: flex; |
15 | flex-direction: column; | 15 | flex-direction: column; |
16 | gap: props.get(vars.$spacing); | 16 | gap: props.get(vars.$spacing); |
17 | 17 | ||
18 | @include bem.elem('header') { | 18 | @include bem.elem('header') { |
19 | padding-block: props.get(vars.$item--pad-b); | 19 | padding-block: props.get(vars.$item--pad-b); |
20 | padding-inline: props.get(vars.$item--pad-i); | 20 | padding-inline: props.get(vars.$item--pad-i); |
21 | font-size: props.get(vars.$header--font-size); | 21 | font-size: props.get(vars.$header--font-size); |
22 | font-weight: 500; | 22 | font-weight: 500; |
23 | color: props.get(vars.$header--label-color); | 23 | color: props.get(vars.$header--label-color); |
24 | text-transform: uppercase; | 24 | text-transform: uppercase; |
25 | letter-spacing: .5px; | 25 | letter-spacing: .5px; |
26 | 26 | ||
27 | @include bem.next-twin-elem { | 27 | @include bem.next-twin-elem { |
28 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); | 28 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
29 | } | 29 | } |
30 | } | 30 | } |
31 | 31 | ||
32 | @include bem.elem('item') { | 32 | @include bem.elem('item') { |
33 | padding-block: props.get(vars.$item--pad-b); | 33 | padding-block: props.get(vars.$item--pad-b); |
34 | padding-inline: props.get(vars.$item--pad-i); | 34 | padding-inline: props.get(vars.$item--pad-i); |
35 | margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); | 35 | margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); |
36 | color: props.get(vars.$item--disabled--label-color); | 36 | color: props.get(vars.$item--disabled--label-color); |
37 | background-clip: padding-box; | 37 | background-clip: padding-box; |
38 | border: props.get(vars.$item--key-focus--border-offset) solid transparent; | 38 | border: props.get(vars.$item--key-focus--border-offset) solid transparent; |
39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); | 39 | border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); |
40 | 40 | ||
41 | &:link, | 41 | &:link, |
42 | &:visited, | 42 | &:visited, |
43 | &:enabled { | 43 | &:enabled { |
44 | color: currentColor; | 44 | color: currentColor; |
45 | 45 | ||
46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { | 46 | @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { |
47 | color: props.get(vars.$item--hover--label-color); | 47 | color: props.get(vars.$item--hover--label-color); |
48 | background-color: props.get(vars.$item--hover--bg-color); | 48 | background-color: props.get(vars.$item--hover--bg-color); |
49 | } | 49 | } |
50 | 50 | ||
51 | &:active { | 51 | &:active { |
52 | color: props.get(vars.$item--active--label-color); | 52 | color: props.get(vars.$item--active--label-color); |
53 | background-color: props.get(vars.$item--active--bg-color); | 53 | background-color: props.get(vars.$item--active--bg-color); |
54 | } | 54 | } |
55 | 55 | ||
56 | &:focus-visible { | 56 | &:focus-visible { |
57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); | 57 | outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); |
58 | box-shadow: | 58 | box-shadow: |
59 | 0 | 59 | 0 |
60 | 0 | 60 | 0 |
61 | 0 | 61 | 0 |
62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) | 62 | calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) |
63 | props.get(vars.$item--key-focus--outline-color); | 63 | props.get(vars.$item--key-focus--outline-color); |
64 | } | 64 | } |
65 | } | 65 | } |
66 | 66 | ||
67 | @include bem.next-elem('header') { | 67 | @include bem.next-elem('header') { |
68 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); | 68 | margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); |
69 | } | 69 | } |
70 | } | 70 | } |
71 | 71 | ||
72 | @include bem.elem('header') { | 72 | @include bem.elem('header') { |
73 | &:link, | 73 | &:link, |
74 | &:visited, | 74 | &:visited, |
75 | &:enabled { | 75 | &:enabled { |
76 | color: props.get(vars.$header--label-color); | 76 | color: props.get(vars.$header--label-color); |
77 | } | 77 | } |
78 | } | 78 | } |
79 | 79 | ||
80 | @include bem.elem('separator') { | 80 | @include bem.elem('separator') { |
81 | block-size: props.get(vars.$separator); | 81 | block-size: props.get(vars.$separator); |
82 | } | 82 | } |
83 | 83 | ||
84 | @include bem.elem('icon-slot') { | 84 | @include bem.elem('icon-slot') { |
85 | display: flex; | 85 | display: flex; |
86 | justify-content: center; | 86 | justify-content: center; |
87 | inline-size: props.get(icon.$size); | 87 | inline-size: props.get(icon.$size); |
88 | } | 88 | } |
89 | } | 89 | } |
90 | } | 90 | } |
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss index 122dba6..711b2a7 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss | |||
@@ -8,7 +8,7 @@ $separator: props.def(--o-side-nav--separator, props.get(core.$size--200 | |||
8 | 8 | ||
9 | $item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; | 9 | $item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; |
10 | $item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; | 10 | $item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; |
11 | $item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default; | 11 | $item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; |
12 | 12 | ||
13 | $item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 13 | $item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; |
14 | $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | 14 | $item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; |
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss index 1fcdf02..4e4aa42 100644 --- a/src/objects/_status-indicator.scss +++ b/src/objects/_status-indicator.scss | |||
@@ -9,19 +9,19 @@ | |||
9 | @use 'status-indicator.vars' as vars; | 9 | @use 'status-indicator.vars' as vars; |
10 | 10 | ||
11 | @mixin styles { | 11 | @mixin styles { |
12 | @include materialize-at-root(meta.module-variables('vars')); | 12 | @include materialize-at-root(meta.module-variables('vars')); |
13 | 13 | ||
14 | @include bem.object('status-indicator') { | 14 | @include bem.object('status-indicator') { |
15 | display: inline-block; | 15 | display: inline-block; |
16 | inline-size: props.get(vars.$size); | 16 | inline-size: props.get(vars.$size); |
17 | block-size: props.get(vars.$size); | 17 | block-size: props.get(vars.$size); |
18 | background-color: props.get(vars.$default); | 18 | background-color: props.get(vars.$default); |
19 | border-radius: 10em; | 19 | border-radius: 10em; |
20 | 20 | ||
21 | @each $theme in map.keys(props.get(vars.$themes)) { | 21 | @each $theme in map.keys(props.get(vars.$themes)) { |
22 | @include bem.is(string.slice($theme, 3)) { | 22 | @include bem.is(string.slice($theme, 3)) { |
23 | background-color: props.get(vars.$themes, $theme); | 23 | background-color: props.get(vars.$themes, $theme); |
24 | } | 24 | } |
25 | } | 25 | } |
26 | } | 26 | } |
27 | } | 27 | } |
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index 6289145..55b446a 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss | |||
@@ -9,18 +9,18 @@ $default: props.def(--o-status-indicator--default, props.get(core.$theme, --bord | |||
9 | $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; | 9 | $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; |
10 | 10 | ||
11 | $themes-config: ( | 11 | $themes-config: ( |
12 | accent: --accent, | 12 | accent: --accent, |
13 | positive: --positive, | 13 | positive: --positive, |
14 | negative: --negative, | 14 | negative: --negative, |
15 | warning: --warning, | 15 | warning: --warning, |
16 | ) !default; | 16 | ) !default; |
17 | 17 | ||
18 | $themes: props.def(--o-status-indicator, (), 'color'); | 18 | $themes: props.def(--o-status-indicator, (), 'color'); |
19 | 19 | ||
20 | @each $theme, $key in $themes-config { | 20 | @each $theme, $key in $themes-config { |
21 | @if $theme != --base { | 21 | @if $theme != --base { |
22 | $themes: props.merge($themes, ( | 22 | $themes: props.merge($themes, ( |
23 | --#{$theme}: props.get(core.$theme, $key, --700), | 23 | --#{$theme}: props.get(core.$theme, $key, --700), |
24 | )); | 24 | )); |
25 | } | 25 | } |
26 | } | 26 | } |
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 8612d31..48cec24 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss | |||
@@ -8,181 +8,181 @@ | |||
8 | @use 'switch.vars' as vars; | 8 | @use 'switch.vars' as vars; |
9 | 9 | ||
10 | @mixin styles { | 10 | @mixin styles { |
11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
12 | 12 | ||
13 | @include bem.object('switch') { | 13 | @include bem.object('switch') { |
14 | position: relative; | 14 | position: relative; |
15 | display: inline-block; | 15 | display: inline-block; |
16 | padding-block: props.get(vars.$pad-b); | 16 | padding-block: props.get(vars.$pad-b); |
17 | padding-inline: props.get(vars.$pad-i); | 17 | padding-inline: props.get(vars.$pad-i); |
18 | margin-inline: | 18 | margin-inline: |
19 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) | 19 | calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) |
20 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); | 20 | calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); |
21 | 21 | ||
22 | @include bem.elem('indicator') { | 22 | @include bem.elem('indicator') { |
23 | display: inline-block; | 23 | display: inline-block; |
24 | flex: 0 0 auto; | 24 | flex: 0 0 auto; |
25 | inline-size: props.get(vars.$inline-size); | 25 | inline-size: props.get(vars.$inline-size); |
26 | block-size: props.get(vars.$block-size); | 26 | block-size: props.get(vars.$block-size); |
27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); | 27 | margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); |
28 | vertical-align: top; | 28 | vertical-align: top; |
29 | background-color: props.get(vars.$track-bg-color); | 29 | background-color: props.get(vars.$track-bg-color); |
30 | background-clip: padding-box; | 30 | background-clip: padding-box; |
31 | border: props.get(vars.$key-focus--border-offset) solid transparent; | 31 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
32 | border-radius: 2em; | 32 | border-radius: 2em; |
33 | transition: background-color .2s ease; | 33 | transition: background-color .2s ease; |
34 | 34 | ||
35 | &::after { | 35 | &::after { |
36 | display: block; | 36 | display: block; |
37 | inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); | 37 | inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); |
38 | block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); | 38 | block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); |
39 | content: ''; | 39 | content: ''; |
40 | background-color: props.get(vars.$handle-bg-color); | 40 | background-color: props.get(vars.$handle-bg-color); |
41 | border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); | 41 | border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); |
42 | border-radius: props.get(vars.$inline-size); | 42 | border-radius: props.get(vars.$inline-size); |
43 | transition: transform .2s ease; | 43 | transition: transform .2s ease; |
44 | } | 44 | } |
45 | } | 45 | } |
46 | 46 | ||
47 | @include bem.elem('label') { | 47 | @include bem.elem('label') { |
48 | margin-inline-start: props.get(vars.$label-gap); | 48 | margin-inline-start: props.get(vars.$label-gap); |
49 | } | 49 | } |
50 | 50 | ||
51 | @include bem.elem('native') { | 51 | @include bem.elem('native') { |
52 | position: absolute; | 52 | position: absolute; |
53 | inset-block-start: 0; | 53 | inset-block-start: 0; |
54 | inset-inline-start: 0; | 54 | inset-inline-start: 0; |
55 | z-index: -1; | 55 | z-index: -1; |
56 | inline-size: 100%; | 56 | inline-size: 100%; |
57 | block-size: 100%; | 57 | block-size: 100%; |
58 | padding: 0; | 58 | padding: 0; |
59 | margin: 0; | 59 | margin: 0; |
60 | overflow: hidden; | 60 | overflow: hidden; |
61 | appearance: none; | 61 | appearance: none; |
62 | border-radius: props.get(vars.$rounding); | 62 | border-radius: props.get(vars.$rounding); |
63 | 63 | ||
64 | &:hover, | 64 | &:hover, |
65 | &:focus-visible { | 65 | &:focus-visible { |
66 | @include bem.sibling-elem('label') { | 66 | @include bem.sibling-elem('label') { |
67 | color: props.get(vars.$hover--label-color); | 67 | color: props.get(vars.$hover--label-color); |
68 | } | 68 | } |
69 | 69 | ||
70 | @include bem.sibling-elem('indicator') { | 70 | @include bem.sibling-elem('indicator') { |
71 | &::after { | 71 | &::after { |
72 | border-color: props.get(vars.$hover--handle-border-color); | 72 | border-color: props.get(vars.$hover--handle-border-color); |
73 | } | 73 | } |
74 | } | 74 | } |
75 | } | 75 | } |
76 | 76 | ||
77 | &:checked { | 77 | &:checked { |
78 | @include bem.sibling-elem('indicator') { | 78 | @include bem.sibling-elem('indicator') { |
79 | background-color: props.get(vars.$handle-border-color); | 79 | background-color: props.get(vars.$handle-border-color); |
80 | 80 | ||
81 | &::after { | 81 | &::after { |
82 | border-color: props.get(vars.$handle-border-color); | 82 | border-color: props.get(vars.$handle-border-color); |
83 | transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); | 83 | transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); |
84 | } | 84 | } |
85 | } | 85 | } |
86 | 86 | ||
87 | &:hover, | 87 | &:hover, |
88 | &:focus-visible { | 88 | &:focus-visible { |
89 | @include bem.sibling-elem('indicator') { | 89 | @include bem.sibling-elem('indicator') { |
90 | background-color: props.get(vars.$hover--handle-border-color); | 90 | background-color: props.get(vars.$hover--handle-border-color); |
91 | 91 | ||
92 | &::after { | 92 | &::after { |
93 | border-color: props.get(vars.$hover--handle-border-color); | 93 | border-color: props.get(vars.$hover--handle-border-color); |
94 | } | 94 | } |
95 | } | 95 | } |
96 | } | 96 | } |
97 | } | 97 | } |
98 | 98 | ||
99 | &:disabled { | 99 | &:disabled { |
100 | @include bem.sibling-elem('label') { | 100 | @include bem.sibling-elem('label') { |
101 | color: props.get(vars.$disabled--label-color); | 101 | color: props.get(vars.$disabled--label-color); |
102 | } | 102 | } |
103 | 103 | ||
104 | @include bem.sibling-elem('indicator') { | 104 | @include bem.sibling-elem('indicator') { |
105 | background-color: props.get(vars.$disabled--track-bg-color); | 105 | background-color: props.get(vars.$disabled--track-bg-color); |
106 | 106 | ||
107 | &::after { | 107 | &::after { |
108 | background-color: props.get(vars.$disabled--handle-bg-color); | 108 | background-color: props.get(vars.$disabled--handle-bg-color); |
109 | border-color: props.get(vars.$disabled--handle-border-color); | 109 | border-color: props.get(vars.$disabled--handle-border-color); |
110 | } | 110 | } |
111 | } | 111 | } |
112 | 112 | ||
113 | &:checked { | 113 | &:checked { |
114 | @include bem.sibling-elem('indicator') { | 114 | @include bem.sibling-elem('indicator') { |
115 | background-color: props.get(vars.$disabled--handle-border-color); | 115 | background-color: props.get(vars.$disabled--handle-border-color); |
116 | 116 | ||
117 | &::after { | 117 | &::after { |
118 | border-color: props.get(vars.$disabled--handle-border-color); | 118 | border-color: props.get(vars.$disabled--handle-border-color); |
119 | } | 119 | } |
120 | } | 120 | } |
121 | } | 121 | } |
122 | } | 122 | } |
123 | 123 | ||
124 | &:focus-visible { | 124 | &:focus-visible { |
125 | @include bem.sibling-elem('label') { | 125 | @include bem.sibling-elem('label') { |
126 | color: props.get(vars.$key-focus--label-color); | 126 | color: props.get(vars.$key-focus--label-color); |
127 | } | 127 | } |
128 | 128 | ||
129 | @include bem.sibling-elem('indicator') { | 129 | @include bem.sibling-elem('indicator') { |
130 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | 130 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
131 | box-shadow: | 131 | box-shadow: |
132 | 0 | 132 | 0 |
133 | 0 | 133 | 0 |
134 | 0 | 134 | 0 |
135 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | 135 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) |
136 | props.get(vars.$key-focus--outline-color); | 136 | props.get(vars.$key-focus--outline-color); |
137 | } | 137 | } |
138 | } | 138 | } |
139 | } | 139 | } |
140 | 140 | ||
141 | @include bem.modifier('standalone') { | 141 | @include bem.modifier('standalone') { |
142 | @include bem.elem('indicator') { | 142 | @include bem.elem('indicator') { |
143 | margin-block-start: 0; | 143 | margin-block-start: 0; |
144 | } | 144 | } |
145 | } | 145 | } |
146 | 146 | ||
147 | @include bem.modifier('accent') { | 147 | @include bem.modifier('accent') { |
148 | @include bem.elem('native') { | 148 | @include bem.elem('native') { |
149 | &:checked { | 149 | &:checked { |
150 | @include bem.sibling-elem('indicator') { | 150 | @include bem.sibling-elem('indicator') { |
151 | background-color: props.get(vars.$accent--handle-border-color); | 151 | background-color: props.get(vars.$accent--handle-border-color); |
152 | 152 | ||
153 | &::after { | 153 | &::after { |
154 | border-color: props.get(vars.$accent--handle-border-color); | 154 | border-color: props.get(vars.$accent--handle-border-color); |
155 | } | 155 | } |
156 | } | 156 | } |
157 | 157 | ||
158 | &:hover, | 158 | &:hover, |
159 | &:focus-visible { | 159 | &:focus-visible { |
160 | @include bem.sibling-elem('indicator') { | 160 | @include bem.sibling-elem('indicator') { |
161 | background-color: props.get(vars.$accent--hover--handle-border-color); | 161 | background-color: props.get(vars.$accent--hover--handle-border-color); |
162 | 162 | ||
163 | &::after { | 163 | &::after { |
164 | border-color: props.get(vars.$accent--hover--handle-border-color); | 164 | border-color: props.get(vars.$accent--hover--handle-border-color); |
165 | } | 165 | } |
166 | } | 166 | } |
167 | } | 167 | } |
168 | } | 168 | } |
169 | 169 | ||
170 | &:disabled { | 170 | &:disabled { |
171 | @include bem.sibling-elem('label') { | 171 | @include bem.sibling-elem('label') { |
172 | color: props.get(vars.$disabled--label-color); | 172 | color: props.get(vars.$disabled--label-color); |
173 | } | 173 | } |
174 | 174 | ||
175 | &:checked { | 175 | &:checked { |
176 | @include bem.sibling-elem('indicator') { | 176 | @include bem.sibling-elem('indicator') { |
177 | background-color: props.get(vars.$disabled--handle-border-color); | 177 | background-color: props.get(vars.$disabled--handle-border-color); |
178 | 178 | ||
179 | &::after { | 179 | &::after { |
180 | border-color: props.get(vars.$disabled--handle-border-color); | 180 | border-color: props.get(vars.$disabled--handle-border-color); |
181 | } | 181 | } |
182 | } | 182 | } |
183 | } | 183 | } |
184 | } | 184 | } |
185 | } | 185 | } |
186 | } | 186 | } |
187 | } | 187 | } |
188 | } | 188 | } |
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss index 85596af..10489a5 100644 --- a/src/objects/_switch.vars.scss +++ b/src/objects/_switch.vars.scss | |||
@@ -8,7 +8,7 @@ $label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) ! | |||
8 | $border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; | 8 | $border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; |
9 | $pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; | 9 | $pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; |
10 | $pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; | 10 | $pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; |
11 | $rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default; | 11 | $rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default; |
12 | $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; | 12 | $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; |
13 | 13 | ||
14 | $key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 14 | $key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; |
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss new file mode 100644 index 0000000..a9daaae --- /dev/null +++ b/src/objects/_tabbar.scss | |||
@@ -0,0 +1,113 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:meta'; | ||
3 | @use 'sass:string'; | ||
4 | @use 'iro-sass/src/bem'; | ||
5 | @use 'iro-sass/src/props'; | ||
6 | @use '../props' as *; | ||
7 | |||
8 | @forward 'tabbar.vars'; | ||
9 | @use 'tabbar.vars' as vars; | ||
10 | |||
11 | @mixin styles { | ||
12 | @include materialize-at-root(meta.module-variables('vars')); | ||
13 | |||
14 | @include bem.object('tabbar') { | ||
15 | min-inline-size: 0; | ||
16 | block-size: props.get(vars.$block-size); | ||
17 | overflow: hidden; | ||
18 | |||
19 | &::after { | ||
20 | display: block; | ||
21 | block-size: props.get(vars.$indicator--width); | ||
22 | margin-block-start: calc(-1 * props.get(vars.$indicator--width)); | ||
23 | content: ''; | ||
24 | background-color: props.get(vars.$railing--bg-color); | ||
25 | } | ||
26 | |||
27 | @include bem.elem('tabs') { | ||
28 | display: flex; | ||
29 | block-size: 100%; | ||
30 | margin-inline: calc(-.5 * props.get(vars.$spacing)); | ||
31 | overflow-inline: auto; | ||
32 | } | ||
33 | |||
34 | @include bem.modifier('quiet') { | ||
35 | box-shadow: none; | ||
36 | } | ||
37 | |||
38 | @include bem.modifier('adapt') { | ||
39 | block-size: 100%; | ||
40 | } | ||
41 | |||
42 | @include bem.elem('tab') { | ||
43 | position: relative; | ||
44 | display: flex; | ||
45 | align-items: center; | ||
46 | padding-inline: calc(.5 * props.get(vars.$spacing)); | ||
47 | color: props.get(vars.$tab--text-color); | ||
48 | white-space: nowrap; | ||
49 | |||
50 | &::before { | ||
51 | position: absolute; | ||
52 | inset-block-start: 50%; | ||
53 | inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); | ||
54 | z-index: -10; | ||
55 | block-size: 1.5em; | ||
56 | content: ''; | ||
57 | border-radius: props.get(vars.$rounding); | ||
58 | transform: translateY(-50%); | ||
59 | } | ||
60 | |||
61 | &::after { | ||
62 | position: absolute; | ||
63 | inset-block-end: 0; | ||
64 | inset-inline: calc(.5 * props.get(vars.$spacing)); | ||
65 | z-index: 10; | ||
66 | display: none; | ||
67 | block-size: props.get(vars.$indicator--width); | ||
68 | content: ''; | ||
69 | background-color: props.get(vars.$tab--selected--text-color); | ||
70 | } | ||
71 | |||
72 | &:link, | ||
73 | &:visited { | ||
74 | &:hover, | ||
75 | &:active, | ||
76 | &:focus-visible { | ||
77 | color: props.get(vars.$tab--selected--text-color); | ||
78 | } | ||
79 | |||
80 | &:focus-visible { | ||
81 | &::before { | ||
82 | color: props.get(vars.$key-focus--text-color); | ||
83 | text-decoration: none; | ||
84 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
85 | box-shadow: 0 0 0 | ||
86 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
87 | props.get(vars.$key-focus--outline-color); | ||
88 | } | ||
89 | } | ||
90 | } | ||
91 | |||
92 | @include bem.is('selected') { | ||
93 | color: props.get(vars.$tab--selected--text-color); | ||
94 | |||
95 | &::after { | ||
96 | display: block; | ||
97 | } | ||
98 | } | ||
99 | } | ||
100 | |||
101 | @include bem.modifier('accent') { | ||
102 | @include bem.elem('tab') { | ||
103 | &::after { | ||
104 | background-color: props.get(vars.$tab--accent--text-color); | ||
105 | } | ||
106 | |||
107 | @include bem.is('selected') { | ||
108 | color: props.get(vars.$tab--accent--text-color); | ||
109 | } | ||
110 | } | ||
111 | } | ||
112 | } | ||
113 | } | ||
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss new file mode 100644 index 0000000..4095629 --- /dev/null +++ b/src/objects/_tabbar.vars.scss | |||
@@ -0,0 +1,25 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:string'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | @use '../core.vars' as core; | ||
5 | |||
6 | $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default; | ||
7 | $rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default; | ||
8 | $spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default; | ||
9 | $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default; | ||
10 | |||
11 | $indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; | ||
12 | |||
13 | $key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $tab--text-color: props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
18 | $tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
19 | $tab--accent--text-color: props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; | ||
20 | |||
21 | $railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
22 | |||
23 | $key-focus--text-color: props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
24 | $key-focus--border-color: props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
25 | $key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 2b63737..9e4891d 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss | |||
@@ -7,141 +7,141 @@ | |||
7 | @use 'table.vars' as vars; | 7 | @use 'table.vars' as vars; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include bem.object('table') { | 12 | @include bem.object('table') { |
13 | border-spacing: 0; | 13 | border-spacing: 0; |
14 | border-collapse: separate; | 14 | border-collapse: separate; |
15 | 15 | ||
16 | @include bem.modifier('fixed') { | 16 | @include bem.modifier('fixed') { |
17 | table-layout: fixed; | 17 | table-layout: fixed; |
18 | } | 18 | } |
19 | 19 | ||
20 | @include bem.elem('head-cell') { | 20 | @include bem.elem('head-cell') { |
21 | padding-block: props.get(vars.$pad-b); | 21 | padding-block: props.get(vars.$pad-b); |
22 | padding-inline: props.get(vars.$pad-i); | 22 | padding-inline: props.get(vars.$pad-i); |
23 | font-family: props.get(vars.$heading--font-family); | 23 | font-family: props.get(vars.$heading--font-family); |
24 | font-size: props.get(vars.$heading--font-size); | 24 | font-size: props.get(vars.$heading--font-size); |
25 | font-weight: props.get(vars.$heading--font-weight); | 25 | font-weight: props.get(vars.$heading--font-weight); |
26 | color: props.get(vars.$heading-color); | 26 | color: props.get(vars.$heading-color); |
27 | text-align: start; | 27 | text-align: start; |
28 | text-transform: props.get(vars.$heading--text-transform); | 28 | text-transform: props.get(vars.$heading--text-transform); |
29 | letter-spacing: props.get(vars.$heading--letter-spacing); | 29 | letter-spacing: props.get(vars.$heading--letter-spacing); |
30 | } | 30 | } |
31 | 31 | ||
32 | @include bem.elem('cell') { | 32 | @include bem.elem('cell') { |
33 | padding-block: props.get(vars.$pad-b); | 33 | padding-block: props.get(vars.$pad-b); |
34 | padding-inline: props.get(vars.$pad-i); | 34 | padding-inline: props.get(vars.$pad-i); |
35 | border-color: props.get(vars.$border-color); | 35 | border-color: props.get(vars.$border-color); |
36 | border-style: solid; | 36 | border-style: solid; |
37 | border-width: 0; | 37 | border-width: 0; |
38 | border-block-start-width: props.get(vars.$border-width); | 38 | border-block-start-width: props.get(vars.$border-width); |
39 | 39 | ||
40 | @include bem.modifier('divider') { | 40 | @include bem.modifier('divider') { |
41 | border-inline-end-width: props.get(vars.$border-width); | 41 | border-inline-end-width: props.get(vars.$border-width); |
42 | } | 42 | } |
43 | } | 43 | } |
44 | 44 | ||
45 | @include bem.elem('row') { | 45 | @include bem.elem('row') { |
46 | &:last-child { | 46 | &:last-child { |
47 | @include bem.elem('cell') { | 47 | @include bem.elem('cell') { |
48 | border-block-end-width: props.get(vars.$border-width); | 48 | border-block-end-width: props.get(vars.$border-width); |
49 | } | 49 | } |
50 | } | 50 | } |
51 | } | 51 | } |
52 | 52 | ||
53 | @include bem.modifier('flush') { | 53 | @include bem.modifier('flush') { |
54 | @include bem.elem('head-cell', 'cell') { | 54 | @include bem.elem('head-cell', 'cell') { |
55 | &:first-child { | 55 | &:first-child { |
56 | padding-inline-start: 0; | 56 | padding-inline-start: 0; |
57 | } | 57 | } |
58 | 58 | ||
59 | &:last-child { | 59 | &:last-child { |
60 | padding-inline-end: 0; | 60 | padding-inline-end: 0; |
61 | } | 61 | } |
62 | } | 62 | } |
63 | } | 63 | } |
64 | 64 | ||
65 | @include bem.modifier('box') { | 65 | @include bem.modifier('box') { |
66 | @include bem.elem('cell') { | 66 | @include bem.elem('cell') { |
67 | background-color: props.get(vars.$box--bg-color); | 67 | background-color: props.get(vars.$box--bg-color); |
68 | 68 | ||
69 | &:first-child { | 69 | &:first-child { |
70 | border-inline-start-width: props.get(vars.$border-width); | 70 | border-inline-start-width: props.get(vars.$border-width); |
71 | } | 71 | } |
72 | 72 | ||
73 | &:last-child { | 73 | &:last-child { |
74 | border-inline-end-width: props.get(vars.$border-width); | 74 | border-inline-end-width: props.get(vars.$border-width); |
75 | } | 75 | } |
76 | } | 76 | } |
77 | 77 | ||
78 | @include bem.elem('row') { | 78 | @include bem.elem('row') { |
79 | &:first-child { | 79 | &:first-child { |
80 | @include bem.elem('cell') { | 80 | @include bem.elem('cell') { |
81 | &:first-child { | 81 | &:first-child { |
82 | border-start-start-radius: props.get(vars.$rounding); | 82 | border-start-start-radius: props.get(vars.$rounding); |
83 | } | 83 | } |
84 | 84 | ||
85 | &:last-child { | 85 | &:last-child { |
86 | border-start-end-radius: props.get(vars.$rounding); | 86 | border-start-end-radius: props.get(vars.$rounding); |
87 | } | 87 | } |
88 | } | 88 | } |
89 | } | 89 | } |
90 | 90 | ||
91 | &:last-child { | 91 | &:last-child { |
92 | @include bem.elem('cell') { | 92 | @include bem.elem('cell') { |
93 | &:first-child { | 93 | &:first-child { |
94 | border-end-start-radius: props.get(vars.$rounding); | 94 | border-end-start-radius: props.get(vars.$rounding); |
95 | } | 95 | } |
96 | 96 | ||
97 | &:last-child { | 97 | &:last-child { |
98 | border-end-end-radius: props.get(vars.$rounding); | 98 | border-end-end-radius: props.get(vars.$rounding); |
99 | } | 99 | } |
100 | } | 100 | } |
101 | } | 101 | } |
102 | } | 102 | } |
103 | } | 103 | } |
104 | 104 | ||
105 | @include bem.modifier('interactive') { | 105 | @include bem.modifier('interactive') { |
106 | @include bem.elem('row') { | 106 | @include bem.elem('row') { |
107 | @include bem.elem('cell') { | 107 | @include bem.elem('cell') { |
108 | cursor: pointer; | 108 | cursor: pointer; |
109 | } | 109 | } |
110 | 110 | ||
111 | &:hover { | 111 | &:hover { |
112 | @include bem.elem('cell') { | 112 | @include bem.elem('cell') { |
113 | background-color: props.get(vars.$hover--bg-color); | 113 | background-color: props.get(vars.$hover--bg-color); |
114 | } | 114 | } |
115 | } | 115 | } |
116 | 116 | ||
117 | &:active { | 117 | &:active { |
118 | @include bem.elem('cell') { | 118 | @include bem.elem('cell') { |
119 | background-color: props.get(vars.$active--bg-color); | 119 | background-color: props.get(vars.$active--bg-color); |
120 | } | 120 | } |
121 | } | 121 | } |
122 | } | 122 | } |
123 | 123 | ||
124 | @include bem.modifier('box') { | 124 | @include bem.modifier('box') { |
125 | @include bem.elem('row') { | 125 | @include bem.elem('row') { |
126 | &:hover { | 126 | &:hover { |
127 | @include bem.elem('cell') { | 127 | @include bem.elem('cell') { |
128 | background-color: props.get(vars.$box--hover--bg-color); | 128 | background-color: props.get(vars.$box--hover--bg-color); |
129 | } | 129 | } |
130 | } | 130 | } |
131 | 131 | ||
132 | &:active { | 132 | &:active { |
133 | @include bem.elem('cell') { | 133 | @include bem.elem('cell') { |
134 | background-color: props.get(vars.$box--active--bg-color); | 134 | background-color: props.get(vars.$box--active--bg-color); |
135 | } | 135 | } |
136 | } | 136 | } |
137 | } | 137 | } |
138 | } | 138 | } |
139 | } | 139 | } |
140 | 140 | ||
141 | @include bem.modifier('sm') { | 141 | @include bem.modifier('sm') { |
142 | @include bem.elem('head-cell', 'cell') { | 142 | @include bem.elem('head-cell', 'cell') { |
143 | padding-block: props.get(vars.$pad-b--sm); | 143 | padding-block: props.get(vars.$pad-b--sm); |
144 | } | 144 | } |
145 | } | 145 | } |
146 | } | 146 | } |
147 | } | 147 | } |
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss index d1d53d7..b8d8093 100644 --- a/src/objects/_table.vars.scss +++ b/src/objects/_table.vars.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | 4 | ||
5 | $pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; | 5 | $pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; |
6 | $pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; | 6 | $pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; |
7 | $rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default; | 7 | $rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default; |
8 | $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; | 8 | $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; |
9 | 9 | ||
10 | $heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; | 10 | $heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; |
diff --git a/src/objects/_tabs.scss b/src/objects/_tabs.scss deleted file mode 100644 index 61085c2..0000000 --- a/src/objects/_tabs.scss +++ /dev/null | |||
@@ -1,127 +0,0 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:meta'; | ||
3 | @use 'sass:string'; | ||
4 | @use 'iro-sass/src/bem'; | ||
5 | @use 'iro-sass/src/props'; | ||
6 | @use '../props' as *; | ||
7 | |||
8 | @forward 'tabs.vars'; | ||
9 | @use 'tabs.vars' as vars; | ||
10 | |||
11 | @mixin styles { | ||
12 | @include materialize-at-root(meta.module-variables('vars')); | ||
13 | |||
14 | @include bem.object('tabs') { | ||
15 | position: relative; | ||
16 | display: flex; | ||
17 | gap: props.get(vars.$spacing); | ||
18 | min-inline-size: 0; | ||
19 | block-size: props.get(vars.$block-size); | ||
20 | padding-inline: calc(.5 * props.get(vars.$spacing)); | ||
21 | margin-inline: calc(-.5 * props.get(vars.$spacing)); | ||
22 | overflow-inline: auto; | ||
23 | |||
24 | &::after { | ||
25 | position: absolute; | ||
26 | inset-block-end: 0; | ||
27 | inset-inline: calc(.5 * props.get(vars.$spacing)); | ||
28 | z-index: -10; | ||
29 | block-size: props.get(vars.$indicator--width); | ||
30 | content: ''; | ||
31 | background-color: props.get(vars.$railing--bg-color); | ||
32 | } | ||
33 | |||
34 | @include bem.modifier('quiet') { | ||
35 | &::after { | ||
36 | display: none; | ||
37 | } | ||
38 | } | ||
39 | |||
40 | @include bem.modifier('adapt') { | ||
41 | block-size: 100%; | ||
42 | } | ||
43 | |||
44 | @include bem.elem('tab') { | ||
45 | position: relative; | ||
46 | display: flex; | ||
47 | align-items: center; | ||
48 | color: props.get(vars.$tab--text-color); | ||
49 | white-space: nowrap; | ||
50 | border-block: props.get(vars.$indicator--width) solid transparent; | ||
51 | |||
52 | &::before { | ||
53 | position: absolute; | ||
54 | inset-block-start: 50%; | ||
55 | inset-inline: calc(-1 * props.get(vars.$tab--pad-i)); | ||
56 | z-index: -10; | ||
57 | block-size: 1.5em; | ||
58 | content: ''; | ||
59 | border-radius: props.get(vars.$rounding); | ||
60 | transform: translateY(-50%); | ||
61 | } | ||
62 | |||
63 | &:link, | ||
64 | &:visited { | ||
65 | &:hover, | ||
66 | &:active, | ||
67 | &:focus-visible { | ||
68 | color: props.get(vars.$tab--selected--text-color); | ||
69 | } | ||
70 | |||
71 | &:focus-visible { | ||
72 | &::before { | ||
73 | color: props.get(vars.$key-focus--text-color); | ||
74 | text-decoration: none; | ||
75 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | ||
76 | box-shadow: 0 0 0 | ||
77 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
78 | props.get(vars.$key-focus--outline-color); | ||
79 | } | ||
80 | } | ||
81 | } | ||
82 | |||
83 | @include bem.is('selected') { | ||
84 | color: props.get(vars.$tab--selected--text-color); | ||
85 | border-block-end-color: props.get(vars.$tab--selected--text-color); | ||
86 | } | ||
87 | } | ||
88 | |||
89 | @include bem.elem('caret') { | ||
90 | display: none; | ||
91 | } | ||
92 | |||
93 | @include bem.modifier('accent') { | ||
94 | @include bem.elem('tab') { | ||
95 | @include bem.is('selected') { | ||
96 | color: props.get(vars.$tab--accent--text-color); | ||
97 | border-block-end-color: props.get(vars.$tab--accent--text-color); | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | |||
102 | @include bem.is('collapsed') { | ||
103 | @include bem.elem('tab') { | ||
104 | display: none; | ||
105 | |||
106 | @include bem.is('selected') { | ||
107 | display: flex; | ||
108 | color: props.get(vars.$tab--text-color); | ||
109 | border-block-end-color: transparent; | ||
110 | |||
111 | &:link, | ||
112 | &:visited { | ||
113 | &:hover, | ||
114 | &:active, | ||
115 | &:focus-visible { | ||
116 | color: props.get(vars.$tab--selected--text-color); | ||
117 | } | ||
118 | } | ||
119 | } | ||
120 | } | ||
121 | |||
122 | @include bem.elem('caret') { | ||
123 | display: block; | ||
124 | } | ||
125 | } | ||
126 | } | ||
127 | } | ||
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss deleted file mode 100644 index 08b24cb..0000000 --- a/src/objects/_tabs.vars.scss +++ /dev/null | |||
@@ -1,25 +0,0 @@ | |||
1 | @use 'sass:map'; | ||
2 | @use 'sass:string'; | ||
3 | @use 'iro-sass/src/props'; | ||
4 | @use '../core.vars' as core; | ||
5 | |||
6 | $block-size: props.def(--o-tabs--block-size, props.get(core.$size--700)) !default; | ||
7 | $rounding: props.def(--o-tabs--rounding, props.get(core.$rounding)) !default; | ||
8 | $spacing: props.def(--o-tabs--spacing, props.get(core.$size--400)) !default; | ||
9 | $tab--pad-i: props.def(--o-tabs--tab--pad-i, props.get(core.$size--50)) !default; | ||
10 | |||
11 | $indicator--width: props.def(--o-tabs--indicator--width, props.get(core.$border-width--medium)) !default; | ||
12 | |||
13 | $key-focus--border-width: props.def(--o-tabs--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | ||
14 | $key-focus--border-offset: props.def(--o-tabs--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; | ||
15 | $key-focus--outline-width: props.def(--o-tabs--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; | ||
16 | |||
17 | $tab--text-color: props.def(--o-tabs--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default; | ||
18 | $tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; | ||
19 | $tab--accent--text-color: props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; | ||
20 | |||
21 | $railing--bg-color: props.def(--o-tabs--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
22 | |||
23 | $key-focus--text-color: props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; | ||
24 | $key-focus--border-color: props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; | ||
25 | $key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; | ||
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 6c0e7d2..b89e148 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss | |||
@@ -7,159 +7,181 @@ | |||
7 | @use 'text-field.vars' as vars; | 7 | @use 'text-field.vars' as vars; |
8 | 8 | ||
9 | @mixin -invalid { | 9 | @mixin -invalid { |
10 | $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); | 10 | $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); |
11 | 11 | ||
12 | @include bem.sibling-elem('bg') { | 12 | @include bem.sibling-elem('bg') { |
13 | inset-block: $focus-border-offset; | 13 | inset-block: $focus-border-offset; |
14 | inset-inline: $focus-border-offset; | 14 | inset-inline: $focus-border-offset; |
15 | border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); | 15 | border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); |
16 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | 16 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
17 | } | 17 | } |
18 | 18 | ||
19 | &:hover { | 19 | &:hover { |
20 | @include bem.sibling-elem('bg') { | 20 | @include bem.sibling-elem('bg') { |
21 | border-color: props.get(vars.$error--hover--border-color); | 21 | border-color: props.get(vars.$error--hover--border-color); |
22 | } | 22 | } |
23 | } | 23 | } |
24 | 24 | ||
25 | &:focus { | 25 | &:focus { |
26 | @include bem.sibling-elem('bg') { | 26 | @include bem.sibling-elem('bg') { |
27 | border-color: props.get(vars.$error--focus--border-color); | 27 | border-color: props.get(vars.$error--focus--border-color); |
28 | } | 28 | } |
29 | } | 29 | } |
30 | } | 30 | } |
31 | 31 | ||
32 | @mixin -keyboard-focus { | 32 | @mixin -keyboard-focus { |
33 | @include bem.sibling-elem('bg') { | 33 | @include bem.sibling-elem('bg') { |
34 | border-color: props.get(vars.$key-focus--border-color); | 34 | outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); |
35 | outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); | 35 | border-color: props.get(vars.$key-focus--border-color); |
36 | //outline-offset: props.get(vars.$focus --border); | 36 | //outline-offset: props.get(vars.$focus --border); |
37 | } | 37 | } |
38 | } | 38 | } |
39 | 39 | ||
40 | @mixin styles { | 40 | @mixin styles { |
41 | @include materialize-at-root(meta.module-variables('vars')); | 41 | @include materialize-at-root(meta.module-variables('vars')); |
42 | 42 | ||
43 | @include bem.object('text-field') { | 43 | @include bem.object('text-field') { |
44 | $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); | 44 | $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); |
45 | 45 | ||
46 | position: relative; | 46 | position: relative; |
47 | min-inline-size: 0; | 47 | min-inline-size: 0; |
48 | background-color: props.get(vars.$bg-color); | 48 | background-color: props.get(vars.$bg-color); |
49 | border-radius: props.get(vars.$rounding); | 49 | border-radius: props.get(vars.$rounding); |
50 | 50 | ||
51 | @include bem.elem('bg') { | 51 | @include bem.elem('bg') { |
52 | position: absolute; | 52 | position: absolute; |
53 | inset-block: 0; | 53 | inset-block: 0; |
54 | inset-inline: 0; | 54 | inset-inline: 0; |
55 | display: block; | 55 | display: block; |
56 | pointer-events: none; | 56 | pointer-events: none; |
57 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); | 57 | border: props.get(vars.$border-width) solid props.get(vars.$border-color); |
58 | border-radius: props.get(vars.$rounding); | 58 | border-radius: props.get(vars.$rounding); |
59 | } | 59 | } |
60 | 60 | ||
61 | @include bem.elem('native') { | 61 | @include bem.elem('native') { |
62 | box-sizing: border-box; | 62 | box-sizing: border-box; |
63 | inline-size: 100%; | 63 | inline-size: 100%; |
64 | padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); | 64 | padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); |
65 | padding-inline: props.get(vars.$pad-i); | 65 | padding-inline: props.get(vars.$pad-i); |
66 | font: inherit; | 66 | font: inherit; |
67 | line-height: props.get(vars.$line-height); | 67 | line-height: props.get(vars.$line-height); |
68 | color: props.get(vars.$text-color); | 68 | color: props.get(vars.$text-color); |
69 | appearance: none; | 69 | appearance: none; |
70 | resize: none; | 70 | resize: none; |
71 | background-color: transparent; | 71 | background-color: transparent; |
72 | border: 1px solid transparent; | 72 | border: 1px solid transparent; |
73 | 73 | ||
74 | &::placeholder { | 74 | &::placeholder { |
75 | font-style: italic; | 75 | font-style: italic; |
76 | color: props.get(vars.$placeholder-color); | 76 | color: props.get(vars.$placeholder-color); |
77 | opacity: 1; | 77 | opacity: 1; |
78 | } | 78 | } |
79 | 79 | ||
80 | &:hover { | 80 | &:hover { |
81 | @include bem.sibling-elem('bg') { | 81 | @include bem.sibling-elem('bg') { |
82 | border-color: props.get(vars.$hover--border-color); | 82 | border-color: props.get(vars.$hover--border-color); |
83 | } | 83 | } |
84 | } | 84 | } |
85 | 85 | ||
86 | &:focus { | 86 | &:focus { |
87 | outline: 0; | 87 | outline: 0; |
88 | 88 | ||
89 | @include bem.sibling-elem('bg') { | 89 | @include bem.sibling-elem('bg') { |
90 | inset-block: $focus-border-offset; | 90 | inset-block: $focus-border-offset; |
91 | inset-inline: $focus-border-offset; | 91 | inset-inline: $focus-border-offset; |
92 | border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); | 92 | border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); |
93 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | 93 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
94 | } | 94 | } |
95 | } | 95 | } |
96 | 96 | ||
97 | &:invalid { | 97 | &:invalid { |
98 | @include -invalid; | 98 | @include -invalid; |
99 | } | 99 | } |
100 | 100 | ||
101 | &:focus-visible, | 101 | &:focus-visible, |
102 | &:invalid:focus-visible { | 102 | &:invalid:focus-visible { |
103 | @include -keyboard-focus; | 103 | @include -keyboard-focus; |
104 | } | 104 | } |
105 | } | 105 | } |
106 | 106 | ||
107 | @include bem.modifier('extended') { | 107 | @include bem.modifier('extended') { |
108 | padding: props.get(vars.$extended--pad); | 108 | padding: props.get(vars.$extended--pad); |
109 | 109 | ||
110 | @include bem.multi('&', 'elem' 'bg') { | 110 | @include bem.multi('&', 'elem' 'bg') { |
111 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); | 111 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); |
112 | } | 112 | } |
113 | 113 | ||
114 | @include bem.elem('native') { | 114 | @include bem.elem('native') { |
115 | &:focus { | 115 | &:focus { |
116 | @include bem.sibling-elem('bg') { | 116 | @include bem.sibling-elem('bg') { |
117 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); | 117 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); |
118 | } | 118 | } |
119 | } | 119 | } |
120 | } | 120 | } |
121 | } | 121 | } |
122 | 122 | ||
123 | @include bem.is('invalid') { | 123 | @include bem.modifier('pill') { |
124 | @include bem.elem('native') { | 124 | @include bem.multi('&', 'elem' 'bg') { |
125 | @include -invalid; | 125 | border-radius: 100em; |
126 | } | ||
126 | 127 | ||
127 | &:focus-visible { | 128 | @include bem.elem('native') { |
128 | @include -keyboard-focus; | 129 | padding-inline: props.get(vars.$pad-i-pill); |
129 | } | ||
130 | } | ||
131 | } | ||
132 | 130 | ||
133 | @include bem.is('disabled') { | 131 | &:focus { |
134 | background-color: props.get(vars.$disabled--bg-color); | 132 | @include bem.sibling-elem('bg') { |
133 | border-radius: 100em; | ||
134 | } | ||
135 | } | ||
136 | } | ||
135 | 137 | ||
136 | @include bem.elem('native') { | 138 | @include bem.modifier('extended') { |
137 | color: props.get(vars.$disabled--text-color); | 139 | @include bem.elem('native') { |
140 | padding-inline: props.get(vars.$pad-i); | ||
141 | } | ||
142 | } | ||
143 | } | ||
138 | 144 | ||
139 | &::placeholder { | 145 | @include bem.is('invalid') { |
140 | color: props.get(vars.$disabled--placeholder-color); | 146 | @include bem.elem('native') { |
141 | } | 147 | @include -invalid; |
142 | } | ||
143 | 148 | ||
144 | @include bem.elem('bg') { | 149 | &:focus-visible { |
145 | border-color: props.get(vars.$disabled--border-color); | 150 | @include -keyboard-focus; |
146 | } | 151 | } |
152 | } | ||
153 | } | ||
147 | 154 | ||
148 | @include bem.is('invalid') { | 155 | @include bem.is('disabled') { |
149 | @include bem.elem('native') { | 156 | background-color: props.get(vars.$disabled--bg-color); |
150 | @include bem.sibling-elem('bg') { | ||
151 | border-color: props.get(vars.$disabled--border-color); | ||
152 | } | ||
153 | } | ||
154 | } | ||
155 | 157 | ||
156 | @include bem.elem('native') { | 158 | @include bem.elem('native') { |
157 | &:invalid { | 159 | color: props.get(vars.$disabled--text-color); |
158 | @include bem.sibling-elem('bg') { | 160 | |
159 | border-color: props.get(vars.$disabled--border-color); | 161 | &::placeholder { |
160 | } | 162 | color: props.get(vars.$disabled--placeholder-color); |
161 | } | 163 | } |
162 | } | 164 | } |
163 | } | 165 | |
164 | } | 166 | @include bem.elem('bg') { |
167 | border-color: props.get(vars.$disabled--border-color); | ||
168 | } | ||
169 | |||
170 | @include bem.is('invalid') { | ||
171 | @include bem.elem('native') { | ||
172 | @include bem.sibling-elem('bg') { | ||
173 | border-color: props.get(vars.$disabled--border-color); | ||
174 | } | ||
175 | } | ||
176 | } | ||
177 | |||
178 | @include bem.elem('native') { | ||
179 | &:invalid { | ||
180 | @include bem.sibling-elem('bg') { | ||
181 | border-color: props.get(vars.$disabled--border-color); | ||
182 | } | ||
183 | } | ||
184 | } | ||
185 | } | ||
186 | } | ||
165 | } | 187 | } |
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss index 833eacb..51099d8 100644 --- a/src/objects/_text-field.vars.scss +++ b/src/objects/_text-field.vars.scss | |||
@@ -4,9 +4,10 @@ | |||
4 | 4 | ||
5 | $line-height: props.def(--o-text-field--line-height, 1.4) !default; | 5 | $line-height: props.def(--o-text-field--line-height, 1.4) !default; |
6 | $pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; | 6 | $pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; |
7 | $pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default; | ||
7 | $pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; | 8 | $pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; |
8 | $border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; | 9 | $border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; |
9 | $rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default; | 10 | $rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default; |
10 | 11 | ||
11 | $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; | 12 | $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; |
12 | 13 | ||
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss index 73a8cb0..60a98af 100644 --- a/src/objects/_thumbnail.scss +++ b/src/objects/_thumbnail.scss | |||
@@ -9,96 +9,96 @@ | |||
9 | @use 'thumbnail.vars' as vars; | 9 | @use 'thumbnail.vars' as vars; |
10 | 10 | ||
11 | @mixin styles { | 11 | @mixin styles { |
12 | @include materialize-at-root(meta.module-variables('vars')); | 12 | @include materialize-at-root(meta.module-variables('vars')); |
13 | 13 | ||
14 | @include bem.object('thumbnail') { | 14 | @include bem.object('thumbnail') { |
15 | position: relative; | 15 | position: relative; |
16 | display: block; | 16 | display: block; |
17 | flex: 0 0 auto; | 17 | flex: 0 0 auto; |
18 | inline-size: props.get(vars.$size); | 18 | inline-size: props.get(vars.$size); |
19 | block-size: props.get(vars.$size); | 19 | block-size: props.get(vars.$size); |
20 | overflow: hidden; | 20 | overflow: hidden; |
21 | border-radius: props.get(vars.$rounding); | 21 | outline: props.get(vars.$border-color) solid props.get(vars.$border-width); |
22 | outline: props.get(vars.$border-color) solid props.get(vars.$border-width); | 22 | outline-offset: calc(-1 * props.get(vars.$border-width)); |
23 | outline-offset: calc(-1 * props.get(vars.$border-width)); | 23 | border-radius: props.get(vars.$rounding); |
24 | opacity: .75; | 24 | opacity: .75; |
25 | 25 | ||
26 | &:hover, | 26 | &:hover, |
27 | &:active, | 27 | &:active, |
28 | &:focus-visible { | 28 | &:focus-visible { |
29 | outline-color: props.get(vars.$hover--border-color); | 29 | outline-color: props.get(vars.$hover--border-color); |
30 | opacity: 1; | 30 | opacity: 1; |
31 | } | 31 | } |
32 | 32 | ||
33 | @include bem.is('selected') { | 33 | @include bem.is('selected') { |
34 | $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); | 34 | $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); |
35 | 35 | ||
36 | margin: $focus-border-offset; | 36 | margin: $focus-border-offset; |
37 | border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); | 37 | outline: none; |
38 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | 38 | border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); |
39 | outline: none; | 39 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
40 | opacity: 1; | 40 | opacity: 1; |
41 | } | 41 | } |
42 | 42 | ||
43 | @include bem.elem('image') { | 43 | @include bem.elem('image') { |
44 | position: absolute; | 44 | position: absolute; |
45 | inset-block-start: 0; | 45 | inset-block-start: 0; |
46 | inset-inline-start: 0; | 46 | inset-inline-start: 0; |
47 | display: block; | 47 | display: block; |
48 | inline-size: 100%; | 48 | inline-size: 100%; |
49 | block-size: 100%; | 49 | block-size: 100%; |
50 | object-fit: cover; | 50 | object-fit: cover; |
51 | object-position: center center; | 51 | object-position: center center; |
52 | } | 52 | } |
53 | 53 | ||
54 | @include bem.elem('icon') { | 54 | @include bem.elem('icon') { |
55 | position: absolute; | 55 | position: absolute; |
56 | inset-block-start: 50%; | 56 | inset-block-start: 50%; |
57 | inset-inline-start: 50%; | 57 | inset-inline-start: 50%; |
58 | transform: translate(-50%, -50%); | 58 | transform: translate(-50%, -50%); |
59 | } | 59 | } |
60 | 60 | ||
61 | &:focus-visible { | 61 | &:focus-visible { |
62 | $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); | 62 | $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); |
63 | 63 | ||
64 | margin: $focus-border-offset; | 64 | margin: $focus-border-offset; |
65 | border: props.get(vars.$key-focus--border-offset) solid transparent; | 65 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); |
66 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); | 66 | outline-offset: 0; |
67 | outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); | 67 | border: props.get(vars.$key-focus--border-offset) solid transparent; |
68 | outline-offset: 0; | 68 | border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); |
69 | box-shadow: | 69 | box-shadow: |
70 | 0 | 70 | 0 |
71 | 0 | 71 | 0 |
72 | 0 | 72 | 0 |
73 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) | 73 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) |
74 | props.get(vars.$key-focus--outline-color); | 74 | props.get(vars.$key-focus--outline-color); |
75 | } | 75 | } |
76 | 76 | ||
77 | @each $theme in map.keys(props.get(vars.$static-themes)) { | 77 | @each $theme in map.keys(props.get(vars.$static-themes)) { |
78 | @include bem.modifier(string.slice($theme, 3)) { | 78 | @include bem.modifier(string.slice($theme, 3)) { |
79 | outline-color: props.get(vars.$static-themes, $theme, --border); | 79 | outline-color: props.get(vars.$static-themes, $theme, --border); |
80 | 80 | ||
81 | &:hover, | 81 | &:hover, |
82 | &:active, | 82 | &:active, |
83 | &:focus-visible { | 83 | &:focus-visible { |
84 | outline-color: props.get(vars.$static-themes, $theme, --hover, --border); | 84 | outline-color: props.get(vars.$static-themes, $theme, --hover, --border); |
85 | } | 85 | } |
86 | 86 | ||
87 | @include bem.is('selected') { | 87 | @include bem.is('selected') { |
88 | border-color: props.get(vars.$static-themes, $theme, --selected, --border); | 88 | border-color: props.get(vars.$static-themes, $theme, --selected, --border); |
89 | } | 89 | } |
90 | 90 | ||
91 | &:focus-visible { | 91 | &:focus-visible { |
92 | border-color: transparent; | 92 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); |
93 | outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); | 93 | border-color: transparent; |
94 | box-shadow: | 94 | box-shadow: |
95 | 0 | 95 | 0 |
96 | 0 | 96 | 0 |
97 | 0 | 97 | 0 |
98 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) | 98 | calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) |
99 | props.get(vars.$static-themes, $theme, --key-focus, --outline); | 99 | props.get(vars.$static-themes, $theme, --key-focus, --outline); |
100 | } | 100 | } |
101 | } | 101 | } |
102 | } | 102 | } |
103 | } | 103 | } |
104 | } | 104 | } |
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss index ba8cebe..e49e52e 100644 --- a/src/objects/_thumbnail.vars.scss +++ b/src/objects/_thumbnail.vars.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | @use '../core.vars' as core; | 4 | @use '../core.vars' as core; |
5 | 5 | ||
6 | $size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; | 6 | $size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; |
7 | $rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default; | 7 | $rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default; |
8 | $spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; | 8 | $spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default; |
9 | $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; | 9 | $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default; |
10 | 10 | ||
@@ -28,24 +28,24 @@ $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !def | |||
28 | $static-themes: props.def(--o-thumbnail, (), 'color'); | 28 | $static-themes: props.def(--o-thumbnail, (), 'color'); |
29 | 29 | ||
30 | @each $theme in map.keys(props.get(core.$transparent-colors)) { | 30 | @each $theme in map.keys(props.get(core.$transparent-colors)) { |
31 | $thumbnail-theme: --static-#{string.slice($theme, 3)}; | 31 | $thumbnail-theme: --static-#{string.slice($theme, 3)}; |
32 | 32 | ||
33 | $static-themes: props.merge($static-themes, ( | 33 | $static-themes: props.merge($static-themes, ( |
34 | $thumbnail-theme: ( | 34 | $thumbnail-theme: ( |
35 | --border: props.get(core.$transparent-colors, $theme, --400), | 35 | --border: props.get(core.$transparent-colors, $theme, --400), |
36 | 36 | ||
37 | --hover: ( | 37 | --hover: ( |
38 | --border: props.get(core.$transparent-colors, $theme, --500), | 38 | --border: props.get(core.$transparent-colors, $theme, --500), |
39 | ), | 39 | ), |
40 | 40 | ||
41 | --selected: ( | 41 | --selected: ( |
42 | --border: props.get(core.$transparent-colors, $theme, --900), | 42 | --border: props.get(core.$transparent-colors, $theme, --900), |
43 | ), | 43 | ), |
44 | 44 | ||
45 | --key-focus: ( | 45 | --key-focus: ( |
46 | --border: props.get(core.$transparent-colors, $theme, --900), | 46 | --border: props.get(core.$transparent-colors, $theme, --900), |
47 | --outline: props.get(core.$transparent-colors, $theme, --300), | 47 | --outline: props.get(core.$transparent-colors, $theme, --300), |
48 | ), | 48 | ), |
49 | ) | 49 | ) |
50 | )); | 50 | )); |
51 | } | 51 | } |