mavon-editor
Version:
Vue markdown editor
298 lines (294 loc) • 7.38 kB
text/stylus
border-color = 1px solid #F2F6FC
op-height = 40px
textarea:disabled
background-color #ffffff
/* 路由内容 */
.v-note-wrapper
position relative
min-width 300px
min-height 300px
display flex
flex-direction column
background-color #fff
z-index 1500
text-align left
border border-color
border-radius 4px
&.fullscreen
position fixed
left 0
right 0
bottom 0
top 0
margin 0
height auto
z-index 1501
.v-note-op
padding 1px
width 100%
display flex
white-space pre-line
flex none
min-height op-height
user-select none
border-bottom border-color
border-radius 4px 4px 0 0
background-color #fff
z-index 1
.v-left-item, .v-right-item
flex 1
min-height op-height
box-sizing border-box
.op-icon-divider
height op-height
border-left 1px solid #e5e5e5
margin 0 6px 0 4px
.op-icon
box-sizing border-box
display inline-block
cursor pointer
height 28px
width 28px
margin 6px 0 5px 0px
font-size 14px
padding 4.5px 6px 5px 3.5px
color #757575
border-radius 5px
text-align center
background none
border none
outline none
line-height 1
//vertical-align middle
&.dropdown-wrapper
line-height 18px
&.selected
color rgba(0, 0, 0, 0.8)
background #eaeaea
&:hover
color rgba(0, 0, 0, 0.8)
background #e9e9eb
&.transition
.op-icon
transition all 0.2s linear 0s
.v-right-item
text-align right
padding-right 6px
max-width 30%
.v-left-item
text-align left
padding-left 6px
.v-note-panel
position relative
border-top none
display flex
flex 1
width 100%
box-sizing border-box
overflow hidden
.v-note-edit.divarea-wrapper
flex 0 0 50%
width 50%
padding 0
overflow-y scroll
overflow-x hidden
box-sizing border-box
cursor text
border-bottom-left-radius: 4px;
scrollbar()
&.transition
transition all 0.2s linear 0s
&.single-edit
width 100%
flex 0 0 100%
overflow-y auto
&.single-show
width 0
flex 0 0 0
display none
.content-div
width 100%
padding 20px 25px
box-sizing border-box
outline 0 none
border none !important
color #2c3e50
font-size 16px
.content-input-wrapper
width 100%
padding 8px 25px 15px 25px
.v-note-show
flex 0 0 50%
width 50%
overflow-y auto
padding 0 0
transition all 0.2s linear 0s
&.single-show
flex 0 0 100%
width 100%
.v-show-content, .v-show-content-html
width 100%
height 100%
padding 8px 25px 15px 25px
overflow-y auto
box-sizing border-box
overflow-x hidden
scrollbar()
.v-note-navigation-wrapper
display flex
position absolute
width 250px
right 0
top 0
bottom 0
height 100%
flex-direction column
background-color rgba(255,255,255,0.98)
border-left border-color
border-right border-color
&.transition
transition all 0.1s linear 0s
@media only screen and (max-width 768px)
width 50%
&.slideTop-enter-active, &.slideTop-leave-active
height 100%
&.slideTop-enter, &.slideTop-leave-active
height 0
.v-note-navigation-title
height 50px
width 100%
border-bottom border-color
flex none
line-height @height
font-size 16px
box-sizing border-box
padding 0 12px 0 18px
.v-note-navigation-close
float right
color #606266
font-size 18px
cursor pointer
&:hover
color #303133
.v-note-navigation-content
overflow-y auto
flex 1
scrollbar()
padding 8px 0
h1, h2, h3, h4, h5, h6
margin 2px 0
font-weight 500
font-size 17px
color #2185d0
cursor pointer
line-height normal
overflow hidden
text-overflow ellipsis
white-space nowrap
padding 0 12px
border-bottom none
&:hover
color #483D8B
text-decoration-line underline
h2
padding-left 27px
font-size 17px
h3
padding-left 42px
font-size 17px
h4
padding-left 58px
font-size 15px
h5
padding-left 72px
font-size 15px
h6
padding-left 87px
font-size 15px
.v-note-read-model
position relative
display none
width 100%
height 100%
background #fbfbfb
padding 30px 8% 50px 8%
overflow-y auto
scrollbar()
box-sizing border-box
&.show
display block
&.shadow
border none
// box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1)
.v-note-help-wrapper
position fixed
left 0
right 0
top 0
bottom 0
background rgba(0, 0, 0, 0.7)
z-index 1600
transition all 0.1s linear 0s
&.fade-enter-active, &.fade-leave-active
opacity 1
&.fade-enter, &.fade-leave-active
opacity 0
.v-note-help-content
position relative
width 60%
max-width 800px
margin 30px auto
height 90%
min-width 320px
transition all 0.1s linear 0s
z-index 3
border border-color
&.shadow
border none
box-shadow 0 0px 5px rgba(0, 0, 0, .156863), 0 0px 5px rgba(0, 0, 0, .227451)
i
font-size 28px
position absolute
right 15px
top 8px
color rgba(0, 0, 0, 0.7)
cursor pointer
&:hover
color rgba(0, 0, 0, 1)
.v-note-help-show
width 100%
height 100%
font-size 18px
background #fbfbfb
overflow-y auto
padding 2% 6%
scrollbar()
.v-note-img-wrapper
position fixed
display flex
justify-content center
align-items center
left 0
right 0
top 0
bottom 0
background rgba(0, 0, 0, 0.7)
z-index 1600
transition all 0.1s linear 0s
&.fade-enter-active, &.fade-leave-active
opacity 1
&.fade-enter, &.fade-leave-active
opacity 0
img
flex 0 0 auto
z-index 3
i
font-size 28px
position absolute
right 15px
top 8px
color rgba(255, 255, 255, 0.7)
cursor pointer
&:hover
color rgba(255, 255, 255, 1)
align()