lion/packages/overlays/src/globalOverlaysStyle.js
Thomas Allmer ec8da8f12c feat: release inital public lion version
Co-authored-by: Mikhail Bashkirov <mikhail.bashkirov@ing.com>
Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
Co-authored-by: Joren Broekema <joren.broekema@ing.com>
Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com>
Co-authored-by: Erik Kroes <erik.kroes@ing.com>
Co-authored-by: Lars den Bakker <lars.den.bakker@ing.com>
2019-04-26 10:37:57 +02:00

69 lines
1.3 KiB
JavaScript

import { css } from '@lion/core';
export const globalOverlaysStyle = css`
.global-overlays {
position: relative;
z-index: 200;
}
.global-overlays.global-overlays--blocking-opened .global-overlays__overlay {
display: none;
}
.global-overlays .global-overlays__backdrop::before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #333333;
opacity: 0.3;
}
.global-overlays .global-overlays__backdrop--fade-in::before {
animation: global-overlays-backdrop-fade-in 300ms;
}
.global-overlays.global-overlays--backdrop-fade-out::before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #333333;
opacity: 0;
pointer-events: none;
animation: global-overlays-backdrop-fade-out 300ms;
}
@keyframes global-overlays-backdrop-fade-in {
from {
opacity: 0;
}
}
@keyframes global-overlays-backdrop-fade-out {
from {
opacity: 0.3;
}
}
body > *[inert] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
body.global-overlays-scroll-lock {
overflow: hidden;
}
body.global-overlays-scroll-lock-ios-fix {
position: fixed;
width: 100%;
}
`;