From: Marc Englund Date: Thu, 29 Nov 2012 12:42:52 +0000 (+0200) Subject: $primaryStyleName functionality to Chameleon, fixes #9881 X-Git-Tag: 7.0.0.beta11~68 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=10cda2673592f63a1cc3adf5f30d31bf6be46056;p=vaadin-framework.git $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 f33577db9e..2fe0307fe0 100644 --- 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 28d96991a7..75970cdac7 100644 --- 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 a1c75ad2f1..5952ee2802 100644 --- 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 55ade4c060..b2cba85067 100644 --- 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 020c29ed09..1218b476f5 100644 --- 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 88b3d7b804..bc6a8f555c 100644 --- 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 88e13cb46d..978ca56391 100644 --- 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 6bacf31e3e..56eb2cc6c9 100644 --- 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 bc0d75e35b..7810e818bf 100644 --- 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 bef69b3472..30c5eb85cb 100644 --- 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 e2bcf0a909..2496be6513 100644 --- 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 8ecc1878ae..9a90222c86 100644 --- 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 258df79922..dfa1c51c3a 100644 --- 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 026a7e5bfe..860d91a6e7 100644 --- 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 fc80f51a2a..9b33cd0155 100644 --- 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 f1a6b5e529..e9524745f8 100644 --- 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;