You are here

Home » API reference » Slick Carousel 7.2

slick.theme--grid.css in Slick Carousel 7.2

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

Block grid based on Foundation.

File

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

  2.  * @file

  3.  * Block grid based on Foundation.

  4.  */

  5. 

  6. [class*="block-grid-"],

  7. .block [class*="block-grid-"],

  8. .item-list > [class*="block-grid-"] {

  9.   display: block;

  10.   list-style: none;

  11.   padding: 0;

  12.   margin: 0 -0.625rem;

  13. }

  14. 

  15. [class*="block-grid-"]::before,

  16. [class*="block-grid-"]::after {

  17.   content: " ";

  18.   display: table;

  19. }

  20. 

  21. [class*="block-grid-"]::after {

  22.   clear: both;

  23. }

  24. 

  25. [class*="block-grid-"] > .grid {

  26.   display: block;

  27.   float: left;

  28.   height: auto;

  29.   list-style: none;

  30.   margin: 0;

  31.   padding: 0 0.625rem 1.25rem;

  32. }

  33. 

  34. .block-grid--centered[class*="block-grid"] {

  35.   text-align: center;

  36. }

  37. 

  38. .block-grid--centered[class*="block-grid"] > .grid,

  39. .item-list > .block-grid--centered[class*="block-grid"] > .grid {

  40.   text-align: left;

  41.   display: inline-block;

  42.   float: none;

  43.   vertical-align: top;

  44. }

  45. 

  46. @media only screen {

  47.   .small-block-grid-1 > .grid {

  48.     width: 100%;

  49.   }

  50. 

  51.   .small-block-grid-2 > .grid {

  52.     width: 50%;

  53.   }

  54. 

  55.   .small-block-grid-3 > .grid {

  56.     width: 33.33333%;

  57.   }

  58. 

  59.   .small-block-grid-4 > .grid {

  60.     width: 25%;

  61.   }

  62. 

  63.   .small-block-grid-5 > .grid {

  64.     width: 20%;

  65.   }

  66. 

  67.   .small-block-grid-6 > .grid {

  68.     width: 16.66667%;

  69.   }

  70. 

  71.   .small-block-grid-7 > .grid {

  72.     width: 14.28571%;

  73.   }

  74. 

  75.   .small-block-grid-8 > .grid {

  76.     width: 12.5%;

  77.   }

  78. 

  79.   .small-block-grid-9 > .grid {

  80.     width: 11.11111%;

  81.   }

  82. 

  83.   .small-block-grid-10 > .grid {

  84.     width: 10%;

  85.   }

  86. 

  87.   .small-block-grid-11 > .grid {

  88.     width: 9.09091%;

  89.   }

  90. 

  91.   .small-block-grid-12 > .grid {

  92.     width: 8.33333%;

  93.   }

  94. 

  95.   .small-block-grid-1 > .grid:nth-of-type(1n),

  96.   .small-block-grid-2 > .grid:nth-of-type(1n),

  97.   .small-block-grid-3 > .grid:nth-of-type(1n),

  98.   .small-block-grid-4 > .grid:nth-of-type(1n),

  99.   .small-block-grid-5 > .grid:nth-of-type(1n),

  100.   .small-block-grid-6 > .grid:nth-of-type(1n),

  101.   .small-block-grid-8 > .grid:nth-of-type(1n),

  102.   .small-block-grid-7 > .grid:nth-of-type(1n),

  103.   .small-block-grid-9 > .grid:nth-of-type(1n),

  104.   .small-block-grid-10 > .grid:nth-of-type(1n),

  105.   .small-block-grid-11 > .grid:nth-of-type(1n),

  106.   .small-block-grid-12 > .grid:nth-of-type(1n) {

  107.     clear: none;

  108.   }

  109. 

  110.   .small-block-grid-1 > .grid:nth-of-type(1n+1),

  111.   .small-block-grid-2 > .grid:nth-of-type(2n+1),

  112.   .small-block-grid-3 > .grid:nth-of-type(3n+1),

  113.   .small-block-grid-4 > .grid:nth-of-type(4n+1),

  114.   .small-block-grid-5 > .grid:nth-of-type(5n+1),

  115.   .small-block-grid-6 > .grid:nth-of-type(6n+1),

  116.   .small-block-grid-7 > .grid:nth-of-type(7n+1),

  117.   .small-block-grid-8 > .grid:nth-of-type(8n+1),

  118.   .small-block-grid-9 > .grid:nth-of-type(9n+1),

  119.   .small-block-grid-10 > .grid:nth-of-type(10n+1),

  120.   .small-block-grid-11 > .grid:nth-of-type(11n+1),

  121.   .small-block-grid-12 > .grid:nth-of-type(12n+1) {

  122.     clear: both;

  123.   }

  124. }

  125. 

  126. /** 641px with 16px base font. */

  127. @media only screen and (min-width: 40.063em) {

  128.   .medium-block-grid-1 > .grid {

  129.     width: 100%;

  130.   }

  131. 

  132.   .medium-block-grid-2 > .grid {

  133.     width: 50%;

  134.   }

  135. 

  136.   .medium-block-grid-3 > .grid {

  137.     width: 33.33333%;

  138.   }

  139. 

  140.   .medium-block-grid-4 > .grid {

  141.     width: 25%;

  142.   }

  143. 

  144.   .medium-block-grid-5 > .grid {

  145.     width: 20%;

  146.   }

  147. 

  148.   .medium-block-grid-6 > .grid {

  149.     width: 16.66667%;

  150.   }

  151. 

  152.   .medium-block-grid-7 > .grid {

  153.     width: 14.28571%;

  154.   }

  155. 

  156.   .medium-block-grid-8 > .grid {

  157.     width: 12.5%;

  158.   }

  159. 

  160.   .medium-block-grid-9 > .grid {

  161.     width: 11.11111%;

  162.   }

  163. 

  164.   .medium-block-grid-10 > .grid {

  165.     width: 10%;

  166.   }

  167. 

  168.   .medium-block-grid-11 > .grid {

  169.     width: 9.09091%;

  170.   }

  171. 

  172.   .medium-block-grid-12 > .grid {

  173.     width: 8.33333%;

  174.   }

  175. 

  176.   .medium-block-grid-1 > .grid:nth-of-type(1n),

  177.   .medium-block-grid-2 > .grid:nth-of-type(1n),

  178.   .medium-block-grid-3 > .grid:nth-of-type(1n),

  179.   .medium-block-grid-4 > .grid:nth-of-type(1n),

  180.   .medium-block-grid-5 > .grid:nth-of-type(1n),

  181.   .medium-block-grid-6 > .grid:nth-of-type(1n),

  182.   .medium-block-grid-7 > .grid:nth-of-type(1n),

  183.   .medium-block-grid-8 > .grid:nth-of-type(1n),

  184.   .medium-block-grid-9 > .grid:nth-of-type(1n),

  185.   .medium-block-grid-10 > .grid:nth-of-type(1n),

  186.   .medium-block-grid-11 > .grid:nth-of-type(1n),

  187.   .medium-block-grid-12 > .grid:nth-of-type(1n) {

  188.     clear: none;

  189.   }

  190. 

  191.   .medium-block-grid-1 > .grid:nth-of-type(1n+1),

  192.   .medium-block-grid-2 > .grid:nth-of-type(2n+1),

  193.   .medium-block-grid-3 > .grid:nth-of-type(3n+1),

  194.   .medium-block-grid-4 > .grid:nth-of-type(4n+1),

  195.   .medium-block-grid-5 > .grid:nth-of-type(5n+1),

  196.   .medium-block-grid-6 > .grid:nth-of-type(6n+1),

  197.   .medium-block-grid-7 > .grid:nth-of-type(7n+1),

  198.   .medium-block-grid-8 > .grid:nth-of-type(8n+1),

  199.   .medium-block-grid-9 > .grid:nth-of-type(9n+1),

  200.   .medium-block-grid-10 > .grid:nth-of-type(10n+1),

  201.   .medium-block-grid-11 > .grid:nth-of-type(11n+1),

  202.   .medium-block-grid-12 > .grid:nth-of-type(12n+1) {

  203.     clear: both;

  204.   }

  205. }

  206. 

  207. /** 1025px with 16px base font. */

  208. @media only screen and (min-width: 64.063em) {

  209.   .large-block-grid-1 > .grid {

  210.     width: 100%;

  211.   }

  212. 

  213.   .large-block-grid-2 > .grid {

  214.     width: 50%;

  215.   }

  216. 

  217.   .large-block-grid-3 > .grid {

  218.     width: 33.33333%;

  219.   }

  220. 

  221.   .large-block-grid-4 > .grid {

  222.     width: 25%;

  223.   }

  224. 

  225.   .large-block-grid-5 > .grid {

  226.     width: 20%;

  227.   }

  228. 

  229.   .large-block-grid-6 > .grid {

  230.     width: 16.66667%;

  231.   }

  232. 

  233.   .large-block-grid-7 > .grid {

  234.     width: 14.28571%;

  235.   }

  236. 

  237.   .large-block-grid-8 > .grid {

  238.     width: 12.5%;

  239.   }

  240. 

  241.   .large-block-grid-9 > .grid {

  242.     width: 11.11111%;

  243.   }

  244. 

  245.   .large-block-grid-10 > .grid {

  246.     width: 10%;

  247.   }

  248. 

  249.   .large-block-grid-11 > .grid {

  250.     width: 9.09091%;

  251.   }

  252. 

  253.   .large-block-grid-12 > .grid {

  254.     width: 8.33333%;

  255.   }

  256. 

  257.   .large-block-grid-1 > .grid:nth-of-type(1n),

  258.   .large-block-grid-2 > .grid:nth-of-type(1n),

  259.   .large-block-grid-3 > .grid:nth-of-type(1n),

  260.   .large-block-grid-4 > .grid:nth-of-type(1n),

  261.   .large-block-grid-5 > .grid:nth-of-type(1n),

  262.   .large-block-grid-6 > .grid:nth-of-type(1n),

  263.   .large-block-grid-7 > .grid:nth-of-type(1n),

  264.   .large-block-grid-8 > .grid:nth-of-type(1n),

  265.   .large-block-grid-9 > .grid:nth-of-type(1n),

  266.   .large-block-grid-10 > .grid:nth-of-type(1n),

  267.   .large-block-grid-11 > .grid:nth-of-type(1n),

  268.   .large-block-grid-12 > .grid:nth-of-type(1n) {

  269.     clear: none;

  270.   }

  271. 

  272.   .large-block-grid-1 > .grid:nth-of-type(1n+1),

  273.   .large-block-grid-2 > .grid:nth-of-type(2n+1),

  274.   .large-block-grid-3 > .grid:nth-of-type(3n+1),

  275.   .large-block-grid-4 > .grid:nth-of-type(4n+1),

  276.   .large-block-grid-5 > .grid:nth-of-type(5n+1),

  277.   .large-block-grid-6 > .grid:nth-of-type(6n+1),

  278.   .large-block-grid-7 > .grid:nth-of-type(7n+1),

  279.   .large-block-grid-8 > .grid:nth-of-type(8n+1),

  280.   .large-block-grid-9 > .grid:nth-of-type(9n+1),

  281.   .large-block-grid-10 > .grid:nth-of-type(10n+1),

  282.   .large-block-grid-11 > .grid:nth-of-type(11n+1),

  283.   .large-block-grid-12 > .grid:nth-of-type(12n+1) {

  284.     clear: both;

  285.   }

  286. }

  287. 

  288. .slide--grid .slide__content {

  289.   list-style: none;

  290.   margin: 0 -0.625rem;

  291.   padding: 0;

  292. }

  293. 

  294. .slide--grid .grid__content {

  295.   position: relative;

  296. }

  297. 

  298. .slide--grid .slide__caption {

  299.   max-width: 100%;

  300. }