198 lines
3.1 KiB
SCSS
198 lines
3.1 KiB
SCSS
// Reboot
|
|
|
|
// Make the edges of fonts smoother + apply globally :focus-visible styles
|
|
|
|
html * {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
&:focus-visible {
|
|
outline: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
|
|
}
|
|
}
|
|
|
|
|
|
// Disable :focus-visible for offcanvas component
|
|
|
|
.offcanvas:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
|
|
// Sticky footer
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
.content-wrapper {
|
|
flex: 1;
|
|
}
|
|
.footer {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
|
|
// Images
|
|
// Responsive images (ensure images don't scale beyond their parents)
|
|
|
|
img,
|
|
figure {
|
|
max-width: 100%;
|
|
height: auto;
|
|
vertical-align: middle;
|
|
}
|
|
svg {
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
// Responsive iframes
|
|
|
|
iframe {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
// Links
|
|
/* stylelint-disable selector-no-qualifying-type */
|
|
a,
|
|
button {
|
|
text-underline-offset: .25em;
|
|
&.text-decoration-underline:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
/* stylelint-enable selector-no-qualifying-type */
|
|
|
|
.link-body-emphasis {
|
|
--#{$prefix}link-opacity: 1;
|
|
}
|
|
|
|
|
|
// Text Selection Color
|
|
|
|
::selection {
|
|
background: var(--#{$prefix}user-selection-color);
|
|
}
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark) {
|
|
::selection {
|
|
background: var(--#{$prefix}user-selection-color-dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Lists
|
|
|
|
ol,
|
|
ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $spacer * .5;
|
|
padding-left: $spacer * 1.5;
|
|
|
|
ul,
|
|
ol {
|
|
margin-top: $spacer * .5;
|
|
}
|
|
}
|
|
|
|
ol,
|
|
ul,
|
|
dl {
|
|
margin-top: 0;
|
|
margin-bottom: $paragraph-margin-bottom;
|
|
}
|
|
|
|
dt {
|
|
color: $dt-color;
|
|
}
|
|
|
|
dd {
|
|
margin-bottom: $spacer * .75;
|
|
}
|
|
|
|
|
|
// Legend
|
|
|
|
legend {
|
|
color: $legend-color;
|
|
}
|
|
|
|
|
|
// Base font icons styles
|
|
|
|
[class*=" #{$icon-prefix}"],
|
|
[class^="#{$icon-prefix}"] {
|
|
display: inline-flex;
|
|
|
|
&:not(.animate-target) {
|
|
a &,
|
|
button & {
|
|
transition: opacity .2s ease-in-out;
|
|
}
|
|
a:hover &,
|
|
a:focus-visible &,
|
|
a.active &,
|
|
a.show &,
|
|
button:hover &,
|
|
button:focus-visible &,
|
|
button.active &,
|
|
button.show & {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Code
|
|
|
|
pre,
|
|
.hljs {
|
|
padding: $pre-padding-y $pre-padding-x;
|
|
margin: 0;
|
|
background-color: $pre-bg;
|
|
@include border-radius($pre-border-radius);
|
|
}
|
|
|
|
kbd {
|
|
@include border-radius($border-radius-xs);
|
|
}
|
|
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
// Section that is wider than a container on a left/right side
|
|
|
|
.container-start {
|
|
margin-left: calc((100% - (map-get($container-max-widths, "xxl") - $grid-gutter-width)) / 2);
|
|
}
|
|
.container-end {
|
|
margin-right: calc((100% - (map-get($container-max-widths, "xxl") - $grid-gutter-width)) / 2);
|
|
}
|
|
@include media-breakpoint-down(xxl) {
|
|
.container-start {
|
|
margin-left: calc((100% - (map-get($container-max-widths, "xl") - $grid-gutter-width)) / 2);
|
|
}
|
|
.container-end {
|
|
margin-right: calc((100% - (map-get($container-max-widths, "xl") - $grid-gutter-width)) / 2);
|
|
}
|
|
}
|
|
@include media-breakpoint-down(sm) {
|
|
.container-start {
|
|
padding-left: $container-padding-x * .5;
|
|
margin-left: 0;
|
|
}
|
|
.container-end {
|
|
padding-right: $container-padding-x * .5;
|
|
margin-right: 0;
|
|
}
|
|
}
|