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' }
]
};