add task solution #5198
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| $day-size: 100px; | ||
| $border: 1px; | ||
| $gap: 1px; | ||
| $padding: 10px; | ||
| $font-size: 30px; | ||
| $bg: #eee; | ||
| $hover: #ffbfcb; | ||
| $col-width: $day-size; | ||
| $container-width: 7 * $col-width + 6 * $gap + 2 * $padding; | ||
| $week-days: ( | ||
| mon: 1, | ||
| tue: 2, | ||
| wed: 3, | ||
| thu: 4, | ||
| fri: 5, | ||
| sat: 6, | ||
| sun: 7, | ||
|
Comment on lines
+11
to
+17
There was a problem hiding this comment. This violates checklist item #1: "Changing 'month-lengh' and 'start-day' modifier in the code element reflects in changing calendar layout". The |
||
| ); | ||
|
|
||
| body { | ||
| margin: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| min-height: 100vh; | ||
| } | ||
|
|
||
| .calendar { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: $gap; | ||
| padding: $padding; | ||
| width: $container-width; | ||
| box-sizing: border-box; | ||
|
|
||
| &__day { | ||
| width: $day-size; | ||
| height: $day-size; | ||
| background: $bg; | ||
| border: $border solid #000; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| box-sizing: border-box; | ||
| transition: | ||
| transform 0.5s, | ||
| background-color 0.5s; | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| background: $hover; | ||
| transform: translateY(-20px); | ||
| z-index: 1; | ||
| } | ||
|
|
||
| &::before { | ||
| display: block; | ||
| pointer-events: none; | ||
| text-align: center; | ||
| box-sizing: border-box; | ||
| user-select: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @for $i from 1 through 31 { | ||
| .calendar__day:nth-child(#{$i})::before { | ||
| content: '#{$i}'; | ||
| font-family: Arial, sans-serif; | ||
| font-size: $font-size; | ||
| } | ||
| } | ||
|
|
||
| @each $name, $pos in $week-days { | ||
| .calendar--start-day-#{$name} { | ||
| .calendar__day:nth-child(1) { | ||
| margin-left: ($pos - 1) * ($day-size + $gap); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @for $len from 28 through 31 { | ||
| .calendar--month-length-#{$len} .calendar__day:nth-child(n + #{$len + 1}) { | ||
| display: none; | ||
| } | ||
| } | ||
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 width calculation makes total horizontal padding =
2 * $padding(you set$padding: 10pxon line 4 and use+ 2 * $paddingin$container-widthon line 9), which yields 20px total horizontal padding. The requirement states the calendar width must be exactly "7 columns + 10px paddings". Change either$paddingto5px(so left+right = 10px) or modify$container-widthto add only10pxtotal (e.g.+ 10pxinstead of+ 2 * $padding) so the total horizontal padding equals 10px.