fix(component): cards

o-card class to get brand specific design

docs-orange/_includes/boostwatch/containers.html

@@ -4,12 +4,12 @@ <h2 id="container">Containers</h2>
 <h3>Cards<a class="doc-link" href="../components/card/" title="go to card documentation page"><span class="icon-Forward-curved-arrow"></span></a></h3>
 <div class="row">
     <div class="col-md-4">
-        <div class="card">
+        <div class="o-card card">
             <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
             <div class="card-block">
                 <h4 class="card-title">Card title</h4>
                 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-                <a href="#" class="btn btn-primary">Button</a>
+                <a href="#" class="btn btn-primary btn-inverse">Button</a>
             </div>
         </div>
     </div>

scss/_o-card.scss

@@ -0,0 +1,103 @@
+//
+// Cards
+//
+
+.card.o-card {
+  background-color: #000;
+  border-color: #000;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+
+  .card-block {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    min-height: 4.75rem;
+    padding: .625rem .75rem;
+    overflow: hidden;
+
+    .card-title {
+      margin-bottom: 0;
+      line-height: 1;
+    }
+  }
+
+  .card-block,
+  .card-block .card-title,
+  .card-block .card-title a {
+    color: #fff;
+    background-color: #000;
+  }
+
+}
+
+@include media-breakpoint-up(xs) {
+  .o-card.card {
+    height: 8.875rem;
+
+    .card-block {
+      min-height: 3.75rem;
+
+      .card-title {
+        font-size: 1.125rem;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .o-card.card {
+    height: 12.1875rem;
+
+    .card-block {
+      min-height: 3.75rem;
+
+      .card-title {
+        font-size: 1.125rem;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+.o-card.card {
+    height: 8.875rem;
+
+    .card-block {
+      min-height: 3.75rem;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .o-card.card {
+    height: 12.1875rem;
+
+    .card-block {
+      min-height: 4.75rem;
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .o-card.card {
+    height: 13.4375rem;
+
+    .card-block {
+      min-height: 4.75rem;
+    }
+  }
+}
+
+@include media-breakpoint-up(xxl) {
+  .o-card.card {
+    height: 15rem;
+
+    .card-block {
+      min-height: 4.75rem;
+    }
+  }
+}

scss/_orange-css.scss

@@ -224,110 +224,6 @@ caption {
   font-weight: bold;
 }
 
-//
-// Cards
-//
-
-.card {
-  background-color: #000;
-  border-color: #000;
-
-  img {
-    width: 100%;
-    height: auto;
-  }
-
-  .card-block {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    min-height: 4.75rem;
-    padding: .625rem .75rem;
-    overflow: hidden;
-
-    .card-title {
-      margin-bottom: 0;
-      line-height: 1;
-    }
-  }
-
-  .card-block,
-  .card-block .card-title,
-  .card-block .card-title a {
-    color: #fff;
-    background-color: #000;
-  }
-
-}
-
-@include media-breakpoint-up(xs) {
-  .card {
-    height: 8.875rem;
-
-    .card-block {
-      min-height: 3.75rem;
-
-      .card-title {
-        font-size: 1.125rem;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .card {
-    height: 12.1875rem;
-
-    .card-block {
-      min-height: 3.75rem;
-
-      .card-title {
-        font-size: 1.125rem;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .card {
-    height: 8.875rem;
-
-    .card-block {
-      min-height: 3.75rem;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .card {
-    height: 12.1875rem;
-
-    .card-block {
-      min-height: 4.75rem;
-    }
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .card {
-    height: 13.4375rem;
-
-    .card-block {
-      min-height: 4.75rem;
-    }
-  }
-}
-
-@include media-breakpoint-up(xxl) {
-  .card {
-    height: 15rem;
-
-    .card-block {
-      min-height: 4.75rem;
-    }
-  }
-}
-
 // bits from bootstrap-orange2015.less
 
 // Reposition feedback icon if input has visible label above

scss/bootstrap.scss

@@ -55,6 +55,7 @@
 
 // boosted mod
 @import "o-buttons";
+@import "o-card";
 @import "o-switches";
 @import "o-forms";
 @import "o-bullet_points";