diff options
author | Volpeon <git@volpeon.ink> | 2023-11-01 17:57:17 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2023-11-01 17:57:17 +0100 |
commit | 02ec99a710ee238836c881d9c9d56ffba8f0deb1 (patch) | |
tree | 33e62b94aca9960a66163f77c59bd0b2ba5c405e /src/objects/_divider.scss | |
parent | Fix status indicator v-alignment (diff) | |
download | iro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.tar.gz iro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.tar.bz2 iro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.zip |
Consistent divider height
Diffstat (limited to 'src/objects/_divider.scss')
-rw-r--r-- | src/objects/_divider.scss | 126 |
1 files changed, 56 insertions, 70 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss index 93b1914..655080f 100644 --- a/src/objects/_divider.scss +++ b/src/objects/_divider.scss | |||
@@ -59,11 +59,35 @@ | |||
59 | ), 'colors'); | 59 | ), 'colors'); |
60 | 60 | ||
61 | @include iro.bem-object(iro.props-namespace()) { | 61 | @include iro.bem-object(iro.props-namespace()) { |
62 | display: block; | 62 | display: flex; |
63 | height: fn.dim(--strong --border); | 63 | flex-direction: row; |
64 | margin-top: fn.dim(--margin-y); | 64 | align-items: center; |
65 | margin-bottom: fn.dim(--margin-y); | 65 | height: 1em; |
66 | background-color: fn.color(--strong --bg); | 66 | margin-top: fn.dim(--margin-y); |
67 | margin-bottom: fn.dim(--margin-y); | ||
68 | color: fn.color(--strong --label); | ||
69 | font-size: fn.dim(--strong --label-font-size); | ||
70 | font-weight: 700; | ||
71 | letter-spacing: .5px; | ||
72 | line-height: 1; | ||
73 | text-transform: uppercase; | ||
74 | |||
75 | &::before, | ||
76 | &::after { | ||
77 | content: ''; | ||
78 | flex: 1 1 auto; | ||
79 | width: 100%; | ||
80 | height: fn.dim(--strong --border); | ||
81 | background-color: fn.color(--strong --bg); | ||
82 | } | ||
83 | |||
84 | &::before { | ||
85 | display: block; | ||
86 | } | ||
87 | |||
88 | @include iro.bem-elem('label') { | ||
89 | flex: 0 0 auto; | ||
90 | } | ||
67 | 91 | ||
68 | @include iro.bem-modifier('vertical') { | 92 | @include iro.bem-modifier('vertical') { |
69 | align-self: stretch; | 93 | align-self: stretch; |
@@ -72,95 +96,57 @@ | |||
72 | margin-top: 0; | 96 | margin-top: 0; |
73 | margin-bottom: 0; | 97 | margin-bottom: 0; |
74 | background-color: fn.color(--faint --bg); | 98 | background-color: fn.color(--faint --bg); |
75 | } | ||
76 | 99 | ||
77 | @include iro.bem-modifier('medium') { | 100 | &::before, |
78 | height: fn.dim(--medium --border); | 101 | &::after { |
79 | background-color: fn.color(--medium --bg); | 102 | display: none; |
103 | } | ||
80 | } | 104 | } |
81 | 105 | ||
82 | @include iro.bem-modifier('faint') { | 106 | @include iro.bem-modifier('medium') { |
83 | height: fn.dim(--faint --border); | 107 | color: fn.color(--medium --label); |
84 | background-color: fn.color(--faint --bg); | 108 | font-size: fn.dim(--medium --label-font-size); |
85 | } | 109 | font-weight: 500; |
86 | 110 | ||
87 | @include iro.bem-modifier('red') { | 111 | &::before, |
88 | background-color: fn.color(--red --bg); | 112 | &::after { |
113 | height: fn.dim(--medium --border); | ||
114 | background-color: fn.color(--medium --bg); | ||
115 | } | ||
89 | } | 116 | } |
90 | 117 | ||
91 | @include iro.bem-modifier('labelled') { | 118 | @include iro.bem-modifier('faint') { |
92 | display: flex; | 119 | color: fn.color(--faint --label); |
93 | flex-direction: row; | 120 | font-size: fn.dim(--faint --label-font-size); |
94 | align-items: center; | 121 | font-weight: 500; |
95 | height: auto; | ||
96 | border-radius: 0; | ||
97 | background-color: transparent; | ||
98 | 122 | ||
99 | &::before, | 123 | &::before, |
100 | &::after { | 124 | &::after { |
101 | content: ''; | 125 | height: fn.dim(--faint --border); |
102 | display: block; | 126 | background-color: fn.color(--faint --bg); |
103 | flex: 1 1 auto; | ||
104 | width: 100%; | ||
105 | height: 3px; | ||
106 | background-color: fn.color(--strong --bg); | ||
107 | } | 127 | } |
128 | } | ||
108 | 129 | ||
130 | @include iro.bem-modifier('labelled') { | ||
109 | &::before { | 131 | &::before { |
110 | margin-right: 1em; | 132 | margin-right: 1em; |
111 | } | 133 | } |
112 | 134 | ||
113 | &::after { | 135 | &::after { |
136 | display: block; | ||
114 | margin-left: 1em; | 137 | margin-left: 1em; |
115 | } | 138 | } |
139 | } | ||
116 | 140 | ||
117 | @include iro.bem-elem('label') { | 141 | @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { |
118 | flex: 0 0 auto; | 142 | @include iro.bem-modifier($color) { |
119 | color: fn.color(--strong --label); | ||
120 | font-size: fn.dim(--strong --label-font-size); | ||
121 | font-weight: 700; | ||
122 | letter-spacing: .5px; | ||
123 | text-transform: uppercase; | ||
124 | } | ||
125 | |||
126 | @include iro.bem-modifier('medium') { | ||
127 | &::before, | ||
128 | &::after { | ||
129 | height: 2px; | ||
130 | background-color: fn.color(--medium --bg); | ||
131 | } | ||
132 | |||
133 | @include iro.bem-elem('label') { | ||
134 | color: fn.color(--medium --label); | ||
135 | font-size: fn.dim(--medium --label-font-size); | ||
136 | font-weight: 500; | ||
137 | } | ||
138 | } | ||
139 | |||
140 | @include iro.bem-modifier('faint') { | ||
141 | &::before, | 143 | &::before, |
142 | &::after { | 144 | &::after { |
143 | height: 1px; | 145 | background-color: fn.color(--#{$color} --bg); |
144 | background-color: fn.color(--faint --bg); | ||
145 | } | 146 | } |
146 | 147 | ||
147 | @include iro.bem-elem('label') { | 148 | @include iro.bem-elem('label') { |
148 | color: fn.color(--faint --label); | 149 | color: fn.color(--#{$color} --label); |
149 | font-size: fn.dim(--faint --label-font-size); | ||
150 | font-weight: 500; | ||
151 | } | ||
152 | } | ||
153 | |||
154 | @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { | ||
155 | @include iro.bem-modifier($color) { | ||
156 | &::before, | ||
157 | &::after { | ||
158 | background-color: fn.color(--#{$color} --bg); | ||
159 | } | ||
160 | |||
161 | @include iro.bem-elem('label') { | ||
162 | color: fn.color(--#{$color} --label); | ||
163 | } | ||
164 | } | 150 | } |
165 | } | 151 | } |
166 | } | 152 | } |