mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-28 21:07:16 +00:00
79 lines
1.6 KiB
SCSS
79 lines
1.6 KiB
SCSS
@import "branding";
|
|
@import "mixins";
|
|
|
|
dialog
|
|
, .reveal-modal {
|
|
border: none;
|
|
outline: none;
|
|
padding: 30px 20px 0 20px;
|
|
border-bottom: 30px solid white;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
min-height: 260px;
|
|
|
|
// Not working yet - want a nice gradient shadow when there is overflow - needs JS too
|
|
// &:after
|
|
// @include elipse-shadow(0 0 40px rgba(0, 0, 0, 0.8))
|
|
|
|
// Reveal.js break point:
|
|
// @media only screen and (max-width: 40.063em)
|
|
|
|
// Small - when modal IS full screen
|
|
@media only screen and (max-width: 640px) {
|
|
left: 0;
|
|
max-height: 100%;
|
|
position: absolute !important;
|
|
top: 0;
|
|
}
|
|
|
|
// Medium and up - when modal IS NOT full screen
|
|
@media only screen and (min-width: 641px) {
|
|
max-height: 90%;
|
|
top: 5%;
|
|
}
|
|
}
|
|
|
|
.reveal-modal-bg {
|
|
background-color: rgba(0, 0, 0, 0.85);
|
|
position: fixed;
|
|
}
|
|
|
|
@mixin close-button($top) {
|
|
background-color: rgba(205, 205, 205, 0.65);
|
|
color: #666;
|
|
font-size: 2rem;
|
|
padding: 0.45rem;
|
|
text-shadow: none;
|
|
z-index: 9999999;
|
|
top: $top;
|
|
|
|
@include border-radius(999999rem);
|
|
|
|
&:hover, &:active, &:focus {
|
|
background-color: rgba(205, 205, 205, 1);
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
dialog .close-reveal-modal
|
|
, .reveal-modal .close-reveal-modal {
|
|
@include close-button(0.25rem);
|
|
right: 0.25rem;
|
|
}
|
|
|
|
dialog .mobile-close-reveal-modal
|
|
, .reveal-modal .mobile-close-reveal-modal {
|
|
@include close-button(auto);
|
|
left: 90%;
|
|
position: relative;
|
|
|
|
@media only screen and (min-width: 40.063em) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Prevent body from scrolling when a modal is open
|
|
body.modal-open {
|
|
overflow: hidden;
|
|
}
|