// quarto-scss-analysis-annotation { "quarto-version": "1.7.33" }
// quarto-scss-analysis-annotation { "origin": "'use' section from format" }
// quarto-scss-analysis-annotation { "origin": "'use' section from Quarto" }
@use "sass:map" as listing-map;
@use "sass:color" as quarto-color;
@use "sass:map" as quarto-map;
@use "sass:math" as quarto-math;
// quarto-scss-analysis-annotation { "origin": "'use' section from user-defined SCSS" }
// quarto-scss-analysis-annotation { "origin": "'functions' section from format" }
// Bootstrap functions
//
// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
$prev-key: null;
$prev-num: null;
@each $key, $num in $map {
@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
// Do nothing
} @else if not comparable($prev-num, $num) {
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
} @else if $prev-num >= $num {
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
}
$prev-key: $key;
$prev-num: $num;
}
}
// Starts at zero
// Used to ensure the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
@if length($map) > 0 {
$values: map-values($map);
$first-value: nth($values, 1);
@if $first-value != 0 {
@warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
}
}
}
// Colors
@function to-rgb($value) {
@return red($value), green($value), blue($value);
}
// stylelint-disable scss/dollar-variable-pattern
@function rgba-css-var($identifier, $target) {
@if $identifier == "body" and $target == "bg" {
@return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
} @if $identifier == "body" and $target == "text" {
@return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
} @else {
@return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
}
}
@function map-loop($map, $func, $args...) {
$_map: ();
@each $key, $value in $map {
// allow to pass the $key and $value of the map as an function argument
$_args: ();
@each $arg in $args {
$_args: append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
}
$_map: map-merge($_map, ($key: call(get-function($func), $_args...)));
}
@return $_map;
}
// stylelint-enable scss/dollar-variable-pattern
@function varify($list) {
$result: null;
@each $entry in $list {
$result: append($result, var(--#{$prefix}#{$entry}), space);
}
@return $result;
}
// Internal Bootstrap function to turn maps into its negative variant.
// It prefixes the keys with `n` and makes the value negative.
@function negativify-map($map) {
$result: ();
@each $key, $value in $map {
@if $key != 0 {
$result: map-merge($result, ("n" + $key: (-$value)));
}
}
@return $result;
}
// Get multiple keys from a sass map
@function map-get-multiple($map, $values) {
$result: ();
@each $key, $value in $map {
@if (index($values, $key) != null) {
$result: map-merge($result, ($key: $value));
}
}
@return $result;
}
// Merge multiple maps
@function map-merge-multiple($maps...) {
$merged-maps: ();
@each $map in $maps {
$merged-maps: map-merge($merged-maps, $map);
}
@return $merged-maps;
}
// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Kitty Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// See https://codepen.io/kevinweber/pen/dXWoRw
//
// Requires the use of quotes around data URIs.
@function escape-svg($string) {
@if str-index($string, "data:image/svg+xml") {
@each $char, $encoded in $escaped-characters {
// Do not escape the url brackets
@if str-index($string, "url(") == 1 {
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
} @else {
$string: str-replace($string, $char, $encoded);
}
}
}
@return $string;
}
// Color contrast
// See https://github.com/twbs/bootstrap/pull/30168
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
$max-ratio: 0;
$max-ratio-color: null;
@each $color in $foregrounds {
$contrast-ratio: contrast-ratio($background, $color);
@if $contrast-ratio > $min-contrast-ratio {
@return $color;
} @else if $contrast-ratio > $max-ratio {
$max-ratio: $contrast-ratio;
$max-ratio-color: $color;
}
}
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
@return $max-ratio-color;
}
@function contrast-ratio($background, $foreground: $color-contrast-light) {
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
}
// Return WCAG2.1 relative luminance
// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
@function luminance($color) {
$rgb: (
"r": red($color),
"g": green($color),
"b": blue($color)
);
@each $name, $value in $rgb {
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
}
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}
// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}
// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
@return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions
// Return valid calc
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
}
@function subtract($value1, $value2, $return-calc: true) {
@if $value1 == null and $value2 == null {
@return null;
}
@if $value1 == null {
@return -$value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 - $value2;
}
@if type-of($value2) != number {
$value2: unquote("(") + $value2 + unquote(")");
}
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}
/////////////////////////////////////////////////////////////////
// Color contrasting (backported to BS4 from BS5)
// See https://github.com/twbs/bootstrap/pull/30168
/////////////////////////////////////////////////////////////////
// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
@function color-contrast($background, $foregrounds: null) {
// These variables should be defined in _variables.scss, but we also
// define them here so that 3rd party libs can use if they want
// without polluting the global namespace
$black: #000 !default;
$white: #fff !default;
$color-contrast-dark: $black !default;
$color-contrast-light: $white !default;
$min-contrast-ratio: 3 !default;
@if $foregrounds == null {
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
} @else {
$foregrounds: $foregrounds, $color-contrast-light, $color-contrast-dark, $white, $black;
}
$max-ratio: 0;
$max-ratio-color: null;
@each $color in $foregrounds {
$contrast-ratio: contrast-ratio($background, $color);
@if $contrast-ratio > $min-contrast-ratio {
@return $color;
} @else if $contrast-ratio > $max-ratio {
$max-ratio: $contrast-ratio;
$max-ratio-color: $color;
}
}
$color-contrast-warnings: false !default;
@if $color-contrast-warnings {
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
}
@return $max-ratio-color;
}
@function contrast-ratio($background, $foreground: $color-contrast-light) {
$l1: luminance($background);
$l2: luminance(opaque($background, $foreground));
@return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
}
// Return WCAG2.0 relative luminance
// See https://www.w3.org/WAI/GL/wiki/Relative_luminance
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function luminance($color) {
$rgb: (
"r": red($color),
"g": green($color),
"b": blue($color)
);
@each $name, $value in $rgb {
$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
$rgb: map-merge($rgb, ($name: $value));
}
@return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}
// Return opaque color
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
}
// Added in BS5 as an alternative to the \ operator, which
// throws warnings in Dart Sass
// https://github.com/twbs/bootstrap/pull/34245
@function divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error "Cannot divide by 0";
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * .1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
"px": 1px,
"rem": 1rem,
"em": 1em,
"%": 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}
// quarto-scss-analysis-annotation { "origin": "'functions' section from Quarto" }
// Our website navbar implementation will shift the body down
// to accomodate the navbar, but the height is variable. As a result
// we compute the height using JS, so it is perfect. This can lead to
// a content jump when the js executes, so place a padding there at render
// time to minimize this.
@function navbar-default-offset($theme) {
$offsets: (
darkly: 82px,
flatly: 82px,
litera: 67px,
lumen: 68px,
lux: 105px,
materia: 96px,
pulse: 89px,
quartz: 82px,
sandstone: 63px,
simplex: 80px,
sketchy: 68px,
slate: 66px,
zephyr: 76px,
);
$val: null;
@if ($theme != null) {
$val: quarto-map.get($offsets, $theme);
}
@if ($val != null) {
@return $val;
} @else {
@return 64px;
}
}
@function listing-override-value($theme, $varname, $default) {
// These will be defined in bootstrap, but creating values here
// That will make this function accessible to callers prior to bootstrap variables
// being set
$black: rgb(0, 0, 0) !default;
$white: rgb(255, 255, 255) !default;
$gray-300: #dee2e6 !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$blue: #0d6efd !default;
$theme-overrides: (
cyborg: (
category-border: solid $gray-500 1px,
category-color: $gray-500,
form-background-color: $body-bg,
form-color: $body-color,
input-group-border: solid $text-muted 1px,
input-group-border-radius: $border-radius,
),
darkly: (
form-background-color: $body-bg,
form-color: $body-color,
category-border: solid $gray-600 1px,
category-color: $gray-600,
),
materia: (
input-text-margin: 0 0.5em 0 0,
),
quartz: (
category-color: $gray-300,
input-text-placeholder-color: $gray-500,
),
slate: (
category-border: solid $gray-600 1px,
category-color: $gray-600,
form-background-color: $body-bg,
form-color: $body-color,
input-text-background-color: $body-bg,
input-text-color: $body-color,
input-group-border: solid $gray-600 1px,
),
solar: (
input-group-border: solid $gray-600 1px,
category-color: $body-color,
category-border: solid $body-color 1px,
),
superhero: (
input-text-background-color: $body-bg,
input-text-color: $body-color,
input-group-border: solid $gray-600 1px,
category-color: $gray-600,
category-border: solid $gray-600 1px,
),
vapor: (
category-border: solid $text-muted 1px,
input-group-border: solid $text-muted 1px,
),
);
$val: null;
@if ($theme != null) {
$theme-vals: listing-map.get($theme-overrides, $theme);
@if ($theme-vals != null) {
$val: listing-map.get($theme-vals, $varname);
}
}
@if ($val != null) {
@return $val;
} @else {
@return $default;
}
}
/*-- scss:variables --*/
// Since we use these colors, we need to ensure that they
// are defined (for example, if no theme is specified)
$gray-300: #dee2e6 !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-600: #6c757d !default;
$gray-800: #343a40 !default;
$card-cap-bg: rgba($gray-800, 0.25) !default;
$border-color: $gray-300 !default;
$border-radius: 0.25rem !default;
$border-radius-sm: 0.2em !default;
$text-muted: $gray-600 !default;
$theme-name: null !default;
@function colorToRGB($color) {
@return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
")";
}
@function colorToRGBA($color) {
@return "rgba(" + red($color) + ", " + green($color) + ", " + blue($color) +
", " + alpha($color) + ")";
}
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(
str-slice($string, $index + str-length($search)),
$search,
$replace
);
}
@return $string;
}
// Dims a color (either making it more white or more black)
@function theme-dim($baseColor, $amount) {
@if (tone($baseColor) == "dark") {
@return lighten($baseColor, $amount);
} @else {
@return darken($baseColor, $amount);
}
}
// Provides a contrast color for a given color
// The color is the starting color that will used to form a contrasting color
// The bgColor is the color that will be used to test contrast (e.g. the color
// will be shifted until its contrast against the bgColor is acceptable)
@function theme-contrast($color, $bgColor, $level: "AAA") {
// These will be defined in bootstrap, but creating values here
// That will make this function accessible to callers prior to bootstrap variables
// being set
$black: rgb(0, 0, 0) !default;
$white: rgb(255, 255, 255) !default;
@if tone($bgColor) == "light" {
@return accessibleContrast($color, $black, $bgColor, $level);
} @else {
@return accessibleContrast($color, $white, $bgColor, $level);
}
}
@function accessibleContrast($startColor, $mixColor, $bgColor, $level: "AAA") {
// A: 3:1
// AA: 4.5:1
// AAA: 7:1
$goalContrastRatio: 3;
@if $level == "AA" {
$goalContrastRatio: 4.5;
} @else {
$goalContrastRatio: 7;
}
$percentMix: 100;
$contrastRatio: 0;
$contrastColor: null;
@while ($contrastRatio < $goalContrastRatio and $percentMix > 0) {
$contrastColor: mix(
$startColor,
$mixColor,
percentage(quarto-math.div($percentMix, 100))
);
$contrastRatio: quarto-contrast($contrastColor, $bgColor);
$percentMix: $percentMix - 1;
}
@return $contrastColor;
}
// Fades a color towards the background color
@function theme-fade($baseColor, $backgroundColor, $amount) {
@if (tone($backgroundColor) == "dark") {
@return darken($baseColor, $amount);
} @else {
@return lighten($baseColor, $amount);
}
}
@function theme-highlight($baseColor, $backgroundColor, $amount) {
@if (tone($backgroundColor) == "dark") {
@return lighten($baseColor, $amount);
} @else {
@return darken($baseColor, $amount);
}
}
@function theme-override-value($theme, $varname, $default) {
// These will be defined in bootstrap, but creating values here
// That will make this function accessible to callers prior to bootstrap variables
// being set
$black: rgb(0, 0, 0) !default;
$white: rgb(255, 255, 255) !default;
$gray-500: #adb5bd !default;
$gray-300: #dee2e6 !default;
$blue: #0d6efd !default;
$simplex-border-mix: mix($white, $black, 93.5%) !default;
$theme-overrides: (
cerulean: (
navbar-fg: $white,
valuebox-bg-primary: #2fa4e7,
valuebox-bg-info: #3d9dd1,
valuebox-bg-success: #67a34d,
valuebox-bg-warning: #aa9208,
valuebox-bg-danger: #c48282,
),
cosmo: (
navbar-bg:
if(
$default == #2780e3,
if(variable-exists(light), $light, $gray-500),
$default
),
link-color: #2761e3,
valuebox-bg-primary: #5397e9,
valuebox-bg-info: #9954bbb3,
valuebox-bg-success: #3aa716,
valuebox-bg-warning: #fa6400,
valuebox-bg-danger: #ff0039b3,
),
cyborg: (
navbar-bg:
if(
$default == #2a9fd6,
if(variable-exists(secondary), $secondary, $black),
$default
),
navbar-hl: $white,
),
darkly: (
navbar-fg: $gray-300,
navbar-hl: $white,
input-border-color: $gray-500,
),
flatly: (
navbar-hl: $white,
valuebox-bg-primary: rgba(39, 128, 227, 0.7),
valuebox-bg-info: rgba(153, 84, 187, 0.7),
valuebox-bg-success: rgba(63, 182, 24, 0.7),
valuebox-bg-warning: rgba(255, 117, 24, 0.7),
valuebox-bg-danger: rgba(255, 0, 57, 0.7),
),
journal: (
navbar-fg: rgba($white, 0.7),
navbar-hl: $white,
valuebox-bg-primary: #f0938f,
valuebox-bg-info: #3d9dd1,
valuebox-bg-success: #65a244,
valuebox-bg-warning: #ad9310,
valuebox-bg-danger: #c77f7f,
),
litera: (
navbar-bg: if($default == #4582ec, $white, $default),
),
lumen: (
navbar-fg: rgba($white, 0.7),
navbar-hl: $white,
valuebox-bg-primary: #67abcc,
valuebox-bg-info: #3d9dd1,
valuebox-bg-success: #5ea343,
valuebox-bg-warning: #a79011,
valuebox-bg-danger: #ca8181,
),
lux: (),
materia: (
navbar-fg: rgba($white, 0.7),
navbar-hl: $white,
),
minty: (
navbar-fg: $white,
),
morph: (
navbar-bg:
if(
$default == #378dfc,
if(variable-exists(body-bg), $body-bg, $black),
$default
),
navbar-fg: rgba($black, 0.5),
),
paper: (
valuebox-bg-primary: #4396ea,
valuebox-bg-info: #c277cf,
valuebox-bg-success: #59a343,
valuebox-bg-warning: #d68100,
valuebox-bg-danger: #f46762,
),
pulse: (
navbar-fg: rgba($white, 0.7),
navbar-hl: $white,
),
quartz: (
navbar-fg: rgba($white, 0.8),
navbar-hl: $white,
),
sandstone: (
navbar-bg:
if(
$default == #325d88,
if(variable-exists(dark), $dark, $black),
$default
),
navbar-fg: rgba($white, 0.7),
navbar-hl: $white,
valuebox-bg-primary: #7b98ad,
valuebox-bg-info: #3d9dd1,
valuebox-bg-success: #60a545,
valuebox-bg-warning: #af8e08,
valuebox-bg-danger: #ca8181,
),
simplex: (
navbar-bg: if($default == #d9230f, $white, $default),
navbar-fg: rgba($black, 0.6),
navbar-hl: $black,
nav-tabs-link-active-border-color: $simplex-border-mix $simplex-border-mix
transparent,
valuebox-bg-primary: #db766b,
valuebox-bg-info: #359ed0,
valuebox-bg-success: #59a343,
valuebox-bg-warning: #a59212,
valuebox-bg-danger: #c48282,
),
sketchy: (
navbar-fg: $white,
),
slate: (),
solar: (
navbar-bg:
if(
$default == #b58900,
if(variable-exists(dark), $dark, $black),
$default
),
navbar-hl: $white,
),
spacelab: (
navbar-bg:
if(
$default == #446e9b,
if(variable-exists(light), $light, #bbb),
$default
),
navbar-hl: if(variable-exists(link-color), $link-color, $blue),
valuebox-bg-primary: #7e97ae,
valuebox-bg-info: #3d9dd1,
valuebox-bg-success: #62a540,
valuebox-bg-warning: #a59212,
valuebox-bg-danger: #c97e7e,
),
superhero: (
navbar-bg:
if(
$default == #df6919,
if(variable-exists(dark), $dark, $black),
$default
),
navbar-hl: $white,
),
united: (
navbar-fg: rgba($white, 0.8),
navbar-hl: $white,
valuebox-bg-primary: #5c9bbc,
valuebox-bg-info: #3d9dd1,
valuebox-bg-success: #60a545,
valuebox-bg-warning: #9a9623,
valuebox-bg-danger: #c48282,
),
vapor: (
navbar-fg: rgba($white, 0.8),
navbar-hl: $white,
),
yeti: (),
zephyr: (),
);
$val: null;
@if ($theme != null) {
$theme-vals: quarto-map.get($theme-overrides, $theme);
@if ($theme-vals != null) {
$val: quarto-map.get($theme-vals, $varname);
}
}
@if ($val != null) {
@return $val;
} @else {
@return $default;
}
}
@function theme-navbar-bg($theme, $primary) {
$white: rgb(255, 255, 255) !default;
// These will be defined in bootstrap, but creating values here
// That will make this function accessible to callers prior to bootstrap variables
// being set
$theme-bgs: (
litera: $white,
cyborg: if(variable-exists(body-bg), $body-bg, #000),
);
$bg: quarto-map.get($theme-bgs, $theme);
@if ($bg != null) {
@return $bg;
} @else {
@return if(variable-exists(primary), $primary, #fff);
}
}
@function theme-navbar-fg($theme, $primary) {
$white: rgb(255, 255, 255) !default;
// These will be defined in bootstrap, but creating values here
// That will make this function accessible to callers prior to bootstrap variables
// being set
$theme-fgs: (
cerulean: $white,
);
$bg: quarto-map.get($theme-bgs, $theme);
@if ($bg != null) {
@return $bg;
} @else {
@return if(variable-exists(primary), $primary, #fff);
}
}
@function repeat-chars($chars, $n) {
$final: "";
@for $i from 1 through $n {
$final: $final + $chars;
}
@return $final;
}
@function _linear-channel-value($channel-value) {
$normalized-channel-value: quarto-math.div($channel-value, 255);
@if $normalized-channel-value < 0.03928 {
@return quarto-math.div($normalized-channel-value, 12.92);
}
@return quarto-math.pow(
quarto-math.div(($normalized-channel-value + 0.055), 1.055),
2.4
);
}
// Calculate the luminance for a color.
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function luminance($color) {
$red: _linear-channel-value(quarto-color.red($color));
$green: _linear-channel-value(quarto-color.green($color));
$blue: _linear-channel-value(quarto-color.blue($color));
@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}
// Calculate the contrast ratio between two colors.
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function quarto-contrast($back, $front) {
$backLum: luminance($back) + 0.05;
$foreLum: luminance($front) + 0.05;
@return quarto-math.div(
quarto-math.max($backLum, $foreLum),
quarto-math.min($backLum, $foreLum)
);
}
// Determine whether the color is 'light' or 'dark'.
@function tone($color) {
@if $color == "dark" or $color == "light" {
@return $color;
}
$minimumContrast: 3.1;
$lightContrast: quarto-contrast($color, white);
$darkContrast: quarto-contrast($color, rgba(black, 0.87));
@if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
@return "light";
} @else {
@return "dark";
}
}
// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
// Returns 'dark' if the given color is light and 'light' if the given color is dark.
@function contrast-tone($color) {
@return if(tone($color) == "dark", "light", "dark");
}
// quarto-scss-analysis-annotation { "origin": "'functions' section from user-defined SCSS" }
// quarto-scss-analysis-annotation { "origin": "Defaults from user-defined SCSS" }
// Heading font size customization
$h1-font-size: 2rem !default;
$h2-font-size: 1.65rem !default;
$h3-font-size: 1.45rem !default;
$h4-font-size: 1.25rem !default;
$h5-font-size: 1.1rem !default;
$kbd-padding-y: 0.4rem !default;
$kbd-padding-x: 0.4rem !default;
// Speed up the default transition for the navbar
$transition-collapse: height 0.2s ease !default;
// Adjust the base font size up a little
$font-size-root: 17px !default;
// Disable smooth scrolling
$enable-smooth-scroll: false !default;
/*-- scss: functions --*/
@function bannerColor() {
@if $title-banner-color {
@return $title-banner-color;
} @else {
@if variable-exists(navbar-fg) {
@return $navbar-fg;
} @else {
@return $body-bg;
}
}
}
@function bannerDim() {
@return theme-fade(bannerColor(), bannerBg(), 20%);
}
@function bannerBg() {
@if $title-banner-bg {
@return $title-banner-bg;
} @else {
// figure out default background, navbar of body color
@if variable-exists(navbar-bg) {
@return $navbar-bg;
} @else {
@return $body-color;
}
}
}
/*-- scss:variables --*/
$title-banner-color: null !default;
$title-banner-bg: null !default;
$title-banner-image: null !default;
$btn-code-copy-color: #5E5E5E !default;
$btn-code-copy-color-active: #4758AB !default;
// quarto-scss-analysis-annotation { "origin": "Defaults from Quarto's SCSS" }
$code-copy-selector: "pre.sourceCode:hover > " !default;
$code-white-space: pre !default;
$tbl-cap-location: top !default;
$sidebar-border: true !default;
// Default the theme name
$theme-name: if(variable-exists(theme), $theme, "");
// Colors that must be defined
$blue: #0d6efd !default;
$primary: $blue !default;
$white: #ffffff !default;
$gray-200: #e9ecef !default;
$gray-100: #f8f9fa !default;
$gray-900: #212529 !default;
// Pending SCSS change until Charles clears it with us
// $link-color: theme-override-value($theme-name, "link-color", $primary) !default;
//
$link-color: $primary !default;
$link-color: if(
$link-color == $blue,
theme-override-value($theme-name, "link-color", $link-color),
$link-color
);
$link-color-bg: transparent !default;
/* Code Block Formatting */
// Code Block Border Treatment
$code-block-border-left: false !default;
$code-block-border-left-style: solid !default;
$code-block-border-left-size: 3px !default;
$code-block-padding-left: 0.6em !default;
// Code Block Background Treatment
// $code-block-bg, $code-block-bg-padding, $code-block-bg-alpha
$code-block-bg: true !default;
$code-block-bg-padding: 0.4em !default;
$code-block-bg-alpha: -0.35 !default;
// Controls when the code block will switch to a dark
// version of a theme
$code-block-theme-dark-threshhold: 40% !default;
/* Inline Code Formatting */
// $code-bg, $code-color, $code-padding
$code-color: #7d12ba !default;
// Set a default body emphasis color
$code-bg: $gray-100 !default;
// toc variables
$toc-color: $link-color !default;
$toc-font-size: 0.875rem !default;
$toc-active-border: $toc-color !default;
$toc-inactive-border: $gray-200 !default;
$toc-tools-font-size: 0.8rem !default;
/* Callout customization */
// Formatting
$callout-border-width: 5px !default;
$callout-border-scale: 0% !default;
$callout-icon-scale: 10% !default;
$callout-margin-top: 1.25rem !default;
$callout-margin-bottom: 1.25rem !default;
// Navbar
$navbar-default: if(
variable-exists(theme),
if(variable-exists(primary), $primary, #517699),
#517699
);
// If the user provides a navbar-bg, we ned to ignore the
// theme overide and just recalculate a good value
$navbar-hl-override: if(
variable-exists(navbar-bg) and variable-exists(link-color),
theme-contrast($link-color, $navbar-bg),
false
);
$navbar-bg: theme-override-value(
$theme-name,
"navbar-bg",
$navbar-default
) !default;
$btn-bg: if(variable-exists(secondary), $secondary, #6c757d) !default;
$btn-fg: theme-contrast($btn-bg, $btn-bg) !default;
$body-contrast-bg: if(variable-exists(body-bg), $body-bg, $white);
$body-contrast-color: if(variable-exists(body-color), $body-color, $gray-900);
$navbar-fg: if(
$navbar-bg == transparent,
theme-override-value(
$theme-name,
"navbar-fg",
theme-contrast($body-contrast-color, $body-contrast-bg)
),
theme-override-value(
$theme-name,
"navbar-fg",
theme-contrast($navbar-bg, $navbar-bg)
)
) !default;
$navbar-hl: if(
$navbar-hl-override != false,
$navbar-hl-override,
theme-override-value(
$theme-name,
"navbar-hl",
if(
variable-exists(link-color),
theme-contrast($link-color, $navbar-bg),
$navbar-fg
)
)
) !default;
$navbar-brand: theme-override-value(
$theme-name,
"navbar-brand",
$navbar-fg
) !default;
$navbar-brand-hl: theme-override-value(
$theme-name,
"navbar-brand-hl",
$navbar-hl
) !default;
$navbar-toggler-icon-bg: url("data:image/svg+xml,") !default;
$navbar-toggler-border-color: rgba($navbar-fg, 0) !default;
$navbar-hover-color: rgba($navbar-hl, 0.8) !default;
$navbar-disabled-color: rgba($navbar-fg, 0.75) !default;
$navbar-toggler-padding-x: 0 !default;
$navbar-toggler-padding-y: 0.25 !default;
// We omit the !default here b/c the dark and light variants
// are not meaningful in our usage of bootstrap. Instead, we will explicitly
// manage these using the above documented variables
$navbar-dark-bg: $navbar-bg;
$navbar-dark-color: $navbar-fg;
$navbar-dark-hover-color: $navbar-hover-color;
$navbar-dark-active-color: $navbar-hl;
$navbar-dark-disabled-color: $navbar-disabled-color;
$navbar-dark-toggler-icon-bg: $navbar-toggler-icon-bg;
$navbar-dark-toggler-border-color: $navbar-toggler-border-color;
$navbar-light-bg: $navbar-bg;
$navbar-light-color: $navbar-fg;
$navbar-light-hover-color: $navbar-hover-color;
$navbar-light-active-color: $navbar-hl;
$navbar-light-disabled-color: $navbar-disabled-color;
$navbar-light-toggler-icon-bg: $navbar-toggler-icon-bg;
$navbar-light-toggler-border-color: $navbar-toggler-border-color;
$navbar-light-brand-color: $navbar-brand;
$navbar-light-brand-hover-color: $navbar-brand-hl;
$navbar-dark-brand-color: $navbar-brand;
$navbar-dark-brand-hover-color: $navbar-brand-hl;
// Sidebar coloring
$sidebar-bg: if(variable-exists(light), $light, #fff) !default;
$sidebar-fg: null !default;
@if $sidebar-bg == transparent {
$sidebar-fg: theme-contrast($body-contrast-color, $body-contrast-bg) !default;
} @else {
$sidebar-fg: theme-contrast($sidebar-bg, $sidebar-bg) !default;
}
$sidebar-hl: null;
$sidebar-font-size: 0.925rem !default;
$sidebar-font-size-section: 0.875rem !default;
$sidebar-font-size-collapse: 1rem !default;
$sidebar-font-size-section-collapse: 1.1rem !default;
$sidebar-border: false !default;
// Title block variables
$title-block-color: $body-contrast-color !default;
$title-block-contast-color: $body-contrast-bg !default;
$title-block-padding-top: 2.5em !default;
// Footer coloring
$footer-bg: if(variable-exists(body-bg), $body-bg, #fff) !default;
$footer-fg: theme-contrast($footer-bg, $footer-bg, "AA") !default;
$footer-font-size: 0.825em !default;
$footer-left-font-size: $footer-font-size !default;
$footer-center-font-size: $footer-font-size !default;
$footer-right-font-size: $footer-font-size !default;
// Disable default grid system and switch to CSS grid
$enable-grid-classes: false;
$enable-cssgrid: true;
$zindex-pagelayout: 998;
$popover-bg: if(variable-exists(body-bg), $body-bg, null) !default;
$input-bg: if(variable-exists(body-bg), $body-bg, null) !default;
// Note that 'default' is intentionally omitted from this
// because we're using the default value if one is defined at this
// point (the if variable exists check in the default).
// This is a change to override the input border color for
// darkly, which sets the border color to the body color for
// whatever reason.
$input-border-color: theme-override-value(
$theme-name,
"input-border-color",
if(variable-exists(input-border-color), $input-border-color, null)
);
// Same as above (default is respected if there is not override
// so the `!default` keyword is omitted). Some themes don't provide
// active tab border colors and they customize the main border
// color which results in the tabs looking slightly weird since the
// colors may not match (for example, simplex).
$nav-tabs-link-active-border-color: theme-override-value(
$theme-name,
"nav-tabs-link-active-border-color",
if(
variable-exists(nav-tabs-link-active-border-color),
$nav-tabs-link-active-border-color,
null
)
);
/* GRID VARIABLES */
// The left hand sidebar
$grid-sidebar-width: 250px !default;
// The main body
$grid-body-width: 800px !default;
// The right hand margin bar
$grid-margin-width: 250px !default;
// The gutter that appears between the above columns
$grid-column-gutter-width: 1.5em !default;
/* CODE ANNOTATION COLORS */
$code-annotation-higlight-color: #aaaaaa44 !default;
$code-annotation-higlight-bg: #aaaaaa22 !default;
$breadcrumb-divider: quote(">") !default;
// table variable overrides
$table-group-separator-color: mix(
if(variable-exists(body-color), $body-color, $gray-900),
$body-contrast-bg,
50%
) !default;
$table-group-separator-color-lighter: mix(
if(variable-exists(body-color), $body-color, $gray-900),
$body-contrast-bg,
20%
) !default;
$bootstrap-version: 5;
$h1h2h3-font-weight: 600 !default;
// variables required by _brand.yml
// these variables need to have been defined here already
// and are repeated in the framework's own _variables.scss
// This will require us to monitor framework changes
// to avoid drift
$font-weight-base: 400 !default;
$small-font-size: 0.875em !default;
$code-font-size: $small-font-size !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !default;
$font-family-monospace-block: $font-family-monospace !default;
$font-family-monospace-inline: $font-family-monospace !default;
$font-weight-monospace: $font-weight-base !default;
$font-weight-monospace-block: $font-weight-monospace !default;
$font-weight-monospace-inline: $font-weight-monospace !default;
$code-block-font-size: $code-font-size !default;
$code-inline-font-size: $code-font-size !default;
$link-weight: $font-weight-base !default;
$link-decoration: null !default;
// border colors
/// if a theme does not provide body-color or body-bg
/// defaults to boostrap own default value for theses variables (in _variables.scss)
$border-color: mix(
if(variable-exists(body-color), $body-color, $gray-900),
if(variable-exists(body-bg), $body-bg, $white),
15%
) !default;
/// Make sure table border are the same as the border color (in case change in bootstrap default)
$table-border-color: $border-color !default;
// code block colors
$btn-code-copy-color: if(
variable-exists(text-muted),
$text-muted,
if(variable-exists(body-color), $body-color, $gray-900)
) !default;
$btn-code-copy-color-active: if(
variable-exists(link-color),
$link-color,
#0d6efd
) !default;
$dashboard-card-toolbar-top-margin: 6px !default;
$quarto-navbar-search-input-width: 180px !default;
$quarto-sidebar-search-input-width: 100% !default;
$quarto-search-results-width: 400px !default;
$quarto-search-collapse-icon-size: 26px !default;
$content-padding-top: 14px !default;
$sidebar-glass-bg: #66666666 !default;
$sidebar-anim-duration: 0.15s !default;
$navbar-toggle-position: left !default;
$navbar-toggler-order: if($navbar-toggle-position == "left", 1, 4) !default;
$navbar-title-order: if($navbar-toggle-position == "left", 2, 1) !default;
$navbar-search-order: if($navbar-toggle-position == "left", 4, 3) !default;
$navbar-tools-order: if($navbar-toggle-position == "left", 3, 2) !default;
$navbar-menu-order: if($navbar-toggle-position == "left", 20, 20) !default;
// quarto-scss-analysis-annotation { "origin": "Defaults from the format SCSS" }
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
// Color system
// scss-docs-start gray-color-variables
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// scss-docs-end gray-color-variables
// fusv-disable
// scss-docs-start gray-colors-map
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
) !default;
// scss-docs-end gray-colors-map
// fusv-enable
// scss-docs-start color-variables
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;
// scss-docs-end color-variables
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"black": $black,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
// scss-docs-end colors-map
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio: 4.5 !default;
// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: $black !default;
$color-contrast-light: $white !default;
// fusv-disable
$blue-100: tint-color($blue, 80%) !default;
$blue-200: tint-color($blue, 60%) !default;
$blue-300: tint-color($blue, 40%) !default;
$blue-400: tint-color($blue, 20%) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 20%) !default;
$blue-700: shade-color($blue, 40%) !default;
$blue-800: shade-color($blue, 60%) !default;
$blue-900: shade-color($blue, 80%) !default;
$indigo-100: tint-color($indigo, 80%) !default;
$indigo-200: tint-color($indigo, 60%) !default;
$indigo-300: tint-color($indigo, 40%) !default;
$indigo-400: tint-color($indigo, 20%) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 20%) !default;
$indigo-700: shade-color($indigo, 40%) !default;
$indigo-800: shade-color($indigo, 60%) !default;
$indigo-900: shade-color($indigo, 80%) !default;
$purple-100: tint-color($purple, 80%) !default;
$purple-200: tint-color($purple, 60%) !default;
$purple-300: tint-color($purple, 40%) !default;
$purple-400: tint-color($purple, 20%) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 20%) !default;
$purple-700: shade-color($purple, 40%) !default;
$purple-800: shade-color($purple, 60%) !default;
$purple-900: shade-color($purple, 80%) !default;
$pink-100: tint-color($pink, 80%) !default;
$pink-200: tint-color($pink, 60%) !default;
$pink-300: tint-color($pink, 40%) !default;
$pink-400: tint-color($pink, 20%) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 20%) !default;
$pink-700: shade-color($pink, 40%) !default;
$pink-800: shade-color($pink, 60%) !default;
$pink-900: shade-color($pink, 80%) !default;
$red-100: tint-color($red, 80%) !default;
$red-200: tint-color($red, 60%) !default;
$red-300: tint-color($red, 40%) !default;
$red-400: tint-color($red, 20%) !default;
$red-500: $red !default;
$red-600: shade-color($red, 20%) !default;
$red-700: shade-color($red, 40%) !default;
$red-800: shade-color($red, 60%) !default;
$red-900: shade-color($red, 80%) !default;
$orange-100: tint-color($orange, 80%) !default;
$orange-200: tint-color($orange, 60%) !default;
$orange-300: tint-color($orange, 40%) !default;
$orange-400: tint-color($orange, 20%) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 20%) !default;
$orange-700: shade-color($orange, 40%) !default;
$orange-800: shade-color($orange, 60%) !default;
$orange-900: shade-color($orange, 80%) !default;
$yellow-100: tint-color($yellow, 80%) !default;
$yellow-200: tint-color($yellow, 60%) !default;
$yellow-300: tint-color($yellow, 40%) !default;
$yellow-400: tint-color($yellow, 20%) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 20%) !default;
$yellow-700: shade-color($yellow, 40%) !default;
$yellow-800: shade-color($yellow, 60%) !default;
$yellow-900: shade-color($yellow, 80%) !default;
$green-100: tint-color($green, 80%) !default;
$green-200: tint-color($green, 60%) !default;
$green-300: tint-color($green, 40%) !default;
$green-400: tint-color($green, 20%) !default;
$green-500: $green !default;
$green-600: shade-color($green, 20%) !default;
$green-700: shade-color($green, 40%) !default;
$green-800: shade-color($green, 60%) !default;
$green-900: shade-color($green, 80%) !default;
$teal-100: tint-color($teal, 80%) !default;
$teal-200: tint-color($teal, 60%) !default;
$teal-300: tint-color($teal, 40%) !default;
$teal-400: tint-color($teal, 20%) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 20%) !default;
$teal-700: shade-color($teal, 40%) !default;
$teal-800: shade-color($teal, 60%) !default;
$teal-900: shade-color($teal, 80%) !default;
$cyan-100: tint-color($cyan, 80%) !default;
$cyan-200: tint-color($cyan, 60%) !default;
$cyan-300: tint-color($cyan, 40%) !default;
$cyan-400: tint-color($cyan, 20%) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 20%) !default;
$cyan-700: shade-color($cyan, 40%) !default;
$cyan-800: shade-color($cyan, 60%) !default;
$cyan-900: shade-color($cyan, 80%) !default;
$blues: (
"blue-100": $blue-100,
"blue-200": $blue-200,
"blue-300": $blue-300,
"blue-400": $blue-400,
"blue-500": $blue-500,
"blue-600": $blue-600,
"blue-700": $blue-700,
"blue-800": $blue-800,
"blue-900": $blue-900
) !default;
$indigos: (
"indigo-100": $indigo-100,
"indigo-200": $indigo-200,
"indigo-300": $indigo-300,
"indigo-400": $indigo-400,
"indigo-500": $indigo-500,
"indigo-600": $indigo-600,
"indigo-700": $indigo-700,
"indigo-800": $indigo-800,
"indigo-900": $indigo-900
) !default;
$purples: (
"purple-100": $purple-100,
"purple-200": $purple-200,
"purple-300": $purple-300,
"purple-400": $purple-400,
"purple-500": $purple-500,
"purple-600": $purple-600,
"purple-700": $purple-700,
"purple-800": $purple-800,
"purple-900": $purple-900
) !default;
$pinks: (
"pink-100": $pink-100,
"pink-200": $pink-200,
"pink-300": $pink-300,
"pink-400": $pink-400,
"pink-500": $pink-500,
"pink-600": $pink-600,
"pink-700": $pink-700,
"pink-800": $pink-800,
"pink-900": $pink-900
) !default;
$reds: (
"red-100": $red-100,
"red-200": $red-200,
"red-300": $red-300,
"red-400": $red-400,
"red-500": $red-500,
"red-600": $red-600,
"red-700": $red-700,
"red-800": $red-800,
"red-900": $red-900
) !default;
$oranges: (
"orange-100": $orange-100,
"orange-200": $orange-200,
"orange-300": $orange-300,
"orange-400": $orange-400,
"orange-500": $orange-500,
"orange-600": $orange-600,
"orange-700": $orange-700,
"orange-800": $orange-800,
"orange-900": $orange-900
) !default;
$yellows: (
"yellow-100": $yellow-100,
"yellow-200": $yellow-200,
"yellow-300": $yellow-300,
"yellow-400": $yellow-400,
"yellow-500": $yellow-500,
"yellow-600": $yellow-600,
"yellow-700": $yellow-700,
"yellow-800": $yellow-800,
"yellow-900": $yellow-900
) !default;
$greens: (
"green-100": $green-100,
"green-200": $green-200,
"green-300": $green-300,
"green-400": $green-400,
"green-500": $green-500,
"green-600": $green-600,
"green-700": $green-700,
"green-800": $green-800,
"green-900": $green-900
) !default;
$teals: (
"teal-100": $teal-100,
"teal-200": $teal-200,
"teal-300": $teal-300,
"teal-400": $teal-400,
"teal-500": $teal-500,
"teal-600": $teal-600,
"teal-700": $teal-700,
"teal-800": $teal-800,
"teal-900": $teal-900
) !default;
$cyans: (
"cyan-100": $cyan-100,
"cyan-200": $cyan-200,
"cyan-300": $cyan-300,
"cyan-400": $cyan-400,
"cyan-500": $cyan-500,
"cyan-600": $cyan-600,
"cyan-700": $cyan-700,
"cyan-800": $cyan-800,
"cyan-900": $cyan-900
) !default;
// fusv-enable
// Semantically, $secondary is closest to BS3's 'default' theme color;
// so use that if specified. Otherwise, use a light instead of dark gray
// default color for $default since that's closer to bootstrap 3's default
$default: if(variable-exists("secondary"), $secondary, $gray-300) !default;
// scss-docs-start theme-color-variables
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;
// scss-docs-end theme-color-variables
// scss-docs-start theme-colors-map
$theme-colors: (
// default needs to be 1st so that .btn-default comes before .btn-primary
// & therefore has lower priority.
"default": $default,
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
// scss-docs-end theme-colors-map
// scss-docs-start theme-text-variables
$primary-text-emphasis: shade-color($primary, 60%) !default;
$secondary-text-emphasis: shade-color($secondary, 60%) !default;
$success-text-emphasis: shade-color($success, 60%) !default;
$info-text-emphasis: shade-color($info, 60%) !default;
$warning-text-emphasis: shade-color($warning, 60%) !default;
$danger-text-emphasis: shade-color($danger, 60%) !default;
$light-text-emphasis: $gray-700 !default;
$dark-text-emphasis: $gray-700 !default;
// scss-docs-end theme-text-variables
// scss-docs-start theme-bg-subtle-variables
$primary-bg-subtle: tint-color($primary, 80%) !default;
$secondary-bg-subtle: tint-color($secondary, 80%) !default;
$success-bg-subtle: tint-color($success, 80%) !default;
$info-bg-subtle: tint-color($info, 80%) !default;
$warning-bg-subtle: tint-color($warning, 80%) !default;
$danger-bg-subtle: tint-color($danger, 80%) !default;
$light-bg-subtle: mix($gray-100, $white) !default;
$dark-bg-subtle: $gray-400 !default;
// scss-docs-end theme-bg-subtle-variables
// scss-docs-start theme-border-subtle-variables
$primary-border-subtle: tint-color($primary, 60%) !default;
$secondary-border-subtle: tint-color($secondary, 60%) !default;
$success-border-subtle: tint-color($success, 60%) !default;
$info-border-subtle: tint-color($info, 60%) !default;
$warning-border-subtle: tint-color($warning, 60%) !default;
$danger-border-subtle: tint-color($danger, 60%) !default;
$light-border-subtle: $gray-200 !default;
$dark-border-subtle: $gray-500 !default;
// scss-docs-end theme-border-subtle-variables
// Characters which are escaped by the escape-svg function
$escaped-characters: (
("<", "%3c"),
(">", "%3e"),
("#", "%23"),
("(", "%28"),
(")", "%29"),
) !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-smooth-scroll: true !default;
$enable-grid-classes: true !default;
$enable-container-classes: true !default;
$enable-cssgrid: false !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;
$color-mode-type: data !default; // `data` or `media-query`
// Prefix for :root CSS variables
$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;
// Gradient
//
// The gradient which is added to components if `$enable-gradients` is `true`
// This gradient is also added to elements with `.bg-gradient`
// scss-docs-start variable-gradient
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
// scss-docs-end variable-gradient
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
// scss-docs-start spacer-variables-maps
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
) !default;
// scss-docs-end spacer-variables-maps
// Position
//
// Define the edge positioning anchors of the position utilities.
// scss-docs-start position-map
$position-values: (
0: 0,
50: 50%,
100: 100%
) !default;
// scss-docs-end position-map
// Body
//
// Settings for the `` element.
$body-text-align: null !default;
$body-color: $gray-900 !default;
$body-bg: $white !default;
$body-secondary-color: rgba($body-color, .75) !default;
$body-secondary-bg: $gray-200 !default;
$body-tertiary-color: rgba($body-color, .5) !default;
$body-tertiary-bg: $gray-100 !default;
$body-emphasis-color: $black !default;
// Links
//
// Style anchor elements.
$link-color: $primary !default;
$link-decoration: underline !default;
$link-shade-percentage: 20% !default;
$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
$link-hover-decoration: null !default;
$stretched-link-pseudo-element: after !default;
$stretched-link-z-index: 1 !default;
// Icon links
// scss-docs-start icon-link-variables
$icon-link-gap: .375rem !default;
$icon-link-underline-offset: .25em !default;
$icon-link-icon-size: 1em !default;
$icon-link-icon-transition: .2s ease-in-out transform !default;
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
// scss-docs-end icon-link-variables
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 1rem !default;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
// scss-docs-start grid-breakpoints
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
) !default;
// scss-docs-end grid-breakpoints
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
// scss-docs-start container-max-widths
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
) !default;
// scss-docs-end container-max-widths
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;
// Container padding
$container-padding-x: $grid-gutter-width !default;
// Components
//
// Define common padding and border radius sizes and more.
// scss-docs-start border-variables
$border-width: 1px !default;
$border-widths: (
1: 1px,
2: 2px,
3: 3px,
4: 4px,
5: 5px
) !default;
$border-style: solid !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
$border-radius: .375rem !default;
$border-radius-sm: .25rem !default;
$border-radius-lg: .5rem !default;
$border-radius-xl: 1rem !default;
$border-radius-xxl: 2rem !default;
$border-radius-pill: 50rem !default;
// scss-docs-end border-radius-variables
// fusv-disable
$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0
// fusv-enable
// scss-docs-start box-shadow-variables
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
// scss-docs-end box-shadow-variables
$component-active-bg: $primary !default;
$component-active-color: color-contrast($component-active-bg) !default;
// scss-docs-start focus-ring-variables
$focus-ring-width: .25rem !default;
$focus-ring-opacity: .25 !default;
$focus-ring-color: rgba($primary, $focus-ring-opacity) !default;
$focus-ring-blur: 0 !default;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
// scss-docs-end focus-ring-variables
// scss-docs-start caret-variables
$caret-width: .3em !default;
$caret-vertical-align: $caret-width * .85 !default;
$caret-spacing: $caret-width * .85 !default;
// scss-docs-end caret-variables
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
// scss-docs-start collapse-transition
$transition-collapse: height .35s ease !default;
$transition-collapse-width: width .35s ease !default;
// scss-docs-end collapse-transition
// stylelint-disable function-disallowed-list
// scss-docs-start aspect-ratios
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
) !default;
// scss-docs-end aspect-ratios
// stylelint-enable function-disallowed-list
// Typography
//
// Font, line-height, and color for body text, headings, and more.
// scss-docs-start font-variables
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif !default;
$font-family-code: $font-family-monospace !default;
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875 !default;
$font-size-lg: $font-size-base * 1.25 !default;
$font-weight-lighter: lighter !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;
$font-weight-bolder: bolder !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$line-height-sm: 1.25 !default;
$line-height-lg: 2 !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
// scss-docs-end font-variables
// scss-docs-start font-sizes
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
) !default;
// scss-docs-end font-sizes
// scss-docs-start headings-variables
$headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default;
$headings-font-style: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
// scss-docs-end headings-variables
// scss-docs-start display-headings
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
) !default;
$display-font-family: null !default;
$display-font-style: null !default;
$display-font-weight: 300 !default;
$display-line-height: $headings-line-height !default;
// scss-docs-end display-headings
// scss-docs-start type-variables
$lead-font-size: $font-size-base * 1.25 !default;
$lead-font-weight: 300 !default;
$small-font-size: .875em !default;
$sub-sup-font-size: .75em !default;
// fusv-disable
$text-muted: $body-secondary-color !default; // Deprecated in 5.3.0
// fusv-enable
$initialism-font-size: $small-font-size !default;
$blockquote-margin-y: $spacer !default;
$blockquote-font-size: $font-size-base * 1.25 !default;
$blockquote-footer-color: $gray-600 !default;
$blockquote-footer-font-size: $small-font-size !default;
$blockquote-border-width: $spacer / 4 !default;
$blockquote-border-color: $gray-200 !default;
$hr-margin-y: $spacer !default;
$hr-color: inherit !default;
// fusv-disable
$hr-bg-color: null !default; // Deprecated in v5.2.0
$hr-height: null !default; // Deprecated in v5.2.0
// fusv-enable
$hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: $border-width !default;
$hr-opacity: .25 !default;
// scss-docs-start vr-variables
$vr-border-width: $border-width !default;
// scss-docs-end vr-variables
$legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;
$dt-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-padding: .1875em !default;
$mark-bg: $yellow-100 !default;
// scss-docs-end type-variables
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
// scss-docs-start table-variables
$table-cell-padding-y: .5rem !default;
$table-cell-padding-x: .5rem !default;
$table-cell-padding-y-sm: .25rem !default;
$table-cell-padding-x-sm: .25rem !default;
$table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-bg: $body-bg !default;
$table-accent-bg: transparent !default;
$table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
$table-active-bg: rgba($black, $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
$table-border-factor: .1 !default;
$table-border-width: $border-width !default;
$table-border-color: $border-color !default;
$table-striped-order: odd !default;
$table-striped-columns-order: even !default;
$table-group-separator-color: currentcolor !default;
$table-caption-color: $body-secondary-color !default;
$table-bg-scale: -80% !default;
// scss-docs-end table-variables
// scss-docs-start table-loop
$table-variants: (
"primary": shift-color($primary, $table-bg-scale),
"secondary": shift-color($secondary, $table-bg-scale),
"success": shift-color($success, $table-bg-scale),
"info": shift-color($info, $table-bg-scale),
"warning": shift-color($warning, $table-bg-scale),
"danger": shift-color($danger, $table-bg-scale),
"light": $light,
"dark": $dark,
) !default;
// scss-docs-end table-loop
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
// scss-docs-start input-btn-variables
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-font-family: null !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-line-height: $line-height-base !default;
$input-btn-focus-width: $focus-ring-width !default;
$input-btn-focus-color-opacity: $focus-ring-opacity !default;
$input-btn-focus-color: $focus-ring-color !default;
$input-btn-focus-blur: $focus-ring-blur !default;
$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-font-size-sm: $font-size-sm !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
$input-btn-border-width: $border-width !default;
// scss-docs-end input-btn-variables
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
// scss-docs-start btn-variables
$btn-color: $body-color !default;
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-font-family: $input-btn-font-family !default;
$btn-font-size: $input-btn-font-size !default;
$btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-font-size-sm: $input-btn-font-size-sm !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-font-size-lg: $input-btn-font-size-lg !default;
$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width: $input-btn-focus-width !default;
$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-disabled-opacity: .65 !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-color: $link-color !default;
$btn-link-hover-color: $link-hover-color !default;
$btn-link-disabled-color: $gray-600 !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$btn-hover-bg-shade-amount: 15% !default;
$btn-hover-bg-tint-amount: 15% !default;
$btn-hover-border-shade-amount: 20% !default;
$btn-hover-border-tint-amount: 10% !default;
$btn-active-bg-shade-amount: 20% !default;
$btn-active-bg-tint-amount: 20% !default;
$btn-active-border-shade-amount: 25% !default;
$btn-active-border-tint-amount: 10% !default;
// scss-docs-end btn-variables
// Forms
// scss-docs-start form-text-variables
$form-text-margin-top: .25rem !default;
$form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: $body-secondary-color !default;
// scss-docs-end form-text-variables
// scss-docs-start form-label-variables
$form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: null !default;
$form-label-color: null !default;
// scss-docs-end form-label-variables
// scss-docs-start form-input-variables
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: $body-bg !default;
$input-disabled-color: null !default;
$input-disabled-bg: $body-secondary-bg !default;
$input-disabled-border-color: null !default;
$input-color: $body-color !default;
$input-border-color: $border-color !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
$input-border-radius: $border-radius !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $body-secondary-color !default;
$input-plaintext-color: $body-color !default;
$input-height-border: calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-color-width: 3rem !default;
// scss-docs-end form-input-variables
// scss-docs-start form-check-variables
$form-check-input-width: 1em !default;
$form-check-min-height: $font-size-base * $line-height-base !default;
$form-check-padding-start: 0 !default;
$form-check-margin-bottom: .125rem !default;
$form-check-label-color: null !default;
$form-check-label-cursor: pointer !default;
$form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: $border-width solid $border-color !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default;
$form-check-input-checked-color: $component-active-color !default;
$form-check-input-checked-bg-color: $component-active-bg !default;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,") !default;
$form-check-radio-checked-bg-image: url("data:image/svg+xml,") !default;
$form-check-input-indeterminate-color: $component-active-color !default;
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default;
$form-check-input-disabled-opacity: .5 !default;
$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default;
$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default;
$form-check-inline-margin-end: 1rem !default;
// scss-docs-end form-check-variables
// scss-docs-start form-switch-variables
$form-switch-color: rgba($black, .25) !default;
$form-switch-width: 2em !default;
$form-switch-padding-start: $form-switch-width + .5em !default;
$form-switch-bg-image: url("data:image/svg+xml,") !default;
$form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: background-position .15s ease-in-out !default;
$form-switch-focus-color: $input-focus-border-color !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,") !default;
$form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,") !default;
$form-switch-checked-bg-position: right center !default;
// scss-docs-end form-switch-variables
// scss-docs-start input-group-variables
$input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $body-tertiary-bg !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
// scss-docs-start form-select-variables
$form-select-padding-y: $input-padding-y !default;
$form-select-padding-x: $input-padding-x !default;
$form-select-font-family: $input-font-family !default;
$form-select-font-size: $input-font-size !default;
$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
$form-select-font-weight: $input-font-weight !default;
$form-select-line-height: $input-line-height !default;
$form-select-color: $input-color !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-color: null !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color: $gray-800 !default;
$form-select-indicator: url("data:image/svg+xml,") !default;
$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
$form-select-border-width: $input-border-width !default;
$form-select-border-color: $input-border-color !default;
$form-select-border-radius: $input-border-radius !default;
$form-select-box-shadow: $box-shadow-inset !default;
$form-select-focus-border-color: $input-focus-border-color !default;
$form-select-focus-width: $input-focus-width !default;
$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color !default;
$form-select-padding-y-sm: $input-padding-y-sm !default;
$form-select-padding-x-sm: $input-padding-x-sm !default;
$form-select-font-size-sm: $input-font-size-sm !default;
$form-select-border-radius-sm: $input-border-radius-sm !default;
$form-select-padding-y-lg: $input-padding-y-lg !default;
$form-select-padding-x-lg: $input-padding-x-lg !default;
$form-select-font-size-lg: $input-font-size-lg !default;
$form-select-border-radius-lg: $input-border-radius-lg !default;
$form-select-transition: $input-transition !default;
// scss-docs-end form-select-variables
// scss-docs-start form-range-variables
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: $body-tertiary-bg !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: $box-shadow-inset !default;
$form-range-thumb-width: 1rem !default;
$form-range-thumb-height: $form-range-thumb-width !default;
$form-range-thumb-bg: $component-active-bg !default;
$form-range-thumb-border: 0 !default;
$form-range-thumb-border-radius: 1rem !default;
$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: $body-secondary-color !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
$form-file-button-bg: $body-tertiary-bg !default;
$form-file-button-hover-bg: $body-secondary-bg !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
$form-floating-height: add(3.5rem, $input-height-border) !default;
$form-floating-line-height: 1.25 !default;
$form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: .625rem !default;
$form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-label-disabled-color: $gray-600 !default;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
// scss-docs-end form-floating-variables
// Form validation
// scss-docs-start form-feedback-variables
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $form-text-font-size !default;
$form-feedback-font-style: $form-text-font-style !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-valid: url("data:image/svg+xml,") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,") !default;
// scss-docs-end form-feedback-variables
// scss-docs-start form-validation-colors
$form-valid-color: $form-feedback-valid-color !default;
$form-valid-border-color: $form-feedback-valid-color !default;
$form-invalid-color: $form-feedback-invalid-color !default;
$form-invalid-border-color: $form-feedback-invalid-color !default;
// scss-docs-end form-validation-colors
// scss-docs-start form-validation-states
$form-validation-states: (
"valid": (
"color": $form-valid-color,
"icon": $form-feedback-icon-valid,
"tooltip-color": #fff,
"tooltip-bg-color": $success,
"focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($success, $input-btn-focus-color-opacity),
"border-color": $form-valid-border-color,
),
"invalid": (
"color": $form-invalid-color,
"icon": $form-feedback-icon-invalid,
"tooltip-color": #fff,
"tooltip-bg-color": $danger,
"focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba($danger, $input-btn-focus-color-opacity),
"border-color": $form-invalid-border-color,
)
) !default;
// scss-docs-end form-validation-states
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
// scss-docs-start zindex-stack
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-offcanvas-backdrop: 1040 !default;
$zindex-offcanvas: 1045 !default;
$zindex-modal-backdrop: 1050 !default;
$zindex-modal: 1055 !default;
$zindex-popover: 1070 !default;
$zindex-tooltip: 1080 !default;
$zindex-toast: 1090 !default;
// scss-docs-end zindex-stack
// scss-docs-start zindex-levels-map
$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3
) !default;
// scss-docs-end zindex-levels-map
// Navs
// scss-docs-start nav-variables
$nav-link-padding-y: ($font-size-base * 0.5) !default;
$nav-link-padding-x: $font-size-base !default;
$nav-link-font-size: null !default;
$nav-link-font-weight: null !default;
$nav-link-color: $link-color !default;
$nav-link-hover-color: $link-hover-color !default;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color: $body-secondary-color !default;
$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
$nav-tabs-border-color: $border-color !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $body-secondary-bg $body-secondary-bg $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $body-emphasis-color !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $border-color $border-color $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-pills-link-active-color: color-contrast($nav-pills-link-active-bg, $component-active-color) !default;
$nav-underline-gap: 1rem !default;
$nav-underline-border-width: .125rem !default;
$nav-underline-link-active-color: $body-emphasis-color !default;
// scss-docs-end nav-variables
// Navbar
// scss-docs-start navbar-variables
$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
$navbar-bg: null !default; // Background color for any navbarPage()
$navbar-light-bg: if($navbar-bg, $navbar-bg, var(--bs-light)) !default; // Background color for navbarPage(inverse = FALSE)
$navbar-dark-bg: if($navbar-bg, $navbar-bg, var(--bs-dark)) !default; // Background color for navbarPage(inverse = TRUE)
$navbar-light-contrast: if(
type-of($navbar-light-bg) == color,
color-contrast($navbar-light-bg),
$body-emphasis-color
) !default; // Deepest contrasting color for navbarPage(inverse = FALSE).
$navbar-dark-contrast: if(
type-of($navbar-dark-bg) == color,
color-contrast($navbar-dark-bg),
$body-emphasis-color
) !default; // Deepest contrasting color for navbarPage(inverse = TRUE).
$navbar-light-color: rgba($navbar-light-contrast, .65) !default;
$navbar-light-hover-color: rgba($navbar-light-contrast, .8) !default;
$navbar-light-active-color: rgba($navbar-light-contrast, 1) !default;
$navbar-light-disabled-color: rgba($navbar-light-contrast, .3) !default;
$navbar-light-icon-color: rgba(if(type-of($navbar-light-contrast)==color, $navbar-light-contrast, $body-color), .75) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default;
$navbar-light-toggler-border-color: rgba($navbar-light-contrast, .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
// scss-docs-end navbar-variables
// scss-docs-start navbar-dark-variables
$navbar-dark-color: rgba($navbar-dark-contrast, .55) !default;
$navbar-dark-hover-color: rgba($navbar-dark-contrast, .75) !default;
$navbar-dark-active-color: rgba($navbar-dark-contrast, 1) !default;
$navbar-dark-disabled-color: rgba($navbar-dark-contrast, .25) !default;
$navbar-dark-icon-color: rgba(if(type-of($navbar-dark-contrast)==color, $navbar-dark-contrast, $white), .75) !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default;
$navbar-dark-toggler-border-color: rgba($navbar-dark-contrast, .1) !default;
$navbar-dark-brand-color: $navbar-dark-active-color !default;
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
// scss-docs-end navbar-dark-variables
// Dropdowns
//
// Dropdown menu container and contents.
// scss-docs-start dropdown-variables
$dropdown-min-width: 10rem !default;
$dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
$dropdown-bg: $body-bg !default;
$dropdown-border-color: $border-color-translucent !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $body-color !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
$dropdown-link-hover-bg: $body-tertiary-bg !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-active-color: color-contrast($dropdown-link-active-bg, $component-active-color) !default;
$dropdown-link-disabled-color: $body-tertiary-color !default;
$dropdown-item-padding-y: $spacer * .25 !default;
$dropdown-item-padding-x: $spacer !default;
$dropdown-header-color: $gray-600 !default;
$dropdown-header-padding-x: $dropdown-item-padding-x !default;
$dropdown-header-padding-y: $dropdown-padding-y !default;
// fusv-disable
$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
// fusv-enable
// scss-docs-end dropdown-variables
// scss-docs-start dropdown-dark-variables
$dropdown-dark-color: $gray-300 !default;
$dropdown-dark-bg: $gray-800 !default;
$dropdown-dark-border-color: $dropdown-border-color !default;
$dropdown-dark-divider-bg: $dropdown-divider-bg !default;
$dropdown-dark-box-shadow: null !default;
$dropdown-dark-link-color: $dropdown-dark-color !default;
$dropdown-dark-link-hover-color: $white !default;
$dropdown-dark-link-hover-bg: rgba($white, .15) !default;
$dropdown-dark-link-active-color: $dropdown-link-active-color !default;
$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default;
$dropdown-dark-link-disabled-color: $gray-500 !default;
$dropdown-dark-header-color: $gray-500 !default;
// scss-docs-end dropdown-dark-variables
// Pagination
// scss-docs-start pagination-variables
$pagination-padding-y: .375rem !default;
$pagination-padding-x: .75rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-font-size: $font-size-base !default;
$pagination-color: $link-color !default;
$pagination-bg: $body-bg !default;
$pagination-border-radius: $border-radius !default;
$pagination-border-width: $border-width !default;
$pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: $border-color !default;
$pagination-focus-color: $link-hover-color !default;
$pagination-focus-bg: $body-secondary-bg !default;
$pagination-focus-box-shadow: $focus-ring-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $body-tertiary-bg !default;
$pagination-hover-border-color: $border-color !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $component-active-bg !default;
$pagination-disabled-color: $body-secondary-color !default;
$pagination-disabled-bg: $body-secondary-bg !default;
$pagination-disabled-border-color: $border-color !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$pagination-border-radius-sm: $border-radius-sm !default;
$pagination-border-radius-lg: $border-radius-lg !default;
// scss-docs-end pagination-variables
// Placeholders
// scss-docs-start placeholders
$placeholder-opacity-max: .5 !default;
$placeholder-opacity-min: .2 !default;
// scss-docs-end placeholders
// Cards
// scss-docs-start card-variables
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-title-color: null !default;
$card-subtitle-color: null !default;
$card-border-width: $border-width !default;
$card-border-color: $border-color-translucent !default;
$card-border-radius: $border-radius !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($body-color, .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $body-bg !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
// Accordion
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default;
$accordion-bg: $body-bg !default;
$accordion-border-width: $border-width !default;
$accordion-border-color: $border-color !default;
$accordion-border-radius: $border-radius !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
$accordion-body-padding-x: $accordion-padding-x !default;
$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
$accordion-button-color: $body-color !default;
$accordion-button-bg: $accordion-bg !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg: $primary-bg-subtle !default;
$accordion-button-active-color: $primary-text-emphasis !default;
$accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $body-color !default;
$accordion-icon-active-color: $primary-text-emphasis !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(-180deg) !default;
$accordion-button-icon: url("data:image/svg+xml,") !default;
$accordion-button-active-icon: url("data:image/svg+xml,") !default;
// scss-docs-end accordion-variables
// Tooltips
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $body-bg !default;
$tooltip-bg: $body-emphasis-color !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default;
$tooltip-margin: null !default; // TODO: remove this in v6
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
// fusv-disable
$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable
// scss-docs-end tooltip-variables
// Form tooltips must come after regular tooltips
// scss-docs-start tooltip-feedback-variables
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
$form-feedback-tooltip-font-size: $tooltip-font-size !default;
$form-feedback-tooltip-line-height: null !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-end tooltip-feedback-variables
// Popovers
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
$popover-bg: $body-bg !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: $border-color-translucent !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: $box-shadow !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: $body-secondary-bg !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
$popover-body-color: $body-color !default;
$popover-body-padding-y: $spacer !default;
$popover-body-padding-x: $spacer !default;
$popover-arrow-width: 1rem !default;
$popover-arrow-height: .5rem !default;
// scss-docs-end popover-variables
// fusv-disable
// Deprecated in Bootstrap 5.2.0 for CSS variables
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: $border-color-translucent !default;
// fusv-enable
// Toasts
// scss-docs-start toast-variables
$toast-max-width: 350px !default;
$toast-padding-x: .75rem !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($body-bg, .85) !default;
$toast-border-width: $border-width !default;
$toast-border-color: $border-color-translucent !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $body-secondary-color !default;
$toast-header-background-color: rgba($body-bg, .85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
// Badges
// scss-docs-start badge-variables
$badge-font-size: .75em !default;
$badge-font-weight: $font-weight-bold !default;
$badge-color: $white !default;
$badge-padding-y: .35em !default;
$badge-padding-x: .65em !default;
$badge-border-radius: $border-radius !default;
// scss-docs-end badge-variables
// Modals
// scss-docs-start modal-variables
$modal-inner-padding: $spacer !default;
$modal-footer-margin-between: .5rem !default;
$modal-dialog-margin: .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $body-bg !default;
$modal-content-border-color: $border-color-translucent !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-header-padding-y: $modal-inner-padding !default;
$modal-header-padding-x: $modal-inner-padding !default;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
$modal-footer-bg: null !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-sm: 300px !default;
$modal-md: 500px !default;
$modal-lg: 800px !default;
$modal-xl: 1140px !default;
$modal-fade-transform: translate(0, -50px) !default;
$modal-show-transform: none !default;
$modal-transition: transform .3s ease-out !default;
$modal-scale-transform: scale(1.02) !default;
// scss-docs-end modal-variables
// Alerts
//
// Define alert colors, border radius, and padding.
// scss-docs-start alert-variables
$alert-padding-y: $spacer !default;
$alert-padding-x: $spacer !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables
// fusv-disable
$alert-bg-scale: -80% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-border-scale: -70% !default; // Deprecated in v5.2.0, to be removed in v6
$alert-color-scale: 40% !default; // Deprecated in v5.2.0, to be removed in v6
// fusv-enable
// Progress bars
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $body-secondary-bg !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: $box-shadow-inset !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// scss-docs-end progress-variables
// List group
// scss-docs-start list-group-variables
$list-group-color: $body-color !default;
$list-group-bg: $body-bg !default;
$list-group-border-color: $border-color !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
// fusv-disable
$list-group-item-bg-scale: -80% !default; // Deprecated in v5.3.0
$list-group-item-color-scale: 40% !default; // Deprecated in v5.3.0
// fusv-enable
$list-group-hover-bg: $body-tertiary-bg !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-color: color-contrast($list-group-active-bg, $component-active-color) !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $body-secondary-color !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $body-secondary-color !default;
$list-group-action-hover-color: $body-emphasis-color !default;
$list-group-action-active-color: $body-color !default;
$list-group-action-active-bg: $body-secondary-bg !default;
// scss-docs-end list-group-variables
// Image thumbnails
// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: $border-color !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: $box-shadow-sm !default;
// scss-docs-end thumbnail-variables
// Figures
// scss-docs-start figure-variables
$figure-caption-font-size: $small-font-size !default;
$figure-caption-color: $body-secondary-color !default;
// scss-docs-end figure-variables
// Breadcrumbs
// scss-docs-start breadcrumb-variables
$breadcrumb-font-size: null !default;
$breadcrumb-padding-y: 0 !default;
$breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: $body-secondary-color !default;
$breadcrumb-active-color: $body-secondary-color !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
// scss-docs-end breadcrumb-variables
// Carousel
// scss-docs-start carousel-variables
$carousel-control-color: $white !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-control-hover-opacity: .9 !default;
$carousel-control-transition: opacity .15s ease !default;
$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer: 3px !default;
$carousel-indicator-opacity: .5 !default;
$carousel-indicator-active-bg: $white !default;
$carousel-indicator-active-opacity: 1 !default;
$carousel-indicator-transition: opacity .6s ease !default;
$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;
$carousel-caption-padding-y: 1.25rem !default;
$carousel-caption-spacer: 1.25rem !default;
$carousel-control-icon-width: 2rem !default;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default;
$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default;
$carousel-transition-duration: .6s !default;
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
// scss-docs-end carousel-variables
// scss-docs-start carousel-dark-variables
$carousel-dark-indicator-active-bg: $black !default;
$carousel-dark-caption-color: $black !default;
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
// scss-docs-end carousel-dark-variables
// Spinners
// scss-docs-start spinner-variables
$spinner-width: 2rem !default;
$spinner-height: $spinner-width !default;
$spinner-vertical-align: -.125em !default;
$spinner-border-width: .25em !default;
$spinner-animation-speed: .75s !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: $spinner-width-sm !default;
$spinner-border-width-sm: .2em !default;
// scss-docs-end spinner-variables
// Close
// scss-docs-start close-variables
$btn-close-width: 1em !default;
$btn-close-height: $btn-close-width !default;
$btn-close-padding-x: .25em !default;
$btn-close-padding-y: $btn-close-padding-x !default;
$btn-close-color: $black !default;
$btn-close-bg: url("data:image/svg+xml,") !default;
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
$btn-close-opacity: .5 !default;
$btn-close-hover-opacity: .75 !default;
$btn-close-focus-opacity: 1 !default;
$btn-close-disabled-opacity: .25 !default;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default;
// scss-docs-end close-variables
// Offcanvas
// scss-docs-start offcanvas-variables
$offcanvas-padding-y: $modal-inner-padding !default;
$offcanvas-padding-x: $modal-inner-padding !default;
$offcanvas-horizontal-width: 400px !default;
$offcanvas-vertical-height: 30vh !default;
$offcanvas-transition-duration: .3s !default;
$offcanvas-border-color: $modal-content-border-color !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: $body-bg !default;
$offcanvas-color: $body-color !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
// scss-docs-end offcanvas-variables
// Code
$code-font-size: $small-font-size !default;
// Amount intentionally matches mixture amount of shiny::inputPanel()
// https://github.com/rstudio/shiny/blob/4eeb4a1/inst/www/shared/shiny_scss/bootstrap.scss#L25
$code-bg: $body-emphasis-color !default;
$code-color: black !default;
$code-color-dark: white !default;
$kbd-padding-y: .1875rem !default;
$kbd-padding-x: .375rem !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: $body-bg !default;
$kbd-bg: $body-color !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
$pre-bg: $code-bg !default;
$pre-color: $body-emphasis-color !default;
$pre-line-height: $line-height-base !default;
// quarto-scss-analysis-annotation { "origin": "'mixins' section from format" }
// Toggles
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
@import "vendor/rfs";
// Deprecate
@import "mixins/deprecate";
// Helpers
@import "mixins/breakpoints";
@import "mixins/color-mode";
@import "mixins/color-scheme";
@import "mixins/image";
@import "mixins/resize";
@import "mixins/visually-hidden";
@import "mixins/reset-text";
@import "mixins/text-truncate";
// Utilities
@import "mixins/utilities";
// Components
@import "mixins/backdrop";
@import "mixins/buttons";
@import "mixins/caret";
@import "mixins/pagination";
@import "mixins/lists";
@import "mixins/forms";
@import "mixins/table-variants";
// Skins
@import "mixins/border-radius";
@import "mixins/box-shadow";
@import "mixins/gradients";
@import "mixins/transition";
// Layout
@import "mixins/clearfix";
@import "mixins/container";
@import "mixins/grid";
@mixin bslib-breakpoints-css-vars(
$breakpoint-var,
$breakpoints,
$allow-cascade: false
) {
@each $breakpoint in $breakpoints {
@if not $allow-cascade {
--#{$breakpoint-var}--#{$breakpoint}: unset;
}
@include media-breakpoint-up(#{$breakpoint}) {
&.#{$breakpoint-var}--#{$breakpoint} {
--#{$breakpoint-var}: var(--#{$breakpoint-var}--#{$breakpoint});
}
}
}
}
// Intentionally replicates Bootstrap's %heading placeholder
// https://github.com/twbs/bootstrap/blob/2c7f88/scss/_reboot.scss#L83-L96
@mixin bootstrap-heading-font-and-spacing($font-size) {
@include font-size($font-size);
margin-top: 0; // 1
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-style: $headings-font-style;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
}
@mixin bootstrap-heading($font-size) {
@include bootstrap-heading-font-and-spacing($font-size);
color: var(--#{$prefix}heading-color);
}
// quarto-scss-analysis-annotation { "origin": "'mixins' section from Quarto" }
@mixin shiny-date-range {
.input-daterange {
width: inherit;
input[type="text"] {
height: 2.4em;
width: 10em;
}
.input-group-addon {
height: auto;
padding: 0;
margin-left: -5px !important;
margin-right: -5px;
.input-group-text {
padding-top: 0;
padding-bottom: 0;
height: 100%;
}
}
}
}
@mixin shiny-text-input {
input[type="text"] {
line-height: 1;
width: inherit;
}
}
@mixin shiny-input-checkboxgroup {
.shiny-input-checkboxgroup {
> label {
margin-top: $dashboard-card-toolbar-top-margin;
}
> .shiny-options-group {
margin-top: 0;
align-items: baseline;
}
}
}
@mixin shiny-input-radiogroup {
.shiny-input-radiogroup {
> label {
margin-top: $dashboard-card-toolbar-top-margin;
}
}
.shiny-input-radiogroup > .shiny-options-group {
align-items: baseline;
margin-top: 0;
> .radio {
margin-right: 0.3em;
}
}
}
@mixin shiny-input-checkbox {
div.checkbox {
margin-bottom: 0px;
}
> .checkbox:first-child {
margin-top: $dashboard-card-toolbar-top-margin;
}
}
@mixin shiny-input-slider {
span.irs.irs--shiny {
width: 10em;
.irs-line {
top: 9px;
}
.irs-min,
.irs-max,
.irs-from,
.irs-to,
.irs-single {
top: 20px;
}
.irs-bar {
top: 8px;
}
.irs-handle {
top: 0px;
}
}
}
@mixin shiny-input-select {
.form-select {
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.shiny-input-select {
min-width: 6em;
}
}
@mixin shiny-input-container {
.shiny-input-container {
padding-bottom: 0;
margin-bottom: 0;
> * {
flex-shrink: 0;
flex-grow: 0;
}
}
.form-group.shiny-input-container:not([role="group"]) > label {
margin-bottom: 0;
}
.shiny-input-container.no-baseline {
align-items: start;
padding-top: $dashboard-card-toolbar-top-margin;
}
.shiny-input-container {
display: flex;
align-items: baseline;
label {
padding-right: 0.4em;
}
.bslib-input-switch {
margin-top: $dashboard-card-toolbar-top-margin;
}
}
}
@mixin shiny-toolbar-customizations {
@include toolbar-layout();
@include shiny-input-container();
@include shiny-text-input();
@include shiny-date-range();
@include shiny-input-slider();
@include shiny-input-checkboxgroup();
@include shiny-input-radiogroup();
@include shiny-input-select();
@include shiny-input-checkbox();
}
@mixin toolbar-layout {
.cell-output-display {
display: flex;
}
.shiny-input-container {
padding-bottom: 0.5em;
margin-bottom: 0.5em;
width: inherit;
> .checkbox:first-child {
margin-top: $dashboard-card-toolbar-top-margin;
}
}
> *:last-child {
margin-right: 0;
}
> * > * {
margin-right: 1em;
align-items: baseline;
> a {
text-decoration: none;
margin-top: auto;
margin-bottom: auto;
}
}
}
@mixin itables {
.itables {
@include media-breakpoint-down(md) {
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate {
text-align: initial;
}
div.dataTables_wrapper div.dataTables_filter {
text-align: right;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
justify-content: initial;
}
}
.dataTables_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding-top: 0;
table {
flex-shrink: 0;
}
// The buttons control (download/copy)
.dt-buttons {
margin-bottom: 0.5em;
margin-left: auto;
width: fit-content;
float: right;
&.btn-group {
background: $body-bg;
border: none;
}
.btn-secondary {
background-color: $body-bg;
background-image: none;
border: solid $border-color $border-width;
padding: 0.2em 0.7em;
}
.btn span {
font-size: 0.8em;
color: $body-color;
}
}
// The number of items (info) text
.dataTables_info {
margin-left: 0.5em;
margin-bottom: 0.5em;
@include media-breakpoint-up(md) {
font-size: 0.875em;
}
@include media-breakpoint-down(md) {
font-size: 0.8em;
}
padding-top: 0;
}
// The table filter / search
.dataTables_filter {
margin-bottom: 0.5em;
font-size: 0.875em;
input[type="search"] {
padding: 1px 5px 1px 5px;
font-size: 0.875em;
}
}
// The pagination size selector
.dataTables_length {
flex-basis: 1 1 50%;
margin-bottom: 0.5em;
font-size: 0.875em;
select {
padding: 0.4em 3em 0.4em 0.5em;
font-size: 0.875em;
margin-left: 0.2em;
margin-right: 0.2em;
}
}
// The pagination control
.dataTables_paginate {
@include media-breakpoint-up(md) {
margin-left: auto;
}
flex-shrink: 0;
ul.pagination .paginate_button .page-link {
font-size: 0.8em;
}
}
}
}
}
@mixin observable-toolbar-inputs {
form {
width: fit-content;
label {
padding-top: 0.2em;
padding-bottom: 0.2em;
width: fit-content;
}
input[type="date"] {
width: fit-content;
}
input[type="color"] {
width: 3em;
}
button {
padding: 0.4em;
}
select {
width: fit-content;
}
}
}
@mixin observable-sidebar-inputs {
form {
flex-direction: column;
align-items: start;
margin-bottom: 1em;
div[class*="oi-"][class$="-input"] {
flex-direction: column;
}
&[class*="oi-"][class$="-toggle"] {
flex-direction: row-reverse;
align-items: center;
justify-content: start;
}
input[type="range"] {
margin-top: 0.5em;
margin-right: 0.8em;
margin-left: 1em;
}
}
label {
width: fit-content;
}
}
@mixin listing-category {
display: flex;
flex-wrap: wrap;
padding-bottom: 5px;
.listing-category {
color: listing-override-value($theme-name, "category-color", $text-muted);
$val: listing-override-value($theme-name, "category-border", null);
@if $val != null {
border: $val;
} @else {
border: solid 1px $border-color;
}
border-radius: $border-radius;
text-transform: uppercase;
font-size: 0.65em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.15em;
padding-bottom: 0.15em;
cursor: pointer;
margin-right: 4px;
margin-bottom: 4px;
}
}
// Provide theme level customization of the listing inputs
@mixin input-group {
}
@mixin input-form-control {
$val: listing-override-value($theme-name, "form-background-color", null);
@if $val != null {
background-color: $val;
}
$val: listing-override-value($theme-name, "form-color", null);
@if $val != null {
color: $val;
}
}
@mixin input-group-text {
$val: listing-override-value($theme-name, "input-group-border-radius", null);
@if $val != null {
border-radius: $val;
}
$val: listing-override-value($theme-name, "input-group-border", null);
@if $val != null {
border: $val;
}
$val: listing-override-value($theme-name, "input-text-margin", null);
@if $val != null {
margin: $val;
}
$val: listing-override-value(
$theme-name,
"input-text-background-color",
null
);
@if $val != null {
background-color: $val;
}
$val: listing-override-value($theme-name, "input-text-color", null);
@if $val != null {
color: $val;
}
}
@mixin input-placeholder {
$val: listing-override-value(
$theme-name,
"input-text-placeholder-color",
null
);
@if $val != null {
::placeholder {
color: $val;
}
}
}
@mixin responsive-buttons {
display: flex;
@include media-breakpoint-up(lg) {
flex-direction: row;
column-gap: 0.8em;
row-gap: 15px;
flex-wrap: wrap;
}
@include media-breakpoint-down(lg) {
flex-direction: column;
row-gap: 1em;
width: 100%;
padding-bottom: 1.5em;
}
}
@mixin responsive-button {
@include media-breakpoint-up(lg) {
font-size: 0.8em;
padding: 0.25em 0.5em;
border-radius: 4px;
}
@include media-breakpoint-down(lg) {
font-size: 1.1em;
padding: 0.5em 0.5em;
text-align: center;
border-radius: 6px;
}
color: lighten($body-color, 20%);
text-decoration: none;
&:hover {
color: $link-color;
}
border: solid 1px;
i.bi {
margin-right: 0.15em;
}
}
@mixin image-shapes {
img.round {
border-radius: 50%;
}
img.rounded {
border-radius: 10px;
}
}
@mixin body-secondary {
@if variable-exists(body-secondary) {
color: $body-secondary;
} @else {
color: theme-dim($body-color, 25%);
}
}
@mixin page-columns {
display: grid;
gap: 0;
}
@mixin column-spanning-element {
table {
background: $body-bg;
}
}
// GRID CASCADE
$grid-body-column-max: $grid-body-width !default;
$grid-body-column-min: quarto-math.min(500px, $grid-body-column-max) !default;
// Margin variables
$grid-page-gutter: $grid-column-gutter-width !default;
$grid-page-gutter-start: $grid-page-gutter !default;
$grid-page-gutter-end: $grid-page-gutter !default;
$grid-body-gutter: $grid-column-gutter-width !default;
$grid-body-gutter-start: $grid-body-gutter !default;
$grid-body-gutter-end: $grid-body-gutter !default;
/* FLOATING GRID */
$grid-page-gutter-float: 5fr !default;
$grid-float-sidebar-width: $grid-sidebar-width !default;
$grid-float-margin-width: $grid-margin-width !default;
/* Float Wide Default Grid */
// Margins
$grid-float-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-wide-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-wide-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-wide-margin-gutter: $grid-page-gutter-float !default;
// Sidebars
$grid-float-wide-sidebar-width: $grid-float-sidebar-width !default;
$grid-float-wide-sidebar-seg1: minmax(
#{0.1 * $grid-float-wide-sidebar-width},
#{0.2 * $grid-float-wide-sidebar-width}
) !default;
$grid-float-wide-sidebar-seg2: minmax(
#{0.2 * $grid-float-wide-sidebar-width},
#{0.6 * $grid-float-wide-sidebar-width}
) !default;
$grid-float-wide-sidebar-seg3: minmax(
#{0.1 * $grid-float-wide-sidebar-width},
#{0.2 * $grid-float-wide-sidebar-width}
) !default;
// Margins
$grid-float-wide-margin-width: $grid-float-margin-width !default;
$grid-float-wide-margin-seg3: minmax(
#{0.1 * $grid-float-wide-margin-width},
#{0.2 * $grid-float-wide-margin-width}
) !default;
$grid-float-wide-margin-seg2: minmax(
#{0.2 * $grid-float-wide-margin-width},
#{0.6 * $grid-float-wide-margin-width}
) !default;
$grid-float-wide-margin-seg1: minmax(
#{0.1 * $grid-float-wide-margin-width},
#{0.2 * $grid-float-wide-margin-width}
) !default;
// Body
$grid-float-wide-body-column-min: $grid-body-column-min !default;
$grid-float-wide-body-column-max: $grid-body-column-max !default;
$grid-float-wide-body: minmax(
$grid-float-wide-body-column-min,
calc(
#{$grid-float-wide-body-column-max} - #{$grid-float-wide-page-gutter-start +
$grid-float-wide-page-gutter-end}
)
) !default;
/* Float Wide Slim Content Grid */
// Margins
$grid-float-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-wide-slim-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-wide-slim-margin-gutter: $grid-page-gutter-float !default;
// Sidebars
$grid-float-wide-slim-sidebar-width: $grid-float-sidebar-width !default;
$grid-float-wide-slim-sidebar-seg1: 0.2 * $grid-float-wide-slim-sidebar-width !default;
$grid-float-wide-slim-sidebar-seg2: minmax(
#{0.2 * $grid-float-wide-slim-sidebar-width},
#{0.6 * $grid-float-wide-slim-sidebar-width}
) !default;
$grid-float-wide-slim-sidebar-seg3: 0.2 * $grid-float-wide-slim-sidebar-width !default;
// Margins
$grid-float-wide-slim-margin-width: $grid-float-margin-width !default;
$grid-float-wide-slim-margin-seg3: 0.2 * $grid-float-wide-slim-margin-width !default;
$grid-float-wide-slim-margin-seg2: minmax(
#{0.2 * $grid-float-wide-slim-margin-width},
#{0.6 * $grid-float-wide-slim-margin-width}
) !default;
$grid-float-wide-slim-margin-seg1: 0.2 * $grid-float-wide-slim-margin-width !default;
// Body
$grid-float-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
$grid-float-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
$grid-float-wide-slim-body: minmax(
$grid-float-wide-slim-body-column-min,
calc(
#{$grid-float-wide-slim-body-column-max} - #{$grid-float-wide-slim-page-gutter-start +
$grid-float-wide-slim-page-gutter-end}
)
) !default;
/* Float Wide Full Grid */
// Margins
$grid-float-wide-full-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-wide-full-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-wide-full-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-wide-full-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-wide-full-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-wide-full-margin-gutter: $grid-page-gutter-float !default;
// Sidebars
$grid-float-wide-full-sidebar-width: $grid-float-sidebar-width !default;
$grid-float-wide-full-sidebar-seg1: 0.2 * $grid-float-wide-full-sidebar-width !default;
$grid-float-wide-full-sidebar-seg2: minmax(
#{0.2 * $grid-float-wide-full-sidebar-width},
#{0.6 * $grid-float-wide-full-sidebar-width}
) !default;
$grid-float-wide-full-sidebar-seg3: 0.2 * $grid-float-wide-full-sidebar-width !default;
// Margins
$grid-float-wide-full-margin-width: $grid-float-margin-width !default;
$grid-float-wide-full-margin-seg3: 0.2 * $grid-float-wide-full-margin-width !default;
$grid-float-wide-full-margin-seg2: minmax(
#{0.2 * $grid-float-wide-full-margin-width},
#{0.6 * $grid-float-wide-full-margin-width}
) !default;
$grid-float-wide-full-margin-seg1: 0.2 * $grid-float-wide-full-margin-width !default;
// Body
$grid-float-wide-full-body-column-min: $grid-body-column-min !default;
$grid-float-wide-full-body-column-max: $grid-body-column-max !default;
$grid-float-wide-full-body: minmax(
$grid-float-wide-full-body-column-min,
calc(
#{$grid-float-wide-full-body-column-max} - #{$grid-float-wide-full-page-gutter-start +
$grid-float-wide-full-page-gutter-end}
)
) !default;
/* Float Wide Listing Grid */
// Margins
$grid-float-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-wide-listing-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-wide-listing-margin-gutter: $grid-page-gutter-float !default;
// Sidebars
$grid-float-wide-listing-sidebar-width: $grid-float-sidebar-width !default;
$grid-float-wide-listing-sidebar-seg1: minmax(
#{0.1 * $grid-float-wide-listing-sidebar-width},
#{0.2 * $grid-float-wide-listing-sidebar-width}
) !default;
$grid-float-wide-listing-sidebar-seg2: minmax(
#{0.2 * $grid-float-wide-listing-sidebar-width},
#{0.6 * $grid-float-wide-listing-sidebar-width}
) !default;
$grid-float-wide-listing-sidebar-seg3: minmax(
#{0.1 * $grid-float-wide-listing-sidebar-width},
#{0.2 * $grid-float-wide-listing-sidebar-width}
) !default;
// Margins
$grid-float-wide-listing-margin-width: $grid-float-margin-width !default;
$grid-float-wide-listing-margin-seg3: minmax(
#{0.1 * $grid-float-wide-listing-margin-width},
#{0.2 * $grid-float-wide-listing-margin-width}
) !default;
$grid-float-wide-listing-margin-seg2: minmax(
#{0.2 * $grid-float-wide-listing-margin-width},
#{0.6 * $grid-float-wide-listing-margin-width}
) !default;
$grid-float-wide-listing-margin-seg1: minmax(
#{0.1 * $grid-float-wide-listing-margin-width},
#{0.2 * $grid-float-wide-listing-margin-width}
) !default;
// Body
$grid-float-wide-listing-body-column-min: $grid-body-column-min !default;
$grid-float-wide-listing-body-column-max: $grid-body-column-max !default;
$grid-float-wide-listing-body: minmax(
$grid-float-wide-listing-body-column-min,
calc(
#{$grid-float-wide-listing-body-column-max} - #{$grid-float-wide-listing-page-gutter-start +
$grid-float-wide-listing-page-gutter-end}
)
) !default;
/* Float Mid Default Grid */
// Margins
$grid-float-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-mid-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-float-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-mid-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-mid-margin-gutter: $grid-page-gutter-float !default;
// No sidebar, only margins
$grid-float-mid-margin-width: $grid-float-margin-width !default;
$grid-float-mid-margin-seg3: 0.2 * $grid-float-mid-margin-width !default;
$grid-float-mid-margin-seg2: minmax(
#{0.3 * $grid-float-mid-margin-width},
#{0.6 * $grid-float-mid-margin-width}
) !default;
$grid-float-mid-margin-seg1: 0.1 * $grid-float-mid-margin-width !default;
// Body
$grid-float-mid-body-column-min: $grid-body-column-min !default;
$grid-float-mid-body-column-max: $grid-body-column-max - 50px !default;
$grid-float-mid-body: minmax(
$grid-float-mid-body-column-min,
calc(
#{$grid-float-mid-body-column-max} - #{$grid-float-mid-page-gutter-start + $grid-float-mid-page-gutter-end}
)
) !default;
/* Float Mid Slim Content Grid */
// Margins
$grid-float-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-mid-slim-body-gutter-start: 2 *
quarto-math.div($grid-body-gutter-start, 3) !default;
$grid-float-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-mid-slim-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-mid-slim-margin-gutter: 0.8 * $grid-page-gutter-float !default;
// No sidebar, only margins
$grid-float-mid-slim-margin-width: $grid-float-margin-width !default;
$grid-float-mid-slim-margin-seg3: 0.14 * $grid-float-mid-slim-margin-width !default;
$grid-float-mid-slim-margin-seg2: minmax(
#{0.3 * $grid-float-mid-slim-margin-width},
#{0.58 * $grid-float-mid-slim-margin-width}
) !default;
$grid-float-mid-slim-margin-seg1: 0.14 * $grid-float-mid-slim-margin-width !default;
// Body
$grid-float-mid-slim-body-column-min: $grid-body-column-min !default;
$grid-float-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
$grid-float-mid-slim-body: minmax(
$grid-float-mid-slim-body-column-min,
calc(
#{$grid-float-mid-slim-body-column-max} - #{$grid-float-mid-slim-page-gutter-start +
$grid-float-mid-slim-page-gutter-end}
)
) !default;
/* Float Mid Full Content Grid */
// Margins
$grid-float-mid-full-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-mid-full-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-mid-full-body-gutter-start: 2 *
quarto-math.div($grid-body-gutter-start, 3) !default;
$grid-float-mid-full-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-mid-full-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-mid-full-margin-gutter: 0.8 * $grid-page-gutter-float !default;
// No sidebar or margins
// Body
$grid-float-mid-full-body-column-min: $grid-body-column-min !default;
$grid-float-mid-full-body-column-max: $grid-body-column-max !default;
$grid-float-mid-full-body: minmax(
$grid-float-mid-full-body-column-min,
calc(
#{$grid-float-mid-full-body-column-max} - #{$grid-float-mid-full-page-gutter-start +
$grid-float-mid-full-page-gutter-end}
)
) !default;
/* Float Mid Listing Content Grid */
// Margins
$grid-float-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
$grid-float-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
$grid-float-mid-listing-body-gutter-start: 2 *
quarto-math.div($grid-body-gutter-start, 3) !default;
$grid-float-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
$grid-float-mid-listing-sidebar-gutter: $grid-page-gutter-float !default;
$grid-float-mid-listing-margin-gutter: 0.8 * $grid-page-gutter-float !default;
// No sidebar, only margins
$grid-float-mid-listing-margin-width: $grid-float-margin-width !default;
$grid-float-mid-listing-margin-seg3: 0.2 * $grid-float-mid-listing-margin-width !default;
$grid-float-mid-listing-margin-seg2: minmax(
#{0.3 * $grid-float-mid-listing-margin-width},
#{0.6 * $grid-float-mid-listing-margin-width}
) !default;
$grid-float-mid-listing-margin-seg1: 0.1 * $grid-float-mid-listing-margin-width !default;
// Body
$grid-float-mid-listing-body-column-min: $grid-body-column-min !default;
$grid-float-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
$grid-float-mid-listing-body: minmax(
$grid-float-mid-listing-body-column-min,
calc(
#{$grid-float-mid-listing-body-column-max} - #{$grid-float-mid-listing-page-gutter-start +
$grid-float-mid-listing-page-gutter-end}
)
) !default;
/* DOCKED GRID */
$grid-docked-sidebar-width: $grid-sidebar-width !default;
$grid-docked-margin-width: $grid-margin-width !default;
$grid-docked-body-width: $grid-body-column-max + 200px !default;
/* Docked Wide Default Grid */
// Margins
$grid-docked-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-wide-page-gutter-end: $grid-page-gutter-end !default;
$grid-docked-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-wide-margin-gutter: 5fr !default;
// Sidebars
$grid-docked-wide-sidebar-width: $grid-docked-sidebar-width !default;
$grid-docked-wide-sidebar-seg1: minmax(
#{0.2 * $grid-docked-wide-sidebar-width},
#{0.4 * $grid-docked-wide-sidebar-width}
) !default;
$grid-docked-wide-sidebar-seg2: 0.2 * $grid-docked-wide-sidebar-width !default;
$grid-docked-wide-sidebar-seg3: 0.2 * $grid-docked-wide-sidebar-width !default;
// Margins
$grid-docked-wide-margin-width: $grid-docked-margin-width !default;
$grid-docked-wide-margin-seg3: 0.2 * $grid-docked-wide-margin-width !default;
$grid-docked-wide-margin-seg2: minmax(
#{0.2 * $grid-docked-wide-margin-width},
#{0.4 * $grid-docked-wide-margin-width}
) !default;
$grid-docked-wide-margin-seg1: 0.2 * $grid-docked-wide-margin-width !default;
// Body
$grid-docked-wide-body-column-min: $grid-body-column-min !default;
$grid-docked-wide-body-column-max: $grid-docked-body-width !default;
$grid-docked-wide-body: minmax(
$grid-docked-wide-body-column-min,
calc(
#{$grid-docked-wide-body-column-max} - #{$grid-docked-wide-page-gutter-start +
$grid-docked-wide-page-gutter-end}
)
) !default;
/* Docked Slim Content Grid */
// Margins
$grid-docked-wide-slim-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-wide-slim-page-gutter-end: $grid-page-gutter-end !default;
$grid-docked-wide-slim-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-wide-slim-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-wide-slim-margin-gutter: 5fr !default;
// Sidebars
$grid-docked-wide-slim-sidebar-width: $grid-docked-sidebar-width !default;
$grid-docked-wide-slim-sidebar-seg1: minmax(
#{0.2 * $grid-docked-wide-slim-sidebar-width},
#{0.4 * $grid-docked-wide-slim-sidebar-width}
) !default;
$grid-docked-wide-slim-sidebar-seg2: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
$grid-docked-wide-slim-sidebar-seg3: 0.2 * $grid-docked-wide-slim-sidebar-width !default;
// Margins
$grid-docked-wide-slim-margin-width: $grid-docked-margin-width !default;
$grid-docked-wide-slim-margin-seg3: 0.2 * $grid-docked-wide-slim-margin-width !default;
$grid-docked-wide-slim-margin-seg2: minmax(
#{0 * $grid-docked-wide-slim-margin-width},
#{0.8 * $grid-docked-wide-slim-margin-width}
) !default;
$grid-docked-wide-slim-margin-seg1: 0.2 * $grid-docked-wide-slim-margin-width !default;
// Body
$grid-docked-wide-slim-body-column-min: $grid-body-column-min - 50px !default;
$grid-docked-wide-slim-body-column-max: $grid-body-column-max - 50px !default;
$grid-docked-wide-slim-body: minmax(
$grid-docked-wide-slim-body-column-min,
calc(
#{$grid-docked-wide-slim-body-column-max} - #{$grid-docked-wide-slim-page-gutter-start +
$grid-docked-wide-slim-page-gutter-end}
)
) !default;
/* Docked Full Content Grid */
// Margins
$grid-docked-wide-full-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-wide-full-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-wide-full-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-wide-full-margin-gutter: 5fr !default;
$grid-docked-wide-full-page-gutter-end: $grid-page-gutter-end !default;
// Sidebars
$grid-docked-wide-full-sidebar-width: $grid-docked-sidebar-width !default;
$grid-docked-wide-full-sidebar-seg1: minmax(
#{0.2 * $grid-docked-wide-full-sidebar-width},
#{0.4 * $grid-docked-wide-full-sidebar-width}
) !default;
$grid-docked-wide-full-sidebar-seg2: 0.2 * $grid-docked-wide-full-sidebar-width !default;
$grid-docked-wide-full-sidebar-seg3: 0.2 * $grid-docked-wide-full-sidebar-width !default;
// No Margins
// Body
$grid-docked-wide-full-body-column-min: $grid-body-column-min !default;
$grid-docked-wide-full-body-column-max: $grid-docked-body-width !default;
$grid-docked-wide-full-body: minmax(
$grid-docked-wide-full-body-column-min,
calc(
#{$grid-docked-wide-full-body-column-max} - #{$grid-docked-wide-full-page-gutter-start +
$grid-docked-wide-full-page-gutter-end}
)
) !default;
/* Docked Listing Grid */
// Margins
$grid-docked-wide-listing-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-wide-listing-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-wide-listing-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-wide-listing-margin-gutter: 5fr !default;
$grid-docked-wide-listing-page-gutter-end: $grid-page-gutter-end !default;
// Sidebars
$grid-docked-wide-listing-sidebar-width: $grid-docked-sidebar-width !default;
$grid-docked-wide-listing-sidebar-seg1: minmax(
#{0.2 * $grid-docked-wide-listing-sidebar-width},
#{0.4 * $grid-docked-wide-listing-sidebar-width}
) !default;
$grid-docked-wide-listing-sidebar-seg2: 0.2 *
$grid-docked-wide-listing-sidebar-width !default;
$grid-docked-wide-listing-sidebar-seg3: 0.2 *
$grid-docked-wide-listing-sidebar-width !default;
// Margins
$grid-docked-wide-listing-margin-width: $grid-docked-margin-width !default;
$grid-docked-wide-listing-margin-seg3: 0.2 *
$grid-docked-wide-listing-margin-width !default;
$grid-docked-wide-listing-margin-seg2: minmax(
#{0 * $grid-docked-wide-listing-margin-width},
#{0.8 * $grid-docked-wide-listing-margin-width}
) !default;
$grid-docked-wide-listing-margin-seg1: 0.2 *
$grid-docked-wide-listing-margin-width !default;
// Body
$grid-docked-wide-listing-body-column-min: $grid-body-column-min !default;
$grid-docked-wide-listing-body-column-max: $grid-docked-body-width !default;
$grid-docked-wide-listing-body: minmax(
$grid-docked-wide-listing-body-column-min,
calc(
#{$grid-docked-wide-listing-body-column-max} - #{$grid-docked-wide-listing-page-gutter-start +
$grid-docked-wide-listing-page-gutter-end}
)
) !default;
/* Docked Mid Default Grid */
// Margins
$grid-docked-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-mid-margin-gutter: 5fr !default;
$grid-docked-mid-page-gutter-end: $grid-page-gutter-end !default;
// No sidebar, only margins
$grid-docked-mid-margin-width: $grid-docked-margin-width !default;
$grid-docked-mid-margin-seg3: 0.2 * $grid-docked-mid-margin-width !default;
$grid-docked-mid-margin-seg2: minmax(
#{0.1 * $grid-docked-mid-margin-width},
#{0.2 * $grid-docked-mid-margin-width}
) !default;
$grid-docked-mid-margin-seg1: 0.2 * $grid-docked-mid-margin-width !default;
// Body
$grid-docked-mid-body-column-min: $grid-body-column-min !default;
$grid-docked-mid-body-column-max: $grid-body-column-max - 50px !default;
$grid-docked-mid-body: minmax(
$grid-docked-mid-body-column-min,
calc(
#{$grid-docked-mid-body-column-max} - #{$grid-docked-mid-page-gutter-start +
$grid-docked-mid-page-gutter-end}
)
) !default;
/* Docked Mid Slim Content Grid */
// Margins
$grid-docked-mid-slim-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-mid-slim-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-mid-slim-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-mid-slim-margin-gutter: 5fr !default;
$grid-docked-mid-slim-page-gutter-end: $grid-page-gutter-end !default;
// No sidebar, only margins
$grid-docked-mid-slim-margin-width: $grid-docked-margin-width !default;
$grid-docked-mid-slim-margin-seg3: 0.2 * $grid-docked-mid-slim-margin-width !default;
$grid-docked-mid-slim-margin-seg2: minmax(
#{0.1 * $grid-docked-mid-slim-margin-width},
#{0.2 * $grid-docked-mid-slim-margin-width}
) !default;
$grid-docked-mid-slim-margin-seg1: 0.2 * $grid-docked-mid-slim-margin-width !default;
// Body
$grid-docked-mid-slim-body-column-min: $grid-body-column-min !default;
$grid-docked-mid-slim-body-column-max: $grid-body-column-max - 50px !default;
$grid-docked-mid-slim-body: minmax(
$grid-docked-mid-slim-body-column-min,
calc(
#{$grid-docked-mid-slim-body-column-max} - #{$grid-docked-mid-slim-page-gutter-start +
$grid-docked-mid-slim-page-gutter-end}
)
) !default;
/* Docked Mid Full Content Grid */
// Margins
$grid-docked-mid-full-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-mid-full-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-mid-full-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-mid-full-margin-gutter: 5fr !default;
$grid-docked-mid-full-page-gutter-end: $grid-page-gutter-end !default;
// No sidebar or margins
// Body
$grid-docked-mid-full-body-column-min: $grid-body-column-min !default;
$grid-docked-mid-full-body-column-max: $grid-docked-body-width !default;
$grid-docked-mid-full-body: minmax(
$grid-docked-mid-full-body-column-min,
calc(
#{$grid-docked-mid-full-body-column-max} - #{$grid-docked-mid-full-page-gutter-start +
$grid-docked-mid-full-page-gutter-end}
)
) !default;
/* Float Mid Listing Content Grid */
// Margins
$grid-docked-mid-listing-page-gutter-start: $grid-page-gutter-start !default;
$grid-docked-mid-listing-body-gutter-start: $grid-body-gutter-start !default;
$grid-docked-mid-listing-body-gutter-end: $grid-body-gutter-end !default;
$grid-docked-mid-listing-margin-gutter: $grid-page-gutter-float !default;
$grid-docked-mid-listing-page-gutter-end: $grid-page-gutter-end !default;
// No sidebar, only margins
$grid-docked-mid-listing-margin-width: $grid-docked-margin-width !default;
$grid-docked-mid-listing-margin-seg3: 0.2 *
$grid-docked-mid-listing-margin-width !default;
$grid-docked-mid-listing-margin-seg2: minmax(
#{0.3 * $grid-docked-mid-listing-margin-width},
#{0.6 * $grid-docked-mid-listing-margin-width}
) !default;
$grid-docked-mid-listing-margin-seg1: 0.1 *
$grid-docked-mid-listing-margin-width !default;
// Body
$grid-docked-mid-listing-body-column-min: $grid-body-column-min !default;
$grid-docked-mid-listing-body-column-max: $grid-body-column-max - 50px !default;
$grid-docked-mid-listing-body: minmax(
$grid-docked-mid-listing-body-column-min,
calc(
#{$grid-docked-mid-listing-body-column-max} - #{$grid-docked-mid-listing-page-gutter-start +
$grid-docked-mid-listing-page-gutter-end}
)
) !default;
/* DEFAULT (HTML PAGE, NOT IN WEBSITE) GRID */
$grid-default-sidebar-width: $grid-sidebar-width !default;
$grid-default-margin-width: $grid-margin-width !default;
$grid-default-body-width: $grid-body-column-max + 50px !default;
/* Default Wide Grid */
// Margins
$grid-default-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-wide-sidebar-gutter: 5fr !default;
$grid-default-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-wide-margin-gutter: 5fr !default;
$grid-default-wide-page-gutter-end: $grid-page-gutter-end !default;
// Sidebars
$grid-default-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-wide-sidebar-seg1: 0.14 * $grid-default-wide-sidebar-width !default;
$grid-default-wide-sidebar-seg2: 0.14 * $grid-default-wide-sidebar-width !default;
// Margins
$grid-default-wide-margin-width: $grid-default-margin-width !default;
$grid-default-wide-margin-seg3: 0.14 * $grid-default-wide-margin-width !default;
$grid-default-wide-margin-seg2: minmax(
#{0.3 * $grid-default-wide-margin-width},
#{0.58 * $grid-default-wide-margin-width}
) !default;
$grid-default-wide-margin-seg1: 0.14 * $grid-default-wide-margin-width !default;
// Body
$grid-default-wide-body-column-min: $grid-body-column-min !default;
$grid-default-wide-body-column-max: $grid-default-body-width !default;
$grid-default-wide-body: minmax(
$grid-default-wide-body-column-min,
calc(
#{$grid-default-wide-body-column-max} - #{$grid-default-wide-page-gutter-start +
$grid-default-wide-page-gutter-end}
)
) !default;
/* Default Mid Grid */
// Margins
$grid-default-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-mid-sidebar-gutter: 5fr !default;
$grid-default-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-mid-margin-gutter: 5fr !default;
$grid-default-mid-page-gutter-end: $grid-page-gutter-end !default;
// Sidebars
$grid-default-mid-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-mid-sidebar-seg1: 0.14 * $grid-default-mid-sidebar-width !default;
$grid-default-mid-sidebar-seg2: 0.14 * $grid-default-mid-sidebar-width !default;
// Margins
$grid-default-mid-margin-width: $grid-default-margin-width !default;
$grid-default-mid-margin-seg3: 0.14 * $grid-default-mid-margin-width !default;
$grid-default-mid-margin-seg2: minmax(
#{0.3 * $grid-default-mid-margin-width},
#{0.58 * $grid-default-mid-margin-width}
) !default;
$grid-default-mid-margin-seg1: 0.14 * $grid-default-mid-margin-width !default;
// Body
$grid-default-mid-body-column-min: $grid-body-column-min !default;
$grid-default-mid-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-mid-body: minmax(
$grid-default-mid-body-column-min,
calc(
#{$grid-default-mid-body-column-max} - #{$grid-default-mid-page-gutter-start +
$grid-default-mid-page-gutter-end}
)
) !default;
/* Full Content Wide Grid */
// Margins
$grid-default-full-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-full-wide-sidebar-gutter: 5fr !default;
$grid-default-full-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-full-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-full-wide-margin-gutter: 5fr !default;
$grid-default-full-wide-page-gutter-end: $grid-page-gutter-end !default;
// Sidebars
$grid-default-full-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-full-wide-sidebar-seg1: 0.14 *
$grid-default-full-wide-sidebar-width !default;
$grid-default-full-wide-sidebar-seg2: 0.14 *
$grid-default-full-wide-sidebar-width !default;
// Margins
$grid-default-full-wide-margin-width: $grid-default-margin-width !default;
$grid-default-full-wide-margin-seg2: 0.14 * $grid-default-full-wide-margin-width !default;
$grid-default-full-wide-margin-seg1: 0.14 * $grid-default-full-wide-margin-width !default;
// Body
$grid-default-full-wide-body-column-min: $grid-body-column-min !default;
$grid-default-full-wide-body-column-max: $grid-default-body-width !default;
$grid-default-full-wide-body: minmax(
$grid-default-full-wide-body-column-min,
calc(
#{$grid-default-full-wide-body-column-max} - #{$grid-default-full-wide-page-gutter-start +
$grid-default-full-wide-page-gutter-end}
)
) !default;
/* Full Content Mid Grid */
// Margins
$grid-default-full-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-full-mid-sidebar-gutter: 5fr !default;
$grid-default-full-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-full-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-full-mid-margin-gutter: 5fr !default;
$grid-default-full-mid-page-gutter-end: $grid-page-gutter-end !default;
// No margins or sidebars
// Body
$grid-default-full-mid-body-column-min: $grid-body-column-min !default;
$grid-default-full-mid-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-full-mid-body: minmax(
$grid-default-full-mid-body-column-min,
calc(
#{$grid-default-full-mid-body-column-max} - #{$grid-default-full-mid-page-gutter-start +
$grid-default-full-mid-page-gutter-end}
)
) !default;
/* Listing Wide Grid */
// Margins
$grid-default-listing-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-listing-wide-sidebar-gutter: 5fr !default;
$grid-default-listing-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-listing-wide-body-gutter-end: 2 * $grid-body-gutter-end !default;
$grid-default-listing-wide-margin-gutter: 1fr !default;
$grid-default-listing-wide-page-gutter-end: $grid-page-gutter-end !default;
// Sidebars
$grid-default-listing-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-listing-wide-sidebar-seg1: minmax(
#{0.2 * $grid-default-listing-wide-sidebar-width},
#{0.4 * $grid-default-listing-wide-sidebar-width}
) !default;
$grid-default-listing-wide-sidebar-seg2: 0.2 *
$grid-default-listing-wide-sidebar-width !default;
$grid-default-listing-wide-sidebar-seg3: 0.2 *
$grid-default-listing-wide-sidebar-width !default;
// Margins
$grid-default-listing-wide-margin-width: $grid-default-margin-width !default;
$grid-default-listing-wide-sidebar-seg3: 0.2 *
$grid-default-listing-wide-margin-width !default;
$grid-default-listing-wide-margin-seg2: minmax(
#{0 * $grid-default-listing-wide-margin-width},
#{1 * $grid-default-listing-wide-margin-width}
) !default;
$grid-default-listing-wide-margin-seg1: 0.2 *
$grid-default-listing-wide-margin-width !default;
// Body
$grid-default-listing-wide-body-column-min: $grid-body-column-min !default;
$grid-default-listing-wide-body-column-max: $grid-default-body-width !default;
$grid-default-listing-wide-body: minmax(
$grid-default-listing-wide-body-column-min,
calc(
#{$grid-default-listing-wide-body-column-max} - #{$grid-default-listing-wide-page-gutter-start +
$grid-default-listing-wide-page-gutter-end}
)
) !default;
/* Listing Mid Grid */
// Margins
$grid-default-listing-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-listing-mid-sidebar-gutter: 5fr !default;
$grid-default-listing-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-listing-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-listing-mid-margin-gutter: 5fr !default;
$grid-default-listing-mid-page-gutter-end: $grid-page-gutter-end !default;
// No margins or sidebars
// Body
$grid-default-listing-mid-body-column-min: $grid-body-column-min !default;
$grid-default-listing-mid-body-column-max: $grid-default-body-width + 400px !default;
$grid-default-listing-mid-body: minmax(
$grid-default-listing-mid-body-column-min,
calc(
#{$grid-default-listing-mid-body-column-max} - #{$grid-default-listing-mid-page-gutter-start +
$grid-default-listing-mid-page-gutter-end}
)
) !default;
/* Slim Wide Grid */
// Margins
$grid-default-slim-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-slim-wide-sidebar-gutter: 5fr !default;
$grid-default-slim-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-slim-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-slim-wide-margin-gutter: 5fr !default;
$grid-default-slim-wide-page-gutter-end: $grid-page-gutter-end !default;
// Sidebars
$grid-default-slim-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-slim-wide-sidebar-seg1: 0.14 *
$grid-default-slim-wide-sidebar-width !default;
$grid-default-slim-wide-sidebar-seg2: 0.14 *
$grid-default-slim-wide-sidebar-width !default;
// Margins
$grid-default-slim-wide-margin-width: $grid-default-margin-width !default;
$grid-default-slim-wide-sidebar-seg3: 0.2 * $grid-default-slim-wide-margin-width !default;
$grid-default-slim-wide-margin-seg2: minmax(
#{0 * $grid-default-slim-wide-margin-width},
#{0.8 * $grid-default-slim-wide-margin-width}
) !default;
$grid-default-slim-wide-margin-seg1: 0.2 * $grid-default-slim-wide-margin-width !default;
// Body
$grid-default-slim-wide-body-column-min: $grid-body-column-min !default;
$grid-default-slim-wide-body-column-max: $grid-default-body-width !default;
$grid-default-slim-wide-body: minmax(
$grid-default-slim-wide-body-column-min,
calc(
#{$grid-default-slim-wide-body-column-max} - #{$grid-default-slim-wide-page-gutter-start +
$grid-default-slim-wide-page-gutter-end}
)
) !default;
/* Slim Mid Grid */
// Margins
$grid-default-slim-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-slim-mid-sidebar-gutter: 5fr !default;
$grid-default-slim-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-slim-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-slim-mid-margin-gutter: 5fr !default;
$grid-default-slim-mid-page-gutter-end: $grid-page-gutter-end !default;
// Margins
$grid-default-slim-mid-margin-width: $grid-default-margin-width !default;
$grid-default-slim-mid-margin-seg3: 0.14 * $grid-default-slim-mid-margin-width !default;
$grid-default-slim-mid-margin-seg2: minmax(
#{0.3 * $grid-default-slim-mid-margin-width},
#{0.58 * $grid-default-slim-mid-margin-width}
) !default;
$grid-default-slim-mid-margin-seg1: 0.14 * $grid-default-slim-mid-margin-width !default;
// Body
$grid-default-slim-mid-body-column-min: $grid-body-column-min !default;
$grid-default-slim-mid-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-slim-mid-body: minmax(
$grid-default-slim-mid-body-column-min,
calc(
#{$grid-default-slim-mid-body-column-max} - #{$grid-default-slim-mid-page-gutter-start +
$grid-default-slim-mid-page-gutter-end}
)
) !default;
/* TOC Wide Grid */
// Margins
$grid-default-toc-wide-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-toc-wide-sidebar-gutter: 5fr !default;
$grid-default-toc-wide-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-toc-wide-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-toc-wide-margin-gutter: 5fr !default;
$grid-default-toc-wide-page-gutter-end: $grid-page-gutter-end !default;
// Sidebars
$grid-default-toc-wide-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-toc-wide-sidebar-seg1: 0.14 * $grid-default-toc-wide-sidebar-width !default;
$grid-default-toc-wide-sidebar-seg2: minmax(
#{0 * $grid-default-toc-wide-sidebar-width},
#{0.7 * $grid-default-toc-wide-sidebar-width}
) !default;
$grid-default-toc-wide-sidebar-seg3: 0.14 * $grid-default-toc-wide-sidebar-width !default;
// Margins
$grid-default-toc-wide-margin-width: $grid-default-margin-width !default;
$grid-default-toc-wide-margin-seg3: 0.2 * $grid-default-toc-wide-margin-width !default;
$grid-default-toc-wide-margin-seg2: minmax(
#{0 * $grid-default-toc-wide-margin-width},
#{0.8 * $grid-default-toc-wide-margin-width}
) !default;
$grid-default-toc-wide-margin-seg1: 0.2 * $grid-default-toc-wide-margin-width !default;
// Body
$grid-default-toc-wide-body-column-min: $grid-body-column-min - 50px !default;
$grid-default-toc-wide-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-toc-wide-body: minmax(
$grid-default-toc-wide-body-column-min,
calc(
#{$grid-default-toc-wide-body-column-max} - #{$grid-default-toc-wide-page-gutter-start +
$grid-default-toc-wide-page-gutter-end}
)
) !default;
/* TOC Mid Grid */
// Margins
$grid-default-toc-mid-page-gutter-start: $grid-page-gutter-start !default;
$grid-default-toc-mid-sidebar-gutter: 5fr !default;
$grid-default-toc-mid-body-gutter-start: $grid-body-gutter-start !default;
$grid-default-toc-mid-body-gutter-end: $grid-body-gutter-end !default;
$grid-default-toc-mid-margin-gutter: 5fr !default;
$grid-default-toc-mid-page-gutter-end: $grid-page-gutter-end !default;
// Margins
$grid-default-toc-mid-sidebar-width: $grid-default-sidebar-width !default;
$grid-default-toc-mid-sidebar-seg1: 0.14 * $grid-default-toc-mid-sidebar-width !default;
$grid-default-toc-mid-sidebar-seg2: minmax(
#{0 * $grid-default-toc-mid-sidebar-width},
#{0.58 * $grid-default-toc-mid-sidebar-width}
) !default;
$grid-default-toc-mid-sidebar-seg3: 0.14 * $grid-default-toc-mid-sidebar-width !default;
// Body
$grid-default-toc-mid-body-column-min: $grid-body-column-min - 50px !default;
$grid-default-toc-mid-body-column-max: $grid-default-body-width - 50px !default;
$grid-default-toc-mid-body: minmax(
$grid-default-toc-mid-body-column-min,
calc(
#{$grid-default-toc-mid-body-column-max} - #{$grid-default-toc-mid-page-gutter-start +
$grid-default-toc-mid-page-gutter-end}
)
) !default;
// Floating Grid Definitions
@mixin page-columns-float-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-float-wide-page-gutter-start
[screen-start-inset] $grid-float-wide-sidebar-gutter
[page-start] $grid-float-wide-sidebar-seg1
[page-start-inset] $grid-float-wide-sidebar-seg2
[body-start-outset] $grid-float-wide-sidebar-seg3
[body-start] $grid-float-wide-body-gutter-start
[body-content-start] $grid-float-wide-body
[body-content-end] $grid-float-wide-body-gutter-end
[body-end] $grid-float-wide-margin-seg3
[body-end-outset] $grid-float-wide-margin-seg2
[page-end-inset] $grid-float-wide-margin-seg1
[page-end] $grid-float-wide-margin-gutter
[screen-end-inset] $grid-float-wide-page-gutter-end
[screen-end];
}
@mixin page-columns-float-slimcontent-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-float-wide-slim-page-gutter-start
[screen-start-inset] $grid-float-wide-slim-sidebar-gutter
[page-start] $grid-float-wide-slim-sidebar-seg1
[page-start-inset] $grid-float-wide-slim-sidebar-seg2
[body-start-outset] $grid-float-wide-slim-sidebar-seg3
[body-start] $grid-float-wide-slim-body-gutter-start
[body-content-start] $grid-float-wide-slim-body
[body-content-end] $grid-float-wide-slim-body-gutter-end
[body-end] $grid-float-wide-slim-margin-seg3
[body-end-outset] $grid-float-wide-slim-margin-seg2
[page-end-inset] $grid-float-wide-slim-margin-seg1
[page-end] $grid-float-wide-slim-margin-gutter
[screen-end-inset] $grid-float-wide-slim-page-gutter-end
[screen-end];
}
@mixin page-columns-float-fullcontent-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-float-wide-full-page-gutter-start
[screen-start-inset] $grid-float-wide-full-sidebar-gutter
[page-start] $grid-float-wide-full-sidebar-seg1
[page-start-inset] $grid-float-wide-full-sidebar-seg2
[body-start-outset] $grid-float-wide-full-sidebar-seg3
[body-start] $grid-float-wide-full-body-gutter-start
[body-content-start] $grid-float-wide-full-body
[body-content-end] $grid-float-wide-full-body-gutter-end
[body-end body-end-outset page-end-inset page-end] $grid-float-wide-full-margin-gutter
[screen-end-inset] $grid-float-wide-full-page-gutter-end
[screen-end];
}
@mixin page-columns-float-listing-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-float-wide-listing-page-gutter-start
[screen-start-inset] $grid-float-wide-listing-sidebar-gutter
[page-start] $grid-float-wide-listing-sidebar-seg1
[page-start-inset] $grid-float-wide-listing-sidebar-seg2
[body-start-outset] $grid-float-wide-listing-sidebar-seg3
[body-start] $grid-float-wide-listing-body-gutter-start
[body-content-start] $grid-float-wide-listing-body
[body-content-end] $grid-float-wide-listing-body-gutter-end
[body-end] $grid-float-wide-listing-margin-seg3
[body-end-outset] $grid-float-wide-listing-margin-seg2
[page-end-inset] $grid-float-wide-listing-margin-seg1
[page-end] $grid-float-wide-listing-margin-gutter
[screen-end-inset] $grid-float-wide-listing-page-gutter-end
[screen-end];
}
// medium 976 down
@mixin page-columns-float-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-float-mid-page-gutter-start
[screen-start-inset] $grid-float-mid-sidebar-gutter
[page-start page-start-inset body-start-outset body-start] $grid-float-mid-body-gutter-start
[body-content-start] $grid-float-mid-body
[body-content-end] $grid-float-mid-body-gutter-end
[body-end] $grid-float-mid-margin-seg3
[body-end-outset] $grid-float-mid-margin-seg2
[page-end-inset] $grid-float-mid-margin-seg1
[page-end] $grid-float-mid-margin-gutter
[screen-end-inset] $grid-float-mid-page-gutter-end
[screen-end];
}
@mixin page-columns-float-slimcontent-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-float-mid-slim-page-gutter-start
[screen-start-inset] $grid-float-mid-slim-sidebar-gutter
[page-start page-start-inset body-start-outset body-start] $grid-float-mid-slim-body-gutter-start
[body-content-start] $grid-float-mid-slim-body
[body-content-end] $grid-float-mid-slim-body-gutter-end
[body-end] $grid-float-mid-slim-margin-seg3
[body-end-outset] $grid-float-mid-slim-margin-seg2
[page-end-inset] $grid-float-mid-slim-margin-seg1
[page-end] $grid-float-mid-slim-margin-gutter
[screen-end-inset] $grid-float-mid-slim-page-gutter-end
[screen-end];
}
@mixin page-columns-float-fullcontent-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-float-mid-full-page-gutter-start
[screen-start-inset] $grid-float-mid-full-sidebar-gutter
[page-start page-start-inset body-start-outset body-start] $grid-float-mid-full-body-gutter-start
[body-content-start] $grid-float-mid-full-body
[body-content-end]$grid-float-mid-full-body-gutter-end
[body-end body-end-outset page-end-inset page-end] $grid-float-mid-full-margin-gutter
[screen-end-inset] $grid-float-mid-full-page-gutter-end
[screen-end];
}
@mixin page-columns-float-listing-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-float-mid-listing-page-gutter-start
[screen-start-inset] $grid-float-mid-listing-sidebar-gutter
[page-start page-start-inset body-start-outset body-start] $grid-float-mid-listing-body-gutter-start
[body-content-start] $grid-float-mid-listing-body
[body-content-end] $grid-float-mid-listing-body-gutter-end
[body-end] $grid-float-mid-listing-margin-seg3
[body-end-outset] $grid-float-mid-listing-margin-seg2
[page-end-inset] $grid-float-mid-listing-margin-seg1
[page-end] $grid-float-mid-listing-margin-gutter
[screen-end-inset] $grid-float-mid-listing-page-gutter-end
[screen-end];
}
// Docked Grid Definitions
@mixin page-columns-docked-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-docked-wide-page-gutter-start
[screen-start-inset page-start] $grid-docked-wide-sidebar-seg1
[page-start-inset] $grid-docked-wide-sidebar-seg2
[body-start-outset] $grid-docked-wide-sidebar-seg3
[body-start] $grid-docked-wide-body-gutter-start
[body-content-start] $grid-docked-wide-body
[body-content-end] $grid-docked-wide-body-gutter-end
[body-end] $grid-docked-wide-margin-seg3
[body-end-outset] $grid-docked-wide-margin-seg2
[page-end-inset] $grid-docked-wide-margin-seg1
[page-end] $grid-docked-wide-margin-gutter
[screen-end-inset] $grid-docked-wide-page-gutter-end
[screen-end];
}
@mixin page-columns-docked-slimcontent-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-docked-wide-slim-page-gutter-start
[screen-start-inset page-start] $grid-docked-wide-slim-sidebar-seg1
[page-start-inset] $grid-docked-wide-slim-sidebar-seg2
[body-start-outset] $grid-docked-wide-slim-sidebar-seg3
[body-start] $grid-docked-wide-slim-body-gutter-start
[body-content-start] $grid-docked-wide-slim-body
[body-content-end] $grid-docked-wide-slim-body-gutter-end
[body-end] $grid-docked-wide-slim-margin-seg3
[body-end-outset] $grid-docked-wide-slim-margin-seg2
[page-end-inset] $grid-docked-wide-slim-margin-seg1
[page-end] $grid-docked-wide-slim-margin-gutter
[screen-end-inset] $grid-docked-wide-slim-page-gutter-end
[screen-end];
}
@mixin page-columns-docked-fullcontent-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-docked-wide-full-page-gutter-start
[screen-start-inset page-start] $grid-docked-wide-full-sidebar-seg1
[page-start-inset] $grid-docked-wide-full-sidebar-seg2
[body-start-outset] $grid-docked-wide-full-sidebar-seg3
[body-start] $grid-docked-wide-full-body-gutter-start
[body-content-start] $grid-docked-wide-full-body
[body-content-end] $grid-docked-wide-full-body-gutter-end
[body-end body-end-outset page-end-inset page-end] $grid-docked-wide-full-margin-gutter
[screen-end-inset] $grid-docked-wide-full-page-gutter-end
[screen-end];
}
@mixin page-columns-docked-listing-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-docked-wide-listing-page-gutter-start
[screen-start-inset page-start] $grid-docked-wide-listing-sidebar-seg1
[page-start-inset] $grid-docked-wide-listing-sidebar-seg2
[body-start-outset] $grid-docked-wide-listing-sidebar-seg3
[body-start] $grid-docked-wide-listing-body-gutter-start
[body-content-start] $grid-docked-wide-listing-body
[body-content-end] $grid-docked-wide-listing-body-gutter-end
[body-end] $grid-docked-wide-listing-margin-seg3
[body-end-outset] $grid-docked-wide-listing-margin-seg2
[page-end-inset] $grid-docked-wide-listing-margin-seg1
[page-end] $grid-docked-wide-listing-margin-gutter
[screen-end-inset] $grid-docked-wide-listing-page-gutter-end
[screen-end];
}
@mixin page-columns-docked-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-docked-mid-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-body
[body-content-end] $grid-docked-mid-body-gutter-end
[body-end] $grid-docked-mid-margin-seg3
[body-end-outset] $grid-docked-mid-margin-seg2
[page-end-inset] $grid-docked-mid-margin-seg1
[page-end] $grid-docked-mid-margin-gutter
[screen-end-inset] $grid-docked-mid-page-gutter-end
[screen-end];
}
@mixin page-columns-docked-slimcontent-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-docked-mid-slim-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-slim-body
[body-content-end] $grid-docked-mid-slim-body-gutter-end
[body-end] $grid-docked-mid-slim-margin-seg3
[body-end-outset] $grid-docked-mid-slim-margin-seg2
[page-end-inset] $grid-docked-mid-slim-margin-seg1
[page-end] $grid-docked-mid-slim-margin-gutter
[screen-end-inset] $grid-docked-mid-slim-page-gutter-end
[screen-end];
}
@mixin page-columns-docked-fullcontent-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-docked-mid-full-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-full-body
[body-content-end] $grid-docked-mid-full-body-gutter-end
[body-end body-end-outset page-end-inset page-end] $grid-docked-mid-full-margin-gutter
[screen-end-inset] $grid-docked-mid-full-page-gutter-end
[screen-end];
}
@mixin page-columns-docked-listing-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-docked-mid-listing-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] $grid-docked-mid-listing-body
[body-content-end] $grid-docked-mid-listing-body-gutter-start
[body-end] $grid-docked-mid-slim-margin-seg3
[body-end-outset] $grid-docked-mid-slim-margin-seg2
[page-end-inset] $grid-docked-mid-slim-margin-seg1
[page-end] $grid-docked-mid-listing-margin-gutter
[screen-end-inset] $grid-docked-mid-listing-page-gutter-end
[screen-end];
}
// Plain Grid Definitions
@mixin page-columns-default-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-wide-page-gutter-start
[screen-start-inset] $grid-default-wide-sidebar-gutter
[page-start page-start-inset] $grid-default-wide-sidebar-seg1
[body-start-outset] $grid-default-wide-sidebar-seg2
[body-start] $grid-default-wide-body-gutter-start
[body-content-start] $grid-default-wide-body
[body-content-end] $grid-default-wide-body-gutter-end
[body-end] $grid-default-wide-margin-seg3
[body-end-outset] $grid-default-wide-margin-seg2
[page-end-inset] $grid-default-wide-margin-seg1
[page-end] $grid-default-wide-margin-gutter
[screen-end-inset] $grid-default-wide-page-gutter-end
[screen-end];
}
@mixin page-columns-default-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-mid-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset] $grid-default-mid-sidebar-gutter
[body-start] $grid-default-mid-body-gutter-start
[body-content-start] $grid-default-mid-body
[body-content-end] $grid-default-mid-body-gutter-end
[body-end] $grid-default-mid-margin-seg3
[body-end-outset] $grid-default-mid-margin-seg2
[page-end-inset] $grid-default-mid-margin-seg1
[page-end] $grid-default-mid-margin-gutter
[screen-end-inset] $grid-default-mid-page-gutter-end
[screen-end];
}
// Full content grid definitions
@mixin page-columns-fullcontent-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-full-wide-page-gutter-start
[screen-start-inset] $grid-default-full-wide-sidebar-gutter
[page-start page-start-inset] $grid-default-full-wide-sidebar-seg1
[body-start-outset] $grid-default-full-wide-sidebar-seg2
[body-start] $grid-default-full-wide-body-gutter-start
[body-content-start] $grid-default-full-wide-body
[body-content-end] $grid-default-full-wide-body-gutter-end
[body-end] $grid-default-full-wide-margin-seg2
[body-end-outset] $grid-default-full-wide-margin-seg1
[page-end-inset page-end] $grid-default-full-wide-margin-gutter
[screen-end-inset] $grid-default-full-wide-page-gutter-end;
}
@mixin page-columns-fullcontent-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-full-mid-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset] $grid-default-full-mid-sidebar-gutter
[body-start] $grid-default-full-mid-body-gutter-start
[body-content-start] $grid-default-full-mid-body
[body-content-end] $grid-default-full-mid-body-gutter-end
[body-end body-end-outset page-end-inset page-end] $grid-default-full-mid-margin-gutter
[screen-end-inset] $grid-default-full-mid-page-gutter-end
[screen-end];
}
// Listing content grid definitions
@mixin page-columns-listing-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-listing-wide-page-gutter-start
[screen-start-inset page-start] $grid-default-listing-wide-sidebar-seg1
[page-start-inset] $grid-default-listing-wide-sidebar-seg2
[body-start-outset] $grid-default-listing-wide-sidebar-seg3
[body-start] $grid-default-listing-wide-body-gutter-start
[body-content-start] $grid-default-listing-wide-body
[body-content-end] $grid-default-listing-wide-body-gutter-end
[body-end] $grid-default-listing-wide-sidebar-seg3
[body-end-outset] $grid-default-listing-wide-margin-seg2
[page-end-inset] $grid-default-listing-wide-sidebar-seg1
[page-end] $grid-default-listing-wide-margin-gutter
[screen-end-inset] $grid-default-listing-wide-page-gutter-end
[screen-end];
}
@mixin page-columns-listing-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-listing-mid-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset] $grid-default-listing-mid-sidebar-gutter
[body-start] $grid-default-listing-mid-body-gutter-start
[body-content-start] $grid-default-listing-mid-body
[body-content-end body-end body-end-outset page-end-inset page-end] $grid-default-listing-mid-margin-gutter
[screen-end-inset] $grid-default-listing-mid-page-gutter-end
[screen-end];
}
// Slim content grid definitions
@mixin page-columns-slimcontent-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-slim-wide-page-gutter-start
[screen-start-inset] $grid-default-slim-wide-sidebar-gutter
[page-start page-start-inset] $grid-default-slim-wide-sidebar-seg1
[body-start-outset] $grid-default-slim-wide-sidebar-seg2
[body-start] $grid-default-slim-wide-body-gutter-start
[body-content-start] $grid-default-slim-wide-body
[body-content-end] $grid-default-slim-wide-body-gutter-end
[body-end] $grid-default-slim-wide-sidebar-seg3
[body-end-outset] $grid-default-slim-wide-margin-seg2
[page-end-inset] $grid-default-slim-wide-sidebar-seg1
[page-end] $grid-default-slim-wide-margin-gutter
[screen-end-inset] $grid-default-slim-wide-page-gutter-end
[screen-end];
}
@mixin page-columns-slimcontent-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-slim-mid-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset] $grid-default-slim-mid-sidebar-gutter
[body-start] $grid-default-slim-mid-body-gutter-start
[body-content-start] $grid-default-slim-mid-body
[body-content-end] $grid-default-slim-mid-body-gutter-end
[body-end] $grid-default-slim-mid-margin-seg3
[body-end-outset] $grid-default-slim-mid-margin-seg2
[page-end-inset] $grid-default-slim-mid-margin-seg1
[page-end] $grid-default-slim-mid-margin-gutter
[screen-end-inset] $grid-default-slim-mid-page-gutter-end
[screen-end];
}
// TOC left grid
@mixin page-columns-tocleft-wide {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-toc-wide-page-gutter-start
[screen-start-inset] $grid-default-toc-wide-sidebar-gutter
[page-start] $grid-default-toc-wide-sidebar-seg1
[page-start-inset] $grid-default-toc-wide-sidebar-seg2
[body-start-outset] $grid-default-toc-wide-sidebar-seg3
[body-start] $grid-default-toc-wide-body-gutter-start
[body-content-start] $grid-default-toc-wide-body
[body-content-end] $grid-default-toc-wide-body-gutter-end
[body-end] $grid-default-toc-wide-margin-seg3
[body-end-outset] $grid-default-toc-wide-margin-seg2
[page-end-inset] $grid-default-toc-wide-margin-seg1
[page-end] $grid-default-toc-wide-margin-gutter
[screen-end-inset] $grid-default-toc-wide-page-gutter-end
[screen-end];
}
@mixin page-columns-tocleft-mid {
@include page-columns();
grid-template-columns:
[screen-start] $grid-default-toc-mid-page-gutter-start
[screen-start-inset] $grid-default-toc-mid-sidebar-gutter
[page-start] $grid-default-toc-mid-sidebar-seg1
[page-start-inset] $grid-default-toc-mid-sidebar-seg2
[body-start-outset] $grid-default-toc-mid-sidebar-seg3
[body-start] $grid-default-toc-mid-body-gutter-start
[body-content-start] $grid-default-toc-mid-body
[body-content-end] $grid-default-toc-mid-body-gutter-end
[body-end body-end-outset page-end-inset page-end] $grid-default-toc-mid-margin-gutter
[screen-end-inset] $grid-default-toc-mid-page-gutter-end
[screen-end];
}
// Small size responsive grid
// All grids share this fully collapsed mode which hides
// the sidebar and margin
@mixin grid-template-columns-narrow {
grid-template-columns:
[screen-start] $grid-page-gutter-start
[screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(
0px,
1fr
)
[body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] $grid-page-gutter-end
[screen-end];
}
// quarto-scss-analysis-annotation { "origin": "'mixins' section from user-defined SCSS" }
// quarto-scss-analysis-annotation { "origin": "'rules' section from format" }
@import "mixins/banner";
@include bsBanner("");
// scss-docs-start import-stack
// Configuration
@import "variables-dark";
@import "maps";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "light-dark";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stack
// color-contrast() was introduced in Bootstrap 5.
// We include our own version for a few reasons:
// 1. Easily turn off warnings options(bslib.color_contrast_warnings=F)
// 2. Allow Bootstrap 3 & 4 to use color-contrast() in variable definitions
// 3. Allow Bootstrap 3 & 4 to use bs_get_contrast()
// Also note that color-contrast() lives in sass-utils since projects like Quarto
// and flexdashboard currently assume it exists there....
@import "../sass-utils/color-contrast.scss";
@function is-css-variable($x) {
@if (type-of($x) != string) {
@return false;
} @else {
@return str-slice($x, 1, 6) == 'var(--';
}
}
@import "spacer";
@import "tab-fill";
@import "color-utilities";
.tab-content {
// Workaround for pkgdown's CSS to make tab-pane all a consistent height
// https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L342-L355
>.tab-pane.html-fill-container {
display: none;
}
// Take precedence over Bootstrap's `display:block` rule
>.active.html-fill-container {
display: flex;
}
// Another workaround for pkgdown adding extra padding we didn't ask for
// https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L335-L337
&.html-fill-container {
padding: 0;
}
}
$spacer: 1rem !default;
:root {
// Controls default spacing in layout containers (e.g, layout_columns())
--bslib-spacer: #{$spacer};
--bslib-mb-spacer: var(--bslib-spacer, 1rem);
}
// Some things like card(), p(), inputs, etc. want some margin-bottom by default
// so you can plop them anywhere and you get spacing between rows. However, now
// that we have layout utilities like page_fillable(), layout_columns(),
// layout_sidebar(), etc. where we can control the gap between rows/columns, we
// need a way to reset those margin-bottom to 0 in those special contexts
//
// We do this by adding this class to components (e.g., card())...
.bslib-mb-spacing {
margin-bottom: var(--bslib-mb-spacer);
}
// ...And this class for layout containers (e.g, layout_columns())
.bslib-gap-spacing {
gap: var(--bslib-mb-spacer);
> .bslib-mb-spacing, > .form-group, > p, > pre {
margin-bottom: 0;
}
}
// We generally don't want mb spacing for _activated_ fill items
.html-fill-container > .html-fill-item.bslib-mb-spacing {
margin-bottom: 0;
}
$bslib-enable-color-utilities: $bootstrap-version >= 5 !default;
@if ($bslib-enable-color-utilities) {
$bslib-gradient-colors: () !default;
$bslib-gradient-colors-defaults: ();
$bslib-color-names: ("blue", "indigo", "purple", "pink", "red", "orange", "yellow", "green", "teal", "cyan");
@each $name in $bslib-color-names {
@if (map-has-key($colors, $name)) {
$bslib-gradient-colors-defaults: map-merge(
$bslib-gradient-colors-defaults,
($name: map-get($colors, $name))
);
}
}
$bslib-gradient-colors: map-merge(
$bslib-gradient-colors-defaults,
$bslib-gradient-colors
);
// Named color background and foreground utility classes ---------------------
@each $name, $color in $bslib-gradient-colors {
.bg-#{$name} {
--bslib-color-bg: #{$color};
--bslib-color-fg: #{color-contrast($color)};
background-color: var(--bslib-color-bg);
color: var(--bslib-color-fg);
}
.text-#{$name} {
--bslib-color-fg: #{$color};
color: var(--bslib-color-fg);
}
}
// Fill in the `--color-*` variables
@each $name, $color in $theme-colors {
.text-#{$name} {
--bslib-color-fg: #{$color};
}
.bg-#{$name} {
--bslib-color-bg: #{$color};
--bslib-color-fg: #{color-contrast($color)};
}
}
// Gradient backgrounds ------------------------------------------------------
//
// Creates gradient background for every named color pair. Users can add
// additional colors into the mix by setting $bslib-gradient-colors to a map of
// color names to colors. Creates class names like: .bg-gradient-{from}-{to}.
@each $name1, $color1 in $bslib-gradient-colors {
@each $name2, $color2 in $bslib-gradient-colors {
@if $name1 != $name2 {
.bg-gradient-#{$name1}-#{$name2} {
$color-mid: mix($color1, $color2, 60%);
$color-fg: color-contrast($color-mid);
--bslib-color-fg: #{$color-fg};
--bslib-color-bg: #{$color-mid};
background: linear-gradient(
var(--bg-gradient-deg, 140deg),
$color1 var(--bg-gradient-start, 36%),
$color2 var(--bg-gradient-end, 180%)
) $color-mid;
color: $color-fg;
}
}
}
}
}
$bslib-value-box-enable-border: "auto" !default; // "auto" | "never" | "always"
$bslib-value-box-enable-shadow: $enable-shadows !default;
$bslib-value-box-horizontal-break-point: 300px;
:root {
--bslib-value-box-shadow: #{if($bslib-value-box-enable-shadow, #{$box-shadow}, none)};
// value box border width is set to "-auto-yes" when the card has .border-auto
// or "-auto-no" by default. These cards all use "-baseline", where the border
// can be disabled entirely by setting $bslib-value-box-enable-border: "never"
// or --bslib-value-box-border-width-baseline: 0. In "auto" mode, the border
// is disabled without the border-auto class, or disabled if shadow is enabled.
--bslib-value-box-border-width-auto-yes: #{if($bslib-value-box-enable-shadow, 0, var(--bslib-value-box-border-width-baseline))};
--bslib-value-box-border-width-auto-no: #{if($bslib-value-box-enable-border == "auto", 0, var(--bslib-value-box-border-width-baseline))};
--bslib-value-box-border-width-baseline: #{if($bslib-value-box-enable-border == "never", 0, $card-border-width)};
}
// CSS variables that start with --- (3 dashes instead of 2) are private vars
// that are set by user arguments in the R calls. The CSS properties below only
// apply to the default value box style; the standard way to theme individual
// value boxes is with CSS classes on the value box container.
// :root {
// --bslib-value-box-color:;
// --bslib-value-box-bg:;
// --bslib-value-box-border-color:;
// }
.bslib-value-box {
&.card {
// .card also sets box-shadow by default, likely to an empty css variable
box-shadow: var(--bslib-value-box-shadow);
}
border-width: var(--bslib-value-box-border-width-auto-no, var(--bslib-value-box-border-width-baseline));
&.border-auto {
border-width: var(--bslib-value-box-border-width-auto-yes, var(--bslib-value-box-border-width-baseline));
}
&.default {
--bslib-value-box-bg-default: var(--bs-card-bg, #{$body-bg});
--bslib-value-box-border-color-default: var(--bs-card-border-color, #{$card-border-color});
color: var(--bslib-value-box-color);
background-color: var(--bslib-value-box-bg, var(--bslib-value-box-bg-default));
border-color: var(--bslib-value-box-border-color, var(--bslib-value-box-border-color-default));
}
container-name: bslib-value-box;
container-type: inline-size;
.value-box-grid {
display: grid;
grid-template-areas: "left right";
align-items: center;
overflow: hidden;
}
.value-box-showcase {
height: 100%;
max-height: var(---bslib-value-box-showcase-max-h, 100%);
&, > .html-fill-item {
width: 100%;
}
}
&[data-full-screen="true"] {
.value-box-showcase {
max-height: var(---bslib-value-box-showcase-max-h-fs, 100%);
}
}
// When value boxes get too small, we lay them out vertically using a container query.
// But we don't need this for mobile, where we have one box per row. This media query
// is the inverse of `@include media-breakpoint-down(sm)` but that mixin doesn't work
// inside nested queries.
@media screen and (min-width: breakpoint-max(sm, $grid-breakpoints)) {
@container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
&:not(.showcase-bottom) .value-box-grid {
// override specificity of showcase layouts for small value boxes
grid-template-columns: 1fr !important;
grid-template-rows: auto auto;
grid-template-areas:
"top"
"bottom";
.value-box-showcase {
grid-area: top !important;
}
.value-box-area {
grid-area: bottom !important;
justify-content: end;
}
}
}
}
// Should also be fillable/fill (i.e., d-flex; flex: 1)
.value-box-area {
justify-content: center;
padding: 1.5rem 1rem;
font-size: .9rem;
font-weight: 500;
* {
margin-bottom: 0;
margin-top: 0;
}
}
.value-box-title {
@include bootstrap-heading-font-and-spacing($h6-font-size);
// add a non-breaking space to ensure it's not 0 height
&:empty::after {
content: '\00a0 ';
}
}
.value-box-value {
@include bootstrap-heading-font-and-spacing($h2-font-size);
// add a non-breaking space to ensure it's not 0 height
&:empty::after {
content: '\00a0 ';
}
}
// Should also be fillable/fill (i.e., d-flex; flex: 1)
.value-box-showcase {
align-items: center;
justify-content: center;
margin-top: auto;
margin-bottom: auto;
padding: 1rem;
.bi, .fa, .fab, .fas, .far {
opacity: .85;
min-width: 50px;
max-width: 125%;
}
// We set font size because {bsicons}/{fontawesome} both
// set height/width to 1em by default (as an inline style)
.bi, .fa, .fab, .fas, .far { font-size: 4rem; }
}
&.showcase-top-right {
.value-box-grid {
grid-template-columns: 1fr var(---bslib-value-box-showcase-w, 50%);
.value-box-showcase {
grid-area: right;
margin-left: auto;
align-self: start;
align-items: end;
padding-left: 0;
padding-bottom: 0;
}
.value-box-area {
grid-area: left;
align-self: end;
}
}
&[data-full-screen="true"] {
.value-box-grid {
grid-template-columns: auto var(---bslib-value-box-showcase-w-fs, 1fr);
> div {
align-self: center;
}
}
}
&:not([data-full-screen="true"]) {
.value-box-showcase {
margin-top: 0;
}
@container bslib-value-box (max-width: #{$bslib-value-box-horizontal-break-point}) {
.value-box-grid {
.value-box-showcase { // reset padding on showcase_container
padding-left: 1rem;
}
}
}
}
}
&.showcase-left-center {
.value-box-grid {
grid-template-columns: var(---bslib-value-box-showcase-w, 30%) auto;
}
&[data-full-screen="true"] {
.value-box-grid {
grid-template-columns: var(---bslib-value-box-showcase-w-fs, 1fr) auto;
}
}
&:not([data-fill-screen="true"]) {
.value-box-grid {
.value-box-showcase {
grid-area: left;
}
.value-box-area {
grid-area: right;
}
}
}
}
&.showcase-bottom {
.value-box-grid {
grid-template-columns: 1fr;
grid-template-rows: 1fr var(---bslib-value-box-showcase-h, auto);
grid-template-areas:
"top"
"bottom";
overflow: hidden;
.value-box-showcase {
grid-area: bottom;
padding: 0;
margin: 0;
}
.value-box-area {
grid-area: top;
}
}
&[data-full-screen="true"] {
.value-box-grid {
grid-template-rows: 1fr var(---bslib-value-box-showcase-h-fs, 2fr);
.value-box-showcase {
padding: 1rem;
}
}
}
}
}
@include color-mode(dark) {
.bslib-value-box {
// Bootstrap doesn't have a dark shadow, but the default isn't quite right
--bslib-value-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 50%);
}
}
/* CSS behind nav_spacer() */
@mixin nav-spacer() {
.nav:not(.nav-hidden) {
/* Make sure nav container is flexbox (they aren't in BS3) */
display: flex !important;
display: -webkit-flex !important;
// Logic for horizontal nav (e.g., navset_tab(), etc)
&:not(.nav-stacked):not(.flex-column) {
float: none !important;
> .bslib-nav-spacer {
margin-left: auto !important;
}
/* .form-inline doesn't vertically align in BS3? */
> .form-inline {
margin-top: auto;
margin-bottom: auto;
}
}
// Logic for vertical nav (e.g., navset_pill_list())
&.nav-stacked {
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
> .bslib-nav-spacer {
margin-top: auto !important;
}
}
}
}
/* BS4+ uses this mixin for configurable breakpoints */
@if mixin-exists("media-breakpoint-up") {
@include media-breakpoint-up(sm) {
@include nav-spacer();
}
} @else {
/* BS3 default navbar breakpoint */
@media (min-width: 768px) {
@include nav-spacer();
}
}
.bslib-card {
// TODO: allow a way to opt out
overflow: auto;
// Avoid "double padding" when two card_body()s are immediate siblings
.card-body + .card-body {
padding-top: 0;
}
.card-body {
overflow: auto;
p {
margin-top: 0;
&:last-child {
margin-bottom: 0;
}
}
}
.card-body {
max-height: var(--bslib-card-body-max-height, none);
}
&[data-full-screen="true"] > .card-body {
max-height: var(--bslib-card-body-max-height-full-screen, none);
}
.card-header {
.form-group {
margin-bottom: 0;
}
.selectize-control {
margin-bottom: 0;
// TODO: we should probably add this to selectize's SCSS since this actually makes selectInput()
// usable with width="fit-content"
.item {
margin-right: 1.15rem;
}
}
}
.card-footer {
margin-top: auto;
}
// For navs_tab_card(title = ...)
.bslib-navs-card-title {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.nav {
margin-left: auto;
}
}
.bslib-sidebar-layout:not([data-bslib-sidebar-border="true"]) {
border: none;
}
.bslib-sidebar-layout:not([data-bslib-sidebar-border-radius="true"]) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
/*************************************************
* Full screen card logic
*************************************************/
[data-full-screen="true"] {
position: fixed;
inset: 3.5rem 1rem 1rem;
height: auto !important;
max-height: none !important;
width: auto !important;
z-index: $zindex-popover;
}
.bslib-full-screen-enter {
display: none;
position: absolute;
bottom: var(--bslib-full-screen-enter-bottom, 0.2rem);
right: var(--bslib-full-screen-enter-right, 0);
top: var(--bslib-full-screen-enter-top);
left: var(--bslib-full-screen-enter-left);
color: var(--bslib-color-fg, var(--bs-card-color));
background-color: var(--bslib-color-bg, var(--bs-card-bg, var(--bs-body-bg)));
border: var(--bs-card-border-width) solid var(--bslib-color-fg, var(--bs-card-border-color));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
margin: 0.2rem 0.4rem;
padding: 0.55rem !important;
font-size: .8rem;
cursor: pointer;
opacity: 0.7;
&:hover { opacity: 1; }
z-index: $zindex-popover;
}
.card[data-full-screen="false"]:hover > * > .bslib-full-screen-enter {
display: block;
}
// Hide all enter-full-screen buttons when *any* card is full-screenified
.bslib-has-full-screen .card:hover > * > .bslib-full-screen-enter {
display: none;
}
// Only allow full_screen on desktop screens
@include media-breakpoint-down(sm) {
.bslib-full-screen-enter { display: none !important; }
}
.bslib-full-screen-exit {
position: relative;
top: 1.35rem;
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
display: flex;
float: right;
margin-right: 2.15rem;
align-items: center;
color: rgba(var(--bs-body-bg-rgb), 0.8);
&:hover {
color: rgba(var(--bs-body-bg-rgb), 1);
}
svg {
margin-left: 0.5rem;
font-size: 1.5rem;
}
}
#bslib-full-screen-overlay {
position: fixed;
inset: 0;
background-color: rgba(var(--bs-body-color-rgb), 0.6);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: $zindex-popover - 1;
animation: bslib-full-screen-overlay-enter 400ms cubic-bezier(.6,.02,.65,1) forwards;
}
@keyframes bslib-full-screen-overlay-enter {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.bslib-grid {
display: grid !important;
gap: var(--bslib-spacer, 1rem);
height: var(--bslib-grid-height);
&.grid {
// Don't let intrinsic width of a column affect the width of grid cols
grid-template-columns: repeat(var(--bs-columns, 12), minmax(0, 1fr));
// For some reason, Bootstrap sets `grid-template-rows: 1fr` by default, which
// is problematic for a multi-row filling layout. This fixes it...
// > page_fillable(layout_columns(c(12, 12), plotly::plot_ly(), plotly::plot_ly()))
grid-template-rows: unset;
grid-auto-rows: var(--bslib-grid--row-heights);
@include bslib-breakpoints-css-vars('bslib-grid--row-heights', map-keys($grid-breakpoints));
}
& > * > .shiny-input-container {
width: 100%;
}
}
.bslib-grid-item {
grid-column: auto/span 1;
}
@include media-breakpoint-down(md) {
// collapse all columns to a single column below medium (by default only)
.bslib-grid-item {
grid-column: 1 / -1;
}
}
@include media-breakpoint-down(sm) {
// with each "row" taking its natural height
.bslib-grid {
grid-template-columns: 1fr !important;
height: var(--bslib-grid-height-mobile);
&.grid {
height: unset !important;
grid-auto-rows: var(--bslib-grid--row-heights--xs, auto);
}
}
}
.accordion {
.accordion-header {
@include bootstrap-heading($h2-font-size);
margin-bottom: 0;
}
.accordion-icon:not(:empty) {
margin-right: 0.75rem;
display: flex; /* Without flex, the height/alignment is messed up */
}
.accordion-button:not(.collapsed) {
box-shadow: none;
// This none overrides the box-shadow applied to
// .accordion-button:focus (and, as a result, non-collapsed buttons
// won't show a visual indication of focus, #488).
// So, repeat the .accordion-button:focus below to give it a
// higher priority.
&:focus {
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
}
}
}
.navbar+.container-fluid {
// When the tab/page is fillable, undo the padding on the container-fluid
// (in this case, the user has control over padding/gap)
&:has(> .tab-content > .tab-pane.active.html-fill-container) {
padding-left: 0;
padding-right: 0;
}
// When the tab/page is fillable, add sensible default padding
>.tab-content>.tab-pane.active.html-fill-container {
padding: var(--bslib-spacer, 1rem);
gap: var(--bslib-spacer, 1rem);
// ...but if it holds a single sidebar layout, remove the padding
&:has(> .bslib-sidebar-layout:only-child) {
padding: 0;
}
// And smart border defaults for nav_panel("Foo", layout_sidebar())
>.bslib-sidebar-layout:only-child {
&:not([data-bslib-sidebar-border="true"]) {
border-left: none;
border-right: none;
border-bottom: none;
}
&:not([data-bslib-sidebar-border-radius="true"]) {
border-radius: 0;
}
}
}
}
// Make sure a border appears between the navbar and the sidebar layout
// (especially important when page_navbar(inverse = FALSE, sidebar = sidebar())
.navbar+div>.bslib-sidebar-layout {
border-top: var(--bslib-sidebar-border);
}
html {
height: 100%;
}
.bslib-page-fill {
width: 100%;
height: 100%;
margin: 0;
padding: var(--bslib-spacer, 1rem);
gap: var(--bslib-spacer, 1rem);
}
@include media-breakpoint-down(sm) {
.bslib-page-fill {
height: var(--bslib-page-fill-mobile-height, auto);
}
}
$bslib-page-sidebar-title-bg: if($navbar-bg, $navbar-bg, $dark) !default;
$bslib-page-sidebar-title-color: color-contrast($bslib-page-sidebar-title-bg) !default;
$bslib-sidebar-padding: $spacer * 1.5 !default;
:root {
--bslib-page-sidebar-title-bg: #{$bslib-page-sidebar-title-bg};
--bslib-page-sidebar-title-color: #{$bslib-page-sidebar-title-color};
}
.bslib-page-title {
background-color: var(--bslib-page-sidebar-title-bg);
color: var(--bslib-page-sidebar-title-color);
font-size: $h4-font-size;
font-weight: 300;
padding: var(--bslib-spacer, 1rem);
padding-left: $bslib-sidebar-padding;
margin-bottom: 0;
border-bottom: $border-width solid $border-color;
}
$bslib-sidebar-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.05) !default;
$bslib-sidebar-fg: var(--bs-emphasis-color, black) !default;
$bslib-sidebar-toggle-bg: rgba(var(--bs-emphasis-color-rgb, 0,0,0), 0.1) !default;
$bslib-sidebar-border: var(--bs-card-border-width, #{$card-border-width}) solid var(--bs-card-border-color, #{$card-border-color}) !default;
$bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)), var(--bslib-sidebar-width, 250px));
.bslib-sidebar-layout {
--bslib-sidebar-transition-duration: 500ms;
--bslib-sidebar-transition-easing-x: cubic-bezier(0.8, 0.78, 0.22, 1.07);
--bslib-sidebar-border: #{$bslib-sidebar-border};
--bslib-sidebar-border-radius: var(--bs-border-radius);
--bslib-sidebar-vert-border: #{$bslib-sidebar-border};
--bslib-sidebar-bg: #{$bslib-sidebar-bg};
--bslib-sidebar-fg: #{$bslib-sidebar-fg};
--bslib-sidebar-main-fg: var(--bs-card-color, var(--bs-body-color));
--bslib-sidebar-main-bg: var(--bs-card-bg, var(--bs-body-bg));
--bslib-sidebar-toggle-bg: #{$bslib-sidebar-toggle-bg};
--bslib-sidebar-padding: calc(var(--bslib-spacer) * 1.5);
--bslib-sidebar-icon-size: var(--bslib-spacer, 1rem);
--bslib-sidebar-icon-button-size: calc(var(--bslib-sidebar-icon-size, 1rem) * 2);
--bslib-sidebar-padding-icon: calc(var(--bslib-sidebar-icon-button-size, 2rem) * 1.5);
// We intentionally don't give a value here, but it could be set by someone else
// --bslib-collapse-toggle-border: ;
--bslib-collapse-toggle-border-radius: var(--bs-border-radius, #{$border-radius});
--bslib-collapse-toggle-transform: 0deg;
--bslib-sidebar-toggle-transition-easing: cubic-bezier(1, 0, 0, 1);
--bslib-collapse-toggle-right-transform: 180deg;
--bslib-sidebar-column-main: minmax(0, 1fr);
display: grid !important;
grid-template-columns: $bslib-sidebar-column-sidebar var(--bslib-sidebar-column-main);
position: relative;
@include transition(grid-template-columns ease-in-out var(--bslib-sidebar-transition-duration));
border: var(--bslib-sidebar-border);
border-radius: var(--bslib-sidebar-border-radius);
&[data-bslib-sidebar-border="false"] {
border: none;
}
&[data-bslib-sidebar-border-radius="false"] {
border-radius: initial;
}
> .main, > .sidebar {
grid-row: 1 / 2;
border-radius: inherit;
overflow: auto;
}
> .main {
grid-column: 2 / 3;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: var(--bslib-sidebar-padding);
transition: padding var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
color: var(--bslib-sidebar-main-fg);
background-color: var(--bslib-sidebar-main-bg);
}
> .sidebar {
grid-column: 1 / 2;
width: 100%;
height: 100%;
border-right: var(--bslib-sidebar-vert-border);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
color: var(--bslib-sidebar-fg);
background-color: var(--bslib-sidebar-bg);
backdrop-filter: blur(5px);
> .sidebar-content {
display: flex;
flex-direction: column;
gap: var(--bslib-spacer, 1rem);
padding: var(--bslib-sidebar-padding);
// Add space for the toggle button (removed if sidebar is always open)
padding-top: var(--bslib-sidebar-padding-icon);
> :last-child:not(.sidebar-title) {
// Remove margin-bottom from the last item because sidebar has padding.
// We make an exception for .sidebar-title because it might be common to
// have a title and bare text nodes (that don't count as children).
margin-bottom: 0;
}
> .accordion {
margin-left: calc(-1 * var(--bslib-sidebar-padding));
margin-right: calc(-1 * var(--bslib-sidebar-padding));
&:last-child {
margin-bottom: calc(-1 * var(--bslib-sidebar-padding));
}
&:not(:last-child) {
margin-bottom: $spacer;
}
.accordion-body {
display: flex;
flex-direction: column;
}
}
// Accordions in sidebars are made flush with `.accordion-flush`, which
// removes the top and bottom border of the first or last accordion item.
// But in our usage, the accordions might not be the first or last item in
// the sidebar. In that case, it's better to keep the top/bottom borders.
> .accordion:not(:first-child) .accordion-item:first-child {
border-top: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
}
> .accordion:not(:last-child) .accordion-item:last-child {
border-bottom: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
}
&.has-accordion > .sidebar-title {
border-bottom: none;
padding-bottom: 0;
}
}
.shiny-input-container {
width: 100%;
}
}
&[data-bslib-sidebar-open="always"] {
> .sidebar > .sidebar-content {
// Always-open sidebars don't have a toggle & can use normal top padding
padding-top: var(--bslib-sidebar-padding);
}
}
> .collapse-toggle {
grid-row: 1 / 2;
grid-column: 1 / 2;
display: inline-flex;
align-items: center;
position: absolute;
right: calc(var(--bslib-sidebar-icon-size));
top: calc(var(--bslib-sidebar-icon-size, 1rem) / 2);
border: none;
border-radius: var(--bslib-collapse-toggle-border-radius);
height: var(--bslib-sidebar-icon-button-size, 2rem);
width: var(--bslib-sidebar-icon-button-size, 2rem);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--bslib-sidebar-fg);
background-color: unset; // don't take `button` background color
transition:
color var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
top var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
right var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
left var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
&:hover {
background-color: var(--bslib-sidebar-toggle-bg);
}
> .collapse-icon {
opacity: 0.8;
width: var(--bslib-sidebar-icon-size);
height: var(--bslib-sidebar-icon-size);
transform: rotateY(var(--bslib-collapse-toggle-transform));
// N.B. since mobile view won't trigger a transition of grid-template-columns,
// we transition this toggle to ensure _some_ transition event always happens.
transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
}
&:hover > .collapse-icon {
opacity: 1;
}
}
.sidebar-title {
font-size: $font-size-base * 1.25;
line-height: $line-height-sm;
margin-top: 0;
margin-bottom: $spacer;
padding-bottom: $spacer;
border-bottom: var(--bslib-sidebar-border);
}
&.sidebar-right {
grid-template-columns: var(--bslib-sidebar-column-main) $bslib-sidebar-column-sidebar;
> .main {
grid-column: 1 / 2;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
> .sidebar {
grid-column: 2 / 3;
border-right: none;
border-left: var(--bslib-sidebar-vert-border);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
> .collapse-toggle {
grid-column: 2 / 3;
left: var(--bslib-sidebar-icon-size);
right: unset;
border: var(--bslib-collapse-toggle-border);
> .collapse-icon {
transform: rotateY(var(--bslib-collapse-toggle-right-transform));
}
}
}
&.sidebar-collapsed {
--bslib-collapse-toggle-transform: 180deg;
--bslib-collapse-toggle-right-transform: 0deg;
--bslib-sidebar-vert-border: none;
grid-template-columns: 0 minmax(0, 1fr);
&.sidebar-right {
grid-template-columns: minmax(0, 1fr) 0;
}
// Hide the sidebar contents after it's done transitioning so that
// those contents don't impact the overall layout (i.e., height)
&:not(.transitioning) {
// Putting `display:none` on .sidebar would change the number of columns
// in the grid, and I don't think we can transition between those states
> .sidebar > * {
display: none;
}
}
> .main {
border-radius: inherit;
}
&:not(.sidebar-right) > .main {
padding-left: var(--bslib-sidebar-padding-icon);
}
&.sidebar-right > .main {
padding-right: var(--bslib-sidebar-padding-icon);
}
> .collapse-toggle {
color: var(--bslib-sidebar-main-fg);
// The CSS variable (set via JS) is here to help avoid overlapping toggles
top: calc(
var(--bslib-sidebar-overlap-counter, 0) *
calc(var(--bslib-sidebar-icon-size) +
var(--bslib-sidebar-padding)
) + var(--bslib-sidebar-icon-size, 1rem) / 2);
right: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
}
&.sidebar-right > .collapse-toggle {
left: calc(-2.5 * var(--bslib-sidebar-icon-size) - var(--bs-card-border-width, 1px));
right: unset;
}
}
}
@include media-breakpoint-up(sm) {
// hide sidebar content while we transition the parent .sidebar on desktop
// (on mobile the reveal happens immediately)
.bslib-sidebar-layout.transitioning > .sidebar > .sidebar-content {
display: none;
}
}
@include media-breakpoint-down(sm) {
.bslib-sidebar-layout {
// Tell sidebar init js we're on mobile for `sidebar(open = "desktop")`
&[data-bslib-sidebar-open="desktop"] {
--bslib-sidebar-js-init-collapsed: true;
}
&, &.sidebar-right {
// Remove sidebar borders in mobile view (except always-open, added below)
> .sidebar { border: none; }
// Main area takes up entire layout area to avoid layout shift when
// sidebar is expanded as an overlay.
> .main {
grid-column: 1 / 3;
}
}
// Always open sidebars become "flow" layouts in mobile view
&[data-bslib-sidebar-open="always"] {
display: block !important;
> .sidebar {
max-height: var(--bslib-sidebar-max-height-mobile);
overflow-y: auto;
border-top: var(--bslib-sidebar-vert-border);
}
}
&:not([data-bslib-sidebar-open="always"]) {
// Sidebar layer has to be lifted up to cover other (nested) sidebars
&:not(.sidebar-collapsed) {
> .sidebar { z-index: 1; }
> .collapse-toggle { z-index: 1; }
}
// Either sidebar or main area take up entire layout depending on state
$full-closed: 100% 0;
$closed-full: 0 100%;
grid-template-columns: $full-closed;
&.sidebar-right {
grid-template-columns: $closed-full;
}
&.sidebar-collapsed {
grid-template-columns: $closed-full;
&.sidebar-right {
grid-template-columns: $full-closed;
}
}
// Keep padding on main contents when sidebar is expanded (avoid shifts)
&:not(.sidebar-right) > .main {
padding-left: var(--bslib-sidebar-padding-icon);
}
&.sidebar-right > .main {
padding-right: var(--bslib-sidebar-padding-icon);
}
// Make main contents transparent while sidebar is expanded
> .main {
opacity: 0;
transition: opacity var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
}
&.sidebar-collapsed > .main {
opacity: 1;
}
}
}
}
.html-fill-container {
display: flex;
flex-direction: column;
/* Prevent the container from expanding vertically or horizontally beyond its
parent's constraints. */
min-height: 0;
min-width: 0;
}
.html-fill-container > .html-fill-item {
/* Fill items can grow and shrink freely within
available vertical space in fillable container */
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.html-fill-container > :not(.html-fill-item) {
/* Prevent shrinking or growing of non-fill items */
flex: 0 0 auto;
}
// quarto-scss-analysis-annotation { "origin": "'rules' section from Quarto" }
.quarto-container {
min-height: calc(100vh - 132px);
}
body.hypothesis-enabled {
#quarto-header {
margin-right: 16px;
}
}
footer.footer .nav-footer,
#quarto-header > nav {
padding-left: 1em;
padding-right: 1em;
}
footer.footer div.nav-footer p:first-child {
margin-top: 0;
}
footer.footer div.nav-footer p:last-child {
margin-bottom: 0;
}
// content padding
#quarto-content > * {
padding-top: $content-padding-top;
}
#quarto-content > #quarto-sidebar-glass {
padding-top: 0px;
}
@include media-breakpoint-down(lg) {
#quarto-content > * {
padding-top: 0;
}
#quarto-content .subtitle {
padding-top: $content-padding-top;
}
#quarto-content section:first-of-type h2:first-of-type {
margin-top: 1rem;
}
}
// headroom
.headroom-target,
header.headroom {
will-change: transform;
transition: position 200ms linear;
transition: all 200ms linear;
}
header.headroom--pinned {
transform: translateY(0%);
}
header.headroom--unpinned {
transform: translateY(-100%);
}
.navbar-container {
width: 100%;
}
.navbar-brand {
overflow: hidden;
text-overflow: ellipsis;
}
.navbar-brand-container {
max-width: calc(100% - 115px);
min-width: 0;
display: flex;
align-items: center;
@include media-breakpoint-up(lg) {
margin-right: 1em;
}
}
.navbar-brand.navbar-brand-logo {
margin-right: 4px;
display: inline-flex;
}
.navbar-toggler {
flex-basis: content;
flex-shrink: 0;
}
.navbar {
.navbar-brand-container {
order: $navbar-title-order;
}
.navbar-toggler {
order: $navbar-toggler-order;
}
.navbar-container > .navbar-nav {
order: $navbar-menu-order;
}
.navbar-container > .navbar-brand-container {
margin-left: 0 !important;
margin-right: 0 !important;
}
.navbar-collapse {
order: $navbar-menu-order;
}
#quarto-search {
order: $navbar-search-order;
margin-left: auto;
}
}
@include media-breakpoint-down(med) {
.navbar {
@if $navbar-toggle-position == "left" {
.navbar-toggler {
margin-right: 0.5em;
}
} @else {
#quarto-search {
margin-right: 0.5em;
}
.quarto-navbar-tools .dropdown-menu {
left: 0;
}
}
}
.navbar-collapse .quarto-navbar-tools {
margin-left: 0.5em;
}
}
.navbar-logo {
max-height: 24px;
width: auto;
padding-right: 4px;
}
nav .nav-item:not(.compact) {
padding-top: 1px;
}
nav .nav-link i,
nav .dropdown-item i {
padding-right: 1px;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: 0.6rem;
padding-right: 0.6rem;
}
nav .nav-item.compact .nav-link {
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 1.1rem;
}
.navbar {
.quarto-navbar-tools {
order: $navbar-tools-order;
div.dropdown {
display: inline-block;
}
.quarto-navigation-tool {
color: $navbar-fg;
}
.quarto-navigation-tool:hover {
color: $navbar-hl;
}
}
}
.navbar-nav .dropdown-menu {
min-width: 220px;
font-size: 0.9rem;
}
.navbar {
.navbar-nav {
.nav-link.dropdown-toggle::after {
opacity: 0.75;
vertical-align: 0.175em;
}
}
ul.dropdown-menu {
padding-top: 0;
padding-bottom: 0;
}
.dropdown-header {
text-transform: uppercase;
font-size: 0.8rem;
padding: 0 0.5rem;
}
.dropdown-item {
padding: 0.4rem 0.5rem;
& > i.bi {
margin-left: 0.1rem;
margin-right: 0.25em;
}
}
}
.sidebar #quarto-search {
margin-top: -1px;
svg.aa-SubmitIcon {
width: 16px;
height: 16px;
}
}
.sidebar-navigation a {
color: inherit;
}
.sidebar-title {
margin-top: 0.25rem;
padding-bottom: 0.5rem;
font-size: 1.3rem;
line-height: 1.6rem;
visibility: visible;
}
.sidebar-title > a {
font-size: inherit;
text-decoration: none;
}
.sidebar-title .sidebar-tools-main {
margin-top: -6px;
}
@include media-breakpoint-down(lg) {
#quarto-sidebar {
div.sidebar-header {
padding-top: 0.2em;
}
}
}
.sidebar-header-stacked .sidebar-title {
margin-top: 0.6rem;
}
.sidebar-logo {
max-width: 90%;
padding-bottom: 0.5rem;
}
.sidebar-logo-link {
text-decoration: none;
}
.sidebar-navigation li a {
text-decoration: none;
}
// Sidebar tools
.sidebar-navigation .quarto-navigation-tool {
opacity: 0.7;
font-size: 0.875rem;
}
#quarto-sidebar > nav > .sidebar-tools-main {
margin-left: 14px;
}
.sidebar-tools-main {
display: inline-flex;
margin-left: 0px;
order: 2;
}
.sidebar-tools-main:not(.tools-wide) {
vertical-align: middle;
}
.sidebar-navigation .quarto-navigation-tool.dropdown-toggle::after {
display: none;
}
// Sidebar navigation items
$sidebar-items-gap-spacing: 0.2em;
$sidebar-section-indent: 0.5em;
$sidebar-section-bottom-margin: 0.2em;
.sidebar.sidebar-navigation > * {
padding-top: 1em;
}
.sidebar-item {
margin-bottom: $sidebar-items-gap-spacing;
line-height: 1rem;
margin-top: 0.4rem;
}
.sidebar-section {
padding-left: $sidebar-section-indent;
padding-bottom: $sidebar-section-bottom-margin;
}
.sidebar-item .sidebar-item-container {
// Positions the link and dongle
display: flex;
justify-content: space-between;
cursor: pointer;
}
.sidebar-item-toggle:hover {
cursor: pointer;
}
.sidebar-item .sidebar-item-toggle .bi {
// The dongle for opening and closing sections
font-size: 0.7rem;
text-align: center;
}
.sidebar-item .sidebar-item-toggle .bi-chevron-right::before {
transition: transform 200ms ease;
}
.sidebar-item
.sidebar-item-toggle[aria-expanded="false"]
.bi-chevron-right::before {
transform: none;
}
.sidebar-item
.sidebar-item-toggle[aria-expanded="true"]
.bi-chevron-right::before {
transform: rotate(90deg);
}
.sidebar-item-text {
width: 100%;
}
.sidebar-navigation .sidebar-divider {
margin-left: 0;
margin-right: 0;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
// Toggle the top secondary navigation bar
@include media-breakpoint-down(lg) {
.quarto-secondary-nav {
display: block;
button.quarto-search-button {
padding-right: 0em;
padding-left: 2em;
}
button.quarto-btn-toggle {
margin-left: -0.75rem;
margin-right: 0.15rem;
}
nav.quarto-title-breadcrumbs {
display: none;
}
nav.quarto-page-breadcrumbs {
display: flex;
align-items: center;
padding-right: 1em;
margin-left: -0.25em;
a {
text-decoration: none;
}
ol.breadcrumb {
margin-bottom: 0;
}
}
}
}
@include media-breakpoint-up(lg) {
.quarto-secondary-nav {
display: none;
}
}
.quarto-title-breadcrumbs .breadcrumb {
margin-bottom: 0.5em;
font-size: 0.9rem;
li:last-of-type {
a {
color: $text-muted;
}
}
}
$sidebar-hl: if(
$sidebar-hl,
sidebar-hl,
theme-contrast($nav-link-color, $sidebar-bg)
);
$sidebar-color: rgba($sidebar-fg, 1) !default;
$sidebar-hover-color: rgba($sidebar-hl, 0.8) !default;
$sidebar-active-color: $sidebar-hl !default;
$sidebar-disabled-color: rgba($sidebar-fg, 0.75) !default;
.quarto-secondary-nav .quarto-btn-toggle {
color: $sidebar-color;
}
.quarto-secondary-nav[aria-expanded="false"]
.quarto-btn-toggle
.bi-chevron-right::before {
transform: none;
}
.quarto-secondary-nav[aria-expanded="true"]
.quarto-btn-toggle
.bi-chevron-right::before {
transform: rotate(90deg);
}
.quarto-secondary-nav .quarto-btn-toggle .bi-chevron-right::before {
transition: transform 200ms ease;
}
.quarto-secondary-nav {
cursor: pointer;
}
.no-decor {
text-decoration: none;
}
.quarto-secondary-nav-title {
margin-top: 0.3em;
color: $sidebar-color;
padding-top: 4px;
}
.quarto-secondary-nav nav.quarto-page-breadcrumbs {
color: $sidebar-color;
a {
color: $sidebar-color;
}
a:hover {
color: $sidebar-hover-color;
}
.breadcrumb-item::before {
color: theme-dim($sidebar-color, 20%);
}
}
.breadcrumb-item {
line-height: 1.2rem;
}
div.sidebar-item-container {
color: $sidebar-color;
&:hover,
&:focus {
color: $sidebar-hover-color;
}
&.disabled {
color: $sidebar-disabled-color;
}
.active,
.show > .nav-link,
.sidebar-link > code {
color: $sidebar-active-color;
}
}
div.sidebar.sidebar-navigation.rollup.quarto-sidebar-toggle-contents,
nav.sidebar.sidebar-navigation:not(.rollup) {
@if $sidebar-bg {
background-color: $sidebar-bg;
} @else {
background-color: $body-bg;
}
}
@if $sidebar-border {
.sidebar.sidebar-navigation:not(.rollup) {
border-right: 1px solid $table-border-color !important;
}
}
@include media-breakpoint-down(lg) {
.sidebar-navigation .sidebar-item a,
.nav-page .nav-page-text,
.sidebar-navigation {
font-size: $sidebar-font-size-collapse;
}
.sidebar-navigation ul.sidebar-section.depth1 .sidebar-section-item {
font-size: $sidebar-font-size-section-collapse;
}
.sidebar-logo {
display: none;
}
.sidebar.sidebar-navigation {
position: static;
border-bottom: 1px solid $table-border-color;
}
.sidebar.sidebar-navigation.collapsing {
position: fixed;
z-index: 1000;
}
.sidebar.sidebar-navigation.show {
position: fixed;
z-index: 1000;
}
.sidebar.sidebar-navigation {
min-height: 100%;
}
nav.quarto-secondary-nav {
@if $sidebar-bg {
background-color: $sidebar-bg;
} @else {
background-color: $body-bg;
}
border-bottom: 1px solid $table-border-color;
}
.quarto-banner nav.quarto-secondary-nav {
@if variable-exists(navbar-bg) {
background-color: $navbar-bg;
}
@if (variable-exists(navbar-fg)) {
color: $navbar-fg;
}
border-top: 1px solid $table-border-color;
}
.sidebar .sidebar-footer {
visibility: visible;
padding-top: 1rem;
position: inherit;
}
.sidebar-tools-collapse {
display: block;
}
}
#quarto-sidebar {
transition: width $sidebar-anim-duration ease-in;
> * {
padding-right: 1em;
}
}
@include media-breakpoint-down(lg) {
#quarto-sidebar .sidebar-menu-container {
white-space: nowrap;
min-width: 225px;
}
#quarto-sidebar.show {
transition: width $sidebar-anim-duration ease-out;
}
}
@include media-breakpoint-up(lg) {
#quarto-sidebar {
display: flex;
flex-direction: column;
}
.nav-page .nav-page-text,
.sidebar-navigation .sidebar-section .sidebar-item {
font-size: $sidebar-font-size-section;
}
.sidebar-navigation .sidebar-item {
font-size: $sidebar-font-size;
}
.sidebar.sidebar-navigation {
display: block;
position: sticky;
}
.sidebar-search {
width: 100%;
}
.sidebar .sidebar-footer {
visibility: visible;
}
}
@include media-breakpoint-up(lg) {
#quarto-sidebar-glass {
display: none;
}
}
@include media-breakpoint-down(lg) {
#quarto-sidebar-glass {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff00;
transition: background-color $sidebar-anim-duration ease-in;
z-index: -1;
}
#quarto-sidebar-glass.collapsing {
z-index: $zindex-dropdown;
}
#quarto-sidebar-glass.show {
transition: background-color $sidebar-anim-duration ease-out;
background-color: $sidebar-glass-bg;
z-index: $zindex-dropdown;
}
}
.sidebar .sidebar-footer {
padding: 0.5rem 1rem;
align-self: flex-end;
color: $text-muted;
width: 100%;
}
.quarto-page-breadcrumbs .breadcrumb-item + .breadcrumb-item,
.quarto-page-breadcrumbs .breadcrumb-item {
padding-right: 0.33em;
padding-left: 0;
}
.quarto-page-breadcrumbs .breadcrumb-item::before {
padding-right: 0.33em;
}
.quarto-sidebar-footer {
font-size: 0.875em;
}
.sidebar-section .bi-chevron-right {
vertical-align: middle;
}
.sidebar-section .bi-chevron-right::before {
font-size: 0.9em;
}
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
// This is used to suppress the focus borders on Chrome when the user is simply
// clicking with the mouse vs using the keyboard to move focus.
.btn:focus:not(:focus-visible) {
box-shadow: none;
}
.page-navigation {
display: flex;
justify-content: space-between;
}
.nav-page {
padding-bottom: 0.75em;
}
.nav-page .bi {
font-size: 1.8rem;
vertical-align: middle;
}
.nav-page .nav-page-text {
padding-left: 0.25em;
padding-right: 0.25em;
}
.nav-page a {
color: $text-muted;
text-decoration: none;
display: flex;
align-items: center;
}
.nav-page a:hover {
color: $link-hover-color;
}
.nav-footer .toc-actions {
a,
a:hover {
text-decoration: none;
}
ul {
display: flex;
list-style: none;
:first-child {
margin-left: auto;
}
:last-child {
margin-right: auto;
}
li {
padding-right: 1.5em;
i.bi {
padding-right: 0.4em;
}
}
li:last-of-type {
padding-right: 0;
}
}
padding-bottom: 0.5em;
padding-top: 0.5em;
}
// border weight
// border style
.nav-footer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
text-align: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
@if variable-exists(footer-bg) {
background-color: $footer-bg;
}
}
// Immediate set the top offset if a fixed top header is present
// This prevents a 'flash / jerk' when the page loads
body.nav-fixed {
padding-top: navbar-default-offset($theme-name);
}
body .nav-footer {
@if variable-exists(footer-border) and $footer-border {
@if variable-exists(footer-border-color) {
border-top: 1px solid $footer-border-color;
} @else {
border-top: 1px solid $table-border-color;
}
}
}
.nav-footer-contents {
color: $text-muted;
margin-top: 0.25rem;
}
.nav-footer {
min-height: 3.5em;
color: $footer-fg;
a {
@if variable-exists(footer-fg) {
color: $footer-fg;
}
}
}
@if variable-exists(footer-left-font-size) {
.nav-footer .nav-footer-left {
font-size: $footer-left-font-size;
}
}
@if variable-exists(footer-center-font-size) {
.nav-footer .nav-footer-center {
font-size: $footer-center-font-size;
}
}
@if variable-exists(footer-right-font-size) {
.nav-footer .nav-footer-right {
font-size: $footer-right-font-size;
}
}
.nav-footer-left .footer-items,
.nav-footer-center .footer-items,
.nav-footer-right .footer-items {
display: inline-flex;
padding-top: 0.3em;
padding-bottom: 0.3em;
margin-bottom: 0em;
}
.nav-footer-left .footer-items .nav-link,
.nav-footer-center .footer-items .nav-link,
.nav-footer-right .footer-items .nav-link {
padding-left: 0.6em;
padding-right: 0.6em;
}
.nav-footer-left {
@include media-breakpoint-up(md) {
flex: 1 1 0px;
text-align: left;
}
@include media-breakpoint-down(sm) {
margin-bottom: 1em;
flex: 100%;
}
}
.nav-footer-right {
@include media-breakpoint-up(md) {
flex: 1 1 0px;
text-align: right;
}
@include media-breakpoint-down(sm) {
margin-bottom: 1em;
flex: 100%;
}
}
.nav-footer-center {
@include media-breakpoint-up(md) {
flex: 1 1 0px;
}
text-align: center;
min-height: 3em;
.footer-items {
justify-content: center;
}
@include media-breakpoint-down(md) {
margin-bottom: 1em;
flex: 100%;
}
}
@include media-breakpoint-down(md) {
.nav-footer-center {
margin-top: 3em;
order: 10;
}
}
.navbar .quarto-reader-toggle.reader .quarto-reader-toggle-btn {
background-color: $navbar-fg;
border-radius: 3px;
}
@include media-breakpoint-down(lg) {
.quarto-reader-toggle {
display: none;
}
}
.quarto-reader-toggle.reader.quarto-navigation-tool .quarto-reader-toggle-btn {
background-color: $sidebar-fg;
border-radius: 3px;
}
.quarto-reader-toggle .quarto-reader-toggle-btn {
display: inline-flex;
padding-left: 0.2em;
padding-right: 0.2em;
margin-left: -0.2em;
margin-right: -0.2em;
text-align: center;
}
.navbar .quarto-reader-toggle:not(.reader) .bi::before {
background-image: url('data:image/svg+xml,');
}
.navbar .quarto-reader-toggle.reader .bi::before {
background-image: url('data:image/svg+xml,');
}
.sidebar-navigation .quarto-reader-toggle:not(.reader) .bi::before {
background-image: url('data:image/svg+xml,');
}
.sidebar-navigation .quarto-reader-toggle.reader .bi::before {
background-image: url('data:image/svg+xml,');
}
#quarto-back-to-top {
display: none;
position: fixed;
bottom: 50px;
background-color: $body-bg;
border-radius: $border-radius;
box-shadow: 0 0.2rem 0.5rem $text-muted, 0 0 0.05rem $text-muted;
color: $text-muted;
text-decoration: none;
font-size: 0.9em;
text-align: center;
left: 50%;
padding: 0.4rem 0.8rem;
transform: translate(-50%, 0);
}
/* announcement bar */
#quarto-announcement {
padding: 0.5em;
display: flex;
justify-content: space-between;
margin-bottom: 0;
font-size: 0.9em;
.quarto-announcement-content {
margin-right: auto;
p {
margin-bottom: 0;
}
}
.quarto-announcement-icon {
margin-right: 0.5em;
font-size: 1.2em;
margin-top: -0.15em;
}
.quarto-announcement-action {
cursor: pointer;
}
}
.aa-DetachedSearchButtonQuery {
display: none;
}
.aa-DetachedOverlay,
#quarto-search-results {
ul.aa-List {
list-style: none;
padding-left: 0;
}
.aa-Panel {
background-color: $body-bg;
position: absolute;
z-index: 2000;
}
}
#quarto-search-results {
.aa-Panel {
max-width: $quarto-search-results-width;
}
}
#quarto-search input {
font-size: 0.925rem;
}
.navbar #quarto-search {
@include media-breakpoint-up(lg) {
margin-left: 0.25rem;
order: 999;
}
}
.navbar.navbar-expand-sm #quarto-search,
.navbar.navbar-expand-md #quarto-search {
order: 999;
}
.navbar .quarto-navbar-tools {
@include media-breakpoint-up(lg) {
order: 900;
}
&.tools-end {
@include media-breakpoint-up(lg) {
margin-left: auto !important;
}
}
}
#quarto-sidebar {
.sidebar-search {
@include media-breakpoint-down(lg) {
display: none;
}
.aa-Autocomplete {
width: $quarto-sidebar-search-input-width;
}
}
}
.navbar {
.aa-Autocomplete {
.aa-Form {
width: $quarto-navbar-search-input-width;
}
}
}
.navbar #quarto-search.type-overlay {
.aa-Autocomplete {
width: 40px;
.aa-Form {
background-color: inherit;
border: none;
&:focus-within {
box-shadow: none;
outline: none;
}
.aa-InputWrapper {
display: none;
&:focus-within {
display: inherit;
}
}
.aa-Label,
.aa-LoadingIndicator {
svg {
width: $quarto-search-collapse-icon-size;
height: $quarto-search-collapse-icon-size;
color: $navbar-fg;
opacity: 1;
}
}
}
svg.aa-SubmitIcon {
width: $quarto-search-collapse-icon-size;
height: $quarto-search-collapse-icon-size;
color: $navbar-fg;
opacity: 1;
}
}
}
.aa-Autocomplete,
.aa-DetachedFormContainer {
// Search box
.aa-Form {
align-items: center;
background-color: $input-bg;
border: $input-border-width solid $input-border-color;
border-radius: $input-border-radius;
color: $input-color;
display: flex;
line-height: 1em;
margin: 0;
position: relative;
width: 100%;
&:focus-within {
box-shadow: rgba($primary, 0.6) 0 0 0 1px;
outline: currentColor none medium;
}
.aa-InputWrapperPrefix {
align-items: center;
display: flex;
flex-shrink: 0;
order: 1;
// Container for search and loading icons
.aa-Label,
.aa-LoadingIndicator {
cursor: initial;
flex-shrink: 0;
padding: 0;
text-align: left;
svg {
color: $input-color;
opacity: 0.5;
}
}
.aa-SubmitButton {
appearance: none;
background: none;
border: 0;
margin: 0;
}
.aa-LoadingIndicator {
align-items: center;
display: flex;
justify-content: center;
&[hidden] {
display: none;
}
}
}
.aa-InputWrapper {
order: 3;
position: relative;
width: 100%;
// Search box input (with placeholder and query)
.aa-Input {
appearance: none;
background: none;
border: 0;
color: $input-color;
font: inherit;
height: calc(1.5em + (0.1rem + 2px));
padding: 0;
width: 100%;
&::placeholder {
color: $input-color;
opacity: 0.8;
}
// Focus is set and styled on the parent, it isn't necessary here
&:focus {
border-color: none;
box-shadow: none;
outline: none;
}
// Remove native appearence
&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
}
}
.aa-InputWrapperSuffix {
align-items: center;
display: flex;
order: 4;
// Accelerator to clear the query
.aa-ClearButton {
align-items: center;
background: none;
border: 0;
color: $input-color;
opacity: 0.8;
cursor: pointer;
display: flex;
margin: 0;
width: calc(1.5em + (0.1rem + 2px));
&:hover,
&:focus {
color: $input-color;
opacity: 0.8;
}
&[hidden] {
display: none;
}
svg {
width: $input-height;
}
}
.aa-CopyButton {
border: none;
align-items: center;
background: none;
color: $input-color;
opacity: 0.4;
font-size: 0.7rem;
cursor: pointer;
display: none;
margin: 0;
width: calc(1em + (0.1rem + 2px));
&:hover,
&:focus {
color: $input-color;
opacity: 0.8;
}
&[hidden] {
display: none;
}
}
}
}
}
.aa-PanelLayout:empty {
display: none;
}
.quarto-search-no-results.no-query {
display: none;
}
.aa-Source:has(.no-query) {
display: none;
}
#quarto-search-results .aa-Panel {
border: solid $input-border-color $input-border-width;
}
#quarto-search-results .aa-SourceNoResults {
width: $quarto-search-results-width - 2 * $input-border-width;
}
.aa-DetachedOverlay,
#quarto-search-results {
.aa-Panel {
max-height: 65vh;
overflow-y: auto;
font-size: 0.925rem;
}
.aa-SourceNoResults {
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.search-error {
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
cursor: default;
.search-error-title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
.search-error-icon {
margin-right: 8px;
}
}
.search-error-text {
font-weight: 300;
}
}
.search-result-text {
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;
line-height: 1.2rem; /* fallback */
max-height: 2.4rem; /* fallback */
}
.aa-SourceHeader {
.search-result-header {
font-size: 0.875rem;
background-color: theme-dim($body-bg, 5%);
padding-left: 14px;
padding-bottom: 4px;
padding-top: 4px;
}
.search-result-header-no-results {
display: none;
}
}
.aa-SourceFooter {
.algolia-search-logo {
width: 110px;
opacity: 0.85;
margin: 8px;
float: right;
}
}
.search-result-section {
font-size: 0.925em;
}
a.search-result-link {
color: inherit;
text-decoration: none;
}
li.aa-Item[aria-selected="true"] {
.search-item {
background-color: $component-active-bg;
&.search-result-more,
.search-result-section,
.search-result-text,
.search-result-title-container,
.search-result-text-container {
color: $component-active-color;
background-color: $component-active-bg;
}
mark.search-match {
color: $component-active-color;
background-color: theme-fade($component-active-bg, $body-bg, 8%);
}
}
}
li.aa-Item[aria-selected="false"] {
.search-item {
background-color: $popover-bg;
&.search-result-more,
.search-result-section,
.search-result-text,
.search-result-title-container,
.search-result-text-container {
color: $popover-body-color;
}
mark.search-match {
color: inherit;
background-color: theme-fade($component-active-bg, $body-bg, 42%);
}
}
}
.aa-Item {
.search-result-doc:not(.document-selectable) {
.search-result-title-container {
background-color: $popover-bg;
color: $body-color;
}
.search-result-text-container {
padding-top: 0px;
}
}
}
li.aa-Item {
.search-result-doc.document-selectable {
.search-result-text-container {
margin-top: -4px;
}
}
}
.aa-Item {
cursor: pointer;
.search-item {
border-left: none;
border-right: none;
border-top: none;
background-color: $popover-bg;
border-color: $input-border-color;
color: $popover-body-color;
}
.search-item {
p {
margin-top: 0;
margin-bottom: 0;
}
i.bi {
padding-left: 8px;
padding-right: 8px;
font-size: 1.3em;
}
.search-result-title {
margin-top: 0.3em;
margin-bottom: 0em;
}
.search-result-crumbs {
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.8em;
font-weight: 300;
margin-right: 1em;
}
.search-result-crumbs:not(.search-result-crumbs-wrap) {
max-width: 30%;
margin-left: auto;
margin-top: 0.5em;
margin-bottom: 0.1rem;
}
.search-result-crumbs.search-result-crumbs-wrap {
flex-basis: 100%;
margin-top: 0em;
margin-bottom: 0.2em;
margin-left: 37px;
}
}
.search-result-title-container {
font-size: 1em;
display: flex;
flex-wrap: wrap;
padding: 6px 4px 6px 4px;
}
.search-result-text-container {
padding-bottom: 8px;
padding-right: 8px;
margin-left: 42px;
}
.search-result-doc-section,
.search-result-more {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 44px;
}
.search-result-more {
font-size: 0.8em;
font-weight: 400;
}
.search-result-doc {
border-top: $input-border-width solid $input-border-color;
}
}
}
// Detached Mode
.aa-DetachedSearchButton {
background: none;
border: none;
.aa-DetachedSearchButtonPlaceholder {
display: none;
}
}
.navbar {
.aa-DetachedSearchButton {
.aa-DetachedSearchButtonIcon {
color: $navbar-fg;
}
}
}
.sidebar-tools-collapse,
.sidebar-tools-main {
#quarto-search {
display: inline;
.aa-Autocomplete {
display: inline;
}
.aa-DetachedSearchButton {
padding-left: 4px;
padding-right: 4px;
.aa-DetachedSearchButtonIcon {
color: $sidebar-fg;
.aa-SubmitIcon {
margin-top: -3px;
}
}
}
}
}
.aa-DetachedContainer {
background: rgba($body-bg, 0.65);
width: 90%;
bottom: 0;
box-shadow: rgba($input-border-color, 0.6) 0 0 0 1px;
outline: currentColor none medium;
display: flex;
flex-direction: column;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1101;
&::after {
height: 32px;
}
.aa-SourceHeader {
margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
}
.aa-Panel {
background-color: rgba($body-bg, 1);
border-radius: 0;
box-shadow: none;
flex-grow: 1;
margin: 0;
padding: 0;
position: relative;
}
.aa-PanelLayout {
bottom: 0;
box-shadow: none;
left: 0;
margin: 0;
max-height: none;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
@at-root .aa-DetachedFormContainer {
background-color: rgba($body-bg, 1);
border-bottom: $input-border-width solid $input-border-color;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0;
padding: 0.5em;
@at-root .aa-DetachedCancelButton {
background: none;
font-size: 0.8em;
border: 0;
border-radius: 3px;
color: $body-color;
cursor: pointer;
margin: 0 0 0 0.5em;
padding: 0 0.5em;
&:hover,
&:focus {
box-shadow: rgba($primary, 0.6) 0 0 0 1px;
outline: currentColor none medium;
}
}
}
@at-root .aa-DetachedContainer--modal {
bottom: inherit;
height: auto;
margin: 0 auto;
position: absolute;
@include media-breakpoint-down(sm) {
width: 100%;
top: 0px;
border-radius: 0px;
border: none;
}
@include media-breakpoint-up(med) {
top: 100px;
border-radius: 6px;
max-width: 850px;
}
.aa-PanelLayout {
max-height: var(--aa-detached-modal-max-height);
padding-bottom: var(--aa-spacing-half);
position: static;
}
}
}
.aa-Detached {
height: 100vh;
overflow: hidden;
}
.aa-DetachedOverlay {
background-color: rgba($body-color, 0.4);
position: fixed;
left: 0;
right: 0;
top: 0;
margin: 0;
padding: 0;
height: 100vh;
z-index: 1100;
}
// Value Boxes
$valuebox-bg-primary: theme-override-value(
$theme-name,
"valuebox-bg-primary",
$primary
) !default;
$valuebox-bg-secondary: theme-override-value(
$theme-name,
"valuebox-bg-secondary",
$secondary
) !default;
$valuebox-bg-success: theme-override-value(
$theme-name,
"valuebox-bg-success",
$success
) !default;
$valuebox-bg-info: theme-override-value(
$theme-name,
"valuebox-bg-info",
$info
) !default;
$valuebox-bg-warning: theme-override-value(
$theme-name,
"valuebox-bg-warning",
$warning
) !default;
$valuebox-bg-danger: theme-override-value(
$theme-name,
"valuebox-bg-danger",
$danger
) !default;
$valuebox-bg-light: theme-override-value(
$theme-name,
"valuebox-bg-light",
$light
) !default;
$valuebox-bg-dark: theme-override-value(
$theme-name,
"valuebox-bg-dark",
$dark
) !default;
$valuebox-colors: (
"primary": $valuebox-bg-primary,
"secondary": $valuebox-bg-secondary,
"success": $valuebox-bg-success,
"info": $valuebox-bg-info,
"warning": $valuebox-bg-warning,
"danger": $valuebox-bg-danger,
"light": $valuebox-bg-light,
"dark": $valuebox-bg-dark,
);
// Dashboards
.quarto-dashboard {
&.nav-fixed.dashboard-sidebar #quarto-content.quarto-dashboard-content {
padding: 0em;
}
#quarto-content.quarto-dashboard-content {
padding: 1em;
> * {
padding-top: 0;
}
}
@include media-breakpoint-up(sm) {
height: 100%;
}
@each $valuebox-color, $valuebox-color-value in $valuebox-colors {
.card.valuebox.bslib-card.bg-#{$valuebox-color} {
background-color: $valuebox-color-value !important;
}
}
&.dashboard-fill {
display: flex;
flex-direction: column;
}
#quarto-appendix {
display: none;
}
// Navbar / Navigation
#quarto-header #quarto-dashboard-header {
border-top: solid 1px theme-dim($navbar-bg, 10%);
border-bottom: solid 1px theme-dim($navbar-bg, 10%);
> nav {
padding-left: 1em;
padding-right: 1em;
.navbar-brand-container {
padding-left: 0;
}
}
.navbar-toggler {
margin-right: 0;
}
.navbar-toggler-icon {
height: 1em;
width: 1em;
background-image: url('data:image/svg+xml,');
}
.navbar-brand-container {
padding-right: 1em;
}
.navbar-title {
font-size: 1.1em;
}
.navbar-nav {
font-size: 0.9em;
}
}
#quarto-dashboard-header {
.navbar {
padding: 0;
.navbar-container {
padding-left: 1em;
}
&.slim {
.navbar-brand-container,
.navbar-nav {
.nav-link {
padding: 0.7em;
}
}
}
.quarto-color-scheme-toggle {
order: 9;
}
.navbar-toggler {
margin-left: 0.5em;
order: 10;
}
.navbar-nav {
.nav-link {
padding: 0.5em;
height: 100%;
display: flex;
align-items: center;
}
& .active {
background-color: theme-dim($navbar-bg, 8%);
}
}
.navbar-brand-container {
padding: 0.5em 0.5em 0.5em 0;
display: flex;
flex-direction: row;
margin-right: 2em;
align-items: center;
@include media-breakpoint-down(md) {
margin-right: auto;
}
}
.navbar-collapse {
@include media-breakpoint-up(md) {
order: 8;
}
@include media-breakpoint-down(md) {
order: 1000;
padding-bottom: 0.5em;
}
align-self: stretch;
.navbar-nav {
align-self: stretch;
}
}
.navbar-title {
font-size: 1.25em;
line-height: 1.1em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
.navbar-title-text {
margin-right: 0.4em;
}
a {
text-decoration: none;
color: inherit;
}
}
.navbar-subtitle,
.navbar-author {
font-size: 0.9rem;
margin-right: 0.5em;
}
.navbar-author {
margin-left: auto;
}
.navbar-logo {
max-height: 48px;
min-height: 30px;
object-fit: cover;
margin-right: 1em;
}
.quarto-dashboard-links {
order: 9;
padding-right: 1em;
}
.quarto-dashboard-link-text {
margin-left: 0.25em;
}
.quarto-dashboard-link {
padding-right: 0em;
padding-left: 0.7em;
text-decoration: none;
color: $navbar-fg;
}
}
}
.page-layout-custom .tab-content {
padding: 0;
border: none;
}
}
.quarto-dashboard-img-contain {
height: 100%;
width: 100%;
object-fit: contain;
}
.quarto-dashboard {
// Mobile sizes convert into 'scrolling' layouts
@include media-breakpoint-down(sm) {
.bslib-grid {
grid-template-rows: minmax(1em, max-content) !important;
}
.sidebar-content {
height: inherit;
}
.page-layout-custom {
min-height: 100vh;
}
}
&.dashboard-toolbar > .page-layout-custom,
&.dashboard-sidebar > .page-layout-custom {
padding: 0;
}
.quarto-dashboard-content.quarto-dashboard-pages {
padding: 0;
}
.callout {
margin-bottom: 0;
margin-top: 0;
}
.html-fill-container figure {
overflow: hidden;
}
bslib-tooltip {
.rounded-pill {
.svg {
fill: $body-color;
}
border: solid $text-muted 1px;
}
}
.tabset .dashboard-card-no-title .nav-tabs {
margin-left: 0;
margin-right: auto;
}
.tabset .tab-content {
border: none;
}
.tabset .card-header {
.nav-link[role="tab"] {
margin-top: -6px;
padding-top: 6px;
padding-bottom: 6px;
}
}
.card.valuebox,
.card.bslib-value-box {
min-height: 3rem;
.card-body {
padding: 0;
}
}
.bslib-value-box {
.value-box-value {
font-size: clamp(0.1em, 15cqw, 5em);
}
.value-box-showcase .bi {
font-size: clamp(0.1em, max(18cqw, 5.2cqh), 5em);
text-align: center;
height: 1em;
}
.value-box-showcase .bi::before {
vertical-align: 1em;
}
.value-box-area {
margin-top: auto;
margin-bottom: auto;
}
}
.card figure.quarto-float {
display: flex;
flex-direction: column;
align-items: center;
}
.dashboard-scrolling {
padding: 1em;
}
.full-height {
height: 100%;
}
.showcase-bottom {
.value-box-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
grid-template-areas: "top" "bottom";
.value-box-showcase {
grid-area: bottom;
padding: 0;
margin: 0;
i.bi {
font-size: 4rem;
}
}
.value-box-area {
grid-area: top;
}
}
}
.tab-content {
margin-bottom: 0;
}
.bslib-card .bslib-navs-card-title {
justify-content: stretch;
align-items: end;
}
.card-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.card-title {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 0;
}
}
.tabset {
.card-toolbar {
margin-bottom: 1em;
}
}
/* Sidebar */
.bslib-grid > .bslib-sidebar-layout {
border: none;
gap: var(--bslib-spacer, 1rem);
> .main {
padding: 0;
}
> .sidebar {
border-radius: $card-border-radius;
border: $card-border-width solid $card-border-color;
}
> .collapse-toggle {
display: none;
}
@include media-breakpoint-down(md) {
grid-template-columns: 1fr;
grid-template-rows: max-content 1fr;
> .main {
grid-column: 1;
grid-row: 2;
}
.sidebar {
grid-column: 1;
grid-row: 1;
}
}
}
.sidebar-right {
.sidebar {
padding-left: 2.5em;
}
.collapse-toggle {
left: 2px;
}
}
.quarto-dashboard .sidebar-right button.collapse-toggle:not(.transitioning) {
left: unset;
}
aside.sidebar {
padding-left: 1em;
padding-right: 1em;
background-color: $card-cap-bg;
color: $card-cap-color or $body-color;
}
.bslib-sidebar-layout {
> div.main {
padding: 0.7em;
}
button.collapse-toggle {
margin-top: 0.3em;
}
}
.bslib-sidebar-layout .collapse-toggle {
top: 0;
}
.bslib-sidebar-layout.sidebar-collapsed:not(.transitioning):not(
.sidebar-right
)
.collapse-toggle {
left: 2px;
}
.sidebar > section > .h3:first-of-type {
margin-top: 0em;
}
.sidebar .h3,
.sidebar .h4,
.sidebar .h5,
.sidebar .h6 {
margin-top: 0.5em;
}
.sidebar {
@include observable-sidebar-inputs();
.card-body {
margin-bottom: 2em;
}
.shiny-input-container {
margin-bottom: 1em;
}
.shiny-options-group {
margin-top: 0;
}
.control-label {
margin-bottom: 0.3em;
}
}
.card .card-body .quarto-layout-row {
align-items: stretch;
}
/* Toolbar */
.toolbar {
font-size: 0.9em;
display: flex;
flex-direction: row;
border-top: solid 1px theme-dim($secondary-bg-subtle, 10%);
padding: 1em;
flex-wrap: wrap;
background-color: $card-cap-bg;
@include shiny-toolbar-customizations();
@include observable-toolbar-inputs();
> * {
font-size: 0.9em;
flex-grow: 0;
}
.shiny-input-container {
label {
margin-bottom: 1px;
}
}
}
// Positions the toolbar at the bottom of the flexbox
.toolbar-bottom {
margin-top: 1em;
margin-bottom: 0 !important;
order: 2;
}
// If there is are pages, move the padding down inside the
// the nested tab contents (Global)
.quarto-dashboard-content
> .dashboard-toolbar-container
> .toolbar-content
> .tab-content
> .tab-pane
> *:not(.bslib-sidebar-layout) {
padding: 1em;
}
// If this is simple dashboard with a top level tool bar
.quarto-dashboard-content
> .dashboard-toolbar-container
> .toolbar-content
> *:not(.tab-content) {
padding: 1em;
}
// If there are pages, but no global toolbar
.quarto-dashboard-content
> .tab-content
> .dashboard-page
> .dashboard-toolbar-container
> .toolbar-content,
.quarto-dashboard-content
> .tab-content
> .dashboard-page:not(.dashboard-sidebar-container)
> *:not(.dashboard-toolbar-container) {
padding: 1em;
}
.toolbar-content {
padding: 0;
}
.quarto-dashboard-content.quarto-dashboard-pages
.tab-pane
> .dashboard-toolbar-container {
.toolbar {
border-radius: 0;
margin-bottom: 0;
}
}
.dashboard-toolbar-container.toolbar-toplevel {
.toolbar {
border-bottom: $card-border-width solid $card-border-color;
}
.toolbar-bottom {
margin-top: 0;
}
}
.dashboard-toolbar-container:not(.toolbar-toplevel) {
.toolbar {
margin-bottom: 1em;
border-top: none;
border-radius: $border-radius;
border: $card-border-width solid $card-border-color;
}
}
.vega-embed.has-actions {
details {
width: 1.7em;
height: 2em;
position: absolute !important;
top: 0;
right: 0;
}
}
.dashboard-toolbar-container {
padding: 0;
}
/* Card Toolbar */
/* Card */
.card {
.card-header,
.card-footer {
p:last-child {
margin-bottom: 0;
}
}
.card-body > .h4:first-child {
margin-top: 0;
}
// This ensures that elements in the card body (notably the expansion toggle)
// appear above the elements inside of it (notably itables, which cause issues)
.card-body {
z-index: 4;
// Customize appearance of elements within cards
@include itables();
}
.card-footer {
font-size: 0.9em;
}
.card-toolbar {
display: flex;
flex-grow: 1;
flex-direction: row;
width: 100%;
> * {
font-size: 0.8em;
flex-grow: 0;
}
> .card-title {
font-size: 1em;
flex-grow: 1;
align-self: flex-start;
margin-top: 0.1em;
}
flex-wrap: wrap;
@include toolbar-layout();
@include observable-toolbar-inputs();
@include shiny-toolbar-customizations();
}
}
/*-- Misc HTML elements --*/
.card-body > table > thead {
border-top: none;
}
.card-body > .table > :not(caption) > * > * {
background-color: $card-bg;
color: $card-color;
}
}
/*-- itables --*/
.tableFloatingHeaderOriginal {
background-color: $card-bg;
position: sticky !important;
top: 0 !important;
}
.dashboard-data-table {
margin-top: -1px;
}
/*-- ojs --*/
div.value-box-area span.observablehq--number {
/* the calculation below is pretty horrible, but it's our best effort to match
the font sizes of these two different ways of rendering a number in a value-box:
```{ojs}
//| content: valuebox
//| title: "Articles per day"
//| icon: pencil
//| color: primary
12
```
```{python}
#| content: valuebox
#| title: "Articles per day"
#| icon: pencil
#| color: primary
dict(
value = 12
)
```
See https://github.com/quarto-dev/quarto-cli/issues/8823
*/
font-size: calc(clamp(0.1em, 15cqw, 5em) * 1.25);
line-height: 1.2;
color: inherit;
font-family: var(--bs-body-font-family);
}
.quarto-listing {
padding-bottom: 1em;
}
// General Pagination / Filter Control Styling
.listing-pagination {
padding-top: 0.5em;
}
ul.pagination {
float: right;
padding-left: 8px;
padding-top: 0.5em;
li {
padding-right: 0.75em;
}
li.disabled,
li.active {
a {
color: $pagination-active-color;
text-decoration: none;
}
}
li:last-of-type {
padding-right: 0;
}
}
.listing-actions-group {
display: flex;
.form-select,
.form-control {
@include input-form-control();
}
.input-group {
@include input-group();
@include input-placeholder();
}
}
// Filtering and Sorting
.quarto-listing-filter {
margin-bottom: 1em;
width: 200px;
margin-left: auto;
}
.quarto-listing-sort {
margin-bottom: 1em;
margin-right: auto;
.input-group-text {
font-size: 0.8em;
}
width: auto;
}
.input-group input,
.input-group select {
@include input-group-text();
}
.input-group-text {
@include input-group-text();
border-right: none;
}
.quarto-listing-sort select.form-select {
font-size: 0.8em;
}
.listing-no-matching {
text-align: center;
padding-top: 2em;
padding-bottom: 3em;
font-size: 1em;
}
// Category styling
#quarto-margin-sidebar {
.quarto-listing-category {
padding-top: 0;
font-size: 1rem;
}
.quarto-listing-category-title {
cursor: pointer;
font-weight: 600;
font-size: 1rem;
}
}
.quarto-listing-category {
.category {
cursor: pointer;
}
.category.active {
font-weight: 600;
}
}
.quarto-listing-category.category-cloud {
display: flex;
flex-wrap: wrap;
align-items: baseline;
.category {
padding-right: 5px;
}
@for $count from 1 through 10 {
.category-cloud-#{$count} {
font-size: 0.55em + ($count * 0.2em);
}
}
}
// Grid Listing Styling
@for $colcount from 1 through 12 {
.quarto-listing-cols-#{$colcount} {
grid-template-columns: repeat($colcount, minmax(0, 1fr));
gap: 1.5em;
}
@include media-breakpoint-down(md) {
.quarto-listing-cols-#{$colcount} {
grid-template-columns: repeat(min(2, $colcount), minmax(0, 1fr));
gap: 1.5em;
}
}
@include media-breakpoint-down(sm) {
.quarto-listing-cols-#{$colcount} {
grid-template-columns: minmax(0, 1fr);
gap: 1.5em;
}
}
}
.quarto-listing-grid {
gap: 1.5em;
}
.quarto-grid-item.borderless {
border: none;
.listing-categories {
.listing-category:last-of-type,
.listing-category:first-of-type {
padding-left: 0;
}
.listing-category {
border: 0;
}
}
}
.quarto-grid-link {
text-decoration: none;
color: inherit;
}
.quarto-grid-link:hover {
text-decoration: none;
color: inherit;
}
.quarto-grid-item {
h5.title {
margin-top: 0;
margin-bottom: 0;
}
.card-footer {
display: flex;
justify-content: space-between;
font-size: 0.8em;
p {
margin-bottom: 0;
}
}
p.card-img-top {
margin-bottom: 0;
> img {
object-fit: cover;
}
}
.card-other-values {
margin-top: 0.5em;
font-size: 0.8em;
tr {
margin-bottom: 0.5em;
}
tr > td:first-of-type {
font-weight: 600;
padding-right: 1em;
padding-left: 1em;
vertical-align: top;
}
}
div.post-contents {
display: flex;
flex-direction: column;
text-decoration: none;
height: 100%;
}
.listing-item-img-placeholder {
background-color: $card-cap-bg;
flex-shrink: 0;
}
.card-attribution {
padding-top: 1em;
display: flex;
gap: 1em;
text-transform: uppercase;
color: $text-muted;
font-weight: 500;
flex-grow: 10;
align-items: flex-end;
}
.description {
padding-bottom: 1em;
}
.card-attribution .date {
align-self: flex-end;
}
.card-attribution.justify {
justify-content: space-between;
}
.card-attribution.start {
justify-content: flex-start;
}
.card-attribution.end {
justify-content: flex-end;
}
.card-title {
margin-bottom: 0.1em;
}
.card-subtitle {
padding-top: 0.25em;
}
.card-text {
font-size: 0.9em;
}
.listing-reading-time {
padding-bottom: 0.25em;
}
.card-text-small {
font-size: 0.8em;
}
.card-subtitle.subtitle {
font-size: 0.9em;
font-weight: 600;
padding-bottom: 0.5em;
}
.listing-categories {
@include listing-category();
}
}
.quarto-grid-item.card-right {
text-align: right;
.listing-categories {
justify-content: flex-end;
}
}
.quarto-grid-item.card-left {
text-align: left;
}
.quarto-grid-item.card-center {
text-align: center;
.listing-description {
text-align: justify;
}
.listing-categories {
justify-content: center;
}
}
// Table Listing Styling
table.quarto-listing-table {
td.image {
padding: 0px;
img {
width: 100%;
max-width: 50px;
object-fit: contain;
}
}
a {
text-decoration: none;
word-break: keep-all;
}
th a {
color: inherit;
}
th a.asc:after {
margin-bottom: -2px;
margin-left: 5px;
display: inline-block;
height: 1rem;
width: 1rem;
background-repeat: no-repeat;
background-size: 1rem 1rem;
background-image: url('data:image/svg+xml,');
content: "";
}
th a.desc:after {
margin-bottom: -2px;
margin-left: 5px;
display: inline-block;
height: 1rem;
width: 1rem;
background-repeat: no-repeat;
background-size: 1rem 1rem;
background-image: url('data:image/svg+xml,');
content: "";
}
}
table.quarto-listing-table.table-hover td {
cursor: pointer;
}
.quarto-post.image-left {
flex-direction: row;
}
.quarto-post.image-right {
flex-direction: row-reverse;
}
@include media-breakpoint-down(md) {
.quarto-post.image-right,
.quarto-post.image-left {
gap: 0em;
flex-direction: column;
}
.quarto-post .metadata {
padding-bottom: 1em;
order: 2;
}
.quarto-post .body {
order: 1;
}
.quarto-post .thumbnail {
order: 3;
}
}
// Post (default) Styling
.list.quarto-listing-default div:last-of-type {
border-bottom: none;
}
.quarto-listing-container-default {
@include media-breakpoint-up(lg) {
margin-right: 2em;
}
}
div.quarto-post {
display: flex;
gap: 2em;
margin-bottom: 1.5em;
@include media-breakpoint-down(md) {
padding-bottom: 1em;
}
border-bottom: 1px solid $border-color;
.metadata {
flex-basis: 20%;
flex-grow: 0;
margin-top: 0.2em;
flex-shrink: 10;
}
.thumbnail {
flex-basis: 30%;
flex-grow: 0;
flex-shrink: 0;
img {
margin-top: 0.4em;
width: 100%;
object-fit: cover;
}
}
.body {
flex-basis: 45%;
flex-grow: 1;
flex-shrink: 0;
h3.listing-title {
margin-top: 0px;
margin-bottom: 0px;
border-bottom: none;
}
.listing-subtitle {
font-size: 0.875em;
margin-bottom: 0.5em;
margin-top: 0.2em;
}
.description {
font-size: 0.9em;
}
pre code {
white-space: pre-wrap;
}
}
a {
color: $body-color;
text-decoration: none;
}
.metadata {
display: flex;
flex-direction: column;
font-size: 0.8em;
font-family: $font-family-base;
flex-basis: 33%;
}
.listing-categories {
@include listing-category();
}
.listing-description {
margin-bottom: 0.5em;
}
}
// Jolla
div.quarto-about-jolla {
display: flex !important;
flex-direction: column;
align-items: center;
margin-top: 10%;
padding-bottom: 1em;
.about-image {
object-fit: cover;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
}
@include image-shapes();
.quarto-title h1.title {
text-align: center;
}
.quarto-title .description {
text-align: center;
}
h2 {
border-bottom: none;
}
.about-sep {
width: 60%;
}
main {
text-align: center;
}
.about-links {
@include responsive-buttons();
}
.about-link {
@include responsive-button();
}
}
// Solana
div.quarto-about-solana {
display: flex !important;
flex-direction: column;
padding-top: 3em !important;
padding-bottom: 1em;
.about-entity {
display: flex !important;
@include media-breakpoint-up(lg) {
flex-direction: row;
}
@include media-breakpoint-down(lg) {
flex-direction: column-reverse;
align-items: center;
text-align: center;
}
align-items: start;
justify-content: space-between;
.entity-contents {
display: flex;
flex-direction: column;
@include media-breakpoint-down(md) {
width: 100%;
}
}
.about-image {
object-fit: cover;
@include media-breakpoint-down(lg) {
margin-bottom: 1.5em;
}
}
@include image-shapes();
.about-links {
@include responsive-buttons();
justify-content: left;
padding-bottom: 1.2em;
}
.about-link {
@include responsive-button();
}
}
.about-contents {
padding-right: 1.5em;
flex-basis: 0;
flex-grow: 1;
main.content {
margin-top: 0;
}
h2 {
border-bottom: none;
}
}
}
// Trestles
div.quarto-about-trestles {
display: flex !important;
flex-direction: row;
padding-top: 3em !important;
padding-bottom: 1em;
@include media-breakpoint-down(lg) {
flex-direction: column;
padding-top: 0em !important;
}
.about-entity {
@include media-breakpoint-up(lg) {
//max-width: 42%;
flex: 0 0 42%;
}
display: flex !important;
flex-direction: column;
align-items: center;
text-align: center;
padding-right: 1em;
.about-image {
object-fit: cover;
margin-bottom: 1.5em;
}
@include image-shapes();
.about-links {
@include responsive-buttons();
justify-content: center;
}
.about-link {
@include responsive-button();
}
}
.about-contents {
flex-basis: 0;
flex-grow: 1;
h2 {
border-bottom: none;
}
@include media-breakpoint-up(lg) {
border-left: solid 1px $border-color;
padding-left: 1.5em;
}
main.content {
margin-top: 0;
}
}
}
// Marquee
div.quarto-about-marquee {
padding-bottom: 1em;
.about-contents {
display: flex;
flex-direction: column;
}
.about-image {
max-height: 550px;
margin-bottom: 1.5em;
object-fit: cover;
}
@include image-shapes();
h2 {
border-bottom: none;
}
.about-links {
@include responsive-buttons();
justify-content: center;
padding-top: 1.5em;
}
.about-link {
@include responsive-button();
@include media-breakpoint-up(lg) {
border: none;
}
}
}
// Broadside
div.quarto-about-broadside {
display: flex;
flex-direction: column;
padding-bottom: 1em;
.about-main {
display: flex !important;
padding-top: 0 !important;
@include media-breakpoint-up(lg) {
flex-direction: row;
align-items: flex-start;
}
@include media-breakpoint-down(lg) {
flex-direction: column;
}
.about-entity {
@include media-breakpoint-down(lg) {
flex-shrink: 0;
width: 100%;
height: 450px;
margin-bottom: 1.5em;
background-size: cover;
background-repeat: no-repeat;
}
@include media-breakpoint-up(lg) {
flex: 0 10 50%;
margin-right: 1.5em;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
}
.about-contents {
padding-top: 14px;
flex: 0 0 50%;
}
}
h2 {
border-bottom: none;
}
.about-sep {
margin-top: 1.5em;
width: 60%;
align-self: center;
}
.about-links {
@include responsive-buttons();
justify-content: center;
column-gap: 20px;
padding-top: 1.5em;
}
.about-link {
@include responsive-button();
@include media-breakpoint-up(lg) {
border: none;
}
}
}
// Tippy customizations
.tippy-box[data-theme~="quarto"] {
background-color: $body-bg;
border: solid $border-width $border-color;
border-radius: $border-radius;
color: $body-color;
font-size: $font-size-sm;
}
.tippy-box[data-theme~="quarto"] > .tippy-backdrop {
background-color: $body-bg;
}
.tippy-box[data-theme~="quarto"] > .tippy-arrow:after,
.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
content: "";
position: absolute;
z-index: -1;
}
.tippy-box[data-theme~="quarto"] > .tippy-arrow:after {
border-color: transparent;
border-style: solid;
}
.tippy-box[data-placement^="top"] > .tippy-arrow:before {
bottom: -6px;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
top: -6px;
}
.tippy-box[data-placement^="right"] > .tippy-arrow:before {
left: -6px;
}
.tippy-box[data-placement^="left"] > .tippy-arrow:before {
right: -6px;
}
.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:before {
border-top-color: $body-bg;
}
.tippy-box[data-theme~="quarto"][data-placement^="top"] > .tippy-arrow:after {
border-top-color: $border-color;
border-width: 7px 7px 0;
top: 17px;
left: 1px;
}
.tippy-box[data-theme~="quarto"][data-placement^="top"]
> .tippy-svg-arrow
> svg {
top: 16px;
}
.tippy-box[data-theme~="quarto"][data-placement^="top"]
> .tippy-svg-arrow:after {
top: 17px;
}
.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
> .tippy-arrow:before {
border-bottom-color: $body-bg;
bottom: 16px;
}
.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
> .tippy-arrow:after {
border-bottom-color: $border-color;
border-width: 0 7px 7px;
bottom: 17px;
left: 1px;
}
.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
> .tippy-svg-arrow
> svg {
bottom: 15px;
}
.tippy-box[data-theme~="quarto"][data-placement^="bottom"]
> .tippy-svg-arrow:after {
bottom: 17px;
}
.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:before {
border-left-color: $body-bg;
}
.tippy-box[data-theme~="quarto"][data-placement^="left"] > .tippy-arrow:after {
border-left-color: $border-color;
border-width: 7px 0 7px 7px;
left: 17px;
top: 1px;
}
.tippy-box[data-theme~="quarto"][data-placement^="left"]
> .tippy-svg-arrow
> svg {
left: 11px;
}
.tippy-box[data-theme~="quarto"][data-placement^="left"]
> .tippy-svg-arrow:after {
left: 12px;
}
.tippy-box[data-theme~="quarto"][data-placement^="right"]
> .tippy-arrow:before {
border-right-color: $body-bg;
right: 16px;
}
.tippy-box[data-theme~="quarto"][data-placement^="right"] > .tippy-arrow:after {
border-width: 7px 7px 7px 0;
right: 17px;
top: 1px;
border-right-color: $border-color;
}
.tippy-box[data-theme~="quarto"][data-placement^="right"]
> .tippy-svg-arrow
> svg {
right: 11px;
}
.tippy-box[data-theme~="quarto"][data-placement^="right"]
> .tippy-svg-arrow:after {
right: 12px;
}
.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow {
fill: $body-color;
}
.tippy-box[data-theme~="quarto"] > .tippy-svg-arrow:after {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
background-size: 16px 6px;
width: 16px;
height: 6px;
}
// floating
.top-right {
position: absolute;
top: 1em;
right: 1em;
}
// hidden
// https://github.com/quarto-dev/quarto-cli/issues/5403#issuecomment-1533791947
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.hidden {
display: none !important;
}
.zindex-bottom {
z-index: -1 !important;
}
// layout and figures
figure.figure {
display: block;
}
.quarto-layout-panel {
margin-bottom: 1em;
}
.quarto-layout-panel > figure {
width: 100%;
}
.quarto-layout-panel > figure > figcaption,
.quarto-layout-panel > .panel-caption {
margin-top: 10pt;
}
.quarto-layout-panel > .table-caption {
margin-top: 0px;
}
.table-caption p {
margin-bottom: 0.5em;
}
.quarto-layout-row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.quarto-layout-valign-top {
align-items: flex-start;
}
.quarto-layout-valign-bottom {
align-items: flex-end;
}
.quarto-layout-valign-center {
align-items: center;
}
.quarto-layout-cell {
position: relative;
margin-right: 20px;
}
.quarto-layout-cell:last-child {
margin-right: 0;
}
.quarto-layout-cell figure,
.quarto-layout-cell > p {
margin: 0.2em;
}
.quarto-layout-cell img {
max-width: 100%;
}
.quarto-layout-cell .html-widget {
width: 100% !important;
}
.quarto-layout-cell div figure p {
margin: 0;
}
.quarto-layout-cell figure {
display: block;
margin-inline-start: 0;
margin-inline-end: 0;
}
.quarto-layout-cell table {
display: inline-table;
}
.quarto-layout-cell-subref figcaption,
figure .quarto-layout-row figure figcaption {
text-align: center;
font-style: italic;
}
.quarto-figure {
position: relative;
margin-bottom: 1em;
}
.quarto-figure > figure {
width: 100%;
margin-bottom: 0;
}
.quarto-figure-left > figure > p,
.quarto-figure-left > figure > div /* for mermaid and dot diagrams */ {
text-align: left;
}
.quarto-figure-center > figure > p,
.quarto-figure-center > figure > div /* for mermaid and dot diagrams */ {
text-align: center;
}
.quarto-figure-right > figure > p,
.quarto-figure-right > figure > div /* for mermaid and dot diagrams */ {
text-align: right;
}
.quarto-figure > figure > div.cell-annotation,
.quarto-figure > figure > div code {
text-align: left; /* override align center for code blocks */
}
figure > p:empty {
display: none;
}
figure > p:first-child {
margin-top: 0;
margin-bottom: 0;
}
figure > figcaption.quarto-float-caption-bottom {
margin-bottom: 0.5em;
}
figure > figcaption.quarto-float-caption-top {
margin-top: 0.5em;
}
// anchor
// anchor js
div[id^="tbl-"] {
position: relative;
}
.quarto-figure > .anchorjs-link {
position: absolute;
top: 0.6em;
right: 0.5em;
}
div[id^="tbl-"] > .anchorjs-link {
position: absolute;
top: 0.7em;
right: 0.3em;
}
/* workaround for anchorjs not hitting on generic :hover selector */
.quarto-figure:hover > .anchorjs-link,
div[id^="tbl-"]:hover > .anchorjs-link,
h2:hover > .anchorjs-link,
h3:hover > .anchorjs-link,
h4:hover > .anchorjs-link,
h5:hover > .anchorjs-link,
h6:hover > .anchorjs-link,
.reveal-anchorjs-link > .anchorjs-link {
opacity: 1;
}
#title-block-header {
margin-block-end: 1rem;
position: relative;
margin-top: -1px; // Chrome draws 1px white line between navbar and title block
}
#title-block-header .abstract {
margin-block-start: 1rem;
}
#title-block-header .abstract .abstract-title {
font-weight: 600;
}
#title-block-header a {
text-decoration: none;
}
#title-block-header .author,
#title-block-header .date,
#title-block-header .doi {
margin-block-end: 0.2rem;
}
#title-block-header .quarto-title-block > div {
display: flex;
}
#title-block-header .quarto-title-block > div > h1 {
flex-grow: 1;
}
#title-block-header .quarto-title-block > div > button {
flex-shrink: 0;
height: 2.25rem;
margin-top: 0;
}
#title-block-header .quarto-title-block > div > button {
@if mixin-exists(media-breakpoint-up) {
@include media-breakpoint-up(lg) {
margin-top: 5px;
}
}
}
// (Remove bottom margin from paragraphs in table headers)
tr.header > th > p:last-of-type {
margin-bottom: 0px;
}
table,
table.table {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
caption,
.table-caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
}
figure.quarto-float-tbl figcaption.quarto-float-caption-top {
margin-top: 0.5rem;
margin-bottom: 0.25rem;
text-align: center;
}
figure.quarto-float-tbl figcaption.quarto-float-caption-bottom {
padding-top: 0.25rem;
margin-bottom: 0.5rem;
text-align: center;
}
// utterances
.utterances {
max-width: none;
margin-left: -8px;
}
// iframe
iframe {
margin-bottom: 1em;
}
// details
details {
margin-bottom: 1em;
}
details[show] {
margin-bottom: 0;
}
details > summary {
@if variable-exists(text-muted) {
color: $text-muted;
}
}
details > summary > p:only-child {
display: inline;
}
// codeCopy
pre.sourceCode,
code.sourceCode {
position: relative;
}
// Inline code should wrap
// See https://github.com/quarto-dev/quarto-cli/issues/2649
dd code:not(.sourceCode),
p code:not(.sourceCode) {
white-space: pre-wrap;
}
// default to scrolling output rather than wrapping, since
// multi-column tabular output (very common for R & Python) is
// unreadable when wrapped.
code {
white-space: pre;
}
@media print {
code {
white-space: pre-wrap;
}
}
pre > code {
display: block;
}
pre > code.sourceCode {
white-space: $code-white-space;
}
pre > code.sourceCode > span > a:first-child::before {
text-decoration: none;
}
pre.code-overflow-wrap > code.sourceCode {
white-space: pre-wrap;
}
pre.code-overflow-scroll > code.sourceCode {
white-space: pre;
}
// code linking (pkgdown style)
code a:any-link {
color: inherit;
text-decoration: none;
}
code a:hover {
color: inherit;
text-decoration: underline;
}
// task lists
ul.task-list {
padding-left: 1em;
}
// tippy
[data-tippy-root] {
display: inline-block;
}
.tippy-content .footnote-back {
display: none;
}
.footnote-back {
margin-left: 0.2em;
}
.tippy-content {
overflow-x: auto;
}
// embedded source code
.quarto-embedded-source-code {
display: none;
}
// unresolved crossrefs
.quarto-unresolved-ref {
font-weight: 600;
}
// html cover image injection
.quarto-cover-image {
max-width: 35%;
float: right;
margin-left: 30px;
}
// provide margin below jupyter widgets
.cell-output-display .widget-subarea {
margin-bottom: 1em;
}
// fix for selectize inputs getting their contents clipped
// this also works for knitr sql cells (see github issue #3497)
.cell-output-display:not(.no-overflow-x),
.knitsql-table:not(.no-overflow-x) {
overflow-x: auto;
}
.panel-input {
margin-bottom: 1em;
}
.panel-input > div,
.panel-input > div > div {
display: inline-block;
vertical-align: top;
padding-right: 12px;
}
.panel-input > p:last-child {
margin-bottom: 0;
}
.layout-sidebar {
margin-bottom: 1em;
}
.layout-sidebar .tab-content {
border: none;
}
.tab-content > .page-columns.active {
display: grid;
}
// default styling for .code-preview=".." iframes
div.sourceCode > iframe {
width: 100%;
height: 300px;
// this negative-margin hack works around the rendering issue with
// iframes and parent elements with rounded corners if the border
// radius for (eg) div.sourceCode is changed, this is likely going
// to need changing as well.
@if variable-exists(code-preview-margin-bottom) {
margin-bottom: $code-preview-margin-bottom;
} @else {
margin-bottom: -0.5em;
}
@if variable-exists(code-preview-border-color) {
border: $code-preview-border-color;
}
}
// link styling
a {
text-underline-offset: 3px;
}
/* Callout styling */
.callout pre.sourceCode {
padding-left: 0;
}
// ansi escaping
div.ansi-escaped-output {
font-family: monospace;
display: block;
}
/*!
*
* ansi colors from IPython notebook's
*
* we also add `bright-[color]-` synonyms for the `-[color]-intense` classes since
* that seems to be what ansi_up emits
*
*/
/* CSS font colors for translated ANSI escape sequences */
/* The color values are a mix of
http://www.xcolors.net/dl/baskerville-ivorylight and
http://www.xcolors.net/dl/euphrasia */
.ansi-black-fg {
color: #3e424d;
}
.ansi-black-bg {
background-color: #3e424d;
}
.ansi-black-intense-black,
.ansi-bright-black-fg {
color: #282c36;
}
.ansi-black-intense-black,
.ansi-bright-black-bg {
background-color: #282c36;
}
.ansi-red-fg {
color: #e75c58;
}
.ansi-red-bg {
background-color: #e75c58;
}
.ansi-red-intense-red,
.ansi-bright-red-fg {
color: #b22b31;
}
.ansi-red-intense-red,
.ansi-bright-red-bg {
background-color: #b22b31;
}
.ansi-green-fg {
color: #00a250;
}
.ansi-green-bg {
background-color: #00a250;
}
.ansi-green-intense-green,
.ansi-bright-green-fg {
color: #007427;
}
.ansi-green-intense-green,
.ansi-bright-green-bg {
background-color: #007427;
}
.ansi-yellow-fg {
color: #ddb62b;
}
.ansi-yellow-bg {
background-color: #ddb62b;
}
.ansi-yellow-intense-yellow,
.ansi-bright-yellow-fg {
color: #b27d12;
}
.ansi-yellow-intense-yellow,
.ansi-bright-yellow-bg {
background-color: #b27d12;
}
.ansi-blue-fg {
color: #208ffb;
}
.ansi-blue-bg {
background-color: #208ffb;
}
.ansi-blue-intense-blue,
.ansi-bright-blue-fg {
color: #0065ca;
}
.ansi-blue-intense-blue,
.ansi-bright-blue-bg {
background-color: #0065ca;
}
.ansi-magenta-fg {
color: #d160c4;
}
.ansi-magenta-bg {
background-color: #d160c4;
}
.ansi-magenta-intense-magenta,
.ansi-bright-magenta-fg {
color: #a03196;
}
.ansi-magenta-intense-magenta,
.ansi-bright-magenta-bg {
background-color: #a03196;
}
.ansi-cyan-fg {
color: #60c6c8;
}
.ansi-cyan-bg {
background-color: #60c6c8;
}
.ansi-cyan-intense-cyan,
.ansi-bright-cyan-fg {
color: #258f8f;
}
.ansi-cyan-intense-cyan,
.ansi-bright-cyan-bg {
background-color: #258f8f;
}
.ansi-white-fg {
color: #c5c1b4;
}
.ansi-white-bg {
background-color: #c5c1b4;
}
.ansi-white-intense-white,
.ansi-bright-white-fg {
color: #a1a6b2;
}
.ansi-white-intense-white,
.ansi-bright-white-bg {
background-color: #a1a6b2;
}
.ansi-default-inverse-fg {
color: #ffffff;
}
.ansi-default-inverse-bg {
background-color: #000000;
}
.ansi-bold {
font-weight: bold;
}
.ansi-underline {
text-decoration: underline;
}
:root {
--quarto-body-bg: #{$body-bg};
--quarto-body-color: #{$body-color};
--quarto-text-muted: #{$text-muted};
--quarto-border-color: #{$table-border-color};
--quarto-border-width: #{$border-width};
@if not variable-exists(enable-rounded) or $enable-rounded == true {
--quarto-border-radius: #{$border-radius};
}
}
/* rules to support GT table styling */
table.gt_table {
color: var(--quarto-body-color);
font-size: 1em;
width: 100%; // to match other table styling
background-color: transparent;
border-top-width: inherit;
border-bottom-width: inherit;
border-color: var(--quarto-border-color);
}
table.gt_table th.gt_column_spanner_outer {
color: var(--quarto-body-color);
background-color: transparent;
border-top-width: inherit;
border-bottom-width: inherit;
border-color: var(--quarto-border-color);
}
table.gt_table th.gt_col_heading {
color: var(--quarto-body-color);
font-weight: bold;
background-color: transparent;
}
table.gt_table thead.gt_col_headings {
border-bottom: 1px solid currentColor;
border-top-width: inherit;
border-top-color: var(--quarto-border-color);
}
table.gt_table thead.gt_col_headings:not(:first-child) {
border-top-width: 1px;
border-top-color: var(--quarto-border-color);
}
table.gt_table td.gt_row {
border-bottom-width: 1px;
border-bottom-color: var(--quarto-border-color);
border-top-width: 0px;
}
table.gt_table tbody.gt_table_body {
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-color: var(--quarto-border-color);
border-top-color: currentColor;
}
/* restore previous pandoc columns behavior
(too many reports of slide layout breaking)
see https://github.com/jgm/pandoc/pull/8237
*/
div.columns {
display: initial;
gap: initial;
}
div.column {
display: inline-block;
overflow-x: initial;
vertical-align: top;
width: 50%;
}
// Code Annotation LayoutBoot
.code-annotation-tip-content {
word-wrap: break-word;
}
.code-annotation-container-hidden {
display: none !important;
}
dl.code-annotation-container-grid {
display: grid;
grid-template-columns: min-content auto;
dt {
grid-column: 1;
}
dd {
grid-column: 2;
}
}
pre.sourceCode.code-annotation-code {
padding-right: 0;
}
code.sourceCode .code-annotation-anchor {
z-index: 100;
position: relative;
float: right;
background-color: transparent;
}
// Add a bit of margin to the right of a checkbox
// https://github.com/quarto-dev/quarto-cli/issues/6627
input[type="checkbox"] {
margin-right: 0.5ch;
}
// Mermaid Theming
// if none come from theme, we need these
$body-color: #222 !default;
$body-bg: #fff !default;
$primary: #468 !default;
$secondary: #999 !default;
$font-family-sans-serif: sans-serif !default;
$font-weight-base: 400 !default;
/* SCSS variables
These are documented in quarto-cli/quarto-web:docs/authoring/_mermaid-theming.qmd
Make sure to update the docs if you change these.
*/
$mermaid-bg-color: $body-bg !default;
$mermaid-edge-color: $secondary !default;
$mermaid-node-fg-color: $body-color !default;
$mermaid-fg-color: $body-color !default;
$mermaid-fg-color--lighter: lighten($body-color, 10%) !default;
$mermaid-fg-color--lightest: lighten($body-color, 20%) !default;
$mermaid-font-family: $font-family-sans-serif !default;
$mermaid-font-weight: $font-weight-base !default;
$mermaid-label-bg-color: $body-bg !default;
$mermaid-label-fg-color: $primary !default;
$mermaid-node-bg-color: rgba($primary, 0.1) !default;
$mermaid-node-fg-color: $primary !default;
/* CSS variables */
:root {
--mermaid-bg-color: #{$mermaid-bg-color};
--mermaid-edge-color: #{$mermaid-edge-color};
--mermaid-node-fg-color: #{$mermaid-node-fg-color};
--mermaid-fg-color: #{$mermaid-fg-color};
--mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
--mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
--mermaid-font-family: #{$mermaid-font-family};
--mermaid-label-bg-color: #{$mermaid-label-bg-color};
--mermaid-label-fg-color: #{$mermaid-label-fg-color};
--mermaid-node-bg-color: #{$mermaid-node-bg-color};
--mermaid-node-fg-color: #{$mermaid-node-fg-color};
}
@media print {
:root {
font-size: 11pt;
}
#quarto-sidebar,
#TOC,
.nav-page {
display: none;
}
.page-columns .content {
grid-column-start: page-start;
}
.fixed-top {
position: relative;
}
.panel-caption,
.figure-caption,
figcaption {
color: #666;
}
}
.code-copy-button {
position: absolute;
top: 0;
right: 0;
border: 0;
margin-top: 5px;
margin-right: 5px;
background-color: transparent;
z-index: 3;
}
.code-copy-button-tooltip {
font-size: 0.75em;
}
#{$code-copy-selector} .code-copy-button > .bi::before {
display: inline-block;
height: 1rem;
width: 1rem;
content: "";
vertical-align: -0.125em;
@if variable-exists(btn-code-copy-color) {
background-image: url('data:image/svg+xml,');
} @else {
background-image: url('data:image/svg+xml,');
}
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
#{$code-copy-selector} .code-copy-button-checked > .bi::before {
@if variable-exists(btn-code-copy-color) {
background-image: url('data:image/svg+xml,');
} @else {
background-image: url('data:image/svg+xml,');
}
}
@if variable-exists(btn-code-copy-color-active) {
#{$code-copy-selector} .code-copy-button:hover > .bi::before {
background-image: url('data:image/svg+xml,');
}
#{$code-copy-selector} .code-copy-button-checked:hover > .bi::before {
background-image: url('data:image/svg+xml,');
}
}
main {
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 1em;
}
}
// the scss mode for vs code doesn't like the fancy :has(> p) selector, but
// it's valid: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
ul > li:not(:has(> p)) > ul,
ol > li:not(:has(> p)) > ul,
ul > li:not(:has(> p)) > ol,
ol > li:not(:has(> p)) > ol {
margin-bottom: 0;
}
ul > li:not(:has(> p)) > ul > li:has(> p),
ol > li:not(:has(> p)) > ul > li:has(> p),
ul > li:not(:has(> p)) > ol > li:has(> p),
ol > li:not(:has(> p)) > ol > li:has(> p) {
margin-top: 1rem;
}
// Grid layout
body {
margin: 0;
}
// If we're applying display: grid, we're losing our display: border-box
// behavior, so we need to reset bottom margin for title block
main.page-columns > header > h1.title {
margin-bottom: 0;
}
@include media-breakpoint-up(lg) {
body {
.page-columns {
@include page-columns-default-wide();
}
}
body.fullcontent:not(.floating):not(.docked) {
.page-columns {
@include page-columns-fullcontent-wide();
}
}
body.slimcontent:not(.floating):not(.docked) {
.page-columns {
@include page-columns-slimcontent-wide();
}
}
body.listing:not(.floating):not(.docked) {
.page-columns {
@include page-columns-listing-wide();
}
}
body:not(.floating):not(.docked) {
.page-columns.toc-left {
@include page-columns-tocleft-wide();
.page-columns {
@include page-columns-tocleft-wide();
}
}
}
body.floating {
.page-columns {
@include page-columns-float-wide();
}
}
body.docked {
.page-columns {
@include page-columns-docked-wide();
}
}
body.docked.fullcontent {
.page-columns {
@include page-columns-docked-fullcontent-wide();
}
}
body.floating.fullcontent {
.page-columns {
@include page-columns-float-fullcontent-wide();
}
}
body.docked.slimcontent {
.page-columns {
@include page-columns-docked-slimcontent-wide();
}
}
body.docked.listing {
.page-columns {
@include page-columns-docked-listing-wide();
}
}
body.floating.slimcontent {
.page-columns {
@include page-columns-float-slimcontent-wide();
}
}
body.floating.listing {
.page-columns {
@include page-columns-float-listing-wide();
}
}
}
@include media-breakpoint-down(lg) {
body {
.page-columns {
@include page-columns-default-mid();
}
}
body.fullcontent:not(.floating):not(.docked) {
.page-columns {
@include page-columns-fullcontent-mid();
}
}
body.slimcontent:not(.floating):not(.docked) {
.page-columns {
@include page-columns-slimcontent-mid();
}
}
body.listing:not(.floating):not(.docked) {
.page-columns {
@include page-columns-listing-mid();
}
}
body:not(.floating):not(.docked) {
.page-columns.toc-left {
@include page-columns-tocleft-mid();
.page-columns {
@include page-columns-tocleft-mid();
}
}
}
body.floating {
.page-columns {
@include page-columns-float-mid();
}
}
body.docked {
.page-columns {
@include page-columns-docked-mid();
}
}
body.docked.fullcontent {
.page-columns {
@include page-columns-docked-fullcontent-mid();
}
}
body.floating.fullcontent {
.page-columns {
@include page-columns-float-fullcontent-mid();
}
}
body.docked.slimcontent {
.page-columns {
@include page-columns-docked-slimcontent-mid();
}
}
body.docked.listing {
.page-columns {
@include page-columns-docked-listing-mid();
}
}
body.floating.slimcontent {
.page-columns {
@include page-columns-float-slimcontent-mid();
}
}
body.floating.listing {
.page-columns {
@include page-columns-float-listing-mid();
}
}
}
@include media-breakpoint-down(md) {
body,
body.fullcontent:not(.floating):not(.docked),
body.slimcontent:not(.floating):not(.docked),
body.docked,
body.docked.slimcontent,
body.docked.fullcontent,
body.floating,
body.floating.slimcontent,
body.floating.fullcontent {
.page-columns {
@include page-columns();
@include grid-template-columns-narrow();
}
}
body:not(.floating):not(.docked) {
.page-columns.toc-left {
@include page-columns();
@include grid-template-columns-narrow();
.page-columns {
@include page-columns();
@include grid-template-columns-narrow();
}
}
}
nav[role="doc-toc"] {
display: none;
}
}
// Positions a header, body, and footer in rows
body,
.page-row-navigation {
grid-template-rows: [page-top] max-content [contents-top] max-content [contents-bottom] max-content [page-bottom];
}
// Positions contents followed by a region below the content
// (used for pagination controls)
.page-rows-contents {
grid-template-rows:
[content-top] minmax(max-content, 1fr) [content-bottom] minmax(
60px,
max-content
)
[page-bottom];
}
.page-full {
grid-column: screen-start / screen-end !important;
}
.page-columns > * {
grid-column: body-content-start / body-content-end;
}
.page-columns.column-page > * {
grid-column: page-start / page-end;
}
.page-columns.column-page-left .page-columns.page-full > *,
.page-columns.column-page-left > * {
grid-column: page-start / body-content-end;
}
.page-columns.column-page-right .page-columns.page-full > *,
.page-columns.column-page-right > * {
grid-column: body-content-start / page-end;
}
// Automatically creates new rows
.page-rows {
grid-auto-rows: auto;
}
.header {
grid-column: screen-start / screen-end;
grid-row: page-top / contents-top;
}
#quarto-content {
padding: 0;
grid-column: screen-start / screen-end;
grid-row: contents-top / contents-bottom;
}
body.floating {
.sidebar.sidebar-navigation {
grid-column: page-start / body-start;
grid-row: content-top / page-bottom;
}
}
body.docked {
.sidebar.sidebar-navigation {
grid-column: screen-start / body-start;
grid-row: content-top / page-bottom;
}
}
.sidebar.toc-left {
grid-column: page-start / body-start;
grid-row: content-top / page-bottom;
}
.sidebar.margin-sidebar {
grid-column: body-end / page-end;
grid-row: content-top / page-bottom;
}
.page-columns .content {
grid-column: body-content-start / body-content-end;
grid-row: content-top / content-bottom;
align-content: flex-start;
}
.page-columns .page-navigation {
grid-column: body-content-start / body-content-end;
grid-row: content-bottom / page-bottom;
}
.page-columns .footer {
grid-column: screen-start / screen-end;
grid-row: contents-bottom / page-bottom;
}
.page-columns .column-body {
grid-column: body-content-start / body-content-end;
}
.page-columns .column-body-fullbleed {
grid-column: body-start / body-end;
}
.page-columns .column-body-outset {
grid-column: body-start-outset / body-end-outset;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-body-outset-left {
grid-column: body-start-outset / body-content-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-body-outset-right {
grid-column: body-content-start / body-end-outset;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-page {
grid-column: page-start / page-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-page-inset {
grid-column: page-start-inset / page-end-inset;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-page-inset-left {
grid-column: page-start-inset / body-content-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-page-inset-right {
grid-column: body-content-start / page-end-inset;
z-index: $zindex-pagelayout;
opacity: 0.999;
figcaption {
@include column-spanning-element();
}
}
.page-columns .column-page-left {
grid-column: page-start / body-content-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-page-right {
grid-column: body-content-start / page-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
figcaption {
@include column-spanning-element();
}
}
#quarto-content.page-columns {
#quarto-margin-sidebar,
#quarto-sidebar {
z-index: 1;
}
@include media-breakpoint-down(lg) {
#quarto-margin-sidebar.collapse,
#quarto-sidebar.collapse,
#quarto-margin-sidebar.collapsing,
#quarto-sidebar.collapsing {
z-index: $zindex-modal;
}
}
main.column-page,
main.column-page-right,
main.column-page-left {
z-index: 0;
}
}
.page-columns .column-screen-inset {
grid-column: screen-start-inset / screen-end-inset;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-inset-left {
grid-column: screen-start-inset / body-content-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-inset-right {
grid-column: body-content-start / screen-end-inset;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen {
grid-column: screen-start / screen-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-left {
grid-column: screen-start / body-content-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-right {
grid-column: body-content-start / screen-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-inset-shaded {
grid-column: screen-start / screen-end;
padding: 1em;
background: $light;
z-index: $zindex-pagelayout;
opacity: 0.999;
margin-bottom: 1em;
}
.zindex-content {
z-index: $zindex-pagelayout;
opacity: 0.999;
}
.zindex-modal {
z-index: $zindex-modal;
opacity: 0.999;
}
.zindex-over-content {
z-index: #{$zindex-dropdown - 1};
opacity: 0.999;
}
img.img-fluid.column-screen,
img.img-fluid.column-screen-inset-shaded,
img.img-fluid.column-screen-inset,
img.img-fluid.column-screen-inset-left,
img.img-fluid.column-screen-inset-right,
img.img-fluid.column-screen-left,
img.img-fluid.column-screen-right {
width: 100%;
}
@include media-breakpoint-up(lg) {
.margin-caption,
div.aside,
aside:not(.footnotes):not(.sidebar),
.column-margin {
grid-column: body-end / page-end !important;
z-index: $zindex-pagelayout;
}
.column-sidebar {
grid-column: page-start / body-start !important;
z-index: $zindex-pagelayout;
}
.column-leftmargin {
grid-column: screen-start-inset / body-start !important;
z-index: $zindex-pagelayout;
}
.no-row-height {
height: 1em;
overflow: visible;
}
}
@include media-breakpoint-down(lg) {
.margin-caption,
div.aside,
aside:not(.footnotes):not(.sidebar),
.column-margin {
grid-column: body-end / page-end !important;
z-index: $zindex-pagelayout;
}
.no-row-height {
height: 1em;
overflow: visible;
}
.page-columns.page-full {
overflow: visible;
}
.page-columns.toc-left {
.margin-caption,
div.aside,
aside:not(.footnotes):not(.sidebar),
.column-margin {
grid-column: body-content-start / body-content-end !important;
z-index: $zindex-pagelayout;
opacity: 0.999;
}
.no-row-height {
height: initial;
overflow: initial;
}
}
}
@include media-breakpoint-down(md) {
.margin-caption,
div.aside,
aside:not(.footnotes):not(.sidebar),
.column-margin {
grid-column: body-content-start / body-content-end !important;
z-index: $zindex-pagelayout;
opacity: 0.999;
}
.no-row-height {
height: initial;
overflow: initial;
}
#quarto-margin-sidebar {
display: none;
}
#quarto-sidebar-toc-left {
display: none;
}
.hidden-sm {
display: none;
}
}
// Panel Grid (custom grid for our panel system)
.panel-grid {
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(24, 1fr);
gap: 1em;
@include make-cssgrid(24);
}
// Rest of rules
body {
@if variable-exists(margin-top) {
margin-top: $margin-top;
}
@if variable-exists(margin-bottom) {
margin-bottom: $margin-bottom;
}
@if variable-exists(margin-left) {
margin-left: $margin-left;
}
@if variable-exists(margin-right) {
margin-right: $margin-right;
}
}
main {
margin-top: 1em;
margin-bottom: 1em;
}
h1,
h2 {
color: if(
$headings-color != null,
$headings-color,
theme-dim($body-color, 8%)
);
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: $h1h2h3-font-weight;
}
h1.title {
margin-top: 0;
}
main.content > section:first-of-type > h2:first-child {
margin-top: 0;
}
h2 {
border-bottom: 1px solid $table-border-color;
padding-bottom: 0.5rem;
}
h3 {
font-weight: $h1h2h3-font-weight;
}
h3,
h4 {
opacity: 0.9;
margin-top: 1.5rem;
}
h5,
h6 {
opacity: 0.9;
}
.header-section-number {
@include body-secondary;
}
.nav-link.active .header-section-number {
color: inherit;
}
mark {
padding: 0em;
}
// The 1.4 figcaption classes are
//
// quarto-float-caption or quarto-subfloat-caption, depending
// on whether it's a main or subfloat caption.
//
// In addition, the name of the float is added as a class
// as well ("figure", "table", etc, including custom
// float types like a hypothetical "diagram")
//
// this way, custom float types can be both supported and
// offered good defaults.
//
// FIXME right now we're classing all of figcaption,
// but we should clean this up.
.panel-caption,
.figure-caption,
.subfigure-caption,
.table-caption,
figcaption,
caption {
font-size: 0.9rem;
@include body-secondary;
}
// as of 1.4, tables emitted by quarto shouldn't have caption
// elements, but we keep this here in case some strange rawhtml
// table sneaks through.
.quarto-layout-cell[data-ref-parent] caption {
@include body-secondary;
}
.column-margin figcaption,
.margin-caption,
div.aside,
aside,
.column-margin {
@include body-secondary;
font-size: 0.825rem;
}
.panel-caption.margin-caption {
text-align: inherit;
}
.column-margin.column-container p {
margin-bottom: 0;
}
.column-margin.column-container > *:not(.collapse):first-child {
padding-bottom: 0.5em;
display: block;
}
.column-margin.column-container > *:not(.collapse):not(:first-child) {
padding-top: 0.5em;
padding-bottom: 0.5em;
display: block;
}
.column-margin.column-container > *.collapse:not(.show) {
display: none;
}
@include media-breakpoint-up(md) {
.column-margin.column-container .callout-margin-content:first-child {
margin-top: 4.5em;
}
.column-margin.column-container .callout-margin-content-simple:first-child {
margin-top: 3.5em;
}
}
.margin-caption > * {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
// Caption and footnotes
// sort out font size
$code-block-font-size: $small-font-size !default;
// sort out border color
$code-block-border-left-color: $table-border-color !default;
@if type_of($code-block-border-left) == color {
$code-block-border-left-color: $code-block-border-left;
}
// sort out background color
$code-block-bg-color: quarto-color.adjust(
$progress-bg,
$alpha: $code-block-bg-alpha
) !default;
@if type_of($code-block-bg) == color {
$code-block-bg-color: $code-block-bg;
}
// stack layout panels on mobile devices
@include media-breakpoint-down(md) {
.quarto-layout-row {
flex-direction: column;
}
}
.nav-tabs .nav-item {
margin-top: 1px;
cursor: pointer;
}
.tab-content {
margin-top: 0px;
border-left: $nav-tabs-border-color $nav-tabs-border-width solid;
border-right: $nav-tabs-border-color $nav-tabs-border-width solid;
border-bottom: $nav-tabs-border-color $nav-tabs-border-width solid;
margin-left: 0;
padding: 1em;
margin-bottom: 1em;
}
@include media-breakpoint-down(md) {
.layout-sidebar {
margin-left: 0;
margin-right: 0;
}
}
.panel-sidebar,
.panel-sidebar .form-control,
.panel-input,
.panel-input .form-control,
.selectize-dropdown {
font-size: 0.9rem;
}
.panel-sidebar .form-control,
.panel-input .form-control {
padding-top: 0.1rem;
}
.tab-pane div.sourceCode {
margin-top: 0px;
}
.tab-pane > p {
padding-top: 0;
}
.tab-pane > p:nth-child(1) {
padding-top: 0;
}
.tab-pane > p:last-child {
margin-bottom: 0;
}
.tab-pane > pre:last-child {
margin-bottom: 0;
}
.tab-content > .tab-pane:not(.active) {
display: none !important;
}
div.sourceCode {
// Clear code background if is not specified
@if $code-block-bg {
background-color: $code-block-bg-color;
border: 1px solid $code-block-bg-color;
@if $enable-rounded {
border-radius: $border-radius;
}
} @else {
background-color: $body-bg !important;
border: none;
padding: 0;
}
@if variable-exists(code-block-color) {
color: $code-block-color;
}
}
@if variable-exists(code-block-color) {
div.sourceCode pre.sourceCode {
color: $code-block-color;
}
}
pre.sourceCode {
background-color: transparent;
}
pre.sourceCode {
// Border
@if $code-block-border-left {
border-left: $code-block-border-left-size;
border-left-style: $code-block-border-left-style;
border-left-color: $code-block-border-left-color;
padding-left: $code-block-padding-left;
border-right: none;
border-top: none;
border-bottom: none;
} @else {
border: none;
}
font-size: $code-block-font-size;
overflow: visible !important;
@if $code-block-bg {
padding: $code-block-bg-padding;
}
}
pre.sourceCode > code.sourceCode {
@if not $code-block-bg {
padding: 0;
}
}
div.sourceCode {
overflow-y: hidden;
}
.callout div.sourceCode {
margin-left: initial;
}
// improve treatment of blockquotes
.blockquote {
font-size: inherit;
padding-left: 1rem;
padding-right: 1.5rem;
@include body-secondary;
}
.blockquote {
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child {
margin-top: 0;
}
}
pre {
background-color: initial;
padding: initial;
border: initial;
}
// Maps the pandoc 'monobackgroundcolor' to bootstrap
// Note this only targets code outside of sourceCode blocks
@if variable-exists(mono-background-color) {
p code:not(.sourceCode),
li code:not(.sourceCode),
kbd,
pre:not(.sourceCode),
samp {
background-color: $mono-background-color;
padding: 0.2em;
}
}
p pre code:not(.sourceCode),
li pre code:not(.sourceCode),
pre code:not(.sourceCode) {
background-color: initial;
}
// Default padding if background is set
p code:not(.sourceCode),
li code:not(.sourceCode),
td code:not(.sourceCode) {
@if variable-exists(mono-background-color) {
background-color: $mono-background-color;
} @else if variable-exists(code-bg) {
background-color: $code-bg;
}
@if variable-exists(code-padding) {
padding: $code-padding;
} @else if variable-exists(code-bg) {
padding: 0.2em;
} @else if variable-exists(mono-background-color) {
padding: 0.2em;
}
}
nav p code:not(.sourceCode),
nav li code:not(.sourceCode),
nav td code:not(.sourceCode) {
background-color: transparent;
padding: 0;
}
td code:not(.sourceCode) {
white-space: pre-wrap;
}
#quarto-embedded-source-code-modal > .modal-dialog {
max-width: 1000px;
padding-left: 1.75rem;
padding-right: 1.75rem;
}
#quarto-embedded-source-code-modal
> .modal-dialog
> .modal-content
> .modal-body {
padding: 0;
}
#quarto-embedded-source-code-modal
> .modal-dialog
> .modal-content
> .modal-body
div.sourceCode {
margin: 0;
padding: 0.2rem 0.2rem;
border-radius: 0px;
border: none;
}
#quarto-embedded-source-code-modal
> .modal-dialog
> .modal-content
> .modal-header {
padding: 0.7rem;
}
.code-tools-button {
font-size: 1rem;
padding: 0.15rem 0.15rem;
margin-left: 5px;
color: $text-muted;
background-color: transparent;
transition: initial;
cursor: pointer;
}
.code-tools-button > .bi::before {
display: inline-block;
height: 1rem;
width: 1rem;
content: "";
vertical-align: -0.125em;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.code-tools-button:hover > .bi::before {
background-image: url('data:image/svg+xml,');
}
#quarto-embedded-source-code-modal .code-copy-button > .bi::before {
background-image: url('data:image/svg+xml,');
}
#quarto-embedded-source-code-modal .code-copy-button-checked > .bi::before {
background-image: url('data:image/svg+xml,');
}
/* table of contents */
.sidebar {
will-change: top;
transition: top 200ms linear;
position: sticky;
overflow-y: auto;
padding-top: 1.2em;
max-height: 100vh;
}
.sidebar.toc-left,
.sidebar.margin-sidebar {
top: 0px;
padding-top: 1em;
}
.sidebar.quarto-banner-title-block-sidebar {
& > * {
padding-top: 1.65em;
}
}
figure .quarto-notebook-link {
margin-top: 0.5em;
}
.quarto-notebook-link {
font-size: 0.75em;
color: $text-muted;
margin-bottom: 1em;
text-decoration: none;
display: block;
}
.quarto-notebook-link:hover {
text-decoration: underline;
color: $link-color;
}
.quarto-notebook-link::before {
display: inline-block;
height: 0.75rem;
width: 0.75rem;
margin-bottom: 0em;
margin-right: 0.25em;
content: "";
vertical-align: -0.125em;
@if variable-exists(text-muted) {
background-image: url('data:image/svg+xml,');
} @else {
background-image: url('data:image/svg+xml,');
}
background-repeat: no-repeat;
background-size: 0.75rem 0.75rem;
}
.toc-actions i.bi,
.quarto-code-links i.bi,
.quarto-other-links i.bi,
.quarto-alternate-notebooks i.bi,
.quarto-alternate-formats i.bi {
margin-right: 0.4em;
font-size: $toc-tools-font-size;
}
.quarto-other-links-text-target {
.quarto-code-links i.bi,
.quarto-other-links i.bi {
margin-right: 0.2em;
}
}
.quarto-other-formats-text-target .quarto-alternate-formats i.bi {
margin-right: 0.1em;
}
.toc-actions i.bi.empty,
.quarto-code-links i.bi.empty,
.quarto-other-links i.bi.empty,
.quarto-alternate-notebooks i.bi.empty,
.quarto-alternate-formats i.bi.empty {
padding-left: 1em;
}
.quarto-notebook {
h2 {
border-bottom: none;
}
.cell-container {
display: flex;
.cell {
flex-grow: 4;
}
.cell-decorator {
padding-top: 1.5em;
padding-right: 1em;
text-align: right;
}
&.code-fold .cell-decorator {
padding-top: 3em;
}
}
.cell-code code {
white-space: pre-wrap;
}
.cell .cell-output-stderr pre code,
.cell .cell-output-stdout pre code {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
}
.toc-actions,
.quarto-alternate-formats,
.quarto-other-links,
.quarto-code-links,
.quarto-alternate-notebooks {
padding-left: 0em;
}
.sidebar .toc-actions a,
.sidebar .quarto-alternate-formats a,
.sidebar .quarto-other-links a,
.sidebar .quarto-code-links a,
.sidebar .quarto-alternate-notebooks a,
.sidebar nav[role="doc-toc"] a {
text-decoration: none;
}
.sidebar .toc-actions a:hover,
.sidebar .quarto-other-links a:hover,
.sidebar .quarto-code-links a:hover,
.sidebar .quarto-alternate-formats a:hover,
.sidebar .quarto-alternate-notebooks a:hover {
color: $link-color;
}
.sidebar .toc-actions h2,
.sidebar .quarto-code-links h2,
.sidebar .quarto-other-links h2,
.sidebar .quarto-alternate-notebooks h2,
.sidebar .quarto-alternate-formats h2,
.sidebar nav[role="doc-toc"] > h2 {
font-weight: 500;
margin-bottom: 0.2rem;
margin-top: 0.3rem;
font-family: inherit;
border-bottom: 0;
padding-bottom: 0;
padding-top: 0px;
}
.sidebar .toc-actions > h2,
.sidebar .quarto-code-links > h2,
.sidebar .quarto-other-links > h2,
.sidebar .quarto-alternate-notebooks > h2,
.sidebar .quarto-alternate-formats > h2 {
font-size: $toc-tools-font-size;
}
.sidebar nav[role="doc-toc"] > h2 {
font-size: $toc-font-size;
}
.sidebar nav[role="doc-toc"] > ul a {
border-left: 1px solid $toc-inactive-border;
padding-left: 0.6rem;
}
.sidebar .toc-actions h2 > ul a,
.sidebar .quarto-code-links h2 > ul a,
.sidebar .quarto-other-links h2 > ul a,
.sidebar .quarto-alternate-notebooks h2 > ul a,
.sidebar .quarto-alternate-formats h2 > ul a {
border-left: none;
padding-left: 0.6rem;
}
.sidebar .toc-actions ul a:empty,
.sidebar .quarto-code-links ul a:empty,
.sidebar .quarto-other-links ul a:empty,
.sidebar .quarto-alternate-notebooks ul a:empty,
.sidebar .quarto-alternate-formats ul a:empty,
.sidebar nav[role="doc-toc"] > ul a:empty {
display: none;
}
.sidebar .toc-actions ul,
.sidebar .quarto-code-links ul,
.sidebar .quarto-other-links ul,
.sidebar .quarto-alternate-notebooks ul,
.sidebar .quarto-alternate-formats ul {
padding-left: 0;
list-style: none;
}
.sidebar nav[role="doc-toc"] ul {
list-style: none;
padding-left: 0;
list-style: none;
}
.sidebar nav[role="doc-toc"] > ul {
margin-left: 0.45em;
}
.quarto-margin-sidebar nav[role="doc-toc"] {
padding-left: 0.5em;
}
.sidebar .toc-actions > ul,
.sidebar .quarto-code-links > ul,
.sidebar .quarto-other-links > ul,
.sidebar .quarto-alternate-notebooks > ul,
.sidebar .quarto-alternate-formats > ul {
font-size: $toc-tools-font-size;
}
.sidebar nav[role="doc-toc"] > ul {
font-size: $toc-font-size;
}
.sidebar .toc-actions ul li a,
.sidebar .quarto-code-links ul li a,
.sidebar .quarto-other-links ul li a,
.sidebar .quarto-alternate-notebooks ul li a,
.sidebar .quarto-alternate-formats ul li a,
.sidebar nav[role="doc-toc"] > ul li a {
line-height: 1.1rem;
padding-bottom: 0.2rem;
padding-top: 0.2rem;
color: inherit;
}
$toc-indent-depth: 5;
$indent: 1.2em;
@for $i from 1 through $toc-indent-depth {
$selector-depth: repeat-chars(" ul > li >", $i);
.sidebar nav[role="doc-toc"] ul > li > #{$selector-depth} a {
padding-left: #{$indent * $i};
}
}
.sidebar nav[role="doc-toc"] ul > li > a.active,
.sidebar nav[role="doc-toc"] ul > li > ul > li > a.active {
border-left: 1px solid $toc-active-border;
color: $toc-color !important;
}
.sidebar nav[role="doc-toc"] ul > li > a:hover,
.sidebar nav[role="doc-toc"] ul > li > ul > li > a:hover {
color: $toc-color !important;
}
// tweaking default keyboard settings
kbd,
.kbd {
color: $body-color;
@if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
background-color: shift-color($gray-100, 70%);
} @else {
background-color: $gray-100;
}
border: 1px solid;
border-radius: 5px;
border-color: $table-border-color;
}
// tweak pandoc default hanging indent
.quarto-appendix-contents div.hanging-indent {
margin-left: 0em;
}
.quarto-appendix-contents div.hanging-indent div.csl-entry {
margin-left: 1em;
text-indent: -1em;
}
// footnotes/citations
.citation a,
.footnote-ref {
text-decoration: none;
}
.footnotes ol {
padding-left: 1em;
}
.tippy-content > * {
margin-bottom: 0.7em;
}
.tippy-content > *:last-child {
margin-bottom: 0;
}
@if $code-block-border-left {
// Align source code and callout text (not border) with main body text when there is room
@include media-breakpoint-up(lg) {
// Cards with header
.callout:not(.no-icon) {
margin-left: add(add(-0.4em, -$callout-border-width), -1px);
}
.callout {
margin-left: add(-0.4em, -$callout-border-width);
}
div.sourceCode {
margin-left: add(
add(-$code-block-padding-left, -$code-block-border-left-size),
2px
);
}
}
}
// Callouts
.callout {
margin-top: $callout-margin-top;
margin-bottom: $callout-margin-bottom;
border-radius: $border-radius;
overflow-wrap: break-word;
}
.callout .callout-title-container {
overflow-wrap: anywhere;
}
.callout.callout-style-simple {
padding: 0.4em 0.7em;
border-left: $callout-border-width solid;
border-right: 1px solid $table-border-color;
border-top: 1px solid $table-border-color;
border-bottom: 1px solid $table-border-color;
}
.callout.callout-style-default {
border-left: $callout-border-width solid;
border-right: 1px solid $table-border-color;
border-top: 1px solid $table-border-color;
border-bottom: 1px solid $table-border-color;
}
.callout .callout-body-container {
flex-grow: 1;
}
.callout.callout-style-simple .callout-body {
font-size: 0.9rem;
font-weight: 400;
}
.callout.callout-style-default .callout-body {
font-size: 0.9rem;
font-weight: 400;
}
.callout:not(.no-icon).callout-titled.callout-style-simple .callout-body {
padding-left: 1.6em;
}
.callout.callout-titled > .callout-header {
padding-top: 0.2em;
margin-bottom: -0.2em;
}
.callout.callout-style-simple > div.callout-header {
border-bottom: none;
font-size: 0.9rem;
font-weight: 600;
opacity: 75%;
}
.callout.callout-style-default > div.callout-header {
border-bottom: none;
font-weight: 600;
opacity: 85%;
font-size: 0.9rem;
padding-left: 0.5em;
padding-right: 0.5em;
}
.callout.callout-style-default .callout-body {
padding-left: 0.5em;
padding-right: 0.5em;
}
.callout.callout-style-default .callout-body > :first-child {
padding-top: 0.5rem;
margin-top: 0;
}
.callout > div.callout-header[data-bs-toggle="collapse"] {
cursor: pointer;
}
.callout.callout-style-default .callout-header[aria-expanded="false"],
.callout.callout-style-default .callout-header[aria-expanded="true"] {
padding-top: 0px;
margin-bottom: 0px;
align-items: center;
}
.callout.callout-titled .callout-body > :last-child:not(.sourceCode),
.callout.callout-titled .callout-body > div > :last-child:not(.sourceCode) {
padding-bottom: 0.5rem;
margin-bottom: 0;
}
.callout:not(.callout-titled) .callout-body > :first-child,
.callout:not(.callout-titled) .callout-body > div > :first-child {
margin-top: 0.25rem;
}
.callout:not(.callout-titled) .callout-body > :last-child,
.callout:not(.callout-titled) .callout-body > div > :last-child {
margin-bottom: 0.2rem;
}
$code-block-border-left-color: $table-border-color !default;
.callout.callout-style-simple .callout-icon::before,
.callout.callout-style-simple .callout-toggle::before {
height: 1rem;
width: 1rem;
display: inline-block;
content: "";
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.callout.callout-style-default .callout-icon::before,
.callout.callout-style-default .callout-toggle::before {
height: 0.9rem;
width: 0.9rem;
display: inline-block;
content: "";
background-repeat: no-repeat;
background-size: 0.9rem 0.9rem;
}
.callout.callout-style-default .callout-toggle::before {
margin-top: 5px;
}
.callout .callout-btn-toggle .callout-toggle::before {
transition: transform 0.2s linear;
}
.callout .callout-header[aria-expanded="false"] .callout-toggle::before {
transform: rotate(-90deg);
}
.callout .callout-header[aria-expanded="true"] .callout-toggle::before {
transform: none;
}
.callout.callout-style-simple:not(.no-icon) div.callout-icon-container {
padding-top: 0.2em;
padding-right: 0.55em;
}
.callout.callout-style-default:not(.no-icon) div.callout-icon-container {
padding-top: 0.1em;
padding-right: 0.35em;
}
.callout.callout-style-default:not(.no-icon) div.callout-title-container {
margin-top: -1px;
}
.callout.callout-style-default.callout-caution:not(.no-icon)
div.callout-icon-container {
padding-top: 0.3em;
padding-right: 0.35em;
}
.callout > .callout-body > .callout-icon-container > .no-icon,
.callout > .callout-header > .callout-icon-container > .no-icon {
display: none;
}
// Default values for callout colors
$callout-color-note: $blue !default;
$callout-color-tip: $green !default;
$callout-color-important: $red !default;
$callout-color-caution: $orange !default;
$callout-color-warning: $yellow !default;
// Generate per callout type css to customize their appearance
// Define the callouts for which we should define styles
$callouts: (
// NOTE
"note":
(
"color": $callout-color-note,
"icon":
'',
),
// TIP
"tip":
(
"color": $callout-color-tip,
"icon":
'',
),
// WARNING
"warning":
(
"color": $callout-color-warning,
"icon":
'',
),
// CAUTION
"caution":
(
"color": $callout-color-caution,
"icon":
'',
),
// IMPORTANT
"important":
(
"color": $callout-color-important,
"icon":
'',
)
);
div.callout.callout {
border-left-color: $text-muted;
}
div.callout.callout-style-default > .callout-header {
background-color: $text-muted;
}
@each $name, $info in $callouts {
div.callout-#{$name}.callout {
border-left-color: shift-color(
quarto-map.get($info, "color"),
$callout-border-scale
);
}
div.callout-#{$name}.callout-style-default > .callout-header {
@if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
background-color: shift-color(quarto-map.get($info, "color"), 70%);
} @else {
background-color: shift-color(quarto-map.get($info, "color"), -90%);
}
}
$shifted-color: #{shift-color(
quarto-map.get($info, "color"),
$callout-icon-scale
)};
$shifted-color-svg: str-replace($shifted-color, "#", "%23");
div.callout-#{$name}:not(.callout-titled) .callout-icon::before {
background-image: #{"url('data:image/svg+xml," +
str-replace(
quarto-map.get($info, "icon"),
'fill="currentColor"',
'style="fill: #{$shifted-color-svg}"'
) +
"');"};
}
div.callout-#{$name}.callout-titled .callout-icon::before {
background-image: #{"url('data:image/svg+xml," +
str-replace(
quarto-map.get($info, "icon"),
'fill="currentColor"',
'style="fill: #{$shifted-color-svg}"'
) +
"');"};
}
div.callout-#{$name} .callout-toggle::before {
background-image: url('data:image/svg+xml,');
}
}
.quarto-toggle-container {
display: flex;
align-items: center;
}
// dark mode
.quarto-reader-toggle .bi::before,
.quarto-color-scheme-toggle .bi::before {
display: inline-block;
height: 1rem;
width: 1rem;
content: "";
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.sidebar-navigation {
padding-left: 20px;
}
.navbar {
background-color: $navbar-bg;
color: $navbar-fg;
}
.navbar .quarto-color-scheme-toggle:not(.alternate) .bi::before {
background-image: url('data:image/svg+xml,');
}
.navbar .quarto-color-scheme-toggle.alternate .bi::before {
background-image: url('data:image/svg+xml,');
}
.sidebar-navigation .quarto-color-scheme-toggle:not(.alternate) .bi::before {
background-image: url('data:image/svg+xml,');
}
.sidebar-navigation .quarto-color-scheme-toggle.alternate .bi::before {
background-image: url('data:image/svg+xml,');
}
// sidebar handling
.quarto-sidebar-toggle {
border-color: $border-color;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
border-style: solid;
border-width: 1px;
overflow: hidden;
border-top-width: 0px;
padding-top: 0px !important;
}
.quarto-sidebar-toggle-title {
cursor: pointer;
padding-bottom: 2px;
margin-left: 0.25em;
text-align: center;
font-weight: 400;
font-size: 0.775em;
}
#quarto-content {
.quarto-sidebar-toggle {
background: theme-dim($body-bg, 2%);
}
.quarto-sidebar-toggle-title {
color: $body-color;
}
}
.quarto-sidebar-toggle-icon {
color: $border-color;
margin-right: 0.5em;
float: right;
transition: transform 0.2s ease;
}
.quarto-sidebar-toggle-icon::before {
padding-top: 5px;
}
.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-icon {
transform: rotate(-180deg);
}
.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-title {
border-bottom: solid $border-color 1px;
}
.quarto-sidebar-toggle-contents {
background-color: $body-bg;
padding-right: 10px;
padding-left: 10px;
margin-top: 0px !important;
transition: max-height 0.5s ease;
}
.quarto-sidebar-toggle.expanded .quarto-sidebar-toggle-contents {
padding-top: 1em;
padding-bottom: 10px;
}
.sidebar-menu-container {
@include media-breakpoint-down(md) {
padding-bottom: 5em;
}
}
.quarto-sidebar-toggle:not(.expanded) .quarto-sidebar-toggle-contents {
padding-top: 0px !important;
padding-bottom: 0px;
}
nav[role="doc-toc"] {
z-index: $zindex-sticky;
}
#quarto-sidebar > *,
nav[role="doc-toc"] > * {
transition: opacity 0.1s ease, border 0.1s ease;
}
#quarto-sidebar.slow > *,
nav[role="doc-toc"].slow > * {
transition: opacity 0.4s ease, border 0.4s ease;
}
.quarto-color-scheme-toggle:not(.alternate).top-right .bi::before {
background-image: url('data:image/svg+xml,');
}
.quarto-color-scheme-toggle.alternate.top-right .bi::before {
background-image: url('data:image/svg+xml,');
}
// Quarto Appendix Treatment
#quarto-appendix.default {
border-top: 1px solid $border-color;
}
#quarto-appendix.default {
background-color: $body-bg;
padding-top: 1.5em;
margin-top: 2em;
z-index: $zindex-pagelayout;
.quarto-appendix-heading {
margin-top: 0;
line-height: 1.4em;
font-weight: 600;
opacity: 0.9;
border-bottom: none;
margin-bottom: 0;
}
// Remove botoom margin from specific elements
.footnotes ol,
.footnotes ol li > p:last-of-type,
.quarto-appendix-contents > p:last-of-type {
margin-bottom: 0;
}
.footnotes ol {
margin-left: 0.5em;
}
.quarto-appendix-secondary-label {
margin-bottom: 0.4em;
}
.quarto-appendix-bibtex {
font-size: 0.7em;
padding: 1em;
border: solid 1px $border-color;
margin-bottom: 1em;
code.sourceCode {
white-space: pre-wrap;
}
}
.quarto-appendix-citeas {
font-size: 0.9em;
padding: 1em;
border: solid 1px $border-color;
margin-bottom: 1em;
}
.quarto-appendix-heading {
font-size: 1em !important;
}
*[role="doc-endnotes"] > ol,
.quarto-appendix-contents > *:not(h2) {
font-size: 0.9em;
}
section {
padding-bottom: 1.5em;
*[role="doc-endnotes"],
> *:not(a) {
opacity: 0.9;
word-wrap: break-word;
}
}
}
.btn.btn-quarto,
div.cell-output-display .btn-quarto {
@include button-variant(
$btn-bg,
$btn-bg,
$btn-fg,
//if($btn-bg == $color-contrast-light, shade-color($btn-bg, $btn-hover-bg-shade-amount), tint-color($btn-bg, $btn-hover-bg-tint-amount)),
//if($btn-bg == $color-contrast-light, shade-color($btn-bg, $btn-hover-border-shade-amount), tint-color($btn-bg, $btn-hover-border-tint-amount)),
$hover-color: $btn-fg
);
}
// Quarto title block treatment
nav.quarto-secondary-nav.color-navbar {
@if variable-exists(navbar-bg) {
background-color: $navbar-bg;
}
@if (variable-exists(navbar-fg)) {
color: $navbar-fg;
}
}
nav.quarto-secondary-nav.color-navbar h1,
nav.quarto-secondary-nav.color-navbar .quarto-btn-toggle {
@if (variable-exists(navbar-fg)) {
color: $navbar-fg;
}
}
body.nav-sidebar {
@include media-breakpoint-down(lg) {
.quarto-title-banner {
margin-bottom: 0;
padding-bottom: 1em;
}
#title-block-header {
margin-block-end: 0;
}
}
}
p.subtitle {
margin-top: 0.25em;
margin-bottom: 0.5em;
}
// downlit links
code a:any-link {
color: inherit;
text-decoration-color: $gray-600;
}
// This is a sentinel value that renderers can use to determine
// whether the theme is dark or light
@if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
/*! dark */
} @else {
/*! light */
}
// observable UI element tweaks to support light-mode vs dark-mode
div.observablehq table thead tr th {
background-color: var(--bs-body-bg);
}
input,
button,
select,
optgroup,
textarea {
background-color: var(--bs-body-bg);
}
// Code Annotation
.code-annotated .code-copy-button {
margin-right: 1.25em;
margin-top: 0;
padding-bottom: 0;
padding-top: 3px;
}
.code-annotation-gutter-bg {
background-color: $body-bg;
}
.code-annotation-gutter {
background-color: $code-block-bg-color;
}
.code-annotation-gutter,
.code-annotation-gutter-bg {
height: 100%;
width: calc(20px + 0.5em);
position: absolute;
top: 0;
right: 0;
}
dl.code-annotation-container-grid {
dt {
margin-right: 1em;
margin-top: 0.25rem;
}
}
dl.code-annotation-container-grid {
dt {
font-family: $font-family-code;
color: theme-dim($body-color, 10%);
border: solid theme-dim($body-color, 10%) 1px;
border-radius: 50%;
height: 22px;
width: 22px;
line-height: 22px;
font-size: 11px;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
dt[data-target-cell] {
cursor: pointer;
}
dt[data-target-cell].code-annotation-active {
color: $body-bg;
border: solid #aaaaaa 1px;
background-color: #aaaaaa;
}
}
pre.code-annotation-code {
padding-top: 0;
padding-bottom: 0;
code {
z-index: 3;
}
}
#code-annotation-line-highlight-gutter {
width: 100%;
border-top: solid $code-annotation-higlight-color 1px;
border-bottom: solid $code-annotation-higlight-color 1px;
z-index: 2;
background-color: $code-annotation-higlight-bg;
}
#code-annotation-line-highlight {
margin-left: -4em;
width: calc(100% + 4em);
border-top: solid $code-annotation-higlight-color 1px;
border-bottom: solid $code-annotation-higlight-color 1px;
z-index: 2;
background-color: $code-annotation-higlight-bg;
}
code.sourceCode .code-annotation-anchor.code-annotation-active {
background-color: var(--quarto-hl-normal-color, #aaaaaa);
border: solid var(--quarto-hl-normal-color, #aaaaaa) 1px;
color: rgb(
red($code-block-bg-color),
green($code-block-bg-color),
blue($code-block-bg-color)
);
font-weight: bolder;
}
code.sourceCode .code-annotation-anchor {
font-family: $font-family-code;
color: var(--quarto-hl-co-color);
border: solid var(--quarto-hl-co-color) 1px;
border-radius: 50%;
height: 18px;
width: 18px;
font-size: 9px;
margin-top: 2px;
}
code.sourceCode button.code-annotation-anchor {
padding: 2px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
code.sourceCode a.code-annotation-anchor {
line-height: 18px;
text-align: center;
vertical-align: middle;
cursor: default;
text-decoration: none;
}
// change .column-screen-* to behave like .column-page (which hugs the body margins)
// cf https://github.com/quarto-dev/quarto-cli/issues/1824#issuecomment-1216018434
@media print {
.page-columns .column-screen-inset {
grid-column: page-start-inset / page-end-inset;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-inset-left {
grid-column: page-start-inset / body-content-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-inset-right {
grid-column: body-content-start / page-end-inset;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen {
grid-column: page-start / page-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-left {
grid-column: page-start / body-content-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-right {
grid-column: body-content-start / page-end;
z-index: $zindex-pagelayout;
opacity: 0.999;
@include column-spanning-element();
}
.page-columns .column-screen-inset-shaded {
grid-column: page-start-inset / page-end-inset;
padding: 1em;
background: $light;
z-index: $zindex-pagelayout;
opacity: 0.999;
margin-bottom: 1em;
}
}
.quarto-video {
margin-bottom: 1em;
}
.table {
// Tables get a light top and bottom border (whether or not they have a head
// and independent of caption position)
border-top: $table-border-width solid $table-group-separator-color-lighter;
border-bottom: $table-border-width solid $table-group-separator-color-lighter;
// The heading gets a heavier line to differentiate it
> thead {
border-top-width: 0;
border-bottom: 1px solid $table-group-separator-color;
}
// Allow breaking inside tables
a {
word-break: break-word;
}
// This disables new styling taken from boostrap that overrides
// table level styling
// See https://github.com/quarto-dev/quarto-cli/issues/7566
> :not(caption) > * > * {
background-color: unset;
color: unset;
}
}
// Special Cross Talk Handling
#quarto-document-content {
.crosstalk-input .checkbox input[type="checkbox"],
.crosstalk-input .checkbox-inline input[type="checkbox"] {
position: unset;
margin-top: unset;
margin-left: unset;
}
.row {
margin-left: unset;
margin-right: unset;
}
}
.quarto-xref {
white-space: nowrap;
}
#quarto-draft-alert {
margin-top: 0px;
margin-bottom: 0px;
padding: 0.3em;
text-align: center;
font-size: 0.9em;
i {
margin-right: 0.3em;
}
}
#quarto-back-to-top {
z-index: 1000;
}
// override _reboot.scss
// code blocks
pre {
font-family: $font-family-monospace-block;
// I'm really not confident that this is correct
@include font-size($code-block-font-size);
font-weight: $font-weight-monospace-block;
// adding these inherit overrides here
// is what `_reboot.scss` does.
// we mirror it here for consistency
//
// Account for some code outputs that place code tags in pre tags
code {
font-family: inherit;
@include font-size(inherit);
font-weight: inherit;
}
}
// code inlines
code {
font-family: $font-family-monospace-inline;
@include font-size($code-inline-font-size);
font-weight: $font-weight-monospace-inline;
}
// link styling
a {
background-color: $link-color-bg;
font-weight: $link-weight;
text-decoration: $link-decoration;
}
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
/*! quarto-variables-start */
:root {
--quarto-font-monospace: #{inspect($font-family-monospace)};
}
/*! quarto-variables-end */
a.external:after {
content: "";
@if variable-exists(link-color) {
background-image: url('data:image/svg+xml,');
} @else {
background-image: url('data:image/svg+xml,');
}
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
margin-left: 0.2em;
padding-right: 0.75em;
}
div.sourceCode code a.external:after {
content: none;
}
a.external:after:hover {
cursor: pointer;
}
.quarto-ext-icon {
display: inline-block;
font-size: 0.75em;
padding-left: 0.3em;
}
.code-with-filename .code-with-filename-file {
margin-bottom: 0;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 0.7em;
border: var(--quarto-border-width) solid var(--quarto-border-color);
border-radius: var(--quarto-border-radius);
border-bottom: 0;
border-bottom-left-radius: 0%;
border-bottom-right-radius: 0%;
}
.code-with-filename div.sourceCode,
.reveal .code-with-filename div.sourceCode {
margin-top: 0;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
}
.code-with-filename .code-with-filename-file pre {
margin-bottom: 0;
}
.code-with-filename .code-with-filename-file {
background-color: rgba(219, 219, 219, 0.8);
}
.quarto-dark .code-with-filename .code-with-filename-file {
background-color: #555;
}
.code-with-filename .code-with-filename-file strong {
font-weight: 400;
}
// quarto-scss-analysis-annotation { "origin": "'rules' section from user-defined SCSS" }
/* Title Banner */
.quarto-title-banner {
margin-bottom: 1em;
color: bannerColor();
background: bannerBg();
@if $title-banner-image {
background-image: $title-banner-image;
background-size: cover;
}
a {
color: bannerColor();
}
h1,
h2 {
color: bannerColor();
}
.code-tools-button {
color: bannerDim();
}
.code-tools-button:hover {
color: bannerColor();
}
.code-tools-button > .bi::before {
background-image: url('data:image/svg+xml,');
}
.code-tools-button:hover > .bi::before {
background-image: url('data:image/svg+xml,');
}
.quarto-title .title {
font-weight: 600;
}
.quarto-categories {
margin-top: 0.75em;
}
@include media-breakpoint-up(lg) {
padding-top: 2.5em;
padding-bottom: 2.5em;
}
@include media-breakpoint-down(lg) {
padding-top: 1em;
padding-bottom: 1em;
}
}
@include media-breakpoint-down(md) {
body.hypothesis-enabled {
#title-block-header > * {
padding-right: 20px;
}
}
}
main.quarto-banner-title-block > section:first-child > h2,
main.quarto-banner-title-block > section:first-child > h3,
main.quarto-banner-title-block > section:first-child > h4 {
margin-top: 0;
}
.quarto-title {
.quarto-categories {
display: flex;
flex-wrap: wrap;
row-gap: 0.5em;
column-gap: 0.4em;
padding-bottom: 0.5em;
margin-top: 0.75em;
.quarto-category {
padding: 0.25em 0.75em;
font-size: 0.65em;
text-transform: uppercase;
border: solid 1px;
border-radius: $border-radius;
opacity: 0.6;
a {
color: inherit;
}
}
}
}
/* Manuscript customization */
.quarto-title-meta-container {
display: grid;
grid-template-columns: 1fr auto;
}
.quarto-title-meta-column-end {
display: flex;
flex-direction: column;
padding-left: 1em;
}
.quarto-title-meta-column-end a .bi {
margin-right: 0.3em;
}
/* Title Default */
#title-block-header.quarto-title-block.default {
.quarto-title-meta {
display: grid;
// See https://github.com/quarto-dev/quarto-cli/issues/9539
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
.quarto-title {
.title {
margin-bottom: 0;
}
}
.quarto-title-author-orcid {
img {
margin-top: -0.2em;
height: 0.8em;
width: 0.8em;
}
}
.quarto-title-author-email {
opacity: 0.7;
}
.quarto-description {
p:last-of-type {
margin-bottom: 0;
}
}
.quarto-title-meta-contents p,
.quarto-title-authors p,
.quarto-title-affiliations p {
margin-bottom: 0.1em;
}
.quarto-title-meta-heading {
text-transform: uppercase;
margin-top: 1em;
font-size: 0.8em;
opacity: 0.8;
font-weight: 400;
}
.quarto-title-meta-contents {
font-size: 0.9em;
p.affiliation:last-of-type {
margin-bottom: 0.1em;
}
}
p.affiliation {
margin-bottom: 0.1em;
}
.keywords,
.description,
.abstract {
margin-top: 0;
& > p {
font-size: 0.9em;
}
& > p:last-of-type {
margin-bottom: 0;
}
.block-title {
margin-top: 1em;
text-transform: uppercase;
font-size: 0.8em;
opacity: 0.8;
font-weight: 400;
}
}
.quarto-title-meta-author {
display: grid;
grid-template-columns: minmax(max-content, 1fr) 1fr;
grid-column-gap: 1em;
}
}
.quarto-title-tools-only {
display: flex;
justify-content: right;
}
// quarto-scss-analysis-annotation { "origin": null }
:root {
--quarto-scss-export-gray-300: #{$gray-300};
--quarto-scss-export-gray-500: #{$gray-500};
--quarto-scss-export-gray-600: #{$gray-600};
--quarto-scss-export-gray-800: #{$gray-800};
--quarto-scss-export-card-cap-bg: #{$card-cap-bg};
--quarto-scss-export-border-color: #{$border-color};
--quarto-scss-export-text-muted: #{$text-muted};
--quarto-scss-export-title-banner-color: #{$title-banner-color};
--quarto-scss-export-title-banner-bg: #{$title-banner-bg};
--quarto-scss-export-btn-code-copy-color: #{$btn-code-copy-color};
--quarto-scss-export-btn-code-copy-color-active: #{$btn-code-copy-color-active};
--quarto-scss-export-blue: #{$blue};
--quarto-scss-export-primary: #{$primary};
--quarto-scss-export-white: #{$white};
--quarto-scss-export-gray-200: #{$gray-200};
--quarto-scss-export-gray-100: #{$gray-100};
--quarto-scss-export-gray-900: #{$gray-900};
--quarto-scss-export-link-color: #{$link-color};
--quarto-scss-export-link-color-bg: #{$link-color-bg};
--quarto-scss-export-code-color: #{$code-color};
--quarto-scss-export-code-bg: #{$code-bg};
--quarto-scss-export-toc-color: #{$toc-color};
--quarto-scss-export-toc-active-border: #{$toc-active-border};
--quarto-scss-export-toc-inactive-border: #{$toc-inactive-border};
--quarto-scss-export-navbar-default: #{$navbar-default};
--quarto-scss-export-navbar-hl-override: #{$navbar-hl-override};
--quarto-scss-export-navbar-bg: #{$navbar-bg};
--quarto-scss-export-btn-bg: #{$btn-bg};
--quarto-scss-export-btn-fg: #{$btn-fg};
--quarto-scss-export-body-contrast-bg: #{$body-contrast-bg};
--quarto-scss-export-body-contrast-color: #{$body-contrast-color};
--quarto-scss-export-navbar-fg: #{$navbar-fg};
--quarto-scss-export-navbar-hl: #{$navbar-hl};
--quarto-scss-export-navbar-brand: #{$navbar-brand};
--quarto-scss-export-navbar-brand-hl: #{$navbar-brand-hl};
--quarto-scss-export-navbar-toggler-border-color: #{$navbar-toggler-border-color};
--quarto-scss-export-navbar-hover-color: #{$navbar-hover-color};
--quarto-scss-export-navbar-disabled-color: #{$navbar-disabled-color};
--quarto-scss-export-sidebar-bg: #{$sidebar-bg};
--quarto-scss-export-sidebar-fg: #{$sidebar-fg};
--quarto-scss-export-title-block-color: #{$title-block-color};
--quarto-scss-export-title-block-contast-color: #{$title-block-contast-color};
--quarto-scss-export-footer-bg: #{$footer-bg};
--quarto-scss-export-footer-fg: #{$footer-fg};
--quarto-scss-export-popover-bg: #{$popover-bg};
--quarto-scss-export-input-bg: #{$input-bg};
--quarto-scss-export-input-border-color: #{$input-border-color};
--quarto-scss-export-code-annotation-higlight-color: #{$code-annotation-higlight-color};
--quarto-scss-export-code-annotation-higlight-bg: #{$code-annotation-higlight-bg};
--quarto-scss-export-table-group-separator-color: #{$table-group-separator-color};
--quarto-scss-export-table-group-separator-color-lighter: #{$table-group-separator-color-lighter};
--quarto-scss-export-link-decoration: #{$link-decoration};
--quarto-scss-export-table-border-color: #{$table-border-color};
--quarto-scss-export-sidebar-glass-bg: #{$sidebar-glass-bg};
--quarto-scss-export-gray-400: #{$gray-400};
--quarto-scss-export-gray-700: #{$gray-700};
--quarto-scss-export-black: #{$black};
--quarto-scss-export-indigo: #{$indigo};
--quarto-scss-export-purple: #{$purple};
--quarto-scss-export-pink: #{$pink};
--quarto-scss-export-red: #{$red};
--quarto-scss-export-orange: #{$orange};
--quarto-scss-export-yellow: #{$yellow};
--quarto-scss-export-green: #{$green};
--quarto-scss-export-teal: #{$teal};
--quarto-scss-export-cyan: #{$cyan};
--quarto-scss-export-color-contrast-dark: #{$color-contrast-dark};
--quarto-scss-export-color-contrast-light: #{$color-contrast-light};
--quarto-scss-export-blue-100: #{$blue-100};
--quarto-scss-export-blue-200: #{$blue-200};
--quarto-scss-export-blue-300: #{$blue-300};
--quarto-scss-export-blue-400: #{$blue-400};
--quarto-scss-export-blue-500: #{$blue-500};
--quarto-scss-export-blue-600: #{$blue-600};
--quarto-scss-export-blue-700: #{$blue-700};
--quarto-scss-export-blue-800: #{$blue-800};
--quarto-scss-export-blue-900: #{$blue-900};
--quarto-scss-export-indigo-100: #{$indigo-100};
--quarto-scss-export-indigo-200: #{$indigo-200};
--quarto-scss-export-indigo-300: #{$indigo-300};
--quarto-scss-export-indigo-400: #{$indigo-400};
--quarto-scss-export-indigo-500: #{$indigo-500};
--quarto-scss-export-indigo-600: #{$indigo-600};
--quarto-scss-export-indigo-700: #{$indigo-700};
--quarto-scss-export-indigo-800: #{$indigo-800};
--quarto-scss-export-indigo-900: #{$indigo-900};
--quarto-scss-export-purple-100: #{$purple-100};
--quarto-scss-export-purple-200: #{$purple-200};
--quarto-scss-export-purple-300: #{$purple-300};
--quarto-scss-export-purple-400: #{$purple-400};
--quarto-scss-export-purple-500: #{$purple-500};
--quarto-scss-export-purple-600: #{$purple-600};
--quarto-scss-export-purple-700: #{$purple-700};
--quarto-scss-export-purple-800: #{$purple-800};
--quarto-scss-export-purple-900: #{$purple-900};
--quarto-scss-export-pink-100: #{$pink-100};
--quarto-scss-export-pink-200: #{$pink-200};
--quarto-scss-export-pink-300: #{$pink-300};
--quarto-scss-export-pink-400: #{$pink-400};
--quarto-scss-export-pink-500: #{$pink-500};
--quarto-scss-export-pink-600: #{$pink-600};
--quarto-scss-export-pink-700: #{$pink-700};
--quarto-scss-export-pink-800: #{$pink-800};
--quarto-scss-export-pink-900: #{$pink-900};
--quarto-scss-export-red-100: #{$red-100};
--quarto-scss-export-red-200: #{$red-200};
--quarto-scss-export-red-300: #{$red-300};
--quarto-scss-export-red-400: #{$red-400};
--quarto-scss-export-red-500: #{$red-500};
--quarto-scss-export-red-600: #{$red-600};
--quarto-scss-export-red-700: #{$red-700};
--quarto-scss-export-red-800: #{$red-800};
--quarto-scss-export-red-900: #{$red-900};
--quarto-scss-export-orange-100: #{$orange-100};
--quarto-scss-export-orange-200: #{$orange-200};
--quarto-scss-export-orange-300: #{$orange-300};
--quarto-scss-export-orange-400: #{$orange-400};
--quarto-scss-export-orange-500: #{$orange-500};
--quarto-scss-export-orange-600: #{$orange-600};
--quarto-scss-export-orange-700: #{$orange-700};
--quarto-scss-export-orange-800: #{$orange-800};
--quarto-scss-export-orange-900: #{$orange-900};
--quarto-scss-export-yellow-100: #{$yellow-100};
--quarto-scss-export-yellow-200: #{$yellow-200};
--quarto-scss-export-yellow-300: #{$yellow-300};
--quarto-scss-export-yellow-400: #{$yellow-400};
--quarto-scss-export-yellow-500: #{$yellow-500};
--quarto-scss-export-yellow-600: #{$yellow-600};
--quarto-scss-export-yellow-700: #{$yellow-700};
--quarto-scss-export-yellow-800: #{$yellow-800};
--quarto-scss-export-yellow-900: #{$yellow-900};
--quarto-scss-export-green-100: #{$green-100};
--quarto-scss-export-green-200: #{$green-200};
--quarto-scss-export-green-300: #{$green-300};
--quarto-scss-export-green-400: #{$green-400};
--quarto-scss-export-green-500: #{$green-500};
--quarto-scss-export-green-600: #{$green-600};
--quarto-scss-export-green-700: #{$green-700};
--quarto-scss-export-green-800: #{$green-800};
--quarto-scss-export-green-900: #{$green-900};
--quarto-scss-export-teal-100: #{$teal-100};
--quarto-scss-export-teal-200: #{$teal-200};
--quarto-scss-export-teal-300: #{$teal-300};
--quarto-scss-export-teal-400: #{$teal-400};
--quarto-scss-export-teal-500: #{$teal-500};
--quarto-scss-export-teal-600: #{$teal-600};
--quarto-scss-export-teal-700: #{$teal-700};
--quarto-scss-export-teal-800: #{$teal-800};
--quarto-scss-export-teal-900: #{$teal-900};
--quarto-scss-export-cyan-100: #{$cyan-100};
--quarto-scss-export-cyan-200: #{$cyan-200};
--quarto-scss-export-cyan-300: #{$cyan-300};
--quarto-scss-export-cyan-400: #{$cyan-400};
--quarto-scss-export-cyan-500: #{$cyan-500};
--quarto-scss-export-cyan-600: #{$cyan-600};
--quarto-scss-export-cyan-700: #{$cyan-700};
--quarto-scss-export-cyan-800: #{$cyan-800};
--quarto-scss-export-cyan-900: #{$cyan-900};
--quarto-scss-export-default: #{$default};
--quarto-scss-export-secondary: #{$secondary};
--quarto-scss-export-success: #{$success};
--quarto-scss-export-info: #{$info};
--quarto-scss-export-warning: #{$warning};
--quarto-scss-export-danger: #{$danger};
--quarto-scss-export-light: #{$light};
--quarto-scss-export-dark: #{$dark};
--quarto-scss-export-primary-text-emphasis: #{$primary-text-emphasis};
--quarto-scss-export-secondary-text-emphasis: #{$secondary-text-emphasis};
--quarto-scss-export-success-text-emphasis: #{$success-text-emphasis};
--quarto-scss-export-info-text-emphasis: #{$info-text-emphasis};
--quarto-scss-export-warning-text-emphasis: #{$warning-text-emphasis};
--quarto-scss-export-danger-text-emphasis: #{$danger-text-emphasis};
--quarto-scss-export-light-text-emphasis: #{$light-text-emphasis};
--quarto-scss-export-dark-text-emphasis: #{$dark-text-emphasis};
--quarto-scss-export-primary-bg-subtle: #{$primary-bg-subtle};
--quarto-scss-export-secondary-bg-subtle: #{$secondary-bg-subtle};
--quarto-scss-export-success-bg-subtle: #{$success-bg-subtle};
--quarto-scss-export-info-bg-subtle: #{$info-bg-subtle};
--quarto-scss-export-warning-bg-subtle: #{$warning-bg-subtle};
--quarto-scss-export-danger-bg-subtle: #{$danger-bg-subtle};
--quarto-scss-export-light-bg-subtle: #{$light-bg-subtle};
--quarto-scss-export-dark-bg-subtle: #{$dark-bg-subtle};
--quarto-scss-export-primary-border-subtle: #{$primary-border-subtle};
--quarto-scss-export-secondary-border-subtle: #{$secondary-border-subtle};
--quarto-scss-export-success-border-subtle: #{$success-border-subtle};
--quarto-scss-export-info-border-subtle: #{$info-border-subtle};
--quarto-scss-export-warning-border-subtle: #{$warning-border-subtle};
--quarto-scss-export-danger-border-subtle: #{$danger-border-subtle};
--quarto-scss-export-light-border-subtle: #{$light-border-subtle};
--quarto-scss-export-dark-border-subtle: #{$dark-border-subtle};
--quarto-scss-export-body-text-align: #{$body-text-align};
--quarto-scss-export-body-color: #{$body-color};
--quarto-scss-export-body-bg: #{$body-bg};
--quarto-scss-export-body-secondary-color: #{$body-secondary-color};
--quarto-scss-export-body-secondary-bg: #{$body-secondary-bg};
--quarto-scss-export-body-tertiary-color: #{$body-tertiary-color};
--quarto-scss-export-body-tertiary-bg: #{$body-tertiary-bg};
--quarto-scss-export-body-emphasis-color: #{$body-emphasis-color};
--quarto-scss-export-link-hover-color: #{$link-hover-color};
--quarto-scss-export-link-hover-decoration: #{$link-hover-decoration};
--quarto-scss-export-border-color-translucent: #{$border-color-translucent};
--quarto-scss-export-component-active-bg: #{$component-active-bg};
--quarto-scss-export-component-active-color: #{$component-active-color};
--quarto-scss-export-focus-ring-color: #{$focus-ring-color};
--quarto-scss-export-headings-font-family: #{$headings-font-family};
--quarto-scss-export-headings-font-style: #{$headings-font-style};
--quarto-scss-export-display-font-family: #{$display-font-family};
--quarto-scss-export-display-font-style: #{$display-font-style};
--quarto-scss-export-blockquote-footer-color: #{$blockquote-footer-color};
--quarto-scss-export-blockquote-border-color: #{$blockquote-border-color};
--quarto-scss-export-hr-bg-color: #{$hr-bg-color};
--quarto-scss-export-hr-height: #{$hr-height};
--quarto-scss-export-hr-border-color: #{$hr-border-color};
--quarto-scss-export-legend-font-weight: #{$legend-font-weight};
--quarto-scss-export-mark-bg: #{$mark-bg};
--quarto-scss-export-table-color: #{$table-color};
--quarto-scss-export-table-bg: #{$table-bg};
--quarto-scss-export-table-accent-bg: #{$table-accent-bg};
--quarto-scss-export-table-th-font-weight: #{$table-th-font-weight};
--quarto-scss-export-table-striped-color: #{$table-striped-color};
--quarto-scss-export-table-striped-bg: #{$table-striped-bg};
--quarto-scss-export-table-active-color: #{$table-active-color};
--quarto-scss-export-table-active-bg: #{$table-active-bg};
--quarto-scss-export-table-hover-color: #{$table-hover-color};
--quarto-scss-export-table-hover-bg: #{$table-hover-bg};
--quarto-scss-export-table-caption-color: #{$table-caption-color};
--quarto-scss-export-input-btn-font-family: #{$input-btn-font-family};
--quarto-scss-export-input-btn-focus-color: #{$input-btn-focus-color};
--quarto-scss-export-btn-color: #{$btn-color};
--quarto-scss-export-btn-font-family: #{$btn-font-family};
--quarto-scss-export-btn-white-space: #{$btn-white-space};
--quarto-scss-export-btn-link-color: #{$btn-link-color};
--quarto-scss-export-btn-link-hover-color: #{$btn-link-hover-color};
--quarto-scss-export-btn-link-disabled-color: #{$btn-link-disabled-color};
--quarto-scss-export-form-text-font-style: #{$form-text-font-style};
--quarto-scss-export-form-text-font-weight: #{$form-text-font-weight};
--quarto-scss-export-form-text-color: #{$form-text-color};
--quarto-scss-export-form-label-font-size: #{$form-label-font-size};
--quarto-scss-export-form-label-font-style: #{$form-label-font-style};
--quarto-scss-export-form-label-font-weight: #{$form-label-font-weight};
--quarto-scss-export-form-label-color: #{$form-label-color};
--quarto-scss-export-input-font-family: #{$input-font-family};
--quarto-scss-export-input-disabled-color: #{$input-disabled-color};
--quarto-scss-export-input-disabled-bg: #{$input-disabled-bg};
--quarto-scss-export-input-disabled-border-color: #{$input-disabled-border-color};
--quarto-scss-export-input-color: #{$input-color};
--quarto-scss-export-input-focus-bg: #{$input-focus-bg};
--quarto-scss-export-input-focus-border-color: #{$input-focus-border-color};
--quarto-scss-export-input-focus-color: #{$input-focus-color};
--quarto-scss-export-input-placeholder-color: #{$input-placeholder-color};
--quarto-scss-export-input-plaintext-color: #{$input-plaintext-color};
--quarto-scss-export-form-check-label-color: #{$form-check-label-color};
--quarto-scss-export-form-check-transition: #{$form-check-transition};
--quarto-scss-export-form-check-input-bg: #{$form-check-input-bg};
--quarto-scss-export-form-check-input-focus-border: #{$form-check-input-focus-border};
--quarto-scss-export-form-check-input-checked-color: #{$form-check-input-checked-color};
--quarto-scss-export-form-check-input-checked-bg-color: #{$form-check-input-checked-bg-color};
--quarto-scss-export-form-check-input-checked-border-color: #{$form-check-input-checked-border-color};
--quarto-scss-export-form-check-input-indeterminate-color: #{$form-check-input-indeterminate-color};
--quarto-scss-export-form-check-input-indeterminate-bg-color: #{$form-check-input-indeterminate-bg-color};
--quarto-scss-export-form-check-input-indeterminate-border-color: #{$form-check-input-indeterminate-border-color};
--quarto-scss-export-form-switch-color: #{$form-switch-color};
--quarto-scss-export-form-switch-focus-color: #{$form-switch-focus-color};
--quarto-scss-export-form-switch-checked-color: #{$form-switch-checked-color};
--quarto-scss-export-input-group-addon-color: #{$input-group-addon-color};
--quarto-scss-export-input-group-addon-bg: #{$input-group-addon-bg};
--quarto-scss-export-input-group-addon-border-color: #{$input-group-addon-border-color};
--quarto-scss-export-form-select-font-family: #{$form-select-font-family};
--quarto-scss-export-form-select-color: #{$form-select-color};
--quarto-scss-export-form-select-bg: #{$form-select-bg};
--quarto-scss-export-form-select-disabled-color: #{$form-select-disabled-color};
--quarto-scss-export-form-select-disabled-bg: #{$form-select-disabled-bg};
--quarto-scss-export-form-select-disabled-border-color: #{$form-select-disabled-border-color};
--quarto-scss-export-form-select-indicator-color: #{$form-select-indicator-color};
--quarto-scss-export-form-select-border-color: #{$form-select-border-color};
--quarto-scss-export-form-select-focus-border-color: #{$form-select-focus-border-color};
--quarto-scss-export-form-range-track-bg: #{$form-range-track-bg};
--quarto-scss-export-form-range-thumb-bg: #{$form-range-thumb-bg};
--quarto-scss-export-form-range-thumb-active-bg: #{$form-range-thumb-active-bg};
--quarto-scss-export-form-range-thumb-disabled-bg: #{$form-range-thumb-disabled-bg};
--quarto-scss-export-form-file-button-color: #{$form-file-button-color};
--quarto-scss-export-form-file-button-bg: #{$form-file-button-bg};
--quarto-scss-export-form-file-button-hover-bg: #{$form-file-button-hover-bg};
--quarto-scss-export-form-floating-label-disabled-color: #{$form-floating-label-disabled-color};
--quarto-scss-export-form-feedback-font-style: #{$form-feedback-font-style};
--quarto-scss-export-form-feedback-valid-color: #{$form-feedback-valid-color};
--quarto-scss-export-form-feedback-invalid-color: #{$form-feedback-invalid-color};
--quarto-scss-export-form-feedback-icon-valid-color: #{$form-feedback-icon-valid-color};
--quarto-scss-export-form-feedback-icon-invalid-color: #{$form-feedback-icon-invalid-color};
--quarto-scss-export-form-valid-color: #{$form-valid-color};
--quarto-scss-export-form-valid-border-color: #{$form-valid-border-color};
--quarto-scss-export-form-invalid-color: #{$form-invalid-color};
--quarto-scss-export-form-invalid-border-color: #{$form-invalid-border-color};
--quarto-scss-export-nav-link-font-size: #{$nav-link-font-size};
--quarto-scss-export-nav-link-font-weight: #{$nav-link-font-weight};
--quarto-scss-export-nav-link-color: #{$nav-link-color};
--quarto-scss-export-nav-link-hover-color: #{$nav-link-hover-color};
--quarto-scss-export-nav-link-disabled-color: #{$nav-link-disabled-color};
--quarto-scss-export-nav-tabs-border-color: #{$nav-tabs-border-color};
--quarto-scss-export-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
--quarto-scss-export-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
--quarto-scss-export-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
--quarto-scss-export-nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
--quarto-scss-export-nav-pills-link-active-color: #{$nav-pills-link-active-color};
--quarto-scss-export-nav-underline-link-active-color: #{$nav-underline-link-active-color};
--quarto-scss-export-navbar-padding-x: #{$navbar-padding-x};
--quarto-scss-export-navbar-light-contrast: #{$navbar-light-contrast};
--quarto-scss-export-navbar-dark-contrast: #{$navbar-dark-contrast};
--quarto-scss-export-navbar-light-icon-color: #{$navbar-light-icon-color};
--quarto-scss-export-navbar-dark-icon-color: #{$navbar-dark-icon-color};
--quarto-scss-export-dropdown-color: #{$dropdown-color};
--quarto-scss-export-dropdown-bg: #{$dropdown-bg};
--quarto-scss-export-dropdown-border-color: #{$dropdown-border-color};
--quarto-scss-export-dropdown-divider-bg: #{$dropdown-divider-bg};
--quarto-scss-export-dropdown-link-color: #{$dropdown-link-color};
--quarto-scss-export-dropdown-link-hover-color: #{$dropdown-link-hover-color};
--quarto-scss-export-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--quarto-scss-export-dropdown-link-active-bg: #{$dropdown-link-active-bg};
--quarto-scss-export-dropdown-link-active-color: #{$dropdown-link-active-color};
--quarto-scss-export-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--quarto-scss-export-dropdown-header-color: #{$dropdown-header-color};
--quarto-scss-export-dropdown-dark-color: #{$dropdown-dark-color};
--quarto-scss-export-dropdown-dark-bg: #{$dropdown-dark-bg};
--quarto-scss-export-dropdown-dark-border-color: #{$dropdown-dark-border-color};
--quarto-scss-export-dropdown-dark-divider-bg: #{$dropdown-dark-divider-bg};
--quarto-scss-export-dropdown-dark-box-shadow: #{$dropdown-dark-box-shadow};
--quarto-scss-export-dropdown-dark-link-color: #{$dropdown-dark-link-color};
--quarto-scss-export-dropdown-dark-link-hover-color: #{$dropdown-dark-link-hover-color};
--quarto-scss-export-dropdown-dark-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--quarto-scss-export-dropdown-dark-link-active-color: #{$dropdown-dark-link-active-color};
--quarto-scss-export-dropdown-dark-link-active-bg: #{$dropdown-dark-link-active-bg};
--quarto-scss-export-dropdown-dark-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--quarto-scss-export-dropdown-dark-header-color: #{$dropdown-dark-header-color};
--quarto-scss-export-pagination-color: #{$pagination-color};
--quarto-scss-export-pagination-bg: #{$pagination-bg};
--quarto-scss-export-pagination-border-color: #{$pagination-border-color};
--quarto-scss-export-pagination-focus-color: #{$pagination-focus-color};
--quarto-scss-export-pagination-focus-bg: #{$pagination-focus-bg};
--quarto-scss-export-pagination-hover-color: #{$pagination-hover-color};
--quarto-scss-export-pagination-hover-bg: #{$pagination-hover-bg};
--quarto-scss-export-pagination-hover-border-color: #{$pagination-hover-border-color};
--quarto-scss-export-pagination-active-color: #{$pagination-active-color};
--quarto-scss-export-pagination-active-bg: #{$pagination-active-bg};
--quarto-scss-export-pagination-active-border-color: #{$pagination-active-border-color};
--quarto-scss-export-pagination-disabled-color: #{$pagination-disabled-color};
--quarto-scss-export-pagination-disabled-bg: #{$pagination-disabled-bg};
--quarto-scss-export-pagination-disabled-border-color: #{$pagination-disabled-border-color};
--quarto-scss-export-card-title-color: #{$card-title-color};
--quarto-scss-export-card-subtitle-color: #{$card-subtitle-color};
--quarto-scss-export-card-border-color: #{$card-border-color};
--quarto-scss-export-card-box-shadow: #{$card-box-shadow};
--quarto-scss-export-card-cap-color: #{$card-cap-color};
--quarto-scss-export-card-height: #{$card-height};
--quarto-scss-export-card-color: #{$card-color};
--quarto-scss-export-card-bg: #{$card-bg};
--quarto-scss-export-accordion-color: #{$accordion-color};
--quarto-scss-export-accordion-bg: #{$accordion-bg};
--quarto-scss-export-accordion-border-color: #{$accordion-border-color};
--quarto-scss-export-accordion-button-color: #{$accordion-button-color};
--quarto-scss-export-accordion-button-bg: #{$accordion-button-bg};
--quarto-scss-export-accordion-button-active-bg: #{$accordion-button-active-bg};
--quarto-scss-export-accordion-button-active-color: #{$accordion-button-active-color};
--quarto-scss-export-accordion-button-focus-border-color: #{$accordion-button-focus-border-color};
--quarto-scss-export-accordion-icon-color: #{$accordion-icon-color};
--quarto-scss-export-accordion-icon-active-color: #{$accordion-icon-active-color};
--quarto-scss-export-tooltip-color: #{$tooltip-color};
--quarto-scss-export-tooltip-bg: #{$tooltip-bg};
--quarto-scss-export-tooltip-margin: #{$tooltip-margin};
--quarto-scss-export-tooltip-arrow-color: #{$tooltip-arrow-color};
--quarto-scss-export-form-feedback-tooltip-line-height: #{$form-feedback-tooltip-line-height};
--quarto-scss-export-popover-border-color: #{$popover-border-color};
--quarto-scss-export-popover-header-bg: #{$popover-header-bg};
--quarto-scss-export-popover-body-color: #{$popover-body-color};
--quarto-scss-export-popover-arrow-color: #{$popover-arrow-color};
--quarto-scss-export-popover-arrow-outer-color: #{$popover-arrow-outer-color};
--quarto-scss-export-toast-color: #{$toast-color};
--quarto-scss-export-toast-background-color: #{$toast-background-color};
--quarto-scss-export-toast-border-color: #{$toast-border-color};
--quarto-scss-export-toast-header-color: #{$toast-header-color};
--quarto-scss-export-toast-header-background-color: #{$toast-header-background-color};
--quarto-scss-export-toast-header-border-color: #{$toast-header-border-color};
--quarto-scss-export-badge-color: #{$badge-color};
--quarto-scss-export-modal-content-color: #{$modal-content-color};
--quarto-scss-export-modal-content-bg: #{$modal-content-bg};
--quarto-scss-export-modal-content-border-color: #{$modal-content-border-color};
--quarto-scss-export-modal-backdrop-bg: #{$modal-backdrop-bg};
--quarto-scss-export-modal-header-border-color: #{$modal-header-border-color};
--quarto-scss-export-modal-footer-bg: #{$modal-footer-bg};
--quarto-scss-export-modal-footer-border-color: #{$modal-footer-border-color};
--quarto-scss-export-progress-bg: #{$progress-bg};
--quarto-scss-export-progress-bar-color: #{$progress-bar-color};
--quarto-scss-export-progress-bar-bg: #{$progress-bar-bg};
--quarto-scss-export-list-group-color: #{$list-group-color};
--quarto-scss-export-list-group-bg: #{$list-group-bg};
--quarto-scss-export-list-group-border-color: #{$list-group-border-color};
--quarto-scss-export-list-group-hover-bg: #{$list-group-hover-bg};
--quarto-scss-export-list-group-active-bg: #{$list-group-active-bg};
--quarto-scss-export-list-group-active-color: #{$list-group-active-color};
--quarto-scss-export-list-group-active-border-color: #{$list-group-active-border-color};
--quarto-scss-export-list-group-disabled-color: #{$list-group-disabled-color};
--quarto-scss-export-list-group-disabled-bg: #{$list-group-disabled-bg};
--quarto-scss-export-list-group-action-color: #{$list-group-action-color};
--quarto-scss-export-list-group-action-hover-color: #{$list-group-action-hover-color};
--quarto-scss-export-list-group-action-active-color: #{$list-group-action-active-color};
--quarto-scss-export-list-group-action-active-bg: #{$list-group-action-active-bg};
--quarto-scss-export-thumbnail-bg: #{$thumbnail-bg};
--quarto-scss-export-thumbnail-border-color: #{$thumbnail-border-color};
--quarto-scss-export-figure-caption-color: #{$figure-caption-color};
--quarto-scss-export-breadcrumb-font-size: #{$breadcrumb-font-size};
--quarto-scss-export-breadcrumb-bg: #{$breadcrumb-bg};
--quarto-scss-export-breadcrumb-divider-color: #{$breadcrumb-divider-color};
--quarto-scss-export-breadcrumb-active-color: #{$breadcrumb-active-color};
--quarto-scss-export-breadcrumb-border-radius: #{$breadcrumb-border-radius};
--quarto-scss-export-carousel-control-color: #{$carousel-control-color};
--quarto-scss-export-carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
--quarto-scss-export-carousel-caption-color: #{$carousel-caption-color};
--quarto-scss-export-carousel-dark-indicator-active-bg: #{$carousel-dark-indicator-active-bg};
--quarto-scss-export-carousel-dark-caption-color: #{$carousel-dark-caption-color};
--quarto-scss-export-btn-close-color: #{$btn-close-color};
--quarto-scss-export-offcanvas-border-color: #{$offcanvas-border-color};
--quarto-scss-export-offcanvas-bg-color: #{$offcanvas-bg-color};
--quarto-scss-export-offcanvas-color: #{$offcanvas-color};
--quarto-scss-export-offcanvas-backdrop-bg: #{$offcanvas-backdrop-bg};
--quarto-scss-export-code-color-dark: #{$code-color-dark};
--quarto-scss-export-kbd-color: #{$kbd-color};
--quarto-scss-export-kbd-bg: #{$kbd-bg};
--quarto-scss-export-nested-kbd-font-weight: #{$nested-kbd-font-weight};
--quarto-scss-export-pre-bg: #{$pre-bg};
--quarto-scss-export-pre-color: #{$pre-color};
--quarto-scss-export-bslib-page-sidebar-title-bg: #{$bslib-page-sidebar-title-bg};
--quarto-scss-export-bslib-page-sidebar-title-color: #{$bslib-page-sidebar-title-color};
--quarto-scss-export-bslib-sidebar-bg: #{$bslib-sidebar-bg};
--quarto-scss-export-bslib-sidebar-toggle-bg: #{$bslib-sidebar-toggle-bg};
--quarto-scss-export-sidebar-color: #{$sidebar-color};
--quarto-scss-export-sidebar-hover-color: #{$sidebar-hover-color};
--quarto-scss-export-sidebar-disabled-color: #{$sidebar-disabled-color};
--quarto-scss-export-valuebox-bg-primary: #{$valuebox-bg-primary};
--quarto-scss-export-valuebox-bg-secondary: #{$valuebox-bg-secondary};
--quarto-scss-export-valuebox-bg-success: #{$valuebox-bg-success};
--quarto-scss-export-valuebox-bg-info: #{$valuebox-bg-info};
--quarto-scss-export-valuebox-bg-warning: #{$valuebox-bg-warning};
--quarto-scss-export-valuebox-bg-danger: #{$valuebox-bg-danger};
--quarto-scss-export-valuebox-bg-light: #{$valuebox-bg-light};
--quarto-scss-export-valuebox-bg-dark: #{$valuebox-bg-dark};
--quarto-scss-export-mermaid-bg-color: #{$mermaid-bg-color};
--quarto-scss-export-mermaid-edge-color: #{$mermaid-edge-color};
--quarto-scss-export-mermaid-node-fg-color: #{$mermaid-node-fg-color};
--quarto-scss-export-mermaid-fg-color: #{$mermaid-fg-color};
--quarto-scss-export-mermaid-fg-color--lighter: #{$mermaid-fg-color--lighter};
--quarto-scss-export-mermaid-fg-color--lightest: #{$mermaid-fg-color--lightest};
--quarto-scss-export-mermaid-label-bg-color: #{$mermaid-label-bg-color};
--quarto-scss-export-mermaid-label-fg-color: #{$mermaid-label-fg-color};
--quarto-scss-export-mermaid-node-bg-color: #{$mermaid-node-bg-color};
--quarto-scss-export-code-block-border-left-color: #{$code-block-border-left-color};
--quarto-scss-export-callout-color-note: #{$callout-color-note};
--quarto-scss-export-callout-color-tip: #{$callout-color-tip};
--quarto-scss-export-callout-color-important: #{$callout-color-important};
--quarto-scss-export-callout-color-caution: #{$callout-color-caution};
--quarto-scss-export-callout-color-warning: #{$callout-color-warning};
}