diff options
| author | Marc Englund <marc@vaadin.com> | 2012-09-28 16:09:23 +0300 |
|---|---|---|
| committer | Marc Englund <marc@vaadin.com> | 2012-09-28 16:09:23 +0300 |
| commit | a499ccaa61a8aa72a1ca4334e5ba3becc6ecfb79 (patch) | |
| tree | d68b11585e58a948cc9f48587ea03cff2b3e37c7 | |
| parent | 8ca203ca29543429425823c0f547ddf4140f6991 (diff) | |
| download | vaadin-framework-a499ccaa61a8aa72a1ca4334e5ba3becc6ecfb79.tar.gz vaadin-framework-a499ccaa61a8aa72a1ca4334e5ba3becc6ecfb79.zip | |
Sass restructure: tried some variants, this should be a reindeer structure that should work w/o overlay-container
31 files changed, 712 insertions, 712 deletions
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..a5ec4422eb 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,12 +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, +.#{$name}-link .#{$name}-caption, .v-nativebutton-link .v-nativebutton-caption { line-height: inherit; font-weight: normal; @@ -31,7 +31,7 @@ text-shadow: none; } -.v-button-link:focus .v-button-caption, +.#{$name}-link:focus .#{$name}-caption, .v-nativebutton-link:focus .v-nativebutton-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..9f7e761a1b 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button.scss +++ b/WebContent/VAADIN/themes/reindeer/button/button.scss @@ -10,7 +10,7 @@ @import "button-ie.scss"; @mixin reindeer-button { - + // TODO use $exclude @include reindeer-button-standard; @include reindeer-button-primary-style; @include reindeer-button-small-style; 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 ab47767dcf..010d6e7db2 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 .v-formlayout-row .v-formlayout-captioncell, -.v-formlayout-spacing .v-formlayout-row .v-formlayout-contentcell, -.v-formlayout-spacing .v-formlayout-row .v-formlayout-errorcell { +.#{$name}-spacing .#{$name}-row .#{$name}-captioncell, +.#{$name}-spacing .#{$name}-row .#{$name}-contentcell, +.#{$name}-spacing .#{$name}-row .#{$name}-errorcell { padding-top: 8px; } -.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-captioncell, -.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-contentcell, -.v-formlayout-margin-top .v-formlayout-firstrow .v-formlayout-errorcell { +.#{$name}-margin-top .#{$name}-firstrow .#{$name}-captioncell, +.#{$name}-margin-top .#{$name}-firstrow .#{$name}-contentcell, +.#{$name}-margin-top .#{$name}-firstrow .#{$name}-errorcell { padding-top: 15px; } -.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-captioncell, -.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-contentcell, -.v-formlayout-margin-bottom .v-formlayout-lastrow .v-formlayout-errorcell { +.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-captioncell, +.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-contentcell, +.#{$name}-margin-bottom .#{$name}-lastrow .#{$name}-errorcell { padding-bottom: 15px; } -.v-formlayout-margin-left .v-formlayout-captioncell { +.#{$name}-margin-left .#{$name}-captioncell { padding-left: 18px; } -.v-formlayout-margin-right .v-formlayout-contentcell { +.#{$name}-margin-right .#{$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/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/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 */ |