@design.estate/dees-catalog 1.0.254 → 1.0.256

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.254",
+  "version": "1.0.256",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.254',
+  version: '1.0.256',
   description: 'website for lossless.com'
 }

package/ts_web/elements/dees-table.ts

@@ -169,9 +169,9 @@ export class DeesTable<T> extends DeesElement {
         display: block;
         width: 100%;
         min-height: 50px;
-        background: ${cssManager.bdTheme('#ffffff', '#333333')};
+        background: ${cssManager.bdTheme('#ffffff', '#222222')};
         border-radius: 3px;
-        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
         overflow-x: auto;
         cursor: default;
@@ -199,7 +199,7 @@ export class DeesTable<T> extends DeesElement {
 
       .headingSeparation {
         margin-top: 7px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#444444')};
       }
 
       .headerActions {
@@ -219,9 +219,13 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .searchGrid {
+        background: ${cssManager.bdTheme('#fff', '#111111')};
         display: grid;
         grid-gap: 16px;
         grid-template-columns: 1fr 200px;
+        margin: 0px -16px;
+        padding: 0px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
       }
 
       table,
@@ -311,10 +315,12 @@ export class DeesTable<T> extends DeesElement {
         font-weight: inherit;
         padding: 0px 6px;
       }
-      .actionContainer {
+      .actionsContainer {
+        display: flex;
+        flex-direction: row;
         height: 24px;
-        display: inline-block;
         transform: translateY(-4px);
+        margin-left: -6px;
       }
       .action {
         position: relative;
@@ -325,11 +331,6 @@ export class DeesTable<T> extends DeesElement {
         border-radius: 8px;
       }
 
-      .actionContainer:first-child {
-        margin-left: -6px;
-        width: min-content;
-      }
-
       .action:hover {
         background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
       }
@@ -570,24 +571,28 @@ export class DeesTable<T> extends DeesElement {
                             return html`
                               <td>
                                 <div class="innerCellContainer">
-                                  ${this.getActionsForType('inRow').map(
-                                    (actionArg) => html`<div class="actionContainer">
-                                      <div
-                                        class="action"
-                                        @click=${() =>
-                                          actionArg.actionFunc({
-                                            item: itemArg,
-                                            table: this,
-                                          })}
-                                      >
-                                        ${actionArg.iconName
-                                          ? html`
-                                              <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
-                                            `
-                                          : actionArg.name}
-                                      </div>
-                                    </div>`
-                                  )}
+                                  <div class="actionsContainer">
+                                    ${this.getActionsForType('inRow').map(
+                                      (actionArg) => html`
+                                        <div
+                                          class="action"
+                                          @click=${() =>
+                                            actionArg.actionFunc({
+                                              item: itemArg,
+                                              table: this,
+                                            })}
+                                        >
+                                          ${actionArg.iconName
+                                            ? html`
+                                                <dees-icon
+                                                  .iconFA=${actionArg.iconName}
+                                                ></dees-icon>
+                                              `
+                                            : actionArg.name}
+                                        </div>
+                                      `
+                                    )}
+                                  </div>
                                 </div>
                               </td>
                             `;