refactor(frontend): use css modules

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

View file

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

View file

@ -1,13 +1,13 @@
<template> <template>
<div class="vblkjoeq"> <div>
<div class="label" @click="focus"><slot name="label"></slot></div> <div :class="$style.label" @click="focus"><slot name="label"></slot></div>
<div ref="container" class="input" :class="{ inline, disabled, focused }" @mousedown.prevent="show"> <div ref="container" :class="[$style.input, { [$style.inline]: inline, [$style.disabled]: disabled, [$style.focused]: focused }]" @mousedown.prevent="show">
<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div> <div ref="prefixEl" :class="$style.prefix"><slot name="prefix"></slot></div>
<select <select
ref="inputEl" ref="inputEl"
v-model="v" v-model="v"
v-adaptive-border v-adaptive-border
class="select" :class="$style.inputCore"
:disabled="disabled" :disabled="disabled"
:required="required" :required="required"
:readonly="readonly" :readonly="readonly"
@ -18,9 +18,9 @@
> >
<slot></slot> <slot></slot>
</select> </select>
<div ref="suffixEl" class="suffix"><i class="ti ti-chevron-down" :class="[$style.chevron, { [$style.chevronOpening]: opening }]"></i></div> <div ref="suffixEl" :class="$style.suffix"><i class="ti ti-chevron-down" :class="[$style.chevron, { [$style.chevronOpening]: opening }]"></i></div>
</div> </div>
<div class="caption"><slot name="caption"></slot></div> <div :class="$style.caption"><slot name="caption"></slot></div>
<MkButton v-if="manualSave && changed" primary @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> <MkButton v-if="manualSave && changed" primary @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
</div> </div>
@ -169,121 +169,116 @@ function show(ev: MouseEvent) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.vblkjoeq { .label {
> .label { font-size: 0.85em;
font-size: 0.85em; padding: 0 0 8px 0;
padding: 0 0 8px 0; user-select: none;
user-select: none;
&:empty { &:empty {
display: none; display: none;
}
}
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
&:empty {
display: none;
}
}
.input {
position: relative;
cursor: pointer;
&.inline {
display: inline-block;
margin: 0;
}
&.focused {
> .inputCore {
border-color: var(--accent) !important;
//box-shadow: 0 0 0 4px var(--focus);
} }
} }
> .caption { &.disabled {
font-size: 0.85em; opacity: 0.7;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
&:empty { &,
display: none; > .inputCore {
cursor: not-allowed !important;
} }
} }
> .input { &:hover {
position: relative; > .inputCore {
cursor: pointer; border-color: var(--inputBorderHover) !important;
&:hover {
> .select {
border-color: var(--inputBorderHover) !important;
}
}
> .select {
appearance: none;
-webkit-appearance: none;
display: block;
height: v-bind("height + 'px'");
width: 100%;
margin: 0;
padding: 0 12px;
font: inherit;
font-weight: normal;
font-size: 1em;
color: var(--fg);
background: var(--panel);
border: solid 1px var(--panel);
border-radius: 6px;
outline: none;
box-shadow: none;
box-sizing: border-box;
cursor: pointer;
transition: border-color 0.1s ease-out;
pointer-events: none;
user-select: none;
}
> .prefix,
> .suffix {
display: flex;
align-items: center;
position: absolute;
z-index: 1;
top: 0;
padding: 0 12px;
font-size: 1em;
height: v-bind("height + 'px'");
pointer-events: none;
&:empty {
display: none;
}
> * {
display: inline-block;
min-width: 16px;
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
> .prefix {
left: 0;
padding-right: 6px;
}
> .suffix {
right: 0;
padding-left: 6px;
}
&.inline {
display: inline-block;
margin: 0;
}
&.focused {
> select {
border-color: var(--accent) !important;
}
}
&.disabled {
opacity: 0.7;
&, * {
cursor: not-allowed !important;
}
} }
} }
} }
</style>
<style lang="scss" module> .inputCore {
appearance: none;
-webkit-appearance: none;
display: block;
height: v-bind("height + 'px'");
width: 100%;
margin: 0;
padding: 0 12px;
font: inherit;
font-weight: normal;
font-size: 1em;
color: var(--fg);
background: var(--panel);
border: solid 1px var(--panel);
border-radius: 6px;
outline: none;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.1s ease-out;
cursor: pointer;
pointer-events: none;
user-select: none;
}
.prefix,
.suffix {
display: flex;
align-items: center;
position: absolute;
z-index: 1;
top: 0;
padding: 0 12px;
font-size: 1em;
height: v-bind("height + 'px'");
min-width: 16px;
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
pointer-events: none;
&:empty {
display: none;
}
}
.prefix {
left: 0;
padding-right: 6px;
}
.suffix {
right: 0;
padding-left: 6px;
}
.chevron { .chevron {
transition: transform 0.1s ease-out; transition: transform 0.1s ease-out;
} }