Skip to content

Commit ce3cf09

Browse files
MPopovmmart1n
MPopov
authored and
mmart1n
committed
feat(stepper): add some initial styles
- updating the layout to look more like the final design
1 parent 0ee2367 commit ce3cf09

File tree

6 files changed

+334
-86
lines changed

6 files changed

+334
-86
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss

+68-52
Original file line numberDiff line numberDiff line change
@@ -12,66 +12,82 @@
1212
@extend %stepper-display !optional;
1313

1414
@include e(header) {
15-
display: flex;
16-
flex-direction: column;
17-
gap: 20px;
18-
width: 100%;
15+
@extend %igx-stepper__header !optional;
1916
}
2017

2118
@include e(body) {
22-
display: flex;
23-
flex-direction: row;
24-
overflow: hidden;
25-
position: relative
26-
}
27-
28-
@include e(body-contnet) {
29-
display: block;
30-
position: absolute;
31-
top: 0;
32-
left: 0;
33-
right: 0;
34-
bottom: 0;
35-
width: 100%;
36-
height: 100%;
37-
overflow-y: auto;
38-
overflow-x: hidden;
39-
z-index: -1;
40-
}
41-
42-
@include e(body-contnet, $m: active) {
43-
z-index: 1;
44-
position: relative;
19+
@extend %igx-stepper__body !optional;
4520
}
46-
}
4721

48-
// TODO THIS SHOULD GO ON THE HOST ELEMENT
49-
.igx-stepper__header--horizontal {
50-
flex-direction: row;
51-
justify-content: space-between;
52-
}
22+
@include e(step) {
23+
@extend %igx-stepper__step !optional;
24+
}
5325

54-
// content
55-
.igx-stepper__header-step-content {
56-
border: 2px solid #ccc;
57-
border-radius: 15px;
58-
padding: 16px;
59-
}
26+
@include e(step-header) {
27+
@extend %igx-stepper__step-header !optional;
28+
}
6029

