github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-19 18:15:17 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #11092 from overleaf/jel-recompile-btn

Browse source 
[web] Add `data-ol-loading` button style

GitOrigin-RevId: 75230fee0e4c1183f389d08b0253402e4fc375b0
This commit is contained in:
Jessica Lawshe 2023-01-09 10:20:42 -06:00 • committed by Copybot
parent ea2af56f7b
commit 4ba2fffdf1
2 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.tsx
View file

@ -37,6 +37,7 @@ function PdfCompileButtonInner({
onClick={() => startCompile()}
aria-label={compileButtonLabel}
disabled={compiling}
data-ol-loading={compiling}
>
<Icon type="refresh" spin={compiling} />
<span className="toolbar-hide-medium toolbar-hide-small btn-recompile-label">

34
services/web/frontend/stylesheets/core/mixins.less
View file

@ -550,9 +550,13 @@
}
.btn-bordered() {
color: @content-primary;
background-color: @white;
border-color: @border-color-base;
@btn-bordered-color: @content-primary;
@btn-bordered-background-color: @white;
@btn-bordered-border-color: @border-color-base;
color: @btn-bordered-color;
background-color: @btn-bordered-background-color;
border-color: @btn-bordered-border-color;
border-width: @border-size;
&:hover {
@ -589,12 +593,23 @@
color: @content-disabled;
}
}
&[data-ol-loading='true'] {
// use the default state colors when in a loading state
color: @btn-bordered-color!important;
background-color: @btn-bordered-background-color!important;
border-color: @btn-bordered-border-color!important;
}
}
.btn-borderless(@color: @white; @background: @brand-primary; @background-hover: @btn-primary-hover-bg-color) {
color: @color;
background-color: @background;
border-color: @background; // add a border that is same as background color so that the height matches the btn-bordered style
@btn-borderless-color: @color;
@btn-borderless-background-color: @background;
@btn-borderless-border-color: @background;
color: @btn-borderless-color;
background-color: @btn-borderless-background-color;
border-color: @btn-borderless-border-color; // add a border that is same as background color so that the height matches the btn-bordered style
border-width: @border-size;
&:hover {
@ -634,6 +649,13 @@
color: @content-disabled;
}
}
&[data-ol-loading='true'] {
// use the default state colors when in a loading state
color: @btn-borderless-color!important;
background-color: @btn-borderless-background-color!important;
border-color: @btn-borderless-border-color!important;
}
}
// Tables