Skip to content

Commit 646d80c

Browse files
madoarmadoar
authored
Fix large empty symbols css (#16)
- fixing the width of line between two horizontal step circles in the horizontal navigation bar layout - fixing the line-height of the navigation symbol inside a wizard step in the horizontal navigation bar layout - fixing font-size of the step titles in the horizontal layout of the navigation bar - fixing font-size of the step titles in the vertical layout of the navigation bar - fixing the width of line between two horizontal step circles in the vertical navigation bar layout - fixing the line-height of the navigation symbol inside a wizard step in the vertical navigation bar layout
1 parent f7836dc commit 646d80c

File tree

2 files changed

+32
-30
lines changed

2 files changed

+32
-30
lines changed

‎src/components/components/wizard-navigation-bar.component.horizontal.less

+16-15
Original file line numberDiff line numberDiff line change
@@ -30,17 +30,17 @@
3030
@text-height: 14px;
3131

3232
:host.horizontal {
33-
.line(@dot-width, @dot-height, @dot-border-width, @line-color) {
33+
.line(@dot-width, @dot-height, @line-color) {
3434
background-color: @line-color;
3535
content: '';
3636
position: absolute;
3737
height: 1px;
38-
width: calc(100% ~'-' @dot-width + @dot-border-width);
38+
width: calc(100% ~'-' @dot-width);
3939
top: -(@dot-baseline-distance + @dot-height / 2);
40-
left: calc(50% ~'+' @dot-width / 2 + @dot-border-width);
40+
left: calc(50% ~'+' @dot-width / 2);
4141
}
4242

43-
.state-circle(@dot-width, @dot-height) {
43+
.state-circle(@dot-width, @dot-height, @dot-border-width) {
4444
position: absolute;
4545
top: -(@dot-baseline-distance + @dot-height);
4646
left: calc(50% ~'-' @dot-width / 2);
@@ -49,7 +49,7 @@
4949
content: '';
5050
text-align: center;
5151
vertical-align: middle;
52-
line-height: @dot-height;
52+
line-height: @dot-height - 2 * @dot-border-width;
5353
transition: 0.25s;
5454
border-radius: 100%;
5555
}
@@ -80,11 +80,11 @@
8080

8181
li {
8282
&:not(:last-child):before {
83-
.line(@small-dot-width, @small-dot-height, 0, @wz-color-default);
83+
.line(@small-dot-width, @small-dot-height, @wz-color-default);
8484
}
8585

8686
&:after {
87-
.state-circle(@small-dot-width, @small-dot-height);
87+
.state-circle(@small-dot-width, @small-dot-height, 0);
8888
.state-circle-with-background(@wz-color-default);
8989
}
9090
}
@@ -118,11 +118,11 @@
118118

119119
li {
120120
&:not(:last-child):before {
121-
.line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
121+
.line(@big-dot-width, @big-dot-height, @wz-color-default);
122122
}
123123

124124
&:after {
125-
.state-circle(@big-dot-width, @big-dot-height);
125+
.state-circle(@big-dot-width, @big-dot-height, 0);
126126
.state-circle-with-background(@wz-color-default);
127127
}
128128
}
@@ -156,11 +156,11 @@
156156

157157
li {
158158
&:not(:last-child):before {
159-
.line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
159+
.line(@big-dot-width, @big-dot-height, @wz-color-default);
160160
}
161161

162162
&:after {
163-
.state-circle(@big-dot-width, @big-dot-height);
163+
.state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
164164
.state-circle-with-border(@dot-border-width, @wz-color-default);
165165
}
166166
}
@@ -194,11 +194,11 @@
194194

195195
li {
196196
&:not(:last-child):before {
197-
.line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
197+
.line(@big-dot-width, @big-dot-height, @wz-color-default);
198198
}
199199

200200
&:after {
201-
.state-circle(@big-dot-width, @big-dot-height);
201+
.state-circle(@big-dot-width, @big-dot-height, 0);
202202
.state-circle-with-background-and-content(@wz-color-default);
203203

204204
content: attr(step-symbol);
@@ -234,11 +234,11 @@
234234

235235
li {
236236
&:not(:last-child):before {
237-
.line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
237+
.line(@big-dot-width, @big-dot-height, @wz-color-default);
238238
}
239239

240240
&:after {
241-
.state-circle(@big-dot-width, @big-dot-height);
241+
.state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
242242
.state-circle-with-border-and-content(@dot-border-width, @wz-color-default);
243243

244244
content: attr(step-symbol);
@@ -347,6 +347,7 @@
347347
a {
348348
color: @wz-color-current;
349349
line-height: @text-height;
350+
font-size: @text-height;
350351
text-decoration: none;
351352
text-transform: uppercase;
352353
text-align: center;

‎src/components/components/wizard-navigation-bar.component.vertical.less

+16-15
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,17 @@
3838
position: sticky;
3939
top: 0;
4040

41-
.line(@dot-width, @dot-height, @dot-border-width, @line-color) {
41+
.line(@dot-width, @dot-height, @line-color) {
4242
background-color: @line-color;
4343
content: '';
4444
position: absolute;
4545
left: -(@dot-baseline-distance + @dot-height / 2);
46-
top: @dot-height + @dot-border-width;
47-
height: calc(100% ~'-' @dot-height + @dot-border-width);
46+
top: @dot-height;
47+
height: calc(100% ~'-' @dot-height);
4848
width: 1px;
4949
}
5050

51-
.state-circle(@dot-width, @dot-height) {
51+
.state-circle(@dot-width, @dot-height, @dot-border-width) {
5252
position: absolute;
5353
top: 0;
5454
left: -(@dot-baseline-distance + @dot-width);
@@ -57,7 +57,7 @@
5757
content: '';
5858
text-align: center;
5959
vertical-align: middle;
60-
line-height: @dot-height;
60+
line-height: @dot-height - 2 * @dot-border-width;
6161
transition: 0.25s;
6262
border-radius: 100%;
6363
}
@@ -88,11 +88,11 @@
8888

8989
li {
9090
&:not(:last-child):before {
91-
.line(@small-dot-width, @small-dot-height, 0, @wz-color-default);
91+
.line(@small-dot-width, @small-dot-height, @wz-color-default);
9292
}
9393

9494
&:after {
95-
.state-circle(@small-dot-width, @small-dot-height);
95+
.state-circle(@small-dot-width, @small-dot-height, 0);
9696
.state-circle-with-background(@wz-color-default);
9797
}
9898

@@ -130,11 +130,11 @@
130130

131131
li {
132132
&:not(:last-child):before {
133-
.line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
133+
.line(@big-dot-width, @big-dot-height, @wz-color-default);
134134
}
135135

136136
&:after {
137-
.state-circle(@big-dot-width, @big-dot-height);
137+
.state-circle(@big-dot-width, @big-dot-height, 0);
138138
.state-circle-with-background(@wz-color-default);
139139
}
140140

@@ -172,11 +172,11 @@
172172

173173
li {
174174
&:not(:last-child):before {
175-
.line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
175+
.line(@big-dot-width, @big-dot-height, @wz-color-default);
176176
}
177177

178178
&:after {
179-
.state-circle(@big-dot-width, @big-dot-height);
179+
.state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
180180
.state-circle-with-border(@dot-border-width, @wz-color-default);
181181
}
182182

@@ -214,11 +214,11 @@
214214

215215
li {
216216
&:not(:last-child):before {
217-
.line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
217+
.line(@big-dot-width, @big-dot-height, @wz-color-default);
218218
}
219219

220220
&:after {
221-
.state-circle(@big-dot-width, @big-dot-height);
221+
.state-circle(@big-dot-width, @big-dot-height, 0);
222222
.state-circle-with-background-and-content(@wz-color-default);
223223

224224
content: attr(step-symbol);
@@ -258,11 +258,11 @@
258258

259259
li {
260260
&:not(:last-child):before {
261-
.line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
261+
.line(@big-dot-width, @big-dot-height, @wz-color-default);
262262
}
263263

264264
&:after {
265-
.state-circle(@big-dot-width, @big-dot-height);
265+
.state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
266266
.state-circle-with-border-and-content(@dot-border-width, @wz-color-default);
267267

268268
content: attr(step-symbol);
@@ -328,6 +328,7 @@
328328
color: @wz-color-current;
329329
margin-left: @text-margin-left;
330330
line-height: @text-height;
331+
font-size: @text-height;
331332
text-decoration: none;
332333
text-transform: uppercase;
333334
text-align: left;

0 commit comments

Comments
 (0)