Fix copy and expand

This commit is contained in:
Jeremy Thomas 2017-08-14 12:58:21 +01:00
parent cd2f886df2
commit 74146af03f
9 changed files with 72 additions and 72 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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

View file

@ -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

View file

@ -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;

View file

@ -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;
}

View file

@ -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;
}