discord-client/webpack/scss/menu.scss

119 lines
2.2 KiB
SCSS

@import 'constants';
#WRAPPER > div.menu{
display: flex;
position: absolute;
top: 0;
left: 0;
width: $menu-width;
height: 100%;
background-color: $menu-bg;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
overflow: hidden;
/* (1) Menu Item */
& > span.channel{
display: block;
position: relative;
width: $menu-item-size;
height: $menu-item-size;
margin: #{$menu-item-space} 0;
border-radius: 50% / 50%;
background: $menu-item-bg center center no-repeat;
background-size: auto 55%;
overflow: hidden;
cursor: pointer;
transition: border-radius .4s cubic-bezier(.49, .4, .26, 1.93),
background-color .4s ease-in-out,
border-color .2s ease-in-out;
// {1} First item have margin-top //
&:first-child{
margin-top: #{$menu-item-space * 1.8};
}
// {2} [data-add] have no background color //
&[data-add]{
background-color: #1e2124;
border: 1px dashed #535552;
&:hover{ border-color: #ddd; }
}
// {3} Hover + current channel (except [data-add])//
&:not([data-add='1']):hover,
&:not([data-add='1']).active{
border-radius: 30% / 30%;
// if [data-special=1] -> colorize
&[data-special='1']{ background-color: #7289da; }
}
// {4} sub label //
&[data-sub]:not([data-sub='']){
display: inline-block;
position: relative;
margin-bottom: #{$menu-item-space + 2em};
overflow: visible;
// show sub-text
&:before{
content: attr(data-sub);
display: inline-block;
position: absolute;
top: calc( 100% + 1em );
left: 1em;
width: calc( 100% - 2em );
height: calc( 2em + #{$menu-item-space} );
font-size: .6em;
color: #777;
text-indent: -.7em;
text-align: center;
white-space: nowrap;
text-transform: uppercase;
border-bottom: 2px solid #{$menu-item-bg};
overflow: visible;
}
}
// {5} Specific icons //
&[data-icon='group']{
background-image: url('../asset/svg/menu.group.svg');
}
&[data-icon='add']{
background-image: url('../asset/svg/menu.add.svg');
&:hover{ background-image: url('../asset/svg/menu.add@hover.svg'); }
}
}
}