vaadin-framework/themes/src/main/themes/VAADIN/themes/valo/components/_textfield.scss

/**
 * The background color for text fields.
 * @group textfield
 */
$v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default;

/**
 * The background color for read-only text fields.
 * @group textfield
 */
$v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%));

/**
 * The bevel style for text fields. See the documentation for $v-bevel.
 * @group textfield
 */
$v-textfield-bevel: if($v-bevel and ($v-bevel != none), inset 0 1px 0 v-shade, $v-bevel) !default;

/**
 * The shadow style for text fields. See the documentation for $v-shadow.
 * @group textfield
 */
$v-textfield-shadow: 0 1px 0 (v-tint 2) !default;

/**
 * The font-weight for text fields.
 * @group textfield
 */
$v-textfield-font-weight: 400 !default;

/**
 * The border style for text fields. See the documentation for $v-border.
 * @group textfield
 */
$v-textfield-border: $v-border !default;

/**
 * The border-radius for text fields. See the documentation for $v-border-radius;
 * @group textfield
 */
$v-textfield-border-radius: $v-border-radius !default;

/**
 * The opacity for disabled text fields.
 * @group textfield
 */
$v-textfield-disabled-opacity: $v-disabled-opacity !default;


/**
 * Outputs the selectors and properties for the TextField component.
 *
 * @param {string} $primary-stylename (v-textfield) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group textfield
 */
@mixin valo-textfield ($primary-stylename: v-textfield, $include-additional-styles: contains($v-included-additional-styles, textfield)) {

  .#{$primary-stylename} {
    @include valo-textfield-style;
    width: $v-default-field-width;
  }

  .#{$primary-stylename}-readonly {
    @include valo-textfield-readonly-style;
  }

  .#{$primary-stylename}-error {
    @include valo-textfield-error-style;
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-borderless {
      @include valo-textfield-borderless-style;
    }

    .#{$primary-stylename}-tiny {
      @include valo-textfield-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
      font-size: $v-font-size--tiny;
    }

    .#{$primary-stylename}-compact,
    .#{$primary-stylename}-small {
      @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
    }

    .#{$primary-stylename}-small {
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-large {
      @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
      font-size: $v-font-size--large;
    }

    .#{$primary-stylename}-huge {
      @include valo-textfield-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
      font-size: $v-font-size--huge;
    }

    @include valo-textfield-inline-icon($stylenames: inline-icon);
    @include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny);
    @include valo-textfield-inline-icon($stylenames: inline-icon compact, $unit-size: $v-unit-size--small);
    @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
    @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
    @include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge);

    .#{$primary-stylename}-align-right {
      text-align: right;
    }

    .#{$primary-stylename}-align-center {
      text-align: center;
    }
  }

}


/**
 * Outputs the styles for a text field variant.
 *
 * @param {size} $unit-size ($v-unit-size) - The sizing of the text field, which corresponds its height
 * @param {size | list} $padding (null) - The padding of the text field. Computed from other parameters by default.
 * @param {color} $font-color (null) - The font color of the text field. Computed from the $background-color by default.
 * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text field
 * @param {size} $font-size (null) - The font size of the text field. Inherited from the parent by default.
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
 * @param {list} $border ($v-textfield-border) - The border of the text field
 * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text field
 * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
 * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
 * @param {list} $states (normal focus disabled) - The text field states for which to output corresponding styles
 *
 * @group textfield
 */
@mixin valo-textfield-style (
    $unit-size        : $v-unit-size,
    $padding          : null,

    $font-color       : null,
    $font-weight      : max(400, $v-font-weight),
    $font-size        : null,

    $background-color : $v-textfield-background-color,
    $border           : $v-textfield-border,
    $border-radius    : $v-textfield-border-radius,

    $gradient         : none,
    $bevel            : $v-textfield-bevel,
    $shadow           : $v-textfield-shadow,

    $states           : (normal, focus, disabled)
  ) {

  @if contains($states, normal) {
    @include appearance(none);
    @include user-select(text);
    margin: 0;
    font: inherit;
    font-size: $font-size;
    font-weight: $font-weight;
    line-height: normal;
    height: $unit-size;
    border-radius: $border-radius;

    @if type-of($padding) == number or type-of($padding) == list {
      padding: $padding;
    } @else {
      $padding-width: ceil($unit-size/6);
      @if $border-radius {
        $padding-width: $padding-width + ceil($border-radius/3);
      }
      $padding-height: round($unit-size/9);
      padding: $padding-height $padding-width;
    }

    @if $background-color and $border {
      border: valo-border($border, darkest-color($background-color, $v-app-background-color));
    }

    @if $gradient == none {
      background: $background-color;
    } @else if $gradient {
      @include valo-gradient($color: $background-color, $gradient: $gradient)
    }

    @if $background-color {
      color: valo-font-color($background-color);
    }

    @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient));

    @if $v-animations-enabled {
      @include transition(box-shadow 180ms, border 180ms);
    }
  }

  @if contains($states, disabled) {
    &.v-disabled {
      @include opacity($v-textfield-disabled-opacity);
    }
  }

  @if contains($states, focus) {
    &:focus {
      @include valo-textfield-focus-style($bevel: $bevel, $shadow: $shadow, $gradient: $gradient, $background-color: $background-color);
    }
  }

  // TODO allow parent selector to be used in interpolation
  &[class*="prompt"],
  &[placeholder] {
    @include valo-textfield-prompt-style($background-color);
  }

}


