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

MOBILE-3320 core: Improve heading styles

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-05-21 09:24:09 +02:00
parent f0155f9121
commit 33d2379eaa
1 changed files with 46 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/theme/theme.base.scss
View File

@ -50,16 +50,54 @@
.font-sm { font-size: 1.2rem; } .font-sm { font-size: 1.2rem; }
// Headings. // Headings.
.item-heading { // Some styles taken from ion-label
font-size: 16px !important; ion-label .item-heading {
color: initial !important; text-overflow: inherit;
overflow: inherit;
--color: initial;
color: var(--color);
line-height: 20px;
} }
.md ion-label .item-heading {
@include margin(2px, 0);
font-size: 16px;
font-weight: normal;
&.item-heading-secondary {
@include margin(2px, 0);
font-size: 14px;
font-weight: normal;
line-height: normal;
}
}
.ios ion-label .item-heading {
@include margin(0, 0, 2px);
font-size: 17px;
font-weight: normal;
&.item-heading-secondary {
@include margin(0, 0, 3px);
font-size: 14px;
font-weight: normal;
line-height: normal;
}
}
// Some styles taken from ion-title
ion-header h1, ion-header h1,
ion-header h2 { ion-header h2 {
display: block; display: block;
transform: translateZ(0); transform: translateZ(0);
color: initial; --color: initial;
color: var(--color);
margin: 0; margin: 0;
width: 100%; width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -70,7 +108,7 @@ ion-header h2 {
ion-app.md ion-header h1, ion-app.md ion-header h1,
ion-app.md ion-header h2 { ion-app.md ion-header h2 {
padding-inline: 20px; @include padding(0, 20px);
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
letter-spacing: .0125em; letter-spacing: .0125em;
@ -78,14 +116,11 @@ ion-app.md ion-header h2 {
ion-app.ios ion-header h1, ion-app.ios ion-header h1,
ion-app.ios ion-header h2 { ion-app.ios ion-header h2 {
top: 0; @include position(0, null, null, 0);
left: 0; @include padding(0, 90px, 0);
padding-inline: 90px;
position: absolute; position: absolute;
display: block;
text-align: center; text-align: center;
width: 100%;
transform: translateZ(0);
font-size: 17px; font-size: 17px;
font-weight: 600; font-weight: 600;
line-height: #{$toolbar-height-ios}; line-height: #{$toolbar-height-ios};