Sass restructure: split button into nativebutton and checkbox

diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
index 87f9119168647354073b3ce7b3997f44c95b1612..8a126476bccea427969d611b128929a9e487047a 100644 (file)
--- a/WebContent/VAADIN/themes/base/base.scss
+++ b/WebContent/VAADIN/themes/base/base.scss
@@ -1,6 +1,8 @@
 @import "absolutelayout/absolutelayout.scss";
 @import "accordion/accordion.scss";
 @import "button/button.scss";
+@import "button/nativebutton.scss";
+@import "button/checkbox.scss";
 @import "layout/layout.scss";
 @import "caption/caption.scss";
 @import "common/common.scss";
@@ -46,6 +48,8 @@
        @include base-absolutelayout;
        @include base-accordion;
        @include base-button;
+       @include base-nativebutton;
+       @include base-checkbox;
        @include base-caption;
        
        // here for now to preserve old semantics

diff --git a/WebContent/VAADIN/themes/base/button/button.scss b/WebContent/VAADIN/themes/base/button/button.scss
index e6398219abb57cd40eaf747138f33a185b1e1cb7..37a5973437d9e7bd29c17a2671be31099cc61731 100644 (file)
--- a/WebContent/VAADIN/themes/base/button/button.scss
+++ b/WebContent/VAADIN/themes/base/button/button.scss
@@ -39,15 +39,13 @@
        line-height: normal;
        }
 
-.#{$name} .v-icon,
-.v-nativebutton .v-icon {
+.#{$name} .v-icon {
        vertical-align: middle;
        margin-right: 3px;
        border: none;
        }
 
-.#{$name} .v-errorindicator,
-.v-nativebutton .v-errorindicator {
+.#{$name} .v-errorindicator {
        display: inline-block;
        zoom: 1;
        vertical-align: middle;
@@ -55,8 +53,7 @@
 }
 
 /* Link style (we really should deprecate this) */
-.#{$name}-link,
-.v-nativebutton-link {
+.#{$name}-link {
        border: none;
        text-align: left !important;
        background: transparent;
@@ -73,90 +70,10 @@
        outline-offset: -3px;
        }
 
-.#{$name}-link .#{$name}-caption,
-.v-nativebutton-link .v-nativebutton-caption {
+.#{$name}-link .#{$name}-caption {
        text-decoration: underline;
        color: inherit;
        text-align: left;
        }
 
-
-/*
- * NativeButton styles (html button element)
- * -------------------------------------- */
-.v-nativebutton {
-       text-align: center !important;
-       cursor: pointer;
-       white-space: nowrap;
-       margin: 0;
-       color: inherit;
-       font: inherit;
-       line-height: normal;
-       }
-.v-nativebutton .v-nativebutton-caption {
-       vertical-align: middle;
-       white-space: nowrap;
-       font: inherit;
-       color: inherit;
-       }
-
-.v-nativebutton .v-icon {
-       vertical-align: middle;
-       margin-right: 3px;
-       }
-
-.v-nativebutton .v-errorindicator {
-       display: inline-block;
-       zoom: 1;
-       float: none;
-}
-/* Fixes stretched buttons in IE7*/
-.v-ie .v-nativebutton {
-       overflow: visible;
-       padding-left: 1em;
-       padding-right: 1em;
-}
-
-.v-ie .v-nativebutton-link {
-       padding: 0;
-}
-
-/*
- * Checkbox styles
- * -------------------------------------- */
- 
- .v-checkbox {
-       display: block;
- }
-
-.v-checkbox,
-.v-checkbox label,
-.v-checkbox input,
-.v-checkbox .v-icon {
-       vertical-align: middle;
-       white-space: nowrap;
-}
-
-.v-checkbox .v-icon {
-       margin: 0 2px;
-}
-.v-checkbox .v-errorindicator {
-       float: none;
-       display: inline;
-       display: inline-block;
-       zoom: 1;
-}
-
-
-/* Disabled by default
-.v-checkbox-error {
-       background: #ffe0e0;
-}
-*/
-/* Disabled by default
-.v-checkbox-required {
-       background: #ffe0e0;
-}
-*/
-
-}
+}
\ No newline at end of file

diff --git a/WebContent/VAADIN/themes/base/button/checkbox.scss b/WebContent/VAADIN/themes/base/button/checkbox.scss
new file mode 100644 (file)
index 0000000..9222e76
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/button/checkbox.scss
@@ -0,0 +1,37 @@
+@mixin base-checkbox($name : v-checkbox) {
+
+ .#{$name} {
+       display: block;
+ }
+
+.#{$name},
+.#{$name} label,
+.#{$name} input,
+.#{$name} .v-icon {
+       vertical-align: middle;
+       white-space: nowrap;
+}
+
+.#{$name} .v-icon {
+       margin: 0 2px;
+}
+.#{$name} .v-errorindicator {
+       float: none;
+       display: inline;
+       display: inline-block;
+       zoom: 1;
+}
+
+
+/* Disabled by default
+.#{$name}-error {
+       background: #ffe0e0;
+}
+*/
+/* Disabled by default
+.#{$name}-required {
+       background: #ffe0e0;
+}
+*/
+
+}