61-
.igx-stepper__header-step-content:hover {
62-
background-color: rgba($color: #ccc, $alpha: .5);
63-
}
30+
@include e(step-content) {
31+
@extend %igx-stepper__step-content !optional;
32+
}
6433

65-
.igx-stepper__header-step-content--active {
66-
pointer-events: none;
67-
background-color: rgba($color: green, $alpha: .5);
68-
}
34+
@include e(step, $m: active) {
35+
@extend %igx-stepper__step--active !optional;
36+
}
6937

70-
.igx-stepper__header-step-content--disabled {
71-
pointer-events: none;
72-
opacity: .5;
73-
}
38+
@include e(step, $m: skip) {
39+
@extend %igx-stepper__step--skip !optional;
40+
}
41+
42+
@include e(step, $m: disabled) {
43+
@extend %igx-stepper__step--disabled !optional;
44+
}
45+
46+
@include e(step-icon) {
47+
@extend %igx-stepper__step-icon !optional;
48+
}
49+
50+
@include e(step-icon, $m: valid) {
51+
@extend %igx-stepper__step-icon--valid !optional;
52+
}
7453

75-
.igx-stepper__header-step-content--skip {
76-
opacity: .5;
54+
@include e(step-icon, $m: invalid) {
55+
@extend %igx-stepper__step-icon--invalid !optional;
56+
}
57+
58+
@include e(title-wrapper) {
59+
@extend %igx-stepper__title-wrapper !optional;
60+
}
61+
62+
@include e(title) {
63+
@extend %igx-stepper__title !optional;
64+
}
65+
66+
@include e(title, $m: top) {
67+
@extend %igx-stepper__title--top !optional;
68+
}
69+
70+
@include e(title, $m: bottom) {
71+
@extend %igx-stepper__title--bottom !optional;
72+
}
73+
74+
@include e(title, $m: left) {
75+
@extend %igx-stepper__title--left !optional;
76+
}
77+
78+
@include e(title, $m: left) {
79+
@extend %igx-stepper__title--right !optional;
80+
}
81+
82+
@include m(horizontal) {
83+
@extend %igx-stepper--horizontal !optional;
84+
85+
@include e(body-content) {
86+
@extend %igx-stepper__body-content !optional;
87+
}
88+
89+
@include e(body-content, $m: active) {
90+
@extend %igx-stepper__body-content--active !optional;
91+
}
92+
}
7793
}

‎projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss

+223-5
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,15 @@
1919
@function igx-stepper-theme(
2020
$palette: null,
2121
$schema: $light-schema,
22+
$step-hover-background: null,
2223
$title-color: null,
2324
$subtitle-color: null,
2425
$incomplete-color: null,
25-
$complete-color: null,
26-
$error-color: null,
27-
$optional-color: null,
28-
$current-color: null,
29-
$disabled-color: null,
26+
//$complete-color: null,
27+
//$error-color: null,
28+
//$optional-color: null,
29+
//$current-color: null,
30+
//$disabled-color: null,
3031
) {
3132
$name: 'igx-switch';
3233
$switch-schema: ();
@@ -42,6 +43,10 @@
4243
@return extend($theme, (
4344
name: $name,
4445
palette: $palette,
46+
step-hover-background: $step-hover-background,
47+
title-color: $title-color,
48+
subtitle-color: $subtitle-color,
49+
incomplete-color: $incomplete-color,
4550
));
4651
}
4752

@@ -57,11 +62,224 @@
5762
$left: if-ltr(left, right);
5863
$right: if-ltr(right, left);
5964

65+
%stepper-display,
66+
%igx-stepper__header,
67+
%igx-stepper__body,
68+
%igx-stepper__step {
69+
display: flex;
70+
}
71+
6072
%stepper-display {
73+
flex-direction: column;
74+
width: 100%;
75+
overflow: hidden;
76+
}
77+
78+
%igx-stepper__header {
79+
flex-direction: column;
80+
width: 100%;
81+
}
82+
83+
%igx-stepper__body {
84+
overflow: hidden;
85+
position: relative
86+
}
87+
88+
%igx-stepper__step {
89+
position: relative;
90+
flex-direction: column;
91+
align-content: center;
92+
justify-content: center;
93+
94+
&:last-of-type {
95+
&::before {
96+
display: none;
97+
}
98+
}
99+
}
100+
101+
%igx-stepper__step-header {
102+
padding: rem(24px);
61103
display: flex;
104+
align-content: center;
105+
106+
&:hover {
107+
//background: --var($theme, 'title-color');
108+
background: rgba(255, 255, 255, .1);
109+
}
110+
}
111+
112+
%igx-stepper__step--active {
113+
%igx-stepper__step-icon {
114+
color: #4dff12;
115+
}
116+
}
117+
118+
%igx-stepper__step--skip {
119+
%igx-stepper__step-icon {
120+
color: #b22efd;
121+
}
122+
}
123+
124+
%igx-stepper__step--disabled {
125+
%igx-stepper__step-icon,
126+
%igx-stepper__title {
127+
opacity: .3;
128+
}
129+
130+
pointer-events: none;
131+
cursor: default;
132+
}
133+
134+
%igx-stepper__step-content {
135+
margin-#{$left}: rem(36px);
136+
position: relative;
137+
138+
&::before {
139+
content: '';
140+
position: absolute;
141+
top: rem(-16px);
142+
bottom: rem(-16px);
143+
#{$left}: rem(0);
144+
width: rem(1px);
145+
background: #999;
146+
}
147+
}
148+
149+
%igx-stepper__body-content {
150+
display: block;
151+
position: absolute;
152+
top: 0;
153+
#{$left}: 0;
154+
#{$right}: 0;
155+
bottom: 0;
62156
width: 100%;
157+
height: 100%;
158+
overflow-y: auto;
159+
overflow-x: hidden;
160+
z-index: -1;
161+
}
162+
163+
%igx-stepper__step-content,
164+
%igx-stepper__body-content {
165+
padding: 0 rem(24px) rem(24px) rem(24px);
166+
}
167+
168+
%igx-stepper__body-content--active {
169+
z-index: 1;
170+
position: relative;
171+
}
172+
173+
%igx-stepper__step-icon {
174+
color: #09f;
175+
margin-#{$right}: rem(12px);
176+
}
177+
178+
%igx-stepper__step-icon--valid {
179+
color: green;
180+
}
181+
182+
%igx-stepper__step-icon--invalid {
183+
color: red;
184+
}
185+
186+
%igx-stepper__title-wrapper {
187+
width: 100%;
188+
overflow: hidden;
189+
white-space: nowrap;
190+
text-overflow: ellipsis;
191+
min-width: rem(50px);
192+
}
193+
194+
%igx-stepper__title {
195+
color: #fff;
196+
text-overflow: ellipsis;
63197
overflow: hidden;
64198
}
199+
200+
%igx-stepper__title--top {
201+
margin-bottom: rem(16px);
202+
}
203+
204+
%igx-stepper__title--bottom {
205+
margin-top: rem(16px);
206+
}
207+
208+
%igx-stepper--horizontal {
209+
%igx-stepper__header {
210+
flex-direction: row;
211+
}
212+
213+
%igx-stepper__step {
214+
flex-direction: row;
215+
flex-grow: 1;
216+
217+
&::after {
218+
content: '';
219+
width: auto;
220+
height: 1px;
221+
flex: 1;
222+
top: rem(-13px);
223+
position: relative;
224+
align-self: center;
225+
background: #999;
226+
}
227+
228+
&:last-of-type {
229+
flex-basis: 0;
230+
231+
%igx-stepper__step-header::after,
232+
&::after {
233+
display: none;
234+
}
235+
}
236+
237+
&:first-of-type {
238+
%igx-stepper__step-header::before {
239+
display: none;
240+
}
241+
}
242+
}
243+
244+
%igx-stepper__step-header {
245+
display: flex;
246+
flex-direction: column;
247+
justify-content: center;
248+
align-items: center;
249+
position: relative;
250+
padding: rem(24px) rem(32px);
251+
margin: 0 rem(8px);
252+
cursor: pointer;
253+
254+
&::before,
255+
&::after {
256+
top: rem(36px);
257+
content: '';
258+
position: absolute;
259+
height: rem(1px);
260+
background: #999;
261+
width: calc(50% - 16px);
262+
}
263+
264+
&::before {
265+
#{$left}: rem(-8px);
266+
}
267+
268+
&::after {
269+
#{$right}: rem(-8px);
270+
}
271+
}
272+
273+
%igx-stepper__step-content {
274+
&::before {
275+
display: none;
276+
}
277+
}
278+
279+
%igx-stepper__step-icon {
280+
margin: 0;
281+
}
282+
}
65283
}
66284

67285
/// Adds typography styles for the igx-stepper component.

0 commit comments

Comments
 (0)