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

fix(menu-button): move font-size to host for easier customization (#18699)

Browse Source 
fixes #18667
This commit is contained in:
Brandy Carney
2019-07-02 15:37:16 -04:00
committed by GitHub
parent c6bb2730a8
commit 876ab41ba8
3 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,8 @@
--padding-end: 5px; --padding-end: 5px;
height: 32px; height: 32px;
font-size: 31px;
} }
:host(.activated) { :host(.activated) {
@ -23,10 +25,6 @@
} }
} }
ion-icon {
font-size: 31px;
}
// Menu Button Color: Focused // Menu Button Color: Focused
// -------------------------------------------------- // --------------------------------------------------

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

@ -13,12 +13,11 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
}
ion-icon {
font-size: 24px; font-size: 24px;
} }
// Menu Button Color: Hover // Menu Button Color: Hover
// -------------------------------------------------- // --------------------------------------------------

7
core/src/components/menu-button/test/basic/index.html
View File

@ -27,6 +27,8 @@
<ion-menu-button auto-hide="false" color="secondary" class="custom"></ion-menu-button> <ion-menu-button auto-hide="false" color="secondary" class="custom"></ion-menu-button>
<ion-menu-button auto-hide="false" class="custom ion-focused"></ion-menu-button> <ion-menu-button auto-hide="false" class="custom ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" color="secondary" class="custom ion-focused"></ion-menu-button> <ion-menu-button auto-hide="false" color="secondary" class="custom ion-focused"></ion-menu-button>
<ion-menu-button auto-hide="false" class="custom-large"></ion-menu-button>
<ion-menu-button auto-hide="false" class="custom-large ion-focused"></ion-menu-button>
<h1>Colors</h1> <h1>Colors</h1>
<ion-menu-button auto-hide="false" color="primary"></ion-menu-button> <ion-menu-button auto-hide="false" color="primary"></ion-menu-button>
@ -103,6 +105,11 @@
--background-focused: rgb(255, 105, 180, .24); --background-focused: rgb(255, 105, 180, .24);
} }
.custom-large {
width: 84px;
height: 84px;
font-size: 44px;
}
</style> </style>
</body> </body>