2023-09-14 13:24:32 +02:00

66 lines
1.3 KiB
SCSS

@import "~theme/globals";
:host {
--core-image-radius: var(--core-courseimage-radius);
--core-image-size: 60px;
display: flex;
justify-content: center;
align-items: center;
background: var(--course-color, white);
border-radius: var(--core-image-radius);
@for $i from 0 to length($core-course-image-background) {
&.course-color-#{$i} {
--course-color: var(--core-course-color-#{$i});
--course-color-tint: var(--core-course-color-#{$i}-tint);
}
}
ion-icon {
--padding: 12px;
padding: var(--padding);
font-size: calc(var(--core-image-size) - var(--padding) * 2);
color: var(--course-color-tint);
}
ion-avatar {
--border-radius: var(--core-image-radius);
width: var(--core-image-size);
height: var(--core-image-size);
img {
background: transparent;
}
}
img[src$=".svg"] {
min-width: 100%;
}
&.fill-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
--core-image-radius: 0px;
--core-image-size: 100%;
ion-icon {
opacity: 0.5;
width: 80px;
height: 80px;
}
}
}
:host-context(ion-item) {
@include margin(6px, 8px, 6px, 0px);
}