360 lines
6.8 KiB
SCSS
Executable File
360 lines
6.8 KiB
SCSS
Executable File
|
|
@include responsive( $bp_medium ){
|
|
body.context-menu-open {
|
|
.body {
|
|
@include blur(10px);
|
|
}
|
|
}
|
|
}
|
|
|
|
#context-menu {
|
|
position: fixed;
|
|
z-index: 99;
|
|
|
|
.liner {
|
|
width: 190px;
|
|
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
|
|
border-radius: 3px;
|
|
background: $grey;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
font-family: "Overpass";
|
|
|
|
.title {
|
|
display: block;
|
|
padding: 10px 14px;
|
|
font-weight: bold;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
background: $darkest_grey;
|
|
|
|
.background {
|
|
@include blur(5px);
|
|
background-size: cover;
|
|
background-position: 50% 20%;
|
|
opacity: 0.65;
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -10px;
|
|
bottom: -10px;
|
|
right: -10px;
|
|
z-index: 1;
|
|
|
|
&.generic {
|
|
opacity: 0.9;
|
|
background: rgba(50,181,242,1);
|
|
background: -moz-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
|
|
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(50,181,242,1)), color-stop(18%, rgba(50,181,242,1)), color-stop(100%, rgba(5,118,166,1)));
|
|
background: -webkit-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
|
|
background: -o-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
|
|
background: -ms-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
|
|
background: linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b5f2', endColorstr='#0576a6', GradientType=1 );
|
|
}
|
|
}
|
|
|
|
.text {
|
|
@include one_line_text();
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.type {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #FFFFFF;
|
|
opacity: 0.5;
|
|
font-weight: 200;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
.menu-item-wrapper {
|
|
display: block;
|
|
overflow-x: hidden;
|
|
|
|
.menu-item {
|
|
@include gradient_overlay(3px);
|
|
cursor: pointer;
|
|
display: block;
|
|
padding: 9px 12px 8px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
color: $white;
|
|
|
|
.notouch &:hover {
|
|
&:before {
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
|
|
.notouch &:active {
|
|
background: $black;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
display: none;
|
|
}
|
|
|
|
.submenu-icon {
|
|
float: right;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.fa {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.submenu {
|
|
@include animate();
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 100%;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
width: 0;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
background: lighten($grey, 10%);
|
|
z-index: 3;
|
|
border-radius: 3px;
|
|
|
|
&.expanded {
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.menu-item {
|
|
width: 100%;
|
|
|
|
&.close-submenu {
|
|
color: $mid_grey;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > span {
|
|
display: block;
|
|
|
|
button,
|
|
.button,
|
|
.dropdown-field {
|
|
text-decoration: none;
|
|
display: block;
|
|
border: 0;
|
|
margin: 0;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box;
|
|
font-size: inherit;
|
|
text-align: left;
|
|
text-transform: none;
|
|
font-weight: 300;
|
|
color: inherit;
|
|
|
|
&:not(:first-child):not(.dropdown-field){
|
|
border-top: 1px solid lighten($dark_grey, 8%);
|
|
}
|
|
|
|
.fa {
|
|
display: none;
|
|
}
|
|
|
|
.notouch &:hover {
|
|
background: lighten($dark_grey, 5%);
|
|
}
|
|
}
|
|
|
|
button,
|
|
.button {
|
|
padding: 16px 20px;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.dropdown-field {
|
|
padding: 0;
|
|
box-shadow: none;
|
|
|
|
.label {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.options {
|
|
display: block;
|
|
position: static;
|
|
background: $darkest_grey;
|
|
border-radius: 0;
|
|
border: 0;
|
|
color: $white !important;
|
|
|
|
.option {
|
|
padding: 12px 20px 12px 50px;
|
|
border-radius: 0;
|
|
|
|
.fa {
|
|
display: inline-block;
|
|
left: 25px;
|
|
top: 14px;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive( null, $bp_medium ){
|
|
.liner {
|
|
.title {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include responsive( $bp_medium ){
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
margin: 0 !important;
|
|
overflow-y: scroll;
|
|
|
|
.background {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background: $overlay_dark;
|
|
z-index: 1;
|
|
}
|
|
|
|
.liner {
|
|
width: 250px;
|
|
margin: 30px auto;
|
|
max-width: 90vw;
|
|
position: relative;
|
|
z-index: 2;
|
|
border-radius: 3px;
|
|
|
|
.title {
|
|
padding: 14px 18px;
|
|
box-sizing: border-box;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
& > span {
|
|
button,
|
|
.button {
|
|
color: $white;
|
|
font-weight: 800;
|
|
background: transparent;
|
|
}
|
|
|
|
.dropdown-field {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.menu-item-wrapper {
|
|
.menu-item {
|
|
padding: 14px 18px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.context-menu-trigger {
|
|
@include animate();
|
|
display: inline-block;
|
|
padding: 14px 12px;
|
|
cursor: pointer;
|
|
vertical-align: top;
|
|
margin-top: -1px;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
|
|
.dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 5px;
|
|
background: $white;
|
|
display: inline-block;
|
|
margin: 1px;
|
|
}
|
|
|
|
&:before {
|
|
@include animate();
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
z-index: 9;
|
|
background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
|
|
background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
|
|
background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
|
|
background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
|
|
}
|
|
|
|
&:hover{
|
|
cursor: pointer;
|
|
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
|
|
|
|
&:before {
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
&.track-list {
|
|
|
|
.context-menu-trigger {
|
|
display: none;
|
|
}
|
|
|
|
@include responsive( $bp_medium ){
|
|
|
|
.context-menu-trigger {
|
|
@include gradient_overlay(50%, 0.15);
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 55px;
|
|
right: 5px;
|
|
width: 48px;
|
|
height: 8px;
|
|
padding: 20px 0;
|
|
overflow: hidden;
|
|
z-index: 97;
|
|
background: $blue;
|
|
|
|
.dot {
|
|
background: $white;
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
background: darken($blue, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |