overleaf/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
ilkin-overleaf 0e71084600 Merge pull request #19840 from overleaf/ii-bs5-project-tools
[web] BS5 project tools

GitOrigin-RevId: 3181c62985b6db4051292b484f53178a0736fa75
2024-08-22 14:01:43 +00:00

239 lines
4.6 KiB
SCSS

.btn {
// Focus style for all buttons
--bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
&:focus-visible {
background-color: var(--bs-btn-bg);
}
// Sizes
// Default size
@include ol-button-size(
$font-size: var(--font-size-03),
$line-height: var(--line-height-03),
$padding-y: var(--spacing-03)
);
&.btn-lg {
@include ol-button-size(
$font-size: var(--font-size-03),
$line-height: var(--line-height-03),
$padding-y: var(--spacing-05)
);
}
&.btn-sm {
@include ol-button-size(
$font-size: var(--font-size-02),
$line-height: var(--line-height-02),
$padding-y: var(--spacing-01),
$padding-x: var(--spacing-05)
);
}
// Variants
&.btn-primary {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--bg-accent-01),
$hover-background: var(--bg-accent-02),
$hover-border: var(--bg-accent-02)
);
}
&.btn-secondary {
@include ol-button-variant(
$color: var(--content-primary),
$background: var(--bg-light-primary),
$border: var(--border-primary),
$hover-background: var(--bg-light-tertiary),
$hover-border: var(--border-primary),
$borderless: false
);
}
&.btn-ghost {
@include ol-button-variant(
$color: var(--content-primary),
$background: var(--bg-light-primary),
$hover-background: var(--bg-light-tertiary)
);
}
&.btn-danger {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--bg-danger-01),
$border: var(--bg-danger-01),
$hover-background: var(--bg-danger-02)
);
}
&.btn-danger-ghost {
@include ol-button-variant(
$color: var(--content-danger),
$background: var(--bg-light-primary),
$hover-background: var(--bg-danger-03)
);
}
&.btn-premium {
@include ol-button-variant(
$color: var(--content-primary-dark),
$background: var(--blue-70)
);
background: var(--premium-gradient);
transition: none;
&:hover {
background: var(--blue-70);
}
}
}
// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
color: var(--link-ui);
font-weight: normal;
cursor: pointer;
text-decoration: underline;
font-size: inherit;
vertical-align: inherit;
&,
&:active,
&[disabled],
fieldset[disabled] & {
background-color: transparent;
@include box-shadow(none);
}
&:hover,
&:focus {
color: var(--link-ui-hover);
text-decoration: none;
background-color: transparent;
}
&.btn-danger {
color: var(--content-danger);
// since it's a link, override the button states
&:active {
color: var(--content-danger);
background-color: transparent;
}
&:focus-visible {
background-color: transparent;
outline: -webkit-focus-ring-color auto 1px;
}
}
}
.btn-inline-link {
@extend .btn-link;
font-size: inherit;
padding: 0;
vertical-align: inherit;
}
.button-loading {
align-items: center;
display: inline-grid;
grid-template-areas: 'container'; // Define a single grid area
pointer-events: none;
}
.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
justify-content: center;
.icon-small {
font-size: 20px;
}
.icon-large {
font-size: 24px;
}
.spinner {
margin: var(--spacing-01);
}
}
.icon-button-small {
padding: var(--spacing-01);
}
.icon-button-default {
padding: var(--spacing-04);
}
.icon-button-large {
padding: var(--spacing-05);
}
// Set the visited colour for a link that is styled as a button. This is necessary because we have a generic rule that
// sets the colour of visited links
a[role='button']:visited,
a.btn:visited {
color: var(--bs-btn-color);
}
// Copy icon button
.copy-button {
text-decoration: none;
}
.btn-reset {
@include reset-button;
}
.btn-transparent {
background: none !important;
border-radius: 0 !important;
color: inherit !important;
font-weight: 400;
&:hover {
background: none !important;
color: inherit !important;
}
}