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

Merge pull request #3947 from crazyserver/MOBILE-4458 

Mobile 4458
main
Noel De Martin 2024-03-11 13:10:26 +01:00 committed by GitHub
parent ebbfe039c0 9c28b32557
commit 94f5f20817
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
32 changed files with 169 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/addons/block/activitymodules/components/activitymodules/activitymodules.ts
View File

@ -63,6 +63,8 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
const archetypes: Record<string, number> = {};
const modIcons: Record<string, string> = {};
let modFullNames: Record<string, string> = {};
const brandedIcons: Record<string, boolean|undefined> = {};
sections.forEach((section) => {
if (!section.modules) {
return;
@ -93,6 +95,8 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
modFullNames[mod.modname] = mod.modplural;
}
brandedIcons[mod.modname] = mod.branded;
// If this is not a theme image, leave it undefined to avoid having specific activity icons.
if (CoreUrlUtils.isThemeImageUrl(mod.modicon)) {
modIcons[mod.modname] = mod.modicon;
@ -111,6 +115,7 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
iconModName,
name: modFullNames[modName],
modName,
branded: brandedIcons[iconModName],
});
}
}
@ -149,4 +154,5 @@ type AddonBlockActivityModuleEntry = {
name: string;
modName: string;
iconModName: string;
branded?: boolean;
};

3
src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
View File

@ -5,7 +5,8 @@
</ion-item-divider>
<core-loading [hideUntil]="loaded">
<ion-item class="ion-text-wrap" *ngFor="let entry of entries" [detail]="true" button (click)="gotoCoureListModType(entry)">
<core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" [colorize]="false" />
<core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" [colorize]="false"
[isBranded]="entry.branded" />
<ion-label>{{ entry.name }}</ion-label>
</ion-item>
</core-loading>

BIN
src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
src/addons/mod/book/tests/behat/snapshots/test-basic-usage-of-book-activity-in-app-open-chapters-from-table-of-contents_11.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

8
src/addons/mod/lesson/pages/player/player.html
View File

@ -136,7 +136,7 @@
</ng-container>
</ng-container>
<ion-button expand="block" type="submit" class="ion-text-wrap ion-margin button-no-uppercase">
<ion-button expand="block" type="submit" class="ion-text-wrap ion-margin">
{{ question.submitLabel }}
</ion-button>
<!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
@ -150,7 +150,7 @@
<ion-row class="ion-align-items-center">
<ion-col *ngFor="let button of pageButtons" size="12" size-md="6" size-lg="3" col-xl>
<ion-button expand="block" fill="outline" [id]="button.id" (click)="buttonClicked(button.data)"
class="ion-text-wrap button-no-uppercase">
class="ion-text-wrap">
{{ button.content }}
</ion-button>
</ion-col>
@ -224,7 +224,7 @@
<ion-item class="ion-text-wrap" *ngIf="eolData.displayofgrade">
<ion-label>{{ eolData.displayofgrade.message }}</ion-label>
</ion-item>
<ion-button *ngIf="eolData.reviewlesson" expand="block" class="ion-text-wrap ion-margin button-no-uppercase"
<ion-button *ngIf="eolData.reviewlesson" expand="block" class="ion-text-wrap ion-margin"
(click)="reviewLesson(reviewPageId!)">
{{ 'addon.mod_lesson.reviewlesson' | translate }}
</ion-button>
@ -233,7 +233,7 @@
</ion-item>
<!-- If activity link was successfully formatted, render the button. -->
<ion-button *ngIf="activityLink && activityLink.formatted" expand="block" fill="outline" [href]="activityLink.href"
core-link [capture]="true" class="ion-text-wrap ion-margin button-no-uppercase">
core-link [capture]="true" class="ion-text-wrap ion-margin">
<core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
[courseId]="courseId" />
</ion-button>

BIN
src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_26.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_38.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

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

@ -110,10 +110,9 @@
flex: 1;
&::part(native) {
text-transform: none;
font-weight: 400;
font-size: 16px;
line-height: 20px;
font-weight: var(--label-font-weight);
font-size: var(--label-lg-font-size);
line-height: var(--label-lg-line-height);
border-radius: var(--core-combobox-radius);
}

