Skip to content

Commit c1adcd3

Browse files
posvaposva
committed
docs: style change db
1 parent c0575f0 commit c1adcd3

File tree

3 files changed

+147
-95
lines changed

3 files changed

+147
-95
lines changed

‎docs/.vitepress/components/FirebaseExample.vue‎

Lines changed: 104 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<!-- the key forces recreation of the slot child instead of reusing it -->
2727
<keep-alive>
2828
<div class="tab-content" :key="selectedTab">
29-
{{ selectedTab }}
29+
<component :is="$slots.default()[selectedTab]" />
3030
<!-- <SlotSelector :slot="$slots.default[selectedTab]" /> -->
3131
</div>
3232
</keep-alive>
@@ -77,104 +77,115 @@ export default {
7777
}
7878
</script>
7979

80-
<style scoped>
81-
/* $bgColor = #fff;
82-
$lightGray = #ddd; */
83-
84-
::root {
80+
<style>
81+
:root {
8582
--bgColor: #fff;
8683
--lightGray: #ddd;
84+
85+
--code-bg-color-lighter: #3a404c;
86+
--code-bg-color-lightest: #5f687b;
87+
}
88+
</style>
89+
90+
<style>
91+
.tab-container > nav {
92+
display: flex;
93+
align-items: flex-end;
94+
justify-content: flex-end;
95+
height: 2.5rem;
8796
}
8897
89-
.tab-container {
90-
& > nav {
91-
display: flex;
92-
align-items: flex-end;
93-
justify-content: flex-end;
94-
height: 2.5rem;
95-
96-
@media (max-width: 419px) {
97-
& {
98-
margin: 0 -1.5rem -0.85rem;
99-
}
100-
}
101-
102-
& > button {
103-
display: flex;
104-
align-items: center;
105-
height: 100%;
106-
/* padding: 4.6rem 0.7rem 0; */
107-
padding: 0 0.7rem;
108-
margin: 0;
109-
border: solid 1px $codeBgColor;
110-
border-bottom: none;
111-
background-color: lighten($codeBgColor, 10%);
112-
113-
&:not(:first-child) {
114-
border-left: none;
115-
}
116-
117-
&:not(:last-child) {
118-
border-right: none;
119-
}
120-
121-
&:first-child {
122-
border-radius: 6px 0 0;
123-
}
124-
125-
&:last-child {
126-
border-radius: 0 6px 0 0;
127-
}
128-
129-
& /deep/ svg {
130-
width: 32px;
131-
height: 32px;
132-
/* margin-top: -3.5rem; */
133-
fill: darken($bgColor, 10%);
134-
}
135-
136-
&:not([disabled]):hover {
137-
cursor: pointer;
138-
background-color: lighten($codeBgColor, 30%);
139-
140-
& /deep/ svg {
141-
fill: $bgColor;
142-
}
143-
}
144-
145-
&.is-selected:hover {
146-
background-color: $codeBgColor;
147-
}
148-
149-
&[disabled] {
150-
border-color: lighten($codeBgColor, 60%);
151-
152-
& svg {
153-
fill: lighten($codeBgColor, 60%);
154-
}
155-
}
156-
157-
&.is-selected {
158-
background-color: $codeBgColor;
159-
160-
& svg {
161-
fill: $bgColor;
162-
}
163-
}
164-
}
98+
.tab-content [class^='language-'] {
99+
margin-top: 0;
100+
}
101+
102+
@media (max-width: 419px) {
103+
.tab-container > nav {
104+
margin: 0 -1.5rem 0;
165105
}
106+
}
107+
108+
.tab-container > nav > button {
109+
display: flex;
110+
align-items: center;
111+
height: 100%;
112+
/* padding: 4.6rem 0.7rem 0; */
113+
padding: 0 0.7rem;
114+
margin: 0;
115+
border: solid 1px var(--code-bg-color);
116+
border-bottom: none;
117+
/* filter: brightness(1.1); */
118+
/* background-color: lighten(var(--code-bg-color), 10%); */
119+
background-color: var(--code-bg-color-lighter);
120+
}
121+
122+
.tab-container > nav > button svg {
123+
width: 32px;
124+
height: 32px;
125+
/* margin-top: -3.5rem; */
126+
fill: var(--bgColor);
127+
/* filter: brightness(0.8); */
128+
}
129+
130+
.tab-container > nav > button:not(:first-child) {
131+
border-left: none;
132+
}
133+
134+
.tab-container > nav > button:not(:last-child) {
135+
border-right: none;
136+
}
137+
138+
.tab-container > nav > button:first-child {
139+
border-radius: 6px 0 0;
140+
}
166141
167-
.tab-content {
168-
@media (min-width: 420px) {
169-
& >>> div[class^='language-'] {
170-
border-radius: 6px 0 6px 6px;
171-
}
172-
}
173-
174-
& >>> pre[class^='language'] {
175-
margin-top: 0;
176-
border-radius: 6px 0 6px 6px;
177-
}
142+
.tab-container > nav > button:last-child {
143+
border-radius: 0 6px 0 0;
144+
}
145+
146+
.tab-container > nav > button:not([disabled]):hover {
147+
cursor: pointer;
148+
/* background-color: lighten(var(--code-bg-color), 30%); */
149+
background-color: var(--code-bg-color-lightest);
150+
/* filter: brightness(1.3); */
151+
}
152+
153+
.tab-container > nav > button:not([disabled]):hover svg {
154+
fill: var(--bgColor);
155+
}
156+
157+
.tab-container > nav > button.is-selected:hover {
158+
filter: brightness(1);
159+
background-color: var(--code-bg-color);
160+
}
161+
162+
.tab-container>nav>button: [disabled] {
163+
/* border-color: lighten(var(--code-bg-color), 60%); */
164+
border-color: var(--code-bg-color);
165+
/* filter: brightness(1.6); */
166+
}
167+
168+
.tab-container > nav > button [disabled] svg {
169+
fill: var(--code-bg-color);
170+
/* filter: brightness(1.6); */
171+
}
172+
173+
.tab-container > nav > button.is-selected {
174+
background-color: var(--code-bg-color);
175+
}
176+
177+
.tab-container > nav > button.is-selected svg {
178+
fill: var(--bgColor);
179+
}
180+
181+
@media (min-width: 420px) {
182+
.tab-container .tab-content div[class^='language-'] {
183+
border-radius: 6px 0 6px 6px;
178184
}
179185
}
186+
187+
.tab-container .tab-content [class^='language'] {
188+
margin-top: 0;
189+
border-radius: 6px 0 6px 6px;
190+
}
180191
</style>

‎docs/.vitepress/config.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ if (process.env.NODE_ENV === 'production') {
1717
const config = {
1818
lang: 'en-US',
1919
title: 'Vuefire',
20-
description: 'Realtime bindings between Vue/Vuex and Firebase',
21-
description: 'The official router for Vue.js.',
20+
description: 'Official realtime bindings between Vue/Vuex and Firebase',
2221

2322
head,
2423

@@ -111,6 +110,26 @@ const config = {
111110
// algoliaOptions: { facetFilters: ['tags:guide,api'] },
112111
},
113112
},
113+
114+
markdown: {
115+
extendMarkdown: (md) => {
116+
md.use(container, 'miniwarn', {
117+
render(tokens, idx) {
118+
const token = tokens[idx]
119+
// 8 === 'miniwarn'.length
120+
const info = token.info.trim().slice(8).trim()
121+
122+
if (token.nesting === 1) {
123+
// opening tag
124+
return '<blockquote class="warning">' + info
125+
} else {
126+
// closing tag
127+
return '</blockquote>\n'
128+
}
129+
},
130+
})
131+
},
132+
},
114133
}
115134

116135
module.exports = config

‎docs/.vitepress/theme/Layout.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,26 @@ form {
4848
.custom-blocks {
4949
overflow-x: auto;
5050
}
51+
52+
.reset-button {
53+
/* reset button style */
54+
border: none;
55+
padding: 0;
56+
margin: 0;
57+
width: auto;
58+
overflow: visible;
59+
background: transparent;
60+
color: inherit;
61+
font: inherit;
62+
}
63+
64+
.js-focus-visible :focus:not(.focus-visible) {
65+
outline: none;
66+
}
67+
68+
blockquote.warning {
69+
background-color: rgba(255, 229, 100, 0.3);
70+
border-color: #e7c000;
71+
color: #6b5900;
72+
}
5173
</style>

0 commit comments

Comments
 (0)