discord-client/parcel/scss/menu.scss

138 lines
2.6 KiB
SCSS
Raw Permalink Normal View History

2018-03-21 17:44:27 +00:00
@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: visible;
2018-03-21 17:44:27 +00:00
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} active channel : left border //
&:not([data-add='1']):not([data-sub]):after{
content: '';
display: block;
position: absolute;
top: 10%;
left: calc( #{$menu-item-size/2} - #{$menu-width/2} - 10px );
width: 10px;
height: 80%;
border-radius: 3px;
background-color: #aaa;
transition: left .2s ease-in-out;
}
&:not([data-add='1']):not([data-sub]).active:after{
left: calc( #{$menu-item-size/2} - #{$menu-width/2} - 5px );
}
2018-03-21 17:44:27 +00:00
// {4} sub label //
&[data-sub]:not([data-sub='']){
display: inline-block;
position: relative;
margin-bottom: #{$menu-item-space + 2em};
// 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'); }
}
}
}