Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix copy and expand

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/_includes/comparison.html
View File

@@ -29,12 +29,12 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/grid/tiles/"> <a href="{{ site.url }}/documentation/grid/tiles/">
tile tile
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -44,12 +44,12 @@
</th> </th>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/form/general/"> <a href="{{ site.url }}/documentation/form/general/">
field field
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -126,12 +126,12 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/form/select/"> <a href="{{ site.url }}/documentation/form/select/">
select select
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -160,12 +160,12 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/form/file/"> <a href="{{ site.url }}/documentation/form/file/">
file file
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -187,12 +187,12 @@
</th> </th>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/elements/box/"> <a href="{{ site.url }}/documentation/elements/box/">
box box
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -209,12 +209,12 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/elements/content/"> <a href="{{ site.url }}/documentation/elements/content/">
content content
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -351,20 +351,20 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-empty"> <td class="bd-is-empty">
– –
</td> </td>
<td class="is-unique"> <td class="bd-is-unique">
<a href="http://getbootstrap.com/css/#type-lists" target="_blank"> <a href="http://getbootstrap.com/css/#type-lists" target="_blank">
lists lists
</a> </a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-empty"> <td class="bd-is-empty">
– –
</td> </td>
<td class="is-unique"> <td class="bd-is-unique">
<a href="http://getbootstrap.com/css/#caret" target="_blank"> <a href="http://getbootstrap.com/css/#caret" target="_blank">
caret caret
</a> </a>
@@ -388,12 +388,12 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/components/card/"> <a href="{{ site.url }}/documentation/components/card/">
card card
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -410,20 +410,20 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/components/level/"> <a href="{{ site.url }}/documentation/components/level/">
level level
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-empty"> <td class="bd-is-empty">
– –
</td> </td>
<td class="is-unique"> <td class="bd-is-unique">
<a href="http://getbootstrap.com/components/#list-group" target="_blank"> <a href="http://getbootstrap.com/components/#list-group" target="_blank">
list group list group
</a> </a>
@@ -442,12 +442,12 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/components/menu/"> <a href="{{ site.url }}/documentation/components/menu/">
menu menu
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -488,10 +488,10 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-empty"> <td class="bd-is-empty">
– –
</td> </td>
<td class="is-unique"> <td class="bd-is-unique">
<a href="http://getbootstrap.com/components/#page-header" target="_blank"> <a href="http://getbootstrap.com/components/#page-header" target="_blank">
page header page header
</a> </a>
@@ -510,12 +510,12 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/components/panel/"> <a href="{{ site.url }}/documentation/components/panel/">
panel panel
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
@@ -532,10 +532,10 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-empty"> <td class="bd-is-empty">
– –
</td> </td>
<td class="is-unique"> <td class="bd-is-unique">
<a href="http://getbootstrap.com/components/#wells" target="_blank"> <a href="http://getbootstrap.com/components/#wells" target="_blank">
wells wells
</a> </a>
@@ -571,22 +571,22 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/layout/section/"> <a href="{{ site.url }}/documentation/layout/section/">
section section
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="is-unique"> <td class="bd-is-unique">
<a href="{{ site.url }}/documentation/layout/footer/"> <a href="{{ site.url }}/documentation/layout/footer/">
footer footer
</a> </a>
</td> </td>
<td class="is-empty"> <td class="bd-is-empty">
<span>–</span> <span>–</span>
</td> </td>
</tr> </tr>

2
docs/_includes/pro.html
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"> <aside class="media-left">
<span class="icon"> <span class="icon">
<i class="fa fa-{{ include.icon }}"></i> <i class="fa fa-{{ include.icon }}"></i>

10
docs/_javascript/bulma.js
View File

