Skip to content

Commit

Permalink
- improved the stylesheets for the navigation ba. Now the width of na…
Browse files Browse the repository at this point in the history 
…vigation bar will be shown correctly if it's not 100%

- bumped version to v1.0.1
  • Loading branch information
@madoar
madoar committed Feb 18, 2017
1 parent ceccf9b commit 3fb4eb7
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 146 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "ng2-archwizard",
"version": "1.0.0",
"version": "1.0.1",
"license": "MIT",
"description": "An angular 2 module containing a wizard component and its supporting components and directives",
"homepage": "https://github.com/madoar/ng2-wizard",
Expand Down
267 changes: 122 additions & 145 deletions src/components/components/wizard-navigation-bar.component.less
View file
@@ -1,181 +1,158 @@
/*
color definitions
*/
@wz-color-default: #E6E6E6;
@wz-color-current: #808080;
@wz-color-done: #339933;
@wz-color-optional: #38ef38;
@wz-color-editing: #FF0000;

:host {
/*
dot definitions
*/
@dot-width: 14px;
@dot-height: 14px;

/*
extra distance between the bottom of the dots and the baseline texts
*/
@dot-baseline-distance: 0px;

// padding between text and baseline
@text-padding-bottom: 10px;
@text-height: 15px;

.steps(@number-of-components) {
&:before {
left: 100% / @number-of-components / 2;
right: 100% / @number-of-components / 2;
}

li {
width: 100% / @number-of-components;
}
}

:host .steps-indicator {
right: 0;
bottom: 0;
left: 0;
margin: 0;
width: 100%;
height: auto;

.steps-indicator {
padding: 10px 0 25px 0;
list-style: none;

&:before {
background-color: @wz-color-default;
content: '';
position: absolute;
height: 1px;
}

&.steps-2:before {
left: ~'calc(100% / 2 / 2)';
right: ~'calc(100% / 2 / 2)';
}

&.steps-3:before {
left: ~'calc(100% / 3 / 2)';
right: ~'calc(100% / 3 / 2)';
}

&.steps-4:before {
left: ~'calc(100% / 4 / 2)';
right: ~'calc(100% / 4 / 2)';
}
padding: (@dot-baseline-distance + @dot-height) 0 (@text-padding-bottom + @text-height) 0;
list-style: none;

&.steps-5:before {
left: ~'calc(100% / 5 / 2)';
right: ~'calc(100% / 5 / 2)';
}

&.steps-6:before {
left: ~'calc(100% / 6 / 2)';
right: ~'calc(100% / 6 / 2)';
}

&.steps-7:before {
left: ~'calc(100% / 7 / 2)';
right: ~'calc(100% / 7 / 2)';
}

&.steps-8:before {
left: ~'calc(100% / 8 / 2)';
right: ~'calc(100% / 8 / 2)';
}

&.steps-9:before {
left: ~'calc(100% / 9 / 2)';
right: ~'calc(100% / 9 / 2)';
}

&.steps-10:before {
left: ~'calc(100% / 10 / 2)';
right: ~'calc(100% / 10 / 2)';
}
&.steps-2 {
.steps(2);
}

/* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
&.steps-3 {
.steps(3);
}

li {
position: relative;
float: left;
margin: 0;
padding: 10px 0 0 0;
text-align: center;
line-height: 15px;

a {
color: @wz-color-current;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
transition: 0.25s;
cursor: pointer;

&:before {
position: absolute;
top: -7px;
left: ~'calc(50% - 7px)';
width: 14px;
height: 14px;
border-radius: 100%;
background-color: @wz-color-default;
content: '';
transition: 0.25s;
}

&:hover {
color: darken(@wz-color-current, 20%);
}
}
}
&.steps-4 {
.steps(4);
}

&.steps-2 li {
width: ~'calc(100% / 2)';
}
&.steps-5 {
.steps(5);
}

&.steps-3 li {
width: ~'calc(100% / 3)';
}
&.steps-6 {
.steps(6);
}

&.steps-4 li {
width: ~'calc(100% / 4)';
}
&.steps-7 {
.steps(7);
}

&.steps-5 li {
width: ~'calc(100% / 5)';
}
&.steps-8 {
.steps(8);
}

&.steps-6 li {
width: ~'calc(100% / 6)';
}
&.steps-9 {
.steps(9);
}

&.steps-7 li {
width: ~'calc(100% / 7)';
}
&.steps-10 {
.steps(10);
}

&.steps-8 li {
width: ~'calc(100% / 8)';
}
/* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

&.steps-9 li {
width: ~'calc(100% / 9)';
}
li {
position: relative;
float: left;
margin: 0;
padding: @text-padding-bottom 0 0 0;
text-align: center;
line-height: @text-height;

&.steps-10 li {
width: ~'calc(100% / 10)';
&:not(:last-child):before {
background-color: @wz-color-default;
content: '';
position: absolute;
height: 1px;
width: calc(100% ~'-' @dot-width);
top: -(@dot-baseline-distance + @dot-height / 2);
left: calc(50% ~'+' @dot-width / 2);
}

&.steps-11 li {
width: ~'calc(100% / 11)';
&:after {
position: absolute;
top: -(@dot-baseline-distance + @dot-height);
left: calc(50% ~'-' @dot-width / 2);
width: @dot-width;
height: @dot-height;
border-radius: 100%;
background-color: @wz-color-default;
content: '';
transition: 0.25s;
}

li.default {
pointer-events: none;
a {
color: @wz-color-current;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
transition: 0.25s;
cursor: pointer;

a:hover {
color: @wz-color-current;
&:hover {
color: darken(@wz-color-current, 20%);
}
}
}

li.current,
li.editing {
pointer-events: none;
}
li.default,
li.current,
li.editing {
pointer-events: none;
}

li.current a:before {
background-color: @wz-color-current;
}
// default steps shouldn't change when hovered, because they aren't clickable
li.default a:hover {
color: @wz-color-current;
}

li.done a:before {
background-color: @wz-color-done;
}
li.current:after {
background-color: @wz-color-current;
}

li.optional a:before {
background-color: @wz-color-optional;
}
li.done:after {
background-color: @wz-color-done;
}

li.editing a:before {
background-color: @wz-color-editing;
}
li.optional:after {
background-color: @wz-color-optional;
}

li.editing:after {
background-color: @wz-color-editing;
}
}

0 comments on commit 3fb4eb7

Please sign in to comment.