overleaf/services/web/frontend/stylesheets/bootstrap-5/scss/bootstrap-rule-overrides/buttons.scss
M Fahru ef6644f519 Merge pull request #17297 from overleaf/rd-sass-prettier-2
[web] Enable Prettier for Sass

GitOrigin-RevId: 8658a83010f04898e447230850f6f5bda788c1cc
2024-02-27 09:03:29 +00:00

129 lines
3.1 KiB
SCSS

@mixin ol-button-size(
$font-size,
$line-height,
$padding-y,
$padding-x: var(--spacing-06)
) {
--bs-btn-font-size: #{$font-size};
--bs-btn-line-height: #{$line-height};
--bs-btn-padding-y: #{$padding-y};
--bs-btn-padding-x: #{$padding-x};
}
@mixin ol-button-variant(
$color,
$background,
$border: $background,
$hover-background: $background,
$hover-border: $hover-background,
$borderless: true
) {
--bs-btn-color: #{$color};
--bs-btn-bg: #{$background};
--bs-btn-border-color: #{$border};
--bs-btn-hover-color: #{$color};
--bs-btn-hover-bg: #{$hover-background};
--bs-btn-hover-border-color: #{$hover-border};
--bs-btn-active-color: #{$color};
--bs-btn-active-bg: #{$hover-background};
--bs-btn-active-border-color: #{$hover-border};
--bs-btn-disabled-color: var(--content-disabled);
--bs-btn-disabled-bg: var(--bg-light-disabled);
--bs-btn-disabled-border-color: var(--bg-light-disabled);
@if $borderless {
--bs-btn-border-width: 0;
}
// Use the default state colors when in a loading state
&[data-ol-loading='true'] {
color: var(--bs-btn-color);
background-color: var(--bs-btn-bg);
border-color: var(--bs-btn-border-color);
}
}
.btn {
// Focus style for all buttons
--bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
// 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);
}
}