blob: 80caa25a78203f899da55decb3861305d519b7c0 [file] [log] [blame]
////
/// @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: $v-app-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: $v-app-background-color; //$os-splitter-shade;
&:before { /* this is a strange border that shouldn't appear */
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;
}
border-bottom: $v-border;
border-bottom-color: $v-focus-color;
.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;
}
}
}
}
}