Skip to content

Commit 481023a

Browse files
MPopovmmart1n
MPopov
authored and
mmart1n
committed
feat(stepper): applying initial styles
1 parent 42f3631 commit 481023a

File tree

14 files changed

+289
-91
lines changed

14 files changed

+289
-91
lines changed

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

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
////
2+
/// @group components
3+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
4+
/// @requires {mixin} bem-block
5+
/// @requires {mixin} bem-elem
6+
/// @requires {mixin} bem-mod
7+
////
8+
@include b(igx-stepper) {
9+
$block: bem--selector-to-string(&);
10+
@include register-component(igx-stepper);
11+
12+
@extend %stepper-display !optional;
13+
14+
@include e(header) {
15+
display: flex;
16+
flex-direction: column;
17+
gap: 20px;
18+
width: 100%;
19+
}
20+
21+
@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;
45+
}
46+
}
47+
48+
// TODO THIS SHOULD GO ON THE HOST ELEMENT
49+
.igx-stepper__header--horizontal {
50+
flex-direction: row;
51+
justify-content: space-between;
52+
}
53+
54+
// content
55+
.igx-stepper__header-step-content {
56+
border: 2px solid #ccc;
57+
border-radius: 15px;
58+
padding: 16px;
59+
}
60+
61+
.igx-stepper__header-step-content:hover {
62+
background-color: rgba($color: #ccc, $alpha: .5);
63+
}
64+
65+
.igx-stepper__header-step-content--active {
66+
pointer-events: none;
67+
background-color: rgba($color: green, $alpha: .5);
68+
}
69+
70+
.igx-stepper__header-step-content--disabled {
71+
pointer-events: none;
72+
opacity: .5;
73+
}
74+
75+
.igx-stepper__header-step-content--skip {
76+
opacity: .5;
77+
}

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

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
@use 'sass:math';
2+
////
3+
/// @group themes
4+
/// @access public
5+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
6+
////
7+
8+
/// @param {Map} $palette [null] - The palette used as basis for styling the component.
9+
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
10+
11+
/// @requires $default-palette
12+
/// @requires $light-schema
13+
/// @requires apply-palette
14+
/// @requires extend
15+
16+
/// @example scss Set custom track and thumb on colors
17+
/// $my-stepper-theme: igx-stepper-theme();
18+
/// @include igx-stepper($my-stepper-theme);
19+
@function igx-stepper-theme(
20+
$palette: null,
21+
$schema: $light-schema,
22+
$title-color: null,
23+
$subtitle-color: null,
24+
$incomplete-color: null,
25+
$complete-color: null,
26+
$error-color: null,
27+
$optional-color: null,
28+
$current-color: null,
29+
$disabled-color: null,
30+
) {
31+
$name: 'igx-switch';
32+
$switch-schema: ();
33+
34+
@if map-has-key($schema, $name) {
35+
$switch-schema: map-get($schema, $name);
36+
} @else {
37+
$switch-schema: $schema;
38+
}
39+
40+
$theme: apply-palette($switch-schema, $palette);
41+
42+
@return extend($theme, (
43+
name: $name,
44+
palette: $palette,
45+
));
46+
}
47+
48+
/// @param {Map} $theme - The theme used to style the component.
49+
/// @requires {mixin} igx-css-vars
50+
/// @requires em
51+
/// @requires --var
52+
@mixin igx-stepper($theme) {
53+
@include igx-css-vars($theme);
54+
55+
$variant: map-get($theme, variant);
56+
57+
$left: if-ltr(left, right);
58+
$right: if-ltr(right, left);
59+
60+
%stepper-display {
61+
display: flex;
62+
width: 100%;
63+
overflow: hidden;
64+
}
65+
}
66+
67+
/// Adds typography styles for the igx-stepper component.
68+
/// Uses the 'subtitle-1' category from the typographic scale.
69+
/// @group typography
70+
/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
71+
/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
72+
/// @requires {mixin} igx-type-style
73+
@mixin igx-switch-typography(
74+
$type-scale,
75+
$categories: (label: 'subtitle-1')
76+
) {
77+
$label: map-get($categories, 'label');
78+
79+
%switch-label {
80+
@include igx-type-style($type-scale, $label) {
81+
margin-top: 0;
82+
margin-bottom: 0;
83+
}
84+
}
85+
}

‎projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
@import '../components/splitter/splitter-component';
7171
@import '../components/snackbar/snackbar-component';
7272
@import '../components/switch/switch-component';
73+
@import '../components/stepper/stepper-component';
7374
@import '../components/tabs/tabs-component';
7475
@import '../components/toast/toast-component';
7576
@import '../components/tooltip/tooltip-component';

‎projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

+5
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
@import '../components/tabs/tabs-theme';
5151
@import '../components/scrollbar/scrollbar-theme';
5252
@import '../components/switch/switch-theme';
53+
@import '../components/stepper/stepper-theme';
5354
@import '../components/snackbar/snackbar-theme';
5455
@import '../components/slider/slider-theme';
5556
@import '../components/splitter/splitter-theme';
@@ -445,6 +446,10 @@
445446
));
446447
}
447448

