diff --git a/package.json b/package.json index 4c67b8f..f0c0185 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,10 @@ "dist/" ], "scripts": { - "build": "stencil build --docs && npm run copy-assets", - "start": "stencil build --dev --watch --serve && npm run copy-assets", + "build": "stencil build --docs", + "start": "stencil build --dev --watch --serve", "test": "stencil test --spec --e2e", - "test.watch": "stencil test --spec --e2e --watchAll", - "copy-assets": "cp -r src/assets/ www/ && cp src/style.css www/ && cp src/*.html www/" + "test.watch": "stencil test --spec --e2e --watchAll" }, "dependencies": {}, "devDependencies": { diff --git a/src/components/combo-autocomplete/combo-autocomplete.tsx b/src/components/combo-autocomplete/combo-autocomplete.tsx index 476262c..d4f618d 100644 --- a/src/components/combo-autocomplete/combo-autocomplete.tsx +++ b/src/components/combo-autocomplete/combo-autocomplete.tsx @@ -170,6 +170,7 @@ export class ComboAutocomplete { case MenuActions.CloseSelect: this.selectOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Open: return this.updateMenuState(true); diff --git a/src/components/combo-autoselect/combo-autoselect.tsx b/src/components/combo-autoselect/combo-autoselect.tsx index e626654..c8375f9 100644 --- a/src/components/combo-autoselect/combo-autoselect.tsx +++ b/src/components/combo-autoselect/combo-autoselect.tsx @@ -159,9 +159,11 @@ export class ComboAutoselect { event.preventDefault(); return this.onOptionChange(getUpdatedIndex(this.activeIndex, max, action)); case MenuActions.CloseSelect: + event.preventDefault(); this.selectOption(this.activeIndex); return this.updateMenuState(false); case MenuActions.Close: + event.preventDefault(); this.activeIndex = 0; this.value = this.selectedValue; this.filteredOptions = this.options; diff --git a/src/components/combo-filter/combo-filter.tsx b/src/components/combo-filter/combo-filter.tsx index b180375..af8a3aa 100644 --- a/src/components/combo-filter/combo-filter.tsx +++ b/src/components/combo-filter/combo-filter.tsx @@ -156,6 +156,7 @@ export class ComboFilter { case MenuActions.CloseSelect: this.selectOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Open: return this.updateMenuState(true); diff --git a/src/components/combo-native/combo-native.tsx b/src/components/combo-native/combo-native.tsx index 72f0e0a..fb74c3c 100644 --- a/src/components/combo-native/combo-native.tsx +++ b/src/components/combo-native/combo-native.tsx @@ -55,14 +55,16 @@ export class ComboNative { return ([ , - +
+ +
]); } } \ No newline at end of file diff --git a/src/components/combo-nofilter/combo-nofilter.tsx b/src/components/combo-nofilter/combo-nofilter.tsx index 80d0a1e..bdd59e7 100644 --- a/src/components/combo-nofilter/combo-nofilter.tsx +++ b/src/components/combo-nofilter/combo-nofilter.tsx @@ -143,6 +143,7 @@ export class ComboNoFilter { case MenuActions.CloseSelect: this.selectOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Open: return this.updateMenuState(true); diff --git a/src/components/combo-noinput/combo-noinput.tsx b/src/components/combo-noinput/combo-noinput.tsx index d7d1bd0..f11391f 100644 --- a/src/components/combo-noinput/combo-noinput.tsx +++ b/src/components/combo-noinput/combo-noinput.tsx @@ -116,6 +116,7 @@ export class ComboNoInput { case MenuActions.CloseSelect: this.selectOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Type: this.activeIndex = Math.max(0, getIndexByLetter(this.options, key)); diff --git a/src/components/combo-readonly/combo-readonly.tsx b/src/components/combo-readonly/combo-readonly.tsx index db1cc94..ccb6543 100644 --- a/src/components/combo-readonly/combo-readonly.tsx +++ b/src/components/combo-readonly/combo-readonly.tsx @@ -128,6 +128,7 @@ export class ComboReadonly { case MenuActions.CloseSelect: this.selectOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Type: this.activeIndex = Math.max(0, getIndexByLetter(this.options, key)); diff --git a/src/components/listbox-button/listbox-button.tsx b/src/components/listbox-button/listbox-button.tsx index a737a1f..b94eab7 100644 --- a/src/components/listbox-button/listbox-button.tsx +++ b/src/components/listbox-button/listbox-button.tsx @@ -164,6 +164,7 @@ export class ListboxButton { case MenuActions.CloseSelect: this.selectOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Type: this.activeIndex = Math.max(0, getIndexByLetter(this.options, key)); diff --git a/src/components/multiselect-buttons/multiselect-buttons.tsx b/src/components/multiselect-buttons/multiselect-buttons.tsx index ff74887..b003624 100644 --- a/src/components/multiselect-buttons/multiselect-buttons.tsx +++ b/src/components/multiselect-buttons/multiselect-buttons.tsx @@ -180,8 +180,10 @@ export class MultiselectButtons { event.preventDefault(); return this.onOptionChange(getUpdatedIndex(this.activeIndex, max, action)); case MenuActions.CloseSelect: + event.preventDefault(); return this.updateOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Open: return this.updateMenuState(true); diff --git a/src/components/multiselect-csv/multiselect-csv.tsx b/src/components/multiselect-csv/multiselect-csv.tsx index 9050813..5a63ef7 100644 --- a/src/components/multiselect-csv/multiselect-csv.tsx +++ b/src/components/multiselect-csv/multiselect-csv.tsx @@ -167,8 +167,10 @@ export class MultiselectCSV { event.preventDefault(); return this.onOptionChange(getUpdatedIndex(this.activeIndex, max, action)); case MenuActions.CloseSelect: + event.preventDefault(); return this.updateOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Open: return this.updateMenuState(true); diff --git a/src/components/multiselect-inline/multiselect-inline.tsx b/src/components/multiselect-inline/multiselect-inline.tsx index 0f4d125..529a8ef 100644 --- a/src/components/multiselect-inline/multiselect-inline.tsx +++ b/src/components/multiselect-inline/multiselect-inline.tsx @@ -186,8 +186,10 @@ export class MultiselectInline { event.preventDefault(); return this.onOptionChange(getUpdatedIndex(this.activeIndex, max, action)); case MenuActions.CloseSelect: + event.preventDefault(); return this.updateOption(this.activeIndex); case MenuActions.Close: + event.preventDefault(); return this.updateMenuState(false); case MenuActions.Open: return this.updateMenuState(true); diff --git a/src/pizza.html b/src/pizza.html deleted file mode 100644 index 56c4317..0000000 --- a/src/pizza.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - Order Pizza - - - - -
-

Find a Pizza Store

- -
- - - - -
-
- - - - - diff --git a/src/shared/combo-base.css b/src/shared/combo-base.css index 7c49246..508024b 100644 --- a/src/shared/combo-base.css +++ b/src/shared/combo-base.css @@ -22,8 +22,8 @@ body { } .combo::after { - border-bottom: 1px solid rgba(0,0,0,.42); - border-right: 1px solid rgba(0,0,0,.42); + border-bottom: 2px solid rgba(0,0,0,.5); + border-right: 2px solid rgba(0,0,0,.5); content: ''; display: block; height: 12px; @@ -37,7 +37,7 @@ body { .combo-input { background-color: #f5f5f5; - border: 1px solid rgba(0,0,0,.42); + border: 2px solid rgba(0,0,0,.5); border-radius: 4px; display: block; min-height: calc(1.4em + 26px); @@ -46,6 +46,12 @@ body { width: 100%; } +select.combo-input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + .open .combo-input { border-radius: 4px 4px 0 0; } diff --git a/src/style.css b/src/style.css index 0de3aef..162a4aa 100644 --- a/src/style.css +++ b/src/style.css @@ -8,6 +8,7 @@ } body { + background-color: #f5f5f5; font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.4em; @@ -16,7 +17,8 @@ body { } .example-form { - border: 1px solid #ccc; + background-color: #fff; + border: 1px solid rgba(0,0,0,.5); border-radius: 5px; max-width: 460px; margin: 100px auto; @@ -26,17 +28,30 @@ body { .example-form h1 { font-size: 2rem; line-height: 1.1; + margin: 0 0 1em; } -input[type=text] { - background-color: #f5f5f5; - border: 1px solid rgba(0,0,0,.42); +.example-form label { + font-weight: bold; + margin-top: 1em; +} + +.example-form button[type=submit] { + background-color: #0067b8; + border: 1px solid #fff; border-radius: 4px; - display: block; - min-height: calc(1.4em + 26px); - padding: 12px 16px 14px; - text-align: left; - width: 100%; + color: #fff; + display: inline-block; + font-size: 1.1rem; + font-weight: bold; + margin-top: 1.5em; + padding: 0.5em 0.75em; + text-transform: uppercase; +} + +.example-form button[type=submit]:focus { + box-shadow: 0 0 6px 2px #0067b8; + outline: 4px solid transparent; } .form-input { diff --git a/src/travel.html b/src/travel.html deleted file mode 100644 index ddbe77c..0000000 --- a/src/travel.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - Travel profile form - - - - -
-

Create your travel profile

- -
- - - - - - - - -
-
- - - - - diff --git a/stencil.config.ts b/stencil.config.ts index 9d9fb91..9e76886 100644 --- a/stencil.config.ts +++ b/stencil.config.ts @@ -9,5 +9,10 @@ export const config: Config = { type: 'www', serviceWorker: null // disable service workers } + ], + copy: [ + { src: 'assets' }, + { src: 'studies' }, + { src: 'style.css' } ] };