2024-04-16 10:56:43 -04:00
|
|
|
.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)
|
|
|
|
);
|
2024-04-30 04:12:42 -04:00
|
|
|
|
2024-04-16 10:56:43 -04:00
|
|
|
background: var(--premium-gradient);
|
2024-06-17 06:34:09 -04:00
|
|
|
transition: none;
|
2024-07-22 04:10:54 -04:00
|
|
|
|
2024-06-17 06:34:09 -04:00
|
|
|
&:hover {
|
|
|
|
background: var(--blue-70);
|
|
|
|
}
|
2024-04-16 10:56:43 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-04-23 10:12:25 -04:00
|
|
|
// 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;
|
2024-09-25 09:46:02 -04:00
|
|
|
border-radius: 0;
|
2024-04-23 10:12:25 -04:00
|
|
|
|
|
|
|
&,
|
|
|
|
&:active,
|
|
|
|
&[disabled],
|
|
|
|
fieldset[disabled] & {
|
|
|
|
background-color: transparent;
|
2024-07-22 04:10:54 -04:00
|
|
|
|
2024-04-23 10:12:25 -04:00
|
|
|
@include box-shadow(none);
|
|
|
|
}
|
2024-07-22 04:10:54 -04:00
|
|
|
|
2024-04-23 10:12:25 -04:00
|
|
|
&:hover,
|
|
|
|
&:focus {
|
|
|
|
color: var(--link-ui-hover);
|
|
|
|
text-decoration: none;
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.btn-danger {
|
|
|
|
color: var(--content-danger);
|
2024-07-22 04:10:54 -04:00
|
|
|
|
|
|
|
// since it's a link, override the button states
|
2024-05-08 07:46:04 -04:00
|
|
|
&:active {
|
|
|
|
color: var(--content-danger);
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
2024-07-22 04:10:54 -04:00
|
|
|
|
2024-05-08 07:46:04 -04:00
|
|
|
&:focus-visible {
|
|
|
|
background-color: transparent;
|
|
|
|
outline: -webkit-focus-ring-color auto 1px;
|
|
|
|
}
|
2024-04-23 10:12:25 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-05-21 08:16:19 -04:00
|
|
|
.btn-inline-link {
|
|
|
|
@extend .btn-link;
|
2024-07-22 04:10:54 -04:00
|
|
|
|
2024-05-21 08:16:19 -04:00
|
|
|
font-size: inherit;
|
|
|
|
padding: 0;
|
|
|
|
vertical-align: inherit;
|
|
|
|
}
|
|
|
|
|
2024-03-06 06:31:25 -05:00
|
|
|
.button-loading {
|
|
|
|
align-items: center;
|
|
|
|
display: inline-grid;
|
|
|
|
grid-template-areas: 'container'; // Define a single grid area
|
2024-04-23 10:12:25 -04:00
|
|
|
pointer-events: none;
|
2024-03-06 06:31:25 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
2024-04-30 04:12:42 -04:00
|
|
|
|
2024-03-06 06:31:25 -05:00
|
|
|
.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
|
2024-04-30 04:12:20 -04:00
|
|
|
justify-content: center;
|
2024-03-06 06:31:25 -05:00
|
|
|
|
2024-03-27 06:53:54 -04:00
|
|
|
.icon-small {
|
2024-03-06 06:31:25 -05:00
|
|
|
font-size: 20px;
|
|
|
|
}
|
|
|
|
|
2024-03-27 06:53:54 -04:00
|
|
|
.icon-large {
|
2024-03-06 06:31:25 -05:00
|
|
|
font-size: 24px;
|
|
|
|
}
|
2024-07-10 09:34:19 -04:00
|
|
|
|
|
|
|
.spinner {
|
|
|
|
margin: var(--spacing-01);
|
|
|
|
}
|
2024-03-06 06:31:25 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
.icon-button-small {
|
|
|
|
padding: var(--spacing-01);
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-button-default {
|
|
|
|
padding: var(--spacing-04);
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-button-large {
|
|
|
|
padding: var(--spacing-05);
|
|
|
|
}
|
2024-05-17 06:24:28 -04:00
|
|
|
|
|
|
|
// 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
|
2024-06-13 08:44:38 -04:00
|
|
|
a[role='button']:visited,
|
|
|
|
a.btn:visited {
|
2024-05-17 06:24:28 -04:00
|
|
|
color: var(--bs-btn-color);
|
|
|
|
}
|
2024-05-30 11:09:57 -04:00
|
|
|
|
|
|
|
// Copy icon button
|
|
|
|
.copy-button {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
2024-08-22 08:14:22 -04:00
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
}
|