| //// |
| /// @group layout/tabsheet |
| //// |
| |
| |
| /// controls-opacity |
| $controls-opacity: 0.3; /* 0.5 = same as valo .v-tabsheet-scroller*/ |
| /// controls-size |
| $controls-size-h: 4* $v-font-size; /*each button as 2*6px horizontal padding*/ |
| ///tab-active-height |
| $tab-active-height: ceil($v-unit-size/11); |
| |
| /// Common style for tabsheet control elements (min/max-buttons etc.). Only used |
| /// locally to avoid writing those lines multiple times. |
| @mixin tabsheet-control-effects { |
| /* don't want to write this three times */ |
| &:hover:before { |
| color: inherit; //$v-focus-color; |
| } |
| &:before { |
| vertical-align: middle; |
| color: valo-font-color($os-splitter-shade); |
| opacity: $controls-opacity; |
| } |
| } |
| |
| /// A tabbed container that can be placed inside views/l-control elements, or |
| /// replace views entirely. |
| @mixin os-tabsheet { |
| .vaadock-tabsheet-button-panel { |
| float: right; |
| position: absolute; |
| top: 0px; |
| right: 0px; |
| width: $controls-size-h; |
| height: 100%; |
| background-color: $os-splitter-shade; |
| |
| .v-vaadock-tabsheet-maximize-button { |
| @include os-icon-font ( $size: $v-font-size, |
| $line-height: $v-unit-size, |
| $float: right, |
| $content: '\f2d0'); |
| @include tabsheet-control-effects; |
| } |
| |
| .v-vaadock-tabsheet-minimize-button { |
| @include os-icon-font ( $size: $v-font-size, |
| $line-height: $v-unit-size, |
| $float: right, |
| $content: '\f2d1'); |
| @include tabsheet-control-effects; |
| } |
| .v-vaadock-tabsheet-restore-button { |
| @include os-icon-font ($float: right, |
| $size: $v-font-size, |
| $line-height: $v-unit-size, |
| $content: '\f24d', |
| $mirror: true); |
| @include tabsheet-control-effects; |
| } |
| } |
| |
| .v-tabsheet-scroller { |
| position: absolute; |
| top: 0px; |
| right: $controls-size-h; |
| padding-left: $v-unit-size / 2; |
| @include linear-gradient(to left, $os-splitter-shade 70%, rgba(250,250,250,0) 100%); |
| background-color: transparent; |
| button { |
| color: valo-font-color($os-splitter-shade); |
| opacity: $controls-opacity; |
| } |
| &:after { |
| display: none; |
| } |
| } |
| |
| /// assuming this is always without minimize/maximize buttons: remove right offset! |
| .os-data-area .v-tabsheet-scroller { |
| right: 0px; |
| } |
| |
| .v-tabsheet-tabcontainer { |
| border: none; |
| background: $os-splitter-shade; |
| &:before { |
| display: none; |
| } |
| @if $os-bordered == true { |
| /* needs to calculate to a height that accomodates for border-width; |
| else there'll be scrollbars */ |
| height: $v-unit-size + $tab-active-height;// - first-number($v-border); |
| border: $v-border; |
| border-bottom-width: 0px; |
| } |
| .v-tabsheet-tabitemcell-first .v-tabsheet-tabitem { |
| border-top-left-radius: $v-border-radius; |
| } |
| .v-tabsheet-tabitemcell { |
| .v-tabsheet-tabitem { |
| background: $os-dark-contrast; |
| .v-caption { |
| color: valo-font-color($os-dark-contrast); |
| padding-right: floor($v-unit-size/2); |
| padding-left: floor($v-unit-size/2); |
| font-size: $v-font-size; |
| @if $os-theme-desig == "cxo" { |
| font-weight: bold; |
| } |
| margin-left: 0px; |
| @include os-transition(unset); |
| @include box-sizing(border-box); |
| border-top: $tab-active-height solid $os-dark-contrast; |
| border-bottom: 0px; |
| &:hover { |
| border-top-color: $os-odd-highlight; |
| color: valo-font-color($os-odd-highlight); |
| } |
| } |
| /* .v-caption-closable { */ |
| /* margin-left: 0px; */ |
| /* } */ |
| &:hover { |
| background: $os-odd-highlight; |
| } |
| } |
| .v-tabsheet-tabitem-selected { |
| /* background-color: $v-panel-background-color; */ |
| background-color: $v-focus-color; |
| |
| &>.v-caption, &>.v-caption.v-caption { |
| color: valo-font-color($v-focus-color); |
| |
| /* @if $os-bordered == true { */ |
| /* border: $v-border; */ |
| /* } */ |
| /* border-top: $tab-active-height solid $v-focus-color; */ |
| border-bottom: 0px; |
| /* border-bottom: $tab-active-height solid $v-focus-color; */ |
| } |
| } |
| } |
| } |
| |
| /* exception for tabsheets within views */ |
| .v-tabsheet-tabcontainer-l-control.v-tabsheet-tabcontainer { |
| border: none; |
| background: $os-splitter-shade; |
| &:before { |
| display: none; |
| } |
| @if $os-bordered == true { |
| /* needs to calculate to a height that accomodates for border-width; |
| else there'll be scrollbars */ |
| height: $v-unit-size + $tab-active-height;// - first-number($v-border); |
| border: $v-border; |
| border-bottom-width: 0px; |
| } |
| .v-tabsheet-tabitemcell-first .v-tabsheet-tabitem { |
| border-top-left-radius: $v-border-radius; |
| } |
| .v-tabsheet-tabitemcell { |
| .v-tabsheet-tabitem { |
| background: $os-dark-contrast; |
| .v-caption { |
| color: valo-font-color($os-dark-contrast); |
| padding-right: floor($v-unit-size/2); |
| padding-left: floor($v-unit-size/2); |
| font-size: $v-font-size; |
| @if $os-theme-desig == "cxo" { |
| font-weight: bold; |
| } |
| margin-left: 0px; |
| @include os-transition(unset); |
| @include box-sizing(border-box); |
| border-top: $tab-active-height solid $os-dark-contrast; |
| border-bottom: 0px; |
| &:hover { |
| border-top-color: $os-odd-highlight; |
| color: valo-font-color($os-odd-highlight); |
| } |
| } |
| /* .v-caption-closable { */ |
| /* margin-left: 0px; */ |
| /* } */ |
| &:hover { |
| background: $os-odd-highlight; |
| } |
| } |
| .v-tabsheet-tabitem-selected { |
| background-color: $v-panel-background-color; |
| |
| &>.v-caption, &>.v-caption.v-caption { |
| color: valo-font-color($v-panel-background-color); |
| font-weight: normal; |
| /* @if $os-bordered == true { */ |
| /* border: $v-border; */ |
| /* } */ |
| border-top: $tab-active-height solid $v-focus-color; |
| border-bottom: 0px; |
| } |
| } |
| } |
| } |
| |
| |
| } |