[7364]: Deconcatenate selectors in src/plugins/kibana/public/visualiz…

…e/styles/main.less.

- Refactor styles for reduced specificity.
- Refactor markup attributes as part of a proposal for a new style.
- Remove unused classes nested beneath wizard-row: striped, panel, panel-default.
- Remove redundant wizard-agg-list class.


Former-commit-id: d4036dc

src/plugins/kibana/public/visualize/styles/main.less

@@ -7,98 +7,75 @@
   margin-left: 0;
   padding-left: 0;
   padding-right: 0;
+}
 
-  @media (min-width: @screen-lg) {
-    .wizard {
-      padding: 0;
-      display: flex;
-
-      div.wizard-small {
-        flex: 2;
-      }
-
-      div.wizard-large {
-        flex: 3;
-      }
-
-      .wizard-column {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding: 0px 2.5px;
-
-        .wizard-row {
-          flex: 1;
-          background-color: @kibanaGray6;
-        }
-      }
-    }
-  }
-
-  h3 {
+  .wizard-sub-title {
     margin-top: 0px;
     margin-bottom: 8px;
     padding: 0px 5px;
   }
 
-  .wizard-row {
-    .panel {
-      margin-bottom: 0;
-      border: none;
-    }
-
-    .panel-default > .panel-heading {
-      background-color: @kibanaGray6;
-    }
-
-    .list-group {
-      margin-bottom: 0;
-    }
-
-    .striped {
-      li:nth-child(odd) {
-        background-color: @white;
-      }
-
-      li:nth-child(even) {
-        background-color: @kibanaGray6;
-      }
-    }
-  }
-
   .wizard-type {
     flex: 1;
+
+    // TODO: When we migrate off Bootstrap, we can eliminate these "mixins".
     .list-group-item();
     .list-group-menu .list-group-menu-item();
 
     border: none;
     border-radius: 0;
     background-color: @kibanaGray6;
+  }
 
-    &-heading {
+    .wizard-type-heading {
       flex: 0 0 200px;
       display: flex;
       align-items: center;
       font-size: 1.2em;
+    }
 
-      .fa {
+      .wizard-type-heading-icon {
         flex: 0 0 auto;
         margin-right: @padding-base-horizontal;
         font-size: 1.5em;
         text-align: center;
         color: @saved-object-finder-icon-color;
       }
 
-      h4 {
+      .wizard-type-heading-text {
         flex: 1 0 auto;
       }
-    }
 
-    &-description {
+    .wizard-type-description {
       flex: 1 1 auto;
       color: @wizard-vis-type-description-color;
     }
+
+@media (min-width: @screen-lg) {
+  .wizard {
+    padding: 0;
+    display: flex;
   }
+
+    .wizard-column {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 0px 2.5px;
+    }
+
+      .wizard-row {
+        flex: 1;
+        background-color: @kibanaGray6;
+      }
+
+    .wizard-column--small {
+      flex: 2;
+    }
+
+    .wizard-column--large {
+      flex: 3;
+    }
 }
 
 @import "../editor/styles/_editor.less";

src/plugins/kibana/public/visualize/wizard/step_1.html

@@ -1,23 +1,31 @@
 <bread-crumbs></bread-crumbs>
 <div class="wizard">
   <div class="wizard-column">
-    <h3>Create New Visualization</h3>
+    <h3 class="wizard-sub-title">Create New Visualization</h3>
     <div class="wizard-row">
-      <a class="wizard-type" ng-repeat="type in visTypes.inTitleOrder" ng-href="{{ visTypeUrl(type) }}">
+      <a
+        class="wizard-type"
+        ng-repeat="type in visTypes.inTitleOrder"
+        ng-href="{{ visTypeUrl(type) }}"
+      >
         <div class="wizard-type-heading">
-          <i aria-hidden="true" class="fa fa-fw" ng-class="type.icon"></i>
-          <h4>{{type.title}}</h4>
+          <i
+            aria-hidden="true"
+            class="wizard-type-heading-icon fa fa-fw"
+            ng-class="type.icon"
+          ></i>
+          <h4 class="wizard-type-heading-text">{{type.title}}</h4>
         </div>
         <p class="wizard-type-description">{{type.description}}</p>
       </a>
     </div>
   </div>
   <div class="wizard-column">
-    <h3>Or, Open a Saved Visualization</h3>
+    <h3 class="wizard-sub-title">Or, Open a Saved Visualization</h3>
     <saved-object-finder
       title="Saved Visualizations"
       type="visualizations"
-      class="wizard-row">
-    </saved-object-finder>
+      class="wizard-row"
+    ></saved-object-finder>
   </div>
 </div>

src/plugins/kibana/public/visualize/wizard/step_2.html

@@ -1,22 +1,22 @@
 <bread-crumbs></bread-crumbs>
 <div class="wizard">
-  <div class="wizard-small wizard-column">
-    <h3>From a New Search, Select Index</h3>
+  <div class="wizard-column wizard-column--small">
+    <h3 class="wizard-sub-title">From a New Search, Select Index</h3>
     <paginated-selectable-list
       per-page="20"
       list="indexPattern.list"
       user-make-url="makeUrl"
-      class="wizard-row">
-    </paginated-selectable-list>
+      class="wizard-row"
+    ></paginated-selectable-list>
   </div>
-  <div class="wizard-large wizard-column">
-    <h3>Or, From a Saved Search</h3>
+  <div class="wizard-column wizard-column--large">
+    <h3 class="wizard-sub-title">Or, From a Saved Search</h3>
     <!-- Saved searches -->
     <saved-object-finder
         title="Saved Searches"
         type="searches"
         class="wizard-row"
-        make-url="step2WithSearchUrl">
-    </saved-object-finder>
+        make-url="step2WithSearchUrl"
+      ></saved-object-finder>
   </div>
 </div>