Make CardGroup split apart by default. Add kuiCardGroup--united modif…

…ier. (elastic#11580) - Also remove unused kuiNotice classes.
cjcenizal · May 3, 2017 · 80894ea · 80894ea
1 parent f09fae0
commit 80894ea
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 51 deletions.
diff --git a/ui_framework/components/card/_card.scss b/ui_framework/components/card/_card.scss
@@ -13,6 +13,7 @@
     align-items: center;
     justify-content: flex-start;
     padding: 18px 0;
+    text-align: center;
   }
 
     .kuiCard__descriptionTitle {

diff --git a/ui_framework/components/card/_card_group.scss b/ui_framework/components/card/_card_group.scss
@@ -1,21 +1,31 @@
 .kuiCardGroup {
   display: flex;
-  border: 1px solid $cardBorderColor;
-  border-radius: $globalBorderRadius;
-  overflow: hidden;
-  margin-bottom: 18px;
 }
 
   .kuiCardGroup__card {
     flex: 1 1 0%;
-    border: none;
-    border-radius: 0;
 
     & + & {
-      border-left: 1px solid $cardBorderColor;
+      margin-left: 30px;
     }
   }
 
   .kuiCardGroup__cardDescription {
     flex: 1 1 auto;
   }
+
+.kuiCardGroup--united {
+  border: 1px solid $cardBorderColor;
+  border-radius: $globalBorderRadius;
+  overflow: hidden;
+
+  .kuiCardGroup__card {
+    border: none;
+    border-radius: 0;
+  }
+
+  .kuiCardGroup__card + .kuiCardGroup__card {
+    margin-left: 0;
+    border-left: 1px solid $cardBorderColor;
+  }
+}
diff --git a/ui_framework/components/notice/_notice.scss b/ui_framework/components/notice/_notice.scss
@@ -4,21 +4,3 @@
   background-color: $noticeBackgroundColor;
   line-height: $globalLineHeight;
 }
-
-  .kuiNotice__header {
-    margin-bottom: 18px;
-  }
-
-/**
- * 1. Override h1 styles.
- */
-.kuiNoticeTitle {
-  font-size: $noticeTitleFontSize;
-  margin-bottom: 12px;
-  margin-top: 0 !important; /* 1 */
-}
-
-.kuiNoticeText {
-  font-size: $globalFontSize;
-  margin-bottom: 12px;
-}
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -486,7 +486,8 @@ body {
   -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  padding: 18px 0; }
+  padding: 18px 0;
+  text-align: center; }
 
 .kuiCard__descriptionTitle {
   font-size: 14px;
@@ -508,28 +509,33 @@ body {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
-  display: flex;
-  border: 1px solid #E0E0E0;
-  border-radius: 4px;
-  overflow: hidden;
-  margin-bottom: 18px; }
+  display: flex; }
 
 .kuiCardGroup__card {
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 0%;
       -ms-flex: 1 1 0%;
-          flex: 1 1 0%;
-  border: none;
-  border-radius: 0; }
+          flex: 1 1 0%; }
   .kuiCardGroup__card + .kuiCardGroup__card {
-    border-left: 1px solid #E0E0E0; }
+    margin-left: 30px; }
 
 .kuiCardGroup__cardDescription {
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto; }
 
+.kuiCardGroup--united {
+  border: 1px solid #E0E0E0;
+  border-radius: 4px;
+  overflow: hidden; }
+  .kuiCardGroup--united .kuiCardGroup__card {
+    border: none;
+    border-radius: 0; }
+  .kuiCardGroup--united .kuiCardGroup__card + .kuiCardGroup__card {
+    margin-left: 0;
+    border-left: 1px solid #E0E0E0; }
+
 /**
  * 1. If we use margins instead, columns get pushed to the next line.
  */
@@ -2181,22 +2187,6 @@ body {
   background-color: #FFF;
   line-height: 1.5; }
 
-.kuiNotice__header {
-  margin-bottom: 18px; }
-
-/**
- * 1. Override h1 styles.
- */
-.kuiNoticeTitle {
-  font-size: 22px;
-  margin-bottom: 12px;
-  margin-top: 0 !important;
-  /* 1 */ }
-
-.kuiNoticeText {
-  font-size: 14px;
-  margin-bottom: 12px; }
-
 .kuiPanel {
   border: 2px solid #E4E4E4; }
 

diff --git a/ui_framework/doc_site/src/views/card/card_group.html b/ui_framework/doc_site/src/views/card/card_group.html
@@ -39,3 +39,47 @@
     </div>
   </div>
 </div>
+
+<br class="guideBreak">
+
+<div class="kuiCardGroup kuiCardGroup--united">
+  <div class="kuiCard kuiCardGroup__card">
+    <div class="kuiCard__description kuiCardGroup__cardDescription">
+      <div class="kuiCard__descriptionTitle">
+        Get a banana
+      </div>
+
+      <div class="kuiCard__descriptionText">
+        Bananas are yellow, fit easily in the hand, and have a lot of potassium or something.
+      </div>
+    </div>
+
+    <div class="kuiCard__footer">
+      <a class="kuiButton kuiButton--basic" href="#">
+        Banana!
+      </a>
+    </div>
+  </div>
+
+  <div class="kuiCard kuiCardGroup__card">
+    <div class="kuiCard__description kuiCardGroup__cardDescription">
+      <div class="kuiCard__descriptionTitle">
+        Get a pteradactyl
+      </div>
+
+      <div class="kuiCard__descriptionText">
+        Pteradactyls can fly, like to squawk all the time, and are difficult to spell correctly.
+      </div>
+    </div>
+
+    <div class="kuiCard__footer">
+      <a
+        class="kuiButton kuiButton--primary"
+        href="https://www.elastic.co/subscriptions/xpack"
+        target="_blank"
+      >
+        Pteradactyl!
+      </a>
+    </div>
+  </div>
+</div>