Initial commit
This commit is contained in:
Basiclean committed
commit
bcca176137
88 files changed
+8725
No files matched your search
@@ -0,0 +1,244 @@
|
||||
:root {
|
||||
/* Colors */
|
||||
--btn-bg-primary: #474747;
|
||||
--btn-bg-primary-hover: #3b3b3b;
|
||||
--btn-bg-primary-active: #353030;
|
||||
|
||||
--btn-text-light: #fefcfb;
|
||||
--btn-text-dark: #474747;
|
||||
|
||||
--btn-border-primary: #474747;
|
||||
--btn-border-ghost: #e9e9e9;
|
||||
--btn-border-ghost-hover: #ececec;
|
||||
--btn-border-ghost-active: #e1e1e1;
|
||||
|
||||
--btn-bg-ghost-hover: #ececec;
|
||||
--btn-bg-ghost-active: #e1e1e1;
|
||||
|
||||
/* Disabled */
|
||||
--btn-bg-disabled: #cccccc;
|
||||
--btn-text-disabled: #888888;
|
||||
--btn-border-disabled: #cccccc;
|
||||
|
||||
/* Focus */
|
||||
--btn-focus-ring: 3px solid #a9a9a9;
|
||||
--btn-focus-offset: 2px;
|
||||
|
||||
/* Layout */
|
||||
--btn-py: 12px;
|
||||
--btn-px: 16px;
|
||||
--btn-py-lg: 16px;
|
||||
--btn-px-lg: 24px;
|
||||
--btn-radius: 4px;
|
||||
--btn-gap: 8px;
|
||||
--btn-max-height: 52px;
|
||||
--btn-icon-size: 18px;
|
||||
--btn-tertiary-px: 4px;
|
||||
|
||||
/* Typography */
|
||||
--btn-font-family: inherit;
|
||||
--btn-font-size: 0.889rem;
|
||||
--btn-font-weight: 600;
|
||||
--btn-line-height: 1;
|
||||
|
||||
/* Shadow */
|
||||
--btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
--btn-shadow-none: none;
|
||||
|
||||
/* Motion */
|
||||
--btn-transition:
|
||||
background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease,
|
||||
transform 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--btn-gap);
|
||||
padding: var(--btn-py) var(--btn-px);
|
||||
max-height: var(--btn-max-height);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--btn-radius);
|
||||
font-family: var(--btn-font-family);
|
||||
font-size: var(--btn-font-size);
|
||||
font-weight: var(--btn-font-weight);
|
||||
line-height: var(--btn-line-height);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: var(--btn-transition);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
outline: var(--btn-focus-ring);
|
||||
outline-offset: var(--btn-focus-offset);
|
||||
}
|
||||
|
||||
.btn .btn-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
width: var(--btn-icon-size);
|
||||
height: var(--btn-icon-size);
|
||||
transition:
|
||||
transform 0.25s ease,
|
||||
color 0.25s ease;
|
||||
}
|
||||
|
||||
.btn:hover .btn-icon.animate {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Filled */
|
||||
.btn--filled {
|
||||
background-color: var(--btn-bg-primary);
|
||||
color: var(--btn-text-light);
|
||||
border-color: var(--btn-border-primary);
|
||||
box-shadow: var(--btn-shadow);
|
||||
}
|
||||
|
||||
.btn--filled .btn-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.btn--filled:hover {
|
||||
background-color: var(--btn-bg-primary-hover);
|
||||
border-color: var(--btn-bg-primary-hover);
|
||||
}
|
||||
|
||||
.btn--filled:active {
|
||||
background-color: var(--btn-bg-primary-active);
|
||||
border-color: var(--btn-bg-primary-active);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Outline */
|
||||
.btn--outline {
|
||||
background-color: transparent;
|
||||
color: var(--btn-text-dark);
|
||||
border-color: var(--btn-border-primary);
|
||||
box-shadow: var(--btn-shadow-none);
|
||||
}
|
||||
|
||||
.btn--outline .btn-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.btn--outline:hover {
|
||||
background-color: var(--btn-bg-primary);
|
||||
border-color: var(--btn-bg-primary);
|
||||
color: var(--btn-text-light);
|
||||
}
|
||||
|
||||
.btn--outline:active {
|
||||
background-color: var(--btn-bg-primary-active);
|
||||
border-color: var(--btn-bg-primary-active);
|
||||
color: var(--btn-text-light);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Ghost */
|
||||
.btn--ghost {
|
||||
background-color: transparent;
|
||||
color: var(--btn-text-dark);
|
||||
border-color: var(--btn-border-ghost);
|
||||
box-shadow: var(--btn-shadow-none);
|
||||
}
|
||||
|
||||
.btn--ghost .btn-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.btn--ghost:hover {
|
||||
background-color: var(--btn-bg-ghost-hover);
|
||||
border-color: var(--btn-border-ghost-hover);
|
||||
}
|
||||
|
||||
.btn--ghost:active {
|
||||
background-color: var(--btn-bg-ghost-active);
|
||||
border-color: var(--btn-border-ghost-active);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Tertiary */
|
||||
.btn--tertiary {
|
||||
background-color: transparent;
|
||||
color: var(--btn-text-dark);
|
||||
border-color: transparent;
|
||||
box-shadow: var(--btn-shadow-none);
|
||||
padding-inline: var(--btn-tertiary-px);
|
||||
}
|
||||
|
||||
.btn--tertiary .btn-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.btn--tertiary:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.btn--tertiary:active {
|
||||
opacity: 0.7;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Disabled */
|
||||
.btn:disabled,
|
||||
.btn[aria-disabled="true"] {
|
||||
background-color: var(--btn-bg-disabled) !important;
|
||||
border-color: var(--btn-border-disabled) !important;
|
||||
color: var(--btn-text-disabled) !important;
|
||||
box-shadow: none !important;
|
||||
text-decoration: none !important;
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.btn:disabled .btn-icon,
|
||||
.btn[aria-disabled="true"] .btn-icon {
|
||||
color: var(--btn-text-disabled) !important;
|
||||
}
|
||||
|
||||
/* Touch */
|
||||
@media (hover: none) {
|
||||
.btn--filled:hover {
|
||||
background-color: var(--btn-bg-primary);
|
||||
border-color: var(--btn-bg-primary);
|
||||
}
|
||||
|
||||
.btn--outline:hover {
|
||||
background-color: transparent;
|
||||
border-color: var(--btn-border-primary);
|
||||
color: var(--btn-text-dark);
|
||||
}
|
||||
|
||||
.btn--ghost:hover {
|
||||
background-color: transparent;
|
||||
border-color: var(--btn-border-ghost);
|
||||
}
|
||||
|
||||
.btn--tertiary:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:hover .btn-icon.animate {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.btn {
|
||||
padding: var(--btn-py-lg) var(--btn-px-lg);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
:root {
|
||||
/* Layout */
|
||||
--container-width: 1280px;
|
||||
--content-width: 72rem;
|
||||
--padding-inline: clamp(16px, 4vw, 24px);
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-7: 32px;
|
||||
|
||||
/* Colors */
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-alt: #f9f9f9;
|
||||
--color-background: #ffffff;
|
||||
--color-background-alt: #f9f9f9;
|
||||
--color-text: #171717;
|
||||
--color-text-muted: #5f5f5f;
|
||||
--color-text-soft: #7a7a7a;
|
||||
--color-heading: #171717;
|
||||
|
||||
/* Radius */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
:root {
|
||||
/* Font sizes */
|
||||
--font-size-body: 1rem;
|
||||
--font-size-small: 0.875rem;
|
||||
--font-size-lead: 1.125rem;
|
||||
--font-size-h1: clamp(
|
||||
2.566rem,
|
||||
calc(
|
||||
2.566rem + (3.247rem - 2.566rem) * ((100vw - 768px) / (1024px - 768px))
|
||||
),
|
||||
3.247rem
|
||||
);
|
||||
--font-size-h2: clamp(
|
||||
2.027rem,
|
||||
calc(
|
||||
2.027rem + (2.566rem - 2.027rem) * ((100vw - 768px) / (1024px - 768px))
|
||||
),
|
||||
2.566rem
|
||||
);
|
||||
|
||||
--font-size-h3: clamp(
|
||||
1.602rem,
|
||||
calc(
|
||||
1.602rem + (2.027rem - 1.602rem) * ((100vw - 768px) / (1024px - 768px))
|
||||
),
|
||||
2.027rem
|
||||
);
|
||||
|
||||
--font-size-h4: clamp(
|
||||
1.266rem,
|
||||
calc(
|
||||
1.266rem + (1.602rem - 1.266rem) * ((100vw - 768px) / (1024px - 768px))
|
||||
),
|
||||
1.602rem
|
||||
);
|
||||
|
||||
--line-height-body: 1.5;
|
||||
--line-height-heading: 1.2;
|
||||
|
||||
--letter-spacing-tight: -0.02em;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-wide: 0.025em;
|
||||
--letter-spacing-wider: 0.05em;
|
||||
--letter-spacing-widest: 0.12em;
|
||||
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--font-body-color: #000000;
|
||||
--font-heading-color: #302e2e;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p,
|
||||
li {
|
||||
font-size: var(--font-size-body);
|
||||
line-height: var(--line-height-body);
|
||||
}
|
||||
|
||||
small,
|
||||
.text-small {
|
||||
font-size: var(--font-size-small);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.text-lead {
|
||||
font-size: var(--font-size-lead);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: var(--line-height-heading);
|
||||
color: var(--font-heading-color);
|
||||
font-family: var(--font-heading);
|
||||
font-weight: var(--font-weight-bold);
|
||||
letter-spacing: var(--letter-spacing-tight);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-size-h1);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--font-size-h2);
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--font-size-h4);
|
||||
}
|
||||
Reference in new issue
Block a user