Sass restructure: split button into nativebutton and checkbox

8 files changed, 149 insertions, 100 deletions

diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
index 87f9119168..8a126476bc 100644
--- 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 e6398219ab..37a5973437 100644
--- 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
index 0000000000..9222e76975
--- /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
index 0000000000..cccc51ff7b
--- /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 a5ec4422eb..0d2060ddc6 100644
--- 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 9f7e761a1b..7b61d1b213 100644
--- 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
index 0000000000..bd6ca35627
--- /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 61c99a86b3..e102e99bc5 100644
--- 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;