yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨

Browse source
This commit is contained in:
syuilo 2018-09-02 17:56:20 +09:00
parent f6217d96d2
commit f94992abbe
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/client/app/common/views/components/menu.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-menu"> <div class="onchrpzrvnoruiaenfcqvccjfuupzzwv">
<div class="backdrop" ref="backdrop" @click="close"></div> <div class="backdrop" ref="backdrop" @click="close"></div>
<div class="popover" :class="{ hukidasi }" ref="popover"> <div class="popover" :class="{ hukidasi }" ref="popover">
<template v-for="item in items"> <template v-for="item in items">
@ -119,9 +119,10 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
root(isDark)
$bg-color = isDark ? #2c303c : #fff
$border-color = rgba(27, 31, 35, 0.15) $border-color = rgba(27, 31, 35, 0.15)
.mk-menu
position initial position initial
> .backdrop > .backdrop
@ -131,14 +132,14 @@ $border-color = rgba(27, 31, 35, 0.15)
z-index 10000 z-index 10000
width 100% width 100%
height 100% height 100%
background rgba(#000, 0.1) background rgba(#000, isDark ? 0.5 : 0.1)
opacity 0 opacity 0
> .popover > .popover
position absolute position absolute
z-index 10001 z-index 10001
padding 8px 0 padding 8px 0
background #fff background $bg-color
border 1px solid $border-color border 1px solid $border-color
border-radius 4px border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15) box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
@ -172,12 +173,13 @@ $border-color = rgba(27, 31, 35, 0.15)
border-top solid $balloon-size transparent border-top solid $balloon-size transparent
border-left solid $balloon-size transparent border-left solid $balloon-size transparent
border-right solid $balloon-size transparent border-right solid $balloon-size transparent
border-bottom solid $balloon-size #fff border-bottom solid $balloon-size $bg-color
> button > button
display block display block
padding 8px 16px padding 8px 16px
width 100% width 100%
color isDark ? #d6dce2 : #111
&:hover &:hover
color $theme-color-foreground color $theme-color-foreground
@ -191,6 +193,12 @@ $border-color = rgba(27, 31, 35, 0.15)
> div > div
margin 8px 0 margin 8px 0
height 1px height 1px
background #eee background isDark ? #1c2023 : #eee
.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
root(true)
.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
root(false)
</style> </style>