protocol-builder-mock/pb/static/scss/app.scss

// COLOR PALETTE

// gray
$color-gray: #4e4e4e;
$color-gray-light-2: scale-color($color-gray, $lightness: +90%);
$color-gray-light-1: scale-color($color-gray, $lightness: +70%);
$color-gray-light: $color-gray-light-1;
$color-gray-dark: scale-color($color-gray, $lightness: -30%);

// primary (UVA "Jefferson Blue")
$color-primary: #232D4B;
$color-primary-light: scale-color($color-primary, $lightness: +30%);
$color-primary-dark: scale-color($color-primary, $lightness: -30%);

// accent (UVA "Rotunda Orange")
$color-accent: #E57200;
$color-accent-light: scale-color($color-accent, $lightness: +30%);
$color-accent-dark: scale-color($color-accent, $lightness: -30%);

// warn (UVA "Emergency Red")
$color-warn: #DF1E43;
$color-warn-light: scale-color($color-warn, $lightness: +30%);
$color-warn-dark: scale-color($color-warn, $lightness: -30%);

// success (Green)
$color-success: #64B343;
$color-success-light: scale-color($color-success, $lightness: +30%);
$color-success-dark: scale-color($color-success, $lightness: -30%);

$font-size-default: 16px;
$font-size-lg: 24px;
$font-size-md: 16px;
$font-size-sm: 14px;

@mixin mat-icon {
  font-family: 'Material Icons', sans-serif;
  font-size: $font-size-lg;
}

.mat-icon {
  @include mat-icon;
}

.text-center {
  text-align: center;
}

html, body {
  padding: 1em;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: $font-size-default;
}

table {
  border: 1px solid $color-gray-light;
  background-color: white;
  width: 100%;
  text-align: left;
  border-collapse: collapse;

  th, td {
    padding: 0.5em;
  }

  td, &.blueTable th {
    border: 1px solid $color-gray-light;
  }

  tbody td {
    font-size: $font-size-sm;
  }

  tr:nth-child(even) {
    background: $color-gray-light-2;
  }

  thead {
    background-color: $color-primary-light;

    th {
      font-size: $font-size-default;
      font-weight: bold;
      color: white;
      border-left: 1px solid $color-gray-light;
    }
  }

  thead th:first-child {
    border-left: none;
  }

  tfoot {
    font-size: $font-size-default;
    font-weight: bold;
    color: white;
    background-color: $color-gray-light;

    td {
      font-size: $font-size-default;
    }

    .links {
      text-align: right;

      a {
        display: inline-block;
        background: $color-primary-light;
        color: white;
        padding: 2px 8px;
        border-radius: 5px;
      }
    }
  }
}

.btn {
  font-size: $font-size-default;
  padding: 0.5em 1em;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  white-space: nowrap;
  border: none;

  &:hover {
    text-decoration: none;
  }

  &.btn-icon {
    @include mat-icon;
    border: none;

    &.btn-default {
      color: $color-gray;
      background-color: transparent;
      border: none;

      &:hover {
        color: $color-gray-dark;
        background-color: transparent;
      }
    }

    &.btn-primary {
      color: $color-primary;
      background-color: transparent;

      &:hover {
        color: $color-primary-dark;
        background-color: transparent;
      }
    }

    &.btn-accent {
      color: $color-accent;
      background-color: transparent;

      &:hover {
        color: $color-accent-dark;
        background-color: transparent;
      }
    }

    &.btn-warn {
      color: $color-warn;
      background-color: transparent;

      &:hover {
        color: $color-warn-dark;
        background-color: transparent;
      }
    }
  }

  &.btn-default {
    color: $color-gray-dark;
    background-color: white;
    border: 1px solid $color-gray-light;

    &:hover {
      background-color: $color-gray-light-2;
    }
  }

  &.btn-primary {
    background-color: $color-primary;

    &:hover {
      background-color: $color-primary-dark;
    }
  }

  &.btn-warn {
    background-color: $color-warn;

    &:hover {
      background-color: $color-warn-dark;
    }
  }

  &.btn-accent {
    background-color: $color-accent;

    &:hover {
      background-color: $color-accent-dark;
    }
  }
}

select.multi {
  height: 600px;
}

.form-field {
  display: flex;
  max-width: 100vw;
  margin-bottom: 40px;
  padding: 2em;

  &.hidden {
    display: none;
  }

  &:nth-child(even) {
    background-color: $color-gray-light-2;
  }

  .form-field-label,
  .form-field-help,
  .form-field-input {
    width: 30%;
    text-align: left;
    margin-right: 24px;
  }

  .form-field-label {
    font-weight: bold;
    text-align: right;
  }

  .form-field-input input {
    width: 100%;
    text-align: left;

    &[type=checkbox] {
      width: 24px;
    }
  }

  .form-field-help {
    font-style: italic;
  }

  .form-field-error {
    color: $color-warn;
  }
}

.alert {
  padding: 20px;
  background-color: $color-gray;
  color: white;
  margin-bottom: 15px;
  opacity: 1;
  border-radius: 5px;
  transform: scale3d(1, 1, 1);
  transition: all 0.5s ease-in-out;

  &.warn { background-color: $color-warn; }
  &.success { background-color: $color-success; }
  &.info { background-color: $color-gray-light; color: black; }

  .btn-close {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;

    &:hover {
      color: black;
    }
  }

  &.fade-out {
    opacity: 0;
  }

  &.shrink {
    transform: scale3d(0, 0, 0);
    padding: 0;
    margin: 0;
  }
}

.highlight {
  font-weight: bolder;
  font-style: italic;
}