| //// |
| /// @group layout/user |
| //// |
| |
| /// User element at the top left of the page; inside header area. |
| /// Makes use of @see $os-theme-desig. |
| /// @param {integer} $rows [2] - Can have two rows (user/position), or three rows (user/position/mail). |
| /// @todo Rework "3 rows" variant. |
| @mixin os-user($rows: 2) { |
| .v-horizontallayout-UserHandler { |
| margin-right: $v-unit-size; |
| //border: $v-border; |
| margin-left: $v-unit-size; |
| } |
| |
| .v-slot-os-userportrait { |
| width: auto; |
| height: auto; |
| } |
| .os-userportrait { |
| img { |
| border-radius: 50%; |
| width: $rows * $v-unit-size; |
| height: $rows * $v-unit-size; |
| border: 0px solid grey; |
| padding-right: floor(($rows * $v-unit-size) / 10); |
| } |
| } |
| |
| .v-slot-os-username, .v-slot-os-userposition, .v-slot-os-useremail { |
| .os-username { |
| //padding-top: 3px; |
| color: valo-font-color($os-main-header-bg); |
| font-weight: bold; |
| /* font-size: $v-font-size * $v-scaling-factor--large; */ |
| /* padding-left: $v-font-size * $rows; */ |
| padding-left: $v-font-size; |
| line-height: $v-unit-size; |
| @if $rows == 2 or $rows == 3 { |
| /* font-size: $v-font-size; */ |
| } |
| } |
| .os-userposition { |
| color: valo-font-color($os-main-header-bg); |
| /* font-size: $v-font-size * $v-scaling-factor--large; */ |
| /* padding-left: $v-font-size * $rows; */ |
| padding-left: $v-font-size; |
| line-height: $v-unit-size; |
| @if $rows == 2 or $rows == 3 { |
| /* font-size: $v-font-size; */ |
| } |
| } |
| .os-useremail { |
| font-size: $v-font-size; //(8px?) |
| color: valo-font-color($os-main-header-bg); |
| } |
| /* font-size: $v-font-size; */ |
| } |
| |
| @if $rows==2 { |
| .v-slot-os-useremail { |
| display: none; |
| } |
| } |
| |
| @if $os-theme-desig == "cxo" { |
| .os-userlogoutbutton, .os-usermenubutton { |
| /* content: ' '; */ |
| .v-icon { |
| display: none; |
| } |
| } |
| |
| .os-userlogoutbutton { |
| @include os-button-usermenu; |
| background: $os-mid-contrast; |
| /* @if $rows == 2 or $rows == 3 { */ |
| &.v-button { |
| @include box-shadow(2px 1px 7px rgba(0,0,0,0.35)); |
| @include os-icon-font ( $float: right, |
| $content: '\f2f5', |
| $size: $v-font-size, |
| $placement: after, |
| $line-height: $v-unit-size, /* is button size */ |
| $background: "nochange"); |
| /* &:after {top: $v-unit-size/2 - get_crisp_size($initial-font-size: $v-font-size)/2;} */ |
| } |
| /* } */ |
| /* @else { */ |
| /* @include os-icon-font ( $float: right, */ |
| /* $content: '\f2f5', */ |
| /* $size: $v-font-size * $v-scaling-factor--large, */ |
| /* $placement: after); */ |
| /* } */ |
| |
| /* color: valo-font-color($os-mid-contrast); */ |
| /* &:after { */ |
| /* line-height: $v-unit-size; */ |
| /* } */ |
| |
| .v-icon { |
| display: none; |
| } |
| } |
| |
| .os-usermenubutton { |
| @include os-button-usermenu; |
| |
| /* @if $rows == 2 or $rows == 3 { */ |
| &.v-button { |
| @include box-shadow(2px 1px 7px rgba(0,0,0,0.35)); |
| @include os-icon-font ( $float: right, |
| $content: '\f0c9', |
| $size: $v-font-size, |
| $line-height: $v-unit-size, /* is button size */ |
| $placement: after, |
| $background: "nochange"); |
| } |
| /* &:after {top: $v-unit-size/2 - get_crisp_size($initial-font-size: $v-font-size)/2;} */ |
| |
| /* } */ |
| /* @else { */ |
| /* @include os-icon-font ( $float: right, */ |
| /* $content: '\f0c9', */ |
| /* $size: $v-font-size * $v-scaling-factor--large, */ |
| /* $placement: after); */ |
| /* } */ |
| |
| /* color: valo-font-color($os-button-color); */ |
| /* &:after { */ |
| /* line-height: $v-unit-size; */ |
| /* } */ |
| |
| /* .v-popup-indicator { */ |
| /* display: none; */ |
| /* } */ |
| } |
| } |
| @else { |
| .os-userlogoutbutton, .os-usermenubutton { |
| content: ' '; |
| @include box-shadow(none); |
| } |
| |
| .os-userlogoutbutton { |
| @include os-button-usermenu; |
| |
| @if $rows == 2 or $rows == 3 { |
| @include os-icon-font ( $float: right, |
| $content: '\f2f5', |
| $size: $v-font-size, |
| $placement: after); |
| } |
| @else { |
| @include os-icon-font ( $float: right, |
| $content: '\f2f5', |
| $size: $v-font-size * $v-scaling-factor--large, |
| $placement: after); |
| } |
| |
| color: valo-font-color($os-main-header-bg); |
| &:after { |
| line-height: $v-unit-size; |
| } |
| |
| .v-icon { |
| display: none; |
| } |
| } |
| |
| .os-usermenubutton { |
| @include os-button-usermenu; |
| |
| @if $rows == 2 or $rows == 3 { |
| @include os-icon-font ( $float: right, |
| $content: '\f0c9', |
| $size: $v-font-size, |
| $placement: after); |
| } |
| @else { |
| @include os-icon-font ( $float: right, |
| $content: '\f0c9', |
| $size: $v-font-size * $v-scaling-factor--large, |
| $placement: after); |
| } |
| |
| color: valo-font-color($os-main-header-bg); |
| &:after { |
| line-height: $v-unit-size; |
| } |
| |
| .v-popup-indicator { |
| display: none; |
| } |
| } |
| } |
| } |
| |
| /// Accordion that opens when clicking the according user-menu button. |
| @mixin os-user-accordion { |
| ///@todo find out what this is used for. |
| $iconfont:true; |
| |
| .v-accordion { |
| border: 0px; |
| } |
| .v-tree { |
| padding-top: floor($v-unit-size/5); |
| padding-bottom: floor($v-unit-size/5); |
| } |
| .v-accordion-item { |
| border-top-width: 0px !important; |
| background: $os-light-contrast; |
| } |
| |
| /// Makes accordion container expand with content. |
| .v-accordion-item-content { |
| .v-gridlayout-slot { |
| position: relative; |
| } |
| .v-formlayout-contentcell .v-gridlayout .v-gridlayout-slot { |
| position: absolute; |
| } |
| .v-table-body-wrapper { |
| min-width: $v-unit-size * 8; |
| min-height: $v-unit-size * 3; |
| width: auto !important; |
| height: auto !important; |
| } |
| } |
| |
| .v-popupbutton-popup-os-usermenubutton.v-popupview-popup { |
| padding: 0px; |
| |
| .v-accordion { |
| width: auto !Important; |
| /* min-width: 500px; */ |
| |
| [class*='os-menutree-'] { |
| > .v-tree { |
| width: 100% !important; |
| } |
| .v-tree-node-caption:hover { |
| color: $v-focus-color; |
| } |
| .v-tree-node-selected { |
| color: $v-focus-color; |
| font-weight: bold; |
| &::after { |
| background: transparent; |
| } |
| } |
| } |
| } |
| |
| .v-accordion-item-caption { |
| > .v-caption { |
| border-top: $v-border; |
| border-bottom-width: 0px; |
| background-image: none; |
| //background-color: $os-mid-contrast; |
| > .v-captiontext { |
| @include os-icon-font($content: '\f138'); |
| &::before { |
| padding-right: ceil($v-unit-size/3); |
| } |
| } |
| > img.v-icon { |
| @if $iconfont==true { |
| display: none; |
| } |
| } |
| } |
| } |
| .v-accordion-item-open { |
| //background-color: get_contrast($os-fn-medium, $os-main-header-bg, $os-fn-desaturate); |
| .v-accordion-item-caption { |
| > .v-caption { |
| background-color: $v-focus-color; |
| border-top: $v-border; |
| border-top-color: $v-focus-color; |
| color: valo-font-color($v-focus-color); |
| > .v-captiontext { |
| @include os-icon-font($content: '\f13a'); |
| &::before { |
| padding-right: 10px; |
| } |
| color: $v-focus-color; |
| color: valo-font-color($v-focus-color); |
| font-weight: bold; |
| } |
| } |
| } |
| } |
| .v-captiontext, [class*='-caption'] { |
| //font-size: $v-font-size; |
| } |
| } |
| } |