| @import "loading-indicator"; |
| @import "contextmenu"; |
| @import "overlay"; |
| @import "tooltip"; |
| @import "reconnect-dialog"; |
| |
| |
| /* |
| * A flag which is set to true when the global styles have been included in the compilation. |
| * Used to only include them once, if Valo is imported multiple times during the compilation |
| * (multiple theme support). |
| * |
| * @access private |
| * @type bool |
| */ |
| $valo-global-included: false !default; |
| |
| /* |
| * Global Valo related styles, containing styles which are necessary for the application |
| * and widgets to work correctly. |
| * |
| * @access private |
| */ |
| @mixin valo-global { |
| @if $valo-global-included == false { |
| |
| // Version info for the debug window |
| .v-vaadin-version:after { |
| content: "@version@"; |
| } |
| |
| // Core widget styles come before any other component (and are always included), |
| // so that it has the least specificity |
| @include valo-widget; |
| |
| .v-generated-body { |
| overflow: hidden; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
| |
| .v-app { |
| height: 100%; |
| // Cancel tap highlight from all elements inside the app |
| -webkit-tap-highlight-color: rgba(0,0,0,0); |
| |
| // Prevent iOS text size adjust after orientation change, without disabling user zoom |
| -webkit-text-size-adjust: 100%; |
| -ms-text-size-adjust: 100%; |
| -webkit-text-size-adjust: 100%; |
| |
| // Disable text selection by default |
| @include user-select(none); |
| |
| // Enable text selection for certain elements |
| input[type="text"], |
| .v-slot > .v-caption, |
| .v-gridlayout-slot > .v-caption, |
| .v-has-caption > .v-caption, |
| .v-formlayout-captioncell > .v-caption, |
| .v-csslayout > .v-caption { |
| @include user-select(text); |
| } |
| |
| // Removes clear button from input fields introduced by IE10 |
| input::-ms-clear { |
| display: none; |
| } |
| } |
| |
| .v-ui { |
| position: relative; |
| } |
| |
| // Prevent margin collapse |
| .v-ui.v-ui-embedded { |
| margin-top: -1px; |
| border-top: 1px solid transparent; |
| } |
| |
| .v-ui:focus { |
| outline: none; |
| } |
| |
| .v-overlay-container { |
| width: 0; |
| height: 0; |
| } |
| |
| .v-drag-element { |
| z-index: 60000; |
| // Override any other position properties |
| position: absolute !important; |
| cursor: default; |
| } |
| |
| .v-clip { |
| overflow: hidden; |
| } |
| |
| .v-scrollable { |
| overflow: auto; |
| |
| // "Unnecessary scrollbar" related fixes |
| > .v-widget { |
| // This is needed for IE |
| vertical-align: middle; |
| |
| // Needed for all browsers. Can't really show anything outside the |
| // scrolling area anyway, so we can safely hide any overflow |
| overflow: hidden; |
| } |
| } |
| |
| .v-ios.v-webkit .v-scrollable { |
| -webkit-overflow-scrolling: touch; |
| } |
| |
| // Disable native scrolling on iOS 5 due to issue #8792 |
| .v-ios5.v-webkit .v-scrollable { |
| -webkit-overflow-scrolling: none; |
| } |
| |
| //fix for #14813 - unable to scroll on iOS devices |
| .v-webkit.v-ios .v-browserframe { |
| -webkit-overflow-scrolling: touch; |
| overflow:auto; |
| } |
| |
| .v-assistive-device-only { |
| position: absolute; |
| top: -2000px; |
| left: -2000px; |
| width: 10px; |
| overflow: hidden; |
| } |
| |
| .v-icon { |
| cursor: inherit; |
| @include user-select(none); |
| } |
| |
| .v-icon, |
| .v-errorindicator, |
| .v-required-field-indicator { |
| display: inline-block; |
| line-height: inherit; |
| } |
| |
| .v-caption { |
| display: inline-block; |
| white-space: nowrap; |
| line-height: $v-line-height; |
| } |
| |
| .v-captiontext { |
| display: inline-block; |
| line-height: inherit; |
| } |
| |
| // Component global styles should also be included here |
| @if v-is-included(orderedlayout) { |
| @include valo-orderedlayout-global; |
| } |
| |
| @if v-is-included(gridlayout) { |
| @include valo-gridlayout-global; |
| } |
| |
| @if v-is-included(calendar) { |
| @include valo-calendar-global; |
| } |
| |
| @if v-is-included(colorpicker) { |
| @include valo-colorpicker-global; |
| } |
| |
| @if v-is-included(table) or v-is-included(treetable) { |
| @include valo-table-global; |
| } |
| |
| @if v-is-included(tabsheet) { |
| @include valo-tabsheet-global; |
| } |
| |
| @if v-is-included(splitpanel) { |
| @include valo-splitpanel-global; |
| } |
| |
| $valo-global-included: true; |
| } |
| } |
| |
| |
| $valo-shared-pathPrefix: null; |
| |
| @if $v-relative-paths == false { |
| $valo-shared-pathPrefix: "../valo/shared/"; |
| } |
| |
| /** |
| * Styles for the application root element. Outputs font, font color, background color and default |
| * cursor styles. |
| */ |
| @mixin valo-app-style { |
| font: $v-font-weight #{$v-font-size}/#{$v-line-height} $v-font-family; |
| color: $v-font-color; |
| background-color: $v-app-background-color; |
| cursor: default; |
| |
| // Default to Helvetica Neue on Macs instead of Helvetica, which has a slightly different baseline |
| @if $v-font-family == sans-serif { |
| .v-mac & { |
| font-family: "Helvetica Neue", sans-serif; |
| } |
| } |
| } |
| |
| /** |
| * Common application styles, such as loading indicators, tooltip and context menu styles, |
| * caption and icon defaults, basic HTML element resets. |
| * Should only be included once (done automatically when including the main valo mixin). |
| * |
| * @requires {mixin} valo-app-style |
| */ |
| @mixin valo-common { |
| |
| //@if & != null { |
| // &, |
| // &.v-app-loading { |
| // @include valo-app-style; |
| // } |
| //} @else { |
| &.v-app, |
| &.v-app-loading { |
| @include valo-app-style; |
| } |
| //} |
| |
| //&.v-overlay-container { |
| // position: absolute; |
| // top: 0; |
| //} |
| |
| .v-app-loading { |
| width: 100%; |
| height: 100%; |
| background: $v-app-background-color; |
| |
| $_size: 28px + round($v-unit-size/2); |
| |
| &:before { |
| content: ""; |
| position: fixed; |
| z-index: 100; |
| top: 45%; |
| left: 50%; |
| width: 28px; |
| height: 28px; |
| padding: round($v-unit-size/4); |
| margin-top: round($_size/-2); |
| margin-left: round($_size/-2); |
| background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50%; |
| border-radius: $v-border-radius; |
| } |
| |
| @if $v-app-loading-text != "" { |
| &:after { |
| position: fixed; |
| z-index: 100; |
| top: 45%; |
| padding-top: $_size; |
| text-align: center; |
| left: 0; |
| right: 0; |
| content: $v-app-loading-text; |
| } |
| } |
| } |
| |
| @include valo-loading-bar; |
| |
| |
| // Fallback spinner for browsers without CSS animations |
| .v-ie8 &, |
| .v-ie9 & { |
| .v-loading-indicator, |
| .v-loading-indicator-delay, |
| .v-loading-indicator-wait { |
| width: 28px !important; |
| height: 28px; |
| padding: round($v-unit-size/4); |
| background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50%; |
| border-radius: $v-border-radius; |
| top: round($v-unit-size/4); |
| right: round($v-unit-size/4); |
| left: auto; |
| filter: alpha(opacity=50); |
| |
| &[style*="none"] { |
| display: none !important; |
| } |
| } |
| |
| .v-loading-indicator-wait { |
| filter: alpha(opacity=100); |
| } |
| } |
| |
| .v-scrollable:focus { |
| outline: none; |
| } |
| |
| img.v-icon { |
| vertical-align: middle; |
| } |
| |
| .v-caption { |
| @include valo-caption-style; |
| } |
| |
| .v-caption-on-left .v-caption, |
| .v-caption-on-right .v-caption { |
| padding-top: 0; |
| padding-bottom: 0; |
| } |
| |
| .v-icon + .v-captiontext, |
| .v-icon + span { |
| margin-left: round($v-unit-size/5); |
| |
| &:empty { |
| margin-left: 0; |
| } |
| } |
| |
| .v-errorindicator { |
| @include valo-error-indicator-style; |
| } |
| |
| .v-required-field-indicator { |
| color: $v-required-field-indicator-color; |
| padding: 0 .2em; |
| } |
| |
| select { |
| font: inherit; |
| font-weight: 400; |
| line-height: inherit; |
| padding: round($v-unit-size/8); |
| margin: 0; |
| border-radius: $v-border-radius; |
| |
| @include valo-nativeselect-select-style; |
| } |
| |
| button { |
| font: inherit; |
| font-weight: 400; |
| line-height: $v-line-height; |
| } |
| |
| a { |
| @include valo-link-style; |
| } |
| |
| .v-disabled { |
| cursor: default !important; |
| } |
| |
| @include valo-drag-element; |
| |
| @include valo-tooltip; |
| |
| @include valo-contextmenu; |
| |
| @include valo-reconnect-dialog; |
| } |
| |
| |
| |
| /** |
| * Generic component caption styles (captions which are generated by layouts). |
| */ |
| @mixin valo-caption-style { |
| font-size: $v-caption-font-size; |
| font-weight: $v-caption-font-weight; |
| padding-bottom: .3em; |
| @if $v-border-radius > 0 { |
| padding-left: round($v-border-radius/4); |
| } |
| } |
| |
| |
| /** |
| * Error indicator styles. The error indicator is by default a font character which you can style freely. |
| * |
| * @param {boolean} $is-pseudo-element (false) - is the selector including this mixin targeting a pseudo element |
| * |
| * @requires {mixin} valo-error-indicator-icon-style by default |
| */ |
| @mixin valo-error-indicator-style ($is-pseudo-element: false) { |
| color: $v-error-indicator-color; |
| font-weight: 600; |
| width: ceil($v-unit-size/2); |
| text-align: center; |
| |
| @if $is-pseudo-element { |
| @include valo-error-indicator-icon-style; |
| } @else { |
| &:before { |
| @include valo-error-indicator-icon-style; |
| } |
| } |
| } |
| |
| /** |
| * The error indicator icon style. Should be a font character or a font icon. |
| */ |
| @mixin valo-error-indicator-icon-style { |
| content: "!"; |
| } |
| |
| |
| /** |
| * Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY usually |
| * works better on touch devices. You loose the ability to control the scroll position from |
| * the server side when using this. |
| * |
| * @example scss |
| * // Include without any parent selector |
| * @include valo-natural-page-scrolling; |
| */ |
| @mixin valo-natural-page-scrolling { |
| |
| html { |
| height: auto; |
| } |
| |
| .v-generated-body { |
| height: auto; |
| overflow: auto; |
| background-color: $v-app-background-color; |
| } |
| |
| .v-app, |
| .v-ui.v-scrollable { |
| width: auto !important; |
| height: auto !important; |
| overflow: visible !important; |
| } |
| |
| } |