@momentum-ui/web-components 2.16.6 → 2.16.8

package/src/wc_scss/tools/mixins/input.scss

@@ -0,0 +1,155 @@
+// Remove after fixing checkbox/radio button
+@mixin input__help-text($color: $input__font-color--help) {
+  @include vr-spacing(mb, 0.25);
+  color: $input__font-color--help;
+  font-family: $brand-font-regular;
+  font-size: rem-calc(14);
+  line-height: rem-calc(22);
+  padding-left: rem-calc(16);
+
+  span {
+    font-size: inherit;
+  }
+}
+
+@mixin input-color(
+  $color: null,
+  $color-clear: null,
+  $color-clear-hover: null,
+  $color-disabled: null,
+  $color-help: null,
+  $color-message: null,
+  $color-placeholder: null,
+  $color-read-only: null,
+  $background-color: null,
+  $background-color-disabled: null,
+  $background-color-hover: null,
+  $background-color-active: null,
+  $border-color: null,
+  $border-color-active: null,
+  $border-color-disabled: null,
+  $border-color-read-only: null,
+  $focus-border-color: null,
+  $focus-background-color: null
+) {
+  .md-input {
+    background-color: $background-color;
+    color: $color;
+
+    @if $border-color {
+      border-color: $border-color;
+    } @else {
+      border: none;
+    }
+
+    &::placeholder {
+      color: $color-placeholder;
+      opacity: 1;
+    }
+
+    &:hover,
+    &.md-hover {
+      background-color: $background-color-hover;
+
+      &:active {
+        background-color: $background-color-active;
+        border-color: $border-color-active;
+        outline: none;
+      }
+    }
+
+    &:focus {
+      @if $focus-background-color != null {
+        background-color: $focus-background-color;
+      }
+      @if $focus-border-color != null {
+        border-color: $focus-border-color;
+      }
+    }
+
+    &:disabled,
+    &.md-disabled {
+      background-color: $background-color-disabled;
+      @if $border-color-disabled != null {
+        border-color: $border-color-disabled;
+      } @else {
+        border-color: $input__border-color--read-only;
+      }      
+      color: $color-disabled !important;
+
+      &::placeholder {
+        color: $color-disabled;
+      }
+
+      &:hover {
+        background-color: $background-color-disabled;
+      }
+    }
+
+    &[readonly],
+    &.md-readonly {
+      background-color: $background-color-disabled;
+      @if $border-color-read-only != null {
+        border-color: $border-color-disabled;
+      } @else {
+        border-color: $input__border-color--read-only;
+      }
+      color: $color-read-only;
+
+      &:hover {
+        background-color: $background-color-disabled;
+      }
+    }
+
+    &__after,
+    &__before {
+      @include input-icon($color: $color);
+    }
+
+    &__icon-clear {
+      display: flex;
+      @include input-clear-color($color-clear, $color-clear-hover);
+    }
+  }
+
+  &.md-disabled {
+    .md-input {
+      &__before {
+        @include input-icon($color: $color-disabled);
+      }
+    }
+  }
+
+  .md-input__messages {
+    display: block;
+  }
+
+  .md-input__help-text,
+  .md-input__secondary-label {
+    color: $color-help;
+  }
+}
+
+@mixin input-icon($color: null) {
+  @if $color {
+    color: $color;
+    fill: $color;
+
+    .md-spinner {
+      @include spinner-style($border-progress-left: $color);
+    }
+  }
+}
+
+@mixin input-clear-color($color: $input__clear-icon__color, $color-hover: $input__clear-icon__color--hover) {
+  background-color: transparent;
+  color: $color;
+  fill: $color;
+
+  &:hover,
+  &:focus {
+    background-color: transparent;
+    color: $color-hover;
+    fill: $color-hover;
+  }
+}

package/src/wc_scss/tools/mixins/nav-divider.scss

@@ -0,0 +1,10 @@
+// Horizontal dividers
+//
+// Dividers (basically an hr) within dropdowns and nav lists
+
+@mixin nav-divider($color: #e5e5e5) {
+  background-color: $color;
+  height: 1px;
+  margin: ((20px * 0.5) - 1) 0;
+  overflow: hidden;
+}

