- as='Overlay'
-
{
@include display(flex); @include justify-content(center); @include align-items(center); min-height: 100vh; width: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 5000;
}
main.overlayed {
position: fixed;
}
- as='Popup'
-
{
@include display(flex); @include flex-direction(column); border-radius: 2px; max-width: 90vw; width: 600px; margin: 80px 0 80px 0; background: lighten($gray-blue, 30%); box-shadow: 0 0 3px #1a3642; color: #15191B; z-index: 101; overflow: hidden;
}
- as='Popup'
-
header {
@include flex(0 0 auto); @include display(flex); @include align-items(center); padding: 0.5em 1em; color: #224056; border-bottom: 1px solid #B7C4CD; box-shadow: 0 1px 0 0 #E7EFF5; letter-spacing: 2px; border-radius: 2px 2px 0 0; background: rgb(203, 212, 219);
}
[as='Popup'].errors {
background: rgb(200, 158, 158); header { background: rgb(229, 185, 185); border-color: #542727; color: rgb(116, 40, 40); box-shadow: 0 1px 0 0 #DAB6B6; } ol { margin: 1em; }
}
- as='Popup'
-
div.errors {
padding: 12px 5%; background: $red; color: white;
}