commit
03dc88107d
src
addons
block
recentlyaccessedcourses/components/recentlyaccessedcourses
recentlyaccesseditems/components/recentlyaccesseditems
starredcourses/components/starredcourses
timeline/components/timeline
messages
pages
mod/quiz/pages/review
remotethemes/services
core
components/loading
features
course/components/format
search/components/search-box
services
singletons
|
@ -14,7 +14,7 @@
|
||||||
</div>
|
</div>
|
||||||
</ion-item-divider>
|
</ion-item-divider>
|
||||||
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
|
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
|
||||||
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg"
|
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
|
||||||
[message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
|
[message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
|
||||||
<!-- List of courses. -->
|
<!-- List of courses. -->
|
||||||
<div class="core-horizontal-scroll">
|
<div class="core-horizontal-scroll">
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg"
|
<core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" inline="true"
|
||||||
[message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
|
[message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
|
||||||
|
|
||||||
</core-loading>
|
</core-loading>
|
||||||
|
|
|
@ -14,10 +14,10 @@
|
||||||
</div>
|
</div>
|
||||||
</ion-item-divider>
|
</ion-item-divider>
|
||||||
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
|
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
|
||||||
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg"
|
<core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
|
||||||
[message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
|
[message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
|
||||||
<!-- List of courses. -->
|
<!-- List of courses. -->
|
||||||
<div class="core-horizontal-scroll">
|
<div class="core-horizontal-scroll" *ngIf="courses.length > 0">
|
||||||
<ng-container *ngFor="let course of courses">
|
<ng-container *ngFor="let course of courses">
|
||||||
<core-courses-course-progress [course]="course" class="core-block_starredcourses"
|
<core-courses-course-progress [course]="course" class="core-block_starredcourses"
|
||||||
[showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>
|
[showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
</ion-col>
|
</ion-col>
|
||||||
</ion-row>
|
</ion-row>
|
||||||
</ion-grid>
|
</ion-grid>
|
||||||
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg"
|
<core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
|
||||||
[message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
|
[message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
|
||||||
</core-loading>
|
</core-loading>
|
||||||
</core-loading>
|
</core-loading>
|
||||||
|
|
|
@ -1,6 +1,11 @@
|
||||||
:host {
|
:host {
|
||||||
.addon-messages-conversation-item,
|
.addon-messages-conversation-item,
|
||||||
.addon-message-discussion {
|
.addon-message-discussion {
|
||||||
|
ion-label {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
core-format-text {
|
core-format-text {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -12,10 +17,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-note {
|
ion-note {
|
||||||
ion-badge {
|
display: flex;
|
||||||
margin-left: 6px;
|
flex-direction: column;
|
||||||
margin-right: 6px;
|
align-self: flex-start;
|
||||||
vertical-align: middle;
|
margin-left: 2px;
|
||||||
|
|
||||||
|
ion-badge, ion-icon {
|
||||||
|
margin-top: 3px;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.addon-message-last-message-date {
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -23,6 +23,8 @@
|
||||||
color: var(--ion-color-primary);
|
color: var(--ion-color-primary);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
ion-icon {
|
ion-icon {
|
||||||
color: var(--ion-color-primary);
|
color: var(--ion-color-primary);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
|
@ -52,16 +52,22 @@
|
||||||
<ng-container *ngIf="!search.showResults">
|
<ng-container *ngIf="!search.showResults">
|
||||||
<ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
|
<ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
|
||||||
[attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
|
[attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
|
||||||
[attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'">
|
[attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'" detail="false">
|
||||||
<core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
|
<core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
|
||||||
<ion-label>
|
<ion-label>
|
||||||
|
<div class="flex-row ion-justify-content-between">
|
||||||
<h2>{{ discussion.fullname }}</h2>
|
<h2>{{ discussion.fullname }}</h2>
|
||||||
<ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
|
<ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
|
||||||
<span *ngIf="discussion.unread" class="core-primary-circle"></span>
|
<span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
|
||||||
<span *ngIf="discussion.message!.timecreated > 0">
|
|
||||||
{{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
|
{{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
|
||||||
</span>
|
</span>
|
||||||
|
<ion-icon *ngIf="discussion.unread" name="fas-circle" color="primary" aria-hidden="true">
|
||||||
|
</ion-icon>
|
||||||
|
<span *ngIf="discussion.unread" class="sr-only">
|
||||||
|
{{ 'addon.messages.unreadmessages' | translate }}
|
||||||
|
</span>
|
||||||
</ion-note>
|
</ion-note>
|
||||||
|
</div>
|
||||||
<p>
|
<p>
|
||||||
<core-format-text clean="true" singleLine="true" [text]="discussion.message!.message"
|
<core-format-text clean="true" singleLine="true" [text]="discussion.message!.message"
|
||||||
contextLevel="system" [contextInstanceId]="0">
|
contextLevel="system" [contextInstanceId]="0">
|
||||||
|
|
|
@ -146,7 +146,7 @@
|
||||||
|
|
||||||
<!-- Template to render a list of conversations. -->
|
<!-- Template to render a list of conversations. -->
|
||||||
<ng-template #conversationsTemplate let-conversations="conversations">
|
<ng-template #conversationsTemplate let-conversations="conversations">
|
||||||
<ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button
|
<ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button detail="false"
|
||||||
[attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)"
|
[attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)"
|
||||||
[attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
|
[attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
|
||||||
(conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
|
(conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
|
||||||
|
@ -162,6 +162,7 @@
|
||||||
[linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
|
[linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
|
||||||
|
|
||||||
<ion-label>
|
<ion-label>
|
||||||
|
<div class="flex-row ion-justify-content-between">
|
||||||
<h2>
|
<h2>
|
||||||
<core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
|
<core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
|
||||||
<ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
|
<ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
|
||||||
|
@ -169,6 +170,16 @@
|
||||||
<ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
|
<ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
|
||||||
[title]="'addon.messages.mutedconversation' | translate"></ion-icon>
|
[title]="'addon.messages.mutedconversation' | translate"></ion-icon>
|
||||||
</h2>
|
</h2>
|
||||||
|
<ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
|
||||||
|
<span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
|
||||||
|
{{conversation.lastmessagedate | coreDateDayOrTime}}
|
||||||
|
</span>
|
||||||
|
<ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
|
||||||
|
<span *ngIf="conversation.unreadcount > 0" class="sr-only">
|
||||||
|
{{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
|
||||||
|
</span>
|
||||||
|
</ion-note>
|
||||||
|
</div>
|
||||||
<p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
|
<p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
|
||||||
[contextInstanceId]="0"></core-format-text></p>
|
[contextInstanceId]="0"></core-format-text></p>
|
||||||
<p class="addon-message-last-message">
|
<p class="addon-message-last-message">
|
||||||
|
@ -181,12 +192,5 @@
|
||||||
class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
|
class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
|
||||||
</p>
|
</p>
|
||||||
</ion-label>
|
</ion-label>
|
||||||
<ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount" slot="end">
|
|
||||||
<ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
|
|
||||||
<span *ngIf="conversation.unreadcount > 0" class="sr-only">
|
|
||||||
{{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
|
|
||||||
</span>
|
|
||||||
<span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
</ion-item>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
|
@ -24,7 +24,9 @@
|
||||||
<ion-card-header class="ion-text-wrap">
|
<ion-card-header class="ion-text-wrap">
|
||||||
<ion-card-title>
|
<ion-card-title>
|
||||||
<ng-container *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</ng-container>
|
<ng-container *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</ng-container>
|
||||||
<ng-container *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</ng-container>
|
<ng-container *ngIf="!attempt.preview">
|
||||||
|
{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}
|
||||||
|
</ng-container>
|
||||||
</ion-card-title>
|
</ion-card-title>
|
||||||
</ion-card-header>
|
</ion-card-header>
|
||||||
<ion-list lines="none">
|
<ion-list lines="none">
|
||||||
|
|
|
@ -43,7 +43,7 @@ export class AddonRemoteThemesProvider {
|
||||||
protected stylesEls: {[siteId: string]: { element: HTMLStyleElement; hash: string }} = {};
|
protected stylesEls: {[siteId: string]: { element: HTMLStyleElement; hash: string }} = {};
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.logger = CoreLogger.getInstance('AddonRemoteThemesProvider');
|
this.logger = CoreLogger.getInstance('AddonRemoteThemes');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -363,6 +363,9 @@ export class AddonRemoteThemesProvider {
|
||||||
// Adding styles to a style element automatically enables it. Disable it again.
|
// Adding styles to a style element automatically enables it. Disable it again.
|
||||||
if (disabled) {
|
if (disabled) {
|
||||||
this.disableElement(this.stylesEls[siteId].element, true);
|
this.disableElement(this.stylesEls[siteId].element, true);
|
||||||
|
} else {
|
||||||
|
// Set StatusBar properties.
|
||||||
|
CoreApp.setStatusBarColor();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,13 @@
|
||||||
|
@import "~theme/globals";
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
position: static;
|
position: static;
|
||||||
-webkit-transition: height 200ms ease-in-out;
|
@include core-transition(height, 200ms);
|
||||||
transition: height 200ms ease-in-out;
|
--loading-background: rgba(255, 255, 255, 0.26);
|
||||||
|
|
||||||
> .core-loading-container {
|
> .core-loading-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
@include position(0, 0, 0, 0);
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: table;
|
display: table;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -17,7 +16,7 @@
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px 0 0 0;
|
padding: 10px 0 0 0;
|
||||||
background-color: rgba(255, 255, 255, 0.26);
|
background-color: var(--loading-background);
|
||||||
-webkit-transition: all 200ms ease-in-out;
|
-webkit-transition: all 200ms ease-in-out;
|
||||||
transition: all 200ms ease-in-out;
|
transition: all 200ms ease-in-out;
|
||||||
|
|
||||||
|
@ -29,7 +28,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-loading-content {
|
.core-loading-content {
|
||||||
display: inline;
|
display: contents;
|
||||||
padding-bottom: 1px; /* This makes height be real */
|
padding-bottom: 1px; /* This makes height be real */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -45,8 +44,12 @@
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
.core-loading-container {
|
.core-loading-container {
|
||||||
margin-top: 10px;
|
padding-top: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host-context(body.dark) {
|
||||||
|
--loading-background: rgba(0, 0, 0, 0.26);
|
||||||
|
}
|
||||||
|
|
|
@ -155,7 +155,7 @@
|
||||||
|
|
||||||
<!-- Template to render a section download button/progress. -->
|
<!-- Template to render a section download button/progress. -->
|
||||||
<ng-template #sectionDownloadTemplate let-section="section">
|
<ng-template #sectionDownloadTemplate let-section="section">
|
||||||
<div *ngIf="section && downloadEnabled" slot="end">
|
<div *ngIf="section && downloadEnabled" slot="end" class="core-button-spinner core-section-download">
|
||||||
<!-- Download progress. -->
|
<!-- Download progress. -->
|
||||||
<ion-badge class="core-course-download-section-progress"
|
<ion-badge class="core-course-download-section-progress"
|
||||||
*ngIf="section.isDownloading && section.total > 0 && section.count < section.total">
|
*ngIf="section.isDownloading && section.total > 0 && section.count < section.total">
|
||||||
|
|
|
@ -1,8 +1,4 @@
|
||||||
// ion-app.app-root ion-badge.core-course-download-section-progress {
|
@import '~theme/globals.scss';
|
||||||
// display: block;
|
|
||||||
// @include float(start);
|
|
||||||
// @include margin(12px, 12px, null, 12px);
|
|
||||||
// }
|
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
|
|
||||||
|
@ -52,4 +48,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.core-section-download.core-button-spinner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
@include margin-horizontal(10px);
|
||||||
|
|
||||||
|
ion-badge.core-course-download-courses-progress {
|
||||||
|
@include margin(null, 12px, null, null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
:host {
|
:host {
|
||||||
height: 80px;
|
height: 73px;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
@ -8,9 +8,11 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-button.button:last-child {
|
ion-button.button {
|
||||||
margin-left: unset;
|
margin-left: unset;
|
||||||
margin-inline-start: 10px;
|
margin-inline-start: 10px;
|
||||||
}
|
}
|
||||||
|
@ -28,4 +30,9 @@
|
||||||
ion-label {
|
ion-label {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ion-input {
|
||||||
|
--padding-start: 0;
|
||||||
|
--padding-end: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -622,8 +622,16 @@ export class CoreAppProvider {
|
||||||
*/
|
*/
|
||||||
setStatusBarColor(color?: string): void {
|
setStatusBarColor(color?: string): void {
|
||||||
if (!color) {
|
if (!color) {
|
||||||
// Get the default color to reset it.
|
// Get the default color to change it.
|
||||||
color = getComputedStyle(document.documentElement).getPropertyValue('--core-header-toolbar-background').trim();
|
const element = document.querySelector('ion-header ion-toolbar');
|
||||||
|
if (element) {
|
||||||
|
color = getComputedStyle(element).getPropertyValue('--background').trim();
|
||||||
|
} else {
|
||||||
|
// Fallback, it won't always work.
|
||||||
|
color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
color = CoreColors.getColorHex(color);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make darker on Android.
|
// Make darker on Android.
|
||||||
|
@ -631,6 +639,8 @@ export class CoreAppProvider {
|
||||||
color = CoreColors.darker(color);
|
color = CoreColors.darker(color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.logger.debug(`Set status bar color ${color}`);
|
||||||
|
|
||||||
const useLightText = CoreColors.isWhiteContrastingBetter(color);
|
const useLightText = CoreColors.isWhiteContrastingBetter(color);
|
||||||
const statusBar = StatusBar.instance;
|
const statusBar = StatusBar.instance;
|
||||||
statusBar.backgroundColorByHexString(color);
|
statusBar.backgroundColorByHexString(color);
|
||||||
|
|
|
@ -45,13 +45,36 @@ export class CoreColors {
|
||||||
static darker(color: string, percent: number = 10): string {
|
static darker(color: string, percent: number = 10): string {
|
||||||
percent = 1 - (percent / 100);
|
percent = 1 - (percent / 100);
|
||||||
const components = CoreColors.hexToRGB(color);
|
const components = CoreColors.hexToRGB(color);
|
||||||
components.red = Math.floor(components.red * percent) ;
|
components.red = Math.floor(components.red * percent);
|
||||||
components.green = Math.floor(components.green * percent) ;
|
components.green = Math.floor(components.green * percent);
|
||||||
components.blue = Math.floor(components.blue * percent) ;
|
components.blue = Math.floor(components.blue * percent);
|
||||||
|
|
||||||
return CoreColors.RGBToHex(components);
|
return CoreColors.RGBToHex(components);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns the hex code from any color css type (ie named).
|
||||||
|
*
|
||||||
|
* @param color Color in any format.
|
||||||
|
* @returns Color in hex format.
|
||||||
|
*/
|
||||||
|
static getColorHex(color: string): string {
|
||||||
|
const d = document.createElement('div');
|
||||||
|
d.style.color = color;
|
||||||
|
document.body.appendChild(d);
|
||||||
|
|
||||||
|
// Color in RGB .
|
||||||
|
const rgba = getComputedStyle(d).color.match(/\d+/g)!.map((a) => parseInt(a, 10));
|
||||||
|
|
||||||
|
const hex = [0,1,2].map(
|
||||||
|
(idx) => this.componentToHex(rgba[idx]),
|
||||||
|
).join('');
|
||||||
|
|
||||||
|
document.body.removeChild(d);
|
||||||
|
|
||||||
|
return '#'+hex;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets the luma of a color.
|
* Gets the luma of a color.
|
||||||
*
|
*
|
||||||
|
@ -109,9 +132,7 @@ export class CoreColors {
|
||||||
* @return Hexadec of the color component.
|
* @return Hexadec of the color component.
|
||||||
*/
|
*/
|
||||||
protected static componentToHex(c: number): string {
|
protected static componentToHex(c: number): string {
|
||||||
const hex = c.toString(16);
|
return ('0' + c.toString(16)).slice(-2);
|
||||||
|
|
||||||
return hex.length == 1 ? '0' + hex : hex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -291,9 +291,9 @@
|
||||||
// @content;
|
// @content;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin rtl() {
|
@mixin rtl() {
|
||||||
$root: #{&};
|
$root: #{&};
|
||||||
|
|
||||||
@at-root [dir=rtl] {
|
@at-root [dir=rtl] {
|
||||||
|
@ -301,17 +301,17 @@
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin ltr() {
|
@mixin ltr() {
|
||||||
@content;
|
@content;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// SVG Background Image Mixin
|
// SVG Background Image Mixin
|
||||||
// @param {string} $svg
|
// @param {string} $svg
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin svg-background-image($svg, $flip-rtl: false) {
|
@mixin svg-background-image($svg, $flip-rtl: false) {
|
||||||
$url: url-encode($svg);
|
$url: url-encode($svg);
|
||||||
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
||||||
|
|
||||||
|
@ -334,13 +334,13 @@
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add property horizontal
|
// Add property horizontal
|
||||||
// @param {string} $start
|
// @param {string} $start
|
||||||
// @param {string} $end
|
// @param {string} $end
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin property-horizontal($prop, $start, $end: $start) {
|
@mixin property-horizontal($prop, $start, $end: $start) {
|
||||||
@if $start == 0 and $end == 0 {
|
@if $start == 0 and $end == 0 {
|
||||||
#{$prop}-left: $start;
|
#{$prop}-left: $start;
|
||||||
#{$prop}-right: $end;
|
#{$prop}-right: $end;
|
||||||
|
@ -367,63 +367,63 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add property for all directions
|
// Add property for all directions
|
||||||
// @param {string} $prop
|
// @param {string} $prop
|
||||||
// @param {string} $top
|
// @param {string} $top
|
||||||
// @param {string} $end
|
// @param {string} $end
|
||||||
// @param {string} $bottom
|
// @param {string} $bottom
|
||||||
// @param {string} $start
|
// @param {string} $start
|
||||||
// @param {boolean} $content include content or use default
|
// @param {boolean} $content include content or use default
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
||||||
@include property-horizontal($prop, $start, $end);
|
@include property-horizontal($prop, $start, $end);
|
||||||
#{$prop}-top: $top;
|
#{$prop}-top: $top;
|
||||||
#{$prop}-bottom: $bottom;
|
#{$prop}-bottom: $bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add padding horizontal
|
// Add padding horizontal
|
||||||
// @param {string} $start
|
// @param {string} $start
|
||||||
// @param {string} $end
|
// @param {string} $end
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin padding-horizontal($start, $end: $start) {
|
@mixin padding-horizontal($start, $end: $start) {
|
||||||
@include property-horizontal(padding, $start, $end);
|
@include property-horizontal(padding, $start, $end);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add padding for all directions
|
// Add padding for all directions
|
||||||
// @param {string} $top
|
// @param {string} $top
|
||||||
// @param {string} $end
|
// @param {string} $end
|
||||||
// @param {string} $bottom
|
// @param {string} $bottom
|
||||||
// @param {string} $start
|
// @param {string} $start
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||||
@include property(padding, $top, $end, $bottom, $start);
|
@include property(padding, $top, $end, $bottom, $start);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add margin horizontal
|
// Add margin horizontal
|
||||||
// @param {string} $start
|
// @param {string} $start
|
||||||
// @param {string} $end
|
// @param {string} $end
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin margin-horizontal($start, $end: $start) {
|
@mixin margin-horizontal($start, $end: $start) {
|
||||||
@include property-horizontal(margin, $start, $end);
|
@include property-horizontal(margin, $start, $end);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add margin for all directions
|
// Add margin for all directions
|
||||||
// @param {string} $top
|
// @param {string} $top
|
||||||
// @param {string} $end
|
// @param {string} $end
|
||||||
// @param {string} $bottom
|
// @param {string} $bottom
|
||||||
// @param {string} $start
|
// @param {string} $start
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
||||||
@include property(margin, $top, $end, $bottom, $start);
|
@include property(margin, $top, $end, $bottom, $start);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add position horizontal
|
// Add position horizontal
|
||||||
// @param {string} $start - amount to position start
|
// @param {string} $start - amount to position start
|
||||||
// @param {string} $end - amount to left: 0; end
|
// @param {string} $end - amount to left: 0; end
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin position-horizontal($start: null, $end: null) {
|
@mixin position-horizontal($start: null, $end: null) {
|
||||||
@if $start == $end {
|
@if $start == $end {
|
||||||
@include multi-dir() {
|
@include multi-dir() {
|
||||||
left: $start;
|
left: $start;
|
||||||
|
@ -442,37 +442,37 @@
|
||||||
right: $start;
|
right: $start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add position for all directions
|
// Add position for all directions
|
||||||
// @param {string} $top
|
// @param {string} $top
|
||||||
// @param {string} $end
|
// @param {string} $end
|
||||||
// @param {string} $bottom
|
// @param {string} $bottom
|
||||||
// @param {string} $start
|
// @param {string} $start
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
||||||
@include position-horizontal($start, $end);
|
@include position-horizontal($start, $end);
|
||||||
top: $top;
|
top: $top;
|
||||||
bottom: $bottom;
|
bottom: $bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add border for all directions
|
// Add border for all directions
|
||||||
// @param {string} $top
|
// @param {string} $top
|
||||||
// @param {string} $end
|
// @param {string} $end
|
||||||
// @param {string} $bottom
|
// @param {string} $bottom
|
||||||
// @param {string} $start
|
// @param {string} $start
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
||||||
@include property(border, $top, $end, $bottom, $start);
|
@include property(border, $top, $end, $bottom, $start);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add border radius for all directions
|
// Add border radius for all directions
|
||||||
// @param {string} $top-start
|
// @param {string} $top-start
|
||||||
// @param {string} $top-end
|
// @param {string} $top-end
|
||||||
// @param {string} $bottom-end
|
// @param {string} $bottom-end
|
||||||
// @param {string} $bottom-start
|
// @param {string} $bottom-start
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
|
@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
|
||||||
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
|
@if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
|
||||||
@include multi-dir() {
|
@include multi-dir() {
|
||||||
border-radius: $top-start;
|
border-radius: $top-start;
|
||||||
|
@ -492,11 +492,11 @@
|
||||||
border-bottom-left-radius: $bottom-end;
|
border-bottom-left-radius: $bottom-end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add direction for all directions
|
// Add direction for all directions
|
||||||
// @param {string} $dir - Direction on LTR
|
// @param {string} $dir - Direction on LTR
|
||||||
@mixin direction($dir) {
|
@mixin direction($dir) {
|
||||||
$other-dir: null;
|
$other-dir: null;
|
||||||
|
|
||||||
@if $dir == ltr {
|
@if $dir == ltr {
|
||||||
|
@ -511,12 +511,12 @@
|
||||||
@include rtl() {
|
@include rtl() {
|
||||||
direction: $other-dir;
|
direction: $other-dir;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add float for all directions
|
// Add float for all directions
|
||||||
// @param {string} $side
|
// @param {string} $side
|
||||||
// @param {string} $decorator - !important
|
// @param {string} $decorator - !important
|
||||||
@mixin float($side, $decorator: null) {
|
@mixin float($side, $decorator: null) {
|
||||||
@if $side == start {
|
@if $side == start {
|
||||||
@include ltr() {
|
@include ltr() {
|
||||||
float: left $decorator;
|
float: left $decorator;
|
||||||
|
@ -536,9 +536,9 @@
|
||||||
float: $side $decorator;
|
float: $side $decorator;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
||||||
@if $horizontal == start or $horizontal == end {
|
@if $horizontal == start or $horizontal == end {
|
||||||
$horizontal-ltr: null;
|
$horizontal-ltr: null;
|
||||||
$horizontal-rtl: null;
|
$horizontal-rtl: null;
|
||||||
|
@ -561,9 +561,9 @@
|
||||||
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin transform-origin($x-axis, $y-axis: null) {
|
@mixin transform-origin($x-axis, $y-axis: null) {
|
||||||
@if $x-axis == start {
|
@if $x-axis == start {
|
||||||
@include ltr() {
|
@include ltr() {
|
||||||
transform-origin: left $y-axis;
|
transform-origin: left $y-axis;
|
||||||
|
@ -590,11 +590,11 @@
|
||||||
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add transform for all directions
|
// Add transform for all directions
|
||||||
// @param {string} $transforms - comma separated list of transforms
|
// @param {string} $transforms - comma separated list of transforms
|
||||||
@mixin transform($transforms...) {
|
@mixin transform($transforms...) {
|
||||||
$extra: null;
|
$extra: null;
|
||||||
|
|
||||||
$x: null;
|
$x: null;
|
||||||
|
@ -636,4 +636,4 @@
|
||||||
transform: $rtl-translate $extra;
|
transform: $rtl-translate $extra;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -554,6 +554,13 @@ textarea, button, select, input, a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ion-loading:focus-visible,
|
||||||
|
ion-alert:focus-visible,
|
||||||
|
ion-popover:focus-visible,
|
||||||
|
ion-modal:focus-visible {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
ion-input .native-input{
|
ion-input .native-input{
|
||||||
&:focus, &:focus-visible {
|
&:focus, &:focus-visible {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
Loading…
Reference in New Issue