- added CSS parts for more style flexibility;

- refresh custom-elements.json
ssleptsov · Oct 28, 2021 · 620f40f · 620f40f
1 parent 4dd7c71
commit 620f40f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 32 deletions.
diff --git a/custom-elements.json b/custom-elements.json
@@ -9,7 +9,7 @@
         {
           "kind": "variable",
           "name": "baseStyles",
-          "default": "css`\n  :host {\n    --ninja-width: 640px;\n    --ninja-backdrop-filter: saturate(180%) blur(2px);\n    --ninja-overflow-background: rgba(255, 255, 255, 0.5);\n    --ninja-text-color: rgb(60, 65, 73);\n    --ninja-font-size: 16px;\n    --ninja-top: 20%;\n\n    --ninja-key-border-radius: 0.25em;\n    --ninja-accent-color: rgb(110, 94, 210);\n    --ninja-secondary-background-color: rgb(239, 241, 244);\n    --ninja-secondary-text-color: rgb(107, 111, 118);\n\n    --ninja-selected-background: rgb(248, 249, 251);\n\n    --ninja-icon-color: var(--ninja-secondary-text-color);\n    --ninja-icon-size: 1.2em;\n    --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);\n\n    --ninja-modal-background: #fff;\n    --ninja-modal-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;\n\n    --ninja-actions-height: 300px;\n    --ninja-group-text-color: rgb(144, 149, 157);\n\n    --ninja-footer-background: rgba(242, 242, 242, 0.4);\n\n    font-size: var(--ninja-font-size);\n  }\n\n  :host(.dark) {\n    --ninja-backdrop-filter: saturate(180%) blur(2px);\n    --ninja-overflow-background: rgba(0, 0, 0, 0.7);\n    --ninja-text-color: #7d7d7d;\n\n    --ninja-modal-background: rgba(17, 17, 17, 0.85);\n    --ninja-accent-color: rgb(110, 94, 210);\n    --ninja-secondary-background-color: rgba(51, 51, 51, 0.44);\n    --ninja-secondary-text-color: #888;\n\n    --ninja-selected-text-color: #eaeaea;\n    --ninja-selected-background: rgba(51, 51, 51, 0.44);\n\n    --ninja-icon-color: var(--ninja-secondary-text-color);\n    --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);\n\n    --ninja-modal-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);\n\n    --ninja-group-text-color: rgb(144, 149, 157);\n\n    --ninja-footer-background: rgba(30, 30, 30, 85%);\n  }\n\n  .modal {\n    display: none;\n    position: fixed;\n    z-index: 1;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    background: var(--ninja-overflow-background);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    backdrop-filter: var(--ninja-backdrop-filter);\n    text-align: left;\n    color: var(--ninja-text-color);\n    font-family: var(--ninja-font-family);\n  }\n  .modal.visible {\n    display: block;\n  }\n\n  .modal-content {\n    position: relative;\n    top: var(--ninja-top);\n    margin: auto;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 1;\n    -webkit-box-flex: 1;\n    flex-grow: 1;\n    min-width: 0px;\n    will-change: transform;\n    background: var(--ninja-modal-background);\n    border-radius: 0.5em;\n    box-shadow: var(--ninja-modal-shadow);\n    max-width: var(--ninja-width);\n    overflow: hidden;\n  }\n\n  .bump {\n    animation: zoom-in-zoom-out 0.2s ease;\n  }\n\n  @keyframes zoom-in-zoom-out {\n    0% {\n      transform: scale(0.99);\n    }\n    50% {\n      transform: scale(1.01, 1.01);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  }\n\n  .ninja-github {\n    color: var(--ninja-keys-text-color);\n    font-weight: normal;\n    text-decoration: none;\n  }\n\n  .actions-list {\n    max-height: var(--ninja-actions-height);\n    overflow: auto;\n    scroll-behavior: smooth;\n    position: relative;\n    margin: 0;\n    padding: 0.5em 0;\n    list-style: none;\n    scroll-behavior: smooth;\n  }\n\n  .group-header {\n    height: 1.375em;\n    line-height: 1.375em;\n    padding-left: 1.25em;\n    padding-top: 0.5em;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    font-size: 0.75em;\n    line-height: 1em;\n    color: var(--ninja-group-text-color);\n    margin: 1px 0;\n  }\n\n  .modal-footer {\n    background: var(--ninja-footer-background);\n    padding: 0.5em 1em;\n    display: flex;\n    /* font-size: 0.75em; */\n    border-top: var(--ninja-separate-border);\n    color: var(--ninja-secondary-text-color);\n  }\n\n  .modal-footer .help {\n    display: flex;\n    margin-right: 1em;\n    align-items: center;\n    font-size: 0.75em;\n  }\n\n  .ninja-examplekey {\n    background: var(--ninja-secondary-background-color);\n    padding: 0.06em 0.25em;\n    border-radius: var(--ninja-key-border-radius);\n    color: var(--ninja-secondary-text-color);\n    width: 1em;\n    height: 1em;\n    margin-right: 0.5em;\n    font-size: 1.25em;\n    fill: currentColor;\n  }\n  .ninja-examplekey.esc {\n    width: auto;\n    height: auto;\n    font-size: 1.1em;\n  }\n  .ninja-examplekey.backspace {\n    opacity: 0.7;\n  }\n`"
+          "default": "css`\n  :host {\n    --ninja-width: 640px;\n    --ninja-backdrop-filter: none;\n    --ninja-overflow-background: rgba(255, 255, 255, 0.5);\n    --ninja-text-color: rgb(60, 65, 73);\n    --ninja-font-size: 16px;\n    --ninja-top: 20%;\n\n    --ninja-key-border-radius: 0.25em;\n    --ninja-accent-color: rgb(110, 94, 210);\n    --ninja-secondary-background-color: rgb(239, 241, 244);\n    --ninja-secondary-text-color: rgb(107, 111, 118);\n\n    --ninja-selected-background: rgb(248, 249, 251);\n\n    --ninja-icon-color: var(--ninja-secondary-text-color);\n    --ninja-icon-size: 1.2em;\n    --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);\n\n    --ninja-modal-background: #fff;\n    --ninja-modal-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;\n\n    --ninja-actions-height: 300px;\n    --ninja-group-text-color: rgb(144, 149, 157);\n\n    --ninja-footer-background: rgba(242, 242, 242, 0.4);\n\n    font-size: var(--ninja-font-size);\n  }\n\n  :host(.dark) {\n    --ninja-backdrop-filter: none;\n    --ninja-overflow-background: rgba(0, 0, 0, 0.7);\n    --ninja-text-color: #7d7d7d;\n\n    --ninja-modal-background: rgba(17, 17, 17, 0.85);\n    --ninja-accent-color: rgb(110, 94, 210);\n    --ninja-secondary-background-color: rgba(51, 51, 51, 0.44);\n    --ninja-secondary-text-color: #888;\n\n    --ninja-selected-text-color: #eaeaea;\n    --ninja-selected-background: rgba(51, 51, 51, 0.44);\n\n    --ninja-icon-color: var(--ninja-secondary-text-color);\n    --ninja-separate-border: 1px solid var(--ninja-secondary-background-color);\n\n    --ninja-modal-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);\n\n    --ninja-group-text-color: rgb(144, 149, 157);\n\n    --ninja-footer-background: rgba(30, 30, 30, 85%);\n  }\n\n  .modal {\n    display: none;\n    position: fixed;\n    z-index: 1;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    background: var(--ninja-overflow-background);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    backdrop-filter: var(--ninja-backdrop-filter);\n    text-align: left;\n    color: var(--ninja-text-color);\n    font-family: var(--ninja-font-family);\n  }\n  .modal.visible {\n    display: block;\n  }\n\n  .modal-content {\n    position: relative;\n    top: var(--ninja-top);\n    margin: auto;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    flex-shrink: 1;\n    -webkit-box-flex: 1;\n    flex-grow: 1;\n    min-width: 0px;\n    will-change: transform;\n    background: var(--ninja-modal-background);\n    border-radius: 0.5em;\n    box-shadow: var(--ninja-modal-shadow);\n    max-width: var(--ninja-width);\n    overflow: hidden;\n  }\n\n  .bump {\n    animation: zoom-in-zoom-out 0.2s ease;\n  }\n\n  @keyframes zoom-in-zoom-out {\n    0% {\n      transform: scale(0.99);\n    }\n    50% {\n      transform: scale(1.01, 1.01);\n    }\n    100% {\n      transform: scale(1, 1);\n    }\n  }\n\n  .ninja-github {\n    color: var(--ninja-keys-text-color);\n    font-weight: normal;\n    text-decoration: none;\n  }\n\n  .actions-list {\n    max-height: var(--ninja-actions-height);\n    overflow: auto;\n    scroll-behavior: smooth;\n    position: relative;\n    margin: 0;\n    padding: 0.5em 0;\n    list-style: none;\n    scroll-behavior: smooth;\n  }\n\n  .group-header {\n    height: 1.375em;\n    line-height: 1.375em;\n    padding-left: 1.25em;\n    padding-top: 0.5em;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n    font-size: 0.75em;\n    line-height: 1em;\n    color: var(--ninja-group-text-color);\n    margin: 1px 0;\n  }\n\n  .modal-footer {\n    background: var(--ninja-footer-background);\n    padding: 0.5em 1em;\n    display: flex;\n    /* font-size: 0.75em; */\n    border-top: var(--ninja-separate-border);\n    color: var(--ninja-secondary-text-color);\n  }\n\n  .modal-footer .help {\n    display: flex;\n    margin-right: 1em;\n    align-items: center;\n    font-size: 0.75em;\n  }\n\n  .ninja-examplekey {\n    background: var(--ninja-secondary-background-color);\n    padding: 0.06em 0.25em;\n    border-radius: var(--ninja-key-border-radius);\n    color: var(--ninja-secondary-text-color);\n    width: 1em;\n    height: 1em;\n    margin-right: 0.5em;\n    font-size: 1.25em;\n    fill: currentColor;\n  }\n  .ninja-examplekey.esc {\n    width: auto;\n    height: auto;\n    font-size: 1.1em;\n  }\n  .ninja-examplekey.backspace {\n    opacity: 0.7;\n  }\n`"
         }
       ],
       "exports": [
@@ -339,16 +339,6 @@
           "description": "",
           "name": "NinjaKeys",
           "members": [
-            {
-              "kind": "field",
-              "name": "visible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show or hide element",
-              "attribute": "visible"
-            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -500,6 +490,15 @@
               ],
               "description": "Navigate to group of actions"
             },
+            {
+              "kind": "field",
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show or hide element"
+            },
             {
               "kind": "field",
               "name": "_bump",
@@ -665,15 +664,6 @@
             }
           ],
           "attributes": [
-            {
-              "name": "visible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Show or hide element",
-              "fieldName": "visible"
-            },
             {
               "name": "placeholder",
               "type": {

diff --git a/dev/index.html b/dev/index.html
@@ -72,10 +72,22 @@
       ninja-keys {
         --ninja-icon-size: 1em;
       }
-
+
+      ninja-keys::part(actions-list) {
+        padding: 8px;
+      }
+
+      ninja-keys::part(ninja-action){
+        border-radius: 8px;
+        border-left: none;
+      }
+
+      ninja-keys::part(ninja-selected){
+        background: rgba(51, 51, 51, 0.1);
+      }
 
     </style>
-    <ninja-keys class="dark"> </ninja-keys>
+    <ninja-keys> </ninja-keys>
     <script>
       const ninja = document.querySelector('ninja-keys');
       ninja.data = [

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ninja-keys",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Ninja Keys",
   "main": "dist/ninja-keys.js",
   "module": "dist/ninja-keys.js",

diff --git a/src/ninja-action.ts b/src/ninja-action.ts
@@ -10,6 +10,7 @@ export class NinjaAction extends LitElement {
   static override styles = css`
     :host {
       display: flex;
+      width: 100%;
     }
     .ninja-action {
       padding: 0.75em 1em;
@@ -19,6 +20,7 @@ export class NinjaAction extends LitElement {
       justify-content: start;
       outline: none;
       transition: color 0s ease 0s;
+      width: 100%;
     }
     .ninja-action.selected {
       cursor: pointer;
@@ -30,10 +32,6 @@ export class NinjaAction extends LitElement {
     .ninja-action.selected .ninja-icon {
       color: var(--ninja-selected-text-color);
     }
-    slot {
-      display: flex;
-      width: 100%;
-    }
     .ninja-icon {
       font-size: var(--ninja-icon-size);
       max-width: var(--ninja-icon-size);
@@ -140,11 +138,11 @@ export class NinjaAction extends LitElement {
     };
 
     return html`
-      <slot class="ninja-action" class=${classMap(classes)}>
+      <div class="ninja-action" part="ninja-action ${this.selected ? 'ninja-selected' : ''}" class=${classMap(classes)}>
         ${icon}
         <div class="ninja-title">${this.action.title}</div>
         ${hotkey}
-      </slot>
+      </div>
     `;
   }
 }

diff --git a/src/ninja-keys.ts b/src/ninja-keys.ts
@@ -349,7 +349,7 @@ export class NinjaKeys extends LitElement {
         actions,
         (action) => action.id,
         (action) =>
-          html`<ninja-action
+          html`<ninja-action exportparts="ninja-action,ninja-selected"
             .selected=${live(action.id === this._selected?.id)}
             .hotKeysJoinedView=${this.hotKeysJoinedView}
             @mouseover=${($event: MouseEvent) =>
@@ -368,7 +368,7 @@ export class NinjaKeys extends LitElement {
     });
 
     return html`
-      <div @click=${this._overlayClick} class=${classMap(menuClasses)}>
+      <div @click=${this._overlayClick} class=${classMap(menuClasses)} >
         <div class=${classMap(classes)} @animationend=${this._onTransitionEnd}>
           <ninja-header
             ${ref(this._headerRef)}
@@ -382,7 +382,7 @@ export class NinjaKeys extends LitElement {
           >
           </ninja-header>
           <div class="modal-body">
-            <div class="actions-list">${itemTemplates}</div>
+            <div class="actions-list" part="actions-list">${itemTemplates}</div>
           </div>
           <slot name="footer"> ${footerHtml} </slot>
         </div>