diff options
Diffstat (limited to 'WebContent/VAADIN/themes/base')
34 files changed, 517 insertions, 517 deletions
diff --git a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss index c8bb57365f..4f007de9af 100644 --- a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss +++ b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss @@ -1,18 +1,18 @@ -@mixin base-absolutelayout($name : v-absolutelayout) { +@mixin base-absolutelayout($primaryStyleName : v-absolutelayout) { -.#{$name}-wrapper { +.#{$primaryStyleName}-wrapper { position: absolute; overflow: hidden; } -.#{$name}-margin, .#{$name}-canvas { +.#{$primaryStyleName}-margin, .#{$primaryStyleName}-canvas { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.#{$name}.v-has-height > div, .#{$name}.v-has-height > div > div { +.#{$primaryStyleName}.v-has-height > div, .#{$primaryStyleName}.v-has-height > div > div { height: 100%; } -.#{$name}.v-has-width > div, .#{$name}.v-has-width > div > div { +.#{$primaryStyleName}.v-has-width > div, .#{$primaryStyleName}.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 37a5973437..212e386e29 100644 --- a/WebContent/VAADIN/themes/base/button/button.scss +++ b/WebContent/VAADIN/themes/base/button/button.scss @@ -1,9 +1,9 @@ -@mixin base-button($name : v-button) { +@mixin base-button($primaryStyleName : v-button) { /* * Default button (more customizable) * -------------------------------------- */ -.#{$name} { +.#{$primaryStyleName} { display: inline-block; zoom: 1; text-align: center !important; @@ -26,12 +26,12 @@ box-sizing: border-box; } -.#{$name}.v-disabled { +.#{$primaryStyleName}.v-disabled { cursor: default; } -.#{$name}-wrap, -.#{$name}-caption { +.#{$primaryStyleName}-wrap, +.#{$primaryStyleName}-caption { vertical-align: baseline; white-space: nowrap; font: inherit; @@ -39,13 +39,13 @@ line-height: normal; } -.#{$name} .v-icon { +.#{$primaryStyleName} .v-icon { vertical-align: middle; margin-right: 3px; border: none; } -.#{$name} .v-errorindicator { +.#{$primaryStyleName} .v-errorindicator { display: inline-block; zoom: 1; vertical-align: middle; @@ -53,7 +53,7 @@ } /* Link style (we really should deprecate this) */ -.#{$name}-link { +.#{$primaryStyleName}-link { border: none; text-align: left !important; background: transparent; @@ -66,11 +66,11 @@ } /* Inset Safari focus outline a bit */ -.v-sa .#{$name}-link:focus{ +.v-sa .#{$primaryStyleName}-link:focus{ outline-offset: -3px; } -.#{$name}-link .#{$name}-caption { +.#{$primaryStyleName}-link .#{$primaryStyleName}-caption { text-decoration: underline; color: inherit; text-align: left; diff --git a/WebContent/VAADIN/themes/base/button/checkbox.scss b/WebContent/VAADIN/themes/base/button/checkbox.scss index 9222e76975..cc6143dbc1 100644 --- a/WebContent/VAADIN/themes/base/button/checkbox.scss +++ b/WebContent/VAADIN/themes/base/button/checkbox.scss @@ -1,21 +1,21 @@ -@mixin base-checkbox($name : v-checkbox) { +@mixin base-checkbox($primaryStyleName : v-checkbox) { - .#{$name} { + .#{$primaryStyleName} { display: block; } -.#{$name}, -.#{$name} label, -.#{$name} input, -.#{$name} .v-icon { +.#{$primaryStyleName}, +.#{$primaryStyleName} label, +.#{$primaryStyleName} input, +.#{$primaryStyleName} .v-icon { vertical-align: middle; white-space: nowrap; } -.#{$name} .v-icon { +.#{$primaryStyleName} .v-icon { margin: 0 2px; } -.#{$name} .v-errorindicator { +.#{$primaryStyleName} .v-errorindicator { float: none; display: inline; display: inline-block; @@ -24,12 +24,12 @@ /* Disabled by default -.#{$name}-error { +.#{$primaryStyleName}-error { background: #ffe0e0; } */ /* Disabled by default -.#{$name}-required { +.#{$primaryStyleName}-required { background: #ffe0e0; } */ diff --git a/WebContent/VAADIN/themes/base/button/nativebutton.scss b/WebContent/VAADIN/themes/base/button/nativebutton.scss index cccc51ff7b..724316a34d 100644 --- a/WebContent/VAADIN/themes/base/button/nativebutton.scss +++ b/WebContent/VAADIN/themes/base/button/nativebutton.scss @@ -1,13 +1,13 @@ -@mixin base-nativebutton($name : v-nativebutton) { +@mixin base-nativebutton($primaryStyleName : v-nativebutton) { -.#{$name} .v-icon { +.#{$primaryStyleName} .v-icon { vertical-align: middle; margin-right: 3px; border: none; } -.#{$name} .v-errorindicator { +.#{$primaryStyleName} .v-errorindicator { display: inline-block; zoom: 1; vertical-align: middle; @@ -15,7 +15,7 @@ } /* Link style (we really should deprecate this) */ -.#{$name}-link { +.#{$primaryStyleName}-link { border: none; text-align: left !important; background: transparent; @@ -27,13 +27,13 @@ user-select: text; } -.#{$name}-link .#{$name}-caption { +.#{$primaryStyleName}-link .#{$primaryStyleName}-caption { text-decoration: underline; color: inherit; text-align: left; } -.#{$name} { +.#{$primaryStyleName} { text-align: center !important; cursor: pointer; white-space: nowrap; @@ -42,31 +42,31 @@ font: inherit; line-height: normal; } -.#{$name} .#{$name}-caption { +.#{$primaryStyleName} .#{$primaryStyleName}-caption { vertical-align: middle; white-space: nowrap; font: inherit; color: inherit; } -.#{$name} .v-icon { +.#{$primaryStyleName} .v-icon { vertical-align: middle; margin-right: 3px; } -.#{$name} .v-errorindicator { +.#{$primaryStyleName} .v-errorindicator { display: inline-block; zoom: 1; float: none; } /* Fixes stretched buttons in IE7*/ -.v-ie .#{$name} { +.v-ie .#{$primaryStyleName} { overflow: visible; padding-left: 1em; padding-right: 1em; } -.v-ie .#{$name}-link { +.v-ie .#{$primaryStyleName}-link { padding: 0; } diff --git a/WebContent/VAADIN/themes/base/caption/caption.scss b/WebContent/VAADIN/themes/base/caption/caption.scss index d08f682adb..7b62866d3c 100644 --- a/WebContent/VAADIN/themes/base/caption/caption.scss +++ b/WebContent/VAADIN/themes/base/caption/caption.scss @@ -1,26 +1,26 @@ -@mixin base-caption($name : v-caption) { +@mixin base-caption($primaryStyleName : v-caption) { -.#{$name}wrapper { +.#{$primaryStyleName}wrapper { text-align: left; /* Force default alignment */ } -.#{$name} { +.#{$primaryStyleName} { overflow: hidden; white-space: nowrap; } .v-errorindicator { display: inline-block; } -.#{$name} .v-icon { +.#{$primaryStyleName} .v-icon { display: inline-block; padding-right: 2px; vertical-align: middle; } -.#{$name} .#{$name}text { +.#{$primaryStyleName} .#{$primaryStyleName}text { display: inline-block; overflow: hidden; vertical-align: middle; } -.#{$name} .v-required-field-indicator { +.#{$primaryStyleName} .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 2356a1689d..d6df771b85 100644 --- a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss +++ b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss @@ -1,35 +1,35 @@ -@mixin base-csslayout($name : v-csslayout) { +@mixin base-csslayout($primaryStyleName : v-csslayout) { -.#{$name} { +.#{$primaryStyleName} { overflow: hidden; } /* More specific selector to override 'v-connector' */ -div.#{$name} { +div.#{$primaryStyleName} { display: block; } -.#{$name}-margin, .#{$name}-container { +.#{$primaryStyleName}-margin, .#{$primaryStyleName}-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-has-width > .#{$name}-margin, -.v-has-width > .#{$name}-margin > .#{$name}-container { +.v-has-width > .#{$primaryStyleName}-margin, +.v-has-width > .#{$primaryStyleName}-margin > .#{$primaryStyleName}-container { width: 100%; } -.v-has-height > .#{$name}-margin, -.v-has-height > .#{$name}-margin > .#{$name}-container { +.v-has-height > .#{$primaryStyleName}-margin, +.v-has-height > .#{$primaryStyleName}-margin > .#{$primaryStyleName}-container { height: 100%; } -.#{$name}-margin-top { +.#{$primaryStyleName}-margin-top { padding-top: 12px; } -.#{$name}-margin-bottom { +.#{$primaryStyleName}-margin-bottom { padding-bottom: 12px; } -.#{$name}-margin-left { +.#{$primaryStyleName}-margin-left { padding-left: 12px; } -.#{$name}-margin-right { +.#{$primaryStyleName}-margin-right { padding-right: 12px; } diff --git a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss index 984c31e255..461e1b1246 100644 --- a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss +++ b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss @@ -1,6 +1,6 @@ -@mixin base-customcomponent($name : v-customcomponent) { +@mixin base-customcomponent($primaryStyleName : v-customcomponent) { -.#{$name} { +.#{$primaryStyleName} { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss index 0f5f1230c4..c8a13da4e9 100644 --- a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss +++ b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss @@ -1,6 +1,6 @@ -@mixin base-customlayout($name : v-customlayout) { +@mixin base-customlayout($primaryStyleName : v-customlayout) { -.#{$name} { +.#{$primaryStyleName} { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss index f7d71a576b..dcefe27f09 100644 --- a/WebContent/VAADIN/themes/base/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss @@ -1,91 +1,91 @@ -@mixin base-datefield($name : v-datefield) { +@mixin base-datefield($primaryStyleName : v-datefield) { -.#{$name} { +.#{$primaryStyleName} { white-space: nowrap; display: inline-block; /* Force minimum width */ line-height:0; /* Force minimum height */ } -.#{$name}-textfield { +.#{$primaryStyleName}-textfield { vertical-align: top; } -.#{$name}-button { +.#{$primaryStyleName}-button { cursor: pointer; } -.#{$name}-prompt .#{$name}-textfield { +.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield { color: #999; font-style: italic; } -.#{$name} .#{$name}-button-readonly { +.#{$primaryStyleName} .#{$primaryStyleName}-button-readonly { display: none; } -.#{$name}-calendarpanel table { +.#{$primaryStyleName}-calendarpanel table { width: 100%; } -.#{$name}-calendarpanel td { +.#{$primaryStyleName}-calendarpanel td { padding: 0; margin: 0; } -.#{$name}-calendarpanel:focus { +.#{$primaryStyleName}-calendarpanel:focus { outline:none; } -.#{$name}-calendarpanel-header td { +.#{$primaryStyleName}-calendarpanel-header td { text-align: center; } -.#{$name}-calendarpanel-month { +.#{$primaryStyleName}-calendarpanel-month { text-align: center; white-space: nowrap; } -.#{$name}-calendarpanel-weeknumber { +.#{$primaryStyleName}-calendarpanel-weeknumber { color: #999; border-right: 1px solid #ddd; font-size: 0.9em; } -.#{$name}-calendarpanel-day, -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day, +.#{$primaryStyleName}-calendarpanel-day-today { cursor: pointer; } -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day-today { border: 1px solid #ddd; } -.v-disabled .#{$name}-calendarpanel-day, -.v-disabled .#{$name}-calendarpanel-day-today { +.v-disabled .#{$primaryStyleName}-calendarpanel-day, +.v-disabled .#{$primaryStyleName}-calendarpanel-day-today { cursor: default; } -.#{$name}-calendarpanel-day-disabled { +.#{$primaryStyleName}-calendarpanel-day-disabled { cursor: default; opacity: .5; } -.#{$name}-calendarpanel-day-selected { +.#{$primaryStyleName}-calendarpanel-day-selected { cursor: default; background: #333; color: #fff; } -.#{$name}-calendarpanel-day-focused { +.#{$primaryStyleName}-calendarpanel-day-focused { outline: 1px dotted black; } -.#{$name}-calendarpanel-day-offmonth { +.#{$primaryStyleName}-calendarpanel-day-offmonth { color: #666; } -.#{$name}-time { +.#{$primaryStyleName}-time { white-space: nowrap; } -.#{$name}-time .v-label { +.#{$primaryStyleName}-time .v-label { display: inline; } -.#{$name}-popup { +.#{$primaryStyleName}-popup { background: #fff; } /* Disabled by default -.#{$name}-error .v-textfield, -.#{$name}-error .#{$name}-calendarpanel { +.#{$primaryStyleName}-error .v-textfield, +.#{$primaryStyleName}-error .#{$primaryStyleName}-calendarpanel { background: #ffe0e0; } */ /* Disabled by default -.#{$name}-required .v-textfield, -.#{$name}-required .#{$name}-calendarpanel { +.#{$primaryStyleName}-required .v-textfield, +.#{$primaryStyleName}-required .#{$primaryStyleName}-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 e9bc677b3e..2baf8a4e09 100644 --- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss +++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss @@ -1,6 +1,6 @@ -@mixin base-dragwrapper($name : v-ddwrapper) { +@mixin base-dragwrapper($primaryStyleName : v-ddwrapper) { -.#{$name} { +.#{$primaryStyleName} { padding: 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -13,7 +13,7 @@ -khtml-user-select: none; -webkit-user-select: none; } -.v-ie .#{$name} a.drag-start { +.v-ie .#{$primaryStyleName} a.drag-start { display: block; position: absolute; top: 0; @@ -27,22 +27,22 @@ background-color:cyan; filter: alpha(opacity=0); } -.#{$name}-over { +.#{$primaryStyleName}-over { border: 2px solid #1d9dff; background-color: #bcdcff; padding: 0; } -.#{$name}-over { +.#{$primaryStyleName}-over { background-color: rgba(169,209,255,.6); } -.no-box-drag-hints .#{$name}-over { +.no-box-drag-hints .#{$primaryStyleName}-over { border: none; background-color: transparent; padding: 2px; } -&.v-app .#{$name}-over-top, -.v-window .#{$name}-over-top, -.v-popupview-popup .#{$name}-over-top { +&.v-app .#{$primaryStyleName}-over-top, +.v-window .#{$primaryStyleName}-over-top, +.v-popupview-popup .#{$primaryStyleName}-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 .#{$name}-over-bottom, -.v-window .#{$name}-over-bottom, -.v-popupview-popup .#{$name}-over-bottom { +&.v-app .#{$primaryStyleName}-over-bottom, +.v-window .#{$primaryStyleName}-over-bottom, +.v-popupview-popup .#{$primaryStyleName}-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 .#{$name}-over-left, -.v-window .#{$name}-over-left, -.v-popupview-popup .#{$name}-over-left { +&.v-app .#{$primaryStyleName}-over-left, +.v-window .#{$primaryStyleName}-over-left, +.v-popupview-popup .#{$primaryStyleName}-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 .#{$name}-over-right, -.v-window .#{$name}-over-right, -.v-popupview-popup .#{$name}-over-right { +&.v-app .#{$primaryStyleName}-over-right, +.v-window .#{$primaryStyleName}-over-right, +.v-popupview-popup .#{$primaryStyleName}-over-right { border: none; border-right: 2px solid #1d9dff; background-color: transparent; @@ -88,27 +88,27 @@ -webkit-border-radius: 0; border-radius: 0; } -.#{$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 { +.#{$primaryStyleName}, +.#{$primaryStyleName}-over, +&.v-app .#{$primaryStyleName}-over-top, +.v-window .#{$primaryStyleName}-over-top, +.v-popupview-popup .#{$primaryStyleName}-over-top, +&.v-app .#{$primaryStyleName}-over-bottom, +.v-window .#{$primaryStyleName}-over-bottom, +.v-popupview-popup .#{$primaryStyleName}-over-bottom, +&.v-app .#{$primaryStyleName}-over-left, +.v-window .#{$primaryStyleName}-over-left, +.v-popupview-popup .#{$primaryStyleName}-over-left, +&.v-app .#{$primaryStyleName}-over-right, +.v-window .#{$primaryStyleName}-over-right, +.v-popupview-popup .#{$primaryStyleName}-over-right { border-color: rgba(0,109,232,.6); } -.#{$name}-over-top:before, -.#{$name}-over-bottom:after, -.#{$name}-over-left:before, -.#{$name}-over-right:before { +.#{$primaryStyleName}-over-top:before, +.#{$primaryStyleName}-over-bottom:after, +.#{$primaryStyleName}-over-left:before, +.#{$primaryStyleName}-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; } -.#{$name}-over-bottom:after { +.#{$primaryStyleName}-over-bottom:after { margin-top: -2px; } -.#{$name}-over-left:before, -.#{$name}-over-right:before { +.#{$primaryStyleName}-over-left:before, +.#{$primaryStyleName}-over-right:before { background-position: 0 -6px; margin-top: -2px; margin-left: -4px; } -.#{$name}-over-right:before { +.#{$primaryStyleName}-over-right:before { position: relative; margin-bottom: -4px; margin-right: -4px; @@ -136,26 +136,26 @@ background-position: 100% -6px; } -.no-horizontal-drag-hints .#{$name}-over-left { +.no-horizontal-drag-hints .#{$primaryStyleName}-over-left { padding-left: 2px; border-left: none; } -.no-horizontal-drag-hints .#{$name}-over-right { +.no-horizontal-drag-hints .#{$primaryStyleName}-over-right { padding-right: 2px; border-right: none; } -.no-vertical-drag-hints .#{$name}-over-top { +.no-vertical-drag-hints .#{$primaryStyleName}-over-top { padding-top: 2px; border-top: none; } -.no-vertical-drag-hints .#{$name}-over-bottom { +.no-vertical-drag-hints .#{$primaryStyleName}-over-bottom { padding-bottom: 2px; border-bottom: none; } -.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 { +.no-horizontal-drag-hints .#{$primaryStyleName}-over-left:before, +.no-horizontal-drag-hints .#{$primaryStyleName}-over-right:before, +.no-vertical-drag-hints .#{$primaryStyleName}-over-top:before, +.no-vertical-drag-hints .#{$primaryStyleName}-over-bottom:after { display: none; } diff --git a/WebContent/VAADIN/themes/base/embedded/embedded.scss b/WebContent/VAADIN/themes/base/embedded/embedded.scss index bd7403bda2..abb5e7956f 100644 --- a/WebContent/VAADIN/themes/base/embedded/embedded.scss +++ b/WebContent/VAADIN/themes/base/embedded/embedded.scss @@ -1,6 +1,6 @@ -@mixin base-embedded($name : v-embedded) { +@mixin base-embedded($primaryStyleName : v-embedded) { -.v-table .#{$name}-image { +.v-table .#{$primaryStyleName}-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 6bfe112254..a8006fdfe3 100644 --- a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss +++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss @@ -1,55 +1,55 @@ -@mixin base-formlayout($name : v-formlayout) { +@mixin base-formlayout($primaryStyleName : v-formlayout) { -.#{$name}.v-has-width > table { +.#{$primaryStyleName}.v-has-width > table { width: 100%; } -.#{$name}.v-has-height > table { +.#{$primaryStyleName}.v-has-height > table { height: 100%; } -.#{$name}-cell .v-errorindicator { +.#{$primaryStyleName}-cell .v-errorindicator { display: block; } -.#{$name}-error-indicator { +.#{$primaryStyleName}-error-indicator { /* fix width so layout is not jumpy when error disappears */ width: 12px; } -.#{$name}-captioncell { +.#{$primaryStyleName}-captioncell { text-align:right; white-space: nowrap; } -.#{$name}-errorcell, .#{$name}-captioncell { +.#{$primaryStyleName}-errorcell, .#{$primaryStyleName}-captioncell { width: 1px; /* Don't use any extra space */ } -.#{$name}-captioncell .v-caption { +.#{$primaryStyleName}-captioncell .v-caption { overflow: visible; } -.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-captioncell, -.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-contentcell, -.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-errorcell { +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell, +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell, +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-errorcell { padding-top: 6px; } -.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-captioncell, -.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-contentcell, -.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-errorcell { +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-captioncell, +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-contentcell, +.#{$primaryStyleName}-spacing > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-errorcell { padding-top: 0; } -.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-captioncell, -.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-contentcell, -.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-errorcell { +.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-captioncell, +.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-contentcell, +.#{$primaryStyleName}-margin-top > tbody > .#{$primaryStyleName}-firstrow > .#{$primaryStyleName}-errorcell { padding-top: 12px; } -.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-captioncell, -.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-contentcell, -.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-errorcell { +.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-captioncell, +.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-contentcell, +.#{$primaryStyleName}-margin-bottom > tbody > .#{$primaryStyleName}-lastrow > .#{$primaryStyleName}-errorcell { padding-bottom: 12px; } -.#{$name}-margin-left > tbody > .#{$name}-row > .#{$name}-captioncell { +.#{$primaryStyleName}-margin-left > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell { padding-left: 12px; } -.#{$name}-margin-right > tbody > .#{$name}-row > .#{$name}-contentcell { +.#{$primaryStyleName}-margin-right > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell { padding-right: 12px; } -.#{$name}-captioncell .v-caption .v-required-field-indicator { +.#{$primaryStyleName}-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 45b02316ae..54a2e8667c 100644 --- a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss +++ b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss @@ -1,34 +1,34 @@ -@mixin base-gridlayout($name : v-gridlayout) { +@mixin base-gridlayout($primaryStyleName : v-gridlayout) { -.#{$name} { +.#{$primaryStyleName} { position: relative; } -.#{$name}-slot { +.#{$primaryStyleName}-slot { position: absolute; } -.#{$name}-margin-top { +.#{$primaryStyleName}-margin-top { padding-top: 12px; } -.#{$name}-margin-bottom { +.#{$primaryStyleName}-margin-bottom { padding-bottom: 12px; } -.#{$name}-margin-left { +.#{$primaryStyleName}-margin-left { padding-left: 12px; } -.#{$name}-margin-right { +.#{$primaryStyleName}-margin-right { padding-right: 12px; } -.#{$name}-spacing-on { +.#{$primaryStyleName}-spacing-on { padding-left: 6px; padding-top: 6px; overflow: hidden; } -.#{$name}-spacing, -.#{$name}-spacing-off { +.#{$primaryStyleName}-spacing, +.#{$primaryStyleName}-spacing-off { padding-left: 0; padding-top: 0; } -.#{$name}-spacing-off { +.#{$primaryStyleName}-spacing-off { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss index 0c42979b6b..06a24125c2 100644 --- a/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss +++ b/WebContent/VAADIN/themes/base/inlinedatefield/inlinedatefield.scss @@ -1,5 +1,5 @@ -@mixin base-inline-datefield($name : v-inline-datefield){ +@mixin base-inline-datefield($primaryStyleName : v-inline-datefield){ - /* FIXME $name should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */ + /* FIXME $primaryStyleName should be passed to the the mixing instead of the default. Fix when SASS compiler works. #9821 */ @include base-datefield(v-inline-datefield); }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/label/label.scss b/WebContent/VAADIN/themes/base/label/label.scss index 6ccd0f3d27..3c72796828 100644 --- a/WebContent/VAADIN/themes/base/label/label.scss +++ b/WebContent/VAADIN/themes/base/label/label.scss @@ -1,10 +1,10 @@ -@mixin base-label($name : v-label) { +@mixin base-label($primaryStyleName : v-label) { -.#{$name} { +.#{$primaryStyleName} { overflow: hidden; } -.#{$name}.v-has-width { +.#{$primaryStyleName}.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 455ab2cfd0..bff6fbd5fe 100644 --- a/WebContent/VAADIN/themes/base/link/link.scss +++ b/WebContent/VAADIN/themes/base/link/link.scss @@ -1,20 +1,20 @@ -@mixin base-link($name : v-link) { +@mixin base-link($primaryStyleName : v-link) { -.#{$name} { +.#{$primaryStyleName} { white-space: nowrap; } -.#{$name} a { +.#{$primaryStyleName} a { vertical-align: middle; text-decoration: none; } -.#{$name} span { +.#{$primaryStyleName} span { text-decoration: underline; vertical-align: middle; } .v-disabled a { cursor: default; } -.#{$name} img { +.#{$primaryStyleName} 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 d31af3b9e2..48fabbf793 100644 --- a/WebContent/VAADIN/themes/base/loginform/loginform.scss +++ b/WebContent/VAADIN/themes/base/loginform/loginform.scss @@ -1,6 +1,6 @@ -@mixin base-loginform($name : v-loginform) { +@mixin base-loginform($primaryStyleName : v-loginform) { -.#{$name} { +.#{$primaryStyleName} { height: 140px; width: 200px; } diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.scss b/WebContent/VAADIN/themes/base/menubar/menubar.scss index f896e967b5..732f3d3444 100644 --- a/WebContent/VAADIN/themes/base/menubar/menubar.scss +++ b/WebContent/VAADIN/themes/base/menubar/menubar.scss @@ -1,11 +1,11 @@ -@mixin base-menubar($name : v-menubar) { +@mixin base-menubar($primaryStyleName : v-menubar) { -.#{$name} { +.#{$primaryStyleName} { display: inline-block; white-space: nowrap; overflow: hidden; } -.#{$name} .#{$name}-menuitem { +.#{$primaryStyleName} .#{$primaryStyleName}-menuitem { cursor: default; vertical-align: middle; white-space: nowrap; @@ -13,36 +13,36 @@ display: inline-block; zoom: 1; } -.#{$name} .#{$name}-menuitem-caption .v-icon { +.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-caption .v-icon { vertical-align: middle; white-space: nowrap; } -.#{$name}-submenu { +.#{$primaryStyleName}-submenu { background: #fff; } -.#{$name}-menuitem-selected { +.#{$primaryStyleName}-menuitem-selected { background: #333; color: #fff; } -.#{$name}-submenu .#{$name}-menuitem { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem { cursor: default; display: block; position: relative; padding-right: 1.5em; } -.#{$name}-submenu .#{$name}-menuitem-caption { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption { display: block; } -.#{$name}-submenu .#{$name}-menuitem *, -.#{$name}-submenu .#{$name}-menuitem-caption * { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem *, +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption * { white-space: nowrap; } -.#{$name}-submenu-indicator { +.#{$primaryStyleName}-submenu-indicator { display: none; /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } -.#{$name}-submenu .#{$name}-submenu-indicator { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator { display: block; position: absolute; right: 0; @@ -50,20 +50,20 @@ height: 1em; font-size: 0.9em; } -.#{$name}-menuitem-disabled, -.#{$name} span.#{$name}-menuitem-disabled:hover, -.#{$name} span.#{$name}-menuitem-disabled:focus, -.#{$name} span.#{$name}-menuitem-disabled:active { +.#{$primaryStyleName}-menuitem-disabled, +.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:hover, +.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:focus, +.#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:active { color: #999; } -.#{$name}-more-menuitem { +.#{$primaryStyleName}-more-menuitem { /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } -.#{$name}-separator { +.#{$primaryStyleName}-separator { overflow: hidden; } -.#{$name}-separator span { +.#{$primaryStyleName}-separator span { display: block; text-indent: -9999px; font-size: 1px; @@ -72,26 +72,26 @@ margin: 3px 0 2px; overflow: hidden; } -.#{$name} .v-icon, -.#{$name}-submenu .v-icon { +.#{$primaryStyleName} .v-icon, +.#{$primaryStyleName}-submenu .v-icon { margin-right: 3px; } -.#{$name}:focus, -.#{$name}-popup:focus, -.#{$name}-popup .popupContent:focus, -.#{$name}-popup .popupContent .#{$name}-submenu:focus{ +.#{$primaryStyleName}:focus, +.#{$primaryStyleName}-popup:focus, +.#{$primaryStyleName}-popup .popupContent:focus, +.#{$primaryStyleName}-popup .popupContent .#{$primaryStyleName}-submenu:focus{ outline: none; } /* Checkboxes for checkable/checked menu items */ /* Checked/unchecked requires combined style selected-(un)checked for IE6 */ -.#{$name}-submenu-check-column .#{$name}-menuitem { +.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem { padding-left: 6px; } -.#{$name}-submenu-check-column .#{$name}-menuitem-caption { +.#{$primaryStyleName}-submenu-check-column .#{$primaryStyleName}-menuitem-caption { padding-left: 18px; } -.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-checked .#{$primaryStyleName}-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 350db1a75f..9751422fb7 100644 --- a/WebContent/VAADIN/themes/base/notification/notification.scss +++ b/WebContent/VAADIN/themes/base/notification/notification.scss @@ -1,6 +1,6 @@ -@mixin base-notification($name : v-Notification) { +@mixin base-notification($primaryStyleName : v-Notification) { -.#{$name} { +.#{$primaryStyleName} { background: #999; color: #fff; cursor: pointer; @@ -9,33 +9,33 @@ max-width:85%; } -.#{$name} h1, -.#{$name} p, -.#{$name}-error h1, -.#{$name}-error p, -.#{$name}-warning h1, -.#{$name}-warning p { +.#{$primaryStyleName} h1, +.#{$primaryStyleName} p, +.#{$primaryStyleName}-error h1, +.#{$primaryStyleName}-error p, +.#{$primaryStyleName}-warning h1, +.#{$primaryStyleName}-warning p { display: inline; margin: 0 0.5em 0 0; } -.#{$name}-warning { +.#{$primaryStyleName}-warning { background: orange; } -.#{$name}-error { +.#{$primaryStyleName}-error { background: red; } -.#{$name}-tray h1 { +.#{$primaryStyleName}-tray h1 { display: block; } -.#{$name}-tray p { +.#{$primaryStyleName}-tray p { display: block; } -.#{$name}-system { +.#{$primaryStyleName}-system { background-color: red; opacity: .7; filter: alpha(opacity=70); } -.#{$name}-system h1 { +.#{$primaryStyleName}-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 46571f8bd5..bcc4875a78 100644 --- a/WebContent/VAADIN/themes/base/panel/panel.scss +++ b/WebContent/VAADIN/themes/base/panel/panel.scss @@ -1,48 +1,48 @@ -@mixin base-panel($name : v-panel) { +@mixin base-panel($primaryStyleName : v-panel) { -.#{$name}, -.#{$name}-caption, -.#{$name}-content, -.#{$name}-deco, -.#{$name}-light, -.#{$name}-caption-light, -.#{$name}-content-light, -.#{$name}-deco-light { +.#{$primaryStyleName}, +.#{$primaryStyleName}-caption, +.#{$primaryStyleName}-content, +.#{$primaryStyleName}-deco, +.#{$primaryStyleName}-light, +.#{$primaryStyleName}-caption-light, +.#{$primaryStyleName}-content-light, +.#{$primaryStyleName}-deco-light { outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ text-align: left; /* Force default alignment */ } -.#{$name}-caption .v-errorindicator { +.#{$primaryStyleName}-caption .v-errorindicator { float: none; display: inline; } -.#{$name}-caption .v-icon { +.#{$primaryStyleName}-caption .v-icon { display: inline; vertical-align: middle; } -.#{$name}-caption span { +.#{$primaryStyleName}-caption span { vertical-align: middle; display: table-row; } -.#{$name}-caption { +.#{$primaryStyleName}-caption { white-space: nowrap; overflow:hidden; font-weight: bold; } -.#{$name}-nocaption { +.#{$primaryStyleName}-nocaption { overflow: hidden; } -.#{$name}-content { +.#{$primaryStyleName}-content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.#{$name}.v-has-width > .#{$name}-content { +.#{$primaryStyleName}.v-has-width > .#{$primaryStyleName}-content { width: 100%; } -.#{$name}.v-has-height > .#{$name}-content { +.#{$primaryStyleName}.v-has-height > .#{$primaryStyleName}-content { height: 100%; } -.#{$name}-deco { +.#{$primaryStyleName}-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 b52f79db76..cafcf9b720 100644 --- a/WebContent/VAADIN/themes/base/popupview/popupview.scss +++ b/WebContent/VAADIN/themes/base/popupview/popupview.scss @@ -1,14 +1,14 @@ -@mixin base-popupview($name : v-popupview) { +@mixin base-popupview($primaryStyleName : v-popupview) { -.#{$name} { +.#{$primaryStyleName} { cursor: pointer; text-decoration: underline; white-space: nowrap; } -.#{$name}-popup { +.#{$primaryStyleName}-popup { overflow: auto; } -.#{$name}-loading { +.#{$primaryStyleName}-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 7af1ba1f0e..0065cf3d07 100644 --- a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss +++ b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss @@ -1,17 +1,17 @@ -@mixin base-progressindicator($name : v-progressindicator) { +@mixin base-progressindicator($primaryStyleName : v-progressindicator) { -.#{$name} { +.#{$primaryStyleName} { width: 150px; } -.#{$name}-wrapper { +.#{$primaryStyleName}-wrapper { height: 7px; border: 1px solid #ddd; } -.#{$name}-indicator { +.#{$primaryStyleName}-indicator { height: 7px; background: #ddd; } -div.#{$name}-indeterminate { +div.#{$primaryStyleName}-indeterminate { height: 20px; width: 20px; background: #fff url(../common/img/ajax-loader-medium.gif) no-repeat 50%; @@ -20,13 +20,13 @@ div.#{$name}-indeterminate { -moz-border-radius: 4px; } /* Hide obsolete elements in indeterminate mode */ -.#{$name}-indeterminate .#{$name}-wrapper, -.#{$name}-indeterminate .#{$name}-indicator, -.#{$name}-indeterminate-disabled .#{$name}-wrapper, -.#{$name}-indeterminate-disabled .#{$name}-indicator { +.#{$primaryStyleName}-indeterminate .#{$primaryStyleName}-wrapper, +.#{$primaryStyleName}-indeterminate .#{$primaryStyleName}-indicator, +.#{$primaryStyleName}-indeterminate-disabled .#{$primaryStyleName}-wrapper, +.#{$primaryStyleName}-indeterminate-disabled .#{$primaryStyleName}-indicator { display: none; } -div.#{$name}-indeterminate-disabled { +div.#{$primaryStyleName}-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 8e252e1f60..e45249ce66 100644 --- a/WebContent/VAADIN/themes/base/select/select.scss +++ b/WebContent/VAADIN/themes/base/select/select.scss @@ -1,58 +1,58 @@ -@mixin base-select($name : v-select) { +@mixin base-select($primaryStyleName : v-select) { -.#{$name} { +.#{$primaryStyleName} { text-align: left; } -.#{$name}-optiongroup .#{$name}-option { +.#{$primaryStyleName}-optiongroup .#{$primaryStyleName}-option { display: block; white-space: nowrap; } -.#{$name}-optiongroup .v-icon { +.#{$primaryStyleName}-optiongroup .v-icon { vertical-align: middle; white-space: nowrap; margin: 0 2px; } -.v-ie .#{$name}-optiongroup .#{$name}-option { +.v-ie .#{$primaryStyleName}-optiongroup .#{$primaryStyleName}-option { zoom: 1; } -.#{$name}-select { +.#{$primaryStyleName}-select { display: block; } -.#{$name}-twincol { +.#{$primaryStyleName}-twincol { white-space: nowrap; } -.#{$name}-twincol-options { +.#{$primaryStyleName}-twincol-options { float: left; } -.#{$name}-twincol-caption-left { +.#{$primaryStyleName}-twincol-caption-left { float: left; overflow: hidden; text-overflow: ellipsis; } -.#{$name}-twincol-selections { +.#{$primaryStyleName}-twincol-selections { font-weight: bold; } -.#{$name}-twincol-caption-right { +.#{$primaryStyleName}-twincol-caption-right { float: right; overflow: hidden; text-overflow: ellipsis; } -.#{$name}-twincol-buttons { +.#{$primaryStyleName}-twincol-buttons { float: left; text-align: center; } -.#{$name}-twincol-buttons .#{$name}-twincol-deco { +.#{$primaryStyleName}-twincol-buttons .#{$primaryStyleName}-twincol-deco { clear: both; } -.#{$name}-twincol .v-textfield { +.#{$primaryStyleName}-twincol .v-textfield { display: block; float: left; clear: left; } -.#{$name}-twincol .v-button { +.#{$primaryStyleName}-twincol .v-button { float: left; } -.#{$name}-twincol-buttons .v-button { +.#{$primaryStyleName}-twincol-buttons .v-button { float: none; } .v-filterselect { @@ -150,10 +150,10 @@ /* Error styles (disabled by default) .v-filterselect-error .v-filterselect-input, -.#{$name}-error .#{$name}-option, -.#{$name}-error .#{$name}-select, -.#{$name}-error .#{$name}-twincol-selections, -.#{$name}-error .#{$name}-twincol-options { +.#{$primaryStyleName}-error .#{$primaryStyleName}-option, +.#{$primaryStyleName}-error .#{$primaryStyleName}-select, +.#{$primaryStyleName}-error .#{$primaryStyleName}-twincol-selections, +.#{$primaryStyleName}-error .#{$primaryStyleName}-twincol-options { background: #ffaaaa; } */ @@ -161,10 +161,10 @@ /* Required field styles (disabled by default) .v-filterselect-error .v-filterselect-input, -.#{$name}-required .#{$name}-option, -.#{$name}-required .#{$name}-select, -.#{$name}-required .#{$name}-twincol-selections, -.#{$name}-required .#{$name}-twincol-options { +.#{$primaryStyleName}-required .#{$primaryStyleName}-option, +.#{$primaryStyleName}-required .#{$primaryStyleName}-select, +.#{$primaryStyleName}-required .#{$primaryStyleName}-twincol-selections, +.#{$primaryStyleName}-required .#{$primaryStyleName}-twincol-options { background: #ffaaaa; } */ diff --git a/WebContent/VAADIN/themes/base/shadow/shadow.scss b/WebContent/VAADIN/themes/base/shadow/shadow.scss index c0c94e7680..47bf4acfde 100644 --- a/WebContent/VAADIN/themes/base/shadow/shadow.scss +++ b/WebContent/VAADIN/themes/base/shadow/shadow.scss @@ -1,31 +1,31 @@ -@mixin base-shadow($name : v-shadow) { +@mixin base-shadow($primaryStyleName : v-shadow) { -.#{$name} { +.#{$primaryStyleName} { position: absolute; } -.#{$name} .top-left { +.#{$primaryStyleName} .top-left { position: absolute; overflow: hidden; top: -3px; left: -5px; width: 10px; height: 10px; background: transparent url(img/top-left.png); } -.#{$name} .top { +.#{$primaryStyleName} .top { position: absolute; overflow: hidden; top: -3px; left: 5px; height: 10px; right: 5px; background: transparent url(img/top.png); } -.#{$name} .top-right { +.#{$primaryStyleName} .top-right { position: absolute; overflow: hidden; top: -3px; right: -5px; width: 10px; height: 10px; background: transparent url(img/top-right.png); } -.#{$name} .left { +.#{$primaryStyleName} .left { position: absolute; overflow: hidden; top: 7px; left: -5px; width: 10px; @@ -33,14 +33,14 @@ background: transparent url(img/left.png); } -.#{$name} .center { +.#{$primaryStyleName} .center { position: absolute; overflow: hidden; top: 7px; left: 5px; bottom: 3px; right: 5px; background: transparent url(img/center.png); } -.#{$name} .right { +.#{$primaryStyleName} .right { position: absolute; overflow: hidden; top: 7px; right: -5px; width: 10px; @@ -48,21 +48,21 @@ background: transparent url(img/right.png); } -.#{$name} .bottom-left { +.#{$primaryStyleName} .bottom-left { position: absolute; overflow: hidden; bottom: -7px; left: -5px; width: 10px; height: 10px; background: transparent url(img/bottom-left.png); } -.#{$name} .bottom { +.#{$primaryStyleName} .bottom { position: absolute; overflow: hidden; bottom: -7px; left: 5px; right: 5px; height: 10px; background: transparent url(img/bottom.png); } -.#{$name} .bottom-right { +.#{$primaryStyleName} .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 bfb4c3b950..9ef94d9d9e 100644 --- a/WebContent/VAADIN/themes/base/slider/slider.scss +++ b/WebContent/VAADIN/themes/base/slider/slider.scss @@ -1,9 +1,9 @@ -@mixin base-slider($name : v-slider) { +@mixin base-slider($primaryStyleName : v-slider) { -.#{$name} { +.#{$primaryStyleName} { margin: 5px 0; } -.#{$name}-base { +.#{$primaryStyleName}-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; } -.#{$name}-handle { +.#{$primaryStyleName}-handle { background: #aaa; width: 12px; height: 12px; @@ -20,7 +20,7 @@ font-size: 0; } -.#{$name}-vertical { +.#{$primaryStyleName}-vertical { width: 2px; height: auto; margin: 0 5px; @@ -28,19 +28,19 @@ border-left: 1px solid #cccfd0; border-right: 1px solid #cccfd0; } -.#{$name}-vertical .#{$name}-base { +.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base { width: 2px; border-bottom: 1px solid #eee; border-right: none; } -.#{$name}-vertical .#{$name}-handle { +.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle { width: 12px; height: 12px; font-size: 0; margin-left: -5px; } -.#{$name}-feedback { +.#{$primaryStyleName}-feedback { padding: 2px 5px; background: #444; color: #fff; @@ -56,12 +56,12 @@ } /* Disabled by default -.#{$name}-error .#{$name}-base { +.#{$primaryStyleName}-error .#{$primaryStyleName}-base { background: #FFE0E0; } */ /* Disabled by default -.#{$name}-required .#{$name}-base { +.#{$primaryStyleName}-required .#{$primaryStyleName}-base { background: #FFE0E0; } */ diff --git a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss index f9731cf83c..bae740257f 100644 --- a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss +++ b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss @@ -1,13 +1,13 @@ -@mixin base-splitpanel($name : v-splitpanel) { +@mixin base-splitpanel($primaryStyleName : v-splitpanel) { -.#{$name}-horizontal, -.#{$name}-vertical { +.#{$primaryStyleName}-horizontal, +.#{$primaryStyleName}-vertical { overflow: hidden; } -.#{$name}-hsplitter { +.#{$primaryStyleName}-hsplitter { width: 6px; } -.#{$name}-hsplitter div { +.#{$primaryStyleName}-hsplitter div { width: 6px; position: absolute; top: 0; @@ -16,19 +16,19 @@ cursor: e-resize; cursor: col-resize; } -.v-disabled .#{$name}-hsplitter div { +.v-disabled .#{$primaryStyleName}-hsplitter div { cursor: default; } -.#{$name}-vsplitter { +.#{$primaryStyleName}-vsplitter { height: 6px; } -.#{$name}-vsplitter div { +.#{$primaryStyleName}-vsplitter div { height: 6px; background: #ddd; cursor: s-resize; cursor: row-resize; } -.v-disabled .#{$name}-vsplitter div { +.v-disabled .#{$primaryStyleName}-vsplitter div { cursor: default; } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/table/table.scss b/WebContent/VAADIN/themes/base/table/table.scss index 552628bb61..660c30a4cf 100644 --- a/WebContent/VAADIN/themes/base/table/table.scss +++ b/WebContent/VAADIN/themes/base/table/table.scss @@ -1,4 +1,4 @@ -@mixin base-table($name : v-table) { +@mixin base-table($primaryStyleName : 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 .#{$name}-header-wrap and .#{$name}-body + * - specify vertical borders on .#{$primaryStyleName}-header-wrap and .#{$primaryStyleName}-body * * Table cells in body: - * - padding/border for cells is to be defined for td elements (class name: .#{$name}-cell-content) + * - padding/border for cells is to be defined for td elements (class name: .#{$primaryStyleName}-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: .#{$name}-cell-wrapper) element + * - no padding or border is allowed for div inside cells (class name: .#{$primaryStyleName}-cell-wrapper) element * - background is allowed for both elements * * Table headers: - * - 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 + * - table cells in header contain .#{$primaryStyleName}-resizer and + * .#{$primaryStyleName}-caption-container div elements, which are both floated to right + * - to align header caption to body content resizer width + .#{$primaryStyleName}-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. * */ -.#{$name} { +.#{$primaryStyleName} { overflow: hidden; text-align: left; /* Force default alignment */ } -.#{$name}-header-wrap { +.#{$primaryStyleName}-header-wrap { overflow: hidden; border: 1px solid #aaa; border-bottom: none; background: #efefef; } -.#{$name}-header table, -.#{$name}-table { +.#{$primaryStyleName}-header table, +.#{$primaryStyleName}-table { border-spacing: 0; border-collapse: separate; margin: 0; padding: 0; border: 0; } -.#{$name}-header td { +.#{$primaryStyleName}-header td { padding: 0; } -.#{$name}-header-cell, -.#{$name}-header-cell-asc, -.#{$name}-header-cell-desc { +.#{$primaryStyleName}-header-cell, +.#{$primaryStyleName}-header-cell-asc, +.#{$primaryStyleName}-header-cell-desc { cursor: pointer; } -.#{$name}.v-disabled .#{$name}-header-cell, -.#{$name}.v-disabled .#{$name}-header-cell-asc, -.#{$name}.v-disabled .#{$name}-header-cell-desc { +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell, +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-asc, +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-header-cell-desc { cursor: default; } -.#{$name}-footer-wrap { +.#{$primaryStyleName}-footer-wrap { overflow: hidden; border: 1px solid #aaa; border-top: none; background: #efefef; } -.#{$name}-footer table { +.#{$primaryStyleName}-footer table { border-spacing: 0; border-collapse: collapse; margin: 0; padding: 0; border: 0; } -.#{$name}-footer td { +.#{$primaryStyleName}-footer td { padding: 0; border-right: 1px solid #aaa; } -.#{$name}-footer-cell { +.#{$primaryStyleName}-footer-cell { cursor: pointer; } -.#{$name}-footer-container { +.#{$primaryStyleName}-footer-container { float:right; padding-right:6px; overflow:hidden; white-space:nowrap; } -.#{$name}-resizer { +.#{$primaryStyleName}-resizer { display: block; height: 1.2em; float: right; @@ -93,53 +93,53 @@ width: 1px; overflow: hidden; } -.#{$name}.v-disabled .#{$name}-resizer { +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-resizer { cursor: default; } -.#{$name}-caption-container { +.#{$primaryStyleName}-caption-container { overflow: hidden; white-space: nowrap; margin-left: 6px; } -.#{$name}-caption-container-align-right { +.#{$primaryStyleName}-caption-container-align-right { float: right; } -.#{$name}-sort-indicator { +.#{$primaryStyleName}-sort-indicator { width: 0px; height: 1.2em; float: right; } -.#{$name}-header-cell-asc .#{$name}-sort-indicator, -.#{$name}-header-cell-desc .#{$name}-sort-indicator { +.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator, +.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { width: 16px; height: 1.2em; float: right; } -.#{$name}-header-cell-asc .#{$name}-sort-indicator { +.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right 6px; } -.#{$name}-header-cell-desc .#{$name}-sort-indicator { +.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right -10px; } -.#{$name}-caption-container-align-center { +.#{$primaryStyleName}-caption-container-align-center { text-align: center; } -.#{$name}-caption-container-align-right { +.#{$primaryStyleName}-caption-container-align-right { text-align: right; } -.#{$name}-caption-container .v-icon, -.#{$name}-header-drag .v-icon { +.#{$primaryStyleName}-caption-container .v-icon, +.#{$primaryStyleName}-header-drag .v-icon { vertical-align: middle; } -.#{$name}-body { +.#{$primaryStyleName}-body { border: 1px solid #aaa; } -.#{$name}-row-spacer { +.#{$primaryStyleName}-row-spacer { height: 10px; overflow: hidden; /* IE hack to allow < one line height divs */ } -.#{$name}-row, -.#{$name}-row-odd { +.#{$primaryStyleName}-row, +.#{$primaryStyleName}-row-odd { background: #fff; border: 0; margin: 0; @@ -147,36 +147,36 @@ cursor: pointer; } -.#{$name}-generated-row { +.#{$primaryStyleName}-generated-row { background: #efefef; } -.#{$name}-body-noselection .#{$name}-row, -.#{$name}-body-noselection .#{$name}-row-odd { +.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row, +.#{$primaryStyleName}-body-noselection .#{$primaryStyleName}-row-odd { cursor: default; } -.#{$name} .v-selected { +.#{$primaryStyleName} .v-selected { background: #999; color: #fff; } -.#{$name}-cell-content { +.#{$primaryStyleName}-cell-content { white-space: nowrap; overflow: hidden; padding: 0 6px; border-right: 1px solid #aaa; } -.#{$name}-cell-wrapper { +.#{$primaryStyleName}-cell-wrapper { /* Do not specify any margins, paddings or borders here */ white-space: nowrap; overflow: hidden; } -.#{$name}-cell-wrapper-align-center { +.#{$primaryStyleName}-cell-wrapper-align-center { text-align: center; } -.#{$name}-cell-wrapper-align-right { +.#{$primaryStyleName}-cell-wrapper-align-right { text-align: right; } -.#{$name}-column-selector { +.#{$primaryStyleName}-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; } -.#{$name}.v-disabled .#{$name}-column-selector { +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-column-selector { cursor: default; } -.#{$name}-focus-slot-left { +.#{$primaryStyleName}-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; } -.#{$name}-focus-slot-right { +.#{$primaryStyleName}-focus-slot-right { border-right: 2px solid #999; margin-left: -2px; } -.#{$name}-header-drag { +.#{$primaryStyleName}-header-drag { position: absolute; background: #efefef; border: 1px solid #eee; @@ -209,30 +209,30 @@ margin-top: 20px; z-index: 30000; } -.#{$name}-header-drag .v-icon { +.#{$primaryStyleName}-header-drag .v-icon { vertical-align: middle; } -.#{$name}-scrollposition { +.#{$primaryStyleName}-scrollposition { width: 160px; background: #eee; border: 1px solid #aaa; } -.#{$name}-scrollposition span { +.#{$primaryStyleName}-scrollposition span { display: block; text-align: center; } -.#{$name}-body:focus, -.#{$name}-body-wrapper:focus { +.#{$primaryStyleName}-body:focus, +.#{$primaryStyleName}-body-wrapper:focus { outline: none; } -.#{$name}-body.focused { +.#{$primaryStyleName}-body.focused { border-color: #388ddd; } -.#{$name}-focus .#{$name}-cell-content { +.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-content { border-top: 1px dotted #0066bd; border-bottom: 1px dotted #0066bd; } -.#{$name}-focus .#{$name}-cell-wrapper { +.#{$primaryStyleName}-focus .#{$primaryStyleName}-cell-wrapper { margin-top: -1px; margin-bottom: -1px; } @@ -246,26 +246,26 @@ /************************************* * Drag'n'drop styles *************************************/ -.#{$name}-drag .#{$name}-body { +.#{$primaryStyleName}-drag .#{$primaryStyleName}-body { border-color: #1d9dff; } -.#{$name}-row-drag-middle .#{$name}-cell-content { +.#{$primaryStyleName}-row-drag-middle .#{$primaryStyleName}-cell-content { background-color: #bcdcff; } -.#{$name}-row-drag-top .#{$name}-cell-content { +.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content { border-top: 2px solid #1d9dff; } -.#{$name}-row-drag-top .#{$name}-cell-wrapper { +.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-wrapper { margin-top: -2px; /* compensate the space consumed by border hint */ } -.#{$name}-row-drag-bottom .#{$name}-cell-content { +.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content { border-bottom: 2px solid #1d9dff; } -.#{$name}-row-drag-bottom .#{$name}-cell-wrapper { +.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-wrapper { margin-bottom: -2px; /* compensate the space consumed by border hint */ } -.#{$name}-row-drag-top .#{$name}-cell-content:first-child:before, -.#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { +.#{$primaryStyleName}-row-drag-top .#{$primaryStyleName}-cell-content:first-child:before, +.#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-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 .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after, -.v-ie .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { +.v-ff .#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-cell-content:first-child:after, +.v-ie .#{$primaryStyleName}-row-drag-bottom .#{$primaryStyleName}-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 a001605f27..1a799814c1 100644 --- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss +++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss @@ -1,12 +1,12 @@ -@mixin base-tabsheet($name : v-tabsheet) { +@mixin base-tabsheet($primaryStyleName : v-tabsheet) { -.#{$name}, -.#{$name}-content, -.#{$name}-deco { +.#{$primaryStyleName}, +.#{$primaryStyleName}-content, +.#{$primaryStyleName}-deco { outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ text-align: left; /* Force default alignment */ } -.#{$name}-tabs { +.#{$primaryStyleName}-tabs { empty-cells: hide; border-collapse: collapse; margin: 0; @@ -15,55 +15,55 @@ width: 100%; overflow:hidden; } -.#{$name}-tabitemcell:focus { +.#{$primaryStyleName}-tabitemcell:focus { outline: none; } -.#{$name}-tabitemcell, -.#{$name}-spacertd { +.#{$primaryStyleName}-tabitemcell, +.#{$primaryStyleName}-spacertd { margin: 0; padding: 0; vertical-align: bottom; } -.#{$name}-spacertd { +.#{$primaryStyleName}-spacertd { width: 100%; } -.#{$name}-spacertd div { +.#{$primaryStyleName}-spacertd div { border-left: 1px solid #aaa; border-bottom: 1px solid #aaa; height: 1em; padding: 0.2em 0; } -.#{$name}-hidetabs > .#{$name}-tabcontainer { +.#{$primaryStyleName}-hidetabs > .#{$primaryStyleName}-tabcontainer { display: none; } -.#{$name}-scroller { +.#{$primaryStyleName}-scroller { white-space: nowrap; text-align: right; margin-top: -1em; } -.v-disabled .#{$name}-scroller { +.v-disabled .#{$primaryStyleName}-scroller { display: none; } -.#{$name}-scrollerPrev, -.#{$name}-scrollerNext, -.#{$name}-scrollerPrev-disabled, -.#{$name}-scrollerNext-disabled { +.#{$primaryStyleName}-scrollerPrev, +.#{$primaryStyleName}-scrollerNext, +.#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-scrollerNext-disabled { border: 1px solid #aaa; background: #fff; width: 12px; height: 1em; cursor: pointer; } -.#{$name}-scrollerPrev-disabled, -.#{$name}-scrollerNext-disabled { +.#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-scrollerNext-disabled { opacity: 0.5; cursor: default; } -.#{$name}-tabs .v-caption, -.#{$name}-tabs .v-caption span { +.#{$primaryStyleName}-tabs .v-caption, +.#{$primaryStyleName}-tabs .v-caption span { white-space: nowrap; } -.#{$name}-caption-close { +.#{$primaryStyleName}-caption-close { display: inline; display: inline-block; zoom: 1; @@ -79,49 +79,49 @@ -moz-user-select: none; -webkit-user-select: none; } -.#{$name} .v-disabled .#{$name}-caption-close { +.#{$primaryStyleName} .v-disabled .#{$primaryStyleName}-caption-close { cursor: default; visibility: hidden; } -.#{$name}-tabitem:hover .#{$name}-caption-close { +.#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close { visibility: visible; } -.#{$name}-tabitem { +.#{$primaryStyleName}-tabitem { border: 1px solid #aaa; border-right: none; cursor: pointer; padding: 0.2em 0.5em; } -.#{$name}-tabitem .v-caption { +.#{$primaryStyleName}-tabitem .v-caption { cursor: inherit; } -.#{$name}.v-disabled .#{$name}-tabitem, -.#{$name}-tabitemcell-disabled .#{$name}-tabitem { +.#{$primaryStyleName}.v-disabled .#{$primaryStyleName}-tabitem, +.#{$primaryStyleName}-tabitemcell-disabled .#{$primaryStyleName}-tabitem { cursor: default; } -.#{$name}-tabitem-selected { +.#{$primaryStyleName}-tabitem-selected { cursor: default; border-bottom-color: #fff; } -.#{$name}-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabitem-selected .v-caption { cursor: default; } -.#{$name}-content { +.#{$primaryStyleName}-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; } -.#{$name}-deco { +.#{$primaryStyleName}-deco { height: 1px; background: #aaa; overflow: hidden; } -.#{$name}-hidetabs .#{$name}-content { +.#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content { border: none; } -.#{$name}-hidetabs .#{$name}-deco { +.#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-deco { height: 0; } diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.scss b/WebContent/VAADIN/themes/base/textfield/textfield.scss index bb6765a60d..1eb1203e97 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($name : v-textfield) { +@mixin base-textfield($primaryStyleName : v-textfield) { -.#{$name} { +.#{$primaryStyleName} { text-align: left; /* Force default alignment */ } .v-textarea { resize: none; white-space: pre-wrap; } -.#{$name}-focus, +.#{$primaryStyleName}-focus, .v-textarea-focus { } -input.#{$name}-prompt, +input.#{$primaryStyleName}-prompt, textarea.v-textarea-prompt { color: #999; font-style: italic; } -input.#{$name}-readonly, +input.#{$primaryStyleName}-readonly, textarea.v-textarea-readonly { background: transparent; border: none; @@ -27,20 +27,20 @@ input.v-disabled, textarea.v-disabled { resize: none; } -input.#{$name}-readonly:focus, +input.#{$primaryStyleName}-readonly:focus, textarea.v-textarea-readonly:focus { outline: none; } /* Disabled by default .v-textarea-error, -.#{$name}-error, +.#{$primaryStyleName}-error, .v-richtextarea-error iframe.gwt-RichTextArea { background: #FFE0E0; } */ /* Disabled by default .v-textarea-required, -.#{$name}-required, +.#{$primaryStyleName}-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 fd998eac45..c1d1283f52 100644 --- a/WebContent/VAADIN/themes/base/tree/tree.scss +++ b/WebContent/VAADIN/themes/base/tree/tree.scss @@ -1,62 +1,62 @@ -@mixin base-tree($name : v-tree) { +@mixin base-tree($primaryStyleName : v-tree) { // tree-default.css -.#{$name} { +.#{$primaryStyleName} { text-align: left; /* Force default alignment */ overflow: hidden; padding: 1px 0; outline: none; } -.#{$name}-node { +.#{$primaryStyleName}-node { background: transparent url(../common/img/sprites.png) no-repeat 5px -37px; padding: 1px 0; } -.#{$name}-node-caption:focus { +.#{$primaryStyleName}-node-caption:focus { outline: none; } -div.#{$name}-node-leaf { +div.#{$primaryStyleName}-node-leaf { background: transparent; } -.#{$name}-node-expanded { +.#{$primaryStyleName}-node-expanded { background: transparent url(../common/img/sprites.png) no-repeat -5px -10px; } -.#{$name}-node-caption { +.#{$primaryStyleName}-node-caption { margin-left: 1em; } -.#{$name}-node span { +.#{$primaryStyleName}-node span { cursor: pointer; } -.#{$name}-node-caption div { +.#{$primaryStyleName}-node-caption div { white-space: nowrap; } -.#{$name}-node-caption span, -.#{$name}-node-caption .v-icon { +.#{$primaryStyleName}-node-caption span, +.#{$primaryStyleName}-node-caption .v-icon { vertical-align: middle; } -.#{$name}-node-selected span { +.#{$primaryStyleName}-node-selected span { background: #999; color: #fff; } -.#{$name}-node-children { +.#{$primaryStyleName}-node-children { padding-left: 1em; } // Drag'n'drop styles -.#{$name} .#{$name}-node-drag-top { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top { border-top: 2px solid #1d9dff; margin-top: -1px; padding-top: 0; } -.#{$name} .#{$name}-node-drag-bottom { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom { border-bottom: 2px solid #1d9dff; margin-bottom: -1px; padding-bottom: 0; } -.#{$name} .#{$name}-node-drag-top:before, -.#{$name} .#{$name}-node-drag-bottom:after, -.#{$name} .#{$name}-node-caption-drag-center:after { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top:before, +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after, +.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after { display: block; position: absolute; @@ -65,23 +65,23 @@ div.#{$name}-node-leaf { margin-top: -4px; background: transparent url(../common/img/drag-slot-dot.png); } -.#{$name} .#{$name}-node-drag-bottom:after { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom:after { margin-top: -2px; } -.#{$name} .#{$name}-node-caption-drag-center:after { +.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after { margin-left: 14px; } -.v-ff .#{$name} .#{$name}-node-caption-drag-center:after, -.v-ie .#{$name} .#{$name}-node-caption-drag-center:after { +.v-ff .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after, +.v-ie .#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center:after { margin-top: -2px; } -.#{$name} .#{$name}-node-drag-top { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top { background-position: 5px -38px; } -.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded { background-position: -5px -11px; } -.#{$name} .#{$name}-node-caption-drag-center div { +.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div { border: 2px solid #1d9dff; -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -89,12 +89,12 @@ div.#{$name}-node-leaf { margin: -2px 2px -2px -2px; background-color: #bcdcff; } -.#{$name} .#{$name}-node-caption-drag-center div { +.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div { background-color: rgba(169,209,255,.6); } -.#{$name} .#{$name}-node-caption-drag-center div, -.#{$name} .#{$name}-node-drag-top, -.#{$name} .#{$name}-node-drag-bottom { +.#{$primaryStyleName} .#{$primaryStyleName}-node-caption-drag-center div, +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top, +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-bottom { border-color: rgba(0,109,232,.6); } @@ -103,38 +103,38 @@ div.#{$name}-node-leaf { // row, but #10309 prevents us from doing that right now. // Make item caption height an even number (so that the connector dots overlap nicely) - .#{$name}-connectors .#{$name}-node-caption { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-caption { padding-top: 1px; } - .#{$name}-connectors .#{$name}-node { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node { background: transparent url(img/connector-expand.png) no-repeat 2px -52px; } - .#{$name}-connectors .#{$name}-node-expanded { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded { background: transparent url(img/connector-collapse.png) no-repeat 2px -52px; } - .#{$name}-connectors .#{$name}-node-last { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-last { background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px; } - .#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-last { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-last { background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px; } - .#{$name}-connectors .#{$name}-node-leaf { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf { background: transparent url(img/connector-leaf.png) repeat-y 2px 50%; } - .#{$name}-connectors .#{$name}-node-leaf-last { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-leaf-last { background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%; } - .#{$name}-connectors .#{$name}-node-children { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children { background: transparent url(img/connector.png) repeat-y 2px 0; } - .#{$name}-connectors .#{$name}-node-children-last { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-children-last { background: transparent; } - .#{$name}-connectors .#{$name}-node-drag-top, - .#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top, + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-expanded.#{$primaryStyleName}-node-drag-top { background-position: 2px -53px; } - .#{$name}-connectors .#{$name}-node-drag-top.#{$name}-node-leaf { + .#{$primaryStyleName}-connectors .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-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 dfb4628794..934e66097c 100644 --- a/WebContent/VAADIN/themes/base/treetable/treetable.scss +++ b/WebContent/VAADIN/themes/base/treetable/treetable.scss @@ -1,6 +1,6 @@ -@mixin base-treetable($name : v-treetable) { +@mixin base-treetable($primaryStyleName : v-treetable) { -.#{$name}-treespacer { +.#{$primaryStyleName}-treespacer { display: inline-block; background: transparent; height: 10px; @@ -11,58 +11,58 @@ top: 5px; } -.#{$name}-node-closed { +.#{$primaryStyleName}-node-closed { background: url(../treetable/img/arrow-right.png) right top no-repeat; } -.#{$name}-node-open { +.#{$primaryStyleName}-node-open { background: url(../treetable/img/arrow-down.png) right top no-repeat; } -.#{$name} .v-checkbox { +.#{$primaryStyleName} .v-checkbox { display: inline-block; padding-bottom: 4px; } -.#{$name} .v-table-row .v-table-cell-content, -.#{$name} .v-table-row-odd .v-table-cell-content { +.#{$primaryStyleName} .v-table-row .v-table-cell-content, +.#{$primaryStyleName} .v-table-row-odd .v-table-cell-content { position: relative; z-index: 10; } -.#{$name} .v-table-cell-wrapper { +.#{$primaryStyleName} .v-table-cell-wrapper { position: relative; } -.#{$name} .v-table-body .v-table-table .v-table-row-animating { +.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating { zoom:1; z-index:1; } -.#{$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 { +.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating, +.#{$primaryStyleName} .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content { background:transparent; } -.#{$name}-animation-clone { +.#{$primaryStyleName}-animation-clone { border-spacing: 0; zoom:1; } -div.#{$name}-animation-clone-wrapper { +div.#{$primaryStyleName}-animation-clone-wrapper { position: absolute; z-index: 2; background-color:#fff; } -div.#{$name}-animation-clone-wrapper table.#{$name}-animation-clone { +div.#{$primaryStyleName}-animation-clone-wrapper table.#{$primaryStyleName}-animation-clone { background-color:#fff; } -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 { +div table.#{$primaryStyleName}-animation-clone tr.v-table-row, +div table.#{$primaryStyleName}-animation-clone tr.v-table-row-odd, +div table.#{$primaryStyleName}-animation-clone tr.v-table-row td.v-table-cell-content, +div table.#{$primaryStyleName}-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 a992f95f06..71827480ae 100644 --- a/WebContent/VAADIN/themes/base/upload/upload.scss +++ b/WebContent/VAADIN/themes/base/upload/upload.scss @@ -1,22 +1,22 @@ -@mixin base-upload($name : v-upload) { +@mixin base-upload($primaryStyleName : v-upload) { -.#{$name} { +.#{$primaryStyleName} { white-space: nowrap; } -.#{$name}-immediate { +.#{$primaryStyleName}-immediate { position: relative; margin: 0; overflow: hidden; } -.v-ff .#{$name}-immediate, -.v-op .#{$name}-immediate { +.v-ff .#{$primaryStyleName}-immediate, +.v-op .#{$primaryStyleName}-immediate { display: inline-block; } -.#{$name}-immediate input { +.#{$primaryStyleName}-immediate input { opacity: 0; filter: alpha(opacity=0); z-index: 2; @@ -28,7 +28,7 @@ background: transparent; } -.#{$name}-immediate button { +.#{$primaryStyleName}-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 a632e20d09..e1e830d488 100644 --- a/WebContent/VAADIN/themes/base/widget/widget.scss +++ b/WebContent/VAADIN/themes/base/widget/widget.scss @@ -1,6 +1,6 @@ -@mixin base-widget($name : v-widget) { +@mixin base-widget($primaryStyleName : v-widget) { -.#{$name} { +.#{$primaryStyleName} { -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 486906ea6d..b9e7b54139 100644 --- a/WebContent/VAADIN/themes/base/window/window.scss +++ b/WebContent/VAADIN/themes/base/window/window.scss @@ -1,29 +1,29 @@ -@mixin base-window($name : v-window) { +@mixin base-window($primaryStyleName : v-window) { -.#{$name} { +.#{$primaryStyleName} { background: #fff; } -.#{$name}-contents { +.#{$primaryStyleName}-contents { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.#{$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 { +.#{$primaryStyleName}.v-has-width > div.popupContent, +.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-contents, +.#{$primaryStyleName}.v-has-width .#{$primaryStyleName}-contents > div { width: 100%; } -.#{$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 { +.#{$primaryStyleName}.v-has-height > div.popupContent, +.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-contents, +.#{$primaryStyleName}.v-has-height .#{$primaryStyleName}-contents > div { height: 100%; } -.#{$name}-outerheader { +.#{$primaryStyleName}-outerheader { padding: 0.3em 1em; height: 1.6em; position: relative; @@ -32,35 +32,35 @@ box-sizing: border-box; } -.#{$name}-outerheader, -.#{$name}-draggingCurtain { +.#{$primaryStyleName}-outerheader, +.#{$primaryStyleName}-draggingCurtain { cursor: move; } -.#{$name}-header { +.#{$primaryStyleName}-header { font-weight: bold; } /* A more specific selector to make sure padding isn't so easily overridden */ -div.#{$name}-header { +div.#{$primaryStyleName}-header { white-space: nowrap; text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; padding: 0; } -.#{$name}-header .v-icon { +.#{$primaryStyleName}-header .v-icon { vertical-align: middle; /* This has to be 'middle', not 'bottom', to allow larger icons than 16px */ } -.#{$name}-contents > div { +.#{$primaryStyleName}-contents > div { outline: none; } -.#{$name}-footer { +.#{$primaryStyleName}-footer { overflow: hidden; zoom: 1; height: 10px; position: relative; cursor: move; } -.#{$name}-resizebox { +.#{$primaryStyleName}-resizebox { width: 10px; height: 10px; background: #ddd; @@ -69,19 +69,19 @@ div.#{$name}-header { right: 0; } -.#{$name}-resizebox, -.#{$name}-resizingCurtain { +.#{$primaryStyleName}-resizebox, +.#{$primaryStyleName}-resizingCurtain { cursor: se-resize; } -.#{$name} div.#{$name}-footer-noresize { +.#{$primaryStyleName} div.#{$primaryStyleName}-footer-noresize { height: 0; } -.#{$name}-resizebox-disabled { +.#{$primaryStyleName}-resizebox-disabled { cursor: default; display: none; } -.#{$name}-closebox { +.#{$primaryStyleName}-closebox { position: absolute; top: 0; right: 0; @@ -91,7 +91,7 @@ div.#{$name}-header { cursor: pointer; overflow: hidden; } -.#{$name}-modalitycurtain { +.#{$primaryStyleName}-modalitycurtain { top: 0; left: 0; background: #999; |