Sass Variables

Make Inkline your own using hundreds of configurable Sass variables.

This page lists the common Sass Variables that are used throughout the framework. Each component has its own specific Sass variables documented.

If you're wondering how to override the Sass variables properly, please head to the Customization guide.

Border

Property $border-width
Default 1px
Property $border-color
Default $color-gray-20
Property $border-color-light
Default $border-color
Property $border-color-dark
Default $color-gray-70
Property $border-radius-enabled
Default true
Property $border-radius-base
Default 0.25rem
Property $border-radius-xs
Default $border-radius-base * $size-multiplier-xs
Property $border-radius-sm
Default $border-radius-base * $size-multiplier-sm
Property $border-radius-md
Default $border-radius-base * $size-multiplier-md
Property $border-radius-lg
Default $border-radius-base * $size-multiplier-lg
Property $border-radius-xl
Default $border-radius-base * $size-multiplier-xl
Property $border-radius
Default (...)

Breakpoints

Property $breakpoints-xs
Default 0
Property $breakpoints-sm
Default 576px
Property $breakpoints-md
Default 768px
Property $breakpoints-lg
Default 992px
Property $breakpoints-xl
Default 1200px
Property $breakpoints
Default (...)

Colors

Property $color-red
Default #f25f5c
Property $color-orange
Default #f1ac53
Property $color-yellow
Default #ffe066
Property $color-green
Default #5fb072
Property $color-teal
Default #62bec1
Property $color-blue
Default #178bb2
Property $color-purple
Default #5d65b9
Property $color-pink
Default #ff6f80
Property $color-group-basic
Default (...)
Property $color-transparent
Default transparent
Property $color-white
Default #ffffff
Property $color-gray-10
Default #f8f9fa
Property $color-gray-20
Default #e9ecef
Property $color-gray-30
Default #dee2e6
Property $color-gray-40
Default #ced4da
Property $color-gray-50
Default #adb5bd
Property $color-gray-60
Default #868e96
Property $color-gray-70
Default #495057
Property $color-gray-80
Default #343a40
Property $color-gray-90
Default #202229
Property $color-black
Default #000000
Property $color-group-neutral
Default (...)
Property $color-primary
Default $color-blue
Property $color-secondary
Default $color-purple
Property $color-group-brand
Default (...)
Property $color-light
Default $color-gray-20
Property $color-dark
Default $color-gray-80
Property $color-group-monochrome
Default (...)
Property $color-group-monochrome-white
Default (...)
Property $color-success
Default $color-green
Property $color-danger
Default $color-red
Property $color-warning
Default $color-orange
Property $color-info
Default $color-teal
Property $color-group-state
Default (...)
Property $color-facebook
Default #3b5998
Property $color-twitter
Default #1da1f2
Property $color-google
Default #dd4b39
Property $color-instagram
Default #fd1d1d
Property $color-dribbble
Default #ea4c89
Property $color-behance
Default #1769ff
Property $color-flickr
Default #ff0084
Property $color-linkedin
Default #0077b5
Property $color-youtube
Default #b31217
Property $color-pinterest
Default #bd081c
Property $color-github
Default #333333
Property $color-tumblr
Default #35465c
Property $color-twitch
Default #6441a5
Property $color-envato
Default #82b541
Property $color-vine
Default #00bf8f
Property $color-group-social
Default (...)
Property $variant-color-light
Default $color-white
Property $variant-color-dark
Default $color-gray-80
Property $colors
Default (...)

Core

Property $body-background
Default $color-white
Property $body-color
Default $color-gray-80
Property $body-background-light
Default $body-background
Property $body-color-light
Default $body-color
Property $body-background-dark
Default $color-gray-90
Property $body-color-dark
Default $color-gray-10
Property $body-variants
Default (...)

Gutter

Property $gutter-xs
Default 24px
Property $gutter-sm
Default 26px
Property $gutter-md
Default 28px
Property $gutter-lg
Default 30px
Property $gutter-xl
Default 32px
Property $gutter
Default (...)

Print

Property $print
Default true

Ratios

Property $ratio-second
Default 1.067
Property $ratio-major-second
Default 1.125
Property $ratio-minor-third
Default 1.2
Property $ratio-major-third
Default 1.25
Property $ratio-perfect-fourth
Default 1.333
Property $ratio-augmented-fourth
Default 1.414
Property $ratio-perfect-fifth
Default 1.5
Property $ratio-golden
Default 1.618
Property $ratio
Default (...)
Property $scale-ratio
Default $ratio-minor-third
Property $scale-ratio-secondary
Default $ratio-perfect-fourth

Shadow

Property $box-shadow-enabled
Default true
Property $box-shadow
Default 0 1rem 1rem -1rem rgba(0, 0, 0, 1)

Sizes

Property $size-percentages
Default ('25': 25%, '50': 50%, '75': 75%, '100': 100%)
Property $sizes
Default ('sm', 'md', 'lg')
Property $size-multiplier-xs
Default 0.6
Property $size-multiplier-sm
Default 0.8
Property $size-multiplier-md
Default 1
Property $size-multiplier-lg
Default 1.2
Property $size-multiplier-xl
Default 1.4
Property $size-multipliers
Default (...)

Spacing

Property $spacer
Default 1rem
Property $spacer-1-2
Default $spacer * 1 / 2
Property $spacer-1-3
Default $spacer * 1 / 3
Property $spacer-2-3
Default $spacer * 2 / 3
Property $spacer-1-4
Default $spacer * 1 / 4
Property $spacer-3-4
Default $spacer * 3 / 4
Property $spacer-0
Default $spacer * 0
Property $spacer-1
Default $spacer * 1
Property $spacer-2
Default $spacer * 2
Property $spacer-3
Default $spacer * 3
Property $spacer-4
Default $spacer * 4
Property $spacer-5
Default $spacer * 5
Property $spacer-6
Default $spacer * 6
Property $spacer-7
Default $spacer * 7
Property $spacer-8
Default $spacer * 8
Property $spacers
Default (...)

Transitions

Property $transition-enabled
Default true
Property $transition-duration
Default 210ms
Property $transition-easing
Default ease

Z-index

Property $z-index-dropdown
Default 1000
Property $z-index-sticky
Default 1020
Property $z-index-fixed
Default 1030
Property $z-index-modal-backdrop
Default 1040
Property $z-index-modal
Default 1050
Property $z-index-popover
Default 1060
Property $z-index-tooltip
Default 1070