pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
angular-wizard.less
(3044B)
1 .steps-indicator {
2 /* ---- steps quantity ---- */
3
4 @color-default: @brand-primary-light;
5 @color-current: @brand-primary;
6 @color-done: #339933;
7 @color-editing: #FF0000;
8
9 position: absolute;
10 right: 0;
11 bottom: 0;
12 left: 0;
13 margin: 0;
14 padding: 0;
15 height: 30px;
16 list-style: none;
17
18
19
20 &:before {
21 background-color: @color-default;
22 content: '';
23 position: absolute;
24 height: 1px;
25 }
26
27 &.steps-2:before {
28 left: ~'calc(100% / 2 / 2)';
29 right: ~'calc(100% / 2 / 2)';
30 }
31
32 &.steps-3:before {
33 left: ~'calc(100% / 3 / 2)';
34 right: ~'calc(100% / 3 / 2)';
35 }
36
37 &.steps-4:before {
38 left: ~'calc(100% / 4 / 2)';
39 right: ~'calc(100% / 4 / 2)';
40 }
41
42 &.steps-5:before {
43 left: ~'calc(100% / 5 / 2)';
44 right: ~'calc(100% / 5 / 2)';
45 }
46
47 &.steps-6:before {
48 left: ~'calc(100% / 6 / 2)';
49 right: ~'calc(100% / 6 / 2)';
50 }
51
52 &.steps-7:before {
53 left: ~'calc(100% / 7 / 2)';
54 right: ~'calc(100% / 7 / 2)';
55 }
56
57 &.steps-8:before {
58 left: ~'calc(100% / 8 / 2)';
59 right: ~'calc(100% / 8 / 2)';
60 }
61
62 &.steps-9:before {
63 left: ~'calc(100% / 9 / 2)';
64 right: ~'calc(100% / 9 / 2)';
65 }
66
67 &.steps-10:before {
68 left: ~'calc(100% / 10 / 2)';
69 right: ~'calc(100% / 10 / 2)';
70 }
71
72 /* --- http://www.paulirish.com/2012/box-sizing-border-box-ftw/ ---- */
73 * {
74 -webkit-box-sizing: border-box;
75 -moz-box-sizing: border-box;
76 box-sizing: border-box;
77 }
78
79
80 li {
81 position: relative;
82 float: left;
83 margin: 0;
84 padding: 0;
85 padding-top: 10px;
86 text-align: center;
87 line-height: 30px;
88
89 a {
90 color: @color-current;
91 text-decoration: none;
92 text-transform: uppercase;
93 font-size: @font-size-base + 4;
94 font-weight: bold;
95 transition: 0.25s;
96 cursor: pointer;
97
98 &:before {
99 position: absolute;
100 top: -7px;
101 left: ~'calc(50% - 7px)';
102 width: 14px;
103 height: 14px;
104 border-radius: 100%;
105 background-color: @color-default;
106 content: '';
107 transition: 0.25s;
108 }
109
110 &:hover {
111 color: darken(@color-current, 20%);
112 }
113 }
114 }
115
116 &.steps-2 li {
117 width: ~'calc(100% / 2)';
118 }
119
120 &.steps-3 li {
121 width: ~'calc(100% / 3)';
122 }
123
124 &.steps-4 li {
125 width: ~'calc(100% / 4)';
126 }
127
128 &.steps-5 li {
129 width: ~'calc(100% / 5)';
130 }
131
132 &.steps-6 li {
133 width: ~'calc(100% / 6)';
134 }
135
136 &.steps-7 li {
137 width: ~'calc(100% / 7)';
138 }
139
140 &.steps-8 li {
141 width: ~'calc(100% / 8)';
142 }
143
144 &.steps-9 li {
145 width: ~'calc(100% / 9)';
146 }
147
148 &.steps-10 li {
149 width: ~'calc(100% / 10)';
150 }
151
152 &.steps-11 li {
153 width: ~'calc(100% / 11)';
154 }
155
156 li.default {
157 pointer-events: none;
158
159 a:hover {
160 color: @color-current;
161 }
162 }
163
164 li.current,
165 li.editing {
166 pointer-events: none;
167 }
168
169 li.current a:before {
170 background-color: @color-current;
171 }
172
173 li.done a:before {
174 background-color: @color-done;
175 }
176
177 li.editing a:before {
178 background-color: @color-editing;
179 }
180 }