1 files changed, 262 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
new file mode 100644
index 0000000000..878203b878
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -0,0 +1,262 @@
+// @category  Button
+
+// Values default to global values (evaluated when the mixins are called)
+$v-button-background-color: null !default;
+$v-button-bevel-style: null !default;
+$v-button-bevel-depth: null !default;
+$v-button-gradient-style: null !default;
+$v-button-gradient-depth: null !default;
+$v-button-shadow-style: null !default;
+$v-button-shadow-depth: null !default;
+$v-button-border-radius: $v-border-radius !default;
+$v-button-unit-size: null !default;
+
+$v-button-font-weight: max(400, $v-font-weight + 100) !default;
+$v-button-cursor: pointer !default;
+$v-button-hover-style-enabled: $v-hover-styles-enabled !default;
+$v-button-border-width: $v-border-width !default;
+$v-button-disabled-opacity: $v-disabled-opacity !default;
+
+
+
+// The main mixin for Valo buttons
+// @mixin     v-valo-button
+// @param     $primary-stylename {String} the primary stylename to use for the output. Defaults to <code>v-button</code>
+@mixin v-valo-button ($primary-stylename: v-button) {
+  .#{$primary-stylename} {
+    @include v-valo-button-common-properties;
+    @include v-valo-button-style;
+  }
+}
+
+
+
+
+
+@mixin v-valo-button-common-properties {
+  @include v-valo-tappable;
+  cursor: $v-button-cursor;
+  font-weight: $v-button-font-weight;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+
+  // Generated element for :hover, :focus and :active styles
+  &:after {
+    content: "";
+    position: absolute;
+    top: -$v-button-border-width;
+    right: -$v-button-border-width;
+    bottom: -$v-button-border-width;
+    left: -$v-button-border-width;
+    border-radius: inherit;
+    border: inherit;
+    border-width: 0;
+    @if $v-animations-enabled {
+      @include transition(box-shadow 180ms, border 180ms);
+    }
+  }
+
+  &.v-disabled {
+    @include opacity($v-button-disabled-opacity);
+    
+    &:after {
+      display: none;
+    }
+  }
+
+  @include v-valo-button-vertical-centering;
+}
+
+@mixin v-valo-button-vertical-centering {
+  // Vertical centering of icon and caption, independent of the height of the button
+  @include vertical-align-guide($to-align: div, $pseudo-element: before);
+
+  // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust
+  .v-sa &:before {
+    height: 110%;
+  }
+
+  // Firefox needs a bit of adjusting as well
+  .v-ff &:before {
+    height: 105%;
+  }
+
+  // ...and so does IE. Who knew?
+  .v-ie &:before {
+    margin-top: 4px;
+  }
+}
+
+
+
+
+
+@mixin v-valo-button-size ($unit-size, $border-radius) {
+  height: $unit-size;
+  
+  $padding-width: ceil($unit-size/2.4);
+  $padding-width: $padding-width + ceil($border-radius/3);
+  padding: 0 $padding-width;
+
+  .v-icon {
+    margin: 0 ceil($padding-width/-5);
+  }
+
+  .v-icon + span:not(:empty) {
+    margin-left: ceil($padding-width/1.5);
+  }
+}
+
+
+
+@function v-valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
+                                      $background-color: $v-button-background-color) {
+
+  $background-color: $background-color or $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);
+  @if contains($bevel-style, shade, true) {
+    $border-color: $border-color $border-color blend-multiply(transparentize(#000, max(0.8, 1-$bevel-depth/200%)), $border-color);
+  }
+
+  @return $border-color;
+}
+
+
+
+
+@mixin v-valo-button-style ($gradient-style: $v-button-gradient-style, $gradient-depth: $v-button-gradient-depth, 
+                            $bevel-style: $v-button-bevel-style, $bevel-depth: $v-button-bevel-depth, 
+                            $unit-size: $v-button-unit-size, $border-radius: $v-button-border-radius,
+                            $background-color: $v-button-background-color) {
+
+  // Set up variable defaults
+  $background-color: $background-color or $v-app-background-color;
+  $gradient-style: $gradient-style or $v-gradient-style;
+  $gradient-depth: $gradient-depth or $v-gradient-depth;
+  $bevel-style: $bevel-style or $v-bevel-style;
+  $bevel-depth: $bevel-depth or $v-bevel-depth;
+  $unit-size: $unit-size or $v-unit-size;
+  
+  @include v-valo-button-size($unit-size, $border-radius);
+
+  border-radius: $border-radius;
+  border: $v-button-border-width solid;
+  border-color: v-valo-button-border-color($bevel-style, $bevel-depth, $background-color);
+
+  @include v-valo-gradient($background-color, $gradient-style, $gradient-depth);
+  color: v-valo-font-color($background-color, 0.9);
+
+  box-shadow: v-valo-button-box-shadow($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth);
+  text-shadow: v-valo-button-text-shadow($background-color, $bevel-depth);
+  
+  @if $v-button-hover-style-enabled {
+    &:hover:after {
+      @include v-valo-button-hover-style($background-color: $background-color);
+    }
+  }
+
+  &:focus {
+    outline: none;
+    &:after {
+      @include v-valo-button-focus-style($background-color: $background-color);
+    }
+  }
+
+  &:active:after,
+  &.v-pressed:after {
+    @include v-valo-button-active-style($background-color: $background-color);
+  }
+  
+}
+
+
+@mixin v-valo-button-focus-style ($background-color: $v-app-background-color, $border-fallback: inherit) {
+  $focus-color: v-valo-focus-color();
+  
+  @if color-luminance($focus-color) + 50 < color-luminance($background-color) {
+    border: $v-button-border-width solid $focus-color;
+  } @else {
+    border: $border-fallback or v-valo-button-border-color($background-color: $background-color);
+  }
+
+  box-shadow: v-valo-focus-box-shadow($color: $focus-color);
+
+  @if $v-animations-enabled {
+    @include transition(none);
+  }
+}
+
+
+
+@mixin v-valo-button-active-style ($background-color: $v-app-background-color) {
+  $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($v-app-background-color));
+  background-color: rgba($bg, .1);
+  
+  .v-ie8 & {
+    background-color: $bg;
+    filter: alpha(opacity=10);
+  }
+}
+
+
+
+@mixin v-valo-button-hover-style ($background-color: $v-app-background-color) {
+  $bg: lighten($background-color, 15%);
+  background-color: rgba($bg, .1);
+  border: inherit;
+  
+  @if $v-animations-enabled {
+    @include transition(none);
+  }
+  
+  .v-ie8 & {
+    background-color: $bg;
+    filter: alpha(opacity=20);
+  }
+}
+
+
+
+
+@mixin v-valo-button-borderless-style {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  color: inherit;
+}
+
+
+@mixin v-valo-button-icon-align-right-style ($primary-stylename: v-button) {
+  .#{$primary-stylename}-wrap {
+    display: inline-block;
+  }
+
+  .v-icon {
+    float: right;
+    $padding-width: ceil($v-unit-size/2.4);
+    margin-left: $padding-width + ceil($padding-width/-5);
+
+    + span:not(:empty) {
+      margin-left: 0;
+    }
+  }
+}
+
+
+
+@function v-valo-button-box-shadow($background-color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) {
+  @return v-valo-bevel($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth), v-valo-shadow();
+}
+
+
+
+@function v-valo-button-text-shadow($background-color, $bevel-depth: $v-bevel-depth) {
+  @if is-dark-color($background-color) {
+    @return 0 -1px 0 transparentize(darken($background-color, $bevel-depth), 1-($bevel-depth/100%));
+  } @else {
+    @return 0 1px 0 transparentize(lighten($background-color, $bevel-depth), 1-($bevel-depth/100%));
+  } 
+}