Skip to content

Instantly share code, notes, and snippets.

View powerbuoy's full-sized avatar

Andreas Lagerkvist powerbuoy

View GitHub Profile
@powerbuoy
powerbuoy / burger-menu.scss
Created October 4, 2017 08:33
Single element animated burger menu
$transition-default: .25s;
$transition-easing: ease-in-out;
@mixin burger-menu ($color: $color-link, $size: 1.5rem, $thickness: .25rem) {
background-image: linear-gradient(to right, transparent, transparent 25%, $color 25%);
// background-image: linear-gradient(to right, $color, $color); // Full width middle line
background-size: 100% $thickness;
background-position: left 50%;
background-repeat: no-repeat;
transition: background-position $transition-default $transition-default $transition-easing;
@powerbuoy
powerbuoy / floating-label.scss
Created October 4, 2017 08:31
Floating labels in pure CSS
$form-padding-vertical: .8rem;
$form-padding-horizontal: 1.2rem;
$transition-default: .25s;
$transition-easing: ease-in-out;
$color-form-placeholder: #999;
$color-text: #333;
.floating-label {