Skip to content

Instantly share code, notes, and snippets.

@soerson
soerson / icons.scss
Created February 22, 2016 14:06
SCSS: pull icons from sprite
.icon {
@each $sprite in $spritesheet-sprites {
$spritename: nth($sprite, 10);
&__#{$spritename} {
@include sprite($sprite);
}
}
}
@soerson
soerson / icon-container.scss
Created February 24, 2016 15:07
SCSS: icon container
%icon-container {
position: relative;
& > * {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
@soerson
soerson / tooltip.scss
Created February 29, 2016 09:11
SCSS: tooltip triangle
@mixin triangle($direction, $size: 6px, $color: #222){
content: '';
display: block;
position: absolute;
height: 0; width: 0;
@if ($direction == 'up'){
border-bottom: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
}
@soerson
soerson / pseudoIcon.scss
Last active March 12, 2016 09:45
SCSS: pseudoIcon
@mixin pseudoIcon($gap, $direction: left) {
@if ($direction == 'left') {
$pseudoElement: before;
}
@else if ($direction == 'right'){
$pseudoElement: after;
}
@else {
@error "+pseudoIcon: wrong direction";
@soerson
soerson / showOnParentHover.scss
Created March 16, 2016 14:43
SCSS: show block on parent hover
@mixin showOnParentHover($parent, $duration: 0.3s) {
& {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
}
@at-root .#{$parent}:hover & {
visibility: visible;
@soerson
soerson / closest.js
Created June 22, 2016 20:13
elem.closest() polyfill
if (document.documentElement.closest === undefined) {
Element.prototype.closest = function (css) {
var elem = this;
do {
if (elem.matches(css)) return elem;
elem = elem.parentElement;
} while (elem);
}
}
@soerson
soerson / getPageScroll.js
Created July 1, 2016 04:18
getPageScroll.js
var getPageScroll = (window.pageXOffset !== undefined) ?
function () {
return {
top: pageYOffset,
left: pageXOffset
}
} : function () {
var html = document.documentElement;
var body = document.body;
@soerson
soerson / resizeHandler.js
Last active July 30, 2016 20:51
window resize event handler
var resizeID;
window.addEventListener("resize", function () {
clearTimeout(resizeID);
resizeID = setTimeout(resizeHandler, 500);
});
function resizeHandler() {
/* ... */
}
@soerson
soerson / getClass.js
Last active July 30, 2016 20:52
get object [[Class]] property
function getClass(obj) {
return {}.toString.call(obj).slice(8, -1);
}
@soerson
soerson / copyToClipboard.js
Created September 4, 2016 09:52
copy string to clipboard
function copyToClipboard(text) {
var el = document.createElement('textarea');
el.style.position = 'absolute';
el.style.left = '-9999px';
el.setAttribute('readonly', '');
el.value = text;
document.body.appendChild(el);
el.select();