Back to top ↑
/**
* media blocks alignment
* variants left|center|right|fill|wide|full
*/
/* left && right */
/* ----- ----- ----- ----- */
@media (--breakpoint-md-only) {
.align-left > img,
.align-right > img {
width: 100%;
}
}
@media (--breakpoint-md) {
/* float media blocks on large screens */
.align-left {
float: left;
margin-right: 1rem;
}
.align-right {
float: right;
margin-left: 1rem;
}
.align-left,
.align-right {
/* use table to avoid caption overflow */
display: table;
width: auto;
max-width: 50%;
margin-bottom: 0.25rem;
}
.align-left > div:first-child,
.align-right > div:first-child {
/* img | picture | canvas | audio | video | iframe | pre | div */
/* expand container for video iframe */
display: table-cell;
width: 100vw;
max-width: 100%;
padding-bottom: 0.25rem;
}
.align-left > figcaption,
.align-right > figcaption {
/* avoid caption overflow */
display: table-caption;
caption-side: bottom;
}
}
/* fill */
/* ----- ----- ----- ----- */
.align-fill > :first-child {
width: 100%;
}
/* wide && full */
/* ----- ----- ----- ----- */
.align-wide > :first-child,
.align-full > :first-child {
display: block;
position: relative;
width: 100vw;
max-width: 100%;
left: 50%;
transform: translateX(-50%);
}
body:not(.has-sidebar) .align-wide > :first-child {
max-width: calc(100% + 20%);
}
body:not(.has-sidebar) .align-full > :first-child {
max-width: 100vw;
}
:not(.flex):not(.display-flex).align-center {
text-align: center;
}
Back to top ↑
/**
* aspect ratio
* - image does not need a container, but always requires object-fit class
* - iframe does not need a container, it's optional
*/
/* create aspect ratio */
[class*=aspect-ratio],
[style*=--aspect-ratio] {
aspect-ratio: var(--aspect-ratio);
}
/* make iframe fit */
[class*=aspect-ratio] > iframe,
[style*=--aspect-ratio] > iframe,
iframe[class*=aspect-ratio],
iframe[style*=--aspect-ratio] {
width: 100%;
height: 100%;
}
.aspect-ratio-1\/1 {
--aspect-ratio: 1/1;
}
.aspect-ratio-2\/1 {
--aspect-ratio: 2/1;
}
.aspect-ratio-3\/2 {
--aspect-ratio: 3/2;
}
.aspect-ratio-4\/3 {
--aspect-ratio: 4/3;
}
.aspect-ratio-16\/9 {
--aspect-ratio: 16/9;
}
Back to top ↑
.bg-left { background-position-x: left; }
.bg-right { background-position-x: right; }
.bg-bottom { background-position-y: bottom; }
.bg-top { background-position-y: top; }
.bg-x-center { background-position-x: center; }
.bg-y-center { background-position-y: center; }
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }
.bg-image { background-position: center center; background-size: cover; }
.bg-repeat-x { background-repeat: repeat-x; }
.bg-repeat-y { background-repeat: repeat-y; }
.bg-repeat-0 { background-repeat: no-repeat; }
.bg-white { background: #fff; }
.bg-black { background: #000; }
.bg-default { background: var(--background-color-default); }
.bg-highlight { background: var(--background-color-highlight); }
/* stock colors */
.bg-blue { background: var(--color-blue); }
.bg-blue-light { background: var(--color-blue-light); }
.bg-yellow { background: var(--color-yellow); }
.bg-yellow-light { background: var(--color-yellow-light); }
.bg-green { background: var(--color-green); }
.bg-green-light { background: var(--color-green-light); }
.bg-red { background: var(--color-red); }
.bg-red-light { background: var(--color-red-light); }
/* contextual colors */
.bg-info { background: var(--color-blue); }
.bg-info-light { background: var(--color-blue-light); }
.bg-warning { background: var(--color-yellow); }
.bg-warning-light { background: var(--color-yellow-light); }
.bg-success { background: var(--color-green); }
.bg-success-light { background: var(--color-green-light); }
.bg-error { background: var(--color-red); }
.bg-error-light { background: var(--color-red-light); }
/* brand colors */
.bg-primary { background: var(--color-primary); }
.bg-primary-light { background: var(--color-primary-light); }
.bg-secondary { background: var(--color-secondary); }
.bg-secondary-light { background: var(--color-secondary-light); }
.bg-tertiary { background: var(--color-tertiary); }
.bg-tertiary-light { background: var(--color-tertiary-light); }
.bg-quaternary { background: var(--color-quaternary); }
.bg-quaternary-light { background: var(--color-quaternary-light); }
.bg-complementary { background: var(--color-complementary); }
.bg-complementary-light { background: var(--color-complementary-light); }
.bg-highlight-hover:hover,
.bg-highlight-hover:focus {
background-color: var(--background-color-highlight);
}
.bg-transparent {
background: transparent;
}
.bg-transparent:hover,
.bg-transparent:focus {
background-image: none;
}
.bg-gradient {
--direction: to bottom;
--from: white;
--to: black;
background: linear-gradient(var(--direction), var(--from), var(--to));
}
.bg-stripes {
background: repeating-linear-gradient(
-45deg,
var(--background-color-highlight),
var(--background-color-highlight) 10px,
var(--background-color-default) 10px,
var(--background-color-default) 20px
);
}
.bg-squares {
background:
linear-gradient(45deg, var(--background-color-highlight) 25%, transparent 25%, transparent 75%, var(--background-color-highlight) 75%, var(--background-color-highlight)),
linear-gradient(45deg, var(--background-color-highlight) 25%, transparent 25%, transparent 75%, var(--background-color-highlight) 75%, var(--background-color-highlight));
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
.bg-shade {
/**
* background shade
* uses easing function plugin
* color stops are processed at build time to create easing gradient
* doesn't accept custom values at the front-end
* https://www.npmjs.com/package/postcss-easing-gradients
*/
background: linear-gradient(to bottom, hsla(240, 100%, 2%, 0), ease-in-out, hsla(240, 100%, 2%, 0.7));
}
Back to top ↑
.border { border: var(--border-width-default) solid var(--border-color-default) }
.border-1 { border: 1px solid var(--border-color-default) }
.border-top { border-top: var(--border-width-default) solid var(--border-color-default) }
.border-top-1 { border-top: 1px solid var(--border-color-default) }
.border-right { border-right: var(--border-width-default) solid var(--border-color-default) }
.border-right-1 { border-right: 1px solid var(--border-color-default) }
.border-bottom { border-bottom: var(--border-width-default) solid var(--border-color-default) }
.border-bottom-1 { border-bottom: 1px solid var(--border-color-default) }
.border-left { border-left: var(--border-width-default) solid var(--border-color-default) }
.border-left-1 { border-left: 1 solid var(--border-color-default) }
.border-0 { border: 0 }
.border-top-0 { border-top: 0 }
.border-right-0 { border-right: 0 }
.border-bottom-0 { border-bottom: 0 }
.border-left-0 { border-left: 0 }
.border-dashed { border-style: dashed }
.border-radius { border-radius: var(--border-radius-default) }
.border-radius-0\.1 { border-radius: 0.1em }
.border-radius-0\.2 { border-radius: 0.2em }
.border-radius-0\.3 { border-radius: 0.3em }
.border-radius-0\.4 { border-radius: 0.4em }
.border-radius-0\.5 { border-radius: 0.5em }
.border-top-left-radius { border-top-left-radius: var(--border-radius-default) }
.border-top-left-radius-0\.1 { border-top-left-radius: 0.1em }
.border-top-left-radius-0\.2 { border-top-left-radius: 0.2em }
.border-top-left-radius-0\.3 { border-top-left-radius: 0.3em }
.border-top-left-radius-0\.4 { border-top-left-radius: 0.4em }
.border-top-left-radius-0\.5 { border-top-left-radius: 0.5em }
.border-top-right-radius { border-top-right--radius: var(--border-radius-default) }
.border-top-right-radius-0\.1 { border-top-right-radius: 0.1em }
.border-top-right-radius-0\.2 { border-top-right-radius: 0.2em }
.border-top-right-radius-0\.3 { border-top-right-radius: 0.3em }
.border-top-right-radius-0\.4 { border-top-right-radius: 0.4em }
.border-top-right-radius-0\.5 { border-top-right-radius: 0.5em }
.border-bottom-right-radius { border-bottom-right--radius: var(--border-radius-default) }
.border-bottom-right-radius-0\.1 { border-bottom-right-radius: 0.1em }
.border-bottom-right-radius-0\.2 { border-bottom-right-radius: 0.2em }
.border-bottom-right-radius-0\.3 { border-bottom-right-radius: 0.3em }
.border-bottom-right-radius-0\.4 { border-bottom-right-radius: 0.4em }
.border-bottom-right-radius-0\.5 { border-bottom-right-radius: 0.5em }
.border-bottom-left-radius { border-bottom-left--radius: var(--border-radius-default) }
.border-bottom-left-radius-0\.1 { border-bottom-left-radius: 0.1em }
.border-bottom-left-radius-0\.2 { border-bottom-left-radius: 0.2em }
.border-bottom-left-radius-0\.3 { border-bottom-left-radius: 0.3em }
.border-bottom-left-radius-0\.4 { border-bottom-left-radius: 0.4em }
.border-bottom-left-radius-0\.5 { border-bottom-left-radius: 0.5em }
.border-radius-ellipsis { border-radius: 100% }
.border-radius-circle { border-radius: 1000px }
.box-shadow { box-shadow: 0 2px 5px rgba(0,0,0,0.1) }
.border-current {
border-color: currentColor;
}
.border-primary-hover:hover,
.border-primary-hover:focus {
border-color: var(--color-primary);
}
.border-light {
border-color: var(--border-color-light);
}
@media (--breakpoint-sm-min) {
.border-sm { border: var(--border-width-default) solid var(--border-color-default) }
.border-1-sm { border: 1px solid var(--border-color-default) }
.border-top-sm { border-top: var(--border-width-default) solid var(--border-color-default) }
.border-top-1-sm { border-top: 1px solid var(--border-color-default) }
.border-right-sm { border-right: var(--border-width-default) solid var(--border-color-default) }
.border-right-1-sm { border-right: 1px solid var(--border-color-default) }
.border-bottom-sm { border-bottom: var(--border-width-default) solid var(--border-color-default) }
.border-bottom-1-sm { border-bottom: 1px solid var(--border-color-default) }
.border-left-sm { border-left: var(--border-width-default) solid var(--border-color-default) }
.border-left-1-sm { border-left: 1 solid var(--border-color-default) }
.box-shadow-sm { box-shadow: 0 2px 5px rgba(0,0,0,0.1) }
}
@media (--breakpoint-md-min) {
.border-md { border: var(--border-width-default) solid var(--border-color-default) }
.border-1-md { border: 1px solid var(--border-color-default) }
.border-top-md { border-top: var(--border-width-default) solid var(--border-color-default) }
.border-top-1-md { border-top: 1px solid var(--border-color-default) }
.border-right-md { border-right: var(--border-width-default) solid var(--border-color-default) }
.border-right-1-md { border-right: 1px solid var(--border-color-default) }
.border-bottom-md { border-bottom: var(--border-width-default) solid var(--border-color-default) }
.border-bottom-1-md { border-bottom: 1px solid var(--border-color-default) }
.border-left-md { border-left: var(--border-width-default) solid var(--border-color-default) }
.border-left-1-md { border-left: 1 solid var(--border-color-default) }
.box-shadow-md { box-shadow: 0 2px 5px rgba(0,0,0,0.1) }
}
@media (--breakpoint-lg-min) {
.border-lg { border: var(--border-width-default) solid var(--border-color-default) }
.border-1-lg { border: 1px solid var(--border-color-default) }
.border-top-lg { border-top: var(--border-width-default) solid var(--border-color-default) }
.border-top-1-lg { border-top: 1px solid var(--border-color-default) }
.border-right-lg { border-right: var(--border-width-default) solid var(--border-color-default) }
.border-right-1-lg { border-right: 1px solid var(--border-color-default) }
.border-bottom-lg { border-bottom: var(--border-width-default) solid var(--border-color-default) }
.border-bottom-1-lg { border-bottom: 1px solid var(--border-color-default) }
.border-left-lg { border-left: var(--border-width-default) solid var(--border-color-default) }
.border-left-1-lg { border-left: 1 solid var(--border-color-default) }
.box-shadow-lg { box-shadow: 0 2px 5px rgba(0,0,0,0.1) }
}
/* default */
.border-color-default { border-color: var(--border-color-default); }
/* stock colors */
.border-color-blue { border-color: var(--color-blue); }
.border-color-blue-light { border-color: var(--color-blue-light); }
.border-color-yellow { border-color: var(--color-yellow); }
.border-color-yellow-light { border-color: var(--color-yellow-light); }
.border-color-green { border-color: var(--color-green); }
.border-color-green-light { border-color: var(--color-green-light); }
.border-color-red { border-color: var(--color-red); }
.border-color-red-light { border-color: var(--color-red-light); }
/* contextual colors */
.border-color-info { border-color: var(--color-blue); }
.border-color-info-light { border-color: var(--color-blue-light); }
.border-color-warning { border-color: var(--color-yellow); }
.border-color-warning-light { border-color: var(--color-yellow-light); }
.border-color-success { border-color: var(--color-green); }
.border-color-success-light { border-color: var(--color-green-light); }
.border-color-error { border-color: var(--color-red); }
.border-color-error-light { border-color: var(--color-red-light); }
/* contextual colors */
.border-color-primary { border-color: var(--color-primary); }
.border-color-primary-light { border-color: var(--color-primary-light); }
.border-color-secondary { border-color: var(--color-secondary); }
.border-color-secondary-light { border-color: var(--color-secondary-light); }
.border-color-tertiary { border-color: var(--color-tertiary); }
.border-color-tertiary-light { border-color: var(--color-tertiary-light); }
.border-color-quaternary { border-color: var(--color-quaternary); }
.border-color-quaternary-light { border-color: var(--color-quaternary-light); }
.border-color-complementary { border-color: var(--color-complementary); }
.border-color-complementary-light { border-color: var(--color-complementary-light); }
Back to top ↑
.display-inline { display: inline }
.display-inline-block { display: inline-block }
.display-block { display: block !important; width: 100% }
.display-flex { display: flex }
.display-grid { display: grid }
.display-none { display: none }
.flex-nowrap { flex-wrap: nowrap }
.position-relative { position: relative }
.position-absolute { position: absolute }
.position-fixed { position: fixed }
.position-sticky {
position: sticky;
top: 1rem;
/**
* aling item to start
* if item is flex align it to start so it can scroll across container
*/
align-self: flex-start;
}
.top-0 { top: 0 }
.right-0 { right: 0 }
.bottom-0 { bottom: 0 }
.left-0 { left: 0 }
.width-100 { width: 100% }
.width-max-content { width: max-content }
.width-min-content { width: min-content }
.width-auto { width: auto }
.width-initial { width: initial }
.width-inherit { width: inherit }
.width-unset { width: unset }
.width-custom { width: var(--width) }
.max-width-100 { max-width: 100% }
.max-width-200 { max-width: 200% }
.max-width-300 { max-width: 300% }
.max-width-400 { max-width: 400% }
.max-width-500 { max-width: 500% }
.height-100 { height: 100% }
.height-auto { height: auto }
.height-initial { height: initial }
.height-inherit { height: inherit }
.height-unset { height: unset }
.overflow-x { overflow-x: auto }
.overflow-y { overflow-y: auto }
.overflow-hidden { overflow: hidden }
.overflow-scroll { overflow: scroll }
.overflow-auto { overflow: auto }
.overflow-x,
.overflow-y,
.overflow-scroll,
.overflow-auto {
/* native mobile scroll */
-webkit-overflow-scrolling: touch; /* ios safari momentum-based scrolling */
-ms-overflow-style: -ms-autohiding-scrollbar; /* ms autohide scrollbars */
}
.overflow-hint {
position: relative;
overflow: hidden;
}
.overflow-hint::after {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
width: 5rem;
height: calc(100% - 1px);
/* from (--background-color-default alpha 0) to (--background-color-default alpha 1) from reset */
background: linear-gradient(to right, hsla(240,20%,100,0), var(--background-color-default));
pointer-events: none;
}
/* safari fix */
@media (prefers-color-scheme: dark) {
/* fix gradient transition from transparent to opaque (avoid gray in-between) */
.overflow-hint::after {
/* from (--background-color-default alpha 0) to (--background-color-default alpha 1) from reset in dark mode */
background: linear-gradient(to right, hsla(225,6%,13%,0), var(--background-color-default));
}
}
.overflow-hint .overflow-x::-webkit-scrollbar { display: none }
.overflow-hint .overflow-x { -ms-overflow-style: none }
.overflow-hint > ul > li:last-of-type { padding-right: 2rem }
.z-index-1 { z-index: 1 }
.z-index-2 { z-index: 2 }
.z-index-3 { z-index: 3 }
.z-index-4 { z-index: 4 }
.z-index-5 { z-index: 5 }
.float-left { float: left }
.float-right { float: right }
.clearfix::after {
content: "";
display: block;
clear: both;
}
@media (--breakpoint-sm-min) {
.position-relative-sm { position: relative }
.position-absolute-sm { position: absolute }
.position-fixed-sm { position: fixed }
.width-custom-sm { width: var(--width-sm) }
.display-inline-sm { display: inline }
.display-inline-block-sm { display: inline-block }
.display-block-sm { display: block !important; width: 100% }
.display-flex-sm { display: flex }
.display-grid-sm { display: grid }
.display-none-sm { display: none }
}
@media (--breakpoint-md-min) {
.position-relative-md { position: relative }
.position-absolute-md { position: absolute }
.position-fixed-md { position: fixed }
.width-custom-md { width: var(--width-md) }
.display-inline-md { display: inline }
.display-inline-block-md { display: inline-block }
.display-block-md { display: block !important; width: 100% }
.display-flex-md { display: flex }
.display-grid-md { display: grid }
.display-none-md { display: none }
}
@media (--breakpoint-lg-min) {
.position-relative-lg { position: relative }
.position-absolute-lg { position: absolute }
.position-fixed-lg { position: fixed }
.width-custom-lg { width: var(--width-lg) }
.display-inline-lg { display: inline }
.display-inline-block-lg { display: inline-block }
.display-block-lg { display: block !important; width: 100% }
.display-flex-lg { display: flex }
.display-grid-lg { display: grid }
.display-none-lg { display: none }
}
Back to top ↑
/*
* style type string
* accepts image marker
* accepts string marker
* poor browser support
* https://developer.mozilla.org/en-US/docs/Web/CSS/list-style
* https://caniuse.com/mdn-css_properties_list-style-type_string
*/
/*
* @counter-style
* accepts array of symbols
* poor browser support
* https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
* https://caniuse.com/css-at-counter-style
*/
/*
* custom marker
* accepts string marker
* accepts font properties
* poor browser support
* https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Amarker
* https://caniuse.com/css-marker-pseudo
*/
.list-unstyled,
.list-inline,
[style*="--marker"] {
list-style: none;
padding-left: 0;
padding-right: 0;
}
[style*="--marker"]:not(.list-inline) ul {
padding-left: 4ch;
}
/* list inline */
.list-inline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding-left: 0;
}
/* marker */
[style*="--marker"]:not(.list-inline) > li::before, /* list block, with marker */
[style*="--marker"].list-inline > li + li::before /* list inline, with marker */ {
content: var(--marker);
}
/* remove marker whitespace */
[style*="--marker"].list-inline > li {
display: inline-flex;
}
/*
do not set --gap globally
each instance has unique context
*/
/* list gap, without marker */
.list-inline:not([style*="--marker"]) {
--gap: 2ch; /* default */
}
/* list gap, with marker */
.list-inline[style*="--marker"] {
--gap: 0.5ch; /* default */
}
/* nested list gap, with marker > without marker */
.list-inline[style*="--marker"] .list-inline:not([style*="--marker"]) {
--gap: 1ch; /* default */
}
/* list gap, without marker */
.list-inline:not([style*="--marker"]) > li:not(:last-child) {
margin-right: var(--gap);
}
/* list gap, with marker */
[style*="--marker"].list-inline > li:not(:last-child),
[style*="--marker"].list-inline > li:not(:first-child)::before {
margin-right: var(--gap);
}
Back to top ↑
.margin-0 { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; }
.margin-top-0 { margin-top: 0; }
.margin-right-0 { margin-right: 0; }
.margin-bottom-0 { margin-bottom: 0; }
.margin-left-0 { margin-left: 0; }
.margin-x-0 { margin-left: 0; margin-right: 0; }
.margin-y-0 { margin-top: 0; margin-bottom: 0; }
.margin-0\.25 { margin: 0.25rem; }
.margin-top-0\.25 { margin-top: 0.25rem; }
.margin-right-0\.25 { margin-right: 0.25rem; }
.margin-bottom-0\.25 { margin-bottom: 0.25rem; }
.margin-left-0\.25 { margin-left: 0.25rem; }
.margin-x-0\.25 { margin-left: 0.25rem; margin-right: 0.25rem; }
.margin-y-0\.25 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.margin-0\.5 { margin: 0.5rem; }
.margin-top-0\.5 { margin-top: 0.5rem; }
.margin-right-0\.5 { margin-right: 0.5rem; }
.margin-bottom-0\.5 { margin-bottom: 0.5rem; }
.margin-left-0\.5 { margin-left: 0.5rem; }
.margin-x-0\.5 { margin-left: 0.5rem; margin-right: 0.5rem; }
.margin-y-0\.5 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.margin-1 { margin: 1rem; }
.margin-top-1 { margin-top: 1rem; }
.margin-right-1 { margin-right: 1rem; }
.margin-bottom-1 { margin-bottom: 1rem; }
.margin-left-1 { margin-left: 1rem; }
.margin-x-1 { margin-left: 1rem; margin-right: 1rem; }
.margin-y-1 { margin-top: 1rem; margin-bottom: 1rem; }
.margin-1\.5 { margin: 1.5rem; }
.margin-top-1\.5 { margin-top: 1.5rem; }
.margin-right-1\.5 { margin-right: 1.5rem; }
.margin-bottom-1\.5 { margin-bottom: 1.5rem; }
.margin-left-1\.5 { margin-left: 1.5rem; }
.margin-x-1\.5 { margin-left: 1.5rem; margin-right: 1.5rem; }
.margin-y-1\.5 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.margin-n1 { margin: -1rem; }
.margin-top-n1 { margin-top: -1rem; }
.margin-right-n1 { margin-right: -1rem; }
.margin-bottom-n1 { margin-bottom: -1rem; }
.margin-left-n1 { margin-left: -1rem; }
.margin-x-n1 { margin-left: -1rem; margin-right: -1rem; }
.margin-y-n1 { margin-top: -1rem; margin-bottom: -1rem; }
.margin-2 { margin: 2rem; }
.margin-top-2 { margin-top: 2rem; }
.margin-right-2 { margin-right: 2rem; }
.margin-bottom-2 { margin-bottom: 2rem; }
.margin-left-2 { margin-left: 2rem; }
.margin-x-2 { margin-left: 2rem; margin-right: 2rem; }
.margin-y-2 { margin-top: 2rem; margin-bottom: 2rem; }
.margin-n2 { margin: -2rem; }
.margin-top-n2 { margin-top: -2rem; }
.margin-right-n2 { margin-right: -2rem; }
.margin-bottom-n2 { margin-bottom: -2rem; }
.margin-left-n2 { margin-left: -2rem; }
.margin-x-n2 { margin-left: -2rem; margin-right: -2rem; }
.margin-y-n2 { margin-top: -2rem; margin-bottom: -2rem; }
.margin-3 { margin: 3rem; }
.margin-top-3 { margin-top: 3rem; }
.margin-right-3 { margin-right: 3rem; }
.margin-bottom-3 { margin-bottom: 3rem; }
.margin-left-3 { margin-left: 3rem; }
.margin-x-3 { margin-left: 3rem; margin-right: 3rem; }
.margin-y-3 { margin-top: 3rem; margin-bottom: 3rem; }
.margin-n3 { margin: -3rem; }
.margin-top-n3 { margin-top: -3rem; }
.margin-right-n3 { margin-right: -3rem; }
.margin-bottom-n3 { margin-bottom: -3rem; }
.margin-left-n3 { margin-left: -3rem; }
.margin-x-n3 { margin-left: -3rem; margin-right: -3rem; }
.margin-y-n3 { margin-top: -3rem; margin-bottom: -3rem; }
.margin-4 { margin: 4rem; }
.margin-top-4 { margin-top: 4rem; }
.margin-right-4 { margin-right: 4rem; }
.margin-bottom-4 { margin-bottom: 4rem; }
.margin-left-4 { margin-left: 4rem; }
.margin-x-4 { margin-left: 4rem; margin-right: 4rem; }
.margin-y-4 { margin-top: 4rem; margin-bottom: 4rem; }
.margin-n4 { margin: -4rem; }
.margin-top-n4 { margin-top: -4rem; }
.margin-right-n4 { margin-right: -4rem; }
.margin-bottom-n4 { margin-bottom: -4rem; }
.margin-left-n4 { margin-left: -4rem; }
.margin-x-n4 { margin-left: -4rem; margin-right: -4rem; }
.margin-y-n4 { margin-top: -4rem; margin-bottom: -4rem; }
.margin-5 { margin: 5rem; }
.margin-top-5 { margin-top: 5rem; }
.margin-right-5 { margin-right: 5rem; }
.margin-bottom-5 { margin-bottom: 5rem; }
.margin-left-5 { margin-left: 5rem; }
.margin-x-5 { margin-left: 5rem; margin-right: 5rem; }
.margin-y-5 { margin-top: 5rem; margin-bottom: 5rem; }
.margin-n5 { margin: -5rem; }
.margin-top-n5 { margin-top: -5rem; }
.margin-right-n5 { margin-right: -5rem; }
.margin-bottom-n5 { margin-bottom: -5rem; }
.margin-left-n5 { margin-left: -5rem; }
.margin-x-n5 { margin-left: -5rem; margin-right: -5rem; }
.margin-y-n5 { margin-top: -5rem; margin-bottom: -5rem; }
/**
* margin trim
* remove margin-bottom from last element in the container
* use this alternative until native margin-trim is supported
* https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim
*/
.margin-trim > :last-child {
margin-bottom: 0;
}
Back to top ↑
.img-fluid { width: 100%; }
.img-responsive {
max-width: 100%;
height: auto;
}
Back to top ↑
.debug, .debug * {
outline: 2px solid rgba(0,10,200,0.2);
}
[style*="--before"]::before {
content: var(--before);
}
[style*="--after"]::after {
content: var(--after);
}
.cursor-zoom-in {
cursor: zoom-in;
}
.cursor-zoom-out {
cursor: zoom-out;
}
Back to top ↑
[class*="object-fit-"] {
display: block;
width: 100%;
height: 100%;
}
.object-fit-contain { object-fit: contain; }
.object-fit-cover { object-fit: cover; }
.object-fit-fill { object-fit: fill; }
.object-fit-scale-down { object-fit: scale-down; }
Back to top ↑
.padding-0 { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; }
.padding-top-0 { padding-top: 0; }
.padding-right-0 { padding-right: 0; }
.padding-bottom-0 { padding-bottom: 0; }
.padding-left-0 { padding-left: 0; }
.padding-y-0 { padding-top: 0; padding-bottom: 0; }
.padding-x-0 { padding-left: 0; padding-right: 0; }
.padding-0\.25 { padding: 0.25rem; }
.padding-top-0\.25 { padding-top: 0.25rem; }
.padding-right-0\.25 { padding-right: 0.25rem; }
.padding-bottom-0\.25 { padding-bottom: 0.25rem; }
.padding-left-0\.25 { padding-left: 0.25rem; }
.padding-y-0\.25 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.padding-x-0\.25 { padding-left: 0.25rem; padding-right: 0.25rem; }
.padding-0\.5 { padding: 0.5rem; }
.padding-top-0\.5 { padding-top: 0.5rem; }
.padding-right-0\.5 { padding-right: 0.5rem; }
.padding-bottom-0\.5 { padding-bottom: 0.5rem; }
.padding-left-0\.5 { padding-left: 0.5rem; }
.padding-y-0\.5 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.padding-x-0\.5 { padding-left: 0.5rem; padding-right: 0.5rem; }
.padding-1 { padding: 1rem; }
.padding-top-1 { padding-top: 1rem; }
.padding-right-1 { padding-right: 1rem; }
.padding-bottom-1 { padding-bottom: 1rem; }
.padding-left-1 { padding-left: 1rem; }
.padding-y-1 { padding-top: 1rem; padding-bottom: 1rem; }
.padding-x-1 { padding-left: 1rem; padding-right: 1rem; }
.padding-1\.5 { padding: 1.5rem; }
.padding-top-1\.5 { padding-top: 1.5rem; }
.padding-right-1\.5 { padding-right: 1.5rem; }
.padding-bottom-1\.5 { padding-bottom: 1.5rem; }
.padding-left-1\.5 { padding-left: 1.5rem; }
.padding-y-1\.5 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.padding-x-1\.5 { padding-left: 1.5rem; padding-right: 1.5rem; }
.padding-2 { padding: 2rem; }
.padding-top-2 { padding-top: 2rem; }
.padding-right-2 { padding-right: 2rem; }
.padding-bottom-2 { padding-bottom: 2rem; }
.padding-left-2 { padding-left: 2rem; }
.padding-y-2 { padding-top: 2rem; padding-bottom: 2rem; }
.padding-x-2 { padding-left: 2rem; padding-right: 2rem; }
.padding-3 { padding: 3rem; }
.padding-top-3 { padding-top: 3rem; }
.padding-right-3 { padding-right: 3rem; }
.padding-bottom-3 { padding-bottom: 3rem; }
.padding-left-3 { padding-left: 3rem; }
.padding-y-3 { padding-top: 3rem; padding-bottom: 3rem; }
.padding-x-3 { padding-left: 3rem; padding-right: 3rem; }
.padding-4 { padding: 4rem; }
.padding-top-4 { padding-top: 4rem; }
.padding-right-4 { padding-right: 4rem; }
.padding-bottom-4 { padding-bottom: 4rem; }
.padding-left-4 { padding-left: 4rem; }
.padding-y-4 { padding-top: 4rem; padding-bottom: 4rem; }
.padding-x-4 { padding-left: 4rem; padding-right: 4rem; }
.padding-5 { padding: 5rem; }
.padding-top-5 { padding-top: 5rem; }
.padding-right-5 { padding-right: 5rem; }
.padding-bottom-5 { padding-bottom: 5rem; }
.padding-left-5 { padding-left: 5rem; }
.padding-y-5 { padding-top: 5rem; padding-bottom: 5rem; }
.padding-x-5 { padding-left: 5rem; padding-right: 5rem; }
Back to top ↑
.top-0 { top: 0 }
.right-0 { right: 0 }
.bottom-0 { bottom: 0 }
.left-0 { left: 0 }
.top-1 { top: 1em }
.right-1 { right: 1em }
.bottom-1 { bottom: 1em }
.left-1 { left: 1em }
.top-2 { top: 2em }
.right-2 { right: 2em }
.bottom-2 { bottom: 2em }
.left-2 { left: 2em }
.top-3 { top: 3em }
.right-3 { right: 3em }
.bottom-3 { bottom: 3em }
.left-3 { left: 3em }
.top-4 { top: 4em }
.right-4 { right: 4em }
.bottom-4 { bottom: 4em }
.left-4 { left: 4em }
.top-5 { top: 5em }
.right-5 { right: 5em }
.bottom-5 { bottom: 5em }
.left-5 { left: 5em }
Back to top ↑
/* global values */
.font-size-inherit { font-size: inherit }
/* reference values */
.font-size-h1 { font-size: var(--font-size-h1) }
.font-size-h2 { font-size: var(--font-size-h2) }
.font-size-h3 { font-size: var(--font-size-h3) }
.font-size-h4 { font-size: var(--font-size-h4) }
.font-size-h5 { font-size: var(--font-size-h5) }
.font-size-h6 { font-size: var(--font-size-h6) }
.small { font-size: 0.85rem; --button-padding-y: 0.25rem; --button-padding-x: 0.5rem }
.demi-small { font-size: 0.90rem }
.lead { font-size: var(--font-size-h3) }
/* line height heading */
[class*="font-size-h"] { line-height: var(--line-height-heading) }
/**
* absolute values
* not using keyword values because those are based on browser's default
* use values based on current font size instead
*/
.font-size-xx-small { font-size: calc(var(--font-size-current) * 0.55) }
.font-size-x-small { font-size: calc(var(--font-size-current) * 0.7) }
.font-size-small { font-size: calc(var(--font-size-current) * 0.85) }
.font-size-large { font-size: calc(var(--font-size-current) * 1.25) }
.font-size-x-large { font-size: calc(var(--font-size-current) * 1.5) }
.font-size-xx-large { font-size: calc(var(--font-size-current) * 1.75) }
.font-size-xxx-large { font-size: calc(var(--font-size-current) * 2) }
/* allow larger font sizes on larger screens only */
@media (min-width: 768px) {
.font-size-x-large { font-size: calc(var(--font-size-current) * 2) }
.font-size-xx-large { font-size: calc(var(--font-size-current) * 2.5) }
.font-size-xxx-large { font-size: calc(var(--font-size-current) * 3) }
}
/* relative values - relative to parent */
.font-size-smaller { font-size: smaller }
.font-size-larger { font-size: larger }
/*
* numeric values - small
* use numeric values whenever possible
*/
.font-size-0\.5 { font-size: 0.5rem }
.font-size-0\.6 { font-size: 0.6rem }
.font-size-0\.7 { font-size: 0.7rem }
.font-size-0\.8 { font-size: 0.8rem }
.font-size-0\.9 { font-size: 0.9rem }
/*
* numeric values - medium
* use numeric values whenever possible
*/
.font-size-1 { font-size: 1rem }
.font-size-1\.25 { font-size: 1.25rem }
.font-size-1\.5 { font-size: 1.5rem }
.font-size-1\.75 { font-size: 1.75rem }
.font-size-2 { font-size: 2rem }
.font-size-2\.25 { font-size: 2.25rem }
.font-size-2\.5 { font-size: 2.5rem }
.font-size-2\.75 { font-size: 2.75rem }
.font-size-3 { font-size: 3rem }
.font-size-3\.25 { font-size: 3.25rem }
.font-size-3\.5 { font-size: 3.5rem }
.font-size-3\.75 { font-size: 3.75rem }
.font-size-4 { font-size: 4rem }
.font-size-4\.25 { font-size: 4.25rem }
.font-size-4\.5 { font-size: 4.5rem }
.font-size-4\.75 { font-size: 4.75rem }
.font-size-5 { font-size: 5rem }
.italic, .em { font-style: italic }
.bold, .strong { font-weight: bold }
.text-underline { text-decoration: underline }
.text-strike { text-decoration: line-through }
.text-capitalize { text-transform: capitalize }
.text-uppercase { text-transform: uppercase }
.text-decoration-0 { text-decoration: none }
.text-decoration-underline-hover:hover,
.text-decoration-underline-hover:focus,
a:hover .text-decoration-underline-hover,
a:focus .text-decoration-underline-hover {
text-decoration: underline;
}
.outline-0:focus { outline: 0 }
.text-align-left { text-align: left }
.text-align-center { text-align: center }
.text-align-right { text-align: right }
.text-align-justify { text-align: justify }
.text-align-start { text-align: start !important }
.text-align-end { text-align: end }
.text-align-initial { text-align: initial }
.vertical-align-top { vertical-align: text-top }
.vertical-align-middle { vertical-align: middle }
.vertical-align-bottom { vertical-align: text-bottom }
.nowrap {
white-space: nowrap;
flex-wrap: nowrap !important; /* for flex elements */
}
/**
* icon
* align icon to text baseline
* line-hight is assumed
*/
.icon {
height: 1em;
width: auto;
position: relative;
top: -0.1em;
}
.font-family-sans { font-family: var(--font-family-sans) }
.font-family-serif { font-family: var(--font-family-serif) }
.font-family-script { font-family: var(--font-family-script) }
.font-family-mono, .code, .pre { font-family: var(--font-family-mono) }
.font-family-inherit { font-family: inherit }
.font-weight-100 { font-weight: 100 } /* thin */
.font-weight-200 { font-weight: 200 }
.font-weight-300 { font-weight: 300 }
.font-weight-400 { font-weight: 400 } /* normal */
.font-weight-500 { font-weight: 500 }
.font-weight-600 { font-weight: 600 }
.font-weight-700 { font-weight: 700 } /* bold */
.font-weight-800 { font-weight: 800 }
.font-weight-900 { font-weight: 900 }
.color-default { color: var(--color-default) }
.color-muted { color: var(--color-muted) }
.color-inverse { color: var(--color-inverse) }
.color-current { color: currentColor }
.color-inherit { color: inherit }
.color-white { color: #fff }
.color-black { color: #000 }
.color-blue { color: var(--color-blue); }
.color-yellow { color: var(--color-yellow); }
.color-green { color: var(--color-green); }
.color-red { color: var(--color-red); }
.color-info { color: var(--color-blue); }
.color-warning { color: var(--color-yellow); }
.color-success { color: var(--color-green); }
.color-error { color: var(--color-red); }
.color-primary { color: var(--color-primary) }
.color-secondary { color: var(--color-secondary) }
.color-tertiary { color: var(--color-tertiary) }
.color-quaternary { color: var(--color-quaternary) }
.color-complementary { color: var(--color-complementary) }
.color-primary-hover:hover,
.color-primary-hover:focus,
a:hover .color-primary-hover,
a:focus .color-primary-hover { color: var(--color-primary) !important }
.text-shadow { text-shadow: 1px 1px 1px rgba(0, 0, 10, 0.3) }
.text-shadow-inverse { text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3) }
/**
* line clamp
* limit the number of text lines
* most browsers support prefixed version
* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
*/
[class*="line-clamp"] {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--max-lines);
overflow: hidden;
}
.line-clamp-1 { --max-lines: 1 }
.line-clamp-2 { --max-lines: 2 }
.line-clamp-3 { --max-lines: 3 }
.line-clamp-4 { --max-lines: 4 }
.line-clamp-5 { --max-lines: 5 }
Back to top ↑
/**
* visibility
* .hide-* and .display-* are available
* to hide content from screen reades use [aria-hidden="true"]
* resources: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
*/
@media (--breakpoint-xs-max) {
.hide-xs { display: none; }
}
@media (--breakpoint-sm-min) {
.hide-sm { display: none; }
}
@media (--breakpoint-md-min) {
.hide-md { display: none; }
}
@media (--breakpoint-lg-min) {
.hide-lg { display: none; }
}
.hide {
display: none;
}
/* screen readers only */
.sr-only:not(:focus):not(:focus-within):not(:active),
.display-hidden:not(:focus):not(:focus-within):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}