add react support into lib

This commit is contained in:
Cory LaViska
2021-11-04 07:27:18 -04:00
parent c88ea6666b
commit a4c9b9c8cf
20 changed files with 652 additions and 237 deletions

View File

@@ -61,11 +61,17 @@
border: solid 1px rgb(var(--sl-color-neutral-200));
border-bottom: none;
border-radius: 0 !important;
margin: 0;
display: none;
}
.code-block--expanded .code-block__source {
.code-block__source pre {
margin: 0;
}
.code-block--expanded.code-block--show-html .code-block__source--html,
.code-block--expanded.code-block--show-react .code-block__source--react,
/* When a code block is expanded but doesn't have a React example, force the HTML example to show */
.code-block--expanded:not(.code-block--has-react) .code-block__source--html {
display: block;
}
@@ -97,6 +103,19 @@
border-right: solid 1px rgb(var(--sl-color-neutral-200));
}
.code-block__button--html,
.code-block__button--react {
width: 70px;
display: flex;
place-items: center;
justify-content: center;
}
.code-block__button--selected {
font-weight: 700;
color: rgb(var(--sl-color-primary-600));
}
.code-block__button--codepen {
display: flex;
place-items: center;