Skip to content

Commit 8072aed

Browse files
airikejairikej
committed
fix(separator): design review fixes #30 
1 parent 31ffd94 commit 8072aed

4 files changed

Lines changed: 227 additions & 238 deletions

File tree

‎src/tedi/components/misc/separator/separator.module.scss‎

Lines changed: 122 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -37,72 +37,18 @@ $dot-colors: (
3737
height: var(--vertical-separator-height);
3838
border-top: 0;
3939
border-left: 1px solid var(--general-border-primary);
40-
41-
&.tedi-separator--dot-position-start::before {
42-
top: 0;
43-
bottom: auto;
44-
}
45-
46-
&.tedi-separator--dot-position-center::before {
47-
top: 0;
48-
bottom: 0;
49-
margin: auto 0;
50-
}
51-
52-
&.tedi-separator--dot-position-end::before {
53-
top: auto;
54-
bottom: 0;
55-
}
56-
57-
&.tedi-separator--dotted-xs::before {
58-
left: calc(var(--separator-dot-size-xs) / 2 * -1);
59-
}
60-
61-
&.tedi-separator--dotted-sm::before {
62-
left: calc(var(--separator-dot-size-sm) / 2 * -1);
63-
}
64-
65-
&.tedi-separator--dotted-md::before {
66-
left: calc(var(--separator-dot-size-md) / 2 * -1);
67-
}
68-
69-
&.tedi-separator--dotted-lg::before {
70-
left: calc(var(--separator-dot-size-lg) / 2 * -1);
71-
}
7240
}
7341

7442
&--horizontal {
75-
&.tedi-separator--dotted-xs::before {
76-
top: calc(var(--separator-dot-size-xs) / 2 * -1);
77-
}
78-
79-
&.tedi-separator--dotted-sm::before {
80-
top: calc(var(--separator-dot-size-sm) / 2 * -1);
81-
}
82-
83-
&.tedi-separator--dotted-md::before {
84-
top: calc(var(--separator-dot-size-md) / 2 * -1);
85-
}
86-
87-
&.tedi-separator--dotted-lg::before {
88-
top: calc(var(--separator-dot-size-lg) / 2 * -1);
89-
}
90-
91-
&.tedi-separator--dot-position-start::before {
92-
right: auto;
93-
left: 0;
94-
}
43+
display: block;
44+
}
9545

96-
&.tedi-separator--dot-position-center::before {
97-
right: 0;
98-
left: 0;
99-
margin: auto;
100-
}
46+
&--block {
47+
display: block;
48+
}
10149

102-
&.tedi-separator--dot-position-end::before {
103-
right: 0;
104-
left: auto;
105-
}
50+
&--inline {
51+
display: inline;
10652
}
10753

10854
&--secondary {
@@ -113,14 +59,6 @@ $dot-colors: (
11359
border-color: var(--general-border-accent);
11460
}
11561

116-
&--block {
117-
display: block;
118-
}
119-
120-
&--inline {
121-
display: inline;
122-
}
123-
12462
&--is-stretched {
12563
margin-right: calc(var(--card-content-padding-right) * -1);
12664
margin-left: calc(var(--card-content-padding-left) * -1);
@@ -137,7 +75,7 @@ $dot-colors: (
13775
position: absolute;
13876
content: '';
13977
background-color: var(--general-border-primary);
140-
border-radius: 100%;
78+
border-radius: 50%;
14179

14280
@include mixins.print-grayscale;
14381
}
@@ -149,124 +87,158 @@ $dot-colors: (
14987

15088
.tedi-separator--dotted {
15189
@extend %separator-dotted-base;
90+
}
15291

153-
@each $name, $color in $dot-colors {
154-
&.tedi-separator--#{$name}::before {
92+
.tedi-separator--dot-only {
93+
position: relative;
94+
display: inline-block;
95+
vertical-align: middle;
96+
border: none;
97+
98+
&::before {
99+
position: relative;
100+
display: block;
101+
width: var(--separator-dotted-dot-sm);
102+
height: var(--separator-dotted-dot-sm);
103+
content: '';
104+
border-radius: 50%;
105+
106+
@include mixins.print-grayscale;
107+
}
108+
109+
&.tedi-separator--dot-style-outlined::before {
110+
background: transparent;
111+
}
112+
}
113+
114+
@each $name, $color in $dot-colors {
115+
.tedi-separator--#{$name} {
116+
border-color: $color;
117+
118+
&::before {
155119
background-color: $color;
156120
}
121+
122+
&.tedi-separator--dot-style-outlined:not(.tedi-separator--dot-only)::before {
123+
background-color: var(--tedi-neutral-100);
124+
border-color: $color;
125+
}
126+
}
127+
}
128+
129+
@each $size, $var in (extra-small: xs, small: sm, medium: md, large: lg) {
130+
.tedi-separator--dot-only-#{$size}::before,
131+
.tedi-separator--dotted-#{$size}::before,
132+
.tedi-separator--dot-style-outlined.tedi-separator--dotted-#{$size}::before {
133+
width: var(--separator-dot-size-#{$var});
134+
height: var(--separator-dot-size-#{$var});
135+
}
136+
}
137+
138+
@each $axis in (horizontal, vertical) {
139+
@each $pos in (start, center, end) {
140+
.tedi-separator--#{$axis}.tedi-separator--dot-position-#{$pos}::before {
141+
@if $axis == horizontal {
142+
@if $pos == start {
143+
right: auto;
144+
left: 0;
145+
} @else if $pos == center {
146+
right: 0;
147+
left: 0;
148+
margin: auto;
149+
} @else if $pos == end {
150+
right: 0;
151+
left: auto;
152+
}
153+
} @else {
154+
@if $pos == start {
155+
top: 0;
156+
bottom: auto;
157+
} @else if $pos == center {
158+
top: 0;
159+
bottom: 0;
160+
margin: auto 0;
161+
} @else if $pos == end {
162+
top: auto;
163+
bottom: 0;
164+
}
165+
}
166+
}
157167
}
158168
}
159169

170+
.tedi-separator--horizontal.tedi-separator--dot-position-custom::before {
171+
right: auto;
172+
left: var(--separator-dot-position);
173+
}
174+
175+
.tedi-separator--vertical.tedi-separator--dot-position-custom::before {
176+
top: var(--separator-dot-position);
177+
bottom: auto;
178+
}
179+
160180
@each $size, $value in $sizes {
161181
.tedi-separator--spacing-#{$size}:not(.tedi-separator--dot-only) {
162-
margin: #{$value} 0 #{$value} 0;
182+
margin: #{$value} 0;
163183
}
164184

165185
.tedi-separator--dot-only.tedi-separator--spacing-#{$size} {
166186
&.tedi-separator--horizontal {
167-
margin-right: #{$value};
168-
margin-left: #{$value};
187+
margin-right: $value;
188+
margin-left: $value;
169189
}
170190

171191
&.tedi-separator--vertical {
172-
margin-top: #{$value};
173-
margin-bottom: #{$value};
192+
margin-top: $value;
193+
margin-bottom: $value;
174194
}
175195
}
176196

177197
@each $side in (top, bottom, left, right) {
178198
.tedi-separator--#{$side}-#{$size} {
179-
@if $side == top {
180-
margin-top: #{$value};
181-
} @else if $side == bottom {
182-
margin-bottom: #{$value};
183-
} @else if $side == left {
184-
margin-left: #{$value};
185-
} @else if $side == right {
186-
margin-right: #{$value};
187-
}
199+
margin-#{$side}: $value;
188200
}
189201
}
190202
}
191203

