ui/webui/resources/cr_elements/network/cr_network_list_item_css.html

<!-- Common styles <cr-network-list/> items. -->
<dom-module id="cr-network-list-item-css">
  <template>
    <style>
      :host {
        display: inline-block;
      }

      span {
        cursor: pointer;
      }

      #divOuter {
        border-style: none;
        display: flex;
        flex-direction: row;
        margin: 0;
        padding: 4px;
      }

      #divOuter[hoverable]:hover {
        background-color: lightgrey;
      }

      #divIcon {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
      }

      #icon {
        height: 32px;
        width: 32px;

        @apply(--cr-network-icon-mixin);
      }

      #divDetail {
        display: flex;
        flex: 1 0 auto;
        flex-direction: row;
      }

      #divText {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        justify-content: center;
      }

      #itemName {
        -webkit-margin-start: 8px;
        font-size: 16px;

        @apply(--cr-network-name-mixin);
      }

      #networkStateText {
        -webkit-margin-start: 8px;
        color: grey;
        font-size: 14px;

        @apply(--cr-network-state-mixin);
      }

      .buttons {
        align-items: center;
        display: flex;
        flex-direction: row;
      }

      .buttons paper-icon-button {
        text-align: center;
      }

      .known paper-icon-button {
        width: 60px;
      }

      .connected {
        font-weight: bold;
      }
    </style>
  </template>
</dom-module>