mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2024-10-19 05:40:16 -04:00
68 lines
1.9 KiB
SCSS
68 lines
1.9 KiB
SCSS
|
/*!
|
||
|
* SPDX-FileCopyrightText: Original code: Copyright (c) 2011-2022 Twitter, Inc. + Copyright (c) 2011-2022 The Bootstrap Authors. Modification: 2022 The HedgeDoc developers (see AUTHORS file)
|
||
|
*
|
||
|
* SPDX-License-Identifier: MIT
|
||
|
*/
|
||
|
|
||
|
//
|
||
|
// Base styles
|
||
|
//
|
||
|
|
||
|
.btn {
|
||
|
// scss-docs-start btn-css-vars
|
||
|
--#{$prefix}btn-color: #{$body-color};
|
||
|
}
|
||
|
|
||
|
|
||
|
//
|
||
|
// Alternate buttons
|
||
|
//
|
||
|
|
||
|
// scss-docs-start btn-variant-loops
|
||
|
@each $color, $value in $theme-colors {
|
||
|
.btn-#{$color} {
|
||
|
@if $color == "light" {
|
||
|
@include button-variant(
|
||
|
$value,
|
||
|
$value,
|
||
|
$hover-background: shade-color($value, $btn-hover-bg-shade-amount),
|
||
|
$hover-border: shade-color($value, $btn-hover-border-shade-amount),
|
||
|
$active-background: shade-color($value, $btn-active-bg-shade-amount),
|
||
|
$active-border: shade-color($value, $btn-active-border-shade-amount)
|
||
|
);
|
||
|
} @else if $color == "dark" {
|
||
|
@include button-variant(
|
||
|
$value,
|
||
|
$value,
|
||
|
$hover-background: tint-color($value, $btn-hover-bg-tint-amount),
|
||
|
$hover-border: tint-color($value, $btn-hover-border-tint-amount),
|
||
|
$active-background: tint-color($value, $btn-active-bg-tint-amount),
|
||
|
$active-border: tint-color($value, $btn-active-border-tint-amount)
|
||
|
);
|
||
|
} @else {
|
||
|
@include button-variant($value, $value);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@each $color, $value in $theme-colors {
|
||
|
.btn-outline-#{$color} {
|
||
|
@include button-outline-variant($value);
|
||
|
}
|
||
|
}
|
||
|
// scss-docs-end btn-variant-loops
|
||
|
|
||
|
|
||
|
//
|
||
|
// Link buttons
|
||
|
//
|
||
|
|
||
|
// Make a button look and behave like a link
|
||
|
.btn-link {
|
||
|
--#{$prefix}btn-color: #{$btn-link-color};
|
||
|
--#{$prefix}btn-hover-color: #{$btn-link-hover-color};
|
||
|
--#{$prefix}btn-active-color: #{$btn-link-hover-color};
|
||
|
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
|
||
|
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
|
||
|
}
|