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

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

View File

@ -695,19 +695,19 @@ export const ToolbarExample: React.FunctionComponent = () => (
## CSS Custom Properties
| Name | Description |
| ------------------ | --------------------------------- |
| `--background` | Background of the toolbar |
| `--border-color` | Color of the toolbar border |
| `--border-style` | Style of the toolbar border |
| `--border-width` | Width of the toolbar border |
| `--color` | Color of the toolbar text |
| `--min-height` | Minimum height of the toolbar |
| `--opacity` | Opacity of the toolbar background |
| `--padding-bottom` | Bottom padding of the toolbar |
| `--padding-end` | End padding of the toolbar |
| `--padding-start` | Start padding of the toolbar |
| `--padding-top` | Top padding of the toolbar |
| Name | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- |
| `--background` | Background of the toolbar |
| `--border-color` | Color of the toolbar border |
| `--border-style` | Style of the toolbar border |
| `--border-width` | Width of the toolbar border |
| `--color` | Color of the toolbar text |
| `--min-height` | Minimum height of the toolbar |
| `--opacity` | Opacity of the toolbar background |
| `--padding-bottom` | Bottom padding of the toolbar |
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar |
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar |
| `--padding-top` | Top padding of the toolbar |
----------------------------------------------

View File

@ -6,16 +6,21 @@
:host {
/**
* @prop --background: Background of the toolbar
*
* @prop --border-color: Color of the toolbar border
* @prop --border-style: Style of the toolbar border
* @prop --border-width: Width of the toolbar border
*
* @prop --color: Color of the toolbar text
*
* @prop --min-height: Minimum height of the toolbar
*
* @prop --opacity: Opacity of the toolbar background
* @prop --padding-bottom: Bottom padding of the toolbar
* @prop --padding-end: End padding of the toolbar
* @prop --padding-start: Start padding of the toolbar
*
* @prop --padding-top: Top padding of the toolbar
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar
* @prop --padding-bottom: Bottom padding of the toolbar
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar
*/
--border-width: 0;
--border-style: solid;