saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(code): add support for code block folding (#259)

Browse Source
This commit is contained in:
Dillon
2020-04-26 03:25:10 +08:00
committed by GitHub
parent 41a92c6166
commit bcbc4268ea
32 changed files with 351 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
assets/css/_partial/_single/_admonition.scss
View File

@@ -9,23 +9,32 @@
.admonition-title {
margin: 0 -0.75rem;
padding: .2rem .75rem .2rem 1.8rem;
border-bottom: .05rem solid map-get($admonition-background-color-map, 'note');
border-bottom: 1px solid map-get($admonition-background-color-map, 'note');
background-color: map-get($admonition-background-color-map, 'note');
}
.details-summary.admonition-title:hover {
background-color: darken(map-get($admonition-background-color-map, 'note'), 6%);
}
.admonition-content {
margin: .5rem 0;
padding: .5rem 0;
}
i.icon {
font-size: 0.85rem;
color: map-get($admonition-color-map, 'note');
cursor: auto;
position: absolute;
left: .6rem;
top: .6rem;
}
i.details-icon {
position: absolute;
top: .5rem;
right: .5rem;
}
@each $type, $color in $admonition-color-map {
&.#{$type} {
border-left-color: $color;
@@ -44,6 +53,10 @@
border-bottom-color: $color;
background-color: $color;
}
.details-summary.admonition-title:hover {
background-color: darken($color, 6%);
}
}
}
@@ -51,32 +64,3 @@
margin-bottom: .75rem;
}
}
details.admonition {
summary {
display: block;
outline: none;
cursor: pointer;
&::-webkit-details-marker {
display: none;
}
i.details {
position: absolute;
top: .5rem;
right: .5rem;
color: $global-font-color;
.dark & {
color: $global-font-color-dark;
}
}
}
}
details.admonition[open] {
i.details {
@include transform(rotate(180deg));
}
}

159
assets/css/_partial/_single/_code.scss
View File

