Skip to content

Instantly share code, notes, and snippets.

@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 / 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 / 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 / justifyHorAlign.scss
Last active February 18, 2016 10:44
SCSS: horizontal align via justify
@mixin justifyHorAlign($ver-align: top, $item-align: left) {
text-align: justify;
&::after {
width: 100%;
content: "";
display: inline-block;
}
& > * {
@soerson
soerson / triangle.scss
Created February 17, 2016 21:40
SCSS: triangle
@mixin triangle($direction, $size: 6px, $color: #222){
@if ($direction == 'up'){
border-bottom: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
}
@else if ($direction == 'down'){
border-top: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
@soerson
soerson / soc-colors.scss
Created February 17, 2016 12:57
SCSS: social colors via sass-map
$soc-colors-settings: (
tw: #00b6f3,
fb: #3b5998,
in: #2086bc,
gp: #cf4231,
vk: #5f7fa2,
);
.item {
@each $name, $color in $soc-colors-settings {
@soerson
soerson / ghostVerticalAlign.scss
Created February 16, 2016 10:24
SCSS: ghostVerticalAlign
@mixin ghostVerticalAlign(){
&:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%; width: .1px;
}
}
@soerson
soerson / currency.scss
Created February 16, 2016 10:23
SCSS: currency
%currency {
position: relative;
&:before {
content: '$';
position: relative;
left: 0;
}
}
.USD %currency:before { content: '$'; }
.EUR %currency:before { content: '\20AC'; } // must escape the html entities for each currency symbol
@soerson
soerson / clearfix.scss
Last active February 16, 2016 12:27
SCSS: clearfix
%clearfix {
*zoom: 1;
&:after {
content: '';
display: table;
line-height: 0;
clear: both;
}
}
@soerson
soerson / sublime sync
Last active January 18, 2016 09:17
sublime sync on windows https://goo.gl/kCdJUh
// first time
cd "$env:appdata\Sublime Text 3\Packages\"
mkdir $env:userprofile\Dropbox\Sublime
mv User $env:userprofile\Dropbox\Sublime\
cmd /c mklink /D User $env:userprofile\Dropbox\Sublime\User
// other machines
cd "$env:appdata\Sublime Text 3\Packages\"
rmdir -recurse User