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

Calendar

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 0000000000..4dcbaa5ab5 --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,7 @@ +body { + margin: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/styles/blocks/calendar.scss b/src/styles/blocks/calendar.scss new file mode 100644 index 0000000000..74110e5e91 --- /dev/null +++ b/src/styles/blocks/calendar.scss @@ -0,0 +1,54 @@ +.calendar { + display: flex; + flex-wrap: wrap; + width: ($day-size + $gap) * $col-count - $gap; + 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 { + &: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 { + &--start-day-#{$day} { + .calendar__day:first-child { + margin-left: ($day-size + $gap) * $index; + } + } + } + + @for $day from 28 through $month-length { + &--month-length-#{$day} { + .calendar__day:nth-child(n + #{$day + 1}) { + display: none; + } + } + } +} 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..26eac30244 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,3 @@ +@import '../utils/variables'; +@import '../styles/blocks/body'; +@import '../styles/blocks/calendar'; diff --git a/src/utils/variables.scss b/src/utils/variables.scss new file mode 100644 index 0000000000..dd1663b88f --- /dev/null +++ b/src/utils/variables.scss @@ -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;