feat(igx-stepper): final layout changes

IgniteUI · Sep 17, 2021 · b29cecc · b29cecc
1 parent ce3cf09
commit b29cecc
Show file tree

Hide file tree

Showing 10 changed files with 280 additions and 116 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-component.scss
@@ -31,8 +31,12 @@
         @extend %igx-stepper__step-content !optional;
     }
 
-    @include e(step, $m: active) {
-        @extend %igx-stepper__step--active !optional;
+    @include e(step-content-wrapper) {
+        @extend %igx-stepper__step-content-wrapper !optional;
+    }
+
+    @include e(step, $m: current) {
+        @extend %igx-stepper__step--current !optional;
     }
 
     @include e(step, $m: skip) {

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -23,13 +23,11 @@
     $title-color: null,
     $subtitle-color: null,
     $incomplete-color: null,
-    //$complete-color: null,
-    //$error-color: null,
-    //$optional-color: null,
-    //$current-color: null,
-    //$disabled-color: null,
+    $current-color: null,
+    $step-line: null,
+    $complete-step-line: null,
 ) {
-    $name: 'igx-switch';
+    $name: 'igx-stepper';
     $switch-schema: ();
 
     @if map-has-key($schema, $name) {
@@ -43,10 +41,14 @@
     @return extend($theme, (
         name: $name,
         palette: $palette,
+
         step-hover-background: $step-hover-background,
         title-color: $title-color,
         subtitle-color: $subtitle-color,
         incomplete-color: $incomplete-color,
+        current-color: $current-color,
+        step-line: $step-line,
+        complete-step-line: $complete-step-line,
     ));
 }
 
@@ -59,6 +61,9 @@
 
     $variant: map-get($theme, variant);
 
+    $dashed-border: #fff;
+    $dashed-border-size: rem(20px) rem(1px);
+
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
 
@@ -72,7 +77,6 @@
     %stepper-display {
         flex-direction: column;
         width: 100%;
-        overflow: hidden;
     }
 
     %igx-stepper__header {
@@ -81,37 +85,55 @@
     }
 
     %igx-stepper__body {
-        overflow: hidden;
         position: relative
     }
 
+    %stepper-display,
+    %igx-stepper__body,
+    %igx-stepper__step-header,
+    %igx-stepper__title-wrapper {
+        overflow: hidden;
+    }
+
     %igx-stepper__step {
         position: relative;
         flex-direction: column;
         align-content: center;
         justify-content: center;
+        align-self: flex-start;
 
         &:last-of-type {
-            &::before {
-                display: none;
+            %igx-stepper__step-content-wrapper {
+                &::before {
+                    display: none;
+                }
             }
         }
     }
 
     %igx-stepper__step-header {
-        padding: rem(24px);
         display: flex;
-        align-content: center;
+        align-items: center;
+        padding: rem(24px);
+        position: relative;
+
+        igx-icon,
+        igx-avatar,
+        igx-badge,
+        igx-circular-bar,
+        [igxbutton] {
+            max-height: rem(24px);
+            max-width: rem(24px);
+        }
 
         &:hover {
-            //background: --var($theme, 'title-color');
-            background: rgba(255, 255, 255, .1);
+            background: --var($theme, 'step-hover-background');
         }
     }
 
-    %igx-stepper__step--active {
+    %igx-stepper__step--current {
         %igx-stepper__step-icon {
-            color: #4dff12;
+            color: --var($theme, 'current-color');
         }
     }
 
@@ -131,21 +153,6 @@
         cursor: default;
     }
 
-    %igx-stepper__step-content {
-        margin-#{$left}: rem(36px);
-        position: relative;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: rem(-16px);
-            bottom: rem(-16px);
-            #{$left}: rem(0);
-            width: rem(1px);
-            background: #999;
-        }
-    }
-
     %igx-stepper__body-content {
         display: block;
         position: absolute;
@@ -160,7 +167,7 @@
         z-index: -1;
     }
 
-    %igx-stepper__step-content,
+    %igx-stepper__step-content-wrapper,
     %igx-stepper__body-content {
         padding: 0 rem(24px) rem(24px) rem(24px);
     }
@@ -170,8 +177,23 @@
         position: relative;
     }
 
+    %igx-stepper__step-content-wrapper {
+        margin-#{$left}: rem(36px);
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: rem(-16px);
+            bottom: rem(-16px);
+            #{$left}: rem(0);
+            width: rem(1px);
+            background: #999;
+        }
+    }
+
     %igx-stepper__step-icon {
-        color: #09f;
+        color: --var($theme, 'incomplete-color');
         margin-#{$right}: rem(12px);
     }
 
@@ -185,16 +207,14 @@
 
     %igx-stepper__title-wrapper {
         width: 100%;
-        overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         min-width: rem(50px);
     }
 
     %igx-stepper__title {
-        color: #fff;
+        color: --var($theme, 'title-color');
         text-overflow: ellipsis;
-        overflow: hidden;
     }
 
     %igx-stepper__title--top {
@@ -211,31 +231,31 @@
         }
 
         %igx-stepper__step {
+            position: relative;
+            overflow: hidden;
             flex-direction: row;
             flex-grow: 1;
 
-            &::after {
+            &::after,
+            &::before {
                 content: '';
                 width: auto;
-                height: 1px;
                 flex: 1;
-                top: rem(-13px);
+                top: rem(36px);
                 position: relative;
-                align-self: center;
-                background: #999;
+                border-top: rem(1px) solid --var($theme, 'step-line');
             }
 
             &:last-of-type {
-                flex-basis: 0;
-
                 %igx-stepper__step-header::after,
                 &::after {
                     display: none;
                 }
             }
 
             &:first-of-type {
-                %igx-stepper__step-header::before {
+                %igx-stepper__step-header::before,
+                &::before {
                     display: none;
                 }
             }
@@ -244,20 +264,17 @@
         %igx-stepper__step-header {
             display: flex;
             flex-direction: column;
-            justify-content: center;
+            justify-content: flex-start;
             align-items: center;
-            position: relative;
             padding: rem(24px) rem(32px);
-            margin: 0 rem(8px);
             cursor: pointer;
 
             &::before,
             &::after {
                 top: rem(36px);
                 content: '';
                 position: absolute;
-                height: rem(1px);
-                background: #999;
+                border-top: rem(1px) solid --var($theme, 'step-line');
                 width: calc(50% - 16px);
             }
 
@@ -279,6 +296,10 @@
         %igx-stepper__step-icon {
             margin: 0;
         }
+
+        %igx-stepper__step-content-wrapper {
+            text-align: center;
+        }
     }
 }
 

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_stepper.scss
@@ -26,7 +26,19 @@ $_light-stepper: (
 
     incomplete-color: (
         igx-color: ('grays', 400)
-    )
+    ),
+
+    current-color: (
+        igx-color: ('primary', 500)
+    ),
+
+    step-line: (
+        igx-color: ('grays', 200)
+    ),
+
+    complete-step-line: (
+        igx-color: ('grays', 900)
+    ),
 );
 
 /// Generates a fluent stepper schema.

diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
@@ -33,6 +33,7 @@
 @import '../components/slider/slider-theme';
 @import '../components/snackbar/snackbar-theme';
 @import '../components/switch/switch-theme';
+@import '../components/stepper/stepper-theme';
 @import '../components/tabs/tabs-theme';
 @import '../components/time-picker/time-picker-theme';
 @import '../components/toast/toast-theme';