Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stylinf fields

Browse Source
This commit is contained in:
Antoine M 2024-05-23 16:21:30 +02:00
parent ff2dab5599
commit 37e35deca1
2 changed files with 181 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
resources/css/components/forms/field-classic-rating.css Normal file
View File

@ -0,0 +1,123 @@
.gfield--type-classic-rating {
legend.gfield_label {
@apply pb-6 !text-2xl text-center;
}
.gfield_radio {
@apply flex justify-between max-w-lg text-center mx-auto;
.gchoice {
@apply flex flex-col justify-center items-center;
label.gform-field-label {
@apply !ml-0 mt-3 !font-normal;
}
input.gfield-choice-input {
@apply rounded-none border-none;
@apply w-20 h-12 bg-no-repeat bg-center bg-contain cursor-pointer py-4 rounded-2xl bg-transparent box-content;
box-shadow: none;
filter: grayscale(100%) opacity(0.5);
transition: all 0.3s ease-in-out;
display: block;
background-image: url('../resources/img/graphic-assets/star.svg');
background-size: 70%;
&:after {
content: '';
@apply pointer-events-none flex justify-center items-center relative inset-1/2;
transform: translate(-50%, -50%);
@apply w-12 h-12;
}
&[value='1']:after {
content: '1';
}
&[value='2']:after {
content: '2';
}
&[value='3']:after {
content: '3';
}
&[value='4']:after {
content: '4';
}
&[value='5']:after {
content: '5';
}
&:checked,
&:focus-visible,
&:hover {
/* @apply ring ring-2 ring-secondary; */
transform: scale(1.15);
filter: grayscale(0%) opacity(1);
@apply !outline-secondary outline-1;
outline-opacity: 50% !important;
}
&:hover,
&:focus-visible {
@apply !outline-secondary outline-1;
outline-opacity: 50% !important;
}
}
&:has(input.gfield-choice-input:checked) {
label.gform-field-label {
@apply !text-secondary !font-bold;
}
}
}
}
.gfield_radio:has(
input.gfield-choice-input[value='5']:checked,
input.gfield-choice-input[value='5']:hover,
input.gfield-choice-input[value='5']:focus-visible
) {
input.gfield-choice-input[value='4'],
input.gfield-choice-input[value='3'],
input.gfield-choice-input[value='2'],
input.gfield-choice-input[value='1'] {
/* @apply !bg-green-400; */
filter: grayscale(0%) opacity(1);
}
}
.gfield_radio:has(
input.gfield-choice-input[value='4']:checked,
input.gfield-choice-input[value='4']:hover,
input.gfield-choice-input[value='4']:focus-visible
) {
input.gfield-choice-input[value='3'],
input.gfield-choice-input[value='2'],
input.gfield-choice-input[value='1'] {
/* @apply !bg-purple-400; */
filter: grayscale(0%) opacity(1);
}
}
.gfield_radio:has(
input.gfield-choice-input[value='3']:checked,
input.gfield-choice-input[value='3']:hover,
input.gfield-choice-input[value='3']:focus-visible
) {
input.gfield-choice-input[value='2'],
input.gfield-choice-input[value='1'] {
/* @apply !bg-yellow-400; */
filter: grayscale(0%) opacity(1);
}
}
.gfield_radio:has(
input.gfield-choice-input[value='2']:checked,
input.gfield-choice-input[value='2']:hover,
input.gfield-choice-input[value='2']:focus-visible
) {
input.gfield-choice-input[value='1'] {
/* @apply !bg-cyan-400; */
filter: grayscale(0%) opacity(1);
}
}
}
form:has(.gfield--type-satisfaction-rating):not(.metabox-location-side):not(
.metabox-location-normal
):not(.metabox-location-advanced):not(.search-module__search-form)
input[type='submit'] {
@apply !mx-auto !text-base;
}

58
resources/css/components/forms/field-homegrade-rating.css Normal file
View File

@ -0,0 +1,58 @@
.gfield--type-homegrade-rating {
legend.gfield_label {
@apply pb-6 !text-2xl text-center;
}
.gfield_radio {
@apply flex justify-between max-w-lg text-center mx-auto;
.gchoice {
@apply flex flex-col justify-center items-center;
label.gform-field-label {
@apply !ml-0 mt-3 !font-normal;
}
input.gfield-choice-input {
@apply rounded-none border-none;
@apply w-20 h-12 bg-no-repeat bg-center bg-contain cursor-pointer py-4 rounded-2xl bg-transparent box-content;
box-shadow: none;
filter: grayscale(100%) opacity(0.5);
transition: all 0.3s ease-in-out;
&[value='1'] {
content: url('../resources/img/pictogrammes/icon-satisfaction-pas-du-tout.svg');
}
&[value='2'] {
content: url('../resources/img/pictogrammes/icon-satisfaction-un-peu.svg');
}
&[value='3'] {
content: url('../resources/img/pictogrammes/icon-satisfaction-moyen.svg');
}
&[value='4'] {
content: url('../resources/img/pictogrammes/icon-satisfaction-beaucoup.svg');
}
&[value='5'] {
content: url('../resources/img/pictogrammes/icon-satisfaction-parfait.svg');
}
&:focus-visible,
&:hover,
&:checked {
transform: scale(1.15);
filter: grayscale(0%) opacity(1);
@apply !outline-secondary outline-1;
outline-opacity: 50% !important;
}
&:focus-visible {
}
}
&:has(input.gfield-choice-input:checked) {
label.gform-field-label {
@apply !text-secondary !font-bold;
}
}
}
}
}
#client-satisfaction {
input[type='submit'] {
@apply !mx-auto !text-base mt-6;
}
}