You are here

Home » API reference » Slick Carousel 8.2

slick.theme--split.css in Slick Carousel 8.2

Same filename and directory in other branches
  1. 8 css/theme/slick.theme--split.css
  2. 7.3 css/theme/slick.theme--split.css
  3. 7.2 css/theme/slick.theme--split.css

Detailed stylings are all yours, get yourself dirty.

File

css/theme/slick.theme--split.css
View source 
  1. /**

  2.  * @file

  3.  * Detailed stylings are all yours, get yourself dirty.

  4.  */

  5. .slick--skin--split .slide__caption {

  6.   top: 0;

  7. }

  8. 

  9. @media (min-width: 64em) {

  10.   .slide--caption--split-left .slide__caption,

  11.   .slide--caption--split-right .slide__caption {

  12.     box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  13.     left: 0;

  14.     padding: 20px;

  15.     position: relative;

  16.     top: 10%;

  17.     width: 42%;

  18.   }

  19. 

  20.   .slick--skin--split .slide--caption--split-left .slide__media,

  21.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__media {

  22.     float: left;

  23.     width: 48%;

  24.   }

  25. 

  26.   .slick--skin--split .slide--caption--split-right .slide__media,

  27.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__media {

  28.     float: right;

  29.     width: 48%;

  30.   }

  31. 

  32.   .slick--skin--split .slide--caption--split-left .slide__caption,

  33.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__caption {

  34.     margin-left: 52%;

  35.     text-align: right;

  36.     width: auto;

  37.   }

  38. 

  39.   .slick--skin--split .slide--caption--split-right .slide__caption,

  40.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__caption {

  41.     margin-right: 52%;

  42.     text-align: left;

  43.     width: auto;

  44.   }

  45. 

  46.   .slick--skin--split .slide--caption--split-left .slide__media,

  47.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__media {

  48.     float: left;

  49.     width: 48%;

  50.   }

  51. 

  52.   .slick--skin--split .slide--caption--split-right .slide__media,

  53.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__media {

  54.     float: right;

  55.     width: 48%;

  56.   }

  57. 

  58.   .slick--skin--split .slide--caption--split-left .slide__constrained > .slide__caption,

  59.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__constrained > .slide__caption,

  60.   .slick--skin--split .slide--caption--split-left .slide__caption,

  61.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__caption {

  62.     margin-left: 52%;

  63.     width: auto;

  64.   }

  65. 

  66.   .slick--skin--split .slide--caption--split-right .slide__constrained > .slide__caption,

  67.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__constrained > .slide__caption,

  68.   .slick--skin--split .slide--caption--split-right .slide__caption,

  69.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__caption {

  70.     margin-right: 52%;

  71.     width: auto;

  72.   }

  73. 

  74.   .slick--skin--split .slide__caption .clearfix::after {

  75.     clear: none;

  76.   }

  77. }