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

Merge pull request #2820 from crazyserver/MOBILE-3320 

Mobile 3320
main
Dani Palou 2021-06-09 14:06:11 +02:00 committed by GitHub
parent 15cd2b340f e09c5eabfc
commit 90fc015e34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 658 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/addons/calendar/pages/edit-event/edit-event.html
View File

@ -16,7 +16,7 @@
<!-- Event name. -->
<ion-item class="ion-text-wrap">
<ion-label position="stacked">
<h2 [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</h2>
<p class="item-heading" [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</p>
</ion-label>
<ion-input type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate" formControlName="name">
</ion-input>
@ -25,7 +25,9 @@
<!-- Date. -->
<ion-item class="ion-text-wrap">
<ion-label position="stacked"><h2 [core-mark-required]="true">{{ 'core.date' | translate }}</h2></ion-label>
<ion-label position="stacked">
<p class="item-heading" [core-mark-required]="true">{{ 'core.date' | translate }}</p>
</ion-label>
<ion-datetime formControlName="timestart" [placeholder]="'core.date' | translate" [displayFormat]="dateFormat"
[max]="maxDate" [min]="minDate">
</ion-datetime>
@ -35,7 +37,7 @@
<!-- Type. -->
<ion-item class="ion-text-wrap addon-calendar-eventtype-container">
<ion-label>
<h2 [core-mark-required]="true">{{ 'addon.calendar.eventkind' | translate }}</h2>
<p class="item-heading" [core-mark-required]="true">{{ 'addon.calendar.eventkind' | translate }}</p>
</ion-label>
<p *ngIf="eventTypes.length == 1" slot="end">{{eventTypes[0].name | translate }}</p>
<ion-select
@ -51,7 +53,9 @@
<!-- Category. -->
<ion-item class="ion-text-wrap" *ngIf="typeControl.value == 'category'">
<ion-label><h2 [core-mark-required]="true">{{ 'core.category' | translate }}</h2></ion-label>
<ion-label>
<p class="item-heading" [core-mark-required]="true">{{ 'core.category' | translate }}</p>
</ion-label>
<ion-select formControlName="categoryid" interface="action-sheet"
[placeholder]="'core.noselection' | translate">
<ion-select-option *ngFor="let category of categories" [value]="category.id">
@ -62,7 +66,9 @@
<!-- Course. -->
<ion-item class="ion-text-wrap" *ngIf="typeControl.value == 'course'">
<ion-label><h2 [core-mark-required]="true">{{ 'core.course' | translate }}</h2></ion-label>
<ion-label>
<p class="item-heading" [core-mark-required]="true">{{ 'core.course' | translate }}</p>
</ion-label>
<ion-select formControlName="courseid" interface="action-sheet"
[placeholder]="'core.noselection' | translate">
<ion-select-option *ngFor="let course of courses" [value]="course.id">{{ course.fullname }}</ion-select-option>
@ -73,7 +79,9 @@
<ng-container *ngIf="typeControl.value == 'group'">
<!-- Select the course. -->
<ion-item class="ion-text-wrap">
<ion-label><h2 [core-mark-required]="true">{{ 'core.course' | translate }}</h2></ion-label>
<ion-label>
<p class="item-heading" [core-mark-required]="true">{{ 'core.course' | translate }}</p>
</ion-label>
<ion-select formControlName="groupcourseid"
interface="action-sheet" [placeholder]="'core.noselection' | translate"
(ionChange)="groupCourseSelected()">
@ -88,7 +96,9 @@
</ion-item>
<!-- Select the group. -->
<ion-item class="ion-text-wrap" *ngIf="!loadingGroups && groups.length > 0">
<ion-label><h2 [core-mark-required]="true">{{ 'core.group' | translate }}</h2></ion-label>
<ion-label>
<p class="item-heading" [core-mark-required]="true">{{ 'core.group' | translate }}</p>
</ion-label>
<ion-select formControlName="groupid" interface="action-sheet"
[placeholder]="'core.noselection' | translate">
<ion-select-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-select-option>
@ -101,19 +111,21 @@
</ng-container>
<!-- Advanced options. -->
<ion-item button class="ion-text-wrap core-expandable divider" (click)="toggleAdvanced()" detail="false">
<ion-item button class="ion-text-wrap divider" (click)="toggleAdvanced()" detail="false">
<ion-icon *ngIf="!advanced" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
<ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
<ion-label>
<h2 *ngIf="!advanced">{{ 'core.showmore' | translate }}</h2>
<h2 *ngIf="advanced">{{ 'core.showless' | translate }}</h2>
<p class="item-heading" *ngIf="!advanced">{{ 'core.showmore' | translate }}</p>
<p class="item-heading" *ngIf="advanced">{{ 'core.showless' | translate }}</p>
</ion-label>
</ion-item>
<div [hidden]="!advanced">
<!-- Description. -->
<ion-item class="ion-text-wrap">
<ion-label position="stacked"><h2>{{ 'core.description' | translate }}</h2></ion-label>
<ion-label position="stacked">
<p class="item-heading">{{ 'core.description' | translate }}</p>
</ion-label>
<core-rich-text-editor [control]="descriptionControl" [attr.aria-label]="'core.description' | translate"
[placeholder]="'core.description' | translate" name="description" [component]="component"
[componentId]="eventId" [autoSave]="false"></core-rich-text-editor>
@ -121,7 +133,9 @@
<!-- Location. -->
<ion-item class="ion-text-wrap">
<ion-label position="stacked"><h2>{{ 'core.location' | translate }}</h2></ion-label>
<ion-label position="stacked">
<p class="item-heading">{{ 'core.location' | translate }}</p>
</ion-label>
<ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location">
</ion-input>
</ion-item>
@ -129,26 +143,37 @@
<!-- Duration. -->
<div class="ion-text-wrap addon-calendar-radio-container">
<ion-radio-group formControlName="duration">
<ion-item class="addon-calendar-radio-title">
<ion-item-divider class="addon-calendar-radio-title">
<ion-label>
<h2>{{ 'addon.calendar.eventduration' | translate }}</h2>
<p class="item-heading">{{ 'addon.calendar.eventduration' | translate }}</p>
</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>
<p>{{ 'addon.calendar.durationnone' | translate }}</p>
</ion-label>
<ion-radio slot="end" value="0"></ion-radio>
</ion-item>
<ion-item lines="none">
<ion-label>
<p>{{ 'addon.calendar.durationuntil' | translate }}</p>
</ion-label>
<ion-radio slot="end" value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-radio slot="end" value="0"></ion-radio>
<ion-label>{{ 'addon.calendar.durationnone' | translate }}</ion-label>
</ion-item>
<ion-item button (click)="selectDuration('1')" detail="false">
<ion-radio slot="end" value="1"></ion-radio>
<ion-label>{{ 'addon.calendar.durationuntil' | translate }}</ion-label>
<ion-datetime formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
[placeholder]="'addon.calendar.durationuntil' | translate"
[placeholder]="'addon.calendar.durationuntil' | translate" slot="end"
[displayFormat]="dateFormat" [disabled]="form.controls.duration.value != 1">
</ion-datetime>
</ion-item>
<ion-item button (click)="selectDuration('2')" detail="false">
<ion-item lines="none">
<ion-label>
<p>{{ 'addon.calendar.durationminutes' | translate }}</p>
</ion-label>
<ion-radio slot="end" value="2"></ion-radio>
<ion-label>{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
</ion-item>
<ion-item>
<ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
<ion-input type="number" name="timedurationminutes" slot="end"
[placeholder]="'addon.calendar.durationminutes' | translate"
formControlName="timedurationminutes" [disabled]="form.controls.duration.value != 2"></ion-input>
@ -158,33 +183,40 @@
<!-- Repeat (for new events). -->
<ng-container *ngIf="!eventId || eventId < 0">
<ion-item class="ion-text-wrap">
<ion-item class="ion-text-wrap divider" lines="none">
<ion-label>
<h2>{{ 'addon.calendar.repeatevent' | translate }}</h2>
<p class="item-heading">{{ 'addon.calendar.repeatevent' | translate }}</p>
</ion-label>
<ion-checkbox slot="end" formControlName="repeat"></ion-checkbox>
</ion-item>
<ion-item class="ion-text-wrap" *ngIf="form.controls.repeat.value">
<ion-label position="stacked"><h2>{{ 'addon.calendar.repeatweeksl' | translate }}</h2></ion-label>
<ion-input type="number" name="repeats" formControlName="repeats"></ion-input>
<ion-item class="ion-text-wrap">
<ion-label position="stacked">
<p>{{ 'addon.calendar.repeatweeksl' | translate }}</p>
</ion-label>
<ion-input type="number" name="repeats" formControlName="repeats" [disabled]="!form.controls.repeat.value">
</ion-input>
</ion-item>
</ng-container>
<!-- Apply to all events or just this one (editing repeated events). -->
<div *ngIf="eventRepeatId" class="ion-text-wrap addon-calendar-radio-container">
<ion-radio-group formControlName="repeateditall">
<ion-item class="addon-calendar-radio-title">
<ion-item-divider class="addon-calendar-radio-title">
<ion-label>
<h2>{{ 'addon.calendar.repeatedevents' | translate }}</h2>
<p class="item-heading">{{ 'addon.calendar.repeatedevents' | translate }}</p>
</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>
<p>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</p>
</ion-label>
<ion-radio slot="end" value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</ion-label>
<ion-radio slot="end" [value]="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>{{ 'addon.calendar.repeateditthis' | translate }}</ion-label>
<ion-radio slot="end" [value]="0"></ion-radio>
<ion-label>
<p>{{ 'addon.calendar.repeateditthis' | translate }}</p>
</ion-label>
<ion-radio slot="end" value="0"></ion-radio>
</ion-item>
</ion-radio-group>
</div>
@ -194,12 +226,14 @@
<ion-label>
<ion-row>
<ion-col>
<ion-button expand="block" (click)="submit()" [disabled]="!form.valid">
<ion-button expand="block" (click)="submit()" [disabled]="!form.valid" type="submit">
{{ 'core.save' | translate }}
</ion-button>
</ion-col>
<ion-col *ngIf="hasOffline && eventId && eventId < 0">
<ion-button expand="block" color="light" (click)="discard()">{{ 'core.discard' | translate }}</ion-button>
<ion-button expand="block" color="light" (click)="discard()">
{{ 'core.discard' | translate }}
</ion-button>
</ion-col>
</ion-row>
</ion-label>

8
src/addons/messages/pages/group-conversations/group-conversations.html
View File

@ -17,7 +17,7 @@
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="core-expand-max">
<ion-content>
<core-split-view>
<ion-refresher slot="fixed" [disabled]="!loaded || !currentListEl" (ionRefresh)="refreshData($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
@ -36,7 +36,7 @@
<!-- Favourite conversations. -->
<ion-item
button
class="ion-text-wrap core-expandable divider"
class="ion-text-wrap divider"
(click)="toggle(favourites)"
sticky="true"
[attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
@ -72,7 +72,7 @@
<!-- Group conversations. -->
<ion-item
button
class="divider ion-text-wrap core-expandable"
class="divider ion-text-wrap"
(click)="toggle(group)"
sticky="true"
[attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate"
@ -106,7 +106,7 @@
<ion-item
button
class="divider ion-text-wrap core-expandable"
class="divider ion-text-wrap"
(click)="toggle(individual)"
sticky="true"
[attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"

2
src/addons/mod/forum/components/edit-post/edit-post.html
View File

@ -26,7 +26,7 @@
</core-rich-text-editor>
</ion-item>
<ion-item
button class="divider ion-text-wrap core-expandable"
button class="divider ion-text-wrap"
(click)="toggleAdvanced()"
role="heading"
detail="false"

2
src/addons/mod/forum/components/post/post.html
View File

@ -124,7 +124,7 @@
<ng-container *ngIf="forum.id && forum.maxattachments > 0">
<ion-item
button
class="divider core-expandable ion-text-wrap"
class="divider ion-text-wrap"
(click)="toggleAdvanced()" detail="false"
[attr.aria-expanded]="advanced"
[attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"

2
src/addons/mod/forum/pages/new-discussion/new-discussion.html
View File

@ -33,7 +33,7 @@
</ion-item>
<ion-item
button
class="divider ion-text-wrap core-expandable"
class="divider ion-text-wrap"
(click)="toggleAdvanced()"
detail="false"
[attr.aria-expanded]="advanced"

12
src/addons/qtype/gapselect/component/gapselect.scss
View File

@ -3,16 +3,4 @@
p {
margin: 0 0 .5em;
}
select {
height: 30px;
line-height: 30px;
display: inline-block;
border: 1px solid var(--gray-dark);
padding: 4px 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-bottom: 10px;
}
}

15
src/addons/qtype/multianswer/component/multianswer.scss
View File

@ -20,19 +20,4 @@
td {
display: table-cell;
}
input, select {
border-radius: 4px;
display: inline-block;
border: 1px solid var(--gray-dark);
padding: 6px 8px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 10px;
}
select {
height: 30px;
line-height: 30px;
}
}

8
src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
View File

@ -11,8 +11,8 @@
<!-- Checkbox for multiple choice. -->
<ng-container *ngIf="multiQuestion.multi">
<ion-item class="ion-text-wrap" *ngFor="let option of multiQuestion.options">
<ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
<ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options">
<ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' class="flex">
<core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text>
@ -39,8 +39,8 @@
<!-- Radio buttons for single choice. -->
<ion-radio-group *ngIf="!multiQuestion.multi" [(ngModel)]="multiQuestion.singleChoiceModel" [name]="multiQuestion.optionsName">
<ion-item class="ion-text-wrap" *ngFor="let option of multiQuestion.options">
<ion-label>
<ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options">
<ion-label class="flex">
<core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
</core-format-text>

10
src/addons/qtype/multichoice/component/multichoice.scss
View File

@ -1,8 +1,16 @@
:host {
:host ::ng-deep {
.specificfeedback {
background-color: var(--core-question-feedback-color-bg);
color: var(--core-question-feedback-color);
display: inline;
padding: 0 .7em;
}
.flex {
display: flex !important;
}
.answer .answernumber {
min-width: 1.5em;
}
}

5
src/core/components/download-refresh/download-refresh.scss
View File

@ -7,4 +7,9 @@
align-content: center;
min-height: var(--a11y-min-target-size);
min-width: var(--a11y-min-target-size);
position: relative;
> * {
position: absolute;
}
}

489
src/theme/components/format-text.scss
View File

@ -197,3 +197,492 @@ core-format-text {
left: 100%;
}
}
/** Styles to match web platform */
// Those styles are omitted on RTE
core-format-text {
ul {
padding-left: 1rem;
}
ul, ol {
-webkit-padding-start: 15px;
}
.atto_image_button_text-top,
.atto_image_button_middle,
.atto_image_button_text-bottom,
.atto_image_button_left,
.atto_image_button_right {
height: auto;
width: auto;
&.img-responsive {
height: auto;
width: auto;
}
}
// Embed video responsive classes.
// Taken from https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_embed.scss
.embed-responsive {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
&::before {
display: block;
content: "";
}
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
@include position(0, null, 0, 0);
width: 100%;
height: 100%;
border: 0;
}
iframe iframe {
width: 100%;
height: 100%;
}
}
.embed-responsive-21by9 {
&::before {
padding-top: percentage(9 / 21);
}
}
.embed-responsive-16by9 {
&::before {
padding-top: percentage(9 / 16);
}
}
.embed-responsive-4by3 {
&::before {
padding-top: percentage(3 / 4);
}
}
.embed-responsive-1by1 {
&::before {
padding-top: percentage(1 / 1);
}
}
}
core-format-text,
core-rich-text-editor .core-rte-editor {
@include core-headings();
p {
font-size: 1.4rem;
margin-bottom: 1rem;
}
.no-overflow {
overflow: auto;
}
// Fix lists styles in core-format-text.
ol {
list-style-type: decimal;
}
ul, ol {
ol {
list-style-type: lower-latin;
}
ul, ol {
@include margin(null, null, null, 15px);
}
}
.badge {
position: initial !important;
}
.core-disable-media-adapt,
.core-disable-media-adapt .core-media-adapt-width {
max-width: none !important;
max-height: none !important;
width: initial !important;
height: initial !important;
display: inline-block !important;
}
img.icon {
font-size: 16px;
width: 16px;
height: 16px;
margin: 0;
padding: 0;
-webkit-box-sizing: content-box;
box-sizing: content-box;
margin-right: .5rem;
}
// Form controls
// ------------------------
select,
input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
height: 30px;
line-height: 30px;
display: inline-block;
border: 1px solid var(--gray-dark);
background: var(--background-contrast);
padding: 6px 8px;
border-radius: 4px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 10px;
}
input[type=radio],
input[type=checkbox] {
position: relative;
--color: var(--brand-contrast-color);
--color-checked: var(--color);
width: var(--size);
height: var(--size);
border-radius: var(--border-radius);
border-width: var(--outer-border-width);
border-style: var(--border-style);
border-color: var(--color);
appearance: none;
display: inline-block;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
&:checked {
background-color: var(--color-checked);
}
& + label {
line-height: var(--size);
}
}
input[type=radio]::after {
position: absolute;
content: ' ';
width: calc(50% + var(--outer-border-width));
height: calc(50% + var(--outer-border-width));
border-radius: var(--border-radius);
transform: scale3d(0, 0, 0) translate(-50%,-50%);
background: var(--contrast-background);
border: 0 !important;
top: 50%;
left: 50%;
}
input[type=radio]:checked::after {
transform: scale3d(1, 1, 1) translate(-50%,-50%);
}
input[type=checkbox]:checked::after {
position: absolute;
width: 33%;
height: 50%;
content: ' ';
transform: rotate(45deg);
border-width: 0px 2px 2px 0px;
border-style: solid;
border-color: var(--contrast-background);
left: 4px;
top: 2px;
}
// Atto styles
// -------------------------
.atto_image_preview {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.atto_image_preview_box {
max-height: 200px;
margin-bottom: 1em;
overflow: auto;
}
.editor_atto_content img {
cursor: pointer;
}
.atto_image_size {
display: inline-block;
}
.atto_image_size input[type=checkbox] {
@include margin(null, 1em, null, 1em);
}
.atto_image_size input[type=text] {
width: 3em;
}
.atto_image_size label {
display: inline-block;
}
.atto_image_button_text-top,
.atto_image_button_middle,
.atto_image_button_text-bottom,
.atto_image_button_left,
.atto_image_button_right {
vertical-align: middle;
max-width: 100%;
display: inline-block;
margin: 0 0.5em;
&.img-responsive {
/* If the image is display: block then linking the image to URLs won't work. */
/*display: inline-block;*/
max-width: 100%;
}
}
.atto_image_button_text-top {
vertical-align: text-top;
}
.atto_image_button_middle {
vertical-align: middle;
}
.atto_image_button_text-bottom {
vertical-align: text-bottom;
}
.atto_image_button_left {
@include float(start);
@include margin(0, 0.5em, 0, 0);
}
.atto_image_button_right {
@include float(end);
@include margin(0, 0, 0, 0.5em);
}
// Bootstrap 4 Styles
// -------------------------
// _media.scss
.media {
display: flex;
align-items: flex-start;
}
.media-body {
flex: 1;
}
// _alert.scss
.alert {
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 0 solid transparent;
}
// Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: inherit;
}
// Provide class for links that match alerts
.alert-link {
font-weight: 400;
}
@each $color-name, $value in $colors {
$base: map-get($value, base);
.alert-#{$color-name} {
color: $base;
border-color: $base;
background-color: mix($base, white, 20%);
.alert-link {
color: darken($base, 10%);
}
}
.alert-#{$color-name} p {
color: $base;
}
}
// utilities/_align.scss
.align-baseline { vertical-align: baseline !important; } // Browser default
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top { vertical-align: text-top !important; }
// utilities/_border.scss
.border { border: 1px solid $gray-dark !important; }
.border-top { border-top: 1px solid $gray-dark !important; }
.border-right { border-right: 1px solid $gray-dark !important; }
.border-bottom { border-bottom: 1px solid $gray-dark !important; }
.border-left { border-left: 1px solid $gray-dark !important; }
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
@each $color-name, $value in $colors {
$base: map-get($value, base);
.border-#{$color-name} {
border-color: $base !important;
}
}
.border-white {
border-color: var(--white) !important;
}
// utilities/_flex.scss
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }
// utilities/_visibility.scss
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
// utilities/_text.scss
.text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }
.text-justify { text-align: justify !important; }
.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: bolder !important; }
.font-italic { font-style: italic !important; }
.text-white { color: var(--white) !important; }
@each $color-name, $value in $colors {
$base: map-get($value, base);
$contrast: map-get($value, contrast);
.text-#{$color-name} {
color: $base;
}
}
.text-body { color: var(--ion-text-color) !important; }
.text-muted { color: var(--subdued-text-color) !important; }
.text-black-50 { color: rgba($black, .5) !important; }
.text-white-50 { color: rgba($white, .5) !important; }
.text-decoration-none { text-decoration: none !important; }
.text-break {
word-break: break-word !important; // Deprecated, but avoids issues with flex containers
word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
}
.text-reset { color: inherit !important; }
.label {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: var(--white);
background-color: var(--gray-darker);
}
.label-important {
color: var(--ion-color-danger-contrast);
background-color: var(--ion-color-danger);
}
@each $color-name, $value in $colors {
$base: map-get($value, base);
$contrast: map-get($value, contrast);
.label-#{$color-name} {
color: $contrast;
background-color: $base;
}
}
}

