diff --git a/README.md b/README.md
index 6af700f3..5c838fe8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# Overview ng2-archwizard
-[![Build Status](https://travis-ci.org/madoar/ng2-archwizard.png)](https://travis-ci.org/madoar/ng2-archwizard)
+[![Build Status](https://travis-ci.org/madoar/ng2-archwizard.svg?branch=master)](https://travis-ci.org/madoar/ng2-archwizard)
[![Dependency Status](https://david-dm.org/madoar/ng2-archwizard.svg)](https://david-dm.org/madoar/ng2-archwizard)
[![Dev-Dependency Status](https://david-dm.org/madoar/ng2-archwizard/dev-status.svg)](https://david-dm.org/madoar/ng2-archwizard?type=dev)
[![Dependency Licence Status](https://dependencyci.com/github/madoar/ng2-archwizard/badge)](https://dependencyci.com/github/madoar/ng2-archwizard)
diff --git a/package.json b/package.json
index 9f71babf..d59fda72 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ng2-archwizard",
- "version": "1.4.0",
+ "version": "1.4.1",
"license": "MIT",
"description": "An angular 2 module containing a wizard component and its supporting components and directives",
"homepage": "https://github.com/madoar/ng2-archwizard",
@@ -13,12 +13,15 @@
"url": "https://github.com/madoar/ng2-archwizard"
},
"bugs": {
- "url": "https://github.com/madoar/ng2-archwizard"
+ "url": "https://github.com/madoar/ng2-archwizard/issues"
},
"keywords": [
"angular2",
+ "angular4",
"angular 2",
+ "angular 4",
"ng2",
+ "ng4",
"typescript",
"wizard",
"component"
diff --git a/src/components/components/wizard-navigation-bar.component.horizontal.less b/src/components/components/wizard-navigation-bar.component.horizontal.less
index 72817587..fe0994f7 100644
--- a/src/components/components/wizard-navigation-bar.component.horizontal.less
+++ b/src/components/components/wizard-navigation-bar.component.horizontal.less
@@ -27,12 +27,9 @@
// padding between text and baseline
@text-padding-bottom: 10px;
-@text-height: 15px;
+@text-height: 14px;
:host.horizontal {
- display: flex;
- flex-direction: row;
-
.line(@dot-width, @dot-height, @dot-border-width, @line-color) {
background-color: @line-color;
content: '';
@@ -272,6 +269,10 @@
}
ul.steps-indicator {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
right: 0;
bottom: 0;
left: 0;
@@ -335,22 +336,27 @@
li {
position: relative;
- float: left;
margin: 0;
padding: @text-padding-bottom 0 0 0;
- text-align: center;
- line-height: @text-height;
- a {
- color: @wz-color-current;
- text-decoration: none;
- text-transform: uppercase;
- font-weight: bold;
- transition: 0.25s;
- cursor: pointer;
-
- &:hover {
- color: darken(@wz-color-current, 20%);
+ div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ a {
+ color: @wz-color-current;
+ line-height: @text-height;
+ text-decoration: none;
+ text-transform: uppercase;
+ text-align: center;
+ font-weight: bold;
+ transition: 0.25s;
+ cursor: pointer;
+
+ &:hover {
+ color: darken(@wz-color-current, 20%);
+ }
}
}
}
diff --git a/src/components/components/wizard-navigation-bar.component.html b/src/components/components/wizard-navigation-bar.component.html
index e34b5639..5d0646b4 100644
--- a/src/components/components/wizard-navigation-bar.component.html
+++ b/src/components/components/wizard-navigation-bar.component.html
@@ -11,6 +11,8 @@
editing: step.selected && step.completed,
optional: step.optional && !step.completed && !step.selected
}">
- {{step.title}}
+
diff --git a/src/components/components/wizard-navigation-bar.component.spec.ts b/src/components/components/wizard-navigation-bar.component.spec.ts
index 213ef68d..6b24e759 100644
--- a/src/components/components/wizard-navigation-bar.component.spec.ts
+++ b/src/components/components/wizard-navigation-bar.component.spec.ts
@@ -264,7 +264,7 @@ describe('WizardNavigationBarComponent', () => {
});
it('should move back to the first step from the second step, after clicking on the corresponding link', () => {
- const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) > a')).nativeElement;
+ const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) a')).nativeElement;
expect(wizardTest.wizard.currentStepIndex).toBe(0);
@@ -280,7 +280,7 @@ describe('WizardNavigationBarComponent', () => {
});
it('should move back to the first step from the third step, after clicking on the corresponding link', () => {
- const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) > a')).nativeElement;
+ const goToFirstStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(1) a')).nativeElement;
expect(wizardTest.wizard.currentStepIndex).toBe(0);
@@ -296,7 +296,7 @@ describe('WizardNavigationBarComponent', () => {
});
it('should move back to the second step from the third step, after clicking on the corresponding link', () => {
- const goToSecondStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(2) > a')).nativeElement;
+ const goToSecondStepLink = wizardTestFixture.debugElement.query(By.css('li:nth-child(2) a')).nativeElement;
expect(wizardTest.wizard.currentStepIndex).toBe(0);
diff --git a/src/components/components/wizard-navigation-bar.component.vertical.less b/src/components/components/wizard-navigation-bar.component.vertical.less
index 3022ca47..aa0bd047 100644
--- a/src/components/components/wizard-navigation-bar.component.vertical.less
+++ b/src/components/components/wizard-navigation-bar.component.vertical.less
@@ -27,7 +27,7 @@
// padding between text and baseline
@text-margin-left: 15px;
-@text-height: 15px;
+@text-height: 14px;
@distance-between-steps: 10px;
@@ -35,8 +35,6 @@
max-width: 280px;
width: 20%;
height: 100%;
- display: flex;
- flex-direction: column;
position: sticky;
top: 0;
@@ -89,8 +87,6 @@
padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @small-dot-height);
li {
- line-height: @small-dot-height;
-
&:not(:last-child):before {
.line(@small-dot-width, @small-dot-height, 0, @wz-color-default);
}
@@ -99,6 +95,10 @@
.state-circle(@small-dot-width, @small-dot-height);
.state-circle-with-background(@wz-color-default);
}
+
+ div {
+ min-height: @small-dot-height;
+ }
}
// default steps shouldn't change when hovered, because they aren't clickable
@@ -129,8 +129,6 @@
padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);
li {
- line-height: @big-dot-height;
-
&:not(:last-child):before {
.line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
}
@@ -139,6 +137,10 @@
.state-circle(@big-dot-width, @big-dot-height);
.state-circle-with-background(@wz-color-default);
}
+
+ div {
+ min-height: @big-dot-height;
+ }
}
// default steps shouldn't change when hovered, because they aren't clickable
@@ -169,8 +171,6 @@
padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);
li {
- line-height: @big-dot-height;
-
&:not(:last-child):before {
.line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
}
@@ -179,6 +179,10 @@
.state-circle(@big-dot-width, @big-dot-height);
.state-circle-with-border(@dot-border-width, @wz-color-default);
}
+
+ div {
+ min-height: @big-dot-height + 2 * @dot-border-width;
+ }
}
// default steps shouldn't change when hovered, because they aren't clickable
@@ -209,8 +213,6 @@
padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);
li {
- line-height: @big-dot-height;
-
&:not(:last-child):before {
.line(@big-dot-width, @big-dot-height, 0, @wz-color-default);
}
@@ -221,6 +223,10 @@
content: attr(step-symbol);
}
+
+ div {
+ min-height: @big-dot-height;
+ }
}
// default steps shouldn't change when hovered, because they aren't clickable
@@ -251,8 +257,6 @@
padding: (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2) (@distance-between-steps / 2 + @dot-baseline-distance + @big-dot-height);
li {
- line-height: @big-dot-height;
-
&:not(:last-child):before {
.line(@big-dot-width, @big-dot-height, @dot-border-width, @wz-color-default);
}
@@ -263,6 +267,10 @@
content: attr(step-symbol);
}
+
+ div {
+ min-height: @big-dot-height + 2 * @dot-border-width;
+ }
}
// default steps shouldn't change when hovered, because they aren't clickable
@@ -289,6 +297,10 @@
}
ul.steps-indicator {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
list-style: none;
margin: auto;
@@ -301,26 +313,31 @@
li {
position: relative;
- display: table;
&:not(:last-child) {
margin-bottom: 0;
padding-bottom: @distance-between-steps;
}
- a {
- color: @wz-color-current;
- float: left;
- margin-left: @text-margin-left;
- text-decoration: none;
- text-transform: uppercase;
- text-align: left;
- font-weight: bold;
- transition: 0.25s;
- cursor: pointer;
-
- &:hover {
- color: darken(@wz-color-current, 20%);
+ div {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ a {
+ color: @wz-color-current;
+ margin-left: @text-margin-left;
+ line-height: @text-height;
+ text-decoration: none;
+ text-transform: uppercase;
+ text-align: left;
+ font-weight: bold;
+ transition: 0.25s;
+ cursor: pointer;
+
+ &:hover {
+ color: darken(@wz-color-current, 20%);
+ }
}
}
}