Astra_Dynamic_CSS::astra_default_forms_styling_dynamic_css()

Dynamic CSS for default forms styling improvements.


Description


Return

(string) Dynamic CSS.


Source

File: inc/class-astra-dynamic-css.php

		public static function astra_default_forms_styling_dynamic_css() {
			$css                       = '';
			$enable_site_accessibility = astra_get_option( 'site-accessibility-toggle', false );
			$forms_default_styling_css = array(
				'input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type=reset], input[type=tel], input[type=date], select, textarea' => array(
					'font-size'     => '16px',
					'font-style'    => 'normal',
					'font-weight'   => '400',
					'line-height'   => '24px',
					'width'         => '100%',
					'padding'       => '12px 16px',
					'border-radius' => '4px',
					'box-shadow'    => '0px 1px 2px 0px rgba(0, 0, 0, 0.05)',
					'color'         => 'var(--ast-form-input-text, #475569)',
				),
				'input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type=reset], input[type=tel], input[type=date], select' => array(
					'height' => '40px',
				),
				'input[type="date"]'      => array(
					'border-width' => '1px',
					'border-style' => 'solid',
					'border-color' => 'var(--ast-border-color)',
				),
				'input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type=reset]:focus, input[type="tel"]:focus, input[type="date"]:focus, select:focus, textarea:focus' => array(
					'border-color' => 'var(--ast-global-color-0, #046BD2)',
					'box-shadow'   => 'none',
					'outline'      => 'none',
					'color'        => 'var(--ast-form-input-focus-text, #475569)',
				),
				'label, legend'           => array(
					'color'       => '#111827',
					'font-size'   => '14px',
					'font-style'  => 'normal',
					'font-weight' => '500',
					'line-height' => '20px',
				),
				'select'                  => array(
					'padding' => '6px 10px',
				),
				'fieldset'                => array(
					'padding'       => '30px',
					'border-radius' => '4px',
				),
				'button, .ast-button, .button, input[type="button"], input[type="reset"], input[type="submit"]' => array(
					'border-radius' => '4px',
					'box-shadow'    => '0px 1px 2px 0px rgba(0, 0, 0, 0.05)',
				),
				':root'                   => array(
					'--ast-comment-inputs-background' => '#FFF',
				),
				'::placeholder'           => array(
					'color' => 'var(--ast-form-field-color, #9CA3AF)',
				),
				'::-ms-input-placeholder' => array( /* Edge 12-18 */
					'color' => 'var(--ast-form-field-color, #9CA3AF)',
				),
			);

			if ( defined( 'WPCF7_VERSION' ) ) {
				$wpcf7_dynamic_css         = array(
					'.wpcf7 input.wpcf7-form-control:not([type=submit]), .wpcf7 textarea.wpcf7-form-control' => array(
						'padding' => '12px 16px',
					),
					'.wpcf7 select.wpcf7-form-control' => array(
						'padding' => '6px 10px',
					),
					'.wpcf7 input.wpcf7-form-control:not([type=submit]):focus, .wpcf7 select.wpcf7-form-control:focus, .wpcf7 textarea.wpcf7-form-control:focus' => array(
						'border-color' => 'var(--ast-global-color-0, #046BD2)',
						'box-shadow'   => 'none',
						'outline'      => 'none',
						'color'        => 'var(--ast-form-input-focus-text, #475569)',
					),
					'.wpcf7 .wpcf7-not-valid-tip'      => array(
						'color'       => '#DC2626',
						'font-size'   => '14px',
						'font-weight' => '400',
						'line-height' => '20px',
						'margin-top'  => '8px',
					),
					'.wpcf7 input[type=file].wpcf7-form-control' => array(
						'font-size'     => '16px',
						'font-style'    => 'normal',
						'font-weight'   => '400',
						'line-height'   => '24px',
						'width'         => '100%',
						'padding'       => '12px 16px',
						'border-radius' => '4px',
						'box-shadow'    => '0px 1px 2px 0px rgba(0, 0, 0, 0.05)',
						'color'         => 'var(--ast-form-input-text, #475569)',
					),
				);
				$forms_default_styling_css = array_merge( $forms_default_styling_css, $wpcf7_dynamic_css );
			}

			if ( class_exists( 'GFForms' ) ) {
				$gravity_forms_dynamic_css = array(
					'input[type="radio"].gfield-choice-input:checked, input[type="checkbox"].gfield-choice-input:checked, .ginput_container_consent input[type="checkbox"]:checked' => array(
						'border-color'     => 'inherit',
						'background-color' => 'inherit',
					),
					'input[type="radio"].gfield-choice-input:focus, input[type="checkbox"].gfield-choice-input:focus, .ginput_container_consent input[type="checkbox"]:focus' => array(
						'border-color' => 'var(--ast-global-color-0, #046BD2)',
						'box-shadow'   => 'none',
						'outline'      => 'none',
						'color'        => 'var(--ast-form-input-focus-text, #475569)',
					),
				);
				$forms_default_styling_css = array_merge( $forms_default_styling_css, $gravity_forms_dynamic_css );
			}

			// Default form styling accessibility options compatibility.
			if ( $enable_site_accessibility ) {
				$outline_style          = astra_get_option( 'site-accessibility-highlight-type' );
				$outline_color          = astra_get_option( 'site-accessibility-highlight-color' );
				$outline_input_style    = astra_get_option( 'site-accessibility-highlight-input-type' );
				$outline_input_color    = astra_get_option( 'site-accessibility-highlight-input-color' );
				$input_highlight        = ( 'disable' !== $outline_input_style );
				$selected_outline_style = $input_highlight ? $outline_input_style : $outline_style;
				$selected_outline_color = $input_highlight ? $outline_input_color : $outline_color;
				$forms_default_styling_css['input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type=reset]:focus, input[type="tel"]:focus, input[type="date"]:focus, select:focus, textarea:focus'] = array(
					'border-color' => $selected_outline_color ? $selected_outline_color : '#046BD2',
					'box-shadow'   => 'none',
					'outline'      => 'none',
					'color'        => 'var(--ast-form-input-focus-text, #475569)',
				);

				// Contact form 7 accessibility compatibility.
				if ( defined( 'WPCF7_VERSION' ) ) {
					$forms_default_styling_css['.wpcf7 input.wpcf7-form-control:not([type=submit]):focus, .wpcf7 select.wpcf7-form-control:focus, .wpcf7 textarea.wpcf7-form-control:focus'] = array(
						'border-style' => $selected_outline_style ? $selected_outline_style : 'inherit',
						'border-color' => $selected_outline_color ? $selected_outline_color : '#046BD2',
						'border-width' => 'thin',
						'box-shadow'   => 'none',
						'outline'      => 'none',
						'color'        => 'var(--ast-form-input-focus-text, #475569)',
					);
				}

				// Gravity forms accessibility compatibility.
				if ( class_exists( 'GFForms' ) ) {
					$forms_default_styling_css['input[type="radio"].gfield-choice-input:focus, input[type="checkbox"].gfield-choice-input:focus, .ginput_container_consent input[type="checkbox"]:focus'] = array(
						'border-style' => $selected_outline_style ? $selected_outline_style : 'inherit',
						'border-color' => $selected_outline_color ? $selected_outline_color : '#046BD2',
						'border-width' => 'thin',
						'box-shadow'   => 'none',
						'outline'      => 'none',
						'color'        => 'var(--ast-form-input-focus-text, #475569)',
					);
				}
			}

			$css .= astra_parse_css( $forms_default_styling_css );
			return $css;
		}

Changelog

Changelog
Version Description
4.6.0 Introduced.


User Contributed Notes

You must log in before being able to contribute a note or feedback.