Develop #3893
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| body { | ||
| margin: 0; | ||
| height: 100vh; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| .calendar { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: ($day-size + $gap) * $col-count - $gap; | ||
|
There was a problem hiding this comment. Ensure that the variables $day-size, $gap, and $col-count are defined elsewhere in your SCSS files. If they are not defined, this will cause a compilation error. There was a problem hiding this comment. Ensure that the variables $day-size, $gap, $col-count, and $padding are defined elsewhere in your SCSS files. If they are not defined, this will cause a compilation error. |
||
| gap: $gap; | ||
| padding: $padding; | ||
|
|
||
| &__day { | ||
| display: flex; | ||
| height: $day-size; | ||
| width: $day-size; | ||
| border: 1px solid black; | ||
| background-color: #eee; | ||
|
|
||
| position: relative; | ||
| text-align: center; | ||
| align-items: center; | ||
| justify-content: center; | ||
| box-sizing: border-box; | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| background-color: #ffbfcb; | ||
| transform: translate(0, -20px); | ||
| transition-duration: 0.5s; | ||
| } | ||
|
|
||
| @for $number from 1 through $month-length { | ||
|
There was a problem hiding this comment. Ensure that the variable $month-length is defined and holds the correct number of days for the month you are styling. Otherwise, the loop will not work as intended. |
||
| &:nth-child(#{$number})::before { | ||
| content: '#{$number}'; | ||
| display: block; | ||
| position: absolute; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 30px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @each $day, $index in $week-day { | ||
|
There was a problem hiding this comment. Ensure that the variable $week-day is defined as a list or map of days. This is necessary for the @each loop to function correctly. |
||
| &--start-day-#{$day} { | ||
| .calendar__day:first-child { | ||
| margin-left: ($day-size + $gap) * $index; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @for $day from 28 through $month-length { | ||
|
There was a problem hiding this comment. Ensure that the variable $month-length is defined and correctly set to the number of days in the current month. This is crucial for the correct functioning of the calendar layout. |
||
| &--month-length-#{$day} { | ||
| .calendar__day:nth-child(n + #{$day + 1}) { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| @import '../utils/variables'; | ||
| @import '../styles/blocks/body'; | ||
| @import '../styles/blocks/calendar'; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| $day-size: 100px; | ||
| $col-count: 7; | ||
| $padding: 10px; | ||
| $gap: 1px; | ||
| $week-day: ( | ||
| 'mon': 0, | ||
| 'tue': 1, | ||
| 'wed': 2, | ||
| 'thu': 3, | ||
| 'fri': 4, | ||
| 'sat': 5, | ||
| 'sun': 6, | ||
| ); | ||
| $month-length: 31; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The href attribute in the link tag is pointing to a '.scss' file. Browsers cannot directly interpret SCSS files; they need to be compiled into CSS first. Ensure that the SCSS file is compiled to a CSS file and update the href to point to the resulting '.css' file.