Skip to content

Commit 3b15298

Browse files
adrianthedevadrianthedev
authored
Merge branch '4-dev' into avo-976-adjust-text-input-design
2 parents 0c49c83 + e8ad1ba commit 3b15298

File tree

87 files changed

+1454
-409
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+1454
-409
lines changed

‎app/assets/stylesheets/application.css‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@
4545

4646
--breakpoint-xs: 30rem;
4747

48+
--container-8xl: 96rem;
49+
4850
/* Tiny text size originally added for discreet information */
4951
--text-tiny: 0.625rem;
5052
}
@@ -88,9 +90,10 @@
8890
@import "./css/search.css";
8991
@import "./css/active-storage.css";
9092
@import "./css/scrollbar.css";
91-
@import "./css/sidebar.css";
93+
@import "./css/layout.css";
9294
@import "./css/spinner.css";
9395
@import "./css/table.css";
96+
@import "./css/resource-controls.css";
9497

9598
@import "./css/fields/status.css";
9699
@import "./css/fields/code.css";
@@ -106,7 +109,9 @@
106109
@import "./css/components/ui/panel.css";
107110
@import "./css/components/ui/panel_header.css";
108111
@import "./css/components/ui/description_list.css";
112+
@import "./css/components/ui/tabs.css";
109113
@import "./css/components/ui/badge.css";
114+
@import "./css/components/ui/dropdown.css";
110115
@import "./css/components/ui/checkbox.css";
111116
@import "./css/components/ui/radio_button.css";
112117
@import "./css/components/ui/input.css";
@@ -199,18 +204,6 @@
199204
@apply ms-0 col-start-2;
200205
}
201206
}
202-
203-
.container-large {
204-
@apply 2xl:container 2xl:mx-auto;
205-
}
206-
207-
.container-small {
208-
@apply 2xl:px-0 2xl:max-w-196 2xl:mx-auto;
209-
}
210-
211-
.container-full-width {
212-
@apply w-full;
213-
}
214207
}
215208

216209
.loading-spinner {

‎app/assets/stylesheets/css/components/color_scheme_switcher.css‎

Lines changed: 37 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -127,66 +127,42 @@
127127
}
128128

129129
/* Show accent badge based on body accent class */
130-
.accent-orange .color-scheme-switcher__accent-badge {
131-
@apply inline-block;
132-
}
133-
134-
.accent-orange .color-scheme-switcher__accent-badge-preview--orange {
135-
@apply inline-block;
136-
}
137-
138-
.accent-yellow .color-scheme-switcher__accent-badge {
139-
@apply inline-block;
140-
}
141-
142-
.accent-yellow .color-scheme-switcher__accent-badge-preview--yellow {
143-
@apply inline-block;
144-
}
145-
146-
.accent-green .color-scheme-switcher__accent-badge {
147-
@apply inline-block;
148-
}
149-
150-
.accent-green .color-scheme-switcher__accent-badge-preview--green {
151-
@apply inline-block;
152-
}
153-
154-
.accent-blue .color-scheme-switcher__accent-badge {
155-
@apply inline-block;
156-
}
157-
158-
.accent-blue .color-scheme-switcher__accent-badge-preview--blue {
159-
@apply inline-block;
160-
}
161-
162-
.accent-purple .color-scheme-switcher__accent-badge {
163-
@apply inline-block;
164-
}
165-
166-
.accent-purple .color-scheme-switcher__accent-badge-preview--purple {
167-
@apply inline-block;
168-
}
169-
170-
.accent-pink .color-scheme-switcher__accent-badge {
171-
@apply inline-block;
172-
}
173-
174-
.accent-pink .color-scheme-switcher__accent-badge-preview--pink {
175-
@apply inline-block;
176-
}
177-
178-
.accent-red .color-scheme-switcher__accent-badge {
179-
@apply inline-block;
180-
}
181-
182-
.accent-red .color-scheme-switcher__accent-badge-preview--red {
183-
@apply inline-block;
184-
}
185-
186-
.accent-teal .color-scheme-switcher__accent-badge {
187-
@apply inline-block;
188-
}
189-
190-
.accent-teal .color-scheme-switcher__accent-badge-preview--teal {
130+
.accent-red .color-scheme-switcher__accent-badge,
131+
.accent-orange .color-scheme-switcher__accent-badge,
132+
.accent-amber .color-scheme-switcher__accent-badge,
133+
.accent-yellow .color-scheme-switcher__accent-badge,
134+
.accent-lime .color-scheme-switcher__accent-badge,
135+
.accent-green .color-scheme-switcher__accent-badge,
136+
.accent-emerald .color-scheme-switcher__accent-badge,
137+
.accent-teal .color-scheme-switcher__accent-badge,
138+
.accent-cyan .color-scheme-switcher__accent-badge,
139+
.accent-sky .color-scheme-switcher__accent-badge,
140+
.accent-blue .color-scheme-switcher__accent-badge,
141+
.accent-indigo .color-scheme-switcher__accent-badge,
142+
.accent-violet .color-scheme-switcher__accent-badge,
143+
.accent-purple .color-scheme-switcher__accent-badge,
144+
.accent-fuchsia .color-scheme-switcher__accent-badge,
145+
.accent-pink .color-scheme-switcher__accent-badge,
146+
.accent-rose .color-scheme-switcher__accent-badge {
147+
@apply inline-block;
148+
}
149+
150+
.accent-red .color-scheme-switcher__accent-badge-preview--red,
151+
.accent-orange .color-scheme-switcher__accent-badge-preview--orange,
152+
.accent-amber .color-scheme-switcher__accent-badge-preview--amber,
153+
.accent-yellow .color-scheme-switcher__accent-badge-preview--yellow,
154+
.accent-lime .color-scheme-switcher__accent-badge-preview--lime,
155+
.accent-green .color-scheme-switcher__accent-badge-preview--green,
156+
.accent-emerald .color-scheme-switcher__accent-badge-preview--emerald,
157+
.accent-teal .color-scheme-switcher__accent-badge-preview--teal,
158+
.accent-cyan .color-scheme-switcher__accent-badge-preview--cyan,
159+
.accent-sky .color-scheme-switcher__accent-badge-preview--sky,
160+
.accent-blue .color-scheme-switcher__accent-badge-preview--blue,
161+
.accent-indigo .color-scheme-switcher__accent-badge-preview--indigo,
162+
.accent-violet .color-scheme-switcher__accent-badge-preview--violet,
163+
.accent-purple .color-scheme-switcher__accent-badge-preview--purple,
164+
.accent-fuchsia .color-scheme-switcher__accent-badge-preview--fuchsia,
165+
.accent-pink .color-scheme-switcher__accent-badge-preview--pink,
166+
.accent-rose .color-scheme-switcher__accent-badge-preview--rose {
191167
@apply inline-block;
192168
}

‎app/assets/stylesheets/css/components/field-wrapper.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,14 @@
6464
.field-wrapper__content {
6565
@apply pt-0 px-4 w-full;
6666
}
67+
68+
.field-wrapper__content-wrapper {
69+
@apply w-full;
70+
}
71+
}
72+
73+
.container-small {
74+
.field-wrapper__content-wrapper {
75+
@apply w-full;
76+
}
6777
}

‎app/assets/stylesheets/css/components/ui/dropdown.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.dropdown {
2+
@apply relative inline-flex;
3+
}
4+
5+
6+
/* Closed state - hidden by default */
7+
.dropdown-popover {
8+
@apply absolute z-10 rounded-lg bg-primary top-full end-0 bottom-auto start-auto;
9+
box-shadow: var(--box-shadow-card);
10+
}
11+
12+
/* Backdrop - transparent for dropdown (no overlay) */
13+
.dropdown-popover::backdrop {
14+
background-color: transparent;
15+
}
16+
17+
/* Backdrop remains transparent when open */
18+
.dropdown-popover:open::backdrop {
19+
background-color: transparent;
20+
}
21+
22+
.dropdown-menu {
23+
@apply flex flex-col w-full rounded-lg border border-tertiary bg-primary overflow-hidden;
24+
}
25+
26+
/* ==========================================================================
27+
List & Items
28+
========================================================================== */
29+
30+
.dropdown-menu__group {
31+
@apply flex flex-col items-start self-stretch py-1;
32+
}
33+
.dropdown-menu__list {
34+
@apply flex flex-col items-start self-stretch px-1;
35+
}
36+
37+
.dropdown-menu__item,
38+
.dropdown-menu__list > :is(a, button) {
39+
@apply flex items-center w-full justify-start focus:outline-none gap-2 px-2 py-1.5 min-h-8 rounded-md border-none bg-transparent overflow-hidden text-ellipsis whitespace-nowrap text-content font-medium text-sm cursor-pointer leading-5;
40+
}
41+
42+
.dropdown-menu__item:hover,
43+
.dropdown-menu__list > :is(a, button):hover {
44+
@apply bg-secondary;
45+
}
46+
47+
.dropdown-menu__item:focus-visible,
48+
.dropdown-menu__list > :is(a, button):focus-visible {
49+
@apply ring-2 ring-inset ring-content bg-primary outline-none;
50+
}
51+
52+
.dropdown-menu__icon,
53+
.dropdown-menu__list > :is(a, button) svg {
54+
@apply shrink-0 size-4 text-content;
55+
}
56+

