Create reusable class for Photo
This commit is contained in:
25
src/style/atoms/_photo.scss
Normal file
25
src/style/atoms/_photo.scss
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
.photo {
|
||||||
|
overflow: hidden;
|
||||||
|
background: $color-primary-tertiary20;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
cursor: zoom-in;
|
||||||
|
|
||||||
|
& > picture {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -41,15 +41,13 @@
|
|||||||
display: block;
|
display: block;
|
||||||
grid-column: 1 / span 17;
|
grid-column: 1 / span 17;
|
||||||
|
|
||||||
picture {
|
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
overflow: hidden;
|
|
||||||
background: $color-primary-tertiary20;
|
|
||||||
|
|
||||||
@include bp (sm) {
|
@include bp (sm) {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
picture {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@@ -251,30 +251,6 @@
|
|||||||
|
|
||||||
// Photo
|
// Photo
|
||||||
.photo {
|
.photo {
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: $color-primary-tertiary20;
|
|
||||||
|
|
||||||
a {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
cursor: zoom-in;
|
|
||||||
|
|
||||||
& > picture {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Photo sizes
|
* Photo sizes
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -40,6 +40,7 @@
|
|||||||
@import "atoms/discover";
|
@import "atoms/discover";
|
||||||
@import "atoms/box-cta";
|
@import "atoms/box-cta";
|
||||||
@import "atoms/site-title";
|
@import "atoms/site-title";
|
||||||
|
@import "atoms/photo";
|
||||||
|
|
||||||
// Molecules
|
// Molecules
|
||||||
@import "molecules/photo-card";
|
@import "molecules/photo-card";
|
||||||
|
|||||||
Reference in New Issue
Block a user