MOBILE-3320 style: Add some variables

main
Pau Ferrer Ocaña 2021-07-07 15:24:16 +02:00
parent ab16910e50
commit 5f592e9147
3 changed files with 21 additions and 6 deletions

View File

@ -14,11 +14,15 @@
--color: var(--core-combobox-color); --color: var(--core-combobox-color);
--color-activated: var(--core-combobox-color); --color-activated: var(--core-combobox-color);
--border-color: var(--core-combobox-border-color);
--border-style: solid;
--color-focused: currentcolor; --color-focused: currentcolor;
--color-hover: currentcolor; --color-hover: currentcolor;
--border-color: var(--core-combobox-border-color);
--border-style: solid;
--border-width: var(--core-combobox-border-all-width);
--box-shadow: var(--core-combobox-box-shadow);
--padding-top: 10px; --padding-top: 10px;
--padding-end: 10px; --padding-end: 10px;
--padding-bottom: 10px; --padding-bottom: 10px;
@ -45,7 +49,7 @@ ion-button {
min-height: 25px; min-height: 25px;
overflow: hidden; overflow: hidden;
margin: 8px; margin: 8px;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); box-shadow: var(--box-shadow);
&:focus, &:focus,
&:focus-within { &:focus-within {
@ -54,7 +58,10 @@ ion-button {
} }
ion-select { ion-select {
border-bottom: var(--core-combobox-border-width) var(--border-style) var(--border-color); border-color: var(--border-color);
border-style: var(--border-style);
border-width: var(--border-width);
border-radius: var(--core-combobox-radius);
&::part(icon) { &::part(icon) {
margin: var(--icon-margin); margin: var(--icon-margin);
@ -82,8 +89,7 @@ ion-select {
} }
ion-button { ion-button {
--border-radius: 0; border-radius: var(--core-combobox-radius);
--border-width: 0 0 var(--core-combobox-border-width) 0;
flex: 1; flex: 1;
min-height: 45px; min-height: 45px;

View File

@ -33,6 +33,10 @@
line-height: 14px; line-height: 14px;
} }
ion-tab-button.tab-selected {
background: var(--background-selected);
}
ion-tabs.placement-bottom ion-tab-button { ion-tabs.placement-bottom ion-tab-button {
ion-icon { ion-icon {
transition: margin 500ms ease-in-out, transform 300ms ease-in-out; transition: margin 500ms ease-in-out, transform 300ms ease-in-out;

View File

@ -87,6 +87,7 @@
--core-bottom-tabs-background: var(--black); --core-bottom-tabs-background: var(--black);
--core-bottom-tabs-color: var(--gray-lighter); --core-bottom-tabs-color: var(--gray-lighter);
--core-bottom-tabs-color-selected: var(--brand-color); --core-bottom-tabs-color-selected: var(--brand-color);
--core-bottom-tabs-background-selected: var(--core-bottom-tabs-background);
--core-bottom-tabs-badge-color: var(--brand-color); --core-bottom-tabs-badge-color: var(--brand-color);
--core-bottom-tabs-badge-text-color: var(--brand-color-contrast); --core-bottom-tabs-badge-text-color: var(--brand-color-contrast);
--bottom-tabs-size: 56px; --bottom-tabs-size: 56px;
@ -94,6 +95,7 @@
--background: var(--core-bottom-tabs-background); --background: var(--core-bottom-tabs-background);
--color: var(--core-bottom-tabs-color); --color: var(--core-bottom-tabs-color);
--color-selected: var(--core-bottom-tabs-color-selected); --color-selected: var(--core-bottom-tabs-color-selected);
--background-selected: var(--core-bottom-tabs-background-selected);
ion-badge { ion-badge {
--background: var(--core-bottom-tabs-badge-color); --background: var(--core-bottom-tabs-badge-color);
--color: var(--core-bottom-tabs-badge-text-color); --color: var(--core-bottom-tabs-badge-text-color);
@ -238,6 +240,9 @@
--core-combobox-color: var(--black); --core-combobox-color: var(--black);
--core-combobox-border-color: var(--primary); --core-combobox-border-color: var(--primary);
--core-combobox-border-width: 3px; --core-combobox-border-width: 3px;
--core-combobox-border-all-width: 0 0 var(--core-combobox-border-width) 0;
--core-combobox-radius: 0;
--core-combobox-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
--selected-item-color: var(--primary); --selected-item-color: var(--primary);
--selected-item-border-width: 5px; --selected-item-border-width: 5px;