Skip to content

Commit 92706da

Browse files
ToolboxAidToolboxAid
committed
Strengthen theme v2 reusable CSS foundation before page migrations - PR_26152_028-theme-v2-css-foundation
1 parent 742c725 commit 92706da

12 files changed

Lines changed: 960 additions & 22 deletions

File tree

‎GameFoundryStudio/assets/css/theme/v2/accordion.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ summary::-webkit-details-marker {
1111
display: none
1212
}
1313

14+
.accordion-stack {
15+
display: grid;
16+
gap: var(--space-10);
17+
padding: var(--space-14)
18+
}
19+
1420
details.vertical-accordion {
1521
border: var(--border-standard);
1622
border-radius: var(--radius-lg);
@@ -78,3 +84,137 @@ details.vertical-accordion[open] summary:active:after {
7884
color: var(--muted);
7985
line-height: 1.5
8086
}
87+
88+
.horizontal-accordion-toggle {
89+
--accordion-button-border: var(--line);
90+
--accordion-button-background: var(--panel-soft);
91+
--accordion-button-color: var(--gold);
92+
min-width: var(--space-20);
93+
width: var(--space-20);
94+
height: var(--space-20);
95+
padding: var(--space-0);
96+
border: var(--border-standard);
97+
border-color: var(--accordion-button-border);
98+
border-radius: var(--radius-pill);
99+
background: var(--accordion-button-background);
100+
color: var(--accordion-button-color);
101+
line-height: var(--line-height-single);
102+
display: inline-grid;
103+
place-items: center;
104+
flex: 0 0 auto;
105+
margin-left: auto;
106+
font-size: var(--space-0);
107+
overflow: hidden;
108+
position: relative
109+
}
110+
111+
.horizontal-accordion-toggle:before {
112+
content: "";
113+
position: absolute;
114+
top: 50%;
115+
left: 50%;
116+
width: var(--size-horizontal-toggle-icon);
117+
height: var(--size-horizontal-toggle-icon);
118+
background: currentColor;
119+
clip-path: polygon(70% 50%, 30% 20%, 30% 80%);
120+
transform-origin: center
121+
}
122+
123+
.horizontal-accordion-toggle[aria-expanded="true"]:before {
124+
transform: translate(-50%, -50%)
125+
}
126+
127+
.horizontal-accordion-toggle[aria-expanded="false"]:before {
128+
transform: translate(-50%, -50%) rotate(180deg)
129+
}
130+
131+
.horizontal-accordion-toggle--left[aria-expanded="true"]:before {
132+
transform: translate(-50%, -50%) rotate(180deg)
133+
}
134+
135+
.horizontal-accordion-toggle--left[aria-expanded="false"]:before {
136+
transform: translate(-50%, -50%)
137+
}
138+
139+
.tool-column .accordion-stack {
140+
padding: var(--space-8) var(--space-12);
141+
gap: var(--space-8)
142+
}
143+
144+
.tool-column details.vertical-accordion summary {
145+
padding: var(--space-10) var(--space-12)
146+
}
147+
148+
.tool-column .accordion-body {
149+
padding: var(--space-0) var(--space-12) var(--space-10)
150+
}
151+
152+
.tool-column-header .horizontal-accordion-toggle {
153+
order: 2
154+
}
155+
156+
.tool-column[class*="tool-group-"] .horizontal-accordion-toggle,
157+
.tool-column[class*="tool-group-"] details.vertical-accordion summary:after {
158+
--accordion-button-border: var(--tool-group-accent);
159+
--accordion-button-color: var(--tool-group-color)
160+
}
161+
162+
.tool-column.is-collapsed .horizontal-accordion-toggle {
163+
margin: var(--space-0);
164+
order: 1;
165+
writing-mode: horizontal-tb
166+
}
167+
168+
.vertical-accordion[class*="tool-group-"] {
169+
border-color: var(--tool-group-accent)
170+
}
171+
172+
.vertical-accordion[class*="tool-group-"] summary {
173+
color: var(--tool-group-color)
174+
}
175+
176+
.tool-display-mode summary {
177+
color: var(--gold);
178+
font-weight: var(--font-weight-heavy);
179+
cursor: pointer;
180+
list-style: none;
181+
padding: var(--space-10) var(--space-44) var(--space-10) var(--space-10);
182+
display: flex;
183+
align-items: center;
184+
justify-content: center;
185+
gap: var(--space-10);
186+
flex: 0 0 auto
187+
}
188+
189+
.tool-display-mode summary::-webkit-details-marker {
190+
display: none
191+
}
192+
193+
.tool-display-mode summary:after {
194+
content: "";
195+
position: absolute;
196+
right: var(--space-12);
197+
top: 50%;
198+
transform: translateY(-50%);
199+
width: var(--space-20);
200+
height: var(--space-20);
201+
border: var(--border-standard);
202+
border-radius: var(--radius-pill);
203+
background: var(--panel-soft);
204+
color: var(--gold);
205+
display: inline-grid;
206+
place-items: center;
207+
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
208+
background-position: calc(50% - var(--space-3)) 50%, calc(50% + var(--space-3)) 50%;
209+
background-size: var(--space-7) var(--space-7);
210+
background-repeat: no-repeat
211+
}
212+
213+
.tool-display-mode[open] summary:after,
214+
.tool-display-mode summary:active:after {
215+
background-image: linear-gradient(135deg, transparent 50%, currentColor 50%), linear-gradient(45deg, currentColor 50%, transparent 50%)
216+
}
217+
218+
.tool-display-mode[open] summary:active:after {
219+
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%)
220+
}

‎GameFoundryStudio/assets/css/theme/v2/buttons.css‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,39 @@
2525
opacity: var(--opacity-disabled)
2626
}
2727

28+
.btn:hover,
29+
.btn:focus-visible {
30+
border-color: var(--gold);
31+
outline: none
32+
}
33+
34+
.btn[aria-disabled=true],
35+
.btn:disabled {
36+
cursor: not-allowed;
37+
pointer-events: none
38+
}
39+
40+
.button-row,
41+
.inline-row {
42+
display: flex;
43+
gap: var(--space-10);
44+
flex-wrap: wrap;
45+
align-items: center
46+
}
47+
2848
.return-to-top {
49+
--accordion-button-border: var(--meaning-border, var(--line));
50+
--accordion-button-background: var(--meaning-soft, var(--panel-soft));
51+
--accordion-button-color: var(--meaning-color, var(--gold));
2952
min-width: var(--space-20);
3053
width: var(--space-44);
3154
height: var(--space-44);
3255
padding: var(--space-0);
3356
border: var(--border-standard);
57+
border-color: var(--accordion-button-border);
3458
border-radius: var(--radius-pill);
35-
background: var(--panel-soft);
36-
color: var(--gold);
59+
background: var(--accordion-button-background);
60+
color: var(--accordion-button-color);
3761
line-height: var(--line-height-single);
3862
display: inline-grid;
3963
place-items: center;
@@ -60,7 +84,7 @@
6084

6185
.return-to-top:hover,
6286
.return-to-top:focus-visible {
63-
border-color: var(--gold);
64-
background: color-mix(in srgb, var(--gold) 24%, var(--panel));
87+
border-color: var(--meaning-color, var(--gold));
88+
background: color-mix(in srgb, var(--meaning-color, var(--gold)) 24%, var(--panel));
6589
outline: none
6690
}

0 commit comments

Comments
 (0)