Files
Popsu-coloque/web/themes/custom/popsu_colloque/css/components/thumbnails.scss
T
2020-07-16 17:24:02 +02:00

87 lines
1.4 KiB
SCSS

/**
* @file
* Presentational styles for Drupal stark theme layout.
*
* It is left empty for testing purposes.
*
* @see https://www.drupal.org/project/drupal/issues/2349711
*/
.thumbnails{
margin: 1rem 0rem;
// max-width: 300px;
min-width: 250px;
height: auto;
width: calc(100% / 4 );
background: white;
transform: scale(1);
box-shadow: none;
transition: 0.3s transform ease, 0.3s box-shadow ease;
a{
display: block;
height: 100%;
}
&:hover{
transform: scale(1.05);
transition: 0.3s all ease;
box-shadow: 0px 0px 13px 0px $color2;
}
& > .__wrap{
padding: 1rem;
}
.__media{
margin-right: 1rem;
figure{
height: 100%;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.d-flex{
padding: 1rem;
}
}
.thumbnails{
figure{
height: 100px;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.programme{
.row{
margin: 0;
}
.thumbnails{
width: 100%;
margin: 0;
figure{
height: 250px;
}
}
}
@media screen and (min-width: 960px) {
.programme{
.row{
margin: $gutter1 calc(-#{$gutter1});
}
.thumbnails{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
figure{
height: 250px;
}
}
}
}