Variables

These are all the component specific variables that can be used for customization.

Name Value
@button-background @skin-primary
@button-border-color @skin-primary
@button-border-radius @border-radius
@button-border-style solid
@button-border-width 1px
@button-border @button-border-width @button-border-style @button-border-color
@button-color @skin-on-primary
@button-darken 10%
@button-decoration none
@button-disabled-opacity 0.4
@button-font-family inherit
@button-font-size @font-size-medium
@button-font-weight @font-weight-medium
@button-lighten 10%
@button-line-height @space-36 - 1
@button-margin 0 0 0 @space-base
@button-min-width @space-64
@button-height auto
@button-padding-horizontal @space-16
@button-padding-vertical 0
@button-padding @button-padding-vertical @button-padding-horizontal
@button-text-transform uppercase
@button-transition-duration @transition-duration-default
@button-transition-property background-color, border-color, box-shadow
@button-transition-timing ease
@button-white-space normal
@button-secondary-background @skin-secondary
@button-secondary-border-color @skin-secondary
@button-secondary-color @skin-on-secondary
@button-info-background @skin-info
@button-info-border-color @skin-info
@button-info-color @skin-on-info
@button-success-background @skin-success
@button-success-border-color @skin-success
@button-success-color @skin-on-success
@button-warning-background @skin-warn
@button-warning-border-color @skin-warning
@button-warning-color @skin-on-warning
@button-error-background @skin-error
@button-error-border-color @skin-error
@button-error-color @skin-on-error
@button-flat-color @skin-primary
@button-lg-font-size @font-size-large
@button-lg-line-height @space-48 - 1
@button-lg-height auto
@button-lg-padding 0 @space-16
@button-sm-font-size 0.75rem
@button-sm-line-height @space-32 - 2
@button-sm-height auto
@button-sm-padding 0 @space-16
@button-link-background transparent
@button-link-border none
@button-link-color @skin-info
@button-link-decoration @button-decoration
@button-link-hover-color darken(@button-link-color, @button-darken)
@button-link-hover-decoration underline
@button-link-line-height @line-height-normal
@button-link-transition color
@button-fluid-margin-bottom @space-base
@button-fluid-width 100%
@button-rounded-border-radius @border-radius-rounded
@button-circle-border-radius 50%
@button-circle-line-height @line-height-secondary
@button-circle-padding 0
@button-circle-lg-size @space-48 - 1
@button-circle-size @space-36 - 1
@button-circle-sm-size @space-32 - 2
@button-raised-shadow @shadow-z2
@button-raised-active-shadow @shadow-z8
@button-icon-size @space-20 - 2
@button-icon-size-lg @space-20
@button-icon-margin-right 0 @space-8 0 0
@button-icon-margin-left 0 0 0 @space-8