123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- /* purgecss start ignore */
- .c-toast--success {
- background-color: $color-green;
- }
- .c-toast--info {
- background-color: $color-primary;
- }
- .c-toast--warning {
- background-color: $color-yellow;
- }
- .c-toast--error {
- background-color: $color-red
- }
- .c-toast--default {
- background-color: $color-text;
- }
- .fadeOut {
- animation-name: fadeOut
- }
- .fadeInDown {
- animation-name: fadeInDown
- }
- .fadeInUp {
- animation-name: fadeInUp
- }
- .fade-enter-active {
- transition: opacity .3s ease-in
- }
- .fade-leave-active {
- transition: opacity .15s ease-out
- }
- .fade-enter, .fade-leave-to {
- opacity: 0
- }
- @-webkit-keyframes fadeOut {
- 0% {
- opacity: 1
- }
- to {
- opacity: 0
- }
- }
- @keyframes fadeOut {
- 0% {
- opacity: 1
- }
- to {
- opacity: 0
- }
- }
- @keyframes fadeInDown {
- 0% {
- opacity: .5;
- transform: translate3d(0, -100%, 0)
- }
- to {
- opacity: 1;
- transform: none
- }
- }
- @keyframes fadeInUp {
- 0% {
- opacity: .5;
- transform: translate3d(0, 100%, 0)
- }
- to {
- opacity: 1;
- transform: none
- }
- }
- .c-toast-container {
- position: fixed;
- display: flex;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- padding: 2em;
- overflow: hidden;
- z-index: 9999;
- pointer-events: none
- }
- .c-toast-container--top {
- flex-direction: column
- }
- .c-toast-container--bottom {
- flex-direction: column-reverse
- }
- @media screen and (max-width: 768px) {
- .c-toast-container {
- padding: 0;
- position: fixed !important
- }
- }
- .c-toast {
- display: flex;
- align-items: center;
- animation-duration: .15s;
- margin: .5em 0;
- border-radius: .5em;
- pointer-events: auto;
- color: #ffffff;
- min-height: 3em;
- cursor: pointer;
- padding: .5em 1rem;
- word-break: break-word;
- svg {
- width: 1.5rem;
- height: 1.5rem;
- margin-right: .5rem;
- stroke-width: 1.5;
- }
- }
- .c-toast--bottom,
- .c-toast--top {
- align-self: center
- }
- .c-toast--bottom-right,
- .c-toast--top-right {
- align-self: flex-end
- }
- .c-toast--bottom-left,
- .c-toast--top-left {
- align-self: flex-start
- }
- /* purgecss end ignore */
|