diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-02-24 02:46:09 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-02-24 02:46:09 +0900 |
| commit | df8a2aea358ca3bcec60c878a6399df46390e3e1 (patch) | |
| tree | 2e187e34a53d9372a797fb9d5882069545f1f03f /src/web/app/mobile/views/components/widget-container.vue | |
| parent | v3840 (diff) | |
| download | misskey-df8a2aea358ca3bcec60c878a6399df46390e3e1.tar.gz misskey-df8a2aea358ca3bcec60c878a6399df46390e3e1.tar.bz2 misskey-df8a2aea358ca3bcec60c878a6399df46390e3e1.zip | |
Implement #1098
Diffstat (limited to 'src/web/app/mobile/views/components/widget-container.vue')
| -rw-r--r-- | src/web/app/mobile/views/components/widget-container.vue | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/src/web/app/mobile/views/components/widget-container.vue b/src/web/app/mobile/views/components/widget-container.vue new file mode 100644 index 0000000000..1775188a93 --- /dev/null +++ b/src/web/app/mobile/views/components/widget-container.vue @@ -0,0 +1,65 @@ +<template> +<div class="mk-widget-container" :class="{ naked }"> + <header v-if="showHeader"> + <div class="title"><slot name="header"></slot></div> + <slot name="func"></slot> + </header> + <slot></slot> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: { + showHeader: { + type: Boolean, + default: true + }, + naked: { + type: Boolean, + default: false + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-widget-container + background #eee + border-radius 8px + box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2) + overflow hidden + + &.naked + background transparent !important + border none !important + + > header + > .title + margin 0 + padding 8px 10px + font-size 15px + font-weight normal + color #465258 + background #fff + border-radius 8px 8px 0 0 + + > [data-fa] + margin-right 6px + + &:empty + display none + + > button + position absolute + z-index 2 + top 0 + right 0 + padding 0 + width 42px + height 100% + font-size 15px + color #465258 + +</style> |