From 6d3042efe55ab53333b3163e07f8d9707b6678bf Mon Sep 17 00:00:00 2001
From: Cam Wiegert <cam@camwiegert.com>
Date: Tue, 6 Nov 2018 12:50:06 -0600
Subject: [PATCH] docs(menu): document custom properties (#16249)

references #14850
---
 core/src/components/menu-button/menu-button.scss | 4 ++++
 core/src/components/menu-button/readme.md        | 7 +++++++
 core/src/components/menu/menu.scss               | 5 +++++
 core/src/components/menu/readme.md               | 9 +++++++++
 4 files changed, 25 insertions(+)

diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
index b824495a32..11bb8dc993 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/core/src/components/menu-button/menu-button.scss
@@ -4,6 +4,10 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --color: Color of the menu button
+   */
+
   color: var(--color);
 
   pointer-events: all;
diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md
index 6364598954..0a1396fc87 100644
--- a/core/src/components/menu-button/readme.md
+++ b/core/src/components/menu-button/readme.md
@@ -16,6 +16,13 @@ Menu Button is component that automatically creates the icon and functionality t
 | `mode`     | `mode`      | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined` |
 
 
+## CSS Custom Properties
+
+| Name      | Description              |
+| --------- | ------------------------ |
+| `--color` | Color of the menu button |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss
index 4c2e192419..0937b5a2cb 100644
--- a/core/src/components/menu/menu.scss
+++ b/core/src/components/menu/menu.scss
@@ -4,6 +4,11 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the menu
+   * @prop --width: Width of the menu
+   * @prop --width-small: Width of the small menu
+   */
   --width: #{$menu-width};
   --width-small: #{$menu-small-width};
   --background: #{$background-color};
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index 91a4716790..296af33726 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -129,6 +129,15 @@ Type: `Promise<boolean>`
 
 
 
+## CSS Custom Properties
+
+| Name            | Description             |
+| --------------- | ----------------------- |
+| `--background`  | Background of the menu  |
+| `--width`       | Width of the menu       |
+| `--width-small` | Width of the small menu |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*