Bilibili-Evolved/utils/toast/toast.scss
2018-10-15 19:46:34 +08:00

109 lines
1.9 KiB
SCSS

.toast-card-container
{
position: fixed;
left: 16px;
bottom: 16px;
display: flex;
flex-direction: column;
align-items: start;
z-index: 99999;
}
.toast-card
{
background: #444;
min-width: 240px;
border-radius: 8px;
box-shadow: 0 1px 20px rgba(0,0,0,.1);
height: 0;
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transform: translateY(16px);
transform-origin: bottom;
opacity: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.toast-card.visible
{
height: 96px;
transform: scale(1) translateY(0);
opacity: 0.95;
margin-top: 16px;
}
.toast-card-header
{
display: flex;
align-items: center;
}
.toast-card-title
{
font-size: 18px;
color: #fff6;
margin: 16px;
font-weight: bold;
flex: 1 1 auto;
}
svg.toast-card-dismiss
{
height: 24px;
width: 24px;
flex: 0 0 auto;
padding: 16px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all .2s ease-out;
transform-origin: center;
}
svg.toast-card-dismiss:hover
{
transform: scale(1.2);
}
svg.toast-card-dismiss:active
{
transform: scale(1.1);
}
svg.toast-card-dismiss path
{
fill: #fff6;
}
.toast-card-message {
color: #eeed;
font-size: 14px;
margin: 16px;
margin-top: 0;
}
.toast-card.toast-default
{
background: #444;
}
.toast-card.toast-error
{
background: #652020;
}
.toast-card.toast-info
{
background: #303d61;
}
.toast-card.toast-success
{
background: #274227;
}
.toast-card span,
.toast-card .link
{
display: inline-block;
padding: 4px 8px;
background-color: rgba(0,0,0,.1);
border-radius: 4px;
text-decoration: none;
color: #eeed;
transition: all .2s ease-out;
}
.toast-card .link:hover
{
background-color: rgba(0,0,0,.2);
}
.toast-card .link:active
{
background-color: rgba(0,0,0,.1);
}