dropdown.sass 2.1 KB

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