7
src/core/components/empty-box/core-empty-box.html
View File

@ -1,4 +1,7 @@
<img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
@if (icon) {
<ion-icon [name]="icon" aria-hidden="true" />
} @else if (image) {
<img [src]="image" role="presentation" alt="">
}
<p *ngIf="message">{{ message }}</p>
<ng-content />

35
src/core/components/empty-box/empty-box.scss
View File

@ -1,8 +1,16 @@
@use "theme/globals" as *;
:host {
--image-size: 120px;
--icon-color: var(--subdued-text-color);
--image-size: 80px;
--icon-color: var(--core-empty-box-icon-color);
&.core-empty-box-clickable {
z-index: 0;
}
&.dimmed {
--text-color: var(--gray-700);
}
display: flex;
flex-direction: column;
@ -22,31 +30,16 @@
img {
height: var(--image-size);
}
p {
font-size: 120%;
}
&.core-empty-box-clickable {
z-index: 0;
p,
::ng-deep p {
font-size: var(--heading-6-font-size);
color: var(--text-color);
}
&.dimmed {
--icon-color: var(--gray-400);
--text-color: var(--gray-700);
}
}
:host-context(html.dark) {
&.dimmed {
--text-color: var(--gray-300);
}
}
@include media-breakpoint-down(sm) {
:host {
--image-size: 100px;
}
}

7
src/core/components/empty-box/empty-box.ts
View File

@ -25,7 +25,7 @@ import { Component, HostBinding, Input } from '@angular/core';
@Component({
selector: 'core-empty-box',
templateUrl: 'core-empty-box.html',
styleUrls: ['empty-box.scss'],
styleUrl: 'empty-box.scss',
})
export class CoreEmptyBoxComponent {
@ -33,7 +33,10 @@ export class CoreEmptyBoxComponent {
@Input() dimmed = false; // Wether the box is dimmed or not.
@Input() icon?: string; // Name of the icon to use.
@Input() image?: string; // Image source. If an icon is provided, image won't be used.
@Input() flipIconRtl = false; // Whether to flip the icon in RTL. Defaults to false.
/**
* @deprecated since 4.4. Not used anymore.
*/
@Input() flipIconRtl = false;
@HostBinding('class.dimmed')
get isDimmed(): boolean {

4
src/core/components/error-info/error-info.scss
View File

@ -1,7 +1,7 @@
.core-error-info {
background: var(--gray-200);
border-radius: var(--radius-xs);
font-size: var(--font-size-sm);
font-size: var(--body-font-size-sm);
color: var(--gray-900);
p:first-child {
@ -14,7 +14,7 @@
.core-error-info--code {
padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
font-size: var(--font-size-normal);
font-size: var(--body-font-size-md);
}
.core-error-info--details p {

4
src/core/components/message/message.scss
View File

@ -34,8 +34,8 @@
overflow: visible;
&:hover {
-webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
-webkit-filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
}
&[tappable]:active {

2
src/core/components/split-view/split-view.html
View File

@ -2,4 +2,4 @@
<ng-content />
</ion-content>
<ion-router-outlet class="content-outlet" />
<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" [flipIconRtl]="true" />
<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" />

2
src/core/features/block/components/side-blocks-button/side-blocks-button.scss
View File

@ -12,7 +12,7 @@
--padding-end: 0;
--border-radius: 2em 0 0 2em;
height: 56px;
--box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
--box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
&::part(native) {
@include core-transition(padding, 200ms);

1
src/core/features/course/components/course-format/course-format.scss
View File

@ -8,7 +8,6 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-transform: none;
flex: 1;
margin-left: 4px;
margin-right: 4px;

1
src/core/features/course/components/module-navigation/module-navigation.scss
View File

@ -25,7 +25,6 @@
margin: 0;
--border-radius: 0;
width: 100%;
text-transform: none;
font-size: 12px;
font-weight: normal;
--color: var(--button-color);

4
src/core/features/courses/components/course-list-item/course-list-item.scss
View File

@ -20,7 +20,7 @@
--button-size: 44px;
--button-padding: 10px;
--button-radius: 50%;
--button-background: rgba(255,255,255,0.5);
--button-background: rgb(255 255 255 / 50%);
@include media-breakpoint-down(md) {
--avatar-size: 48px;
@ -30,7 +30,7 @@
:host-context(html.dark) {
--button-background: rgba(0, 0, 0, 0.3);
--button-background: rgb(0 0 0 / 30%);
}
// Common styles.

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

@ -84,7 +84,7 @@
display: flex;
align-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.5);
background-color: rgb(255 255 255 / 50%);
z-index: 1;
ion-spinner {
margin: 0 auto;

BIN
src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

2
src/core/features/question/question.scss
View File

@ -25,7 +25,7 @@
font-weight: bold;
line-height: 14px;
color: var(--white);
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
background-color: var(--gray-500);
-webkit-border-radius: 3px;
border-radius: 3px;

4
src/core/features/usertours/components/user-tour/user-tour.scss
View File

@ -9,7 +9,7 @@
.user-tour-focus {
position: absolute;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
box-shadow: 0 0 0 9999px rgb(0 0 0 / 75%);
}
.user-tour-overlay {
@ -18,7 +18,7 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
background: rgb(0 0 0 / 75%);
}
.user-tour-wrapper {

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

@ -5,11 +5,11 @@
core-format-text {
--core-format-text-background: var(--background, var(--ion-item-background));
--core-format-text-viewer-icon-background: rgba(255, 255, 255, .5);
--core-format-text-viewer-icon-background: rgb(255 255 255 / 50%);
}
html.dark core-format-text {
--core-format-text-viewer-icon-background: rgba(0, 0, 0, .5);
--core-format-text-viewer-icon-background: rgb(0 0 0 / 50%);
}
core-format-text {
@ -646,8 +646,8 @@ core-rich-text-editor .core-rte-editor {
.text-body { color: var(--ion-text-color) !important; }
.text-muted { color: var(--subdued-text-color) !important; }
.text-black-50 { color: rgba(0, 0, 0, .5) !important; }
.text-white-50 { color: rgba(255, 255, 255, .5) !important; }
.text-black-50 { color: rgb(0 0 0 / 50%) !important; }
.text-white-50 { color: rgb(255 255 255 / 50%) !important; }
.text-decoration-none { text-decoration: none !important; }
.text-break {
word-break: break-word !important; // Deprecated, but avoids issues with flex containers

12
src/theme/helpers/custom.mixins.scss
View File

@ -198,22 +198,22 @@
@mixin core-headings() {
h1 {
font-size: 26px;
font: var(--heading-1-font);
}
h2, .item-heading {
font-size: 24px;
font: var(--heading-2-font);
}
h3 {
font-size: 22px;
font: var(--heading-3-font);
}
h4 {
font-size: 20px;
font: var(--heading-4-font);
}
h5 {
font-size: 18px;
font: var(--heading-5-font);
}
h6 {
font-size: 16px;
font: var(--heading-6-font);
}
}

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

@ -45,10 +45,6 @@ body {
.core-big { font-size: 115%; }
.invisible { visibility: hidden; }
.button-no-uppercase {
text-transform: none;
}
.flex { display: flex; }
.inline-block { display: inline-block; }
.block { display: block; }
@ -263,6 +259,7 @@ ion-button,
ion-fab-button,
button,
[role="button"] {
text-transform: none;
min-height: var(--a11y-min-target-size);
min-width: var(--a11y-min-target-size);
@ -273,7 +270,7 @@ button,
}
ion-fab-button {
--box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
--box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
}
ion-button {
@ -403,7 +400,6 @@ button[disabled] {
}
ion-button.core-button-as-link {
text-transform: none;
text-decoration: underline;
font-size: inherit;
font-weight: normal;
@ -675,7 +671,7 @@ body.core-iframe-fullscreen ion-router-outlet {
&::part(content) {
backdrop-filter: blur(12px);
--background: rgba(10, 10, 10, 0.2);
--background: rgb(10 10 10 / 20%);
ion-content {
--background: transparent !important;
@ -705,7 +701,7 @@ body.core-iframe-fullscreen ion-router-outlet {
height: 100% !important;
width: calc(100% - var(--modal-lateral-margin));
max-width: calc(var(--modal-lateral-max-width));
box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
box-shadow: 0 28px 48px rgb(0 0 0 / 40%);
}
&::part(backdrop) {
@ -943,8 +939,6 @@ ion-card {
margin: 0 8px 8px 8px;
ion-button {
text-transform: none;
&[fill="outline"] {
--background: transparent;
}
@ -1181,7 +1175,6 @@ ion-button.button.chip {
line-height: 1.1;
font-size: 12px;
min-height: 24px;
text-transform: none;
margin: 4px;
font-weight: normal;
@ -1226,7 +1219,7 @@ ion-chip {
&.fab-chip {
padding: 8px 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
box-shadow: 0 2px 4px rgb(0 0 0 / 40%);
}
&.ion-color {
@ -1935,7 +1928,7 @@ swiper-container {
left: -45%;
height: 100%;
width: 45%;
background-image: linear-gradient(to left, rgba(var(--loader-shine), .05), rgba(var(--loader-shine), .3), rgba(var(--loader-shine), .6), rgba(var(--loader-shine), .3), rgba(var(--loader-shine), .05));
background-image: linear-gradient(to left, rgb(var(--loader-shine) / 5%), rgb(var(--loader-shine) / 30%), rgb(var(--loader-shine) / 60%), rgb(var(--loader-shine) / 30%), rgb(var(--loader-shine) / 5%));
animation: loading 1s infinite;
display: block;
top: 0;

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

@ -45,11 +45,10 @@ html.dark {
--contrast-background: var(--gray-900);
--loader-shine: 90, 90, 90;
--loader-shine: 90 90 90;
--drop-shadow-color: 0, 0, 0, 1;
--drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color));
--drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
--drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1);
--drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1);
--ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background);
@ -98,6 +97,8 @@ html.dark {
--core-progressbar-text-color: var(--gray-100);
--core-empty-box-icon-color: var(--gray-700);
--ion-item-background: #{$ion-item-background-dark};
--ion-item-icon-color: var(--medium);
--ion-item-detail-icon-color: var(--dark);

96
src/theme/theme.design-system.scss
View File

@ -1,13 +1,73 @@
html {
// Spacing
@for $i from 0 to 13 {
@for $i from 0 to 6 {
--spacing-#{$i}: #{$i*4}px;
}
// Font sizes
// Body font size
--font-size-sm: 12px;
--font-size-normal: 14px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--body-font-size-sm: var(--font-size-sm);
--body-font-size-md: var(--font-size-md);
--body-font-size-lg: var(--font-size-lg);
--body-font-weight: var(--font-weight-normal);
--body-line-height: 150%;
--link-sm-font-size: var(--font-size-sm);
--link-md-font-size: var(--font-size-md);
--link-lg-font-size: var(--font-size-lg);
--link-font-weight: var(--font-weight-normal);
--link-line-height: 150%;
// Labels
--label-sm-font-size: 10px;
--label-md-font-size: 12px;
--label-lg-font-size: 14px;
--label-font-weight: var(--font-weight-medium);
--label-sm-line-height: 16px;
--label-md-line-height: 16px;
--label-lg-line-height: 20px;
// Subtitles
--subtitle-sm-font-size: 14px;
--subtitle-md-font-size: 16px;
--subtitle-lg-font-size: 20px;
--subtitle-font-weight: var(--font-weight-medium);
--subtitle-line-height: 150%;
// Headings
--heading-1-font-size: 28px;
--heading-2-font-size: 24px;
--heading-3-font-size: 22px;
--heading-4-font-size: 20px;
--heading-5-font-size: 18px;
--heading-6-font-size: 16px;
--heading-1-font-weight: var(--font-weight-normal);
--heading-2-font-weight: var(--font-weight-normal);
--heading-3-font-weight: var(--font-weight-normal);
--heading-4-font-weight: var(--font-weight-medium);
--heading-5-font-weight: var(--font-weight-medium);
--heading-6-font-weight: var(--font-weight-medium);
--heading-line-height: 130%;
--heading-1-font: normal normal var(--heading-1-font-weight) var(--heading-1-font-size)/var(--heading-line-height) var(--ion-font-family);
--heading-2-font: normal normal var(--heading-2-font-weight) var(--heading-2-font-size)/var(--heading-line-height) var(--ion-font-family);
--heading-3-font: normal normal var(--heading-3-font-weight) var(--heading-3-font-size)/var(--heading-line-height) var(--ion-font-family);
--heading-4-font: normal normal var(--heading-4-font-weight) var(--heading-4-font-size)/var(--heading-line-height) var(--ion-font-family);
--heading-5-font: normal normal var(--heading-5-font-weight) var(--heading-5-font-size)/var(--heading-line-height) var(--ion-font-family);
--heading-6-font: normal normal var(--heading-6-font-weight) var(--heading-6-font-size)/var(--heading-line-height) var(--ion-font-family);
// Radiuses
--radius-none: 0px;
@ -18,15 +78,33 @@ html {
--radius-xl: 24px;
--radius-round: 50%;
/** @deprecated since 4.3 **/
// Shadows / Elevation
--drop-shadow-color: 40 40 40; //#282828;
--drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%);
--drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%);
--drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 20%), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 12%), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 12%), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 12%), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 12%), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%);
--drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 20%), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 12%), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 14%);
// A11y
--a11y-min-target-size: 44px;
}
/** @deprecated since 4.3 **/
html {
--small-radius: var(--radius-xs);
--medium-radius: var(--radius-sm);
--big-radius: var(--radius-lg);
--huge-radius: var(--radius-xl);
// A11y
--a11y-min-target-size: 44px;
}
/** @deprecated since 4.4 **/
html {
--font-size-normal: var(--font-size-md);
}

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

@ -53,7 +53,7 @@ html {
--zoom-level: 100%;
--text-color: #{$text-color};
--text-size: var(--font-size-normal);
--text-size: var(--body-font-size-md);
--background-color: #{$background-color};
--stroke: var(--gray-300);
@ -78,16 +78,15 @@ html {
--contrast-background: white;
--loader-background-color: rgba(0, 0, 0, .1);
--loader-shine: 251, 251, 251;
--loader-background-color: rgb(0 0 0 / 10%);
--loader-shine: 251 251 251;
--loader-radius: var(--radius-xs);
--loader-display: block;
--drop-shadow-color: 0, 0, 0, 0.5;
--drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color));
--drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color));
--drop-shadow-end: -2px 0px 5px rgba(var(--drop-shadow-color));
--drop-shadow-start: 2px 0px 5px rgba(var(--drop-shadow-color));
--drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 50%);
--drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 50%);
--drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
--drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 50%);
--ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb};
@ -273,6 +272,8 @@ html {
--core-progressbar-text-color: var(--medium);
--core-progressbar-background: var(--primary-tint);
--core-empty-box-icon-color: var(--gray-300);
--ion-item-background: #{$ion-item-background};
--ion-item-icon-color: var(--medium);
--ion-item-detail-icon-color: var(--dark);

1
upgrade.txt
View File

@ -14,6 +14,7 @@ For more information about upgrading, read the official documentation: https://m
- CoreAppProvider.isAutomated() has been deprecated, use CorePlatformService.isAutomated() instead.
- Due to a breaking change in cordova-plugin-file, avoid using FileEntry.toURL(). Use CoreFileProvider.getFileEntryURL instead.
- FileTransfer service is no longer available, now we recommend use window.FileTransfer instead.
- CSS variable --font-size-normal has been deprecated in favor of --font-size-md.
=== 4.3.0 ===