Skip to content

Commit

Permalink
Fix large empty symbols css (#16)
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@madoar
madoar committed Jul 9, 2017
1 parent f7836dc commit 646d80c
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 30 deletions.
31 changes: 16 additions & 15 deletions src/components/components/wizard-navigation-bar.component.horizontal.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,17 @@
@text-height: 14px;

:host.horizontal {
.line(@dot-width, @dot-height, @dot-border-width, @line-color) {
.line(@dot-width, @dot-height, @line-color) {
background-color: @line-color;
content: '';
position: absolute;
height: 1px;
width: calc(100% ~'-' @dot-width + @dot-border-width);
width: calc(100% ~'-' @dot-width);
top: -(@dot-baseline-distance + @dot-height / 2);
left: calc(50% ~'+' @dot-width / 2 + @dot-border-width);
left: calc(50% ~'+' @dot-width / 2);
}

.state-circle(@dot-width, @dot-height) {
.state-circle(@dot-width, @dot-height, @dot-border-width) {
position: absolute;
top: -(@dot-baseline-distance + @dot-height);
left: calc(50% ~'-' @dot-width / 2);
Expand All @@ -49,7 +49,7 @@
content: '';
text-align: center;
vertical-align: middle;
line-height: @dot-height;
line-height: @dot-height - 2 * @dot-border-width;
transition: 0.25s;
border-radius: 100%;
}
Expand Down Expand Up @@ -80,11 +80,11 @@

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

&:after {
.state-circle(@small-dot-width, @small-dot-height);
.state-circle(@small-dot-width, @small-dot-height, 0);
.state-circle-with-background(@wz-color-default);
}
}
Expand Down Expand Up @@ -118,11 +118,11 @@

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

&:after {
.state-circle(@big-dot-width, @big-dot-height);
.state-circle(@big-dot-width, @big-dot-height, 0);
.state-circle-with-background(@wz-color-default);
}
}
Expand Down Expand Up @@ -156,11 +156,11 @@

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

&:after {
.state-circle(@big-dot-width, @big-dot-height);
.state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
.state-circle-with-border(@dot-border-width, @wz-color-default);
}
}
Expand Down Expand Up @@ -194,11 +194,11 @@

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

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

content: attr(step-symbol);
Expand Down Expand Up @@ -234,11 +234,11 @@

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

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

content: attr(step-symbol);
Expand Down Expand Up @@ -347,6 +347,7 @@
a {
color: @wz-color-current;
line-height: @text-height;
font-size: @text-height;
text-decoration: none;
text-transform: uppercase;
text-align: center;
Expand Down
31 changes: 16 additions & 15 deletions src/components/components/wizard-navigation-bar.component.vertical.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,17 @@
position: sticky;
top: 0;

.line(@dot-width, @dot-height, @dot-border-width, @line-color) {
.line(@dot-width, @dot-height, @line-color) {
background-color: @line-color;
content: '';
position: absolute;
left: -(@dot-baseline-distance + @dot-height / 2);
top: @dot-height + @dot-border-width;
height: calc(100% ~'-' @dot-height + @dot-border-width);
top: @dot-height;
height: calc(100% ~'-' @dot-height);
width: 1px;
}

.state-circle(@dot-width, @dot-height) {
.state-circle(@dot-width, @dot-height, @dot-border-width) {
position: absolute;
top: 0;
left: -(@dot-baseline-distance + @dot-width);
Expand All @@ -57,7 +57,7 @@
content: '';
text-align: center;
vertical-align: middle;
line-height: @dot-height;
line-height: @dot-height - 2 * @dot-border-width;
transition: 0.25s;
border-radius: 100%;
}
Expand Down Expand Up @@ -88,11 +88,11 @@

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

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

Expand Down Expand Up @@ -130,11 +130,11 @@

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

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

Expand Down Expand Up @@ -172,11 +172,11 @@

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

&:after {
.state-circle(@big-dot-width, @big-dot-height);
.state-circle(@big-dot-width, @big-dot-height, @dot-border-width);
.state-circle-with-border(@dot-border-width, @wz-color-default);
}

Expand Down Expand Up @@ -214,11 +214,11 @@

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

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

content: attr(step-symbol);
Expand Down Expand Up @@ -258,11 +258,11 @@

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

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

content: attr(step-symbol);
Expand Down Expand Up @@ -328,6 +328,7 @@
color: @wz-color-current;
margin-left: @text-margin-left;
line-height: @text-height;
font-size: @text-height;
text-decoration: none;
text-transform: uppercase;
text-align: left;
Expand Down

0 comments on commit 646d80c

Please sign in to comment.