Fix copy and expand
This commit is contained in:
parent
cd2f886df2
commit
74146af03f
9 changed files with 72 additions and 72 deletions
|
@ -29,12 +29,12 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/grid/tiles/">
|
||||
tile
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -44,12 +44,12 @@
|
|||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/form/general/">
|
||||
field
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -126,12 +126,12 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/form/select/">
|
||||
select
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -160,12 +160,12 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/form/file/">
|
||||
file
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -187,12 +187,12 @@
|
|||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/elements/box/">
|
||||
box
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -209,12 +209,12 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/elements/content/">
|
||||
content
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -351,20 +351,20 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="http://getbootstrap.com/css/#type-lists" target="_blank">
|
||||
lists
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="http://getbootstrap.com/css/#caret" target="_blank">
|
||||
caret
|
||||
</a>
|
||||
|
@ -388,12 +388,12 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/components/card/">
|
||||
card
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -410,20 +410,20 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/components/level/">
|
||||
level
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="http://getbootstrap.com/components/#list-group" target="_blank">
|
||||
list group
|
||||
</a>
|
||||
|
@ -442,12 +442,12 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/components/menu/">
|
||||
menu
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -488,10 +488,10 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="http://getbootstrap.com/components/#page-header" target="_blank">
|
||||
page header
|
||||
</a>
|
||||
|
@ -510,12 +510,12 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/components/panel/">
|
||||
panel
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -532,10 +532,10 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
–
|
||||
</td>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="http://getbootstrap.com/components/#wells" target="_blank">
|
||||
wells
|
||||
</a>
|
||||
|
@ -571,22 +571,22 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/layout/section/">
|
||||
section
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-unique">
|
||||
<td class="bd-is-unique">
|
||||
<a href="{{ site.url }}/documentation/layout/footer/">
|
||||
footer
|
||||
</a>
|
||||
</td>
|
||||
<td class="is-empty">
|
||||
<td class="bd-is-empty">
|
||||
<span>–</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<article class="media bd-pro is-{{ include.type }}">
|
||||
<article class="media bd-pro bd-is-{{ include.type }}">
|
||||
<aside class="media-left">
|
||||
<span class="icon">
|
||||
<i class="fa fa-{{ include.icon }}"></i>
|
||||
|
|
|
@ -35,8 +35,8 @@ jQuery(document).ready(function ($) {
|
|||
|
||||
$highlights.each(function() {
|
||||
var $el = $(this);
|
||||
var copy = '<button class="copy">Copy</button>';
|
||||
var expand = '<button class="expand">Expand</button>';
|
||||
var copy = '<button class="bd-copy">Copy</button>';
|
||||
var expand = '<button class="bd-expand">Expand</button>';
|
||||
$el.append(copy);
|
||||
|
||||
if ($el.find('pre code').innerHeight() > 600) {
|
||||
|
@ -44,7 +44,7 @@ jQuery(document).ready(function ($) {
|
|||
}
|
||||
});
|
||||
|
||||
var $highlightButtons = $('.highlight .copy, .highlight .expand');
|
||||
var $highlightButtons = $('.highlight .bd-copy, .highlight .bd-expand');
|
||||
|
||||
$highlightButtons.hover(function() {
|
||||
$(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
|
||||
|
@ -52,11 +52,11 @@ jQuery(document).ready(function ($) {
|
|||
$(this).parent().css('box-shadow', 'none');
|
||||
});
|
||||
|
||||
$('.highlight .expand').click(function() {
|
||||
$('.highlight .bd-expand').click(function() {
|
||||
$(this).parent().children('pre').css('max-height', 'none');
|
||||
});
|
||||
|
||||
new Clipboard('.copy', {
|
||||
new Clipboard('.bd-copy', {
|
||||
target: function(trigger) {
|
||||
return trigger.previousSibling;
|
||||
}
|
||||
|
|
|
@ -103,8 +103,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
if ($highlights.length > 0) {
|
||||
$highlights.forEach($el => {
|
||||
const copy = '<button class="copy">Copy</button>';
|
||||
const expand = '<button class="expand">Expand</button>';
|
||||
const copy = '<button class="bd-copy">Copy</button>';
|
||||
const expand = '<button class="bd-expand">Expand</button>';
|
||||
$el.insertAdjacentHTML('beforeend', copy);
|
||||
|
||||
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||
|
@ -119,7 +119,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
}
|
||||
|
||||
function addHighlightControls() {
|
||||
const $highlightButtons = getAll('.highlight .copy, .highlight .expand');
|
||||
const $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
|
||||
|
||||
$highlightButtons.forEach($el => {
|
||||
$el.addEventListener('mouseenter', () => {
|
||||
|
@ -131,7 +131,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
});
|
||||
|
||||
const $highlightExpands = getAll('.highlight .expand');
|
||||
const $highlightExpands = getAll('.highlight .bd-expand');
|
||||
|
||||
$highlightExpands.forEach($el => {
|
||||
$el.addEventListener('click', () => {
|
||||
|
@ -140,7 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
}
|
||||
|
||||
new Clipboard('.copy', {
|
||||
new Clipboard('.bd-copy', {
|
||||
target: function(trigger) {
|
||||
return trigger.previousSibling;
|
||||
}
|
||||
|
|
|
@ -46,11 +46,11 @@ $bootstrap-invert: #fff
|
|||
p:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.bd-pro.is-bulma
|
||||
.bd-pro.bd-is-bulma
|
||||
.icon
|
||||
color: $primary
|
||||
|
||||
.bd-pro.is-bootstrap
|
||||
.bd-pro.bd-is-bootstrap
|
||||
.icon
|
||||
color: $bootstrap
|
||||
|
||||
|
@ -85,10 +85,10 @@ $bootstrap-invert: #fff
|
|||
color: currentColor
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
.is-empty
|
||||
.bd-is-empty
|
||||
background-color: $background
|
||||
color: $text-light
|
||||
.is-unique
|
||||
.bd-is-unique
|
||||
background-color: rgba($green, 0.25)
|
||||
color: $text-strong
|
||||
font-weight: $weight-bold
|
||||
|
|
|
@ -91,8 +91,8 @@ $structure-invert: $danger-invert
|
|||
|
||||
.highlight
|
||||
position: relative
|
||||
.copy,
|
||||
.expand
|
||||
.bd-copy,
|
||||
.bd-expand
|
||||
+unselectable
|
||||
background: $white
|
||||
border: solid $border
|
||||
|
@ -106,7 +106,7 @@ $structure-invert: $danger-invert
|
|||
&:hover
|
||||
border-color: $code
|
||||
color: $code
|
||||
.expand
|
||||
.bd-expand
|
||||
border-right-width: 1px
|
||||
right: 50px
|
||||
+tablet
|
||||
|
|
|
@ -9514,8 +9514,8 @@ html.route-index #carbon {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.highlight .copy,
|
||||
.highlight .expand {
|
||||
.highlight .bd-copy,
|
||||
.highlight .bd-expand {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
@ -9532,13 +9532,13 @@ html.route-index #carbon {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.highlight .copy:hover,
|
||||
.highlight .expand:hover {
|
||||
.highlight .bd-copy:hover,
|
||||
.highlight .bd-expand:hover {
|
||||
border-color: #ff3860;
|
||||
color: #ff3860;
|
||||
}
|
||||
|
||||
.highlight .expand {
|
||||
.highlight .bd-expand {
|
||||
border-right-width: 1px;
|
||||
right: 50px;
|
||||
}
|
||||
|
@ -10299,11 +10299,11 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.bd-pro.is-bulma .icon {
|
||||
.bd-pro.bd-is-bulma .icon {
|
||||
color: #00d1b2;
|
||||
}
|
||||
|
||||
.bd-pro.is-bootstrap .icon {
|
||||
.bd-pro.bd-is-bootstrap .icon {
|
||||
color: #6f5499;
|
||||
}
|
||||
|
||||
|
@ -10354,12 +10354,12 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bd-comparison .table .is-empty {
|
||||
.bd-comparison .table .bd-is-empty {
|
||||
background-color: whitesmoke;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.bd-comparison .table .is-unique {
|
||||
.bd-comparison .table .bd-is-unique {
|
||||
background-color: rgba(35, 209, 96, 0.25);
|
||||
color: #363636;
|
||||
font-weight: 700;
|
||||
|
|
|
@ -37,8 +37,8 @@ jQuery(document).ready(function ($) {
|
|||
|
||||
$highlights.each(function () {
|
||||
var $el = $(this);
|
||||
var copy = '<button class="copy">Copy</button>';
|
||||
var expand = '<button class="expand">Expand</button>';
|
||||
var copy = '<button class="bd-copy">Copy</button>';
|
||||
var expand = '<button class="bd-expand">Expand</button>';
|
||||
$el.append(copy);
|
||||
|
||||
if ($el.find('pre code').innerHeight() > 600) {
|
||||
|
@ -46,7 +46,7 @@ jQuery(document).ready(function ($) {
|
|||
}
|
||||
});
|
||||
|
||||
var $highlightButtons = $('.highlight .copy, .highlight .expand');
|
||||
var $highlightButtons = $('.highlight .bd-copy, .highlight .bd-expand');
|
||||
|
||||
$highlightButtons.hover(function () {
|
||||
$(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
|
||||
|
@ -54,11 +54,11 @@ jQuery(document).ready(function ($) {
|
|||
$(this).parent().css('box-shadow', 'none');
|
||||
});
|
||||
|
||||
$('.highlight .expand').click(function () {
|
||||
$('.highlight .bd-expand').click(function () {
|
||||
$(this).parent().children('pre').css('max-height', 'none');
|
||||
});
|
||||
|
||||
new Clipboard('.copy', {
|
||||
new Clipboard('.bd-copy', {
|
||||
target: function target(trigger) {
|
||||
return trigger.previousSibling;
|
||||
}
|
||||
|
|
|
@ -105,8 +105,8 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
if ($highlights.length > 0) {
|
||||
$highlights.forEach(function ($el) {
|
||||
var copy = '<button class="copy">Copy</button>';
|
||||
var expand = '<button class="expand">Expand</button>';
|
||||
var copy = '<button class="bd-copy">Copy</button>';
|
||||
var expand = '<button class="bd-expand">Expand</button>';
|
||||
$el.insertAdjacentHTML('beforeend', copy);
|
||||
|
||||
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||
|
@ -121,7 +121,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
}
|
||||
|
||||
function addHighlightControls() {
|
||||
var $highlightButtons = getAll('.highlight .copy, .highlight .expand');
|
||||
var $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
|
||||
|
||||
$highlightButtons.forEach(function ($el) {
|
||||
$el.addEventListener('mouseenter', function () {
|
||||
|
@ -133,7 +133,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
});
|
||||
});
|
||||
|
||||
var $highlightExpands = getAll('.highlight .expand');
|
||||
var $highlightExpands = getAll('.highlight .bd-expand');
|
||||
|
||||
$highlightExpands.forEach(function ($el) {
|
||||
$el.addEventListener('click', function () {
|
||||
|
@ -142,7 +142,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
});
|
||||
}
|
||||
|
||||
new Clipboard('.copy', {
|
||||
new Clipboard('.bd-copy', {
|
||||
target: function target(trigger) {
|
||||
return trigger.previousSibling;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue