Skip to content

Instantly share code, notes, and snippets.

View matiassingers's full-sized avatar

Matias Singers matiassingers

320 followers · 112 following
View GitHub Profile
@matiassingers
matiassingers / input.sass
Last active December 21, 2015 08:28
SASS looping over colors creating nth-child selectors
li
$colors: rgb(230,196,19), rgb(233,171,48), rgb(222,65,56), rgb(158,48,49), rgb(64,13,45), rgb(120,40,109), rgb(188,33,135)
$num: 0
@each $color in $colors
$num: $num + 1
&:nth-child(#{$num})
background-color: $color
@matiassingers
matiassingers / _media-queries.sass
Last active December 21, 2015 17:28
SASS media query mixin structuring.
@mixin galaxyPocket
@media only screen and (max-width: 300px)
@content
@matiassingers
matiassingers / progress-bar.sass
Last active March 7, 2016 15:17
SASS progress bar color generation. I had to generate a progress bar that would change color from 0%(red) to 100%(green). See the output by using something like: http://sassmeister.com/
$start: hsl(1, 62.5%, 45%)
$end: hsl(82, 62.6%, 38.8%)
$i: 0
@while $i < 100
$i: $i + 1
$hue: round((82 / 100) * $i)
.progress-bar[data-percent='#{$i}']
background-color: adjust-hue($start, $hue)
@matiassingers
matiassingers / SassMeister-input.sass
Last active December 26, 2015 02:29
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----
$magic-number: 24px
$size: 9px
@function round-to($number, $precision)
@return round($number / $precision) * $precision
@matiassingers
matiassingers / SassMeister-input-HTML.html
Created November 6, 2013 10:11
Generated by SassMeister.com.
<button class="load-more"></button>
@matiassingers
matiassingers / SassMeister-input.sass
Created November 8, 2013 07:34
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
$dropup-delay: 400ms
$dropup-time: $dropup-delay - 100ms
.dropup
$drop-sizes: (one, two, three, four, five, six, seven, eight, nine, ten, eleven)
@matiassingers
matiassingers / SassMeister-output.css
Last active December 31, 2015 00:29
A Pen by Matias Singers.
.loader {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
background-color: white;
perspective: 400px;
}
@matiassingers
matiassingers / just-eat-sum.js
Last active January 4, 2016 08:19 — forked from srn/just-eat-sum.js
// visit: https://just-eat.dk/member/prevorders
// run it once per year
var siblings = $('#ctl00_ContentPlaceHolder1_rightbox a[href^="javascript:__doPostBack(\'ctl00$ContentPlaceHolder1$ctl00$ctl"').siblings(),
sum = isNaN(localStorage.getItem('JE')) ? 0 : parseInt(localStorage.getItem('JE'), 10),
yearSum = 0;
$('#ctl00_ContentPlaceHolder1_rightbox table tbody tr').each(function(){
var amount = parseInt($(this).find('td').eq(3).find('div').find('div').eq(0).text(), 10);
if (isNaN(amount)) return;
yearSum += amount;
});
@matiassingers
matiassingers / SassMeister-input-HTML.html
Created January 28, 2014 04:14
http://sassmeister.com/gist/matiassingers/8662166 - Generated by SassMeister.com.
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
<div class="stripe"></div>
@matiassingers
matiassingers / SassMeister-input-HTML.jade
Created May 31, 2014 09:15
Generated by SassMeister.com.
.three-by-two
p 3:2
.four-by-three
p 4:3
.sixteen-by-nine
p 16:9