The complete list of Kanbasu overridable settings.
Common
| Variable |
Default value |
Notice |
| $namespace |
|
|
| $rtl |
false |
Flip all left/right properties for right-to-left languages. |
Colors
| Variable |
Default value |
Notice |
| $brand-color |
#be3144 |
|
| $alt-color-lighter |
#e8ebee |
|
| $alt-color-light |
#adb7c3 |
|
| $alt-color |
#738497 |
|
| $alt-color-dark |
#46515e |
|
| $alt-color-darker |
#303841 |
|
Typography
| Variable |
Default value |
Notice |
| $font-family-default |
-apple-system, BlinkMacSystemFont, ‘Segoe UI’, ‘Roboto’, ‘Oxygen’, ‘Ubuntu’, ‘Cantarell’, ‘Fira Sans’, ‘Droid Sans’, ‘Helvetica Neue’, sans-serif |
|
| $font-size-default |
16px |
Must be in pixels. |
| $font-size-small |
.75rem |
|
| $font-size-large |
1.5rem |
|
| $line-height-default |
1.45 |
|
| $text-color |
$alt-color-darker |
|
| $link-color |
$brand-color |
|
| $muted-color |
transparentize($text-color,.4) |
|
Spacings
| Variable |
Default value |
Notice |
| $ratio |
1.61803398875 |
|
| $spacing-unit-default |
24px |
|
| $spacing-unit-tiny |
floor($spacing-unit-default / ($ratio 2)) |
|
| $spacing-unit-small |
floor($spacing-unit-default / $ratio) |
|
| $spacing-unit-large |
floor($spacing-unit-default $ratio) |
|
| $spacing-unit-huge |
floor($spacing-unit-default ($ratio 2)) |
|
| $spacings |
(
‘tight’ 0,
‘tiny’ $spacing-unit-tiny,
‘small’ $spacing-unit-small,
‘large’ $spacing-unit-large,
‘huge’ $spacing-unit-huge
)
|
Used to generate all the alternative spacings for lists, boxes, grid, …
|
Breakpoints
| Variable |
Default value |
Notice |
| $screen-xs-max |
640px / 16px 1em |
|
| $screen-sm-min |
641px / 16px 1em |
|
| $screen-sm-max |
768px / 16px 1em |
|
| $screen-md-min |
769px / 16px 1em |
|
| $screen-md-max |
1024px / 16px 1em |
|
| $screen-lg-min |
1025px / 16px 1em |
|
| $breakpoints-default |
(
‘sm’ ‘(min-width: #{$screen-sm-min})’,
‘md’ ‘(min-width: #{$screen-md-min})’,
‘lg’ ‘(min-width: #{$screen-lg-min})’
)
|
|
| $breakpoints-desc |
(
‘xs’ ‘(max-width: #{$screen-xs-max})’,
‘sm’ ‘(max-width: #{$screen-sm-max})’,
‘md’ ‘(max-width: #{$screen-md-max})’
)
|
|
Styling
| Variable |
Default value |
Notice |
| $border-radius-default |
4px |
|
| $border-radius-small |
2px |
|
| $border-radius-large |
6px |
|
Components
Button
| Variable |
Default value |
Notice |
| $btn-padding |
$spacing-unit-small/$ratio $spacing-unit-small |
|
| $btn-font-size |
inherit |
|
| $btn-color |
inherit |
|
| $btn-border |
1px solid transparent |
|
| $btn-bkg |
transparent |
|
| $btn-border-radius |
$border-radius-default |
|
| $btn-small-padding |
$spacing-unit-tiny/2 $spacing-unit-tiny |
|
| $btn-small-font-size |
$font-size-small |
|
| $btn-small-border-radius |
$border-radius-small |
|
| $btn-large-padding |
$spacing-unit-default/2 $spacing-unit-default |
|
| $btn-large-font-size |
$font-size-large |
|
| $btn-large-border-radius |
$border-radius-large |
|
| $btn-default-color |
$text-color |
|
| $btn-default-bkg-color |
$alt-color-lighter |
|
| $btn-default-hover-bkg-color |
lighten($btn-default-bkg-color, 3%) |
|
| $btn-default-active-bkg-color |
darken($btn-default-bkg-color, 5%) |
|
| $btn-primary-color |
white |
|
| $btn-primary-bkg-color |
$brand-color |
|
| $btn-primary-hover-bkg-color |
lighten($btn-primary-bkg-color, 8%) |
|
| $btn-primary-active-bkg-color |
darken($btn-primary-bkg-color, 5%) |
|
Field
| Variable |
Default value |
Notice |
| $field-padding |
$spacing-unit-small |
|
| $field-color |
inherit |
|
| $field-font-size |
inherit |
|
| $field-font-family |
inherit |
|
| $field-line-height |
$line-height-default |
|
| $field-bkg-color |
white |
|
| $field-border |
1px solid $alt-color-light |
|
| $field-focus-border-color |
$alt-color-darker |
|
| $field-border-radius |
$border-radius-default |
|
| $field-disabled-bkg-color |
$alt-color-lighter |
|
| $field-disabled-color |
$alt-color |
|
| $field-small-padding |
$spacing-unit-tiny |
|
| $field-small-font-size |
$font-size-small |
|
| $field-small-border-radius |
$border-radius-small |
|
| $field-large-padding |
$spacing-unit-default |
|
| $field-large-font-size |
$font-size-large |
|
| $field-large-border-radius |
$border-radius-large |
|
| $field-help-color |
$alt-color-light |
|
List
| Variable |
Default value |
Notice |
| $list-separator-style |
1px solid rgba(0, 0, 0, .15) |
|
Box
| Variable |
Default value |
Notice |
| $box-default-color |
inherit |
|
| $box-default-bkg-color |
$alt-color-lighter |
|
| $box-primary-color |
white |
|
| $box-primary-bkg-color |
$brand-color |
|
Width
| Variable |
Default value |
Notice |
| $widths-columns |
6, 5, 4, 3, 2, 1 |
|
| $widths-breakpoints |
$breakpoints-default |
|
Media responsive
| Variable |
Default value |
Notice |
| $media-collapse |
$screen-sm-max |
|
Container
| Variable |
Default value |
Notice |
| $container-gutter-width |
$spacing-unit-small |
|
| $container-max-width |
1200px |
|
Table responsive
| Variable |
Default value |
Notice |
| $table-responsive-collapse |
$screen-sm-max |
|
