Skip to content

Commit 5eea37f

Browse files
joshuaellisjoshuaellis
committed
chore: redo examples page
1 parent a3b84e7 commit 5eea37f

File tree

9 files changed

+832
-137
lines changed

9 files changed

+832
-137
lines changed

‎docs/app/components/Buttons/NavButton.css.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const navAnchor = recipe({
7474
variants: {
7575
active: {
7676
true: {
77-
background: '$redYellowGradient100',
77+
background: vars.colors.redYellowGradient100,
7878
},
7979
false: {
8080
backgroundColor: '$white',

‎docs/app/components/Header/Header.css.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const desktopHeight = createVar()
1010
export const header = style({
1111
width: '100%',
1212
paddingTop: vars.space['15'],
13+
paddingBottom: vars.space['15'],
1314
zIndex: vars.zIndices['1'],
1415

1516
'@media': {
@@ -19,6 +20,17 @@ export const header = style({
1920

2021
[`screen and ${BREAKPOINTS.tabletUp}`]: {
2122
paddingTop: vars.space['25'],
23+
paddingBottom: vars.space['25'],
24+
},
25+
},
26+
})
27+
28+
export const headerSpacing = style({
29+
height: mobileHeight,
30+
31+
'@media': {
32+
[`screen and ${BREAKPOINTS.tabletUp}`]: {
33+
height: desktopHeight,
2234
},
2335
},
2436
})

‎docs/app/components/Header/Header.tsx

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
headerScrolledDown,
2828
headerTransparentBackground,
2929
headerAddMarginToMain,
30+
headerSpacing,
3031
} from './Header.css'
3132
import clsx from 'clsx'
3233

@@ -43,7 +44,7 @@ interface HeaderProps {
4344
}
4445

4546
export const getHeaderHeights = (): [desktop: number, mobile: number] => [
46-
89, 63,
47+
114, 78,
4748
]
4849

4950
export const Header = ({
@@ -72,41 +73,54 @@ export const Header = ({
7273
const [desktopHeight, mobileHeight] = headerHeights
7374

7475
return (
75-
<animated.header
76-
className={clsx(
77-
header,
78-
isStuck && headerStuck,
79-
(subnav.length > 0 || (scrollTop > 20 && direction === 'up')) &&
80-
headerScrolledDown,
81-
transparentBackground && headerTransparentBackground,
82-
addMarginToMain && headerAddMarginToMain,
83-
className
76+
<>
77+
{isStuck && (
78+
<div
79+
className={headerSpacing}
80+
style={{
81+
...assignInlineVars({
82+
[mobileHeightVar]: `${mobileHeight}px`,
83+
[desktopHeightVar]: `${desktopHeight}px`,
84+
}),
85+
}}
86+
/>
8487
)}
85-
style={{
86-
...styles,
87-
position,
88-
...assignInlineVars({
89-
[mobileHeightVar]: `${mobileHeight}px`,
90-
[desktopHeightVar]: `${desktopHeight}px`,
91-
}),
92-
}}
93-
>
94-
<div className={flexContainer}>
95-
<HeaderNavigation className={desktopNavigation} />
96-
<Dialog.Root open={dialogOpen} onOpenChange={handleDialogChange}>
97-
<Dialog.Trigger className={mobileMenuButton}>
98-
<List className={hamburgerMenu} size={20} />
99-
</Dialog.Trigger>
100-
<Dialog.Portal forceMount>
101-
<HeaderSidePanel
102-
onNavigationClick={handleNavigationClick}
103-
isOpen={dialogOpen}
104-
submenu={sidebar}
105-
/>
106-
</Dialog.Portal>
107-
</Dialog.Root>
108-
<Logo />
109-
</div>
110-
</animated.header>
88+
<animated.header
89+
className={clsx(
90+
header,
91+
isStuck && headerStuck,
92+
(subnav.length > 0 || (scrollTop > 20 && direction === 'up')) &&
93+
headerScrolledDown,
94+
transparentBackground && headerTransparentBackground,
95+
addMarginToMain && headerAddMarginToMain,
96+
className
97+
)}
98+
style={{
99+
...styles,
100+
position,
101+
...assignInlineVars({
102+
[mobileHeightVar]: `${mobileHeight}px`,
103+
[desktopHeightVar]: `${desktopHeight}px`,
104+
}),
105+
}}
106+
>
107+
<div className={flexContainer}>
108+
<HeaderNavigation className={desktopNavigation} />
109+
<Dialog.Root open={dialogOpen} onOpenChange={handleDialogChange}>
110+
<Dialog.Trigger className={mobileMenuButton}>
111+
<List className={hamburgerMenu} size={20} />
112+
</Dialog.Trigger>
113+
<Dialog.Portal forceMount>
114+
<HeaderSidePanel
115+
onNavigationClick={handleNavigationClick}
116+
isOpen={dialogOpen}
117+
submenu={sidebar}
118+
/>
119+
</Dialog.Portal>
120+
</Dialog.Root>
121+
<Logo />
122+
</div>
123+
</animated.header>
124+
</>
111125
)
112126
}

‎docs/app/components/Select.css.ts

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { style } from '@vanilla-extract/css'
2+
import { vars } from '../styles/theme-contract.css'
3+
import { BREAKPOINTS } from '../styles/breakpoints.css'
4+
import { darkThemeClass } from '../styles/dark-theme.css'
5+
import { recipe } from '@vanilla-extract/recipes'
6+
7+
export const controlDiv = recipe({
8+
base: {
9+
background: 'transparent',
10+
fontWeight: vars.fontWeights.default,
11+
cursor: 'pointer',
12+
},
13+
variants: {
14+
isFocused: {
15+
true: {
16+
borderBottom: `solid 2px ${vars.colors.red100}`,
17+
},
18+
false: {
19+
borderBottom: `solid 2px ${vars.colors.black}`,
20+
},
21+
},
22+
},
23+
})
24+
25+
export const placeholderSpan = style({
26+
fontSize: vars.fontSizes.XXS,
27+
lineHeight: vars.lineHeights.XXS,
28+
29+
'@media': {
30+
[`screen and ${BREAKPOINTS.tabletUp}`]: {
31+
fontSize: vars.fontSizes.XS,
32+
lineHeight: vars.lineHeights.XS,
33+
},
34+
},
35+
})
36+
37+
export const menuBackground = style({
38+
backgroundColor: vars.colors.white,
39+
opacity: 0.2,
40+
position: 'absolute',
41+
inset: 0,
42+
zIndex: vars.zIndices['1'],
43+
})
44+
45+
export const menu = style({
46+
position: 'absolute',
47+
zIndex: vars.zIndices['2'],
48+
background: vars.colors.codeBackground,
49+
color: vars.colors.black,
50+
fontSize: vars.fontSizes.XXS,
51+
lineHeight: vars.lineHeights.XXS,
52+
overflow: 'hidden',
53+
boxShadow:
54+
'rgba(27,31,36,0.12) 0px 1px 3px, rgba(66,74,83,0.12) 0px 8px 24px',
55+
width: '100%',
56+
borderTopRightRadius: vars.radii.r8,
57+
borderTopLeftRadius: vars.radii.r8,
58+
bottom: 0,
59+
left: 0,
60+
61+
[`${darkThemeClass} &`]: {
62+
boxShadow:
63+
'rgba(27,31,36,0.5) 0px 1px 3px, rgba(18 21 23 / 40%) 0px 8px 24px',
64+
},
65+
66+
'@media': {
67+
[`screen and ${BREAKPOINTS.tabletUp}`]: {
68+
bottom: 'unset',
69+
borderRadius: vars.radii.r8,
70+
width: 200,
71+
fontSize: vars.fontSizes.XS,
72+
lineHeight: vars.lineHeights.XS,
73+
},
74+
},
75+
})
76+
77+
export const option = style({
78+
cursor: 'pointer',
79+
display: 'flex',
80+
justifyContent: 'space-between',
81+
alignItems: 'center',
82+
padding: `${vars.space['10']} ${vars.space['40']} ${vars.space['10']} ${vars.space['20']}`,
83+
})

0 commit comments

Comments
 (0)