Sass Variables

Customize the framework with predefined variables


Global variables

These variables are used throughout the entire OrbitCSS framework.

VariableTypeDefault value
$font-baseunits16
$small-maxunits767px
$mediumunits768px
$largeunits922px
$x-largeunits1200px
$theme-font-colorcolorhsl(0deg, 0%, 22%, 1)
$theme-background-colorcolorhsl(0deg, 0%, 100%, 1)
$body-font-familyfont-family'Roboto', sans-serif
$body-font-sizeunits1rem
$body-font-weightunitless400
$body-line-heightunitless1.6
$hr-colorcolorhsl(32deg, 12%, 92%, 1)
$hr-heightunits0.125rem
$hr-marginmargin1.25rem 0

Color palette

The color variables make up the OrbitCSS default color palette.

The $custom-palette variable can extend the existing palette without having to redeclare all of the palettes' default values.

$custom-palette: (
  orange: #e28945
);
Copy

VariableTypeDefault value
$primarycolor#6e45e2
$secondarycolor#ff5e82
$warningcolor#ffdd57
$infocolor#bfd9fe
$dangercolor#ff2b56
$successcolor#00e3ae
$blackcolor#393939
$darkcolor#304352
$nightcolor#4e4376
$whitecolor#ffffff
$lightcolor#eef1f5
$light-greycolor#d7d2cc
$dark-greycolor#616161
$linkcolor#495aff
$disabledcolor#f7f7f7
$mutedcolorlighten($dark-grey, 35%)
$custom-palettemap(empty)
$color-palettemap(
"primary": $primary,
"secondary": $secondary
"warning": $warning,
"info": $info,
"danger": $danger,
"success": $success,
"black": $black,
"dark": $dark,
"night": $night,
"white": $white,
"light": $light,
"light-grey": $light-grey,
"dark-grey": $dark-grey,
)

Typography


VariableTypeDefault value
$list-style-typestringdisc
$list-margin-leftunits1.25rem
$list-margin-topunits1rem
$list-item-paddingunits0
$heading-font-familyfont-familyLato, sans-serif
$heading-font-weightunitless600
$heading-line-heightunitless1.4
$heading-margin-bottomunits0.45rem
$heading-colorcolorinherit
$subheading-margin-bottomunits16px
$subheading-margin-topunits-0.4rem
$subheading-font-weightunitless400
$subheading-line-heightunitless1.4
$subheading-colorcolorhsl(0deg, 0%, 51%, 1)
$blockquote-border-colorcolorhsl(0deg, 0%, 83%, 1)
$blockquote-border-widthunits1px
$blockquote-colorcolorhsl(0deg, 0%, 22%, 1)
$blockquote-marginmargin1rem 0 0
$blockquote-paddingpadding0.5rem 0 0.5rem 1.25rem
$cite-font-sizeunits0.8125rem
$cite-colorcolorhsl(0deg, 0%, 22%, 1)
$abbr-border-colorcolorhsl(0deg, 0%, 22%, 1)
$heading-sizemap(
"h1": 2.875rem,
"h2": 2.5rem,
"h3": 1.875rem,
"h4": 1.5rem,
"h5": 1.25rem,
"h6": 1rem
)

Layout


VariableTypeDefault value
$container-paddingpadding20px
$container-max-widthunits1200px
$section-paddingpadding6rem 1rem
$section-padding-smallpadding3rem 1rem
$section-padding-largepadding12rem 1rem
$col-paddingunits0.625rem
$col-margin-topunits0.5rem
$col-margin-bottomunits0.5rem
$max-colsinteger12
$grid-sizeslist'one-quarter' 25%,
'half' 50%,
'three-quarters' 75%,
'one-third' 33.333333%,
'two-thirds' 66.666666%,
'full' 100%,
'one-fifth' 20%,
'two-fifths' 40%,
'three-fifths' 60%
'four-fifths' 80%
$hero-paddingpadding4rem 1.5rem
$hero-sizeslist'medium' 9rem 1.5rem,
'large' 16rem 1.5rem
$hero-background-colorcolorhsl(0deg, 0%, 100%, 1)
$hero-colorcolorhsl(0deg, 0%, 22%, 1)

Form


