EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3039 styles: Fix text wrapping in block buttons

main
Albert Gasset 2019-06-03 11:50:42 +02:00
parent 509222e2d2
commit 55fe415c53
1 changed files with 50 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/app/app.scss
View File

@ -678,7 +678,7 @@ ion-app.app-root {
> ion-icon { > ion-icon {
color: $color-base; color: $color-base;
position: absolute; position: absolute;
@include position(0, null, null, 16px) @include position(0, null, null, 16px);
height: 100%; height: 100%;
font-size: 24px; font-size: 24px;
display: flex; display: flex;
@ -1103,3 +1103,52 @@ ion-app.platform-desktop {
} }
} }
} }
// Fix text wrapping in block buttons.
.button-block[text-wrap] {
height: auto;
// Changed from "strict" because the size depends on child elements.
contain: content;
// Add vertical padding, we cannot rely on a fixed height + centering like in normal buttons.
.item-md & {
padding-top: .5357em;
padding-bottom: .5357em;
}
.item-md &.item-button {
padding-top: .6em;
padding-bottom: .6em;
}
.item-ios & {
padding-top: .9em;
padding-bottom: .9em;
}
.item-ios &.item-button {
padding-top: .7846em;
padding-bottom: .7846em;
}
// Keep a consistent height with normal buttons if text does not wrap.
display: flex;
flex-flow: row;
align-items: center;
&.button-md {
min-height: $button-md-height;
}
&.button-large-md {
min-height: $button-md-large-height;
}
&.button-small-md {
min-height: $button-md-small-height;
}
&.button-ios {
min-height: $button-ios-height;
}
&.button-large-ios {
min-height: $button-ios-large-height;
}
&.button-small-ios {
min-height: $button-ios-small-height;
}
}