forked from EVOgeek/Vmeda.Online
110 lines
2.4 KiB
SCSS
110 lines
2.4 KiB
SCSS
@keyframes scaleFrom0 {
|
|
from {
|
|
/* More performant than animating `width` */
|
|
transform: scaleX(0);
|
|
}
|
|
}
|
|
|
|
ion-alert {
|
|
--border-radius: var(--modal-radius);
|
|
|
|
&.md, &.ios {
|
|
--max-width: 80%;
|
|
|
|
@include media-breakpoint-up(md) {
|
|
--max-width: 384px;
|
|
}
|
|
}
|
|
|
|
.alert-wrapper {
|
|
overflow: auto;
|
|
border-radius: var(--border-radius) !important;
|
|
|
|
button.alert-button.alert-button-role-destructive {
|
|
color: var(--danger);
|
|
}
|
|
|
|
}
|
|
|
|
.alert-message {
|
|
user-select: text;
|
|
flex-shrink: 0;
|
|
|
|
ion-card {
|
|
margin: 0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
&.ios .alert-message {
|
|
text-align: start;
|
|
}
|
|
|
|
&.md .alert-button {
|
|
// Remove padding from alert buttons, they already have min accessibility height.
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.alert-button.timed-button{
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
background-color: var(--primary-tint);
|
|
animation: scaleFrom0 10s forwards linear;
|
|
transform-origin: left;
|
|
@include rtl() {
|
|
transform-origin: right;
|
|
}
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
&.core-alert-force-on-top {
|
|
z-index: 100000 !important;
|
|
}
|
|
|
|
&.core-nohead .alert-head,
|
|
.alert-head:empty {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
ion-alert.core-alert-network-error .alert-head,
|
|
div.core-iframe-network-error {
|
|
position: relative;
|
|
content: " ";
|
|
background: url("/assets/fonts/font-awesome/solid/wifi.svg") no-repeat 50% 50%;
|
|
margin: 25px auto;
|
|
|
|
h2 {
|
|
@include sr-only();
|
|
}
|
|
|
|
&::after {
|
|
content: " ";
|
|
position: absolute;
|
|
top: -20%;
|
|
right: -15%;
|
|
width: 50%;
|
|
height: 50%;
|
|
background-color: var(--danger);
|
|
-webkit-mask: url("/assets/fonts/font-awesome/solid/triangle-exclamation.svg") no-repeat 50% 50%;
|
|
mask: url("/assets/fonts/font-awesome/solid/triangle-exclamation.svg") no-repeat 50% 50%;
|
|
}
|
|
}
|
|
|
|
[dir=rtl] ion-alert.core-alert-network-error .alert-head::after,
|
|
[dir=rtl] div.core-iframe-network-error::after {
|
|
right: unset;
|
|
left: -15%;
|
|
}
|