summaryrefslogtreecommitdiffstats
path: root/WebContent/VAADIN/themes/valo/components/_textfield.scss
blob: 75cfc5ef85ace641c829325e288b637f9ef1f5e9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
<?xml version="1.0" encoding="UTF-8"?>
<!--
   Copyright (C) 2013, Matthias Sohn <matthias.sohn@sap.com>
   and other copyright owners as documented in the project's IP log.

   This program and the accompanying materials are made available
   under the terms of the Eclipse Distribution License v1.0 which
   accompanies this distribution, is reproduced below, and is
   available at http://www.eclipse.org/org/documents/edl-v10.php

   All rights reserved.

   Redistribution and use in source and binary forms, with or
   without modification, are permitted provided that the following
   conditions are met:

   - Redistributions of source code must retain the above copyright
     notice, this list of conditions and the following disclaimer.

   - Redistributions in binary form must reproduce the above
     copyright notice, this list of conditions and the following
     disclaimer in the documentation and/or other materials provided
     with the distribution.

   - Neither the name of the Eclipse Foundation, Inc. nor the
     names of its contributors may be used to endorse or promote
     products derived from this software without specific prior
     written permission.

   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
   CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
   INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
   OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
   ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
   CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
   SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
   NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
   LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
   CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
   STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
   ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
   ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<project xmlns="http://maven.apache.org/POM/4.0.0"
    pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { colo
ckground-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
$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;
$v-textfield-background-color--readonly: $v-app-background-color;
$v-textfield-bevel: inset 0 1px 0 v-shade !default;
$v-textfield-shadow: 0 1px 0 (v-tint 2) !default;
$v-textfield-font-weight: 400 !default;
$v-textfield-border: $v-border !default;
$v-textfield-border-radius: $v-border-radius !default;
$v-textfield-disabled-opacity: $v-disabled-opacity !default;



@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}-small {
      @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
      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;
    }

    @include valo-textfield-inline-icon($stylenames: inline-icon);
    @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);

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

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

}



@mixin valo-textfield-style (
    $unit-size        : $v-unit-size,
    $padding          : null, // Computed by default

    $font-color       : null, // Computed by default
    $font-weight      : max(400, $v-font-weight),
    $font-size        : null, // Inherited by default

    $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);
    margin: 0;
    font: inherit;
    font-size: $font-size;
    font-weight: $font-weight;
    line-height: normal;
    height: $unit-size;
    border-radius: $border-radius;

    .v-ie8 &,
    .v-ie9 & {
      line-height: $unit-size;
      padding-top: 0;
      padding-bottom: 0;
    }

    @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"] {
    @include valo-textfield-prompt-style($background-color);
  }

}


@mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
  @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;
  }
}


@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;
}


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



@mixin valo-textfield-borderless-style ($background-color: transparent) {
  border: none;
  border-radius: 0;
  background: $background-color;
  @include box-shadow(none);
  @if $background-color == transparent {
    color: inherit;
  } @else if type-of($background-color) == color {
    color: valo-font-color($background-color);
  }

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




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







@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;
  }
}