76
src/theme/theme.base.scss
View File

@ -144,14 +144,19 @@ ion-app.ios ion-header h2 {
pointer-events: none;
}
// Correctly inherit ion-text-wrap onto labels.
ion-item ion-label core-format-text .core-format-text-content > * {
.item ion-label core-format-text .core-format-text-content > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ion-item.ion-text-wrap ion-label {
.item.ion-text-wrap ion-label core-format-text .core-format-text-content > * {
white-space: normal;
}
.item.ion-text-wrap ion-label {
white-space: normal !important;
}
@ -180,7 +185,6 @@ ion-button.ion-text-wrap {
}
}
@each $color-name, $value in $colors {
$value: map-get($colors, $color-name);
$base: map-get($value, base);
@ -580,19 +584,74 @@ ion-toolbar h1 .core-bar-button-image img {
}
// Radio.
ion-radio {
ion-radio,
input[type=radio] {
--color: var(--brand-contrast-color);
--color-checked: var(--color);
--border-radius: 50%;
--border-width: 2px;
--outer-border-width: 2px;
--border-style: solid;
--inner-border-radius: 50%;
--size: 20px;
}
.ios ion-radio,
.ios input[type=radio] {
--border-width: 1px;
--outer-border-width: 1px;
}
.ios ion-radio {
width: var(--size);
height: var(--size);
&::part(container) {
margin: 0px;
border-radius: var(--border-radius);
border-width: var(--outer-border-width);
border-style: var(--border-style);
border-color: var(--color);
}
&::part(mark) {
border-radius: var(--inner-border-radius);
width: calc(50% + var(--outer-border-width));
height: calc(50% + var(--outer-border-width));
transform: scale3d(0, 0, 0);
transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
background: var(--contrast-background);
border: 0 !important;
}
&.radio-checked {
&::part(container) {
border-color: var(--color-checked);
background: var(--color-checked);
}
&::part(mark) {
transform: scale3d(1, 1, 1);
}
}
}
// Checkbox.
ion-checkbox {
ion-checkbox,
input[type=checkbox] {
--border-radius: 2px;
--border-color-checked: var(--brand-contrast-color);
--background-checked: var(--brand-contrast-color);
--checkmark-color: var(--contrast-background);
--border-width: 2px;
--outer-border-width: 2px;
--border-style: solid;
--size: 20px;
}
.ios input[type=checkbox] {
--outer-border-width: 1px;
}
// Select.
ion-select::part(text) {
@ -687,6 +746,11 @@ core-block ion-item-divider .core-button-spinner {
}
}
details summary {
pointer-events: auto;
cursor: pointer;
}
textarea {
min-height: var(--a11y-min-target-size);
}
@ -751,7 +815,7 @@ ion-item.ion-activatable:not(.only-links) {
ion-anchor, a,
ion-button, button,
audio, video {
audio, video, select, input {
pointer-events: visible;
}
}

3
tsconfig.app.json
View File

@ -35,6 +35,7 @@
],
"exclude": [
"src/**/*.test.ts",
"src/testing/**"
"src/testing/**",
"src/**/tests/**"
]
}