BetterDiscordApp-v2/client/src/styles/partials/toasts.scss

69 lines
1.4 KiB
SCSS
Raw Normal View History

.bd-toasts {
display: flex;
2018-05-13 05:17:04 +02:00
position: fixed;
top: 0;
width: 700px;
left: 50%;
transform: translateX(-50%);
bottom: 100px;
flex-direction: column;
align-items: center;
justify-content: flex-end;
pointer-events: none;
z-index: 4000;
2018-05-13 05:17:04 +02:00
.bd-toast {
position: relative;
animation: bd-toast-up 300ms ease;
background: #36393F;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 0 1px rgba(32,34,37,.6), 0 2px 10px 0 rgba(0,0,0,.2);
font-weight: 500;
color: #fff;
user-select: text;
font-size: 14px;
margin-top: 10px;
2018-05-13 05:17:04 +02:00
&.bd-toast-error {
background: #f04747;
}
2018-05-13 05:17:04 +02:00
&.bd-toast-info {
background: #4a90e2;
}
2018-05-13 05:17:04 +02:00
&.bd-toast-warning {
background: #FFA600;
}
2018-05-13 05:17:04 +02:00
&.bd-toast-success {
background: #43b581;
}
2018-05-13 05:17:04 +02:00
&.bd-toast-has-icon {
padding-left: 30px;
}
}
2018-05-13 05:17:04 +02:00
.bd-toast-icon {
position: absolute;
left: 5px;
2018-05-13 05:17:04 +02:00
top: 50%;
transform: translateY(-50%);
bottom: 0;
height: 20px;
width: 20px;
border-radius: 50%;
overflow: hidden;
2018-05-13 05:17:04 +02:00
svg {
fill: white;
}
}
2018-05-13 05:17:04 +02:00
.bd-toast.bd-toast-closing {
animation: bd-toast-down 300ms ease;
}
}