You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.2 KiB
76 lines
1.2 KiB
4 years ago
|
// Media
|
||
|
|
// Image responsive
|
||
|
|
.img-responsive {
|
||
|
|
display: block;
|
||
|
|
height: auto;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
// object-fit support is coming to Microsoft Edge
|
||
|
|
// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
|
||
|
|
.img-fit-cover {
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-fit-contain {
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Video responsive
|
||
|
|
.video-responsive {
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 0;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
&::before {
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16
|
||
|
|
}
|
||
|
|
|
||
|
|
iframe,
|
||
|
|
object,
|
||
|
|
embed {
|
||
|
|
border: 0;
|
||
|
|
bottom: 0;
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
video.video-responsive {
|
||
|
|
height: auto;
|
||
|
|
max-width: 100%;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
content: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-responsive-4-3 {
|
||
|
|
&::before {
|
||
|
|
padding-bottom: 75%; // Ratio 4:3
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.video-responsive-1-1 {
|
||
|
|
&::before {
|
||
|
|
padding-bottom: 100%; // Ratio 1:1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Figure
|
||
|
|
.figure {
|
||
|
|
margin: 0 0 $layout-spacing 0;
|
||
|
|
|
||
|
|
.figure-caption {
|
||
|
|
color: $gray-color-dark;
|
||
|
|
margin-top: $layout-spacing;
|
||
|
|
}
|
||
|
|
}
|