Skip to content

Commit c9fc975

Browse files
leecalcoteleecalcote
committed
init
Signed-off-by: Lee Calcote <[email protected]>
1 parent ad457b9 commit c9fc975

16 files changed

+5076
-0
lines changed

‎about.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"about_url": null,
3+
"license_url": null,
4+
"assets": {
5+
},
6+
"name": "Modern Category + Group Boxes",
7+
"component": true
8+
}

‎common.scss

+335
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,335 @@
1+
.custom-category-header {
2+
margin: 1em auto;
3+
display: inline-block;
4+
font-size: 3em;
5+
border-bottom: 2px solid var(--primary);
6+
}
7+
8+
.category-boxes {
9+
justify-content: center;
10+
}
11+
12+
.categories-list {
13+
.navigation-container {
14+
border-bottom: 0;
15+
}
16+
}
17+
18+
.category .muted,
19+
.navigation-categories .muted {
20+
opacity: 25%;
21+
&:hover {
22+
opacity: 100%;
23+
}
24+
}
25+
26+
.navigation-categories,
27+
.categories-list {
28+
.navigation-container {
29+
border-bottom: 3px solid var(--primary-low-mid-or-secondary-high);
30+
}
31+
.list-container {
32+
padding-top: 32px;
33+
}
34+
}
35+
36+
.custom-category-boxes-container {
37+
width: 100%;
38+
display: flex;
39+
flex-direction: column;
40+
justify-content: center;
41+
&::empty {
42+
display: none;
43+
}
44+
}
45+
46+
.category {
47+
.custom-category-boxes {
48+
display: flex;
49+
flex-direction: row;
50+
margin: 0 0 32px 0;
51+
width: 100%;
52+
flex-wrap: wrap;
53+
.category-box {
54+
width: 30%;
55+
margin-right: 1em;
56+
margin-bottom: 1em;
57+
flex-grow: 1;
58+
}
59+
}
60+
}
61+
62+
.category-list:not(.theme-setting):not(.setting),
63+
.navigation-categories .list-container .full-width #list-area .contents,
64+
.categories-list .list-container .full-width #header-list-area .contents {
65+
.column {
66+
margin-top: 2em;
67+
}
68+
.category-boxes,
69+
.category-boxes-with-topics,
70+
.category-list.subcategory-list,
71+
.column.categories,
72+
.category-list,
73+
.muted-categories {
74+
display: none;
75+
visibility: hidden;
76+
}
77+
}
78+
79+
.category-title-contents {
80+
padding: 87px 0;
81+
.d-icon-lock {
82+
display: none;
83+
}
84+
}
85+
86+
.groups-boxes {
87+
display: grid;
88+
gap: 18px;
89+
grid-auto-flow: row;
90+
grid-template-columns: 1fr 1fr;
91+
.group-box {
92+
background-color: none;
93+
border: 0 !important;
94+
border-radius: 12px;
95+
color: var(--primary);
96+
padding: 0px;
97+
box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07),
98+
0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112),
99+
0 4.50776px 10.0172px rgba(0, 0, 0, 0.035),
100+
0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);
101+
.group-avatar-flair {
102+
grid-area: group-image;
103+
.avatar-flair {
104+
background-size: 64px;
105+
height: 64px;
106+
margin: 0 0;
107+
width: 64px;
108+
}
109+
}
110+
.group-box-inner {
111+
display: inline-grid;
112+
gap: 1em;
113+
grid-auto-flow: row;
114+
grid-template-rows: 1fr 0fr;
115+
.group-description {
116+
color: var(--primary-very-high);
117+
}
118+
.group-info-wrapper {
119+
align-items: center;
120+
gap: 1em;
121+
.group-info {
122+
margin-bottom: unset;
123+
padding-right: 1em;
124+
width: unset;
125+
span {
126+
color: var(--primary);
127+
font-size: 1.125em;
128+
font-weight: 600;
129+
letter-spacing: 0.03em;
130+
flex-shrink: 1;
131+
overflow: hidden;
132+
text-overflow: ellipsis;
133+
white-space: nowrap;
134+
}
135+
.group-user-count {
136+
color: var(--primary-high);
137+
flex-shrink: 0;
138+
font-size: 0.875em;
139+
padding-top: 2px;
140+
}
141+
}
142+
}
143+
}
144+
.group-membership {
145+
color: var(--primary-high);
146+
padding-top: 0;
147+
.is-group-member {
148+
color: var(--success);
149+
}
150+
}
151+
}
152+
}
153+
154+
.custom-category-boxes:not(.above-discovery-categories-outlet) {
155+
display: grid;
156+
grid-auto-flow: row;
157+
grid-gap: 32px;
158+
grid-template-columns: 1fr 1fr;
159+
grid-template-rows: 1fr;
160+
width: 100%;
161+
.category-box {
162+
display: flex;
163+
flex-grow: 1;
164+
background-color: var(--secondary);
165+
border-left-width: 0;
166+
border-radius: 12px;
167+
margin: 0 0;
168+
max-height: 160px;
169+
overflow: hidden;
170+
transition: all ease-out 0.2s;
171+
width: initial;
172+
box-shadow: 0 24px 40px rgba(0, 0, 0, 0.07),
173+
0 10.8529px 24.1177px rgba(0, 0, 0, 0.0456112),
174+
0 4.50776px 10.0172px rgba(0, 0, 0, 0.035),
175+
0 1.63037px 3.62304px rgba(0, 0, 0, 0.0243888);
176+
&:hover {
177+
background-color: var(--secondary-very-high);
178+
}
179+
&.muted {
180+
.category-details {
181+
grid-column: 2;
182+
}
183+
}
184+
.category-box-inner {
185+
border: 0;
186+
display: grid;
187+
grid-auto-flow: column;
188+
grid-template-columns: 0fr 1fr 0fr;
189+
column-gap: 48px;
190+
padding: 0;
191+
.category-logo {
192+
align-self: center;
193+
display: inline-block;
194+
width: 132px;
195+
height: 132px;
196+
img {
197+
height: 100%;
198+
width: 100%;
199+
}
200+
.category-abbreviation {
201+
display: none;
202+
}
203+
&.no-logo-present {
204+
display: flex;
205+
justify-content: center;
206+
align-items: center;
207+
width: 100px;
208+
height: 100%;
209+
min-height: 100px;
210+
.category-abbreviation {
211+
display: block;
212+
color: white;
213+
font-weight: bold;
214+
font-size: 2em;
215+
}
216+
}
217+
}
218+
.category-details {
219+
align-self: center;
220+
}
221+
}
222+
}
223+
h3 {
224+
align-items: baseline;
225+
color: var(--primary);
226+
display: inline-flex;
227+
font-size: 1.125em;
228+
font-weight: 600;
229+
letter-spacing: 0.03em;
230+
line-height: 140%;
231+
margin-top: 0;
232+
margin-bottom: 0;
233+
text-align: left;
234+
.rtl & {
235+
text-align: right;
236+
}
237+
.d-icon {
238+
color: var(--primary-very-high);
239+
font-size: 16px;
240+
height: 16px !important;
241+
margin-inline-end: 4px !important;
242+
width: 16px !important;
243+
}
244+
}
245+
.category-box-heading {
246+
margin-bottom: 8px;
247+
}
248+
.description {
249+
color: var(--primary-high);
250+
font-size: 1em;
251+
font-weight: 400;
252+
line-height: 140%;
253+
letter-spacing: 0.03em;
254+
margin-bottom: 0;
255+
max-height: 3em;
256+
text-align: left;
257+
.rtl & {
258+
text-align: right;
259+
}
260+
p {
261+
margin: 0;
262+
display: -webkit-box;
263+
-webkit-line-clamp: 2;
264+
-webkit-box-orient: vertical;
265+
overflow: hidden;
266+
}
267+
}
268+
.subcategory {
269+
display: none;
270+
}
271+
.subcategories {
272+
display: none;
273+
.subcategory {
274+
.subcategory-image-placeholder {
275+
margin-right: 0;
276+
}
277+
}
278+
}
279+
}
280+
281+
// Subcategory theming
282+
#header-list-area {
283+
.custom-category-boxes {
284+
grid-template-columns: 1fr 1fr 1fr;
285+
margin-top: 32px;
286+
.category-box-inner {
287+
column-gap: 24px;
288+
.category-logo {
289+
height: 80px;
290+
width: 80px;
291+
}
292+
}
293+
.category-box-heading {
294+
margin-bottom: 4px;
295+
}
296+
h3 {
297+
font-size: 1em;
298+
}
299+
.description {
300+
display: none;
301+
}
302+
}
303+
.custom-category-boxes-container + .category-boxes {
304+
display: none;
305+
}
306+
}
307+
308+
@media (max-width: 1250px) {
309+
body.category,
310+
#header-list-area {
311+
.custom-category-boxes {
312+
grid-template-columns: 1fr 1fr;
313+
}
314+
}
315+
}
316+
317+
@media (max-width: 960px) {
318+
.custom-category-boxes {
319+
grid-template-columns: 1fr;
320+
}
321+
}
322+
323+
@media (max-width: 800px) {
324+
body.category,
325+
body.navigation-categories {
326+
.custom-category-boxes {
327+
grid-template-columns: 1fr;
328+
}
329+
}
330+
#header-list-area {
331+
.custom-category-boxes {
332+
grid-template-columns: 1fr;
333+
}
334+
}
335+
}

0 commit comments

Comments
 (0)