overleaf/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
Rebeka Dekany abb59e4603 Merge pull request #20298 from overleaf/rd-ide-filetree
[web] Migrate the file tree on the editor page to Bootstrap 5

GitOrigin-RevId: e2efec26242c8cdab37a54bc182b83bfb0f1eb3c
2024-09-26 08:05:43 +00:00

89 lines
1.8 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);
}
}
@mixin reset-button() {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
appearance: none;
}
@mixin modal-lg {
max-width: 960px;
}
@mixin modal-md {
max-width: 640px;
}
@mixin modal-sm {
max-width: 480px;
}
// Toolbar
@mixin toolbar-sm-height {
height: 32px;
}
@mixin toolbar-alt-bg() {
background-color: var(--bg-dark-secondary);
}
@mixin theme($name) {
@if index($themes, $name) {
[data-theme='#{$name}'] {
@content;
}
} @else {
@error 'Theme "#{$name}" is not supported. Supported themes are: #{$themes}.';
}
}
@mixin box-shadow-button-input {
box-shadow: 0 0 0 2px var(--blue-30);
}