Skip to content

Commit

Permalink
Merge pull request #17 from KristinaHranovska/rating-window
Browse files Browse the repository at this point in the history 
Rating window
  • Loading branch information
@KristinaHranovska
KristinaHranovska authored Feb 27, 2024
2 parents 62e5013 + da71372 commit 6767083
Show file tree
Hide file tree
Showing 11 changed files with 1,259 additions and 18 deletions.
311 changes: 311 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"devDependencies": {
"glob": "^8.1.0",
"sass": "^1.71.1",
"vite": "^4.5.2"
},
"author": "Alexander Repeta <alexander.repeta@gmail.com>",
Expand Down
20 changes: 20 additions & 0 deletions src/css/modal-window.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,26 @@
stroke: var(--star);
}

.give-rating {
border-radius: 30px;
border: 1px solid var(--text-dark);
background-color: transparent;
color: var(--text-dark);
font-size: 14px;
font-weight: 400;
line-height: 1.28;
transition: border-color 400ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1), color 400ms cubic-bezier(0.4, 0, 0.2, 1);

padding: 12px 80px;
}

.give-rating:hover,
.give-rating:focus {
border-color: var(--dark-grey-background);
color: var(--dark-grey-background);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 2px 1px rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 768px) {
.modal-window {
width: 716px;
Expand Down
146 changes: 146 additions & 0 deletions src/css/rating.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
.backdrop-rating-thumb {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(46, 47, 66, 0.40);

opacity: 1;
transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), visibility 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.backdrop-rating-thumb.is-close {
opacity: 0;
visibility: hidden;
pointer-events: auto;
}

.rating-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
z-index: 20;
transition: transform 0.3s ease;
width: 335px;
overflow-y: auto;
border-radius: 20px;
background-color: var(--text-light);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 2px 1px rgba(0, 0, 0, 0.2);
padding: 40px 20px;

@media screen and (max-width: 320px) {
width: 280px;
}
}

.rating-title {
font-weight: 400;
font-size: 12px;
line-height: 1.5;
color: var(--border-color);
margin-bottom: 8px;
}

.rating-thumb {
display: flex;
align-items: center;
gap: 2px;
margin-bottom: 20px;
}

.raiting-number {
font-weight: 400;
font-size: 12px;
line-height: 1.5;
color: var(--text-dark);
}

.input-email {
border: 1px solid var(--border-color);
border-radius: 30px;
padding: 12px 14px;
width: 100%;
outline: transparent;

margin-bottom: 10px;
}

.comment-area {
border: 1px solid var(--border-color);
border-radius: 15px;
padding: 12px 14px;
width: 100%;
height: 93px;

resize: none;
outline: transparent;

margin-bottom: 20px;
}

.input-email:focus,
.comment-area:focus {
border: 1px solid var(--hover-button-icon);
}

.rating-btn {
border-radius: 30px;
background-color: var(--accent);
color: var(--text-light);
font-size: 14px;
font-weight: 400;
line-height: 1.29;
border: none;
transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);

padding: 12px 131px;
}

.rating-btn:hover,
.rating-btn:focus {
background-color: var(--hover-button-icon);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 2px 1px rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 768px) {
.rating-window {
width: 450px;
padding: 50px;
}

.modal-button-close {
top: 16px;
right: 16px;
}

.rating-title {
font-size: 15px;
margin-bottom: 8px;
}

.rating-thumb {
margin-bottom: 32px;
}

.raiting-number {
font-style: 15px;
}

.input-email {
margin-bottom: 16px;
}

.comment-area {
width: 100%;
height: 106px;
margin-bottom: 32px;
}

.rating-btn {
width: 100%;
font-size: 16px;
}
}
210 changes: 210 additions & 0 deletions src/css/star.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
$hue: 223;
$starHue: 38;

:root {
--yellow: #{hsl($starHue,90%,55%)};
--yellow-t: #{hsla($starHue,90%,55%,0)};
--bezier: cubic-bezier(0.42,0,0.58,1);
--trans-dur: 0.3s;
}

.rating {
margin: auto;
&__stars {
display: flex;
gap: 2px;
position: relative;
}
&__star {
display: block;
overflow: visible;
pointer-events: none;
width: 24px;
height: 24px;

&-ring,
&-fill,
&-line,
&-stroke {
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
&-ring,
&-fill,
&-line {
stroke: var(--yellow);
}
&-fill {
fill: var(--yellow);
transform: scale(0);
transition:
fill var(--trans-dur) var(--bezier),
transform var(--trans-dur) var(--bezier);
}
&-line {
stroke-dasharray: 12 13;
stroke-dashoffset: -13;
}
}
&__label {
cursor: pointer;
}
@for $s from 1 through 4 {
&__label--delay#{$s} &__star-ring,
&__label--delay#{$s} &__star-fill,
&__label--delay#{$s} &__star-line,
&__label--delay#{$s} &__star-stroke {
animation-delay: 0.05s * $s;
}
}
&__input {
position: absolute;
-webkit-appearance: none;
appearance: none;
}
// display
&__input:hover ~ [data-rating]:not([hidden]) {
display: none;
}

&__input-1:hover ~ [data-rating="1"][hidden],
&__input-2:hover ~ [data-rating="2"][hidden],
&__input-3:hover ~ [data-rating="3"][hidden],
&__input-4:hover ~ [data-rating="4"][hidden],
&__input-5:hover ~ [data-rating="5"][hidden],
&__input:checked:hover ~ [data-rating]:not([hidden]) {
display: block;
}
// stars
&__input-1:hover ~ &__label:first-of-type &__star-stroke,
&__input-2:hover ~ &__label:nth-of-type(-n + 2) &__star-stroke,
&__input-3:hover ~ &__label:nth-of-type(-n + 3) &__star-stroke,
&__input-4:hover ~ &__label:nth-of-type(-n + 4) &__star-stroke,
&__input-5:hover ~ &__label:nth-of-type(-n + 5) &__star-stroke {
fill: var(--yellow);
transform: scale(1);
}
&__input-1:checked ~ &__label:first-of-type &__star-ring,
&__input-2:checked ~ &__label:nth-of-type(-n + 2) &__star-ring,
&__input-3:checked ~ &__label:nth-of-type(-n + 3) &__star-ring,
&__input-4:checked ~ &__label:nth-of-type(-n + 4) &__star-ring,
&__input-5:checked ~ &__label:nth-of-type(-n + 5) &__star-ring {
animation-name: starRing;
}
&__input-1:checked ~ &__label:first-of-type &__star-stroke,
&__input-2:checked ~ &__label:nth-of-type(-n + 2) &__star-stroke,
&__input-3:checked ~ &__label:nth-of-type(-n + 3) &__star-stroke,
&__input-4:checked ~ &__label:nth-of-type(-n + 4) &__star-stroke,
&__input-5:checked ~ &__label:nth-of-type(-n + 5) &__star-stroke {
animation-name: starStroke;
}
&__input-1:checked ~ &__label:first-of-type &__star-line,
&__input-2:checked ~ &__label:nth-of-type(-n + 2) &__star-line,
&__input-3:checked ~ &__label:nth-of-type(-n + 3) &__star-line,
&__input-4:checked ~ &__label:nth-of-type(-n + 4) &__star-line,
&__input-5:checked ~ &__label:nth-of-type(-n + 5) &__star-line {
animation-name: starLine;
}
&__input-1:checked ~ &__label:first-of-type &__star-fill,
&__input-2:checked ~ &__label:nth-of-type(-n + 2) &__star-fill,
&__input-3:checked ~ &__label:nth-of-type(-n + 3) &__star-fill,
&__input-4:checked ~ &__label:nth-of-type(-n + 4) &__star-fill,
&__input-5:checked ~ &__label:nth-of-type(-n + 5) &__star-fill {
animation-name: starFill;
}
&__input-1:not(:checked):hover ~ &__label:first-of-type &__star-fill,
&__input-2:not(:checked):hover ~ &__label:nth-of-type(2) &__star-fill,
&__input-3:not(:checked):hover ~ &__label:nth-of-type(3) &__star-fill,
&__input-4:not(:checked):hover ~ &__label:nth-of-type(4) &__star-fill,
&__input-5:not(:checked):hover ~ &__label:nth-of-type(5) &__star-fill {
fill: var(--yellow-t);
}
// screen reader text
&__sr {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
}

// Dark theme
@media (prefers-color-scheme: dark) {
.rating {
margin: auto;

&__star {
&-stroke {
fill: var(--not-color-star);
stroke: none;
}
}
}
}

// Animations
@keyframes starRing {
from,
20% {
animation-timing-function: ease-in;
opacity: 1;
r: 8px;
stroke-width: 16px;
transform: scale(0);
}
35% {
animation-timing-function: ease-out;
opacity: 0.5;
r: 8px;
stroke-width: 16px;
transform: scale(1);
}
50%,
to {
opacity: 0;
r: 16px;
stroke-width: 0;
transform: scale(1);
}
}
@keyframes starFill {
from,
40% {
animation-timing-function: ease-out;
transform: scale(0);
}
60% {
animation-timing-function: ease-in-out;
transform: scale(1.2);
}
80% {
transform: scale(0.9);
}
to {
transform: scale(1);
}
}
@keyframes starStroke {
from {
transform: scale(1);
}
20%,
to {
transform: scale(0);
}
}
@keyframes starLine {
from,
40% {
animation-timing-function: ease-out;
stroke-dasharray: 1 23;
stroke-dashoffset: 1;
}
60%,
to {
stroke-dasharray: 12 13;
stroke-dashoffset: -13;
}
}
Loading

0 comments on commit 6767083

Please sign in to comment.