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 |