Skip to content

Instantly share code, notes, and snippets.

@RaoHai

RaoHai/HighlightMenu.less

Created September 28, 2016 07:00
Show Gist options
  • Save RaoHai/71e3ade773f70ce462ed690d797c43d7 to your computer and use it in GitHub Desktop.
Save RaoHai/71e3ade773f70ce462ed690d797c43d7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HighlightMenu.less
@keyframes pop-upwards {
0% {
transform: matrix(.97,0,0,1,0,12);
opacity: 0
}
20% {
transform: matrix(.99,0,0,1,0,2);
opacity: .7
}
40% {
transform: matrix(1,0,0,1,0,-1);
opacity: 1
}
70% {
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
100% {
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
}
.highlightMenu {
position: absolute;
visibility: hidden;
display: none;
z-index: 500;
transition: none;
top: 0;
left: 0;
&.active {
display: inline-block;
visibility: visible;
transition: top 75ms ease-out,left 75ms ease-out;
animation: pop-upwards 180ms forwards linear;
}
.highlightMenu-inner {
position: relative;
background-image: linear-gradient(to bottom,rgba(49,49,47,.99),#262625);
background-repeat: repeat-x;
border-radius: 5px;
button {
border-radius: 0;
background: none;
box-shadow: none;
height: auto;
line-height: inherit;
border-width: 0;
padding: 0;
vertical-align: baseline;
color: rgba(0,0,0,.44);
white-space: normal;
text-align: left;
margin-left: 0;
margin-right: 0;
padding-left: 8px;
padding-right: 8px;
height: 44px;
line-height: 46px;
&:first-child {
padding-left: 18px;
}
&:last-child {
padding-right: 18px;
}
i.fa {
color: white;
font-size: 14px;
}
}
}
.highlightMenu-arrowClip {
position: absolute;
bottom: -10px;
left: 50%;
clip: rect(10px 20px 20px 0);
margin-left: -10px;
}
.highlightMenu-arrowClip .highlightMenu-arrow {
display: block;
width: 20px;
height: 20px;
background-color: #262625;
transform: rotate(45deg) scale(.5);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment