Skip to content

Commit 65881a5

Browse files
astandrikastandrik
committed
fix: refactor css
1 parent 16e9958 commit 65881a5

File tree

1 file changed

+62
-89
lines changed

1 file changed

+62
-89
lines changed

‎src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.scss‎

Lines changed: 62 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,43 @@
1+
// Mixins for pseudo-element patterns
2+
3+
@mixin pseudo-base($side: left, $height: var(--tab-filler-size)) {
4+
position: absolute;
5+
top: 100%;
6+
#{$side}: 0;
7+
width: var(--tab-filler-size);
8+
height: $height;
9+
10+
content: '';
11+
12+
background-color: var(--g-color-base-background);
13+
}
14+
15+
@mixin pseudo-active-filler($side: left) {
16+
@include pseudo-base($side, var(--g-spacing-3));
17+
border-#{$side}: var(--tab-border-width) solid var(--g-color-line-generic);
18+
}
19+
20+
@mixin pseudo-inactive-filler($side: left) {
21+
border-top: var(--tab-border-width) solid var(--g-color-line-generic);
22+
@include pseudo-base($side, var(--tab-filler-size));
23+
border-#{$side}: var(--tab-border-width) solid var(--g-color-line-generic);
24+
border-top-#{$side}-radius: var(--g-border-radius-s);
25+
}
26+
27+
@mixin pseudo-background-fill($side: left) {
28+
@include pseudo-base($side, var(--tab-filler-size));
29+
}
30+
131
.tenant-metrics-cards {
32+
// CSS Variables for consistent design system
33+
--tab-border-width: 1px;
34+
--tab-filler-size: 10px;
35+
--tab-overlap: -1px;
36+
--tab-lift-offset: -6px;
37+
--tab-border-compensation: 1px;
38+
--tab-adjusted-spacing: calc(var(--g-spacing-3) - var(--tab-border-width));
39+
--z-tab-base: 100;
40+
--z-tab-active: 102;
241
--g-border-radius-xxl: 12px;
342

443
&__link {
@@ -13,15 +52,15 @@
1352

1453
&__link-container {
1554
position: relative;
16-
z-index: 100;
55+
z-index: var(--z-tab-base);
1756

1857
flex: 1;
1958

20-
margin-left: -1px;
59+
margin-left: var(--tab-overlap);
2160
padding: 0 var(--g-spacing-3) var(--g-spacing-3) var(--g-spacing-3);
2261

23-
border-top: 1px solid var(--g-color-base-background);
24-
border-bottom: 1px solid var(--g-color-line-generic);
62+
border-top: var(--tab-border-width) solid var(--g-color-base-background);
63+
border-bottom: var(--tab-border-width) solid var(--g-color-line-generic);
2564
background: var(--g-color-base-background);
2665
}
2766

@@ -31,127 +70,61 @@
3170
margin-left: 0;
3271

3372
&.tenant-metrics-cards__link-container_active::after {
34-
position: absolute;
35-
top: 100%;
36-
left: 0;
37-
38-
width: 10px;
39-
height: var(--g-spacing-3);
40-
41-
content: '';
42-
43-
border-left: 1px solid var(--g-color-line-generic);
44-
background-color: var(--g-color-base-background);
73+
@include pseudo-active-filler(left);
4574
}
4675

4776
&:not(.tenant-metrics-cards__link-container_active)::after {
48-
position: absolute;
49-
top: 100%;
50-
left: 0;
51-
52-
width: 10px;
53-
height: 10px;
54-
55-
content: '';
56-
57-
border-top: 1px solid var(--g-color-line-generic);
58-
border-left: 1px solid var(--g-color-line-generic);
59-
border-top-left-radius: var(--g-border-radius-s);
60-
background-color: var(--g-color-base-background);
77+
@include pseudo-inactive-filler(left);
6178
}
6279

6380
&:not(.tenant-metrics-cards__link-container_active)::before {
64-
position: absolute;
65-
top: 100%;
66-
left: 0;
67-
68-
width: 10px;
69-
height: 10px;
70-
71-
content: '';
72-
73-
background-color: var(--g-color-base-background);
81+
@include pseudo-background-fill(left);
7482
}
7583
}
7684

7785
&__link-container:last-child {
7886
margin-right: 0;
7987

8088
&.tenant-metrics-cards__link-container_active::after {
81-
position: absolute;
82-
top: 100%;
83-
right: 0;
84-
85-
width: 10px;
86-
height: var(--g-spacing-3);
87-
88-
content: '';
89-
90-
border-right: 1px solid var(--g-color-line-generic);
91-
background-color: var(--g-color-base-background);
89+
@include pseudo-active-filler(right);
9290
}
9391

9492
&:not(.tenant-metrics-cards__link-container_active)::after {
95-
position: absolute;
96-
top: 100%;
97-
right: 0;
98-
99-
width: 10px;
100-
height: 10px;
101-
102-
content: '';
103-
104-
border-top: 1px solid var(--g-color-line-generic);
105-
border-right: 1px solid var(--g-color-line-generic);
106-
border-top-right-radius: var(--g-border-radius-s);
107-
background-color: var(--g-color-base-background);
93+
@include pseudo-inactive-filler(right);
10894
}
10995

11096
&:not(.tenant-metrics-cards__link-container_active)::before {
111-
position: absolute;
112-
top: 100%;
113-
right: 0;
114-
115-
width: 10px;
116-
height: 10px;
117-
118-
content: '';
119-
120-
background-color: var(--g-color-base-background);
97+
@include pseudo-background-fill(right);
12198
}
12299
}
123100

124101
&__link {
125102
display: block;
126103

127-
border-top: 1px solid var(--g-color-base-background);
128-
border-right: 1px solid var(--g-color-base-background);
129-
border-left: 1px solid var(--g-color-base-background);
130-
border-top-left-radius: var(--g-border-radius-s);
131-
border-top-right-radius: var(--g-border-radius-s);
104+
border: var(--tab-border-width) solid var(--g-color-base-background);
105+
border-bottom: none;
106+
border-radius: var(--g-border-radius-s) var(--g-border-radius-s) 0 0;
132107
}
133108

134109
&__link-container_active &__link {
135110
display: block;
136111

137-
padding-bottom: 1px;
112+
padding-bottom: var(--tab-border-compensation);
138113

139-
border-top: 1px solid var(--g-color-line-generic);
140-
border-right: 1px solid var(--g-color-line-generic);
141-
border-left: 1px solid var(--g-color-line-generic);
142-
border-top-left-radius: var(--g-border-radius-s);
143-
border-top-right-radius: var(--g-border-radius-s);
114+
border: var(--tab-border-width) solid var(--g-color-line-generic);
115+
border-bottom: none;
116+
border-radius: var(--g-border-radius-s) var(--g-border-radius-s) 0 0;
144117
}
145118

146119
&__link-container_active {
147-
z-index: 102;
120+
z-index: var(--z-tab-active);
148121

149122
padding: 0;
150123

151124
border-bottom: 0 !important;
152125
background: var(--g-color-base-background);
153126

154-
transform: translateY(-6px);
127+
transform: translateY(var(--tab-lift-offset));
155128
}
156129

157130
&__link-container:first-child {
@@ -167,16 +140,16 @@
167140
}
168141

169142
&__link-container:has(+ &__link-container_active) {
170-
padding-right: calc(var(--g-spacing-3) - 1px);
143+
padding-right: var(--tab-adjusted-spacing);
171144

172-
border-right: 1px solid var(--g-color-line-generic);
145+
border-right: var(--tab-border-width) solid var(--g-color-line-generic);
173146
border-bottom-right-radius: var(--g-border-radius-xxl);
174147
}
175148

176149
&__link-container_active + &__link-container {
177-
padding-left: calc(var(--g-spacing-3) - 1px);
150+
padding-left: var(--tab-adjusted-spacing);
178151

179-
border-left: 1px solid var(--g-color-line-generic);
152+
border-left: var(--tab-border-width) solid var(--g-color-line-generic);
180153
border-bottom-left-radius: var(--g-border-radius-xxl);
181154
}
182155
}

0 commit comments

Comments
 (0)