✨ Finish Photo viewer styling with responsive
This commit is contained in:
@@ -1,18 +1,15 @@
|
||||
.arrow {
|
||||
display: block;
|
||||
|
||||
// Colors
|
||||
&--white {
|
||||
path {
|
||||
fill: #fff;
|
||||
}
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&--pink {
|
||||
path {
|
||||
fill: $color-secondary;
|
||||
}
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&--flip {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
transition: opacity 0.4s var(--ease-quart), filter 0.4s var(--ease-quart);
|
||||
}
|
||||
|
||||
// Clones
|
||||
@@ -35,6 +36,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** States
|
||||
*/
|
||||
// Hover
|
||||
&:hover {
|
||||
.clone {
|
||||
@@ -49,6 +54,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&[disabled] {
|
||||
background: $color-primary;
|
||||
border: 3px solid #ffffff20;
|
||||
|
||||
svg {
|
||||
fill: $color-primary-tertiary20;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Variants
|
||||
|
||||
@@ -1,37 +1,140 @@
|
||||
.viewer-photo {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include bp (md, max) {
|
||||
display: block;
|
||||
.container {
|
||||
height: 100%;
|
||||
|
||||
@include bp (md, max) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
&__carousel {
|
||||
display: grid;
|
||||
grid-column: span var(--columns);
|
||||
grid-row-gap: 20px;
|
||||
margin: auto 8px;
|
||||
max-width: 720px;
|
||||
margin: auto 0;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@include bp (md) {
|
||||
max-width: none;
|
||||
margin: auto 0;
|
||||
grid-column: 3 / span 16;
|
||||
grid-row-gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
position: relative;
|
||||
margin: auto 0 0;
|
||||
width: 100%;
|
||||
margin: auto auto 0;
|
||||
padding-top: 66.66%;
|
||||
|
||||
.photo {
|
||||
position: relative;
|
||||
--opacity: 1;
|
||||
--scale: 1.0;
|
||||
--rotate: 0deg;
|
||||
--offset-x: -50%;
|
||||
--offset-y: -50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 12px 12px rgba(#000, 0.15),
|
||||
0 20px 20px rgba(#000, 0.15),
|
||||
0 48px 48px rgba(#000, 0.15);
|
||||
transform: translate3d(var(--offset-x), var(--offset-y), 0) scale(var(--scale)) rotate(var(--rotate));
|
||||
transform-origin: top center;
|
||||
cursor: default;
|
||||
will-change: transform;
|
||||
transition: opacity 1s var(--ease-quart), transform 1s var(--ease-quart);
|
||||
|
||||
@include bp (md) {
|
||||
--offset-x: 0%;
|
||||
--offset-y: -50%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: var(--opacity);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
--scale: 0.9;
|
||||
--opacity: 0.75;
|
||||
--offset-y: -34%;
|
||||
z-index: 7;
|
||||
|
||||
@include bp (md) {
|
||||
--scale: 0.9;
|
||||
--rotate: 1deg;
|
||||
--offset-x: 4.5%;
|
||||
--offset-y: -54%;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
--scale: 0.83;
|
||||
--opacity: 0.55;
|
||||
--offset-y: -22.5%;
|
||||
z-index: 6;
|
||||
|
||||
@include bp (md) {
|
||||
--scale: 0.83;
|
||||
--offset-x: 7%;
|
||||
--offset-y: -56.5%;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
--scale: 0.75;
|
||||
--opacity: 0.45;
|
||||
--offset-y: -11%;
|
||||
z-index: 5;
|
||||
|
||||
@include bp (md) {
|
||||
--scale: 0.75;
|
||||
--rotate: 3deg;
|
||||
--offset-x: 9%;
|
||||
--offset-y: -59%;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
--scale: 0.68;
|
||||
--opacity: 0.3;
|
||||
--offset-y: -1.5%;
|
||||
z-index: 4;
|
||||
|
||||
@include bp (md) {
|
||||
--scale: 0.68;
|
||||
--rotate: 4deg;
|
||||
--offset-x: 10.5%;
|
||||
--offset-y: -61.5%;
|
||||
}
|
||||
}
|
||||
|
||||
// Active state
|
||||
&.is-active {
|
||||
z-index: 8;
|
||||
box-shadow:
|
||||
0 12px 12px rgba(#000, 0.15),
|
||||
0 20px 20px rgba(#000, 0.15),
|
||||
0 48px 48px rgba(#000, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,7 +146,7 @@
|
||||
text-align: center;
|
||||
|
||||
@include bp (md) {
|
||||
margin-top: 26px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -55,8 +158,12 @@
|
||||
|
||||
h1 {
|
||||
color: $color-secondary;
|
||||
font-size: rem(32px);
|
||||
font-size: clamp(#{rem(20px)}, 6.5vw, #{rem(28px)});
|
||||
line-height: 1.1;
|
||||
|
||||
@include bp (md) {
|
||||
font-size: rem(32px);
|
||||
}
|
||||
}
|
||||
|
||||
// Details
|
||||
@@ -67,6 +174,9 @@
|
||||
color: $color-tertiary;
|
||||
line-height: 1.5;
|
||||
|
||||
@include bp (md) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@include bp (lg) {
|
||||
margin-top: 0;
|
||||
margin-left: auto;
|
||||
@@ -95,16 +205,17 @@
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: calc(92% + 1vw);
|
||||
display: block;
|
||||
line-height: 1;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
|
||||
@include bp (md, max) {
|
||||
font-size: clamp(#{rem(80px)}, 24vw, #{rem(120px)});
|
||||
}
|
||||
@include bp (md) {
|
||||
top: 50%;
|
||||
left: 95%;
|
||||
left: min(68vw, 1296px);
|
||||
width: 350px;
|
||||
text-align: center;
|
||||
bottom: auto;
|
||||
@@ -125,17 +236,11 @@
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
.photo {
|
||||
grid-column: 3 / span 16;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user