侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

stylus

Dettan
2022-01-09 / 0 评论 / 0 点赞 / 39 阅读 / 4,291 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
/ 前端 / CSS / stylus
main-color = white
main-hover-color = black

body a
color: main-color;
&:hover { color: main-hover-color; }

body a
color: main-color;
&:hover
color: main-hover-color




<style lang="stylus" scoped>
<style lang="stylus" rel="stylesheet/stylus">
@import 'lib/css/scroll.styl';
@import 'lib/css/halo-editor.styl';
body
  margin: 0;
  padding: 0;
  padding-bottom: 50px;
</style>
<style lang="css" scoped>
.auto-textarea-wrapper {
  height: 100%;
}
</style>
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 1000
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 15px
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-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()

0

评论区