Simplify markup for CardGroup at the expense of added specificity in …

…the styles. (#12183)
elastic · Jun 6, 2017 · cfe0e7b · cfe0e7b
1 parent 7b7cf51
commit cfe0e7b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 35 deletions.
diff --git a/ui_framework/components/card/_card_group.scss b/ui_framework/components/card/_card_group.scss
@@ -11,20 +11,20 @@
 .kuiCardGroup {
   display: flex;
   flex-wrap: wrap; /* 1 */
-}
 
   /**
    * 1. Use the defined width of the card to determine when to wrap.
    * 2. Use an even margin all around the card so that the spacing is still even when wrapped.
    */
-  .kuiCardGroup__card {
+  .kuiCard {
     flex: 1 1 0; /* 1 */
     margin: $cardSpacing; /* 2 */
-  }
 
-  .kuiCardGroup__cardDescription {
-    flex: 1 1 auto;
+    .kuiCard__description {
+      flex: 1 1 auto;
+    }
   }
+}
 
 /**
  * 1. There's no way to make this look good when wrapped.
@@ -35,13 +35,13 @@
   border-radius: $globalBorderRadius;
   overflow: hidden;
 
-  .kuiCardGroup__card {
+  .kuiCard {
     border: none;
     border-radius: 0;
     margin: 0;
   }
 
-  .kuiCardGroup__card + .kuiCardGroup__card {
+  .kuiCard + .kuiCard {
     border-left: 1px solid $cardBorderColor;
   }
 }
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -534,26 +534,24 @@ body {
   -webkit-flex-wrap: wrap;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
-  /* 1 */ }
-
-/**
+  /* 1 */
+  /**
    * 1. Use the defined width of the card to determine when to wrap.
    * 2. Use an even margin all around the card so that the spacing is still even when wrapped.
-   */
-.kuiCardGroup__card {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 0;
-      -ms-flex: 1 1 0px;
-          flex: 1 1 0;
-  /* 1 */
-  margin: 15px;
-  /* 2 */ }
-
-.kuiCardGroup__cardDescription {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1 1 auto;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto; }
+   */ }
+  .kuiCardGroup .kuiCard {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 1 0;
+        -ms-flex: 1 1 0px;
+            flex: 1 1 0;
+    /* 1 */
+    margin: 15px;
+    /* 2 */ }
+    .kuiCardGroup .kuiCard .kuiCard__description {
+      -webkit-box-flex: 1;
+      -webkit-flex: 1 1 auto;
+          -ms-flex: 1 1 auto;
+              flex: 1 1 auto; }
 
 /**
  * 1. There's no way to make this look good when wrapped.
@@ -566,11 +564,11 @@ body {
   border: 1px solid #E0E0E0;
   border-radius: 4px;
   overflow: hidden; }
-  .kuiCardGroup--united .kuiCardGroup__card {
+  .kuiCardGroup--united .kuiCard {
     border: none;
     border-radius: 0;
     margin: 0; }
-  .kuiCardGroup--united .kuiCardGroup__card + .kuiCardGroup__card {
+  .kuiCardGroup--united .kuiCard + .kuiCard {
     border-left: 1px solid #E0E0E0; }
 
 .kuiCollapseButton {

diff --git a/ui_framework/doc_site/src/views/card/card_group.html b/ui_framework/doc_site/src/views/card/card_group.html
@@ -1,7 +1,7 @@
 <div class="kuiCardGroupContainer">
   <div class="kuiCardGroup">
-    <div class="kuiCard kuiCardGroup__card" style="width: 400px">
-      <div class="kuiCard__description kuiCardGroup__cardDescription">
+    <div class="kuiCard" style="width: 400px">
+      <div class="kuiCard__description">
         <div class="kuiCard__descriptionTitle">
           Get a banana
         </div>
@@ -18,8 +18,8 @@
       </div>
     </div>
 
-    <div class="kuiCard kuiCardGroup__card" style="width: 400px">
-      <div class="kuiCard__description kuiCardGroup__cardDescription">
+    <div class="kuiCard" style="width: 400px">
+      <div class="kuiCard__description">
         <div class="kuiCard__descriptionTitle">
           Get a pteradactyl
         </div>
@@ -45,8 +45,8 @@
 <br class="guideBreak">
 
 <div class="kuiCardGroup kuiCardGroup--united">
-  <div class="kuiCard kuiCardGroup__card">
-    <div class="kuiCard__description kuiCardGroup__cardDescription">
+  <div class="kuiCard">
+    <div class="kuiCard__description">
       <div class="kuiCard__descriptionTitle">
         Get a banana
       </div>
@@ -63,8 +63,8 @@
     </div>
   </div>
 
-  <div class="kuiCard kuiCardGroup__card">
-    <div class="kuiCard__description kuiCardGroup__cardDescription">
+  <div class="kuiCard">
+    <div class="kuiCard__description">
       <div class="kuiCard__descriptionTitle">
         Get a pteradactyl
       </div>