diff options
| author | Artur Signell <artur@vaadin.com> | 2012-11-23 11:38:16 +0000 |
|---|---|---|
| committer | Vaadin Code Review <review@vaadin.com> | 2012-11-23 11:38:16 +0000 |
| commit | 62a43b95f0d0247fed0550180c706692a4a41a84 (patch) | |
| tree | 5527b9546ed24d493fc0cd62ad19a539d6ca6e73 | |
| parent | 2c29f350a5f44eca269c67bc88b14888790359e7 (diff) | |
| parent | bd2caa54a548d7284e91cb7e87472deb2dcec42d (diff) | |
| download | vaadin-framework-62a43b95f0d0247fed0550180c706692a4a41a84.tar.gz vaadin-framework-62a43b95f0d0247fed0550180c706692a4a41a84.zip | |
Merge "Change sass compoent @mixin parameter from $name to $primaryStyleName, fixes #10294"
72 files changed, 1378 insertions, 1378 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; diff --git a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss index d8ff166386..791b564449 100644 --- a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss @@ -1,6 +1,6 @@ -@mixin chameleon-datefield($name : v-datefield) { +@mixin chameleon-datefield($primaryStyleName : v-datefield) { -.#{$name}-button { +.#{$primaryStyleName}-button { background: #dadada url(../../img/date-btn.png) repeat-x 50% 0; border: 1px solid gray; -webkit-border-top-right-radius: 3px; @@ -16,25 +16,25 @@ box-sizing: content-box; } -.#{$name}-small .#{$name}-button { +.#{$primaryStyleName}-small .#{$primaryStyleName}-button { height: 1.2em; } -.#{$name}-big .#{$name}-button { +.#{$primaryStyleName}-big .#{$primaryStyleName}-button { padding: .3em 0; height: 1.2em; } -.v-ie8 .#{$name}-button { +.v-ie8 .#{$primaryStyleName}-button { height: 1.6em; padding: 0; } -.v-ie8 .#{$name}-big .#{$name}-button { +.v-ie8 .#{$primaryStyleName}-big .#{$primaryStyleName}-button { height: 1.8em; } -input.#{$name}-textfield { +input.#{$primaryStyleName}-textfield { border-right: none; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; @@ -46,7 +46,7 @@ input.#{$name}-textfield { /******************************************************************************* * Big ******************************************************************************/ -.#{$name}-big .#{$name}-button { +.#{$primaryStyleName}-big .#{$primaryStyleName}-button { width: 32px; background-image: url(../../img/date-btn-big.png); } @@ -55,7 +55,7 @@ input.#{$name}-textfield { /******************************************************************************* * Small ******************************************************************************/ -.#{$name}-small .#{$name}-button { +.#{$primaryStyleName}-small .#{$primaryStyleName}-button { width: 19px; background-position: 50% -2px; } @@ -64,7 +64,7 @@ input.#{$name}-textfield { /******************************************************************************* * Calendar panel ******************************************************************************/ -.#{$name}-calendarpanel { +.#{$primaryStyleName}-calendarpanel { border-collapse: collapse; margin: 0; padding: 0; @@ -72,34 +72,34 @@ input.#{$name}-textfield { font-size: 0.9em; } -.#{$name}-month .#{$name}-textfield { +.#{$primaryStyleName}-month .#{$primaryStyleName}-textfield { width: 6em; } -.#{$name}-year .#{$name}-textfield { +.#{$primaryStyleName}-year .#{$primaryStyleName}-textfield { width: 4em; } -.#{$name}-year .#{$name}-calendarpanel-prevmonth, -.#{$name}-year .#{$name}-calendarpanel-nextmonth { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth, +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextmonth { display: none; } -.#{$name}-calendarpanel-header td { +.#{$primaryStyleName}-calendarpanel-header td { border-bottom: 1px solid #666; } -.#{$name}-year .#{$name}-calendarpanel-header td, -.#{$name}-month .#{$name}-calendarpanel-header td { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-header td, +.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-header td { border-bottom: none; } -td.#{$name}-calendarpanel-month { +td.#{$primaryStyleName}-calendarpanel-month { background: #c9c9c9 url(../../img/grad-light-top.png) repeat-x 0 -1px; text-shadow: 0 1px 0 rgba(255,255,255,.7); } -span.#{$name}-calendarpanel-month { +span.#{$primaryStyleName}-calendarpanel-month { display: block; text-align: center; overflow: hidden; @@ -107,33 +107,33 @@ span.#{$name}-calendarpanel-month { height: 1.8em; } -.#{$name}-year .#{$name}-calendarpanel-month { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month { width: 5em; } -.#{$name}-month .#{$name}-calendarpanel-month, -.#{$name}-day .#{$name}-calendarpanel-month, -.#{$name}-full .#{$name}-calendarpanel-month { +.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month, +.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month, +.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month { width: 9em; } -.#{$name}-popupcalendar { +.#{$primaryStyleName}-popupcalendar { min-width: 0; } -.#{$name}-year .#{$name}-calendarpanel { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel { width: 8em; } -td.#{$name}-calendarpanel-prevyear { +td.#{$primaryStyleName}-calendarpanel-prevyear { text-align: right; } -td.#{$name}-calendarpanel-nextyear { +td.#{$primaryStyleName}-calendarpanel-nextyear { text-align: left; } -.#{$name}-calendarpanel-header button { +.#{$primaryStyleName}-calendarpanel-header button { font-size: 1em; line-height: normal; width: 100%; @@ -146,51 +146,51 @@ td.#{$name}-calendarpanel-nextyear { cursor: pointer; } -.#{$name}-popup .#{$name}-calendarpanel-month, -.#{$name}-popup .#{$name}-calendarpanel-header button { +.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel-month, +.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel-header button { background-position: 0 0; } -.#{$name}-calendarpanel-header button:active { +.#{$primaryStyleName}-calendarpanel-header button:active { background-image: url(../../img/grad-dark-top2.png); } -.#{$name}-calendarpanel-prevyear button { +.#{$primaryStyleName}-calendarpanel-prevyear button { -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; } -.#{$name}-calendarpanel-nextyear button { +.#{$primaryStyleName}-calendarpanel-nextyear button { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; } -.#{$name}-year .#{$name}-calendarpanel-prevyear button, -.#{$name}-month .#{$name}-calendarpanel-prevyear button { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevyear button, +.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-prevyear button { -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; } -.#{$name}-year .#{$name}-calendarpanel-nextyear button, -.#{$name}-month .#{$name}-calendarpanel-nextyear button { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextyear button, +.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-nextyear button { -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; } -.#{$name}-calendarpanel-body, -.#{$name}-calendarpanel-time { +.#{$primaryStyleName}-calendarpanel-body, +.#{$primaryStyleName}-calendarpanel-time { text-align: center; vertical-align: top; } -.#{$name}-calendarpanel-body table { +.#{$primaryStyleName}-calendarpanel-body table { border-collapse: collapse; margin: 0; padding: 0; margin: 0 auto; } -.#{$name}-calendarpanel-weekdays td { +.#{$primaryStyleName}-calendarpanel-weekdays td { width: 14.2%; overflow: hidden; line-height: normal; @@ -198,11 +198,11 @@ td.#{$name}-calendarpanel-nextyear { vertical-align: top; } -.#{$name}-calendarpanel-weeknumbers td { +.#{$primaryStyleName}-calendarpanel-weeknumbers td { width: 12.5%; } -.#{$name}-calendarpanel-weekdays strong { +.#{$primaryStyleName}-calendarpanel-weekdays strong { display: block; text-align: right; font-size: 0.8em; @@ -214,33 +214,33 @@ td.#{$name}-calendarpanel-nextyear { margin-bottom: 2px; } -.#{$name}-calendarpanel .v-first strong { +.#{$primaryStyleName}-calendarpanel .v-first strong { -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; } -.#{$name}-calendarpanel .v-last strong { +.#{$primaryStyleName}-calendarpanel .v-last strong { -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; } -.#{$name}-popup .#{$name}-calendarpanel .v-first strong, -.#{$name}-popup .#{$name}-calendarpanel .v-last strong { +.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel .v-first strong, +.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel .v-last strong { -webkit-border-radius: 0; -moz-border-radius: 0; } -.#{$name}-calendarpanel-body td { +.#{$primaryStyleName}-calendarpanel-body td { text-align: right; height: 1.6em; } -.#{$name}-calendarpanel-weeknumber { +.#{$primaryStyleName}-calendarpanel-weeknumber { padding: .5em .5em .35em 0; } -.#{$name}-calendarpanel-day, -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day, +.#{$primaryStyleName}-calendarpanel-day-today { padding: .15em .5em .15em 0; display: block; margin: 1px 1px 1px .3em; @@ -249,14 +249,14 @@ td.#{$name}-calendarpanel-nextyear { -moz-border-radius: 2px; } -.#{$name}-calendarpanel-day-focused, -.#{$name}-calendarpanel-day:hover { +.#{$primaryStyleName}-calendarpanel-day-focused, +.#{$primaryStyleName}-calendarpanel-day:hover { margin: 0 0 0 .2em; border: 1px solid #b3b3b3; outline: none; } -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day-today { border: none; background: transparent url(../../img/grad-dark-top2.png) repeat-x; margin: 0 0 0 .2em; @@ -264,13 +264,13 @@ td.#{$name}-calendarpanel-nextyear { border: 1px solid #c9c9c9; } -.#{$name}-calendarpanel-day-selected, -.#{$name}-calendarpanel-day-selected:hover { +.#{$primaryStyleName}-calendarpanel-day-selected, +.#{$primaryStyleName}-calendarpanel-day-selected:hover { margin: 0 0 0 .3em; border: none; } -.#{$name}-calendarpanel-time select { +.#{$primaryStyleName}-calendarpanel-time select { padding: 0; font-size: 0.9em; margin: 0; diff --git a/WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss index 413c7ccca3..deceee19be 100644 --- a/WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss +++ b/WebContent/VAADIN/themes/chameleon/components/inlinedatefield/inlinedatefield.scss @@ -1,10 +1,10 @@ -@mixin chameleon-inline-datefield($name : v-inline-datefield){ +@mixin chameleon-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 chameleon-datefield(v-inline-datefield); - .#{$name}, - .#{$name}-calendarpanel-day { + .#{$primaryStyleName}, + .#{$primaryStyleName}-calendarpanel-day { line-height:16px; /* Override popup datefields line-height:0 to get correct line heights */ } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/liferay/datefield/datefield.scss b/WebContent/VAADIN/themes/liferay/datefield/datefield.scss index ad26907a18..97fb25cfe5 100644 --- a/WebContent/VAADIN/themes/liferay/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/liferay/datefield/datefield.scss @@ -1,56 +1,56 @@ -@mixin liferay-datefield($name : v-datefield) { +@mixin liferay-datefield($primaryStyleName : v-datefield) { -.#{$name}-popup { +.#{$primaryStyleName}-popup { padding: 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } -.#{$name}-calendarpanel-header { +.#{$primaryStyleName}-calendarpanel-header { height: 28px; } -.#{$name}-calendarpanel:focus { +.#{$primaryStyleName}-calendarpanel:focus { outline: none; } -.#{$name}-calendarpanel-body { +.#{$primaryStyleName}-calendarpanel-body { text-align: right; vertical-align: top; } -.#{$name}-popupcalendar .#{$name}-button { +.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button { background: transparent url(../common/buttons_sprites.png) no-repeat 0 -48px; width: 24px; height: 24px; border: none; } -.#{$name}-popupcalendar .#{$name}-button:hover { +.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:hover { background-position: 0px -72px; } -.#{$name}-popupcalendar .#{$name}-button:focus { +.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:focus { background-position: 0px -96px; } -.#{$name}-month .#{$name}-calendarpanel-month, -.#{$name}-day .#{$name}-calendarpanel-month, -.#{$name}-full .#{$name}-calendarpanel-month { +.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month, +.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month, +.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month { width: 124px; } -.#{$name}-year .#{$name}-calendarpanel-month { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month { width: 35px; } -.#{$name}-calendarpanel-month { +.#{$primaryStyleName}-calendarpanel-month { background: transparent url(datefield_sprites.png) repeat-x 0 -112px; font-weight: bold; } -span.#{$name}-calendarpanel-month { +span.#{$primaryStyleName}-calendarpanel-month { display: block; text-align: center; background: transparent; @@ -58,15 +58,15 @@ span.#{$name}-calendarpanel-month { padding: 1px 3px 0; } -.#{$name}-calendarpanel-prevyear, -.#{$name}-calendarpanel-nextyear { +.#{$primaryStyleName}-calendarpanel-prevyear, +.#{$primaryStyleName}-calendarpanel-nextyear { width: 22px; } -.#{$name}-calendarpanel-prevyear button, -.#{$name}-calendarpanel-prevmonth button, -.#{$name}-calendarpanel-nextmonth button, -.#{$name}-calendarpanel-nextyear button { +.#{$primaryStyleName}-calendarpanel-prevyear button, +.#{$primaryStyleName}-calendarpanel-prevmonth button, +.#{$primaryStyleName}-calendarpanel-nextmonth button, +.#{$primaryStyleName}-calendarpanel-nextyear button { width: 22px; height: 28px; border: none; @@ -83,42 +83,42 @@ span.#{$name}-calendarpanel-month { border-radius: 0; } -.v-ie .#{$name}-calendarpanel-prevyear button, -.v-ie .#{$name}-calendarpanel-nextyear button, -.v-ie .#{$name}-calendarpanel-prevmonth button, -.v-ie .#{$name}-calendarpanel-nextmonth button { +.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button, +.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button, +.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button, +.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button { text-indent: 0; font-size: 1px; } -.#{$name}-calendarpanel-prevmonth button { +.#{$primaryStyleName}-calendarpanel-prevmonth button { background-position: 0 -56px; } -.#{$name}-calendarpanel-prevmonth { +.#{$primaryStyleName}-calendarpanel-prevmonth { background: transparent url(datefield_sprites.png) repeat-x 0 -112px; } -.#{$name}-calendarpanel-nextyear button { +.#{$primaryStyleName}-calendarpanel-nextyear button { background-position: 0 -28px; width: 100%; min-width: 22px; } -.#{$name}-calendarpanel-nextmonth button { +.#{$primaryStyleName}-calendarpanel-nextmonth button { background-position: 0 -84px; } -.#{$name}-calendarpanel-nextmonth { +.#{$primaryStyleName}-calendarpanel-nextmonth { background: transparent url(datefield_sprites.png) repeat-x 0 -112px; } -.#{$name}-calendarpanel-prevyear button { +.#{$primaryStyleName}-calendarpanel-prevyear button { width: 100%; min-width: 22px; } -.#{$name}-calendarpanel-day { +.#{$primaryStyleName}-calendarpanel-day { display: block; width: 22px; margin: 0 0 3px 3px; @@ -132,37 +132,37 @@ span.#{$name}-calendarpanel-month { border-radius: 4px; } -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day-today { font-weight: bold; } -.#{$name}-calendarpanel-day-selected { +.#{$primaryStyleName}-calendarpanel-day-selected { background: #b5b5b5 url(/html/themes/classic/images/application/state_active_bg.png) repeat-x 0 0; color: #000; border-color: #555; } -.#{$name}-calendarpanel-day-focused { +.#{$primaryStyleName}-calendarpanel-day-focused { outline: 1px dotted #555; } -.#{$name}-calendarpanel-weekdays { +.#{$primaryStyleName}-calendarpanel-weekdays { text-align: center; } -.#{$name}-calendarpanel-weekdays strong { +.#{$primaryStyleName}-calendarpanel-weekdays strong { font-weight: normal; } -.#{$name}-calendarpanel-weeknumber { +.#{$primaryStyleName}-calendarpanel-weeknumber { display: block; border: none; padding: 2px 0 2px 0; margin: 0; } -.#{$name}-calendarpanel-body table { +.#{$primaryStyleName}-calendarpanel-body table { margin: 0 auto; width: 200px; } diff --git a/WebContent/VAADIN/themes/liferay/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/liferay/inlinedatefield/inlinedatefield.scss index 58aa928ee8..80e3b467ec 100644 --- a/WebContent/VAADIN/themes/liferay/inlinedatefield/inlinedatefield.scss +++ b/WebContent/VAADIN/themes/liferay/inlinedatefield/inlinedatefield.scss @@ -1,8 +1,8 @@ -@mixin liferay-inlinedatefield ($name : v-inline-datefield) { +@mixin liferay-inlinedatefield ($primaryStyleName : v-inline-datefield) { @include liferay-datefield(v-inline-datefield); - .#{$name} { + .#{$primaryStyleName} { line-height:19px; /* Override popup datefields line-height:0 to get correct line heights */ } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss index 5d9b4a660f..64190b8820 100644 --- a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss +++ b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss @@ -1,16 +1,16 @@ -@mixin reindeer-accordion($name : v-accordion) { +@mixin reindeer-accordion($primaryStyleName : v-accordion) { -.#{$name} { +.#{$primaryStyleName} { border: 1px solid #bebebe; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; overflow: hidden; } -.#{$name}-item { +.#{$primaryStyleName}-item { background-color: #fff; } -.#{$name}-item-caption { +.#{$primaryStyleName}-item-caption { height: 19px; background: #e4e4e4 repeat-x; background-image: url(../tabsheet/img/tabbar-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ @@ -20,31 +20,31 @@ text-shadow: #fff 0 1px 0; } -.#{$name}-item-caption .v-captiontext{ +.#{$primaryStyleName}-item-caption .v-captiontext{ vertical-align:baseline; } -.#{$name}-item-first .#{$name}-item-caption { +.#{$primaryStyleName}-item-first .#{$primaryStyleName}-item-caption { border-top: none; } -.#{$name}-item-caption .v-caption { +.#{$primaryStyleName}-item-caption .v-caption { padding: 3px 0 5px 10px; } -.v-ie .#{$name}-item-caption .v-caption { +.v-ie .#{$primaryStyleName}-item-caption .v-caption { padding: 2px 0 6px 10px; } -.#{$name}-item-open .#{$name}-item-caption { +.#{$primaryStyleName}-item-open .#{$primaryStyleName}-item-caption { background-image: url(../tabsheet/img/tabbar-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ border-bottom: 1px solid #bbb; } -.#{$name}-item-caption .v-icon { +.#{$primaryStyleName}-item-caption .v-icon { margin-top: -1px; } -.v-ie .#{$name}-item-caption .v-icon { +.v-ie .#{$primaryStyleName}-item-caption .v-icon { vertical-align: top; } /* Borderless style */ -.#{$name}-borderless { +.#{$primaryStyleName}-borderless { border: none; border-radius: 0; -webkit-border-radius: 0; diff --git a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss index db39bf5677..e0d6c35091 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-ie.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-ie.scss @@ -1,6 +1,6 @@ -@mixin reindeer-button-ie($name : v-nativebutton) { +@mixin reindeer-button-ie($primaryStyleName : v-nativebutton) { -.v-ie8 .#{$name}-link { +.v-ie8 .#{$primaryStyleName}-link { padding: 0; text-align: left; } diff --git a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss index 0d2060ddc6..2064cb1650 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-link-style.scss @@ -1,15 +1,15 @@ -@mixin reindeer-button-link-style($name : v-button) { +@mixin reindeer-button-link-style($primaryStyleName : v-button) { -.#{$name}.#{$name}-link, -.#{$name}.#{$name}-link:focus, -.#{$name}.#{$name}-link:active, -.#{$name}-link.v-pressed, -.v-disabled.#{$name}.#{$name}-link, -.#{$name}.#{$name}-link .#{$name}-wrap, -.#{$name}.#{$name}-link:focus .#{$name}-wrap, -.#{$name}.#{$name}-link:active .#{$name}-wrap, -.#{$name}-link.v-pressed .#{$name}-wrap, -.v-disabled.#{$name}.#{$name}-link .#{$name}-wrap { +.#{$primaryStyleName}.#{$primaryStyleName}-link, +.#{$primaryStyleName}.#{$primaryStyleName}-link:focus, +.#{$primaryStyleName}.#{$primaryStyleName}-link:active, +.#{$primaryStyleName}-link.v-pressed, +.v-disabled.#{$primaryStyleName}.#{$primaryStyleName}-link, +.#{$primaryStyleName}.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}.#{$primaryStyleName}-link:active .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}-link.v-pressed .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName}.#{$primaryStyleName}-link .#{$primaryStyleName}-wrap { background: transparent; height: auto; padding: 0; @@ -17,12 +17,12 @@ line-height: inherit; } -.#{$name}.#{$name}-link.v-disabled, -.#{$name}.#{$name}-link.v-disabled .#{$name}-wrap { +.#{$primaryStyleName}.#{$primaryStyleName}-link.v-disabled, +.#{$primaryStyleName}.#{$primaryStyleName}-link.v-disabled .#{$primaryStyleName}-wrap { cursor: default; } -.#{$name}-link .#{$name}-caption { +.#{$primaryStyleName}-link .#{$primaryStyleName}-caption { line-height: inherit; font-weight: normal; color: #1b699f; @@ -30,7 +30,7 @@ text-shadow: none; } -.#{$name}-link:focus .#{$name}-caption { +.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-caption { outline: 1px dotted #1b699f; } diff --git a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss index f4cd726412..238a694e28 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-primary-style.scss @@ -1,30 +1,30 @@ -@mixin reindeer-button-primary-style($name : v-button) { +@mixin reindeer-button-primary-style($primaryStyleName : v-button) { -.#{$name}-primary:focus { +.#{$primaryStyleName}-primary:focus { background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */ } -.#{$name}-primary:focus .#{$name}-wrap { +.#{$primaryStyleName}-primary:focus .#{$primaryStyleName}-wrap { background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.#{$name}-primary:active, -.#{$name}-primary.v-pressed { +.#{$primaryStyleName}-primary:active, +.#{$primaryStyleName}-primary.v-pressed { background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */ } -.#{$name}-primary:active .#{$name}-wrap, -.#{$name}-primary.v-pressed .#{$name}-wrap { +.#{$primaryStyleName}-primary:active .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}-primary.v-pressed .#{$primaryStyleName}-wrap { background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.#{$name}-primary, -.v-disabled.#{$name}-primary { +.#{$primaryStyleName}-primary, +.v-disabled.#{$primaryStyleName}-primary { background-image: url(img/primary-left.png); /** sprite-ref: buttons */ } -.#{$name}-primary .#{$name}-wrap, -.v-disabled.#{$name}-primary .#{$name}-wrap { +.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap { background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */ } @@ -34,32 +34,32 @@ /* Black style */ -.black .#{$name}-primary:focus { +.black .#{$primaryStyleName}-primary:focus { background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */ } -.black .#{$name}-primary:focus .#{$name}-wrap { +.black .#{$primaryStyleName}-primary:focus .#{$primaryStyleName}-wrap { background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ color: #eaf4fb; } -.black .#{$name}-primary:active, -.black .#{$name}-primary.v-pressed { +.black .#{$primaryStyleName}-primary:active, +.black .#{$primaryStyleName}-primary.v-pressed { background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */ } -.black .#{$name}-primary:active .#{$name}-wrap, -.black .#{$name}-primary.v-pressed .#{$name}-wrap { +.black .#{$primaryStyleName}-primary:active .#{$primaryStyleName}-wrap, +.black .#{$primaryStyleName}-primary.v-pressed .#{$primaryStyleName}-wrap { background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .#{$name}-primary, -.black .v-disabled.#{$name}-primary { +.black .#{$primaryStyleName}-primary, +.black .v-disabled.#{$primaryStyleName}-primary { background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */ } -.black .#{$name}-primary .#{$name}-wrap, -.black .v-disabled.#{$name}-primary .#{$name}-wrap { +.black .#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap, +.black .v-disabled.#{$primaryStyleName}-primary .#{$primaryStyleName}-wrap { background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } diff --git a/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss index b141156ac8..5c9e8a32bb 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-small-style.scss @@ -1,37 +1,37 @@ -@mixin reindeer-button-small-style($name : v-button) { +@mixin reindeer-button-small-style($primaryStyleName : v-button) { -.#{$name}-small:focus { +.#{$primaryStyleName}-small:focus { background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */ } -.#{$name}-small:focus .#{$name}-wrap { +.#{$primaryStyleName}-small:focus .#{$primaryStyleName}-wrap { background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.#{$name}-small:active, -.#{$name}-small.v-pressed { +.#{$primaryStyleName}-small:active, +.#{$primaryStyleName}-small.v-pressed { background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */ } -.#{$name}-small:active .#{$name}-wrap, -.#{$name}-small.v-pressed .#{$name}-wrap { +.#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap { background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.#{$name}-small, -.v-disabled.#{$name}-small { +.#{$primaryStyleName}-small, +.v-disabled.#{$primaryStyleName}-small { background-image: url(img/small-left.png); /** sprite-ref: buttons */ height: 20px; } -.#{$name}-small .#{$name}-wrap, -.v-disabled.#{$name}-small .#{$name}-wrap { +.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap { background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */ height: 19px; padding: 1px 14px 0 8px; } -.#{$name}-small .#{$name}-caption { +.#{$primaryStyleName}-small .#{$primaryStyleName}-caption { font-weight: normal; } @@ -40,31 +40,31 @@ /* Black style */ -.black .#{$name}-small:focus { +.black .#{$primaryStyleName}-small:focus { background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */ } -.black .#{$name}-small:focus .#{$name}-wrap { +.black .#{$primaryStyleName}-small:focus .#{$primaryStyleName}-wrap { background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .#{$name}-small:active, -.black .#{$name}-small.v-pressed { +.black .#{$primaryStyleName}-small:active, +.black .#{$primaryStyleName}-small.v-pressed { background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */ } -.black .#{$name}-small:active .#{$name}-wrap, -.black .#{$name}-small.v-pressed .#{$name}-wrap { +.black .#{$primaryStyleName}-small:active .#{$primaryStyleName}-wrap, +.black .#{$primaryStyleName}-small.v-pressed .#{$primaryStyleName}-wrap { background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .#{$name}-small, -.black .v-disabled.#{$name}-small { +.black .#{$primaryStyleName}-small, +.black .v-disabled.#{$primaryStyleName}-small { background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */ } -.black .#{$name}-small .#{$name}-wrap, -.black .v-disabled.#{$name}-small .#{$name}-wrap { +.black .#{$primaryStyleName}-small .#{$primaryStyleName}-wrap, +.black .v-disabled.#{$primaryStyleName}-small .#{$primaryStyleName}-wrap { background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } diff --git a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss index f950060d4a..632340f228 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button-standard.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button-standard.scss @@ -1,29 +1,29 @@ -@mixin reindeer-button-standard($name : v-button) { +@mixin reindeer-button-standard($primaryStyleName : v-button) { -.#{$name}:focus { +.#{$primaryStyleName}:focus { background-image: url(img/left-focus.png); /** sprite-ref: buttons */ outline: none; } -.#{$name}:focus .#{$name}-wrap { +.#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap { background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ outline: none; } -.#{$name}:active, -.#{$name}.v-pressed { +.#{$primaryStyleName}:active, +.#{$primaryStyleName}.v-pressed { background-image: url(img/left-pressed.png); /** sprite-ref: buttons */ outline: none; } -.#{$name}:active .#{$name}-wrap, -.#{$name}.v-pressed .#{$name}-wrap { +.#{$primaryStyleName}:active .#{$primaryStyleName}-wrap, +.#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap { background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ outline: none; } -.#{$name}, -.v-disabled.#{$name} { +.#{$primaryStyleName}, +.v-disabled.#{$primaryStyleName} { height: 26px; padding: 0 0 0 6px; background-color: transparent; @@ -33,8 +33,8 @@ cursor: default; } -.#{$name}-wrap, -.v-disabled.#{$name} .#{$name}-wrap { +.#{$primaryStyleName}-wrap, +.v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap { display: block; height: 22px; padding: 4px 15px 0 9px; @@ -44,7 +44,7 @@ background-image: url(img/right.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.#{$name}-caption { +.#{$primaryStyleName}-caption { color: #222; text-shadow: #fff 0 1px 0; font-weight: bold; @@ -58,35 +58,35 @@ /************************** * Black style **************************/ -.black .#{$name}:focus { +.black .#{$primaryStyleName}:focus { background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */ } -.black .#{$name}:focus .#{$name}-wrap { +.black .#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap { background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .#{$name}:active, -.black .#{$name}.v-pressed { +.black .#{$primaryStyleName}:active, +.black .#{$primaryStyleName}.v-pressed { background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */ } -.black .#{$name}:active .#{$name}-wrap, -.black .#{$name}.v-pressed .#{$name}-wrap { +.black .#{$primaryStyleName}:active .#{$primaryStyleName}-wrap, +.black .#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap { background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .#{$name}, -.black .v-disabled.#{$name} { +.black .#{$primaryStyleName}, +.black .v-disabled.#{$primaryStyleName} { background-image: url(img/black/left.png); /** sprite-ref: black-buttons */ } -.black .#{$name}-wrap, -.black .v-disabled.#{$name} .#{$name}-wrap { +.black .#{$primaryStyleName}-wrap, +.black .v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap { background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .#{$name}-caption { +.black .#{$primaryStyleName}-caption { color: #c9ccce; text-shadow: #121314 0 -1px 0; } diff --git a/WebContent/VAADIN/themes/reindeer/button/button.scss b/WebContent/VAADIN/themes/reindeer/button/button.scss index 7b61d1b213..2fd34ef2c8 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button.scss @@ -6,7 +6,7 @@ @import "button-small-style.scss"; @import "button-link-style.scss"; -@mixin reindeer-button($name : v-button) { +@mixin reindeer-button($primaryStyleName : v-button) { // TODO use $exclude @include reindeer-button-standard; @include reindeer-button-primary-style; diff --git a/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss b/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss index bd6ca35627..ca7a16e88e 100644 --- a/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss +++ b/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss @@ -1,9 +1,9 @@ /* Browser-specific corrections to the standard implementation */ @import "button-ie.scss"; -@mixin reindeer-nativebutton-link($name : v-nativebutton) { +@mixin reindeer-nativebutton-link($primaryStyleName : v-nativebutton) { -.#{$name}-link .#{$name}-caption { +.#{$primaryStyleName}-link .#{$primaryStyleName}-caption { line-height: inherit; font-weight: normal; color: #1b699f; @@ -11,15 +11,15 @@ text-shadow: none; } -.#{$name}-link:focus .#{$name}-caption { +.#{$primaryStyleName}-link:focus .#{$primaryStyleName}-caption { outline: 1px dotted #1b699f; } } -@mixin reindeer-nativebutton($name : v-nativebutton) { - @include reindeer-nativebutton-link($name); +@mixin reindeer-nativebutton($primaryStyleName : v-nativebutton) { + @include reindeer-nativebutton-link($primaryStyleName); /* Browser-specific corrections to the standard implementation */ - @include reindeer-button-ie($name); + @include reindeer-button-ie($primaryStyleName); }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss index 74c65ae4eb..0969be3532 100644 --- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss @@ -1,30 +1,30 @@ -@mixin reindeer-datefield($name : v-datefield) { +@mixin reindeer-datefield($primaryStyleName : v-datefield) { -.#{$name} { +.#{$primaryStyleName} { overflow: hidden; } input.v-textfield-readonly:focus{ background-color: transparent; } -.#{$name}-calendarpanel { +.#{$primaryStyleName}-calendarpanel { border-collapse: collapse; margin: 0; padding: 0; height: auto !important; } -.#{$name}-year .#{$name}-calendarpanel-prevmonth, -.#{$name}-year .#{$name}-calendarpanel-nextmonth { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth, +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-nextmonth { display: none; } -.#{$name}-calendarpanel td { +.#{$primaryStyleName}-calendarpanel td { vertical-align: top; } -td.#{$name}-calendarpanel-month { +td.#{$primaryStyleName}-calendarpanel-month { height: 23px; background-repeat: repeat-x; background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -span.#{$name}-calendarpanel-month { +span.#{$primaryStyleName}-calendarpanel-month { display: block; text-align: center; height: 16px; @@ -35,36 +35,36 @@ span.#{$name}-calendarpanel-month { overflow: hidden; margin-top: 1px; } -.#{$name}-year .#{$name}-calendarpanel-month { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month { width: 35px; } -.#{$name}-month .#{$name}-calendarpanel-month, -.#{$name}-day .#{$name}-calendarpanel-month, -.#{$name}-full .#{$name}-calendarpanel-month { +.#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month, +.#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month, +.#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month { width: 124px; } -.#{$name}-month, -.#{$name}-day, -.#{$name}-full { +.#{$primaryStyleName}-month, +.#{$primaryStyleName}-day, +.#{$primaryStyleName}-full { min-width: 240px; } -.#{$name}-popupcalendar { +.#{$primaryStyleName}-popupcalendar { min-width: 0; padding-right: 24px; } -.#{$name}-year .#{$name}-calendarpanel { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel { width: 100px; } -td.#{$name}-calendarpanel-prevyear { +td.#{$primaryStyleName}-calendarpanel-prevyear { text-align: right; } -td.#{$name}-calendarpanel-nextyear { +td.#{$primaryStyleName}-calendarpanel-nextyear { text-align: left; } -.#{$name}-calendarpanel-prevyear button, -.#{$name}-calendarpanel-nextyear button, -.#{$name}-calendarpanel-prevmonth button, -.#{$name}-calendarpanel-nextmonth button { +.#{$primaryStyleName}-calendarpanel-prevyear button, +.#{$primaryStyleName}-calendarpanel-nextyear button, +.#{$primaryStyleName}-calendarpanel-prevmonth button, +.#{$primaryStyleName}-calendarpanel-nextmonth button { width: 24px; height: 23px; border: none; @@ -79,33 +79,33 @@ td.#{$name}-calendarpanel-nextyear { -moz-border-radius: 0; border-radius: 0; } -.v-ie .#{$name}-calendarpanel-prevyear button, -.v-ie .#{$name}-calendarpanel-nextyear button, -.v-ie .#{$name}-calendarpanel-prevmonth button, -.v-ie .#{$name}-calendarpanel-nextmonth button { +.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button, +.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button, +.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button, +.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button { text-indent: 0; font-size: 1px; } -.#{$name}-calendarpanel-nextyear button { +.#{$primaryStyleName}-calendarpanel-nextyear button { background-position: left top; background-image: url(img/year-next.png); /** sprite-ref: verticals */ } -.#{$name}-calendarpanel-prevyear button:active, -.v-ie .#{$name}-calendarpanel-prevyear button.v-pressed { +.#{$primaryStyleName}-calendarpanel-prevyear button:active, +.v-ie .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed { background-image: url(img/year-prev-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-calendarpanel-nextyear button:active, -.v-ie .#{$name}-calendarpanel-nextyear button.v-pressed { +.#{$primaryStyleName}-calendarpanel-nextyear button:active, +.v-ie .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed { background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-calendarpanel-prevmonth, -.#{$name}-calendarpanel-nextmonth { +.#{$primaryStyleName}-calendarpanel-prevmonth, +.#{$primaryStyleName}-calendarpanel-nextmonth { width: 24px; background-repeat: repeat-x; background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-calendarpanel-prevmonth button, -.#{$name}-calendarpanel-nextmonth button { +.#{$primaryStyleName}-calendarpanel-prevmonth button, +.#{$primaryStyleName}-calendarpanel-nextmonth button { width: 100%; height: 21px; border-left: 1px solid #efefef; @@ -116,36 +116,36 @@ td.#{$name}-calendarpanel-nextyear { min-width: 24px; margin-top: 1px; } -.v-ie .#{$name}-calendarpanel-prevmonth button, -.v-ie .#{$name}-calendarpanel-nextmonth button { +.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button, +.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button { border: none; } -.#{$name}-calendarpanel-nextmonth button { +.#{$primaryStyleName}-calendarpanel-nextmonth button { background-image: url(img/month-next.png); /** sprite-ref: verticals; sprite-alignment: center */ } -.#{$name}-calendarpanel-prevmonth button:active, -.v-ie .#{$name}-calendarpanel-prevmonth button.v-pressed { +.#{$primaryStyleName}-calendarpanel-prevmonth button:active, +.v-ie .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed { background-position: center top; background-image: url(img/month-prev-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */ } -.#{$name}-calendarpanel-nextmonth button:active, -.v-ie .#{$name}-calendarpanel-nextmonth button.v-pressed { +.#{$primaryStyleName}-calendarpanel-nextmonth button:active, +.v-ie .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed { background-position: center top; background-image: url(img/month-next-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */ } -.#{$name}-calendarpanel-body, -.#{$name}-calendarpanel-time { +.#{$primaryStyleName}-calendarpanel-body, +.#{$primaryStyleName}-calendarpanel-time { text-align: center; vertical-align: top; } -.#{$name}-calendarpanel-body table { +.#{$primaryStyleName}-calendarpanel-body table { border-collapse: collapse; margin: 0; padding: 0; width: 220px; margin: 0 auto; } -.#{$name}-calendarpanel-weekdays td { +.#{$primaryStyleName}-calendarpanel-weekdays td { width: 14.2%; overflow: hidden; background-repeat: repeat-x; @@ -158,57 +158,57 @@ td.#{$name}-calendarpanel-nextyear { vertical-align: top; padding:0; } -.#{$name}-calendarpanel-weeknumbers td { +.#{$primaryStyleName}-calendarpanel-weeknumbers td { width: 12.4%; } -.#{$name}-calendarpanel-weekdays strong { +.#{$primaryStyleName}-calendarpanel-weekdays strong { display: block; text-align: right; padding: 1px 5px 0 0; height: 14px; border-top: 1px solid #596775; } -.#{$name}-calendarpanel-weekdays .v-first { +.#{$primaryStyleName}-calendarpanel-weekdays .v-first { background-repeat: no-repeat; background-image: url(img/weekday-first.png); /** sprite-ref: verticals; sprite-margin-bottom: 3px */ } -.#{$name}-calendarpanel-weekdays .v-last { +.#{$primaryStyleName}-calendarpanel-weekdays .v-last { background-repeat: no-repeat; background-position: right top; background-image: url(img/weekday-last.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-bottom: 3px */ } /* IE fails to position backgrounds inside table element */ -.v-ie .#{$name}-calendarpanel-weekdays td { +.v-ie .#{$primaryStyleName}-calendarpanel-weekdays td { background: url(img/weekday-bg.png) repeat-x; background-position: left top; } -.v-ie .#{$name}-calendarpanel .v-first { +.v-ie .#{$primaryStyleName}-calendarpanel .v-first { background: url(img/weekday-first.png) no-repeat; } -.v-ie .#{$name}-calendarpanel .v-last { +.v-ie .#{$primaryStyleName}-calendarpanel .v-last { background: url(img/weekday-last.png) no-repeat right top; } -.#{$name}-calendarpanel-body td { +.#{$primaryStyleName}-calendarpanel-body td { text-align: right; height: 19px; } -.#{$name}-calendarpanel-day, -.#{$name}-calendarpanel-weeknumber, -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day, +.#{$primaryStyleName}-calendarpanel-weeknumber, +.#{$primaryStyleName}-calendarpanel-day-today { padding: 2px 5px 2px 0; display: block; margin: 1px 0 0 5px; } -.#{$name}-calendarpanel-weeknumber { +.#{$primaryStyleName}-calendarpanel-weeknumber { margin: 0; padding-top: 4px; padding-bottom: 3px; } -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day-today { color: #4095d1; border: none; } -.#{$name}-calendarpanel-day-selected { +.#{$primaryStyleName}-calendarpanel-day-selected { background: #507ba3; color: #fff; text-shadow: #3b5b79 0 1px 0; @@ -216,38 +216,38 @@ td.#{$name}-calendarpanel-nextyear { -webkit-border-radius: 2px; -moz-border-radius: 2px; } -.#{$name}-calendarpanel-time select { +.#{$primaryStyleName}-calendarpanel-time select { padding: 0; font-size: 11px; margin: 2px; } -.#{$name}-popup { +.#{$primaryStyleName}-popup { background: #f8f8f9; padding: 8px 4px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } -.v-sa .#{$name}-popup, -.v-op .#{$name}-popup { +.v-sa .#{$primaryStyleName}-popup, +.v-op .#{$primaryStyleName}-popup { background: rgba(255,255,255,.95); } -.v-has-width > input.#{$name}-textfield { +.v-has-width > input.#{$primaryStyleName}-textfield { width: 100%; } -.#{$name}-year > .#{$name}-textfield { +.#{$primaryStyleName}-year > .#{$primaryStyleName}-textfield { width: 4.5em; } -.#{$name}-month > .#{$name}-textfield { +.#{$primaryStyleName}-month > .#{$primaryStyleName}-textfield { width: 5.5em; } -.#{$name}-day > .#{$name}-textfield { +.#{$primaryStyleName}-day > .#{$primaryStyleName}-textfield { width: 6em; } -.#{$name}-full >.#{$name}-textfield { +.#{$primaryStyleName}-full >.#{$primaryStyleName}-textfield { width: 12.5em; } -.#{$name}-popupcalendar input.#{$name}-textfield { +.#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield { border-right-width: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; @@ -258,17 +258,17 @@ td.#{$name}-calendarpanel-nextyear { -moz-box-sizing: border-box; box-sizing: border-box; } -.#{$name}.v-readonly input.#{$name}-textfield { +.#{$primaryStyleName}.v-readonly input.#{$primaryStyleName}-textfield { border-right-width: 1px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } -.#{$name}-prompt .#{$name}-textfield { +.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield { color: #999; font-style: normal; } -.#{$name}-popupcalendar .#{$name}-button { +.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button { width: 24px; margin-right: -24px; height: 23px; @@ -281,15 +281,15 @@ td.#{$name}-calendarpanel-nextyear { -moz-border-radius: 0; border-radius: 0; } -.#{$name}-popupcalendar .#{$name}-button:active { +.#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:active { background-image: url(img/popup-btn-pressed.png); /** sprite-ref: verticals */ } /* over black background */ -.black .#{$name}-popupcalendar .#{$name}-button { +.black .#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button { background-image: url(img/popup-btn-black.png); /** sprite-ref: black-verticals */ } -.black .#{$name}-popupcalendar .#{$name}-button:active { +.black .#{$primaryStyleName}-popupcalendar .#{$primaryStyleName}-button:active { background-image: url(img/popup-btn-black-pressed.png); /** sprite-ref: black-verticals */ } @@ -298,11 +298,11 @@ td.#{$name}-calendarpanel-nextyear { * on black background */ -.black td.#{$name}-calendarpanel-month { +.black td.#{$primaryStyleName}-calendarpanel-month { background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */ height: 21px; } -.black span.#{$name}-calendarpanel-month { +.black span.#{$primaryStyleName}-calendarpanel-month { border-left: 1px solid #333638; border-right: 1px solid #232527; color: #c9ccce; @@ -310,65 +310,65 @@ td.#{$name}-calendarpanel-nextyear { padding: 4px 10px 1px 10px; margin-top: 0; } -.black .#{$name}-calendarpanel-prevyear button, -.black .#{$name}-calendarpanel-nextyear button, -.black .#{$name}-calendarpanel-prevmonth button, -.black .#{$name}-calendarpanel-nextmonth button { +.black .#{$primaryStyleName}-calendarpanel-prevyear button, +.black .#{$primaryStyleName}-calendarpanel-nextyear button, +.black .#{$primaryStyleName}-calendarpanel-prevmonth button, +.black .#{$primaryStyleName}-calendarpanel-nextmonth button { background-image: url(img/year-prev-black.png); /** sprite-ref: black-verticals */ height: 21px; } -.black .#{$name}-calendarpanel-nextyear button { +.black .#{$primaryStyleName}-calendarpanel-nextyear button { background-image: url(img/year-next-black.png); /** sprite-ref: black-verticals */ } -.black .#{$name}-calendarpanel-prevyear button:active, -.v-ie .black .#{$name}-calendarpanel-prevyear button.v-pressed { +.black .#{$primaryStyleName}-calendarpanel-prevyear button:active, +.v-ie .black .#{$primaryStyleName}-calendarpanel-prevyear button.v-pressed { background-image: url(img/year-prev-black-pressed.png); /** sprite-ref: black-verticals */ } -.black .#{$name}-calendarpanel-nextyear button:active, -.v-ie .black .#{$name}-calendarpanel-nextyear button.v-pressed { +.black .#{$primaryStyleName}-calendarpanel-nextyear button:active, +.v-ie .black .#{$primaryStyleName}-calendarpanel-nextyear button.v-pressed { background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */ } -.black .#{$name}-calendarpanel-prevmonth, -.black .#{$name}-calendarpanel-nextmonth { +.black .#{$primaryStyleName}-calendarpanel-prevmonth, +.black .#{$primaryStyleName}-calendarpanel-nextmonth { background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */ } -.black .#{$name}-calendarpanel-prevmonth button, -.black .#{$name}-calendarpanel-nextmonth button { +.black .#{$primaryStyleName}-calendarpanel-prevmonth button, +.black .#{$primaryStyleName}-calendarpanel-nextmonth button { border-left: 1px solid #333638; border-right: 1px solid #232527; background-image: url(img/month-prev-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */ margin-top: 0; } -.black .#{$name}-calendarpanel-nextmonth button { +.black .#{$primaryStyleName}-calendarpanel-nextmonth button { background-image: url(img/month-next-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */ } -.black .#{$name}-calendarpanel-prevmonth button:active, -.v-ie .black .#{$name}-calendarpanel-prevmonth button.v-pressed { +.black .#{$primaryStyleName}-calendarpanel-prevmonth button:active, +.v-ie .black .#{$primaryStyleName}-calendarpanel-prevmonth button.v-pressed { background-image: url(img/month-prev-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */ } -.black .#{$name}-calendarpanel-nextmonth button:active, -.v-ie .black .#{$name}-calendarpanel-nextmonth button.v-pressed { +.black .#{$primaryStyleName}-calendarpanel-nextmonth button:active, +.v-ie .black .#{$primaryStyleName}-calendarpanel-nextmonth button.v-pressed { background-image: url(img/month-next-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */ } -.v-ie .black .#{$name}-calendarpanel-prevmonth button, -.v-ie .black .#{$name}-calendarpanel-nextmonth button { +.v-ie .black .#{$primaryStyleName}-calendarpanel-prevmonth button, +.v-ie .black .#{$primaryStyleName}-calendarpanel-nextmonth button { border: none; } -.black .#{$name}-calendarpanel-weekdays td { +.black .#{$primaryStyleName}-calendarpanel-weekdays td { background-image: url(img/weekday-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 3px */ color: #0a0b0b; text-shadow: #5a5c5e 0 1px 0; } -.black .#{$name}-calendarpanel-weekdays strong { +.black .#{$primaryStyleName}-calendarpanel-weekdays strong { border-top-color: #1b1c1d; } -.black .#{$name}-calendarpanel .v-first { +.black .#{$primaryStyleName}-calendarpanel .v-first { background-image: url(img/weekday-first-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 3px */ } -.black .#{$name}-calendarpanel .v-last { +.black .#{$primaryStyleName}-calendarpanel .v-last { background-image: url(img/weekday-last-black.png); /** sprite-ref: black-verticals; sprite-alignment: right */ } -.black .#{$name}-prompt .#{$name}-textfield { +.black .#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield { color: #5f6366; } diff --git a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss index cecc439b09..51b8a96b60 100644 --- a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss +++ b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss @@ -1,36 +1,36 @@ -@mixin reindeer-formlayout($name : v-formlayout) { +@mixin reindeer-formlayout($primaryStyleName : v-formlayout) { -.#{$name}-errorcell { +.#{$primaryStyleName}-errorcell { width: 13px; } -.#{$name}-cell .v-errorindicator { +.#{$primaryStyleName}-cell .v-errorindicator { width: 13px; height: 16px; background: transparent url(../common/icons/error.png) no-repeat 50%; } -.#{$name}-captioncell { +.#{$primaryStyleName}-captioncell { text-align: right; white-space: nowrap; } -.#{$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: 8px; } -.#{$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: 15px; } -.#{$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: 15px; } -.#{$name}-margin-left > tbody > .#{$name}-row > .#{$name}-captioncell { +.#{$primaryStyleName}-margin-left > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-captioncell { padding-left: 18px; } -.#{$name}-margin-right > tbody > .#{$name}-row > .#{$name}-contentcell { +.#{$primaryStyleName}-margin-right > tbody > .#{$primaryStyleName}-row > .#{$primaryStyleName}-contentcell { padding-right: 18px; } /* form */ diff --git a/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss index 19402f8208..8ad3c1a012 100644 --- a/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss +++ b/WebContent/VAADIN/themes/reindeer/inlinedatefield/inlinedatefield.scss @@ -1,8 +1,8 @@ -@mixin reindeer-inlinedatefield ($name : v-inline-datefield) { +@mixin reindeer-inlinedatefield ($primaryStyleName : v-inline-datefield) { @include reindeer-datefield(v-inline-datefield); - .#{$name} { + .#{$primaryStyleName} { line-height:14px; /* Override popup datefields line-height:0 to get correct line heights */ } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/label/label.scss b/WebContent/VAADIN/themes/reindeer/label/label.scss index 44abf64e36..68b0d58eb0 100644 --- a/WebContent/VAADIN/themes/reindeer/label/label.scss +++ b/WebContent/VAADIN/themes/reindeer/label/label.scss @@ -1,6 +1,6 @@ -@mixin reindeer-label($name : v-label) { +@mixin reindeer-label($primaryStyleName : v-label) { -.#{$name} { +.#{$primaryStyleName} { line-height: 18px; } @@ -12,27 +12,27 @@ color: #C9CCCE; text-shadow: 0 0 1px #000; } -.black .#{$name}-h1, -.black .#{$name}-h2, +.black .#{$primaryStyleName}-h1, +.black .#{$primaryStyleName}-h2, .black .v-caption-h1, .black .v-caption-h2, -.white .black .#{$name}-h1, -.white .black .#{$name}-h2, +.white .black .#{$primaryStyleName}-h1, +.white .black .#{$primaryStyleName}-h2, .white .black .v-caption-h1, .white .black .v-caption-h2, -.blue .black .#{$name}-h1, -.blue .black .#{$name}-h2, +.blue .black .#{$primaryStyleName}-h1, +.blue .black .#{$primaryStyleName}-h2, .blue .black .v-caption-h1, .blue .black .v-caption-h2 { color: #fff; text-shadow: rgba(0,0,0,.8) 0 2px 2px; } -.black .#{$name}-light, -.white .black .#{$name}-light { +.black .#{$primaryStyleName}-light, +.white .black .#{$primaryStyleName}-light { color: #72787c; } -.black .#{$name} hr, -.white .black .#{$name} hr { +.black .#{$primaryStyleName} hr, +.white .black .#{$primaryStyleName} hr { background: #0c0d0e; color: #0c0d0e; border-bottom-color: #292b2e; @@ -48,23 +48,23 @@ color: #222; text-shadow: none; } -.blue .#{$name}-h1, -.blue .#{$name}-h2, +.blue .#{$primaryStyleName}-h1, +.blue .#{$primaryStyleName}-h2, .blue .v-caption-h1, .blue .v-caption-h2, -.white .blue .#{$name}-h1, -.white .blue .#{$name}-h2, +.white .blue .#{$primaryStyleName}-h1, +.white .blue .#{$primaryStyleName}-h2, .white .blue .v-caption-h1, .white .blue .v-caption-h2 { color: #fff; text-shadow: rgba(0,0,0,.3) 0 1px 1px; } -.blue .#{$name}-light, -.white .blue .#{$name}-light { +.blue .#{$primaryStyleName}-light, +.white .blue .#{$primaryStyleName}-light { color: #6e7c83; } -.blue .#{$name} hr, -.white .blue .#{$name} hr { +.blue .#{$primaryStyleName} hr, +.white .blue .#{$primaryStyleName} hr { background: #a3bcc9; color: #a3bcc9; border-bottom-color: #cfe2eb; @@ -73,12 +73,12 @@ /********************** * Default & white styles **********************/ -.#{$name}-h1, -.#{$name}-h2, +.#{$primaryStyleName}-h1, +.#{$primaryStyleName}-h2, .v-caption-h1, .v-caption-h2, -.white .#{$name}-h1, -.white .#{$name}-h2, +.white .#{$primaryStyleName}-h1, +.white .#{$primaryStyleName}-h2, .white .v-caption-h1, .white .v-caption-h2 { font-family: Helvetica, Arial, "Lucida Grande", Geneva, Tahoma, Verdana, sans-serif; @@ -89,22 +89,22 @@ letter-spacing: -0.02em; text-shadow: #fff 0 -1px 1px; } -.#{$name}-h2, +.#{$primaryStyleName}-h2, .v-caption-h2, -.white .#{$name}-h2, +.white .#{$primaryStyleName}-h2, .white .v-caption-h2 { font-size: 16px; line-height: 22px; } -.#{$name}-light, -.white .#{$name}-light { +.#{$primaryStyleName}-light, +.white .#{$primaryStyleName}-light { font-size: 11px; line-height: 13px; color: #707070; } -.#{$name} hr, -.white .#{$name} hr { +.#{$primaryStyleName} hr, +.white .#{$primaryStyleName} hr { height: 2px; overflow: hidden; background: #dcdcdc; @@ -113,13 +113,13 @@ border-bottom: 1px solid #fff; } -.v-sa .#{$name} hr, -.v-ie8 .#{$name} hr { +.v-sa .#{$primaryStyleName} hr, +.v-ie8 .#{$primaryStyleName} hr { height: 1px; } /* Labels inside Table don't need a line-height */ -.v-table .#{$name} { +.v-table .#{$primaryStyleName} { line-height: normal; } diff --git a/WebContent/VAADIN/themes/reindeer/link/link.scss b/WebContent/VAADIN/themes/reindeer/link/link.scss index 99233dfe39..f1d2a31d83 100644 --- a/WebContent/VAADIN/themes/reindeer/link/link.scss +++ b/WebContent/VAADIN/themes/reindeer/link/link.scss @@ -1,12 +1,12 @@ -@mixin reindeer-link($name : v-link) { +@mixin reindeer-link($primaryStyleName : v-link) { -.#{$name} a:link span { +.#{$primaryStyleName} a:link span { color: #1b699f; } -.#{$name} a:visited span { +.#{$primaryStyleName} a:visited span { color: #5c7485; } -.#{$name} a:hover span { +.#{$primaryStyleName} a:hover span { color: #2483c4; } diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss index 8d81a12a5b..277fb1732d 100644 --- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss +++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss @@ -1,6 +1,6 @@ -@mixin reindeer-menubar($name : v-menubar) { +@mixin reindeer-menubar($primaryStyleName : v-menubar) { -.#{$name} { +.#{$primaryStyleName} { height: 23px; background: #323336 repeat-x; background-image: url(img/bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ @@ -8,15 +8,15 @@ text-shadow: rgba(0,0,0,.9) 0 1px 0; padding: 0 8px; } -.#{$name} .#{$name}-menuitem { +.#{$primaryStyleName} .#{$primaryStyleName}-menuitem { padding: 3px 8px; height: 17px; line-height: 16px; } -.#{$name} .#{$name}-menuitem:hover { +.#{$primaryStyleName} .#{$primaryStyleName}-menuitem:hover { color: #fff; } -.#{$name}-submenu { +.#{$primaryStyleName}-submenu { background: #f8f8f9; border: none; border-radius: 3px; @@ -26,50 +26,50 @@ overflow: hidden; padding: 4px 0; } -.#{$name}-submenu .#{$name}-menuitem { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem { padding: 1px 26px 1px 10px; line-height: 16px; } -.#{$name}-submenu .#{$name}-menuitem-caption .v-icon { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-caption .v-icon { vertical-align: middle; } -.#{$name} .#{$name}-menuitem-selected, -.#{$name}-submenu .#{$name}-menuitem-selected { +.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-selected, +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected { background: #4d749f repeat-x; background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #fff; text-shadow: 0 1px 0 #3b5a7a; } -.#{$name} .#{$name}-menuitem-selected { +.#{$primaryStyleName} .#{$primaryStyleName}-menuitem-selected { background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */ } -.#{$name}-submenu .#{$name}-submenu-indicator { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-submenu-indicator { background: transparent url(img/submenu-icon.png) no-repeat right 70%; width: 26px; height: 16px; text-indent: -9999px; } -.#{$name}-submenu .#{$name}-menuitem-selected .#{$name}-submenu-indicator { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected .#{$primaryStyleName}-submenu-indicator { background-image: url(img/submenu-icon-hover.png); } /* Checkboxes for checkable/checked menu items */ -.#{$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/checked.png) no-repeat left; } -.#{$name}-submenu .#{$name}-menuitem-unchecked .#{$name}-menuitem-caption { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-unchecked .#{$primaryStyleName}-menuitem-caption { background: transparent url(img/unchecked.png) no-repeat left; } -.#{$name}-submenu .#{$name}-menuitem-selected-checked .#{$name}-menuitem-caption { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected-checked .#{$primaryStyleName}-menuitem-caption { background: transparent url(img/checked-selected.png) no-repeat left; } -.#{$name}-submenu .#{$name}-menuitem-selected-unchecked .#{$name}-menuitem-caption { +.#{$primaryStyleName}-submenu .#{$primaryStyleName}-menuitem-selected-unchecked .#{$primaryStyleName}-menuitem-caption { background: transparent url(img/unchecked-selected.png) no-repeat left; } diff --git a/WebContent/VAADIN/themes/reindeer/notification/notification.scss b/WebContent/VAADIN/themes/reindeer/notification/notification.scss index aafff47e96..6eb53dc70a 100644 --- a/WebContent/VAADIN/themes/reindeer/notification/notification.scss +++ b/WebContent/VAADIN/themes/reindeer/notification/notification.scss @@ -1,6 +1,6 @@ -@mixin reindeer-notification($name : v-Notification) { +@mixin reindeer-notification($primaryStyleName : v-Notification) { -.#{$name} { +.#{$primaryStyleName} { color: #fff; border-radius: 4px; -moz-border-radius: 4px; @@ -10,38 +10,38 @@ font-weight: bold; } -.v-ie9 .#{$name} H1 { +.v-ie9 .#{$primaryStyleName} H1 { /* Fix for #6793 */ font-weight: bold; } -.#{$name} p { +.#{$primaryStyleName} p { line-height: 1.3; } -.#{$name}-warning { +.#{$primaryStyleName}-warning { background: #fdf3b5; color: #ca9a61; border: 3px solid #fee3af; } -.#{$name}-error { +.#{$primaryStyleName}-error { background: #b40000 url(img/error-close.png) no-repeat right top; border: 3px solid #ca3030; } -.#{$name}-tray { +.#{$primaryStyleName}-tray { margin: 0 5px 5px 0; background: #3b3c3e; border: 2px solid #585b5c; padding: 0.8em 0.9em; } -.#{$name}-tray h1 { +.#{$primaryStyleName}-tray h1 { font-size: 14px; line-height: 18px; } -.#{$name}-tray p { +.#{$primaryStyleName}-tray p { font-size: 12px; font-weight: normal; } -.#{$name}-system { +.#{$primaryStyleName}-system { background-color: #b40000; } diff --git a/WebContent/VAADIN/themes/reindeer/panel/panel.scss b/WebContent/VAADIN/themes/reindeer/panel/panel.scss index e692ba90a9..8de6ea7f62 100644 --- a/WebContent/VAADIN/themes/reindeer/panel/panel.scss +++ b/WebContent/VAADIN/themes/reindeer/panel/panel.scss @@ -1,58 +1,58 @@ -@mixin reindeer-panel($name : v-panel) { +@mixin reindeer-panel($primaryStyleName : v-panel) { -.blue .#{$name}-caption, -.blue .#{$name}-nocaption, -.blue .#{$name}-content { +.blue .#{$primaryStyleName}-caption, +.blue .#{$primaryStyleName}-nocaption, +.blue .#{$primaryStyleName}-content { border-color: #a8bcc5; } -.#{$name}-caption, -.#{$name}-nocaption, -.white .#{$name}-caption, -.white .#{$name}-nocaption { +.#{$primaryStyleName}-caption, +.#{$primaryStyleName}-nocaption, +.white .#{$primaryStyleName}-caption, +.white .#{$primaryStyleName}-nocaption { border-bottom: 1px solid #e5e5e5; line-height: 16px; /* accommodate minimum icon size */ } -.v-webkit .#{$name}-caption, -.v-webkit .#{$name}-nocaption, -.v-gecko .#{$name}-caption, -.v-gecko .#{$name}-nocaption, -.v-ie9 .#{$name}-caption, -.v-ie9 .#{$name}-nocaption { +.v-webkit .#{$primaryStyleName}-caption, +.v-webkit .#{$primaryStyleName}-nocaption, +.v-gecko .#{$primaryStyleName}-caption, +.v-gecko .#{$primaryStyleName}-nocaption, +.v-ie9 .#{$primaryStyleName}-caption, +.v-ie9 .#{$primaryStyleName}-nocaption { border-bottom-color: rgba(0,0,0,.08); } -.#{$name}-caption { +.#{$primaryStyleName}-caption { padding-bottom: 2px; } -.#{$name}-content, -.white .#{$name}-content { +.#{$primaryStyleName}-content, +.white .#{$primaryStyleName}-content { background: #fff; border: 1px solid #dcdcdc; border-bottom: none; border-top: none; } -.v-webkit .#{$name}-content, -.v-gecko .#{$name}-content, -.v-ie9 .#{$name}-content { +.v-webkit .#{$primaryStyleName}-content, +.v-gecko .#{$primaryStyleName}-content, +.v-ie9 .#{$primaryStyleName}-content { border-top-color: rgba(0,0,0,.07); } -.blue .#{$name}-deco { +.blue .#{$primaryStyleName}-deco { border-color: #92a3ac; background: #adc2cd; } -.#{$name}-deco, -.white .#{$name}-deco { +.#{$primaryStyleName}-deco, +.white .#{$primaryStyleName}-deco { height: 1px; border-top: 1px solid #bebebe; background: #e2e2e2; overflow: hidden; } -.v-webkit .#{$name}-deco, -.v-gecko .#{$name}-deco, -.v-ie9 .#{$name}-deco { +.v-webkit .#{$primaryStyleName}-deco, +.v-gecko .#{$primaryStyleName}-deco, +.v-ie9 .#{$primaryStyleName}-deco { border-top-color: rgba(0,0,0,.1); background: rgba(0,0,0,.08); } -.#{$name}-caption .v-errorindicator { +.#{$primaryStyleName}-caption .v-errorindicator { height: 16px; width: 13px; background: url(../common/icons/error.png) no-repeat 50%; @@ -62,15 +62,15 @@ } /* Light style */ -.#{$name}-light .#{$name}-caption-light, -.#{$name}-light .#{$name}-nocaption-light { +.#{$primaryStyleName}-light .#{$primaryStyleName}-caption-light, +.#{$primaryStyleName}-light .#{$primaryStyleName}-nocaption-light { border: none; } -.#{$name}-light .#{$name}-content-light { +.#{$primaryStyleName}-light .#{$primaryStyleName}-content-light { border: none; background: transparent; } -.#{$name}-light .#{$name}-deco-light { +.#{$primaryStyleName}-light .#{$primaryStyleName}-deco-light { height: 0; border: none; } diff --git a/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss index f30f059bef..a6e7ad9843 100644 --- a/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss +++ b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss @@ -1,12 +1,12 @@ -@mixin reindeer-popupview($name : v-popupview) { +@mixin reindeer-popupview($primaryStyleName : v-popupview) { -.#{$name} { +.#{$primaryStyleName} { color: #1b699f; } -.#{$name}:hover { +.#{$primaryStyleName}:hover { color: #2483c4; } -.#{$name}-popup { +.#{$primaryStyleName}-popup { background: #fff; padding: 3px; } diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss index 62be029670..52e4239752 100644 --- a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss +++ b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss @@ -1,13 +1,13 @@ -@mixin reindeer-progressindicator($name : v-progressindicator) { +@mixin reindeer-progressindicator($primaryStyleName : v-progressindicator) { -.#{$name}-wrapper { +.#{$primaryStyleName}-wrapper { background: #dfe2e4 url(img/base.gif) repeat-x; border: 1px solid #bfbfbf; } -.v-disabled .#{$name}-wrapper { +.v-disabled .#{$primaryStyleName}-wrapper { background-image: url(img/disabled.gif); } -.#{$name}-indicator { +.#{$primaryStyleName}-indicator { background: #f7f9f9 url(img/progress.png); } diff --git a/WebContent/VAADIN/themes/reindeer/select/select.scss b/WebContent/VAADIN/themes/reindeer/select/select.scss index 3ab415f813..1785a367e6 100644 --- a/WebContent/VAADIN/themes/reindeer/select/select.scss +++ b/WebContent/VAADIN/themes/reindeer/select/select.scss @@ -1,42 +1,42 @@ -@mixin reindeer-select($name : v-filterselect) { +@mixin reindeer-select($primaryStyleName : v-filterselect) { -.#{$name} { +.#{$primaryStyleName} { height: 24px; background-repeat: no-repeat; background-image: url(img/left.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */ padding-left: 2px; padding-right: 25px; /* Space for the button */ } -&.v-app .#{$name}-input, -.v-window .#{$name}-input, -.v-popupview-popup .#{$name}-input { +&.v-app .#{$primaryStyleName}-input, +.v-window .#{$primaryStyleName}-input, +.v-popupview-popup .#{$primaryStyleName}-input { background: transparent repeat-x; background-image: url(img/center.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */ border: none; height: 24px; } /* More specific selector to override padding */ -&.v-app input.#{$name}-input, -.v-window input.#{$name}-input, -.v-popupview-popup input.#{$name}-input { +&.v-app input.#{$primaryStyleName}-input, +.v-window input.#{$primaryStyleName}-input, +.v-popupview-popup input.#{$primaryStyleName}-input { padding: 4px 0 4px 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.#{$name}-prompt .#{$name}-input { +.#{$primaryStyleName}-prompt .#{$primaryStyleName}-input { font-style: normal; } -.#{$name}-input:focus { +.#{$primaryStyleName}-input:focus { outline: none; } -.#{$name}-focus { +.#{$primaryStyleName}-focus { background-image: url(img/left-focus.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */ } -.#{$name}-focus .#{$name}-input { +.#{$primaryStyleName}-focus .#{$primaryStyleName}-input { background-image: url(img/center-focus.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-button { +.#{$primaryStyleName}-button { overflow: hidden; width: 25px; height: 24px; @@ -45,26 +45,26 @@ cursor: default; margin-right: -25px; } -.#{$name}-button:hover { +.#{$primaryStyleName}-button:hover { background-image: url(img/right-hover.png); /** sprite-ref: verticals */ } -.#{$name}-button:active { +.#{$primaryStyleName}-button:active { background-image: url(img/right-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-focus .#{$name}-button { +.#{$primaryStyleName}-focus .#{$primaryStyleName}-button { background-image: url(img/right-focus.png); /** sprite-ref: verticals */ } -.#{$name}-focus .#{$name}-button:hover { +.#{$primaryStyleName}-focus .#{$primaryStyleName}-button:hover { background-image: url(img/right-focus-hover.png); /** sprite-ref: verticals */ } -.#{$name}-focus .#{$name}-button:active { +.#{$primaryStyleName}-focus .#{$primaryStyleName}-button:active { background-image: url(img/right-focus-pressed.png); /** sprite-ref: verticals */ } -.v-disabled .#{$name}-button:hover, -.v-readonly .#{$name}-button:hover { +.v-disabled .#{$primaryStyleName}-button:hover, +.v-readonly .#{$primaryStyleName}-button:hover { background-image: url(img/right.png); /** sprite-ref: verticals */ } -.#{$name}-suggestpopup { +.#{$primaryStyleName}-suggestpopup { background: #f8f8f9; border: none; border-radius: 3px; @@ -73,10 +73,10 @@ -o-border-radius: 3px; overflow: hidden; } -.#{$name}-suggestmenu { +.#{$primaryStyleName}-suggestmenu { margin: 4px 0; } -.#{$name}-suggestmenu .gwt-MenuItem { +.#{$primaryStyleName}-suggestmenu .gwt-MenuItem { padding: 1px 8px; height: 16px; user-select: none; @@ -84,53 +84,53 @@ -webkit-user-select: none; cursor: default; } -.v-ff .#{$name}-suggestmenu .gwt-MenuItem { +.v-ff .#{$primaryStyleName}-suggestmenu .gwt-MenuItem { height: 18px; } -.#{$name}-suggestmenu .gwt-MenuItem .v-icon { +.#{$primaryStyleName}-suggestmenu .gwt-MenuItem .v-icon { margin-right: 3px; } -.#{$name}-suggestmenu .gwt-MenuItem-selected { +.#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected { background: transparent repeat-x; background-image: url(../common/img/sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #fff; text-shadow: #3b5a7a 0 1px 0; } -.#{$name}-nextpage, -.#{$name}-nextpage-off, -.#{$name}-prevpage-off, -.#{$name}-prevpage { +.#{$primaryStyleName}-nextpage, +.#{$primaryStyleName}-nextpage-off, +.#{$primaryStyleName}-prevpage-off, +.#{$primaryStyleName}-prevpage { height: 11px; width: 100%; background: transparent; margin-bottom: -4px; } -.#{$name}-nextpage, -.#{$name}-nextpage-off { +.#{$primaryStyleName}-nextpage, +.#{$primaryStyleName}-nextpage-off { margin: -4px 0 0; } -.#{$name}-nextpage:hover { +.#{$primaryStyleName}-nextpage:hover { background-repeat: repeat-x; background-image: url(img/page-down-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-prevpage:hover { +.#{$primaryStyleName}-prevpage:hover { background-repeat: repeat-x; background-image: url(img/page-up-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-nextpage:active { +.#{$primaryStyleName}-nextpage:active { background-repeat: repeat-x; background-image: url(img/page-down-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-prevpage:active { +.#{$primaryStyleName}-prevpage:active { background-repeat: repeat-x; background-image: url(img/page-up-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-nextpage-off span, -.#{$name}-prevpage-off span { +.#{$primaryStyleName}-nextpage-off span, +.#{$primaryStyleName}-prevpage-off span { display: none; } -.#{$name}-nextpage span, -.#{$name}-prevpage span { +.#{$primaryStyleName}-nextpage span, +.#{$primaryStyleName}-prevpage span { display: block; height: 11px; width: 100%; @@ -142,16 +142,16 @@ -moz-user-select: none; -webkit-user-select: none; } -.#{$name}-prevpage span { +.#{$primaryStyleName}-prevpage span { background-image: url(img/arrow-up.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */ } -.#{$name}-nextpage:hover span { +.#{$primaryStyleName}-nextpage:hover span { background-image: url(img/arrow-down-hover.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */ } -.#{$name}-prevpage:hover span { +.#{$primaryStyleName}-prevpage:hover span { background-image: url(img/arrow-up-hover.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */ } -.#{$name}-status { +.#{$primaryStyleName}-status { text-shadow: #e9eaeb 0 1px 0; font-size: 11px; line-height: normal; @@ -170,36 +170,36 @@ -webkit-user-select: none; } /* IE fails to position background images properly inside table elements */ -.v-ie .#{$name}-suggestmenu .gwt-MenuItem-selected { +.v-ie .#{$primaryStyleName}-suggestmenu .gwt-MenuItem-selected { background: transparent url(../common/img/sel-bg.png) repeat-x; } -.v-ie .#{$name}-nextpage:hover { +.v-ie .#{$primaryStyleName}-nextpage:hover { background: transparent url(img/page-down-hover.png) repeat-x; } -.v-ie .#{$name}-prevpage:hover { +.v-ie .#{$primaryStyleName}-prevpage:hover { background: transparent url(img/page-up-hover.png) repeat-x; } -.v-ie .#{$name}-prevpage span { +.v-ie .#{$primaryStyleName}-prevpage span { background: transparent url(img/arrow-up.png) no-repeat center 3px; } -.v-ie .#{$name}-nextpage span { +.v-ie .#{$primaryStyleName}-nextpage span { background: transparent url(img/arrow-down.png) no-repeat center 3px; } -.v-ie .#{$name}-prevpage:hover span { +.v-ie .#{$primaryStyleName}-prevpage:hover span { background: transparent url(img/arrow-up-hover.png) no-repeat center 3px; } -.v-ie .#{$name}-nextpage:hover span { +.v-ie .#{$primaryStyleName}-nextpage:hover span { background: transparent url(img/arrow-down-hover.png) no-repeat center 3px; } -.v-ie .#{$name}-status { +.v-ie .#{$primaryStyleName}-status { background: transparent url(img/status-bg.png) repeat-x; } /* Filterselect with icon needs a similar fix than in buttons */ -.#{$name} .v-icon { +.#{$primaryStyleName} .v-icon { width: 16px; position: relative; } -.#{$name} .v-icon + .#{$name}-input { +.#{$primaryStyleName} .v-icon + .#{$primaryStyleName}-input { margin-left: -16px; padding-left: 18px; } @@ -208,45 +208,45 @@ /* Combobox on black background */ -.black .#{$name} { +.black .#{$primaryStyleName} { background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -&.v-app .black .#{$name}-input, -.v-window .black .#{$name}-input, -.v-window-black .#{$name}-input, -.v-popupview-popup .black .#{$name}-input { +&.v-app .black .#{$primaryStyleName}-input, +.v-window .black .#{$primaryStyleName}-input, +.v-window-black .#{$primaryStyleName}-input, +.v-popupview-popup .black .#{$primaryStyleName}-input { color: #c9ccce; background-image: url(img/black/center-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */ } -.black .#{$name}-focus { +.black .#{$primaryStyleName}-focus { background-image: url(img/black/left-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .#{$name}-focus .#{$name}-input { +.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-input { background-image: url(img/black/center-black-focus.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */ } -.black .#{$name}-button { +.black .#{$primaryStyleName}-button { background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .#{$name}-button:hover { +.black .#{$primaryStyleName}-button:hover { background-image: url(img/black/right-black-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .#{$name}-button:active { +.black .#{$primaryStyleName}-button:active { background-image: url(img/black/right-black-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .#{$name}-focus .#{$name}-button { +.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button { background-image: url(img/black/right-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .#{$name}-focus .#{$name}-button:hover { +.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button:hover { background-image: url(img/black/right-black-focus-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .#{$name}-focus .#{$name}-button:active { +.black .#{$primaryStyleName}-focus .#{$primaryStyleName}-button:active { background-image: url(img/black/right-black-focus-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-disabled .#{$name}-button:hover, -.black .v-readonly .#{$name}-button:hover { +.black .v-disabled .#{$primaryStyleName}-button:hover, +.black .v-readonly .#{$primaryStyleName}-button:hover { background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .#{$name}-prompt .#{$name}-input { +.black .#{$primaryStyleName}-prompt .#{$primaryStyleName}-input { color: #5f6366; } diff --git a/WebContent/VAADIN/themes/reindeer/slider/slider.scss b/WebContent/VAADIN/themes/reindeer/slider/slider.scss index 725f717543..ed286d7c68 100644 --- a/WebContent/VAADIN/themes/reindeer/slider/slider.scss +++ b/WebContent/VAADIN/themes/reindeer/slider/slider.scss @@ -1,42 +1,42 @@ -@mixin reindeer-slider($name : v-slider) { +@mixin reindeer-slider($primaryStyleName : v-slider) { -.#{$name} { +.#{$primaryStyleName} { border-top: 1px solid #9a9c9e; border-bottom: 1px solid #bdbfc1; margin: 4px 0; } -.#{$name}-base { +.#{$primaryStyleName}-base { height: 1px; background: #e0e2e2; border-top: 1px solid #adb0b1; border-left: 1px solid #a0a3a6; border-right: 1px solid #a0a3a6; } -.#{$name}-handle { +.#{$primaryStyleName}-handle { background: transparent; background-image: url(img/knob.png); /** sprite-ref: verticals */ width: 10px; height: 10px; margin-top: -5px; } -.#{$name}-handle-active { +.#{$primaryStyleName}-handle-active { background-image: url(img/knob-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-vertical { +.#{$primaryStyleName}-vertical { width: 2px; margin: 0 5px; border: none; border-left: 1px solid #9a9c9e; border-right: 1px solid #bdbfc1; } -.#{$name}-vertical .#{$name}-base { +.#{$primaryStyleName}-vertical .#{$primaryStyleName}-base { width: 2px; border-left: 1px solid #adb0b1; border-right: none; border-top: 1px solid #adb0b1; border-bottom: 1px solid #adb0b1; } -.#{$name}-vertical .#{$name}-handle { +.#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle { width: 10px; height: 10px; margin-left: -5px; diff --git a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss index c837688387..2e612e2e21 100644 --- a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss +++ b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss @@ -1,12 +1,12 @@ -@mixin reindeer-splitpanel($name : v-splitpanel) { +@mixin reindeer-splitpanel($primaryStyleName : v-splitpanel) { -.#{$name}-hsplitter, -.#{$name}-hsplitter-locked { +.#{$primaryStyleName}-hsplitter, +.#{$primaryStyleName}-hsplitter-locked { width: 7px; background-repeat: repeat-y; background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */ } -.#{$name}-hsplitter div { +.#{$primaryStyleName}-hsplitter div { width: 7px; height: 100%; /* for Opera */ background: transparent; @@ -14,13 +14,13 @@ background-position: 50%; background-image: url(img/hor-handle.png); /** sprite-ref: horizontals; sprite-alignment: center */ } -.#{$name}-vsplitter, -.#{$name}-vsplitter-locked { +.#{$primaryStyleName}-vsplitter, +.#{$primaryStyleName}-vsplitter-locked { height: 7px; background-repeat: repeat-x; background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-vsplitter div { +.#{$primaryStyleName}-vsplitter div { height: 7px; background: transparent; background-repeat: no-repeat; @@ -30,38 +30,38 @@ /* Splitpanels on blue background */ -.blue .#{$name}-hsplitter-small, -.blue .#{$name}-hsplitter-small-locked { +.blue .#{$primaryStyleName}-hsplitter-small, +.blue .#{$primaryStyleName}-hsplitter-small-locked { background: #7c8a91; } /* Splitpanels on black background */ -.black .#{$name}-hsplitter-small, -.black .#{$name}-hsplitter-small-locked { +.black .#{$primaryStyleName}-hsplitter-small, +.black .#{$primaryStyleName}-hsplitter-small-locked { background: #4e5253; } /* Small style */ -.#{$name}-hsplitter-small, -.#{$name}-hsplitter-small-locked, -.white .#{$name}-hsplitter-small, -.white .#{$name}-hsplitter-small-locked { +.#{$primaryStyleName}-hsplitter-small, +.#{$primaryStyleName}-hsplitter-small-locked, +.white .#{$primaryStyleName}-hsplitter-small, +.white .#{$primaryStyleName}-hsplitter-small-locked { width: 1px; background: #949698; } -.#{$name}-vsplitter-small, -.#{$name}-vsplitter-small-locked, -.white .#{$name}-vsplitter-small, -.white .#{$name}-vsplitter-small-locked { +.#{$primaryStyleName}-vsplitter-small, +.#{$primaryStyleName}-vsplitter-small-locked, +.white .#{$primaryStyleName}-vsplitter-small, +.white .#{$primaryStyleName}-vsplitter-small-locked { height: 1px; background: #949698; } -.#{$name}-hsplitter-small div { +.#{$primaryStyleName}-hsplitter-small div { width: 5px; margin-left: -2px; background: transparent; } -.#{$name}-vsplitter-small div { +.#{$primaryStyleName}-vsplitter-small div { height: 5px; margin-top: -2px; background: transparent; diff --git a/WebContent/VAADIN/themes/reindeer/table/table.scss b/WebContent/VAADIN/themes/reindeer/table/table.scss index a26b4f616b..c2ada54e34 100644 --- a/WebContent/VAADIN/themes/reindeer/table/table.scss +++ b/WebContent/VAADIN/themes/reindeer/table/table.scss @@ -1,20 +1,20 @@ -@mixin reindeer-table($name : v-table) { +@mixin reindeer-table($primaryStyleName : v-table) { /* Table on blue background */ -.blue .#{$name}-header-wrap { +.blue .#{$primaryStyleName}-header-wrap { border-color: #92a2aa; } -.blue .#{$name}-body { +.blue .#{$primaryStyleName}-body { border-color: #92a2aa; border-top-color: #c2c3c4; } /* Default & white style */ -.#{$name}-header-wrap, -.white .#{$name}-header-wrap, -.#{$name}-footer-wrap, -.white .#{$name}-footer-wrap, -.#{$name}-header-drag { +.#{$primaryStyleName}-header-wrap, +.white .#{$primaryStyleName}-header-wrap, +.#{$primaryStyleName}-footer-wrap, +.white .#{$primaryStyleName}-footer-wrap, +.#{$primaryStyleName}-header-drag { border-color: #c2c3c4; background: transparent repeat-x; background-image: url(img/header-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */ @@ -27,85 +27,85 @@ line-height: normal; } -.#{$name}-footer-wrap, -.white .#{$name}-footer-wrap { +.#{$primaryStyleName}-footer-wrap, +.white .#{$primaryStyleName}-footer-wrap { text-transform: none; font-size: 12px; font-weight: normal; } -.#{$name}-footer td, -.white .#{$name}-footer td { +.#{$primaryStyleName}-footer td, +.white .#{$primaryStyleName}-footer td { border-color: #c2c3c4; } -.#{$name}-footer-container { +.#{$primaryStyleName}-footer-container { padding-right: 7px; } -.#{$name}-header, -.#{$name}-footer, -.#{$name}-footer table { +.#{$primaryStyleName}-header, +.#{$primaryStyleName}-footer, +.#{$primaryStyleName}-footer table { height: 20px; } -.#{$name}-caption-container, -.#{$name}-header-drag { +.#{$primaryStyleName}-caption-container, +.#{$primaryStyleName}-header-drag { padding-top: 4px; padding-right: 4px; } -.#{$name}-caption-container .v-icon, -.#{$name}-header-drag .v-icon { +.#{$primaryStyleName}-caption-container .v-icon, +.#{$primaryStyleName}-header-drag .v-icon { height: 16px; margin: -4px 3px 0 0; vertical-align: middle; } -.v-ie .#{$name}-caption-container .v-icon, -.v-ie .#{$name}-header-drag .v-icon { +.v-ie .#{$primaryStyleName}-caption-container .v-icon, +.v-ie .#{$primaryStyleName}-header-drag .v-icon { margin-top: -3px; } -.#{$name}-resizer { +.#{$primaryStyleName}-resizer { height: 20px; width: 2px; background: transparent; border-right: 1px solid #c2c3c4; } -.#{$name}-sort-indicator { +.#{$primaryStyleName}-sort-indicator { background: transparent; width: 0px; height: 20px; } -.#{$name}-header-cell-asc .#{$name}-sort-indicator { +.#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator { background: transparent no-repeat right 7px; background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */ width: 16px; } -.#{$name}-header-cell-desc .#{$name}-sort-indicator { +.#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { background: transparent no-repeat right 7px; background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */ width: 16px; } -.#{$name}-body, -.white .#{$name}-body { +.#{$primaryStyleName}-body, +.white .#{$primaryStyleName}-body { border-color: #c2c3c4; background: #fff; } -.#{$name}-cell-content { +.#{$primaryStyleName}-cell-content { padding-top: 0; border-right-color: #d3d4d5; vertical-align: top; } -.#{$name}-cell-wrapper { +.#{$primaryStyleName}-cell-wrapper { padding-top: 3px; padding-bottom: 3px; } -.#{$name}-row-odd { +.#{$primaryStyleName}-row-odd { background: #eff0f1; } -.#{$name}-generated-row { +.#{$primaryStyleName}-generated-row { background: #dcdee0; text-transform: uppercase; font-size: 10px; @@ -114,55 +114,55 @@ text-shadow: #f3f5f8 0 1px 0; line-height: normal; } -.#{$name}-generated-row .#{$name}-cell-wrapper { +.#{$primaryStyleName}-generated-row .#{$primaryStyleName}-cell-wrapper { padding-top: 4px; padding-bottom: 5px; } -.#{$name}-cell-content:last-child { +.#{$primaryStyleName}-cell-content:last-child { border-right-color: transparent; } -.#{$name} .v-selected, -.black .#{$name} .v-selected { +.#{$primaryStyleName} .v-selected, +.black .#{$primaryStyleName} .v-selected { background: #4d749f url(../common/img/sel-bg.png) repeat-x; /* We can't include this in the sprite, since we don't know the row height */ color: #fff; text-shadow: #3b5a7a 0 1px 0; } -.#{$name} .v-selected .#{$name}-cell-content { +.#{$primaryStyleName} .v-selected .#{$primaryStyleName}-cell-content { border-right-color: #466c90; } -.#{$name}-column-selector { +.#{$primaryStyleName}-column-selector { width: 16px; height: 20px; margin-top: -20px; background: transparent no-repeat; background-image: url(img/col-sel-light.png); /** sprite-ref: verticals */ } -.#{$name}-column-selector:active { +.#{$primaryStyleName}-column-selector:active { background-image: url(img/col-sel-light-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-focus-slot-left { +.#{$primaryStyleName}-focus-slot-left { border-left: 1px solid #222; margin-bottom: -20px; width: auto; } -.#{$name}-focus-slot-right { +.#{$primaryStyleName}-focus-slot-right { border-right-color: #222; margin-right: 0; } -.#{$name}-header-drag { +.#{$primaryStyleName}-header-drag { padding-left: 6px; height: 16px; } -.#{$name}-header-drag img { +.#{$primaryStyleName}-header-drag img { height: 16px; margin: -3px 3px 0 0; } -.#{$name}-scrollposition { +.#{$primaryStyleName}-scrollposition { width: auto; background: transparent; border: none; } -.#{$name}-scrollposition span { +.#{$primaryStyleName}-scrollposition span { background: transparent repeat-x; background-image: url(img/scroll-indic-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ border: 1px solid #939494; @@ -183,7 +183,7 @@ -webkit-box-shadow: rgba(0,0,0,.5) 0 1px 2px; -moz-box-shadow: rgba(0,0,0,.5) 0 1px 2px; } -.#{$name}-borderless .#{$name}-scrollposition span { +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-scrollposition span { top: 0; } /* row in column selector */ @@ -206,87 +206,87 @@ /* Strong style */ -.#{$name}-strong .#{$name}-header-wrap, -.#{$name}-strong .#{$name}-header-drag { +.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-wrap, +.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-drag { border-color: #2b3033; border-top-color: #2b3033; background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #e7e9ea; text-shadow: #000 0 -1px 0; } -.#{$name}-strong .#{$name}-body { +.#{$primaryStyleName}-strong .#{$primaryStyleName}-body { border-top-color: #2b3033; } -.#{$name}-strong .#{$name}-resizer { +.#{$primaryStyleName}-strong .#{$primaryStyleName}-resizer { border-right-color: #1c1f21; } -.#{$name}-strong .#{$name}-header-cell-asc .#{$name}-sort-indicator { +.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator { background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */ } -.#{$name}-strong .#{$name}-header-cell-desc .#{$name}-sort-indicator { +.#{$primaryStyleName}-strong .#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */ } -.#{$name}-strong .#{$name}-column-selector { +.#{$primaryStyleName}-strong .#{$primaryStyleName}-column-selector { background-image: url(img/col-sel.png); /** sprite-ref: verticals */ } -.#{$name}-strong .#{$name}-column-selector:active { +.#{$primaryStyleName}-strong .#{$primaryStyleName}-column-selector:active { background-image: url(img/col-sel-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-strong .#{$name}-focus-slot-left, -.#{$name}-strong .#{$name}-focus-slot-right { +.#{$primaryStyleName}-strong .#{$primaryStyleName}-focus-slot-left, +.#{$primaryStyleName}-strong .#{$primaryStyleName}-focus-slot-right { border-color: #9ca1a5; } /* Table on black background (normal style) */ -.black .#{$name}-header-wrap, -.black .#{$name}-header-drag { +.black .#{$primaryStyleName}-header-wrap, +.black .#{$primaryStyleName}-header-drag { border-color: #252729; background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */ color: #e7eaee; text-shadow: #000 0 -1px 0; } -.black .#{$name}-resizer { +.black .#{$primaryStyleName}-resizer { border-right-color: #252729; } -.black .#{$name}-header-cell-asc .#{$name}-sort-indicator { +.black .#{$primaryStyleName}-header-cell-asc .#{$primaryStyleName}-sort-indicator { background-image: url(img/asc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */ } -.black .#{$name}-header-cell-desc .#{$name}-sort-indicator { +.black .#{$primaryStyleName}-header-cell-desc .#{$primaryStyleName}-sort-indicator { background-image: url(img/desc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */ } -.black .#{$name}-column-selector { +.black .#{$primaryStyleName}-column-selector { background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */ } -.black .#{$name}-column-selector:active { +.black .#{$primaryStyleName}-column-selector:active { background-image: url(img/col-sel-black-pressed.png); /** sprite-ref: black-verticals */ } -.black .#{$name}-focus-slot-left, -.black .#{$name}-focus-slot-right { +.black .#{$primaryStyleName}-focus-slot-left, +.black .#{$primaryStyleName}-focus-slot-right { border-color: #9ca1a5; } -.black .#{$name}-body { +.black .#{$primaryStyleName}-body { border-color: #252729; background: transparent; } -.black .#{$name}-cell-content { +.black .#{$primaryStyleName}-cell-content { border-right-color: #252729; border-bottom: 1px solid #252729; } -.black .#{$name}-cell-wrapper { +.black .#{$primaryStyleName}-cell-wrapper { padding-bottom: 2px; } -.black .#{$name}-row-odd { +.black .#{$primaryStyleName}-row-odd { background: transparent; } /* Selection background-color combined with the default (white) style selector, so we don't have to duplicate the sprite image in the final sprite collection */ -.black .#{$name} .v-selected .#{$name}-cell-content { +.black .#{$primaryStyleName} .v-selected .#{$primaryStyleName}-cell-content { border-bottom: 1px solid #4d749f; } /* Borderless style */ -.#{$name}-borderless .#{$name}-header-wrap, -.#{$name}-borderless .#{$name}-body { +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-header-wrap, +.#{$primaryStyleName}-borderless .#{$primaryStyleName}-body { border: none; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss index 40c6713bcd..e2a92730b4 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss @@ -1,22 +1,22 @@ -@mixin reindeer-tabsheet-borderless-style($name : v-tabsheet-borderless) { +@mixin reindeer-tabsheet-borderless-style($primaryStyleName : v-tabsheet-borderless) { -.#{$name} .v-tabsheet-tabitemcell-first { +.#{$primaryStyleName} .v-tabsheet-tabitemcell-first { padding-left: 7px; background: url(img/framed/tab-first-left.png) no-repeat -3px 0; } -.#{$name} .v-tabsheet-tabitemcell-selected-first { +.#{$primaryStyleName} .v-tabsheet-tabitemcell-selected-first { background: url(img/framed/tab-first-left-sel.png) no-repeat -3px 0; } -.#{$name} .v-tabsheet-spacertd div { +.#{$primaryStyleName} .v-tabsheet-spacertd div { margin-right: 0; } -.#{$name} .v-tabsheet-spacertd { +.#{$primaryStyleName} .v-tabsheet-spacertd { background: transparent; } -.#{$name} .v-tabsheet-content { +.#{$primaryStyleName} .v-tabsheet-content { border: none; } -.#{$name} .v-tabsheet-deco { +.#{$primaryStyleName} .v-tabsheet-deco { height: 0; border-top: none; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss index f8e1a16335..706aea151b 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss @@ -1,9 +1,9 @@ -@mixin reindeer-tabsheet-hover-closable-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-hover-closable-style($primaryStyleName : v-tabsheet) { -.#{$name}-tabs-hover-closable .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-hover-closable .#{$primaryStyleName}-caption-close { visibility: hidden; } -.#{$name}-tabs-hover-closable .#{$name}-tabitem:hover .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-hover-closable .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close { visibility: visible; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss index 7d21b3b2a8..7b6ed54c02 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss @@ -1,41 +1,41 @@ -@mixin reindeer-tabsheet-minimal-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-minimal-style($primaryStyleName : v-tabsheet) { /** * Tabsheet "minimal" style -------------- */ /* Minimal tabsheet on blue background */ -.blue .#{$name}-tabs-minimal .#{$name}-spacertd div, -.blue .#{$name}-tabs-minimal .#{$name}-tabitem, -.blue .#{$name}-tabs-minimal .#{$name}-tabitem-selected { +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div, +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem, +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { border-color: #7c8a91; } -.blue .#{$name}-tabs-minimal .#{$name}-caption-close { +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { color: #7c8a91; } -.blue .#{$name}-tabs-minimal .#{$name}-caption-close:hover { +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #BCD3DE; background: #778d98; } -.blue .#{$name}-tabs-minimal .#{$name}-caption-close:active { +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #4f6874; } /* Default & white styles */ -.#{$name}-tabs-minimal .#{$name}-spacertd div, -.white .#{$name}-tabs-minimal .#{$name}-spacertd div { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div { border-bottom: 1px solid #bfbfbf; height: auto; background: transparent; } -.#{$name}-tabs-minimal .#{$name}-tabitemcell, -.#{$name}-tabs-minimal .#{$name}-spacertd { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell, +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd { height: auto; background: transparent; padding-left: 0; } -.#{$name}-tabs-minimal .#{$name}-tabitem, -.white .#{$name}-tabs-minimal .#{$name}-tabitem { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem { border: none; border-bottom: 1px solid #bfbfbf; color: #4d748f; @@ -44,54 +44,54 @@ background: transparent; text-shadow: none; } -.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption { padding: 5px 16px; height: auto; background: transparent; } -.#{$name}-tabs-minimal .#{$name}-tabitemcell-selected { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell-selected { background: transparent; } -.#{$name}-tabs-minimal .#{$name}-tabitem-selected, -.white .#{$name}-tabs-minimal .#{$name}-tabitem-selected { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { background: transparent; border: 1px solid #bfbfbf; border-bottom: none; color: #222; } -.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent; padding: 4px 15px 6px 15px; } -.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption-closable, -.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption-closable { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption-closable, +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption-closable { padding-right: 6px; } -.#{$name}-content-minimal, -.white .#{$name}-content-minimal { +.#{$primaryStyleName}-content-minimal, +.white .#{$primaryStyleName}-content-minimal { border: none; } -.#{$name}-content-minimal .#{$name}-tabsheetpanel { +.#{$primaryStyleName}-content-minimal .#{$primaryStyleName}-tabsheetpanel { background: transparent; } -.#{$name}-deco-minimal, -.white .#{$name}-deco-minimal { +.#{$primaryStyleName}-deco-minimal, +.white .#{$primaryStyleName}-deco-minimal { height: 0; border: none; } -.#{$name}-tabcontainer-minimal .#{$name}-scroller { +.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller { margin-top: -20px; height: 17px; padding: 0; border: none; background: transparent; } -.#{$name}-tabcontainer-minimal .#{$name}-scroller button { +.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller button { margin-top: 0; } -.#{$name}-tabs-minimal .#{$name}-caption-close, -.#{$name}-tabs-minimal .#{$name}-caption-close:hover, -.#{$name}-tabs-minimal .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close, +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover, +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { text-indent: 0; background: transparent; margin-left: 3px; @@ -104,45 +104,45 @@ -webkit-border-radius: 7px; -moz-border-radius: 7px; } -.#{$name}-tabs-minimal .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { margin-top: 1px; } -.v-ff .#{$name}-tabs-minimal .#{$name}-caption-close { +.v-ff .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { margin-top: -15px; } -.#{$name}-tabs-minimal .#{$name}-caption-close:hover, -.white .#{$name}-tabs-minimal .#{$name}-caption-close:hover { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #fff; background: #aaa; } -.#{$name}-tabs-minimal .#{$name}-caption-close:active, -.white .#{$name}-tabs-minimal .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #777; } /* Minimal tabsheet on black background */ -.black .#{$name}-tabs-minimal .#{$name}-spacertd div, -.black .#{$name}-tabs-minimal .#{$name}-tabitem, -.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div, +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem, +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { border-color: #3e4044; color: #6a7f89; } -.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { color: #c9ccce; } -.black .#{$name}-content-minimal, -.black .#{$name}-content-bar { +.black .#{$primaryStyleName}-content-minimal, +.black .#{$primaryStyleName}-content-bar { color: #c9ccce; text-shadow: #000 0 0 1px; } -.black .#{$name}-tabs-minimal .#{$name}-caption-close { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { color: #72787c; } -.black .#{$name}-tabs-minimal .#{$name}-caption-close:hover { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #1d2021; background: #4d5154; } -.black .#{$name}-tabs-minimal .#{$name}-caption-close:active { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #626669; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss index 5147f608ab..c13bb6f025 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss @@ -1,22 +1,22 @@ -@mixin reindeer-tabsheet-normal-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-normal-style($primaryStyleName : v-tabsheet) { /* Default Tabsheet styles */ -.#{$name}-tabitemcell, -.#{$name}-spacertd { +.#{$primaryStyleName}-tabitemcell, +.#{$primaryStyleName}-spacertd { height: 32px; } -.#{$name}-tabitemcell { +.#{$primaryStyleName}-tabitemcell { background: no-repeat; background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */ padding-left: 3px; } -.#{$name}-tabitemcell-first { +.#{$primaryStyleName}-tabitemcell-first { padding-left: 10px; background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem, -.#{$name}-spacertd div { +.#{$primaryStyleName}-tabitem, +.#{$primaryStyleName}-spacertd div { border: none; height: 32px; background: transparent repeat-x; @@ -25,23 +25,23 @@ color: #222; text-shadow: #fff 0 1px 0; } -.#{$name}-tabitem .v-caption { +.#{$primaryStyleName}-tabitem .v-caption { border: none; height: 23px; background: no-repeat right top; background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ padding: 9px 8px 0 6px; } -.#{$name}-tabitem .v-caption-closable { +.#{$primaryStyleName}-tabitem .v-caption-closable { padding-right: 0; padding-left: 17px; } -.#{$name}-tabitem .v-captiontext { +.#{$primaryStyleName}-tabitem .v-captiontext { height: 16px; line-height: 16px; vertical-align:baseline; } -.#{$name}-caption-close { +.#{$primaryStyleName}-caption-close { float: right; width: 19px; height: 18px; @@ -55,70 +55,70 @@ font-size: 14px; font-weight: normal; } -.#{$name}-caption-close:hover { +.#{$primaryStyleName}-caption-close:hover { background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */ } -.#{$name}-caption-close:active { +.#{$primaryStyleName}-caption-close:active { background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem-selected .#{$name}-caption-close { +.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close { background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem-selected .#{$name}-caption-close:hover { +.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:hover { background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem-selected .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:active { background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-tabitemcell-selected { +.#{$primaryStyleName}-tabitemcell-selected { background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabitemcell-selected-first { +.#{$primaryStyleName}-tabitemcell-selected-first { background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem-selected { +.#{$primaryStyleName}-tabitem-selected { background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #232930; } -.#{$name}-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabitem-selected .v-caption { background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.#{$name}-spacertd div { +.#{$primaryStyleName}-spacertd div { margin-right: 4px; } -.#{$name}-spacertd { +.#{$primaryStyleName}-spacertd { background: transparent no-repeat right top; background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.blue .#{$name}-content { +.blue .#{$primaryStyleName}-content { border-color: #a8bcc5; } -.#{$name}-content, -.white .#{$name}-content { +.#{$primaryStyleName}-content, +.white .#{$primaryStyleName}-content { border: 1px solid #dcdcdc; border-bottom: none; border-top: none; color: #222; text-shadow: none; } -.#{$name}-tabsheetpanel { +.#{$primaryStyleName}-tabsheetpanel { background: #fff; } -.v-sa .#{$name}-content { +.v-sa .#{$primaryStyleName}-content { border-color: rgba(0,0,0,.1); } -.blue .#{$name}-deco { +.blue .#{$primaryStyleName}-deco { border-color: #92a3ac; background: #adc2cd; } -.#{$name}-deco, -.white .#{$name}-deco { +.#{$primaryStyleName}-deco, +.white .#{$primaryStyleName}-deco { height: 1px; border-top: 1px solid #bebebe; background: #e2e2e2; overflow: hidden; } -.v-sa .#{$name}-deco { +.v-sa .#{$primaryStyleName}-deco { border-top-color: rgba(0,0,0,.1); background: rgba(0,0,0,.08); } @@ -126,31 +126,31 @@ /* Icons & error indicators */ -.#{$name}-tabs .v-icon, -.#{$name}-tabs .v-captiontext, -.#{$name}-tabs .v-errorindicator { +.#{$primaryStyleName}-tabs .v-icon, +.#{$primaryStyleName}-tabs .v-captiontext, +.#{$primaryStyleName}-tabs .v-errorindicator { display: inline; float: none; } -.v-sa .#{$name}-tabs .v-captiontext { +.v-sa .#{$primaryStyleName}-tabs .v-captiontext { display: inline-block; } -.#{$name}-tabs .v-icon { +.#{$primaryStyleName}-tabs .v-icon { width: 16px !important; height: 16px !important; } -.#{$name}-tabs .v-errorindicator { +.#{$primaryStyleName}-tabs .v-errorindicator { display: inline-block; width: 13px; height: 16px; background: transparent url(../common/icons/error.png) no-repeat 50%; } -.v-ie .#{$name}-tabs .v-errorindicator { +.v-ie .#{$primaryStyleName}-tabs .v-errorindicator { zoom: 1; display: inline; } -.v-ie8 .#{$name}-tabs .v-errorindicator, -.v-ie9 .#{$name}-tabs .v-errorindicator { +.v-ie8 .#{$primaryStyleName}-tabs .v-errorindicator, +.v-ie9 .#{$primaryStyleName}-tabs .v-errorindicator { display: inline-block; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss index b3f98098ef..070bb2d724 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss @@ -1,8 +1,8 @@ -@mixin reindeer-tabsheet-scroller($name : v-tabsheet) { +@mixin reindeer-tabsheet-scroller($primaryStyleName : v-tabsheet) { /* Tabsheet scroller styles */ -.#{$name}-scroller { +.#{$primaryStyleName}-scroller { height: 31px; margin-top: -31px; padding: 0 3px 0 4px; @@ -13,13 +13,13 @@ background: transparent url(img/framed/tab-bg.png) repeat-x left -1px; width: 36px; } -.#{$name}-scroller button { +.#{$primaryStyleName}-scroller button { margin-top: 7px; } -.#{$name}-scrollerPrev, -.#{$name}-scrollerNext, -.#{$name}-scrollerPrev-disabled, -.#{$name}-scrollerNext-disabled { +.#{$primaryStyleName}-scrollerPrev, +.#{$primaryStyleName}-scrollerNext, +.#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-scrollerNext-disabled { border: none; background: transparent; background-image: url(img/tab-prev.png); /** sprite-ref: verticals */ @@ -27,26 +27,26 @@ height: 17px; overflow: hidden; } -.#{$name}-scroller button::-moz-focus-inner { +.#{$primaryStyleName}-scroller button::-moz-focus-inner { border: none; } -.#{$name}-scrollerNext { +.#{$primaryStyleName}-scrollerNext { background-image: url(img/tab-next.png); /** sprite-ref: verticals */ } -.#{$name}-scrollerPrev:active { +.#{$primaryStyleName}-scrollerPrev:active { background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-scrollerNext:active { +.#{$primaryStyleName}-scrollerNext:active { background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-scrollerPrev-disabled, -.#{$name}-scrollerPrev-disabled:active { +.#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-scrollerPrev-disabled:active { background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */ opacity: 1; filter: none; } -.#{$name}-scrollerNext-disabled, -.#{$name}-scrollerNext-disabled:active { +.#{$primaryStyleName}-scrollerNext-disabled, +.#{$primaryStyleName}-scrollerNext-disabled:active { background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */ opacity: 1; filter: none; diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss index 75ac111ec7..ed1ddcd693 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss @@ -1,11 +1,11 @@ -@mixin reindeer-tabsheet-selected-closable-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-selected-closable-style($primaryStyleName : v-tabsheet) { -.#{$name}-tabs-selected-closable .#{$name}-tabitem .#{$name}-caption-close, -.#{$name}-tabs-selected-closable .#{$name}-tabitem:hover .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem .#{$primaryStyleName}-caption-close, +.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close { visibility: hidden; } -.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected .#{$name}-caption-close, -.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected:hover .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close, +.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem-selected:hover .#{$primaryStyleName}-caption-close { visibility: visible; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss index 61358b3723..de0c29d516 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss @@ -1,42 +1,42 @@ -@mixin reindeer-tabsheet-small-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-small-style($primaryStyleName : v-tabsheet) { /** * Tabsheet bar style --------------- */ -.#{$name}-tabs-bar .#{$name}-tabitemcell, -.#{$name}-tabs-bar .#{$name}-spacertd { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd { height: 20px; } -.#{$name}-tabs-bar .#{$name}-spacertd { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd { background: transparent; } -.#{$name}-tabs-bar .#{$name}-tabitemcell { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell { background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */ } -.#{$name}-tabs-bar .#{$name}-tabitemcell-first { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-first { padding-left: 6px; background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */ } -.#{$name}-tabs-bar .#{$name}-tabitem, -.#{$name}-tabs-bar .#{$name}-spacertd div { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd div { height: 20px; background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ font-size: 11px; margin: 0; } -.#{$name}-tabs-bar .#{$name}-tabitem .v-caption { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem .v-caption { height: 18px; background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ padding: 2px 12px 0 10px; } -.#{$name}-tabs-bar .#{$name}-tabitem .v-caption-closable, -.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption-closable { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem .v-caption-closable, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .v-caption-closable { padding-right: 8px; padding-left: 14px; } -.#{$name}-tabs-bar .#{$name}-caption-close, -.#{$name}-tabs-bar .#{$name}-caption-close:hover, -.#{$name}-tabs-bar .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:active { text-indent: 0; background: transparent; margin-left: 3px; @@ -49,62 +49,62 @@ -webkit-border-radius: 7px; -moz-border-radius: 7px; } -.#{$name}-tabs-bar .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close { margin-top: 1px; } -.v-ff .#{$name}-tabs-bar .#{$name}-caption-close { +.v-ff .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close { margin-top: -14px; } -.#{$name}-tabs-bar .#{$name}-caption-close:hover { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover { background: #bfbfbf; -webkit-box-shadow: 0 1px 0 #fff; } -.#{$name}-tabs-bar .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:active { background: #a9a9a9; } -.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close { color: #404142; } -.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:hover { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:hover { background: #5e666e; color: #fff; text-shadow: 0 -1px 0 #222; } -.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:active { background: #404142; } -.#{$name}-tabs-bar .#{$name}-tabitemcell-selected { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-selected { background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabs-bar .#{$name}-tabitemcell-selected-first { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-selected-first { background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabs-bar .#{$name}-tabitem-selected { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected { background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #232930; } -.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .v-caption { background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.#{$name}-tabcontainer-bar .#{$name}-scroller { +.#{$primaryStyleName}-tabcontainer-bar .#{$primaryStyleName}-scroller { margin-top: -20px; height: 19px; border-right: none; background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-tabcontainer-bar .#{$name}-scroller button { +.#{$primaryStyleName}-tabcontainer-bar .#{$primaryStyleName}-scroller button { margin-top: 1px; } -.#{$name}-content-bar, -.white .#{$name}-content-bar { +.#{$primaryStyleName}-content-bar, +.white .#{$primaryStyleName}-content-bar { border: none; } -.#{$name}-content-bar .#{$name}-tabsheetpanel { +.#{$primaryStyleName}-content-bar .#{$primaryStyleName}-tabsheetpanel { background: transparent; } -.#{$name}-deco-bar, -.white .#{$name}-deco-bar { +.#{$primaryStyleName}-deco-bar, +.white .#{$primaryStyleName}-deco-bar { height: 0; border: none; } diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss index 6c3d4000fa..4bca7dbeb6 100644 --- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss @@ -1,16 +1,16 @@ -@mixin reindeer-textfield($name : v-textfield) { +@mixin reindeer-textfield($primaryStyleName : v-textfield) { /* Textfield on blue background */ -.blue .#{$name}, +.blue .#{$primaryStyleName}, .blue .v-textarea { border-color: #92a2aa; border-top-color: #7c8a90; border-bottom-color: #a1b3bc; } /* Default & white background */ -.#{$name}, +.#{$primaryStyleName}, .v-textarea, -.white .#{$name}, +.white .#{$primaryStyleName}, .white .v-textarea { border: 1px solid #bcbdbe; border-top-color: #a2a3a4; @@ -31,19 +31,19 @@ height: auto; } /* Need more specific selector because of #2384 fixes in base/common/common.css */ -&.v-app input.#{$name}, -.v-window input.#{$name}, +&.v-app input.#{$primaryStyleName}, +.v-window input.#{$primaryStyleName}, &.v-app textarea.v-textarea, .v-window textarea.v-textarea { padding: 3px 3px 4px; } -&.v-app input.#{$name}.v-widget, -.v-window input.#{$name}.v-widget { +&.v-app input.#{$primaryStyleName}.v-widget, +.v-window input.#{$primaryStyleName}.v-widget { height: 24px; } -&.v-app .#{$name}-focus, -.v-window .#{$name}-focus, -.v-popupview-popup .#{$name}-focus, +&.v-app .#{$primaryStyleName}-focus, +.v-window .#{$primaryStyleName}-focus, +.v-popupview-popup .#{$primaryStyleName}-focus, &.v-app .v-textarea-focus, .v-window .v-textarea-focus, .v-popupview-popup .v-textarea-focus { @@ -53,13 +53,13 @@ outline: none; background-color: #fff; } -input.#{$name}-prompt, +input.#{$primaryStyleName}-prompt, textarea.v-textarea-prompt { font-style: normal; color: #999; } /* Small style textfield */ -&.v-app input.#{$name}-small { +&.v-app input.#{$primaryStyleName}-small { font-size: 11px; line-height: normal; height: auto; @@ -68,18 +68,18 @@ textarea.v-textarea-prompt { &.v-app textarea.v-textarea-small { font-size: 11px; } -&.v-app .v-table input.#{$name}.v-widget, -.v-window .v-table input.#{$name}.v-widget { +&.v-app .v-table input.#{$primaryStyleName}.v-widget, +.v-window .v-table input.#{$primaryStyleName}.v-widget { padding: 1px 2px; height: auto; line-height: normal; } -.v-table-cell-wrapper > input.#{$name} { +.v-table-cell-wrapper > input.#{$primaryStyleName} { margin-top: -2px; margin-bottom: -2px; } /* Textfield on black background */ -.black .#{$name}, +.black .#{$primaryStyleName}, .black .v-textarea { border-color: #38393a; border-top-color: #2c2d2e; @@ -92,10 +92,10 @@ textarea.v-textarea-prompt { .black .v-textarea { background-image: none; } -&.v-app .black .#{$name}-focus, -.v-window-black .#{$name}-focus, -.v-window .black .#{$name}-focus, -.v-popupview-popup .black .#{$name}-focus, +&.v-app .black .#{$primaryStyleName}-focus, +.v-window-black .#{$primaryStyleName}-focus, +.v-window .black .#{$primaryStyleName}-focus, +.v-popupview-popup .black .#{$primaryStyleName}-focus, &.v-app .black .v-textarea-focus, .v-window-black .v-textarea-focus, .v-window .black .v-textarea-focus, @@ -105,12 +105,12 @@ textarea.v-textarea-prompt { border-bottom-color: #507596; background-color: #151717; } -.black input.#{$name}-prompt { +.black input.#{$primaryStyleName}-prompt { color: #5f6366; } /* Readonly */ -input.#{$name}-readonly, -.black input.#{$name}-readonly, +input.#{$primaryStyleName}-readonly, +.black input.#{$primaryStyleName}-readonly, textarea.v-textarea-readonly, .black textarea.v-textarea-readonly { border: none; diff --git a/WebContent/VAADIN/themes/reindeer/tree/tree.scss b/WebContent/VAADIN/themes/reindeer/tree/tree.scss index da3b46dc65..15e7092dd6 100644 --- a/WebContent/VAADIN/themes/reindeer/tree/tree.scss +++ b/WebContent/VAADIN/themes/reindeer/tree/tree.scss @@ -1,20 +1,20 @@ -@mixin reindeer-tree($name : v-tree) { +@mixin reindeer-tree($primaryStyleName : v-tree) { -.#{$name}-node { +.#{$primaryStyleName}-node { background: transparent url(img/arrows.png) no-repeat 6px -10px; } -.#{$name}-node-expanded { +.#{$primaryStyleName}-node-expanded { background-position: -7px 5px; } -.#{$name}-node-caption { +.#{$primaryStyleName}-node-caption { margin-left: 16px; padding-bottom: 1px; } -.#{$name}-node span { +.#{$primaryStyleName}-node span { padding: 1px 2px; display: inline-block; } -.#{$name}-node-selected span { +.#{$primaryStyleName}-node-selected span { background: #4d749f repeat-x; background-image: url(../common/img/sel-bg.png); /* sprite-ref: verticals; sprite-alignment: repeat */ color: #fff; @@ -24,31 +24,31 @@ text-shadow: #2b425a 0 1px 0; display: inline-block; } -.#{$name}-node-children { +.#{$primaryStyleName}-node-children { padding-left: 16px; } -.#{$name}-node-caption.#{$name}-node-focused span{ +.#{$primaryStyleName}-node-caption.#{$primaryStyleName}-node-focused span{ padding-left: 1px; padding-top: 0px; padding-bottom: 0px; } -.#{$name}-node-focused span{ +.#{$primaryStyleName}-node-focused span{ border: 1px dotted black; } /*************************************** * Drag'n'drop styles ***************************************/ -.#{$name} .#{$name}-node-drag-top { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top { background-position: 6px -11px; } -.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded { +.#{$primaryStyleName} .#{$primaryStyleName}-node-drag-top.#{$primaryStyleName}-node-expanded { background-position: -7px 4px; } -.#{$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/reindeer/window/window.scss b/WebContent/VAADIN/themes/reindeer/window/window.scss index c3ad0fc9be..7ba6b01675 100644 --- a/WebContent/VAADIN/themes/reindeer/window/window.scss +++ b/WebContent/VAADIN/themes/reindeer/window/window.scss @@ -1,25 +1,25 @@ -@mixin reindeer-window($name : v-window) { +@mixin reindeer-window($primaryStyleName : v-window) { -.#{$name} { +.#{$primaryStyleName} { background: transparent; } -.#{$name}-wrap { +.#{$primaryStyleName}-wrap { border: 1px solid #808386; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-sa .#{$name}-wrap, -.v-op .#{$name}-wrap { +.v-sa .#{$primaryStyleName}-wrap, +.v-op .#{$primaryStyleName}-wrap { border-color: rgba(0,0,0,.2); } -.#{$name}-outerheader { +.#{$primaryStyleName}-outerheader { padding: 12px 32px 0 14px; height: 37px; background: black repeat-x; background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-header { +.#{$primaryStyleName}-header { font-weight: bold; font-size: 12px; line-height: normal; @@ -30,24 +30,24 @@ text-overflow: ellipsis; -ms-text-overflow: ellipsis; } -.#{$name}-error .#{$name}-header { +.#{$primaryStyleName}-error .#{$primaryStyleName}-header { padding-left: 13px; background: transparent url(../common/icons/error.png) no-repeat 0 50%; } -.#{$name}-resizebox { +.#{$primaryStyleName}-resizebox { width: 15px; height: 15px; cursor: se-resize; background: transparent; background-image: url(img/resize.png); /** sprite-ref: verticals */ } -.#{$name}-footer { +.#{$primaryStyleName}-footer { background-color:white; background-repeat: repeat-x; background-image: url(img/footer-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ height: 15px; } -.#{$name}-closebox { +.#{$primaryStyleName}-closebox { top: 12px; right: 10px; width: 15px; @@ -55,16 +55,16 @@ background: transparent; background-image: url(img/close.png); /** sprite-ref: verticals */ } -.#{$name}-closebox:hover { +.#{$primaryStyleName}-closebox:hover { background-image: url(img/close-hover.png); /** sprite-ref: verticals */ } -.#{$name}-closebox:active { +.#{$primaryStyleName}-closebox:active { background-image: url(img/close-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-contents { +.#{$primaryStyleName}-contents { background: #fff; } -.#{$name}-modalitycurtain { +.#{$primaryStyleName}-modalitycurtain { background: #56595b; } @@ -77,43 +77,43 @@ Light style window ----------------------------- **/ -.#{$name}-light .#{$name}-outerheader { +.#{$primaryStyleName}-light .#{$primaryStyleName}-outerheader { background: transparent; padding: 15px 32px 0 18px; height: 23px; } -.#{$name}-light .#{$name}-header { +.#{$primaryStyleName}-light .#{$primaryStyleName}-header { font-size: 16px; color: #292e34; text-shadow: none; } -.#{$name}-light .#{$name}-resizebox { +.#{$primaryStyleName}-light .#{$primaryStyleName}-resizebox { width: 12px; height: 12px; background-image: url(img/resize-light.png); /** sprite-ref: verticals */ } -.#{$name}-light .#{$name}-footer { +.#{$primaryStyleName}-light .#{$primaryStyleName}-footer { background: transparent; height: 12px; } -.#{$name}-light .#{$name}-closebox { +.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox { right: 1px; top: 17px; width: 19px; height: 15px; background-image: url(img/close-light.png); /** sprite-ref: verticals */ } -.#{$name}-light .#{$name}-closebox:hover { +.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox:hover { background-image: url(img/close-light-hover.png); /** sprite-ref: verticals */ } -.#{$name}-light .#{$name}-closebox:active { +.#{$primaryStyleName}-light .#{$primaryStyleName}-closebox:active { background-image: url(img/close-light-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-light .#{$name}-contents { +.#{$primaryStyleName}-light .#{$primaryStyleName}-contents { background: transparent; } /* This must be the last sprite added to the verticals-sprite image */ -.#{$name}-light .#{$name}-wrap2 { +.#{$primaryStyleName}-light .#{$primaryStyleName}-wrap2 { background: #f7f7f8 repeat-x; background-image: url(img/content-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } @@ -123,27 +123,27 @@ Black style window ----------------------------- **/ -.#{$name}-black .#{$name}-wrap { +.#{$primaryStyleName}-black .#{$primaryStyleName}-wrap { border-color: #2e3030; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; overflow: hidden; } -.v-sa .#{$name}-black .#{$name}-wrap, -.v-op .#{$name}-black .#{$name}-wrap { +.v-sa .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap, +.v-op .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap { border-color: rgba(0,0,0,.8); } -.#{$name}-black .#{$name}-wrap2 { +.#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 { background-color: #1d2021; -moz-border-radius: 7px; -webkit-border-radius: 7px; } -.v-sa .#{$name}-black .#{$name}-wrap2, -.v-op .#{$name}-black .#{$name}-wrap2 { +.v-sa .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2, +.v-op .#{$primaryStyleName}-black .#{$primaryStyleName}-wrap2 { background-color: rgba(29,32,33,.9); } -.#{$name}-black .#{$name}-outerheader { +.#{$primaryStyleName}-black .#{$primaryStyleName}-outerheader { height: auto; padding: 7px 14px; height: 15px; @@ -157,27 +157,27 @@ overflow: hidden; border: none; } -.#{$name}-black .#{$name}-header { +.#{$primaryStyleName}-black .#{$primaryStyleName}-header { font-size: 12px; font-weight: normal; color: #dddfe1; } -.#{$name}-black .#{$name}-closebox { +.#{$primaryStyleName}-black .#{$primaryStyleName}-closebox { top: 8px; } -.#{$name}-black .#{$name}-footer { +.#{$primaryStyleName}-black .#{$primaryStyleName}-footer { background: transparent; border: none; height: 14px; } -.#{$name}-black .#{$name}-resizebox { +.#{$primaryStyleName}-black .#{$primaryStyleName}-resizebox { background: transparent no-repeat; background-image: url(img/black/resize.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 4px */ width: 14px; height: 14px; } /* Must be last to make this image last in the sprites */ -.#{$name}-black .#{$name}-contents { +.#{$primaryStyleName}-black .#{$primaryStyleName}-contents { border: none; background: transparent repeat-x; background-image: url(img/black/content-bg.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */ diff --git a/WebContent/VAADIN/themes/runo/datefield/datefield.scss b/WebContent/VAADIN/themes/runo/datefield/datefield.scss index 82dad4a0ac..f007810750 100644 --- a/WebContent/VAADIN/themes/runo/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/runo/datefield/datefield.scss @@ -1,10 +1,10 @@ -@mixin runo-datefield($name : v-datefield) { +@mixin runo-datefield($primaryStyleName : v-datefield) { -.#{$name} input.v-textfield, -.#{$name} input.v-textfield[type=text] { +.#{$primaryStyleName} input.v-textfield, +.#{$primaryStyleName} input.v-textfield[type=text] { height: 18px; } -.#{$name}-button { +.#{$primaryStyleName}-button { font-size:13px; width: 22px; height: 24px; @@ -14,7 +14,7 @@ background: transparent url(img/open-button.png) no-repeat right 0; vertical-align: top; } -.#{$name}-popup { +.#{$primaryStyleName}-popup { font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; color: #464f52; font-size: 12px; @@ -25,39 +25,39 @@ -moz-border-radius: 4px; border-radius: 4px; } -.#{$name}-calendarpanel { +.#{$primaryStyleName}-calendarpanel { width: 230px; } -.#{$name}-popup .#{$name}-calendarpanel { +.#{$primaryStyleName}-popup .#{$primaryStyleName}-calendarpanel { width: 200px; } -.#{$name}-year .#{$name}-calendarpanel { +.#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel { width: 100px; } -.#{$name}-calendarpanel td { +.#{$primaryStyleName}-calendarpanel td { text-align: right; } -.#{$name}-calendarpanel td span { +.#{$primaryStyleName}-calendarpanel td span { display: block; } -.#{$name}-calendarpanel-header { +.#{$primaryStyleName}-calendarpanel-header { height: 30px; font-size: 13px; } -td.#{$name}-calendarpanel-month { +td.#{$primaryStyleName}-calendarpanel-month { font-weight: bold; text-shadow: 0 1px 0 #fff; width: 150px; } -.#{$name}-calendarpanel-prevyear, -.#{$name}-calendarpanel-nextyear, -.#{$name}-calendarpanel-prevmonth, -.#{$name}-calendarpanel-nextmonth { +.#{$primaryStyleName}-calendarpanel-prevyear, +.#{$primaryStyleName}-calendarpanel-nextyear, +.#{$primaryStyleName}-calendarpanel-prevmonth, +.#{$primaryStyleName}-calendarpanel-nextmonth { width: 16px; } /* Year buttons */ -.#{$name}-calendarpanel .v-button-prevyear, -.#{$name}-calendarpanel .v-button-nextyear { +.#{$primaryStyleName}-calendarpanel .v-button-prevyear, +.#{$primaryStyleName}-calendarpanel .v-button-nextyear { display: block; width: 16px; height: 16px; @@ -67,16 +67,16 @@ td.#{$name}-calendarpanel-month { text-indent: -90000px; margin: 0 auto; } -.#{$name}-calendarpanel .v-button-nextyear { +.#{$primaryStyleName}-calendarpanel .v-button-nextyear { background: transparent url(img/nextyear.png) no-repeat; } -.#{$name}-calendarpanel .v-button-prevyear:hover, -.#{$name}-calendarpanel .v-button-nextyear:hover { +.#{$primaryStyleName}-calendarpanel .v-button-prevyear:hover, +.#{$primaryStyleName}-calendarpanel .v-button-nextyear:hover { background-position: left bottom; } /* Month buttons */ -.#{$name}-calendarpanel .v-button-prevmonth, -.#{$name}-calendarpanel .v-button-nextmonth { +.#{$primaryStyleName}-calendarpanel .v-button-prevmonth, +.#{$primaryStyleName}-calendarpanel .v-button-nextmonth { display: block; width: 11px; height: 16px; @@ -86,42 +86,42 @@ td.#{$name}-calendarpanel-month { text-indent: -90000px; margin: 0 auto; } -.#{$name}-calendarpanel .v-button-nextmonth { +.#{$primaryStyleName}-calendarpanel .v-button-nextmonth { background: transparent url(img/nextmonth.png) no-repeat; } -.#{$name}-calendarpanel .v-button-prevmonth:hover, -.#{$name}-calendarpanel .v-button-nextmonth:hover { +.#{$primaryStyleName}-calendarpanel .v-button-prevmonth:hover, +.#{$primaryStyleName}-calendarpanel .v-button-nextmonth:hover { background-position: left bottom; } -.#{$name}-calendarpanel strong { +.#{$primaryStyleName}-calendarpanel strong { color: #ee5311; display: block; width: 20px; font-size: 12px; } -.#{$name}-calendarpanel-day, -.#{$name}-calendarpanel-weeknumber, -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day, +.#{$primaryStyleName}-calendarpanel-weeknumber, +.#{$primaryStyleName}-calendarpanel-day-today { padding: 1px 3px; width: 14px; height: 16px; } -.#{$name}-calendarpanel-day-today { +.#{$primaryStyleName}-calendarpanel-day-today { border: 1px solid #429ce9; width: 12px; height: 14px; } -.#{$name}-calendarpanel-day-entry { +.#{$primaryStyleName}-calendarpanel-day-entry { color: #6a98b5; } -.#{$name}-calendarpanel-day-disabled { +.#{$primaryStyleName}-calendarpanel-day-disabled { font-weight: normal; color: #dddddd; } -.#{$name}-calendarpanel-day-entry.#{$name}-calendarpanel-day-disabled { +.#{$primaryStyleName}-calendarpanel-day-entry.#{$primaryStyleName}-calendarpanel-day-disabled { color: #afd6f8; } -.#{$name}-calendarpanel-day-selected { +.#{$primaryStyleName}-calendarpanel-day-selected { font-weight: bold; width: 14px; height: 16px; @@ -130,18 +130,18 @@ td.#{$name}-calendarpanel-month { background: transparent url(img/selected-bg.png) no-repeat 50% 50%; border: none; } -.#{$name}-time { +.#{$primaryStyleName}-time { font-size: 11px; } -.#{$name}-time .v-select { +.#{$primaryStyleName}-time .v-select { font-size: 10px; padding: 0; margin: 0; } -.#{$name}-rendererror .v-textfield { +.#{$primaryStyleName}-rendererror .v-textfield { background: #ff9999; } -.#{$name}-prompt .#{$name}-textfield { +.#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield { color: #999; font-style: normal; } diff --git a/WebContent/VAADIN/themes/runo/inlinedatefield/inlinedatefield.scss b/WebContent/VAADIN/themes/runo/inlinedatefield/inlinedatefield.scss index ada30fa40e..ff0d5f5bb1 100644 --- a/WebContent/VAADIN/themes/runo/inlinedatefield/inlinedatefield.scss +++ b/WebContent/VAADIN/themes/runo/inlinedatefield/inlinedatefield.scss @@ -1,8 +1,8 @@ -@mixin runo-inline-datefield($name : v-inline-datefield){ +@mixin runo-inline-datefield($primaryStyleName : v-inline-datefield){ @include runo-datefield(v-inline-datefield); - .#{$name} { + .#{$primaryStyleName} { line-height: 18px; /* Override inherited line-height: 0 needed for popup datefield */ } }
\ No newline at end of file |