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;
|
||||
grid-column: 1 / span 17;
|
||||
|
||||
@include bp (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
picture {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
overflow: hidden;
|
||||
background: $color-primary-tertiary20;
|
||||
|
||||
@include bp (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
|
||||
@@ -251,30 +251,6 @@
|
||||
|
||||
// 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
|
||||
*/
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
@import "atoms/discover";
|
||||
@import "atoms/box-cta";
|
||||
@import "atoms/site-title";
|
||||
@import "atoms/photo";
|
||||
|
||||
// Molecules
|
||||
@import "molecules/photo-card";
|
||||
|
||||
Reference in New Issue
Block a user