Initial commit
This commit is contained in:
Basiclean committed
commit
bcca176137
88 files changed
+8725
No files matched your search
@@ -0,0 +1,235 @@
|
||||
:root {
|
||||
/* Typography */
|
||||
--form-font-size: inherit;
|
||||
--form-font-family: inherit;
|
||||
--form-label-size: 0.875rem;
|
||||
--form-helper-size: 0.8rem;
|
||||
|
||||
/* Colors */
|
||||
--form-text: #171717;
|
||||
--form-placeholder: #9ca3af;
|
||||
--form-label: #374151;
|
||||
--form-border: #d1d5db;
|
||||
--form-border-hover: #bfc5cf;
|
||||
--form-border-focus: #474747;
|
||||
--form-border-error: #ef4444;
|
||||
--form-bg: #ffffff;
|
||||
--form-bg-disabled: #f3f4f6;
|
||||
--form-text-disabled: #9ca3af;
|
||||
--form-error: #ef4444;
|
||||
--form-success: #22c55e;
|
||||
--form-check-accent: #474747;
|
||||
|
||||
/* Layout */
|
||||
--form-radius: 8px;
|
||||
--form-padding-y: 10px;
|
||||
--form-padding-x: 14px;
|
||||
--form-gap: 6px;
|
||||
--form-field-gap: 1.25rem;
|
||||
--form-control-gap: 10px;
|
||||
--form-min-height: 44px;
|
||||
|
||||
/* Motion */
|
||||
--form-transition:
|
||||
border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
|
||||
/* Focus */
|
||||
--form-focus-shadow: 0 0 0 3px rgba(71, 71, 71, 0.15);
|
||||
--form-error-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
/* Group */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--form-gap);
|
||||
margin-bottom: var(--form-field-gap);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
label,
|
||||
.form-label {
|
||||
font-size: var(--form-label-size);
|
||||
font-weight: 600;
|
||||
color: var(--form-label);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-label--required::after {
|
||||
content: " *";
|
||||
color: var(--form-error);
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="url"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
display: block;
|
||||
font-family: var(--form-font-family);
|
||||
font-size: var(--form-font-size);
|
||||
color: var(--form-text);
|
||||
background-color: var(--form-bg);
|
||||
border: 1.5px solid var(--form-border);
|
||||
border-radius: var(--form-radius);
|
||||
padding: var(--form-padding-y) var(--form-padding-x);
|
||||
min-height: var(--form-min-height);
|
||||
transition: var(--form-transition);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--form-placeholder);
|
||||
}
|
||||
|
||||
input:hover,
|
||||
textarea:hover,
|
||||
select:hover {
|
||||
border-color: var(--form-border-hover);
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
input:focus-visible,
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
border-color: var(--form-border-focus);
|
||||
box-shadow: var(--form-focus-shadow);
|
||||
}
|
||||
|
||||
/* Error */
|
||||
input.is-error,
|
||||
textarea.is-error,
|
||||
select.is-error {
|
||||
border-color: var(--form-border-error);
|
||||
}
|
||||
|
||||
input.is-error:focus-visible,
|
||||
textarea.is-error:focus-visible,
|
||||
select.is-error:focus-visible {
|
||||
box-shadow: var(--form-error-shadow);
|
||||
}
|
||||
|
||||
.form-error-msg {
|
||||
font-size: var(--form-helper-size);
|
||||
color: var(--form-error);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Helper / Success */
|
||||
.form-help {
|
||||
font-size: var(--form-helper-size);
|
||||
color: var(--form-label);
|
||||
}
|
||||
|
||||
.form-success-msg {
|
||||
font-size: var(--form-helper-size);
|
||||
color: var(--form-success);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
input:disabled,
|
||||
textarea:disabled,
|
||||
select:disabled {
|
||||
background-color: var(--form-bg-disabled);
|
||||
color: var(--form-text-disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Select */
|
||||
select {
|
||||
cursor: pointer;
|
||||
padding-right: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 14px center;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23474747' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* Checkbox / Radio */
|
||||
.form-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--form-control-gap);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"],
|
||||
.form-check input[type="radio"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
border: 1.5px solid var(--form-border);
|
||||
background-color: var(--form-bg);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: var(--form-transition);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"] {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.form-check input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"]:checked,
|
||||
.form-check input[type="radio"]:checked {
|
||||
background-color: var(--form-check-accent);
|
||||
border-color: var(--form-check-accent);
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"]:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.form-check input[type="radio"]:checked {
|
||||
box-shadow: inset 0 0 0 4px white;
|
||||
}
|
||||
|
||||
.form-check input:focus-visible {
|
||||
box-shadow: var(--form-focus-shadow);
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--form-text);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Touch */
|
||||
@media (hover: none) {
|
||||
input:hover,
|
||||
textarea:hover,
|
||||
select:hover {
|
||||
border-color: var(--form-border);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user