You are here

slick.theme--classic.css in Slick Carousel 7.3

Detailed stylings are all yours, get yourself dirty.

Transform is more performed than positions.

File

css/theme/slick.theme--classic.css
View source
  1. /**
  2. * @file
  3. * Detailed stylings are all yours, get yourself dirty.
  4. *
  5. * Transform is more performed than positions.
  6. */
  7. .slick--skin--classic .slick__slide {
  8. overflow: hidden;
  9. }
  10. .slick--skin--classic .slide__caption {
  11. background-color: #000;
  12. background-color: rgba(0, 0, 0, 0.8);
  13. color: #fff;
  14. left: auto;
  15. margin: 0;
  16. min-height: 80px;
  17. padding: 15px;
  18. -webkit-transition: -webkit-transform 1s ease-in-out 0.2s;
  19. transition: transform 1s ease-in-out 0.2s;
  20. width: 100%;
  21. }
  22. .slick--skin--classic .slide__description {
  23. margin: 0;
  24. }
  25. .slick--skin--classic .slide--caption--below .slide__caption {
  26. background: none;
  27. color: #38465c;
  28. }
  29. .slick--skin--classic .slide--caption--center .slide__caption {
  30. color: #fff;
  31. opacity: 0;
  32. visibility: hidden;
  33. -webkit-transition: all 0.4s ease-in-out 0s;
  34. transition: all 0.4s ease-in-out 0s;
  35. -webkit-backface-visibility: hidden;
  36. }
  37. .slick--skin--classic .slide--caption--center:hover .slide__caption {
  38. opacity: 1;
  39. visibility: visible;
  40. }
  41. @media (min-width: 64em) {
  42. .slick--skin--classic .slide__caption {
  43. height: 100%;
  44. min-height: 100%;
  45. padding: 60px 30px;
  46. top: 0;
  47. width: 22%;
  48. }
  49. .slick--skin--classic .slide__caption .slide__data {
  50. margin: 0 !important; /* csslint allow: known-properties, important */
  51. padding: 15px;
  52. width: 100%;
  53. }
  54. .slick--skin--classic .slide--caption--center .slide__caption {
  55. height: 120px;
  56. left: 50%;
  57. margin: -60px 0 0 -40%;
  58. min-height: 120px;
  59. top: 50%;
  60. width: 80%;
  61. }
  62. .slick--skin--classic .slide--caption--top .slide__caption,
  63. .slick--skin--classic .slide--caption--center-top .slide__caption,
  64. .slick--skin--classic .slide--caption--bottom .slide__caption,
  65. .slick--skin--classic .slide--caption--below .slide__caption {
  66. height: auto;
  67. min-height: 80px;
  68. padding: 30px;
  69. width: 100%;
  70. }
  71. .slick--skin--classic .slide--caption--bottom .slide__caption {
  72. bottom: 0;
  73. -ms-transform: translateY(210px);
  74. -webkit-transform: translateY(210px);
  75. transform: translateY(210px);
  76. min-height: 120px;
  77. top: auto;
  78. }
  79. .slick--skin--classic .slide--caption--stage-zebra .slide__title {
  80. margin-bottom: 30px;
  81. }
  82. .slick--skin--classic .slide--caption--stage-zebra:nth-child(odd) .slide__caption,
  83. .slick--skin--classic .slide--caption--stage-left .slide__caption,
  84. .slick--skin--classic .slide--caption--left .slide__caption {
  85. left: 0;
  86. -ms-transform: translateX(-320px);
  87. -webkit-transform: translateX(-320px);
  88. transform: translateX(-320px);
  89. }
  90. .slick--skin--classic .slide--caption--stage-zebra:nth-child(even) .slide__caption,
  91. .slick--skin--classic .slide--caption--stage-right .slide__caption,
  92. .slick--skin--classic .slide--caption--right .slide__caption {
  93. left: auto;
  94. right: 0;
  95. -ms-transform: translateX(320px);
  96. -webkit-transform: translateX(320px);
  97. transform: translateX(320px);
  98. }
  99. .slick--skin--classic .slide--caption--top .slide__caption,
  100. .slick--skin--classic .slide--caption--center-top .slide__caption {
  101. top: 0;
  102. -ms-transform: translateY(-210px);
  103. -webkit-transform: translateY(-210px);
  104. transform: translateY(-210px);
  105. }
  106. .slick--skin--classic .slick__slide.slick-active .slide__caption {
  107. -ms-transform: translateY(0);
  108. -webkit-transform: translateY(0);
  109. transform: translateY(0);
  110. -webkit-transition-delay: 0s;
  111. transition-delay: 0s;
  112. }
  113. }