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

Context menus now at the view level

Browse Source
This commit is contained in:
James Barnsley
2017-03-06 09:03:20 +13:00
parent 644858ebf7
commit 69d535e941
16 changed files with 127 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
.context-menu {
#context-menu {
position: fixed;
left: 0;
top: 0;
@ -135,6 +135,65 @@
border-top: 1px solid lighten($dark_grey, 8%);
}
}
& > span {
display: block;
button,
.dropdown-field {
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;
border-top: 1px solid lighten($dark_grey, 8%);
.fa {
display: none;
}
.notouch &:hover {
background: lighten($dark_grey, 5%);
}
}
button {
padding: 16px 20px;
min-width: 100% !important;
max-width: 100% !important;
}
.dropdown-field {
padding: 0;
.label {
padding: 16px 20px;
}
.options {
display: block;
position: static;
background: lighten($dark_grey, 10%);
.option {
padding: 16px 20px 16px 50px;
border-top: 1px solid lighten($dark_grey, 8%);
.fa {
display: inline-block;
left: 25px;
top: 18px;
}
}
}
}
}
}
@include responsive( null, $bp_medium ){

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

@ -48,34 +48,5 @@
}
}
}
@include responsive( $bp_medium ){
&.expanded {
background: none !important;
color: inherit !important;
}
.label {
background: none !important;
color: inherit !important;
.fa {
display: none;
}
}
.options {
display: block;
position: relative;
top: 0;
background: lighten($light_grey,5%);
.option {
color: #000000;
border-color: $light_grey;
background: none !important;
}
}
}
}

68
src/scss/components/_header.scss
View File

@ -23,11 +23,17 @@ main {
}
}
.actions {
.options {
position: absolute;
top: 0;
right: 10px;
.context-menu-trigger {
display: none;
font-size: 18px;
padding: 16px 14px;
}
button {
background: transparent;
font-size: 14px;
@ -43,74 +49,20 @@ main {
&:active {
background: rgba(0,0,0,0.15);
}
&.trigger {
display: none;
font-size: 18px;
padding: 16px 14px;
}
}
}
@include responsive( $bp_medium ){
.actions {
.options {
right: 0;
button.trigger {
display: inline-block;
.context-menu-trigger {
display: block;
}
.items {
display: none;
}
&.expanded {
z-index: 98;
button.trigger {
z-index: 99;
color: #FFFFFF;
position: relative;
}
.items {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.9);
overflow-y: scroll;
.liner {
display: block;
width: 200px;
margin: 30px auto;
background: $light_grey;
}
button,
.dropdown-field {
display: block;
width: 100%;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,0.1);
.fa {
width: 1.5em;
text-align: center;
}
&.dropdown-field {
.label {
padding-left: 14px;
padding-right: 14px;
}
}
}
}
}
}
}
}