1@menuitem_size: 2em; 2@menuicon_size: 1.2em; 3@menu_padding: 0.1em; 4 5.prosemirror_wrapper { 6 position: relative; 7} 8 9.menubar { 10 top: 0; 11 background: @ini_background; 12 13 .menuicon { 14 width: @menuitem_size; 15 text-align: center; 16 17 svg { 18 width: @menuicon_size; 19 height: @menuicon_size; 20 fill: @ini_text; 21 } 22 } 23 24 .menulabel { 25 display: none; 26 min-width: @menuitem_size; 27 padding: 0 3px; 28 color: @ini_text; 29 } 30 31 .menuitem { 32 display: inline-flex; 33 align-items: center; 34 box-sizing: border-box; 35 height: @menuitem_size; 36 padding: @menu_padding; 37 border-right: 1px solid fade(@ini_border, 30%); 38 cursor: pointer; 39 40 &:hover { 41 background-color: fade(@ini_border, 30%); 42 } 43 44 &.dropdown { 45 position: relative; 46 47 .menulabel { 48 display: block; 49 } 50 51 .dropdown-indicator { 52 width: 1em; 53 } 54 } 55 56 &.is-active { 57 border: 1px solid @ini_link; 58 59 > .menuicon svg { 60 fill: @ini_link; 61 } 62 63 > .menulabel { 64 color: @ini_link; 65 } 66 } 67 68 &.is-disabled { 69 pointer-events: none; 70 71 > .menuicon svg, 72 > .dropdown-indicator svg { 73 fill: @ini_border; 74 } 75 76 > .menulabel { 77 color: @ini_border; 78 } 79 } 80 } 81 82 .dropdown_content { 83 position: absolute; 84 top: @menuitem_size; 85 left: 0; 86 max-width: 300px; 87 white-space: nowrap; 88 background-color: @ini_background; 89 outline: 1px dotted @ini_border; 90 91 .menuitem { 92 display: flex; 93 94 .menulabel { 95 display: inline; 96 } 97 } 98 99 img { 100 float: left; 101 } 102 } 103} 104