@momentum-ui/web-components 2.16.8 → 2.16.9

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);
-}

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

@@ -1,204 +0,0 @@
-// @mixins
-//
-// We use this to control border radius.
-// $radius - Default: $global-radius || 4px
-@mixin radius($radius: $global-radius) {
-  @if $radius {
-    // Declarations before nested rules
-    & {
-      border-radius: $radius;
-    }
-  }
-}
-
-// @mixins
-//
-// We use this to create equal side border radius on elements.
-// $side - Options: left, right, top, bottom
-@mixin side-radius($side, $radius: $global-radius) {
-  @if ($side == left or $side == right) {
-    -webkit-border-bottom-#{$side}-radius: $radius;
-    -webkit-border-top-#{$side}-radius: $radius;
-    border-bottom-#{$side}-radius: $radius;
-    border-top-#{$side}-radius: $radius;
-  } @else {
-    -webkit-#{$side}-left-radius: $radius;
-    -webkit-#{$side}-right-radius: $radius;
-    border-#{$side}-left-radius: $radius;
-    border-#{$side}-right-radius: $radius;
-  }
-}
-
-// @mixins
-//
-// We can control whether or not we have inset shadows edges.
-// $active - Default: true, Options: false
-@mixin inset-shadow($active: true) {
-  box-shadow: $shiny-edge-size $shiny-edge-color inset;
-
-  @if $active {
-    &:active {
-      box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
-    }
-  }
-}
-
-// @mixins
-//
-// We use this to add transitions to elements
-// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
-// $speed - Default: 300ms
-// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
-@mixin single-transition($property: all, $speed: 300ms, $ease: ease-out) {
-  transition: $property $speed $ease;
-}
-
-// @mixins
-//
-// We use this to add box-sizing across browser prefixes
-@mixin box-sizing($type: border-box) {
-  -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
-  -moz-box-sizing: $type;
-  box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
-}
-
-// @mixins
-//
-// We use this to create isosceles triangles
-// $triangle-size - Used to set border-size. No default, set a px or em size.
-// $triangle-color - Used to set border-color which makes up triangle. No default
-// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
-@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
-  border: inset $triangle-size;
-  content: "";
-  display: block;
-  height: 0;
-  width: 0;
-
-  @if ($triangle-direction == top) {
-    border-color: $triangle-color transparent transparent transparent;
-    border-top-style: solid;
-  }
-
-  @if ($triangle-direction == bottom) {
-    border-color: transparent transparent $triangle-color transparent;
-    border-bottom-style: solid;
-  }
-
-  @if ($triangle-direction == left) {
-    border-color: transparent transparent transparent $triangle-color;
-    border-left-style: solid;
-  }
-
-  @if ($triangle-direction == right) {
-    border-color: transparent $triangle-color transparent transparent;
-    border-right-style: solid;
-  }
-}
-
-// @mixins
-//
-// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
-// $width - Width of hamburger icon in rem
-// $left - If false, icon will be centered horizontally || explicitly set value in rem
-// $top - If false, icon will be centered vertically || explicitly set value in rem
-// $thickness - thickness of lines in hamburger icon, set value in px
-// $gap - spacing between the lines in hamburger icon, set value in px
-// $color - icon color
-// $hover-color - icon color during hover
-// $offcanvas - Set to true of @include in offcanvas
-@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
-  span::after {
-    box-shadow: 0 0 0 $thickness $color, 0 $gap + $thickness 0 $thickness $color,
-      0 (2 * $gap + 2 * $thickness) 0 $thickness $color;
-    content: "";
-    display: block;
-    height: 0;
-    position: absolute;
-    width: $width;
-
-    @if $offcanvas {
-      @if $top {
-        top: $top;
-      } @else {
-        top: 50%;
-        margin-top: (-$width * 0.5);
-      }
-
-      @if $left {
-        left: $left;
-      } @else {
-        left: ($tabbar-menu-icon-width - $width) * 0.5;
-      }
-    } @else {
-      margin-top: -($width * 0.5);
-      top: 50%;
-      #{$opposite-direction}: $topbar-link-padding;
-    }
-  }
-
-  span:hover::after {
-    box-shadow: 0 0 0 $thickness $hover-color, 0 $gap + $thickness 0 $thickness $hover-color,
-      0 (2 * $gap + 2 * $thickness) 0 $thickness $hover-color;
-  }
-}
-
-// We use this to do clear floats
-@mixin clearfix {
-  &::before,
-  &::after {
-    content: " ";
-    display: table;
-  }
-
-  &::after {
-    clear: both;
-  }
-}
-
-// @mixins
-//
-// We use this to add a glowing effect to block elements
-// $selector - Used for selector state. Default: focus, Options: hover, active, visited
-// $fade-time - Default: 300ms
-// $glowing-effect-color - Default: fade-out($md-theme-50, .25)
-@mixin block-glowing-effect($selector: focus, $fade-time: 300ms, $glowing-effect-color: fade-out($md-theme-50, 0.25)) {
-  transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
-
-  &:#{$selector} {
-    border-color: $glowing-effect-color;
-    box-shadow: 0 0 5px $glowing-effect-color;
-  }
-}
-
-// @mixins
-//
-// We use this to translate elements in 2D
-// $horizontal: Default: 0
-// $vertical: Default: 0
-@mixin translate2d($horizontal: 0, $vertical: 0) {
-  transform: translate($horizontal, $vertical);
-}
-
-// @mixins
-//
-// Makes an element visually hidden, but accessible.
-// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-@mixin element-invisible {
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute !important;
-  width: 1px;
-}
-
-// @mixins
-//
-// Turns off the element-invisible effect.
-@mixin element-invisible-off {
-  clip: auto;
-  height: auto;
-  overflow: visible;
-  position: static !important;
-  width: auto;
-}

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

