Inkline
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.
To be able to override the Sass variables, please follow the Customization part of your installation.
Core
Core
Property $body-background
Default
$color-whiteProperty $body-color
Default
$color-gray-80Property $body-background-light
Default
$body-backgroundProperty $body-color-light
Default
$body-colorProperty $body-background-dark
Default
$color-gray-90Property $body-color-dark
Default
$color-gray-10Property $body-variants
Default
(...)Border
Border
Property $border-width
Default
1pxProperty $border-color
Default
$color-gray-20Property $border-color-light
Default
$border-colorProperty $border-color-dark
Default
$color-gray-70Property $border-radius-enabled
Default
trueProperty $border-radius-base
Default
0.25remProperty $border-radius-xs
Default
$border-radius-base * $size-multiplier-xsProperty $border-radius-sm
Default
$border-radius-base * $size-multiplier-smProperty $border-radius-md
Default
$border-radius-base * $size-multiplier-mdProperty $border-radius-lg
Default
$border-radius-base * $size-multiplier-lgProperty $border-radius-xl
Default
$border-radius-base * $size-multiplier-xlProperty $border-radius
Default
(...)Breakpoints
Breakpoints
Property $breakpoints-xs
Default
0Property $breakpoints-sm
Default
576pxProperty $breakpoints-md
Default
768pxProperty $breakpoints-lg
Default
992pxProperty $breakpoints-xl
Default
1200pxProperty $breakpoints
Default
(...)Colors
Colors
Property $color-red
Default
#f25f5cProperty $color-orange
Default
#f1ac53Property $color-yellow
Default
#ffe066Property $color-green
Default
#5fb072Property $color-teal
Default
#62bec1Property $color-blue
Default
#178bb2Property $color-purple
Default
#5d65b9Property $color-pink
Default
#ff6f80Property $color-group-basic
Default
(...)Property $color-transparent
Default
transparentProperty $color-white
Default
#ffffffProperty $color-gray-10
Default
#f8f9faProperty $color-gray-20
Default
#e9ecefProperty $color-gray-30
Default
#dee2e6Property $color-gray-40
Default
#ced4daProperty $color-gray-50
Default
#adb5bdProperty $color-gray-60
Default
#868e96Property $color-gray-70
Default
#495057Property $color-gray-80
Default
#343a40Property $color-gray-90
Default
#202229Property $color-black
Default
#000000Property $color-group-neutral
Default
(...)Property $color-primary
Default
$color-blueProperty $color-secondary
Default
$color-purpleProperty $color-group-brand
Default
(...)Property $color-light
Default
$color-gray-20Property $color-dark
Default
$color-gray-80Property $color-group-monochrome
Default
(...)Property $color-group-monochrome-white
Default
(...)Property $color-success
Default
$color-greenProperty $color-danger
Default
$color-redProperty $color-warning
Default
$color-orangeProperty $color-info
Default
$color-tealProperty $color-group-state
Default
(...)Property $color-facebook
Default
#3b5998Property $color-twitter
Default
#1da1f2Property $color-google
Default
#dd4b39Property $color-instagram
Default
#fd1d1dProperty $color-dribbble
Default
#ea4c89Property $color-behance
Default
#1769ffProperty $color-flickr
Default
#ff0084Property $color-linkedin
Default
#0077b5Property $color-youtube
Default
#b31217Property $color-pinterest
Default
#bd081cProperty $color-github
Default
#333333Property $color-tumblr
Default
#35465cProperty $color-twitch
Default
#6441a5Property $color-envato
Default
#82b541Property $color-vine
Default
#00bf8fProperty $color-group-social
Default
(...)Property $variant-color-light (deprecated)
Default
$color-whiteProperty $variant-color-dark (deprecated)
Default
$color-gray-80Property $color-for-light-variant
Default
$variant-color-lightProperty $color-for-light-variant
Default
$variant-color-darkProperty $colors
Default
(...)Gutter
Gutter
Property $gutter-xs
Default
24pxProperty $gutter-sm
Default
26pxProperty $gutter-md
Default
28pxProperty $gutter-lg
Default
30pxProperty $gutter-xl
Default
32pxProperty $gutter
Default
(...)
Print
Property $print
Default
trueRatios
Ratio
Property $ratio-second
Default
1.067Property $ratio-major-second
Default
1.125Property $ratio-minor-third
Default
1.2Property $ratio-major-third
Default
1.25Property $ratio-perfect-fourth
Default
1.333Property $ratio-augmented-fourth
Default
1.414Property $ratio-perfect-fifth
Default
1.5Property $ratio-golden
Default
1.618Property $ratio
Default
(...)Property $scale-ratio
Default
$ratio-minor-thirdProperty $scale-ratio-secondary
Default
$ratio-perfect-fourthShadow
Shadow
Property $box-shadow-enabled
Default
trueProperty $box-shadow
Default
0 1rem 1rem -1rem rgba(0, 0, 0, 1)Sizes
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.6Property $size-multiplier-sm
Default
0.8Property $size-multiplier-md
Default
1Property $size-multiplier-lg
Default
1.2Property $size-multiplier-xl
Default
1.4Property $size-multipliers
Default
(...)Spacing
Spacing
Property $spacer
Default
1remProperty $spacer-1-2
Default
$spacer * 1 / 2Property $spacer-1-3
Default
$spacer * 1 / 3Property $spacer-2-3
Default
$spacer * 2 / 3Property $spacer-1-4
Default
$spacer * 1 / 4Property $spacer-3-4
Default
$spacer * 3 / 4Property $spacer-0
Default
$spacer * 0Property $spacer-1
Default
$spacer * 1Property $spacer-2
Default
$spacer * 2Property $spacer-3
Default
$spacer * 3Property $spacer-4
Default
$spacer * 4Property $spacer-5
Default
$spacer * 5Property $spacer-6
Default
$spacer * 6Property $spacer-7
Default
$spacer * 7Property $spacer-8
Default
$spacer * 8Property $spacers
Default
(...)Transitions
Transitions
Property $transition-enabled
Default
trueProperty $transition-duration
Default
210msProperty $transition-easing
Default
easeZ-index
Z-index
Property $z-index-dropdown
Default
1000Property $z-index-sticky
Default
1020Property $z-index-fixed
Default
1030Property $z-index-modal-backdrop
Default
1040Property $z-index-modal
Default
1050Property $z-index-popover
Default
1060Property $z-index-tooltip
Default
1070