@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/textfield/theming.scss

@@ -1,256 +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)),
-  filled-disabled-border-color:       ((#000,            0.10), (#fff,              0.30)),
-  filled-disabled-background-color:   ((#000,            0.03), (#fff,              0.05)),
-  fill-color:                         ((#000,            0.06), (#fff,              0.10)),
-  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-icon-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[mdw-outlined] {
-    &:active > .mdw-textfield__input:not(:disabled),
-    > .mdw-textfield__input:not(:disabled):focus {
-      & ~ .mdw-textfield__border {
-        color: textfieldThemeValue("border-line-color__focus", $type, $theme);
-      }
-    }
-    &[mdw-theme-color|="accent"] {
-      &:active > .mdw-textfield__input:not(:disabled),
-      > .mdw-textfield__input:not(:disabled):focus {
-        & ~ .mdw-textfield__border {
-          color: textfieldThemeValue("border-line-accent-color__focus", $type, $theme);
-        }
-      }
-    }
-    &,
-    &[mdw-theme-color|="accent"] {
-      &:active > .mdw-textfield__input:not(:disabled),
-      > .mdw-textfield__input:not(:disabled):focus {
-        &:invalid {
-          & ~ .mdw-textfield__border,
-          & ~ .mdw-textfield__border::before {
-            color: textfieldThemeValue("border-line-warn-color__focus", $type, $theme);
-          }
-        }
-      }
-    }
-  }
-  .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__border .mdw-textfield__label {
-        color: textfieldThemeValue("label-color__focus", $type, $theme);
-      }
-      & ~ .mdw-textfield__border::before {
-        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::after {
-          color: textfieldThemeValue("border-line-warn-color__focus", $type, $theme);
-        }
-        & ~ .mdw-textfield__border .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__border .mdw-textfield__label {
-            color: textfieldThemeValue("label-accent-color__focus", $type, $theme);
-          }
-          & ~ .mdw-textfield__border::before {
-            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);
-  }
-  
-}
-
-// Vary by contrast
-@mixin textfieldContrastRules($type: 'var', $theme: null) {
-  .mdw-textfield__signifier,
-  .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__icon[mdw-dropdown] {
-    color: textfieldThemeValue("dropdown-icon-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__border .mdw-textfield__label,
-      & ~ .mdw-textfield__signifier,
-      & ~ .mdw-textfield__prefix,
-      & ~ .mdw-textfield__suffix,
-      & ~ .mdw-textfield__icon, {
-        color: textfieldThemeValue("disabled-color", $type, $theme);
-      }
-      & ~ .mdw-textfield__border {
-        color: textfieldThemeValue("disabled-color", $type, $theme);
-      }
-    }
-
-    // Hover
-    &:not(:focus):hover:not(:disabled) ~ .mdw-textfield__border,
-    &:not(:focus):not(:disabled) ~ .mdw-textfield__border:hover {
-      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 {
-    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-textfield__input {
-      &:not(:focus) ~ .mdw-textfield__border {
-        color: textfieldThemeValue("border-line-color", $type, $theme);
-      }
-      &:disabled ~ .mdw-textfield__border {
-        background-color: textfieldThemeValue("filled-disabled-background-color", $type, $theme);
-      }
-    }
-    
-    .mdw-textfield__input:disabled ~ .mdw-textfield__border {
-      color: textfieldThemeValue("filled-disabled-border-color", $type, $theme);
-    }
-
-    &:not([mdw-outlined]) > .mdw-textfield__border {
-      background-color: textfieldThemeValue("fill-color", $type, $theme);
-    }
-    &:not([mdw-outlined]) > .mdw-textfield__input:not(:disabled) {
-      & ~ .mdw-textfield__border:hover,
-      &:hover ~ .mdw-textfield__border, {
-        background-color: textfieldThemeValue("fill-color__hover", $type, $theme);
-      }
-    }
-  }
-}

package/components/theming/globals.scss

@@ -1,25 +0,0 @@
-@import '../common/functions.scss';
-@import '../common/mixins.scss';
-
-$globalColors: (
-  text-color:           ((#000, 0.87), (#fff, 1.00)),
-  secondary-text-color: ((#000, 0.54), (#fff, 0.70)),
-);
-
-@function globalThemeValue($key, $type) {
-  @return themeValue('', $globalColors, $key, $type);
-}
-
-@mixin globalThemeVariables($color, $lightness) {
-  @include themeVariables('', $globalColors, $color, $lightness);
-}
-
-// Vary by contrast
-@mixin globalContrastRules($type: 'var', $theme: null) {
-  .mdw__primary-text {
-    color: globalThemeValue("text-color", $type);
-  }
-  .mdw__secondary-text {
-    color: globalThemeValue("secondary-text-color", $type);
-  }
-}