Version 1
[yaffs-website] / web / modules / contrib / slick / css / theme / slick.theme--classic.css
diff --git a/web/modules/contrib/slick/css/theme/slick.theme--classic.css b/web/modules/contrib/slick/css/theme/slick.theme--classic.css
new file mode 100644 (file)
index 0000000..dd5a20b
--- /dev/null
@@ -0,0 +1,131 @@
+/**
+ * @file
+ * Detailed stylings are all yours, get yourself dirty.
+ *
+ * Transform is more performed than positions.
+ */
+
+.slick--skin--classic .slick__slide {
+  overflow: hidden;
+}
+
+.slick--skin--classic .slide__caption {
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  left: auto;
+  margin: 0;
+  min-height: 80px;
+  padding: 15px;
+  -webkit-transition: -webkit-transform 1s ease-in-out 0.2s;
+  transition: transform 1s ease-in-out 0.2s;
+  width: 100%;
+}
+
+.slick--skin--classic .slide__description {
+  margin: 0;
+}
+
+.slick--skin--classic .slide--caption--below .slide__caption {
+  background: none;
+  color: #38465c;
+}
+
+.slick--skin--classic .slide--caption--center .slide__caption {
+  color: #fff;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all 0.4s ease-in-out 0s;
+  transition: all 0.4s ease-in-out 0s;
+  -webkit-backface-visibility: hidden;
+}
+
+.slick--skin--classic .slide--caption--center:hover .slide__caption {
+  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (min-width: 64em) {
+  .slick--skin--classic .slide__caption {
+    height: 100%;
+    min-height: 100%;
+    padding: 60px 30px;
+    top: 0;
+    width: 22%;
+  }
+
+  .slick--skin--classic .slide__caption .slide__data {
+    margin: 0 !important;
+    padding: 15px;
+    width: 100%;
+  }
+
+  .slick--skin--classic .slide--caption--center .slide__caption {
+    height: 120px;
+    left: 50%;
+    margin: -60px 0 0 -40%;
+    min-height: 120px;
+    top: 50%;
+    width: 80%;
+  }
+
+  .slick--skin--classic .slide--caption--top .slide__caption,
+  .slick--skin--classic .slide--caption--center-top .slide__caption,
+  .slick--skin--classic .slide--caption--bottom .slide__caption,
+  .slick--skin--classic .slide--caption--below .slide__caption {
+    height: auto;
+    min-height: 80px;
+    padding: 30px;
+    width: 100%;
+  }
+
+  .slick--skin--classic .slide--caption--bottom .slide__caption {
+    bottom: 0;
+    -ms-transform: translateY(210px);
+    -webkit-transform: translateY(210px);
+    transform: translateY(210px);
+    min-height: 120px;
+    top: auto;
+  }
+
+  .slick--skin--classic .slide--caption--stage-zebra .slide__title {
+    margin-bottom: 30px;
+  }
+
+  .slick--skin--classic .slide--caption--stage-zebra:nth-child(odd) .slide__caption,
+  .slick--skin--classic .slide--caption--stage-left .slide__caption,
+  .slick--skin--classic .slide--caption--left .slide__caption {
+    left: 0;
+    -ms-transform: translateX(-320px);
+    -webkit-transform: translateX(-320px);
+    transform: translateX(-320px);
+  }
+
+  .slick--skin--classic .slide--caption--stage-zebra:nth-child(even) .slide__caption,
+  .slick--skin--classic .slide--caption--stage-right .slide__caption,
+  .slick--skin--classic .slide--caption--right .slide__caption {
+    left: auto;
+    right: 0;
+    -ms-transform: translateX(320px);
+    -webkit-transform: translateX(320px);
+    transform: translateX(320px);
+  }
+
+  .slick--skin--classic .slide--caption--top .slide__caption,
+  .slick--skin--classic .slide--caption--center-top .slide__caption {
+    top: 0;
+    -ms-transform: translateY(-210px);
+    -webkit-transform: translateY(-210px);
+    transform: translateY(-210px);
+  }
+
+  .slick--skin--classic .slick__slide.slick-active .slide__caption {
+    -ms-transform: translateY(0);
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    -webkit-transition-delay: 0s;
+    transition-delay: 0s;
+  }
+}