@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/wc_scss/tools/functions/core.scss

@@ -1,183 +0,0 @@
-@use "sass:math";
-
-@import "../../settings/rem";
-
-@function char($iso-char) {
-  @return unquote('"\\e#{$iso-char}"');
-}
-
-$modules: () !default;
-
-@mixin exports($name) {
-  // Import from global scope
-  $modules: $modules;
-  // Check if a module is already on the list
-  $module_index: index($modules, $name);
-
-  @if (($module_index == null) or ($module_index == false)) {
-    $modules: append($modules, $name);
-
-    @content;
-  }
-}
-
-//===============================================
-// VARS
-//===============================================
-// rem base value (16px)
-//$rem-base: $rem-base;
-
-// base unit in rems
-//$base-rem: rem-calc($rem-base) / 2;
-
-// 6 = (6 x base unit)
-//$base-scale: 6;
-
-// this value has to be adjusted to the font used or 0 to use line-height
-//$base-line-height: $base-rem * $base-scale / 1rem;
-
-// calculate base unit from scale, and rem base (4)
-//$base-unit: $base-line-height / $base-scale * $rem-base;
-
-//===============================================
-// FUNCTIONS
-//===============================================
-
-// convert px to em
-@function em($px: 0, $font-size: $rem-base) {
-  @return math.div($px, $font-size) + em;
-}
-
-// convert unitless or px to rem
-@function rem($val) {
-  @if unit($val) == "px" or unitless($val) {
-    @return rem-calc($val);
-  } @else if unit($val) == "rem" {
-    @return $val;
-  } @else {
-    @warn "`#{$val}` is not a supported try a px or rem value";
-
-    @return false;
-  }
-}
-
-// convert rem to px
-@function px($val, $base: $rem-base) {
-  @if unitless($val) {
-    @return $val * 1px;
-  }
-
-  @if unit($val) == "px" {
-    @return $val;
-  } @else if unit($val) == "rem" {
-    @return math.div($val * $base, 1rem);
-  } @else {
-    @warn "`#{$val}` is not a supported try a px or rem value";
-
-    @return false;
-  }
-}
-
-// find the nearest ceiling rem value to a baseline unit
-@function vr-adjust($val: 1px, $remove: 0, $base-unit: rem($base-unit)) {
-  @return ceil(math.div(rem($val), $base-unit)) * $base-unit - rem($remove);
-}
-
-// round to the nearest specified number
-@function round-to($val, $unit: $base-unit) {
-  @return round($val / $unit) * $unit;
-}
-
-@function lower-bound($range) {
-  @if length($range) <= 0 {
-    @return 0;
-  }
-
-  @return nth($range, 1);
-}
-
-@function upper-bound($range) {
-  @if length($range) < 2 {
-    @return 999999999999;
-  }
-
-  @return nth($range, 2);
-}
-
-@function strip-unit($num) {
-  @return math.div($num, $num * 0 + 1);
-}
-
-@function text-inputs($types: all, $selector: input) {
-  $return: ();
-
-  $all-text-input-types: text password date datetime datetime-local month week
-    email number search tel time url color textarea;
-
-  @if $types == all {
-    $types: $all-text-input-types;
-  }
-
-  @each $type in $types {
-    @if $type == textarea {
-      @if $selector == input {
-        $return: append($return, unquote("#{$type}"), comma);
-      } @else {
-        $return: append($return, unquote("#{$type}#{$selector}"), comma);
-      }
-    } @else {
-      $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma);
-    }
-  }
-
-  @return $return;
-}
-
-@function convert-to-rem($value, $base-value: $rem-base) {
-  $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
-
-  @if ($value == 0) {
-    $value: 0;
-  } // Turn 0rem into 0
-
-  @return $value;
-}
-
-@function data($attr) {
-  @return "[data-" + $attr + "]";
-}
-
-@function rem-calc($values, $base-value: $rem-base) {
-  $max: length($values);
-
-  @if $max == 1 {
-    @return convert-to-rem(nth($values, 1), $base-value);
-  }
-
-  $remValues: ();
-
-  @for $i from 1 through $max {
-    $remValues: append($remValues,
-    convert-to-rem(nth($values, $i), $base-value));
-  }
-
-  @return $remValues;
-}
-
-@function em-calc($values) {
-  $remValues: rem-calc($values);
-
-  $max: length($remValues);
-
-  @if $max == 1 {
-    @return strip-unit(nth($remValues, 1)) * 1em;
-  }
-
-  $emValues: ();
-
-  @for $i from 1 through $max {
-    $emValues: append($emValues, strip-unit(nth($remValues, $i)) * 1em);
-  }
-
-  @return $emValues;
-}

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

