summaryrefslogtreecommitdiffstats
path: root/src/objects/_divider.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_divider.scss')
-rw-r--r--src/objects/_divider.scss210
1 files changed, 90 insertions, 120 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index d1e2897..4ed8092 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,115 +1,69 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/index' as iro; 2@use 'sass:meta';
3@use '../functions' as fn; 3@use 'sass:string';
4@use '../config'; 4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7@use '../core.vars' as core;
5 8
6$static-themes: 'black' 'white' !default; 9@forward 'divider.vars';
10@use 'divider.vars' as vars;
7 11
8@include iro.props-namespace('divider') { 12@mixin styles {
9 @include iro.props-store(( 13 @include materialize-at-root(meta.module-variables('vars'));
10 --dims: (
11 --margin-b: fn.global-dim(--size --85),
12
13 --strong: (
14 --border: fn.global-dim(--border --thick),
15 --label-font-size: fn.global-dim(--font-size --100),
16 ),
17 --medium: (
18 --border: fn.global-dim(--border --medium),
19 --label-font-size: fn.global-dim(--font-size --75),
20 ),
21 --faint: (
22 --border: fn.global-dim(--border --thin),
23 --label-font-size: fn.global-dim(--font-size --50),
24 ),
25 ),
26 --colors: (
27 --strong: (
28 --bg: fn.global-color(--text),
29 --label: fn.global-color(--text),
30 ),
31 --medium: (
32 --bg: fn.global-color(--border),
33 --label: fn.global-color(--text-mute),
34 ),
35 --faint: (
36 --bg: fn.global-color(--border),
37 --label: fn.global-color(--text-mute-more),
38 ),
39 ),
40 ));
41
42 @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
43 @if $color != '--base' {
44 @include iro.props-store((
45 --colors: (
46 $color: (
47 --bg: fn.global-color($color --800),
48 --label: fn.global-color($color --1000),
49 )
50 ),
51 ));
52 }
53 }
54
55 @each $theme in $static-themes {
56 @include iro.props-store((
57 --colors: (
58 --static-#{$theme}: (
59 --strong: (
60 --bg: fn.global-color(--#{$theme}-transparent --800),
61 --label: fn.global-color(--#{$theme}-transparent --900),
62 ),
63 --medium: (
64 --bg: fn.global-color(--#{$theme}-transparent --300),
65 --label: fn.global-color(--#{$theme}-transparent --500),
66 ),
67 --faint: (
68 --bg: fn.global-color(--#{$theme}-transparent --300),
69 --label: fn.global-color(--#{$theme}-transparent --500),
70 ),
71 )
72 ),
73 ));
74 }
75 14
76 @include iro.bem-object(iro.props-namespace()) { 15 @include bem.object('divider') {
77 display: flex; 16 display: flex;
78 flex: 0 0 auto; 17 flex: 0 0 auto;
79 flex-direction: row; 18 flex-direction: row;
80 align-items: center; 19 align-items: center;
81 block-size: 1em; 20 block-size: 1em;
82 margin-block: fn.dim(--margin-b); 21 margin-block: props.get(vars.$margin-b);
83 color: fn.color(--strong --label); 22 font-size: props.get(vars.$strong--label-font-size);
84 font-size: fn.dim(--strong --label-font-size); 23 font-weight: 700;
85 font-weight: 700; 24 line-height: 1;
86 letter-spacing: .5px; 25 color: props.get(vars.$strong--label-color);
87 line-height: 1; 26 text-transform: uppercase;
88 text-transform: uppercase; 27 letter-spacing: .5px;
28 background-color: transparent;
89 29
90 &::before, 30 &::before,
91 &::after { 31 &::after {
92 content: '';
93 flex: 1 1 auto; 32 flex: 1 1 auto;
94 inline-size: 100%; 33 inline-size: 100%;
95 block-size: fn.dim(--strong --border); 34 block-size: props.get(vars.$strong--border-width);
96 background-color: fn.color(--strong --bg); 35 content: '';
36 background-color: props.get(vars.$strong--bg-color);
97 } 37 }
98 38
99 &::before { 39 &::before {
100 display: block; 40 display: block;
101 } 41 }
102 42
103 @include iro.bem-elem('label') { 43 @include bem.elem('label') {
104 flex: 0 0 auto; 44 flex: 0 0 auto;
105 } 45 }
106 46
107 @include iro.bem-modifier('vertical') { 47 @include bem.modifier('vertical') {
108 align-self: stretch; 48 align-self: stretch;
109 inline-size: 1px; 49 inline-size: props.get(vars.$vertical--border-width);
110 block-size: auto; 50 block-size: auto;
111 margin-block: 0; 51 margin-block: 0;
112 background-color: fn.color(--faint --bg); 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);
113 67
114 &::before, 68 &::before,
115 &::after { 69 &::after {
@@ -117,31 +71,47 @@ $static-themes: 'black' 'white' !default;
117 } 71 }
118 } 72 }
119 73
120 @include iro.bem-modifier('medium') { 74 @include bem.modifier('medium') {
121 color: fn.color(--medium --label); 75 font-size: props.get(vars.$medium--label-font-size);
122 font-size: fn.dim(--medium --label-font-size);
123 font-weight: 500; 76 font-weight: 500;
77 color: props.get(vars.$medium--label-color);
124 78
125 &::before, 79 &::before,
126 &::after { 80 &::after {
127 block-size: fn.dim(--medium --border); 81 block-size: props.get(vars.$medium--border-width);
128 background-color: fn.color(--medium --bg); 82 background-color: props.get(vars.$medium--bg-color);
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);
129 } 91 }
130 } 92 }
131 93
132 @include iro.bem-modifier('faint') { 94 @include bem.modifier('faint') {
133 color: fn.color(--faint --label); 95 font-size: props.get(vars.$faint--label-font-size);
134 font-size: fn.dim(--faint --label-font-size);
135 font-weight: 500; 96 font-weight: 500;
97 color: props.get(vars.$faint--label-color);
136 98
137 &::before, 99 &::before,
138 &::after { 100 &::after {
139 block-size: fn.dim(--faint --border); 101 block-size: props.get(vars.$faint--border-width);
140 background-color: fn.color(--faint --bg); 102 background-color: props.get(vars.$faint--bg-color);
103 }
104
105 @include bem.modifier('vertical') {
106 background-color: props.get(vars.$vertical--faint--bg-color);
107 }
108
109 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--faint--bg-color);
141 } 111 }
142 } 112 }
143 113
144 @include iro.bem-modifier('labelled') { 114 @include bem.modifier('labelled') {
145 &::before { 115 &::before {
146 margin-inline-end: 1em; 116 margin-inline-end: 1em;
147 } 117 }
@@ -152,49 +122,49 @@ $static-themes: 'black' 'white' !default;
152 } 122 }
153 } 123 }
154 124
155 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { 125 @each $theme in map.keys(props.get(vars.$themes)) {
156 @include iro.bem-modifier($color) { 126 @include bem.modifier(string.slice($theme, 3)) {
157 &::before, 127 &::before,
158 &::after { 128 &::after {
159 background-color: fn.color(--#{$color} --bg); 129 background-color: props.get(vars.$themes, $theme, --bg);
160 } 130 }
161 131
162 @include iro.bem-elem('label') { 132 @include bem.elem('label') {
163 color: fn.color(--#{$color} --label); 133 color: props.get(vars.$themes, $theme, --label);
164 } 134 }
165 } 135 }
166 } 136 }
167 137
168 @each $theme in $static-themes { 138 @each $theme in map.keys(props.get(vars.$static-themes)) {
169 @include iro.bem-modifier(static-#{$theme}) { 139 @include bem.modifier(string.slice($theme, 3)) {
170 &::before, 140 &::before,
171 &::after { 141 &::after {
172 background-color: fn.color(--static-#{$theme} --strong --bg); 142 background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
173 } 143 }
174 144
175 @include iro.bem-elem('label') { 145 @include bem.elem('label') {
176 color: fn.color(--static-#{$theme} --strong --label); 146 color: props.get(vars.$static-themes, $theme, --strong, --label);
177 } 147 }
178 148
179 @include iro.bem-modifier('medium') { 149 @include bem.modifier('medium') {
180 &::before, 150 &::before,
181 &::after { 151 &::after {
182 background-color: fn.color(--static-#{$theme} --medium --bg); 152 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
183 } 153 }
184 154
185 @include iro.bem-elem('label') { 155 @include bem.elem('label') {
186 color: fn.color(--static-#{$theme} --medium --label); 156 color: props.get(vars.$static-themes, $theme, --medium, --label);
187 } 157 }
188 } 158 }
189 159
190 @include iro.bem-modifier('faint') { 160 @include bem.modifier('faint') {
191 &::before, 161 &::before,
192 &::after { 162 &::after {
193 background-color: fn.color(--static-#{$theme} --faint --bg); 163 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
194 } 164 }
195 165
196 @include iro.bem-elem('label') { 166 @include bem.elem('label') {
197 color: fn.color(--static-#{$theme} --faint --label); 167 color: props.get(vars.$static-themes, $theme, --faint, --label);
198 } 168 }
199 } 169 }
200 } 170 }
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-01 07:41:42 +0000