관리-도구
편집 파일: form.css
/************************************************* INDEXING ************************************************** 01: GLOBAL 02: RADIO 03: CHECKBOX 04: RATING INPUT 05: 06: */ /************************************************* 01: GLOBAL **************************************************/ .form-label { @apply leading-none text-sm text-heading dark:text-white font-medium mb-2.5 inline-block; } .floating-form-label { @apply text-gray-500 m-0 bg-white px-2 absolute top-0 -translate-y-1/2 left-2 rtl:left-auto rtl:right-2 scale-90 peer-placeholder-shown:scale-100 peer-placeholder-shown:text-heading dark:text-white peer-focus:text-gray-500 peer-placeholder-shown:top-[21px] peer-focus:top-0 peer-focus:scale-90 z-10 duration-200 !important; } .floating-form-label.bg-three { @apply !bg-[#FEFBF0]; } .form-input { @apply relative text-sm text-heading dark:text-white font-semibold leading-none h-11 px-4 py-2.5 bg-transparent border border-border rounded-lg focus:border-primary block w-full outline-none custom-transition; } /************************************************* 02: RADIO **************************************************/ .radio { @apply appearance-none cursor-pointer flex-center shrink-0 size-4 rounded-50 border-2 border-heading/80 relative before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-2 before:rounded-50; } .radio { @apply [&.radio-primary]:checked:border-heading/80 [&.radio-primary]:checked:before:bg-heading/80; } /************************************************* 03: CHECKBOX **************************************************/ .checkbox { @apply appearance-none cursor-pointer flex-center shrink-0 size-4 border-2 border-heading/80 relative before:absolute before:font-remix before:content-['\eb7b'] before:leading-none before:text-[10px] before:text-transparent before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-2; } .checkbox { @apply [&.checkbox-primary]:checked:bg-heading/80 [&.checkbox-primary]:checked:border-heading/80 [&.checkbox-primary]:checked:before:text-white; } /************************************************* 04: RATING INPUT **************************************************/ .rating-input { @apply -ms-4 size-5 bg-transparent border-0 text-transparent cursor-pointer disabled:cursor-default disabled:!border-0 appearance-none checked:!bg-none focus:bg-none focus:ring-0 focus:ring-offset-0; } .rating-label { @apply text-[#E6E6E6] pointer-events-none before:font-remix before:content-['\f186'] text-xl duration-200; }