UNPKG

@gravityforms/components

Version:

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

1 lines 11.2 kB
{"version":3,"sources":["kanban.css"],"names":[],"mappings":"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","file":"kanban.css","sourcesContent":[".gform-admin {\n\n\t.gform-kanban {\n\t\tborder: 1px solid var(--gform-admin-color-metal-gray);\n\t\tborder-radius: 3px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t&,\n\t\t& * {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t}\n\n\t.gform-kanban__header {\n\t\talign-items: flex-start;\n\t\tborder-block-end: 1px solid var(--gform-admin-color-metal-gray);\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--gform-admin-spacer-5) var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-kanban__controls {\n\t\tborder-block-end: 1px solid var(--gform-admin-color-metal-gray);\n\t\tdisplay: flex;\n\t\tflex-direction: column-reverse;\n\t\tinline-size: 100%;\n\n\t\t@media (min-width: 40.625rem) {\n\t\t\tflex-direction: row;\n\t\t}\n\t}\n\n\t.gform-kanban__controls-inner {\n\t\tpadding-block: var(--gform-admin-spacer-4);\n\t\tpadding-inline: var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-kanban__controls-inner--left:not(:last-child) {\n\t\tborder-block-start: 1px solid var(--gform-admin-color-metal-gray);\n\n\t\t@media (min-width: 40.625rem) {\n\t\t\tborder-block-start: 0;\n\t\t}\n\t}\n\n\t.gform-kanban__controls-inner--right {\n\t\tdisplay: flex;\n\t\tgap: var(--gform-admin-spacer-3);\n\n\t\t@media (min-width: 40.625rem) {\n\t\t\tmargin-inline-start: auto;\n\t\t}\n\t}\n\n\t.gform-kanban__controls-search {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tgap: var(--gform-admin-spacer-3);\n\t\tinline-size: 100%;\n\t\tjustify-content: flex-end;\n\n\t\t@media (min-width: 40.625rem) {\n\t\t\tmax-inline-size: 28.75rem;\n\t\t}\n\t}\n\n\t.gform-kanban__controls-search-input {\n\t\tflex-grow: 1;\n\n\t\t.gform-input {\n\t\t\tinline-size: 100%;\n\t\t}\n\t}\n\n\t.gform-kanban__controls-simple-filters {\n\t\tposition: relative;\n\t}\n\n\t.gform-kanban__controls-simple-filters-list-item--reset {\n\n\t\t&.gform-kanban__controls-simple-filters-list-item:last-child { /* extra selectors to override droplist styles */\n\t\t\tmargin-block-end: calc(var(--gform-admin-spacer-1) * -1);\n\t\t}\n\n\t\t.gform-droplist__item-trigger-text {\n\t\t\tcolor: var(--gform-admin-color-blue-ribbon);\n\t\t\tpadding: 0;\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.gform-kanban__controls-simple-filters-count {\n\t\talign-items: center;\n\t\tbackground: var(--gform-admin-color-blue-ribbon);\n\t\tblock-size: 0.875rem;\n\t\tborder-radius: 0.125rem;\n\t\tcolor: var(--gform-admin-color-white);\n\t\tdisplay: flex;\n\t\tinline-size: 0.875rem;\n\t\tinset-block-start: -2px;\n\t\tinset-inline-end: -2px;\n\t\tjustify-content: center;\n\t\tposition: absolute;\n\t}\n\n\t.gform-kanban__active-filters {\n\t\talign-items: center;\n\t\tborder-block-end: 1px solid var(--gform-admin-color-metal-gray);\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: var(--gform-admin-spacer-3);\n\t\tjustify-content: center;\n\t\tpadding-block: var(--gform-admin-spacer-2);\n\t\tpadding-inline: var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-kanban__grid-container {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.gform-kanban__grid-inner {\n\t\tflex: 1 0 auto;\n\t\tmin-inline-size: 100%;\n\t\tpadding: var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-kanban__grid {\n\t\tblock-size: 100%;\n\t}\n\n\t.gform-kanban__column {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tblock-size: 100%;\n\t\tinline-size: 275px;\n\t\tposition: relative;\n\n\t\t&:hover,\n\t\t&:focus-within {\n\n\t\t\t.gform-kanban__column-header-actions {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-kanban__column--drag-layer {\n\t\tbackground-color: var(--gform-admin-color-alabaster);\n\t\tborder: 1px solid var(--gform-admin-color-porcelain-gray);\n\t\tborder-radius: 6px;\n\t\tbox-shadow: var(--gform-admin-box-shadow-super);\n\t\tinline-size: 301px;\n\t\tpadding: var(--gform-admin-spacer-3);\n\n\t\t.gform-kanban__card-header {\n\t\t\tcursor: grabbing;\n\t\t}\n\n\t\t.gform-kanban__column-header-actions {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t.gform-kanban__column--drop-left::before,\n\t.gform-kanban__column--drop-right::before {\n\t\tbackground: var(--gform-admin-color-blue-ribbon);\n\t\tblock-size: 100%;\n\t\tborder-radius: 2px;\n\t\tcontent: \"\";\n\t\tinline-size: 4px;\n\t\tinset-block-start: 0;\n\t\tposition: absolute;\n\t}\n\n\t.gform-kanban__column--drop-left::before {\n\t\tinset-inline-start: -8px;\n\t}\n\n\t.gform-kanban__column--drop-right::before {\n\t\tinset-inline-end: -8px;\n\t}\n\n\t.gform-kanban__column--is-dragging > .gform-kanban__column-grid {\n\t\topacity: 0;\n\t}\n\n\t.gform-kanban__column-grid {\n\t\tblock-size: 100%;\n\n\t\t.gform-kanban__column-grid-item--cards {\n\t\t\tflex: auto;\n\t\t}\n\t}\n\n\t.gform-kanban__column-header {\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tposition: relative;\n\t}\n\n\t.gform-kanban__column-header-label .gform-kanban__loader {\n\t\tmargin-block: 6px 7px;\n\t}\n\n\t.gform-kanban__column-header-actions {\n\t\talign-items: center;\n\t\topacity: 0;\n\t\ttransition: var(--gform-admin-transition-dropdown);\n\t}\n\n\t.gform-kanban__column-overlay {\n\t\tinset-block-start: 100%;\n\t}\n\n\t.gform-kanban__column-grid-item--cards {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--gform-admin-spacer-3);\n\t\tmargin-block-end: calc(var(--gform-admin-spacer-6) * -1);\n\t\toverflow: auto;\n\t\tpadding-block-end: var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-kanban__column--card-drop-when-empty .gform-kanban__column-grid-item--cards {\n\t\tposition: relative;\n\n\t\t&::before {\n\t\t\tbackground: var(--gform-admin-color-blue-ribbon);\n\t\t\tblock-size: 4px;\n\t\t\tborder-radius: 2px;\n\t\t\tcontent: \"\";\n\t\t\tinline-size: 100%;\n\t\t\tinset-block-start: 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t.gform-kanban__card {\n\t\taspect-ratio: auto;\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-snuff);\n\t\tbox-shadow: var(--gform-admin-box-shadow-outline-light);\n\t\tposition: relative;\n\t}\n\n\t.gform-kanban__card-header {\n\t\talign-items: center;\n\t\tborder-block-end: 1px solid var(--gform-admin-color-snuff);\n\t\tcursor: grab;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--gform-admin-spacer-3) var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-kanban__card-header-actions {\n\t\tmargin-inline-start: auto;\n\t}\n\n\t.gform-kanban__card-content {\n\t\tpadding: var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-kanban__card-footer {\n\t\tborder-block-start: 1px solid var(--gform-admin-color-snuff);\n\t\tpadding: var(--gform-admin-spacer-3) var(--gform-admin-spacer-6);\n\t}\n\n\t.gform-kanban__card--drop-above::before,\n\t.gform-kanban__card--drop-below::before {\n\t\tbackground: var(--gform-admin-color-blue-ribbon);\n\t\tblock-size: 4px;\n\t\tborder-radius: 2px;\n\t\tcontent: \"\";\n\t\tinline-size: 100%;\n\t\tinset-inline-start: 0;\n\t\tposition: absolute;\n\t}\n\n\t.gform-kanban__card--drop-above {\n\n\t\t&::before {\n\t\t\tinset-block-start: -8px;\n\t\t}\n\n\t\t&:first-child::before {\n\t\t\tinset-block-start: 0;\n\t\t}\n\t}\n\n\t.gform-kanban__card--drop-below {\n\n\t\t&::before {\n\t\t\tinset-block-end: -8px;\n\t\t}\n\n\t\t&:last-child::before {\n\t\t\tinset-block-end: 0;\n\t\t}\n\t}\n\n\t.gform-kanban__drag-layer {\n\t\tblock-size: 100%;\n\t\tinline-size: 100%;\n\t\tinset-block-start: 0;\n\t\tinset-inline-start: 0;\n\t\tpointer-events: none;\n\t\tposition: fixed;\n\t\tz-index: 1;\n\t}\n\n\t.gform-kanban__loader {\n\t\tbackground-color: var(--gform-admin-color-porcelain-gray);\n\t\tblock-size: 22px;\n\t\tborder-radius: 11px;\n\t\topacity: 1;\n\n\t\t&.gform-kanban__loader--animating {\n\t\t\tanimation: gformKanbanOpacityCycle 1s ease-in-out infinite;\n\t\t\tanimation-delay: -0.5s;\n\t\t}\n\t}\n\n\t.gform-kanban__empty {\n\t\talign-items: center;\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-white-iris);\n\t\tborder-radius: 3px;\n\t\tbox-shadow: var(--gform-admin-box-shadow-mega);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tinset-block-start: 50%;\n\t\tinset-inline-start: 50%;\n\t\tjustify-content: center;\n\t\tpadding: var(--gform-admin-spacer-6);\n\t\tposition: absolute;\n\t\ttext-align: center;\n\t\ttransform: translate(-50%, -50%);\n\t}\n}\n\n@keyframes gformKanbanOpacityCycle {\n\n\t0%,\n\t100% {\n\t\topacity: 1;\n\t}\n\n\t50% {\n\t\topacity: 0.5;\n\t}\n}\n"]}