CODEWITHSUNDEEP
polymerpolymer-1.0paper-elementsjsbinpolymer-1.x
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

Polymer 1.x: Styling disabled paper-input

I want to format a <paper-input disabled ... element to appear NOT disabled (i.e., not have the text lightened out).

Below in my code (and in this jsBin) I show what I have tried so far.

How can I accomplish this? (Please provide a working demo. Ideally, a clone of the subject jsBin.)

http://jsbin.com/giguwoyoha/1/edit?html,output 
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    /* Here is what I have tried so far */
    paper-input[disabled] {
      --paper-input: {
        color: black;
      }
    }
    paper-input {
      --paper-input-disabled: {
        color: black;
      }
    }
    paper-input {
      --paper-input-container-disabled: {
        color: black;
      }
    }
    paper-input[disabled] {
      color: black;
    }
    *[disabled] {
      color: black;
    }
  </style>

  <paper-input value="This is enabled text. I want to format the below to look like this."></paper-input>
  <paper-input value="This is disabled text. I want to format this to look like the above."
    disabled></paper-input>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Upvotes: 0

Views: 956

Answers (3)

Let Me Tink About It
Let Me Tink About It

Reputation: 16112

For the convenience of future users, here is a jsBin demo of the accepted answer.

And here is the full code:

http://jsbin.com/mexirubida/1/edit?html,output 
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-input/paper-input.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
<style>
  :host paper-input[disabled] {
    --paper-input-container-input-color: red;
    --paper-input-container-disabled: {
      opacity: 1;
    }
  }
</style>
  <paper-input value="This is enabled text. I want to format the below to look like this."></paper-input>
  <paper-input value="This is disabled text. I want to format this to look like the above."
    disabled></paper-input>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Edit

The above worked in the jsBin demo. However, when trying to add it to my custom element, I had to modify the code as follows:

:host {
  paper-input[disabled] {
    --paper-input-container-input-color: red;
    --paper-input-container-disabled: {
      opacity: 1;
    }
  }
}

Upvotes: 0

marx_tseng
marx_tseng

Reputation: 46

<style>
:host paper-input[disabled] {
  --paper-input-container-input-color: red;
  --paper-input-container-disabled: {
    opacity: 1;
  }
}

Upvotes: 2

adzadzadz
adzadzadz

Reputation: 113

Here's a sample on how you can apply mixins properly. 

<style>
    :host {
      --paper-input-container-disabled: {
        color: pink;
        background: red;
        border: 5px dashed orange;
      };
    }
    paper-input {
      @apply(--paper-input-container-disabled);
    }
</style>

Upvotes: 1

Related Questions