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%);
}
}
}

49
src/scss/components/_dropdown-field.scss
View File

@ -21,29 +21,66 @@
}
.options {
color: $mid_grey;
color: $grey;
position: absolute;
top: 46px;
right: 0px;
right: 10px;
z-index: 97;
background: $white;
border-top: 1px solid $mid_grey;
display: none;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
border-radius: 3px;
&:before {
content: '';
display: block;
position: absolute;
top: -6px;
right: 10px;
background: $white;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid $light_grey;
}
.option {
@include animate();
position: relative;
padding: 6px 14px 6px 18px;
padding: 9px 12px 8px 24px;
cursor: pointer;
&: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));
}
.fa {
position: absolute;
top: 7px;
left: 5px;
top: 9px;
left: 8px;
font-size: 10px;
}
&:hover {
color: $black;
&:before {
opacity: 0.15;
}
}
}
}

31
src/scss/global/_forms.scss
View File

@ -122,11 +122,12 @@ input[type="submit"] {
@include animate_timeout(2s);
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background: $red;
background: $black;
opacity: 0.25;
}
}
@ -148,7 +149,7 @@ input[type="submit"] {
display: block;
content: '';
animation: slideloader 1s infinite;
background: $white;
background: $mid_grey;
opacity: 0.5;
top: 0;
left: 0;
@ -156,30 +157,6 @@ input[type="submit"] {
right: 0;
z-index: 1;
}
&.primary {
&:after {
background: $turquoise;
}
}
&.secondary {
&:after {
background: $black;
}
}
&.destructive {
&:after {
background: $red;
}
}
&.white {
&:after {
background: $white;
}
}
}
&.context-menu-trigger {