97 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			97 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
.slick-container {
 | 
						|
    @include beige_gradient();
 | 
						|
    width: 100vw;
 | 
						|
    border-bottom: solid 2px $teal;
 | 
						|
    div.views-row article {
 | 
						|
        width: 100%;
 | 
						|
        > div:first-of-type { // container du lien image
 | 
						|
            width: 100%;
 | 
						|
            height: 30vh !important;
 | 
						|
            overflow-y: hidden;
 | 
						|
            padding: 0 !important;
 | 
						|
            display: flex;
 | 
						|
            align-items: center;
 | 
						|
            > div {
 | 
						|
                width: 100%;
 | 
						|
                > a {
 | 
						|
                    max-width: 100%;
 | 
						|
                    img {
 | 
						|
                        width: 100%;
 | 
						|
                        height: auto;
 | 
						|
                    }
 | 
						|
                }
 | 
						|
            }
 | 
						|
            @media (min-width: $breakpoint_desktop) {
 | 
						|
                height: 50vh !important;
 | 
						|
            }
 | 
						|
        }
 | 
						|
        @media (min-width: $breakpoint_tablet) {
 | 
						|
            .preview_meta {
 | 
						|
                margin-left: 0;
 | 
						|
                margin-right: 0;
 | 
						|
            }
 | 
						|
            h2, .preview_sous_titre {
 | 
						|
                padding-left: 0;
 | 
						|
                padding-right: 0;
 | 
						|
            }            
 | 
						|
        }
 | 
						|
     }
 | 
						|
    .slick-arrow {
 | 
						|
        display: none !important;
 | 
						|
        width: 2rem;
 | 
						|
        height: 2rem;
 | 
						|
        border-radius: 1.5rem;
 | 
						|
        border: solid 1px $teal;
 | 
						|
        top: unset;
 | 
						|
        bottom: 5%;
 | 
						|
        background-color: rgba(255, 255, 255, 0.4) !important;
 | 
						|
        transition: background-color 0.3s ease;
 | 
						|
        @media (min-width: $breakpoint_desktop) {
 | 
						|
            transform: translateY(-5rem);
 | 
						|
        }
 | 
						|
    }
 | 
						|
    .slick-arrow:hover {
 | 
						|
        background-color: rgba(255, 255, 255, 0.8) !important;
 | 
						|
    }
 | 
						|
    .slick-arrow::before {
 | 
						|
        color: $teal;
 | 
						|
        font-family: 'Marianne', sans-serif;
 | 
						|
        display: block;
 | 
						|
        padding-bottom: 3px;
 | 
						|
    }
 | 
						|
    #carousel_dots {
 | 
						|
        position: relative;
 | 
						|
        margin-top: -15px;
 | 
						|
        ul {
 | 
						|
            position: relative;
 | 
						|
            bottom: 0;
 | 
						|
            li.slick-active button::before{
 | 
						|
                color: $fluo_green;
 | 
						|
            }
 | 
						|
            li button::before{
 | 
						|
                color: rgba(0.9, 0.9, 0.9, 1);
 | 
						|
            }
 | 
						|
        }
 | 
						|
        @media (min-width: $breakpoint_desktop) {
 | 
						|
            margin-top: 4vh;
 | 
						|
        }
 | 
						|
    }
 | 
						|
    footer {
 | 
						|
        @include fluo_button();
 | 
						|
        text-align: center;
 | 
						|
        margin-top: 4rem;
 | 
						|
        margin-bottom: 4rem;
 | 
						|
    }
 | 
						|
        @media (min-width: $breakpoint_tablet) {
 | 
						|
            padding: 0 12.5vw;
 | 
						|
            .slick-prev, .slick-next {
 | 
						|
                display: block !important;
 | 
						|
            }
 | 
						|
            .slick-prev {
 | 
						|
                left: -5rem;
 | 
						|
            }
 | 
						|
            .slick-next {
 | 
						|
                right: -5rem;
 | 
						|
            }
 | 
						|
        }
 | 
						|
} |