dropdown.sass 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. @import "../utilities/mixins"
  2. $dropdown-menu-min-width: 12rem !default
  3. $dropdown-content-background-color: $scheme-main !default
  4. $dropdown-content-arrow: $link !default
  5. $dropdown-content-offset: 4px !default
  6. $dropdown-content-padding-bottom: 0.5rem !default
  7. $dropdown-content-padding-top: 0.5rem !default
  8. $dropdown-content-radius: $radius !default
  9. $dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
  10. $dropdown-content-z: 20 !default
  11. $dropdown-item-color: $text !default
  12. $dropdown-item-hover-color: $scheme-invert !default
  13. $dropdown-item-hover-background-color: $background !default
  14. $dropdown-item-active-color: $link-invert !default
  15. $dropdown-item-active-background-color: $link !default
  16. $dropdown-divider-background-color: $border-light !default
  17. .dropdown
  18. display: inline-flex
  19. position: relative
  20. vertical-align: top
  21. &.is-active,
  22. &.is-hoverable:hover
  23. .dropdown-menu
  24. display: block
  25. &.is-right
  26. .dropdown-menu
  27. left: auto
  28. right: 0
  29. &.is-up
  30. .dropdown-menu
  31. bottom: 100%
  32. padding-bottom: $dropdown-content-offset
  33. padding-top: initial
  34. top: auto
  35. .dropdown-menu
  36. display: none
  37. +ltr-position(0, false)
  38. min-width: $dropdown-menu-min-width
  39. padding-top: $dropdown-content-offset
  40. position: absolute
  41. top: 100%
  42. z-index: $dropdown-content-z
  43. .dropdown-content
  44. background-color: $dropdown-content-background-color
  45. border-radius: $dropdown-content-radius
  46. box-shadow: $dropdown-content-shadow
  47. padding-bottom: $dropdown-content-padding-bottom
  48. padding-top: $dropdown-content-padding-top
  49. .dropdown-item
  50. color: $dropdown-item-color
  51. display: block
  52. font-size: 0.875rem
  53. line-height: 1.5
  54. padding: 0.375rem 1rem
  55. position: relative
  56. a.dropdown-item,
  57. button.dropdown-item
  58. +ltr-property("padding", 3rem)
  59. text-align: inherit
  60. white-space: nowrap
  61. width: 100%
  62. &:hover
  63. background-color: $dropdown-item-hover-background-color
  64. color: $dropdown-item-hover-color
  65. &.is-active
  66. background-color: $dropdown-item-active-background-color
  67. color: $dropdown-item-active-color
  68. .dropdown-divider
  69. background-color: $dropdown-divider-background-color
  70. border: none
  71. display: block
  72. height: 1px
  73. margin: 0.5rem 0