org.eclipse.osbp.themes/scss/layout/_header.scss

////
/// @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 - 3;
		$os-main-header-bg: $os-splitter-shade;
		
		// 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);
					}		
				@else {
					/* 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 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);
					}
				}
			}
			
		.toptrimbar {
			overflow: hidden;
			white-space: nowrap;
			
			position: inherit;
			bottom: 0px;
			
						
			height: 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 {
					//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: inherit;//floor($v-unit-size/2);
					position: relative;
					top: 75%;
					}
				}
			
			.v-button {
			    border: none;
/* 			    background: transparent; */
/* 			    padding: 0px; */
				}
						
/* 			.v-filterselect, .v-filterselect-input { */
/* 				override _dialog */
/* 				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;
			
			position: absolute;
			margin-right: $v-unit-size;
			@if $os-bordered == true {
				top: $header-separator-height;
				}
			@else {
				bottom: $header-separator-height;
				}

			.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%);
				    
				    
					}
	            /*@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);
					}
				}
			}
			
		.toptrimbar {
			overflow: hidden;
			white-space: nowrap;
			
			position: inherit;
			bottom: 0px;
			height: 2.2 * $v-unit-size + $header-separator-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%; */
					}
/* 				} */
			
/* 			.v-button { */
/* 			    border: none; */
/* 			    background: transparent; */
/* 			    padding: 0px; */
/* 				} */
						
			.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;
					}
				}
			}
		}
	}