diff --git a/dist/index.377889f1.css b/dist/index.377889f1.css new file mode 100644 index 0000000000..8945bf5520 --- /dev/null +++ b/dist/index.377889f1.css @@ -0,0 +1,2 @@ +body{margin:0}.calendar{flex-wrap:wrap;gap:1px;width:706px;margin:auto;padding:10px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.calendar--month-length-28 .calendar__day:nth-child(n+29),.calendar--month-length-29 .calendar__day:nth-child(n+30),.calendar--month-length-30 .calendar__day:nth-child(n+31),.calendar--month-length-31 .calendar__day:nth-child(n+32){display:none}.calendar__day{cursor:pointer;color:#000;box-sizing:border-box;background-color:#eee;border:1px solid #000;justify-content:center;align-items:center;width:100px;height:100px;transition:background-color .5s,transform .5s;display:flex;position:relative}.calendar__day:hover{background-color:#ffbfcb;transform:translateY(-20px)}.calendar__day:first-child:before{content:"1";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(2):before{content:"2";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(3):before{content:"3";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(4):before{content:"4";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(5):before{content:"5";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(6):before{content:"6";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(7):before{content:"7";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(8):before{content:"8";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(9):before{content:"9";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(10):before{content:"10";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(11):before{content:"11";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(12):before{content:"12";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(13):before{content:"13";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(14):before{content:"14";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(15):before{content:"15";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(16):before{content:"16";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(17):before{content:"17";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(18):before{content:"18";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(19):before{content:"19";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(20):before{content:"20";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(21):before{content:"21";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(22):before{content:"22";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(23):before{content:"23";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(24):before{content:"24";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(25):before{content:"25";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(26):before{content:"26";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(27):before{content:"27";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(28):before{content:"28";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(29):before{content:"29";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(30):before{content:"30";font-family:Arial,sans-serif;font-size:30px}.calendar__day:nth-child(31):before{content:"31";font-family:Arial,sans-serif;font-size:30px}.calendar--start-day-sun .calendar__day:first-child{margin-left:606px}.calendar--start-day-mon .calendar__day:first-child{margin-left:0}.calendar--start-day-tue .calendar__day:first-child{margin-left:101px}.calendar--start-day-wed .calendar__day:first-child{margin-left:202px}.calendar--start-day-thu .calendar__day:first-child{margin-left:303px}.calendar--start-day-fri .calendar__day:first-child{margin-left:404px}.calendar--start-day-sat .calendar__day:first-child{margin-left:505px} +/*# sourceMappingURL=index.377889f1.css.map */ diff --git a/dist/index.377889f1.css.map b/dist/index.377889f1.css.map new file mode 100644 index 0000000000..5f07b18bd8 --- /dev/null +++ b/dist/index.377889f1.css.map @@ -0,0 +1 @@ +{"mappings":"ACAA,cAqBA,qJAaI,qPAKF,2PAgBE,0EAME,0FAAA,2FAAA,2FAAA,2FAAA,2FAAA,2FAAA,2FAAA,2FAAA,2FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAAA,6FAWF,sEAAA,kEAAA,sEAAA,sEAAA,sEAAA,sEAAA","sources":["index.377889f1.css","src/styles/index.scss"],"sourcesContent":["body {\n margin: 0;\n}\n\n.calendar {\n flex-wrap: wrap;\n gap: 1px;\n width: 706px;\n margin: auto;\n padding: 10px;\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.calendar--month-length-28 .calendar__day:nth-child(n+29), .calendar--month-length-29 .calendar__day:nth-child(n+30), .calendar--month-length-30 .calendar__day:nth-child(n+31), .calendar--month-length-31 .calendar__day:nth-child(n+32) {\n display: none;\n}\n\n.calendar__day {\n cursor: pointer;\n color: #000;\n box-sizing: border-box;\n background-color: #eee;\n border: 1px solid #000;\n justify-content: center;\n align-items: center;\n width: 100px;\n height: 100px;\n transition: background-color .5s, transform .5s;\n display: flex;\n position: relative;\n}\n\n.calendar__day:hover {\n background-color: #ffbfcb;\n transform: translateY(-20px);\n}\n\n.calendar__day:first-child:before {\n content: \"1\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(2):before {\n content: \"2\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(3):before {\n content: \"3\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(4):before {\n content: \"4\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(5):before {\n content: \"5\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(6):before {\n content: \"6\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(7):before {\n content: \"7\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(8):before {\n content: \"8\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(9):before {\n content: \"9\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(10):before {\n content: \"10\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(11):before {\n content: \"11\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(12):before {\n content: \"12\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(13):before {\n content: \"13\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(14):before {\n content: \"14\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(15):before {\n content: \"15\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(16):before {\n content: \"16\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(17):before {\n content: \"17\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(18):before {\n content: \"18\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(19):before {\n content: \"19\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(20):before {\n content: \"20\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(21):before {\n content: \"21\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(22):before {\n content: \"22\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(23):before {\n content: \"23\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(24):before {\n content: \"24\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(25):before {\n content: \"25\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(26):before {\n content: \"26\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(27):before {\n content: \"27\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(28):before {\n content: \"28\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(29):before {\n content: \"29\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(30):before {\n content: \"30\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar__day:nth-child(31):before {\n content: \"31\";\n font-family: Arial, sans-serif;\n font-size: 30px;\n}\n\n.calendar--start-day-sun .calendar__day:first-child {\n margin-left: 606px;\n}\n\n.calendar--start-day-mon .calendar__day:first-child {\n margin-left: 0;\n}\n\n.calendar--start-day-tue .calendar__day:first-child {\n margin-left: 101px;\n}\n\n.calendar--start-day-wed .calendar__day:first-child {\n margin-left: 202px;\n}\n\n.calendar--start-day-thu .calendar__day:first-child {\n margin-left: 303px;\n}\n\n.calendar--start-day-fri .calendar__day:first-child {\n margin-left: 404px;\n}\n\n.calendar--start-day-sat .calendar__day:first-child {\n margin-left: 505px;\n}\n/*# sourceMappingURL=index.377889f1.css.map */\n","body {\n margin: 0;\n}\n\n$day-size: 100px;\n$border-size: 1px;\n$day-gap: 1px;\n$day-bg: #eee;\n$hover-bg: #ffbfcb;\n$font-size: 30px;\n$font-color: #000;\n$days: (\n sun: 6,\n mon: 0,\n tue: 1,\n wed: 2,\n thu: 3,\n fri: 4,\n sat: 5,\n);\n\n.calendar {\n display: flex;\n flex-wrap: wrap;\n width: 706px;\n margin: auto;\n padding: 10px;\n gap: 1px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n @for $i from 28 through 31 {\n &--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) {\n display: none;\n }\n }\n\n &__day {\n cursor: pointer;\n color: $font-color;\n box-sizing: border-box;\n background-color: $day-bg;\n width: $day-size;\n height: $day-size;\n border: solid $border-size #000;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 0.5s,\n transform 0.5s;\n\n &:hover {\n background-color: $hover-bg;\n transform: translateY(-20px);\n }\n\n @for $day from 1 through 31 {\n &:nth-child(#{$day})::before {\n font-family: Arial, sans-serif;\n font-size: $font-size;\n content: '#{$day}';\n }\n }\n }\n}\n\n@each $day, $i in $days {\n .calendar--start-day-#{$day} {\n .calendar__day:nth-child(1) {\n margin-left: ($day-size * ($i) + ($day-size * ($i) / 100));\n }\n }\n}\n"],"names":[],"version":3,"file":"index.377889f1.css.map"} \ No newline at end of file diff --git a/dist/index.e378193d.css b/dist/index.e378193d.css new file mode 100644 index 0000000000..990b6850cb --- /dev/null +++ b/dist/index.e378193d.css @@ -0,0 +1,255 @@ +body { + margin: 0; +} + +.calendar { + flex-wrap: wrap; + gap: 1px; + width: 706px; + margin: auto; + padding: 10px; + display: flex; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.calendar--month-length-28 .calendar__day:nth-child(n+29), .calendar--month-length-29 .calendar__day:nth-child(n+30), .calendar--month-length-30 .calendar__day:nth-child(n+31), .calendar--month-length-31 .calendar__day:nth-child(n+32) { + display: none; +} + +.calendar__day { + cursor: pointer; + color: #000; + box-sizing: border-box; + background-color: #eee; + border: 1px solid #000; + justify-content: center; + align-items: center; + width: 100px; + height: 100px; + transition: background-color .5s, transform .5s; + display: flex; + position: relative; +} + +.calendar__day:hover { + background-color: #ffbfcb; + transform: translateY(-20px); +} + +.calendar__day:first-child:before { + content: "1"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(2):before { + content: "2"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(3):before { + content: "3"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(4):before { + content: "4"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(5):before { + content: "5"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(6):before { + content: "6"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(7):before { + content: "7"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(8):before { + content: "8"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(9):before { + content: "9"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(10):before { + content: "10"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(11):before { + content: "11"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(12):before { + content: "12"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(13):before { + content: "13"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(14):before { + content: "14"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(15):before { + content: "15"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(16):before { + content: "16"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(17):before { + content: "17"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(18):before { + content: "18"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(19):before { + content: "19"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(20):before { + content: "20"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(21):before { + content: "21"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(22):before { + content: "22"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(23):before { + content: "23"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(24):before { + content: "24"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(25):before { + content: "25"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(26):before { + content: "26"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(27):before { + content: "27"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(28):before { + content: "28"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(29):before { + content: "29"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(30):before { + content: "30"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar__day:nth-child(31):before { + content: "31"; + font-family: Arial, sans-serif; + font-size: 30px; +} + +.calendar--start-day-sun .calendar__day:first-child { + margin-left: 606px; +} + +.calendar--start-day-mon .calendar__day:first-child { + margin-left: 0; +} + +.calendar--start-day-tue .calendar__day:first-child { + margin-left: 101px; +} + +.calendar--start-day-wed .calendar__day:first-child { + margin-left: 202px; +} + +.calendar--start-day-thu .calendar__day:first-child { + margin-left: 303px; +} + +.calendar--start-day-fri .calendar__day:first-child { + margin-left: 404px; +} + +.calendar--start-day-sat .calendar__day:first-child { + margin-left: 505px; +} +/*# sourceMappingURL=index.e378193d.css.map */ diff --git a/dist/index.e378193d.css.map b/dist/index.e378193d.css.map new file mode 100644 index 0000000000..271310ecf2 --- /dev/null +++ b/dist/index.e378193d.css.map @@ -0,0 +1 @@ +{"mappings":"AAAA;;;;AAqBA;;;;;;;;;;;;;AAaI;;;;AAKF;;;;;;;;;;;;;;;AAgBE;;;;;AAME;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAAA;;;;;;AAWF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA","sources":["src/styles/index.scss"],"sourcesContent":["body {\n margin: 0;\n}\n\n$day-size: 100px;\n$border-size: 1px;\n$day-gap: 1px;\n$day-bg: #eee;\n$hover-bg: #ffbfcb;\n$font-size: 30px;\n$font-color: #000;\n$days: (\n sun: 6,\n mon: 0,\n tue: 1,\n wed: 2,\n thu: 3,\n fri: 4,\n sat: 5,\n);\n\n.calendar {\n display: flex;\n flex-wrap: wrap;\n width: 706px;\n margin: auto;\n padding: 10px;\n gap: 1px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n @for $i from 28 through 31 {\n &--month-length-#{$i} .calendar__day:nth-child(n + #{$i + 1}) {\n display: none;\n }\n }\n\n &__day {\n cursor: pointer;\n color: $font-color;\n box-sizing: border-box;\n background-color: $day-bg;\n width: $day-size;\n height: $day-size;\n border: solid $border-size #000;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color 0.5s,\n transform 0.5s;\n\n &:hover {\n background-color: $hover-bg;\n transform: translateY(-20px);\n }\n\n @for $day from 1 through 31 {\n &:nth-child(#{$day})::before {\n font-family: Arial, sans-serif;\n font-size: $font-size;\n content: '#{$day}';\n }\n }\n }\n}\n\n@each $day, $i in $days {\n .calendar--start-day-#{$day} {\n .calendar__day:nth-child(1) {\n margin-left: ($day-size * ($i) + ($day-size * ($i) / 100));\n }\n }\n}\n"],"names":[],"version":3,"file":"index.e378193d.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000000..adb8a47cac --- /dev/null +++ b/dist/index.html @@ -0,0 +1,46 @@ + + +
+ + +