@@ -1,32 +0,0 @@
-@mixin avatar-size($size: $avatar__size, $font-size: $avatar__font-size) {
-  font-size: ($size * $avatar__font-factor);
-  height: $size;
-  line-height: ($size * $avatar__line-height-factor);
-  width: $size;
-}
-  
-@mixin avatar-contents-base() {
-  @include flex();
-  
-  @include border-radius($global-rounded);
-  height: 100%;
-  
-  width: 100%;
-}
-  
-@mixin avatar-overlay-style(
-  $icon-color: $md-white-100, $overlay-background: $black-40) {
-  @include avatar-contents-base();
-  background: $overlay-background;
-  color: $md-white-100;
-  font-family: $icon-font-name;
-  left: 0;
-  
-  position: absolute;
-  top: 0;
-}
-  
-@mixin composite-avatar-size($size: $composite-avatar--medium__size) {
-  height: $size;
-  width: $size;
-}

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

@@ -1,71 +0,0 @@
-// _baseline.scss Vertical rhythm Utility by Jason Lusk
-
-@use "sass:math";
-
-@mixin vr-baseline(
-  $fontSize,
-  $from: $fontSize,
-  $baseline: true,
-  $border: 0,
-  $line-height: $base-line-height,
-  $from-line-height: $base-line-height
-) {
-  // convert to px as needed
-  $from: px($from);
-  $fontSize: px($fontSize);
-
-  // get nearest line-height to unit
-  $_lineHeight: round-to($fontSize * $line-height, $base-unit);
-
-  // get nearest line-height to unit offset
-  $_lineHeightOffset: round-to($from * $from-line-height, $base-unit) -
-    $_lineHeight;
-
-  @if $fontSize < $from {
-    // child baseline or vertical center
-    $baseline-ratio: if($baseline, 3, 2);
-    $baseline-offset: if($baseline, $_lineHeightOffset * 2, $_lineHeightOffset);
-
-    padding-top: rem(round-to(math.div($baseline-offset, $baseline-ratio), 0.5) - $border / 2);
-    padding-bottom: rem(round-to(math.div($_lineHeightOffset, $baseline-ratio), 0.5) - $border / 2);
-  } @else {
-    line-height: $line-height;
-  }
-}
-
-// debug window
-@mixin debug($v: 0) {
-  &::before {
-    background-color: rgba(#aaa, 0.25);
-    border: 1px solid #bbb;
-    border-radius: 0.25rem;
-    bottom: 0.5rem;
-    box-shadow: 0.1rem 0.1rem 0.1rem #333;
-    color: #090;
-    content: "base-font-size:  " + quote($rem-base) +
-      "\a base-unit:            "+ quote($base-unit) + "\agrid height:          "+
-      quote($v) + "\aline-height:          "+ quote($base-line-height);
-    padding: 0.5rem;
-    position: fixed;
-    right: 0.5rem;
-    text-align: center;
-    text-transform: capitalize;
-    white-space: pre;
-  }
-}
-
-// show-baseline() : Display the grid as a background image
-@mixin show-baseline(
-  $color: rgba(254, 0, 0, 0.5),
-  $color2: rgba(0, 192, 254, 0.6)
-) {
-  background-image: linear-gradient(to bottom,
-  $color 0%,
-  transparent 12%,
-  transparent 49%,
-  $color2 50%,
-  transparent 60%,
-  transparent 100%);
-  background-position: left top;
-  background-size: 100% rem($base-unit * 2);
-}

package/src/wc_scss/tools/mixins/border-radius.scss

@@ -1,26 +0,0 @@
-// Border Radius Complete
-
-@mixin border-radius($radius) {
-  @include border-top-radius($radius);
-  @include border-bottom-radius($radius);
-}
-
-@mixin border-top-radius($radius) {
-  border-top-left-radius: $radius;
-  border-top-right-radius: $radius;
-}
-
-@mixin border-right-radius($radius) {
-  border-bottom-right-radius: $radius;
-  border-top-right-radius: $radius;
-}
-
-@mixin border-bottom-radius($radius) {
-  border-bottom-left-radius: $radius;
-  border-bottom-right-radius: $radius;
-}
-
-@mixin border-left-radius($radius) {
-  border-bottom-left-radius: $radius;
-  border-top-left-radius: $radius;
-}

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

@@ -1,256 +0,0 @@
-@mixin button-base() {
-  border: none;
-  border-radius: $button__radius--36;
-  cursor: $cursor-pointer-value;
-  display: inline-block;
-  font-family: $brand-font-regular;
-  font-size: $button__font-size;
-  font-weight: normal;
-  line-height: rem-calc(24);
-  min-width: rem-calc(72);
-  position: relative;
-  text-align: $button__font-align;
-  text-decoration: none;
-
-  > * {
-    font-size: inherit;
-  }
-
-  .md-button__children {
-    @include flex;
-  }
-
-  + .md-button {
-    margin-left: rem-calc(5);
-  }
-
-  &:active,
-  &.active-state {
-    &:focus,
-    &.focus-state {
-      box-shadow: none;
-    }
-  }
-
-  &.disabled,
-  &.md-button--disabled,
-  &[disabled] {
-    box-shadow: none;
-    cursor: $button__cursor--disabled;
-    pointer-events: none;
-
-    &:hover,
-    &:focus {
-      box-shadow: none;
-    }
-  }
-}
-
-@mixin button-size(
-  $font-size: $button__font-size,
-  $full-width: false,
-  $height: false,
-  $line-height: $button__line-height,
-  $padding: false,
-  $radius: false
-) {
-  // Declarations before nested rules
-  & {
-    font-size: $font-size;
-    line-height: $line-height;
-
-    @if $padding {
-      padding: $padding;
-    }
-
-    @if $full-width {
-      width: 100%;
-    }
-
-    @if $height {
-      height: $height;
-
-      @if $height == auto or $height == initial or $height == inherit {
-        $height: 100%;
-      }
-
-      .#{$prefix}-prepend {
-        margin-right: calc(#{$height} / 4);
-      }
-      .#{$prefix}-append {
-        margin-left: calc(#{$height} / 4);
-      }
-    }
-  }
-
-  @if $radius {
-    @include radius($radius);
-  }
-}
-
-@mixin button-circle-size($font-size: false, $line-height: $font-size, $size: false) {
-  @if $size {
-    width: $size;
-    height: $size;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  @if $font-size {
-    font-size: $font-size;
-    line-height: $line-height;
-  }
-}
-
-@mixin button-color(
-  $bg: $button__background-color,
-  $bg-active: $button__background-color--active,
-  $bg-disabled: $button__color--disabled,
-  $bg-hover: $button__background-color--hover,
-  $border: false,
-  $border-hover: false,
-  $border-active: false,
-  $border-focus: $button__border-color--focus,
-  $box-shadow: false,
-  $color: $button__font-color,
-  $color-active: $color,
-  $color-disabled: $button__font-color--disabled,
-  $color-hover: $color,
-  $disabled: true,
-  $focus: false,
-  $opacity: false,
-  $outline: false
-) {
-  // Declarations before nested rules
-  & {
-    background-color: $bg;
-    border-color: transparent;
-    color: $color;
-  }
-
-  &:hover {
-    background-color: $bg-hover;
-    color: $color-hover;
-
-    @if $border-hover {
-      border: $border-hover;
-    }
-  }
-
-  &:active,
-  &.active {
-    background-color: $bg-active;
-    color: $color-active;
-
-    @if $border-active {
-      border: $border-active;
-    }
-  }
-
-  @if $border {
-    border: $border;
-  }
-
-  @if $box-shadow {
-    box-shadow: $box-shadow;
-  }
-
-  @if $disabled {
-    @include button-color-disabled($color: $color-disabled, $bg: $bg-disabled, $opacity: $opacity);
-  }
-
-  @if $focus {
-    @include button-color-focus($border-focus);
-  }
-
-  @if $outline {
-    outline: $outline;
-  }
-}
-
-@mixin button-color-fill(
-  $fill: $button__font-color,
-  $fill-hover: $fill,
-  $fill-active: $color,
-  $fill-disabled: $button__font-color--disabled,
-  $bg-disabled: transparent,
-  $focus: false
-) {
-  @include button-color-disabled($color: $fill-disabled, $bg: $bg-disabled);
-  color: $fill;
-  fill: $fill;
-
-  &:hover,
-  &.hover-state {
-    color: $fill-hover;
-    fill: $fill-hover;
-  }
-
-  &:active,
-  &.active-state {
-    color: $fill-active;
-    fill: $fill-active;
-  }
-
-  @if $focus {
-    @include button-color-focus;
-  }
-}
-
-@mixin button-color-focus($color: $button__border-color--focus) {
-  &:focus,
-  &.focus-state {
-    @include button-focus-styles;
-  }
-}
-
-@mixin button-color-disabled($color: $button__font-color--disabled, $bg: $button__color--disabled, $opacity: false) {
-  &.disabled,
-  &.md-button--disabled,
-  &[disabled] {
-    // Declarations before nested rules
-    @if $opacity {
-      opacity: $opacity;
-    } @else {
-      color: $color;
-      fill: $color;
-      background-color: $bg;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $bg;
-      color: $color;
-      fill: $color;
-    }
-  }
-}
-
-@mixin button(
-  $bg: $button__background-color,
-  $bg-disabled: $button__color--disabled,
-  $bg-hover: $button__background-color--hover,
-  $bg-active: $button__background-color--active,
-  $border-focus: $button__border-color--focus,
-  $color: $button__font-color,
-  $color-disabled: $button__font-color--disabled,
-  $radius: false,
-  $full-width: false,
-  $focus: false,
-  $disabled: true
-) {
-  @include button-base;
-  @include button-size($padding, $full-width, $radius);
-  @include button-color(
-    $color,
-    $color-disabled,
-    $bg,
-    $bg-active,
-    $bg-disabled,
-    $bg-hover,
-    $border-focus,
-    $disabled,
-    $focus
-  );
-  @include single-transition(background-color, $button__transition-speed, ease);
-}