| /** |
| * |
| * @group panel |
| */ |
| $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default; |
| |
| /** |
| * |
| * @group panel |
| */ |
| $v-panel-border: $v-border !default; |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-panel) - |
| * @param {bool} $include-additional-styles - |
| * |
| * @group panel |
| */ |
| @mixin valo-panel ($primary-stylename: v-panel, $include-additional-styles: contains($v-included-additional-styles, panel)) { |
| |
| .#{$primary-stylename} { |
| @include valo-panel-style; |
| overflow: visible !important; |
| } |
| |
| .#{$primary-stylename}-caption { |
| @include valo-panel-caption-style; |
| border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0; |
| } |
| |
| .#{$primary-stylename}-content { |
| @include box-sizing(border-box); |
| width: 100%; |
| height: 100%; |
| @include valo-panel-adjust-content-margins; |
| } |
| |
| |
| @if $include-additional-styles { |
| .#{$primary-stylename}-borderless { |
| @include valo-panel-borderless-style; |
| } |
| |
| .#{$primary-stylename}-well { |
| @include valo-panel-well-style; |
| } |
| |
| .#{$primary-stylename}-scroll-divider { |
| @include valo-panel-scroll-divider-style; |
| } |
| |
| .#{$primary-stylename}-caption.v-horizontallayout { |
| height: auto !important; |
| line-height: 0; |
| |
| .v-slot { |
| vertical-align: middle; |
| } |
| |
| .v-label { |
| line-height: $v-unit-size; |
| } |
| } |
| } |
| |
| } |
| |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-panel) - |
| * @param {color} $background-color ($v-panel-background-color) - |
| * @param {list} $shadow ($v-shadow) - |
| * @param {list} $border ($v-panel-border) - |
| * @param {string} $border-radius ($v-border-radius) - |
| * |
| * @group panel |
| */ |
| @mixin valo-panel-style ($primary-stylename: v-panel, $background-color : $v-panel-background-color, $shadow : $v-shadow, $border : $v-panel-border, $border-radius : $v-border-radius ) { |
| background: $background-color; |
| color: valo-font-color($background-color); |
| border-radius: $border-radius; |
| border: valo-border($border: $border, $color: darkest-color($background-color, $v-app-background-color), $strength: 0.7); |
| @include box-shadow(valo-bevel-and-shadow($shadow: $shadow)); |
| } |
| |
| |
| |
| /** |
| * |
| * |
| * @param {color} $background-color ($v-background-color) - |
| * @param {list} $bevel ($v-bevel) - |
| * @param {list} $gradient (valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4) - |
| * @param {list} $border ($v-panel-border) - |
| * |
| * @group panel |
| */ |
| @mixin valo-panel-caption-style ( $background-color : $v-background-color, $bevel : $v-bevel, $gradient : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4, $border : $v-panel-border ) { |
| @include box-sizing(border-box); |
| padding: 0 round($v-unit-size/3); |
| line-height: $v-unit-size - first-number($v-border); |
| $bg: $background-color; |
| |
| $shadow: null; |
| @if color-luminance($background-color) < color-luminance($v-background-color) - 10 { |
| $border-style: valo-border($border: $border, $color: $bg, $strength: 0.7); |
| $shadow: 0 0 0 first-number($border-style) first-color($border-style); |
| border-bottom: none; |
| margin-bottom: first-number($border-style); |
| |
| .v-ie8 & { |
| outline: first-number($border-style) solid first-color($border-style); |
| } |
| } @else { |
| border-bottom: valo-border($border: $border, $color: $v-background-color, $strength: 0.7); |
| } |
| @include valo-gradient($color: $bg, $gradient: $gradient); |
| color: valo-font-color($bg); |
| font-weight: $v-caption-font-weight; |
| font-size: $v-caption-font-size; |
| @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $shadow: $shadow, $gradient: $gradient)); |
| text-shadow: valo-text-shadow(valo-font-color($bg), $bg); |
| } |
| |
| |
| |
| /** |
| * |
| * |
| * @param {list} $shadow (false) - |
| * |
| * @group panel |
| */ |
| @mixin valo-panel-well-style ($shadow: false) { |
| @if $shadow == false { |
| $new-shadow: (); |
| @if list-of-lists($v-shadow) { |
| @each $part in $v-shadow { |
| $new-part: join(inset, $part); |
| $new-shadow: $new-shadow, $new-part; |
| } |
| } @else { |
| $new-shadow: join(inset, $v-shadow); |
| } |
| $shadow: 0 1px 0 0 v-tint, $new-shadow; |
| } |
| $bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%); |
| background: $bg; |
| color: valo-font-color($bg); |
| @include box-shadow(valo-bevel-and-shadow($shadow: $shadow)); |
| border-radius: $v-border-radius; |
| border: valo-border(); |
| |
| > div > [class*="-caption"] { |
| background: transparent; |
| @include box-shadow(none); |
| } |
| } |
| |
| |
| |
| /** |
| * |
| * |
| * |
| * @group panel |
| */ |
| @mixin valo-panel-borderless-style { |
| background: transparent; |
| color: inherit; |
| border: none; |
| border-radius: 0; |
| @include box-shadow(none); |
| |
| > div > [class*="-caption"] { |
| background: transparent; |
| @include box-shadow(none); |
| color: inherit; |
| padding: 0; |
| margin: 0 round($v-unit-size/3); |
| border-bottom: none; |
| } |
| } |
| |
| |
| |
| /** |
| * |
| * |
| * @param {size} $border-width (max(1px, first-number($v-panel-border))) - |
| * |
| * @group panel |
| */ |
| @mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) { |
| > [class*="-captionwrap"] { |
| position: relative; |
| z-index: 2; |
| |
| &:after { |
| content: ""; |
| position: absolute; |
| bottom: -$border-width; |
| right: 0; |
| left: 0; |
| height: 0; |
| border-top: $border-width solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); |
| $border-color: first-color(valo-border($color: $v-app-background-color, $strength: 1)); |
| border-color: rgba($border-color, .5); |
| } |
| } |
| |
| > [class*="-content"] { |
| &:before { |
| content: ""; |
| position: absolute; |
| z-index: 2; |
| top: 0; |
| height: 0; |
| border-top: $border-width solid $v-app-background-color; |
| left: 0; |
| right: 0; |
| } |
| } |
| } |
| |
| |
| |
| /** |
| * |
| * |
| * |
| * @group panel |
| */ |
| @mixin valo-panel-adjust-content-margins { |
| > .v-margin-top { |
| padding-top: round($v-unit-size/3); |
| } |
| |
| > .v-margin-right { |
| padding-right: round($v-unit-size/3); |
| } |
| |
| > .v-margin-bottom { |
| padding-bottom: round($v-unit-size/3); |
| } |
| |
| > .v-margin-left { |
| padding-left: round($v-unit-size/3); |
| } |
| } |