Search progress

src/sass/general.scss

@@ -10,7 +10,7 @@
     @include center-panel($error_red);
 }
 
-.search-panel > form {
+.search-bar > form {
     @include center-panel($darkest-grey);
 
     button {
@@ -35,3 +35,106 @@
         margin-right: 8px;
     }
 }
+
+.search-field {
+    margin: 2px 5px;
+
+    .pref-group.pref-input {
+        display: inline-block;
+        width: calc(90% - 11px);
+    }
+
+    input[type="text"] {
+        width: calc(100% - 8px);
+    }
+
+    .panel-label {
+        background-color: #121212;
+        color: #F8F8F2;
+        border: 1px solid #FF6C6091;
+        padding: 1px 6px 2px 6px;
+        font-size: 14px;
+        cursor: pointer;
+        margin-left: -2px;
+    }
+
+    .panel-label:hover {
+        border: 1px solid #FF6C60;
+    }
+}
+
+
+#panel-toggle {
+    display: none;
+
+    &:checked ~ .search-panel {
+        max-height: 180px;
+    }
+}
+
+.pannel-label {
+    display: inline;
+}
+
+.search-panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s;
+
+    margin: 5px;
+    font-weight: initial;
+    text-align: left;
+
+    > div {
+        line-height: 1.7em;
+    }
+
+    .checkbox-container {
+        display: inline;
+        padding-right: unset;
+        margin-left: 23px;
+    }
+
+    .checkbox {
+        right: unset;
+        left: -22px;
+    }
+
+    .checkbox-container .checkbox:after {
+        top: -4px;
+    }
+
+    .search-title {
+        font-weight: bold;
+        min-width: 60px;
+        display: inline-block;
+    }
+
+    .exclude-extras {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.4s;
+    }
+
+    #exclude-toggle {
+        display: none;
+
+        &:checked ~ .exclude-extras {
+            max-height: 50px;
+        }
+    }
+
+    .filter-extras {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.4s;
+    }
+
+    #filter-toggle {
+        display: none;
+
+        &:checked ~ .filter-extras {
+            max-height: 50px;
+        }
+    }
+}

src/sass/inputs.scss

@@ -88,6 +88,10 @@ input[type="text"] {
     }
 }
 
+.pref-group {
+    display: inline;
+}
+
 .preferences {
     button {
         margin: 6px 0 3px 0;
@@ -103,6 +107,10 @@ input[type="text"] {
         max-width: 120px;
     }
 
+    .pref-group {
+        display: block;
+    }
+
     .pref-input {
         position: relative;
         margin-bottom: 6px;