carousel.less 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. // CAROUSEL
  2. // --------
  3. .carousel {
  4. position: relative;
  5. margin-bottom: @baseLineHeight;
  6. line-height: 1;
  7. }
  8. .carousel-inner {
  9. overflow: hidden;
  10. width: 100%;
  11. position: relative;
  12. }
  13. .carousel {
  14. .item {
  15. display: none;
  16. position: relative;
  17. .transition(.6s ease-in-out left);
  18. }
  19. // Account for jankitude on images
  20. .item > img {
  21. display: block;
  22. line-height: 1;
  23. }
  24. .active,
  25. .next,
  26. .prev { display: block; }
  27. .active {
  28. left: 0;
  29. }
  30. .next,
  31. .prev {
  32. position: absolute;
  33. top: 0;
  34. width: 100%;
  35. }
  36. .next {
  37. left: 100%;
  38. }
  39. .prev {
  40. left: -100%;
  41. }
  42. .next.left,
  43. .prev.right {
  44. left: 0;
  45. }
  46. .active.left {
  47. left: -100%;
  48. }
  49. .active.right {
  50. left: 100%;
  51. }
  52. }
  53. // Left/right controls for nav
  54. // ---------------------------
  55. .carousel-control {
  56. position: absolute;
  57. top: 40%;
  58. left: 15px;
  59. width: 40px;
  60. height: 40px;
  61. margin-top: -20px;
  62. font-size: 60px;
  63. font-weight: 100;
  64. line-height: 30px;
  65. color: @white;
  66. text-align: center;
  67. background: @grayDarker;
  68. border: 3px solid @white;
  69. .border-radius(23px);
  70. .opacity(50);
  71. // we can't have this transition here
  72. // because webkit cancels the carousel
  73. // animation if you trip this while
  74. // in the middle of another animation
  75. // ;_;
  76. // .transition(opacity .2s linear);
  77. // Reposition the right one
  78. &.right {
  79. left: auto;
  80. right: 15px;
  81. }
  82. // Hover state
  83. &:hover {
  84. color: @white;
  85. text-decoration: none;
  86. .opacity(90);
  87. }
  88. }
  89. // Caption for text below images
  90. // -----------------------------
  91. .carousel-caption {
  92. position: absolute;
  93. left: 0;
  94. right: 0;
  95. bottom: 0;
  96. padding: 10px 15px 5px;
  97. background: @grayDark;
  98. background: rgba(0,0,0,.75);
  99. }
  100. .carousel-caption h4,
  101. .carousel-caption p {
  102. color: @white;
  103. }