| Sommaire | ||||
|---|---|---|---|---|
|
Modifications Client
Passage à Ionic 8
Pour le passage à Ionic 8 de nouvelles dépendances ont été installées. Pensez donc à mettre à jour vos paquets :
...
Dans le fichier widget-external-feature.component.scss, ajoutez le bloc suivant au sein du bloc .feature-title :
| Bloc de code | ||||||
|---|---|---|---|---|---|---|
| ||||||
app-custom-icon {
vertical-align: text-top;
} |
...
| Bloc de code | ||||||
|---|---|---|---|---|---|---|
| ||||||
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; } } |
...
| Bloc de code | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
ion-input {
--highlight-color: var(--app-font-color-primary);
} |
dev/user-frontend-ionic/src/theme/app-theme-dist/styles/static-pages/static-pages-widget.component.scss
Un nouveau bloc app-custom-icon a été ajouté
...