325 lines
7.6 KiB
SCSS
325 lines
7.6 KiB
SCSS
|
@keyframes bounceIn {
|
||
|
|
from,
|
||
|
|
20%,
|
||
|
|
40%,
|
||
|
|
60%,
|
||
|
|
80%,
|
||
|
|
to {
|
||
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
transform: scale3d(0.9, 0.9, 0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale3d(1.03, 1.03, 1.03);
|
||
|
|
}
|
||
|
|
|
||
|
|
80% {
|
||
|
|
transform: scale3d(0.97, 0.97, 0.97);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale3d(1, 1, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounceOut {
|
||
|
|
20% {
|
||
|
|
transform: scale3d(0.9, 0.9, 0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
50%,
|
||
|
|
55% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale3d(1.1, 1.1, 1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}Toast {
|
||
|
|
display: flex;
|
||
|
|
flex-flow: row nowrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: flex-start;
|
||
|
|
|
||
|
|
&-wrap {
|
||
|
|
pointer-events: none;
|
||
|
|
position: fixed;
|
||
|
|
z-index: $zindex-toast;
|
||
|
|
}
|
||
|
|
|
||
|
|
max-width: var(--Toast-width);
|
||
|
|
pointer-events: auto;
|
||
|
|
margin-bottom: var(--gap-xs);
|
||
|
|
|
||
|
|
padding: var(--Toast-paddingTop) var(--Toast-paddingRight)
|
||
|
|
var(--Toast-paddingBottom) var(--Toast-paddingLeft);
|
||
|
|
box-shadow: var(--Toast-box-shadow);
|
||
|
|
border-radius: var(--Toast-top-left-border-radius)
|
||
|
|
var(--Toast-top-right-border-radius) var(--Toast-bottom-right-border-radius)
|
||
|
|
var(--Toast-bottom-left-border-radius);
|
||
|
|
border: var(--Toast-border-width) solid;
|
||
|
|
color: var(--Toast-color);
|
||
|
|
position: relative;
|
||
|
|
opacity: var(--Toast-opacity);
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateZ(0);
|
||
|
|
width: px2rem(400px);
|
||
|
|
|
||
|
|
&.in,
|
||
|
|
&.out {
|
||
|
|
animation-fill-mode: both;
|
||
|
|
animation-duration: var(--animation-duration);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.in {
|
||
|
|
animation-name: bounceIn;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.out {
|
||
|
|
animation-name: bounceOut;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-close {
|
||
|
|
display: inline-flex;
|
||
|
|
font-size: var(--fontSizeLg);
|
||
|
|
line-height: var(--gap-xl);
|
||
|
|
height: var(--gap-xl);
|
||
|
|
color: var(--Toast-close-color);
|
||
|
|
margin-left: var(--gap-sm);
|
||
|
|
align-items: center;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
font-size: var(--fontSizeLg);
|
||
|
|
color: var(--Toast-close--onHover-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
& > svg {
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-content {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-flow: column nowrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: flex-start;
|
||
|
|
|
||
|
|
.#{$ns}Toast-title {
|
||
|
|
color: var(--text-color);
|
||
|
|
font-size: var(--fontSizeBase);
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: var(--gap-xl);
|
||
|
|
margin-bottom: var(--gap-xs);
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}Toast-body {
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: middle;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
flex-grow: 1;
|
||
|
|
line-height: var(--gap-xl);
|
||
|
|
.#{$ns}Html {
|
||
|
|
word-break: break-word;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-icon {
|
||
|
|
display: inline-flex;
|
||
|
|
text-rendering: auto;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin-right: var(--gap-sm);
|
||
|
|
height: var(--gap-xl);
|
||
|
|
line-height: var(--gap-xl);
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
> svg {
|
||
|
|
top: 0;
|
||
|
|
width: var(--Toast-icon-width);
|
||
|
|
height: var(--Toast-icon-height);
|
||
|
|
color: inherit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// colors
|
||
|
|
&--error {
|
||
|
|
color: var(--Toast--danger-color);
|
||
|
|
background: var(--Toast--danger-bgColor);
|
||
|
|
font-size: var(--Toast--danger-fontSize);
|
||
|
|
font-weight: var(--Toast--danger-fontWeight);
|
||
|
|
background: var(--Toast--danger-bgColor);
|
||
|
|
border-width: var(--Toast--danger-top-border-width)
|
||
|
|
var(--Toast--danger-right-border-width)
|
||
|
|
var(--Toast--danger-bottom-border-width)
|
||
|
|
var(--Toast--danger-left-border-width);
|
||
|
|
border-style: var(--Toast--danger-top-border-style)
|
||
|
|
var(--Toast--danger-right-border-style)
|
||
|
|
var(--Toast--danger-bottom-border-style)
|
||
|
|
var(--Toast--danger-left-border-style);
|
||
|
|
border-color: var(--Toast--danger-top-border-color)
|
||
|
|
var(--Toast--danger-right-border-color)
|
||
|
|
var(--Toast--danger-bottom-border-color)
|
||
|
|
var(--Toast--danger-left-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&--warning {
|
||
|
|
color: var(--Toast--warning-color);
|
||
|
|
background: var(--Toast--warning-bgColor);
|
||
|
|
font-size: var(--Toast--warning-fontSize);
|
||
|
|
font-weight: var(--Toast--warning-fontWeight);
|
||
|
|
background: var(--Toast--warning-bgColor);
|
||
|
|
border-width: var(--Toast--warning-top-border-width)
|
||
|
|
var(--Toast--warning-right-border-width)
|
||
|
|
var(--Toast--warning-bottom-border-width)
|
||
|
|
var(--Toast--warning-left-border-width);
|
||
|
|
border-style: var(--Toast--warning-top-border-style)
|
||
|
|
var(--Toast--warning-right-border-style)
|
||
|
|
var(--Toast--warning-bottom-border-style)
|
||
|
|
var(--Toast--warning-left-border-style);
|
||
|
|
border-color: var(--Toast--warning-top-border-color)
|
||
|
|
var(--Toast--warning-right-border-color)
|
||
|
|
var(--Toast--warning-bottom-border-color)
|
||
|
|
var(--Toast--warning-left-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&--info {
|
||
|
|
color: var(--Toast--info-color);
|
||
|
|
font-size: var(--Toast--info-fontSize);
|
||
|
|
font-weight: var(--Toast--info-fontWeight);
|
||
|
|
background: var(--Toast--info-bgColor);
|
||
|
|
border-width: var(--Toast--info-top-border-width)
|
||
|
|
var(--Toast--info-right-border-width)
|
||
|
|
var(--Toast--info-bottom-border-width)
|
||
|
|
var(--Toast--info-left-border-width);
|
||
|
|
border-style: var(--Toast--info-top-border-style)
|
||
|
|
var(--Toast--info-right-border-style)
|
||
|
|
var(--Toast--info-bottom-border-style)
|
||
|
|
var(--Toast--info-left-border-style);
|
||
|
|
border-color: var(--Toast--info-top-border-color)
|
||
|
|
var(--Toast--info-right-border-color)
|
||
|
|
var(--Toast--info-bottom-border-color)
|
||
|
|
var(--Toast--info-left-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&--success {
|
||
|
|
color: var(--Toast--success-color);
|
||
|
|
font-size: var(--Toast--success-fontSize);
|
||
|
|
font-weight: var(--Toast--success-fontWeight);
|
||
|
|
background: var(--Toast--success-bgColor);
|
||
|
|
border-width: var(--Toast--success-top-border-width)
|
||
|
|
var(--Toast--success-right-border-width)
|
||
|
|
var(--Toast--success-bottom-border-width)
|
||
|
|
var(--Toast--success-left-border-width);
|
||
|
|
border-style: var(--Toast--success-top-border-style)
|
||
|
|
var(--Toast--success-right-border-style)
|
||
|
|
var(--Toast--success-bottom-border-style)
|
||
|
|
var(--Toast--success-left-border-style);
|
||
|
|
border-color: var(--Toast--success-top-border-color)
|
||
|
|
var(--Toast--success-right-border-color)
|
||
|
|
var(--Toast--success-bottom-border-color)
|
||
|
|
var(--Toast--success-left-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
// positions
|
||
|
|
&-wrap--topRight {
|
||
|
|
top: var(--gap-base);
|
||
|
|
right: var(--gap-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-wrap--topCenter {
|
||
|
|
top: var(--gap-base);
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-wrap--topLeft {
|
||
|
|
top: var(--gap-base);
|
||
|
|
left: var(--gap-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-wrap--bottomLeft {
|
||
|
|
left: var(--gap-base);
|
||
|
|
bottom: var(--gap-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-wrap--bottomCenter {
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
bottom: var(--gap-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-wrap--bottomRight {
|
||
|
|
bottom: var(--gap-base);
|
||
|
|
right: var(--gap-base);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-wrap--center {
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.#{$ns}Toast-mobile {
|
||
|
|
.#{$ns}Toast {
|
||
|
|
background-color: rgba($color: #000000, $alpha: 0.9);
|
||
|
|
border-radius: px2rem(4px);
|
||
|
|
color: #fff;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: var(--gap-base) var(--gap-md);
|
||
|
|
text-align: center;
|
||
|
|
width: auto;
|
||
|
|
|
||
|
|
&-title {
|
||
|
|
color: #fff;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-body {
|
||
|
|
line-height: px2rem(18px);
|
||
|
|
font-size: var(--fontSizeMd);
|
||
|
|
}
|
||
|
|
|
||
|
|
&-icon {
|
||
|
|
margin-right: 0 !important;
|
||
|
|
margin: var(--gap-base) 0;
|
||
|
|
width: px2rem(40px);
|
||
|
|
height: px2rem(40px);
|
||
|
|
|
||
|
|
> svg {
|
||
|
|
width: px2rem(40px);
|
||
|
|
height: px2rem(40px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& &--has-icon {
|
||
|
|
min-width: px2rem(120px);
|
||
|
|
padding-bottom: var(--gap-lg);
|
||
|
|
}
|
||
|
|
}
|