Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix(core) icon change the font size to align ion segment button with icon #17751

Merged
merged 34 commits into from Apr 25, 2019
Merged

Fix(core) icon change the font size to align ion segment button with icon #17751

Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
9f948e0
fix(core): modified icon font size
santoshyadavdev Mar 11, 2019
2653726
Merge branch 'master' of https://github.com/ionic-team/ionic into fix…
santoshyadavdev Mar 11, 2019
e7fd518
update test case and correct variable
santoshyadavdev Mar 12, 2019
296fff7
Merge branch 'master' into fix(core)--icon-change-the-font-size-to-al…
brandyscarney Mar 14, 2019
f826fb7
Merge branch 'master' into fix(core)--icon-change-the-font-size-to-al…
brandyscarney Mar 15, 2019
7d451cd
Merge branch 'master' into fix(core)--icon-change-the-font-size-to-al…
brandyscarney Mar 15, 2019
fdcdbc5
fix(datetime): default to local date (#17706)
liamdebeasi Mar 11, 2019
17ad0cd
fix(core): modified icon font size
santoshyadavdev Mar 11, 2019
42e43b9
update test case and correct variable
santoshyadavdev Mar 12, 2019
7af7de7
fix(datetime): fix edge cases with datetime and invalid values (#17769)
liamdebeasi Mar 13, 2019
89c7f50
chore(screenshot): slow down concurrent screenshot downloads (#17771)
adamdbradley Mar 13, 2019
ffb16e7
fix(datetime): fix placeholder not being respected (#17772)
liamdebeasi Mar 13, 2019
8406b5e
fix(datetime): add additional checks for placeholders in angular (#17…
liamdebeasi Mar 13, 2019
d537e10
fix(transition): animate all toolbars in iOS page transitions (#17224)
zakton5 Mar 14, 2019
3f241f7
fix(chip): use transparent outline on color chips (#17719)
brandyscarney Mar 15, 2019
e1fee16
fix(platform): account for larger tablets (#17630)
liamdebeasi Mar 15, 2019
bab3294
fix(item-option): add styling for slots other than icon-only (#17711)
brandyscarney Mar 15, 2019
7413912
fix(toggle): do not use the contrast color for toggle inner color (#1…
brandyscarney Mar 15, 2019
7b6da69
docs(tabs): correct ion-route property `path` to `url` (#17794)
jocubeit Mar 15, 2019
866a09a
fix(spinner): fix default spinner logic for relevant components (#17660)
abennouna Mar 15, 2019
be32340
fix(popover): update animation origin in RTL/MD (#17645)
abennouna Mar 15, 2019
0e2c9de
code review changes
santoshyadavdev Mar 16, 2019
2630331
Merge branch 'master' of https://github.com/ionic-team/ionic into fix…
santoshyadavdev Mar 16, 2019
59a069b
Merge branch 'master' into fix(core)--icon-change-the-font-size-to-al…
santoshyadavdev Mar 16, 2019
4cd616e
Merge branch 'fix(core)--icon-change-the-font-size-to-align-ion-segme…
santoshyadavdev Mar 16, 2019
8b12904
lint errors
santoshyadavdev Mar 16, 2019
5c92d37
lint errors
santoshyadavdev Mar 16, 2019
6fa11ce
lint fix
santoshyadavdev Mar 16, 2019
60c93dc
code review changes
santoshyadavdev Mar 20, 2019
3ce6613
fixed lint error
santoshyadavdev Mar 20, 2019
48c2afa
Merge branch 'master' into fix(core)--icon-change-the-font-size-to-al…
brandyscarney Mar 25, 2019
ddbe46f
Merge branch 'master' into fix(core)--icon-change-the-font-size-to-al…
brandyscarney Apr 25, 2019
c371a26
fix(segment-button): update button flex properties to fill space
brandyscarney Apr 25, 2019
1982005
Merge branch 'master' into fix(core)--icon-change-the-font-size-to-al…
brandyscarney Apr 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion core/src/components/segment-button/segment-button.ios.vars.scss
View file
Open in desktop
Expand Up @@ -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;
Expand Down
13 changes: 8 additions & 5 deletions core/src/components/segment-button/segment-button.scss
View file
Open in desktop
Expand Up @@ -42,6 +42,8 @@
--padding-top: 0;
--padding-bottom: 0;

display: flex;

flex: 1 0 auto;
flex-direction: column;

Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion core/src/components/segment/segment.scss
View file
Open in desktop
Expand Up @@ -12,7 +12,7 @@

display: flex;

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

width: 100%;
Expand Down
15 changes: 15 additions & 0 deletions core/src/components/segment/test/basic/index.html
View file
Open in desktop
Expand Up @@ -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>
Expand Down
35 changes: 33 additions & 2 deletions core/src/components/segment/test/standalone/index.html
View file
Open in desktop
Expand Up @@ -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>
Expand Down Expand Up @@ -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>