VariableTypeDefault value
$input-background-colorcolorhsl(0deg, 0%, 100%, 1)
$input-border-colorcolorhsl(0deg, 0%, 86%, 1)
$input-border-widthunits1px
$input-border-radiusunits0
$input-colorcolorhsl(0deg, 0%, 22%, 1)
$input-shadowbox-shadowinset 0 1px 2px hsl(0deg, 0%, 4%, 0.1)
$input-font-sizeunits1rem
$input-line-heightunitless1.5
$input-paddingunits0.5rem
$input-focus-bordercolorhsl(215, 97%, 87%, 1)
$input-focus-shadowbox-shadow0 0 0 0.125em hsl(217deg, 70%, 53%, 0.25)
$input-disabled-backgroundcolorhsl(0deg, 0%, 97%, 1)
$input-disabled-bordercolorhsl(0deg, 0%, 97%, 1)
$input-disabled-colorcolorhsl(0deg, 0%, 73%, 1)
$input-error-backgroundcolorhsl(348deg, 100%, 58%, 0.2)
$input-error-colorcolorhsl(0deg, 0%, 22%, 1)
$input-error-border-colorcolorhsl(347deg, 100%, 58%, 1)
$select-arrow-colorcolorhsl(232deg, 100%, 72%, 1)
$select-arrow-widthunits0.625em
$select-paddingunits0.5rem
$select-multiple-paddingpadding.5rem 1rem
$select-loading-speedseconds.8s
$select-loading-widthunits2px
$select-loading-colorcolorhsl(32deg, 12%, 82%, 1)
$label-font-weightunitless600
$label-bottom-marginunits0.375rem
$label-line-heightunitless1.6
$label-font-sizeunits1rem
$slider-thumb-colorcolorhsl(255deg, 73%, 58%, 1)
$slider-thumb-radiusunits20px
$slider-thumb-heightunits1.5rem
$slider-thumb-widthunits1.5rem
$slider-track-heightunits8.4px
$slider-track-backgroundcolorhsl(0deg, 0%, 86%, 1)
$switch-outer-radiusunits20px
$switch-inner-radiusunits15px
$switch-backgroundcolorhsl(0deg, 0%, 86%, 1)
$switch-checked-backgroundcolorhsl(255deg, 73%, 58%, 1)
$switch-heightunits2rem
$switch-widthunits4rem
$switch-toggle-backgroundcolorhsl(0deg, 0%, 100%, 1)
$switch-toggle-heightunits1.5rem
$switch-toggle-widthunits1.5rem


VariableTypeDefault value
$top-paddingpadding1rem 0.75rem
$top-shadowbox-shadownone
$top-brand-paddingpadding 0 0.65rem
$top-brand-colorcolorinherit
$top-brand-max-logo-widthunits200px
$top-link-radiusunits6px
$top-link-paddingpadding0.3125rem 0.9375rem
$top-link-colorcolorinherit
$top-link-backgroundcolortransparent
$top-link-hover-backgroundcolorhsl(0deg, 0%, 66%, 0.15)
$top-link-hover-colorcolorinherit
$top-link-hover-decorationtext-decorationnone
$top-link-active-backgroundcolortransparent
$top-link-active-colorcolorinherit
$top-social-paddingpadding0 0.65rem
$top-social-marginmargin0 6px
$top-social-colorcolorinherit
$top-social-hover-colorcolorinherit
$top-button-paddingpadding0 0.65rem
$top-burger-colorcolorinherit
$top-burger-widthunits20px
$top-burger-paddingpadding0 0.65rem
$top-burger-bar-heightunits2px
$top-burger-bar-gapunits4px
$top-burger-transitionseconds.75s
$breadcrumb-colorcolorhsl(234deg, 100%, 64%, 1)
$breadcrumb-disabled-colorcolorhsl(0deg, 0%, 73%, 1)
$breadcrumb-active-colorcolorhsl(0deg, 0%, 22%, 1)
$breadcrumb-hover-colorcolorhsl(0deg, 0%, 22%, 1)
$breadcrumb-separator-colorcolorhsl(0deg, 0%, 22%, 1)
$breadcrumb-separator-paddingpadding0 0.625rem
$breadcrumb-separatorstring/
$menu-title-colorcolorhsl(0deg, 0%, 63%, 1)
$menu-title-font-sizeunits0.85rem
$menu-title-line-heightunitless1.5
$menu-title-paddingpadding0.5rem 1rem
$menu-title-casestringuppercase
$menu-list-backgroundcolortransparent
$menu-list-colorcolor hsl(0deg, 0%, 22%, 1)
$menu-list-line-heightunitless1.5
$menu-list-paddingpadding 0.5rem 1.5rem
$menu-list-active-backgroundcolorhsl(255deg, 73%, 58%, 1)
$menu-list-active-colorcolorhsl(0deg, 0%, 100%, 1)
$menu-list-hover-backgroundcolorhsl(0deg, 0%, 75%, 0.09)
$menu-list-hover-colorcolorhsl(0deg, 0%, 22%, 1)
$menu-divider-widthunits1px
$menu-divider-marginunits0.5rem
$menu-divider-colorcolorhsl(210deg, 16%, 92%, 1)
$menu-expandable-border-widthunits1px
$menu-expandable-border-colorcolorhsl(210deg, 16%, 92%, 1)
$menu-expandable-marginunits0.75rem
$menu-expandable-padding-leftunits0.75rem
$menu-expandable-item-paddingpadding0 0.75rem
$pagination-backgroundcolortransparent
$pagination-border-colorbordertransparent
$pagination-border-widthunits1px
$pagination-border-radiusunits0
$pagination-font-sizeunits0.875rem
$pagination-colorcolorhsl(0deg, 0%, 22%, 1)
$pagination-line-heightunitless1.5
$pagination-marginunits0.125rem
$pagination-paddingpadding0.375rem 0.75rem
$pagination-padding-bottomunitscalc(0.375rem - 1px)
$pagination-active-backgroundcolorhsl(255deg, 73%, 58%, 1)
$pagination-active-colorcolorhsl(0deg, 0%, 100%, 1)
$pagination-disabled-opacityunitless0.5
$pagination-hover-backgroundcolorhsl(0deg, 0%, 96%, 1)
$pagination-hover-colorcolorhsl(0deg, 0%, 22%, 1)
$pagination-rounded-radiusunits50px
$pagination-rounded-marginunits0.25rem
$pagination-bordered-backgroundcolorhsl(0deg, 0%, 100%, 1)
$pagination-bordered-colorcolorhsl(0deg, 0%, 22%, 1)
$pagination-bordered-radiusunits4px
$pagination-bordered-border-colorcolorhsl(33, 12%, 82%, 1)
$pagination-bordered-active-backgroundcolorhsl(255deg, 73%, 58%, 1)
$pagination-bordered-active-border-colorcolorhsl(255deg, 73%, 58%, 1)
$pagination-bordered-active-colorcolorhsl(0deg, 0%, 100%, 1)
$pagination-bordered-hover-backgroundcolorhsl(0deg, 0%, 100%, 1)
$pagination-bordered-hover-border-colorcolorhsl(33, 12%, 72%, 1)
$pagination-bordered-hover-colorcolorhsl(0deg, 0%, 22%, 1)