@@ -35,8 +35,8 @@ jQuery(document).ready(function ($) {
$highlights.each(function() { $highlights.each(function() {
var $el = $(this); var $el = $(this);
var copy = '<button class="copy">Copy</button>'; var copy = '<button class="bd-copy">Copy</button>';
var expand = '<button class="expand">Expand</button>'; var expand = '<button class="bd-expand">Expand</button>';
$el.append(copy); $el.append(copy);
if ($el.find('pre code').innerHeight() > 600) { 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() { $highlightButtons.hover(function() {
$(this).parent().css('box-shadow', '0 0 0 1px #ed6c63'); $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
@@ -52,11 +52,11 @@ jQuery(document).ready(function ($) {
$(this).parent().css('box-shadow', 'none'); $(this).parent().css('box-shadow', 'none');
}); });
$('.highlight .expand').click(function() { $('.highlight .bd-expand').click(function() {
$(this).parent().children('pre').css('max-height', 'none'); $(this).parent().children('pre').css('max-height', 'none');
}); });
new Clipboard('.copy', { new Clipboard('.bd-copy', {
target: function(trigger) { target: function(trigger) {
return trigger.previousSibling; return trigger.previousSibling;
} }

10
docs/_javascript/main.js
View File

@@ -103,8 +103,8 @@ document.addEventListener('DOMContentLoaded', () => {
if ($highlights.length > 0) { if ($highlights.length > 0) {
$highlights.forEach($el => { $highlights.forEach($el => {
const copy = '<button class="copy">Copy</button>'; const copy = '<button class="bd-copy">Copy</button>';
const expand = '<button class="expand">Expand</button>'; const expand = '<button class="bd-expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copy); $el.insertAdjacentHTML('beforeend', copy);
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) { if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
@@ -119,7 +119,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
function addHighlightControls() { function addHighlightControls() {
const $highlightButtons = getAll('.highlight .copy, .highlight .expand'); const $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
$highlightButtons.forEach($el => { $highlightButtons.forEach($el => {
$el.addEventListener('mouseenter', () => { $el.addEventListener('mouseenter', () => {
@@ -131,7 +131,7 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
}); });
const $highlightExpands = getAll('.highlight .expand'); const $highlightExpands = getAll('.highlight .bd-expand');
$highlightExpands.forEach($el => { $highlightExpands.forEach($el => {
$el.addEventListener('click', () => { $el.addEventListener('click', () => {
@@ -140,7 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
} }
new Clipboard('.copy', { new Clipboard('.bd-copy', {
target: function(trigger) { target: function(trigger) {
return trigger.previousSibling; return trigger.previousSibling;
} }

8
docs/_sass/bootstrap.sass
View File

@@ -46,11 +46,11 @@ $bootstrap-invert: #fff
p:not(:last-child) p:not(:last-child)
margin-bottom: 0.5rem margin-bottom: 0.5rem
.bd-pro.is-bulma .bd-pro.bd-is-bulma
.icon .icon
color: $primary color: $primary
.bd-pro.is-bootstrap .bd-pro.bd-is-bootstrap
.icon .icon
color: $bootstrap color: $bootstrap
@@ -85,10 +85,10 @@ $bootstrap-invert: #fff
color: currentColor color: currentColor
&:hover &:hover
text-decoration: underline text-decoration: underline
.is-empty .bd-is-empty
background-color: $background background-color: $background
color: $text-light color: $text-light
.is-unique .bd-is-unique
background-color: rgba($green, 0.25) background-color: rgba($green, 0.25)
color: $text-strong color: $text-strong
font-weight: $weight-bold font-weight: $weight-bold

6
docs/_sass/example.sass
View File

@@ -91,8 +91,8 @@ $structure-invert: $danger-invert
.highlight .highlight
position: relative position: relative
.copy, .bd-copy,
.expand .bd-expand
+unselectable +unselectable
background: $white background: $white
border: solid $border border: solid $border
@@ -106,7 +106,7 @@ $structure-invert: $danger-invert
&:hover &:hover
border-color: $code border-color: $code
color: $code color: $code
.expand .bd-expand
border-right-width: 1px border-right-width: 1px
right: 50px right: 50px
+tablet +tablet

18
docs/css/bulma-docs.css
View File

@@ -9514,8 +9514,8 @@ html.route-index #carbon {
position: relative; position: relative;
} }
.highlight .copy, .highlight .bd-copy,
.highlight .expand { .highlight .bd-expand {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@@ -9532,13 +9532,13 @@ html.route-index #carbon {
top: 0; top: 0;
} }
.highlight .copy:hover, .highlight .bd-copy:hover,
.highlight .expand:hover { .highlight .bd-expand:hover {
border-color: #ff3860; border-color: #ff3860;
color: #ff3860; color: #ff3860;
} }
.highlight .expand { .highlight .bd-expand {
border-right-width: 1px; border-right-width: 1px;
right: 50px; right: 50px;
} }
@@ -10299,11 +10299,11 @@ html.route-index .hero.is-primary a.column:hover .title strong {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.bd-pro.is-bulma .icon { .bd-pro.bd-is-bulma .icon {
color: #00d1b2; color: #00d1b2;
} }
.bd-pro.is-bootstrap .icon { .bd-pro.bd-is-bootstrap .icon {
color: #6f5499; color: #6f5499;
} }
@@ -10354,12 +10354,12 @@ html.route-index .hero.is-primary a.column:hover .title strong {
text-decoration: underline; text-decoration: underline;
} }
.bd-comparison .table .is-empty { .bd-comparison .table .bd-is-empty {
background-color: whitesmoke; background-color: whitesmoke;
color: #7a7a7a; color: #7a7a7a;
} }
.bd-comparison .table .is-unique { .bd-comparison .table .bd-is-unique {
background-color: rgba(35, 209, 96, 0.25); background-color: rgba(35, 209, 96, 0.25);
color: #363636; color: #363636;
font-weight: 700; font-weight: 700;

10
docs/lib/bulma.js
View File

@@ -37,8 +37,8 @@ jQuery(document).ready(function ($) {
$highlights.each(function () { $highlights.each(function () {
var $el = $(this); var $el = $(this);
var copy = '<button class="copy">Copy</button>'; var copy = '<button class="bd-copy">Copy</button>';
var expand = '<button class="expand">Expand</button>'; var expand = '<button class="bd-expand">Expand</button>';
$el.append(copy); $el.append(copy);
if ($el.find('pre code').innerHeight() > 600) { 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 () { $highlightButtons.hover(function () {
$(this).parent().css('box-shadow', '0 0 0 1px #ed6c63'); $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
@@ -54,11 +54,11 @@ jQuery(document).ready(function ($) {
$(this).parent().css('box-shadow', 'none'); $(this).parent().css('box-shadow', 'none');
}); });
$('.highlight .expand').click(function () { $('.highlight .bd-expand').click(function () {
$(this).parent().children('pre').css('max-height', 'none'); $(this).parent().children('pre').css('max-height', 'none');
}); });
new Clipboard('.copy', { new Clipboard('.bd-copy', {
target: function target(trigger) { target: function target(trigger) {
return trigger.previousSibling; return trigger.previousSibling;
} }

10
docs/lib/main.js
View File

@@ -105,8 +105,8 @@ document.addEventListener('DOMContentLoaded', function () {
if ($highlights.length > 0) { if ($highlights.length > 0) {
$highlights.forEach(function ($el) { $highlights.forEach(function ($el) {
var copy = '<button class="copy">Copy</button>'; var copy = '<button class="bd-copy">Copy</button>';
var expand = '<button class="expand">Expand</button>'; var expand = '<button class="bd-expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copy); $el.insertAdjacentHTML('beforeend', copy);
if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) { if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
@@ -121,7 +121,7 @@ document.addEventListener('DOMContentLoaded', function () {
} }
function addHighlightControls() { function addHighlightControls() {
var $highlightButtons = getAll('.highlight .copy, .highlight .expand'); var $highlightButtons = getAll('.highlight .bd-copy, .highlight .bd-expand');
$highlightButtons.forEach(function ($el) { $highlightButtons.forEach(function ($el) {
$el.addEventListener('mouseenter', function () { $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) { $highlightExpands.forEach(function ($el) {
$el.addEventListener('click', function () { $el.addEventListener('click', function () {
@@ -142,7 +142,7 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
} }
new Clipboard('.copy', { new Clipboard('.bd-copy', {
target: function target(trigger) { target: function target(trigger) {
return trigger.previousSibling; return trigger.previousSibling;
} }