soapbox/app/styles/components/snackbar.scss

60 wiersze
1.3 KiB
SCSS

.notification-list {
@apply w-full flex flex-col items-center space-y-2 sm:items-end z-[1001] relative;
}
.notification-bar {
@apply max-w-sm w-full flex flex-row items-center bg-white dark:bg-gray-900 shadow-lg rounded-lg pointer-events-auto dark:ring-2 dark:ring-gray-800 overflow-hidden;
&::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 20px;
}
}
.notification-bar-success {
@apply text-success-500;
&::before {
@apply ml-4;
content: '\f058';
}
}
.notification-bar-error {
@apply text-danger-500 ml-4;
&::before {
@apply ml-4;
content: '\f057';
}
}
.notification-bar-info {
@apply text-primary-500 ml-4;
&::before {
@apply ml-4;
content: '\f05a';
}
}
.notification-bar-wrapper {
@apply p-4 flex items-center justify-between w-full space-x-2;
}
.notification-bar-title {
@apply mb-1 text-sm font-medium text-gray-900 dark:text-gray-100;
}
.notification-bar-message {
@apply text-sm text-gray-800 dark:text-gray-200;
}
.notification-bar-action a {
@apply inline-flex items-center px-2.5 py-1 border border-solid border-gray-300
shadow-sm text-xs font-medium rounded-full text-gray-700 bg-white
hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-primary-500;
}