diff options
Diffstat (limited to 'packages/frontend/src/components/MkTextarea.vue')
| -rw-r--r-- | packages/frontend/src/components/MkTextarea.vue | 143 |
1 files changed, 69 insertions, 74 deletions
diff --git a/packages/frontend/src/components/MkTextarea.vue b/packages/frontend/src/components/MkTextarea.vue index e8f10ab048..f5e6c71b75 100644 --- a/packages/frontend/src/components/MkTextarea.vue +++ b/packages/frontend/src/components/MkTextarea.vue @@ -1,12 +1,12 @@ <template> -<div class="adhpbeos"> - <div class="label" @click="focus"><slot name="label"></slot></div> - <div class="input" :class="{ disabled, focused, tall, pre }"> +<div> + <div :class="$style.label" @click="focus"><slot name="label"></slot></div> + <div :class="{ [$style.disabled]: disabled, [$style.focused]: focused, [$style.tall]: tall, [$style.pre]: pre }" style="position: relative;"> <textarea ref="inputEl" v-model="v" v-adaptive-border - :class="{ code, _monospace: code }" + :class="[$style.textarea, { [$style.code]: code, _monospace: code }]" :disabled="disabled" :required="required" :readonly="readonly" @@ -20,9 +20,9 @@ @input="onInput" ></textarea> </div> - <div class="caption"><slot name="caption"></slot></div> + <div :class="$style.caption"><slot name="caption"></slot></div> - <MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> + <MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton> </div> </template> @@ -111,87 +111,82 @@ onMounted(() => { }); </script> -<style lang="scss" scoped> -.adhpbeos { - > .label { - font-size: 0.85em; - padding: 0 0 8px 0; - user-select: none; +<style lang="scss" module> +.label { + font-size: 0.85em; + padding: 0 0 8px 0; + user-select: none; - &:empty { - display: none; - } + &:empty { + display: none; } +} - > .caption { - font-size: 0.85em; - padding: 8px 0 0 0; - color: var(--fgTransparentWeak); +.caption { + font-size: 0.85em; + padding: 8px 0 0 0; + color: var(--fgTransparentWeak); - &:empty { - display: none; - } + &:empty { + display: none; } +} - > .input { - position: relative; - - > textarea { - appearance: none; - -webkit-appearance: none; - display: block; - width: 100%; - min-width: 100%; - max-width: 100%; - min-height: 130px; - margin: 0; - padding: 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; - - &:hover { - border-color: var(--inputBorderHover) !important; - } - } +.textarea { + appearance: none; + -webkit-appearance: none; + display: block; + width: 100%; + min-width: 100%; + max-width: 100%; + min-height: 130px; + margin: 0; + padding: 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; - &.focused { - > textarea { - border-color: var(--accent) !important; - } - } + &:hover { + border-color: var(--inputBorderHover) !important; + } +} - &.disabled { - opacity: 0.7; +.focused { + > .textarea { + border-color: var(--accent) !important; + } +} - &, * { - cursor: not-allowed !important; - } - } +.disabled { + opacity: 0.7; + cursor: not-allowed !important; - &.tall { - > textarea { - min-height: 200px; - } - } + > .textarea { + cursor: not-allowed !important; + } +} - &.pre { - > textarea { - white-space: pre; - } - } +.tall { + > .textarea { + min-height: 200px; } +} - > .save { - margin: 8px 0 0 0; +.pre { + > .textarea { + white-space: pre; } } + +.save { + margin: 8px 0 0 0; +} </style> |