forked from CIT/Vmeda.Online
MOBILE-3659 course: Style fixes
This commit is contained in:
Pau Ferrer Ocaña
Dani Palou
parent
3daf03dbf4
commit
35d8ab3b5a
@ -149,6 +149,9 @@
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.core-module-icon[slot="start"] {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context([dir=rtl]) {
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
<ion-list>
|
||||
<!-- Course expand="block"s. -->
|
||||
<ng-container *ngFor="let block of blocks">
|
||||
<core-block *ngIf="block.visible" [block]="block" contextLevel="course" [instanceId]="courseId" [extraData]="{'downloadEnabled': downloadEnabled}"></core-block>
|
||||
<core-block *ngIf="block.visible" [block]="block" contextLevel="course" [instanceId]="courseId"
|
||||
[extraData]="{'downloadEnabled': downloadEnabled}"></core-block>
|
||||
</ng-container>
|
||||
</ion-list>
|
||||
</core-loading>
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
max-width: var(--side-blocks-max-width);
|
||||
min-width: var(--side-blocks-min-width);
|
||||
box-shadow: -4px 0px 16px rgba(0, 0, 0, 0.18);
|
||||
z-index: 2;
|
||||
// @todo @include core-split-area-end();
|
||||
}
|
||||
|
||||
|
||||
@ -19,17 +19,17 @@
|
||||
<div *ngIf="displaySectionSelector && sections && hasSeveralSections"
|
||||
class="ion-text-wrap clearfix ion-justify-content-between core-button-selector-row"
|
||||
[class.core-section-download]="downloadEnabled">
|
||||
<ion-button class="ion-float-start" (click)="showSectionSelector()" color="light" aria-haspopup="true"
|
||||
class="core-button-select button-no-uppercase" [attr.aria-expanded]="sectionSelectorExpanded"
|
||||
<ion-button class="core-button-select button-no-uppercase" (click)="showSectionSelector()"
|
||||
aria-haspopup="true" [attr.aria-expanded]="sectionSelectorExpanded"
|
||||
id="core-course-section-button" expand="block"> <!-- @todo: attr.aria-label? -->
|
||||
<core-icon name="fas-folder" slot="start"></core-icon>
|
||||
<ion-icon name="fas-folder" slot="start"></ion-icon>
|
||||
<span class="core-button-select-text">
|
||||
<core-format-text *ngIf="selectedSection" [text]="selectedSection.name" contextLevel="course"
|
||||
[contextInstanceId]="course?.id" [clean]="true" [singleLine]="true">
|
||||
</core-format-text>
|
||||
<span *ngIf="!selectedSection">{{ 'core.course.sections' | translate }}</span>
|
||||
</span>
|
||||
<core-icon name="fas-chevron-down" slot="end"></core-icon>
|
||||
<div class="select-icon" slot="end"><div class="select-icon-inner"></div></div>
|
||||
</ion-button>
|
||||
<!-- Section download. -->
|
||||
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: selectedSection}"></ng-container>
|
||||
@ -93,17 +93,17 @@
|
||||
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
|
||||
</div>
|
||||
|
||||
<ion-buttons class="ion-padding" class="core-course-section-nav-buttons safe-padding-horizontal"
|
||||
<ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
|
||||
*ngIf="displaySectionSelector && sections?.length">
|
||||
<ion-button *ngIf="previousSection" color="light" (click)="sectionChanged(previousSection)"
|
||||
<ion-button *ngIf="previousSection" color="medium" (click)="sectionChanged(previousSection)"
|
||||
title="{{ 'core.previous' | translate }}">
|
||||
<core-icon name="fas-chevron-left" slot="icon-only"></core-icon>
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only"></ion-icon>
|
||||
<core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"
|
||||
[contextInstanceId]="course?.id">
|
||||
</core-format-text>
|
||||
</ion-button>
|
||||
<ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" title="{{ 'core.next' | translate }}">
|
||||
<core-icon name="fas-chevron-right" slot="icon-only"></core-icon>
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only"></ion-icon>
|
||||
<core-format-text class="accesshide" [text]="nextSection.name" contextLevel="course"
|
||||
[contextInstanceId]="course?.id">
|
||||
</core-format-text>
|
||||
@ -120,21 +120,23 @@
|
||||
<ion-item-divider *ngIf="selectedSection?.id == allSectionsId && section.name" class="ion-text-wrap" color="light"
|
||||
[class.core-section-download]="downloadEnabled"
|
||||
[class.item-dimmed]="section.visible === 0 || section.uservisible === false">
|
||||
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
|
||||
<!-- Section download. -->
|
||||
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: section}"></ng-container>
|
||||
<p *ngIf="section.visible === 0 || section.availabilityinfo">
|
||||
<ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap">
|
||||
{{ 'core.course.hiddenfromstudents' | translate }}
|
||||
</ion-badge>
|
||||
<ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap">
|
||||
{{ 'core.notavailable' | translate }}
|
||||
</ion-badge>
|
||||
<ion-badge color="secondary" *ngIf="section.availabilityinfo" class="ion-text-wrap">
|
||||
<core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course?.id">
|
||||
</core-format-text>
|
||||
</ion-badge>
|
||||
</p>
|
||||
<ion-label>
|
||||
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id"></core-format-text>
|
||||
<!-- Section download. -->
|
||||
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: section}"></ng-container>
|
||||
<p *ngIf="section.visible === 0 || section.availabilityinfo">
|
||||
<ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible !== false" class="ion-text-wrap">
|
||||
{{ 'core.course.hiddenfromstudents' | translate }}
|
||||
</ion-badge>
|
||||
<ion-badge color="secondary" *ngIf="section.visible === 0 && section.uservisible === false" class="ion-text-wrap">
|
||||
{{ 'core.notavailable' | translate }}
|
||||
</ion-badge>
|
||||
<ion-badge color="secondary" *ngIf="section.availabilityinfo" class="ion-text-wrap">
|
||||
<core-format-text [text]=" section.availabilityinfo" contextLevel="course" [contextInstanceId]="course?.id">
|
||||
</core-format-text>
|
||||
</ion-badge>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item class="ion-text-wrap" *ngIf="section.summary">
|
||||
@ -163,4 +165,4 @@
|
||||
[loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="section.canCheckUpdates">
|
||||
</core-download-refresh>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// @todo
|
||||
// .item-divider {
|
||||
// .label {
|
||||
// margin-top: 0;
|
||||
@ -73,12 +74,4 @@
|
||||
// @include safe-area-padding-start($content-padding !important, $content-padding);
|
||||
// }
|
||||
|
||||
// .core-course-section-nav-buttons {
|
||||
// .button-inner core-format-text {
|
||||
// white-space: nowrap;
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// text-transform: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// @todo Review commented styles.
|
||||
// ion-app.app-root {
|
||||
// .safe-area-page,
|
||||
// .safe-padding-horizontal {
|
||||
@ -13,4 +14,4 @@
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<ion-item *ngIf="module && module.handlerData && module.visibleoncoursepage !== 0 && !module.handlerData.loading"
|
||||
class="ion-text-wrap" id="core-course-module-{{module.id}}" class="core-course-module-handler {{module.handlerData.class}}"
|
||||
id="core-course-module-{{module.id}}" class="ion-text-wrap core-course-module-handler {{module.handlerData.class}}"
|
||||
(click)="moduleClicked($event)" [title]="module.handlerData.a11yTitle" detail="false"
|
||||
[ngClass]="{'item-media': module.handlerData.icon, 'item-dimmed': module.visible === 0 || module.uservisible === false,
|
||||
'core-not-clickable': !module.handlerData.action || module.uservisible === false}">
|
||||
@ -31,7 +31,7 @@
|
||||
[hidden]="button.hidden || spinner || module.handlerData.spinner" class="core-animate-show-hide"
|
||||
(click)="buttonClicked($event, button)"
|
||||
[attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">
|
||||
<core-icon [name]="button.icon" slot="icon-only"></core-icon>
|
||||
<ion-icon [name]="button.icon" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -70,4 +70,4 @@
|
||||
class="ion-text-wrap" id="core-course-module-{{module.id}}" [title]="module.handlerData.a11yTitle"
|
||||
[ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false">
|
||||
<ion-label><ion-spinner></ion-spinner></ion-label>
|
||||
</ion-item>
|
||||
</ion-item>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
:host {
|
||||
// @todo Review commented styles.
|
||||
|
||||
background: white;
|
||||
display: block;
|
||||
|
||||
@ -159,4 +161,4 @@
|
||||
|
||||
// ion-app.app-root .core-course-module-handler.item [item-start] + .item-inner {
|
||||
// @include margin-horizontal(4px, null);
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<ion-list id="core-course-section-selector" role="menu">
|
||||
<ng-container *ngFor="let section of sections">
|
||||
<ion-item *ngIf="!section.hiddenbynumsections && section.id != stealthModulesSectionId" class="ion-text-wrap"
|
||||
(click)="selectSection(section)" [class.core-primary-selected-item]="selected?.id == section.id"
|
||||
(click)="selectSection(section)" [class.core-selected-item]="selected?.id == section.id"
|
||||
[class.item-dimmed]="section.visible === 0 || section.uservisible === false" detail="false" role="menuitem"
|
||||
[attr.aria-hidden]="section.uservisible === false">
|
||||
|
||||
@ -36,4 +36,4 @@
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
||||
@ -72,7 +72,7 @@ export class CoreCourseModuleDefaultHandler implements CoreCourseModuleHandler {
|
||||
|
||||
if ('url' in module && module.url) {
|
||||
defaultData.buttons = [{
|
||||
icon: 'open',
|
||||
icon: 'fas-external-link-alt',
|
||||
label: 'core.openinbrowser',
|
||||
action: (e: Event): void => {
|
||||
e.preventDefault();
|
||||
|
||||
@ -24,85 +24,85 @@
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong" [title]="'core.editor.bold' | translate"
|
||||
(click)="buttonAction($event, 'bold', 'strong')" (mousedown)="mouseDownAction($event)">
|
||||
<core-icon name="fas-bold"></core-icon>
|
||||
<ion-icon name="fas-bold"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em" (click)="buttonAction($event, 'italic', 'em')"
|
||||
(mousedown)="mouseDownAction($event)" [title]=" 'core.editor.italic' | translate">
|
||||
<core-icon name="fas-italic"></core-icon>
|
||||
<ion-icon name="fas-italic"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline', 'u')"
|
||||
(mousedown)="mouseDownAction($event)" [title]="'core.editor.underline' | translate">
|
||||
<core-icon name="fas-underline"></core-icon>
|
||||
<ion-icon name="fas-underline"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" [title]="'core.editor.strike' | translate"
|
||||
(click)="buttonAction($event, 'strikethrough', 'strike')" (mousedown)="mouseDownAction($event)">
|
||||
<core-icon name="fas-strikethrough"></core-icon>
|
||||
<ion-icon name="fas-strikethrough"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'p', 'block')"
|
||||
(mousedown)="mouseDownAction($event)" [title]="'core.editor.p' | translate">
|
||||
<core-icon name="fas-paragraph"></core-icon>
|
||||
<ion-icon name="fas-paragraph"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'h3', 'block')"
|
||||
(mousedown)="mouseDownAction($event)" [title]="'core.editor.h3' | translate">
|
||||
<core-icon name="fas-heading"></core-icon>3
|
||||
<ion-icon name="fas-heading"></ion-icon>3
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" (click)="buttonAction($event, 'h4', 'block')"
|
||||
(mousedown)="mouseDownAction($event)" [title]="'core.editor.h4' | translate">
|
||||
<core-icon name="fas-heading"></core-icon>4
|
||||
<ion-icon name="fas-heading"></ion-icon>4
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'h5', 'block')"
|
||||
(mousedown)="mouseDownAction($event)" [title]="'core.editor.h5' | translate">
|
||||
<core-icon name="fas-heading"></core-icon>5
|
||||
<ion-icon name="fas-heading"></ion-icon>5
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (mousedown)="mouseDownAction($event)"
|
||||
(click)="buttonAction($event, 'insertUnorderedList')" [title]="'core.editor.unorderedlist' | translate">
|
||||
<core-icon name="fas-list-ul"></core-icon>
|
||||
<ion-icon name="fas-list-ul"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (mousedown)="mouseDownAction($event)"
|
||||
(click)="buttonAction($event, 'insertOrderedList')" [title]="'core.editor.orderedlist' | translate">
|
||||
<core-icon name="fas-list-ol"></core-icon>
|
||||
<ion-icon name="fas-list-ol"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (mousedown)="mouseDownAction($event)"
|
||||
[title]="'core.editor.clear' | translate">
|
||||
<core-icon name="fas-eraser"></core-icon>
|
||||
<ion-icon name="fas-eraser"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide *ngIf="canScanQR">
|
||||
<button [disabled]="!rteEnabled" (click)="scanQR($event)" (mousedown)="stopBubble($event)"
|
||||
[title]="'core.scanqr' | translate">
|
||||
<core-icon name="fas-qrcode"></core-icon>
|
||||
<ion-icon name="fas-qrcode"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide>
|
||||
<button [attr.aria-pressed]="!rteEnabled" (click)="toggleEditor($event)" (mousedown)="mouseDownAction($event)"
|
||||
[title]=" 'core.editor.toggle' | translate">
|
||||
<core-icon name="fas-code"></core-icon>
|
||||
<ion-icon name="fas-code"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
<ion-slide *ngIf="isPhone">
|
||||
<button (click)="hideToolbar($event)" (mousedown)="mouseDownAction($event)"
|
||||
[title]=" 'core.editor.hidetoolbar' | translate">
|
||||
<core-icon name="fas-times"></core-icon>
|
||||
<ion-icon name="fas-times"></ion-icon>
|
||||
</button>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { CoreCourseProvider } from '@features/course/services/course';
|
||||
import {
|
||||
CoreCourseAccessData,
|
||||
CoreCourseAccess,
|
||||
CoreCourseOptionsHandler,
|
||||
CoreCourseOptionsHandlerData,
|
||||
} from '@features/course/services/course-options-delegate';
|
||||
@ -68,7 +68,7 @@ export class CoreGradesCourseOptionHandlerService implements CoreCourseOptionsHa
|
||||
*/
|
||||
isEnabledForCourse(
|
||||
courseId: number,
|
||||
accessData: CoreCourseAccessData,
|
||||
accessData: CoreCourseAccess,
|
||||
navOptions?: CoreCourseUserAdminOrNavOptionIndexed,
|
||||
): boolean | Promise<boolean> {
|
||||
if (accessData && accessData.type == CoreCourseProvider.ACCESS_GUEST) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div *ngIf="!showPackage && urlParams" class="core-h5p-placeholder">
|
||||
<ion-button class="core-h5p-placeholder-play-button" fill="clear" (click)="play($event)">
|
||||
<core-icon name="far-play-circle" slot="icon-only"></core-icon>
|
||||
<ion-icon name="far-play-circle" slot="icon-only"></ion-icon>
|
||||
</ion-button>
|
||||
|
||||
<div class="core-h5p-placeholder-download-container">
|
||||
|
||||
@ -1,3 +1,31 @@
|
||||
// Common styles.
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
.text-center { text-align: center; }
|
||||
.text-justify { text-align: justify; }
|
||||
.clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.img-responsive {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
&[height] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.opacity-hide { opacity: 0; }
|
||||
.core-big { font-size: 115%; }
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
.button-no-uppercase {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// Correctly inherit ion-text-wrap onto labels.
|
||||
ion-item.ion-text-wrap ion-label {
|
||||
white-space: normal !important;
|
||||
@ -170,7 +198,8 @@ ion-toolbar {
|
||||
--border-color: var(--ion-color-danger);
|
||||
}
|
||||
.item-dimmed {
|
||||
opacity: 0.71;
|
||||
opacity: 0.7;
|
||||
--background: var(--gray-lighter);
|
||||
}
|
||||
|
||||
// Extra text colors.
|
||||
@ -301,15 +330,53 @@ ion-item img.core-module-icon[slot="start"] {
|
||||
// Select.
|
||||
ion-select.core-button-select,
|
||||
.core-button-select {
|
||||
background: var(--ion-color-primary-contrast);
|
||||
color: var(--ion-color-primary);
|
||||
white-space: normal;
|
||||
--background: var(--core-button-select-background);
|
||||
background: var(--background);
|
||||
--color: var(--ion-color-primary);
|
||||
color: var(--color);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-height: 45px;
|
||||
overflow: hidden;
|
||||
margin: 8px;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
&::part(icon) {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.core-button-select-text {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
}
|
||||
ion-button.core-button-select {
|
||||
&::part(native) {
|
||||
text-transform: none;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
}
|
||||
ion-icon {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.select-icon {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
position: relative;
|
||||
opacity: 0.33;
|
||||
|
||||
.select-icon-inner {
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
color: currentcolor;
|
||||
pointer-events: none;
|
||||
border-top: 5px solid;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// File uploader.
|
||||
@ -346,3 +413,5 @@ ion-select.core-button-select,
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
@import "./format-text.scss";
|
||||
|
||||
83
src/theme/format-text.scss
Normal file
83
src/theme/format-text.scss
Normal file
@ -0,0 +1,83 @@
|
||||
@import "./mixins.scss";
|
||||
|
||||
/** Format Text - Show more styles. */
|
||||
/** Styles of elements inside the directive should be placed in format-text.scss */
|
||||
core-format-text {
|
||||
user-select: text;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
&[maxHeight],
|
||||
&[ng-reflect-max-height] {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
/* Force display inline */
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// This is to allow clicks in radio/checkbox content.
|
||||
&.core-text-formatted {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
.core-show-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.core-shortened) {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
&.core-shortened {
|
||||
overflow: hidden;
|
||||
min-height: 50px;
|
||||
|
||||
.core-show-more {
|
||||
text-align: end;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
@include position(null, 0, 0, null);
|
||||
z-index: 7;
|
||||
background-color: var(--background);
|
||||
color: var(--color);
|
||||
padding-left: 10px; // RTL
|
||||
/*@include darkmode() {
|
||||
color: var(--white);
|
||||
background-color: $core-dark-item-bg-color;
|
||||
}*/
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(calc(100% - 50px), rgba(0, 0, 0, 0)), color-stop(calc(100% - 15px), var(--background)));
|
||||
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(100% - 50px), var(--background) calc(100% - 15px));
|
||||
z-index: 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.core-expand-in-fullview {
|
||||
.core-show-more {
|
||||
@include push-arrow-color(dedede, true);
|
||||
@include padding-horizontal(null, 18px);
|
||||
@include background-position(end, 0, center);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -11,6 +11,7 @@
|
||||
|
||||
/* Application styles */
|
||||
@import "./variables.scss";
|
||||
@import "./mixins.scss";
|
||||
|
||||
/* Core CSS required for Ionic components to work properly */
|
||||
@import "~@ionic/angular/css/core.css";
|
||||
|
||||
697
src/theme/mixins.scss
Normal file
697
src/theme/mixins.scss
Normal file
@ -0,0 +1,697 @@
|
||||
// Place here our custom mixins.
|
||||
@mixin core-transition($where: all, $time: 500ms) {
|
||||
-webkit-transition: $where $time ease-in-out;
|
||||
-moz-transition: $where $time ease-in-out;
|
||||
-ms-transition: $where $time ease-in-out;
|
||||
-o-transition: $where $time ease-in-out;
|
||||
transition: $where $time ease-in-out;
|
||||
}
|
||||
|
||||
@mixin push-arrow-color($color: dedede, $flip-rtl: false) {
|
||||
$svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
|
||||
@if $flip-rtl != true {
|
||||
@include multi-dir() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
|
||||
}
|
||||
} @else {
|
||||
$flipped-svg: "<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20transform='translate(20,%200)%20scale(-1,%201)'%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23#{$color}'/></svg>";
|
||||
|
||||
@include ltr () {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$svg}");
|
||||
}
|
||||
@include rtl() {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$flipped-svg}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-start($px, $type, $color) {
|
||||
@include ltr() {
|
||||
border-left: $px $type $color;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-right: $px $type $color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin border-end($px, $type, $color) {
|
||||
@include ltr() {
|
||||
border-right: $px $type $color;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
border-left: $px $type $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-border-start($px, $type, $color) {
|
||||
$safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
|
||||
$safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});
|
||||
|
||||
@include border-start($px, $type, $color);
|
||||
@media screen and (orientation: landscape) {
|
||||
@include border-start($safe-area-position, $type, $color);
|
||||
@include border-start($safe-area-position-env, $type, $color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-border-end($px, $type, $color) {
|
||||
$safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
|
||||
$safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
|
||||
|
||||
@include border-end($px, $type, $color);
|
||||
@media screen and (orientation: landscape) {
|
||||
@include border-end($safe-area-position, $type, $color);
|
||||
@include border-end($safe-area-position-env, $type, $color);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-margin-horizontal($start, $end: $start) {
|
||||
$safe-area-end: null;
|
||||
$safe-area-start: null;
|
||||
$safe-area-start-env: null;
|
||||
$safe-area-end-env: null;
|
||||
|
||||
@if ($end) {
|
||||
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
|
||||
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
|
||||
}
|
||||
@if ($start) {
|
||||
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
|
||||
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
|
||||
}
|
||||
|
||||
@include margin-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include margin-horizontal($safe-area-start, $safe-area-end);
|
||||
@include margin-horizontal($safe-area-start-env, $safe-area-end-env);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-padding-start($start, $end) {
|
||||
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
|
||||
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
|
||||
|
||||
@include padding-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include padding-horizontal($safe-area-start, $end);
|
||||
@include padding-horizontal($safe-area-start-env, $end);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-padding-end($start, $end) {
|
||||
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
|
||||
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
|
||||
|
||||
@include padding-horizontal($start, $end);
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@include padding-horizontal($start, $safe-area-end);
|
||||
@include padding-horizontal($start, $safe-area-end-env);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
|
||||
@include position-horizontal($start, $end);
|
||||
@include safe-position-horizontal($start, $end);
|
||||
top: $top;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
@mixin core-headings() {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-as-items() {
|
||||
.item-md.item-block > .item-inner {
|
||||
border-bottom: 1px solid $list-md-border-color;
|
||||
}
|
||||
|
||||
.item-ios.item-block > .item-inner {
|
||||
border-bottom: $hairlines-width solid $list-ios-border-color;
|
||||
}
|
||||
|
||||
&:last-child .item > .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-items() {
|
||||
&.item-md.item-block > .item-inner {
|
||||
border-bottom: 1px solid $list-md-border-color;
|
||||
}
|
||||
|
||||
&.item-ios.item-block > .item-inner {
|
||||
border-bottom: $hairlines-width solid $list-ios-border-color;
|
||||
}
|
||||
|
||||
&.item-block:last-child > .item-inner {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin darkmode() {
|
||||
$root: #{&};
|
||||
|
||||
@at-root body.dark {
|
||||
#{$root} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Extracted from ionic.mixins.scss
|
||||
// https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
|
||||
@mixin input-cover() {
|
||||
@include position(0, null, null, 0);
|
||||
@include margin(0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
appearance: none;
|
||||
outline: none;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin text-inherit() {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-decoration: inherit;
|
||||
text-indent: inherit;
|
||||
text-overflow: inherit;
|
||||
text-transform: inherit;
|
||||
text-align: inherit;
|
||||
white-space: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@mixin button-state() {
|
||||
@include position(0, 0, 0, 0);
|
||||
|
||||
position: absolute;
|
||||
|
||||
content: "";
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin font-smoothing() {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
// Get the key from a map based on the index
|
||||
@function index-to-key($map, $index) {
|
||||
$keys: map-keys($map);
|
||||
|
||||
@return nth($keys, $index);
|
||||
}
|
||||
|
||||
|
||||
// Breakpoint Mixins
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
|
||||
//
|
||||
// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// ---------------------------------------------------------------------------------
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
|
||||
@return if($name != index-to-key($breakpoints, 1), $min, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
// The maximum value is reduced by 0.02px to work around the limitations of
|
||||
// `min-` and `max-` prefixes and viewports with fractional widths.
|
||||
//
|
||||
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
|
||||
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=178261 // See https://bugs.webkit.org/show_bug.cgi?id=178261
|
||||
//
|
||||
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767.98px
|
||||
@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {
|
||||
$max: map-get($breakpoints, $name);
|
||||
@return if($max and $max > 0, $max - .02, null);
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text Direction - ltr / rtl
|
||||
//
|
||||
// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
|
||||
// to override ltr defaults.
|
||||
// ----------------------------------------------------------
|
||||
|
||||
@mixin multi-dir() {
|
||||
@content;
|
||||
|
||||
// $root: #{&};
|
||||
// @at-root [dir] {
|
||||
// #{$root} {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin rtl() {
|
||||
$root: #{&};
|
||||
|
||||
@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='", "'"), " ");
|
||||
|
||||
@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}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
} @else {
|
||||
#{$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;
|
||||
}
|
||||
|
||||
-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -162,6 +162,8 @@
|
||||
--background: var(--gray-lighter);
|
||||
}
|
||||
|
||||
--core-button-select-background: var(--custom-button-select-background, var(--ion-color-primary-contrast));
|
||||
|
||||
--selected-item-color: var(--custom-selected-item-color, var(--core-color));
|
||||
--selected-item-border-width: var(--custom-selected-item-border-width, 5px);
|
||||
|
||||
@ -229,6 +231,20 @@
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-color-light: #3a3a3a;
|
||||
--ion-color-light-rgb: 58,58,58;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255,255,255;
|
||||
--ion-color-light-shade: #333333;
|
||||
--ion-color-light-tint: #4e4e4e;
|
||||
|
||||
--ion-color-dark: #f5f5f5;
|
||||
--ion-color-dark-rgb: 245,245,245;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0,0,0;
|
||||
--ion-color-dark-shade: #d8d8d8;
|
||||
--ion-color-dark-tint: #f6f6f6;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
@ -261,6 +277,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
--core-button-select-background: var(--custom-button-select-background, #3a3a3a);
|
||||
|
||||
|
||||
--core-login-background: var(--custom-login-background, #3a3a3a);
|
||||
--core-login-text-color: var(--custom-login-text-color, white);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user