Sass restructure: tried some variants, this should be a reindeer structure that should work w/o overlay-container

1 files changed, 36 insertions, 36 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/window/window.scss b/WebContent/VAADIN/themes/reindeer/window/window.scss
index ac8fa9c2c9..c3ad0fc9be 100644
--- a/WebContent/VAADIN/themes/reindeer/window/window.scss
+++ b/WebContent/VAADIN/themes/reindeer/window/window.scss
@@ -1,25 +1,25 @@
-@mixin reindeer-window {
+@mixin reindeer-window($name : v-window) {
 
-.v-window {
+.#{$name} {
 	background: transparent;
 }
-.v-window-wrap {
+.#{$name}-wrap {
 	border: 1px solid #808386;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-.v-sa .v-window-wrap,
-.v-op .v-window-wrap {
+.v-sa .#{$name}-wrap,
+.v-op .#{$name}-wrap {
 	border-color: rgba(0,0,0,.2);
 }
-.v-window-outerheader {
+.#{$name}-outerheader {
 	padding: 12px 32px 0 14px;
 	height: 37px;
 	background: black repeat-x;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
-.v-window-header {
+.#{$name}-header {
 	font-weight: bold;
 	font-size: 12px;
 	line-height: normal;
@@ -30,24 +30,24 @@
 	text-overflow: ellipsis;
 	-ms-text-overflow: ellipsis;
 }
-.v-window-error .v-window-header {
+.#{$name}-error .#{$name}-header {
 	padding-left: 13px;
 	background: transparent url(../common/icons/error.png) no-repeat 0 50%;
 }
-.v-window-resizebox {
+.#{$name}-resizebox {
 	width: 15px;
 	height: 15px;
 	cursor: se-resize;
 	background: transparent;
 	background-image: url(img/resize.png); /** sprite-ref: verticals */
 }
-.v-window-footer {
+.#{$name}-footer {
 	background-color:white;
 	background-repeat: repeat-x;
 	background-image: url(img/footer-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 	height: 15px;
 }
-.v-window-closebox {
+.#{$name}-closebox {
 	top: 12px;
 	right: 10px;
 	width: 15px;
@@ -55,16 +55,16 @@
 	background: transparent;
 	background-image: url(img/close.png); /** sprite-ref: verticals */
 }
-.v-window-closebox:hover {
+.#{$name}-closebox:hover {
 	background-image: url(img/close-hover.png); /** sprite-ref: verticals */
 }
-.v-window-closebox:active {
+.#{$name}-closebox:active {
 	background-image: url(img/close-pressed.png); /** sprite-ref: verticals */
 }
-.v-window-contents {
+.#{$name}-contents {
 	background: #fff;
 }
-.v-window-modalitycurtain {
+.#{$name}-modalitycurtain {
 	background: #56595b;
 }
 
@@ -77,43 +77,43 @@
  Light style window -----------------------------
 **/
 
-.v-window-light .v-window-outerheader {
+.#{$name}-light .#{$name}-outerheader {
 	background: transparent;
 	padding: 15px 32px 0 18px;
 	height: 23px;
 }
-.v-window-light .v-window-header {
+.#{$name}-light .#{$name}-header {
 	font-size: 16px;
 	color: #292e34;
 	text-shadow: none;
 }
-.v-window-light .v-window-resizebox {
+.#{$name}-light .#{$name}-resizebox {
 	width: 12px;
 	height: 12px;
 	background-image: url(img/resize-light.png); /** sprite-ref: verticals */
 }
-.v-window-light .v-window-footer {
+.#{$name}-light .#{$name}-footer {
 	background: transparent;
 	height: 12px;
 }
-.v-window-light .v-window-closebox {
+.#{$name}-light .#{$name}-closebox {
 	right: 1px;
 	top: 17px;
 	width: 19px;
 	height: 15px;
 	background-image: url(img/close-light.png); /** sprite-ref: verticals */
 }
-.v-window-light .v-window-closebox:hover {
+.#{$name}-light .#{$name}-closebox:hover {
 	background-image: url(img/close-light-hover.png); /** sprite-ref: verticals */
 }
-.v-window-light .v-window-closebox:active {
+.#{$name}-light .#{$name}-closebox:active {
 	background-image: url(img/close-light-pressed.png); /** sprite-ref: verticals */
 }
-.v-window-light .v-window-contents {
+.#{$name}-light .#{$name}-contents {
 	background: transparent;
 }
 /* This must be the last sprite added to the verticals-sprite image */
-.v-window-light .v-window-wrap2 {
+.#{$name}-light .#{$name}-wrap2 {
 	background: #f7f7f8 repeat-x;
 	background-image: url(img/content-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
 }
@@ -123,27 +123,27 @@
  Black style window -----------------------------
 **/
 
-.v-window-black .v-window-wrap {
+.#{$name}-black .#{$name}-wrap {
 	border-color: #2e3030;
 	border-radius: 8px;
 	-webkit-border-radius: 8px;
 	-moz-border-radius: 8px;
 	overflow: hidden;
 }
-.v-sa .v-window-black .v-window-wrap,
-.v-op .v-window-black .v-window-wrap {
+.v-sa .#{$name}-black .#{$name}-wrap,
+.v-op .#{$name}-black .#{$name}-wrap {
 	border-color: rgba(0,0,0,.8);
 }
-.v-window-black .v-window-wrap2 {
+.#{$name}-black .#{$name}-wrap2 {
 	background-color: #1d2021;
 	-moz-border-radius: 7px;
 	-webkit-border-radius: 7px;
 }
-.v-sa .v-window-black .v-window-wrap2,
-.v-op .v-window-black .v-window-wrap2 {
+.v-sa .#{$name}-black .#{$name}-wrap2,
+.v-op .#{$name}-black .#{$name}-wrap2 {
 	background-color: rgba(29,32,33,.9);
 }
-.v-window-black .v-window-outerheader {
+.#{$name}-black .#{$name}-outerheader {
 	height: auto;
 	padding: 7px 14px;
 	height: 15px;
@@ -157,27 +157,27 @@
 	overflow: hidden;
 	border: none;
 }
-.v-window-black .v-window-header {
+.#{$name}-black .#{$name}-header {
 	font-size: 12px;
 	font-weight: normal;
 	color: #dddfe1;
 }
-.v-window-black .v-window-closebox {
+.#{$name}-black .#{$name}-closebox {
 	top: 8px;
 }
-.v-window-black .v-window-footer {
+.#{$name}-black .#{$name}-footer {
 	background: transparent;
 	border: none;
 	height: 14px;
 }
-.v-window-black .v-window-resizebox {
+.#{$name}-black .#{$name}-resizebox {
 	background: transparent no-repeat;
 	background-image: url(img/black/resize.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 4px */
 	width: 14px;
 	height: 14px;
 }
 /* Must be last to make this image last in the sprites */
-.v-window-black .v-window-contents {
+.#{$name}-black .#{$name}-contents {
 	border: none;
 	background: transparent repeat-x;
 	background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */