sync

[bootswatch] / MDB Free / sass / mdb / free / _carousels-basic.scss

diff --git a/MDB Free/sass/mdb/free/_carousels-basic.scss b/MDB Free/sass/mdb/free/_carousels-basic.scss
new file mode 100644 (file)
index 0000000..e0972f8
--- /dev/null
+++ b/MDB Free/sass/mdb/free/_carousels-basic.scss
@@ -0,0 +1,82 @@
+// CAROUSELS BASIC\r
+.carousel-control:hover {\r
+    @include transition-duration($duration: 400ms);\r
+}\r
+\r
+.carousel-fade .carousel-inner {\r
+    .carousel-item {\r
+        opacity: 0;\r
+        transition-property: opacity;\r
+    }\r
+    .active {\r
+        opacity: 1;\r
+    }\r
+    .active.left,\r
+    .active.right {\r
+        left: 0;\r
+        opacity: 0;\r
+        z-index: 1;\r
+    }\r
+    .next.left,\r
+    .prev.right {\r
+        opacity: 1;\r
+    }\r
+}\r
+\r
+.carousel-fade .carousel-control {\r
+    z-index: 2;\r
+}\r
+\r
+@media all and (transform-3d),\r
+(-webkit-transform-3d) {\r
+    .carousel-fade .carousel-inner > .carousel-item.next,\r
+    .carousel-fade .carousel-inner > .carousel-item.active.right {\r
+        opacity: 0;\r
+        -webkit-transform: translate3d(0, 0, 0);\r
+        transform: translate3d(0, 0, 0);\r
+    }\r
+    .carousel-fade .carousel-inner > .carousel-item.prev,\r
+    .carousel-fade .carousel-inner > .carousel-item.active.left {\r
+        opacity: 0;\r
+        -webkit-transform: translate3d(0, 0, 0);\r
+        transform: translate3d(0, 0, 0);\r
+    }\r
+    .carousel-fade .carousel-inner > .carousel-item.next.left,\r
+    .carousel-fade .carousel-inner > .carousel-item.prev.right,\r
+    .carousel-fade .carousel-inner > .carousel-item.active {\r
+        opacity: 1;\r
+        -webkit-transform: translate3d(0, 0, 0);\r
+        transform: translate3d(0, 0, 0);\r
+    }\r
+}\r
+\r
+.carousel {\r
+    .carousel-control-prev-icon,\r
+    .carousel-control-next-icon {\r
+        width: 36px;\r
+        height: 36px;\r
+    }\r
+    .carousel-control-prev-icon {\r
+        background-image: url(../img/svg/arrow_left.svg);\r
+    }\r
+    .carousel-control-next-icon {\r
+        background-image: url(../img/svg/arrow_right.svg);\r
+    }\r
+    .carousel-indicators {\r
+        li {\r
+            max-width: 10px;\r
+            height: 10px;\r
+            border-radius: 50%;\r
+        }\r
+    }\r
+    .video-fluid {\r
+        height: 100%;\r
+    }\r
+    &.no-flex {\r
+        .carousel-item.active,\r
+        .carousel-item-next,\r
+        .carousel-item-prev {\r
+            display: block;\r
+        }\r
+    }\r
+}\r