diff options
31 files changed, 495 insertions, 495 deletions
diff --git a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss index ddb030c00f..c8bb57365f 100644 --- a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss +++ b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss @@ -1,18 +1,18 @@ -@mixin base-absolutelayout { +@mixin base-absolutelayout($name : v-absolutelayout) { -.v-absolutelayout-wrapper { +.#{$name}-wrapper { position: absolute; overflow: hidden; } -.v-absolutelayout-margin, .v-absolutelayout-canvas { +.#{$name}-margin, .#{$name}-canvas { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-absolutelayout.v-has-height > div, .v-absolutelayout.v-has-height > div > div { +.#{$name}.v-has-height > div, .#{$name}.v-has-height > div > div { height: 100%; } -.v-absolutelayout.v-has-width > div, .v-absolutelayout.v-has-width > div > div { +.#{$name}.v-has-width > div, .#{$name}.v-has-width > div > div { width: 100%; } diff --git a/WebContent/VAADIN/themes/base/button/button.scss b/WebContent/VAADIN/themes/base/button/button.scss index ad4dce4978..e6398219ab 100644 --- a/WebContent/VAADIN/themes/base/button/button.scss +++ b/WebContent/VAADIN/themes/base/button/button.scss @@ -1,9 +1,9 @@ -@mixin base-button { +@mixin base-button($name : v-button) { /* * Default button (more customizable) * -------------------------------------- */ -.v-button { +.#{$name} { display: inline-block; zoom: 1; text-align: center !important; @@ -26,12 +26,12 @@ box-sizing: border-box; } -.v-button.v-disabled { +.#{$name}.v-disabled { cursor: default; } -.v-button-wrap, -.v-button-caption { +.#{$name}-wrap, +.#{$name}-caption { vertical-align: baseline; white-space: nowrap; font: inherit; @@ -39,14 +39,14 @@ line-height: normal; } -.v-button .v-icon, +.#{$name} .v-icon, .v-nativebutton .v-icon { vertical-align: middle; margin-right: 3px; border: none; } -.v-button .v-errorindicator, +.#{$name} .v-errorindicator, .v-nativebutton .v-errorindicator { display: inline-block; zoom: 1; @@ -55,7 +55,7 @@ } /* Link style (we really should deprecate this) */ -.v-button-link, +.#{$name}-link, .v-nativebutton-link { border: none; text-align: left !important; @@ -69,11 +69,11 @@ } /* Inset Safari focus outline a bit */ -.v-sa .v-button-link:focus{ +.v-sa .#{$name}-link:focus{ outline-offset: -3px; } -.v-button-link .v-button-caption, +.#{$name}-link .#{$name}-caption, .v-nativebutton-link .v-nativebutton-caption { text-decoration: underline; color: inherit; diff --git a/WebContent/VAADIN/themes/base/caption/caption.scss b/WebContent/VAADIN/themes/base/caption/caption.scss index c6fd124ad6..d08f682adb 100644 --- a/WebContent/VAADIN/themes/base/caption/caption.scss +++ b/WebContent/VAADIN/themes/base/caption/caption.scss @@ -1,26 +1,26 @@ -@mixin base-caption { +@mixin base-caption($name : v-caption) { -.v-captionwrapper { +.#{$name}wrapper { text-align: left; /* Force default alignment */ } -.v-caption { +.#{$name} { overflow: hidden; white-space: nowrap; } .v-errorindicator { display: inline-block; } -.v-caption .v-icon { +.#{$name} .v-icon { display: inline-block; padding-right: 2px; vertical-align: middle; } -.v-caption .v-captiontext { +.#{$name} .#{$name}text { display: inline-block; overflow: hidden; vertical-align: middle; } -.v-caption .v-required-field-indicator { +.#{$name} .v-required-field-indicator { display: inline-block; } diff --git a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss index c2c1b698ad..2356a1689d 100644 --- a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss +++ b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss @@ -1,35 +1,35 @@ -@mixin base-csslayout { +@mixin base-csslayout($name : v-csslayout) { -.v-csslayout { +.#{$name} { overflow: hidden; } /* More specific selector to override 'v-connector' */ -div.v-csslayout { +div.#{$name} { display: block; } -.v-csslayout-margin, .v-csslayout-container { +.#{$name}-margin, .#{$name}-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-has-width > .v-csslayout-margin, -.v-has-width > .v-csslayout-margin > .v-csslayout-container { +.v-has-width > .#{$name}-margin, +.v-has-width > .#{$name}-margin > .#{$name}-container { width: 100%; } -.v-has-height > .v-csslayout-margin, -.v-has-height > .v-csslayout-margin > .v-csslayout-container { +.v-has-height > .#{$name}-margin, +.v-has-height > .#{$name}-margin > .#{$name}-container { height: 100%; } -.v-csslayout-margin-top { +.#{$name}-margin-top { padding-top: 12px; } -.v-csslayout-margin-bottom { +.#{$name}-margin-bottom { padding-bottom: 12px; } -.v-csslayout-margin-left { +.#{$name}-margin-left { padding-left: 12px; } -.v-csslayout-margin-right { +.#{$name}-margin-right { padding-right: 12px; } diff --git a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss index aaf3e75251..984c31e255 100644 --- a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss +++ b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss @@ -1,6 +1,6 @@ -@mixin base-customcomponent { +@mixin base-customcomponent($name : v-customcomponent) { -.v-customcomponent { +.#{$name} { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss index 26e1538d29..0f5f1230c4 100644 --- a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss +++ b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss @@ -1,6 +1,6 @@ -@mixin base-customlayout { +@mixin base-customlayout($name : v-customlayout) { -.v-customlayout { +.#{$name} { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss index bf95baa3e6..a2975a2c06 100644 --- a/WebContent/VAADIN/themes/base/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss @@ -1,90 +1,90 @@ -@mixin base-datefield { +@mixin base-datefield($name : v-datefield) { -.v-datefield { +.#{$name} { white-space: nowrap; display: inline-block; /* Force minimum width */ } -.v-datefield-textfield { +.#{$name}-textfield { vertical-align: top; } -.v-datefield-button { +.#{$name}-button { cursor: pointer; } -.v-datefield-prompt .v-datefield-textfield { +.#{$name}-prompt .#{$name}-textfield { color: #999; font-style: italic; } -.v-datefield .v-datefield-button-readonly { +.#{$name} .#{$name}-button-readonly { display: none; } -.v-datefield-calendarpanel table { +.#{$name}-calendarpanel table { width: 100%; } -.v-datefield-calendarpanel td { +.#{$name}-calendarpanel td { padding: 0; margin: 0; } -.v-datefield-calendarpanel:focus { +.#{$name}-calendarpanel:focus { outline:none; } -.v-datefield-calendarpanel-header td { +.#{$name}-calendarpanel-header td { text-align: center; } -.v-datefield-calendarpanel-month { +.#{$name}-calendarpanel-month { text-align: center; white-space: nowrap; } -.v-datefield-calendarpanel-weeknumber { +.#{$name}-calendarpanel-weeknumber { color: #999; border-right: 1px solid #ddd; font-size: 0.9em; } -.v-datefield-calendarpanel-day, -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day, +.#{$name}-calendarpanel-day-today { cursor: pointer; } -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day-today { border: 1px solid #ddd; } -.v-disabled .v-datefield-calendarpanel-day, -.v-disabled .v-datefield-calendarpanel-day-today { +.v-disabled .#{$name}-calendarpanel-day, +.v-disabled .#{$name}-calendarpanel-day-today { cursor: default; } -.v-datefield-calendarpanel-day-disabled { +.#{$name}-calendarpanel-day-disabled { cursor: default; opacity: .5; } -.v-datefield-calendarpanel-day-selected { +.#{$name}-calendarpanel-day-selected { cursor: default; background: #333; color: #fff; } -.v-datefield-calendarpanel-day-focused { +.#{$name}-calendarpanel-day-focused { outline: 1px dotted black; } -.v-datefield-calendarpanel-day-offmonth { +.#{$name}-calendarpanel-day-offmonth { color: #666; } -.v-datefield-time { +.#{$name}-time { white-space: nowrap; } -.v-datefield-time .v-label { +.#{$name}-time .v-label { display: inline; } -.v-datefield-popup { +.#{$name}-popup { background: #fff; } /* Disabled by default -.v-datefield-error .v-textfield, -.v-datefield-error .v-datefield-calendarpanel { +.#{$name}-error .v-textfield, +.#{$name}-error .#{$name}-calendarpanel { background: #ffe0e0; } */ /* Disabled by default -.v-datefield-required .v-textfield, -.v-datefield-required .v-datefield-calendarpanel { +.#{$name}-required .v-textfield, +.#{$name}-required .#{$name}-calendarpanel { background:transparent; background-color: #ffe0e0; } diff --git a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss index 9d60bf0618..dae4320131 100644 --- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss +++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss @@ -1,6 +1,6 @@ -@mixin base-dragwrapper { +@mixin base-dragwrapper($name : v-ddwrapper) { -.v-ddwrapper { +.#{$name} { padding: 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -13,7 +13,7 @@ -khtml-user-select: none; -webkit-user-select: none; } -.v-ie .v-ddwrapper a.drag-start { +.v-ie .#{$name} a.drag-start { display: block; position: absolute; top: 0; @@ -27,22 +27,22 @@ background-color:cyan; filter: alpha(opacity=0); } -.v-ddwrapper-over { +.#{$name}-over { border: 2px solid #1d9dff; background-color: #bcdcff; padding: 0; } -.v-ddwrapper-over { +.#{$name}-over { background-color: rgba(169,209,255,.6); } -.no-box-drag-hints .v-ddwrapper-over { +.no-box-drag-hints .#{$name}-over { border: none; background-color: transparent; padding: 2px; } -.v-app .v-ddwrapper-over-top, -.v-window .v-ddwrapper-over-top, -.v-popupview-popup .v-ddwrapper-over-top { +.v-app .#{$name}-over-top, +.v-window .#{$name}-over-top, +.v-popupview-popup .#{$name}-over-top { border: none; border-top: 2px solid #1d9dff; background-color: transparent; @@ -52,9 +52,9 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .v-ddwrapper-over-bottom, -.v-window .v-ddwrapper-over-bottom, -.v-popupview-popup .v-ddwrapper-over-bottom { +.v-app .#{$name}-over-bottom, +.v-window .#{$name}-over-bottom, +.v-popupview-popup .#{$name}-over-bottom { border: none; border-bottom: 2px solid #1d9dff; background-color: transparent; @@ -64,9 +64,9 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .v-ddwrapper-over-left, -.v-window .v-ddwrapper-over-left, -.v-popupview-popup .v-ddwrapper-over-left { +.v-app .#{$name}-over-left, +.v-window .#{$name}-over-left, +.v-popupview-popup .#{$name}-over-left { border: none; border-left: 2px solid #1d9dff; background-color: transparent; @@ -76,9 +76,9 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .v-ddwrapper-over-right, -.v-window .v-ddwrapper-over-right, -.v-popupview-popup .v-ddwrapper-over-right { +.v-app .#{$name}-over-right, +.v-window .#{$name}-over-right, +.v-popupview-popup .#{$name}-over-right { border: none; border-right: 2px solid #1d9dff; background-color: transparent; @@ -88,27 +88,27 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-ddwrapper, -.v-ddwrapper-over, -.v-app .v-ddwrapper-over-top, -.v-window .v-ddwrapper-over-top, -.v-popupview-popup .v-ddwrapper-over-top, -.v-app .v-ddwrapper-over-bottom, -.v-window .v-ddwrapper-over-bottom, -.v-popupview-popup .v-ddwrapper-over-bottom, -.v-app .v-ddwrapper-over-left, -.v-window .v-ddwrapper-over-left, -.v-popupview-popup .v-ddwrapper-over-left, -.v-app .v-ddwrapper-over-right, -.v-window .v-ddwrapper-over-right, -.v-popupview-popup .v-ddwrapper-over-right { +.#{$name}, +.#{$name}-over, +.v-app .#{$name}-over-top, +.v-window .#{$name}-over-top, +.v-popupview-popup .#{$name}-over-top, +.v-app .#{$name}-over-bottom, +.v-window .#{$name}-over-bottom, +.v-popupview-popup .#{$name}-over-bottom, +.v-app .#{$name}-over-left, +.v-window .#{$name}-over-left, +.v-popupview-popup .#{$name}-over-left, +.v-app .#{$name}-over-right, +.v-window .#{$name}-over-right, +.v-popupview-popup .#{$name}-over-right { border-color: rgba(0,109,232,.6); } -.v-ddwrapper-over-top:before, -.v-ddwrapper-over-bottom:after, -.v-ddwrapper-over-left:before, -.v-ddwrapper-over-right:before { +.#{$name}-over-top:before, +.#{$name}-over-bottom:after, +.#{$name}-over-left:before, +.#{$name}-over-right:before { display: block; position: absolute; @@ -118,16 +118,16 @@ margin-left: -2px; background: transparent url(../common/img/drag-slot-dot.png) no-repeat; } -.v-ddwrapper-over-bottom:after { +.#{$name}-over-bottom:after { margin-top: -2px; } -.v-ddwrapper-over-left:before, -.v-ddwrapper-over-right:before { +.#{$name}-over-left:before, +.#{$name}-over-right:before { background-position: 0 -6px; margin-top: -2px; margin-left: -4px; } -.v-ddwrapper-over-right:before { +.#{$name}-over-right:before { position: relative; margin-bottom: -4px; margin-right: -4px; @@ -136,26 +136,26 @@ background-position: 100% -6px; } -.no-horizontal-drag-hints .v-ddwrapper-over-left { +.no-horizontal-drag-hints .#{$name}-over-left { padding-left: 2px; border-left: none; } -.no-horizontal-drag-hints .v-ddwrapper-over-right { +.no-horizontal-drag-hints .#{$name}-over-right { padding-right: 2px; border-right: none; } -.no-vertical-drag-hints .v-ddwrapper-over-top { +.no-vertical-drag-hints .#{$name}-over-top { padding-top: 2px; border-top: none; } -.no-vertical-drag-hints .v-ddwrapper-over-bottom { +.no-vertical-drag-hints .#{$name}-over-bottom { padding-bottom: 2px; border-bottom: none; } -.no-horizontal-drag-hints .v-ddwrapper-over-left:before, -.no-horizontal-drag-hints .v-ddwrapper-over-right:before, -.no-vertical-drag-hints .v-ddwrapper-over-top:before, -.no-vertical-drag-hints .v-ddwrapper-over-bottom:after { +.no-horizontal-drag-hints .#{$name}-over-left:before, +.no-horizontal-drag-hints .#{$name}-over-right:before, +.no-vertical-drag-hints .#{$name}-over-top:before, +.no-vertical-drag-hints .#{$name}-over-bottom:after { display: none; } diff --git a/WebContent/VAADIN/themes/base/embedded/embedded.scss b/WebContent/VAADIN/themes/base/embedded/embedded.scss index 53faaef2e8..965f66ddc3 100644 --- a/WebContent/VAADIN/themes/base/embedded/embedded.scss +++ b/WebContent/VAADIN/themes/base/embedded/embedded.scss @@ -1,6 +1,6 @@ -@mixin base-embedded { +@mixin base-embedded($name : v-embedded) { -.v-table .v-embedded-image { +.v-table .#{$name}-image() { /* make embeddeds be centered in centered table cells. */ display: inline-block; } diff --git a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss index a45840ebab..48a1bf0fde 100644 --- a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss +++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss @@ -1,55 +1,55 @@ -@mixin base-formlayout { +@mixin base-formlayout($name : v-formlayout) { -.v-formlayout.v-has-width > table { +.#{$name}.v-has-width > table { width: 100%; } -.v-formlayout.v-has-height > table { +.#{$name}.v-has-height > table { height: 100%; } -.v-formlayout-cell .v-errorindicator { +.#{$name}-cell .v-errorindicator { display: block; } -.v-formlayout-error-indicator { +.#{$name}-error-indicator { /* fix width so layout is not jumpy when error disappears */ width: 12px; } -.v-formlayout-captioncell { +.#{$name}-captioncell { text-align:right; white-space: nowrap; } -.v-formlayout-errorcell, .v-formlayout-captioncell { +.#{$name}-errorcell, .#{$name}-captioncell { width: 1px; /* Don't use any extra space */ } -.v-formlayout-captioncell .v-caption { +.#{$name}-captioncell .v-caption { overflow: visible; } -.v-formlayout-spacing .v-formlayout-row .v-formlayout-captioncell, -.v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell, -.v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell { +.#{$name}-spacing .#{$name}-row .#{$name}-captioncell, +.#{$name}-spacing .#{$name}-row .#{$name}-contentcell, +.#{$name}-spacing .#{$name}-row .#{$name}-errorcell { padding-top: 6px; } -.v-formlayout-spacing .v-formlayout-firstrow .v-formlayout-captioncell, -.v-formlayout-spacing .v-formlayout-firstrow .v-formlayout-contentcell, -.v-formlayout-spacing .v-formlayout-firstrow .v-formlayout-errorcell { +.#{$name}-spacing .#{$name}-firstrow .#{$name}-captioncell, +.#{$name}-spacing .#{$name}-firstrow .#{$name}-contentcell, +.#{$name}-spacing .#{$name}-firstrow .#{$name}-errorcell { padding-top: 0; } -.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-captioncell, -.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-contentcell, -.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-errorcell { +.#{$name}-margin-top .#{$name}-firstrow .#{$name}-captioncell, +.#{$name}-margin-top .#{$name}-firstrow .#{$name}-contentcell, +.#{$name}-margin-top .#{$name}-firstrow .#{$name}-errorcell { padding-top: 12px; } -.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-captioncell, -.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-contentcell, -.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-errorcell { +.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-captioncell, +.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-contentcell, +.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-errorcell { padding-bottom: 12px; } -.v-formlayout-margin-left .v-formlayout-captioncell { +.#{$name}-margin-left .#{$name}-captioncell { padding-left: 12px; } -.v-formlayout-margin-right .v-formlayout-contentcell { +.#{$name}-margin-right .#{$name}-contentcell { padding-right: 12px; } -.v-formlayout-captioncell .v-caption .v-required-field-indicator { +.#{$name}-captioncell .v-caption .v-required-field-indicator { float: none; } diff --git a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss index 72f7437e6e..45b02316ae 100644 --- a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss +++ b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss @@ -1,34 +1,34 @@ -@mixin base-gridlayout { +@mixin base-gridlayout($name : v-gridlayout) { -.v-gridlayout { +.#{$name} { position: relative; } -.v-gridlayout-slot { +.#{$name}-slot { position: absolute; } -.v-gridlayout-margin-top { +.#{$name}-margin-top { padding-top: 12px; } -.v-gridlayout-margin-bottom { +.#{$name}-margin-bottom { padding-bottom: 12px; } -.v-gridlayout-margin-left { +.#{$name}-margin-left { padding-left: 12px; } -.v-gridlayout-margin-right { +.#{$name}-margin-right { padding-right: 12px; } -.v-gridlayout-spacing-on { +.#{$name}-spacing-on { padding-left: 6px; padding-top: 6px; overflow: hidden; } -.v-gridlayout-spacing, -.v-gridlayout-spacing-off { +.#{$name}-spacing, +.#{$name}-spacing-off { padding-left: 0; padding-top: 0; } -.v-gridlayout-spacing-off { +.#{$name}-spacing-off { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/label/label.scss b/WebContent/VAADIN/themes/base/label/label.scss index ae1539acc9..6ccd0f3d27 100644 --- a/WebContent/VAADIN/themes/base/label/label.scss +++ b/WebContent/VAADIN/themes/base/label/label.scss @@ -1,10 +1,10 @@ -@mixin base-label { +@mixin base-label($name : v-label) { -.v-label { +.#{$name} { overflow: hidden; } -.v-label.v-has-width { +.#{$name}.v-has-width { white-space: normal; } diff --git a/WebContent/VAADIN/themes/base/link/link.scss b/WebContent/VAADIN/themes/base/link/link.scss index 710f95d832..455ab2cfd0 100644 --- a/WebContent/VAADIN/themes/base/link/link.scss +++ b/WebContent/VAADIN/themes/base/link/link.scss @@ -1,20 +1,20 @@ -@mixin base-link { +@mixin base-link($name : v-link) { -.v-link { +.#{$name} { white-space: nowrap; } -.v-link a { +.#{$name} a { vertical-align: middle; text-decoration: none; } -.v-link span { +.#{$name} span { text-decoration: underline; vertical-align: middle; } .v-disabled a { cursor: default; } -.v-link img { +.#{$name} img { vertical-align: middle; border:none; } diff --git a/WebContent/VAADIN/themes/base/loginform/loginform.scss b/WebContent/VAADIN/themes/base/loginform/loginform.scss index d2784fad47..d31af3b9e2 100644 --- a/WebContent/VAADIN/themes/base/loginform/loginform.scss +++ b/WebContent/VAADIN/themes/base/loginform/loginform.scss @@ -1,6 +1,6 @@ -@mixin base-loginform { +@mixin base-loginform($name : v-loginform) { -.v-loginform { +.#{$name} { height: 140px; width: 200px; } diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.scss b/WebContent/VAADIN/themes/base/menubar/menubar.scss index 512a8ee1d5..f896e967b5 100644 --- a/WebContent/VAADIN/themes/base/menubar/menubar.scss +++ b/WebContent/VAADIN/themes/base/menubar/menubar.scss @@ -1,11 +1,11 @@ -@mixin base-menubar { +@mixin base-menubar($name : v-menubar) { -.v-menubar { +.#{$name} { display: inline-block; white-space: nowrap; overflow: hidden; } -.v-menubar .v-menubar-menuitem { +.#{$name} .#{$name}-menuitem { cursor: default; vertical-align: middle; white-space: nowrap; @@ -13,36 +13,36 @@ display: inline-block; zoom: 1; } -.v-menubar .v-menubar-menuitem-caption .v-icon { +.#{$name} .#{$name}-menuitem-caption .v-icon { vertical-align: middle; white-space: nowrap; } -.v-menubar-submenu { +.#{$name}-submenu { background: #fff; } -.v-menubar-menuitem-selected { +.#{$name}-menuitem-selected { background: #333; color: #fff; } -.v-menubar-submenu .v-menubar-menuitem { +.#{$name}-submenu .#{$name}-menuitem { cursor: default; display: block; position: relative; padding-right: 1.5em; } -.v-menubar-submenu .v-menubar-menuitem-caption { +.#{$name}-submenu .#{$name}-menuitem-caption { display: block; } -.v-menubar-submenu .v-menubar-menuitem *, -.v-menubar-submenu .v-menubar-menuitem-caption * { +.#{$name}-submenu .#{$name}-menuitem *, +.#{$name}-submenu .#{$name}-menuitem-caption * { white-space: nowrap; } -.v-menubar-submenu-indicator { +.#{$name}-submenu-indicator { display: none; /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } -.v-menubar-submenu .v-menubar-submenu-indicator { +.#{$name}-submenu .#{$name}-submenu-indicator { display: block; position: absolute; right: 0; @@ -50,20 +50,20 @@ height: 1em; font-size: 0.9em; } -.v-menubar-menuitem-disabled, -.v-menubar span.v-menubar-menuitem-disabled:hover, -.v-menubar span.v-menubar-menuitem-disabled:focus, -.v-menubar span.v-menubar-menuitem-disabled:active { +.#{$name}-menuitem-disabled, +.#{$name} span.#{$name}-menuitem-disabled:hover, +.#{$name} span.#{$name}-menuitem-disabled:focus, +.#{$name} span.#{$name}-menuitem-disabled:active { color: #999; } -.v-menubar-more-menuitem { +.#{$name}-more-menuitem { /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } -.v-menubar-separator { +.#{$name}-separator { overflow: hidden; } -.v-menubar-separator span { +.#{$name}-separator span { display: block; text-indent: -9999px; font-size: 1px; @@ -72,26 +72,26 @@ margin: 3px 0 2px; overflow: hidden; } -.v-menubar .v-icon, -.v-menubar-submenu .v-icon { +.#{$name} .v-icon, +.#{$name}-submenu .v-icon { margin-right: 3px; } -.v-menubar:focus, -.v-menubar-popup:focus, -.v-menubar-popup .popupContent:focus, -.v-menubar-popup .popupContent .v-menubar-submenu:focus{ +.#{$name}:focus, +.#{$name}-popup:focus, +.#{$name}-popup .popupContent:focus, +.#{$name}-popup .popupContent .#{$name}-submenu:focus{ outline: none; } /* Checkboxes for checkable/checked menu items */ /* Checked/unchecked requires combined style selected-(un)checked for IE6 */ -.v-menubar-submenu-check-column .v-menubar-menuitem { +.#{$name}-submenu-check-column .#{$name}-menuitem { padding-left: 6px; } -.v-menubar-submenu-check-column .v-menubar-menuitem-caption { +.#{$name}-submenu-check-column .#{$name}-menuitem-caption { padding-left: 18px; } -.v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption { +.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption { background: transparent url(img/check.gif) no-repeat left; } diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss index e67ac14050..350db1a75f 100644 --- a/WebContent/VAADIN/themes/base/notification/notification.scss +++ b/WebContent/VAADIN/themes/base/notification/notification.scss @@ -1,6 +1,6 @@ -@mixin base-notification { +@mixin base-notification($name : v-Notification) { -.v-Notification { +.#{$name} { background: #999; color: #fff; cursor: pointer; @@ -9,33 +9,33 @@ max-width:85%; } -.v-Notification h1, -.v-Notification p, -.v-Notification-error h1, -.v-Notification-error p, -.v-Notification-warning h1, -.v-Notification-warning p { +.#{$name} h1, +.#{$name} p, +.#{$name}-error h1, +.#{$name}-error p, +.#{$name}-warning h1, +.#{$name}-warning p { display: inline; margin: 0 0.5em 0 0; } -.v-Notification-warning { +.#{$name}-warning { background: orange; } -.v-Notification-error { +.#{$name}-error { background: red; } -.v-Notification-tray h1 { +.#{$name}-tray h1 { display: block; } -.v-Notification-tray p { +.#{$name}-tray p { display: block; } -.v-Notification-system { +.#{$name}-system { background-color: red; opacity: .7; filter: alpha(opacity=70); } -.v-Notification-system h1 { +.#{$name}-system h1 { display: block; margin: 0; } diff --git a/WebContent/VAADIN/themes/base/panel/panel.scss b/WebContent/VAADIN/themes/base/panel/panel.scss index 202e75c226..46571f8bd5 100644 --- a/WebContent/VAADIN/themes/base/panel/panel.scss +++ b/WebContent/VAADIN/themes/base/panel/panel.scss @@ -1,48 +1,48 @@ -@mixin base-panel { +@mixin base-panel($name : v-panel) { -.v-panel, -.v-panel-caption, -.v-panel-content, -.v-panel-deco, -.v-panel-light, -.v-panel-caption-light, -.v-panel-content-light, -.v-panel-deco-light { +.#{$name}, +.#{$name}-caption, +.#{$name}-content, +.#{$name}-deco, +.#{$name}-light, +.#{$name}-caption-light, +.#{$name}-content-light, +.#{$name}-deco-light { outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ text-align: left; /* Force default alignment */ } -.v-panel-caption .v-errorindicator { +.#{$name}-caption .v-errorindicator { float: none; display: inline; } -.v-panel-caption .v-icon { +.#{$name}-caption .v-icon { display: inline; vertical-align: middle; } -.v-panel-caption span { +.#{$name}-caption span { vertical-align: middle; display: table-row; } -.v-panel-caption { +.#{$name}-caption { white-space: nowrap; overflow:hidden; font-weight: bold; } -.v-panel-nocaption { +.#{$name}-nocaption { overflow: hidden; } -.v-panel-content { +.#{$name}-content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-panel.v-has-width > .v-panel-content { +.#{$name}.v-has-width > .#{$name}-content { width: 100%; } -.v-panel.v-has-height > .v-panel-content { +.#{$name}.v-has-height > .#{$name}-content { height: 100%; } -.v-panel-deco { +.#{$name}-deco { } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/popupview/popupview.scss b/WebContent/VAADIN/themes/base/popupview/popupview.scss index e192d0d147..b52f79db76 100644 --- a/WebContent/VAADIN/themes/base/popupview/popupview.scss +++ b/WebContent/VAADIN/themes/base/popupview/popupview.scss @@ -1,14 +1,14 @@ -@mixin base-popupview { +@mixin base-popupview($name : v-popupview) { -.v-popupview { +.#{$name} { cursor: pointer; text-decoration: underline; white-space: nowrap; } -.v-popupview-popup { +.#{$name}-popup { overflow: auto; } -.v-popupview-loading { +.#{$name}-loading { width: 30px; height: 30px; background: transparent url(../common/img/ajax-loader-medium.gif) no-repeat 50%; diff --git a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss index 4c1483886b..7af1ba1f0e 100644 --- a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss +++ b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss @@ -1,17 +1,17 @@ -@mixin base-progressindicator { +@mixin base-progressindicator($name : v-progressindicator) { -.v-progressindicator { +.#{$name} { width: 150px; } -.v-progressindicator-wrapper { +.#{$name}-wrapper { height: 7px; border: 1px solid #ddd; } -.v-progressindicator-indicator { +.#{$name}-indicator { height: 7px; background: #ddd; } -div.v-progressindicator-indeterminate { +div.#{$name}-indeterminate { height: 20px; width: 20px; background: #fff url(../common/img/ajax-loader-medium.gif) no-repeat 50%; @@ -20,13 +20,13 @@ div.v-progressindicator-indeterminate { -moz-border-radius: 4px; } /* Hide obsolete elements in indeterminate mode */ -.v-progressindicator-indeterminate .v-progressindicator-wrapper, -.v-progressindicator-indeterminate .v-progressindicator-indicator, -.v-progressindicator-indeterminate-disabled .v-progressindicator-wrapper, -.v-progressindicator-indeterminate-disabled .v-progressindicator-indicator { +.#{$name}-indeterminate .#{$name}-wrapper, +.#{$name}-indeterminate .#{$name}-indicator, +.#{$name}-indeterminate-disabled .#{$name}-wrapper, +.#{$name}-indeterminate-disabled .#{$name}-indicator { display: none; } -div.v-progressindicator-indeterminate-disabled { +div.#{$name}-indeterminate-disabled { height: 20px; width: 20px; background: transparent; diff --git a/WebContent/VAADIN/themes/base/select/select.scss b/WebContent/VAADIN/themes/base/select/select.scss index d2d9e8a663..483f0e16b6 100644 --- a/WebContent/VAADIN/themes/base/select/select.scss +++ b/WebContent/VAADIN/themes/base/select/select.scss @@ -1,58 +1,58 @@ -@mixin base-select { +@mixin base-select($name : v-select) { -.v-select { +.#{$name} { text-align: left; } -.v-select-optiongroup .v-select-option { +.#{$name}-optiongroup .#{$name}-option { display: block; white-space: nowrap; } -.v-select-optiongroup .v-icon { +.#{$name}-optiongroup .v-icon { vertical-align: middle; white-space: nowrap; margin: 0 2px; } -.v-ie .v-select-optiongroup .v-select-option { +.v-ie .#{$name}-optiongroup .#{$name}-option { zoom: 1; } -.v-select-select { +.#{$name}-select { display: block; } -.v-select-twincol { +.#{$name}-twincol { white-space: nowrap; } -.v-select-twincol-options { +.#{$name}-twincol-options { float: left; } -.v-select-twincol-caption-left { +.#{$name}-twincol-caption-left { float: left; overflow: hidden; text-overflow: ellipsis; } -.v-select-twincol-selections { +.#{$name}-twincol-selections { font-weight: bold; } -.v-select-twincol-caption-right { +.#{$name}-twincol-caption-right { float: right; overflow: hidden; text-overflow: ellipsis; } -.v-select-twincol-buttons { +.#{$name}-twincol-buttons { float: left; text-align: center; } -.v-select-twincol-buttons .v-select-twincol-deco { +.#{$name}-twincol-buttons .#{$name}-twincol-deco { clear: both; } -.v-select-twincol .v-textfield { +.#{$name}-twincol .v-textfield { display: block; float: left; clear: left; } -.v-select-twincol .v-button { +.#{$name}-twincol .v-button { float: left; } -.v-select-twincol-buttons .v-button { +.#{$name}-twincol-buttons .v-button { float: none; } .v-filterselect { @@ -150,10 +150,10 @@ /* Error styles (disabled by default) .v-filterselect-error .v-filterselect-input, -.v-select-error .v-select-option, -.v-select-error .v-select-select, -.v-select-error .v-select-twincol-selections, -.v-select-error .v-select-twincol-options { +.#{$name}-error .#{$name}-option, +.#{$name}-error .#{$name}-select, +.#{$name}-error .#{$name}-twincol-selections, +.#{$name}-error .#{$name}-twincol-options { background: #ffaaaa; } */ @@ -161,10 +161,10 @@ /* Required field styles (disabled by default) .v-filterselect-error .v-filterselect-input, -.v-select-required .v-select-option, -.v-select-required .v-select-select, -.v-select-required .v-select-twincol-selections, -.v-select-required .v-select-twincol-options { +.#{$name}-required .#{$name}-option, +.#{$name}-required .#{$name}-select, +.#{$name}-required .#{$name}-twincol-selections, +.#{$name}-required .#{$name}-twincol-options { background: #ffaaaa; } */ diff --git a/WebContent/VAADIN/themes/base/shadow/shadow.scss b/WebContent/VAADIN/themes/base/shadow/shadow.scss index 4e1085aa5a..c0c94e7680 100644 --- a/WebContent/VAADIN/themes/base/shadow/shadow.scss +++ b/WebContent/VAADIN/themes/base/shadow/shadow.scss @@ -1,31 +1,31 @@ -@mixin base-shadow { +@mixin base-shadow($name : v-shadow) { -.v-shadow { +.#{$name} { position: absolute; } -.v-shadow .top-left { +.#{$name} .top-left { position: absolute; overflow: hidden; top: -3px; left: -5px; width: 10px; height: 10px; background: transparent url(img/top-left.png); } -.v-shadow .top { +.#{$name} .top { position: absolute; overflow: hidden; top: -3px; left: 5px; height: 10px; right: 5px; background: transparent url(img/top.png); } -.v-shadow .top-right { +.#{$name} .top-right { position: absolute; overflow: hidden; top: -3px; right: -5px; width: 10px; height: 10px; background: transparent url(img/top-right.png); } -.v-shadow .left { +.#{$name} .left { position: absolute; overflow: hidden; top: 7px; left: -5px; width: 10px; @@ -33,14 +33,14 @@ background: transparent url(img/left.png); } -.v-shadow .center { +.#{$name} .center { position: absolute; overflow: hidden; top: 7px; left: 5px; bottom: 3px; right: 5px; background: transparent url(img/center.png); } -.v-shadow .right { +.#{$name} .right { position: absolute; overflow: hidden; top: 7px; right: -5px; width: 10px; @@ -48,21 +48,21 @@ background: transparent url(img/right.png); } -.v-shadow .bottom-left { +.#{$name} .bottom-left { position: absolute; overflow: hidden; bottom: -7px; left: -5px; width: 10px; height: 10px; background: transparent url(img/bottom-left.png); } -.v-shadow .bottom { +.#{$name} .bottom { position: absolute; overflow: hidden; bottom: -7px; left: 5px; right: 5px; height: 10px; background: transparent url(img/bottom.png); } -.v-shadow .bottom-right { +.#{$name} .bottom-right { position: absolute; overflow: hidden; bottom: -7px; right: -5px; width: 10px; height: 10px; diff --git a/WebContent/VAADIN/themes/base/slider/slider.scss b/WebContent/VAADIN/themes/base/slider/slider.scss index 0c65bf1e73..bfb4c3b950 100644 --- a/WebContent/VAADIN/themes/base/slider/slider.scss +++ b/WebContent/VAADIN/themes/base/slider/slider.scss @@ -1,9 +1,9 @@ -@mixin base-slider { +@mixin base-slider($name : v-slider) { -.v-slider { +.#{$name} { margin: 5px 0; } -.v-slider-base { +.#{$name}-base { /* changing the borders will require adjustments to ISlider.java */ height: 2px; border-top: 1px solid #ddd; @@ -12,7 +12,7 @@ border-right: 1px solid #eee; } -.v-slider-handle { +.#{$name}-handle { background: #aaa; width: 12px; height: 12px; @@ -20,7 +20,7 @@ font-size: 0; } -.v-slider-vertical { +.#{$name}-vertical { width: 2px; height: auto; margin: 0 5px; @@ -28,19 +28,19 @@ border-left: 1px solid #cccfd0; border-right: 1px solid #cccfd0; } -.v-slider-vertical .v-slider-base { +.#{$name}-vertical .#{$name}-base { width: 2px; border-bottom: 1px solid #eee; border-right: none; } -.v-slider-vertical .v-slider-handle { +.#{$name}-vertical .#{$name}-handle { width: 12px; height: 12px; font-size: 0; margin-left: -5px; } -.v-slider-feedback { +.#{$name}-feedback { padding: 2px 5px; background: #444; color: #fff; @@ -56,12 +56,12 @@ } /* Disabled by default -.v-slider-error .v-slider-base { +.#{$name}-error .#{$name}-base { background: #FFE0E0; } */ /* Disabled by default -.v-slider-required .v-slider-base { +.#{$name}-required .#{$name}-base { background: #FFE0E0; } */ diff --git a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss index 2c3e578b0b..177d443312 100644 --- a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss +++ b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss @@ -1,13 +1,13 @@ -@mixin base-splitpanel { +@mixin base-splitpanel($name : v-splitpanel) { -.v-splitpanel-horizontal, -.v-splitpanel-vertical { +.#{$name}-horizontal, +.#{$name}-vertical { overflow: hidden; } -.v-splitpanel-hsplitter { +.#{$name}-hsplitter { width: 6px; } -.v-splitpanel-hsplitter div { +.#{$name}-hsplitter div { width: 6px; position: absolute; top: 0; @@ -16,19 +16,19 @@ cursor: e-resize; cursor: col-resize; } -.v-disabled .v-splitpanel-hsplitter div { +.v-disabled .#{$name}-hsplitter div { cursor: default; } -.v-splitpanel-vsplitter { +.#{$name}-vsplitter { height: 6px; } -.v-splitpanel-vsplitter div { +.#{$name}-vsplitter div { height: 6px; background: #ddd; cursor: s-resize; cursor: row-resize; } -.v-disabled .v-splitpanel-vsplitter div { +.v-disabled .#{$name}-vsplitter div { cursor: default; } diff --git a/WebContent/VAADIN/themes/base/table/table.scss b/WebContent/VAADIN/themes/base/table/table.scss index fd3c0af0e1..552628bb61 100644 --- a/WebContent/VAADIN/themes/base/table/table.scss +++ b/WebContent/VAADIN/themes/base/table/table.scss @@ -1,4 +1,4 @@ -@mixin base-table { +@mixin base-table($name : v-table) { /* Table theme building instructions * @@ -8,82 +8,82 @@ * these instructions. * * Borders in table header and in table body need to be same width - * - specify vertical borders on .v-table-header-wrap and .v-table-body + * - specify vertical borders on .#{$name}-header-wrap and .#{$name}-body * * Table cells in body: - * - padding/border for cells is to be defined for td elements (class name: .v-table-cell-content) + * - padding/border for cells is to be defined for td elements (class name: .#{$name}-cell-content) * - in default theme there are no borders, but they should work. Just set border-right or border-bottom - * - no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element + * - no padding or border is allowed for div inside cells (class name: .#{$name}-cell-wrapper) element * - background is allowed for both elements * * Table headers: - * - table cells in header contain .v-table-resizer and - * .v-table-caption-container div elements, which are both floated to right - * - to align header caption to body content resizer width + .v-table-caption-container + * - table cells in header contain .#{$name}-resizer and + * .#{$name}-caption-container div elements, which are both floated to right + * - to align header caption to body content resizer width + .#{$name}-caption-container * padding right should be equal to content cells padding-right and border-right. * - Possible cell border in header must be themed into column resizer. * */ -.v-table { +.#{$name} { overflow: hidden; text-align: left; /* Force default alignment */ } -.v-table-header-wrap { +.#{$name}-header-wrap { overflow: hidden; border: 1px solid #aaa; border-bottom: none; background: #efefef; } -.v-table-header table, -.v-table-table { +.#{$name}-header table, +.#{$name}-table { border-spacing: 0; border-collapse: separate; margin: 0; padding: 0; border: 0; } -.v-table-header td { +.#{$name}-header td { padding: 0; } -.v-table-header-cell, -.v-table-header-cell-asc, -.v-table-header-cell-desc { +.#{$name}-header-cell, +.#{$name}-header-cell-asc, +.#{$name}-header-cell-desc { cursor: pointer; } -.v-table.v-disabled .v-table-header-cell, -.v-table.v-disabled .v-table-header-cell-asc, -.v-table.v-disabled .v-table-header-cell-desc { +.#{$name}.v-disabled .#{$name}-header-cell, +.#{$name}.v-disabled .#{$name}-header-cell-asc, +.#{$name}.v-disabled .#{$name}-header-cell-desc { cursor: default; } -.v-table-footer-wrap { +.#{$name}-footer-wrap { overflow: hidden; border: 1px solid #aaa; border-top: none; background: #efefef; } -.v-table-footer table { +.#{$name}-footer table { border-spacing: 0; border-collapse: collapse; margin: 0; padding: 0; border: 0; } -.v-table-footer td { +.#{$name}-footer td { padding: 0; border-right: 1px solid #aaa; } -.v-table-footer-cell { +.#{$name}-footer-cell { cursor: pointer; } -.v-table-footer-container { +.#{$name}-footer-container { float:right; padding-right:6px; overflow:hidden; white-space:nowrap; } -.v-table-resizer { +.#{$name}-resizer { display: block; height: 1.2em; float: right; @@ -93,53 +93,53 @@ width: 1px; overflow: hidden; } -.v-table.v-disabled .v-table-resizer { +.#{$name}.v-disabled .#{$name}-resizer { cursor: default; } -.v-table-caption-container { +.#{$name}-caption-container { overflow: hidden; white-space: nowrap; margin-left: 6px; } -.v-table-caption-container-align-right { +.#{$name}-caption-container-align-right { float: right; } -.v-table-sort-indicator { +.#{$name}-sort-indicator { width: 0px; height: 1.2em; float: right; } -.v-table-header-cell-asc .v-table-sort-indicator, -.v-table-header-cell-desc .v-table-sort-indicator { +.#{$name}-header-cell-asc .#{$name}-sort-indicator, +.#{$name}-header-cell-desc .#{$name}-sort-indicator { width: 16px; height: 1.2em; float: right; } -.v-table-header-cell-asc .v-table-sort-indicator { +.#{$name}-header-cell-asc .#{$name}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right 6px; } -.v-table-header-cell-desc .v-table-sort-indicator { +.#{$name}-header-cell-desc .#{$name}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right -10px; } -.v-table-caption-container-align-center { +.#{$name}-caption-container-align-center { text-align: center; } -.v-table-caption-container-align-right { +.#{$name}-caption-container-align-right { text-align: right; } -.v-table-caption-container .v-icon, -.v-table-header-drag .v-icon { +.#{$name}-caption-container .v-icon, +.#{$name}-header-drag .v-icon { vertical-align: middle; } -.v-table-body { +.#{$name}-body { border: 1px solid #aaa; } -.v-table-row-spacer { +.#{$name}-row-spacer { height: 10px; overflow: hidden; /* IE hack to allow < one line height divs */ } -.v-table-row, -.v-table-row-odd { +.#{$name}-row, +.#{$name}-row-odd { background: #fff; border: 0; margin: 0; @@ -147,36 +147,36 @@ cursor: pointer; } -.v-table-generated-row { +.#{$name}-generated-row { background: #efefef; } -.v-table-body-noselection .v-table-row, -.v-table-body-noselection .v-table-row-odd { +.#{$name}-body-noselection .#{$name}-row, +.#{$name}-body-noselection .#{$name}-row-odd { cursor: default; } -.v-table .v-selected { +.#{$name} .v-selected { background: #999; color: #fff; } -.v-table-cell-content { +.#{$name}-cell-content { white-space: nowrap; overflow: hidden; padding: 0 6px; border-right: 1px solid #aaa; } -.v-table-cell-wrapper { +.#{$name}-cell-wrapper { /* Do not specify any margins, paddings or borders here */ white-space: nowrap; overflow: hidden; } -.v-table-cell-wrapper-align-center { +.#{$name}-cell-wrapper-align-center { text-align: center; } -.v-table-cell-wrapper-align-right { +.#{$name}-cell-wrapper-align-right { text-align: right; } -.v-table-column-selector { +.#{$name}-column-selector { float: right; background: transparent url(../common/img/sprites.png) no-repeat 4px -37px; margin: -1.2em 0 0 0; @@ -185,10 +185,10 @@ position: relative; /* hide this from IE, it works without it */ cursor: pointer; } -.v-table.v-disabled .v-table-column-selector { +.#{$name}.v-disabled .#{$name}-column-selector { cursor: default; } -.v-table-focus-slot-left { +.#{$name}-focus-slot-left { border-left: 2px solid #999; float: none; margin-bottom: -1.2em; @@ -196,11 +196,11 @@ background: transparent; border-right: 1px solid #aaa; } -.v-table-focus-slot-right { +.#{$name}-focus-slot-right { border-right: 2px solid #999; margin-left: -2px; } -.v-table-header-drag { +.#{$name}-header-drag { position: absolute; background: #efefef; border: 1px solid #eee; @@ -209,30 +209,30 @@ margin-top: 20px; z-index: 30000; } -.v-table-header-drag .v-icon { +.#{$name}-header-drag .v-icon { vertical-align: middle; } -.v-table-scrollposition { +.#{$name}-scrollposition { width: 160px; background: #eee; border: 1px solid #aaa; } -.v-table-scrollposition span { +.#{$name}-scrollposition span { display: block; text-align: center; } -.v-table-body:focus, -.v-table-body-wrapper:focus { +.#{$name}-body:focus, +.#{$name}-body-wrapper:focus { outline: none; } -.v-table-body.focused { +.#{$name}-body.focused { border-color: #388ddd; } -.v-table-focus .v-table-cell-content { +.#{$name}-focus .#{$name}-cell-content { border-top: 1px dotted #0066bd; border-bottom: 1px dotted #0066bd; } -.v-table-focus .v-table-cell-wrapper { +.#{$name}-focus .#{$name}-cell-wrapper { margin-top: -1px; margin-bottom: -1px; } @@ -246,26 +246,26 @@ /************************************* * Drag'n'drop styles *************************************/ -.v-table-drag .v-table-body { +.#{$name}-drag .#{$name}-body { border-color: #1d9dff; } -.v-table-row-drag-middle .v-table-cell-content { +.#{$name}-row-drag-middle .#{$name}-cell-content { background-color: #bcdcff; } -.v-table-row-drag-top .v-table-cell-content { +.#{$name}-row-drag-top .#{$name}-cell-content { border-top: 2px solid #1d9dff; } -.v-table-row-drag-top .v-table-cell-wrapper { +.#{$name}-row-drag-top .#{$name}-cell-wrapper { margin-top: -2px; /* compensate the space consumed by border hint */ } -.v-table-row-drag-bottom .v-table-cell-content { +.#{$name}-row-drag-bottom .#{$name}-cell-content { border-bottom: 2px solid #1d9dff; } -.v-table-row-drag-bottom .v-table-cell-wrapper { +.#{$name}-row-drag-bottom .#{$name}-cell-wrapper { margin-bottom: -2px; /* compensate the space consumed by border hint */ } -.v-table-row-drag-top .v-table-cell-content:first-child:before, -.v-table-row-drag-bottom .v-table-cell-content:first-child:after { +.#{$name}-row-drag-top .#{$name}-cell-content:first-child:before, +.#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { display: block; position: absolute; @@ -275,8 +275,8 @@ margin-left: -6px; background: transparent url(../common/img/drag-slot-dot.png); } -.v-ff .v-table-row-drag-bottom .v-table-cell-content:first-child:after, -.v-ie .v-table-row-drag-bottom .v-table-cell-content:first-child:after { +.v-ff .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after, +.v-ie .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { margin-top: -2px; } diff --git a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss index c58c25be58..37dae131e1 100644 --- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss +++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss @@ -1,12 +1,12 @@ -@mixin base-tabsheet { +@mixin base-tabsheet($name : v-tabsheet) { -.v-tabsheet, -.v-tabsheet-content, -.v-tabsheet-deco { +.#{$name}, +.#{$name}-content, +.#{$name}-deco { outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ text-align: left; /* Force default alignment */ } -.v-tabsheet-tabs { +.#{$name}-tabs { empty-cells: hide; border-collapse: collapse; margin: 0; @@ -15,55 +15,55 @@ width: 100%; overflow:hidden; } -.v-tabsheet-tabitemcell:focus { +.#{$name}-tabitemcell:focus { outline: none; } -.v-tabsheet-tabitemcell, -.v-tabsheet-spacertd { +.#{$name}-tabitemcell, +.#{$name}-spacertd { margin: 0; padding: 0; vertical-align: bottom; } -.v-tabsheet-spacertd { +.#{$name}-spacertd { width: 100%; } -.v-tabsheet-spacertd div { +.#{$name}-spacertd div { border-left: 1px solid #aaa; border-bottom: 1px solid #aaa; height: 1em; padding: 0.2em 0; } -.v-tabsheet-hidetabs .v-tabsheet-tabcontainer { +.#{$name}-hidetabs .#{$name}-tabcontainer { display: none; } -.v-tabsheet-scroller { +.#{$name}-scroller { white-space: nowrap; text-align: right; margin-top: -1em; } -.v-disabled .v-tabsheet-scroller { +.v-disabled .#{$name}-scroller { display: none; } -.v-tabsheet-scrollerPrev, -.v-tabsheet-scrollerNext, -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerNext-disabled { +.#{$name}-scrollerPrev, +.#{$name}-scrollerNext, +.#{$name}-scrollerPrev-disabled, +.#{$name}-scrollerNext-disabled { border: 1px solid #aaa; background: #fff; width: 12px; height: 1em; cursor: pointer; } -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerNext-disabled { +.#{$name}-scrollerPrev-disabled, +.#{$name}-scrollerNext-disabled { opacity: 0.5; cursor: default; } -.v-tabsheet-tabs .v-caption, -.v-tabsheet-tabs .v-caption span { +.#{$name}-tabs .v-caption, +.#{$name}-tabs .v-caption span { white-space: nowrap; } -.v-tabsheet-caption-close { +.#{$name}-caption-close { display: inline; display: inline-block; zoom: 1; @@ -79,49 +79,49 @@ -moz-user-select: none; -webkit-user-select: none; } -.v-tabsheet .v-disabled .v-tabsheet-caption-close { +.#{$name} .v-disabled .#{$name}-caption-close { cursor: default; visibility: hidden; } -.v-tabsheet-tabitem:hover .v-tabsheet-caption-close { +.#{$name}-tabitem:hover .#{$name}-caption-close { visibility: visible; } -.v-tabsheet-tabitem { +.#{$name}-tabitem { border: 1px solid #aaa; border-right: none; cursor: pointer; padding: 0.2em 0.5em; } -.v-tabsheet-tabitem .v-caption { +.#{$name}-tabitem .v-caption { cursor: inherit; } -.v-tabsheet.v-disabled .v-tabsheet-tabitem, -.v-tabsheet-tabitemcell-disabled .v-tabsheet-tabitem { +.#{$name}.v-disabled .#{$name}-tabitem, +.#{$name}-tabitemcell-disabled .#{$name}-tabitem { cursor: default; } -.v-tabsheet-tabitem-selected { +.#{$name}-tabitem-selected { cursor: default; border-bottom-color: #fff; } -.v-tabsheet-tabitem-selected .v-caption { +.#{$name}-tabitem-selected .v-caption { cursor: default; } -.v-tabsheet-content { +.#{$name}-content { border: 1px solid #aaa; /* Vertical borders are not supported, use v-tabsheet-tabcontainer and v-tabsheet-deco to present these borders */ border-top: none; border-bottom: none; position: relative; } -.v-tabsheet-deco { +.#{$name}-deco { height: 1px; background: #aaa; overflow: hidden; } -.v-tabsheet-hidetabs .v-tabsheet-content { +.#{$name}-hidetabs .#{$name}-content { border: none; } -.v-tabsheet-hidetabs .v-tabsheet-deco { +.#{$name}-hidetabs .#{$name}-deco { height: 0; } diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.scss b/WebContent/VAADIN/themes/base/textfield/textfield.scss index dc6a4d9aa3..bb6765a60d 100644 --- a/WebContent/VAADIN/themes/base/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/base/textfield/textfield.scss @@ -1,23 +1,23 @@ // textfield-normal.css -@mixin base-textfield { +@mixin base-textfield($name : v-textfield) { -.v-textfield { +.#{$name} { text-align: left; /* Force default alignment */ } .v-textarea { resize: none; white-space: pre-wrap; } -.v-textfield-focus, +.#{$name}-focus, .v-textarea-focus { } -input.v-textfield-prompt, +input.#{$name}-prompt, textarea.v-textarea-prompt { color: #999; font-style: italic; } -input.v-textfield-readonly, +input.#{$name}-readonly, textarea.v-textarea-readonly { background: transparent; border: none; @@ -27,20 +27,20 @@ input.v-disabled, textarea.v-disabled { resize: none; } -input.v-textfield-readonly:focus, +input.#{$name}-readonly:focus, textarea.v-textarea-readonly:focus { outline: none; } /* Disabled by default .v-textarea-error, -.v-textfield-error, +.#{$name}-error, .v-richtextarea-error iframe.gwt-RichTextArea { background: #FFE0E0; } */ /* Disabled by default .v-textarea-required, -.v-textfield-required, +.#{$name}-required, .v-richtextarea-required iframe.gwt-RichTextArea { background: #FFE0E0; } diff --git a/WebContent/VAADIN/themes/base/tree/tree.scss b/WebContent/VAADIN/themes/base/tree/tree.scss index 2e34053ad5..2eb2c5908b 100644 --- a/WebContent/VAADIN/themes/base/tree/tree.scss +++ b/WebContent/VAADIN/themes/base/tree/tree.scss @@ -1,62 +1,62 @@ -@mixin base-tree { +@mixin base-tree($name : v-tree) { // tree-default.css -.v-tree { +.#{$name} { text-align: left; /* Force default alignment */ overflow: hidden; padding: 1px 0; outline: none; } -.v-tree-node { +.#{$name}-node { background: transparent url(../common/img/sprites.png) no-repeat 5px -37px; padding: 1px 0; } -.v-tree-node-caption:focus { +.#{$name}-node-caption:focus { outline: none; } -div.v-tree-node-leaf { +div.#{$name}-node-leaf { background: transparent; } -.v-tree-node-expanded { +.#{$name}-node-expanded { background: transparent url(../common/img/sprites.png) no-repeat -5px -10px; } -.v-tree-node-caption { +.#{$name}-node-caption { margin-left: 1em; } -.v-tree-node span { +.#{$name}-node span { cursor: pointer; } -.v-tree-node-caption div { +.#{$name}-node-caption div { white-space: nowrap; } -.v-tree-node-caption span, -.v-tree-node-caption .v-icon { +.#{$name}-node-caption span, +.#{$name}-node-caption .v-icon { vertical-align: middle; } -.v-tree-node-selected span { +.#{$name}-node-selected span { background: #999; color: #fff; } -.v-tree-node-children { +.#{$name}-node-children { padding-left: 1em; } // Drag'n'drop styles -.v-tree .v-tree-node-drag-top { +.#{$name} .#{$name}-node-drag-top { border-top: 2px solid #1d9dff; margin-top: -1px; padding-top: 0; } -.v-tree .v-tree-node-drag-bottom { +.#{$name} .#{$name}-node-drag-bottom { border-bottom: 2px solid #1d9dff; margin-bottom: -1px; padding-bottom: 0; } -.v-tree .v-tree-node-drag-top:before, -.v-tree .v-tree-node-drag-bottom:after, -.v-tree .v-tree-node-caption-drag-center:after { +.#{$name} .#{$name}-node-drag-top:before, +.#{$name} .#{$name}-node-drag-bottom:after, +.#{$name} .#{$name}-node-caption-drag-center:after { display: block; position: absolute; @@ -65,23 +65,23 @@ div.v-tree-node-leaf { margin-top: -4px; background: transparent url(../common/img/drag-slot-dot.png); } -.v-tree .v-tree-node-drag-bottom:after { +.#{$name} .#{$name}-node-drag-bottom:after { margin-top: -2px; } -.v-tree .v-tree-node-caption-drag-center:after { +.#{$name} .#{$name}-node-caption-drag-center:after { margin-left: 14px; } -.v-ff .v-tree .v-tree-node-caption-drag-center:after, -.v-ie .v-tree .v-tree-node-caption-drag-center:after { +.v-ff .#{$name} .#{$name}-node-caption-drag-center:after, +.v-ie .#{$name} .#{$name}-node-caption-drag-center:after { margin-top: -2px; } -.v-tree .v-tree-node-drag-top { +.#{$name} .#{$name}-node-drag-top { background-position: 5px -38px; } -.v-tree .v-tree-node-drag-top.v-tree-node-expanded { +.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded { background-position: -5px -11px; } -.v-tree .v-tree-node-caption-drag-center div { +.#{$name} .#{$name}-node-caption-drag-center div { border: 2px solid #1d9dff; -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -89,51 +89,51 @@ div.v-tree-node-leaf { margin: -2px 2px -2px -2px; background-color: #bcdcff; } -.v-tree .v-tree-node-caption-drag-center div { +.#{$name} .#{$name}-node-caption-drag-center div { background-color: rgba(169,209,255,.6); } -.v-tree .v-tree-node-caption-drag-center div, -.v-tree .v-tree-node-drag-top, -.v-tree .v-tree-node-drag-bottom { +.#{$name} .#{$name}-node-caption-drag-center div, +.#{$name} .#{$name}-node-drag-top, +.#{$name} .#{$name}-node-drag-bottom { border-color: rgba(0,109,232,.6); } // tree-connectors.css -.v-tree-connectors { +.#{$name}-connectors { // Make item caption height an even number (so that the connector dots overlap nicely) - .v-tree-node-caption { + .#{$name}-node-caption { padding-top: 1px; } - .v-tree-node { + .#{$name}-node { background: transparent url(img/connector-expand.png) no-repeat 2px -52px; } - .v-tree-node-expanded { + .#{$name}-node-expanded { background: transparent url(img/connector-collapse.png) no-repeat 2px -52px; } - .v-tree-node-last { + .#{$name}-node-last { background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px; } - .v-tree-node-expanded.v-tree-node-last { + .#{$name}-node-expanded.#{$name}-node-last { background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px; } - .v-tree-node-leaf { + .#{$name}-node-leaf { background: transparent url(img/connector-leaf.png) repeat-y 2px 50%; } - .v-tree-node-leaf-last { + .#{$name}-node-leaf-last { background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%; } - .v-tree-node-children { + .#{$name}-node-children { background: transparent url(img/connector.png) repeat-y 2px 0; } - .v-tree-node-children-last { + .#{$name}-node-children-last { background: transparent; } - .v-tree-node-drag-top, - .v-tree-node-expanded.v-tree-node-drag-top { + .#{$name}-node-drag-top, + .#{$name}-node-expanded.#{$name}-node-drag-top { background-position: 2px -53px; } - .v-tree-node-drag-top.v-tree-node-leaf { + .#{$name}-node-drag-top.#{$name}-node-leaf { background-position: 2px 50%; } } diff --git a/WebContent/VAADIN/themes/base/treetable/treetable.scss b/WebContent/VAADIN/themes/base/treetable/treetable.scss index 30e6b9ccbd..dfb4628794 100644 --- a/WebContent/VAADIN/themes/base/treetable/treetable.scss +++ b/WebContent/VAADIN/themes/base/treetable/treetable.scss @@ -1,6 +1,6 @@ -@mixin base-treetable { +@mixin base-treetable($name : v-treetable) { -.v-treetable-treespacer { +.#{$name}-treespacer { display: inline-block; background: transparent; height: 10px; @@ -11,58 +11,58 @@ top: 5px; } -.v-treetable-node-closed { +.#{$name}-node-closed { background: url(../treetable/img/arrow-right.png) right top no-repeat; } -.v-treetable-node-open { +.#{$name}-node-open { background: url(../treetable/img/arrow-down.png) right top no-repeat; } -.v-treetable .v-checkbox { +.#{$name} .v-checkbox { display: inline-block; padding-bottom: 4px; } -.v-treetable .v-table-row .v-table-cell-content, -.v-treetable .v-table-row-odd .v-table-cell-content { +.#{$name} .v-table-row .v-table-cell-content, +.#{$name} .v-table-row-odd .v-table-cell-content { position: relative; z-index: 10; } -.v-treetable .v-table-cell-wrapper { +.#{$name} .v-table-cell-wrapper { position: relative; } -.v-treetable .v-table-body .v-table-table .v-table-row-animating { +.#{$name} .v-table-body .v-table-table .v-table-row-animating { zoom:1; z-index:1; } -.v-treetable .v-table-body .v-table-table .v-table-row-animating, -.v-treetable .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content { +.#{$name} .v-table-body .v-table-table .v-table-row-animating, +.#{$name} .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content { background:transparent; } -.v-treetable-animation-clone { +.#{$name}-animation-clone { border-spacing: 0; zoom:1; } -div.v-treetable-animation-clone-wrapper { +div.#{$name}-animation-clone-wrapper { position: absolute; z-index: 2; background-color:#fff; } -div.v-treetable-animation-clone-wrapper table.v-treetable-animation-clone { +div.#{$name}-animation-clone-wrapper table.#{$name}-animation-clone { background-color:#fff; } -div table.v-treetable-animation-clone tr.v-table-row, -div table.v-treetable-animation-clone tr.v-table-row-odd, -div table.v-treetable-animation-clone tr.v-table-row td.v-table-cell-content, -div table.v-treetable-animation-clone tr.v-table-row-odd td.v-table-cell-content { +div table.#{$name}-animation-clone tr.v-table-row, +div table.#{$name}-animation-clone tr.v-table-row-odd, +div table.#{$name}-animation-clone tr.v-table-row td.v-table-cell-content, +div table.#{$name}-animation-clone tr.v-table-row-odd td.v-table-cell-content { visibility: visible; } diff --git a/WebContent/VAADIN/themes/base/upload/upload.scss b/WebContent/VAADIN/themes/base/upload/upload.scss index e5d94ce678..a992f95f06 100644 --- a/WebContent/VAADIN/themes/base/upload/upload.scss +++ b/WebContent/VAADIN/themes/base/upload/upload.scss @@ -1,22 +1,22 @@ -@mixin base-upload { +@mixin base-upload($name : v-upload) { -.v-upload { +.#{$name} { white-space: nowrap; } -.v-upload-immediate { +.#{$name}-immediate { position: relative; margin: 0; overflow: hidden; } -.v-ff .v-upload-immediate, -.v-op .v-upload-immediate { +.v-ff .#{$name}-immediate, +.v-op .#{$name}-immediate { display: inline-block; } -.v-upload-immediate input { +.#{$name}-immediate input { opacity: 0; filter: alpha(opacity=0); z-index: 2; @@ -28,7 +28,7 @@ background: transparent; } -.v-upload-immediate button { +.#{$name}-immediate button { position: relative; left: 0; top: 0; diff --git a/WebContent/VAADIN/themes/base/widget/widget.scss b/WebContent/VAADIN/themes/base/widget/widget.scss index 215c276142..a632e20d09 100644 --- a/WebContent/VAADIN/themes/base/widget/widget.scss +++ b/WebContent/VAADIN/themes/base/widget/widget.scss @@ -1,6 +1,6 @@ -@mixin base-widget { +@mixin base-widget($name : v-widget) { -.v-widget { +.#{$name} { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; diff --git a/WebContent/VAADIN/themes/base/window/window.scss b/WebContent/VAADIN/themes/base/window/window.scss index 33e54b046f..486906ea6d 100644 --- a/WebContent/VAADIN/themes/base/window/window.scss +++ b/WebContent/VAADIN/themes/base/window/window.scss @@ -1,29 +1,29 @@ -@mixin base-window { +@mixin base-window($name : v-window) { -.v-window { +.#{$name} { background: #fff; } -.v-window-contents { +.#{$name}-contents { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-window.v-has-width > div.popupContent, -.v-window.v-has-width .v-window-wrap, -.v-window.v-has-width .v-window-contents, -.v-window.v-has-width .v-window-contents > div { +.#{$name}.v-has-width > div.popupContent, +.#{$name}.v-has-width .#{$name}-wrap, +.#{$name}.v-has-width .#{$name}-contents, +.#{$name}.v-has-width .#{$name}-contents > div { width: 100%; } -.v-window.v-has-height > div.popupContent, -.v-window.v-has-height .v-window-wrap, -.v-window.v-has-height .v-window-contents, -.v-window.v-has-height .v-window-contents > div { +.#{$name}.v-has-height > div.popupContent, +.#{$name}.v-has-height .#{$name}-wrap, +.#{$name}.v-has-height .#{$name}-contents, +.#{$name}.v-has-height .#{$name}-contents > div { height: 100%; } -.v-window-outerheader { +.#{$name}-outerheader { padding: 0.3em 1em; height: 1.6em; position: relative; @@ -32,35 +32,35 @@ box-sizing: border-box; } -.v-window-outerheader, -.v-window-draggingCurtain { +.#{$name}-outerheader, +.#{$name}-draggingCurtain { cursor: move; } -.v-window-header { +.#{$name}-header { font-weight: bold; } /* A more specific selector to make sure padding isn't so easily overridden */ -div.v-window-header { +div.#{$name}-header { white-space: nowrap; text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; padding: 0; } -.v-window-header .v-icon { +.#{$name}-header .v-icon { vertical-align: middle; /* This has to be 'middle', not 'bottom', to allow larger icons than 16px */ } -.v-window-contents > div { +.#{$name}-contents > div { outline: none; } -.v-window-footer { +.#{$name}-footer { overflow: hidden; zoom: 1; height: 10px; position: relative; cursor: move; } -.v-window-resizebox { +.#{$name}-resizebox { width: 10px; height: 10px; background: #ddd; @@ -69,19 +69,19 @@ div.v-window-header { right: 0; } -.v-window-resizebox, -.v-window-resizingCurtain { +.#{$name}-resizebox, +.#{$name}-resizingCurtain { cursor: se-resize; } -.v-window div.v-window-footer-noresize { +.#{$name} div.#{$name}-footer-noresize { height: 0; } -.v-window-resizebox-disabled { +.#{$name}-resizebox-disabled { cursor: default; display: none; } -.v-window-closebox { +.#{$name}-closebox { position: absolute; top: 0; right: 0; @@ -91,7 +91,7 @@ div.v-window-header { cursor: pointer; overflow: hidden; } -.v-window-modalitycurtain { +.#{$name}-modalitycurtain { top: 0; left: 0; background: #999; |