diff options
Diffstat (limited to 'WebContent/VAADIN/themes/reindeer/tabsheet')
7 files changed, 147 insertions, 147 deletions
diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss index 40c6713bcd..e2a92730b4 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-borderless-style.scss @@ -1,22 +1,22 @@ -@mixin reindeer-tabsheet-borderless-style($name : v-tabsheet-borderless) { +@mixin reindeer-tabsheet-borderless-style($primaryStyleName : v-tabsheet-borderless) { -.#{$name} .v-tabsheet-tabitemcell-first { +.#{$primaryStyleName} .v-tabsheet-tabitemcell-first { padding-left: 7px; background: url(img/framed/tab-first-left.png) no-repeat -3px 0; } -.#{$name} .v-tabsheet-tabitemcell-selected-first { +.#{$primaryStyleName} .v-tabsheet-tabitemcell-selected-first { background: url(img/framed/tab-first-left-sel.png) no-repeat -3px 0; } -.#{$name} .v-tabsheet-spacertd div { +.#{$primaryStyleName} .v-tabsheet-spacertd div { margin-right: 0; } -.#{$name} .v-tabsheet-spacertd { +.#{$primaryStyleName} .v-tabsheet-spacertd { background: transparent; } -.#{$name} .v-tabsheet-content { +.#{$primaryStyleName} .v-tabsheet-content { border: none; } -.#{$name} .v-tabsheet-deco { +.#{$primaryStyleName} .v-tabsheet-deco { height: 0; border-top: none; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss index f8e1a16335..706aea151b 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-hover-closable-style.scss @@ -1,9 +1,9 @@ -@mixin reindeer-tabsheet-hover-closable-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-hover-closable-style($primaryStyleName : v-tabsheet) { -.#{$name}-tabs-hover-closable .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-hover-closable .#{$primaryStyleName}-caption-close { visibility: hidden; } -.#{$name}-tabs-hover-closable .#{$name}-tabitem:hover .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-hover-closable .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close { visibility: visible; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss index 7d21b3b2a8..7b6ed54c02 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.scss @@ -1,41 +1,41 @@ -@mixin reindeer-tabsheet-minimal-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-minimal-style($primaryStyleName : v-tabsheet) { /** * Tabsheet "minimal" style -------------- */ /* Minimal tabsheet on blue background */ -.blue .#{$name}-tabs-minimal .#{$name}-spacertd div, -.blue .#{$name}-tabs-minimal .#{$name}-tabitem, -.blue .#{$name}-tabs-minimal .#{$name}-tabitem-selected { +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div, +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem, +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { border-color: #7c8a91; } -.blue .#{$name}-tabs-minimal .#{$name}-caption-close { +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { color: #7c8a91; } -.blue .#{$name}-tabs-minimal .#{$name}-caption-close:hover { +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #BCD3DE; background: #778d98; } -.blue .#{$name}-tabs-minimal .#{$name}-caption-close:active { +.blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #4f6874; } /* Default & white styles */ -.#{$name}-tabs-minimal .#{$name}-spacertd div, -.white .#{$name}-tabs-minimal .#{$name}-spacertd div { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div { border-bottom: 1px solid #bfbfbf; height: auto; background: transparent; } -.#{$name}-tabs-minimal .#{$name}-tabitemcell, -.#{$name}-tabs-minimal .#{$name}-spacertd { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell, +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd { height: auto; background: transparent; padding-left: 0; } -.#{$name}-tabs-minimal .#{$name}-tabitem, -.white .#{$name}-tabs-minimal .#{$name}-tabitem { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem { border: none; border-bottom: 1px solid #bfbfbf; color: #4d748f; @@ -44,54 +44,54 @@ background: transparent; text-shadow: none; } -.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption { padding: 5px 16px; height: auto; background: transparent; } -.#{$name}-tabs-minimal .#{$name}-tabitemcell-selected { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell-selected { background: transparent; } -.#{$name}-tabs-minimal .#{$name}-tabitem-selected, -.white .#{$name}-tabs-minimal .#{$name}-tabitem-selected { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { background: transparent; border: 1px solid #bfbfbf; border-bottom: none; color: #222; } -.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent; padding: 4px 15px 6px 15px; } -.#{$name}-tabs-minimal .#{$name}-tabitem .v-caption-closable, -.#{$name}-tabs-minimal .#{$name}-tabitem-selected .v-caption-closable { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption-closable, +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption-closable { padding-right: 6px; } -.#{$name}-content-minimal, -.white .#{$name}-content-minimal { +.#{$primaryStyleName}-content-minimal, +.white .#{$primaryStyleName}-content-minimal { border: none; } -.#{$name}-content-minimal .#{$name}-tabsheetpanel { +.#{$primaryStyleName}-content-minimal .#{$primaryStyleName}-tabsheetpanel { background: transparent; } -.#{$name}-deco-minimal, -.white .#{$name}-deco-minimal { +.#{$primaryStyleName}-deco-minimal, +.white .#{$primaryStyleName}-deco-minimal { height: 0; border: none; } -.#{$name}-tabcontainer-minimal .#{$name}-scroller { +.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller { margin-top: -20px; height: 17px; padding: 0; border: none; background: transparent; } -.#{$name}-tabcontainer-minimal .#{$name}-scroller button { +.#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller button { margin-top: 0; } -.#{$name}-tabs-minimal .#{$name}-caption-close, -.#{$name}-tabs-minimal .#{$name}-caption-close:hover, -.#{$name}-tabs-minimal .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close, +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover, +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { text-indent: 0; background: transparent; margin-left: 3px; @@ -104,45 +104,45 @@ -webkit-border-radius: 7px; -moz-border-radius: 7px; } -.#{$name}-tabs-minimal .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { margin-top: 1px; } -.v-ff .#{$name}-tabs-minimal .#{$name}-caption-close { +.v-ff .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { margin-top: -15px; } -.#{$name}-tabs-minimal .#{$name}-caption-close:hover, -.white .#{$name}-tabs-minimal .#{$name}-caption-close:hover { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #fff; background: #aaa; } -.#{$name}-tabs-minimal .#{$name}-caption-close:active, -.white .#{$name}-tabs-minimal .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active, +.white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #777; } /* Minimal tabsheet on black background */ -.black .#{$name}-tabs-minimal .#{$name}-spacertd div, -.black .#{$name}-tabs-minimal .#{$name}-tabitem, -.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div, +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem, +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { border-color: #3e4044; color: #6a7f89; } -.black .#{$name}-tabs-minimal .#{$name}-tabitem-selected { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { color: #c9ccce; } -.black .#{$name}-content-minimal, -.black .#{$name}-content-bar { +.black .#{$primaryStyleName}-content-minimal, +.black .#{$primaryStyleName}-content-bar { color: #c9ccce; text-shadow: #000 0 0 1px; } -.black .#{$name}-tabs-minimal .#{$name}-caption-close { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { color: #72787c; } -.black .#{$name}-tabs-minimal .#{$name}-caption-close:hover { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #1d2021; background: #4d5154; } -.black .#{$name}-tabs-minimal .#{$name}-caption-close:active { +.black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #626669; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss index 5147f608ab..c13bb6f025 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.scss @@ -1,22 +1,22 @@ -@mixin reindeer-tabsheet-normal-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-normal-style($primaryStyleName : v-tabsheet) { /* Default Tabsheet styles */ -.#{$name}-tabitemcell, -.#{$name}-spacertd { +.#{$primaryStyleName}-tabitemcell, +.#{$primaryStyleName}-spacertd { height: 32px; } -.#{$name}-tabitemcell { +.#{$primaryStyleName}-tabitemcell { background: no-repeat; background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */ padding-left: 3px; } -.#{$name}-tabitemcell-first { +.#{$primaryStyleName}-tabitemcell-first { padding-left: 10px; background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem, -.#{$name}-spacertd div { +.#{$primaryStyleName}-tabitem, +.#{$primaryStyleName}-spacertd div { border: none; height: 32px; background: transparent repeat-x; @@ -25,23 +25,23 @@ color: #222; text-shadow: #fff 0 1px 0; } -.#{$name}-tabitem .v-caption { +.#{$primaryStyleName}-tabitem .v-caption { border: none; height: 23px; background: no-repeat right top; background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ padding: 9px 8px 0 6px; } -.#{$name}-tabitem .v-caption-closable { +.#{$primaryStyleName}-tabitem .v-caption-closable { padding-right: 0; padding-left: 17px; } -.#{$name}-tabitem .v-captiontext { +.#{$primaryStyleName}-tabitem .v-captiontext { height: 16px; line-height: 16px; vertical-align:baseline; } -.#{$name}-caption-close { +.#{$primaryStyleName}-caption-close { float: right; width: 19px; height: 18px; @@ -55,70 +55,70 @@ font-size: 14px; font-weight: normal; } -.#{$name}-caption-close:hover { +.#{$primaryStyleName}-caption-close:hover { background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */ } -.#{$name}-caption-close:active { +.#{$primaryStyleName}-caption-close:active { background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem-selected .#{$name}-caption-close { +.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close { background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem-selected .#{$name}-caption-close:hover { +.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:hover { background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem-selected .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:active { background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-tabitemcell-selected { +.#{$primaryStyleName}-tabitemcell-selected { background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabitemcell-selected-first { +.#{$primaryStyleName}-tabitemcell-selected-first { background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabitem-selected { +.#{$primaryStyleName}-tabitem-selected { background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #232930; } -.#{$name}-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabitem-selected .v-caption { background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.#{$name}-spacertd div { +.#{$primaryStyleName}-spacertd div { margin-right: 4px; } -.#{$name}-spacertd { +.#{$primaryStyleName}-spacertd { background: transparent no-repeat right top; background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.blue .#{$name}-content { +.blue .#{$primaryStyleName}-content { border-color: #a8bcc5; } -.#{$name}-content, -.white .#{$name}-content { +.#{$primaryStyleName}-content, +.white .#{$primaryStyleName}-content { border: 1px solid #dcdcdc; border-bottom: none; border-top: none; color: #222; text-shadow: none; } -.#{$name}-tabsheetpanel { +.#{$primaryStyleName}-tabsheetpanel { background: #fff; } -.v-sa .#{$name}-content { +.v-sa .#{$primaryStyleName}-content { border-color: rgba(0,0,0,.1); } -.blue .#{$name}-deco { +.blue .#{$primaryStyleName}-deco { border-color: #92a3ac; background: #adc2cd; } -.#{$name}-deco, -.white .#{$name}-deco { +.#{$primaryStyleName}-deco, +.white .#{$primaryStyleName}-deco { height: 1px; border-top: 1px solid #bebebe; background: #e2e2e2; overflow: hidden; } -.v-sa .#{$name}-deco { +.v-sa .#{$primaryStyleName}-deco { border-top-color: rgba(0,0,0,.1); background: rgba(0,0,0,.08); } @@ -126,31 +126,31 @@ /* Icons & error indicators */ -.#{$name}-tabs .v-icon, -.#{$name}-tabs .v-captiontext, -.#{$name}-tabs .v-errorindicator { +.#{$primaryStyleName}-tabs .v-icon, +.#{$primaryStyleName}-tabs .v-captiontext, +.#{$primaryStyleName}-tabs .v-errorindicator { display: inline; float: none; } -.v-sa .#{$name}-tabs .v-captiontext { +.v-sa .#{$primaryStyleName}-tabs .v-captiontext { display: inline-block; } -.#{$name}-tabs .v-icon { +.#{$primaryStyleName}-tabs .v-icon { width: 16px !important; height: 16px !important; } -.#{$name}-tabs .v-errorindicator { +.#{$primaryStyleName}-tabs .v-errorindicator { display: inline-block; width: 13px; height: 16px; background: transparent url(../common/icons/error.png) no-repeat 50%; } -.v-ie .#{$name}-tabs .v-errorindicator { +.v-ie .#{$primaryStyleName}-tabs .v-errorindicator { zoom: 1; display: inline; } -.v-ie8 .#{$name}-tabs .v-errorindicator, -.v-ie9 .#{$name}-tabs .v-errorindicator { +.v-ie8 .#{$primaryStyleName}-tabs .v-errorindicator, +.v-ie9 .#{$primaryStyleName}-tabs .v-errorindicator { display: inline-block; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss index b3f98098ef..070bb2d724 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.scss @@ -1,8 +1,8 @@ -@mixin reindeer-tabsheet-scroller($name : v-tabsheet) { +@mixin reindeer-tabsheet-scroller($primaryStyleName : v-tabsheet) { /* Tabsheet scroller styles */ -.#{$name}-scroller { +.#{$primaryStyleName}-scroller { height: 31px; margin-top: -31px; padding: 0 3px 0 4px; @@ -13,13 +13,13 @@ background: transparent url(img/framed/tab-bg.png) repeat-x left -1px; width: 36px; } -.#{$name}-scroller button { +.#{$primaryStyleName}-scroller button { margin-top: 7px; } -.#{$name}-scrollerPrev, -.#{$name}-scrollerNext, -.#{$name}-scrollerPrev-disabled, -.#{$name}-scrollerNext-disabled { +.#{$primaryStyleName}-scrollerPrev, +.#{$primaryStyleName}-scrollerNext, +.#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-scrollerNext-disabled { border: none; background: transparent; background-image: url(img/tab-prev.png); /** sprite-ref: verticals */ @@ -27,26 +27,26 @@ height: 17px; overflow: hidden; } -.#{$name}-scroller button::-moz-focus-inner { +.#{$primaryStyleName}-scroller button::-moz-focus-inner { border: none; } -.#{$name}-scrollerNext { +.#{$primaryStyleName}-scrollerNext { background-image: url(img/tab-next.png); /** sprite-ref: verticals */ } -.#{$name}-scrollerPrev:active { +.#{$primaryStyleName}-scrollerPrev:active { background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-scrollerNext:active { +.#{$primaryStyleName}-scrollerNext:active { background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */ } -.#{$name}-scrollerPrev-disabled, -.#{$name}-scrollerPrev-disabled:active { +.#{$primaryStyleName}-scrollerPrev-disabled, +.#{$primaryStyleName}-scrollerPrev-disabled:active { background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */ opacity: 1; filter: none; } -.#{$name}-scrollerNext-disabled, -.#{$name}-scrollerNext-disabled:active { +.#{$primaryStyleName}-scrollerNext-disabled, +.#{$primaryStyleName}-scrollerNext-disabled:active { background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */ opacity: 1; filter: none; diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss index 75ac111ec7..ed1ddcd693 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-selected-closable-style.scss @@ -1,11 +1,11 @@ -@mixin reindeer-tabsheet-selected-closable-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-selected-closable-style($primaryStyleName : v-tabsheet) { -.#{$name}-tabs-selected-closable .#{$name}-tabitem .#{$name}-caption-close, -.#{$name}-tabs-selected-closable .#{$name}-tabitem:hover .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem .#{$primaryStyleName}-caption-close, +.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem:hover .#{$primaryStyleName}-caption-close { visibility: hidden; } -.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected .#{$name}-caption-close, -.#{$name}-tabs-selected-closable .#{$name}-tabitem-selected:hover .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close, +.#{$primaryStyleName}-tabs-selected-closable .#{$primaryStyleName}-tabitem-selected:hover .#{$primaryStyleName}-caption-close { visibility: visible; } diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss index 61358b3723..de0c29d516 100644 --- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-small-style.scss @@ -1,42 +1,42 @@ -@mixin reindeer-tabsheet-small-style($name : v-tabsheet) { +@mixin reindeer-tabsheet-small-style($primaryStyleName : v-tabsheet) { /** * Tabsheet bar style --------------- */ -.#{$name}-tabs-bar .#{$name}-tabitemcell, -.#{$name}-tabs-bar .#{$name}-spacertd { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd { height: 20px; } -.#{$name}-tabs-bar .#{$name}-spacertd { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd { background: transparent; } -.#{$name}-tabs-bar .#{$name}-tabitemcell { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell { background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */ } -.#{$name}-tabs-bar .#{$name}-tabitemcell-first { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-first { padding-left: 6px; background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */ } -.#{$name}-tabs-bar .#{$name}-tabitem, -.#{$name}-tabs-bar .#{$name}-spacertd div { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-spacertd div { height: 20px; background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ font-size: 11px; margin: 0; } -.#{$name}-tabs-bar .#{$name}-tabitem .v-caption { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem .v-caption { height: 18px; background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */ padding: 2px 12px 0 10px; } -.#{$name}-tabs-bar .#{$name}-tabitem .v-caption-closable, -.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption-closable { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem .v-caption-closable, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .v-caption-closable { padding-right: 8px; padding-left: 14px; } -.#{$name}-tabs-bar .#{$name}-caption-close, -.#{$name}-tabs-bar .#{$name}-caption-close:hover, -.#{$name}-tabs-bar .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover, +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:active { text-indent: 0; background: transparent; margin-left: 3px; @@ -49,62 +49,62 @@ -webkit-border-radius: 7px; -moz-border-radius: 7px; } -.#{$name}-tabs-bar .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close { margin-top: 1px; } -.v-ff .#{$name}-tabs-bar .#{$name}-caption-close { +.v-ff .#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close { margin-top: -14px; } -.#{$name}-tabs-bar .#{$name}-caption-close:hover { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:hover { background: #bfbfbf; -webkit-box-shadow: 0 1px 0 #fff; } -.#{$name}-tabs-bar .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-caption-close:active { background: #a9a9a9; } -.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close { color: #404142; } -.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:hover { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:hover { background: #5e666e; color: #fff; text-shadow: 0 -1px 0 #222; } -.#{$name}-tabs-bar .#{$name}-tabitem-selected .#{$name}-caption-close:active { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .#{$primaryStyleName}-caption-close:active { background: #404142; } -.#{$name}-tabs-bar .#{$name}-tabitemcell-selected { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-selected { background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabs-bar .#{$name}-tabitemcell-selected-first { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitemcell-selected-first { background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */ } -.#{$name}-tabs-bar .#{$name}-tabitem-selected { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected { background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */ color: #232930; } -.#{$name}-tabs-bar .#{$name}-tabitem-selected .v-caption { +.#{$primaryStyleName}-tabs-bar .#{$primaryStyleName}-tabitem-selected .v-caption { background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */ } -.#{$name}-tabcontainer-bar .#{$name}-scroller { +.#{$primaryStyleName}-tabcontainer-bar .#{$primaryStyleName}-scroller { margin-top: -20px; height: 19px; border-right: none; background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */ } -.#{$name}-tabcontainer-bar .#{$name}-scroller button { +.#{$primaryStyleName}-tabcontainer-bar .#{$primaryStyleName}-scroller button { margin-top: 1px; } -.#{$name}-content-bar, -.white .#{$name}-content-bar { +.#{$primaryStyleName}-content-bar, +.white .#{$primaryStyleName}-content-bar { border: none; } -.#{$name}-content-bar .#{$name}-tabsheetpanel { +.#{$primaryStyleName}-content-bar .#{$primaryStyleName}-tabsheetpanel { background: transparent; } -.#{$name}-deco-bar, -.white .#{$name}-deco-bar { +.#{$primaryStyleName}-deco-bar, +.white .#{$primaryStyleName}-deco-bar { height: 0; border: none; } |