secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Dropdowns and context menus

Browse Source
This commit is contained in:
James Barnsley
2017-06-19 09:04:27 +12:00
parent b52b8e18d2
commit c55454f00c
3 changed files with 83 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/scss/components/_context-menu.scss
View File

@ -4,9 +4,13 @@
z-index: 99;
.liner {
background: $dark_grey;
color: #FFFFFF;
width: 160px;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
border-radius: 3px;
background: $dark_grey;
font-size: 13px;
font-weight: 600;
font-family: "Overpass";
.title {
display: block;
@ -58,12 +62,6 @@
font-weight: 200;
text-transform: capitalize;
}
.notouch &:hover{
.background {
opacity: 0.7;
}
}
}
.menu-item-wrapper {
@ -73,11 +71,38 @@
.menu-item {
cursor: pointer;
display: block;
padding: 12px 14px;
padding: 9px 12px 8px;
box-sizing: border-box;
position: relative;
color: $white;
border-radius: 3px;
&: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));
}
.notouch &:hover {
background: lighten($dark_grey, 5%);
&:before {
opacity: 0.15;
}
}
&:active {
background: $black;
color: $white;
}
}
@ -104,7 +129,7 @@
width: 0;
height: 100%;
overflow-y: scroll;
background: lighten($dark_grey, 15%);
background: $faint_grey;
z-index: 3;
&.expanded {
@ -116,20 +141,8 @@
width: 100%;
&.close-submenu {
background: $dark_grey;
border-top: 0;
color: $mid_grey;
}
.notouch &:hover {
background: lighten($dark_grey, 15%);
}
}
}
&:not(:first-child){
.menu-item {
border-top: 1px solid lighten($dark_grey, 8%);
}
}
}