summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-24 22:05:17 +0200
committerVolpeon <git@volpeon.ink>2024-06-24 22:05:17 +0200
commitd94b62be5d36acecbd9f8e50ba4a8011856b28cd (patch)
tree4b7ae45d7aa25f331c4e3c664ac6c6a8ae0de8dd /src
parentAdd static button themes (diff)
downloadiro-design-d94b62be5d36acecbd9f8e50ba4a8011856b28cd.tar.gz
iro-design-d94b62be5d36acecbd9f8e50ba4a8011856b28cd.tar.bz2
iro-design-d94b62be5d36acecbd9f8e50ba4a8011856b28cd.zip
Add static divider styles
Diffstat (limited to 'src')
-rw-r--r--src/objects/_divider.scss58
1 files changed, 58 insertions, 0 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 5e80de4..29ab537 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -3,6 +3,8 @@
3@use '../functions' as fn; 3@use '../functions' as fn;
4@use '../config'; 4@use '../config';
5 5
6$static-themes: 'black' 'white';
7
6@include iro.props-namespace('divider') { 8@include iro.props-namespace('divider') {
7 @include iro.props-store(( 9 @include iro.props-store((
8 --dims: ( 10 --dims: (
@@ -50,6 +52,27 @@
50 } 52 }
51 } 53 }
52 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
53 @include iro.bem-object(iro.props-namespace()) { 76 @include iro.bem-object(iro.props-namespace()) {
54 display: flex; 77 display: flex;
55 flex-direction: row; 78 flex-direction: row;
@@ -140,5 +163,40 @@
140 } 163 }
141 } 164 }
142 } 165 }
166
167 @each $theme in $static-themes {
168 @include iro.bem-modifier(static-#{$theme}) {
169 &::before,
170 &::after {
171 background-color: fn.color(--static-#{$theme} --strong --bg);
172 }
173
174 @include iro.bem-elem('label') {
175 color: fn.color(--static-#{$theme} --strong --label);
176 }
177
178 @include iro.bem-modifier('medium') {
179 &::before,
180 &::after {
181 background-color: fn.color(--static-#{$theme} --medium --bg);
182 }
183
184 @include iro.bem-elem('label') {
185 color: fn.color(--static-#{$theme} --medium --label);
186 }
187 }
188
189 @include iro.bem-modifier('faint') {
190 &::before,
191 &::after {
192 background-color: fn.color(--static-#{$theme} --faint --bg);
193 }
194
195 @include iro.bem-elem('label') {
196 color: fn.color(--static-#{$theme} --faint --label);
197 }
198 }
199 }
200 }
143 } 201 }
144} 202}