overleaf/services/web/frontend/stylesheets/bootstrap-5/scss/components/button.scss
Rebeka Dekany e18f0817c6 Merge pull request #17216 from overleaf/rd-bootstrap5-buttons
Bootstrap-5 Button component

GitOrigin-RevId: 1fb13b7ab2b71403b0236f1f85aec7b9545b34f1
2024-03-06 17:27:49 +00:00

57 lines
1 KiB
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
.leading-trailing-icon-small {
font-size: 20px;
}
.leading-trailing-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);
}