docs(grid): document the custom properties for all grid vars

references #14850
This commit is contained in:
Brandy Carney
2018-08-16 18:14:29 -04:00
parent 0372aec650
commit 0ef06624a2
4 changed files with 55 additions and 0 deletions

View File

@ -4,6 +4,15 @@
// --------------------------------------------------
:host {
/**
* @prop --ion-grid-columns: The number of total Columns in the Grid
* @prop --ion-grid-column-padding: Padding for the Column
* @prop --ion-grid-column-padding-xs: Padding for the Column on xs screens and up
* @prop --ion-grid-column-padding-sm: Padding for the Column on sm screens and up
* @prop --ion-grid-column-padding-md: Padding for the Column on md screens and up
* @prop --ion-grid-column-padding-lg: Padding for the Column on lg screens and up
* @prop --ion-grid-column-padding-xl: Padding for the Column on xl screens and up
*/
@include make-breakpoint-padding($grid-column-paddings);
@include margin(0);

View File

@ -54,6 +54,18 @@ There are several attributes that can be added to a column to customize this beh
| `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string` |
## CSS Custom Properties
| Name | Description |
| ------------------------------ | ------------------------------------------- |
| `--ion-grid-column-padding` | Padding for the Column |
| `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up |
| `--ion-grid-column-padding-md` | Padding for the Column on md screens and up |
| `--ion-grid-column-padding-sm` | Padding for the Column on sm screens and up |
| `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up |
| `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*