@vidal-community/vidal-web-components/vidal-search/css.js

Vidal Web Components

import { css } from 'lit';
export const style = css `
  :host {
    width: 100%;
  }

  .spinner {
    font-size: 3rem;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: flex-start;
  }

  .spinner > img {
    animation: rotationSpinner 4s infinite linear;
  }

  @keyframes rotationSpinner {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  #search-container {
    width: 100%;
    height: 100%;
    background: transparent;
  }

  #search-input-container {
    margin-top: 25px;
  }

  #search-input-wrapper {
    padding: 4px 4px 4px 18px;
    width: 500px;
    height: 53px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(206, 206, 212);
    border-radius: 2px;
    box-sizing: border-box;
  }

  #search-input-content {
    justify-content: space-between;
    padding: 0;
    gap: 10px;
    width: 500px;
    height: 45px;
  }

  #search-input {
    padding: 0;
    width: 290px;
    height: 45px;
  }

  #search-input input {
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: #444c62;
  }

  #search-input-helper {
    z-index: 1;
    position: absolute;
    width: fit-content;
    height: 42px;
    /* left: 41.39px; */
    /* top: 132px; */
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: rgb(116, 116, 116);
    margin-top: 180px;
  }

  #drug-types {
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 500px;
    padding: 10px 4px 10px 18px;
  }

  .filter {
    align-items: center;
    gap: 5px 3px;
  }

  #active-excipients-filter-wrapper
    > .filter
    > input[type='checkbox']:not(:last-child) {
    margin-bottom: 3px !important;
  }

  .filter label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: -0.09px;
    color: #444c62;
  }

  #active-excipients {
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    width: 500px;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    transition: max-height 0.25s ease-out;
    padding: 4px 4px 4px 4px;
    gap: 10px;
    background: transparent;
    border-radius: 2px;
    box-sizing: border-box;
  }

  #active-excipients.opened {
    transition:
      max-height 0.5s,
      visibility 0.5s,
      opacity 0.5s;
    visibility: visible;
    opacity: 1;
    max-height: 190px;
  }

  #active-excipient-search {
    position: absolute;
    margin-bottom: 5px;
    z-index: 2;
  }

  #active-excipient-search input[type='text'] {
    align-items: flex-start;
    padding: 4px 4px 4px 4px;
    gap: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(206, 206, 212);
    border-radius: 2px;
    width: 480px;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
  }

  #active-excipients-filter-wrapper {
    position: relative;
    overflow: auto;
    margin-top: 35px;
    height: 89px;
  }

  #active-excipients-display-button {
    box-sizing: border-box;

    /* Auto layout */

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 308px;
    height: 34px;

    padding: 8px;
    gap: 6px;

    background: #ffffff;
    border: 1px solid rgba(204, 0, 51, 0.5);
    border-radius: 2px;
    font-family: 'Inter', serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    /* identical to box height */

    /* Light/Brand/Main */

    color: #cc0033;
  }

  #filter-types {
    /* Auto layout */

    padding: 0;

    width: 129px;
    height: 45px;

    background: #ffffff;
    border-radius: 4px;
  }

  #filter-types-button {
    padding: 12px 10px 12px 18px;
    width: 150px;
    background: #cc0033;
    border-radius: 2px;
  }

  #filter-types-inner {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 21px;
    cursor: pointer;
  }

  #filter-types-inner .label {
    width: 130px;
    height: 21px;

    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;

    color: #ffffff;
  }

  #filter-types-inner .icon {
    color: #ffffff;
    width: 20px;
    height: 20px;
  }

  #filter-types-options {
    margin-top: 5px;
    width: 179px;
    border: 1px solid lightgray;
    z-index: 3;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    background: #ffffff;
    color: #cc0033;
  }

  #filter-types-options > div {
    text-align: center;
    padding: 5px;
  }

  #filter-types-options > div:hover {
    font-size: 1.1em;
    transition: font-size 0.3s;
  }

  #filter-types-button .icon {
    width: 20px;
    height: 20px;
  }

  .filter-type-selected {
    background: #cc0033;
    color: white;
  }

  .search-by-indication-result-warning-message {
    height: 30px;
    align-items: center;
    border: 1px solid rgb(206, 206, 212);
    padding: 10px 5px;
    color: blue;
    margin: 5px 0;
  }

  .search-by-indication-result-warning-message > div {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: rgb(68, 76, 98);
  }

  .search-by-indication-result-warning-message > img {
    margin-right: 5px;
    width: fit-content;
  }

  .table {
    overflow: hidden;
    position: relative;
    width: 95%;
    justify-content: flex-start;
    padding-top: 50px;
  }

  .title-row {
    position: relative;
    justify-content: space-between;
    top: 0;
    height: 50px;
    padding: 8px;
    border-radius: 8px 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 115%;
    color: #5f6164;
  }

  .title-row span {
    justify-content: flex-start;
    align-items: center;
    margin-left: 4px;
    cursor: pointer;
  }

  .title-row span.refund-rate {
    width: 20%;
  }

  .table-body {
    height: 40vh;
    justify-content: flex-start;
    align-items: stretch;
    overflow: auto;
  }

  .row {
    cursor: pointer;
    justify-content: space-between;
    min-height: 20px;
    padding: 8px;
    transition: box-shadow 150ms ease 0s;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(206, 206, 212);
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    color: #5f6164;
  }

  .row > .drug-cell {
    justify-content: flex-start;
    align-items: center;
    margin-left: 4px;
  }

  .row > .indication-group-cell {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
  }

  .row > .indication-group-cell > .indications {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    z-index: 1;
  }

  .row .display-indications {
    position: relative;
    top: 5px;
    width: 12.5px;
    height: 7.13px;
    cursor: pointer;
  }

  .row > .indication-group-cell > .indications.opened {
    display: flex;
  }

  .row > .indication-group-cell > .indications > .indication-cell {
    min-height: 20px;
    padding: 8px;
    margin-left: 24px;
    box-sizing: border-box;
  }

  .row
    > .indication-group-cell
    > .indications
    > .indication-cell:not(:last-child) {
    border-bottom: 1px solid #ceced4;
  }

  .row > .indication-group-cell > .indications > .indication-cell:first-child {
    margin-top: 10px;
  }

  .row:not(.opened):hover,
  .indication-cell:hover {
    background: #ececee;
  }

  .row .label,
  .title-row .label {
    width: 60%;
  }

  .price {
    width: 20%;
  }

  .price.drug-cell {
    padding-left: 50px;
  }

  .refund-rate.drug-cell {
    padding-left: 40px;
  }

  .refund-rate {
    width: 20%;
    padding-left: 20px;
  }

  .title-row .refund-rate {
    cursor: default;
  }

  .title-row span.sort-asc:before {
    content: '▲';
  }

  .title-row span.sort-dsc:before {
    content: '▼';
  }

  /* width */
  ::-webkit-scrollbar {
    width: 8px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #ececee;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #ceced4;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
`;
//# sourceMappingURL=css.js.map