UNPKG

@gravityforms/components

Version:

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

1 lines 6.75 kB
{"version":3,"sources":["snackbar.css"],"names":[],"mappings":"AAEC;EACC,mBAAmB;EACnB,gBAA0C;EAC1C,yBAAsD;EACtD,kBAAkB;EAClB,wLAA8C;EAC9C,sBAAsB;EACtB,aAAa;EACb,mBAAmB;EACnB,uIAAgD;EAChD,mBAA2C;EAC3C,gBAAmD;EACnD,4BAA4B;EAC5B,gBAAgB;EAChB,gBAAgB;EAChB,UAAU;EACV,aAAa;EACb,kBAAkB;EAClB,sBAAsB;EACtB,kEAAkE;EAClE,qBAA4D;EAC5D,uBAAkB;EAAlB,kBAAkB;CA8BnB;;EA5BC;GACC,UAAU;GACV,mBAAmB;EACpB;;EAEA;GACC,YAAY;GACZ,UAAU;EACX;;EAEA;GACC,YAAY;GACZ,WAAW;EACZ;;EAEA;GACC,UAAU;GACV,SAAS;EACV;;EAEA;GACC,WAAW;GACX,SAAS;EACV;;EAEA;GACC,mBAAmB;EACpB;;CAGD,iDAAiD;;CAEjD;EACC,mBAAmB;EACnB,gBAA0C;EAC1C,6BAA6B;EAC7B,mBAAmB;EACnB,cAA8C;EAC9C,eAAe;EACf,aAAa;EACb,eAAe;EACf,YAAY;EACZ,uBAAuB;EACvB,kBAAkB;EAClB,WAAW;EACX,SAAS;EACT,yGAAyG;EACzG,WAAW;CAYZ;;CAVC;GACC,cAAqC;EACtC;;CAEA;GACC,qBAAmD;GACnD,6BAAoD;GACpD,cAAqC;GACrC,aAAa;EACd;;CAGD;EACC,eAAe;EACf,kBAAkB;CACnB;;CAEA;EACC,iBAAiB;CAClB;;CAEA;EACC,cAA4C;EAC5C,iBAAiB;EACjB,qBAAqB;CAQtB;;CANC;GAEC,gBAAgB;GAChB,aAAa;GACb,0BAA0B;EAC3B;;CAKA;GACC,cAAqC;EACtC;;CAKA;GACC,cAAmC;EACpC;;CAGD;EACC,SAAS;EACT,wBAAwB;EACxB,gBAAgB;EAChB,eAAe;EACf,UAAU;EACV,gBAAgB;EAChB,oBAAoB;EACpB,eAAe;EACf,+CAA+C;EAC/C,2BAA2B;EAC3B,6DAA6D;EAC7D,qBAA4D;EAC5D,kBAAkB;EAClB,eAAe;CAgChB;;CA9BC;GACC,UAAU;GACV,+CAA+C;GAC/C,6DAA6D;GAC7D,mBAAmB;EACpB;;CAEA;GACC,mBAAmB;GACnB,6BAA6B;GAC7B,mBAAmB;GACnB,sBAAsB;GACtB,aAAa;GACb,eAAe;GACf,YAAY;GACZ,uBAAuB;GACvB,WAAW;EACZ;;CAEA;GACC,yBAAyD;GACzD,qBAA0C;GAC1C,cAAmC;EACpC;;CAEA;GACC,yBAAsD;GACtD,qBAA4C;GAC5C,cAAqC;EACtC;;AAQA;GACC,UAAU;GACV,WAAW;EACZ;;AAEA;GACC,UAAU;GACV,WAAW;EACZ;;AAEA;GACC,UAAU;EACX;;AAEA;GACC,WAAW;EACZ;;AAEA;GACC,kBAAkB;GAClB,mBAAmB;EACpB;;AAGD;EACC,UAAU;EACV,WAAW;CACZ;;AAEA;EACC,cAAc;EACd,kBAAkB;CACnB;;AAEA;EACC,kBAAkB;CACnB;;AAEA;EACC,iBAAiB;CAClB","file":"snackbar.css","sourcesContent":[".gform-admin {\n\n\t.gform-snackbar {\n\t\talign-items: center;\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-white-lilac);\n\t\tborder-radius: 3px;\n\t\tbox-shadow: var(--gform-admin-box-shadow-mega);\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-size: var(--gform-common-font-size-sm);\n\t\tfont-weight: var(--gform-common-font-weight-medium);\n\t\tmax-width: calc(100% - 40px);\n\t\tmin-height: 56px;\n\t\tmin-width: 344px;\n\t\topacity: 0;\n\t\tpadding: 16px;\n\t\tposition: absolute;\n\t\ttransform: scale(0.95);\n\t\ttransition: transform 300ms ease-in-out, opacity 300ms ease-in-out;\n\t\ttransition-delay: var(--gform-snackbar-animation-delay, 0ms);\n\t\twidth: max-content;\n\n\t\t&.gform-snackbar--reveal {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\n\t\t&.gform-snackbar--bottomleft {\n\t\t\tbottom: 20px;\n\t\t\tleft: 20px;\n\t\t}\n\n\t\t&.gform-snackbar--bottomright {\n\t\t\tbottom: 20px;\n\t\t\tright: 20px;\n\t\t}\n\n\t\t&.gform-snackbar--topleft {\n\t\t\tleft: 20px;\n\t\t\ttop: 20px;\n\t\t}\n\n\t\t&.gform-snackbar--topright {\n\t\t\tright: 20px;\n\t\t\ttop: 20px;\n\t\t}\n\n\t\t&.gform-snackbar--has-close {\n\t\t\tpadding-right: 50px;\n\t\t}\n\t}\n\n\t/* todo: create as close component, check figma */\n\n\t.gform-snackbar__close {\n\t\talign-items: center;\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid transparent;\n\t\tborder-radius: 100%;\n\t\tcolor: var(--gform-admin-color-amethyst-smoke);\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tfont-size: 32px;\n\t\theight: 24px;\n\t\tjustify-content: center;\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\ttop: 16px;\n\t\ttransition: border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease, color 300ms ease;\n\t\twidth: 24px;\n\n\t\t&:hover {\n\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tborder-color: var(--gform-admin-color-gravity-blue);\n\t\t\tbox-shadow: 0 0 0 2px var(--gform-admin-color-focus);\n\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.gform-snackbar__icon {\n\t\tfont-size: 24px;\n\t\tmargin-right: 10px;\n\t}\n\n\t.gform-snackbar__message {\n\t\tmargin-right: 6px;\n\t}\n\n\t.gform-snackbar__cta {\n\t\tcolor: var(--gform-admin-color-gravity-blue);\n\t\tmargin-left: auto;\n\t\ttext-decoration: none;\n\n\t\t&:focus,\n\t\t&:hover {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t.gform-snackbar--success {\n\n\t\t.gform-snackbar__icon {\n\t\t\tcolor: var(--gform-admin-color-green);\n\t\t}\n\t}\n\n\t.gform-snackbar--error {\n\n\t\t.gform-snackbar__icon {\n\t\t\tcolor: var(--gform-admin-color-red);\n\t\t}\n\t}\n\n\t.gform-snackbar--theme-cosmos {\n\t\tleft: 50%;\n\t\tmargin-block-start: 30px;\n\t\tmin-height: 52px;\n\t\tmin-width: auto;\n\t\topacity: 0;\n\t\tpadding-block: 0;\n\t\tpadding-inline: 16px;\n\t\tposition: fixed;\n\t\ttop: calc((60px * var(--gform-snackbar-index)));\n\t\ttransform: translateX(-50%);\n\t\ttransition: top 0.5s ease, opacity 0.5s ease, visibility 0.5s;\n\t\ttransition-delay: var(--gform-snackbar-animation-delay, 0ms);\n\t\tvisibility: hidden;\n\t\tz-index: 100009;\n\n\t\t&.gform-snackbar--visible {\n\t\t\topacity: 1;\n\t\t\ttop: calc((60px * var(--gform-snackbar-index)));\n\t\t\ttransition: top 0.5s ease, opacity 0.5s ease, visibility 0.5s;\n\t\t\tvisibility: visible;\n\t\t}\n\n\t\t.gform-snackbar__type-icon {\n\t\t\talign-items: center;\n\t\t\tborder: 2px solid transparent;\n\t\t\tborder-radius: 100%;\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: flex;\n\t\t\tfont-size: 1rem;\n\t\t\theight: 20px;\n\t\t\tjustify-content: center;\n\t\t\twidth: 20px;\n\t\t}\n\n\t\t.gform-snackbar__type-icon--error {\n\t\t\tbackground-color: var(--gform-admin-color-background-red);\n\t\t\tborder-color: var(--gform-admin-color-red);\n\t\t\tcolor: var(--gform-admin-color-red);\n\t\t}\n\n\t\t.gform-snackbar__type-icon--success {\n\t\t\tbackground-color: var(--gform-admin-color-light-green);\n\t\t\tborder-color: var(--gform-admin-color-green);\n\t\t\tcolor: var(--gform-admin-color-green);\n\t\t}\n\t}\n}\n\nhtml[dir=\"rtl\"] .gform-admin {\n\n\t.gform-snackbar {\n\n\t\t&.gform-snackbar--bottomleft {\n\t\t\tleft: auto;\n\t\t\tright: 20px;\n\t\t}\n\n\t\t&.gform-snackbar--bottomright {\n\t\t\tleft: 20px;\n\t\t\tright: auto;\n\t\t}\n\n\t\t&.gform-snackbar--topleft {\n\t\t\tleft: 20px;\n\t\t}\n\n\t\t&.gform-snackbar--topright {\n\t\t\tright: 20px;\n\t\t}\n\n\t\t&.gform-snackbar--has-close {\n\t\t\tpadding-left: 50px;\n\t\t\tpadding-right: 16px;\n\t\t}\n\t}\n\n\t.gform-snackbar__close {\n\t\tleft: 10px;\n\t\tright: auto;\n\t}\n\n\t.gform-snackbar__cta {\n\t\tmargin-left: 0;\n\t\tmargin-right: auto;\n\t}\n\n\t.gform-snackbar__icon {\n\t\tmargin: 0 0 0 10px;\n\t}\n\n\t.gform-snackbar__message {\n\t\tmargin: 0 0 0 6px;\n\t}\n}\n"]}