From 58518671df57c90fadbe39d373b0226dbab022d3 Mon Sep 17 00:00:00 2001
From: Yves Gatesoupe <yves1.gatesoupe@orange.com>
Date: Wed, 28 Sep 2016 17:44:51 +0200
Subject: [PATCH] fix(component): cards

o-card class to get brand specific design
---
 .../_includes/boostwatch/containers.html      |   4 +-
 scss/_o-card.scss                             | 103 +++++++++++++++++
 scss/_orange-css.scss                         | 104 ------------------
 scss/bootstrap.scss                           |   1 +
 4 files changed, 106 insertions(+), 106 deletions(-)
 create mode 100644 scss/_o-card.scss

diff --git a/docs-orange/_includes/boostwatch/containers.html b/docs-orange/_includes/boostwatch/containers.html
index 678cae50c4..4c8d2d6ae4 100644
--- a/docs-orange/_includes/boostwatch/containers.html
+++ b/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>
diff --git a/scss/_o-card.scss b/scss/_o-card.scss
new file mode 100644
index 0000000000..589a686d7c
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss
index 233a015113..1a0f3b7744 100644
--- a/scss/_orange-css.scss
+++ b/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
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index 9e6961b9bd..e461e1ed14 100644
--- a/scss/bootstrap.scss
+++ b/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";