特定のミックスイン（ポリマー2）で紙入力をスタイルする方法は？

Question

私は得たデザインに基づいて紙入力をスタイルしようとしています。私はhereと記載されているカスタム所有権のいくつかを使用しましたが、それらのすべてが機能するわけではありません。

私は--paper入力-コンテナラベルと--paper入力-コンテナ入力フォーカスを使用して問題を抱えています。

多分私はそれらを間違った方法で使用しようとするか、いくつかの余分なステップが必要になることがあります。

は、ここで私はあなたがあなたを助けるために困難であるので、期待しているが、私は確信している一つのことは、それはあなたのスタイルタグがとても厄介ですだ結果何かわからない私のコード

<link rel="import" href="../polymer/polymer-element.html"> 
<link rel="import" href="../paper-input/paper-input.html"> 
<link rel="import" href="../paper-input/paper-input-container.html"> 
<link rel="import" href="../iron-icons/iron-icons.html"> 
<link rel="import" href="../iron-icon/iron-icon.html"> 

<dom-module id="first-element"> 
    <template> 
    <style> 
     paper-input { 
     --paper-input-container-color: rgb(64, 64, 64); 
     --paper-input-container-focus-color: rgb(64, 64, 64); 

     --paper-input-container: { 
      border: none; 
      padding: 0px; 
     } 


     --paper-font-subhead: { 
      font-size: 100%; 
     } 

     --paper-input-container-underline-focus: { 
      display: none; 
     } 

     --paper-input-container-underline: { 
      display: none; 
     } 

     --paper-input-container-input: { 
      height: 24px; 
      line-height: 20px; 
      padding: 0 4px; 
      border: 1px solid rgb(194, 198, 199); 
     } 

     --paper-input-container-input-focus: { 
      border-color:red; 
     } 

     --paper-input-container-label { 
      font-weight: bold; 
     }  

     --paper-input-container-invalid-color: red; 
     } 

     :host { 
     display: block; 
     } 
    </style> 

    <paper-input always-float-label label="Floating label"></paper-input> 
    <paper-input label="username"> 
     <iron-icon icon="icons:accessible" slot="prefix"></iron-icon> 
     <div slot="suffix">@email.com</div> 
    </paper-input> 


    </template> 

    <script> 
    class FirstElement extends Polymer.Element { 
     static get is() { return 'first-element'; } 
     static get properties() { 
     return { 
      prop1: { 
      type: String, 
      value: 'first-element' 
      } 
     }; 
     } 
    } 

    window.customElements.define(FirstElement.is, FirstElement); 
    </script> 
</dom-module> 

Answer 1

です。 mixinsの後にセミコロンを書く必要があります。なぜなら、それらはcssプロパティのようなもので、すべてのcssプロパティはセミコロンで区切られているからです。
は、そのようなあなたのコードを試してみてください。

<style> 
    :host { 
    display: block; 
    } 

    paper-input { 
    --paper-input-container-color: rgb(64, 64, 64); 
    --paper-input-container-focus-color: rgb(64, 64, 64); 

    --paper-input-container: { 
     border: none; 
     padding: 0px; 
    }; 

    --paper-font-subhead: { 
     font-size: 100%; 
    }; 

    --paper-input-container-underline-focus: { 
     display: none; 
    }; 

    --paper-input-container-underline: { 
     display: none; 
    }; 

    --paper-input-container-input: { 
     height: 24px; 
     line-height: 20px; 
     padding: 0 4px; 
     border: 1px solid rgb(194, 198, 199); 
    }; 

    --paper-input-container-input-focus: { 
     border-color: red; 
    }; 

    --paper-input-container-label: { 
     font-weight: bold; 
    }; 

    --paper-input-container-invalid-color: red; 
    } 
</style> 

もう一つは、あなたが焦点上の入力の境界線の色のスタイルをしようとしているだけでなく、あなたが意味を成さないdisplaynoneに設定されています。 display: noneを削除し、色のスタイルを設定する場合は、border-color: red;〜--paper-input-container-underline-focusを追加する必要があります。