@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
173 lines (133 loc) • 4.74 kB
CSS
.gform-admin {
.gform-input--checkbox {
border: 0 none;
clip: rect(0, 0, 0, 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
+ label {
outline: none;
}
&:disabled + label::before {
opacity: 0.6;
}
&:not(.field-choice-type) {
/* container for styled checkbox + label */
+ label {
/* styled checkbox */
&::before {
background: center no-repeat var(--gform-admin-color-white);
block-size: 1.375rem;
border: 1px solid var(--gform-admin-color-amethyst-smoke);
border-radius: 3px;
content: "";
display: inline-block;
inline-size: 1.375rem;
margin-inline-end: 0.375rem;
transition: var(--gform-admin-transition-inputs);
vertical-align: middle;
}
&::selection {
background: transparent;
}
}
}
&:hover,
&:focus {
+ label {
&::before {
border: 1px solid var(--gform-admin-color-primary-light);
box-shadow: var(--gform-admin-box-shadow-focus);
}
}
}
&:checked:not(.field-choice-type--checkbox) {
+ label {
&::before {
background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683418 12.0976 1.31658 11.7071 1.70711L4 9.41421L0.292893 5.70711C-0.0976311 5.31658 -0.0976311 4.68342 0.292893 4.29289C0.683418 3.90237 1.31658 3.90237 1.70711 4.29289L4 6.58579Z' fill='%233E7DA6'/%3E%3C/svg%3E"); /* stylelint-disable-line */
border-color: var(--gform-admin-color-gravity-blue);
}
}
}
}
/* Cosmos Theme */
.gform-input-wrapper--theme-cosmos.gform-input-wrapper--checkbox {
&,
*,
*::before,
*::after {
box-sizing: border-box;
}
}
.gform-input-wrapper--theme-cosmos .gform-input--checkbox {
+ .gform-label {
align-items: flex-start;
display: flex;
&::before {
border: 0.0625rem solid var(--gform-admin-color-santas);
box-shadow: var(--gform-admin-box-shadow-micro);
flex: none;
}
}
&:hover + .gform-label::before {
background-color: var(--gform-admin-color-light-blue);
}
&:focus + .gform-label::before {
background-color: var(--gform-admin-color-light-blue);
border-color: var(--gform-admin-color-blue-ribbon);
box-shadow: var(--gform-admin-box-shadow-focus-state);
}
&:checked + .gform-label::before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuMTMzIDYuOTQ3IDUuODc0LTUuODc0YS45MzMuOTMzIDAgMCAxIDEuMzIgMS4zMmwtNi44NCA2Ljg0YS41LjUgMCAwIDEtLjcwNyAwTC42NzMgNi4xMjZhLjkzMy45MzMgMCAxIDEgMS4zMi0xLjMybDIuMTQgMi4xNFoiIGZpbGw9IiMwRjNENkMiLz48L3N2Zz4="); /* stylelint-disable-line */
}
&:indeterminate + .gform-label::before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjUgMUg4LjUiIHN0cm9rZT0iIzBGM0Q2QyIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="); /* stylelint-disable-line */
}
&:disabled {
+ .gform-label {
color: var(--gform-admin-color-snuff);
&::before {
background-color: var(--gform-admin-color-light-blue);
border-color: var(--gform-admin-color-white-lilac);
box-shadow: none;
opacity: 1;
}
}
&:checked + .gform-label::before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjMzMyAxIDUgOC4zMzMgMS42NjcgNSIgc3Ryb2tlPSIjRUNFREY4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=="); /* stylelint-disable-line */
}
~ .gform-input-help-text {
color: var(--gform-admin-color-snuff);
}
}
&.gform-input--size-sm {
+ .gform-label::before {
block-size: 1.125rem;
inline-size: 1.125rem;
margin-inline-end: var(--gform-admin-spacer-2);
}
&:checked + .gform-label::before {
background-size: 10px 8px; /* stylelint-disable-line */
}
~ .gform-input-help-text {
margin-inline-start: 1.625rem;
}
}
&.gform-input--size-md {
+ .gform-label::before {
block-size: 1.375rem;
inline-size: 1.375rem;
margin-block-start: -0.0625rem;
margin-inline-end: var(--gform-admin-spacer-3);
}
~ .gform-input-help-text {
margin-inline-start: 2.125rem;
}
}
}
}