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

MOBILE-3320 tabs: Add customization css options

main
Pau Ferrer Ocaña 2021-06-03 12:35:16 +02:00
parent c8101dac1b
commit 40cdf4467f
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/core/components/tabs/tabs.scss
View File

@ -1,7 +1,9 @@
@import "~theme/globals";
:host { :host {
--tabs-background: var(--core-tabs-background); --tabs-background: var(--core-tabs-background);
--tabs-color: var(--core-tab-color); --tabs-color: var(--core-tab-color);
--height: 56px; --height: #{$core-tabs-height};
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -54,6 +56,9 @@
border-bottom-color: var(--border-color-active); border-bottom-color: var(--border-color-active);
ion-tab-button { ion-tab-button {
color: var(--color-active); color: var(--color-active);
ion-label {
font-weight: var(--font-weight-active);
}
} }
} }
} }

3
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -1,9 +1,10 @@
@import "~theme/globals"; @import "~theme/globals";
:host{ :host{
--menutabbar-size: 60px; --menutabbar-size: #{$bottom-tabs-size};
ion-tab-bar { ion-tab-bar {
height: var(--menutabbar-size);
box-shadow: 0px -3px 3px rgba(var(--drop-shadow)); box-shadow: 0px -3px 3px rgba(var(--drop-shadow));
} }

5
src/theme/globals.variables.scss
View File

@ -293,6 +293,7 @@ $bottom-tabs-badge-color: $primary !default;
$bottom-tabs-badge-text-color: get_contrast_color($bottom-tabs-badge-color) !default; $bottom-tabs-badge-text-color: get_contrast_color($bottom-tabs-badge-color) !default;
$bottom-tabs-badge-color-dark: $primary !default; $bottom-tabs-badge-color-dark: $primary !default;
$bottom-tabs-badge-text-color-dark: get_contrast_color($bottom-tabs-badge-color-dark) !default; $bottom-tabs-badge-text-color-dark: get_contrast_color($bottom-tabs-badge-color-dark) !default;
$bottom-tabs-size: 56px !default;
$core-text-hightlight-background-color: lighten($blue, 40%) !default; $core-text-hightlight-background-color: lighten($blue, 40%) !default;
@ -300,8 +301,10 @@ $core-tabs-background: $white !default;
$core-tab-background: $core-tabs-background !default; $core-tab-background: $core-tabs-background !default;
$core-tab-color: $gray-dark !default; $core-tab-color: $gray-dark !default;
$core-tab-color-active: $dark !default; $core-tab-color-active: $dark !default;
$core-tab-font-weight-active: normal !default;
$core-tab-border-color: $gray !default; $core-tab-border-color: $gray !default;
$core-tab-border-color-active: $primary !default; $core-tab-border-color-active: $primary !default;
$core-tabs-height: 56px !default;
$core-tabs-background-dark: $shade-75 !default; $core-tabs-background-dark: $shade-75 !default;
$core-tab-background-dark: $core-tabs-background-dark !default; $core-tab-background-dark: $core-tabs-background-dark !default;
@ -388,7 +391,7 @@ $addon-forum-highlight-color: $gray-lighter !default;
$addon-forum-border-color-dark: $gray-dark !default; $addon-forum-border-color-dark: $gray-dark !default;
$addon-forum-highlight-color-dark: $gray-darker !default; $addon-forum-highlight-color-dark: $gray-darker !default;
$core-more-icon: null !default; $core-more-icon-color: null !default;
$core-more-item-border: null !default; $core-more-item-border: null !default;
$core-fixed-url: false !default; $core-fixed-url: false !default;
$core-dashboard-logo: false !default; $core-dashboard-logo: false !default;

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

@ -161,6 +161,7 @@
--core-tab-border-color: #{$core-tab-border-color}; --core-tab-border-color: #{$core-tab-border-color};
--core-tab-color-active: #{$core-tab-color-active}; --core-tab-color-active: #{$core-tab-color-active};
--core-tab-border-color-active: #{$core-tab-border-color-active}; --core-tab-border-color-active: #{$core-tab-border-color-active};
--core-tab-font-weight-active: #{$core-tab-font-weight-active};
core-tabs, core-tabs-outlet { core-tabs, core-tabs-outlet {
ion-slide { ion-slide {
@ -169,6 +170,7 @@
--border-color: var(--core-tab-border-color); --border-color: var(--core-tab-border-color);
--color-active: var(--core-tab-color-active); --color-active: var(--core-tab-color-active);
--border-color-active: var(--core-tab-border-color-active); --border-color-active: var(--core-tab-border-color-active);
--font-weight-active: var(--core-tab-font-weight-active);
} }
} }
@ -288,8 +290,8 @@
--core-dd-question-radius: 10px; --core-dd-question-radius: 10px;
--core-dd-question-border: var(--gray-darker); --core-dd-question-border: var(--gray-darker);
@if ($core-more-icon) { @if ($core-more-icon-color) {
--core-more-icon: #{$core-more-icon}; --core-more-icon: #{$core-more-icon-color};
} }
@if ($core-more-item-border) { @if ($core-more-item-border) {