Skip to content

Instantly share code, notes, and snippets.

Avatar

Miriam Suzanne mirisuzanne

View GitHub Profile
View flex-box.sass
=display-box
display: -webkit-box
display: -moz-box
display: box
// Value: horizontal | vertical | inline-axis | block-axis | inherit
// Initial: inline-axis
// Default: horizontal
=box-orient(!orient = "horizontal")
-webkit-box-orient= !orient
View _vertical_rhythm.sass
//** Vertical Rhythm **//
// By Chris Eppstein and Eric Meyer, living here on a temporary basis
// set the default border style for rhythm borders
!default_rhythm_border_style = "solid"
// The IE font ratio is a fact of life. Deal with it.
!ie_font_ratio = 16px / 100%
View _bubbles.sass
// CSS Speech Bubbles
// Based on the work of David DeSandro: http://desandro.com/resources/css-speech-bubble-icon/
// Compass Extension by Eric Meyer: http://www.oddbird.net/
// the color of the bubble
!default_bubble_color ||= #00f
// the color of any text in a text-bubble
!default_bubble_text_color ||= #fff
// the padding around any text in a text-bubble
View box-shadow.sass
$default-box-shadow-color : #333 !default
$default-box-shadow-h-offset : 1px !default
$default-box-shadow-v-offset : 1px !default
$default-box-shadow-blur : 5px !default
$default-box-shadow-spread : 0 !default
$default-box-shadow-inset : false !default
=box-shadow($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur, $spread: $default-box-shadow-spread, $inset: $default-box-shadow-inset)
$full: $color $hoff $voff $blur $spread
@if $inset
View grid.sass
=x-omega($n, $context: false)
+float($omega-float)
width: columns($n, $context)
@if $context
margin-right: 0
@else
margin-right: side-gutter()
@if $hacks
+ie-omega($omega-float, true)
@mirisuzanne
mirisuzanne / _transform-v2.scss
Created Nov 5, 2010
compass transforms version 2
View _transform-v2.scss
@import "shared";
// Transform -----------------------------------------------------------------
// Apply a transform sent as a complete string.
@mixin apply-transform(
$transform,
$threeD: false
) {
@if $threeD {
@include experimental(transform, $transform,
View generategrid.scss
@import compass
@import base
=susygrid
$gutter-color: rgba(0,0,0,0)
$column-color: rgba(0,0,0,.25)
$start: side-gutter()
$grid: compact()
$grid: append($grid, $gutter-color $start, comma)
View generategrid.css
body {
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
-moz-background-size: 100% 1.5em;
-webkit-background-size: 100% 1.5em;
-o-background-size: 100% 1.5em;
background-size: 100% 1.5em;
background-position: left top;
View input-placeholder.sass
// Mixins ---------------------------------------------------------------
=placeholder-style
color: #777
// add your defaults here.
// if you need more than one style-group you can either create several mixins,
// or just name the style-groups and take a single style-group-name argument.
=apply-placeholders
&::-webkit-input-placeholder
View animation.scss
@mixin animate($animation, $time, $property, $value) {
@-moz-keyframes #{$animation} { #{$time} { #{$property}: $value; }};
}
You can’t perform that action at this time.