diff --git a/frappe/public/scss/toast.scss b/frappe/public/scss/toast.scss index 530168b055..f845327ffe 100644 --- a/frappe/public/scss/toast.scss +++ b/frappe/public/scss/toast.scss @@ -7,45 +7,45 @@ #alert-container .desk-alert { box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08); - width: 400px; - min-height: 50px; + width: 400px; + min-height: 50px; max-height: 200px; - background-color: $white; - - -webkit-animation-name: backInRight; - animation-name: backInRight; - animation-duration: 600ms; + background-color: $white; + + -webkit-animation-name: backInRight; + animation-name: backInRight; + animation-duration: 600ms; // word-break: break-all; overflow-y: auto; position: relative; // transform: translateX(calc(100% + 20px)); // transition: transform 300ms ease; - padding: 0px; - border-radius: var(--border-radius-md); + padding: 0px; + border-radius: var(--border-radius-md); .alert-message-container { - padding: 16px 40px 16px 16px; - - .icon { - margin-right: 10px; - } - - .alert-title-container { - display: flex; - align-items: center; - } + padding: 16px 40px 16px 16px; + + .icon { + margin-right: 10px; + } + + .alert-title-container { + display: flex; + align-items: center; + } - .alert-message { - font-weight: 500; - color: var(--grey-900); - line-height: 20px; - } + .alert-message { + font-weight: 500; + color: var(--grey-900); + line-height: 20px; + } - .alert-subtitle { - font-size: 13px; - padding-left: 34px; - } + .alert-subtitle { + font-size: 13px; + padding-left: 34px; + } } .close { @@ -68,53 +68,53 @@ border-right: 1px solid $border-color; padding: 7px; outline: none; - font-size: 12px; - font-weight: 500; - color: $text-muted; - - &:hover { - color: var(--grey-900) - } + font-size: 12px; + font-weight: 500; + color: $text-muted; + + &:hover { + color: var(--grey-900) + } &:last-child { border-right: none; } } - } - - &.out { - -webkit-animation-name: backOutRight; - animation-name: backOutRight; - animation-duration: 1.6s; - } + } + + &.out { + -webkit-animation-name: backOutRight; + animation-name: backOutRight; + animation-duration: 1.6s; + } } @keyframes backInRight { - 0% { - -webkit-transform: translateX(2000px) scale(0.8); - transform: translateX(2000px) scale(0.8); - opacity: 0.7; - } + 0% { + -webkit-transform: translateX(2000px) scale(0.8); + transform: translateX(2000px) scale(0.8); + opacity: 0.7; + } - 80% { - -webkit-transform: translateX(0px) scale(0.8); - transform: translateX(0px) scale(0.8); - opacity: 0.7; - } + 80% { + -webkit-transform: translateX(0px) scale(0.8); + transform: translateX(0px) scale(0.8); + opacity: 0.7; + } - 100% { - -webkit-transform: scale(1); - transform: scale(1); - opacity: 1; - } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 1; + } } @keyframes backOutRight { - 0% { opacity: 1; } + 0% { opacity: 1; } - 100% { - -webkit-transform: translateX(2000px); - transform: translateX(2000px); - opacity: 0.7; - } + 100% { + -webkit-transform: translateX(2000px); + transform: translateX(2000px); + opacity: 0.7; + } }