Skip to content
Permalink
Browse files

fix(segment): decrease icon size on ios and stretch segment buttons t…

…o fill height (#17751)

fixes #17069
  • Loading branch information...
santoshyadav198613 authored and brandyscarney committed Apr 25, 2019
1 parent 2457a23 commit 0fa645b8cc62d37f5e860b2d974d9e9d75beb857
@@ -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;
@@ -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;
}

@@ -12,7 +12,7 @@

display: flex;

align-items: center;
align-items: stretch;
justify-content: center;

width: 100%;
@@ -110,6 +110,21 @@
</ion-segment-button>
</ion-segment>

<ion-segment>
<ion-segment-button value="330">
<ion-label>330ml</ion-label>
</ion-segment-button>
<ion-segment-button value="440">
<ion-label>440ml</ion-label>
</ion-segment-button>
<ion-segment-button value="500">
<ion-label>500ml</ion-label>
</ion-segment-button>
<ion-segment-button value="custom">
<ion-icon name="create"></ion-icon>
</ion-segment-button>
</ion-segment>

<ion-segment name="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks">
<ion-label>Bookmarks</ion-label>
@@ -90,6 +90,33 @@
<ion-icon name="logo-slack"></ion-icon>
</ion-segment-button>
</ion-segment>

<ion-segment value="2" class="custom-indicator">
<ion-segment-button value="1">
<ion-icon name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button class="large-icon" value="2">
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="3">
<ion-icon name="person"></ion-icon>
</ion-segment-button>
</ion-segment>

<ion-segment value="2" class="custom-indicator">
<ion-segment-button layout="icon-start" value="1">
<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-segment-button>
<ion-segment-button layout="icon-start" class="large-icon" value="2">
<ion-icon name="call"></ion-icon>
<ion-label>Call</ion-label>
</ion-segment-button>
<ion-segment-button layout="icon-start" value="3">
<ion-icon name="person"></ion-icon>
<ion-label>Person</ion-label>
</ion-segment-button>
</ion-segment>
</body>

<script>
@@ -180,10 +207,14 @@
--color-checked: #3aaf85;
}
.custom-icon ion-icon {
font-size: 44px;
.custom-indicator {
--indicator-color: lightgray;
}
.custom-icon ion-icon,
.large-icon ion-icon {
font-size: 44px;
}
</style>

</html>

0 comments on commit 0fa645b

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