chore(sfc-playground): style improvements (#6000)
This commit is contained in:
Phan An
GitHub
parent
d4d3319c1b
commit
109751abdd
@ -94,7 +94,8 @@ async function fetchVersions(): Promise<string[]> {
|
||||
<div class="links">
|
||||
<div class="version" @click.stop>
|
||||
<span class="active-version" @click="toggle">
|
||||
Version: {{ activeVersion }}
|
||||
Version
|
||||
<span class="number">{{ activeVersion }}</span>
|
||||
</span>
|
||||
<ul class="versions" :class="{ expanded }">
|
||||
<li v-if="!publishedVersions"><a>loading versions...</a></li>
|
||||
@ -119,7 +120,7 @@ async function fetchVersions(): Promise<string[]> {
|
||||
:class="{ dev }"
|
||||
@click="$emit('toggle-dev')"
|
||||
>
|
||||
{{ dev ? 'DEV' : 'PROD' }}
|
||||
<span>{{ dev ? 'DEV' : 'PROD' }}</span>
|
||||
</button>
|
||||
<button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
|
||||
<Sun class="light" />
|
||||
@ -152,6 +153,10 @@ nav {
|
||||
--bg: #fff;
|
||||
--bg-light: #fff;
|
||||
--border: #ddd;
|
||||
--btn: #666;
|
||||
--highlight: #333;
|
||||
--green: #3ca877;
|
||||
--red: #f07178;
|
||||
|
||||
color: var(--base);
|
||||
height: var(--nav-height);
|
||||
@ -170,25 +175,21 @@ nav {
|
||||
--bg: #1a1a1a;
|
||||
--bg-light: #242424;
|
||||
--border: #383838;
|
||||
--highlight: #fff;
|
||||
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: var(--nav-height);
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
h1 img {
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
@ -208,7 +209,6 @@ h1 img {
|
||||
}
|
||||
|
||||
.version {
|
||||
display: inline-block;
|
||||
margin-right: 12px;
|
||||
position: relative;
|
||||
}
|
||||
@ -216,38 +216,40 @@ h1 img {
|
||||
.active-version {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: var(--nav-height);
|
||||
padding-right: 15px;
|
||||
display: inline-flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.active-version:after {
|
||||
.active-version .number {
|
||||
color: var(--green);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.active-version::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 6px solid #aaa;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 22px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.toggle-dev {
|
||||
color: #f07178;
|
||||
.toggle-dev span {
|
||||
font-size: 12px;
|
||||
line-height: var(--nav-height);
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.toggle-dev.dev {
|
||||
color: #c3e88d;
|
||||
.toggle-dev.dev span {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.toggle-dark svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.toggle-dark .dark,
|
||||
@ -259,12 +261,22 @@ h1 img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.version:hover .active-version:after {
|
||||
border-top-color: var(--base);
|
||||
.links button,
|
||||
.links button a {
|
||||
color: var(--btn);
|
||||
}
|
||||
|
||||
.dark .version:hover .active-version:after {
|
||||
border-top-color: #fff;
|
||||
.links button:hover,
|
||||
.links button:hover a {
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
.version:hover .active-version::after {
|
||||
border-top-color: var(--btn);
|
||||
}
|
||||
|
||||
.dark .version:hover .active-version::after {
|
||||
border-top-color: var(--highlight);
|
||||
}
|
||||
|
||||
.versions {
|
||||
@ -292,16 +304,19 @@ h1 img {
|
||||
}
|
||||
|
||||
.versions a:hover {
|
||||
color: #3ca877;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.versions.expanded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.share,
|
||||
.download,
|
||||
.github {
|
||||
margin: 0 2px;
|
||||
.links > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.links > * + * {
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
|
||||
<g fill="#666">
|
||||
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24" fill="currentColor">
|
||||
<g>
|
||||
<rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
|
||||
<rect
|
||||
x="3"
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
|
||||
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path
|
||||
fill="#666"
|
||||
d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"></path>
|
||||
d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
|
||||
<path fill="currentColor" d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
|
||||
<g
|
||||
fill="none"
|
||||
stroke="#666"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
|
||||
<path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
|
||||
<path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
|
||||
<path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
|
||||
<path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
|
||||
<path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
|
||||
<path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
|
||||
<path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
|
||||
<path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
|
||||
<path fill="currentColor" d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
|
||||
<path fill="currentColor" d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
|
||||
<path fill="currentColor" d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
|
||||
<path fill="currentColor" d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
|
||||
<path fill="currentColor" d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
|
||||
<path fill="currentColor" d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
|
||||
<path fill="currentColor" d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
|
||||
<path fill="currentColor" d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
|
||||
<path fill="currentColor" d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user