Website/Website.Client/Pages/2_Examples/CompositeView/CompositeView.razor.scss
﻿& {
  padding: 0 1rem;
  max-width: 1268px;
  display: flex;
  flex-wrap: wrap;

  > section {
    width: 70%;
    margin-right: 1rem;
  }

  > aside {
    width: calc(30% - 2rem);
    min-width: 10rem;
  }

  @media (max-width: 960px) {
    > section {
      width: 100%;
      margin-bottom: 2rem;
    }

    > aside {
      width: 100%;
    }
  }

  .card {
    width: 100%;

    p {
      font-size: unset;
    }

    .card-header > *:first-child {
      font-size: large;
    }
  }

  table {
    font-size: unset;
    width: 100%;

    tr {
      &:hover {
        background: #eee;
        cursor: pointer;
      }

      &.selected {
        background: #ddd;
      }
    }

    td,
    th {
      width: 25%;
      padding: 0.5rem;
      padding-right: 2rem;
      border-bottom: 1px solid #ddd;

      &:nth-of-type(1),
      &:nth-of-type(3) {
        width: 10%;
      }
    }
  }

  .pagination {
    user-select: none;

    div {
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;

      &.current {
        color: #aaa;
        background: #eee;
      }
    }

    div:hover:not(.current) {
      background: #eee;
      cursor: pointer;
    }
  }

  .filter {
    margin-top: 1rem;

    .card-header {
      font-weight: bold;
    }

    .card-body {
      > * {
        margin-bottom: 1rem;
      }
    }

    .card-footer {
      display: flex;
      justify-content: flex-end;
    }

    .chip {
      margin-right: 0.25rem;
      margin-bottom: 0.25rem;
      display: inline-flex;
      font-size: x-small;
      background: #eee;
      border-radius: 0.25rem;
      align-items: center;
      padding: 0.2rem 0.4rem;

      i.material-icons {
        font-size: small;
        font-weight: bold;
        cursor: pointer;
        margin-left: 0.5rem;
      }
    }
  }
}
