@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 4.94 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/collaborators-overlay/avatar-iframe-styles.ts"],
"sourcesContent": ["/**\n * Compiled CSS for the Avatar component, for injection into the editor canvas\n * iframe where the editor package's SCSS is not available.\n *\n * Source: ../collaborators-presence/avatar/styles.scss\n *\n * Dimmed and status-indicator styles are intentionally omitted \u2014 they are not\n * used in the overlay. Keep in sync when editing the SCSS source.\n */\n\nimport {\n\tBUTTON_SIZE_COMPACT,\n\tBUTTON_SIZE_SMALL,\n\tELEVATION_X_SMALL,\n\tFONT_LINE_HEIGHT_SMALL,\n\tFONT_SIZE_MEDIUM,\n\tFONT_SIZE_X_SMALL,\n\tFONT_WEIGHT_MEDIUM,\n\tGRID_UNIT_05,\n\tGRID_UNIT_10,\n\tRADIUS_FULL,\n\tWHITE,\n} from './collaborator-styles';\n\nexport const AVATAR_IFRAME_STYLES = `\n.editor-avatar {\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: ${ RADIUS_FULL };\n\tflex-shrink: 0;\n\tbox-shadow: 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE }, ${ ELEVATION_X_SMALL };\n}\n.editor-avatar__image {\n\tbox-sizing: border-box;\n\tposition: relative;\n\twidth: ${ BUTTON_SIZE_COMPACT };\n\theight: ${ BUTTON_SIZE_COMPACT };\n\tborder-radius: ${ RADIUS_FULL };\n\tborder: 0;\n\tbackground-color: var(--wp-admin-theme-color, #3858e9);\n\toverflow: hidden;\n\toverflow: clip;\n\tflex-shrink: 0;\n\tfont-size: 0;\n\tcolor: ${ WHITE };\n}\n.is-small > .editor-avatar__image {\n\twidth: ${ BUTTON_SIZE_SMALL };\n\theight: ${ BUTTON_SIZE_SMALL };\n}\n.has-avatar-border-color > .editor-avatar__image {\n\tborder: var(--wp-admin-border-width-focus, 2px) solid var(--editor-avatar-outline-color);\n\tbackground-clip: padding-box;\n}\n.has-avatar-border-color > .editor-avatar__image::after {\n\tcontent: \"\";\n\tposition: absolute;\n\tinset: 0;\n\tborder-radius: inherit;\n\tbox-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) ${ WHITE };\n\tpointer-events: none;\n\tz-index: 1;\n}\n.editor-avatar__img {\n\tposition: absolute;\n\tinset: 0;\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tborder-radius: inherit;\n\topacity: 0;\n}\n.has-src > .editor-avatar__image > .editor-avatar__img {\n\topacity: 1;\n}\n.editor-avatar:not(.has-src) > .editor-avatar__image {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: ${ FONT_SIZE_X_SMALL };\n\tfont-weight: ${ FONT_WEIGHT_MEDIUM };\n\tborder: 0;\n\tbackground-clip: border-box;\n}\n.editor-avatar:not(.has-src) > .editor-avatar__image::after {\n\tcontent: none;\n}\n.editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {\n\tbackground-color: var(--editor-avatar-outline-color);\n}\n.editor-avatar__name {\n\tfont-size: ${ FONT_SIZE_MEDIUM };\n\tfont-weight: ${ FONT_WEIGHT_MEDIUM };\n\tline-height: ${ FONT_LINE_HEIGHT_SMALL };\n\tcolor: var(--editor-avatar-name-color, ${ WHITE });\n\tmin-width: 0;\n\tpadding-bottom: 2px; /* $grid-unit-05 / 2 */\n\toverflow: hidden;\n\topacity: 0;\n\twhite-space: nowrap;\n\ttransition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);\n}\n.editor-avatar.is-badge {\n\tdisplay: inline-grid;\n\tgrid-template-columns: min-content 0fr;\n\tcolumn-gap: 0;\n\tpadding-inline-end: 0;\n\tbackground-color: var(--wp-admin-theme-color, #3858e9);\n\ttransition:\n\t\tgrid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),\n\t\tcolumn-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),\n\t\tpadding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);\n}\n.editor-avatar.is-badge:hover {\n\tgrid-template-columns: min-content 1fr;\n\tcolumn-gap: ${ GRID_UNIT_05 };\n\tpadding-inline-end: ${ GRID_UNIT_10 };\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.editor-avatar.is-badge:hover .editor-avatar__name {\n\topacity: 1;\n\ttransition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);\n}\n.editor-avatar.is-badge.has-avatar-border-color {\n\tbackground-color: var(--editor-avatar-outline-color);\n}\n@media (prefers-reduced-motion: reduce) {\n\t.editor-avatar.is-badge,\n\t.editor-avatar__name {\n\t\ttransition: none;\n\t}\n}\n`;\n"],
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,iCAYO;AAEA,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKjB,sCAAY;AAAA;AAAA,6DAE+B,gCAAM,KAAM,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjF,8CAAoB;AAAA,WACnB,8CAAoB;AAAA,kBACb,sCAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOpB,gCAAM;AAAA;AAAA;AAAA,UAGN,4CAAkB;AAAA,WACjB,4CAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mEAWsC,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAoB3D,4CAAkB;AAAA,gBAChB,6CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWrB,2CAAiB;AAAA,gBACf,6CAAmB;AAAA,gBACnB,iDAAuB;AAAA,0CACG,gCAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAqBjC,uCAAa;AAAA,uBACL,uCAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
"names": []
}