diff --git a/demo/index.html b/demo/index.html
index 0c59f6ef..9ed6312e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -8,8 +8,10 @@
diff --git a/demo/main.css b/demo/main.css
index 888fc739..604abefb 100644
--- a/demo/main.css
+++ b/demo/main.css
@@ -19,21 +19,55 @@ nav header {
float: left;
margin-left: 20px;
font-size: 25px;
- color: white;
- position: absolute;
+ color: #00329F;
+ font-weight: bold;
}
+
nav input {
width: 50%;
box-sizing: border-box;
max-width: 500px;
+
+ color: #555;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+ -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
+ -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+ transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+nav input:focus {
+ border-color: #66afe9;
+ outline: 0;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
nav button {
- border: 1px solid #FFFFFF;
- cursor: pointer;
- color: white;
- background-color: #21476D;
+ background-color: #fff;
+ color: #333;
padding: 2px 10px;
+
+ touch-action: manipulation;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+nav button:hover {
+ background-color: #e6e6e6;
+ border-color: #adadad;
+}
+nav button:active {
+ background-color: #d4d4d4;
+ border-color: #8c8c8c;
}
nav {
@@ -41,8 +75,24 @@ nav {
height: 50px;
line-height: 50px;
text-align: center;
- background-color: #053361;
+ background-color: white;
+ border-bottom: 1px solid #ccc;
position: fixed;
top: 0;
z-index: 1;
}
+
+@media (min-width: 1000px) {
+ nav header {
+ position: absolute;
+ }
+}
+
+@media (max-width: 500px) {
+ nav input {
+ width: 70%;
+ }
+ nav header {
+ display: none;
+ }
+}
diff --git a/demo/main.js b/demo/main.js
index 70529977..0a828e08 100644
--- a/demo/main.js
+++ b/demo/main.js
@@ -1,9 +1,10 @@
;(function() {
'use strict';
- var loadButton = document.getElementById('load-button');
+ var schemaUrlForm = document.getElementById('schema-url-form');
var schemaUrlInput = document.getElementById('schema-url-input');
- loadButton.addEventListener('click', function() {
+ schemaUrlForm.addEventListener('submit', function(event) {
Redoc.init(schemaUrlInput.value);
+ event.preventDefault();
})
})();