@@ -1,63 +0,0 @@
-// Ceasar Transitions Sass Mixins
-// http://www.pauljeter.net
-// Version: 1.0.0
-// Licensed under the MIT license - http://opensource.org/licenses/MIT
-// Copyright (c) 2014 Paul Jeter
-
-// Linear
-$linear: cubic-bezier(0.25, 0.25, 0.75, 0.75);
-
-// Ease (defaults)
-$ease: cubic-bezier(0.25, 0.1, 0.25, 1);
-$easeIn: cubic-bezier(0.42, 0, 1, 1);
-$easeOut: cubic-bezier(0, 0, 0.58, 1);
-$easeInOut: cubic-bezier(0.42, 0, 0.58, 1);
-
-// Penner Equations
-// Quad
-$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-
-// Cubic
-$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-
-// Quart
-$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
-$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
-
-// Quint
-$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
-$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
-
-// Sine
-$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
-$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
-$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-
-// Expo
-$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
-$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
-
-// Circ
-$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
-$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-
-// Back
-$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-
-@mixin easing-transition($property: all, $duration: 500ms, $easeType: $ease) {
-  transition: $property $duration $easeType;
-}
-
-@mixin transition-timing-function($easeType: $ease) {
-  transition-timing-function: $easeType;
-}

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

@@ -1,14 +0,0 @@
-@mixin flex(
-  $display: flex,
-  $fd: row,
-  $fw: nowrap,
-  $jc: center,
-  $ac: center,
-  $ai: center
-) {
-  align-content: $ac;
-  align-items: $ai;
-  display: $display;
-  flex-flow: $fd $fw;
-  justify-content: $jc;
-}

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

@@ -1,35 +0,0 @@
-@import "@/wc_scss/settings/focus";
-
-@mixin button-focus-styles() {
-  box-shadow: none;
-  outline: none;
-}
-
-@mixin focus-styles($border-color: transparent) {
-  @if $border-color {
-    border-color: $border-color;
-  } @else {
-    box-shadow: 0 0 4px 2px rgba($focus-color, 0.75);
-  }
-
-  outline: none;
-}
-
-@mixin tab-focus($dark: false) {
-  outline: none;
-
-  @if $dark==false {
-    box-shadow: 0 0 0 $focus__size $focus__color;
-  } @else {
-    box-shadow: 0 0 0 $focus__size $focus__color--dark;
-  }
-}
-
-@mixin remove-focus() {
-  box-shadow: none;
-  outline: 0;
-}
-
-@mixin focus-boxshadow($borderWidth, $borderColor) {
-  box-shadow: 0 0 0 $borderWidth $borderColor;
-}