fleet/frontend/pages/software/ManageSoftwarePage/_styles.scss

.manage-software-page {
  &__header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;

    .button-wrap {
      display: flex;
      justify-content: flex-end;
      min-width: 266px;
    }
  }

  &__manage-automations {
    padding: $pad-small $pad-medium;
  }

  &__header {
    display: flex;
    align-items: center;

    .form-field {
      margin-bottom: 0;
    }
  }

  &__text {
    margin-right: $pad-large;
  }

  &__title {
    font-size: $large;
  }

  &__description {
    margin: 0;
    margin-bottom: $pad-large;
    max-width: 75%;
    @media (min-width: $break-990) {
      max-width: none;
    }

    h2 {
      text-transform: uppercase;
      color: $core-fleet-black;
      font-weight: $regular;
      font-size: $small;
    }

    p {
      color: $ui-fleet-black-75;
      margin: 0;
      font-size: $x-small;
      font-style: italic;
    }
  }

  &__table {
    .table-container {
      &__header-left {
        .controls {
          .form-field--dropdown {
            margin: 0;
          }
          .manage-software-page__vuln_dropdown {
            width: 225px;
            .Select-menu-outer {
              width: 364px;
              max-height: 310px;
              .Select-menu {
                max-height: none;
              }
            }
            .Select-value {
              padding-left: $pad-medium;
              padding-right: $pad-medium;
              &::before {
                display: inline-block;
                position: absolute;
                padding: 5px 0 0 0; // centers spin
                content: url(../assets/images/icon-filter-black-16x16@2x.png);
                transform: scale(0.5);
                height: 26px;
                left: 2px;
              }
            }
            .Select-value-label {
              padding-left: $pad-large;
              font-size: $small !important;
            }
          }
        }
      }
      &__search {
        width: 100%;
        .search-field__input-wrapper {
          width: 100%;
        }
        @media (min-width: $break-768) {
          width: auto;
          .search-field__input-wrapper {
            width: 411px;
          }
        }
      }
      &__data-table-block {
        .data-table-block {
          .data-table__table {
            tr {
              .software-link {
                opacity: 0;
                transition: opacity 250ms;
              }

              &:hover {
                .software-link {
                  opacity: 1;
                }
              }
            }

            thead {
              .name__header {
                width: $col-md;
              }
              .version__header {
                width: 0;
              }
              .vulnerabilities__header {
                display: none;
                width: 0;
              }
              .source__header {
                display: none;
                width: 0;
              }
              .hosts_count__header {
                width: auto;
                border-right: 0;
              }
              @media (min-width: $break-990) {
                .vulnerabilities__header {
                  display: table-cell;
                }
              }
              @media (min-width: $break-990) {
                .version__header {
                  width: $col-md;
                }
              }
              @media (min-width: $break-1400) {
                .source__header {
                  display: table-cell;
                }
              }
            }

            tbody {
              .name__cell {
                width: $col-md;

                // Tooltip does not get cut off
                .children-wrapper {
                  overflow: initial;
                }
              }
              .version__cell {
                width: 0;
              }
              .source__cell {
                display: none;
                width: 0;
              }
              .vulnerabilities__cell {
                display: none;
                width: 0;
                span {
                  display: inline;
                }
                .text-muted {
                  color: $ui-fleet-black-50;
                }
              }
              .hosts_count__cell {
                width: auto;
                .hosts-cell__wrapper {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .hosts-cell__link {
                    display: flex;
                    white-space: nowrap;
                  }
                }
              }
              @media (min-width: $break-990) {
                .version_cell {
                  width: $col-md;
                }
              }
              @media (min-width: $break-990) {
                .vulnerabilities__cell {
                  display: table-cell;
                }
              }
              @media (min-width: $break-1400) {
                .source__cell {
                  display: table-cell;
                }
              }
            }
          }
        }
      }
    }
  }
}