Merge pull request elastic#7549 from cjcenizal/7364/chore/deconcatena…

…te-vislib [7364]: Deconcatenate selectors in vislib and visualize. Former-commit-id: 0468726
airow · Jun 28, 2016 · 5399747 · 5399747
2 parents ca51e2e + 3bb0395
commit 5399747
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 129 deletions.
diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less
@@ -280,18 +280,16 @@
 
 
 // /src/ui/public/visualize/visualize.less
-  visualize-spy {
-    .visualize-show-spy {
-      border-top-color: @visualize-show-spy-border;
+  .visualize-show-spy {
+    border-top-color: @visualize-show-spy-border;
+  }
 
-    }
-    .visualize-spy-container {
-      pre {
-        border-color: @visualize-show-spy-border;
-        color: @visualize-spy-container-pre-color;
-        opacity: 1;
-        background-color: @visualize-spy-container-pre-bg;
-      }
+  .visualize-spy-container {
+    pre {
+      border-color: @visualize-show-spy-border;
+      color: @visualize-spy-container-pre-color;
+      opacity: 1;
+      background-color: @visualize-spy-container-pre-bg;
     }
   }
 
@@ -327,28 +325,26 @@
 
   }
 
-  .legend-value {
-     &-title {
-      padding: 3px;
+  .legend-value-title {
+    padding: 3px;
 
-      &:hover {
-        background-color: @sidebar-hover-bg;
-      }
+    &:hover {
+      background-color: @sidebar-hover-bg;
     }
+  }
 
-    &-full {
-      background-color: @gray3;
-    }
+  .legend-value-full {
+    background-color: @gray3;
+  }
 
-    &-details {
-      border-bottom: 1px solid @sidebar-bg;
+  .legend-value-details {
+    border-bottom: 1px solid @sidebar-bg;
 
-      .filter-button {
-        background-color: @sidebar-bg;
+    .filter-button {
+      background-color: @sidebar-bg;
 
-        &:hover {
-          background-color: @sidebar-hover-bg;
-        }
+      &:hover {
+        background-color: @sidebar-hover-bg;
       }
     }
   }

diff --git a/src/ui/public/vislib/styles/_alerts.less b/src/ui/public/vislib/styles/_alerts.less
@@ -2,8 +2,9 @@
 
 .vis-alerts {
   position: relative;
+}
 
-  &-tray {
+  .vis-alerts-tray {
     position: absolute;
     bottom: 5px;
     left: 0px;
@@ -16,6 +17,19 @@
     transition-duration: 50ms;
   }
 
+  .vis-alerts-icon {
+    margin: 0;
+    padding: 0 10px;
+    flex: 0 0 auto;
+    align-self: center;
+  }
+
+  .vis-alerts-text {
+    flex: 1 1 auto;
+    margin: 0;
+    padding: 0;
+  }
+
   .vis-alert {
     margin: 0 10px 10px;
     padding: 5px 10px 5px 5px;
@@ -24,31 +38,20 @@
     border: 1px solid;
     border-color: @alert-vis-alert-border;
     display: flex;
+  }
 
-    &-success {
-      .alert-variant(fade(@alert-success-bg, 75%); @alert-success-border; @alert-success-text);
-    }
-    &-info {
-      .alert-variant(fade(@alert-info-bg, 75%); @alert-info-border; @alert-info-text);
-    }
-    &-warning {
-      .alert-variant(fade(@alert-warning-bg, 75%); @alert-warning-border; @alert-warning-text);
-    }
-    &-danger {
-      .alert-variant(fade(@alert-danger-bg, 75%); @alert-danger-border; @alert-danger-text);
-    }
-  }
-
-  &-icon {
-    margin: 0;
-    padding: 0 10px;
-    flex: 0 0 auto;
-    align-self: center;
+  .vis-alert-success {
+    .alert-variant(fade(@alert-success-bg, 75%); @alert-success-border; @alert-success-text);
   }
 
-  &-text {
-    flex: 1 1 auto;
-    margin: 0;
-    padding: 0;
+  .vis-alert-info {
+    .alert-variant(fade(@alert-info-bg, 75%); @alert-info-border; @alert-info-text);
+  }
+
+  .vis-alert-warning {
+    .alert-variant(fade(@alert-warning-bg, 75%); @alert-warning-border; @alert-warning-text);
+  }
+
+  .vis-alert-danger {
+    .alert-variant(fade(@alert-danger-bg, 75%); @alert-danger-border; @alert-danger-text);
   }
-}
diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less
@@ -62,27 +62,32 @@ visualize-legend {
 }
 
 .legend-value {
-  &-title {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+  .legend-value-title {
     padding: 3px;
 
     &:hover {
       background-color: @sidebar-hover-bg;
     }
   }
 
-  &-truncate {
+  .legend-value-truncate {
     overflow-x: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  &-full {
+  .legend-value-full {
     white-space: normal;
     word-break: break-all;
     background-color: @sidebar-hover-bg;
   }
 
-  &-details {
+  .legend-value-details {
     border-bottom: 1px solid @sidebar-bg;
 
     .filter-button {
@@ -98,7 +103,7 @@ visualize-legend {
     }
   }
 
-  &-color-picker {
+  .legend-value-color-picker {
     width: 130px;
     margin: auto;
 
@@ -113,8 +118,3 @@ visualize-legend {
       font-size: 18px
     }
   }
-}
-
-.legend-value:hover {
-  cursor: pointer;
-}
diff --git a/src/ui/public/vislib/styles/_tooltip.less b/src/ui/public/vislib/styles/_tooltip.less
@@ -57,20 +57,20 @@
     margin-bottom: 0;
   }
 
-  &-icon {
+  + * {
+    margin-top: @tooltip-space;
+  }
+}
+
+  .vis-tooltip-header-icon {
     flex: 0 0 auto;
     padding-right: @tooltip-space;
   }
 
-  &-text {
+  .vis-tooltip-header-text {
     flex: 1 1 200px;
   }
 
-  + * {
-    margin-top: @tooltip-space;
-  }
-}
-
 .vis-tooltip-sizing-clone {
   visibility: hidden;
   position: fixed;

diff --git a/src/ui/public/visualize/visualize.less b/src/ui/public/visualize/visualize.less
@@ -75,87 +75,90 @@ visualize-spy {
     padding-top: 0px;
   }
 
-  .visualize-show-spy {
-    flex: 0 0 auto;
-    &-tab {
-      color: @kibanaGray4;
-      position: absolute;
-      z-index: 100;
-      left: 5px;
-      bottom: 0px;
-    }
-  }
-
   .visualize-spy-fill {
     margin-right: 5px;
   }
 
-  .visualize-spy-container {
-    flex: 1 1 auto;
-
-    display: flex;
-    flex-direction: column;
+  &.only {
+    .visualize-spy-container {
+      height: auto;
+    }
+  }
 
-    height: 482px;
-    overflow-y: auto;
+  pre {
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+}
 
-    header {
-      padding: 0 0 15px;
-    }
+.visualize-spy-container {
+  flex: 1 1 auto;
 
-    header + * {
-      flex: 1 1 auto;
-    }
+  display: flex;
+  flex-direction: column;
 
-    > .alert {
-      flex: 0 0 auto;
-    }
+  height: 482px;
+  overflow-y: auto;
 
-    tr > td {
-      font-size: 0.85em;
-    }
+  header {
+    padding: 0 0 15px;
   }
 
-  &.only .visualize-spy-container {
-    height: auto;
+  header + * {
+    flex: 1 1 auto;
   }
 
-  .visualize-spy-nav {
+  > .alert {
     flex: 0 0 auto;
+  }
 
-    a.btn {
-      margin: @padding-small-vertical @padding-small-vertical;
-    }
+  tr > td {
+    font-size: 0.85em;
   }
+}
 
-  .visualize-spy-content {
-    position: relative;
+.visualize-spy-nav {
+  flex: 0 0 auto;
 
-    .visualize-spy-loading {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      right: 0px;
-      text-align: center;
+  a.btn {
+    margin: @padding-small-vertical @padding-small-vertical;
+  }
+}
 
-      &-text {
-        display: inline-block;
-        margin: 0;
-        background: @alert-info-bg;
-        color: @alert-info-text;
-        padding: 5px 10px;
-        border-radius: @border-radius-base;
+.visualize-spy-content {
+  position: relative;
+}
+
+  .visualize-spy-loading {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    text-align: center;
+  }
 
-        .spinner > * {
-          background-color: @alert-info-text;
-        }
+    .visualize-spy-loading-text {
+      display: inline-block;
+      margin: 0;
+      background: @alert-info-bg;
+      color: @alert-info-text;
+      padding: 5px 10px;
+      border-radius: @border-radius-base;
+
+      .spinner > * {
+        background-color: @alert-info-text;
       }
     }
-  }
 
-  pre {
-    word-break: break-all;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-  }
+.visualize-show-spy {
+  flex: 0 0 auto;
 }
+
+  .visualize-show-spy-tab {
+    color: @kibanaGray4;
+    position: absolute;
+    z-index: 100;
+    left: 5px;
+    bottom: 0px;
+  }