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.scss51
1 files changed, 23 insertions, 28 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 655080f..465bbcf 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -4,7 +4,7 @@
4@include iro.props-namespace('divider') { 4@include iro.props-namespace('divider') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --margin-y: fn.global-dim(--size --85), 7 --margin-b: fn.global-dim(--size --85),
8 8
9 --strong: ( 9 --strong: (
10 --border: fn.global-dim(--border --thick), 10 --border: fn.global-dim(--border --thick),
@@ -19,52 +19,48 @@
19 --label-font-size: fn.global-dim(--font-size --50), 19 --label-font-size: fn.global-dim(--font-size --50),
20 ), 20 ),
21 ), 21 ),
22 ), 'dims');
23
24 @include iro.props-store((
25 --colors: ( 22 --colors: (
26 --strong: ( 23 --strong: (
27 --bg: fn.global-color(--fg), 24 --bg: fn.global-color(--text),
28 --label: fn.global-color(--fg), 25 --label: fn.global-color(--text),
29 ), 26 ),
30 --medium: ( 27 --medium: (
31 --bg: fn.global-color(--obj), 28 --bg: fn.global-color(--border),
32 --label: fn.global-color(--fg-hi), 29 --label: fn.global-color(--text-mute),
33 ), 30 ),
34 --faint: ( 31 --faint: (
35 --bg: fn.global-color(--obj), 32 --bg: fn.global-color(--border),
36 --label: fn.global-color(--fg-hi2), 33 --label: fn.global-color(--text-mute-more),
37 ), 34 ),
38 --blue: ( 35 --blue: (
39 --bg: fn.global-color(--blue --solid --bg), 36 --bg: fn.global-color(--blue --700),
40 --label: fn.global-color(--blue --solid --obj), 37 --label: fn.global-color(--blue --1000),
41 ), 38 ),
42 --purple: ( 39 --purple: (
43 --bg: fn.global-color(--purple --solid --bg), 40 --bg: fn.global-color(--purple --700),
44 --label: fn.global-color(--purple --solid --obj), 41 --label: fn.global-color(--purple --1000),
45 ), 42 ),
46 --red: ( 43 --red: (
47 --bg: fn.global-color(--red --solid --bg), 44 --bg: fn.global-color(--red --700),
48 --label: fn.global-color(--red --solid --obj), 45 --label: fn.global-color(--red --1000),
49 ), 46 ),
50 --green: ( 47 --green: (
51 --bg: fn.global-color(--green --solid --bg), 48 --bg: fn.global-color(--green --700),
52 --label: fn.global-color(--green --solid --obj), 49 --label: fn.global-color(--green --1000),
53 ), 50 ),
54 --yellow: ( 51 --yellow: (
55 --bg: fn.global-color(--yellow --solid --bg), 52 --bg: fn.global-color(--yellow --700),
56 --label: fn.global-color(--yellow --solid --obj), 53 --label: fn.global-color(--yellow --1000),
57 ), 54 ),
58 ), 55 ),
59 ), 'colors'); 56 ));
60 57
61 @include iro.bem-object(iro.props-namespace()) { 58 @include iro.bem-object(iro.props-namespace()) {
62 display: flex; 59 display: flex;
63 flex-direction: row; 60 flex-direction: row;
64 align-items: center; 61 align-items: center;
65 height: 1em; 62 height: 1em;
66 margin-top: fn.dim(--margin-y); 63 margin-block: fn.dim(--margin-b);
67 margin-bottom: fn.dim(--margin-y);
68 color: fn.color(--strong --label); 64 color: fn.color(--strong --label);
69 font-size: fn.dim(--strong --label-font-size); 65 font-size: fn.dim(--strong --label-font-size);
70 font-weight: 700; 66 font-weight: 700;
@@ -93,8 +89,7 @@
93 align-self: stretch; 89 align-self: stretch;
94 width: 1px; 90 width: 1px;
95 height: auto; 91 height: auto;
96 margin-top: 0; 92 margin-block: 0;
97 margin-bottom: 0;
98 background-color: fn.color(--faint --bg); 93 background-color: fn.color(--faint --bg);
99 94
100 &::before, 95 &::before,
@@ -129,12 +124,12 @@
129 124
130 @include iro.bem-modifier('labelled') { 125 @include iro.bem-modifier('labelled') {
131 &::before { 126 &::before {
132 margin-right: 1em; 127 margin-inline-end: 1em;
133 } 128 }
134 129
135 &::after { 130 &::after {
136 display: block; 131 display: block;
137 margin-left: 1em; 132 margin-inline-start: 1em;
138 } 133 }
139 } 134 }
140 135