Skip to content

Commit

Permalink
Showing 5 changed files with 558 additions and 343 deletions.
5 changes: 2 additions & 3 deletions components/AppContainer.vue
Original file line number Diff line number Diff line change
@@ -29,10 +29,9 @@ css({
variants: {
padded: {
true: {
padding: '1rem',
px: '{space.4}',
'@mq.sm': {
paddingLeft: '1.5rem',
paddingRight: '1.5rem',
px: '{space.6}',
}
},
options: {
5 changes: 2 additions & 3 deletions components/AppHeader.vue
Original file line number Diff line number Diff line change
@@ -46,18 +46,17 @@ css({
},
header: {
backdropFilter: 'saturate(180%) blur(20px)',
backdropFilter: '{backdrop.filter}',
position: 'sticky',
top: 0,
zIndex: 10,
width: '100%',
borderBottom: '1px solid {colors.gray.100}',
backgroundColor: 'rgba({colors.white}, 0.8)',
backgroundColor: '{backdrop.background}',
height: '{docus.header.height}',
'@dark': {
borderBottom: '1px solid {colors.gray.900}',
backgroundColor: 'rgba({colors.black}, 0.8)',
},
'.container': {
85 changes: 24 additions & 61 deletions components/docs/DocsPageContent.vue
Original file line number Diff line number Diff line change
@@ -92,8 +92,8 @@ onBeforeUnmount(() => {
}"
class="toc"
>
<div class="toc-wrapper" @click="isOpen = !isOpen">
<button>
<div class="toc-wrapper" >
<button @click="isOpen = !isOpen">
<span class="title">Table of Contents</span>
<Icon name="heroicons-outline:chevron-right" class="icon" :class="[isOpen && 'rotate']" />
</button>
@@ -106,25 +106,6 @@ onBeforeUnmount(() => {
</AppContainer>
</template>

<style lang="postcss" scoped>
/* .toc {
&:before {
content: ' ';
width: 100%;
right: 0;
@apply absolute top-0 z-[-1] block h-full bg-white/95 backdrop-blur dark:bg-black/95;
}
} */
@screen lg {
.toc {
&:before {
display: none;
}
}
}
</style>

<style scoped lang="ts">
css({
'.docs-page-content': {
@@ -140,24 +121,22 @@ css({
'.aside-nav': {
display: 'none',
overflowY: 'auto',
paddingBottom: '{space.8}',
'@mq.lg': {
display: 'block',
position: 'sticky',
top: '{docus.header.height}',
gridColumn: 'span 2/span 2',
alignSelf: 'flex-start',
height: 'calc(100vh - {docus.header.height})',
paddingTop: '{space.8}'
py: '{space.8}',
}
},
'.page-body': {
position: 'relative',
display: 'flex',
flexDirection: "column",
flex: '1 1 0%',
paddingTop: '{space.8}',
paddingBottom: '{space.8}',
py: '{space.8}',
'&.one-column': {
'@mq.lg': {
gridColumn: 'span 12 / span 12'
@@ -223,24 +202,16 @@ css({
top: '{docus.header.height}',
display: 'flex',
alignItems: 'center',
padding: '0 {space.4}',
// TODO: negative spaces
margin: '-{space.8} -{space.4} 0',
mx: 'calc(0px - {space.4})',
'@mq.sm': {
margin: '0 -{space.6}',
padding: '0 {space.6}'
mx: 'calc(0px - {space.6})',
},
'@mq.lg': {
maxHeight: '{docus.page.height}',
gridColumn: 'span 2 / span 2',
marginLeft: 0,
marginRight: 0,
mx: 0,
alignSelf: 'flex-start',
background: 'transparent',
paddingLeft: 0,
paddingRight: 0,
paddingTop: '{space.8}',
backdropFilter: 'blur(0)'
py: '{space.8}',
},
'&.closed': {
display: 'flex',
@@ -249,41 +220,33 @@ css({
display: 'block'
}
},
// TODO: before does not work
"&::before": {
content: '\'\'',
position: 'absolute',
width: '16px', // 100%
height: '16px', // 100%
right: 0,
top: 0,
zIndex: -1,
display: 'block',
background: 'red',
opacity: 0,
// &:before {
// content: ' ';
// width: 100%;
// right: 0;
// @apply absolute top-0 z-[-1] block h-full bg-white/95 backdrop-blur dark:bg-black/95;
// }
},
'.toc-wrapper': {
width: '100%',
// TODO: rgba() doesn't work in tokens.config; replace with backdrop tokens
backgroundColor: 'red',
px: '{space.4}',
'@mq.sm': {
px: '{space.6}',
},
'@mq.lg': {
px: 0,
backgroundColor: 'transparent',
backdropFilter: 'none'
},
button: {
display: 'flex',
alignItems: 'center',
gap: '{space.1}',
paddingTop: '{space.3}',
paddingBottom: '{space.3}',
py: '{space.3}',
width: '100%',
height: '100%',
'@mq.lg': {
display: 'none'
},
'.title': {
fontSize: '{text.xs.fontSize}',
lineHeight: '{text.xs.lineHeight}',
fontWeight: '{fontWeights.semibold}'
fontWeight: '{fontWeights.semibold}',
marginRight: '{space.1}',
},
'.icon': {
width: '{space.4}',
800 changes: 527 additions & 273 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions tokens.config.ts
Original file line number Diff line number Diff line change
@@ -79,7 +79,7 @@ export default defineTheme({
dark: '{colors.red.400}'
}
}
}
},
},
media: {
sm: '(min-width: 640px)',
@@ -595,8 +595,8 @@ export default defineTheme({
backdrop: {
filter: 'saturate(200%) blur(20px)',
background: {
initial: '#fafafabf',
dark: '#181818bf',
initial: 'rgba({colors.white}, 0.8)',
dark: 'rgba({colors.black}, 0.8)',
}
},
text: {

1 comment on commit a9b9f2f

@vercel
Copy link

@vercel vercel bot commented on a9b9f2f Nov 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.