.gds-alert { position: fixed; display: block; background-color: white; z-index: 900; border-radius: $border-radius; overflow: hidden; outline: 0; -webkit-overflow-scrolling: touch; height: auto; padding: 0; top: 25%; left: 50%; transform: translateX(-50%); box-shadow: 0px 0px 15px rgba(black, 0.15); @include transition-ease-in(all, 100ms); } // Add to when alert is open .-has-alert { height: 100%; overflow: hidden; } .gds-alert__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: $trans-black-medium; z-index: $z-index-8; opacity: 0; pointer-events: none; @include transition-ease-in(all, 100ms); } .gds-alert--shown { opacity: 1; pointer-events: auto; @include transition-ease-out(all, 100ms); .gds-alert { // transform: scale(1); causing alert position issue @include transition-ease-out(all, 100ms); } } .gds-alert__header, .gds-alert__body, .gds-alert__footer { display: block; text-align: center; } .gds-alert__header { text-align: center; color: white; padding: $unit; border-top-right-radius: $border-radius; border-top-left-radius: $border-radius; } .gds-alert__header--danger { background-color: $dangerColor; } .gds-alert__header--warning { background-color: $warningColor; } .gds-alert__header--success { background-color: $successColor; } .gds-alert__header--info { background-color: $infoColor; } .gds-alert__header--primary { background-color: $primaryColor; } .gds-alert__header--secondary { background-color: $secondaryColor; } .gds-alert__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: ($unit * 1.3); line-height: 1.4; margin-top: $unit; } .gds-alert__icon { font-size: ($unit * 2); line-height: 0.7; display: block; } .gds-alert__body { position: relative; padding: $unit; } .gds-alert__footer { padding: 0 $unit $unit $unit; }