fix(segment-button): add and document custom properties

references #14850
ionic-team · Aug 10, 2018 · 85ffe01 · 85ffe01
1 parent 154b70e
commit 85ffe01
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
@@ -89,6 +89,27 @@ The value of the segment button.
 Emitted when the segment button is clicked.
 
 
+## CSS Custom Properties
+
+| Name               | Description                  |
+| ------------------ | ---------------------------- |
+| `--background`     | Background of the button     |
+| `--border-color`   | Color of the button border   |
+| `--border-radius`  | Radius of the button border  |
+| `--border-style`   | Style of the button border   |
+| `--border-width`   | Width of the button border   |
+| `--color`          | Color of the buton text      |
+| `--icon-size`      | Size of the button icon      |
+| `--margin-bottom`  | Bottom margin of the button  |
+| `--margin-end`     | End margin of the button     |
+| `--margin-start`   | Start margin of the button   |
+| `--margin-top`     | Top margin of the button     |
+| `--padding-bottom` | Bottom padding of the button |
+| `--padding-end`    | End padding of the button    |
+| `--padding-start`  | Start padding of the button  |
+| `--padding-top`    | Top padding of the button    |
+| `--transition`     | Transition of the button     |
+
 
 ----------------------------------------------
 

diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
@@ -4,6 +4,24 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the button
+   * @prop --border-color: Color of the button border
+   * @prop --border-radius: Radius of the button border
+   * @prop --border-style: Style of the button border
+   * @prop --border-width: Width of the button border
+   * @prop --color: Color of the buton text
+   * @prop --icon-size: Size of the button icon
+   * @prop --margin-top: Top margin of the button
+   * @prop --margin-end: End margin of the button
+   * @prop --margin-bottom: Bottom margin of the button
+   * @prop --margin-start: Start margin of the button
+   * @prop --padding-top: Top padding of the button
+   * @prop --padding-end: End padding of the button
+   * @prop --padding-bottom: Bottom padding of the button
+   * @prop --padding-start: Start padding of the button
+   * @prop --transition: Transition of the button
+   */
   --padding-start: 0;
   --padding-end: 0;
   --padding-top: 0;
@@ -12,6 +30,8 @@
 
   flex: 1;
 
+  color: var(--color);
+
   text-decoration: none;
   text-overflow: ellipsis;
 
@@ -53,6 +73,7 @@
   border-color: var(--border-color);
 
   background: var(--background);
+  color: inherit;
 
   contain: content;
   cursor: pointer;