.snippetBar{ @menuHeight : 25px; position : relative; height : @menuHeight; background-color : #ddd; .editors{ position : absolute; display : flex; top : 0px; right : 0px; height : @menuHeight; width : 125px; justify-content : space-between; &>div{ height : @menuHeight; width : @menuHeight; cursor : pointer; line-height : @menuHeight; text-align : center; &:hover,&.selected{ background-color : #999; } &.text{ .tooltipLeft('Brew Editor'); } &.style{ .tooltipLeft('Style Editor'); } &.meta{ .tooltipLeft('Properties'); } &.undo{ .tooltipLeft('Undo'); font-size : 0.75em; color : grey; &.active{ color : black; } } &.redo{ .tooltipLeft('Redo'); font-size : 0.75em; color : grey; &.active{ color : black; } } &.divider { background: linear-gradient(#000, #000) no-repeat center/1px 100%; width: 5px; &:hover{ background-color: inherit; } } } } .snippetBarButton{ height : @menuHeight; line-height : @menuHeight; display : inline-block; padding : 0px 5px; font-weight : 800; font-size : 0.625em; text-transform : uppercase; cursor : pointer; &:hover, &.selected{ background-color : #999; } i{ vertical-align : middle; margin-right : 3px; font-size : 1.4em; } } .toggleMeta{ position : absolute; top : 0px; right : 0px; border-left : 1px solid black; .tooltipLeft("Edit Brew Properties"); } .snippetGroup{ border-right : 1px solid black; &:hover{ .dropdown{ visibility : visible; } } .dropdown{ position : absolute; top : 100%; visibility : hidden; z-index : 1000; margin-left : -5px; padding : 0px; background-color : #ddd; .snippet{ .animate(background-color); padding : 5px; cursor : pointer; font-size : 10px; i{ margin-right : 8px; font-size : 1.2em; } &:hover{ background-color : #999; } } } } }