Elements


VariableTypeDefault value
$accordion-backgroundcolorhsl(0deg, 0%, 100%, 1)
$accordion-border-widthunits1px
$accordion-border-colorcolorhsl(0deg, 0%, 90%, 1)
$accordion-hover-backgroundcolorhsl(0deg, 0%, 96%, 1)
$accordion-hover-colorcolorhsl(0deg, 0%, 22%, 1)
$accordion-active-backgroundcolorhsl(255, 73%, 58%, 1)
$accordion-active-colorcolorhsl(0deg, 0%, 100%, 1)
$accordion-title-colorcolorhsl(0deg, 0%, 22%, 1)
$accordion-title-background-colorcolortransparent
$accordion-title-paddingpadding0.75rem 1rem
$accordion-content-paddingunits1rem
$accordion-content-colorcolorhsl(0deg, 0%, 22%, 1)
$accordion-content-backgroundcolorhsl(0deg, 0%, 100%, 1)
$alert-border-colorcolorhsl(0deg, 0%, 4%, 0.25)
$alert-border-stylestringsolid
$alert-border-widthunits1px
$alert-radiusunits0
$alert-paddingunits1rem
$alert-background-colorcolorhsl(0deg, 0%, 100%, 1)
$alert-colorcolorhsl(0deg, 0%, 22%, 1)
$button-type-sizeslist'small' 0.75rem,
'large' 1.375rem
$button-backgroundcolorhsl(0deg, 0%, 100%, 1)
$button-border-colorcolorhsl(33, 12%, 82%, 1)
$button-border-widthunits1px
button-colorcolorhsl(0deg, 0%, 22%, 1)
$button-font-sizeunits1rem
$button-line-heightunitless1.6
$button-margin-bottomunits0.4rem
$button-paddingpadding0.5rem 0.75rem
$button-hover-bordercolorhsl(33, 12%, 72%, 1)
$button-hover-backgroundcolorhsl(0deg, 0%, 100%, 1)
$button-hover-colorcolorhsl(0deg, 0%, 22%, 1)
$button-radiusunits0
$button-rounded-radiusunits6px
$button-loading-speedseconds0.8s
$button-loading-widthunits8px
$button-loading-colorcolorhsl(33, 12%, 82%, 1)
$button-addon-radiusunits6px
$button-group-gapunits0.4rem
$button-close-backgroundcolorhsl(0deg, 0%, 22%, 0.23)
$button-close-heightunits1.5rem
$button-close-widthunits1.5rem
$button-close-hovercolorhsl(0deg, 0%, 22%, 0.41)
$button-cross-colorcolorinherit
$button-cross-widthunits1px
$card-border-colorcolorhsl(0deg, 0%, 86%, 0.36)
$card-border-widthunits1px
$card-shadowbox-shadow0 0 3px 0 hsl(0deg, 0%, 4%, 0.1)
$card-radiusunits0
$card-header-backgroundcolorhsl(0deg, 0%, 0%, 0.03)
$card-header-colorcolorhsl(0deg, 0%, 22%, 1)
$card-header-paddingpadding0.625rem 1rem
$card-content-paddingunits1rem
$card-footer-paddingpadding0.35rem 1rem
$dropdown-backgroundcolorhsl(0deg, 0%, 100%, 1)
$dropdown-colorcolorhsl(0deg, 0%, 22%, 1)
$dropdown-border-widthunits1px
$dropdown-border-colorcolorhsl(0deg, 0%, 80%, 0.34)
$dropdown-border-radiusunits0
$dropdown-shadowbox-shadow0 6px 6px hsl(0deg, 0%, 4%, 0.16)
$dropdown-min-widthunits12rem
$dropdown-paddingpadding10px 0
$dropdown-link-colorcolorinherit
$dropdown-link-paddingpadding5px 15px
$dropdown-link-hover-colorcolorinherit
$dropdown-link-hover-backgroundcolorhsl(0deg, 0%, 75%, 0.09)
$dropdown-divider-colorcolorhsl(210deg, 16%, 92%, 1)
$dropdown-divider-marginmargin5px 0
$dropdown-item-colorcolorinherit
$dropdown-item-paddingpadding5px 15px
$dropdown-arrow-colorcolorhsl(232, 100%, 72%, 1)
$image-radiusunits50%
$image-thumb-border-widthunits1px
$image-thumb-border-colorcolorhsl(33, 12%, 82%, 1)
$image-thumb-radiusunits6px
$image-thumb-paddingunits0.25rem
$image-tile-shadowbox-shadow0 5px 10px 0px hsl(0deg, 0%, 0%, 0.2)
$image-tile-radiusunits6px
$image-square-sizeslist'tiny-square' 48px,
'small-square' 96px,
'square' 128px,
'medium-square' 160px,
'large-square' 208p
$media-border-widthunits1px
$media-border-colorcolorhsl(210deg, 16%, 92%, 1)
$media-padding-topunits1rem
$media-margin-topunits1rem
$modal-backgroundcolorhsl(0deg, 0%, 100%, 1)
$modal-colorcolorhsl(0deg, 0%, 22%, 1)
$modal-radiusunits0
$modal-widthunits600px
$modal-paddingunits1rem
$modal-overlay-backgroundcolorhsl(0deg, 0%, 22%, 0.5)
$modal-size-variationslist'small' 25%,
'medium' 45%,
'large' 75%
$panel-radiusunits4px
$panel-shadowbox-shadow0 0 10px 0 hsl(0deg, 0%, 4%, 0.21)
$panel-paddingunits1rem
$progress-heightunits1rem
$progress-margin-bottomunits0.4rem
$progress-bar-colorcolorhsl(33, 12%, 82%, 1)
$progress-bar-value-colorcolorhsl(206deg, 26%, 25%, 1)
$table-background-colorcolorhsl(0deg, 0%, 100%, 1)
$table-colorcolorhsl(0deg, 0%, 22%, 1)
$table-border-colorcolorhsl(0deg, 0%, 86%, 1)
$table-border-widthunits1px
$table-head-border-widthborder-width1px 0 2px
$table-body-border-widthborder-width0 0 1px
$table-font-sizeunits1rem
$table-paddingpadding0.5rem 0.625rem
$table-hovercolorhsl(0deg, 0%, 98%, 1)
$table-stripecolorhsl(0deg, 0%, 98%, 1)
$table-small-paddingpadding0.25rem 0.5rem
$tab-border-colorcolorhsl(0deg, 0%, 90%, 1)
$tab-border-widthunits1px
$tab-item-paddingpadding0.75rem 1rem 0.5rem
$tab-item-backgroundcolorhsl(0deg, 0%, 100%, 1)
$tab-item-colorcolorhsl(0deg, 0%, 22%, 1)
$tab-item-active-colorcolorhsl(234deg, 100%, 64%, 1)
$tab-item-active-backgroundcolorhsl(0deg, 0%, 100%, 1)
$tab-item-hover-colorcolorhsl(234deg, 100%, 64%, 1)
$tab-item-hover-backgroundcolorhsl(0deg, 0%, 100%, 1)
$tab-border-radiusunits0
$tab-content-paddingunits1rem
$tab-content-backgroundcolortransparent
$tab-content-colorcolorhsl(0deg, 0%, 22%, 1)
$tag-backgroundcolorhsl(0deg, 0%, 95%, 1)
$tag-border-colorcolortransparent
$tag-border-widthunits1px
$tag-colorcolorhsl(0deg, 0%, 22%, 1)
$tag-font-sizeunits0.8125rem
$tag-line-heightunitless1.6
$tag-heightunits1.6rem
$tag-radiusunits0
$tag-group-gapunits0.4rem
$tag-group-marginunits0.4rem
$tag-addon-radiusunits$tag-radius