UNPKG

@gravityforms/components

Version:

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

1 lines 11.4 kB
{"version":3,"sources":["alert.css"],"names":[],"mappings":"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","file":"alert.css","sourcesContent":[".gform-admin {\n\n\t.gform-alert {\n\t\t-webkit-font-smoothing: antialiased;\n\t\talign-items: flex-start; /* stylelint-disable-line */\n\t\tbackground-color: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-snuff);\n\t\tborder-radius: 3px;\n\t\tbox-shadow: 0 1px 4px rgba(0, 0, 0, 0.11), 0 0 4px rgba(18, 25, 97, 0.0405344);\n\t\tcolor: var(--gform-admin-color-text);\n\t\tdisplay: flex;\n\t\tflex-wrap: nowrap;\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-weight: var(--gform-common-font-weight-medium);\n\t\tmargin-block-end: 1rem;\n\t\tpadding-block-end: 12px;\n\t\tpadding-block-start: 11px;\n\t\tpadding-inline: 20px;\n\t\tposition: relative;\n\n\t\t.field_setting &,\n\t\t& + .field_setting {\n\t\t\tmargin-block-start: 1rem;\n\t\t}\n\n\t\t/* Style variant: Inline */\n\n\t\t&.gform-alert--inline {\n\t\t\tpadding-block-end: 7px;\n\t\t\tpadding-block-start: 6px;\n\t\t\tpadding-inline: 12px;\n\n\t\t\t.gform-alert__message-wrap {\n\t\t\t\tcolumn-gap: 10px;\n\t\t\t\tpadding-inline-start: 28px;\n\t\t\t\trow-gap: 7px;\n\n\t\t\t\t.gform-alert__message {\n\t\t\t\t\tfont-size: 0.75rem;\n\t\t\t\t\tpadding-block-start: 8px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.gform-alert__icon {\n\t\t\t\tfont-size: 21px;\n\t\t\t\theight: 19px;\n\t\t\t\tinset-block-start: 13px;\n\t\t\t\tinset-inline-start: 12px;\n\t\t\t\twidth: 19px;\n\t\t\t}\n\t\t}\n\n\t\t/*\n\t\t * Alert: Message\n\t\t */\n\n\t\t.gform-alert__message-wrap {\n\t\t\tcolumn-gap: 15px;\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\tmin-height: 33px;\n\t\t\tpadding-inline-start: 32px;\n\t\t\trow-gap: 10px;\n\t\t\twidth: 100%;\n\n\t\t\t.gform-alert__message {\n\t\t\t\tcolor: inherit;\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tfont-size: 0.8125rem;\n\t\t\t\tfont-weight: var(--gform-common-font-weight-medium);\n\t\t\t\tline-height: var(--gform-admin-line-height-base);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-block-start: 7px;\n\n\t\t\t\ta,\n\t\t\t\ta:hover {\n\t\t\t\t\tcolor: inherit;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/*\n\t\t * Alert: Dismiss Action\n\t\t */\n\n\t\t.gform-alert__dismiss {\n\t\t\talign-self: flex-start;\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tcursor: pointer;\n\t\t\theight: 20px;\n\t\t\tinset-block-start: 8px;\n\t\t\tmargin-inline-start: 12px;\n\t\t\tmin-width: 20px;\n\t\t\tpadding: 0;\n\t\t\tposition: relative;\n\t\t\ttext-align: center;\n\t\t\twidth: 20px;\n\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\tborder: 1px solid transparent;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tcontent: \"\";\n\t\t\t\tinset-block-start: calc(50% - 1px);\n\t\t\t\tinset-inline-start: 50%;\n\t\t\t\tposition: absolute;\n\t\t\t\ttransform: translate3d(-50%, -50%, 0);\n\t\t\t\ttransition: border-color 200ms ease-in-out;\n\t\t\t}\n\n\t\t\t&::before {\n\t\t\t\theight: 23px;\n\t\t\t\twidth: 23px;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tborder-width: 2px;\n\t\t\t\theight: 25px;\n\t\t\t\twidth: 25px;\n\t\t\t}\n\n\t\t\t&:hover,\n\t\t\t&:focus {\n\n\t\t\t\t.gform-icon {\n\t\t\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:focus {\n\n\t\t\t\t&::before {\n\t\t\t\t\tborder-color: var(--gform-admin-color-primary-light);\n\t\t\t\t}\n\n\t\t\t\t&::after {\n\t\t\t\t\tborder-color: var(--gform-admin-color-focus);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.gform-icon {\n\t\t\t\tcolor: var(--gform-admin-color-amethyst-smoke);\n\t\t\t\tfont-size: 2.1rem;\n\t\t\t\theight: 0;\n\t\t\t\tinset-block-start: 50%;\n\t\t\t\tinset-inline-start: 0;\n\t\t\t\tline-height: var(--gform-admin-line-height-none);\n\t\t\t\tposition: absolute;\n\t\t\t\ttransition: color 200ms ease-in-out;\n\t\t\t}\n\t\t}\n\n\n\t\t/* Style variant: Notice */\n\n\t\t&.gform-alert--notice {\n\t\t\tborder-color: var(--gform-admin-color-blue-ribbon);\n\t\t\tcolor: var(--gform-admin-color-blue-ribbon);\n\n\t\t\t.gform-alert__icon {\n\t\t\t\tcolor: var(--gform-admin-color-blue-ribbon);\n\t\t\t}\n\t\t}\n\n\t\t/* Style variant: Error */\n\n\t\t&.gform-alert--error {\n\t\t\tborder-color: var(--gform-admin-color-error);\n\t\t\tcolor: var(--gform-admin-color-error);\n\n\t\t\t.gform-alert__icon {\n\t\t\t\tcolor: var(--gform-admin-color-error);\n\t\t\t}\n\t\t}\n\n\t\t/* Style variant: Success */\n\n\t\t&.gform-alert--success {\n\t\t\tborder-color: var(--gform-admin-color-green);\n\t\t\tcolor: var(--gform-admin-color-green);\n\n\t\t\t.gform-alert__icon {\n\t\t\t\tcolor: var(--gform-admin-color-green);\n\t\t\t}\n\t\t}\n\n\t\t/* Style variant: Accessibility */\n\n\t\t&.gform-alert--accessibility {\n\t\t\tborder-color: var(--gform-admin-color-yellow);\n\t\t}\n\n\t\t/* Theme: Cosmos */\n\n\t\t&.gform-alert--theme-cosmos {\n\t\t\tborder-color: var(--gform-admin-color-mischka);\n\t\t\tpadding: 1rem;\n\n\t\t\t.gform-alert__message-wrap {\n\t\t\t\tmin-height: 25px;\n\t\t\t\tpadding-block-start: 2rem;\n\t\t\t\tpadding-inline-start: 0;\n\n\t\t\t\t@media (--gform-admin-viewport-md) {\n\t\t\t\t\tpadding-block-start: 0;\n\t\t\t\t\tpadding-inline-start: 2rem;\n\t\t\t\t}\n\n\t\t\t\t.gform-alert__message {\n\t\t\t\t\tfont-size: var(--gform-admin-font-size-sm);\n\t\t\t\t\tpadding-block-start: 0;\n\n\t\t\t\t\t@media (--gform-admin-viewport-md) {\n\t\t\t\t\t\tpadding-block-start: 0.125rem;\n\t\t\t\t\t}\n\n\t\t\t\t\t& > * {\n\t\t\t\t\t\tfont-size: var(--gform-admin-font-size-sm);\n\t\t\t\t\t\tfont-weight: 400;\n\t\t\t\t\t}\n\n\t\t\t\t\t.gform-list {\n\t\t\t\t\t\tmargin-inline-start: 1rem;\n\n\t\t\t\t\t\t&.gform-list--bulleted,\n\t\t\t\t\t\t&.gform-list--decimal {\n\t\t\t\t\t\t\tpadding-inline-start: 0;\n\n\t\t\t\t\t\t\tli {\n\t\t\t\t\t\t\t\tmargin-block-end: 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/* Style variant: Info */\n\n\t\t\t&.gform-alert--info {\n\t\t\t\tcolor: var(--gform-admin-color-port);\n\n\t\t\t\t.gform-alert__message-wrap {\n\n\t\t\t\t\t.gform-alert__message {\n\t\t\t\t\t\tcolor: var(--gform-admin-color-port);\n\n\t\t\t\t\t\t& > * {\n\t\t\t\t\t\t\tcolor: var(--gform-admin-color-shuttle-gray);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.gform-alert__icon {\n\t\t\t\t\tcolor: var(--gform-admin-color-port);\n\n\t\t\t\t\t&::after {\n\t\t\t\t\t\tbackground-color: var(--gform-admin-color-anti-flash-white);\n\t\t\t\t\t\tborder-color: var(--gform-admin-color-mischka);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/* Style variant: Notice */\n\n\t\t\t&.gform-alert--notice {\n\t\t\t\tbackground: var(--gform-admin-color-zircon);\n\t\t\t\tborder-color: var(--gform-admin-color-broad-daylight);\n\t\t\t\tcolor: var(--gform-admin-color-science-blue);\n\n\t\t\t\t.gform-alert__message-wrap {\n\n\t\t\t\t\t.gform-alert__message {\n\t\t\t\t\t\tcolor: var(--gform-admin-color-science-blue);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.gform-alert__icon {\n\t\t\t\t\tcolor: var(--gform-admin-color-science-blue);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/* Style variant: Success */\n\n\t\t\t&.gform-alert--success {\n\t\t\t\tbackground: var(--gform-admin-color-sugar-cane);\n\t\t\t\tborder-color: var(--gform-admin-color-shamrock);\n\t\t\t\tcolor: var(--gform-admin-color-sea-green);\n\n\t\t\t\t.gform-alert__message-wrap {\n\n\t\t\t\t\t.gform-alert__message {\n\t\t\t\t\t\tcolor: var(--gform-admin-color-sea-green);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.gform-alert__icon {\n\t\t\t\t\tcolor: var(--gform-admin-color-sea-green);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/* Style variant: Error */\n\n\t\t\t&.gform-alert--error,\n\t\t\t&.gform-alert--incorrect {\n\t\t\t\tbackground: var(--gform-admin-color-rose-white);\n\t\t\t\tborder-color: var(--gform-admin-color-spanish-pink);\n\t\t\t\tcolor: var(--gform-admin-color-once-bitten);\n\n\t\t\t\t.gform-alert__message-wrap {\n\n\t\t\t\t\t.gform-alert__message {\n\t\t\t\t\t\tcolor: var(--gform-admin-color-once-bitten);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.gform-alert__icon {\n\t\t\t\t\tcolor: var(--gform-admin-color-once-bitten);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.gform-alert__icon {\n\t\t\t\tinset-inline-start: 16px;\n\n\t\t\t\t&.gform-icon--preset-active {\n\t\t\t\t\tposition: absolute;\n\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/*\n\t * Alert: Icon\n\t */\n\n\t.gform-alert__icon {\n\t\tcolor: var(--gform-admin-color-text);\n\t\tfont-size: 24px;\n\t\theight: 21px;\n\t\tinset-block-start: 17px;\n\t\tinset-inline-start: 20px;\n\t\tposition: absolute;\n\t\twidth: 21px;\n\n\t\t&::before {\n\t\t\theight: 0;\n\t\t\tinset-block-start: 50%;\n\t\t\tleft: 50%;\n\t\t\tline-height: var(--gform-admin-line-height-none);\n\t\t\tposition: absolute;\n\t\t\ttransform: translate3d(-50%, -50%, 0);\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t/* Message CTA */\n\n\t.gform-alert__cta {\n\t\tmargin-block-start: 1px;\n\t}\n}\n"]}