-
Notifications
You must be signed in to change notification settings - Fork 77
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
1 changed file
with
160 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| # Button - Style API | ||
|
|
||
| ## CSS Custom Properties | ||
|
|
||
| | CSS Custom Property | Description | | ||
| | ----------------------------------------------- | --------------------------------------------------------------------------- | | ||
| | --clr-btn-vertical-margin | Button top and bottom margin. | | ||
| | --clr-btn-horizontal-margin | Button left and right margin. | | ||
| | --clr-btn-vertical-padding | Button top and bottom padding. | | ||
| | --clr-btn-horizontal-padding | Button left and right padding. | | ||
| | --clr-btn-padding | Button padding. | | ||
| | --clr-btn-height | Button height. | | ||
| | --clr-btn-height-sm | Small button height. | | ||
| | --clr-btn-font-weight | Button text font weight. | | ||
| | --clr-btn-border-radius | Button border radius. | | ||
| | --clr-btn-border-width | Button border width. | | ||
| | --clr-btn-outline-bg-color | Default outline button background color. | | ||
| | --clr-btn-default-color | Default button text color. | | ||
| | --clr-btn-default-bg-color | Default button background color. | | ||
| | --clr-btn-default-border-color | Default button border color. | | ||
| | --clr-btn-default-hover-color | Default button `:hover` text color. | | ||
| | --clr-btn-default-hover-bg-color | Default button `:hover` background color. | | ||
| | --clr-btn-default-box-shadow-color | Default button `:active` box shadow. | | ||
| | --clr-btn-default-disabled-color | Default button `disabled` text color. | | ||
| | --clr-btn-default-disabled-bg-color | Default button `disabled` background color. | | ||
| | --clr-btn-default-disabled-border-color | Default button `disabled` border color. | | ||
| | --clr-btn-default-outline-color | Default outline button text color. | | ||
| | --clr-btn-default-outline-bg-color | Default outline button background color. | | ||
| | --clr-btn-default-outline-border-color | Default outline button border color. | | ||
| | --clr-btn-default-outline-hover-color | Default outline button `:hover` text color. | | ||
| | --clr-btn-default-outline-hover-bg-color | Default outline button `:hover` background color. | | ||
| | --clr-btn-default-outline-box-shadow-color | Default outline button `:active` box shadow. | | ||
| | --clr-btn-default-outline-disabled-color | Default outline button `disabled` text color. | | ||
| | --clr-btn-default-outline-disabled-bg-color | Default outline button `disabled` background color. | | ||
| | --clr-btn-default-outline-disabled-border-color | Default outline button `disabled` border color. | | ||
| | --clr-btn-primary-color | Primary button text color. | | ||
| | --clr-btn-primary-bg-color | Primary button background color. | | ||
| | --clr-btn-primary-border-color | Primary button border color. | | ||
| | --clr-btn-primary-hover-color | Primary button `:hover` text color. | | ||
| | --clr-btn-primary-hover-bg-color | Primary button `:hover` background color. | | ||
| | --clr-btn-primary-box-shadow-color | Primary button `:active` box shadow. | | ||
| | --clr-btn-primary-disabled-color | Primary button `disabled` text color. | | ||
| | --clr-btn-primary-disabled-bg-color | Primary button `disabled` color. | | ||
| | --clr-btn-primary-disabled-border-color | Primary button `disabled` border color. | | ||
| | --clr-btn-success-color | Success button text color. | | ||
| | --clr-btn-success-bg-color | Success button background color. | | ||
| | --clr-btn-success-border-color | Success button border color. | | ||
| | --clr-btn-success-hover-color | Success button `:hover` text color. | | ||
| | --clr-btn-success-hover-bg-color | Success button `:hover` background color. | | ||
| | --clr-btn-success-box-shadow-color | Success button `:active` box shadow. | | ||
| | --clr-btn-success-disabled-color | Success button `disabled` text color. | | ||
| | --clr-btn-success-disabled-bg-color | Success button `disabled` color. | | ||
| | --clr-btn-success-disabled-border-color | Success button `disabled` border color. | | ||
| | --clr-btn-success-outline-color | Success outline button text color. | | ||
| | --clr-btn-success-outline-bg-color | Success outline button background color. | | ||
| | --clr-btn-success-outline-border-color | Success outline button border color. | | ||
| | --clr-btn-success-outline-hover-color | Success outline button `:hover` text color. | | ||
| | --clr-btn-success-outline-hover-bg-color | Success outline button `:hover` background color. | | ||
| | --clr-btn-success-outline-box-shadow-color | Success outline button `:active` box shadow. | | ||
| | --clr-btn-success-outline-disabled-color | Success outline button `disabled` text color. | | ||
| | --clr-btn-success-outline-disabled-bg-color | Success outline button `disabled` background color. | | ||
| | --clr-btn-success-outline-disabled-border-color | Success outline button `disabled` border color. | | ||
| | --clr-btn-danger-color | Danger button text color. | | ||
| | --clr-btn-danger-bg-color | Danger button background color. | | ||
| | --clr-btn-danger-border-color | Danger button border color. | | ||
| | --clr-btn-danger-hover-color | Danger button `:hover` text color. | | ||
| | --clr-btn-danger-hover-bg-color | Danger button `:hover` background color. | | ||
| | --clr-btn-danger-box-shadow-color | Danger button `:active` box shadow. | | ||
| | --clr-btn-danger-disabled-color | Danger button `disabled` text color. | | ||
| | --clr-btn-danger-disabled-bg-color | Danger button `disabled` color. | | ||
| | --clr-btn-danger-disabled-border-color | Danger button `disabled` border color. | | ||
| | --clr-btn-danger-outline-color | Danger outline button text color. | | ||
| | --clr-btn-danger-outline-bg-color | Danger outline button background color. | | ||
| | --clr-btn-danger-outline-border-color | Danger outline button border color. | | ||
| | --clr-btn-danger-outline-hover-color | Danger outline button `:hover` text color. | | ||
| | --clr-btn-danger-outline-hover-bg-color | Danger outline button `:hover` background color. | | ||
| | --clr-btn-danger-outline-box-shadow-color | Danger outline button `:active` box shadow. | | ||
| | --clr-btn-danger-outline-disabled-color | Danger outline button `disabled` text color. | | ||
| | --clr-btn-danger-outline-disabled-bg-color | Danger outline button `disabled` background color. | | ||
| | --clr-btn-danger-outline-disabled-border-color | Danger outline button `disabled` border color. | | ||
| | --clr-btn-warning-color | Warning button text color. | | ||
| | --clr-btn-warning-bg-color | Warning button background color. | | ||
| | --clr-btn-warning-border-color | Warning button border color. | | ||
| | --clr-btn-warning-hover-color | Warning button `:hover` text color. | | ||
| | --clr-btn-warning-hover-bg-color | Warning button `:hover` background color. | | ||
| | --clr-btn-warning-box-shadow-color | Warning button `:active` box shadow. | | ||
| | --clr-btn-warning-disabled-color | Warning button `disabled` text color. | | ||
| | --clr-btn-warning-disabled-bg-color | Warning button `disabled` color. | | ||
| | --clr-btn-warning-disabled-border-color | Warning button `disabled` border color. | | ||
| | --clr-btn-warning-outline-color | Warning outline button text color. | | ||
| | --clr-btn-warning-outline-bg-color | Warning outline button background color. | | ||
| | --clr-btn-warning-outline-border-color | Warning outline button border color. | | ||
| | --clr-btn-warning-outline-hover-color | Warning outline button `:hover` text color. | | ||
| | --clr-btn-warning-outline-hover-bg-color | Warning outline button `:hover` background color. | | ||
| | --clr-btn-warning-outline-box-shadow-color | Warning outline button `:active` box shadow. | | ||
| | --clr-btn-warning-outline-disabled-color | Warning outline button `disabled` text color. | | ||
| | --clr-btn-warning-outline-disabled-bg-color | Warning outline button `disabled` background color. | | ||
| | --clr-btn-warning-outline-disabled-border-color | Warning outline button `disabled` border color. | | ||
| | --clr-btn-link-color | Link button text color. | | ||
| | --clr-btn-link-bg-color | Link button background color. | | ||
| | --clr-btn-link-border-color | Link button border color. | | ||
| | --clr-btn-link-hover-color | Link button `:hover` text color. | | ||
| | --clr-btn-link-hover-bg-color | Link button `:hover` background color. | | ||
| | --clr-btn-link-disabled-color | Link button `disabled` text color. | | ||
| | --clr-btn-link-disabled-bg-color | Link button `disabled` background color. | | ||
| | --clr-btn-link-disabled-border-color | Link button `disabled` border color. | | ||
| | --clr-btn-inverse-color | Inverse button text color. | | ||
| | --clr-btn-inverse-bg-color | Inverse button background color. | | ||
| | --clr-btn-inverse-border-color | Inverse button border color. | | ||
| | --clr-btn-inverse-hover-color | Inverse button `:hover` text color. | | ||
| | --clr-btn-inverse-hover-bg-color | Inverse button `:hover` background color. | | ||
| | --clr-btn-inverse-box-shadow-color | Inverse button `:active` box shadow. | | ||
| | --clr-btn-inverse-disabled-color | Inverse button `disabled` text color. | | ||
| | --clr-btn-inverse-disabled-bg-color | Inverse button `disabled` background color. | | ||
| | --clr-btn-inverse-disabled-border-color | Inverse button `disabled` border color. | | ||
| | --clr-btn-icon-disabled-color | Icon button `disabled` text color. | | ||
| | --clr-btn-group-focus-outline | `:focus` outline color of a checkbox or radio inside a button group button. | | ||
| | --clr-btn-default-checked-color | Checked checkbox default button text color. | | ||
| | --clr-btn-default-checked-bg-color | Checked checkbox default button background color. | | ||
| | --clr-btn-default-outline-checked-color | Checked checkbox default outline button text color. | | ||
| | --clr-btn-default-outline-checked-bg-color | Checked checkbox default outline button background color. | | ||
| | --clr-btn-primary-checked-color | Checked checkbox primary button text color. | | ||
| | --clr-btn-primary-checked-bg-color | Checked checkbox primary button background color. | | ||
| | --clr-btn-success-checked-color | Checked checkbox success button text color. | | ||
| | --clr-btn-success-checked-bg-color | Checked checkbox success button background color. | | ||
| | --clr-btn-success-outline-checked-color | Checked checkbox success outline button text color. | | ||
| | --clr-btn-success-outline-checked-bg-color | Checked checkbox success outline button background color. | | ||
| | --clr-btn-danger-checked-color | Checked checkbox danger button text color. | | ||
| | --clr-btn-danger-checked-bg-color | Checked checkbox danger button background color. | | ||
| | --clr-btn-danger-outline-checked-color | Checked checkbox danger outline button text color. | | ||
| | --clr-btn-danger-outline-checked-bg-color | Checked checkbox danger outline button background color. | | ||
| | --clr-btn-warning-checked-color | Checked checkbox warning button text color. | | ||
| | --clr-btn-warning-checked-bg-color | Checked checkbox warning button background color. | | ||
| | --clr-btn-warning-outline-checked-color | Checked checkbox warning outline button text color. | | ||
| | --clr-btn-warning-outline-checked-bg-color | Checked checkbox warning outline button background color. | | ||
| | --clr-btn-link-checked-color | Checked checkbox link button text color. | | ||
| | --clr-btn-link-checked-bg-color | Checked checkbox link button background color. | | ||
| | --clr-btn-inverse-checked-color | Checked checkbox inverse button text color. | | ||
| | --clr-btn-inverse-checked-bg-color | Checked checkbox inverse button background color. | | ||
|
|
||
| ## Class names | ||
|
|
||
| | Class name | Description | | ||
| | ------------------- | -------------------------------------------------------- | | ||
| | btn | Button. All of the following require this class as well. | | ||
| | btn-info | Info button. | | ||
| | btn-primary | Primary button. | | ||
| | btn-success | Success button. | | ||
| | btn-warning | Warning button. | | ||
| | btn-danger | Danger button. | | ||
| | btn-outline | Outline button. | | ||
| | btn-info-outline | Outline info button. | | ||
| | btn-success-outline | Outline success button. | | ||
| | btn-warning-outline | Outline warning button. | | ||
| | btn-danger-outline | Outline danger button. | | ||
| | btn-small | Small button. | | ||
| | btn-block | Block, full-width button. | | ||
| | btn-inverse | Inverse button. | | ||
| | btn-icon | Icon button. | | ||
| | btn-link | Link button. | |