add some initial styles

IgniteUI · Sep 16, 2021 · 27034e8 · 27034e8
1 parent 481023a
commit 27034e8
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 52 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
@@ -14,7 +14,6 @@
     @include e(header) {
         display: flex;
         flex-direction: column;
-        gap: 20px;
         width: 100%;
     }
 
@@ -25,53 +24,124 @@
         position: relative
     }
 
-    @include e(body-contnet) {
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        overflow-x: hidden;
-        z-index: -1;
+    @include e(step) {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+    }
+
+    @include e(step-header) {
+        padding: rem(16px);
+        display: flex;
+        align-content: center;
+        margin: rem(8px) 0;
+
+        &:hover {
+            background: rgba(255, 255, 255, .5);
+        }
     }
 
-    @include e(body-contnet, $m: active) {
-        z-index: 1;
+    @include e(step-content) {
+        margin-left: rem(40px);
         position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: rem(-8px);
+            bottom: rem(-8px);
+            left: rem(-12px);
+            height: 100%;
+            width: rem(1px);
+            background: #999;
+        }
     }
-}
 
-// TODO THIS SHOULD GO ON THE HOST ELEMENT
-.igx-stepper__header--horizontal {
-    flex-direction: row;
-    justify-content: space-between;
-}
+    @include e(step, $m: active) {
+        background: white;
+        color: #000;
+    }
 
-// content
-.igx-stepper__header-step-content {
-    border: 2px solid #ccc;
-    border-radius: 15px;
-    padding: 16px;
-}
+    @include e(step, $m: disabled) {
+        background: gray;
+        opacity: .5;
 
-.igx-stepper__header-step-content:hover {
-    background-color: rgba($color: #ccc, $alpha: .5);
-}
+        &:hover {
+            background: gray;
+        }
+    }
 
-.igx-stepper__header-step-content--active {
-    pointer-events: none;
-    background-color: rgba($color: green, $alpha: .5);
-}
+    @include e(step, $m: skip) {
+        background: #916418;
+    }
 
-.igx-stepper__header-step-content--disabled {
-    pointer-events: none;
-    opacity: .5;
-}
+    @include m(horizontal) {
+        @include e(header) {
+            flex-direction: row;
+        }
+
+        @include e(step) {
+            flex-grow: 1;
+            flex-direction: row;
+
+            &::before,
+            &::after {
+                content: '';
+                width: auto;
+                height: 1px;
+                flex: 1;
+                align-self: center;
+                background: #999;
+            }
+
+            &:last-of-type,
+            &:first-of-type {
+                flex-basis: 0;
+            }
 
-.igx-stepper__header-step-content--skip {
-    opacity: .5;
+            &:first-of-type {
+                &::before {
+                    display: none;
+                }
+            }
+
+            &:last-of-type {
+                &::after {
+                    display: none;
+                }
+            }
+        }
+
+        @include e(step-header) {
+            justify-content: center;
+            margin: 0 rem(8px);
+        }
+
+        @include e(step-content) {
+            &::before {
+                display: none;
+            }
+        }
+
+        @include e(body-content) {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
+            overflow-x: hidden;
+            z-index: -1;
+        }
+
+        @include e(body-content, $m: active) {
+            z-index: 1;
+            position: relative;
+        }
+    }
 }
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
@@ -59,6 +59,7 @@
 
     %stepper-display {
         display: flex;
+        flex-direction: column;
         width: 100%;
         overflow: hidden;
     }

diff --git a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.html
@@ -1,7 +1,5 @@
 <ng-template #defaultLabel>
-    <div>
-        <ng-content select='[igxStepLabel]'></ng-content>
-    </div>
+    <ng-content select='[igxStepLabel]'></ng-content>
 </ng-template>
 
 <ng-template #contentTemplate>
@@ -10,8 +8,7 @@
     </div>
 </ng-template>
 
-
-<div class="igx-step__header" [ngClass]="stepHeaderClasses" (click)="onPointerDown($event)">
+<div class="igx-stepper__step-header" [ngClass]="stepHeaderClasses" (click)="onPointerDown($event)">
     <ng-content select='[igxStepIcon]'></ng-content>
     <ng-container *ngTemplateOutlet="defaultLabel"></ng-container>
 </div>

diff --git a/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts b/projects/igniteui-angular/src/lib/stepper/step/igx-step.component.ts
@@ -205,8 +205,8 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
     //  }
 
     /** @hidden @internal */
-    @HostBinding('class.igx-stepper__header-step')
-    public cssClass = 'igx-stepper__header-step';
+    @HostBinding('class.igx-stepper__step')
+    public cssClass = 'igx-stepper__step';
 
     //  // TODO: will be used in Drag and Drop implementation
     //  /** @hidden @internal */
@@ -304,22 +304,22 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements OnInit, A
         if (this.isHorizontal) {
             return { 'igx-stepper__body-content': true, 'igx-stepper__body-content--active': this.active };
         } else {
-            return 'igx-step__content';
+            return 'igx-stepper__step-content';
         }
     }
 
     public get stepHeaderClasses() {
         if (this.active) {
-            return 'igx-step__header--active';
+            return 'igx-stepper__step--active';
         }
         if (this.disabled) {
-            return 'igx-stepper__header-step-content--disabled';
+            return 'igx-stepper__step--disabled';
         }
         if (this.skip) {
-            return 'igx-stepper__header-step-content--skip';
+            return 'igx-stepper__step--skip';
         }
         if (this.optional) {
-            return 'igx-step__header--optional';
+            return 'igx-stepper__step--optional';
         }
     }