/**
 * Copyright (c) 2015 Bosch Software Innovations GmbH and others.
 *
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 */
// scss-lint:disable ImportantRule, PropertySortOrder
@include keyframes(animate-in-scale-up) {
  0% {
    @include transform(scale(0));
  }
}

@mixin dashboard-common {

    //View caption style
    .v-caption-header-content {
      padding-left: 20px;
      color: $widget-caption-color;
      font: $view-caption-font-style !important;
    }
    
    .view-header-layout{
       width: 100% !important;
       padding-right: 20px;
       padding-bottom: 0.3em
    }
    
  .v-ui {

    //Menu style
    .valo-menu {
      color: $menu-text-color;
      background-color: $menu-background-color;
      .v-slot-links {
        text-align: left;
        bottom: 0;
        position: relative;
        padding-bottom: 20px;
      }
      
      .labelwrapper {
        position: relative;
        padding: 0 !important;
      }
    }

    // View main content.When view content width and height is less than min-width and min-height ,scroll bars are displayed
    .view-content {
      padding-right: 20px;
      padding-left: 20px;
      min-width: 1000px;
      min-height: 500px;
	  border: 0px;   
	  background-color: transparent;   
	  box-shadow: none
    }

    //View background styles
    .main-content {
      background-image: $app-background-image,linear-gradient(to bottom,$app-background-image-gradient);
      background-image: $app-background-image,-webkit-linear-gradient(top,$app-background-image-gradient);
      background-image: $app-background-image,unquote("linear-gradient(to bottom,")$app-background-image-gradient unquote(")");
      background-position: bottom;
      background-repeat: no-repeat;
      border-left: 0 solid #fff;
      padding-top: 70px;
      overflow: auto;
    }

    //View header style with logo details to be displayed
    .view-header {
      border-bottom: $app-header-border-bottom;
      font-size: 42px;
      font-weight: bold;
      height: 32px;
      line-height: 50px;
      padding-bottom: 0px;
      padding-left: 15px;
      padding-top: 0;
      position: absolute;
      top: 0;
      width: calc(100% - 15px);
      z-index: 1;
    }

    .view-header:after {
      background: $logo-image no-repeat right top;
      background-position: $logo-position;
      content: "";
      height: 70px;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 2;
    }
  }
  .v-ui {

    //Menu title background and border style
    .valo-menu-title {
      @include valo-gradient($color: $menu-title-bg-color);
      @include animation(valo-animate-in-slide-right 700ms 700ms backwards);
      border-bottom-color: $menu-border-color;
    }
  }

  //Menu background and border style
  .valo-menu {
    @include valo-gradient($color: $valo-menu-background-color);
    border-bottom-color: $menu-border-color;
    border-right-color: $menu-border-color;
    height: 100%;
    font-size: 14px;
    font-weight: 400;
  }
  
  .valo-menu .valo-menu-badge,
  .dashboard-view .notifications.unread .v-button-caption {
    @include valo-badge-style;
    position: absolute;
    right: round($v-unit-size/3);
    font-size: round($v-font-size * 0.9);
    pointer-events: none;
  }

  //Menu item - white border is displayed after each menu item
  .valo-menu-item,
  .valo-menu-item-selected {
    border: 0 solid white;
    border-bottom: 5px solid transparent;
    border-image: url("../images/lightCorner_top.png") 30 30 stretch;
    o-border-image: url("../images/lightCorner_top.png") 30 30 stretch;
    webkit-border-image: url("../images/lightCorner_top.png") 30 30 stretch;
  }
  .v-csslayout-valo-menu-item {
    border: 0 solid white;
    border-bottom: 0 solid transparent;
  }

  .valo-menu-item:focus,
  .valo-menu-item:hover {
    color: $menu-hover-color;
  }
  .valo-menu-item.selected,
  .valo-menu-item.selected .v-icon {
    color: $white-hex-color;
  }
  .valo-menu-part .valo-menu-item.selected {
    background: rgba(0,0,0,0);
  }
  .valo-menu-title {
    line-height: 1.2;
  }

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

  .v-menubar-menuitem-user-menuitem {
    width: 100%;
  }

  .v-menubar-user-menu > .v-menubar-menuitem {
    white-space: normal !important;
    .v-icon {
      font-size: 25px;
    }
    .v-menubar-menuitem-caption:after {
      margin-right: -1em;
    }
    img.v-icon {
      @if is-dark-color($valo-menu-background-color) {
        border: none;
      }
    }
  }
  .header-caption {
    padding-left: 10px;
  }

  //Spacing between grouped widgets
  .group {
    .v-spacing {
      height: 6px;
      width: 6px;
    }
  }
}

