Merge branch 'develop' into develop-settings

public/sass/components/_buttons.scss

@@ -51,10 +51,21 @@
 
 // Button Sizes
 // --------------------------------------------------
+// XLarge
+.btn-xlarge {
+  @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $btn-border-radius);
+  font-weight: normal;
+  padding-bottom: $btn-padding-y-xl - 3;
+  .gicon {
+    font-size: 31px;
+    margin-right: 1rem;
+  }
+}
 
 // Large
 .btn-large {
   @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius);
+  font-weight: normal;
 }
 
 .btn-small {
@@ -95,7 +106,7 @@
 }
 // Inverse appears as dark gray
 .btn-inverse {
-  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
   //background: $card-background;
   box-shadow: $card-shadow;
   //border: 1px solid $tight-form-func-highlight-bg;

public/sass/components/_cards.scss

@@ -200,9 +200,8 @@
   }
 
   .card-item {
-    border-bottom: .2rem solid $page-bg;
-    border-radius: 0;
-    box-shadow: none;
+    border-bottom: 3px solid $page-bg;
+    border-radius: 2px;
   }
 
   .card-item-header {

public/sass/components/_dashboard_grid.scss

@@ -8,7 +8,7 @@
   }
 
   .react-grid-item {
-    display: none;
+    display: none !important;
     transition-property: none !important;
   }
 
@@ -47,3 +47,18 @@
   }
 }
 
+// Hack for preventing panel menu overlapping.
+.react-grid-item.resizing.panel,
+.react-grid-item.panel.dropdown-menu-open,
+.react-grid-item.react-draggable-dragging.panel {
+  z-index: $zindex-dropdown;
+}
+
+// Disable animation on initial rendering and enable it when component has been mounted.
+.react-grid-item.cssTransforms.panel {
+  transition-property: none;
+}
+
+.animated .react-grid-item.cssTransforms.panel {
+  transition-property: transform;
+}

public/sass/components/_dashboard_list.scss

