_dropdown.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .dropdown-content {
  2. &:focus {
  3. outline: 0;
  4. }
  5. @extend .z-depth-1;
  6. background-color: $dropdown-bg-color;
  7. margin: 0;
  8. display: none;
  9. min-width: 100px;
  10. overflow-y: auto;
  11. opacity: 0;
  12. position: absolute;
  13. left: 0;
  14. top: 0;
  15. z-index: 9999; // TODO: Check if this doesn't break other things
  16. transform-origin: 0 0;
  17. li {
  18. &:hover, &.active {
  19. background-color: $dropdown-hover-bg-color;
  20. }
  21. &:focus {
  22. outline: none;
  23. }
  24. &.divider {
  25. min-height: 0;
  26. height: 1px;
  27. }
  28. & > a, & > span {
  29. font-size: 16px;
  30. color: $dropdown-color;
  31. display: block;
  32. line-height: 22px;
  33. padding: (($dropdown-item-height - 22) / 2) 16px;
  34. }
  35. & > span > label {
  36. top: 1px;
  37. left: 0;
  38. height: 18px;
  39. }
  40. // Icon alignment override
  41. & > a > i {
  42. height: inherit;
  43. line-height: inherit;
  44. float: left;
  45. margin: 0 24px 0 0;
  46. width: 24px;
  47. }
  48. clear: both;
  49. color: $off-black;
  50. cursor: pointer;
  51. min-height: $dropdown-item-height;
  52. line-height: 1.5rem;
  53. width: 100%;
  54. text-align: left;
  55. }
  56. }
  57. body.keyboard-focused {
  58. .dropdown-content li:focus {
  59. background-color: darken($dropdown-hover-bg-color, 8%);
  60. }
  61. }
  62. // Input field specificity bugfix
  63. .input-field.col .dropdown-content [type="checkbox"] + label {
  64. top: 1px;
  65. left: 0;
  66. height: 18px;
  67. transform: none;
  68. }
  69. .dropdown-trigger {
  70. cursor: pointer;
  71. }