/ *
* 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 */
/* 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 , 59 , 68 , 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 , 59 , 68 , 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 ; }
/* PAGINATION */
/* Parent contianer for page navigation */
. pagination {
display : flex ;
display : -ms-flexbox ; }
/* Use for the major pagination meant to display about 2 items */
. pagination-item {
-webkit-flex : 1 0 50 % ;
/* Flex to fill */
-ms-flex : 1 0 50 % ;
flex : 1 0 50 % ; }
. pagination a {
color : # 5d6c7b ; }
. pagination . pagination-item a [ disabled ] {
cursor : pointer ;
opacity : 0 . 5 ;
pointer-events : none ;
user-select : none ; }
. pagination . pagination-item {
margin : 1rem 0 . 1rem ;
transition : all 0 . 3s ; }
. pagination . pagination-item . pagination-next {
text-align : right ; }
. pagination . pagination-item . pagination-prev {
text-align : left ; }
/* Pagination Item */
. pagination-item-subtitle {
opacity : 0 . 7 ;
margin : 0 ;
/* Needed to override style after formatting paragraph update */ }
/* Color the selected pagination item with accent color */
. pagination . pagination-item . short . selected {
background-color : var ( --cirrus-primary ) ;
color : # fff ; }
. pagination . pagination-item . short . selected a {
color : # fff ; }
. pagination . pagination-item . short a {
display : inline-block ;
line-height : 1 . 25 ;
padding : 0 . 5rem 0 . 75rem ; }
/* Used to display many pagination items */
. pagination . pagination-item . short {
border-radius : 0 . 1rem ;
margin : 0 . 2rem 0 ;
-webkit-flex : 0 ;
/* Flex to fill */
-ms-flex : 0 ;
flex : 0 ; }
. pagination . pagination-item . short : first-child a {
border-top-left-radius : . 25rem ;
border-bottom-left-radius : . 25rem ; }
. pagination . pagination-item . short : last-child a {
border-top-right-radius : . 25rem ;
border-bottom-right-radius : . 25rem ; }
. pagination . pagination-item . short : not ( . selected ) : hover {
background-color : rgba ( 0 , 0 , 0 , 0 . 1 ) ; }
. pagnation . pagination-item . ellipses {
color : # b5b5b5 ;
pointer-events : none ; }
/* Bordered pagination */
. pagination . pagination-bordered . pagination-item . short a {
border : 1px solid # dedede ;
border-radius : 0 ;
margin-left : -1px ; }
/* Not good but CSS does not have heading selectors. Need to move to SASS */
. 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 ,
. pagination . pagination-item : not ( . selected ) : hover * : not ( [ disabled ] ) : not ( . ellipses ) {
transition : all 0 . 3s ;
color : var ( --cirrus-primary ) ; }
/* 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-" ] { D E P R E C A T E D 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 ; } }