Merge pull request #625 from PolymerElements/shared-style-mixin

fix the shared-input-style which was in the wrong spot
PolymerElements · Mar 7, 2018 · 6972d38 · 6972d38
2 parents c9c87e8 + fdb5624
commit 6972d38
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -22,6 +22,7 @@
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-icon/iron-icon.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../iron-input/iron-input.html">
   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../paper-styles/color.html">
   <link rel="import" href="../paper-input-container.html">
@@ -141,6 +142,26 @@ <h3>Inputs can have custom logic</h3>
         </paper-input-container>
       </template>
     </demo-snippet>
+
+    <h3>You can use <code>paper-input-container</code> directly if you want more control
+      over the input (for example, if you want to use this in a native <code>form</code>, etc.)</h3>
+    <demo-snippet>
+      <template>
+        <custom-style>
+          <style is="custom-style">
+            input.my-input {
+              @apply --paper-input-container-shared-input-style;
+            }
+          </style>
+        </custom-style>
+        <paper-input-container>
+          <label slot="label">This is a label</label>
+          <iron-input slot="input">
+            <input class="my-input">
+          </iron-input>
+        </paper-input-container>
+      </template>
+    </demo-snippet>
   </div>
 
   <script>

diff --git a/paper-input-container.html b/paper-input-container.html
@@ -116,30 +116,35 @@
 `display:inline-block`.
 -->
 
+<custom-style>
+  <style is="custom-style">
+    html {
+      --paper-input-container-shared-input-style: {
+        position: relative; /* to make a stacking context */
+        outline: none;
+        box-shadow: none;
+        padding: 0;
+        width: 100%;
+        max-width: 100%;
+        background: transparent;
+        border: none;
+        color: var(--paper-input-container-input-color, var(--primary-text-color));
+        -webkit-appearance: none;
+        text-align: inherit;
+        vertical-align: bottom;
+
+        @apply --paper-font-subhead;
+      };
+    }
+  </style>
+</custom-style>
+
 <dom-module id="paper-input-container">
   <template>
     <style>
       :host {
         display: block;
         padding: 8px 0;
-
-        --paper-input-container-shared-input-style: {
-          position: relative; /* to make a stacking context */
-          outline: none;
-          box-shadow: none;
-          padding: 0;
-          width: 100%;
-          max-width: 100%;
-          background: transparent;
-          border: none;
-          color: var(--paper-input-container-input-color, var(--primary-text-color));
-          -webkit-appearance: none;
-          text-align: inherit;
-          vertical-align: bottom;
-
-          @apply --paper-font-subhead;
-        };
-
         @apply --paper-input-container;
       }