Как изменить расстояние между пунктами меню-выпадающего меню Полимер

Question

Как изменить интервал между элементами в раскрывающемся меню ядра, я попробовал высоту строки и различные другие свойства css, но я не могу показаться влияет на расстояние между элементами.

Вот мой компонент Я бы хотел, чтобы промежуток между Bug, Feature, None был меньше.

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html"> 
 
<link rel="import" href="http://www.polymer-project.org/components/core-dropdown/core-dropdown.html" rel="import"> 
 
<link rel="import" href="http://www.polymer-project.org/components/core-dropdown-menu/core-dropdown-menu.html" rel="import"> 
 
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-menu.html" rel="import"> 
 
<link rel="import" href="http://www.polymer-project.org/components/core-item/core-item.html" rel="import"> 
 

 
<polymer-element name="sp-task-type"> 
 
    <template> 
 

 
     <style> 
 
      :host { 
 
       width: 100%; 
 
      } 
 

 
      core-dropdown { 
 
       min-width: 180px; 
 
       border: 1px solid #000000; 
 
       border-radius: 3px; 
 
      } 
 

 
      core-dropdown-menu { 
 
       background: #f5f5f5; 
 
       align-self: flex-start; 
 
       height: 100%; 
 

 
      } 
 

 
      core-menu { 
 
       margin: 0; 
 

 
      } 
 

 
      core-item { 
 
       overflow: hidden; 
 
       white-space: nowrap; 
 
       text-overflow: ellipsis; 
 
      } 
 

 
      /*  #header { 
 
        *//*font-size: 14px;*//* 
 
        *//*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*//* 
 
        *//*-webkit-touch-callout: none;*//* 
 
        padding: 0; 
 
        margin: 0; 
 
        *//*border: 1px solid green;*//* 
 
        *//*align-self: flex-end;*//* 
 
        *//*align-self: stretch;*//* 
 
       }*/ 
 

 
      #tags { 
 
       flex: 1 0 auto; 
 
       height: 70%; 
 
       align-self: flex-end; 
 
       background: #ffffff; 
 
      } 
 

 
      #wrapper { 
 
       display: flex; 
 
       flex-direction: row; 
 
       height: 30px; 
 
       justify-content: flex-start; 
 
       /*border: 1px solid red;*/ 
 
       background: #ffffff; 
 
      } 
 

 
     </style> 
 

 
     <div id="wrapper"> 
 
      <core-dropdown-menu id="cdm"> 
 
       <core-dropdown class="dropdown"> 
 
        <core-menu on-core-select="{{selectAction}}" id="menu"> 
 
         <template repeat="{{d in data}}"> 
 
          <core-item label="{{d.name}}" _style="color: {{d.color}}"></core-item> 
 
         </template> 
 
        </core-menu> 
 
       </core-dropdown> 
 
      </core-dropdown-menu> 
 
      <div id="tags">test</div> 
 
     </div> 
 
    </template> 
 
    <script> 
 
     (function() { 
 
      Polymer({ 
 
       ready: function() { 
 
        // populate the element’s data model 
 
        // (the salutations array) 
 

 
        this.data = [ 
 
         {name: 'Bug', color: 'purple', isDefault: 0}, 
 
         {name: 'Feature', color: 'brown', isDefault: 0}, 
 
         {name: 'None', color: 'black', isDefault: 1}] 
 

 
        var i = arrayObjectIndexOf(this.data, 1, "isDefault"); 
 

 
        this.$.menu.selected = i; 
 

 
       }, 
 
       selectAction: function (e, detail) { 
 

 
        if (detail.isSelected) { 
 
         var selectedItem = detail.item; 
 
         var wrapper = this.$.wrapper; 
 
         var cdm = this.$.cdm; 
 
         var menu = this.$.menu; 
 
         var color = selectedItem.style.color; 
 

 
         if (selectedItem.label === 'None') { 
 
          menu.selected = 2; 
 
          wrapper.style.background = color; 
 
          cdm.style.color = color; 
 
         } 
 
         else { 
 
          wrapper.style.background = color; 
 
          cdm.style.color = color; 
 
         } 
 
        } 
 
       } 
 
      }); 
 

 
     })(); 
 
     function arrayObjectIndexOf(myArray, searchTerm, property) { 
 
      for (var i = 0, len = myArray.length; i < len; i++) { 
 
       if (myArray[i][property] === searchTerm) return i; 
 
      } 
 
      return -1; 
 
     } 
 
    </script> 
 
</polymer-element> 
 

 
<sp-task-type>

Answer 1

изменение мин высоты на основной элемент-

core-item { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    min-height: 24px; 
}