novo-elements 8.0.1 → 8.1.0-next.2

package/elements/stepper/step-header.component.scss

@@ -1,5 +1,6 @@
 @import "../../styles/variables";
 
+$novo-horizontal-stepper-header-height: 80px !default;
 $novo-stepper-label-header-height: 24px !default;
 $novo-stepper-label-min-width: 50px !default;
 $novo-stepper-side-gap: 24px !default;
@@ -8,71 +9,159 @@ $novo-stepper-line-gap: 8px !default;
 $novo-step-optional-font-size: 12px;
 $novo-step-header-icon-size: 1em !default;
 
-.novo-step-header {
+:host {
   overflow: visible;
   outline: none;
   cursor: pointer;
   position: relative;
-  //box-sizing: border-box;
-}
-
-.novo-step-optional {
-  font-size: $novo-step-optional-font-size;
-}
 
-.novo-step-icon,
-.novo-step-icon-not-touched {
-  border-radius: 50%;
-  height: $novo-stepper-label-header-height;
-  width: $novo-stepper-label-header-height;
-  align-items: center;
-  justify-content: center;
-  display: flex;
+  .novo-step-optional {
+    font-size: $novo-step-optional-font-size;
+  }
 
-  .novo-step-number {
-    font-size: $novo-step-header-icon-size;
-    min-width: 1.6em;
-    height: 1.6em;
-    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
-    display: flex;
+  .novo-step-icon,
+  .novo-step-icon-not-touched {
+    border-radius: 50%;
+    height: $novo-stepper-label-header-height;
+    width: $novo-stepper-label-header-height;
     align-items: center;
     justify-content: center;
-    border-radius: 4px;
+    display: flex;
+
+    .novo-step-number {
+      font-size: $novo-step-header-icon-size;
+      min-width: 1.6em;
+      height: 1.6em;
+      box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+    }
   }
-}
 
-.novo-step-icon {
-  .novo-step-number {
-    background: $positive;
-    color: $white;
+  .novo-step-icon {
+    .novo-step-number {
+      background: $positive;
+      color: $white;
+    }
   }
-}
-.novo-step-icon-not-touched {
-  .novo-step-number {
-    background: $submission;
-    color: $white;
+  .novo-step-icon-not-touched {
+    .novo-step-number {
+      background: $submission;
+      color: $white;
+    }
   }
-}
 
-// .novo-step-icon .novo-icon {
-//   font-size: $novo-step-header-icon-size;
-//   height: $novo-step-header-icon-size;
-//   width: $novo-step-header-icon-size;
-// }
+  .novo-step-label {
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: $novo-stepper-label-min-width;
+    vertical-align: middle;
+    text-align: center;
+    padding: 4px 0px;
+  }
 
-.novo-step-label {
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: $novo-stepper-label-min-width;
-  vertical-align: middle;
-  text-align: center;
-  padding: 4px 0px;
-}
+  .novo-step-text-label {
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 
-.novo-step-text-label {
-  text-align: center;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  &.novo-vertical-stepper-header {
+    display: flex;
+    align-items: center;
+    padding: $novo-stepper-side-gap;
+    max-height: $novo-stepper-label-header-height;
+
+    .novo-step-icon,
+    .novo-step-icon-not-touched {
+      margin-right: $novo-vertical-stepper-content-margin - $novo-stepper-side-gap;
+
+      [dir="rtl"] & {
+        margin-right: 0;
+        margin-left: $novo-vertical-stepper-content-margin - $novo-stepper-side-gap;
+      }
+    }
+    novo-step-status {
+      position: absolute;
+      left: 35px;
+      top: 25px;
+      transform: scale(0.8);
+    }
+  }
+
+  &.novo-horizontal-stepper-header {
+    display: flex;
+    height: $novo-horizontal-stepper-header-height;
+    flex-flow: column;
+    overflow: visible;
+    align-items: center;
+    justify-content: center;
+    padding: 0 $novo-stepper-side-gap;
+
+    ::ng-deep .novo-step-status {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      height: 1px;
+      bottom: 0px;
+
+      .novo-stepper-status-line {
+        width: 100%;
+        position: absolute;
+        &:before {
+          content: "";
+          display: block;
+          width: calc(50% - 8px);
+          margin-right: 8px;
+          border-bottom: 1px solid $light;
+        }
+        &:after {
+          content: "";
+          display: block;
+          width: calc(50% - 8px);
+          margin-left: calc(50% + 8px);
+          margin-top: -1px;
+          border-top: 1px solid $light;
+        }
+        &.edit {
+          &:before {
+            border-bottom: 1px solid $positive;
+          }
+        }
+        &.done {
+          &:before {
+            border-bottom: 1px solid $positive;
+          }
+          &:after {
+            border-top: 1px solid $positive;
+          }
+        }
+      }
+      .novo-stepper-status-icon {
+        position: relative;
+        &:before {
+          content: "";
+          display: block;
+          background: $white;
+          border-radius: 50%;
+          position: absolute;
+          z-index: 0;
+          top: 1px;
+          left: 1px;
+          bottom: 1px;
+          right: 1px;
+        }
+        & > * {
+          position: relative;
+          z-index: z(default);
+        }
+      }
+    }
+  }
 }

package/elements/stepper/stepper.component.scss

@@ -7,194 +7,94 @@ $novo-vertical-stepper-content-margin: 36px !default;
 $novo-stepper-line-width: 1px !default;
 $novo-stepper-line-gap: 8px !default;
 
-.novo-stepper-vertical,
-.novo-stepper-horizontal {
-  display: block;
-}
-
-.novo-horizontal-stepper-header-container {
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1em;
-  background: $background;
-}
-
-.novo-stepper-horizontal-line {
-  border-bottom: $novo-stepper-line-width solid $light;
-  flex: auto;
-  min-width: 0px;
-  height: $novo-horizontal-stepper-header-height;
-  &.complete {
-    border-bottom: $novo-stepper-line-width solid $positive;
+:host {
+  &.novo-stepper-vertical,
+  &.novo-stepper-horizontal {
+    display: block;
   }
-}
-
-.novo-horizontal-stepper-header {
-  display: flex;
-  height: $novo-horizontal-stepper-header-height;
-  flex-flow: column;
-  overflow: visible;
-  align-items: center;
-  justify-content: center;
-  padding: 0 $novo-stepper-side-gap;
 
-  .novo-step-status {
+  .novo-horizontal-stepper-header-container {
+    white-space: nowrap;
     display: flex;
-    width: 100%;
-    justify-content: center;
     align-items: center;
-    position: absolute;
-    height: 1px;
-    bottom: 0px;
-
-    .novo-stepper-status-line {
-      width: 100%;
-      position: absolute;
-      &:before {
-        content: "";
-        display: block;
-        width: calc(50% - 8px);
-        margin-right: 8px;
-        border-bottom: 1px solid $light;
-      }
-      &:after {
-        content: "";
-        display: block;
-        width: calc(50% - 8px);
-        margin-left: calc(50% + 8px);
-        margin-top: -1px;
-        border-top: 1px solid $light;
-      }
-      &.edit {
-        &:before {
-          border-bottom: 1px solid $positive;
-        }
-      }
-      &.done {
-        &:before {
-          border-bottom: 1px solid $positive;
-        }
-        &:after {
-          border-top: 1px solid $positive;
-        }
+    justify-content: center;
+    margin-bottom: 1em;
+    background: $background;
+    .novo-stepper-horizontal-line {
+      border-bottom: $novo-stepper-line-width solid $light;
+      flex: auto;
+      min-width: 0px;
+      height: $novo-horizontal-stepper-header-height;
+      &.complete {
+        border-bottom: $novo-stepper-line-width solid $positive;
       }
     }
-    .novo-stepper-status-icon {
-      position: relative;
-      &:before {
-        content: "";
-        display: block;
-        background: $white;
-        border-radius: 50%;
-        position: absolute;
-        z-index: 0;
-        top: 1px;
-        left: 1px;
-        bottom: 1px;
-        right: 1px;
-      }
-      & > * {
-        position: relative;
-        z-index: z(default);
+  }
+  .novo-horizontal-content-container {
+    overflow: hidden;
+    padding: 0 $novo-stepper-side-gap $novo-stepper-side-gap $novo-stepper-side-gap;
+    .novo-horizontal-stepper-content {
+      overflow: hidden;
+
+      &[aria-expanded="false"] {
+        height: 0;
       }
     }
   }
-}
-
-.novo-vertical-stepper-header {
-  display: flex;
-  align-items: center;
-  padding: $novo-stepper-side-gap;
-  max-height: $novo-stepper-label-header-height;
 
-  .novo-step-icon,
-  .novo-step-icon-not-touched {
-    margin-right: $novo-vertical-stepper-content-margin - $novo-stepper-side-gap;
+  .novo-vertical-content-container {
+    margin-left: $novo-vertical-stepper-content-margin;
+    border: 0;
+    position: relative;
 
     [dir="rtl"] & {
-      margin-right: 0;
-      margin-left: $novo-vertical-stepper-content-margin - $novo-stepper-side-gap;
+      margin-left: 0;
+      margin-right: $novo-vertical-stepper-content-margin;
     }
-  }
-}
-
-.novo-horizontal-stepper-content {
-  overflow: hidden;
-
-  &[aria-expanded="false"] {
-    height: 0;
-  }
-}
-
-.novo-horizontal-content-container {
-  overflow: hidden;
-  padding: 0 $novo-stepper-side-gap $novo-stepper-side-gap $novo-stepper-side-gap;
-}
-
-.novo-vertical-content-container {
-  margin-left: $novo-vertical-stepper-content-margin;
-  border: 0;
-  position: relative;
-
-  [dir="rtl"] & {
-    margin-left: 0;
-    margin-right: $novo-vertical-stepper-content-margin;
-  }
-}
-
-.novo-stepper-vertical-line {
-  &:before {
-    content: "";
-    position: absolute;
-    top: $novo-stepper-line-gap - $novo-stepper-side-gap;
-    bottom: $novo-stepper-line-gap - $novo-stepper-side-gap;
-    left: 0;
-    z-index: z(below);
-    border-left-width: $novo-stepper-line-width;
-    border-left-style: solid;
-    border-left-color: $light;
-
-    [dir="rtl"] & {
-      left: auto;
-      right: 0;
+    .novo-vertical-stepper-content {
+      overflow: hidden;
     }
   }
-  &.edit {
+
+  .novo-stepper-vertical-line {
     &:before {
-      border-left-color: 1px solid $positive;
+      content: "";
+      position: absolute;
+      top: $novo-stepper-line-gap - $novo-stepper-side-gap;
+      bottom: $novo-stepper-line-gap - $novo-stepper-side-gap;
+      left: 0;
+      z-index: z(below);
+      border-left-width: $novo-stepper-line-width;
+      border-left-style: solid;
+      border-left-color: $light;
+
+      [dir="rtl"] & {
+        left: auto;
+        right: 0;
+      }
     }
-  }
-  &.done {
-    &:before {
-      border-left-color: 1px solid $positive;
+    &.edit {
+      &:before {
+        border-left-color: 1px solid $positive;
+      }
     }
-    &:after {
-      border-left-color: 1px solid $positive;
+    &.done {
+      &:before {
+        border-left-color: 1px solid $positive;
+      }
+      &:after {
+        border-left-color: 1px solid $positive;
+      }
     }
   }
-}
 
-.novo-stepper-vertical {
-  novo-step-status {
-    position: absolute;
-    left: 35px;
-    top: 25px;
-    transform: scale(0.8);
+  .novo-vertical-content {
+    padding: 0 $novo-stepper-side-gap $novo-stepper-side-gap $novo-stepper-side-gap;
   }
-}
 
-.novo-vertical-stepper-content {
-  overflow: hidden;
-}
-
-.novo-vertical-content {
-  padding: 0 $novo-stepper-side-gap $novo-stepper-side-gap $novo-stepper-side-gap;
-}
-
-.novo-step:last-child {
-  .novo-vertical-content-container {
-    border: none;
+  .novo-step:last-child {
+    .novo-vertical-content-container {
+      border: none;
+    }
   }
 }

package/elements/switch/Switch.scss

@@ -1,3 +1,5 @@
+@import "../common/typography/text.mixins.scss";
+
 $switch-width: 36px !default;
 $switch-height: 24px !default;
 $switch-bar-height: 14px !default;
@@ -14,7 +16,7 @@ $switch-thumb-size: 20px !default;
   }
 }
 
-.novo-switch {
+:host {
   display: flex;
   align-items: center;
   // margin: 15px;
@@ -50,13 +52,13 @@ $switch-thumb-size: 20px !default;
   .novo-switch-bar {
     left: 1px;
     width: $switch-width - 2px;
-    top: $switch-height / 2 - $switch-bar-height / 2;
+    top: calc($switch-height / 2) - calc($switch-bar-height / 2);
     height: $switch-bar-height;
     border-radius: 8px;
     position: absolute;
   }
   .novo-switch-thumb-container {
-    top: $switch-height / 2 - $switch-thumb-size / 2;
+    top: calc($switch-height / 2) - calc($switch-thumb-size / 2);
     left: 0;
     width: $switch-width - $switch-thumb-size;
     position: absolute;
@@ -105,9 +107,7 @@ $switch-thumb-size: 20px !default;
       pointer-events: none;
     }
   }
-}
 
-.novo-switch {
   // Base color: $ocean
   // @include novo-switch-style($ocean, lighten($ocean, 18%));
   // Loop through analytics colors and make a switch color class for each