mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
106 lines
2.2 KiB
SCSS
106 lines
2.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);
|
|
}
|
|
}
|
|
|
|
@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: var(--toolbar-small-height);
|
|
}
|
|
|
|
@mixin toolbar-alt-bg() {
|
|
background-color: var(--toolbar-alt-bg-color);
|
|
}
|
|
|
|
@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);
|
|
}
|
|
|
|
@mixin animation($animation) {
|
|
animation: $animation;
|
|
}
|
|
|
|
@mixin striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
|
|
background-image: linear-gradient(
|
|
$angle,
|
|
$color 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
$color 50%,
|
|
$color 75%,
|
|
transparent 75%,
|
|
transparent
|
|
);
|
|
}
|