Merge pull request #1559 from CodeNow/SAN-4031-isolated-service-connections

SAN 4031: service containers in connections

Author: runnabro

client/assets/styles/scss/components/animated-panel.scss

@@ -4,7 +4,7 @@
 
   .fade {
     opacity: 0;
-    transition: opacity 3s linear;
+    transition: opacity .3s linear;
 
     &.in {
       opacity: 1;

client/assets/styles/scss/components/buttons/buttons-badge.scss

@@ -13,6 +13,5 @@
   &.gray {
     border-color: $gray-lighter;
     color: $gray-light;
-    font-style: italic;
   }
 }

client/assets/styles/scss/globals/grid.scss

@@ -24,6 +24,10 @@
     flex: 0 0 auto;
   }
 
+  &.grow {
+    flex: 1 1 100%;
+  }
+
   // alignment of content (defaults to left)
   &.justify-center {
     justify-content: center;
@@ -44,6 +48,14 @@
   &.align-center {
     align-items: center;
   }
+
+  &.align-start {
+    align-items: flex-start;
+  }
+
+  &.align-end {
+    align-items: flex-end;
+  }
 }
 
 // horizontal grid
@@ -63,6 +75,10 @@
     flex: 0 0 auto;
   }
 
+  &.grow {
+    flex: 1 1 100%;
+  }
+
   + .grid-content {
     margin-left: 15px;
 

client/assets/styles/scss/globals/var.scss

@@ -16,7 +16,7 @@ $white: #fff;
 $gray-lighterest: #fafafa;
 $gray-lightest: #f3f3f3;
 $gray-lighter: #e6e6e6;
-$gray-light: #ccc;
+$gray-light: #bbb;
 $gray: #888;
 $gray-dark: #555;
 $gray-darker: #222;

client/assets/styles/scss/popover/popover-dns-mappings.scss

@@ -8,137 +8,39 @@
 
   .popover-content {
     max-height: calc(100vh - 176px);
-
-    .empty {
-      margin: 15px 0;
-    }
-  }
-
-  .icons-status {
-    flex: 0 0 auto;
-    margin-right: 5px;
-  }
-
-  // specific to branch list
-  .list-branches {
-
-    .list-item {
-      align-items: center;
-      color: $gray;
-      display: flex;
-      font-size: 14px;
-      padding: 0 15px;
-
-      &:active {
-        color: $purple-light;
-      }
-
-      &.small {
-        color: $gray-light;
-        font-weight: $weight-normal;
-      }
-    }
-
-    // name of branch
-    .text-overflow {
-      flex: 1 1 auto;
-    }
-
-    // isolation badge
-    .btn-badge {
-      margin: 0;
-    }
-
-    // spinners
-    .spinner-wrapper {
-      flex: 0 0 auto;
-    }
-
-    // selected branch
-    .icons-fat-check {
-      flex: 0 0 auto;
-      margin: 0 6px;
-    }
   }
 
   .popover-list {
-    margin: 0 9px;
     padding: 12px 0;
   }
 
   .popover-list-item {
-    font-size: 14px;
-    margin: 0 -9px;
-    padding: 3px 18px;
-
-    &.small {
-      font-size: 12px;
-      line-height: 21px;
-      min-height: 21px;
-    }
-  }
-
-  .popover-footer {
-    border-top: 1px solid $gray-lighter;
-    font-size: 12px;
-    margin: 0 9px;
-    padding: 15px 9px 18px;
-
-    &.empty {
-      border: 0;
-    }
-  }
-
-  .link:active {
-    color: $purple-light;
-  }
-}
-
-.list-service-containers {
-
-  .popover-list-item {
-    line-height: 24px;
-    min-height: 24px;
+    padding: 9px 18px;
 
-    &.small {
-      margin-bottom: 4px;
+    &:active .small {
+      color: inherit;
     }
   }
-}
 
-// view-1
-// rows
-.tr-dns {
-  cursor: pointer;
-  padding: 3px 15px;
-
-  &:hover .icons-arrow-forward {
-    color: $gray;
+  // list headings
+  .list-item.small {
+    margin-top: 3px;
+    padding: 3px 18px;
   }
 
-  &:active {
-
-    // override .popover-list-item default
-    .small.text-overflow {
-      color: $gray;
-    }
-
-    .cell + .cell,
-    .cell + .cell .small,
-    .icons-arrow-forward {
-      color: $purple-light;
-    }
+  .icons-status {
+    flex: 0 0 auto;
+    margin-right: 6px;
   }
 
-  .iconnables {
-    margin: 0;
-    position: absolute;
-    right: 9px;
-    top: 15px;
+  // isolation badges
+  .btn-badge {
+    margin-left: 15px;
+    margin-right: 0; // override
   }
 
-  .icons-arrow-forward {
-    color: $gray-light;
+  .icons-fat-check {
+    margin: 0 0 0 9px;
   }
 
   // check icon
@@ -163,61 +65,42 @@
     transform-origin: 50% 50%;
   }
 
-  // cells
-  .cell {
-    flex: 1 1;
-    height: 48px;
-    line-height: 1.4;
-    max-width: 50%;
-    padding: 5px 0;
-    position: relative;
-
-    // url cell
-    &:first-child {
-      padding-right: 12px;
-
-      // arrow
-      &::after {
-        color: $gray-light;
-        content: '→';
-        display: block;
-        font-size: 18px;
-        position: absolute;
-        right: -9px;
-        top: 12px;
-      }
-    }
+  .icons-arrow-forward {
+    color: $gray-light;
+  }
 
-    // center text if single line
-    &.center {
-      align-items: center;
-      display: flex;
-    }
+  .popover-footer {
+    background: $gray-lighterest;
+    margin: 0;
+    padding: 18px 15px;
 
-    .small {
-      font-size: 12px;
+    &.empty {
+      background: none;
+      border: 0;
     }
+  }
+}
 
-    .btn-badge {
-      font-size: 11px;
-      height: 16px;
-      line-height: 14px;
-      margin-top: 3px;
-      max-width: 100%;
-    }
+.dns-arrow {
+  color: $gray-light;
+  font-size: 18px;
+  margin: 0 12px;
+}
 
-    // branch cell
-    + .cell {
-      padding: 0 15px;
+.list-repository-containers {
 
-      .small {
-        margin-left: 14px;
-      }
-    }
+  .btn-badge {
+    align-self: flex-start;
+  }
 
-    // just changed animation (along with check)
-    &.fade-in {
-      animation: fade-in-half 1s .25s;
-    }
+  .iconnables {
+    margin: 0; // override
+    position: absolute;
+    right: 9px;
+    top: 15px;
   }
 }
+
+.connected-branch-name {
+  padding-right: 15px;
+}