Skip to content

Commit 27034e8

Browse files
author
MPopov
committed
add some initial styles
1 parent 481023a commit 27034e8

File tree

4 files changed

+120
-52
lines changed

4 files changed

+120
-52
lines changed

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

+110-40
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
@include e(header) {
1515
display: flex;
1616
flex-direction: column;
17-
gap: 20px;
1817
width: 100%;
1918
}
2019

@@ -25,53 +24,124 @@
2524
position: relative
2625
}
2726

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;
27+
@include e(step) {
28+
display: flex;
29+
position: relative;
30+
flex-direction: column;
31+
align-content: center;
32+
justify-content: center;
33+
}
34+
35+
@include e(step-header) {
36+
padding: rem(16px);
37+
display: flex;
38+
align-content: center;
39+
margin: rem(8px) 0;
40+
41+
&:hover {
42+
background: rgba(255, 255, 255, .5);
43+
}
4044
}
4145

42-
@include e(body-contnet, $m: active) {
43-
z-index: 1;
46+
@include e(step-content) {
47+
margin-left: rem(40px);
4448
position: relative;
49+
50+
&::before {
51+
content: '';
52+
position: absolute;
53+
top: rem(-8px);
54+
bottom: rem(-8px);
55+
left: rem(-12px);
56+
height: 100%;
57+
width: rem(1px);
58+
background: #999;
59+
}
4560
}
46-
}
4761

48-
// TODO THIS SHOULD GO ON THE HOST ELEMENT
49-
.igx-stepper__header--horizontal {
50-
flex-direction: row;
51-
justify-content: space-between;
52-
}
62+
@include e(step, $m: active) {
63+
background: white;
64+
color: #000;
65+
}
5366

54-
// content
55-
.igx-stepper__header-step-content {
56-
border: 2px solid #ccc;
57-
border-radius: 15px;
58-
padding: 16px;
59-
}
67+
@include e(step, $m: disabled) {
68+
background: gray;
69+
opacity: .5;
6070

61-
.igx-stepper__header-step-content:hover {
62-
background-color: rgba($color: #ccc, $alpha: .5);
63-
}
71+
&:hover {
72+
background: gray;
73+
}
74+
}
6475

65-
.igx-stepper__header-step-content--active {
66-
pointer-events: none;
67-
background-color: rgba($color: green, $alpha: .5);
68-
}
76+
@include e(step, $m: skip) {
77+
background: #916418;
78+
}
6979

70-
.igx-stepper__header-step-content--disabled {
71-
pointer-events: none;
72-
opacity: .5;
73-
}
80+
@include m(horizontal) {
81+
@include e(header) {
82+
flex-direction: row;
83+
}
84+
85+
@include e(step) {
86+
flex-grow: 1;
87+
flex-direction: row;
88+
89+
&::before,
90+
&::after {
91+
content: '';
92+
width: auto;
93+
height: 1px;
94+
flex: 1;
95+
align-self: center;
96+
background: #999;
97+
}
98+
99+
&:last-of-type,
100+
&:first-of-type {
101+
flex-basis: 0;
102+
}
74103

75-
.igx-stepper__header-step-content--skip {
76-
opacity: .5;
104+
&:first-of-type {
105+
&::before {
106+
display: none;
107+
}
108+
}
109+
110+
&:last-of-type {
111+
&::after {
112+
display: none;
113+
}
114+
}
115+
}
116+
117+
@include e(step-header) {
118+
justify-content: center;
119+
margin: 0 rem(8px);
120+
}
121+
122+
@include e(step-content) {
123+
&::before {
124+
display: none;
125+
}
126+
}
127+
128+
@include e(body-content) {
129+
display: block;
130+
position: absolute;
131+
top: 0;
132+
left: 0;
133+
right: 0;
134+
bottom: 0;
135+
width: 100%;
136+
height: 100%;
137+
overflow-y: auto;
138+
overflow-x: hidden;
139+
z-index: -1;
140+
}
141+
142+
@include e(body-content, $m: active) {
143+
z-index: 1;
144+
position: relative;
145+
}
146+
}
77147
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959

6060
%stepper-display {
6161
display: flex;
62+
flex-direction: column;
6263
width: 100%;
6364
overflow: hidden;
6465
}

‎projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<ng-template #defaultLabel>
2-
<div>
3-
<ng-content select='[igxStepLabel]'></ng-content>
4-
</div>
2+
<ng-content select='[igxStepLabel]'></ng-content>
53
</ng-template>
64

75
<ng-template #contentTemplate>
@@ -10,8 +8,7 @@
108
</div>
119
</ng-template>
1210

13-
14-
<div class="igx-step__header" [ngClass]="stepHeaderClasses" (click)="onPointerDown($event)">
11+
<div class="igx-stepper__step-header" [ngClass]="stepHeaderClasses" (click)="onPointerDown($event)">
1512
<ng-content select='[igxStepIcon]'></ng-content>
1613
<ng-container *ngTemplateOutlet="defaultLabel"></ng-container>
1714
</div>

‎projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -205,8 +205,8 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
205205
// }
206206

207207
/** @hidden @internal */
208-
@HostBinding('class.igx-stepper__header-step')
209-
public cssClass = 'igx-stepper__header-step';
208+
@HostBinding('class.igx-stepper__step')
209+
public cssClass = 'igx-stepper__step';
210210

211211
// // TODO: will be used in Drag and Drop implementation
212212
// /** @hidden @internal */
@@ -304,22 +304,22 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
304304
if (this.isHorizontal) {
305305
return { 'igx-stepper__body-content': true, 'igx-stepper__body-content--active': this.active };
306306
} else {
307-
return 'igx-step__content';
307+
return 'igx-stepper__step-content';
308308
}
309309
}
310310

311311
public get stepHeaderClasses() {
312312
if (this.active) {
313-
return 'igx-step__header--active';
313+
return 'igx-stepper__step--active';
314314
}
315315
if (this.disabled) {
316-
return 'igx-stepper__header-step-content--disabled';
316+
return 'igx-stepper__step--disabled';
317317
}
318318
if (this.skip) {
319-
return 'igx-stepper__header-step-content--skip';
319+
return 'igx-stepper__step--skip';
320320
}
321321
if (this.optional) {
322-
return 'igx-step__header--optional';
322+
return 'igx-stepper__step--optional';
323323
}
324324
}
325325

0 commit comments

Comments
 (0)