Polymer 1.x：格式化 paper-icon-button-lite答案

【问题标题】：Polymer 1.x: Formatting paper-icon-button-litePolymer 1.x：格式化 paper-icon-button-lite
【发布时间】：2016-07-08 19:41:15
【问题描述】：

如何格式化paper-icon-button-lite 以匹配paper-icon-button？（即，没有轮廓和阴影。）How did they accomplish this in this paper-icon-button-lite demo?不管他们做了什么，显然是was not necessary in this paper-icon-button demo。为什么不？我错过了什么？

Here is my jsBin.

http://jsbin.com/vatuyopodu/1/edit?html，输出

<!doctype html>

<head>
  <meta name="description" content="iron-data-table beta3">
  <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-icon-button/paper-icon-button.html" rel="import">
  <link href="paper-icon-button/paper-icon-button-lite.html" rel="import">
</head>

<body>
  <dom-module id="x-foo">
    <style is="custom-style">
      :host {
        font-family: arial, sans-serif;
      }

      button[is=paper-icon-button-light] {
        width: 40px;
        height: 40px;
        padding: 8px;
        margin: 10px;
      }

      button[is=paper-icon-button-light]> img {
        width: 24px;
        height: 24px;
      }
    </style> <template>
      <p>
        <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
        <code>paper-icon-button</code>
      </p>
      <p>
        <button is="paper-icon-button-light" title="octocat">
          <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
        </button>
        <code>paper-icon-button-lite</code>
      </p>
      <p>How do I format the <code>paper-icon-button-lite</code> to match the <code>paper-icon-button</code>? (i.e., No outline and no shadow.) How did they accomplish this in the demo? What am I missing?</p>
      <a href="https://elements.polymer-project.org/elements/paper-icon-button?view=demo:demo/paper-icon-button-light.html&active=paper-icon-button-light">
        Here is the demo</a>.
    </template>
    <script>
      document.addEventListener('WebComponentsReady', function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
  <x-foo></x-foo>
</body>

【问题讨论】：

标签： css polymer polymer-1.0 paper-elements

【解决方案1】：

将transparent background 和removing border 添加到button[is=paper-icon-button-light] 应该可以解决问题

 button[is=paper-icon-button-light] {
    width: 40px;
    height: 40px;
    padding: 8px;
    margin: 10px;
    border:none;
    background-color:transparent;
  }

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<link href="paper-icon-button/paper-icon-button-lite.html" rel="import">

<dom-module id="x-foo">
  <style>
    :host {
      font-family: arial, sans-serif;
    }
    button[is=paper-icon-button-light] {
      width: 40px;
      height: 40px;
      padding: 8px;
      margin: 10px;
      border: none;
      background-color: transparent;
    }
    button[is=paper-icon-button-light] > img {
      width: 24px;
      height: 24px;
    }
  </style>
  <template>
    <p>
      <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
      <code>paper-icon-button</code>
    </p>
    <p>
      <button is="paper-icon-button-light" title="octocat">
        <img src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat">
      </button>
      <code>paper-icon-button-lite</code>
    </p>

  </template>
  <script>
    Polymer({
      is: 'x-foo'
    });
  </script>
</dom-module>

<x-foo></x-foo>

【讨论】：