www.aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/slick/css/layout/slick.module.css

   1 /**
   2  * @file
   3  * Provided basic layout for the Slick based on custom settings.
   4  */
   5
   6 /**
   7  * Complex layout needs custom refinement for mobile, hence it is reasonable
   8  * to apply for Desktop up. Adjust mobile version accordingly.
   9  */
  10 @media (min-width: 64em) {
  11
  12   /* Fixed FireFox draggable issue, avoid asNavFor thumbnails. */
  13   .slick--main .slick__slide img {
  14     pointer-events: none;
  15   }
  16
  17   .slide__caption {
  18     left: 0;
  19     padding: 20px;
  20     top: 10%;
  21   }
  22
  23   .slide--caption--center .slide__caption,
  24   .slide--caption--center-top .slide__caption,
  25   .slide--caption--left .slide__caption,
  26   .slide--caption--right .slide__caption {
  27     width: 42%;
  28   }
  29
  30   .slide--caption--center .slide__caption {
  31     margin-top: -16%;
  32     position: absolute;
  33     top: 50%;
  34   }
  35
  36   .slide--caption--center .slide__caption,
  37   .slide--caption--center-top .slide__caption {
  38     left: 50%;
  39     margin-left: -21%;
  40     padding: 0;
  41     position: absolute;
  42     text-align: center;
  43   }
  44
  45   .slide--caption--left .slide__caption {
  46     position: absolute;
  47   }
  48
  49   .slide--caption--right .slide__caption {
  50     left: auto;
  51     position: absolute;
  52     right: 0;
  53   }
  54
  55   .slide--caption--top .slide__caption,
  56   .slide--caption--bottom .slide__caption {
  57     position: absolute;
  58     width: 100%;
  59   }
  60
  61   .slide--caption--top .slide__caption {
  62     top: 0;
  63   }
  64
  65   .slide--caption--bottom .slide__caption {
  66     bottom: 0;
  67     top: auto;
  68   }
  69
  70   .slide--caption--stage-left .slide__caption,
  71   .slide--caption--stage-right .slide__caption,
  72   .slide--caption--stage-zebra .slide__caption {
  73     left: 50%;
  74     margin-left: -41%;
  75     padding: 0;
  76     position: absolute;
  77     width: 82%;
  78   }
  79
  80   .slick--thumbnail .slide__caption,
  81   .slide--caption--below .slide__caption {
  82     padding: 20px 0;
  83     position: relative;
  84     top: auto;
  85     width: 100%;
  86   }
  87
  88   .slick--thumbnail .slide__caption {
  89     padding: 5px 6px;
  90   }
  91
  92   .slick--multiple-view .slide--caption--center .slide__caption,
  93   .slick--multiple-view .slide--caption--center-top .slide__caption {
  94     left: 0;
  95     margin-left: auto;
  96     width: 100%;
  97   }
  98
  99   /** Thumbnail position */
 100   .slick-wrapper--tn-left .slick--thumbnail {
 101     float: left;
 102     left: 0;
 103     width: 20%;
 104   }
 105
 106   .slick-wrapper--tn-left .slick--main {
 107     margin-left: 20%;
 108   }
 109
 110   .slick-wrapper--tn-right .slick--thumbnail {
 111     float: right;
 112     right: 0;
 113     width: 20%;
 114   }
 115
 116   .slick-wrapper--tn-right .slick--main {
 117     margin-right: 20%;
 118   }
 119
 120   .slick-wrapper--tn-overlay .slick--main {
 121     margin-left: auto;
 122     margin-right: auto;
 123   }
 124
 125   .slick-wrapper--tn-overlay .slick--thumbnail {
 126     height: 100%;
 127     max-height: 90%;
 128     overflow: hidden;
 129     position: absolute;
 130     top: 0;
 131     z-index: 9;
 132   }
 133
 134   .slick-wrapper--tn-over-top .slick--thumbnail {
 135     height: auto;
 136     max-height: none;
 137     width: 100%;
 138   }
 139
 140   div[class*="slick-wrapper--tn"] .slick__slider::after {
 141     clear: none;
 142   }
 143 }