carousel-rtl.less 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. //
  2. // RTL Carousel
  3. // --------------------------------------------------
  4. // Left/right controls for nav
  5. // ---------------------------
  6. .carousel-control {
  7. right: 0;
  8. bottom: 0;
  9. // Set gradients for backgrounds
  10. &.left {
  11. right: auto;
  12. left: 0;
  13. #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
  14. }
  15. &.right {
  16. left: auto;
  17. right: 0;
  18. #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
  19. }
  20. .icon-prev,
  21. .glyphicon-chevron-left {
  22. left: 50%;
  23. right: auto;
  24. margin-right: -10px;
  25. }
  26. .icon-next,
  27. .glyphicon-chevron-right {
  28. right: 50%;
  29. left: auto;
  30. margin-left: -10px;
  31. }
  32. }
  33. // Optional indicator pips
  34. //
  35. // Add an unordered list with the following class and add a list item for each
  36. // slide your carousel holds.
  37. .carousel-indicators {
  38. right: 50%;
  39. left: 0;
  40. margin-right: -30%;
  41. margin-left: 0;
  42. padding-left: 0;
  43. }
  44. // Scale up controls for tablets and up
  45. @media screen and (min-width: @screen-sm-min) {
  46. // Scale up the controls a smidge
  47. .carousel-control {
  48. .glyphicon-chevron-left,
  49. .icon-prev {
  50. margin-left: 0;
  51. margin-right: -15px;
  52. }
  53. .glyphicon-chevron-right,
  54. .icon-next {
  55. margin-left: 0;
  56. margin-right: -15px;
  57. }
  58. }
  59. // Show and left align the captions
  60. .carousel-caption {
  61. left: 20%;
  62. right: 20%;
  63. padding-bottom: 30px;
  64. }
  65. }