Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-11-17 07:49:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

manage border and rounded corner around page break

Browse source
This commit is contained in:
jasongao97 2024-02-07 18:10:56 +08:00
parent a54aa676f9
commit 2b0779f37e
2 changed files with 16 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
magicbook/stylesheets/components/callout.scss
View file

@ -83,16 +83,13 @@ div[data-type='example'] {
& + .codesplit {
margin-top: 0;
.pair {
border-left: 1pt solid black;
border-right: 1pt solid black;
}
.pair:first-child {
.pairs {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.pair:last-child {
border-bottom: 1pt solid black;
border: 1pt solid black;
border-top: none;
}
}

25
magicbook/stylesheets/components/codesplit.scss
View file

@ -1,9 +1,10 @@
.snip-above > .codesplit {
position: relative;
.pair:first-child {
.pairs {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top: 1px dashed $color-gray-200;
}
&::before {
@ -14,19 +15,15 @@
width: 10pt;
height: 10pt;
}
border-top: 1px dashed $color-gray-200;
}
.snip-below > .codesplit {
position: relative;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
.pair:last-child {
.pairs {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom: 1px dashed $color-gray-200;
}
&::after {
@ -37,8 +34,6 @@
width: 10pt;
height: 10pt;
}
border-bottom: 1px dashed $color-gray-200;
}
.codesplit {
@ -46,23 +41,25 @@
margin-bottom: 12pt;
clear: both;
.pairs {
background: $color-gray-100;
border-radius: $rounded-radius;
overflow: hidden;
box-decoration-break: slice;
}
.pair {
display: flex;
flex-wrap: wrap-reverse;
justify-content: space-between;
padding: 0 5mm;
background: $color-gray-100;
&:first-child {
padding-top: 4pt;
border-top-right-radius: $rounded-radius;
border-top-left-radius: $rounded-radius;
}
&:last-child {
padding-bottom: 4pt;
border-bottom-right-radius: $rounded-radius;
border-bottom-left-radius: $rounded-radius;
}
code {