@plone/components/dist/quanta.css

ReactJS components for Plone

:root {
  --quanta-air: #fff;
  --quanta-space: #000;
  --quanta-denim: #021322;
  --quanta-snow: #f3f5f7;
  --quanta-smoke: #e4e8ec;
  --quanta-silver: #c3cdd5;
  --quanta-dolphin: #8296a6;
  --quanta-pigeon: #617789;
  --quanta-iron: #4a5b68;
  --quanta-arctic: #e2f1fd;
  --quanta-sky: #c5e3fc;
  --quanta-azure: #7cc0f8;
  --quanta-cobalt: #2597f4;
  --quanta-sapphire: #0b78d0;
  --quanta-royal: #085696;
  --quanta-ballet: #fee9e7;
  --quanta-flamingo: #fcd0ca;
  --quanta-poppy: #f9a094;
  --quanta-rose: #f54e38;
  --quanta-candy: #d0220b;
  --quanta-wine: #a91c09;
  --quanta-cream: #fcf3cf;
  --quanta-banana: #faeaad;
  --quanta-lemmon: #f6d355;
  --quanta-gold: #b48f09;
  --quanta-dijon: #917308;
  --quanta-bronze: #6b5506;
  --quanta-daiquiri: #e2f7de;
  --quanta-mint: #c5efbe;
  --quanta-celery: #8bde7c;
  --quanta-neon: #3da72a;
  --quanta-emerald: #318722;
  --quanta-turtle: #256619;
  --quanta-aqua: #d6f5f2;
  --quanta-spa: #baeee9;
  --quanta-tiffany: #74dcd4;
  --quanta-turquoise: #29a399;
  --quanta-peacock: #207e77;
  --quanta-puya: #175e58;
  --highlight-background: var(--quanta-sapphire);
  --highlight-background-pressed: var(--quanta-royal);
}

@layer plone-components.quanta {
  .q.react-aria-TextField, .q.react-aria-TextAreaField {
    position: relative;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label {
    color: var(--quanta-sapphire);
    pointer-events: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: margin-top .15s ease-in-out, margin-left .15s ease-in-out, transform .15s ease-in-out;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input,  + .react-aria-TextArea) {
    position: absolute;
    top: 10px;
    left: 12px;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input[data-focused],  + .react-aria-TextArea[data-focused]) {
    transform-origin: 0 0;
    margin-top: -30px;
    margin-left: -12px;
    transform: scale(.857143);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input:not(:placeholder-shown),  + .react-aria-TextArea:not(:placeholder-shown)) {
    transform-origin: 0 0;
    margin-top: -30px;
    margin-left: -12px;
    transform: scale(.857143);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input:not(:placeholder-shown):not(:hover):not(:active):not(:focus),  + .react-aria-TextArea:not(:placeholder-shown):not(:hover):not(:active):not(:focus)) {
    color: var(--basic-500);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input[required],  + .react-aria-TextArea[required]):after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='hsl(7, 90%25, 59%25)' d='M12 18a6 6 0 100-12 6 6 0 000 12z'/%3E%3C/svg%3E");
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input[required]:not(:placeholder-shown):not(:hover):not(:active):not(:focus),  + .react-aria-TextArea[required]:not(:placeholder-shown):not(:hover):not(:active):not(:focus)):after {
    filter: grayscale();
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input[data-invalid],  + .react-aria-TextArea[data-invalid]) {
    color: var(--quanta-candy) !important;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input[data-invalid],  + .react-aria-TextArea[data-invalid]):after {
    filter: none !important;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input[data-disabled],  + .react-aria-TextArea[data-disabled]) {
    color: var(--basic-400) !important;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Label:has( + .react-aria-Input[readonly],  + .react-aria-TextArea[readonly]) {
    color: var(--basic-500);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input {
    background-color: var(--basic-200);
    width: 100%;
    caret-color: var(--quanta-cobalt);
    color: var(--text-color);
    cursor: text;
    text-overflow: ellipsis;
    border: 0;
    border-radius: 6px;
    padding: 12px;
    transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: 0 0 rgba(2, 19, 34, 0);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input[data-hovered] {
    background-color: var(--basic-300);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input[data-focused] {
    background-color: var(--basic-50);
    box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
    outline: 0;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input[data-invalid] {
    background-color: var(--quanta-ballet);
    outline: 0;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input[data-invalid][data-focused] {
    background-color: var(--basic-50);
    box-shadow: inset 0 0 0 2px var(--quanta-rose);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input[data-disabled] {
    background-color: var(--basic-50);
    box-shadow: inset 0 0 0 1px var(--basic-300);
    color: var(--basic-300);
    pointer-events: none;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input[data-disabled] + .react-aria-Text {
    color: var(--basic-300);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input[readonly] {
    border: 1px dashed var(--basic-400);
    background-color: var(--basic-50);
    box-shadow: none;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input::placeholder {
    color: var(--basic-400);
    opacity: 0;
    transition: opacity$ time-tiny ease-in-out;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input:active::placeholder {
    opacity: 1;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Input:focus::placeholder {
    opacity: 1;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea {
    background-color: var(--basic-200);
    width: 100%;
    caret-color: var(--quanta-cobalt);
    color: var(--text-color);
    cursor: text;
    text-overflow: ellipsis;
    border: 0;
    border-radius: 6px;
    padding: 12px;
    transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: 0 0 rgba(2, 19, 34, 0);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea[data-hovered] {
    background-color: var(--basic-300);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea[data-focused] {
    background-color: var(--basic-50);
    box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
    outline: 0;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea[data-invalid] {
    background-color: var(--quanta-ballet);
    outline: 0;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea[data-invalid][data-focused] {
    background-color: var(--basic-50);
    box-shadow: inset 0 0 0 2px var(--quanta-rose);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea[data-disabled] {
    background-color: var(--basic-50);
    box-shadow: inset 0 0 0 1px var(--basic-300);
    color: var(--basic-300);
    pointer-events: none;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea[data-disabled] + .react-aria-Text {
    color: var(--basic-300);
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea[readonly] {
    border: 1px dashed var(--basic-400);
    background-color: var(--basic-50);
    box-shadow: none;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea::placeholder {
    color: var(--basic-400);
    opacity: 0;
    transition: opacity$ time-tiny ease-in-out;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea:active::placeholder {
    opacity: 1;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-TextArea:focus::placeholder {
    opacity: 1;
  }

  :is(.q.react-aria-TextField, .q.react-aria-TextAreaField) .react-aria-Text {
    color: var(--basic-500);
    letter-spacing: .012em;
    padding-top: 3px;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.71429;
  }

  .q.react-aria-Select .react-aria-Label {
    color: var(--quanta-sapphire);
  }

  .q.react-aria-Select .react-aria-Button {
    background-color: var(--basic-200);
    caret-color: var(--quanta-cobalt);
    border: 0;
    padding: 12px;
    box-shadow: 0 0 rgba(2, 19, 34, 0);
  }

  .q.react-aria-Select .react-aria-Button span[aria-hidden] {
    color: var(--text-color);
    background: none;
  }

  .q.react-aria-Select .react-aria-Button[data-hovered] {
    background-color: var(--basic-300);
  }

  .q.react-aria-Select .react-aria-Button[data-focused] {
    background-color: var(--basic-50);
    box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
    outline: 0;
  }

  .q.react-aria-Select .react-aria-Button[data-pressed] {
    background-color: var(--basic-50);
    box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
    outline: 0;
  }

  .q.react-aria-Popover[data-trigger="Select"] .react-aria-ListBoxItem {
    --highlight-background: var(--basic-300);
    --highlight-foreground: var(--text-color);
  }

  .react-aria-Table {
    --plone-table-header-color: var(--quanta-sapphire);
    --plone-table-cell-border-bottom: 1px solid var(--quanta-smoke);
  }

  .q.react-aria-Popover {
    --border-color: transparent;
  }
}

/*# sourceMappingURL=quanta.css.map */