192204
@each $thickness, $value in $thicknesses {
193-
.tedi-separator.tedi-separator--thickness-#{$thickness} {
194-
border-top-width: #{$value};
205+
.tedi-separator--thickness-#{$thickness} {
206+
border-top-width: $value;
195207
}
196-
197208
.tedi-separator--vertical.tedi-separator--thickness-#{$thickness} {
198-
border-left-width: #{$value};
209+
border-left-width: $value;
199210
}
200211
}
201212

202-
.tedi-separator--dot-only {
203-
position: relative;
204-
display: inline-block;
205-
vertical-align: middle;
206-
border: none;
213+
@each $axis in (horizontal, vertical) {
214+
@each $size, $var in (extra-small: xs, small: sm, medium: md, large: lg) {
215+
.tedi-separator--#{$axis}.tedi-separator--dotted-#{$size}::before,
216+
.tedi-separator--#{$axis}.tedi-separator--dot-style-outlined.tedi-separator--dotted-#{$size}::before {
217+
@if $axis == horizontal {
218+
top: calc((var(--separator-dot-size-#{$var}) / 2 + var(--separator-thickness)) * -1);
219+
} @else {
220+
left: calc((var(--separator-dot-size-#{$var}) / 2 + var(--separator-thickness) / 2) * -1);
221+
}
222+
}
223+
}
224+
}
207225

226+
.tedi-separator--dot-style-outlined {
208227
&::before {
209-
position: relative;
210-
display: block;
211-
width: var(--separator-dotted-dot-sm);
212-
height: var(--separator-dotted-dot-sm);
213-
content: '';
214-
border-radius: 100%;
215-
216-
@include mixins.print-grayscale;
228+
background-color: var(--tedi-neutral-100);
229+
border-style: solid;
230+
border-width: var(--separator-thickness, 1px);
217231
}
218232

219233
@each $name, $color in $dot-colors {
220234
&.tedi-separator--#{$name}::before {
221-
background-color: $color;
222-
}
223-
}
224-
225-
&.tedi-separator--dot-style-outlined {
226-
&::before {
227-
background: transparent;
228-
border-style: solid;
229-
border-width: var(--separator-thickness, 1px);
235+
z-index: 10;
236+
border-color: $color;
230237
}
231238

232-
@each $name, $color in $dot-colors {
233-
&.tedi-separator--#{$name}::before {
234-
border-color: $color;
235-
}
239+
&.tedi-separator--dotted-#{$name}::before {
240+
z-index: 10;
241+
border-color: $color;
236242
}
237243
}
238244
}
239-
240-
.tedi-separator--dot-only-xs::before,
241-
.tedi-separator--dotted-xs::before {
242-
width: var(--separator-dot-size-xs);
243-
height: var(--separator-dot-size-xs);
244-
}
245-
246-
.tedi-separator--dot-only-sm::before,
247-
.tedi-separator--dotted-sm::before {
248-
width: var(--separator-dot-size-sm);
249-
height: var(--separator-dot-size-sm);
250-
}
251-
252-
.tedi-separator--dot-only-md::before,
253-
.tedi-separator--dotted-md::before {
254-
width: var(--separator-dot-size-md);
255-
height: var(--separator-dot-size-md);
256-
}
257-
258-
.tedi-separator--dot-only-lg::before,
259-
.tedi-separator--dotted-lg::before {
260-
width: var(--separator-dot-size-lg);
261-
height: var(--separator-dot-size-lg);
262-
}
263-
264-
.tedi-separator--horizontal.tedi-separator--dot-position-custom::before {
265-
right: auto;
266-
left: var(--separator-dot-position);
267-
}
268-
269-
.tedi-separator--vertical.tedi-separator--dot-position-custom::before {
270-
top: var(--separator-dot-position);
271-
bottom: auto;
272-
}

0 commit comments

Comments
 (0)