Usage:
@include button( $color [, $icon] )
Example:
function Bullet(x, y) { | |
this.x = x | |
this.y = y | |
this.r = 3 | |
this.update = function() { | |
this.y -= 3 | |
} | |
this.render = function() { |
<!doctype html> | |
<html> | |
<head> | |
<link rel="stylesheet" href="style.css"> | |
</head> | |
<body> | |
<div> | |
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd" stroke="#666" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)"><circle cx="5" cy="5" r="5"/><path d="M5 2v3l2 1"/></g></svg> | |
<canvas id="particles" width="100" height="100"></canvas> | |
</div> |
<div class="slides"> | |
<div style="background-color:red;"></div> | |
<div style="background-color:blue;"></div> | |
<div style="background-color:yellow;"></div> | |
<div style="background-color:green;"></div> | |
<div style="background-color:purple;"></div> | |
</div> |
<h1>Hover over the text</h1> | |
<p>Not sure if its an original idea or not, but fun concept none-the-less. Using text-shadow to blur text, and unbluring text when hovering with the magnifying glass. Not sure what can be done to make this not so laggy.</p> | |
<p id="demo">Nulla sollicitudin facilisis eros a bibendum. Morbi lobortis accumsan vulputate. Ut et lectus mi, in congue elit. Nullam sit amet massa velit, at blandit felis. Fusce eleifend, eros at dapibus faucibus, arcu velit elementum lorem, sit amet ullamcorper nibh velit ac neque. Mauris sed mauris erat, non varius erat. Proin dapibus rutrum felis fermentum tincidunt. Pellentesque nec nisl eu dui vehicula lacinia vitae in justo. Duis consequat aliquam odio eu vulputate. Maecenas placerat sodales magna, eu sagittis mauris malesuada a. Phasellus dapibus posuere rhoncus. Fusce vel arcu at ipsum condimentum laoreet. Nam congue urna sit amet magna gravida vehicula. Aliquam.</p> | |
<div id="unblur"></div> |
(function agilezen() { | |
// Only run if on board page | |
if ( (window.location.href).indexOf("board") !== -1 ) { | |
// window.ui.userid is unavailable for some reason, | |
// so this is a crazy workaround to get the user id | |
var userid = $('#owner').find('option[selected="selected"]').val(); | |
// Add a button to toggle my cards |
// Tooltip | |
@mixin tooltip($size: 5px, $dir: left, $bgcolor: #000) { | |
background: $bgcolor; | |
position: relative; | |
&:before { | |
border-style: solid; | |
content: ""; | |
display: block; | |
position: absolute; |
// I only want to see the image on grab.by screenshots | |
(function(d) { | |
var grab = d.getElementById('thegrab'), | |
link = d.querySelector('head > link'), | |
body = d.body; | |
// Remove Styles | |
link.parentNode.removeChild(link); |
searchField.on('keyup paste', function() { | |
// Need a delay here because the paste event registers | |
// just before the text is actually pasted which would | |
// result in the input not having a value | |
var delay = window.setTimeout(function() { | |
if (searchField.val()) { | |
searchBtn.prop("disabled", false).removeClass("ui-state-disabled"); | |
} else { | |
searchBtn.prop("disabled", true).addClass("ui-state-disabled"); | |
} |
$('a[href*="github-flavored-markdown"]').after(' | <a href="#" target="_blank" id="emoji-cheat-sheet">Emoji Cheat Sheet</a>'); | |
$('#emoji-cheat-sheet').click(function() { | |
$('body').append('<div id="emoji-modal-wrapper" style="background:rgba(0,0,0,.8);height:100%;left:0;position:fixed;top:0;width:100%;z-index:10000;"><div id="emoji-modal" style="height:600px;left:50%;margin: -300px 0 0 -400px;position:fixed;top:50%;width:800px;"><iframe src="http://emoji-cheat-sheet.com" height="600" width="800"></iframe><a href="#" id="emoji-close" style="background:#fff;border:3px solid #000;border-radius:100%;display:block;font-size:18px;font-weight:bold;line-height:24px;position:absolute;right:-12px;text-align:center;top:-12px;width:24px;">×</a></div></div>'); | |
return false; | |
}); | |
$('#emoji-close, #emoji-modal-wrapper').live('click', function() { | |
$('#emoji-modal-wrapper').remove(); | |
return false; |