Sass Variables
Customize the framework with predefined variables
Global variables
These variables are used throughout the entire OrbitCSS framework.
| Variable | Type | Default value |
|---|---|---|
| $font-base | units | 16 |
| $small-max | units | 767px |
| $medium | units | 768px |
| $large | units | 922px |
| $x-large | units | 1200px |
| $theme-font-color | color | hsl(0deg, 0%, 22%, 1) |
| $theme-background-color | color | hsl(0deg, 0%, 100%, 1) |
| $body-font-family | font-family | 'Roboto', sans-serif |
| $body-font-size | units | 1rem |
| $body-font-weight | unitless | 400 |
| $body-line-height | unitless | 1.6 |
| $hr-color | color | hsl(32deg, 12%, 92%, 1) |
| $hr-height | units | 0.125rem |
| $hr-margin | margin | 1.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 );
| Variable | Type | Default value |
|---|---|---|
| $primary | color | #6e45e2 |
| $secondary | color | #ff5e82 |
| $warning | color | #ffdd57 |
| $info | color | #bfd9fe |
| $danger | color | #ff2b56 |
| $success | color | #00e3ae |
| $black | color | #393939 |
| $dark | color | #304352 |
| $night | color | #4e4376 |
| $white | color | #ffffff |
| $light | color | #eef1f5 |
| $light-grey | color | #d7d2cc |
| $dark-grey | color | #616161 |
| $link | color | #495aff |
| $disabled | color | #f7f7f7 |
| $muted | color | lighten($dark-grey, 35%) |
| $custom-palette | map | (empty) |
| $color-palette | map | ( "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
| Variable | Type | Default value |
|---|---|---|
| $list-style-type | string | disc |
| $list-margin-left | units | 1.25rem |
| $list-margin-top | units | 1rem |
| $list-item-padding | units | 0 |
| $heading-font-family | font-family | Lato, sans-serif |
| $heading-font-weight | unitless | 600 |
| $heading-line-height | unitless | 1.4 |
| $heading-margin-bottom | units | 0.45rem |
| $heading-color | color | inherit |
| $subheading-margin-bottom | units | 16px |
| $subheading-margin-top | units | -0.4rem |
| $subheading-font-weight | unitless | 400 |
| $subheading-line-height | unitless | 1.4 |
| $subheading-color | color | hsl(0deg, 0%, 51%, 1) |
| $blockquote-border-color | color | hsl(0deg, 0%, 83%, 1) |
| $blockquote-border-width | units | 1px |
| $blockquote-color | color | hsl(0deg, 0%, 22%, 1) |
| $blockquote-margin | margin | 1rem 0 0 |
| $blockquote-padding | padding | 0.5rem 0 0.5rem 1.25rem |
| $cite-font-size | units | 0.8125rem |
| $cite-color | color | hsl(0deg, 0%, 22%, 1) |
| $abbr-border-color | color | hsl(0deg, 0%, 22%, 1) |
| $heading-size | map | ( "h1": 2.875rem, "h2": 2.5rem, "h3": 1.875rem, "h4": 1.5rem, "h5": 1.25rem, "h6": 1rem ) |
Layout
| Variable | Type | Default value |
|---|---|---|
| $container-padding | padding | 20px |
| $container-max-width | units | 1200px |
| $section-padding | padding | 6rem 1rem |
| $section-padding-small | padding | 3rem 1rem |
| $section-padding-large | padding | 12rem 1rem |
| $col-padding | units | 0.625rem |
| $col-margin-top | units | 0.5rem |
| $col-margin-bottom | units | 0.5rem |
| $max-cols | integer | 12 |
| $grid-sizes | list | '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-padding | padding | 4rem 1.5rem |
| $hero-sizes | list | 'medium' 9rem 1.5rem, 'large' 16rem 1.5rem |
| $hero-background-color | color | hsl(0deg, 0%, 100%, 1) |
| $hero-color | color | hsl(0deg, 0%, 22%, 1) |
Form
| Variable | Type | Default value |
|---|---|---|
| $input-background-color | color | hsl(0deg, 0%, 100%, 1) |
| $input-border-color | color | hsl(0deg, 0%, 86%, 1) |
| $input-border-width | units | 1px |
| $input-border-radius | units | 0 |
| $input-color | color | hsl(0deg, 0%, 22%, 1) |
| $input-shadow | box-shadow | inset 0 1px 2px hsl(0deg, 0%, 4%, 0.1) |
| $input-font-size | units | 1rem |
| $input-line-height | unitless | 1.5 |
| $input-padding | units | 0.5rem |
| $input-focus-border | color | hsl(215, 97%, 87%, 1) |
| $input-focus-shadow | box-shadow | 0 0 0 0.125em hsl(217deg, 70%, 53%, 0.25) |
| $input-disabled-background | color | hsl(0deg, 0%, 97%, 1) |
| $input-disabled-border | color | hsl(0deg, 0%, 97%, 1) |
| $input-disabled-color | color | hsl(0deg, 0%, 73%, 1) |
| $input-error-background | color | hsl(348deg, 100%, 58%, 0.2) |
| $input-error-color | color | hsl(0deg, 0%, 22%, 1) |
| $input-error-border-color | color | hsl(347deg, 100%, 58%, 1) |
| $select-arrow-color | color | hsl(232deg, 100%, 72%, 1) |
| $select-arrow-width | units | 0.625em |
| $select-padding | units | 0.5rem |
| $select-multiple-padding | padding | .5rem 1rem |
| $select-loading-speed | seconds | .8s |
| $select-loading-width | units | 2px |
| $select-loading-color | color | hsl(32deg, 12%, 82%, 1) |
| $label-font-weight | unitless | 600 |
| $label-bottom-margin | units | 0.375rem |
| $label-line-height | unitless | 1.6 |
| $label-font-size | units | 1rem |
| $slider-thumb-color | color | hsl(255deg, 73%, 58%, 1) |
| $slider-thumb-radius | units | 20px |
| $slider-thumb-height | units | 1.5rem |
| $slider-thumb-width | units | 1.5rem |
| $slider-track-height | units | 8.4px |
| $slider-track-background | color | hsl(0deg, 0%, 86%, 1) |
| $switch-outer-radius | units | 20px |
| $switch-inner-radius | units | 15px |
| $switch-background | color | hsl(0deg, 0%, 86%, 1) |
| $switch-checked-background | color | hsl(255deg, 73%, 58%, 1) |
| $switch-height | units | 2rem |
| $switch-width | units | 4rem |
| $switch-toggle-background | color | hsl(0deg, 0%, 100%, 1) |
| $switch-toggle-height | units | 1.5rem |
| $switch-toggle-width | units | 1.5rem |
Navigation
| Variable | Type | Default value |
|---|---|---|
| $top-padding | padding | 1rem 0.75rem |
| $top-shadow | box-shadow | none |
| $top-brand-padding | padding | 0 0.65rem |
| $top-brand-color | color | inherit |
| $top-brand-max-logo-width | units | 200px |
| $top-link-radius | units | 6px |
| $top-link-padding | padding | 0.3125rem 0.9375rem |
| $top-link-color | color | inherit |
| $top-link-background | color | transparent |
| $top-link-hover-background | color | hsl(0deg, 0%, 66%, 0.15) |
| $top-link-hover-color | color | inherit |
| $top-link-hover-decoration | text-decoration | none |
| $top-link-active-background | color | transparent |
| $top-link-active-color | color | inherit |
| $top-social-padding | padding | 0 0.65rem |
| $top-social-margin | margin | 0 6px |
| $top-social-color | color | inherit |
| $top-social-hover-color | color | inherit |
| $top-button-padding | padding | 0 0.65rem |
| $top-burger-color | color | inherit |
| $top-burger-width | units | 20px |
| $top-burger-padding | padding | 0 0.65rem |
| $top-burger-bar-height | units | 2px |
| $top-burger-bar-gap | units | 4px |
| $top-burger-transition | seconds | .75s |
| $breadcrumb-color | color | hsl(234deg, 100%, 64%, 1) |
| $breadcrumb-disabled-color | color | hsl(0deg, 0%, 73%, 1) |
| $breadcrumb-active-color | color | hsl(0deg, 0%, 22%, 1) |
| $breadcrumb-hover-color | color | hsl(0deg, 0%, 22%, 1) |
| $breadcrumb-separator-color | color | hsl(0deg, 0%, 22%, 1) |
| $breadcrumb-separator-padding | padding | 0 0.625rem |
| $breadcrumb-separator | string | / |
| $menu-title-color | color | hsl(0deg, 0%, 63%, 1) |
| $menu-title-font-size | units | 0.85rem |
| $menu-title-line-height | unitless | 1.5 |
| $menu-title-padding | padding | 0.5rem 1rem |
| $menu-title-case | string | uppercase |
| $menu-list-background | color | transparent |
| $menu-list-color | color | hsl(0deg, 0%, 22%, 1) |
| $menu-list-line-height | unitless | 1.5 |
| $menu-list-padding | padding | 0.5rem 1.5rem |
| $menu-list-active-background | color | hsl(255deg, 73%, 58%, 1) |
| $menu-list-active-color | color | hsl(0deg, 0%, 100%, 1) |
| $menu-list-hover-background | color | hsl(0deg, 0%, 75%, 0.09) |
| $menu-list-hover-color | color | hsl(0deg, 0%, 22%, 1) |
| $menu-divider-width | units | 1px |
| $menu-divider-margin | units | 0.5rem |
| $menu-divider-color | color | hsl(210deg, 16%, 92%, 1) |
| $menu-expandable-border-width | units | 1px |
| $menu-expandable-border-color | color | hsl(210deg, 16%, 92%, 1) |
| $menu-expandable-margin | units | 0.75rem |
| $menu-expandable-padding-left | units | 0.75rem |
| $menu-expandable-item-padding | padding | 0 0.75rem |
| $pagination-background | color | transparent |
| $pagination-border-color | border | transparent |
| $pagination-border-width | units | 1px |
| $pagination-border-radius | units | 0 |
| $pagination-font-size | units | 0.875rem |
| $pagination-color | color | hsl(0deg, 0%, 22%, 1) |
| $pagination-line-height | unitless | 1.5 |
| $pagination-margin | units | 0.125rem |
| $pagination-padding | padding | 0.375rem 0.75rem |
| $pagination-padding-bottom | units | calc(0.375rem - 1px) |
| $pagination-active-background | color | hsl(255deg, 73%, 58%, 1) |
| $pagination-active-color | color | hsl(0deg, 0%, 100%, 1) |
| $pagination-disabled-opacity | unitless | 0.5 |
| $pagination-hover-background | color | hsl(0deg, 0%, 96%, 1) |
| $pagination-hover-color | color | hsl(0deg, 0%, 22%, 1) |
| $pagination-rounded-radius | units | 50px |
| $pagination-rounded-margin | units | 0.25rem |
| $pagination-bordered-background | color | hsl(0deg, 0%, 100%, 1) |
| $pagination-bordered-color | color | hsl(0deg, 0%, 22%, 1) |
| $pagination-bordered-radius | units | 4px |
| $pagination-bordered-border-color | color | hsl(33, 12%, 82%, 1) |
| $pagination-bordered-active-background | color | hsl(255deg, 73%, 58%, 1) |
| $pagination-bordered-active-border-color | color | hsl(255deg, 73%, 58%, 1) |
| $pagination-bordered-active-color | color | hsl(0deg, 0%, 100%, 1) |
| $pagination-bordered-hover-background | color | hsl(0deg, 0%, 100%, 1) |
| $pagination-bordered-hover-border-color | color | hsl(33, 12%, 72%, 1) |
| $pagination-bordered-hover-color | color | hsl(0deg, 0%, 22%, 1) |
Elements
| Variable | Type | Default value |
|---|---|---|
| $accordion-background | color | hsl(0deg, 0%, 100%, 1) |
| $accordion-border-width | units | 1px |
| $accordion-border-color | color | hsl(0deg, 0%, 90%, 1) |
| $accordion-hover-background | color | hsl(0deg, 0%, 96%, 1) |
| $accordion-hover-color | color | hsl(0deg, 0%, 22%, 1) |
| $accordion-active-background | color | hsl(255, 73%, 58%, 1) |
| $accordion-active-color | color | hsl(0deg, 0%, 100%, 1) |
| $accordion-title-color | color | hsl(0deg, 0%, 22%, 1) |
| $accordion-title-background-color | color | transparent |
| $accordion-title-padding | padding | 0.75rem 1rem |
| $accordion-content-padding | units | 1rem |
| $accordion-content-color | color | hsl(0deg, 0%, 22%, 1) |
| $accordion-content-background | color | hsl(0deg, 0%, 100%, 1) |
| $alert-border-color | color | hsl(0deg, 0%, 4%, 0.25) |
| $alert-border-style | string | solid |
| $alert-border-width | units | 1px |
| $alert-radius | units | 0 |
| $alert-padding | units | 1rem |
| $alert-background-color | color | hsl(0deg, 0%, 100%, 1) |
| $alert-color | color | hsl(0deg, 0%, 22%, 1) |
| $button-type-sizes | list | 'small' 0.75rem, 'large' 1.375rem |
| $button-background | color | hsl(0deg, 0%, 100%, 1) |
| $button-border-color | color | hsl(33, 12%, 82%, 1) |
| $button-border-width | units | 1px |
| button-color | color | hsl(0deg, 0%, 22%, 1) |
| $button-font-size | units | 1rem |
| $button-line-height | unitless | 1.6 |
| $button-margin-bottom | units | 0.4rem |
| $button-padding | padding | 0.5rem 0.75rem |
| $button-hover-border | color | hsl(33, 12%, 72%, 1) |
| $button-hover-background | color | hsl(0deg, 0%, 100%, 1) |
| $button-hover-color | color | hsl(0deg, 0%, 22%, 1) |
| $button-radius | units | 0 |
| $button-rounded-radius | units | 6px |
| $button-loading-speed | seconds | 0.8s |
| $button-loading-width | units | 8px |
| $button-loading-color | color | hsl(33, 12%, 82%, 1) |
| $button-addon-radius | units | 6px |
| $button-group-gap | units | 0.4rem |
| $button-close-background | color | hsl(0deg, 0%, 22%, 0.23) |
| $button-close-height | units | 1.5rem |
| $button-close-width | units | 1.5rem |
| $button-close-hover | color | hsl(0deg, 0%, 22%, 0.41) |
| $button-cross-color | color | inherit |
| $button-cross-width | units | 1px |
| $card-border-color | color | hsl(0deg, 0%, 86%, 0.36) |
| $card-border-width | units | 1px |
| $card-shadow | box-shadow | 0 0 3px 0 hsl(0deg, 0%, 4%, 0.1) |
| $card-radius | units | 0 |
| $card-header-background | color | hsl(0deg, 0%, 0%, 0.03) |
| $card-header-color | color | hsl(0deg, 0%, 22%, 1) |
| $card-header-padding | padding | 0.625rem 1rem |
| $card-content-padding | units | 1rem |
| $card-footer-padding | padding | 0.35rem 1rem |
| $dropdown-background | color | hsl(0deg, 0%, 100%, 1) |
| $dropdown-color | color | hsl(0deg, 0%, 22%, 1) |
| $dropdown-border-width | units | 1px |
| $dropdown-border-color | color | hsl(0deg, 0%, 80%, 0.34) |
| $dropdown-border-radius | units | 0 |
| $dropdown-shadow | box-shadow | 0 6px 6px hsl(0deg, 0%, 4%, 0.16) |
| $dropdown-min-width | units | 12rem |
| $dropdown-padding | padding | 10px 0 |
| $dropdown-link-color | color | inherit |
| $dropdown-link-padding | padding | 5px 15px |
| $dropdown-link-hover-color | color | inherit |
| $dropdown-link-hover-background | color | hsl(0deg, 0%, 75%, 0.09) |
| $dropdown-divider-color | color | hsl(210deg, 16%, 92%, 1) |
| $dropdown-divider-margin | margin | 5px 0 |
| $dropdown-item-color | color | inherit |
| $dropdown-item-padding | padding | 5px 15px |
| $dropdown-arrow-color | color | hsl(232, 100%, 72%, 1) |
| $image-radius | units | 50% |
| $image-thumb-border-width | units | 1px |
| $image-thumb-border-color | color | hsl(33, 12%, 82%, 1) |
| $image-thumb-radius | units | 6px |
| $image-thumb-padding | units | 0.25rem |
| $image-tile-shadow | box-shadow | 0 5px 10px 0px hsl(0deg, 0%, 0%, 0.2) |
| $image-tile-radius | units | 6px |
| $image-square-sizes | list | 'tiny-square' 48px, 'small-square' 96px, 'square' 128px, 'medium-square' 160px, 'large-square' 208p |
| $media-border-width | units | 1px |
| $media-border-color | color | hsl(210deg, 16%, 92%, 1) |
| $media-padding-top | units | 1rem |
| $media-margin-top | units | 1rem |
| $modal-background | color | hsl(0deg, 0%, 100%, 1) |
| $modal-color | color | hsl(0deg, 0%, 22%, 1) |
| $modal-radius | units | 0 |
| $modal-width | units | 600px |
| $modal-padding | units | 1rem |
| $modal-overlay-background | color | hsl(0deg, 0%, 22%, 0.5) |
| $modal-size-variations | list | 'small' 25%, 'medium' 45%, 'large' 75% |
| $panel-radius | units | 4px |
| $panel-shadow | box-shadow | 0 0 10px 0 hsl(0deg, 0%, 4%, 0.21) |
| $panel-padding | units | 1rem |
| $progress-height | units | 1rem |
| $progress-margin-bottom | units | 0.4rem |
| $progress-bar-color | color | hsl(33, 12%, 82%, 1) |
| $progress-bar-value-color | color | hsl(206deg, 26%, 25%, 1) |
| $table-background-color | color | hsl(0deg, 0%, 100%, 1) |
| $table-color | color | hsl(0deg, 0%, 22%, 1) |
| $table-border-color | color | hsl(0deg, 0%, 86%, 1) |
| $table-border-width | units | 1px |
| $table-head-border-width | border-width | 1px 0 2px |
| $table-body-border-width | border-width | 0 0 1px |
| $table-font-size | units | 1rem |
| $table-padding | padding | 0.5rem 0.625rem |
| $table-hover | color | hsl(0deg, 0%, 98%, 1) |
| $table-stripe | color | hsl(0deg, 0%, 98%, 1) |
| $table-small-padding | padding | 0.25rem 0.5rem |
| $tab-border-color | color | hsl(0deg, 0%, 90%, 1) |
| $tab-border-width | units | 1px |
| $tab-item-padding | padding | 0.75rem 1rem 0.5rem |
| $tab-item-background | color | hsl(0deg, 0%, 100%, 1) |
| $tab-item-color | color | hsl(0deg, 0%, 22%, 1) |
| $tab-item-active-color | color | hsl(234deg, 100%, 64%, 1) |
| $tab-item-active-background | color | hsl(0deg, 0%, 100%, 1) |
| $tab-item-hover-color | color | hsl(234deg, 100%, 64%, 1) |
| $tab-item-hover-background | color | hsl(0deg, 0%, 100%, 1) |
| $tab-border-radius | units | 0 |
| $tab-content-padding | units | 1rem |
| $tab-content-background | color | transparent |
| $tab-content-color | color | hsl(0deg, 0%, 22%, 1) |
| $tag-background | color | hsl(0deg, 0%, 95%, 1) |
| $tag-border-color | color | transparent |
| $tag-border-width | units | 1px |
| $tag-color | color | hsl(0deg, 0%, 22%, 1) |
| $tag-font-size | units | 0.8125rem |
| $tag-line-height | unitless | 1.6 |
| $tag-height | units | 1.6rem |
| $tag-radius | units | 0 |
| $tag-group-gap | units | 0.4rem |
| $tag-group-margin | units | 0.4rem |
| $tag-addon-radius | units | $tag-radius |