Dani Palou
GitHub
commit
03dc88107d
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</ion-item-divider>
|
||||
<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>
|
||||
<!-- List of courses. -->
|
||||
<div class="core-horizontal-scroll">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</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>
|
||||
|
||||
</core-loading>
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
</div>
|
||||
</ion-item-divider>
|
||||
<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>
|
||||
<!-- List of courses. -->
|
||||
<div class="core-horizontal-scroll">
|
||||
<div class="core-horizontal-scroll" *ngIf="courses.length > 0">
|
||||
<ng-container *ngFor="let course of courses">
|
||||
<core-courses-course-progress [course]="course" class="core-block_starredcourses"
|
||||
[showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
</ion-col>
|
||||
</ion-row>
|
||||
</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>
|
||||
</core-loading>
|
||||
</core-loading>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
:host {
|
||||
.addon-messages-conversation-item,
|
||||
.addon-message-discussion {
|
||||
ion-label {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
core-format-text {
|
||||
font-weight: bold;
|
||||
|
|
@ -12,10 +17,18 @@
|
|||
}
|
||||
|
||||
ion-note {
|
||||
ion-badge {
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: flex-start;
|
||||
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);
|
||||
background-color: transparent;
|
||||
margin-top: 6px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
ion-icon {
|
||||
color: var(--ion-color-primary);
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -52,16 +52,22 @@
|
|||
<ng-container *ngIf="!search.showResults">
|
||||
<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-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>
|
||||
<ion-label>
|
||||
<h2>{{ discussion.fullname }}</h2>
|
||||
<ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
|
||||
<span *ngIf="discussion.unread" class="core-primary-circle"></span>
|
||||
<span *ngIf="discussion.message!.timecreated > 0">
|
||||
{{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
|
||||
</span>
|
||||
</ion-note>
|
||||
<div class="flex-row ion-justify-content-between">
|
||||
<h2>{{ discussion.fullname }}</h2>
|
||||
<ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
|
||||
<span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
|
||||
{{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
|
||||
</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>
|
||||
</div>
|
||||
<p>
|
||||
<core-format-text clean="true" singleLine="true" [text]="discussion.message!.message"
|
||||
contextLevel="system" [contextInstanceId]="0">
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@
|
|||
|
||||
<!-- Template to render a list of 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-current]="((conversation.id && conversation.id == selectedConversationId) ||
|
||||
(conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
|
||||
|
|
@ -162,13 +162,24 @@
|
|||
[linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
|
||||
|
||||
<ion-label>
|
||||
<h2>
|
||||
<core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
|
||||
<ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
|
||||
[title]="'addon.messages.contactblocked' | translate"></ion-icon>
|
||||
<ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
|
||||
[title]="'addon.messages.mutedconversation' | translate"></ion-icon>
|
||||
</h2>
|
||||
<div class="flex-row ion-justify-content-between">
|
||||
<h2>
|
||||
<core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
|
||||
<ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
|
||||
[title]="'addon.messages.contactblocked' | translate"></ion-icon>
|
||||
<ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
|
||||
[title]="'addon.messages.mutedconversation' | translate"></ion-icon>
|
||||
</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"
|
||||
[contextInstanceId]="0"></core-format-text></p>
|
||||
<p class="addon-message-last-message">
|
||||
|
|
@ -181,12 +192,5 @@
|
|||
class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
|
||||
</p>
|
||||
</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>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,9 @@
|
|||
<ion-card-header class="ion-text-wrap">
|
||||
<ion-card-title>
|
||||
<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-header>
|
||||
<ion-list lines="none">
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export class AddonRemoteThemesProvider {
|
|||
protected stylesEls: {[siteId: string]: { element: HTMLStyleElement; hash: string }} = {};
|
||||
|
||||
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.
|
||||
if (disabled) {
|
||||
this.disableElement(this.stylesEls[siteId].element, true);
|
||||
} else {
|
||||
// Set StatusBar properties.
|
||||
CoreApp.setStatusBarColor();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
@import "~theme/globals";
|
||||
|
||||
:host {
|
||||
position: static;
|
||||
-webkit-transition: height 200ms ease-in-out;
|
||||
transition: height 200ms ease-in-out;
|
||||
@include core-transition(height, 200ms);
|
||||
--loading-background: rgba(255, 255, 255, 0.26);
|
||||
|
||||
> .core-loading-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@include position(0, 0, 0, 0);
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -17,7 +16,7 @@
|
|||
z-index: 3;
|
||||
margin: 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;
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
|
|
@ -29,7 +28,7 @@
|
|||
}
|
||||
|
||||
.core-loading-content {
|
||||
display: inline;
|
||||
display: contents;
|
||||
padding-bottom: 1px; /* This makes height be real */
|
||||
}
|
||||
|
||||
|
|
@ -45,8 +44,12 @@
|
|||
display: block;
|
||||
|
||||
.core-loading-container {
|
||||
margin-top: 10px;
|
||||
padding-top: 20px;
|
||||
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. -->
|
||||
<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. -->
|
||||
<ion-badge class="core-course-download-section-progress"
|
||||
*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 {
|
||||
// display: block;
|
||||
// @include float(start);
|
||||
// @include margin(12px, 12px, null, 12px);
|
||||
// }
|
||||
@import '~theme/globals.scss';
|
||||
|
||||
: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 {
|
||||
height: 80px;
|
||||
height: 73px;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -8,9 +8,11 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 4;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ion-button.button:last-child {
|
||||
ion-button.button {
|
||||
margin-left: unset;
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
|
@ -28,4 +30,9 @@
|
|||
ion-label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ion-input {
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -622,8 +622,16 @@ export class CoreAppProvider {
|
|||
*/
|
||||
setStatusBarColor(color?: string): void {
|
||||
if (!color) {
|
||||
// Get the default color to reset it.
|
||||
color = getComputedStyle(document.documentElement).getPropertyValue('--core-header-toolbar-background').trim();
|
||||
// Get the default color to change it.
|
||||
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.
|
||||
|
|
@ -631,6 +639,8 @@ export class CoreAppProvider {
|
|||
color = CoreColors.darker(color);
|
||||
}
|
||||
|
||||
this.logger.debug(`Set status bar color ${color}`);
|
||||
|
||||
const useLightText = CoreColors.isWhiteContrastingBetter(color);
|
||||
const statusBar = StatusBar.instance;
|
||||
statusBar.backgroundColorByHexString(color);
|
||||
|
|
|
|||
|
|
@ -45,13 +45,36 @@ export class CoreColors {
|
|||
static darker(color: string, percent: number = 10): string {
|
||||
percent = 1 - (percent / 100);
|
||||
const components = CoreColors.hexToRGB(color);
|
||||
components.red = Math.floor(components.red * percent) ;
|
||||
components.green = Math.floor(components.green * percent) ;
|
||||
components.blue = Math.floor(components.blue * percent) ;
|
||||
components.red = Math.floor(components.red * percent);
|
||||
components.green = Math.floor(components.green * percent);
|
||||
components.blue = Math.floor(components.blue * percent);
|
||||
|
||||
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.
|
||||
*
|
||||
|
|
@ -109,9 +132,7 @@ export class CoreColors {
|
|||
* @return Hexadec of the color component.
|
||||
*/
|
||||
protected static componentToHex(c: number): string {
|
||||
const hex = c.toString(16);
|
||||
|
||||
return hex.length == 1 ? '0' + hex : hex;
|
||||
return ('0' + c.toString(16)).slice(-2);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -287,353 +287,353 @@
|
|||
|
||||
// $root: #{&};
|
||||
// @at-root [dir] {
|
||||
// #{$root} {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
// #{$root} {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin rtl() {
|
||||
$root: #{&};
|
||||
@mixin rtl() {
|
||||
$root: #{&};
|
||||
|
||||
@at-root [dir=rtl] {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr() {
|
||||
@at-root [dir=rtl] {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr() {
|
||||
@content;
|
||||
}
|
||||
|
||||
|
||||
// SVG Background Image Mixin
|
||||
// @param {string} $svg
|
||||
// ----------------------------------------------------------
|
||||
@mixin svg-background-image($svg, $flip-rtl: false) {
|
||||
$url: url-encode($svg);
|
||||
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
||||
// SVG Background Image Mixin
|
||||
// @param {string} $svg
|
||||
// ----------------------------------------------------------
|
||||
@mixin svg-background-image($svg, $flip-rtl: false) {
|
||||
$url: url-encode($svg);
|
||||
$viewBox: str-split(str-extract($svg, "viewBox='", "'"), " ");
|
||||
|
||||
@if $flip-rtl != true or $viewBox == null {
|
||||
@include multi-dir() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
} @else {
|
||||
$transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
||||
$flipped-url: $svg;
|
||||
$flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
||||
$flipped-url: url-encode($flipped-url);
|
||||
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
@include rtl() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
||||
}
|
||||
}
|
||||
@if $flip-rtl != true or $viewBox == null {
|
||||
@include multi-dir() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
} @else {
|
||||
$transform: "transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'";
|
||||
$flipped-url: $svg;
|
||||
$flipped-url: str-replace($flipped-url, "<path", "<path #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<line", "<line #{$transform}");
|
||||
$flipped-url: str-replace($flipped-url, "<polygon", "<polygon #{$transform}");
|
||||
$flipped-url: url-encode($flipped-url);
|
||||
|
||||
// Add property horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin property-horizontal($prop, $start, $end: $start) {
|
||||
@if $start == 0 and $end == 0 {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
@include rtl() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} @else {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
// Add property horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin property-horizontal($prop, $start, $end: $start) {
|
||||
@if $start == 0 and $end == 0 {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
|
||||
@at-root {
|
||||
@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
|
||||
& {
|
||||
@if $start != null {
|
||||
#{$prop}-left: unset;
|
||||
}
|
||||
@if $end != null {
|
||||
#{$prop}-right: unset;
|
||||
}
|
||||
} @else {
|
||||
#{$prop}-left: $start;
|
||||
#{$prop}-right: $end;
|
||||
|
||||
-webkit-#{$prop}-start: $start;
|
||||
#{$prop}-inline-start: $start;
|
||||
-webkit-#{$prop}-end: $end;
|
||||
#{$prop}-inline-end: $end;
|
||||
}
|
||||
@at-root {
|
||||
@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
|
||||
& {
|
||||
@if $start != null {
|
||||
#{$prop}-left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add property for all directions
|
||||
// @param {string} $prop
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// @param {boolean} $content include content or use default
|
||||
// ----------------------------------------------------------
|
||||
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property-horizontal($prop, $start, $end);
|
||||
#{$prop}-top: $top;
|
||||
#{$prop}-bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add padding horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(padding, $start, $end);
|
||||
}
|
||||
|
||||
// Add padding for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(padding, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add margin horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(margin, $start, $end);
|
||||
}
|
||||
|
||||
// Add margin for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(margin, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add position horizontal
|
||||
// @param {string} $start - amount to position start
|
||||
// @param {string} $end - amount to left: 0; end
|
||||
// ----------------------------------------------------------
|
||||
@mixin position-horizontal($start: null, $end: null) {
|
||||
@if $start == $end {
|
||||
@include multi-dir() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
@include rtl() {
|
||||
left: unset;
|
||||
right: unset;
|
||||
|
||||
left: $end;
|
||||
right: $start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add position for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add border for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(border, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add border radius for all directions
|
||||
// @param {string} $top-start
|
||||
// @param {string} $top-end
|
||||
// @param {string} $bottom-end
|
||||
// @param {string} $bottom-start
|
||||
// ----------------------------------------------------------
|
||||
@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 {
|
||||
@include multi-dir() {
|
||||
border-radius: $top-start;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
border-top-left-radius: $top-start;
|
||||
border-top-right-radius: $top-end;
|
||||
border-bottom-right-radius: $bottom-end;
|
||||
border-bottom-left-radius: $bottom-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-top-left-radius: $top-end;
|
||||
border-top-right-radius: $top-start;
|
||||
border-bottom-right-radius: $bottom-start;
|
||||
border-bottom-left-radius: $bottom-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add direction for all directions
|
||||
// @param {string} $dir - Direction on LTR
|
||||
@mixin direction($dir) {
|
||||
$other-dir: null;
|
||||
|
||||
@if $dir == ltr {
|
||||
$other-dir: rtl;
|
||||
} @else {
|
||||
$other-dir: ltr;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
direction: $dir;
|
||||
}
|
||||
@include rtl() {
|
||||
direction: $other-dir;
|
||||
}
|
||||
}
|
||||
|
||||
// Add float for all directions
|
||||
// @param {string} $side
|
||||
// @param {string} $decorator - !important
|
||||
@mixin float($side, $decorator: null) {
|
||||
@if $side == start {
|
||||
@include ltr() {
|
||||
float: left $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: right $decorator;
|
||||
}
|
||||
} @else if $side == end {
|
||||
@include ltr() {
|
||||
float: right $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: left $decorator;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
float: $side $decorator;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
||||
@if $horizontal == start or $horizontal == end {
|
||||
$horizontal-ltr: null;
|
||||
$horizontal-rtl: null;
|
||||
@if $horizontal == start {
|
||||
$horizontal-ltr: left;
|
||||
$horizontal-rtl: right;
|
||||
} @else {
|
||||
$horizontal-ltr: right;
|
||||
$horizontal-rtl: left;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
@include rtl() {
|
||||
background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transform-origin($x-axis, $y-axis: null) {
|
||||
@if $x-axis == start {
|
||||
@include ltr() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
} @else if $x-axis == end {
|
||||
@include ltr() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
} @else if $x-axis == left or $x-axis == right {
|
||||
@include multi-dir() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add transform for all directions
|
||||
// @param {string} $transforms - comma separated list of transforms
|
||||
@mixin transform($transforms...) {
|
||||
$extra: null;
|
||||
|
||||
$x: null;
|
||||
$ltr-translate: null;
|
||||
$rtl-translate: null;
|
||||
|
||||
@each $transform in $transforms {
|
||||
@if (str-index($transform, translate3d)) {
|
||||
$transform: str-replace($transform, 'translate3d(');
|
||||
$transform: str-replace($transform, ')');
|
||||
|
||||
$coordinates: str-split($transform, ',');
|
||||
|
||||
$x: nth($coordinates, 1);
|
||||
$y: nth($coordinates, 2);
|
||||
$z: nth($coordinates, 3);
|
||||
|
||||
$ltr-translate: translate3d($x, $y, $z);
|
||||
$rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
|
||||
} @else {
|
||||
@if $extra == null {
|
||||
$extra: $transform;
|
||||
} @else {
|
||||
$extra: $extra $transform;
|
||||
@if $end != null {
|
||||
#{$prop}-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $x == '0' or $x == null {
|
||||
@include multi-dir() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
transform: $rtl-translate $extra;
|
||||
-webkit-#{$prop}-start: $start;
|
||||
#{$prop}-inline-start: $start;
|
||||
-webkit-#{$prop}-end: $end;
|
||||
#{$prop}-inline-end: $end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add property for all directions
|
||||
// @param {string} $prop
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// @param {boolean} $content include content or use default
|
||||
// ----------------------------------------------------------
|
||||
@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property-horizontal($prop, $start, $end);
|
||||
#{$prop}-top: $top;
|
||||
#{$prop}-bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add padding horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(padding, $start, $end);
|
||||
}
|
||||
|
||||
// Add padding for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(padding, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add margin horizontal
|
||||
// @param {string} $start
|
||||
// @param {string} $end
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin-horizontal($start, $end: $start) {
|
||||
@include property-horizontal(margin, $start, $end);
|
||||
}
|
||||
|
||||
// Add margin for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(margin, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add position horizontal
|
||||
// @param {string} $start - amount to position start
|
||||
// @param {string} $end - amount to left: 0; end
|
||||
// ----------------------------------------------------------
|
||||
@mixin position-horizontal($start: null, $end: null) {
|
||||
@if $start == $end {
|
||||
@include multi-dir() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
left: $start;
|
||||
right: $end;
|
||||
}
|
||||
@include rtl() {
|
||||
left: unset;
|
||||
right: unset;
|
||||
|
||||
left: $end;
|
||||
right: $start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add position for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
// Add border for all directions
|
||||
// @param {string} $top
|
||||
// @param {string} $end
|
||||
// @param {string} $bottom
|
||||
// @param {string} $start
|
||||
// ----------------------------------------------------------
|
||||
@mixin border($top, $end: $top, $bottom: $top, $start: $end) {
|
||||
@include property(border, $top, $end, $bottom, $start);
|
||||
}
|
||||
|
||||
// Add border radius for all directions
|
||||
// @param {string} $top-start
|
||||
// @param {string} $top-end
|
||||
// @param {string} $bottom-end
|
||||
// @param {string} $bottom-start
|
||||
// ----------------------------------------------------------
|
||||
@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 {
|
||||
@include multi-dir() {
|
||||
border-radius: $top-start;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
border-top-left-radius: $top-start;
|
||||
border-top-right-radius: $top-end;
|
||||
border-bottom-right-radius: $bottom-end;
|
||||
border-bottom-left-radius: $bottom-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-top-left-radius: $top-end;
|
||||
border-top-right-radius: $top-start;
|
||||
border-bottom-right-radius: $bottom-start;
|
||||
border-bottom-left-radius: $bottom-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add direction for all directions
|
||||
// @param {string} $dir - Direction on LTR
|
||||
@mixin direction($dir) {
|
||||
$other-dir: null;
|
||||
|
||||
@if $dir == ltr {
|
||||
$other-dir: rtl;
|
||||
} @else {
|
||||
$other-dir: ltr;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
direction: $dir;
|
||||
}
|
||||
@include rtl() {
|
||||
direction: $other-dir;
|
||||
}
|
||||
}
|
||||
|
||||
// Add float for all directions
|
||||
// @param {string} $side
|
||||
// @param {string} $decorator - !important
|
||||
@mixin float($side, $decorator: null) {
|
||||
@if $side == start {
|
||||
@include ltr() {
|
||||
float: left $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: right $decorator;
|
||||
}
|
||||
} @else if $side == end {
|
||||
@include ltr() {
|
||||
float: right $decorator;
|
||||
}
|
||||
@include rtl() {
|
||||
float: left $decorator;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
float: $side $decorator;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {
|
||||
@if $horizontal == start or $horizontal == end {
|
||||
$horizontal-ltr: null;
|
||||
$horizontal-rtl: null;
|
||||
@if $horizontal == start {
|
||||
$horizontal-ltr: left;
|
||||
$horizontal-rtl: right;
|
||||
} @else {
|
||||
$horizontal-ltr: right;
|
||||
$horizontal-rtl: left;
|
||||
}
|
||||
|
||||
@include ltr() {
|
||||
background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
@include rtl() {
|
||||
background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
} @else {
|
||||
@include multi-dir() {
|
||||
background-position: $horizontal $horizontal-amount $vertical $vertical-amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transform-origin($x-axis, $y-axis: null) {
|
||||
@if $x-axis == start {
|
||||
@include ltr() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
} @else if $x-axis == end {
|
||||
@include ltr() {
|
||||
transform-origin: right $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: left $y-axis;
|
||||
}
|
||||
} @else if $x-axis == left or $x-axis == right {
|
||||
@include multi-dir() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform-origin: $x-axis $y-axis;
|
||||
}
|
||||
@include rtl() {
|
||||
transform-origin: calc(100% - #{$x-axis}) $y-axis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add transform for all directions
|
||||
// @param {string} $transforms - comma separated list of transforms
|
||||
@mixin transform($transforms...) {
|
||||
$extra: null;
|
||||
|
||||
$x: null;
|
||||
$ltr-translate: null;
|
||||
$rtl-translate: null;
|
||||
|
||||
@each $transform in $transforms {
|
||||
@if (str-index($transform, translate3d)) {
|
||||
$transform: str-replace($transform, 'translate3d(');
|
||||
$transform: str-replace($transform, ')');
|
||||
|
||||
$coordinates: str-split($transform, ',');
|
||||
|
||||
$x: nth($coordinates, 1);
|
||||
$y: nth($coordinates, 2);
|
||||
$z: nth($coordinates, 3);
|
||||
|
||||
$ltr-translate: translate3d($x, $y, $z);
|
||||
$rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);
|
||||
} @else {
|
||||
@if $extra == null {
|
||||
$extra: $transform;
|
||||
} @else {
|
||||
$extra: $extra $transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $x == '0' or $x == null {
|
||||
@include multi-dir() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
} @else {
|
||||
@include ltr() {
|
||||
transform: $ltr-translate $extra;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
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{
|
||||
&:focus, &:focus-visible {
|
||||
box-shadow: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue