aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/slick/css/components/slick.thumbnail--hover.css

   1 /**
   2  * @file
   3  * Thumbnails hoverable inside dots.
   4  */
   5
   6 /* The main thumbnail container is slick-dots modifier */
   7 .slick .slick-dots--thumbnail-hover {
   8   list-style: none;
   9   overflow: visible;
  10   position: relative;
  11   text-align: center;
  12   width: 100%;
  13   z-index: 3;
  14 }
  15
  16 .slick .slick-dots--thumbnail-hover::after {
  17   content: "";
  18   display: table;
  19   clear: both;
  20 }
  21
  22 .slick .slick-dots--thumbnail-hover li {
  23   overflow: hidden;
  24   position: relative;
  25   vertical-align: top;
  26   /* Individual thumbnail, adjust accordingly to actual thumbnail size */
  27 }
  28
  29 .slick .slick-dots--thumbnail-hover li img {
  30   background: #fff;
  31   border: 2px solid transparent;
  32   display: block;
  33   opacity: .6;
  34   -webkit-transition: 0.3s;
  35   transition: 0.3s;
  36   /* Overrides core > 1.3.11, otherwise thumbnails are non-clickable */
  37   pointer-events: auto;
  38 }
  39
  40 .slick .slick-dots--thumbnail-hover li .slick-dots__thumbnail {
  41   bottom: 140%;
  42   left: 50%;
  43   margin: -60px 0 0 -60px;
  44   min-width: 120px;
  45   opacity: 0;
  46   overflow: visible;
  47   position: absolute;
  48   visibility: hidden;
  49   width: 120px;
  50   z-index: -1;
  51   -webkit-transition: 0.3s;
  52   transition: 0.3s;
  53 }
  54
  55 .slick .slick-dots--thumbnail-hover li .slick-dots__thumbnail img {
  56   pointer-events: none;
  57 }
  58
  59 .slick .slick-dots--thumbnail-hover li .slick-dots__thumbnail::after {
  60   border: 7px solid transparent;
  61   border-bottom: 0;
  62   border-top-color: #ff6d2c;
  63   bottom: -7px;
  64   content: '';
  65   display: block;
  66   height: 0;
  67   left: 50%;
  68   margin: 0 0 0 -7px;
  69   position: absolute;
  70   width: 0;
  71 }
  72
  73 .slick .slick-dots--thumbnail-hover li:hover {
  74   overflow: visible;
  75 }
  76
  77 .slick .slick-dots--thumbnail-hover li:hover .slick-dots__thumbnail {
  78   bottom: 120%;
  79   margin-top: -20px;
  80   opacity: 1;
  81   visibility: visible;
  82   -webkit-transition-delay: 0s;
  83   transition-delay: 0s;
  84   z-index: 3;
  85 }
  86
  87 .slick .slick-dots--thumbnail-hover li:hover img,
  88 .slick .slick-dots--thumbnail-hover li.slick-active img {
  89   border: 2px solid #ff6d2c;
  90   opacity: 1;
  91   -webkit-transition-delay: 0s;
  92   transition-delay: 0s;
  93 }
  94
  95 /**
  96  * Misc.
  97  */
  98 .block .slick .slick-dots--thumbnail-hover {
  99   margin-left: 0;
 100   padding: 0;
 101 }
 102
 103 @media (min-width: 720px) {
 104   .slick .slick-dots--thumbnail-hover {
 105     position: absolute;
 106   }
 107 }