From 49d1cba3fd40688441fdba209eefdfbda1863e82 Mon Sep 17 00:00:00 2001
From: Philipp Kunz <gitlab@philkunz.com>
Date: Sat, 25 Mar 2023 20:56:12 +0100
Subject: [PATCH] fix(core): update

---
 ts_web/00_commitinfo_data.ts           |  2 +-
 ts_web/elements/dees-input-dropdown.ts | 25 ++++++++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index c706b0e..a182e1c 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.152',
+  version: '1.0.153',
   description: 'website for lossless.com'
 }
diff --git a/ts_web/elements/dees-input-dropdown.ts b/ts_web/elements/dees-input-dropdown.ts
index 38b672b..cc34212 100644
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@@ -77,12 +77,22 @@ export class DeesInputDropdown extends DeesElement {
           max-width: 420px;
           height: 40px;
           line-height: 40px;
-          border: 1px solid #CCC;
           padding: 0px 8px;
           z-index: 0px;
+          background: ${cssManager.bdTheme('#ffffff', '#333333')};
+          box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+          border-radius: 3px;
+          border-top: 1px solid #CCCCCC00;
+          border-bottom: 1px solid #66666600;
+        }
+
+        .selectedBox.show {
+          border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
+          border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
         }
 
         .selectionBox {
+          will-change:transform;
           pointer-events: none;
           cursor: pointer;
           transition: all 0.2s ease;
@@ -91,27 +101,31 @@ export class DeesInputDropdown extends DeesElement {
           background: ${cssManager.bdTheme('#ffffff', '#222222')};
           max-width: 420px;
           box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
-          height: 40px;
+          min-height: 40px;
           margin-top: -40px;
           z-index: 100;
           border-radius: 3px;
           padding: 4px;
+          transform: scale(0.99,0.99);
         }
 
         .selectionBox.show {
           pointer-events: all;
           opacity: 1;
-          min-height: 160px;
+          transform: scale(1,1);
         }
 
         .option {
+          transition: all 0.1s;
           line-height: 40px;
           padding: 0px 4px;
           border-radius: 3px;
         }
 
         .option:hover {
-          background: ${cssManager.bdTheme('#fafafa', '#444')};;
+          color: #fff;
+          padding-left: 8px;
+          background: #0277bd;
         }
     `
   ]
@@ -123,7 +137,7 @@ export class DeesInputDropdown extends DeesElement {
         
       </style>
       <div class="maincontainer">
-        <div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">
+        <div class="selectedBox show" @click="${event => {this.toggleSelectionBox();}}">
           ${this.selectedOption?.option}
         </div>
         <div class="selectionBox">
@@ -153,6 +167,7 @@ export class DeesInputDropdown extends DeesElement {
   }
 
   public toggleSelectionBox() {
+    this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
     this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
   }
 }