Стилизация бумажных кнопок в слоте - как оформить сам слот и иметь кнопки стиля высоты? - PullRequest
Новая
       11

Стилизация бумажных кнопок в слоте - как оформить сам слот и иметь кнопки стиля высоты?

0 голосов
/ 15 сентября 2018 
    --common-button-styles: {
      min-width: 71px;
      height: 32px;
      white-space: nowrap;
      font-size: 16px;
      font-weight: 500;
    }

    --flat-button-lite: {
      color: var(--primary-color);
      @apply --common-button-styles;
    }

    --card-header-action-right: {
      display: flex;
      align-items: center;
      @apply --flat-button-lite;
      justify-content: flex-end;
    }

  div ::slotted([slot=footer-action-right]),
  div ::slotted([slot=footer-action-left])
  {   
      @apply --card-header-action-right;
  }

  <div class="card-footer" hidden="[[minimal]]">
    <slot name="footer-action-left"></slot>
      <div></div>
    <slot name="footer-action-right"></slot>
  </div>

<slot name="footer-action-right"></slot> получает papper-button элементов. У меня есть height стиль на бумажных кнопках, которые не вступают в силу с --card-header-action-right.

Я стараюсь, чтобы тема применялась только к <slot name="footer-action-right"></slot>. Есть ли способ применить стиль кнопки на уровне слота вместо div ::slotted([slot=footer-action-right]) paper-button {}?

...