Comment styler le papier avec certains mixins (polymère 2)?

Question

J'essaye de styler une entrée de papier basée sur un design que j'ai eu. J'ai utilisé certaines des propriétés personnalisées décrites here, mais pas tous d'entre eux fonctionnent.

J'ai des problèmes avec --paper-input-conteneur étiquette et --paper-entrée-conteneur-entrée-focus. Peut-être que j'essaie de les utiliser dans le mauvais sens ou cela nécessite quelques étapes supplémentaires.

Voici mon code

<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

Je ne suis pas sûr de ce résultat que vous attendez, il est si difficile de vous aider, mais une chose que je suis sûr que c'est votre balise de style est tellement en désordre. Et vous devez écrire un point-virgule après les mixins car ils sont comme les propriétés CSS et toutes les propriétés CSS sont séparées par des points-virgules.
Essayez votre code comme ça:

<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> 

Une autre chose, vous essayez de style de la couleur de la bordure de l'entrée sur le focus, mais aussi vous définissez display-none qui n'a pas de sens. Vous devez supprimer display: none et ajouter border-color: red; à --paper-input-container-underline-focus si vous souhaitez styler la couleur.