blob: d8ef9ab6ce679797a5db6be24b27aad360577299 [file] [log] [blame]
////
/// @group layout/header
////
/// The fixed top portion of the entire application. Contains user-menu, some controls and tabs for switching perspectives.
/// @param {string} variant Can look different according to selected theme flavor.
@mixin os-header($variant: os) {
@if $variant == os {
$header-separator-height: $os-splitter-size - 3px;
/* $os-main-header-bg: $os-splitter-shade; */
$main-header-height: 2.2 * $v-unit-size + $header-separator-height;
$toolbar-button-height: $v-unit-size;// + $header-separator-height;
// the very top
.v-menubar {
//display: none;
//background-image: url("../image/osbee-logo.png");
background-repeat: no-repeat;
background-position: 50%;
background-size: auto $v-unit-size; //w h
background-color: $os-main-header-bg;
@if $os-bordered == true {
border: 0px;
/* border-bottom: ceil($v-unit-size/11) solid $os-odd-highlight; */
height: $v-unit-size + ceil($v-unit-size/11);
}
@else {
border: 0px;
border-bottom: $v-border;
@include box-shadow(none);
}
}
/* second row */
.v-ui > .v-panel > .v-panel-content > .v-verticallayout > .v-expand >
.v-slot > .v-verticallayout > .v-expand {
> .v-slot:nth-child(1) {
/* NO borders, paddings, margins or height declarations in this area.
* Content will be pushed beneath the bottom of the browser
* window due to e4/vaaclipse restrictions. */
@if $os-bordered == true {
/* fake top border: */
@include linear-gradient(to bottom, $os-odd-highlight $header-separator-height, $os-main-header-bg $header-separator-height);
.v-slot-os-perspective-stack-slot {
top: $header-separator-height;
height: calc(100% - $header-separator-height);
}
}
@else {
/* fake bottom border: */
@include linear-gradient(to top, $os-odd-highlight $header-separator-height, $os-main-header-bg $header-separator-height);
.v-slot-os-perspective-stack-slot {
/* bottom: $header-separator-height; */
}
/// rotated when "os-border: false" so that scrollbars appear on top
.os-perspective-stack-slot {
background: transparent;
@include box-shadow(none);
> .v-scrollable {
overflow-y: hidden;
}
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
.v-horizontallayout.perspectivepanel {
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
top: $header-separator-height;
}
}
}
/*@include linear-gradient(to top, $os-light-contrast $header-separator-height,
$v-focus-color $header-separator-height,
$v-focus-color $os-splitter-size,
$os-main-header-bg $os-splitter-size);*/
}
.v-slot-os-perspective-stack-slot {
.os-perspective-stack-slot {
background: transparent;
@include box-shadow(none);
}
}
/* removes empty v-slot/spacer in header-area */
> .v-slot:nth-child(2) {
//height: 0px !important;
display: none;
}
@if $os-bordered == false {
> .v.slot:nth-child(3) {
@include box-shadow(none);
}
}
}
.v-slot-toptrimbar {
margin: 0px $v-unit-size 0px $v-unit-size;
}
.toptrimbar {
overflow: hidden;
white-space: nowrap;
position: inherit;
bottom: 0px;
height: $main-header-height; //120px; //2.2 * $v-unit-size + $header-separator-height;
@if $web==true {
height: 2 * $v-unit-size + $header-separator-height;
}
@if $os-bordered==true {
height: 2.5 * $v-unit-size;
.ToolControlMenu {
position: relative;
top: 10%;
}
}
@else {
.ToolControlMenu {
vertical-align: text-top;
}
}
.ToolControlCombo {
position: relative;
top: 75%;
}
.os-mparttoolbar {
.os-toolbar-button.v-button {
@include os-button($bgcolor: $os-mid-contrast,
$height: $toolbar-button-height );
/* border-bottom: $header-separator-height solid $v-focus-color; */
@include box-shadow(none); /*valo-defined mixin*/
}
position: relative;
@if $os-bordered == true {
top: $header-separator-height;
}
@else {
$button-position: $main-header-height - $toolbar-button-height - $header-separator-height;
top: $button-position;
}
padding-right: $v-unit-size;
}
.v-button {
border: none;
}
td.v-formlayout-errorcell, td.v-formlayout-captioncell {
border-bottom: none;
}
}
.perspectivepanel {
@include os-button-perspectivepanel;
position: absolute;
/* margin-right: $v-unit-size; */
@if $os-bordered == true {
top: 0px;
}
@else {
bottom: 0px;
}
.v-button-pushed {
background: $os-button-as-tab !important;
border-color: $os-button-as-tab !important;
.v-button-caption {
color: valo-font-color($os-button-as-tab) !important;
}
}
}
}
@if $variant == cxo {
$os-main-header-bg: $os-splitter-shade;
$header-separator-height: 2px;
/* the very top */
.v-menubar {
/* background-repeat: no-repeat; */
/* background-position: 50%; */
/* background-size: auto $v-unit-size; //w h */
background-color: $os-main-header-bg;
@if $os-bordered == true {
border: 0px;
/* border-bottom: ceil($v-unit-size/11) solid $os-odd-highlight; */
height: $v-unit-size + ceil($v-unit-size/11);
}
@else {
border: 0px;
border-bottom: $v-border;
@include box-shadow(none);
}
}
/* second row */
.v-ui > .v-panel > .v-panel-content > .v-verticallayout > .v-expand >
.v-slot > .v-verticallayout > .v-expand {
> .v-slot:nth-child(1) {
/* NO borders, paddings, margins or height declarations possible in this area.
* Content will be pushed beneath the bottom of the browser
* window due to e4/vaaclipse restrictions. */
@if $os-bordered == true {
background-color: $os-splitter-shade;
}
@else {
/* fake bottom border: */
@include linear-gradient(to top, $os-odd-highlight $header-separator-height, $os-main-header-bg $header-separator-height);
}
@if $os-theme-desig == "cxo" {
/* fake bottom border: */
/* @include linear-gradient(to top, $os-odd-highlight $header-separator-height, $os-main-header-bg $header-separator-height); */
@include linear-gradient(to bottom, $os-header-shade-2 0%, $os-header-shade-1 90%, $os-mid-contrast 90% ,$v-app-background-color 100%);
@include linear-gradient(to top, $v-app-background-color 0px, $os-mid-contrast $os-splitter-size, #ffd210 $os-splitter-size, #fffb8e 100%);
@include linear-gradient(to top, $v-app-background-color 0px, $os-mid-contrast 1px, #ffd210 1px, #fffb8e 100%);
.os-perspective-stack-slot {
background: transparent;
@include box-shadow(none);
> .v-scrollable {
overflow-y: hidden;
}
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
.v-horizontallayout.perspectivepanel {
transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
top: $header-separator-height;
padding: $os-shadow-range;
padding-bottom: 0px;
}
}
}
.os-perspective-stack-slot {
@include box-shadow(none);
/* .v-horizontallayout { */
/* padding: $os-shadow-range; */
/* padding-bottom: 0px; */
/* } */
}
/*@include linear-gradient(to top, $os-light-contrast $header-separator-height,
$v-focus-color $header-separator-height,
$v-focus-color $os-splitter-size,
$os-main-header-bg $os-splitter-size);*/
}
/* removes empty v-slot/spacer in header-area */
> .v-slot:nth-child(2) {
//height: 0px !important;
display: none;
}
@if $os-bordered == false {
> .v.slot:nth-child(3) {
@include box-shadow(none);
}
}
}
.v-slot-toptrimbar {
margin: 0px $v-unit-size 0px $v-unit-size;
}
.toptrimbar {
overflow: hidden;
white-space: nowrap;
position: inherit;
bottom: 0px;
height: $main-header-height;
@if $os-theme-desig == "cxo" {
height: 2.2 * $v-unit-size;
}
/* @if $web==true { */
/* height: 2 * $v-unit-size + $header-separator-height; */
/* } */
/* @if $os-bordered==true { */
/* height: 2.5 * $v-unit-size; */
/* .ToolControlMenu { */
/* //padding-top: inherit;//floor($v-unit-size/2); */
/* position: relative; */
/* top: 10%; */
/* } */
/* .ToolControlCombo { */
/* //padding-top: inherit;//floor($v-unit-size/2); */
/* position: relative; */
/* top: 75%; */
/* } */
/* } */
/* @else { */
.ToolControlMenu {
vertical-align: text-top;
}
.ToolControlCombo {
padding-top: floor($v-unit-size/2);
/* position: relative; */
/* top: 75%; */
}
/* } */
.os-mparttoolbar {
position: relative;
top: 23%;
}
.os-toolbar-button.v-button {
@include box-shadow(none); /*valo-defined mixin*/
}
.v-filterselect, .v-filterselect-input {
/* override _forms */
background-color: $os-main-header-bg !important;
color: valo-font-color($os-main-header-bg) !important;
@include box-shadow(none);
border-bottom: $v-border;
}
.v-filterselect.v-widget.os-combobox-with-icon .v-icon {
/* language selection icon position (header) */
z-index: 999;
}
td.v-formlayout-errorcell, td.v-formlayout-captioncell {
border-bottom: none;
}
}
.perspectivepanel {
@include os-button-perspectivepanel;
margin-right: $v-unit-size;
/* @if $os-bordered == true { */
position: absolute;
bottom: 0px;
/* } */
/* @else { */
/* position: absolute; */
/* bottom: 10%; */
/* } */
/* @if $os-theme-desig == "cxo" { */
.vaaclipsebutton.v-button-vaaclipsebutton {
height: ceil(1.6 * $v-unit-size);
/* position: absolute; */
/* bottom: $os-splitter-size; */
}
.v-button-vaaclipsebutton.pushed {
height: ceil(1.6 * $v-unit-size);
bottom: 0px;
background: $os-button-as-tab !important;
@include linear-gradient(to top, $os-mid-contrast 1px, $os-button-as-tab 1px);
border-color: $os-button-as-tab !important;
.v-button-caption {
color: valo-font-color($os-button-as-tab) !important;
}
}
}
}
}