$primaryStyleName functionality to Chameleon, fixes #9881

Change-Id: I3d75184acb7d2625a3edea35b1c8d2a86b7313eb

diff --git a/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss b/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
index f33577db9e29c62e6bf1d2945c4c4c169aaa65a1..2fe0307fe0bc92ad0e89ce334f7c191ab91bc984 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/accordion/accordion.scss
@@ -1,31 +1,31 @@
-@mixin chameleon-accordion {
+@mixin chameleon-accordion($primaryStyleName : v-accordion) {
 
-.v-accordion {
+.#{$primaryStyleName} {
        border: 1px solid #b3b3b3;
        }
 
-.v-accordion-item-open {
+.#{$primaryStyleName}-item-open {
        border-bottom: 1px solid #b3b3be;
        }
 
-.v-accordion-item-caption,
-.v-accordion-item-open .v-accordion-item-caption:active {
+.#{$primaryStyleName}-item-caption,
+.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active {
        padding: 0;
        background: transparent url(../../img/grad-light-top.png) repeat-x;
        border-width: 0 0 1px 0;
        border-style: solid none;
        }
        
-div.v-accordion-item-caption,
-div.v-accordion-item-open .v-accordion-item-caption:active {
+div.#{$primaryStyleName}-item-caption,
+div.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active {
        background-color: transparent;
        }
 
-.v-accordion-item-caption .v-caption {
+.#{$primaryStyleName}-item-caption .v-caption {
        padding: .2em .9em;
        }
 
-.v-accordion-item-caption:active {
+.#{$primaryStyleName}-item-caption:active {
        background-image: url(../../img/grad-dark-bottom.png);
        background-position: left bottom;
        }
@@ -33,28 +33,28 @@ div.v-accordion-item-open .v-accordion-item-caption:active {
 /*******************************************************************************
  * Opaque
  ******************************************************************************/
-.v-accordion-opaque {
+.#{$primaryStyleName}-opaque {
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        }
 
-.v-accordion-opaque .v-accordion-item-caption,
-.v-accordion-opaque .v-accordion-item-open {
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-caption,
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open {
        border: none;
        }
 
-.v-accordion-opaque .v-accordion-item-caption,
-.v-accordion-opaque .v-accordion-item-open .v-accordion-item-caption:active {
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-caption,
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption:active {
        background-color: #b8b8b8;
        }
 
-.v-accordion-opaque .v-accordion-item-open {
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-open {
        background-color: #fff;
        }
 
-.v-accordion-opaque .v-accordion-item-first,
-.v-accordion-opaque .v-accordion-item-first .v-accordion-item-caption {
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-first,
+.#{$primaryStyleName}-opaque .#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption {
        -webkit-border-top-left-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        -moz-border-radius-topleft: 3px;
@@ -66,12 +66,12 @@ div.v-accordion-item-open .v-accordion-item-caption:active {
 /*******************************************************************************
  * Borderless
  ******************************************************************************/
-.v-accordion-borderless {
+.#{$primaryStyleName}-borderless {
        border: none;
        }
 
-.v-accordion-opaque.borderless,
-.v-accordion-opaque.borderless .v-accordion-item-first .v-accordion-item-caption {
+.#{$primaryStyleName}-opaque.borderless,
+.#{$primaryStyleName}-opaque.borderless .#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption {
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;

diff --git a/WebContent/VAADIN/themes/chameleon/components/button/button.scss b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
index 28d96991a7092902bed08860083b61edbdc6df75..75970cdac75ec63c068ba66419108d06f621ba14 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/button/button.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/button/button.scss
@@ -1,15 +1,15 @@
-@mixin chameleon-button {
+@mixin chameleon-button($primaryStyleName : v-button) {
 
-.v-button:active,
-.v-ie8 & .v-pressed.v-button,
-div.v-button-down {
+.#{$primaryStyleName}:active,
+.v-ie8 & .v-pressed.#{$primaryStyleName},
+div.#{$primaryStyleName}-down {
        background-image: url(../../img/grad-dark-bottom2.png);
        background-color: #afafaf;
        }
 
-.v-button:active .v-button-wrap,
-.v-ie8 & .v-pressed.v-button .v-button-wrap,
-.v-button-down .v-button-wrap {
+.#{$primaryStyleName}:active .#{$primaryStyleName}-wrap,
+.v-ie8 & .v-pressed.#{$primaryStyleName} .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
        background-image: url(../../img/grad-dark-top2.png);
        border: 1px solid #888;
        padding: 3px 12px;
@@ -18,17 +18,17 @@ div.v-button-down {
        -moz-border-radius: 2px;
        }
 
-div.v-button-down .v-button-wrap {
+div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap {
        background-image: url(../../img/grad-dark-top2.png);
        }
 
-.v-button {
+.#{$primaryStyleName} {
        overflow: hidden;
        }
 
-.v-button,
-.v-disabled.v-button:focus,
-.v-disabled.v-button:active {
+.#{$primaryStyleName},
+.v-disabled.#{$primaryStyleName}:focus,
+.v-disabled.#{$primaryStyleName}:active {
        border: 1px solid #8b8b8b;
        background: #c9c9c9;
        border-radius: 3px;
@@ -41,8 +41,8 @@ div.v-button-down .v-button-wrap {
        padding: 0;
        }
 
-.v-button-wrap,
-.v-disabled:active .v-button-wrap {
+.#{$primaryStyleName}-wrap,
+.v-disabled:active .#{$primaryStyleName}-wrap {
        display: block;
        padding: 4px 13px;
        border: none;
@@ -55,22 +55,22 @@ div.v-button-down .v-button-wrap {
        -ms-text-overflow: ellipsis;
        }
 
-.v-sa & .v-button,
-.v-sa & .v-button-wrap,
-.v-ff & .v-button,
-.v-ff & .v-button-wrap {
+.v-sa & .#{$primaryStyleName},
+.v-sa & .#{$primaryStyleName}-wrap,
+.v-ff & .#{$primaryStyleName},
+.v-ff & .#{$primaryStyleName}-wrap {
        overflow: hidden;
        }
        
-.v-button:focus {
+.#{$primaryStyleName}:focus {
        outline: none;
        }
 
-.v-button .v-icon {
+.#{$primaryStyleName} .v-icon {
        margin-left: -0.5em;
        }
 
-.v-button .v-button-caption {
+.#{$primaryStyleName} .#{$primaryStyleName}-caption {
        line-height: 1.26;
        }
 
@@ -78,7 +78,7 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-button-big {
+.#{$primaryStyleName}-big {
        font-size: 1.2em;
        }
 
@@ -86,22 +86,22 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-button-small {
+.#{$primaryStyleName}-small {
        font-size: 0.85em;
        font-weight: normal;
        }
 
-.v-button-small .v-button-wrap {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap {
        padding: 3px 11px;
        }
 
-.v-button-small:active .v-button-wrap,
-.v-ie8 & .v-button-small.v-pressed .v-button-wrap,
-.v-button-down.small .v-button-wrap {
+.#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap,
+.v-ie8 & .#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-down.small .#{$primaryStyleName}-wrap {
        padding: 2px 10px;
        }
 
-.v-button-small .v-icon {
+.#{$primaryStyleName}-small .v-icon {
        margin-top: -4px;
        margin-bottom: -4px;
        }
@@ -110,13 +110,13 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Wide
  ******************************************************************************/
-.v-button-wide .v-button-wrap {
+.#{$primaryStyleName}-wide .#{$primaryStyleName}-wrap {
        padding-left: 26px;
        padding-right: 26px;
        }
 
-.v-button-wide:active .v-button-wrap,
-.v-ie8 & .v-button-wide.v-pressed .v-button-wrap {
+.#{$primaryStyleName}-wide:active .#{$primaryStyleName}-wrap,
+.v-ie8 & .#{$primaryStyleName}-wide.v-pressed .#{$primaryStyleName}-wrap {
        padding-left: 25px;
        padding-right: 25px;
        }
@@ -125,13 +125,13 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Tall
  ******************************************************************************/
-.v-button-tall .v-button-wrap {
+.#{$primaryStyleName}-tall .#{$primaryStyleName}-wrap {
        padding-top: 13px;
        padding-bottom: 13px;
        }
 
-.v-button-tall:active .v-button-wrap,
-.v-ie8 & .v-button-tall.v-pressed .v-button-wrap {
+.#{$primaryStyleName}-tall:active .#{$primaryStyleName}-wrap,
+.v-ie8 & .#{$primaryStyleName}-tall.v-pressed .#{$primaryStyleName}-wrap {
        padding-top: 12px;
        padding-bottom: 12px;
        }
@@ -140,8 +140,8 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Default
  ******************************************************************************/
-.v-button-default,
-.v-disabled.v-button-default:focus {
+.#{$primaryStyleName}-default,
+.v-disabled.#{$primaryStyleName}-default:focus {
        font-weight: bold;
        }
 
@@ -149,18 +149,18 @@ div.v-button-down .v-button-wrap {
 /*******************************************************************************
  * Link & borderless
  ******************************************************************************/
-div.v-button-link,
-div.v-button-link:focus,
-.v-button-link:active,
-div.v-disabled.v-button-link,
-div.v-disabled.v-button-link:focus,
-body.v-ie & .v-pressed.v-button-link,
-div.v-button-borderless,
-div.v-button-borderless:focus,
-.v-button-borderless:active,
-div.v-disabled.v-button-borderless,
-div.v-disabled.v-button-borderless:focus,
-body.v-ie & .v-pressed.v-button-borderless {
+div.#{$primaryStyleName}-link,
+div.#{$primaryStyleName}-link:focus,
+.#{$primaryStyleName}-link:active,
+div.v-disabled.#{$primaryStyleName}-link,
+div.v-disabled.#{$primaryStyleName}-link:focus,
+body.v-ie & .v-pressed.#{$primaryStyleName}-link,
+div.#{$primaryStyleName}-borderless,
+div.#{$primaryStyleName}-borderless:focus,
+.#{$primaryStyleName}-borderless:active,
+div.v-disabled.#{$primaryStyleName}-borderless,
+div.v-disabled.#{$primaryStyleName}-borderless:focus,
+body.v-ie & .v-pressed.#{$primaryStyleName}-borderless {
        background: transparent;
        font-weight: normal;
        text-shadow: none;
@@ -170,23 +170,23 @@ body.v-ie & .v-pressed.v-button-borderless {
        -moz-box-shadow: none;
        }
 
-.v-button-link .v-button-wrap,
-.v-button-borderless .v-button-wrap {
+.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wrap {
        display: inline;
        }
 
-div.v-button-link .v-button-wrap,
-div.v-button-link:focus .v-button-wrap,
-.v-button-link:active .v-button-wrap,
-div.v-disabled.v-button-link .v-button-wrap,
-div.v-disabled.v-button-link:focus .v-button-wrap,
-body.v-ie & .v-pressed.v-button-link .v-button-wrap,
-div.v-button-borderless .v-button-wrap,
-div.v-button-borderless:focus .v-button-wrap,
-.v-button-borderless:active .v-button-wrap,
-div.v-disabled.v-button-borderless .v-button-wrap,
-div.v-disabled.v-button-borderless:focus .v-button-wrap,
-body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
+div.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+div.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-link:active .#{$primaryStyleName}-wrap,
+div.v-disabled.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+div.v-disabled.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap,
+body.v-ie & .v-pressed.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap,
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wrap,
+div.#{$primaryStyleName}-borderless:focus .#{$primaryStyleName}-wrap,
+.#{$primaryStyleName}-borderless:active .#{$primaryStyleName}-wrap,
+div.v-disabled.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wrap,
+div.v-disabled.#{$primaryStyleName}-borderless:focus .#{$primaryStyleName}-wrap,
+body.v-ie & .v-pressed.#{$primaryStyleName}-borderless .#{$primaryStyleName}-wrap {
        background: transparent;
        font-weight: normal;
        text-shadow: none;
@@ -196,24 +196,24 @@ body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
        -moz-box-shadow: none;
        }
 
-.v-button-link:focus .v-button-caption,
-.v-button-borderless:focus .v-button-caption {
+.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-borderless:focus .#{$primaryStyleName}-caption {
        border: 1px dotted gray;
        margin: -1px;
        }
 
-.v-button-link:active .v-button-caption,
-.v-button-borderless:active .v-button-caption {
+.#{$primaryStyleName}-link:active .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-borderless:active .#{$primaryStyleName}-caption {
        border: none;
        margin: 0;
        }
 
-.v-button-borderless:active .v-icon {
+.#{$primaryStyleName}-borderless:active .v-icon {
        opacity: .6;
        }
 
-.v-button-link .v-icon,
-.v-button-borderless .v-icon {
+.#{$primaryStyleName}-link .v-icon,
+.#{$primaryStyleName}-borderless .v-icon {
        margin-left: 0;
        }
 
@@ -221,18 +221,18 @@ body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
 /*******************************************************************************
  * Icon-on-top
  ******************************************************************************/
-.v-button-icon-on-top.v-button-borderless:focus .v-button-caption {
+.#{$primaryStyleName}-icon-on-top.#{$primaryStyleName}-borderless:focus .#{$primaryStyleName}-caption {
        margin-top: 1px;
        }
 
-.v-button-icon-on-top .v-button-caption,
-.v-button-icon-on-top:focus .v-button-caption,
-.v-button-icon-on-top.v-button-borderless:active .v-button-caption {
+.#{$primaryStyleName}-icon-on-top .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-icon-on-top:focus .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-icon-on-top.#{$primaryStyleName}-borderless:active .#{$primaryStyleName}-caption {
        display: block;
        margin-top: 2px;
        }
 
-.v-button-icon-on-top .v-icon {
+.#{$primaryStyleName}-icon-on-top .v-icon {
        margin: 0;
        }
 
@@ -240,7 +240,7 @@ body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
 /*******************************************************************************
  * Icon-on-right
  ******************************************************************************/
-.v-button-icon-on-right .v-icon {
+.#{$primaryStyleName}-icon-on-right .v-icon {
        float: right;
        margin-left: 3px;
        margin-right: -0.5em;
@@ -250,11 +250,11 @@ body.v-ie & .v-pressed.v-button-borderless .v-button-wrap {
 /*******************************************************************************
  * Icon-only
  ******************************************************************************/
-.v-button-icon-only .v-button-caption {
+.#{$primaryStyleName}-icon-only .#{$primaryStyleName}-caption {
        display: none;
        }
 
-.v-button-icon-only .v-icon {
+.#{$primaryStyleName}-icon-only .v-icon {
        margin-right: -.5em;
        }
 

diff --git a/WebContent/VAADIN/themes/chameleon/components/label/label.scss b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
index a1c75ad2f1d4dc2819c573635ebb8c99a533f0a2..5952ee2802ee44bd568707ab28103dce07b14504 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/label/label.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/label/label.scss
@@ -1,40 +1,40 @@
-@mixin chameleon-label {
+@mixin chameleon-label($primaryStyleName : v-label) {
 
 /*******************************************************************************
  * Different headers
  ******************************************************************************/
-.v-label-h1,
-.v-label h1,
-.v-label-h2,
-.v-label h2,
-.v-label-h3,
-.v-label h3,
-.v-label-h4,
-.v-label h4 {
+.#{$primaryStyleName}-h1,
+.#{$primaryStyleName} h1,
+.#{$primaryStyleName}-h2,
+.#{$primaryStyleName} h2,
+.#{$primaryStyleName}-h3,
+.#{$primaryStyleName} h3,
+.#{$primaryStyleName}-h4,
+.#{$primaryStyleName} h4 {
        margin: 0;
        font-weight: bold;
        }
 
-.v-label-h1,
-.v-label h1 {
+.#{$primaryStyleName}-h1,
+.#{$primaryStyleName} h1 {
        padding: .75em 0 .5em 0;
        font-size: 1.85em;
        }
 
-.v-label-h2,
-.v-label h2 {
+.#{$primaryStyleName}-h2,
+.#{$primaryStyleName} h2 {
        padding: .67em 0 .33em 0;
        font-size: 1.4em;
        }
 
-.v-label-h3,
-.v-label h3 {
+.#{$primaryStyleName}-h3,
+.#{$primaryStyleName} h3 {
        margin: .71em 0 .29em 0;
        font-size: 1.1em;
        }
 
-.v-label-h4,
-.v-label h4 {
+.#{$primaryStyleName}-h4,
+.#{$primaryStyleName} h4 {
        padding: .23em 0;
        font-size: 1em;
        }
@@ -43,7 +43,7 @@
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-label-big {
+.#{$primaryStyleName}-big {
        font-size: 1.2em;
        }
 
@@ -51,7 +51,7 @@
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-label-small {
+.#{$primaryStyleName}-small {
        font-size: 0.9em;
        line-height: 1.3;
        opacity: .8;
@@ -62,7 +62,7 @@
 /*******************************************************************************
  * Tiny
  ******************************************************************************/
-.v-label-tiny {
+.#{$primaryStyleName}-tiny {
        font-size: 0.85em;
        line-height: 1.2;
        opacity: .7;
@@ -73,8 +73,8 @@
 /*******************************************************************************
  * Warning & error
  ******************************************************************************/
-&.v-app .v-label-warning,
-&.v-app .v-label-error {
+&.v-app .#{$primaryStyleName}-warning,
+&.v-app .#{$primaryStyleName}-error {
        color: #574734;
        background: #fffec8 url(../../img/label-warning-icon.png) no-repeat .2em 50%;
        white-space: nowrap;
@@ -87,7 +87,7 @@
        text-shadow: none;
        }
 
-&.v-app .v-label-error {
+&.v-app .#{$primaryStyleName}-error {
        color: #fff;
        font-weight: bold;
        background: #c22f24 url(../../img/label-error-icon.png) no-repeat .2em 50%;
@@ -98,14 +98,14 @@
 /*******************************************************************************
  * Big warning & big error
  ******************************************************************************/
-.v-label-big.v-label-warning,
-.v-label-big.v-label-error {
+.#{$primaryStyleName}-big.#{$primaryStyleName}-warning,
+.#{$primaryStyleName}-big.#{$primaryStyleName}-error {
        background-image: url(../../img/label-warning-icon-big.png);
        background-position: 0 50%;
        padding: .5em 1em .5em 3em;
        }
 
-.v-label-big.v-label-error {
+.#{$primaryStyleName}-big.#{$primaryStyleName}-error {
        background-image: url(../../img/label-error-icon-big.png);
        }
 
@@ -113,7 +113,7 @@
 /*******************************************************************************
  * Loading
  ******************************************************************************/
-&.v-app .v-label-loading {
+&.v-app .#{$primaryStyleName}-loading {
        height: 32px;
        line-height: 32px;
        background-image: url(../../../base/common/img/loading-indicator.gif);

diff --git a/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss b/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
index 55ade4c06066445348721f60b16ffadae610701e..b2cba85067e88590ec8ea474be7a050c0fec5191 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/menubar/menubar.scss
@@ -1,26 +1,26 @@
-@mixin chameleon-menubar {
+@mixin chameleon-menubar($primaryStyleName : v-menubar) {
 
-.v-menubar {
+.#{$primaryStyleName} {
        padding: 0 .4em;
        background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
        border: 1px solid #b3b3b3;
        border-width: 1px 0;
        }
 
-.v-menubar .v-menubar-menuitem {
+.#{$primaryStyleName} .#{$primaryStyleName}-menuitem {
        padding: .2em .5em;
        line-height: normal;
        }
 
-.v-menubar-submenu .v-menubar-menuitem {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem {
        padding-right:1.5em;
        }
 
-.v-menubar-submenu .v-menubar-submenu-indicator {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator {
        margin-top: .1em;
        }
 
-.v-menubar-submenu .v-menubar-menuitem-selected {
+.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected {
        background-image: url(../../img/grad-light-top2.png);
        background-position: 0 -1px;
        }

diff --git a/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
index 020c29ed09f83e4d32dfd819f6272fa2be64dcda..1218b476f5f250aff9e8c1daf816ac00ee6c451a 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/notification/notification.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-notification {
+@mixin chameleon-notification($primaryStyleName : v-Notification) {
 
-div.v-Notification {
+div.#{$primaryStyleName} {
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
@@ -10,34 +10,34 @@ div.v-Notification {
        box-shadow: 0 2px 5px rgba(0,0,0,.7);
        }
 
-.v-Notification p {
+.#{$primaryStyleName} p {
        line-height: 1.3;
        }
 
-div.v-Notification-warning {
+div.#{$primaryStyleName}-warning {
        background-color: #fffec8;
        color: #574734;
        border: 2px solid #fee3af;
        }
 
-div.v-Notification-warning h1 {
+div.#{$primaryStyleName}-warning h1 {
        padding-left: 44px;
        background: transparent url(../../img/label-warning-icon-big.png) no-repeat 0 50%;
        }
 
-div.v-Notification-error {
+div.#{$primaryStyleName}-error {
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.3);
        background: #c22f24 url(../../img/error-close.png) no-repeat right top;
        border: 2px solid #ca3030;
        }
 
-div.v-Notification-error h1 {
+div.#{$primaryStyleName}-error h1 {
        padding-left: 44px;
        background: transparent url(../../img/label-error-icon-big.png) no-repeat 0 50%;
        }
 
-div.v-Notification-tray {
+div.#{$primaryStyleName}-tray {
        color: #fff;
        margin: 0 5px 5px 0;
        background: #3b3b3b url(../../img/grad-light-top2.png) repeat-x;
@@ -49,17 +49,17 @@ div.v-Notification-tray {
        text-shadow: 0 1px 1px rgba(0,0,0,.5);
        }
 
-.v-Notification-tray h1 {
+.#{$primaryStyleName}-tray h1 {
        font-size: 14px;
        line-height: 18px;
        }
 
-.v-Notification-tray p {
+.#{$primaryStyleName}-tray p {
        font-size: 12px;
        font-weight: normal;
        }
 
-div.v-Notification-system {
+div.#{$primaryStyleName}-system {
        color: #fff;
        border: none;
        background-color: #b40000;

diff --git a/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss b/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
index 88b3d7b8049952609db48f8007bc647a9029beaa..bc6a8f555c27c2d4fe7cfa5b8b267573479e50b5 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/panel/panel.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-panel {
+@mixin chameleon-panel($primaryStyleName : v-panel) {
 
-.v-panel-caption {
+.#{$primaryStyleName}-caption {
        background: #b9dcff;
        font-size: 1.2em;
        border: 1px solid #b3b3b3;
@@ -8,21 +8,21 @@
        padding: .2em .6em;
        }
 
-.v-panel-nocaption {
+.#{$primaryStyleName}-nocaption {
        padding: 0;
        height: 0;
        overflow: hidden;
        border-top: 1px solid #b3b3b3;
        }
 
-.v-panel-content {
+.#{$primaryStyleName}-content {
        background: #fff;
        border: 1px solid #b3b3b3;
        border-top: none;
        border-bottom: none;
        }
 
-.v-panel-deco {
+.#{$primaryStyleName}-deco {
        height: 0;
        overflow: hidden;
        border-top: 1px solid #b3b3b3;
@@ -32,13 +32,13 @@
 /*******************************************************************************
  * Borderless
  ******************************************************************************/
-div.v-panel-caption-borderless {
+div.#{$primaryStyleName}-caption-borderless {
        border: none;
        }
 
-div.v-panel-nocaption-borderless,
-div.v-panel-content-borderless,
-div.v-panel-deco-borderless {
+div.#{$primaryStyleName}-nocaption-borderless,
+div.#{$primaryStyleName}-content-borderless,
+div.#{$primaryStyleName}-deco-borderless {
        border: none;
        background: transparent;
        }
@@ -47,13 +47,13 @@ div.v-panel-deco-borderless {
 /*******************************************************************************
  * Light
  ******************************************************************************/
-.v-panel-light .v-panel-caption-light {
+.#{$primaryStyleName}-light .#{$primaryStyleName}-caption-light {
        background: transparent;
        font-weight: normal;
        border-bottom: 1px solid #b3b3b3;
        }
 
-div.v-panel-content-light {
+div.#{$primaryStyleName}-content-light {
        background: transparent;
        }
 
@@ -61,7 +61,7 @@ div.v-panel-content-light {
 /*******************************************************************************
  * Bubble
  ******************************************************************************/
-.v-panel-bubble .v-panel-captionwrap {
+.#{$primaryStyleName}-bubble .#{$primaryStyleName}-captionwrap {
        border: 1px solid #b3b3b3;
        border-bottom: none;
        background: #fff;
@@ -73,7 +73,7 @@ div.v-panel-content-light {
        overflow: hidden;
        }
 
-.v-panel-bubble .v-panel-caption-bubble {
+.#{$primaryStyleName}-bubble .#{$primaryStyleName}-caption-bubble {
        border: none;
        background-image: url(../../img/grad-light-top.png);
        background-repeat: repeat-x;
@@ -89,13 +89,13 @@ div.v-panel-content-light {
        padding: .3em .6em;
        }
 
-.v-panel-nocaption-bubble {
+.#{$primaryStyleName}-nocaption-bubble {
        padding: 0;
        margin: 0;
        border: none;
        }
 
-.v-panel-deco-bubble {
+.#{$primaryStyleName}-deco-bubble {
        height: 2px;
        border: 1px solid #b3b3b3;
        border-top: none;
@@ -110,14 +110,14 @@ div.v-panel-content-light {
 /*******************************************************************************
  * Borderless Bubble
  ******************************************************************************/
-div.v-panel-borderless .v-panel-captionwrap,
-div.v-panel-borderless .v-panel-deco-bubble {
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-captionwrap,
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-deco-bubble {
        border: none;
        padding: 0;
        background: transparent;
        }
 
-div.v-panel-borderless .v-panel-content-bubble {
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-content-bubble {
        background: transparent;
        }
 

diff --git a/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss b/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
index 88e13cb46de451814f7b38890f6ddd65eb6eb3c2..978ca563919dce0c2706af21a112f564acdfd7b7 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/popupview/popupview.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-popupview {
+@mixin chameleon-popupview($primaryStyleName : v-popupview)  {
 
-.v-popupview-popup {
+.#{$primaryStyleName}-popup {
        padding: .3em .4em;
        }
 

diff --git a/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
index 6bacf31e3ebb2eb1c0035e0c1bfe90b1b8dca0d1..56eb2cc6c91a2f4ac19f3b42e1932c3398993d1d 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/progressindicator/progressindicator.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-progressindicator {
+@mixin chameleon-progressindicator($primaryStyleName : v-progressindicator) {
 
-.v-progressindicator-wrapper {
+.#{$primaryStyleName}-wrapper {
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
@@ -10,7 +10,7 @@
        line-height: 1px;
        }
 
-.v-progressindicator-indicator {
+.#{$primaryStyleName}-indicator {
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
@@ -24,12 +24,12 @@
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-progressindicator-small {
+.#{$primaryStyleName}-small {
        width: 110px;
        }
 
-.v-progressindicator-small .v-progressindicator-wrapper,
-.v-progressindicator-small .v-progressindicator-indicator {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-wrapper,
+.#{$primaryStyleName}-small .#{$primaryStyleName}-indicator {
        height: 2px;
        border-radius: 1px;
        -webkit-border-radius: 1px;
@@ -40,12 +40,12 @@
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-progressindicator-big {
+.#{$primaryStyleName}-big {
        width: 250px;
        }
 
-.v-progressindicator-big .v-progressindicator-wrapper,
-.v-progressindicator-big .v-progressindicator-indicator {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-wrapper,
+.#{$primaryStyleName}-big .#{$primaryStyleName}-indicator {
        height: 14px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
@@ -56,17 +56,17 @@
 /*******************************************************************************
  * Indeterminates
  ******************************************************************************/
-.v-progressindicator-indeterminate.v-progressindicator-big {
+.#{$primaryStyleName}-indeterminate.#{$primaryStyleName}-big {
        width: 42px;
        height: 42px;
        background: #fff url(../../../base/common/img/ajax-loader-big.gif) no-repeat 50%;
        }
 
-.v-progressindicator-indeterminate.v-disabled {
+.#{$primaryStyleName}-indeterminate.v-disabled {
        display: none;
        }
 
-.v-progressindicator-indeterminate.v-progressindicator-bar {
+.#{$primaryStyleName}-indeterminate.#{$primaryStyleName}-bar {
        display: block;
        width: 150px;
        height: 9px;
@@ -75,17 +75,17 @@
        -moz-border-radius: 2px;
        }
 
-.v-progressindicator-indeterminate.bar.v-progressindicator-small {
+.#{$primaryStyleName}-indeterminate.bar.#{$primaryStyleName}-small {
        width: 110px;
        height: 4px;
        }
 
-.v-progressindicator-indeterminate.bar.v-progressindicator-big {
+.#{$primaryStyleName}-indeterminate.bar.#{$primaryStyleName}-big {
        width: 200px;
        height: 16px;
        }
 
-.v-progressindicator-indeterminate.bar .v-progressindicator-wrapper {
+.#{$primaryStyleName}-indeterminate.bar .#{$primaryStyleName}-wrapper {
        display: block;
        background: #fff url(../../img/indeterminate-progress.gif);
        border-radius: 3px;
@@ -94,7 +94,7 @@
        overflow: hidden;
        }
 
-.v-progressindicator-indeterminate.bar .v-progressindicator-indicator {
+.#{$primaryStyleName}-indeterminate.bar .#{$primaryStyleName}-indicator {
        display: block;
        background: transparent url(../../img/grad-light-top.png) repeat-x;
        border: none;
@@ -105,11 +105,11 @@
        overflow: hidden;
        }
 
-.v-progressindicator-indeterminate.bar.v-progressindicator-small .v-progressindicator-indicator {
+.#{$primaryStyleName}-indeterminate.bar.#{$primaryStyleName}-small .#{$primaryStyleName}-indicator {
        background: transparent;
        }
 
-.v-progressindicator-indeterminate.bar.v-disabled .v-progressindicator-indicator {
+.#{$primaryStyleName}-indeterminate.bar.v-disabled .#{$primaryStyleName}-indicator {
        background: #fff;
        }
 

diff --git a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
index bc0d75e35ba0d9f2faecd516b639e3b694e35b38..7810e818bf758aa350295d4b42d1595687fffef1 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss
@@ -1,10 +1,10 @@
-@mixin chameleon-selects {
+@mixin chameleon-selects($primaryStyleName : v-filterselect) {
 
-.v-filterselect {
+.#{$primaryStyleName} {
        overflow: hidden;
        }
 
-&.v-app input.v-filterselect-input {
+&.v-app input.#{$primaryStyleName}-input {
        margin: 0;
        padding: 0;
        border: none;
@@ -12,72 +12,72 @@
        line-height: normal;
        }
 
-&.v-app input.v-filterselect-input[type=text] {
+&.v-app input.#{$primaryStyleName}-input[type=text] {
        padding: 0;
        }
 
-.v-filterselect-focus .v-filterselect-input,
-.v-filterselect .v-filterselect-input:focus {
+.#{$primaryStyleName}-focus .#{$primaryStyleName}-input,
+.#{$primaryStyleName} .#{$primaryStyleName}-input:focus {
        outline: none;
        }
 
-.v-filterselect-big.v-filterselect-search {
+.#{$primaryStyleName}-big.#{$primaryStyleName}-search {
        padding-left: 22px;
        }
 
-.v-filterselect-button {
+.#{$primaryStyleName}-button {
        width: 16px;
        height: 1.2em;
        background-position: -5px -11px;
        opacity: .4;
        }
 
-.v-filterselect-button:hover {
+.#{$primaryStyleName}-button:hover {
        opacity: .7;
        }
 
-.v-filterselect-button:active {
+.#{$primaryStyleName}-button:active {
        opacity: 1;
        }
 
-.v-filterselect-small .v-filterselect-button {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-button {
        height: 0.95em;
        background-position: -5px -12px;
        }
 
-.v-filterselect-suggestpopup {
+.#{$primaryStyleName}-suggestpopup {
        margin-top: .4em;
        }
-.v-filterselect-suggestmenu tr {
+.#{$primaryStyleName}-suggestmenu tr {
     line-height:1.4em;
 }      
 
-&.v-app .v-filterselect-suggestpopup-small td {
+&.v-app .#{$primaryStyleName}-suggestpopup-small td {
        font-size: .85em;
        }
 
-&.v-app .v-filterselect-suggestpopup-big td {
+&.v-app .#{$primaryStyleName}-suggestpopup-big td {
        font-size: 1.1em;
        }
 
-.v-filterselect-big .v-filterselect-button {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-button {
        height: 1.4em;
        background-position: -5px -9px;
        }
 
-.v-filterselect-search .v-filterselect-button {
+.#{$primaryStyleName}-search .#{$primaryStyleName}-button {
        width: 0;
        overflow: hidden;
        }
 
-.v-filterselect-prompt .v-filterselect-input {
+.#{$primaryStyleName}-prompt .#{$primaryStyleName}-input {
        font-style: normal;
        }
 
-.v-filterselect-prevpage-off,
-.v-filterselect-nextpage-off,
-.v-filterselect-prevpage,
-.v-filterselect-nextpage {
+.#{$primaryStyleName}-prevpage-off,
+.#{$primaryStyleName}-nextpage-off,
+.#{$primaryStyleName}-prevpage,
+.#{$primaryStyleName}-nextpage {
        border-style: solid;
        border-width: 1px 0;
        border-color: #b3b3b3;
@@ -89,29 +89,29 @@
        -ms-user-select: none;
        }
 
-.v-filterselect-prevpage:active,
-.v-filterselect-nextpage:active {
+.#{$primaryStyleName}-prevpage:active,
+.#{$primaryStyleName}-nextpage:active {
        // TODO check - was missing a part of the rule
        background-image: #c9c9c9 url(../../img/grad-dark-bottom2.png);
        background-position: left bottom;
        }
 
-.v-filterselect-prevpage-off span,
-.v-filterselect-nextpage-off span,
-.v-filterselect-prevpage span,
-.v-filterselect-nextpage span {
+.#{$primaryStyleName}-prevpage-off span,
+.#{$primaryStyleName}-nextpage-off span,
+.#{$primaryStyleName}-prevpage span,
+.#{$primaryStyleName}-nextpage span {
        display: block;
        text-indent: -9999px;
        height: 12px;
        background: transparent url(../../../base/common/img/sprites.png) no-repeat 50% 3px;
        }
 
-.v-filterselect-nextpage-off span,
-.v-filterselect-nextpage span {
+.#{$primaryStyleName}-nextpage-off span,
+.#{$primaryStyleName}-nextpage span {
        background-position: 50% -12px;
        }
 
-.v-filterselect-status {
+.#{$primaryStyleName}-status {
        font-size: .85em;
        margin: 1px 0 -3px;
        user-select: none;
@@ -120,16 +120,16 @@
        -ms-user-select: none;
        }
 
-.v-filterselect-suggestmenu .gwt-menuItem-selected {
+.#{$primaryStyleName}-suggestmenu .gwt-menuItem-selected {
        background-image: url(../../img/grad-light-top2.png);
        background-position: 0 -1px;
        }
 
-.v-filterselect-suggestpopup-small .v-filterselect-status {
+.#{$primaryStyleName}-suggestpopup-small .#{$primaryStyleName}-status {
        font-size: .8em;
        }
 
-.v-filterselect-suggestpopup-big .v-filterselect-status {
+.#{$primaryStyleName}-suggestpopup-big .#{$primaryStyleName}-status {
        font-size: .9em;
        }
 
@@ -145,13 +145,13 @@
 /*******************************************************************************
  * Non-editable combobox (i.e. themable select)
  ******************************************************************************/
-.v-filterselect-select-button {
+.#{$primaryStyleName}-select-button {
        background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
        position: relative;
        padding: .3em .5em;
        }
 
-.v-filterselect-select-button .v-filterselect-input {
+.#{$primaryStyleName}-select-button .#{$primaryStyleName}-input {
        display: block;
        width: 100% !important;
        user-select: none;
@@ -159,7 +159,7 @@
        -webkit-user-select: none;
        }
 
-.v-filterselect-select-button .v-filterselect-button {
+.#{$primaryStyleName}-select-button .#{$primaryStyleName}-button {
        position: absolute;
        width: 100%;
        top: 0;

diff --git a/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss b/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
index bef69b34727ad3d45fd66a58fc15fee64d7fb611..30c5eb85cb778954015c808379fdf0ca34646593 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/slider/slider.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-slider {
+@mixin chameleon-slider($primaryStyleName : v-slider) {
 
-.v-slider {
+.#{$primaryStyleName} {
        border-top: 1px solid #9a9c9e;
        border-bottom: 1px solid #bdbfc1;
        margin: 3px 0;
@@ -9,7 +9,7 @@
        -moz-border-radius: 3px;
        }
 
-.v-slider-base {
+.#{$primaryStyleName}-base {
        height: 4px;
        background: #e0e2e2 url(../../img/grad-dark-top2.png) repeat-x;
        border-top: 1px solid #adb0b1;
@@ -20,7 +20,7 @@
        -moz-border-radius: 2px;
        }
 
-.v-slider-handle {
+.#{$primaryStyleName}-handle {
        background: #c9c9c9 url(../../img/grad-dark-bottom2.png) repeat-x left bottom;
        border: 1px solid #b3b3b3;
        width: 10px;
@@ -34,23 +34,23 @@
        cursor: pointer;
        }
 
-.v-slider-handle-active {
+.#{$primaryStyleName}-handle-active {
        background-color: #afafaf;
        }
 
-.v-slider-vertical {
+.#{$primaryStyleName}-vertical {
        width: auto;
        margin: 0 4px;
        border-width: 0 1px;
        }
 
-.v-slider-vertical .v-slider-base {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base {
        background-image: none;
        width: 4px;
        border-width: 1px 1px 0;
        }
 
-.v-slider-vertical .v-slider-handle {
+.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle {
        width: 10px;
        height: 10px;
        margin: 0;

diff --git a/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
index e2bcf0a909ee56e1744fa2c7ae5c39c503f3ccf8..2496be65136838e371583cbc7ffd4380465296bd 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/splitpanel/splitpanel.scss
@@ -1,21 +1,21 @@
-@mixin chameleon-splitpanel {
+@mixin chameleon-splitpanel($primaryStyleName : v-splitpanel) {
 
-.v-splitpanel-hsplitter div,
-.v-splitpanel-vsplitter div {
+.#{$primaryStyleName}-hsplitter div,
+.#{$primaryStyleName}-vsplitter div {
        background: transparent url(../../img/split-handle.png) no-repeat 2px 50%;
        margin: 0 -1px;
        width: 9px;
        }
 
-.v-splitpanel-vsplitter div {
+.#{$primaryStyleName}-vsplitter div {
        background-position: 50% 2px;
        margin: -1px 0;
        width: auto;
        height: 9px;
        }
 
-.v-splitpanel-hsplitter,
-.v-splitpanel-hsplitter-locked {
+.#{$primaryStyleName}-hsplitter,
+.#{$primaryStyleName}-hsplitter-locked {
        border-style: solid;
        border-width: 0 1px;
        border-color: #b0b0b0;
@@ -23,8 +23,8 @@
        background: #b3b3b3 url(../../img/grad-light-left.png) repeat-y;
        }
 
-.v-splitpanel-vsplitter,
-.v-splitpanel-vsplitter-locked {
+.#{$primaryStyleName}-vsplitter,
+.#{$primaryStyleName}-vsplitter-locked {
        border-style: solid;
        border-width: 1px 0;
        border-color: #b0b0b0;
@@ -35,15 +35,15 @@
 /*******************************************************************************
  * Small
  ******************************************************************************/
-&.v-app .v-splitpanel-hsplitter-small,
-&.v-app .v-splitpanel-hsplitter-small-locked {
+&.v-app .#{$primaryStyleName}-hsplitter-small,
+&.v-app .#{$primaryStyleName}-hsplitter-small-locked {
        width: 1px;
        border: none;
        background-image: none;
        }
 
-&.v-app .v-splitpanel-vsplitter-small,
-&.v-app .v-splitpanel-vsplitter-small-locked {
+&.v-app .#{$primaryStyleName}-vsplitter-small,
+&.v-app .#{$primaryStyleName}-vsplitter-small-locked {
        height: 1px;
        border: none;
        background-image: none;
@@ -51,13 +51,13 @@
        line-height: 1px;
        }
 
-.v-splitpanel-hsplitter-small div {
+.#{$primaryStyleName}-hsplitter-small div {
        width: 7px;
        margin-left: -2px;
        background: transparent;
        }
 
-.v-splitpanel-vsplitter-small div {
+.#{$primaryStyleName}-vsplitter-small div {
        height: 7px;
        margin-top: -2px;
        background: transparent;

diff --git a/WebContent/VAADIN/themes/chameleon/components/table/table.scss b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
index 8ecc1878ae7404f2d1de57fc1d24683fabe4377d..9a90222c869df1a0357ae9fb10dd50b43a7df58f 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/table/table.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/table/table.scss
@@ -1,31 +1,31 @@
-@mixin chameleon-table {
+@mixin chameleon-table($primaryStyleName : v-table) {
 
-.v-table-header-wrap,
-.v-table-header-drag {
+.#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-header-drag {
        background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x;
        height: 1.4em;
        line-height: normal;
        }
 
-.v-table-caption-container,
-.v-table-header-drag {
+.#{$primaryStyleName}-caption-container,
+.#{$primaryStyleName}-header-drag {
        padding-top: .2em;
        padding-right: 4px;
        }
 
-.v-table-header-drag {
+.#{$primaryStyleName}-header-drag {
        padding-left: .3em;
        }
 
-.v-table-resizer {
+.#{$primaryStyleName}-resizer {
        background: transparent;
        border-right: 1px solid #b3b3b3;
        padding-left: 1px;
        height: 1.4em;
        }
 
-/* Targets the same element as .v-table-resizer */
-div.v-table-focus-slot-left {
+/* Targets the same element as .#{$primaryStyleName}-resizer */
+div.#{$primaryStyleName}-focus-slot-left {
        background: transparent;
        border-left: 2px solid #b3b3b3;
        border-right: none;
@@ -35,42 +35,42 @@ div.v-table-focus-slot-left {
        margin: 0;
        }
 
-.v-table-row,
-.v-table-row-odd {
+.#{$primaryStyleName}-row,
+.#{$primaryStyleName}-row-odd {
        background: transparent;
        }
 
-.v-table-generated-row {
+.#{$primaryStyleName}-generated-row {
     background: #c9c9c9;
     }
 
-.v-table tr.v-selected {
+.#{$primaryStyleName} tr.v-selected {
        background-image: url(../../img/grad-light-top2.png);
        background-position: 0 -1px;
        }
 
-div.v-table-focus-slot-right {
+div.#{$primaryStyleName}-focus-slot-right {
        background: transparent;
        border-right: 2px solid #b3b3b3;
        padding-left: 0;
        margin: 0;
        }
 
-.v-table-column-selector {
+.#{$primaryStyleName}-column-selector {
        margin-top: -1.35em;
        }
 
-.v-table-cell-content {
+.#{$primaryStyleName}-cell-content {
        border-right: none;
        padding-right: 7px;
        }
        
-.v-table-caption-container .v-icon {
+.#{$primaryStyleName}-caption-container .v-icon {
        vertical-align: middle;
        margin: -0.37em 2px 0 0;
        }
 
-.v-table-header-drag .v-icon {
+.#{$primaryStyleName}-header-drag .v-icon {
        vertical-align: middle;
        }
 
@@ -91,7 +91,7 @@ div.v-table-focus-slot-right {
        background-image: url(../../icons/bullet-white.png);
        }
 
-.v-table-scrollposition {
+.#{$primaryStyleName}-scrollposition {
        font-size: 0.9em;
        opacity: .85;
        filter: alpha(opacity=85);
@@ -100,17 +100,17 @@ div.v-table-focus-slot-right {
 /*******************************************************************************
  * Small
  ******************************************************************************/
-.v-table-small .v-table-caption-container,
-.v-table-small .v-table-body {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-caption-container,
+.#{$primaryStyleName}-small .#{$primaryStyleName}-body {
        font-size: 0.85em;
        }
 
-.v-table-small .v-table-resizer, 
-.v-table-small .v-table-header-wrap {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-resizer, 
+.#{$primaryStyleName}-small .#{$primaryStyleName}-header-wrap {
        height: 1.2em;
        }
 
-.v-table-small .v-table-column-selector {
+.#{$primaryStyleName}-small .#{$primaryStyleName}-column-selector {
        margin-top: -1.2em;
        }
 
@@ -118,28 +118,28 @@ div.v-table-focus-slot-right {
 /*******************************************************************************
  * Big
  ******************************************************************************/
-.v-table-big .v-table-caption-container,
-.v-table-big .v-table-body {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container,
+.#{$primaryStyleName}-big .#{$primaryStyleName}-body {
        font-size: 1.2em;
        }
 
-.v-table-big .v-table-caption-container {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container {
        padding-top: .3em;
        }
 
-.v-table-big .v-table-resizer, 
-.v-table-big .v-table-header-wrap {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-resizer, 
+.#{$primaryStyleName}-big .#{$primaryStyleName}-header-wrap {
        height: 1.8em;
        }
 
-.v-table-big .v-table-column-selector {
+.#{$primaryStyleName}-big .#{$primaryStyleName}-column-selector {
        margin-top: -1.5em;
        }
 
 /*******************************************************************************
  * Striped
  ******************************************************************************/
-.v-table-striped .v-table-row-odd {
+.#{$primaryStyleName}-striped .#{$primaryStyleName}-row-odd {
        background-color: #e6e6e6;
        }
 
@@ -147,7 +147,7 @@ div.v-table-focus-slot-right {
 /*******************************************************************************
  * Strong
  ******************************************************************************/
-.v-table-strong .v-table-caption-container {
+.#{$primaryStyleName}-strong .#{$primaryStyleName}-caption-container {
        font-weight: bold;
        }
 
@@ -155,12 +155,12 @@ div.v-table-focus-slot-right {
 /*******************************************************************************
  * Borderless
  ******************************************************************************/
-.v-table-borderless .v-table-header-wrap,
-.v-table-borderless .v-table-body {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap,
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body {
        border: none;
        }
 
-div.v-table-borderless .v-table-body {
+div.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body {
        background: transparent;
        }
 

diff --git a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
index 258df79922086a0517d90e685ecd21a314bde3c8..dfa1c51c3a2c16383423277d13e279fa813f413b 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/tabsheet/tabsheet.scss
@@ -1,23 +1,23 @@
-@mixin chameleon-tabsheet {
+@mixin chameleon-tabsheet($primaryStyleName : v-tabsheet) {
 
-.v-tabsheet-spacertd div {
+.#{$primaryStyleName}-spacertd div {
        border-color: #b3b3b3;
        border-left: none;
        }
 
-.v-tabsheet-tabitem {
+.#{$primaryStyleName}-tabitem {
        border: none;
        border-bottom: 1px solid #b3b3b3;
        padding: 0;
        }
 
-.v-tabsheet-tabitem .v-caption {
+.#{$primaryStyleName}-tabitem .v-caption {
        padding: .2em .8em;
        margin: 1px;
        margin-bottom: 0;
        }
 
-.v-tabsheet-tabitem-selected {
+.#{$primaryStyleName}-tabitem-selected {
        background-color: #c9c9c9;
        border: 1px solid #b3b3b3;
        border-bottom: none;
@@ -28,7 +28,7 @@
        overflow: hidden;
        }
 
-.v-tabsheet-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabitem-selected .v-caption {
        background: transparent url(../../img/grad-light-top.png) repeat-x;
        margin: 0;
        padding-bottom: .25em;
@@ -38,18 +38,18 @@
        -moz-border-radius-topright: 2px;
        }
 
-.v-tabsheet-content {
+.#{$primaryStyleName}-content {
        background: #fff;
        border-color: #b3b3b3;
        }
 
-.v-tabsheet-deco {
+.#{$primaryStyleName}-deco {
        height: 0;
        background: transparent;
        border-top: 1px solid #b3b3b3;
        }
 
-.v-tabsheet-caption-close {
+.#{$primaryStyleName}-caption-close {
        width: 14px;
        height: 15px;
        overflow: hidden;
@@ -60,18 +60,18 @@
        margin: .2em 0 0 0;
        }
 
-.v-tabsheet-caption-close:hover {
+.#{$primaryStyleName}-caption-close:hover {
        background-position: .5em -25px;
        }
 
-.v-tabsheet-caption-close:active {
+.#{$primaryStyleName}-caption-close:active {
        background-position: .5em -50px;
        }
 
 /*******************************************************************************
  * Scroller
  ******************************************************************************/
-.v-tabsheet-scroller {
+.#{$primaryStyleName}-scroller {
        height: 14px;
        margin-top: -1.6em;
        position: relative;
@@ -83,12 +83,12 @@
        -moz-border-radius: 6px;
        }
 
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerPrev-disabled:active,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$primaryStyleName}-scrollerPrev,
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled,
+.#{$primaryStyleName}-scrollerPrev-disabled:active,
+.#{$primaryStyleName}-scrollerNext-disabled:active {
        border: 1px solid #b3b3b3;
        border-width: 0;
        background: transparent url(../../img/tab-arrows.png) no-repeat 6px 50%;
@@ -99,34 +99,34 @@
        filter: alpha(opacity=50);
        }
 
-.v-tabsheet-scroller button::-moz-focus-inner {
+.#{$primaryStyleName}-scroller button::-moz-focus-inner {
        border: none;
        padding: 0;
        }
 
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$primaryStyleName}-scrollerNext,
+.#{$primaryStyleName}-scrollerNext-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled:active {
        background-position: -10px 50%;
        border-left-width: 1px;
        }
 
-.v-tabsheet-scrollerPrev:hover,
-.v-tabsheet-scrollerNext:hover {
+.#{$primaryStyleName}-scrollerPrev:hover,
+.#{$primaryStyleName}-scrollerNext:hover {
        opacity: .75;
        filter: alpha(opacity=75);
        }
 
-.v-tabsheet-scrollerPrev:active,
-.v-tabsheet-scrollerNext:active {
+.#{$primaryStyleName}-scrollerPrev:active,
+.#{$primaryStyleName}-scrollerNext:active {
        opacity: 1;
        filter: none;
        }
 
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerPrev-disabled:active,
-.v-tabsheet-scrollerNext-disabled:active {
+.#{$primaryStyleName}-scrollerPrev-disabled,
+.#{$primaryStyleName}-scrollerNext-disabled,
+.#{$primaryStyleName}-scrollerPrev-disabled:active,
+.#{$primaryStyleName}-scrollerNext-disabled:active {
        opacity: .1;
        filter: alpha(opacity=10);
        }
@@ -136,11 +136,11 @@
 /*******************************************************************************
  * open-only-closable
  ******************************************************************************/
-.v-tabsheet-open-only-closable .v-tabsheet-caption-close {
+.#{$primaryStyleName}-open-only-closable .#{$primaryStyleName}-caption-close {
        visibility: hidden;
        }
 
-.v-tabsheet-open-only-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+.#{$primaryStyleName}-open-only-closable .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close {
        visibility: visible;
        }
 
@@ -148,14 +148,14 @@
 /*******************************************************************************
  * Borderless
  ******************************************************************************/
-.v-tabsheet-borderless .v-tabsheet-content-borderless,
-.v-tabsheet-deco-borderless {
+.#{$primaryStyleName}-borderless .#{$primaryStyleName}-content-borderless,
+.#{$primaryStyleName}-deco-borderless {
        border: none;
        background: transparent;
        }
 
-.v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected,
-.v-tabsheet-tabs-borderless .v-tabsheet-tabitem-selected .v-caption {
+.#{$primaryStyleName}-tabs-borderless .#{$primaryStyleName}-tabitem-selected,
+.#{$primaryStyleName}-tabs-borderless .#{$primaryStyleName}-tabitem-selected .v-caption {
        background-color: transparent;
        }
 

diff --git a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
index 026a7e5bfeba43d84fa0567b8757506b36bceac2..860d91a6e72477dc14ef7d6b8674e4809f1a9248 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-textfield {
+@mixin chameleon-textfield($primaryStyleName : v-textfield) {
 
-input.v-textfield,
+input.#{$primaryStyleName},
 textarea.v-textarea,
 .v-filterselect {
        line-height: normal;
@@ -17,40 +17,40 @@ textarea.v-textarea,
        margin: 0;
        }
 
-input.v-textfield[type="text"],
+input.#{$primaryStyleName}[type="text"],
 textarea.v-textarea,
 .v-filterselect {
        padding: .2em;
        }
 
-input.v-textfield[type="text"] {
+input.#{$primaryStyleName}[type="text"] {
        height: 1.2em;
        }
 
-input.v-widget.v-textfield[type="text"],
+input.v-widget.#{$primaryStyleName}[type="text"],
 .v-filterselect {
        height: 1.6em;
        }
 
-&.v-app input.v-textfield,
+&.v-app input.#{$primaryStyleName},
 &.v-app textarea.v-textarea,
 &.v-app input.v-filterselect-input {
        color: #222;
        }
 
-.v-ie & input.v-textfield,
+.v-ie & input.#{$primaryStyleName},
 .v-ie & textarea.v-textarea,
 .v-ie & .v-filterselect {
        border-top-color: #808080;
        }
 
-&.v-app input.v-textfield-prompt,
+&.v-app input.#{$primaryStyleName}-prompt,
 &.v-app textarea.v-textarea-prompt {
        font-style: normal;
        color: #999;
        }
 
-input.v-textfield-focus,
+input.#{$primaryStyleName}-focus,
 textarea.v-textarea-focus {
        background-color: #fffce1;
        }
@@ -59,7 +59,7 @@ textarea.v-textarea-focus {
 /*******************************************************************************
  * Readonly
  ******************************************************************************/
-input.v-textfield-readonly,
+input.#{$primaryStyleName}-readonly,
 textarea.v-textarea-readonly {
        border: none;
        background: transparent;
@@ -69,7 +69,7 @@ textarea.v-textarea-readonly {
 /*******************************************************************************
  * Small
  ******************************************************************************/
-&.v-app input.v-textfield-small,
+&.v-app input.#{$primaryStyleName}-small,
 &.v-app textarea.v-textarea-small,
 .v-datefield-small .v-datefield-textfield,
 .v-datefield-small .v-datefield-button,
@@ -81,7 +81,7 @@ textarea.v-textarea-readonly {
 /*******************************************************************************
  * Big (and big search)
  ******************************************************************************/
-&.v-app input.v-textfield-big,
+&.v-app input.#{$primaryStyleName}-big,
 &.v-app textarea.v-textarea-big,
 .v-datefield-big .v-datefield-textfield,
 .v-datefield-big .v-datefield-button,
@@ -89,7 +89,7 @@ textarea.v-textarea-readonly {
        font-size: 1.2em;
        }
 
-input.v-textfield-big[type=text],
+input.#{$primaryStyleName}-big[type=text],
 .v-datefield-big input.v-datefield-textfield[type=text] {
        padding: .3em;
        }
@@ -99,14 +99,14 @@ textarea.v-textarea,
        padding: .3em;
        }
 
-input.v-textfield-big.v-textfield-search,
+input.#{$primaryStyleName}-big.#{$primaryStyleName}-search,
 .v-filterselect-search.v-filterselect-big {
        background-image: url(../../img/magnifier-big.png);
        background-repeat: no-repeat;
        background-position: 4px 50%;
        }
 
-input.v-textfield-big.v-textfield-search[type=text] {
+input.#{$primaryStyleName}-big.#{$primaryStyleName}-search[type=text] {
        padding-left: 26px;
        }
 
@@ -118,14 +118,14 @@ input.v-textfield-big.v-textfield-search[type=text] {
 /*******************************************************************************
  * Search
  ******************************************************************************/
-input.v-textfield-search,
+input.#{$primaryStyleName}-search,
 .v-filterselect-search {
        background-image: url(../../img/magnifier.png);
        background-repeat: no-repeat;
        background-position: 3px 50%;
        }
 
-input.v-textfield-search[type=text],
+input.#{$primaryStyleName}-search[type=text],
 .v-filterselect-search {
        padding-left: 17px;
        }

diff --git a/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss b/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
index fc80f51a2a32655f4d73dd63ace4ff33160011bf..9b33cd0155551af49b06da273605bbababbc2bb8 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/tree/tree.scss
@@ -1,25 +1,25 @@
-@mixin chameleon-tree {
+@mixin chameleon-tree($primaryStyleName : v-tree) {
 
-.v-tree-node-caption {
+.#{$primaryStyleName}-node-caption {
        margin-left: 16px;
        }
 
-.v-tree-node span {
+.#{$primaryStyleName}-node span {
        padding: .1em .3em;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        }
 
-.v-tree-node-children {
+.#{$primaryStyleName}-node-children {
        padding-left: 16px;
        }
 
-.v-tree-node-selected span {
+.#{$primaryStyleName}-node-selected span {
        background-color: #333;
        }
 
-.v-tree-connectors .v-tree-node-caption {
+.#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption {
        padding-bottom: 1px;
        }
 

diff --git a/WebContent/VAADIN/themes/chameleon/components/window/window.scss b/WebContent/VAADIN/themes/chameleon/components/window/window.scss
index f1a6b5e52970611a71402485d3f0496b138de947..e9524745f89e08cf5e96e8986ad73b7d4f3bdedb 100644 (file)
--- a/WebContent/VAADIN/themes/chameleon/components/window/window.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/window/window.scss
@@ -1,6 +1,6 @@
-@mixin chameleon-window {
+@mixin chameleon-window($primaryStyleName : v-window) {
 
-.v-window-closebox {
+.#{$primaryStyleName}-closebox {
        width: 14px;
        height: 15px;
        overflow: hidden;
@@ -13,41 +13,41 @@
        z-index: 2;
        }
 
-.v-window-closebox:hover {
+.#{$primaryStyleName}-closebox:hover {
        background-position: 0 -25px;
        }
 
-.v-window-closebox:active {
+.#{$primaryStyleName}-closebox:active {
        background-position: 0 -50px;
        }
 
-.v-window {
+.#{$primaryStyleName} {
        background-image: none;
        }
 
-.v-window-wrap {
+.#{$primaryStyleName}-wrap {
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        background-image: url(../../img/grad-light-top.png);
        background-repeat: repeat-x;
        }
-.v-window-outerheader {
+.#{$primaryStyleName}-outerheader {
        padding: .2em 1.7em .5em 1.2em;
        height: auto;
        text-align: center;
        }
 
-.v-window-header {
+.#{$primaryStyleName}-header {
        font-weight: normal;
        }
 
-.v-window-footer {
+.#{$primaryStyleName}-footer {
        height: 0;
        position: static;
        }
 
-.v-window-resizebox {
+.#{$primaryStyleName}-resizebox {
        background: transparent url(../../img/resize.png) no-repeat;
        width: 14px;
        height: 14px;