bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css timeline

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-11-12 15:23:22 +01:00
parent 8c9c666444
commit ff34737ccb
7 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -938,6 +938,11 @@ footer {
.slick-prev {
left: 45%;
}
@media (min-width: 1480px) {
.slick-prev {
left: 47%;
}
}
@media (max-width: 1080px) {
.slick-prev {
left: 45%;
@@ -945,7 +950,12 @@ footer {
}
@media (max-width: 510px) {
.slick-prev {
right: 39%;
left: 39%;
}
}
@media (max-width: 310px) {
.slick-prev {
left: 54%;
}
}
[dir=rtl] .slick-prev {
@@ -985,6 +995,11 @@ footer {
right: 45%;
}
}
@media (max-width: 390px) {
.slick-next {
right: 42%;
}
}
[dir=rtl] .slick-next {
left: -25px;
right: auto;
@@ -1188,10 +1203,11 @@ footer {
margin: auto;
padding-top: 4rem;
font-size: 1.7rem;
padding-left: 0.5rem;
}
#home .__container-deroulement .config_pages--type--deroulement {
height: 550px;
margin-top: 4.5rem;
margin-top: 3.5rem;
}
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase {
height: 100%;
@@ -1219,11 +1235,12 @@ footer {
align-items: center;
padding-right: 1rem;
}
@media (max-width: 500px) {
@media (max-width: 1100px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement {
flex-direction: column;
align-items: baseline;
padding-bottom: 1rem;
padding-left: 4rem;
}
}
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
@@ -1233,6 +1250,11 @@ footer {
line-height: 0; /* Assure que la hauteur est minimale */
transform: translateX(1rem);
}
@media (max-width: 1100px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
transform: translateY(18.6rem);
}
}
@media (max-width: 500px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
align-self: center;
@@ -1243,6 +1265,11 @@ footer {
padding-right: 3rem;
}
}
@media (max-width: 810px) {
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .border-symbol {
transform: translateY(21.2rem);
}
}
#home .__container-deroulement .config_pages--type--deroulement .field_field_phase .timeline .__timeline-content .slick-track .paragraph--type--phase-deroulement .date {
width: fit-content !important;
display: flex;
@@ -1365,11 +1392,12 @@ footer {
}
#actus-caroussel h2 {
width: fit-content;
padding-bottom: 1.5rem;
padding-bottom: 0.5rem;
margin-top: 4rem;
margin-bottom: 3rem;
font-size: 1.7rem;
font-family: "gilroy-semibold";
padding-left: 0.5rem;
}
#actus-caroussel .content-actus .view {
display: flex;

4
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@@ -5,11 +5,13 @@
padding-bottom: 6rem;
h2{
width: fit-content;
padding-bottom: 1.5rem;
padding-bottom: 0.5rem;
margin-top: 4rem;
margin-bottom: 3rem;
font-size: 1.7rem;
font-family: 'gilroy-semibold';
padding-left: 0.5rem;
}
.content-actus{
.view{

12
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@@ -114,11 +114,17 @@ $slick-opacity-not-active: 0.25 !default;
.slick-prev {
left: 45%;
@media(min-width:1480px){
left: 47%;
}
@media(max-width:1080px){
left: 45%;
}
@media(max-width:510px){
right: 39%;
left: 39%;
}
@media(max-width:310px){
left: 54%;
}
[dir="rtl"] & {
left: auto;
@@ -137,6 +143,7 @@ $slick-opacity-not-active: 0.25 !default;
left: 45%;
transform: scale(0.8);
}
}
}
@@ -150,6 +157,9 @@ $slick-opacity-not-active: 0.25 !default;
@media(max-width:510px){
right: 45%;
}
@media(max-width:390px){
right: 42%;
}
[dir="rtl"] & {
left: -25px;
right: auto;

14
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@@ -19,11 +19,12 @@
margin: auto;
padding-top: 4rem;
font-size: 1.7rem;
padding-left: 0.5rem;
}
.config_pages--type--deroulement{
height: 550px;
margin-top: 4.5rem;
margin-top: 3.5rem;
.field_field_phase{
height: 100%;
.timeline{
@@ -51,10 +52,11 @@
align-items: center;
padding-right: 1rem;
// padding-bottom: 1rem;
@media(max-width:500px){
@media(max-width:1100px){
flex-direction: column;
align-items: baseline;
padding-bottom: 1rem;
padding-left: 4rem;
}
.border-symbol{
align-self: end;
@@ -62,6 +64,10 @@
display: inline-block; /* Permet d'utiliser height */
line-height: 0; /* Assure que la hauteur est minimale */
transform: translateX(1rem);
@media(max-width:1100px){
transform: translateY(18.6rem);
}
@media(max-width:500px){
align-self: center;
font-size: 2.5rem;
@@ -70,6 +76,10 @@
transform: translateY(22.5rem);
padding-right: 3rem;
}
@media(max-width:810px){
transform: translateY(21.2rem);
}
}
// border-bottom: solid black 1px;
// &:before{