You are here

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

Re-used rules for Fullscreen and Fullwidth.

File

css/theme/slick.theme--full.css
View source
  1. /**
  2. * @file
  3. * Re-used rules for Fullscreen and Fullwidth.
  4. */
  5. .slide__constrained {
  6. box-sizing: border-box; /* dups due to csslint ignoring inheritance */
  7. height: 100%;
  8. min-height: 210px;
  9. padding-top: 10%;
  10. pointer-events: none;
  11. top: 0;
  12. z-index: 2;
  13. }
  14. .slide__constrained::after {
  15. content: "";
  16. display: table;
  17. clear: both;
  18. }
  19. .slide__constrained > .slide__caption {
  20. pointer-events: auto;
  21. }
  22. .slide__constrained .slide__link a {
  23. text-decoration: none;
  24. }
  25. @media (min-width: 64em) {
  26. .slide__constrained > .slide__caption {
  27. position: absolute;
  28. }
  29. .slide--caption--center .slide__constrained > .slide__caption {
  30. top: 50%;
  31. }
  32. .slide--caption--center .slide__constrained > .slide__caption,
  33. .slide--caption--center-top .slide__constrained > .slide__caption {
  34. left: 50%;
  35. padding: 0;
  36. text-align: center;
  37. transform: translateX(-50%);
  38. }
  39. .slide--caption--center .slide__constrained > .slide__caption {
  40. transform: translate(-50%, -50%);
  41. }
  42. .slide--caption--right .slide__constrained > .slide__caption {
  43. left: auto;
  44. right: 0;
  45. }
  46. .slide--caption--top .slide__constrained > .slide__caption,
  47. .slide--caption--bottom .slide__constrained > .slide__caption {
  48. width: 100%;
  49. }
  50. .slide--caption--top .slide__constrained > .slide__caption {
  51. top: 0;
  52. }
  53. .slide--caption--bottom .slide__constrained > .slide__caption {
  54. bottom: 0;
  55. top: auto;
  56. }
  57. .slick--has-arrow-down .slide--caption--bottom .slide__constrained > .slide__caption {
  58. padding-bottom: 80px;
  59. }
  60. .slide--caption--stage-left .slide__constrained > .slide__caption,
  61. .slide--caption--stage-right .slide__constrained > .slide__caption,
  62. .slide--caption--stage-zebra .slide__constrained > .slide__caption {
  63. left: 50%;
  64. padding: 0;
  65. transform: translateX(-50%);
  66. width: 82%;
  67. }
  68. .slide--caption--stage-left .slide__constrained > .slide__caption > .slide__data,
  69. .slide--caption--stage-zebra:nth-child(odd) .slide__constrained > .slide__caption > .slide__data {
  70. margin-right: 56%;
  71. }
  72. .slide--caption--stage-right .slide__constrained > .slide__caption > .slide__data,
  73. .slide--caption--stage-zebra:nth-child(even) .slide__constrained > .slide__caption > .slide__data {
  74. margin-left: 56%;
  75. }
  76. .slide--caption--stage-left .slide__constrained > .slide__caption > .slide__overlay,
  77. .slide--caption--stage-zebra:nth-child(odd) .slide__constrained > .slide__caption > .slide__overlay {
  78. float: right;
  79. width: 52%;
  80. }
  81. .slide--caption--stage-right .slide__constrained > .slide__caption > .slide__overlay,
  82. .slide--caption--stage-zebra:nth-child(even) .slide__constrained > .slide__caption > .slide__overlay {
  83. float: left;
  84. width: 52%;
  85. }
  86. .slide--caption--below .slide__constrained > .slide__caption {
  87. padding: 20px 0;
  88. position: relative;
  89. top: auto;
  90. width: 100%;
  91. }
  92. }