Fix searchtools styling

Author: C-Lodder

Gulpfile.js

@@ -50,6 +50,7 @@ gulp.task('sass-vendor', async() => {
 		'./scss/joomla/switcher.scss' : './css/system/fields',
 		'./scss/joomla/calendar.scss' : './css/system/fields',
 		'./scss/joomla/installer.scss' : './css/com_installer',
+		'./scss/joomla/searchtools.scss' : './css/system/searchtools',
 		'./scss/vendor/minicolors.scss' : './css/vendor/minicolors',
 		'./scss/vendor/choices.scss' : './css/vendor/choicesjs',
 		'./scss/vendor/dragula.scss' : './css/vendor/dragula',

css/system/searchtools/searchtools.css

@@ -16,6 +16,11 @@
       "name": "switcher",
       "type": "style",
       "uri": "system/fields/switcher.min.css"
+    },
+	{
+      "name": "searchtools",
+      "type": "style",
+      "uri": "system/searchtools/searchtools.min.css"
     }
   ]
 }

joomla.asset.json

@@ -0,0 +1,154 @@
+// Bootstrap core
+@import "../../../../../media/vendor/bootstrap/scss/functions";
+@import "../../../../../media/vendor/bootstrap/scss/variables";
+@import "../vendor/bootstrap/mixins";
+
+// Bettum Variables and Mixins
+@import "../mixins";
+@import "../variables";
+
+
+@media (max-width: 480px) {
+  .js-stools .js-stools-container-filters {
+    display: block;
+  }
+  .js-stools .js-stools-container-filters .btn-group {
+    display: block;
+  }
+  .js-stools .js-stools-container-filters .btn-wrapper {
+    width: 100%
+  }
+  .js-stools .js-stools-container-bar {
+    margin-top: 20px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+  .js-stools .js-stools-container-selector,
+  .js-stools .js-stools-container-bar,
+  .js-stools .js-stools-container-list {
+    display: block;
+  }
+}
+
+.js-stools {
+  position: relative;
+  width: 100%;
+  padding: .25rem 0 0;
+  margin-bottom: .5rem;
+
+  > div {
+    margin-bottom: .5rem;
+  }
+
+  .js-stools-container-filters {
+    display: none;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: .5rem;
+    margin-bottom: 1rem;
+    width: 100%;
+
+    &.js-filters-show {
+      display: flex;
+    }
+
+    .chzn-container-single {
+      display: block;
+
+      .chzn-single {
+        display: block;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  .js-stools-field-filter {
+    margin-right: .5rem;
+    margin-bottom: .5rem;
+
+    @include media-breakpoint-down(sm) {
+      width: 100%;
+    }
+  }
+
+  .js-stools-container-selector {
+    float: left;
+    margin-right: .5rem;
+  }
+
+  .js-stools-container-selector-first {
+    margin-right: .5rem;
+  }
+
+  .js-stools-container-selector,
+  .js-stools-container-selector-first {
+
+    @include media-breakpoint-down(sm) {
+      float: none !important;
+      width: 100%;
+      margin-right: 0;
+    }
+
+    .js-stools-field-selector {
+      @include media-breakpoint-down(sm) {
+        max-width: 100%;
+        margin-right: 0;
+      }
+    }
+  }
+
+  .js-stools-container-list {
+    float: right;
+    text-align: right;
+  }
+  .js-stools-container-filters-visible {
+    display: flex;
+  }
+
+  .chzn-container-single .chzn-single span {
+    overflow: visible;
+  }
+
+  .js-stools-field-list,
+  .js-stools-field-filter {
+    display: inline-block;
+  }
+
+  .js-stools-container-list .js-stools-field-list:last-child {
+    margin-right: 0;
+  }
+
+  .js-stools-container-bar {
+
+    .btn-toolbar {
+      justify-content: flex-end;
+
+      .js-stools-btn-filter {
+        border: 1px solid $border-color;
+      }
+
+      .js-stools-btn-filter {
+        border-right: 1px solid $border-color;
+
+        .fa {
+          margin-left: .25rem;
+        }
+      }
+    }
+
+    .js-stools-field-list {
+      margin-bottom: 0;
+
+      .custom-select {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.js-stools-button-sort {
+  cursor: pointer;
+  background: none;
+  border: 0;
+}