| /** |
| * @group window |
| */ |
| $v-window-background-color: $v-panel-background-color !default; |
| |
| /** |
| * @group window |
| */ |
| $v-window-border-radius: $v-border-radius !default; |
| |
| /** |
| * @group window |
| */ |
| $v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default; |
| |
| /** |
| * @group window |
| */ |
| $v-window-animate-in: valo-animate-in-fade 140ms !default; |
| |
| /** |
| * @group window |
| */ |
| $v-window-animate-out: valo-animate-out-scale-down-fade 100ms !default; |
| |
| /** |
| * @group window |
| */ |
| $v-window-modality-curtain-background-color: #222 !default; |
| |
| |
| @if $v-animations-enabled { |
| @include keyframes(valo-modal-window-indication) { |
| 0% { opacity: 0; } |
| 100% { opacity: 1; } |
| } |
| |
| @include keyframes(valo-animate-out-scale-down-fade) { |
| 100% { |
| @include transform(scale(0.8)); |
| opacity: 0; |
| } |
| } |
| } |
| |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-window) - |
| * |
| * @group window |
| */ |
| @mixin valo-window ($primary-stylename: v-window) { |
| |
| .#{$primary-stylename} { |
| @include valo-overlay-style($background-color: $v-window-background-color, $animate-in: $v-window-animate-in, $animate-out: $v-window-animate-out); |
| |
| @if $v-window-shadow { |
| @if $v-window-shadow == none { |
| @include box-shadow(none); |
| } @else if $v-window-shadow != $v-overlay-shadow { |
| @include box-shadow(valo-bevel-and-shadow($shadow: $v-window-shadow)); |
| } |
| } |
| @if $v-window-border-radius != $v-border-radius { |
| border-radius: $v-window-border-radius; |
| } |
| padding: 0; |
| min-width: 4*$v-unit-size !important; |
| min-height: $v-unit-size !important; |
| white-space: nowrap; |
| overflow: hidden !important; |
| |
| @if $v-animations-enabled { |
| @include transition(width 200ms, height 200ms, top 200ms, left 200ms); |
| |
| &.#{$primary-stylename}-animate-in { |
| @include transition(none); |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-modalitycurtain { |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| @include radial-gradient(circle at 50% 50%, $v-window-modality-curtain-background-color, darken($v-window-modality-curtain-background-color, valo-gradient-opacity()), $fallback: $v-window-modality-curtain-background-color); |
| @include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%)); |
| @if $v-animations-enabled { |
| @include valo-animate-in-fade($duration: 400ms, $delay: 100ms); |
| .v-op12 & { |
| // Opera 12 has a shitbreak with the fade-in (flickers) |
| @include animation(none); |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-draggingCurtain { |
| position: fixed !important; |
| } |
| |
| .#{$primary-stylename}-resizingCurtain + .v-window, |
| .#{$primary-stylename}-draggingCurtain + .v-window { |
| @include transition(none); |
| } |
| |
| $scroll-divider-width: max(1px, first-number($v-border)); |
| |
| .#{$primary-stylename}-outerheader { |
| cursor: move; |
| position: absolute; |
| z-index: 2; |
| top: 0; |
| left: 0; |
| right: 0; |
| // Raise above the window content, if that is ever promoted to a layer |
| @include transform(translatez(0)); |
| |
| &:after { |
| content: ""; |
| position: absolute; |
| bottom: -$scroll-divider-width; |
| right: 0; |
| left: 0; |
| height: 0; |
| $_bg: $v-window-background-color; |
| border-top: $scroll-divider-width solid first-color(valo-border($strength: 0.5)); |
| $border-color: first-color(valo-border($strength: 1)); |
| border-color: rgba($border-color, .5); |
| } |
| } |
| |
| .#{$primary-stylename}-header { |
| line-height: $v-unit-size - 1px; |
| padding-left: round($v-unit-size/3); |
| margin-right: $v-unit-size * 2; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| color: blend-normal(rgba(valo-font-color($v-window-background-color), .7), $v-window-background-color); |
| } |
| |
| //Adjust header margin according to visible buttons on header |
| .#{$primary-stylename}-restorebox-disabled, |
| .#{$primary-stylename}-maximizebox-disabled { |
| ~ .#{$primary-stylename}-closebox ~ .#{$primary-stylename}-header { |
| margin-right: $v-unit-size; |
| } |
| ~ .#{$primary-stylename}-closebox-disabled ~ .#{$primary-stylename}-header { |
| margin-right: round($v-unit-size/3); |
| } |
| } |
| |
| .#{$primary-stylename}-closebox, |
| .#{$primary-stylename}-maximizebox, |
| .#{$primary-stylename}-restorebox { |
| position: absolute; |
| z-index: 3; |
| top: 0; |
| right: 0; |
| @include box-sizing(border-box); |
| width: $v-unit-size - round($v-unit-size/9); |
| height: $v-unit-size - 1px; |
| background-color: $v-window-background-color; |
| line-height: $v-unit-size - 3px; |
| text-align: center; |
| cursor: pointer; |
| font-size: round($v-font-size * 1.3); |
| color: valo-font-color($v-window-background-color, .4); |
| |
| @if $v-animations-enabled { |
| @include transition(color 140ms); |
| } |
| |
| &:focus { |
| outline: none; |
| } |
| |
| &:hover { |
| @include opacity(1); |
| color: $v-selection-color; |
| } |
| |
| &:active { |
| color: inherit; |
| } |
| } |
| |
| .#{$primary-stylename}-closebox { |
| padding-right: round($v-unit-size/9); |
| @include valo-window-close-icon-style; |
| |
| @if $v-window-border-radius > 0 { |
| border-radius: 0 $v-window-border-radius 0 $v-window-border-radius; |
| } |
| } |
| |
| .#{$primary-stylename}-maximizebox, |
| .#{$primary-stylename}-restorebox { |
| right: $v-unit-size - round($v-unit-size/9); |
| padding-left: round($v-unit-size/9); |
| |
| @if $v-window-border-radius > 0 { |
| border-radius: 0 0 0 $v-window-border-radius; |
| |
| + .#{$primary-stylename}-closebox { |
| border-bottom-left-radius: 0; |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-closebox-disabled, |
| .#{$primary-stylename}-resizebox-disabled, |
| .#{$primary-stylename}-restorebox-disabled, |
| .#{$primary-stylename}-maximizebox-disabled { |
| display: none; |
| |
| + .#{$primary-stylename}-closebox { |
| width: $v-unit-size; |
| padding-right: 0; |
| border-bottom-left-radius: $v-window-border-radius; |
| } |
| } |
| |
| .#{$primary-stylename}-maximizebox { |
| @include valo-window-maximize-icon-style; |
| } |
| |
| .#{$primary-stylename}-restorebox { |
| @include valo-window-restore-icon-style; |
| } |
| |
| .v-window > .popupContent, |
| .#{$primary-stylename}-wrap, |
| .#{$primary-stylename}-contents, |
| .#{$primary-stylename}-contents > .v-scrollable { |
| height: 100%; |
| } |
| |
| .#{$primary-stylename}-contents { |
| @include box-sizing(border-box); |
| border-radius: $v-border-radius; |
| margin-top: 0 !important; |
| |
| > .v-scrollable { |
| @include valo-panel-adjust-content-margins; |
| |
| > .v-formlayout { |
| @include valo-formlayout-margin(round($v-unit-size/3)); |
| } |
| |
| position: relative; |
| |
| &:focus { |
| outline: none; |
| } |
| |
| &:before { |
| content: ""; |
| position: absolute; |
| z-index: 2; |
| top: 0; |
| height: 0; |
| border-top: $scroll-divider-width solid $v-window-background-color; |
| left: 0; |
| right: 0; |
| } |
| |
| .v-panel-captionwrap:after { |
| border-color: first-color(valo-border($strength: 0.5)); |
| } |
| |
| .v-panel-content:before { |
| border-color: $v-window-background-color; |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-footer { |
| height: 0; |
| } |
| |
| .#{$primary-stylename}-resizebox { |
| position: absolute; |
| z-index: 1000; |
| right: 0; |
| bottom: 0; |
| width: round($v-unit-size/2); |
| height: round($v-unit-size/2); |
| cursor: nwse-resize; |
| |
| .v-ie8 & { |
| background: #000; |
| filter: alpha(opacity=0.1); |
| } |
| |
| .v-ie8 &, |
| .v-ie9 & { |
| cursor: se-resize; |
| } |
| } |
| |
| |
| // Flash modal window when clicking on the curtain |
| .#{$primary-stylename}-modalitycurtain:active { |
| ~ .v-window { |
| @include animation(none); |
| } |
| } |
| |
| |
| .#{$primary-stylename}-top-toolbar, |
| .#{$primary-stylename}-bottom-toolbar { |
| > .v-widget { |
| vertical-align: top; |
| } |
| |
| .v-label { |
| line-height: $v-unit-size - 1px; |
| } |
| |
| .v-spacing { |
| width: round($v-layout-spacing-horizontal/2); |
| } |
| } |
| |
| .#{$primary-stylename}-top-toolbar { |
| &.v-layout { |
| padding: round($v-unit-size/5) round($v-unit-size/3); |
| position: relative; |
| z-index: 2; |
| border-top: valo-border($strength: 0.5); |
| border-bottom: valo-border($strength: 0.5); |
| background-color: $v-background-color; |
| } |
| |
| &.v-menubar { |
| margin: round($v-unit-size/3) round($v-unit-size/3) round($v-unit-size/6); |
| } |
| |
| &.v-menubar-borderless { |
| padding-left: round($v-unit-size/6); |
| padding-right: round($v-unit-size/6); |
| margin: round($v-unit-size/6) - first-number($v-border) 0; |
| } |
| } |
| |
| .#{$primary-stylename}-bottom-toolbar.v-layout { |
| padding: round($v-unit-size/5) round($v-unit-size/3); |
| @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color); |
| border-top: valo-border($strength: 0.5); |
| border-radius: 0 0 $v-border-radius $v-border-radius; |
| } |
| |
| .v-margin-left.v-margin-right.v-margin-top { |
| .#{$primary-stylename}-top-toolbar { |
| &.v-layout { |
| @include box-sizing(content-box); |
| margin: round($v-unit-size/-3) round($v-unit-size/-3) 0; |
| } |
| |
| &.v-menubar { |
| margin: 0; |
| } |
| |
| &.v-menubar-borderless { |
| margin: round($v-unit-size/6) - round($v-unit-size/3) round($v-unit-size/6) - round($v-unit-size/3) 0; |
| padding: 0; |
| } |
| } |
| } |
| |
| .v-margin-left.v-margin-right.v-margin-bottom { |
| .#{$primary-stylename}-bottom-toolbar { |
| &.v-layout { |
| @include box-sizing(content-box); |
| margin: 0 round($v-unit-size/-3) round($v-unit-size/-3); |
| } |
| } |
| } |
| |
| } |
| |
| |
| /** |
| * |
| * |
| * |
| * @group window |
| */ |
| @mixin valo-window-close-icon-style { |
| &:before { |
| // times cross |
| content: "\00d7"; |
| } |
| } |
| |
| /** |
| * |
| * |
| * |
| * @group window |
| */ |
| @mixin valo-window-maximize-icon-style { |
| &:before { |
| content: "+"; |
| } |
| } |
| |
| /** |
| * |
| * |
| * |
| * @group window |
| */ |
| @mixin valo-window-restore-icon-style { |
| &:before { |
| // en-dash |
| content: "\2013"; |
| } |
| } |