calendar #4013
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| name: Test | ||
|
|
||
| on: | ||
| pull_request: | ||
| branches: [ master ] | ||
|
|
||
| jobs: | ||
| build: | ||
|
|
||
| runs-on: ubuntu-latest | ||
|
|
||
| strategy: | ||
| matrix: | ||
| node-version: [20.x] | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js ${{ matrix.node-version }} | ||
| uses: actions/setup-node@v1 | ||
| with: | ||
| node-version: ${{ matrix.node-version }} | ||
| - run: npm install | ||
| - run: npm test | ||
| - name: Upload HTML report(backstop data) | ||
| if: ${{ always() }} | ||
| uses: actions/upload-artifact@v2 | ||
| with: | ||
| name: report | ||
| path: backstop_data |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| .page { | ||
| margin: 0; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .calendar { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: $calendar-width; | ||
|
There was a problem hiding this comment. Ensure that the variable There was a problem hiding this comment. The variable |
||
| padding: 0; | ||
| margin: auto; | ||
| gap: $gap; | ||
|
There was a problem hiding this comment. Ensure that the variable There was a problem hiding this comment. The variable |
||
|
|
||
| &__day { | ||
| box-sizing: border-box; | ||
| width: $day-size; | ||
|
There was a problem hiding this comment. Ensure that the variable There was a problem hiding this comment. The variable |
||
| height: $day-size; | ||
| background-color: $day-color; | ||
|
There was a problem hiding this comment. Ensure that the variable There was a problem hiding this comment. The variable |
||
| border: $day-border; | ||
|
There was a problem hiding this comment. Ensure that the variable There was a problem hiding this comment. The variable |
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| font-family: Arial, sans-serif; | ||
| font-size: $font-size; | ||
|
There was a problem hiding this comment. Ensure that the variable There was a problem hiding this comment. The variable |
||
| position: relative; | ||
|
|
||
| &:hover { | ||
| background-color: #FFBFCB; | ||
| transform: translate(0, -20px); | ||
| } | ||
|
|
||
| @for $i from 1 through 31 { | ||
| &:nth-child(#{$i}) { | ||
| &::before { | ||
| content: "#{$i}"; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @each $day, $number in $weekdays { | ||
|
There was a problem hiding this comment. Ensure that the variable There was a problem hiding this comment. The variable |
||
| &__start-day--#{$day}> :first-child { | ||
| margin-left: (($number - 1) * $day-size) + ($number - 1) * $gap; | ||
|
|
||
| } | ||
| } | ||
|
|
||
| @for $length from 28 through 31 { | ||
| &__month-length--#{$length}> :nth-child(n + #{$length + 1}) { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| $day-size: 100px; | ||
| $day-color: #eee; | ||
| $day-border: 1px solid #000; | ||
| $font-size: 30px; | ||
| $gap: 1px; | ||
| $calendar-width: 7 * $day-size + 6 * $gap; | ||
| $weekdays: ( | ||
| 'mon' 1, | ||
| 'tue' 2, | ||
| 'wed' 3, | ||
| 'thu' 4, | ||
| 'fri' 5, | ||
| 'sat' 6, | ||
| 'sun' 7 | ||
| ); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,2 @@ | ||
| @import './blocks/variables'; | ||
| @import './blocks/calendar'; |
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
hrefattribute is linking to a SCSS file (styles/index.scss). Browsers cannot directly interpret SCSS files. You need to compile the SCSS into a CSS file and link to the resulting CSS file instead.