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

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

  }
}