| /*global style adjustments, override specifically */ |
| //// |
| /// @group layout/pageframe |
| //// |
| |
| /// Global style adjustments that don't belong to a specific component. |
| @mixin os-pageframe { |
| |
| /* Notification popup style; unfortunately */ |
| /* this will happen globally, because notifications are outside of other elements */ |
| .v-Notification { |
| .v-Notification-caption { |
| font-size: $v-font-size * 2; |
| } |
| .v-Notification-description{ |
| font-size: $v-font-size * 1.2; |
| display: block; |
| text-align: center; |
| margin-left: 0px; |
| margin: 0 auto; |
| } |
| } |
| |
| |
| div.v-slider-base { |
| width: $v-unit-size * 10; |
| } |
| |
| |
| /* external welcome page iframe container */ |
| .v-verticallayout-os-welcome { |
| padding: 0px !important; |
| } |
| iframe { |
| border-width: 0px; |
| } |
| |
| .v-label-os-dashboardtile { |
| color: valo-font-color($os-button-color); |
| font-size: 9px; |
| line-height: 1.2; |
| } |
| |
| .v-label-os-dashboardtile-number { |
| font-size: 25px; |
| } |
| |
| .v-slot-os-dashboardtile { |
| vertical-align: middle; |
| } |
| |
| .v-verticallayout-os-dashboardtile { |
| font-weight: $v-font-weight + 300; |
| cursor: null; |
| background-color: $os-button-color; |
| border: 0px; |
| border-radius: $v-border-radius; |
| gradient: null; |
| bevel: $v-bevel; |
| shadow: $v-shadow; |
| states: (normal disabled); |
| margin-left: floor($v-unit-size/5); |
| |
| &.v-pressed { |
| background-color: get_color_mix($v-focus-color, #fff, 70) !important; |
| border-color: get_color_mix($v-focus-color, #fff, 70) !important; |
| } |
| &:after { |
| transition: none; |
| } |
| &:hover, &:focus, &:active { |
| background-color: $os-odd-highlight; |
| border-color: $os-odd-highlight; |
| color: valo-font-color($os-odd-highlight); |
| } |
| &:focus:after { |
| border-color: transparent; |
| transition: none; |
| } |
| } |
| |
| input::selection { |
| /* text-shadow: 0px 0px 0px $os-textfield-shade; */ |
| /* color: black; */ |
| /* background: $v-focus-color; */ |
| } |
| |
| /* checkbox-global */ |
| :root & .v-checkbox { |
| @include os-checkbox(); |
| padding-top: inherit; |
| > input ~ label:before, > input~ label:after { |
| margin-top: inherit; |
| } |
| > input ~ label:before { |
| margin-top: inherit; |
| } |
| } |
| |
| /* borders for views: */ |
| @if $os-bordered==true { |
| .v-verticallayout-part { |
| border: $v-border; |
| /* padding: 10px; */ |
| } |
| } |
| |
| |
| /* several padding adjustments */ |
| /* .l-yview-provider>.l-control > * > .l-control { */ |
| /* padding: 10px; */ |
| /* } */ |
| |
| |
| .v-slot-os-work-area { |
| /* padding: 20px; */ |
| } |
| |
| h1 { |
| @include os-typeface-h1; |
| } |
| |
| |
| /* popup with full content */ |
| &.v-overlay-container >.v-window { |
| height: auto !important; |
| width: auto !important; |
| /// popup/overlay container expands/shrinks with content |
| .v-widget { |
| position: relative !important; |
| } |
| .v-table-body-wrapper { |
| width: auto; |
| height: auto; |
| } |
| .popupContent { |
| @include os-popup-perspective; |
| } |
| } |
| &.v-overlay-container > div[style*="left: 0px; top: 0px;"][style*="width: 100%; height: 100%"].v-window.v-has-width.v-has-height { |
| height: 100% !important; |
| width: 100% !important; |
| } |
| &.v-overlay-container .v-window-modalitycurtain { |
| opacity: 0; |
| } |
| |
| // panel default style without borders |
| .v-panel { |
| border-width: 0px; |
| } |
| |
| // colors/styles |
| .v-button, .v-nativebutton { |
| @include os-button; |
| } |
| |
| .os-data-component >.v-button { |
| @include os-button-data; |
| } |
| |
| .v-textfield { |
| @include os-textfield; |
| } |
| .v-textarea { |
| @include os-textfield; |
| } |
| .v-filterselect { |
| @include os-textfield; |
| } |
| .os-view > .v-expand > .v-slot:nth-child(1) { |
| display: none; |
| } |
| .os-view-header-h2, .v-label-h2 { |
| @include os-typeface-view-h2; |
| //font-weight: 800; |
| } |
| |
| .os-org-container { |
| background: transparent !important; |
| } |
| /*// border of site-encapsulating container |
| .v-ui > .v-panel { |
| border-width: 0px; |
| } |
| */ |
| |
| .os-data-area { |
| /* padding: $os-layout-margin; */ |
| } |
| |
| /* WORKAROUNDS */ |
| .os-multi-area .os-data-area { //Landkarten Scrollbalken |
| overflow: inherit !important; |
| } |
| |
| input.gwt-FileUpload { |
| z-index:-1 !important; |
| } |
| .v-customcomponent .v-button { |
| @include os-button-no-margin; |
| } |
| |
| |
| .os-mparttoolbararea, .os-embedded-toolbar { |
| width: 100%; |
| min-height: $v-unit-size; //$os-button-height; |
| border-bottom: $v-border; |
| background: $os-light-contrast; |
| color: valo-font-color($os-sub-header-bg); |
| |
| .v-button { |
| @include os-button-toolbar; |
| @include box-shadow(none); /*valo-defined mixin*/ |
| } |
| |
| |
| .v-button.v-spliter { /* splitter typo is actually correct! */ |
| background: inherit; |
| width: 0; |
| padding: 0; |
| /* border-right: $v-border; */ |
| } |
| span.v-button-caption { |
| vertical-align: middle; |
| } |
| .v-slot-v-spliter { |
| width: $v-layout-spacing-horizontal *2; |
| } |
| .os-toolbar-state-container { |
| min-height: $v-vunit-size; |
| .v-caption-os-toolbar-state { |
| line-height: $v-vunit-size; |
| margin: 0px $v-layout-spacing-horizontal/2 0px $v-layout-spacing-horizontal/2; |
| padding-bottom: 0px; |
| } |
| .v-image.os-toolbar-state { |
| display: none; |
| } |
| } |
| } |
| |
| |
| /* SPLITPANEL */ |
| .v-splitpanel-vertical { |
| @include valo-splitpanel-style ( |
| $primary-stylename: v-splitpanel, |
| $splitter-size: $os-splitter-size, |
| $splitter-active-size: $os-splitter-size, |
| $splitter-handle-visible: true, |
| $orientation: vertical ); |
| |
| > div { |
| height: $os-splitter-size; |
| > .v-splitpanel-vsplitter { |
| div:before { |
| border: transparent; |
| background-color: $os-splitter-shade; |
| @if $os-bordered == false { |
| background-image: none; |
| } |
| } |
| div:after { |
| border-color: get_contrast($os-fn-medium, $os-splitter-shade, $os-fn-desaturate); |
| } |
| } |
| } |
| } |
| .v-splitpanel-horizontal { |
| @include valo-splitpanel-style ( |
| $primary-stylename: v-splitpanel, |
| $splitter-size: $os-splitter-size, |
| $splitter-active-size: $os-splitter-size, |
| $splitter-handle-visible: true, |
| $orientation: horizontal ); |
| > div { |
| width: $os-splitter-size; |
| > .v-splitpanel-hsplitter { |
| div:before { |
| border: transparent; |
| background-color: $os-splitter-shade; |
| @if $os-bordered == false { |
| background-image: none; |
| } |
| } |
| div:after { |
| border-color: get_contrast($os-fn-medium, $os-splitter-shade, $os-fn-desaturate); |
| } |
| } |
| } |
| } |
| |
| /* PROGRESS */ |
| .os-important .v-progressbar-indicator { |
| background: $v-error-indicator-color none; |
| } |
| .v-loading-indicator { |
| opacity: 0; |
| } |
| |
| |
| /* SPINNER */ |
| .v-app-loading:before { |
| left: auto; |
| width: 100%; |
| height: 32px; |
| padding: 0px; |
| margin-top: 0px; |
| margin-left: 0px; |
| background: transparent $os-loading-animation no-repeat 50%; |
| border-radius: $v-border-radius; |
| } |
| |
| |
| } |
| |