334 lines
6.4 KiB
SCSS
Executable File
334 lines
6.4 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: colour(grey);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
font-family: "Overpass";
|
|
|
|
.title {
|
|
display: none;
|
|
padding: 10px 14px;
|
|
font-weight: bold;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
background: colour(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: colour(white);
|
|
|
|
.notouch &:hover {
|
|
&:before {
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
|
|
.notouch &:active {
|
|
background: colour(black);
|
|
color: colour(white);
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
font-size: 12px;
|
|
|
|
&.submenu-icon {
|
|
display: inline-block;
|
|
float: right;
|
|
padding-top: 4px;
|
|
}
|
|
}
|
|
|
|
.submenu {
|
|
@include animate();
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
max-height: 90vh;
|
|
width: 0;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
background: lighten(colour(grey), 10%);
|
|
z-index: 3;
|
|
border-radius: 3px;
|
|
|
|
&.expanded {
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.label {
|
|
.icon {
|
|
margin-bottom: 0.4em;
|
|
padding-right: 6px;
|
|
}
|
|
}
|
|
|
|
.menu-item {
|
|
width: 100%;
|
|
|
|
&.close-submenu {
|
|
color: colour(mid_grey);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: lighten(colour(grey), 5%);
|
|
}
|
|
|
|
& > span {
|
|
display: block;
|
|
margin-bottom: -1px;
|
|
|
|
button,
|
|
.button,
|
|
.dropdown-field {
|
|
text-decoration: none;
|
|
display: block;
|
|
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;
|
|
border-bottom: 1px solid lighten(colour(grey), 5%) !important;
|
|
|
|
.icon,
|
|
.icon {
|
|
display: none;
|
|
}
|
|
|
|
.notouch &:hover {
|
|
background: lighten(colour(dark_grey), 5%);
|
|
}
|
|
}
|
|
|
|
button,
|
|
.button {
|
|
padding: 16px 20px;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.dropdown-field {
|
|
padding: 16px 20px;
|
|
|
|
.label {
|
|
padding: 0 0 3px 0;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.options {
|
|
display: block;
|
|
position: static;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
border: 0;
|
|
box-shadow: none;
|
|
|
|
&:before {
|
|
display: none !important;
|
|
}
|
|
|
|
& > .liner {
|
|
background: transparent;
|
|
color: colour(white) !important;
|
|
margin: -3px -5px;
|
|
|
|
&:before {
|
|
display: none !important;
|
|
}
|
|
|
|
.option {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
border-radius: 0;
|
|
opacity: 0.6;
|
|
color: colour(white) !important;
|
|
|
|
&:before {
|
|
display: none !important;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-block;
|
|
position: static;
|
|
padding-right: 2px;
|
|
padding-bottom: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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: colour(overlay_dark);
|
|
z-index: 1;
|
|
}
|
|
|
|
& > .liner {
|
|
width: 250px;
|
|
margin: 30px auto;
|
|
max-width: 90vw;
|
|
position: relative;
|
|
z-index: 2;
|
|
border-radius: 3px;
|
|
|
|
.title {
|
|
display: block;
|
|
padding: 14px 18px;
|
|
box-sizing: border-box;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
& > span {
|
|
button,
|
|
.button {
|
|
color: colour(white);
|
|
font-weight: 800;
|
|
background: transparent;
|
|
}
|
|
|
|
.dropdown-field {
|
|
color: colour(white);
|
|
}
|
|
}
|
|
|
|
.menu-item-wrapper {
|
|
.menu-item {
|
|
padding: 14px 18px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.context-menu-trigger {
|
|
display: inline-block;
|
|
padding: 14px 12px;
|
|
cursor: pointer;
|
|
vertical-align: top;
|
|
margin-top: -1px;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
|
|
.actions & {
|
|
font-size: 24px;
|
|
padding: 2px 10px 1px;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: colour(blue) !important;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
pointer-events: none;
|
|
}
|
|
|
|
h4 &,
|
|
h4 &:active {
|
|
margin: -8px 0 0 10px;
|
|
}
|
|
|
|
@include responsive($bp_medium){
|
|
padding: 12px;
|
|
}
|
|
} |