popsu-d9/web/themes/custom/popsu/sass/pages/_ressources.scss

.path-centre-de-ressources{
	//tmp 
	.slick-slider{
		display: none;
	}
	//colo programme 
	
	.programme-1{
		color: $col-1;
		.views-field-field-programme{
			.field-content{
			background: $col-1;
			color:white;
			}
		}
		
	}
	.programme-2{
		color: $col-2;
		.views-field-field-programme{
			.field-content{
			background: $col-2;
			color:white;
			}
		}
	}
	.programme-3{
		color: $col-eur;
		.views-field-field-programme{
			.field-content{
			background: $col-eur;
			color:white;
			}
		}
	}
	.programme-4{
		color: $col-1;
		.views-field-field-programme{
			.field-content{
			background: $col-1;
			color:white;
			}
		}
	}
	.programme-5{
		color: $col-mond;
		.views-field-field-programme{
			.field-content{
				background: $col-mond;
				color:white;
			}
			
		}
	}
	.programme-6{
		color: $col-ter;
		.views-field-field-programme{
			.field-content{
				background: $col-ter;
				color:white;
			}
		}
	}
	.programme-7{
		color: $col-met;
		.views-field-field-programme{
			.field-content{
				background: $col-met;
				color:white;
			}
		}
	}
	/// end colo 

	main{
		flex: 0 0 100%;
		max-width: 100%;
	}
	background-color: $bck-col;
	header{
		margin-bottom: 0;
		.slick-slide{
			margin: 0 1rem;

			
			.views-row:not(.type-74){
				display: grid !important;
				grid-template-columns: 1fr;
				background-color: rgb(255, 255, 255);
				// flex-direction: column;
				// flex-direction: column-reverse;
				position: relative;
				height: auto;
				.views-field:not(:first-child){
					padding: 0 0 0 .4rem;
				}
				.views-field-field-image{
					grid-row: 3 / span 2;
					margin-top: -1.5rem;
					img{
						width: 100%;
					}				
				}
	
				
				.views-field-field-programme{
					grid-row: 1 / span 1;
					grid-column: 1 / span 2;
					.field-content{
						font-weight: 600;
						display: inline-block;
						width: auto;
						color: white;
						padding: .15rem .3rem;
						margin-bottom: 1rem;
					}
					
				}
				.views-field-field-theme{
					.field-content{
						color:black;
					}
				}
				
				.views-field-field-type-de-ressource{
					text-transform: uppercase;
					font-weight: 600;
					margin-bottom: .5rem;
					font-size: $font-small;
	
					grid-row: 2 / span 1;
					grid-column: 2 / span 1;
				}
				.views-field-title{
					font-style: italic;
					grid-row: 3 / span 1;
					grid-column: 2 / span 1;
					
				}
				.views-field-field-sous-titre{
					margin-bottom: 1rem;
					grid-row: 4 / span 1;
					grid-column: 2 / span 1;
					align-self: baseline;
				}
				.views-field-field-theme{
					grid-row: 5 / span 1;
					grid-column: 1 / span 2;
					font-size: $font-small;
				}
				a{
					text-decoration: none;
				}
			}
			.type-74{
				display: grid !important;
				grid-template-columns: 1fr;
				grid-auto-rows: min-content;
				a{
					text-decoration: none;	
					&:hover{
						text-decoration: underline;
					}
				}
				background-color: rgb(255, 255, 255);
				// background-clip: content-box;
				width: 100% !important;
				padding: .3rem;
				.views-field:not(:first-child){
					padding: 0 0 0 .4rem;
				}
				.views-field-field-image{
					grid-row: 2;
					img{
						width: 80%;
					}
					// margin-top: -1.5rem;				
				}
	
				
				.views-field-field-programme{
					grid-row: 1 / span 1;
					// grid-column: 1 / span 2;
					.field-content{
						font-weight: 600;
						display: inline-block;
						width: auto;
						color: white;
						padding: .15rem .3rem;
						margin-bottom: 1rem;
					}
					
				}
				.views-field-field-theme{
					.field-content{
						color:black;
					}
				}
				.views-field-field-type-de-ressource{
					text-transform: uppercase;
					font-weight: 600;
					margin-bottom: .5rem;
					font-size: $font-small;
	
					// grid-row: 2 / span 1;
					// grid-column: 2 / span 1;
				}
				.views-field-title{
					font-style: italic;
					// grid-row: 3 / span 1;
					// grid-column: 2 / span 1;
					
				}
				
				.views-field-field-sous-titre{
					margin-bottom: 1rem;
					// grid-row: 4 / span 1;
					// grid-column: 2 / span 1;
					align-self: baseline;
				}
				.views-field-field-theme{
					// grid-row: 5 / span 1;
					// grid-column: 1 / span 2;
					font-size: $font-small;
					text-align: right;
				}
			}
		}
		.slick-arrow{
			position: absolute;
			height: 100%;
			cursor: pointer;
			z-index: 100;
			// background-color: white;
			opacity: 0.2;
			transition: opacity 250ms;
			width: 10%;
			&:hover{
				opacity: .5;
			}
		}
		.slick-next{
			right: 0;
			top: 0;
		}
		
		
	}
	.content_container{
		&>div>h2:first-child{
			text-align: center;
			background: $trame;
			padding: 1rem 0;
		}
	}
	
	form{
		background: $trame;
		display: grid;
		padding: 5rem 0 1rem 0;
		//margin-top: -3rem;
		column-gap: 1rem;
		grid-template-columns: calc(10% - 3em) repeat(4, 20%);
		&>div:first-child{
			grid-column-start: 2;
		}
		.form-item-combine{
			grid-row: 1 / span 1 ;
			grid-column-start: 2;
		}
		.form-item-programme{
			
			grid-column-start: 2;
		}
		.form-item-field-collections-target-id{
			grid-column-start: 2;
		}
		.form-item-items-per-page{
			grid-column-start: 3;
		}
		select, input{
			display: inline-block;
			width: auto;
			width: 100%;
			font-size: $font-normal;
			padding: .3rem 1rem;
			height: auto;
		}
		div{
			display: inline-block;
			width: auto;
			// padding: .5rem 1rem;
		}
		.form-actions{
			grid-column: 4 / span 2;
			display: grid;
			grid-template-columns: repeat(2,  minmax(0,1fr) );
			align-items: center;
			column-gap: 1rem;
			input{
				background-color: transparent;
				border: solid 1px black;
				box-shadow: none;
				// &:first-child{
				// 	// margin-right: .5rem;
				// }
				// &:last-child{
				// 	// margin-left: .5rem;
				// }
			}
		}
	}
	.views-view-grid{
		margin-top: 3rem;
		.views-row{
			display: grid;
			column-gap: 1rem;
			row-gap: 1rem;
			grid-template-columns:  calc(10% - 3em) repeat(3, 27.3%);
			align-items: flex-start;
			.views-col:first-child{
				grid-column-start: 2;
			}
		}
		.views-col:not(.type-74){
			display: grid;
			grid-template-columns: 40%  60%;
			grid-auto-rows: min-content;
			
			a{
				text-decoration: none;	
				&:hover{
					text-decoration: underline;
				}
			}
			background-color: rgb(255, 255, 255);
			// background-clip: content-box;
			width: 100% !important;
			padding: .3rem;

			// .views-field:empty {
			// 	background: lime;
			// }

			.views-field:not(:first-child){
				padding: 0 0 0 .4rem;
			}
			.views-field-field-image{
				grid-row: 4 / span 2;
				margin-top: -1.5rem;				
			}
			.views-field-field-edition{
				grid-column: 2;
				grid-row: 6;
			}
			.views-field-field-auteurs{
				font-weight: 600;
				grid-column: 2;
				grid-row: 3;
			}
			
			.views-field-field-programme{
				grid-row: 1 / span 1;
				grid-column: 1 / span 2;
				.field-content{
					font-weight: 600;
					display: inline-block;
					width: auto;
					color: white;
					padding: .15rem .3rem;
					margin-bottom: 1rem;
				}
				
			}
			
			.views-field-field-type-de-ressource{
				text-transform: uppercase;
				font-weight: 600;
				margin-bottom: .5rem;
				font-size: $font-small;

				grid-row: 2 / span 1;
				grid-column: 2 / span 1;
			}
			.views-field-title{
				font-style: italic;
				grid-row: 4 / span 1;
				grid-column: 2 / span 1;
				
			}
			.views-field-field-sous-titre{
				margin-bottom: 1rem;
				grid-row: 5 / span 1;
				grid-column: 2 / span 1;
				align-self: baseline;
			}
			.views-field-field-theme{
				grid-row: 7 / span 1;
				grid-column: 1 / span 2;
				font-size: $font-small;
				.field-content{
					color:black;
				}

			}
		}
		.type-74{
			display: grid;
			grid-template-columns: 1fr;
			grid-auto-rows: min-content;
			a{
				text-decoration: none;	
				&:hover{
					text-decoration: underline;
				}
			}
			background-color: rgb(255, 255, 255);
			// background-clip: content-box;
			width: 100% !important;
			padding: .3rem;
			.views-field:not(:first-child){
				padding: 0 0 0 .4rem;
			}
			.views-field-field-image{
				grid-row: 2;

				// margin-top: -1.5rem;				
			}

			
			.views-field-field-programme{
				margin-top: -.7rem;
				grid-row: 1 / span 1;
				// grid-column: 1 / span 2;
				.field-content{
					font-weight: 600;
					display: inline-block;
					width: auto;
					color: white;
					padding: .15rem .3rem;
					margin-bottom: 1rem;
				}
				
			}
			.views-field-field-theme{
				.field-content{
					color:black;
				}
			}
			.views-field-field-type-de-ressource{
				text-transform: uppercase;
				font-weight: 600;
				margin-bottom: .5rem;
				font-size: $font-small;
				margin-top: .3rem;
				// grid-row: 2 / span 1;
				// grid-column: 2 / span 1;
			}
			.views-field-title{
				font-style: italic;
				// grid-row: 3 / span 1;
				// grid-column: 2 / span 1;
				
			}
			.views-field-field-sous-titre{
				margin-bottom: 1rem;
				// grid-row: 4 / span 1;
				// grid-column: 2 / span 1;
				align-self: baseline;
			}
			.views-field-field-theme{
				// grid-row: 5 / span 1;
				// grid-column: 1 / span 2;
				font-size: $font-small;
				text-align: right;
			}
		}

		

	}
	nav{
		display: grid;
		align-items: center;
		justify-items: center;
	}
	
	.js-pager__items{
		text-align: center;
		
		li{
			display: inline-block;
			float: left;
			margin: 0 .2rem;
		}
	}
}


///////// ressource single 

.page-node-type-ressource{
	&.programme-1{
		h2{ 
			color: $col-1 !important;
		}
		.field_programme div{
			background: $col-1 ;
		}
	}
	&.programme-2{
		h2{
			color: $col-2 !important;
		}
		.field_programme div{
			background: $col-2 ;
		}
	}
	&.programme-3{

		h2{
			color: $col-eur !important;
		}
		.field_programme div{
			background: $col-eur ;
			
		}
	}
	&.programme-4{
		h2{ 
			color: $col-1;
		}
		.field_programme div{
			background:$col-1 ;
			
		}
	}
	
	&.programme-5{
		
		h2{
			color: $col-mond !important;
		}
		.field_programme div{
			background: $col-mond ;
		}
	}
	&.programme-6{

		h2{
			color: $col-ter !important;
		}
		.field_programme div{
				background: $col-ter ;
		}

	}
	&.programme-7{
		h2{
			color: $col-met !important;
		}
		.field_programme div{
				background: $col-met ;                
		}
	}

	

	.block-region-second{
		display: grid;
		padding-bottom: 3rem;
		.field_programme div{
			display: inline-block;
			// background: gray;
			margin-bottom: 1rem;
			color: white;
			font-weight: 600;
			padding: .3rem .5rem;
			a{
				text-decoration: none;
			}
		}

        ///
        #node\:title{
            margin: 0;
            font-size: $font-large;
            line-height: 1.3;
            font-weight: 600;
            margin-bottom: 1rem;
			grid-column: 1 / span 2;
        }
		#node\:field_image{
			grid-row: 2;
			grid-column: 1 / span 2;
		}
		#node\:field_auteurs{
			
		}
		#node\:field_type_de_ressource{
			grid-row: 1;
			grid-column: 2;
		}
		#node\:field_programme{
			grid-row: 1;
			grid-column: 1;
		}
		#node\:field_date_de_parution{
			grid-row: 3;
			grid-column: 1 / span 2;
		}
    //    .body{
    //         font-size: $font-medium;
    //         height: 15rem;
    //         overflow: hidden;
    //         position: relative;
    //         -webkit-transition: all 250ms ease;
    //         -moz-transition: all 250ms ease;
    //         -o-transition: all 250ms ease;
    //         transition: all 250ms ease;
    //         footer{
    //             position:absolute;
    //             bottom:0;
    //             left:0;
    //             z-index: 1;
    
    //             width: 100%;
    //             text-align: center;
    
                
    //             a{
    //                 display: inline-block;
    //                 margin: 0 auto;
    //                 background: black;
    //                 color: white;
    //                 cursor:pointer;
    
    //                 font-family: "trueno";
    //                 font-weight: 500;
    
    //                 padding: .3rem .5rem;
    //                 font-size: $font-small;
    //                 text-decoration: none;
    //                 text-transform: uppercase;
                    
    
    //                 &:hover{
    //                     color:black;
    //                     background: white;
    //                 }
    //             }
    //         }
    //     } 

        // .body:after{
        //     content: "";
        //     opacity: 1;
        //     position: absolute;
        //     top: 0; bottom: 0; left: -15px; right: -15px;
        //     box-shadow: inset $bck-col 0 -2rem 2rem;
        // }
        // .body_open{
        //     height: auto !important;
        //     padding: 0 0 .8rem 0;
        //     &:after{
        //         opacity: 0;
        //         -webkit-transition: all 250ms ease;
        //         -moz-transition: all 250ms ease;
        //         -o-transition: all 250ms ease;
        //         transition: all 250ms ease;
        //     }
        //     -webkit-transition: all 250ms ease;
        //     -moz-transition: all 250ms ease;
        //     -o-transition: all 250ms ease;
        //     transition: all 250ms ease;
        // }
        // .body_open:after{
        //     display: none;
        // }
        // .field_textes{
          
        //     .paragraph{
        //         // border-top: 1px solid black;
        //         border-bottom: 3px dotted gray;
        //         padding: 1rem 0;
        //         .field_titre{
        //             font-size: $font-big;
        //             font-weight: 600;
        //             text-transform: initial;
        //             cursor: pointer;
        //             display: grid;
        //             grid-template-columns: 95% 5%;
        //             align-content: center;
        //             // margin-top: 1rem;
        //         }
        //         .field_titre:after{
        //             content: '▼';
        //             -webkit-transition: all 250ms ease;
        //             -moz-transition: all 250ms ease;
        //             -o-transition: all 250ms ease;
        //             transition: all 250ms ease;
        //             align-self: center;
        //             justify-self: center;
        //         }
        //         .rotate:after{
        //             transform: rotate(180deg);
        //             -webkit-transition: all 250ms ease;
        //             -moz-transition: all 250ms ease;
        //             -o-transition: all 250ms ease;
        //             transition: all 250ms ease;
        //         }
        //         .field_texte{
        //             height: auto;
        //             position: relative;
        //             h2{
        //                 text-transform: inherit;
        //             }
        //             p{
        //                 margin-top: .5rem;
        //             }
        //             -webkit-transition: all 250ms ease;
        //             -moz-transition: all 250ms ease;
        //             -o-transition: all 250ms ease;
        //             transition: all 250ms ease;
        //         }
                
        //         .crop{
        //             height: 0;
        //             overflow: hidden;
        //             display: none;
        //             -webkit-transition: all 250ms ease;
        //             -moz-transition: all 250ms ease;
        //             -o-transition: all 250ms ease;
        //             transition: all 250ms ease;
        //         }
        //     }
        // }
    }

}