style(ui): restyle buttons, tabs, and form inputs
- Change btn-adjust to grey border with orange text and subtle hover - Add font-family/font-size to .input-field for consistency - Redesign desktop tabs: bordered, orange text, equal width, accent border on active instead of filled background - Redesign mobile tab selector: bordered dropdown with orange text, rounded container, subtle active background
This commit is contained in:
parent
6829239bfc
commit
dd3714f0a1
2 changed files with 15 additions and 14 deletions
|
|
@ -107,6 +107,8 @@ a {
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
background-color: var(--surface);
|
background-color: var(--surface);
|
||||||
padding: 0.6rem 0.75rem;
|
padding: 0.6rem 0.75rem;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.875rem;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
transition: border-color 150ms ease, box-shadow 150ms ease;
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
||||||
}
|
}
|
||||||
|
|
@ -134,7 +136,7 @@ input.input-field[type="number"] {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
border: 1px solid var(--accent);
|
border: 1px solid var(--border);
|
||||||
background-color: var(--surface);
|
background-color: var(--surface);
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
@ -142,8 +144,8 @@ input.input-field[type="number"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-adjust:hover {
|
.btn-adjust:hover {
|
||||||
background-color: var(--accent);
|
background-color: var(--surface-alt);
|
||||||
color: var(--accent-text);
|
color: var(--accent-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Sticky Submit ────────────────────────────────────────────── */
|
/* ── Sticky Submit ────────────────────────────────────────────── */
|
||||||
|
|
@ -316,15 +318,17 @@ input.input-field[type="number"] {
|
||||||
.tab {
|
.tab {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 1;
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
padding: 0.375rem 0.875rem;
|
padding: 0.375rem 0.875rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: 1px solid var(--border);
|
||||||
background: none;
|
background: none;
|
||||||
transition: background-color 150ms ease, color 150ms ease;
|
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
|
||||||
color: var(--text);
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab:not(.tab-active):hover {
|
.tab:not(.tab-active):hover {
|
||||||
|
|
@ -332,8 +336,7 @@ input.input-field[type="number"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-active {
|
.tab-active {
|
||||||
background-color: var(--accent);
|
border-color: var(--accent);
|
||||||
color: var(--accent-text);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-mobile {
|
.tab-mobile {
|
||||||
|
|
@ -345,6 +348,7 @@ input.input-field[type="number"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
|
color: var(--accent);
|
||||||
transition: background-color 150ms ease, color 150ms ease;
|
transition: background-color 150ms ease, color 150ms ease;
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
|
|
@ -355,8 +359,6 @@ input.input-field[type="number"] {
|
||||||
|
|
||||||
.tab-mobile-active {
|
.tab-mobile-active {
|
||||||
background-color: var(--accent-subtle);
|
background-color: var(--accent-subtle);
|
||||||
color: var(--text);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Timeline layout ───────────────────────────────────────────── */
|
/* ── Timeline layout ───────────────────────────────────────────── */
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
<div data-signals:{{ tab_signal }}="'{{ active_type }}'" data-signals:_tabs-open="false">
|
<div data-signals:{{ tab_signal }}="'{{ active_type }}'" data-signals:_tabs-open="false">
|
||||||
<!-- Desktop tabs -->
|
<!-- Desktop tabs -->
|
||||||
<nav class="hidden md:flex flex-wrap gap-1.5 p-2" role="tablist">
|
<nav class="hidden md:flex gap-1.5" role="tablist">
|
||||||
{% for tab in tabs %}
|
{% for tab in tabs %}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -17,8 +17,7 @@
|
||||||
<div class="md:hidden">
|
<div class="md:hidden">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="flex w-full items-center justify-between p-3 text-sm font-medium"
|
class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm text-accent"
|
||||||
style="color: var(--text)"
|
|
||||||
data-on:click="$_tabsOpen = !$_tabsOpen"
|
data-on:click="$_tabsOpen = !$_tabsOpen"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
|
|
@ -29,7 +28,7 @@
|
||||||
<span data-show="!$_tabsOpen">{{ icons::chevron_down("h-5 w-5") }}</span>
|
<span data-show="!$_tabsOpen">{{ icons::chevron_down("h-5 w-5") }}</span>
|
||||||
<span data-show="$_tabsOpen" style="display:none">{{ icons::chevron_up("h-5 w-5") }}</span>
|
<span data-show="$_tabsOpen" style="display:none">{{ icons::chevron_up("h-5 w-5") }}</span>
|
||||||
</button>
|
</button>
|
||||||
<div class="flex flex-col border-t" data-show="$_tabsOpen" style="display:none">
|
<div class="mt-1 flex flex-col rounded-md border overflow-hidden" data-show="$_tabsOpen" style="display:none">
|
||||||
{% for tab in tabs %}
|
{% for tab in tabs %}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue