/sass/bootstrap/_carousel.scss

https://bitbucket.org/decore/my-svadba.ru · Sass · 116 lines · 83 code · 18 blank · 15 comment · 0 complexity · 8def2e8f919475daa2d92b62dfe1bede MD5 · raw file

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