vue-material/src/components/mdDialog/mdDialog.scss
2016-11-21 02:45:35 -02:00

71 lines
1.5 KiB
SCSS

@import '../../core/stylesheets/variables.scss';
.md-dialog-container {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
pointer-events: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 108;
&.md-active {
pointer-events: auto;
.md-dialog {
opacity: 1 !important;
transform: scale(1) !important;
transition: $swift-ease-out;
transition-property: opacity, transform, border-radius;
border-radius: 2px;
> * {
opacity: 1;
}
}
}
}
.md-dialog-backdrop {
position: fixed;
z-index: 109;
}
.md-dialog {
min-width: 280px;
max-width: 80%;
max-height: 80%;
overflow: hidden;
position: relative;
z-index: 110;
outline: none;
border-radius: 24px;
opacity: 0;
box-shadow: $material-shadow-14dp;
transform: scale(.9, .85);
transform-origin: center center;
transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function,
border-radius $swift-ease-out-duration .1s $swift-ease-out-timing-function,
transform $swift-ease-out-duration .05s $swift-ease-out-timing-function;
will-change: opacity, transform, border-radius;
&.md-transition-off {
transition: none !important;
}
&.md-with-reference {
transform-origin: top center;
}
> * {
opacity: 0;
transition: $swift-ease-out;
transition-property: opacity;
transition-delay: .1s;
will-change: opacity;
}
}