Preparation for build of a unique CSS

UI/WebServerResources/scss/components/textField/_extends.scss

@@ -0,0 +1,2 @@
+/*! textField/_extends.scss - */
+@import '../../../angular-material/src/components/textField/textField.scss';

UI/WebServerResources/scss/components/textField/textField.scss

@@ -1,148 +1 @@
-$tff-font-size: 0.75em !default;
-$tff-line-height:26px !default;
-$tff-transition: all 0.15s $swift-ease-in-out-timing-function !default;
-// - `label` element (aka hint)
-$tff-hint-offset-large : 22px !default;
-$tff-hint-offset-small : 4px !default;
-$ttf-hint-offset-scale : 0.75 !default;
-// - `line` element
-$tff-line-focused-width: 2px !default;
-$tff-line-disabled-width: 0px !default;
-$tff-line-dot-width: 1px !default;
-$tff-line-dot-size: 3px !default;
-$tff-line-dashed: #cfcfcf !default;
-
-$tff-margin: 10px 0 (10px - $tff-line-focused-width) 0 !default;
-
-// ******************************
-// Mixins: Text Fields
-// ******************************
-
-@mixin text-field($transition:false, $borderWidth:1px ) {
-  input, textarea {
-    border-bottom-width: $borderWidth;
-
-    @if( $transition != false ) {
-      transition: $transition;
-    }
-  }
-}
-
-@mixin text-hint($size:large, $transition:false ) {
-  label {
-    @if $size == "small" {
-      transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale);
-    } @else {
-      transform: translate3d(0, $tff-hint-offset-large, 0);
-      transform-origin: left center;
-      transition: $tff-transition;
-    }
-
-    @if( $transition != false ) {
-      transition: $transition;
-    }
-  }
-}
-
-@mixin text-dashed-line( $dotGap, $dotSize) {
-  background-size: $dotSize $dotGap;
-  background-position: 0 bottom;
-  background-size: (1px + 1px) $dotGap;
-  background-repeat: repeat-x;
-}
-
-md-input-group,
-.md-input-group {
-
-  label {
-    display: block;
-    font-size: $tff-font-size;
-  }
-
-  textarea,
-  input[type="text"],
-  input[type="password"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="date"],
-  input[type="month"],
-  input[type="time"],
-  input[type="week"],
-  input[type="number"],
-  input[type="email"],
-  input[type="url"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="color"] {
-    display: block;
-    border-width: 0 0 1px 0;
-    padding-top: 2px;
-    line-height: $tff-line-height;
-    padding-bottom: 1px;
-
-    &:focus {
-      outline: 0;
-    }
-  }
-
-  input, textarea {
-    background: none;
-  }
-}
-
-// Light-Theme
-md-input-group,
-.md-input-group {
-  padding-bottom: $tff-line-focused-width;
-  margin: $tff-margin;
-
-  position: relative;
-  display:  block;
-
-  label {
-    font-size: 1em;
-    z-index: 1;
-    pointer-events: none;
-    -webkit-font-smoothing: antialiased;
-
-    &:hover {
-      cursor: text;
-    }
-  }
-
-  @include text-hint( large, $tff-transition );
-  @include text-field( $tff-transition );
-
-
-  &.md-input-focused {
-    @include text-hint( small );
-    @include text-field( false, $tff-line-focused-width );
-    input {
-      padding-bottom: 0px;
-    }
-  }
-
-  &.md-input-has-value {
-    @include text-hint( small );
-
-    &:not(.md-input-focused) {
-      @include text-hint( small );
-    }
-  }
-
-  &[disabled] {
-
-    @include text-field( false, $tff-line-disabled-width );
-    input, textarea {
-      @include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size);
-      pointer-events: none;
-    }
-
-    @include text-hint( small );
-
-    *:not(.md-input-has-value) {
-      @include text-hint( large );
-    }
-
-  }
-}
+@import 'extends';