UNPKG

@gravityforms/components

Version:

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

1 lines 10.8 kB
{"version":3,"sources":["inputs.css"],"names":[],"mappings":"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","file":"inputs.css","sourcesContent":[".gform-admin {\n\n\t.gform-input {\n\t\t-webkit-appearance: none;\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-blue-haze);\n\t\tborder-radius: 3px;\n\t\tbox-shadow: 0 0 0 transparent;\n\t\tbox-sizing: border-box;\n\t\tcolor: var(--gform-admin-color-text);\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-size: var(--gform-admin-font-size-base-old);\n\t\tline-height: 2;\n\t\tmargin: 0;\n\t\tmin-block-size: 0;\n\t\toutline: none;\n\t\tpadding: 0.25rem 0.75rem;\n\t\ttransition: var(--gform-admin-transition-inputs);\n\n\t\t&:focus {\n\n\t\t\t@mixin inputFocus;\n\t\t}\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--gform-admin-color-placeholder);\n\t\t\tfont-family: var(--gform-admin-font-family-base);\n\t\t\tfont-size: var(--gform-admin-font-size-base-old);\n\t\t\tfont-weight: var(--gform-admin-font-weight-normal);\n\t\t}\n\t}\n\n\t.gform-input-wrapper--input.gform-input-wrapper--theme-cosmos {\n\n\t\t.gform-input__wrapper {\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.gform-input {\n\t\t\tborder-color: var(--gform-admin-color-santas);\n\n\t\t\t+ .gform-input__label:nth-child(1) {\n\t\t\t\tmargin-bottom: 0.375rem;\n\t\t\t}\n\n\t\t\t+ .gform-input-help-text:nth-child(2) {\n\t\t\t\tmargin-bottom: 0.375rem;\n\t\t\t}\n\n\t\t\t+ .gform-input-help-text:nth-child(3) {\n\t\t\t\tmargin-top: 0.375rem;\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tborder-color: var(--gform-admin-color-blue-ribbon);\n\t\t\t}\n\n\t\t\t&:disabled {\n\t\t\t\tbackground-color: var(--gform-admin-color-light-blue);\n\t\t\t\tcolor: var(--gform-admin-color-santas);\n\t\t\t}\n\n\t\t\t&::placeholder {\n\t\t\t\tfont-size: var(--gform-admin-font-size-sm);\n\t\t\t}\n\t\t}\n\n\t\t.gform-input__action-wrapper {\n\n\t\t\t.gform-input__action-button {\n\t\t\t\tborder-color: var(--gform-admin-color-santas);\n\n\t\t\t\t.gform-icon {\n\t\t\t\t\tcolor: var(--gform-admin-color-santas);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input-wrapper--required {\n\n\t\t\t.gform-input {\n\n\t\t\t\t+ .gform-input-help-text:nth-child(4) {\n\t\t\t\t\tmargin-top: 0.375rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input-wrapper--border-error {\n\n\t\t\t.gform-input {\n\t\t\t\tborder: 1px solid var(--gform-admin-color-red);\n\n\t\t\t\t&:focus {\n\t\t\t\t\tbox-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px var(--gform-admin-color-background-red);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.gform-input-help-text {\n\t\t\t\tcolor: var(--gform-admin-color-red);\n\t\t\t}\n\n\t\t\t.gform-input__action-wrapper {\n\n\t\t\t\t.gform-input {\n\t\t\t\t\tborder-inline-end: 0;\n\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\tborder: 1px solid var(--gform-admin-color-red);\n\t\t\t\t\t\tz-index: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.gform-input__action-button {\n\t\t\t\t\tborder-inline-start-color: var(--gform-admin-color-red);\n\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\tborder-inline-start-color: var(--gform-admin-color-santas);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input-wrapper--border-correct {\n\n\t\t\t.gform-input {\n\t\t\t\tborder: 1px solid var(--gform-admin-color-emerald);\n\n\t\t\t\t&:focus {\n\t\t\t\t\tbox-shadow: 0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px var(--gform-admin-color-tara);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.gform-input__action-wrapper {\n\n\t\t\t\t.gform-input {\n\t\t\t\t\tborder-inline-end: 0;\n\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\tborder: 1px solid var(--gform-admin-color-emerald);\n\t\t\t\t\t\tz-index: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t.gform-input__action-button {\n\t\t\t\t\tborder-inline-start-color: var(--gform-admin-color-emerald);\n\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\tborder-inline-start-color: var(--gform-admin-color-santas);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input-wrapper--with-icon {\n\n\t\t\t.gform-input {\n\t\t\t\tpadding-inline-end: 2.75rem;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input-wrapper--text-security-circle {\n\n\t\t\t.gform-input {\n\t\t\t\t-webkit-text-security: circle;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input-wrapper--text-security-disc {\n\n\t\t\t.gform-input {\n\t\t\t\t-webkit-text-security: disc;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input-wrapper--text-security-square {\n\n\t\t\t.gform-input {\n\t\t\t\t-webkit-text-security: square;\n\t\t\t}\n\t\t}\n\n\t\t.gform-input--size-r {\n\t\t\tblock-size: 2.1875rem;\n\t\t\tpadding: 0.375rem 0.75rem;\n\t\t}\n\n\t\t.gform-input--size-l {\n\t\t\tblock-size: 2.375rem;\n\t\t\tpadding: 0.5rem 0.75rem;\n\t\t}\n\n\t\t.gform-input--size-xl {\n\t\t\tblock-size: 2.9375rem;\n\t\t\tpadding: 0.75rem;\n\t\t}\n\n\t\t&.gform-input-wrapper--clearable {\n\n\t\t\t.gform-input {\n\t\t\t\tpadding-inline-end: 2.75rem;\n\t\t\t}\n\t\t}\n\n\t\t.gform-label {\n\t\t\tmargin-block-end: 0.375rem;\n\t\t}\n\n\t\t.gform-input-help-text:nth-child(2) {\n\t\t\tmargin-block-end: 0.375rem;\n\t\t}\n\n\t\t.gform-input-help-text:nth-child(3) {\n\t\t\tmargin-block-start: 0.375rem;\n\t\t}\n\n\t\t.gform-input__icon {\n\t\t\tinset-block-start: 50%;\n\t\t\tinset-inline-end: 0.8125rem;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\ttransform: translateY(-50%);\n\t\t}\n\t}\n\n\t.gform-input__action-wrapper {\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\n\t\t.gform-input__wrapper {\n\t\t\tflex: 1;\n\t\t}\n\n\t\t.gform-input {\n\t\t\tborder-end-end-radius: 0;\n\t\t\tborder-inline-end: 0;\n\t\t\tborder-start-end-radius: 0;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\n\t\t\t&:focus {\n\t\t\t\tborder: 1px solid var(--gform-admin-color-blue-ribbon);\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t}\n\n\t\t.gform-input__icon {\n\t\t\tz-index: 2;\n\t\t}\n\n\t\t.gform-input__action-button {\n\t\t\tborder-end-start-radius: 0;\n\t\t\tborder-start-start-radius: 0;\n\t\t\theight: auto;\n\t\t\tmargin-inline-start: 0;\n\t\t\tpadding-inline-end: 0.85rem;\n\t\t\tpadding-inline-start: 0.85rem;\n\n\t\t\t.gform-icon {\n\t\t\t\tfont-size: 1rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-input-wrapper--clearable {\n\t\tposition: relative;\n\t}\n\n\t.gform-input__clearable-button {\n\t\talign-items: center;\n\t\tblock-size: 100%;\n\t\tdisplay: flex;\n\t\tinline-size: 1.875rem;\n\t\tinset-block-start: 50%;\n\t\tinset-inline-end: var(--gform-admin-spacer-2);\n\t\tjustify-content: center;\n\t\tposition: absolute;\n\t\ttransform: translateY(-50%);\n\n\t\t.gform-button__icon {\n\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t\tfont-size: 1.25rem;\n\t\t\tinset-block-start: 0;\n\t\t\tpadding: 0;\n\n\t\t\t&::before {\n\t\t\t\tfont-size: 1.25rem;\n\t\t\t}\n\t\t}\n\n\t\t&:focus,\n\t\t&:hover {\n\n\t\t\t.gform-button__icon {\n\t\t\t\tcolor: var(--gform-admin-color-amethyst-smoke);\n\n\t\t\t\t&::before {\n\t\t\t\t\tfont-size: 1.25rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-input-add-on-wrapper {\n\t\talign-items: stretch;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\t.gform-input-add-on-wrapper--suffix .gform-input {\n\t\tborder-end-end-radius: 0;\n\t\tborder-start-end-radius: 0;\n\t}\n\n\t.gform-input__add-on {\n\t\talign-items: center;\n\t\tbackground-color: var(--gform-admin-color-light-blue);\n\t\tborder: 1px solid var(--gform-admin-color-santas);\n\t\tborder-radius: 3px;\n\t\tcolor: var(--gform-admin-color-port);\n\t\tdisplay: flex;\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-size: var(--gform-admin-font-size-base-old);\n\t\tfont-weight: 400;\n\t\tpadding-left: 13px;\n\t\tpadding-right: 13px;\n\t\twhite-space: nowrap;\n\t}\n\n\t.gform-input__add-on--prefix {\n\t\tborder-end-end-radius: 0;\n\t\tborder-inline-end: 0;\n\t\tborder-start-end-radius: 0;\n\t}\n\n\t.gform-input__add-on--suffix {\n\t\tborder-end-start-radius: 0;\n\t\tborder-inline-start: 0;\n\t\tborder-start-start-radius: 0;\n\t}\n\n\t.gform-input__add-on + .gform-input {\n\t\tborder-end-start-radius: 0;\n\t\tborder-start-start-radius: 0;\n\t}\n\n\t.gform-input__add-on--action-button {\n\t\tbackground-color: var(--gform-admin-color-white);\n\t\tborder-color: var(--gform-admin-color-snuff);\n\t\theight: auto;\n\t\tmargin-inline-start: 12px;\n\t\tpadding-inline-end: 12px;\n\t\tpadding-inline-start: 12px;\n\t}\n\n\t.gform-input__add-on--action-button.gform-button--icon-leading.gform-button--size-sm .gform-button__icon {\n\t\tcolor: var(--gform-admin-color-comet);\n\t\tfont-size: 14px;\n\t\tmargin: 0;\n\t}\n\n}\n"]}