diff options
author | Volpeon <git@volpeon.ink> | 2024-06-21 23:07:50 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-21 23:07:50 +0200 |
commit | 48cb00040763459fc46d4aa108bf72c12f48f422 (patch) | |
tree | 9609470d56bb31d55697ef0c42f1c908804dd3f1 /src/objects/_divider.scss | |
parent | Update (diff) | |
download | iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2 iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip |
WIP: Refactoring
Diffstat (limited to 'src/objects/_divider.scss')
-rw-r--r-- | src/objects/_divider.scss | 51 |
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 | ||