Playground: add url format example and pdate css

Author: bhch

docs/src/demos.js

@@ -347,7 +347,14 @@ const DEMOS = [
                 email: {type: 'string', format: 'email'},
                 password: {type: 'string', format: 'password'},
                 colour: {type: 'string', format: 'color'},
+                url: {type: 'string', format: 'uri', 'title': 'URL'},
             }
+        },
+        data: {
+            'email': 'john@example.com',
+            'password': 'correcthorsebatterystaple',
+            'colour': '#ffff00',
+            'url': 'http://example.com'
         }
     },
 

docs/static/css/docs.css

@@ -742,36 +742,31 @@ button.rjf-collapse-button {
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.rjf-autocomplete-field {
+.rjf-autocomplete-field,
+.rjf-url-fild {
     position: relative;
 }
 .rjf-autocomplete-field-input {
     cursor: pointer;
     padding-right: 40px !important;
     background-color: #fff !important;
 }
-.rjf-autocomplete-field-clear-button {
+.rjf-autocomplete-field-clear-button,
+.rjf-url-field-link {
     position: absolute;
     right: 6px;
-    top: 5px;
+    top: 2px;
     line-height: 1;
     padding: 1px 2px;
     background: transparent;
-    color: var(--link-fg);
     border: 0;
     z-index: 10;
     cursor: pointer;
 }
 .rjf-autocomplete-field.has-label .rjf-autocomplete-field-clear-button {
-    top: 5px;
-}
-.rjf-autocomplete-field-clear-button:hover {
-    background-color: #eee;
-    color: var(--link-hover-color);
-}
-.rjf-autocomplete-field-clear-button > .rjf-icon {
-    display: none;
+    top: 2px;
 }
+.rjf-autocomplete-field-clear-button > .rjf-icon,
 .rjf-autocomplete-field-clear-button > span {
     vertical-align: middle;
 }
@@ -841,6 +836,10 @@ button.rjf-collapse-button {
 .rjf-autocomplete-field-option.disabled:focus {
     background-color: transparent;
 }
+.rjf-url-field .rjf-url-field-link,
+.rjf-url-field.has-label .rjf-url-field-link {
+    top: 12px;
+}
 .rjf-loader {
     width: 32px;
     height: 32px;