diff --git a/.github/instructions/a11y.instructions.md b/.github/instructions/a11y.instructions.md index 9772e9e5f07..c6ebdae7d52 100644 --- a/.github/instructions/a11y.instructions.md +++ b/.github/instructions/a11y.instructions.md @@ -364,7 +364,7 @@ All graphics include `img`, `svg`, icon fonts, and emojis. ## Screen-reader-only text (MUST) - Hide text that is only for assistive technology with the `sr-only` class, in Vue, PHP-rendered HTML, and Twig alike. It's defined in `packages/craftcms-ui/src/styles/cp.css` (and by Tailwind), which every control panel page loads. -- Do not use `visually-hidden`, even though older code does. It only exists in the legacy stylesheet (`packages/craftcms-legacy/cp/src/css/_main.scss`), which Inertia pages don't load, so the text shows on screen there. +- Do not use `visually-hidden`, even though older code does. Use `sr-only`, so there is one way to hide text visually. ## Live regions (MUST) diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md index 629dd34f6f3..f0f85da5651 100644 --- a/CHANGELOG-WIP.md +++ b/CHANGELOG-WIP.md @@ -444,7 +444,6 @@ - `CraftCms\Cms\Cp\FormFields` - `CraftCms\Cms\Cp\Html\ContentHtml` - `CraftCms\Cms\Cp\Html\ElementHtml` - - `CraftCms\Cms\Cp\Html\ElementIndexHtml` - `CraftCms\Cms\Cp\Html\MenuHtml` - `CraftCms\Cms\Cp\Html\PreviewHtml` - `CraftCms\Cms\Cp\Html\StatusHtml` @@ -808,7 +807,7 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/ - Added `Cp.$assistant`, with `addContext()`, `removeContext()`, `getContext()`, `registerContextSource()`, and `registerTextExpander()` methods, for adding items to Ask AI’s context, its “Add context” menu, and text expanders in its message box. See `docs/ask-ai.md`. ([#20109](https://github.com/craftcms/cms/pull/20109)) - `` now spaces `
` elements in its slotted content as it does the dividers it renders from its `actions`. ([#20109](https://github.com/craftcms/cms/pull/20109)) - Added `CraftCms\Cms\Cp\CommandPalette\CommandPaletteItem`, `PageRegistry`, `ActionRegistry`, and `SearchProviderRegistry`, which plugins can use to add pages, actions, and search providers to the command palette, and `CraftCms\Cms\Cp\CommandPalette\Contracts\SearchProvider` and `CraftCms\Cms\Cp\CommandPalette\SearchProviders\ElementSearchProvider`, for searching custom content or element types. ([#20081](https://github.com/craftcms/cms/pull/20081)) -- Added `Craft.commandPalette`, with `open()`, `close()`, `registerActions()`, `registerProvider()`, and `registerView()` methods, for opening the command palette and adding page actions, client-side search providers, and views to it. A page’s own action menus are listed as command palette actions when they’re within an element with a `data-command-palette-actions` attribute. ([#20081](https://github.com/craftcms/cms/pull/20081)) +- Added `CommandPalette` to the `@craftcms/cp` import-map module, with `open()`, `close()`, `registerActions()`, `registerProvider()`, and `registerView()` methods, for opening the command palette and adding page actions, client-side search providers, and views to it. A page’s own action menus are listed as command palette actions when they’re within an element with a `data-command-palette-actions` attribute. ([#20081](https://github.com/craftcms/cms/pull/20081)) - Added a renderer-neutral control panel UI system with shared PHP and Vue rendering, extensible Nodes and Controls, nested and refreshable scopes, changed-only submission, and integration with configurable component settings, fields, and field layouts. ([#19384](https://github.com/craftcms/cms/pull/19384)) - Removed the `assets/upload` and `assets/replace-file` multipart endpoints and legacy uploader events and overrides, in favor of upload sessions. ([#19604](https://github.com/craftcms/cms/pull/19604)) - Removed HTMX from the control panel. Plugins that rely on it should bundle it themselves. ([#19836](https://github.com/craftcms/cms/pull/19836)) @@ -842,6 +841,17 @@ Craft 6 now uses [Laravel's authorization system](https://laravel.com/docs/12.x/ - Removed `Cp.$axios`. - `Craft.Preview` is now only available when `craftcms/yii2-adapter` is installed, as a shim over Live Preview that fires Craft 5’s event names. Constructing it no longer creates a preview; `open()` goes to the element’s standalone preview page instead. `getActivePreview()` from `@craftcms/cp` should be used instead. ([#19964](https://github.com/craftcms/cms/pull/19964)) - Removed the `Craft.Accordion` and `Craft.EnvVarGenerator` control panel JavaScript classes. ([#19323](https://github.com/craftcms/cms/pull/19323)) +- Removed the `Craft.ImageUpload` control panel JavaScript class. +- `Craft.AssetImageEditor`, `Craft.GroupedEntryTypeManager`, `Craft.RecoveryCodesSetup`, `Craft.SortableCheckboxSelect`, and `Craft.TagSelectInput` are now provided by the Yii2 adapter. +- The legacy element index is now rendered only by the Yii2 adapter, through the `elementIndex()` Twig function and `craft\helpers\Cp::elementIndexHtml()`. Templates that extend `_layouts/elementindex` always get the Vue element index. +- The legacy element index JavaScript is now provided by the Yii2 adapter: `Craft.createElementIndex()`, `Craft.registerElementIndexClass()`, `Craft.BaseElementIndex`, `Craft.BaseElementIndexView` and its subclasses, `Craft.AssetIndex`, `Craft.CategoryIndex`, `Craft.EntryIndex`, `Craft.UserIndex`, `Craft.Structure`, `Craft.StructureDrag`, `Craft.ProgressBar`, `Craft.ElementTableSorter`, `Craft.IntervalManager`, `Craft.PromptHandler`, and `Craft.openCustomizeSourcesModal()`. +- `Craft.AdminTable` and `Craft.DataTableSorter` are now provided by the Yii2 adapter. +- `Craft.ui` and `Craft.EditableTable` are now provided by the Yii2 adapter. +- `Craft.ElementEditor` and `Craft.ElementEditorSlideout` are now provided by the Yii2 adapter. Core’s element editors, slideouts included, all use the Vue editor. +- `Craft.CP` and `Craft.cp` are now provided by the Yii2 adapter. Control panel messages, the element clipboard and screen reader announcements no longer use them. `showNotice()`, `showSuccess()`, `showError()`, `copyElements()` and `announce()` are exported from `@craftcms/cp`. +- The legacy `Craft` helpers (`Craft.t()`, `Craft.sendActionRequest()`, `Craft.getUrl()`, `Craft.initUiElements()` and the rest of `Craft.js`), its jQuery plugins (`$.fn.disclosureMenu()`, `$.fn.menubtn()`, `$.fn.formsubmit()`…) and `Craft.queue` are now provided by the Yii2 adapter. Core uses `@craftcms/cp` and `@craftcms/ui` modules instead. +- Removed the `Craft.FocalPoint` and `Craft.Updater` control panel JavaScript classes. The image preview and the updater now start themselves from their markup. +- Added `AuthChallengeForm`, `AssetSelectorController`, `ElementSelectorController`, `Uploads`, `createElementSelectorModal`, `highlighter`, and `registerElementSelectorController` to the `@craftcms/cp` import-map module. Control panel plugin code should import them from there; they’re no longer `Craft.*` globals, except `Craft.createElementSelectorModal` and `Craft.highlighter`, which the Yii2 adapter still provides. - Removed the classic (pre-3.2) `Craft.LivePreview` control panel JavaScript class, which Craft hasn’t used since 3.2. ([#19964](https://github.com/craftcms/cms/pull/19964)) - Deprecated the `Craft.LightSwitch`, `Craft.InfoIcon`, `Craft.ColorInput`, `Craft.PasswordInput`, `Craft.IconPicker`, `Craft.SlidePicker`, `Craft.SlideRuleInput`, and `Craft.Tooltip` control panel JavaScript classes, along with the `.infoicon` jQuery plugin. The corresponding `@craftcms/ui` web components should be used instead. - Deprecated the `Craft.SortableCheckboxSelect` control panel JavaScript class. `` should be used instead. ([#20036](https://github.com/craftcms/cms/pull/20036)) diff --git a/docs/messages.md b/docs/messages.md index 2feceabe6c3..83e992ed3d7 100644 --- a/docs/messages.md +++ b/docs/messages.md @@ -352,20 +352,16 @@ window.dispatchEvent( ); ``` -`Craft.cp.displayNotification()` still returns the `Craft.CP.Notification` instance, so existing +`Craft.cp.displayNotification()` (with the Yii2 adapter) still returns the notification, so existing code that calls `.close()` or listens for `show` keeps working. ## The Default Display -The default display is the stack of messages in a corner of the screen. It's drawn by -`Craft.CP.Notification` (in `packages/craftcms-legacy/cp/src/js/CP.js`) into the `` -element, and styled by `resources/css/messages.css`. It's modelled on +The default display is the stack of messages in a corner of the screen. Each message is a +`Notification` (`resources/js/modules/messages/notification.ts`), drawn into the `` +element, which manages the stack, and styled by `resources/css/messages.css`. It's modelled on [Sonner](https://sonner.emilkowal.ski). -> The renderer is still the legacy class because code holds on to the instance `display*()` -> returns (to call `.close()` or listen for `show`), and the "Entry copied." card extends it. -> Porting it is deferred; the queue in front of it doesn't depend on how it draws. - ### Stacking The newest message sits nearest the screen edge, with up to four more stacked behind it. Older diff --git a/docs/uploads.md b/docs/uploads.md index 81e68e449ed..b86727540d0 100644 --- a/docs/uploads.md +++ b/docs/uploads.md @@ -139,10 +139,12 @@ The contract has five methods: - `complete()` verifies the stored bytes and returns an `UploadedFile` on the temporary disk. It must tolerate retries after storage completion. - `abort()` removes incomplete transfers and completed temporary objects. It must tolerate retries. -Register the matching frontend transport in your plugin’s JavaScript, after the uploads entry has loaded. A plugin with a fixed endpoint only needs setup: +Register the matching frontend transport in your plugin’s JavaScript. In the control panel, import `Uploads` from `@craftcms/cp`. A plugin with a fixed endpoint only needs setup: ```js -Craft.Uploads.registerTransport('cloud', (uppy) => { +import {Uploads} from '@craftcms/cp'; + +Uploads.registerTransport('cloud', (uppy) => { uppy.use(CloudUploadPlugin, {endpoint: '/cloud/upload'}); }); ``` @@ -150,7 +152,7 @@ Craft.Uploads.registerTransport('cloud', (uppy) => { If configuration varies per file, return a preparation callback: ```js -Craft.Uploads.registerTransport('cloud', (uppy) => { +Uploads.registerTransport('cloud', (uppy) => { uppy.use(CloudUploadPlugin); return (fileId, {session}) => { @@ -179,7 +181,7 @@ The registration callback configures one shared Uppy instance per transport. It The request helper handles cancellation and normalizes backend errors; it only accepts same-origin URLs. Call `beginCompletion()` before an irreversible storage commit. Custom plugins advertise pause/resume support through Uppy’s `capabilities.resumableUploads` state and handle its per-file pause/resume events. Use the Uppy plugin lifecycle for transfer progress, failure, retry, and cancellation; Craft retains session creation and finalization. Uppy owns concurrency; queued files remain in the uploading state. Store session settings per file, since files with different destinations and headers share the instance. -`registerTransport` is also exported from `resources/js/uploads.ts`. The control panel exposes `Craft.Uploads` automatically; standalone pages must load the uploads entry. An existing registration can be replaced before its first use. Attempting to replace it after its Uppy instance has been created throws an error. An unregistered name fails explicitly. +Pages outside the control panel don’t have `@craftcms/cp`. They load the `resources/js/uploads.ts` entry and use `Craft.Uploads.registerTransport()` instead. An existing registration can be replaced before its first use. Attempting to replace it after its Uppy instance has been created throws an error. An unregistered name fails explicitly. The shared transfer endpoint loads and locks the session, verifies ownership and expiry, and reauthorizes the destination before calling `handleRequest()`. It persists the uploader’s session changes afterward. DELETE requests are reserved for cleanup: ownership is still checked, but expiry and destination authorization are skipped. Uploaders must reject non-cleanup operations sent with DELETE. The S3 transport uses DELETE to request an abort signature and POST for other signatures. Frontend request helpers should pass `{signal: null}` for cleanup after cancellation. @@ -189,7 +191,7 @@ Uploaders are cached by name. Keep upload-specific state on the session and reso Craft handles session ownership and expiry; Uppy handles transfer retries and progress. The built-in tus endpoint supports HEAD, PATCH, termination, and expiration. Craft creates sessions through its JSON endpoints, so the tus creation extension is not exposed. The selected handler authorizes the destination and processes the completed file. The control panel exposes its native picker through `Craft.Uploaders.Uploader`. Core modules import `Uploader` from `resources/js/modules/uploader/uploader.ts`. Its constructor receives an `HTMLElement` and plain `UploaderSettings`; file inputs, drop zones, and paste zones accept native elements or arrays of elements. Completion and progress use the `on` callbacks. -Legacy uploader subclasses, filesystem-specific picker overrides, and jQuery upload events are no longer supported. Integrations customize file transfers through the backend uploader contract and `Craft.Uploads.registerTransport()`. +Legacy uploader subclasses, filesystem-specific picker overrides, and jQuery upload events are no longer supported. Integrations customize file transfers through the backend uploader contract and `Uploads.registerTransport()`. ## Migrating existing integrations diff --git a/package.json b/package.json index 75db8ca5c4d..1cf93589395 100644 --- a/package.json +++ b/package.json @@ -111,6 +111,7 @@ "@vueuse/shared": "^14.3.0", "d3": "catalog:", "fabric": "^7.4.0", + "iframe-resizer": "^4.4.5", "laravel-vite-plugin": "^3.1.0", "lit": "catalog:", "overtype": "^2.4.0", diff --git a/packages/craftcms-legacy/cp/Ttf2Woff2Plugin.js b/packages/craftcms-legacy/cp/Ttf2Woff2Plugin.js deleted file mode 100644 index afdfd0efff1..00000000000 --- a/packages/craftcms-legacy/cp/Ttf2Woff2Plugin.js +++ /dev/null @@ -1,36 +0,0 @@ -const path = require('path'); -const fs = require('fs'); -const tff2woff2 = require('ttf2woff2'); - -class Ttf2Woff2Plugin { - static defaultOptions = { - src: './src/fonts', - }; - - constructor(options = {}) { - this.options = { - ...Ttf2Woff2Plugin.defaultOptions, - ...options, - }; - - this.src = path.resolve(__dirname, this.options.src); - } - - apply(compiler) { - compiler.hooks.beforeRun.tap('Ttf2Woff2Plugin', () => { - const files = fs.readdirSync(this.src); - - files.forEach((file) => { - if (path.extname(file) === '.ttf') { - const input = fs.readFileSync(path.resolve(this.src, file)); - fs.writeFileSync( - path.resolve(this.src, file.replace('.ttf', '.woff2')), - tff2woff2(input) - ); - } - }); - }); - } -} - -module.exports = Ttf2Woff2Plugin; diff --git a/packages/craftcms-legacy/cp/src/Craft.js b/packages/craftcms-legacy/cp/src/Craft.js deleted file mode 100644 index 9435aaaed6f..00000000000 --- a/packages/craftcms-legacy/cp/src/Craft.js +++ /dev/null @@ -1,40 +0,0 @@ -/* jshint esversion: 6 */ -// Import CSS -import './css/craft.scss'; -import './css/charts.scss'; - -// Import JS -// Load Craft first -import './js/Craft.js'; - -// UI -import './js/UI.js'; - -// Utilities -import './js/Queue.js'; - -// Then load all base scripts -import './js/BaseElementIndex.js'; -import './js/BaseElementIndexView.js'; - -// Modals - -// Element thumb loader - -// Finally load the remaining files -import './js/AdminTable.js'; -import './js/AssetIndex.js'; -import './js/AssetsFieldSettings'; -import './js/CP.js'; -import './js/CardsElementIndexView.js'; -import './js/CategoryIndex.js'; -import './js/ElementEditor.js'; -import './js/ElementFieldSettings.js'; -import './js/EntryIndex.js'; -import './js/ImageUpload.js'; -import './js/ProgressBar.js'; -import './js/Structure.js'; -import './js/StructureDrag.js'; -import './js/TableElementIndexView.js'; -import './js/ThumbsElementIndexView.js'; -import './js/UserIndex.js'; diff --git a/packages/craftcms-legacy/cp/src/craft-font/selection.json b/packages/craftcms-legacy/cp/src/craft-font/selection.json deleted file mode 100644 index c4b11973446..00000000000 --- a/packages/craftcms-legacy/cp/src/craft-font/selection.json +++ /dev/null @@ -1,2675 +0,0 @@ -{ - "IcoMoonType": "selection", - "icons": [ - { - "icon": { - "paths": [ - "M576 218.6v485.4c0 35.4-28.6 64-64 64s-64-28.6-64-64v-485.4l-146.8 146.8c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l256-256c25-25 65.6-25 90.6 0l256 256c25 25 25 65.6 0 90.6s-65.6 25-90.6 0l-146.6-146.8zM128 704h256c0 70.6 57.4 128 128 128s128-57.4 128-128h256c70.6 0 128 57.4 128 128v64c0 70.6-57.4 128-128 128h-768c-70.6 0-128-57.4-128-128v-64c0-70.6 57.4-128 128-128zM864 912c26.51 0 48-21.49 48-48s-21.49-48-48-48v0c-26.51 0-48 21.49-48 48s21.49 48 48 48v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["upload"] - }, - "attrs": [{}], - "properties": { - "order": 122, - "id": 114, - "name": "upload", - "prevSize": 32, - "code": 59682, - "ligatures": "upload" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 0 - }, - { - "icon": { - "paths": [ - "M576 64c0-35.4-28.6-64-64-64s-64 28.6-64 64v485.4l-146.8-146.8c-25-25-65.6-25-90.6 0s-25 65.6 0 90.6l256 256c25 25 65.6 25 90.6 0l256-256c25-25 25-65.6 0-90.6s-65.6-25-90.6 0l-146.6 146.8v-485.4zM128 704c-70.6 0-128 57.4-128 128v64c0 70.6 57.4 128 128 128h768c70.6 0 128-57.4 128-128v-64c0-70.6-57.4-128-128-128h-203l-90.6 90.6c-50 50-131 50-181 0l-90.4-90.6h-203zM864 816c26.51 0 48 21.49 48 48s-21.49 48-48 48v0c-26.51 0-48-21.49-48-48s21.49-48 48-48v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["download"] - }, - "attrs": [{}], - "properties": { - "order": 123, - "id": 113, - "name": "download", - "prevSize": 32, - "code": 59683, - "ligatures": "download" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 1 - }, - { - "icon": { - "paths": [ - "M451.6 547.2l-166.4 99.8c-30.4 18.2-40.2 57.4-22 87.8s57.4 40.2 87.8 22l208.6-125.2-108-84.4zM574 643v251c0 35.4 28.6 64 64 64s64-28.6 64-64v-150.6l-128-100.4zM1261.6 938.2l-252.2-197.8c1.4-1.8 2.6-3.6 3.6-5.4 18.2-30.4 8.4-69.6-22-87.8l-228.6-137.2 228.4-137c30.4-18.2 40.2-57.4 22-87.8s-57.4-40.2-87.8-22l-223 133.8v-271c0-35.4-28.6-64-64-64s-64 28.6-64 64v271l-12.4-7.4-484-379.4c-20.8-16.4-51-12.6-67.4 8.2-15.6 19.6-13 47.8 5 64.6l1180.4 925.2c1.2 0.8 2.2 1.8 3.2 2.8l3.6 2.8c20.8 16.4 51 12.6 67.4-8.2s12.6-51-8.2-67.4z" - ], - "attrs": [{}], - "width": 1280, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["asterisk-slash"] - }, - "attrs": [{}], - "properties": { - "order": 116, - "id": 112, - "name": "asterisk-slash", - "prevSize": 32, - "code": 59668, - "ligatures": "asterisk-slash" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 2 - }, - { - "icon": { - "paths": [ - "M229.4 374.4l-80 80c-31.2 31.2-31.2 81.6 0 113l431.2 431.2c31.2 31.2 81.6 31.2 113 0l146.2-146.2-610.2-478zM1259.4 938.2l-283.4-222 148.8-148.8c31.2-31.2 31.2-81.6 0-113l-431.4-431c-31.2-31.2-81.6-31.2-113 0l-214.4 214.6-288.4-225.8c-20.6-16.4-50.8-12.6-67.2 8.2-15.6 19.6-13 47.6 5 64.4l1178 923.4c1.2 0.8 2.2 1.8 3.2 2.8l3.6 2.8c20.8 16.4 51 12.6 67.2-8.2s12.6-51-8.2-67.2z" - ], - "attrs": [{}], - "width": 1278, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["diamond-slash"] - }, - "attrs": [{}], - "properties": { - "order": 117, - "id": 111, - "name": "diamond-slash", - "prevSize": 32, - "code": 59751, - "ligatures": "diamond-slash" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 3 - }, - { - "icon": { - "paths": [ - "M208.8 356.8c-11.8 16-18.8 35.8-18.8 57.2v192c0 53 43 96 96 96h363.2l-440.4-345.2zM1261.6 938.2l-301.4-236.2h29.8c53 0 96-43 96-96v-192c0-53-43-96-96-96h-519.6l-392.8-307.8c-20.8-16.4-51-12.6-67.4 8.2-15.6 19.6-13 47.8 5 64.6l1180.4 925.2c1.2 0.8 2.2 1.8 3.2 2.8l3.6 2.8c20.8 16.4 51 12.6 67.4-8.2s12.6-51-8.2-67.4z" - ], - "attrs": [{}], - "width": 1280, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["element-card-slash"] - }, - "attrs": [{}], - "properties": { - "order": 118, - "id": 110, - "name": "element-card-slash", - "prevSize": 32, - "code": 59752, - "ligatures": "element-card-slash" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 4 - }, - { - "icon": { - "paths": [ - "M864 320h-704c-53 0-96 43-96 96v192c0 53 43 96 96 96h704c53 0 96-43 96-96v-192c0-53-43-96-96-96z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["element-card"] - }, - "attrs": [{}], - "properties": { - "order": 119, - "id": 109, - "name": "element-card", - "prevSize": 32, - "code": 59753, - "ligatures": "element-card" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 5 - }, - { - "icon": { - "paths": [ - "M864 576h-704c-53 0-96 43-96 96v192c0 53 43 96 96 96h704c53 0 96-43 96-96v-192c0-53-43-96-96-96zM864 64h-704c-53 0-96 43-96 96v192c0 53 43 96 96 96h704c53 0 96-43 96-96v-192c0-53-43-96-96-96z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["element-cards"] - }, - "attrs": [{}], - "properties": { - "order": 120, - "id": 108, - "name": "element-cards", - "prevSize": 32, - "code": 59754, - "ligatures": "element-cards, cards" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 6 - }, - { - "icon": { - "paths": [ - "M812.6 830h-510.6c-18.4 0-35.2-10.6-43.2-27.2s-5.8-36.4 5.8-50.8l128-160c9-11.4 23-18 37.4-18s28.2 6.6 37.4 18l53 66.2 25.4-37.2-419.8-329.2v538.2c0 70.6 57.4 128 128 128h721.8l-163.2-128zM1261.6 938.2l-113-88.6c1-6.4 1.4-13 1.4-19.6v-640c0-70.6-57.4-128-128-128h-768c-29 0-55.8 9.6-77.2 26l-99.2-77.8c-20.8-16.4-51-12.6-67.4 8.2-15.6 19.6-13 47.8 5 64.6l1180.4 925.2c1.2 0.8 2.2 1.8 3.2 2.8l3.6 2.8c20.8 16.4 51 12.6 67.4-8.2s12.6-51-8.2-67.4zM445.2 298.4l-129.8-101.8c10.6-4.2 22.4-6.6 34.6-6.6 53 0 96 43 96 96 0 4.2-0.2 8.2-0.8 12.4zM654.2 462l40.2-59c8.8-13.2 23.8-21 39.6-21s30.6 7.8 39.6 21v0l223.6 328-343-269z" - ], - "attrs": [{}], - "width": 1280, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["image-slash"] - }, - "attrs": [{}], - "properties": { - "order": 121, - "id": 107, - "name": "image-slash", - "prevSize": 32, - "code": 59755, - "ligatures": "image-slash" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 7 - }, - { - "icon": { - "paths": [ - "M192 256c0-141.385 114.615-256 256-256s256 114.615 256 256v0c0 141.385-114.615 256-256 256s-256-114.615-256-256v0zM0 964.6c0-197 159.6-356.6 356.6-356.6h182.8c197 0 356.6 159.6 356.6 356.6 0 32.8-26.6 59.4-59.4 59.4h-777.2c-32.8 0-59.4-26.6-59.4-59.4zM1218.6 1024h-275.8c10.8-18.8 17.2-40.6 17.2-64v-16c0-121.4-54.2-230.4-139.6-303.6 4.8-0.2 9.4-0.4 14.2-0.4h122.8c178.2 0 322.6 144.4 322.6 322.6 0 34-27.6 61.4-61.4 61.4zM864 512c-62 0-118-25.2-158.6-65.8 39.4-53.2 62.6-119 62.6-190.2 0-53.6-13.2-104.2-36.6-148.6 37.2-27.2 83-43.4 132.6-43.4 123.8 0 224 100.2 224 224s-100.2 224-224 224z" - ], - "attrs": [{}], - "width": 1280, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["user-group"] - }, - "attrs": [{}], - "properties": { - "order": 115, - "id": 106, - "name": "user-group", - "prevSize": 32, - "code": 59746, - "ligatures": "user-group, users" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 8 - }, - { - "icon": { - "paths": [ - "M142.6 591.2c-43.8-43.8-43.8-114.6 0-158.4s114.6-43.8 158.4 0 43.8 114.6 0 158.4-114.8 43.8-158.4 0zM368.8 365c-43.8-43.8-43.8-114.6 0-158.4s114.6-43.8 158.4 0 43.8 114.6 0 158.4-114.6 43.6-158.4 0zM368.8 659c43.8-43.8 114.6-43.8 158.4 0s43.8 114.6 0 158.4-114.6 43.8-158.4 0c-43.8-43.6-43.8-114.6 0-158.4zM595 432.8c43.8-43.8 114.6-43.8 158.4 0s43.8 114.6 0 158.4-114.6 43.8-158.4 0c-43.6-43.8-43.6-114.6 0-158.4z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["grip-dots"] - }, - "attrs": [{}], - "properties": { - "order": 114, - "id": 105, - "name": "grip-dots", - "prevSize": 32, - "code": 59743, - "ligatures": "grip-dots, move" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 9 - }, - { - "icon": { - "paths": [ - "M512 928c14.8 0 54-14.4 95.2-96.8 17.6-35.4 32.8-78.4 44-127.2h-278.4c11.2 48.8 26.4 91.8 44 127.2 41.2 82.4 80.4 96.8 95.2 96.8zM357 608h310c3.2-30.6 5-62.8 5-96s-1.8-65.4-5-96h-310c-3.2 30.6-5 62.8-5 96s1.8 65.4 5 96zM372.8 320h278.4c-11.2-48.8-26.4-91.8-44-127.2-41.2-82.4-80.4-96.8-95.2-96.8s-54 14.4-95.2 96.8c-17.6 35.4-32.8 78.4-44 127.2zM763.4 416c3 31 4.4 63.2 4.4 96s-1.6 65-4.4 96h153.4c7.2-30.8 11.2-63 11.2-96s-3.8-65.2-11.2-96h-153.2zM881 320c-42.8-82.2-112.2-148.2-196.8-186.8 28.2 51.2 50.6 115 65.2 186.8h131.8zM274.4 320c14.6-71.8 37-135.4 65.2-186.8-84.6 38.6-154 104.6-196.8 186.8h131.8zM107.2 416c-7.2 30.8-11.2 63-11.2 96s3.8 65.2 11.2 96h153.4c-3-31-4.4-63.2-4.4-96s1.6-65 4.4-96h-153.4zM684.2 890.8c84.6-38.6 154-104.6 196.8-186.8h-131.6c-14.6 71.8-37 135.4-65.2 186.8zM339.8 890.8c-28.2-51.2-50.6-115-65.2-186.8h-131.8c42.8 82.2 112.2 148.2 196.8 186.8zM512 1024c-282.77 0-512-229.23-512-512s229.23-512 512-512v0c282.77 0 512 229.23 512 512s-229.23 512-512 512v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["globe"] - }, - "attrs": [{}], - "properties": { - "order": 110, - "id": 104, - "name": "globe", - "prevSize": 32, - "code": 59703, - "ligatures": "globe" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 10 - }, - { - "icon": { - "paths": [ - "M340 46.6c33-30 76-46.6 120.6-46.6h2.2c97.8 0 177.2 79.4 177.2 177.2 0 47-18.6 92-51.8 125.2l-381.8 381.8c-9.2 9.2-14.4 21.8-14.4 34.8 0 27 22 49 49.2 49 13 0 25.6-5.2 34.8-14.4l445.6-445.8c33.2-33.2 78.2-51.8 125.2-51.8 97.8 0 177.2 79.4 177.2 177.2 0 47-18.6 92-51.8 125.2l-176.4 176.4c-17.6 17.6-27.6 41.8-27.6 66.8 0 52 42.2 94.2 94 94.2 12.4 0 24.8-3 36-8.4l33.4-16.8c31.6-15.8 70-3 85.8 28.6s3 70-28.6 85.8l-33.6 17c-29 14.4-60.8 22-93.2 22-122.8 0-222-99.8-222-222.2 0-59 23.4-115.6 65.2-157.4l176.4-176.4c9.2-9.2 14.4-21.8 14.4-34.8 0-27.2-22-49.2-49.2-49.2-13 0-25.6 5.2-34.8 14.4l-445.6 445.8c-33.2 33.2-78.2 51.8-125.2 51.8-97.8 0-177.2-79.4-177.2-177.2 0-47 18.6-92 51.8-125.2l381.8-381.8c9.2-9.2 14.4-21.8 14.4-34.8 0-27-22-49-49.2-49h-2.2c-12.8 0-25.2 4.8-34.6 13.4l-319 290c-26.2 23.8-66.6 21.8-90.4-4.4s-21.8-66.6 4.4-90.4l319-290z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["scribble"] - }, - "attrs": [{}], - "properties": { - "order": 109, - "id": 103, - "name": "scribble", - "prevSize": 32, - "code": 59739, - "ligatures": "scribble, draft" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 11 - }, - { - "icon": { - "paths": [ - "M416 160c0-53 43-96 96-96h128c53 0 96 43 96 96v128c0 53-43 96-96 96h-16v80h304c61.8 0 112 50.2 112 112v64h16c53 0 96 43 96 96v128c0 53-43 96-96 96h-128c-53 0-96-43-96-96v-128c0-53 43-96 96-96h16v-64c0-8.8-7.2-16-16-16h-304v80h16c53 0 96 43 96 96v128c0 53-43 96-96 96h-128c-53 0-96-43-96-96v-128c0-53 43-96 96-96h16v-80h-304c-8.8 0-16 7.2-16 16v64h16c53 0 96 43 96 96v128c0 53-43 96-96 96h-128c-53 0-96-43-96-96v-128c0-53 43-96 96-96h16v-64c0-61.8 50.2-112 112-112h304v-80h-16c-53 0-96-43-96-96v-128z" - ], - "attrs": [{}], - "width": 1152, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["sitemap"] - }, - "attrs": [{}], - "properties": { - "order": 108, - "id": 102, - "name": "sitemap", - "prevSize": 32, - "code": 59750, - "ligatures": "sitemap, tree" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 12 - }, - { - "icon": { - "paths": [ - "M402.8 685.2c25 25 65.6 25 90.6 0l320-320c25-25 25-65.6 0-90.6s-65.6-25-90.6 0l-274.8 274.8-274.8-274.6c-25-25-65.6-25-90.6 0s-25 65.6 0 90.6l320 320z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["angle-down"] - }, - "attrs": [{}], - "properties": { - "order": 3, - "id": 101, - "name": "angle-down", - "prevSize": 32, - "code": 59648, - "ligatures": "angle-down, downangle" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 13 - }, - { - "icon": { - "paths": [ - "M82.8 466.8c-25 25-25 65.6 0 90.6l320 320c25 25 65.6 25 90.6 0s25-65.6 0-90.6l-274.8-274.8 274.6-274.8c25-25 25-65.6 0-90.6s-65.6-25-90.6 0l-320 320z" - ], - "attrs": [{}], - "width": 640, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["angle-left"] - }, - "attrs": [{}], - "properties": { - "order": 4, - "id": 100, - "name": "angle-left", - "prevSize": 32, - "code": 59649, - "ligatures": "angle-left, leftangle" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 14 - }, - { - "icon": { - "paths": [ - "M557.2 466.8c25 25 25 65.6 0 90.6l-320 320c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l274.8-274.8-274.6-274.8c-25-25-25-65.6 0-90.6s65.6-25 90.6 0l320 320z" - ], - "attrs": [{}], - "width": 640, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["angle-right"] - }, - "attrs": [{}], - "properties": { - "order": 5, - "id": 99, - "name": "angle-right", - "prevSize": 32, - "code": 59650, - "ligatures": "angle-right, rightangle" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 15 - }, - { - "icon": { - "paths": [ - "M402.8 274.8c25-25 65.6-25 90.6 0l320 320c25 25 25 65.6 0 90.6s-65.6 25-90.6 0l-274.8-274.8-274.8 274.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l320-320z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["angle-up"] - }, - "attrs": [{}], - "properties": { - "order": 42, - "id": 98, - "name": "angle-up", - "prevSize": 32, - "code": 59651, - "ligatures": "angle-up, upangle" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 16 - }, - { - "icon": { - "paths": [ - "M303.2 939.2c-12.2 13.2-29.2 20.8-47.2 20.8s-35-7.6-47.2-20.8l-176-192c-23.8-26-22.2-66.6 4-90.4s66.6-22.2 90.4 4l64.8 70.6v-603.4c0-35.4 28.6-64 64-64s64 28.6 64 64v603.4l64.8-70.8c23.8-26 64.4-27.8 90.4-4s27.8 64.4 4 90.4l-176 192zM640 64h64c35.4 0 64 28.6 64 64s-28.6 64-64 64h-64c-35.4 0-64-28.6-64-64s28.6-64 64-64zM640 320h192c35.4 0 64 28.6 64 64s-28.6 64-64 64h-192c-35.4 0-64-28.6-64-64s28.6-64 64-64zM640 576h320c35.4 0 64 28.6 64 64s-28.6 64-64 64h-320c-35.4 0-64-28.6-64-64s28.6-64 64-64zM640 832h448c35.4 0 64 28.6 64 64s-28.6 64-64 64h-448c-35.4 0-64-28.6-64-64s28.6-64 64-64z" - ], - "attrs": [{}], - "width": 1152, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["arrow-down-short-wide"] - }, - "attrs": [{}], - "properties": { - "order": 43, - "id": 97, - "name": "arrow-down-short-wide", - "prevSize": 32, - "code": 59652, - "ligatures": "arrow-down-short-wide, asc" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 17 - }, - { - "icon": { - "paths": [ - "M303.2 939.2c-12.2 13.2-29.2 20.8-47.2 20.8s-35-7.6-47.2-20.8l-176-192c-23.8-26-22.2-66.6 4-90.4s66.6-22.2 90.4 4l64.8 70.6v-603.4c0-35.4 28.6-64 64-64s64 28.6 64 64v603.4l64.8-70.8c23.8-26 64.4-27.8 90.4-4s27.8 64.4 4 90.4l-176 192zM640 960c-35.4 0-64-28.6-64-64s28.6-64 64-64h64c35.4 0 64 28.6 64 64s-28.6 64-64 64h-64zM640 704c-35.4 0-64-28.6-64-64s28.6-64 64-64h192c35.4 0 64 28.6 64 64s-28.6 64-64 64h-192zM640 448c-35.4 0-64-28.6-64-64s28.6-64 64-64h320c35.4 0 64 28.6 64 64s-28.6 64-64 64h-320zM640 192c-35.4 0-64-28.6-64-64s28.6-64 64-64h448c35.4 0 64 28.6 64 64s-28.6 64-64 64h-448z" - ], - "attrs": [{}], - "width": 1152, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["arrow-down-wide-short"] - }, - "attrs": [{}], - "properties": { - "order": 44, - "id": 96, - "name": "arrow-down-wide-short", - "prevSize": 32, - "code": 59653, - "ligatures": "arrow-down-wide-short, desc" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 18 - }, - { - "icon": { - "paths": [ - "M338.8 941.2c25 25 65.6 25 90.6 0l320-320c25-25 25-65.6 0-90.6s-65.6-25-90.6 0l-210.8 211v-613.6c0-35.4-28.6-64-64-64s-64 28.6-64 64v613.4l-210.8-210.6c-25-25-65.6-25-90.6 0s-25 65.6 0 90.6l320 320z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["arrow-down"] - }, - "attrs": [{}], - "properties": { - "order": 45, - "id": 95, - "name": "arrow-down", - "prevSize": 32, - "code": 59654, - "ligatures": "arrow-down, darr" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 19 - }, - { - "icon": { - "paths": [ - "M18.8 466.8c-25 25-25 65.6 0 90.6l320 320c25 25 65.6 25 90.6 0s25-65.6 0-90.6l-211-210.8h613.6c35.4 0 64-28.6 64-64s-28.6-64-64-64h-613.4l210.6-210.8c25-25 25-65.6 0-90.6s-65.6-25-90.6 0l-320 320z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["arrow-left"] - }, - "attrs": [{}], - "properties": { - "order": 46, - "id": 94, - "name": "arrow-left", - "prevSize": 32, - "code": 59655, - "ligatures": "arrow-left, larr" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 20 - }, - { - "icon": { - "paths": [ - "M877.2 557.2c25-25 25-65.6 0-90.6l-320-320c-25-25-65.6-25-90.6 0s-25 65.6 0 90.6l211 210.8h-613.6c-35.4 0-64 28.6-64 64s28.6 64 64 64h613.4l-210.6 210.8c-25 25-25 65.6 0 90.6s65.6 25 90.6 0l320-320z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["arrow-right"] - }, - "attrs": [{}], - "properties": { - "order": 47, - "id": 93, - "name": "arrow-right", - "prevSize": 32, - "code": 59656, - "ligatures": "arrow-right, rarr" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 21 - }, - { - "icon": { - "paths": [ - "M640 0c-35.4 0-64 28.6-64 64s28.6 64 64 64h165.4l-402.6 402.8c-25 25-25 65.6 0 90.6s65.6 25 90.6 0l402.6-402.8v165.4c0 35.4 28.6 64 64 64s64-28.6 64-64v-320c0-35.4-28.6-64-64-64h-320zM160 64c-88.4 0-160 71.6-160 160v640c0 88.4 71.6 160 160 160h640c88.4 0 160-71.6 160-160v-224c0-35.4-28.6-64-64-64s-64 28.6-64 64v224c0 17.6-14.4 32-32 32h-640c-17.6 0-32-14.4-32-32v-640c0-17.6 14.4-32 32-32h224c35.4 0 64-28.6 64-64s-28.6-64-64-64h-224z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["arrow-up-right-from-square"] - }, - "attrs": [{}], - "properties": { - "order": 6, - "id": 92, - "name": "arrow-up-right-from-square", - "prevSize": 32, - "code": 59657, - "ligatures": "arrow-up-right-from-square, external" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 22 - }, - { - "icon": { - "paths": [ - "M429.2 82.8c-25-25-65.6-25-90.6 0l-320 320c-25 25-25 65.6 0 90.6s65.6 25 90.6 0l210.8-211v613.6c0 35.4 28.6 64 64 64s64-28.6 64-64v-613.6l210.8 210.8c25 25 65.6 25 90.6 0s25-65.6 0-90.6l-320-320z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["arrow-up"] - }, - "attrs": [{}], - "properties": { - "order": 7, - "id": 91, - "name": "arrow-up", - "prevSize": 32, - "code": 59658, - "ligatures": "arrow-up, uarr" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 23 - }, - { - "icon": { - "paths": [ - "M210.2 405.2c15.4-43.6 40.4-84.6 75.6-119.6 125-125 327.6-125 452.6 0l34.2 34.4h-68.6c-35.4 0-64 28.6-64 64s28.6 64 64 64h223c0 0 0 0 0 0h0.8c35.4 0 64-28.6 64-64v-224c0-35.4-28.6-64-64-64s-64 28.6-64 64v70.4l-35-35.2c-175-175-458.6-175-633.6 0-48.8 48.8-84 106.2-105.6 167.6-11.8 33.4 5.8 69.8 39 81.6s69.8-5.8 81.6-39zM78 578.6c-10 3-19.6 8.4-27.4 16.4-8 8-13.4 17.6-16.2 28-0.6 2.4-1.2 5-1.6 7.6-0.6 3.4-0.8 6.8-0.8 10.2v223.2c0 35.4 28.6 64 64 64s64-28.6 64-64v-70.2l35.2 35c175 174.8 458.6 174.8 633.4 0 48.8-48.8 84.2-106.2 105.8-167.4 11.8-33.4-5.8-69.8-39-81.6s-69.8 5.8-81.6 39c-15.4 43.6-40.4 84.6-75.6 119.6-125 125-327.6 125-452.6 0l-34.4-34.4h68.8c35.4 0 64-28.6 64-64s-28.6-64-64-64h-223.2c-3.2 0-6.4 0.2-9.6 0.6s-6.2 1-9.2 2z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["arrows-rotate"] - }, - "attrs": [{}], - "properties": { - "order": 8, - "id": 90, - "name": "arrows-rotate", - "prevSize": 32, - "code": 59659, - "ligatures": "arrows-rotate, refresh" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 24 - }, - { - "icon": { - "paths": [ - "M384 64c35.4 0 64 28.6 64 64v271l223-133.8c30.4-18.2 69.6-8.4 87.8 22s8.4 69.6-22 87.8l-228.4 137 228.6 137.2c30.4 18.2 40.2 57.4 22 87.8s-57.4 40.2-87.8 22l-223.2-134v271c0 35.4-28.6 64-64 64s-64-28.6-64-64v-271l-223 133.8c-30.4 18.2-69.6 8.4-87.8-22s-8.4-69.6 22-87.8l228.4-137-228.6-137.2c-30.4-18.2-40.2-57.4-22-87.8s57.4-40.2 87.8-22l223.2 134v-271c0-35.4 28.6-64 64-64z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["asterisk"] - }, - "attrs": [{}], - "properties": { - "order": 48, - "id": 89, - "name": "asterisk", - "prevSize": 32, - "code": 59660, - "ligatures": "asterisk" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 25 - }, - { - "icon": { - "paths": [ - "M734.4 825l-535.4-535.4c-44.8 62.6-71 139.4-71 222.4 0 212 172 384 384 384 83 0 159.8-26.2 222.4-71zM825 734.4c44.8-62.6 71-139.4 71-222.4 0-212-172-384-384-384-83 0-159.8 26.2-222.4 71l535.4 535.4zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512v0c0 282.77-229.23 512-512 512s-512-229.23-512-512v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["ban"] - }, - "attrs": [{}], - "properties": { - "order": 49, - "id": 88, - "name": "ban", - "prevSize": 32, - "code": 59661, - "ligatures": "ban" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 26 - }, - { - "icon": { - "paths": [ - "M0 192c0-35.4 28.6-64 64-64h768c35.4 0 64 28.6 64 64s-28.6 64-64 64h-768c-35.4 0-64-28.6-64-64zM0 512c0-35.4 28.6-64 64-64h768c35.4 0 64 28.6 64 64s-28.6 64-64 64h-768c-35.4 0-64-28.6-64-64zM896 832c0 35.4-28.6 64-64 64h-768c-35.4 0-64-28.6-64-64s28.6-64 64-64h768c35.4 0 64 28.6 64 64z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["bars"] - }, - "attrs": [{}], - "properties": { - "order": 50, - "id": 87, - "name": "bars", - "prevSize": 32, - "code": 59662, - "ligatures": "bars, menu" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 27 - }, - { - "icon": { - "paths": [ - "M448 0c-35.4 0-64 28.6-64 64v38.4c-146 29.6-256 158.8-256 313.6v37.6c0 94-34.6 184.8-97 255.2l-14.8 16.6c-16.8 18.8-20.8 45.8-10.6 68.8s33.2 37.8 58.4 37.8h768c25.2 0 48-14.8 58.4-37.8s6.2-50-10.6-68.8l-14.8-16.6c-62.4-70.4-97-161-97-255.2v-37.6c0-154.8-110-284-256-313.6v-38.4c0-35.4-28.6-64-64-64zM538.6 986.6c24-24 37.4-56.6 37.4-90.6h-256c0 34 13.4 66.6 37.4 90.6s56.6 37.4 90.6 37.4 66.6-13.4 90.6-37.4z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["bell"] - }, - "attrs": [{}], - "properties": { - "order": 51, - "id": 86, - "name": "bell", - "prevSize": 32, - "code": 59663, - "ligatures": "bell" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 28 - }, - { - "icon": { - "paths": [ - "M192 0c-106 0-192 86-192 192v640c0 106 86 192 192 192h640c35.4 0 64-28.6 64-64s-28.6-64-64-64v-128c35.4 0 64-28.6 64-64v-640c0-35.4-28.6-64-64-64h-640zM192 768h512v128h-512c-35.4 0-64-28.6-64-64s28.6-64 64-64zM256 288c0-17.6 14.4-32 32-32h384c17.6 0 32 14.4 32 32s-14.4 32-32 32h-384c-17.6 0-32-14.4-32-32zM288 384h384c17.6 0 32 14.4 32 32s-14.4 32-32 32h-384c-17.6 0-32-14.4-32-32s14.4-32 32-32z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["book"] - }, - "attrs": [{}], - "properties": { - "order": 52, - "id": 85, - "name": "book", - "prevSize": 32, - "code": 59664, - "ligatures": "book" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 29 - }, - { - "icon": { - "paths": [ - "M512 0c106 0 192 86 192 192v7.2c0 31.4-25.4 56.8-56.8 56.8h-270.4c-31.4 0-56.8-25.4-56.8-56.8v-7.2c0-106 86-192 192-192zM82.8 210.8c25-25 65.6-25 90.6 0l128 128c1.4 1.4 2.6 2.8 3.8 4.2 28.4-14.6 60.8-22.8 95-22.8h223.8c34.2 0 66.4 8.2 95 22.8 1.2-1.4 2.4-2.8 3.8-4.2l128-128c25-25 65.6-25 90.6 0s25 65.6 0 90.6l-128 128c-1.4 1.4-2.8 2.6-4.2 3.8 12.4 24 20.2 50.6 22.2 79h128.6c35.4 0 64 28.6 64 64s-28.6 64-64 64h-128c0 49.2-11 95.6-30.8 137.2 4.4 2.6 8.4 5.8 12 9.6l128 128c25 25 25 65.6 0 90.6s-65.6 25-90.6 0l-126.2-126.2c-49 43.6-111.6 72.4-180.6 79.2v-478.6c0-17.6-14.4-32-32-32s-32 14.4-32 32v478.4c-69-6.8-131.6-35.6-180.6-79.2l-126 126c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l128-128c3.8-3.8 7.8-6.8 12-9.6-19.6-41.4-30.6-87.8-30.6-137h-128c-35.4 0-64-28.6-64-64s28.6-64 64-64h128.6c2.2-28.2 10-55 22.2-79-1.4-1.2-2.8-2.4-4.2-3.8l-128-128c-25-25-25-65.6 0-90.6z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["bug"] - }, - "attrs": [{}], - "properties": { - "order": 53, - "id": 84, - "name": "bug", - "prevSize": 32, - "code": 59665, - "ligatures": "bug" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 30 - }, - { - "icon": { - "paths": [ - "M96 0c-53 0-96 43-96 96v832c0 53 43 96 96 96h192v-160c0-53 43-96 96-96s96 43 96 96v160h192c53 0 96-43 96-96v-832c0-53-43-96-96-96h-576zM128 480c0-17.6 14.4-32 32-32h64c17.6 0 32 14.4 32 32v64c0 17.6-14.4 32-32 32h-64c-17.6 0-32-14.4-32-32v-64zM352 448h64c17.6 0 32 14.4 32 32v64c0 17.6-14.4 32-32 32h-64c-17.6 0-32-14.4-32-32v-64c0-17.6 14.4-32 32-32zM512 480c0-17.6 14.4-32 32-32h64c17.6 0 32 14.4 32 32v64c0 17.6-14.4 32-32 32h-64c-17.6 0-32-14.4-32-32v-64zM160 192h64c17.6 0 32 14.4 32 32v64c0 17.6-14.4 32-32 32h-64c-17.6 0-32-14.4-32-32v-64c0-17.6 14.4-32 32-32zM320 224c0-17.6 14.4-32 32-32h64c17.6 0 32 14.4 32 32v64c0 17.6-14.4 32-32 32h-64c-17.6 0-32-14.4-32-32v-64zM544 192h64c17.6 0 32 14.4 32 32v64c0 17.6-14.4 32-32 32h-64c-17.6 0-32-14.4-32-32v-64c0-17.6 14.4-32 32-32z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["building"] - }, - "attrs": [{}], - "properties": { - "order": 9, - "id": 83, - "name": "building", - "prevSize": 32, - "code": 59666, - "ligatures": "building" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 31 - }, - { - "icon": { - "paths": [ - "M192 64v64h-96c-53 0-96 43-96 96v96h896v-96c0-53-43-96-96-96h-96v-64c0-35.4-28.6-64-64-64s-64 28.6-64 64v64h-256v-64c0-35.4-28.6-64-64-64s-64 28.6-64 64zM896 384h-896v544c0 53 43 96 96 96h704c53 0 96-43 96-96v-544z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["calendar"] - }, - "attrs": [{}], - "properties": { - "order": 10, - "id": 82, - "name": "calendar", - "prevSize": 32, - "code": 59667, - "ligatures": "calendar, date" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 32 - }, - { - "icon": { - "paths": [ - "M422 14.6c-12-12.6-30-17.4-46.8-13s-29.8 17.8-34.2 34.6l-31.6 125-124-35c-16.8-4.8-34.8 0-47 12.2s-17 30.2-12.2 47l35 124-125 31.8c-16.8 4.2-30 17.4-34.6 34.2s0.4 34.6 13 46.6l92.4 90-92.4 90c-12.6 12-17.4 30-13 46.8s17.8 29.8 34.6 34.2l125 31.6-35 124c-4.8 16.8 0 34.8 12.2 47s30.2 17 47 12.2l124-35 31.6 125c4.2 16.8 17.4 30 34.2 34.6s34.6-0.4 46.8-12.8l90-92.4 90 92.4c12.2 12.4 30 17.4 46.8 12.8s29.8-17.8 34.2-34.6l31.6-125 124 35c16.8 4.8 34.8 0 47-12.2s17-30.2 12.2-47l-35-124 125-31.6c16.8-4.2 30-17.4 34.6-34.2s-0.4-34.8-12.8-46.8l-92.4-90 92.4-90c12.4-12.2 17.4-30 12.8-46.8s-17.8-29.8-34.6-34.2l-125-31.6 35-124c4.8-16.8 0-34.8-12.2-47s-30.2-17-47-12.2l-124 35-31.8-125c-4.2-16.8-17.4-30-34.2-34.6s-34.6 0.4-46.6 13l-90 92.4-90-92.4z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["certificate"] - }, - "attrs": [{}], - "properties": { - "order": 54, - "id": 80, - "name": "certificate", - "prevSize": 32, - "code": 59669, - "ligatures": "certificate, newstamp" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 33 - }, - { - "icon": { - "paths": [ - "M877.2 210.8c25 25 25 65.6 0 90.6l-512 512c-25 25-65.6 25-90.6 0l-256-256c-25-25-25-65.6 0-90.6s65.6-25 90.6 0l210.8 210.6 466.8-466.6c25-25 65.6-25 90.6 0z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["check"] - }, - "attrs": [{}], - "properties": { - "order": 55, - "id": 79, - "name": "check", - "prevSize": 32, - "code": 59670, - "ligatures": "check" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 34 - }, - { - "icon": { - "paths": [ - "M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512v0c282.77 0 512-229.23 512-512s-229.23-512-512-512v0zM254 562c-18.8-18.8-18.8-49.2 0-67.8s49.2-18.8 67.8 0l142 142 0.2-364.2c0-26.6 21.4-48 48-48s48 21.4 48 48v364.2l142-142c18.8-18.8 49.2-18.8 67.8 0s18.8 49.2 0 67.8l-223.8 224c-18.8 18.8-49.2 18.8-67.8 0l-224.2-224z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle-arrow-down"] - }, - "attrs": [{}], - "properties": { - "order": 56, - "id": 78, - "name": "circle-arrow-down", - "prevSize": 32, - "code": 59671, - "ligatures": "circle-arrow-down, circledarr" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 35 - }, - { - "icon": { - "paths": [ - "M1024 512c0-282.77-229.23-512-512-512s-512 229.23-512 512v0c0 282.77 229.23 512 512 512s512-229.23 512-512v0zM462 254c18.8-18.8 49.2-18.8 67.8 0s18.8 49.2 0 67.8l-142 142 364.2 0.2c26.6 0 48 21.4 48 48s-21.4 48-48 48h-364.2l142 142c18.8 18.8 18.8 49.2 0 67.8s-49.2 18.8-67.8 0l-224-223.8c-18.8-18.8-18.8-49.2 0-67.8l224-224.2z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle-arrow-left"] - }, - "attrs": [{}], - "properties": { - "order": 57, - "id": 77, - "name": "circle-arrow-left", - "prevSize": 32, - "code": 59672, - "ligatures": "circle-arrow-left, circlelarr" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 36 - }, - { - "icon": { - "paths": [ - "M0 512c0 282.77 229.23 512 512 512s512-229.23 512-512v0c0-282.77-229.23-512-512-512s-512 229.23-512 512v0zM562 770c-18.8 18.8-49.2 18.8-67.8 0s-18.8-49.2 0-67.8l142-142-364.2-0.2c-26.6 0-48-21.4-48-48s21.4-48 48-48h364.2l-142-142c-18.8-18.8-18.8-49.2 0-67.8s49.2-18.8 67.8 0l224 223.8c18.8 18.8 18.8 49.2 0 67.8l-224 224.2z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle-arrow-right"] - }, - "attrs": [{}], - "properties": { - "order": 58, - "id": 76, - "name": "circle-arrow-right", - "prevSize": 32, - "code": 59673, - "ligatures": "circle-arrow-right, circlerarr" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 37 - }, - { - "icon": { - "paths": [ - "M512 1024c282.77 0 512-229.23 512-512s-229.23-512-512-512v0c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM770 462c18.8 18.8 18.8 49.2 0 67.8s-49.2 18.8-67.8 0l-142-142v364.2c0 26.6-21.4 48-48 48s-48-21.4-48-48v-364.2l-142 142c-18.8 18.8-49.2 18.8-67.8 0s-18.8-49.2 0-67.8l223.6-224c18.8-18.8 49.2-18.8 67.8 0l224.2 224z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle-arrow-up"] - }, - "attrs": [{}], - "properties": { - "order": 59, - "id": 75, - "name": "circle-arrow-up", - "prevSize": 32, - "code": 59674, - "ligatures": "circle-arrow-up, circleuarr" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 38 - }, - { - "icon": { - "paths": [ - "M512 1024c282.77 0 512-229.23 512-512s-229.23-512-512-512v0c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM738 418l-256 256c-18.8 18.8-49.2 18.8-67.8 0l-128-128c-18.8-18.8-18.8-49.2 0-67.8s49.2-18.8 67.8 0l94 94 222-222.2c18.8-18.8 49.2-18.8 67.8 0s18.8 49.2 0 67.8z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle-check"] - }, - "attrs": [{}], - "properties": { - "order": 12, - "id": 74, - "name": "circle-check", - "prevSize": 32, - "code": 59675, - "ligatures": "circle-check, done" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 39 - }, - { - "icon": { - "paths": [ - "M2.2 464c9.8-105.4 51.6-201.4 115.4-278.6l91 91c-41.2 53.2-68.8 117.4-77.6 187.6h-128.8zM276.6 208.6l-91.2-91c77.2-63.8 173.2-105.6 278.6-115.4v128.8c-70.2 8.8-134.4 36.4-187.4 77.6zM560 893c70.2-8.8 134.4-36.4 187.4-77.6l91 91c-77 63.8-173 105.6-278.4 115.4v-128.8zM815.4 747.4c41.2-53.2 69-117.4 77.6-187.4h128.8c-9.8 105.4-51.6 201.4-115.4 278.6l-91-91zM185.4 906.4l91-91c53.2 41.2 117.4 69 187.4 77.6v128.8c-105.4-9.8-201.4-51.6-278.6-115.4zM117.6 838.6c-63.8-77.2-105.6-173.2-115.4-278.6h128.8c8.8 70.2 36.4 134.4 77.6 187.4l-91 91.2zM838.6 117.6l-91 91c-53.2-41.2-117.4-68.8-187.6-77.6v-128.8c105.4 9.8 201.4 51.6 278.6 115.4zM815.4 276.6l91-91c63.8 77 105.6 173.2 115.4 278.6h-128.8c-8.8-70.2-36.4-134.4-77.6-187.4z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle-dashed"] - }, - "attrs": [{}], - "properties": { - "order": 13, - "id": 73, - "name": "circle-dashed", - "prevSize": 32, - "code": 59676, - "ligatures": "circle-dashed, disabled" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 40 - }, - { - "icon": { - "paths": [ - "M512 1024c282.77 0 512-229.23 512-512s-229.23-512-512-512v0c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM432 672h48v-128h-48c-26.6 0-48-21.4-48-48s21.4-48 48-48h96c26.6 0 48 21.4 48 48v176h16c26.6 0 48 21.4 48 48s-21.4 48-48 48h-160c-26.6 0-48-21.4-48-48s21.4-48 48-48zM512 256c35.346 0 64 28.654 64 64s-28.654 64-64 64v0c-35.346 0-64-28.654-64-64s28.654-64 64-64v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle-info"] - }, - "attrs": [{}], - "properties": { - "order": 14, - "id": 72, - "name": "circle-info", - "prevSize": 32, - "code": 59677, - "ligatures": "circle-info, info" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 41 - }, - { - "icon": { - "paths": [ - "M512 1024c282.77 0 512-229.23 512-512s-229.23-512-512-512v0c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM339.6 330.6c15.8-44.6 58.2-74.6 105.6-74.6h116.6c69.8 0 126.2 56.6 126.2 126.2 0 45.2-24.2 87-63.4 109.6l-64.6 37c-0.4 26-21.8 47.2-48 47.2-26.6 0-48-21.4-48-48v-27c0-17.2 9.2-33 24.2-41.6l88.6-50.8c9.4-5.4 15.2-15.4 15.2-26.2 0-16.8-13.6-30.2-30.2-30.2h-116.6c-6.8 0-12.8 4.2-15 10.6l-0.8 2.4c-8.8 25-36.4 38-61.2 29.2s-38-36.4-29.2-61.2l0.8-2.4zM448 704c0-35.346 28.654-64 64-64s64 28.654 64 64v0c0 35.346-28.654 64-64 64s-64-28.654-64-64v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle-question"] - }, - "attrs": [{}], - "properties": { - "order": 60, - "id": 71, - "name": "circle-question", - "prevSize": 32, - "code": 59678, - "ligatures": "circle-question, help" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 42 - }, - { - "icon": { - "paths": [ - "M512 1024c282.77 0 512-229.23 512-512s-229.23-512-512-512v0c-282.77 0-512 229.23-512 512s229.23 512 512 512v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["circle"] - }, - "attrs": [{}], - "properties": { - "order": 61, - "id": 70, - "name": "circle", - "prevSize": 32, - "code": 59679, - "ligatures": "circle, enabled" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 43 - }, - { - "icon": { - "paths": [ - "M384 0c-83.6 0-154.8 53.4-181 128h-75c-70.6 0-128 57.4-128 128v640c0 70.6 57.4 128 128 128h512c70.6 0 128-57.4 128-128v-640c0-70.6-57.4-128-128-128h-75c-26.2-74.6-97.4-128-181-128zM384 128c35.346 0 64 28.654 64 64s-28.654 64-64 64v0c-35.346 0-64-28.654-64-64s28.654-64 64-64v0zM224 384h320c17.6 0 32 14.4 32 32s-14.4 32-32 32h-320c-17.6 0-32-14.4-32-32s14.4-32 32-32z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["clipboard"] - }, - "attrs": [{}], - "properties": { - "order": 62, - "id": 69, - "name": "clipboard", - "prevSize": 32, - "code": 59680, - "ligatures": "clipboard" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 44 - }, - { - "icon": { - "paths": [ - "M512 0c282.77 0 512 229.23 512 512s-229.23 512-512 512v0c-282.77 0-512-229.23-512-512s229.23-512 512-512v0zM464 240v272c0 16 8 31 21.4 40l192 128c22 14.8 51.8 8.8 66.6-13.4s8.8-51.8-13.4-66.6l-170.6-113.6v-246.4c0-26.6-21.4-48-48-48s-48 21.4-48 48z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["clock"] - }, - "attrs": [{}], - "properties": { - "order": 63, - "id": 68, - "name": "clock", - "prevSize": 32, - "code": 59681, - "ligatures": "clock, time" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 45 - }, - { - "icon": { - "paths": [ - "M896 160v96c0 88.4-200.6 160-448 160s-448-71.6-448-160v-96c0-88.4 200.6-160 448-160s448 71.6 448 160zM786.4 429.4c41.6-14.8 79.8-33.8 109.6-57.2v203.8c0 88.4-200.6 160-448 160s-448-71.6-448-160v-203.8c29.8 23.6 68 42.4 109.6 57.2 89.8 32 209.4 50.6 338.4 50.6s248.6-18.6 338.4-50.6zM0 692.2c29.8 23.6 68 42.4 109.6 57.2 89.8 32 209.4 50.6 338.4 50.6s248.6-18.6 338.4-50.6c41.6-14.8 79.8-33.8 109.6-57.2v171.8c0 88.4-200.6 160-448 160s-448-71.6-448-160v-171.8z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["database"] - }, - "attrs": [{}], - "properties": { - "order": 15, - "id": 65, - "name": "database", - "prevSize": 32, - "code": 59684, - "ligatures": "database" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 46 - }, - { - "icon": { - "paths": [ - "M568.6 23.4c-31.2-31.2-81.8-31.2-113.2 0l-432 432c-31.2 31.2-31.2 81.8 0 113.2l432 432c31.2 31.2 81.8 31.2 113.2 0l432-432c31.2-31.2 31.2-81.8 0-113.2l-432-432z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["diamond"] - }, - "attrs": [{}], - "properties": { - "order": 16, - "id": 64, - "name": "diamond", - "prevSize": 32, - "code": 59685, - "ligatures": "diamond, condition" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 47 - }, - { - "icon": { - "paths": [ - "M878 14c18.8-18.8 49.2-18.8 67.8 0l64 64c18.8 18.8 18.8 49.2 0 67.8l-174 174 78 78c13.8 13.8 17.8 34.4 10.4 52.4s-25 29.6-44.4 29.6h-287.8c-26.6 0-48-21.4-48-48v-287.8c0-19.4 11.6-37 29.6-44.4s38.6-3.4 52.4 10.4l78 78 174-174zM144 544h288c26.6 0 48 21.4 48 48v288c0 19.4-11.6 37-29.6 44.4s-38.6 3.4-52.4-10.4l-78-78-174 174c-18.8 18.8-49.2 18.8-67.8 0l-64.2-64c-18.8-18.8-18.8-49.2 0-67.8l174-174-78-78.2c-13.8-13.8-17.8-34.4-10.4-52.4s25-29.6 44.4-29.6z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["down-left-and-up-right-to-center"] - }, - "attrs": [{}], - "properties": { - "order": 17, - "id": 63, - "name": "down-left-and-up-right-to-center", - "prevSize": 32, - "code": 59686, - "ligatures": "down-left-and-up-right-to-center, collapse" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 48 - }, - { - "icon": { - "paths": [ - "M355.6 126.4l20 34.8c5.6 9.6 8.4 20.6 8.4 31.8v82.8c0 7.8 3.2 15.4 8.6 20.8 12.4 12.4 33 11.4 44-2.4l27.2-34c9.4-11.8 25.8-15.4 39.2-8.6l30.4 15.2c6.8 3.4 14.4 5.2 22 5.2 13 0 25.6-5.2 34.8-14.4l7.8-7.8c5.8-5.8 14.6-7.2 22-3.6l58.4 29.2c15.6 7.8 25.2 23.6 25.2 41 0 21-14.2 39.2-34.6 44.4l-70.8 17.6c-14.8 3.6-30.2 3-44.8-1.8l-64-21.4c-6.6-2.2-13.4-3.4-20.4-3.4-14 0-27.6 4.6-38.8 13l-78.2 59.2c-20.2 15.2-32 38.8-32 64v56c0 53 43 96 96 96h64c17.6 0 32 14.4 32 32v96c0 35.4 28.6 64 64 64 20.2 0 39.2-9.4 51.2-25.6l51.2-68.2c16.6-22.2 25.6-49.2 25.6-76.8v-24.2c0-7.8 5.2-14.6 12.8-16.4l10.6-2.6c23.8-6 40.6-27.4 40.6-52 0-14.2-5.6-27.8-15.6-37.8l-67-67c-7.4-7.4-7.4-19.4 0-26.8 11.4-11.4 28.2-15.4 43.6-10.2l28.2 9.4c24.6 8.2 51.4-3 63-26 7-14 22.4-21.6 37.8-18.4l54.8 11c-48.8-175.6-209.8-304.4-400.8-304.4-55.4 0-108 10.8-156.4 30.4zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512v0c0 282.77-229.23 512-512 512s-512-229.23-512-512v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["earth-africa"] - }, - "attrs": [{}], - "properties": { - "order": 66, - "id": 62, - "name": "earth-africa", - "prevSize": 32, - "code": 59687, - "ligatures": "earth-africa" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 49 - }, - { - "icon": { - "paths": [ - "M115.4 386l18.8 32.8c16.6 29 43.8 50.4 76 59.6l115.8 33c34.4 9.8 58 41.2 58 77v79.8c0 22 12.4 42 32 51.8s32 29.8 32 51.8v78c0 31.2 29.8 53.8 59.8 45.2 32.2-9.2 57.2-35 65.4-67.6l5.6-22.4c8.4-33.8 30.4-62.8 60.6-80l16.2-9.2c30-17 48.4-49 48.4-83.4v-16.6c0-25.4-10.2-49.8-28.2-67.8l-7.8-7.8c-18-18-42.4-28.2-67.8-28.2h-86.2c-22.2 0-44.2-5.8-63.6-16.8l-69-39.4c-8.6-5-15.2-13-18.4-22.4-6.4-19.2 2.2-40 20.4-49l11.8-6c13.2-6.6 28.6-7.8 42.6-3l46.4 15.4c16.4 5.4 34.4-0.8 43.8-15 9.4-14 8.4-32.6-2.4-45.6l-27.2-32.6c-20-24-19.8-59 0.6-82.6l31.4-36.6c17.6-20.6 20.4-50 7-73.4l-4.8-8.4c-7-0.4-13.8-0.6-20.8-0.6-185.6 0-343 121.8-396.4 290zM928 512c0-73.6-19.2-142.8-52.8-203l-51.2 20.6c-31.4 12.6-47.6 47.6-37 79.6l33.8 101.4c7 20.8 24 36.6 45.2 41.8l58.2 14.6c2.4-18 3.6-36.4 3.6-55zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512v0c0 282.77-229.23 512-512 512s-512-229.23-512-512v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["earth-americas"] - }, - "attrs": [{}], - "properties": { - "order": 67, - "id": 61, - "name": "earth-americas", - "prevSize": 32, - "code": 59688, - "ligatures": "earth-americas, world" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 50 - }, - { - "icon": { - "paths": [ - "M103.4 590.2l63.4 12.6c15.8 3.2 32-1.8 43.4-13.2l30.8-30.8c23.2-23.2 62.2-16.8 76.8 12.4l18.6 37c9.6 19.2 29.2 31.4 50.8 31.4 30.4 0 52.2-29.2 43.4-58.4l-12-39.8c-9.2-30.8 13.8-61.8 46-61.8h4.6c26.8 0 51.8-13.4 66.6-35.6l21.4-32.2c11.2-17 10.6-39.2-1.6-55.4l-32.2-43c-20.6-27.4-6.6-67 26.8-75.4l34-8.6c15-3.8 27.2-14.4 33-28.8l32.8-81.8c-43.2-14.6-89.6-22.8-138-22.8-229.8 0-416 186.2-416 416 0 26.8 2.6 53 7.4 78.2zM918.8 599.4c-6-0.6-12-0.2-18 1.6l-31.6 8.8c-13.4 3.8-27.6-1.8-35-13.4l-4-6.2c-12-18.8-32.8-30.2-55.2-30.2s-43.2 11.4-55.2 30.2l-12.2 19c-2.8 4.4-6.8 8.2-11.4 10.6l-72.2 40.4c-36.2 20.2-51 64.8-34 102.6l11 24.8c17.2 38.4 61.4 57 101 42.2l5.2-2c20-7.4 42.6-4.4 59.8 8.2l3 2.2c74.4-59 128.2-142.8 148.8-239zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512v0c0 282.77-229.23 512-512 512s-512-229.23-512-512v0zM289 696.2c-4.2 17.2 6.2 34.6 23.2 38.8l64 16c17.2 4.2 34.6-6.2 38.8-23.2s-6.2-34.6-23.2-38.8l-64-16c-17.2-4.2-34.6 6.2-38.8 23.2zM473 656.2c-4.2 17.2 6.2 34.6 23.2 38.8s34.6-6.2 38.8-23.2l16-64c4.2-17.2-6.2-34.6-23.2-38.8s-34.6 6.2-38.8 23.2l-16 64zM686.4 227.4c-15.8-8-35-1.4-43 14.4l-32 64c-8 15.8-1.4 35 14.4 43s35 1.4 43-14.4l32-64c8-15.8 1.4-35-14.4-43z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["earth-asia"] - }, - "attrs": [{}], - "properties": { - "order": 68, - "id": 60, - "name": "earth-asia", - "prevSize": 32, - "code": 59689, - "ligatures": "earth-asia" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 51 - }, - { - "icon": { - "paths": [ - "M532.6 96.6l-67.6 50.6c-10.8 8-17 20.8-17 34.2v18.2c0 13.6 11 24.6 24.6 24.6 4.8 0 9.6-1.4 13.6-4.2l83.6-55.8c4-2.6 8.8-4.2 13.6-4.2h2c12.4 0 22.6 10.2 22.6 22.6 0 6-2.4 11.8-6.6 16l-39.8 39.8c-11.6 11.6-25.8 20.4-41.4 25.6l-53 17.6c-11.6 3.8-19.2 14.6-19.2 26.8 0 7.4-3 14.6-8.2 20l-35.8 35.8c-12.8 12.8-19.8 30-19.8 48v8.6c0 32.8 27.2 59.4 59.8 59.4 22 0 42.4-12.4 52.2-32l8-16.2c4.8-9.6 14.8-15.8 25.6-15.8 9 0 17.4 4.2 22.8 11.4l32.6 43.4c4.2 5.8 11 9 18.2 9 16.8 0 27.8-17.8 20.2-32.8l-2.2-4.6c-7-14 0-31 15-36l42.4-14.2c15.2-5 25.4-19.2 25.4-35.2 0-20.6 16.6-37.2 37.2-37.2h58.6c17.6 0 32 14.4 32 32s-14.4 32-32 32h-41.4c-14.4 0-28.4 5.8-38.6 16l-9.4 9.4c-4.2 4.2-6.6 10-6.6 16 0 12.4 10.2 22.6 22.6 22.6h22.6c12 0 23.6 4.8 32 13.2l13 13c3.6 3.6 5.6 8.6 5.6 13.6s-2 10-5.6 13.6l-15 15c-7.2 7.6-11.2 17.4-11.2 27.6s4 20 11.4 27.4l36.6 36.6c20.4 20.4 48.2 32 77.2 32h14.8c13-40.4 20-83.4 20-128 0-222.8-175.2-404.8-395.4-415.4zM876.6 712.4c-7.4-5.2-16.4-8.2-26-8.2-12 0-23.6-4.8-32-13.2l-26.6-27c-15.4-15.4-36-24-57.8-24-19.4 0-38.4-7-53.2-19.6l-53-45.6c-23.2-19.8-52.8-30.8-83.4-30.8h-41.8c-25.2 0-50 7.4-71 21.4l-54.8 36.6c-35.6 23.8-57 63.8-57 106.6v6.4c0 34 13.4 66.6 37.4 90.6l32 32c17 17 40 26.6 64 26.6h42.6c26.6 0 48 21.4 48 48 0 5 0.8 10 2.2 14.6 142.6-11.6 265-95.2 330.4-214.4zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512v0c0 282.77-229.23 512-512 512s-512-229.23-512-512v0zM374.6 201.4c-12.4-12.4-32.8-12.4-45.2 0l-64 64c-12.4 12.4-12.4 32.8 0 45.2s32.8 12.4 45.2 0l64-64c12.4-12.4 12.4-32.8 0-45.2z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["earth-europe"] - }, - "attrs": [{}], - "properties": { - "order": 69, - "id": 59, - "name": "earth-europe", - "prevSize": 32, - "code": 59690, - "ligatures": "earth-europe" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 52 - }, - { - "icon": { - "paths": [ - "M512 1024c282.77 0 512-229.23 512-512s-229.23-512-512-512v0c-282.77 0-512 229.23-512 512s229.23 512 512 512v0zM417.2 714.6l-78-27c-13-4.4-27.2-4.6-40.2-0.6l-30.6 9.8c-37 11.8-77-4.8-95-39l-6.6-12.4c-21.2-40.2-4.6-90 36.4-109.4l70.6-33.6c4.6-2.2 8.8-5.6 11.8-9.6l10.6-14c14.4-19.2 37.2-30.6 61.2-30.6s46.8 11.4 61.2 30.6l9.2 12.2c4 5.2 9.8 9 16.2 10.2 15.6 3.2 31.4-3 40.8-15.8l20.8-28.4c4-5.6 10.6-8.8 17.4-8.8 8.8 0 16.8 5.4 20 13.6l20.2 51.8c5.6 14.4 13.4 28 23 40.4l35.8 45.6c11.6 14.8 18 33.2 18 52s-6.4 37.2-18 52l-24 30.8c-16.6 21.2-42 33.6-68.8 33.6-16.8 0-33.2-4.8-47.4-14l-50.8-32.8c-4.4-2.8-9-5-13.8-6.8zM547.6 285l44.4 44.4c20.2 20.2 5.8 54.6-22.6 54.6h-59.8c-11.2 0-22.2-2.4-32.4-6.8l-85.6-38c-28.6-12.6-23.8-54.6 6.8-60.6l77-15.4c26.2-5.2 53.4 3 72.2 21.8zM496 864c0-17.6 14.4-32 32-32h32c17.6 0 32 14.4 32 32s-14.4 32-32 32h-32c-17.6 0-32-14.4-32-32zM862.4 597.8l16 48c5.6 16.8-3.4 34.8-20.2 40.4s-34.8-3.4-40.4-20.2l-16-48c-5.6-16.8 3.4-34.8 20.2-40.4s34.8 3.4 40.4 20.2zM822.6 758.6l-64 64c-12.4 12.4-32.8 12.4-45.2 0s-12.4-32.8 0-45.2l64-64c12.4-12.4 32.8-12.4 45.2 0s12.4 32.8 0 45.2z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["earth-oceania"] - }, - "attrs": [{}], - "properties": { - "order": 70, - "id": 58, - "name": "earth-oceania", - "prevSize": 32, - "code": 59691, - "ligatures": "earth-oceania" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 53 - }, - { - "icon": { - "paths": [ - "M16 512c0-61.856 50.144-112 112-112s112 50.144 112 112v0c0 61.856-50.144 112-112 112s-112-50.144-112-112v0zM336 512c0-61.856 50.144-112 112-112s112 50.144 112 112v0c0 61.856-50.144 112-112 112s-112-50.144-112-112v0zM768 400c61.856 0 112 50.144 112 112s-50.144 112-112 112v0c-61.856 0-112-50.144-112-112s50.144-112 112-112v0z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["ellipsis"] - }, - "attrs": [{}], - "properties": { - "order": 71, - "id": 57, - "name": "ellipsis", - "prevSize": 32, - "code": 59692, - "ligatures": "ellipsis" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 54 - }, - { - "icon": { - "paths": [ - "M96 128c-53 0-96 43-96 96 0 30.2 14.2 58.6 38.4 76.8l435.2 326.4c22.8 17 54 17 76.8 0l435.2-326.4c24.2-18.2 38.4-46.6 38.4-76.8 0-53-43-96-96-96h-832zM0 352v416c0 70.6 57.4 128 128 128h768c70.6 0 128-57.4 128-128v-416l-435.2 326.4c-45.6 34.2-108 34.2-153.6 0l-435.2-326.4z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["envelope"] - }, - "attrs": [{}], - "properties": { - "order": 18, - "id": 56, - "name": "envelope", - "prevSize": 32, - "code": 59693, - "ligatures": "envelope, mail" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 55 - }, - { - "icon": { - "paths": [ - "M77.6 10.2c-20.8-16.4-51-12.6-67.4 8.2s-12.6 51 8.2 67.4l1184 928c20.8 16.4 51 12.6 67.4-8.2s12.6-51-8.2-67.4l-210.4-164.8c79.2-81.2 132.8-172.2 159.8-236.8 6.6-15.8 6.6-33.4 0-49.2-29.8-71.4-92.4-175.4-186-262.2-94-87.6-223.4-161.2-385-161.2-136.4 0-250 52.6-338.6 121.6l-223.8-175.4zM446.2 299c51-46.6 119.2-75 193.8-75 159 0 288 129 288 288 0 49.8-12.6 96.6-34.8 137.4l-77.2-60.4c16.8-38.6 21.2-82.8 9.6-126.6-22.2-83-95.6-138.8-177.2-142.2-11.6-0.4-18.4 12.2-14.8 23.4 4.2 12.8 6.6 26.4 6.6 40.6 0 20.4-4.8 39.6-13.2 56.6l-180.6-141.6zM746 779.8c-32.8 13-68.6 20.2-106 20.2-159 0-288-129-288-288 0-13.8 1-27.2 2.8-40.4l-188.6-148.6c-45.6 59.4-78.2 118.6-97.2 164.4-6.6 15.8-6.6 33.4 0 49.2 29.8 71.4 92.4 175.4 186 262.2 94 87.6 223.4 161.2 385 161.2 95.6 0 179.8-25.8 252.4-65l-146.4-115.2z" - ], - "attrs": [{}], - "width": 1280, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["eye-slash"] - }, - "attrs": [{}], - "properties": { - "order": 19, - "id": 55, - "name": "eye-slash", - "prevSize": 32, - "code": 59694, - "ligatures": "eye-slash, shuteye" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 56 - }, - { - "icon": { - "paths": [ - "M576 64c-161.6 0-291 73.6-385.2 161.2-93.6 86.8-156.2 190.8-185.8 262.2-6.6 15.8-6.6 33.4 0 49.2 29.6 71.4 92.2 175.4 185.8 262.2 94.2 87.6 223.6 161.2 385.2 161.2s291-73.6 385.2-161.2c93.6-87 156.2-190.8 186-262.2 6.6-15.8 6.6-33.4 0-49.2-29.8-71.4-92.4-175.4-186-262.2-94.2-87.6-223.6-161.2-385.2-161.2zM288 512c0-159.058 128.942-288 288-288s288 128.942 288 288v0c0 159.058-128.942 288-288 288s-288-128.942-288-288v0zM576 384c0 70.6-57.4 128-128 128-14.2 0-27.8-2.4-40.6-6.6-11-3.6-23.8 3.2-23.4 14.8 0.6 13.8 2.6 27.6 6.4 41.4 27.4 102.4 132.8 163.2 235.2 135.8s163.2-132.8 135.8-235.2c-22.2-83-95.6-138.8-177.2-142.2-11.6-0.4-18.4 12.2-14.8 23.4 4.2 12.8 6.6 26.4 6.6 40.6z" - ], - "attrs": [{}], - "width": 1152, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["eye"] - }, - "attrs": [{}], - "properties": { - "order": 20, - "id": 54, - "name": "eye", - "prevSize": 32, - "code": 59695, - "ligatures": "eye, view" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 57 - }, - { - "icon": { - "paths": [ - "M128 0c-70.6 0-128 57.4-128 128v768c0 70.6 57.4 128 128 128h512c70.6 0 128-57.4 128-128v-576h-256c-35.4 0-64-28.6-64-64v-256h-320zM512 0v256h256l-256-256zM306 578l-62 62 62 62c18.8 18.8 18.8 49.2 0 67.8s-49.2 18.8-67.8 0l-96.2-95.8c-18.8-18.8-18.8-49.2 0-67.8l96-96c18.8-18.8 49.2-18.8 67.8 0s18.8 49.2 0 67.8zM530 510l96 96c18.8 18.8 18.8 49.2 0 67.8l-96 96c-18.8 18.8-49.2 18.8-67.8 0s-18.8-49.2 0-67.8l62-62-62-62c-18.8-18.8-18.8-49.2 0-67.8s49.2-18.8 67.8 0z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["file-code"] - }, - "attrs": [{}], - "properties": { - "order": 72, - "id": 53, - "name": "file-code", - "prevSize": 32, - "code": 59696, - "ligatures": "file-code, template" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 58 - }, - { - "icon": { - "paths": [ - "M0 128c0-70.6 57.4-128 128-128h320v256c0 35.4 28.6 64 64 64h256v576c0 70.6-57.4 128-128 128h-512c-70.6 0-128-57.4-128-128v-768zM768 256h-256v-256l256 256z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["file"] - }, - "attrs": [{}], - "properties": { - "order": 73, - "id": 52, - "name": "file", - "prevSize": 32, - "code": 59697, - "ligatures": "file" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 59 - }, - { - "icon": { - "paths": [ - "M640 0h-320c-70.6 0-128 57.4-128 128v576c0 70.6 57.4 128 128 128h448c70.6 0 128-57.4 128-128v-448h-192c-35.4 0-64-28.6-64-64v-192zM896 192l-192-192v192h192zM96 240c0-26.6-21.4-48-48-48s-48 21.4-48 48v512c0 150.2 121.8 272 272 272h384c26.6 0 48-21.4 48-48s-21.4-48-48-48h-384c-97.2 0-176-78.8-176-176v-512z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["files"] - }, - "attrs": [{}], - "properties": { - "order": 74, - "id": 51, - "name": "files", - "prevSize": 32, - "code": 59698, - "ligatures": "files" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 60 - }, - { - "icon": { - "paths": [ - "M7.8 109.8c13.2-28 41.2-45.8 72.2-45.8h864c31 0 59 17.8 72.2 45.8s9.2 61-10.4 85l-365.8 447v254.2c0 24.2-13.6 46.4-35.4 57.2s-47.6 8.6-67-6l-128-96c-16.2-12-25.6-31-25.6-51.2v-158.2l-366-447.2c-19.4-23.8-23.6-57-10.2-84.8z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["filter"] - }, - "attrs": [{}], - "properties": { - "order": 75, - "id": 50, - "name": "filter", - "prevSize": 32, - "code": 59699, - "ligatures": "filter" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 61 - }, - { - "icon": { - "paths": [ - "M128 960h768c70.6 0 128-57.4 128-128v-512c0-70.6-57.4-128-128-128h-320c-20.2 0-39.2-9.4-51.2-25.6l-38.4-51.2c-24.2-32.2-62.2-51.2-102.4-51.2h-256c-70.6 0-128 57.4-128 128v640c0 70.6 57.4 128 128 128z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["folder"] - }, - "attrs": [{}], - "properties": { - "order": 76, - "id": 49, - "name": "folder", - "prevSize": 32, - "code": 59700, - "ligatures": "folder" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 62 - }, - { - "icon": { - "paths": [ - "M0 512c0-282.77 229.23-512 512-512s512 229.23 512 512v0c0 282.77-229.23 512-512 512s-512-229.23-512-512v0zM640 704c0-53.8-33-99.8-80-118.6v-409.4c0-26.6-21.4-48-48-48s-48 21.4-48 48v409.4c-47 19-80 65-80 118.6 0 70.6 57.4 128 128 128s128-57.4 128-128zM288 352c35.346 0 64-28.654 64-64s-28.654-64-64-64v0c-35.346 0-64 28.654-64 64s28.654 64 64 64v0zM256 512c0-35.346-28.654-64-64-64s-64 28.654-64 64v0c0 35.346 28.654 64 64 64s64-28.654 64-64v0zM832 576c35.346 0 64-28.654 64-64s-28.654-64-64-64v0c-35.346 0-64 28.654-64 64s28.654 64 64 64v0zM800 288c0-35.346-28.654-64-64-64s-64 28.654-64 64v0c0 35.346 28.654 64 64 64s64-28.654 64-64v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["gauge"] - }, - "attrs": [{}], - "properties": { - "order": 77, - "id": 48, - "name": "gauge", - "prevSize": 32, - "code": 59701, - "ligatures": "gauge" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 63 - }, - { - "icon": { - "paths": [ - "M991.8 333.2c6.4 17.4 1 36.8-12.8 49.2l-86.6 78.8c2.2 16.6 3.4 33.6 3.4 50.8s-1.2 34.2-3.4 50.8l86.6 78.8c13.8 12.4 19.2 31.8 12.8 49.2-8.8 23.8-19.4 46.6-31.6 68.6l-9.4 16.2c-13.2 22-28 42.8-44.2 62.4-11.8 14.4-31.4 19.2-49 13.6l-111.4-35.4c-26.8 20.6-56.4 37.8-88 50.8l-25 114.2c-4 18.2-18 32.6-36.4 35.6-27.6 4.6-56 7-85 7s-57.4-2.4-85-7c-18.4-3-32.4-17.4-36.4-35.6l-25-114.2c-31.6-13-61.2-30.2-88-50.8l-111.2 35.6c-17.6 5.6-37.2 0.6-49-13.6-16.2-19.6-31-40.4-44.2-62.4l-9.4-16.2c-12.2-22-22.8-44.8-31.6-68.6-6.4-17.4-1-36.8 12.8-49.2l86.6-78.8c-2.2-16.8-3.4-33.8-3.4-51s1.2-34.2 3.4-50.8l-86.6-78.8c-13.8-12.4-19.2-31.8-12.8-49.2 8.8-23.8 19.4-46.6 31.6-68.6l9.4-16.2c13.2-22 28-42.8 44.2-62.4 11.8-14.4 31.4-19.2 49-13.6l111.4 35.4c26.8-20.6 56.4-37.8 88-50.8l25-114.2c4-18.2 18-32.6 36.4-35.6 27.6-4.8 56-7.2 85-7.2s57.4 2.4 85 7c18.4 3 32.4 17.4 36.4 35.6l25 114.2c31.6 13 61.2 30.2 88 50.8l111.4-35.4c17.6-5.6 37.2-0.6 49 13.6 16.2 19.6 31 40.4 44.2 62.4l9.4 16.2c12.2 22 22.8 44.8 31.6 68.6zM512 672c88.366 0 160-71.634 160-160s-71.634-160-160-160v0c-88.366 0-160 71.634-160 160s71.634 160 160 160v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["gear"] - }, - "attrs": [{}], - "properties": { - "order": 21, - "id": 47, - "name": "gear", - "prevSize": 32, - "code": 59702, - "ligatures": "gear, settings" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 64 - }, - { - "icon": { - "paths": [ - "M448 160c0-53-43-96-96-96h-192c-53 0-96 43-96 96v192c0 53 43 96 96 96h192c53 0 96-43 96-96v-192zM448 672c0-53-43-96-96-96h-192c-53 0-96 43-96 96v192c0 53 43 96 96 96h192c53 0 96-43 96-96v-192zM576 160v192c0 53 43 96 96 96h192c53 0 96-43 96-96v-192c0-53-43-96-96-96h-192c-53 0-96 43-96 96zM960 672c0-53-43-96-96-96h-192c-53 0-96 43-96 96v192c0 53 43 96 96 96h192c53 0 96-43 96-96v-192z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["grid-2"] - }, - "attrs": [{}], - "properties": { - "order": 23, - "id": 45, - "name": "grid-2", - "prevSize": 32, - "code": 59704, - "ligatures": "grid-2, grid-large" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 65 - }, - { - "icon": { - "paths": [ - "M0 144c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96zM0 464c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96zM256 784v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80zM320 144c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96zM576 464v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80zM320 784c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96zM896 144v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80zM640 464c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96zM896 784v96c0 44.2-35.8 80-80 80h-96c-44.2 0-80-35.8-80-80v-96c0-44.2 35.8-80 80-80h96c44.2 0 80 35.8 80 80z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["grid"] - }, - "attrs": [{}], - "properties": { - "order": 78, - "id": 44, - "name": "grid", - "prevSize": 32, - "code": 59705, - "ligatures": "grid" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 66 - }, - { - "icon": { - "paths": [ - "M362.6 64.8c34.8 5.8 58.4 38.8 52.6 73.6l-19.6 117.6h190.2l23-138.6c5.8-34.8 38.8-58.4 73.6-52.6s58.4 38.8 52.6 73.6l-19.4 117.6h116.4c35.4 0 64 28.6 64 64s-28.6 64-64 64h-137.8l-42.6 256h116.4c35.4 0 64 28.6 64 64s-28.6 64-64 64h-137.8l-23 138.6c-5.8 34.8-38.8 58.4-73.6 52.6s-58.4-38.8-52.6-73.6l19.6-117.4h-190.4l-23 138.6c-5.8 34.8-38.8 58.4-73.6 52.6s-58.4-38.8-52.6-73.6l19.4-117.8h-116.4c-35.4 0-64-28.6-64-64s28.6-64 64-64h137.8l42.6-256h-116.4c-35.4 0-64-28.6-64-64s28.6-64 64-64h137.8l23-138.6c5.8-34.8 38.8-58.4 73.6-52.6zM374.2 384l-42.6 256h190.2l42.6-256h-190.2z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["hashtag"] - }, - "attrs": [{}], - "properties": { - "order": 79, - "id": 43, - "name": "hashtag", - "prevSize": 32, - "code": 59706, - "ligatures": "hashtag" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 67 - }, - { - "icon": { - "paths": [ - "M1151.6 511c0 36-30 64.2-64 64.2h-64l1.4 320.4c0 5.4-0.4 10.8-1 16.2v32.2c0 44.2-35.8 80-80 80h-32c-2.2 0-4.4 0-6.6-0.2-2.8 0.2-5.6 0.2-8.4 0.2h-113c-44.2 0-80-35.8-80-80v-176c0-35.4-28.6-64-64-64h-128c-35.4 0-64 28.6-64 64v176c0 44.2-35.8 80-80 80h-111.8c-3 0-6-0.2-9-0.4-2.4 0.2-4.8 0.4-7.2 0.4h-32c-44.2 0-80-35.8-80-80v-224c0-1.8 0-3.8 0.2-5.6v-139.2h-64.2c-36 0-64-28-64-64.2 0-18 6-34 20-48l512.8-447c14-14 30-16 44-16s30 4 42 14l510.8 449c16 14 24 30 22 48z" - ], - "attrs": [{}], - "width": 1152, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["house"] - }, - "attrs": [{}], - "properties": { - "order": 80, - "id": 42, - "name": "house", - "prevSize": 32, - "code": 59707, - "ligatures": "house, home" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 68 - }, - { - "icon": { - "paths": [ - "M0 192c0-70.6 57.4-128 128-128h768c70.6 0 128 57.4 128 128v640c0 70.6-57.4 128-128 128h-768c-70.6 0-128-57.4-128-128v-640zM647.6 405c-9-13.2-23.8-21-39.6-21s-30.8 7.8-39.6 21l-174 255.2-53-66.2c-9.2-11.4-23-18-37.4-18s-28.4 6.6-37.4 18l-128 160c-11.6 14.4-13.8 34.2-5.8 50.8s24.8 27.2 43.2 27.2h672c17.8 0 34.2-9.8 42.4-25.6s7.2-34.8-2.8-49.4l-240-352zM224 384c53.019 0 96-42.981 96-96s-42.981-96-96-96v0c-53.019 0-96 42.981-96 96s42.981 96 96 96v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["image"] - }, - "attrs": [{}], - "properties": { - "order": 81, - "id": 41, - "name": "image", - "prevSize": 32, - "code": 59708, - "ligatures": "image, asset, assets" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 69 - }, - { - "icon": { - "paths": [ - "M672 704c194.4 0 352-157.6 352-352s-157.6-352-352-352-352 157.6-352 352c0 37.4 5.8 73.6 16.6 107.4l-322.6 322.6c-9 9-14 21.2-14 34v160c0 26.6 21.4 48 48 48h160c26.6 0 48-21.4 48-48v-80h80c26.6 0 48-21.4 48-48v-80h80c12.8 0 25-5 34-14l66.6-66.6c33.8 10.8 70 16.6 107.4 16.6zM752 192c44.183 0 80 35.817 80 80s-35.817 80-80 80v0c-44.183 0-80-35.817-80-80s35.817-80 80-80v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["key"] - }, - "attrs": [{}], - "properties": { - "order": 82, - "id": 40, - "name": "key", - "prevSize": 32, - "code": 59709, - "ligatures": "key" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 70 - }, - { - "icon": { - "paths": [ - "M0 256c0-70.6 57.4-128 128-128h1024c70.6 0 128 57.4 128 128v512c0 70.6-57.4 128-128 128h-1024c-70.6 0-128-57.4-128-128v-512zM640 256v512h512v-512h-512zM356.6 351.8c-6.4-14.4-20.8-23.8-36.6-23.8s-30.2 9.4-36.6 23.8l-128 288c-9 20.2 0.2 43.8 20.4 52.8s43.8-0.2 52.8-20.4l17.8-40.2h147.2l17.8 40.2c9 20.2 32.6 29.2 52.8 20.4s29.2-32.6 20.4-52.8l-128-288zM320 466.4l38 85.6h-76l38-85.6zM896 328c22 0 40 18 40 40v8h120c22 0 40 18 40 40s-18 40-40 40h-4l-3.2 9c-17.8 48.8-44.8 93.2-79.2 130.8 1.8 1.2 3.6 2.2 5.4 3.2l37.8 22.6c19 11.4 25 36 13.8 54.8s-36 25-54.8 13.8l-37.8-22.6c-9-5.4-17.6-11-26.2-17-21.2 15-43.8 28-68 38.8l-7.2 3.2c-20.2 9-43.8-0.2-52.8-20.4s0.2-43.8 20.4-52.8l7.2-3.2c12.8-5.8 25.2-12.2 37-19.6l-24.4-24.4c-15.6-15.6-15.6-41 0-56.6s41-15.6 56.6 0l30.2 30.2c24.8-26.2 45-56.6 59.6-90h-214.4c-22 0-40-18-40-40s18-40 40-40h104v-8c0-22 18-40 40-40z" - ], - "attrs": [{}], - "width": 1280, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["language"] - }, - "attrs": [{}], - "properties": { - "order": 83, - "id": 39, - "name": "language", - "prevSize": 32, - "code": 59710, - "ligatures": "language" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 71 - }, - { - "icon": { - "paths": [ - "M544 768c19.2-63.8 59-118.2 98.4-172.4v0c10.4-14.2 20.8-28.4 30.8-42.8 39.6-57 62.8-126 62.8-200.6 0-194.6-157.6-352.2-352-352.2s-352 157.6-352 352c0 74.6 23.2 143.8 62.8 200.6 10 14.4 20.4 28.6 30.8 42.8v0c39.6 54.2 79.4 108.8 98.4 172.4h320zM384 1024c88.4 0 160-71.6 160-160v-32h-320v32c0 88.4 71.6 160 160 160zM224 352c0 17.6-14.4 32-32 32s-32-14.4-32-32c0-123.8 100.2-224 224-224 17.6 0 32 14.4 32 32s-14.4 32-32 32c-88.4 0-160 71.6-160 160z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["lightbulb"] - }, - "attrs": [{}], - "properties": { - "order": 24, - "id": 38, - "name": "lightbulb", - "prevSize": 32, - "code": 59711, - "ligatures": "lightbulb" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 72 - }, - { - "icon": { - "paths": [ - "M848 96c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96zM64 128c-35.4 0-64 28.6-64 64s28.6 64 64 64h576c35.4 0 64-28.6 64-64s-28.6-64-64-64h-576zM64 448c-35.4 0-64 28.6-64 64s28.6 64 64 64h576c35.4 0 64-28.6 64-64s-28.6-64-64-64h-576zM64 768c-35.4 0-64 28.6-64 64s28.6 64 64 64h576c35.4 0 64-28.6 64-64s-28.6-64-64-64h-576zM944 416h-96c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48zM848 736c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["list-rtl"] - }, - "attrs": [{}], - "properties": { - "order": 25, - "id": 37, - "name": "list-rtl", - "prevSize": 32, - "code": 59712, - "ligatures": "list-flip, listrtl" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 73 - }, - { - "icon": { - "paths": [ - "M880 96c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48v176h-112c0-26.6-21.4-48-48-48h-96c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48h112v208c0 8.8-7.2 16-16 16h-96c0-26.6-21.4-48-48-48h-96c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48h96c61.8 0 112-50.2 112-112v-480c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96zM640 128h-576c-35.4 0-64 28.6-64 64s28.6 64 64 64h576c35.4 0 64-28.6 64-64s-28.6-64-64-64zM384 448h-320c-35.4 0-64 28.6-64 64s28.6 64 64 64h320c35.4 0 64-28.6 64-64s-28.6-64-64-64zM384 768h-320c-35.4 0-64 28.6-64 64s28.6 64 64 64h320c35.4 0 64-28.6 64-64s-28.6-64-64-64z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["list-tree-rtl"] - }, - "attrs": [{}], - "properties": { - "order": 26, - "id": 36, - "name": "list-tree-rtl", - "prevSize": 32, - "code": 59713, - "ligatures": "list-tree-flip, structurertl" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 74 - }, - { - "icon": { - "paths": [ - "M48 96c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48v480c0 61.8 50.2 112 112 112h96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96c-26.6 0-48 21.4-48 48h-96c-8.8 0-16-7.2-16-16v-208h112c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96c-26.6 0-48 21.4-48 48h-112v-176c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96zM320 192c0 35.4 28.6 64 64 64h576c35.4 0 64-28.6 64-64s-28.6-64-64-64h-576c-35.4 0-64 28.6-64 64zM576 512c0 35.4 28.6 64 64 64h320c35.4 0 64-28.6 64-64s-28.6-64-64-64h-320c-35.4 0-64 28.6-64 64zM576 832c0 35.4 28.6 64 64 64h320c35.4 0 64-28.6 64-64s-28.6-64-64-64h-320c-35.4 0-64 28.6-64 64z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["list-tree"] - }, - "attrs": [{}], - "properties": { - "order": 84, - "id": 35, - "name": "list-tree", - "prevSize": 32, - "code": 59714, - "ligatures": "list-tree, structure" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 75 - }, - { - "icon": { - "paths": [ - "M80 96c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96zM384 128c-35.4 0-64 28.6-64 64s28.6 64 64 64h576c35.4 0 64-28.6 64-64s-28.6-64-64-64h-576zM384 448c-35.4 0-64 28.6-64 64s28.6 64 64 64h576c35.4 0 64-28.6 64-64s-28.6-64-64-64h-576zM384 768c-35.4 0-64 28.6-64 64s28.6 64 64 64h576c35.4 0 64-28.6 64-64s-28.6-64-64-64h-576zM32 464v96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96c-26.6 0-48 21.4-48 48zM80 736c-26.6 0-48 21.4-48 48v96c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48v-96c0-26.6-21.4-48-48-48h-96z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["list"] - }, - "attrs": [{}], - "properties": { - "order": 85, - "id": 34, - "name": "list", - "prevSize": 32, - "code": 59715, - "ligatures": "list" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 76 - }, - { - "icon": { - "paths": [ - "M431.4 998.4c102.6-128.4 336.6-439.6 336.6-614.4 0-212-172-384-384-384s-384 172-384 384c0 174.8 234 486 336.6 614.4 24.6 30.6 70.2 30.6 94.8 0zM384 256c70.692 0 128 57.308 128 128s-57.308 128-128 128v0c-70.692 0-128-57.308-128-128s57.308-128 128-128v0z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["location-dot"] - }, - "attrs": [{}], - "properties": { - "order": 86, - "id": 33, - "name": "location-dot", - "prevSize": 32, - "code": 59716, - "ligatures": "location-dot, location" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 77 - }, - { - "icon": { - "paths": [ - "M288 288v96h320v-96c0-88.4-71.6-160-160-160s-160 71.6-160 160zM160 384v-96c0-159 129-288 288-288s288 129 288 288v96h32c70.6 0 128 57.4 128 128v384c0 70.6-57.4 128-128 128h-640c-70.6 0-128-57.4-128-128v-384c0-70.6 57.4-128 128-128h32z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["lock"] - }, - "attrs": [{}], - "properties": { - "order": 87, - "id": 32, - "name": "lock", - "prevSize": 32, - "code": 59717, - "ligatures": "lock, secure" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 78 - }, - { - "icon": { - "paths": [ - "M832 416c0 91.8-29.8 176.6-80 245.4l253.2 253.4c25 25 25 65.6 0 90.6s-65.6 25-90.6 0l-253.2-253.4c-68.8 50.4-153.6 80-245.4 80-229.8 0-416-186.2-416-416s186.2-416 416-416 416 186.2 416 416zM416 704c159.058 0 288-128.942 288-288s-128.942-288-288-288v0c-159.058 0-288 128.942-288 288s128.942 288 288 288v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["magnifying-glass"] - }, - "attrs": [{}], - "properties": { - "order": 88, - "id": 31, - "name": "magnifying-glass", - "prevSize": 32, - "code": 59718, - "ligatures": "magnifying-glass, search" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 79 - }, - { - "icon": { - "paths": [ - "M864 512c0 35.4-28.6 64-64 64h-704c-35.4 0-64-28.6-64-64s28.6-64 64-64h704c35.4 0 64 28.6 64 64z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["minus"] - }, - "attrs": [{}], - "properties": { - "order": 89, - "id": 30, - "name": "minus", - "prevSize": 32, - "code": 59719, - "ligatures": "minus" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 80 - }, - { - "icon": { - "paths": [ - "M192 192c0-70.6 57.4-128 128-128h576c70.6 0 128 57.4 128 128v640c0 70.6-57.4 128-128 128h-736c-88.4 0-160-71.6-160-160v-544c0-35.4 28.6-64 64-64s64 28.6 64 64v544c0 17.6 14.4 32 32 32s32-14.4 32-32v-608zM320 240v160c0 26.6 21.4 48 48 48h224c26.6 0 48-21.4 48-48v-160c0-26.6-21.4-48-48-48h-224c-26.6 0-48 21.4-48 48zM736 224c0 17.6 14.4 32 32 32h96c17.6 0 32-14.4 32-32s-14.4-32-32-32h-96c-17.6 0-32 14.4-32 32zM736 416c0 17.6 14.4 32 32 32h96c17.6 0 32-14.4 32-32s-14.4-32-32-32h-96c-17.6 0-32 14.4-32 32zM320 608c0 17.6 14.4 32 32 32h512c17.6 0 32-14.4 32-32s-14.4-32-32-32h-512c-17.6 0-32 14.4-32 32zM320 800c0 17.6 14.4 32 32 32h512c17.6 0 32-14.4 32-32s-14.4-32-32-32h-512c-17.6 0-32 14.4-32 32z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["newspaper"] - }, - "attrs": [{}], - "properties": { - "order": 27, - "id": 29, - "name": "newspaper", - "prevSize": 32, - "code": 59720, - "ligatures": "newspaper, section" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 81 - }, - { - "icon": { - "paths": [ - "M678.6 734.2c54.6-7.8 103.8-38.8 134.4-85.8l323.4-500.2c25.2-39 18.8-90.6-15.2-122.4s-85.8-34.6-123-6.6l-473.4 355.2c-48 36-76.4 92.2-76.8 152.2l230.6 207.6zM639.4 785l-232-208.8c-119.6 4.4-215.4 103-215.4 223.8 0 7.8 0.4 15.6 1.2 23.2 3.6 35-20.4 72.8-55.6 72.8h-9.6c-35.4 0-64 28.6-64 64s28.6 64 64 64h288c123.8 0 224-100.2 224-224 0-5-0.2-10-0.4-15z" - ], - "attrs": [{}], - "width": 1152, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["paintbrush"] - }, - "attrs": [{}], - "properties": { - "order": 28, - "id": 28, - "name": "paintbrush", - "prevSize": 32, - "code": 59721, - "ligatures": "paintbrush, brush" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 82 - }, - { - "icon": { - "paths": [ - "M996.2 11.2c20.2 14 30.8 38.2 27 62.4l-128 832c-3 19.4-14.8 36.4-32 46s-37.8 10.8-56 3.2l-239.2-99.4-137 148.2c-17.8 19.4-45.8 25.8-70.4 16.2s-40.6-33.4-40.6-59.8v-167.2c0-8 3-15.6 8.4-21.4l335.2-365.8c11.6-12.6 11.2-32-0.8-44s-31.4-12.8-44-1.4l-406.8 361.4-176.6-88.4c-21.2-10.6-34.8-31.8-35.4-55.4s11.8-45.6 32.2-57.4l896-512c21.4-12.2 47.8-11 68 2.8z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["paper-plane"] - }, - "attrs": [{}], - "properties": { - "order": 29, - "id": 27, - "name": "paper-plane", - "prevSize": 32, - "code": 59722, - "ligatures": "paper-plane, paperplane" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 83 - }, - { - "icon": { - "paths": [ - "M943.2 43.4c-43.8-43.8-114.6-43.8-158.4 0l-60.2 60 195.8 195.8 60.2-60.2c43.8-43.8 43.8-114.6 0-158.4l-37.4-37.2zM344.8 483.4c-12.2 12.2-21.6 27.2-27 43.8l-59.2 177.6c-5.8 17.2-1.2 36.2 11.6 49.2s31.8 17.4 49.2 11.6l177.6-59.2c16.4-5.4 31.4-14.8 43.8-27l334.6-334.8-196-196-334.6 334.8zM192 128c-106 0-192 86-192 192v512c0 106 86 192 192 192h512c106 0 192-86 192-192v-192c0-35.4-28.6-64-64-64s-64 28.6-64 64v192c0 35.4-28.6 64-64 64h-512c-35.4 0-64-28.6-64-64v-512c0-35.4 28.6-64 64-64h192c35.4 0 64-28.6 64-64s-28.6-64-64-64h-192z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["pen-to-square"] - }, - "attrs": [{}], - "properties": { - "order": 90, - "id": 26, - "name": "pen-to-square", - "prevSize": 32, - "code": 59723, - "ligatures": "pen-to-square, field" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 84 - }, - { - "icon": { - "paths": [ - "M820.6 462l22.6-22.6-259.8-259.8-466.2 466.2c-20.8 20.8-36 46.6-44.4 74.8l-70.8 240.8c-5 16.8-0.4 35 12.2 47.4s30.6 17 47.4 12.2l240.6-70.8c28.2-8.4 54-23.6 74.8-44.4l443.6-443.8zM320 798.8l-18.2 45.4c-8 6.2-17 10.8-26.6 13.8l-156.4 46 46-156.2c2.8-9.8 7.6-18.8 13.8-26.6l45.4-18.2v64c0 17.6 14.4 32 32 32h64zM725.4 37.4l-28.8 29-45.2 45.2-22.8 22.6 259.8 259.8 96.8-96.8c50-50 50-131 0-181l-78.6-78.8c-50-50-131-50-181 0zM630.6 373.4l-288 288c-12.4 12.4-32.8 12.4-45.2 0s-12.4-32.8 0-45.2l288-288c12.4-12.4 32.8-12.4 45.2 0s12.4 32.8 0 45.2z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["pencil"] - }, - "attrs": [{}], - "properties": { - "order": 91, - "id": 25, - "name": "pencil", - "prevSize": 32, - "code": 59724, - "ligatures": "pencil, edit" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 85 - }, - { - "icon": { - "paths": [ - "M146 78c-29.6-18.2-66.8-18.8-97-1.8s-49 49-49 83.8v704c0 34.8 18.8 66.8 49 83.8s67.4 16.2 97-1.8l576-352c28.6-17.4 46-48.4 46-82s-17.4-64.4-46-82l-576-352z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["play"] - }, - "attrs": [{}], - "properties": { - "order": 92, - "id": 24, - "name": "play", - "prevSize": 32, - "code": 59725, - "ligatures": "play" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 86 - }, - { - "icon": { - "paths": [ - "M192 0c-35.4 0-64 28.6-64 64v192h128v-192c0-35.4-28.6-64-64-64zM576 0c-35.4 0-64 28.6-64 64v192h128v-192c0-35.4-28.6-64-64-64zM64 320c-35.4 0-64 28.6-64 64s28.6 64 64 64v64c0 154.8 110 284 256 313.6v134.4c0 35.4 28.6 64 64 64s64-28.6 64-64v-134.4c146-29.6 256-158.8 256-313.6v-64c35.4 0 64-28.6 64-64s-28.6-64-64-64h-640z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["plug"] - }, - "attrs": [{}], - "properties": { - "order": 93, - "id": 23, - "name": "plug", - "prevSize": 32, - "code": 59726, - "ligatures": "plug, plugin" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 87 - }, - { - "icon": { - "paths": [ - "M512 160c0-35.4-28.6-64-64-64s-64 28.6-64 64v288h-288c-35.4 0-64 28.6-64 64s28.6 64 64 64h288v288c0 35.4 28.6 64 64 64s64-28.6 64-64v-288h288c35.4 0 64-28.6 64-64s-28.6-64-64-64h-288v-288z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["plus"] - }, - "attrs": [{}], - "properties": { - "order": 94, - "id": 22, - "name": "plus", - "prevSize": 32, - "code": 59727, - "ligatures": "plus" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 88 - }, - { - "icon": { - "paths": [ - "M97 448h-17c-26.6 0-48-21.4-48-48v-256c0-19.4 11.6-37 29.6-44.4s38.6-3.4 52.4 10.4l83.2 83.2c175.2-173 457.4-172.4 631.6 2 175 175 175 458.6 0 633.6s-458.6 175-633.6 0c-25-25-25-65.6 0-90.6s65.6-25 90.6 0c125 125 327.6 125 452.6 0s125-327.6 0-452.6c-124.4-124.4-325.4-125-450.6-2l82.2 82.4c13.8 13.8 17.8 34.4 10.4 52.4s-25 29.6-44.4 29.6h-239z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["rotate-left"] - }, - "attrs": [{}], - "properties": { - "order": 95, - "id": 21, - "name": "rotate-left", - "prevSize": 32, - "code": 59728, - "ligatures": "rotate-left, rotate" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 89 - }, - { - "icon": { - "paths": [ - "M930 14c-17-17-44-18.8-63.2-4.2l-208 160c-11.8 9-18.8 23.2-18.8 38v108.2l-171.2 171.2c13.4 8.4 26 18.6 37.6 30.2s21.8 24.4 30.2 37.6l171.2-171h108.2c15 0 29-7 38-18.8l160-208c14.8-19.2 13-46.2-4.2-63.2l-79.8-80zM242.8 562.8l-224 224c-25 25-25 65.6 0 90.6l128 128c25 25 65.6 25 90.6 0l224-224c60.4-60.4 60.4-158.2 0-218.6s-158.2-60.4-218.6 0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["screwdriver"] - }, - "attrs": [{}], - "properties": { - "order": 30, - "id": 20, - "name": "screwdriver", - "prevSize": 32, - "code": 59729, - "ligatures": "screwdriver" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 90 - }, - { - "icon": { - "paths": [ - "M410 69.6c-23-10.4-50-6.2-68.8 10.8l-320 288c-13.6 12.2-21.2 29.4-21.2 47.6s7.8 35.4 21.2 47.6l320 288c18.8 16.8 45.6 21 68.8 10.8s38-33.2 38-58.4v-128h192c106 0 192 86 192 192 0 60.8-25.6 95.8-44.4 113.6-11 10.2-19.6 24-19.6 39 0 21.6 17.6 39.4 39.4 39.4 5.6 0 11.2-1 16.2-3.8 37.4-20.4 200.4-121.6 200.4-348.2 0-194.4-157.6-352-352-352h-224v-128c0-25.2-15-48.2-38-58.4v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["share-rtl"] - }, - "attrs": [{}], - "properties": { - "order": 31, - "id": 19, - "name": "share-rtl", - "prevSize": 32, - "code": 59730, - "ligatures": "share-flip, shareleft" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 91 - }, - { - "icon": { - "paths": [ - "M614 69.6c-23 10.2-38 33.2-38 58.4v128h-224c-194.4 0-352 157.6-352 352 0 226.6 163 327.8 200.4 348.2 5 2.8 10.6 3.8 16.2 3.8 21.8 0 39.4-17.8 39.4-39.4 0-15-8.6-28.8-19.6-39-18.8-17.8-44.4-52.8-44.4-113.6 0-106 86-192 192-192h192v128c0 25.2 14.8 48.2 38 58.4s50 6 68.8-10.8l320-288c13.4-12.2 21.2-29.4 21.2-47.6s-7.6-35.4-21.2-47.6l-320-288c-18.8-17-45.8-21.2-68.8-10.8z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["share"] - }, - "attrs": [{}], - "properties": { - "order": 32, - "id": 18, - "name": "share", - "prevSize": 32, - "code": 59731, - "ligatures": "share" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 92 - }, - { - "icon": { - "paths": [ - "M1024 192c0-70.6-57.4-128-128-128h-768c-70.6 0-128 57.4-128 128v640c0 70.6 57.4 128 128 128h768c70.6 0 128-57.4 128-128v-640zM576 192v640h-448v-640h448zM848 192c26.6 0 48 21.4 48 48s-21.4 48-48 48h-96c-26.6 0-48-21.4-48-48s21.4-48 48-48h96zM896 432c0 26.6-21.4 48-48 48h-96c-26.6 0-48-21.4-48-48s21.4-48 48-48h96c26.6 0 48 21.4 48 48zM848 576c26.6 0 48 21.4 48 48s-21.4 48-48 48h-96c-26.6 0-48-21.4-48-48s21.4-48 48-48h96z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["sidebar-flip"] - }, - "attrs": [{}], - "properties": { - "order": 96, - "id": 17, - "name": "sidebar-flip", - "prevSize": 32, - "code": 59732, - "ligatures": "sidebar-flip, sidebar-right" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 93 - }, - { - "icon": { - "paths": [ - "M0 192c0-70.6 57.4-128 128-128h768c70.6 0 128 57.4 128 128v640c0 70.6-57.4 128-128 128h-768c-70.6 0-128-57.4-128-128v-640zM448 192v640h448v-640h-448zM176 192c-26.6 0-48 21.4-48 48s21.4 48 48 48h96c26.6 0 48-21.4 48-48s-21.4-48-48-48h-96zM128 432c0 26.6 21.4 48 48 48h96c26.6 0 48-21.4 48-48s-21.4-48-48-48h-96c-26.6 0-48 21.4-48 48zM176 576c-26.6 0-48 21.4-48 48s21.4 48 48 48h96c26.6 0 48-21.4 48-48s-21.4-48-48-48h-96z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["sidebar"] - }, - "attrs": [{}], - "properties": { - "order": 97, - "id": 16, - "name": "sidebar", - "prevSize": 32, - "code": 59733, - "ligatures": "sidebar, sidebar-left" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 94 - }, - { - "icon": { - "paths": [ - "M448 64h-320c-35.4 0-64 28.6-64 64v128c0 35.4 28.6 64 64 64h754.8c8.4 0 16.6-3.4 22.6-9.4l96-96c12.4-12.4 12.4-32.8 0-45.2l-96-96c-6-6-14.2-9.4-22.6-9.4h-306.8c0-35.4-28.6-64-64-64s-64 28.6-64 64zM960 512c0-35.4-28.6-64-64-64h-320v-64h-128v64h-306.8c-8.4 0-16.6 3.4-22.6 9.4l-96 96c-12.4 12.4-12.4 32.8 0 45.2l96 96c6 6 14.2 9.4 22.6 9.4h754.8c35.4 0 64-28.6 64-64v-128zM576 960v-192h-128v192c0 35.4 28.6 64 64 64s64-28.6 64-64z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["signs-post"] - }, - "attrs": [{}], - "properties": { - "order": 98, - "id": 15, - "name": "signs-post", - "prevSize": 32, - "code": 59734, - "ligatures": "signs-post, routes" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 95 - }, - { - "icon": { - "paths": [ - "M0 832c0 35.4 28.6 64 64 64h109.4c24.6 56.6 81 96 146.6 96s122-39.4 146.6-96h493.4c35.4 0 64-28.6 64-64s-28.6-64-64-64h-493.4c-24.6-56.6-81-96-146.6-96s-122 39.4-146.6 96h-109.4c-35.4 0-64 28.6-64 64zM256 832c0-35.346 28.654-64 64-64s64 28.654 64 64v0c0 35.346-28.654 64-64 64s-64-28.654-64-64v0zM640 512c0-35.346 28.654-64 64-64s64 28.654 64 64v0c0 35.346-28.654 64-64 64s-64-28.654-64-64v0zM704 352c-65.6 0-122 39.4-146.6 96h-493.4c-35.4 0-64 28.6-64 64s28.6 64 64 64h493.4c24.6 56.6 81 96 146.6 96s122-39.4 146.6-96h109.4c35.4 0 64-28.6 64-64s-28.6-64-64-64h-109.4c-24.6-56.6-81-96-146.6-96zM384 256c-35.346 0-64-28.654-64-64s28.654-64 64-64v0c35.346 0 64 28.654 64 64s-28.654 64-64 64v0zM530.6 128c-24.6-56.6-81-96-146.6-96s-122 39.4-146.6 96h-173.4c-35.4 0-64 28.6-64 64s28.6 64 64 64h173.4c24.6 56.6 81 96 146.6 96s122-39.4 146.6-96h429.4c35.4 0 64-28.6 64-64s-28.6-64-64-64h-429.4z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["sliders"] - }, - "attrs": [{}], - "properties": { - "order": 99, - "id": 14, - "name": "sliders", - "prevSize": 32, - "code": 59735, - "ligatures": "sliders" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 96 - }, - { - "icon": { - "paths": [ - "M128 64c-70.6 0-128 57.4-128 128v640c0 70.6 57.4 128 128 128h768c70.6 0 128-57.4 128-128v-640c0-70.6-57.4-128-128-128h-768zM896 192v128h-768v-128h768zM128 448h128v384h-128v-384zM896 448v384h-512v-384h512z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["table-layout"] - }, - "attrs": [{}], - "properties": { - "order": 100, - "id": 13, - "name": "table-layout", - "prevSize": 32, - "code": 59736, - "ligatures": "table-layout, layout" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 97 - }, - { - "icon": { - "paths": [ - "M0 160v299c0 34 13.4 66.6 37.4 90.6l352 352c50 50 131 50 181 0l267-267c50-50 50-131 0-181l-352-352c-24-24-56.6-37.4-90.6-37.4h-298.8c-53-0.2-96 42.8-96 95.8zM224 224c35.346 0 64 28.654 64 64s-28.654 64-64 64v0c-35.346 0-64-28.654-64-64s28.654-64 64-64v0z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["tag"] - }, - "attrs": [{}], - "properties": { - "order": 101, - "id": 12, - "name": "tag", - "prevSize": 32, - "code": 59737, - "ligatures": "tag" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 98 - }, - { - "icon": { - "paths": [ - "M690 78.2l255.6 258.6c104.8 106 104.8 276.4 0 382.4l-224 226.6c-18.6 18.8-49 19-67.8 0.4s-19-49-0.4-67.8l223.8-226.6c67.8-68.6 67.8-178.8 0-247.4l-255.4-258.6c-18.6-18.8-18.4-49.2 0.4-67.8s49.2-18.4 67.8 0.4zM0 459v-299c0-53 43-96 96-96h299c34 0 66.6 13.4 90.6 37.4l336 336c50 50 50 131 0 181l-267 267c-50 50-131 50-181 0l-336-336c-24.2-24-37.6-56.4-37.6-90.4zM288 288c0-35.346-28.654-64-64-64s-64 28.654-64 64v0c0 35.346 28.654 64 64 64s64-28.654 64-64v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["tags"] - }, - "attrs": [{}], - "properties": { - "order": 33, - "id": 11, - "name": "tags", - "prevSize": 32, - "code": 59738, - "ligatures": "tags" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 99 - }, - { - "icon": { - "paths": [ - "M270.4 35.4l-14.4 28.6h-192c-35.4 0-64 28.6-64 64s28.6 64 64 64h768c35.4 0 64-28.6 64-64s-28.6-64-64-64h-192l-14.4-28.6c-10.8-21.8-33-35.4-57.2-35.4h-240.8c-24.2 0-46.4 13.6-57.2 35.4zM832 256h-768l42.4 678c3.2 50.6 45.2 90 95.8 90h491.6c50.6 0 92.6-39.4 95.8-90l42.4-678z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["trash"] - }, - "attrs": [{}], - "properties": { - "order": 35, - "id": 9, - "name": "trash", - "prevSize": 32, - "code": 59740, - "ligatures": "trash" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 100 - }, - { - "icon": { - "paths": [ - "M512 64c28.4 0 54.6 15 69 39.6l432 736c14.6 24.8 14.6 55.4 0.4 80.2s-40.8 40.2-69.4 40.2h-864c-28.6 0-55.2-15.4-69.4-40.2s-14-55.6 0.4-80.2l432-736c14.4-24.6 40.6-39.6 69-39.6zM512 320c-26.6 0-48 21.4-48 48v224c0 26.6 21.4 48 48 48s48-21.4 48-48v-224c0-26.6-21.4-48-48-48zM576 768c0-35.346-28.654-64-64-64s-64 28.654-64 64v0c0 35.346 28.654 64 64 64s64-28.654 64-64v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["triangle-exclamation"] - }, - "attrs": [{}], - "properties": { - "order": 102, - "id": 8, - "name": "triangle-exclamation", - "prevSize": 32, - "code": 59741, - "ligatures": "triangle-exclamation, alert" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 101 - }, - { - "icon": { - "paths": [ - "M288 288c0-88.4 71.6-160 160-160 63.8 0 118.8 37.2 144.6 91.4 15.2 32 53.4 45.6 85.2 30.4s45.6-53.4 30.4-85.2c-46.2-97.2-145.2-164.6-260.2-164.6-159 0-288 129-288 288v96h-32c-70.6 0-128 57.4-128 128v384c0 70.6 57.4 128 128 128h640c70.6 0 128-57.4 128-128v-384c0-70.6-57.4-128-128-128h-480v-96z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["unlock"] - }, - "attrs": [{}], - "properties": { - "order": 103, - "id": 7, - "name": "unlock", - "prevSize": 32, - "code": 59742, - "ligatures": "unlock, insecure" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 102 - }, - { - "icon": { - "paths": [ - "M688 0h288c26.6 0 48 21.4 48 48v288c0 19.4-11.6 37-29.6 44.4s-38.6 3.4-52.4-10.4l-78-78-174 174c-18.8 18.8-49.2 18.8-67.8 0l-64-64c-18.8-18.8-18.8-49.2 0-67.8l174-174-78.2-78.2c-13.8-13.8-17.8-34.4-10.4-52.4s25-29.6 44.4-29.6zM336 1024h-288c-26.6 0-48-21.4-48-48v-288c0-19.4 11.6-37 29.6-44.4s38.6-3.4 52.4 10.4l78 78 174-174c18.8-18.8 49.2-18.8 67.8 0l64 64c18.8 18.8 18.8 49.2 0 67.8l-174 174 78 78c13.8 13.8 17.8 34.4 10.4 52.4s-25 29.6-44.4 29.6z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["up-right-and-down-left-from-center"] - }, - "attrs": [{}], - "properties": { - "order": 105, - "id": 5, - "name": "up-right-and-down-left-from-center", - "prevSize": 32, - "code": 59744, - "ligatures": "up-right-and-down-left-from-center, expand" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 103 - }, - { - "icon": { - "paths": [ - "M448 512c141.385 0 256-114.615 256-256s-114.615-256-256-256v0c-141.385 0-256 114.615-256 256s114.615 256 256 256v0zM356.6 608c-197 0-356.6 159.6-356.6 356.6 0 32.8 26.6 59.4 59.4 59.4h777.2c32.8 0 59.4-26.6 59.4-59.4 0-197-159.6-356.6-356.6-356.6h-182.8z" - ], - "attrs": [{}], - "width": 896, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["user"] - }, - "attrs": [{}], - "properties": { - "order": 106, - "id": 4, - "name": "user", - "prevSize": 32, - "code": 59745, - "ligatures": "user" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 104 - }, - { - "icon": { - "paths": [ - "M469.4 85.4l-75.4 28.2c-6 2.2-10 8-10 14.4s4 12.2 10 14.4l75.4 28.2 28.2 75.4c2.2 6 8 10 14.4 10s12.2-4 14.4-10l28.2-75.4 75.4-28.2c6-2.2 10-8 10-14.4s-4-12.2-10-14.4l-75.4-28.2-28.2-75.4c-2.2-6-8-10-14.4-10s-12.2 4-14.4 10l-28.2 75.4zM92.2 790.8c-37.4 37.4-37.4 98.2 0 135.8l69.2 69.2c37.4 37.4 98.2 37.4 135.8 0l762.6-762.8c37.4-37.4 37.4-98.2 0-135.8l-69.2-69c-37.4-37.4-98.2-37.4-135.8 0l-762.6 762.6zM969.2 165.2l-210 210-46.6-46.6 210-210 46.6 46.6zM15 234.4c-9 3.4-15 12-15 21.6s6 18.2 15 21.6l113 42.4 42.4 113c3.4 9 12 15 21.6 15s18.2-6 21.6-15l42.4-113 113-42.4c9-3.4 15-12 15-21.6s-6-18.2-15-21.6l-113-42.4-42.4-113c-3.4-9-12-15-21.6-15s-18.2 6-21.6 15l-42.4 113-113 42.4zM719 746.4c-9 3.4-15 12-15 21.6s6 18.2 15 21.6l113 42.4 42.4 113c3.4 9 12 15 21.6 15s18.2-6 21.6-15l42.4-113 113-42.4c9-3.4 15-12 15-21.6s-6-18.2-15-21.6l-113-42.4-42.4-113c-3.4-9-12-15-21.6-15s-18.2 6-21.6 15l-42.4 113-113 42.4z" - ], - "attrs": [{}], - "width": 1152, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["wand-magic-sparkles"] - }, - "attrs": [{}], - "properties": { - "order": 36, - "id": 2, - "name": "wand-magic-sparkles", - "prevSize": 32, - "code": 59747, - "ligatures": "wand-magic-sparkles, wand" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 105 - }, - { - "icon": { - "paths": [ - "M704 640c176.8 0 320-143.2 320-320 0-30.6-4.4-60.2-12.4-88.4-6.2-21.6-32.8-26.4-48.6-10.6l-153.6 153.6c-6 6-14.2 9.4-22.6 9.4h-114.8c-17.6 0-32-14.4-32-32v-114.8c0-8.4 3.4-16.6 9.4-22.6l153.6-153.6c15.8-15.8 10.8-42.4-10.6-48.6-28.2-8-57.8-12.4-88.4-12.4-176.8 0-320 143.2-320 320 0 38.2 6.8 75 19 109l-363.2 363.2c-25.4 25.4-39.8 60-39.8 96 0 75 60.8 135.8 135.8 135.8 36 0 70.6-14.4 96-39.8l363.2-363.2c34 12.4 70.8 19 109 19zM160 816c26.51 0 48 21.49 48 48s-21.49 48-48 48v0c-26.51 0-48-21.49-48-48s21.49-48 48-48v0z" - ], - "attrs": [{}], - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["wrench"] - }, - "attrs": [{}], - "properties": { - "order": 37, - "id": 1, - "name": "wrench", - "prevSize": 32, - "code": 59748, - "ligatures": "wrench, tool" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 106 - }, - { - "icon": { - "paths": [ - "M685.2 301.2c25-25 25-65.6 0-90.6s-65.6-25-90.6 0l-210.6 210.8-210.8-210.6c-25-25-65.6-25-90.6 0s-25 65.6 0 90.6l210.8 210.6-210.6 210.8c-25 25-25 65.6 0 90.6s65.6 25 90.6 0l210.6-210.8 210.8 210.6c25 25 65.6 25 90.6 0s25-65.6 0-90.6l-210.8-210.6 210.6-210.8z" - ], - "attrs": [{}], - "width": 768, - "isMulticolor": false, - "isMulticolor2": false, - "grid": 0, - "tags": ["xmark"] - }, - "attrs": [{}], - "properties": { - "order": 38, - "id": 0, - "name": "xmark", - "prevSize": 32, - "code": 59749, - "ligatures": "xmark, remove" - }, - "setIdx": 0, - "setId": 1, - "iconIdx": 107 - } - ], - "height": 1024, - "metadata": {"name": "Craft"}, - "preferences": { - "showGlyphs": true, - "showCodes": true, - "showQuickUse": true, - "showQuickUse2": true, - "showSVGs": true, - "fontPref": { - "prefix": "icon-", - "metadata": {"fontFamily": "Craft", "majorVersion": 1, "minorVersion": 0}, - "metrics": {"emSize": 1024, "baseline": 6.25, "whitespace": 50}, - "embed": false, - "noie8": true, - "ie7": false, - "showMetrics": true - }, - "imagePref": { - "prefix": "icon-", - "png": true, - "useClassSelector": true, - "color": 0, - "bgColor": 16777215 - }, - "historySize": 50, - "showLiga": true, - "gridSize": 16 - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_compat.scss b/packages/craftcms-legacy/cp/src/css/_compat.scss deleted file mode 100644 index fea93c69024..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_compat.scss +++ /dev/null @@ -1,620 +0,0 @@ -/** - * Legacy Token Mapping - * - * This file maps legacy CSS variables to the new token system defined in - * @craftcms/ui tokens.css. Import this file to provide backwards compatibility - * for legacy styles. - * - * Variables mapped to --CHANGE require manual review and update. - */ - -:root { - /** - * Placeholder for variables that need manual review - */ - --CHANGE: red; - - /** - * Color Palette Mapping - * Legacy colors (--{color}-{number}) to new format (--color-{color}-{number}) - */ - - /* White/Black */ - --white: var(--color-white, #fff); - --black: var(--color-black, #000); - - /* Gray */ - --gray-050: var(--color-gray-50); - --gray-100: var(--color-gray-100); - --gray-150: var(--color-gray-150); - --gray-200: var(--color-gray-200); - --gray-300: var(--color-gray-300); - --gray-350: var(--color-gray-350); - --gray-400: var(--color-gray-400); - --gray-500: var(--color-gray-500); - --gray-550: var(--color-gray-550); - --gray-600: var(--color-gray-600); - --gray-700: var(--color-gray-700); - --gray-800: var(--color-gray-800); - --gray-900: var(--color-gray-900); - --gray-1000: var(--color-gray-1000); - - /* Gray HSL versions */ - --gray-050-hsl: var(--color-gray-50-hsl); - --gray-100-hsl: var(--color-gray-100-hsl); - --gray-150-hsl: var(--color-gray-150-hsl); - --gray-200-hsl: var(--color-gray-200-hsl); - --gray-300-hsl: var(--color-gray-300-hsl); - --gray-350-hsl: var(--color-gray-350-hsl); - --gray-400-hsl: var(--color-gray-400-hsl); - --gray-500-hsl: var(--color-gray-500-hsl); - --gray-550-hsl: var(--color-gray-550-hsl); - --gray-600-hsl: var(--color-gray-600-hsl); - --gray-700-hsl: var(--color-gray-700-hsl); - --gray-800-hsl: var(--color-gray-800-hsl); - --gray-900-hsl: var(--color-gray-900-hsl); - --gray-1000-hsl: var(--color-gray-1000-hsl); - - /* Red - direct mapping (Tailwind red scale) */ - --red-050: var(--color-red-50); - --red-100: var(--color-red-100); - --red-200: var(--color-red-200); - --red-300: var(--color-red-300); - --red-400: var(--color-red-400); - --red-500: var(--color-red-500); - --red-600: var(--color-red-600); - --red-700: var(--color-red-700); - --red-800: var(--color-red-800); - --red-900: var(--color-red-900); - --red-950: var(--color-red-950); - - /* Orange */ - --orange-050: var(--color-orange-50); - --orange-100: var(--color-orange-100); - --orange-200: var(--color-orange-200); - --orange-300: var(--color-orange-300); - --orange-400: var(--color-orange-400); - --orange-500: var(--color-orange-500); - --orange-600: var(--color-orange-600); - --orange-700: var(--color-orange-700); - --orange-800: var(--color-orange-800); - --orange-900: var(--color-orange-900); - --orange-950: var(--color-orange-950); - - /* Amber */ - --amber-050: var(--color-amber-50); - --amber-100: var(--color-amber-100); - --amber-200: var(--color-amber-200); - --amber-300: var(--color-amber-300); - --amber-400: var(--color-amber-400); - --amber-500: var(--color-amber-500); - --amber-600: var(--color-amber-600); - --amber-700: var(--color-amber-700); - --amber-800: var(--color-amber-800); - --amber-900: var(--color-amber-900); - --amber-950: var(--color-amber-950); - - /* Yellow */ - --yellow-050: var(--color-yellow-50); - --yellow-100: var(--color-yellow-100); - --yellow-200: var(--color-yellow-200); - --yellow-300: var(--color-yellow-300); - --yellow-400: var(--color-yellow-400); - --yellow-500: var(--color-yellow-500); - --yellow-600: var(--color-yellow-600); - --yellow-700: var(--color-yellow-700); - --yellow-750: var(--color-yellow-750); - --yellow-800: var(--color-yellow-800); - --yellow-900: var(--color-yellow-900); - --yellow-950: var(--color-yellow-950); - - /* Lime */ - --lime-050: var(--color-lime-50); - --lime-100: var(--color-lime-100); - --lime-200: var(--color-lime-200); - --lime-300: var(--color-lime-300); - --lime-400: var(--color-lime-400); - --lime-500: var(--color-lime-500); - --lime-600: var(--color-lime-600); - --lime-700: var(--color-lime-700); - --lime-800: var(--color-lime-800); - --lime-900: var(--color-lime-900); - --lime-950: var(--color-lime-950); - - /* Green */ - --green-050: var(--color-green-50); - --green-100: var(--color-green-100); - --green-200: var(--color-green-200); - --green-300: var(--color-green-300); - --green-400: var(--color-green-400); - --green-500: var(--color-green-500); - --green-600: var(--color-green-600); - --green-700: var(--color-green-700); - --green-800: var(--color-green-800); - --green-900: var(--color-green-900); - --green-950: var(--color-green-950); - - /* Emerald */ - --emerald-050: var(--color-emerald-50); - --emerald-100: var(--color-emerald-100); - --emerald-200: var(--color-emerald-200); - --emerald-300: var(--color-emerald-300); - --emerald-400: var(--color-emerald-400); - --emerald-500: var(--color-emerald-500); - --emerald-550: var(--color-emerald-550); - --emerald-600: var(--color-emerald-600); - --emerald-700: var(--color-emerald-700); - --emerald-800: var(--color-emerald-800); - --emerald-900: var(--color-emerald-900); - --emerald-950: var(--color-emerald-950); - - /* Teal */ - --teal-050: var(--color-teal-50); - --teal-100: var(--color-teal-100); - --teal-200: var(--color-teal-200); - --teal-300: var(--color-teal-300); - --teal-400: var(--color-teal-400); - --teal-500: var(--color-teal-500); - --teal-550: var(--color-teal-550); - --teal-600: var(--color-teal-600); - --teal-700: var(--color-teal-700); - --teal-800: var(--color-teal-800); - --teal-900: var(--color-teal-900); - --teal-950: var(--color-teal-950); - - /* Cyan */ - --cyan-050: var(--color-cyan-50); - --cyan-100: var(--color-cyan-100); - --cyan-200: var(--color-cyan-200); - --cyan-300: var(--color-cyan-300); - --cyan-400: var(--color-cyan-400); - --cyan-500: var(--color-cyan-500); - --cyan-600: var(--color-cyan-600); - --cyan-700: var(--color-cyan-700); - --cyan-800: var(--color-cyan-800); - --cyan-900: var(--color-cyan-900); - --cyan-950: var(--color-cyan-950); - - /* Sky */ - --sky-050: var(--color-sky-50); - --sky-100: var(--color-sky-100); - --sky-200: var(--color-sky-200); - --sky-300: var(--color-sky-300); - --sky-400: var(--color-sky-400); - --sky-500: var(--color-sky-500); - --sky-600: var(--color-sky-600); - --sky-700: var(--color-sky-700); - --sky-800: var(--color-sky-800); - --sky-900: var(--color-sky-900); - --sky-950: var(--color-sky-950); - - /* Blue */ - --blue-050: var(--color-blue-50); - --blue-100: var(--color-blue-100); - --blue-200: var(--color-blue-200); - --blue-300: var(--color-blue-300); - --blue-400: var(--color-blue-400); - --blue-500: var(--color-blue-500); - --blue-600: var(--color-blue-600); - --blue-700: var(--color-blue-700); - --blue-800: var(--color-blue-800); - --blue-900: var(--color-blue-900); - --blue-950: var(--color-blue-950); - - /* Indigo */ - --indigo-050: var(--color-indigo-50); - --indigo-100: var(--color-indigo-100); - --indigo-200: var(--color-indigo-200); - --indigo-300: var(--color-indigo-300); - --indigo-400: var(--color-indigo-400); - --indigo-500: var(--color-indigo-500); - --indigo-600: var(--color-indigo-600); - --indigo-700: var(--color-indigo-700); - --indigo-800: var(--color-indigo-800); - --indigo-900: var(--color-indigo-900); - --indigo-950: var(--color-indigo-950); - - /* Violet */ - --violet-050: var(--color-violet-50); - --violet-100: var(--color-violet-100); - --violet-200: var(--color-violet-200); - --violet-300: var(--color-violet-300); - --violet-400: var(--color-violet-400); - --violet-500: var(--color-violet-500); - --violet-600: var(--color-violet-600); - --violet-700: var(--color-violet-700); - --violet-800: var(--color-violet-800); - --violet-900: var(--color-violet-900); - --violet-950: var(--color-violet-950); - - /* Purple */ - --purple-050: var(--color-purple-50); - --purple-100: var(--color-purple-100); - --purple-200: var(--color-purple-200); - --purple-300: var(--color-purple-300); - --purple-400: var(--color-purple-400); - --purple-500: var(--color-purple-500); - --purple-600: var(--color-purple-600); - --purple-700: var(--color-purple-700); - --purple-800: var(--color-purple-800); - --purple-900: var(--color-purple-900); - --purple-950: var(--color-purple-950); - - /* Fuchsia */ - --fuchsia-050: var(--color-fuchsia-50); - --fuchsia-100: var(--color-fuchsia-100); - --fuchsia-200: var(--color-fuchsia-200); - --fuchsia-300: var(--color-fuchsia-300); - --fuchsia-400: var(--color-fuchsia-400); - --fuchsia-500: var(--color-fuchsia-500); - --fuchsia-600: var(--color-fuchsia-600); - --fuchsia-700: var(--color-fuchsia-700); - --fuchsia-800: var(--color-fuchsia-800); - --fuchsia-900: var(--color-fuchsia-900); - --fuchsia-950: var(--color-fuchsia-950); - - /* Pink */ - --pink-050: var(--color-pink-50); - --pink-100: var(--color-pink-100); - --pink-200: var(--color-pink-200); - --pink-300: var(--color-pink-300); - --pink-400: var(--color-pink-400); - --pink-500: var(--color-pink-500); - --pink-600: var(--color-pink-600); - --pink-700: var(--color-pink-700); - --pink-800: var(--color-pink-800); - --pink-900: var(--color-pink-900); - --pink-950: var(--color-pink-950); - - /* Rose */ - --rose-050: var(--color-rose-50); - --rose-100: var(--color-rose-100); - --rose-200: var(--color-rose-200); - --rose-300: var(--color-rose-300); - --rose-400: var(--color-rose-400); - --rose-500: var(--color-rose-500); - --rose-600: var(--color-rose-600); - --rose-700: var(--color-rose-700); - --rose-800: var(--color-rose-800); - --rose-900: var(--color-rose-900); - --rose-950: var(--color-rose-950); - - /** - * Spacing - */ - --2xs: var(--c-spacing-xs); /* 2px -> closest is xs (2px) */ - --xs: var(--c-spacing-sm); /* 4px -> sm (4px) */ - --s: var(--c-spacing-md); /* 8px -> md (8px) */ - --m: var(--c-spacing-lg); /* 14px -> closest is lg (16px) */ - --l: var(--c-spacing-lg); /* 18px -> lg (16px) */ - --xl: var(--c-spacing-xl); /* 24px -> xl (32px) - note: different values */ - --padding: var(--c-spacing-lg); - --neg-padding: calc(var(--c-spacing-lg) * -1); - - /** - * Sizing - */ - --size-touch-target: calc(24rem / 16); - --size-icon: var(--c-size-icon-md); - --size-line-height: var(--c-leading-normal); - --touch-target-size: var(--size-touch-target); - --icon-size: var(--c-size-icon-md); - --lh: var(--c-leading-normal); - - /** - * Border Radius - */ - --radius-sm: var(--c-radius-sm); - --radius-md: var(--c-radius-md); - --radius-lg: var(--c-radius-lg); - --radius-full: var(--c-radius-full); - --radius-circle: 50%; - --border-radius: var(--c-radius-md); - --small-border-radius: var(--c-radius-sm); - --medium-border-radius: var(--c-radius-md); - --large-border-radius: var(--c-radius-lg); - --menu-border-radius: var(--c-radius-md); - - /** - * Typography - */ - --font-size: var(--c-text-base); - --font-weight-regular: 400; - --font-weight-bold: 700; - - /** - * Surfaces / Backgrounds - */ - --body-bg: var(--c-surface-default); - --bg-color: var(--c-surface-default); - --modal-bg: var(--c-surface-overlay); - --header-bg: var(--c-surface-raised); - --sidebar-bg: var(--c-surface-default); - --secondary-pane-bg: var(--c-surface-raised); - --shade-bg: rgba(0 0 0 / 25%); - --input-bg: var(--c-input-fill); - - /** - * Semantic Background Colors - */ - --bg-primary: var(--c-button-primary-fill); - --bg-secondary: var(--c-color-neutral-fill-loud); - --bg-selection-light: var(--c-color-accent-fill-quiet); - --bg-selection-dark: var(--c-color-accent-fill-normal); - --bg-error: var(--c-color-danger-fill-quiet); - --bg-warning: var(--c-color-warning-fill-quiet); - --bg-success: var(--c-color-success-fill-quiet); - --bg-notice: var(--c-color-info-fill-quiet); - --bg-enabled: var(--c-status-enabled-fill); - --bg-pending: var(--c-status-pending-fill); - --bg-disabled: var(--c-status-disabled-fill); - - /** - * Text Colors - */ - --text-color: var(--c-text-default); - --light-text-color: var(--c-text-quiet); - --medium-text-color: var(--c-text-quiet); - --medium-dark-text-color: var(--c-text-quiet); - --link-color: var(--c-text-link); - - /** - * Semantic Foreground Colors - */ - --fg-subtle: var(--c-text-quiet); - --fg-error: var(--c-color-danger-on-normal); - --fg-warning: var(--c-color-warning-on-normal); - --fg-success: var(--c-color-success-on-normal); - --fg-notice: var(--c-color-info-on-normal); - --fg-input: var(--c-text-default); - - /** - * Borders - */ - --border-hairline: var(--c-color-neutral-border-quiet); - --border-hairline-medium: var(--c-color-neutral-border-normal); - --border-hairline-dark: var(--c-color-neutral-border-loud); - --hairline-color: var(--c-color-neutral-border-quiet); - --medium-hairline-color: var(--c-color-neutral-border-normal); - --dark-hairline-color: var(--c-color-neutral-border-loud); - --pane-border: var(--c-color-neutral-border-quiet); - --header-border: var(--c-color-neutral-border-quiet); - --hr-border: var(--c-color-neutral-border-quiet); - --input-border: 1px solid var(--c-input-border-color); - --input-border-color: var(--c-input-border-color); - - /** - * Semantic Border Colors - */ - --border-primary: var(--c-color-brand-border-loud); - --border-secondary: var(--c-color-neutral-border-loud); - --border-error: var(--c-color-danger-border-quiet); - --border-warning: var(--c-color-warning-border-quiet); - --border-warning-emphasis: var(--c-color-warning-border-loud); - --border-success: var(--c-color-success-border-quiet); - --border-notice: var(--c-color-info-border-quiet); - - /** - * Focus States - */ - --focus-ring-color: var(--c-color-accent-border-normal); - --focus-outline-light: var(--c-color-accent-border-quiet); - --focus-outline-medium: var(--c-color-accent-border-normal); - --focus-outline-dark: var(--c-color-accent-border-loud); - --light-focus-color: var(--c-color-accent-border-quiet); - --medium-focus-color: var(--c-color-accent-border-normal); - --dark-focus-color: var(--c-color-accent-border-loud); - --focus-ring-alpha: 0.85; - --focus-ring: var(--CHANGE); /* Complex shadow value - needs manual review */ - --focus-ring-light: var(--CHANGE); - --focus-ring-medium: var(--CHANGE); - --focus-ring-dark: var(--CHANGE); - --focus-ring-outset: var(--CHANGE); - --focus-ring-inner: var(--CHANGE); - --focus-ring-inner-light: var(--CHANGE); - --light-focus-ring: var(--CHANGE); - --medium-focus-ring: var(--CHANGE); - --dark-focus-ring: var(--CHANGE); - --inner-focus-ring: var(--CHANGE); - - /** - * Shadows - */ - --modal-shadow: var(--c-shadow-overlay); - --pane-shadow: var(--c-pane-shadow); - --secondary-pane-shadow: var(--c-shadow-sm); - - /** - * UI Controls - */ - --ui-control-fg: var(--c-text-quiet); - --ui-control-fg-hover: var(--c-text-default); - --ui-control-fg-active: var(--c-text-default); - --ui-control-bg: var(--c-form-control-fill); - --ui-control-bg-static: var(--c-form-control-fill); - --ui-control-bg-hover: var(--c-form-control-fill); - --ui-control-bg-active: var(--c-form-control-fill); - --ui-control-border: var(--c-form-control-border-color); - --ui-control-radius: var(--c-form-control-radius); - --ui-control-height: var(--c-form-control-height); - --ui-control-height-small: var(--c-size-control-sm); - --ui-control-height--small: var(--c-size-control-sm); - --ui-control-border-radius: var(--c-form-control-radius); - --ui-control-color: var(--c-text-quiet); - --ui-control-hover-color: var(--c-text-default); - --ui-control-active-color: var(--c-text-default); - --ui-control-bg-color: var(--c-form-control-fill); - --ui-control-hover-bg-color: var(--c-form-control-fill); - --ui-control-active-bg-color: var(--c-form-control-fill); - --ui-control-static-bg-color: var(--c-form-control-fill); - - /** - * Buttons - */ - --button-bg: var(--c-button-default-fill); - --button-bg--hover: var(--c-button-default-fill-hover); - --button-bg--active: var(--c-button-default-fill-hover); - --button-border: var(--c-button-default-border); - --button-border--hover: var(--c-button-default-border-hover); - --button-border--active: var(--c-button-default-border-hover); - --button-border-radius: var(--c-form-control-radius); - --button-padding: var(--c-form-control-spacing-inline); - --primary-button-bg: var(--c-button-primary-fill); - --primary-button-bg--hover: var(--c-button-primary-fill-hover); - --primary-button-bg--active: var(--c-button-primary-fill-hover); - --primary-button-border: var(--c-button-primary-border); - --primary-button-border--hover: var(--c-button-primary-border-hover); - --primary-button-border--active: var(--c-button-primary-border-hover); - --primary-button-text-color: var(--c-button-primary-text); - --secondary-button-bg: var(--c-button-default-fill); - --secondary-button-bg--hover: var(--c-button-default-fill-hover); - --secondary-button-bg--active: var(--c-button-default-fill-hover); - --secondary-button-border: var(--c-button-default-border); - --secondary-button-border--hover: var(--c-button-default-border-hover); - --secondary-button-border--active: var(--c-button-default-border-hover); - --secondary-button-text-color: var(--c-button-default-text); - - /** - * Inputs - */ - --input-height: var(--c-form-control-height); - --input-border-radius: var(--c-input-radius); - - /** - * Panes - */ - --pane-padding: var(--c-pane-padding); - --pane-border-radius: var(--c-pane-radius); - --pane-x-padding-default: var(--c-pane-padding); - --pane-y-padding-default: var(--c-pane-padding); - --secondary-pane-border: var(--c-color-neutral-border-quiet); - --secondary-pane-border-radius: var(--c-pane-radius); - - /** - * Modals - */ - --modal-padding: var(--c-modal-padding); - - /** - * Layout - */ - --header-height: var(--cp-header-height); - --header-padding: var(--c-spacing-lg); - --content-padding: var(--c-pane-padding); - --global-sidebar-width: var( - --CHANGE - ); /* Layout-specific - needs manual value */ - - --hr-margin: var(--c-spacing-lg); - - /** - * Status Colors - */ - --enabled-color: var(--c-status-enabled-fill); - --pending-color: var(--c-status-pending-fill); - --disabled-color: var(--c-status-disabled-fill); - --status-label-bg-color: var(--CHANGE); - --status-label-text-color: var(--CHANGE); - - /** - * Nav Items - */ - --nav-item-indicator-size: var(--c-spacing-sm); - --nav-item-badge-bg: var(--c-color-neutral-fill-loud); - --nav-item-badge-fg: var(--c-text-white); - --nav-item-fg-active: var(--c-text-default); - --nav-item-fg-hover: var(--c-text-default); - --nav-item-bg-active: var(--c-color-neutral-fill-quiet); - --nav-item-bg-hover: var(--c-color-neutral-fill-quiet); - --nav-item-prefix-width: 1.875rem; - --nav-item-prefix-ratio: 1; - --nav-item-trigger-size: var(--c-size-touch-target); - --nav-item-gutter-width: var(--c-spacing-md); - --nav-item-badge-bgColor: var(--c-color-neutral-fill-loud); - --nav-item-badge-fgColor: var(--c-text-white); - --nav-item-fgColor-active: var(--c-text-default); - --nav-item-bgColor-active: var(--c-color-neutral-fill-quiet); - --nav-item-fgColor-hover: var(--c-text-default); - --nav-item-bgColor-hover: var(--c-color-neutral-fill-quiet); - --sidebar-bgColor: var(--c-surface-default); - - /** - * Miscellaneous - */ - --icon-color: var(--c-text-quiet); - --highlight-color: var(--c-color-accent-fill-quiet); - --selected-bg-color: var(--c-color-accent-fill-quiet); - --selected-item-color: var(--c-color-accent-fill-normal); - --hover-bg-color: var(--c-color-neutral-fill-quiet); - --interaction-background-color: var(--c-color-neutral-fill-quiet); - --light-sel-color: var(--c-color-accent-fill-quiet); - --dark-sel-color: var(--c-color-accent-fill-normal); - --primary-color: var(--c-button-primary-fill); - --secondary-color: var(--c-color-neutral-fill-loud); - --input-color: var(--c-text-default); - --error-color: var(--c-color-danger-on-normal); - --warning-color: var(--c-color-warning-on-normal); - --warning-background: var(--c-color-warning-fill-quiet); - --warning-border-color: var(--c-color-warning-border-quiet); - --success-color: var(--c-color-success-on-normal); - --notice-color: var(--c-color-info-on-normal); - --notice-background: var(--c-color-info-fill-quiet); - --notice-border-color: var(--c-color-info-border-quiet); - --indicator-border-color: var(--c-color-warning-border-loud); - --indicator-icon-color: var(--c-color-warning-on-normal); - --tab-label-color: var(--c-text-quiet); - --overlay-opacity: 0.5; - --checkbox-size: var(--c-size-control-xs); - --radio-size: var(--c-size-control-xs); - --thumb-size: var(--c-size-control-sm); - - /** - * Slideout - */ - --slideout-footer-bg: var(--c-surface-raised); - --slideout-footer-border: var(--c-color-neutral-border-quiet); - --slideout-footer-shadow: var(--c-shadow-lg); - - /** - * Variables that need context-specific values - * These are used in specific components and may need manual mapping - */ - --custom-bg-color: var(--c-color-fill-quiet); - --custom-border-color: var(--c-color-border-quiet); - --custom-text-color: var(--c-color-on-quiet); - --custom-titlebar-bg-color: var(--CHANGE); - --custom-sel-titlebar-bg-color: var(--CHANGE); - --custom-sel-tab-shadow-color: var(--CHANGE); - --outline-color: var(--c-color-accent-border-normal); - - /** - * Animation/Transform variables (context-specific) - */ - --disclosure-icon-transform: var(--CHANGE); - --disclosure-icon-transform-active: var(--CHANGE); - --arrow-angle: var(--CHANGE); - --arrow-c: var(--CHANGE); - --arrow-height: var(--CHANGE); - --arrow-width: var(--CHANGE); - --background-position-x: var(--CHANGE); - --background-position-y: var(--CHANGE); - - /** - * Layout-specific variables (need actual values) - */ - --details-width: var(--CHANGE); - --heading-width: var(--CHANGE); - --page-title-columns: var(--CHANGE); - --row-gap: var(--c-spacing-md); - --separator-width: 1px; - --size-main-content: var(--CHANGE); - --source-item-toggle-size: var(--c-size-touch-target); - --spacing: var(--c-spacing); - --width: var(--CHANGE); - --max-lines: var(--CHANGE); - - /** - * Lightswitch specific - */ - --_lightswitch-border-color: var(--c-form-control-border-color); -} diff --git a/packages/craftcms-legacy/cp/src/css/_cp.scss b/packages/craftcms-legacy/cp/src/css/_cp.scss deleted file mode 100644 index 6edac418e22..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_cp.scss +++ /dev/null @@ -1,1726 +0,0 @@ -@charset "UTF-8"; -@use 'sass:color'; -@use '@craftcms/sass/mixins'; - -$sidebarWidth: calc(226rem / 16); -$sidebarZIndex: 100; -$detailsWidth: 350px; -$minFullUiWidth: calc(1200rem / 16); -$minXlUiWidth: calc(1536rem / 16); -$minDesktopWidth: calc(600rem / 16); -$minHorizontalUiWidth: $minFullUiWidth - $sidebarWidth; - -// Colors -$badgeBackgroundColor: var(--gray-200); -$badgeColor: var(--gray-800); - -:root { - --sidebar-width: #{$sidebarWidth}; - --cp-sidebar-width: #{$sidebarWidth}; - --details-width: #{$detailsWidth}; -} - -html { - text-size-adjust: 100%; - min-height: 100vh; -} - -body { - min-height: 100vh; - - &.dragging * { - cursor: move !important; - cursor: grabbing !important; - } -} - -#global-container { - position: relative; - display: flex; - min-height: 100vh; - - @media screen and (prefers-reduced-motion: no-preference) { - transition: inset-inline-start 100ms cubic-bezier(0.33, 1, 0.68, 1); - } -} - -#global-header { - display: grid; - grid-template-columns: 1fr min-content min-content; - align-items: center; -} - -/* global sidebar */ -$sidebarLinkStaticColor: var(--gray-100); -$sidebarLinkSecondaryColor: var(--gray-200); -$systemInfoBgColor: color.adjust(mixins.$grey800, $lightness: -5%); -$systemInfoHoverBgColor: color.adjust(mixins.$grey800, $lightness: -10%); - -#system-info { - display: grid; - grid-template-columns: var(--nav-item-prefix-width) auto; - gap: 10px; - height: 100%; - padding-block: 0; - padding-inline: var(--nav-item-gutter-width); - position: relative; - flex-direction: row; - align-items: center; - color: currentcolor; - background-clip: padding-box; - - &::after { - display: none; - } - - #global-sidebar & { - border-block-end: 1px solid var(--border-hairline); - } -} - -div#system-info { - cursor: default; -} - -a#system-info { - &:focus, - &:hover { - text-decoration: none; - background-color: var(--gray-200); - } -} - -#site-icon { - --size: var(--nav-item-prefix-width); // Matches .sidebar-action__prefix - height: var(--size); - - img, - svg { - display: block; - width: var(--size); - height: var(--size); - border-radius: 4px; - } - - svg { - @include mixins.svg-mask(var(--fg-subtle)); - } -} - -#system-name { - h2, - .h2 { - margin: 0; - width: 100%; - overflow: hidden; - max-height: 40px; - position: relative; - - // Multi-line text overflow ellipsis - // (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - } -} - -@media only screen and (min-width: $minFullUiWidth) { - [data-sidebar='collapsed'] { - #system-info:hover #system-name { - opacity: 1; - transform: translateY(-50%) translateX(0); - } - - #system-name { - position: absolute; - inset-inline-start: calc(100% + (var(--s) * 2)); - inset-block-start: 50%; - transform: translateY(-50%) translateX(-5px); - opacity: 0; - @include mixins.pane; - color: var(--text-color); - border-radius: var(--radius-md); - padding-block: var(--xs); - padding-inline: var(--s); - white-space: nowrap; - pointer-events: none; - - @media screen and (prefers-reduced-motion: no-preference) { - transition: - opacity 50ms cubic-bezier(0.33, 1, 0.68, 1), - transform 150ms cubic-bezier(0.33, 1, 0.68, 1); - } - } - } -} - -#global-footer { - --link-color: #1453db; - display: flex; - flex-direction: column; - align-items: center; - padding-block: var(--m) var(--xl); - padding-inline: var(--m); - gap: var(--m); - - body.has-debug-toolbar & { - padding-block-end: calc(var(--xl) + 42px); - } - - a { - white-space: nowrap; - } -} - -#app-info { - display: flex; - flex-direction: row; - justify-content: center; - gap: var(--m); -} - -#trial-info { - padding-block: 16px; - padding-inline: var(--xl); - border-radius: var(--radius-lg); - background-color: var(--gray-150); - box-shadow: - inset 0 1px 0 rgb(255 255 255 / 50%), - 0 0 0 1px hsl(212deg 30% 80%), - 0 2px 12px color.adjust(mixins.$grey200, $alpha: -0.5); - text-align: center; -} - -#app-version { - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - color: var(--gray-600); - text-align: center; - gap: var(--s); - - a { - color: var(--gray-600); - text-decoration: underline; - - &.go:hover::after { - color: var(--gray-600); - } - } -} - -#edition-logo { - user-select: none; - border: 1px solid var(--gray-600); - border-radius: 3px; - display: inline-flex; - box-sizing: content-box; - font-size: 11px; - padding-block: 6px; - padding-inline: 7px 5px; - line-height: 8px; - font-weight: 600; - letter-spacing: 1.7px; - text-transform: uppercase; -} - -#devmode { - margin-block-start: auto; - flex: 0 0 4px; - width: 100%; - min-height: 4px; // fixes Windows scaling bug (https://github.com/craftcms/cms/issues/3259) - background: - url('../images/dev-mode.svg') repeat-x 21px 0, - var(--gray-900); - cursor: help; -} - -#page-container { - display: flex; - flex-direction: column; - flex-grow: 1; -} - -#alerts { - position: relative; // to keep it above #global-header's shadow - background-color: var(--red-050); - border-inline-start: 6px solid var(--fg-error); - color: var(--fg-error); - - & > li { - padding-block: 7px 8px; - padding-inline: 24px; - box-shadow: inset 0 -1px 0 0 var(--red-100); - min-height: var(--header-height); - display: flex; - align-items: center; - - span[data-icon]::before { - margin-block-start: -3px !important; - } - - .resolvable-alert-buttons { - margin-block-start: var(--m); - } - - .btn, - a.go { - display: inline-flex; - align-items: center; - border: 1px solid color.adjust(mixins.$errorColor, $alpha: -0.5); - border-radius: var(--radius-md); - padding-block: 4px; - padding-inline: 5px; - margin-block: 0; - margin-inline: 2px; - color: var(--fg-error); - min-height: var(--input-height); - - .flex & { - margin: 0; - } - - &:hover { - border-color: var(--fg-error); - } - } - - a:not(.btn) { - color: var(--fg-error); - text-decoration: underline; - - &.go { - text-decoration: none; - white-space: nowrap; - - &::after { - color: var(--fg-error); - font-size: 15px; - margin-block-start: 1px; - } - } - } - - .btn { - background-color: transparent; - } - } -} - -#global-header .btn.menubtn, -li.crumb .btn.menubtn, -.btn.action-btn { - padding: 0; - - &:not(:hover, :active, [aria-expanded='true']) { - background-color: transparent; - } - - &:not(.m) { - width: var(--touch-target-size); - height: var(--touch-target-size); - min-height: auto; - } - - &.m { - width: var(--ui-control-height); - height: var(--ui-control-height); - } -} - -#global-header { - width: 100%; - margin-block-end: var(--m); - border-block-end: 1px solid var(--border-hairline); - - .flex { - height: var(--header-height); - align-items: center; - } - - .btn { - --ui-control-color: var(--gray-400); - --ui-control-hover-color: var(--gray-800); - --ui-control-active-color: var(--gray-700); - - &:hover { - color: var(--ui-control-hover-color); - } - } -} - -.nav-toggle { - display: flex; - align-items: center; - justify-content: center; - width: 44px; - min-width: 44px; - height: var(--header-height); - border-inline-end: 1px solid var(--border-hairline-medium); - line-height: 26px; - color: currentcolor; - text-align: center; - - &::before { - @include mixins.icon; - content: 'menu'; - font-size: 16px; - line-height: 0; - } - - &:hover { - color: var(--link-color); - } -} - -#crumbs { - display: flex; - flex-direction: row; - align-items: center; - font-size: 13px; - margin: 0 !important; - max-width: 100%; - overflow: hidden; - - &.empty { - display: none; - } - - nav { - margin: 0; - } -} - -#primary-nav-toggle { - &:focus-visible { - box-shadow: var(--focus-ring-inner); - } -} - -#crumb-list { - display: flex; - flex-flow: row nowrap; - align-items: stretch; - max-width: 100%; - height: var(--header-height); - - --arrow-padding: 10; - --arrow-height: 22; - --arrow-angle: 35; - --arrow-width: 17.1111; // height/(45/angle) - --arrow-c: 27.871; // sqrt(height^2+width^2) - - body.rtl & { - --arrow-angle: -35; - } - - li.crumb { - position: relative; - padding-inline-start: calc(var(--arrow-width) * 0.5rem / 16); - cursor: default; - color: var(--light-text-color); - - &:not(.current) { - padding-inline-end: calc(var(--arrow-width) * 1.125rem / 16); - - &::before, - &::after { - display: block; - content: ''; - width: 1px; - height: calc(var(--arrow-c) * 1rem / 16); - position: absolute; - inset-inline-end: calc(var(--arrow-width) * 0.5rem / 16); - background: var(--border-hairline-medium); - pointer-events: none; - } - - &::before { - inset-block-start: calc( - (var(--arrow-height) - var(--arrow-c)) / 2 * 1rem / 16 - ); - transform: rotate(calc(var(--arrow-angle) * -1deg)); - } - - &::after { - inset-block-end: calc( - (var(--arrow-height) - var(--arrow-c)) / 2 * 1rem / 16 - ); - transform: rotate(calc(var(--arrow-angle) * 1deg)); - } - } - } - - & .menu--disclosure { - li { - display: block; - - &::after { - content: none; - } - } - } -} - -#crumb-menu-trigger { - min-width: var(--touch-target-size); - - &::before { - width: 100%; - } -} - -#crumb-menu { - .chip { - min-height: 44px; - } -} - -li.crumb { - display: flex; - align-items: center; - flex-wrap: nowrap; - gap: var(--xs); - - [data-icon] { - position: relative; - inset-block-start: -1px; - } - - .menubtn { - position: relative; - margin-block: 0; - margin-inline: calc(var(--xs) * -1 / 2); - } - - [data-icon='ellipsis']::before { - margin-block-start: 3px; - font-size: 17px; - } - - .chip { - .label-link { - max-width: 15em; - - &:focus-visible { - box-shadow: var(--focus-ring-inner); - } - - & > span:not(.context-label) { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - - &:has(.menubtn) > a { - margin-inline-end: 0 !important; - padding-inline-end: var(--xs) !important; - } - - & > a { - flex: 1; - display: flex !important; - align-items: center; - flex-wrap: nowrap; - gap: var(--xs); - white-space: nowrap; - - .menu--disclosure & { - min-height: 34px; - } - } - - a, - button { - display: inline-flex; - align-items: center; - min-height: var(--touch-target-size); - - &:not(:hover) { - color: var(--text-color); - - svg { - @include mixins.svg-mask(var(--text-color)); - } - } - - &:hover { - text-decoration: none; - } - } - - a { - position: relative; - } - - button { - cursor: pointer; - } -} - -li.breadcrumb-toggle-wrapper { - &::after { - content: none; - } -} - -#account-menu { - ul { - li { - a { - max-width: calc(100% + 28px) !important; - } - } - } -} - -#user-info { - display: flex; - flex-direction: row; - align-items: center; - padding-inline: var(--s) calc(var(--padding) + 1px); - padding-block: 5px; - height: 100%; - background-color: transparent; - border-radius: 0; - - &::after { - border-color: var(--ui-control-color); - transition: border-color linear 100ms; - } - - &:hover::after { - border-color: var(--ui-control-hover-color); - } - - &[aria-expanded='true']::after { - border-color: var(--ui-control-active-color); - } -} - -.header-photo { - img, - svg { - display: block; - width: calc(30rem / 16); - height: calc(30rem / 16); - max-width: none; - border-radius: 50%; - box-shadow: - 0 0 0 1px color.adjust(mixins.$grey900, $alpha: -0.95), - 0 0 0 color.adjust(mixins.$grey900, $alpha: -1); - transition: box-shadow linear 150ms; - - #user-info:hover & { - box-shadow: - 0 0 0 1px color.adjust(mixins.$grey900, $alpha: -0.95), - 0 2px 10px -2px color.adjust(mixins.$grey900, $alpha: -0.7); - } - } -} - -/* main container */ -#main-container { - position: relative; - flex-grow: 1; -} - -.paste-btn { - background: linear-gradient( - 135deg, - var(--fuchsia-600), - var(--violet-600), - var(--indigo-600) - ); - color: var(--white); - text-shadow: 0 1px 2px rgb(0 0 0 / 25%); - - --focus-ring: var(--focus-ring-outset); - - &:hover, - &.loading { - background: linear-gradient( - 135deg, - var(--fuchsia-700), - var(--violet-700), - var(--indigo-700) - ); - } -} - -#header-container { - margin-block-end: var(--m); -} - -@media only screen and (min-width: $minFullUiWidth) { - #primary-nav-toggle { - display: none; - } - - #crumbs:not(.empty) #primary-nav-toggle + nav ul li:first-child, - #crumbs.empty + .context-menu-container { - margin-inline-start: var(--padding); - padding-inline-start: 0; - } -} - -#global-header, -#header { - .flex { - max-width: 100%; - - &.flex-nowrap { - min-width: 0; - } - } -} - -#header { - display: flex; - align-items: flex-start; - place-content: stretch space-between; - flex-wrap: nowrap; - gap: var(--s); - padding-block: 5px; - padding-inline: var(--padding); - position: relative; - isolation: isolate; - box-sizing: border-box; - background-color: color.adjust(mixins.$grey300, $alpha: -1); - box-shadow: 0 1px 0 color.adjust(mixins.$grey800, $alpha: -1); - transition: - background-color linear 100ms, - box-shadow linear 100ms; - - body.fixed-header & { - position: fixed; - z-index: 12; - inset-block-start: 0; - background-color: var(--gray-100); - box-shadow: 0 1px 0 color.adjust(mixins.$grey700, $alpha: -0.9); - } - - @supports (backdrop-filter: blur(10px)) { - & { - transition: - background-color linear 100ms, - box-shadow linear 100ms, - backdrop-filter linear 100ms; - - body.fixed-header & { - background-color: color.adjust(mixins.$grey100, $alpha: -0.25); - backdrop-filter: blur(10px); - } - } - } - - h1 { - line-height: 1.3; - margin-block: 0; - min-width: 0; - } - - .buttons, - .btngroup { - margin-block-start: 0; - } -} - -#page-title { - --page-title-columns: 1fr 34px; - min-height: 34px; - display: grid; - grid-template-columns: var(--page-title-columns); - align-items: center; - gap: var(--s); - - &.has-toolbar { - @media only screen and (min-width: $minHorizontalUiWidth) { - min-width: calc(#{$sidebarWidth} - var(--xl) - var(--s)) !important; - } - } -} - -#content-heading { - font-size: 0.875rem; - font-weight: normal; - - &::before { - content: '/'; - display: inline-block; - margin-inline: 0.5rem; - } - - @media only screen and (min-width: $minHorizontalUiWidth) { - display: none; - } -} - -#toolbar { - flex: 1; - align-items: flex-start; - justify-content: space-between; - min-height: 34px; - - #main-form & { - align-items: center; - } - - .icon::before, - .texticon::before, - .menubtn::after, - [data-icon]::before, - [data-icon-after]::after { - color: currentcolor; - opacity: 0.8; - } - - .text { - border-radius: var(--radius-lg); - - &::placeholder { - color: var(--light-text-color); - } - - &:not(:focus) { - background-clip: border-box; - } - } -} - -#revision-indicators { - min-width: 34px; - min-height: 34px; - display: flex; - align-items: center; - align-self: start; -} - -#action-buttons { - flex-shrink: 0; - - @media only screen and (width <= 400px) { - .btngroup .btn:first-child { - flex-basis: 100%; - } - } - - @media only screen and (max-width: $minHorizontalUiWidth - calc(1rem / 16)) { - flex-direction: row-reverse; - justify-content: flex-start; - margin-block-start: 10px; - } -} - -#main-content { - display: flex; - flex-direction: row; - align-items: flex-start; - padding-block: 0 48px; - padding-inline: var(--padding); - box-sizing: border-box; - - // for the Dashboard and any other full-page grids: - & > .grid:only-child { - flex: 1; - } -} - -#sidebar-toggle-container { - display: none; -} - -#sidebar-container { - flex: 0 0 $sidebarWidth; - width: $sidebarWidth; - box-sizing: border-box; - - @media only screen and (min-width: $minFullUiWidth) { - margin-inline-start: calc(var(--xl) * -1); - } -} - -#sidebar { - position: relative; - box-sizing: border-box; - padding-block: 0 var(--m); - padding-inline: 40px; - width: $sidebarWidth; - background-color: transparent; - - &.fixed { - position: fixed; - } - - nav { - margin-inline: -31px; - - li { - a { - position: relative; - - &:focus { - z-index: 1; - } - - &:not(.sel) { - &:hover { - background-color: var(--gray-200); - } - } - } - } - } - - .skip-link { - margin-block: 0; - margin-inline: var(--s); - } - - @media only screen and (min-width: $minFullUiWidth) { - padding-block: 0 var(--m); - padding-inline: 31px; - } -} - -#content-container { - flex: 1 1 auto; - - /* - Admittedly I'm not totally sure why this is necessary, but it seems to be. - We have to give #content-container some kind of "hard" width for it to properly - clip the content when table cells are long. - */ - width: 400px; -} - -.content-grid { - --size-main-content: 100%; - position: relative; - display: grid; - grid-template-columns: minmax(var(--size-main-content), 1fr) var( - --touch-target-size - ); - - &:has(.content-grid__toggle) { - --size-main-content: calc(100% - var(--touch-target-size)); - } -} - -.content-grid__main { - grid-column: 1/1; -} - -.content-pane { - @include mixins.pane; - - --border-radius: var(--radius-lg); - border-radius: var(--border-radius); - position: relative; - background-clip: padding-box; - padding: var(--padding); - - --pane-padding: var(--padding); - word-wrap: break-word; - - & > hr { - margin-inline: calc(var(--padding) * -1); - } -} - -.content-pane:has(.flex-fields) { - container-type: inline-size; -} - -#footer, -.footer { - padding-block: 6px; - padding-inline: var(--pane-padding, var(--xl)); - min-height: 44px; - line-height: calc(32rem / 16); - - .buttons { - height: 32px; - display: flex; - align-items: center; - } - - .btn { - padding-block: 4px; - height: var(--ui-control-height--small); - } -} - -#footer { - position: sticky; - inset-block-end: 0; - z-index: 1; - margin-block: var(--padding) calc(var(--padding) * -1 + 2px); - margin-inline: calc(var(--padding) * -1 + 2px); - background-color: var(--gray-050); - border-radius: var(--radius-sm); - box-sizing: border-box; - border-block-start: 2px solid var(--white); - - &:empty { - display: none; - } - - &.stuck { - border-radius: 0; - - @supports (backdrop-filter: blur(10px)) { - & { - background-color: color.adjust(mixins.$grey100, $alpha: -0.25); - backdrop-filter: blur(10px); - } - } - } - - .has-debug-toolbar & { - transition: padding linear 100ms; - - &.stuck { - padding-block-end: 52px; - } - } - - & > *, - .flex > * { - margin-block-end: 0; - } -} - -#details-container[data-state='collapsed'] { - display: none; -} - -#details-toggle > button { - --disclosure-icon-transform-active: rotate(180deg); - position: sticky; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - inset-block-start: 0; - height: 100%; - max-height: 100vh; - width: var(--touch-target-size); - border-radius: var(--ui-control-border-radius); - - .details-toggle__inner { - display: inline-flex; - justify-content: center; - align-items: center; - border: 1px solid var(--border-hairline); - width: calc(var(--touch-target-size) - var(--s)); - height: calc(var(--touch-target-size) * 2); - border-radius: var(--ui-control-border-radius); - background-color: var(--gray-100); - position: relative; - z-index: 10; - } - - &::before { - content: ''; - position: absolute; - inset-block: 0; - height: 100%; - width: 1px; - background-color: var(--border-hairline); - } - - &:hover, - &:focus, - &:focus-visible { - .details-toggle__inner { - background-color: var(--gray-200); - } - - &::before { - transform: scaleX(300%); - } - } - - &:focus-visible, - &:focus { - box-shadow: none; - - .details-toggle__inner { - box-shadow: var(--focus-ring); - } - } - - body.rtl & { - --disclosure-icon-transform: rotate(180deg); - --disclosure-icon-transform-active: rotate(0); - } -} - -#details-container { - display: block; - flex: 0 1 auto; - width: calc(var(--details-width)); - position: sticky; - inset-block-start: 0; -} - -#details { - display: none; -} - -#details { - display: block; - width: $detailsWidth; - z-index: 1; - - &.fixed { - position: fixed; - } - - .details { - .meta { - border-radius: var(--radius-lg); - - &:not(.read-only, .warning) { - @include mixins.pane; - } - - &.read-only { - color: var(--fg-subtle); - background-color: transparent !important; - } - - & > .field, - & > .data { - &:first-child { - &, - & > .status-badge { - border-start-start-radius: var(--radius-lg); - } - - border-start-end-radius: var(--radius-lg); - } - - &:last-child { - &, - & > .status-badge { - border-end-start-radius: var(--radius-lg); - } - - border-end-end-radius: var(--radius-lg); - } - } - } - - & > .field { - & > .input > .text.fullwidth { - @include mixins.pane; - } - } - - .notes { - border-radius: var(--radius-lg); - padding-block: var(--m); - } - } -} - -// Hide the sidebar at < 1200 -@media only screen and (max-width: $minFullUiWidth - calc(1rem/16)) { - #global-container { - inset-inline-start: -$sidebarWidth; - width: calc(100vw + #{$sidebarWidth}); - - .showing-nav & { - inset-inline-start: 0; - } - } - - #crumbs { - display: flex !important; - } - - #header { - width: 100vw; - } - - #main-content { - width: 100vw; - - &.has-sidebar { - padding-inline-start: 0; - } - } -} - -// Rearrange #main-content to flow vertically at < 999 -@media only screen and (max-width: $minHorizontalUiWidth - calc(1rem/16)) { - #header { - display: block; - - .flex:not(#toolbar) { - margin-block-start: 10px; - } - } - - #toolbar { - flex-wrap: wrap !important; - - & > * { - margin-block-start: 10px !important; - } - } - - body.fixed-header #header .flex:first-child { - margin-block-start: 0; - } - - #main-content { - display: block; - - &.has-sidebar { - padding-block: 0 48px; - padding-inline: var(--padding); - } - } - - #sidebar { - nav { - margin-inline: -40px; - } - - .skip-link { - margin: 0; - } - } - - #source-actions { - margin-block-start: var(--s); - margin-inline-start: -9px; - } - - #sidebar-toggle-container { - display: block; - margin-block-end: var(--s); - } - - #sidebar-toggle { - &::after { - inset-block-start: 0; - transform: rotate(45deg); - - body.rtl & { - transform: rotate(135deg); - } - } - } - - #content-container { - min-height: 0 !important; - } - - .content-grid, - .content-grid:has(.content-grid__toggle) { - --size-main-content: 100%; - } - - #sidebar-container, - #details-container { - width: auto !important; - padding-inline-start: 0 !important; - display: block; - } - - .content-grid__toggle { - display: none; - } - - #sidebar, - #details { - position: relative !important; - overflow-y: visible !important; - max-height: none !important; - width: auto; - } - - #sidebar { - margin-block-end: var(--m); - - body.showing-sidebar & { - @include mixins.pane; - padding-block: 0.5rem; - border-radius: var(--radius-lg); - } - - body:not(.showing-sidebar) & { - display: none; - } - } - - #details-container { - margin-inline-end: 0; - } - - #content-container { - width: auto !important; - max-width: none !important; - } - - #details { - padding: 0 !important; - margin-block-start: var(--m); - - .details { - margin-block-end: auto; - } - } -} - -// Tighten up the padding at < 768 -@media only screen and (width <= 767px) { - :root { - --padding: var(--s); - --neg-padding: calc(var(--s) * -1); - } - - #tabs ul li { - a { - padding-inline: var(--m); - } - - & + li { - margin-inline-start: -7px; - } - } - - .card-grid { - display: flex !important; - flex-direction: column; - } -} - -#settingsmenu ul li a { - padding-inline-start: 46px; - - &::before { - margin-inline: -22px 0; - margin-block: 1px 0; - font-size: 15px; - } - - img { - width: 16px; - height: 16px; - position: absolute; - margin-inline-start: -23px; - margin-block-start: 1px; - } -} - -%type-heading-small { - text-transform: uppercase; - color: var(--medium-text-color); - font-size: 11px; - font-weight: bold; -} - -.sources-list { - --source-item-toggle-size: calc(20rem / 16); -} - -.collapsible .sources-list { - position: relative; - padding-inline-start: var(--m); - - &::before { - content: ''; - display: inline-block; - position: absolute; - inset-block-start: 0; - inset-inline-start: calc(var(--source-item-toggle-size) / 2); - width: 1px; - height: 100%; - background-color: var(--border-hairline); - } -} - -.source-item { - position: relative; - - // Toggle button - .source-item__toggle { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: absolute; - inset-inline-start: 0; - inset-block-start: 50%; - transform: translateY(-50%); - width: var(--source-item-toggle-size); - height: var(--source-item-toggle-size); - z-index: 1; - color: inherit; - } - - &:has(.sel) { - --icon-color: var(--white); - } -} - -.source-item--heading { - @extend %type-heading-small; - margin-block-end: var(--s); - padding-block-end: var(--xs); - - & > craft-disclosure > .source-item__toggle { - inset-block-start: calc(1lh * 0.5 - var(--source-item-toggle-size) / 2); - transform: none; - } -} - -/* Sidebar */ -.sidebar { - width: $sidebarWidth; - box-sizing: border-box; - font-size: calc(13rem / 16); - - &:not(.drag-helper) { - padding-block: var(--m); - padding-inline: 0; - background-color: var(--gray-050); - } - - .heading { - position: relative; - margin-block: 0; - line-height: 1.2; - - &:not(:first-child) { - margin-block-start: var(--m); - } - - .type-heading-small, - & > span { - // Backwards compatibility - @extend %type-heading-small; - display: inline-block; - position: relative; - z-index: 1; - padding-block: 0; - padding-inline: var(--xl) var(--m); - margin-block: 0; - } - - & > ul { - margin-block: var(--xs) 2px; - } - } - - @mixin nav-level($level) { - & > a, - .type-heading-small, - [data-source-item] { - padding-inline-start: calc(24px + (var(--s) * #{$level})); - } - - & > .toggle, - [aria-controls] { - inset-inline-start: calc(var(--m) * #{$level}); - } - } - - nav { - padding-block: 0; - padding-inline: var(--s); - - li { - position: relative; - - &:not(.has-subnav) > a, - &:not(.has-subnav) [data-source-item] { - &:not(.sel):hover { - text-decoration: none; - } - - &.sel, - &.active-drop-target { - cursor: default; - background-color: var(--gray-500); - - --focus-ring: var(--focus-ring-outset); - - &, - & + .toggle { - color: var(--white); - } - } - - &.sel { - @include mixins.light-on-dark-text; - - --focus-ring: var(--focus-ring-outset); - } - } - - a { - position: relative; - margin-block-end: 1px; - display: flex; - flex-direction: row; - align-items: center; - padding-block: 7px; - padding-inline: var(--xl) var(--m); - min-height: var(--xl); - box-sizing: border-box; - color: var(--text-color); - cursor: pointer; - user-select: none; - border-radius: var(--radius-lg); - word-break: break-word; - - .status { - flex-shrink: 1; - } - - .icon { - position: relative; - inset-block-start: 1px; - margin-inline-end: 10px; - flex-shrink: 1; - width: calc(18 / 16 * 1rem); - height: calc(18 / 16 * 1rem); - word-break: normal; - transition: - margin-inline-start linear 150ms, - margin-inline-end linear 150ms; - opacity: 0.85; - - &.icon-mask { - svg { - @include mixins.svg-mask(currentColor); - } - - span[data-icon] { - color: currentcolor; - } - } - - svg { - width: 1rem; - height: 1rem; - } - - span[data-icon] { - font-size: 16px; - - &::before { - display: block; - } - } - } - - .label { - flex: 1; - } - - .badge { - margin-inline: 10px -4px; - margin-block: 0; - flex-shrink: 1; - font-size: calc(10rem / 16); - line-height: 1rem; - min-width: 1.1rem; - height: 1rem; - padding-block: 0; - padding-inline: var(--xs); - border-radius: var(--s); - background-color: var(--fg-subtle); - color: var(--white); - } - } - - .toggle { - position: absolute; - z-index: 1; - height: 34px; - inset-block-start: 0; - width: var(--xl); - display: flex; - align-items: center; - justify-content: center; - } - } - } -} - -.sources-list { - &[data-state='collapsed'] { - li:not(:has(.sel)) { - display: none; - } - - .source-item:has(craft-disclosure) > * { - padding-inline-start: var(--s); - } - - .source-item__toggle { - display: none; - } - } -} - -.error-summary { - @include mixins.pane; - margin-block-end: var(--l); - padding-block: var(--l); - padding-inline: var(--xl); - border-radius: var(--radius-lg); - background-color: var(--gray-050); - - .notification-icon { - color: var(--fg-error); - margin-block: -2px 0; - margin-inline: 0 6px; - float: inline-start; - } - - h2 { - margin-block-start: 0; - } - - & > ul.errors li, - & > ul.errors li a { - color: var(--text-color); - - em { - font-weight: 600; - } - - &:hover { - color: var(--link-color); - } - } -} - -.slideout { - .error-summary { - border: 1px solid var(--fg-error); - box-shadow: none; - background-color: rgb(from var(--fg-error) r g b / 3%); - padding: var(--m); - } - - // Slideouts with tabs need slightly different margins - .flex-fields .error-summary { - margin-block: 0 var(--row-gap); - margin-inline: var(--row-gap); - } -} - -.content.has-sidebar:not(.hiding-sidebar) { - margin-inline-start: $sidebarWidth; -} - -#content-notice { - margin-block: 0; - margin-inline: calc(var(--xl) * -1); - padding-block: 0; - padding-inline: var(--xl); - - &:not(:last-child) { - padding-block-end: 5px; - border-block-end: 1px solid var(--border-hairline); - margin-block-end: 5px; - } -} - -/* flexbox field layouts */ -.flex-fields { - --row-gap: var(--xl); - display: flex; - flex-wrap: wrap; - align-content: flex-start; - margin-block: 0 calc(var(--padding) * -1); - margin-inline: calc(var(--padding) * -1); - width: calc(100% + var(--padding) * 2); - container-type: inline-size; - - & > :not(.error-summary) { - margin-block: 0 var(--row-gap) !important; - margin-inline: 0 !important; - padding-block: 0; - padding-inline: var(--padding); - box-sizing: border-box; - } - - & > h2 { - flex: 4 0 100%; - - &:not(:nth-child(-n + 1 of :not(.hidden))) { - padding-block-start: var(--xl); - border-block-start: 1px solid var(--border-hairline); - } - } - - & > hr, - & > .line-break { - flex: 4 0 100%; - } - - & > .line-break:not(:first-child) { - margin-block-end: 0 !important; - } - - & > :not(h2, hr, .line-break) { - &, - &:last-child { - position: relative; - width: 100%; - - &::before { - position: absolute; - inset-block-start: 0; - inset-inline-start: -1px; - width: 1px; - height: 100%; - content: ''; - - // same BG color as the hairline around the content pane’s 1px shadow - background-color: color.adjust(mixins.$grey200, $alpha: -0.5); - } - } - } - - & > :not(h2, hr, .line-break) { - &, - &:last-child { - // 4 cols for container width >= 800px - @container (min-width: calc(800rem/16)) { - &.width-25 { - width: 25%; - } - - &.width-50 { - width: 50%; - } - - &.width-75 { - width: 75%; - } - } - - // 2 cols when container width >= 400px and < 800px - @container (min-width: calc(400rem/16)) and (max-width: calc(800rem/16 - 1px)) { - &.width-25 { - width: 50%; - } - } - } - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_craft-spinner.scss b/packages/craftcms-legacy/cp/src/css/_craft-spinner.scss deleted file mode 100644 index fe4f0df37a7..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_craft-spinner.scss +++ /dev/null @@ -1,10 +0,0 @@ -craft-spinner { - display: flex; - justify-content: center; - - .wrapper { - display: flex; - flex-direction: column; - align-items: center; - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_craft-tooltip.scss b/packages/craftcms-legacy/cp/src/css/_craft-tooltip.scss deleted file mode 100644 index da402e2495a..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_craft-tooltip.scss +++ /dev/null @@ -1,67 +0,0 @@ -.craft-tooltip { - position: fixed; - white-space: normal; - opacity: 0; - width: max-content; - max-width: 240px; - transition: - opacity 100ms ease-in-out, - transform 150ms ease-in-out; - /* stylelint-disable */ - /* We need to keep these non-logical so floating-ui can override them */ - top: 0; - left: 0; - /* stylelint-enable */ - z-index: 99; - - [placement^='bottom'] &, - [placement^='top'] & { - text-align: center; - } -} - -.craft-tooltip > .inner { - position: relative; - display: inline-block; - background-color: var(--white); - color: var(--gray-700); - border: 1px solid var(--border-hairline-dark); - box-shadow: 0 0 10px rgb(0 0 0 / 20%); - border-radius: var(--radius-md); - padding-block: var(--xs); - padding-inline: var(--s); - user-select: none; - font-weight: 400; -} - -.craft-tooltip .arrow { - position: absolute; - background: var(--white); - width: 8px; - height: 8px; - transform: rotate(45deg); - border-style: solid; - border-width: 1px; - border-color: transparent; - - // Not using logical properties here because `data-placement` will change based on direction via JS - &[data-placement^='bottom'] { - border-color: var(--border-hairline-dark) transparent transparent - var(--border-hairline-dark); - } - - &[data-placement^='top'] { - border-color: transparent var(--border-hairline-dark) - var(--border-hairline-dark) transparent; - } - - &[data-placement^='right'] { - border-color: transparent transparent var(--border-hairline-dark) - var(--border-hairline-dark); - } - - &[data-placement^='left'] { - border-color: var(--border-hairline-dark) var(--border-hairline-dark) - transparent transparent; - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_debug_toolbar.scss b/packages/craftcms-legacy/cp/src/css/_debug_toolbar.scss deleted file mode 100644 index c699ceadd29..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_debug_toolbar.scss +++ /dev/null @@ -1,3 +0,0 @@ -.yii-debug-toolbar__title a { - display: block !important; -} diff --git a/packages/craftcms-legacy/cp/src/css/_entry-type-select.scss b/packages/craftcms-legacy/cp/src/css/_entry-type-select.scss deleted file mode 100644 index af3ebe6b942..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_entry-type-select.scss +++ /dev/null @@ -1,39 +0,0 @@ -@charset "UTF-8"; -@use 'sass:color'; -@use '@craftcms/sass/mixins'; - -.entry-type-override-settings-body { - flex: 1; - margin-block: -24px 0; - margin-inline: var(--neg-padding); - padding-block: 24px; - padding-inline: var(--padding); - overflow: hidden auto; - position: relative; -} - -.entry-type-override-settings-footer { - position: relative; - display: flex; - flex-direction: row; - margin-block: 0 -24px; - margin-inline: var(--neg-padding); - padding-block: 5px; - padding-inline: var(--padding); - @include mixins.pane; - background-color: var(--gray-050); - z-index: 3; - - & > .ee-site-select { - flex: 1; - } - - & > .btn { - margin-inline-start: 5px; - } - - & > .spinner { - margin-inline: 0 var(--neg-padding); - margin-block: 0; - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_global-sidebar.scss b/packages/craftcms-legacy/cp/src/css/_global-sidebar.scss deleted file mode 100644 index a7545f91774..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_global-sidebar.scss +++ /dev/null @@ -1,436 +0,0 @@ -@use '@craftcms/sass/mixins'; -@use 'cp'; - -.global-sidebar { - --is-always-visible: true; - position: sticky; - inset-block-start: 0; - display: grid; - grid-template-columns: var(--cp-sidebar-width); - grid-template-rows: calc(var(--cp-header-height) + 1px) minmax(0, 1fr) auto; - grid-auto-flow: row; - height: 100vh; - padding: 0; - -webkit-overflow-scrolling: touch; - background-color: var(--gray-150); - border-inline-end: 1px solid var(--border-hairline); - width: var(--cp-sidebar-width); - isolation: isolate; - z-index: 1; - - a { - text-decoration: none; - } - - & > a, - *:not(.has-subnav) > a { - &:not([href]) { - cursor: default; - background-color: transparent; - } - } - - @media only screen and (max-width: cp.$minFullUiWidth - calc(1rem/16)) { - --is-always-visible: false; - } -} - -.global-sidebar__nav { - padding-block: var(--s); - padding-inline: 0; - overflow: hidden auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - overscroll-behavior: contain; -} - -.global-sidebar__footer { - margin-block-start: auto; - border-block-start: 1px solid var(--border-hairline); -} - -.global-nav > ul { - display: flex; - flex-direction: column; -} - -.global-nav > ul > li { - position: relative; -} - -.nav-icon { - display: inline-flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 1.25rem; - height: 1rem; - line-height: 0; - - --thumb-size: 1rem; - - > svg { - @include mixins.svg-mask(currentColor); - width: 100%; - height: 100%; - } -} - -.nav-item { - display: grid; - grid-template-columns: var(--nav-item-gutter-width) minmax(0, 1fr) var( - --nav-item-gutter-width - ); - grid-template-areas: '. action .' 'subnav subnav subnav'; - align-items: center; - width: 100%; - padding-block: var(--xs); - - > .sidebar-action { - grid-area: action; - } -} - -.nav-item--sub { - padding-block: 0; - grid-template-columns: - calc(var(--nav-item-gutter-width) * 3) minmax(0, 1fr) - var(--nav-item-gutter-width); -} - -.nav-item__trigger { - --icon-size: 10px; - width: var(--nav-item-trigger-size); - height: var(--nav-item-trigger-size); - display: inline-block; - z-index: 1; - - .menubtn.btn.hairline { - padding: 0; - flex-direction: column; - justify-content: center; - align-items: center; - width: var(--nav-item-trigger-size); - height: var(--nav-item-trigger-size); - min-height: 0; - border-color: transparent; - - &:hover:not(:has(.sel)) { - background-color: var(--nav-item-bg-hover); - } - - &[aria-expanded='true'] { - background-color: transparent; - } - - &[aria-expanded='true']::after { - @include mixins.angle(up); - } - - &::after { - margin-inline-start: 0 !important; - } - } -} - -.nav-item__subnav { - --nav-item-prefix-ratio: 4/3; - display: none; - grid-area: subnav; - gap: 1px; - margin-block: 1px; - flex-direction: column; - - &[data-state='expanded'] { - display: flex; - } - - [data-sidebar='expanded'] & { - .sidebar-action { - position: relative; - } - - .sidebar-action::before { - content: ''; - display: inline-block; - position: absolute; - inset-inline-start: calc(-6rem / 16); - inset-block-start: -1px; // Account for gap - height: calc(100% + 1px); - width: 1px; - background-color: color-mix(in srgb, currentcolor, transparent 75%); - border-radius: 0; - } - - .sidebar-action.sel::before { - background-color: currentcolor; - width: 3px; - border-radius: 0 2px 2px 0; - } - } -} - -.badge { - display: inline-flex; - justify-content: center; - text-align: center; - font-size: calc(10rem / 16); - line-height: 1rem; - min-width: 1.1rem; - height: 1rem; - padding-block: 0; - padding-inline: var(--xs); - border-radius: var(--s); - background-color: var(--nav-item-badge-bg); - color: var(--nav-item-badge-fg); -} - -.sidebar-actions { - display: none; - - @media only screen and (min-width: cp.$minFullUiWidth) { - display: block; - padding-block: 10px; - padding-inline: var(--nav-item-gutter-width); // match padding of #system-info - - #sidebar-trigger { - display: flex; - } - } -} - -// Active indicator -.nav-indicator { - width: var(--nav-item-indicator-size); - border-radius: var(--radius-sm); - aspect-ratio: 1; - background-color: currentcolor; -} - -.sidebar-action { - --thumb-size: 0.75rem; - display: grid; - grid-template-columns: var(--nav-item-prefix-width) minmax(0, 1fr) auto; - width: 100%; - align-items: center; - position: relative; - text-align: start; - border-radius: var(--radius-md); - color: currentcolor; - cursor: pointer; - min-height: 30px; - font-weight: 500; - - &::before { - content: ''; - position: absolute; - width: 4px; - inset-block-start: 0; - inset-inline-start: calc(var(--nav-item-gutter-width) / -2 - 3px); - height: 100%; - border-radius: var(--radius-md); - background-color: transparent; - z-index: -1; - } - - &:focus-visible, - &:hover:not(:has(.btn:hover)) { - color: var(--nav-item-fg-hover); - background-color: var(--nav-item-bg-hover); - } - - &[aria-current='page'], - &[aria-current='true'] { - &::before { - background-color: var(--nav-item-fg-active); - } - } -} - -.sidebar-action--sub { - font-size: 0.9em; - min-height: 26px; - - &::before { - display: none; - } - - .sidebar-action__prefix { - position: relative; - } - - &[aria-current='page'], - &[aria-current='true'] { - --nav-item-indicator-size: 6px; - } -} - -.sidebar-action--job { - align-items: start; - - .sidebar-action__label { - flex-wrap: wrap; - padding-block: calc((30px - var(--lh)) / 2); - gap: var(--2xs); - } - - .label { - white-space: normal; - } - - .progress-label { - width: 100%; - display: block; - color: var(--gray-300); - font-size: 11px; - line-height: 1.5; - } - - .nav-icon { - display: block; - position: relative; - width: 16px; - height: 16px; - - & > canvas { - display: block; - position: absolute; - width: 16px; - height: 16px; - } - } - - #job-icon-hover { - opacity: 0; - } - - &:hover { - #job-icon-hover { - opacity: 1; - } - - #job-icon-static { - opacity: 0; - } - } -} - -.sidebar-action__prefix { - display: flex; - align-items: center; - justify-content: center; - width: var(--nav-item-prefix-width); - aspect-ratio: var(--nav-item-prefix-ratio); - line-height: 0; -} - -.sidebar-action__suffix { - display: flex; - gap: var(--s); - align-items: center; - padding-block: 0; - padding-inline: var(--xs); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - margin-inline-start: 7px; // magic number to align with system name - - [data-icon='external'] { - display: inline-flex; - } -} - -.sidebar-action__badge { - flex: 0 1 auto; - display: flex; - flex-direction: column; - justify-content: center; - padding-block: 0; - padding-inline: var(--xs); - margin-inline-start: auto; -} - -/** -States - */ -@media only screen and (min-width: cp.$minFullUiWidth) { - [data-sidebar='collapsed'] { - .global-sidebar { - --cp-sidebar-width: calc(50rem / 16); - } - - .nav-item { - grid-template-areas: '. action .' '. trigger .' 'subnav subnav subnav'; - grid-template-columns: - var(--nav-item-gutter-width) var(--nav-item-prefix-width) - var(--nav-item-gutter-width); - justify-items: center; - } - - .nav-item__indicator { - inset-inline-end: -1px; - } - - .sidebar-action { - width: var(--nav-item-prefix-width); - min-height: var(--nav-item-prefix-width); - grid-template-columns: none; - } - - .nav-item__trigger { - .menubtn { - width: 100%; - height: var(--touch-target-size); - padding-block: 2px var(--xs); - } - } - - .sidebar-action__label { - display: none; - } - - .sidebar-action__suffix { - display: flex; - justify-content: center; - margin-inline: 0; - padding-inline: 0; - } - - .sidebar-action__badge { - z-index: 100; - position: absolute; - inset-inline-end: calc(var(--xs) * -1); - inset-block-end: var(--xs); - transform: translateY(25%); - padding: 0; - } - - .sidebar-action--sub { - min-height: 26px; - } - - .global-nav > ul > li + li { - --separator-width: calc(28rem / 16); - - &::before { - position: absolute; - inset-block-start: 0; - inset-inline-start: calc( - (var(--cp-sidebar-width) - var(--separator-width)) / 2 - ); - content: ''; - width: var(--separator-width); - height: 1px; - margin-block: 0; - margin-inline: auto; - background-color: var(--border-hairline); - } - } - } - - [data-sidebar='expanded'] { - #sidebar-toggle-icon { - transform: rotate(180deg); - } - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_hud.scss b/packages/craftcms-legacy/cp/src/css/_hud.scss deleted file mode 100644 index 54f0eec36e5..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_hud.scss +++ /dev/null @@ -1,166 +0,0 @@ -@use 'variables'; -@use '@craftcms/sass/mixins'; - -// HUD styles live in resources/js/common/slideouts/panel-stack.css. - -.modal { - z-index: 100; - box-sizing: border-box; - @include mixins.modal; -} - -.header, -.footer { - position: relative; - z-index: 1; - box-sizing: border-box; -} - -.header, -.footer { - background-color: var(--gray-100); -} - -.header { - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - padding: 24px; - box-shadow: inset 0 -1px 0 var(--border-hairline); - - h1 { - margin: 0; - } - - &::after { - @include mixins.clearafter; - } -} - -.footer { - border-radius: 0 0 var(--radius-lg) var(--radius-lg); - padding-block: 5px; - padding-inline: var(--pane-padding, var(--xl)); - box-shadow: inset 0 1px 0 var(--border-hairline); - - &.flex { - & > * { - margin-block-end: 0; - } - } -} - -.modal .body { - padding: var(--modal-padding); - overflow: hidden; - box-sizing: border-box; -} - -.pane, -.modal .body { - .header { - margin-block: calc(var(--pane-padding, 24px) * -1) var(--pane-padding, 24px); - margin-inline: calc(var(--pane-padding, 24px) * -1); - } - - .footer { - margin-block: var(--pane-padding, 24px) calc(var(--pane-padding, 24px) * -1); - margin-inline: calc(var(--pane-padding, 24px) * -1); - } -} - -.modal-shade { - z-index: 100; - position: fixed; - inset-block-start: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - background: var(--shade-bg); - - &:not(.visible) { - display: none; - } - - &.blurred { - backdrop-filter: blur(10px); - } -} - -.modal { - position: fixed; - overflow: hidden; - - &:not(.fitted, .fullscreen) { - width: 66%; - height: 66%; - min-width: 600px; - min-height: 400px; - } - - &.fitted { - width: auto; - height: auto; - min-width: 0; - min-height: 0; - } - - &.fullscreen { - width: 100%; - height: 100%; - border-radius: 0; - } - - &.alert .body { - padding-inline-start: 76px; - - &::before { - @include mixins.icon; - margin-inline: -58px 0; - margin-block: -6px 0; - float: inline-start; - content: 'alert'; - font-size: 40px; - color: var(--light-text-color); - } - } - - &.secure .body { - padding-inline-start: 76px; - - &::before { - @include mixins.icon; - margin-inline: -56px 0; - margin-block: -14px 0; - float: inline-start; - content: 'secure'; - font-size: 58px; - color: var(--light-text-color); - } - } - - .resizehandle { - position: absolute; - z-index: 1; - inset-block-end: 0; - inset-inline-end: 0; - width: 24px; - height: 24px; - cursor: nwse-resize; - padding: var(--xs); - - path { - fill: var(--ui-control-color); - } - - body.rtl & { - .ltr { - display: none; - } - } - - body.ltr & { - .rtl { - display: none; - } - } - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_icon-picker.scss b/packages/craftcms-legacy/cp/src/css/_icon-picker.scss deleted file mode 100644 index c44e4f6ca69..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_icon-picker.scss +++ /dev/null @@ -1,97 +0,0 @@ -@use '@craftcms/sass/mixins'; - -/* icon picker */ -.icon-picker { - display: flex; - flex-direction: row; - align-items: center; - gap: var(--xs); -} - -.icon-picker--icon { - display: flex; - align-items: center; - justify-content: center; - @include mixins.input-styles; - border-radius: var(--ui-control-border-radius); - width: var(--ui-control-height); - height: var(--ui-control-height); - background: var(--gray-050); - - svg { - width: calc(20rem / 16); - height: calc(20rem / 16); - @include mixins.svg-mask(var(--ui-control-color)); - } - - &.small { - width: calc(22rem / 16); - height: calc(22rem / 16); - - svg { - width: calc(14rem / 16); - height: calc(14rem / 16); - } - } -} - -.icon-picker-modal { - --width: calc(var(--ui-control-height) * 10 + var(--s) * 9 + var(--xl) * 2); - width: var(--width) !important; - min-width: 0 !important; - max-width: calc(100% - 20px) !important; - - .body { - height: 100%; - display: flex; - flex-direction: column; - gap: var(--l); - - .icon-picker-modal--list { - flex: 1; - position: relative; - overflow: hidden; - - &:not(.loading) { - .spinner { - display: none; - } - } - - &.loading { - &::after { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - content: ''; - background-color: rgb(255 255 255 / 75%); - } - - .spinner { - inset-block-start: calc(50% - 10px); - z-index: 1; - } - } - - ul { - display: flex; - flex-flow: row wrap; - justify-content: flex-start; - gap: var(--s); - max-height: 100%; - overflow: auto; - - .icon-picker--icon { - --focus-ring: var(--focus-ring-inner); - - &:hover { - border-color: var(--link-color); - background-color: var(--blue-100); - } - } - } - } - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_login.scss b/packages/craftcms-legacy/cp/src/css/_login.scss deleted file mode 100644 index 4b3ce21fa29..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_login.scss +++ /dev/null @@ -1,156 +0,0 @@ -@charset "UTF-8"; -@use '@craftcms/sass/mixins'; - -.login-alt-menu { - z-index: 1001; -} - -body.login { - display: flex; - flex-direction: column; - align-items: stretch; - - header { - flex: 0 0 calc(var(--header-height) + 1px); - display: flex; - align-items: center; - padding: var(--header-padding); - border-block-end: var(--header-border); - background: var(--header-bg); - - #system-info { - padding-inline: 0; - - &:hover, - &:focus { - background: transparent; - } - } - } - - main { - min-height: 100vh; - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: var(--m); - padding: var(--padding); - - h1 { - width: 100%; - } - - img#login-logo { - margin-inline: auto; - width: auto; - max-width: calc(15rem + var(--pane-padding) * 2); - } - - #poweredby { - display: block; - margin-block-start: calc(70rem / 16 - var(--m)); - text-align: center; - opacity: 0.8; - - &:hover, - &:focus, - &:active { - opacity: 1; - } - - > svg { - display: inline-block; - } - } - } -} - -.modal.email-sent { - width: 300px; - - .body { - padding-inline-start: 68px; - - &::before { - @include mixins.icon; - display: block; - position: absolute; - inset-block-start: 24px; - inset-inline-start: 24px; - content: 'mail'; - font-size: 30px; - color: var(--link-color); - } - } -} - -.login-container { - position: relative; - width: calc(15rem + var(--pane-padding) * 2); - max-width: 100%; - - form { - display: flex; - flex-direction: column; - gap: var(--l); - - input[readonly] { - cursor: not-allowed; - } - - .field { - margin-block: 0; - } - - hr { - margin-block: calc(var(--pane-padding) - var(--l)); - } - - .btn { - display: flex; - } - } - - .alternative-login-methods { - margin-block-start: var(--m); - - .btn { - width: 100%; - } - } - - .login-forgot-password, - .login-alt-container button { - font-size: 11px; - color: var(--light-text-color); - } - - .login-alt-container { - margin-block: calc(var(--s) - var(--pane-padding)); - margin-inline: 0; - - button { - display: inline-flex; - width: auto; - } - } - - .login-forgot-password:hover, - .login-forgot-password:focus, - .login-alt-container button:hover, - .login-alt-container button:focus { - color: var(--link-color); - } - - .login-errors { - text-align: center; - color: var(--fg-error); - margin-block-start: 1em; - } - - .login-reset-password .login-errors { - margin-block-start: 0; - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_main.scss b/packages/craftcms-legacy/cp/src/css/_main.scss deleted file mode 100644 index 458ec4d79ac..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_main.scss +++ /dev/null @@ -1,8017 +0,0 @@ -@charset "UTF-8"; -@use 'sass:color'; -@use 'variables'; -@use '@craftcms/sass/mixins'; - -@mixin striped-bg($size, $color: mixins.$grey100) { - // h/t https://css-tricks.com/stripes-css/ - $halfSize: $size * 0.5; - - body.ltr & { - background: repeating-linear-gradient( - 135deg, - var(--white), - var(--white) $halfSize, - $color $halfSize, - $color $size - ); - } - - body.rtl & { - background: repeating-linear-gradient( - 45deg, - var(--white), - var(--white) $halfSize, - $color $halfSize, - $color $size - ); - } -} - -@font-face { - font-family: Craft; - src: - url('../fonts/Craft.woff2') format('woff2'), - url('../fonts/Craft.woff') format('woff'), - url('../fonts/Craft.ttf') format('truetype'), - url('../fonts/Craft.svg#Craft') format('svg'); - font-weight: normal; - font-style: normal; - font-display: block; -} - -/* ---------------------------------------- -/* Basic stuff -/* ---------------------------------------- */ - -body, -html { - background: var(--body-bg); -} - -html.noscroll, -html.noscroll body, -body:has(.menu.visible) { - overflow: hidden; -} - -html.noscroll, -html.noscroll body { - height: 100%; -} - -#cropping-canvas { - --focus-ring: none; -} - -body { - width: 100vw; - overflow-x: hidden; - font-size: var(--font-size); - line-height: var(--lh); - color: var(--text-color); - -webkit-font-smoothing: subpixel-antialiased; -} - -body.rtl { - direction: rtl; -} - -body, -input, -select, -textarea { - @include mixins.sans-serif-font; -} - -.center-absolute { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); -} - -.pointer { - cursor: pointer !important; -} - -.no-scroll { - overflow: hidden !important; -} - -.draghelper { - box-sizing: border-box; - list-style-type: none; -} - -.offset-drag-helper { - transition: - margin linear 200ms, - padding linear 200ms; -} - -body.dragging .offset-drag-helper { - margin-block: -50px 0; - margin-inline: -50px 0; - padding-block: 60px 0; - padding-inline: 60px 0; -} - -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -img { - max-width: 100%; -} - -.text, -table.editable textarea { - body.rtl .ltr & { - direction: ltr !important; - } - - body.ltr .rtl & { - direction: rtl !important; - } -} - -/* icons */ -.icon::before, -.menu ul.padded li a.sel::before, -.menu ul.padded li .menu-item.sel::before, -.menu ul.padded li .menu-option.sel::before, -.menu .flex.padded.sel::before, -.texticon::before, -#help::before, -.secure::before, -.insecure::before, -.go::after, -.required::after, -.preview-btn::before, -.view-btn::before, -.action-btn::before, -[data-icon]::before, -[data-icon-after]::after { - @include mixins.icon; -} - -.badge-icon { - position: relative; - inset-block-start: -1px; - display: inline-flex; - align-items: center; - justify-content: center; - width: 1rem; - height: 1rem; - box-sizing: border-box; - border: 1px solid var(--border-warning-emphasis); - border-radius: var(--radius-sm); - color: var(--fg-warning); - font-size: 9px; -} - -.secure::before, -.insecure::before { - margin-block-start: -3px; - font-size: 14px; -} - -[data-icon]::before { - content: attr(data-icon) / ''; -} - -[data-icon-after]::after { - content: attr(data-icon-after); -} - -[data-icon-size='large'] { - &[data-icon]::before, - &[data-icon-after]::after { - font-size: 20px; - } -} - -[data-icon-size='small'] { - &[data-icon]::before, - &[data-icon-after]::after { - font-size: 14px; - } -} - -[data-icon-size='puny'] { - &[data-icon]::before, - &[data-icon-after]::after { - font-size: 12px; - } -} - -body.rtl [data-icon='list']::before, -body.rtl [data-icon-after='list']::after { - content: 'listrtl'; -} - -body.rtl [data-icon='structure']::before, -body.rtl [data-icon-after='structure']::after { - content: 'structurertl'; -} - -.icon.secure::before { - content: 'secure'; -} - -.icon.insecure::before { - content: 'insecure'; -} - -.icon.add::before { - content: 'plus' / ''; -} - -.icon.edit::before { - content: 'edit'; -} - -.icon.settings::before { - content: 'settings'; -} - -.icon.search::before { - content: 'search'; -} - -.icon.expand::before { - content: 'expand'; -} - -.icon.collapse::before { - content: 'collapse'; -} - -.help::before { - content: 'help'; - color: var(--pink-400); -} - -.preview-btn, -.view-btn { - &::before { - margin-inline-end: var(--xs); - } -} - -.preview-btn::before { - content: 'view' / ''; -} - -.view-btn::before { - body.ltr & { - content: 'share'; - } - - body.rtl & { - content: 'shareleft'; - } -} - -.action-btn::before { - content: 'ellipsis' / ''; -} - -/* paragraphs */ -p { - margin-block: 1em; - margin-inline: 0; -} - -h5 + p { - margin-block-start: 0; -} - -sup { - vertical-align: super; - font-size: smaller; -} - -sub { - vertical-align: sub; - font-size: smaller; -} - -.indent { - margin-inline-start: 14px; -} - -/* lists */ -.bullets { - padding-inline-start: 40px; - list-style-type: square; -} - -ol { - padding-inline-start: 40px; - list-style-type: decimal; -} - -/* code */ -code, -.code { - @include mixins.fixed-width-font; - - &.smalltext { - font-size: 0.8em !important; - } - - p & { - background-color: var(--gray-100); - padding-block: 0.0625em; - padding-inline: 0.25em; - border-radius: var(--radius-sm); - border: 1px solid var(--border-hairline); - } - - .warning & { - background-color: var(--bg-warning); - border-color: var(--border-warning); - } - - .tip & { - background-color: var(--bg-notice); - border-color: var(--border-notice); - } -} - -.code { - input, - textarea { - @include mixins.fixed-width-font; - font-size: 1em !important; - } -} - -pre code { - display: block; - overflow-x: auto; -} - -/* links */ -a { - color: var(--link-color); - cursor: pointer; - - &[aria-current] { - cursor: default; - } - - body.underline-links &, - &:hover { - text-decoration: underline; - } - - .cp-icon svg { - @include mixins.svg-mask(var(--icon-color, var(--link-color))); - } -} - -a:not([href]) { - color: inherit; - cursor: inherit; - - body.underline-links &, - &:hover { - text-decoration: none; - } -} - -a.sel, -li.sel > a { - cursor: default !important; - text-decoration: none; -} - -.go::after { - font-size: 11px; - margin-block-start: -1px; - padding-inline-start: 4px; - - body.ltr & { - content: 'circlerarr' / ''; - } - - body.rtl & { - content: 'circlelarr' / ''; - } -} - -button { - cursor: pointer; -} - -/* status icons */ -.checkmark-icon, -.alert-icon { - padding: 5px; - margin-block-end: 0 !important; - line-height: 10px; - border-radius: 20px; - cursor: pointer; - - &::before { - @include mixins.icon; - } -} - -.checkmark-icon { - p & { - display: inline-block; - } - - background-color: var(--gray-200); - - &::before { - content: 'check'; - color: var(--fg-success); - } -} - -.alert-icon { - background-color: var(--gray-200); - - &::before { - content: 'alert'; - color: var(--fg-error); - } -} - -.revision-status-hud { - max-width: 400px; - - .http-error { - border-radius: var(--radius-md); - border: 1px solid var(--border-hairline); - color: var(--light-text-color); - background-color: var(--gray-050); - padding-block: 7px; - padding-inline: 14px; - } -} - -.draft-notice { - display: flex; - align-items: center; - place-content: stretch center; - gap: var(--s); - color: var(--blue-800); - - #content-notice & { - display: inline-flex; - justify-content: flex-start; - } - - .so-notice > & { - margin-inline: calc(var(--xl) * -1) 0; - margin-block: -5px; - padding-inline: var(--xl) 0; - padding-block: 5px; - border-end-start-radius: var(--radius-lg); - - body.ltr & { - background-image: linear-gradient( - to bottom right, - color.adjust(mixins.$blue600, $alpha: -0.8), - color.adjust(mixins.$blue600, $alpha: -1) 50% - ); - } - - body.rtl & { - background-image: linear-gradient( - to left, - color.adjust(mixins.$blue600, $alpha: -0.8), - color.adjust(mixins.$blue600, $alpha: -1) - ); - } - } - - p { - flex: 1; - margin: 0; - } - - .draft-icon { - position: relative; - flex-shrink: 0; - width: 34px; - height: 34px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 100%; - border: 2px solid color.adjust(mixins.$blue800, $alpha: -0.8); - box-sizing: border-box; - box-shadow: 0 1px 1px 1px var(--white); - - &::before { - position: relative; - inset-inline-start: 1px; - color: var(--blue-800) !important; - font-size: 17px; - } - - &::after { - content: ''; - font-size: 0; - position: absolute; - inset: -2px; - border-radius: 100%; - box-shadow: inset 0 2px 0 color.adjust(mixins.$blue900, $alpha: -0.8); - } - } - - .discard-changes-btn { - margin-inline-start: var(--xs); - background-color: transparent !important; - color: var(--blue-800) !important; - border: 2px solid var(--blue-600) !important; - - &:hover, - &:focus { - border-color: color.adjust(mixins.$blue600, $lightness: -5%); - } - - &:active { - border-color: color.adjust(mixins.$blue600, $lightness: -10%); - } - } -} - -.content-notice { - display: flex; - align-items: center; - place-content: stretch center; - gap: var(--s); - color: var(--gray-600); - - #content-notice & { - display: inline-flex; - justify-content: flex-start; - } - - p { - flex: 1; - margin: 0; - } - - .content-notice-icon { - position: relative; - flex-shrink: 0; - width: 34px; - height: 34px; - display: flex; - justify-content: center; - align-items: center; - border-radius: 100%; - border: 2px solid color.adjust(mixins.$grey800, $alpha: -0.8); - box-sizing: border-box; - box-shadow: 0 1px 1px 1px var(--white); - - .cp-icon { - --icon-size: calc(20rem / 16); - } - - &::after { - content: ''; - font-size: 0; - position: absolute; - inset: -2px; - border-radius: 100%; - box-shadow: inset 0 2px 0 color.adjust(mixins.$blue900, $alpha: -0.8); - } - } -} - -/* toggles */ -button.toggle { - appearance: none; - color: inherit; - background: none; - border: none; - padding: 0; -} - -.toggle::before, -button.fieldtoggle:not(.lightswitch)::before, -a.fieldtoggle::before { - @include mixins.angle(right); - transition: transform linear 100ms; -} - -.toggle.expanded::before, -.toggle[aria-expanded='true']::before, -button.fieldtoggle:not(.lightswitch).expanded::before, -a.fieldtoggle.expanded::before, -.sidebar nav li.expanded > .toggle::before, -.structure li:not(.collapsed) > .row > .toggle::before { - transform: rotate(45deg) !important; -} - -button.fieldtoggle:not(.lightswitch), -a.fieldtoggle { - display: block; - position: relative; - margin-block: var(--m); - margin-inline: 0; - padding-inline-start: var(--m); - color: var(--text-color); - text-decoration: none; - cursor: default; -} - -button.fieldtoggle:not(.lightswitch) { - cursor: pointer; -} - -button.fieldtoggle:not(.lightswitch)::before, -a.fieldtoggle::before { - display: block; - position: absolute; - inset-block-start: 7px; - inset-inline-start: -1px; -} - -/* emphasis */ -em, -i { - font-style: italic; -} - -ul.errors em { - font-style: normal; -} - -strong, -b, -i em { - font-weight: bold; -} - -/* readable blocks */ -.readable { - @include mixins.readable; -} - -/* text styles */ -.leftalign { - text-align: start; -} - -.topalign { - vertical-align: top; -} - -.rightalign { - text-align: end; -} - -.centeralign { - text-align: center !important; -} - -.nowrap { - white-space: nowrap; -} - -.break-word { - overflow-wrap: break-word; -} - -.light { - color: var(--fg-subtle) !important; -} - -.extralight { - color: var(--light-text-color) !important; -} - -.smalltext { - font-size: 12px; - line-height: 1.2; -} - -.largetext { - font-size: 16px; - line-height: 1.2; -} - -.zilch { - padding-block: 100px; - padding-inline: 0; - text-align: center; - font-size: 20px; - line-height: 24px; - color: var(--light-text-color); - - &.small { - padding-block: 24px; - padding-inline: 0; - font-size: 16px; - } -} - -.required::after { - content: 'asterisk'; - margin-inline: 5px 0; - margin-block: -2px 0; - font-size: 12px; - color: var(--rose-600); -} - -.scrollpane { - overflow: auto; -} - -.left { - float: inline-start; -} - -.right { - float: inline-end; -} - -th, -td { - text-align: start; - vertical-align: middle; -} - -body table[dir='rtl'] { - th, - td { - text-align: end; - } -} - -body table[dir='ltr'] { - th, - td { - text-align: start; - } -} - -th.right, -td.right { - float: none; - text-align: end; -} - -.clear { - display: block; - clear: both; - height: 0; -} - -.fullwidth { - width: 100%; -} - -.token { - @include mixins.token-styles; -} - -.token[data-name='*'] { - position: relative; - width: 10px; -} - -.token[data-name='*'] span { - opacity: 0; -} - -.token[data-name='*']::before { - @include mixins.icon; - display: block; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - width: 100%; - font-size: 9px; - line-height: 17px; - content: 'asterisk'; - text-indent: 0; -} - -.token:focus { - @include mixins.active-token-styles; -} - -.success { - color: var(--fg-success) !important; -} - -.notice, -.warning { - &.with-icon, - .icon { - &::before { - margin-inline: 0 2px; - margin-block: -2px 0; - @include mixins.icon; - width: 1em; - } - } - - &.has-icon { - display: flex; - flex-wrap: nowrap; - align-items: flex-start; - - .icon { - flex-shrink: 1; - } - } -} - -.notice { - color: var(--fg-notice) !important; - - a { - text-decoration: underline; - } - - &.with-icon, - .icon { - &::before { - content: 'lightbulb'; - } - } -} - -.warning { - color: var(--fg-warning) !important; - - &.with-icon, - .icon { - &::before { - content: 'alert'; - } - } -} - -.error { - color: var(--fg-error) !important; -} - -.icon.move, -.move-btn { - &:not(.disabled) { - cursor: move !important; - } -} - -.icon.move { - &::before { - content: 'move'; - color: var(--custom-text-color, var(--ui-control-color)); - } - - &:not(.disabled):hover::before { - color: var(--link-color); - } -} - -.icon.delete { - display: inline-block; - line-height: inherit; - - &::before { - content: 'remove'; - color: var(--ui-control-color); - } - - &:not(.disabled) { - cursor: pointer; - - &:hover::before { - color: var(--bg-disabled); - } - - &:active::before { - color: var(--red-800); - } - } -} - -.hidden { - display: none !important; -} - -// Visually hide without hiding from screen readers -.visually-hidden { - @include mixins.visually-hidden; -} - -.invisible { - visibility: hidden; -} - -.clearafter::after { - @include mixins.clearafter; -} - -.info { - vertical-align: bottom; - display: inline-block; - width: 1em; - height: 1.375em; - text-align: center; - cursor: pointer; - overflow: hidden; - - &::before { - @include mixins.icon; - vertical-align: baseline; - width: 100%; - line-height: 1.375; - color: var(--ui-control-color); - } - - &:not(.warning) { - &::before { - content: 'info'; - } - - &:hover::before { - color: var(--link-color); - } - } - - &.warning { - &::before { - content: 'alert'; - } - - &:hover::before { - color: var(--fg-warning); - } - } -} - -.info-hud { - max-width: 550px; - - table { - max-width: 280px; - table-layout: auto; - } - - td { - overflow-wrap: break-word; - width: 100%; - } -} - -@media (width <= 450px) { - .info-hud { - table { - table-layout: fixed; - width: 100%; - } - } -} - -/* ---------------------------------------- -/* Content -/* ---------------------------------------- */ - -.content { - position: relative; -} - -.content::after { - @include mixins.clearafter; -} - -.checkbox-select-item { - display: flex; - gap: var(--xs); - align-items: flex-start; - align-content: stretch; - padding-block: 4px; - - .move { - margin-block-start: -4px; - margin-inline-end: var(--xs); - position: relative; - z-index: 1; - } - - .action-btn { - margin-block: -4px; - } -} - -ul.path { - display: flex; - flex-flow: row wrap; - align-items: stretch; - - li { - display: inline-flex; - align-items: center; - - &:not(:last-child)::after { - margin-inline: 2px 5px; - margin-block: 0; - @include mixins.angle(right, var(--light-text-color), calc(1rem / 16)); - } - } -} - -/* ---------------------------------------- -/* Icon lists -/* ---------------------------------------- */ - -ul.icons { - margin-block-start: 20px; - display: flex; - flex-wrap: wrap; - - li { - margin-block: 0 10px; - margin-inline: 0 4px; - - a { - display: block; - position: relative; - padding-block: 60px 10px; - padding-inline: 5px; - width: 110px; - text-align: center; - color: var(--text-color); - border-radius: 4px; - border: 1px solid var(--white); - - &::before { - display: block; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - width: 100%; - font-size: 40px; - line-height: 60px; - } - - .icon { - position: absolute; - inset-block-start: 12px; - inset-inline-start: 0; - width: 100%; - height: 40px; - display: flex; - align-items: center; - justify-content: center; - - img, - svg { - // give Users, Addresses, Categories, and Filesystems icons a little extra breathing room - max-width: 50px; - height: 40px; - } - - &.icon-mask svg { - @include mixins.svg-mask(var(--text-color)); - } - } - - &:hover { - text-decoration: none; - background-color: var(--gray-050); - border-color: var(--gray-100); - - .icon.icon-mask svg { - @include mixins.svg-mask(var(--link-color)); - } - } - } - } -} - -@media only screen and (width <= 380px) { - ul.icons li a { - width: 96px; - } -} - -@media only screen and (width <= 320px) { - ul.icons li a { - width: 75px; - } -} - -/* ---------------------------------------- -/* Buttons -/* ---------------------------------------- */ - -.toolbar { - position: relative; - margin-block-end: var(--s); - min-height: 34px; - - &.flex, - .flex { - align-items: flex-start; - } - - .text { - border-radius: var(--radius-lg) !important; - } -} - -.inline-flex { - display: inline-flex !important; - align-items: center; - align-content: stretch; - gap: var(--s); -} - -.gap-0 { - gap: 0; -} - -.gap-2xs { - gap: var(--2xs); -} - -.gap-xs { - gap: var(--xs); -} - -.gap-s { - gap: var(--s); -} - -.gap-m { - gap: var(--m); -} - -.gap-l { - gap: var(--l); -} - -.gap-xl { - gap: var(--xl); -} - -.spacer { - width: 14px; -} - -.buttons { - display: flex; - gap: 7px; - position: relative; - margin-block: 24px; - margin-inline: 0; - align-items: center; - - .footer > & { - margin: 0; - } -} - -.btn { - isolation: isolate; - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - border: var(--button-border); - border-radius: var(--button-border-radius); - padding-inline: var(--button-padding); - text-align: center; - user-select: none; - box-sizing: border-box; - appearance: none; - color: var(--text-color); - font-size: inherit; - text-wrap: nowrap; - background-color: var(--button-bg); - min-height: calc(34rem / 16); - - &:hover { - border: var(--button-border--hover); - background: var(--button-bg--hover); - } - - &:active, - &.active { - border: var(--button-border--active); - background: var(--button-bg--active); - } - - &:not([aria-current]) { - cursor: pointer; - } - - &[aria-current], - &.active { - cursor: default; - } - - &.chromeless, - &.hairline, - &.hairline-dark, - &.link-btn { - border: none; - background: transparent; - - &:focus-visible { - box-shadow: var(--focus-ring); - } - } - - &.chromeless { - height: auto; - min-height: var(--touch-target-size); - padding-inline: 0; - - &:hover, - &:active, - &.active, - &:focus { - background: transparent; - } - - &:hover, - &:active, - &.active { - color: var(--link-color); - text-decoration: underline; - } - } - - &.hairline, - &.link-btn { - border: 1px solid var(--border-hairline-medium); - - &:active, - &.active, - &[aria-expanded='true'] { - background: var(--ui-control-static-bg-color); - } - } - - &.hairline { - &:hover, - &:active, - &.active, - &[aria-expanded='true'] { - border-color: var(--border-hairline-dark); - } - } - - &.hairline-dark { - border: 1px solid var(--border-hairline-dark); - - &:not(:hover, :active, .active, [aria-expanded='true']) { - background-color: transparent; - } - } - - &.link-btn { - color: var(--link-color); - - &:hover, - &:active, - &.active, - &[aria-expanded='true'] { - border-color: var(--link-color); - } - } - - &.wrap { - height: auto; - min-height: calc(34rem / 16); - white-space: initial; - text-align: start; - } - - &:not(.disabled, .loading, .dashed, [aria-disabled], [aria-current]) { - &:focus, - &.focus, - &:hover { - --ui-control-bg-color: var(--ui-control-hover-bg-color); - } - - &:active, - &.active, - &[aria-expanded='true'] { - --ui-control-bg-color: var(--ui-control-active-bg-color); - } - } - - &[type='color'] { - padding-inline: 6px !important; - width: 36px; - } - - &.loading { - cursor: default; - } - - &:hover:not(.chromeless) { - text-decoration: none; - } - - &:empty, - &.btn-empty { - padding-inline: 12px; - } - - &[data-icon]:not(:empty, .btn-empty)::before, - &.icon:not(:empty, .btn-empty)::before, - &.menubtn:not(.action-btn)[data-icon]:empty::before, - &.menubtn:not(.action-btn)[data-icon].btn-empty::before, - &.menubtn:not(.action-btn).icon:empty::before, - &.menubtn:not(.action-btn).icon.btn-empty::before { - margin-inline-end: 5px; - } - - &:not(.loading) .spinner { - display: none; - } - - &.loading { - &::before, - &::after, - .cp-icon, - .label { - visibility: hidden; - } - } - - &.copyable { - color: var(--fg-subtle); - - [data-icon] { - margin-inline: 0; - } - } - - [data-icon] { - margin-block-start: -3px; - margin-inline-end: 5px; - - &.light::before { - color: var(--gray-300); - } - } - - .cp-icon svg { - @include mixins.svg-mask(currentColor); // Matches color of font icons - } - - &.header-btn { - margin-block: 2px; - margin-inline: 0; - @include mixins.header-btn; - } -} - -.disabled:not(.status, .status-label) { - opacity: 0.5; - user-select: none; - cursor: not-allowed !important; - - .layoutdesigner { - pointer-events: none; - } -} - -.noteditable { - cursor: not-allowed; - - .element, - .lightswitch-container, - & + .colorhex { - cursor: not-allowed; - } -} - -.btn { - height: var(--input-height); - min-height: var(--input-height); -} - -.btn[data-icon-after]:not(:empty, .btn-empty)::after, -.menu-toggle:not(:empty, .btn-empty)::after, -.menubtn:not(.action-btn, :empty, .btn-empty)::after, -.menubtn:not(.action-btn).icon::after { - margin-inline-start: 6px; -} - -.btn[data-icon]::before, -.btn[data-icon-after]::after, -.btn.icon::before { - position: relative; -} - -.btn.small { - --icon-size: calc(12rem / 16); - - &[data-icon]::before, - &[data-icon-after]::after, - &.icon::before { - font-size: 12px; - } -} - -/* button groups */ -.btngroup-container { - margin: -3px; - padding: 3px; - overflow-x: auto; -} - -.btngroup { - position: relative; - z-index: 1; - display: flex; - white-space: nowrap; - align-items: center; - border-radius: var(--radius-lg); - - &.fullwidth .btn { - flex: 1; - } - - &.disabled .btn { - cursor: default; - } - - .btn { - &:focus { - z-index: 1; - } - - &:not(.dashed, :last-child, .btngroup-btn-last) { - margin-inline-end: 1px; - } - - &:not(:first-child, .btngroup-btn-first) { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - - &:not(:last-child, .btngroup-btn-last) { - border-start-end-radius: 0; - border-end-end-radius: 0; - } - } -} - -.btngroup--exclusive { - .btn[aria-pressed='true']:not(.disabled, .loading, .dashed, [aria-disabled]) { - --focus-ring: var(--focus-ring-outset); - background-color: var(--gray-500); - color: var(--white); - } -} - -.copytext { - position: relative; - z-index: 1; - display: flex; - white-space: nowrap; - - .text { - border-start-end-radius: 0; - border-end-end-radius: 0; - min-width: 0; - } - - .btn { - border-start-start-radius: 0; - border-end-start-radius: 0; - } -} - -craft-copy-attribute { - display: inline-block; - @include mixins.fixed-width-font(calc(11rem / 16)); - color: var(--fg-subtle); - height: calc(22rem / 16); - - button { - gap: 5px; - display: inline-flex; - border: 1px solid var(--border-hairline); - border-radius: var(--button-border-radius); - padding-inline: 5px; - flex-wrap: nowrap; - align-items: center; - cursor: pointer; - height: 100%; - - &:hover, - &:focus { - border-color: var(--border-hairline-medium); - color: var(--text-color); - } - - span[data-icon] { - margin-block-start: -3px; - } - } -} - -/* menu buttons */ -.menu-toggle, -.menubtn:not(.action-btn) { - display: inline-flex; - align-items: center; - user-select: none; - - &::after { - @include mixins.angle; - position: relative; - } - - &.btn { - &::after { - inset-block-start: -1px; - } - - &:not(.disabled, .inactive) { - &:active, - &.active { - &::after { - border-color: var(--ui-control-active-color); - } - } - } - - &.submit { - &::after { - border-color: var(--white) !important; - opacity: 0.8; - } - - &:not(.disabled, .inactive) { - &:hover, - &.hover, - &:active, - &.active { - &::after { - opacity: 1; - } - } - } - } - } - - &:not(.btn, .icon) { - height: 17px; - - &::after { - inset-block-start: -2px; - border-color: currentcolor; - } - } - - &:empty, - &.btn-empty { - padding-inline: 8px; - } -} - -@keyframes rotator { - 0% { - transform: rotate(0); - } - - 100% { - transform: rotate(1turn); - } -} - -/* spinner */ -.spinner { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--size, 24px); - height: var(--size, 34px); - - &::before { - display: block; - content: ''; - font-size: 0; - animation: rotator 0.7s linear infinite; - box-sizing: border-box; - width: var(--size, 20px); - height: var(--size, 20px); - object-fit: scale-down; - border-radius: 50%; - border: 2px solid transparent; - border-inline-end-color: currentcolor; - border-block-end-color: currentcolor; - opacity: 0.8; - } - - &.small { - --size: 12px; - } - - &.big { - --size: 48px; - } - - &.spinner-absolute { - position: absolute; - width: var(--size, 20px); - height: var(--size, 20px); - transform: translateX(-50%) translateY(-50%); - inset-block-start: 50%; - inset-inline-start: 50%; - z-index: 101; - - .rtl & { - transform: translateX(50%) translateY(-50%); - } - } -} - -.btn + .spinner { - margin-inline-start: 7px; -} - -.buttons .btn + .spinner, -.buttons .btngroup + .spinner { - margin-inline-start: 0; -} - -.buttons.right .btn + .spinner { - margin-inline-end: var(--neg-padding); -} - -/* small buttons */ -.btngroup.small .btn, -.btn.small { - padding-block: 0 !important; - padding-inline: var(--s) !important; - font-size: 12px; - line-height: calc(22rem / 16); - min-height: calc(22rem / 16) !important; -} - -.btngroup.small, -.btngroup.small input.btn, -.btn.small, -.btn.small + .spinner { - height: calc(22rem / 16); -} - -/* big buttons */ -.btngroup.big .btn, -.btn.big { - padding-block: 0; - padding-inline: 14px; - font-size: 14px; - line-height: 36px; -} - -.btn.big[data-icon]::before, -.preview-btn::before, -.view-btn::before { - margin-inline-start: -2px; -} - -.btngroup.big, -.btngroup.big input.btn, -.btn.big, -.btn.big + .spinner { - min-height: calc(36rem / 16); -} - -/* huge buttons */ -.btn.huge { - padding-inline: var(--l); - line-height: calc(48rem / 16); - height: calc(48rem / 16); -} - -/* special buttons */ -.btn { - &.submit, - &.secondary { - --ui-control-active-color: var(--white); - --focus-ring: var(--focus-ring-outset); - @include mixins.light-on-dark-text; - } - - &.submit { - border: var(--primary-button-border) !important; - color: var(--primary-button-text-color) !important; - background: var(--primary-button-bg) !important; - - &:not(.disabled, .inactive, .loading) { - &:hover, - &.hover { - border: var(--primary-button-border--hover) !important; - background: var(--primary-button-bg--hover) !important; - } - - &:active, - &.active, - &[aria-expanded='true'] { - border: var(--primary-button-border--active) !important; - background: var(--primary-button-bg--active) !important; - } - } - } - - &.caution { - background-color: var(--red-050) !important; - color: var(--fg-error); - - &:hover, - &.hover, - &:focus { - background-color: color.adjust( - mixins.$red050, - $lightness: -5% - ) !important; - } - - &:active, - &.active, - &[aria-expanded='true'] { - background-color: var(--red-100) !important; - } - } -} - -.secondary-buttons .btn.submit, -.btn.secondary { - border: var(--secondary-button-border) !important; - color: var(--secondary-button-text-color) !important; - background: var(--secondary-button-bg) !important; -} - -.secondary-buttons .btn.submit:not(.disabled, .inactive, .loading):hover, -.secondary-buttons .btn.submit:not(.disabled, .inactive, .loading).hover, -.secondary-buttons .btn.submit:not(.disabled, .inactive, .loading):focus, -.btn.secondary:not(.disabled, .inactive, .loading):hover, -.btn.secondary:not(.disabled, .inactive, .loading).hover, -.btn.secondary:not(.disabled, .inactive, .loading):focus { - border: var(--secondary-button-border--hover) !important; - background: var(--secondary-button-bg--hover) !important; -} - -.secondary-buttons .btn.submit:not(.disabled, .inactive, .loading):active, -.secondary-buttons .btn.submit:not(.disabled, .inactive, .loading).active, -.secondary-buttons - .btn.submit:not(.disabled, .inactive, .loading)[aria-expanded='true'], -.btn.secondary:not(.disabled, .inactive, .loading):active, -.btn.secondary:not(.disabled, .inactive, .loading).active, -.btn.secondary:not(.disabled, .inactive, .loading)[aria-expanded='true'] { - border: var(--secondary-button-border--active) !important; - background: var(--secondary-button-bg--active) !important; -} - -div.btn.submit { - position: relative; - overflow: hidden; -} - -div.btn.submit input { - position: absolute; - inset-inline-start: 100%; -} - -/* dashed buttons */ -.btn.dashed { - border: 1px dashed #{color.adjust(mixins.$inputColor, $alpha: -0.5)}; - background-color: transparent; - - .btngroup &:not(:last-child, .btngroup-btn-last) { - border-inline-end: 1px solid transparent; - margin-inline-end: -1px; - } - - &:focus-visible { - background-color: color.adjust(mixins.$grey200, $alpha: -0.9); - border-color: transparent; - } - - &:not(.disabled) { - &:active, - &.active, - &[aria-expanded='true'] { - background-color: color.adjust(mixins.$grey200, $alpha: -0.75); - } - } -} - -/* chevron buttons */ -.chevron-btns { - display: flex; - justify-content: flex-start; - - .btn { - position: relative; - padding-inline: 0; - border-radius: 0; - background-color: transparent; - height: var(--ui-control-height); - min-height: auto; - - &.current-step, - &.active-drop-target { - color: var(--white); - - --text-color: var(--white); - --ui-control-color: var(--white); - --ui-control-bg-color: var(--gray-500); - --ui-control-hover-bg-color: #{color.adjust( - mixins.$grey500, - $lightness: -5% - )}; - --ui-control-active-bg-color: #{color.adjust( - mixins.$grey500, - $lightness: -10% - )}; - } - - &.current-step { - --focus-ring: var(--focus-ring-light); - @include mixins.light-on-dark-text; - } - - &:focus-visible { - z-index: 1; - box-shadow: none; - - .label { - z-index: 1; - box-shadow: var(--focus-ring); - } - } - - &:not(.has-action-menu) { - padding-inline-end: calc(var(--ui-control-height) / 2); - margin-inline-end: 2.8px; - - &:not(.current-step[data-disclosure-trigger]) .btn-body { - padding-inline-end: 5px; - } - } - - &.current-step[data-disclosure-trigger] .btn-body { - padding-inline-start: 8px; - - .label { - padding: 3px; - - &::after { - @include mixins.angle; - position: relative; - } - } - } - - .btn-body { - display: inline-flex; - align-items: center; - justify-content: center; - height: 100%; - background-color: var(--ui-control-bg-color); - - [data-icon] { - --ui-control-height: calc((13rem / 16)); // 1rem == 16px - text-align: center; - margin-inline-end: 0; - } - } - - .label { - display: inline-flex; - align-items: center; - overflow: hidden; - text-overflow: ellipsis; - } - - &.has-action-menu .btn-body { - padding-inline-end: 1px; - margin-inline-end: 0; - } - - .chevron-right, - .chevron-left { - position: absolute; - inset-block-start: 0; - height: 100%; - width: calc(var(--ui-control-height) / 2); - } - - .chevron-left { - inset-inline-start: 0; - border-block-start: calc(var(--ui-control-height) / 2) solid - var(--ui-control-bg-color); - border-inline-start: calc(var(--ui-control-height) / 2) solid transparent; - - &::after { - display: block; - content: ''; - font-size: 0; - position: absolute; - inset-block-end: 0; - inset-inline-end: 0; - border-block-end: calc(var(--ui-control-height) / 2) solid - var(--ui-control-bg-color); - border-inline-start: calc(var(--ui-control-height) / 2) solid - transparent; - } - } - - .chevron-right { - inset-inline-end: 0; - border-block-start: calc(var(--ui-control-height) / 2) solid transparent; - border-block-end: calc(var(--ui-control-height) / 2) solid transparent; - border-inline-start: calc(var(--ui-control-height) / 2) solid - var(--ui-control-bg-color); - } - } - - ol { - position: relative; - padding-inline-start: 0; - list-style-type: none; - display: flex; - - li { - &.first-step .btn { - .btn-body { - padding-inline-start: 14px; - border-start-start-radius: var(--ui-control-border-radius); - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: var(--ui-control-border-radius); - } - - .chevron-left { - display: none; - } - } - - &:not(.first-step) .btn { - margin-inline-start: calc(-1 * (var(--ui-control-height) / 2)); - padding-inline-start: calc(var(--ui-control-height) / 2); - - .btn-body { - padding-inline-start: 7px; - } - } - } - } -} - -/* color inputs */ -.color-input-container { - position: relative; - - .color-hex-indicator { - position: absolute; - inset-block-start: 0; - inset-inline-start: 7px; - width: 1em; - line-height: 34px; - text-align: center; - user-select: none; - } -} - -.color-input { - @include mixins.fixed-width-font; - padding-inline: calc(7px + 1em) 9px; -} - -.color { - display: inline-block; - position: relative; - vertical-align: middle; - width: 34px; - height: 34px; - border-radius: 17px; - padding: 0; - - &:not(.static, .noteditable) { - cursor: pointer; - } - - &:not(.small) { - @include mixins.checkered-bg(17px); - } - - &.small { - width: 16px; - height: 16px; - @include mixins.checkered-bg(8px); - } - - .color-preview { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - border-radius: 17px; - box-shadow: inset 0 0 0 1px color.adjust(mixins.$black, $alpha: -0.85); - - &:focus-within { - @include mixins.input-focused-styles; - } - - & > .color-preview-input { - position: absolute; - inset-inline-start: 0; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - border: none; - opacity: 0; - } - } -} - -.colorhex { - display: inline-block; - margin-inline-start: 5px; - vertical-align: middle; - color: var(--fg-subtle); -} - -/* lightswitch */ -.lightswitch-outer-container { - display: flex; - - .lightswitch-inner-container { - border: 1px solid var(--border-hairline); - border-radius: var(--radius-sm); - display: flex; - align-items: center; - max-width: 100%; - padding-inline: 7px; - - span { - flex-grow: 1; - padding-block: 7px; - padding-inline: 0; - color: var(--fg-subtle); - cursor: default; - overflow: auto; - overflow-wrap: break-word; - hyphens: auto; - - &[data-toggle='on'] { - margin-inline-start: 7px; - } - - &[data-toggle='off'] { - margin-inline-end: 7px; - text-align: end; - } - } - } -} - -.lightswitch { - // Ensures contrast with pane background is over 3:1 - --_lightswitch-border-color: var( - --lightswitch-border-color, - hsl(from var(--input-border-color) h s l / 80%) - ); - display: block; - position: relative; - border: none !important; - overflow: hidden; - cursor: pointer; - user-select: none; - background-image: linear-gradient(to right, var(--gray-200), var(--gray-200)); - transition: background-image linear 100ms; - box-shadow: inset 0 0 0 1px var(--_lightswitch-border-color); - - &[disabled] { - --_lightswitch-border-color: var( - --lightswitch-border-color-disabled, - hsl(from var(--input-border-color) h s l / 30%) - ); - } - - &.on { - --_lightswitch-border-color: oklch( - from var(--bg-enabled) calc(l - 0.1) c h - ); - background-image: linear-gradient( - to right, - var(--bg-enabled), - var(--bg-enabled) - ); - - .lightswitch-container .handle::before { - background-color: var(--enabled-color); - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E%0A"); - mask-repeat: no-repeat; - } - - // Makes small icon a little darker to compensate for the size - &.small .lightswitch-container .handle::before { - background-color: hsl(from var(--enabled-color) h s calc(l - 20)); - } - } - - &.indeterminate { - background-image: linear-gradient( - to right, - var(--bg-enabled) 40%, - var(--gray-200) 60% - ); - } - - .lightswitch-container { - position: relative; - height: 100%; - - .handle { - position: absolute; - inset-block-start: 2px; - background-color: var(--white); - box-shadow: inset 0 0 0 1px var(--_lightswitch-border-color); - } - - .handle::before { - content: ''; - position: absolute; - inset-block-start: 50%; - inset-inline-start: 54%; - transform: translateX(-50%) translateY(-50%); - width: 12px; - height: 12px; - } - } - - &:not(.small) { - border-radius: 11px; - min-width: 34px; - width: 34px; - height: 22px; - - .lightswitch-container { - margin-inline-start: -12px; - width: 46px; - - .handle { - border-radius: 9px; - width: 18px; - height: 18px; - inset-inline-start: calc(50% - 9px); - } - } - } - - &.small { - border-radius: 9px; - width: 28px; - height: 18px; - - .lightswitch-container { - margin-inline-start: -10px; - width: 38px; - - .handle { - border-radius: 8px; - width: 14px; - height: 14px; - inset-inline-start: calc(50% - 7px); - } - - .handle::before { - width: 8px; - height: 8px; - } - } - } - - table & { - display: inline-block; - margin-block-end: -5px; - } - - &.on { - .lightswitch-container { - margin-inline-start: 0; - } - } - - &.indeterminate { - &:not(.small) { - .lightswitch-container { - margin-inline-start: 0.5 * -12px; - } - } - - &.small { - .lightswitch-container { - margin-inline-start: 0.5 * -10px; - } - } - } -} - -/* pagination */ -.pagination { - table.data + & { - margin-block-start: 24px; - } - - .page-link { - width: calc(30rem / 16); - height: calc(30rem / 16); - display: flex; - align-items: center; - justify-content: center; - border-radius: var(--radius-md); - - &::after { - position: relative; - transition: border-color linear 100ms; - } - - &.prev-page::after { - @include mixins.angle(left, var(--light-text-color)); - inset-inline-end: -1px; - } - - &.next-page::after { - @include mixins.angle(right, var(--light-text-color)); - inset-inline-start: -1px; - } - - &:not(.disabled) { - transition: box-shadow linear 100ms; - box-shadow: inset 0 0 0 1px var(--border-hairline); - cursor: pointer; - - &:hover { - text-decoration: none; - box-shadow: inset 0 0 0 1px var(--link-color); - - &::after { - border-color: var(--link-color); - } - } - - &:focus-visible { - box-shadow: - inset 0 0 0 1px var(--border-hairline), - var(--focus-ring); - } - } - - &.disabled { - opacity: 1; - - &::after { - border-color: var(--border-hairline); - } - } - } -} - -/* action buttons */ -.actions { - float: inline-end; -} - -.actions > li { - float: inline-start; -} - -.actions > li + li { - margin-inline-start: 10px; -} - -h1 + .actions { - margin-block-start: -100px; -} - -h2 + .actions { - margin-block-start: -54px; -} - -/* ---------------------------------------- -/* Tables -/* ---------------------------------------- */ - -.tablepane { - --pane-y-padding-default: calc(var(--xl) - 2px); - --pane-x-padding-default: calc(var(--padding) - 2px); - - #content & { - --pane-padding: var(--pane-x-padding-default); - } - - margin-block: calc(var(--pane-padding, var(--pane-y-padding-default)) * -1) - calc( - var(--pane-padding, var(--padding)) * -1 + var(--pane-padding, var(--m)) - ); - margin-inline: calc(var(--pane-padding, var(--pane-x-padding-default)) * -1); - padding: 0 !important; - overflow-x: auto; - - table.data { - th, - td { - &:first-child:not(.checkbox-cell, .vuetable-th-slot-checkbox) { - padding-inline-start: var( - --pane-padding, - var(--pane-x-padding-default) - ); - } - - &:last-child { - padding-inline-end: var(--pane-padding, var(--pane-x-padding-default)); - } - } - } -} - -table:not(.cp-table) { - &.fixed-layout { - table-layout: fixed; - } - - th.thin, - td.thin { - width: 0.01% !important; - white-space: nowrap; - } - - thead { - th { - font-weight: bold; - text-align: start; - vertical-align: top; - } - } - - // plain tables - &:not(.data) { - th, - td { - padding-block: 7px; - - &:not(:first-child) { - padding-inline-start: 12px; - } - - &:not(:last-child) { - padding-inline-end: 12px; - } - } - } - - // data tables - &.data { - th, - td { - position: relative; - padding-inline: 12px; - box-sizing: border-box; - - &.checkbox-cell, - &.vuetable-th-slot-checkbox { - width: var(--checkbox-size) !important; - min-width: var(--checkbox-size); - box-sizing: content-box; - position: relative; - - input.checkbox + label, - div.checkbox { - position: absolute; - inset-block-start: calc(50% - 8rem / 16); - } - } - } - - th { - font-weight: bold; - } - - thead:first-child, - tbody:first-child, - tfoot:first-child, - caption + thead, - caption + tbody, - caption + tfoot { - tr:first-child { - th, - td { - &:first-child { - border-start-start-radius: var(--border-radius, var(--radius-sm)); - border-end-start-radius: var(--border-radius, var(--radius-sm)); - } - - &:last-child { - border-start-end-radius: var(--border-radius, var(--radius-sm)); - border-end-end-radius: var(--border-radius, var(--radius-sm)); - } - } - } - } - - thead { - th, - td { - width: auto; - background-color: var(--gray-050); - cursor: default; - } - - th:not(.orderable), - td { - padding-block: var(--s); - } - - th { - white-space: nowrap; - vertical-align: middle; - - &.orderable { - position: relative; - padding: 0 !important; - - body:not(.dragging) &:not(.ordered):hover { - background-color: var(--gray-100); - } - - &.ordered { - background-color: var(--bg-selection-light); - - &:not(.loading) { - button::after { - @include mixins.angle(up); - position: absolute; - inset-inline-end: var(--m); - inset-block-start: calc(50% - 3px); - } - - &.desc button::after { - transform: rotate(45deg); - } - } - } - - button { - position: relative; - font: inherit; - width: 100%; - padding-block: var(--m); - padding-inline: var(--m) 35px; - text-align: start; - - &:focus { - z-index: 1; - } - } - } - - &:not(.loading) { - .spinner { - display: none; - } - } - - .spinner { - position: absolute; - inset-block-start: calc(50% - 6px); - inset-inline-end: 8px; - - --size: 12px; - } - } - } - - tbody { - tr { - --hover-bg-color: var(--gray-050); - --selected-bg-color: var(--bg-selection-dark); - - &:not(.disabled) { - &:hover { - th, - td { - background-color: var(--hover-bg-color); - } - } - - &:focus { - position: relative; - z-index: 1; - } - - &.sel, - &.active-drop-target { - --text-color: var(--white); - --fg-subtle: var(--white); - --light-text-color: var(--white); - --link-color: var(--white); - --ui-control-color: var(--white); - --focus-ring: var(--focus-ring-light); - - .status-label .status-label-text { - --status-label-text-color: var(--white) !important; - } - - th, - td { - color: var(--white); - background-color: var(--selected-bg-color); - - .chip { - color: var(--white); - - &:not(.chromeless) { - background-color: var( - --custom-sel-bg-color, - var(--gray-600) - ) !important; - } - } - } - - .icon, - .cp-icon, - [data-icon], - [data-icon-after] { - --icon-color: var(--white) !important; - } - } - } - } - - th, - td { - padding-block: 7px; - max-width: 33vw; - } - - td { - &.timestamp { - text-align: end; - vertical-align: bottom; - white-space: nowrap; - color: var(--light-text-color); - } - } - } - - thead + tbody tr, - tr + tr { - th, - td { - border-block-start: 1px solid transparent; - } - } - - tr.sel:not(.draggee) + tr.sel:not(.draggee) { - th, - td { - border-block-start-color: var(--gray-300); - } - } - - &.vuetable { - th.sortable { - &:hover { - color: var(--text-color); - background-color: var(--gray-100); - } - - &.ordered { - background-color: var(--bg-selection-light); - - .sort-icon { - @include mixins.angle(up); - inset-inline-end: var(--m); - inset-block-start: calc(7rem / 16); - } - - &.desc .sort-icon { - transform: rotate(45deg); - inset-block-start: calc((7rem / 16) - (2rem / 16)); - } - } - } - } - } - - // collapsable data tables for small screens - // based on Aaron Gustafson's technique: http://blog.easy-designs.net/archives/2013/02/02/responsive-tables/ - &.collapsed { - width: auto; - - &, - tbody, - tbody tr, - tbody th, - tbody td { - display: block; - border: none; - padding: 0; - text-align: start; - width: auto !important; - white-space: normal; - } - - thead { - display: none; - } - - tbody { - tr { - padding-block: 6px; - padding-inline: 0; - border-block-end: 1px dotted var(--border-hairline); - - &::after { - @include mixins.clearafter; - } - } - - th, - td { - padding-block: 2px !important; - padding-inline: 0 !important; - } - - td { - &:empty { - display: none; - } - } - - [data-title] { - margin-inline-end: 0; - - &::before { - margin-inline-end: 5px; - content: attr(data-title) ':'; - font-weight: bold; - } - - form { - display: inline-block; - } - } - } - } -} - -.datatablesorthelper, -.editabletablesorthelper { - background-color: var(--white); - @include mixins.shadow; -} - -.datatablesorthelper, -.datatablesorthelper .chip, -.datatablesorthelper a { - cursor: move !important; -} - -.datatablesorthelper tr:first-child th, -.datatablesorthelper tr:first-child td { - border-block-start: none !important; -} - -.datatablesorthelper tr:last-child th, -.datatablesorthelper tr:last-child td { - border-block-end: none !important; -} - -.datatablesorthelper th .toggle { - display: none !important; -} - -.chip, -.card, -.matrixblock { - position: relative; - - &:not(.chromeless) { - border-radius: var(--radius-lg); - color: var(--custom-text-color, var(--text-color)); - } - - --custom-border-color: initial; - --custom-titlebar-bg-color: initial; - --custom-bg-color: initial; - --custom-text-color: initial; - --custom-sel-titlebar-bg-color: initial; - --custom-sel-bg-color: initial; - - &:not(.chromeless, .hairline) { - background-color: var(--custom-bg-color, var(--gray-050)); - box-shadow: 0 2px 6px -1px rgb(0 0 0 / 5%); - } - - &:not(.chromeless)::before { - position: absolute; - content: ''; - inset: 0; - border-radius: var(--radius-lg); - box-shadow: inset 0 0 0 1px var(--custom-border-color, var(--gray-200)); - pointer-events: none; - z-index: 1; - } -} - -.chip, -.card { - overflow: clip; // needed for status indicators - - &.sel, - tr.sel &, - li.sel &, - li.active-drop-target &, - .card.sel & { - --text-color: var(--white); - --custom-text-color: var(--white) !important; - --fg-subtle: var(--white); - --light-text-color: var(--white); - --link-color: var(--white); - --ui-control-color: var(--white); - --custom-border-color: rgb(0 0 0 / 10%) !important; - --focus-ring: var(--focus-ring-light); - color: var(--white); - - &:not(.chromeless) { - background-color: var( - --custom-sel-bg-color, - var(--bg-selection-dark) - ) !important; - } - - .icon, - .cp-icon, - [data-icon], - [data-icon-after] { - --icon-color: var(--white) !important; - } - - .thumb { - filter: brightness(0.85); - opacity: 0.75; - } - } -} - -/* chips */ -.chip { - position: relative; - display: inline-flex; - align-items: center; - cursor: default; - user-select: none; - font-weight: normal; - padding-block: 0; - max-width: 100%; - gap: var(--xs); - - &:not(.chromeless) { - padding-inline: var(--s); - } - - &.small { - flex-direction: row; - - --thumb-size: calc(30rem / 16); - - & > .thumb { - margin-inline-end: 2px; - margin-block: 0; - - &.cp-icon { - --thumb-size: 1rem; // 16px - } - } - - &:not(.chromeless) { - min-height: calc(26rem / 16 + 8px); - - & > .thumb { - margin-inline-start: -2px; - } - } - } - - &.large { - flex-direction: column; - - --thumb-size: 120px; - min-width: calc(var(--s) * 2 + var(--thumb-size)); - width: 100%; - - .chip-content { - width: 100%; - } - - &:not(.chromeless) { - padding-block: var(--xs); - } - } - - .chip-content { - display: flex; - flex-direction: row; - align-items: center; - gap: var(--s); - width: 100%; - - .infoicon-container { - margin-inline-start: var(--xs); - } - - .status, - .icon { - margin-inline-end: 0; - } - - .icon { - margin-block: -4px 0; - margin-inline: -1px; - } - - .label { - flex: 1; - } - - .chip-label { - padding-block: var(--xs); - padding-inline: 0; - display: flex; - flex-direction: column; - gap: var(--xs); - - .indicators { - display: flex; - gap: var(--xs); - padding-block: var(--2xs); - } - } - - .chip-actions { - margin-inline-start: auto; - } - } - - &:not(.large) .chip-content .chip-actions { - margin-inline-end: 4px; - } - - &:has(.thumb):not(.large) .chip-content { - min-width: calc(100% - var(--thumb-size) - var(--s)); - } - - .offset-drag-helper & { - background-color: var(--gray-050); - @include mixins.shadow; - } - - & > .thumb { - flex: 0 0 auto; - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: var(--thumb-size); - height: var(--thumb-size); - - &.rounded { - img, - svg { - border: var(--xs) solid transparent; - border-radius: 50%; - } - } - - &.checkered img { - @include mixins.checkered-bg(8px); - } - - img, - svg { - display: block; - flex-shrink: 0; - max-width: 100%; - max-height: 100%; - } - - &:not(.cp-icon) { - img, - svg { - border-radius: var(--radius-sm); - } - } - - svg { - width: 100%; - } - } -} - -.chips, -.cards { - display: flex; - - &:not(.inline-chips) { - flex-direction: column; - } - - li { - max-width: 100%; - } -} - -.cards { - gap: var(--s); -} - -.chips { - align-items: flex-start; - gap: var(--xs); -} - -.inline-chips { - display: flex; - flex-flow: row wrap; - align-items: center; - gap: var(--xs); - - .chip { - margin: 0 !important; - } -} - -.elements.inline-chips.chips-large { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); -} - -/** cards */ -.card { - display: flex; - flex-direction: column; - container-type: inline-size; - - &::after { - border-radius: var(--radius-lg); - } - - & > .card-titlebar { - display: flex; - flex-direction: column; - justify-content: space-between; - padding-inline: var(--m); - background-color: var(--custom-titlebar-bg-color, var(--gray-100)); - border-start-start-radius: var(--radius-lg); - border-start-end-radius: var(--radius-lg); - user-select: none; - - @container (min-width: 200px) { - flex-direction: row; - align-items: center; - min-height: calc(var(--lh) + 10px); - } - - .card-titlebar-label { - font-size: 0.8em !important; - } - - & > .card-actions-container { - display: flex; - align-items: flex-start !important; - position: relative; - } - } - - & > .card-main { - display: grid; - position: relative; - padding-block: var(--s); - padding-inline: var(--m); - gap: var(--s); - border-end-start-radius: var(--radius-lg); - border-end-end-radius: var(--radius-lg); - width: 100%; - overflow: hidden; - - @container (min-width: 200px) { - grid-template-areas: 'content thumb'; - grid-template-columns: 1fr auto; - } - - & > .thumb { - grid-area: thumb; - display: flex; - justify-content: center; - flex: 0 0 120px; - width: 120px; - max-height: 120px; - overflow: hidden; - align-self: start; - - img, - svg { - max-width: 120px; - max-height: 120px; - border-radius: var(--radius-sm); - } - } - - & > .card-content { - grid-area: content; - } - } - - &.thumb-start > .card-main { - grid-template-areas: 'thumb content'; - grid-template-columns: auto 1fr; - } - - .ck-content & { - ul { - padding-inline: 0 !important; - list-style-type: none; - } - } - - .card-content, - .card-content .card-body { - display: flex; - flex-direction: column; - gap: var(--xs); - flex: 1; - } - - .card-content { - flex: 1 0 0 !important; - overflow: hidden; - position: relative; - - --focus-ring: var(--focus-ring-inner); - - .card-heading { - display: flex; - flex-direction: row; - align-items: center; - gap: 5px; - min-height: calc(22rem / 16); - - .label { - font-weight: 600; - } - } - - .card-body { - &:empty { - display: none; - } - - & > .card-attribute-preview:not(:has(> .no-truncate)) { - --max-lines: 2; - margin: 0; - max-height: calc(var(--lh) * var(--max-lines)); - overflow: hidden; - text-wrap: pretty; - } - } - } - - &.sel, - li.sel & { - --text-color: var(--white); - --custom-text-color: var(--white) !important; - --fg-subtle: var(--white); - --light-text-color: var(--white); - --link-color: var(--white); - --ui-control-color: var(--white); - --focus-ring: var(--focus-ring-light); - color: var(--white); - background-color: var( - --custom-sel-bg-color, - var(--bg-selection-dark) - ) !important; - - & > .card-titlebar { - background-color: var(--custom-sel-titlebar-bg-color, var(--gray-600)); - - .icon, - .cp-icon, - [data-icon], - [data-icon-after] { - --icon-color: var(--white) !important; - } - } - - .status-label .status-label-text { - --status-label-text-color: var(--white) !important; - } - } -} - -.width-50 .card-grid, -.width-25 .card-grid { - grid-template-columns: minmax(0, 1fr); -} - -.context-label, -.context-menu-container { - display: inline-flex; - align-items: center; - margin-inline-start: var(--xs); - height: var(--touch-target-size); - padding-block: 0; - padding-inline: var(--s); - font-size: 11px; - font-weight: normal; - text-decoration: none !important; - color: var(--fg-subtle); - border-radius: calc(var(--touch-target-size) / 2); - border: 1px solid var(--border-hairline-medium); -} - -.context-menu-container { - padding-inline-end: 0; - - .menubtn:not(.action-btn) { - margin-inline: 0 -1px; - margin-block: 0; - padding-inline-end: 2px !important; - border-inline-start: 1px solid var(--border-hairline-medium); - border-start-start-radius: 0; - border-start-end-radius: calc(var(--touch-target-size) / 2); - border-end-end-radius: calc(var(--touch-target-size) / 2); - border-end-start-radius: 0; - - &:hover { - border-color: var(--border-hairline-dark) !important; - } - } - - > * { - display: inline-block; - padding-inline-end: var(--s); - } -} - -// fix for context menus that are only children -.context-menu-container .menubtn:not(.action-btn):only-child, -.context-menu-container - .visually-hidden:first-child - + .menubtn:not(.action-btn):last-child { - margin-block: 0; - margin-inline: calc(var(--s) * -1); - border-inline-start: none !important; - border-radius: calc(var(--touch-target-size) / 2) !important; -} - -.chip > .chip-content > .chip-actions, -.card > .card-titlebar > .card-actions-container > .card-actions, -.matrixblock > .actions { - display: flex; - flex-direction: row; - align-items: center; - gap: var(--s); - min-height: calc(22rem / 16); - - &:empty { - display: none; - } - - & > .status { - margin: 0; - } - - & > .btn.chromeless, - & > .action-btn { - padding-inline: 0 !important; - height: var(--touch-target-size); - width: var(--touch-target-size); - margin-block: 0; - margin-inline: -4px; - - &::before { - color: var(--custom-text-color, var(--ui-control-color)); - } - } - - .action-btn { - background-color: transparent; - - &::before { - margin-inline-end: 0 !important; - } - - &:hover, - &:active, - &[aria-expanded='true'] { - backdrop-filter: brightness(90%); - } - } -} - -.chip, -.card { - // prevent double focus ring (chip/card already gets it) - .checkbox::before { - box-shadow: none !important; - } - - .label { - --focus-ring: var(--focus-ring-inner); - display: flex; - align-items: center; - gap: var(--xs); - overflow: hidden; - - .label-link { - flex: 1 1 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - .sel & { - --focus-ring: var(--focus-ring-inner-light); - } - } - - // label links inside cards and chip should be coloured as regular a tags despite not having href attribute - a.label-link { - color: var(--link-color); - } - - .segment::after { - display: inline-flex !important; - position: relative; - inset-block-start: -2px; - margin-inline: 2px 5px; - margin-block: 0; - @include mixins.angle(right, var(--light-text-color), calc(1rem / 16)); - - .sel & { - @include mixins.angle(right, var(--white), calc(1rem / 16)); - } - } - } - - &.error .label .label-link { - color: var(--fg-error); - } -} - -.element-index { - .source-path { - // see https://github.com/craftcms/cms/issues/18876 - position: relative; - z-index: 1; - - background-color: var(--gray-050); - border-radius: 3px; - - --ui-control-bg-color: var(--bg-selection-light); - --ui-control-hover-bg-color: #{color.adjust( - mixins.$lightSelColor, - $lightness: -5% - )}; - --ui-control-active-bg-color: #{color.adjust( - mixins.$lightSelColor, - $lightness: -10% - )}; - - .chevron-btns { - display: inline-flex; - position: relative; - background: mixins.$white; - - --ui-control-height: calc((30rem / 16)); // 1rem == 16px - - &::before { - display: block; - content: ''; - font-size: 0; - position: absolute; - inset-block-start: 0; - width: 0; - height: 0; - inset-inline-end: 0; - border-block-start: calc(var(--ui-control-height) / 2) solid - mixins.$grey050; - border-inline-start: calc(var(--ui-control-height) / 2) solid - transparent; - } - - &::after { - display: block; - content: ''; - font-size: 0; - position: absolute; - inset-block-start: calc(var(--ui-control-height) / 2); - inset-inline-end: 0; - border-block-end: calc(var(--ui-control-height) / 2) solid - mixins.$grey050; - border-inline-start: calc(var(--ui-control-height) / 2) solid - transparent; - } - - .btn { - --ui-control-border-radius: 3px; - } - } - - .btn.settings { - box-shadow: 0 0 0 2px var(--white); - } - } - - &.main { - .source-path { - margin-block: calc(var(--padding) * -1 + 2px) 24px; - margin-inline: calc(var(--padding) * -1 + 2px); - - & + .elements > .tablepane { - margin-block-start: calc(var(--xl) * -1 + 2px); - } - } - - .inline-editing { - textarea, - input[type='email'], - input[type='text'].fullwidth, - input[type='url'], - .link-input { - min-width: 10rem; - } - - .link-input .flex-nowrap, - .icon-picker { - flex-wrap: wrap; - } - - .money-container input[type='text'].fullwidth, - input[type='text'][inputmode].fullwidth { - min-width: 5rem; - width: 5rem; - } - - .lightswitch-outer-container .lightswitch-inner-container span { - overflow: initial; - } - - .selectize.select:not(.fullwidth) { - width: 10rem; - } - - .flex:has(input[type='text'][inputmode].fullwidth) { - flex-wrap: nowrap; - } - } - } - - .elementselectormodal & { - .source-path { - margin-block-end: 2px; - } - } - - &.pane { - overflow: auto; - - .toolbar { - position: relative; - z-index: 2; - margin-block: calc(var(--pane-padding) * -1) var(--pane-padding) !important; - margin-inline: calc(var(--pane-padding) * -1) !important; - border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 - 0; - padding: var(--pane-padding); - box-shadow: 0 1px 0 var(--border-hairline); - background-color: var(--gray-050); - } - - .header { - padding-block: var(--pane-padding); - background-color: transparent; - border-block-end: 1px solid var(--border-hairline); - } - - .elements { - --border-radius: 0; - - .tableview table.data thead { - th, - td { - border-block-end: 1px solid var(--border-hairline); - - &:not(.ordered) { - background-color: transparent; - } - } - } - } - - .footer { - border-radius: 0 0 calc(var(--radius-lg) - 1px) - calc(var(--radius-lg) - 1px) !important; - box-shadow: none; - border-block-start: 1px solid var(--border-hairline); - background: transparent; - } - } - - craft-proxy-scrollbar { - position: sticky; - width: calc(100% + var(--xl) * 2); - margin-inline: calc(var(--xl) * -1); - } -} - -.elements { - position: relative; - - .update-spinner { - inset-block-start: 50%; - } - - &:not(.busy) { - .update-spinner { - display: none; - } - } - - &.busy { - min-height: 72px; - - &::after { - display: block; - content: ''; - font-size: 0; - position: absolute; - z-index: 100; - inset-block-start: 0; - inset-inline-start: calc(var(--pane-padding, 24px) * -1); - width: calc(100% + var(--pane-padding, 24px) + var(--pane-padding, 24px)); - height: 100%; - background: color.adjust(mixins.$white, $alpha: -0.25); - border-radius: var(--radius-lg); - } - } - - .header { - margin-block: calc(var(--xl) * -1 + 2px) var(--xl); - margin-inline: calc(var(--padding) * -1 + 2px); - padding: var(--s); - background-color: var(--gray-050); - box-shadow: none; - border-radius: var(--border-radius, var(--radius-sm)); - - // adjust the margin-block - @media only screen and (width <= 767px) { - margin-block: calc(var(--s) * -1 + 2px) var(--s); - } - - &::after { - content: ''; - } - - .selectallcontainer { - display: flex; - align-items: center; - gap: 5px; - cursor: default; - } - } - - .tableview tr.draggee th, - .tableview tr.draggee td, - .thumbsview li.draggee { - opacity: 0.25; - } - - // table views - - &:not(.datatablesorthelper) .tableview { - margin-block: calc(var(--pane-padding, var(--pane-y-padding-default)) * -1) - calc( - var(--pane-padding, var(--padding)) * -1 + var(--pane-padding, var(--m)) - ); - margin-inline: calc( - var(--pane-padding, var(--pane-x-padding-default)) * -1 - ); - overflow-x: auto; - - .elementselectormodal & { - margin-block: 0; - margin-inline: 0; - } - - th, - td { - height: 34px; - } - - th { - .move, - .toggle { - display: flex; - position: absolute; - justify-content: center; - align-items: center; - inset-block-start: 50%; - transform: translateY(-50%); - margin-inline-start: calc(var(--touch-target-size) * -1); - width: var(--touch-target-size); - height: var(--touch-target-size); - } - - .move { - font-size: 11px; - text-decoration: none; - } - - .toggle { - text-align: center; - padding: 4px; - border-radius: 50%; - } - - .move + .toggle { - margin-inline-start: calc(var(--touch-target-size) * -2); - } - - .enabled-label { - margin-inline-start: var(--xs); - } - } - - tr.disabled { - opacity: 1; - - & > th > div > *, - & > td { - opacity: 0.25; - } - - & > th > div > button.toggle { - opacity: 1; - pointer-events: all; - } - } - } - - // thumbs views - .thumbsview { - display: grid; - gap: var(--s); - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - - li { - position: relative; - margin-inline: 0 1px; - margin-block: 0 1px; - max-width: 226px; - border-radius: var(--radius-lg); - - &:hover { - .chip { - background-color: var(--gray-050); - } - } - - &.sel { - a { - cursor: pointer !important; - - &:hover { - text-decoration: underline; - } - } - } - } - - .chip.large { - width: 100%; - } - - .chip-content { - max-width: 100%; - } - } -} - -.export-form { - position: relative; - - .spinner { - position: absolute; - inset-block-end: 0; - inset-inline-end: -24px; - } -} - -/* structures */ -.structure { - position: relative; - z-index: 1; - - li { - padding-inline-start: 8px; - - &.collapsed > ul { - display: none; - } - - .row:hover > .icon, - &.draghelper > .row .move, - .add.active { - opacity: 1; - } - - &.draghelper { - & > .row { - .add { - opacity: 0; - } - - .move::before { - color: var(--link-color); - } - } - } - - &.draginsertion { - position: relative; - margin-inline: 8px 0; - margin-block: -1px; - padding-inline-start: 0; - height: 2px; - background-color: var(--link-color) !important; - border-inline-start: none; - border-radius: 1px; - } - - .toggle { - position: relative; - z-index: 1; - float: inline-start; - margin-inline: -12px -8px; - margin-block: 10px 0; - padding: 4px; - } - - .row::after { - @include mixins.clearafter; - } - - .move, - .add { - margin-inline: 0 5px; - margin-block: 5px 0; - opacity: 0; - transition: opacity linear 100ms; - } - - .add { - padding-block: 0; - padding-inline: 5px; - - &::before { - content: 'downangle'; - color: var(--border-hairline-dark); - } - - &:not(.disabled):hover::before, - &.active::before { - color: var(--link-color); - } - } - - .checkbox { - float: inline-start; - margin-inline: 7px 0; - margin-block: 7px 0; - } - } - - ul { - margin-inline-start: -3px; - - li { - padding-inline-start: 38px; - background-repeat: no-repeat; - - --background-position-x: 0; - --background-position-y: -6px; - background-position: var(--background-position-x) - var(--background-position-y); - - body.ltr & { - background-image: url('../images/branch.png'); - } - - body.rtl & { - --background-position-x: 100%; - background-image: url('../images/branch_rtl.png'); - } - - &:not(:last-child, .last) { - padding-inline-start: 37px; - border-inline-start: 1px solid var(--gray-200); - - body.ltr & { - --background-position-x: -1px; - } - - body.rtl & { - --background-position-x: calc(100% + 1px); - } - } - - &.draginsertion { - margin-inline-start: 38px; - } - } - } - - .row { - &.draghover { - .chip { - z-index: 2; - border-radius: 15px; - box-shadow: inset 0 0 0 2px var(--link-color); - } - } - - &.droptarget { - border-radius: 5px; - box-shadow: inset 0 0 0 2px var(--link-color); - } - } -} - -.elementselect .elements:not(:empty), -.componentselect .components:not(:empty) { - & + .flex { - margin-block-start: var(--s); - } -} - -// Each chip's `` box is `inline-flex`, so in a block list item it -// lays out in a line box and picks up baseline leading — and the flex baseline -// shifts with the prefix, so a chip with no icon/status renders ~11px taller -// than one with. Making the `li` a flex container blockifies the chip (no line -// box, no baseline), keeping every chip the same height. -.componentselect .chips > li { - display: flex; -} - -/* element select fields */ -.elementselect { - display: block; - position: relative; - min-height: 34px; - - .flex, - .btn { - clear: both; - } - - .structure { - .chip { - margin-block-start: var(--xs); - } - - & > li { - padding-inline-start: 0; - } - - ul { - margin-inline-start: 14px; - - li { - --background-position-y: 0; - } - } - } -} - -.elementselect__search-input-wrapper, -.tagselect__input-wrapper { - position: relative; - z-index: 1; - width: 12em; - - .text { - padding-inline-end: 30px !important; - } - - .spinner { - position: absolute; - inset-block-start: 0; - inset-inline-end: 5px; - } - - &.icon.add::before { - content: none; - } - - svg { - width: calc(14rem / 16); - height: calc(14rem / 16); - fill: var(--ui-control-color); - } -} - -/* nested element cards */ -.nested-element-cards { - display: flex; - flex-direction: column; - gap: var(--s); - - & > .pane { - margin: 0; - } -} - -/* editable tables */ -table.editable { - border-radius: var(--radius-lg); - border: var(--input-border); - color: var(--text-color); - - th, - td.heading, - td.action { - color: var(--fg-subtle); - font-weight: normal; - - button:not(.lightswitch), - a { - display: inline-flex; - width: var(--touch-target-size); - height: var(--touch-target-size); - align-items: center; - justify-content: center; - } - - .flex { - gap: 0; - } - } - - td.action { - padding-inline: var(--xs) !important; - vertical-align: middle; - - &:has(+ td.action) { - padding-inline-end: 0 !important; - } - - & + td.action { - padding-inline-start: 0 !important; - } - } - - thead, - tbody { - tr { - th { - padding-block: 6px; - padding-inline: 10px; - } - } - } - - thead:first-child, - tbody:first-child, - colgroup + thead, - colgroup + tbody { - tr:first-child { - th, - td { - &:first-child { - border-start-start-radius: var(--radius-lg); - - textarea, - input.text { - border-start-start-radius: calc(var(--radius-lg) - 1px); - } - } - - &:last-child { - border-start-end-radius: var(--radius-lg); - - textarea, - input.text { - border-start-end-radius: calc(var(--radius-lg) - 1px); - } - } - } - } - } - - thead, - tbody { - &:last-child tr:last-child { - th, - td { - &:first-child { - border-end-start-radius: var(--radius-lg); - - textarea, - input.text { - border-end-start-radius: calc(var(--radius-lg) - 1px); - } - } - - &:last-child { - border-end-end-radius: var(--radius-lg); - - textarea, - input.text { - border-end-end-radius: calc(var(--radius-lg) - 1px); - } - } - } - } - } - - // With no body rows, the table's own border closes off the header - thead:not(:has(~ :is(tbody, tfoot) > tr)) tr:last-child th { - border-block-end: 0; - } - - thead { - tr { - th { - border-block-end: 1px solid var(--border-hairline); - font-family: inherit; // for .code - font-size: 0.8em !important; // ! for .code - font-weight: 500; - line-height: 1.4; - - &.has-info { - padding-inline-end: calc(15px + 1em); - } - - span.info { - position: absolute; - margin-inline-start: 5px; - } - } - } - } - - tbody { - tr { - &:not(:first-child) { - th, - td { - border-block-start: 1px solid var(--border-hairline); - } - } - - td:not(:first-child), - th ~ td:not(.hidden) ~ td { - border-inline-start: 1px solid var(--border-hairline); - } - - th { - font-weight: 500; - - // Set a dark border-left for the first that follows a , if there is one. - // This is a ridiculous CSS hack since there's no operator/pseudo-class that mimics jQuery's next(selector) function. - // If there was it could have been as simple as: th ??? td:not(.hidden) { dark left border } - // kudos to Mark Huot for coming up with it! - & ~ td:not(:first-child) { - border-inline-start: 1px solid #dbdddf; - } - } - - td { - vertical-align: top; - background-color: var(--input-bg); - padding-block: 4px; - padding-inline: 10px; - - &.focus { - position: relative; - box-shadow: inset 0 0 0 1px var(--border-hairline); - } - - &.textual { - padding: 0; - - textarea { - resize: none; - } - - pre { - text-align: start; - white-space: pre-wrap; - } - } - - &.lightswitch-cell { - padding-block: 9px; - - .lightswitch { - display: block; - margin-block: 0; - margin-inline: auto; - } - } - - &.checkbox-cell { - padding-block: 10px; - - .checkbox-wrapper { - display: block; - margin-block: -2px 0; - margin-inline: auto; - width: 16px; - height: 16px; - } - } - - &.icon-cell { - padding-block: 6px; - } - - &.error { - box-shadow: inset 0 0 0 1px var(--fg-error); - } - - &.disabled { - position: relative; - opacity: 1; - - &::after { - content: ''; - font-size: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - background-color: color.adjust(mixins.$grey050, $alpha: -0.25); - user-select: none; - } - } - - &.action { - padding-block: 4px; - padding-inline: 7px; - - & + td.action { - border-inline-start: none; - padding-inline-start: 0; - } - } - - .flex > * { - margin-block-end: 0; - } - } - } - - textarea, - textarea.text, - input.text, - pre { - display: block; - width: 100%; - border: none; - box-shadow: none; - border-radius: 0; - padding-block: 7px; - padding-inline: 10px; - line-height: 20px; - background-color: transparent; - overflow: hidden; - transition: none; - box-sizing: border-box; - } - - .color-container { - display: block; - position: relative; - - & > .color, - .color-input { - margin-block-end: 0; - } - - & > .color { - position: absolute; - inset-block-start: 10px; - inset-inline-start: 10px; - z-index: 1; - } - - .color-hex-indicator { - inset-inline-start: 32px; - } - - .color-input { - padding-inline-start: calc(32px + 1em); - } - } - - .datewrapper, - .timewrapper { - display: block; - width: calc(100% - 29px); - - .text + div[data-icon] { - inset-block-start: 6px; - inset-inline-start: 10px; - } - } - } - - &:not(.static) { - td.textual { - cursor: text; - } - } - - & + .btn.add { - display: block; - width: 100%; - } - - &:not(.hidden) + .btn.add { - border-block-start-width: 0; - border-radius: 0 0 var(--radius-md) var(--radius-md); - } -} - -.border-box, -.shadow-box { - & + .buttons { - margin-block-start: 7px; - } -} - -/* ---------------------------------------- -/* Nav -/* ---------------------------------------- */ - -ul.tree, -.tree ul { - margin-inline-start: 20px; -} - -.tree li .toggle { - margin-inline: -15px 0; - margin-block: 7px 0; -} - -/* status indicators */ -.status { - flex: 0 0 auto; - display: inline-block; - position: relative; - width: calc(12rem / 16); - height: calc(12rem / 16); - border-radius: 100%; - box-sizing: border-box; - background-clip: border-box; - - body.use-shapes & { - &.all { - rotate: 45deg; - background-image: linear-gradient(30deg, #184cef, #e5422b); - } - - &.pending { - background-color: transparent; - border-style: solid; - border-width: 0 5px 10px; - border-color: transparent transparent var(--bg-pending) transparent; - border-radius: 1px; - } - - &.all, - &.off, - &.suspended, - &.expired { - border-radius: 2px; - transform: scale(90%); - } - } -} - -.status:not(.on, .live, .active, .enabled, .all) { - &:not(.pending, .warning, .off, .suspended, .expired) { - &:not(.light, .gray, .red, .orange, .amber, .yellow) { - &:not(.lime, .green, .emerald, .teal, .cyan, .sky) { - &:not(.blue, .indigo, .violet, .purple, .fuchsia) { - &:not(.pink, .rose, .grey, .black, .disabled) { - &:not(.inactive) { - border-color: var(--ui-control-color); - } - } - } - } - } - } -} - -.status.all { - background-image: linear-gradient(60deg, #184cef, #e5422b); - background-origin: border-box; -} - -.status.on, -.status.live, -.status.active, -.status.enabled { - background-color: var(--bg-enabled); -} - -.status.red, -.bg-red, -.status.off, -.status.suspended, -.status.expired { - background-color: var(--bg-disabled); -} - -.status.warning { - background-color: var(--fg-warning); -} - -.status.orange, -.bg-orange, -.status.pending { - background-color: var(--bg-pending); -} - -.status.amber, -.bg-amber { - background-color: var(--amber-500); -} - -.status.yellow, -.bg-yellow { - background-color: var(--yellow-500); -} - -.status.lime, -.bg-lime { - background-color: var(--lime-500); -} - -.status.green, -.bg-green { - background-color: var(--green-600); -} - -.status.emerald, -.bg-emerald { - background-color: var(--emerald-500); -} - -.status.teal, -.bg-teal, -.status.turquoise, -.bg-turquoise { - background-color: var(--bg-enabled); -} - -.status.cyan, -.bg-cyan { - background-color: var(--cyan-500); -} - -.status.sky, -.bg-sky { - background-color: var(--sky-500); -} - -.status.blue, -.bg-blue { - background-color: var(--blue-600); -} - -.status.indigo, -.bg-indigo { - background-color: var(--indigo-500); -} - -.status.violet, -.bg-violet { - background-color: var(--violet-500); -} - -.status.purple, -.bg-purple { - background-color: var(--purple-500); -} - -.status.fuchsia, -.bg-fuchsia { - background-color: var(--fuchsia-500); -} - -.status.pink, -.bg-pink { - background-color: var(--pink-500); -} - -.status.rose, -.bg-rose { - background-color: var(--rose-500); -} - -.status.light { - background-color: var(--gray-100); -} - -.status.white, -.bg-white { - background-color: var(--white); -} - -.status.black, -.bg-black { - background-color: var(--gray-800); -} - -.status.gray, -.bg-gray, -.status.grey, -.bg-grey { - background-color: var(--gray-300); -} - -.status.disabled, -.status.inactive { - --outline-color: var(--gray-500); - box-shadow: inset 0 0 0 2px var(--outline-color); - - .sel & { - --outline-color: var(--gray-200); - } -} - -.status.white { - opacity: 1; -} - -$statusLabelColorShade: '900'; -$statusLabelBgShade: '500'; - -/* status labels */ -.status-label { - position: relative; - display: inline-flex; - align-items: start; - justify-content: center; - gap: var(--xs); - padding-block: var(--xs); - padding-inline: var(--xs) var(--s); - line-height: 1.1; - font-size: calc(11rem / 16); - background-color: rgb(from var(--status-label-bg-color) r g b / 15%); - border-radius: calc(11rem / 16); - font-weight: 500; - text-transform: uppercase; - - .status, - .cp-icon { - position: relative; - margin: 0; - } - - .status-label-text { - color: var(--status-label-text-color); - } - - &.red { - --status-label-text-color: var(--red-#{$statusLabelColorShade}); - --status-label-bg-color: var(--bg-disabled); - } - - &.amber { - --status-label-text-color: var(--amber-#{$statusLabelColorShade}); - --status-label-bg-color: var(--amber-#{$statusLabelBgShade}); - } - - &.orange { - --status-label-text-color: var(--orange-#{$statusLabelColorShade}); - --status-label-bg-color: var(--bg-pending); - } - - &.yellow { - --status-label-text-color: var(--yellow-#{$statusLabelColorShade}); - --status-label-bg-color: var(--yellow-#{$statusLabelBgShade}); - } - - &.lime { - --status-label-text-color: var(--lime-#{$statusLabelColorShade}); - --status-label-bg-color: var(--lime-#{$statusLabelBgShade}); - } - - &.green { - --status-label-text-color: var(--green-#{$statusLabelColorShade}); - --status-label-bg-color: var(--green-#{$statusLabelBgShade}); - } - - &.emerald { - --status-label-text-color: var(--emerald-#{$statusLabelColorShade}); - --status-label-bg-color: var(--emerald-#{$statusLabelBgShade}); - } - - &.teal, - &.turquoise { - --status-label-text-color: var(--teal-#{$statusLabelColorShade}); - --status-label-bg-color: var(--bg-enabled); - } - - &.cyan { - --status-label-text-color: var(--cyan-#{$statusLabelColorShade}); - --status-label-bg-color: var(--cyan-#{$statusLabelBgShade}); - } - - &.sky { - --status-label-text-color: var(--sky-#{$statusLabelColorShade}); - --status-label-bg-color: var(--sky-#{$statusLabelBgShade}); - } - - &.blue { - --status-label-text-color: var(--blue-#{$statusLabelColorShade}); - --status-label-bg-color: var(--blue-#{$statusLabelBgShade}); - } - - &.indigo { - --status-label-text-color: var(--indigo-#{$statusLabelColorShade}); - --status-label-bg-color: var(--indigo-#{$statusLabelBgShade}); - } - - &.violet { - --status-label-text-color: var(--violet-#{$statusLabelColorShade}); - --status-label-bg-color: var(--violet-#{$statusLabelBgShade}); - } - - &.purple { - --status-label-text-color: var(--purple-#{$statusLabelColorShade}); - --status-label-bg-color: var(--purple-#{$statusLabelBgShade}); - } - - &.fuchsia { - --status-label-text-color: var(--fuchsia-#{$statusLabelColorShade}); - --status-label-bg-color: var(--fuchsia-#{$statusLabelBgShade}); - } - - &.pink { - --status-label-text-color: var(--pink-#{$statusLabelColorShade}); - --status-label-bg-color: var(--pink-#{$statusLabelBgShade}); - } - - &.rose { - --status-label-text-color: var(--rose-#{$statusLabelColorShade}); - --status-label-bg-color: var(--rose-#{$statusLabelBgShade}); - } - - &.light { - --status-label-text-color: var(--gray-#{$statusLabelColorShade}); - --status-label-bg-color: var(--gray-#{$statusLabelBgShade}); - } - - &.gray, - &.grey { - --status-label-text-color: var(--gray-#{$statusLabelColorShade}); - --status-label-bg-color: var(--gray-#{$statusLabelBgShade}); - } - - &.black { - --status-label-text-color: var(--black); - --status-label-bg-color: var(--gray-1000); - } -} - -.card.sel, -li.sel .card, -table.data tbody tr:not(.disabled).sel, -table.data tbody tr:not(.disabled).active-drop-target { - .status-label.gray { - --status-label-bg-color: var(--white); - - &::before { - opacity: 0.075; - } - } -} - -/* colors */ -.icon, -.cp-icon, -[data-icon], -[data-icon-after] { - &.warning { - --icon-color: var(--fg-warning); - } - - &.red { - --icon-color: var(--bg-disabled); - } - - &.orange { - --icon-color: var(--bg-pending); - } - - &.amber { - --icon-color: var(--amber-500); - } - - &.yellow { - --icon-color: var(--yellow-500); - } - - &.lime { - --icon-color: var(--lime-500); - } - - &.green { - --icon-color: var(--green-500); - } - - &.emerald { - --icon-color: var(--emerald-500); - } - - &.teal { - --icon-color: var(--bg-enabled); - } - - &.cyan { - --icon-color: var(--cyan-500); - } - - &.sky { - --icon-color: var(--sky-500); - } - - &.blue { - --icon-color: var(--blue-600); - } - - &.indigo { - --icon-color: var(--indigo-500); - } - - &.violet { - --icon-color: var(--violet-500); - } - - &.purple { - --icon-color: var(--purple-500); - } - - &.fuchsia { - --icon-color: var(--fuchsia-500); - } - - &.pink { - --icon-color: var(--pink-500); - } - - &.rose { - --icon-color: var(--rose-500); - } - - &.white { - --icon-color: var(--white); - } - - &.black { - --icon-color: var(--gray-800); - } - - &.gray { - --icon-color: var(--gray-300); - } -} - -.warning, -.red, -.orange, -.amber, -.yellow, -.lime, -.green, -.emerald, -.teal, -.cyan, -.sky, -.blue, -.indigo, -.violet, -.purple, -.fuchsia, -.pink, -.rose, -.white, -.black, -.gray { - &[data-icon]::before, - &[data-icon-after]::after { - color: var(--icon-color) !important; - } -} - -/* ---------------------------------------- -/* Progress bar -/* ---------------------------------------- */ - -.progressbar { - border-radius: 6px; - border: 2px solid var(--gray-700); - padding: 2px; - position: absolute; - inset-inline-start: 20%; - width: 60%; - z-index: 1000; -} - -.progressbar-inner { - border-radius: 2px; - height: 4px; - background-color: var(--gray-700); -} - -.progressbar:not(.pending) .progressbar-inner { - width: 0; - transition: width linear 100ms; -} - -.progressbar.pending .progressbar-inner { - @include striped-bg(17.6777px, var(--gray-700)); // sqrt(25^2 / 2); - body.ltr & { - animation-name: pendingprogress-ltr; - } - - body.rtl & { - animation-name: pendingprogress-rtl; - } - - animation-timing-function: linear; - animation-duration: 250ms; - animation-iteration-count: infinite; -} - -@keyframes pendingprogress-ltr { - from { - background-position: 0; - } - - to { - background-position: 25px; - } -} - -@keyframes pendingprogress-rtl { - from { - background-position: 0; - } - - to { - background-position: -25px; - } -} - -.elementselect .progress-shade { - background-color: color.adjust(mixins.$white, $alpha: -0.2); - width: 100%; - height: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - display: none; -} - -.elementselect.uploading { - position: relative; -} - -.elementselect.uploading .progress-shade { - display: block; - z-index: 2; -} - -/* ---------------------------------------- -/* Panes, Modals and HUDs -/* ---------------------------------------- */ - -.pane { - @include mixins.pane; - position: relative; - margin-block: 14px; - margin-inline: 0; - padding: var(--pane-padding); - border: var(--pane-border); - border-radius: var(--pane-border-radius); - overflow-wrap: break-word; - box-sizing: border-box; - - &.secondary { - border: var(--secondary-pane-border); - border-radius: var(--secondary-pane-border-radius); - background: var(--secondary-pane-bg); - box-shadow: var(--secondary-pane-shadow); - } - - .pane &, - .slideout &, - #content & { - border: 1px solid var(--border-hairline); - background: var(--secondary-pane-bg); - box-shadow: none; - } - - &.dashed { - background-color: transparent !important; - box-shadow: none; - border: 1px dashed var(--border-hairline-medium) !important; - } - - &.hairline, - &:is(fieldset) { - background-color: transparent !important; - box-shadow: none; - border: 1px solid #{color.adjust(mixins.$inputColor, $alpha: -0.75)} !important; - } - - &.no-border, - &.chromeless { - border: none !important; - } - - &.chromeless { - background-color: transparent !important; - box-shadow: none; - } - - &.tip, - &.warning { - padding-inline-start: 50px; - - &::before { - @include mixins.icon; - opacity: 1; - position: absolute; - inset-block-start: var(--pane-padding); - inset-inline-start: 18px; - font-size: 18px; - width: 24px; - } - - &.dismissible { - padding-inline-end: 48px; - } - - .tip-dismiss-btn { - position: absolute; - inset-block-start: 23px; - inset-inline-end: 18px; - - & + p { - margin-block-start: 0; - } - } - } - - &.tip { - border-color: var(--sky-600) !important; - background-color: var(--sky-050) !important; - color: var(--fg-notice); - - &::before { - content: 'lightbulb'; - color: var(--fg-notice); - } - } - - &.warning { - border-color: var(--amber-600) !important; - background-color: var(--amber-050) !important; - color: var(--fg-warning); - - &::before { - content: 'alert'; - color: var(--fg-warning); - } - } - - &.padding-xs { - --pane-padding: var(--xs); - } - - &.padding-s { - --pane-padding: var(--s); - } - - &.padding-m { - --pane-padding: var(--m); - } - - &.padding-l { - --pane-padding: var(--l); - } - - &.loading { - min-height: 200px; - - &::after { - display: block; - content: ''; - font-size: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: -24px; - width: calc(100% + #{24 + 24}px); - height: 100%; - } - } - - &:is(fieldset) > legend { - font-weight: 600; - color: var(--light-text-color); - } - - hr { - margin-block: var(--pane-padding); - margin-inline: calc(var(--pane-padding) * -1); - } -} - -.pane-header { - margin-block: var(--neg-padding) var(--padding); - margin-inline: var(--neg-padding); - padding-block: 5px 6px; - padding-inline: var(--padding); - min-height: 45px; - box-sizing: border-box; - box-shadow: inset 0 -1px 0 0 color.adjust(mixins.$grey300, $alpha: -0.75); - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - background-color: var(--gray-050); - - .spinner { - margin: 0 !important; - } -} - -.pane-tabs { - display: flex; - flex-direction: row; - align-items: center; - margin-block: -5px -6px; - margin-inline: calc(var(--padding) * -1); - - &:first-child { - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - overflow: hidden; - } - - [role='tablist'] { - flex: 1; - display: flex; - flex-direction: row; - overflow-x: auto; - scrollbar-width: none; - - &::-webkit-scrollbar { - display: none; - } - - &.scrollable { - body.ltr & { - mask-image: linear-gradient( - to left, - rgb(0 0 0 / 0%), - rgb(0 0 0 / 100%) 24px - ); - } - - body.rtl & { - mask-image: linear-gradient( - to right, - rgb(0 0 0 / 0%), - rgb(0 0 0 / 100%) 24px - ); - } - } - - [role='tab'] { - --tab-label-color: var(--light-text-color); - - &.error { - --highlight-color: var(--fg-error) !important; - --tab-label-color: var(--fg-error) !important; - } - - &, - .tab-label { - border-radius: 2px 2px 0 0; - } - - .tab-label { - display: flex; - flex-direction: row; - align-items: center; - position: relative; - padding-block: 0; - padding-inline: var(--padding); - white-space: nowrap; - height: 45px; - } - - &:hover { - text-decoration: none; - } - - &:focus-visible { - .tab-label { - box-shadow: var(--focus-ring-inner); - } - } - - &:not(.sel) { - color: var(--custom-text-color, var(--tab-label-color)); - - &:hover { - backdrop-filter: brightness(95%); - } - } - - &.sel { - --highlight-color: var(--gray-500); - --tab-label-color: var(--text-color); - position: relative; - z-index: 1; - cursor: default; - box-shadow: - inset 0 2px 0 var(--custom-text-color, var(--highlight-color)), - 0 0 0 1px mixins.$hairlineColor, - 0 2px 12px var(--custom-sel-tab-shadow-color, var(--gray-200)); - color: var(--tab-label-color); - background-color: var(--white) !important; - } - - span[data-icon] { - margin-inline-start: 4px; - } - } - } - - &#tabs:first-child { - [role='tablist'] { - [role='tab'] { - &:first-child { - &, - .tab-label { - border-start-start-radius: var(--radius-lg); - } - } - } - } - } - - .menubtn { - margin-block: 0; - margin-inline: var(--xl); - - &.error { - span[data-icon] { - margin-inline-end: 2px; - } - } - } -} - -/* detail sidebars */ -.details { - --spacing: var(--l); - padding-block: 0 var(--spacing); - padding-inline: var(--padding); - - .meta, - .field, - hr { - margin-inline: var(--neg-padding); - } - - .meta { - margin-block-end: var(--spacing); - - &:not(.read-only) { - background-color: var(--gray-050) !important; - } - - &.read-only { - color: var(--fg-subtle); - - & > .data { - min-height: auto; - - & > .heading, - & > .value { - padding-block: 6px; - } - - &:first-child { - & > .heading, - & > .value { - padding-block-start: 0; - } - } - - &:last-child { - & > .heading, - & > .value { - padding-block-end: 0; - } - } - } - } - - &.warning { - padding-block: var(--m); - color: var(--text-color) !important; - background-color: var(--yellow-050) !important; - box-shadow: - 0 0 0 1px var(--yellow-300), - 0 2px 12px color.adjust(mixins.$grey200, $alpha: -0.5); - - p { - margin-block-end: 5px; - } - - .btn { - background-color: var(--yellow-300); - - &:hover, - &:focus { - background-color: color.adjust(mixins.$yellow300, $lightness: -10%); - } - - &:active, - &[aria-expanded='true'] { - background-color: color.adjust(mixins.$yellow300, $lightness: -15%); - } - } - } - - & > .field, - & > .data { - margin-block: 0 !important; - margin-inline: var(--neg-padding) !important; - - & > .heading > label, - & > .heading { - color: var(--gray-600); - } - } - - & > .field > .status-badge { - inset-inline-start: 0; - } - - .text::placeholder, - .datewrapper .text + div[data-icon], - .timewrapper .text + div[data-icon] { - color: var(--gray-500); - } - - .ui-datepicker { - margin-inline: -8px 0; - margin-block: 0; - } - } - - hr { - margin-block: var(--spacing); - margin-inline: 0; - border-block-start-color: var(--border-hairline); - } - - @include mixins.placeholder-styles(var(--gray-500)); - - .text { - background-color: transparent !important; - resize: none; - } - - .data { - overflow-wrap: break-word; - } - - & > .field .heading, - & > fieldset > legend { - margin-block: 0 var(--s); - margin-inline: 0; - } - - // Line pane headings up with the labels within the panes - & > fieldset > legend, - & > .field > .heading > label.h6 { - margin-inline-start: calc(var(--m) - var(--padding)); - } - - & > .field > .heading > label, - & > fieldset > legend { - font-weight: normal; - color: var(--gray-600); - } - - & > .field > .heading > label { - margin: 0; - } - - & > .field { - margin-block: 0 var(--spacing); - margin-inline: 0; - - & > .heading { - margin-block-start: 0; - } - - & > .input > .text.fullwidth { - margin-block: 0; - margin-inline: var(--neg-padding); - padding-inline: var(--m); - border: none; - background-color: var(--gray-050) !important; - width: calc(100% + var(--padding) + var(--padding)); - } - } - - /* - When there's no .meta container (which can occur when editing a matrix block) - make sure the sidebar aligns with the top of the content area. - */ - & > fieldset:not(:first-child) { - margin-block: var(--spacing) !important; - margin-inline: 0 !important; - } - - & > .text { - border-radius: var(--radius-lg); - margin-block-end: var(--spacing); - - &:not(:focus) { - border-color: color.adjust(mixins.$inputColor, $alpha: -0.6); - } - } -} - -/* meta panes */ -$min2ColWidth: 400px; - -.meta { - padding-block: 0; - padding-inline: var(--padding); - overflow: visible; - - --heading-width: 150px; - - // Space between the checkmark/plus icons and the site names in the element editor’s Sites pane - --site-checkmark-gap: var(--s); - - #details & { - --heading-width: 132px; - } - - &, - & > .flex-fields { - & > .field, - & > .data { - display: flex; - min-height: 44px; - box-sizing: border-box; - flex-wrap: wrap; // for error lists - justify-content: space-between; - align-items: stretch; - margin-block: 0 !important; - margin-inline: var(--neg-padding) !important; - padding-block: 0; - transition: - padding-inline-start linear 100ms, - padding-inline-end linear 100ms; - - &.nested { - padding-inline-start: 38px; - - & > .heading { - padding-inline-start: 10px; - } - } - - &.add { - &::before { - position: absolute; - inset-block-start: var(--m); - inset-inline-start: 0; - width: 48px; - text-align: end; - @include mixins.icon; - content: 'plus' / ''; - color: var(--light-text-color); - } - - .input { - width: 100%; - } - - // Line the “Add a site” select up with the site names in the element editor’s Sites pane, - // with the plus icon in the same column as the current site’s checkmark - &.add-site-field { - padding-inline-start: calc( - var(--m) + 14rem / 16 + var(--site-checkmark-gap) - var(--s) - ); - - &::before { - inset-inline-start: var(--m); - width: calc(14rem / 16); - text-align: start; - } - - @media screen and (width < $min2ColWidth) { - padding-inline-start: calc(14rem / 16 + var(--site-checkmark-gap)); - - &::before { - inset-inline-start: 10px; - } - } - } - } - - & > .heading { - margin: 0; - - @media screen and (min-width: $min2ColWidth) { - flex: 0 0 var(--heading-width); - line-height: 18px; - } - } - - // Sites in the element editor’s Sites pane, with a checkmark beside the current site - // (like the site menu in the breadcrumbs) - &.element-site-field { - padding-inline-start: 0; - - @media screen and (min-width: $min2ColWidth) { - & > .heading { - padding-inline-start: var(--m); - } - } - - & > .heading > label { - position: relative; - padding-inline-start: calc(14rem / 16 + var(--site-checkmark-gap)); - } - } - - &.element-site-field.sel > .heading > label::before { - @include mixins.icon; - position: absolute; - inset-block-start: 50%; - inset-inline-start: 0; - transform: translateY(-50%); - font-size: calc(14rem / 16); - content: 'check' / ''; - } - - // Undo buttons for newly-added sites in the element editor’s Sites pane - & > .heading:has(> .remove-site-btn) { - display: flex; - align-items: center; - gap: var(--s); - - & > .remove-site-btn { - margin-inline-start: auto; - } - } - - #details &, - .so-sidebar.details & { - &.lightswitch-field > .heading, - &.element-site-field > .heading { - flex: 1; - border-inline-end: none; - } - } - - & > .input { - display: flex; - align-items: center; - - .flex { - flex-wrap: nowrap; - - & > * { - margin-block-end: 0; - } - } - } - } - - & > .field > .heading { - @media screen and (width < $min2ColWidth) { - padding-block-start: var(--xs); - padding-inline: 10px; - } - - @media screen and (min-width: $min2ColWidth) { - padding-block: 12px; - padding-inline: var(--m) var(--s); - border-inline-end: 1px solid var(--border-hairline); - } - - & > .copytextbtn { - display: none; - } - } - - & > .data > .heading { - padding-block: var(--s); - padding-inline: var(--m) 0; - } - - & > .field > .heading > label, - & > .data > .heading { - color: var(--fg-subtle); - } - - & > .field > .input, - & > .data > .value { - padding-block: var(--s); - width: 100%; - - @media screen and (width < $min2ColWidth) { - padding-inline: 10px; - } - - @media screen and (min-width: $min2ColWidth) { - width: calc(100% - var(--heading-width)); - padding-inline: var(--s) var(--m); - } - - // Fixes https://github.com/craftcms/cms/issues/16473 - // h/t https://stackoverflow.com/a/66689926/1688568 - > * { - min-width: 0; - } - } - - & > .data > .value { - display: flex; - align-items: center; - width: calc(100% - (var(--heading-width) + 6px)); - - & > [data-icon='draft'] { - margin-block-start: -2px; - margin-inline-end: 8px; - } - } - - & > .field.lightswitch-field > .input { - padding-inline: 10px; - - #details &, - .so-sidebar.details & { - flex: 0; - width: auto; - } - } - - & > .field { - &.has-errors { - border: 1px solid var(--fg-error) !important; - - &:first-child { - border-start-start-radius: var(--radius-lg); - border-start-end-radius: var(--radius-lg); - } - - &:last-child { - border-end-start-radius: var(--radius-lg); - border-end-end-radius: var(--radius-lg); - } - - & + .field { - border-block-start: none !important; - } - } - - & > .heading { - & > label, - & > legend { - font-weight: normal; - } - } - - & > .input { - &, - & > .flex, - & > .flex > .textwrapper, - & > .datewrapper, - & > .timewrapper, - & > .datetimewrapper > .datewrapper, - & > .datetimewrapper > .timewrapper { - & > .text { - display: block; - margin-block: calc(var(--s) * -1); - padding-block: 12px; - border-radius: 0; - background-color: transparent; - border: none !important; - - @media screen and (width < $min2ColWidth) { - margin-inline: -10px; - padding-inline: 10px; - } - - @media screen and (min-width: $min2ColWidth) { - margin-inline: calc(var(--s) * -1) 0; - padding-inline-start: var(--s); - } - - &:placeholder-shown + div[data-icon] { - inset-inline-start: 1px; - } - } - } - - & > .datetimewrapper { - width: calc(100% - 3px); - } - - & > .datewrapper, - & > .timewrapper, - & > .datetimewrapper > .datewrapper, - & > .datetimewrapper > .timewrapper { - background-color: transparent; - } - - & > .datetimewrapper { - gap: 0; - - & > .datewrapper { - width: 55%; - } - - & > .timewrapper { - width: 45%; - } - } - - & > .datewrapper, - & > .timewrapper { - display: block; - width: 100%; - } - } - - & > ul.errors { - margin: 0; - padding-block: 0 6px; - padding-inline: 10px; - width: 100%; - list-style-type: none; - - @media screen and (min-width: $min2ColWidth) { - padding-inline: var(--m); - } - } - - & > .clear-btn { - margin-inline-end: var(--neg-padding); - } - } - } - - & > .field:not(:first-child, .first-child), - & > .flex-fields + .field:not(.first-child) { - border-block-start: 1px solid var(--border-hairline); - } - - & > .flex-fields { - h2, - blockquote.note { - margin-block: 0 !important; - margin-inline: -24px !important; - padding-block: 14px; - padding-inline: 24px; - background-color: color.adjust(mixins.$grey050, $lightness: -2%); - } - - blockquote.note { - border-radius: 0; - border: none; - } - - hr { - margin-block: 0; - margin-inline: -24px; - } - } -} - -// The element editor’s Sites pane lists its sites without hairlines or padding between them -// (the “Add a site” field keeps its hairline) -.meta.element-sites-pane > .element-site-field { - min-height: auto; - border-block-start: none; - - & > .heading { - padding-block: var(--xs); - } - - &:first-child > .heading { - padding-block-start: 12px; - } - - &:not(:has(+ .element-site-field:not(.hidden))) > .heading { - padding-block-end: 12px; - } - - // Status toggles - & > .input { - padding-block: var(--xs); - } - - &:first-child > .input { - padding-block-start: 12px; - } - - &:not(:has(+ .element-site-field:not(.hidden))) > .input { - padding-block-end: 12px; - } - - // Keep undo buttons close to the status toggles beside them - &.lightswitch-field:has(> .heading > .remove-site-btn) { - & > .heading { - padding-inline-end: 0; - } - - & > .input { - padding-inline-start: var(--xs); - } - } - - // Disclosure toggle for elements that are saved to multiple sites - // (with the chevron in the same column as the current site’s checkmark) - & > .heading > .element-sites-toggle { - position: relative; - padding-inline-start: calc(14rem / 16 + var(--site-checkmark-gap)); - cursor: pointer; - - &::before { - position: absolute; - inset-block-start: calc(50% - 5px); - inset-inline-start: 3px; - } - } -} - -.meta > .field > .input > .select { - display: block; - margin-block: calc(var(--s) * -1); - margin-inline: 0; - width: 100%; - border-radius: 0; - box-shadow: none; - background-color: transparent; - - & + .spinner { - position: absolute; - inset-block-start: calc(50% - 17px); - inset-inline-end: -24px; - } - - select { - padding-inline: 0 12px; - padding-block: var(--s); - width: 100%; - background-color: transparent; - } -} - -.meta > .field > .input > .custom-select { - display: block; - margin-block: calc(var(--s) * -1); - margin-inline: 0; - width: 100%; - border-radius: 0; - box-shadow: none; - background-color: transparent; - - .menubtn:not(.action-btn) { - justify-content: flex-start; - width: 100%; - background-color: transparent; - overflow: hidden; - - // button padding + icon size + inset-inline-end - padding-inline-end: calc(var(--button-padding) + calc(7rem / 16) + 11px); - - &::after { - position: absolute; - inset-block-start: calc(50% - 5px); - inset-inline-end: 11px; - } - - .inline-flex { - overflow: hidden; - } - } - - .label { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.body { - position: relative; -} - -/* inline asset previews */ - -.preview-thumb-container { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - height: 190px; - background-color: var(--gray-900); - margin-block: 0 var(--spacing); - margin-inline: var(--neg-padding); - - &.checkered img { - background-color: var(--white); - @include mixins.checkered-bg(17px); - } - - &.loading { - &::after { - content: ''; - font-size: 0; - display: block; - position: absolute; - width: 100%; - height: 100%; - inset-inline-start: 0; - inset-block-start: 0; - background-color: color.adjust(mixins.$grey900, $alpha: -0.2); - } - - .spinner { - color: var(--white); - z-index: 1; - } - } - - #details & { - border-radius: var(--radius-lg); - overflow: hidden; - } - - .preview-thumb { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - - img { - display: block; - max-width: 100%; - max-height: 190px; - } - } -} - -/* element selector modals */ -.elementselectormodal { - --content-padding: 24px; - padding-block-end: 44px; - user-select: none; - - & > .header { - padding-block: 14px; - text-align: center; - - & + .body { - height: calc(100% - 48px) !important; - } - } - - .body { - position: relative; - height: 100%; - - .spinner.big { - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - margin-block: -24px 0; - margin-inline: -24px 0; - } - - .content { - height: calc(100% + 48px); - - .sidebar { - position: absolute; - inset-block-start: 0; - margin-inline-start: calc(-249rem / 16); - height: 100%; - overflow: auto; - padding-block: var(--content-padding); - padding-inline: 0; - } - - .main { - margin: -24px; - padding: var(--content-padding); - height: 100%; - box-sizing: border-box; - overflow: auto; - position: relative; - - .elements { - &.busy { - min-height: calc(100% - 48px); - - .update-spinner { - z-index: 101; - } - } - - .header { - margin-block: 0 var(--m); - margin-inline: 0; - } - - .tableview table { - tr { - th, - td { - cursor: default; - } - - // prevent double focus ring (the row already gets it) - .checkbox::before { - box-shadow: none !important; - } - } - } - - .structure .row { - margin-block-start: 1px; - } - } - } - } - } - - .footer { - position: absolute; - inset-block-end: 0; - inset-inline-start: 0; - width: 100%; - margin: 0; - box-sizing: border-box; - - .spinner { - float: inline-end; - margin-inline-end: -24px; - } - } -} - -/* element selector modals (the matching .cs-modal rules live in _customize-sources.scss) */ -.elementselectormodal { - .main-header { - display: flex; - align-items: center; - margin-block-end: var(--s); - } - - .main-heading { - margin-block-end: 0; - } - - .nav-toggle { - margin-inline-start: 4px; - @include mixins.touch-target; - color: var(--ui-control-color); - - &:hover { - color: var(--gray-500); - } - } - - .sidebar-header { - display: flex; - justify-content: flex-end; - padding-block: 0; - padding-inline: var(--s); - margin-block-end: var(--s); - } - - .nav-close { - @include mixins.touch-target; - } -} - -/* element editing HUD */ -.element-hud-form { - .buttons { - position: relative; - - .spinner { - position: absolute; - inset-block-start: 0; - inset-inline-end: -24px; - } - } -} - -/* element index view menu */ -.element-index-view-menu { - width: 400px; - max-width: calc(100% - 20px); - padding: 0 !important; - - .meta { - padding-block: var(--s); - } - - .table-columns-field .heading { - align-items: flex-start; - } - - .menu-footer { - margin: 0 !important; - padding-block: var(--s) !important; - padding-inline: var(--xl) !important; - background-color: var(--gray-050); - } -} - -.element-index-view-menu-table-column { - display: flex; - align-items: flex-start; - align-content: stretch; - margin-block-end: 4px; - - .icon.move { - margin-inline-end: 10px; - position: relative; - z-index: 1; - } -} - -/* sort fields */ -.sort-field { - .input { - .flex { - .btngroup { - .btn { - width: 42px; - } - } - - .flex-grow { - max-width: calc(100% - 85px - var(--s)); - } - - @media screen and (width <= 350px) { - flex-direction: column; - - & > * { - width: 100%; - } - - .flex-grow { - max-width: none; - } - } - } - } -} - -/* element filter HUD */ -.element-filter-hud { - &.loading .body { - padding: 44px; - display: flex; - align-items: center; - justify-content: center; - } - - .body, - .main { - overflow: visible; - } -} - -/* Address Cards */ -.address-cards { - display: grid; - gap: var(--m) var(--m); - grid-template-columns: repeat(1, minmax(0, 1fr)); - grid-auto-rows: minmax(0, 1fr); - - .so-content & { - grid-template-columns: repeat(1, minmax(0, 1fr)) !important; - } -} - -.address-cards__add-btn { - padding: 1rem; - min-height: 8rem; - height: auto; - width: 100%; -} - -.address-card.error { - border: 1px solid #cf1124; -} - -.address-card.error:hover { - border-color: #cf1124; -} - -@media (width >= 1024px) { - .address-cards { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (width >= 1280px) { - .address-cards { - grid-template-columns: repeat(3, minmax(0, 1fr)); - - .so-content & { - grid-template-columns: repeat(2, minmax(0, 1fr)) !important; - } - } -} - -@media (width >= 1536px) { - .address-cards { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } -} - -.address-card { - border: 1px solid #eee; - border-radius: 0.375rem; - padding: 1rem; - min-height: 4rem; -} - -.address-card:hover { - border-color: #ddd; - background-color: #fafafa; - cursor: pointer; -} - -.address-card .address-card-header { - display: flex; - flex-wrap: nowrap; - justify-content: space-between; -} - -.address-card .address-card-header-actions { - display: flex; - justify-content: flex-end; -} - -.address-card .address-card-label { - background: #e6f1fe; - color: #2563eb; - padding-block: 0.125rem; - padding-inline: 0.5rem; - border-radius: 0.25rem; - font-size: 0.75rem; - text-transform: uppercase; - font-weight: 500; - margin-block-end: 0.75rem; - margin-inline-end: 0.5rem; -} - -/* element deletion modal */ -.element-deletion-modal { - width: 500px; - display: flex; - flex-direction: column; - - .body { - flex: 1; - height: calc(100% - 44px); - overflow: auto; - - .edm-blockers { - margin-inline: calc(var(--pane-padding) * -1); - border-block-start: var(--hr-border); - - .edm-blocker { - padding: var(--pane-padding); - - &:nth-child(odd) { - background-color: var(--secondary-pane-bg); - } - } - - .edm-details { - .element-index { - border-color: var(--border-hairline-dark) !important; - background-color: var(--white) !important; - max-height: 272px; - } - } - - .edm-blocker-resolved-message { - margin-block-start: var(--s); - } - } - } -} - -/* delete user modal */ -.deleteusermodal { - .content-summary { - margin-block: -24px 24px; - margin-inline: -24px; - padding: 24px; - background-color: var(--gray-050); - } - - .options { - label { - display: inline-block; - line-height: 30px; - } - } - - .elementselect { - margin-inline-start: 10px; - display: inline-block; - vertical-align: middle; - } - - .buttons { - .spinner { - margin-inline-end: -20px; - } - } - - div.elements { - list-style: none; - } -} - -.dropdownsettingsmodal { - width: auto; - height: auto; - min-width: 0; - min-height: 0; - max-width: 400px; - - .body { - max-height: 100%; - overflow-y: auto; - } -} - -/* ---------------------------------------- -/* Alternative Text -/* ---------------------------------------- */ -.video-transcript { - background-color: var(--gray-050); - overflow-y: scroll; - font-size: 1rem; - position: relative; - - &:focus-visible { - box-shadow: none; - color: var(--white); - background-color: var(--gray-800); - } -} - -.video-transcript__inner { - margin-inline: auto; - max-width: 550px; - padding: var(--xl); -} - -/* tag select fields */ -.tagselect { - .elements { - li { - display: inline; - } - } - - .chip.small { - clear: none; - margin-inline-end: 7px; - } - - .tagselect__input-wrapper { - margin-inline: 0 7px; - margin-block: 7px 0; - display: inline-block; - } -} - -.tagmenu { - ul { - li { - a { - padding-inline-start: 26px; - - &::before { - float: inline-start; - margin-inline: -18px 0; - margin-block: 3px 0; - } - } - } - } -} - -/* selectize */ -.selectize-control.single .selectize-input:not(.no-arrow)::after { - display: none; -} - -/* ---------------------------------------- -/* Fields -/* ---------------------------------------- */ - -.shadow-box { - border-radius: var(--radius-lg); - border: 1px solid var(--gray-200); - @include mixins.shadow; -} - -table.shadow-box, -table.editable { - border-collapse: separate; - border-spacing: 0; - - thead, - tbody:first-child, - caption + tbody { - tr:first-child { - th:first-child, - td:first-child { - &, - &.disabled::after { - border-start-start-radius: var(--radius-md); - } - } - - th:last-child, - td:last-child { - &, - &.disabled::after { - border-start-end-radius: var(--radius-md); - } - } - } - } - - thead:last-child, - tbody:last-child { - tr:last-child { - th:first-child, - td:first-child { - &, - &.disabled::after { - border-end-start-radius: calc(var(--radius-lg) - 1px); - } - } - - th:last-child, - td:last-child { - &, - &.disabled::after { - border-end-end-radius: calc(var(--radius-lg) - 1px); - } - } - } - } -} - -.selectize.multiselect .selectize-input { - line-height: 18px; -} - -.multitext .multitextrow { - &::after { - @include mixins.clearafter; - } - - &:first-child .text { - &:first-child { - border-start-start-radius: var(--radius-md); - } - - &:last-child { - border-start-end-radius: var(--radius-md); - } - } - - &:last-child .text { - &:first-child { - border-end-start-radius: var(--radius-md); - } - - &:last-child { - border-end-end-radius: var(--radius-md); - } - } - - &:not(:first-child) .text { - margin-block-start: -1px; - } - - .text { - border-radius: 0; - float: inline-start; - box-sizing: border-box; - - &:not(:first-child) { - margin-inline-start: -1px; - } - - &:first-child { - &:nth-last-child(1) { - width: 100%; - } - - &:nth-last-child(2) { - width: 50%; - } - - &:nth-last-child(2) ~ .text { - width: calc(50% + 1px); - } - } - - &.error { - position: relative; - z-index: 1; - } - } - - .text:focus, - .selectize.multiselect .selectize-input.focus { - position: relative; - z-index: 2; - } -} - -.CodeMirror { - height: auto !important; - min-height: 70px; - - &.CodeMirror-focused { - @include mixins.input-focused-styles; - } - - &.cm-s-readonly { - &, - * { - cursor: not-allowed; - } - } -} - -.json-field .CodeMirror-scroll { - max-height: 550px; -} - -.link-input { - container-type: inline-size; - - & > .flex { - & > .flex-grow { - overflow: hidden; - } - - & > div { - &.text-link { - border: var(--input-border); - border-radius: var(--radius-lg); - background-color: var(--input-bg); - cursor: text; - - &:has(.text:focus) { - box-shadow: var(--focus-ring); - } - - & > .text, - & > .chip { - margin-block: -1px; - background-color: transparent; - } - - & > .text { - border: none; - margin-inline: -1px; - - &:focus { - position: relative; - } - - &:focus { - box-shadow: none !important; - } - } - - .chip { - min-height: calc(34rem / 16); - padding-inline: var(--s); - } - } - } - - @container (max-width: calc(399rem/16)) { - /* stylelint-disable block-no-redundant-nested-style-rules */ - & { - flex-direction: column; - align-items: stretch; - - & > .select, - & > .select select, - & > div[data-link-type] .text, - & > div[data-link-type] .chip { - display: flex; - width: 100%; - } - - & > div[data-link-type] ul.elements { - align-items: stretch; - } - } - /* stylelint-enable */ - } - } -} - -.chars-left { - position: relative; - float: inline-end; - margin-inline: 7px; - margin-block: calc(-27rem / 16) 0; - color: var(--light-text-color); - - .input.ltr > & { - float: inline-end; - } - - .input.rtl > & { - float: inline-start; - } - - &.negative-chars-left { - color: var(--fg-error); - } -} - -.status-badge { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - width: 2px; - height: 100%; - content: ''; - cursor: help; - z-index: 1; - - &.modified { - background-color: var(--c-field-modified-indicator, var(--violet-600)); - box-shadow: 0 0 5px - color-mix( - in srgb, - var(--c-field-modified-indicator, var(--violet-600)) 15%, - transparent - ); - } - - &.outdated { - background-color: var(--bg-pending); - box-shadow: 0 0 5px hsl(27deg 96% 61% / 15%); - } -} - -.field { - min-inline-size: initial; - - & > .status-badge { - border-radius: 1px; - } - - & > .heading { - display: flex; - flex-wrap: wrap; - gap: 5px; - align-items: center; - position: relative; - margin-block: -5px 5px; - min-height: calc(22rem / 16); - - & > label, - & > legend { - display: flex; - flex-wrap: wrap; - gap: 5px; - align-items: center; - font-weight: bold; - - code { - font-size: 1em !important; - } - - .info { - margin-inline-start: 5px; - } - } - - .required::after { - margin-inline-start: 0; - } - - .t9n-indicator { - position: relative; - inset-block-start: calc(-1rem / 16); - margin-inline: 2px; - color: var(--light-text-color); - - &.copyable { - cursor: pointer; - } - } - - & + .instructions { - margin-block-start: -3px; - } - - // BC - & > .instructions { - width: 100%; - } - } - - & > .instructions { - margin-block-end: 5px; - } - - & > .input { - position: relative; - - & + .instructions { - margin-block: 5px 0; - margin-inline: 0; - } - - input:disabled, - textarea:disabled, - select:disabled, - button:disabled { - cursor: not-allowed; - } - } - - & > .notice, - & > .warning { - margin-block: 5px 0; - margin-inline: 0; - } - - /* radio and checkbox */ - .custom-option-wrapper { - display: inline-block; - } - - .custom-option-input { - margin-inline-start: var(--xs); - } -} - -.read-only-badge { - font-size: calc(11rem / 16); - background-color: var(--gray-100); - color: var(--gray-700); - border: 1px solid var(--border-hairline); - border-radius: var(--radius-sm); - padding-block: 0; - padding-inline: 0.25em; - line-height: 1.45; -} - -.field > .instructions, -.markdown, -.warning.pane, -.tip.pane, - // BC -.field > .heading > .instructions, -.checkboxfield .instructions { - img, - video, - embed, - iframe { - max-width: 100% !important; - } - - ul, - ol { - margin-block: 1em; - margin-inline: 0; - padding-inline-start: 2em; - } - - ul li { - list-style-type: disc; - } - - li + li { - margin-block-start: 0.25em; - } -} - -.field > .instructions, - // BC -.field > .heading > .instructions, -.checkboxfield .instructions { - color: var(--custom-text-color, var(--fg-subtle)); -} - -// Special adjustments for content formatted via Markdown -.markdown { - color: var(--custom-text-color, var(--text-color)); - - h1, - h2, - h3, - h4, - h5, - h6 { - margin-block-end: 0.3em; - } - - p { - margin-block: 0.25em; - } -} - -.expand-status-btn { - margin-inline-start: 5px; - width: calc(30rem / 16); - height: calc(17rem / 16); - min-height: auto; - padding: 0; - line-height: 16px; - border-radius: var(--radius-sm); - color: var(--text-color); - - &::before { - margin: 0; - } -} - -/* toggles and nested fields */ -.nested-fields { - margin: -24px; - padding-block: 24px 0; - padding-inline: 24px; - - &.hidden { - display: block; - height: 0; - } - - & > .field:last-child { - padding-block-end: 24px; - } -} - -/* checkbox */ -.checkbox-group { - display: flex; - flex-direction: column; - gap: calc(5rem / 16); - - .btn.add { - max-width: calc(200rem / 16); - } -} - -.checkbox-icon { - display: inline-flex; - padding: 3px; - background-color: var(--bg-enabled); - color: var(--white); - border-radius: var(--radius-sm); - - &::before { - --checkbox-size: 14px; - @include mixins.icon; - content: 'check'; - line-height: var(--checkbox-size); - font-size: var(--checkbox-size); - } -} - -.checkbox-preview-label { - display: none; -} - -.monaco-mouse-cursor-text { - &:focus-visible { - box-shadow: none !important; - } -} - -fieldset { - .checkboxfield { - margin-block: 5px; - margin-inline: 0; - } -} - -.checkboxfield { - .instructions, - .notice, - .warning { - margin-block-start: 2px; - padding-inline-start: calc(1rem + 5px); - } -} - -.checkboxfield__custom-wrapper { - display: inline-block; -} - -/* radio */ -.radio-group { - display: flex; - flex-direction: column; - gap: calc(5rem / 16); -} - -input.radio { - opacity: 0; - position: absolute; - width: var(--radio-size); - height: var(--radio-size); -} - -input.radio + label, -div.radio { - display: inline-block; - clear: none; - position: relative; - padding-inline-start: calc(var(--radio-size) + 0.35rem); - line-height: max(1rem, var(--radio-size)); - min-height: max(1rem, var(--radio-size)); - cursor: pointer; -} - -input.radio:disabled + label, -.disabled div.radio { - cursor: not-allowed; -} - -input.radio + label:empty, -div.radio:empty { - padding-inline-start: var(--radio-size); -} - -/* fixes a RTL bug */ -input.radio + label::before, -input.radio + label::after, -div.radio::before, -div.radio::after { - display: block; - position: absolute; - content: ''; - box-sizing: border-box; - background-clip: padding-box; - border-radius: 100%; -} - -input.radio + label::before, -div.radio::before { - inset-block-start: 50%; - inset-inline-start: 0; - transform: translateY(-50%); - width: var(--radio-size); - height: var(--radio-size); - background-color: hsl(212deg 50% 99%); - border: var(--input-border); -} - -input.radio + label::after, -div.radio::after { - inset-block-start: calc(50%); - inset-inline-start: 4px; - transform: translateY(-50%); - width: calc(var(--radio-size) - 8px); - height: calc(var(--radio-size) - 8px); -} - -input.radio:checked + label::after, -div.radio.checked::after, -.sel div.radio::after { - background: var(--gray-900); -} - -input.radio:focus-visible + label::before, -:focus-visible div.radio::before { - @include mixins.input-focused-styles; -} - -/* multiselect */ -.multiselect > select { - color: var(--text-color); - font-size: 14px; - appearance: none; - - &:focus-visible { - @include mixins.input-focused-styles; - } - - option { - padding-block: 1px; - padding-inline: 8px; - } -} - -.text, -.selectize.multiselect .selectize-input { - padding-block: 6px; -} - -.text:not(.color-input), -.selectize.multiselect .selectize-input { - padding-inline: 9px; -} - -.text { - &:not(.small) { - box-sizing: border-box; - min-height: var(--input-height); - } - - &.small { - padding: 3px; - } - - &.readable { - padding-block: 16px; - padding-inline: 18px; - font-size: 16px; - line-height: 22px; - - & + .chars-left { - margin-block-start: -23px; - } - } - - &.clearable { - padding-inline-end: var(--touch-target-size); - } - - input { - margin: 0; - padding: 0; - border: none; - background-color: transparent; - } -} - -td.errors .text, -.input.errors > .text, -.input.errors > .border-box, -.input.errors > .passwordwrapper, -.input.errors > .autosuggest-container .text, -.input.errors > .datetimewrapper .text, -.text.error { - border: 1px solid var(--fg-error) !important; -} - -.elementselect__search-input-wrapper, -.tagselect__input-wrapper, -.texticon { - position: relative; - cursor: text; - min-width: 130px; - - &.icon { - &::before { - color: var(--ui-control-color); - } - - svg, - &::before { - position: absolute; - inset-block-start: calc(50% - 7rem / 16); - inset-inline-start: 9px; - } - } - - .texticon-icon { - position: absolute; - inset-block-start: calc((34rem / 16) / 2); - transform: translateY(-50%); - display: flex; - justify-content: center; - align-items: center; - inset-inline-start: 9px; - } - - .text { - padding-inline-start: calc(26rem / 16); - } - - .clear-btn, - .filter-btn { - width: var(--touch-target-size); - height: var(--touch-target-size); - } - - .clear-btn { - position: absolute; - inset-block-start: calc( - (var(--touch-target-size) - 34px) / -2 - ); /* Responds to min-height of text input */ - inset-inline-end: 0; - } - - &.has-filter-btn { - .text { - padding-inline-end: 26px; - } - - .filter-btn { - position: absolute; - inset-block-start: calc((34rem / 16) / 2); - transform: translateY(-50%); - inset-inline-end: 4px; - padding-block: 0 4px; - font-size: 14px; - line-height: 22px; - cursor: pointer; - border-radius: 13px; - - &::before { - @include mixins.icon; - content: 'filter'; - color: var(--fg-subtle); - } - - &:hover { - background-color: var(--gray-100); - } - - &:active, - &.active, - &[aria-expanded='true'] { - background-color: var(--gray-350); - - &::before { - color: var(--white); - } - } - } - - .text { - &.clearable { - padding-inline-end: calc(30px + var(--touch-target-size)); - } - } - - .clear-btn { - inset-inline-end: 30px; - } - } -} - -.texthint-container { - position: relative; - height: 0; -} - -.texthint { - position: absolute; - inset-block-start: -1px; - width: 100%; - color: var(--light-text-color); - cursor: text; -} - -.passwordwrapper { - position: relative; - - .password { - border: none; - background: transparent; - padding-inline-end: 4rem; - box-shadow: none !important; - } - - .password-toggle { - color: var(--link-color); - position: absolute; - inset-block: 0; - inset-inline-end: 9px; - cursor: pointer; - - &:hover { - text-decoration: underline; - } - } -} - -.datetimewrapper { - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: 5px; -} - -.clear-btn { - display: flex; - justify-content: center; - align-items: center; - width: 24px; - cursor: pointer; - color: var(--ui-control-color); - border: none; - padding: 0; - background: transparent; - - &::before { - @include mixins.icon; - content: 'remove'; - } - - &:hover { - color: var(--ui-control-hover-color); - } - - &:active { - color: var(--ui-control-active-color); - } -} - -.close-btn { - position: relative; - - &::before, - &::after { - position: absolute; - content: ''; - inset-block-start: 50%; - inset-inline-start: 50%; - height: 15px; - width: 2px; - background-color: var(--ui-control-color); - } - - &::before { - transform: translate(-50%, -50%) rotate(-45deg); - } - - &::after { - transform: translate(-50%, -50%) rotate(45deg); - } - - &:hover { - &::before, - &::after { - background-color: var(--ui-control-hover-color); - } - } - - &:active { - &::before, - &::after { - background-color: var(--ui-control-active-color); - } - } -} - -.datewrapper, -.timewrapper { - display: inline-block; - position: relative; - - .text { - position: relative; - z-index: 1; - width: 100%; - - & + div[data-icon] { - display: none; - } - - &:placeholder-shown, - &.empty-value { - & + div[data-icon] { - display: block; - position: absolute; - inset-block-start: calc(50% - 12px); - inset-inline-start: 14px; - z-index: 0; - color: var(--light-text-color); - - &, - &::before { - user-select: none; - pointer-events: none; - z-index: 1; - } - } - } - } -} - -.datewrapper { - width: 8em; -} - -.timewrapper { - width: 7em; -} - -@include mixins.placeholder-styles(var(--gray-400)); - -/* Kill IE's special text features */ -::-ms-reveal, -::-ms-clear { - display: none; -} - -/* Asset indexing related */ -tr.indexingSession td { - height: 34px; - padding-block: 1px; - padding-inline: 10px; -} - -tr.indexingSession td.progress div.progressContainer { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; -} - -tr.indexingSession td.progress div.progressContainer .progressbar { - width: 70%; - position: relative; - inset-inline-start: 0; - height: 12px; - z-index: 1; -} - -tr.indexingSession td.progress div.progressContainer div.progressInfo { - width: 20%; -} - -// Selects -.select:not(.selectize), -.select:not(.selectize) select { - @include mixins.select-styles; -} - -.select:not(.selectize) { - @include mixins.select-container-styles; -} - -.select:not(.selectize)::after { - @include mixins.select-arrow-styles; -} - -.select:not(.selectize) select { - @include mixins.select-input-styles; - white-space: pre; -} - -.select:not(.selectize).fullwidth select { - @include mixins.select-input-fullwidth-styles; -} - -.select:not(.selectize) select { - &:hover:not(:disabled) { - @include mixins.select-input-hovered-styles; - } - - &:focus-visible { - @include mixins.select-input-focused-styles; - } -} - -.select:not(.selectize).small::after { - inset-block-start: 9px; -} - -.select:not(.selectize).small select { - padding-block: 4px !important; - font-size: 11px; -} - -.selectize-control .selectize-input.disabled, -.custom-select.disabled { - opacity: 1; - cursor: not-allowed !important; - pointer-events: auto !important; - - * { - cursor: not-allowed !important; - pointer-events: auto !important; - } -} - -.selectize .selectize-input { - display: block; - border-color: inherit; - box-shadow: none; - background-color: transparent; - - .item { - max-width: 100%; - - span { - overflow: hidden; - text-overflow: ellipsis; - } - } -} - -.selectize.select .selectize-input::after { - display: none; -} - -body .selectize-dropdown { - border: none; - z-index: 101; -} - -/* single select styles */ -.selectize.select { - @include mixins.placeholder-styles(var(--gray-700)); - height: 34px; - - &:not(.fullwidth) { - width: 25em; - max-width: 100%; - } -} - -.datetimewrapper .selectize.select:not(.fullwidth) { - max-width: calc(100% - 29px); -} - -.selectize.select .selectize-control { - @include mixins.select-container-styles; - - &::after { - @include mixins.select-arrow-styles; - } -} - -.selectize.select .selectize-input { - @include mixins.select-styles; - - &.focus { - box-shadow: var(--focus-ring); - } -} - -.selectize.select .selectize-input { - @include mixins.select-input-styles; -} - -.selectize.select .selectize-control, -.selectize.select .selectize-input { - width: 100%; -} - -/* multi select styles */ -.selectize.multiselect .selectize-input { - min-height: 34px; - padding-block-end: 3px; - - &.focus { - @include mixins.input-focused-styles; - } - - & > .item { - @include mixins.token-styles; - display: inline-flex; - flex-direction: row; - padding-block: 3px !important; - padding-inline: 7px !important; - /* stylelint-disable declaration-property-value-keyword-no-deprecated */ - word-break: break-word; - /* stylelint-enable */ - - &.active { - @include mixins.active-token-styles; - } - - & > .remove { - position: static; - border-inline-start: none; - padding: 0; - font-size: 0; - color: var(--ui-control-color); - - &:hover { - color: var(--ui-control-hover-color); - background-color: transparent; - } - - &::before { - font-size: 14px; - @include mixins.icon; - content: 'remove'; - } - } - } -} - -/* menu styles */ -body { - .selectize-dropdown { - margin-block-start: 1px; - - [data-selectable], - .option, - .optgroup-header { - @include mixins.menu-item-styles; - } - - .optgroup { - &:not(:first-child) { - border-block-start: 1px solid var(--border-hairline); - } - - padding-block-start: 5px; - - .option { - padding-inline-start: 24px; - } - } - - .optgroup-header { - @include mixins.h6-styles; - margin: 0; - padding-block: 4px; - padding-inline: 0; - } - - .active:not(.selected), - .option:hover { - background-color: var(--gray-100); - } - - .selected { - @include mixins.menu-item-active-styles; - cursor: default !important; - - .light { - color: inherit !important; - } - } - } - - .selectize-dropdown-content { - @include mixins.menu-styles; - max-height: 70vh; - - .option { - min-height: 18px; - } - - & > div[data-value='new'] { - &::before { - @include mixins.icon; - content: 'plus'; - margin-inline-end: 5px; - } - - &::after { - content: '…'; - } - } - } - - &.no-scroll .selectize-dropdown-content { - max-height: 200px; // default for selectize - } -} - -/* datepicker */ -.ui-datepicker { - position: fixed; - inset-block-start: -300px; - margin-inline-start: 1px; - z-index: 101 !important; -} - -.ui-datepicker-header { - padding-block: 8px 4px; - padding-inline: 8px; -} - -.ui-datepicker-prev { - float: inline-start; -} - -.ui-datepicker-next { - float: inline-end; -} - -.ui-datepicker-prev span, -.ui-datepicker-next span { - display: none; -} - -.ui-datepicker-prev, -.ui-datepicker-next { - width: 20px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; - - &:hover::after { - border-color: var(--link-color); - } -} - -.ui-datepicker-prev::after { - @include mixins.angle(left); -} - -.ui-datepicker-next::after { - @include mixins.angle(right); -} - -.ui-datepicker-title { - text-align: center; - - select.ui-datepicker-year { - background-color: hsl(212deg 25% 90%); - padding-block: 0; - padding-inline: var(--xs); - border-radius: var(--radius-lg); - height: calc(22rem / 16); - } -} - -.ui-datepicker-calendar th, -.ui-datepicker-calendar td { - padding: 2px !important; -} - -.ui-datepicker-calendar th span, -.ui-datepicker-calendar td a { - display: block; - width: calc(26 / 16 * 1rem); - line-height: 26px; - text-align: center; - color: var(--text-color); -} - -.ui-datepicker-calendar th span { - color: var(--fg-subtle); - font-weight: normal; -} - -.ui-datepicker-calendar td a { - border-radius: 2px; -} - -.ui-datepicker-calendar td a:hover { - background-color: var(--bg-selection-light); - text-decoration: none; -} - -.ui-datepicker-calendar td a.ui-state-active { - background-color: var(--bg-selection-dark); - color: var(--white); - @include mixins.light-on-dark-text; - cursor: default; -} - -.ui-datepicker-calendar td.ui-datepicker-today a { - border-radius: 13px; - box-shadow: inset 0 0 0 2px var(--bg-selection-light); -} - -/* timepicker */ -.ui-timepicker-wrapper { - z-index: 101; - overflow-y: auto; - max-height: 210px; -} - -.ui-timepicker-list { - width: calc(14px + 6em); - z-index: 100; -} - -.ui-timepicker-list li { - padding-inline: 14px 0; - padding-block: 2px; - white-space: nowrap; - cursor: pointer; -} - -.ui-timepicker-list li:hover { - background-color: var(--bg-selection-light); -} - -.ui-timepicker-list li.ui-timepicker-selected { - background-color: var(--bg-selection-dark); - color: var(--white); - @include mixins.light-on-dark-text; - cursor: default; -} - -/* errors */ -ul.errors { - margin-block-start: 5px; - list-style-type: square; - padding-inline-start: 20px; -} - -ul.errors li { - color: var(--fg-error); -} - -/* message pages */ -.message-container { - display: flex; - justify-content: center; - align-items: center; - position: fixed; - z-index: 100; - inset-block-start: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - - .modal { - position: relative; - width: calc(15rem + var(--modal-padding) * 2); - min-width: 0; - height: auto; - min-height: 0; - } -} - -/* 2FA setup page */ -body.setup-2fa { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100%; - - #setup-2fa { - display: flex; - flex-direction: column; - gap: var(--l); - width: 550px; - max-width: 100%; - padding: var(--padding); - - #setup-2fa-intro { - text-align: center; - } - - #setup-2fa-btn { - display: flex; - justify-content: center; - } - } -} - -/* licensing issues page */ -body.licensing-issues { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100%; - padding: var(--padding); - - #licensing-issues { - display: flex; - flex-direction: row; - max-width: 50em; - - .buttons { - justify-content: space-between; - - [data-icon] { - margin-inline: 0; - } - } - } - - #continue { - margin: 0; - } -} - -/* auto-suggest */ -.autosuggest-container { - position: relative; -} - -.autosuggest__results-container { - position: absolute; - z-index: 2; - width: 100%; - border-radius: var(--radius-lg); - background-color: var(--white); - @include mixins.shadow; - box-sizing: border-box; - padding-block: 0; - padding-inline: 14px; - text-align: start; - @include mixins.sans-serif-font; - font-size: 1em !important; - - .autosuggest__results-before { - @include mixins.h6-styles; - margin-block-start: 14px !important; - } - - .autosuggest__results-item { - @include mixins.menu-item-styles; - overflow: hidden; - text-overflow: ellipsis; - - &:hover, - &.autosuggest__results-item--highlighted { - @include mixins.menu-item-active-styles; - cursor: pointer; - } - } -} - -/* ---------------------------------------- -/* Matrix -/* ---------------------------------------- */ - -/* Matrix fields */ -.matrix { - & > .buttons { - margin-block-start: 10px; - } -} - -.matrixblock { - margin-block-end: var(--s); - padding-block: 0 var(--m); - padding-inline: var(--m); - - &.static { - .titlebar { - padding-inline: 14px 0; - margin-block-end: 14px; - } - } - - & > .titlebar > .matrixblock-tabs .pane-tabs .menubtn:not(.action-btn) { - padding: 0; - width: var(--touch-target-size); - height: var(--touch-target-size); - background-color: transparent; - - &:hover { - backdrop-filter: brightness(90%); - } - - &:active, - &[aria-expanded='true'] { - backdrop-filter: brightness(85%); - } - } - - .flex-fields { - --row-gap: var(--m) !important; - --padding: var(--m); - --neg-padding: calc(var(--m) * -1); - } - - // no margin when a .field comes after a hidden item. - .hidden + .field { - margin-block-start: 0; - } - - & > .titlebar { - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - gap: var(--m); - margin-block: 0; - margin-inline: calc(var(--m) * -1); - box-sizing: border-box; - border-radius: var(--radius-lg) var(--radius-lg) 0 0; - padding-inline: var(--m) calc(var(--m) + 70px); - padding-block: 5px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - overflow-wrap: normal; - cursor: default; - user-select: none; - position: relative; - background-color: var(--custom-titlebar-bg-color, var(--gray-100)); - min-height: calc(var(--lh) + 10px); - - & > .blocktype, - & > .preview { - font-size: 0.8em !important; - } - - & > .blocktype { - font-weight: 500; - } - - & > .preview { - flex-grow: 1; - min-width: 0; - opacity: 0; - transition: opacity linear 100ms; - overflow: hidden; - - &:empty { - display: none; - } - - body.ltr & { - mask-image: linear-gradient( - to left, - rgb(0 0 0 / 0%), - rgb(0 0 0 / 100%) 12px - ); - } - - body.rtl & { - mask-image: linear-gradient( - to right, - rgb(0 0 0 / 0%), - rgb(0 0 0 / 100%) 12px - ); - } - - span { - opacity: 0.5; - } - } - - & > .matrixblock-tabs { - flex: 1; - min-width: 0; - margin-block: -5px; - margin-inline: 0; - - .pane-tabs { - margin: 0; - padding-inline-end: 3px; - - [role='tablist'] { - padding-block: 0; - padding-inline: 12px; - - &.scrollable { - mask-image: linear-gradient( - to right, - rgb(0 0 0 / 0%), - rgb(0 0 0) 12px, - rgb(0 0 0) calc(100% - 12px), - rgb(0 0 0 / 0%) 100% - ); - } - - [role='tab'] { - background-color: transparent; - - &.sel { - background-color: var( - --custom-bg-color, - var(--gray-050) - ) !important; - } - - .tab-label { - height: calc(var(--lh) + 10px); - padding-block: 0; - padding-inline: var(--m); - } - } - } - - .menubtn:not(.action-btn) { - margin-inline: 0; - - &:not(:empty, .btn-empty)::after { - margin-inline-start: 0; - } - } - } - } - - & > .preview:first-child:empty + .matrixblock-tabs { - margin-inline-start: calc((var(--m) + 12px) * -1); - } - } - - &.disabled-entry { - & > .titlebar { - padding-inline-end: 100px; - } - - & > .actions { - & > .status { - &.off { - display: block; - } - } - } - } - - &.collapsed { - & > .titlebar { - border-radius: var(--radius-lg); - - & > .preview { - opacity: 1; - } - } - } - - & > .actions { - display: flex; - align-items: center; - gap: var(--s); - position: absolute; - inset-block-start: 0; - inset-inline-end: var(--m); - cursor: default; - min-height: calc(var(--lh) + 10px); - - & > .status { - &.off { - display: none; - } - } - } - - &:not(.static) { - & > .fields { - padding-block-start: var(--l); - } - } - - & > .fields > .flex-fields > :not(h2, hr, .line-break) { - &::before { - display: none; - } - } - - & > .buttons { - margin-block-start: 0; - height: 30px; - } -} - -/* number field */ -.number-container { - display: inline-flex; - align-items: center; - flex-wrap: nowrap; - gap: 0; - - .number-currency-label { - @include mixins.input-styles; - border-inline-end: none; - border-start-end-radius: 0; - border-end-end-radius: 0; - align-items: center; - box-sizing: border-box; - background: transparent; - display: flex; - min-height: var(--input-height); - padding-block: 6px; - padding-inline: 9px; - white-space: nowrap; - - & + .text { - border-start-start-radius: 0; - border-end-start-radius: 0; - } - } -} - -/* categories */ -.add-category-form { - margin-block-start: 24px; -} - -.add-category-form .texticon { - width: 200px; - float: inline-start; - margin-inline-end: 5px; -} - -.add-category-form .texticon .text { - padding-inline-end: 30px; -} - -.add-category-form .texticon .spinner { - position: absolute; - inset-block-start: 0; - inset-inline-end: 5px; -} - -/* site pickers */ -body.sitepicker { - #main-content { - padding: 30px; - justify-content: center; - align-items: center; - text-align: center; - } - - #content-container { - max-width: 400px; - } -} - -.sitepicker-group { - li { - &:not(:first-child) { - a { - margin-block-start: -1px; - border-start-start-radius: 0; - border-start-end-radius: 0; - - &:not(:hover) { - border-block-start-color: transparent; - } - } - } - - &:not(:last-child) { - a { - border-end-start-radius: 0; - border-end-end-radius: 0; - } - } - - a { - display: block; - position: relative; - text-align: start; - width: 100%; - box-sizing: border-box; - border: 1px solid var(--border-hairline); - border-radius: var(--radius-md); - padding-inline: 15px 42px; - padding-block: 9px; - font-size: 16px; - line-height: 1.4; - - &::after { - font-size: 14px; - position: absolute; - inset-block-start: calc(50% - 7px); - inset-inline-end: 12px; - margin: 0; - padding: 0; - } - - &:hover { - border-color: var(--link-color); - text-decoration: none; - z-index: 1; - } - } - } -} - -.entry-mover-modal { - --width: calc(var(--ui-control-height) * 10 + var(--s) * 9 + var(--xl) * 2); - width: var(--width) !important; - min-width: 0 !important; - max-width: calc(100% - 20px) !important; - - .header { - padding-block: calc(var(--m)); - text-align: center; - } - - .body { - height: 83%; - position: relative; - - .entry-mover-modal--list { - height: calc(100% + 20px); - position: relative; - - fieldset { - box-sizing: border-box; - height: 100%; - overflow: auto; - padding-block-end: 20px; - position: relative; - } - } - } - - .footer { - position: absolute; - inset-block-end: 0; - inset-inline-start: 0; - width: 100%; - margin: 0; - box-sizing: border-box; - } -} - -/* ---------------------------------------- -/* IE hacks -/* ---------------------------------------- */ - -/* Fix layout of modal element selectors for IE8 */ -.elementselectormodal .body .main { - float: left \9; - width: 445px \9; -} - -/* ---------------------------------------- -/* Retina graphics -/* ---------------------------------------- */ - -@media only screen and (resolution >= 1.5dppx) { - .structure ul li { - background-size: 40px; - - body.ltr & { - background-image: url('../images/branch_2x.png'); - } - - body.rtl & { - background-image: url('../images/branch_rtl_2x.png'); - } - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_menu.scss b/packages/craftcms-legacy/cp/src/css/_menu.scss deleted file mode 100644 index dd638e03c7e..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_menu.scss +++ /dev/null @@ -1,291 +0,0 @@ -@use 'sass:color'; -@use '@craftcms/sass/mixins'; - -/* ---------------------------------------- -/* Menus -/* ---------------------------------------- */ - -.menu, -.ui-datepicker, -.ui-timepicker-wrapper { - @include mixins.menu-styles; -} - -.ui-datepicker, -.ui-timepicker-wrapper { - padding: 0; -} - -.menu { - position: absolute; - - &:not(.visible) { - display: none; - } - - &.padded { - padding-block: var(--s); - padding-inline: calc(var(--m) + var(--s)); - - hr { - margin-block: var(--s); - margin-inline: calc((var(--m) + var(--s)) * -1); - } - - ul { - li { - margin-block: 0; - margin-inline: calc(var(--m) * -1); - padding-block: 0; - padding-inline: var(--m); - - a { - border-radius: var(--radius-lg); - } - } - } - - .extralight { - margin-block-start: 2px; - } - } - - h6, - .h6 { - &:first-child { - margin-block-start: 14px !important; - } - } - - ul { - &.padded { - li { - a, - .menu-item, - .menu-option { - padding-inline-start: calc(var(--m) + 18rem / 16); - - &.sel { - &:not([data-icon])::before { - float: inline-start; - margin-inline: calc(-18rem / 16 - 4px) 0; - margin-block: 4px 0; - font-size: 14px; - width: 14px; - content: 'check' / ''; - color: currentcolor; - margin-block-start: 3px !important; - } - } - } - } - } - - li { - a, - .menu-item, - .menu-option { - margin-block: 0; - margin-inline: -14px; - padding-block: 10px; - padding-inline: 14px; - white-space: nowrap; - font-size: 14px; - appearance: none; - - &:not(:last-child) { - margin-inline-end: 0; - } - - &:not(.flex, .hidden) { - display: block; - width: calc(100% + 28px); - text-align: start; - } - - &.flex { - [data-icon] { - margin-block-start: -2px; - } - } - - &.sel { - cursor: default; - } - - craft-shortcut { - float: inline-end; - margin-inline-start: 14px; - } - - .shortcut { - float: inline-end; - margin-inline-start: 14px; - padding-block: 0; - padding-inline: 4px; - border-radius: var(--radius-md); - box-shadow: - 0 0 0 1px color.adjust(mixins.$grey600, $alpha: -0.75), - 0 1px 3px -1px color.adjust(mixins.$grey600, $alpha: -0.5); - } - - .infoicon-container { - display: inline-flex; - align-items: flex-start; - margin-inline-start: var(--s); - font-size: 0.8em; - } - - .menu-item-description:empty { - display: none; - } - } - } - } - - & > .flex { - margin-block: 10px; - position: relative; - - &.padded { - margin-inline-start: -14px; - padding-inline-start: 24px; - - &.sel { - &::before { - position: absolute; - inset-block-start: 36px; - inset-inline-start: 7px; - content: 'check'; - font-size: 14px; - color: var(--light-text-color); - } - } - } - } - - hr { - margin-block: 5px; - margin-inline: -14px; - } - - .go::after { - color: inherit; - } - - &:not(.menu--disclosure) ul li a, - ul li .menu-item, - ul li .menu-option { - color: mixins.$menuOptionColor; - text-decoration: none; - cursor: default; - } -} - -.menu li { - & > a, - & > button, - & > .menu-item { - &[data-icon]::before, - [data-icon]::before, - span.icon:not([data-icon]) { - display: inline-block; - width: calc(14rem / 16); - height: calc(14rem / 16); - margin-inline: -1px 9px; - } - - &[data-icon]::before, - [data-icon]::before { - position: relative; - inset-block-start: -2px; - text-align: center; - font-size: 14px; - color: currentcolor; - } - - span.icon:not([data-icon]) svg { - display: block; - position: relative; - inset-block-start: 1px; - width: 100%; - height: 100%; - @include mixins.svg-mask(var(--icon-color, var(--ui-control-color))); - } - - &.error { - &[data-icon]::before, - [data-icon]::before { - color: var(--fg-error); - } - - span.icon:not([data-icon]) svg { - @include mixins.svg-mask(var(--fg-error)); - } - } - - .chip { - display: flex; - margin-block: -4px; - } - } -} - -/* prettier-ignore */ -.menu:not(.menu--disclosure) ul li a:not(.disabled):hover, -.menu:not(.menu--disclosure) ul li .menu-item:not(.sel, .disabled):hover, -.menu:not(.menu--disclosure) ul li .menu-option:not(.sel, .disabled):hover, -.menu:not(.menu--disclosure, :hover) ul li a:not(.disabled).hover, -.menu:not(.menu--disclosure, :hover) ul li .menu-item:not(.sel, .disabled).hover, -.menu:not(.menu--disclosure, :hover) ul li .menu-option:not(.sel, .disabled).hover { - @include mixins.menu-item-active-styles; - - // Pretty gnarly, but needs to override the default hover styles with this selector - .status:not(.on, .live, .active, .enabled, .all) { - &:not(.pending, .warning, .off, .suspended, .expired) { - &:not(.light, .gray, .red, .orange, .amber, .yellow) { - &:not(.lime, .green, .emerald, .teal, .cyan, .sky) { - &:not(.blue, .indigo, .violet, .purple, .fuchsia) { - &:not(.pink, .rose, .grey, .black, .disabled) { - &:not(.inactive) { - border-color: currentcolor; - } - } - } - } - } - } - } -} - -.menu { - hr.padded, - .h6.padded, - h6.padded { - margin-inline-start: 20px; - } -} - -.menu--disclosure { - & > .search-container { - margin-inline: calc(var(--m) * -1); - padding: var(--m); - border-block-end: 1px solid var(--border-hairline); - } - - ul li { - &.filtered { - display: none; - } - - & > a:not(.crumb-link), - & > .menu-item, - & > .menu-option { - --focus-ring: var(--focus-ring-inner); - - &:hover { - @include mixins.disclosure-link-hover-styles; - } - } - } -} diff --git a/packages/craftcms-legacy/cp/src/css/_range.scss b/packages/craftcms-legacy/cp/src/css/_range.scss deleted file mode 100644 index 06c525203b3..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_range.scss +++ /dev/null @@ -1,108 +0,0 @@ -@charset "utf-8"; - -/* range inputs */ - -/* h/t https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */ - -/* h/t https://stackoverflow.com/a/38163892/1688568 */ - -$trackColor: var(--white); -$trackHeight: 6px; -$trackBorderRadius: 3px; -$trackShadow: inset 0 0 0 1px var(--ui-control-color); -$thumbColor: var(--ui-control-color); -$thumbSize: var(--m); -$thumbShadow: 0 0 0 1px var(--white); -$thumbBorderRadius: calc(var(--touch-target-size) / 2); - -.range-wrapper { - max-width: 200px; -} - -input.range { - display: block; - appearance: none; - width: 100%; // for FF -} - -input.range:focus { - outline: none; -} - -// Thumb styles -input.range::-webkit-slider-thumb { - border: none; - height: $thumbSize; - width: $thumbSize; - border-radius: $thumbBorderRadius; - background: $thumbColor; - box-shadow: $thumbShadow; - cursor: pointer; - appearance: none; - margin-block-start: calc((#{$thumbSize} / 2) * -1 + (#{$trackHeight} / 2)); -} - -input.range::-moz-range-thumb { - border: none; - height: $thumbSize; - width: $thumbSize; - border-radius: $thumbBorderRadius; - background: $thumbColor; - box-shadow: $thumbShadow; - cursor: pointer; -} - -input.range::-ms-thumb { - border: none; - height: $thumbSize; - width: $thumbSize; - border-radius: $thumbBorderRadius; - background: $thumbColor; - box-shadow: $thumbShadow; - cursor: pointer; -} - -// Track styles -input.range::-webkit-slider-runnable-track { - width: 100%; - height: $trackHeight; - cursor: pointer; - background: $trackColor; - border-radius: $trackBorderRadius; - box-shadow: $trackShadow; -} - -input.range::-moz-range-track { - width: 100%; - height: $trackHeight; - cursor: pointer; - background: $trackColor; - border-radius: $trackBorderRadius; - box-shadow: $trackShadow; -} - -input.range::-ms-track { - width: 100%; - height: $trackHeight; - cursor: pointer; - background: transparent; - border-color: transparent; - border-width: 16px 0; - color: transparent; -} - -input.range::-ms-fill-lower { - background: $trackColor; - border: none; - border-radius: $trackBorderRadius; -} - -input.range::-ms-fill-upper { - background: $trackColor; - border: none; - border-radius: $trackBorderRadius; -} - -input.range:focus::-ms-fill-lower { - background: $trackColor; -} diff --git a/packages/craftcms-legacy/cp/src/css/_shame.scss b/packages/craftcms-legacy/cp/src/css/_shame.scss deleted file mode 100644 index d44ca30a28f..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_shame.scss +++ /dev/null @@ -1,11 +0,0 @@ -_:-ms-lang(x), -.elements .tableview td.checkbox-cell input.checkbox + label, -.elements .tableview td.checkbox-cell div.checkbox { - inset-block-start: 16px; -} - -_:-ms-lang(x), -input.checkbox + label:empty, -div:empty.checkbox { - display: block; -} diff --git a/packages/craftcms-legacy/cp/src/css/_variables.scss b/packages/craftcms-legacy/cp/src/css/_variables.scss deleted file mode 100644 index bfc804fe0ea..00000000000 --- a/packages/craftcms-legacy/cp/src/css/_variables.scss +++ /dev/null @@ -1,96 +0,0 @@ -@use 'sass:color'; -@use '@craftcms/sass/mixins'; - -/** -These variables will be removed in the next major version and area only provided for compatibility. -Use the new values in the `tokens.scss` file instead. -*/ -:root { - --bg-color: var(--body-bg); - --bg-color-hsl: 212deg, 50%, 93%; - - // submit button colors - --primary-color: var(--bg-primary); - --secondary-color: var(--bg-secondary); - --input-color: var(--fg-input); - - // text colors - --medium-dark-text-color: var(--fg-subtle); - --medium-text-color: var(--fg-subtle); - - // font styles - --font-weight-bold: 700; - - // hairline colors - --hairline-color: var(--border-hairline); - --medium-hairline-color: var(--border-hairline-medium); - --dark-hairline-color: var(--border-hairline-dark); - - // focus colors - --light-focus-color: var(--focus-outline-light); - --medium-focus-color: var(--focus-outline-medium); - --dark-focus-color: var(--focus-outline-dark); - - // focus rings - --light-focus-ring: var(--focus-ring-light); - --medium-focus-ring: var(--focus-ring-medium); - --dark-focus-ring: var(--focus-ring-dark); - - // selection colors - --light-sel-color: var(--bg-selection-light); - --dark-sel-color: var(--bg-selection-dark); - - // alert/notice colors - --error-color-rgb: 216 31 35; - --error-color: var(--fg-error); - --warning-color: var(--fg-warning); - --warning-background: var(--bg-warning); - --warning-border-color: var(--border-warning); - --success-color: var(--fg-success); - --notice-color: var(--fg-notice); - --notice-background: var(--bg-notice); - --notice-border-color: var(--border-notice); - - // status colors - --enabled-color: var(--bg-enabled); - --pending-color: var(--bg-pending); - --disabled-color: var(--bg-disabled); - - // misc colors - --indicator-border-color: var(--border-warning-emphasis); - --indicator-icon-color: var(--fg-warning); - - // UI element styles - --small-border-radius: var(--radius-sm); - --medium-border-radius: var(--radius-md); - --large-border-radius: var(--radius-lg); - --menu-border-radius: var(--medium-border-radius); - - // Variables from _main.scss - --ui-control-color: var(--ui-control-fg); - --ui-control-hover-color: var(--ui-control-fg-hover); - --ui-control-active-color: var(--ui-control-fg-active); - --ui-control-static-bg-color: var(--ui-control-bg-static); - --ui-control-bg-color: var(--ui-control-bg); - --ui-control-hover-bg-color: var(--ui-control-bg-hover); - --ui-control-active-bg-color: var(--ui-control-bg-active); - --ui-control-border-radius: var(--ui-control-radius); - --ui-control-height--small: var(--ui-control-height-small); - --light-focus-hsl: 212deg, 96%, 78%; - --dark-focus-hsl: 203deg, 84%, 38%; - --inner-focus-ring: var(--focus-ring-inner); - --touch-target-size: var(--size-touch-target); - --icon-size: var(--size-icon); - --lh: var(--size-line-height); - - // Sidebar - --sidebar-bgColor: var(--sidebar-bg); - - // Nav items (compatibility) - --nav-item-badge-bgColor: var(--nav-item-badge-bg); - --nav-item-badge-fgColor: var(--nav-item-badge-fg); - --nav-item-fgColor-active: var(--nav-item-fg-active); - --nav-item-bgColor-active: var(--nav-item-bg-active); - --nav-item-fgColor-hover: var(--nav-item-fg-hover); - --nav-item-bgColor-hover: var(--nav-item-bg-hover); -} diff --git a/packages/craftcms-legacy/cp/src/css/charts.scss b/packages/craftcms-legacy/cp/src/css/charts.scss deleted file mode 100644 index ac1d3e711f5..00000000000 --- a/packages/craftcms-legacy/cp/src/css/charts.scss +++ /dev/null @@ -1,65 +0,0 @@ -@charset "UTF-8"; - -@import '@craftcms/sass/mixins'; - -.cp-chart { - margin: 0; - height: 100%; - position: relative; -} - -.cp-chart svg { - width: 100%; - height: 100%; -} - -.cp-chart .axis path, -.cp-chart .axis line { - fill: none; - stroke: var(--border-hairline); - shape-rendering: crispedges; -} - -.cp-chart .ticks-axis path, -.cp-chart .ticks-axis line { - fill: none; - stroke: none; - shape-rendering: crispedges; -} - -.cp-chart .ticks-axis g.tick text { - fill: var(--black); - font-size: 11px; -} - -.cp-chart .axis text { - fill: rgb(0 0 0 / 60%); -} - -.cp-chart .grid-line .tick { - stroke: rgb(0 0 0 / 8%); - stroke-opacity: 0.7; - shape-rendering: crispedges; -} - -.cp-chart .grid-line .tick line { - stroke: rgb(0 0 0 / 8%); - stroke-opacity: 0.7; - shape-rendering: crispedges; -} - -.cp-chart .grid-line path { - stroke-width: 0; -} - -.tooltip { - border-radius: 3px; - padding-block: 7px; - padding-inline: 10px; - background: transparentize($white, 0.1); - position: absolute; - z-index: 1000000; - @include shadow; - user-select: none; - pointer-events: none; -} diff --git a/packages/craftcms-legacy/cp/src/css/craft.scss b/packages/craftcms-legacy/cp/src/css/craft.scss deleted file mode 100644 index c1f88e4faa9..00000000000 --- a/packages/craftcms-legacy/cp/src/css/craft.scss +++ /dev/null @@ -1,16 +0,0 @@ -@charset "utf-8"; - -@import 'compat'; -@import 'menu'; -@import 'hud'; -@import 'icon-picker'; -@import 'login'; -@import 'main'; -@import 'cp'; -@import 'range'; -@import 'global-sidebar'; -@import 'craft-spinner'; -@import 'craft-tooltip'; -@import 'entry-type-select'; -@import 'shame'; -@import 'debug_toolbar'; diff --git a/packages/craftcms-legacy/cp/src/fonts/Craft.svg b/packages/craftcms-legacy/cp/src/fonts/Craft.svg deleted file mode 100644 index 53ecb7bd667..00000000000 --- a/packages/craftcms-legacy/cp/src/fonts/Craft.svg +++ /dev/null @@ -1,293 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/fonts/Craft.woff b/packages/craftcms-legacy/cp/src/fonts/Craft.woff deleted file mode 100644 index dbdef31a5eb..00000000000 Binary files a/packages/craftcms-legacy/cp/src/fonts/Craft.woff and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/fonts/Craft.woff2 b/packages/craftcms-legacy/cp/src/fonts/Craft.woff2 deleted file mode 100644 index 96939ee3388..00000000000 Binary files a/packages/craftcms-legacy/cp/src/fonts/Craft.woff2 and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/branch.png b/packages/craftcms-legacy/cp/src/images/branch.png deleted file mode 100644 index b95ff7eb142..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/branch.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/branch_2x.png b/packages/craftcms-legacy/cp/src/images/branch_2x.png deleted file mode 100644 index 9710e0e7c80..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/branch_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/branch_rtl.png b/packages/craftcms-legacy/cp/src/images/branch_rtl.png deleted file mode 100644 index e9ed83d28e4..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/branch_rtl.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/branch_rtl_2x.png b/packages/craftcms-legacy/cp/src/images/branch_rtl_2x.png deleted file mode 100644 index 52e34ae8d8e..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/branch_rtl_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/content-block/grouped.svg b/packages/craftcms-legacy/cp/src/images/content-block/grouped.svg deleted file mode 100644 index 5178325c521..00000000000 --- a/packages/craftcms-legacy/cp/src/images/content-block/grouped.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - grouped - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/content-block/inline.svg b/packages/craftcms-legacy/cp/src/images/content-block/inline.svg deleted file mode 100644 index 6f922adb1ec..00000000000 --- a/packages/craftcms-legacy/cp/src/images/content-block/inline.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - inline - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/content-block/pane.svg b/packages/craftcms-legacy/cp/src/images/content-block/pane.svg deleted file mode 100644 index f49b47908b1..00000000000 --- a/packages/craftcms-legacy/cp/src/images/content-block/pane.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - pane - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/craft.png b/packages/craftcms-legacy/cp/src/images/craft.png deleted file mode 100644 index 5c7e43e3801..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/craft.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/craft_2x.png b/packages/craftcms-legacy/cp/src/images/craft_2x.png deleted file mode 100644 index b9eef75d7b7..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/craft_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/craftcms.svg b/packages/craftcms-legacy/cp/src/images/craftcms.svg deleted file mode 100644 index ce6010dfff0..00000000000 --- a/packages/craftcms-legacy/cp/src/images/craftcms.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/craftcms-legacy/cp/src/images/dev-mode.svg b/packages/craftcms-legacy/cp/src/images/dev-mode.svg deleted file mode 100644 index abdf9a4bfd4..00000000000 --- a/packages/craftcms-legacy/cp/src/images/dev-mode.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - dev-mode - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_bottom.png b/packages/craftcms-legacy/cp/src/images/hudtip_bottom.png deleted file mode 100644 index ee4acace4fe..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_bottom.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_bottom_2x.png b/packages/craftcms-legacy/cp/src/images/hudtip_bottom_2x.png deleted file mode 100644 index 4bf26cca083..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_bottom_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_bottom_gray.png b/packages/craftcms-legacy/cp/src/images/hudtip_bottom_gray.png deleted file mode 100644 index 38415ab897d..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_bottom_gray.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_bottom_gray_2x.png b/packages/craftcms-legacy/cp/src/images/hudtip_bottom_gray_2x.png deleted file mode 100644 index a8598e7c07d..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_bottom_gray_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_left.png b/packages/craftcms-legacy/cp/src/images/hudtip_left.png deleted file mode 100644 index 39f276a0bff..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_left.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_left_2x.png b/packages/craftcms-legacy/cp/src/images/hudtip_left_2x.png deleted file mode 100644 index bcb3ceef955..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_left_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_right.png b/packages/craftcms-legacy/cp/src/images/hudtip_right.png deleted file mode 100644 index 0502652059f..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_right.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_right_2x.png b/packages/craftcms-legacy/cp/src/images/hudtip_right_2x.png deleted file mode 100644 index 5d164fb3406..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_right_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_top.png b/packages/craftcms-legacy/cp/src/images/hudtip_top.png deleted file mode 100644 index a2ee92f71e9..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_top.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/hudtip_top_2x.png b/packages/craftcms-legacy/cp/src/images/hudtip_top_2x.png deleted file mode 100644 index 6a0c1689760..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/hudtip_top_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/check.svg b/packages/craftcms-legacy/cp/src/images/image-editor/check.svg deleted file mode 100644 index b936418ddd3..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/check.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - check - Created with Sketch. - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/crop.svg b/packages/craftcms-legacy/cp/src/images/image-editor/crop.svg deleted file mode 100755 index beb557bd28e..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/crop.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - crop - Created with Sketch. - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/filters.svg b/packages/craftcms-legacy/cp/src/images/image-editor/filters.svg deleted file mode 100755 index d75c48fcebf..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/filters.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - filters - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/flip-horizontal.svg b/packages/craftcms-legacy/cp/src/images/image-editor/flip-horizontal.svg deleted file mode 100755 index e62345f7470..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/flip-horizontal.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - flip-vertical - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/flip-vertical.svg b/packages/craftcms-legacy/cp/src/images/image-editor/flip-vertical.svg deleted file mode 100755 index d189cad532d..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/flip-vertical.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - flip-horizontal - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/focal-point.svg b/packages/craftcms-legacy/cp/src/images/image-editor/focal-point.svg deleted file mode 100755 index 47c9e91ab77..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/focal-point.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - focal-point - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/rotate-left.svg b/packages/craftcms-legacy/cp/src/images/image-editor/rotate-left.svg deleted file mode 100755 index 2ebf169dc3e..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/rotate-left.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - rotate-left - Created with Sketch. - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/rotate-right.svg b/packages/craftcms-legacy/cp/src/images/image-editor/rotate-right.svg deleted file mode 100755 index 1031cd87aff..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/rotate-right.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - rotate-right - Created with Sketch. - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/image-editor/unconstrained.svg b/packages/craftcms-legacy/cp/src/images/image-editor/unconstrained.svg deleted file mode 100755 index 9085e5f2cda..00000000000 --- a/packages/craftcms-legacy/cp/src/images/image-editor/unconstrained.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - unconstrained - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/listview_sort.png b/packages/craftcms-legacy/cp/src/images/listview_sort.png deleted file mode 100644 index 7112eb07e77..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/listview_sort.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/listview_sort_2x.png b/packages/craftcms-legacy/cp/src/images/listview_sort_2x.png deleted file mode 100644 index 292d56d722c..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/listview_sort_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/preview/chrome-phone-bottom.svg b/packages/craftcms-legacy/cp/src/images/preview/chrome-phone-bottom.svg deleted file mode 100644 index a7cf12888d8..00000000000 --- a/packages/craftcms-legacy/cp/src/images/preview/chrome-phone-bottom.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - mobile_bottom - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/preview/chrome-phone-top.svg b/packages/craftcms-legacy/cp/src/images/preview/chrome-phone-top.svg deleted file mode 100644 index 3ef17724acd..00000000000 --- a/packages/craftcms-legacy/cp/src/images/preview/chrome-phone-top.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - mobile_top - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/preview/chrome-tablet-bottom.svg b/packages/craftcms-legacy/cp/src/images/preview/chrome-tablet-bottom.svg deleted file mode 100644 index 6e3d8532f50..00000000000 --- a/packages/craftcms-legacy/cp/src/images/preview/chrome-tablet-bottom.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - tablet_bottom - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/preview/chrome-tablet-top.svg b/packages/craftcms-legacy/cp/src/images/preview/chrome-tablet-top.svg deleted file mode 100644 index b41a22be3ae..00000000000 --- a/packages/craftcms-legacy/cp/src/images/preview/chrome-tablet-top.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - tablet_top - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/preview/icon-desktop.svg b/packages/craftcms-legacy/cp/src/images/preview/icon-desktop.svg deleted file mode 100644 index 89cb6b4642d..00000000000 --- a/packages/craftcms-legacy/cp/src/images/preview/icon-desktop.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - diff --git a/packages/craftcms-legacy/cp/src/images/preview/icon-phone.svg b/packages/craftcms-legacy/cp/src/images/preview/icon-phone.svg deleted file mode 100644 index 23a25f283d4..00000000000 --- a/packages/craftcms-legacy/cp/src/images/preview/icon-phone.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - diff --git a/packages/craftcms-legacy/cp/src/images/preview/icon-tablet.svg b/packages/craftcms-legacy/cp/src/images/preview/icon-tablet.svg deleted file mode 100644 index be15149887e..00000000000 --- a/packages/craftcms-legacy/cp/src/images/preview/icon-tablet.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - diff --git a/packages/craftcms-legacy/cp/src/images/resizehandle.png b/packages/craftcms-legacy/cp/src/images/resizehandle.png deleted file mode 100644 index e0e86d44999..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/resizehandle.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/resizehandle_2x.png b/packages/craftcms-legacy/cp/src/images/resizehandle_2x.png deleted file mode 100644 index fe5de540d19..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/resizehandle_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/resizehandle_rtl.png b/packages/craftcms-legacy/cp/src/images/resizehandle_rtl.png deleted file mode 100644 index f3b377436e6..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/resizehandle_rtl.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/resizehandle_rtl_2x.png b/packages/craftcms-legacy/cp/src/images/resizehandle_rtl_2x.png deleted file mode 100644 index 4cdae0b9ff2..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/resizehandle_rtl_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/success.png b/packages/craftcms-legacy/cp/src/images/success.png deleted file mode 100644 index 34b17360eed..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/success.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/success_2x.png b/packages/craftcms-legacy/cp/src/images/success_2x.png deleted file mode 100644 index b5a75227849..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/success_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/temp_folder.png b/packages/craftcms-legacy/cp/src/images/temp_folder.png deleted file mode 100644 index ee8eb2bd6f0..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/temp_folder.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/user.svg b/packages/craftcms-legacy/cp/src/images/user.svg deleted file mode 100644 index 66f5df142f3..00000000000 --- a/packages/craftcms-legacy/cp/src/images/user.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - diff --git a/packages/craftcms-legacy/cp/src/images/view-modes/blocks.svg b/packages/craftcms-legacy/cp/src/images/view-modes/blocks.svg deleted file mode 100644 index f99bbb1bc1f..00000000000 --- a/packages/craftcms-legacy/cp/src/images/view-modes/blocks.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - blocks - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/view-modes/cards-grid.svg b/packages/craftcms-legacy/cp/src/images/view-modes/cards-grid.svg deleted file mode 100644 index 5c810d2781b..00000000000 --- a/packages/craftcms-legacy/cp/src/images/view-modes/cards-grid.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - cards-grid - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/view-modes/cards.svg b/packages/craftcms-legacy/cp/src/images/view-modes/cards.svg deleted file mode 100644 index 15856022bd9..00000000000 --- a/packages/craftcms-legacy/cp/src/images/view-modes/cards.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - cards - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/view-modes/index.svg b/packages/craftcms-legacy/cp/src/images/view-modes/index.svg deleted file mode 100644 index fe07e751b07..00000000000 --- a/packages/craftcms-legacy/cp/src/images/view-modes/index.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - index - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/view-modes/list-inline.svg b/packages/craftcms-legacy/cp/src/images/view-modes/list-inline.svg deleted file mode 100644 index fb667d9a35f..00000000000 --- a/packages/craftcms-legacy/cp/src/images/view-modes/list-inline.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - list-inline - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/view-modes/list.svg b/packages/craftcms-legacy/cp/src/images/view-modes/list.svg deleted file mode 100644 index aa5f3eb2d86..00000000000 --- a/packages/craftcms-legacy/cp/src/images/view-modes/list.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - list - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/view-modes/thumbs.svg b/packages/craftcms-legacy/cp/src/images/view-modes/thumbs.svg deleted file mode 100644 index c943ea177e2..00000000000 --- a/packages/craftcms-legacy/cp/src/images/view-modes/thumbs.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - thumbs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/craftcms-legacy/cp/src/images/welcome_logo.png b/packages/craftcms-legacy/cp/src/images/welcome_logo.png deleted file mode 100644 index 2e4d37292e7..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/welcome_logo.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/images/welcome_logo_2x.png b/packages/craftcms-legacy/cp/src/images/welcome_logo_2x.png deleted file mode 100644 index 80958f0234d..00000000000 Binary files a/packages/craftcms-legacy/cp/src/images/welcome_logo_2x.png and /dev/null differ diff --git a/packages/craftcms-legacy/cp/src/js/CraftCopyAttribute.js b/packages/craftcms-legacy/cp/src/js/CraftCopyAttribute.js deleted file mode 100644 index 08cf664c304..00000000000 --- a/packages/craftcms-legacy/cp/src/js/CraftCopyAttribute.js +++ /dev/null @@ -1,86 +0,0 @@ -class CraftCopyAttribute extends HTMLElement { - copyValue(event) { - this.input.select(); - document.execCommand('copy'); - Craft.cp.displayNotice(Craft.t('app', 'Copied to clipboard.')); - $(this.btn).trigger('copy'); - this.input.setSelectionRange(0, 0); - this.btn.focus(); - } - - /** - * - * @param {KeyboardEvent|PointerEvent} event - */ - handleTrigger(event) { - if ( - event instanceof KeyboardEvent && - (event.key === ' ' || event.key === 'Enter') - ) { - event.preventDefault(); - this.copyValue(); - } - - if (event instanceof PointerEvent) { - this.copyValue(); - } - } - - renderInput() { - const input = document.createElement('input'); - input.value = this.value; - input.classList.add('visually-hidden'); - input.readOnly = true; - input.size = Math.max(this.value.length, 1); - input.tabIndex = -1; - input.ariaHidden = 'true'; - - this.input = input; - this.prepend(this.input); - } - - renderIcon() { - const a11yText = document.createElement('span'); - a11yText.classList.add('visually-hidden'); - a11yText.innerText = Craft.t('app', 'Copy to clipboard'); - this.btn.appendChild(a11yText); - - const icon = document.createElement('span'); - icon.ariaHidden = true; - icon.setAttribute('data-icon', 'clipboard'); - this.btn.appendChild(icon); - } - - renderButton() { - const button = document.createElement('button'); - button.type = 'button'; - button.addEventListener('click', this.handleTrigger.bind(this)); - button.addEventListener('keydown', this.handleTrigger.bind(this)); - - button.innerText = this.value; - - this.btn = button; - this.appendChild(this.btn); - } - - connectedCallback() { - this.value = - (this.getAttribute('value') || this.innerText).trim() || - this.innerText.trim(); - this.innerHTML = ''; - - this.renderButton(); - this.renderInput(); - this.renderIcon(); - } - - disconnectedCallback() { - // put the "value" attribute back into - // so that when connectedCallback() is called after insetBefore/insertAfter - // everything can get initialised as expected - // we can't use Element.moveBefore/Element.moveAfter as those are experimental at the moment and not available in Safari & FF - this.setAttribute('value', this.value); - } -} - -customElements.define('craft-copy-attribute', CraftCopyAttribute); diff --git a/packages/craftcms-legacy/cp/src/js/CraftGlobalSidebar.js b/packages/craftcms-legacy/cp/src/js/CraftGlobalSidebar.js deleted file mode 100644 index 372d0fbd012..00000000000 --- a/packages/craftcms-legacy/cp/src/js/CraftGlobalSidebar.js +++ /dev/null @@ -1,64 +0,0 @@ -class CraftGlobalSidebar extends HTMLElement { - get items() { - return this.querySelectorAll('.sidebar-action'); - } - - connectedCallback() { - this.trigger = this.querySelector('#sidebar-trigger'); - - if (this.trigger) { - this.trigger.addEventListener('craft-show', this.expand.bind(this)); - this.trigger.addEventListener('craft-hide', this.collapse.bind(this)); - } - } - - disconnectedCallback() { - if (this.trigger) { - this.trigger.removeEventListener('open', this.expand.bind(this)); - this.trigger.removeEventListener('close', this.collapse.bind(this)); - } - - this.expand(); - } - - itemHasTooltip(item) { - return item.querySelector('craft-tooltip'); - } - - createTooltips() { - if (this.items) { - this.items.forEach((item) => { - if (this.itemHasTooltip(item)) return; - - const tooltip = document.createElement('craft-tooltip'); - tooltip.setAttribute('placement', 'right'); - tooltip.setAttribute('trigger', `.sidebar-action`); - tooltip.setAttribute('text', item.querySelector('.label')?.textContent); - item.append(tooltip); - }); - } - } - - destroyTooltips() { - if (this.items) { - this.items.forEach((item) => { - const tooltip = item.querySelector('craft-tooltip'); - tooltip?.remove(); - }); - } - } - - expand() { - document.body.setAttribute('data-sidebar', 'expanded'); - Craft.setCookie('sidebar', 'expanded'); - this.destroyTooltips(); - } - - collapse() { - document.body.setAttribute('data-sidebar', 'collapsed'); - Craft.setCookie('sidebar', 'collapsed'); - this.createTooltips(); - } -} - -customElements.define('craft-global-sidebar', CraftGlobalSidebar); diff --git a/packages/craftcms-legacy/cp/src/js/CraftTooltip.js b/packages/craftcms-legacy/cp/src/js/CraftTooltip.js deleted file mode 100644 index 4f2ab536ed6..00000000000 --- a/packages/craftcms-legacy/cp/src/js/CraftTooltip.js +++ /dev/null @@ -1,332 +0,0 @@ -import { - arrow, - autoUpdate, - computePosition, - flip, - offset, - shift, -} from '@floating-ui/dom'; - -/** - * Tooltip - * - * Renders a tooltip on hover or focus of the parent element. - * - * Tooltips are used to provide additional or context for an element. By default - * the tooltip will be positioned below an element and will avoid the edges - * of the browser window. - * - * @property {'top'|'top-start'|'top-end'|'right'|'right-start'|'right-end'|'bottom'|'bottom-start'|'bottom-end'|'left'|'left-start'|'left-end'} placement - The placement of the tooltip relative to the parent element. - * @property {boolean} arrow - Whether the tooltip should have an arrow. - * @property {number} offset - The offset of the tooltip from the parent element. - * @property {boolean} self-managed - When true, the tooltip will be its own trigger. - * @property {string} text - Text content for the tooltip - * @property {string} trigger - Selector for the element that should trigger the tooltip. If `self-managed` is set, this setting will be ignored. - * @property {number} delay - The delay before the tooltip is shown on mouseentery. - * @method show - Show the tooltip. - * @method hide - Hide the tooltip. - * @method update - Update the position of the tooltip. - * - * @example - */ -class CraftTooltip extends HTMLElement { - static observedAttributes = ['text', 'placement']; - - get triggerElement() { - if (this.selfManaged) { - return this; - } - - if (this.getAttribute('trigger')) { - return this.closest(this.getAttribute('trigger')); - } - - return this.querySelector('a,button,[role="button"]'); - } - - connectedCallback() { - this.abortController = new AbortController(); - - this.arrowElement = this.querySelector('.arrow'); - this.selfManaged = this.hasAttribute('self-managed'); - - this.arrow = this.getAttribute('arrow') !== 'false'; - this.offset = this.hasAttribute('offset') - ? parseInt(this.getAttribute('offset'), 10) - : 8; - - this.placement = this.getAttribute('placement') || 'bottom'; - this.direction = getComputedStyle(this).direction; - this.delay = this.getAttribute('delay') || 500; - this.delayTimeout = null; - this.maxWidth = this.getAttribute('max-width') || '220px'; - this.text = this.getAttribute('text') || this.innerText; - this.showing = false; - this.lastShow = 0; - this.eventDelay = 150; - - this.renderTooltip(); - this.renderInner(); - - if (this.arrow && !this.arrowElement) { - this.renderArrow(); - } - - this.listeners = [ - ['mouseenter', this.handleMouseEnter], - ['mouseleave', this.handleMouseLeave], - ['keyup', this.handleKeyUp], - ['click', this.handleClick], - ['focusin', this.handleFocusIn], - ['focusout', this.handleFocusOut], - ]; - - if (!this.triggerElement) { - console.warn('No trigger found for tooltip', this); - return false; - } - - // Make sure the trigger accepts pointer events - this.triggerElement.style.pointerEvents = 'auto'; - - this.listeners.forEach(([event, handler]) => { - this.triggerElement.addEventListener(event, (e) => handler(e), { - signal: this.abortController.signal, - }); - }); - - // Update & hide to make sure everything is where it needs to be - this.update(); - this.hide(); - } - - disconnectedCallback() { - this.hide(); - this.abortController.abort(); - } - - attributeChangedCallback(name, oldValue, newValue) { - if (name === 'text' && this.inner) { - this.inner.innerText = newValue; - - // innerText will remove the arrow, so we have to put it back if we need it. - if (this.arrow) { - this.renderArrow(); - this.update(); - } - } - - if (name === 'placement') { - this.placement = newValue; - } - } - - renderTooltip() { - this.tooltip = document.createElement('span'); - this.tooltip.classList.add('craft-tooltip'); - this.tooltip.style['max-width'] = this.maxWidth; - - // Keep the tooltip open when the user is hovering over it. - this.tooltip.addEventListener('mouseenter', () => this.show(), { - signal: this.abortController.signal, - }); - this.tooltip.addEventListener('mouseleave', this.hide, { - signal: this.abortController.signal, - }); - - /** - * We need to append the tooltip to the body because - * the `container-size` property will create a new context - * for position: fixed which is a problem when using `strategy: fixed` - */ - window.document.body.appendChild(this.tooltip); - } - - /** - * Renders an inner container so we can use padding for the offset and - * maintain a better hover experience for users using zoom. - */ - renderInner() { - this.inner = document.createElement('span'); - this.inner.classList.add('inner'); - this.inner.innerText = this.text; - - // Replace the content with the inner container - this.tooltip.appendChild(this.inner); - } - - renderArrow() { - this.arrowElement = document.createElement('span'); - this.arrowElement.classList.add('arrow'); - this.inner.appendChild(this.arrowElement); - } - - handleKeyUp = (e) => { - if (e?.key && e.key === 'Escape') { - this.hide(); - } - }; - - handleMouseEnter = () => { - this.isHovering = true; - - if (this.delayTimeout) { - clearTimeout(this.delayTimeout); - } - - // Open the tooltip after the delay - this.delayTimeout = setTimeout(() => { - // Check if the user is still over the tooltip before doing anything - if (!this.isHovering) { - return; - } - - this.show(); - }, this.delay); - }; - - handleMouseLeave = () => { - this.isHovering = false; - - if (this.delayTimeout) { - clearTimeout(this.delayTimeout); - } - - this.hide(); - }; - - handleFocusIn = () => { - const currentTime = Date.now(); - this.lastShow = currentTime; - - if (this.delayTimeout) { - clearTimeout(this.delayTimeout); - } - - // Only show the tooltip if it's not already open - if (!this.showing) { - // Check that no click event occurred shortly after - this.delayTimeout = setTimeout(() => { - if (currentTime === this.lastShow) { - this.show(); - } - }, this.eventDelay); - } - - this.show(); - }; - - handleFocusOut = () => { - if (this.delayTimeout) { - clearTimeout(this.delayTimeout); - } - - this.hide(); - }; - - handleClick = () => { - if (this.delayTimeout) { - clearTimeout(this.delayTimeout); - } - - const currentTime = Date.now(); - const timeSinceLastShow = currentTime - this.lastShow; - this.lastShow = currentTime; - - // If the click happened very soon after focus, treat it as a single action - if (timeSinceLastShow < this.eventDelay) { - this.show(); - } else { - this.toggle(); - } - }; - - toggle = () => { - if (this.showing) { - this.hide(); - } else { - this.show(); - } - }; - - show = () => { - if (!this.triggerElement || !this.tooltip) { - return; - } - - autoUpdate(this.triggerElement, this.tooltip, this.update); - Object.assign(this.tooltip.style, { - opacity: 1, - // Make sure if a user hovers over the label itself, it stays open - pointerEvents: 'auto', - zIndex: 101, - }); - this.showing = true; - }; - - hide = () => { - Object.assign(this.tooltip.style, { - opacity: 0, - pointerEvents: 'none', - }); - - this.showing = false; - }; - - getStaticSide() { - return { - top: 'bottom', - right: 'left', - bottom: 'top', - left: 'right', - }[this.placement.split('-')[0]]; - } - - cleanup() { - return autoUpdate(this.triggerElement, this.tooltip, this.update); - } - - update = () => { - if (!this.triggerElement || !this.tooltip) { - return; - } - - computePosition(this.triggerElement, this.tooltip, { - strategy: 'fixed', - placement: this.placement, - middleware: [ - flip(), - shift({padding: 10}), - offset(0), - ...(this.arrow ? [arrow({element: this.arrowElement})] : []), - ], - }).then(({x, y, middlewareData, placement}) => { - // Placement may have changed - this.setAttribute('placement', placement); - - Object.assign(this.tooltip.style, { - left: `${x}px`, - top: `${y}px`, - padding: '0px', - // Add padding to the static side for accessible hovers - [`padding${Craft.uppercaseFirst(this.getStaticSide())}`]: `${this.offset}px`, - }); - - if (!this.arrowElement) { - return; - } - - const {x: arrowX, y: arrowY} = middlewareData.arrow; - this.arrowElement.dataset.placement = placement; - Object.assign(this.arrowElement.style, { - left: arrowX != null ? `${arrowX}px` : '', - top: arrowY != null ? `${arrowY}px` : '', - right: '', - bottom: '', - [this.getStaticSide()]: '-4px', - }); - }); - }; -} - -customElements.define('craft-legacy-tooltip', CraftTooltip); diff --git a/packages/craftcms-legacy/cp/src/js/ImageUpload.js b/packages/craftcms-legacy/cp/src/js/ImageUpload.js deleted file mode 100644 index c4914d4abd1..00000000000 --- a/packages/craftcms-legacy/cp/src/js/ImageUpload.js +++ /dev/null @@ -1,158 +0,0 @@ -/** global: Craft */ -/** global: Garnish */ - -/** - * Image upload class for user photos, site icon and logo. - */ -Craft.ImageUpload = Garnish.Base.extend( - { - $container: null, - progressBar: null, - uploader: null, - - init: function (settings) { - this.setSettings(settings, Craft.ImageUpload.defaults); - this.$container = $(this.settings.containerSelector); - this.initImageUpload(); - }, - - initImageUpload: function () { - this.progressBar = new Craft.ProgressBar( - $('
').appendTo(this.$container) - ); - - const options = { - url: Craft.getActionUrl(this.settings.uploadAction), - formData: this.settings.postParameters, - fileInput: this.$container - .find(this.settings.fileInputSelector) - .toArray(), - }; - - options.on = {}; - options.on.start = this._onUploadStart.bind(this); - options.on.progress = this._onUploadProgress.bind(this); - options.on.done = this._onUploadComplete.bind(this); - options.on.fail = this._onUploadFailure.bind(this); - - this.uploader = new Craft.Uploaders.Uploader(this.$container[0], options); - - this.initButtons(); - }, - - initButtons: function () { - this.$container - .find(this.settings.uploadButtonSelector) - .on('click', (ev) => { - this.$container - .find(this.settings.fileInputSelector) - .trigger('click'); - }); - - this.$container - .find(this.settings.deleteButtonSelector) - .on('click', (ev) => { - if ( - confirm( - Craft.t('app', 'Are you sure you want to delete this image?') - ) - ) { - $(ev.currentTarget) - .parent() - .append('
'); - - Craft.sendActionRequest('POST', this.settings.deleteAction, { - data: this.settings.postParameters, - }).then(({data}) => { - this.refreshImage(data); - }); - } - }); - }, - - refreshImage: function (response) { - this.uploader.destroy(); - this.$container.replaceWith((this.$container = $(response.html))); - this.settings.onAfterRefreshImage(response); - Craft.cp.elementThumbLoader.load(this.$container); - this.initImageUpload(); - }, - - /** - * On upload start. - */ - _onUploadStart: function (event) { - this.progressBar.$progressBar.css({ - top: Math.round(this.$container.outerHeight() / 2) - 6, - }); - - this.$container.addClass('uploading'); - this.progressBar.resetProgressBar(); - this.progressBar.showProgressBar(); - }, - - /** - * On upload progress. - */ - _onUploadProgress: function (data) { - var progress = parseInt((data.loaded / data.total) * 100, 10); - this.progressBar.setProgressPercentage(progress); - }, - - /** - * On a file being uploaded. - */ - _onUploadComplete: function ({result}) { - this.refreshImage(result); - - this.progressBar.hideProgressBar(); - this.$container.removeClass('uploading'); - }, - - /** - * On Upload Failure. - */ - _onUploadFailure: function ({error, canceled, file}) { - if (canceled) { - this.progressBar.hideProgressBar(); - this.$container.removeClass('uploading'); - return; - } - - let message = error instanceof Error ? error.message : undefined; - const {errors = {}} = error?.data || {}; - const filename = error?.data?.filename || file?.name; - let errorMessages = errors ? Object.values(errors).flat() : []; - - if (!message) { - if (errorMessages.length) { - message = errorMessages.join('\n'); - } else if (filename) { - message = Craft.t('app', 'Upload failed for “{filename}”.', { - filename, - }); - } else { - message = Craft.t('app', 'Upload failed.'); - } - } - - Craft.cp.displayError(message); - this.progressBar.hideProgressBar(); - this.$container.removeClass('uploading'); - }, - }, - { - defaults: { - postParameters: {}, - uploadAction: '', - deleteAction: '', - fileInputSelector: '', - - onAfterRefreshImage: $.noop, - containerSelector: null, - - uploadButtonSelector: null, - deleteButtonSelector: null, - }, - } -); diff --git a/packages/craftcms-legacy/cp/src/js/Queue.js b/packages/craftcms-legacy/cp/src/js/Queue.js deleted file mode 100644 index 70a88ae28fb..00000000000 --- a/packages/craftcms-legacy/cp/src/js/Queue.js +++ /dev/null @@ -1,141 +0,0 @@ -/** global: Craft */ -/** global: Garnish */ - -/** - * Queue - */ -Craft.Queue = Garnish.Base.extend({ - running: false, - paused: false, - pausedForVisibility: false, - jobs: null, - - get length() { - return this.jobs.length; - }, - - get isPaused() { - return this.paused || this.pausedForVisibility; - }, - - init: function () { - this.jobs = []; - - Garnish.$doc.on('visibilitychange', () => { - if (this.pausedForVisibility && Craft.isVisible()) { - this.pausedForVisibility = false; - this._resume(); - } - }); - }, - - /** - * Adds a job to the queue. - * @param {function} job - * @returns {Promise} - */ - push: function (job) { - return this._add(job, 'push'); - }, - - /** - * Adds a job to the beginning of the queue. - * @param {function} job - * @returns {Promise} - */ - unshift: function (job) { - return this._add(job, 'unshift'); - }, - - pause: function () { - if (!this.paused) { - this.paused = true; - if (!this.pausedForVisibility) { - this.trigger('pause'); - } - } - }, - - resume: function () { - if (this.paused) { - this.paused = false; - this._resume(); - } - }, - - /** - * Adds a job to the queue. - * @param {function} job - * @param {string} method - * @returns {Promise} - * @private - */ - _add: function (job, method) { - return new Promise((resolve, reject) => { - this.jobs[method](() => { - return new Promise((qResolve, qReject) => { - job() - .then((value) => { - // ...arguments doesn't work here :( - resolve(value); - qResolve(); - }) - .catch((value) => { - // ...arguments doesn't work here :( - reject(value); - qReject(); - }); - }); - }); - - if (!this.running) { - this.trigger('beforeRun'); - this.running = true; - this._exec(); - } - }); - }, - - clear: function () { - this.jobs.length = 0; - }, - - /** - * Runs the next job in the queue. - * @private - */ - _exec: function () { - if (!this.jobs.length) { - this.running = false; - this.trigger('afterRun'); - return; - } - - if (!this.pausedForVisibility && !Craft.isVisible()) { - this.pausedForVisibility = true; - if (!this.paused) { - this.trigger('pause'); - } - } - - if (this.paused || this.pausedForVisibility) { - return; - } - - this.trigger('beforeExec'); - const job = this.jobs.shift(); - job().finally(() => { - this.trigger('afterExec'); - this._exec(); - }); - }, - - _resume: function () { - if (!this.isPaused) { - this.trigger('resume'); - this._exec(); - } - }, -}); - -Craft.queue = new Craft.Queue(); diff --git a/packages/craftcms-legacy/cp/webpack.config.js b/packages/craftcms-legacy/cp/webpack.config.js deleted file mode 100644 index 1b826ecc068..00000000000 --- a/packages/craftcms-legacy/cp/webpack.config.js +++ /dev/null @@ -1,30 +0,0 @@ -/* jshint esversion: 6 */ -/* globals module, require, webpack */ -const {getConfig} = require('@craftcms/webpack'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const Ttf2Woff2Plugin = require('./Ttf2Woff2Plugin'); - -module.exports = getConfig({ - context: __dirname, - config: { - entry: { - cp: './Craft.js', - }, - output: { - path: __dirname + '/../../../cms-assets/resources/legacy/cp/dist', - }, - plugins: [ - new Ttf2Woff2Plugin(), - new CopyWebpackPlugin({ - patterns: [ - // Only some of the images are used in the CSS. So we need to make - // sure we have them all - { - from: './images/**/*', - to: '.', - }, - ], - }), - ], - }, -}); diff --git a/packages/craftcms-legacy/cp/src/js/AdminTable.js b/packages/craftcms-legacy/cpcompat/src/admin-table.js similarity index 97% rename from packages/craftcms-legacy/cp/src/js/AdminTable.js rename to packages/craftcms-legacy/cpcompat/src/admin-table.js index d36d64b1e49..fb5b71bda20 100644 --- a/packages/craftcms-legacy/cp/src/js/AdminTable.js +++ b/packages/craftcms-legacy/cpcompat/src/admin-table.js @@ -1,7 +1,10 @@ /** global: Craft */ /** global: Garnish */ /** - * Admin table class + * The legacy `Craft.AdminTable`, used by the legacy dashboard and by plugins' + * settings screens. Core's admin tables are Vue components. + * + * Loaded CP-wide via CraftCms\Yii2Adapter\View\LegacyAssets\CpCompatAsset. */ Craft.AdminTable = Garnish.Base.extend( { diff --git a/packages/craftcms-legacy/cp/src/js/AssetsFieldSettings.js b/packages/craftcms-legacy/cpcompat/src/assets-field-settings.js similarity index 91% rename from packages/craftcms-legacy/cp/src/js/AssetsFieldSettings.js rename to packages/craftcms-legacy/cpcompat/src/assets-field-settings.js index 802538e09ed..6993ce27c3b 100644 --- a/packages/craftcms-legacy/cp/src/js/AssetsFieldSettings.js +++ b/packages/craftcms-legacy/cpcompat/src/assets-field-settings.js @@ -1,7 +1,10 @@ /** global: Craft */ /** global: Garnish */ /** - * Assets field settings + * Assets field settings for the legacy relation field settings template, which + * only the Yii2 adapter renders. Core builds these settings with `settingsUi()`. + * + * Loaded CP-wide via CraftCms\Yii2Adapter\View\LegacyAssets\CpCompatAsset. */ Craft.AssetsFieldSettings = Garnish.Base.extend({ $useSingleFolderInput: null, diff --git a/packages/craftcms-legacy/cp/src/js/CP.js b/packages/craftcms-legacy/cpcompat/src/craft-cp.js similarity index 79% rename from packages/craftcms-legacy/cp/src/js/CP.js rename to packages/craftcms-legacy/cpcompat/src/craft-cp.js index e32c7b790e9..5daca5c3af6 100644 --- a/packages/craftcms-legacy/cp/src/js/CP.js +++ b/packages/craftcms-legacy/cpcompat/src/craft-cp.js @@ -10,14 +10,10 @@ Craft.CP = Garnish.Base.extend( { _elementThumbLoader: null, animationBlocker: null, - announcerTimeout: null, - modalLayers: [], $nav: null, $navToggle: null, - $globalLiveRegion: null, $globalSkipLinkList: null, - $activeLiveRegion: null, $globalSidebar: null, $globalContainer: null, $mainContainer: null, @@ -70,7 +66,6 @@ Craft.CP = Garnish.Base.extend( checkForUpdatesFailureCallbacks: null, copyElementCallbacks: null, - elementCopyNotification: null, resizeTimeout: null, @@ -99,9 +94,7 @@ Craft.CP = Garnish.Base.extend( // Find all the key elements this.$nav = $('#nav'); this.$navToggle = $('#primary-nav-toggle'); - this.$globalLiveRegion = $('#global-live-region'); this.$globalSkipLinkList = $('#global-skip-links'); - this.$activeLiveRegion = this.$globalLiveRegion; this.$globalSidebar = $('#global-sidebar'); this.$globalContainer = $('#global-container'); this.$mainContainer = $('#main-container'); @@ -179,15 +172,6 @@ Craft.CP = Garnish.Base.extend( this.$detailsSkipLink.attr('href', '#details-toggle-wrapper'); }); - // Layers - Garnish.uiLayerManager.on('addLayer', () => { - this.handleLayerUpdates(); - }); - - Garnish.uiLayerManager.on('removeLayer', () => { - this.handleLayerUpdates(); - }); - // Does this page have a primary form? if (!this.$primaryForm.length) { this.$primaryForm = $('form[data-saveshortcut]:first'); @@ -337,16 +321,8 @@ Craft.CP = Garnish.Base.extend( this.updateNotificationHeadingDisplay(); }); - // See if there are any copied elements + // Held until the element clipboard module takes over the clipboard methods this.copyElementCallbacks = []; - if (Craft.username) { - const elementInfo = Craft.getLocalStorage('copiedElements'); - if (elementInfo) { - this.showElementCopyNotification(elementInfo, { - animate: false, - }); - } - } }, get $contentHeader() { @@ -778,86 +754,6 @@ Craft.CP = Garnish.Base.extend( this.handleSkipLinkVisibility(); }, - handleLayerUpdates: function () { - // Exit if the number of modal layers remains the same - if (Garnish.uiLayerManager.modalLayers.length === this.modalLayers.length) - return; - - // Store modal layers - this.modalLayers = Garnish.uiLayerManager.modalLayers; - - if (this.announcerTimeout) { - clearTimeout(this.announcerTimeout); - } - - if (Garnish.uiLayerManager.modalLayers.length === 0) { - this.$activeLiveRegion = this.$globalLiveRegion; - } else { - const $modal = Garnish.uiLayerManager.highestModalLayer.$container; - let modalObj; - - if ($modal.hasClass('modal')) { - modalObj = $modal.data('modal'); - } else if ($modal.hasClass('slideout-container')) { - modalObj = $modal.find('.slideout').data('slideout'); - } else if ($modal.hasClass('slideout-panel')) { - // A Vue slideout (`SlideoutPanel.vue`) has no jQuery object behind - // it, just its own live region. - modalObj = { - $liveRegion: $modal.children('[data-slideout-live-region]'), - }; - } - - if (!modalObj) { - console.warn('There is no modal object'); - } - - if (!modalObj?.$liveRegion) { - console.warn('There is no live region in the active modal layer.'); - this.$activeLiveRegion = null; - } else { - this.$activeLiveRegion = modalObj.$liveRegion; - } - } - - // Empty in case it was already populated and not cleared - this.clearLiveRegion(); - }, - - /** - * Resolves a live region reference to its underlying element. - * - * `$liveRegion` comes in two shapes as jQuery gets removed: the jQuery-era - * modals (`Garnish.Modal`, `Craft.PreviewFileModal`) and - * `$globalLiveRegion` set it to a jQuery collection, while ported - * components set it to a plain element — `Craft.Slideout` does today, and - * the ported Garnish `Modal` builds one the same way (though it isn't - * reachable from `handleLayerUpdates` yet, since it registers itself in a - * `WeakMap` rather than via `$container.data('modal')`). Accept either so - * both can coexist for the rest of the port. - * - * @param {jQuery|Element|null} region - * @returns {Element|null} - */ - getLiveRegionElement: function (region) { - if (!region) { - return null; - } - - return region instanceof Element ? region : (region[0] ?? null); - }, - - /** - * Empties the active live region, whichever form it takes. - */ - clearLiveRegion: function () { - const liveRegion = this.getLiveRegionElement(this.$activeLiveRegion); - - if (liveRegion) { - liveRegion.textContent = ''; - } - }, - updateResponsiveTables: function () { for ( this.updateResponsiveTables._i = 0; @@ -973,269 +869,20 @@ Craft.CP = Garnish.Base.extend( * the newest, and `data-stack-hidden` beyond the newest * `Craft.CP.Notification.visibleCount`. CSS does the rest. */ + // `` manages the stack, legacy notifications included updateNotificationStack() { - const container = this.$notificationContainer[0]; - - if (!container) { - return; - } - - this._initNotificationStack(container); - - const visibleCount = Craft.CP.Notification.visibleCount; - const notifications = this._stackedNotifications(container); - - if (!this._notificationResizeObserver && window.ResizeObserver) { - this._notificationResizeObserver = new ResizeObserver(() => { - this.updateNotificationStack(); - }); - } - - // A notification's own height, whether or not the collapsed stack is - // currently forcing it to the front one's. Measuring the box itself - // would feed the collapsed/spread state back into the layout. - const naturalHeight = (notification) => { - const inner = notification.querySelector('.notification-inner'); - if (!inner) { - return notification.offsetHeight; - } - const style = getComputedStyle(notification); - return ( - inner.offsetHeight + - parseFloat(style.paddingBlockStart) + - parseFloat(style.paddingBlockEnd) - ); - }; - - let offset = 0; - - notifications.forEach((notification, index) => { - // The content, not the box, which the collapsed stack resizes. - const inner = notification.querySelector('.notification-inner'); - if (inner) { - this._notificationResizeObserver?.observe(inner); - } - notification.style.setProperty('--cp-message-index', index); - notification.style.setProperty('--cp-message-offset', `${offset}px`); - notification.style.zIndex = String(notifications.length - index); - notification.toggleAttribute('data-stack-behind', index > 0); - notification.toggleAttribute( - 'data-stack-hidden', - index >= visibleCount - ); - // Hidden ones can't be tabbed to or read until newer ones close. - notification.inert = index >= visibleCount; - if (index < visibleCount) { - offset += naturalHeight(notification); - } - }); - - // How many notifications peek out from behind the front one, so the - // collapsed stack's hover area covers them too. - container.style.setProperty( - '--cp-messages-behind', - String(Math.max(Math.min(notifications.length, visibleCount) - 1, 0)) - ); - container.style.setProperty( - '--cp-messages-front-height', - `${notifications[0] ? naturalHeight(notifications[0]) : 0}px` - ); - container.style.setProperty('--cp-messages-height', `${offset}px`); - container.style.setProperty( - '--cp-messages-count', - String(Math.min(notifications.length, visibleCount)) - ); - - this._updateNotificationStackExpanded(); + this.$notificationContainer[0]?.updateStack?.(); }, - /** - * The notifications on screen, newest first, leaving out any on their way - * out. - */ - _stackedNotifications(container) { - return [ - ...container.querySelectorAll( - '.notification:not(.notification--leaving)' - ), - ].sort((a, b) => b.dataset.shownAt - a.dataset.shownAt); - }, - - /** - * Wires up what expands the stack, as Sonner does: the pointer over it or - * pressing on it, plus keyboard focus in it (the "Skip to messages" link - * moves focus there). Esc hands focus back. - */ - _initNotificationStack(container) { - if (this._notificationStackReady) { - return; - } - - this._notificationStackReady = true; - - container.setAttribute('role', 'region'); - container.setAttribute('aria-label', Craft.t('app', 'Messages')); - container.setAttribute('tabindex', '-1'); - - container.addEventListener('mouseenter', () => { - this._notificationStackHovered = true; - this._updateNotificationStackExpanded(); - }); - container.addEventListener('mousemove', () => { - if (!this._notificationStackHovered) { - this._notificationStackHovered = true; - this._updateNotificationStackExpanded(); - } - }); - container.addEventListener('mouseleave', () => { - // A press that drags off the stack (a swipe) keeps it open until - // it's released. - if (!this._notificationStackInteracting) { - this._notificationStackHovered = false; - this._updateNotificationStackExpanded(); - } - }); - container.addEventListener('pointerdown', () => { - this._notificationStackInteracting = true; - this._updateNotificationStackExpanded(); - }); - document.addEventListener('pointerup', () => { - if (this._notificationStackInteracting) { - this._notificationStackInteracting = false; - this._notificationStackHovered = container.matches(':hover'); - this._updateNotificationStackExpanded(); - } - }); - container.addEventListener('focusin', (ev) => { - if (!container.contains(ev.relatedTarget)) { - this._focusBeforeNotifications = ev.relatedTarget; - } - this._updateNotificationStackExpanded(); - }); - container.addEventListener('focusout', () => { - // Wait for focus to land, so moving between notifications doesn't - // briefly collapse the stack. - setTimeout(() => this._updateNotificationStackExpanded()); - }); - container.addEventListener('keydown', (ev) => { - if (ev.key === 'Escape') { - this._restoreFocusFromNotifications(); - this._updateNotificationStackExpanded(); - } - }); - document.addEventListener('visibilitychange', () => { - this._syncNotificationTimers(); - }); - }, - - /** - * Expands or collapses the stack and pauses or resumes the notifications' - * timers to match. - */ - _updateNotificationStackExpanded() { - const container = this.$notificationContainer[0]; - - if (!container) { - return; - } - - const expanded = - this._stackedNotifications(container).length > 0 && - (this._notificationStackHovered || - this._notificationStackInteracting || - container.contains(document.activeElement)); - - if (container.hasAttribute('data-expanded') !== expanded) { - container.toggleAttribute('data-expanded', expanded); - } - - this._syncNotificationTimers(); - }, - - /** - * Whether notifications should hold off on closing themselves: while the - * stack is expanded or being pressed, or the page is hidden. - */ notificationTimersPaused() { - const container = this.$notificationContainer[0]; - return ( - !Craft.isVisible() || - !!container?.hasAttribute('data-expanded') || - !!this._notificationStackInteracting - ); + return !!this.$notificationContainer[0]?.timersPaused?.(); }, - _syncNotificationTimers() { - const container = this.$notificationContainer[0]; - - if (!container) { - return; - } - - const paused = this.notificationTimersPaused(); - - for (const element of this._stackedNotifications(container)) { - const notification = $(element).data('notification'); - if (paused) { - notification?.pauseTimer(); - } else { - notification?.resumeTimer(); - } - } - }, - - /** - * Dismisses every notification that can be dismissed, the same as - * pressing each one's close button. Ones that hide their close button (an - * upload in progress, say) stay. - */ clearNotifications() { - const container = this.$notificationContainer[0]; - - if (!container) { - return; - } - - this._restoreFocusFromNotifications(); - - for (const notification of this._stackedNotifications(container)) { - $(notification) - .find('.notification-close-btn') - .filter(':visible') - .first() - .trigger('click'); - } + this.$notificationContainer[0]?.clear?.(); }, - /** - * Moves focus out of the stack, back to where it was before it went in. - */ - _restoreFocusFromNotifications() { - const container = this.$notificationContainer[0]; - - if (!container?.contains(document.activeElement)) { - return; - } - - const target = this._focusBeforeNotifications; - - if (target?.isConnected && !container.contains(target)) { - target.focus(); - } else { - document.activeElement.blur(); - } - }, - - /** - * Updates display property of "Notifications" heading based on whether there are active notifications - **/ - updateNotificationHeadingDisplay() { - if (this.notificationCount > 0) { - this.$notificationHeading.removeClass('hidden'); - } else { - this.$notificationHeading.addClass('hidden'); - } - }, + updateNotificationHeadingDisplay() {}, _setFixedTopPos: function ($element, headerHeight) { if (!$element.length || !this.$contentContainer.length) { @@ -1261,32 +908,8 @@ Craft.CP = Garnish.Base.extend( ); }, - /** - * Updates the active live region with a screen reader announcement - * - * @param {string} message - */ - announce: function (message) { - const liveRegion = this.getLiveRegionElement(this.$activeLiveRegion); - - if (!message || !liveRegion || !document.contains(liveRegion)) { - console.warn('There was an error announcing this message.'); - return; - } - - if (this.announcerTimeout) { - clearTimeout(this.announcerTimeout); - } - - // Assigning `textContent` both clears any previous announcement and sets - // the new one, matching the old `.empty().text(message)` pair. - liveRegion.textContent = message; - - // Clear message after interval - this.announcerTimeout = setTimeout(() => { - this.clearLiveRegion(); - }, 5000); - }, + // Replaced by the announcer module (common/announcer) as it loads + announce: function () {}, /** * Displays a notification. @@ -1397,151 +1020,14 @@ Craft.CP = Garnish.Base.extend( ); }, - copyElements(elementInfo) { - if (elementInfo instanceof jQuery) { - const $elements = elementInfo; - elementInfo = []; - $elements.each((i, element) => { - const $element = $(element); - elementInfo.push({ - type: $element.data('type'), - id: $element.data('id'), - draftId: $element.data('draftId'), - revisionId: $element.data('revisionId'), - fieldId: $element.data('fieldId'), - ownerId: $element.data('ownerId'), - siteId: $element.data('siteId'), - }); - }); - } - - if (elementInfo.length) { - Craft.setLocalStorage('copiedElements', elementInfo); - } else { - Craft.removeLocalStorage('copiedElements'); - } - - this.showElementCopyNotification(elementInfo); - - // Tell other browser windows about it - if (Craft.broadcaster) { - Craft.broadcaster.postMessage({ - event: 'copyElements', - }); - } - }, - - clearCopiedElements() { - this.copyElements([]); - }, - - showElementCopyNotification: function (elementInfo = [], settings = {}) { - this.closeElementCopyNotification(false); - - if (!elementInfo.length) { - this._invokeElementCopyCallbacks(elementInfo); - return; - } - - this.elementCopyNotification = new Craft.CP.ElementCopyNotification( - elementInfo, - settings - ); - this.displayNotification(this.elementCopyNotification); - this.elementCopyNotification.on('show', () => { - // make sure the notification is still there - // (it could have been removed if none of the copied elements still exist) - if (this.elementCopyNotification) { - this._invokeElementCopyCallbacks( - this.elementCopyNotification.elementInfo - ); - } - }); - }, - - _invokeElementCopyCallbacks: function (elementInfo) { - const buttonLabel = this._pasteElementsButtonLabel(elementInfo); - for (callback of this.copyElementCallbacks) { - callback(elementInfo, buttonLabel); - } - }, - - _pasteElementsButtonLabel: function (elementInfo) { - if (!elementInfo.length) { - return null; - } - - const elementType = elementInfo[0].type; - - return Craft.uppercaseFirst( - Craft.t('app', 'Paste {type}', { - type: - elementInfo.length === 1 - ? Craft.elementTypeNames[elementType][2] - : Craft.elementTypeNames[elementType][3], - }) - ); - }, - - closeElementCopyNotification: function (invokeCallbacks = true) { - if (this.elementCopyNotification) { - const notification = this.elementCopyNotification; - this.elementCopyNotification = null; - notification.close(); - - if (invokeCallbacks) { - this._invokeElementCopyCallbacks([]); - } - } - }, - + // The element clipboard module (modules/elements/clipboard) replaces these + // with the real thing as it loads. onCopyElements: function (callback) { this.copyElementCallbacks.push(callback); - - if (this.elementCopyNotification?.loaded) { - callback( - this.elementCopyNotification.elementInfo, - this._pasteElementsButtonLabel( - this.elementCopyNotification.elementInfo - ) - ); - } }, getCopiedElements: function () { - if (!this.elementCopyNotification?.loaded) { - return []; - } - return this.elementCopyNotification.elementInfo; - }, - - async pasteElements(newAttributes = {}) { - const elementInfo = Craft.getLocalStorage('copiedElements'); - if (!elementInfo?.length) { - return; - } - - let data; - try { - const response = await Craft.sendActionRequest( - 'POST', - 'elements/bulk-duplicate', - { - data: { - elements: elementInfo, - newAttributes, - }, - } - ); - data = response.data; - } catch (e) { - Craft.cp.displayError(e?.response?.data?.message); - return []; - } - - this.clearCopiedElements(); - this.displaySuccess(data.message); - return data.newElements; + return []; }, fetchAlerts: function () { @@ -1628,20 +1114,18 @@ Craft.CP = Garnish.Base.extend( '.resolvable-alert-buttons' ); if ($resolvableButtonsContainer.length) { - const $refreshBtn = Craft.ui - .createButton({ - label: Craft.t('app', 'Refresh'), - spinner: true, - }) - .appendTo($resolvableButtonsContainer); + const $refreshBtn = $('', { + type: 'button', + text: Craft.t('app', 'Refresh'), + }).appendTo($resolvableButtonsContainer); $refreshBtn.on('click', async () => { - $refreshBtn.addClass('loading'); + $refreshBtn.prop('loading', true); try { await Craft.sendApiRequest('GET', 'ping'); const alerts = await this.fetchAlerts(); this.displayAlerts(alerts, false); } finally { - $refreshBtn.removeClass('loading'); + $refreshBtn.prop('loading', false); } }); } @@ -2167,7 +1651,7 @@ Craft.CP.Notification = Garnish.Base.extend( this.$innerContainer ); - // `Craft.ui.icon()` resolves legacy icon names and custom icons; + // `app/icon-svg` resolves legacy icon names and custom icons; // `` sizes the SVG and makes it an image or decorative // depending on whether it has a label. const icon = document.createElement('craft-icon'); @@ -2175,10 +1659,10 @@ Craft.CP.Notification = Garnish.Base.extend( if (this.settings.iconLabel) { icon.setAttribute('label', this.settings.iconLabel); } - const svg = await Craft.ui.icon(this.settings.icon); - if (svg) { - icon.append(svg); - } + const {data} = await Craft.sendActionRequest('POST', 'app/icon-svg', { + data: {icon: this.settings.icon}, + }); + icon.innerHTML = data.iconSvg; $body.append(icon); this.$main = $('
').appendTo($body); @@ -2465,11 +1949,6 @@ Craft.CP.Notification = Garnish.Base.extend( }, destroy: function () { - if (this.$innerContainer) { - Craft.cp._notificationResizeObserver?.unobserve( - this.$innerContainer[0] - ); - } this.$container.remove(); this.base(); }, @@ -2714,7 +2193,7 @@ var JobProgressIcon = Garnish.Base.extend({ .hide(); // If the sidebar is collapsed, make sure to add a tooltip. - // CraftGlobalSidebar.js will handle removing it and adding it back on expand/contract + // removes it and adds it back on expand/contract if (Garnish.$bod.data('sidebar') === 'collapsed') { this.$tooltip = $('', { placement: 'right', diff --git a/packages/craftcms-legacy/cp/src/js/Craft.js b/packages/craftcms-legacy/cpcompat/src/craft/Craft.js similarity index 66% rename from packages/craftcms-legacy/cp/src/js/Craft.js rename to packages/craftcms-legacy/cpcompat/src/craft/Craft.js index 197d609cad7..b01e04e02d6 100644 --- a/packages/craftcms-legacy/cp/src/js/Craft.js +++ b/packages/craftcms-legacy/cpcompat/src/craft/Craft.js @@ -1,8 +1,49 @@ import {formatMessage, t} from '@craftcms/ui/utilities/translate'; import {createHttpClient, isCancel} from '@craftcms/ui/utilities/api/http'; import {sendLegacyRequest} from '@craftcms/ui/utilities/api/legacyRequest'; +import {appendElementHtml} from '@craftcms/ui/utilities/dom'; import {openExternalLinksInNewTabs} from '@craftcms/ui/utilities/external-links'; import * as d3 from 'd3'; +import { + escapeHtml, + setElementAttributes, +} from '../../../../../resources/js/common/craft/attributes'; +import {addActionsToChip} from '../../../../../resources/js/common/craft/chip-actions'; +import {hasMousePointerEvents} from '../../../../../resources/js/common/craft/pointer'; +import { + getActionUrl, + getCpUrl, + getSiteUrl, + getUrl, +} from '../../../../../resources/js/common/craft/url'; +import { + findDeltaData, + findModifiedDeltaNames, + groupParams, + groupParamsByDeltaNames, +} from '../../../../../resources/js/common/craft/delta'; +import { + formatInputId, + namespaceId, + namespaceInputName, +} from '../../../../../resources/js/common/craft/namespace'; +import { + endsWith, + ensureEndsWith, + ensureStartsWith, + escapeChars, + escapeRegex, + lowercaseFirst, + ltrim, + randomString, + removeLeft, + removeRight, + rtrim, + startsWith, + trim, + uppercaseFirst, + uuid, +} from '../../../../../resources/js/common/craft/strings'; /** global: Craft */ /** global: Garnish */ @@ -86,7 +127,7 @@ $.extend(Craft, { * @returns {string} */ t: function (category, message, params = {}) { - return t(message, params, (category = 'app'), Craft.translations); + return t(message, params, category, Craft.translations); }, formatMessage: function (pattern, args) { @@ -136,20 +177,9 @@ $.extend(Craft, { * @param {string} str * @returns {string} */ - escapeHtml: function (str) { - return $('
').text(str).html(); - }, + escapeHtml, - /** - * Escapes special regular expression characters. - * - * @param {string} str - * @returns {string} - */ - escapeRegex: function (str) { - // h/t https://stackoverflow.com/a/9310752 - return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); - }, + escapeRegex, /** * Returns the text in a string that might contain HTML tags. @@ -207,18 +237,7 @@ $.extend(Craft, { } }, - /** - * Formats an ID out of an input name. - * - * @param {string} inputName - * @returns {string} - */ - formatInputId: function (inputName) { - // IDs must begin with a letter - let id = inputName.replace(/^[^A-Za-z]+/, ''); - id = this.rtrim(id.replace(/[^A-Za-z0-9_.]+/g, '-'), '-'); - return id || this.randomString(10); - }, + formatInputId, /** * Sleeps for the given duration in milliseconds. @@ -233,165 +252,13 @@ $.extend(Craft, { }); }, - /** - * @param {string} [path] - * @param {(Object|string)} [params] - * @param {string} [baseUrl] - * @returns {string} - */ - getUrl: function (path, params, baseUrl) { - if (typeof path !== 'string') { - path = ''; - } - - // Normalize the params - let anchor = null; - if ($.isPlainObject(params)) { - if (typeof params['#'] !== 'undefined') { - anchor = params['#']; - delete params['#']; - } - } else if (typeof params === 'string') { - let anchorPos = params.indexOf('#'); - if (anchorPos !== -1) { - anchor = params.substring(anchorPos + 1); - params = params.substring(0, anchorPos); - } - params = Object.fromEntries(new URLSearchParams(params).entries()); - } else { - params = {}; - } - - // Was there already an anchor on the path? - let anchorPos = path.indexOf('#'); - if (anchorPos !== -1) { - // Only keep it if the params didn't specify a new anchor - if (!anchor) { - anchor = path.substring(anchorPos + 1); - } - path = path.substring(0, anchorPos); - } - - // Were there already any query string params in the path? - let qsPos = path.indexOf('?'); - if (qsPos !== -1) { - params = $.extend( - Object.fromEntries( - new URLSearchParams(path.substring(qsPos + 1)).entries() - ), - params - ); - path = path.substring(0, qsPos); - } - - // Return path if it appears to be an absolute URL. - if (path.search('://') !== -1 || path[0] === '/') { - return ( - path + - (!$.isEmptyObject(params) ? `?${$.param(params)}` : '') + - (anchor ? `#${anchor}` : '') - ); - } - - path = Craft.trim(path, '/'); - - // Put it all together - let url; - - if (baseUrl) { - url = baseUrl; - - if (path && Craft.pathParam) { - // Does baseUrl already contain a path? - var pathMatch = url.match( - new RegExp('[&?]' + Craft.escapeRegex(Craft.pathParam) + '=[^&]+') - ); - if (pathMatch) { - url = url.replace( - pathMatch[0], - Craft.rtrim(pathMatch[0], '/') + '/' + path - ); - path = ''; - } - } - } else { - url = Craft.baseUrl; - } - - // Does the base URL already have a query string? - qsPos = url.indexOf('?'); - let baseParams; - if (qsPos !== -1) { - baseParams = Object.fromEntries( - new URLSearchParams(url.substring(qsPos + 1)).entries() - ); - url = url.substring(0, qsPos); - params = Object.assign({}, baseParams, params); - } - - if (!Craft.omitScriptNameInUrls && path) { - if (Craft.usePathInfo || !Craft.pathParam) { - // Make sure that the script name is in the URL - if (url.search(Craft.scriptName) === -1) { - url = Craft.rtrim(url, '/') + '/' + Craft.scriptName; - } - } else { - // Move the path into the query string params - if (baseParams && baseParams[Craft.pathParam] !== undefined) { - path = - baseParams[Craft.pathParam].trimEnd() + (path ? '/' + path : ''); - } - params[Craft.pathParam] = path; - path = null; - } - } - - if (path) { - url = Craft.rtrim(url, '/') + '/' + path; - } - - if (!$.isEmptyObject(params)) { - url += `?${$.param(params)}`; - } + getUrl, - if (anchor) { - url += `#${anchor}`; - } - - return url; - }, - - /** - * @param {string} [path] - * @param {(Object|string)} [params] - * @returns {string} - */ - getCpUrl: function (path, params) { - if (!Craft.baseCpUrl) { - throw 'Craft.baseCpUrl is undefined.'; - } - return this.getUrl(path, params, Craft.baseCpUrl); - }, + getCpUrl, - /** - * @param {string} [path] - * @param {(Object|string)} [params] - * @returns {string} - */ - getSiteUrl: function (path, params) { - return this.getUrl(path, params, Craft.baseSiteUrl); - }, + getSiteUrl, - /** - * Returns an action URL. - * - * @param {string} action - * @param {(Object|string)} [params] - * @returns {string} - */ - getActionUrl: function (action, params) { - return Craft.getUrl(action, params, Craft.actionUrl); - }, + getActionUrl, /** * Redirects the window to a given URL. @@ -555,11 +422,7 @@ $.extend(Craft, { } if (jqXHR.status !== 400) { - if (typeof Craft.cp !== 'undefined') { - Craft.cp.displayError(); - } else { - alert(Craft.t('app', 'A server error occurred.')); - } + Craft._showError(); } if (callback) { @@ -889,235 +752,13 @@ $.extend(Craft, { return arr; }, - /** - * @callback findDeltaDataCallback - * @param {string} deltaName - * @param {Array} params - */ - /** - * Compares old and new post data, and removes any values that haven't - * changed within the given list of delta namespaces. - * - * @param {string} oldData - * @param {string} newData - * @param {Object} deltaNames - * @param {findDeltaDataCallback|null} [callback] Callback function that should be called whenever a new group of modified params has been found - * @param {Object} [initialDeltaValues] Initial delta values. If undefined, `Craft.initialDeltaValues` will be used. - * @param {Object} [forceModifiedDeltaNames] List of delta names that should be considered modified regardless of their param values - * @param {boolean} [asArray] Whether the params should be returned as an array - * @returns {string} - */ - findDeltaData: function ( - oldData, - newData, - deltaNames, - callback = null, - initialDeltaValues = {}, - forceModifiedDeltaNames = [], - asArray = false - ) { - const [modifiedDeltaNames, groupedNewParams] = this.findModifiedDeltaNames( - oldData, - newData, - deltaNames, - initialDeltaValues, - forceModifiedDeltaNames - ); + findDeltaData, - // Figure out which of the new params should actually be posted - let params = groupedNewParams.__root__; - for (const name of modifiedDeltaNames) { - params = params.concat(groupedNewParams[name]); - params.push(`modifiedDeltaNames[]=${name}`); - if (callback) { - callback(name, groupedNewParams[name]); - } - } + findModifiedDeltaNames, - return asArray ? params : params.join('&'); - }, + groupParams, - /** - * Returns the delta names that have been modified, given old and new form data. - * - * @param {string} oldData - * @param {string} newData - * @param {Object} deltaNames - * @param {Object} [initialDeltaValues] Initial delta values. If undefined, `Craft.initialDeltaValues` will be used. - * @param {Object} [modifiedDeltaNames] List of delta names that should be considered modified regardless of their param values - * @param {boolean} [mostSpecific] Whether the most specific modified delta names should be returned - * @returns {Array} - */ - findModifiedDeltaNames: function ( - oldData, - newData, - deltaNames, - initialDeltaValues = {}, - modifiedDeltaNames = [], - mostSpecific = false - ) { - // Make sure oldData and newData are always strings. This is important because further below String.split is called. - oldData = typeof oldData === 'string' ? oldData : ''; - newData = typeof newData === 'string' ? newData : ''; - deltaNames = Array.isArray(deltaNames) ? [...deltaNames] : []; - initialDeltaValues = $.isPlainObject(initialDeltaValues) - ? initialDeltaValues - : {}; - modifiedDeltaNames = Array.isArray(modifiedDeltaNames) - ? [...modifiedDeltaNames] - : []; - - // Sort the delta namespaces from least -> most specific - deltaNames.sort((a, b) => { - if (a.length === b.length) { - return 0; - } - if (mostSpecific) { - return a.length < b.length ? 1 : -1; - } - return a.length > b.length ? 1 : -1; - }); - - // Group all the old & new params by namespace - const groupedOldParams = this._groupParamsByDeltaNames( - oldData, - deltaNames, - false, - initialDeltaValues - ); - const groupedNewParams = this._groupParamsByDeltaNames( - newData, - deltaNames, - true, - false - ); - - for (const name of deltaNames) { - if ( - !modifiedDeltaNames.includes(name) && - typeof groupedNewParams[name] === 'object' && - (typeof groupedOldParams[name] !== 'object' || - JSON.stringify(groupedOldParams[name]) !== - JSON.stringify(groupedNewParams[name])) - ) { - modifiedDeltaNames.push(name); - } - } - - // Sort the delta namespaces from least -> most specific - modifiedDeltaNames.sort((a, b) => { - if (a.length === b.length) { - return 0; - } - if (mostSpecific) { - return a.length < b.length ? 1 : -1; - } - return a.length > b.length ? 1 : -1; - }); - - return [modifiedDeltaNames, groupedNewParams]; - }, - - /** - * @param {string|Object} params - * @param {Object} deltaNames - * @param {boolean} [withRoot] - * @returns {Object} - */ - groupParams: function (params, deltaNames, withRoot = false) { - if (typeof params === 'string') { - params = params.split('&'); - } - - const grouped = {}; - - if (withRoot) { - grouped.__root__ = []; - } - - // sort delta names from most to least specific - deltaNames = deltaNames.sort((a, b) => b.length - a.length); - - for (const name of deltaNames) { - grouped[name] = []; - } - - const encodeURIComponentExceptEqualChar = (o) => - encodeURIComponent(o).replace('%3D', '='); - - params = params.map((p) => decodeURIComponent(p)); - - paramLoop: for (const param of params) { - for (const name of deltaNames) { - const paramName = param.substring(0, name.length + 1); - if ([`${name}=`, `${name}[`].includes(paramName)) { - if (typeof grouped[name] === 'undefined') { - grouped[name] = []; - } - grouped[name].push(encodeURIComponentExceptEqualChar(param)); - continue paramLoop; - } - } - - if (withRoot) { - grouped.__root__.push(encodeURIComponentExceptEqualChar(param)); - } - } - - return grouped; - }, - - /** - * @param {string|Object} params - * @param {Object} deltaNames - * @param {boolean} withRoot - * @param {(boolean|Object)} initialValues - * @returns {Object} - * @private - */ - _groupParamsByDeltaNames: function ( - params, - deltaNames, - withRoot, - initialValues - ) { - const grouped = this.groupParams(params, deltaNames, withRoot); - - if (initialValues) { - const serializeParam = (name, value) => { - if (Array.isArray(value) || $.isPlainObject(value)) { - value = $.param(value); - } else if (typeof value === 'string') { - value = encodeURIComponent(value); - } else if (value === null) { - value = ''; - } - return `${encodeURIComponent(name)}=${value}`; - }; - - for (const name in initialValues) { - if (initialValues.hasOwnProperty(name)) { - if ($.isPlainObject(initialValues[name])) { - grouped[name] = []; - for (const subName in initialValues[name]) { - if (initialValues[name].hasOwnProperty(subName)) { - grouped[name].push( - serializeParam( - `${name}[${subName}]`, - initialValues[name][subName] - ) - ); - } - } - } else { - grouped[name] = [serializeParam(name, initialValues[name])]; - } - } - } - } - - return grouped; - }, + _groupParamsByDeltaNames: groupParamsByDeltaNames, /** * Expands an object of POST array-style strings into an actual array. @@ -1295,172 +936,25 @@ $.extend(Craft, { return keys; }, - /** - * Takes an array or string of chars, and places a backslash before each one, returning the combined string. - * - * Userd by ltrim() and rtrim() - * - * @param {(string|Object)} chars - * @returns {string} - */ - escapeChars: function (chars) { - if (!Array.isArray(chars)) { - chars = chars.split(); - } + escapeChars, - var escaped = ''; + ltrim, - for (var i = 0; i < chars.length; i++) { - escaped += '\\' + chars[i]; - } + rtrim, - return escaped; - }, + trim, - /** - * Trim characters off of the beginning of a string. - * - * @param {string} str - * @param {(string|Object)} [chars] The characters to trim off. Defaults to a space if left blank. - * @returns {string} - */ - ltrim: function (str, chars) { - if (!str) { - return str; - } - if (typeof chars === 'undefined') { - return str.trimStart(); - } - const re = new RegExp('^[' + Craft.escapeChars(chars) + ']+'); - return str.replace(re, ''); - }, + startsWith, - /** - * Trim characters off of the end of a string. - * - * @param {string} str - * @param {(string|Object)} [chars] The characters to trim off. Defaults to a space if left blank. - * @returns {string} - */ - rtrim: function (str, chars) { - if (!str) { - return str; - } - if (typeof chars === 'undefined') { - return str.trimEnd(); - } - const re = new RegExp('[' + Craft.escapeChars(chars) + ']+$'); - return str.replace(re, ''); - }, + endsWith, - /** - * Trim characters off of the beginning and end of a string. - * - * @param {string} str - * @param {(string|Object)} [chars] The characters to trim off. Defaults to a space if left blank. - * @returns {string} - */ - trim: function (str, chars) { - if (!str) { - return str; - } - if (typeof chars === 'undefined') { - return str.trim(); - } - str = Craft.ltrim(str, chars); - str = Craft.rtrim(str, chars); - return str; - }, - - /** - * Returns whether a string starts with another string. - * - * @param {string} str - * @param {string} substr - * @param {boolean} [caseInsensitive=false] - * @returns {boolean} - */ - startsWith: function (str, substr, caseInsensitive = false) { - if (caseInsensitive) { - return str.toLowerCase().startsWith(substr.toLowerCase()); - } - return str.startsWith(substr); - }, + ensureStartsWith, - /** - * Returns whether a string ends with another string. - * - * @param {string} str - * @param {string} substr - * @param {boolean} [caseInsensitive=false] - * @returns {boolean} - */ - endsWith: function (str, substr, caseInsensitive = false) { - if (caseInsensitive) { - return str.toLowerCase().endsWith(substr.toLowerCase()); - } - return str.endsWith(substr); - }, + ensureEndsWith, - /** - * Ensures a string starts with another string. - * - * @param {string} str - * @param {string} substr - * @param {boolean} [caseInsensitive=false] - * @return {string} - */ - ensureStartsWith: function (str, substr, caseInsensitive = false) { - if (!Craft.startsWith(str, substr, caseInsensitive)) { - str = substr + str; - } - return str; - }, + removeLeft, - /** - * Ensures a string ends with another string. - * - * @param {string} str - * @param {string} substr - * @param {boolean} [caseInsensitive=false] - * @return {string} - */ - ensureEndsWith: function (str, substr, caseInsensitive = false) { - if (!Craft.endsWith(str, substr, caseInsensitive)) { - str += substr; - } - return str; - }, - - /** - * Removes a string from the beginning of another string. - * - * @param {string} str - * @param {string} substr - * @param {boolean} [caseInsensitive=false] - * @return {string} - */ - removeLeft: function (str, substr, caseInsensitive = false) { - if (Craft.startsWith(str, substr, caseInsensitive)) { - return str.slice(substr.length); - } - return str; - }, - - /** - * Removes a string from the end of another string. - * - * @param {string} str - * @param {string} substr - * @param {boolean} [caseInsensitive=false] - * @return {string} - */ - removeRight: function (str, substr, caseInsensitive = false) { - if (Craft.endsWith(str, substr, caseInsensitive)) { - return str.slice(0, -substr.length); - } - return str; - }, + removeRight, /** * @callback filterArrayCallback @@ -1571,25 +1065,9 @@ $.extend(Craft, { return [...new Set(arr)]; }, - /** - * Makes the first character of a string uppercase. - * - * @param {string} str - * @returns {string} - */ - uppercaseFirst: function (str) { - return str.charAt(0).toUpperCase() + str.slice(1); - }, + uppercaseFirst, - /** - * Makes the first character of a string lowercase. - * - * @param {string} str - * @returns {string} - */ - lowercaseFirst: function (str) { - return str.charAt(0).toLowerCase() + str.slice(1); - }, + lowercaseFirst, parseUrl: function (url) { var m = url.match( @@ -1752,55 +1230,13 @@ $.extend(Craft, { return asciiStr; }, - uuid: function () { - if (typeof crypto.randomUUID === 'function') { - return crypto.randomUUID(); - } + uuid, - // h/t https://stackoverflow.com/a/2117523/1688568 - return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => - ( - c ^ - (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4))) - ).toString(16) - ); - }, + namespaceInputName, - /** - * @param {string} name - * @param {string} [namespace] - * @returns {string} - */ - namespaceInputName: function (name, namespace) { - if (!namespace) { - return name; - } + namespaceId, - return name.replace(/([^'"\[\]]+)([^'"]*)/, `${namespace}[$1]$2`); - }, - - /** - * @param {string} id - * @param {string} [namespace] - * @returns {string} - */ - namespaceId: function (id, namespace) { - return ( - (namespace ? `${Craft.formatInputId(namespace)}-` : '') + - Craft.formatInputId(id) - ); - }, - - randomString: function (length) { - // h/t https://stackoverflow.com/a/1349426/1688568 - var result = ''; - var characters = - 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - for (var i = 0; i < length; i++) { - result += characters.charAt(Math.floor(Math.random() * 62)); - } - return result; - }, + randomString, /** * Creates a validation error list. @@ -1820,89 +1256,11 @@ $.extend(Craft, { return $ul; }, - _existingCss: null, - _existingJs: null, _appendHtmlQueue: null, - _appendHtml: async function (html, $parent) { - if (!html) { - return; - } - - /** - * Separate scripts from other nodes to bypass jQuery's internal - * script handling, which uses sync XHR (jQuery._evalUrl) and - * silently falls back to async for cross-origin URLs, breaking - * execution order. - * - * @see https://github.com/jquery/jquery/issues/4801 - * @see https://github.com/jquery/jquery/issues/1895 - */ - const scriptNodes = []; - const otherNodes = []; - - for (const node of $.parseHTML(html.trim(), true)) { - // Deduplicate CSS - if (node.nodeName === 'LINK' && node.href) { - if (!this._existingCss) { - this._existingCss = $('link[href]') - .toArray() - .map((n) => n.href.replace(/&/g, '&')); - } - if (this._existingCss.includes(node.href)) { - continue; - } - this._existingCss.push(node.href); - } - - // Deduplicate and separate scripts - if (node.nodeName === 'SCRIPT') { - if (node.src) { - if (!this._existingJs) { - this._existingJs = $('script[src]') - .toArray() - .map((n) => n.src.replace(/&/g, '&')); - } - if (this._existingJs.includes(node.src)) { - continue; - } - this._existingJs.push(node.src); - } - scriptNodes.push(node); - continue; - } - - otherNodes.push(node); - } - - if (otherNodes.length) { - $parent.append(otherNodes); - } - - // Load scripts sequentially via native diff --git a/resources/js/modules/ai/skills/AiSkills.vue b/resources/js/modules/ai/skills/AiSkills.vue index 86088c3d226..511ecd0f8ab 100644 --- a/resources/js/modules/ai/skills/AiSkills.vue +++ b/resources/js/modules/ai/skills/AiSkills.vue @@ -13,7 +13,7 @@ import {useAppLayout} from '@/common/composables/useAppLayout'; import {openSlideout} from '@/common/slideouts'; import {http, isHttpError} from '@craftcms/ui/utilities/api/http'; - import {showMessagesFromResponse} from '@/modules/messages'; + import {showError, showMessagesFromResponse} from '@/modules/messages'; import type {AgentSkillData} from '@/modules/ai/skills/types'; const props = defineProps<{ @@ -68,7 +68,7 @@ const message = isHttpError<{message?: string}>(error) ? error.response?.data?.message : undefined; - Craft.cp?.displayError?.(message ?? t('Couldn’t delete the skill.')); + showError(message ?? t('Couldn’t delete the skill.')); // Someone else may have deleted it already. await refreshSkills(); diff --git a/resources/js/modules/asset-mover/asset-mover.ts b/resources/js/modules/asset-mover/asset-mover.ts index 51f9f8a5010..51896c7c420 100644 --- a/resources/js/modules/asset-mover/asset-mover.ts +++ b/resources/js/modules/asset-mover/asset-mover.ts @@ -1,4 +1,9 @@ import {Base} from '@craftcms/garnish'; +import {t} from '@craftcms/ui/utilities/translate'; +import {actionClient} from '@craftcms/ui/utilities/api/actionClient'; +import {create} from '@craftcms/ui/utilities/create'; +import {showError, showNotice} from '@/modules/messages/messages'; +import {QueueService} from '@/modules/queue/queue'; // Mostly Craft.* runtime seams (the still-legacy element index + prompt handler // + progress bar); the only jQuery is via the objects Craft.ui/Craft.cp return @@ -46,11 +51,12 @@ export class AssetMover extends Base { try { // get total size of elements that should be moved - response = await Craft.sendActionRequest('POST', 'assets/move-info', { - data: {folderIds, assetIds}, + response = await actionClient.post('assets/move-info', { + folderIds, + assetIds, }); } catch (e: any) { - Craft.cp.displayError(e?.response?.data?.message); + showError(e?.response?.data?.message); return; } @@ -58,9 +64,7 @@ export class AssetMover extends Base { response.data.count > AssetMover.countLimit || response.data.totalSize > AssetMover.sizeLimit ) { - proceed = confirm( - Craft.t('app', 'Are you sure you want to move the selected items?') - ); + proceed = confirm(t('Are you sure you want to move the selected items?')); confirmed = true; } @@ -68,31 +72,24 @@ export class AssetMover extends Base { } successNotice(moveParams: any, message: any, allowUndo = true): void { - let details = null; let $undoBtn = null; if (allowUndo && this.conflictCount === 0) { - $undoBtn = Craft.ui.createButton({ - label: Craft.t('app', 'Undo'), - spinner: true, - }); + $undoBtn = $(create('craft-button', {type: 'button'}, t('Undo'))); } // if we didn't reach the limit, so the move was not confirmed, we want to give the option to undo - if (!moveParams.confirmed && allowUndo) { - details = { - details: $undoBtn, - }; - } - - const notice = Craft.cp.displayNotice(message, details); + const notice = showNotice( + message, + !moveParams.confirmed && allowUndo && $undoBtn + ? {details: $undoBtn[0]} + : undefined + ); if (allowUndo) { $undoBtn?.on('activate', async () => { // ask to confirm if they want to undo - if ( - confirm(Craft.t('app', 'Are you sure you want to undo the move?')) - ) { + if (confirm(t('Are you sure you want to undo the move?'))) { // if yes, undo const totalFoldersMoved = await this.moveFolders( this.undoMovedFolders.folderIds, @@ -104,16 +101,12 @@ export class AssetMover extends Base { ); const totalItemsMoved = totalFoldersMoved + totalAssetsMoved; if (totalItemsMoved) { - this.successNotice( - moveParams, - Craft.t('app', 'Move reverted.'), - false - ); + this.successNotice(moveParams, t('Move reverted.'), false); Craft.elementIndex.updateElements(true); } } // if no, just close the notice; - notice.$closeBtn.trigger('click'); + notice?.close(); }); } } @@ -132,8 +125,8 @@ export class AssetMover extends Base { }); return this._batchMoveRequests(requests, { conflictChoices: [ - {value: 'keepBoth', title: Craft.t('app', 'Keep both')}, - {value: 'replace', title: Craft.t('app', 'Replace it')}, + {value: 'keepBoth', title: t('Keep both')}, + {value: 'replace', title: t('Replace it')}, ], handleConflictChoice: function (prompt: any) { const params: any = { @@ -185,15 +178,11 @@ export class AssetMover extends Base { conflictChoices: [ { value: 'replace', - title: Craft.t( - 'app', - 'Replace the folder (all existing files will be deleted)' - ), + title: t('Replace the folder (all existing files will be deleted)'), }, { value: 'merge', - title: Craft.t( - 'app', + title: t( 'Merge the folder (any conflicting files will be replaced)' ), }, @@ -304,7 +293,7 @@ export class AssetMover extends Base { } if (response.error) { - Craft.cp.displayError(response.error); + showError(response.error); } } @@ -355,9 +344,8 @@ export class AssetMover extends Base { let activeRequests = requests.length; for (const request of requests) { - Craft.sendActionRequest('POST', request.action, { - data: request.params, - }) + actionClient + .post(request.action, request.params) .then((response: any) => { responses.push( Object.assign({success: true}, response.data, {request}) @@ -381,7 +369,7 @@ export class AssetMover extends Base { Craft.elementIndex.setIndexAvailable(); Craft.elementIndex.progressBar.hideProgressBar(); // If assets were just merged we should get the reference tags updated right away - Craft.cp.runQueue(); + void QueueService.getInstance().runQueue(); resolve(responses); } else { Craft.elementIndex.progressBar.incrementProcessedItemCount(1); diff --git a/resources/js/modules/asset-mover/globals.ts b/resources/js/modules/asset-mover/globals.ts new file mode 100644 index 00000000000..a5fc85411eb --- /dev/null +++ b/resources/js/modules/asset-mover/globals.ts @@ -0,0 +1,5 @@ +import {AssetMover} from './asset-mover'; +import {registerCraftGlobals} from '@/common/craft-global'; + +// `new Craft.AssetMover()` is created by the asset index. Plain modern ES class. +registerCraftGlobals({AssetMover}); diff --git a/resources/js/modules/asset-mover/index.ts b/resources/js/modules/asset-mover/index.ts index 63be39b5691..d6e175bba26 100644 --- a/resources/js/modules/asset-mover/index.ts +++ b/resources/js/modules/asset-mover/index.ts @@ -1,7 +1,4 @@ +import './globals'; import {AssetMover} from './asset-mover'; -import {registerCraftGlobals} from '@/common/craft-global'; - -// `new Craft.AssetMover()` is created by the asset index. Plain modern ES class. -registerCraftGlobals({AssetMover}); export {AssetMover}; diff --git a/resources/js/modules/asset-select-input/asset-select-input.css b/resources/js/modules/asset-select-input/asset-select-input.css new file mode 100644 index 00000000000..5424fde6bf2 --- /dev/null +++ b/resources/js/modules/asset-select-input/asset-select-input.css @@ -0,0 +1,25 @@ +/* Covers the field while an upload runs, with the progress bar centered on it. */ +.elementselect.uploading { + position: relative; +} + +.elementselect .progress-shade { + display: none; +} + +.elementselect.uploading .progress-shade { + display: grid; + place-items: center; + position: absolute; + inset: 0; + z-index: 2; + background-color: color-mix( + in srgb, + var(--c-surface-default) 80%, + transparent + ); +} + +.elementselect .progress-shade craft-progress-bar { + inline-size: 60%; +} diff --git a/resources/js/modules/asset-select-input/asset-select-input.ts b/resources/js/modules/asset-select-input/asset-select-input.ts index c0f80e66ff7..dc6a55add7c 100644 --- a/resources/js/modules/asset-select-input/asset-select-input.ts +++ b/resources/js/modules/asset-select-input/asset-select-input.ts @@ -3,6 +3,18 @@ import {UploadError} from '@/upload-client'; import type {UploaderCallbacks} from '@/modules/uploader/base-uploader'; import {BaseElementSelectInput} from '@/modules/element-select-input/base-element-select-input'; import {openAssetImageEditor} from '@/modules/image-editor'; +import {IntervalManager} from '@/modules/interval-manager/interval-manager'; +import '@craftcms/ui/components/progress-bar/progress-bar'; +import type CraftProgressBar from '@craftcms/ui/components/progress-bar/progress-bar'; +import './asset-select-input.css'; +import {t} from '@craftcms/ui/utilities/translate'; +import {actionClient} from '@craftcms/ui/utilities/api/actionClient'; +import {appendBodyHtml, appendHeadHtml} from '@craftcms/ui/utilities/dom'; +import {startSide} from '@/common/craft/direction'; +import {showError} from '@/modules/messages/messages'; +import {QueueService} from '@/modules/queue/queue'; +import {announce} from '@/common/announcer'; +import {getElementInfo} from '@/common/craft/element-markup'; declare const Craft: any; declare const Garnish: any; @@ -12,7 +24,7 @@ declare const $: any; * AssetSelectInput — a port of `Craft.AssetSelectInput` onto * {@link BaseElementSelectInput}. Extends the base element select with: * - An upload button + hidden file input wired to the native uploader - * - A `ProgressBar` overlay during uploads + * - A `` overlay during uploads, announced to screen readers * - Shift-Space keyboard shortcut to open the file preview modal * * Notes: @@ -25,7 +37,8 @@ export class AssetSelectInput extends BaseElementSelectInput { $uploadBtn: any = null; $fileInput: any = null; uploader: any = null; - progressBar: any = null; + progressBar: CraftProgressBar | null = null; + #progressAnnouncer: IntervalManager | null = null; openPreviewTimeout: ReturnType | null = null; constructor(settings?: any) { @@ -78,9 +91,7 @@ export class AssetSelectInput extends BaseElementSelectInput { result.newAssetId ).catch(() => {}); } - }).catch((error) => - Craft.cp.displayError(error?.response?.data?.message) - ); + }).catch((error) => showError(error?.response?.data?.message)); }); }); } @@ -115,23 +126,28 @@ export class AssetSelectInput extends BaseElementSelectInput { } _attachUploader(): void { - this.progressBar = new Craft.ProgressBar( - $('
').appendTo(this.$container) - ); + const shade = document.createElement('div'); + shade.className = 'progress-shade'; + this.progressBar = document.createElement('craft-progress-bar'); + this.progressBar.label = t('Upload progress'); + this.progressBar.hidden = true; + shade.append(this.progressBar); + this.$container[0].append(shade); + + // The bar has no live region of its own, so progress is read out + // periodically while an upload runs. + this.#progressAnnouncer = new IntervalManager({ + onInterval: () => announce(this.#progressMessage()), + }); if (this.$addElementBtn) { this.$uploadBtn = $('