Common style property underline, underline focused and underline disa…

…bled PolymerElements#405
aperrad · Oct 22, 2016 · 3b923c4 · 3b923c4
1 parent 1c0fc5d
commit 3b923c4
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -140,6 +140,41 @@ <h3>Inputs can have custom logic</h3>
         </paper-input-container>
       </template>
     </demo-snippet>
+
+    <h3>You can style a paper-input using custom properties</h3>
+    <demo-snippet>
+      <template>
+        <style is="custom-style">
+          paper-input.custom {
+              --paper-input-container-underline-common: {
+                  display: none;
+              };
+
+              --paper-input-container-label: {
+                  color: var(--paper-pink-500);
+                  font-style: italic;
+                  font-weight: bold;
+              }
+          }
+
+          paper-input.custom-focus {
+              --paper-input-container-underline-common: {
+                  display: none;
+                  background: #737373;
+                  height: 1px;
+              };
+
+              --paper-input-container-underline-focus: {
+                  display: inline;
+                  background: #E91E63;
+                  height: 2px;
+              };
+            }
+        </style>
+        <paper-input class="custom" label="Custom style"></paper-input>
+        <paper-input class="custom-focus" label="Overriden common underline style for focus"></paper-input>
+      </template>
+    </demo-snippet>
   </div>
 
   <script>

diff --git a/paper-input-container.html b/paper-input-container.html
@@ -90,6 +90,7 @@
 `--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}`
 `--paper-input-container-label-floating` | Mixin applied to the label when floating | `{}`
 `--paper-input-container-input` | Mixin applied to the input | `{}`
+`--paper-input-container-underline-common` | Mixin applied to the underline when the input is not focused, focused or disabled | `{}`
 `--paper-input-container-underline` | Mixin applied to the underline | `{}`
 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}`
 `--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`
@@ -144,6 +145,7 @@
         -webkit-transform: scale3d(0,1,1);
         transform: scale3d(0,1,1);
 
+        @apply(--paper-input-container-underline-common);
         @apply(--paper-input-container-underline-focus);
       }
 
@@ -172,6 +174,7 @@
         background: var(--paper-input-container-color, --secondary-text-color);
         height: 1px;
 
+        @apply(--paper-input-container-underline-common);
         @apply(--paper-input-container-underline);
       }
 
@@ -180,6 +183,7 @@
         border-color: var(--paper-input-container-color, --secondary-text-color);
         background: transparent;
 
+        @apply(--paper-input-container-underline-common);
         @apply(--paper-input-container-underline-disabled);
       }