block($selector) $block-selector = $selector unless typeof($selector) == 'string' $block-selector = "%s" % $selector; unless match('^\.', $block-selector) $block-selector = '.' + $block-selector {$block-selector} {block} mod($modifier) $modifier-selector = generateJointModifierSelector(arguments) unless typeof($modifier) == 'string' $modifier-selector = s('%s',$modifier); {'&'} {$modifier-selector} {block} mod-share($modifier) $modifier-selector = generateSharedModifierSelector(arguments) unless typeof($modifier) == 'string' $modifier-selector = s('%s',$modifier); {'&'} {$modifier-selector} {block} modifier=mod element($element, $depth=-1) $element-selector-part = $element unless typeof($element) == 'string' $element-selector-part = "%s" % $element $parent = s("& ^[%s..%s]", $depth, $depth) {$parent} &__{$element-selector-part} {block} mod-element($element, $depth=-3) $element-selector-part = $element unless typeof($element) == 'string' $element-selector-part = "%s" % $element $parent = s("& ^[%s..%s]", $depth, $depth) {$parent} &__{$element-selector-part} {block} overlay-parent-style() position relative overflow hidden overlay-child-style($bg-property = rgba(0, 0, 0, 0.5)) $bg-property-type = typeof($bg-property); position: absolute; background-repeat repeat-x display: block; bottom: -1px; left: -1px; right: -1px; top: -1px; background-position center; if $bg-property-type == "rgba" background-color: $bg-property; else if $bg-property-type == "call" background-image $bg-property; else background $bg-property; overlay-content-style($has-content = false) if $has-content == true position: relative; overlay-before($bg-property = rgba(0, 0, 0, 0.5), $has-content = true) overlay-parent-style(); &:before content: "" overlay-child-style($bg-property); {block} > * overlay-content-style($has-content); overlay-after($bg-property = rgba(0, 0, 0, 0.5), $has-content = true) overlay-parent-style(); &:after content: "" overlay-child-style($bg-property); {block} > * overlay-content-style($has-content); cut-outer-paragraph-margin() p &:first-child margin-top: 0; &:last-child margin-bottom: 0; cut-outer-margin($direction = vertical) if match('/v|vert|vertical/i', $direction) &:first-child margin-top: 0; &:last-child margin-bottom: 0; else &:first-child margin-left: 0; &:last-child margin-right: 0; cut-outer-type-margin($direction = vertical) if match('/v|vert|vertical/i', $direction) &:first-of-type margin-top: 0; &:last-of-type margin-bottom: 0; else &:first-of-type margin-left: 0; &:last-of-type margin-right: 0; cut-outer-padding($direction = vertical) if match('/v|vert|vertical/i', $direction) &:first-child padding-top: 0; &:last-child padding-bottom: 0; else &:first-child padding-left: 0; &:last-child padding-right: 0; cut-outer-type-padding($direction = vertical) if match('/v|vert|vertical/i', $direction) &:last-of-type padding-bottom: 0; &:first-of-type padding-top: 0; else &:first-of-type padding-top: 0; &:last-of-type padding-bottom: 0; image-placeholder-support($size = 'cover', $background-image = false) background-position: center; background-repeat: no-repeat; background-size: $size; if $background-image background-image: $background-image; {block} image-placeholder($size= cover, $background-image= false) background-position: center; background-repeat: no-repeat; background-size: unquote($size); if $background-image background-image: $background-image; {block} align-child($selector = ".hero-content", $valign = middle) display: table; width: 100%; {selector($selector)} display: table-cell; vertical-align: $valign; centered-block($max-width = auto) display: block; margin-left: auto; margin-right: auto; if $max-width != auto max-width: $max-width; width: 100%; centered-spaced-block($margin-vertical = 0, $max-width = 960px) display: block; margin: $margin-vertical auto; max-width: $max-width; inline-block-img-parent($max-width, $height) display: inline-block; if unit($max-width) == 'em' max-width: $max-width; else max-width: em-auto($max-width); width: 100%; inline-block-img-child($width, $height, $src) display: block; height: 0; margin: 0 auto; $height-percentage = (100% * remove-unit($height)/remove-unit($width)) padding-bottom: $height-percentage; position: relative; width: 100%; background $src center no-repeat; background-size: 100% 100%; default-transition() if length(arguments) > 1 transition-property: unquote(join(', ', arguments)); else transition-property: arguments; transition-duration: $duration-transition-default-ms; transition-timing-function: $timing-transition-default; snap-transition() if length(arguments) > 1 transition-property: unquote(join(', ', arguments)); else transition-property: arguments; transition-duration: $duration-transition-default-ms; transition-timing-function: $timing-transition-snap; short-transition() if length(arguments) > 1 transition-property: unquote(join(', ', arguments)); else transition-property: arguments; transition-duration: $duration-transition-short-ms; transition-timing-function: $timing-transition-default; long-transition() if length(arguments) > 1 transition-property: unquote(join(', ', arguments)); else transition-property: arguments; transition-duration: $duration-transition-long-ms; custom-heading-size($base-heading = h3, $adjusted-font-size = 40) $heading_ratios = { 'h1' : 2, 'h2' : 1.5, 'h3' : 1.17, 'h4' : 1.12, 'h5' : .83, 'h6' : .75 }; $adjustment = (em-auto(px($adjusted-font-size)) / $heading_ratios[$base-heading] * 1em); for $heading-size, $font-ratio in $heading_ratios & {$heading-size} font-size: 1em * $adjustment * $font-ratio; // pulled from https://github.com/yangsu/nib/blob/98bdae7f2a5620bc56f6b2c9c98f71ce73a35fbf/lib/nib/vendor.styl // requires kouto compat-filter(radius, fallbackPx=2px) vendor('filter', 'blur(%s)' % fallbackPx, prefixes: moz, official: true) vendor('filter', '%s' % radius, prefixes: webkit ms, official: false) if support-for-ie filter '"progid:DXImageTransform.Microsoft.Blur(PixelRadius=%d)"' % fallbackPx;