Skip to content

Instantly share code, notes, and snippets.

View lisasy's full-sized avatar

Lisa Sy lisasy

View GitHub Profile
@lisasy
lisasy / _select.scss
Created August 24, 2013 17:51
Custom styling of select dropdowns.
.select-dropdown {
position: relative;
i {
@include background-image(linearselect-gradient($white 0, darken($white, 2%) 100%, transparent 80%));
@include position(absolute, 1px 3% 0 0);
background: $white;
background: linear-gradient(top, $white, darken($white, 5%));
background: -o-linear-gradient(top, $white, darken($white, 5%));
background: -moz-linear-gradient(top, $white, darken($white, 5%));
@lisasy
lisasy / _inline-block.scss
Created August 24, 2013 17:52
Inline block
@mixin inline-block {
ul {
display: block;
li {
display: inline-block;
float: left;
}
}
}
@lisasy
lisasy / _vertical-padding.scss
Last active December 21, 2015 22:08
Declaring same left and right padding of an element.
@mixin vertical-padding($value) {
padding-left: $value;
padding-right: $value;
}
@lisasy
lisasy / _border-radius.css.scss
Created September 3, 2013 20:52
Making it easier to define the border-radius of elements.
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
@mixin border-top-radius($radius) {
-moz-border-top-left-radius: $radius;
-moz-border-top-right-radius: $radius;
@lisasy
lisasy / _nubbed.scss
Created October 28, 2013 21:26
Custom nub arrow
div.nub {
border-bottom: 16px solid rgb(250,250,250);
border-left: 16px solid transparent;
border-right: 16px solid transparent;
content: '';
height: 0;
margin-left: -16px;
position: absolute;
top: -16px;
width: 0;
@lisasy
lisasy / _equal-gutter.scss
Created March 2, 2014 23:39
_equal-gutter.scss
@mixin equal-gutter($direction: top, $value: 1em) {
padding-#{$direction}: $value;
margin-#{$direction}: $value;
}
%header.site-header
.header-content
.search-content
%section.container
%aside
%nav
%ul
%li
%a
@lisasy
lisasy / application.html.haml
Last active August 29, 2015 13:57
Nested application layouts for Rails projects
!!!
%html
%head
%meta{:charset => "utf-8"}
%meta{:content => "NOODP", :name => "ROBOTS"}
%meta{name: 'viewport', content: 'width=device-width; initial-scale=1.0; maximum-scale=1.0;'}
%title= page_title
= stylesheet_link_tag :application, :media => 'all'
= csrf_meta_tags
%body{:class => body_class}
@lisasy
lisasy / _columns.scss
Last active August 29, 2015 14:05
Multiple Columns with Neat
$column-num: col !default;
@for $i from 2 through 4 {
.#{$column-num}-#{$i} {
overflow: hidden;
.column {
@include fill-parent();
@include media($medium-screen) {
$(function() {
var $stickyEl = $("[data-waypoint='nav']");
var $stopEl = $("[data-waypoint='footer']");
var $verticalGutter = $stopEl.outerHeight()
$stickyEl.waypoint("sticky", function() {
$("[data-waypoint='main']").toggleClass("stuck");
});
$stopEl.waypoint(function (direction) {