package/src/wc_scss/tools/mixins/scrollbar.scss

@@ -0,0 +1,40 @@
+// @mixins
+//
+// handle scrollbar styles
+@mixin scrollbar() {
+  scrollbar-color: var(--md-scrollbar-background-indicator) var(--md-scrollbar-background-track);
+
+  *::-webkit-scrollbar {
+    width: 1rem;
+  }
+  *::-webkit-scrollbar-track {
+    border-radius: 100vh;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--md-scrollbar-background-indicator);
+    border: 0.25rem solid transparent;
+    border-radius: 0.5rem;
+    background-clip: content-box;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--md-scrollbar-background-hover-indicator);
+    border: 0.25rem solid transparent;
+    border-radius: 0.5rem;
+    background-clip: content-box;
+  }
+  *::-webkit-scrollbar-thumb:active {
+    background: var(--md-scrollbar-background-active-indicator);
+    border: 0.25rem solid transparent;
+    border-radius: 0.5rem;
+    height: 6.25rem;
+    background-clip: content-box;
+  }
+
+  *::-webkit-scrollbar-thumb:disabled {
+    background: var(--md-scrollbar-background-disabled-indicator);
+    border: 0.25rem solid transparent;
+    border-radius: 0.5rem;
+    height: 6.25rem;
+    background-clip: content-box;
+  }
+}

package/src/wc_scss/tools/mixins/spacing.scss

@@ -0,0 +1,211 @@
+// * Spacing utilities
+@use "sass:math";
+@use "sass:list";
+@use "sass:map";
+@import "../../settings/rem.scss";
+@import "../../colors/settings.scss";
+@import "../../settings/core.scss";
+@import "../../settings/media";
+
+$spacing-location-name: null;
+$spacing-size-name: null;
+
+$spacing-sizes: (
+  none: 0,
+  xs: 0.25rem,
+  s: 0.5rem,
+  m: 1rem,
+  l: 1.5rem,
+  xl: 2rem,
+  xxl: 2.5rem,
+  xxxl: 3rem,
+);
+
+$spacing-margins: (
+  margin: "margin",
+  top: "margin-top",
+  right: "margin-right",
+  bottom: "margin-bottom",
+  left: "margin-left",
+  horizontal: (
+    "margin-right",
+    "margin-left",
+  ),
+  vertical: (
+    "margin-top",
+    "margin-bottom",
+  ),
+);
+
+$spacing-paddings: (
+  padding: "padding",
+  top: "padding-top",
+  right: "padding-right",
+  bottom: "padding-bottom",
+  left: "padding-left",
+  horizontal: (
+    "padding-right",
+    "padding-left",
+  ),
+  vertical: (
+    "padding-top",
+    "padding-bottom",
+  ),
+);
+
+@mixin generateSpacingClasses($type: "margin", $locations: $spacing-margins, $sizes: $spacing-sizes) {
+  @each $location in map.keys($locations) {
+    $value: map.get($locations, $location);
+    $spacing-location: map.get($locations, $location);
+    @if $location != $type {
+      $spacing-location-name: "__#{$location}" !global;
+    } @else {
+      $spacing-location-name: null !global;
+    }
+
+    @each $size in map.keys($sizes) {
+      $spacing-size-value: map.get($sizes, $size);
+      @if $size != "m" {
+        $spacing-size-name: "--#{$size}" !global;
+      } @else {
+        $spacing-size-name: null !global;
+      }
+
+      .#{$prefix}-#{$type}#{$spacing-location-name}#{$spacing-size-name} {
+        #{list.nth($value, 1)}: $spacing-size-value !important;
+
+        @if list.length($value) != 1 {
+          #{list.nth($value, 2)}: $spacing-size-value !important;
+        }
+      }
+
+      $spacing-size-name: null !global;
+    }
+    $spacing-location-name: null !global;
+  }
+}
+
+@mixin generateSpacingPlaceholders($type: "margin", $locations: $spacing-margins, $sizes: $spacing-sizes) {
+  @each $location in map.keys($locations) {
+    $value: map.get($locations, $location);
+    $spacing-location: map.get($locations, $location);
+    @if $location != $type {
+      $spacing-location-name: "__#{$location}" !global;
+    } @else {
+      $spacing-location-name: null !global;
+    }
+
+    @each $size in map.keys($sizes) {
+      $spacing-size-value: map.get($sizes, $size);
+      @if $size != "m" {
+        $spacing-size-name: "--#{$size}" !global;
+      } @else {
+        $spacing-size-name: null !global;
+      }
+
+      %#{$prefix}-#{type}#{$spacing-location-name}#{$spacing-size-name} {
+        #{list.nth($value, 1)}: $spacing-size-value !important;
+
+        @if list.length($value) != 1 {
+          #{list.nth($value, 2)}: $spacing-size-value !important;
+        }
+      }
+
+      $spacing-size-name: null !global;
+    }
+    $spacing-location-name: null !global;
+  }
+}
+
+$vr-spacing-breakpoints: (
+  "small-up": $small-up,
+  "small-only": $small-only,
+  "medium-up": $medium-up,
+  "medium-only": $medium-only,
+  "large-up": $large-up,
+  "large-only": $large-only,
+  "xlarge-up": $xlarge-up,
+  "xlarge-only": $xlarge-only,
+  "xxlarge-up": $xxlarge-up,
+  "xxlarge-only": $xxlarge-only,
+) !default;
+
+$vr-spacings: (
+  m: "margin",
+  mt: "margin-top",
+  mr: "margin-right",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  mh: (
+    "margin-right",
+    "margin-left",
+  ),
+  mv: (
+    "margin-top",
+    "margin-bottom",
+  ),
+  p: "padding",
+  pt: "padding-top",
+  pr: "padding-right",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  ph: (
+    "padding-right",
+    "padding-left",
+  ),
+  pv: (
+    "padding-top",
+    "padding-bottom",
+  ),
+) !default;
+
+// set margin to the nearest rem value to a baseline unit
+@mixin vr-spacing(
+  $spacing: null,
+  $val: 1,
+  $border: rem-calc(0),
+  $negative: false,
+  $media: "small-up",
+  $base-unit: $base-unit
+) {
+  // error checking
+  @if map_has_key($vr-spacings, $spacing) == false {
+    @warn "invalid spacing type: try m, mt, mr, mb, ml, mh, mv, p, pt, pr, pb, pl, ph, pv";
+  } @else if $border != 0 and unit($border) != "px" {
+    @warn "a pixel value is required for $border: try 1px, 2px";
+  } @else if math.unit($val) != "" {
+    @warn "a unitless value is required for $val: try 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2";
+  } @else if map_has_key($vr-spacing-breakpoints, $media) == false {
+    @warn "a valid breakpoint value is required for $media: try small-up, medium-up, large-up etc.";
+  } @else {
+    // get spacing attribute type
+    $sp: map.get($vr-spacings, $spacing);
+
+    // get negative
+    $n: if($negative, "-", "");
+
+    // get rounded value minus border width
+    $v: rem((round-to(px($val * 1rem), $base-unit) - $border) / 1px);
+
+    @if $media != "small-up" {
+      // use media query as needed
+      @media #{map.get($vr-spacing-breakpoints, $media)} {
+        // first attribute
+        #{list.nth($sp, 1)}: #{$n}#{$v};
+
+        @if list.length($sp) != 1 {
+          // second attribute as needed
+          #{list.nth($sp, 2)}: #{$n}#{$v};
+        }
+      }
+    } @else {
+      // first attribute
+      #{list.nth($sp, 1)}: #{$n}#{$v};
+
+      @if list.length($sp) != 1 {
+        // second attribute as needed
+        #{list.nth($sp, 2)}: #{$n}#{$v};
+      }
+    }
+  }
+}

package/src/wc_scss/tools/mixins/spinner.scss

