1 files changed, 219 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
new file mode 100644
index 0000000000..14f9535d41
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -0,0 +1,219 @@
+$v-textfield-bevel-style: inset 0 1px 0 shade, 0 1px 0 hilite !default;
+$v-textfield-bevel-depth: $v-bevel-depth !default;
+$v-textfield-shadow-style: none !default;
+$v-textfield-shadow-depth: $v-shadow-depth !default;
+$v-textfield-background-color: null !default;
+$v-textfield-unit-size: null !default;
+$v-textfield-font-weight: 400 !default;
+$v-textfield-font-size: $v-font-size !default;
+$v-textfield-border-width: $v-border-width !default;
+$v-textfield-border-radius: $v-border-radius !default;
+$v-textfield-disabled-opacity: $v-disabled-opacity !default;
+
+
+
+@function v-valo-textfield-background-color ($context) {
+  $bg-color: lighten($context, 8%);
+  @if is-dark-color($context) {
+    $bg-color: darken($context, 4%);
+  }
+  @return $bg-color;
+}
+
+
+
+
+
+@function v-valo-textfield-box-shadow ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth,
+                                       $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) {
+  @if $bevel-depth == 0 and $shadow-depth == 0 {
+    @return null;
+  }
+  $_bevel: v-valo-replace-hilite-and-shade($bevel-style, white($bevel-depth/500%), black($bevel-depth/500%));
+  $_shadow: v-valo-shadow($shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
+
+  @if $_bevel and $_shadow {
+    @return $_bevel, $_shadow;
+  } @else if $_bevel {
+    @return $_bevel;
+  } @else if $_shadow {
+    @return $_shadow;
+  } @else {
+    @return null;
+  }
+
+}
+
+
+
+
+@mixin v-valo-textfield-size ($unit-size: $v-unit-size, $border-radius: $v-textfield-border-radius) {
+  height: $unit-size;
+  $padding-width: ceil($unit-size/6);
+  @if $border-radius {
+    $padding-width: $padding-width + ceil($border-radius/3);
+  }
+  padding: ceil($unit-size/9) $padding-width;
+}
+
+
+
+@function v-valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
+                                         $background-color: $v-textfield-background-color) {
+  $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color);
+  $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color);
+  $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2)));
+  $border-color: scale-color($border-color, $saturation: -$bevel-depth/2);
+  @return $border-color;
+}
+
+
+
+
+@mixin v-valo-textfield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
+                               $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth,
+                               $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius,
+                               $background-color: $v-textfield-background-color) {
+
+  $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color);
+  $unit-size: $unit-size or $v-unit-size;
+  
+  @include appearance(none);
+  margin: 0;
+  font: inherit;
+  font-size: if($v-textfield-font-size != $v-font-size, $v-textfield-font-size, null);
+  font-weight: $v-textfield-font-weight;
+  @include v-valo-textfield-size($unit-size, $border-radius);
+  border-radius: $border-radius;
+  border: $v-textfield-border-width solid v-valo-textfield-border-color($bevel-style, $bevel-depth, $background-color);
+  background: $background-color;
+  color: v-valo-font-color($background-color);
+  box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
+
+  @if $v-animations-enabled {
+    @include transition(box-shadow 180ms, border 180ms);
+  }
+
+  &.v-disabled {
+    @include opacity($v-textfield-disabled-opacity);
+  }
+
+  &:focus {
+    @include v-valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth);
+  }
+  
+  // TODO allow parent selector to be used in interpolation
+  &.v-textfield-prompt,
+  &.v-textarea-prompt {
+    @include v-valo-textfield-prompt-style($background-color);
+  }
+
+}
+
+
+@mixin v-valo-textfield-prompt-style ($background-color) {
+  $font-color: v-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 v-valo-textfield-focus-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, 
+                                     $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) {
+  outline: none;
+  @if $v-animations-enabled {
+    @include transition(none);
+  } 
+  
+  $focus-color: v-valo-focus-color();
+  
+  @if color-luminance($focus-color) + 50 < color-luminance($v-app-background-color) {
+    border-color: $focus-color;
+  }
+  
+  box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth), 
+              v-valo-focus-box-shadow($color: $focus-color);
+}
+
+
+@mixin v-valo-textfield-readonly-style {
+  background: transparent;
+  box-shadow: none;
+  &:focus {
+    box-shadow: v-valo-focus-box-shadow();
+  }
+}
+
+
+@mixin v-valo-textfield ($primary-stylename: v-textfield) {
+  
+  .#{$primary-stylename} {
+    @include v-valo-textfield-style;
+    width: $v-default-field-width;
+  }
+  
+  .#{$primary-stylename}-readonly {
+    @include v-valo-textfield-readonly-style;
+  }
+  
+}
+
+
+
+@mixin v-valo-textfield-borderless-style ($background-color: transparent) {
+  border: none;
+  border-radius: 0;
+  background: $background-color;
+  box-shadow: none;
+
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+
+
+@mixin v-valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-textfield-font-size, $image-icon-size: 16px) {
+  .v-slot-#{$stylename} {
+    position: relative;
+  }
+
+  .v-caption-#{$stylename} {
+    padding: 0;
+
+    .v-captiontext {
+      @include v-valo-caption-style;
+      margin: 0;
+    }
+
+    .v-icon {
+      position: absolute;
+      z-index: 10;
+    }
+
+    // Font icons
+    span.v-icon {
+      left: $v-textfield-border-width;
+      bottom: $v-textfield-border-width;
+      width: $unit-size;
+      line-height: $unit-size - $v-textfield-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);
+    }
+  }
+
+  .#{$primary-stylename}-#{$stylename},
+  .v-textarea-#{$stylename} {
+    padding-left: $unit-size;
+  }
+}