scss 重力形式样式，输出CSS关闭，输出HTML5开启

Posted 2021-05-17

//--------------------------------------------------------------
// Gravity Forms
// Turn off Default CSS and Turn on HTML5 Output
//--------------------------------------------------------------

//-----------------------------------------
// Helper Variables
//-----------------------------------------
$color-error: #b00;

//-----------------------------------------
// Global Element
//-----------------------------------------
.gform_body,
.gform_heading,
.gform_wrapper {
	margin-bottom: rem(40);
} // .gform_body, .gform_heading, .gform_wrapper


//-----------------------------------------
// Form Container
//-----------------------------------------
.gform_body {

	// Form Contents Container <ul>.
	.gform_fields {
		@include list-reset;

		// List items <li>.
		.gfield {
			margin-bottom: rem(25);

			// Remove margin from last <li> in form list.
			&:last-child {
				margin-bottom: 0;
			} // &:last-child
			
			// Hide labels if filter is uses https://www.gravityhelp.com/gravity-forms-v1-9-placeholders/
			&.hidden_label {
				
				label {
					display: none;
				} // label
			} // &.hidden_label

			.gfield {

				// label container
				.gfield_label {
					display: block;
				} // .gfield_label
			} // .gfield
		} // .gfield
	} // .gform_fields
} // .gform_body


//-----------------------------------------
// Orientations
//-----------------------------------------
.gform_body {

	// Form Contents Container <ul>.
	.gform_fields {
		@include list-reset;

		&.top_label {

			.gfield {

				// label container
				.gfield_label {
					margin-bottom: rem(10);
				} // .gfield_label
			} // .gfield
		} // &.top_label

		&.left_label {

			.gfield {

				.ginput_container {
					display: inline-block;
				} // .ginput_container

				.gfield_label {
					margin-right: rem(15);
				} // .gfield_label
			} // .gfield
		} // &.left_label

		&.right_label {

			.gfield {
				@include clearfix;

				// label container
				.gfield_label {
					float: right;
					margin-left: rem(10);
				} // .gfield_label
			} // .gfield
		} // &.right_label
	} // .gform_fields
} // .gform_body


//-----------------------------------------
// Required Field *
//-----------------------------------------
.gfield_required {
	color: $color-error;
	font-size: rem(16);
	margin-left: rem(5);
} // .gfield_required


//-----------------------------------------
// Input Container
//-----------------------------------------
.ginput_container {

	// Radio & Checkbox Lists
	&.ginput_container_checkbox,
	&.ginput_container_radio {

		// List <ul>
		.gfield_checkbox,
		.gfield_radio {
			@include list-reset;

			li {
				line-height: 1;
				margin-bottom: rem(10);
			} // li

			input {
				margin-right: rem(10);
				vertical-align: top;
			} // input
		} // .gfield_checkbox, .gfield_radio
	} // &.ginput_container_checkbox, &.ginput_container_radio

	// Address Field
	&.ginput_container_address {
		@include clearfix;

		// <span>
		.ginput_full {
			width: 100%;
		} // .ginput_full

		// <span>
		.ginput_left {
			float: left;
			width: 50%;
		}

		// <span>
		.ginput_right {
			float: right;
			width: 50%;
		} // .ginput_right

		// Set styles for all orientation classes
		@each $location in full, left, right {

			.ginput_#{$location} {
				display: block;
				margin-bottom: rem(10);

				label {
					display: block;
				} // label
			} // .ginput_#{$heading}
		} // end each
	} // &.ginput_container_address

	// Name Field
	&.ginput_container_name {

		// Inputs and Labels
		input,
		label {
			display: block;
		} // input, label
	} // &.ginput_container_name
} // .ginput_container


//-----------------------------------------
// List
//-----------------------------------------
.gfield_list_container {
	margin-bottom: 0;

	.gfield_list_group {

		// List inputs
		.gfield_list_cell {

			// Input field.
			input {
				width: 100%;
			} // input
		} // .gfield_list_cell

		// Icons
		.gfield_list_icons {
			line-height: 1;
			width: rem(100);
		} // .gfield_list_icons
	} // .gfield_list_group
} // .gfield_list_container


//-----------------------------------------
// Multi-field Container
//----------------------------------------
.clear-multi {

	// Set styles for all time fields
	@each $location in hour, minute, ampm {

		.gfield_time_#{$location} {
			display: inline;
		} // .gfield_time_#{$location}
	} // end each
} // .clear-multi