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

   1 /**
   2  * @file.
   3  * Provided basic styling for the Slick based on custom settings.
   4  */
   5
   6 .slick-wrapper,
   7 .slick,
   8 .slick * {
   9   -webkit-box-sizing: border-box;
  10   box-sizing: border-box;
  11 }
  12
  13 .slick img {
  14   height: auto;
  15 }
  16
  17 .slick img,
  18 .slick iframe {
  19   border: 0;
  20   max-width: 100%;
  21 }
  22
  23 /* Prevents overflowing nested slides. */
  24 .slick,
  25 .slick-wrapper {
  26   max-width: 100%;
  27   position: relative;
  28 }
  29
  30 /**
  31  * Misc overrides core slick.
  32  */
  33 .slick-initialized {
  34   overflow: visible;
  35 }
  36
  37 .slick__slider::before,
  38 .slick__slider::after {
  39   display: table;
  40   content: '';
  41 }
  42
  43 .slick__slider::after {
  44   clear: both;
  45 }
  46
  47 /** Draggable. */
  48 .draggable {
  49   cursor: -webkit-grab;
  50   cursor: grab;
  51 }
  52
  53 .draggable:active {
  54   cursor: -webkit-grabbing;
  55   cursor: grabbing;
  56 }
  57
  58 .draggable:active a,
  59 .draggable:active .slide__caption {
  60   cursor: -webkit-grabbing;
  61   cursor: grabbing;
  62   -moz-user-select: none;
  63   -ms-user-select: none;
  64   -o-user-select: none;
  65   -webkit-user-select: none;
  66   user-select: none;
  67 }
  68
  69 /** Visibility fix for stacking slides during initialization. */
  70 .slick__slide {
  71   max-width: 100%;
  72   position: absolute;
  73   visibility: hidden;
  74 }
  75
  76 /** Prevents collapsing container during initialization. */
  77 .slick__slide.slide--0 {
  78   position: relative;
  79 }
  80
  81 .unslick .slick__slide,
  82 .slick-initialized .slick__slide {
  83   position: relative;
  84   visibility: visible;
  85 }
  86
  87 /* Fix for Chrome blue outline */
  88 .slick__slide:focus {
  89   outline: 0;
  90 }
  91
  92 /* Prevents collapsing slick when unslick like one item. */
  93 .unslick .slick__slide {
  94   width: 100%;
  95 }
  96
  97 .slick-current {
  98   z-index: 4;
  99 }
 100
 101 /**
 102  * Slide layouts, adjust accordingly per actual container slide.
 103  */
 104 .slide__content,
 105 .grid__content {
 106   position: relative;
 107 }
 108
 109 .slide__content::after {
 110   content: "";
 111   display: table;
 112   clear: both;
 113 }
 114
 115 .slide__title {
 116   margin: 10px 0 5px;
 117   line-height: 1.2;
 118 }
 119
 120 .slide__link {
 121   margin: 30px auto;
 122 }
 123
 124 /* Overrides .slick-slider to make caption text selectable. */
 125 .slide__caption {
 126   cursor: text;
 127   -moz-user-select: text;
 128   -ms-user-select: text;
 129   -o-user-select: text;
 130   -webkit-user-select: text;
 131   user-select: text;
 132   width: 100%;
 133 }
 134
 135 /* Only display when JS is ready. */
 136 .slick__arrow,
 137 .is-loading .slide__caption {
 138   visibility: hidden;
 139 }
 140
 141 /** Arrows are outside slick-initialized. */
 142 .slick--initialized .slick__arrow {
 143   visibility: visible;
 144 }
 145
 146 .slick--main .slide__caption {
 147   min-height: 32%;
 148   padding: 20px 0;
 149   z-index: 3;
 150 }
 151
 152 .slick--thumbnail .slide__caption {
 153   padding: 5px 6px;
 154 }
 155
 156 /**
 157  * Skins.
 158  * Arrows contained/wrapped within slick__arrow for easy moves.
 159  */
 160 /* Overrides problematic hidden arrows at core slick.css */
 161 .slick-prev {
 162   left: 0;
 163 }
 164
 165 .slick-next {
 166   right: 0;
 167 }
 168
 169 .slick__arrow {
 170   bottom: auto;
 171   height: 2px;
 172   left: 0;
 173   margin-top: -1px;
 174   pointer-events: none;
 175   position: absolute;
 176   top: 50%;
 177   width: 100%;
 178   z-index: 2;
 179 }
 180
 181 /** Keeps decent fallback for when slick-theme.css is disabled, even if dup. */
 182 .slick-arrow {
 183   border: 0;
 184   border-radius: 50%;
 185   font-size: 0;
 186   height: 42px;
 187   pointer-events: auto;
 188   position: absolute;
 189   top: 50%;
 190   -webkit-transform: translateY(-50%);
 191   transform: translateY(-50%);
 192   width: 42px;
 193 }
 194
 195 .slick-arrow:active,
 196 .slick-arrow:focus {
 197   box-shadow: none;
 198   outline: 0;
 199 }
 200
 201 .slick-arrow::before,
 202 .slick-arrow::after {
 203   pointer-events: none;
 204 }
 205
 206 .slick-arrow::before {
 207   color: #ff6d2c;
 208   font-size: 36px;
 209   font-size: 2.25rem;
 210 }
 211
 212 .slick-arrow:hover::before {
 213   color: #37465b;
 214 }
 215
 216 /**
 217  * Bullets.
 218  */
 219 /* Makes the pointer work when bullets placed over the slide. */
 220 /* Overrides core > 1.3.11, otherwise thumbnails are non-clickable */
 221 .slick button,
 222 .slick--thumbnail .slick__slide img {
 223   pointer-events: auto;
 224 }
 225
 226 /* Provides decent dots if core slick-theme.css is disabled. */
 227 .slick-dots li {
 228   margin-bottom: 5px;
 229   display: inline-block;
 230   vertical-align: top;
 231 }
 232
 233 /* Overrides too tiny bullets from core slick.css.*/
 234 .slick-dots li button::before {
 235   font-size: 12px;
 236   font-size: 0.75rem;
 237 }
 238
 239 /**
 240  * Media.
 241  */
 242 /* Hide lazyloaded image when JS is off.*/
 243 img[data-lazy] {
 244   display: none;
 245 }
 246
 247 .slide__media {
 248   overflow: hidden;
 249   position: relative;
 250 }
 251
 252 /* Center the image to reduce gap at RHS with smaller image, larger container */
 253 .media__image {
 254   margin: 0 auto;
 255 }
 256
 257 /** @todo: Remove temp fix for when total <= slidesToShow at 1.6.1+. */
 258 /** @see https://github.com/kenwheeler/slick/issues/262 */
 259 .slick--less .slick-track {
 260   margin-left: auto;
 261   margin-right: auto;
 262   text-align: center;
 263 }
 264
 265 .slick--less .slick-slide {
 266   float: none;
 267   display: inline-block;
 268   vertical-align: top;
 269 }
 270
 271 .slick--less .draggable {
 272   cursor: default;
 273 }