You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6620 lines
191 KiB
CSS
6620 lines
191 KiB
CSS
/*
|
|
* Cirrus 0.5.6
|
|
* Stanley Lim, Copyright 2020
|
|
* https://spiderpig86.github.io/Cirrus
|
|
*/
|
|
/* BASE STYLING FOR CIRRUS */
|
|
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700");
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
/* Prevent setting borders from increasing the size of an elrement */
|
|
box-sizing: border-box;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-tap-highlight-color: transparent; }
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
height: 100%; }
|
|
|
|
/* Nunito Sans for the font */
|
|
body {
|
|
letter-spacing: 0.01rem;
|
|
line-height: 1.8;
|
|
/* Globally adjust line height */
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
"Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
|
|
"Segoe UI Emoji", "Segoe UI Symbol";
|
|
letter-spacing: 0.01rem;
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
|
|
color: var(--cirrus-fg); }
|
|
|
|
/* Remove bullets from unordered lists */
|
|
ul {
|
|
list-style: none; }
|
|
|
|
/* Setting up embedded content */
|
|
img,
|
|
embed,
|
|
object,
|
|
video {
|
|
max-width: 100%;
|
|
height: auto; }
|
|
|
|
.hero.fullscreen video {
|
|
height: 100%;
|
|
object-fit: fill;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: -1; }
|
|
|
|
iframe {
|
|
outline: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
|
|
|
|
article,
|
|
aside,
|
|
figure,
|
|
footer,
|
|
header,
|
|
hgroup,
|
|
section {
|
|
display: block; }
|
|
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: inherit; }
|
|
|
|
label {
|
|
display: inline-block;
|
|
margin: 0.25rem 0; }
|
|
|
|
fieldset {
|
|
padding: 1rem; }
|
|
fieldset legend {
|
|
font-weight: bold; }
|
|
|
|
[hidden] {
|
|
display: none !important; }
|
|
|
|
/* Selection Color */
|
|
::selection {
|
|
background-color: var(--cirrus-select-bg); }
|
|
|
|
/* When focusing any element */
|
|
:focus {
|
|
box-shadow: 0 0 0.1rem 0.15rem rgba(240, 61, 77, 0.13);
|
|
outline: none; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* ANIMATIONS */
|
|
/* Keyframes */
|
|
/* Spinning loading animation */
|
|
@-webkit-keyframes loading {
|
|
from {
|
|
transform: rotate(0deg); }
|
|
to {
|
|
transform: rotate(359deg); } }
|
|
|
|
@keyframes loading {
|
|
from {
|
|
transform: rotate(0deg); }
|
|
to {
|
|
transform: rotate(359deg); } }
|
|
|
|
/* Heart animation */
|
|
@-webkit-keyframes pound {
|
|
to {
|
|
transform: scale(1.1); } }
|
|
|
|
@keyframes pound {
|
|
to {
|
|
transform: scale(1.1); } }
|
|
|
|
/* Bounce animations */
|
|
@-webkit-keyframes bounce {
|
|
from,
|
|
20%,
|
|
53%,
|
|
80%,
|
|
to {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
/* Ease-out based on power of four */
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0); }
|
|
40%,
|
|
43% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0); }
|
|
70% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
|
transform: translate3d(0, -15px, 0); }
|
|
90% {
|
|
-webkit-transform: translate3d(0, -4px, 0);
|
|
transform: translate3d(0, -4px, 0); } }
|
|
|
|
@keyframes bounce {
|
|
from,
|
|
20%,
|
|
53%,
|
|
80%,
|
|
to {
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
/* Ease-out based on power of four */
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0); }
|
|
40%,
|
|
43% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
-webkit-transform: translate3d(0, -30px, 0);
|
|
transform: translate3d(0, -30px, 0); }
|
|
70% {
|
|
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
-webkit-transform: translate3d(0, -15px, 0);
|
|
transform: translate3d(0, -15px, 0); }
|
|
90% {
|
|
-webkit-transform: translate3d(0, -4px, 0);
|
|
transform: translate3d(0, -4px, 0); } }
|
|
|
|
@keyframes bounceIn {
|
|
from,
|
|
20%,
|
|
40%,
|
|
60%,
|
|
80%,
|
|
to {
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale3d(0.3, 0.3, 0.3); }
|
|
20% {
|
|
transform: scale3d(1.1, 1.1, 1.1); }
|
|
40% {
|
|
transform: scale3d(0.9, 0.9, 0.9); }
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale3d(1.03, 1.03, 1.03); }
|
|
80% {
|
|
transform: scale3d(0.97, 0.97, 0.97); }
|
|
to {
|
|
opacity: 1;
|
|
transform: scale3d(1, 1, 1); } }
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
from {
|
|
opacity: 0; }
|
|
to {
|
|
opacity: 1; } }
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0; }
|
|
to {
|
|
opacity: 1; } }
|
|
|
|
/* Hover animation */
|
|
.hover-grow {
|
|
/* Mouse leave */
|
|
transition-duration: 0.32s; }
|
|
.hover-grow:hover {
|
|
/* Mouse enter */
|
|
transform: scale(1.1);
|
|
transition-duration: 0.08s; }
|
|
|
|
.animated {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
/* Loading button position relatively for loading spinner location */ }
|
|
.animated.loading {
|
|
display: block;
|
|
position: relative;
|
|
/* Loading Spinner, align center by default */
|
|
/* Hide text in loading button */ }
|
|
.animated.loading::after {
|
|
border: 2px solid #ced4da;
|
|
border-radius: 50%;
|
|
border-right-color: transparent;
|
|
border-top-color: transparent;
|
|
content: '';
|
|
display: block;
|
|
height: 1rem;
|
|
width: 1rem;
|
|
left: calc(50% - (1em / 1.25));
|
|
top: calc(50% - (1em / 1.35));
|
|
position: absolute;
|
|
-webkit-animation: loading 500ms infinite linear;
|
|
animation: loading 500ms infinite linear; }
|
|
.animated.loading.loading-white::after {
|
|
border-left-color: #fff;
|
|
border-bottom-color: #fff; }
|
|
.animated.loading.loading-left {
|
|
padding-left: 4rem;
|
|
/* Align spinner left */ }
|
|
.animated.loading.loading-left::after {
|
|
left: 2rem;
|
|
right: auto; }
|
|
.animated.loading.loading-right {
|
|
padding-right: 4rem;
|
|
/* Align spinner right */ }
|
|
.animated.loading.loading-right::after {
|
|
left: auto;
|
|
right: 2rem; }
|
|
.animated.loading.hide-text {
|
|
color: transparent !important; }
|
|
.animated.pulse {
|
|
animation: pound 0.35s infinite alternate;
|
|
-webkit-animation: pound 0.35s infinite alternate;
|
|
vertical-align: baseline; }
|
|
.animated.bounce {
|
|
animation-name: bounce;
|
|
-webkit-animation-name: bounce;
|
|
transform-origin: center bottom;
|
|
-webkit-transform-origin: center bottom; }
|
|
.animated.bounceIn {
|
|
animation-name: bounceIn; }
|
|
.animated.fadeIn {
|
|
-webkit-animation-name: fadeIn;
|
|
animation-name: fadeIn; }
|
|
.animated.infinite {
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite; }
|
|
.animated.infinite.alternate {
|
|
animation-direction: alternate; }
|
|
.animated.paused {
|
|
-webkit-animation-play-state: paused !important;
|
|
/* Safari 4.0 - 8.0 */
|
|
animation-play-state: paused !important; }
|
|
|
|
/* Avatar */
|
|
.avatar {
|
|
border-radius: 50%;
|
|
position: relative;
|
|
display: block;
|
|
margin: auto;
|
|
font-size: 1.5rem;
|
|
font-weight: lighter;
|
|
width: 3.2rem;
|
|
height: 3.2rem;
|
|
background-color: var(--cirrus-primary);
|
|
overflow: hidden;
|
|
/* Draw text on image just like in Gmail */ }
|
|
.avatar::before {
|
|
content: attr(data-text);
|
|
color: #fff;
|
|
left: 50%;
|
|
top: 50%;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
-ms-transform: translate(-50%, -50%); }
|
|
.avatar.avatar--xsmall {
|
|
font-size: 0.8rem;
|
|
width: 1.6rem;
|
|
height: 1.6rem; }
|
|
.avatar.avatar--small {
|
|
font-size: 1rem;
|
|
width: 2.4rem;
|
|
height: 2.4rem; }
|
|
.avatar.avatar--large {
|
|
font-size: 2rem;
|
|
width: 4.8rem;
|
|
height: 4.8rem; }
|
|
.avatar.avatar--xlarge {
|
|
font-size: 3rem;
|
|
width: 6.4rem;
|
|
height: 6.4rem; }
|
|
.avatar img.padded {
|
|
padding: 0.5rem;
|
|
width: 100%; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* CARDS */
|
|
.card {
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s;
|
|
backface-visibility: hidden;
|
|
box-shadow: 0px 5px 12px 0 rgba(42, 51, 83, 0.12), 0px 0px 5px rgba(0, 0, 0, 0.06);
|
|
margin-bottom: 1rem;
|
|
/* Allow for the cards to have the same height when u-flex is used on the card */
|
|
/* More card components in second example */
|
|
/*
|
|
NOTE: To have cards with the same height, place the card class with col-x classes and have the parent have fluid-container.
|
|
*/
|
|
/* Card Title Bar */ }
|
|
.card:hover {
|
|
transition: all 0.3s;
|
|
box-shadow: 0px 8px 20px 0 rgba(42, 51, 83, 0.12), 0 5px 5px rgba(0, 0, 0, 0.06); }
|
|
.card:hover .card-image::after {
|
|
opacity: 0; }
|
|
.card:hover .mobile-title {
|
|
margin-top: -7rem;
|
|
transition: all 0.3s ease-in-out; }
|
|
.card:hover .card-body {
|
|
opacity: 1; }
|
|
.card.u-flex .content {
|
|
flex-grow: 1; }
|
|
.card p {
|
|
margin: 1rem 0; }
|
|
.card .slide-up:hover .card-image {
|
|
transform: translateY(-40px); }
|
|
.card .card-image {
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
border-radius: 5px 5px 0 0;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
-webkit-transition: all 0.3s ease-in-out;
|
|
-moz-transition: all 0.3s ease-in-out;
|
|
-ms-transition: all 0.3s ease-in-out;
|
|
transition: all 0.3s ease-in-out; }
|
|
.card .card-image::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
-webkit-transition: all 500ms;
|
|
transition: all 500ms;
|
|
bottom: 0; }
|
|
.card .card-container {
|
|
display: block;
|
|
position: relative;
|
|
height: 40%;
|
|
min-height: 332px;
|
|
/* So it appears in html5 standards mode */ }
|
|
.card .title-container {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
width: 100%;
|
|
padding: 0 1rem; }
|
|
.card .title-container .title,
|
|
.card .title-container .subtitle {
|
|
color: #fff;
|
|
margin: 1rem auto; }
|
|
.card .title-container .title {
|
|
font-weight: 300;
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
|
|
.card .action-bar {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
padding: 0.5rem;
|
|
margin: 0;
|
|
border-top: 1px solid #e9ecef;
|
|
box-sizing: border-box;
|
|
-webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
/* Add some padding to the buttons */ }
|
|
.card .action-bar button,
|
|
.card .action-bar .btn,
|
|
.card .action-bar [type='submit'] {
|
|
margin: 0 0.5rem; }
|
|
.card .action-bar + .card-footer {
|
|
padding: 1rem 0;
|
|
border-top: 1px solid #e9ecef; }
|
|
.card .mobile-title {
|
|
position: absolute;
|
|
left: 0;
|
|
background-color: var(--cirrus-bg);
|
|
-moz-transition: 0.3s ease-in-out;
|
|
-ms-transition: all 0.3s ease-in-out;
|
|
transition: 0.3s ease-in-out;
|
|
width: 100%;
|
|
padding: 2rem 0 0 0;
|
|
backface-visibility: hidden; }
|
|
.card .card-body {
|
|
opacity: 0;
|
|
transition: all var(--animation-duration) ease-in-out; }
|
|
.card .card-footer {
|
|
position: relative;
|
|
font-size: 0.75rem;
|
|
color: #868e96; }
|
|
.card .card-head {
|
|
align-items: stretch;
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
display: flex;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
border-bottom: 1px solid #e9ecef; }
|
|
.card .card-head-title {
|
|
align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
font-weight: 700;
|
|
padding: 0 1rem; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* EXTENDED FORM */
|
|
/* Constants */
|
|
/* Mixins */
|
|
/* Base class layout for extended form */
|
|
.form-ext-control {
|
|
padding-left: 1.5rem;
|
|
position: relative;
|
|
/* Checkbox */
|
|
/* Radio Button */
|
|
/* Hides the original input */
|
|
/* Toggle Switches */ }
|
|
.form-ext-control.form-ext-checkbox .form-ext-input:checked ~ .form-ext-label:after {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); }
|
|
.form-ext-control.form-ext-checkbox .form-ext-label:before {
|
|
border-radius: 0.25rem; }
|
|
.form-ext-control.form-ext-radio .form-ext-input:checked ~ .form-ext-label:after {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
|
|
.form-ext-control.form-ext-radio .form-ext-label:before {
|
|
border-radius: 50%; }
|
|
.form-ext-control .form-ext-input {
|
|
opacity: 0;
|
|
position: absolute;
|
|
z-index: -1;
|
|
/* Checked state */ }
|
|
.form-ext-control .form-ext-input:disabled ~ .form-ext-label {
|
|
opacity: 0.4; }
|
|
.form-ext-control .form-ext-input:checked ~ .form-ext-label:before {
|
|
background-color: var(--cirrus-primary); }
|
|
.form-ext-control .form-ext-input.form-ext-input--gray:checked ~ .form-ext-label {
|
|
color: var(--cirrus-gray); }
|
|
.form-ext-control .form-ext-input.form-ext-input--gray:checked ~ .form-ext-label:before {
|
|
background-color: var(--cirrus-gray); }
|
|
.form-ext-control .form-ext-input.form-ext-input--gray:focus ~ .form-ext-label:before {
|
|
border-color: inherit;
|
|
box-shadow: 0 0 0 0.2rem rgba(213, 215, 220, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-input.form-ext-input--dark:checked ~ .form-ext-label {
|
|
color: var(--cirrus-dark); }
|
|
.form-ext-control .form-ext-input.form-ext-input--dark:checked ~ .form-ext-label:before {
|
|
background-color: var(--cirrus-dark); }
|
|
.form-ext-control .form-ext-input.form-ext-input--dark:focus ~ .form-ext-label:before {
|
|
border-color: inherit;
|
|
box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-input.form-ext-input--link:checked ~ .form-ext-label {
|
|
color: var(--cirrus-link); }
|
|
.form-ext-control .form-ext-input.form-ext-input--link:checked ~ .form-ext-label:before {
|
|
background-color: var(--cirrus-link); }
|
|
.form-ext-control .form-ext-input.form-ext-input--link:focus ~ .form-ext-label:before {
|
|
border-color: inherit;
|
|
box-shadow: 0 0 0 0.2rem rgba(94, 92, 199, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-input.form-ext-input--info:checked ~ .form-ext-label {
|
|
color: var(--cirrus-info); }
|
|
.form-ext-control .form-ext-input.form-ext-input--info:checked ~ .form-ext-label:before {
|
|
background-color: var(--cirrus-info); }
|
|
.form-ext-control .form-ext-input.form-ext-input--info:focus ~ .form-ext-label:before {
|
|
border-color: inherit;
|
|
box-shadow: 0 0 0 0.2rem rgba(41, 114, 250, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label {
|
|
color: var(--cirrus-success); }
|
|
.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label:before {
|
|
background-color: var(--cirrus-success); }
|
|
.form-ext-control .form-ext-input.form-ext-input--success:focus ~ .form-ext-label:before {
|
|
border-color: inherit;
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-input.form-ext-input--warning:checked ~ .form-ext-label {
|
|
color: var(--cirrus-warning); }
|
|
.form-ext-control .form-ext-input.form-ext-input--warning:checked ~ .form-ext-label:before {
|
|
background-color: var(--cirrus-warning); }
|
|
.form-ext-control .form-ext-input.form-ext-input--warning:focus ~ .form-ext-label:before {
|
|
border-color: inherit;
|
|
box-shadow: 0 0 0 0.2rem rgba(250, 182, 51, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-input.form-ext-input--danger:checked ~ .form-ext-label {
|
|
color: var(--cirrus-danger); }
|
|
.form-ext-control .form-ext-input.form-ext-input--danger:checked ~ .form-ext-label:before {
|
|
background-color: var(--cirrus-danger); }
|
|
.form-ext-control .form-ext-input.form-ext-input--danger:focus ~ .form-ext-label:before {
|
|
border-color: inherit;
|
|
box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-input:disabled ~ .form-ext-toggle__toggler {
|
|
opacity: 0.5; }
|
|
.form-ext-control .form-ext-toggle__label {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between; }
|
|
.form-ext-control .form-ext-toggle {
|
|
cursor: pointer;
|
|
position: relative;
|
|
/* Toggle themes */
|
|
/**
|
|
* Accessibility
|
|
*/
|
|
/**
|
|
* Accessibility
|
|
*/
|
|
/**
|
|
* Accessibility
|
|
*/
|
|
/**
|
|
* Accessibility
|
|
*/
|
|
/**
|
|
* Accessibility
|
|
*/
|
|
/**
|
|
* Accessibility
|
|
*/
|
|
/**
|
|
* Accessibility
|
|
*/ }
|
|
.form-ext-control .form-ext-toggle input[type='checkbox'],
|
|
.form-ext-control .form-ext-toggle input[type='radio'] {
|
|
opacity: 0;
|
|
position: absolute;
|
|
z-index: -1; }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle__toggler {
|
|
border: 1px solid var(--cirrus-gray);
|
|
border-radius: 6.25rem;
|
|
color: var(--cirrus-gray);
|
|
display: block;
|
|
font-size: 9px;
|
|
height: 1.5rem;
|
|
position: relative;
|
|
width: 3rem; }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle__toggler i {
|
|
display: inline-block; }
|
|
.form-ext-control .form-ext-toggle input[type='checkbox']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle input[type='checkbox']:checked + * .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle input[type='radio']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle input[type='radio']:checked + * .form-ext-toggle__toggler {
|
|
background-color: var(--cirrus-primary);
|
|
border-color: var(--cirrus-primary);
|
|
color: #fff;
|
|
position: relative;
|
|
transition: all 0.4s ease; }
|
|
.form-ext-control .form-ext-toggle input[type='checkbox']:checked + .form-ext-toggle__toggler i::after,
|
|
.form-ext-control .form-ext-toggle input[type='checkbox']:checked + * .form-ext-toggle__toggler i::after,
|
|
.form-ext-control .form-ext-toggle input[type='radio']:checked + .form-ext-toggle__toggler i::after,
|
|
.form-ext-control .form-ext-toggle input[type='radio']:checked + * .form-ext-toggle__toggler i::after {
|
|
background-color: #fff;
|
|
left: calc(100% - 20px); }
|
|
.form-ext-control .form-ext-toggle input[type='checkbox']:checked + .form-ext-toggle__toggler i::before,
|
|
.form-ext-control .form-ext-toggle input[type='checkbox']:checked + * .form-ext-toggle__toggler i::before,
|
|
.form-ext-control .form-ext-toggle input[type='radio']:checked + .form-ext-toggle__toggler i::before,
|
|
.form-ext-control .form-ext-toggle input[type='radio']:checked + * .form-ext-toggle__toggler i::before {
|
|
color: #fff;
|
|
content: attr(data-check-icon);
|
|
text-align: left; }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--gray input[type='checkbox']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--gray input[type='checkbox']:checked + * .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--gray input[type='radio']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--gray input[type='radio']:checked + * .form-ext-toggle__toggler {
|
|
background-color: var(--cirrus-gray);
|
|
border-color: var(--cirrus-gray); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--gray .form-ext-toggle__toggler {
|
|
border-color: var(--cirrus-gray);
|
|
color: var(--cirrus-gray); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--gray .form-ext-toggle__toggler i::after {
|
|
background-color: var(--cirrus-gray); }
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before {
|
|
box-shadow: 0 0 0 0.2rem rgba(213, 215, 220, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--gray .form-ext-input:focus + .form-ext-toggle__toggler {
|
|
box-shadow: 0 0 0 0.2rem rgba(213, 215, 220, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--dark input[type='checkbox']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--dark input[type='checkbox']:checked + * .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--dark input[type='radio']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--dark input[type='radio']:checked + * .form-ext-toggle__toggler {
|
|
background-color: var(--cirrus-dark);
|
|
border-color: var(--cirrus-dark); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--dark .form-ext-toggle__toggler {
|
|
border-color: var(--cirrus-dark);
|
|
color: var(--cirrus-dark); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--dark .form-ext-toggle__toggler i::after {
|
|
background-color: var(--cirrus-dark); }
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before {
|
|
box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--dark .form-ext-input:focus + .form-ext-toggle__toggler {
|
|
box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--link input[type='checkbox']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--link input[type='checkbox']:checked + * .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--link input[type='radio']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--link input[type='radio']:checked + * .form-ext-toggle__toggler {
|
|
background-color: var(--cirrus-link);
|
|
border-color: var(--cirrus-link); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--link .form-ext-toggle__toggler {
|
|
border-color: var(--cirrus-link);
|
|
color: var(--cirrus-link); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--link .form-ext-toggle__toggler i::after {
|
|
background-color: var(--cirrus-link); }
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before {
|
|
box-shadow: 0 0 0 0.2rem rgba(94, 92, 199, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--link .form-ext-input:focus + .form-ext-toggle__toggler {
|
|
box-shadow: 0 0 0 0.2rem rgba(94, 92, 199, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--info input[type='checkbox']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--info input[type='checkbox']:checked + * .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--info input[type='radio']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--info input[type='radio']:checked + * .form-ext-toggle__toggler {
|
|
background-color: var(--cirrus-info);
|
|
border-color: var(--cirrus-info); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--info .form-ext-toggle__toggler {
|
|
border-color: var(--cirrus-info);
|
|
color: var(--cirrus-info); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--info .form-ext-toggle__toggler i::after {
|
|
background-color: var(--cirrus-info); }
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before {
|
|
box-shadow: 0 0 0 0.2rem rgba(41, 114, 250, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--info .form-ext-input:focus + .form-ext-toggle__toggler {
|
|
box-shadow: 0 0 0 0.2rem rgba(41, 114, 250, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--success input[type='checkbox']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--success input[type='checkbox']:checked + * .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--success input[type='radio']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--success input[type='radio']:checked + * .form-ext-toggle__toggler {
|
|
background-color: var(--cirrus-success);
|
|
border-color: var(--cirrus-success); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--success .form-ext-toggle__toggler {
|
|
border-color: var(--cirrus-success);
|
|
color: var(--cirrus-success); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--success .form-ext-toggle__toggler i::after {
|
|
background-color: var(--cirrus-success); }
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before {
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--success .form-ext-input:focus + .form-ext-toggle__toggler {
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--warning input[type='checkbox']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--warning input[type='checkbox']:checked + * .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--warning input[type='radio']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--warning input[type='radio']:checked + * .form-ext-toggle__toggler {
|
|
background-color: var(--cirrus-warning);
|
|
border-color: var(--cirrus-warning); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--warning .form-ext-toggle__toggler {
|
|
border-color: var(--cirrus-warning);
|
|
color: var(--cirrus-warning); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--warning .form-ext-toggle__toggler i::after {
|
|
background-color: var(--cirrus-warning); }
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before {
|
|
box-shadow: 0 0 0 0.2rem rgba(250, 182, 51, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--warning .form-ext-input:focus + .form-ext-toggle__toggler {
|
|
box-shadow: 0 0 0 0.2rem rgba(250, 182, 51, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--danger input[type='checkbox']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--danger input[type='checkbox']:checked + * .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--danger input[type='radio']:checked + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--danger input[type='radio']:checked + * .form-ext-toggle__toggler {
|
|
background-color: var(--cirrus-danger);
|
|
border-color: var(--cirrus-danger); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--danger .form-ext-toggle__toggler {
|
|
border-color: var(--cirrus-danger);
|
|
color: var(--cirrus-danger); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle.form-ext-toggle--danger .form-ext-toggle__toggler i::after {
|
|
background-color: var(--cirrus-danger); }
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler,
|
|
.form-ext-control .form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before {
|
|
box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle.form-ext-toggle--danger .form-ext-input:focus + .form-ext-toggle__toggler {
|
|
box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0 1px 8px rgba(0, 0, 0, 0.07); }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle__toggler i::before,
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle__toggler i::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute; }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle__toggler i::before {
|
|
content: attr(data-uncheck-icon);
|
|
padding: 2px 7px;
|
|
line-height: 18px;
|
|
text-align: right;
|
|
top: 0;
|
|
width: 65%;
|
|
font-size: 12px; }
|
|
.form-ext-control .form-ext-toggle .form-ext-toggle__toggler i::after {
|
|
background-color: var(--cirrus-gray);
|
|
border-radius: 50%;
|
|
height: 16px;
|
|
left: 4px;
|
|
width: 16px;
|
|
transform: translateY(-50%);
|
|
transition: left var(--animation-duration) ease;
|
|
text-align: left; }
|
|
.form-ext-control .form-ext-label {
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
/* Base of custom form inputs */ }
|
|
.form-ext-control .form-ext-label:before, .form-ext-control .form-ext-label:after {
|
|
content: '';
|
|
display: block;
|
|
height: 1rem;
|
|
left: -1.5rem;
|
|
position: absolute;
|
|
top: 0.3rem;
|
|
transition: all var(--animation-duration);
|
|
width: 1rem; }
|
|
.form-ext-control .form-ext-label:before {
|
|
background-color: var(--cirrus-light);
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.25rem;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
box-sizing: border-box; }
|
|
.form-ext-control .form-ext-label:after {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 50% 50%; }
|
|
|
|
.form-ext-control .form-ext-input:checked ~ .form-ext-label:before {
|
|
border: none; }
|
|
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* GRID */
|
|
:root {
|
|
--gap-0: 0;
|
|
--gap-1: 0.25rem;
|
|
--gap-2: 0.5rem;
|
|
--gap-3: 1rem;
|
|
--gap-4: 1.25rem;
|
|
--gap-5: 1.5rem;
|
|
--gap-6: 2rem;
|
|
--gap-7: 3rem;
|
|
--gap-8: 4rem;
|
|
--gap-9: 5rem;
|
|
--gap-10: 7rem;
|
|
--gap-11: 9rem;
|
|
--gap-12: 12rem; }
|
|
|
|
.grid {
|
|
--grid-gap: --gap-2;
|
|
--grid-template-column: repeat(12, minmax(0, 1fr));
|
|
--grid-column-start: auto;
|
|
--grid-column-end: auto;
|
|
--grid-row-start: auto;
|
|
--grid-row-end: auto;
|
|
display: grid;
|
|
grid-gap: var(--grid-gap);
|
|
grid-template-columns: var(--grid-template-column);
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Templates */
|
|
/* Gap */
|
|
/* Column expansion */
|
|
/* Row expansion */
|
|
/* Cell Column Start/End */
|
|
/* Cell Row Start/End */
|
|
/* Styling grid cells */ }
|
|
.grid.grid-cols-1 {
|
|
--grid-template-column: repeat(1, minmax(0, 1fr)); }
|
|
.grid.grid-gap-1 {
|
|
--grid-gap: var(--gap-1); }
|
|
.grid .grid-c-1 {
|
|
grid-column: span 1; }
|
|
.grid .grid-r-1 {
|
|
grid-row: span 1; }
|
|
.grid .grid-cs-1 {
|
|
grid-column-start: 1; }
|
|
.grid .grid-ce-1 {
|
|
grid-column-end: 2; }
|
|
.grid .grid-rs-1 {
|
|
grid-row-start: 1; }
|
|
.grid .grid-re-1 {
|
|
grid-row-end: 2; }
|
|
.grid.grid-cols-2 {
|
|
--grid-template-column: repeat(2, minmax(0, 1fr)); }
|
|
.grid.grid-gap-2 {
|
|
--grid-gap: var(--gap-2); }
|
|
.grid .grid-c-2 {
|
|
grid-column: span 2; }
|
|
.grid .grid-r-2 {
|
|
grid-row: span 2; }
|
|
.grid .grid-cs-2 {
|
|
grid-column-start: 2; }
|
|
.grid .grid-ce-2 {
|
|
grid-column-end: 3; }
|
|
.grid .grid-rs-2 {
|
|
grid-row-start: 2; }
|
|
.grid .grid-re-2 {
|
|
grid-row-end: 3; }
|
|
.grid.grid-cols-3 {
|
|
--grid-template-column: repeat(3, minmax(0, 1fr)); }
|
|
.grid.grid-gap-3 {
|
|
--grid-gap: var(--gap-3); }
|
|
.grid .grid-c-3 {
|
|
grid-column: span 3; }
|
|
.grid .grid-r-3 {
|
|
grid-row: span 3; }
|
|
.grid .grid-cs-3 {
|
|
grid-column-start: 3; }
|
|
.grid .grid-ce-3 {
|
|
grid-column-end: 4; }
|
|
.grid .grid-rs-3 {
|
|
grid-row-start: 3; }
|
|
.grid .grid-re-3 {
|
|
grid-row-end: 4; }
|
|
.grid.grid-cols-4 {
|
|
--grid-template-column: repeat(4, minmax(0, 1fr)); }
|
|
.grid.grid-gap-4 {
|
|
--grid-gap: var(--gap-4); }
|
|
.grid .grid-c-4 {
|
|
grid-column: span 4; }
|
|
.grid .grid-r-4 {
|
|
grid-row: span 4; }
|
|
.grid .grid-cs-4 {
|
|
grid-column-start: 4; }
|
|
.grid .grid-ce-4 {
|
|
grid-column-end: 5; }
|
|
.grid .grid-rs-4 {
|
|
grid-row-start: 4; }
|
|
.grid .grid-re-4 {
|
|
grid-row-end: 5; }
|
|
.grid.grid-cols-5 {
|
|
--grid-template-column: repeat(5, minmax(0, 1fr)); }
|
|
.grid.grid-gap-5 {
|
|
--grid-gap: var(--gap-5); }
|
|
.grid .grid-c-5 {
|
|
grid-column: span 5; }
|
|
.grid .grid-r-5 {
|
|
grid-row: span 5; }
|
|
.grid .grid-cs-5 {
|
|
grid-column-start: 5; }
|
|
.grid .grid-ce-5 {
|
|
grid-column-end: 6; }
|
|
.grid .grid-rs-5 {
|
|
grid-row-start: 5; }
|
|
.grid .grid-re-5 {
|
|
grid-row-end: 6; }
|
|
.grid.grid-cols-6 {
|
|
--grid-template-column: repeat(6, minmax(0, 1fr)); }
|
|
.grid.grid-gap-6 {
|
|
--grid-gap: var(--gap-6); }
|
|
.grid .grid-c-6 {
|
|
grid-column: span 6; }
|
|
.grid .grid-r-6 {
|
|
grid-row: span 6; }
|
|
.grid .grid-cs-6 {
|
|
grid-column-start: 6; }
|
|
.grid .grid-ce-6 {
|
|
grid-column-end: 7; }
|
|
.grid .grid-rs-6 {
|
|
grid-row-start: 6; }
|
|
.grid .grid-re-6 {
|
|
grid-row-end: 7; }
|
|
.grid.grid-cols-7 {
|
|
--grid-template-column: repeat(7, minmax(0, 1fr)); }
|
|
.grid.grid-gap-7 {
|
|
--grid-gap: var(--gap-7); }
|
|
.grid .grid-c-7 {
|
|
grid-column: span 7; }
|
|
.grid .grid-r-7 {
|
|
grid-row: span 7; }
|
|
.grid .grid-cs-7 {
|
|
grid-column-start: 7; }
|
|
.grid .grid-ce-7 {
|
|
grid-column-end: 8; }
|
|
.grid .grid-rs-7 {
|
|
grid-row-start: 7; }
|
|
.grid .grid-re-7 {
|
|
grid-row-end: 8; }
|
|
.grid.grid-cols-8 {
|
|
--grid-template-column: repeat(8, minmax(0, 1fr)); }
|
|
.grid.grid-gap-8 {
|
|
--grid-gap: var(--gap-8); }
|
|
.grid .grid-c-8 {
|
|
grid-column: span 8; }
|
|
.grid .grid-r-8 {
|
|
grid-row: span 8; }
|
|
.grid .grid-cs-8 {
|
|
grid-column-start: 8; }
|
|
.grid .grid-ce-8 {
|
|
grid-column-end: 9; }
|
|
.grid .grid-rs-8 {
|
|
grid-row-start: 8; }
|
|
.grid .grid-re-8 {
|
|
grid-row-end: 9; }
|
|
.grid.grid-cols-9 {
|
|
--grid-template-column: repeat(9, minmax(0, 1fr)); }
|
|
.grid.grid-gap-9 {
|
|
--grid-gap: var(--gap-9); }
|
|
.grid .grid-c-9 {
|
|
grid-column: span 9; }
|
|
.grid .grid-r-9 {
|
|
grid-row: span 9; }
|
|
.grid .grid-cs-9 {
|
|
grid-column-start: 9; }
|
|
.grid .grid-ce-9 {
|
|
grid-column-end: 10; }
|
|
.grid .grid-rs-9 {
|
|
grid-row-start: 9; }
|
|
.grid .grid-re-9 {
|
|
grid-row-end: 10; }
|
|
.grid.grid-cols-10 {
|
|
--grid-template-column: repeat(10, minmax(0, 1fr)); }
|
|
.grid.grid-gap-10 {
|
|
--grid-gap: var(--gap-10); }
|
|
.grid .grid-c-10 {
|
|
grid-column: span 10; }
|
|
.grid .grid-r-10 {
|
|
grid-row: span 10; }
|
|
.grid .grid-cs-10 {
|
|
grid-column-start: 10; }
|
|
.grid .grid-ce-10 {
|
|
grid-column-end: 11; }
|
|
.grid .grid-rs-10 {
|
|
grid-row-start: 10; }
|
|
.grid .grid-re-10 {
|
|
grid-row-end: 11; }
|
|
.grid.grid-cols-11 {
|
|
--grid-template-column: repeat(11, minmax(0, 1fr)); }
|
|
.grid.grid-gap-11 {
|
|
--grid-gap: var(--gap-11); }
|
|
.grid .grid-c-11 {
|
|
grid-column: span 11; }
|
|
.grid .grid-r-11 {
|
|
grid-row: span 11; }
|
|
.grid .grid-cs-11 {
|
|
grid-column-start: 11; }
|
|
.grid .grid-ce-11 {
|
|
grid-column-end: 12; }
|
|
.grid .grid-rs-11 {
|
|
grid-row-start: 11; }
|
|
.grid .grid-re-11 {
|
|
grid-row-end: 12; }
|
|
.grid.grid-cols-12 {
|
|
--grid-template-column: repeat(12, minmax(0, 1fr)); }
|
|
.grid.grid-gap-12 {
|
|
--grid-gap: var(--gap-12); }
|
|
.grid .grid-c-12 {
|
|
grid-column: span 12; }
|
|
.grid .grid-r-12 {
|
|
grid-row: span 12; }
|
|
.grid .grid-cs-12 {
|
|
grid-column-start: 12; }
|
|
.grid .grid-ce-12 {
|
|
grid-column-end: 13; }
|
|
.grid .grid-rs-12 {
|
|
grid-row-start: 12; }
|
|
.grid .grid-re-12 {
|
|
grid-row-end: 13; }
|
|
.grid .grid-cs-end {
|
|
grid-column-end: -1; }
|
|
.grid .grid-rs-end {
|
|
grid-row-end: -1; }
|
|
.grid .c {
|
|
grid-column-start: var(--grid-column-start);
|
|
grid-column-end: var(--grid-column-end); }
|
|
@media screen and (max-width: 768px) {
|
|
.grid {
|
|
--grid-template-column: repeat(1, minmax(0, 1fr)); } }
|
|
|
|
/* EXTENDED LINKS */
|
|
/* Animated links */
|
|
.u,
|
|
.utb {
|
|
display: inline;
|
|
position: relative;
|
|
/* So the psuedo-elements are positioned correctly */ }
|
|
|
|
/* Underline */
|
|
.u::after {
|
|
content: "";
|
|
transition: all 0.3s;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
position: absolute;
|
|
height: 0.1rem;
|
|
width: 0;
|
|
background: var(--cirrus-link-dark);
|
|
bottom: -0.25em; }
|
|
|
|
.u:hover::after {
|
|
width: 100%; }
|
|
|
|
.u.u-LR::after {
|
|
/* Left to Right */
|
|
left: 0; }
|
|
|
|
.u.u-LR::after {
|
|
/* Left to Right */
|
|
left: 0; }
|
|
|
|
.u.u-RL::after {
|
|
/* Right to Left */
|
|
right: 0; }
|
|
|
|
.u.u-RL:hover::after {
|
|
width: 100%; }
|
|
|
|
.u.u-C::after {
|
|
/* Center Outwards */
|
|
left: 50%;
|
|
-webkit-transform: translateX(-50%);
|
|
transform: translateX(-50%); }
|
|
|
|
/* Underline top and bottom */
|
|
.utb {
|
|
/* Opposite start */ }
|
|
.utb::before, .utb::after {
|
|
content: "";
|
|
transition: all 0.3s;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
position: absolute;
|
|
height: 0.1rem;
|
|
width: 0;
|
|
background: var(--cirrus-link-dark); }
|
|
.utb::before {
|
|
top: -0.25em; }
|
|
.utb::after {
|
|
bottom: -0.25em; }
|
|
.utb:hover::before, .utb:hover::after {
|
|
width: 100%; }
|
|
.utb.utb-LR::before, .utb.utb-LR::after {
|
|
left: 0; }
|
|
.utb.utb-RL::before, .utb.utb-RL::after {
|
|
right: 0; }
|
|
.utb.utb-C::before, .utb.utb-C::after {
|
|
left: 50%;
|
|
-webkit-transform: translateX(-50%);
|
|
transform: translateX(-50%); }
|
|
.utb.utb-OLR::before {
|
|
/* Suffix denotes border transition direction for the top border (left to right). Bottom border will be the opposite direction */
|
|
left: 0; }
|
|
.utb.utb-OLR::after {
|
|
right: 0; }
|
|
.utb.utb-ORL::before {
|
|
right: 0; }
|
|
.utb.utb-ORL::after {
|
|
left: 0; }
|
|
|
|
/* Links with square borders */
|
|
/* Please note that usquare is the parent span (not div) which would create the left and right borders. The link (.utb-OLR) gets nested within this */
|
|
.usquare {
|
|
margin-left: 0.4rem;
|
|
position: relative;
|
|
overflow: hidden; }
|
|
.usquare::before, .usquare::after {
|
|
content: "";
|
|
transition: 0.25s all ease;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
position: absolute;
|
|
width: 2px;
|
|
width: 0.1 rem;
|
|
height: 0;
|
|
background: var(--cirrus-link-dark); }
|
|
.usquare::before {
|
|
left: 0;
|
|
bottom: -0.2rem; }
|
|
.usquare::after {
|
|
right: 0;
|
|
top: -0.2rem; }
|
|
.usquare:hover::before, .usquare:hover::after {
|
|
height: calc(100% + 0.4rem);
|
|
/* Makes the left and right borders */ }
|
|
.usquare:hover a::before,
|
|
.usquare:hover a::after {
|
|
width: 100%; }
|
|
.usquare.delay::before {
|
|
transition-delay: 0.6s; }
|
|
.usquare.delay::after {
|
|
transition-delay: var(--animation-duration); }
|
|
.usquare.delay a::after {
|
|
transition: 0.25s all ease 0.4s; }
|
|
.usquare a {
|
|
position: static;
|
|
padding: 0.2rem 0.4rem;
|
|
transition: 0.25s all ease; }
|
|
.usquare a::before {
|
|
left: 0; }
|
|
.usquare a::after {
|
|
right: 0; }
|
|
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* The base of the modal dialog, which is an overlay of the webpage */
|
|
.modal {
|
|
position: fixed;
|
|
/* Scrolls with the user */
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
/* Initially hidden */
|
|
padding: 1rem;
|
|
display: none;
|
|
/* Doesn't block the elements underneath */
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
/* Vertical centering */
|
|
pointer-events: none;
|
|
/* Prevent any pointer events made to modal while hidden */
|
|
/* When the modal dialog is visible */
|
|
/* Different size modals */
|
|
/* The modal dialog body with the text itself */
|
|
/* MODAL ANIMATIONS */
|
|
/* Visible state */ }
|
|
.modal:target, .modal.shown {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
opacity: 1;
|
|
z-index: 999;
|
|
pointer-events: auto;
|
|
/* Re-enable pointer events */
|
|
/* The div in the modal dialpog used to create the translucent background */ }
|
|
.modal:target .modal-overlay, .modal.shown .modal-overlay {
|
|
position: absolute;
|
|
/* Absolute inside of the modal container */
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
background-color: rgba(54, 54, 54, 0.5); }
|
|
.modal:target .modal-container,
|
|
.modal:target .modal-container, .modal.shown .modal-container,
|
|
.modal.shown .modal-container {
|
|
-webkit-animation: slide-down var(--animation-duration) ease 1;
|
|
animation: slide-down var(--animation-duration) ease 1;
|
|
z-index: 1; }
|
|
.modal.modal-small .modal-content {
|
|
max-width: 20rem;
|
|
/* 320px */ }
|
|
.modal.modal-large .modal-content {
|
|
max-width: 60rem;
|
|
/* 960px */ }
|
|
.modal .modal-content {
|
|
background-color: var(--cirrus-bg);
|
|
padding: 0;
|
|
display: block;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0.4rem 1rem rgba(54, 54, 54, 0.3);
|
|
z-index: 1;
|
|
color: var(--cirrus-fg);
|
|
max-width: 40rem;
|
|
/* 640px */
|
|
/* Restrict width */ }
|
|
.modal .modal-content.small {
|
|
max-width: 32rem; }
|
|
.modal .modal-content h1,
|
|
.modal .modal-content h2,
|
|
.modal .modal-content h3,
|
|
.modal .modal-content h4,
|
|
.modal .modal-content h5,
|
|
.modal .modal-content h6 {
|
|
color: var(--cirrus-fg); }
|
|
.modal .modal-content .modal-header {
|
|
padding: 1rem 2.5rem; }
|
|
.modal .modal-content .modal-header .modal-title {
|
|
font-weight: bolder;
|
|
font-size: 1.4rem; }
|
|
.modal .modal-content .modal-body {
|
|
padding: 1rem 2.5rem;
|
|
overflow-y: auto;
|
|
max-height: 50vh;
|
|
/* Max height is 50% of viewport height which prevents dialog from extetnding past screen */
|
|
position: relative; }
|
|
.modal .modal-content .modal-footer {
|
|
padding: 1rem 2.5rem;
|
|
text-align: right; }
|
|
@media screen and (max-width: 768px) {
|
|
.modal .modal-content {
|
|
max-width: 90%; } }
|
|
.modal.modal-animated--dropdown {
|
|
-webkit-animation: slide-down var(--animation-duration) ease 1;
|
|
animation: slide-down var(--animation-duration) ease 1; }
|
|
.modal.modal-animated--zoom-in, .modal.modal-animated--zoom-out {
|
|
display: -webkit-box;
|
|
/* Force dialog to appear in the center */
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
opacity: 0;
|
|
transition: 300ms all ease; }
|
|
.modal:target.modal-animated--zoom-in, .modal:target.modal-animated--zoom-out {
|
|
opacity: 1;
|
|
transition: 300ms all ease; }
|
|
.modal.modal-animated--zoom-in .modal-content {
|
|
transform: scale(0.8);
|
|
transition: 300ms all ease; }
|
|
.modal:target.modal-animated--zoom-in .modal-content,
|
|
.modal:target.modal-animated--zoom-out .modal-content {
|
|
transform: scale(1);
|
|
transition: 300ms all ease; }
|
|
.modal.modal-animated--zoom-out .modal-content {
|
|
transform: scale(1.2);
|
|
transition: 300ms all ease; }
|
|
|
|
/* Keyframes for slide down animation */
|
|
@-webkit-keyframes slide-down {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-3rem);
|
|
transform: translateY(-3rem); }
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0); } }
|
|
|
|
@keyframes slide-down {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-3rem);
|
|
transform: translateY(-3rem); }
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0); } }
|
|
|
|
@media only screen and (max-width: 768px) {
|
|
.modal-content {
|
|
max-width: 90%; } }
|
|
|
|
/* A collection of modifiers that extend control styling */
|
|
.btn.btn--pilled,
|
|
[class^="btn-"].btn--pilled,
|
|
[class*=" btn-"].btn--pilled {
|
|
border-radius: 6.25rem;
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem; }
|
|
|
|
/* btn--circle: contents must be placed inside child element */
|
|
.btn.btn--circle,
|
|
[class^="btn-"].btn--circle,
|
|
[class*=" btn-"].btn--circle {
|
|
border-radius: 100%;
|
|
min-width: 60px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
text-align: center; }
|
|
.btn.btn--circle:before,
|
|
[class^="btn-"].btn--circle:before,
|
|
[class*=" btn-"].btn--circle:before {
|
|
content: '';
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding-top: 100%; }
|
|
.btn.btn--circle *,
|
|
[class^="btn-"].btn--circle *,
|
|
[class*=" btn-"].btn--circle * {
|
|
max-width: 90%;
|
|
vertical-align: middle;
|
|
white-space: pre-wrap; }
|
|
|
|
/* Input (primary text-based) controls apply to inputs */
|
|
.input-control--pilled {
|
|
border-radius: 6.25rem !important; }
|
|
|
|
/* Theme modifiers */
|
|
/* GLOBAL THEME SELECTORS */
|
|
.bg-primary {
|
|
background-color: var(--cirrus-primary) !important; }
|
|
|
|
.text-primary {
|
|
color: var(--cirrus-primary) !important; }
|
|
|
|
.bg-success {
|
|
background-color: var(--cirrus-success) !important; }
|
|
|
|
.text-success {
|
|
color: var(--cirrus-success) !important; }
|
|
|
|
.bg-warning {
|
|
background-color: var(--cirrus-warning) !important; }
|
|
|
|
.text-warning {
|
|
color: var(--cirrus-warning) !important; }
|
|
|
|
.bg-danger {
|
|
background-color: var(--cirrus-danger) !important; }
|
|
|
|
.text-danger {
|
|
color: var(--cirrus-danger) !important; }
|
|
|
|
.bg-light {
|
|
background-color: var(--cirrus-light) !important; }
|
|
|
|
.text-light {
|
|
color: var(--cirrus-light) !important; }
|
|
|
|
.bg-dark {
|
|
background-color: var(--cirrus-dark) !important; }
|
|
|
|
.text-dark {
|
|
color: var(--cirrus-dark) !important; }
|
|
|
|
.bg-link {
|
|
background-color: var(--cirrus-link) !important; }
|
|
|
|
.text-link {
|
|
color: var(--cirrus-link) !important; }
|
|
|
|
.bg-link-dark {
|
|
background-color: var(--cirrus-link-dark) !important; }
|
|
|
|
.text-link-dark {
|
|
color: var(--cirrus-link-dark) !important; }
|
|
|
|
.bg-info {
|
|
background-color: var(--cirrus-info) !important; }
|
|
|
|
.text-info {
|
|
color: var(--cirrus-info) !important; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* PAGINATION */
|
|
/* Parent contianer for page navigation */
|
|
.pagination {
|
|
display: flex;
|
|
display: -ms-flexbox;
|
|
/* Use for the major pagination meant to display about 2 items */
|
|
/* Bordered pagination */ }
|
|
.pagination .pagination-item {
|
|
-webkit-flex: 1 0 50%;
|
|
/* Flex to fill */
|
|
-ms-flex: 1 0 50%;
|
|
flex: 1 0 50%;
|
|
margin: 1rem 0.1rem;
|
|
transition: all 0.3s;
|
|
/* Pagination Item */
|
|
/* Used to display many pagination items */ }
|
|
.pagination .pagination-item:hover p,
|
|
.pagination .pagination-item:hover h1,
|
|
.pagination .pagination-item:hover h2,
|
|
.pagination .pagination-item:hover h3,
|
|
.pagination .pagination-item:hover h4,
|
|
.pagination .pagination-item:hover h5,
|
|
.pagination .pagination-item:hover h6 {
|
|
transition: all 0.3s;
|
|
color: var(--cirrus-primary); }
|
|
.pagination .pagination-item:not(.selected):hover *:not([disabled]):not(.ellipses) {
|
|
transition: all 0.3s;
|
|
color: var(--cirrus-primary); }
|
|
.pagination .pagination-item.pagination-next {
|
|
text-align: right; }
|
|
.pagination .pagination-item.pagination-prev {
|
|
text-align: left; }
|
|
.pagination .pagination-item a {
|
|
color: #495057; }
|
|
.pagination .pagination-item a[disabled] {
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
user-select: none; }
|
|
.pagination .pagination-item .pagination-item-subtitle {
|
|
opacity: 0.7;
|
|
margin: 0;
|
|
/* Needed to override style after formatting paragraph update */ }
|
|
.pagination .pagination-item.short {
|
|
border-radius: 0.1rem;
|
|
margin: 0.2rem 0;
|
|
-webkit-flex: 0;
|
|
/* Flex to fill */
|
|
-ms-flex: 0;
|
|
flex: 0;
|
|
/* Color the selected pagination item with accent color */ }
|
|
.pagination .pagination-item.short:first-child a {
|
|
border-top-left-radius: 0.25rem;
|
|
border-bottom-left-radius: 0.25rem; }
|
|
.pagination .pagination-item.short:last-child a {
|
|
border-top-right-radius: 0.25rem;
|
|
border-bottom-right-radius: 0.25rem; }
|
|
.pagination .pagination-item.short:not([disabled]):not(.selected):hover {
|
|
background-color: rgba(0, 0, 0, 0.07); }
|
|
.pagination .pagination-item.short.selected {
|
|
background-color: var(--cirrus-primary);
|
|
color: #fff; }
|
|
.pagination .pagination-item.short.selected a {
|
|
color: #fff; }
|
|
.pagination .pagination-item.short.ellipses {
|
|
color: #adb5bd;
|
|
pointer-events: none; }
|
|
.pagination .pagination-item.short a {
|
|
display: inline-block;
|
|
line-height: 1.25;
|
|
padding: 0.5rem 0.75rem; }
|
|
.pagination.pagination-bordered .pagination-item.short a {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0;
|
|
margin-left: -1px; }
|
|
|
|
/* PLACEHOLDER */
|
|
/* Designed to be embedded in any parent container as placeholder when content is absent. */
|
|
.placeholder {
|
|
background-color: rgba(231, 234, 241, 0.5);
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
padding: 3rem 2rem;
|
|
color: #6c7892;
|
|
/* Lighter than original text color */
|
|
display: block; }
|
|
|
|
/* Not sure if needed */
|
|
.placeholder-icon {
|
|
text-align: center; }
|
|
|
|
.placeholder .placeholder-title,
|
|
.placeholder .placeholder-subtitle {
|
|
margin: 1rem auto; }
|
|
|
|
.placeholder .placeholder-subtitle {
|
|
opacity: 0.7;
|
|
margin: 0; }
|
|
|
|
/* Place buttons here for the placeholder */
|
|
.placeholder .placeholder-commands {
|
|
margin-top: 1rem; }
|
|
|
|
/* TABS AND TAB CONTAINER */
|
|
.tab-container {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
/* Allow scrollbar to be visible if the width of the tabs exceeds container */
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
font-size: var(--font-size-s); }
|
|
|
|
/* Tabs are embedded inside an unordered list */
|
|
.tab-container ul {
|
|
display: flex;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
/* Move tab items to left side */
|
|
margin: 0.5rem;
|
|
/* Override the behavior for standard ul and add equal padding */
|
|
border-bottom: 1px solid #eee;
|
|
/* Bottom border of tabs */
|
|
flex-grow: 1;
|
|
list-style: none;
|
|
padding-inline-start: 0; }
|
|
|
|
.tab-container li {
|
|
display: block;
|
|
/* Keep the tabs from extending too far */
|
|
cursor: pointer;
|
|
margin: 0;
|
|
text-align: center; }
|
|
|
|
.tab-container li a {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eee;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
padding: 0.5rem 1rem;
|
|
transition: all .3s;
|
|
color: var(--cirrus-fg);
|
|
border-width: 2px;
|
|
margin-bottom: -1px;
|
|
/* Get rid of any remaining border lines */
|
|
background-color: var(--cirrus-bg); }
|
|
|
|
.tab-container li:hover a {
|
|
border-bottom-color: rgba(240, 61, 77, 0.6);
|
|
transition: all .3s; }
|
|
|
|
.tab-container li.selected a {
|
|
border-bottom-color: var(--cirrus-primary);
|
|
color: var(--cirrus-primary);
|
|
border-width: 2px;
|
|
transition: all .3s; }
|
|
|
|
/* Shift tabs to the center */
|
|
.tab-container.tabs-center ul {
|
|
justify-content: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center; }
|
|
|
|
/* Shift tabs to the right */
|
|
.tab-container.tabs-right ul {
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end; }
|
|
|
|
/* Depth tab styles */
|
|
.tab-container.tabs-depth ul {
|
|
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
|
|
border-bottom: 0; }
|
|
|
|
/* Classic tab styles */
|
|
.tab-container.tabs-classic ul {
|
|
border-bottom-color: #dbdbdb;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
border-radius: 3px 3px 0 0;
|
|
/* Only round the top left and right corners */
|
|
transition: all .3s; }
|
|
|
|
.tab-container.tabs-classic li:not(.selected) a:hover {
|
|
background-color: #f0f0f0;
|
|
transition: all .3s; }
|
|
|
|
.tab-container.tabs-classic li a {
|
|
border: 1px solid transparent;
|
|
border-bottom-color: #dbdbdb;
|
|
border-radius: 3px 3px 0 0;
|
|
transition: all .3s; }
|
|
|
|
.tab-container.tabs-classic li.selected a {
|
|
color: var(--cirrus-primary);
|
|
border-color: #dbdbdb;
|
|
border-bottom-color: transparent !important; }
|
|
|
|
/* Tabs that fill the width */
|
|
.tab-container.tabs-fill li {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
/* Disable shrinking to original width */
|
|
flex-basis: 0; }
|
|
|
|
/* Override the -webkit-box display that sizes tab items based on text */
|
|
.tab-container.tabs-fill ul {
|
|
display: flex;
|
|
/* Equal size tabs */ }
|
|
|
|
/* Different tab sizes */
|
|
.tab-container.tabs-xsmall {
|
|
font-size: 0.6rem; }
|
|
|
|
.tab-container.tabs-small {
|
|
font-size: 0.75rem; }
|
|
|
|
.tab-container.tabs-large {
|
|
font-size: 1.25rem; }
|
|
|
|
.tab-container.tabs-xlarge {
|
|
font-size: 1.5rem; }
|
|
|
|
/* Font Awesome Integration */
|
|
.tab-container .icon:first-child {
|
|
/* Left icon */
|
|
margin-right: .75rem; }
|
|
|
|
.tab-container .icon:last-child {
|
|
/* Right icon */
|
|
margin-left: .75rem; }
|
|
|
|
/* TAGS */
|
|
.tag {
|
|
align-items: center;
|
|
background-color: var(--cirrus-light);
|
|
border-radius: 0.25rem;
|
|
color: var(--cirrus-fg);
|
|
display: inline-flex;
|
|
font-size: 75%;
|
|
line-height: 1.5;
|
|
min-height: 1.5rem;
|
|
padding: 0 0.5rem;
|
|
white-space: nowrap; }
|
|
|
|
.tag.tag--large {
|
|
font-size: 120%; }
|
|
|
|
.tag.tag--xlarge {
|
|
font-size: 150%; }
|
|
|
|
.tag.tag--rounded {
|
|
border-radius: 290486px; }
|
|
|
|
/* Delete button for tag */
|
|
.tag.tag--delete {
|
|
background-color: rgba(10, 10, 10, 0.2);
|
|
border-radius: 290486px;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
display: inline-block;
|
|
height: 20px;
|
|
max-height: 20px;
|
|
max-width: 20px;
|
|
min-height: 20px;
|
|
min-width: 20px;
|
|
position: relative; }
|
|
|
|
.tag--delete:hover {
|
|
background-color: rgba(10, 10, 10, 0.3); }
|
|
|
|
/* Draw the delete button */
|
|
.tag.tag--delete::before,
|
|
.tag.tag--delete::after {
|
|
background-color: var(--cirrus-light);
|
|
content: "";
|
|
display: block;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center; }
|
|
|
|
.tag.tag--delete::before {
|
|
height: 1px;
|
|
width: 50%; }
|
|
|
|
.tag.tag--delete::after {
|
|
height: 50%;
|
|
width: 1px; }
|
|
|
|
/* TAG THEMES */
|
|
.tag.tag--delete {
|
|
margin-left: 0.25rem;
|
|
margin-right: -0.375rem; }
|
|
|
|
.tag.tag--white {
|
|
background-color: #fff;
|
|
color: var(--cirrus-dark); }
|
|
|
|
.tag.tag--black {
|
|
background-color: #000;
|
|
color: #fff; }
|
|
|
|
.tag.tag--dark {
|
|
background-color: var(--cirrus-dark);
|
|
color: #fff; }
|
|
|
|
.tag.tag--primary {
|
|
background-color: var(--cirrus-primary);
|
|
color: #fff; }
|
|
|
|
.tag.tag--link {
|
|
background-color: var(--cirrus-link);
|
|
color: #fff; }
|
|
|
|
.tag.tag--info {
|
|
background-color: var(--cirrus-info);
|
|
color: #fff; }
|
|
|
|
.tag.tag--success {
|
|
background-color: var(--cirrus-success);
|
|
color: #fff; }
|
|
|
|
.tag.tag--warning {
|
|
background-color: var(--cirrus-warning);
|
|
color: var(--cirrus-fg); }
|
|
|
|
.tag.tag--danger {
|
|
background-color: var(--cirrus-danger);
|
|
color: #fff; }
|
|
|
|
/* TAG CONTAINER */
|
|
.tag-container {
|
|
display: flex;
|
|
flex-wrap: wrap; }
|
|
|
|
/* Add margin in between tag containers */
|
|
.tag-container:not(:last-child) {
|
|
margin-bottom: 1rem; }
|
|
|
|
.tag-container .tag {
|
|
margin-bottom: 0.5rem; }
|
|
|
|
.tag-container .tag:not(:last-child) {
|
|
margin-right: 0.5rem; }
|
|
|
|
/* Used for grouping tags together */
|
|
.tag-container.group-tags .tag {
|
|
margin-right: 0; }
|
|
|
|
.tag-container.group-tags .tag:first-child {
|
|
border-radius: .25rem 0 0 .25rem; }
|
|
|
|
.tag-container.group-tags .tag:not(:first-child):not(:last-child) {
|
|
border-radius: 0; }
|
|
|
|
.tag-container.group-tags .tag:last-child {
|
|
border-radius: 0 .25rem .25rem 0; }
|
|
|
|
/* Tag close button */
|
|
.tag.tag__close-btn {
|
|
padding: 0;
|
|
position: relative;
|
|
width: 1.5rem; }
|
|
|
|
.tag.tag__close-btn::before,
|
|
.tag.tag__close-btn::after {
|
|
background-color: var(--cirrus-fg);
|
|
content: "";
|
|
display: block;
|
|
left: 50%;
|
|
top: 50%;
|
|
position: absolute;
|
|
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center; }
|
|
|
|
.tag.tag__close-btn::before {
|
|
height: 1px;
|
|
width: 50%; }
|
|
|
|
.tag.tag__close-btn::after {
|
|
height: 50%;
|
|
width: 1px; }
|
|
|
|
/* MISC */
|
|
a.tag:hover {
|
|
text-decoration: underline; }
|
|
|
|
.tag-container.tag-container--grouped .tag:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0; }
|
|
|
|
.tag-container.tag-container--grouped .tag:not(:last-child) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
|
|
/* Tag positioning */
|
|
.tag-container.tag-container--centered {
|
|
justify-content: center; }
|
|
|
|
.tag-container.tag-container--centered .tag {
|
|
margin: 0 0.25rem; }
|
|
|
|
.tag-container.tag-container--right {
|
|
justify-content: flex-end; }
|
|
|
|
.tag-container.tag-container--right .tag:not(:first-child) {
|
|
margin-left: 0.5rem; }
|
|
|
|
.tag-container.tag-container--right .tag:not(:last-child) {
|
|
margin-right: 0; }
|
|
|
|
/* TILES */
|
|
.tile {
|
|
display: flex;
|
|
display: -ms-flexbox;
|
|
align-content: space-between;
|
|
/* Ensure space between child elements of card tile */
|
|
-webkit-align-content: space-between;
|
|
/* align-items: flex-start; Push elements to the top of container instead of center/bottom (removed since unneeded */
|
|
-ms-flex-line-pack: justify;
|
|
/* Evenly distribute lines */ }
|
|
|
|
.tile p {
|
|
font-size: 0.95rem; }
|
|
|
|
.tile .tile__icon,
|
|
.tile .tile__buttons {
|
|
flex: 0 0 auto;
|
|
-webkit-flex: 0 0 auto;
|
|
-ms-flex: 0 0 auto; }
|
|
|
|
/* Override the default behavior where buttons display as blocks */
|
|
.tile .tile__buttons button,
|
|
.tile .tile__buttons .btn,
|
|
.tile .tile__buttons [type="submit"] {
|
|
display: inline-block;
|
|
margin: 0.1rem;
|
|
/* Reduce space used by buttons, default .5rem */ }
|
|
|
|
.tile .tile__container {
|
|
flex: 1 1 auto;
|
|
-webkit-flex: 1 1 auto;
|
|
-ms-flex: 1 1 auto; }
|
|
|
|
/* Add spacing between the elements in between */
|
|
.tile .tile__container:not(:first-child) {
|
|
padding-left: 1rem; }
|
|
|
|
.tile .tile__container:not(:last-child) {
|
|
padding-right: 1rem; }
|
|
|
|
.tile .tile__title {
|
|
line-height: 2rem;
|
|
font-weight: bolder;
|
|
margin: 0.1rem auto; }
|
|
|
|
.tile .tile__subtitle {
|
|
line-height: 1.25rem;
|
|
opacity: 0.7;
|
|
margin: 0.1rem auto; }
|
|
|
|
/* Force elements to align at the center vertical height */
|
|
.tile.tile--center {
|
|
align-items: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center; }
|
|
|
|
.tile.tile--center .tile__container {
|
|
/* Shrink the text to fit inside the tile */
|
|
overflow: hidden; }
|
|
|
|
/* Keep the text from overflowing */
|
|
.tile.tile--center .tile__title,
|
|
.tile.tile--center .tile__subtitle.no-wrap {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
margin-bottom: 0; }
|
|
|
|
.toast {
|
|
display: block;
|
|
width: 100%;
|
|
padding: .75rem 1.25rem;
|
|
background-color: var(--toast-primary-bg);
|
|
border: 1px solid var(--toast-primary-bg);
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
position: relative;
|
|
margin: 0.5rem; }
|
|
|
|
/* .toast h1, .toast h2, .toast h3, .toast h4, .toast h5, .toast h6 {
|
|
margin: 0;
|
|
margin-top: 1rem;
|
|
} (Deprecated 0.5.5) */
|
|
.toast .toast__title {
|
|
margin: 0;
|
|
margin-top: 1rem; }
|
|
|
|
.toast p {
|
|
margin: 0; }
|
|
|
|
.toast.toast--translucent {
|
|
opacity: .5; }
|
|
|
|
.toast.toast--translucent:hover {
|
|
opacity: 1; }
|
|
|
|
.toast .btn-close {
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 1rem; }
|
|
|
|
/* TOAST TYPES */
|
|
.toast.toast--primary {
|
|
background-color: var(--toast-primary-bg);
|
|
border-color: var(--toast-primary-bg); }
|
|
|
|
.toast.toast--success {
|
|
background-color: var(--cirrus-success);
|
|
border-color: var(--cirrus-success); }
|
|
|
|
.toast.toast--warning {
|
|
background-color: var(--cirrus-warning);
|
|
border-color: var(--cirrus-warning); }
|
|
|
|
.toast.toast--error {
|
|
background-color: var(--cirrus-danger);
|
|
border-color: var(--cirrus-danger); }
|
|
|
|
.toast.toast--info {
|
|
background-color: var(--cirrus-info);
|
|
border-color: var(--cirrus-info); }
|
|
|
|
.toast.toast--link {
|
|
background-color: var(--cirrus-link);
|
|
border-color: var(--cirrus-link); }
|
|
|
|
.toast.toast--primary {
|
|
background-color: var(--cirrus-primary);
|
|
border-color: var(--cirrus-primary); }
|
|
|
|
/* Add the rest later */
|
|
.toast a {
|
|
color: var(--cirrus-light);
|
|
transition: all .3s; }
|
|
|
|
.toast a:hover {
|
|
opacity: .8;
|
|
transition: all .3s; }
|
|
|
|
/* TOOLTIPS */
|
|
.tooltip {
|
|
position: relative;
|
|
/* let's the pseudoelement that we are displaying relative to the button. */
|
|
overflow: visible;
|
|
/* Allows the pseudoelement to be shown */
|
|
white-space: nowrap;
|
|
/* Keeps the button text from wrapping and getting too large */ }
|
|
|
|
/* This is the psuedoelement that creates the tooltip */
|
|
.tooltip::after,
|
|
.tooltip.tooltip--top::after {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
position: absolute;
|
|
color: #fff;
|
|
font-size: 0.6rem;
|
|
background-color: rgba(69, 77, 93, 0.9);
|
|
content: attr(data-tooltip);
|
|
/* Retrieves the data specified in this element property and displays it as text */
|
|
display: block;
|
|
line-height: 1rem;
|
|
text-transform: none;
|
|
overflow: hidden;
|
|
padding: 0.4rem 0.8rem;
|
|
opacity: 0;
|
|
/* Hide the element */
|
|
text-overflow: ellipsis;
|
|
max-width: 15rem;
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
transition: all var(--animation-duration) ease;
|
|
z-index: 200;
|
|
pointer-events: none;
|
|
bottom: 100%;
|
|
/* Pushes the tooltip above the button */
|
|
left: 50%;
|
|
/* Horizontally center it */
|
|
border-radius: 0.2rem; }
|
|
|
|
/* Handles the on hover event of the button and then modifies the associated tooltip accordingly. */
|
|
.tooltip:focus::after,
|
|
.tooltip:hover::after {
|
|
opacity: 1;
|
|
-webkit-transform: translate(-50%, -0.5rem);
|
|
transform: translate(-50%, -0.5rem);
|
|
transition: all var(--animation-duration) ease; }
|
|
|
|
/* Tooltip top left */
|
|
.tooltip.tooltip--top-left::after {
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0); }
|
|
|
|
.tooltip.tooltip--top-left:hover::after,
|
|
.tooltip.tooltip--top-left:focus::after {
|
|
left: 0;
|
|
-webkit-transform: translate(-100%, -0.5rem);
|
|
transform: translate(-100%, -0.5rem); }
|
|
|
|
/* Tooltip top right */
|
|
.tooltip.tooltip--top-right::after {
|
|
left: auto;
|
|
-webkit-transform: translate(15%, 0);
|
|
transform: translate(15%, 0); }
|
|
|
|
.tooltip.tooltip--top-right:hover::after,
|
|
.tooltip.tooltip--top-right:focus::after {
|
|
right: 0;
|
|
-webkit-transform: translate(100%, -0.5rem);
|
|
transform: translate(100%, -0.5rem); }
|
|
|
|
/* Tooltip bottom */
|
|
.tooltip.tooltip--bottom::after {
|
|
top: 100%;
|
|
transform: translate(-50%, -1rem);
|
|
/* Moves tooltip to the center horizontally and shifts tooltip down */
|
|
-webkit-transform: translate(-50%, -1rem);
|
|
-moz-transform: translate(-50%, -1rem);
|
|
-ms-transform: translate(-50%, -1rem);
|
|
bottom: auto; }
|
|
|
|
.tooltip.tooltip--bottom:hover::after,
|
|
.tooltip.tooltip--bottom:focus::after {
|
|
transform: translate(-50%, 0.5rem);
|
|
-webkit-transform: translate(-50%, 0.5rem);
|
|
-moz-transform: translate(-50%, 0.5rem);
|
|
-ms-transform: translate(-50%, 0.5rem);
|
|
bottom: auto; }
|
|
|
|
/* Tooltip bottom left */
|
|
.tooltip.tooltip--bottom-left::after {
|
|
top: 100%;
|
|
-webkit-transform: translate(-65%, -1rem);
|
|
transform: translate(-65%, -1rem);
|
|
bottom: auto; }
|
|
|
|
.tooltip.tooltip--bottom-left:hover::after,
|
|
.tooltip.tooltip--bottom-left:focus::after {
|
|
left: 0;
|
|
-webkit-transform: translate(-100%, 0.5rem);
|
|
transform: translate(-100%, 0.5rem); }
|
|
|
|
/* Tooltip bottom right */
|
|
.tooltip.tooltip--bottom-right::after {
|
|
left: auto;
|
|
top: 100%;
|
|
-webkit-transform: translate(0%, -1rem);
|
|
transform: translate(0%, -1rem);
|
|
bottom: auto; }
|
|
|
|
.tooltip.tooltip--bottom-right:hover::after,
|
|
.tooltip.tooltip--bottom-right:focus::after {
|
|
right: 0;
|
|
-webkit-transform: translate(100%, 0.5rem);
|
|
transform: translate(100%, 0.5rem); }
|
|
|
|
/* Tooltip right */
|
|
.tooltip.tooltip--right::after {
|
|
left: 100%;
|
|
bottom: 50%;
|
|
transform: translate(-1rem, 50%);
|
|
-webkit-transform: translate(-1rem, 50%);
|
|
-moz-transform: translate(-1rem, 50%);
|
|
-ms-transform: translate(-1rem, 50%); }
|
|
|
|
.tooltip.tooltip--right:hover::after,
|
|
.tooltip.tooltip--right:focus::after {
|
|
transform: translate(0.5rem, 50%);
|
|
-webkit-transform: translate(0.5rem, 50%);
|
|
-moz-transform: translate(0.5rem, 50%);
|
|
-ms-transform: translate(0.5rem, 50%); }
|
|
|
|
/* Tooltip Left */
|
|
.tooltip.tooltip--left::after {
|
|
right: 100%;
|
|
bottom: 50%;
|
|
left: auto;
|
|
/* Needed to work */
|
|
transform: translate(1rem, 50%);
|
|
-webkit-transform: translate(1rem, 50%);
|
|
-moz-transform: translate(1rem, 50%);
|
|
-ms-transform: translate(1rem, 50%); }
|
|
|
|
.tooltip.tooltip--left:hover::after,
|
|
.tooltip.tooltip--left:focus::after {
|
|
transform: translate(-0.5rem, 50%);
|
|
-webkit-transform: translate(-0.5rem, 50%);
|
|
-moz-transform: translate(-0.5rem, 50%);
|
|
-ms-transform: translate(-0.5rem, 50%); }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/*
|
|
Global Mixins
|
|
*/
|
|
/* BUTTONS */
|
|
/* Button styling */
|
|
/* Un-themed */
|
|
button,
|
|
.btn,
|
|
[type='submit'] {
|
|
line-height: 2rem;
|
|
overflow: hidden;
|
|
padding: 0.5rem 1.5rem;
|
|
border: 1px solid transparent;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: all var(--animation-duration);
|
|
background-color: var(--btn-color);
|
|
border-color: var(--btn-border-color);
|
|
color: var(--btn-fg);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.03rem;
|
|
text-transform: uppercase;
|
|
font-family: Montserrat;
|
|
min-width: 2rem;
|
|
user-select: none;
|
|
margin-bottom: 1rem;
|
|
outline: none;
|
|
--btn-color: #f8f9fa;
|
|
--btn-fg: #495057;
|
|
--btn-border-color: #dee2e6;
|
|
/* Base States */
|
|
/* Loading Button*/
|
|
/* Make the loading circle, if present, white when button is active */
|
|
/* Animated Button */
|
|
/* Close Button */
|
|
/* BUTTON STYLES */
|
|
/* Regular */
|
|
/* Extra small button */
|
|
/* Small button */
|
|
/* Big button */
|
|
/* STATES */
|
|
/* GLYPHS */
|
|
/* Alternatives to pad-left and pad-right */ }
|
|
button:hover,
|
|
.btn:hover,
|
|
[type='submit']:hover {
|
|
transition: all var(--animation-duration);
|
|
--btn-color: #e9ecef; }
|
|
button:active,
|
|
.btn:active,
|
|
[type='submit']:active {
|
|
transition: var(--animation-duration) ease; }
|
|
button:focus,
|
|
.btn:focus,
|
|
[type='submit']:focus {
|
|
outline: none; }
|
|
button:disabled,
|
|
.btn:disabled,
|
|
[type='submit']:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5; }
|
|
button.outline,
|
|
.btn.outline,
|
|
[type='submit'].outline {
|
|
--btn-color: transparent; }
|
|
button.outline:hover,
|
|
.btn.outline:hover,
|
|
[type='submit'].outline:hover {
|
|
--btn-color: #e9ecef; }
|
|
button.loading:active::after,
|
|
.btn.loading:active::after,
|
|
[type='submit'].loading:active::after {
|
|
border-radius: 50%;
|
|
border-right-color: transparent;
|
|
border-top-color: transparent;
|
|
transition: var(--animation-duration) ease; }
|
|
button.btn-animated,
|
|
.btn.btn-animated,
|
|
[type='submit'].btn-animated {
|
|
transition: calc(var(--animation-duration) / 2) ease; }
|
|
button.btn-animated:active,
|
|
.btn.btn-animated:active,
|
|
[type='submit'].btn-animated:active {
|
|
-webkit-transform: scale(0.98);
|
|
transform: inherit, scale(0.98);
|
|
transition: calc(var(--animation-duration) / 2) ease; }
|
|
button.btn-close,
|
|
.btn.btn-close,
|
|
[type='submit'].btn-close {
|
|
background-color: rgba(10, 10, 10, 0.2);
|
|
border: none;
|
|
border-radius: 290486px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
font-size: 0;
|
|
height: 20px;
|
|
outline: 0;
|
|
position: relative;
|
|
vertical-align: top;
|
|
width: 20px;
|
|
padding: 0;
|
|
min-width: 20px;
|
|
/* Render the x in the close button */ }
|
|
button.btn-close:hover,
|
|
.btn.btn-close:hover,
|
|
[type='submit'].btn-close:hover {
|
|
background-color: var(--gray-900); }
|
|
button.btn-close::before,
|
|
.btn.btn-close::before,
|
|
[type='submit'].btn-close::before {
|
|
background-color: var(--cirrus-bg);
|
|
content: '';
|
|
display: block;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
height: 2px;
|
|
width: 50%; }
|
|
button.btn-close::after,
|
|
.btn.btn-close::after,
|
|
[type='submit'].btn-close::after {
|
|
background-color: var(--cirrus-bg);
|
|
content: '';
|
|
display: block;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
|
-webkit-transform-origin: center center;
|
|
transform-origin: center center;
|
|
height: 50%;
|
|
width: 2px; }
|
|
button.btn-transparent,
|
|
.btn.btn-transparent,
|
|
[type='submit'].btn-transparent {
|
|
--btn-color: transparent;
|
|
--btn-fg: var(--cirrus-dark);
|
|
--btn-border-color: transparent; }
|
|
button.btn-transparent:focus,
|
|
.btn.btn-transparent:focus,
|
|
[type='submit'].btn-transparent:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5); }
|
|
button.btn-transparent:hover,
|
|
.btn.btn-transparent:hover,
|
|
[type='submit'].btn-transparent:hover {
|
|
--btn-color: rgba(0, 0, 0, 0.1); }
|
|
button.btn-transparent.outline,
|
|
.btn.btn-transparent.outline,
|
|
[type='submit'].btn-transparent.outline {
|
|
color: var(--cirrus-dark); }
|
|
button.btn-light,
|
|
.btn.btn-light,
|
|
[type='submit'].btn-light {
|
|
--btn-color: var(--cirrus-light);
|
|
--btn-fg: var(--cirrus-dark);
|
|
--btn-border-color: var(--cirrus-light); }
|
|
button.btn-light:hover,
|
|
.btn.btn-light:hover,
|
|
[type='submit'].btn-light:hover {
|
|
--btn-color: var(--cirrus-light-hover); }
|
|
button.btn-light:focus,
|
|
.btn.btn-light:focus,
|
|
[type='submit'].btn-light:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5); }
|
|
button.btn-dark,
|
|
.btn.btn-dark,
|
|
[type='submit'].btn-dark {
|
|
--btn-color: var(--cirrus-dark);
|
|
--btn-fg: var(--cirrus-light);
|
|
--btn-border-color: var(--cirrus-dark); }
|
|
button.btn-dark:focus,
|
|
.btn.btn-dark:focus,
|
|
[type='submit'].btn-dark:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.5); }
|
|
button.btn-dark:hover,
|
|
.btn.btn-dark:hover,
|
|
[type='submit'].btn-dark:hover {
|
|
--btn-color: var(--cirrus-dark-hover); }
|
|
button.btn-dark.outline:hover,
|
|
.btn.btn-dark.outline:hover,
|
|
[type='submit'].btn-dark.outline:hover {
|
|
--btn-color: var(--cirrus-dark); }
|
|
button.btn-black,
|
|
.btn.btn-black,
|
|
[type='submit'].btn-black {
|
|
--btn-color: #000;
|
|
--btn-fg: var(--cirrus-light);
|
|
--btn-border-color: #000; }
|
|
button.btn-black:focus,
|
|
.btn.btn-black:focus,
|
|
[type='submit'].btn-black:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.5); }
|
|
button.btn-black:hover,
|
|
.btn.btn-black:hover,
|
|
[type='submit'].btn-black:hover {
|
|
--btn-color: #000; }
|
|
button.btn-primary,
|
|
.btn.btn-primary,
|
|
[type='submit'].btn-primary {
|
|
--btn-color: var(--cirrus-primary);
|
|
--btn-fg: var(--cirrus-light);
|
|
--btn-border-color: var(--cirrus-accent-border); }
|
|
button.btn-primary:focus,
|
|
.btn.btn-primary:focus,
|
|
[type='submit'].btn-primary:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(240, 61, 77, 0.5); }
|
|
button.btn-primary:hover,
|
|
.btn.btn-primary:hover,
|
|
[type='submit'].btn-primary:hover {
|
|
--btn-color: var(--cirrus-accent-hover); }
|
|
button.btn-primary.outline:hover,
|
|
.btn.btn-primary.outline:hover,
|
|
[type='submit'].btn-primary.outline:hover {
|
|
--btn-color: var(--cirrus-primary); }
|
|
button.btn-info,
|
|
.btn.btn-info,
|
|
[type='submit'].btn-info {
|
|
--btn-color: var(--cirrus-info);
|
|
--btn-fg: var(--cirrus-light);
|
|
--btn-border-color: var(--cirrus-info); }
|
|
button.btn-info:focus,
|
|
.btn.btn-info:focus,
|
|
[type='submit'].btn-info:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(41, 114, 250, 0.5); }
|
|
button.btn-info:hover,
|
|
.btn.btn-info:hover,
|
|
[type='submit'].btn-info:hover {
|
|
--btn-color: var(--cirrus-info-hover); }
|
|
button.btn-info.outline:hover,
|
|
.btn.btn-info.outline:hover,
|
|
[type='submit'].btn-info.outline:hover {
|
|
--btn-color: var(--cirrus-info); }
|
|
button.btn-link,
|
|
.btn.btn-link,
|
|
[type='submit'].btn-link {
|
|
--btn-color: var(--cirrus-link);
|
|
--btn-fg: var(--cirrus-light);
|
|
--btn-border-color: var(--cirrus-link); }
|
|
button.btn-link:focus,
|
|
.btn.btn-link:focus,
|
|
[type='submit'].btn-link:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(94, 92, 199, 0.5); }
|
|
button.btn-link:hover,
|
|
.btn.btn-link:hover,
|
|
[type='submit'].btn-link:hover {
|
|
--btn-color: var(--cirrus-link-dark); }
|
|
button.btn-link.outline,
|
|
.btn.btn-link.outline,
|
|
[type='submit'].btn-link.outline {
|
|
--btn-fg: var(--cirrus-link);
|
|
border: 1px solid transparent; }
|
|
button.btn-link.outline:hover,
|
|
.btn.btn-link.outline:hover,
|
|
[type='submit'].btn-link.outline:hover {
|
|
--btn-color: var(--cirrus-link-hover);
|
|
border: 1px solid transparent;
|
|
text-decoration: underline; }
|
|
button.btn-success,
|
|
.btn.btn-success,
|
|
[type='submit'].btn-success {
|
|
--btn-color: var(--cirrus-success);
|
|
--btn-fg: var(--cirrus-light);
|
|
--btn-border-color: var(--cirrus-success); }
|
|
button.btn-success:focus,
|
|
.btn.btn-success:focus,
|
|
[type='submit'].btn-success:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.5); }
|
|
button.btn-success:hover,
|
|
.btn.btn-success:hover,
|
|
[type='submit'].btn-success:hover {
|
|
--btn-color: var(--cirrus-success-hover); }
|
|
button.btn-success.outline:hover,
|
|
.btn.btn-success.outline:hover,
|
|
[type='submit'].btn-success.outline:hover {
|
|
--btn-color: var(--cirrus-success); }
|
|
button.btn-warning,
|
|
.btn.btn-warning,
|
|
[type='submit'].btn-warning {
|
|
--btn-color: var(--cirrus-warning);
|
|
--btn-fg: var(--cirrus-dark);
|
|
--btn-border-color: var(--cirrus-warning); }
|
|
button.btn-warning:focus,
|
|
.btn.btn-warning:focus,
|
|
[type='submit'].btn-warning:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(250, 182, 51, 0.5); }
|
|
button.btn-warning:hover,
|
|
.btn.btn-warning:hover,
|
|
[type='submit'].btn-warning:hover {
|
|
--btn-color: var(--cirrus-warning-hover); }
|
|
button.btn-warning.outline:hover,
|
|
.btn.btn-warning.outline:hover,
|
|
[type='submit'].btn-warning.outline:hover {
|
|
--btn-color: var(--cirrus-warning); }
|
|
button.btn-danger,
|
|
.btn.btn-danger,
|
|
[type='submit'].btn-danger {
|
|
--btn-color: var(--cirrus-danger);
|
|
--btn-fg: var(--cirrus-light);
|
|
--btn-border-color: var(--cirrus-danger); }
|
|
button.btn-danger:focus,
|
|
.btn.btn-danger:focus,
|
|
[type='submit'].btn-danger:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.5); }
|
|
button.btn-danger:hover,
|
|
.btn.btn-danger:hover,
|
|
[type='submit'].btn-danger:hover {
|
|
--btn-color: var(--cirrus-danger-hover); }
|
|
button.btn-danger.outline:hover,
|
|
.btn.btn-danger.outline:hover,
|
|
[type='submit'].btn-danger.outline:hover {
|
|
--btn-color: var(--cirrus-danger); }
|
|
button.btn-xsmall,
|
|
.btn.btn-xsmall,
|
|
[type='submit'].btn-xsmall {
|
|
padding: 0 0.5rem;
|
|
font-size: 50%; }
|
|
button.btn-small,
|
|
.btn.btn-small,
|
|
[type='submit'].btn-small {
|
|
padding: 0.25rem 1rem;
|
|
font-size: 70%; }
|
|
button.btn-large,
|
|
.btn.btn-large,
|
|
[type='submit'].btn-large {
|
|
padding: 0.75rem 2rem;
|
|
font-size: 90%; }
|
|
button.btn-xlarge,
|
|
.btn.btn-xlarge,
|
|
[type='submit'].btn-xlarge {
|
|
padding: 1rem 2.5rem;
|
|
font-size: 110%; }
|
|
button.btn-success,
|
|
.btn.btn-success,
|
|
[type='submit'].btn-success {
|
|
border-color: var(--cirrus-success); }
|
|
button.btn-success:focus,
|
|
.btn.btn-success:focus,
|
|
[type='submit'].btn-success:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
|
|
button.btn-error,
|
|
.btn.btn-error,
|
|
[type='submit'].btn-error {
|
|
border-color: var(--cirrus-danger); }
|
|
button.btn-error:focus,
|
|
.btn.btn-error:focus,
|
|
[type='submit'].btn-error:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
|
|
button .fa-wrapper,
|
|
.btn .fa-wrapper,
|
|
[type='submit'] .fa-wrapper {
|
|
/* Override default behavior of aligning font awesome icons to the top */
|
|
vertical-align: baseline; }
|
|
button .fa-wrapper.pad-right,
|
|
.btn .fa-wrapper.pad-right,
|
|
[type='submit'] .fa-wrapper.pad-right {
|
|
margin-right: 0.4rem; }
|
|
button .fa-wrapper.pad-left,
|
|
.btn .fa-wrapper.pad-left,
|
|
[type='submit'] .fa-wrapper.pad-left {
|
|
margin-left: 0.4rem; }
|
|
button span:first-child,
|
|
.btn span:first-child,
|
|
[type='submit'] span:first-child {
|
|
margin-right: 0.2rem; }
|
|
button span:last-child,
|
|
.btn span:last-child,
|
|
[type='submit'] span:last-child {
|
|
margin-left: 0.2rem; }
|
|
|
|
/* Deprecated 0.5.6, use m-1 instead */
|
|
[class^='btn-'],
|
|
[class*=' btn-'] {
|
|
background-color: var(--btn-color);
|
|
border: 1px solid var(--btn-border-color);
|
|
color: var(--btn-fg);
|
|
transition: all var(--animation-duration);
|
|
/* Outline Variants */ }
|
|
[class^='btn-']:hover,
|
|
[class*=' btn-']:hover {
|
|
background-color: var(--btn-color);
|
|
border-color: var(--btn-border-color);
|
|
transition: all var(--animation-duration); }
|
|
[class^='btn-'].outline,
|
|
[class*=' btn-'].outline {
|
|
background-color: transparent;
|
|
color: var(--btn-color); }
|
|
[class^='btn-'].outline:hover,
|
|
[class*=' btn-'].outline:hover {
|
|
background-color: var(--btn-color);
|
|
color: var(--btn-fg);
|
|
transition: all var(--animation-duration); }
|
|
|
|
/* Make the loader white so it is visible */
|
|
.loading.btn-accent:after {
|
|
border: 2px solid #fff;
|
|
border-right-color: transparent;
|
|
border-top-color: transparent; }
|
|
|
|
/* BUTTON GROUPS */
|
|
/* Will group buttons with components in a single component */
|
|
.btn-group {
|
|
/* -ms-flex-wrap: wrap; Deprecated 0.5.6, allow for overflow
|
|
flex-wrap: wrap; Wrap contents to next row on overflow */
|
|
display: -webkit-inline-box;
|
|
display: inline-flex;
|
|
display: -ms-inline-flexbox;
|
|
display: -webkit-inline-flex; }
|
|
.btn-group .btn {
|
|
-ms-flex: 1 0 auto;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 0 auto;
|
|
margin: 0; }
|
|
.btn-group .btn:first-child:not(:last-child) {
|
|
/* Style the first child in group > 1 buttons */
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.btn-group .btn:last-child:not(:first-child) {
|
|
/* Style the last child in group > 1 buttons */
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.1rem; }
|
|
.btn-group .btn:not(:first-child):not(:last-child) {
|
|
/* Style button in middle of group */
|
|
border-radius: 0;
|
|
/* Remove roundness from center buttons */
|
|
margin-left: -0.1rem; }
|
|
.btn-group button {
|
|
-ms-flex: 1 0 auto;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 0 auto;
|
|
margin: 0; }
|
|
.btn-group button:first-child:not(:last-child) {
|
|
/* Style the first child in group > 1 buttons */
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.btn-group button:last-child:not(:first-child) {
|
|
/* Style the last child in group > 1 buttons */
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.1rem; }
|
|
.btn-group button:not(:first-child):not(:last-child) {
|
|
/* Style button in middle of group */
|
|
border-radius: 0;
|
|
/* Remove roundness from center buttons */
|
|
margin-left: -0.1rem; }
|
|
.btn-group [type="submit"] {
|
|
-ms-flex: 1 0 auto;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 0 auto;
|
|
margin: 0; }
|
|
.btn-group [type="submit"]:first-child:not(:last-child) {
|
|
/* Style the first child in group > 1 buttons */
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.btn-group [type="submit"]:last-child:not(:first-child) {
|
|
/* Style the last child in group > 1 buttons */
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.1rem; }
|
|
.btn-group [type="submit"]:not(:first-child):not(:last-child) {
|
|
/* Style button in middle of group */
|
|
border-radius: 0;
|
|
/* Remove roundness from center buttons */
|
|
margin-left: -0.1rem; }
|
|
.btn-group.btn-group-fill {
|
|
/* Makes the button group fill the width and proportion the buttons to fill the space */
|
|
display: -webkit-box;
|
|
display: flex;
|
|
display: -ms-flexbox; }
|
|
.btn-group.btn-group-fill .btn {
|
|
-ms-flex: 1 0;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 0;
|
|
/* Make the buttons fill the available width and proportion themselves */ }
|
|
.btn-group.btn-group-fill button {
|
|
-ms-flex: 1 0;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 0;
|
|
/* Make the buttons fill the available width and proportion themselves */ }
|
|
.btn-group.btn-group-fill [type="submit"] {
|
|
-ms-flex: 1 0;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 0;
|
|
/* Make the buttons fill the available width and proportion themselves */ }
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: column; }
|
|
.btn-group .btn {
|
|
margin-bottom: -1px; }
|
|
.btn-group .btn:first-child:not(:last-child) {
|
|
border-radius: 0.25rem 0.25rem 0 0; }
|
|
.btn-group .btn:not(:first-child):not(:last-child) {
|
|
margin-left: 0; }
|
|
.btn-group .btn:last-child:not(:first-child) {
|
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
margin-left: 0; }
|
|
.btn-group button {
|
|
margin-bottom: -1px; }
|
|
.btn-group button:first-child:not(:last-child) {
|
|
border-radius: 0.25rem 0.25rem 0 0; }
|
|
.btn-group button:not(:first-child):not(:last-child) {
|
|
margin-left: 0; }
|
|
.btn-group button:last-child:not(:first-child) {
|
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
margin-left: 0; }
|
|
.btn-group [type="submit"] {
|
|
margin-bottom: -1px; }
|
|
.btn-group [type="submit"]:first-child:not(:last-child) {
|
|
border-radius: 0.25rem 0.25rem 0 0; }
|
|
.btn-group [type="submit"]:not(:first-child):not(:last-child) {
|
|
margin-left: 0; }
|
|
.btn-group [type="submit"]:last-child:not(:first-child) {
|
|
border-radius: 0 0 0.25rem 0.25rem;
|
|
margin-left: 0; } }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* CODE */
|
|
code {
|
|
padding: 0.3rem;
|
|
margin: 0.5em 0;
|
|
overflow: auto;
|
|
background-color: var(--cirrus-code-bg);
|
|
color: var(--cirrus-code-fg);
|
|
border-radius: 3px;
|
|
/* Dark theme for code */ }
|
|
code:before {
|
|
color: #acb3c2;
|
|
content: attr(data-lang);
|
|
font-size: 0.9rem;
|
|
position: absolute;
|
|
right: 1rem;
|
|
top: 0.7rem; }
|
|
code.dark {
|
|
background-color: #363636;
|
|
color: #fff; }
|
|
|
|
pre > code {
|
|
font-size: 14px;
|
|
display: block;
|
|
padding: 2rem 1.5rem 1rem;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
|
text-align: left;
|
|
line-height: 1.5;
|
|
-moz-tab-size: 4;
|
|
tab-size: 4;
|
|
-moz-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
border-left: 0.3rem solid #f03d4d;
|
|
margin: 0;
|
|
position: relative;
|
|
color: #222; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
|
|
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* FONT */
|
|
/* Constants */
|
|
/* Headers */
|
|
h1 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem; }
|
|
|
|
h2 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem; }
|
|
|
|
h3 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem; }
|
|
|
|
h4 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem; }
|
|
|
|
h5 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem; }
|
|
|
|
h6 {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem; }
|
|
|
|
/* Silent header Deprecated 0.5.6
|
|
h1 .silent,
|
|
h2 .silent,
|
|
h3 .silent,
|
|
h4 .silent,
|
|
h5 .silent,
|
|
h6 .silent {
|
|
color: #788196;
|
|
} */
|
|
h1 {
|
|
letter-spacing: 0.025rem; }
|
|
|
|
p,
|
|
article,
|
|
blockquote {
|
|
font-size: 1rem;
|
|
line-height: 2;
|
|
margin-bottom: 1rem; }
|
|
|
|
p.lead {
|
|
font-size: 1.2rem; }
|
|
|
|
blockquote {
|
|
background-color: #f5f5f5;
|
|
border-left: 5px solid #dbdbdb;
|
|
border-radius: 3px;
|
|
font-size: 1.15rem;
|
|
margin-bottom: 1rem;
|
|
padding: 1rem 2rem; }
|
|
blockquote p {
|
|
margin: 0;
|
|
font-size: 0.95rem; }
|
|
|
|
cite {
|
|
opacity: 0.7; }
|
|
|
|
mark,
|
|
.mark {
|
|
padding: 0.2em;
|
|
background-color: #f0e8c4; }
|
|
|
|
/* Headlines (for larger titles) */
|
|
.headline-1 {
|
|
font-size: 8.5rem;
|
|
letter-spacing: 0.05rem; }
|
|
|
|
.headline-2 {
|
|
font-size: 7.5rem;
|
|
letter-spacing: 0.05rem; }
|
|
|
|
.headline-3 {
|
|
font-size: 6.5rem;
|
|
letter-spacing: 0.05rem; }
|
|
|
|
.headline-4 {
|
|
font-size: 5.5rem;
|
|
letter-spacing: 0.05rem; }
|
|
|
|
/* Deprecated, use font-bold */
|
|
.font-alt {
|
|
font-family: 'Nunito Sans'; }
|
|
|
|
.content h1 {
|
|
line-height: 1.125em;
|
|
margin: 1rem 0; }
|
|
|
|
.content h2 {
|
|
line-height: 1.125em;
|
|
margin: 1rem 0; }
|
|
|
|
.content h3 {
|
|
line-height: 1.125em;
|
|
margin: 1rem 0; }
|
|
|
|
.content h4 {
|
|
line-height: 1.125em;
|
|
margin: 1rem 0; }
|
|
|
|
.content h5 {
|
|
line-height: 1.125em;
|
|
margin: 1rem 0; }
|
|
|
|
.content h6 {
|
|
line-height: 1.125em;
|
|
margin: 1rem 0; }
|
|
|
|
/* TODO: To deprecate */
|
|
.title {
|
|
font-weight: bold; }
|
|
|
|
.title:not(:last-child),
|
|
.subtitle:not(:last-child) {
|
|
margin-bottom: 1rem; }
|
|
|
|
.title + .subtitle {
|
|
/* Make the subtitlte closer to the title */
|
|
margin-top: -0.75rem; }
|
|
|
|
/* Use default line-height for these texts and when line-height-inherit is specified */
|
|
.card-tile p,
|
|
.card-tile article,
|
|
.card-tile blockquote {
|
|
line-height: inherit; }
|
|
|
|
/* Weights */
|
|
.font-thin {
|
|
font-weight: 200; }
|
|
|
|
.font-light {
|
|
font-weight: 300; }
|
|
|
|
.font-normal {
|
|
font-weight: 400; }
|
|
|
|
.font-semibold {
|
|
font-weight: 600; }
|
|
|
|
.font-bold {
|
|
font-weight: 700; }
|
|
|
|
/* Text Transformations */
|
|
.uppercase {
|
|
text-transform: "uppercase"; }
|
|
|
|
.lowercase {
|
|
text-transform: "lowercase"; }
|
|
|
|
.capitalize {
|
|
text-transform: "capitalize"; }
|
|
|
|
.rtl {
|
|
direction: rtl; }
|
|
|
|
.white {
|
|
color: #fff !important; }
|
|
|
|
.faded {
|
|
opacity: 0.75; }
|
|
|
|
.font-italic {
|
|
font-style: italic; }
|
|
|
|
/* Font Awesome */
|
|
.icon {
|
|
/* Usually used in spans */
|
|
display: inline-block;
|
|
/* font-size: 21px; Allow font sizes for icons to be overwritten */
|
|
/* line-height: 1.5rem; Allow line height to be inherited or overwritten */
|
|
text-align: center;
|
|
width: 1.5rem;
|
|
vertical-align: baseline; }
|
|
.icon.x-small {
|
|
margin: 0.55rem 0 0 0.1rem; }
|
|
.icon.small {
|
|
margin: 0.95rem 0 0 0.1rem; }
|
|
.icon .fa-wrapper {
|
|
font-size: inherit;
|
|
vertical-align: middle; }
|
|
|
|
.info {
|
|
display: block;
|
|
font-size: var(--font-size-s);
|
|
margin-top: 0.25rem;
|
|
color: #868e96; }
|
|
.info.inline {
|
|
/* Keeps the extra info inline */
|
|
display: inline-block;
|
|
margin-left: 0.5rem; }
|
|
|
|
.caret {
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
margin-left: 2px;
|
|
vertical-align: middle;
|
|
border-top: 4px dashed;
|
|
border-top: 4px solid\9;
|
|
border-right: 4px solid transparent;
|
|
border-left: 4px solid transparent; }
|
|
|
|
/* Other text elements */
|
|
abbr[title] {
|
|
border-bottom: 0.1rem dotted;
|
|
cursor: help;
|
|
text-decoration: none; }
|
|
|
|
kbd {
|
|
background-color: var(--cirrus-fg);
|
|
border-radius: 0.2rem;
|
|
color: #fff;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
padding: 0.5rem;
|
|
vertical-align: baseline; }
|
|
|
|
/* MOBILE */
|
|
@media (max-width: 650px) {
|
|
h1 {
|
|
font-size: 2.25rem; }
|
|
h2 {
|
|
font-size: 2rem; }
|
|
h3 {
|
|
font-size: 1.75rem; }
|
|
h4 {
|
|
font-size: 1.5rem; }
|
|
h5 {
|
|
font-size: 1.25rem; }
|
|
h6 {
|
|
font-size: 1rem; }
|
|
.headline-1 {
|
|
font-size: 3.75rem; }
|
|
.headline-2 {
|
|
font-size: 3.5rem; }
|
|
.headline-3 {
|
|
font-size: 3.25rem; }
|
|
.headline-4 {
|
|
font-size: 3rem; }
|
|
p,
|
|
article,
|
|
blockquote {
|
|
margin: 1rem 0; } }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* FOOTER */
|
|
.footer {
|
|
background-color: #212529;
|
|
padding: 6rem 0;
|
|
text-align: center;
|
|
margin-top: 5rem;
|
|
width: 100%; }
|
|
.footer.footer--fixed {
|
|
bottom: 0;
|
|
position: fixed; }
|
|
.footer a {
|
|
color: #fff;
|
|
font-weight: bolder; }
|
|
.footer p {
|
|
color: #868e96; }
|
|
.footer ul {
|
|
margin: 0.5rem 0;
|
|
/* Remove the left margin seen in global style */ }
|
|
.footer .footer__title {
|
|
text-align: center;
|
|
letter-spacing: 6px;
|
|
position: relative;
|
|
padding-bottom: 10px; }
|
|
.footer .footer__list-title {
|
|
font-size: 75%;
|
|
text-transform: uppercase;
|
|
font-weight: bolder;
|
|
color: #ddd; }
|
|
.footer .footer__list-title::after {
|
|
content: '';
|
|
display: block;
|
|
width: 10%;
|
|
margin: auto;
|
|
border-bottom: 2px solid;
|
|
border-color: #343b49; }
|
|
.footer ul a .footer__list-item,
|
|
.footer .footer__list-item {
|
|
margin: 0.1rem;
|
|
color: #868e96;
|
|
transition: all var(--animation-duration);
|
|
font-size: 75%;
|
|
text-transform: uppercase; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/*
|
|
Global Mixins
|
|
*/
|
|
/* FORMS */
|
|
/*
|
|
Mixins
|
|
*/
|
|
/*
|
|
Styles
|
|
*/
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']),
|
|
select {
|
|
width: 100%;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 3px;
|
|
font-family: 'Nunito Sans';
|
|
font-size: var(--font-size-m);
|
|
letter-spacing: 0.02rem;
|
|
transition: all 0.3s;
|
|
outline: none;
|
|
padding: 0.85rem 1.1rem;
|
|
/* Input Field Sizes */
|
|
/* Hold Font Awesome glyphs inside input fields */
|
|
/* More sizes coming soon */
|
|
/* Search field */ }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-xsmall,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-xsmall,
|
|
select.input-xsmall,
|
|
select select.input-xsmall {
|
|
font-size: var(--font-size-xs);
|
|
padding: 0.35rem 0.9rem; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-small,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-small,
|
|
select.input-small,
|
|
select select.input-small {
|
|
font-size: var(--font-size-s);
|
|
padding: 0.55rem 1rem; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-large,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-large,
|
|
select.input-large,
|
|
select select.input-large {
|
|
font-size: var(--font-size-l); }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-xlarge,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-xlarge,
|
|
select.input-xlarge,
|
|
select select.input-xlarge {
|
|
font-size: var(--font-size-xl); }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left,
|
|
select.input-contains-icon,
|
|
select.input-contains-icon-left {
|
|
padding-left: 2.75rem; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right,
|
|
select.input-contains-icon-right {
|
|
padding-right: 2.75rem; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xsmall, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xsmall,
|
|
select.input-contains-icon.input-xsmall,
|
|
select.input-contains-icon-right.input-xsmall {
|
|
padding-left: 2rem; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xsmall ~ .icon,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-xsmall ~ .icon,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xsmall ~ .icon.icon-right,
|
|
select.input-contains-icon.input-xsmall ~ .icon,
|
|
select.input-contains-icon-left.input-xsmall ~ .icon,
|
|
select.input-contains-icon-right.input-xsmall ~ .icon.icon-right {
|
|
line-height: 1.75rem;
|
|
width: 1.75rem;
|
|
font-size: 7px; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-small, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-small,
|
|
select.input-contains-icon.input-small,
|
|
select.input-contains-icon-right.input-small {
|
|
padding-left: 2.5rem; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-small ~ .icon,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-small ~ .icon,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-small ~ .icon.icon-right,
|
|
select.input-contains-icon.input-small ~ .icon,
|
|
select.input-contains-icon-left.input-small ~ .icon,
|
|
select.input-contains-icon-right.input-small ~ .icon.icon-right {
|
|
line-height: 2rem;
|
|
width: 2.5rem;
|
|
font-size: 14px; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-large, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-large,
|
|
select.input-contains-icon.input-large,
|
|
select.input-contains-icon-right.input-large {
|
|
padding-left: 3.5rem; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-large ~ .icon,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-large ~ .icon,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-large ~ .icon.icon-right,
|
|
select.input-contains-icon.input-large ~ .icon,
|
|
select.input-contains-icon-left.input-large ~ .icon,
|
|
select.input-contains-icon-right.input-large ~ .icon.icon-right {
|
|
line-height: 3.5rem;
|
|
width: 3.5rem;
|
|
font-size: 28px; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xlarge, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xlarge,
|
|
select.input-contains-icon.input-xlarge,
|
|
select.input-contains-icon-right.input-xlarge {
|
|
padding-left: 4rem; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xlarge ~ .icon,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-xlarge ~ .icon,
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xlarge ~ .icon.icon-right,
|
|
select.input-contains-icon.input-xlarge ~ .icon,
|
|
select.input-contains-icon-left.input-xlarge ~ .icon,
|
|
select.input-contains-icon-right.input-xlarge ~ .icon.icon-right {
|
|
line-height: 2.5rem;
|
|
width: 3.75rem;
|
|
font-size: 35px; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset'])[type='search'], input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).search,
|
|
select[type='search'],
|
|
select.search {
|
|
background-repeat: no-repeat;
|
|
background-position: left 0.6rem center;
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path opacity="0.45" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>');
|
|
/* NEEDS FIXING */
|
|
padding-left: 2rem !important;
|
|
-webkit-appearance: none;
|
|
/* Fix Safari issue */ }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset'])[type='color'],
|
|
select[type='color'] {
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
box-sizing: border-box;
|
|
transition: 0.3s;
|
|
outline: 0;
|
|
position: relative;
|
|
height: 3rem;
|
|
background-color: #fff;
|
|
padding: 0.55rem 0.8rem !important; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-success,
|
|
select.input-success {
|
|
border-color: var(--cirrus-success);
|
|
background-color: rgba(0, 224, 0, 0.05) !important; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-success:focus,
|
|
select.input-success:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-error,
|
|
select.input-error {
|
|
border-color: var(--cirrus-danger);
|
|
background-color: rgba(244, 67, 54, 0.05) !important; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-error:focus,
|
|
select.input-error:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
|
|
|
|
textarea,
|
|
textarea[type='text'] {
|
|
width: 100%;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 3px;
|
|
font-family: 'Nunito Sans';
|
|
font-size: var(--font-size-m);
|
|
letter-spacing: 0.02rem;
|
|
transition: all 0.3s;
|
|
outline: none;
|
|
padding: 0.85rem 1.1rem;
|
|
/* Input Field Sizes */
|
|
/* Hold Font Awesome glyphs inside input fields */
|
|
/* More sizes coming soon */
|
|
margin: 0.5rem 0;
|
|
padding: 1rem 1.3rem;
|
|
min-height: 8rem;
|
|
line-height: 1.5rem;
|
|
resize: vertical; }
|
|
textarea.input-xsmall,
|
|
textarea select.input-xsmall,
|
|
textarea[type='text'].input-xsmall,
|
|
textarea[type='text'] select.input-xsmall {
|
|
font-size: var(--font-size-xs);
|
|
padding: 0.35rem 0.9rem; }
|
|
textarea.input-small,
|
|
textarea select.input-small,
|
|
textarea[type='text'].input-small,
|
|
textarea[type='text'] select.input-small {
|
|
font-size: var(--font-size-s);
|
|
padding: 0.55rem 1rem; }
|
|
textarea.input-large,
|
|
textarea select.input-large,
|
|
textarea[type='text'].input-large,
|
|
textarea[type='text'] select.input-large {
|
|
font-size: var(--font-size-l); }
|
|
textarea.input-xlarge,
|
|
textarea select.input-xlarge,
|
|
textarea[type='text'].input-xlarge,
|
|
textarea[type='text'] select.input-xlarge {
|
|
font-size: var(--font-size-xl); }
|
|
textarea.input-contains-icon, textarea.input-contains-icon-left,
|
|
textarea[type='text'].input-contains-icon,
|
|
textarea[type='text'].input-contains-icon-left {
|
|
padding-left: 2.75rem; }
|
|
textarea.input-contains-icon-right,
|
|
textarea[type='text'].input-contains-icon-right {
|
|
padding-right: 2.75rem; }
|
|
textarea.input-contains-icon.input-xsmall, textarea.input-contains-icon-right.input-xsmall,
|
|
textarea[type='text'].input-contains-icon.input-xsmall,
|
|
textarea[type='text'].input-contains-icon-right.input-xsmall {
|
|
padding-left: 2rem; }
|
|
textarea.input-contains-icon.input-xsmall ~ .icon,
|
|
textarea.input-contains-icon-left.input-xsmall ~ .icon,
|
|
textarea.input-contains-icon-right.input-xsmall ~ .icon.icon-right,
|
|
textarea[type='text'].input-contains-icon.input-xsmall ~ .icon,
|
|
textarea[type='text'].input-contains-icon-left.input-xsmall ~ .icon,
|
|
textarea[type='text'].input-contains-icon-right.input-xsmall ~ .icon.icon-right {
|
|
line-height: 1.75rem;
|
|
width: 1.75rem;
|
|
font-size: 7px; }
|
|
textarea.input-contains-icon.input-small, textarea.input-contains-icon-right.input-small,
|
|
textarea[type='text'].input-contains-icon.input-small,
|
|
textarea[type='text'].input-contains-icon-right.input-small {
|
|
padding-left: 2.5rem; }
|
|
textarea.input-contains-icon.input-small ~ .icon,
|
|
textarea.input-contains-icon-left.input-small ~ .icon,
|
|
textarea.input-contains-icon-right.input-small ~ .icon.icon-right,
|
|
textarea[type='text'].input-contains-icon.input-small ~ .icon,
|
|
textarea[type='text'].input-contains-icon-left.input-small ~ .icon,
|
|
textarea[type='text'].input-contains-icon-right.input-small ~ .icon.icon-right {
|
|
line-height: 2rem;
|
|
width: 2.5rem;
|
|
font-size: 14px; }
|
|
textarea.input-contains-icon.input-large, textarea.input-contains-icon-right.input-large,
|
|
textarea[type='text'].input-contains-icon.input-large,
|
|
textarea[type='text'].input-contains-icon-right.input-large {
|
|
padding-left: 3.5rem; }
|
|
textarea.input-contains-icon.input-large ~ .icon,
|
|
textarea.input-contains-icon-left.input-large ~ .icon,
|
|
textarea.input-contains-icon-right.input-large ~ .icon.icon-right,
|
|
textarea[type='text'].input-contains-icon.input-large ~ .icon,
|
|
textarea[type='text'].input-contains-icon-left.input-large ~ .icon,
|
|
textarea[type='text'].input-contains-icon-right.input-large ~ .icon.icon-right {
|
|
line-height: 3.5rem;
|
|
width: 3.5rem;
|
|
font-size: 28px; }
|
|
textarea.input-contains-icon.input-xlarge, textarea.input-contains-icon-right.input-xlarge,
|
|
textarea[type='text'].input-contains-icon.input-xlarge,
|
|
textarea[type='text'].input-contains-icon-right.input-xlarge {
|
|
padding-left: 4rem; }
|
|
textarea.input-contains-icon.input-xlarge ~ .icon,
|
|
textarea.input-contains-icon-left.input-xlarge ~ .icon,
|
|
textarea.input-contains-icon-right.input-xlarge ~ .icon.icon-right,
|
|
textarea[type='text'].input-contains-icon.input-xlarge ~ .icon,
|
|
textarea[type='text'].input-contains-icon-left.input-xlarge ~ .icon,
|
|
textarea[type='text'].input-contains-icon-right.input-xlarge ~ .icon.icon-right {
|
|
line-height: 2.5rem;
|
|
width: 3.75rem;
|
|
font-size: 35px; }
|
|
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus,
|
|
select:focus,
|
|
textarea:focus,
|
|
textarea[type='text']:focus,
|
|
input[type='text'].input-focused,
|
|
.input-focused {
|
|
border-color: #3dabf0;
|
|
box-shadow: 0 0 0 0.2rem rgba(61, 171, 240, 0.45), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus.input-success,
|
|
select:focus.input-success,
|
|
textarea:focus.input-success,
|
|
textarea[type='text']:focus.input-success,
|
|
input[type='text'].input-focused.input-success,
|
|
.input-focused.input-success {
|
|
border-color: var(--cirrus-success);
|
|
background-color: rgba(0, 224, 0, 0.05) !important; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus.input-success:focus,
|
|
select:focus.input-success:focus,
|
|
textarea:focus.input-success:focus,
|
|
textarea[type='text']:focus.input-success:focus,
|
|
input[type='text'].input-focused.input-success:focus,
|
|
.input-focused.input-success:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus.input-error,
|
|
select:focus.input-error,
|
|
textarea:focus.input-error,
|
|
textarea[type='text']:focus.input-error,
|
|
input[type='text'].input-focused.input-error,
|
|
.input-focused.input-error {
|
|
border-color: var(--cirrus-danger);
|
|
background-color: rgba(244, 67, 54, 0.05) !important; }
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus.input-error:focus,
|
|
select:focus.input-error:focus,
|
|
textarea:focus.input-error:focus,
|
|
textarea[type='text']:focus.input-error:focus,
|
|
input[type='text'].input-focused.input-error:focus,
|
|
.input-focused.input-error:focus {
|
|
box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); }
|
|
|
|
select {
|
|
width: 100%;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 3px;
|
|
font-family: 'Nunito Sans';
|
|
font-size: var(--font-size-m);
|
|
letter-spacing: 0.02rem;
|
|
transition: all 0.3s;
|
|
outline: none;
|
|
padding: 0.85rem 1.1rem;
|
|
/* Input Field Sizes */
|
|
/* Hold Font Awesome glyphs inside input fields */
|
|
/* More sizes coming soon */
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
/* Fixes for Safari and other browsers for consistent UI */
|
|
/* Select sizes */ }
|
|
select.input-xsmall,
|
|
select select.input-xsmall {
|
|
font-size: var(--font-size-xs);
|
|
padding: 0.35rem 0.9rem; }
|
|
select.input-small,
|
|
select select.input-small {
|
|
font-size: var(--font-size-s);
|
|
padding: 0.55rem 1rem; }
|
|
select.input-large,
|
|
select select.input-large {
|
|
font-size: var(--font-size-l); }
|
|
select.input-xlarge,
|
|
select select.input-xlarge {
|
|
font-size: var(--font-size-xl); }
|
|
select.input-contains-icon, select.input-contains-icon-left {
|
|
padding-left: 2.75rem; }
|
|
select.input-contains-icon-right {
|
|
padding-right: 2.75rem; }
|
|
select.input-contains-icon.input-xsmall, select.input-contains-icon-right.input-xsmall {
|
|
padding-left: 2rem; }
|
|
select.input-contains-icon.input-xsmall ~ .icon,
|
|
select.input-contains-icon-left.input-xsmall ~ .icon,
|
|
select.input-contains-icon-right.input-xsmall ~ .icon.icon-right {
|
|
line-height: 1.75rem;
|
|
width: 1.75rem;
|
|
font-size: 7px; }
|
|
select.input-contains-icon.input-small, select.input-contains-icon-right.input-small {
|
|
padding-left: 2.5rem; }
|
|
select.input-contains-icon.input-small ~ .icon,
|
|
select.input-contains-icon-left.input-small ~ .icon,
|
|
select.input-contains-icon-right.input-small ~ .icon.icon-right {
|
|
line-height: 2rem;
|
|
width: 2.5rem;
|
|
font-size: 14px; }
|
|
select.input-contains-icon.input-large, select.input-contains-icon-right.input-large {
|
|
padding-left: 3.5rem; }
|
|
select.input-contains-icon.input-large ~ .icon,
|
|
select.input-contains-icon-left.input-large ~ .icon,
|
|
select.input-contains-icon-right.input-large ~ .icon.icon-right {
|
|
line-height: 3.5rem;
|
|
width: 3.5rem;
|
|
font-size: 28px; }
|
|
select.input-contains-icon.input-xlarge, select.input-contains-icon-right.input-xlarge {
|
|
padding-left: 4rem; }
|
|
select.input-contains-icon.input-xlarge ~ .icon,
|
|
select.input-contains-icon-left.input-xlarge ~ .icon,
|
|
select.input-contains-icon-right.input-xlarge ~ .icon.icon-right {
|
|
line-height: 2.5rem;
|
|
width: 3.75rem;
|
|
font-size: 35px; }
|
|
select[multiple] option {
|
|
padding: 0.2rem 0.4rem; }
|
|
select.select:not([size]):not([multiple]) {
|
|
background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right 0.85rem center/0.5rem 0.6rem no-repeat;
|
|
-webkit-appearance: none; }
|
|
select.input-xsmall {
|
|
padding: 0.65rem 0.9rem; }
|
|
select.input-small {
|
|
padding: 0.75rem 1rem; }
|
|
select.input-large {
|
|
padding: 0.95rem 1.2rem; }
|
|
select.input-xlarge {
|
|
padding: 1.05rem 1.3rem; }
|
|
|
|
input:not([class*='btn-']):disabled,
|
|
input:not([class*=' btn-']):disabled:hover,
|
|
select:disabled,
|
|
textarea:disabled {
|
|
background-color: #f1f3f5;
|
|
cursor: not-allowed;
|
|
border: 1px solid #f1f3f5; }
|
|
|
|
label.label {
|
|
color: #495057;
|
|
display: inline-block;
|
|
/* changed from block */
|
|
font-weight: bold;
|
|
margin-top: 0.8rem; }
|
|
|
|
label.label:not(:last-child) {
|
|
margin-bottom: 0; }
|
|
|
|
label:first-child:not(:last-child):not(.form-group-label) {
|
|
margin-right: 0.5rem; }
|
|
|
|
label:not(:first-child):not(:last-child):not(.form-group-label) {
|
|
margin: 0 0.5rem; }
|
|
|
|
label:last-child:not(:first-child):not(.form-group-label) {
|
|
margin-left: 0.5rem; }
|
|
|
|
/* Required asterisk */
|
|
.required {
|
|
/* Use this in a span or a div */
|
|
position: relative;
|
|
top: 1px;
|
|
font-weight: bold;
|
|
color: #DB3839;
|
|
padding-left: 0.1rem; }
|
|
|
|
/* Used for when the input controls have another control adjacent to it but we want to position it inside the input field like font-awesome glyphs. As of 0.5.2, it is the default container for input fields. */
|
|
.input-control {
|
|
position: relative;
|
|
margin: 0.5rem 0; }
|
|
|
|
.input-contains-icon ~ .icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%; }
|
|
|
|
.input-contains-icon ~ .icon:not(.icon-right),
|
|
.input-contains-icon-left ~ .icon.icon-left {
|
|
/* Nomral input only */
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 3rem;
|
|
z-index: 1; }
|
|
|
|
.input-contains-icon-right ~ .icon.icon-right {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
line-height: 2.75rem;
|
|
vertical-align: baseline;
|
|
top: 0;
|
|
right: 0;
|
|
width: 3rem;
|
|
z-index: 1; }
|
|
|
|
/* Form section just adds extra spacing between form elements tiled vertically */
|
|
.form-section {
|
|
/* A flexbox version of form-section for inline forms */ }
|
|
.form-section:not(:last-child) {
|
|
margin-bottom: 0.5rem; }
|
|
.form-section.section-inline {
|
|
display: flex; }
|
|
.form-section button {
|
|
align-items: center;
|
|
flex-grow: 0;
|
|
/* Keep it from taking up extra space */
|
|
display: flex;
|
|
flex-shrink: 0; }
|
|
.form-section input,
|
|
.form-section .section-body {
|
|
align-items: center;
|
|
flex-grow: 1; }
|
|
|
|
/* Form groups that group inputs with other controls. */
|
|
.form-group {
|
|
/* This is just an extended portion of an input which is just like a label and is read only */
|
|
/* This will style the controls if they are the leftmost control in the form group for labels, inputs, and buttons. */
|
|
display: flex;
|
|
display: -ms-flexbox;
|
|
margin: 0.5rem 0;
|
|
/* Add margin to the container since they have been removed from children */
|
|
/* Fixes the text width being cut off */
|
|
/* Form group controls */
|
|
/* Keeps inputs in form group above other components */ }
|
|
.form-group .form-group-btn {
|
|
-webkit-flex: 1 0 auto;
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
margin-bottom: 0;
|
|
/* Style the front controls */
|
|
/* Style the middle controls */
|
|
/* Handles right most control in form group */ }
|
|
.form-group .form-group-btn:first-child:not(:last-child) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.form-group .form-group-btn:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
margin-left: -0.1rem;
|
|
margin-right: -0.1rem;
|
|
/* Remove spacing in middle controls */ }
|
|
.form-group .form-group-btn:last-child:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.1rem; }
|
|
.form-group .form-group-label {
|
|
background-color: var(--cirrus-form-group-bg);
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.2rem;
|
|
color: var(--cirrus-form-group-fg);
|
|
margin: 0;
|
|
padding: 0.8rem;
|
|
user-select: none;
|
|
z-index: 1;
|
|
/* Style the front controls */
|
|
/* Style the middle controls */
|
|
/* Handles right most control in form group */ }
|
|
.form-group .form-group-label:first-child:not(:last-child) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.form-group .form-group-label:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
margin-left: -0.1rem;
|
|
margin-right: -0.1rem;
|
|
/* Remove spacing in middle controls */ }
|
|
.form-group .form-group-label:last-child:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.1rem; }
|
|
.form-group .form-group-label.label-xsmall {
|
|
font-size: 0.55rem;
|
|
padding: 0.5rem 0.9rem; }
|
|
.form-group .form-group-label.label-small {
|
|
font-size: 0.75rem;
|
|
padding: 0.55rem 1rem; }
|
|
.form-group .form-group-label.label-large {
|
|
font-size: 1.5rem; }
|
|
.form-group .form-group-label.label-xlarge {
|
|
font-size: 2rem; }
|
|
.form-group .form-group-input {
|
|
/* Style the front controls */
|
|
/* Style the middle controls */
|
|
/* Handles right most control in form group */ }
|
|
.form-group .form-group-input:first-child:not(:last-child) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0; }
|
|
.form-group .form-group-input:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
margin-left: -0.1rem;
|
|
margin-right: -0.1rem;
|
|
/* Remove spacing in middle controls */ }
|
|
.form-group .form-group-input:last-child:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
margin-left: -0.1rem; }
|
|
|
|
/* Change place holder color */
|
|
::-moz-placeholder {
|
|
color: #a9a9a9;
|
|
/* Lighter than the default */ }
|
|
|
|
::-webkit-input-placeholder {
|
|
color: #a9a9a9;
|
|
/* Lighter than the default */ }
|
|
|
|
@media screen and (max-width: 768px) {
|
|
/* Remove flex in form-section */
|
|
.form-section.section-inline {
|
|
display: inherit; } }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* Separate CSS file, but same part as Layout */
|
|
/* The base container that is similar in structure to a card but more flexible */
|
|
.frame {
|
|
border-radius: 3px;
|
|
box-shadow: 0 0.2rem 1.25rem 0 rgba(27, 30, 36, 0.07);
|
|
display: flex;
|
|
display: -ms-flexbox;
|
|
flex-direction: column;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
/* For the frame header and footer, use flex display */
|
|
/* The frame navbar can be used with level or header classes to create a navigation menu */ }
|
|
.frame .frame__header,
|
|
.frame .frame__footer {
|
|
flex: 0 0 auto;
|
|
-webkit-flex: 0 0 auto;
|
|
-ms-flex: 0 0 auto;
|
|
padding: 1rem; }
|
|
.frame .frame__nav {
|
|
flex: 0 0 auto;
|
|
-webkit-flex: 0 0 auto;
|
|
-ms-flex: 0 0 auto; }
|
|
.frame .frame__body {
|
|
flex: 1 1 auto;
|
|
-webkit-flex: 1 1 auto;
|
|
-ms-flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
/* Show the scrollbar when needed */
|
|
padding: 0 1.5rem; }
|
|
.frame .frame__title {
|
|
color: #374054;
|
|
font-size: 1rem;
|
|
margin: .75rem auto 0; }
|
|
.frame .frame__subtitle {
|
|
color: rgba(55, 64, 84, 0.6);
|
|
font-size: 1rem;
|
|
margin: 0 auto .75rem; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* HEADER */
|
|
.header {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-ms-flex-negative: 0;
|
|
width: 100%;
|
|
z-index: 100;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 3px 15px rgba(57, 63, 72, 0.1);
|
|
background-color: var(--cirrus-bg);
|
|
max-height: 100vh;
|
|
padding: 0 2rem;
|
|
transition: all 0.3s;
|
|
--header-link-color: #495057;
|
|
--header-link-color-hover: #606a73;
|
|
/* Remove any padding set for headers in default.scss */
|
|
/* Header dark theme */
|
|
/* Add transition to nav menu when it drops down */
|
|
/* The container that contains all the header menu components. Child of header */
|
|
/* Static header at the top of the screen */
|
|
/* Hover effect for header elements when appropriate */ }
|
|
.header h1 {
|
|
margin: 0; }
|
|
.header h2 {
|
|
margin: 0; }
|
|
.header h3 {
|
|
margin: 0; }
|
|
.header h4 {
|
|
margin: 0; }
|
|
.header h5 {
|
|
margin: 0; }
|
|
.header h6 {
|
|
margin: 0; }
|
|
.header a {
|
|
color: var(--header-link-color); }
|
|
.header a:hover {
|
|
color: var(--header-link-color-hover); }
|
|
.header.header-dark {
|
|
background-color: rgba(0, 0, 0, 0.87);
|
|
color: #fff;
|
|
--header-link-color: #fff;
|
|
--header-link-color-hover: #fff;
|
|
/* Theme for dark menu */ }
|
|
.header.header-clear {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
/* Add border radius to whole menu with clear header */ }
|
|
.header.header-clear .nav-item .dropdown-menu {
|
|
border-radius: 4px; }
|
|
.header.header-animated .header-nav {
|
|
-webkit-transition: background 0.4s ease, height 0.4s ease;
|
|
transition: background 0.4s ease, height 0.4s ease;
|
|
-webkit-transition-property: background, height;
|
|
transition-property: background, height;
|
|
-webkit-transition-duration: 0.4s, 0.4s;
|
|
transition-duration: 0.4s, 0.4s;
|
|
-webkit-transition-timing-function: ease, ease;
|
|
transition-timing-function: ease, ease;
|
|
-webkit-transition-delay: initial, initial;
|
|
transition-delay: initial, initial;
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s; }
|
|
.header .header-nav {
|
|
/* Flex display 768px and higher */
|
|
overflow: auto; }
|
|
.header .header-brand {
|
|
-webkit-overflow-scrolling: touch;
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
max-width: 100vw;
|
|
min-height: 3.25rem;
|
|
overflow-x: auto;
|
|
overflow-y: hidden; }
|
|
.header.header-fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
/* Change this if you want to float the header somewhere else */ }
|
|
.header:not(.header-clear) .nav-item:not(.no-hover):hover,
|
|
.header:not(.header-clear) .nav-item:not(.no-hover).hovered {
|
|
background-color: rgba(216, 216, 216, 0.15);
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s; }
|
|
.header:not(.header-clear) .nav-item.active,
|
|
.header:not(.header-clear) .nav-item.active:hover {
|
|
background-color: rgba(216, 216, 216, 0.35); }
|
|
.header .nav-btn {
|
|
cursor: pointer;
|
|
display: block;
|
|
height: 3.5rem;
|
|
position: relative;
|
|
width: 3.5rem; }
|
|
.header .btn,
|
|
.header button,
|
|
.header input[type='submit'] {
|
|
margin: 0; }
|
|
|
|
/* Styles for header menu (aka the nav bar) */
|
|
.nav-menu {
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s; }
|
|
.nav-menu .has-sub {
|
|
position: relative; }
|
|
|
|
/* Allow the user to scroll through navbar items if it exceeds nav-left, nav-center, or nav-right widths */
|
|
.nav-overflow-x {
|
|
-webkit-box-pack: inherit;
|
|
-ms-flex-pack: inherit;
|
|
justify-content: inherit;
|
|
overflow-x: scroll; }
|
|
|
|
/* Wrapper to vertically center header items */
|
|
.nav-item {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
position: relative;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
padding: 0 0.3rem;
|
|
cursor: pointer;
|
|
/* HEADER DROP DOWN MENU */
|
|
/* Add room for the dropdown chevron pseudoelement */ }
|
|
.nav-item a {
|
|
align-items: center;
|
|
display: flex; }
|
|
.nav-item .dropdown-menu {
|
|
background-color: var(--cirrus-bg);
|
|
position: absolute;
|
|
top: 95%;
|
|
/*right: 0; /* Unable to solve problem when we have multiple drop down menus */
|
|
z-index: 1000;
|
|
float: left;
|
|
min-width: 160px;
|
|
padding: 5px 0;
|
|
margin: 2px 0 0;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
list-style: none;
|
|
background-clip: padding-box;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 0 0 4px 4px;
|
|
box-shadow: 0 0.5rem 1rem rgba(10, 10, 10, 0.1);
|
|
/* Just add a transition in general */ }
|
|
.nav-item .dropdown-menu.dropdown-animated {
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
.nav-item .dropdown-menu > li > a {
|
|
display: block;
|
|
padding: 0.5rem 1rem;
|
|
clear: both;
|
|
line-height: 1.42857143;
|
|
white-space: nowrap; }
|
|
.nav-item .dropdown-menu > li {
|
|
margin: 0;
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s; }
|
|
.nav-item .dropdown-menu > li:hover {
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
background-color: rgba(216, 216, 216, 0.15); }
|
|
.nav-item .dropdown-menu > li:active {
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
background-color: rgba(216, 216, 216, 0.25); }
|
|
.nav-item .dropdown-menu > li:last-child {
|
|
margin-bottom: 0; }
|
|
.nav-item .dropdown-menu .dropdown-menu-divider {
|
|
border: none;
|
|
background-color: rgba(216, 216, 216, 0.15);
|
|
height: 1px;
|
|
margin: 0.5rem 0; }
|
|
.nav-item.has-sub .nav-dropdown-link {
|
|
padding-right: 2.5rem;
|
|
position: relative;
|
|
/* Needed for hiding glyphs in mobile header */
|
|
/* Dropdown menu location adjustment located below for sizes above phones */
|
|
/* Dropdown menu indicator */ }
|
|
.nav-item.has-sub .nav-dropdown-link::after {
|
|
border: 2px solid var(--cirrus-primary);
|
|
/* Must be first to create the triangle shape */
|
|
border-right: 0;
|
|
/* Create the triangle effect */
|
|
border-top: 0;
|
|
display: block;
|
|
height: 0.5em;
|
|
width: 0.5em;
|
|
content: ' ';
|
|
-webkit-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
pointer-events: none;
|
|
margin-top: -0.435em;
|
|
right: 1.125em;
|
|
top: 50%;
|
|
position: absolute; }
|
|
|
|
/* Dark dropdown menu theme */
|
|
.nav-item .dropdown-menu.dropdown-dark,
|
|
.header.header-dark .dropdown-menu {
|
|
background-color: rgba(0, 0, 0, 0.87);
|
|
border: 1px solid #343a40;
|
|
color: #fff; }
|
|
|
|
.dropdown-menu.dropdown-shown,
|
|
.nav-item.active {
|
|
opacity: 1; }
|
|
|
|
@media screen and (min-width: 769px) {
|
|
.header {
|
|
-webkit-box-align: stretch;
|
|
/* Box Align and align items to stretch to make nav-items fill up parent height */
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
/* These styles can also be used on menus in the body */
|
|
/* Align items to the left */
|
|
/* Align items to the right */
|
|
/* Centering items, best used when nav-brand is not used to prevent offset */
|
|
/* Hide hamburger button */
|
|
/* .nav-item {
|
|
position: relative; /* Include for helping dropdown menu positioning Deprecated 0.5.6
|
|
} */ }
|
|
.header .header-nav {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-ms-flex-negative: 0;
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
/* Make items fill up all available space regardless of width https://drafts.csswg.org/css-align/ */
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
position: relative;
|
|
text-align: center;
|
|
width: 100%;
|
|
top: 0;
|
|
overflow: visible;
|
|
/* Only visible for showing dropdown menus, hidden for mobile */ }
|
|
.header .nav-left {
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
-ms-grid-row-align: stretch;
|
|
align-items: stretch;
|
|
-ms-flex-preferred-size: 0;
|
|
flex-basis: 0;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
white-space: nowrap;
|
|
/* Align dropdown menu to the left side of the parent nav-item for header-left */ }
|
|
.header .nav-left .has-sub .dropdown-menu {
|
|
left: 0;
|
|
right: auto; }
|
|
.header .nav-right {
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
-ms-grid-row-align: stretch;
|
|
align-items: stretch;
|
|
-ms-flex-preferred-size: 0;
|
|
flex-basis: 0;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
white-space: nowrap;
|
|
/* Align dropdown menu to the right side of the parent nav-item for header-right */ }
|
|
.header .nav-right .has-sub .dropdown-menu {
|
|
left: auto;
|
|
right: 0; }
|
|
.header .nav-center {
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
margin-left: auto;
|
|
margin-right: auto; }
|
|
.header .nav-btn {
|
|
display: none; }
|
|
.header .nav-item {
|
|
/* Expand link area for desktop views so it is easier to click */ }
|
|
.header .nav-item a {
|
|
padding: 0.5rem 1rem; }
|
|
.header .nav-item .dropdown-menu {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
/* Make cursor not respond to menu links when not displayed */ }
|
|
.header .nav-item .dropdown-menu.dropdown-animated {
|
|
-webkit-transform: translateY(-5px);
|
|
/* Used for transitional drop down effect */
|
|
transform: translateY(-5px); }
|
|
.header .nav-item .dropdown-menu.dropdown-shown,
|
|
.header .nav-item.toggle-hover:hover .dropdown-menu,
|
|
.header .nav-item .dropdown-menu.dropdown-animated.dropdown-shown {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
/* Used for transitional drop down effect */
|
|
transform: none;
|
|
pointer-events: auto; } }
|
|
|
|
@media screen and (max-width: 768px) {
|
|
/* Add scrolling support in header */
|
|
.header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* Hide dropdown menu on mobile */ }
|
|
.header .header-brand .nav-item:first-child {
|
|
padding: 0 1rem;
|
|
/* Add padding to the first child, usually the logo */ }
|
|
.header .header-nav {
|
|
height: 0;
|
|
/* Show the dropdown */
|
|
/* Make the menu items larger in the dropdown menu */
|
|
/* Get rid of extra spaces */ }
|
|
.header .header-nav.active {
|
|
height: 100vh; }
|
|
.header .header-nav .nav-item {
|
|
padding: 1rem; }
|
|
.header .header-nav .nav-item > a {
|
|
padding: 0;
|
|
width: 100%;
|
|
/* Stretch the link to span the entire list item */ }
|
|
/* Remove flex for mobile devices */
|
|
.nav-item.has-sub {
|
|
display: block; }
|
|
.nav-item.has-sub .dropdown-menu {
|
|
/* Hide the menu by default in mobile view (overflow on header-right can expose it) */
|
|
display: none; }
|
|
.nav-item.has-sub .dropdown-menu.dropdown-shown {
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
display: block;
|
|
position: relative;
|
|
top: 1rem;
|
|
float: none;
|
|
border: none;
|
|
background-color: transparent;
|
|
margin-bottom: 1rem; }
|
|
.nav-item.has-sub .dropdown-menu.dropdown-dark {
|
|
background-color: rgba(0, 0, 0, 0.17);
|
|
border: 0; }
|
|
/* Hamburger button */
|
|
.nav-btn {
|
|
cursor: pointer;
|
|
display: block;
|
|
position: relative;
|
|
margin-left: auto;
|
|
/* Hamburger button on active */ }
|
|
.nav-btn span {
|
|
background-color: var(--header-link-color);
|
|
display: block;
|
|
height: 2px;
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
position: absolute;
|
|
top: 50%;
|
|
-webkit-transition: none 86ms ease-out;
|
|
transition: none 86ms ease-out;
|
|
-webkit-transition-property: background, left, opacity, -webkit-transform;
|
|
transition-property: background, left, opacity, -webkit-transform;
|
|
transition-property: background, left, opacity, transform;
|
|
transition-property: background, left, opacity, transform, -webkit-transform;
|
|
width: 15px;
|
|
/* Line spacing in hamburger button */ }
|
|
.nav-btn span:nth-child(1) {
|
|
margin-top: -6px; }
|
|
.nav-btn span:nth-child(2) {
|
|
margin-top: -1px; }
|
|
.nav-btn span:nth-child(3) {
|
|
margin-top: 4px; }
|
|
.nav-btn.active span:nth-child(1) {
|
|
margin-left: -5px;
|
|
transform: rotate(45deg);
|
|
transform-origin: left top; }
|
|
.nav-btn.active span:nth-child(2) {
|
|
opacity: 0; }
|
|
.nav-btn.active span:nth-child(3) {
|
|
margin-left: -5px;
|
|
transform: rotate(-45deg);
|
|
transform-origin: left bottom; }
|
|
/* Hide drop down menu items */
|
|
.nav-left,
|
|
.nav-center,
|
|
.nav-right {
|
|
overflow: hidden; } }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* HEADER */
|
|
/* This works well with panel */
|
|
section {
|
|
display: block; }
|
|
|
|
.content {
|
|
max-width: 60em;
|
|
margin: 0 auto 1.5em;
|
|
width: 80%; }
|
|
|
|
.fullscreen {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 100vh; }
|
|
|
|
/* Deprecated 0.5.6
|
|
// .panel {
|
|
// padding: 2.5em 0;
|
|
// }
|
|
|
|
/* This works well with spans and maybe even hr */
|
|
.divider {
|
|
border-top: 0.05rem solid rgba(173, 181, 189, 0.5);
|
|
height: 0.1rem;
|
|
margin: 1.8rem 0 1.6rem; }
|
|
.divider[data-content] {
|
|
margin: 0.8rem 0; }
|
|
.divider--v[data-content]::after, .divider[data-content]::after {
|
|
background: #fff;
|
|
color: #adb5bd;
|
|
content: attr(data-content);
|
|
left: 50%;
|
|
display: inline-block;
|
|
padding: 0 0.4rem;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
top: 50%; }
|
|
.divider--v[data-content] {
|
|
display: block;
|
|
padding: 0.8rem; }
|
|
.divider--v[data-content]::before {
|
|
border-left: 0.05rem solid rgba(173, 181, 189, 0.5);
|
|
bottom: 0.4rem;
|
|
content: '';
|
|
display: block;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 0;
|
|
transform: translateX(-50%); }
|
|
.divider--v[data-content] {
|
|
left: 50%;
|
|
padding: 0.2rem 0;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%); }
|
|
|
|
/* Hero image div */
|
|
.hero-img {
|
|
/* Specify the backgroud image yourself */
|
|
background-size: cover; }
|
|
|
|
.parallax-img {
|
|
background-attachment: fixed !important; }
|
|
|
|
.hero {
|
|
/* Parent of hero-body */
|
|
-webkit-box-align: stretch;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
/* Important to stretch height of hero-body */
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between; }
|
|
.hero .hero-body {
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
/* Tells the hero-body to take up the entire space */
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
padding: 3rem 1.5rem;
|
|
align-items: center;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
width: 100%; }
|
|
|
|
.space {
|
|
display: block;
|
|
width: 100%;
|
|
height: 1rem; }
|
|
.space.large {
|
|
padding: 1rem 0; }
|
|
.space.xlarge {
|
|
padding: 2rem 0; }
|
|
|
|
/* Use for spacing out elements vertically */
|
|
.row {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 0;
|
|
/* GRID */
|
|
/* Column offsets on the left side */
|
|
/* Auto align col to left in row */
|
|
/* Auto align col to middle in row */
|
|
/* Auto align col to right in row */
|
|
/* Some offset values */
|
|
/* Columns without the spacing */ }
|
|
.row::after {
|
|
content: '';
|
|
clear: both;
|
|
display: table; }
|
|
.row.row--no-wrap {
|
|
-webkit-flex-wrap: nowrap;
|
|
/* Remove wrapping of the columns by default */
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
/* Can be disabled to remove scroll bar */ }
|
|
.row .col {
|
|
display: block;
|
|
flex: 1;
|
|
padding: 0.15rem 0.75rem; }
|
|
.row .col-1 {
|
|
width: 8.33333333%; }
|
|
.row .col-2 {
|
|
width: 16.66666667%; }
|
|
.row .col-3 {
|
|
width: 25%; }
|
|
.row .col-4 {
|
|
width: 33.33333333%; }
|
|
.row .col-5 {
|
|
width: 41.66666667%; }
|
|
.row .col-6 {
|
|
width: 50%; }
|
|
.row .col-7 {
|
|
width: 58.33333333%; }
|
|
.row .col-8 {
|
|
width: 66.66666667%; }
|
|
.row .col-9 {
|
|
width: 75%; }
|
|
.row .col-10 {
|
|
width: 83.33333333%; }
|
|
.row .col-11 {
|
|
width: 91.66666667%; }
|
|
.row .col-12 {
|
|
width: 100%; }
|
|
.row .offset-1 {
|
|
margin-left: 8.33333333%; }
|
|
.row .offset-2 {
|
|
margin-left: 16.66666667%; }
|
|
.row .offset-3 {
|
|
margin-left: 25%; }
|
|
.row .offset-4 {
|
|
margin-left: 33.33333333%; }
|
|
.row .offset-5 {
|
|
margin-left: 41.66666667%; }
|
|
.row .offset-6 {
|
|
margin-left: 50%; }
|
|
.row .offset-7 {
|
|
margin-left: 58.33333333%; }
|
|
.row .offset-8 {
|
|
margin-left: 66.66666667%; }
|
|
.row .offset-9 {
|
|
margin-left: 75%; }
|
|
.row .offset-10 {
|
|
margin-left: 83.33333333%; }
|
|
.row .offset-11 {
|
|
margin-left: 91.66666667%; }
|
|
.row .offset-12 {
|
|
margin-left: 100%; }
|
|
.row .offset-right {
|
|
margin-left: 0;
|
|
margin-right: auto; }
|
|
.row .offset-center {
|
|
margin-left: auto;
|
|
margin-right: auto; }
|
|
.row .offset-left {
|
|
margin-left: auto;
|
|
margin-right: 0; }
|
|
.row [class^='col-'],
|
|
.row [class*=' col-'] {
|
|
float: left;
|
|
/* Keeps the elements in 1 row */
|
|
padding: 0 0.5rem; }
|
|
.row .no-space [class^='col-'],
|
|
.row .no-space [class*=' col-'] {
|
|
padding: 0; }
|
|
|
|
.r {
|
|
/* Legacy row pre 0.5.5 */
|
|
max-width: 100%;
|
|
padding: 0.5rem; }
|
|
|
|
/* Use in parent div of fluid col Deprecated in 0.5.6, use .row
|
|
.fluid-container {
|
|
display: flex;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Wrap controls instead on overflow
|
|
.fluid-container.wrap {
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
display: flex;
|
|
display: -ms-flexbox;
|
|
-ms-flex-align: center;
|
|
-webkit-flex-wrap: wrap;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Resizes elements in a row equally given the number of elements located in it
|
|
.fluid-container .col-fluid {
|
|
display: block;
|
|
-ms-flex-preferred-size: 0;
|
|
flex-basis: 0;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
/* No expansion for specific col-fluid columns
|
|
.fluid-container .col-fluid.no-flex {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
-ms-flex-negative: 0;
|
|
} */
|
|
/* Divider for multiple elements in a div */
|
|
/* .divided > .fluid-container:not(.row),
|
|
.divided > .row [class^="col-"], .divided > .row [class*=" col-"] { DEPRECATED 0.5.5
|
|
box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15);
|
|
} */
|
|
/* Remove border in first child */
|
|
/* .divided > .row [class^="col-"]:first-child,
|
|
.divided > .row [class*=" col-"]:first-child {
|
|
box-shadow: none; DEPRECATED 0.5.5
|
|
} */
|
|
.level {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
/* Used to stretch the contents of div in level to fill */ }
|
|
.level .level-left {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: start;
|
|
-ms-flex-pack: start;
|
|
justify-content: flex-start;
|
|
/* Start for left */
|
|
margin-right: 1rem; }
|
|
.level .level-right {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
/* End for right */ }
|
|
.level .level-item {
|
|
/* Centers items */
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-preferred-size: auto;
|
|
flex-basis: auto;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center; }
|
|
.level .level-content {
|
|
-ms-flex-preferred-size: auto;
|
|
flex-basis: auto;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
text-align: left;
|
|
width: 100%; }
|
|
|
|
/* Width/Height CSS */
|
|
.w-10 {
|
|
width: 10%; }
|
|
|
|
.h-10 {
|
|
height: 10%; }
|
|
|
|
.w-20 {
|
|
width: 20%; }
|
|
|
|
.h-20 {
|
|
height: 20%; }
|
|
|
|
.w-30 {
|
|
width: 30%; }
|
|
|
|
.h-30 {
|
|
height: 30%; }
|
|
|
|
.w-40 {
|
|
width: 40%; }
|
|
|
|
.h-40 {
|
|
height: 40%; }
|
|
|
|
.w-50 {
|
|
width: 50%; }
|
|
|
|
.h-50 {
|
|
height: 50%; }
|
|
|
|
.w-60 {
|
|
width: 60%; }
|
|
|
|
.h-60 {
|
|
height: 60%; }
|
|
|
|
.w-70 {
|
|
width: 70%; }
|
|
|
|
.h-70 {
|
|
height: 70%; }
|
|
|
|
.w-80 {
|
|
width: 80%; }
|
|
|
|
.h-80 {
|
|
height: 80%; }
|
|
|
|
.w-90 {
|
|
width: 90%; }
|
|
|
|
.h-90 {
|
|
height: 90%; }
|
|
|
|
.w-100 {
|
|
width: 100%; }
|
|
|
|
.h-100 {
|
|
height: 100%; }
|
|
|
|
.w-auto {
|
|
width: auto; }
|
|
|
|
.h-auto {
|
|
height: auto; }
|
|
|
|
@media screen and (min-width: 769px) {
|
|
.row {
|
|
display: flex; }
|
|
.level-right {
|
|
margin-left: 1rem; }
|
|
/* Keep all level children the same height */
|
|
.level.fill-height {
|
|
-webkit-box-align: stretch;
|
|
/* Box Align and align items to stretch to make nav-items fill up parent height */
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex; } }
|
|
|
|
/* MOBILE */
|
|
@media screen and (max-width: 768px) {
|
|
.container {
|
|
width: 100%; }
|
|
.row {
|
|
margin-top: 0; }
|
|
.row [class^='col-']:not(.ignore-screen),
|
|
.row [class*=' col-']:not(.ignore-screen) {
|
|
/* Remove the grid structure for smaller screens */
|
|
width: 100%;
|
|
margin-left: 0;
|
|
padding: 0; }
|
|
/* Dividers for mobile layout */
|
|
.divided > .row [class^='col-'],
|
|
.divided > .row [class*=' col-'] {
|
|
box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); }
|
|
.level.ignore-screen,
|
|
.level-left.ignore-screen,
|
|
.level-right.ignore-screen {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex; }
|
|
.level.fill-height {
|
|
display: inherit;
|
|
/* Allow children to expand */ }
|
|
.hero-body {
|
|
padding: 0; } }
|
|
|
|
/* LINKS */
|
|
a {
|
|
color: var(--cirrus-link);
|
|
font-weight: 600;
|
|
padding: 2px;
|
|
text-decoration: none;
|
|
transition: all 0.3s; }
|
|
a:hover {
|
|
color: var(--cirrus-link-dark);
|
|
transition: all 0.3s; }
|
|
a.underline {
|
|
text-decoration: underline; }
|
|
|
|
.subtitle a {
|
|
padding: 0;
|
|
/* Removes weird offset in subtitle links */ }
|
|
|
|
p a,
|
|
h1 a,
|
|
h2 a,
|
|
h3 a,
|
|
h4 a,
|
|
h5 a,
|
|
h6 a,
|
|
blockquote a,
|
|
article a {
|
|
display: inline; }
|
|
|
|
/* Remove uneeded space since buttons have their own padding */
|
|
a .btn,
|
|
a button,
|
|
[type='submit'] a {
|
|
margin-bottom: 0; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* LISTS */
|
|
ul,
|
|
ol {
|
|
margin: 1rem 0 1rem 1rem;
|
|
padding-inline-start: 0.5rem;
|
|
/* Handle nesting */ }
|
|
ul ul,
|
|
ul ol,
|
|
ol ul,
|
|
ol ol {
|
|
margin: 0 0 0 1rem; }
|
|
|
|
ul {
|
|
list-style: disc;
|
|
/* Nested list bullet types */ }
|
|
ul ul {
|
|
list-style-type: circle; }
|
|
ul ul ul {
|
|
list-style-type: square; }
|
|
|
|
ol ol {
|
|
list-style: lower-alpha; }
|
|
|
|
ol ol ol {
|
|
list-style: upper-roman; }
|
|
|
|
/* Description lists */
|
|
dl {
|
|
margin: 1rem 0; }
|
|
|
|
/* Detail title */
|
|
dt {
|
|
font-weight: 700; }
|
|
|
|
dd {
|
|
margin-bottom: 0.5rem; }
|
|
|
|
li {
|
|
margin: 0.25rem 0; }
|
|
|
|
/* MISC */
|
|
ul {
|
|
/* MENU LISTS */
|
|
/* Style headers to have even space distribution. */
|
|
/* Style menu items */
|
|
/* Darken on hover to differentiate from menu-item */
|
|
/* Style sub menus inside a menu */
|
|
/* Menu item divider */
|
|
/* Title for the section separated by the divider */ }
|
|
ul.no-bullets {
|
|
list-style: none; }
|
|
ul.menu {
|
|
font-size: 1rem;
|
|
list-style: none;
|
|
margin: 0.5rem 0; }
|
|
ul .menu-title:not(:first-child) {
|
|
margin-bottom: 1rem; }
|
|
ul .menu-title:not(:last-child) {
|
|
margin-top: 1rem; }
|
|
ul .menu-item a {
|
|
color: #495057;
|
|
display: block;
|
|
padding: 0.5em 0.75em;
|
|
border-radius: 3px;
|
|
font-size: var(--font-size-s);
|
|
cursor: pointer;
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
ul .menu-item:hover > a {
|
|
background-color: rgba(208, 208, 208, 0.3);
|
|
color: var(--cirrus-primary);
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
ul .menu-item.selected > a {
|
|
color: #fff;
|
|
background-color: var(--cirrus-primary); }
|
|
ul .menu-item .menu-addon {
|
|
padding: 0.3rem;
|
|
z-index: 1;
|
|
position: relative;
|
|
color: var(--cirrus-fg);
|
|
cursor: pointer;
|
|
float: left;
|
|
margin-right: 0.1rem;
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
ul .menu-item .menu-addon .icon {
|
|
font-size: inherit; }
|
|
ul .menu-item .menu-addon:hover {
|
|
background-color: rgba(60, 60, 60, 0.25);
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
ul .menu-item .menu-addon.right {
|
|
float: right;
|
|
margin-right: 0;
|
|
margin-left: 0.1rem; }
|
|
ul .menu-item.selected .menu-addon {
|
|
color: #fff; }
|
|
ul .menu-item ul {
|
|
border-left: 1px solid #dee2e6;
|
|
margin: 0.75rem;
|
|
padding-left: 0.75rem; }
|
|
ul li.menu-item:last-child {
|
|
margin-bottom: 0; }
|
|
ul .divider {
|
|
border-top: 0.1rem solid #e9ecef;
|
|
height: 0.1rem;
|
|
margin: 1rem 0; }
|
|
ul .divider::after {
|
|
content: attr(data-label);
|
|
/* Text that will be displayed */
|
|
background-color: var(--cirrus-bg);
|
|
color: #adb5bd;
|
|
display: inline-block;
|
|
padding: 0 0.7rem;
|
|
margin: 0.5rem;
|
|
font-size: 0.7rem;
|
|
-webkit-transform: translateY(-1.1rem);
|
|
transform: translateY(-1.1rem); }
|
|
|
|
/* Dropdown menu for dropdown buttons */
|
|
.list-dropdown {
|
|
display: inline-block;
|
|
position: relative;
|
|
/* Allow for shown and :focus selectors for JS and native CSS transitions */ }
|
|
.list-dropdown .menu {
|
|
position: absolute;
|
|
top: 75%;
|
|
left: 0;
|
|
-webkit-animation: slide-down var(--animation-duration) ease 1;
|
|
animation: slide-down 0.1s ease 1;
|
|
background-color: var(--cirrus-bg);
|
|
border-radius: 0.2rem;
|
|
box-shadow: 0 1rem 3rem rgba(149, 157, 165, 0.3);
|
|
margin: 0;
|
|
opacity: 0;
|
|
min-width: 15rem;
|
|
padding: 0.25rem 0.5rem;
|
|
-webkit-transform: translateY(0.5rem);
|
|
transform: translateY(0.5rem);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
/* Remove pointer events to prevent mouse hover to show menu even though it is not visible */
|
|
overflow: hidden;
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
.list-dropdown .list-dropdown.dropdown-right .menu {
|
|
left: auto;
|
|
right: 0; }
|
|
.list-dropdown .list-dropdown.shown .menu,
|
|
.list-dropdown .btn-dropdown:focus + .menu,
|
|
.list-dropdown .menu:hover {
|
|
display: block;
|
|
opacity: 1;
|
|
top: 100%;
|
|
z-index: 100;
|
|
pointer-events: auto;
|
|
/* Restore pointer events */
|
|
height: auto;
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
.list-dropdown .btn-group .btn-dropdown:nth-last-child(2) {
|
|
border-bottom-right-radius: 3px;
|
|
border-top-right-radius: 3px; }
|
|
|
|
/* TREE */
|
|
/* Tree Navigation Menu */
|
|
.tree {
|
|
margin: 0; }
|
|
.tree .tree-item {
|
|
/* The title of the tree menu */
|
|
/* The dropdown glyph of the tree menu */
|
|
/* Expand the tree-item-body (has menu-items) */
|
|
/* Rotate the dropdown glyph */
|
|
/* Container for the menu-items of the tree menu */ }
|
|
.tree .tree-item .tree-item-header {
|
|
display: block;
|
|
padding: 0.25rem 0.5rem;
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
/* Keep styling consistent with menu-items */ }
|
|
.tree .tree-item .tree-item-header .icon {
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
.tree .tree-item input:checked ~ .tree-item-body {
|
|
max-height: 100vh; }
|
|
.tree .tree-item input:checked ~ .tree-item-header .icon {
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg); }
|
|
.tree .tree-item .tree-item-body {
|
|
max-height: 0;
|
|
/* Hidden at first */
|
|
margin-left: 1.5rem;
|
|
overflow: hidden;
|
|
-webkit-transition: all var(--animation-duration);
|
|
transition: all var(--animation-duration); }
|
|
|
|
/* The body that will encompass the tree-nav and tree-nav-content */
|
|
.tree-nav-body {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
height: 100vh;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
/* A fixed menu on the side with a tree component */
|
|
/* The container for the tree component to prevent it from overflowing */
|
|
/* Darkened area that will close the navbar when clicked for mobile only */
|
|
/* Push document body further right to account for sidebar space */
|
|
/* The body where all other HTML components are entered if a tree-nav is used */ }
|
|
.tree-nav-body .tree-nav {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
padding: 2rem 1rem 2rem 2rem;
|
|
min-width: 15rem;
|
|
height: 100vh;
|
|
overflow: auto; }
|
|
.tree-nav-body .tree-nav-container {
|
|
overflow-y: auto;
|
|
top: 4rem;
|
|
bottom: 1rem; }
|
|
.tree-nav-body + .tree-nav-close {
|
|
display: none;
|
|
/* Not needed in desktop */ }
|
|
.tree-nav-body + .tree-nav-content {
|
|
max-width: 100%;
|
|
padding: 2rem;
|
|
-ms-flex: 1 0 auto;
|
|
-webkit-box-flex: 1;
|
|
flex: 1 0 auto;
|
|
overflow: auto;
|
|
margin: 0; }
|
|
.tree-nav-body .tree-nav-content {
|
|
width: 100%;
|
|
overflow: auto;
|
|
margin: 0;
|
|
padding: 2rem; }
|
|
|
|
@media screen and (max-width: 768px) {
|
|
/* Hide the menu to the side by default */
|
|
.tree-nav {
|
|
height: 100%;
|
|
left: 0;
|
|
overflow-y: auto;
|
|
padding: 3rem 1.5rem;
|
|
position: fixed;
|
|
top: 0;
|
|
-webkit-transform: translateX(-100%);
|
|
transform: translateX(-100%);
|
|
transition: transform var(--animation-duration) ease, -webkit-transform var(--animation-duration) ease;
|
|
-webkit-transition: -webkit-transform var(--animation-duration) ease;
|
|
transition: transform var(--animation-duration) ease;
|
|
transition: -webkit-transform var(--animation-duration) ease;
|
|
z-index: 400;
|
|
/* Open the menu from the side */
|
|
/* Use a link and add the id of this element as the url */
|
|
/* Create the area to click to close the menu */
|
|
/* Reset max-width in mobile */ }
|
|
.tree-nav:target {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
transition: transform var(--animation-duration) ease, -webkit-transform var(--animation-duration) ease;
|
|
-webkit-transition: -webkit-transform var(--animation-duration) ease;
|
|
transition: -webkit-transform var(--animation-duration) ease;
|
|
transition: transform var(--animation-duration) ease;
|
|
/* Show the darkened area when the tree nav menu is clicked */ }
|
|
.tree-nav:target + .tree-nav-close {
|
|
display: block;
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
height: 100%;
|
|
left: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 300; }
|
|
.tree-nav .tree-nav-close {
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
display: none;
|
|
height: 100%;
|
|
left: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 300; }
|
|
.tree-nav + .tree-nav-body {
|
|
max-width: inherit; }
|
|
/* Header bar for mobile websites with the tree-nav */
|
|
.tree-nav-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(248, 249, 250, 0.8);
|
|
height: 3.5rem;
|
|
padding: 0.75rem 0.5rem;
|
|
text-align: center;
|
|
z-index: 300; }
|
|
/* For dropdown menu used in header (different from header dropdown) */
|
|
.nav-item.has-sub .list-dropdown {
|
|
width: 100%; }
|
|
.nav-item.has-sub .list-dropdown .btn-group {
|
|
width: 100%; }
|
|
.nav-item.has-sub .list-dropdown .btn-group .btn-dropdown {
|
|
flex-grow: 0; }
|
|
/* Show the dropdown menu in mobile hamburger menu relative with the header menu */
|
|
.list-dropdown .btn-dropdown:focus + .menu {
|
|
position: relative;
|
|
width: 100%; } }
|
|
|
|
/* MEDIA CSS */
|
|
/* Handles images, videos, figures, etc */
|
|
video.video-fullscreen {
|
|
position: absolute;
|
|
height: 100vh;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
z-index: -1; }
|
|
|
|
/* Add to parent container to make media child fill container */
|
|
.media-stretch {
|
|
display: block;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position: relative;
|
|
/* Add pseudoclass to allow media to have height (default height is 0) */
|
|
/* Force media embed to fill parent container */
|
|
/* Alternate media ratios */
|
|
/* For HTML5 video objects */ }
|
|
.media-stretch::before {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: 56.25%;
|
|
/* 9 / 16 for 16:9 ratio */ }
|
|
.media-stretch iframe,
|
|
.media-stretch embed,
|
|
.media-stretch object {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
/* Make sure media does exceed or go under boundary limit */
|
|
height: 100%; }
|
|
.media-stretch.rat-4-3::before {
|
|
padding-bottom: 75%; }
|
|
.media-stretch.rat-1-1::before {
|
|
padding-bottom: 100%; }
|
|
.media-stretch video {
|
|
height: auto;
|
|
max-width: 100%;
|
|
width: 100%; }
|
|
|
|
/* FIGURES */
|
|
/* For flexible media display */
|
|
.fig {
|
|
margin: 0 0 0.5rem 0;
|
|
/* Small margin at the bottom */ }
|
|
.fig .fig-caption {
|
|
margin-top: 1rem; }
|
|
|
|
/* IMAGES */
|
|
.img-stretch {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block; }
|
|
|
|
.img-cover {
|
|
object-fit: cover; }
|
|
|
|
.img-contain {
|
|
object-fit: contain; }
|
|
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Margin */
|
|
.m-0 {
|
|
margin: calc(var(--space-size) * 0) !important; }
|
|
|
|
.mt-0, .my-0 {
|
|
margin-top: calc(var(--space-size) * 0) !important; }
|
|
|
|
.mb-0, .my-0 {
|
|
margin-bottom: calc(var(--space-size) * 0) !important; }
|
|
|
|
.ml-0, .mx-0 {
|
|
margin-left: calc(var(--space-size) * 0) !important; }
|
|
|
|
.mr-0, .mx-0 {
|
|
margin-right: calc(var(--space-size) * 0) !important; }
|
|
|
|
/* Spacing */
|
|
.p-0 {
|
|
padding: calc(var(--space-size) * 0) !important; }
|
|
|
|
.pt-0, .py-0 {
|
|
padding-top: calc(var(--space-size) * 0) !important; }
|
|
|
|
.pb-0, .py-0 {
|
|
padding-bottom: calc(var(--space-size) * 0) !important; }
|
|
|
|
.pl-0, .px-0 {
|
|
padding-left: calc(var(--space-size) * 0) !important; }
|
|
|
|
.pr-0, .px-0 {
|
|
padding-right: calc(var(--space-size) * 0) !important; }
|
|
|
|
/* Margin */
|
|
.m-1 {
|
|
margin: calc(var(--space-size) * 1) !important; }
|
|
|
|
.mt-1, .my-1 {
|
|
margin-top: calc(var(--space-size) * 1) !important; }
|
|
|
|
.mb-1, .my-1 {
|
|
margin-bottom: calc(var(--space-size) * 1) !important; }
|
|
|
|
.ml-1, .mx-1 {
|
|
margin-left: calc(var(--space-size) * 1) !important; }
|
|
|
|
.mr-1, .mx-1 {
|
|
margin-right: calc(var(--space-size) * 1) !important; }
|
|
|
|
/* Spacing */
|
|
.p-1 {
|
|
padding: calc(var(--space-size) * 1) !important; }
|
|
|
|
.pt-1, .py-1 {
|
|
padding-top: calc(var(--space-size) * 1) !important; }
|
|
|
|
.pb-1, .py-1 {
|
|
padding-bottom: calc(var(--space-size) * 1) !important; }
|
|
|
|
.pl-1, .px-1 {
|
|
padding-left: calc(var(--space-size) * 1) !important; }
|
|
|
|
.pr-1, .px-1 {
|
|
padding-right: calc(var(--space-size) * 1) !important; }
|
|
|
|
/* Margin */
|
|
.m-2 {
|
|
margin: calc(var(--space-size) * 2) !important; }
|
|
|
|
.mt-2, .my-2 {
|
|
margin-top: calc(var(--space-size) * 2) !important; }
|
|
|
|
.mb-2, .my-2 {
|
|
margin-bottom: calc(var(--space-size) * 2) !important; }
|
|
|
|
.ml-2, .mx-2 {
|
|
margin-left: calc(var(--space-size) * 2) !important; }
|
|
|
|
.mr-2, .mx-2 {
|
|
margin-right: calc(var(--space-size) * 2) !important; }
|
|
|
|
/* Spacing */
|
|
.p-2 {
|
|
padding: calc(var(--space-size) * 2) !important; }
|
|
|
|
.pt-2, .py-2 {
|
|
padding-top: calc(var(--space-size) * 2) !important; }
|
|
|
|
.pb-2, .py-2 {
|
|
padding-bottom: calc(var(--space-size) * 2) !important; }
|
|
|
|
.pl-2, .px-2 {
|
|
padding-left: calc(var(--space-size) * 2) !important; }
|
|
|
|
.pr-2, .px-2 {
|
|
padding-right: calc(var(--space-size) * 2) !important; }
|
|
|
|
/* Margin */
|
|
.m-3 {
|
|
margin: calc(var(--space-size) * 3) !important; }
|
|
|
|
.mt-3, .my-3 {
|
|
margin-top: calc(var(--space-size) * 3) !important; }
|
|
|
|
.mb-3, .my-3 {
|
|
margin-bottom: calc(var(--space-size) * 3) !important; }
|
|
|
|
.ml-3, .mx-3 {
|
|
margin-left: calc(var(--space-size) * 3) !important; }
|
|
|
|
.mr-3, .mx-3 {
|
|
margin-right: calc(var(--space-size) * 3) !important; }
|
|
|
|
/* Spacing */
|
|
.p-3 {
|
|
padding: calc(var(--space-size) * 3) !important; }
|
|
|
|
.pt-3, .py-3 {
|
|
padding-top: calc(var(--space-size) * 3) !important; }
|
|
|
|
.pb-3, .py-3 {
|
|
padding-bottom: calc(var(--space-size) * 3) !important; }
|
|
|
|
.pl-3, .px-3 {
|
|
padding-left: calc(var(--space-size) * 3) !important; }
|
|
|
|
.pr-3, .px-3 {
|
|
padding-right: calc(var(--space-size) * 3) !important; }
|
|
|
|
/* Margin */
|
|
.m-4 {
|
|
margin: calc(var(--space-size) * 4) !important; }
|
|
|
|
.mt-4, .my-4 {
|
|
margin-top: calc(var(--space-size) * 4) !important; }
|
|
|
|
.mb-4, .my-4 {
|
|
margin-bottom: calc(var(--space-size) * 4) !important; }
|
|
|
|
.ml-4, .mx-4 {
|
|
margin-left: calc(var(--space-size) * 4) !important; }
|
|
|
|
.mr-4, .mx-4 {
|
|
margin-right: calc(var(--space-size) * 4) !important; }
|
|
|
|
/* Spacing */
|
|
.p-4 {
|
|
padding: calc(var(--space-size) * 4) !important; }
|
|
|
|
.pt-4, .py-4 {
|
|
padding-top: calc(var(--space-size) * 4) !important; }
|
|
|
|
.pb-4, .py-4 {
|
|
padding-bottom: calc(var(--space-size) * 4) !important; }
|
|
|
|
.pl-4, .px-4 {
|
|
padding-left: calc(var(--space-size) * 4) !important; }
|
|
|
|
.pr-4, .px-4 {
|
|
padding-right: calc(var(--space-size) * 4) !important; }
|
|
|
|
/* Margin */
|
|
.m-5 {
|
|
margin: calc(var(--space-size) * 5) !important; }
|
|
|
|
.mt-5, .my-5 {
|
|
margin-top: calc(var(--space-size) * 5) !important; }
|
|
|
|
.mb-5, .my-5 {
|
|
margin-bottom: calc(var(--space-size) * 5) !important; }
|
|
|
|
.ml-5, .mx-5 {
|
|
margin-left: calc(var(--space-size) * 5) !important; }
|
|
|
|
.mr-5, .mx-5 {
|
|
margin-right: calc(var(--space-size) * 5) !important; }
|
|
|
|
/* Spacing */
|
|
.p-5 {
|
|
padding: calc(var(--space-size) * 5) !important; }
|
|
|
|
.pt-5, .py-5 {
|
|
padding-top: calc(var(--space-size) * 5) !important; }
|
|
|
|
.pb-5, .py-5 {
|
|
padding-bottom: calc(var(--space-size) * 5) !important; }
|
|
|
|
.pl-5, .px-5 {
|
|
padding-left: calc(var(--space-size) * 5) !important; }
|
|
|
|
.pr-5, .px-5 {
|
|
padding-right: calc(var(--space-size) * 5) !important; }
|
|
|
|
/* Margin */
|
|
.m-6 {
|
|
margin: calc(var(--space-size) * 6) !important; }
|
|
|
|
.mt-6, .my-6 {
|
|
margin-top: calc(var(--space-size) * 6) !important; }
|
|
|
|
.mb-6, .my-6 {
|
|
margin-bottom: calc(var(--space-size) * 6) !important; }
|
|
|
|
.ml-6, .mx-6 {
|
|
margin-left: calc(var(--space-size) * 6) !important; }
|
|
|
|
.mr-6, .mx-6 {
|
|
margin-right: calc(var(--space-size) * 6) !important; }
|
|
|
|
/* Spacing */
|
|
.p-6 {
|
|
padding: calc(var(--space-size) * 6) !important; }
|
|
|
|
.pt-6, .py-6 {
|
|
padding-top: calc(var(--space-size) * 6) !important; }
|
|
|
|
.pb-6, .py-6 {
|
|
padding-bottom: calc(var(--space-size) * 6) !important; }
|
|
|
|
.pl-6, .px-6 {
|
|
padding-left: calc(var(--space-size) * 6) !important; }
|
|
|
|
.pr-6, .px-6 {
|
|
padding-right: calc(var(--space-size) * 6) !important; }
|
|
|
|
/* Margin */
|
|
.m-8 {
|
|
margin: calc(var(--space-size) * 8) !important; }
|
|
|
|
.mt-8, .my-8 {
|
|
margin-top: calc(var(--space-size) * 8) !important; }
|
|
|
|
.mb-8, .my-8 {
|
|
margin-bottom: calc(var(--space-size) * 8) !important; }
|
|
|
|
.ml-8, .mx-8 {
|
|
margin-left: calc(var(--space-size) * 8) !important; }
|
|
|
|
.mr-8, .mx-8 {
|
|
margin-right: calc(var(--space-size) * 8) !important; }
|
|
|
|
/* Spacing */
|
|
.p-8 {
|
|
padding: calc(var(--space-size) * 8) !important; }
|
|
|
|
.pt-8, .py-8 {
|
|
padding-top: calc(var(--space-size) * 8) !important; }
|
|
|
|
.pb-8, .py-8 {
|
|
padding-bottom: calc(var(--space-size) * 8) !important; }
|
|
|
|
.pl-8, .px-8 {
|
|
padding-left: calc(var(--space-size) * 8) !important; }
|
|
|
|
.pr-8, .px-8 {
|
|
padding-right: calc(var(--space-size) * 8) !important; }
|
|
|
|
/* Margin */
|
|
.m-10 {
|
|
margin: calc(var(--space-size) * 10) !important; }
|
|
|
|
.mt-10, .my-10 {
|
|
margin-top: calc(var(--space-size) * 10) !important; }
|
|
|
|
.mb-10, .my-10 {
|
|
margin-bottom: calc(var(--space-size) * 10) !important; }
|
|
|
|
.ml-10, .mx-10 {
|
|
margin-left: calc(var(--space-size) * 10) !important; }
|
|
|
|
.mr-10, .mx-10 {
|
|
margin-right: calc(var(--space-size) * 10) !important; }
|
|
|
|
/* Spacing */
|
|
.p-10 {
|
|
padding: calc(var(--space-size) * 10) !important; }
|
|
|
|
.pt-10, .py-10 {
|
|
padding-top: calc(var(--space-size) * 10) !important; }
|
|
|
|
.pb-10, .py-10 {
|
|
padding-bottom: calc(var(--space-size) * 10) !important; }
|
|
|
|
.pl-10, .px-10 {
|
|
padding-left: calc(var(--space-size) * 10) !important; }
|
|
|
|
.pr-10, .px-10 {
|
|
padding-right: calc(var(--space-size) * 10) !important; }
|
|
|
|
/* Margin */
|
|
.m-12 {
|
|
margin: calc(var(--space-size) * 12) !important; }
|
|
|
|
.mt-12, .my-12 {
|
|
margin-top: calc(var(--space-size) * 12) !important; }
|
|
|
|
.mb-12, .my-12 {
|
|
margin-bottom: calc(var(--space-size) * 12) !important; }
|
|
|
|
.ml-12, .mx-12 {
|
|
margin-left: calc(var(--space-size) * 12) !important; }
|
|
|
|
.mr-12, .mx-12 {
|
|
margin-right: calc(var(--space-size) * 12) !important; }
|
|
|
|
/* Spacing */
|
|
.p-12 {
|
|
padding: calc(var(--space-size) * 12) !important; }
|
|
|
|
.pt-12, .py-12 {
|
|
padding-top: calc(var(--space-size) * 12) !important; }
|
|
|
|
.pb-12, .py-12 {
|
|
padding-bottom: calc(var(--space-size) * 12) !important; }
|
|
|
|
.pl-12, .px-12 {
|
|
padding-left: calc(var(--space-size) * 12) !important; }
|
|
|
|
.pr-12, .px-12 {
|
|
padding-right: calc(var(--space-size) * 12) !important; }
|
|
|
|
/* Margin */
|
|
.m-16 {
|
|
margin: calc(var(--space-size) * 16) !important; }
|
|
|
|
.mt-16, .my-16 {
|
|
margin-top: calc(var(--space-size) * 16) !important; }
|
|
|
|
.mb-16, .my-16 {
|
|
margin-bottom: calc(var(--space-size) * 16) !important; }
|
|
|
|
.ml-16, .mx-16 {
|
|
margin-left: calc(var(--space-size) * 16) !important; }
|
|
|
|
.mr-16, .mx-16 {
|
|
margin-right: calc(var(--space-size) * 16) !important; }
|
|
|
|
/* Spacing */
|
|
.p-16 {
|
|
padding: calc(var(--space-size) * 16) !important; }
|
|
|
|
.pt-16, .py-16 {
|
|
padding-top: calc(var(--space-size) * 16) !important; }
|
|
|
|
.pb-16, .py-16 {
|
|
padding-bottom: calc(var(--space-size) * 16) !important; }
|
|
|
|
.pl-16, .px-16 {
|
|
padding-left: calc(var(--space-size) * 16) !important; }
|
|
|
|
.pr-16, .px-16 {
|
|
padding-right: calc(var(--space-size) * 16) !important; }
|
|
|
|
/* Margin */
|
|
.m-20 {
|
|
margin: calc(var(--space-size) * 20) !important; }
|
|
|
|
.mt-20, .my-20 {
|
|
margin-top: calc(var(--space-size) * 20) !important; }
|
|
|
|
.mb-20, .my-20 {
|
|
margin-bottom: calc(var(--space-size) * 20) !important; }
|
|
|
|
.ml-20, .mx-20 {
|
|
margin-left: calc(var(--space-size) * 20) !important; }
|
|
|
|
.mr-20, .mx-20 {
|
|
margin-right: calc(var(--space-size) * 20) !important; }
|
|
|
|
/* Spacing */
|
|
.p-20 {
|
|
padding: calc(var(--space-size) * 20) !important; }
|
|
|
|
.pt-20, .py-20 {
|
|
padding-top: calc(var(--space-size) * 20) !important; }
|
|
|
|
.pb-20, .py-20 {
|
|
padding-bottom: calc(var(--space-size) * 20) !important; }
|
|
|
|
.pl-20, .px-20 {
|
|
padding-left: calc(var(--space-size) * 20) !important; }
|
|
|
|
.pr-20, .px-20 {
|
|
padding-right: calc(var(--space-size) * 20) !important; }
|
|
|
|
/* Margin */
|
|
.m-24 {
|
|
margin: calc(var(--space-size) * 24) !important; }
|
|
|
|
.mt-24, .my-24 {
|
|
margin-top: calc(var(--space-size) * 24) !important; }
|
|
|
|
.mb-24, .my-24 {
|
|
margin-bottom: calc(var(--space-size) * 24) !important; }
|
|
|
|
.ml-24, .mx-24 {
|
|
margin-left: calc(var(--space-size) * 24) !important; }
|
|
|
|
.mr-24, .mx-24 {
|
|
margin-right: calc(var(--space-size) * 24) !important; }
|
|
|
|
/* Spacing */
|
|
.p-24 {
|
|
padding: calc(var(--space-size) * 24) !important; }
|
|
|
|
.pt-24, .py-24 {
|
|
padding-top: calc(var(--space-size) * 24) !important; }
|
|
|
|
.pb-24, .py-24 {
|
|
padding-bottom: calc(var(--space-size) * 24) !important; }
|
|
|
|
.pl-24, .px-24 {
|
|
padding-left: calc(var(--space-size) * 24) !important; }
|
|
|
|
.pr-24, .px-24 {
|
|
padding-right: calc(var(--space-size) * 24) !important; }
|
|
|
|
/* Margin */
|
|
.m-32 {
|
|
margin: calc(var(--space-size) * 32) !important; }
|
|
|
|
.mt-32, .my-32 {
|
|
margin-top: calc(var(--space-size) * 32) !important; }
|
|
|
|
.mb-32, .my-32 {
|
|
margin-bottom: calc(var(--space-size) * 32) !important; }
|
|
|
|
.ml-32, .mx-32 {
|
|
margin-left: calc(var(--space-size) * 32) !important; }
|
|
|
|
.mr-32, .mx-32 {
|
|
margin-right: calc(var(--space-size) * 32) !important; }
|
|
|
|
/* Spacing */
|
|
.p-32 {
|
|
padding: calc(var(--space-size) * 32) !important; }
|
|
|
|
.pt-32, .py-32 {
|
|
padding-top: calc(var(--space-size) * 32) !important; }
|
|
|
|
.pb-32, .py-32 {
|
|
padding-bottom: calc(var(--space-size) * 32) !important; }
|
|
|
|
.pl-32, .px-32 {
|
|
padding-left: calc(var(--space-size) * 32) !important; }
|
|
|
|
.pr-32, .px-32 {
|
|
padding-right: calc(var(--space-size) * 32) !important; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* TABLE */
|
|
.table {
|
|
margin-bottom: 1.5rem;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
/* Allows us to set 0 margin in table cells */
|
|
border-spacing: 0;
|
|
text-align: center;
|
|
/* Text center by default */
|
|
/* Thicker border for table header */
|
|
/* CUSTOM STYLES */
|
|
/* All borders */
|
|
/* Striped table */
|
|
/* Decrease padding */
|
|
/* Fixed title table */
|
|
/* Borderless Table (for inner cells) */ }
|
|
.table td,
|
|
.table th {
|
|
border: 1px solid rgba(222, 226, 230, 0.5);
|
|
border-width: 0 0 1px;
|
|
padding: 0.75rem;
|
|
vertical-align: top;
|
|
text-align: inherit;
|
|
margin: 0; }
|
|
.table tr {
|
|
transition: all 0.3s; }
|
|
.table tr.selected {
|
|
/* Style a selected row */
|
|
background-color: var(--cirrus-primary);
|
|
color: #fff; }
|
|
.table .table caption {
|
|
padding-top: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
color: #dee2e6;
|
|
text-align: left;
|
|
caption-side: bottom; }
|
|
.table tr:not(.selected):hover,
|
|
.table.striped tbody tr:not(.selected):nth-child(even):hover {
|
|
background-color: rgba(222, 226, 230, 0.15); }
|
|
.table thead th,
|
|
.table thead {
|
|
border-bottom: 2px solid rgba(222, 226, 230, 0.5); }
|
|
.table thead th,
|
|
.table tfoot th {
|
|
padding: 1rem; }
|
|
.table tfoot th {
|
|
border-top: 2px solid rgba(222, 226, 230, 0.5);
|
|
border-bottom: none; }
|
|
.table.bordered thead th,
|
|
.table.bordered thead {
|
|
border-bottom: 1px solid rgba(222, 226, 230, 0.5); }
|
|
.table.bordered td,
|
|
.table.bordered th {
|
|
border: 1px solid rgba(219, 219, 219, 0.5); }
|
|
.table.bordered thead td,
|
|
.table.bordered thead {
|
|
border-width: 1px; }
|
|
.table.striped tbody tr:nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.05); }
|
|
.table.small td,
|
|
.table.small th {
|
|
padding: 0.25rem 0.75rem; }
|
|
.table.fixed-head thead {
|
|
position: relative;
|
|
display: block; }
|
|
.table.fixed-head tbody {
|
|
height: 200px;
|
|
/* Set the height you want */
|
|
display: block;
|
|
/* Needed */
|
|
overflow: auto;
|
|
/* Shows scrollbars */ }
|
|
.table.fixed-head tr {
|
|
display: table;
|
|
width: 100%;
|
|
/* Forces row to span container */ }
|
|
.table.borderless thead th,
|
|
.table.borderless th,
|
|
.table.borderless td {
|
|
border: none; }
|
|
|
|
/*
|
|
Functions
|
|
*/
|
|
/*
|
|
Converts a given hex value to RGB.
|
|
*/
|
|
/* Spacing */
|
|
/* Fonts */
|
|
/* Media Queries */
|
|
/* Color scheme for Cirrus */
|
|
/* v2 Colors */
|
|
:root {
|
|
/* v1 Colors */
|
|
--cirrus-fg: #374054;
|
|
--cirrus-bg: #fff;
|
|
--cirrus-primary: #f03d4d;
|
|
--cirrus-primary-rgb: 240, 61, 77;
|
|
--cirrus-primary-light: #ffdadd;
|
|
--cirrus-accent-hover: #d62939;
|
|
--cirrus-accent-border: #c21b2b;
|
|
--cirrus-light: #f6f9fc;
|
|
--cirrus-light-gray: #f8f9fa;
|
|
--cirrus-gray: #d5d7dc;
|
|
--cirrus-dark-gray: #909090;
|
|
--cirrus-dark: #363636;
|
|
--cirrus-link: #5e5cc7;
|
|
--cirrus-link-dark: #4643e2;
|
|
--cirrus-info: #2972fa;
|
|
--cirrus-success: #0dd157;
|
|
--cirrus-success-rgb: 13, 209, 87;
|
|
--cirrus-warning: #fab633;
|
|
--cirrus-danger: #fb4143;
|
|
--cirrus-light-hover: #d0e0ef;
|
|
--cirrus-dark-hover: #505050;
|
|
--cirrus-info-hover: #1062f9;
|
|
--cirrus-link-hover: #f8f7ff;
|
|
--cirrus-success-hover: #0cb94d;
|
|
--cirrus-warning-hover: #f9ad1a;
|
|
--cirrus-danger-hover: #eb0507;
|
|
--cirrus-select-bg: rgba(0, 161, 255, 0.2);
|
|
--cirrus-code-bg: var(--cirrus-primary-light);
|
|
--cirrus-code-fg: #dc4753;
|
|
--cirrus-form-group-bg: var(--cirrus-light-gray);
|
|
--cirrus-form-group-fg: var(--cirrus-dark-gray);
|
|
--toast-primary-bg: rgba(49, 59, 80, 0.9);
|
|
--animation-duration: 0.2s;
|
|
--focus-opacity: 0.55;
|
|
--space-size: 0.5rem;
|
|
--font-size-xs: 0.7rem;
|
|
--font-size-s: 0.85rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.35rem;
|
|
--font-size-xl: 1.75rem; }
|
|
|
|
/* UTILS */
|
|
/* Utility classes to help solve some very annoying issues */
|
|
.u-hidden {
|
|
display: none !important; }
|
|
|
|
.u-block {
|
|
display: block !important; }
|
|
|
|
.u-inline {
|
|
display: inline !important; }
|
|
|
|
.u-inline-block {
|
|
display: inline-block !important; }
|
|
|
|
.u-flex {
|
|
display: flex !important; }
|
|
|
|
.u-flex.u-flex-column {
|
|
flex-direction: column !important; }
|
|
|
|
.u-flex.u-flex-row {
|
|
flex-direction: row !important; }
|
|
|
|
.u-inline-flex {
|
|
display: -ms-inline-flexbox !important;
|
|
display: inline-flex !important; }
|
|
|
|
.u-table {
|
|
display: table !important; }
|
|
|
|
.u-table-row {
|
|
display: table-row !important; }
|
|
|
|
.u-position-static {
|
|
position: static !important; }
|
|
|
|
.u-position-relative {
|
|
position: relative !important; }
|
|
|
|
.u-position-absolute {
|
|
position: absolute !important; }
|
|
|
|
.u-position-fixed {
|
|
position: fixed !important; }
|
|
|
|
.u-position-sticky {
|
|
position: sticky !important; }
|
|
|
|
/*
|
|
When using floats, clearfix allows the container to automatically resize so that
|
|
other elements are not blocked by children.
|
|
*/
|
|
.u-clearfix:after {
|
|
clear: both !important;
|
|
content: ' ';
|
|
display: table !important; }
|
|
|
|
/* This is mainly to keep elements from overlapping when using floats */
|
|
.u-clear-left {
|
|
clear: left !important; }
|
|
|
|
.u-clear-right {
|
|
clear: right !important; }
|
|
|
|
.u-clear-both {
|
|
clear: both !important; }
|
|
|
|
.u-pull-left {
|
|
float: left !important; }
|
|
|
|
.u-pull-right {
|
|
float: right !important; }
|
|
|
|
.u-text-center {
|
|
text-align: center !important; }
|
|
|
|
.u-text-justify {
|
|
text-align: justify !important; }
|
|
|
|
.u-text-ellipsis {
|
|
text-overflow: ellipsis; }
|
|
|
|
.u-text-break {
|
|
hyphens: auto;
|
|
word-break: break-word;
|
|
word-wrap: break-word; }
|
|
|
|
/* Center element - best used for hero bodies or text */
|
|
.u-center {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
flex-wrap: wrap; }
|
|
|
|
.u-center-alt,
|
|
.u-center-alt:hover,
|
|
.u-center-alt:active {
|
|
/* If flexbox method fails, this works for elements with unknown dimensions */
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%); }
|
|
|
|
.u-vertical-center {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
vertical-align: middle; }
|
|
|
|
.u-horizontal-center {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center; }
|
|
|
|
.u-overlay {
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
position: absolute; }
|
|
|
|
.u-hide-overflow {
|
|
overflow: hidden !important;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden; }
|
|
|
|
.u-text-center {
|
|
text-align: center !important; }
|
|
|
|
.u-text-left {
|
|
text-align: left !important; }
|
|
|
|
.u-text-right {
|
|
text-align: right !important; }
|
|
|
|
.u-hide {
|
|
display: none !important; }
|
|
|
|
.u-disabled {
|
|
cursor: not-allowed !important; }
|
|
|
|
.u-unselectable {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none; }
|
|
|
|
/* Deprecated 0.5.6 */
|
|
/* .u-box {
|
|
background-color: white;
|
|
border-radius: 3px;
|
|
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
|
display: block;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.u-box:not(:last-child) {
|
|
margin-bottom: 1rem;
|
|
} */
|
|
/* Deprecated 0.5.6 */
|
|
/* .u-fill-width {
|
|
width: 100% !important;
|
|
} */
|
|
/* Deprecated 0.5.6 */
|
|
/*
|
|
.u-no-margin {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.u-no-padding {
|
|
padding: 0 !important;
|
|
}
|
|
*/
|
|
.u-margin-auto {
|
|
margin: 0 auto !important; }
|
|
|
|
/* Round the corners of the element */
|
|
.u-round {
|
|
border-radius: 0.1rem; }
|
|
|
|
/* Turns element into a circle */
|
|
.u-circle {
|
|
border-radius: 50%; }
|
|
|
|
/* Remove outline or drop shadow when element is focused */
|
|
.u-no-shadow {
|
|
box-shadow: none; }
|
|
|
|
/* Responsiveness and Element Hiding */
|
|
/* Do the actual balancing only on larger screens */
|
|
@media screen and (min-width: 769px) {
|
|
.level,
|
|
.level-left,
|
|
.level-right {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex; } }
|
|
|
|
/* Hide elements based on screen size */
|
|
@media screen and (max-width: 768px) {
|
|
.u-hide-mobile {
|
|
display: none !important; } }
|
|
|
|
@media screen and (min-width: 768px) {
|
|
/* Hide on devices that are tablets or larger */
|
|
.u-hide-tablet {
|
|
display: none !important; } }
|
|
|
|
@media screen and (min-width: 769px) and (max-width: 1023px) {
|
|
.u-hide-tablet-only {
|
|
display: none !important; } }
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
/* Hide element on laptops, desktops, etc */
|
|
.u-hide-desktop {
|
|
display: none !important; } }
|