Add show code

This commit is contained in:
Jeremy Thomas
2017-10-09 12:27:08 +01:00
parent 5491eb4d8c
commit 02f7b216f1
4 changed files with 182 additions and 28 deletions

View File

@@ -42,6 +42,10 @@
margin-top: -1.5rem
&:not(:last-child)
margin-bottom: 1.5rem
& + .bd-highlight-clipped
margin-top: -1.5rem
&:not(:last-child)
margin-bottom: 1.5rem
// Snippet
.bd-snippet
@@ -210,6 +214,33 @@ $structure-invert: $danger-invert
pre
white-space: pre-wrap
.bd-highlight-clipped
.bd-show
+overlay
align-items: center
background-color: rgba(#000, 0.9)
background-image: linear-gradient(rgba(#000, 0), rgba(#000, 0) 90%, rgba(#000, 1))
border: none
color: $white
cursor: pointer
display: none
font-size: $size-6
justify-content: center
opacity: 0.7
width: 100%
strong
color: currentColor
font-weight: $weight-semibold
&:hover
opacity: 0.8
.highlight.bd-is-clipped
height: 4em
overflow: hidden
pre
overflow: hidden
.bd-show
display: flex
+tablet
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
margin-left: 1.5rem