scss 用于Gravity Forms的CSS3切换开关

Posted 2021-05-17

// Gravity Forms checkbox toggle
// @use .pt-toggle

$pt-toggle-height:  32px;
$pt-toggle-border:  4px;
$pt-toggle-radius:  60px;

$pt-color-grey:     #ddd;
$pt-color-white:    #fff;
$pt-color-primary:  #5cb85c;

.gform_wrapper {
	.pt-toggle .gfield_checkbox {
		input[type=checkbox] {
			margin-left: -9999px;
			position: absolute;
			visibility: hidden;

			+ label {
				background-color: $pt-color-grey;
				border-radius: $pt-toggle-radius;
				cursor: pointer;
				display: block;
				padding: $pt-toggle-border;
				outline: none;
				position: relative;
				transition: background .4s;
				user-select: none;
				width: $pt-toggle-height * 2;
				height: $pt-toggle-height;

				&::before,
				&::after {
					content: '';
					display: block;
					position: absolute;
				}

				&::before {
					background-color: $pt-color-grey;
					border-radius: $pt-toggle-radius;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					transition: background .4s;
				}

				&::after {
					@include fa-icon;
					background-color: $pt-color-white;
					border-radius: $pt-toggle-radius;
					content: $fa-var-check;
					color: $pt-color-white;
					line-height: $pt-toggle-height - ($pt-toggle-border * 2);
					top: $pt-toggle-border;
					bottom: $pt-toggle-border;
					left: $pt-toggle-border;
					width: $pt-toggle-height - ($pt-toggle-border * 2);
					text-align: center;
					transition: margin .4s, background .4s;
				}
			}

			&:checked {
				+ label {
					background-color: $pt-color-primary;

					&::before {
						background-color: $pt-color-primary;
					}

					&::after {
						background-color: $pt-color-white;
						color: $pt-color-primary;
						margin-left: $pt-toggle-height;
					}
				}
			}
		}
	}
}