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

Merge pull request from crazyserver/MOBILE-3670 

Mobile 3670
main
Dani Palou 2021-05-17 10:54:43 +02:00 committed by GitHub
parent 2f8333d516 ac99f5585a
commit 03dc88107d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 475 additions and 391 deletions
src
addons
block
recentlyaccessedcourses/components/recentlyaccessedcourses
recentlyaccesseditems/components/recentlyaccesseditems
starredcourses/components/starredcourses
timeline/components/timeline
messages
mod/quiz/pages/review
remotethemes/services
core
components/loading
features
course/components/format
search/components/search-box
services
singletons
theme

2
src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
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">

2
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
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>

4
src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
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>

2
src/addons/block/timeline/components/timeline/addon-block-timeline.html
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>

21
src/addons/messages/messages-common.scss
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;
} }
} }

2
src/addons/messages/pages/discussion/discussion.scss
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;

12
src/addons/messages/pages/discussions-35/discussions.html
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>
<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">

20
src/addons/messages/pages/group-conversations/group-conversations.html
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,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>

4
src/addons/mod/quiz/pages/review/review.html
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">

5
src/addons/remotethemes/services/remotethemes.ts
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();
} }
} }

21
src/core/components/loading/loading.scss
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);
}

2
src/core/features/course/components/format/core-course-format.html
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">

16
src/core/features/course/components/format/format.scss
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);
}
}
} }

11
src/core/features/search/components/search-box/search-box.scss
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;
}
} }

14
src/core/services/app.ts
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);

33
src/core/singletons/colors.ts
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;
} }
} }

202
src/theme/globals.mixins.ionic.scss
View File

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

7
src/theme/theme.base.scss
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;