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

Merge pull request #2808 from crazyserver/MOBILE-3320

Browse Source 
Mobile 3320
This commit is contained in:
Dani Palou 2021-06-03 16:36:02 +02:00 committed by GitHub
commit 5a8c8ce906
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 289 additions and 103 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;

7
src/core/components/progress-bar/progress-bar.scss
View File

@ -2,8 +2,11 @@
display: flex;
width: 100%;
--line-height: 40px;
--bar-margin: 16px 0;
.core-progress-text {
line-height: 40px;
line-height: var(--line-height);
font-size: 1rem;
color: var(--text-color);
width: 55px;
@ -14,7 +17,7 @@
-webkit-appearance: none;
appearance: none;
height: var(--height);
margin: 16px 0;
margin: var(--bar-margin);
padding: 0;
display: block;
width: 100%;

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

@ -1,7 +1,9 @@
@import "~theme/globals";
:host {
--tabs-background: var(--core-tabs-background);
--tabs-color: var(--core-tab-color);
--height: 56px;
--height: #{$core-tabs-height};
height: 100%;
display: flex;
flex-direction: column;
@ -54,6 +56,9 @@
border-bottom-color: var(--border-color-active);
ion-tab-button {
color: var(--color-active);
ion-label {
font-weight: var(--font-weight-active);
}
}
}
}

16
src/core/features/course/components/format/format.scss
View File

@ -17,13 +17,14 @@
.core-course-thumb {
display: none;
height: 150px;
height: #{$core-courseimage-on-course-height};
width: 100%;
overflow: hidden;
cursor: pointer;
pointer-events: auto;
position: relative;
background: var(--ion-item-background);
border-bottom: 1px solid var(--gray);
img {
position: absolute;
@ -34,6 +35,19 @@
}
}
@if ($core-show-courseimage-on-course) {
.core-course-thumb {
display: block;
}
}
@if ($core-hide-progress-on-course) {
.core-course-progress {
display: none;
}
}
.core-button-selector-row {
display: flex;
core-combobox {

28
src/core/features/course/components/section-selector/section-selector.scss
View File

@ -1,17 +1,15 @@
:host {
core-progress-bar {
.core-progress-text {
line-height: 24px;
position: absolute;
top: -8px;
right: 10px;
}
progress {
margin: 8px 0 4px 0;
}
}
@import '~theme/globals.scss';
core-progress-bar {
--bar-margin: 8px 0 4px 0;
--line-height: 20px;
}
ion-badge {
text-align: start;
@if ($core-hide-progress-on-section-selector) {
core-progress-bar {
display: none;
}
}
}
ion-badge {
text-align: start;
}

1
src/core/features/course/components/section-selector/section-selector.ts
View File

@ -26,6 +26,7 @@ import { ModalController } from '@singletons';
@Component({
selector: 'core-course-section-selector',
templateUrl: 'section-selector.html',
styleUrls: ['section-selector.scss'],
})
export class CoreCourseSectionSelectorComponent implements OnInit {

3
src/core/features/courses/components/course-progress/core-courses-course-progress.html
View File

@ -55,7 +55,8 @@
</ion-button>
</div>
</ion-item>
<ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none">
<ion-item *ngIf="showAll && course.progress! >= 0 && course.completionusertracked !== false" lines="none"
class="core-course-progress">
<ion-label>
<core-progress-bar [progress]="course.progress" a11yText="core.courses.aria:courseprogress"></core-progress-bar>
</ion-label>

18
src/core/features/courses/components/course-progress/course-progress.scss
View File

@ -41,6 +41,18 @@
}
}
@if ($core-course-hide-thumb-on-cards) {
.core-course-thumb {
display: none;
}
}
@if ($core-course-thumb-on-cards-background) {
.core-course-thumb {
background: $core-course-thumb-on-cards-background !important;
}
}
.core-course-additional-info {
margin-bottom: 8px;
}
@ -86,6 +98,12 @@
width: 50px;
}
}
@if ($core-course-hide-progress-on-cards) {
.core-course-progress {
display: none;
}
}
}
button {

19
src/core/features/login/login.scss
View File

@ -12,7 +12,7 @@
--color: var(--core-login-text-color);
p, h2, h3, .core-oauth-icon {
color: var(--core-login-text-color);
color: var(--color);
}
}
ion-button.core-button-as-link {
@ -29,13 +29,17 @@
margin-bottom: 16px;
}
form .item {
form .item,
form .item ion-label {
--background: var(--core-login-input-background);
--color: var(--core-login-input-color);
}
form .core-username.item p {
font-size: 16px;
}
form .core-username.item.md p {
@include padding-horizontal(8px, null);
}
@ -62,8 +66,15 @@
text-decoration: underline;
}
.core-login-reconnect-warning {
@if ($core-login-hide-forgot-password) {
.core-login-forgotten-password {
display: none;
}
}
.core-login-reconnect-warning ion-item {
font-size: 0.9em;
--background: var(--core-login-input-background);
}
@if ($core-fixed-url) {
@ -86,8 +97,6 @@
--loading-spinner: #{$core-login-loading-color};
}
}
}
:host-context(body.dark) {

10
src/core/features/login/pages/reconnect/reconnect.html
View File

@ -24,12 +24,12 @@
</p>
<p class="core-siteurl">{{siteUrl}}</p>
<ion-item *ngIf="!isLoggedOut" class="ion-text-center core-login-reconnect-warning" lines="none">
<ion-label color="danger" class="ion-text-wrap">
<ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
<ion-item>
<ion-icon name="fas-exclamation-circle" slot="start" aria-hidden="true"></ion-icon>
{{ 'core.login.reconnectdescription' | translate }}
</ion-label>
</ion-item>
<ion-label color="danger">{{ 'core.login.reconnectdescription' | translate }}</ion-label>
</ion-item>
</ion-card>
</div>
<form *ngIf="!isOAuth" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
<ion-item class="ion-text-wrap core-username item-interactive">

8
src/core/features/login/pages/site/site.scss
View File

@ -1,3 +1,5 @@
@import "~theme/globals";
.item-input:last-child {
margin-bottom: 20px;
}
@ -13,6 +15,12 @@
}
}
@if ($core-login-hide-need-help) {
.core-login-need-help {
display: none;
}
}
.core-login-site-connect {
margin-top: 1.4rem;
}

