</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
\ No newline at end of file
+</tr>
-<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>
$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) {
}
});
- 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');
$(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;
}
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) {
}
function addHighlightControls() {
- const $highlightButtons = getAll('.highlight .copy, .highlight .expand');
+ const $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
$highlightButtons.forEach($el => {
$el.addEventListener('mouseenter', () => {
});
});
- const $highlightExpands = getAll('.highlight .expand');
+ const $highlightExpands = getAll('.highlight .bd-expand');
$highlightExpands.forEach($el => {
$el.addEventListener('click', () => {
});
}
- new Clipboard('.copy', {
+ new Clipboard('.bd-copy', {
target: function(trigger) {
return trigger.previousSibling;
}
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
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
.highlight
position: relative
- .copy,
- .expand
+ .bd-copy,
+ .bd-expand
+unselectable
background: $white
border: solid $border
&:hover
border-color: $code
color: $code
- .expand
+ .bd-expand
border-right-width: 1px
right: 50px
+tablet
position: relative;
}
-.highlight .copy,
-.highlight .expand {
+.highlight .bd-copy,
+.highlight .bd-expand {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
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;
}
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;
}
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;
$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) {
}
});
- 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');
$(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;
}
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) {
}
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 () {
});
});
- var $highlightExpands = getAll('.highlight .expand');
+ var $highlightExpands = getAll('.highlight .bd-expand');
$highlightExpands.forEach(function ($el) {
$el.addEventListener('click', function () {
});
}
- new Clipboard('.copy', {
+ new Clipboard('.bd-copy', {
target: function target(trigger) {
return trigger.previousSibling;
}