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

36
core/src/components/back-button/back-button.scss
View File

@ -6,11 +6,11 @@
:host {
/**
* @prop --background: Background of the button
* @prop --background-focused: Background of the button when focused
* @prop --background-focused: Background of the button when focused with the tab key
* @prop --background-hover: Background of the button when hover
*
* @prop --color: Text color of the button
* @prop --color-focused: Text color of the button when focused
* @prop --color-focused: Text color of the button when focused with the tab key
* @prop --color-hover: Text color of the button when hover
*
* @prop --min-width: Minimum width of the button
@ -24,25 +24,25 @@
*
* @prop --opacity: Opacity of the button
*
* @prop --margin-top: Margin top of the button
* @prop --margin-end: Margin end of the button
* @prop --margin-bottom: Margin bottom of the button
* @prop --margin-start: Margin start of the button
* @prop --margin-top: Top margin of the button
* @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button
* @prop --margin-bottom: Bottom margin of the button
* @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button
*
* @prop --padding-top: Padding top of the button
* @prop --padding-end: Padding end of the button
* @prop --padding-bottom: Padding bottom of the button
* @prop --padding-start: Padding start of the button
* @prop --padding-top: Top padding of the button
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
* @prop --padding-bottom: Bottom padding of the button
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
*
* @prop --icon-margin-top: Margin top of the button icon
* @prop --icon-margin-end: Margin end of the button icon
* @prop --icon-margin-bottom: Margin bottom of the button icon
* @prop --icon-margin-start: Margin start of the button icon
* @prop --icon-margin-top: Top margin of the button icon
* @prop --icon-margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon
* @prop --icon-margin-bottom: Bottom margin of the button icon
* @prop --icon-margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon
*
* @prop --icon-padding-top: Padding top of the button icon
* @prop --icon-padding-end: Padding end of the button icon
* @prop --icon-padding-bottom: Padding bottom of the button icon
* @prop --icon-padding-start: Padding start of the button icon
* @prop --icon-padding-top: Top padding of the button icon
* @prop --icon-padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon
* @prop --icon-padding-bottom: Bottom padding of the button icon
* @prop --icon-padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon
*
* @prop --icon-font-size: Font size of the button icon
* @prop --icon-font-weight: Font weight of the button icon

64
core/src/components/back-button/readme.md
View File

@ -245,38 +245,38 @@ export const BackButtonExample: React.FunctionComponent = () => (
## CSS Custom Properties
| Name | Description |
| ----------------------- | ------------------------------------- |
| `--background` | Background of the button |
| `--background-focused` | Background of the button when focused |
| `--background-hover` | Background of the button when hover |
| `--border-radius` | Border radius of the button |
| `--color` | Text color of the button |
| `--color-focused` | Text color of the button when focused |
| `--color-hover` | Text color of the button when hover |
| `--icon-font-size` | Font size of the button icon |
| `--icon-font-weight` | Font weight of the button icon |
| `--icon-margin-bottom` | Margin bottom of the button icon |
| `--icon-margin-end` | Margin end of the button icon |
| `--icon-margin-start` | Margin start of the button icon |
| `--icon-margin-top` | Margin top of the button icon |
| `--icon-padding-bottom` | Padding bottom of the button icon |
| `--icon-padding-end` | Padding end of the button icon |
| `--icon-padding-start` | Padding start of the button icon |
| `--icon-padding-top` | Padding top of the button icon |
| `--margin-bottom` | Margin bottom of the button |
| `--margin-end` | Margin end of the button |
| `--margin-start` | Margin start of the button |
| `--margin-top` | Margin top of the button |
| `--min-height` | Minimum height of the button |
| `--min-width` | Minimum width of the button |
| `--opacity` | Opacity of the button |
| `--padding-bottom` | Padding bottom of the button |
| `--padding-end` | Padding end of the button |
| `--padding-start` | Padding start of the button |
| `--padding-top` | Padding top of the button |
| `--ripple-color` | Color of the button ripple effect |
| `--transition` | Transition of the button |
| Name | Description |
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| `--background` | Background of the button |
| `--background-focused` | Background of the button when focused with the tab key |
| `--background-hover` | Background of the button when hover |
| `--border-radius` | Border radius of the button |
| `--color` | Text color of the button |
| `--color-focused` | Text color of the button when focused with the tab key |
| `--color-hover` | Text color of the button when hover |
| `--icon-font-size` | Font size of the button icon |
| `--icon-font-weight` | Font weight of the button icon |
| `--icon-margin-bottom` | Bottom margin of the button icon |
| `--icon-margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon |
| `--icon-margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon |
| `--icon-margin-top` | Top margin of the button icon |
| `--icon-padding-bottom` | Bottom padding of the button icon |
| `--icon-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
| `--icon-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
| `--icon-padding-top` | Top padding of the button icon |
| `--margin-bottom` | Bottom margin of the button |
| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button |
| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button |
| `--margin-top` | Top margin of the button |
| `--min-height` | Minimum height of the button |
| `--min-width` | Minimum width of the button |
| `--opacity` | Opacity of the button |
| `--padding-bottom` | Bottom padding of the button |
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
| `--padding-top` | Top padding of the button |
| `--ripple-color` | Color of the button ripple effect |
| `--transition` | Transition of the button |
## Dependencies