// === Notify === .notify { right: 15px; bottom: 15px; max-width: 360px; color: #fff; overflow: hidden; border-radius: 6px; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25); will-change: transform, contents; // transform: translate3d(0, 200%, 0); z-index: 90000; position: fixed; display: none; &-trigger { text-decoration: none; border: 2px solid; padding: 0.5rem; transition: border 0.2s ease-out; &--success { color: #1fd489; &:hover { background: #1fd489; color: #fff; border-color: #18a86c; } } &--error { color: #d41f56; &:hover { background: #d41f56; color: #fff; border-color: #a81844; } } } &__inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 12px 60px 15px 15px; position: relative; } &__title { margin: 0 0 10px 0; font-size: 22px; } &__text { width: 100%; line-height: 1.2; text-shadow: 1px 1px rgba(0, 0, 0, 0.3); vertical-align: top; display: inline-block; } &__closeBtn { top: 10px; right: 10px; width: 28px; height: 28px; border: 0; position: absolute; z-index: 1; &::after, &::before { content: ''; top: 50%; left: 0; width: 100%; height: 2px; background: #fff; position: absolute; } &::before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } &::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } &:active { transform: scale(0.9) translate3d(0, 0, 0); } } &--active { display: block; animation-fill-mode: both; animation-duration: 0.35s; animation-name: slideUp; } &--dismiss { animation-fill-mode: both; animation-duration: 0.25s; animation-name: slideDown; } &--success { background-color: rgba(27, 141, 88, 0.9); } &--info { background-color: rgba(63, 70, 79, 0.9); } &--error { background-color: rgba(141, 27, 43, 0.9); } } // === [ Adaptive ] === // === Desktop === @media (max-width: 1280px) { // } @media (min-width: 1024px) { // } // === Tablet && Desktop === @media (min-width: 768px) { // } // === Tablet === @media (max-width: 1024px) { // } // === Mobile === @media (max-width: 768px) { .notify { left: 15px; max-width: 100%; } } @media (max-width: 425px) { // }