javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): document what start and end mean for CSS variables (#18538)

Browse Source
This commit is contained in:
Brandy Carney
2019-06-21 15:11:07 -04:00
committed by GitHub
parent 26ecf2b10f
commit 73599c22aa
34 changed files with 380 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
core/src/components/segment-button/readme.md
View File

@ -639,32 +639,32 @@ export const SegmentButtonExample: React.FunctionComponent = () => (
## CSS Custom Properties
| Name | Description |
| --------------------------- | ------------------------------------------------------------------- |
| `--background` | Background of the segment button |
| `--background-activated` | Background of the activated (pressed) segment button |
| `--background-checked` | Background of the checked segment button |
| `--background-hover` | Background of the segment button on hover |
| `--border-color` | Color of the segment button border |
| `--border-radius` | Radius of the segment button border |
| `--border-style` | Style of the segment button border |
| `--border-width` | Width of the segment button border |
| `--color` | Color of the segment button |
| `--color-activated` | Color of the activated segment button |
| `--color-checked` | Color of the checked segment button |
| `--color-checked-disabled` | Color of the checked & disabled segment button |
| `--color-disabled` | Color of the disabled segment button |
| `--indicator-color` | Color of the indicator (highlight) under the segment button |
| `--indicator-color-checked` | Color of the indicator (highlight) under the checked segment button |
| `--margin-bottom` | Bottom margin of the segment button |
| `--margin-end` | End margin of the segment button |
| `--margin-start` | Start margin of the segment button |
| `--margin-top` | Top margin of the segment button |
| `--padding-bottom` | Bottom padding of the segment button |
| `--padding-end` | End padding of the segment button |
| `--padding-start` | Start padding of the segment button |
| `--padding-top` | Top padding of the segment button |
| `--transition` | Transition of the segment button |
| Name | Description |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `--background` | Background of the segment button |
| `--background-activated` | Background of the segment button when pressed |
| `--background-checked` | Background of the checked segment button |
| `--background-hover` | Background of the segment button on hover |
| `--border-color` | Color of the segment button border |
| `--border-radius` | Radius of the segment button border |
| `--border-style` | Style of the segment button border |
| `--border-width` | Width of the segment button border |
| `--color` | Color of the segment button |
| `--color-activated` | Color of the segment button when pressed |
| `--color-checked` | Color of the checked segment button |
| `--color-checked-disabled` | Color of the checked & disabled segment button |
| `--color-disabled` | Color of the disabled segment button |
| `--indicator-color` | Color of the indicator (highlight) under the segment button |
| `--indicator-color-checked` | Color of the indicator (highlight) under the checked segment button |
| `--margin-bottom` | Bottom margin of the segment button |
| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button |
| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button |
| `--margin-top` | Top margin of the segment button |
| `--padding-bottom` | Bottom padding of the segment button |
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button |
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button |
| `--padding-top` | Top padding of the segment button |
| `--transition` | Transition of the segment button |
## Dependencies

12
core/src/components/segment-button/segment-button.scss
View File

@ -7,11 +7,11 @@
/**
* @prop --background: Background of the segment button
* @prop --background-hover: Background of the segment button on hover
* @prop --background-activated: Background of the activated (pressed) segment button
* @prop --background-activated: Background of the segment button when pressed
* @prop --background-checked: Background of the checked segment button
*
* @prop --color: Color of the segment button
* @prop --color-activated: Color of the activated segment button
* @prop --color-activated: Color of the segment button when pressed
* @prop --color-checked: Color of the checked segment button
* @prop --color-disabled: Color of the disabled segment button
* @prop --color-checked-disabled: Color of the checked & disabled segment button
@ -22,14 +22,14 @@
* @prop --border-width: Width of the segment button border
*
* @prop --margin-top: Top margin of the segment button
* @prop --margin-end: End margin of the segment button
* @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button
* @prop --margin-bottom: Bottom margin of the segment button
* @prop --margin-start: Start margin of the segment button
* @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button
*
* @prop --padding-top: Top padding of the segment button
* @prop --padding-end: End padding of the segment button
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button
* @prop --padding-bottom: Bottom padding of the segment button
* @prop --padding-start: Start padding of the segment button
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button
*
* @prop --transition: Transition of the segment button
*