editormd.menu.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. @charset "UTF-8";
  2. #{$prefix}menu {
  3. margin: 0;
  4. padding: 0;
  5. list-style: none;
  6. > li {
  7. margin: 0;
  8. padding: 5px 1px;
  9. display: inline-block;
  10. position: relative;
  11. &.divider {
  12. display: inline-block;
  13. text-indent: -9999px;
  14. margin: 0 5px;
  15. height: 65%;
  16. border-right: 1px solid $borderColor;
  17. }
  18. > a {
  19. outline: 0;
  20. color: $color;
  21. display: inline-block;
  22. min-width: 24px;
  23. font-size: 16px;
  24. text-decoration: none;
  25. text-align: center;
  26. @include border-radius(2px);
  27. border: 1px solid #fff;
  28. @include transition(all 300ms ease-out);
  29. &:hover, &.active {
  30. border: 1px solid $borderColor;
  31. background: #eee;
  32. }
  33. > .fa {
  34. text-align: center;
  35. display: block;
  36. padding: 5px;
  37. }
  38. > #{$prefix}bold {
  39. padding: 5px 2px;
  40. display: inline-block;
  41. font-weight: bold;
  42. }
  43. }
  44. &:hover #{$prefix}dropdown-menu {
  45. display: block;
  46. }
  47. }
  48. > li + li > a {
  49. margin-left: 3px;
  50. }
  51. }
  52. #{$prefix}dropdown-menu {
  53. display: none;
  54. background: #fff;
  55. border: 1px solid $borderColor;
  56. width: 148px;
  57. list-style: none;
  58. position: absolute;
  59. top: 33px;
  60. left: 0;
  61. z-index: 100;
  62. @include box-shadow(1px 2px 6px rgba(0, 0, 0, 0.15));
  63. &:before, &:after {
  64. width: 0;
  65. height: 0;
  66. display: block;
  67. content: "";
  68. position: absolute;
  69. top: -11px;
  70. left: 8px;
  71. border: 5px solid transparent;
  72. }
  73. &:before {
  74. border-bottom-color: #ccc;
  75. }
  76. &:after {
  77. border-bottom-color: #ffffff;
  78. top: -10px;
  79. }
  80. > li {
  81. > a {
  82. color: $color;
  83. display: block;
  84. text-decoration: none;
  85. padding: 8px 10px;
  86. &:hover {
  87. background: #f6f6f6;
  88. @include transition(all 300ms ease-out);
  89. }
  90. }
  91. }
  92. > li + li {
  93. border-top: 1px solid $borderColor;
  94. }
  95. }