diff --git a/src/index.html b/src/index.html index c10199d38b..63f979cea2 100644 --- a/src/index.html +++ b/src/index.html @@ -9,10 +9,42 @@ Calendar -

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/calendar.scss b/src/styles/calendar.scss new file mode 100644 index 0000000000..8a57c6fb1d --- /dev/null +++ b/src/styles/calendar.scss @@ -0,0 +1,55 @@ +.calendar { + width: 7 * $widthDay + 6 * $gapDay + 2 * $paddingCalendar; + padding: $paddingCalendar; + display: flex; + flex-flow: row wrap; + gap: $gapDay; + + &__day { + position: relative; + width: $widthDay; + height: $heightDay; + border: 1px solid black; + box-sizing: border-box; + background-color: #eee; + cursor: pointer; + transition: all 0.5s ease; + + &::before { + position: absolute; + inset: 0; + font-size: 30px; + + display: flex; + align-items: center; + justify-content: center; + } + + &:hover { + background-color: #ffbfcb; + transform: translate(0, -20px); + } + + @for $monthDay from 1 through 31 { + &:nth-child(#{$monthDay}) { + &::before { + content: '#{$monthDay}'; + } + } + } + } + + @for $monthLength from 28 through 31 { + &--month-length-#{$monthLength} { + .calendar__day:nth-child(n + #{$monthLength + 1}) { + display: none; + } + } + } + + @each $day, $marginLeft in $daysWeek { + &--start-day-#{$day} &__day:first-child { + margin-left: $marginLeft; + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 293d3b1f13..0000000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; -} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000000..bd98bd06b6 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,16 @@ +@import './variables'; +@import './calendar'; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + font-family: Arial, Helvetica, sans-serif; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..2a6cd4d8c4 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,14 @@ +$widthDay: 100px; +$heightDay: $widthDay; +$paddingCalendar: 10px; +$gapDay: 1px; +$gap-day-width: $widthDay + $gapDay; +$daysWeek: ( + 'mon': 0, + 'tue': $gap-day-width, + 'wed': $gap-day-width * 2, + 'thu': $gap-day-width * 3, + 'fri': $gap-day-width * 4, + 'sat': $gap-day-width * 5, + 'sun': $gap-day-width * 6, +);