summaryrefslogtreecommitdiffstats
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
parentFix status indicator v-alignment (diff)
downloadiro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.tar.gz
iro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.tar.bz2
iro-design-02ec99a710ee238836c881d9c9d56ffba8f0deb1.zip
Consistent divider height
Diffstat
-rw-r--r--src/objects/_divider.scss126
-rw-r--r--tpl/views/divider.pug18
2 files changed, 74 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 }
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index 9d0b2cb..43a538c 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -19,28 +19,46 @@ mixin view-divider
19 +divider('strong')= 'Strong' 19 +divider('strong')= 'Strong'
20 +divider('medium')= 'Medium' 20 +divider('medium')= 'Medium'
21 +divider('faint')= 'Faint' 21 +divider('faint')= 'Faint'
22 +divider('strong')
23 +divider('medium')
24 +divider('faint')
22 25
23 .c-box 26 .c-box
24 +divider('strong')(color='blue')= 'Strong' 27 +divider('strong')(color='blue')= 'Strong'
25 +divider('medium')(color='blue')= 'Medium' 28 +divider('medium')(color='blue')= 'Medium'
26 +divider('faint')(color='blue')= 'Faint' 29 +divider('faint')(color='blue')= 'Faint'
30 +divider('strong')(color='blue')
31 +divider('medium')(color='blue')
32 +divider('faint')(color='blue')
27 33
28 .c-box 34 .c-box
29 +divider('strong')(color='purple')= 'Strong' 35 +divider('strong')(color='purple')= 'Strong'
30 +divider('medium')(color='purple')= 'Medium' 36 +divider('medium')(color='purple')= 'Medium'
31 +divider('faint')(color='purple')= 'Faint' 37 +divider('faint')(color='purple')= 'Faint'
38 +divider('strong')(color='purple')
39 +divider('medium')(color='purple')
40 +divider('faint')(color='purple')
32 41
33 .c-box 42 .c-box
34 +divider('strong')(color='red')= 'Strong' 43 +divider('strong')(color='red')= 'Strong'
35 +divider('medium')(color='red')= 'Medium' 44 +divider('medium')(color='red')= 'Medium'
36 +divider('faint')(color='red')= 'Faint' 45 +divider('faint')(color='red')= 'Faint'
46 +divider('strong')(color='red')
47 +divider('medium')(color='red')
48 +divider('faint')(color='red')
37 49
38 .c-box 50 .c-box
39 +divider('strong')(color='green')= 'Strong' 51 +divider('strong')(color='green')= 'Strong'
40 +divider('medium')(color='green')= 'Medium' 52 +divider('medium')(color='green')= 'Medium'
41 +divider('faint')(color='green')= 'Faint' 53 +divider('faint')(color='green')= 'Faint'
54 +divider('strong')(color='green')
55 +divider('medium')(color='green')
56 +divider('faint')(color='green')
42 57
43 .c-box 58 .c-box
44 +divider('strong')(color='yellow')= 'Strong' 59 +divider('strong')(color='yellow')= 'Strong'
45 +divider('medium')(color='yellow')= 'Medium' 60 +divider('medium')(color='yellow')= 'Medium'
46 +divider('faint')(color='yellow')= 'Faint' 61 +divider('faint')(color='yellow')= 'Faint'
62 +divider('strong')(color='yellow')
63 +divider('medium')(color='yellow')
64 +divider('faint')(color='yellow')
generated by cgit v1.2.3-54-g00ecf (git 2.44.0) at 2024-05-19 16:15:22 +0000