GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-3320 styles: Change primary color and styles for a11y

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2021-06-02 12:44:34 +02:00
parent 4ded2ea203
commit 425eb173f9
9 changed files with 114 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/addons/calendar/components/calendar/calendar.scss
View File

@ -55,9 +55,8 @@
}
&.today .addon-calendar-day-number span {
background-color: var(--addon-calendar-today-bgcolor);
color: var(--addon-calendar-today-color);
border: 2px solid var(--addon-calendar-today-border-color);
line-height: 20px;;
border-radius: 50%;
}
&.dayblank {

4
src/addons/messages/pages/settings/settings.html
View File

@ -135,9 +135,9 @@
<ion-item-divider><ion-label><h2>{{ 'core.settings.general' | translate }}</h2></ion-label></ion-item-divider>
<ion-item class="ion-text-wrap">
<ion-label>
<h2>{{ 'addon.messages.useentertosend' | translate }}</h2>
<p class="item-heading">{{ 'addon.messages.useentertosend' | translate }}</p>
</ion-label>
<ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()"></ion-toggle>
<ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end"></ion-toggle>
</ion-item>
</ion-list>
</ion-card>

4
src/addons/mod/forum/components/post/post.html
View File

@ -130,9 +130,9 @@
[attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
[attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
>
<ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
<h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
</ion-label>
</ion-item>

4
src/addons/storagemanager/pages/courses-storage/courses-storage.scss
View File

@ -5,10 +5,6 @@
.item-heading {
font-weight: bold;
}
.item-heading.item-heading-secondary {
color: $subdued-text-color;
}
}
}

7
src/core/components/combobox/combobox.scss
View File

@ -12,6 +12,9 @@
--color: var(--core-combobox-color);
--color-activated: var(--core-combobox-color);
--border-color: var(--core-combobox-border-color);
--border-width: 0 0 var(--core-combobox-border-width) 0;
--border-style: solid;
--color-focused: currentcolor;
--color-hover: currentcolor;
@ -50,6 +53,10 @@ ion-button {
}
ion-select {
border-color: var(--border-color);
border-width: var(--border-width);
border-style: var(--border-style);
&::part(icon) {
margin: var(--icon-margin);
opacity: 1;

57
src/theme/globals.variables.scss
View File

@ -64,16 +64,19 @@ $yellow-light: mix($yellow, white, 40%) !default;
$yellow-dark: mix($yellow, black, 40%) !default;
$brand-color: $orange !default;
$brand-color-light: lighten($brand-color, 10%) !default;
$brand-color-dark: darken($brand-color, 10%) !default;
$text-color: $black !default;
$text-color-dark: $white !default;
$brand-contrast-color: $text-color !default; // Used in radio and other controls where brand color needs contrast.
$brand-contrast-color-dark: $text-color-dark !default; // Used in radio and other controls where brand color needs contrast
$link-color: $blue !default;
$link-color-dark: $blue-light !default;
$background-color: $gray-light !default;
$background-color-dark: $shade-90 !default;
$subdued-text-color: $gray-darker !default;
$subdued-text-color-dark: $gray-lighter !default;
$ion-item-background: $white !default;
$ion-item-background-dark: $shade-80 !default;
@ -86,8 +89,8 @@ $core-spacer-background-dark: $shade-100 !default;
$core-online-color: #5cb85c !default;
$primary: $blue !default;
$secondary: $brand-color !default;
$primary: $brand-color !default;
$secondary: $blue !default;
$tertiary: $turquoise !default;
$danger: $red !default;
$warning: $yellow !default;
@ -160,8 +163,8 @@ $colors: (
)
) !default;
$primary-dark: $blue-light !default;
$secondary-dark: $brand-color !default;
$primary-dark: $brand-color !default;
$secondary-dark: $blue-light !default;
$tertiary-dark: $turquoise-light !default;
$danger-dark: $red-light !default;
$warning-dark: $yellow-light !default;
@ -268,42 +271,44 @@ $z-index-overlay: 1001;
$z-index-overlay-wrapper: 10;
// Top header bar.
$toolbar-background: $brand-color !default;
$toolbar-background: $white !default;
$toolbar-background-dark: $black !default;
$toolbar-border-color: $brand-color !default;
$toolbar-border-color-dark: $toolbar-border-color !default;
$toolbar-color: get_contrast_color($toolbar-background) !default;
$toolbar-color-dark: get_contrast_color($toolbar-background-dark) !default;
$toolbar-border-width: 3px !default;
$toolbar-button-image-size: 44px !default;
$toolbar-height-md: 56px !default;
$toolbar-height-ios: 54px !default;
// Bottom tab bar.
$bottom-tabs-background: $white !default;
$bottom-tabs-background-dark: $shade-85 !default;
$bottom-tabs-color: $gray-darker !default;
$bottom-tabs-color-dark: $white !default;
$bottom-tabs-background: $black !default;
$bottom-tabs-background-dark: $black !default;
$bottom-tabs-color: $gray-lighter !default;
$bottom-tabs-color-dark: $gray-lighter !default;
$bottom-tabs-color-selected: $primary !default;
$bottom-tabs-color-selected-dark: $primary-dark !default;
$bottom-tabs-color-selected-dark: $primary !default;
$bottom-tabs-badge-color: $primary !default;
$bottom-tabs-badge-text-color: get_contrast_color($bottom-tabs-badge-color) !default;
$bottom-tabs-badge-color-dark: $primary-dark !default;
$bottom-tabs-badge-color-dark: $primary !default;
$bottom-tabs-badge-text-color-dark: get_contrast_color($bottom-tabs-badge-color-dark) !default;
$core-text-hightlight-background-color: lighten($blue, 40%) !default;
$action-sheet-title-color: $primary !default;
$action-sheet-selected: $primary !default;
$core-tabs-background: $white !default;
$core-tab-background: $core-tabs-background !default;
$core-tab-color: $gray-dark !default;
$core-tab-color-active: $dark !default;
$core-tab-border-color: $gray !default;
$core-tab-color-active: $primary !default;
$core-tab-color-active-dark: $primary-dark !default;
$core-tab-border-color-active: $primary !default;
$core-tabs-background-dark: $shade-75 !default;
$core-tab-background-dark: $core-tabs-background-dark !default;
$core-tab-color-dark: $white !default;
$core-tab-color-active-dark: $dark-dark !default;
$core-tab-border-color-dark: $gray-light !default;
$core-tab-border-color-active: $core-tab-color-active !default;
$core-tab-border-color-active-dark: $core-tab-color-active-dark !default;
$core-tab-border-color-active-dark: $core-tab-border-color-active !default;
$core-progressbar-color: $primary !default;
$core-progressbar-color-dark: $primary !default;
@ -312,13 +317,15 @@ $core-progressbar-text-color-dark: $gray-lighter !default;
$core-progressbar-background: $gray-lighter !default;
$core-progressbar-height: 8px !default;
$core-side-blocks-max-width: 30% !default;
$core-side-blocks-min-width: 280px !default;
////
$core-combobox-color: $primary !default;
$core-combobox-color-dark: $primary-dark !default;
$core-combobox-color: $black !default;
$core-combobox-color-dark: $white !default;
$core-combobox-border-color: $primary !default;
$core-combobox-border-color-dark: $primary-dark !default;
$core-combobox-border-width: 3px !default;
$core-selected-item-color: $primary !default;
$core-selected-item-color-dark: $primary-dark !default;
@ -351,7 +358,7 @@ $addon-calendar-event-course-color: $red !default;
$addon-calendar-event-group-color: $yellow !default;
$addon-calendar-event-user-color: $blue !default;
$addon-calendar-event-site-color: $green !default;
$addon-calendar-today-bgcolor: $primary !default;
$addon-calendar-today-border-color: $primary !default;
$addon-calendar-today-color: $white !default;
$addon-calendar-border-color: $gray !default;

48
src/theme/theme.base.scss
View File

@ -12,9 +12,10 @@
clear: both;
}
}
.core-bold {
.core-bold {
font-weight: bold;
}
}
.img-responsive {
display: block;
@ -51,12 +52,23 @@
// Headings.
// Some styles taken from ion-label
ion-label .item-heading {
.md ion-label .item-heading,
.ios ion-label .item-heading {
text-overflow: inherit;
overflow: inherit;
--color: initial;
color: var(--color);
line-height: 20px;
&.item-heading-secondary {
--color: var(--subdued-text-color);
}
}
.ios ion-label > p,
.md ion-label > p {
--color: var(--subdued-text-color);
color: var(--color);
}
.md ion-label .item-heading {
@ -230,6 +242,11 @@ button,
min-width: var(--a11y-min-target-size);
}
// Clear buttons will be black.
ion-button.button-clear {
--ion-color-primary: var(--brand-contrast-color);
}
[role="button"],
.clickable {
cursor: pointer;
@ -284,11 +301,13 @@ div.core-iframe-network-error {
mask: url("/assets/fonts/font-awesome/solid/exclamation-triangle.svg") no-repeat 50% 50%;
}
}
[dir=rtl] ion-alert.core-alert-network-error .alert-head::after,
[dir=rtl] div.core-iframe-network-error::after {
right: unset;
left: -15%;
}
ion-alert.core-nohead {
.alert-head {
padding-bottom: 0;
@ -299,6 +318,10 @@ ion-alert .alert-message {
user-select: text;
}
ion-alert .alert-wrapper button.alert-button {
color: var(--brand-contrast-color);
}
// Ionic list.
ion-list.list-md {
padding: 0;
@ -521,6 +544,21 @@ ion-toolbar h1 .core-bar-button-image img {
}
}
// Radio.
ion-radio {
--color: var(--brand-contrast-color);
--color-checked: var(--color);
}
// Checkbox.
ion-checkbox {
--border-radius: 2px;
--border-color-checked: var(--brand-contrast-color);
--background-checked: var(--brand-contrast-color);
--checkmark-color: var(--contrast-background);
}
// Select.
ion-select::part(text) {
white-space: normal;
@ -757,10 +795,6 @@ ion-input .native-input {
}
}
ion-checkbox {
--border-radius: 2px;
}
// Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info.
ion-content.disable-scroll-y::part(scroll) {
touch-action: auto;

10
src/theme/theme.dark.scss
View File

@ -11,6 +11,7 @@
--ion-text-color: #{$text-color-dark};
--ion-text-color-rgb: #{color-to-rgb-list($text-color-dark)};
--subdued-text-color: #{$subdued-text-color-dark};
// Enlighten the ionic shades.
--ion-color-step-50: #1e1e1e;
@ -33,6 +34,8 @@
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;
--brand-contrast-color: #{$brand-contrast-color-dark};
--primary: #{$primary-dark};
--secondary: #{$secondary-dark};
--tertiary: #{$tertiary-dark};
@ -53,10 +56,11 @@
--ion-card-color: #{$text-color-dark};
--ion-card-background: #{$ion-item-background-dark};
--contrast-background: black;
ion-content {
--background: var(--ion-background-color);
--background-alternative: var(--black);
--contrast-background: var(--ion-background-color);
}
--core-bottom-tabs-background: #{$bottom-tabs-background-dark};
@ -73,6 +77,10 @@
--core-link-color: #{$link-color-dark};
--core-header-toolbar-background: #{$toolbar-background-dark};
--core-header-toolbar-border-color: #{$toolbar-border-color-dark};
--core-header-toolbar-color: #{$toolbar-color-dark};
--core-tabs-background: #{$core-tabs-background-dark};
--core-tab-background: #{$core-tab-background-dark};
--core-tab-color: #{$core-tab-color-dark};

27
src/theme/theme.light.scss
View File

@ -41,8 +41,7 @@
--purple: #{$purple};
--brand-color: #{$brand-color};
--brand-color-light: #{$brand-color-light};
--brand-color-dark: #{$brand-color-dark};
--brand-contrast-color: #{$brand-contrast-color};
--core-online-color: #{$core-online-color};
@ -72,8 +71,12 @@
--ion-background-color: #{$background-color};
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
--contrast-background: white;
--ion-text-color: #{$text-color};
--ion-text-color-rgb: 58,58,58;
--ion-text-color-rgb: #{color-to-rgb-list($text-color)};
--subdued-text-color: #{$subdued-text-color};
--ion-card-color: var(--ion-text-color);
--text-hightlight-background-color: #{$core-text-hightlight-background-color};
@ -81,7 +84,6 @@
ion-content {
--background: var(--ion-background-color);
--background-alternative: var(--gray-lighter);
--contrast-background: var(--white);
}
--core-bottom-tabs-background: #{$bottom-tabs-background};
@ -106,10 +108,16 @@
--core-header-toolbar-button-image-size: #{$toolbar-button-image-size};
--core-header-toolbar-background: #{$toolbar-background};
--core-header-toolbar-border-width: #{$toolbar-border-width};
--core-header-toolbar-border-color: #{$toolbar-border-color};
--core-header-toolbar-color: #{$toolbar-color};
ion-header ion-toolbar {
ion-header ion-toolbar,
ion-header.header-ios ion-toolbar:last-of-type {
--color: var(--core-header-toolbar-color);
--background: var(--core-header-toolbar-background);
--border-width: 0 0 var(--core-header-toolbar-border-width) 0;
--border-color: var(--core-header-toolbar-border-color);
ion-button {
--ion-toolbar-color: transparent;
--color: var(--core-header-toolbar-color);
@ -129,11 +137,12 @@
}
ion-action-sheet {
--button-color-selected: #{$action-sheet-selected};
--button-color: var(--ion-text-color);
--button-color-selected: var(--ion-text-color);
--title-border-color: var(--gray);
.action-sheet-title {
--color: #{$action-sheet-title-color};
--color: var(--ion-text-color);
}
@media (min-height: 500px) {
@ -211,6 +220,8 @@
--core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color};
--core-combobox-border-color: #{$core-combobox-border-color};
--core-combobox-border-width: #{$core-combobox-border-width};
--selected-item-color: #{$core-selected-item-color};
--selected-item-border-width: #{$core-selected-item-border-width};
@ -233,7 +244,7 @@
--addon-calendar-event-group-color: #{$addon-calendar-event-group-color};
--addon-calendar-event-user-color: #{$addon-calendar-event-user-color};
--addon-calendar-event-site-color: #{$addon-calendar-event-site-color};
--addon-calendar-today-bgcolor: #{$addon-calendar-today-bgcolor};
--addon-calendar-today-border-color: #{$addon-calendar-today-border-color};
--addon-calendar-today-color: #{$addon-calendar-today-color};
--addon-calendar-border-color: #{$addon-calendar-border-color};