117 lines
2.2 KiB
Plaintext
117 lines
2.2 KiB
Plaintext
.#{$rt-namespace}__toast {
|
|
--y: 0;
|
|
position: relative;
|
|
touch-action: none;
|
|
min-height: var(--toastify-toast-min-height);
|
|
box-sizing: border-box;
|
|
margin-bottom: 1rem;
|
|
padding: 8px;
|
|
border-radius: var(--toastify-toast-bd-radius);
|
|
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
max-height: var(--toastify-toast-max-height);
|
|
font-family: var(--toastify-font-family);
|
|
cursor: default;
|
|
direction: ltr;
|
|
/* webkit only issue #791 */
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
|
|
&--stacked {
|
|
position: absolute;
|
|
width: 100%;
|
|
transform: translate3d(0, var(--y), 0) scale(var(--s));
|
|
transition: transform 0.3s;
|
|
|
|
&[data-collapsed] .#{$rt-namespace}__toast-body, &[data-collapsed] .#{$rt-namespace}__close-button {
|
|
transition: opacity 0.1s;
|
|
}
|
|
|
|
&[data-collapsed="false"]{
|
|
overflow: visible;
|
|
}
|
|
|
|
&[data-collapsed="true"]:not(:last-child) > * {
|
|
opacity: 0;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
height: calc(var(--g) * 1px);
|
|
bottom: 100%;
|
|
}
|
|
|
|
&[data-pos="top"] {
|
|
top: 0;
|
|
}
|
|
|
|
&[data-pos="bot"] {
|
|
bottom: 0;
|
|
}
|
|
|
|
&[data-pos="bot"]#{&}:before {
|
|
transform-origin: top;
|
|
}
|
|
|
|
&[data-pos="top"]#{&}:before {
|
|
transform-origin: bottom;
|
|
}
|
|
|
|
&:before{
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
transform: scaleY(3);
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
&--rtl {
|
|
direction: rtl;
|
|
}
|
|
&--close-on-click {
|
|
cursor: pointer;
|
|
}
|
|
&-body {
|
|
margin: auto 0;
|
|
flex: 1 1 auto;
|
|
padding: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
& > div:last-child {
|
|
word-break: break-word;
|
|
flex: 1;
|
|
}
|
|
}
|
|
&-icon {
|
|
margin-inline-end: 10px;
|
|
width: 20px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.#{$rt-namespace}--animate {
|
|
animation-fill-mode: both;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
.#{$rt-namespace}--animate-icon {
|
|
animation-fill-mode: both;
|
|
animation-duration: 0.3s;
|
|
}
|
|
|
|
@media #{$rt-mobile} {
|
|
.#{$rt-namespace}__toast {
|
|
margin-bottom: 0;
|
|
border-radius: 0;
|
|
}
|
|
}
|