Modifications Client
Passage à Ionic 8
Pour le passage à Ionic 8 de nouvelles dépendances ont été installées. Pensez donc à mettre à jour vos paquets :
...
| Bloc de code |
|---|
| language | css |
|---|
| title | dev/user-frontend-ionic/src/theme/app-theme/styles/calendar/calendar.component.scss |
|---|
| linenumbers | true |
|---|
|
ndar.calendar-list-style {
display: block;
.ion-padding {
padding-top: 5px !important;
}
.events-container {
padding: 0;
}
.event {
align-items: center;
padding: 0.5rem 0;
}
hr {
border-top: 2px dashed var(--ion-color-primary-contrast);
margin: 0;
}
.event-part ion-text {
display: block
}
.event-part-date {
flex-grow: 1;
text-align: center;
border-right: 5px solid var(--ion-color-primary-contrast);
margin-right: 5px;
}
.event-part-info {
flex-grow: 3;
}
.light-font-color{
color: var(--app-font-color-for-dark-background-from-cms) !important;
hr {
border-top: 2px dashed var(--app-font-color-for-dark-background-from-cms);
margin: 0;
}
.event-part-date {
border-right: 5px solid var(--app-font-color-for-dark-background-from-cms);
}
}
.dark-font-color{
color: var(--app-font-color-for-light-background-from-cms) !important;
hr {
border-top: 2px dashed var(--app-font-color-for-light-background-from-cms);
}
.event-part-date {
border-right: 5px solid var(--app-font-color-for-light-background-from-cms);
}
}
}
.calendar-slider-style {
display: block;
ion-card {
scroll-snap-align: center;
}
ion-card.slider-theme-color {
box-shadow: var(--app-border-no-box-shadow);
//border: var(--app-border-width-7) solid var(--app-border-color-primary);
background-color: var(--ion-color-tertiary);
}
ion-card-content {
padding: 0.7rem 0;
height: 100%;
display: flex;
flex-direction: column;
}
.events-container {
padding: .5rem 0 0;
display: grid;
gap: 1rem;
grid-auto-flow: column;
grid-template-columns: 10px;
grid-auto-columns: 85%;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
&::-webkit-scrollbar {
display: none;
}
&::before,
&::after {
content: '';
width: 10px;
}
.event-day-hour {
display: flex;
flex-direction: row;
border-left-width: 4px;
border-left-style: solid;
align-items: center;
flex-wrap: nowrap;
border-color: var(--ion-color-secondary);
.hour {
padding-left: 1rem;
display: block;
}
.day {
padding-left: 1rem;
display: block;
ion-text {
display: block;
}
}
}
}
.card-labels {
margin-right: 0.6rem;
}
.card-labels-icons {
margin-right: 0.3rem;
}
.event-label {
padding: 1rem 1rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.event-additional {
display: flex;
padding: 0.7rem 0.5rem 0;
justify-content: space-evenly;
flex-wrap: wrap;
flex-grow: 2;
align-items: center;
ion-row:last-child {
margin-right: 0;
}
}
.slider-font-color{
color: var(--app-font-fix-light-color) !important;
}
.light-font-color{
color: var(--app-font-color-for-dark-background-from-cms) !important;
}
.dark-font-color{
color: var(--app-font-color-for-light-background-from-cms) !important;
}
} |
...