diff --git a/.gitignore b/.gitignore index 612fafe..0182296 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ package-lock.json dist/ .vscode/ *.log +yarn.lock diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..6b65857 --- /dev/null +++ b/gulpfile.js @@ -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/form/form.shared-is-test.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) diff --git a/package.json b/package.json index 2cccc41..58e4c4b 100644 --- a/package.json +++ b/package.json @@ -25,13 +25,17 @@ "version": "lume versionHook", "postversion": "lume postVersionHook", "OTHER SCRIPTS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX": "", - "examples": "live-server --open=playground --no-css-inject" + "examples": "live-server --open=playground --no-css-inject", + "gulp": "gulp" }, "dependencies": {}, "devDependencies": { "@lume/cli": "^0.3.0", "live-server": "^1.2.1", - "prettier": "^1.19.1" + "prettier": "^1.19.1", + "gulp": "^4.0.2", + "css-selector-extract": "^4.0.0", + "through2": "^4.0.2" }, "repository": { "type": "git", diff --git a/playground/index.html b/playground/index.html index e324be2..62a34d3 100644 --- a/playground/index.html +++ b/playground/index.html @@ -8,10 +8,10 @@ Playground @@ -19,7 +19,6 @@ -

LUME Basicss Playground

@@ -210,6 +209,14 @@

Lists

  • Adds Bullets to Page
    • +
    + + + +

    Forms

    diff --git a/src/clickables.css b/src/clickables.css deleted file mode 100644 index d3f30fe..0000000 --- a/src/clickables.css +++ /dev/null @@ -1,21 +0,0 @@ -/** Anything that is clickable should have a pointer cursor. */ - -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; -} diff --git a/src/elements/body.css b/src/elements/body.css deleted file mode 100644 index f85cb80..0000000 --- a/src/elements/body.css +++ /dev/null @@ -1,4 +0,0 @@ -body { - font-family: sans-serif; - color: #626e84; -} diff --git a/src/elements/button.css b/src/elements/button.css index 737680d..e03ca02 100644 --- a/src/elements/button.css +++ b/src/elements/button.css @@ -1,5 +1,3 @@ -@import '../shared/colors.css'; - input[type='button' i], input[type='reset' i], input[type='submit' i], diff --git a/src/elements/form/form.shared-is-test.css b/src/elements/form/form.shared-is-test.css new file mode 100644 index 0000000..1bec5ec --- /dev/null +++ b/src/elements/form/form.shared-is-test.css @@ -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; +} + +input[type='checkbox' i]:focus, +input[type='radio' i]:focus { + outline: none; + outline-offset: 0; +} diff --git a/src/elements/input/input-checkbox.css b/src/elements/form/input-checkbox.css similarity index 81% rename from src/elements/input/input-checkbox.css rename to src/elements/form/input-checkbox.css index 6c7dbbe..660d6d0 100644 --- a/src/elements/input/input-checkbox.css +++ b/src/elements/form/input-checkbox.css @@ -1,6 +1,3 @@ -/* Checkboxes and radios share much of the same code. */ -@import './input.shared.css'; - input[type='checkbox' i] { /* Checkboxes are boxes with rounded corners. */ --checkable-border-radius: 15%; diff --git a/src/elements/input/input-color.css b/src/elements/form/input-color.css similarity index 81% rename from src/elements/input/input-color.css rename to src/elements/form/input-color.css index 64b0e09..b1e28ff 100644 --- a/src/elements/input/input-color.css +++ b/src/elements/form/input-color.css @@ -1,5 +1,3 @@ -@import './input.shared.css'; - input[type='color' i] { width: auto; padding: 4px 8px; diff --git a/src/elements/input/input-radio.css b/src/elements/form/input-radio.css similarity index 89% rename from src/elements/input/input-radio.css rename to src/elements/form/input-radio.css index f96511b..583fcc4 100644 --- a/src/elements/input/input-radio.css +++ b/src/elements/form/input-radio.css @@ -1,6 +1,3 @@ -/* Checkboxes and radios share much of the same code. */ -@import './input.shared.css'; - /* The extra "[type]" is needed here to force this to be more specific than the rule imported from input.shared.css. :\ */ input[type='radio' i] { /* Radios are circles. */ diff --git a/src/elements/input/input.shared.css b/src/elements/form/input.shared.css similarity index 88% rename from src/elements/input/input.shared.css rename to src/elements/form/input.shared.css index 6d24ffb..e97f6d0 100644 --- a/src/elements/input/input.shared.css +++ b/src/elements/form/input.shared.css @@ -1,7 +1,22 @@ -@import '../../shared/colors.css'; +/* Clickables */ -/* Various inputs use styling from button. */ -@import '../button.css'; +input[type='checkbox' i], +input[type='radio' i], +input[type='color' i], +input[type='submit' i], +input[type='button' i], +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] { + cursor: pointer; +} /* * These are default values and styles for checkbox and radio inputs, which diff --git a/src/elements/form/label.css b/src/elements/form/label.css new file mode 100644 index 0000000..a562dd5 --- /dev/null +++ b/src/elements/form/label.css @@ -0,0 +1,10 @@ +label { + user-select: none; + cursor: pointer; +} + +/* label > textarea, +label > input, +label > select { + margin-top: var(--spacing-form-element); +} */ diff --git a/src/elements/form/select.css b/src/elements/form/select.css new file mode 100644 index 0000000..284d8a4 --- /dev/null +++ b/src/elements/form/select.css @@ -0,0 +1,130 @@ +:root { + --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); +} + +select { + font-family: inherit; /* 1 */ + font-size: 1rem; /* 1 */ + line-height: var(--line-height); /* 1 */ + margin: 0; /* 2 */ +} + +/* Change the inconsistent appearance in IE (opinionated) */ + +select { + display: block; + width: 100%; +} + +select { + -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; +} + +select { + 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); +} + +select::placeholder, +select::-webkit-input-placeholder { + color: var(--muted-text); + opacity: 1; +} + +select:active, +select:focus { + border-color: var(--input-hover-border); + background-color: var(--input-hover-background); +} + +select[readonly], +select[disabled] { + border-color: var(--muted-border); + box-shadow: none; +} + +select[readonly] ~ label, +select[disabled] ~ label { + color: var(--muted-text); +} + +select[readonly]:active, +select[disabled]:active, +select[readonly]:focus, +select[disabled]:focus { + box-shadow: none; +} + +select[disabled]:not([type='reset']):not([type='submit']):not([type='button']) { + background-color: var(--muted-background); +} + +select[disabled] { + opacity: 0.66; +} + +select[aria-invalid] { + padding-right: 2rem; + background-position: center right 0.75rem; + background-repeat: no-repeat; + background-size: 1rem auto; +} + +select[aria-invalid='false'] { + background-image: var(--icon-valid); +} + +select[aria-invalid='true'] { + background-image: var(--icon-invalid); +} + +select { + margin-bottom: var(--spacing-typography); +} + +select: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; +} diff --git a/src/elements/index.css b/src/elements/index.css index e3a5281..ae8d42f 100644 --- a/src/elements/index.css +++ b/src/elements/index.css @@ -1,3 +1,9 @@ -@import './body.css'; @import './button.css'; -@import './input/index.css'; + +@import './form/label.css'; +@import './form/select.css'; + +@import './form/input.shared.css'; +@import './form/input-checkbox.css'; +@import './form/input-color.css'; +@import './form/input-radio.css'; diff --git a/src/elements/input/index.css b/src/elements/input/index.css deleted file mode 100644 index f38b79a..0000000 --- a/src/elements/input/index.css +++ /dev/null @@ -1,3 +0,0 @@ -@import './input-color.css'; -@import './input-radio.css'; -@import './input-checkbox.css'; diff --git a/src/elements/label.css b/src/elements/label.css deleted file mode 100644 index bd7b8ee..0000000 --- a/src/elements/label.css +++ /dev/null @@ -1,4 +0,0 @@ -label { - user-select: none; - cursor: pointer; -} diff --git a/src/extra/utils.css b/src/extra/utils.css deleted file mode 100644 index fe4ffc7..0000000 --- a/src/extra/utils.css +++ /dev/null @@ -1,7 +0,0 @@ -[inline] { - display: inline; -} - -[inline-block] { - display: inline-block; -} diff --git a/src/index.css b/src/index.css index bae52d2..fe79e79 100644 --- a/src/index.css +++ b/src/index.css @@ -1,2 +1,6 @@ -@import './clickables.css'; +@import './shared/variables.css'; +@import './shared/colors.css'; + +@import './utils/utils.css'; + @import './elements/index.css'; diff --git a/src/shared/variables.css b/src/shared/variables.css new file mode 100644 index 0000000..1e1fc06 --- /dev/null +++ b/src/shared/variables.css @@ -0,0 +1,9 @@ +/* Variables proposal */ + +:root { + /* General */ +} + +select { + /* specific to select like the arrows */ +} diff --git a/src/utils/utils.css b/src/utils/utils.css new file mode 100644 index 0000000..aa27052 --- /dev/null +++ b/src/utils/utils.css @@ -0,0 +1,12 @@ +[inline] { + display: inline; +} + +[inline-block] { + display: inline-block; +} + +/* Change the inconsistent appearance in IE (opinionated) */ +::-ms-expand { + display: none; +}