/* Applying responsive menu settings */
.v-ui[width-range~="1101px-"] .valo-menu .valo-menuitems .v-icon {
  font-size: $menu-with-description-font-icon-size;
}
@mixin valo-menu-responsive() {
  .v-ui {
    @include width-range($max: 1100px) {
      .valo-menu-part {
        @include valo-menu-large-icons-style($valo-menu-background-color);
        /* Don't display caption in the range [0-1100px]*/
        .valo-menu-item [class*="caption"] {
          display: none;
          font-size: 0;
          line-height: 0;
          margin: 0;
          padding: 0;
          width: 0;
        }
        .valo-menu-item-selected {
          background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
        }
        .valo-menu-item {
          padding: 8px;
        }
        background: none;
        max-width: 100px;
      }
      .links {
        padding-left: 0;
      }
      .v-link {
        width: 0 !important;
      }
      .v-link-v-link span {
        display: none;
      }
      .v-link-v-link span.v-icon {
        font-size: 16px !important;
        display: inline;
      }
      .v-menubar-user-menu .v-menubar-menuitem-caption {
        font-size: 0;
      }
      .valo-menu-part .valo-menu-title .v-label-undef-w {
        display: none;
      }
      .valo-menu-part .valo-menu-title {
        padding-top: 28px;
      }
    }
  }
  .links {
    .v-link:hover {
      color: $hawkbit-primary-color-light;
    }
    .v-link {
      padding-right: 15px;
      color: $menu-text-color;
    }
    .v-icon {
      font-size: $menu-link-icon-with-description-size !important;
    }
  }

  //Combo box style
  .v-filterselect-filter-combo-specific-style {
    visibility: visible !important;
    margin-top: 2px !important;
    margin-left: 2px !important;
    width: 138px !important;
    .v-filterselect-button {
      visibility: visible !important;
    }
  }
  .v-filterselect-suggestpopup {
    font-size: $v-font-size--tiny;
  }
  .widget-header {
    color: $widget-caption-color;
    margin-top: 4px;
  }

  //Tabsheet border color customizatio.If not default border is derived from application  background color
  .v-tabsheet-tabcontainer:before,
  .v-tabsheet-framed > .v-tabsheet-tabcontainer .v-tabsheet-tabitem .v-caption,
  .v-tabsheet-framed > .v-tabsheet-content {
    border-color: $tabsheet-border-color;
  }
  .v-tabsheet-framed > .v-tabsheet-tabcontainer .v-caption:hover {
    background-color: $tabsheet-tab-caption-bg-hover;
  }
  .v-tabsheet-framed > .v-tabsheet-tabcontainer .v-caption {
    background-color: $tabsheet-tab-caption-bg;
  }
  .v-tabsheet-tabitemcell .v-caption {
    color: $tab-sheet-caption-color;
  }
  .custom-option-group {
    font-weight: 400;
    
    > :last-child {
    	margin-right: 0;
    }
  }
  .links {
    padding-left: 22px;
  }

   .font-icon{
	font-family:FontAwesome;
	font-style:normal;
	font-weight:normal;
  }

  .form-lastrow {
	padding-bottom: 12px !important;
  }
}
