app/assets/stylesheets/modules/menu.scss
.standard-menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 1rem 0em;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-weight: normal;
border: 1px solid rgba(34, 36, 38, 0.15);
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
border-radius: 0.28571429rem;
min-height: 2.85714286em;
&:not(.vertical) .item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.item {
position: relative;
vertical-align: middle;
line-height: 1;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: none;
padding: 0.92857143em 1.14285714em;
text-transform: none;
color: rgba(0, 0, 0, 0.87);
font-weight: normal;
-webkit-transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
&:first-child {
border-radius: 0.28571429rem 0px 0px 0.28571429rem;
}
&:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.95);
}
&.active {
background: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.95);
font-weight: normal;
box-shadow: none;
}
}
&:after {
content: '';
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
&:first-child {
margin-top: 0rem;
}
&:last-child {
margin-bottom: 0rem;
}
}
/*--------------
Pressed
---------------*/
.ui.link.menu .item:active,
.ui.menu .link.item:active,
.ui.menu a.item:active {
background: rgba(0, 0, 0, 0.03);
color: rgba(0, 0, 0, 0.95);
}
/*--------------
Active
---------------*/
.ui.menu .active.item > i.icon {
opacity: 1;
}