@@ -0,0 +1,38 @@
+@mixin spinner-size($width: 1em, $height: 1em) {
+  height: $height;
+  width: $width;
+
+  &::after {
+    height: calc(#{$height});
+    width: calc(#{$width});
+  }
+}
+
+@mixin spinner-style($border: $md-gray-40, $border-progress-left: $md-theme-50, $border-progress: transparent) {
+  border: 1px solid $border;
+
+  &::after {
+    border-bottom: 1px solid $border-progress;
+    border-left: 1px solid $border-progress-left;
+    border-right: 1px solid $border-progress;
+    border-top: 1px solid $border-progress;
+  }
+}
+
+@mixin spinner-progress-color($border: $md-gray-40, $progress: $md-black-100) {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px $border;
+
+  .md-spinner-progress__circle .md-spinner-progress__mask .md-spinner-progress__fill {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px $progress;
+  }
+
+  .md-spinner-progress__inset-circle {
+    background-color: transparent;
+
+    .md-spinner-progress__percentage {
+      color: $progress;
+    }
+  }
+}

package/src/wc_scss/typography/mixins.scss

@@ -0,0 +1,208 @@
+@mixin brand-font-face-thin {
+  @include exports("brand-font-face-thin") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Thin";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTThin.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTThin.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-thin-oblique {
+  @include exports("brand-font-face-thin-oblique") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Thin Oblique";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTThinOblique.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTThinOblique.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-extra-light {
+  @include exports("brand-font-face-extra-light") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Extra Light";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTExtraLight.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTExtraLight.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-extra-light-oblique {
+  @include exports("brand-font-face-extra-light-oblique") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Extra Light Oblique";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTExtraLightOblique.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTExtraLightOblique.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-light {
+  @include exports("brand-font-face-light") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Light";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTLight.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTLight.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-light-oblique {
+  @include exports("brand-font-face-light-oblique") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Light Oblique";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTLightOblique.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTLightOblique.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-regular {
+  @include exports("brand-font-face-regular") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Regular";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTRegular.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTRegular.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-regular-oblique {
+  @include exports("brand-font-face-regular-oblique") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Regular Oblique";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTRegularOblique.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTRegularOblique.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-medium {
+  @include exports("brand-font-face-medium") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Medium";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTRegular.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTRegular.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-bold {
+  @include exports("brand-font-face-bold") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Bold";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTBold.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTBold.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-bold-oblique {
+  @include exports("brand-font-face-bold-oblique") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Bold Oblique";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTBoldOblique.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTBoldOblique.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-heavy {
+  @include exports("brand-font-face-heavy") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Heavy";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTHeavy.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTHeavy.woff") format("woff");
+    }
+  }
+}
+@mixin brand-font-face-heavy-oblique {
+  @include exports("brand-font-face-heavy-oblique") {
+    @font-face {
+      font-display: fallback;
+      font-family: "CiscoSansTT Heavy Oblique";
+      font-style: normal;
+      font-weight: normal;
+      src: url("#{$brand-font-folder}/CiscoSansTTHeavyOblique.woff2") format("woff2"),
+        url("#{$brand-font-folder}/CiscoSansTTHeavyOblique.woff") format("woff");
+    }
+  }
+}
+
+@mixin brand-font-faces {
+  @include brand-font-face-thin;
+  @include brand-font-face-thin-oblique;
+  @include brand-font-face-extra-light;
+  @include brand-font-face-extra-light-oblique;
+  @include brand-font-face-light;
+  @include brand-font-face-light-oblique;
+  @include brand-font-face-medium;
+  @include brand-font-face-regular;
+  @include brand-font-face-regular-oblique;
+  @include brand-font-face-bold;
+  @include brand-font-face-bold-oblique;
+  @include brand-font-face-heavy;
+  @include brand-font-face-heavy-oblique;
+}
+
+// TODO: remove legacy font-family mixin in next breaking release
+@mixin brand-font-family-ciscoFont {
+  @include brand-font-faces;
+}
+
+@mixin align-classes {
+  .text-left {
+    text-align: left !important;
+  }
+
+  .text-right {
+    text-align: right !important;
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+
+  .text-justify {
+    text-align: justify !important;
+  }
+}
+
+@mixin lead {
+  font-size: $paragraph-font-size + rem-calc(3.5);
+  line-height: 1.6;
+}
+
+@mixin subheader {
+  color: $subheader-font-color;
+  font-weight: $subheader-font-weight;
+  line-height: $subheader-line-height;
+  margin-bottom: $subheader-bottom-margin;
+  margin-top: $subheader-top-margin;
+}