From aa25700c8aa2ae974e1c9e3ce3230335d8309814 Mon Sep 17 00:00:00 2001 From: Artur Signell Date: Mon, 4 Aug 2014 14:20:25 +0300 Subject: Split test theme into separate themes and added theme selector Change-Id: I076a05a393ae85bb68983eaa2756d36a0e92014e --- .../themes/tests-valo-blueprint/_variables.scss | 20 ++++ .../VAADIN/themes/tests-valo-blueprint/styles.scss | 6 + .../VAADIN/themes/tests-valo-dark/_variables.scss | 18 +++ .../VAADIN/themes/tests-valo-dark/styles.scss | 6 + .../themes/tests-valo-facebook/_variables.scss | 24 ++++ .../VAADIN/themes/tests-valo-facebook/styles.scss | 6 + .../VAADIN/themes/tests-valo-flat/_variables.scss | 43 +++++++ .../VAADIN/themes/tests-valo-flat/styles.scss | 6 + .../themes/tests-valo-flatdark/_variables.scss | 20 ++++ .../VAADIN/themes/tests-valo-flatdark/styles.scss | 6 + .../VAADIN/themes/tests-valo-metro/_variables.scss | 26 +++++ .../VAADIN/themes/tests-valo-metro/styles.scss | 6 + .../VAADIN/themes/tests-valo/_blueprint.scss | 20 ---- WebContent/VAADIN/themes/tests-valo/_dark.scss | 18 --- WebContent/VAADIN/themes/tests-valo/_default.scss | 3 - WebContent/VAADIN/themes/tests-valo/_facebook.scss | 24 ---- .../VAADIN/themes/tests-valo/_flat-dark.scss | 20 ---- WebContent/VAADIN/themes/tests-valo/_flat.scss | 43 ------- WebContent/VAADIN/themes/tests-valo/_metro.scss | 26 ----- WebContent/VAADIN/themes/tests-valo/_valotest.scss | 118 +++++++++++++++++++ .../VAADIN/themes/tests-valo/_variables.scss | 3 + WebContent/VAADIN/themes/tests-valo/styles.scss | 128 +-------------------- 22 files changed, 311 insertions(+), 279 deletions(-) create mode 100644 WebContent/VAADIN/themes/tests-valo-blueprint/_variables.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-blueprint/styles.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-dark/_variables.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-dark/styles.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-facebook/_variables.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-facebook/styles.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-flat/_variables.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-flat/styles.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-flatdark/styles.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-metro/_variables.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-metro/styles.scss delete mode 100644 WebContent/VAADIN/themes/tests-valo/_blueprint.scss delete mode 100644 WebContent/VAADIN/themes/tests-valo/_dark.scss delete mode 100644 WebContent/VAADIN/themes/tests-valo/_default.scss delete mode 100644 WebContent/VAADIN/themes/tests-valo/_facebook.scss delete mode 100644 WebContent/VAADIN/themes/tests-valo/_flat-dark.scss delete mode 100644 WebContent/VAADIN/themes/tests-valo/_flat.scss delete mode 100644 WebContent/VAADIN/themes/tests-valo/_metro.scss create mode 100644 WebContent/VAADIN/themes/tests-valo/_valotest.scss create mode 100644 WebContent/VAADIN/themes/tests-valo/_variables.scss (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/tests-valo-blueprint/_variables.scss b/WebContent/VAADIN/themes/tests-valo-blueprint/_variables.scss new file mode 100644 index 0000000000..696da0b69e --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-blueprint/_variables.scss @@ -0,0 +1,20 @@ +$v-app-loading-text: "Blueprint Valo"; +$v-background-color: #1a61b7; +$v-focus-color: #fff; +$v-panel-background-color: $v-background-color; +$v-overlay-background-color: $v-background-color; +$valo-menu-background-color: $v-background-color; +$v-overlay-shadow: 0 0 0 1px rgba(#fff, .5); +$v-window-shadow: $v-overlay-shadow; +$v-window-modality-curtain-background-color: $v-background-color; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-border: 1px solid (v-tint 1.5); +$v-textfield-background-color: $v-background-color; +$v-font-family: sans-serif; +$v-font-size: 18px; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo-blueprint/styles.scss b/WebContent/VAADIN/themes/tests-valo-blueprint/styles.scss new file mode 100644 index 0000000000..9433f4eba6 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-blueprint/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-blueprint { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/tests-valo-dark/_variables.scss b/WebContent/VAADIN/themes/tests-valo-dark/_variables.scss new file mode 100644 index 0000000000..21bcd00ae9 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-dark/_variables.scss @@ -0,0 +1,18 @@ +$v-app-loading-text: "Dark Valo"; +$v-background-color: #444d50; +$v-focus-color: #07a9ca; +$v-focus-style: 0 0 3px 2px $v-focus-color; +$v-bevel-depth: 40%; +$v-gradient: v-linear 12%; +$v-border-radius: 10px; +$v-font-family: Roboto, sans-serif; +$v-font-weight: 400; +$v-font-weight--header: 400; +$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1); +$v-shadow: 0 0 0 3px darken($v-background-color, 3%), 0 1px 1px 3px lighten($v-background-color, 5%); +$v-textfield-bevel: inset 0 2px 2px v-shade; +$v-textfield-shadow: $v-shadow; +$v-unit-size: 40px; +$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4); + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo-dark/styles.scss b/WebContent/VAADIN/themes/tests-valo-dark/styles.scss new file mode 100644 index 0000000000..13f98ae418 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-dark/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-dark { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/tests-valo-facebook/_variables.scss b/WebContent/VAADIN/themes/tests-valo-facebook/_variables.scss new file mode 100644 index 0000000000..5b83aae4ca --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-facebook/_variables.scss @@ -0,0 +1,24 @@ +$v-app-loading-text: "Facebook Valo"; +$v-background-color: #fafafa; +$v-app-background-color: #e7ebf2; +$v-panel-background-color: #fff; +$v-focus-color: #3b5998; +$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5); +$v-border-radius: 3px; +$v-textfield-border-radius: 0; +$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; +$v-font-size: 14px; +$v-font-color: #37404E; +$v-font-weight: 400; +$v-link-text-decoration: none; +$v-shadow: 0 1px 0 (v-shade 0.2); +$v-bevel: inset 0 1px 0 v-tint; +$v-unit-size: 30px; +$v-gradient: v-linear 12%; +$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7); +$v-shadow-opacity: 20%; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-selection-item-border-radius: 0; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo-facebook/styles.scss b/WebContent/VAADIN/themes/tests-valo-facebook/styles.scss new file mode 100644 index 0000000000..7b784627b2 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-facebook/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-facebook { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/tests-valo-flat/_variables.scss b/WebContent/VAADIN/themes/tests-valo-flat/_variables.scss new file mode 100644 index 0000000000..5d2b8abbb7 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-flat/_variables.scss @@ -0,0 +1,43 @@ +$v-app-loading-text: "Flat Valo"; + +$v-font-family: "Roboto", sans-serif; +$v-font-weight: 400; +$v-font-weight--header: 400; +$v-background-color: #fff; +$v-focus-color: rgb(150,190,90); +$v-luminance-threshold: 180; +$v-border: 2px solid v-shade; +$v-border-radius: 6px; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-link-text-decoration: false; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-selection-item-height: 30px; +$v-selection-item-border-radius: 0; + + +@import "../valo/valo"; + + +.valo-test { + .v-button-primary.v-button-primary { + background: #fff; + border-color: $v-focus-color; + color: $v-focus-color; + } + + .v-button-danger.v-button-danger { + background: #fff; + border-color: $v-error-indicator-color; + color: $v-error-indicator-color; + } + + .v-slider-base:before, + .v-slider-base:after { + border: none !important; + } +} diff --git a/WebContent/VAADIN/themes/tests-valo-flat/styles.scss b/WebContent/VAADIN/themes/tests-valo-flat/styles.scss new file mode 100644 index 0000000000..7b981de04a --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-flat/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-flat { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss b/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss new file mode 100644 index 0000000000..f68f9c266d --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss @@ -0,0 +1,20 @@ +$v-app-loading-text: "Dark & Flat Valo"; + +$v-background-color: #000; +$v-focus-color: orange; +$v-font-size: 15px; +$v-font-weight: 600; +$v-unit-size: 42px; +$v-bevel: false; +$v-shadow: false; +$v-gradient: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-border-radius: 0; +$v-border: 2px solid v-tone; +$v-overlay-shadow: 0 0 0 2px (v-tint 10); +$v-focus-style: $v-focus-color; +$v-font-family: "Lato", sans-serif; +$v-font-weight--header: 600; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo-flatdark/styles.scss b/WebContent/VAADIN/themes/tests-valo-flatdark/styles.scss new file mode 100644 index 0000000000..d0871fcba2 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-flatdark/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-flatdark { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/tests-valo-metro/_variables.scss b/WebContent/VAADIN/themes/tests-valo-metro/_variables.scss new file mode 100644 index 0000000000..f11cdb8b64 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-metro/_variables.scss @@ -0,0 +1,26 @@ +$v-app-loading-text: "Metro Valo"; + +$v-font-family: "Source Sans Pro", sans-serif; +$v-app-background-color: #fff; +$v-background-color: #eee; +$v-focus-color: #0072C6; +$v-focus-style: 0 0 0 1px $v-focus-color; +$valo-menu-background-color: darken($v-focus-color, 10%); +$v-border: 0 solid v-shade; +$v-border-radius: 0px; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-textfield-border: 1px solid v-shade; +$v-link-text-decoration: none; +$v-overlay-shadow: 0 0 0 2px #000; +$v-overlay-border-width: 2px; // For IE8 +$v-window-shadow: $v-overlay-shadow; +$v-selection-overlay-background-color: #fff; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-panel-border: 2px solid v-shade; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo-metro/styles.scss b/WebContent/VAADIN/themes/tests-valo-metro/styles.scss new file mode 100644 index 0000000000..51b3427a12 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-metro/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-metro { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/tests-valo/_blueprint.scss b/WebContent/VAADIN/themes/tests-valo/_blueprint.scss deleted file mode 100644 index 696da0b69e..0000000000 --- a/WebContent/VAADIN/themes/tests-valo/_blueprint.scss +++ /dev/null @@ -1,20 +0,0 @@ -$v-app-loading-text: "Blueprint Valo"; -$v-background-color: #1a61b7; -$v-focus-color: #fff; -$v-panel-background-color: $v-background-color; -$v-overlay-background-color: $v-background-color; -$valo-menu-background-color: $v-background-color; -$v-overlay-shadow: 0 0 0 1px rgba(#fff, .5); -$v-window-shadow: $v-overlay-shadow; -$v-window-modality-curtain-background-color: $v-background-color; -$v-bevel: false; -$v-gradient: false; -$v-shadow: false; -$v-textfield-bevel: false; -$v-textfield-shadow: false; -$v-border: 1px solid (v-tint 1.5); -$v-textfield-background-color: $v-background-color; -$v-font-family: sans-serif; -$v-font-size: 18px; - -@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_dark.scss b/WebContent/VAADIN/themes/tests-valo/_dark.scss deleted file mode 100644 index 21bcd00ae9..0000000000 --- a/WebContent/VAADIN/themes/tests-valo/_dark.scss +++ /dev/null @@ -1,18 +0,0 @@ -$v-app-loading-text: "Dark Valo"; -$v-background-color: #444d50; -$v-focus-color: #07a9ca; -$v-focus-style: 0 0 3px 2px $v-focus-color; -$v-bevel-depth: 40%; -$v-gradient: v-linear 12%; -$v-border-radius: 10px; -$v-font-family: Roboto, sans-serif; -$v-font-weight: 400; -$v-font-weight--header: 400; -$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1); -$v-shadow: 0 0 0 3px darken($v-background-color, 3%), 0 1px 1px 3px lighten($v-background-color, 5%); -$v-textfield-bevel: inset 0 2px 2px v-shade; -$v-textfield-shadow: $v-shadow; -$v-unit-size: 40px; -$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4); - -@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_default.scss b/WebContent/VAADIN/themes/tests-valo/_default.scss deleted file mode 100644 index c227156e2e..0000000000 --- a/WebContent/VAADIN/themes/tests-valo/_default.scss +++ /dev/null @@ -1,3 +0,0 @@ -$v-app-loading-text: "Default Valo"; - -@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_facebook.scss b/WebContent/VAADIN/themes/tests-valo/_facebook.scss deleted file mode 100644 index 5b83aae4ca..0000000000 --- a/WebContent/VAADIN/themes/tests-valo/_facebook.scss +++ /dev/null @@ -1,24 +0,0 @@ -$v-app-loading-text: "Facebook Valo"; -$v-background-color: #fafafa; -$v-app-background-color: #e7ebf2; -$v-panel-background-color: #fff; -$v-focus-color: #3b5998; -$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5); -$v-border-radius: 3px; -$v-textfield-border-radius: 0; -$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; -$v-font-size: 14px; -$v-font-color: #37404E; -$v-font-weight: 400; -$v-link-text-decoration: none; -$v-shadow: 0 1px 0 (v-shade 0.2); -$v-bevel: inset 0 1px 0 v-tint; -$v-unit-size: 30px; -$v-gradient: v-linear 12%; -$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7); -$v-shadow-opacity: 20%; -$v-selection-overlay-padding-horizontal: 0; -$v-selection-overlay-padding-vertical: 6px; -$v-selection-item-border-radius: 0; - -@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss b/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss deleted file mode 100644 index f68f9c266d..0000000000 --- a/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss +++ /dev/null @@ -1,20 +0,0 @@ -$v-app-loading-text: "Dark & Flat Valo"; - -$v-background-color: #000; -$v-focus-color: orange; -$v-font-size: 15px; -$v-font-weight: 600; -$v-unit-size: 42px; -$v-bevel: false; -$v-shadow: false; -$v-gradient: false; -$v-textfield-bevel: false; -$v-textfield-shadow: false; -$v-border-radius: 0; -$v-border: 2px solid v-tone; -$v-overlay-shadow: 0 0 0 2px (v-tint 10); -$v-focus-style: $v-focus-color; -$v-font-family: "Lato", sans-serif; -$v-font-weight--header: 600; - -@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_flat.scss b/WebContent/VAADIN/themes/tests-valo/_flat.scss deleted file mode 100644 index 5d2b8abbb7..0000000000 --- a/WebContent/VAADIN/themes/tests-valo/_flat.scss +++ /dev/null @@ -1,43 +0,0 @@ -$v-app-loading-text: "Flat Valo"; - -$v-font-family: "Roboto", sans-serif; -$v-font-weight: 400; -$v-font-weight--header: 400; -$v-background-color: #fff; -$v-focus-color: rgb(150,190,90); -$v-luminance-threshold: 180; -$v-border: 2px solid v-shade; -$v-border-radius: 6px; -$v-bevel: false; -$v-gradient: false; -$v-shadow: false; -$v-textfield-bevel: false; -$v-textfield-shadow: false; -$v-link-text-decoration: false; -$v-selection-overlay-padding-horizontal: 0; -$v-selection-overlay-padding-vertical: 6px; -$v-selection-item-height: 30px; -$v-selection-item-border-radius: 0; - - -@import "../valo/valo"; - - -.valo-test { - .v-button-primary.v-button-primary { - background: #fff; - border-color: $v-focus-color; - color: $v-focus-color; - } - - .v-button-danger.v-button-danger { - background: #fff; - border-color: $v-error-indicator-color; - color: $v-error-indicator-color; - } - - .v-slider-base:before, - .v-slider-base:after { - border: none !important; - } -} diff --git a/WebContent/VAADIN/themes/tests-valo/_metro.scss b/WebContent/VAADIN/themes/tests-valo/_metro.scss deleted file mode 100644 index f11cdb8b64..0000000000 --- a/WebContent/VAADIN/themes/tests-valo/_metro.scss +++ /dev/null @@ -1,26 +0,0 @@ -$v-app-loading-text: "Metro Valo"; - -$v-font-family: "Source Sans Pro", sans-serif; -$v-app-background-color: #fff; -$v-background-color: #eee; -$v-focus-color: #0072C6; -$v-focus-style: 0 0 0 1px $v-focus-color; -$valo-menu-background-color: darken($v-focus-color, 10%); -$v-border: 0 solid v-shade; -$v-border-radius: 0px; -$v-bevel: false; -$v-gradient: false; -$v-shadow: false; -$v-textfield-bevel: false; -$v-textfield-shadow: false; -$v-textfield-border: 1px solid v-shade; -$v-link-text-decoration: none; -$v-overlay-shadow: 0 0 0 2px #000; -$v-overlay-border-width: 2px; // For IE8 -$v-window-shadow: $v-overlay-shadow; -$v-selection-overlay-background-color: #fff; -$v-selection-overlay-padding-horizontal: 0; -$v-selection-overlay-padding-vertical: 6px; -$v-panel-border: 2px solid v-shade; - -@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss new file mode 100644 index 0000000000..f775938e13 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_valotest.scss @@ -0,0 +1,118 @@ +@mixin valotest { + @include valo; + + .valo-menu .v-checkbox { + margin: round($v-unit-size/2); + font-weight: 400; + } + + $color1: hsl(220, 5%, 38%); + $color2: #5d73c0; + $color3: #3dbc1a; + $color4: #d2f4f3; + $color5: #fe902a; + $colors: $color1, $color2, $color3, $color4, $color5; + + .v-textfield-color1 { + @include valo-textfield-style($background-color: $color1); + } + + .v-textfield-color2 { + @include valo-textfield-style($background-color: $color3); + } + + .v-textfield-color3 { + @include valo-textfield-style($background-color: $color4); + } + + + .v-textarea-color1 { + @include valo-textarea-style($background-color: $color1); + } + + .v-textarea-color2 { + @include valo-textarea-style($background-color: $color3); + } + + .v-textarea-color3 { + @include valo-textarea-style($background-color: $color4); + } + + + .v-datefield-color1 { + @include valo-datefield-style($background-color: $color1); + } + + .v-datefield-color2 { + @include valo-datefield-style($background-color: $color3); + } + + .v-datefield-color3 { + @include valo-datefield-style($background-color: $color4); + } + + + .v-filterselect-color1 { + @include valo-combobox-style($background-color: $color1); + } + + .v-filterselect-color2 { + @include valo-combobox-style($background-color: $color3); + } + + .v-filterselect-color3 { + @include valo-combobox-style($background-color: $color4); + } + + + $copy: $v-selection-color; + $v-selection-color: white; + .v-checkbox-color1 { + @include valo-checkbox-style($background-color: $color1); + } + + .v-checkbox-color2 { + @include valo-checkbox-style($background-color: $color2); + } + $v-selection-color: $copy; + + + .v-slider-color1 { + @include valo-slider-handle-style($background-color: $color1); + } + + .v-slider-color2 { + @include valo-slider-track-style($background-color: $color3); + } + + .v-slider-color3 { + @include valo-slider-indicator-style($background-color: #dcdc1e); + } + + + .v-panel-caption-color1 { + @include valo-panel-caption-style($background-color: $color1); + } + + .v-panel-caption-color2 { + @include valo-panel-caption-style($background-color: $color3); + } + + .v-panel-caption-color3 { + @include valo-panel-caption-style($background-color: $color5); + } + + // Show splitpanel borders + .v-splitpanel-vertical, + .v-splitpanel-horizontal { + outline: 1px dotted rgba(gray, .2); + } + + .v-slider-ticks { + @include valo-slider-ticks($tick-count: 5); + } + + .v-accordion-item-color1 .v-accordion-item-caption { + @include valo-accordion-item-caption-style($background-color: $color2); + } +} \ No newline at end of file diff --git a/WebContent/VAADIN/themes/tests-valo/_variables.scss b/WebContent/VAADIN/themes/tests-valo/_variables.scss new file mode 100644 index 0000000000..c227156e2e --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_variables.scss @@ -0,0 +1,3 @@ +$v-app-loading-text: "Default Valo"; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/styles.scss b/WebContent/VAADIN/themes/tests-valo/styles.scss index 89fc5755f4..1ba0b29b04 100644 --- a/WebContent/VAADIN/themes/tests-valo/styles.scss +++ b/WebContent/VAADIN/themes/tests-valo/styles.scss @@ -1,127 +1,5 @@ -@import "default"; -// @import "flat"; -// @import "flat-dark"; -// @import "facebook"; -// @import "metro"; -// @import "dark"; -// @import "blueprint"; - - +@import "variables"; +@import "valotest"; .tests-valo { - @include valo; - - .valo-menu .v-checkbox { - margin: round($v-unit-size/2); - font-weight: 400; - } - - $color1: hsl(220, 5%, 38%); - $color2: #5d73c0; - $color3: #3dbc1a; - $color4: #d2f4f3; - $color5: #fe902a; - $colors: $color1, $color2, $color3, $color4, $color5; - - .v-textfield-color1 { - @include valo-textfield-style($background-color: $color1); - } - - .v-textfield-color2 { - @include valo-textfield-style($background-color: $color3); - } - - .v-textfield-color3 { - @include valo-textfield-style($background-color: $color4); - } - - - .v-textarea-color1 { - @include valo-textarea-style($background-color: $color1); - } - - .v-textarea-color2 { - @include valo-textarea-style($background-color: $color3); - } - - .v-textarea-color3 { - @include valo-textarea-style($background-color: $color4); - } - - - .v-datefield-color1 { - @include valo-datefield-style($background-color: $color1); - } - - .v-datefield-color2 { - @include valo-datefield-style($background-color: $color3); - } - - .v-datefield-color3 { - @include valo-datefield-style($background-color: $color4); - } - - - .v-filterselect-color1 { - @include valo-combobox-style($background-color: $color1); - } - - .v-filterselect-color2 { - @include valo-combobox-style($background-color: $color3); - } - - .v-filterselect-color3 { - @include valo-combobox-style($background-color: $color4); - } - - - $copy: $v-selection-color; - $v-selection-color: white; - .v-checkbox-color1 { - @include valo-checkbox-style($background-color: $color1); - } - - .v-checkbox-color2 { - @include valo-checkbox-style($background-color: $color2); - } - $v-selection-color: $copy; - - - .v-slider-color1 { - @include valo-slider-handle-style($background-color: $color1); - } - - .v-slider-color2 { - @include valo-slider-track-style($background-color: $color3); - } - - .v-slider-color3 { - @include valo-slider-indicator-style($background-color: #dcdc1e); - } - - - .v-panel-caption-color1 { - @include valo-panel-caption-style($background-color: $color1); - } - - .v-panel-caption-color2 { - @include valo-panel-caption-style($background-color: $color3); - } - - .v-panel-caption-color3 { - @include valo-panel-caption-style($background-color: $color5); - } - - // Show splitpanel borders - .v-splitpanel-vertical, - .v-splitpanel-horizontal { - outline: 1px dotted rgba(gray, .2); - } - - .v-slider-ticks { - @include valo-slider-ticks($tick-count: 5); - } - - .v-accordion-item-color1 .v-accordion-item-caption { - @include valo-accordion-item-caption-style($background-color: $color2); - } + @include valotest; } -- cgit v1.2.3