Merge pull request #2767 from crazyserver/MOBILE-3670

Mobile 3670
This commit is contained in:
Dani Palou 2021-05-17 10:54:43 +02:00 committed by GitHub
commit 03dc88107d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 475 additions and 391 deletions

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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;
} }
} }

View File

@ -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;

View File

@ -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>
<h2>{{ discussion.fullname }}</h2> <div class="flex-row ion-justify-content-between">
<ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread"> <h2>{{ discussion.fullname }}</h2>
<span *ngIf="discussion.unread" class="core-primary-circle"></span> <ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
<span *ngIf="discussion.message!.timecreated > 0"> <span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
{{discussion.message!.timecreated / 1000 | coreDateDayOrTime}} {{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
</span> </span>
</ion-note> <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> <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">

View File

@ -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,13 +162,24 @@
[linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar> [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
<ion-label> <ion-label>
<h2> <div class="flex-row ion-justify-content-between">
<core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text> <h2>
<ion-icon name="fas-user-slash" *ngIf="conversation.isblocked" <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
[title]="'addon.messages.contactblocked' | translate"></ion-icon> <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
<ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute" [title]="'addon.messages.contactblocked' | translate"></ion-icon>
[title]="'addon.messages.mutedconversation' | translate"></ion-icon> <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
</h2> [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" <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>

View File

@ -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">

View File

@ -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();
} }
} }

View File

@ -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);
}

View File

@ -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">

View File

@ -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);
}
}
} }

View File

@ -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;
}
} }

View File

@ -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);

View File

@ -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;
} }
} }

View File

@ -287,353 +287,353 @@
// $root: #{&}; // $root: #{&};
// @at-root [dir] { // @at-root [dir] {
// #{$root} { // #{$root} {
// @content; // @content;
// } // }
// } // }
} }
@mixin rtl() { @mixin rtl() {
$root: #{&}; $root: #{&};
@at-root [dir=rtl] { @at-root [dir=rtl] {
#{$root} { #{$root} {
@content;
}
}
}
@mixin ltr() {
@content; @content;
} }
}
}
@mixin ltr() {
@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='", "'"), " ");
@if $flip-rtl != true or $viewBox == null { @if $flip-rtl != true or $viewBox == null {
@include multi-dir() { @include multi-dir() {
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}"); 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}");
}
}
} }
} @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 @include ltr () {
// @param {string} $start background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
// @param {string} $end }
// ---------------------------------------------------------- @include rtl() {
@mixin property-horizontal($prop, $start, $end: $start) { background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-url}");
@if $start == 0 and $end == 0 { }
#{$prop}-left: $start; }
#{$prop}-right: $end; }
} @else { // Add property horizontal
#{$prop}-left: $start; // @param {string} $start
#{$prop}-right: $end; // @param {string} $end
// ----------------------------------------------------------
@mixin property-horizontal($prop, $start, $end: $start) {
@if $start == 0 and $end == 0 {
#{$prop}-left: $start;
#{$prop}-right: $end;
@at-root { } @else {
@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) { #{$prop}-left: $start;
& { #{$prop}-right: $end;
@if $start != null {
#{$prop}-left: unset;
}
@if $end != null {
#{$prop}-right: unset;
}
-webkit-#{$prop}-start: $start; @at-root {
#{$prop}-inline-start: $start; @supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {
-webkit-#{$prop}-end: $end; & {
#{$prop}-inline-end: $end; @if $start != null {
} #{$prop}-left: unset;
} }
} @if $end != null {
} #{$prop}-right: 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 $x == '0' or $x == null { -webkit-#{$prop}-start: $start;
@include multi-dir() { #{$prop}-inline-start: $start;
transform: $ltr-translate $extra; -webkit-#{$prop}-end: $end;
} #{$prop}-inline-end: $end;
} @else {
@include ltr() {
transform: $ltr-translate $extra;
}
@include rtl() {
transform: $rtl-translate $extra;
} }
} }
} }
}
}
// 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;
}
}
}

View File

@ -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;