overleaf/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
Rebeka Dekany 6d331ad7ed Merge pull request #17560 from overleaf/rd-boostrap-files
[web] Update Sass folder structure

GitOrigin-RevId: 03ac5835e46a3a464f31fba386e2f81f4bf25c99
2024-03-28 09:04:10 +00:00

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);
}