mirror of
https://github.com/sim1222/misskey.git
synced 2025-08-04 07:26:29 +09:00
refactor(client): use css modules
This commit is contained in:
syuilo
@ -1,26 +1,32 @@
|
||||
<template>
|
||||
<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
|
||||
<header v-if="showHeader" ref="header">
|
||||
<div class="title"><slot name="header"></slot></div>
|
||||
<div class="sub">
|
||||
<slot name="func"></slot>
|
||||
<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
|
||||
<div class="_panel" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.hideHeader]: !showHeader, [$style.scrollable]: scrollable, [$style.closed]: !showBody }]">
|
||||
<header v-if="showHeader" ref="header" :class="$style.header">
|
||||
<div :class="$style.title">
|
||||
<span :class="$style.titleIcon"><slot name="icon"></slot></span>
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<div :class="$style.headerSub">
|
||||
<slot name="func" :button-style-class="$style.headerButton"></slot>
|
||||
<button v-if="foldable" :class="$style.headerButton" class="_button" @click="() => showBody = !showBody">
|
||||
<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
|
||||
<template v-else><i class="ti ti-chevron-down"></i></template>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<Transition
|
||||
:name="$store.state.animation ? 'container-toggle' : ''"
|
||||
:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
|
||||
:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
|
||||
:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
|
||||
:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
|
||||
@enter="enter"
|
||||
@after-enter="afterEnter"
|
||||
@leave="leave"
|
||||
@after-leave="afterLeave"
|
||||
>
|
||||
<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
|
||||
<div v-show="showBody" ref="content" :class="[$style.content, { omitted }]">
|
||||
<slot></slot>
|
||||
<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
|
||||
<span>{{ $ts.showMore }}</span>
|
||||
<button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
|
||||
<span :class="$style.fadeLabel">{{ $ts.showMore }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
@ -129,19 +135,18 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container-toggle-enter-active, .container-toggle-leave-active {
|
||||
<style lang="scss" module>
|
||||
.transition_toggle_enterActive,
|
||||
.transition_toggle_leaveActive {
|
||||
overflow-y: clip;
|
||||
transition: opacity 0.5s, height 0.5s !important;
|
||||
}
|
||||
.container-toggle-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
.container-toggle-leave-to {
|
||||
.transition_toggle_enterFrom,
|
||||
.transition_toggle_leaveTo {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ukygtjoj {
|
||||
.root {
|
||||
position: relative;
|
||||
overflow: clip;
|
||||
contain: content;
|
||||
@ -160,116 +165,93 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
> header {
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
left: 0;
|
||||
color: var(--panelHeaderFg);
|
||||
background: var(--panelHeaderBg);
|
||||
border-bottom: solid 0.5px var(--panelHeaderDivider);
|
||||
z-index: 2;
|
||||
line-height: 1.4em;
|
||||
|
||||
> .title {
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
|
||||
> ::v-deep(i) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .sub {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
|
||||
> ::v-deep(button) {
|
||||
width: 42px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
--stickyTop: 0px;
|
||||
|
||||
&.omitted {
|
||||
position: relative;
|
||||
max-height: var(--maxHeight);
|
||||
overflow: hidden;
|
||||
|
||||
> .fade {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), var(--X15));
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> span {
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.thin {
|
||||
> header {
|
||||
> .header {
|
||||
> .title {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
.header {
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
left: 0;
|
||||
color: var(--panelHeaderFg);
|
||||
background: var(--panelHeaderBg);
|
||||
border-bottom: solid 0.5px var(--panelHeaderDivider);
|
||||
z-index: 2;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
padding: 12px 16px;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.titleIcon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.headerSub {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.headerButton {
|
||||
width: 42px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
--stickyTop: 0px;
|
||||
|
||||
&.omitted {
|
||||
position: relative;
|
||||
max-height: var(--maxHeight);
|
||||
overflow: hidden;
|
||||
|
||||
> .fade {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), var(--X15));
|
||||
|
||||
> .fadeLabel {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> .fadeLabel {
|
||||
background: var(--panelHighlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 380px) {
|
||||
.ukygtjoj {
|
||||
> header {
|
||||
> .title {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._forceContainerFull_ .ukygtjoj {
|
||||
> header {
|
||||
> .title {
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
._forceContainerFull_.ukygtjoj {
|
||||
> header {
|
||||
> .title {
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
.title {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user