fix1 #3955
fix1 #3955
Conversation
RYAB0Y
commented
Nov 18, 2024
RYAB0Y
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on implementing the calendar! 🎉 Your code meets all the task requirements and constraints, and you've effectively used SCSS features to enhance your styling. Just make sure to compile your SCSS to CSS for browser compatibility. Keep up the excellent work and continue refining your skills! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| $day-size: 100px; | ||
| $border-size: 1px; | ||
| $padding: 10px; | ||
| $hover-color: #ffbfcb; |
There was a problem hiding this comment.
The variable $hover-color is defined but make sure it contrasts well with the $day-color to ensure good visibility when hovering over a day.
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: 1px; | ||
| width: calc(7 * #{$day-size} + 7px); |
There was a problem hiding this comment.
The calculation for the calendar width is correct, but ensure that the gap between days is consistent with the gap property set on the .calendar class.
|
|
||
| @each $day, $index in (mon: 0, tue: 1, wed: 2, thu: 3, fri: 4, sat: 5, sun: 6) { | ||
| .calendar--start-day-#{$day} .calendar__day:nth-child(1) { | ||
| margin-left: calc(#{$day-size} * $index + 1px * $index); |
There was a problem hiding this comment.
The margin-left calculation for the first day of the week is correctly using SCSS interpolation and variables. Ensure that the resulting CSS aligns the days correctly based on the starting day.
