.Modal { position: fixed; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; transition: opacity .5s; background: rgba(black, .65); opacity: 0; &.visible { opacity: 1 } &.hidden { display: none } } .Dialog { margin: dist(-1); padding: dist(0); overflow: hidden; max-width: 100%; max-height: 100%; flex: 0 1 30rem; //min-height: 15rem; background: #1c1c1e; border-left: 6px solid $c-form-highlight; border-right: 6px solid $c-form-highlight; box-shadow: 0 0 2px 0 #434349, 0 0 6px 0 black; border-radius: 6px; h1,h2 { margin-top:0; } p:last-child { margin-bottom: 0; } } // "toast" .ErrMsg { position: fixed; bottom: dist(2); padding: dist(-1) dist(0); left: 50%; @include translate(-50%,0); -webkit-font-smoothing: subpixel-antialiased; -webkit-transform: translateZ(0) scale(1.0, 1.0); background: #d03e42; color: white; text-shadow: 0 0 2px black; box-shadow: 0 0 6px 0 rgba(black, .6); border-radius: 5px; max-width: 80%; @include media($phone) { width: calc(100% - #{dist(0)}); } transition: opacity .5s; opacity: 0; &.visible { opacity: 1 } &.hidden { display: none } }