button-groups-rtl.less 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. //
  2. // RTL Button groups
  3. // --------------------------------------------------
  4. // Make the div behave like a button
  5. .btn-group,
  6. .btn-group-vertical {
  7. > .btn {
  8. float: right;
  9. }
  10. }
  11. // Prevent double borders when buttons are next to each other
  12. .btn-group {
  13. .btn + .btn,
  14. .btn + .btn-group,
  15. .btn-group + .btn,
  16. .btn-group + .btn-group {
  17. margin-right: -1px;
  18. margin-left: 0px;
  19. }
  20. }
  21. // Optional: Group multiple button groups together for a toolbar
  22. .btn-toolbar {
  23. margin-right: -5px; // Offset the first child's margin
  24. margin-left: 0px;
  25. .btn-group,
  26. .input-group {
  27. float: right;
  28. }
  29. > .btn,
  30. > .btn-group,
  31. > .input-group {
  32. margin-right: 5px;
  33. margin-left: 0px;
  34. }
  35. }
  36. // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
  37. .btn-group > .btn:first-child {
  38. margin-right: 0;
  39. &:not(:last-child):not(.dropdown-toggle) {
  40. border-top-right-radius: @border-radius-base;
  41. border-bottom-right-radius: @border-radius-base;
  42. .border-left-radius(0);
  43. }
  44. }
  45. // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
  46. .btn-group > .btn:last-child:not(:first-child),
  47. .btn-group > .dropdown-toggle:not(:first-child) {
  48. border-top-left-radius: @border-radius-base;
  49. border-bottom-left-radius: @border-radius-base;
  50. .border-right-radius(0);
  51. }
  52. // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
  53. .btn-group > .btn-group {
  54. float: right;
  55. }
  56. .btn-group.btn-group-justified > .btn,
  57. .btn-group.btn-group-justified > .btn-group {
  58. float: none;
  59. }
  60. .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  61. border-radius: 0;
  62. }
  63. .btn-group > .btn-group:first-child {
  64. > .btn:last-child,
  65. > .dropdown-toggle {
  66. border-top-right-radius: @border-radius-base;
  67. border-bottom-right-radius: @border-radius-base;
  68. .border-left-radius(0);
  69. }
  70. }
  71. .btn-group > .btn-group:last-child > .btn:first-child {
  72. border-top-left-radius: @border-radius-base;
  73. border-bottom-left-radius: @border-radius-base;
  74. .border-right-radius(0);
  75. }
  76. // Reposition the caret
  77. .btn .caret {
  78. margin-right: 0;
  79. }
  80. // Vertical button groups
  81. // ----------------------
  82. .btn-group-vertical {
  83. > .btn + .btn,
  84. > .btn + .btn-group,
  85. > .btn-group + .btn,
  86. > .btn-group + .btn-group {
  87. margin-top: -1px;
  88. margin-right: 0;
  89. }
  90. }