im trying #4540
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 |
|---|---|---|
| @@ -1 +1,88 @@ | ||
| @font-face { | ||
| font-family: Avenir; | ||
| font-weight: 300; | ||
| src: | ||
| url(../src/fonts/Avenir-Book.ttf) format('truetype'), | ||
| url(../src/fonts/Avenir-Heavy.ttf) format('truetype'); | ||
| } | ||
|
There was a problem hiding this comment. It's better to split your font-face declarations into two separate ones for different font weights. It's a common practice to have a separate @font-face declaration for each font weight and style combination. This way, the browser can select the correct font file based on the font-weight and font-style used in your CSS rules. |
||
|
|
||
| body { | ||
| margin: 0 8px; | ||
| box-sizing: border-box; | ||
|
There was a problem hiding this comment. Be consistent with your margins. It's better to add only top or bottom margins, but not both, to avoid potential margin collapse. In your case, you've added both vertical and horizontal margins to the body. It's not a critical issue in this case, but it's a good practice to follow. |
||
| padding-top: 20px; | ||
| } | ||
|
|
||
| .form { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 20px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .input { | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| border: 1px solid #e1e7ed; | ||
| border-radius: 4px; | ||
| color: #3d4e61; | ||
| font-family: Avenir, Arial, sans-serif; | ||
| font-weight: 300; | ||
|
There was a problem hiding this comment. Remember to use fallback fonts - alternative font-family in case the main one doesn't work. If the Avenir font fails to load for some reason, your text will be displayed using the default browser font, which may not look as expected. It's a good practice to specify a list of fallback fonts that should be used if the primary font is not available. You can specify a list of fonts in order of preference, separated by commas. After Arial, you can add 'sans-serif' as a generic fallback. |
||
| } | ||
|
|
||
| .input__big { | ||
| height: 70px; | ||
| font-size: 16px; | ||
| line-height: 21.86px; | ||
| padding: 0 0 0 62px; | ||
| } | ||
|
|
||
| .input__small { | ||
| height: 42px; | ||
| font-size: 14px; | ||
| padding-left: 33px; | ||
| line-height: 19.12px; | ||
| } | ||
|
|
||
| .form__icon::before { | ||
| content: ''; | ||
| position: absolute; | ||
| background-image: url(/src/images/Search.svg); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| } | ||
|
|
||
| .form__icon--big::before { | ||
| width: 20px; | ||
| height: 20px; | ||
| top: 25px; | ||
| left: 26px; | ||
| } | ||
|
|
||
| .form__icon--small::before { | ||
| width: 11px; | ||
| height: 11px; | ||
| bottom: 16px; | ||
| left: 13px; | ||
| } | ||
|
|
||
| .input__big:hover { | ||
| box-shadow: 0 4px 4px #3d4e6133; | ||
| transition: box-shadow 0.3s; | ||
| } | ||
|
There was a problem hiding this comment. The transition property should be placed in the original selector, not in the hover or focus state. It's a common practice to include the transition property in the original class, so that the transition is smooth both ways - when the pseudo-class is activated and when it's deactivated. |
||
|
|
||
| .input__small:hover { | ||
| box-shadow: 0 4px 4px #3d4e6133; | ||
| transition: box-shadow 0.3s; | ||
| } | ||
|
There was a problem hiding this comment. The transition property should be placed in the original selector, not in the hover state. Refer to the comment above for more details. |
||
|
|
||
| .input__big:focus { | ||
| text-shadow: 0 3px 3px #bbbec2; | ||
| box-shadow: 0 4px 4px #3d4e6133; | ||
| transition: box-shadow 0.3s; | ||
| } | ||
|
There was a problem hiding this comment. The transition property should be placed in the original selector, not in the focus state. Refer to the comment above for more details. |
||
|
|
||
| .input__small:focus { | ||
| text-shadow: 0 3px 3px #bbbec2; | ||
| box-shadow: 0 4px 4px #3d4e6133; | ||
| transition: box-shadow 0.3s; | ||
| } | ||
|
There was a problem hiding this comment. The transition property should be placed in the original selector, not in the focus state. Refer to the comment above for more details. |
||
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 class names 'input__big' and 'input__small' are not very descriptive. It's better to use class names that describe the meaning of the element, not its appearance. For example, if these inputs are for search, you could use 'search-input' instead.