CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3814 styles: Reduce bar heights

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-02-16 11:45:20 +01:00
parent 33cc7e73b8
commit e217203ce1
3 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/features/mainmenu/components/user-menu-button/user-menu-button.scss
View File

@ -8,5 +8,5 @@ core-user-avatar {
:host-context(ion-toolbar) core-user-avatar ::ng-deep img, :host-context(ion-toolbar) core-user-avatar ::ng-deep img,
:host-context(ion-tab-bar) core-user-avatar ::ng-deep img { :host-context(ion-tab-bar) core-user-avatar ::ng-deep img {
padding: 2px !important; padding: 6px !important;
} }

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

@ -214,8 +214,8 @@ ion-header ion-toolbar {
.button.button-clear.button-has-icon-only, .button.button-clear.button-has-icon-only,
.button.button-solid.button-has-icon-only { .button.button-solid.button-has-icon-only {
--border-radius: var(--huge-radius); --border-radius: var(--huge-radius);
width: 48px; width: var(--a11y-min-target-size);
height: 48px; height: var(--a11y-min-target-size);
} }
@ -310,6 +310,10 @@ ion-button ion-spinner {
--color: inherit !important; --color: inherit !important;
} }
ion-button.button-has-icon-only {
margin: 2px;
}
ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon { ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon {
min-width: 20px; min-width: 20px;
} }

10
src/theme/theme.light.scss
View File

@ -111,7 +111,7 @@
--core-bottom-tabs-background-selected: transparent; --core-bottom-tabs-background-selected: transparent;
--core-bottom-tabs-badge-color: var(--brand); --core-bottom-tabs-badge-color: var(--brand);
--core-bottom-tabs-badge-text-color: var(--brand-contrast); --core-bottom-tabs-badge-text-color: var(--brand-contrast);
--bottom-tabs-size: 56px; --bottom-tabs-size: 48px;
ion-tab-bar.mainmenu-tabs { ion-tab-bar.mainmenu-tabs {
--background: var(--core-bottom-tabs-background); --background: var(--core-bottom-tabs-background);
--color: var(--core-bottom-tabs-color); --color: var(--core-bottom-tabs-color);
@ -126,12 +126,12 @@
--core-header-toolbar-button-image-size: var(--a11y-min-target-size); --core-header-toolbar-button-image-size: var(--a11y-min-target-size);
--core-header-toolbar-background: var(--white); --core-header-toolbar-background: var(--white);
--core-header-toolbar-border-width: 1px; --core-header-toolbar-border-width: 0px;
--core-header-toolbar-border-color: var(--stroke); --core-header-toolbar-border-color: var(--stroke);
--core-header-toolbar-color: var(--gray-900); --core-header-toolbar-color: var(--gray-900);
--core-header-toolbar-height: 56px; --core-header-toolbar-height: 48px;
html.ios { html.ios {
--core-header-toolbar-height: 54px; --core-header-toolbar-height: 48px;
} }
ion-header ion-toolbar { ion-header ion-toolbar {
@ -220,7 +220,7 @@
--core-tab-color-active: var(--dark); --core-tab-color-active: var(--dark);
--core-tab-border-color-active: var(--brand); --core-tab-border-color-active: var(--brand);
--core-tab-font-weight-active: normal; --core-tab-font-weight-active: normal;
--core-tabs-height: 56px; --core-tabs-height: 48px;
core-tabs, core-tabs-outlet { core-tabs, core-tabs-outlet {
ion-slide { ion-slide {
--background: var(--core-tab-background); --background: var(--core-tab-background);