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

MOBILE-2567 ux: Style select

main
Pau Ferrer Ocaña 2018-09-04 13:28:13 +02:00
parent 2c54c12a01
commit 15dac04d8d
3 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/app.scss
View File

@ -374,6 +374,13 @@ ion-app.app-root {
@include core-headings();
}
.item core-format-text,
core-format-text {
p {
margin-bottom: 1rem;
}
}
// Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
ion-card core-format-text img {
width: min-content;
@ -417,10 +424,19 @@ ion-app.app-root {
}
}
:not(.item) > * > * > ion-select,
ion-select {
color: $core-select-placeholder-color;
align-self: start;
.select-icon .select-icon-inner {
color: $core-select-placeholder-color;
}
}
ion-select.core-button-select,
.core-button-select {
background-color: white;
color: $core-color;
color: $core-select-placeholder-color;
white-space: normal;
align-self: start;
max-width: none;
@ -452,7 +468,7 @@ ion-app.app-root {
}
.select-icon .select-icon-inner {
color: $core-color;
color: $core-select-placeholder-color;
}
ion-icon:last-child {

4
src/core/courses/pages/my-overview/my-overview.html
View File

@ -37,7 +37,7 @@
<core-loading [hideUntil]="courses.loaded" class="core-loading-center">
<!-- "Time" selector. -->
<div padding class="clearfix" [hidden]="showFilter" ion-row justify-content-between>
<ion-select float-start [title]="'core.show' | translate" [(ngModel)]="courses.selected" ion-col (ngModelChange)="selectedChanged()" interface="popover">
<ion-select float-start [title]="'core.show' | translate" [(ngModel)]="courses.selected" ion-col (ngModelChange)="selectedChanged()" interface="popover" class="core-button-select">
<ion-option value="inprogress">{{ 'core.courses.inprogress' | translate }}</ion-option>
<ion-option value="future">{{ 'core.courses.future' | translate }}</ion-option>
<ion-option value="past">{{ 'core.courses.past' | translate }}</ion-option>
@ -82,7 +82,7 @@
</ion-refresher>
<div padding [hidden]="!(timeline.loaded || timelineCourses.loaded)">
<ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()" interface="popover">
<ion-select [(ngModel)]="timeline.sort" (ngModelChange)="switchSort()" interface="popover" class="core-button-select">
<ion-option value="sortbydates">{{ 'core.courses.sortbydates' | translate }}</ion-option>
<ion-option value="sortbycourses">{{ 'core.courses.sortbycourses' | translate }}</ion-option>
</ion-select>

4
src/theme/variables.scss
View File

@ -135,6 +135,7 @@ $core-login-box-background-border: $gray !default;
$core-login-box-text-color: $text-color !default;
$core-login-button-outline: false !default;
$core-login-loading-color: false !default;
$core-select-placeholder-color: $core-color;
// App iOS Variables
// --------------------------------------------------
@ -149,6 +150,7 @@ $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;
$radio-ios-disabled-opacity: .5 !default;
$checkbox-ios-disabled-opacity: .5 !default;
$toggle-ios-disabled-opacity: .5 !default;
@ -166,6 +168,7 @@ $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;
$radio-md-disabled-opacity: .5 !default;
$checkbox-md-disabled-opacity: .5 !default;
$toggle-md-disabled-opacity: .5 !default;
@ -181,6 +184,7 @@ $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;
$radio-wp-disabled-opacity: .5 !default;
$checkbox-wp-disabled-opacity: .5 !default;
$toggle-wp-disabled-opacity: .5 !default;