101 lines
2.7 KiB
CSS
101 lines
2.7 KiB
CSS
@layer components {
|
|
.bw-textarea,
|
|
.bw-input {
|
|
@apply
|
|
!outline-none
|
|
!ring-0
|
|
border-2
|
|
w-full text-slate-600 dark:text-dark-300 border-slate-300/50 hover:border-slate-300 dark:border-dark-600 dark:hover:border-dark-500/50 dark:bg-transparent
|
|
focus:outline-none
|
|
focus:border-2
|
|
focus:border-primary-500 dark:focus:border-dark-500 dark:placeholder-dark-400/60 transition-all
|
|
rounded-md
|
|
text-sm
|
|
px-3.5 py-[8.5px]
|
|
}
|
|
|
|
.bw-input[disabled], .bw-input[readonly], fieldset[disabled] .bw-input {
|
|
@apply !bg-gray-100/60 dark:!bg-white/10 dark:!opacity-40 !text-slate-400/70 dark:!text-dark-400 cursor-not-allowed dark:!border-dark-500/70
|
|
}
|
|
|
|
.bw-input.small {
|
|
@apply py-2
|
|
}
|
|
|
|
.bw-input.medium {
|
|
@apply py-[12px]
|
|
}
|
|
|
|
.bw-input.big {
|
|
@apply py-5
|
|
}
|
|
|
|
input.no-label, .bw-input.no-label, .bw-textarea.bw-input.no-label {
|
|
@apply placeholder-transparent
|
|
}
|
|
|
|
.form-label {
|
|
@apply
|
|
absolute
|
|
cursor-text
|
|
left-3.5
|
|
rtl:!right-3.5
|
|
rtl:left-[unset]
|
|
!inline-block
|
|
-top-2
|
|
text-xs
|
|
px-1
|
|
transition-all
|
|
peer-placeholder-shown:top-[11.8px]
|
|
peer-focus:-top-2 bg-white text-primary-900/40 dark:text-dark-400/60 z-20 dark:bg-dark-700 dark:px-2 dark:rounded-md dark:py-0.5
|
|
/*dark-800*/
|
|
}
|
|
|
|
.form-label.small {
|
|
@apply
|
|
peer-placeholder-shown:!top-[11px] peer-focus:!-top-2
|
|
}
|
|
|
|
.form-label.medium {
|
|
@apply
|
|
peer-placeholder-shown:!top-[15px] peer-focus:!-top-2
|
|
}
|
|
|
|
.form-label.big {
|
|
@apply
|
|
peer-placeholder-shown:!top-[23px] peer-focus:!-top-2
|
|
}
|
|
|
|
.bw-select div.clickable.disabled, .bw-select div.clickable.readonly, fieldset[disabled] .bw-select {
|
|
@apply !bg-gray-100/60 opacity-95 dark:opacity-70 dark:!bg-white/5 select-none cursor-not-allowed
|
|
}
|
|
|
|
.bw-select div.clickable.enabled {
|
|
@apply focus:border-blue-400 dark:focus:border-dark-500 cursor-pointer
|
|
}
|
|
|
|
.prefix svg, .suffix svg {
|
|
@apply ltr:!mr-1 rtl:!ml-1 w-6 h-6 dark:text-dark-500
|
|
}
|
|
|
|
.ql-toolbar.ql-snow {
|
|
@apply !rounded-t-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
|
|
}
|
|
|
|
.ql-toolbar.ql-snow .ql-stroke, .ql-stroke.ql-thin {
|
|
@apply dark:!text-dark-500 dark:!stroke-dark-500
|
|
}
|
|
|
|
.ql-snow.ql-toolbar button:hover .ql-stroke {
|
|
@apply !stroke-primary-500
|
|
}
|
|
|
|
.ql-container.ql-snow {
|
|
@apply !rounded-b-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
|
|
}
|
|
|
|
.ql-editor.ql-blank::before {
|
|
@apply !text-slate-300 dark:!text-dark-400/60 !not-italic
|
|
}
|
|
|
|
} |