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

fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

Browse Source 
fixes #17069
This commit is contained in:
Santosh Yadav
2019-04-25 22:16:34 +05:30
committed by Brandy Carney
parent 2457a23e95
commit 0fa645b8cc
5 changed files with 58 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/segment-button/segment-button.ios.vars.scss
View File

@ -52,7 +52,7 @@ $segment-button-ios-border-radius: 4px !default;
$segment-button-ios-border-color: ion-color(primary, base) !default;
/// @prop - Size of an icon in the segment button
$segment-button-ios-icon-size: 26px !default;
$segment-button-ios-icon-size: 24px !default;
/// @prop - Line height of an icon in the segment button
$segment-button-ios-icon-line-height: 28px !default;

13
core/src/components/segment-button/segment-button.scss
View File

@ -42,6 +42,8 @@
--padding-top: 0;
--padding-bottom: 0;
display: flex;
flex: 1 0 auto;
flex-direction: column;
@ -86,15 +88,16 @@
position: relative;
flex-direction: inherit;
flex-grow: 1;
align-items: center;
justify-content: center;
width: 100%;
min-width: inherit;
max-width: inherit;
height: auto;
height: auto;
min-height: inherit;
max-height: inherit;
@ -192,17 +195,17 @@
// --------------------------------------------------
// Layout: icon start
:host(.segment-button-layout-icon-start) {
:host(.segment-button-layout-icon-start) .button-native {
flex-direction: row;
}
// Layout: icon end
:host(.segment-button-layout-icon-end) {
:host(.segment-button-layout-icon-end) .button-native {
flex-direction: row-reverse;
}
// Layout: icon bottom
:host(.segment-button-layout-icon-bottom) {
:host(.segment-button-layout-icon-bottom) .button-native {
flex-direction: column-reverse;
}