Sass restructure: base theme with renameable components

1 files changed, 48 insertions, 48 deletions

diff --git a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
index 9d60bf0618..dae4320131 100644
--- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
+++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss
@@ -1,6 +1,6 @@
-@mixin base-dragwrapper {
+@mixin base-dragwrapper($name : v-ddwrapper) {
 
-.v-ddwrapper {
+.#{$name} {
 	padding: 2px;
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
@@ -13,7 +13,7 @@
 	-khtml-user-select: none;
 	-webkit-user-select: none;
 }
-.v-ie .v-ddwrapper a.drag-start {
+.v-ie .#{$name} a.drag-start {
 	display: block;
 	position: absolute;
 	top: 0;
@@ -27,22 +27,22 @@
 	background-color:cyan;
 	filter: alpha(opacity=0);
 }
-.v-ddwrapper-over {
+.#{$name}-over {
 	border: 2px solid #1d9dff;
 	background-color: #bcdcff;
 	padding: 0;
 }
-.v-ddwrapper-over {
+.#{$name}-over {
 	background-color: rgba(169,209,255,.6);
 }
-.no-box-drag-hints .v-ddwrapper-over {
+.no-box-drag-hints .#{$name}-over {
 	border: none;
 	background-color: transparent;
 	padding: 2px;
 }
-.v-app .v-ddwrapper-over-top,
-.v-window .v-ddwrapper-over-top,
-.v-popupview-popup .v-ddwrapper-over-top {
+.v-app .#{$name}-over-top,
+.v-window .#{$name}-over-top,
+.v-popupview-popup .#{$name}-over-top {
 	border: none;
 	border-top: 2px solid #1d9dff;
 	background-color: transparent;
@@ -52,9 +52,9 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .v-ddwrapper-over-bottom,
-.v-window .v-ddwrapper-over-bottom,
-.v-popupview-popup .v-ddwrapper-over-bottom {
+.v-app .#{$name}-over-bottom,
+.v-window .#{$name}-over-bottom,
+.v-popupview-popup .#{$name}-over-bottom {
 	border: none;
 	border-bottom: 2px solid #1d9dff;
 	background-color: transparent;
@@ -64,9 +64,9 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .v-ddwrapper-over-left,
-.v-window .v-ddwrapper-over-left,
-.v-popupview-popup .v-ddwrapper-over-left {
+.v-app .#{$name}-over-left,
+.v-window .#{$name}-over-left,
+.v-popupview-popup .#{$name}-over-left {
 	border: none;
 	border-left: 2px solid #1d9dff;
 	background-color: transparent;
@@ -76,9 +76,9 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-app .v-ddwrapper-over-right,
-.v-window .v-ddwrapper-over-right,
-.v-popupview-popup .v-ddwrapper-over-right {
+.v-app .#{$name}-over-right,
+.v-window .#{$name}-over-right,
+.v-popupview-popup .#{$name}-over-right {
 	border: none;
 	border-right: 2px solid #1d9dff;
 	background-color: transparent;
@@ -88,27 +88,27 @@
 	-webkit-border-radius: 0;
 	border-radius: 0;
 }
-.v-ddwrapper,
-.v-ddwrapper-over,
-.v-app .v-ddwrapper-over-top,
-.v-window .v-ddwrapper-over-top,
-.v-popupview-popup .v-ddwrapper-over-top,
-.v-app .v-ddwrapper-over-bottom,
-.v-window .v-ddwrapper-over-bottom,
-.v-popupview-popup .v-ddwrapper-over-bottom,
-.v-app .v-ddwrapper-over-left,
-.v-window .v-ddwrapper-over-left,
-.v-popupview-popup .v-ddwrapper-over-left,
-.v-app .v-ddwrapper-over-right,
-.v-window .v-ddwrapper-over-right,
-.v-popupview-popup .v-ddwrapper-over-right {
+.#{$name},
+.#{$name}-over,
+.v-app .#{$name}-over-top,
+.v-window .#{$name}-over-top,
+.v-popupview-popup .#{$name}-over-top,
+.v-app .#{$name}-over-bottom,
+.v-window .#{$name}-over-bottom,
+.v-popupview-popup .#{$name}-over-bottom,
+.v-app .#{$name}-over-left,
+.v-window .#{$name}-over-left,
+.v-popupview-popup .#{$name}-over-left,
+.v-app .#{$name}-over-right,
+.v-window .#{$name}-over-right,
+.v-popupview-popup .#{$name}-over-right {
 	border-color: rgba(0,109,232,.6);
 }
 
-.v-ddwrapper-over-top:before,
-.v-ddwrapper-over-bottom:after,
-.v-ddwrapper-over-left:before,
-.v-ddwrapper-over-right:before {
+.#{$name}-over-top:before,
+.#{$name}-over-bottom:after,
+.#{$name}-over-left:before,
+.#{$name}-over-right:before {
 	display: block;
 	
 	position: absolute;
@@ -118,16 +118,16 @@
 	margin-left: -2px;
 	background: transparent url(../common/img/drag-slot-dot.png) no-repeat;
 }
-.v-ddwrapper-over-bottom:after {
+.#{$name}-over-bottom:after {
 	margin-top: -2px;
 }
-.v-ddwrapper-over-left:before,
-.v-ddwrapper-over-right:before {
+.#{$name}-over-left:before,
+.#{$name}-over-right:before {
 	background-position: 0 -6px;
 	margin-top: -2px;
 	margin-left: -4px;
 }
-.v-ddwrapper-over-right:before {
+.#{$name}-over-right:before {
 	position: relative;
 	margin-bottom: -4px;
 	margin-right: -4px;
@@ -136,26 +136,26 @@
 	background-position: 100% -6px;
 }
 
-.no-horizontal-drag-hints .v-ddwrapper-over-left {
+.no-horizontal-drag-hints .#{$name}-over-left {
 	padding-left: 2px;
 	border-left: none;
 }
-.no-horizontal-drag-hints .v-ddwrapper-over-right {
+.no-horizontal-drag-hints .#{$name}-over-right {
 	padding-right: 2px;
 	border-right: none;
 }
-.no-vertical-drag-hints .v-ddwrapper-over-top {
+.no-vertical-drag-hints .#{$name}-over-top {
 	padding-top: 2px;
 	border-top: none;
 }
-.no-vertical-drag-hints .v-ddwrapper-over-bottom {
+.no-vertical-drag-hints .#{$name}-over-bottom {
 	padding-bottom: 2px;
 	border-bottom: none;
 }
-.no-horizontal-drag-hints .v-ddwrapper-over-left:before,
-.no-horizontal-drag-hints .v-ddwrapper-over-right:before,
-.no-vertical-drag-hints .v-ddwrapper-over-top:before,
-.no-vertical-drag-hints .v-ddwrapper-over-bottom:after {
+.no-horizontal-drag-hints .#{$name}-over-left:before,
+.no-horizontal-drag-hints .#{$name}-over-right:before,
+.no-vertical-drag-hints .#{$name}-over-top:before,
+.no-vertical-drag-hints .#{$name}-over-bottom:after {
 	display: none;
 }