‎app/assets/stylesheets/css/components/ui/panel_header.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.header {
2-
@apply flex flex-col gap-2 items-start justify-center pe-0 py-0 !mb-0 px-1;
2+
@apply flex flex-col gap-2 items-start justify-center pe-0 py-0 px-1;
33
}
44

55
.header__main {

‎app/assets/stylesheets/css/components/ui/tabs.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* Tabs Component - All Styles */
2+
@layer components {
3+
/* ============================================
4+
BASE STYLES (Common to both variants)
5+
============================================ */
6+
7+
/* Container */
8+
.tabs {
9+
@apply flex flex-wrap;
10+
}
11+
12+
/* Base Item */
13+
.tabs__item {
14+
@apply inline-flex items-center mx-1 px-3 py-1 cursor-pointer text-sm font-medium leading-4 bg-transparent gap-2 rounded-md text-content;
15+
}
16+
17+
/* Item Sub-elements */
18+
.tabs__item-icon {
19+
@apply size-4 text-content;
20+
}
21+
22+
.tabs__item-label {
23+
@apply whitespace-nowrap;
24+
}
25+
26+
/* Item States - Shared */
27+
.tabs__item--disabled {
28+
@apply opacity-50 cursor-not-allowed;
29+
}
30+
31+
.tabs__item:hover:not(.tabs__item--disabled) {
32+
@apply bg-secondary;
33+
}
34+
35+
.tabs__item:focus-visible {
36+
@apply bg-primary outline-none ring-offset-2 ring-offset-primary ring-2 ring-content;
37+
}
38+
39+
/* Wrapper */
40+
.tabs__item-wrapper {
41+
@apply inline-block py-2;
42+
}
43+
44+
/* ============================================
45+
GROUP VARIANT
46+
============================================ */
47+
.tabs__item--group.tabs__item--active:hover,
48+
.tabs__item--group.tabs__item--active {
49+
background: color-mix(in oklab, var(--color-secondary), var(--color-content) 5%);
50+
}
51+
52+
.tabs__item-wrapper--group {
53+
@apply flex items-center justify-center;
54+
}
55+
56+
/* ============================================
57+
SCOPE VARIANT
58+
============================================ */
59+
.tabs__item-wrapper--scope {
60+
@apply border-b border-tertiary;
61+
}
62+
63+
.tabs__item-wrapper--scope.tabs__item--active {
64+
@apply border-b-2 border-accent;
65+
}
66+
}

‎app/assets/stylesheets/css/css-animations.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* Actions Dropdown Animations */
22

3+
.css-animate-dialog-slide-down[open],
34
.css-animate-slide-down {
45
opacity: 1;
56
transform: translateY(0);
@@ -17,12 +18,13 @@
1718
}
1819

1920
/* Hidden state - CSS handles the leave animation */
21+
.css-animate-dialog-slide-down,
2022
.css-animate-slide-down[hidden] {
2123
opacity: 0;
2224
transform: translateY(-0.25rem);
2325
transition:
24-
opacity 75ms ease-in,
25-
transform 75ms ease-in,
26+
opacity 75ms ease-out,
27+
transform 75ms ease-out,
2628
display 75ms allow-discrete;
2729
}
2830

0 commit comments

Comments
 (0)