@@ -1,19 +1,25 @@
 .dashboard-list {
-    height: 75%;
-
     .search-results-container {
-        padding-left: 0;
+        padding: 5px 0 0 0;
     }
 }
 
 .search-results-filter-row {
+    height: 35px;
     display: flex;
     justify-content: space-between;
+
+    .gf-form-button-row {
+        padding-top: 0;
+
+        button:last-child {
+            margin-right: 0;
+        }
+    }
 }
 
 .search-results-filter-row__filters {
     display: flex;
-    width: 300px;
 }
 
 .search-results-filter-row__filters-item {

public/sass/components/_empty_list_cta.scss

@@ -0,0 +1,21 @@
+.empty-list-cta {
+    background-color: $search-filter-box-bg;
+    text-align: center;
+}
+
+.empty-list-cta__title {
+    padding-bottom: 30px;
+    font-style: italic;
+}
+
+.empty-list-cta__button {
+    margin-bottom: 50px;
+}
+
+.empty-list-cta__pro-tip {
+    padding-bottom: 20px;
+}
+
+.empty-list-cta__pro-tip-link {
+    margin-left: 5px;
+}

public/sass/components/_filter-table.scss

@@ -17,7 +17,7 @@
 
   tbody {
     tr:nth-child(odd) {
-      background: $dark-2;
+      background: $table-bg-odd;
     }
   }
 
@@ -34,7 +34,6 @@
     padding: $table-cell-padding;
     line-height: 30px;
     height: 30px;
-    border-bottom: 1px solid black;
     white-space: nowrap;
 
     &.filter-table__switch-cell {

public/sass/components/_modals.scss

@@ -0,0 +1,172 @@
+//
+// Modals
+// --------------------------------------------------
+
+// Background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-modal-backdrop;
+  background-color: $modal-backdrop-bg;
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  @include opacity(70);
+}
+
+// Base modal
+.modal {
+  position: fixed;
+  z-index: $zindex-modal;
+  width: 100%;
+	background: $page-bg;
+  @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
+  @include background-clip(padding-box);
+  outline: none;
+
+  max-width: 750px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  top: 10%;
+}
+
+.modal-header {
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
+  @include clearfix();
+}
+
+.modal-header-title {
+  font-size: $font-size-h3;
+  float: left;
+  padding-top: $spacer * 0.75;
+  margin: 0 $spacer*3 0 $spacer*1.5;
+}
+
+.modal-header-close {
+  float: right;
+  padding: 0.75rem $spacer;
+}
+
+// Body (where all modal content resides)
+.modal-body {
+  position: relative;
+}
+
+.modal-content {
+  padding: $spacer*2;
+}
+
+// Remove bottom margin if need be
+.modal-form {
+  margin-bottom: 0;
+}
+
+// Footer (for actions)
+.modal-footer {
+  padding: 14px 15px 15px;
+	border-top: 1px solid $panel-bg;
+  background-color: $panel-bg;
+  text-align: right; // right align buttons
+  @include clearfix(); // clear it in case folks use .pull-* classes on buttons
+}
+
+.modal--narrow {
+  max-width: 500px;
+}
+
+.confirm-modal {
+  max-width: 500px;
+
+  .confirm-modal-icon {
+    padding-top: 41px;
+    font-size: 280%;
+    color: $green;
+    padding-bottom: 20px;
+  }
+
+  .confirm-modal-text {
+    font-size: $font-size-h4;
+    color: $link-color;
+    margin-bottom: $spacer*2;
+    padding-top: $spacer;
+  }
+
+  .confirm-modal-text2 {
+    font-size: $font-size-root;
+    padding-top: $spacer;
+  }
+
+  .confirm-modal-buttons {
+    margin-bottom: $spacer;
+    button {
+      margin-right: $spacer/2;
+    }
+  }
+
+  .modal-content-confirm-text {
+    margin-bottom: 2rem;
+    span {
+      text-align: center;
+    }
+  }
+}
+
+.share-modal-body {
+  padding: 10px 0;
+
+  .tight-form {
+    text-align: left;
+  }
+
+  .share-modal-options {
+    margin: 11px 0px 33px 0px;
+    display: inline-block;
+  }
+
+  .share-modal-big-icon {
+    margin-bottom: 10px;
+    margin-right: 2rem;
+    .fa, .icon-gf {
+      font-size: 50px;
+    }
+  }
+
+  .share-modal-info-text {
+    margin-top: 5px;
+    strong {
+      color: $headings-color;
+      font-weight: 500;
+    }
+  }
+
+  .share-modal-header {
+    display: flex;
+    margin: 0px 0 22px 0;
+  }
+
+  .share-modal-content {
+    flex-grow: 1;
+  }
+
+  .tight-form {
+    text-align: left;
+  }
+
+  .share-modal-link {
+    max-width: 716px;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+  }
+}
+
+

public/sass/components/_navbar.scss

@@ -74,15 +74,15 @@
 }
 
 .navbar-button {
-  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
 
   display: inline-block;
   font-weight: $btn-font-weight;
   padding: 8px 11px;
   line-height: 16px;
   color: $text-muted;
-  border: 1px solid #151515;
-  margin-right: 1px;
+  border: 1px solid $navbar-button-border;
+  margin-right: 3px;
   white-space: nowrap;
 
   .gicon {

public/sass/components/_page_header.scss

@@ -0,0 +1,174 @@
+
+.page-header-canvas {
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
+}
+
+.page-header {
+  padding: 2.5rem 0 0 0;
+
+  .btn {
+    float: right;
+    margin-left: 1rem;
+
+    // better align icons
+    .fa {
+      position: relative;
+      top: 1px;
+    }
+  }
+}
+
+.page-header__inner {
+  flex-grow: 1;
+  display: flex;
+  margin-bottom: 2.5rem;
+}
+
+.page-header__title {
+  font-size: $font-size-h2;
+  margin-bottom: 1px;
+  padding-top: $spacer;
+}
+
+.page-header__img {
+  border-radius: 50%;
+  position: relative;
+  top: 10px;
+  width: 50px;
+  height: 50px;
+}
+
+.page-header__icon {
+  font-size: 50px;
+  width: 50px;
+  height: 50px;
+  position: relative;
+
+  &.fa {
+    top: 10px;
+  }
+
+  &.gicon {
+    top: 10px;
+  }
+
+  &.icon-gf {
+    top: 3px;
+  }
+}
+
+.page-header__logo {
+  margin: 0 $spacer;
+}
+
+.page-header__sub-title {
+  color: $text-muted;
+}
+
+.page-header-stamps-type {
+  color: $link-color-disabled;
+  text-transform: uppercase;
+}
+
+.page-header__select_nav {
+  margin-bottom: 10px;
+
+  @include media-breakpoint-up(lg) {
+    display: none;
+  }
+}
+
+.page-header__tabs {
+  display: none;
+  @include media-breakpoint-up(lg) {
+    display: block;
+  }
+}
+
+.page-breadcrumbs {
+  display: flex;
+  padding: 10px 0;
+  line-height: 0.5;
+}
+
+.breadcrumb {
+  display: inline-block;
+  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  border-radius: 5px;
+  counter-reset: flag;
+}
+
+.breadcrumb-item {
+  @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+
+  text-decoration: none;
+  outline: none;
+  display: block;
+  float: left;
+  font-size: 12px;
+  line-height: 30px;
+  padding: 0 7px 0 37px;
+  position: relative;
+  box-shadow: $card-shadow;
+
+  &:first-child {
+    padding-left: 10px;
+    border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
+    font-size: 18px;
+  }
+
+  &:first-child::before {
+    left: 14px;
+  }
+
+  &:last-child {
+    border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
+    padding-right: 20px;
+  }
+
+  &.active,
+  &:hover {
+    background: #333;
+    background: linear-gradient(#333, #000);
+  }
+
+  &.active::after,
+  &:hover::after {
+    background: #333;
+    background: linear-gradient(135deg, #333, #000);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: -14px; // half of square's length
+
+    // same dimension as the line-height of .breadcrumb-item
+    width: 30px;
+    height: 30px;
+
+    transform: scale(0.707) rotate(45deg);
+    // we need to prevent the arrows from getting buried under the next link
+    z-index: 1;
+
+    // background same as links but the gradient will be rotated to compensate with the transform applied
+    background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
+
+    // stylish arrow design using box shadow
+    box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
+
+    // 5px - for rounded arrows and
+    // 50px - to prevent hover glitches on the border created using shadows*/
+    border-radius: 0 5px 0 50px;
+  }
+
+  // we dont need an arrow after the last link
+  &:last-child::after {
+    content: none;
+  }
+}
+

public/sass/components/_panel_add_panel.scss

@@ -35,6 +35,7 @@
   height: calc(100% - 43px);
   align-content: flex-start;
   justify-content: space-around;
+  position: relative;
 }
 
 .add-panel__item {

public/sass/components/_panel_graph.scss

@@ -1,10 +1,31 @@
-.graph-canvas-wrapper {
-  position: relative;
-  cursor: crosshair;
+.graph-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &--legend-right {
+    flex-direction: row;
+
+    .graph-legend {
+      flex: 0 1 10px;
+      max-height: 100%;
+    }
+
+    .graph-legend-series {
+      display: block;
+      padding-left: 0px;
+    }
+
+    .graph-legend-table .graph-legend-series {
+      display: table-row;
+    }
+  }
 }
 
-.histogram-chart {
+.graph-panel__chart {
   position: relative;
+  cursor: crosshair;
+  flex-grow: 1;
 }
 
 .datapoints-warning {
@@ -22,11 +43,12 @@
 }
 
 .graph-legend {
-  @include clearfix();
+  flex: 0 1 auto;
+  max-height: 30%;
   margin: 0 $spacer;
   text-align: center;
-  width: calc(100% - $spacer);
   padding-top: 6px;
+  position: relative;
 
   .popover-content {
     padding: 0;
@@ -89,7 +111,9 @@
     display: block;
     overflow-y: auto;
     overflow-x: hidden;
+    height: 100%;
     padding-bottom: 1px;
+    padding-right: 5px;
   }
 
   .graph-legend-series {
@@ -160,39 +184,6 @@
   }
 }
 
-.graph-legend-rightside {
-
-  &.graph-wrapper {
-    display: table;
-    width: 100%;
-  }
-
-  .graph-canvas-wrapper {
-    display: table-cell;
-    width: 100%;
-    position: relative;
-  }
-
-  .graph-legend-wrapper {
-    display: table-cell;
-    vertical-align: top;
-    position: relative;
-    left: 4px;
-  }
-
-  .graph-legend {
-    margin: 0 0 0 1rem;
-  }
-
-  .graph-legend-series {
-    display: block;
-    padding-left: 0px;
-  }
-
-  .graph-legend-table .graph-legend-series {
-    display: table-row;
-  }
-}
 
 .graph-legend-series-hidden {
   .graph-legend-value,

public/sass/components/_panel_pluginlist.scss

@@ -18,7 +18,7 @@
 }
 
 .pluginlist-image {
-  width: 20px;
+  width: 17px;
 }
 
 .pluginlist-title {

public/sass/components/_search.scss

@@ -120,8 +120,9 @@
   display: flex;
   flex-grow: 1;
 
-  &:hover {
-    color: $text-color-weak;
+  &:hover, &.selected {
+    color: $link-hover-color;
+
     .search-section__header__toggle {
       background: $tight-form-func-bg;
       color: $link-hover-color;
@@ -129,12 +130,9 @@
   }
 }
 
-.search-section__header__with-checkbox {
-  display: flex;
-}
-
 .search-section__header__icon {
-  padding: 5px 10px;
+  padding: 2px 10px;
+  width: 35px;
 }
 
 .search-section__header__toggle {
@@ -145,14 +143,6 @@
   flex-grow: 1;
 }
 
-.search-item__with-checkbox {
-  display: flex;
-
-  .search-item {
-    margin: 1px 3px;
-  }
-}
-
 .search-item {
   @include list-item();
   @include left-brand-border();
@@ -163,11 +153,8 @@
   white-space: nowrap;
   padding: 0px;
 
-  &:hover {
+  &:hover, &.selected {
     @include left-brand-border-gradient();
-  }
-
-  &.selected {
     background: $list-item-hover-bg;
   }
 }
@@ -230,3 +217,18 @@
   padding: $spacer*2 $spacer;
   background: $panel-bg;
 }
+
+@include media-breakpoint-down(xs) {
+
+  .search-container {
+    left: 0;
+  }
+
+  .search-dropdown__col_2 {
+    display: none;
+  }
+
+  .search-item__tags {
+    display: none;
+  }
+}

public/sass/components/_shortcuts.scss

@@ -11,7 +11,6 @@
   .shortcut-table-category-header {
     font-weight: normal;
     font-size: $font-size-h6;
-    font-style: italic;
     text-align: left;
   }
 

public/sass/components/_sidemenu.scss

@@ -4,25 +4,42 @@
   flex-flow: column;
   flex-direction: column;
   width: $side-menu-width;
-  background: $navbarBackground;
   z-index: $zindex-sidemenu;
   a:focus {
     text-decoration: none;
   }
+
+  .sidemenu__logo_small_breakpoint {
+    display: none;
+  }
+
+  .sidemenu__close {
+    display: none;
+  }
+
 }
 
-.sidemenu-open {
+// body class that hides sidemenu
+.sidemenu-hidden {
   .sidemenu {
-    background: $side-menu-bg;
-    position: initial;
-    height: auto;
-    box-shadow: $side-menu-shadow;
-    position: relative;
-    z-index: $zindex-sidemenu;
+    display: none;
   }
-  .sidemenu__top,
-  .sidemenu__bottom {
-    display: block;
+}
+
+@include media-breakpoint-up(sm) {
+  .sidemenu-open {
+    .sidemenu {
+      background: $side-menu-bg;
+      position: initial;
+      height: auto;
+      box-shadow: $side-menu-shadow;
+      position: relative;
+      z-index: $zindex-sidemenu;
+    }
+    .sidemenu__top,
+    .sidemenu__bottom {
+      display: block;
+    }
   }
 }
 
@@ -41,21 +58,23 @@
   position: relative;
   @include left-brand-border();
 
-  &.active,
-  &:hover {
-    background-color: $side-menu-item-hover-bg;
-    @include left-brand-border-gradient();
+  @include media-breakpoint-up(sm) {
+    &.active,
+    &:hover {
+      background-color: $side-menu-item-hover-bg;
+      @include left-brand-border-gradient();
 
-    .dropdown-menu {
-      margin: 0;
-      display: block;
-      opacity: 0;
-      top: 0px;
-      // important to overlap it otherwise it can be hidden
-      // again by the mouse getting outside the hover space
-      left: $side-menu-width - 2px;
-      @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
-      z-index: $zindex-sidemenu;
+      .dropdown-menu {
+        margin: 0;
+        display: block;
+        opacity: 0;
+        top: 0px;
+        // important to overlap it otherwise it can be hidden
+        // again by the mouse getting outside the hover space
+        left: $side-menu-width - 2px;
+        @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
+        z-index:  $zindex-sidemenu;
+      }
     }
   }
 }
@@ -99,7 +118,7 @@
   display: inline-block;
 
   .fa, .icon-gf, .gicon {
-    color: $link-color;
+    color: $side-menu-link-color;
     position: relative;
     opacity: .7;
     font-size: 130%;
@@ -124,6 +143,7 @@
   white-space: nowrap;
   background-color: $side-menu-item-hover-bg;
   font-size: 17px;
+  color: #ebedf2;
 }
 
 li.sidemenu-org-switcher {
@@ -170,3 +190,88 @@ li.sidemenu-org-switcher {
   }
 }
 
+@include media-breakpoint-down(xs) {
+  .sidemenu-open {
+    .navbar {
+      padding-left: 60px !important;
+    }
+  }
+
+  .sidemenu-open--xs {
+    .sidemenu {
+      width: 100%;
+      background: $side-menu-bg;
+      position: initial;
+      height: auto;
+      box-shadow: $side-menu-shadow;
+      position: relative;
+      z-index: $zindex-sidemenu;
+    }
+
+    .sidemenu__close {
+      display: block;
+      font-size: $font-size-md;
+      position: relative;
+      top: -3px;
+    }
+
+    .sidemenu__top,
+    .sidemenu__bottom {
+      display: block;
+    }
+  }
+
+  .sidemenu {
+    .sidemenu__logo {
+      display: none;
+    }
+
+    .sidemenu__logo_small_breakpoint {
+      padding: 12px 10px 26px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: baseline;
+
+      .fa-bars {
+        font-size: 25px;
+      }
+    }
+
+    .sidemenu__top {
+      padding-top: 0rem;
+    }
+
+    .side-menu-header {
+      padding-left: 10px;
+    }
+
+    .sidemenu-link {
+      text-align: left;
+    }
+
+    .sidemenu-icon {
+      display: none
+    }
+
+    .dropdown-menu--sidemenu {
+      display: block;
+      position: unset;
+      width: 100%;
+      float: none;
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+
+      > li > a {
+        padding-left: 15px;
+      }
+    }
+
+    .sidemenu__bottom {
+      .dropdown-menu--sidemenu {
+        display: flex;
+        flex-direction: column-reverse;
+      }
+    }
+  }
+}

public/sass/components/_switch.scss

@@ -102,6 +102,51 @@ $switch-height: 1.5rem;
   }
 }
 
+.gf-form-switch--transparent {
+  input + label {
+    background: transparent;
+  }
+
+  input + label::before, input + label::after {
+    background: transparent;
+  }
+
+  &:hover {
+    input + label::before {
+      background: transparent;
+    }
+
+    input + label::after {
+      background: transparent;
+    }
+  }
+}
+
+.gf-form-switch--search-result__section {
+  min-width: 3.3rem;
+  margin-right: -0.3rem;
+
+  input + label {
+    height: 1.7rem;
+  }
+}
+
+.gf-form-switch--search-result__item {
+  min-width: 2.6rem;
+
+  input + label {
+    height: 2.7rem;
+  }
+}
+
+.gf-form-switch--search-result-filter-row__checkbox {
+  min-width: 4.7rem;
+
+  input + label {
+    height: 2.5rem;
+  }
+}
+
 gf-form-switch[disabled]  {
   .gf-form-label,
   .gf-form-switch input + label {

public/sass/components/_tabbed_view.scss

@@ -12,8 +12,10 @@
 }
 
 .tabbed-view-header {
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
   @include clearfix();
-  @include brand-bottom-border();
 }
 
 .tabbed-view-title {
@@ -24,7 +26,7 @@
 
 .tabbed-view-panel-title {
   float: left;
-  padding-top: 1rem;
+  padding-top: 9px;
   margin: 0 2rem 0 0;
 }
 

public/sass/components/_tabs.scss

@@ -16,7 +16,7 @@
   position: relative;
   display: block;
   border: solid transparent;
-  border-width: 2px 1px 1px;
+  border-width: 0 1px 1px;
   border-radius: 3px 3px 0 0;
 
   i {
@@ -31,9 +31,21 @@
   &.active,
   &.active:hover,
   &.active:focus {
-    border-color: $orange $dark-4 transparent;
+    border-color: $orange $tab-border-color transparent;
     background: $page-bg;
     color: $link-color;
+    overflow: hidden;
+
+    &::before {
+      display: block;
+      content: ' ';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 2px;
+      top: 0;
+      background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%);
+    }
   }
 }
 

public/sass/components/_timepicker.scss

@@ -13,11 +13,13 @@
 }
 
 .gf-timepicker-dropdown {
-  margin: -8px -10px 10px 5px;
+  position: absolute;
+  top: $navbarHeight;
+  right: 0;
   padding: 10px 20px;
-  float: right;
-  background-color: $panel-bg;
-  @include box-shadow($navbarDropdownShadow);
+  background-color: $search-filter-box-bg;
+  border-radius: 0 0 0 4px;
+  box-shadow: $search-shadow;
 }
 
 .gf-timepicker-absolute-section {

public/sass/components/_view_states.scss

@@ -37,6 +37,7 @@
   .navbar {
     box-shadow: none;
     background: transparent;
+    padding-left: $side-menu-width + 20px;
   }
 
   .navbar-page-btn {