diff --git a/WebContent/VAADIN/themes/base/button/nativebutton.scss b/WebContent/VAADIN/themes/base/button/nativebutton.scss
new file mode 100644 (file)
index 0000000..cccc51f
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/button/nativebutton.scss
@@ -0,0 +1,73 @@
+@mixin base-nativebutton($name : v-nativebutton) {
+
+
+.#{$name} .v-icon {
+       vertical-align: middle;
+       margin-right: 3px;
+       border: none;
+       }
+
+.#{$name} .v-errorindicator {
+       display: inline-block;
+       zoom: 1;
+       vertical-align: middle;
+       float: none;
+}
+
+/* Link style (we really should deprecate this) */
+.#{$name}-link {
+       border: none;
+       text-align: left !important;
+       background: transparent;
+       padding: 0;
+       color: inherit;
+       -khtml-user-select: text;
+       -moz-user-select: text;
+       -ie-user-select: text;
+       user-select: text;
+}
+
+.#{$name}-link .#{$name}-caption {
+       text-decoration: underline;
+       color: inherit;
+       text-align: left;
+       }
+
+.#{$name} {
+       text-align: center !important;
+       cursor: pointer;
+       white-space: nowrap;
+       margin: 0;
+       color: inherit;
+       font: inherit;
+       line-height: normal;
+       }
+.#{$name} .#{$name}-caption {
+       vertical-align: middle;
+       white-space: nowrap;
+       font: inherit;
+       color: inherit;
+       }
+
+.#{$name} .v-icon {
+       vertical-align: middle;
+       margin-right: 3px;
+       }
+
+.#{$name} .v-errorindicator {
+       display: inline-block;
+       zoom: 1;
+       float: none;
+}
+/* Fixes stretched buttons in IE7*/
+.v-ie .#{$name} {
+       overflow: visible;
+       padding-left: 1em;
+       padding-right: 1em;
+}
+
+.v-ie .#{$name}-link {
+       padding: 0;
+}
+
+}

diff --git a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
index a5ec4422ebbe56fb75b68d396ff3f74a765a56a3..0d2060ddc6e9854e3c9181d21233a2d95f3cd53f 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss
@@ -22,8 +22,7 @@
        cursor: default;
        }
        
-.#{$name}-link .#{$name}-caption,
-.v-nativebutton-link .v-nativebutton-caption {
+.#{$name}-link .#{$name}-caption {
        line-height: inherit;
        font-weight: normal;
        color: #1b699f;
@@ -31,8 +30,7 @@
        text-shadow: none;
        }
        
-.#{$name}-link:focus .#{$name}-caption,
-.v-nativebutton-link:focus .v-nativebutton-caption {
+.#{$name}-link:focus .#{$name}-caption {
        outline: 1px dotted #1b699f;
        }
 

diff --git a/WebContent/VAADIN/themes/reindeer/button/button.scss b/WebContent/VAADIN/themes/reindeer/button/button.scss
index 9f7e761a1b6508dc6fb693a790691a2c5f97e98b..7b61d1b213b644f5ffa50bbd847157e14d020b61 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/button/button.scss
+++ b/WebContent/VAADIN/themes/reindeer/button/button.scss
@@ -6,17 +6,10 @@
 @import "button-small-style.scss";
 @import "button-link-style.scss";
 
-/* Browser-specific corrections to the standard implementation */
-@import "button-ie.scss";
-
-@mixin reindeer-button {
+@mixin reindeer-button($name : v-button) {
        // TODO use $exclude 
        @include reindeer-button-standard;
        @include reindeer-button-primary-style;
        @include reindeer-button-small-style;
        @include reindeer-button-link-style;
-
-       /* Browser-specific corrections to the standard implementation */
-       @include reindeer-button-ie;
-
 }

diff --git a/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss b/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss
new file mode 100644 (file)
index 0000000..bd6ca35
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss
@@ -0,0 +1,25 @@
+/* Browser-specific corrections to the standard implementation */
+@import "button-ie.scss";
+
+@mixin reindeer-nativebutton-link($name : v-nativebutton) {
+
+.#{$name}-link .#{$name}-caption {
+       line-height: inherit;
+       font-weight: normal;
+       color: #1b699f;
+       font-size: 12px;
+       text-shadow: none;
+       }
+       
+.#{$name}-link:focus .#{$name}-caption {
+       outline: 1px dotted #1b699f;
+       }
+
+}
+
+@mixin reindeer-nativebutton($name : v-nativebutton) {
+       @include reindeer-nativebutton-link($name);
+       
+       /* Browser-specific corrections to the standard implementation */
+       @include reindeer-button-ie($name);
+}
\ No newline at end of file

diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss
index 61c99a86b36f7780422a6652f7ca4aaed42a4059..e102e99bc5da0eacab6898397554c0031b8101a8 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/reindeer.scss
+++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss
@@ -4,6 +4,7 @@
 @import "accordion/accordion.scss";
 @import "a-sprite-definitions/a-sprite-definitions.scss";
 @import "button/button.scss";
+@import "button/nativebutton.scss";
 
 @import "common/common.scss";
 
@@ -35,6 +36,7 @@
        @include reindeer-accordion;
        // TODO @include a-sprite-definitions;
        @include reindeer-button;
+       @include reindeer-nativebutton;
        @include reindeer-common;
        @include reindeer-datefield;
        @include reindeer-formlayout;