@momentum-ui/web-components 2.5.4 → 2.5.7

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

@@ -0,0 +1,69 @@
+// _baseline.scss Vertical rhythm Utility by Jason Lusk
+
+@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($baseline-offset / $baseline-ratio, 0.5) - $border / 2);
+    padding-bottom: rem(round-to($_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

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

@@ -0,0 +1,248 @@
+@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
+) {
+  font-size: $font-size;
+  line-height: $line-height;
+
+  @if $radius {
+    @include radius($radius);
+  }
+
+  @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 $padding {
+    padding: $padding;
+  }
+
+  @if $full-width {
+    width: 100%;
+  }
+}
+
+@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
+) {
+  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] {
+    &:hover,
+    &:focus {
+      background-color: $bg;
+      color: $color;
+      fill: $color;
+    }
+    @if $opacity {
+      opacity: $opacity;
+    } @else {
+      color: $color;
+      fill: $color;
+      background-color: $bg;
+    }
+  }
+}
+
+@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

@@ -0,0 +1,215 @@
+// @mixins
+//
+// We use this to control border radius.
+// $radius - Default: $global-radius || 4px
+@mixin radius($radius: $global-radius) {
+  @if $radius {
+    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/2);
+      }
+
+      @if $left {
+        left: $left;
+      } @else {
+        left: ($tabbar-menu-icon-width - $width)/2;
+      }
+    } @else {
+      margin-top: -($width/2);
+      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

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

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

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