mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-03 07:20:22 -05:00
6d331ad7ed
[web] Update Sass folder structure GitOrigin-RevId: 03ac5835e46a3a464f31fba386e2f81f4bf25c99
131 lines
3.2 KiB
SCSS
131 lines
3.2 KiB
SCSS
// Button
|
|
|
|
@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);
|
|
}
|
|
}
|