I want this...
Below is a paper-dialog implementation. It contains whitespace at the top and bottom of the dialog element. I want to eliminate the white space.
<!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>
... to resemble this.
I want the paper-menu inside the dialog to look like the following paper-menu without any whitespace.
<!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>
How can I accomplish this?
Your CSS mixin (
--paper-menu) should be declared inside a rule (it's currently outside any rules). I would move that into thepaper-menurule:jsbin
FYI, that whitespace is from
paper-dialog-shared-styles.html.