add placeholder text color variable and style customize for input ele…

…ment #10
ssleptsov · Dec 10, 2021 · c9a1d03 · c9a1d03
1 parent 6537f9b
commit c9a1d03
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -246,6 +246,7 @@ If you need more style control, use any of the CSS variables below.
 |     --ninja-actions-height    | 300px;                                             |
 |     --ninja-group-text-color  |  rgb(144, 149, 157);                               |
 |     --ninja-footer-background | rgba(242, 242, 242, 0.4);                          |
+| --ninja-placeholder-color | #8e8e8e |
 
 
 #### Example
@@ -266,6 +267,8 @@ It's supported by [all modern browsers](https://caniuse.com/mdn-css_selectors_pa
 | actions-list                       | Element that wraps all child elements. |
 | ninja-action                       | Single action                       |
 | ninja-selected                     | Selected action                    |
+| ninja-input                        | Input element                      |
+| ninja-input-wrapper                | Wrapper element around div, useful for advanced styles|
 
 #### Example style using parts
 ```css
@@ -280,6 +283,19 @@ ninja-keys::part(ninja-action) {
 ninja-keys::part(ninja-selected) {
   background: rgba(51, 51, 51, 0.1);
 }
+
+
+ninja-keys::part(ninja-input) {
+  color: #14b8a6;
+}
+
+ninja-keys::part(ninja-input)::placeholder {
+  color: #f43f5e;
+}
+
+ninja-keys::part(ninja-input-wrapper) {
+  background: rgba(244, 63, 93, 0.3);
+}
 ```
 
 ### Icons

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

diff --git a/src/base-styles.ts b/src/base-styles.ts
@@ -28,6 +28,8 @@ export const baseStyles = css`
 
     --ninja-footer-background: rgba(242, 242, 242, 0.4);
 
+    --ninja-placeholder-color: #8e8e8e;
+
     font-size: var(--ninja-font-size);
   }
 

diff --git a/src/ninja-header.ts b/src/ninja-header.ts
@@ -22,6 +22,9 @@ export class NinjaHeader extends LitElement {
       color: var(--ninja-text-color);
       outline: none;
     }
+    .search::placeholder {
+      color: var(--ninja-placeholder-color);
+    }
     .breadcrumb-list {
       padding: 1em 4em 0 1em;
       display: flex;
@@ -93,8 +96,9 @@ export class NinjaHeader extends LitElement {
 
     return html`
       ${breadcrumbs}
-      <div class="search-wrapper">
+      <div part="ninja-input-wrapper" class="search-wrapper">
         <input
+          part="ninja-input"
           type="text"
           id="search"
           spellcheck="false"

diff --git a/src/ninja-keys.ts b/src/ninja-keys.ts
@@ -376,6 +376,7 @@ export class NinjaKeys extends LitElement {
       <div @click=${this._overlayClick} class=${classMap(menuClasses)}>
         <div class=${classMap(classes)} @animationend=${this._onTransitionEnd}>
           <ninja-header
+            exportparts="ninja-input,ninja-input-wrapper"
             ${ref(this._headerRef)}
             .placeholder=${this.placeholder}
             .hideBreadcrumbs=${this.hideBreadcrumbs}
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,8 @@ export const baseStyles = css` @@
         --ninja-footer-background: rgba(242, 242, 242, 0.4);
+        --ninja-placeholder-color: #8e8e8e;
         font-size: var(--ninja-font-size);
       }
@@ Expand Down @@