tabs.sass 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. $tabs-border-bottom-color: $border !default
  2. $tabs-border-bottom-style: solid !default
  3. $tabs-border-bottom-width: 1px !default
  4. $tabs-link-color: $text !default
  5. $tabs-link-hover-border-bottom-color: $text-strong !default
  6. $tabs-link-hover-color: $text-strong !default
  7. $tabs-link-active-border-bottom-color: $link !default
  8. $tabs-link-active-color: $link !default
  9. $tabs-link-padding: 0.5em 1em !default
  10. $tabs-boxed-link-radius: $radius !default
  11. $tabs-boxed-link-hover-background-color: $background !default
  12. $tabs-boxed-link-hover-border-bottom-color: $border !default
  13. $tabs-boxed-link-active-background-color: $white !default
  14. $tabs-boxed-link-active-border-color: $border !default
  15. $tabs-boxed-link-active-border-bottom-color: transparent !default
  16. $tabs-toggle-link-border-color: $border !default
  17. $tabs-toggle-link-border-style: solid !default
  18. $tabs-toggle-link-border-width: 1px !default
  19. $tabs-toggle-link-hover-background-color: $background !default
  20. $tabs-toggle-link-hover-border-color: $border-hover !default
  21. $tabs-toggle-link-radius: $radius !default
  22. $tabs-toggle-link-active-background-color: $link !default
  23. $tabs-toggle-link-active-border-color: $link !default
  24. $tabs-toggle-link-active-color: $link-invert !default
  25. .tabs
  26. @extend %block
  27. +overflow-touch
  28. @extend %unselectable
  29. align-items: stretch
  30. display: flex
  31. font-size: $size-normal
  32. justify-content: space-between
  33. overflow: hidden
  34. overflow-x: auto
  35. white-space: nowrap
  36. a
  37. align-items: center
  38. border-bottom-color: $tabs-border-bottom-color
  39. border-bottom-style: $tabs-border-bottom-style
  40. border-bottom-width: $tabs-border-bottom-width
  41. color: $tabs-link-color
  42. display: flex
  43. justify-content: center
  44. margin-bottom: -#{$tabs-border-bottom-width}
  45. padding: $tabs-link-padding
  46. vertical-align: top
  47. &:hover
  48. border-bottom-color: $tabs-link-hover-border-bottom-color
  49. color: $tabs-link-hover-color
  50. li
  51. display: block
  52. &.is-active
  53. a
  54. border-bottom-color: $tabs-link-active-border-bottom-color
  55. color: $tabs-link-active-color
  56. ul
  57. align-items: center
  58. border-bottom-color: $tabs-border-bottom-color
  59. border-bottom-style: $tabs-border-bottom-style
  60. border-bottom-width: $tabs-border-bottom-width
  61. display: flex
  62. flex-grow: 1
  63. flex-shrink: 0
  64. justify-content: flex-start
  65. &.is-left
  66. padding-right: 0.75em
  67. &.is-center
  68. flex: none
  69. justify-content: center
  70. padding-left: 0.75em
  71. padding-right: 0.75em
  72. &.is-right
  73. justify-content: flex-end
  74. padding-left: 0.75em
  75. .icon
  76. &:first-child
  77. margin-right: 0.5em
  78. &:last-child
  79. margin-left: 0.5em
  80. // Alignment
  81. &.is-centered
  82. ul
  83. justify-content: center
  84. &.is-right
  85. ul
  86. justify-content: flex-end
  87. // Styles
  88. &.is-boxed
  89. a
  90. border: 1px solid transparent
  91. border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
  92. &:hover
  93. background-color: $tabs-boxed-link-hover-background-color
  94. border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
  95. li
  96. &.is-active
  97. a
  98. background-color: $tabs-boxed-link-active-background-color
  99. border-color: $tabs-boxed-link-active-border-color
  100. border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
  101. &.is-fullwidth
  102. li
  103. flex-grow: 1
  104. flex-shrink: 0
  105. &.is-toggle
  106. a
  107. border-color: $tabs-toggle-link-border-color
  108. border-style: $tabs-toggle-link-border-style
  109. border-width: $tabs-toggle-link-border-width
  110. margin-bottom: 0
  111. position: relative
  112. &:hover
  113. background-color: $tabs-toggle-link-hover-background-color
  114. border-color: $tabs-toggle-link-hover-border-color
  115. z-index: 2
  116. li
  117. & + li
  118. margin-left: -#{$tabs-toggle-link-border-width}
  119. &:first-child a
  120. border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
  121. &:last-child a
  122. border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
  123. &.is-active
  124. a
  125. background-color: $tabs-toggle-link-active-background-color
  126. border-color: $tabs-toggle-link-active-border-color
  127. color: $tabs-toggle-link-active-color
  128. z-index: 1
  129. ul
  130. border-bottom: none
  131. &.is-toggle-rounded
  132. li
  133. &:first-child a
  134. border-bottom-left-radius: $radius-rounded
  135. border-top-left-radius: $radius-rounded
  136. padding-left: 1.25em
  137. &:last-child a
  138. border-bottom-right-radius: $radius-rounded
  139. border-top-right-radius: $radius-rounded
  140. padding-right: 1.25em
  141. // Sizes
  142. &.is-small
  143. font-size: $size-small
  144. &.is-medium
  145. font-size: $size-medium
  146. &.is-large
  147. font-size: $size-large