@@ -1,51 +1,27 @@
code {
display:inline-block;
font-size: $code-font-size;
font-family: $code-font-family;
color: $code-color;
img {
min-height: 1.25em;
max-height: 1.25em;
}
padding: 0 .4rem;
.dark & {
color: $code-color-dark;
}
&:not(.block) {
padding: .2rem .4rem;
}
}
pre {
position: relative;
margin: 0;
padding: .25rem 0 .25rem .5rem;
@include tab-size(4);
.copy-button {
font-size: $code-font-size;
line-height: 1.4em;
position: absolute;
top: 0;
right: 0;
padding: .3rem .5rem;
color: $code-info-color;
background: darken($code-background-color, 3%);
.dark & {
color: $code-info-color-dark;
background: darken($code-background-color-dark, 3%);
}
code {
padding: 0;
}
.copy-button:hover, .copy-button:focus {
cursor: pointer;
color: $global-link-hover-color;
.dark & {
color: $global-link-hover-color-dark;
}
img {
min-height: 1.25em;
max-height: 1.25em;
}
}
@@ -57,41 +33,62 @@ code, pre, .highlight table, .highlight tr, .highlight td {
}
}
.highlight > .chroma, .gist {
table, tr, td {
margin: 0;
padding: 0;
border: none !important;
white-space: nowrap;
.highlight, .gist {
font-family: $code-font-family;
font-size: $code-font-size;
.table-wrapper {
> table,
> table thead,
> table tr,
> table td {
margin: 0;
padding: 0;
border: none !important;
white-space: nowrap;
}
}
}
.highlight > .chroma {
position: relative;
line-height: 1.4em;
margin: .5rem 0;
pre {
position: unset;
}
&::before {
display: block;
padding: .3rem .4rem;
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
font-family: $global-font-family;
font-weight: bold;
color: $code-info-color;
background: darken($code-background-color, 3%);
content: 'Code';
background: darken($code-background-color, 8%);
.dark & {
color: $code-info-color-dark;
background: darken($code-background-color-dark, 3%);
background: darken($code-background-color-dark, 6%);
}
}
@each $type, $text in $code-type-map {
&.#{$type}::before {
content: $text;
&:hover {
cursor: pointer;
}
.code-title {
width: 100%;
padding: .4rem;
}
.code-title::after {
padding-left: .2rem;
content: 'Code';
}
@each $type, $text in $code-type-map {
&.#{$type} .code-title::after {
content: $text;
}
}
}
@@ -124,12 +121,62 @@ code, pre, .highlight table, .highlight tr, .highlight td {
color: $global-font-secondary-color-dark;
}
}
}
.highlight {
font-family: $code-font-family;
font-size: $code-font-size;
line-height: 1.4em;
.arrow {
@include transition(transform 0.2s ease);
}
.ellipses {
padding: .4rem;
}
.copy {
display: none;
padding: .4rem;
&:hover {
cursor: pointer;
color: $global-link-hover-color;
.dark & {
color: $global-link-hover-color-dark;
}
}
}
.table-wrapper {
max-height: 0;
overflow-y: hidden;
@include transition(max-height 0.8s cubic-bezier(0, 1, 0, 1) -0.1s);
}
&.open {
.code-header {
background: darken($code-background-color, 3%);
.dark & {
background: darken($code-background-color-dark, 3%);
}
}
.table-wrapper {
max-height: $MAX_LENGTH;
@include transition(max-height 0.8s cubic-bezier(0.5, 0, 1, 0) 0s);
}
.arrow {
@include transform(rotate(90deg));
}
.ellipses {
display: none;
}
.copy {
display: inline;
}
}
/* Comment */ .c,
/* CommentHashbang */ .ch,
/* CommentMultiline */ .cm,

169
assets/css/_partial/_single/_toc.scss
View File

@@ -1,38 +1,16 @@
#toc-auto {
display: block;
position: absolute;
width: 1000px;
padding: 0 .8rem;
border-left: 1px solid $global-border-color;
overflow-wrap: break-word;
box-sizing: border-box;
top: if($header-normal-mode-desktop, 5rem, 10rem);
left: 10000px;
@include blur;
.dark & {
border-left: 1px solid $global-border-color-dark;
}
.toc {
.toc-title {
font-weight: 400;
margin: .8rem 0;
font-size: $toc-title-font-size;
font-weight: bold;
text-transform: uppercase;
}
.toc-content {
&.always-active ul {
display: block;
}
>nav>ul {
margin: .625rem 0;
}
font-size: $toc-content-font-size;
ul {
text-indent: -0.85rem;
padding-left: .625rem;
padding-left: .8rem;
list-style: none;
a::before {
@@ -47,7 +25,60 @@
}
ul {
padding-left: 1.25rem;
padding-left: 1.5rem;
}
}
}
ruby {
background: $code-background-color;
rt {
color: $global-font-secondary-color;
}
.dark & {
background: $code-background-color-dark;
rt {
color: $global-font-secondary-color-dark;
}
}
}
}
#toc-auto {
display: block;
position: absolute;
width: $MAX_LENGTH;
padding: 0 .8rem;
border-left: 4px solid $global-border-color;
overflow-wrap: break-word;
box-sizing: border-box;
top: if($header-normal-mode-desktop, 5rem, 10rem);
left: $MAX_LENGTH;
@include blur;
.dark & {
border-left: 1px solid $global-border-color-dark;
}
.toc-title {
margin: .8rem 0;
}
.toc-content {
&.always-active ul {
display: block;
}
> nav > ul {
margin: .625rem 0;
}
ul {
ul {
display: none;
}
@@ -79,41 +110,23 @@
display: none;
margin: .8rem 0;
details {
summary {
list-style: none;
background: darken($code-background-color, 3%);
.toc-title {
display: flex;
justify-content: space-between;
line-height: 2em;
padding: 0 .75rem;
background: darken($code-background-color, 3%);
.dark & {
background: darken($code-background-color-dark, 3%);
}
&:hover {
background: darken($code-background-color, 6%);
.dark & {
background: darken($code-background-color-dark, 3%);
background: darken($code-background-color-dark, 5%);
}
.toc-title {
display: block;
display: flex;
justify-content: space-between;
font-weight: bold;
line-height: 2em;
padding: 0 .625rem;
i.details {
line-height: 2em;
}
&:hover {
cursor: pointer;
}
}
&::-webkit-details-marker {
display: none;
}
}
}
details[open] {
i.details {
@include transform(rotate(180deg));
}
}
@@ -122,15 +135,7 @@
> nav > ul {
margin: 0;
padding: .4rem .8rem;
}
ul {
list-style: none;
ul {
padding-left: 1.25rem;
}
padding: .4rem 1rem .4rem 1.8rem;
}
.dark & {
@@ -138,29 +143,3 @@
}
}
}
.toc {
.toc-title {
font-size: $toc-title-font-size;
}
.toc-content {
font-size: $toc-content-font-size;
}
ruby {
background: $code-background-color;
rt {
color: $global-font-secondary-color;
}
.dark & {
background: $code-background-color-dark;
rt {
color: $global-font-secondary-color-dark;
}
}
}
}