what2watch/scss/plugins/modal/_plugin.scss

85 lines
1.7 KiB
SCSS
Raw Normal View History

2023-09-22 00:43:18 +00:00
.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%;
}
}