siyuan/app/src/assets/scss/component/_snackbar.scss

104 lines
2 KiB
SCSS

.b3-snackbar {
margin-bottom: 16px;
position: relative;
transition: transform 256ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
text-align: right;
&--hide {
transform: translate3d(calc(20vw + 48px), 0, 0);
}
&s {
position: fixed;
right: 12px;
top: 22px;
z-index: 503;
max-height: calc(100vh - 32px);
display: flex;
flex-direction: column;
transform: translate3d(calc(20vw + 48px), 0, 0);
transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1) 0ms;
&--show {
transform: translate3d(0, 0, 0) !important;
}
& > .b3-button {
align-self: flex-end;
margin-right: 18px;
}
& > .fn__flex-1 {
padding: 0 18px 0 18px;
&::-webkit-scrollbar {
display: none;
}
}
}
&--error .b3-snackbar__content {
background-color: var(--b3-theme-error);
color: var(--b3-theme-on-error);
}
&__content {
line-height: 20px;
border-radius: 4px;
padding: 8px 16px;
color: var(--b3-theme-on-primary);
font-size: inherit;
background-color: var(--b3-theme-primary);
box-sizing: border-box;
box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
word-break: break-word;
max-width: 20vw;
text-align: left;
display: inline-block;
&--close {
padding-right: 27px;
}
a {
color: var(--b3-theme-on-primary);
text-decoration: underline;
}
ul {
margin-left: 16px;
}
}
&__close {
position: absolute;
cursor: pointer;
height: 16px;
width: 16px;
color: var(--b3-theme-on-primary);
transition: var(--b3-transition);
opacity: .68;
right: 5px;
top: 10px;
&:hover {
opacity: 1;
}
}
}
@media screen and (max-width: 520px) {
.b3-snackbars {
top: 35px;
right: calc(10vw - 18px);
}
.b3-snackbar__content {
max-width: 80vw
}
.b3-snackbars {
transform: translate3d(100vw, 0, 0);
}
}