/**
 * Outputs the styles for a text field input prompt.
 *
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
 *
 * @group textfield
 */
@mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
  @if $background-color ==  transparent {
    color: inherit;
    @include opacity(.5);
  } @else if type-of($background-color) == color {
    $font-color: valo-font-color($background-color);
    $font-color: mix($background-color, $font-color);
    @if is-dark-color($background-color) and saturation($background-color) > 50% {
      $font-color: scale-color($font-color, $lightness: 20%);
    }
    $font-color: scale-color($font-color, $saturation: saturation($font-color));
    color: $font-color;
  }
}


/**
 * Outputs the styles for a text field focus state.
 *
 * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
 * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
 * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient.
 *
 * @group textfield
 */
@mixin valo-textfield-focus-style ($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $background-color: $v-textfield-background-color, $gradient: null) {
  outline: none;
  @if $v-animations-enabled {
    @include transition(none);
  }

  $focus-color: $v-focus-color;

  @if color-luminance($focus-color) + 50 < color-luminance($v-background-color) {
    border-color: $focus-color;
  }

  @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true));

  @include valo-focus-style;
}


/**
 * Outputs the styles for a read-only text field.
 *
 * @group textfield
 */
@mixin valo-textfield-readonly-style {
  background: $v-textfield-background-color--readonly;
  color: valo-font-color($v-textfield-background-color--readonly);
  @include box-shadow(none);
  &:focus {
    box-shadow: none;
    border-color: first-color(valo-border($v-textfield-border, $v-textfield-background-color--readonly));
  }
}


/**
 * Outputs the styles for a borderless style text field.
 *
 * @param {color} $background-color (transparent) - The background color of the text field
 *
 * @group textfield
 */
@mixin valo-textfield-borderless-style ($background-color: transparent) {
  border: none;
  border-radius: 0;
  background: $background-color;
  @include box-shadow(none);

  $font-color: inherit;
  @if $background-color != transparent and type-of($background-color) == color {
    $font-color: valo-font-color($background-color);
  }
  color: $font-color;

  &:focus {
    @include box-shadow(none);
  }

  &[class*="prompt"],
  &[placeholder] {
    @include valo-textfield-prompt-style($background-color);
  }
}


/**
 * Outputs the styles for a text field error state.
 *
 * @group textfield
 */
@mixin valo-textfield-error-style {
  border-color: $v-error-indicator-color !important;
  $bg: scale-color($v-error-indicator-color, $lightness: 98%);
  background: $bg;
  color: valo-font-color($bg);
}


/**
 * Outputs the selectors and styles for an inline-icon style for a text field. Included indipendently (i.e. not enclosed with a parent text field selector).
 *
 * @param {string} $primary-stylename (v-textfield) - The primary style name for the selectors
 * @param {string | list} $stylenames (inline-icon) - The additional style names which will define the inline-icon style
 * @param {string} $input-selector (null) - Additional selector for a nested input element which should be targeted
 * @param {size} $unit-size ($v-unit-size) - The unit size which the resulting style will support
 * @param {size} $font-size ($v-font-size) - The font size which the resulting style will support (needed for font icons)
 * @param {size} $image-icon-size (16px) - The image icon height which the resulting style will support (needed to center the icon vertically inside the text field)
 *
 * @group text field
 */
@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) {
  $slot-selector: "";
  $caption-selector: "";
  $text-input-selector: "";

  @each $style in $stylenames {
    $slot-selector: $slot-selector + ".v-slot-" + $style;
    $caption-selector: $caption-selector + ".v-caption-" + $style;
    $text-input-selector: $text-input-selector + "." + $primary-stylename + "-" + $style;
  }

  #{$slot-selector} {
    position: relative;
  }

  #{$caption-selector} {
    padding: 0;

    .v-captiontext {
      // Need to include to get the default padding back
      @include valo-caption-style;
      margin: 0;
    }

    .v-icon {
      position: absolute;
      z-index: 10;
    }

    // Font icons
    span.v-icon {
      $border-width: first-number($v-textfield-border);
      left: $border-width;
      bottom: $border-width;
      width: $unit-size;
      line-height: $unit-size - $border-width*2;
      text-align: center;
      font-size: $font-size;
    }

    // Image icons
    img.v-icon {
      left: round(($unit-size - $image-icon-size)/2);
      bottom: round(($unit-size - $image-icon-size)/2);
    }
  }

  #{$text-input-selector} #{$input-selector} {
    padding-left: $unit-size;
  }
}