javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #18187
This commit is contained in:
JustDoItSascha
2019-05-07 18:13:56 +02:00
committed by Brandy Carney
parent f912206af8
commit ef989779b0
5 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/api.txt
View File

@ -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,menu,string | undefined,undefined,false,false
ion-menu-button,prop,mode,"ios" | "md",undefined,false,false ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
ion-menu-button,css-prop,--color 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,none
ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise<boolean> ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise<boolean>

6
core/src/components/menu-button/menu-button.ios.scss
View File

@ -5,16 +5,14 @@
:host { :host {
--color: #{ion-color(primary, base)}; --color: #{ion-color(primary, base)};
--padding-start: 5px;
--padding-end: 5px;
} }
:host(.activated) { :host(.activated) {
opacity: 0.4; opacity: 0.4;
} }
button {
@include padding(0, 5px);
}
ion-icon { ion-icon {
font-size: 31px; font-size: 31px;
} }

6
core/src/components/menu-button/menu-button.md.scss
View File

@ -5,10 +5,8 @@
:host { :host {
--color: initial; --color: initial;
} --padding-start: 8px;
--padding-end: 8px;
button {
@include padding(0, 8px);
} }
ion-icon { ion-icon {

9
core/src/components/menu-button/menu-button.scss
View File

@ -6,7 +6,14 @@
:host { :host {
/** /**
* @prop --color: Color of the menu button * @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); color: var(--color);
@ -22,7 +29,7 @@
button { button {
@include text-inherit(); @include text-inherit();
@include margin(0); @include margin(0);
@include padding(0); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include font-smoothing(); @include font-smoothing();
display: flex; display: flex;

6
core/src/components/menu-button/readme.md
View File

@ -19,8 +19,12 @@ Menu Button is component that automatically creates the icon and functionality t
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |
| --------- | ------------------------ | | ------------------ | ---------------------------- |
| `--color` | Color of the menu button | | `--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 |
---------------------------------------------- ----------------------------------------------