@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/components/core/textfield/theming.scss

@@ -1,262 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$textfieldColors: (
-  text-color:                         ((#000,            0.87), (#fff,              1.00)),
-  secondary-text-color:               ((#000,            0.54), (#fff,              0.70)),
-  placeholder-color__focus:           ((#000,            0.42), (#fff,              0.50)),
-  disabled-color:                     ((#000,            0.38), (#fff,              0.50)),
-  textarea-disabled-border-color:     ((#000,            0.10), (#fff,              0.30)),
-  textarea-disabled-background-color: ((#000,            0.06), (#fff,              0.10)),
-  box-fill-color:                     ((#000,            0.06), (#fff,              0.10)),
-  box-fill-color__hover:              ((#000,            0.12), (#fff,              0.20)),
-  border-line-color:                  ((#000,            0.42), (#fff,              0.70)),
-  border-line-color__hover:           ((#000,            0.87), (#fff,              1.00)),
-  ripple-color:                       ( #000                  ,  #fff       ),
-  ripple-opacity:                     (                    0.12 ,                       0.30,  0.20),
-  dropdown-button-color:              ((#000,            0.54), (#fff,              0.70)),
-  dropdown-background-color:          ((#fff,            1.00), ('background', '800', 1.00)),
-  selection-color:                    (('primary', 'A200', 0.50), ('primary',   'A700', 0.50)),
-  selection-accent-color:             (('accent',  'A200', 0.50), ('accent',    'A700', 0.50)),
-  selection-warn-color:               (('warn',    'A200', 0.50), ('warn',      'A700', 0.50)),
-  border-line-color__focus:           (('primary', 'A700', 1.00), ('primary',   'A200', 1.00)),
-  border-line-accent-color__focus:    (('accent',  'A700', 1.00), ('accent',    'A200', 1.00)),
-  border-line-warn-color__focus:      (('warn',    'A400', 1.00), ('warn',      'A400', 1.00)),
-  label-color__focus:                 (('primary', 'A700', 0.87), ('primary',   'A200', 1.00)),
-  label-accent-color__focus:          (('accent',  'A700', 0.87), ('accent',    'A200', 1.00)),
-  label-warn-color__focus:            (('warn',    'A400', 0.87), ('warn',      'A400', 1.00)),
-  
-);
-
-@function textfieldThemeValue($key, $type, $theme) {
-  @return themeValue('textfield', $textfieldColors, $key, $type, $theme);
-}
-
-@mixin textfieldThemeVariables($color, $lightness) {
-  @include themeVariables('textfield', $textfieldColors, $color, $lightness);
-}
-
-@mixin textfieldContrastAndThemeRules($type: 'var', $theme: null) {
-  .mdw-textfield {
-    // Focus
-    &:active > .mdw-textfield__input:not(:disabled),
-    > .mdw-textfield__input:not(:disabled):focus {
-      caret-color: textfieldThemeValue("label-color__focus", $type, $theme);
-      &::selection {
-        background-color: textfieldThemeValue("selection-color", $type, $theme);
-        color: inherit;
-      }
-      & ~ .mdw-textfield__label {
-        color: textfieldThemeValue("label-color__focus", $type, $theme);
-      }
-      & ~ .mdw-textfield__border-line::before {
-        border-color: textfieldThemeValue("border-line-color__focus", $type, $theme);
-      }
-
-      &:invalid {
-        caret-color: textfieldThemeValue("label-warn-color__focus", $type, $theme);
-        &::selection {
-          background-color: textfieldThemeValue("selection-warn-color", $type, $theme);
-          color: inherit;
-        }
-        & ~ .mdw-textfield__border-line::after {
-          border-color: textfieldThemeValue("border-line-warn-color__focus", $type, $theme);
-        }
-        & ~ .mdw-textfield__label {
-          color: textfieldThemeValue("label-warn-color__focus", $type, $theme);
-        }
-      }
-    }
-    &[mdw-theme-color|="accent"] {
-      &:active > .mdw-textfield__input:not(:disabled),
-      > .mdw-textfield__input:not(:disabled):focus {
-        &:not(:invalid) {
-          caret-color: textfieldThemeValue("label-accent-color__focus", $type, $theme);
-          &::selection {
-            background-color: textfieldThemeValue("selection-accent-color", $type, $theme);
-            color: inherit;
-          }
-          & ~ .mdw-textfield__label {
-            color: textfieldThemeValue("label-accent-color__focus", $type, $theme);
-          }
-          & ~ .mdw-textfield__border-line::before {
-            border-color: textfieldThemeValue("border-line-accent-color__focus", $type, $theme);
-          }
-        }
-      }
-    }
-  }
-  .mdw-textfield__input:focus:invalid ~ .mdw-textfield__error-text {
-    color: textfieldThemeValue("label-warn-color__focus", $type, $theme);
-  }
-  .mdw-textfield[mdw-box],
-  .mdw-textfield[mdw-textarea] {
-    &:active > .mdw-textfield__input:not(:disabled),
-    > .mdw-textfield__input:not(:disabled):focus {
-      & ~ .mdw-textfield__border-line {
-        border-color: textfieldThemeValue("border-line-color__focus", $type, $theme);
-      }
-      &:invalid ~ .mdw-textfield__border-line {
-        border-color: textfieldThemeValue("border-line-warn-color__focus", $type, $theme);
-      }
-    }
-    &[mdw-theme-color|="accent"] {
-      &:active > .mdw-textfield__input:not(:disabled),
-      > .mdw-textfield__input:not(:disabled):focus {
-        &:not(:invalid) ~ .mdw-textfield__border-line {
-          border-color: textfieldThemeValue("border-line-accent-color__focus", $type, $theme);
-        }
-      }
-    }
-  }
-}
-
-// Vary by contrast
-@mixin textfieldContrastRules($type: 'var', $theme: null) {
-  .mdw-textfield__icon,
-  .mdw-textfield__label {
-    color: textfieldThemeValue("secondary-text-color", $type, $theme);
-  }
-  .mdw-textfield__prefix,
-  .mdw-textfield__suffix {
-    color: textfieldThemeValue("secondary-text-color", $type, $theme);
-  }
-  select.mdw-textfield__input{
-    // Firefox focusring styling workaround
-    // https://dxr.mozilla.org/mozilla-central/source/browser/components/extensions/extension.css
-    &:-moz-focusring {
-      color: transparent;
-      text-shadow: 0 0 0 textfieldThemeValue("text-color", $type, $theme);
-    }
-    .mdw-textfield[mdw-value-empty] > & {
-      color: textfieldThemeValue("placeholder-color__focus", $type, $theme);
-      &:-moz-focusring {
-        color: transparent;
-        text-shadow: 0 0 0 textfieldThemeValue("placeholder-color__focus", $type, $theme);
-      }
-      &:focus {
-        color: textfieldThemeValue("secondary-text-color", $type, $theme);
-        &:-moz-focusring {
-          color: transparent;
-          text-shadow: 0 0 0 textfieldThemeValue("secondary-text-color", $type, $theme);
-        }
-      }
-    }
-  }
-  .mdw-textfield__dropdown-button {
-    color: textfieldThemeValue("dropdown-button-color", $type, $theme);
-  }
-  .mdw-textfield[mdw-value-empty] > input.mdw-textfield__input:not(:focus) {
-    color: transparent;
-  }
-  input.mdw-textfield__input:not(:focus):placeholder-shown {
-    color: transparent;
-  }
-  .mdw-textfield__input::placeholder {
-    color: textfieldThemeValue("placeholder-color__focus", $type, $theme);
-  }
-  .mdw-textfield__input:-ms-input-placeholder {
-    color: textfieldThemeValue("placeholder-color__focus", $type, $theme) !important;
-  }
-  .mdw-textfield__input {
-    color: textfieldThemeValue("text-color", $type, $theme);
-
-    // Disabled
-    &:disabled {
-      color: textfieldThemeValue("disabled-color", $type, $theme);
-      & ~ .mdw-textfield__label,
-      & ~ .mdw-textfield__prefix,
-      & ~ .mdw-textfield__suffix {
-        color: textfieldThemeValue("disabled-color", $type, $theme);
-      }
-      & ~ .mdw-textfield__border-line {
-        border-color: textfieldThemeValue("disabled-color", $type, $theme);
-      }
-    }
-
-    // Hover or Focus
-    &:hover:not(:disabled),
-    &:focus {
-      & ~ .mdw-textfield__border-line {
-        border-color: textfieldThemeValue("border-line-color__hover", $type, $theme);
-      }
-    }
-    
-    &:not(:focus) {
-      /* Rules must be separated for IE11 support */
-      &:placeholder-shown ~ .mdw-textfield__prefix,
-      &:placeholder-shown ~ .mdw-textfield__suffix {
-        color: transparent;
-      }
-      .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__prefix,
-      .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__suffix {
-        color: transparent;
-      }
-    }
-  }
-  .mdw-textfield__border-line {
-    border-color: textfieldThemeValue("border-line-color", $type, $theme);
-  }
-  .mdw-textfield__helper-text {
-    color: textfieldThemeValue("secondary-text-color", $type, $theme);
-  }
-  .mdw-textfield__error-text {
-    color: transparent; // will transition when shown
-  }
-
-  .mdw-textfield__input:disabled ~ .mdw-textfield__helper-text {
-    color: textfieldThemeValue("disabled-color", $type, $theme);
-  }
-  .mdw-textfield__input:focus:invalid ~ .mdw-textfield__helper-text {
-    color: transparent;
-  }
-  .mdw-textfield__dropdown {
-    background-color: textfieldThemeValue("dropdown-background-color", $type, $theme);
-  }
-  .mdw-textfield {
-    &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::placeholder {
-      color: transparent;
-    }
-    &:not([mdw-solo]) > .mdw-textfield__input:not(:focus):-ms-input-placeholder {
-      color: transparent !important;
-    }
-    &[mdw-box] > .mdw-textfield__input,
-    &[mdw-textarea] > .mdw-textfield__input {
-      &:not(:focus) ~ .mdw-textfield__border-line {
-        border-color: textfieldThemeValue("border-line-color", $type, $theme);
-      }
-      &:disabled ~ .mdw-textfield__border-line {
-        background-color: textfieldThemeValue("textarea-disabled-background-color", $type, $theme);
-      }
-      &:hover:not(:focus):not(:disabled) ~ .mdw-textfield__border-line {
-        border-color: textfieldThemeValue("border-line-color__hover", $type, $theme);
-      }
-    }
-    
-    &[mdw-textarea] > .mdw-textfield__input:disabled ~ .mdw-textfield__border-line {
-      border-color: textfieldThemeValue("textarea-disabled-border-color", $type, $theme);
-    }
-    &[mdw-textarea] > .mdw-textfield__input:disabled ~ .mdw-textfield__border-line,
-    &[mdw-box] > .mdw-textfield__input:disabled ~ .mdw-textfield__border-line {
-      border-color: transparent;
-    }
-
-    &[mdw-box] > .mdw-textfield__border-line::before {
-      background-color: textfieldThemeValue("box-fill-color", $type, $theme);
-    }
-    &[mdw-box] > {
-      .mdw-textfield__input:not(:disabled) {
-        & ~ .mdw-textfield__border-line:hover::before {
-          background-color: textfieldThemeValue("box-fill-color__hover", $type, $theme);
-        }
-        & ~ .mdw-textfield__border-line {
-          & > .mdw-ripple > .mdw-ripple__inner,
-          &:after {
-            color: buttonThemeValue("ripple-color", $type, $theme);
-            opacity: buttonThemeValue("ripple-opacity", $type, $theme);
-          }
-        }
-      }
-    }
-  }
-}

package/components/core/toolbar/style.scss

@@ -1,109 +0,0 @@
-// https://material.io/guidelines/layout/structure.html#structure-app-bar
-// https://material.io/guidelines/components/toolbars.html
-
-@import '../../common/functions.scss';
-@import '../../common/variables.scss';
-@import '../../common/motion.scss';
-@import '../../common/mixins.scss';
-
-$toolbar-height-mobile-landscape: dp(48);
-$toolbar-height-mobile-portrait: dp(56);
-$toolbar-height-tablet: dp(56);
-$toolbar-height-desktop: dp(56);
-
-$toolbar-left-padding: dp(16);
-$toolbar-right-padding: dp(16);
-
-.mdw-toolbar {
-  position: relative;
-  display:flex;
-  flex-direction: column;
-  box-shadow: elevation(4);
-  z-index: 4;
-}
-
-.mdw-toolbar__action {
-  display: flex;
-  flex-direction: row;
-  min-height: dp(56);
-  justify-content: space-between;
-  @include landscapeHandsets {
-    min-height: dp(48);
-  }
-}
-
-.mdw-toolbar__content,
-.mdw-toolbar__title {
-  margin-left: dp(72);
-  margin-right: dp(16);
-  flex-grow: 1;
-  .mdw-toolbar > & {
-    flex-direction: column;
-    display: flex;
-  }
-}
-
-.mdw-toolbar__title {
-  font-size: sp(24);
-  font-weight: 500;
-  height: dp(72);
-  justify-content: space-around;
-  &[mdw-centered] {
-    flex-grow: 0;
-  }
-  .mdw-toolbar__action > & {
-    margin-left: dp(16);
-    margin-right: dp(16);
-    height: auto;
-    
-    align-self: flex-end;
-    font-size: sp(20);
-    display: flex;
-    justify-content: flex-start;
-
-    // 20dp bottom padding from baseline
-    &::after {
-      content: "\200D"; // ‍
-      display: inline-block;
-      line-height: 1;
-      margin-bottom: dp(20);
-      vertical-align: text-top;
-    }
-  }
-}
-
-.mdw-toolbar__start {
-  order: -1;
-  padding-left: dp(8);
-  padding-right: dp(8);
-}
-
-.mdw-toolbar__end {
-  order: 1;
-  margin-right: dp(4);
-}
-
-
-.mdw-toolbar__start,
-.mdw-toolbar__end {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding-top: dp(8);
-  @include landscapeHandsets {
-    padding-top: dp(4);
-  }
-}
-
-.mdw-toolbar__start .mdw-button {
-  margin: 0;
-}
-
-.mdw-toolbar__end .mdw-button {
-  margin-left: 4px;
-  margin-right: 4px;
-  &[mdw-more-button] {
-    margin-left: 0;
-    margin-right: -2px;
-  }
-}

package/components/core/toolbar/theming.scss

@@ -1,28 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$toolbarColors: (
-  text-color: ((#000, 0.87), (#fff, 1.00))
-);
-
-
-@function toolbarThemeValue($key, $type, $theme) {
-  @return themeValue('toolbar', $toolbarColors, $key, $type, $theme);
-}
-
-@mixin toolbarThemeVariables($color, $lightness) {
-  @include themeVariables('toolbar', $toolbarColors, $color, $lightness);
-}
-
-@mixin toolbarContrastRules($type: 'var', $theme: null) {
-  @at-root {
-    #{&}.mdw-toolbar {
-      .mdw-toolbar__content,
-      .mdw-toolbar__title,
-      .mdw-toolbar__start,
-      .mdw-toolbar__end {
-        color: toolbarThemeValue("text-color", $type, $theme);
-      }
-    }
-  }
-}

package/components/core/tooltip/style.scss

@@ -1,127 +0,0 @@
-// https://material.io/guidelines/components/tooltips.html
-
-$tooltip__margin__desktop: dp(14);
-$tooltip__margin__mobile: dp(24);
-$tooltip__background-color: #616161; // material-grey-700
-
-.mdw-tooltip__wrapper {
-  position: relative;
-  overflow: visible;
-}
-
-.mdw-tooltip {
-  position: absolute;
-  cursor: none;
-  top: 100%;
-  left: 50%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  background-color: $tooltip__background-color;
-  color: white;
-  font-weight: $font-weight-medium;
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: 150ms;
-  transition-timing-function: $motion-easing-deceleration;
-  z-index: 8;
-  border-radius: dp(2);
-  pointer-events: none;
-  line-height: normal;
-  font-size: sp(10);
-  min-height: dp(22);
-  padding-left: dp(8);
-  padding-right: dp(8);
-  transform: translateX(-50%) translateY($tooltip__margin__desktop);
-
-  *:hover > &,
-  *:focus > &,
-  .mdw-tooltip__wrapper > *:hover ~ &,
-  .mdw-tooltip__wrapper > *:not([tabindex="-1"]):focus ~ & {
-    opacity: 0.9;
-    transition-timing-function: $motion-easing-acceleration;
-  }
-
-  &[mdw-position="start"],
-  &[mdw-position="end"],
-  &[mdw-position="left"],
-  &[mdw-position="right"] {
-    left: 0;
-    top: 50%;
-  }
-
-  &[mdw-position="start"],
-  &[mdw-position="left"],
-  [dir=rtl] &[mdw-position="end"] {
-    transform: translateY(-50%) translateX(-100%) translateX(-$tooltip__margin__desktop);
-  }
-
-  &[mdw-position="end"],
-  &[mdw-position="right"],
-  [dir=rtl] &[mdw-position="start"] {
-    transform: translateY(-50%) translateX(100%) translateX($tooltip__margin__desktop);
-  }
-
-  &[mdw-position="top"] {
-    top: 0;
-    transform: translateX(-50%) translateY(-100%) translateY(-$tooltip__margin__desktop);
-  }
-  
-}
-
-// Button position fix
-.mdw-tooltip__wrapper > .mdw-button[mdw-icon] ~ .mdw-tooltip {
-  margin-top: -8px;
-  &[mdw-position="top"] {
-    margin-top: 8px;
-  }
-}
-
-// Menu flicker fix
-.mdw-menu__wrapper > .mdw-menu:target ~ .mdw-tooltip,
-.mdw-menu__wrapper > .mdw-menu[mdw-show]:not([mdw-hide]) ~ .mdw-tooltip {
-  opacity: 0;
-  transition-delay: 0;
-}
-
-@media (any-pointer: coarse) {
-  .mdw-tooltip {
-    transition-delay: 1.5s;
-    font-size: sp(14);
-    min-height: dp(32);
-    padding-left: dp(16);
-    padding-right: dp(16);
-    transform: translateX(-50%) translateY($tooltip__margin__mobile);
-
-    &[mdw-position="start"],
-    &[mdw-position="left"],
-    [dir=rtl] &[mdw-position="end"] {
-      transform: translateY(-50%) translateX(-100%) translateX(-$tooltip__margin__mobile);
-    }
-
-    &[mdw-position="end"],
-    &[mdw-position="right"],
-    [dir=rtl] &[mdw-position="start"] {
-      transform: translateY(-50%) translateX(100%) translateX($tooltip__margin__mobile);
-    }
-
-    &[mdw-position="top"] {
-      transform: translateX(-50%) translateY(-100%) translateY(-$tooltip__margin__mobile);
-    }
-
-    // Don't change opacity unless active
-    *:focus:not(:active) > &,
-    .mdw-tooltip__wrapper > *:not([tabindex="-1"]):focus:not(:active) ~ & {
-      opacity: 0;
-    }
-
-    *:active > &,
-    .mdw-tooltip__wrapper > *:active ~ .mdw-tooltip {
-      opacity: 0.9;
-      transition-timing-function: $motion-easing-acceleration;
-    }
-  }
-
-}

package/components/core/type/style.scss

@@ -1,133 +0,0 @@
-// https://material.io/guidelines/style/typography.html
-
-@import '../../common/functions.scss';
-
-.mdw-type {
-  hyphens: auto;
-  // Sequential mdw-types will embed a 0-width joiner to align leading
-  & + .mdw-type::before {
-    content: "\200D"; // ‍
-    display: inline-block;
-  }
-  &[mdw-style|="display"] {
-    font-weight: $font-weight-regular;
-  }
-  &[mdw-style="display-4"] {
-    &,
-    & + .mdw-type::before {
-      font-size: sp(112);
-      font-weight: $font-weight-light;
-      white-space: nowrap;    
-    }
-  }
-  &[mdw-style="display-3"] {
-    &,
-    & + .mdw-type::before {
-      font-size: sp(56);
-      white-space: nowrap;
-    }
-  }
-  &[mdw-style="display-2"] {
-    &,
-    & + .mdw-type::before {
-      font-size: sp(45);
-      line-height: dp(48);
-    }
-  }
-  &[mdw-style="display-1"] {
-    &,
-    & + .mdw-type::before {
-      font-size: sp(34);
-      line-height: dp(40);
-    }
-  }
-  &[mdw-style="headline"] {
-    &,
-    & + .mdw-type::before {
-      font-size: sp(24);
-      line-height: dp(32);
-      font-weight: $font-weight-regular;
-
-    }
-  }
-  &[mdw-style="title"] {
-    &,
-    & + .mdw-type::before {
-      font-size: sp(20);
-      font-weight: $font-weight-medium;
-      white-space: nowrap;
-    }
-  }
-  &[mdw-style|="subheading"] {
-    font-size: sp(15);
-    @include allHandsetsAndTablets() {
-      &,
-      & + .mdw-type::before {
-        font-size: sp(16);
-      }
-    }
-    &,
-    & + .mdw-type::before {
-      font-weight: $font-weight-regular;
-      line-height: dp(24);
-      font-size: sp(16);
-    }
-  }
-  &[mdw-style="subheading-2"] {
-    &,
-    & + .mdw-type::before {
-      line-height: dp(28);
-    }
-    @include allHandsetsAndTablets() {
-      &,
-      & + .mdw-type::before {
-        line-height: dp(28);
-      }
-    }
-  }
-  &[mdw-style="body-2"] {
-    @include allHandsetsAndTablets() {
-      &,
-      & + .mdw-type::before {
-        font-size: sp(14);
-      }
-    }
-    &,
-    & + .mdw-type::before {
-      font-size: sp(13);
-      font-weight: $font-weight-medium;
-      font-size: sp(13);
-      line-height: dp(24);
-    }
-  }
-  &[mdw-style="body-1"] {
-    @include allHandsetsAndTablets() {
-      &,
-      & + .mdw-type::before {
-        font-size: sp(14);
-      }
-    }
-    &,
-    & + .mdw-type::before {
-      font-weight: $font-weight-regular;
-      font-size: sp(13);
-      line-height: dp(20);
-    }
-  }
-  &[mdw-style="caption"] {
-    &,
-    & + .mdw-type::before {
-      font-size: sp(12);
-      font-weight: $font-weight-regular;
-      white-space: nowrap;
-    }
-  }
-  &[mdw-style="button"] {
-    &,
-    & + .mdw-type::before {
-      font-size: sp(14);
-      font-weight: $font-weight-medium;
-      text-transform: uppercase;
-    }
-  }
-}

package/components/core/type/theming.scss

@@ -1,25 +0,0 @@
-@import '../../common/functions.scss';
-@import '../../common/mixins.scss';
-
-$typeColors: (
-  primary-text-color:   ((#000, 0.87), (#fff, 1.00)),
-  secondary-text-color: ((#000, 0.54), (#fff, 0.70)),
-);
-
-@function typeThemeValue($key, $type, $theme) {
-  @return themeValue('type', $typeColors, $key, $type, $theme);
-}
-
-@mixin typeThemeVariables($color, $lightness) {
-  @include themeVariables('type', $typeColors, $color, $lightness);
-}
-
-@mixin typeContrastRules($type: 'var', $theme: null) {
-  .mdw-type:not([mdw-theme-color]) {
-    color: typeThemeValue("primary-text-color", $type, $theme);
-    &[mdw-style|="display"],
-    &[mdw-style="caption"] {
-      color: typeThemeValue("secondary-text-color", $type, $theme);
-    }
-  }
-}