mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
b1c40d05f7
[web] Fix the Button component accessibility label GitOrigin-RevId: 1d157fca370c5e0425890468d7cad169d0261c23
57 lines
1,022 B
SCSS
57 lines
1,022 B
SCSS
.button-loading {
|
|
align-items: center;
|
|
display: inline-grid;
|
|
grid-template-areas: 'container'; // Define a single grid area
|
|
}
|
|
|
|
.button-loading > * {
|
|
grid-area: container; // Position all the direct children within the single grid area
|
|
}
|
|
|
|
.button-loading .spinner-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.loading-spinner-small {
|
|
border-width: 0.2em;
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
.loading-spinner-large {
|
|
border-width: 0.2em;
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
|
|
// Hide the text when the spinner is visible
|
|
.button-loading > [aria-hidden='true'] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.button-content {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-04); // Add gap between text and icons
|
|
|
|
.icon-small {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.icon-large {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.icon-button-small {
|
|
padding: var(--spacing-01);
|
|
}
|
|
|
|
.icon-button-default {
|
|
padding: var(--spacing-04);
|
|
}
|
|
|
|
.icon-button-large {
|
|
padding: var(--spacing-05);
|
|
}
|