@mixin reindeer-tabsheet-minimal-style($primaryStyleName : v-tabsheet) { /** * Tabsheet "minimal" style -------------- */ /* Minimal tabsheet on blue background */ .blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div, .blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem, .blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { border-color: #7c8a91; } .blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { color: #7c8a91; } .blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #BCD3DE; background: #778d98; } .blue .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #4f6874; } /* Default & white styles */ .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div, .white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd div { border-bottom: 1px solid #bfbfbf; height: auto; background: transparent; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell, .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-spacertd { height: auto; background: transparent; padding-left: 0; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem, .white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem { border: none; border-bottom: 1px solid #bfbfbf; color: #4d748f; padding: 0; height: auto; background: transparent; text-shadow: none; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption { padding: 5px 16px; height: auto; background: transparent; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitemcell-selected { background: transparent; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected, .white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { background: transparent; border: 1px solid #bfbfbf; border-bottom: none; color: #222; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent; padding: 4px 15px 6px 15px; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem .v-caption-closable, .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected .v-caption-closable { padding-right: 6px; } .#{$primaryStyleName}-content-minimal, .white .#{$primaryStyleName}-content-minimal { border: none; } .#{$primaryStyleName}-content-minimal .#{$primaryStyleName}-tabsheetpanel { background: transparent; } .#{$primaryStyleName}-deco-minimal, .white .#{$primaryStyleName}-deco-minimal { height: 0; border: none; } .#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller { margin-top: -20px; height: 17px; padding: 0; border: none; background: transparent; } .#{$primaryStyleName}-tabcontainer-minimal .#{$primaryStyleName}-scroller button { margin-top: 0; } .#{$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; margin-right: -3px; padding: 0; color: #999; width: 14px; height: 14px; line-height: 14px; -webkit-border-radius: 7px; -moz-border-radius: 7px; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { margin-top: 1px; } .v-ff & .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { margin-top: -15px; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover, .white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #fff; background: #aaa; } .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active, .white .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #777; } /* Minimal tabsheet on black background */ .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 .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-tabitem-selected { color: #c9ccce; } .black .#{$primaryStyleName}-content-minimal, .black .#{$primaryStyleName}-content-bar { color: #c9ccce; text-shadow: #000 0 0 1px; } .black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close { color: #72787c; } .black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:hover { color: #1d2021; background: #4d5154; } .black .#{$primaryStyleName}-tabs-minimal .#{$primaryStyleName}-caption-close:active { background: #626669; } }