449+
@if not(index($exclude, 'igx-stepper')) {
450+
@include igx-stepper(igx-stepper-theme($schema: $schema));
451+
}
452+
448453
@if not(index($exclude, 'igx-tabs')) {
449454
@include igx-tabs(igx-tabs-theme(
450455
$schema: $schema,

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss

+9
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
@import './sparkline';
5656
@import './splitter';
5757
@import './switch';
58+
@import './stepper';
5859
@import './tabs';
5960
@import './time-picker';
6061
@import './toast';
@@ -118,6 +119,7 @@
118119
/// @property {Map} sparkline [$_dark-sparkline]
119120
/// @property {Map} igx-splitter [$_dark-splitter]
120121
/// @property {Map} igx-switch [$_dark-switch]
122+
/// @property {Map} igx-stepper [$_dark-stepper]
121123
/// @property {Map} igx-tabs [$_dark-tabs]
122124
/// @property {Map} igx-time-picker [$_dark-time-picker]
123125
/// @property {Map} igx-toast [$_dark-toast]
@@ -177,6 +179,7 @@ $dark-schema: (
177179
sparkline: $_dark-sparkline,
178180
igx-splitter: $_dark-splitter,
179181
igx-switch: $_dark-switch,
182+
igx-stepper: $_dark-stepper,
180183
igx-tabs: $_dark-tabs,
181184
igx-time-picker: $_dark-time-picker,
182185
igx-toast: $_dark-toast,
@@ -246,6 +249,7 @@ $dark-material-schema: $dark-schema;
246249
/// @property {Map} sparkline [$_dark-fluent-sparkline],
247250
/// @property {Map} igx-splitter [$_dark-fluent-splitter],
248251
/// @property {Map} igx-switch [$_dark-fluent-switch],
252+
/// @property {Map} igx-stepper [$_dark-fluent-stepper],
249253
/// @property {Map} igx-tabs [$_dark-fluent-tabs],
250254
/// @property {Map} igx-time-picker [$_dark-fluent-time-picker],
251255
/// @property {Map} igx-toast [$_dark-fluent-toast],
@@ -305,6 +309,7 @@ $dark-fluent-schema: (
305309
sparkline: $_dark-fluent-sparkline,
306310
igx-splitter: $_dark-fluent-splitter,
307311
igx-switch: $_dark-fluent-switch,
312+
igx-stepper: $_dark-fluent-stepper,
308313
igx-tabs: $_dark-fluent-tabs,
309314
igx-time-picker: $_dark-fluent-time-picker,
310315
igx-toast: $_dark-fluent-toast,
@@ -369,6 +374,7 @@ $dark-fluent-schema: (
369374
/// @property {Map} sparkline [$_dark-bootstrap-sparkline],
370375
/// @property {Map} igx-splitter [$_dark-bootstrap-splitter],
371376
/// @property {Map} igx-switch [$_dark-bootstrap-switch],
377+
/// @property {Map} igx-stepper [$_dark-bootstrap-stepper],
372378
/// @property {Map} igx-tabs [$_dark-bootstrap-tabs],
373379
/// @property {Map} igx-time-picker [$_dark-bootstrap-time-picker],
374380
/// @property {Map} igx-toast [$_dark-bootstrap-toast],
@@ -428,6 +434,7 @@ $dark-bootstrap-schema: (
428434
sparkline: $_dark-bootstrap-sparkline,
429435
igx-splitter: $_dark-bootstrap-splitter,
430436
igx-switch: $_dark-bootstrap-switch,
437+
igx-stepper: $_dark-bootstrap-stepper,
431438
igx-tabs: $_dark-bootstrap-tabs,
432439
igx-time-picker: $_dark-bootstrap-time-picker,
433440
igx-toast: $_dark-bootstrap-toast,
@@ -492,6 +499,7 @@ $dark-bootstrap-schema: (
492499
/// @property {Map} sparkline [$_dark-indigo-sparkline]
493500
/// @property {Map} igx-splitter [$_dark-indigo-splitter]
494501
/// @property {Map} igx-switch [$_dark-indigo-switch]
502+
/// @property {Map} igx-stepper [$_dark-indigo-stepper]
495503
/// @property {Map} igx-tabs [$_dark-indigo-tabs]
496504
/// @property {Map} igx-time-picker [$_dark-indigo-time-picker]
497505
/// @property {Map} igx-toast [$_dark-indigo-toast]
@@ -551,6 +559,7 @@ $dark-indigo-schema: (
551559
sparkline: $_dark-indigo-sparkline,
552560
igx-splitter: $_dark-indigo-splitter,
553561
igx-switch: $_dark-indigo-switch,
562+
igx-stepper: $_dark-indigo-stepper,
554563
igx-tabs: $_dark-indigo-tabs,
555564
igx-time-picker: $_dark-indigo-time-picker,
556565
igx-toast: $_dark-indigo-toast,

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_stepper.scss

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@import '../light/stepper';
2+
////
3+
/// @group schemas
4+
/// @access public
5+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
6+
////
7+
8+
/// Generates a dark stepper schema.
9+
/// @type {Map}
10+
///
11+
/// @requires {function} extend
12+
/// @requires $_light-stepper
13+
/// @see $default-palette
14+
$_dark-stepper: extend($_light-stepper);
15+
16+
/// Generates a dark fluent stepper schema
17+
/// @type {Map}
18+
///
19+
/// @requires {function} extend
20+
/// @requires $_fluent-stepper
21+
/// @requires $_base-dark-stepper
22+
$_dark-fluent-stepper: extend($_fluent-stepper);
23+
24+
/// Generates a dark bootstrap stepper schema.
25+
/// @type {Map}
26+
///
27+
/// @requires {function} extend
28+
/// @requires $_bootstrap-stepper
29+
/// @requires $_base-dark-stepper
30+
$_dark-bootstrap-stepper: extend($_bootstrap-stepper);
31+
32+
/// Generates a dark indigo stepper schema.
33+
/// @type {Map}
34+
///
35+
/// @requires {function} extend
36+
/// @requires $_indigo-stepper
37+
$_dark-indigo-stepper: extend($_indigo-stepper);

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss

+6
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
@import './sparkline';
5656
@import './splitter';
5757
@import './switch';
58+
@import './stepper';
5859
@import './tabs';
5960
@import './time-picker';
6061
@import './toast';
@@ -118,6 +119,7 @@
118119
/// @property {Map} sparkline [$_light-sparkline]
119120
/// @property {Map} igx-splitter [$_light-splitter]
120121
/// @property {Map} igx-switch [$_light-switch]
122+
/// @property {Map} igx-stepper [$_light-stepper]
121123
/// @property {Map} igx-tabs [$_light-tabs]
122124
/// @property {Map} igx-time-picker [$_light-time-picker]
123125
/// @property {Map} igx-toast [$_light-toast]
@@ -177,6 +179,7 @@ $light-schema: (
177179
sparkline: $_light-sparkline,
178180
igx-splitter: $_light-splitter,
179181
igx-switch: $_light-switch,
182+
igx-stepper: $_light-stepper,
180183
igx-tabs: $_light-tabs,
181184
igx-time-picker: $_light-time-picker,
182185
igx-toast: $_light-toast,
@@ -247,6 +250,7 @@ $light-fluent-schema: (
247250
sparkline: $_fluent-sparkline,
248251
igx-splitter: $_fluent-splitter,
249252
igx-switch: $_fluent-switch,
253+
igx-stepper: $_fluent-stepper,
250254
igx-tabs: $_fluent-tabs,
251255
igx-time-picker: $_fluent-time-picker,
252256
igx-toast: $_fluent-toast,
@@ -312,6 +316,7 @@ $light-bootstrap-schema: (
312316
sparkline: $_bootstrap-sparkline,
313317
igx-splitter: $_bootstrap-splitter,
314318
igx-switch: $_bootstrap-switch,
319+
igx-stepper: $_bootstrap-stepper,
315320
igx-tabs: $_bootstrap-tabs,
316321
igx-time-picker: $_bootstrap-time-picker,
317322
igx-toast: $_bootstrap-toast,
@@ -377,6 +382,7 @@ $light-indigo-schema: (
377382
sparkline: $_indigo-sparkline,
378383
igx-splitter: $_indigo-splitter,
379384
igx-switch: $_indigo-switch,
385+
igx-stepper: $_indigo-stepper,
380386
igx-tabs: $_indigo-tabs,
381387
igx-time-picker: $_indigo-time-picker,
382388
igx-toast: $_indigo-toast,

0 commit comments

Comments
 (0)