69ef489210
This PR restores the task list presentation removed in 4.8: - Add “task-list-item” class to task list `<li>` elms - Hide list bullets on unordered task lists `<li>` elms It also provides several improvements on the pre-4.8 presentation: - Add “task-list” class to task list `<ul>` elms - Display list numbers on ordered task lists `<li>` elms - Render accessible task list items by wrapping checkbox and text in `<label>` elm - Allow task lists to be nested within standard ordered/unordered lists Please makes sure these boxes are checked before submitting your PR, thank you! * [x] Make sure you are merging your commits to `master` branch. * [x] Add some descriptions and refer relative issues for you PR. * [x] DO NOT include files inside `lib` directory.
467 lines
7.7 KiB
Stylus
467 lines
7.7 KiB
Stylus
*
|
|
-webkit-font-smoothing antialiased
|
|
-webkit-overflow-scrolling touch
|
|
-webkit-tap-highlight-color rgba(0, 0, 0, 0)
|
|
-webkit-text-size-adjust none
|
|
-webkit-touch-callout none
|
|
box-sizing border-box
|
|
|
|
body:not(.ready)
|
|
overflow hidden
|
|
|
|
[data-cloak], .app-nav, > nav
|
|
display none
|
|
|
|
div#app
|
|
font-size 30px
|
|
font-weight lighter
|
|
margin 40vh auto
|
|
text-align center
|
|
|
|
&:empty::before
|
|
content 'Loading...'
|
|
|
|
.emoji
|
|
height 1.2rem
|
|
vertical-align middle
|
|
|
|
.progress
|
|
background-color var(--theme-color, $color-primary)
|
|
height 2px
|
|
left 0px
|
|
position fixed
|
|
right 0px
|
|
top 0px
|
|
transition width 0.2s, opacity 0.4s
|
|
width 0%
|
|
z-index 999999
|
|
|
|
.search a:hover
|
|
color var(--theme-color, $color-primary)
|
|
|
|
.search .search-keyword
|
|
color var(--theme-color, $color-primary)
|
|
font-style normal
|
|
font-weight bold
|
|
|
|
html, body
|
|
height 100%
|
|
|
|
body
|
|
-moz-osx-font-smoothing grayscale
|
|
-webkit-font-smoothing antialiased
|
|
color $color-text
|
|
font-family 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
|
|
font-size 15px
|
|
letter-spacing 0
|
|
margin 0
|
|
overflow-x hidden
|
|
|
|
img
|
|
max-width 100%
|
|
|
|
a[disabled]
|
|
cursor not-allowed
|
|
opacity 0.6
|
|
|
|
kbd
|
|
border solid 1px #ccc
|
|
border-radius 3px
|
|
display inline-block
|
|
font-size 12px !important
|
|
line-height 12px
|
|
margin-bottom 3px
|
|
padding 3px 5px
|
|
vertical-align middle
|
|
|
|
li input[type='checkbox']
|
|
margin 0 0.2em 0.25em 0
|
|
vertical-align middle
|
|
|
|
/* navbar */
|
|
.app-nav
|
|
margin 25px 60px 0 0
|
|
position absolute
|
|
right 0
|
|
text-align right
|
|
z-index 10
|
|
|
|
&.no-badge
|
|
margin-right 25px
|
|
|
|
p
|
|
margin 0
|
|
|
|
> a
|
|
margin 0 1rem
|
|
padding 5px 0
|
|
|
|
ul, li
|
|
display inline-block
|
|
list-style none
|
|
margin 0
|
|
|
|
a
|
|
color inherit
|
|
font-size 16px
|
|
text-decoration none
|
|
transition color 0.3s
|
|
|
|
&:hover
|
|
color var(--theme-color, $color-primary)
|
|
|
|
&.active
|
|
border-bottom 2px solid var(--theme-color, $color-primary)
|
|
color var(--theme-color, $color-primary)
|
|
|
|
/* navbar dropdown */
|
|
li
|
|
display inline-block
|
|
margin 0 1rem
|
|
padding 5px 0
|
|
position relative
|
|
|
|
ul
|
|
background-color #fff
|
|
border 1px solid #ddd
|
|
border-bottom-color #ccc
|
|
border-radius 4px
|
|
box-sizing border-box
|
|
display none
|
|
max-height calc(100vh - 61px)
|
|
overflow-y auto
|
|
padding 10px 0
|
|
position absolute
|
|
right -15px
|
|
text-align left
|
|
top 100%
|
|
white-space nowrap
|
|
|
|
li
|
|
display block
|
|
font-size 14px
|
|
line-height 1rem
|
|
margin 0
|
|
margin 8px 14px
|
|
white-space nowrap
|
|
|
|
a
|
|
display block
|
|
font-size inherit
|
|
margin 0
|
|
padding 0
|
|
|
|
&.active
|
|
border-bottom 0
|
|
|
|
&:hover ul
|
|
display block
|
|
|
|
/* github corner */
|
|
.github-corner
|
|
border-bottom 0
|
|
position fixed
|
|
right 0
|
|
text-decoration none
|
|
top 0
|
|
z-index 1
|
|
|
|
&:hover .octo-arm
|
|
animation octocat-wave 560ms ease-in-out
|
|
|
|
svg
|
|
color $color-bg
|
|
fill var(--theme-color, $color-primary)
|
|
height 80px
|
|
width 80px
|
|
|
|
/* main */
|
|
main
|
|
display block
|
|
position relative
|
|
width 100vw
|
|
height 100%
|
|
z-index 0
|
|
|
|
main.hidden
|
|
display none
|
|
|
|
.anchor
|
|
display inline-block
|
|
text-decoration none
|
|
transition all 0.3s
|
|
|
|
span
|
|
color $color-text
|
|
|
|
&:hover
|
|
text-decoration underline
|
|
|
|
/* sidebar */
|
|
.sidebar
|
|
border-right 1px solid rgba(0, 0, 0, 0.07)
|
|
overflow-y auto
|
|
padding 40px 0 0
|
|
position absolute
|
|
top 0
|
|
bottom 0
|
|
left 0
|
|
transition transform 250ms ease-out
|
|
width $sidebar-width
|
|
z-index 20
|
|
|
|
> h1
|
|
margin 0 auto 1rem
|
|
font-size 1.5rem
|
|
font-weight 300
|
|
text-align center
|
|
|
|
a
|
|
color inherit
|
|
text-decoration none
|
|
|
|
.app-nav
|
|
display block
|
|
position static
|
|
|
|
.sidebar-nav
|
|
line-height 2em
|
|
padding-bottom 40px
|
|
|
|
li.collapse
|
|
.app-sub-sidebar
|
|
display none
|
|
|
|
ul
|
|
margin 0 0 0 15px
|
|
padding 0
|
|
|
|
li > p
|
|
font-weight 700
|
|
margin 0
|
|
|
|
ul, ul li
|
|
list-style none
|
|
|
|
ul li a
|
|
border-bottom none
|
|
display block
|
|
|
|
ul li ul
|
|
padding-left 20px
|
|
|
|
&::-webkit-scrollbar
|
|
width 4px
|
|
|
|
&::-webkit-scrollbar-thumb
|
|
background transparent
|
|
border-radius 4px
|
|
|
|
&:hover::-webkit-scrollbar-thumb
|
|
background rgba(136, 136, 136, 0.4)
|
|
|
|
&:hover::-webkit-scrollbar-track
|
|
background rgba(136, 136, 136, 0.1)
|
|
|
|
/* sidebar toggle */
|
|
.sidebar-toggle
|
|
background-color transparent
|
|
background-color rgba($color-bg, 0.8)
|
|
border 0
|
|
outline none
|
|
padding 10px
|
|
position absolute
|
|
bottom 0
|
|
left 0
|
|
text-align center
|
|
transition opacity 0.3s
|
|
width $sidebar-width - 16px
|
|
z-index 30
|
|
|
|
.sidebar-toggle-button:hover
|
|
opacity 0.4
|
|
|
|
span
|
|
background-color var(--theme-color, $color-primary)
|
|
display block
|
|
margin-bottom 4px
|
|
width 16px
|
|
height 2px
|
|
|
|
body.sticky
|
|
.sidebar, .sidebar-toggle
|
|
position fixed
|
|
|
|
/* main content */
|
|
.content
|
|
padding-top 60px
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
bottom 0
|
|
left $sidebar-width
|
|
transition left 250ms ease
|
|
|
|
/* markdown content found on pages */
|
|
.markdown-section
|
|
margin 0 auto
|
|
max-width 800px
|
|
padding 30px 15px 40px 15px
|
|
position relative
|
|
|
|
> *
|
|
box-sizing border-box
|
|
font-size inherit
|
|
|
|
> :first-child
|
|
margin-top 0 !important
|
|
|
|
.markdown-section hr
|
|
border none
|
|
border-bottom 1px solid #eee
|
|
margin 2em 0
|
|
|
|
.markdown-section iframe
|
|
border 1px solid #eee
|
|
|
|
.markdown-section table
|
|
border-collapse collapse
|
|
border-spacing 0
|
|
display block
|
|
margin-bottom 1rem
|
|
overflow auto
|
|
width 100%
|
|
|
|
.markdown-section th
|
|
border 1px solid #ddd
|
|
font-weight bold
|
|
padding 6px 13px
|
|
|
|
.markdown-section td
|
|
border 1px solid #ddd
|
|
padding 6px 13px
|
|
|
|
.markdown-section tr
|
|
border-top 1px solid #ccc
|
|
|
|
&:nth-child(2n)
|
|
background-color #f8f8f8
|
|
|
|
.markdown-section p.tip
|
|
background-color #f8f8f8
|
|
border-bottom-right-radius 2px
|
|
border-left 4px solid #f66
|
|
border-top-right-radius 2px
|
|
margin 2em 0
|
|
padding 12px 24px 12px 30px
|
|
position relative
|
|
|
|
&:before
|
|
background-color #f66
|
|
border-radius 100%
|
|
color $color-bg
|
|
content '!'
|
|
font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
|
|
font-size 14px
|
|
font-weight bold
|
|
left -12px
|
|
line-height 20px
|
|
position absolute
|
|
height 20px
|
|
width 20px
|
|
text-align center
|
|
top 14px
|
|
|
|
code
|
|
background-color #efefef
|
|
|
|
em
|
|
color $color-text
|
|
|
|
.markdown-section p.warn
|
|
background rgba($color-primary, 0.1)
|
|
border-radius 2px
|
|
padding 1rem
|
|
|
|
.markdown-section ul.task-list > li
|
|
list-style-type none
|
|
|
|
body.close
|
|
.sidebar
|
|
transform translateX(- $sidebar-width)
|
|
|
|
.sidebar-toggle
|
|
width auto
|
|
|
|
.content
|
|
left 0
|
|
|
|
@media print
|
|
.github-corner, .sidebar-toggle, .sidebar, .app-nav
|
|
display none
|
|
|
|
@media screen and (max-width: 768px)
|
|
.github-corner, .sidebar-toggle, .sidebar
|
|
position fixed
|
|
|
|
.app-nav
|
|
margin-top 16px
|
|
|
|
.app-nav li ul
|
|
top 30px
|
|
|
|
main
|
|
height auto
|
|
overflow-x hidden
|
|
|
|
.sidebar
|
|
left - $sidebar-width
|
|
transition transform 250ms ease-out
|
|
|
|
.content
|
|
left 0
|
|
max-width 100vw
|
|
position static
|
|
padding-top 20px
|
|
transition transform 250ms ease
|
|
|
|
.app-nav, .github-corner
|
|
transition transform 250ms ease-out
|
|
|
|
.sidebar-toggle
|
|
background-color transparent
|
|
width auto
|
|
padding 30px 30px 10px 10px
|
|
|
|
body.close
|
|
.sidebar
|
|
transform translateX($sidebar-width)
|
|
|
|
.sidebar-toggle
|
|
background-color rgba($color-bg, 0.8)
|
|
transition 1s background-color
|
|
width $sidebar-width - 16px
|
|
padding 10px
|
|
|
|
.content
|
|
transform translateX($sidebar-width)
|
|
|
|
.app-nav, .github-corner
|
|
display none
|
|
|
|
.github-corner
|
|
&:hover .octo-arm
|
|
animation none
|
|
|
|
.octo-arm
|
|
animation octocat-wave 560ms ease-in-out
|
|
|
|
@keyframes octocat-wave
|
|
0%, 100%
|
|
transform rotate(0)
|
|
|
|
20%, 60%
|
|
transform rotate(-25deg)
|
|
|
|
40%, 80%
|
|
transform rotate(10deg)
|