• 2.5.0

Settings

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