gulp, and select style #2
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,3 +3,4 @@ package-lock.json | |
| dist/ | ||
| .vscode/ | ||
| *.log | ||
| yarn.lock | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import gulp from 'gulp' | ||
| import cssSelectorExtract from 'css-selector-extract' | ||
| import through2 from 'through2' | ||
|
|
||
| var extract = function() { | ||
| return gulp | ||
| .src('src/elements/select.shared.css') | ||
| .pipe( | ||
| through2.obj(function(file, _, cb) { | ||
| if (file.isBuffer()) { | ||
| const code = file.contents.toString() | ||
| const extractedCss = cssSelectorExtract.processSync({ | ||
| // CSS source code as string. | ||
| css: code, | ||
| // Array of selectors which should get extracted. | ||
| filters: [/^(.*)select(.*)/], | ||
| }) | ||
| file.contents = Buffer.from(extractedCss) | ||
| } | ||
| cb(null, file) | ||
| }), | ||
| ) | ||
| .pipe(gulp.dest('dist/')) | ||
| } | ||
|
|
||
| gulp.task('default', extract) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,3 @@ | ||
| input[type='button' i], | ||
| input[type='reset' i], | ||
| input[type='submit' i], | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,205 @@ | ||
| select { | ||
| --line-height: 1.5; | ||
| --form-element-spacing-vertical: 0.75rem; | ||
| --form-element-spacing-horizontal: 1rem; | ||
| --form-element-border-width: 1px; | ||
| --block-round: 0.25rem; | ||
| --text: #415462; | ||
| --input-border: #c8d1d8; | ||
| --text-weight: 400; | ||
| --form-element-weight: var(--text-weight); | ||
| --mark-text: #2c3d49; | ||
| --muted-background: #edf0f3; | ||
| --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); | ||
| --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); | ||
| --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); | ||
| --spacing-typography: 1.5rem; | ||
| --form-element-outline-width: 3px; | ||
| --primary-focus: rgba(16, 149, 193, 0.125); | ||
| --input-focus: var(--primary-focus); | ||
| } | ||
|
|
||
| button, | ||
| input, | ||
| optgroup, | ||
| select, | ||
| textarea { | ||
| font-family: inherit; /* 1 */ | ||
| font-size: 1rem; /* 1 */ | ||
| line-height: var(--line-height); /* 1 */ | ||
| margin: 0; /* 2 */ | ||
| } | ||
|
|
||
| select, | ||
| textarea, | ||
| form { | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
|
|
||
| input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']), | ||
| select, | ||
| textarea { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| /* Remove the inheritance of text transform in Edge, Firefox, and IE */ | ||
| select { | ||
| text-transform: none; | ||
| } | ||
|
|
||
| input, | ||
| select, | ||
| textarea { | ||
| border: var(--form-element-border-width) solid var(--input-border); | ||
| border-radius: var(--block-round); | ||
| outline: none; | ||
| background-color: var(--input-background); | ||
| color: var(--text); | ||
| font-weight: var(--form-element-weight); | ||
| } | ||
|
|
||
| input::placeholder, | ||
| select::placeholder, | ||
| textarea::placeholder, | ||
| input::-webkit-input-placeholder, | ||
| select::-webkit-input-placeholder, | ||
| textarea::-webkit-input-placeholder { | ||
| color: var(--muted-text); | ||
| opacity: 1; | ||
| } | ||
|
|
||
| input:active, | ||
| select:active, | ||
| textarea:active, | ||
| input:focus, | ||
| select:focus, | ||
| textarea:focus { | ||
| border-color: var(--input-hover-border); | ||
| background-color: var(--input-hover-background); | ||
| } | ||
|
|
||
| input[readonly], | ||
| select[readonly], | ||
| textarea[readonly], | ||
| input[disabled], | ||
| select[disabled], | ||
| textarea[disabled] { | ||
| border-color: var(--muted-border); | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| input[readonly] ~ label, | ||
| select[readonly] ~ label, | ||
| textarea[readonly] ~ label, | ||
| input[disabled] ~ label, | ||
| select[disabled] ~ label, | ||
| textarea[disabled] ~ label { | ||
| color: var(--muted-text); | ||
| } | ||
|
|
||
| input[readonly]:active, | ||
| select[readonly]:active, | ||
| textarea[readonly]:active, | ||
| input[disabled]:active, | ||
| select[disabled]:active, | ||
| textarea[disabled]:active, | ||
| input[readonly]:focus, | ||
| select[readonly]:focus, | ||
| textarea[readonly]:focus, | ||
| input[disabled]:focus, | ||
| select[disabled]:focus, | ||
| textarea[disabled]:focus { | ||
| box-shadow: none; | ||
| } | ||
|
|
||
| input[disabled]:not([type='reset']):not([type='submit']):not([type='button']), | ||
| select[disabled]:not([type='reset']):not([type='submit']):not([type='button']), | ||
| textarea[disabled]:not([type='reset']):not([type='submit']):not([type='button']) { | ||
| background-color: var(--muted-background); | ||
| } | ||
|
|
||
| input[disabled], | ||
| select[disabled], | ||
| textarea[disabled] { | ||
| opacity: 0.66; | ||
| } | ||
|
|
||
| input[aria-invalid], | ||
| select[aria-invalid], | ||
| textarea[aria-invalid] { | ||
| padding-right: 2rem; | ||
| background-position: center right 0.75rem; | ||
| background-repeat: no-repeat; | ||
| background-size: 1rem auto; | ||
| } | ||
|
|
||
| input[aria-invalid='false'], | ||
| select[aria-invalid='false'], | ||
| textarea[aria-invalid='false'] { | ||
| background-image: var(--icon-valid); | ||
| } | ||
|
|
||
| input[aria-invalid='true'], | ||
| select[aria-invalid='true'], | ||
| textarea[aria-invalid='true'] { | ||
| background-image: var(--icon-invalid); | ||
| } | ||
|
|
||
| input:not([type='checkbox']):not([type='radio']), | ||
| select, | ||
| textarea { | ||
| margin-bottom: var(--spacing-typography); | ||
| } | ||
|
|
||
| input:not([type='range']):not([type='file']):focus, | ||
| select:focus, | ||
| textarea:focus { | ||
| box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); | ||
| } | ||
|
|
||
| select::-ms-expand { | ||
| border: 0; | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| select:not([multiple]):not([size]) { | ||
| padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); | ||
| background-image: var(--icon-chevron); | ||
| background-position: center right 0.75rem; | ||
| background-repeat: no-repeat; | ||
| background-size: 1rem auto; | ||
| } | ||
|
|
||
| /** Anything that is clickable should have a pointer cursor. */ | ||
|
|
||
| select, | ||
| input[type='checkbox' i], | ||
| input[type='radio' i], | ||
| input[type='color' i], | ||
| input[type='submit' i], | ||
| input[type='button' i], | ||
| button, | ||
| input[type='date' i], | ||
| input[type='time' i], | ||
| input[type='datetime-local' i], | ||
| input[type='month' i], | ||
| input[type='week' i], | ||
| input::-webkit-calendar-picker-indicator, | ||
| input::-webkit-file-upload-button, | ||
| input[type='range' i], | ||
| input[type='reset' i], | ||
| input[type='file' i], | ||
| summary { | ||
| cursor: pointer; | ||
| } | ||
|
There was a problem hiding this comment. I think it is still better to try to use multiple files, if possible. Wdyt? Is there a reason to put it in here? There was a problem hiding this comment. So the idea is whatever is shared, have it in the same file. If you want to change the cursor it easier than go through different files. |
||
|
|
||
| input[type='checkbox' i]:focus, | ||
| input[type='radio' i]:focus { | ||
| outline: none; | ||
| outline-offset: 0; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,3 @@ | ||
| input[type='checkbox' i] { | ||
| /* Checkboxes are boxes with rounded corners. */ | ||
| --checkable-border-radius: 15%; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,3 @@ | ||
| input[type='color' i] { | ||
| width: auto; | ||
| padding: 4px 8px; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| label { | ||
| user-select: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /* label > textarea, | ||
| label > input, | ||
| label > select { | ||
| margin-top: var(--spacing-form-element); | ||
| } */ |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
This only works for
We will also need
and
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.
Yeah, that was just a test. Thanks for the heads up