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

1 files changed, 24 insertions, 24 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
index 7350f699f9..7cd8166aa6 100644
--- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss
@@ -1,16 +1,16 @@
-@mixin reindeer-textfield {
+@mixin reindeer-textfield($name : v-textfield) {
 
 /* Textfield on blue background */
-.blue .v-textfield,
+.blue .#{$name},
 .blue .v-textarea {
 	border-color: #92a2aa;
 	border-top-color: #7c8a90;
 	border-bottom-color: #a1b3bc;
 }
 /* Default & white background */
-.v-textfield,
+.#{$name},
 .v-textarea,
-.white .v-textfield,
+.white .#{$name},
 .white .v-textarea {
 	border: 1px solid #bcbdbe;
 	border-top-color: #a2a3a4;
@@ -31,19 +31,19 @@
 	height: auto;
 }
 /* Need more specific selector because of #2384 fixes in base/common/common.css */
-.v-app input.v-textfield,
-.v-window input.v-textfield,
+.v-app input.#{$name},
+.v-window input.#{$name},
 .v-app textarea.v-textarea,
 .v-window textarea.v-textarea  {
 	padding: 3px 3px 4px;
 }
-.v-app input.v-textfield.v-widget,
-.v-window input.v-textfield.v-widget {
+.v-app input.#{$name}.v-widget,
+.v-window input.#{$name}.v-widget {
 	height: 24px;
 }
-.v-app .v-textfield-focus,
-.v-window .v-textfield-focus,
-.v-popupview-popup .v-textfield-focus,
+.v-app .#{$name}-focus,
+.v-window .#{$name}-focus,
+.v-popupview-popup .#{$name}-focus,
 .v-app .v-textarea-focus,
 .v-window .v-textarea-focus,
 .v-popupview-popup .v-textarea-focus {
@@ -53,13 +53,13 @@
 	outline: none;
 	background-color: #fff;
 }
-input.v-textfield-prompt,
+input.#{$name}-prompt,
 textarea.v-textarea-prompt {
 	font-style: normal;
 	color: #999;
 }
 /* Small style textfield */
-.v-app input.v-textfield-small {
+.v-app input.#{$name}-small {
 	font-size: 11px;
 	line-height: normal;
 	height: auto;
@@ -68,18 +68,18 @@ textarea.v-textarea-prompt {
 .v-app textarea.v-textarea-small {
 	font-size: 11px;
 }
-.v-app .v-table  input.v-textfield.v-widget,
-.v-window .v-table input.v-textfield.v-widget {
+.v-app .v-table  input.#{$name}.v-widget,
+.v-window .v-table input.#{$name}.v-widget {
 	padding: 1px 2px;
 	height: auto;
 	line-height: normal;
 }
-.v-table-cell-wrapper > input.v-textfield {
+.v-table-cell-wrapper > input.#{$name} {
 	margin-top: -2px;
 	margin-bottom: -2px;
 }
 /* Textfield on black background */
-.black .v-textfield,
+.black .#{$name},
 .black .v-textarea {
 	border-color: #38393a;
 	border-top-color: #2c2d2e;
@@ -92,10 +92,10 @@ textarea.v-textarea-prompt {
 .black .v-textarea {
 	background-image: none;
 }
-.v-app .black .v-textfield-focus,
-.v-window-black .v-textfield-focus,
-.v-window .black .v-textfield-focus,
-.v-popupview-popup .black .v-textfield-focus,
+.v-app .black .#{$name}-focus,
+.v-window-black .#{$name}-focus,
+.v-window .black .#{$name}-focus,
+.v-popupview-popup .black .#{$name}-focus,
 .v-app .black .v-textarea-focus,
 .v-window-black .v-textarea-focus,
 .v-window .black .v-textarea-focus,
@@ -105,12 +105,12 @@ textarea.v-textarea-prompt {
 	border-bottom-color: #507596;
 	background-color: #151717;
 }
-.black input.v-textfield-prompt {
+.black input.#{$name}-prompt {
 	color: #5f6366;
 }
 /* Readonly */
-input.v-textfield-readonly,
-.black input.v-textfield-readonly,
+input.#{$name}-readonly,
+.black input.#{$name}-readonly,
 textarea.v-textarea-readonly,
 .black textarea.v-textarea-readonly {
 	border: none;