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

Calendar

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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..d4d12ac293 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,83 @@ +$day__width: 100px; +$body__height: 100vh; +$days__gap: 1px; +$paddings: 10px; + +* { + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: $body__height; + margin: 0; +} + +.calendar { + display: inline-flex; + max-width: 7 * $day__width + 6 * $days__gap + 2 * $paddings; + flex-wrap: wrap; + align-self: center; + gap: $days__gap; + padding-left: $paddings; + padding-right: $paddings; +} + +.calendar__day { + width: $day__width; + height: $day__width; + background-color: #eee; + border: 1px solid black; + transition: + transform 0.5s, + background-color 0.5s; +} + +.calendar__day:hover { + cursor: pointer; + transform: translateY(-20px); + background-color: #ffbfcb; +} + +@for $i from 1 through 31 { + .calendar__day:nth-child(#{$i})::before { + font-family: Arial, Helvetica, sans-serif; + font-size: 30px; + content: '#{$i}'; + color: black; + + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + } +} + +$start-days: ( + 'mon': 0, + 'tue': 1, + 'wed': 2, + 'thu': 3, + 'fri': 4, + 'sat': 5, + 'sun': 6, +); + +@each $day, $index in $start-days { + .calendar--start-day-#{$day} { + .calendar__day:first-child { + margin-left: calc(($day__width + $days__gap) * #{$index}); + } + } +} + +@for $days-count from 28 through 31 { + .calendar--month-length-#{$days-count} { + .calendar__day:nth-child(n + #{$days-count + 1}) { + display: none; + } + } +}