diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_avatar.scss | 11 | ||||
-rw-r--r-- | src/objects/_avatar.vars.scss | 6 | ||||
-rw-r--r-- | src/objects/_badge.vars.scss | 2 | ||||
-rw-r--r-- | src/objects/_button.vars.scss | 2 | ||||
-rw-r--r-- | src/objects/_card.scss | 48 | ||||
-rw-r--r-- | src/objects/_card.vars.scss | 12 | ||||
-rw-r--r-- | src/objects/_divider.scss | 30 | ||||
-rw-r--r-- | src/objects/_divider.vars.scss | 8 | ||||
-rw-r--r-- | src/objects/_figure.scss | 26 | ||||
-rw-r--r-- | src/objects/_figure.vars.scss | 9 | ||||
-rw-r--r-- | src/objects/_heading.scss | 2 | ||||
-rw-r--r-- | src/objects/_heading.vars.scss | 2 | ||||
-rw-r--r-- | src/objects/_navbar.vars.scss | 2 | ||||
-rw-r--r-- | src/objects/_placeholders.scss | 22 | ||||
-rw-r--r-- | src/objects/_placeholders.vars.scss | 6 | ||||
-rw-r--r-- | src/objects/_tabbar.scss | 113 | ||||
-rw-r--r-- | src/objects/_tabbar.vars.scss | 25 | ||||
-rw-r--r-- | src/objects/_tabs.scss | 127 | ||||
-rw-r--r-- | src/objects/_tabs.vars.scss | 25 |
19 files changed, 308 insertions, 170 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index fc4ffcd..81396e3 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss | |||
@@ -11,7 +11,7 @@ | |||
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)), |
@@ -94,6 +94,15 @@ | |||
94 | } | 94 | } |
95 | } | 95 | } |
96 | 96 | ||
97 | @include bem.modifier('colored-gradient') { | ||
98 | @include bem.elem('content') { | ||
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 | |||
97 | @each $mod, $size, $font-size, $indicator-size in vars.$sizes { | 106 | @each $mod, $size, $font-size, $indicator-size in vars.$sizes { |
98 | @include bem.modifier($mod) { | 107 | @include bem.modifier($mod) { |
99 | font-size: props.get($font-size); | 108 | font-size: props.get($font-size); |
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss index 72fb397..9986de5 100644 --- a/src/objects/_avatar.vars.scss +++ b/src/objects/_avatar.vars.scss | |||
@@ -39,6 +39,12 @@ $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 | ||
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index 6327e7b..ff07148 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss | |||
@@ -73,7 +73,7 @@ $default-theme: props.def(--o-badge, ( | |||
73 | --label: props.get(core.$theme, --heading), | 73 | --label: props.get(core.$theme, --heading), |
74 | ), | 74 | ), |
75 | ) | 75 | ) |
76 | ), 'color'); | 76 | ), 'color') !default; |
77 | $default-theme: props.merge($default-theme, $default-theme-override); | 77 | $default-theme: props.merge($default-theme, $default-theme-override); |
78 | 78 | ||
79 | $static-themes: props.def(--o-badge, (), 'color'); | 79 | $static-themes: props.def(--o-badge, (), 'color'); |
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index f70bde7..4f7b552 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss | |||
@@ -81,7 +81,7 @@ $default-theme: props.def(--o-button, ( | |||
81 | --label: props.get(core.$theme, --base, --700-text), | 81 | --label: props.get(core.$theme, --base, --700-text), |
82 | ), | 82 | ), |
83 | ), | 83 | ), |
84 | ), 'color'); | 84 | ), 'color') !default; |
85 | $default-theme: props.merge($default-theme, $default-theme-override); | 85 | $default-theme: props.merge($default-theme, $default-theme-override); |
86 | 86 | ||
87 | $static-themes: props.def(--o-button, (), 'color'); | 87 | $static-themes: props.def(--o-button, (), 'color'); |
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index e6f266d..c87e676 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
@@ -55,11 +55,13 @@ | |||
55 | } | 55 | } |
56 | 56 | ||
57 | @include bem.elem('image') { | 57 | @include bem.elem('image') { |
58 | position: relative; | ||
58 | display: block; | 59 | display: block; |
59 | flex: 0 0 auto; | 60 | flex: 0 0 auto; |
60 | inline-size: 100%; | 61 | inline-size: 100%; |
62 | overflow: hidden; | ||
61 | object-fit: cover; | 63 | object-fit: cover; |
62 | transition: transform .2s, opacity .2s; | 64 | transition: background-color .2s, transform .2s, opacity .2s; |
63 | 65 | ||
64 | &:first-child { | 66 | &:first-child { |
65 | border-start-start-radius: props.get(vars.$rounding); | 67 | border-start-start-radius: props.get(vars.$rounding); |
@@ -76,6 +78,21 @@ | |||
76 | } | 78 | } |
77 | } | 79 | } |
78 | 80 | ||
81 | @include bem.elem('image-img') { | ||
82 | display: block; | ||
83 | inline-size: 100%; | ||
84 | object-fit: cover; | ||
85 | } | ||
86 | |||
87 | @include bem.elem('image-overlay') { | ||
88 | position: absolute; | ||
89 | inset-block-end: 0; | ||
90 | inset-inline: 0; | ||
91 | z-index: 5; | ||
92 | padding-block: props.get(vars.$image-overlay--pad-b); | ||
93 | padding-inline: props.get(vars.$image-overlay--pad-i); | ||
94 | } | ||
95 | |||
79 | @include bem.elem('body') { | 96 | @include bem.elem('body') { |
80 | flex: 1 0 auto; | 97 | flex: 1 0 auto; |
81 | padding-block: props.get(vars.$pad-b); | 98 | padding-block: props.get(vars.$pad-b); |
@@ -128,8 +145,7 @@ | |||
128 | } | 145 | } |
129 | 146 | ||
130 | @include bem.modifier('quiet') { | 147 | @include bem.modifier('quiet') { |
131 | position: relative; | 148 | margin-inline: 0; |
132 | margin: 0; | ||
133 | background-color: transparent; | 149 | background-color: transparent; |
134 | border: 0; | 150 | border: 0; |
135 | 151 | ||
@@ -144,6 +160,12 @@ | |||
144 | opacity: .75; | 160 | opacity: .75; |
145 | transform: translateY(props.get(vars.$hover--offset-b)); | 161 | transform: translateY(props.get(vars.$hover--offset-b)); |
146 | } | 162 | } |
163 | |||
164 | @include bem.elem('body') { | ||
165 | @include bem.modifier('hidden') { | ||
166 | transform: translateY(props.get(vars.$hover--offset-b)); | ||
167 | } | ||
168 | } | ||
147 | } | 169 | } |
148 | 170 | ||
149 | &:focus-visible { | 171 | &:focus-visible { |
@@ -176,6 +198,11 @@ | |||
176 | @include bem.elem('body') { | 198 | @include bem.elem('body') { |
177 | padding: 0; | 199 | padding: 0; |
178 | padding-block-start: props.get(vars.$spacing); | 200 | padding-block-start: props.get(vars.$spacing); |
201 | |||
202 | @include bem.modifier('hidden') { | ||
203 | padding-block: props.get(vars.$pad-b); | ||
204 | padding-inline: props.get(vars.$pad-i); | ||
205 | } | ||
179 | } | 206 | } |
180 | 207 | ||
181 | @include bem.elem('footer') { | 208 | @include bem.elem('footer') { |
@@ -187,6 +214,21 @@ | |||
187 | flex-direction: row; | 214 | flex-direction: row; |
188 | align-items: center; | 215 | align-items: center; |
189 | 216 | ||
217 | @include bem.elem('image') { | ||
218 | align-self: stretch; | ||
219 | inline-size: auto; | ||
220 | |||
221 | &:first-child { | ||
222 | border-start-end-radius: 0; | ||
223 | border-end-start-radius: props.get(vars.$rounding); | ||
224 | } | ||
225 | |||
226 | &:last-child { | ||
227 | border-start-end-radius: props.get(vars.$rounding); | ||
228 | border-end-start-radius: 0; | ||
229 | } | ||
230 | } | ||
231 | |||
190 | @include bem.elem('body') { | 232 | @include bem.elem('body') { |
191 | flex: 0 0 auto; | 233 | flex: 0 0 auto; |
192 | 234 | ||
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index 8ee7158..8adbcde 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss | |||
@@ -2,11 +2,13 @@ | |||
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 | $pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; |
7 | $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; | 7 | $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; |
8 | $spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; | 8 | $spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; |
9 | $rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; | 9 | $rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; |
10 | $image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default; | ||
11 | $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default; | ||
10 | 12 | ||
11 | $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; | 13 | $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; |
12 | 14 | ||
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 65f1718..4ed8092 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss | |||
@@ -46,10 +46,24 @@ | |||
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 | |||
54 | &::before, | ||
55 | &::after { | ||
56 | display: none; | ||
57 | } | ||
58 | } | ||
59 | |||
60 | @include bem.modifier('dot') { | ||
61 | align-self: center; | ||
62 | inline-size: props.get(vars.$dot--size); | ||
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); | ||
53 | 67 | ||
54 | &::before, | 68 | &::before, |
55 | &::after { | 69 | &::after { |
@@ -67,6 +81,14 @@ | |||
67 | block-size: props.get(vars.$medium--border-width); | 81 | block-size: props.get(vars.$medium--border-width); |
68 | background-color: props.get(vars.$medium--bg-color); | 82 | background-color: props.get(vars.$medium--bg-color); |
69 | } | 83 | } |
84 | |||
85 | @include bem.modifier('vertical') { | ||
86 | background-color: props.get(vars.$medium--bg-color); | ||
87 | } | ||
88 | |||
89 | @include bem.modifier('dot') { | ||
90 | background-color: props.get(vars.$medium--bg-color); | ||
91 | } | ||
70 | } | 92 | } |
71 | 93 | ||
72 | @include bem.modifier('faint') { | 94 | @include bem.modifier('faint') { |
@@ -83,6 +105,10 @@ | |||
83 | @include bem.modifier('vertical') { | 105 | @include bem.modifier('vertical') { |
84 | background-color: props.get(vars.$vertical--faint--bg-color); | 106 | background-color: props.get(vars.$vertical--faint--bg-color); |
85 | } | 107 | } |
108 | |||
109 | @include bem.modifier('dot') { | ||
110 | background-color: props.get(vars.$dot--faint--bg-color); | ||
111 | } | ||
86 | } | 112 | } |
87 | 113 | ||
88 | @include bem.modifier('labelled') { | 114 | @include bem.modifier('labelled') { |
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 1117fd5..5cd68c1 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; |
@@ -23,7 +25,9 @@ $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core | |||
23 | $faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; | 25 | $faint--bg-color: props.def(--o-divider--faint--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; | 26 | $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default; |
25 | 27 | ||
26 | $vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | 28 | $vertical--faint--bg-color: props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; |
29 | |||
30 | $dot--faint--bg-color: props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; | ||
27 | 31 | ||
28 | $static-themes: props.def(--o-divider, (), 'color'); | 32 | $static-themes: props.def(--o-divider, (), 'color'); |
29 | 33 | ||
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss new file mode 100644 index 0000000..38837be --- /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..bdc7027 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss | |||
@@ -19,7 +19,6 @@ | |||
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); |
@@ -53,6 +52,7 @@ | |||
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); |
55 | transform: translateX(props.get(vars.$offset)); | ||
56 | } | 56 | } |
57 | } | 57 | } |
58 | } | 58 | } |
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index 5cd6767..90278c8 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss | |||
@@ -5,7 +5,7 @@ $offset: props.def(--o-heading--offset, -.02em) !default; | |||
5 | $margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; | 5 | $margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; |
6 | $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; | 6 | $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; |
7 | 7 | ||
8 | $text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color'); | 8 | $text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default; |
9 | $bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; | 9 | $bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default; |
10 | 10 | ||
11 | $font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default; | 11 | $font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default; |
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss index da280fd..fcdac80 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 | ||
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss new file mode 100644 index 0000000..e148f21 --- /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/_tabbar.scss b/src/objects/_tabbar.scss new file mode 100644 index 0000000..131c832 --- /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..f4486d6 --- /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)) !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/_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; | ||