Skip to content

Commit 3fb4eb7

Browse files
madoarmadoar
committed
- improved the stylesheets for the navigation ba. Now the width of navigation bar will be shown correctly if it's not 100%
- bumped version to v1.0.1
1 parent ceccf9b commit 3fb4eb7

File tree

2 files changed

+123
-146
lines changed

2 files changed

+123
-146
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng2-archwizard",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"license": "MIT",
55
"description": "An angular 2 module containing a wizard component and its supporting components and directives",
66
"homepage": "https://github.com/madoar/ng2-wizard",

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

Lines changed: 122 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,158 @@
1+
/*
2+
color definitions
3+
*/
14
@wz-color-default: #E6E6E6;
25
@wz-color-current: #808080;
36
@wz-color-done: #339933;
47
@wz-color-optional: #38ef38;
58
@wz-color-editing: #FF0000;
69

7-
:host {
10+
/*
11+
dot definitions
12+
*/
13+
@dot-width: 14px;
14+
@dot-height: 14px;
15+
16+
/*
17+
extra distance between the bottom of the dots and the baseline texts
18+
*/
19+
@dot-baseline-distance: 0px;
20+
21+
// padding between text and baseline
22+
@text-padding-bottom: 10px;
23+
@text-height: 15px;
24+
25+
.steps(@number-of-components) {
26+
&:before {
27+
left: 100% / @number-of-components / 2;
28+
right: 100% / @number-of-components / 2;
29+
}
30+
31+
li {
32+
width: 100% / @number-of-components;
33+
}
34+
}
35+
36+
:host .steps-indicator {
837
right: 0;
938
bottom: 0;
1039
left: 0;
1140
margin: 0;
12-
width: 100%;
13-
height: auto;
14-
15-
.steps-indicator {
16-
padding: 10px 0 25px 0;
17-
list-style: none;
18-
19-
&:before {
20-
background-color: @wz-color-default;
21-
content: '';
22-
position: absolute;
23-
height: 1px;
24-
}
25-
26-
&.steps-2:before {
27-
left: ~'calc(100% / 2 / 2)';
28-
right: ~'calc(100% / 2 / 2)';
29-
}
30-
31-
&.steps-3:before {
32-
left: ~'calc(100% / 3 / 2)';
33-
right: ~'calc(100% / 3 / 2)';
34-
}
35-
36-
&.steps-4:before {
37-
left: ~'calc(100% / 4 / 2)';
38-
right: ~'calc(100% / 4 / 2)';
39-
}
41+
padding: (@dot-baseline-distance + @dot-height) 0 (@text-padding-bottom + @text-height) 0;
42+
list-style: none;
4043

41-
&.steps-5:before {
42-
left: ~'calc(100% / 5 / 2)';
43-
right: ~'calc(100% / 5 / 2)';
44-
}
45-
46-
&.steps-6:before {
47-
left: ~'calc(100% / 6 / 2)';
48-
right: ~'calc(100% / 6 / 2)';
49-
}
50-
51-
&.steps-7:before {
52-
left: ~'calc(100% / 7 / 2)';
53-
right: ~'calc(100% / 7 / 2)';
54-
}
55-
56-
&.steps-8:before {
57-
left: ~'calc(100% / 8 / 2)';
58-
right: ~'calc(100% / 8 / 2)';
59-
}
60-
61-
&.steps-9:before {
62-
left: ~'calc(100% / 9 / 2)';
63-
right: ~'calc(100% / 9 / 2)';
64-
}
65-
66-
&.steps-10:before {
67-
left: ~'calc(100% / 10 / 2)';
68-
right: ~'calc(100% / 10 / 2)';
69-
}
44+
&.steps-2 {
45+
.steps(2);
46+
}
7047

71-
/* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
72-
* {
73-
-webkit-box-sizing: border-box;
74-
-moz-box-sizing: border-box;
75-
box-sizing: border-box;
76-
}
48+
&.steps-3 {
49+
.steps(3);
50+
}
7751

78-
li {
79-
position: relative;
80-
float: left;
81-
margin: 0;
82-
padding: 10px 0 0 0;
83-
text-align: center;
84-
line-height: 15px;
85-
86-
a {
87-
color: @wz-color-current;
88-
text-decoration: none;
89-
text-transform: uppercase;
90-
font-weight: bold;
91-
transition: 0.25s;
92-
cursor: pointer;
93-
94-
&:before {
95-
position: absolute;
96-
top: -7px;
97-
left: ~'calc(50% - 7px)';
98-
width: 14px;
99-
height: 14px;
100-
border-radius: 100%;
101-
background-color: @wz-color-default;
102-
content: '';
103-
transition: 0.25s;
104-
}
105-
106-
&:hover {
107-
color: darken(@wz-color-current, 20%);
108-
}
109-
}
110-
}
52+
&.steps-4 {
53+
.steps(4);
54+
}
11155

112-
&.steps-2 li {
113-
width: ~'calc(100% / 2)';
114-
}
56+
&.steps-5 {
57+
.steps(5);
58+
}
11559

116-
&.steps-3 li {
117-
width: ~'calc(100% / 3)';
118-
}
60+
&.steps-6 {
61+
.steps(6);
62+
}
11963

120-
&.steps-4 li {
121-
width: ~'calc(100% / 4)';
122-
}
64+
&.steps-7 {
65+
.steps(7);
66+
}
12367

124-
&.steps-5 li {
125-
width: ~'calc(100% / 5)';
126-
}
68+
&.steps-8 {
69+
.steps(8);
70+
}
12771

128-
&.steps-6 li {
129-
width: ~'calc(100% / 6)';
130-
}
72+
&.steps-9 {
73+
.steps(9);
74+
}
13175

132-
&.steps-7 li {
133-
width: ~'calc(100% / 7)';
134-
}
76+
&.steps-10 {
77+
.steps(10);
78+
}
13579

136-
&.steps-8 li {
137-
width: ~'calc(100% / 8)';
138-
}
80+
/* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
81+
* {
82+
-webkit-box-sizing: border-box;
83+
-moz-box-sizing: border-box;
84+
box-sizing: border-box;
85+
}
13986

140-
&.steps-9 li {
141-
width: ~'calc(100% / 9)';
142-
}
87+
li {
88+
position: relative;
89+
float: left;
90+
margin: 0;
91+
padding: @text-padding-bottom 0 0 0;
92+
text-align: center;
93+
line-height: @text-height;
14394

144-
&.steps-10 li {
145-
width: ~'calc(100% / 10)';
95+
&:not(:last-child):before {
96+
background-color: @wz-color-default;
97+
content: '';
98+
position: absolute;
99+
height: 1px;
100+
width: calc(100% ~'-' @dot-width);
101+
top: -(@dot-baseline-distance + @dot-height / 2);
102+
left: calc(50% ~'+' @dot-width / 2);
146103
}
147104

148-
&.steps-11 li {
149-
width: ~'calc(100% / 11)';
105+
&:after {
106+
position: absolute;
107+
top: -(@dot-baseline-distance + @dot-height);
108+
left: calc(50% ~'-' @dot-width / 2);
109+
width: @dot-width;
110+
height: @dot-height;
111+
border-radius: 100%;
112+
background-color: @wz-color-default;
113+
content: '';
114+
transition: 0.25s;
150115
}
151116

152-
li.default {
153-
pointer-events: none;
117+
a {
118+
color: @wz-color-current;
119+
text-decoration: none;
120+
text-transform: uppercase;
121+
font-weight: bold;
122+
transition: 0.25s;
123+
cursor: pointer;
154124

155-
a:hover {
156-
color: @wz-color-current;
125+
&:hover {
126+
color: darken(@wz-color-current, 20%);
157127
}
158128
}
129+
}
159130

160-
li.current,
161-
li.editing {
162-
pointer-events: none;
163-
}
131+
li.default,
132+
li.current,
133+
li.editing {
134+
pointer-events: none;
135+
}
164136

165-
li.current a:before {
166-
background-color: @wz-color-current;
167-
}
137+
// default steps shouldn't change when hovered, because they aren't clickable
138+
li.default a:hover {
139+
color: @wz-color-current;
140+
}
168141

169-
li.done a:before {
170-
background-color: @wz-color-done;
171-
}
142+
li.current:after {
143+
background-color: @wz-color-current;
144+
}
172145

173-
li.optional a:before {
174-
background-color: @wz-color-optional;
175-
}
146+
li.done:after {
147+
background-color: @wz-color-done;
148+
}
176149

177-
li.editing a:before {
178-
background-color: @wz-color-editing;
179-
}
150+
li.optional:after {
151+
background-color: @wz-color-optional;
152+
}
153+
154+
li.editing:after {
155+
background-color: @wz-color-editing;
180156
}
181157
}
158+

0 commit comments

Comments
 (0)