[FIX] wesbite: banner - remove css and use bootstrap for positionning. Now hidden-xs works, we don't lost 50% of width

bzr revid: jke@openerp.com-20140414142631-k78shkqjqdtcnp83

2 files changed, 19 insertions, 116 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 91cee76248f..94de70dc7dc 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -305,69 +306,6 @@ ul.nav-stacked > li > a {
   background-size: cover;
 }
 
-.carousel .carousel-caption {
-  position: absolute;
-  right: 50%;
-  left: 50%;
-  bottom: 20px;
-}
-.carousel .carousel-caption > div {
-  position: absolute;
-  text-align: left;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.4);
-  bottom: 20px;
-}
-.carousel .carousel-caption h1, .carousel .carousel-caption h2, .carousel .carousel-caption h3 {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-.carousel .carousel-image {
-  top: 5%;
-  bottom: 5%;
-  position: absolute;
-  max-height: 90%;
-  margin: 0 auto;
-}
-.carousel .item.text_only .carousel-image {
-  display: none !important;
-}
-.carousel .item.text_only .carousel-caption {
-  left: 10%;
-  right: 10%;
-  top: 10%;
-  bottom: auto;
-}
-.carousel .item.text_only .carousel-caption > div {
-  text-align: center;
-  background: transparent;
-  bottom: auto;
-  width: 100%;
-}
-.carousel .item.text_image .carousel-caption {
-  left: 10%;
-}
-.carousel .item.text_image .carousel-caption > div {
-  right: 50%;
-  margin-right: -20%;
-  max-width: 550px;
-}
-.carousel .item.text_image .carousel-image {
-  right: 10%;
-  left: 50%;
-}
-.carousel .item.image_text .carousel-caption {
-  right: 10%;
-}
-.carousel .item.image_text .carousel-caption > div {
-  left: 50%;
-  margin-left: -20%;
-  max-width: 550px;
-}
-.carousel .item.image_text .carousel-image {
-  right: 50%;
-  left: 10%;
-}
 .carousel .carousel-control {
   cursor: pointer;
 }
@@ -410,6 +348,16 @@ div.carousel .carousel-indicators li {
 div.carousel .carousel-indicators .active {
   background-color: grey;
 }
+div.carousel span.carousel-img img, div.carousel div.carousel-content {
+  max-height: 95%;
+  padding: 10px;
+}
+div.carousel div.carousel-content {
+  background-color: black;
+  color: white;
+  background: rgba(0, 0, 0, 0.3);
+  margin-top: 75px;
+}
 
 .parallax {
   background-size: cover;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index e3c6bd7a052..a9707799177 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -250,59 +250,6 @@ ul.nav-stacked > li > a
         height: 100%
         background-size: cover
 .carousel
-    .carousel-caption
-        position: absolute
-        right: 50%
-        left: 50%
-        bottom: 20px
-        > div
-            position: absolute
-            text-align: left
-            padding: 20px
-            background: rgba(0, 0, 0, 0.4)
-            bottom: 20px
-        h1, h2, h3
-            margin-top: 10px
-            margin-bottom: 10px
-    .carousel-image
-        top: 5%
-        bottom: 5%
-        position: absolute
-        max-height: 90%
-        margin: 0 auto
-    .item.text_only
-        .carousel-image
-            display: none !important
-        .carousel-caption
-            left: 10%
-            right: 10%
-            top: 10%
-            bottom: auto
-            > div
-                text-align: center
-                background: transparent
-                bottom: auto
-                width: 100%
-    .item.text_image
-        .carousel-caption
-            left: 10%
-            > div
-                right: 50%
-                margin-right: -20%
-                max-width: 550px
-        .carousel-image
-            right: 10%
-            left: 50%
-    .item.image_text
-        .carousel-caption
-            right: 10%
-            > div
-                left: 50%
-                margin-left: -20%
-                max-width: 550px
-        .carousel-image
-            right: 50%
-            left: 10%
     .carousel-control
         cursor: pointer
         span
@@ -338,6 +285,14 @@ div.carousel
             border: 1px solid grey
         .active
             background-color: grey
+    span.carousel-img img, div.carousel-content
+        max-height: 95%
+        padding: 10px        
+    div.carousel-content
+        background-color: black
+        color: white
+        background: rgba(0, 0, 0, 0.3)
+        margin-top: 75px
 
 .parallax
     background-size: cover