| @mixin os-user($rows: 2) { |
| .v-horizontallayout-UserHandler { |
| margin-right: $os-unit-size; |
| //border: $os-border; |
| margin-left: $os-unit-size; |
| } |
| |
| .v-slot-os-userportrait { |
| width: auto; |
| height: auto; |
| } |
| .os-userportrait { |
| img { |
| border-radius: 50%; |
| width: $rows * $os-unit-size; |
| height: $rows * $os-unit-size; |
| border: 0px solid grey; |
| padding-right: floor(($rows * $os-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: $os-font-size * $os-l-font-factor; |
| padding-left: $os-font-size * $rows; |
| line-height: $os-unit-size; |
| @if $rows == 2 or $rows == 3 { |
| font-size: $os-font-size; |
| } |
| } |
| .os-userposition { |
| color: valo-font-color($os-main-header-bg); |
| font-size: $os-font-size * $os-l-font-factor; |
| padding-left: $os-font-size * $rows; |
| line-height: $os-unit-size; |
| @if $rows == 2 or $rows == 3 { |
| font-size: $os-font-size; |
| } |
| } |
| .os-useremail { |
| font-size: $os-font-size; //(8px?) |
| color: valo-font-color($os-main-header-bg); |
| } |
| font-size: $os-font-size; |
| } |
| |
| @if $rows==2 { |
| .v-slot-os-useremail { |
| display: none; |
| } |
| } |
| |
| .os-userlogoutbutton, .os-usermenubutton { |
| content: ' '; |
| } |
| |
| .os-userlogoutbutton { |
| @include os-button-usermenu; |
| |
| @if $rows == 2 or $rows == 3 { |
| @include os-icon-font ( $float: right, |
| $content: '\f08b', |
| $size: $os-font-size, |
| $placement: after); |
| } |
| @else { |
| @include os-icon-font ( $float: right, |
| $content: '\f08b', |
| $size: $os-font-size * $os-l-font-factor, |
| $placement: after); |
| } |
| |
| color: valo-font-color($os-main-header-bg); |
| &:after { |
| line-height: $os-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: $os-font-size, |
| $placement: after); |
| } |
| @else { |
| @include os-icon-font ( $float: right, |
| $content: '\f0c9', |
| $size: $os-font-size * $os-l-font-factor, |
| $placement: after); |
| } |
| |
| color: valo-font-color($os-main-header-bg); |
| &:after { |
| line-height: $os-unit-size; |
| } |
| |
| .v-popup-indicator { |
| display: none; |
| } |
| } |
| } |
| |
| @mixin os-user-accordion { |
| |
| $iconfont:true; |
| |
| .v-accordion { |
| border: 0px; |
| } |
| .v-tree { |
| padding-top: floor($os-unit-size/5); |
| padding-bottom: floor($os-unit-size/5); |
| } |
| .v-accordion-item { |
| border-top-width: 0px !important; |
| background: $os-light-contrast; |
| } |
| |
| .v-popupbutton-popup-os-usermenubutton.v-popupview-popup { |
| padding: 0px; |
| |
| .v-accordion { |
| [class*='os-menutree-'] { |
| > .v-tree { |
| width: 100% !important; |
| } |
| .v-tree-node-caption:hover { |
| color: $os-highlight-color; |
| } |
| .v-tree-node-selected { |
| color: $os-highlight-color; |
| font-weight: bold; |
| &::after { |
| background: transparent; |
| } |
| } |
| } |
| } |
| |
| .v-accordion-item-caption { |
| > .v-caption { |
| border-top: $os-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($os-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: $os-highlight-color; |
| border-top: $os-border; |
| border-top-color: $os-highlight-color; |
| color: valo-font-color($os-highlight-color); |
| > .v-captiontext { |
| @include os-icon-font($content: '\f13a'); |
| &::before { |
| padding-right: 10px; |
| } |
| color: $os-highlight-color; |
| color: valo-font-color($os-highlight-color); |
| font-weight: bold; |
| } |
| } |
| } |
| } |
| .v-captiontext, [class*='-caption'] { |
| //font-size: $os-font-size; |
| } |
| } |
| } |