13372 lines
366 KiB
SCSS
13372 lines
366 KiB
SCSS
// quarto-scss-analysis-annotation { "quarto-version": "1.6.39" }
|
|
|
|
// 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" }
|
|
|
|
|
|
/* TODO: Customize html appearance by setting SCSS variables */
|
|
/* See https://quarto.org/docs/output-formats/html-themes.html#theme-options */
|
|
|
|
|
|
|
|
/* TODO: Customize html appearance by setting SCSS variables */
|
|
/* See https://quarto.org/docs/output-formats/html-themes.html#theme-options */
|
|
|
|
$h2-font-size: 1.6rem !default;
|
|
$headings-font-weight: 500 !default;
|
|
$font-size-base: 1.1rem !default;
|
|
|
|
|
|
// 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;
|
|
|
|
// quarto-scss-analysis-annotation { "origin": "cosmo (builtin theme)" }
|
|
|
|
$theme: "cosmo" !default;
|
|
|
|
//
|
|
// Color system
|
|
//
|
|
|
|
$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: #868e96 !default;
|
|
$gray-700: #495057 !default;
|
|
$gray-800: #373a3c !default;
|
|
$gray-900: #212529 !default;
|
|
$black: #000 !default;
|
|
|
|
$blue: #2780e3 !default;
|
|
$indigo: #6610f2 !default;
|
|
$purple: #613d7c !default;
|
|
$pink: #e83e8c !default;
|
|
$red: #ff0039 !default;
|
|
$orange: #f0ad4e !default;
|
|
$yellow: #ff7518 !default;
|
|
$green: #3fb618 !default;
|
|
$teal: #20c997 !default;
|
|
$cyan: #9954bb !default;
|
|
|
|
$primary: $blue !default;
|
|
$secondary: $gray-800 !default;
|
|
$success: $green !default;
|
|
$info: $cyan !default;
|
|
$warning: $yellow !default;
|
|
$danger: $red !default;
|
|
$light: $gray-100 !default;
|
|
$dark: $gray-800 !default;
|
|
|
|
$min-contrast-ratio: 2.6 !default;
|
|
|
|
// Options
|
|
|
|
$enable-rounded: false !default;
|
|
|
|
// Body
|
|
|
|
$body-color: $gray-800 !default;
|
|
|
|
// Fonts
|
|
|
|
// stylelint-disable-next-line value-keyword-case
|
|
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
|
$headings-font-weight: 400 !default;
|
|
|
|
// Navbar
|
|
|
|
$navbar-dark-hover-color: rgba($white, 1) !default;
|
|
$navbar-light-hover-color: rgba($black, .9) !default;
|
|
|
|
// Alerts
|
|
|
|
$alert-border-width: 0 !default;
|
|
|
|
// Progress bars
|
|
|
|
$progress-height: .5rem !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: false !default;
|
|
$sidebar-bg: if(variable-exists(body-bg), $body-bg, #fff) !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-fg}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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
|
|
$border-color: mix(
|
|
if(variable-exists(body-color), $body-color, #fff),
|
|
$body-contrast-bg,
|
|
30%
|
|
) !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 `<body>` 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>") !default;
|
|
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
|
|
|
|
$form-switch-checked-color: $component-active-color !default;
|
|
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
|
|
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
|
|
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
|
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
|
|
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !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;
|
|
$font-family-base: "Source Sans Pro";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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 "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
|
|
|
|
@import "spacer";
|
|
@import "tab-fill";
|
|
@import "color-utilities";
|
|
|
|
$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;
|
|
}
|
|
// 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(--';
|
|
}
|
|
}
|
|
|
|
$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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
$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%);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
.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-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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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();
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
|
|
$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;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
.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" }
|
|
|
|
|
|
|
|
|
|
|
|
.sidebar-item .chapter-number {
|
|
color: $body-color;
|
|
}
|
|
|
|
|
|
|
|
|
|
.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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-fg)}" class="bi bi-body-text" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5Zm0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/></svg>');
|
|
}
|
|
|
|
.navbar .quarto-reader-toggle.reader .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-bg)}" class="bi bi-body-text" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5Zm0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/></svg>');
|
|
}
|
|
|
|
.sidebar-navigation .quarto-reader-toggle:not(.reader) .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($sidebar-fg)}" class="bi bi-body-text" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5Zm0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/></svg>');
|
|
}
|
|
|
|
.sidebar-navigation .quarto-reader-toggle.reader .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($sidebar-bg)}" class="bi bi-body-text" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 .5A.5.5 0 0 1 .5 0h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 0 .5Zm0 2A.5.5 0 0 1 .5 2h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm9 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-9 2A.5.5 0 0 1 .5 4h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm5 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Zm-12 2A.5.5 0 0 1 .5 6h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm8 0a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm-8 2A.5.5 0 0 1 .5 8h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5Zm7 0a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm-7 2a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1h-8a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5Z"/></svg>');
|
|
}
|
|
|
|
#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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($navbar-fg)}" class="bi bi-menu-button-wide" viewBox="0 0 16 16"><path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v2A1.5 1.5 0 0 1 14.5 5h-13A1.5 1.5 0 0 1 0 3.5v-2zM1.5 1a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-13z"/><path d="M2 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm10.823.323-.396-.396A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/></svg>');
|
|
}
|
|
|
|
.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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-up" viewBox="0 0 16 16"><path d="M3.5 12.5a.5.5 0 0 1-1 0V3.707L1.354 4.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 3.707V12.5zm3.5-9a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/></svg>');
|
|
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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sort-down" viewBox="0 0 16 16"><path d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293V2.5zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/></svg>');
|
|
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 <code> 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:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
|
|
} @else {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
|
|
}
|
|
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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color)}" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
|
|
} @else {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
|
|
}
|
|
}
|
|
|
|
@if variable-exists(btn-code-copy-color-active) {
|
|
#{$code-copy-selector} .code-copy-button:hover > .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color-active)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
|
|
}
|
|
#{$code-copy-selector} .code-copy-button-checked:hover > .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($btn-code-copy-color-active)}" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
|
|
}
|
|
}
|
|
|
|
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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
|
|
background-repeat: no-repeat;
|
|
background-size: 1rem 1rem;
|
|
}
|
|
|
|
.code-tools-button:hover > .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($body-color)}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
|
|
}
|
|
|
|
#quarto-embedded-source-code-modal .code-copy-button > .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
|
|
}
|
|
|
|
#quarto-embedded-source-code-modal .code-copy-button-checked > .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
|
|
}
|
|
|
|
/* 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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($text-muted)}" class="bi bi-journal-code" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>');
|
|
} @else {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/><path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/><path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/></svg>');
|
|
}
|
|
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":
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>',
|
|
),
|
|
// TIP
|
|
"tip":
|
|
(
|
|
"color": $callout-color-tip,
|
|
"icon":
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/></svg>',
|
|
),
|
|
// WARNING
|
|
"warning":
|
|
(
|
|
"color": $callout-color-warning,
|
|
"icon":
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16"><path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/><path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/></svg>',
|
|
),
|
|
// CAUTION
|
|
"caution":
|
|
(
|
|
"color": $callout-color-caution,
|
|
"icon":
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cone-striped" viewBox="0 0 16 16"><path d="M9.97 4.88l.953 3.811C10.158 8.878 9.14 9 8 9c-1.14 0-2.159-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.274 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z"/></svg>',
|
|
),
|
|
// IMPORTANT
|
|
"important":
|
|
(
|
|
"color": $callout-color-important,
|
|
"icon":
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>',
|
|
)
|
|
);
|
|
|
|
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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($body-color)}" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
|
|
}
|
|
}
|
|
|
|
.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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-light-color)}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
|
|
}
|
|
|
|
.navbar .quarto-color-scheme-toggle.alternate .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA($navbar-light-color)}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
|
|
}
|
|
|
|
.sidebar-navigation .quarto-color-scheme-toggle:not(.alternate) .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 10%))}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
|
|
}
|
|
|
|
.sidebar-navigation .quarto-color-scheme-toggle.alternate .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 10%))}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
|
|
}
|
|
|
|
// 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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 35%))}" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/></svg>');
|
|
}
|
|
|
|
.quarto-color-scheme-toggle.alternate.top-right .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGBA(theme-dim($body-color, 20%))}" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>');
|
|
}
|
|
|
|
// 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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB($link-color)}" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');
|
|
} @else {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/></svg>');
|
|
}
|
|
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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB(bannerDim())}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
|
|
}
|
|
|
|
.code-tools-button:hover > .bi::before {
|
|
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#{colorToRGB(bannerColor())}" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg>');
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
|
|
// Variables
|
|
|
|
$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap" !default;
|
|
@if $web-font-path {
|
|
@import url($web-font-path);
|
|
}
|
|
|
|
// Typography
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
// Indicators
|
|
|
|
.badge {
|
|
&.bg-light {
|
|
color: $dark;
|
|
}
|
|
}
|
|
|
|
// Progress bars
|
|
|
|
.progress {
|
|
@include box-shadow(none);
|
|
|
|
.progress-bar {
|
|
font-size: 8px;
|
|
line-height: 8px;
|
|
}
|
|
}
|
|
|
|
|
|
// quarto-scss-analysis-annotation { "origin": null }
|
|
|
|
|
|
/* TODO: Provide custom CSS rules */
|
|
|
|
main p, main li {
|
|
text-align: left;
|
|
hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
font-kerning: auto;
|
|
}
|
|
.verso, .exemplo
|
|
{
|
|
display: block;
|
|
margin: 15px auto;
|
|
width: 300px;
|
|
}
|
|
|
|
#como-citar-bibtex, #como-citar-atribuicao {
|
|
|
|
border: 1px solid #dedede;
|
|
border-radius: 2px;
|
|
padding: 10px;
|
|
margin-bottom: 1rem;
|
|
|
|
}
|
|
|
|
#como-citar-atribuicao p {
|
|
text-indent: -20px;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#como-citar p {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.verso {
|
|
text-indent: -15px;
|
|
}
|
|
|
|
main li {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
h1{
|
|
margin-bottom: 18px !important;
|
|
text-align: center;
|
|
}
|
|
|
|
h2#toc-title {
|
|
box-shadow:none;
|
|
}
|
|
|
|
h1, h2 {
|
|
|
|
margin-top: 50px;
|
|
|
|
}
|
|
|
|
#TOC .small_h2{
|
|
font-size: inherit;
|
|
}
|
|
|
|
|
|
#TOC a {
|
|
word-break: normal;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
}
|
|
|
|
div.autores{
|
|
margin-bottom: 30px;
|
|
margin-top: -15px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
div.autores p {
|
|
text-align: right;
|
|
}
|
|
|
|
#direitos-autorais p {
|
|
text-align: center;
|
|
}
|
|
|
|
blockquote{
|
|
text-align: left;
|
|
hyphens: auto;
|
|
font-kerning: auto;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
blockquote+p span div {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
font-size: unset;
|
|
}
|
|
.references div{
|
|
text-indent: -20px;
|
|
margin-left: 20px;
|
|
text-align: justify;
|
|
}
|
|
|
|
.citation div {
|
|
text-align: justify;
|
|
}
|
|
|
|
|
|
.figure-caption {
|
|
text-align: center;
|
|
}
|
|
|
|
.contador-figura{
|
|
font-weight: bold;
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
mjx-container {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 991.98px){
|
|
body .page-columns, body.fullcontent:not(.floating):not(.docked) .page-columns, body.slimcontent:not(.floating):not(.docked) .page-columns, body.docked .page-columns, body.docked.slimcontent .page-columns, body.docked.fullcontent .page-columns, body.floating .page-columns, body.floating.slimcontent .page-columns, body.floating.fullcontent .page-columns {
|
|
display: grid;
|
|
gap: 0;
|
|
grid-template-columns: [screen-start] 1.5em [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] 1.5em [screen-end];
|
|
}
|
|
|
|
#quarto-margin-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
#quarto-content {
|
|
max-width: 768px;
|
|
margin: auto;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
/* TODO: Provide custom CSS rules */
|
|
|
|
|
|
#conteudo-capitulo, h1.title {
|
|
|
|
font-family: gfs_artemisia !important;
|
|
line-height: 1.5 !important;
|
|
-webkit-hyphens: auto;
|
|
hyphens: auto;
|
|
|
|
}
|
|
|
|
#conteudo-capitulo {margin-top: 45px;}
|
|
|
|
.tabela { display: table; }
|
|
.tablinha { display: table-row; }
|
|
.tabcel { display: table-cell; }
|
|
.tabcorpo {display: table-header-group;}
|
|
|
|
img {
|
|
image-rendering: -moz-crisp-edges; /* Firefox */
|
|
image-rendering: -o-crisp-edges; /* Opera */
|
|
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
|
|
image-rendering: crisp-edges;
|
|
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
|
|
|
|
}
|
|
|
|
|
|
.mjx-container .mjx-math {
|
|
white-space: normal;
|
|
}
|
|
|
|
.container-fch {
|
|
|
|
max-width: 1060px;
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
@media(max-width:768px){
|
|
.wide {display:none;}
|
|
.mobilefont {font-size:0.8em;}
|
|
|
|
|
|
|
|
iframe.graficos {
|
|
|
|
height: 265px;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
@media(min-width:768px){
|
|
.tight {display:none;}
|
|
|
|
}
|
|
|
|
@media(min-width:1300px){
|
|
|
|
iframe.graficos {
|
|
|
|
height: 305px !important;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.figura {
|
|
|
|
position: relative;
|
|
font-family: gfs_artemisia;
|
|
text-align: center;
|
|
padding: 0 !important;
|
|
overflow: hidden;
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
display: block;
|
|
-webkit-column-break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
line-height: 1.2;
|
|
|
|
}
|
|
|
|
span.legenda {
|
|
|
|
display: block;
|
|
margin-top: 22px;
|
|
margin-bottom: 30px;;
|
|
|
|
}
|
|
|
|
.figura a {text-align: center;}
|
|
|
|
.figura img {
|
|
|
|
text-align: center;
|
|
|
|
width: 75%;
|
|
|
|
max-width: 320px;
|
|
|
|
height: auto;
|
|
|
|
|
|
}
|
|
|
|
.interativo {
|
|
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-top: 20px;
|
|
display: block;
|
|
height: fit-content;
|
|
-webkit-column-break-inside: avoid;
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.controles_interatividade {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
iframe.graficos {
|
|
|
|
overflow: hidden;
|
|
position: relative;
|
|
border: none;
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
height: 290px;
|
|
min-width: 280px;
|
|
max-width: 540px;
|
|
break-inside: avoid-column;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p.unidade {
|
|
|
|
|
|
text-align: justify;
|
|
text-indent: 35px !important;
|
|
|
|
margin-bottom: 13px !important;
|
|
font-size: 1.1em;
|
|
|
|
}
|
|
|
|
span.centro {
|
|
|
|
display: block;
|
|
text-align: center;
|
|
margin: 10px 0px
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
font-family: 'gfs_artemisia';
|
|
src: url('./gfs_artemisia/GFSArtemisia.otf') format('opentype'),
|
|
url('./gfs_artemisia/GFSArtemisia.ttf') format('trutype');
|
|
|
|
}
|
|
|
|
@font-face {
|
|
|
|
font-family: 'oswald';
|
|
src: url('./oswald/Oswald-Bold.otf') format('opentype'),
|
|
url('./oswald/Oswald-Bold.ttf') format('trutype');
|
|
|
|
}
|
|
|
|
h1 {
|
|
|
|
font-size: 28pt;
|
|
text-align: left;
|
|
margin-bottom: 43px;
|
|
|
|
}
|
|
|
|
#conteudo-capitulo h2 {
|
|
|
|
font-size: 15pt;
|
|
text-align: left;
|
|
margin-top: 30px;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
ul.item{
|
|
|
|
list-style: disc inside;
|
|
|
|
}
|
|
|
|
ul.item li {
|
|
|
|
margin-bottom: 12px;
|
|
line-height: 1.5 !important;
|
|
|
|
}
|
|
|
|
ul.listaLimpa {
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
table.equation {
|
|
|
|
display: inline;
|
|
|
|
}
|
|
|
|
.mathdisplay {
|
|
|
|
margin: 25px auto;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
td {
|
|
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.CENTER {
|
|
|
|
margin: 20px auto;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
div.CENTER table div.CENTER img {
|
|
|
|
width: 80%;
|
|
max-width: 550px;
|
|
height: auto;
|
|
|
|
}
|
|
|
|
table {
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
.BOTTOM {
|
|
|
|
caption-side: bottom;
|
|
|
|
}
|
|
|
|
caption {
|
|
|
|
caption-side: bottom;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.unidade {
|
|
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
|
|
}
|
|
|
|
DIV.equation { text-align-last:justify; white-space: nowrap; } /* place eq nos */
|
|
|
|
|
|
|
|
|
|
|
|
TABLE.PAD TD { padding:3px; }
|
|
TABLE.BORDER TR:first-child { border-top:1px solid black; border-bottom:1px solid black; font-weight: bold;}
|
|
TABLE.BORDER TR:last-child { border-bottom:1px solid black;}
|
|
TABLE.BORDER TD {padding-left: 10px; padding-right: 10px;}
|
|
TABLE.BORDER TR:hover {background: #5fade4}
|
|
TABLE.BORDER { width: 100%;}
|
|
TABLE.equation { margin:auto; } /* place eq nos at right/left edge */
|
|
TABLE.equation > * { vertical-align:baseline; }
|
|
TABLE.equation TD { white-space:nowrap; }
|
|
TABLE { border-collapse: collapse; }
|
|
|
|
.mathdisplay {
|
|
margin: 25px auto;
|
|
text-align: center; /* Centraliza o conteúdo da tabela */
|
|
position: relative;
|
|
}
|
|
|
|
.mathdisplay table {
|
|
display: inline-block; /* Faz a tabela se comportar como um bloco em linha */
|
|
text-align: initial; /* Reseta o alinhamento de texto */
|
|
}
|
|
|
|
|
|
td.eqno {
|
|
position: absolute;
|
|
right: 0;
|
|
} /* equation-number cells */
|
|
|
|
.referencia {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
// quarto-scss-analysis-annotation { "origin": null } |