From f0b53afe577f345010487ecd80276ddec5744440 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 26 Aug 2019 15:48:23 +0200
Subject: [PATCH] MOBILE-3068 styles: Multiple select width to 100%

---
 src/addon/mod/glossary/pages/edit/edit.html |  2 +-
 src/app/app.scss                            | 16 ++++++++++++----
 src/theme/variables.scss                    | 20 ++++++++++++++++----
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/addon/mod/glossary/pages/edit/edit.html b/src/addon/mod/glossary/pages/edit/edit.html
index f5c2381a0..5678fcba8 100644
--- a/src/addon/mod/glossary/pages/edit/edit.html
+++ b/src/addon/mod/glossary/pages/edit/edit.html
@@ -19,7 +19,7 @@
             </ion-item>
             <ion-item *ngIf="categories.length > 0">
                 <ion-label stacked id="addon-mod-glossary-categories-label">{{ 'addon.mod_glossary.categories' | translate }}</ion-label>
-                <ion-select [(ngModel)]="options.categories" multiple="true" aria-labelledby="addon-mod-glossary-categories-label" interface="action-sheet">
+                <ion-select [(ngModel)]="options.categories" multiple="true" aria-labelledby="addon-mod-glossary-categories-label" interface="action-sheet" [placeholder]="'addon.mod_glossary.categories' | translate">
                     <ion-option *ngFor="let category of categories" [value]="category.id">{{ category.name }}</ion-option>
                 </ion-select>
             </ion-item>
diff --git a/src/app/app.scss b/src/app/app.scss
index 529257037..811d7724c 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -388,11 +388,11 @@ ion-app.app-root {
 
   ion-select {
     position: relative; // Ionic fix. Button can occupy all page if not.
-    color: $core-select-placeholder-color;
+    color: $core-select-color;
     align-self: start;
 
     .select-icon .select-icon-inner {
-      color: $core-select-placeholder-color;
+      color: $core-select-color;
     }
 
     &.select-disabled .select-icon .select-icon-inner {
@@ -411,10 +411,18 @@ ion-app.app-root {
     }
   }
 
+  .item-label-stacked ion-select[multiple="true"] {
+    width: 100%;
+  }
+
+  ion-select .select-placeholder {
+    color: $core-select-placeholder-color;
+  }
+
   ion-select.core-button-select,
   .core-button-select {
     background-color: white;
-    color: $core-select-placeholder-color;
+    color: $core-select-color;
     white-space: normal;
     align-self: start;
     max-width: none;
@@ -446,7 +454,7 @@ ion-app.app-root {
     }
 
     .select-icon .select-icon-inner {
-      color: $core-select-placeholder-color;
+      color: $core-select-color;
     }
 
     ion-icon:last-child {
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index b2ac149d1..0cd36e33e 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -131,7 +131,16 @@ $refresher-icon-color: $core-color !default;
 
 $core-online-color: #5cb85c;
 
-$core-select-placeholder-color: $core-color !default;
+$core-placeholder-color: $gray-dark !default;
+$core-select-placeholder-color: $core-placeholder-color !default;
+$alert-input-placeholder-color: $core-placeholder-color !default;
+$core-datetime-ios-placeholder-color: $core-placeholder-color !default;
+$searchbar-ios-input-placeholder-color: $core-placeholder-color !default;
+$searchbar-md-input-placeholder-color: $core-placeholder-color !default;
+$searchbar-wp-input-placeholder-color: $core-placeholder-color !default;
+$text-input-placeholder-color: $core-placeholder-color !default;
+
+$core-select-color: $core-color !default;
 $item-avatar-size: 54px !default;
 $input-select-opacity: .5 !default;
 $note-color: $gray-dark !default;
@@ -179,7 +188,8 @@ $tabs-ios-tab-color-inactive: $tabs-tab-color-inactive;
 $button-ios-outline-background-color: $core-button-outline-background-color;
 $toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights.
 $checkbox-ios-icon-border-radius: 0px !default;
-$select-ios-placeholder-color: $core-select-placeholder-color;
+$select-ios-placeholder-color: $core-select-color !default;
+$datetime-ios-placeholder-color: $core-datetime-ios-placeholder-color;
 $radio-ios-disabled-opacity: $input-select-opacity !default;
 $checkbox-ios-disabled-opacity: $input-select-opacity !default;
 $toggle-ios-disabled-opacity: $input-select-opacity !default;
@@ -203,7 +213,8 @@ $spinner-md-crescent-color: $core-spinner-color;
 $tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
 $button-md-outline-background-color: $core-button-outline-background-color;
 $font-family-md-base: "Roboto", "Noto Sans", "Helvetica Neue", sans-serif !default;
-$select-md-placeholder-color: $core-select-placeholder-color;
+$select-md-placeholder-color: $core-select-color !default;
+$datetime-md-placeholder-color: $core-datetime-ios-placeholder-color !default;
 $label-md-text-color: $text-color !default;
 $radio-md-disabled-opacity: $input-select-opacity !default;
 $checkbox-md-disabled-opacity: $input-select-opacity !default;
@@ -226,7 +237,8 @@ $loading-wp-spinner-color: $core-loading-spinner-color;
 $spinner-wp-circles-color: $core-spinner-color;
 $tabs-wp-tab-color-inactive: $tabs-tab-color-inactive;
 $button-wp-outline-background-color: $core-button-outline-background-color;
-$select-wp-placeholder-color: $core-select-placeholder-color;
+$select-wp-placeholder-color: $core-select-color !default;
+$datetime-wp-placeholder-color: $core-datetime-ios-placeholder-color !default;
 $label-wp-text-color: $text-color !default;
 $radio-wp-disabled-opacity: $input-select-opacity !default;
 $checkbox-wp-disabled-opacity: $input-select-opacity !default;