Merge pull request #225 from WhitestormJS/#195b

#195b

Author: sasha240100

examples/assets/css/style.css

@@ -12,7 +12,7 @@ body {
 a {
   text-decoration: none;
 }
-* {
+*:not(.icon) {
   font-family: 'Inconsolata', monospace !important;
 }
 /*
@@ -42,6 +42,7 @@ div.ui.sidebar.vertical.inverted.menu.left.overlay.visible {
   width: calc(100% - 270px);
   float: right;
   height: 100%;
+  position: relative;
 }
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
   #panel {
@@ -121,6 +122,15 @@ body {
   width: 100%;
   height: 100%;
 }
+#sidebar {
+  background: #fafafa;
+}
+#sidebar #top-nav {
+  background: #262C38;
+}
+#sidebar #path {
+  padding: 16px;
+}
 #sidebar.slideout-menu {
   position: fixed;
   top: 0;
@@ -138,6 +148,11 @@ body {
 #sidebar.slideout-menu-right {
   right: 0;
 }
+#sidebar input[type='text'] {
+  border-radius: 0;
+  background: #fafafa;
+  border: none;
+}
 .slideout-open #sidebar.slideout-menu {
   display: block;
 }

examples/assets/css/vendor.css

@@ -11188,8 +11188,7 @@ a.ui.inverted.grey.header:hover {
 *******************************/
 @font-face {
   font-family: 'Icons';
-  src: url("../../themes/default/assets/fonts/icons.eot");
-  src: url("../../themes/default/assets/fonts/icons.eot?#iefix") format('embedded-opentype'), url("../../themes/default/assets/fonts/icons.woff2") format('woff2'), url("../../themes/default/assets/fonts/icons.woff") format('woff'), url("../../themes/default/assets/fonts/icons.ttf") format('truetype'), url("../../themes/default/assets/fonts/icons.svg#icons") format('svg');
+  src: url('/assets/fonts/icons.ttf');
   font-style: normal;
   font-weight: normal;
   font-variant: normal;

examples/assets/fonts/icons.eot

@@ -15,3 +15,26 @@ if (isMobile) {
     tolerance: 70
   });
 }
+
+// Filter
+
+const filter = document.getElementById('filter');
+const items = document.querySelectorAll('#sidebar .item .minor');
+const categories = document.querySelectorAll('#sidebar .item.category');
+
+filter.addEventListener('keyup', function (e) {
+  items.forEach(item => {
+    if (
+      item.innerText.indexOf(e.target.value) > -1
+      || e.target.value === ''
+    ) item.style.display = 'block';
+    else item.style.display = 'none';
+  });
+
+  categories.forEach(function (cat) {
+    const isHidden = [].slice.call(cat.querySelectorAll('.minor')).every(item => item.style.display === 'none');
+
+    if (isHidden) cat.style.display = 'none';
+    else cat.style.display = 'block';
+  });
+});

examples/assets/fonts/icons.svg

@@ -25,8 +25,8 @@
 
 @font-face {
   font-family: 'Icons';
-  src: @fallbackSRC;
-  src: @src;
+  src: url('/assets/fonts/icons.ttf');
+  src: url('/assets/fonts/icons.ttf');
   font-style: normal;
   font-weight: normal;
   font-variant: normal;

examples/assets/fonts/icons.ttf

@@ -14,7 +14,7 @@ a {
   text-decoration: none;
 }
 
-* {
+*:not(.icon) {
   font-family: 'Inconsolata', monospace !important;
 }
 
@@ -50,6 +50,7 @@ div.ui.sidebar.vertical.inverted.menu.left.overlay.visible {
   width: calc(~"100% - 270px");
   float: right;
   height: 100%;
+  position: relative;
 
   @media only screen
     and (min-device-width: 320px)
@@ -154,6 +155,16 @@ body {
 }
 
 #sidebar {
+  background: #fafafa;
+
+  #top-nav {
+    background: #262C38;
+  }
+
+  #path {
+    padding: 16px;
+  }
+
   &.slideout-menu {
     position: fixed;
     top: 0;
@@ -173,6 +184,12 @@ body {
   &.slideout-menu-right {
     right: 0;
   }
+
+  input[type='text'] {
+    border-radius: 0;
+    background: #fafafa;
+    border: none;
+  }
 }
 
 .slideout-open #sidebar.slideout-menu {