Skip to content

Commit f1032ee

Browse files
shairezshairez
committed
Merge branch 'main' into pr-fix-cloudflare
2 parents 62b1553 + e8c0ac9 commit f1032ee

Some content is hidden

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

63 files changed

+3829
-756
lines changed

‎.all-contributorsrc

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,26 @@
262262
"contributions": [
263263
"code"
264264
]
265+
},
266+
{
267+
"login": "naorpeled",
268+
"name": "Naor Peled",
269+
"avatar_url": "https://avatars.githubusercontent.com/u/6171622?v=4",
270+
"profile": "https://naor.dev",
271+
"contributions": [
272+
"test",
273+
"code"
274+
]
275+
},
276+
{
277+
"login": "igalklebanov",
278+
"name": "Igal Klebanov",
279+
"avatar_url": "https://avatars.githubusercontent.com/u/14938291?v=4",
280+
"profile": "https://github.com/igalklebanov",
281+
"contributions": [
282+
"test",
283+
"code"
284+
]
265285
}
266286
],
267287
"contributorsPerLine": 7,

‎.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,4 +63,7 @@ testem.log
6363

6464
# System Files
6565
.DS_Store
66-
Thumbs.db
66+
Thumbs.db
67+
68+
# Storybook
69+
**/storybook-static/*

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
119119
<td align="center" valign="top" width="14.28%"><a href="https://github.com/PatrykGodlewski"><img src="https://avatars.githubusercontent.com/u/81991100?v=4?s=100" width="100px;" alt="Patryk Godlewski"/><br /><sub><b>Patryk Godlewski</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/issues?q=author%3APatrykGodlewski" title="Bug reports">🐛</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=PatrykGodlewski" title="Code">💻</a></td>
120120
<td align="center" valign="top" width="14.28%"><a href="https://github.com/pranit-yawalkar"><img src="https://avatars.githubusercontent.com/u/64571514?v=4?s=100" width="100px;" alt="Pranit Yawalkar"/><br /><sub><b>Pranit Yawalkar</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/issues?q=author%3Apranit-yawalkar" title="Bug reports">🐛</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=pranit-yawalkar" title="Code">💻</a></td>
121121
<td align="center" valign="top" width="14.28%"><a href="https://github.com/gederer"><img src="https://avatars.githubusercontent.com/u/705111?v=4?s=100" width="100px;" alt="Greg Ederer"/><br /><sub><b>Greg Ederer</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=gederer" title="Code">💻</a></td>
122+
<td align="center" valign="top" width="14.28%"><a href="https://naor.dev"><img src="https://avatars.githubusercontent.com/u/6171622?v=4?s=100" width="100px;" alt="Naor Peled"/><br /><sub><b>Naor Peled</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=naorpeled" title="Tests">⚠️</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=naorpeled" title="Code">💻</a></td>
123+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/igalklebanov"><img src="https://avatars.githubusercontent.com/u/14938291?v=4?s=100" width="100px;" alt="Igal Klebanov"/><br /><sub><b>Igal Klebanov</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=igalklebanov" title="Tests">⚠️</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=igalklebanov" title="Code">💻</a></td>
122124
</tr>
123125
</tbody>
124126
</table>

‎apps/website/src/_state/component-statuses.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
4141
headless: {
4242
Accordion: 'Planned',
4343
Carousel: 'Planned',
44-
Select: 'Planned',
44+
Select: 'Draft',
4545
Tabs: 'Planned',
4646
Toggle: 'Planned',
4747
Tooltip: 'Planned',

‎apps/website/src/global.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,6 @@ body {
8282
}
8383

8484
.layout {
85-
grid-template-columns: 25% auto;
85+
grid-template-columns: 25% 70%;
8686
grid-template-areas: 'sidebar content';
8787
}

‎apps/website/src/routes/docs/headless/(components)/carousel/carousel.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
h1 {
2+
margin: 2rem 0;
3+
padding-top: 1rem;
4+
font-weight: bold;
5+
border-top: 1px dotted #222;
6+
}
7+
8+
h2 {
9+
margin-block: 1.15em 0.5em;
10+
font-size: xx-large;
11+
}
12+
13+
h3 {
14+
margin-block: 0.85em 0.35em;
15+
font-size: x-large;
16+
}
17+
18+
hr {
19+
margin-block: 2em;
20+
}
21+
22+
.form-item {
23+
width: 35em;
24+
}
25+
26+
.outter {
27+
display: grid;
28+
}
29+
30+
.inner {
31+
display: flex;
32+
align-items: center;
33+
}
34+
35+
.controls {
36+
padding: 2em;
37+
margin-inline: auto;
38+
display: flex;
39+
justify-content: center;
40+
gap: 0.5em;
41+
}
42+
43+
.control {
44+
width: 2em;
45+
aspect-ratio: 1/1;
46+
border-radius: 50%;
47+
display: flex;
48+
align-items: center;
49+
justify-content: center;
50+
transition: all 0.3s 0.1s ease-out;
51+
cursor: pointer;
52+
}
53+
54+
.control[aria-current='true'] {
55+
font-weight: 900;
56+
}
57+
58+
.img {
59+
height: 500px;
60+
object-fit: cover;
61+
}
62+
63+
.item {
64+
width: 350px;
65+
}
66+
67+
.item:nth-child(8),
68+
.item:nth-child(6),
69+
.item:nth-child(2) {
70+
width: 100px;
71+
}
72+
73+
.item:nth-child(5),
74+
.item:nth-child(3) {
75+
width: 150px;
76+
}

‎apps/website/src/routes/docs/headless/(components)/carousel/example-netflix.css

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/* carousel */
2+
3+
.qui-carousel {
4+
align-items: start;
5+
}
6+
7+
/* card */
8+
9+
.carousel__card {
10+
--card-width: max(min(25em, 20vw), 250px);
11+
--card-border-radius: 1em;
12+
--card-outline-color: transparent;
13+
--card-outline: 0.15em solid;
14+
--card-outline-offset: 0.1em;
15+
--card-margin: 2em;
16+
--card-width-shadow: 1em;
17+
--transition-ms: 150ms;
18+
19+
--button-border-radius: 0.35em;
20+
--button-background-color: #19b6f6;
21+
}
22+
23+
.carousel__card {
24+
width: var(--card-width);
25+
align-items: start;
26+
height: max-content;
27+
border-radius: var(--card-border-radius);
28+
outline-color: var(--card-outline-color);
29+
transition: margin calc(var(--transition-ms) * 1.5) ease-out;
30+
}
31+
32+
article > :first-child {
33+
border-top-left-radius: var(--card-border-radius);
34+
border-top-right-radius: var(--card-border-radius);
35+
}
36+
37+
article > :last-child {
38+
border-bottom-left-radius: var(--card-border-radius);
39+
border-bottom-right-radius: var(--card-border-radius);
40+
}
41+
42+
article {
43+
position: relative;
44+
left: 0;
45+
right: 0;
46+
margin: calc(var(--card-margin) + var(--card-width-shadow))
47+
calc(var(--card-margin) / 4);
48+
border-radius: var(--card-border-radius);
49+
transition: margin calc(var(--transition-ms) * 1.5) 100ms ease-out,
50+
box-shadow calc(var(--transition-ms) * 2.5) ease-out;
51+
overflow: hidden;
52+
}
53+
54+
/* card content */
55+
56+
img {
57+
border-bottom-left-radius: var(--card-border-radius);
58+
border-bottom-right-radius: var(--card-border-radius);
59+
transition: border-radius calc(var(--transition-ms) * 0.75) ease-in-out;
60+
}
61+
62+
.inner {
63+
display: grid;
64+
row-gap: 0.5em;
65+
background-color: black;
66+
padding: 1em;
67+
transition: opacity calc(var(--transition-ms) * 1.5) ease-out;
68+
opacity: 0;
69+
height: 0;
70+
position: absolute;
71+
}
72+
73+
.inner h3 {
74+
font-size: x-large;
75+
font-weight: bolder;
76+
margin-block: 1em;
77+
line-height: 1;
78+
}
79+
80+
.inner a {
81+
padding: 0.75em 1.35em;
82+
background-color: var(--button-background-color);
83+
border-radius: var(--button-border-radius);
84+
color: black;
85+
margin-inline-start: auto;
86+
margin-block: 1em;
87+
}
88+
89+
/* state */
90+
91+
.carousel__card:focus-within article {
92+
outline: var(--card-outline);
93+
outline-offset: var(--card-outline-offset);
94+
}
95+
96+
.carousel__card[aria-current='true'] {
97+
--card-margin: -2em;
98+
}
99+
100+
.carousel__card[aria-current='true']:first-child article {
101+
margin-inline-start: var(--card-width-shadow);
102+
margin-inline-end: calc(2 * var(--card-margin) - var(--card-width-shadow));
103+
}
104+
105+
.carousel__card[aria-current='true']:last-child article {
106+
margin-inline-start: calc(2 * var(--card-margin) - var(--card-width-shadow));
107+
margin-inline-end: var(--card-width-shadow);
108+
}
109+
110+
.carousel__card[aria-current='true'] article {
111+
box-shadow: 0 0 var(--card-width-shadow) rgba(0, 0, 0, 0.75),
112+
0 0.375em 0.375em rgba(0, 0, 0, 0.5);
113+
margin-block: var(--card-width-shadow);
114+
margin-inline: var(--card-margin);
115+
}
116+
117+
.carousel__card[aria-current='true'] img {
118+
border-bottom-left-radius: 0;
119+
border-bottom-right-radius: 0;
120+
}
121+
122+
.carousel__card[aria-current='true'] .inner {
123+
height: auto;
124+
position: relative;
125+
opacity: 1;
126+
}
127+
128+
/* page layout */
129+
130+
header h2 {
131+
font-size: x-large;
132+
flex-grow: 1;
133+
}
134+
135+
header,
136+
nav {
137+
display: flex;
138+
align-items: center;
139+
}
140+
141+
header {
142+
margin-block-start: 2em;
143+
}
144+
145+
hr {
146+
margin-block: 0.5em 2em;
147+
opacity: 0.25;
148+
}
149+
150+
/* navigation */
151+
152+
button[disabled] {
153+
opacity: 0.35;
154+
}

0 commit comments

Comments
 (0)