@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
1 lines • 11.4 kB
Source Map (JSON)
{"version":3,"sources":["repeater.css"],"names":[],"mappings":"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","file":"repeater.css","sourcesContent":[".gform-admin {\n\n\t.gform-repeater {\n\t\tcontainer-type: inline-size;\n\t\tmax-inline-size: 100%;\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t}\n\n\t/* Repeater Item */\n\n\t.gform-repeater-item {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-snuff);\n\t\tborder-radius: 3px;\n\t\tbox-shadow: var(--gform-admin-box-shadow-outline-light);\n\t\tcursor: default;\n\n\t\tinput[type=\"text\"] {\n\t\t\ttransition: none;\n\t\t}\n\n\t\t+ .gform-repeater-item,\n\t\t+ .gform-repeater__add-button {\n\t\t\tmargin-block-start: var(--gform-admin-spacer-4);\n\t\t}\n\t}\n\n\t.gform-repeater-item--has-arrows,\n\t.gform-repeater-item--has-drag-handle {\n\n\t\t.gform-repeater-item__wrapper {\n\t\t\tpadding-inline-start: var(--gform-admin-spacer-2);\n\n\t\t\t@container (min-width: 30rem) {\n\t\t\t\tpadding-inline-start: var(--gform-admin-spacer-6);\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-repeater-item--is-collapsible {\n\n\t\t.gform-repeater-item__wrapper {\n\t\t\tpadding-inline-end: var(--gform-admin-spacer-2);\n\n\t\t\t@container (min-width: 30rem) {\n\t\t\t\tpadding-inline-end: var(--gform-admin-spacer-6);\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-repeater-item--type-inline {\n\n\t\t/* Flip to inline layout on larger screens */\n\n\t\t@container (min-width: 30rem) {\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\tbox-shadow: none;\n\t\t\tdisplay: flex;\n\t\t\tgap: var(--gform-admin-spacer-3);\n\t\t\tjustify-content: space-between;\n\t\t}\n\n\t\t&.gform-repeater-item--is-collapsed {\n\t\n\t\t\t.gform-repeater-item__block-content {\n\n\t\t\t\t@container (min-width: 30rem) {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-repeater-item--style-minimal {\n\n\t\t\t.gform-repeater-item__wrapper,\n\t\t\t.gform-repeater-item__block-content {\n\t\n\t\t\t\t@container (min-width: 30rem) {\n\t\n\t\t\t\t\talign-items: center;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.gform-repeater-item--has-arrows, .gform-repeater-item--has-drag-handle) {\n\n\t\t\t.gform-repeater-item__wrapper {\n\t\n\t\t\t\t@container (min-width: 30rem) {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.gform-repeater-item__wrapper {\n\t\n\t\t\t@container (min-width: 30rem) {\n\n\t\t\t\talign-items: flex-end;\n\t\t\t\tborder-bottom: 0;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t.gform-repeater-item__block-header,\n\t\t.gform-repeater-item__collapsible {\n\t\t\n\t\t\t@container (min-width: 30rem) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t.gform-repeater-item__minimal-actions {\n\t\t\tdisplay: none;\n\n\t\t\t@container (min-width: 30rem) {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t.gform-repeater-item__block-content {\n\n\t\t\t@container (min-width: 30rem) {\n\t\t\t\talign-items: flex-end;\n\t\t\t\tflex-direction: row;\n\t\t\t\tmin-inline-size: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t.gform-repeater-item__block-content-footer {\n\n\t\t\t@container (min-width: 30rem) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t/* Use inline layout on small screens */\n\n\t\t&.gform-repeater-item--use-inline-layout-mobile {\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\tbox-shadow: none;\n\t\t\tdisplay: flex;\n\t\t\tgap: var(--gform-admin-spacer-3);\n\t\t\tjustify-content: space-between;\n\t\n\t\t\t&.gform-repeater-item--style-minimal {\n\t\n\t\t\t\t.gform-repeater-item__wrapper,\n\t\t\t\t.gform-repeater-item__block-content {\n\t\t\t\t\talign-items: center;\n\t\t\t\t}\n\t\t\t}\n\t\n\t\t\t&:not(.gform-repeater-item--has-arrows, .gform-repeater-item--has-drag-handle) {\n\t\n\t\t\t\t.gform-repeater-item__wrapper {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t}\n\t\n\t\t\t.gform-repeater-item__wrapper {\n\t\t\t\talign-items: flex-end;\n\t\t\t\tborder-bottom: 0;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tmin-block-size: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\n\t\t\t.gform-repeater-item__block-header,\n\t\t\t.gform-repeater-item__collapsible {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\n\t\t\t.gform-repeater-item__minimal-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\n\t\t\t.gform-repeater-item__block-content {\n\t\t\t\talign-items: flex-end;\n\t\t\t\tflex-direction: row;\n\t\t\t\tmin-inline-size: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\n\t\t\t.gform-repeater-item__block-content-footer {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-repeater-item--style-minimal {\n\n\t\t+ .gform-repeater-item {\n\t\t\tmargin-block-start: var(--gform-admin-spacer-1);\n\t\t}\n\t}\n\n\t.gform-repeater-item--style-regular {\n\n\t\t.gform-repeater-item__controls {\n\t\t\tgap: 0;\n\t\t}\n\n\t\t.gform-repeater-item__control,\n\t\t.gform-repeater-item__action-control {\n\n\t\t\t&:focus {\n\t\t\t\tborder-color: var(--gform-admin-color-snuff);\n\t\t\t\toutline: none;\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tborder-color: var(--gform-admin-color-blue-ribbon);\n\t\t\t\toutline: 0.125rem solid var(--gform-admin-color-spindle);\n\t\t\t\tz-index: 3;\n\t\t\t}\n\t\t}\n\n\t\t.gform-repeater-item__control--up {\n\t\t\tborder-end-end-radius: 0;\n\t\t\tborder-inline-end: transparent;\n\t\t\tborder-start-end-radius: 0;\n\n\t\t\t&:focus-visible {\n\t\t\t\tborder-inline-end: 1px solid var(--gform-admin-color-blue-ribbon);\n\t\t\t\toutline: 0.125rem solid var(--gform-admin-color-spindle);\n\t\t\t}\n\t\t}\n\n\t\t.gform-repeater-item__control--down {\n\t\t\tborder-end-start-radius: 0;\n\t\t\tborder-start-start-radius: 0;\n\t\t}\n\n\t\t&.gform-repeater-item--has-arrows .gform-repeater-item__control--drag-toggle {\n\t\t\tborder-end-end-radius: 0;\n\t\t\tborder-inline-end: transparent;\n\t\t\tborder-start-end-radius: 0;\n\n\t\t\t&:focus-visible {\n\t\t\t\tborder-inline-end: 1px solid var(--gform-admin-color-blue-ribbon);\n\t\t\t\toutline: 0.125rem solid var(--gform-admin-color-spindle);\n\t\t\t}\n\t\t}\n\n\t\t&.gform-repeater-item--has-drag-handle .gform-repeater-item__control--up {\n\t\t\tborder-end-start-radius: 0;\n\t\t\tborder-start-start-radius: 0;\n\t\t}\n\t}\n\n\t.gform-repeater-item--show-actions-on-hover {\n\n\t\t.gform-repeater-item__minimal-actions {\n\t\t\topacity: 0;\n\t\t\ttransition: opacity 0.2s;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus-within {\n\n\t\t\t.gform-repeater-item__minimal-actions {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-repeater-item--is-collapsed {\n\n\t\t.gform-repeater-item__collapsible {\n\t\t\ttransform: rotate(0);\n\t\t}\n\n\t\t.gform-repeater-item__wrapper {\n\t\t\tborder-bottom: none;\n\t\t}\n\n\t\t.gform-repeater-item__block-content {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.gform-repeater-item--fill-content {\n\n\t\t.gform-input-wrapper {\n\t\t\tflex: 1;\n\n\t\t\t.gform-input {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-repeater-item--is-draggable:not(.gform-repeater-item--disable-item-drag) {\n\t\tcursor: move;\n\t}\n\n\t.gform-repeater-item--is-dragging {\n\t\topacity: 0.2;\n\t}\n\n\t.gform-repeater-item--is-keyboard-nav {\n\t\tbox-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);\n\t\ttransform: translate(-2px, -2px);\n\t}\n\n\t/* Repeater Item Header */\n\n\t.gform-repeater-item__wrapper {\n\t\talign-items: center;\n\t\tborder-bottom: 1px solid var(--gform-admin-color-snuff);\n\t\tdisplay: flex;\n\t\tgap: var(--gform-admin-spacer-3);\n\t\tjustify-content: flex-start;\n\t\tmin-block-size: 60px;\n\t\tpadding-block: var(--gform-admin-spacer-3);\n\t\tpadding-inline: var(--gform-admin-spacer-6);\n\n\t\t@container (min-width: 30rem) {\n\t\t\tmin-block-size: 0;\n\t\t\tpadding-block: var(--gform-admin-spacer-5);\n\t\t}\n\n\t\t.gform-text {\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n\n\t/* Repeater Item Controls */\n\n\t.gform-repeater-item__controls,\n\t.gform-repeater-item__minimal-actions {\n\t\tdisplay: flex;\n\t\tgap: var(--gform-admin-spacer-1);\n\t}\n\n\t.gform-repeater-item__collapsible {\n\t\tmargin-inline-start: auto;\n\t\ttransform: rotate(180deg);\n\t\ttransition: box-shadow 300ms ease, background-color 300ms ease;\n\n\t\t&:focus {\n\t\t\tborder-color: var(--gform-admin-color-titan-white);\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tborder-color: var(--gform-admin-color-blue-ribbon);\n\t\t\toutline: 0.125rem solid var(--gform-admin-color-spindle);\n\t\t}\n\t}\n\n\t/* Repeater Item Content */\n\n\t.gform-repeater-item__block-content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gform-admin-spacer-3);\n\t\tinline-size: 100%;\n\t\tpadding-block: var(--gform-admin-spacer-5);\n\t\tpadding-inline: var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-repeater-item__block-content-footer {\n\t\tdisplay: flex;\n\t\tgap: var(--gform-admin-spacer-2);\n\t\tjustify-content: flex-start;\n\t}\n\n\t/* Repeater DND */\n\n\t.gform-repeater__drop-indicator {\n\t\tbackground: transparent;\n\t\theight: 3px;\n\t}\n\n\t.gform-repeater__drop-indicator--active {\n\t\tbackground: var(--gform-admin-color-chathams);\n\t}\n}\n"]}