2
src/core/features/mainmenu/pages/home/home.html
View File

@ -5,7 +5,7 @@
</ion-buttons>
<h1>
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0"></core-format-text>
<img src="assets/img/toolbar_logo.png" class="core-header-logo" [alt]="siteName">
<img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
</h1>
<ion-buttons slot="end">
</ion-buttons>

9
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -1,12 +1,19 @@
@import "~theme/globals";
:host{
--menutabbar-size: 60px;
--menutabbar-size: #{$bottom-tabs-size};
ion-tab-bar {
height: var(--menutabbar-size);
box-shadow: 0px -3px 3px rgba(var(--drop-shadow));
}
@if ($core-always-show-main-menu) {
ion-tab-bar[hidden] {
display: flex !important;
}
}
ion-tab-button ion-icon {
text-overflow: unset;
overflow: visible;

6
src/core/features/mainmenu/pages/more/more.html
View File

@ -13,12 +13,12 @@
<ion-item button *ngIf="siteInfo" class="ion-text-wrap" core-user-link [userId]="siteInfo.userid">
<core-user-avatar [user]="siteInfo" slot="start"></core-user-avatar>
<ion-label>
<h2>{{siteInfo.fullname}}</h2>
<p>
<p class="item-heading">{{siteInfo.fullname}}</p>
<p class="core-moremenu-siteinfo core-moremenu-sitename">
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
</core-format-text>
</p>
<p>{{ siteUrl }}</p>
<p class="core-moremenu-siteinfo core-moremenu-siteurl">{{ siteUrl }}</p>
</ion-label>
</ion-item>
<core-spacer></core-spacer>

20
src/core/features/mainmenu/pages/more/more.scss
View File

@ -1,3 +1,5 @@
@import "~theme/globals";
ion-item {
--border-color: var(--core-more-item-border,
var(--ion-item-border-color,
@ -15,3 +17,21 @@ ion-item {
color: var(--core-more-icon, inherit);
}
}
@if ($core-more-hide-siteinfo) {
.core-moremenu-siteinfo {
display: none;
}
}
@if ($core-more-hide-sitename) {
.core-moremenu-sitename {
display: none;
}
}
@if ($core-more-hide-siteurl) {
.core-moremenu-siteurl {
display: none;
}
}

17
src/theme/components/format-text.scss
View File

@ -95,6 +95,23 @@ core-format-text {
}
}
@if ($core-format-text-never-shorten) {
&[maxHeight],
&[ng-reflect-max-height] {
&.core-text-formatted.core-shortened {
max-height: none !important;
.core-show-more {
display: none !important;
}
&:before {
display: none !important;
}
}
}
}
.core-adapted-img-container {
position: relative;
display: inline-block;

92
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,47 @@ $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;
$toolbar-md-height: 56px !default;
$toolbar-ios-height: 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;
$bottom-tabs-size: 56px !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-font-weight-active: normal !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-height: 56px !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 +320,16 @@ $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-background: $ion-item-background !default;
$core-combobox-color-dark: $white !default;
$core-combobox-background-dark: $ion-item-background-dark !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;
@ -337,6 +348,8 @@ $core-login-button-outline: false !default;
$core-login-button-outline-dark: $core-login-button-outline !default;
$core-login-loading-color: false !default;
$core-login-loading-color-dark: $text-color-dark !default;
$core-login-hide-forgot-password: false !default;
$core-login-hide-need-help: false !default;
$core-star-color: $brand-color !default;
@ -346,12 +359,32 @@ $core-avatar-size: 44px !default;
$core-send-message-input-background: $gray !default;
$core-send-message-input-color: $black !default;
$core-more-icon-color: null !default;
$core-more-item-border: null !default;
$core-more-hide-siteinfo: false !default;
$core-more-hide-sitename: false !default;
$core-more-hide-siteurl: false !default;
$core-fixed-url: false !default;
$core-dashboard-logo: false !default;
$core-always-show-main-menu: false !default;
$core-format-text-never-shorten: false !default;
$core-show-courseimage-on-course: false !default;
$core-hide-progress-on-course: false !default;
$core-courseimage-on-course-height: 150px !default;
$core-hide-progress-on-section-selector: false !default;
$core-course-hide-thumb-on-cards: false !default;
$core-course-thumb-on-cards-background: null !default;
$core-course-hide-progress-on-cards: false !default;
$addon-calendar-event-category-color: $purple !default;
$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;
@ -380,8 +413,3 @@ $addon-forum-highlight-color: $gray-lighter !default;
$addon-forum-border-color-dark: $gray-dark !default;
$addon-forum-highlight-color-dark: $gray-darker !default;
$core-more-icon: null !default;
$core-more-item-border: null !default;
$core-fixed-url: false !default;
$core-dashboard-logo: false !default;

56
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 {
@ -127,7 +139,7 @@ ion-app.ios ion-header h2 {
text-align: center;
font-size: 17px;
font-weight: 600;
line-height: #{$toolbar-height-ios};
line-height: #{$toolbar-ios-height};
box-sizing: border-box;
pointer-events: none;
}
@ -149,11 +161,11 @@ ion-item.ion-text-wrap ion-label {
// Ionic toolbar on header.
ion-app.md ion-toolbar {
--min-height: #{$toolbar-height-md};
--min-height: #{$toolbar-md-height};
}
ion-app.ios ion-toolbar {
--min-height: #{$toolbar-height-ios};
--min-height: #{$toolbar-ios-height};
}
ion-header ion-toolbar {
@ -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;
@ -439,7 +462,7 @@ img.large-avatar,
margin-bottom: 10px;
border-radius : 50%;
padding: 4px;
border: 1px solid #ddd;
border: 1px solid var(--gray);
background-color: transparent;
}
@ -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;

12
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};
@ -89,7 +97,7 @@
--item-divider-color: #{$ion-item-divider-color-dark};
--spacer-background: #{$core-spacer-background-dark};
--core-combobox-background: var(--ion-item-background);
--core-combobox-background: #{$core-combobox-background-dark};
--core-combobox-color: #{$core-combobox-color-dark};
--selected-item-color: #{$core-selected-item-color-dark};

37
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) {
@ -152,6 +161,7 @@
--core-tab-border-color: #{$core-tab-border-color};
--core-tab-color-active: #{$core-tab-color-active};
--core-tab-border-color-active: #{$core-tab-border-color-active};
--core-tab-font-weight-active: #{$core-tab-font-weight-active};
core-tabs, core-tabs-outlet {
ion-slide {
@ -160,6 +170,7 @@
--border-color: var(--core-tab-border-color);
--color-active: var(--core-tab-color-active);
--border-color-active: var(--core-tab-border-color-active);
--font-weight-active: var(--core-tab-font-weight-active);
}
}
@ -206,12 +217,14 @@
--spacer-background: #{$core-spacer-background};
core-spacer {
--item-divider-background: var(--spacer-background);
--item-divider-background: var(--spacer-background);
}
--core-combobox-background: var(--ion-item-background);
--core-combobox-color: #{$core-combobox-color};
--core-combobox-background: #{$core-combobox-background};
--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};
@ -234,7 +247,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};
@ -278,8 +291,8 @@
--core-dd-question-radius: 10px;
--core-dd-question-border: var(--gray-darker);
@if ($core-more-icon) {
--core-more-icon: #{$core-more-icon};
@if ($core-more-icon-color) {
--core-more-icon: #{$core-more-icon-color};
}
@if ($core-more-item-border) {