|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430 |
- @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: "${project.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
- 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;
-
-
- .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-draggable;
-
- @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;
- }
-
- }
|