Skip to content
Permalink
Browse files

feat(menu-button): add css variables for padding (#18188)

fixes #18187
  • Loading branch information...
JustDoItSascha authored and brandyscarney committed May 7, 2019
1 parent f912206 commit ef989779b0a12fada5f0bb290e87aebfe92de6c3
@@ -574,6 +574,10 @@ ion-menu-button,prop,color,string | undefined,undefined,false,false
ion-menu-button,prop,menu,string | undefined,undefined,false,false
ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
ion-menu-button,css-prop,--color
ion-menu-button,css-prop,--padding-bottom
ion-menu-button,css-prop,--padding-end
ion-menu-button,css-prop,--padding-start
ion-menu-button,css-prop,--padding-top

ion-menu-controller,none
ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise<boolean>
@@ -5,16 +5,14 @@

:host {
--color: #{ion-color(primary, base)};
--padding-start: 5px;
--padding-end: 5px;
}

:host(.activated) {
opacity: 0.4;
}

button {
@include padding(0, 5px);
}

ion-icon {
font-size: 31px;
}
@@ -5,10 +5,8 @@

:host {
--color: initial;
}

button {
@include padding(0, 8px);
--padding-start: 8px;
--padding-end: 8px;
}

ion-icon {
@@ -6,7 +6,14 @@
:host {
/**
* @prop --color: Color of the menu button
*
* @prop --padding-top: Padding top of the button
* @prop --padding-end: Padding end of the button
* @prop --padding-bottom: Padding bottom of the button
* @prop --padding-start: Padding start of the button
*/
--padding-top: 0;
--padding-bottom: 0;

color: var(--color);

@@ -22,7 +29,7 @@
button {
@include text-inherit();
@include margin(0);
@include padding(0);
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include font-smoothing();

display: flex;
@@ -18,9 +18,13 @@ Menu Button is component that automatically creates the icon and functionality t

## CSS Custom Properties

| Name | Description |
| --------- | ------------------------ |
| `--color` | Color of the menu button |
| Name | Description |
| ------------------ | ---------------------------- |
| `--color` | Color of the menu button |
| `--padding-bottom` | Padding bottom of the button |
| `--padding-end` | Padding end of the button |
| `--padding-start` | Padding start of the button |
| `--padding-top` | Padding top of the button |


----------------------------------------------

0 comments on commit ef98977

Please sign in to comment.
You can’t perform that action at this time.