PLT-2395 - Improvements to backstage css

1 files changed, 150 insertions, 95 deletions

diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 70bab99cb..729c8c912 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -1,103 +1,106 @@
-.backstage {
-    background-color: #f2f2f2;
+.backstage-content {
+    background-color: $bg--gray;
     height: 100%;
-    padding-left: 260px;
-    padding-top: 45px;
+    margin: 46px auto;
+    max-width: 960px;
+    padding-left: 135px;
 }
 
-.backstage__navbar {
-    background: white;
-    border-bottom: lightgray 1px solid;
-    margin: 0 -15px;
-    padding: 10px;
+.backstage-navbar {
+    background: $white;
+    border-bottom: 1px solid $light-gray;
+    padding: 10px 20px;
     z-index: 10;
 }
 
-.backstage__navbar__back {
-    color: black;
+.backstage-navbar__back {
+    color: inherit;
+    text-decoration: none;
 
     .fa {
+        font-size: 1.1em;
         font-weight: bold;
-        margin-right: 5px;
+        margin-right: 7px;
+    }
+
+    &:hover,
+    &:active {
+        color: inherit;
     }
 }
 
-.backstage__sidebar {
-    position: absolute;
+.backstage-sidebar {
+    height: 100%;
     left: 0;
+    padding: 50px 20px;
+    position: absolute;
     width: 260px;
-    height: 100%;
-    background-color: #f2f2f2;
-    padding-bottom: 20px;
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-top: 45px;
     z-index: 5;
 
     ul {
-        padding: 0px;
         list-style: none;
+        padding: 0;
     }
 }
 
-.backstage__sidebar__category {
-    border: lightgray 1px solid;
+.backstage-sidebar__category {
+    border: 1px solid $light-gray;
 
     .category-title {
-        color: gray;
         display: block;
-        padding: 5px 10px;
+        line-height: 36px;
+        padding: 0 10px;
         position: relative;
     }
 
     .category-title--active {
-        color: black;
+        color: $black;
     }
 
     .category-title__text {
-        position: absolute;
         left: 2em;
+        position: absolute;
     }
 
     .sections {
-        background: white;
-        border-top: lightgray 1px solid;
+        background: $white;
+        border-top: 1px solid $light-gray;
     }
 
-    .section-title {
+    .section-title,
+    .subsection-title {
         display: block;
+        font-size: .95em;
+        line-height: 29px;
         padding-left: 2em;
-    }
-
-    .subsection {
+        text-decoration: none;
     }
 
     .subsection-title {
-        display: block;
         padding-left: 3em;
     }
 
-    .section-title--active, .subsection-title--active {
-        background-color:#2388d6;
-        color: white;
+    .section-title--active,
+    .subsection-title--active {
+        background-color: $primary-color;
+        color: $white;
+        font-weight: 600;
     }
 }
 
 .backstage__sidebar__category + .backstage__sidebar__category {
-    border-top-width: 0px;
+    border-top-width: 0;
 }
 
-.installed-integrations {
-    height: 100%;
-    max-width: 958px;
-}
-
-.backstage__header {
+.backstage-header {
+    @include clearfix;
     margin-bottom: 20px;
     width: 100%;
 
-    .text {
-        display: inline;
+    h1 {
+        float: left;
+        font-size: 20px;
+        margin: 5px 0;
     }
 
     .add-integrations-link {
@@ -105,21 +108,22 @@
     }
 }
 
-.installed-integrations__filters {
+.backstage-filters {
     display: flex;
     flex-direction: row;
-    margin-bottom: 8px;
     width: 100%;
 
-    .type-filters {
+    .backstage-filters__sort {
         flex-grow: 1;
         flex-shrink: 0;
+        line-height: 30px;
 
-        .type-filter {
-            &--selected {
-                color: black;
+        .filter-sort {
+            text-decoration: none;
+
+            &.filter-sort--active {
+                color: inherit;
                 cursor: default;
-                font-weight: bold;
             }
         }
 
@@ -129,84 +133,135 @@
         }
     }
 
-    .filter-box {
+    .backstage-filter__search {
         flex-grow: 0;
         flex-shrink: 0;
+        position: relative;
+        width: 270px;
+
+        .fa {
+            @include opacity(.4);
+            left: 11px;
+            position: absolute;
+            top: 11px;
+        }
+
+        input {
+            background: $white;
+            border-bottom: none;
+            padding-left: 30px;
+        }
     }
 }
 
-.installed-integrations__list {
-    background-color: white;
-    border: lightgray 1px solid;
-    padding-bottom: 30px;
-    padding-left: 30px;
-    padding-right: 30px;
-    padding-top: 10px;
+.backstage-list {
+    background-color: $white;
+    border: 1px solid $light-gray;
+    padding: 5px 15px;
 }
 
-.installed-integrations__item {
-    border-bottom: lightgray 1px solid;
+.backstage-list__item {
+    border-bottom: 1px solid $light-gray;
     display: flex;
-    padding: 20px;
+    padding: 20px 15px;
+
+    &:last-child {
+        border: none;
+    }
 
-    .details {
+    .item-details {
         flex-grow: 1;
         flex-shrink: 1;
         overflow: hidden;
         text-overflow: ellipsis;
+    }
 
-        .details-row + .details-row {
-            margin-top: 15px;
-        }
+    .item-details__row + .item-details__row {
+        @include clearfix;
+        margin-top: 10px;
+        text-overflow: ellipsis;
+    }
 
-        .name {
-            font-weight: bold;
-            margin-bottom: 1em;
-        }
+    .item-details__name {
+        font-weight: 600;
+        margin-bottom: 1em;
+    }
 
-        .type {
-            margin-left: 6px;
-        }
+    .item-details__type {
+        margin-left: 6px;
+    }
 
-        .description {
-            color: gray;
-            margin-bottom: 1em;
-        }
+    .item-details__description {
+        color: $dark-gray;
+        margin-bottom: 1em;
     }
 
-    .actions {
+    .list-item__actions {
         flex-grow: 0;
         flex-shrink: 0;
         padding-left: 20px;
     }
 }
 
-.add-integration-option {
-    background-color: white;
-    border: lightgray 1px solid;
+// Backstage Form
+
+.backstage-form {
+    background-color: $white;
+    border: 1px solid $light-gray;
+    padding: 40px 30px 30px;
+
+    label {
+        font-weight: normal;
+    }
+
+    .form-control {
+        background: $white;
+
+        &:focus {
+            border-color: $primary-color;
+        }
+    }
+}
+
+.backstage-form__footer {
+    border-top: 1px solid $light-gray;
+    margin-top: 2.5em;
+    padding-top: 1.8em;
+    text-align: right;
+
+    .has-error {
+        float: left;
+        margin: 0;
+    }
+}
+
+.add-integration {
+    background-color: $white;
+    border: 1px solid $light-gray;
     display: inline-block;
     height: 210px;
-    margin-right: 30px;
+    margin: 0 30px 20px 0;
     padding: 20px;
     text-align: center;
+    vertical-align: top;
     width: 250px;
 
     &:hover {
         color: default;
         text-decoration: none;
     }
+}
 
-    &__image {
-        width: 80px;
-        height: 80px;
-    }
+.add-integration__image {
+    height: 80px;
+    width: 80px;
+}
 
-    &__title {
-        color: black;
-        margin-bottom: 10px;
-    }
+.add-integration__title {
+    color: $black;
+    margin-bottom: 10px;
+}
 
-    &__description {
-        color: gray;
-    }
+.add-integration__description {
+    color: $dark-gray;
 }