Update demo styling for vaadin.com integration [skip ci]

vaadin · Oct 8, 2018 · d27006b · d27006b
1 parent c1a5b0e
commit d27006b
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/demo/icons-basic-demos.html b/demo/icons-basic-demos.html
@@ -1,6 +1,6 @@
 <dom-module id="icons-basic-demos">
   <template>
-    <style>
+    <style include="vaadin-component-demo-shared-styles">
       :host {
         display: block;
       }
@@ -12,16 +12,35 @@
 
       .iconset-container {
         margin-top: 1em;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
       }
 
       .icon-container {
-        margin: 24px 8px;
+        margin: 18px 0;
+        padding: 0 5px;
         text-align: center;
-        width: 130px;
+        width: 19.3%;
         display: inline-block;
         cursor: default;
         vertical-align: top;
+        box-sizing: border-box;
+      }
+
+      @media (max-width: 1024px) {
+        .icon-container {
+          width: 24%;
+        }
+      }
+
+      @media (max-width: 560px) {
+        .icon-container {
+          width: 32%;
+        }
+      }
+
+      @media (max-width: 420px) {
+        .icon-container {
+          width: 49%;
+        }
       }
 
       .icon-container span {
@@ -41,22 +60,37 @@
         display: inline-block;
         fill: #616161;
         transition: all 200ms;
+        width: 30px;
+        height: 30px;
       }
 
       .icon-container:hover iron-icon {
         fill: #00b4f0;
       }
+
+      .search {
+        width: 100%;
+        height: 42px;
+      }
+
+      .search iron-icon {
+        padding: 4px;
+        margin-left: 5px;
+        box-sizing: border-box;
+      }
     </style>
 
     <h3>Simple Usage</h3>
-    <vaadin-demo-snippet id='icons-basic-demos-simple-usage'>
+    <vaadin-demo-snippet id="icons-basic-demos-simple-usage">
       <template preserve-content>
         <iron-icon icon="vaadin:vaadin-h"></iron-icon>
       </template>
     </vaadin-demo-snippet>
 
     <h3>All Icons</h3>
-    <vaadin-text-field value="{{search}}" label="Filter" placeholder="Icon Name"></vaadin-text-field>
+    <vaadin-text-field class="search" value="{{search}}" placeholder="Search for an icon">
+      <iron-icon icon="vc-icons:search" slot="prefix"></iron-icon>
+    </vaadin-text-field>
     <div class="iconset-container">
       <dom-repeat items="[[iconsets]]">
         <template>

diff --git a/demo/index.html b/demo/index.html
@@ -20,6 +20,17 @@
   <custom-style>
     <style include="vaadin-component-demo-shared-styles"></style>
   </custom-style>
+
+  <iron-iconset-svg name="vc-icons">
+    <svg>
+      <defs>
+        <g id="search" stroke="currentColor" viewBox="0 0 32 32">
+          <circle cx="14.16" cy="13.41" r="11.5" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
+          <line x1="29.25" y1="29.93" x2="21.65" y2="22.33" fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3"/>
+        </g>
+      </defs>
+    </svg>
+  </iron-iconset-svg>
 </head>
 
 <body>