VAADIN.themes.graphenee.common.scss Maven / Gradle / Ivy

Go to download
@include keyframes(animate-in-scale-up) {
  0% {
    @include transform(scale(0));
  }
}

@mixin dashboard-common {
  .v-menubar-popup {
    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
  }

  .v-filterselect-suggestpopup {
    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
  }

  .valo-menu-title-with-image {
    * {
      text-align: center;
    }

    img {
      padding: 10px;
      background: transparent;
    }
  }

  .dashboard-panel-toolbar {
    .v-label {
      color: $v-card-caption-color;
      text-transform: none;
      font-weight: 400;
    }

    .v-icon {
      color: $v-card-icon-color;
    }
  }

  .valo-menu {
    .valo-menu-part {
      width: 100%;
    }

    border-right: none;
    width: 200px;

    .badgewrapper {
      position: relative;
      padding: 0 !important;
    }

    .v-ddwrapper {
      display: block;
    }
  }

  .valo-menu-item-hide {
    opacity: 0;
    height: 0px;
  }

  .valo-menu-item-show {
    opacity: 1;
    height: inherit;
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms;
  }

  .valo-menu-item {
    width: 100%;

    &.selected {
      border-left: 4px solid $gx-base-color;

      .v-icon {
        color: white;
      }
    }

    &:hover {
      background-color: $gx-base-color;
    }

    [class*="badge"] {
      margin: 10px 0px;
    }

    .valo-menu-item-wrap {
      padding: 8px 0px 10px 0px;
      display: block;

      span {
        line-height: 19px;
        height: 19px;
        margin-left: -2px;
      }

      img {
        width: 24px;
        min-width: 1em;
        margin-right: 24px;
        text-align: center;
        vertical-align: middle;
      }
    }
  }

  .v-ui[width-range~="0-800px"] {
    .valo-menu-title-with-image {
      * {
        text-align: center;
      }

      img {
        display: none;
      }
    }

    .valo-menu-title {
      height: 40px !important;
      * {
        text-align: center;
        font-size: round($v-font-size * 0.8);
      }
      @include valo-gradient($color: $valo-menu-background-color);
      border-bottom-color: first-color(valo-border($color: $valo-menu-background-color));
    }

    .valo-menu .v-menubar-user-menu {
      color: inherit;
      font-size: 10pt;
      line-height: 0px;
      top: 5px;
      right: 10px;
      img.v-icon {
        width: 24px;
        height: 24px;
        border-radius: 2px;
      }
    }

    .valo-menu .valo-menu-toggle {
      color: inherit;
      font-size: 10pt;
      top: 5px;
      left: 3px;
      box-shadow: none !important;
      img.v-icon {
        width: 24px;
        height: 24px;
        border-radius: 24px;
      }
    }

    .valo-menu .valo-menuitems {
      top: 36px !important;
      width: 200px;
    }
  }

  .v-ui[width-range~="801px-1100px"] {
    .valo-menu {
      width: inherit;
    }

    .valo-menu-item {
      width: inherit;
      padding-top: 0px !important;
      padding-bottom: 0px !important;
    }
  }

  .v-ui[width-range~="801px-"] {
    .valo-menu {
      /* @include animation(valo-animate-in-slide-right 700ms 700ms backwards); */
    }

    .valo-menu-title {
      * {
        text-align: center;
      }
      background: transparent;
      @include box-shadow(none);
      border-bottom: none;
    }
  }

  .valo-menu-title {
    * {
      text-align: center;
    }
    line-height: 1.2;
  }

  .v-menubar-user-menu:after {
    display: none;
  }

  .v-menubar-user-menu > .v-menubar-menuitem {
    display: block;
    padding: 0;
    max-width: 90%;
    margin: 0 auto;

    .v-menubar-menuitem-caption:after {
      margin-right: -1em;
    }

    img.v-icon {
      @if is-dark-color($valo-menu-background-color) {
        border: none;
      }
    }
  }

  .v-ui[width-range~="0-800px"] {
    .valo-menu {
      width: inherit;
    }

    .valo-menuitems {
      box-shadow: 3px 10px 10px 0px rgba(0, 0, 0, 0.5);
    }

    .v-menubar-user-menu > .v-menubar-menuitem {
      max-width: none;
      margin-right: 0.5em;

      .v-menubar-menuitem-caption:after {
        margin-right: 0;
      }
    }
  }

  .valo-menu .valo-menu-badge,
  .dashboard-view .notifications.unread .v-button-caption {
    @include valo-badge-style($active-color: $gx-base-color);
    position: absolute;
    font-size: round($v-font-size * 0.8);
    color: white;
    pointer-events: none;
  }

  .dashboard-view .notifications.unread .v-button-caption {
    display: block;
    top: round($v-unit-size / -5);
    right: round($v-unit-size / -5);
    display: block;
    z-index: 1;
  }

  .profile-window {
    max-height: round(30 * $v-font-size);
    width: round(45 * $v-font-size);
    max-width: 90%;

    .v-tabsheet-content > div > .v-scrollable > .v-layout {
      padding-left: $v-layout-margin-left;
      padding-right: $v-layout-margin-right;
    }

    @include width-range($max: 700px) {
      .profile-form > .v-expand {
        padding-left: 0 !important;

        > .v-slot {
          display: block;
          margin-left: 0 !important;
        }
        > .v-spacing {
          height: $v-layout-spacing-vertical;
        }
      }
    }

    @include width-range($max: 600px) {
      .v-tabsheet-content > div > .v-scrollable > .v-layout {
        padding-left: round($v-layout-margin-left / 2);
        padding-right: round($v-layout-margin-left / 2);
      }
      .v-formlayout > table,
      .v-formlayout > table > tbody,
      .v-formlayout-row {
        display: block;
      }
      .v-formlayout > table > tbody {
        .v-formlayout-captioncell,
        .v-formlayout-errorcell,
        .v-formlayout-contentcell {
          display: inline-block;
          height: auto;
        }
        .v-formlayout-captioncell,
        .v-formlayout-errorcell {
          border-bottom: none;
          line-height: 1;
          padding-left: 0;
          padding-top: $v-layout-spacing-vertical;
          text-align: left;
        }
        .v-caption-h4 {
          height: 0;
        }
        .v-label-h4 {
          position: static;
        }
        .v-horizontallayout {
          height: auto !important;
        }
      }
    }
  }

  .vaadin-chart {
    transform: translateZ(0);
  }

  .viewheader {
    width: 100%;
    text-align: right;
    white-space: normal;

    .v-slot-h1 {
      float: left;
    }

    .h1 {
      white-space: normal;
    }

    @include width-range($max: 700px) {
      text-align: left;

      .v-slot-h1 {
        float: none;
      }

      > .v-slot {
        display: block;
      }

      .toolbar {
        white-space: normal;

        > .v-spacing {
          height: round($v-unit-size / 4);
        }
      }
    }
  }

  .v-caption.v-caption-caption-on-left {
    display: inline-block;
    vertical-align: middle;
    line-height: 37px;
    margin-right: $v-layout-spacing-horizontal;
  }

  // iOS7 & iOS8 status bar needs more space
  .v-ios7,
  .v-ios8 {
    .v-ui {
      @include box-sizing(border-box);
      padding-top: 20px;
      background-color: $valo-menu-background-color;

      > .v-widget {
        position: relative !important;
      }
    }
    .valo-menu-title {
      * {
        text-align: center;
      }
      padding-top: 10px;
    }
    .view-content {
      border-top-left-radius: $v-border-radius;
      background-color: $v-app-background-color;
    }
  }

  .v-ios7 & .v-ui[width-range~="0-800px"],
  .v-ios8 & .v-ui[width-range~="0-800px"] {
    padding-top: 20px + $v-unit-size;

    .v-loading-indicator {
      top: 20px + $v-unit-size - 3px;
      height: 3px;
    }

    .valo-menu-title {
      * {
        text-align: center;
      }
      height: 20px + $v-unit-size !important;
      padding-top: 20px;
    }
    .valo-menu-toggle,
    .user-menu {
      margin-top: 20px;
    }
    .valo-menuitems {
      top: 20px + $v-unit-size;
    }
    .view-content {
      border-radius: 0;
    }
  }

  .v-ui {
    .valo-menu {
      box-shadow: 3px 10px 10px 0px rgba(0, 0, 0, 0.5);
    }
  }
}