Sass restructure: base theme with renameable components

1 files changed, 10 insertions, 10 deletions

diff --git a/WebContent/VAADIN/themes/base/button/button.scss b/WebContent/VAADIN/themes/base/button/button.scss
index ad4dce4978..e6398219ab 100644
--- a/WebContent/VAADIN/themes/base/button/button.scss
+++ b/WebContent/VAADIN/themes/base/button/button.scss
@@ -1,9 +1,9 @@
-@mixin base-button {
+@mixin base-button($name : v-button) {
 
 /*
  * Default button (more customizable)
  * -------------------------------------- */
-.v-button {
+.#{$name} {
 	display: inline-block;
 	zoom: 1;
 	text-align: center !important;
@@ -26,12 +26,12 @@
 	box-sizing: border-box;
 }
 
-.v-button.v-disabled {
+.#{$name}.v-disabled {
 	cursor: default;
 }
 
-.v-button-wrap,
-.v-button-caption {
+.#{$name}-wrap,
+.#{$name}-caption {
 	vertical-align: baseline;
 	white-space: nowrap;
 	font: inherit;
@@ -39,14 +39,14 @@
 	line-height: normal;
 	}
 
-.v-button .v-icon,
+.#{$name} .v-icon,
 .v-nativebutton .v-icon {
 	vertical-align: middle;
 	margin-right: 3px;
 	border: none;
 	}
 
-.v-button .v-errorindicator,
+.#{$name} .v-errorindicator,
 .v-nativebutton .v-errorindicator {
 	display: inline-block;
 	zoom: 1;
@@ -55,7 +55,7 @@
 }
 
 /* Link style (we really should deprecate this) */
-.v-button-link,
+.#{$name}-link,
 .v-nativebutton-link {
 	border: none;
 	text-align: left !important;
@@ -69,11 +69,11 @@
 }
 
 /* Inset Safari focus outline a bit */
-.v-sa .v-button-link:focus{
+.v-sa .#{$name}-link:focus{
 	outline-offset: -3px;
 	}
 
-.v-button-link .v-button-caption,
+.#{$name}-link .#{$name}-caption,
 .v-nativebutton-link .v-nativebutton-caption {
 	text-decoration: underline;
 	color: inherit;