insomnia/app/css/components/modal.scss
Gregory Schier f90e4d7419 Started on hotkeys (#19)
* Started on hotkeys

* Tweaks

* Changed tab color

* Persist sidebarWidth to workspace

* Tweaks

* Switched to Mousetrap
2016-07-06 13:18:26 -07:00

74 lines
1.4 KiB
SCSS

@import '../constants/dimensions';
@import '../constants/colors';
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: $padding-xl;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
&.modal--open {
display: grid;
}
.modal__backdrop {
background: rgba(20, 20, 20, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.modal__content {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
margin: auto;
color: $font-super-light-bg;
border-radius: $radius-md;
box-sizing: border-box;
box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
width: $modal-width;
max-width: 100%;
max-height: 100%;
}
.modal__header {
border-top-left-radius: $radius-md;
border-top-right-radius: $radius-md;
border-bottom: 1px solid $hl-md;
height: $line-height-md;
font-size: $font-size-lg;
line-height: $line-height-md;
padding: 0 $padding-md;
position: relative;
background-color: $bg-light;
.modal__close-btn {
position: absolute;
height: 100%;
right: 0;
}
}
.modal__body {
overflow: auto;
background-color: $bg-super-light;
}
.modal__footer {
border-bottom-left-radius: $radius-md;
border-bottom-right-radius: $radius-md;
border-top: 1px solid $hl-md;
background-color: $bg-super-light;
}
}