vaadin-framework/themes/src/main/themes/VAADIN/themes/valo/shared/_global.scss

@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;
  }

}