Skip to content

Commit 73599c2

Browse files
brandyscarneybrandyscarney
authored
docs(components): document what start and end mean for CSS variables (ionic-team#18538)
1 parent 26ecf2b commit 73599c2

File tree

34 files changed

+380
-355
lines changed

34 files changed

+380
-355
lines changed

‎core/src/components/action-sheet/action-sheet.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
:host {
77
/**
88
* @prop --background: Background of the action sheet group
9-
* @prop --background-activated: Background of the activated action sheet button
9+
* @prop --background-activated: Background of the action sheet button when pressed
1010
* @prop --background-selected: Background of the selected action sheet button
11+
*
1112
* @prop --color: Color of the action sheet text
1213
*
1314
* @prop --min-width: Minimum width of the action sheet

‎core/src/components/action-sheet/readme.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -320,18 +320,18 @@ Type: `Promise<void>`
320320
321321
## CSS Custom Properties
322322
323-
| Name | Description |
324-
| ------------------------ | ----------------------------------------------- |
325-
| `--background` | Background of the action sheet group |
326-
| `--background-activated` | Background of the activated action sheet button |
327-
| `--background-selected` | Background of the selected action sheet button |
328-
| `--color` | Color of the action sheet text |
329-
| `--height` | height of the action sheet |
330-
| `--max-height` | Maximum height of the action sheet |
331-
| `--max-width` | Maximum width of the action sheet |
332-
| `--min-height` | Minimum height of the action sheet |
333-
| `--min-width` | Minimum width of the action sheet |
334-
| `--width` | Width of the action sheet |
323+
| Name | Description |
324+
| ------------------------ | -------------------------------------------------- |
325+
| `--background` | Background of the action sheet group |
326+
| `--background-activated` | Background of the action sheet button when pressed |
327+
| `--background-selected` | Background of the selected action sheet button |
328+
| `--color` | Color of the action sheet text |
329+
| `--height` | height of the action sheet |
330+
| `--max-height` | Maximum height of the action sheet |
331+
| `--max-width` | Maximum width of the action sheet |
332+
| `--min-height` | Minimum height of the action sheet |
333+
| `--min-width` | Minimum width of the action sheet |
334+
| `--width` | Width of the action sheet |
335335
336336
337337
## Dependencies

‎core/src/components/back-button/back-button.scss‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
:host {
77
/**
88
* @prop --background: Background of the button
9-
* @prop --background-focused: Background of the button when focused
9+
* @prop --background-focused: Background of the button when focused with the tab key
1010
* @prop --background-hover: Background of the button when hover
1111
*
1212
* @prop --color: Text color of the button
13-
* @prop --color-focused: Text color of the button when focused
13+
* @prop --color-focused: Text color of the button when focused with the tab key
1414
* @prop --color-hover: Text color of the button when hover
1515
*
1616
* @prop --min-width: Minimum width of the button
@@ -24,25 +24,25 @@
2424
*
2525
* @prop --opacity: Opacity of the button
2626
*
27-
* @prop --margin-top: Margin top of the button
28-
* @prop --margin-end: Margin end of the button
29-
* @prop --margin-bottom: Margin bottom of the button
30-
* @prop --margin-start: Margin start of the button
27+
* @prop --margin-top: Top margin of the button
28+
* @prop --margin-end: Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button
29+
* @prop --margin-bottom: Bottom margin of the button
30+
* @prop --margin-start: Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button
3131
*
32-
* @prop --padding-top: Padding top of the button
33-
* @prop --padding-end: Padding end of the button
34-
* @prop --padding-bottom: Padding bottom of the button
35-
* @prop --padding-start: Padding start of the button
32+
* @prop --padding-top: Top padding of the button
33+
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
34+
* @prop --padding-bottom: Bottom padding of the button
35+
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
3636
*
37-
* @prop --icon-margin-top: Margin top of the button icon
38-
* @prop --icon-margin-end: Margin end of the button icon
39-
* @prop --icon-margin-bottom: Margin bottom of the button icon
40-
* @prop --icon-margin-start: Margin start of the button icon
37+
* @prop --icon-margin-top: Top margin of the button icon
38+
* @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
39+
* @prop --icon-margin-bottom: Bottom margin of the button icon
40+
* @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
4141
*
42-
* @prop --icon-padding-top: Padding top of the button icon
43-
* @prop --icon-padding-end: Padding end of the button icon
44-
* @prop --icon-padding-bottom: Padding bottom of the button icon
45-
* @prop --icon-padding-start: Padding start of the button icon
42+
* @prop --icon-padding-top: Top padding of the button icon
43+
* @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
44+
* @prop --icon-padding-bottom: Bottom padding of the button icon
45+
* @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
4646
*
4747
* @prop --icon-font-size: Font size of the button icon
4848
* @prop --icon-font-weight: Font weight of the button icon

‎core/src/components/back-button/readme.md‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -245,38 +245,38 @@ export const BackButtonExample: React.FunctionComponent = () => (
245245

246246
## CSS Custom Properties
247247

248-
| Name | Description |
249-
| ----------------------- | ------------------------------------- |
250-
| `--background` | Background of the button |
251-
| `--background-focused` | Background of the button when focused |
252-
| `--background-hover` | Background of the button when hover |
253-
| `--border-radius` | Border radius of the button |
254-
| `--color` | Text color of the button |
255-
| `--color-focused` | Text color of the button when focused |
256-
| `--color-hover` | Text color of the button when hover |
257-
| `--icon-font-size` | Font size of the button icon |
258-
| `--icon-font-weight` | Font weight of the button icon |
259-
| `--icon-margin-bottom` | Margin bottom of the button icon |
260-
| `--icon-margin-end` | Margin end of the button icon |
261-
| `--icon-margin-start` | Margin start of the button icon |
262-
| `--icon-margin-top` | Margin top of the button icon |
263-
| `--icon-padding-bottom` | Padding bottom of the button icon |
264-
| `--icon-padding-end` | Padding end of the button icon |
265-
| `--icon-padding-start` | Padding start of the button icon |
266-
| `--icon-padding-top` | Padding top of the button icon |
267-
| `--margin-bottom` | Margin bottom of the button |
268-
| `--margin-end` | Margin end of the button |
269-
| `--margin-start` | Margin start of the button |
270-
| `--margin-top` | Margin top of the button |
271-
| `--min-height` | Minimum height of the button |
272-
| `--min-width` | Minimum width of the button |
273-
| `--opacity` | Opacity of the button |
274-
| `--padding-bottom` | Padding bottom of the button |
275-
| `--padding-end` | Padding end of the button |
276-
| `--padding-start` | Padding start of the button |
277-
| `--padding-top` | Padding top of the button |
278-
| `--ripple-color` | Color of the button ripple effect |
279-
| `--transition` | Transition of the button |
248+
| Name | Description |
249+
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
250+
| `--background` | Background of the button |
251+
| `--background-focused` | Background of the button when focused with the tab key |
252+
| `--background-hover` | Background of the button when hover |
253+
| `--border-radius` | Border radius of the button |
254+
| `--color` | Text color of the button |
255+
| `--color-focused` | Text color of the button when focused with the tab key |
256+
| `--color-hover` | Text color of the button when hover |
257+
| `--icon-font-size` | Font size of the button icon |
258+
| `--icon-font-weight` | Font weight of the button icon |
259+
| `--icon-margin-bottom` | Bottom margin of the button icon |
260+
| `--icon-margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon |
261+
| `--icon-margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon |
262+
| `--icon-margin-top` | Top margin of the button icon |
263+
| `--icon-padding-bottom` | Bottom padding of the button icon |
264+
| `--icon-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
265+
| `--icon-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
266+
| `--icon-padding-top` | Top padding of the button icon |
267+
| `--margin-bottom` | Bottom margin of the button |
268+
| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button |
269+
| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button |
270+
| `--margin-top` | Top margin of the button |
271+
| `--min-height` | Minimum height of the button |
272+
| `--min-width` | Minimum width of the button |
273+
| `--opacity` | Opacity of the button |
274+
| `--padding-bottom` | Bottom padding of the button |
275+
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
276+
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
277+
| `--padding-top` | Top padding of the button |
278+
| `--ripple-color` | Color of the button ripple effect |
279+
| `--transition` | Transition of the button |
280280

281281

282282
## Dependencies

‎core/src/components/badge/badge.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
* @prop --background: Background of the badge
99
* @prop --color: Text color of the badge
1010
*
11-
* @prop --padding-top: Padding top of the badge
12-
* @prop --padding-end: Padding end of the badge
13-
* @prop --padding-bottom: Padding bottom of the badge
14-
* @prop --padding-start: Padding start of the badge
11+
* @prop --padding-top: Top padding of the badge
12+
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge
13+
* @prop --padding-bottom: Bottom padding of the badge
14+
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
1515
*/
1616
--background: #{ion-color(primary, base)};
1717
--color: #{ion-color(primary, contrast)};

‎core/src/components/badge/readme.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -106,14 +106,14 @@ export const BadgeExample: React.FunctionComponent = () => (
106106

107107
## CSS Custom Properties
108108

109-
| Name | Description |
110-
| ------------------ | --------------------------- |
111-
| `--background` | Background of the badge |
112-
| `--color` | Text color of the badge |
113-
| `--padding-bottom` | Padding bottom of the badge |
114-
| `--padding-end` | Padding end of the badge |
115-
| `--padding-start` | Padding start of the badge |
116-
| `--padding-top` | Padding top of the badge |
109+
| Name | Description |
110+
| ------------------ | -------------------------------------------------------------------------------------------------------- |
111+
| `--background` | Background of the badge |
112+
| `--color` | Text color of the badge |
113+
| `--padding-bottom` | Bottom padding of the badge |
114+
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge |
115+
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge |
116+
| `--padding-top` | Top padding of the badge |
117117

118118

119119
----------------------------------------------

‎core/src/components/button/button.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
:host {
77
/**
88
* @prop --background: Background of the button
9-
* @prop --background-activated: Background of the button when activated
10-
* @prop --background-focused: Background of the button when focused
9+
* @prop --background-activated: Background of the button when pressed
10+
* @prop --background-focused: Background of the button when focused with the tab key
1111
* @prop --background-hover: Background of the button on hover
1212
*
1313
* @prop --color: Text color of the button
14-
* @prop --color-activated: Text color of the button when activated
15-
* @prop --color-focused: Text color of the button when focused
14+
* @prop --color-activated: Text color of the button when pressed
15+
* @prop --color-focused: Text color of the button when focused with the tab key
1616
* @prop --color-hover: Text color of the button when hover
1717
*
1818
* @prop --transition: Transition of the button
@@ -27,10 +27,10 @@
2727
* @prop --box-shadow: Box shadow of the button
2828
* @prop --opacity: Opacity of the button
2929
*
30-
* @prop --padding-top: Padding top of the button
31-
* @prop --padding-end: Padding end of the button
32-
* @prop --padding-bottom: Padding bottom of the button
33-
* @prop --padding-start: Padding start of the button
30+
* @prop --padding-top: Top padding of the button
31+
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button
32+
* @prop --padding-bottom: Bottom padding of the button
33+
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
3434
*/
3535
--overflow: hidden;
3636
--ripple-color: currentColor;

0 commit comments

Comments
 (0)