fix(carousel): remove scss for specific slick component from core

Orange-OpenSource · Mar 1, 2017 · 5ce00b9 · 5ce00b9
1 parent d3e5eee
commit 5ce00b9
Show file tree

Hide file tree

Showing 2 changed files with 199 additions and 213 deletions.
diff --git a/docs-orange/examples/orange-brand-2015/sample.css b/docs-orange/examples/orange-brand-2015/sample.css
@@ -82,4 +82,203 @@ footer {
         clear: both;
         position: relative;
     }
+}
+
+.slick-slide {
+  position: relative;
+}
+
+.slick-slide .frame {
+  position: absolute;
+  top: 1.25rem;
+  left: 1.25rem;
+  max-width: 20%;
+}
+
+.slick-slide .caption {
+  position: absolute;
+  bottom: 40px;
+  left: 1.25rem;
+  width: 45%;
+  padding: 1rem 1.25rem;
+  background-color: #fff;
+  opacity: .9;
+}
+
+.slick-slide img {
+  max-width: 100%;
+  height: auto;
+}
+
+.slick-slide.slick-current:focus {
+  outline: 1px dotted #000;
+  outline-offset: -1px;
+}
+
+.slick-prev,
+.slick-next {
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+  display: block;
+  width: 3.75rem;
+  height: 3.75rem;
+  padding: 0;
+  font-size: 0;
+  line-height: 0;
+  color: transparent;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: none;
+  -webkit-transform: translate(0, -50%);
+       -o-transform: translate(0, -50%);
+          transform: translate(0, -50%);
+}
+
+.slick-prev:focus,
+.slick-next:focus {
+  outline: 1px dotted #000;
+  outline-offset: -1px;
+}
+
+.slick-prev.slick-disabled::before,
+.slick-next.slick-disabled::before {
+  opacity: .25;
+}
+
+.slick-prev.slick-disabled:hover,
+.slick-next.slick-disabled:hover {
+  cursor: default;
+}
+
+.slick-prev::before,
+.slick-next::before {
+  font-family: "icon-orange";
+  font-size: 1.875rem;
+  line-height: 1;
+  color: #000;
+  text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
+  opacity: 1;
+}
+
+.inverse .slick-prev::before,
+.inverse .slick-next::before {
+  color: #fff;
+  text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
+}
+
+.slick-prev {
+  left: 0;
+}
+
+[dir="rtl"] .slick-prev {
+  right: 0;
+  left: auto;
+}
+
+.slick-prev::before {
+  content: "\e93f";
+}
+
+[dir='rtl'] .slick-prev::before {
+  content: "\e93e";
+}
+
+.slick-next {
+  right: 0;
+}
+
+[dir="rtl"] .slick-next {
+  right: auto;
+  left: 0;
+}
+
+.slick-next::before {
+  content: "\e93e";
+}
+
+[dir='rtl'] .slick-next::before {
+  content: "\e93f";
+}
+
+.slick-dotted.slick-slider {
+  margin-bottom: 1.875rem;
+}
+
+.slick-dots {
+  position: absolute;
+  bottom: .625rem;
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  list-style: none;
+}
+
+.slick-dots li {
+  position: relative;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.slick-dots li button {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+  padding: 0;
+  font-size: 0;
+  line-height: 0;
+  color: transparent;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+
+.slick-dots li button:focus {
+  outline: 1px dotted #000;
+}
+
+.slick-dots li button::before {
+  position: absolute;
+  top: .1875rem;
+  left: .1875rem;
+  width: .75rem;
+  height: .75rem;
+  text-align: center;
+  content: "";
+  background-color: #000;
+  border: 1px solid #fff;
+  border-radius: 50%;
+}
+
+.inverse .slick-dots li button::before {
+  background-color: #fff;
+  border: 1px solid #000;
+}
+
+.slick-dots li.slick-active button::before {
+  background-color: #f16e00;
+}
+
+@media (max-width: 768px) {
+  .slick-track {
+    height: 15.625rem;
+  }
+  .slick-slide img {
+    width: 100%;
+    height: auto;
+  }
+  .slick-prev,
+  .slick-next {
+    display: none !important;
+  }
+  .slick-slide .frame,
+  .slick-slide .caption {
+    display: none;
+  }
 }