Polymer 1.x：如何从纸质对话框中的纸质菜单中删除空格？

Question

我想要这个...

下面是一个 paper-dialog 实现。它在对话框元素的顶部和底部包含 whitespace。我要消掉小白space.

http://jsbin.com/bupicetoma/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-dialog/paper-dialog.html" rel="import">
  <link href="paper-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

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

<template>
  <style>
    --paper-menu {
      margin: 0 !important;
      padding: 0 !important;
    }
    paper-menu {
      padding: 0 !important;
    }
    paper-item:hover {
      background-color: red;
    }
    paper-item {
      --paper-item: {
        cursor: pointer;
        margin: 0;
      };
    }
  </style>

  <button on-tap="show">Show</button>

  <paper-dialog id="dia">
    <paper-menu>
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
      <paper-item>Item 3</paper-item>
    </paper-menu>
  </paper-dialog>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
      show: function() {
        this.$.dia.open();
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

...像这样。

我希望对话框中的 paper-menu 看起来像下面的 paper-menu 没有任何白色space。

http://jsbin.com/hovayitela/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-menu/paper-menu.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
</head>
<body>

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

<template>
  <style>
    --paper-menu {
      margin: 0 !important;
      padding: 0 !important;
    }
    paper-menu {
      padding: 0 !important;
    }
    paper-item:hover {
      background-color: red;
    }
    paper-item {
      --paper-item: {
        cursor: pointer;
        margin: 0;
      };
    }
  </style>

  <paper-menu>
    <paper-item>Item 1</paper-item>
    <paper-item>Item 2</paper-item>
    <paper-item>Item 3</paper-item>
  </paper-menu>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
      show: function() {
        this.$.dia.open();
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

我怎样才能做到这一点？

Answer 1

你的 CSS mixin (--paper-menu) 应该在规则内声明（它目前在任何规则之外）。我会把它移到 paper-menu 规则中：

paper-menu {
  margin: 0 !important;
  padding: 0 !important;
}

jsbin

仅供参考，该空格来自 paper-dialog-shared-styles.html。

Polymer 1.x：如何从纸质对话框中的纸质菜单中删除空格？

Polymer 1.x: How to remove whitespace from paper-menu inside paper-dialog?

polymer

paper-elements

polymer-1.0

polymer-1.x

我想要这个...

...像这样。