feat(docs) improvements to examples

* examples are now loaded only when they are visible on your screen
* stylistic improvements
* support for a description
This commit is contained in:
Themba Dube
2021-06-18 12:25:49 -04:00
parent 7c1eb00645
commit 4b8c73a577
7 changed files with 92 additions and 380 deletions

View File

@@ -19,7 +19,7 @@ span.pre:first-child
code.sig-name
{
//margin-left:8px;
/*margin-left:8px;*/
}
.toggle .header {
@@ -64,11 +64,42 @@ code.sig-name
transform: translate(0, -10px);
}
.lv-example {
.lv-example, .lv-example > iframe {
border: none;
outline: none;
padding: none;
display: block;
width: 320px;
height: 240px;
flex: none;
position: relative;
}
.lv-example > iframe {
position: absolute;
top: 0;
left: 0;
}
.lv-example-container {
display: flex;
}
.lv-example-description {
flex: 1 1 auto;
}
.lv-example-link-button {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
background-color: #2980b9;
color: white;
margin: 0 4px;
}
.lv-example-link-button:hover {
color: white;
filter: brightness(120%);
}
.lv-example-link-button:visited {
color: white;
}