oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

refactor(frontend): use css modules

Browse source
This commit is contained in:
syuilo 2023-05-09 18:47:06 +09:00
parent 461f761aa6
commit baa45859c1
2 changed files with 157 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

103
packages/frontend/src/components/MkModalWindow.vue
View file

@ -1,15 +1,15 @@
<template>
<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
<div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }" @keydown="onKeydown">
<div ref="headerEl" class="header">
<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
<span class="title">
<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }" @keydown="onKeydown">
<div ref="headerEl" :class="$style.header">
<button v-if="withOkButton" :class="$style.headerButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
<span :class="$style.title">
<slot name="header"></slot>
</span>
<button v-if="!withOkButton" class="_button" data-cy-modal-window-close @click="$emit('close')"><i class="ti ti-x"></i></button>
<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
<button v-if="!withOkButton" :class="$style.headerButton" class="_button" data-cy-modal-window-close @click="$emit('close')"><i class="ti ti-x"></i></button>
<button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
</div>
<div class="body">
<div :class="$style.body">
<slot :width="bodyWidth" :height="bodyHeight"></slot>
</div>
</div>
@ -81,8 +81,8 @@ defineExpose({
});
</script>
<style lang="scss" scoped>
.ebkgoccj {
<style lang="scss" module>
.root {
margin: auto;
overflow: hidden;
display: flex;
@ -96,51 +96,52 @@ defineExpose({
--root-margin: 16px;
}
> .header {
$height: 46px;
$height-narrow: 42px;
display: flex;
flex-shrink: 0;
background: var(--windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
--headerHeight: 46px;
--headerHeightNarrow: 42px;
}
> button {
height: $height;
width: $height;
.header {
display: flex;
flex-shrink: 0;
background: var(--windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
@media (max-width: 500px) {
height: $height-narrow;
width: $height-narrow;
}
}
.headerButton {
height: var(--headerHeight);
width: var(--headerHeight);
> .title {
flex: 1;
line-height: $height;
padding-left: 32px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
@media (max-width: 500px) {
line-height: $height-narrow;
padding-left: 16px;
}
}
> button + .title {
padding-left: 0;
}
}
> .body {
flex: 1;
overflow: auto;
background: var(--panel);
container-type: size;
@media (max-width: 500px) {
height: var(--headerHeightNarrow);
width: var(--headerHeightNarrow);
}
}
.title {
flex: 1;
line-height: var(--headerHeight);
padding-left: 32px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
@media (max-width: 500px) {
line-height: var(--headerHeightNarrow);
padding-left: 16px;
}
}
.headerButton + .title {
padding-left: 0;
}
.body {
flex: 1;
overflow: auto;
background: var(--panel);
container-type: size;
}
</style>