mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add show code
This commit is contained in:
Jeremy Thomas
parent
927f7ebb38
commit
3ac5137192
@ -107,12 +107,24 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const expandEl = '<button class="button is-small bd-expand">Expand</button>';
|
||||
$el.insertAdjacentHTML('beforeend', copyEl);
|
||||
|
||||
<<<<<<< HEAD
|
||||
const $parent = $el.parentNode;
|
||||
if ($parent && $parent.classList.contains('bd-is-more')) {
|
||||
const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
|
||||
$el.insertAdjacentHTML('beforeend', showEl);
|
||||
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||
$el.insertAdjacentHTML('beforeend', expandEl);
|
||||
=======
|
||||
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||
$el.insertAdjacentHTML('beforeend', expandEl);
|
||||
}
|
||||
|
||||
const $parent = $el.parentNode;
|
||||
if ($parent && $parent.className == 'bd-highlight-clipped') {
|
||||
const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
|
||||
$el.classList.add('bd-is-clipped');
|
||||
$el.insertAdjacentHTML('beforeend', showEl);
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
itemsProcessed++;
|
||||
@ -147,7 +159,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
$highlightShows.forEach($el => {
|
||||
$el.addEventListener('click', () => {
|
||||
$el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
|
||||
$el.parentNode.classList.remove('bd-is-clipped');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1179,11 +1179,19 @@ a.has-text-danger:hover, a.has-text-danger:focus {
|
||||
}
|
||||
|
||||
a.box:hover, a.box:focus {
|
||||
<<<<<<< HEAD
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
|
||||
}
|
||||
|
||||
a.box:active {
|
||||
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc;
|
||||
=======
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
|
||||
}
|
||||
|
||||
a.box:active {
|
||||
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.button {
|
||||
@ -1263,7 +1271,11 @@ a.box:active {
|
||||
}
|
||||
|
||||
.button:focus:not(:active), .button.is-focused:not(:active) {
|
||||
<<<<<<< HEAD
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
=======
|
||||
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.button:active, .button.is-active {
|
||||
@ -1876,7 +1888,11 @@ a.box:active {
|
||||
}
|
||||
|
||||
.button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
|
||||
<<<<<<< HEAD
|
||||
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
|
||||
=======
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.button.is-info:active, .button.is-info.is-active {
|
||||
@ -1904,7 +1920,11 @@ a.box:active {
|
||||
background-color: #fff;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
<<<<<<< HEAD
|
||||
color: #209cee;
|
||||
=======
|
||||
color: #3273dc;
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.button.is-info.is-loading:after {
|
||||
@ -1929,9 +1949,15 @@ a.box:active {
|
||||
|
||||
.button.is-info.is-outlined[disabled] {
|
||||
background-color: transparent;
|
||||
<<<<<<< HEAD
|
||||
border-color: #209cee;
|
||||
box-shadow: none;
|
||||
color: #209cee;
|
||||
=======
|
||||
border-color: #3273dc;
|
||||
box-shadow: none;
|
||||
color: #3273dc;
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.button.is-info.is-inverted.is-outlined {
|
||||
@ -2593,8 +2619,13 @@ a.box:active {
|
||||
.textarea.is-focused,
|
||||
.textarea:active,
|
||||
.textarea.is-active {
|
||||
<<<<<<< HEAD
|
||||
border-color: #3273dc;
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
=======
|
||||
border-color: #00d1b2;
|
||||
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.input[disabled],
|
||||
@ -2698,6 +2729,7 @@ a.box:active {
|
||||
.textarea.is-primary:active,
|
||||
.textarea.is-primary.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
|
||||
<<<<<<< HEAD
|
||||
}
|
||||
|
||||
.input.is-link,
|
||||
@ -2711,6 +2743,8 @@ a.box:active {
|
||||
.textarea.is-link:active,
|
||||
.textarea.is-link.is-active {
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
=======
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.input.is-info,
|
||||
@ -2723,7 +2757,11 @@ a.box:active {
|
||||
.textarea.is-info.is-focused,
|
||||
.textarea.is-info:active,
|
||||
.textarea.is-info.is-active {
|
||||
<<<<<<< HEAD
|
||||
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
|
||||
=======
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.input.is-success,
|
||||
@ -2935,8 +2973,13 @@ a.box:active {
|
||||
}
|
||||
|
||||
.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
|
||||
<<<<<<< HEAD
|
||||
border-color: #3273dc;
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
=======
|
||||
border-color: #00d1b2;
|
||||
box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.select select[disabled] {
|
||||
@ -3040,7 +3083,11 @@ a.box:active {
|
||||
}
|
||||
|
||||
.select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active {
|
||||
<<<<<<< HEAD
|
||||
box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
|
||||
=======
|
||||
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
.select.is-success select {
|
||||
@ -3292,7 +3339,11 @@ a.box:active {
|
||||
|
||||
.file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
|
||||
border-color: transparent;
|
||||
<<<<<<< HEAD
|
||||
box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25);
|
||||
=======
|
||||
box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
|
||||
>>>>>>> Add show code
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -4869,7 +4920,11 @@ a.tag:hover {
|
||||
|
||||
.breadcrumb a {
|
||||
align-items: center;
|
||||
<<<<<<< HEAD
|
||||
color: #3273dc;
|
||||
=======
|
||||
color: #7a7a7a;
|
||||
>>>>>>> Add show code
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5em 0.75em;
|
||||
@ -8992,6 +9047,7 @@ label.panel-block:hover {
|
||||
}
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
.hero.is-info {
|
||||
@ -9015,6 +9071,12 @@ label.panel-block:hover {
|
||||
>>>>>>> Add show code
|
||||
.hero.is-link {
|
||||
>>>>>>> Add link color
|
||||
=======
|
||||
.hero.is-link {
|
||||
=======
|
||||
.hero.is-info {
|
||||
>>>>>>> Add show code
|
||||
>>>>>>> Add show code
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
}
|
||||
@ -9038,11 +9100,16 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
<<<<<<< HEAD
|
||||
.hero.is-link .navbar-menu {
|
||||
=======
|
||||
.hero.is-info .navbar-menu {
|
||||
>>>>>>> Add show code
|
||||
background-color: #3273dc;
|
||||
}
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.hero.is-link .navbar-item,
|
||||
.hero.is-link .navbar-link {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
@ -9051,6 +9118,16 @@ label.panel-block:hover {
|
||||
.hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active,
|
||||
.hero.is-link .navbar-link:hover,
|
||||
.hero.is-link .navbar-link.is-active {
|
||||
=======
|
||||
.hero.is-info .navbar-item,
|
||||
.hero.is-info .navbar-link {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active,
|
||||
.hero.is-info .navbar-link:hover,
|
||||
.hero.is-info .navbar-link.is-active {
|
||||
>>>>>>> Add show code
|
||||
background-color: #2366d1;
|
||||
color: #fff;
|
||||
}
|
||||
@ -9087,11 +9164,16 @@ label.panel-block:hover {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
<<<<<<< HEAD
|
||||
.hero.is-link.is-bold .navbar-menu {
|
||||
=======
|
||||
.hero.is-info.is-bold .navbar-menu {
|
||||
>>>>>>> Add show code
|
||||
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
|
||||
}
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.hero.is-info {
|
||||
background-color: #209cee;
|
||||
color: #fff;
|
||||
@ -9220,6 +9302,8 @@ label.panel-block:hover {
|
||||
}
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> Add show code
|
||||
.hero.is-success {
|
||||
background-color: #23d160;
|
||||
color: #fff;
|
||||
@ -10710,6 +10794,14 @@ html.route-index #carbon {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-example + .bd-highlight-clipped {
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
||||
.bd-example + .bd-highlight-clipped:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-snippet {
|
||||
border: 1px solid #ffdd57;
|
||||
margin-top: 2rem;
|
||||
@ -10811,6 +10903,7 @@ html.route-index #carbon {
|
||||
>>>>>>> Add variables data
|
||||
align-items: stretch;
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
>>>>>>> Add love data
|
||||
=======
|
||||
border-radius: 5px;
|
||||
@ -10843,6 +10936,12 @@ html.route-index #carbon {
|
||||
>>>>>>> Use link instead of primary
|
||||
=======
|
||||
>>>>>>> Add variables data
|
||||
=======
|
||||
border-radius: 5px;
|
||||
border-top-left-radius: 0;
|
||||
=======
|
||||
>>>>>>> Add show code
|
||||
>>>>>>> Add show code
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -10870,6 +10969,7 @@ html.route-index #carbon {
|
||||
=======
|
||||
align-items: stretch;
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
>>>>>>> Use link instead of primary
|
||||
=======
|
||||
-webkit-box-align: stretch;
|
||||
@ -10926,6 +11026,11 @@ html.route-index #carbon {
|
||||
>>>>>>> Use link instead of primary
|
||||
=======
|
||||
>>>>>>> Add variables data
|
||||
=======
|
||||
border-radius: 0 5px 5px 0;
|
||||
=======
|
||||
>>>>>>> Add show code
|
||||
>>>>>>> Add show code
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -11129,6 +11234,47 @@ html.route-index #carbon {
|
||||
}
|
||||
}
|
||||
|
||||
.bd-highlight-clipped .bd-show {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
background-image: linear-gradient(transparent, transparent 90%, black);
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 1rem;
|
||||
justify-content: center;
|
||||
opacity: 0.7;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bd-highlight-clipped .bd-show strong {
|
||||
color: currentColor;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bd-highlight-clipped .bd-show:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.bd-highlight-clipped .highlight.bd-is-clipped {
|
||||
height: 4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bd-highlight-clipped .highlight.bd-is-clipped pre {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bd-highlight-clipped .highlight.bd-is-clipped .bd-show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth) {
|
||||
margin-left: 1.5rem;
|
||||
@ -11259,11 +11405,19 @@ html.route-index #carbon {
|
||||
}
|
||||
|
||||
#_default_ > a:hover, #_default_ > a:focus {
|
||||
<<<<<<< HEAD
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
|
||||
}
|
||||
|
||||
#_default_ > a:active {
|
||||
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc;
|
||||
=======
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
|
||||
}
|
||||
|
||||
#_default_ > a:active {
|
||||
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
#_default_ > a span {
|
||||
@ -11477,9 +11631,12 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
=======
|
||||
>>>>>>> Use link instead of primary
|
||||
=======
|
||||
>>>>>>> Add show code
|
||||
align-items: center;
|
||||
display: none;
|
||||
=======
|
||||
@ -11492,6 +11649,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
=======
|
||||
align-items: center;
|
||||
>>>>>>> Add show code
|
||||
display: flex;
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
|
||||
@ -111,6 +111,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> Add show code
|
||||
var $parent = $el.parentNode;
|
||||
if ($parent && $parent.classList.contains('bd-is-more')) {
|
||||
var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
|
||||
@ -122,6 +125,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
$el.insertAdjacentHTML('beforeend', expandEl);
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
>>>>>>> Improve snippet
|
||||
var $parent = $el.parentNode;
|
||||
@ -134,6 +138,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||
$el.insertAdjacentHTML('beforeend', expandEl);
|
||||
>>>>>>> Improve snippet
|
||||
=======
|
||||
var $parent = $el.parentNode;
|
||||
if ($parent && $parent.className == 'bd-highlight-clipped') {
|
||||
var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
|
||||
$el.classList.add('bd-is-clipped');
|
||||
$el.insertAdjacentHTML('beforeend', showEl);
|
||||
>>>>>>> Add show code
|
||||
>>>>>>> Add show code
|
||||
}
|
||||
|
||||
itemsProcessed++;
|
||||
@ -164,6 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
});
|
||||
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
<<<<<<< HEAD
|
||||
var $highlightShows = getAll('.highlight .bd-show');
|
||||
@ -179,12 +192,24 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
$el.parentNode.classList.remove('bd-is-clipped');
|
||||
>>>>>>> Add show code
|
||||
=======
|
||||
=======
|
||||
>>>>>>> Add show code
|
||||
var $highlightShows = getAll('.highlight .bd-show');
|
||||
|
||||
$highlightShows.forEach(function ($el) {
|
||||
$el.addEventListener('click', function () {
|
||||
$el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
|
||||
<<<<<<< HEAD
|
||||
>>>>>>> Improve snippet
|
||||
=======
|
||||
=======
|
||||
var $highlightShows = getAll('.bd-highlight-clipped .bd-show');
|
||||
|
||||
$highlightShows.forEach(function ($el) {
|
||||
$el.addEventListener('click', function () {
|
||||
$el.parentNode.classList.remove('bd-is-clipped');
|
||||
>>>>>>> Add show code
|
||||
>>>>>>> Add show code
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user