git.roojs.org Git - bootswatch/blob - MDB Free/sass/mdb/free/_carousels-basic.scss

   1 // CAROUSELS BASIC\r
   2 .carousel-control:hover {\r
   3     @include transition-duration($duration: 400ms);\r
   4 }\r
   5 \r
   6 .carousel-fade .carousel-inner {\r
   7     .carousel-item {\r
   8         opacity: 0;\r
   9         transition-property: opacity;\r
  10     }\r
  11     .active {\r
  12         opacity: 1;\r
  13     }\r
  14     .active.left,\r
  15     .active.right {\r
  16         left: 0;\r
  17         opacity: 0;\r
  18         z-index: 1;\r
  19     }\r
  20     .next.left,\r
  21     .prev.right {\r
  22         opacity: 1;\r
  23     }\r
  24 }\r
  25 \r
  26 .carousel-fade .carousel-control {\r
  27     z-index: 2;\r
  28 }\r
  29 \r
  30 @media all and (transform-3d),\r
  31 (-webkit-transform-3d) {\r
  32     .carousel-fade .carousel-inner > .carousel-item.next,\r
  33     .carousel-fade .carousel-inner > .carousel-item.active.right {\r
  34         opacity: 0;\r
  35         -webkit-transform: translate3d(0, 0, 0);\r
  36         transform: translate3d(0, 0, 0);\r
  37     }\r
  38     .carousel-fade .carousel-inner > .carousel-item.prev,\r
  39     .carousel-fade .carousel-inner > .carousel-item.active.left {\r
  40         opacity: 0;\r
  41         -webkit-transform: translate3d(0, 0, 0);\r
  42         transform: translate3d(0, 0, 0);\r
  43     }\r
  44     .carousel-fade .carousel-inner > .carousel-item.next.left,\r
  45     .carousel-fade .carousel-inner > .carousel-item.prev.right,\r
  46     .carousel-fade .carousel-inner > .carousel-item.active {\r
  47         opacity: 1;\r
  48         -webkit-transform: translate3d(0, 0, 0);\r
  49         transform: translate3d(0, 0, 0);\r
  50     }\r
  51 }\r
  52 \r
  53 .carousel {\r
  54     .carousel-control-prev-icon,\r
  55     .carousel-control-next-icon {\r
  56         width: 36px;\r
  57         height: 36px;\r
  58     }\r
  59     .carousel-control-prev-icon {\r
  60         background-image: url(../img/svg/arrow_left.svg);\r
  61     }\r
  62     .carousel-control-next-icon {\r
  63         background-image: url(../img/svg/arrow_right.svg);\r
  64     }\r
  65     .carousel-indicators {\r
  66         li {\r
  67             max-width: 10px;\r
  68             height: 10px;\r
  69             border-radius: 50%;\r
  70         }\r
  71     }\r
  72     .video-fluid {\r
  73         height: 100%;\r
  74     }\r
  75     &.no-flex {\r
  76         .carousel-item.active,\r
  77         .carousel-item-next,\r
  78         .carousel-item-prev {\r
  79             display: block;\r
  80         }\r
  81     }\r
  82 }\r