Clean up layout styles

Moving misc styles to unsorted, removing dupes

ui/src/dashboards/containers/DashboardsPage.js

@@ -63,7 +63,7 @@ const DashboardsPage = React.createClass({
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>
+              <h1 className="page-header__title">
                 Dashboards
               </h1>
             </div>

ui/src/data_explorer/containers/Header.js

@@ -39,7 +39,7 @@ const Header = React.createClass({
     } = this.props
 
     return (
-      <div className="page-header full-width-no-scrollbar">
+      <div className="page-header full-width">
         <div className="page-header__container">
           <div className="page-header__left">
             <h1 className="page-header__title">

ui/src/kapacitor/components/RuleHeader.js

@@ -112,7 +112,7 @@ export const RuleHeader = React.createClass({
           placeholder="Name your rule"
         />
       : <h1
-          className="page-header--editable kapacitor-theme"
+          className="page-header__title page-header--editable kapacitor-theme"
           onClick={this.toggleEditName}
           data-for="rename-kapacitor-tooltip"
           data-tip="Click to Rename"

ui/src/style/components/tables.scss

@@ -85,7 +85,7 @@ table .monotype {
     background-color: $c-pool;
   }
   &.dot-warning {
-    background-color: $c-comet;
+    background-color: $c-pineapple;
   }
   &.dot-danger {
     background-color: $c-dreamsicle;

ui/src/style/layout/page-header.scss

@@ -5,11 +5,10 @@
 $page-header-size: 19px;
 $page-header-weight: 400 !important;
 
-
 .page-header {
   height: $chronograf-page-header-height;
   width: 100%;
-  padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding;
+  padding: 0 $page-wrapper-padding;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -20,6 +19,9 @@ $page-header-weight: 400 !important;
   border: none;
   margin: 0;
 }
+.page-header.full-width .page-header__container {
+  max-width: 100%;
+}
 .page-header__container {
   width: 100%;
   display: flex;
@@ -50,16 +52,6 @@ $page-header-weight: 400 !important;
     margin: 0 0 0 4px;
   }
 }
-.page-header.full-width .page-header__container {
-  max-width: 100%;
-}
-.page-header.full-width-no-scrollbar {
-  padding-right: $page-wrapper-padding;
-
-  .page-header__container {
-    max-width: 100%;
-  }
-}
 .page-header__title {
   text-transform: none;
   font-size: $page-header-size;

ui/src/style/layout/page.scss

@@ -20,439 +20,15 @@
   top: $chronograf-page-header-height;
   left: 0;
   width: 100%;
-  height: calc(100% - #{$chronograf-page-header-height});
-  overflow: auto;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  @include custom-scrollbar($g2-kevlar,$c-pool);
+  height: calc(100% - #{$chronograf-page-header-height}) !important;
   @include gradient-v($g2-kevlar,$g0-obsidian);
 
-  &--green-scrollbar {
-    @include custom-scrollbar($g2-kevlar,$c-rainforest);
-  }
-  &--purple-scrollbar {
-    @include custom-scrollbar($g2-kevlar,$c-comet);
-  }
 }
 .container-fluid {
-  padding: ($chronograf-page-header-height / 2) $page-wrapper-padding ($chronograf-page-header-height / 2) $page-wrapper-padding;
+  padding: ($chronograf-page-header-height / 2) $page-wrapper-padding;
   max-width: $page-wrapper-max-width;
 
   &.full-width {
     max-width: 100%;
   }
-}
-
-/*
-    Page Header
-    ----------------------------------------------
-*/
-.page-header {
-  height: $chronograf-page-header-height;
-  width: 100%;
-  padding: 0 ($page-wrapper-padding + $scrollbar-width) 0 $page-wrapper-padding;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: $g0-obsidian;
-  border: none;
-  margin: 0;
-
-  &__container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    max-width: ($page-wrapper-max-width - $page-wrapper-padding - $page-wrapper-padding);
-  }
-  h1 {
-    text-transform: uppercase;
-    font-size: 17px;
-    font-weight: 400;
-    margin: 0;
-    display: inline-block;
-    vertical-align: middle;
-  }
-  &__left,
-  &__right {
-    display: flex;
-    align-items: center;
-
-    > *:only-child {
-      margin: 0;
-    }
-  }
-  &__left {
-    > * {
-      margin: 0 4px 0 0;
-    }
-  }
-  &__right {
-    > * {
-      margin: 0 0 0 4px;
-    }
-  }
-  &.full-width .page-header__container {
-    max-width: 100%;
-  }
-}
-
-/*
-    Custom Search Widget
-    ----------------------------------------------
-*/
-.users__search-widget {
-  position: relative;
-
-  input.form-control {
-    position: relative;
-    width: 100%;
-    z-index: 1;
-    padding-left: 34px;
-    border-radius: 4px !important;
-
-    &:focus + .input-group-addon {
-      color: $c-pool;
-    }
-  }
-  .input-group-addon {
-    padding: 0;
-    text-align: center;
-    line-height: 38px;
-    position: absolute;
-    color: $g10-wolf;
-    top: 0;
-    left: 0;
-    height: 100%;
-    z-index: 4;
-    border: 0;
-    width: 40px;
-    background-color: transparent;
-    transition:
-      color 0.25s ease;
-  }
-}
-
-/*
-    Unsorted
-    ----------------------------------------------
-*/
-.select-source-page {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  @include custom-scrollbar($g2-kevlar, $c-pool);
-  @include gradient-v($g2-kevlar, $g0-obsidian);
-}
-.text-right .btn {
-  margin: 0 0 0 4px;
-}
-.text-center .btn {
-  margin: 0 2px;
-}
-.default-source-label {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 13px;
-  font-weight: 500;
-  background-color: $g5-pepper;
-  color: $c-pool;
-  border-radius: 3px;
-  padding: 2px 6px;
-  margin-left: 4px;
-}
-.progress-label {
-  margin-bottom: 4px;
-  color: $g11-sidewalk;
-  width: 100%;
-
-  strong {
-    font-weight: 500;
-    color: $g8-storm;
-  }
-}
-.btn-block.dropdown-toggle {
-  text-align: left;
-  position: relative;
-
-  .caret {
-    position: absolute;
-    top: 50%;
-    right: 18px;
-    transform: translateY(-50%);
-  }
-
-  & + .dropdown-menu {
-    width: 100%;
-  }
-}
-.modal {
-  form {
-    padding: 0;
-    margin: 0;
-    background-color: transparent;
-  }
-  .form-grid {
-    width: 100%;
-    display: inline-block;
-
-    &.padding-top {
-      padding-top: 15px;
-    }
-  }
-}
-
-/*
-    Custom Tabs
-    ----------------------------------------------
-*/
-.tab-group {
-  display: flex;
-  justify-content: flex-start;
-  margin-bottom: 20px;
-  display: inline-block;
-
-  .btn.tab {
-    border: 2px solid $g17-whisper;
-    border-right-width: 0;
-    padding: 10px 20px;
-    margin: 0 !important;
-    font-weight: 400;
-    color: $g11-sidewalk;
-    background-color: $g17-whisper;
-    box-shadow: none;
-    transition:
-      color 0.25s ease,
-      background-color 0.25s ease;
-
-    &:hover {
-      cursor: pointer;
-      background-color: $g18-cloud;
-      color: $g9-mountain;
-    }
-
-    &:first-child {
-      border-radius: 5px 0 0 5px;
-    }
-
-    &:last-child {
-      border-radius: 0 5px 5px 0;
-      border-right-width: 2px;
-    }
-    &.active {
-      background-color: white;
-      color: $g8-storm;
-    }
-  }
-}
-
-
-/*
-    Error Pages
-    ----------------------------------------------
-*/
-.panel-error {
-  margin-top: $page-wrapper-padding;
-  margin-bottom: $page-wrapper-padding;
-}
-table.table.error-table {
-  margin-bottom: 0;
-  .label {
-    padding: 4px 7px;
-    font-size: 14px;
-    font-weight: 700;
-  }
-  tbody {
-    td {
-      border: none;
-    }
-  }
-  tbody tr:nth-child(odd) {
-    background-color: $g19-ghost;
-    td:last-child {
-      background-color: $g5-pepper;
-    }
-  }
-  tbody tr:nth-child(even) {
-    background-color: $g18-cloud;
-    td:last-child {
-      background-color: $g4-onyx;
-    }
-  }
-  pre {
-    border: none;
-    background-color: transparent;
-    color: $c-moonstone;
-    font-weight: 600;
-    border-radius: 0;
-    padding: 4px;
-  }
-}
-
-/*
-    Generic Empty State
-    ----------------------------------------------
-*/
-.generic-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: $g12-forge;
-  padding: 20px 0;
-
-  .icon {
-    margin-bottom: 11px;
-  }
-}
-
-/*
-    Static Form Controls
-    ----------------------------------------------
-*/
-$form-static-checkbox-size: 16px;
-.form-control-static {
-  border: 2px solid $g5-pepper;
-  height: auto;
-  border-radius: 4px;
-  padding: 7px 12px;
-  position: relative;
-
-  input[type="checkbox"] {
-    position: relative;
-    left: -9999px;
-    visibility: hidden;
-    width: 0;
-    height: 0;
-    margin: 0;
-
-    // Faux Checkbox
-    & + label {
-      font-size: 14px !important;
-      line-height: 16px;
-      color: $g11-sidewalk;
-      font-weight: 500;
-      transition: color 0.25s ease;
-      margin: 0;
-      padding: 0 0 0 (12px + $form-static-checkbox-size + 6px);
-      user-select: none;
-      -ms-user-select: none;
-      -moz-user-selct: none;
-      -webkit-user-select: none;
-
-      &:before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 12px;
-        transform: translateY(-50%);
-        width: $form-static-checkbox-size;
-        height: $form-static-checkbox-size;
-        background-color: $g2-kevlar;
-        border: 2px solid $g5-pepper;
-        border-radius: 3px;
-        z-index: 2;
-        transition:
-          border-color 0.25s ease;
-      }
-      &:after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: (12px + ($form-static-checkbox-size / 2));
-        transform: translate(-50%,-50%) scale(2,2);
-        opacity: 0;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background-color: $c-pool;
-        z-index: 3;
-        transition:
-          opacity 0.25s ease,
-          transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      }
-      &:hover {
-        cursor: pointer;
-        color: $g20-white;
-
-        &:before {
-          border-color: $g6-smoke;
-        }
-      }
-    }
-    // Faux Checkbox (Checked)
-    &:checked + label {
-      color: $g20-white;
-
-      &:after {
-        opacity: 1;
-        transform: translate(-50%,-50%) scale(1,1);
-      }
-    }
-  }
-}
-
-/*
-    Stuff for making Tables of Data more readable
-    ----------------------------------------------
-*/
-table .monotype {
-  font-family: 'RobotoMono', monospace !important;
-  letter-spacing: 0.69px;
-  font-size: 12px;
-  font-weight: 500;
-  color: $g9-mountain;
-}
-.table-dot {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: $g17-whisper;
-
-  &.dot-success {
-    background-color: $c-rainforest;
-  }
-  &.dot-primary {
-    background-color: $c-pool;
-  }
-  &.dot-warning {
-    background-color: $c-pineapple;
-  }
-  &.dot-danger {
-    background-color: $c-dreamsicle;
-  }
-  &.dot-critical {
-    background-color: $c-fire;
-  }
-}
-
-/*
-    Empty State for Tables
-    ----------------------------------------------
-*/
-.table-empty-state {
-  > th {
-    text-align: center;
-
-    > p {
-      font-weight: 400;
-      font-size: 18px;
-      color: $g9-mountain;
-      margin-bottom: 16px;
-    }
-    > *:first-child {
-      margin-top: 75px;
-    }
-    > *:last-child {
-      margin-bottom: 75px;
-    }
-  }
-}
+}

ui/src/style/unsorted.scss

@@ -178,4 +178,60 @@
   }
 }
 
+/*
+    Custom Tabs
+    ----------------------------------------------
+*/
+.tab-group {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 20px;
+  display: inline-block;
 
+  .btn.tab {
+    border: 2px solid $g17-whisper;
+    border-right-width: 0;
+    padding: 10px 20px;
+    margin: 0 !important;
+    font-weight: 400;
+    color: $g11-sidewalk;
+    background-color: $g17-whisper;
+    box-shadow: none;
+    transition:
+      color 0.25s ease,
+      background-color 0.25s ease;
+
+    &:hover {
+      cursor: pointer;
+      background-color: $g18-cloud;
+      color: $g9-mountain;
+    }
+
+    &:first-child {
+      border-radius: 5px 0 0 5px;
+    }
+
+    &:last-child {
+      border-radius: 0 5px 5px 0;
+      border-right-width: 2px;
+    }
+    &.active {
+      background-color: white;
+      color: $g8-storm;
+    }
+  }
+}
+
+
+
+
+.select-source-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  @include custom-scrollbar($g2-kevlar, $c-pool);
+  @include gradient-v($g2-kevlar, $g0-obsidian);
+}