diff options
Diffstat (limited to 'src/objects/_divider.scss')
-rw-r--r-- | src/objects/_divider.scss | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss new file mode 100644 index 0000000..cef598f --- /dev/null +++ b/src/objects/_divider.scss | |||
@@ -0,0 +1,131 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('divider') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --margin-y: fn.global-dim(--size --85), | ||
8 | |||
9 | --strong: ( | ||
10 | --border-width: fn.global-dim(--border-width --thick), | ||
11 | --label-font-size: fn.global-dim(--font-size --100), | ||
12 | ), | ||
13 | --medium: ( | ||
14 | --border-width: fn.global-dim(--border-width --medium), | ||
15 | --label-font-size: fn.global-dim(--font-size --75), | ||
16 | ), | ||
17 | --faint: ( | ||
18 | --border-width: fn.global-dim(--border-width --thin), | ||
19 | --label-font-size: fn.global-dim(--font-size --50), | ||
20 | ), | ||
21 | ), | ||
22 | ), 'dims'); | ||
23 | |||
24 | @include iro.props-store(( | ||
25 | --colors: ( | ||
26 | --strong: ( | ||
27 | --bg: fn.global-color(--fg), | ||
28 | --label: fn.global-color(--fg), | ||
29 | ), | ||
30 | --medium: ( | ||
31 | --bg: fn.global-color(--obj), | ||
32 | --label: fn.global-color(--fg-hi), | ||
33 | ), | ||
34 | --faint: ( | ||
35 | --bg: fn.global-color(--obj), | ||
36 | --label: fn.global-color(--fg-hi2), | ||
37 | ), | ||
38 | ), | ||
39 | ), 'colors'); | ||
40 | |||
41 | @include iro.bem-object(iro.props-namespace()) { | ||
42 | display: block; | ||
43 | height: fn.dim(--strong --border-width); | ||
44 | margin-top: fn.dim(--margin-y); | ||
45 | margin-bottom: fn.dim(--margin-y); | ||
46 | background-color: fn.color(--strong --bg); | ||
47 | |||
48 | @include iro.bem-modifier('vertical') { | ||
49 | align-self: stretch; | ||
50 | width: 1px; | ||
51 | height: auto; | ||
52 | margin-top: 0; | ||
53 | margin-bottom: 0; | ||
54 | background-color: fn.color(--faint --bg); | ||
55 | } | ||
56 | |||
57 | @include iro.bem-modifier('medium') { | ||
58 | height: fn.dim(--medium --border-width); | ||
59 | background-color: fn.color(--medium --bg); | ||
60 | } | ||
61 | |||
62 | @include iro.bem-modifier('faint') { | ||
63 | height: fn.dim(--faint --border-width); | ||
64 | background-color: fn.color(--faint --bg); | ||
65 | } | ||
66 | |||
67 | @include iro.bem-modifier('labelled') { | ||
68 | display: flex; | ||
69 | flex-direction: row; | ||
70 | align-items: center; | ||
71 | height: auto; | ||
72 | border-radius: 0; | ||
73 | background-color: transparent; | ||
74 | |||
75 | &::before, | ||
76 | &::after { | ||
77 | content: ''; | ||
78 | display: block; | ||
79 | flex: 1 1 auto; | ||
80 | width: 100%; | ||
81 | height: 3px; | ||
82 | background-color: fn.color(--strong --bg); | ||
83 | } | ||
84 | |||
85 | &::before { | ||
86 | margin-right: 1em; | ||
87 | } | ||
88 | |||
89 | &::after { | ||
90 | margin-left: 1em; | ||
91 | } | ||
92 | |||
93 | @include iro.bem-elem('label') { | ||
94 | flex: 0 0 auto; | ||
95 | color: fn.color(--strong --label); | ||
96 | font-size: fn.dim(--strong --label-font-size); | ||
97 | font-weight: 700; | ||
98 | letter-spacing: .5px; | ||
99 | text-transform: uppercase; | ||
100 | } | ||
101 | |||
102 | @include iro.bem-modifier('medium') { | ||
103 | &::before, | ||
104 | &::after { | ||
105 | height: 2px; | ||
106 | background-color: fn.color(--medium --bg); | ||
107 | } | ||
108 | |||
109 | @include iro.bem-elem('label') { | ||
110 | color: fn.color(--medium --label); | ||
111 | font-size: fn.dim(--medium --label-font-size); | ||
112 | font-weight: 500; | ||
113 | } | ||
114 | } | ||
115 | |||
116 | @include iro.bem-modifier('faint') { | ||
117 | &::before, | ||
118 | &::after { | ||
119 | height: 1px; | ||
120 | background-color: fn.color(--faint --bg); | ||
121 | } | ||
122 | |||
123 | @include iro.bem-elem('label') { | ||
124 | color: fn.color(--faint --label); | ||
125 | font-size: fn.dim(--faint --label-font-size); | ||
126 | font-weight: 500; | ||
127 | } | ||
128 | } | ||
129 | } | ||
130 | } | ||
131 | } | ||