_nav-tab-alignment.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. // Alignment options
  2. // -------------------------
  3. // bottom
  4. .nav-tabs-bottom {
  5. border-bottom: 0;
  6. border-top: 1px solid $nav-tabs-border-color;
  7. > li {
  8. margin-bottom: 0;
  9. margin-top: -1px;
  10. > a {
  11. border-radius: 0 0 $border-radius-base $border-radius-base;
  12. }
  13. > a:hover,
  14. > a:focus,
  15. &.active > a,
  16. &.active > a:hover,
  17. &.active > a:focus {
  18. border: 1px solid $nav-tabs-active-link-hover-border-color;
  19. border-top-color: transparent;
  20. }
  21. }
  22. }
  23. // left
  24. .nav-tabs-left {
  25. border-bottom: 0;
  26. border-right: 1px solid $nav-tabs-border-color;
  27. > li {
  28. margin-bottom: 0;
  29. margin-right: -1px;
  30. float: none;
  31. > a {
  32. border-radius: $border-radius-base 0 0 $border-radius-base;
  33. margin-right: 0;
  34. margin-bottom: 2px;
  35. }
  36. > a:hover,
  37. > a:focus,
  38. &.active > a,
  39. &.active > a:hover,
  40. &.active > a:focus {
  41. border: 1px solid $nav-tabs-active-link-hover-border-color;
  42. border-right-color: transparent;
  43. }
  44. }
  45. .row > & {
  46. padding-right: 0;
  47. padding-left: ($grid-gutter-width / 2);
  48. margin-right: -1px;
  49. position: relative;
  50. z-index: 1;
  51. & + .tab-content {
  52. border-left: 1px solid $nav-tabs-active-link-hover-border-color;
  53. }
  54. }
  55. }
  56. // right
  57. .nav-tabs-right {
  58. border-bottom: 0;
  59. border-left: 1px solid $nav-tabs-border-color;
  60. > li {
  61. margin-bottom: 0;
  62. margin-left: -1px;
  63. float: none;
  64. > a {
  65. border-radius: 0 $border-radius-base $border-radius-base 0;
  66. margin-left: 0;
  67. margin-bottom: 2px;
  68. }
  69. > a:hover,
  70. > a:focus,
  71. &.active > a,
  72. &.active > a:hover,
  73. &.active > a:focus {
  74. border: 1px solid $nav-tabs-active-link-hover-border-color;
  75. border-left-color: transparent;
  76. }
  77. }
  78. .row > & {
  79. padding-left: 0;
  80. padding-right: ($grid-gutter-width / 2);
  81. }
  82. }