85 lines
1.7 KiB
SCSS
85 lines
1.7 KiB
SCSS
.modal {
|
|
text-align: center;
|
|
|
|
// This is the elemet that allows for show/hide without requiring javascript
|
|
> input {
|
|
|
|
// The input is only for functionality, so hide it
|
|
display: none;
|
|
|
|
~ * {
|
|
|
|
// By default, they are not visible
|
|
opacity: 0;
|
|
|
|
// Also hide it from any iteraction
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.overlay {
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
position: fixed;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
background: $picnic-overlay;
|
|
transition: $picnic-transition;
|
|
z-index: 100000;
|
|
|
|
&:before,
|
|
&:after {
|
|
display: none;
|
|
}
|
|
|
|
// All of the elements that follow the overlay (the modals)
|
|
~ * {
|
|
|
|
// They are of type .card (see /plugins/card )
|
|
@extend %card;
|
|
|
|
border: 0;
|
|
|
|
// Position it in the middle of the screen on top of everything
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%) scale(.2, .2);
|
|
z-index: 1000000;
|
|
|
|
// Hiding effect
|
|
transition: $picnic-transition;
|
|
}
|
|
}
|
|
|
|
// When the checkbox is checked (modal should be showing)
|
|
> input:checked {
|
|
|
|
// All the visible elements
|
|
~ * {
|
|
display: block;
|
|
opacity: 1;
|
|
max-height: 10000px;
|
|
transition: $picnic-transition;
|
|
}
|
|
|
|
// This position is only for the modal, not for the overlay
|
|
// It says: grab everything that is after the overlay after the input
|
|
~ .overlay ~ * {
|
|
max-height: 90%;
|
|
overflow: auto;
|
|
-webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
|
|
transform: translateX(-50%) translateY(-50%) scale(1, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $picnic-breakpoint) {
|
|
.modal .overlay ~ * {
|
|
min-width: 90%;
|
|
}
|
|
}
|