insomnia/app/css/components/modal.scss

74 lines
1.4 KiB
SCSS
Raw Normal View History

2016-04-07 03:09:14 +00:00
@import '../constants/dimensions';
@import '../constants/colors';
.modal {
display: none;
2016-04-07 03:09:14 +00:00
position: absolute;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: $padding-xl;
2016-06-20 06:05:40 +00:00
grid-template-columns: 1fr;
grid-template-rows: 1fr;
&.modal--open {
display: grid;
}
2016-06-20 06:05:40 +00:00
.modal__backdrop {
background: $bg-backdrop;
2016-06-20 06:05:40 +00:00
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%;
}
2016-04-07 03:09:14 +00:00
.modal__header {
2016-04-07 17:06:04 +00:00
border-top-left-radius: $radius-md;
border-top-right-radius: $radius-md;
2016-04-07 03:09:14 +00:00
border-bottom: 1px solid $hl-md;
2016-05-01 19:56:30 +00:00
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;
}
2016-04-07 03:09:14 +00:00
}
2016-05-01 19:56:30 +00:00
.modal__body {
overflow: auto;
2016-06-20 06:05:40 +00:00
background-color: $bg-super-light;
2016-05-01 19:56:30 +00:00
}
2016-04-07 03:09:14 +00:00
.modal__footer {
2016-04-07 17:06:04 +00:00
border-bottom-left-radius: $radius-md;
border-bottom-right-radius: $radius-md;
2016-04-07 03:09:14 +00:00
border-top: 1px solid $hl-md;
2016-06-20 06:05:40 +00:00
background-color: $bg-super-light;
2016-04-07 03:09:14 +00:00
}
}