carousel.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .ui-carousel {
  2. display: flex;
  3. flex-direction: column;
  4. width: 100%;
  5. }
  6. .ui-carousel-content {
  7. display: flex;
  8. flex-direction: column;
  9. flex-wrap: nowrap;
  10. overflow: auto;
  11. padding: 0 .5em;
  12. }
  13. .ui-carousel-prev,
  14. .ui-carousel-next {
  15. align-self: center;
  16. text-align: center;
  17. flex-grow: 0;
  18. flex-shrink: 0;
  19. width: 2.5em;
  20. height: 2.5em;
  21. position: relative;
  22. }
  23. .ui-carousel-prev span,
  24. .ui-carousel-next span {
  25. width: 100%;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. }
  30. .ui-carousel-container {
  31. display: flex;
  32. flex-direction: row;
  33. padding: 0 .1em;
  34. }
  35. .ui-carousel-header,
  36. .ui-carousel-footer {
  37. padding: .5em;
  38. z-index: 1;
  39. }
  40. .ui-carousel-items-content {
  41. overflow: hidden;
  42. width: 100%;
  43. }
  44. .ui-carousel-items-container {
  45. display: flex;
  46. flex-wrap: nowrap;
  47. flex-direction: row;
  48. }
  49. .ui-carousel-items-container .ui-carousel-item {
  50. width: 100%;
  51. box-sizing: border-box;
  52. overflow: auto;
  53. }
  54. .ui-carousel-dots-container {
  55. display: flex;
  56. flex-direction: row;
  57. justify-content: center;
  58. flex-wrap: wrap;
  59. margin: .5em;
  60. }
  61. /* Vertical */
  62. .ui-carousel-vertical .ui-carousel-container {
  63. flex-direction: column;
  64. width: 100%;
  65. }
  66. .ui-carousel-vertical .ui-carousel-items-container {
  67. flex-direction: column;
  68. height: 100%;
  69. }
  70. .ui-carousel-vertical .ui-carousel-dots-container {
  71. margin: .75em 0;
  72. }