mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-25 19:13:09 +00:00
1d4737ac69
* Add Story for `PdfCompileButton` * Set the CompileButton height so it's similar to BS3 * Add the CompileButton animations * Remove `sm` from CompileButton: makes font size bigger * Use MaterialIcon in compile-button dropdown-toggle * Use MaterialIcon in LayoutDropdown * Fix stripe alignment on Recompile button * Set padding around dropdown caret Per Alexandru's instructions * Prevent border from disappearing on hover * Set the padding of the compile button even on both sides Before: left 12px, right 16px; After: left 16px, right 16px; * Change px values to spacing var * Add some button classes for BS5 only * Don't render the hidden "Compiling…" in BS5, it changes the button width * Prevent `loading="[object Object]"` in the DOM Co-authored-by: Rebeka <rebeka.dekany@overleaf.com> --------- Co-authored-by: Rebeka <rebeka.dekany@overleaf.com> GitOrigin-RevId: 34f1eed03e63f3459243a37c878612a623f321f8
71 lines
1.2 KiB
SCSS
71 lines
1.2 KiB
SCSS
$stripe-width: 20px;
|
|
|
|
@keyframes pdf-toolbar-stripes {
|
|
from {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
to {
|
|
background-position: $stripe-width 0;
|
|
}
|
|
}
|
|
|
|
.btn-striped-animated {
|
|
@include striped;
|
|
|
|
background-size: $stripe-width $stripe-width;
|
|
background-origin: content-box;
|
|
|
|
@include animation(pdf-toolbar-stripes 2s linear infinite);
|
|
}
|
|
|
|
.detach-compile-button {
|
|
&[disabled],
|
|
&[disabled]:active {
|
|
background-color: var(--bs-btn-bg);
|
|
color: var(--bs-btn-color);
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
@keyframes compile-button-flash {
|
|
0%,
|
|
100% {
|
|
background: rgb(0 0 0 / 0%);
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
background: rgb(0 0 0 / 20%);
|
|
}
|
|
}
|
|
|
|
@keyframes compile-button-bounce {
|
|
0%,
|
|
50%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
25%,
|
|
75% {
|
|
transform: translateY(2px);
|
|
}
|
|
}
|
|
|
|
.detach-compile-button-animate {
|
|
animation-duration: 1.2s;
|
|
animation-fill-mode: both;
|
|
animation-timing-function: ease-in-out;
|
|
animation-name: compile-button-flash;
|
|
}
|
|
|
|
.detach-compile-button-animate .material-symbols {
|
|
animation-duration: 0.6s;
|
|
animation-delay: 0.4s;
|
|
animation-fill-mode: both;
|
|
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
animation-name: compile-button-bounce;
|
|
}
|