Pau Ferrer Ocaña
GitHub
commit
44a06644c8
|
|
@ -86,7 +86,7 @@
|
|||
<ion-item *ngFor="let discussion of discussions.items"
|
||||
class="addon-mod-forum-discussion" detail="true"
|
||||
[lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions.getItemAriaCurrent(discussion)"
|
||||
(click)="discussions.select(discussion)">
|
||||
(click)="discussions.select(discussion)" button>
|
||||
<ion-label>
|
||||
<div class="addon-mod-forum-discussion-title">
|
||||
<h2 class="ion-text-wrap">
|
||||
|
|
|
|||
|
|
@ -19,18 +19,18 @@
|
|||
--padding-end: 10px;
|
||||
--padding-bottom: 10px;
|
||||
--padding-start: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.md) {
|
||||
&.md {
|
||||
--background-activated-opacity: 0;
|
||||
--background-focused-opacity: .12;
|
||||
}
|
||||
|
||||
:host-context(.ios) {
|
||||
&.ios {
|
||||
--background-activated-opacity: .12;
|
||||
--background-focused-opacity: .15;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-select,
|
||||
ion-button {
|
||||
|
|
@ -42,6 +42,11 @@ ion-button {
|
|||
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);
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
@include core-focus-style();
|
||||
}
|
||||
}
|
||||
|
||||
ion-select {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
[hidden]="!hideUntil"
|
||||
[id]="tab.id! + '-tab'"
|
||||
class="tab-slide"
|
||||
tabindex="-1"
|
||||
[class.selected]="selected == tab.id">
|
||||
<ion-tab-button
|
||||
(ionTabButtonClick)="selectTab(tab.id, $event)"
|
||||
|
|
|
|||
|
|
@ -256,14 +256,17 @@ export class CoreFormatTextDirective implements OnChanges {
|
|||
*/
|
||||
protected displayShowMore(): void {
|
||||
const expandInFullview = CoreUtils.isTrueOrOne(this.fullOnClick) || false;
|
||||
const showMoreDiv = document.createElement('div');
|
||||
const showMoreButton = document.createElement('ion-button');
|
||||
|
||||
showMoreDiv.classList.add('core-show-more');
|
||||
showMoreDiv.innerHTML = Translate.instant('core.showmore');
|
||||
this.element.appendChild(showMoreDiv);
|
||||
showMoreButton.classList.add('core-show-more');
|
||||
showMoreButton.setAttribute('fill', 'clear');
|
||||
showMoreButton.innerHTML = Translate.instant('core.showmore');
|
||||
this.element.appendChild(showMoreButton);
|
||||
|
||||
if (expandInFullview) {
|
||||
this.element.classList.add('core-expand-in-fullview');
|
||||
} else {
|
||||
showMoreButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
this.element.classList.add('core-text-formatted');
|
||||
this.element.classList.add('core-shortened');
|
||||
|
|
@ -624,11 +627,8 @@ export class CoreFormatTextDirective implements OnChanges {
|
|||
* "Hide" the "Show more" in the element if it's shown.
|
||||
*/
|
||||
protected hideShowMore(): void {
|
||||
const showMoreDiv = this.element.querySelector('div.core-show-more');
|
||||
|
||||
if (showMoreDiv) {
|
||||
showMoreDiv.remove();
|
||||
}
|
||||
const showMoreButton = this.element.querySelector('ion-button.core-show-more');
|
||||
showMoreButton?.remove();
|
||||
|
||||
this.element.classList.remove('core-expand-in-fullview');
|
||||
this.element.classList.remove('core-text-formatted');
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ core-format-text {
|
|||
min-height: 50px;
|
||||
|
||||
.core-show-more {
|
||||
text-transform: none;
|
||||
text-align: end;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
|
|
@ -45,7 +46,7 @@ core-format-text {
|
|||
@include position(null, 0, 0, null);
|
||||
z-index: 7;
|
||||
background-color: var(--background);
|
||||
color: var(--color);
|
||||
color: var(--text-color);
|
||||
padding-left: 10px; // RTL
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +69,7 @@ core-format-text {
|
|||
&.core-expand-in-fullview {
|
||||
.core-show-more {
|
||||
@include push-arrow-color(626262, true);
|
||||
@include padding-horizontal(null, 18px);
|
||||
@include padding-horizontal(null, 5px);
|
||||
@include background-position(end, 0, center);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,25 @@
|
|||
* Place here our custom mixins.
|
||||
*/
|
||||
|
||||
@mixin core-focus() {
|
||||
outline: none;
|
||||
position: relative;
|
||||
&::after {
|
||||
@include position(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
content: "";
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
@include core-focus-style();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin core-focus-style() {
|
||||
box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
|
||||
// Thicker option:
|
||||
// border: var(--a11y-focus-width) solid var(--a11y-focus-color);
|
||||
}
|
||||
|
||||
@mixin core-transition($where: all, $time: 500ms) {
|
||||
-webkit-transition: $where $time ease-in-out;
|
||||
-moz-transition: $where $time ease-in-out;
|
||||
|
|
|
|||
|
|
@ -514,3 +514,49 @@ img.core-media-adapt-width {
|
|||
audio.core-media-adapt-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Focus highlight for accessibility.
|
||||
ion-item.item-input.ion-focused:not(:focus),
|
||||
.ion-focused,
|
||||
ion-item.ion-activatable.ion-focused:not(:focus),
|
||||
ion-input.has-focus,
|
||||
.ion-focused ion-toggle:focus-within,
|
||||
.ion-focused ion-select:focus-within,
|
||||
.ion-focused ion-checkbox:focus-within,
|
||||
.ion-focused ion-radio:focus-within {
|
||||
@include core-focus();
|
||||
}
|
||||
|
||||
// Treat cases where there's a focusable element inside an item, like a button.
|
||||
ion-item.ion-focused:not(:focus),
|
||||
ion-item.item-input ion-input.has-focus {
|
||||
position: relative;
|
||||
&::after {
|
||||
box-shadow: revert;
|
||||
opacity: revert;
|
||||
z-index: revert;
|
||||
}
|
||||
.item-highlight, .item-inner-highlight {
|
||||
position: unset;
|
||||
}
|
||||
}
|
||||
|
||||
// Change default outline.
|
||||
:focus-visible {
|
||||
@include core-focus-style();
|
||||
outline: none;
|
||||
}
|
||||
|
||||
textarea, button, select, input, a {
|
||||
&:focus {
|
||||
@include core-focus-style();
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
ion-input .native-input{
|
||||
&:focus, &:focus-visible {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,6 +64,8 @@
|
|||
|
||||
// Accessibility vars.
|
||||
--a11y-min-target-size: 44px;
|
||||
--a11y-focus-color: var(--primary);
|
||||
--a11y-focus-width: 2px;
|
||||
|
||||
--module-icon-size: 24px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue