MOBILE-3833 storage: Fix hover style state
parent
87c8177d26
commit
5c3fe58ed7
|
@ -47,8 +47,8 @@
|
|||
<ng-container *ngFor="let section of sections">
|
||||
<ion-card class="section" *ngIf="section.modules.length > 0">
|
||||
<ion-card-header>
|
||||
<ion-item class="ion-no-padding" [lines]="section.expanded ? 'full' : 'none'" button detail="false"
|
||||
(click)="toggleExpand($event, section)" [class.core-course-storage-section-expanded]="section.expanded"
|
||||
<ion-item [lines]="section.expanded ? 'full' : 'none'" button detail="false" (click)="toggleExpand($event, section)"
|
||||
[class.core-course-storage-section-expanded]="section.expanded"
|
||||
[attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
|
||||
[attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-storage-section-' + section.id">
|
||||
<ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
|
||||
|
@ -99,10 +99,10 @@
|
|||
</div>
|
||||
</ion-item>
|
||||
</ion-card-header>
|
||||
<ion-card-content id="core-course-storage-section-{{section.id}}" [ngClass]="{'hidden-content': !section.expanded}">
|
||||
<ion-card-content id="core-course-storage-section-{{section.id}}">
|
||||
<ng-container *ngIf="section.expanded">
|
||||
<ng-container *ngFor="let module of section.modules">
|
||||
<ion-item class="ion-no-padding core-course-storage-activity"
|
||||
<ion-item class="core-course-storage-activity"
|
||||
*ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
|
||||
<core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
|
||||
[modname]="module.modname" [componentId]="module.instance">
|
||||
|
|
|
@ -3,36 +3,41 @@
|
|||
:host {
|
||||
--course-storage-max-activity-height: 120px;
|
||||
|
||||
ion-card ion-item {
|
||||
ion-card ion-item.size {
|
||||
--inner-padding-end: 0px;
|
||||
}
|
||||
|
||||
ion-card.section ion-card-header {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
ion-card.section .item-heading {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
ion-card.section {
|
||||
ion-card-header {
|
||||
padding: 0;
|
||||
}
|
||||
ion-card-content {
|
||||
padding: 0;
|
||||
|
||||
ion-card-content.hidden-content {
|
||||
padding: 0;
|
||||
}
|
||||
.core-course-storage-activity ion-label {
|
||||
h3 {
|
||||
position: relative;
|
||||
max-height: var(--course-storage-max-activity-height);
|
||||
overflow: hidden;
|
||||
::ng-deep * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.core-course-storage-activity ion-label h3 {
|
||||
position: relative;
|
||||
max-height: var(--course-storage-max-activity-height);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
min-height: var(--course-storage-max-activity-height);
|
||||
position: absolute;
|
||||
@include position(0, 0, null, 0);
|
||||
background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
|
||||
z-index: 6;
|
||||
pointer-events: none;
|
||||
&:before {
|
||||
content: '';
|
||||
height: var(--course-storage-max-activity-height);
|
||||
position: absolute;
|
||||
@include position(0, 0, null, 0);
|
||||
background: linear-gradient(to bottom, rgba(var(--background-gradient-rgb), 0) calc(100% - 30px), rgba(var(--background-gradient-rgb), 1) calc(100% - 20px));
|
||||
z-index: 6;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-heading {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue