@plone/components/dist/quanta.css.map

ReactJS components for Plone

{"version":3,"mappings":"ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEAA;EACE;;;;EAIE;;;;;;;;;EAWA;;;;;;EAMA;;;;;;;EAAA;;;;;;;EAcA;;;;EAWA;;;;EAQA;;;;EAWA;;;;EAME;;;;EAKF;;;;EAOA;;;;EAUA;;;;;;;;;;;;;;EAgBE;;;;EAIA;;;;;;EAMA;;;;;EAIE;;;;;EAMF;;;;;;;EAME;;;;EAKF;;;;;;EAMA;;;;;;EAMA;;;;EAAA;;;;EA3DF;;;;;;;;;;;;;;EAgBE;;;;EAIA;;;;;;EAMA;;;;;EAIE;;;;;EAMF;;;;;;;EAME;;;;EAKF;;;;;;EAMA;;;;;;EAMA;;;;EAAA;;;;EAMF;;;;;;;;;ED3JA;;;;EAIA;;;;;;;;EAOE;;;;;EAKA;;;;EAIA;;;;;;EAAA;;;;;;EAUF;;;;;EGjCF;;;;;ECAA","sources":["src/styles/quanta/main.css","src/styles/quanta/colors.css","src/styles/quanta/theme.css","src/styles/quanta/Popover.css","src/styles/quanta/TextField.css","src/styles/quanta/Select.css","src/styles/quanta/Table.css"],"sourcesContent":["@import './colors.css';\n@import './theme.css';\n\n/* Components */\n@import './TextField.css';\n@import './Select.css';\n@import './Table.css';\n@import './Popover.css';\n",":root {\n  --quanta-air: #fff;\n  --quanta-space: #000;\n  --quanta-denim: #021322;\n\n  --quanta-snow: #f3f5f7;\n  --quanta-smoke: #e4e8ec;\n  --quanta-silver: #c3cdd5;\n  --quanta-dolphin: #8296a6;\n  --quanta-pigeon: #617789;\n  --quanta-iron: #4a5b68;\n\n  --quanta-arctic: #e2f1fd;\n  --quanta-sky: #c5e3fc;\n  --quanta-azure: #7cc0f8;\n  --quanta-cobalt: #2597f4;\n  --quanta-sapphire: #0b78d0;\n  --quanta-royal: #085696;\n\n  --quanta-ballet: #fee9e7;\n  --quanta-flamingo: #fcd0ca;\n  --quanta-poppy: #f9a094;\n  --quanta-rose: #f54e38;\n  --quanta-candy: #d0220b;\n  --quanta-wine: #a91c09;\n\n  --quanta-cream: #fcf3cf;\n  --quanta-banana: #faeaad;\n  --quanta-lemmon: #f6d355;\n  --quanta-gold: #b48f09;\n  --quanta-dijon: #917308;\n  --quanta-bronze: #6b5506;\n\n  --quanta-daiquiri: #e2f7de;\n  --quanta-mint: #c5efbe;\n  --quanta-celery: #8bde7c;\n  --quanta-neon: #3da72a;\n  --quanta-emerald: #318722;\n  --quanta-turtle: #256619;\n\n  --quanta-aqua: #d6f5f2;\n  --quanta-spa: #baeee9;\n  --quanta-tiffany: #74dcd4;\n  --quanta-turquoise: #29a399;\n  --quanta-peacock: #207e77;\n  --quanta-puya: #175e58;\n}\n",":root {\n  --highlight-background: var(--quanta-sapphire);\n  --highlight-background-pressed: var(--quanta-royal);\n}\n","@layer plone-components.quanta {\n  .q.react-aria-Popover {\n    --border-color: transparent;\n  }\n}\n","@layer plone-components.quanta {\n  .q.react-aria-TextField,\n  .q.react-aria-TextAreaField {\n    position: relative;\n\n    .react-aria-Label {\n      color: var(--quanta-sapphire);\n      pointer-events: none;\n      touch-action: none;\n      transition:\n        margin-top 0.15s ease-in-out,\n        margin-left 0.15s ease-in-out,\n        transform 0.15s ease-in-out;\n      user-select: none;\n    }\n\n    .react-aria-Label:has(+ .react-aria-Input, + .react-aria-TextArea) {\n      position: absolute;\n      top: 10px;\n      left: 12px;\n    }\n\n    .react-aria-Label:has(\n        + .react-aria-Input[data-focused],\n        + .react-aria-TextArea[data-focused]\n      ),\n    .react-aria-Label:has(\n        + .react-aria-Input:not(:placeholder-shown),\n        + .react-aria-TextArea:not(:placeholder-shown)\n      ) {\n      margin-top: -30px;\n      margin-left: -12px;\n      transform: scale(0.8571428571, 0.8571428571);\n      transform-origin: 0 0;\n    }\n\n    .react-aria-Label:has(\n        + .react-aria-Input:not(:placeholder-shown):not(:hover):not(\n            :active\n          ):not(:focus),\n        + .react-aria-TextArea:not(:placeholder-shown):not(:hover):not(\n            :active\n          ):not(:focus)\n      ) {\n      color: var(--basic-500);\n    }\n\n    .react-aria-Label:has(\n        + .react-aria-Input[required],\n        + .react-aria-TextArea[required]\n      )::after {\n      /* https://yoksel.github.io/url-encoder/ */\n      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\");\n    }\n\n    .react-aria-Label:has(\n        + .react-aria-Input[required]:not(:placeholder-shown):not(:hover):not(\n            :active\n          ):not(:focus),\n        + .react-aria-TextArea[required]:not(:placeholder-shown):not(\n            :hover\n          ):not(:active):not(:focus)\n      )::after {\n      filter: grayscale(1);\n    }\n\n    .react-aria-Label:has(\n        + .react-aria-Input[data-invalid],\n        + .react-aria-TextArea[data-invalid]\n      ) {\n      color: var(--quanta-candy) !important;\n\n      &::after {\n        filter: none !important;\n      }\n    }\n\n    .react-aria-Label:has(\n        + .react-aria-Input[data-disabled],\n        + .react-aria-TextArea[data-disabled]\n      ) {\n      color: var(--basic-400) !important;\n    }\n\n    .react-aria-Label:has(\n        + .react-aria-Input[readonly],\n        + .react-aria-TextArea[readonly]\n      ) {\n      color: var(--basic-500);\n    }\n  }\n\n  .q.react-aria-TextField,\n  .q.react-aria-TextAreaField {\n    .react-aria-Input,\n    .react-aria-TextArea {\n      width: 100%;\n      padding: 12px;\n      border: 0;\n      border-radius: 6px;\n      background-color: var(--basic-200);\n      box-shadow: 0 0 0 rgba(2, 19, 34, 0);\n      caret-color: var(--quanta-cobalt);\n      color: var(--text-color);\n      cursor: text;\n      text-overflow: ellipsis;\n      transition:\n        background-color 0.15s ease-in-out,\n        box-shadow 0.15s ease-in-out;\n\n      &[data-hovered] {\n        background-color: var(--basic-300);\n      }\n\n      &[data-focused] {\n        background-color: var(--basic-50);\n        box-shadow: inset 0 0 0 2px var(--quanta-cobalt);\n        outline: 0;\n      }\n\n      &[data-invalid] {\n        background-color: var(--quanta-ballet);\n        outline: 0;\n\n        &[data-focused] {\n          background-color: var(--basic-50);\n          box-shadow: inset 0 0 0 2px var(--quanta-rose);\n        }\n      }\n\n      &[data-disabled] {\n        background-color: var(--basic-50);\n        box-shadow: inset 0 0 0 1px var(--basic-300);\n        color: var(--basic-300);\n        pointer-events: none;\n\n        & + .react-aria-Text {\n          color: var(--basic-300);\n        }\n      }\n\n      &[readonly] {\n        border: 1px dashed var(--basic-400);\n        background-color: var(--basic-50);\n        box-shadow: none;\n      }\n\n      &::placeholder {\n        color: var(--basic-400);\n        opacity: 0;\n        transition: opacity $time-tiny ease-in-out;\n      }\n\n      &:active::placeholder,\n      &:focus::placeholder {\n        opacity: 1;\n      }\n    }\n\n    .react-aria-Text {\n      padding-top: 3px;\n      color: var(--basic-500);\n      font-size: 0.9rem;\n      font-weight: 500;\n      letter-spacing: 0.012em;\n      line-height: 1.714285714285;\n    }\n  }\n}\n","@layer plone-components.quanta {\n  /* Quanta does not have to redefine colors, but it has to override the original ones coming\nfrom the basic styles. Then, if people override the basic ones, then they won't get overridden in Quanta. */\n  .q.react-aria-Select {\n    .react-aria-Label {\n      color: var(--quanta-sapphire);\n    }\n\n    .react-aria-Button {\n      padding: 12px;\n      border: 0;\n      background-color: var(--basic-200);\n      box-shadow: 0 0 0 rgba(2, 19, 34, 0);\n      caret-color: var(--quanta-cobalt);\n\n      span[aria-hidden] {\n        background: transparent;\n        color: var(--text-color);\n      }\n\n      &[data-hovered] {\n        background-color: var(--basic-300);\n      }\n\n      &[data-focused],\n      &[data-pressed] {\n        background-color: var(--basic-50);\n        box-shadow: inset 0 0 0 2px var(--quanta-cobalt);\n        outline: 0;\n      }\n    }\n  }\n\n  .q.react-aria-Popover[data-trigger='Select'] {\n    .react-aria-ListBoxItem {\n      --highlight-background: var(--basic-300);\n      --highlight-foreground: var(--text-color);\n    }\n  }\n}\n","@layer plone-components.quanta {\n  .react-aria-Table {\n    --plone-table-header-color: var(--quanta-sapphire);\n    --plone-table-cell-border-bottom: 1px solid var(--quanta-smoke);\n  }\n}\n"],"names":[]}