Added support for $primaryStyleName to Runo

Change-Id: I2c1a24b2655c1b9361b52e24f542deb64be8a914

1 files changed, 37 insertions, 37 deletions

diff --git a/WebContent/VAADIN/themes/runo/select/select.scss b/WebContent/VAADIN/themes/runo/select/select.scss
index 6ba9acecd7..cc9846f145 100644
--- a/WebContent/VAADIN/themes/runo/select/select.scss
+++ b/WebContent/VAADIN/themes/runo/select/select.scss
@@ -1,4 +1,4 @@
-@mixin runo-select {
+@mixin runo-select($primaryStyleName : v-filterselect) {
 
 .v-select-select {
 	font-size: 13px;
@@ -14,14 +14,14 @@
 
 /** Filterselect aka ComboBox styles */
 
-.v-filterselect {
+.#{$primaryStyleName} {
 	height: 23px;
 	background: transparent url(img/bg-left-filter.png) no-repeat;
 	padding-left: 4px;
 }
-&.v-app .v-filterselect .v-filterselect-input,
-.v-window .v-filterselect .v-filterselect-input,
-.v-popupview-popup .v-filterselect .v-filterselect-input {
+&.v-app .#{$primaryStyleName} .#{$primaryStyleName}-input,
+.v-window .#{$primaryStyleName} .#{$primaryStyleName}-input,
+.v-popupview-popup .#{$primaryStyleName} .#{$primaryStyleName}-input {
 	background: transparent url(img/bg-center-filter.png) no-repeat 1px 0;
 	border: none;
 	height: 23px;
@@ -29,38 +29,38 @@
 	padding: 2px 0 1px 2px;
 	font-size: 13px;
 }
-.v-filterselect-prompt .v-filterselect-input {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
 	font-style: normal;
 }
-.v-filterselect-input:focus {
+.#{$primaryStyleName}-input:focus {
 	/* remove safari/mac outline from this element */
 	outline: none;
 }
-.v-filterselect-focus {
+.#{$primaryStyleName}-focus {
 	outline: 1px solid #5daee8;
 	outline-offset: -1px;
 }
-.v-sa & .v-filterselect-focus {
+.v-sa & .#{$primaryStyleName}-focus {
 	/* place safari focus outline around the whole thing */
 	outline: 5px auto -webkit-focus-ring-color;
 	outline-offset: -4px;
 }
-.v-filterselect-button {
+.#{$primaryStyleName}-button {
 	width: 25px;
 	height: 23px;
 	background: transparent url(img/bg-right-filter.png);
 }
-.v-filterselect-button:hover {
+.#{$primaryStyleName}-button:hover {
 	background-position: bottom left;
 }
-.v-disabled .v-filterselect-button:hover,
-.v-readonly .v-filterselect-button:hover {
+.v-disabled .#{$primaryStyleName}-button:hover,
+.v-readonly .#{$primaryStyleName}-button:hover {
 	background-position: top left;
 }
-.v-filterselect.v-readonly .v-filterselect-input {
+.#{$primaryStyleName}.v-readonly .#{$primaryStyleName}-input {
 	background: transparent;
 }
-.v-filterselect-suggestpopup {
+.#{$primaryStyleName}-suggestpopup {
 	background: #f6f7f7;
 	border: 1px solid #b6bbbc;
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
@@ -69,45 +69,45 @@
 	line-height: 18px;
 	margin-top: -1px;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	padding: 1px 6px;
 	cursor: pointer;
 	height: 18px;
 }
-.v-ff & .v-filterselect-suggestmenu .gwt-MenuItem {
+.v-ff & .#{$primaryStyleName}-suggestmenu .gwt-MenuItem {
 	height: 20px;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem .v-icon {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon {
 	margin-right: 3px;
 }
-.v-filterselect-suggestmenu .gwt-MenuItem-selected {
+.#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected {
 	background: #5daee8;
 	color: #fff;
 }
-.v-filterselect-nextpage,
-.v-filterselect-nextpage-off,
-.v-filterselect-prevpage-off,
-.v-filterselect-prevpage {
+.#{$primaryStyleName}-nextpage,
+.#{$primaryStyleName}-nextpage-off,
+.#{$primaryStyleName}-prevpage-off,
+.#{$primaryStyleName}-prevpage {
 	height: 11px;
 	width:100%;
 	background: transparent url(img/button-bg.png) no-repeat 50% 0;
 	margin: 2px 0 0 0;
 }
-.v-filterselect-prevpage,
-.v-filterselect-prevpage-off {
+.#{$primaryStyleName}-prevpage,
+.#{$primaryStyleName}-prevpage-off {
 	background-position: 50% -1px;
 	margin: 0 0 2px 0;
 }
-.v-filterselect-prevpage:hover {
+.#{$primaryStyleName}-prevpage:hover {
 	background-position: 50% bottom;
 }
-.v-filterselect-nextpage:hover {
+.#{$primaryStyleName}-nextpage:hover {
 	background-position: 50% -12px;
 }
-.v-filterselect-nextpage span,
-.v-filterselect-nextpage-off span,
-.v-filterselect-prevpage-off span,
-.v-filterselect-prevpage span {
+.#{$primaryStyleName}-nextpage span,
+.#{$primaryStyleName}-nextpage-off span,
+.#{$primaryStyleName}-prevpage-off span,
+.#{$primaryStyleName}-prevpage span {
 	display: block;
 	height: 12px;
 	width:100%;
@@ -116,11 +116,11 @@
 	cursor: pointer;
 	overflow: hidden;
 }
-.v-filterselect-nextpage span,
-.v-filterselect-nextpage-off span {
+.#{$primaryStyleName}-nextpage span,
+.#{$primaryStyleName}-nextpage-off span {
 	background: transparent url(img/arrow-down.png) no-repeat 50% 60%;
 }
-.v-filterselect-status {
+.#{$primaryStyleName}-status {
 	font-size: 11px;
 	line-height: 11px;
 	width: 100%;
@@ -133,13 +133,13 @@
 /* Error styles (disabled by default)
    ----------------------------------
 
-.v-filterselect-error {
+.#{$primaryStyleName}-error {
 	background-image: url(img/bg-left-filter-error.png);
 }
-.v-filterselect-error .v-filterselect-input {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-input {
 	background-image: url(img/bg-center-filter-error.png);
 }
-.v-filterselect-error .v-filterselect-button {
+.#{$primaryStyleName}-error .#{$primaryStyleName}-button {
 	background-image: url(img/bg-right-filter-error.png);
 }
 .v-select-error .v-select-option,