Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

350 lines (277 sloc) 11.515 kB
// This document is not to be edited as it will be versioned
// -----------------------------------------------------------------
// This document is to house Toadstools dynamic mixins with arguments
// These mixins are not intended to be application specific
// required default value to for vendor prefix support
// -----------------------------------------------------
$prefix_defaults: -moz- -webkit- -o- -ms- '' !default;
$webkit_support: -webkit- '' !default;
$moz_support: -moz- '' !default;
$ms_support: -ms- '' !default;
$moz_webkit_support: -moz- -webkit- '' !default;
$moz_ms_support: -moz- -ms- '' !default;
$webkit_ms_support: -webkit- -ms- '' !default;
/////// shadow arguments /////////
// -------------------------------
// Config values for all default shadows
// -----------------------------------------------------------------------------
$h-shadow: 0 !default; // horizontal shadow settings
$v-shadow: 2 !default; // vertical shaddow settings
$blur: 3 !default; // blur settings
$inset_color: $shadow_color !default; // for use with ``dual_box_shadow`` mixin
$ih-shadow: 0 !default; // inset horizontal shadow settings
$iv-shadow: 2 !default; // inset vertical shaddow settings
$is-shadow: 2 !default; // inset spread shaddow settings
$iblur: 3 !default; // inset blur settings
$shadow: em($h-shadow) em($v-shadow) em($blur);
$inset_shadow: em($ih-shadow) em($iv-shadow) em($iblur) em($is-shadow);
@mixin box_shadow ($shadow_color: $shadow_color, $shadow: $shadow, $prefixes: $prefix_defaults) {
@each $prefix in $prefixes {
#{$prefix}box-shadow: $shadow_color $shadow;
}
}
@mixin dual_box_shadow ($shadow_color: $shadow_color, $shadow: $shadow, $inset_color: $inset_color, $inset_shadow: $inset_shadow, $prefixes: $prefix_defaults) {
@each $prefix in $prefixes {
#{$prefix}box-shadow: $shadow_color $shadow, inset $inset_color $inset_shadow;
}
}
@mixin text_shadow ($shadow_color: $shadow_color, $shadow: $shadow, $prefixes: $prefix_defaults) {
@each $prefix in $prefixes {
#{$prefix}text-shadow: $shadow_color $shadow;
}
}
/////// shadow arguments /////////
/////// border-radius arguments /////////
// --------------------------------------
@mixin border_radius ($border_radius, $prefixes: $webkit_support) {
@each $prefix in $prefixes {
#{$prefix}border-radius: $border_radius;
}
}
/////// border-radius arguments /////////
/////// box-sizing arguments /////////
// --------------------------------------
@mixin box_sizing ($box_sizing: border-box, $prefixes: $prefix_defaults) {
@each $prefix in $prefixes {
#{$prefix}box-sizing: $box_sizing;
}
}
/////// box-sizing arguments /////////
/////// input_placeholder arguments /////////
// --------------------------------------
@mixin input_placeholder ($placeholder_color: $placeholder_text) {
&::-webkit-input-placeholder {
color: $placeholder_color;
}
&::-moz-placeholder {
color: $placeholder_color;
}
&:-ms-input-placeholder {
color: $placeholder_color;
}
}
/////// input_placeholder arguments /////////
/////////// image with gradient background ////////////
// ------------------------------------------------- //
// This tool is pretty crazy and a little complex. Purpose is to simplify the creation of dual background assets that consist of an image and a gradient background.
// This tool also requires that a gradient object be created as variables.
// Known restrictions ... images must be .png, position of background is currently hard-coded
@mixin icon_gradient_background($icon_image, $fallback_color, $w3c_color_spec, $safari_color_spec, $ie_start, $ie_stop) {
// w3c //:
@include linear_gradient_bkgimage ('#{$imgDir}#{$icon_image}.png',5% 50%, $fallback_color, $w3c_color_spec);
// legacy safari //
@include linear_gradient_bkgimage_legacy_safari ('#{$imgDir}#{$icon_image}.png', 5% 50%, $safari_color_spec);
// IE suck
@include linear_gradient_legacy_ie ($ie_start, $ie_stop);
}
// Example using this mixin
// .your_new_class {
// @include icon_gradient_background(
// $icon_image: play_icon,
// $fallback_color: $echo_color_bravo,
// $w3c_color_spec: $alpha_color_gradient_var_w3c,
// $safari_color_spec: $alpha_color_gradient_var_legacy_safari,
// $ie_start: $echo_color_delta,
// $ie_stop: $echo_color_delta);
// }
// }
/////// column count arguments /////////
// --------------------------------------
@mixin column_count($col_count, $col_gap, $prefixes: $prefix_defaults) {
@each $prefix in $prefixes {
#{$prefix}column-count: $col_count;
#{$prefix}column-gap: $col_gap;
}
}
/////// column count arguments /////////
///////// flexbox arguments /////////
// -----------------------------------
// Flexbox is still very experimental and there are issues with each browser implementation of this.
// As seen in tests, Webkit's version causes odd appearances of bottom scroll bar appearance
// based on number of items in the flexbox when encompassing the full width of the view.
// As result, Stipe's engineering is based on using flexboxlegacy and flexbox modernizer tests.
@mixin flexbox (
$width,
$height,
$orient: horizontal,
$direction: row,
$pack: center,
$align: center,
$wrap: none,
$prefixes: $prefix_defaults,
$legacyPrefixes: $moz_webkit_support) {
@each $prefix in $legacyPrefixes {
.flexboxlegacy & {
display: #{$prefix}box;
#{$prefix}box-orient: $orient;
#{$prefix}box-pack: $pack;
#{$prefix}box-align: $align;
}
}
//As of 15.0.1 Mozilla does not support the new Flexbox spec
//As of Chrome 21.0.1180.89 Webkit is to buggy to impliment, causes lower scoll bar
//IE10 only supports the newer flexbox spec and does not exibit the issues that Chrome/Webkit does
@each $prefix in $ms_support {
.flexbox & {
display: -ms-flexbox;
#{$prefix}flex-direction: $direction;
#{$prefix}flex-align: $align;
#{$prefix}flex-pack: $pack;
#{$prefix}flex-wrap: $wrap;
}
}
// no-flexboxlegacy needs to be tested as Mozilla reports no-flexbox when testing for flexboxlegacy
// and causes a false positive when simply testing for no-flexbox.
.no-flexboxlegacy & {
width: 100%;
float: left;
}
height: $height;
width: $width;
}
@mixin flex (
$value,
$prefixes: $prefix_defaults,
$legacyPrefixes: $moz_webkit_support) {
@each $prefix in $legacyPrefixes {
.flexboxlegacy & {
#{$prefix}box-flex: $value;
}
}
@each $prefix in $ms_support {
.flexbox & {
#{$prefix}flex: $value;
}
}
.no-flexboxlegacy & {
float: left;
}
}
///////// flexbox arguments /////////
/////// transition arguments //////////
// http://www.w3schools.com/css3/css3_pr_transition.asp
@mixin transition ($property, $duration, $timing_function, $delay, $prefixes: $prefix_defaults) {
@each $prefix in $prefixes {
#{$prefix}transition: $property $duration $timing_function $delay;
}
}
/////// transition arguments //////////
/////// transform arguments //////////
// http://www.w3schools.com/css3/css3_pr_transform.asp
@mixin transform ($function, $prefixes: $prefix_defaults) {
@each $prefix in $prefixes {
#{$prefix}transform: $function;
}
}
/////// transform arguments //////////
////////////// hide text ////////////
// Kellum Method
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
@mixin hide_text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display: none;
}
////////////// hide text ////////////
/////// clearfix //////////
@mixin clearfix () {
zoom: 1;
&:before, &:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
&:after {
clear: both;
}
}
/////// clearfix //////////
///////// inset border /////////
@mixin inset_border () {
@include box_shadow(inset 0 0 1px, $alpha_gray);
}
///////// inset border /////////
/////// center text trick /////////
// ---------------------------------
// By setting the height of the block element and the line-height to the same value
// this will typically center the text in the block.
// If for some reason this needs adjustment, set a new value for the $line_height.
//
//
@mixin center_text ($block_height, $line_height: $block_height) {
height: $block_height;
line-height: $line-height;
}
/////// center text trick /////////
// a standardized border radius
// ----------------------------
@mixin standard_rounded_border ($standard_round_corner: $standard_round_corner, $standard_border_style: $standard_border_style, $standard_corner_width: $standard_corner_width, $standard_border_color: $standard_border_color) {
@include border_radius(#{$standard_round_corner / $em}rem);
border: $standard_corner_width $standard_border_style $standard_border_color;
}
// This mixin is used for a linear layout of LIs versus using floats
// Build off of the ``flexbox`` mixin, this tool allows for quick
// development of a ul/li layout using flexbox
// -----------------------------------------------------------------
@mixin ul_flexbox ($width :100%, $height: auto, $text_align :center) {
ul {
@include flexbox (horizontal, center, stretch, $width, $height);
}
li {
@include flex(1);
text-align: $text_align;
height: $height;
line-height: $height;
}
}
// Standard block clear and default spacing
// This tool is designed to be a standard spacing element between markup blocks.
// The only value to be adjusted is the margin-bottom spacing. This is an argument addressed
// in the ``_config.scss`` file
@mixin standard_block_spacing ($default_block_spacing: $default_block_spacing) {
@include clearfix;
margin-bottom: #{$default_block_spacing / $em}em;
}
// This mixin allows for quick application of a UI to the <hr> tag
// All values are set in the ``_config.scss`` file
@mixin standard_hr ($standard_border_style: $standard_border_style, $standard_hr_width: $standard_hr_width, $standard_hr_spacing: $standard_hr_spacing, $standard_hr_color: $standard_hr_color){
border-bottom: $standard_hr_width $standard_border_style $standard_hr_color;
padding-bottom: #{$standard_hr_spacing / $em}rem;
margin-bottom: #{$standard_hr_spacing / $em}rem;
}
// This series of mixins sets default values for consistant use of text and box shadows
// throughout your site. Values are set in the ``_config.scss`` file
@mixin primary_text_shadow ($h-shadow: $h-shadow, $v-shadow: $v-shadow, $blur: $blur) {
@include text_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
}
@mixin disabled_text_shadow ($h-shadow: $h-shadow, $v-shadow: $v-shadow, $blur: $blur) {
@include text_shadow (fade-out($shadow_color, 0.5), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
}
@mixin primary_box_shadow ($h-shadow: $h-shadow, $v-shadow: $v-shadow, $blur: $blur) {
@include box_shadow ($shadow_color, #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
}
@mixin disabled_box_shadow ($h-shadow: $h-shadow, $v-shadow: $v-shadow, $blur: $blur) {
@include box_shadow (fade-out($shadow_color, 0.4), #{$h-shadow / $em}em #{$v-shadow / $em}em #{$blur / $em}em);
}
Jump to Line
Something went wrong with that request. Please try again.