From 5f592e9147420b1012b34599a8329ec9eeedc39b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 7 Jul 2021 15:24:16 +0200
Subject: [PATCH] MOBILE-3320 style: Add some variables

---
 src/core/components/combobox/combobox.scss     | 18 ++++++++++++------
 .../features/mainmenu/pages/menu/menu.scss     |  4 ++++
 src/theme/theme.light.scss                     |  5 +++++
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
index 23f0ea977..1de608344 100644
--- a/src/core/components/combobox/combobox.scss
+++ b/src/core/components/combobox/combobox.scss
@@ -14,11 +14,15 @@
 
         --color: var(--core-combobox-color);
         --color-activated: var(--core-combobox-color);
-        --border-color: var(--core-combobox-border-color);
-        --border-style: solid;
         --color-focused: 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-end: 10px;
         --padding-bottom: 10px;
@@ -45,7 +49,7 @@ ion-button {
     min-height: 25px;
     overflow: hidden;
     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-within {
@@ -54,7 +58,10 @@ ion-button {
 }
 
 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) {
         margin: var(--icon-margin);
@@ -82,8 +89,7 @@ ion-select {
 }
 
 ion-button {
-    --border-radius: 0;
-    --border-width: 0 0 var(--core-combobox-border-width) 0;
+    border-radius: var(--core-combobox-radius);
 
     flex: 1;
     min-height: 45px;
diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss
index a45893e30..3bb190a5e 100644
--- a/src/core/features/mainmenu/pages/menu/menu.scss
+++ b/src/core/features/mainmenu/pages/menu/menu.scss
@@ -33,6 +33,10 @@
         line-height: 14px;
     }
 
+    ion-tab-button.tab-selected {
+        background: var(--background-selected);
+    }
+
     ion-tabs.placement-bottom ion-tab-button {
         ion-icon {
             transition: margin 500ms ease-in-out, transform 300ms ease-in-out;
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 1800dc330..9016cbe1c 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -87,6 +87,7 @@
     --core-bottom-tabs-background: var(--black);
     --core-bottom-tabs-color: var(--gray-lighter);
     --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-text-color: var(--brand-color-contrast);
     --bottom-tabs-size: 56px;
@@ -94,6 +95,7 @@
         --background: var(--core-bottom-tabs-background);
         --color: var(--core-bottom-tabs-color);
         --color-selected: var(--core-bottom-tabs-color-selected);
+        --background-selected: var(--core-bottom-tabs-background-selected);
         ion-badge {
             --background: var(--core-bottom-tabs-badge-color);
             --color: var(--core-bottom-tabs-badge-text-color);
@@ -238,6 +240,9 @@
     --core-combobox-color: var(--black);
     --core-combobox-border-color: var(--primary);
     --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-border-width: 5px;