From 2d3aa14ccb4deae3d14bcdb9acdcc8bbfb7972ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CVeLiTi=E2=80=9D?= <“info@veliti.nl”>
Date: Tue, 19 Mar 2024 12:05:19 +0100
Subject: [PATCH] Stylesheet changes for sort function

---
 equipments.php  |  2 +-
 style/admin.css | 64 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/equipments.php b/equipments.php
index 1a01238..02ec47c 100644
--- a/equipments.php
+++ b/equipments.php
@@ -108,7 +108,7 @@ $view .= '
                 <button type="submit">'.$button_apply.'</button>
             </div>
         </div>
-        <div class="filters">
+        <div class="sort">
             <a href="#">'.$general_sort.'</a>
             <div class="list">
             <select name="sort">
diff --git a/style/admin.css b/style/admin.css
index b28c601..b189286 100644
--- a/style/admin.css
+++ b/style/admin.css
@@ -449,6 +449,70 @@ main .content-header .filters .list button:hover {
   background: #4672a9;
 }
 
+
+main .content-header .sort {
+  display: flex;
+  position: relative;
+  margin-right: 10px;
+  margin-bottom: 3px;
+  align-items: center;
+}
+
+main .content-header .sort a {
+  text-decoration: none;
+  font-weight: 600;
+  color: #4a5361;
+  white-space: nowrap;
+}
+
+main .content-header .sort a:hover {
+  color: #343a44;
+}
+
+main .content-header .sort .list {
+  display: none;
+  top: calc(100% + 5px);
+  width: 180px;
+  flex-flow: column;
+  position: absolute;
+  background-color: #fff;
+  padding: 10px;
+  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
+}
+
+main .content-header .sort .list label {
+  padding-bottom: 5px;
+  font-size: 14px;
+}
+
+main .content-header .sort .list input {
+  margin-right: 10px;
+}
+
+main .content-header .sort .list select {
+  width: 100%;
+  margin-bottom: 10px;
+  font-size: 14px;
+  padding: 3px;
+  border: 1px solid #dedfe1;
+}
+
+main .content-header .sort .list button {
+  background: #4a79b4;
+  border: 0;
+  color: #FFFFFF;
+  padding: 5px 0;
+  font-size: 12px;
+  font-weight: 600;
+  margin-top: 5px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+main .content-header .sort .list button:hover {
+  background: #4672a9;
+}
+
 main .content-block {
   background-color: #fff;
   margin-top: 25px;