MOBILE-4660 course: Improve module card styles

main
Pau Ferrer Ocaña 2024-10-08 14:36:41 +02:00
parent 8f6c1fd4c2
commit d63c06e328
5 changed files with 19 additions and 5 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -7,7 +7,7 @@
--card-border-width: 0px; --card-border-width: 0px;
--card-radius: 0px; --card-radius: 0px;
--card-background: transparent; --card-background: transparent;
--activity-border: 2px solid var(--stroke); --activity-border: 1px solid var(--stroke);
--card-padding-bottom: var(--vertical-spacing); --card-padding-bottom: var(--vertical-spacing);
ion-card { ion-card {
@ -132,15 +132,16 @@
margin-bottom: var(--vertical-spacing); margin-bottom: var(--vertical-spacing);
} }
.activity-extrabadges,
.core-module-description { .core-module-description {
border-top: 1px solid var(--stroke);
display: block; display: block;
} }
.activity-extrabadges { .activity-extrabadges {
font: var(--mdl-typography-body-font-md); font: var(--mdl-typography-body-font-md);
color: var(--medium); color: var(--medium);
border: 1px solid var(--stroke);
border-radius: var(--mdl-shape-borderRadius-sm);
padding: var(--mdl-spacing-2) var(--mdl-spacing-3) var(--mdl-spacing-2) var(--mdl-spacing-3);
} }
.activity-description-availabilityinfo .core-module-availabilityinfo { .activity-description-availabilityinfo .core-module-availabilityinfo {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 44 KiB

View File

@ -1,15 +1,28 @@
ion-accordion { ion-accordion {
.ion-accordion-toggle-icon[slot="start"] { > [slot="header"] .ion-accordion-toggle-icon[slot="start"] {
@include margin-horizontal(null, var(--mdl-spacing-2)); @include margin-horizontal(null, var(--mdl-spacing-2));
background-color: var(--gray-100); background-color: var(--gray-100);
border-radius: 50%; border-radius: 50%;
padding: var(--mdl-spacing-1); padding: var(--mdl-spacing-1);
} }
/**
* Change arrow direction to match LMS: expanded is down, collapsed is right.
*/
&.accordion-expanding > [slot="header"] .ion-accordion-toggle-icon,
&.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
transform: none;
}
&.accordion-collapsing > [slot="header"] .ion-accordion-toggle-icon,
&.accordion-collapsed > [slot="header"] .ion-accordion-toggle-icon {
transform: rotate(-90deg);
}
} }
:root.dark { :root.dark {
ion-accordion { ion-accordion {
.ion-accordion-toggle-icon[slot="start"] { > [slot="header"] .ion-accordion-toggle-icon[slot="start"] {
background-color: var(--gray-800); background-color: var(--gray-800);
} }
} }