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

MOBILE-3068 styles: Multiple select width to 100%

main
Pau Ferrer Ocaña 2019-08-26 15:48:23 +02:00
parent 2c63478f47
commit f0b53afe57
3 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addon/mod/glossary/pages/edit/edit.html
View File

@ -19,7 +19,7 @@
</ion-item> </ion-item>
<ion-item *ngIf="categories.length > 0"> <ion-item *ngIf="categories.length > 0">
<ion-label stacked id="addon-mod-glossary-categories-label">{{ 'addon.mod_glossary.categories' | translate }}</ion-label> <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-option *ngFor="let category of categories" [value]="category.id">{{ category.name }}</ion-option>
</ion-select> </ion-select>
</ion-item> </ion-item>

16
src/app/app.scss
View File

@ -388,11 +388,11 @@ ion-app.app-root {
ion-select { ion-select {
position: relative; // Ionic fix. Button can occupy all page if not. position: relative; // Ionic fix. Button can occupy all page if not.
color: $core-select-placeholder-color; color: $core-select-color;
align-self: start; align-self: start;
.select-icon .select-icon-inner { .select-icon .select-icon-inner {
color: $core-select-placeholder-color; color: $core-select-color;
} }
&.select-disabled .select-icon .select-icon-inner { &.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, ion-select.core-button-select,
.core-button-select { .core-button-select {
background-color: white; background-color: white;
color: $core-select-placeholder-color; color: $core-select-color;
white-space: normal; white-space: normal;
align-self: start; align-self: start;
max-width: none; max-width: none;
@ -446,7 +454,7 @@ ion-app.app-root {
} }
.select-icon .select-icon-inner { .select-icon .select-icon-inner {
color: $core-select-placeholder-color; color: $core-select-color;
} }
ion-icon:last-child { ion-icon:last-child {

20
src/theme/variables.scss
View File

@ -131,7 +131,16 @@ $refresher-icon-color: $core-color !default;
$core-online-color: #5cb85c; $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; $item-avatar-size: 54px !default;
$input-select-opacity: .5 !default; $input-select-opacity: .5 !default;
$note-color: $gray-dark !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; $button-ios-outline-background-color: $core-button-outline-background-color;
$toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights. $toolbar-ios-height: 44px + 8; // Avoid toolbar with different heights.
$checkbox-ios-icon-border-radius: 0px !default; $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; $radio-ios-disabled-opacity: $input-select-opacity !default;
$checkbox-ios-disabled-opacity: $input-select-opacity !default; $checkbox-ios-disabled-opacity: $input-select-opacity !default;
$toggle-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; $tabs-md-tab-color-inactive: $tabs-tab-color-inactive;
$button-md-outline-background-color: $core-button-outline-background-color; $button-md-outline-background-color: $core-button-outline-background-color;
$font-family-md-base: "Roboto", "Noto Sans", "Helvetica Neue", sans-serif !default; $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; $label-md-text-color: $text-color !default;
$radio-md-disabled-opacity: $input-select-opacity !default; $radio-md-disabled-opacity: $input-select-opacity !default;
$checkbox-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; $spinner-wp-circles-color: $core-spinner-color;
$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive; $tabs-wp-tab-color-inactive: $tabs-tab-color-inactive;
$button-wp-outline-background-color: $core-button-outline-background-color; $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; $label-wp-text-color: $text-color !default;
$radio-wp-disabled-opacity: $input-select-opacity !default; $radio-wp-disabled-opacity: $input-select-opacity !default;
$checkbox-wp-disabled-opacity: $input-select-opacity !default; $checkbox-wp-disabled-opacity: $input-select-opacity !default;