summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-11-01 17:57:17 +0100
committerVolpeon <git@volpeon.ink>2023-11-01 17:57:17 +0100
commit02ec99a710ee238836c881d9c9d56ffba8f0deb1 (patch)
tree33e62b94aca9960a66163f77c59bd0b2ba5c405e /src
parentFix status indicator v-alignment (diff)
downloadiro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.tar.gz
iro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.tar.bz2
iro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.zip
Consistent divider height
Diffstat (limited to 'src')
-rw-r--r--src/objects/_divider.scss126
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 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 06:08:46 +0000