reqstore ui

Hydrospheredata · Mar 27, 2019 · 3eabb2e · 3eabb2e
1 parent 2529143
commit 3eabb2e
Show file tree

Hide file tree

Showing 49 changed files with 926 additions and 913 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -8,5 +8,6 @@
     &-body {
         display: flex;
         height: 100%;
+        overflow: scroll;
     }
 }
diff --git a/src/assets/styles/_content.scss b/src/assets/styles/_content.scss
@@ -1,8 +1,6 @@
 .content {
-    margin: 16px 24px;
-    padding: 56px 96px;
-    background-color: #ffffff;
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
+    position: relative;
+    height: 100%;
     &-wrapper {
         display: flex;
         flex-direction: row;
@@ -21,14 +19,18 @@
             overflow-y: scroll;
         }
     }
-    &-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: $base-size * 6;
-        &__title {
-            font-size: $title-font-size;
-        }
+    &__header {
+        background: white;
+        box-shadow: 0 1px 6px -3px black;
+        line-height: 54px;
+        padding: 0 24px;
+        position: fixed;
+        left: calc(20%);
+        right: 0;
+        z-index: 2;
+    }
+    &__body {
+        padding: 80px 24px 24px;
     }
     &-info {
         margin-bottom: $base-size * 3;
@@ -71,10 +73,19 @@
             }
         }
     }
-}
-
-@media all and (max-width: 1024px) {
-    .content {
-        padding: 32px 46px;
+    // new 
+    &__cell {
+        background: white;
+        box-shadow: 0 0 4px -2px hsla(200,50,20, .5);
+        border-radius: 2px;
+        &-title {
+            padding: 8px 16px;
+            background: #dbe2e8;
+            color: #647e94;
+            text-transform: uppercase;
+        }
+        &-body {
+            padding: 8px 16px;
+        }
     }
 }
diff --git a/src/assets/styles/_statuses.scss b/src/assets/styles/_statuses.scss
@@ -39,13 +39,18 @@
 }
 
 .model-version-status {
+    padding: 2px 8px;
+    border-radius: 12px;
     &--released {
-        color: $color--success;
+        background: #C6F7E2;
+        color: #27AB83;
     }
     &--assembling {
-        color: $color--light-blue; 
+        background: #B3ECFF;
+        color: #2BB0ED; 
     }
     &--failed {
-        color: $color--failed;
+        background: #FFBDBD;
+        color: #E12D39;
     }
 }
diff --git a/src/assets/styles/_styles.scss b/src/assets/styles/_styles.scss
@@ -164,144 +164,7 @@ md-dialog-container.mat-dialog-container {
           transform: rotate(90deg);
 }
 
-.hydro {
-  &-layout {
-    display: flex;
-  }
-
-  &-page {
-    &-container {
-      margin: 2rem 1.5rem 1.5rem 1.5rem;
-      background-color: #fff;
-      &.hydro-page-container--transparent {
-        background: transparent;
-      }
-    }
-
-    &-content {
-      height: 100%;
-      overflow-x: auto;
-      padding-bottom: 24px;
-    }
-  }
-
-  &-label {
-    color: $label-color;
-    font-size: 14px;
-    margin-bottom: 10px;
-    &::after {
-      content: ':';
-    }
-  }
-
-  &-btn {
-    background: transparent;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    float: right;
-    font-size: 14px;
-    font-weight: 500;
-    border: 3px solid $color--light-blue;
-    width: 96px;
-    height: 43px;
-    margin: 28px auto;
-
-    &:hover {
-      background-color: $color--light-blue;
-      color: #fff;
-      cursor: pointer;
-    }
-
-    &__icon {
-      font-size: 20px;
-      margin-right: 10px;
-      position: relative;
-      vertical-align: text-bottom;
-    }
-  }
-}
-
-.namespace {
-  display: inline-block;
-  vertical-align: middle;
-  padding: 0 12px;
-  height: 32px;
-  font-size: 14px;
-  line-height: 32px;
-  border-radius: 5px;
-  background-color: #e9ecf2;
-
-  &--select {
-    padding-right: 0;
-  }
-
-  &__label {
-    color: $label-color;
-  }
-
-  &__label::after {
-    content: '=';
-    margin: 0 5px;
-  }
-}
-
-.status-icon {
-  border-radius: 50%;
-  color: #fff;
-  padding: 5px;
-  vertical-align: middle;
-
-  &--success {
-    background-color: $color--success;
-
-    &::before {
-      content: 'done'
-    }
-  }
-
-  &--failed {
-    color: $color--failed;
-
-    &::before {
-      content: 'clear'
-    }
-  }
-
-  &--primary {
-    color: $color--primary;
-
-    &::before {
-      content: 'rotate_left'
-    }
-  }
-}
-
-.hydro-label {
-  color: $label-color;
-  margin-bottom: 10px;
-
-  &::after {
-    content: ':'
-  }
-}
-
-.mat-tab-body-content {
-  padding-top: 25px;
-}
-
-.mdl-select {
-  .mdl-textfield {
-    .mdl-textfield__label:after,
-    .mdl-textfield.is-focused .mdl-textfield__label:after {
-      bottom: 6px;
-    }
-  }
-}
-
-.single-model-table {
-  td {
-    text-align: left !important;
-  }
-}
-
+// common styles
+.text-center {
+  text-align: center;
+}
diff --git a/src/assets/styles/_tables.scss b/src/assets/styles/_tables.scss
@@ -1,22 +1,21 @@
 $table-padding: 14px;
 
+.cell {
+  line-height: 36px;
+  padding: 0 $table-padding * 2;
+}
+
 .hydro-table {
   border-collapse: collapse;
   width: 100%;
   &-head {
     &__cell {
-      font-size: 12px;
-      line-height: 36px;
+      @extend .cell;
+      font-size: 10px;
       color: #abafb2;
-      padding: 0 $table-padding * 2;
-      text-align: center;
-      .__small & {
-        padding: 0 $table-padding * 2;
-      }
-    }
-    &--with-border {
-      border-bottom: 1px solid $secondary-color;
-      border-top: 2px solid $secondary-color;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      text-align: left;
     }
   }
   &-body {
@@ -34,14 +33,7 @@ $table-padding: 14px;
       }
     }
     &__cell {
-      padding: 0 $table-padding * 1.2;
-      line-height: 36px;
-      .__small & {
-        padding: 0 $table-padding * 2;
-      }
-      [class$="signature"] & {
-        padding: 0 $table-padding * 2;
-      }
+      @extend .cell;
     }
   }
 }
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
@@ -1,13 +1,10 @@
 // BASE
 $base-size: 8px;
 
-
-
 // Colors
 $color-base: #04143c;
-$main-bg-color: #f8f9fb;
+$main-bg-color: #fdfdfd;
 
-$aside-bg-color: #f2f4f7;
 $color--success: #8cc63e;
 $color--failed: #ef3a41;
 $color--primary: #b8d7f9;
@@ -17,7 +14,6 @@ $color--light-blue: #4d9bf1;
 $color--blue: #539ae9;
 
 $border-color: #f1f3f7;
-
 $secondary-color: #e6e9ed;
 
 $error-container-border-color: #da3d3d;
@@ -36,8 +32,6 @@ $font-family-ultrabold: 'Museo Sans UltraBold',  sans-serif;
 $base-font-size: $base-size * 2;
 $title-font-size: $base-font-size * 1.5;
 
-
-
 // forms section
 $form-border-color-focus: #04143c;
 $form-border-color: $secondary-color;