forked from FoundKeyGang/FoundKey
enhance(client): 🎨
This commit is contained in:
syuilo
parent
3692c9eb64
commit
fe3609451e
9 changed files with 74 additions and 66 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
|
||||
<input ref="inputEl"
|
||||
v-model="v"
|
||||
v-panel
|
||||
v-adaptive-border
|
||||
:type="type"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
|
|
@ -243,7 +243,8 @@ export default defineComponent({
|
|||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: var(--fg);
|
||||
border: solid 0.5px var(--panel);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -251,7 +252,7 @@ export default defineComponent({
|
|||
transition: border-color 0.1s ease-out;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover);
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -298,7 +299,7 @@ export default defineComponent({
|
|||
|
||||
&.focused {
|
||||
> input {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--accent) !important;
|
||||
//box-shadow: 0 0 0 4px var(--focus);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
<div class="label" @click="focus"><slot name="label"></slot></div>
|
||||
<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
|
||||
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
|
||||
<select ref="inputEl" v-model="v" v-panel
|
||||
<select ref="inputEl"
|
||||
v-model="v"
|
||||
v-adaptive-border
|
||||
class="select"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
|
|
@ -226,7 +228,7 @@ export default defineComponent({
|
|||
|
||||
&:hover {
|
||||
> .select {
|
||||
border-color: var(--inputBorderHover);
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -242,6 +244,7 @@ export default defineComponent({
|
|||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: var(--fg);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
|
|
@ -295,7 +298,7 @@ export default defineComponent({
|
|||
|
||||
&.focused {
|
||||
> select {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--accent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
<div
|
||||
class="ziffeoms"
|
||||
:class="{ disabled, checked }"
|
||||
role="switch"
|
||||
:aria-checked="checked"
|
||||
:aria-disabled="disabled"
|
||||
@click.prevent="toggle"
|
||||
>
|
||||
<input
|
||||
ref="input"
|
||||
|
|
@ -13,11 +9,11 @@
|
|||
:disabled="disabled"
|
||||
@keydown.enter="toggle"
|
||||
>
|
||||
<span v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button">
|
||||
<span class="handle"></span>
|
||||
<span v-adaptive-border v-tooltip="checked ? $ts.itsOn : $ts.itsOff" class="button" @click.prevent="toggle">
|
||||
<i class="check fas fa-check"></i>
|
||||
</span>
|
||||
<span class="label">
|
||||
<span><slot></slot></span>
|
||||
<span @click="toggle"><slot></slot></span>
|
||||
<p class="caption"><slot name="caption"></slot></p>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -55,16 +51,7 @@ export default defineComponent({
|
|||
.ziffeoms {
|
||||
position: relative;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
transition: all 0.2s;
|
||||
|
||||
> * {
|
||||
user-select: none;
|
||||
|
|
@ -80,27 +67,30 @@ export default defineComponent({
|
|||
|
||||
> .button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
background: var(--switchBg);
|
||||
box-sizing: border-box;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
outline: none;
|
||||
border-radius: 999px;
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: inherit;
|
||||
|
||||
> .handle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 5px;
|
||||
margin: auto 0;
|
||||
border-radius: 100%;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
> .check {
|
||||
margin: auto;
|
||||
opacity: 0;
|
||||
color: var(--fgOnAccent);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .button {
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,13 +98,13 @@ export default defineComponent({
|
|||
margin-left: 16px;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
transition: inherit;
|
||||
color: var(--fg);
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -129,12 +119,6 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .button {
|
||||
background-color: var(--accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
|
|
@ -142,11 +126,11 @@ export default defineComponent({
|
|||
|
||||
&.checked {
|
||||
> .button {
|
||||
background-color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
background-color: var(--accent) !important;
|
||||
border-color: var(--accent) !important;
|
||||
|
||||
> .handle {
|
||||
transform: translateX(10px);
|
||||
> .check {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="input" :class="{ disabled, focused, tall, pre }">
|
||||
<textarea ref="inputEl"
|
||||
v-model="v"
|
||||
v-panel
|
||||
v-adaptive-border
|
||||
:class="{ code, _monospace: code }"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
|
|
@ -210,7 +210,8 @@ export default defineComponent({
|
|||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: var(--fg);
|
||||
border: solid 0.5px var(--panel);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -218,13 +219,13 @@ export default defineComponent({
|
|||
transition: border-color 0.1s ease-out;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover);
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.focused {
|
||||
> textarea {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--accent) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,14 +51,13 @@
|
|||
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</span>
|
||||
</template>
|
||||
</MkInput>
|
||||
<label v-if="meta.tosUrl" class="_formBlock tou">
|
||||
<input v-model="ToSAgreement" type="checkbox">
|
||||
<MkSwitch v-if="meta.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
|
||||
<I18n :src="$ts.agreeTo">
|
||||
<template #0>
|
||||
<a :href="meta.tosUrl" class="_link" target="_blank">{{ $ts.tos }}</a>
|
||||
</template>
|
||||
</I18n>
|
||||
</label>
|
||||
</MkSwitch>
|
||||
<captcha v-if="meta.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="meta.hcaptchaSiteKey"/>
|
||||
<captcha v-if="meta.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="meta.recaptchaSiteKey"/>
|
||||
<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ $ts.start }}</MkButton>
|
||||
|
|
@ -258,11 +257,5 @@ export default defineComponent({
|
|||
.captcha {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
> .tou {
|
||||
display: block;
|
||||
margin: 16px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
24
packages/client/src/directives/adaptive-border.ts
Normal file
24
packages/client/src/directives/adaptive-border.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { Directive } from 'vue';
|
||||
|
||||
export default {
|
||||
mounted(src, binding, vn) {
|
||||
const getBgColor = (el: HTMLElement) => {
|
||||
const style = window.getComputedStyle(el);
|
||||
if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
|
||||
return style.backgroundColor;
|
||||
} else {
|
||||
return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
|
||||
}
|
||||
}
|
||||
|
||||
const parentBg = getBgColor(src.parentElement);
|
||||
|
||||
const myBg = window.getComputedStyle(src).backgroundColor;
|
||||
|
||||
if (parentBg === myBg) {
|
||||
src.style.borderColor = 'var(--divider)';
|
||||
} else {
|
||||
src.style.borderColor = myBg;
|
||||
}
|
||||
},
|
||||
} as Directive;
|
||||
|
|
@ -11,6 +11,7 @@ import anim from './anim';
|
|||
import stickyContainer from './sticky-container';
|
||||
import clickAnime from './click-anime';
|
||||
import panel from './panel';
|
||||
import adaptiveBorder from './adaptive-border';
|
||||
|
||||
export default function(app: App) {
|
||||
app.directive('userPreview', userPreview);
|
||||
|
|
@ -25,4 +26,5 @@ export default function(app: App) {
|
|||
app.directive('click-anime', clickAnime);
|
||||
app.directive('sticky-container', stickyContainer);
|
||||
app.directive('panel', panel);
|
||||
app.directive('adaptive-border', adaptiveBorder);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default {
|
|||
if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
|
||||
return style.backgroundColor;
|
||||
} else {
|
||||
return getBgColor(el.parentElement);
|
||||
return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="_formRoot">
|
||||
<div v-panel class="rfqxtzch _formBlock">
|
||||
<div v-adaptive-border class="rfqxtzch _panel _formBlock">
|
||||
<div class="toggle">
|
||||
<div class="toggleWrapper">
|
||||
<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue