diff options
Diffstat (limited to 'WebContent')
76 files changed, 1512 insertions, 1457 deletions
diff --git a/WebContent/META-INF/MANIFEST.MF b/WebContent/META-INF/MANIFEST.MF index 58630c02ef..59499bce4a 100644 --- a/WebContent/META-INF/MANIFEST.MF +++ b/WebContent/META-INF/MANIFEST.MF @@ -1,2 +1,2 @@ -Manifest-Version: 1.0
-
+Manifest-Version: 1.0 + diff --git a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss index ddb030c00f..c8bb57365f 100644 --- a/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss +++ b/WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.scss @@ -1,18 +1,18 @@ -@mixin base-absolutelayout { +@mixin base-absolutelayout($name : v-absolutelayout) { -.v-absolutelayout-wrapper { +.#{$name}-wrapper { position: absolute; overflow: hidden; } -.v-absolutelayout-margin, .v-absolutelayout-canvas { +.#{$name}-margin, .#{$name}-canvas { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-absolutelayout.v-has-height > div, .v-absolutelayout.v-has-height > div > div { +.#{$name}.v-has-height > div, .#{$name}.v-has-height > div > div { height: 100%; } -.v-absolutelayout.v-has-width > div, .v-absolutelayout.v-has-width > div > div { +.#{$name}.v-has-width > div, .#{$name}.v-has-width > div > div { width: 100%; } diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index dae1d0eef3..8a126476bc 100644 --- a/WebContent/VAADIN/themes/base/base.scss +++ b/WebContent/VAADIN/themes/base/base.scss @@ -1,6 +1,8 @@ @import "absolutelayout/absolutelayout.scss"; @import "accordion/accordion.scss"; @import "button/button.scss"; +@import "button/nativebutton.scss"; +@import "button/checkbox.scss"; @import "layout/layout.scss"; @import "caption/caption.scss"; @import "common/common.scss"; @@ -33,3 +35,55 @@ @import "upload/upload.scss"; @import "widget/widget.scss"; @import "window/window.scss"; + + +@mixin base { + // @include base-app; + + // everything included from base theme + // other themes should enclose corresponding definitions in theme selectors + + @include base-widget; + + @include base-absolutelayout; + @include base-accordion; + @include base-button; + @include base-nativebutton; + @include base-checkbox; + @include base-caption; + + // here for now to preserve old semantics + @include base-common; + + @include base-layout; + @include base-csslayout; + @include base-customcomponent; + @include base-customlayout; + @include base-datefield; + @include base-dragwrapper; + @include base-embedded; + @include base-formlayout; + @include base-gridlayout; + @include base-label; + @include base-link; + @include base-loginform; + @include base-menubar; + @include base-notification; + @include base-orderedlayout; + @include base-panel; + @include base-popupview; + @include base-progressindicator; + @include base-select; + @include base-shadow; + @include base-slider; + @include base-splitpanel; + @include base-table; + @include base-tabsheet; + @include base-textfield; + @include base-richtextarea; + @include base-tree; + @include base-treetable; + @include base-upload; + @include base-window; +} + diff --git a/WebContent/VAADIN/themes/base/button/button.scss b/WebContent/VAADIN/themes/base/button/button.scss index ad4dce4978..37a5973437 100644 --- a/WebContent/VAADIN/themes/base/button/button.scss +++ b/WebContent/VAADIN/themes/base/button/button.scss @@ -1,9 +1,9 @@ -@mixin base-button { +@mixin base-button($name : v-button) { /* * Default button (more customizable) * -------------------------------------- */ -.v-button { +.#{$name} { display: inline-block; zoom: 1; text-align: center !important; @@ -26,12 +26,12 @@ box-sizing: border-box; } -.v-button.v-disabled { +.#{$name}.v-disabled { cursor: default; } -.v-button-wrap, -.v-button-caption { +.#{$name}-wrap, +.#{$name}-caption { vertical-align: baseline; white-space: nowrap; font: inherit; @@ -39,15 +39,13 @@ line-height: normal; } -.v-button .v-icon, -.v-nativebutton .v-icon { +.#{$name} .v-icon { vertical-align: middle; margin-right: 3px; border: none; } -.v-button .v-errorindicator, -.v-nativebutton .v-errorindicator { +.#{$name} .v-errorindicator { display: inline-block; zoom: 1; vertical-align: middle; @@ -55,8 +53,7 @@ } /* Link style (we really should deprecate this) */ -.v-button-link, -.v-nativebutton-link { +.#{$name}-link { border: none; text-align: left !important; background: transparent; @@ -69,94 +66,14 @@ } /* Inset Safari focus outline a bit */ -.v-sa .v-button-link:focus{ +.v-sa .#{$name}-link:focus{ outline-offset: -3px; } -.v-button-link .v-button-caption, -.v-nativebutton-link .v-nativebutton-caption { +.#{$name}-link .#{$name}-caption { text-decoration: underline; color: inherit; text-align: left; } - -/* - * NativeButton styles (html button element) - * -------------------------------------- */ -.v-nativebutton { - text-align: center !important; - cursor: pointer; - white-space: nowrap; - margin: 0; - color: inherit; - font: inherit; - line-height: normal; - } -.v-nativebutton .v-nativebutton-caption { - vertical-align: middle; - white-space: nowrap; - font: inherit; - color: inherit; - } - -.v-nativebutton .v-icon { - vertical-align: middle; - margin-right: 3px; - } - -.v-nativebutton .v-errorindicator { - display: inline-block; - zoom: 1; - float: none; -} -/* Fixes stretched buttons in IE7*/ -.v-ie .v-nativebutton { - overflow: visible; - padding-left: 1em; - padding-right: 1em; -} - -.v-ie .v-nativebutton-link { - padding: 0; -} - -/* - * Checkbox styles - * -------------------------------------- */ - - .v-checkbox { - display: block; - } - -.v-checkbox, -.v-checkbox label, -.v-checkbox input, -.v-checkbox .v-icon { - vertical-align: middle; - white-space: nowrap; -} - -.v-checkbox .v-icon { - margin: 0 2px; -} -.v-checkbox .v-errorindicator { - float: none; - display: inline; - display: inline-block; - zoom: 1; -} - - -/* Disabled by default -.v-checkbox-error { - background: #ffe0e0; -} -*/ -/* Disabled by default -.v-checkbox-required { - background: #ffe0e0; -} -*/ - -} +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/button/checkbox.scss b/WebContent/VAADIN/themes/base/button/checkbox.scss new file mode 100644 index 0000000000..9222e76975 --- /dev/null +++ b/WebContent/VAADIN/themes/base/button/checkbox.scss @@ -0,0 +1,37 @@ +@mixin base-checkbox($name : v-checkbox) { + + .#{$name} { + display: block; + } + +.#{$name}, +.#{$name} label, +.#{$name} input, +.#{$name} .v-icon { + vertical-align: middle; + white-space: nowrap; +} + +.#{$name} .v-icon { + margin: 0 2px; +} +.#{$name} .v-errorindicator { + float: none; + display: inline; + display: inline-block; + zoom: 1; +} + + +/* Disabled by default +.#{$name}-error { + background: #ffe0e0; +} +*/ +/* Disabled by default +.#{$name}-required { + background: #ffe0e0; +} +*/ + +} diff --git a/WebContent/VAADIN/themes/base/button/nativebutton.scss b/WebContent/VAADIN/themes/base/button/nativebutton.scss new file mode 100644 index 0000000000..cccc51ff7b --- /dev/null +++ b/WebContent/VAADIN/themes/base/button/nativebutton.scss @@ -0,0 +1,73 @@ +@mixin base-nativebutton($name : v-nativebutton) { + + +.#{$name} .v-icon { + vertical-align: middle; + margin-right: 3px; + border: none; + } + +.#{$name} .v-errorindicator { + display: inline-block; + zoom: 1; + vertical-align: middle; + float: none; +} + +/* Link style (we really should deprecate this) */ +.#{$name}-link { + border: none; + text-align: left !important; + background: transparent; + padding: 0; + color: inherit; + -khtml-user-select: text; + -moz-user-select: text; + -ie-user-select: text; + user-select: text; +} + +.#{$name}-link .#{$name}-caption { + text-decoration: underline; + color: inherit; + text-align: left; + } + +.#{$name} { + text-align: center !important; + cursor: pointer; + white-space: nowrap; + margin: 0; + color: inherit; + font: inherit; + line-height: normal; + } +.#{$name} .#{$name}-caption { + vertical-align: middle; + white-space: nowrap; + font: inherit; + color: inherit; + } + +.#{$name} .v-icon { + vertical-align: middle; + margin-right: 3px; + } + +.#{$name} .v-errorindicator { + display: inline-block; + zoom: 1; + float: none; +} +/* Fixes stretched buttons in IE7*/ +.v-ie .#{$name} { + overflow: visible; + padding-left: 1em; + padding-right: 1em; +} + +.v-ie .#{$name}-link { + padding: 0; +} + +} diff --git a/WebContent/VAADIN/themes/base/caption/caption.scss b/WebContent/VAADIN/themes/base/caption/caption.scss index c6fd124ad6..d08f682adb 100644 --- a/WebContent/VAADIN/themes/base/caption/caption.scss +++ b/WebContent/VAADIN/themes/base/caption/caption.scss @@ -1,26 +1,26 @@ -@mixin base-caption { +@mixin base-caption($name : v-caption) { -.v-captionwrapper { +.#{$name}wrapper { text-align: left; /* Force default alignment */ } -.v-caption { +.#{$name} { overflow: hidden; white-space: nowrap; } .v-errorindicator { display: inline-block; } -.v-caption .v-icon { +.#{$name} .v-icon { display: inline-block; padding-right: 2px; vertical-align: middle; } -.v-caption .v-captiontext { +.#{$name} .#{$name}text { display: inline-block; overflow: hidden; vertical-align: middle; } -.v-caption .v-required-field-indicator { +.#{$name} .v-required-field-indicator { display: inline-block; } diff --git a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss index c2c1b698ad..2356a1689d 100644 --- a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss +++ b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss @@ -1,35 +1,35 @@ -@mixin base-csslayout { +@mixin base-csslayout($name : v-csslayout) { -.v-csslayout { +.#{$name} { overflow: hidden; } /* More specific selector to override 'v-connector' */ -div.v-csslayout { +div.#{$name} { display: block; } -.v-csslayout-margin, .v-csslayout-container { +.#{$name}-margin, .#{$name}-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-has-width > .v-csslayout-margin, -.v-has-width > .v-csslayout-margin > .v-csslayout-container { +.v-has-width > .#{$name}-margin, +.v-has-width > .#{$name}-margin > .#{$name}-container { width: 100%; } -.v-has-height > .v-csslayout-margin, -.v-has-height > .v-csslayout-margin > .v-csslayout-container { +.v-has-height > .#{$name}-margin, +.v-has-height > .#{$name}-margin > .#{$name}-container { height: 100%; } -.v-csslayout-margin-top { +.#{$name}-margin-top { padding-top: 12px; } -.v-csslayout-margin-bottom { +.#{$name}-margin-bottom { padding-bottom: 12px; } -.v-csslayout-margin-left { +.#{$name}-margin-left { padding-left: 12px; } -.v-csslayout-margin-right { +.#{$name}-margin-right { padding-right: 12px; } diff --git a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss index aaf3e75251..984c31e255 100644 --- a/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss +++ b/WebContent/VAADIN/themes/base/customcomponent/customcomponent.scss @@ -1,6 +1,6 @@ -@mixin base-customcomponent { +@mixin base-customcomponent($name : v-customcomponent) { -.v-customcomponent { +.#{$name} { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss index 26e1538d29..0f5f1230c4 100644 --- a/WebContent/VAADIN/themes/base/customlayout/customlayout.scss +++ b/WebContent/VAADIN/themes/base/customlayout/customlayout.scss @@ -1,6 +1,6 @@ -@mixin base-customlayout { +@mixin base-customlayout($name : v-customlayout) { -.v-customlayout { +.#{$name} { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss index 8877c986a0..f7d71a576b 100644 --- a/WebContent/VAADIN/themes/base/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss @@ -1,91 +1,91 @@ -@mixin base-datefield { +@mixin base-datefield($name : v-datefield) { -.v-datefield { +.#{$name} { white-space: nowrap; display: inline-block; /* Force minimum width */ line-height:0; /* Force minimum height */ } -.v-datefield-textfield { +.#{$name}-textfield { vertical-align: top; } -.v-datefield-button { +.#{$name}-button { cursor: pointer; } -.v-datefield-prompt .v-datefield-textfield { +.#{$name}-prompt .#{$name}-textfield { color: #999; font-style: italic; } -.v-datefield .v-datefield-button-readonly { +.#{$name} .#{$name}-button-readonly { display: none; } -.v-datefield-calendarpanel table { +.#{$name}-calendarpanel table { width: 100%; } -.v-datefield-calendarpanel td { +.#{$name}-calendarpanel td { padding: 0; margin: 0; } -.v-datefield-calendarpanel:focus { +.#{$name}-calendarpanel:focus { outline:none; } -.v-datefield-calendarpanel-header td { +.#{$name}-calendarpanel-header td { text-align: center; } -.v-datefield-calendarpanel-month { +.#{$name}-calendarpanel-month { text-align: center; white-space: nowrap; } -.v-datefield-calendarpanel-weeknumber { +.#{$name}-calendarpanel-weeknumber { color: #999; border-right: 1px solid #ddd; font-size: 0.9em; } -.v-datefield-calendarpanel-day, -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day, +.#{$name}-calendarpanel-day-today { cursor: pointer; } -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day-today { border: 1px solid #ddd; } -.v-disabled .v-datefield-calendarpanel-day, -.v-disabled .v-datefield-calendarpanel-day-today { +.v-disabled .#{$name}-calendarpanel-day, +.v-disabled .#{$name}-calendarpanel-day-today { cursor: default; } -.v-datefield-calendarpanel-day-disabled { +.#{$name}-calendarpanel-day-disabled { cursor: default; opacity: .5; } -.v-datefield-calendarpanel-day-selected { +.#{$name}-calendarpanel-day-selected { cursor: default; background: #333; color: #fff; } -.v-datefield-calendarpanel-day-focused { +.#{$name}-calendarpanel-day-focused { outline: 1px dotted black; } -.v-datefield-calendarpanel-day-offmonth { +.#{$name}-calendarpanel-day-offmonth { color: #666; } -.v-datefield-time { +.#{$name}-time { white-space: nowrap; } -.v-datefield-time .v-label { +.#{$name}-time .v-label { display: inline; } -.v-datefield-popup { +.#{$name}-popup { background: #fff; } /* Disabled by default -.v-datefield-error .v-textfield, -.v-datefield-error .v-datefield-calendarpanel { +.#{$name}-error .v-textfield, +.#{$name}-error .#{$name}-calendarpanel { background: #ffe0e0; } */ /* Disabled by default -.v-datefield-required .v-textfield, -.v-datefield-required .v-datefield-calendarpanel { +.#{$name}-required .v-textfield, +.#{$name}-required .#{$name}-calendarpanel { background:transparent; background-color: #ffe0e0; } diff --git a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss index 9d60bf0618..dae4320131 100644 --- a/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss +++ b/WebContent/VAADIN/themes/base/dragwrapper/dragwrapper.scss @@ -1,6 +1,6 @@ -@mixin base-dragwrapper { +@mixin base-dragwrapper($name : v-ddwrapper) { -.v-ddwrapper { +.#{$name} { padding: 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -13,7 +13,7 @@ -khtml-user-select: none; -webkit-user-select: none; } -.v-ie .v-ddwrapper a.drag-start { +.v-ie .#{$name} a.drag-start { display: block; position: absolute; top: 0; @@ -27,22 +27,22 @@ background-color:cyan; filter: alpha(opacity=0); } -.v-ddwrapper-over { +.#{$name}-over { border: 2px solid #1d9dff; background-color: #bcdcff; padding: 0; } -.v-ddwrapper-over { +.#{$name}-over { background-color: rgba(169,209,255,.6); } -.no-box-drag-hints .v-ddwrapper-over { +.no-box-drag-hints .#{$name}-over { border: none; background-color: transparent; padding: 2px; } -.v-app .v-ddwrapper-over-top, -.v-window .v-ddwrapper-over-top, -.v-popupview-popup .v-ddwrapper-over-top { +.v-app .#{$name}-over-top, +.v-window .#{$name}-over-top, +.v-popupview-popup .#{$name}-over-top { border: none; border-top: 2px solid #1d9dff; background-color: transparent; @@ -52,9 +52,9 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .v-ddwrapper-over-bottom, -.v-window .v-ddwrapper-over-bottom, -.v-popupview-popup .v-ddwrapper-over-bottom { +.v-app .#{$name}-over-bottom, +.v-window .#{$name}-over-bottom, +.v-popupview-popup .#{$name}-over-bottom { border: none; border-bottom: 2px solid #1d9dff; background-color: transparent; @@ -64,9 +64,9 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .v-ddwrapper-over-left, -.v-window .v-ddwrapper-over-left, -.v-popupview-popup .v-ddwrapper-over-left { +.v-app .#{$name}-over-left, +.v-window .#{$name}-over-left, +.v-popupview-popup .#{$name}-over-left { border: none; border-left: 2px solid #1d9dff; background-color: transparent; @@ -76,9 +76,9 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-app .v-ddwrapper-over-right, -.v-window .v-ddwrapper-over-right, -.v-popupview-popup .v-ddwrapper-over-right { +.v-app .#{$name}-over-right, +.v-window .#{$name}-over-right, +.v-popupview-popup .#{$name}-over-right { border: none; border-right: 2px solid #1d9dff; background-color: transparent; @@ -88,27 +88,27 @@ -webkit-border-radius: 0; border-radius: 0; } -.v-ddwrapper, -.v-ddwrapper-over, -.v-app .v-ddwrapper-over-top, -.v-window .v-ddwrapper-over-top, -.v-popupview-popup .v-ddwrapper-over-top, -.v-app .v-ddwrapper-over-bottom, -.v-window .v-ddwrapper-over-bottom, -.v-popupview-popup .v-ddwrapper-over-bottom, -.v-app .v-ddwrapper-over-left, -.v-window .v-ddwrapper-over-left, -.v-popupview-popup .v-ddwrapper-over-left, -.v-app .v-ddwrapper-over-right, -.v-window .v-ddwrapper-over-right, -.v-popupview-popup .v-ddwrapper-over-right { +.#{$name}, +.#{$name}-over, +.v-app .#{$name}-over-top, +.v-window .#{$name}-over-top, +.v-popupview-popup .#{$name}-over-top, +.v-app .#{$name}-over-bottom, +.v-window .#{$name}-over-bottom, +.v-popupview-popup .#{$name}-over-bottom, +.v-app .#{$name}-over-left, +.v-window .#{$name}-over-left, +.v-popupview-popup .#{$name}-over-left, +.v-app .#{$name}-over-right, +.v-window .#{$name}-over-right, +.v-popupview-popup .#{$name}-over-right { border-color: rgba(0,109,232,.6); } -.v-ddwrapper-over-top:before, -.v-ddwrapper-over-bottom:after, -.v-ddwrapper-over-left:before, -.v-ddwrapper-over-right:before { +.#{$name}-over-top:before, +.#{$name}-over-bottom:after, +.#{$name}-over-left:before, +.#{$name}-over-right:before { display: block; position: absolute; @@ -118,16 +118,16 @@ margin-left: -2px; background: transparent url(../common/img/drag-slot-dot.png) no-repeat; } -.v-ddwrapper-over-bottom:after { +.#{$name}-over-bottom:after { margin-top: -2px; } -.v-ddwrapper-over-left:before, -.v-ddwrapper-over-right:before { +.#{$name}-over-left:before, +.#{$name}-over-right:before { background-position: 0 -6px; margin-top: -2px; margin-left: -4px; } -.v-ddwrapper-over-right:before { +.#{$name}-over-right:before { position: relative; margin-bottom: -4px; margin-right: -4px; @@ -136,26 +136,26 @@ background-position: 100% -6px; } -.no-horizontal-drag-hints .v-ddwrapper-over-left { +.no-horizontal-drag-hints .#{$name}-over-left { padding-left: 2px; border-left: none; } -.no-horizontal-drag-hints .v-ddwrapper-over-right { +.no-horizontal-drag-hints .#{$name}-over-right { padding-right: 2px; border-right: none; } -.no-vertical-drag-hints .v-ddwrapper-over-top { +.no-vertical-drag-hints .#{$name}-over-top { padding-top: 2px; border-top: none; } -.no-vertical-drag-hints .v-ddwrapper-over-bottom { +.no-vertical-drag-hints .#{$name}-over-bottom { padding-bottom: 2px; border-bottom: none; } -.no-horizontal-drag-hints .v-ddwrapper-over-left:before, -.no-horizontal-drag-hints .v-ddwrapper-over-right:before, -.no-vertical-drag-hints .v-ddwrapper-over-top:before, -.no-vertical-drag-hints .v-ddwrapper-over-bottom:after { +.no-horizontal-drag-hints .#{$name}-over-left:before, +.no-horizontal-drag-hints .#{$name}-over-right:before, +.no-vertical-drag-hints .#{$name}-over-top:before, +.no-vertical-drag-hints .#{$name}-over-bottom:after { display: none; } diff --git a/WebContent/VAADIN/themes/base/embedded/embedded.scss b/WebContent/VAADIN/themes/base/embedded/embedded.scss index 53faaef2e8..bd7403bda2 100644 --- a/WebContent/VAADIN/themes/base/embedded/embedded.scss +++ b/WebContent/VAADIN/themes/base/embedded/embedded.scss @@ -1,6 +1,6 @@ -@mixin base-embedded { +@mixin base-embedded($name : v-embedded) { -.v-table .v-embedded-image { +.v-table .#{$name}-image { /* make embeddeds be centered in centered table cells. */ display: inline-block; } diff --git a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss index 258a8e3f15..6bfe112254 100644 --- a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss +++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss @@ -1,55 +1,55 @@ -@mixin base-formlayout { +@mixin base-formlayout($name : v-formlayout) { -.v-formlayout.v-has-width > table { +.#{$name}.v-has-width > table { width: 100%; } -.v-formlayout.v-has-height > table { +.#{$name}.v-has-height > table { height: 100%; } -.v-formlayout-cell .v-errorindicator { +.#{$name}-cell .v-errorindicator { display: block; } -.v-formlayout-error-indicator { +.#{$name}-error-indicator { /* fix width so layout is not jumpy when error disappears */ width: 12px; } -.v-formlayout-captioncell { +.#{$name}-captioncell { text-align:right; white-space: nowrap; } -.v-formlayout-errorcell, .v-formlayout-captioncell { +.#{$name}-errorcell, .#{$name}-captioncell { width: 1px; /* Don't use any extra space */ } -.v-formlayout-captioncell .v-caption { +.#{$name}-captioncell .v-caption { overflow: visible; } -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell, -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell, -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell { +.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-captioncell, +.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-contentcell, +.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-errorcell { padding-top: 6px; } -.v-formlayout-spacing > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell, -.v-formlayout-spacing > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell, -.v-formlayout-spacing > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell { +.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-captioncell, +.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-contentcell, +.#{$name}-spacing > tbody > .#{$name}-firstrow > .#{$name}-errorcell { padding-top: 0; } -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell, -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell, -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell { +.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-captioncell, +.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-contentcell, +.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-errorcell { padding-top: 12px; } -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-captioncell, -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-contentcell, -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-errorcell { +.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-captioncell, +.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-contentcell, +.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-errorcell { padding-bottom: 12px; } -.v-formlayout-margin-left > tbody > .v-formlayout-row > .v-formlayout-captioncell { +.#{$name}-margin-left > tbody > .#{$name}-row > .#{$name}-captioncell { padding-left: 12px; } -.v-formlayout-margin-right > tbody > .v-formlayout-row > .v-formlayout-contentcell { +.#{$name}-margin-right > tbody > .#{$name}-row > .#{$name}-contentcell { padding-right: 12px; } -.v-formlayout-captioncell .v-caption .v-required-field-indicator { +.#{$name}-captioncell .v-caption .v-required-field-indicator { float: none; } diff --git a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss index 72f7437e6e..45b02316ae 100644 --- a/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss +++ b/WebContent/VAADIN/themes/base/gridlayout/gridlayout.scss @@ -1,34 +1,34 @@ -@mixin base-gridlayout { +@mixin base-gridlayout($name : v-gridlayout) { -.v-gridlayout { +.#{$name} { position: relative; } -.v-gridlayout-slot { +.#{$name}-slot { position: absolute; } -.v-gridlayout-margin-top { +.#{$name}-margin-top { padding-top: 12px; } -.v-gridlayout-margin-bottom { +.#{$name}-margin-bottom { padding-bottom: 12px; } -.v-gridlayout-margin-left { +.#{$name}-margin-left { padding-left: 12px; } -.v-gridlayout-margin-right { +.#{$name}-margin-right { padding-right: 12px; } -.v-gridlayout-spacing-on { +.#{$name}-spacing-on { padding-left: 6px; padding-top: 6px; overflow: hidden; } -.v-gridlayout-spacing, -.v-gridlayout-spacing-off { +.#{$name}-spacing, +.#{$name}-spacing-off { padding-left: 0; padding-top: 0; } -.v-gridlayout-spacing-off { +.#{$name}-spacing-off { overflow: hidden; } diff --git a/WebContent/VAADIN/themes/base/label/label.scss b/WebContent/VAADIN/themes/base/label/label.scss index ae1539acc9..6ccd0f3d27 100644 --- a/WebContent/VAADIN/themes/base/label/label.scss +++ b/WebContent/VAADIN/themes/base/label/label.scss @@ -1,10 +1,10 @@ -@mixin base-label { +@mixin base-label($name : v-label) { -.v-label { +.#{$name} { overflow: hidden; } -.v-label.v-has-width { +.#{$name}.v-has-width { white-space: normal; } diff --git a/WebContent/VAADIN/themes/base/link/link.scss b/WebContent/VAADIN/themes/base/link/link.scss index 710f95d832..455ab2cfd0 100644 --- a/WebContent/VAADIN/themes/base/link/link.scss +++ b/WebContent/VAADIN/themes/base/link/link.scss @@ -1,20 +1,20 @@ -@mixin base-link { +@mixin base-link($name : v-link) { -.v-link { +.#{$name} { white-space: nowrap; } -.v-link a { +.#{$name} a { vertical-align: middle; text-decoration: none; } -.v-link span { +.#{$name} span { text-decoration: underline; vertical-align: middle; } .v-disabled a { cursor: default; } -.v-link img { +.#{$name} img { vertical-align: middle; border:none; } diff --git a/WebContent/VAADIN/themes/base/loginform/loginform.scss b/WebContent/VAADIN/themes/base/loginform/loginform.scss index d2784fad47..d31af3b9e2 100644 --- a/WebContent/VAADIN/themes/base/loginform/loginform.scss +++ b/WebContent/VAADIN/themes/base/loginform/loginform.scss @@ -1,6 +1,6 @@ -@mixin base-loginform { +@mixin base-loginform($name : v-loginform) { -.v-loginform { +.#{$name} { height: 140px; width: 200px; } diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.scss b/WebContent/VAADIN/themes/base/menubar/menubar.scss index 512a8ee1d5..f896e967b5 100644 --- a/WebContent/VAADIN/themes/base/menubar/menubar.scss +++ b/WebContent/VAADIN/themes/base/menubar/menubar.scss @@ -1,11 +1,11 @@ -@mixin base-menubar { +@mixin base-menubar($name : v-menubar) { -.v-menubar { +.#{$name} { display: inline-block; white-space: nowrap; overflow: hidden; } -.v-menubar .v-menubar-menuitem { +.#{$name} .#{$name}-menuitem { cursor: default; vertical-align: middle; white-space: nowrap; @@ -13,36 +13,36 @@ display: inline-block; zoom: 1; } -.v-menubar .v-menubar-menuitem-caption .v-icon { +.#{$name} .#{$name}-menuitem-caption .v-icon { vertical-align: middle; white-space: nowrap; } -.v-menubar-submenu { +.#{$name}-submenu { background: #fff; } -.v-menubar-menuitem-selected { +.#{$name}-menuitem-selected { background: #333; color: #fff; } -.v-menubar-submenu .v-menubar-menuitem { +.#{$name}-submenu .#{$name}-menuitem { cursor: default; display: block; position: relative; padding-right: 1.5em; } -.v-menubar-submenu .v-menubar-menuitem-caption { +.#{$name}-submenu .#{$name}-menuitem-caption { display: block; } -.v-menubar-submenu .v-menubar-menuitem *, -.v-menubar-submenu .v-menubar-menuitem-caption * { +.#{$name}-submenu .#{$name}-menuitem *, +.#{$name}-submenu .#{$name}-menuitem-caption * { white-space: nowrap; } -.v-menubar-submenu-indicator { +.#{$name}-submenu-indicator { display: none; /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } -.v-menubar-submenu .v-menubar-submenu-indicator { +.#{$name}-submenu .#{$name}-submenu-indicator { display: block; position: absolute; right: 0; @@ -50,20 +50,20 @@ height: 1em; font-size: 0.9em; } -.v-menubar-menuitem-disabled, -.v-menubar span.v-menubar-menuitem-disabled:hover, -.v-menubar span.v-menubar-menuitem-disabled:focus, -.v-menubar span.v-menubar-menuitem-disabled:active { +.#{$name}-menuitem-disabled, +.#{$name} span.#{$name}-menuitem-disabled:hover, +.#{$name} span.#{$name}-menuitem-disabled:focus, +.#{$name} span.#{$name}-menuitem-disabled:active { color: #999; } -.v-menubar-more-menuitem { +.#{$name}-more-menuitem { /* Arial has the most coverage for geometric entity characters */ font-family: arial, helvetica, sans-serif; } -.v-menubar-separator { +.#{$name}-separator { overflow: hidden; } -.v-menubar-separator span { +.#{$name}-separator span { display: block; text-indent: -9999px; font-size: 1px; @@ -72,26 +72,26 @@ margin: 3px 0 2px; overflow: hidden; } -.v-menubar .v-icon, -.v-menubar-submenu .v-icon { +.#{$name} .v-icon, +.#{$name}-submenu .v-icon { margin-right: 3px; } -.v-menubar:focus, -.v-menubar-popup:focus, -.v-menubar-popup .popupContent:focus, -.v-menubar-popup .popupContent .v-menubar-submenu:focus{ +.#{$name}:focus, +.#{$name}-popup:focus, +.#{$name}-popup .popupContent:focus, +.#{$name}-popup .popupContent .#{$name}-submenu:focus{ outline: none; } /* Checkboxes for checkable/checked menu items */ /* Checked/unchecked requires combined style selected-(un)checked for IE6 */ -.v-menubar-submenu-check-column .v-menubar-menuitem { +.#{$name}-submenu-check-column .#{$name}-menuitem { padding-left: 6px; } -.v-menubar-submenu-check-column .v-menubar-menuitem-caption { +.#{$name}-submenu-check-column .#{$name}-menuitem-caption { padding-left: 18px; } -.v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption { +.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption { background: transparent url(img/check.gif) no-repeat left; } diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss index e67ac14050..350db1a75f 100644 --- a/WebContent/VAADIN/themes/base/notification/notification.scss +++ b/WebContent/VAADIN/themes/base/notification/notification.scss @@ -1,6 +1,6 @@ -@mixin base-notification { +@mixin base-notification($name : v-Notification) { -.v-Notification { +.#{$name} { background: #999; color: #fff; cursor: pointer; @@ -9,33 +9,33 @@ max-width:85%; } -.v-Notification h1, -.v-Notification p, -.v-Notification-error h1, -.v-Notification-error p, -.v-Notification-warning h1, -.v-Notification-warning p { +.#{$name} h1, +.#{$name} p, +.#{$name}-error h1, +.#{$name}-error p, +.#{$name}-warning h1, +.#{$name}-warning p { display: inline; margin: 0 0.5em 0 0; } -.v-Notification-warning { +.#{$name}-warning { background: orange; } -.v-Notification-error { +.#{$name}-error { background: red; } -.v-Notification-tray h1 { +.#{$name}-tray h1 { display: block; } -.v-Notification-tray p { +.#{$name}-tray p { display: block; } -.v-Notification-system { +.#{$name}-system { background-color: red; opacity: .7; filter: alpha(opacity=70); } -.v-Notification-system h1 { +.#{$name}-system h1 { display: block; margin: 0; } diff --git a/WebContent/VAADIN/themes/base/panel/panel.scss b/WebContent/VAADIN/themes/base/panel/panel.scss index 202e75c226..46571f8bd5 100644 --- a/WebContent/VAADIN/themes/base/panel/panel.scss +++ b/WebContent/VAADIN/themes/base/panel/panel.scss @@ -1,48 +1,48 @@ -@mixin base-panel { +@mixin base-panel($name : v-panel) { -.v-panel, -.v-panel-caption, -.v-panel-content, -.v-panel-deco, -.v-panel-light, -.v-panel-caption-light, -.v-panel-content-light, -.v-panel-deco-light { +.#{$name}, +.#{$name}-caption, +.#{$name}-content, +.#{$name}-deco, +.#{$name}-light, +.#{$name}-caption-light, +.#{$name}-content-light, +.#{$name}-deco-light { outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ text-align: left; /* Force default alignment */ } -.v-panel-caption .v-errorindicator { +.#{$name}-caption .v-errorindicator { float: none; display: inline; } -.v-panel-caption .v-icon { +.#{$name}-caption .v-icon { display: inline; vertical-align: middle; } -.v-panel-caption span { +.#{$name}-caption span { vertical-align: middle; display: table-row; } -.v-panel-caption { +.#{$name}-caption { white-space: nowrap; overflow:hidden; font-weight: bold; } -.v-panel-nocaption { +.#{$name}-nocaption { overflow: hidden; } -.v-panel-content { +.#{$name}-content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-panel.v-has-width > .v-panel-content { +.#{$name}.v-has-width > .#{$name}-content { width: 100%; } -.v-panel.v-has-height > .v-panel-content { +.#{$name}.v-has-height > .#{$name}-content { height: 100%; } -.v-panel-deco { +.#{$name}-deco { } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/popupview/popupview.scss b/WebContent/VAADIN/themes/base/popupview/popupview.scss index e192d0d147..b52f79db76 100644 --- a/WebContent/VAADIN/themes/base/popupview/popupview.scss +++ b/WebContent/VAADIN/themes/base/popupview/popupview.scss @@ -1,14 +1,14 @@ -@mixin base-popupview { +@mixin base-popupview($name : v-popupview) { -.v-popupview { +.#{$name} { cursor: pointer; text-decoration: underline; white-space: nowrap; } -.v-popupview-popup { +.#{$name}-popup { overflow: auto; } -.v-popupview-loading { +.#{$name}-loading { width: 30px; height: 30px; background: transparent url(../common/img/ajax-loader-medium.gif) no-repeat 50%; diff --git a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss index 4c1483886b..7af1ba1f0e 100644 --- a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss +++ b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.scss @@ -1,17 +1,17 @@ -@mixin base-progressindicator { +@mixin base-progressindicator($name : v-progressindicator) { -.v-progressindicator { +.#{$name} { width: 150px; } -.v-progressindicator-wrapper { +.#{$name}-wrapper { height: 7px; border: 1px solid #ddd; } -.v-progressindicator-indicator { +.#{$name}-indicator { height: 7px; background: #ddd; } -div.v-progressindicator-indeterminate { +div.#{$name}-indeterminate { height: 20px; width: 20px; background: #fff url(../common/img/ajax-loader-medium.gif) no-repeat 50%; @@ -20,13 +20,13 @@ div.v-progressindicator-indeterminate { -moz-border-radius: 4px; } /* Hide obsolete elements in indeterminate mode */ -.v-progressindicator-indeterminate .v-progressindicator-wrapper, -.v-progressindicator-indeterminate .v-progressindicator-indicator, -.v-progressindicator-indeterminate-disabled .v-progressindicator-wrapper, -.v-progressindicator-indeterminate-disabled .v-progressindicator-indicator { +.#{$name}-indeterminate .#{$name}-wrapper, +.#{$name}-indeterminate .#{$name}-indicator, +.#{$name}-indeterminate-disabled .#{$name}-wrapper, +.#{$name}-indeterminate-disabled .#{$name}-indicator { display: none; } -div.v-progressindicator-indeterminate-disabled { +div.#{$name}-indeterminate-disabled { height: 20px; width: 20px; background: transparent; diff --git a/WebContent/VAADIN/themes/base/select/select.scss b/WebContent/VAADIN/themes/base/select/select.scss index d2d9e8a663..483f0e16b6 100644 --- a/WebContent/VAADIN/themes/base/select/select.scss +++ b/WebContent/VAADIN/themes/base/select/select.scss @@ -1,58 +1,58 @@ -@mixin base-select { +@mixin base-select($name : v-select) { -.v-select { +.#{$name} { text-align: left; } -.v-select-optiongroup .v-select-option { +.#{$name}-optiongroup .#{$name}-option { display: block; white-space: nowrap; } -.v-select-optiongroup .v-icon { +.#{$name}-optiongroup .v-icon { vertical-align: middle; white-space: nowrap; margin: 0 2px; } -.v-ie .v-select-optiongroup .v-select-option { +.v-ie .#{$name}-optiongroup .#{$name}-option { zoom: 1; } -.v-select-select { +.#{$name}-select { display: block; } -.v-select-twincol { +.#{$name}-twincol { white-space: nowrap; } -.v-select-twincol-options { +.#{$name}-twincol-options { float: left; } -.v-select-twincol-caption-left { +.#{$name}-twincol-caption-left { float: left; overflow: hidden; text-overflow: ellipsis; } -.v-select-twincol-selections { +.#{$name}-twincol-selections { font-weight: bold; } -.v-select-twincol-caption-right { +.#{$name}-twincol-caption-right { float: right; overflow: hidden; text-overflow: ellipsis; } -.v-select-twincol-buttons { +.#{$name}-twincol-buttons { float: left; text-align: center; } -.v-select-twincol-buttons .v-select-twincol-deco { +.#{$name}-twincol-buttons .#{$name}-twincol-deco { clear: both; } -.v-select-twincol .v-textfield { +.#{$name}-twincol .v-textfield { display: block; float: left; clear: left; } -.v-select-twincol .v-button { +.#{$name}-twincol .v-button { float: left; } -.v-select-twincol-buttons .v-button { +.#{$name}-twincol-buttons .v-button { float: none; } .v-filterselect { @@ -150,10 +150,10 @@ /* Error styles (disabled by default) .v-filterselect-error .v-filterselect-input, -.v-select-error .v-select-option, -.v-select-error .v-select-select, -.v-select-error .v-select-twincol-selections, -.v-select-error .v-select-twincol-options { +.#{$name}-error .#{$name}-option, +.#{$name}-error .#{$name}-select, +.#{$name}-error .#{$name}-twincol-selections, +.#{$name}-error .#{$name}-twincol-options { background: #ffaaaa; } */ @@ -161,10 +161,10 @@ /* Required field styles (disabled by default) .v-filterselect-error .v-filterselect-input, -.v-select-required .v-select-option, -.v-select-required .v-select-select, -.v-select-required .v-select-twincol-selections, -.v-select-required .v-select-twincol-options { +.#{$name}-required .#{$name}-option, +.#{$name}-required .#{$name}-select, +.#{$name}-required .#{$name}-twincol-selections, +.#{$name}-required .#{$name}-twincol-options { background: #ffaaaa; } */ diff --git a/WebContent/VAADIN/themes/base/shadow/shadow.scss b/WebContent/VAADIN/themes/base/shadow/shadow.scss index 4e1085aa5a..c0c94e7680 100644 --- a/WebContent/VAADIN/themes/base/shadow/shadow.scss +++ b/WebContent/VAADIN/themes/base/shadow/shadow.scss @@ -1,31 +1,31 @@ -@mixin base-shadow { +@mixin base-shadow($name : v-shadow) { -.v-shadow { +.#{$name} { position: absolute; } -.v-shadow .top-left { +.#{$name} .top-left { position: absolute; overflow: hidden; top: -3px; left: -5px; width: 10px; height: 10px; background: transparent url(img/top-left.png); } -.v-shadow .top { +.#{$name} .top { position: absolute; overflow: hidden; top: -3px; left: 5px; height: 10px; right: 5px; background: transparent url(img/top.png); } -.v-shadow .top-right { +.#{$name} .top-right { position: absolute; overflow: hidden; top: -3px; right: -5px; width: 10px; height: 10px; background: transparent url(img/top-right.png); } -.v-shadow .left { +.#{$name} .left { position: absolute; overflow: hidden; top: 7px; left: -5px; width: 10px; @@ -33,14 +33,14 @@ background: transparent url(img/left.png); } -.v-shadow .center { +.#{$name} .center { position: absolute; overflow: hidden; top: 7px; left: 5px; bottom: 3px; right: 5px; background: transparent url(img/center.png); } -.v-shadow .right { +.#{$name} .right { position: absolute; overflow: hidden; top: 7px; right: -5px; width: 10px; @@ -48,21 +48,21 @@ background: transparent url(img/right.png); } -.v-shadow .bottom-left { +.#{$name} .bottom-left { position: absolute; overflow: hidden; bottom: -7px; left: -5px; width: 10px; height: 10px; background: transparent url(img/bottom-left.png); } -.v-shadow .bottom { +.#{$name} .bottom { position: absolute; overflow: hidden; bottom: -7px; left: 5px; right: 5px; height: 10px; background: transparent url(img/bottom.png); } -.v-shadow .bottom-right { +.#{$name} .bottom-right { position: absolute; overflow: hidden; bottom: -7px; right: -5px; width: 10px; height: 10px; diff --git a/WebContent/VAADIN/themes/base/slider/slider.scss b/WebContent/VAADIN/themes/base/slider/slider.scss index 0c65bf1e73..bfb4c3b950 100644 --- a/WebContent/VAADIN/themes/base/slider/slider.scss +++ b/WebContent/VAADIN/themes/base/slider/slider.scss @@ -1,9 +1,9 @@ -@mixin base-slider { +@mixin base-slider($name : v-slider) { -.v-slider { +.#{$name} { margin: 5px 0; } -.v-slider-base { +.#{$name}-base { /* changing the borders will require adjustments to ISlider.java */ height: 2px; border-top: 1px solid #ddd; @@ -12,7 +12,7 @@ border-right: 1px solid #eee; } -.v-slider-handle { +.#{$name}-handle { background: #aaa; width: 12px; height: 12px; @@ -20,7 +20,7 @@ font-size: 0; } -.v-slider-vertical { +.#{$name}-vertical { width: 2px; height: auto; margin: 0 5px; @@ -28,19 +28,19 @@ border-left: 1px solid #cccfd0; border-right: 1px solid #cccfd0; } -.v-slider-vertical .v-slider-base { +.#{$name}-vertical .#{$name}-base { width: 2px; border-bottom: 1px solid #eee; border-right: none; } -.v-slider-vertical .v-slider-handle { +.#{$name}-vertical .#{$name}-handle { width: 12px; height: 12px; font-size: 0; margin-left: -5px; } -.v-slider-feedback { +.#{$name}-feedback { padding: 2px 5px; background: #444; color: #fff; @@ -56,12 +56,12 @@ } /* Disabled by default -.v-slider-error .v-slider-base { +.#{$name}-error .#{$name}-base { background: #FFE0E0; } */ /* Disabled by default -.v-slider-required .v-slider-base { +.#{$name}-required .#{$name}-base { background: #FFE0E0; } */ diff --git a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss index b22ebe2569..11b4da48d8 100644 --- a/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss +++ b/WebContent/VAADIN/themes/base/splitpanel/splitpanel.scss @@ -1,13 +1,13 @@ -@mixin base-splitpanel { +@mixin base-splitpanel($name : v-splitpanel) { -.v-splitpanel-horizontal, -.v-splitpanel-vertical { +.#{$name}-horizontal, +.#{$name}-vertical { overflow: hidden; } -.v-splitpanel-hsplitter { +.#{$name}-hsplitter { width: 6px; } -.v-splitpanel-hsplitter div { +.#{$name}-hsplitter div { width: 6px; position: absolute; top: 0; @@ -16,19 +16,19 @@ cursor: e-resize; cursor: col-resize; } -.v-disabled .v-splitpanel-hsplitter div { +.v-disabled .#{$name}-hsplitter div { cursor: default; } -.v-splitpanel-vsplitter { +.#{$name}-vsplitter { height: 6px; } -.v-splitpanel-vsplitter div { +.#{$name}-vsplitter div { height: 6px; background: #ddd; cursor: s-resize; cursor: row-resize; } -.v-disabled .v-splitpanel-vsplitter div { +.v-disabled .#{$name}-vsplitter div { cursor: default; } diff --git a/WebContent/VAADIN/themes/base/styles.scss b/WebContent/VAADIN/themes/base/styles.scss index 7ca27280bc..40990f2c31 100644 --- a/WebContent/VAADIN/themes/base/styles.scss +++ b/WebContent/VAADIN/themes/base/styles.scss @@ -1,47 +1,2 @@ @import "base.scss"; - -// @include base-app; - -// everything included from base theme -// other themes should enclose corresponding definitions in theme selectors - -@include base-widget; - -@include base-absolutelayout; -@include base-accordion; -@include base-button; -@include base-caption; - -// here for now to preserve old semantics -@include base-common; - -@include base-layout; -@include base-csslayout; -@include base-customcomponent; -@include base-customlayout; -@include base-datefield; -@include base-dragwrapper; -@include base-embedded; -@include base-formlayout; -@include base-gridlayout; -@include base-label; -@include base-link; -@include base-loginform; -@include base-menubar; -@include base-notification; -@include base-orderedlayout; -@include base-panel; -@include base-popupview; -@include base-progressindicator; -@include base-select; -@include base-shadow; -@include base-slider; -@include base-splitpanel; -@include base-table; -@include base-tabsheet; -@include base-textfield; -@include base-richtextarea; -@include base-tree; -@include base-treetable; -@include base-upload; -@include base-window; +@include base; diff --git a/WebContent/VAADIN/themes/base/table/table.scss b/WebContent/VAADIN/themes/base/table/table.scss index fd3c0af0e1..552628bb61 100644 --- a/WebContent/VAADIN/themes/base/table/table.scss +++ b/WebContent/VAADIN/themes/base/table/table.scss @@ -1,4 +1,4 @@ -@mixin base-table { +@mixin base-table($name : v-table) { /* Table theme building instructions * @@ -8,82 +8,82 @@ * these instructions. * * Borders in table header and in table body need to be same width - * - specify vertical borders on .v-table-header-wrap and .v-table-body + * - specify vertical borders on .#{$name}-header-wrap and .#{$name}-body * * Table cells in body: - * - padding/border for cells is to be defined for td elements (class name: .v-table-cell-content) + * - padding/border for cells is to be defined for td elements (class name: .#{$name}-cell-content) * - in default theme there are no borders, but they should work. Just set border-right or border-bottom - * - no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element + * - no padding or border is allowed for div inside cells (class name: .#{$name}-cell-wrapper) element * - background is allowed for both elements * * Table headers: - * - table cells in header contain .v-table-resizer and - * .v-table-caption-container div elements, which are both floated to right - * - to align header caption to body content resizer width + .v-table-caption-container + * - table cells in header contain .#{$name}-resizer and + * .#{$name}-caption-container div elements, which are both floated to right + * - to align header caption to body content resizer width + .#{$name}-caption-container * padding right should be equal to content cells padding-right and border-right. * - Possible cell border in header must be themed into column resizer. * */ -.v-table { +.#{$name} { overflow: hidden; text-align: left; /* Force default alignment */ } -.v-table-header-wrap { +.#{$name}-header-wrap { overflow: hidden; border: 1px solid #aaa; border-bottom: none; background: #efefef; } -.v-table-header table, -.v-table-table { +.#{$name}-header table, +.#{$name}-table { border-spacing: 0; border-collapse: separate; margin: 0; padding: 0; border: 0; } -.v-table-header td { +.#{$name}-header td { padding: 0; } -.v-table-header-cell, -.v-table-header-cell-asc, -.v-table-header-cell-desc { +.#{$name}-header-cell, +.#{$name}-header-cell-asc, +.#{$name}-header-cell-desc { cursor: pointer; } -.v-table.v-disabled .v-table-header-cell, -.v-table.v-disabled .v-table-header-cell-asc, -.v-table.v-disabled .v-table-header-cell-desc { +.#{$name}.v-disabled .#{$name}-header-cell, +.#{$name}.v-disabled .#{$name}-header-cell-asc, +.#{$name}.v-disabled .#{$name}-header-cell-desc { cursor: default; } -.v-table-footer-wrap { +.#{$name}-footer-wrap { overflow: hidden; border: 1px solid #aaa; border-top: none; background: #efefef; } -.v-table-footer table { +.#{$name}-footer table { border-spacing: 0; border-collapse: collapse; margin: 0; padding: 0; border: 0; } -.v-table-footer td { +.#{$name}-footer td { padding: 0; border-right: 1px solid #aaa; } -.v-table-footer-cell { +.#{$name}-footer-cell { cursor: pointer; } -.v-table-footer-container { +.#{$name}-footer-container { float:right; padding-right:6px; overflow:hidden; white-space:nowrap; } -.v-table-resizer { +.#{$name}-resizer { display: block; height: 1.2em; float: right; @@ -93,53 +93,53 @@ width: 1px; overflow: hidden; } -.v-table.v-disabled .v-table-resizer { +.#{$name}.v-disabled .#{$name}-resizer { cursor: default; } -.v-table-caption-container { +.#{$name}-caption-container { overflow: hidden; white-space: nowrap; margin-left: 6px; } -.v-table-caption-container-align-right { +.#{$name}-caption-container-align-right { float: right; } -.v-table-sort-indicator { +.#{$name}-sort-indicator { width: 0px; height: 1.2em; float: right; } -.v-table-header-cell-asc .v-table-sort-indicator, -.v-table-header-cell-desc .v-table-sort-indicator { +.#{$name}-header-cell-asc .#{$name}-sort-indicator, +.#{$name}-header-cell-desc .#{$name}-sort-indicator { width: 16px; height: 1.2em; float: right; } -.v-table-header-cell-asc .v-table-sort-indicator { +.#{$name}-header-cell-asc .#{$name}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right 6px; } -.v-table-header-cell-desc .v-table-sort-indicator { +.#{$name}-header-cell-desc .#{$name}-sort-indicator { background: transparent url(../common/img/sprites.png) no-repeat right -10px; } -.v-table-caption-container-align-center { +.#{$name}-caption-container-align-center { text-align: center; } -.v-table-caption-container-align-right { +.#{$name}-caption-container-align-right { text-align: right; } -.v-table-caption-container .v-icon, -.v-table-header-drag .v-icon { +.#{$name}-caption-container .v-icon, +.#{$name}-header-drag .v-icon { vertical-align: middle; } -.v-table-body { +.#{$name}-body { border: 1px solid #aaa; } -.v-table-row-spacer { +.#{$name}-row-spacer { height: 10px; overflow: hidden; /* IE hack to allow < one line height divs */ } -.v-table-row, -.v-table-row-odd { +.#{$name}-row, +.#{$name}-row-odd { background: #fff; border: 0; margin: 0; @@ -147,36 +147,36 @@ cursor: pointer; } -.v-table-generated-row { +.#{$name}-generated-row { background: #efefef; } -.v-table-body-noselection .v-table-row, -.v-table-body-noselection .v-table-row-odd { +.#{$name}-body-noselection .#{$name}-row, +.#{$name}-body-noselection .#{$name}-row-odd { cursor: default; } -.v-table .v-selected { +.#{$name} .v-selected { background: #999; color: #fff; } -.v-table-cell-content { +.#{$name}-cell-content { white-space: nowrap; overflow: hidden; padding: 0 6px; border-right: 1px solid #aaa; } -.v-table-cell-wrapper { +.#{$name}-cell-wrapper { /* Do not specify any margins, paddings or borders here */ white-space: nowrap; overflow: hidden; } -.v-table-cell-wrapper-align-center { +.#{$name}-cell-wrapper-align-center { text-align: center; } -.v-table-cell-wrapper-align-right { +.#{$name}-cell-wrapper-align-right { text-align: right; } -.v-table-column-selector { +.#{$name}-column-selector { float: right; background: transparent url(../common/img/sprites.png) no-repeat 4px -37px; margin: -1.2em 0 0 0; @@ -185,10 +185,10 @@ position: relative; /* hide this from IE, it works without it */ cursor: pointer; } -.v-table.v-disabled .v-table-column-selector { +.#{$name}.v-disabled .#{$name}-column-selector { cursor: default; } -.v-table-focus-slot-left { +.#{$name}-focus-slot-left { border-left: 2px solid #999; float: none; margin-bottom: -1.2em; @@ -196,11 +196,11 @@ background: transparent; border-right: 1px solid #aaa; } -.v-table-focus-slot-right { +.#{$name}-focus-slot-right { border-right: 2px solid #999; margin-left: -2px; } -.v-table-header-drag { +.#{$name}-header-drag { position: absolute; background: #efefef; border: 1px solid #eee; @@ -209,30 +209,30 @@ margin-top: 20px; z-index: 30000; } -.v-table-header-drag .v-icon { +.#{$name}-header-drag .v-icon { vertical-align: middle; } -.v-table-scrollposition { +.#{$name}-scrollposition { width: 160px; background: #eee; border: 1px solid #aaa; } -.v-table-scrollposition span { +.#{$name}-scrollposition span { display: block; text-align: center; } -.v-table-body:focus, -.v-table-body-wrapper:focus { +.#{$name}-body:focus, +.#{$name}-body-wrapper:focus { outline: none; } -.v-table-body.focused { +.#{$name}-body.focused { border-color: #388ddd; } -.v-table-focus .v-table-cell-content { +.#{$name}-focus .#{$name}-cell-content { border-top: 1px dotted #0066bd; border-bottom: 1px dotted #0066bd; } -.v-table-focus .v-table-cell-wrapper { +.#{$name}-focus .#{$name}-cell-wrapper { margin-top: -1px; margin-bottom: -1px; } @@ -246,26 +246,26 @@ /************************************* * Drag'n'drop styles *************************************/ -.v-table-drag .v-table-body { +.#{$name}-drag .#{$name}-body { border-color: #1d9dff; } -.v-table-row-drag-middle .v-table-cell-content { +.#{$name}-row-drag-middle .#{$name}-cell-content { background-color: #bcdcff; } -.v-table-row-drag-top .v-table-cell-content { +.#{$name}-row-drag-top .#{$name}-cell-content { border-top: 2px solid #1d9dff; } -.v-table-row-drag-top .v-table-cell-wrapper { +.#{$name}-row-drag-top .#{$name}-cell-wrapper { margin-top: -2px; /* compensate the space consumed by border hint */ } -.v-table-row-drag-bottom .v-table-cell-content { +.#{$name}-row-drag-bottom .#{$name}-cell-content { border-bottom: 2px solid #1d9dff; } -.v-table-row-drag-bottom .v-table-cell-wrapper { +.#{$name}-row-drag-bottom .#{$name}-cell-wrapper { margin-bottom: -2px; /* compensate the space consumed by border hint */ } -.v-table-row-drag-top .v-table-cell-content:first-child:before, -.v-table-row-drag-bottom .v-table-cell-content:first-child:after { +.#{$name}-row-drag-top .#{$name}-cell-content:first-child:before, +.#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { display: block; position: absolute; @@ -275,8 +275,8 @@ margin-left: -6px; background: transparent url(../common/img/drag-slot-dot.png); } -.v-ff .v-table-row-drag-bottom .v-table-cell-content:first-child:after, -.v-ie .v-table-row-drag-bottom .v-table-cell-content:first-child:after { +.v-ff .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after, +.v-ie .#{$name}-row-drag-bottom .#{$name}-cell-content:first-child:after { margin-top: -2px; } diff --git a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss index e8cd536024..a001605f27 100644 --- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss +++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.scss @@ -1,12 +1,12 @@ -@mixin base-tabsheet { +@mixin base-tabsheet($name : v-tabsheet) { -.v-tabsheet, -.v-tabsheet-content, -.v-tabsheet-deco { +.#{$name}, +.#{$name}-content, +.#{$name}-deco { outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ text-align: left; /* Force default alignment */ } -.v-tabsheet-tabs { +.#{$name}-tabs { empty-cells: hide; border-collapse: collapse; margin: 0; @@ -15,55 +15,55 @@ width: 100%; overflow:hidden; } -.v-tabsheet-tabitemcell:focus { +.#{$name}-tabitemcell:focus { outline: none; } -.v-tabsheet-tabitemcell, -.v-tabsheet-spacertd { +.#{$name}-tabitemcell, +.#{$name}-spacertd { margin: 0; padding: 0; vertical-align: bottom; } -.v-tabsheet-spacertd { +.#{$name}-spacertd { width: 100%; } -.v-tabsheet-spacertd div { +.#{$name}-spacertd div { border-left: 1px solid #aaa; border-bottom: 1px solid #aaa; height: 1em; padding: 0.2em 0; } -.v-tabsheet-hidetabs > .v-tabsheet-tabcontainer { +.#{$name}-hidetabs > .#{$name}-tabcontainer { display: none; } -.v-tabsheet-scroller { +.#{$name}-scroller { white-space: nowrap; text-align: right; margin-top: -1em; } -.v-disabled .v-tabsheet-scroller { +.v-disabled .#{$name}-scroller { display: none; } -.v-tabsheet-scrollerPrev, -.v-tabsheet-scrollerNext, -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerNext-disabled { +.#{$name}-scrollerPrev, +.#{$name}-scrollerNext, +.#{$name}-scrollerPrev-disabled, +.#{$name}-scrollerNext-disabled { border: 1px solid #aaa; background: #fff; width: 12px; height: 1em; cursor: pointer; } -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerNext-disabled { +.#{$name}-scrollerPrev-disabled, +.#{$name}-scrollerNext-disabled { opacity: 0.5; cursor: default; } -.v-tabsheet-tabs .v-caption, -.v-tabsheet-tabs .v-caption span { +.#{$name}-tabs .v-caption, +.#{$name}-tabs .v-caption span { white-space: nowrap; } -.v-tabsheet-caption-close { +.#{$name}-caption-close { display: inline; display: inline-block; zoom: 1; @@ -79,49 +79,49 @@ -moz-user-select: none; -webkit-user-select: none; } -.v-tabsheet .v-disabled .v-tabsheet-caption-close { +.#{$name} .v-disabled .#{$name}-caption-close { cursor: default; visibility: hidden; } -.v-tabsheet-tabitem:hover .v-tabsheet-caption-close { +.#{$name}-tabitem:hover .#{$name}-caption-close { visibility: visible; } -.v-tabsheet-tabitem { +.#{$name}-tabitem { border: 1px solid #aaa; border-right: none; cursor: pointer; padding: 0.2em 0.5em; } -.v-tabsheet-tabitem .v-caption { +.#{$name}-tabitem .v-caption { cursor: inherit; } -.v-tabsheet.v-disabled .v-tabsheet-tabitem, -.v-tabsheet-tabitemcell-disabled .v-tabsheet-tabitem { +.#{$name}.v-disabled .#{$name}-tabitem, +.#{$name}-tabitemcell-disabled .#{$name}-tabitem { cursor: default; } -.v-tabsheet-tabitem-selected { +.#{$name}-tabitem-selected { cursor: default; border-bottom-color: #fff; } -.v-tabsheet-tabitem-selected .v-caption { +.#{$name}-tabitem-selected .v-caption { cursor: default; } -.v-tabsheet-content { +.#{$name}-content { border: 1px solid #aaa; /* Vertical borders are not supported, use v-tabsheet-tabcontainer and v-tabsheet-deco to present these borders */ border-top: none; border-bottom: none; position: relative; } -.v-tabsheet-deco { +.#{$name}-deco { height: 1px; background: #aaa; overflow: hidden; } -.v-tabsheet-hidetabs .v-tabsheet-content { +.#{$name}-hidetabs .#{$name}-content { border: none; } -.v-tabsheet-hidetabs .v-tabsheet-deco { +.#{$name}-hidetabs .#{$name}-deco { height: 0; } diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.scss b/WebContent/VAADIN/themes/base/textfield/textfield.scss index dc6a4d9aa3..bb6765a60d 100644 --- a/WebContent/VAADIN/themes/base/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/base/textfield/textfield.scss @@ -1,23 +1,23 @@ // textfield-normal.css -@mixin base-textfield { +@mixin base-textfield($name : v-textfield) { -.v-textfield { +.#{$name} { text-align: left; /* Force default alignment */ } .v-textarea { resize: none; white-space: pre-wrap; } -.v-textfield-focus, +.#{$name}-focus, .v-textarea-focus { } -input.v-textfield-prompt, +input.#{$name}-prompt, textarea.v-textarea-prompt { color: #999; font-style: italic; } -input.v-textfield-readonly, +input.#{$name}-readonly, textarea.v-textarea-readonly { background: transparent; border: none; @@ -27,20 +27,20 @@ input.v-disabled, textarea.v-disabled { resize: none; } -input.v-textfield-readonly:focus, +input.#{$name}-readonly:focus, textarea.v-textarea-readonly:focus { outline: none; } /* Disabled by default .v-textarea-error, -.v-textfield-error, +.#{$name}-error, .v-richtextarea-error iframe.gwt-RichTextArea { background: #FFE0E0; } */ /* Disabled by default .v-textarea-required, -.v-textfield-required, +.#{$name}-required, .v-richtextarea-required iframe.gwt-RichTextArea { background: #FFE0E0; } diff --git a/WebContent/VAADIN/themes/base/tree/tree.scss b/WebContent/VAADIN/themes/base/tree/tree.scss index 2e34053ad5..2eb2c5908b 100644 --- a/WebContent/VAADIN/themes/base/tree/tree.scss +++ b/WebContent/VAADIN/themes/base/tree/tree.scss @@ -1,62 +1,62 @@ -@mixin base-tree { +@mixin base-tree($name : v-tree) { // tree-default.css -.v-tree { +.#{$name} { text-align: left; /* Force default alignment */ overflow: hidden; padding: 1px 0; outline: none; } -.v-tree-node { +.#{$name}-node { background: transparent url(../common/img/sprites.png) no-repeat 5px -37px; padding: 1px 0; } -.v-tree-node-caption:focus { +.#{$name}-node-caption:focus { outline: none; } -div.v-tree-node-leaf { +div.#{$name}-node-leaf { background: transparent; } -.v-tree-node-expanded { +.#{$name}-node-expanded { background: transparent url(../common/img/sprites.png) no-repeat -5px -10px; } -.v-tree-node-caption { +.#{$name}-node-caption { margin-left: 1em; } -.v-tree-node span { +.#{$name}-node span { cursor: pointer; } -.v-tree-node-caption div { +.#{$name}-node-caption div { white-space: nowrap; } -.v-tree-node-caption span, -.v-tree-node-caption .v-icon { +.#{$name}-node-caption span, +.#{$name}-node-caption .v-icon { vertical-align: middle; } -.v-tree-node-selected span { +.#{$name}-node-selected span { background: #999; color: #fff; } -.v-tree-node-children { +.#{$name}-node-children { padding-left: 1em; } // Drag'n'drop styles -.v-tree .v-tree-node-drag-top { +.#{$name} .#{$name}-node-drag-top { border-top: 2px solid #1d9dff; margin-top: -1px; padding-top: 0; } -.v-tree .v-tree-node-drag-bottom { +.#{$name} .#{$name}-node-drag-bottom { border-bottom: 2px solid #1d9dff; margin-bottom: -1px; padding-bottom: 0; } -.v-tree .v-tree-node-drag-top:before, -.v-tree .v-tree-node-drag-bottom:after, -.v-tree .v-tree-node-caption-drag-center:after { +.#{$name} .#{$name}-node-drag-top:before, +.#{$name} .#{$name}-node-drag-bottom:after, +.#{$name} .#{$name}-node-caption-drag-center:after { display: block; position: absolute; @@ -65,23 +65,23 @@ div.v-tree-node-leaf { margin-top: -4px; background: transparent url(../common/img/drag-slot-dot.png); } -.v-tree .v-tree-node-drag-bottom:after { +.#{$name} .#{$name}-node-drag-bottom:after { margin-top: -2px; } -.v-tree .v-tree-node-caption-drag-center:after { +.#{$name} .#{$name}-node-caption-drag-center:after { margin-left: 14px; } -.v-ff .v-tree .v-tree-node-caption-drag-center:after, -.v-ie .v-tree .v-tree-node-caption-drag-center:after { +.v-ff .#{$name} .#{$name}-node-caption-drag-center:after, +.v-ie .#{$name} .#{$name}-node-caption-drag-center:after { margin-top: -2px; } -.v-tree .v-tree-node-drag-top { +.#{$name} .#{$name}-node-drag-top { background-position: 5px -38px; } -.v-tree .v-tree-node-drag-top.v-tree-node-expanded { +.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded { background-position: -5px -11px; } -.v-tree .v-tree-node-caption-drag-center div { +.#{$name} .#{$name}-node-caption-drag-center div { border: 2px solid #1d9dff; -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -89,51 +89,51 @@ div.v-tree-node-leaf { margin: -2px 2px -2px -2px; background-color: #bcdcff; } -.v-tree .v-tree-node-caption-drag-center div { +.#{$name} .#{$name}-node-caption-drag-center div { background-color: rgba(169,209,255,.6); } -.v-tree .v-tree-node-caption-drag-center div, -.v-tree .v-tree-node-drag-top, -.v-tree .v-tree-node-drag-bottom { +.#{$name} .#{$name}-node-caption-drag-center div, +.#{$name} .#{$name}-node-drag-top, +.#{$name} .#{$name}-node-drag-bottom { border-color: rgba(0,109,232,.6); } // tree-connectors.css -.v-tree-connectors { +.#{$name}-connectors { // Make item caption height an even number (so that the connector dots overlap nicely) - .v-tree-node-caption { + .#{$name}-node-caption { padding-top: 1px; } - .v-tree-node { + .#{$name}-node { background: transparent url(img/connector-expand.png) no-repeat 2px -52px; } - .v-tree-node-expanded { + .#{$name}-node-expanded { background: transparent url(img/connector-collapse.png) no-repeat 2px -52px; } - .v-tree-node-last { + .#{$name}-node-last { background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px; } - .v-tree-node-expanded.v-tree-node-last { + .#{$name}-node-expanded.#{$name}-node-last { background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px; } - .v-tree-node-leaf { + .#{$name}-node-leaf { background: transparent url(img/connector-leaf.png) repeat-y 2px 50%; } - .v-tree-node-leaf-last { + .#{$name}-node-leaf-last { background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%; } - .v-tree-node-children { + .#{$name}-node-children { background: transparent url(img/connector.png) repeat-y 2px 0; } - .v-tree-node-children-last { + .#{$name}-node-children-last { background: transparent; } - .v-tree-node-drag-top, - .v-tree-node-expanded.v-tree-node-drag-top { + .#{$name}-node-drag-top, + .#{$name}-node-expanded.#{$name}-node-drag-top { background-position: 2px -53px; } - .v-tree-node-drag-top.v-tree-node-leaf { + .#{$name}-node-drag-top.#{$name}-node-leaf { background-position: 2px 50%; } } diff --git a/WebContent/VAADIN/themes/base/treetable/treetable.scss b/WebContent/VAADIN/themes/base/treetable/treetable.scss index 30e6b9ccbd..dfb4628794 100644 --- a/WebContent/VAADIN/themes/base/treetable/treetable.scss +++ b/WebContent/VAADIN/themes/base/treetable/treetable.scss @@ -1,6 +1,6 @@ -@mixin base-treetable { +@mixin base-treetable($name : v-treetable) { -.v-treetable-treespacer { +.#{$name}-treespacer { display: inline-block; background: transparent; height: 10px; @@ -11,58 +11,58 @@ top: 5px; } -.v-treetable-node-closed { +.#{$name}-node-closed { background: url(../treetable/img/arrow-right.png) right top no-repeat; } -.v-treetable-node-open { +.#{$name}-node-open { background: url(../treetable/img/arrow-down.png) right top no-repeat; } -.v-treetable .v-checkbox { +.#{$name} .v-checkbox { display: inline-block; padding-bottom: 4px; } -.v-treetable .v-table-row .v-table-cell-content, -.v-treetable .v-table-row-odd .v-table-cell-content { +.#{$name} .v-table-row .v-table-cell-content, +.#{$name} .v-table-row-odd .v-table-cell-content { position: relative; z-index: 10; } -.v-treetable .v-table-cell-wrapper { +.#{$name} .v-table-cell-wrapper { position: relative; } -.v-treetable .v-table-body .v-table-table .v-table-row-animating { +.#{$name} .v-table-body .v-table-table .v-table-row-animating { zoom:1; z-index:1; } -.v-treetable .v-table-body .v-table-table .v-table-row-animating, -.v-treetable .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content { +.#{$name} .v-table-body .v-table-table .v-table-row-animating, +.#{$name} .v-table-body .v-table-table .v-table-row-animating .v-table-cell-content { background:transparent; } -.v-treetable-animation-clone { +.#{$name}-animation-clone { border-spacing: 0; zoom:1; } -div.v-treetable-animation-clone-wrapper { +div.#{$name}-animation-clone-wrapper { position: absolute; z-index: 2; background-color:#fff; } -div.v-treetable-animation-clone-wrapper table.v-treetable-animation-clone { +div.#{$name}-animation-clone-wrapper table.#{$name}-animation-clone { background-color:#fff; } -div table.v-treetable-animation-clone tr.v-table-row, -div table.v-treetable-animation-clone tr.v-table-row-odd, -div table.v-treetable-animation-clone tr.v-table-row td.v-table-cell-content, -div table.v-treetable-animation-clone tr.v-table-row-odd td.v-table-cell-content { +div table.#{$name}-animation-clone tr.v-table-row, +div table.#{$name}-animation-clone tr.v-table-row-odd, +div table.#{$name}-animation-clone tr.v-table-row td.v-table-cell-content, +div table.#{$name}-animation-clone tr.v-table-row-odd td.v-table-cell-content { visibility: visible; } diff --git a/WebContent/VAADIN/themes/base/upload/upload.scss b/WebContent/VAADIN/themes/base/upload/upload.scss index e5d94ce678..a992f95f06 100644 --- a/WebContent/VAADIN/themes/base/upload/upload.scss +++ b/WebContent/VAADIN/themes/base/upload/upload.scss @@ -1,22 +1,22 @@ -@mixin base-upload { +@mixin base-upload($name : v-upload) { -.v-upload { +.#{$name} { white-space: nowrap; } -.v-upload-immediate { +.#{$name}-immediate { position: relative; margin: 0; overflow: hidden; } -.v-ff .v-upload-immediate, -.v-op .v-upload-immediate { +.v-ff .#{$name}-immediate, +.v-op .#{$name}-immediate { display: inline-block; } -.v-upload-immediate input { +.#{$name}-immediate input { opacity: 0; filter: alpha(opacity=0); z-index: 2; @@ -28,7 +28,7 @@ background: transparent; } -.v-upload-immediate button { +.#{$name}-immediate button { position: relative; left: 0; top: 0; diff --git a/WebContent/VAADIN/themes/base/widget/widget.scss b/WebContent/VAADIN/themes/base/widget/widget.scss index 215c276142..a632e20d09 100644 --- a/WebContent/VAADIN/themes/base/widget/widget.scss +++ b/WebContent/VAADIN/themes/base/widget/widget.scss @@ -1,6 +1,6 @@ -@mixin base-widget { +@mixin base-widget($name : v-widget) { -.v-widget { +.#{$name} { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; diff --git a/WebContent/VAADIN/themes/base/window/window.scss b/WebContent/VAADIN/themes/base/window/window.scss index 33e54b046f..486906ea6d 100644 --- a/WebContent/VAADIN/themes/base/window/window.scss +++ b/WebContent/VAADIN/themes/base/window/window.scss @@ -1,29 +1,29 @@ -@mixin base-window { +@mixin base-window($name : v-window) { -.v-window { +.#{$name} { background: #fff; } -.v-window-contents { +.#{$name}-contents { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-window.v-has-width > div.popupContent, -.v-window.v-has-width .v-window-wrap, -.v-window.v-has-width .v-window-contents, -.v-window.v-has-width .v-window-contents > div { +.#{$name}.v-has-width > div.popupContent, +.#{$name}.v-has-width .#{$name}-wrap, +.#{$name}.v-has-width .#{$name}-contents, +.#{$name}.v-has-width .#{$name}-contents > div { width: 100%; } -.v-window.v-has-height > div.popupContent, -.v-window.v-has-height .v-window-wrap, -.v-window.v-has-height .v-window-contents, -.v-window.v-has-height .v-window-contents > div { +.#{$name}.v-has-height > div.popupContent, +.#{$name}.v-has-height .#{$name}-wrap, +.#{$name}.v-has-height .#{$name}-contents, +.#{$name}.v-has-height .#{$name}-contents > div { height: 100%; } -.v-window-outerheader { +.#{$name}-outerheader { padding: 0.3em 1em; height: 1.6em; position: relative; @@ -32,35 +32,35 @@ box-sizing: border-box; } -.v-window-outerheader, -.v-window-draggingCurtain { +.#{$name}-outerheader, +.#{$name}-draggingCurtain { cursor: move; } -.v-window-header { +.#{$name}-header { font-weight: bold; } /* A more specific selector to make sure padding isn't so easily overridden */ -div.v-window-header { +div.#{$name}-header { white-space: nowrap; text-overflow: ellipsis; -ms-text-overflow: ellipsis; overflow: hidden; padding: 0; } -.v-window-header .v-icon { +.#{$name}-header .v-icon { vertical-align: middle; /* This has to be 'middle', not 'bottom', to allow larger icons than 16px */ } -.v-window-contents > div { +.#{$name}-contents > div { outline: none; } -.v-window-footer { +.#{$name}-footer { overflow: hidden; zoom: 1; height: 10px; position: relative; cursor: move; } -.v-window-resizebox { +.#{$name}-resizebox { width: 10px; height: 10px; background: #ddd; @@ -69,19 +69,19 @@ div.v-window-header { right: 0; } -.v-window-resizebox, -.v-window-resizingCurtain { +.#{$name}-resizebox, +.#{$name}-resizingCurtain { cursor: se-resize; } -.v-window div.v-window-footer-noresize { +.#{$name} div.#{$name}-footer-noresize { height: 0; } -.v-window-resizebox-disabled { +.#{$name}-resizebox-disabled { cursor: default; display: none; } -.v-window-closebox { +.#{$name}-closebox { position: absolute; top: 0; right: 0; @@ -91,7 +91,7 @@ div.v-window-header { cursor: pointer; overflow: hidden; } -.v-window-modalitycurtain { +.#{$name}-modalitycurtain { top: 0; left: 0; background: #999; diff --git a/WebContent/VAADIN/themes/chameleon/chameleon.scss b/WebContent/VAADIN/themes/chameleon/chameleon.scss index 16f95bbbb4..8a24a73cbf 100644 --- a/WebContent/VAADIN/themes/chameleon/chameleon.scss +++ b/WebContent/VAADIN/themes/chameleon/chameleon.scss @@ -1,10 +1,14 @@ -// this file just defines all chameleon mixins by importing them - -// common (mostly application or page level) parts of the theme - +@import "../base/base.scss"; @import "common/common.scss"; - -// components - can override or replace in user themes - @import "components/components.scss"; @import "compound/compound.scss"; + +@mixin chameleon { + // TODO move this? + @include base; + // TODO each + @include chameleon-app; + @include chameleon-common; + @include chameleon-components; + @include chameleon-compound; +} diff --git a/WebContent/VAADIN/themes/chameleon/styles.scss b/WebContent/VAADIN/themes/chameleon/styles.scss index ee905c17e9..de7e306e20 100644 --- a/WebContent/VAADIN/themes/chameleon/styles.scss +++ b/WebContent/VAADIN/themes/chameleon/styles.scss @@ -1,10 +1,3 @@ -@import "../base/styles.scss"; @import "chameleon.scss"; -@include chameleon-app; - -// .v-theme-chameleon { -@include chameleon-common; -@include chameleon-components; -@include chameleon-compound; -// } +@include chameleon; diff --git a/WebContent/VAADIN/themes/liferay/liferay.scss b/WebContent/VAADIN/themes/liferay/liferay.scss index 68e9efbfe2..7ec561ffc9 100644 --- a/WebContent/VAADIN/themes/liferay/liferay.scss +++ b/WebContent/VAADIN/themes/liferay/liferay.scss @@ -1,6 +1,4 @@ -// this file just defines all reindeer mixins by importing them - -// common between others for now for backwards compatibility +@import "../base/base.scss"; @import "accordion/accordion.scss"; @import "button/button.scss"; @@ -23,3 +21,29 @@ @import "textfield/textfield.scss"; @import "tree/tree.scss"; @import "window/window.scss"; + +@mixin liferay { + // TODO move? + @include base; + // TODO @each + @include liferay-accordion; + @include liferay-button; + + @include liferay-common; + @include liferay-contextmenu; + @include liferay-datefield; + @include liferay-formlayout; + @include liferay-menubar; + @include liferay-notification; + @include liferay-panel; + @include liferay-popupview; + @include liferay-progressindicator; + @include liferay-select; + @include liferay-slider; + @include liferay-splitpanel; + @include liferay-table; + @include liferay-tabsheet; + @include liferay-textfield; + @include liferay-tree; + @include liferay-window; +} diff --git a/WebContent/VAADIN/themes/liferay/styles.scss b/WebContent/VAADIN/themes/liferay/styles.scss index 78fbd62c25..030602a8b6 100644 --- a/WebContent/VAADIN/themes/liferay/styles.scss +++ b/WebContent/VAADIN/themes/liferay/styles.scss @@ -1,28 +1,3 @@ -// this file actually attaches all liferay mixins to a parent style - -@import "../base/styles.scss"; @import "liferay.scss"; -// .v-theme-liferay { - @include liferay-accordion; - @include liferay-button; - - @include liferay-common; - - @include liferay-contextmenu; - @include liferay-datefield; - @include liferay-formlayout; - @include liferay-menubar; - @include liferay-notification; - @include liferay-panel; - @include liferay-popupview; - @include liferay-progressindicator; - @include liferay-select; - @include liferay-slider; - @include liferay-splitpanel; - @include liferay-table; - @include liferay-tabsheet; - @include liferay-textfield; - @include liferay-tree; - @include liferay-window; -// } +@include liferay; diff --git a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss index c0778e68dc..5d9b4a660f 100644 --- a/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss +++ b/WebContent/VAADIN/themes/reindeer/accordion/accordion.scss @@ -1,16 +1,16 @@ -@mixin reindeer-accordion { +@mixin reindeer-accordion($name : v-accordion) { -.v-accordion { +.#{$name} { border: 1px solid #bebebe; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; overflow: hidden; } -.v-accordion-item { +.#{$name}-item { background-color: #fff; } -.v-accordion-item-caption { +.#{$name}-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; } -.v-accordion-item-caption .v-captiontext{ +.#{$name}-item-caption .v-captiontext{ vertical-align:baseline; } -.v-accordion-item-first .v-accordion-item-caption { +.#{$name}-item-first .#{$name}-item-caption { border-top: none; } -.v-accordion-item-caption .v-caption { +.#{$name}-item-caption .v-caption { padding: 3px 0 5px 10px; } -.v-ie .v-accordion-item-caption .v-caption { +.v-ie .#{$name}-item-caption .v-caption { padding: 2px 0 6px 10px; } -.v-accordion-item-open .v-accordion-item-caption { +.#{$name}-item-open .#{$name}-item-caption { background-image: url(../tabsheet/img/tabbar-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ border-bottom: 1px solid #bbb; } -.v-accordion-item-caption .v-icon { +.#{$name}-item-caption .v-icon { margin-top: -1px; } -.v-ie .v-accordion-item-caption .v-icon { +.v-ie .#{$name}-item-caption .v-icon { vertical-align: top; } /* Borderless style */ -.v-accordion-borderless { +.#{$name}-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 5bf38c4442..db39bf5677 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 { +@mixin reindeer-button-ie($name : v-nativebutton) { -.v-ie8 .v-nativebutton-link { +.v-ie8 .#{$name}-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 aebda24cd4..0d2060ddc6 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 { +@mixin reindeer-button-link-style($name : v-button) { -.v-button.v-button-link, -.v-button.v-button-link:focus, -.v-button.v-button-link:active, -.v-button-link.v-pressed, -.v-disabled.v-button.v-button-link, -.v-button.v-button-link .v-button-wrap, -.v-button.v-button-link:focus .v-button-wrap, -.v-button.v-button-link:active .v-button-wrap, -.v-button-link.v-pressed .v-button-wrap, -.v-disabled.v-button.v-button-link .v-button-wrap { +.#{$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 { background: transparent; height: auto; padding: 0; @@ -17,13 +17,12 @@ line-height: inherit; } -.v-button.v-button-link.v-disabled, -.v-button.v-button-link.v-disabled .v-button-wrap { +.#{$name}.#{$name}-link.v-disabled, +.#{$name}.#{$name}-link.v-disabled .#{$name}-wrap { cursor: default; } -.v-button-link .v-button-caption, -.v-nativebutton-link .v-nativebutton-caption { +.#{$name}-link .#{$name}-caption { line-height: inherit; font-weight: normal; color: #1b699f; @@ -31,8 +30,7 @@ text-shadow: none; } -.v-button-link:focus .v-button-caption, -.v-nativebutton-link:focus .v-nativebutton-caption { +.#{$name}-link:focus .#{$name}-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 ffb4d250d3..f4cd726412 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 { +@mixin reindeer-button-primary-style($name : v-button) { -.v-button-primary:focus { +.#{$name}-primary:focus { background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */ } -.v-button-primary:focus .v-button-wrap { +.#{$name}-primary:focus .#{$name}-wrap { background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.v-button-primary:active, -.v-button-primary.v-pressed { +.#{$name}-primary:active, +.#{$name}-primary.v-pressed { background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */ } -.v-button-primary:active .v-button-wrap, -.v-button-primary.v-pressed .v-button-wrap { +.#{$name}-primary:active .#{$name}-wrap, +.#{$name}-primary.v-pressed .#{$name}-wrap { background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.v-button-primary, -.v-disabled.v-button-primary { +.#{$name}-primary, +.v-disabled.#{$name}-primary { background-image: url(img/primary-left.png); /** sprite-ref: buttons */ } -.v-button-primary .v-button-wrap, -.v-disabled.v-button-primary .v-button-wrap { +.#{$name}-primary .#{$name}-wrap, +.v-disabled.#{$name}-primary .#{$name}-wrap { background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */ } @@ -34,32 +34,32 @@ /* Black style */ -.black .v-button-primary:focus { +.black .#{$name}-primary:focus { background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */ } -.black .v-button-primary:focus .v-button-wrap { +.black .#{$name}-primary:focus .#{$name}-wrap { background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ color: #eaf4fb; } -.black .v-button-primary:active, -.black .v-button-primary.v-pressed { +.black .#{$name}-primary:active, +.black .#{$name}-primary.v-pressed { background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */ } -.black .v-button-primary:active .v-button-wrap, -.black .v-button-primary.v-pressed .v-button-wrap { +.black .#{$name}-primary:active .#{$name}-wrap, +.black .#{$name}-primary.v-pressed .#{$name}-wrap { background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .v-button-primary, -.black .v-disabled.v-button-primary { +.black .#{$name}-primary, +.black .v-disabled.#{$name}-primary { background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */ } -.black .v-button-primary .v-button-wrap, -.black .v-disabled.v-button-primary .v-button-wrap { +.black .#{$name}-primary .#{$name}-wrap, +.black .v-disabled.#{$name}-primary .#{$name}-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 0ec33e330c..b141156ac8 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 { +@mixin reindeer-button-small-style($name : v-button) { -.v-button-small:focus { +.#{$name}-small:focus { background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */ } -.v-button-small:focus .v-button-wrap { +.#{$name}-small:focus .#{$name}-wrap { background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.v-button-small:active, -.v-button-small.v-pressed { +.#{$name}-small:active, +.#{$name}-small.v-pressed { background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */ } -.v-button-small:active .v-button-wrap, -.v-button-small.v-pressed .v-button-wrap { +.#{$name}-small:active .#{$name}-wrap, +.#{$name}-small.v-pressed .#{$name}-wrap { background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ } -.v-button-small, -.v-disabled.v-button-small { +.#{$name}-small, +.v-disabled.#{$name}-small { background-image: url(img/small-left.png); /** sprite-ref: buttons */ height: 20px; } -.v-button-small .v-button-wrap, -.v-disabled.v-button-small .v-button-wrap { +.#{$name}-small .#{$name}-wrap, +.v-disabled.#{$name}-small .#{$name}-wrap { background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */ height: 19px; padding: 1px 14px 0 8px; } -.v-button-small .v-button-caption { +.#{$name}-small .#{$name}-caption { font-weight: normal; } @@ -40,31 +40,31 @@ /* Black style */ -.black .v-button-small:focus { +.black .#{$name}-small:focus { background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */ } -.black .v-button-small:focus .v-button-wrap { +.black .#{$name}-small:focus .#{$name}-wrap { background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .v-button-small:active, -.black .v-button-small.v-pressed { +.black .#{$name}-small:active, +.black .#{$name}-small.v-pressed { background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */ } -.black .v-button-small:active .v-button-wrap, -.black .v-button-small.v-pressed .v-button-wrap { +.black .#{$name}-small:active .#{$name}-wrap, +.black .#{$name}-small.v-pressed .#{$name}-wrap { background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .v-button-small, -.black .v-disabled.v-button-small { +.black .#{$name}-small, +.black .v-disabled.#{$name}-small { background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */ } -.black .v-button-small .v-button-wrap, -.black .v-disabled.v-button-small .v-button-wrap { +.black .#{$name}-small .#{$name}-wrap, +.black .v-disabled.#{$name}-small .#{$name}-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 4df09bc1bd..f950060d4a 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 { +@mixin reindeer-button-standard($name : v-button) { -.v-button:focus { +.#{$name}:focus { background-image: url(img/left-focus.png); /** sprite-ref: buttons */ outline: none; } -.v-button:focus .v-button-wrap { +.#{$name}:focus .#{$name}-wrap { background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ outline: none; } -.v-button:active, -.v-button.v-pressed { +.#{$name}:active, +.#{$name}.v-pressed { background-image: url(img/left-pressed.png); /** sprite-ref: buttons */ outline: none; } -.v-button:active .v-button-wrap, -.v-button.v-pressed .v-button-wrap { +.#{$name}:active .#{$name}-wrap, +.#{$name}.v-pressed .#{$name}-wrap { background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ outline: none; } -.v-button, -.v-disabled.v-button { +.#{$name}, +.v-disabled.#{$name} { height: 26px; padding: 0 0 0 6px; background-color: transparent; @@ -33,8 +33,8 @@ cursor: default; } -.v-button-wrap, -.v-disabled.v-button .v-button-wrap { +.#{$name}-wrap, +.v-disabled.#{$name} .#{$name}-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 */ } -.v-button-caption { +.#{$name}-caption { color: #222; text-shadow: #fff 0 1px 0; font-weight: bold; @@ -58,35 +58,35 @@ /************************** * Black style **************************/ -.black .v-button:focus { +.black .#{$name}:focus { background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */ } -.black .v-button:focus .v-button-wrap { +.black .#{$name}:focus .#{$name}-wrap { background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .v-button:active, -.black .v-button.v-pressed { +.black .#{$name}:active, +.black .#{$name}.v-pressed { background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */ } -.black .v-button:active .v-button-wrap, -.black .v-button.v-pressed .v-button-wrap { +.black .#{$name}:active .#{$name}-wrap, +.black .#{$name}.v-pressed .#{$name}-wrap { background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .v-button, -.black .v-disabled.v-button { +.black .#{$name}, +.black .v-disabled.#{$name} { background-image: url(img/black/left.png); /** sprite-ref: black-buttons */ } -.black .v-button-wrap, -.black .v-disabled.v-button .v-button-wrap { +.black .#{$name}-wrap, +.black .v-disabled.#{$name} .#{$name}-wrap { background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } -.black .v-button-caption { +.black .#{$name}-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 34a4efda04..7b61d1b213 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button.scss @@ -6,17 +6,10 @@ @import "button-small-style.scss"; @import "button-link-style.scss"; -/* Browser-specific corrections to the standard implementation */ -@import "button-ie.scss"; - -@mixin reindeer-button { - +@mixin reindeer-button($name : v-button) { + // TODO use $exclude @include reindeer-button-standard; @include reindeer-button-primary-style; @include reindeer-button-small-style; @include reindeer-button-link-style; - - /* Browser-specific corrections to the standard implementation */ - @include reindeer-button-ie; - } diff --git a/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss b/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss new file mode 100644 index 0000000000..bd6ca35627 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/nativebutton.scss @@ -0,0 +1,25 @@ +/* Browser-specific corrections to the standard implementation */ +@import "button-ie.scss"; + +@mixin reindeer-nativebutton-link($name : v-nativebutton) { + +.#{$name}-link .#{$name}-caption { + line-height: inherit; + font-weight: normal; + color: #1b699f; + font-size: 12px; + text-shadow: none; + } + +.#{$name}-link:focus .#{$name}-caption { + outline: 1px dotted #1b699f; + } + +} + +@mixin reindeer-nativebutton($name : v-nativebutton) { + @include reindeer-nativebutton-link($name); + + /* Browser-specific corrections to the standard implementation */ + @include reindeer-button-ie($name); +}
\ 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 17b9d42cdb..c890f259ad 100644 --- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss @@ -1,30 +1,30 @@ -@mixin reindeer-datefield { +@mixin reindeer-datefield($name : v-datefield) { -.v-datefield { +.#{$name} { overflow: hidden; } input.v-textfield-readonly:focus{ background-color: transparent; } -.v-datefield-calendarpanel { +.#{$name}-calendarpanel { border-collapse: collapse; margin: 0; padding: 0; height: auto !important; } -.v-datefield-year .v-datefield-calendarpanel-prevmonth, -.v-datefield-year .v-datefield-calendarpanel-nextmonth { +.#{$name}-year .#{$name}-calendarpanel-prevmonth, +.#{$name}-year .#{$name}-calendarpanel-nextmonth { display: none; } -.v-datefield-calendarpanel td { +.#{$name}-calendarpanel td { vertical-align: top; } -td.v-datefield-calendarpanel-month { +td.#{$name}-calendarpanel-month { height: 23px; background-repeat: repeat-x; background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -span.v-datefield-calendarpanel-month { +span.#{$name}-calendarpanel-month { display: block; text-align: center; height: 16px; @@ -35,36 +35,36 @@ span.v-datefield-calendarpanel-month { overflow: hidden; margin-top: 1px; } -.v-datefield-year .v-datefield-calendarpanel-month { +.#{$name}-year .#{$name}-calendarpanel-month { width: 35px; } -.v-datefield-month .v-datefield-calendarpanel-month, -.v-datefield-day .v-datefield-calendarpanel-month, -.v-datefield-full .v-datefield-calendarpanel-month { +.#{$name}-month .#{$name}-calendarpanel-month, +.#{$name}-day .#{$name}-calendarpanel-month, +.#{$name}-full .#{$name}-calendarpanel-month { width: 124px; } -.v-datefield-month, -.v-datefield-day, -.v-datefield-full { +.#{$name}-month, +.#{$name}-day, +.#{$name}-full { min-width: 240px; } -.v-datefield-popupcalendar { +.#{$name}-popupcalendar { min-width: 0; padding-right: 24px; } -.v-datefield-year .v-datefield-calendarpanel { +.#{$name}-year .#{$name}-calendarpanel { width: 100px; } -td.v-datefield-calendarpanel-prevyear { +td.#{$name}-calendarpanel-prevyear { text-align: right; } -td.v-datefield-calendarpanel-nextyear { +td.#{$name}-calendarpanel-nextyear { text-align: left; } -.v-datefield-calendarpanel-prevyear button, -.v-datefield-calendarpanel-nextyear button, -.v-datefield-calendarpanel-prevmonth button, -.v-datefield-calendarpanel-nextmonth button { +.#{$name}-calendarpanel-prevyear button, +.#{$name}-calendarpanel-nextyear button, +.#{$name}-calendarpanel-prevmonth button, +.#{$name}-calendarpanel-nextmonth button { width: 24px; height: 23px; border: none; @@ -79,33 +79,33 @@ td.v-datefield-calendarpanel-nextyear { -moz-border-radius: 0; border-radius: 0; } -.v-ie .v-datefield-calendarpanel-prevyear button, -.v-ie .v-datefield-calendarpanel-nextyear button, -.v-ie .v-datefield-calendarpanel-prevmonth button, -.v-ie .v-datefield-calendarpanel-nextmonth button { +.v-ie .#{$name}-calendarpanel-prevyear button, +.v-ie .#{$name}-calendarpanel-nextyear button, +.v-ie .#{$name}-calendarpanel-prevmonth button, +.v-ie .#{$name}-calendarpanel-nextmonth button { text-indent: 0; font-size: 1px; } -.v-datefield-calendarpanel-nextyear button { +.#{$name}-calendarpanel-nextyear button { background-position: left top; background-image: url(img/year-next.png); /** sprite-ref: verticals */ } -.v-datefield-calendarpanel-prevyear button:active, -.v-ie .v-datefield-calendarpanel-prevyear button.v-pressed { +.#{$name}-calendarpanel-prevyear button:active, +.v-ie .#{$name}-calendarpanel-prevyear button.v-pressed { background-image: url(img/year-prev-pressed.png); /** sprite-ref: verticals */ } -.v-datefield-calendarpanel-nextyear button:active, -.v-ie .v-datefield-calendarpanel-nextyear button.v-pressed { +.#{$name}-calendarpanel-nextyear button:active, +.v-ie .#{$name}-calendarpanel-nextyear button.v-pressed { background-image: url(img/year-next-pressed.png); /** sprite-ref: verticals */ } -.v-datefield-calendarpanel-prevmonth, -.v-datefield-calendarpanel-nextmonth { +.#{$name}-calendarpanel-prevmonth, +.#{$name}-calendarpanel-nextmonth { width: 24px; background-repeat: repeat-x; background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.v-datefield-calendarpanel-prevmonth button, -.v-datefield-calendarpanel-nextmonth button { +.#{$name}-calendarpanel-prevmonth button, +.#{$name}-calendarpanel-nextmonth button { width: 100%; height: 21px; border-left: 1px solid #efefef; @@ -116,36 +116,36 @@ td.v-datefield-calendarpanel-nextyear { min-width: 24px; margin-top: 1px; } -.v-ie .v-datefield-calendarpanel-prevmonth button, -.v-ie .v-datefield-calendarpanel-nextmonth button { +.v-ie .#{$name}-calendarpanel-prevmonth button, +.v-ie .#{$name}-calendarpanel-nextmonth button { border: none; } -.v-datefield-calendarpanel-nextmonth button { +.#{$name}-calendarpanel-nextmonth button { background-image: url(img/month-next.png); /** sprite-ref: verticals; sprite-alignment: center */ } -.v-datefield-calendarpanel-prevmonth button:active, -.v-ie .v-datefield-calendarpanel-prevmonth button.v-pressed { +.#{$name}-calendarpanel-prevmonth button:active, +.v-ie .#{$name}-calendarpanel-prevmonth button.v-pressed { background-position: center top; background-image: url(img/month-prev-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */ } -.v-datefield-calendarpanel-nextmonth button:active, -.v-ie .v-datefield-calendarpanel-nextmonth button.v-pressed { +.#{$name}-calendarpanel-nextmonth button:active, +.v-ie .#{$name}-calendarpanel-nextmonth button.v-pressed { background-position: center top; background-image: url(img/month-next-pressed.png); /** sprite-ref: verticals; sprite-alignment: center */ } -.v-datefield-calendarpanel-body, -.v-datefield-calendarpanel-time { +.#{$name}-calendarpanel-body, +.#{$name}-calendarpanel-time { text-align: center; vertical-align: top; } -.v-datefield-calendarpanel-body table { +.#{$name}-calendarpanel-body table { border-collapse: collapse; margin: 0; padding: 0; width: 220px; margin: 0 auto; } -.v-datefield-calendarpanel-weekdays td { +.#{$name}-calendarpanel-weekdays td { width: 14.2%; overflow: hidden; background-repeat: repeat-x; @@ -157,57 +157,57 @@ td.v-datefield-calendarpanel-nextyear { text-shadow: #3b4651 0 -1px 0; vertical-align: top; } -.v-datefield-calendarpanel-weeknumbers td { +.#{$name}-calendarpanel-weeknumbers td { width: 12.4%; } -.v-datefield-calendarpanel-weekdays strong { +.#{$name}-calendarpanel-weekdays strong { display: block; text-align: right; padding: 1px 5px 0 0; height: 14px; border-top: 1px solid #596775; } -.v-datefield-calendarpanel-weekdays .v-first { +.#{$name}-calendarpanel-weekdays .v-first { background-repeat: no-repeat; background-image: url(img/weekday-first.png); /** sprite-ref: verticals; sprite-margin-bottom: 3px */ } -.v-datefield-calendarpanel-weekdays .v-last { +.#{$name}-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 .v-datefield-calendarpanel-weekdays td { +.v-ie .#{$name}-calendarpanel-weekdays td { background: url(img/weekday-bg.png) repeat-x; background-position: left top; } -.v-ie .v-datefield-calendarpanel .v-first { +.v-ie .#{$name}-calendarpanel .v-first { background: url(img/weekday-first.png) no-repeat; } -.v-ie .v-datefield-calendarpanel .v-last { +.v-ie .#{$name}-calendarpanel .v-last { background: url(img/weekday-last.png) no-repeat right top; } -.v-datefield-calendarpanel-body td { +.#{$name}-calendarpanel-body td { text-align: right; height: 19px; } -.v-datefield-calendarpanel-day, -.v-datefield-calendarpanel-weeknumber, -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day, +.#{$name}-calendarpanel-weeknumber, +.#{$name}-calendarpanel-day-today { padding: 2px 5px 2px 0; display: block; margin: 1px 0 0 5px; } -.v-datefield-calendarpanel-weeknumber { +.#{$name}-calendarpanel-weeknumber { margin: 0; padding-top: 4px; padding-bottom: 3px; } -.v-datefield-calendarpanel-day-today { +.#{$name}-calendarpanel-day-today { color: #4095d1; border: none; } -.v-datefield-calendarpanel-day-selected { +.#{$name}-calendarpanel-day-selected { background: #507ba3; color: #fff; text-shadow: #3b5b79 0 1px 0; @@ -215,37 +215,37 @@ td.v-datefield-calendarpanel-nextyear { -webkit-border-radius: 2px; -moz-border-radius: 2px; } -.v-datefield-calendarpanel-time select { +.#{$name}-calendarpanel-time select { padding: 0; font-size: 11px; } -.v-datefield-popup { +.#{$name}-popup { background: #f8f8f9; padding: 8px 4px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } -.v-sa .v-datefield-popup, -.v-op .v-datefield-popup { +.v-sa .#{$name}-popup, +.v-op .#{$name}-popup { background: rgba(255,255,255,.95); } -.v-has-width > input.v-datefield-textfield { +.v-has-width > input.#{$name}-textfield { width: 100%; } -.v-datefield-year > .v-datefield-textfield { +.#{$name}-year > .#{$name}-textfield { width: 4.5em; } -.v-datefield-month > .v-datefield-textfield { +.#{$name}-month > .#{$name}-textfield { width: 5.5em; } -.v-datefield-day > .v-datefield-textfield { +.#{$name}-day > .#{$name}-textfield { width: 6em; } -.v-datefield-full >.v-datefield-textfield { +.#{$name}-full >.#{$name}-textfield { width: 12.5em; } -.v-datefield-popupcalendar input.v-datefield-textfield { +.#{$name}-popupcalendar input.#{$name}-textfield { border-right-width: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; @@ -256,17 +256,17 @@ td.v-datefield-calendarpanel-nextyear { -moz-box-sizing: border-box; box-sizing: border-box; } -.v-datefield.v-readonly input.v-datefield-textfield { +.#{$name}.v-readonly input.#{$name}-textfield { border-right-width: 1px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } -.v-datefield-prompt .v-datefield-textfield { +.#{$name}-prompt .#{$name}-textfield { color: #999; font-style: normal; } -.v-datefield-popupcalendar .v-datefield-button { +.#{$name}-popupcalendar .#{$name}-button { width: 24px; margin-right: -24px; height: 23px; @@ -279,15 +279,15 @@ td.v-datefield-calendarpanel-nextyear { -moz-border-radius: 0; border-radius: 0; } -.v-datefield-popupcalendar .v-datefield-button:active { +.#{$name}-popupcalendar .#{$name}-button:active { background-image: url(img/popup-btn-pressed.png); /** sprite-ref: verticals */ } /* over black background */ -.black .v-datefield-popupcalendar .v-datefield-button { +.black .#{$name}-popupcalendar .#{$name}-button { background-image: url(img/popup-btn-black.png); /** sprite-ref: black-verticals */ } -.black .v-datefield-popupcalendar .v-datefield-button:active { +.black .#{$name}-popupcalendar .#{$name}-button:active { background-image: url(img/popup-btn-black-pressed.png); /** sprite-ref: black-verticals */ } @@ -296,11 +296,11 @@ td.v-datefield-calendarpanel-nextyear { * on black background */ -.black td.v-datefield-calendarpanel-month { +.black td.#{$name}-calendarpanel-month { background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */ height: 21px; } -.black span.v-datefield-calendarpanel-month { +.black span.#{$name}-calendarpanel-month { border-left: 1px solid #333638; border-right: 1px solid #232527; color: #c9ccce; @@ -308,65 +308,65 @@ td.v-datefield-calendarpanel-nextyear { padding: 4px 10px 1px 10px; margin-top: 0; } -.black .v-datefield-calendarpanel-prevyear button, -.black .v-datefield-calendarpanel-nextyear button, -.black .v-datefield-calendarpanel-prevmonth button, -.black .v-datefield-calendarpanel-nextmonth button { +.black .#{$name}-calendarpanel-prevyear button, +.black .#{$name}-calendarpanel-nextyear button, +.black .#{$name}-calendarpanel-prevmonth button, +.black .#{$name}-calendarpanel-nextmonth button { background-image: url(img/year-prev-black.png); /** sprite-ref: black-verticals */ height: 21px; } -.black .v-datefield-calendarpanel-nextyear button { +.black .#{$name}-calendarpanel-nextyear button { background-image: url(img/year-next-black.png); /** sprite-ref: black-verticals */ } -.black .v-datefield-calendarpanel-prevyear button:active, -.v-ie .black .v-datefield-calendarpanel-prevyear button.v-pressed { +.black .#{$name}-calendarpanel-prevyear button:active, +.v-ie .black .#{$name}-calendarpanel-prevyear button.v-pressed { background-image: url(img/year-prev-black-pressed.png); /** sprite-ref: black-verticals */ } -.black .v-datefield-calendarpanel-nextyear button:active, -.v-ie .black .v-datefield-calendarpanel-nextyear button.v-pressed { +.black .#{$name}-calendarpanel-nextyear button:active, +.v-ie .black .#{$name}-calendarpanel-nextyear button.v-pressed { background-image: url(img/year-next-black-pressed.png); /** sprite-ref: black-verticals */ } -.black .v-datefield-calendarpanel-prevmonth, -.black .v-datefield-calendarpanel-nextmonth { +.black .#{$name}-calendarpanel-prevmonth, +.black .#{$name}-calendarpanel-nextmonth { background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */ } -.black .v-datefield-calendarpanel-prevmonth button, -.black .v-datefield-calendarpanel-nextmonth button { +.black .#{$name}-calendarpanel-prevmonth button, +.black .#{$name}-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 .v-datefield-calendarpanel-nextmonth button { +.black .#{$name}-calendarpanel-nextmonth button { background-image: url(img/month-next-black.png); /** sprite-ref: black-verticals; sprite-alignment: center */ } -.black .v-datefield-calendarpanel-prevmonth button:active, -.v-ie .black .v-datefield-calendarpanel-prevmonth button.v-pressed { +.black .#{$name}-calendarpanel-prevmonth button:active, +.v-ie .black .#{$name}-calendarpanel-prevmonth button.v-pressed { background-image: url(img/month-prev-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */ } -.black .v-datefield-calendarpanel-nextmonth button:active, -.v-ie .black .v-datefield-calendarpanel-nextmonth button.v-pressed { +.black .#{$name}-calendarpanel-nextmonth button:active, +.v-ie .black .#{$name}-calendarpanel-nextmonth button.v-pressed { background-image: url(img/month-next-black-pressed.png); /** sprite-ref: black-verticals; sprite-alignment: center */ } -.v-ie .black .v-datefield-calendarpanel-prevmonth button, -.v-ie .black .v-datefield-calendarpanel-nextmonth button { +.v-ie .black .#{$name}-calendarpanel-prevmonth button, +.v-ie .black .#{$name}-calendarpanel-nextmonth button { border: none; } -.black .v-datefield-calendarpanel-weekdays td { +.black .#{$name}-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 .v-datefield-calendarpanel-weekdays strong { +.black .#{$name}-calendarpanel-weekdays strong { border-top-color: #1b1c1d; } -.black .v-datefield-calendarpanel .v-first { +.black .#{$name}-calendarpanel .v-first { background-image: url(img/weekday-first-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 3px */ } -.black .v-datefield-calendarpanel .v-last { +.black .#{$name}-calendarpanel .v-last { background-image: url(img/weekday-last-black.png); /** sprite-ref: black-verticals; sprite-alignment: right */ } -.black .v-datefield-prompt .v-datefield-textfield { +.black .#{$name}-prompt .#{$name}-textfield { color: #5f6366; } diff --git a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss index e73340fd3b..cecc439b09 100644 --- a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss +++ b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss @@ -1,36 +1,36 @@ -@mixin reindeer-formlayout { +@mixin reindeer-formlayout($name : v-formlayout) { -.v-formlayout-errorcell { +.#{$name}-errorcell { width: 13px; } -.v-formlayout-cell .v-errorindicator { +.#{$name}-cell .v-errorindicator { width: 13px; height: 16px; background: transparent url(../common/icons/error.png) no-repeat 50%; } -.v-formlayout-captioncell { +.#{$name}-captioncell { text-align: right; white-space: nowrap; } -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-captioncell, -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-contentcell, -.v-formlayout-spacing > tbody > .v-formlayout-row > .v-formlayout-errorcell { +.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-captioncell, +.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-contentcell, +.#{$name}-spacing > tbody > .#{$name}-row > .#{$name}-errorcell { padding-top: 8px; } -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-captioncell, -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-contentcell, -.v-formlayout-margin-top > tbody > .v-formlayout-firstrow > .v-formlayout-errorcell { +.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-captioncell, +.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-contentcell, +.#{$name}-margin-top > tbody > .#{$name}-firstrow > .#{$name}-errorcell { padding-top: 15px; } -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-captioncell, -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-contentcell, -.v-formlayout-margin-bottom > tbody > .v-formlayout-lastrow > .v-formlayout-errorcell { +.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-captioncell, +.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-contentcell, +.#{$name}-margin-bottom > tbody > .#{$name}-lastrow > .#{$name}-errorcell { padding-bottom: 15px; } -.v-formlayout-margin-left > tbody > .v-formlayout-row > .v-formlayout-captioncell { +.#{$name}-margin-left > tbody > .#{$name}-row > .#{$name}-captioncell { padding-left: 18px; } -.v-formlayout-margin-right > tbody > .v-formlayout-row > .v-formlayout-contentcell { +.#{$name}-margin-right > tbody > .#{$name}-row > .#{$name}-contentcell { padding-right: 18px; } /* form */ diff --git a/WebContent/VAADIN/themes/reindeer/label/label.scss b/WebContent/VAADIN/themes/reindeer/label/label.scss index a8418718e0..24337e2ff5 100644 --- a/WebContent/VAADIN/themes/reindeer/label/label.scss +++ b/WebContent/VAADIN/themes/reindeer/label/label.scss @@ -1,6 +1,6 @@ -@mixin reindeer-label { +@mixin reindeer-label($name : v-label) { -.v-label { +.#{$name} { line-height: 18px; } @@ -12,27 +12,27 @@ color: #C9CCCE; text-shadow: 0 0 1px #000; } -.black .v-label-h1, -.black .v-label-h2, +.black .#{$name}-h1, +.black .#{$name}-h2, .black .v-caption-h1, .black .v-caption-h2, -.white .black .v-label-h1, -.white .black .v-label-h2, +.white .black .#{$name}-h1, +.white .black .#{$name}-h2, .white .black .v-caption-h1, .white .black .v-caption-h2, -.blue .black .v-label-h1, -.blue .black .v-label-h2, +.blue .black .#{$name}-h1, +.blue .black .#{$name}-h2, .blue .black .v-caption-h1, .blue .black .v-caption-h2 { color: #fff; text-shadow: rgba(0,0,0,.8) 0 2px 2px; } -.black .v-label-light, -.white .black .v-label-light { +.black .#{$name}-light, +.white .black .#{$name}-light { color: #72787c; } -.black .v-label hr, -.white .black .v-label hr { +.black .#{$name} hr, +.white .black .#{$name} hr { background: #0c0d0e; color: #0c0d0e; border-bottom-color: #292b2e; @@ -48,23 +48,23 @@ color: #222; text-shadow: none; } -.blue .v-label-h1, -.blue .v-label-h2, +.blue .#{$name}-h1, +.blue .#{$name}-h2, .blue .v-caption-h1, .blue .v-caption-h2, -.white .blue .v-label-h1, -.white .blue .v-label-h2, +.white .blue .#{$name}-h1, +.white .blue .#{$name}-h2, .white .blue .v-caption-h1, .white .blue .v-caption-h2 { color: #fff; text-shadow: rgba(0,0,0,.3) 0 1px 1px; } -.blue .v-label-light, -.white .blue .v-label-light { +.blue .#{$name}-light, +.white .blue .#{$name}-light { color: #6e7c83; } -.blue .v-label hr, -.white .blue .v-label hr { +.blue .#{$name} hr, +.white .blue .#{$name} hr { background: #a3bcc9; color: #a3bcc9; border-bottom-color: #cfe2eb; @@ -73,12 +73,12 @@ /********************** * Default & white styles **********************/ -.v-label-h1, -.v-label-h2, +.#{$name}-h1, +.#{$name}-h2, .v-caption-h1, .v-caption-h2, -.white .v-label-h1, -.white .v-label-h2, +.white .#{$name}-h1, +.white .#{$name}-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; } -.v-label-h2, +.#{$name}-h2, .v-caption-h2, -.white .v-label-h2, +.white .#{$name}-h2, .white .v-caption-h2 { font-size: 16px; line-height: 22px; } -.v-label-light, -.white .v-label-light { +.#{$name}-light, +.white .#{$name}-light { font-size: 11px; line-height: 13px; color: #707070; } -.v-label hr, -.white .v-label hr { +.#{$name} hr, +.white .#{$name} hr { height: 2px; overflow: hidden; background: #dcdcdc; @@ -113,13 +113,13 @@ border-bottom: 1px solid #fff; } -.v-sa .v-label hr, -.v-ie8 .v-label hr { +.v-sa .#{$name} hr, +.v-ie8 .#{$name} hr { height: 1px; } /* Labels inside Table don't need a line-height */ -.v-table .v-label { +.v-table .#{$name} { line-height: normal; } diff --git a/WebContent/VAADIN/themes/reindeer/link/link.scss b/WebContent/VAADIN/themes/reindeer/link/link.scss index 291479b2d1..99233dfe39 100644 --- a/WebContent/VAADIN/themes/reindeer/link/link.scss +++ b/WebContent/VAADIN/themes/reindeer/link/link.scss @@ -1,12 +1,12 @@ -@mixin reindeer-link { +@mixin reindeer-link($name : v-link) { -.v-link a:link span { +.#{$name} a:link span { color: #1b699f; } -.v-link a:visited span { +.#{$name} a:visited span { color: #5c7485; } -.v-link a:hover span { +.#{$name} a:hover span { color: #2483c4; } diff --git a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss index 78f4a9fa45..8d81a12a5b 100644 --- a/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss +++ b/WebContent/VAADIN/themes/reindeer/menubar/menubar.scss @@ -1,6 +1,6 @@ -@mixin reindeer-menubar { +@mixin reindeer-menubar($name : v-menubar) { -.v-menubar { +.#{$name} { 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; } -.v-menubar .v-menubar-menuitem { +.#{$name} .#{$name}-menuitem { padding: 3px 8px; height: 17px; line-height: 16px; } -.v-menubar .v-menubar-menuitem:hover { +.#{$name} .#{$name}-menuitem:hover { color: #fff; } -.v-menubar-submenu { +.#{$name}-submenu { background: #f8f8f9; border: none; border-radius: 3px; @@ -26,50 +26,50 @@ overflow: hidden; padding: 4px 0; } -.v-menubar-submenu .v-menubar-menuitem { +.#{$name}-submenu .#{$name}-menuitem { padding: 1px 26px 1px 10px; line-height: 16px; } -.v-menubar-submenu .v-menubar-menuitem-caption .v-icon { +.#{$name}-submenu .#{$name}-menuitem-caption .v-icon { vertical-align: middle; } -.v-menubar .v-menubar-menuitem-selected, -.v-menubar-submenu .v-menubar-menuitem-selected { +.#{$name} .#{$name}-menuitem-selected, +.#{$name}-submenu .#{$name}-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; } -.v-menubar .v-menubar-menuitem-selected { +.#{$name} .#{$name}-menuitem-selected { background-image: url(img/menu-sel-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */ } -.v-menubar-submenu .v-menubar-submenu-indicator { +.#{$name}-submenu .#{$name}-submenu-indicator { background: transparent url(img/submenu-icon.png) no-repeat right 70%; width: 26px; height: 16px; text-indent: -9999px; } -.v-menubar-submenu .v-menubar-menuitem-selected .v-menubar-submenu-indicator { +.#{$name}-submenu .#{$name}-menuitem-selected .#{$name}-submenu-indicator { background-image: url(img/submenu-icon-hover.png); } /* Checkboxes for checkable/checked menu items */ -.v-menubar-submenu-check-column .v-menubar-menuitem { +.#{$name}-submenu-check-column .#{$name}-menuitem { padding-left: 6px; } -.v-menubar-submenu-check-column .v-menubar-menuitem-caption { +.#{$name}-submenu-check-column .#{$name}-menuitem-caption { padding-left: 18px; } -.v-menubar-submenu .v-menubar-menuitem-checked .v-menubar-menuitem-caption { +.#{$name}-submenu .#{$name}-menuitem-checked .#{$name}-menuitem-caption { background: transparent url(img/checked.png) no-repeat left; } -.v-menubar-submenu .v-menubar-menuitem-unchecked .v-menubar-menuitem-caption { +.#{$name}-submenu .#{$name}-menuitem-unchecked .#{$name}-menuitem-caption { background: transparent url(img/unchecked.png) no-repeat left; } -.v-menubar-submenu .v-menubar-menuitem-selected-checked .v-menubar-menuitem-caption { +.#{$name}-submenu .#{$name}-menuitem-selected-checked .#{$name}-menuitem-caption { background: transparent url(img/checked-selected.png) no-repeat left; } -.v-menubar-submenu .v-menubar-menuitem-selected-unchecked .v-menubar-menuitem-caption { +.#{$name}-submenu .#{$name}-menuitem-selected-unchecked .#{$name}-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 d9ddd4da27..464faa8aab 100644 --- a/WebContent/VAADIN/themes/reindeer/notification/notification.scss +++ b/WebContent/VAADIN/themes/reindeer/notification/notification.scss @@ -1,6 +1,6 @@ -@mixin reindeer-notification { +@mixin reindeer-notification($name : v-Notification) { -.v-Notification { +.#{$name} { color: #fff; border-radius: 4px; -moz-border-radius: 4px; @@ -10,38 +10,38 @@ font-weight: bold; } -.v-ie9 .v-Notification H1 { +.v-ie9 .#{$name} H1 { /* Fix for #6793 */ font-weight: bold; } -.v-Notification p { +.#{$name} p { line-height: 1.3; } -.v-Notification-warning { +.#{$name}-warning { background: #fdf3b5; color: #ca9a61; border: 3px solid #fee3af; } -.v-Notification-error { +.#{$name}-error { background: #b40000 url(img/error-close.png) no-repeat right top; border: 3px solid #ca3030; } -.v-Notification-tray { +.#{$name}-tray { margin: 0 5px 5px 0; background: #3b3c3e; border: 2px solid #585b5c; padding: 0.8em 0.9em; } -.v-Notification-tray h1 { +.#{$name}-tray h1 { font-size: 14px; line-height: 18px; } -.v-Notification-tray p { +.#{$name}-tray p { font-size: 12px; font-weight: normal; } -.v-Notification-system { +.#{$name}-system { background-color: #b40000; } diff --git a/WebContent/VAADIN/themes/reindeer/panel/panel.scss b/WebContent/VAADIN/themes/reindeer/panel/panel.scss index 00483c5546..e692ba90a9 100644 --- a/WebContent/VAADIN/themes/reindeer/panel/panel.scss +++ b/WebContent/VAADIN/themes/reindeer/panel/panel.scss @@ -1,58 +1,58 @@ -@mixin reindeer-panel { +@mixin reindeer-panel($name : v-panel) { -.blue .v-panel-caption, -.blue .v-panel-nocaption, -.blue .v-panel-content { +.blue .#{$name}-caption, +.blue .#{$name}-nocaption, +.blue .#{$name}-content { border-color: #a8bcc5; } -.v-panel-caption, -.v-panel-nocaption, -.white .v-panel-caption, -.white .v-panel-nocaption { +.#{$name}-caption, +.#{$name}-nocaption, +.white .#{$name}-caption, +.white .#{$name}-nocaption { border-bottom: 1px solid #e5e5e5; line-height: 16px; /* accommodate minimum icon size */ } -.v-webkit .v-panel-caption, -.v-webkit .v-panel-nocaption, -.v-gecko .v-panel-caption, -.v-gecko .v-panel-nocaption, -.v-ie9 .v-panel-caption, -.v-ie9 .v-panel-nocaption { +.v-webkit .#{$name}-caption, +.v-webkit .#{$name}-nocaption, +.v-gecko .#{$name}-caption, +.v-gecko .#{$name}-nocaption, +.v-ie9 .#{$name}-caption, +.v-ie9 .#{$name}-nocaption { border-bottom-color: rgba(0,0,0,.08); } -.v-panel-caption { +.#{$name}-caption { padding-bottom: 2px; } -.v-panel-content, -.white .v-panel-content { +.#{$name}-content, +.white .#{$name}-content { background: #fff; border: 1px solid #dcdcdc; border-bottom: none; border-top: none; } -.v-webkit .v-panel-content, -.v-gecko .v-panel-content, -.v-ie9 .v-panel-content { +.v-webkit .#{$name}-content, +.v-gecko .#{$name}-content, +.v-ie9 .#{$name}-content { border-top-color: rgba(0,0,0,.07); } -.blue .v-panel-deco { +.blue .#{$name}-deco { border-color: #92a3ac; background: #adc2cd; } -.v-panel-deco, -.white .v-panel-deco { +.#{$name}-deco, +.white .#{$name}-deco { height: 1px; border-top: 1px solid #bebebe; background: #e2e2e2; overflow: hidden; } -.v-webkit .v-panel-deco, -.v-gecko .v-panel-deco, -.v-ie9 .v-panel-deco { +.v-webkit .#{$name}-deco, +.v-gecko .#{$name}-deco, +.v-ie9 .#{$name}-deco { border-top-color: rgba(0,0,0,.1); background: rgba(0,0,0,.08); } -.v-panel-caption .v-errorindicator { +.#{$name}-caption .v-errorindicator { height: 16px; width: 13px; background: url(../common/icons/error.png) no-repeat 50%; @@ -62,15 +62,15 @@ } /* Light style */ -.v-panel-light .v-panel-caption-light, -.v-panel-light .v-panel-nocaption-light { +.#{$name}-light .#{$name}-caption-light, +.#{$name}-light .#{$name}-nocaption-light { border: none; } -.v-panel-light .v-panel-content-light { +.#{$name}-light .#{$name}-content-light { border: none; background: transparent; } -.v-panel-light .v-panel-deco-light { +.#{$name}-light .#{$name}-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 7e7f55fda5..f30f059bef 100644 --- a/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss +++ b/WebContent/VAADIN/themes/reindeer/popupview/popupview.scss @@ -1,12 +1,12 @@ -@mixin reindeer-popupview { +@mixin reindeer-popupview($name : v-popupview) { -.v-popupview { +.#{$name} { color: #1b699f; } -.v-popupview:hover { +.#{$name}:hover { color: #2483c4; } -.v-popupview-popup { +.#{$name}-popup { background: #fff; padding: 3px; } diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss index f3f3a59afb..62be029670 100644 --- a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss +++ b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss @@ -1,13 +1,13 @@ -@mixin reindeer-progressindicator { +@mixin reindeer-progressindicator($name : v-progressindicator) { -.v-progressindicator-wrapper { +.#{$name}-wrapper { background: #dfe2e4 url(img/base.gif) repeat-x; border: 1px solid #bfbfbf; } -.v-disabled .v-progressindicator-wrapper { +.v-disabled .#{$name}-wrapper { background-image: url(img/disabled.gif); } -.v-progressindicator-indicator { +.#{$name}-indicator { background: #f7f9f9 url(img/progress.png); } diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss index 0cd01f7885..e102e99bc5 100644 --- a/WebContent/VAADIN/themes/reindeer/reindeer.scss +++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss @@ -1,10 +1,10 @@ -// this file just defines all reindeer mixins by importing them +@import "../base/base.scss"; // common between others for now for backwards compatibility - @import "accordion/accordion.scss"; @import "a-sprite-definitions/a-sprite-definitions.scss"; @import "button/button.scss"; +@import "button/nativebutton.scss"; @import "common/common.scss"; @@ -26,3 +26,36 @@ @import "textfield/textfield.scss"; @import "tree/tree.scss"; @import "window/window.scss"; + +@mixin reindeer { + // should this be here? + @include base; + + // TODO @each + + @include reindeer-accordion; + // TODO @include a-sprite-definitions; + @include reindeer-button; + @include reindeer-nativebutton; + @include reindeer-common; + @include reindeer-datefield; + @include reindeer-formlayout; + @include reindeer-label; + @include reindeer-layouts; + @include reindeer-link; + @include reindeer-menubar; + @include reindeer-notification; + @include reindeer-panel; + @include reindeer-popupview; + @include reindeer-progressindicator; + @include reindeer-select; + @include reindeer-slider; + @include reindeer-splitpanel; + @include reindeer-table; + @include reindeer-tabsheet; + @include reindeer-textfield; + @include reindeer-tree; + @include reindeer-window; +} + + diff --git a/WebContent/VAADIN/themes/reindeer/select/select.scss b/WebContent/VAADIN/themes/reindeer/select/select.scss index 240f88aebb..1510896fb9 100644 --- a/WebContent/VAADIN/themes/reindeer/select/select.scss +++ b/WebContent/VAADIN/themes/reindeer/select/select.scss @@ -1,42 +1,42 @@ -@mixin reindeer-select { +@mixin reindeer-select($name : v-filterselect) { -.v-filterselect { +.#{$name} { 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 .v-filterselect-input, -.v-window .v-filterselect-input, -.v-popupview-popup .v-filterselect-input { +.v-app .#{$name}-input, +.v-window .#{$name}-input, +.v-popupview-popup .#{$name}-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.v-filterselect-input, -.v-window input.v-filterselect-input, -.v-popupview-popup input.v-filterselect-input { +.v-app input.#{$name}-input, +.v-window input.#{$name}-input, +.v-popupview-popup input.#{$name}-input { padding: 4px 0 4px 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-filterselect-prompt .v-filterselect-input { +.#{$name}-prompt .#{$name}-input { font-style: normal; } -.v-filterselect-input:focus { +.#{$name}-input:focus { outline: none; } -.v-filterselect-focus { +.#{$name}-focus { background-image: url(img/left-focus.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */ } -.v-filterselect-focus .v-filterselect-input { +.#{$name}-focus .#{$name}-input { background-image: url(img/center-focus.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.v-filterselect-button { +.#{$name}-button { overflow: hidden; width: 25px; height: 24px; @@ -45,26 +45,26 @@ cursor: default; margin-right: -25px; } -.v-filterselect-button:hover { +.#{$name}-button:hover { background-image: url(img/right-hover.png); /** sprite-ref: verticals */ } -.v-filterselect-button:active { +.#{$name}-button:active { background-image: url(img/right-pressed.png); /** sprite-ref: verticals */ } -.v-filterselect-focus .v-filterselect-button { +.#{$name}-focus .#{$name}-button { background-image: url(img/right-focus.png); /** sprite-ref: verticals */ } -.v-filterselect-focus .v-filterselect-button:hover { +.#{$name}-focus .#{$name}-button:hover { background-image: url(img/right-focus-hover.png); /** sprite-ref: verticals */ } -.v-filterselect-focus .v-filterselect-button:active { +.#{$name}-focus .#{$name}-button:active { background-image: url(img/right-focus-pressed.png); /** sprite-ref: verticals */ } -.v-disabled .v-filterselect-button:hover, -.v-readonly .v-filterselect-button:hover { +.v-disabled .#{$name}-button:hover, +.v-readonly .#{$name}-button:hover { background-image: url(img/right.png); /** sprite-ref: verticals */ } -.v-filterselect-suggestpopup { +.#{$name}-suggestpopup { background: #f8f8f9; border: none; border-radius: 3px; @@ -73,10 +73,10 @@ -o-border-radius: 3px; overflow: hidden; } -.v-filterselect-suggestmenu { +.#{$name}-suggestmenu { margin: 4px 0; } -.v-filterselect-suggestmenu .gwt-MenuItem { +.#{$name}-suggestmenu .gwt-MenuItem { padding: 1px 8px; height: 16px; user-select: none; @@ -84,53 +84,53 @@ -webkit-user-select: none; cursor: default; } -.v-ff .v-filterselect-suggestmenu .gwt-MenuItem { +.v-ff .#{$name}-suggestmenu .gwt-MenuItem { height: 18px; } -.v-filterselect-suggestmenu .gwt-MenuItem .v-icon { +.#{$name}-suggestmenu .gwt-MenuItem .v-icon { margin-right: 3px; } -.v-filterselect-suggestmenu .gwt-MenuItem-selected { +.#{$name}-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; } -.v-filterselect-nextpage, -.v-filterselect-nextpage-off, -.v-filterselect-prevpage-off, -.v-filterselect-prevpage { +.#{$name}-nextpage, +.#{$name}-nextpage-off, +.#{$name}-prevpage-off, +.#{$name}-prevpage { height: 11px; width: 100%; background: transparent; margin-bottom: -4px; } -.v-filterselect-nextpage, -.v-filterselect-nextpage-off { +.#{$name}-nextpage, +.#{$name}-nextpage-off { margin: -4px 0 0; } -.v-filterselect-nextpage:hover { +.#{$name}-nextpage:hover { background-repeat: repeat-x; background-image: url(img/page-down-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.v-filterselect-prevpage:hover { +.#{$name}-prevpage:hover { background-repeat: repeat-x; background-image: url(img/page-up-hover.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.v-filterselect-nextpage:active { +.#{$name}-nextpage:active { background-repeat: repeat-x; background-image: url(img/page-down-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.v-filterselect-prevpage:active { +.#{$name}-prevpage:active { background-repeat: repeat-x; background-image: url(img/page-up-pressed.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.v-filterselect-nextpage-off span, -.v-filterselect-prevpage-off span { +.#{$name}-nextpage-off span, +.#{$name}-prevpage-off span { display: none; } -.v-filterselect-nextpage span, -.v-filterselect-prevpage span { +.#{$name}-nextpage span, +.#{$name}-prevpage span { display: block; height: 11px; width: 100%; @@ -142,16 +142,16 @@ -moz-user-select: none; -webkit-user-select: none; } -.v-filterselect-prevpage span { +.#{$name}-prevpage span { background-image: url(img/arrow-up.png); /** sprite-ref: verticals; sprite-margin-top: 3px; sprite-margin-bottom: 3px; sprite-alignment: center */ } -.v-filterselect-nextpage:hover span { +.#{$name}-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 */ } -.v-filterselect-prevpage:hover span { +.#{$name}-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 */ } -.v-filterselect-status { +.#{$name}-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 .v-filterselect-suggestmenu .gwt-MenuItem-selected { +.v-ie .#{$name}-suggestmenu .gwt-MenuItem-selected { background: transparent url(../common/img/sel-bg.png) repeat-x; } -.v-ie .v-filterselect-nextpage:hover { +.v-ie .#{$name}-nextpage:hover { background: transparent url(img/page-down-hover.png) repeat-x; } -.v-ie .v-filterselect-prevpage:hover { +.v-ie .#{$name}-prevpage:hover { background: transparent url(img/page-up-hover.png) repeat-x; } -.v-ie .v-filterselect-prevpage span { +.v-ie .#{$name}-prevpage span { background: transparent url(img/arrow-up.png) no-repeat center 3px; } -.v-ie .v-filterselect-nextpage span { +.v-ie .#{$name}-nextpage span { background: transparent url(img/arrow-down.png) no-repeat center 3px; } -.v-ie .v-filterselect-prevpage:hover span { +.v-ie .#{$name}-prevpage:hover span { background: transparent url(img/arrow-up-hover.png) no-repeat center 3px; } -.v-ie .v-filterselect-nextpage:hover span { +.v-ie .#{$name}-nextpage:hover span { background: transparent url(img/arrow-down-hover.png) no-repeat center 3px; } -.v-ie .v-filterselect-status { +.v-ie .#{$name}-status { background: transparent url(img/status-bg.png) repeat-x; } /* Filterselect with icon needs a similar fix than in buttons */ -.v-filterselect .v-icon { +.#{$name} .v-icon { width: 16px; position: relative; } -.v-filterselect .v-icon + .v-filterselect-input { +.#{$name} .v-icon + .#{$name}-input { margin-left: -16px; padding-left: 18px; } @@ -208,45 +208,45 @@ /* Combobox on black background */ -.black .v-filterselect { +.black .#{$name} { background-image: url(img/black/left-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.v-app .black .v-filterselect-input, -.v-window .black .v-filterselect-input, -.v-window-black .v-filterselect-input, -.v-popupview-popup .black .v-filterselect-input { +.v-app .black .#{$name}-input, +.v-window .black .#{$name}-input, +.v-window-black .#{$name}-input, +.v-popupview-popup .black .#{$name}-input { color: #c9ccce; background-image: url(img/black/center-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */ } -.black .v-filterselect-focus { +.black .#{$name}-focus { background-image: url(img/black/left-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-filterselect-focus .v-filterselect-input { +.black .#{$name}-focus .#{$name}-input { background-image: url(img/black/center-black-focus.png); /** sprite-ref: black-verticals; sprite-alignment: repeat; sprite-margin-bottom: 1px */ } -.black .v-filterselect-button { +.black .#{$name}-button { background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-filterselect-button:hover { +.black .#{$name}-button:hover { background-image: url(img/black/right-black-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-filterselect-button:active { +.black .#{$name}-button:active { background-image: url(img/black/right-black-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-filterselect-focus .v-filterselect-button { +.black .#{$name}-focus .#{$name}-button { background-image: url(img/black/right-black-focus.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-filterselect-focus .v-filterselect-button:hover { +.black .#{$name}-focus .#{$name}-button:hover { background-image: url(img/black/right-black-focus-hover.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-filterselect-focus .v-filterselect-button:active { +.black .#{$name}-focus .#{$name}-button:active { background-image: url(img/black/right-black-focus-pressed.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-disabled .v-filterselect-button:hover, -.black .v-readonly .v-filterselect-button:hover { +.black .v-disabled .#{$name}-button:hover, +.black .v-readonly .#{$name}-button:hover { background-image: url(img/black/right-black.png); /** sprite-ref: black-verticals; sprite-margin-bottom: 1px */ } -.black .v-filterselect-prompt .v-filterselect-input { +.black .#{$name}-prompt .#{$name}-input { color: #5f6366; } diff --git a/WebContent/VAADIN/themes/reindeer/slider/slider.scss b/WebContent/VAADIN/themes/reindeer/slider/slider.scss index 047237d262..725f717543 100644 --- a/WebContent/VAADIN/themes/reindeer/slider/slider.scss +++ b/WebContent/VAADIN/themes/reindeer/slider/slider.scss @@ -1,42 +1,42 @@ -@mixin reindeer-slider { +@mixin reindeer-slider($name : v-slider) { -.v-slider { +.#{$name} { border-top: 1px solid #9a9c9e; border-bottom: 1px solid #bdbfc1; margin: 4px 0; } -.v-slider-base { +.#{$name}-base { height: 1px; background: #e0e2e2; border-top: 1px solid #adb0b1; border-left: 1px solid #a0a3a6; border-right: 1px solid #a0a3a6; } -.v-slider-handle { +.#{$name}-handle { background: transparent; background-image: url(img/knob.png); /** sprite-ref: verticals */ width: 10px; height: 10px; margin-top: -5px; } -.v-slider-handle-active { +.#{$name}-handle-active { background-image: url(img/knob-pressed.png); /** sprite-ref: verticals */ } -.v-slider-vertical { +.#{$name}-vertical { width: 2px; margin: 0 5px; border: none; border-left: 1px solid #9a9c9e; border-right: 1px solid #bdbfc1; } -.v-slider-vertical .v-slider-base { +.#{$name}-vertical .#{$name}-base { width: 2px; border-left: 1px solid #adb0b1; border-right: none; border-top: 1px solid #adb0b1; border-bottom: 1px solid #adb0b1; } -.v-slider-vertical .v-slider-handle { +.#{$name}-vertical .#{$name}-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 07a38891f5..c837688387 100644 --- a/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss +++ b/WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.scss @@ -1,12 +1,12 @@ -@mixin reindeer-splitpanel { +@mixin reindeer-splitpanel($name : v-splitpanel) { -.v-splitpanel-hsplitter, -.v-splitpanel-hsplitter-locked { +.#{$name}-hsplitter, +.#{$name}-hsplitter-locked { width: 7px; background-repeat: repeat-y; background-image: url(img/hor-bg.png); /** sprite-ref: horizontals; sprite-alignment: repeat */ } -.v-splitpanel-hsplitter div { +.#{$name}-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 */ } -.v-splitpanel-vsplitter, -.v-splitpanel-vsplitter-locked { +.#{$name}-vsplitter, +.#{$name}-vsplitter-locked { height: 7px; background-repeat: repeat-x; background-image: url(img/ver-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.v-splitpanel-vsplitter div { +.#{$name}-vsplitter div { height: 7px; background: transparent; background-repeat: no-repeat; @@ -30,38 +30,38 @@ /* Splitpanels on blue background */ -.blue .v-splitpanel-hsplitter-small, -.blue .v-splitpanel-hsplitter-small-locked { +.blue .#{$name}-hsplitter-small, +.blue .#{$name}-hsplitter-small-locked { background: #7c8a91; } /* Splitpanels on black background */ -.black .v-splitpanel-hsplitter-small, -.black .v-splitpanel-hsplitter-small-locked { +.black .#{$name}-hsplitter-small, +.black .#{$name}-hsplitter-small-locked { background: #4e5253; } /* Small style */ -.v-splitpanel-hsplitter-small, -.v-splitpanel-hsplitter-small-locked, -.white .v-splitpanel-hsplitter-small, -.white .v-splitpanel-hsplitter-small-locked { +.#{$name}-hsplitter-small, +.#{$name}-hsplitter-small-locked, +.white .#{$name}-hsplitter-small, +.white .#{$name}-hsplitter-small-locked { width: 1px; background: #949698; } -.v-splitpanel-vsplitter-small, -.v-splitpanel-vsplitter-small-locked, -.white .v-splitpanel-vsplitter-small, -.white .v-splitpanel-vsplitter-small-locked { +.#{$name}-vsplitter-small, +.#{$name}-vsplitter-small-locked, +.white .#{$name}-vsplitter-small, +.white .#{$name}-vsplitter-small-locked { height: 1px; background: #949698; } -.v-splitpanel-hsplitter-small div { +.#{$name}-hsplitter-small div { width: 5px; margin-left: -2px; background: transparent; } -.v-splitpanel-vsplitter-small div { +.#{$name}-vsplitter-small div { height: 5px; margin-top: -2px; background: transparent; diff --git a/WebContent/VAADIN/themes/reindeer/styles.scss b/WebContent/VAADIN/themes/reindeer/styles.scss index 51daace9d3..7ae66252de 100644 --- a/WebContent/VAADIN/themes/reindeer/styles.scss +++ b/WebContent/VAADIN/themes/reindeer/styles.scss @@ -1,32 +1,3 @@ -// this file actually attaches all reindeer mixins to a parent style - -@import "../base/styles.scss"; @import "reindeer.scss"; -// .v-theme-reindeer { - @include reindeer-accordion; - // TODO this is problematic: comments get stripped out - // @include a-sprite-definitions; - @include reindeer-button; - - @include reindeer-common; - - @include reindeer-datefield; - @include reindeer-formlayout; - @include reindeer-label; - @include reindeer-layouts; - @include reindeer-link; - @include reindeer-menubar; - @include reindeer-notification; - @include reindeer-panel; - @include reindeer-popupview; - @include reindeer-progressindicator; - @include reindeer-select; - @include reindeer-slider; - @include reindeer-splitpanel; - @include reindeer-table; - @include reindeer-tabsheet; - @include reindeer-textfield; - @include reindeer-tree; - @include reindeer-window; -// } +@include reindeer; diff --git a/WebContent/VAADIN/themes/reindeer/table/table.scss b/WebContent/VAADIN/themes/reindeer/table/table.scss index cb190e1f30..a26b4f616b 100644 --- a/WebContent/VAADIN/themes/reindeer/table/table.scss +++ b/WebContent/VAADIN/themes/reindeer/table/table.scss @@ -1,20 +1,20 @@ -@mixin reindeer-table { +@mixin reindeer-table($name : v-table) { /* Table on blue background */ -.blue .v-table-header-wrap { +.blue .#{$name}-header-wrap { border-color: #92a2aa; } -.blue .v-table-body { +.blue .#{$name}-body { border-color: #92a2aa; border-top-color: #c2c3c4; } /* Default & white style */ -.v-table-header-wrap, -.white .v-table-header-wrap, -.v-table-footer-wrap, -.white .v-table-footer-wrap, -.v-table-header-drag { +.#{$name}-header-wrap, +.white .#{$name}-header-wrap, +.#{$name}-footer-wrap, +.white .#{$name}-footer-wrap, +.#{$name}-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; } -.v-table-footer-wrap, -.white .v-table-footer-wrap { +.#{$name}-footer-wrap, +.white .#{$name}-footer-wrap { text-transform: none; font-size: 12px; font-weight: normal; } -.v-table-footer td, -.white .v-table-footer td { +.#{$name}-footer td, +.white .#{$name}-footer td { border-color: #c2c3c4; } -.v-table-footer-container { +.#{$name}-footer-container { padding-right: 7px; } -.v-table-header, -.v-table-footer, -.v-table-footer table { +.#{$name}-header, +.#{$name}-footer, +.#{$name}-footer table { height: 20px; } -.v-table-caption-container, -.v-table-header-drag { +.#{$name}-caption-container, +.#{$name}-header-drag { padding-top: 4px; padding-right: 4px; } -.v-table-caption-container .v-icon, -.v-table-header-drag .v-icon { +.#{$name}-caption-container .v-icon, +.#{$name}-header-drag .v-icon { height: 16px; margin: -4px 3px 0 0; vertical-align: middle; } -.v-ie .v-table-caption-container .v-icon, -.v-ie .v-table-header-drag .v-icon { +.v-ie .#{$name}-caption-container .v-icon, +.v-ie .#{$name}-header-drag .v-icon { margin-top: -3px; } -.v-table-resizer { +.#{$name}-resizer { height: 20px; width: 2px; background: transparent; border-right: 1px solid #c2c3c4; } -.v-table-sort-indicator { +.#{$name}-sort-indicator { background: transparent; width: 0px; height: 20px; } -.v-table-header-cell-asc .v-table-sort-indicator { +.#{$name}-header-cell-asc .#{$name}-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; } -.v-table-header-cell-desc .v-table-sort-indicator { +.#{$name}-header-cell-desc .#{$name}-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; } -.v-table-body, -.white .v-table-body { +.#{$name}-body, +.white .#{$name}-body { border-color: #c2c3c4; background: #fff; } -.v-table-cell-content { +.#{$name}-cell-content { padding-top: 0; border-right-color: #d3d4d5; vertical-align: top; } -.v-table-cell-wrapper { +.#{$name}-cell-wrapper { padding-top: 3px; padding-bottom: 3px; } -.v-table-row-odd { +.#{$name}-row-odd { background: #eff0f1; } -.v-table-generated-row { +.#{$name}-generated-row { background: #dcdee0; text-transform: uppercase; font-size: 10px; @@ -114,55 +114,55 @@ text-shadow: #f3f5f8 0 1px 0; line-height: normal; } -.v-table-generated-row .v-table-cell-wrapper { +.#{$name}-generated-row .#{$name}-cell-wrapper { padding-top: 4px; padding-bottom: 5px; } -.v-table-cell-content:last-child { +.#{$name}-cell-content:last-child { border-right-color: transparent; } -.v-table .v-selected, -.black .v-table .v-selected { +.#{$name} .v-selected, +.black .#{$name} .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; } -.v-table .v-selected .v-table-cell-content { +.#{$name} .v-selected .#{$name}-cell-content { border-right-color: #466c90; } -.v-table-column-selector { +.#{$name}-column-selector { width: 16px; height: 20px; margin-top: -20px; background: transparent no-repeat; background-image: url(img/col-sel-light.png); /** sprite-ref: verticals */ } -.v-table-column-selector:active { +.#{$name}-column-selector:active { background-image: url(img/col-sel-light-pressed.png); /** sprite-ref: verticals */ } -.v-table-focus-slot-left { +.#{$name}-focus-slot-left { border-left: 1px solid #222; margin-bottom: -20px; width: auto; } -.v-table-focus-slot-right { +.#{$name}-focus-slot-right { border-right-color: #222; margin-right: 0; } -.v-table-header-drag { +.#{$name}-header-drag { padding-left: 6px; height: 16px; } -.v-table-header-drag img { +.#{$name}-header-drag img { height: 16px; margin: -3px 3px 0 0; } -.v-table-scrollposition { +.#{$name}-scrollposition { width: auto; background: transparent; border: none; } -.v-table-scrollposition span { +.#{$name}-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; } -.v-table-borderless .v-table-scrollposition span { +.#{$name}-borderless .#{$name}-scrollposition span { top: 0; } /* row in column selector */ @@ -206,87 +206,87 @@ /* Strong style */ -.v-table-strong .v-table-header-wrap, -.v-table-strong .v-table-header-drag { +.#{$name}-strong .#{$name}-header-wrap, +.#{$name}-strong .#{$name}-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; } -.v-table-strong .v-table-body { +.#{$name}-strong .#{$name}-body { border-top-color: #2b3033; } -.v-table-strong .v-table-resizer { +.#{$name}-strong .#{$name}-resizer { border-right-color: #1c1f21; } -.v-table-strong .v-table-header-cell-asc .v-table-sort-indicator { +.#{$name}-strong .#{$name}-header-cell-asc .#{$name}-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; */ } -.v-table-strong .v-table-header-cell-desc .v-table-sort-indicator { +.#{$name}-strong .#{$name}-header-cell-desc .#{$name}-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; */ } -.v-table-strong .v-table-column-selector { +.#{$name}-strong .#{$name}-column-selector { background-image: url(img/col-sel.png); /** sprite-ref: verticals */ } -.v-table-strong .v-table-column-selector:active { +.#{$name}-strong .#{$name}-column-selector:active { background-image: url(img/col-sel-pressed.png); /** sprite-ref: verticals */ } -.v-table-strong .v-table-focus-slot-left, -.v-table-strong .v-table-focus-slot-right { +.#{$name}-strong .#{$name}-focus-slot-left, +.#{$name}-strong .#{$name}-focus-slot-right { border-color: #9ca1a5; } /* Table on black background (normal style) */ -.black .v-table-header-wrap, -.black .v-table-header-drag { +.black .#{$name}-header-wrap, +.black .#{$name}-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 .v-table-resizer { +.black .#{$name}-resizer { border-right-color: #252729; } -.black .v-table-header-cell-asc .v-table-sort-indicator { +.black .#{$name}-header-cell-asc .#{$name}-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 .v-table-header-cell-desc .v-table-sort-indicator { +.black .#{$name}-header-cell-desc .#{$name}-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 .v-table-column-selector { +.black .#{$name}-column-selector { background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */ } -.black .v-table-column-selector:active { +.black .#{$name}-column-selector:active { background-image: url(img/col-sel-black-pressed.png); /** sprite-ref: black-verticals */ } -.black .v-table-focus-slot-left, -.black .v-table-focus-slot-right { +.black .#{$name}-focus-slot-left, +.black .#{$name}-focus-slot-right { border-color: #9ca1a5; } -.black .v-table-body { +.black .#{$name}-body { border-color: #252729; background: transparent; } -.black .v-table-cell-content { +.black .#{$name}-cell-content { border-right-color: #252729; border-bottom: 1px solid #252729; } -.black .v-table-cell-wrapper { +.black .#{$name}-cell-wrapper { padding-bottom: 2px; } -.black .v-table-row-odd { +.black .#{$name}-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 .v-table .v-selected .v-table-cell-content { +.black .#{$name} .v-selected .#{$name}-cell-content { border-bottom: 1px solid #4d749f; } /* Borderless style */ -.v-table-borderless .v-table-header-wrap, -.v-table-borderless .v-table-body { +.#{$name}-borderless .#{$name}-header-wrap, +.#{$name}-borderless .#{$name}-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 1efdab68af..40c6713bcd 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 { +@mixin reindeer-tabsheet-borderless-style($name : v-tabsheet-borderless) { -.v-tabsheet-borderless .v-tabsheet-tabitemcell-first { +.#{$name} .v-tabsheet-tabitemcell-first { padding-left: 7px; background: url(img/framed/tab-first-left.png) no-repeat -3px 0; } -.v-tabsheet-borderless .v-tabsheet-tabitemcell-selected-first { +.#{$name} .v-tabsheet-tabitemcell-selected-first { background: url(img/framed/tab-first-left-sel.png) no-repeat -3px 0; } -.v-tabsheet-borderless .v-tabsheet-spacertd div { +.#{$name} .v-tabsheet-spacertd div { margin-right: 0; } -.v-tabsheet-borderless .v-tabsheet-spacertd { +.#{$name} .v-tabsheet-spacertd { background: transparent; } -.v-tabsheet-borderless .v-tabsheet-content { +.#{$name} .v-tabsheet-content { border: none; } -.v-tabsheet-borderless .v-tabsheet-deco { +.#{$name} .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 dda381b1b0..f8e1a16335 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 { +@mixin reindeer-tabsheet-hover-closable-style($name : v-tabsheet) { -.v-tabsheet-tabs-hover-closable .v-tabsheet-caption-close { +.#{$name}-tabs-hover-closable .#{$name}-caption-close { visibility: hidden; } -.v-tabsheet-tabs-hover-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close { +.#{$name}-tabs-hover-closable .#{$name}-tabitem:hover .#{$name}-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 608aae55cb..7d21b3b2a8 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 { +@mixin reindeer-tabsheet-minimal-style($name : v-tabsheet) { /** * Tabsheet "minimal" style -------------- */ /* Minimal tabsheet on blue background */ -.blue .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div, -.blue .v-tabsheet-tabs-minimal .v-tabsheet-tabitem, -.blue .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected { +.blue .#{$name}-tabs-minimal .#{$name}-spacertd div, +.blue .#{$name}-tabs-minimal .#{$name}-tabitem, +.blue .#{$name}-tabs-minimal .#{$name}-tabitem-selected { border-color: #7c8a91; } -.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close { +.blue .#{$name}-tabs-minimal .#{$name}-caption-close { color: #7c8a91; } -.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover { +.blue .#{$name}-tabs-minimal .#{$name}-caption-close:hover { color: #BCD3DE; background: #778d98; } -.blue .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active { +.blue .#{$name}-tabs-minimal .#{$name}-caption-close:active { background: #4f6874; } /* Default & white styles */ -.v-tabsheet-tabs-minimal .v-tabsheet-spacertd div, -.white .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div { +.#{$name}-tabs-minimal .#{$name}-spacertd div, +.white .#{$name}-tabs-minimal .#{$name}-spacertd div { border-bottom: 1px solid #bfbfbf; height: auto; background: transparent; } -.v-tabsheet-tabs-minimal .v-tabsheet-tabitemcell, -.v-tabsheet-tabs-minimal .v-tabsheet-spacertd { +.#{$name}-tabs-minimal .#{$name}-tabitemcell, +.#{$name}-tabs-minimal .#{$name}-spacertd { height: auto; background: transparent; padding-left: 0; } -.v-tabsheet-tabs-minimal .v-tabsheet-tabitem, -.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem { +.#{$name}-tabs-minimal .#{$name}-tabitem, +.white .#{$name}-tabs-minimal .#{$name}-tabitem { border: none; border-bottom: 1px solid #bfbfbf; color: #4d748f; @@ -44,54 +44,54 @@ background: transparent; text-shadow: none; } -.v-tabsheet-tabs-minimal .v-tabsheet-tabitem .v-caption { +.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption { padding: 5px 16px; height: auto; background: transparent; } -.v-tabsheet-tabs-minimal .v-tabsheet-tabitemcell-selected { +.#{$name}-tabs-minimal .#{$name}-tabitemcell-selected { background: transparent; } -.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected, -.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected { +.#{$name}-tabs-minimal .#{$name}-tabitem-selected, +.white .#{$name}-tabs-minimal .#{$name}-tabitem-selected { background: transparent; border: 1px solid #bfbfbf; border-bottom: none; color: #222; } -.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected .v-caption { +.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption { background: transparent; padding: 4px 15px 6px 15px; } -.v-tabsheet-tabs-minimal .v-tabsheet-tabitem .v-caption-closable, -.v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected .v-caption-closable { +.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption-closable, +.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption-closable { padding-right: 6px; } -.v-tabsheet-content-minimal, -.white .v-tabsheet-content-minimal { +.#{$name}-content-minimal, +.white .#{$name}-content-minimal { border: none; } -.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel { +.#{$name}-content-minimal .#{$name}-tabsheetpanel { background: transparent; } -.v-tabsheet-deco-minimal, -.white .v-tabsheet-deco-minimal { +.#{$name}-deco-minimal, +.white .#{$name}-deco-minimal { height: 0; border: none; } -.v-tabsheet-tabcontainer-minimal .v-tabsheet-scroller { +.#{$name}-tabcontainer-minimal .#{$name}-scroller { margin-top: -20px; height: 17px; padding: 0; border: none; background: transparent; } -.v-tabsheet-tabcontainer-minimal .v-tabsheet-scroller button { +.#{$name}-tabcontainer-minimal .#{$name}-scroller button { margin-top: 0; } -.v-tabsheet-tabs-minimal .v-tabsheet-caption-close, -.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover, -.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active { +.#{$name}-tabs-minimal .#{$name}-caption-close, +.#{$name}-tabs-minimal .#{$name}-caption-close:hover, +.#{$name}-tabs-minimal .#{$name}-caption-close:active { text-indent: 0; background: transparent; margin-left: 3px; @@ -104,45 +104,45 @@ -webkit-border-radius: 7px; -moz-border-radius: 7px; } -.v-tabsheet-tabs-minimal .v-tabsheet-caption-close { +.#{$name}-tabs-minimal .#{$name}-caption-close { margin-top: 1px; } -.v-ff .v-tabsheet-tabs-minimal .v-tabsheet-caption-close { +.v-ff .#{$name}-tabs-minimal .#{$name}-caption-close { margin-top: -15px; } -.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover, -.white .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover { +.#{$name}-tabs-minimal .#{$name}-caption-close:hover, +.white .#{$name}-tabs-minimal .#{$name}-caption-close:hover { color: #fff; background: #aaa; } -.v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active, -.white .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active { +.#{$name}-tabs-minimal .#{$name}-caption-close:active, +.white .#{$name}-tabs-minimal .#{$name}-caption-close:active { background: #777; } /* Minimal tabsheet on black background */ -.black .v-tabsheet-tabs-minimal .v-tabsheet-spacertd div, -.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem, -.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected { +.black .#{$name}-tabs-minimal .#{$name}-spacertd div, +.black .#{$name}-tabs-minimal .#{$name}-tabitem, +.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected { border-color: #3e4044; color: #6a7f89; } -.black .v-tabsheet-tabs-minimal .v-tabsheet-tabitem-selected { +.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected { color: #c9ccce; } -.black .v-tabsheet-content-minimal, -.black .v-tabsheet-content-bar { +.black .#{$name}-content-minimal, +.black .#{$name}-content-bar { color: #c9ccce; text-shadow: #000 0 0 1px; } -.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close { +.black .#{$name}-tabs-minimal .#{$name}-caption-close { color: #72787c; } -.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:hover { +.black .#{$name}-tabs-minimal .#{$name}-caption-close:hover { color: #1d2021; background: #4d5154; } -.black .v-tabsheet-tabs-minimal .v-tabsheet-caption-close:active { +.black .#{$name}-tabs-minimal .#{$name}-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 176d35eea8..5147f608ab 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 { +@mixin reindeer-tabsheet-normal-style($name : v-tabsheet) { /* Default Tabsheet styles */ -.v-tabsheet-tabitemcell, -.v-tabsheet-spacertd { +.#{$name}-tabitemcell, +.#{$name}-spacertd { height: 32px; } -.v-tabsheet-tabitemcell { +.#{$name}-tabitemcell { background: no-repeat; background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */ padding-left: 3px; } -.v-tabsheet-tabitemcell-first { +.#{$name}-tabitemcell-first { padding-left: 10px; background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabitem, -.v-tabsheet-spacertd div { +.#{$name}-tabitem, +.#{$name}-spacertd div { border: none; height: 32px; background: transparent repeat-x; @@ -25,23 +25,23 @@ color: #222; text-shadow: #fff 0 1px 0; } -.v-tabsheet-tabitem .v-caption { +.#{$name}-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; } -.v-tabsheet-tabitem .v-caption-closable { +.#{$name}-tabitem .v-caption-closable { padding-right: 0; padding-left: 17px; } -.v-tabsheet-tabitem .v-captiontext { +.#{$name}-tabitem .v-captiontext { height: 16px; line-height: 16px; vertical-align:baseline; } -.v-tabsheet-caption-close { +.#{$name}-caption-close { float: right; width: 19px; height: 18px; @@ -55,70 +55,70 @@ font-size: 14px; font-weight: normal; } -.v-tabsheet-caption-close:hover { +.#{$name}-caption-close:hover { background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */ } -.v-tabsheet-caption-close:active { +.#{$name}-caption-close:active { background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabitem-selected .v-tabsheet-caption-close { +.#{$name}-tabitem-selected .#{$name}-caption-close { background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover { +.#{$name}-tabitem-selected .#{$name}-caption-close:hover { background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active { +.#{$name}-tabitem-selected .#{$name}-caption-close:active { background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabitemcell-selected { +.#{$name}-tabitemcell-selected { background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabitemcell-selected-first { +.#{$name}-tabitemcell-selected-first { background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabitem-selected { +.#{$name}-tabitem-selected { background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #232930; } -.v-tabsheet-tabitem-selected .v-caption { +.#{$name}-tabitem-selected .v-caption { background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.v-tabsheet-spacertd div { +.#{$name}-spacertd div { margin-right: 4px; } -.v-tabsheet-spacertd { +.#{$name}-spacertd { background: transparent no-repeat right top; background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.blue .v-tabsheet-content { +.blue .#{$name}-content { border-color: #a8bcc5; } -.v-tabsheet-content, -.white .v-tabsheet-content { +.#{$name}-content, +.white .#{$name}-content { border: 1px solid #dcdcdc; border-bottom: none; border-top: none; color: #222; text-shadow: none; } -.v-tabsheet-tabsheetpanel { +.#{$name}-tabsheetpanel { background: #fff; } -.v-sa .v-tabsheet-content { +.v-sa .#{$name}-content { border-color: rgba(0,0,0,.1); } -.blue .v-tabsheet-deco { +.blue .#{$name}-deco { border-color: #92a3ac; background: #adc2cd; } -.v-tabsheet-deco, -.white .v-tabsheet-deco { +.#{$name}-deco, +.white .#{$name}-deco { height: 1px; border-top: 1px solid #bebebe; background: #e2e2e2; overflow: hidden; } -.v-sa .v-tabsheet-deco { +.v-sa .#{$name}-deco { border-top-color: rgba(0,0,0,.1); background: rgba(0,0,0,.08); } @@ -126,31 +126,31 @@ /* Icons & error indicators */ -.v-tabsheet-tabs .v-icon, -.v-tabsheet-tabs .v-captiontext, -.v-tabsheet-tabs .v-errorindicator { +.#{$name}-tabs .v-icon, +.#{$name}-tabs .v-captiontext, +.#{$name}-tabs .v-errorindicator { display: inline; float: none; } -.v-sa .v-tabsheet-tabs .v-captiontext { +.v-sa .#{$name}-tabs .v-captiontext { display: inline-block; } -.v-tabsheet-tabs .v-icon { +.#{$name}-tabs .v-icon { width: 16px !important; height: 16px !important; } -.v-tabsheet-tabs .v-errorindicator { +.#{$name}-tabs .v-errorindicator { display: inline-block; width: 13px; height: 16px; background: transparent url(../common/icons/error.png) no-repeat 50%; } -.v-ie .v-tabsheet-tabs .v-errorindicator { +.v-ie .#{$name}-tabs .v-errorindicator { zoom: 1; display: inline; } -.v-ie8 .v-tabsheet-tabs .v-errorindicator, -.v-ie9 .v-tabsheet-tabs .v-errorindicator { +.v-ie8 .#{$name}-tabs .v-errorindicator, +.v-ie9 .#{$name}-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 8f176e2150..b3f98098ef 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 { +@mixin reindeer-tabsheet-scroller($name : v-tabsheet) { /* Tabsheet scroller styles */ -.v-tabsheet-scroller { +.#{$name}-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; } -.v-tabsheet-scroller button { +.#{$name}-scroller button { margin-top: 7px; } -.v-tabsheet-scrollerPrev, -.v-tabsheet-scrollerNext, -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerNext-disabled { +.#{$name}-scrollerPrev, +.#{$name}-scrollerNext, +.#{$name}-scrollerPrev-disabled, +.#{$name}-scrollerNext-disabled { border: none; background: transparent; background-image: url(img/tab-prev.png); /** sprite-ref: verticals */ @@ -27,26 +27,26 @@ height: 17px; overflow: hidden; } -.v-tabsheet-scroller button::-moz-focus-inner { +.#{$name}-scroller button::-moz-focus-inner { border: none; } -.v-tabsheet-scrollerNext { +.#{$name}-scrollerNext { background-image: url(img/tab-next.png); /** sprite-ref: verticals */ } -.v-tabsheet-scrollerPrev:active { +.#{$name}-scrollerPrev:active { background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */ } -.v-tabsheet-scrollerNext:active { +.#{$name}-scrollerNext:active { background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */ } -.v-tabsheet-scrollerPrev-disabled, -.v-tabsheet-scrollerPrev-disabled:active { +.#{$name}-scrollerPrev-disabled, +.#{$name}-scrollerPrev-disabled:active { background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */ opacity: 1; filter: none; } -.v-tabsheet-scrollerNext-disabled, -.v-tabsheet-scrollerNext-disabled:active { +.#{$name}-scrollerNext-disabled, +.#{$name}-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 d26a569c25..75ac111ec7 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 { +@mixin reindeer-tabsheet-selected-closable-style($name : v-tabsheet) { -.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem .v-tabsheet-caption-close, -.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem:hover .v-tabsheet-caption-close { +.#{$name}-tabs-selected-closable .#{$name}-tabitem .#{$name}-caption-close, +.#{$name}-tabs-selected-closable .#{$name}-tabitem:hover .#{$name}-caption-close { visibility: hidden; } -.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected .v-tabsheet-caption-close, -.v-tabsheet-tabs-selected-closable .v-tabsheet-tabitem-selected:hover .v-tabsheet-caption-close { +.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected .#{$name}-caption-close, +.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected:hover .#{$name}-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 e4f098046c..61358b3723 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 { +@mixin reindeer-tabsheet-small-style($name : v-tabsheet) { /** * Tabsheet bar style --------------- */ -.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell, -.v-tabsheet-tabs-bar .v-tabsheet-spacertd { +.#{$name}-tabs-bar .#{$name}-tabitemcell, +.#{$name}-tabs-bar .#{$name}-spacertd { height: 20px; } -.v-tabsheet-tabs-bar .v-tabsheet-spacertd { +.#{$name}-tabs-bar .#{$name}-spacertd { background: transparent; } -.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell { +.#{$name}-tabs-bar .#{$name}-tabitemcell { background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-first { +.#{$name}-tabs-bar .#{$name}-tabitemcell-first { padding-left: 6px; background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabs-bar .v-tabsheet-tabitem, -.v-tabsheet-tabs-bar .v-tabsheet-spacertd div { +.#{$name}-tabs-bar .#{$name}-tabitem, +.#{$name}-tabs-bar .#{$name}-spacertd div { height: 20px; background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ font-size: 11px; margin: 0; } -.v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption { +.#{$name}-tabs-bar .#{$name}-tabitem .v-caption { height: 18px; background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ padding: 2px 12px 0 10px; } -.v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption-closable, -.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption-closable { +.#{$name}-tabs-bar .#{$name}-tabitem .v-caption-closable, +.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption-closable { padding-right: 8px; padding-left: 14px; } -.v-tabsheet-tabs-bar .v-tabsheet-caption-close, -.v-tabsheet-tabs-bar .v-tabsheet-caption-close:hover, -.v-tabsheet-tabs-bar .v-tabsheet-caption-close:active { +.#{$name}-tabs-bar .#{$name}-caption-close, +.#{$name}-tabs-bar .#{$name}-caption-close:hover, +.#{$name}-tabs-bar .#{$name}-caption-close:active { text-indent: 0; background: transparent; margin-left: 3px; @@ -49,62 +49,62 @@ -webkit-border-radius: 7px; -moz-border-radius: 7px; } -.v-tabsheet-tabs-bar .v-tabsheet-caption-close { +.#{$name}-tabs-bar .#{$name}-caption-close { margin-top: 1px; } -.v-ff .v-tabsheet-tabs-bar .v-tabsheet-caption-close { +.v-ff .#{$name}-tabs-bar .#{$name}-caption-close { margin-top: -14px; } -.v-tabsheet-tabs-bar .v-tabsheet-caption-close:hover { +.#{$name}-tabs-bar .#{$name}-caption-close:hover { background: #bfbfbf; -webkit-box-shadow: 0 1px 0 #fff; } -.v-tabsheet-tabs-bar .v-tabsheet-caption-close:active { +.#{$name}-tabs-bar .#{$name}-caption-close:active { background: #a9a9a9; } -.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close { +.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close { color: #404142; } -.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover { +.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:hover { background: #5e666e; color: #fff; text-shadow: 0 -1px 0 #222; } -.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active { +.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:active { background: #404142; } -.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected { +.#{$name}-tabs-bar .#{$name}-tabitemcell-selected { background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected-first { +.#{$name}-tabs-bar .#{$name}-tabitemcell-selected-first { background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */ } -.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected { +.#{$name}-tabs-bar .#{$name}-tabitem-selected { background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #232930; } -.v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption { +.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption { background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.v-tabsheet-tabcontainer-bar .v-tabsheet-scroller { +.#{$name}-tabcontainer-bar .#{$name}-scroller { margin-top: -20px; height: 19px; border-right: none; background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.v-tabsheet-tabcontainer-bar .v-tabsheet-scroller button { +.#{$name}-tabcontainer-bar .#{$name}-scroller button { margin-top: 1px; } -.v-tabsheet-content-bar, -.white .v-tabsheet-content-bar { +.#{$name}-content-bar, +.white .#{$name}-content-bar { border: none; } -.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel { +.#{$name}-content-bar .#{$name}-tabsheetpanel { background: transparent; } -.v-tabsheet-deco-bar, -.white .v-tabsheet-deco-bar { +.#{$name}-deco-bar, +.white .#{$name}-deco-bar { height: 0; border: none; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss index 8b9252cf68..35001daf4d 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.scss @@ -8,7 +8,7 @@ @import "tabsheet-hover-closable-style.scss"; @mixin reindeer-tabsheet { - + // TODO use $exclude @include reindeer-tabsheet-normal-style; @include reindeer-tabsheet-scroller; @include reindeer-tabsheet-borderless-style; diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss index 7350f699f9..7cd8166aa6 100644 --- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.scss @@ -1,16 +1,16 @@ -@mixin reindeer-textfield { +@mixin reindeer-textfield($name : v-textfield) { /* Textfield on blue background */ -.blue .v-textfield, +.blue .#{$name}, .blue .v-textarea { border-color: #92a2aa; border-top-color: #7c8a90; border-bottom-color: #a1b3bc; } /* Default & white background */ -.v-textfield, +.#{$name}, .v-textarea, -.white .v-textfield, +.white .#{$name}, .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.v-textfield, -.v-window input.v-textfield, +.v-app input.#{$name}, +.v-window input.#{$name}, .v-app textarea.v-textarea, .v-window textarea.v-textarea { padding: 3px 3px 4px; } -.v-app input.v-textfield.v-widget, -.v-window input.v-textfield.v-widget { +.v-app input.#{$name}.v-widget, +.v-window input.#{$name}.v-widget { height: 24px; } -.v-app .v-textfield-focus, -.v-window .v-textfield-focus, -.v-popupview-popup .v-textfield-focus, +.v-app .#{$name}-focus, +.v-window .#{$name}-focus, +.v-popupview-popup .#{$name}-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.v-textfield-prompt, +input.#{$name}-prompt, textarea.v-textarea-prompt { font-style: normal; color: #999; } /* Small style textfield */ -.v-app input.v-textfield-small { +.v-app input.#{$name}-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.v-textfield.v-widget, -.v-window .v-table input.v-textfield.v-widget { +.v-app .v-table input.#{$name}.v-widget, +.v-window .v-table input.#{$name}.v-widget { padding: 1px 2px; height: auto; line-height: normal; } -.v-table-cell-wrapper > input.v-textfield { +.v-table-cell-wrapper > input.#{$name} { margin-top: -2px; margin-bottom: -2px; } /* Textfield on black background */ -.black .v-textfield, +.black .#{$name}, .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 .v-textfield-focus, -.v-window-black .v-textfield-focus, -.v-window .black .v-textfield-focus, -.v-popupview-popup .black .v-textfield-focus, +.v-app .black .#{$name}-focus, +.v-window-black .#{$name}-focus, +.v-window .black .#{$name}-focus, +.v-popupview-popup .black .#{$name}-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.v-textfield-prompt { +.black input.#{$name}-prompt { color: #5f6366; } /* Readonly */ -input.v-textfield-readonly, -.black input.v-textfield-readonly, +input.#{$name}-readonly, +.black input.#{$name}-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 3a1ad35c81..da3b46dc65 100644 --- a/WebContent/VAADIN/themes/reindeer/tree/tree.scss +++ b/WebContent/VAADIN/themes/reindeer/tree/tree.scss @@ -1,20 +1,20 @@ -@mixin reindeer-tree { +@mixin reindeer-tree($name : v-tree) { -.v-tree-node { +.#{$name}-node { background: transparent url(img/arrows.png) no-repeat 6px -10px; } -.v-tree-node-expanded { +.#{$name}-node-expanded { background-position: -7px 5px; } -.v-tree-node-caption { +.#{$name}-node-caption { margin-left: 16px; padding-bottom: 1px; } -.v-tree-node span { +.#{$name}-node span { padding: 1px 2px; display: inline-block; } -.v-tree-node-selected span { +.#{$name}-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; } -.v-tree-node-children { +.#{$name}-node-children { padding-left: 16px; } -.v-tree-node-caption.v-tree-node-focused span{ +.#{$name}-node-caption.#{$name}-node-focused span{ padding-left: 1px; padding-top: 0px; padding-bottom: 0px; } -.v-tree-node-focused span{ +.#{$name}-node-focused span{ border: 1px dotted black; } /*************************************** * Drag'n'drop styles ***************************************/ -.v-tree .v-tree-node-drag-top { +.#{$name} .#{$name}-node-drag-top { background-position: 6px -11px; } -.v-tree .v-tree-node-drag-top.v-tree-node-expanded { +.#{$name} .#{$name}-node-drag-top.#{$name}-node-expanded { background-position: -7px 4px; } -.v-tree-connectors .v-tree-node-drag-top, -.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top { +.#{$name}-connectors .#{$name}-node-drag-top, +.#{$name}-connectors .#{$name}-node-expanded.#{$name}-node-drag-top { background-position: 2px -53px; } -.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf { +.#{$name}-connectors .#{$name}-node-drag-top.#{$name}-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 ac8fa9c2c9..c3ad0fc9be 100644 --- a/WebContent/VAADIN/themes/reindeer/window/window.scss +++ b/WebContent/VAADIN/themes/reindeer/window/window.scss @@ -1,25 +1,25 @@ -@mixin reindeer-window { +@mixin reindeer-window($name : v-window) { -.v-window { +.#{$name} { background: transparent; } -.v-window-wrap { +.#{$name}-wrap { border: 1px solid #808386; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -.v-sa .v-window-wrap, -.v-op .v-window-wrap { +.v-sa .#{$name}-wrap, +.v-op .#{$name}-wrap { border-color: rgba(0,0,0,.2); } -.v-window-outerheader { +.#{$name}-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 */ } -.v-window-header { +.#{$name}-header { font-weight: bold; font-size: 12px; line-height: normal; @@ -30,24 +30,24 @@ text-overflow: ellipsis; -ms-text-overflow: ellipsis; } -.v-window-error .v-window-header { +.#{$name}-error .#{$name}-header { padding-left: 13px; background: transparent url(../common/icons/error.png) no-repeat 0 50%; } -.v-window-resizebox { +.#{$name}-resizebox { width: 15px; height: 15px; cursor: se-resize; background: transparent; background-image: url(img/resize.png); /** sprite-ref: verticals */ } -.v-window-footer { +.#{$name}-footer { background-color:white; background-repeat: repeat-x; background-image: url(img/footer-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ height: 15px; } -.v-window-closebox { +.#{$name}-closebox { top: 12px; right: 10px; width: 15px; @@ -55,16 +55,16 @@ background: transparent; background-image: url(img/close.png); /** sprite-ref: verticals */ } -.v-window-closebox:hover { +.#{$name}-closebox:hover { background-image: url(img/close-hover.png); /** sprite-ref: verticals */ } -.v-window-closebox:active { +.#{$name}-closebox:active { background-image: url(img/close-pressed.png); /** sprite-ref: verticals */ } -.v-window-contents { +.#{$name}-contents { background: #fff; } -.v-window-modalitycurtain { +.#{$name}-modalitycurtain { background: #56595b; } @@ -77,43 +77,43 @@ Light style window ----------------------------- **/ -.v-window-light .v-window-outerheader { +.#{$name}-light .#{$name}-outerheader { background: transparent; padding: 15px 32px 0 18px; height: 23px; } -.v-window-light .v-window-header { +.#{$name}-light .#{$name}-header { font-size: 16px; color: #292e34; text-shadow: none; } -.v-window-light .v-window-resizebox { +.#{$name}-light .#{$name}-resizebox { width: 12px; height: 12px; background-image: url(img/resize-light.png); /** sprite-ref: verticals */ } -.v-window-light .v-window-footer { +.#{$name}-light .#{$name}-footer { background: transparent; height: 12px; } -.v-window-light .v-window-closebox { +.#{$name}-light .#{$name}-closebox { right: 1px; top: 17px; width: 19px; height: 15px; background-image: url(img/close-light.png); /** sprite-ref: verticals */ } -.v-window-light .v-window-closebox:hover { +.#{$name}-light .#{$name}-closebox:hover { background-image: url(img/close-light-hover.png); /** sprite-ref: verticals */ } -.v-window-light .v-window-closebox:active { +.#{$name}-light .#{$name}-closebox:active { background-image: url(img/close-light-pressed.png); /** sprite-ref: verticals */ } -.v-window-light .v-window-contents { +.#{$name}-light .#{$name}-contents { background: transparent; } /* This must be the last sprite added to the verticals-sprite image */ -.v-window-light .v-window-wrap2 { +.#{$name}-light .#{$name}-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 ----------------------------- **/ -.v-window-black .v-window-wrap { +.#{$name}-black .#{$name}-wrap { border-color: #2e3030; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; overflow: hidden; } -.v-sa .v-window-black .v-window-wrap, -.v-op .v-window-black .v-window-wrap { +.v-sa .#{$name}-black .#{$name}-wrap, +.v-op .#{$name}-black .#{$name}-wrap { border-color: rgba(0,0,0,.8); } -.v-window-black .v-window-wrap2 { +.#{$name}-black .#{$name}-wrap2 { background-color: #1d2021; -moz-border-radius: 7px; -webkit-border-radius: 7px; } -.v-sa .v-window-black .v-window-wrap2, -.v-op .v-window-black .v-window-wrap2 { +.v-sa .#{$name}-black .#{$name}-wrap2, +.v-op .#{$name}-black .#{$name}-wrap2 { background-color: rgba(29,32,33,.9); } -.v-window-black .v-window-outerheader { +.#{$name}-black .#{$name}-outerheader { height: auto; padding: 7px 14px; height: 15px; @@ -157,27 +157,27 @@ overflow: hidden; border: none; } -.v-window-black .v-window-header { +.#{$name}-black .#{$name}-header { font-size: 12px; font-weight: normal; color: #dddfe1; } -.v-window-black .v-window-closebox { +.#{$name}-black .#{$name}-closebox { top: 8px; } -.v-window-black .v-window-footer { +.#{$name}-black .#{$name}-footer { background: transparent; border: none; height: 14px; } -.v-window-black .v-window-resizebox { +.#{$name}-black .#{$name}-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 */ -.v-window-black .v-window-contents { +.#{$name}-black .#{$name}-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/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss index 9ef3ed118a..6db7c335cb 100644 --- a/WebContent/VAADIN/themes/runo/runo.scss +++ b/WebContent/VAADIN/themes/runo/runo.scss @@ -1,4 +1,4 @@ -// this file just defines all runo mixins by importing them +@import "../base/base.scss"; @import "absolutelayout/absolutelayout.scss"; @import "accordion/accordion.scss"; @@ -25,3 +25,36 @@ @import "textfield/textfield.scss"; @import "tree/tree.scss"; @import "window/window.scss"; + +@mixin runo { + // TODO move? + @include base; + // TODO each + @include runo-absolutelayout; + @include runo-accordion; + @include runo-button; + @include runo-caption; + + @include runo-common; + + @include runo-datefield; + @include runo-formlayout; + @include runo-gridlayout; + @include runo-label; + @include runo-link; + @include runo-menubar; + @include runo-notification; + @include runo-orderedlayout; + @include runo-panel; + @include runo-popupview; + @include runo-progressindicator; + @include runo-select; + @include runo-shadow; + @include runo-slider; + @include runo-splitpanel; + @include runo-table; + @include runo-tabsheet; + @include runo-textfield; + @include runo-tree; + @include runo-window; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/runo/styles.scss b/WebContent/VAADIN/themes/runo/styles.scss index 1bbe531b23..987b1425b6 100644 --- a/WebContent/VAADIN/themes/runo/styles.scss +++ b/WebContent/VAADIN/themes/runo/styles.scss @@ -1,32 +1,2 @@ -@import "../base/styles.scss"; @import "runo.scss"; - -// .v-theme-runo { -@include runo-absolutelayout; -@include runo-accordion; -@include runo-button; -@include runo-caption; - -@include runo-common; - -@include runo-datefield; -@include runo-formlayout; -@include runo-gridlayout; -@include runo-label; -@include runo-link; -@include runo-menubar; -@include runo-notification; -@include runo-orderedlayout; -@include runo-panel; -@include runo-popupview; -@include runo-progressindicator; -@include runo-select; -@include runo-shadow; -@include runo-slider; -@include runo-splitpanel; -@include runo-table; -@include runo-tabsheet; -@include runo-textfield; -@include runo-tree; -@include runo-window; -// } +@include runo;
\ No newline at end of file |