@momentum-ui/web-components 2.14.13 → 2.14.14

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

@@ -1,208 +0,0 @@
-// * Spacing utilities
-@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} {
-        #{nth($value, 1)}: $spacing-size-value !important;
-
-        @if length($value) != 1 {
-          #{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} {
-        #{nth($value, 1)}: $spacing-size-value !important;
-
-        @if length($value) != 1 {
-          #{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 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
-        #{nth($sp, 1)}: #{$n}#{$v};
-
-        @if length($sp) != 1 {
-          // second attribute as needed
-          #{nth($sp, 2)}: #{$n}#{$v};
-        }
-      }
-    } @else {
-      // first attribute
-      #{nth($sp, 1)}: #{$n}#{$v};
-
-      @if length($sp) != 1 {
-        // second attribute as needed
-        #{nth($sp, 2)}: #{$n}#{$v};
-      }
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-@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

@@ -1,208 +0,0 @@
-@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;
-}