126 lines
2.3 KiB
CSS
126 lines
2.3 KiB
CSS
/**
|
|
* 表单组件样式
|
|
*/
|
|
|
|
@layer components {
|
|
/* 表单组 */
|
|
.form-group {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.form-group:last-child {
|
|
@apply mb-0;
|
|
}
|
|
|
|
/* 表单标签 */
|
|
.form-label {
|
|
@apply block text-sm font-medium text-gray-700 mb-1;
|
|
}
|
|
|
|
.form-label.required::after {
|
|
content: "*";
|
|
@apply text-[#f5222d] ml-1;
|
|
}
|
|
|
|
/* 表单控件 */
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
@apply block w-full rounded-md border-gray-300 shadow-sm py-2 px-3 text-sm
|
|
focus:border-[#00684a] focus:ring focus:ring-[#00684a] focus:ring-opacity-20
|
|
disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.form-select {
|
|
@apply pr-10 border-gray-300 border-[1px];
|
|
}
|
|
|
|
.form-textarea {
|
|
@apply min-h-[100px];
|
|
}
|
|
|
|
/* 表单控件尺寸 */
|
|
.form-input-sm,
|
|
.form-select-sm,
|
|
.form-textarea-sm {
|
|
@apply py-1.5 px-2.5 text-xs;
|
|
}
|
|
|
|
.form-input-lg,
|
|
.form-select-lg,
|
|
.form-textarea-lg {
|
|
@apply py-2.5 px-3.5 text-base;
|
|
}
|
|
|
|
/* 表单验证状态 */
|
|
.form-input.error,
|
|
.form-select.error,
|
|
.form-textarea.error {
|
|
@apply border-[#f5222d] focus:border-[#f5222d] focus:ring-[#f5222d];
|
|
}
|
|
|
|
.form-input.success,
|
|
.form-select.success,
|
|
.form-textarea.success {
|
|
@apply border-[#52c41a] focus:border-[#52c41a] focus:ring-[#52c41a];
|
|
}
|
|
|
|
/* 表单帮助文本 */
|
|
.form-help {
|
|
@apply mt-1 text-sm text-gray-500;
|
|
}
|
|
|
|
.form-error {
|
|
@apply mt-1 text-sm text-[#f5222d];
|
|
}
|
|
|
|
/* 表单复选框和单选框 */
|
|
|
|
.form-check {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
.form-checkbox,
|
|
.form-radio {
|
|
@apply h-4 w-4 text-[#00684a] border-gray-300 focus:ring-[#00684a] focus:ring-opacity-20 rounded;
|
|
}
|
|
|
|
.form-radio {
|
|
@apply rounded-full;
|
|
}
|
|
|
|
.form-check-label {
|
|
@apply ml-2 block text-sm text-gray-700;
|
|
}
|
|
|
|
/* 行内表单 */
|
|
.form-inline {
|
|
@apply flex flex-wrap items-end space-x-2;
|
|
}
|
|
|
|
/* 水平表单 */
|
|
.form-horizontal .form-group {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
.form-horizontal .form-label {
|
|
@apply w-1/3 mb-0;
|
|
}
|
|
|
|
.form-horizontal .form-control-container {
|
|
@apply w-2/3;
|
|
}
|
|
|
|
/* 搜索框 */
|
|
.search-box {
|
|
@apply relative flex;
|
|
}
|
|
|
|
.search-box input {
|
|
@apply pr-10;
|
|
}
|
|
|
|
.search-box button {
|
|
@apply absolute inset-y-0 right-0 flex items-center px-2;
|
|
}
|
|
} |