Commit e11c8536 by Brian Talbot

certificates: updating app copies of Bourbon and Neat Sass utilities

parent 31a5fb31
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
html {
box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit; }
.view-valid-certificate .accomplishment-details .list-metadata .item:last-child, .view-validate-certificate .list-instructions .item:last-child, .view-validate-certificate .list-instructions .item .instruction-details:last-child {
margin-bottom: 0;
margin-right: 0;
......@@ -694,12 +695,10 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
line-height: 1.86rem; }
.view-certificate .content-supplemental .list-actions .action, .view-validate-certificate .support .list-actions .action {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
-moz-transition: color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
transition: color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
box-sizing: border-box;
display: inline-block;
cursor: pointer;
text-decoration: none; }
......@@ -751,10 +750,10 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
max-width: 1280px;
margin-left: auto;
margin-right: auto; }
.header-app:after {
.header-app::after {
clear: both;
content: "";
display: table;
clear: both; }
display: table; }
.title-logo {
text-align: center; }
......@@ -786,10 +785,10 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
border-top: 2px solid #eaebeb;
margin-top: 20px;
padding-top: 20px; }
.footer-app:after {
.footer-app::after {
clear: both;
content: "";
display: table;
clear: both; }
display: table; }
.footer-app-copyright {
float: left;
......@@ -902,10 +901,10 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
max-width: 1280px;
margin-left: auto;
margin-right: auto; }
.view-certificate .content:after {
.view-certificate .content::after {
clear: both;
content: "";
display: table;
clear: both; }
display: table; }
.view-certificate .status {
display: block;
padding: 20px 40px;
......@@ -915,10 +914,10 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
color: white;
text-transform: uppercase;
letter-spacing: 0.1rem; }
.view-certificate .status:after {
.view-certificate .status::after {
clear: both;
content: "";
display: table;
clear: both; }
display: table; }
@media screen and (min-width: 500px) and (max-width: 759px) {
.view-certificate .status {
padding: 20px 20px; } }
......@@ -1036,7 +1035,7 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
.view-certificate.is-honorcode .certificate-type {
color: #88c7ec; }
.view-certificate.is-idverified .status {
background: #88c7ec; }
background: #3aa2e0; }
.view-certificate.is-idverified .accomplishment {
background: white url("../images/logo-idverified-cropped.png") bottom left no-repeat;
background-size: 75%; }
......@@ -1077,10 +1076,10 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
border-radius: 2px;
border: 1px solid #eaebeb;
background: white; }
.view-valid-certificate .accomplishment:after {
.view-valid-certificate .accomplishment::after {
clear: both;
content: "";
display: table;
clear: both; }
display: table; }
@media screen and (min-width: 500px) and (max-width: 759px) {
.view-valid-certificate .accomplishment {
padding: 20px 20px; } }
......@@ -1224,14 +1223,14 @@ body, .view-validate-certificate .list-requirements .item, .view-validate-certif
border-radius: 2px;
border: 1px solid #eaebeb;
background: white; }
.view-invalid-certificate .feedback:after {
.view-invalid-certificate .feedback::after {
clear: both;
content: "";
display: table;
clear: both; }
.view-invalid-certificate .feedback:after {
display: table; }
.view-invalid-certificate .feedback::after {
clear: both;
content: "";
display: table;
clear: both; }
display: table; }
@media screen and (min-width: 500px) and (max-width: 759px) {
.view-invalid-certificate .feedback {
padding: 20px 20px; } }
......
......@@ -3,8 +3,8 @@
// archetype: buttons
%btn {
@include box-sizing(border-box);
@include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
box-sizing: border-box;
display: inline-block;
cursor: pointer;
text-decoration: none;
......
......@@ -43,7 +43,7 @@
// UI - wrapper elements
%ui-wrapper {
@include clearfix();
@include box-sizing(border-box);
box-sizing: border-box;
width: 100%;
}
......
// Settings
// Bourbon 4.2.1
// http://bourbon.io
// Copyright 2011-2015 thoughtbot, inc.
// MIT License
@import "settings/prefixer";
@import "settings/px-to-em";
@import "settings/asset-pipeline";
// Custom Helpers
@import "functions/assign-inputs";
@import "functions/contains";
@import "functions/contains-falsy";
@import "functions/is-length";
@import "functions/is-light";
@import "functions/is-number";
@import "functions/is-size";
@import "functions/px-to-em";
@import "functions/px-to-rem";
@import "functions/shade";
@import "functions/strip-units";
@import "functions/tint";
@import "functions/transition-property-name";
@import "functions/unpack";
@import "functions/modular-scale";
@import "helpers/convert-units";
@import "helpers/directional-values";
@import "helpers/font-source-declaration";
@import "helpers/gradient-positions-parser";
@import "helpers/is-num";
@import "helpers/linear-angle-parser";
@import "helpers/linear-gradient-parser";
@import "helpers/linear-positions-parser";
......@@ -18,62 +38,50 @@
@import "helpers/shape-size-stripper";
@import "helpers/str-to-num";
// Custom Functions
@import "functions/assign";
@import "functions/color-lightness";
@import "functions/flex-grid";
@import "functions/golden-ratio";
@import "functions/grid-width";
@import "functions/modular-scale";
@import "functions/px-to-em";
@import "functions/px-to-rem";
@import "functions/strip-units";
@import "functions/tint-shade";
@import "functions/transition-property-name";
@import "functions/unpack";
// CSS3 Mixins
@import "css3/animation";
@import "css3/appearance";
@import "css3/backface-visibility";
@import "css3/background";
@import "css3/background-image";
@import "css3/border-image";
@import "css3/border-radius";
@import "css3/box-sizing";
@import "css3/calc";
@import "css3/columns";
@import "css3/filter";
@import "css3/flex-box";
@import "css3/font-face";
@import "css3/font-feature-settings";
@import "css3/hyphens";
@import "css3/hidpi-media-query";
@import "css3/hyphens";
@import "css3/image-rendering";
@import "css3/keyframes";
@import "css3/linear-gradient";
@import "css3/perspective";
@import "css3/placeholder";
@import "css3/radial-gradient";
@import "css3/selection";
@import "css3/text-decoration";
@import "css3/transform";
@import "css3/transition";
@import "css3/user-select";
@import "css3/placeholder";
// Addons & other mixins
@import "addons/button";
@import "addons/border-color";
@import "addons/border-radius";
@import "addons/border-style";
@import "addons/border-width";
@import "addons/buttons";
@import "addons/clearfix";
@import "addons/directional-values";
@import "addons/ellipsis";
@import "addons/font-family";
@import "addons/font-stacks";
@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/margin";
@import "addons/padding";
@import "addons/position";
@import "addons/prefixer";
@import "addons/retina-image";
@import "addons/size";
@import "addons/text-inputs";
@import "addons/timing-functions";
@import "addons/triangle";
@import "addons/word-wrap";
// Soon to be deprecated Mixins
@import "bourbon-deprecated-upcoming";
@charset "UTF-8";
/// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include border-color(#a60b55 #76cd9c null #e8ae1a);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-left-color: #e8ae1a;
/// border-right-color: #76cd9c;
/// border-top-color: #a60b55;
/// }
///
/// @require {mixin} directional-property
///
/// @output `border-color`
@mixin border-color($vals...) {
@include directional-property(border, color, $vals...);
}
@charset "UTF-8";
/// Provides a quick method for targeting `border-radius` on both corners on the side of a box.
///
/// @param {Number} $radii
/// List of arguments
///
/// @example scss - Usage
/// .element-one {
/// @include border-top-radius(5px);
/// }
///
/// .element-two {
/// @include border-left-radius(3px);
/// }
///
/// @example css - CSS Output
/// .element-one {
/// border-top-left-radius: 5px;
/// border-top-right-radius: 5px;
/// }
///
/// .element-two {
/// border-bottom-left-radius: 3px;
/// border-top-left-radius: 3px;
/// }
///
/// @output `border-radius`
@mixin border-top-radius($radii) {
border-top-left-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-right-radius($radii) {
border-bottom-right-radius: $radii;
border-top-right-radius: $radii;
}
@mixin border-bottom-radius($radii) {
border-bottom-left-radius: $radii;
border-bottom-right-radius: $radii;
}
@mixin border-left-radius($radii) {
border-bottom-left-radius: $radii;
border-top-left-radius: $radii;
}
@charset "UTF-8";
/// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include border-style(dashed null solid);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-bottom-style: solid;
/// border-top-style: dashed;
/// }
///
/// @require {mixin} directional-property
///
/// @output `border-style`
@mixin border-style($vals...) {
@include directional-property(border, style, $vals...);
}
@charset "UTF-8";
/// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include border-width(1em null 20px);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-bottom-width: 20px;
/// border-top-width: 1em;
/// }
///
/// @require {mixin} directional-property
///
/// @output `border-width`
@mixin border-width($vals...) {
@include directional-property(border, width, $vals...);
}
@charset "UTF-8";
/// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`.
///
/// @example scss - Usage
/// #{$all-buttons} {
/// background-color: #f00;
/// }
///
/// #{$all-buttons-focus},
/// #{$all-buttons-hover} {
/// background-color: #0f0;
/// }
///
/// #{$all-buttons-active} {
/// background-color: #00f;
/// }
///
/// @example css - CSS Output
/// button,
/// input[type="button"],
/// input[type="reset"],
/// input[type="submit"] {
/// background-color: #f00;
/// }
///
/// button:focus,
/// input[type="button"]:focus,
/// input[type="reset"]:focus,
/// input[type="submit"]:focus,
/// button:hover,
/// input[type="button"]:hover,
/// input[type="reset"]:hover,
/// input[type="submit"]:hover {
/// background-color: #0f0;
/// }
///
/// button:active,
/// input[type="button"]:active,
/// input[type="reset"]:active,
/// input[type="submit"]:active {
/// background-color: #00f;
/// }
///
/// @require assign-inputs
///
/// @type List
///
/// @todo Remove double assigned variables (Lines 59–62) in v5.0.0
$buttons-list: 'button',
'input[type="button"]',
'input[type="reset"]',
'input[type="submit"]';
$all-buttons: assign-inputs($buttons-list);
$all-buttons-active: assign-inputs($buttons-list, active);
$all-buttons-focus: assign-inputs($buttons-list, focus);
$all-buttons-hover: assign-inputs($buttons-list, hover);
$all-button-inputs: $all-buttons;
$all-button-inputs-active: $all-buttons-active;
$all-button-inputs-focus: $all-buttons-focus;
$all-button-inputs-hover: $all-buttons-hover;
// Modern micro clearfix provides an easy way to contain floats without adding additional markup.
//
// Example usage:
//
// // Contain all floats within .wrapper
// .wrapper {
// @include clearfix;
// .content,
// .sidebar {
// float : left;
// }
// }
@charset "UTF-8";
/// Provides an easy way to include a clearfix for containing floats.
///
/// @link http://cssmojo.com/latest_new_clearfix_so_far/
///
/// @example scss - Usage
/// .element {
/// @include clearfix;
/// }
///
/// @example css - CSS Output
/// .element::after {
/// clear: both;
/// content: "";
/// display: table;
/// }
@mixin clearfix {
&:after {
content:"";
display:table;
clear:both;
&::after {
clear: both;
content: "";
display: table;
}
}
// Acknowledgements
// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)
// directional-property mixins are shorthands
// for writing properties like the following
//
// @include margin(null 0 10px);
// ------
// margin-right: 0;
// margin-bottom: 10px;
// margin-left: 0;
//
// - or -
//
// @include border-style(dotted null);
// ------
// border-top-style: dotted;
// border-bottom-style: dotted;
//
// ------
//
// Note: You can also use false instead of null
@function collapse-directionals($vals) {
$output: null;
$A: nth( $vals, 1 );
$B: if( length($vals) < 2, $A, nth($vals, 2));
$C: if( length($vals) < 3, $A, nth($vals, 3));
$D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
@if $A == 0 { $A: 0 }
@if $B == 0 { $B: 0 }
@if $C == 0 { $C: 0 }
@if $D == 0 { $D: 0 }
@if $A == $B and $A == $C and $A == $D { $output: $A }
@else if $A == $C and $B == $D { $output: $A $B }
@else if $B == $D { $output: $A $B $C }
@else { $output: $A $B $C $D }
@return $output;
}
@function contains-falsy($list) {
@each $item in $list {
@if not $item {
@return true;
}
}
@return false;
}
@mixin directional-property($pre, $suf, $vals) {
// Property Names
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
$all: $pre + if($suf, "-#{$suf}", "");
$vals: collapse-directionals($vals);
@if contains-falsy($vals) {
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
@if length($vals) == 1 {
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
} @else {
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
}
// prop: top/bottom right/left
@if length($vals) == 2 {
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
// prop: top right/left bottom
} @else if length($vals) == 3 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
// prop: top right bottom left
} @else if length($vals) == 4 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
}
// prop: top/right/bottom/left
} @else {
#{$all}: $vals;
}
}
@mixin margin($vals...) {
@include directional-property(margin, false, $vals...);
}
@mixin padding($vals...) {
@include directional-property(padding, false, $vals...);
}
@mixin border-style($vals...) {
@include directional-property(border, style, $vals...);
}
@mixin border-color($vals...) {
@include directional-property(border, color, $vals...);
}
@mixin border-width($vals...) {
@include directional-property(border, width, $vals...);
}
@charset "UTF-8";
/// Truncates text and adds an ellipsis to represent overflow.
///
/// @param {Number} $width [100%]
/// Max-width for the string to respect before being truncated
///
/// @example scss - Usage
/// .element {
/// @include ellipsis;
/// }
///
/// @example css - CSS Output
/// .element {
/// display: inline-block;
/// max-width: 100%;
/// overflow: hidden;
/// text-overflow: ellipsis;
/// white-space: nowrap;
/// word-wrap: normal;
/// }
@mixin ellipsis($width: 100%) {
display: inline-block;
max-width: $width;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
$verdana: Verdana, Geneva, sans-serif;
@charset "UTF-8";
/// Georgia font stack.
///
/// @type List
$georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
/// Helvetica font stack.
///
/// @type List
$helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
/// Lucida Grande font stack.
///
/// @type List
$lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
/// Monospace font stack.
///
/// @type List
$monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
/// Verdana font stack.
///
/// @type List
$verdana: "Verdana", "Geneva", sans-serif;
@mixin hide-text {
/// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
///
/// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
///
/// @example scss - Usage
/// .element {
/// @include hide-text;
/// }
///
/// @example css - CSS Output
/// .element {
/// overflow: hidden;
/// text-indent: 101%;
/// white-space: nowrap;
/// }
///
/// @todo Remove height argument in v5.0.0
@mixin hide-text($height: null) {
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
&:before {
content: "";
display: block;
width: 0;
height: 100%;
@if $height {
@warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
}
}
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
// Bare inputs
//************************************************************************//
$all-text-inputs: assign-inputs($inputs-list);
// Hover Pseudo-class
//************************************************************************//
$all-text-inputs-hover: assign-inputs($inputs-list, hover);
// Focus Pseudo-class
//************************************************************************//
$all-text-inputs-focus: assign-inputs($inputs-list, focus);
// You must use interpolation on the variable:
// #{$all-text-inputs}
// #{$all-text-inputs-hover}
// #{$all-text-inputs-focus}
// Example
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;
// }
//************************************************************************//
// Generate a variable ($all-button-inputs) with a list of all html5
// input types that have a button-based input, excluding button.
//************************************************************************//
$inputs-button-list: 'input[type="button"]',
'input[type="reset"]',
'input[type="submit"]';
// Bare inputs
//************************************************************************//
$all-button-inputs: assign-inputs($inputs-button-list);
// Hover Pseudo-class
//************************************************************************//
$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
// Focus Pseudo-class
//************************************************************************//
$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
// Active Pseudo-class
//************************************************************************//
$all-button-inputs-active: assign-inputs($inputs-button-list, active);
// You must use interpolation on the variable:
// #{$all-button-inputs}
// #{$all-button-inputs-hover}
// #{$all-button-inputs-focus}
// #{$all-button-inputs-active}
// Example
//************************************************************************//
// #{$all-button-inputs}, button {
// border: 1px solid red;
// }
@charset "UTF-8";
/// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include margin(null 10px 3em 20vh);
/// }
///
/// @example css - CSS Output
/// .element {
/// margin-bottom: 3em;
/// margin-left: 20vh;
/// margin-right: 10px;
/// }
///
/// @require {mixin} directional-property
///
/// @output `margin`
@mixin margin($vals...) {
@include directional-property(margin, false, $vals...);
}
@charset "UTF-8";
/// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
///
/// @param {Arglist} $vals
/// List of arguments
///
/// @example scss - Usage
/// .element {
/// @include padding(12vh null 10px 5%);
/// }
///
/// @example css - CSS Output
/// .element {
/// padding-bottom: 10px;
/// padding-left: 5%;
/// padding-top: 12vh;
/// }
///
/// @require {mixin} directional-property
///
/// @output `padding`
@mixin padding($vals...) {
@include directional-property(padding, false, $vals...);
}
@mixin position ($position: relative, $coordinates: null null null null) {
@charset "UTF-8";
/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
///
/// @param {Position} $position [relative]
/// A CSS position value
///
/// @param {Arglist} $coordinates [null null null null]
/// List of values that correspond to the 4-value syntax for the edges of a box
///
/// @example scss - Usage
/// .element {
/// @include position(absolute, 0 null null 10em);
/// }
///
/// @example css - CSS Output
/// .element {
/// left: 10em;
/// position: absolute;
/// top: 0;
/// }
///
/// @require {function} is-length
/// @require {function} unpack
@mixin position($position: relative, $coordinates: null null null null) {
@if type-of($position) == list {
$coordinates: $position;
$position: relative;
......@@ -7,26 +31,18 @@
$coordinates: unpack($coordinates);
$top: nth($coordinates, 1);
$right: nth($coordinates, 2);
$bottom: nth($coordinates, 3);
$left: nth($coordinates, 4);
$offsets: (
top: nth($coordinates, 1),
right: nth($coordinates, 2),
bottom: nth($coordinates, 3),
left: nth($coordinates, 4)
);
position: $position;
@if ($top and $top == auto) or (type-of($top) == number) {
top: $top;
}
@if ($right and $right == auto) or (type-of($right) == number) {
right: $right;
}
@if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
bottom: $bottom;
}
@if ($left and $left == auto) or (type-of($left) == number) {
left: $left;
@each $offset, $value in $offsets {
@if is-length($value) {
#{$offset}: $value;
}
}
}
//************************************************************************//
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
//************************************************************************//
// Variables located in /settings/_prefixer.scss
@charset "UTF-8";
@mixin prefixer ($property, $value, $prefixes) {
/// A mixin for generating vendor prefixes on non-standardized properties.
///
/// @param {String} $property
/// Property to prefix
///
/// @param {*} $value
/// Value to use
///
/// @param {List} $prefixes
/// Prefixes to define
///
/// @example scss - Usage
/// .element {
/// @include prefixer(border-radius, 10px, webkit ms spec);
/// }
///
/// @example css - CSS Output
/// .element {
/// -webkit-border-radius: 10px;
/// -moz-border-radius: 10px;
/// border-radius: 10px;
/// }
///
/// @require {variable} $prefix-for-webkit
/// @require {variable} $prefix-for-mozilla
/// @require {variable} $prefix-for-microsoft
/// @require {variable} $prefix-for-opera
/// @require {variable} $prefix-for-spec
@mixin prefixer($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
@if $prefix-for-webkit {
-webkit-#{$property}: $value;
}
}
@else if $prefix == moz {
} @else if $prefix == moz {
@if $prefix-for-mozilla {
-moz-#{$property}: $value;
}
}
@else if $prefix == ms {
} @else if $prefix == ms {
@if $prefix-for-microsoft {
-ms-#{$property}: $value;
}
}
@else if $prefix == o {
} @else if $prefix == o {
@if $prefix-for-opera {
-o-#{$property}: $value;
}
}
@else if $prefix == spec {
} @else if $prefix == spec {
@if $prefix-for-spec {
#{$property}: $value;
}
}
@else {
} @else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
......
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
@if $asset-pipeline {
background-image: image-url("#{$filename}.#{$extension}");
}
@else {
} @else {
background-image: url("#{$filename}.#{$extension}");
}
......@@ -10,22 +9,17 @@
@if $asset-pipeline {
@if $retina-filename {
background-image: image-url("#{$retina-filename}.#{$extension}");
}
@else {
} @else {
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
}
}
@else {
} @else {
@if $retina-filename {
background-image: url("#{$retina-filename}.#{$extension}");
}
@else {
} @else {
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
}
}
background-size: $background-size;
}
}
@mixin size($size) {
$height: nth($size, 1);
$width: $height;
@charset "UTF-8";
@if length($size) > 1 {
$height: nth($size, 2);
/// Sets the `width` and `height` of the element.
///
/// @param {List} $size
/// A list of at most 2 size values.
///
/// If there is only a single value in `$size` it is used for both width and height. All units are supported.
///
/// @example scss - Usage
/// .first-element {
/// @include size(2em);
/// }
///
/// .second-element {
/// @include size(auto 10em);
/// }
///
/// @example css - CSS Output
/// .first-element {
/// width: 2em;
/// height: 2em;
/// }
///
/// .second-element {
/// width: auto;
/// height: 10em;
/// }
///
/// @todo Refactor in 5.0.0 to use a comma-separated argument
@mixin size($value) {
$width: nth($value, 1);
$height: $width;
@if length($value) > 1 {
$height: nth($value, 2);
}
@if $height == auto or (type-of($height) == number and not unitless($height)) {
@if is-size($height) {
height: $height;
} @else {
@warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
}
@if $width == auto or (type-of($width) == number and not unitless($width)) {
@if is-size($width) {
width: $width;
} @else {
@warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
}
}
@charset "UTF-8";
/// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
///
/// @example scss - Usage
/// #{$all-text-inputs} {
/// border: 1px solid #f00;
/// }
///
/// #{$all-text-inputs-focus},
/// #{$all-text-inputs-hover} {
/// border: 1px solid #0f0;
/// }
///
/// #{$all-text-inputs-active} {
/// border: 1px solid #00f;
/// }
///
/// @example css - CSS Output
/// input[type="color"],
/// input[type="date"],
/// input[type="datetime"],
/// input[type="datetime-local"],
/// input[type="email"],
/// input[type="month"],
/// input[type="number"],
/// input[type="password"],
/// input[type="search"],
/// input[type="tel"],
/// input[type="text"],
/// input[type="time"],
/// input[type="url"],
/// input[type="week"],
/// textarea {
/// border: 1px solid #f00;
/// }
///
/// input[type="color"]:focus,
/// input[type="date"]:focus,
/// input[type="datetime"]:focus,
/// input[type="datetime-local"]:focus,
/// input[type="email"]:focus,
/// input[type="month"]:focus,
/// input[type="number"]:focus,
/// input[type="password"]:focus,
/// input[type="search"]:focus,
/// input[type="tel"]:focus,
/// input[type="text"]:focus,
/// input[type="time"]:focus,
/// input[type="url"]:focus,
/// input[type="week"]:focus,
/// textarea:focus,
/// input[type="color"]:hover,
/// input[type="date"]:hover,
/// input[type="datetime"]:hover,
/// input[type="datetime-local"]:hover,
/// input[type="email"]:hover,
/// input[type="month"]:hover,
/// input[type="number"]:hover,
/// input[type="password"]:hover,
/// input[type="search"]:hover,
/// input[type="tel"]:hover,
/// input[type="text"]:hover,
/// input[type="time"]:hover,
/// input[type="url"]:hover,
/// input[type="week"]:hover,
/// textarea:hover {
/// border: 1px solid #0f0;
/// }
///
/// input[type="color"]:active,
/// input[type="date"]:active,
/// input[type="datetime"]:active,
/// input[type="datetime-local"]:active,
/// input[type="email"]:active,
/// input[type="month"]:active,
/// input[type="number"]:active,
/// input[type="password"]:active,
/// input[type="search"]:active,
/// input[type="tel"]:active,
/// input[type="text"]:active,
/// input[type="time"]:active,
/// input[type="url"]:active,
/// input[type="week"]:active,
/// textarea:active {
/// border: 1px solid #00f;
/// }
///
/// @require assign-inputs
///
/// @type List
$text-inputs-list: 'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="email"]',
'input[type="month"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="time"]',
'input[type="url"]',
'input[type="week"]',
'textarea';
$all-text-inputs: assign-inputs($text-inputs-list);
$all-text-inputs-active: assign-inputs($text-inputs-list, active);
$all-text-inputs-focus: assign-inputs($text-inputs-list, focus);
$all-text-inputs-hover: assign-inputs($text-inputs-list, hover);
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
@charset "UTF-8";
/// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
///
/// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
///
/// @type cubic-bezier
// EASE IN
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
......@@ -11,7 +15,6 @@ $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
// EASE OUT
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
......@@ -21,7 +24,6 @@ $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
// EASE IN OUT
$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
......
@mixin triangle ($size, $color, $direction) {
height: 0;
width: 0;
@mixin triangle($size, $color, $direction) {
$width: nth($size, 1);
$height: nth($size, length($size));
$foreground-color: nth($color, 1);
$background-color: if(length($color) == 2, nth($color, 2), transparent);
height: 0;
width: 0;
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
$width: $width / 2;
$height: if(length($size) > 1, $height, $height/2);
@if $direction == up {
border-bottom: $height solid $foreground-color;
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-bottom: $height solid $foreground-color;
} @else if $direction == right {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-left: $height solid $foreground-color;
border-top: $width solid $background-color;
} @else if $direction == down {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-top: $height solid $foreground-color;
} @else if $direction == left {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-right: $height solid $foreground-color;
border-top: $width solid $background-color;
}
}
@else if ($direction == up-right) or ($direction == up-left) {
} @else if ($direction == up-right) or ($direction == up-left) {
border-top: $height solid $foreground-color;
@if $direction == up-right {
border-left: $width solid $background-color;
} @else if $direction == up-left {
border-right: $width solid $background-color;
}
}
@else if ($direction == down-right) or ($direction == down-left) {
} @else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $height solid $foreground-color;
@if $direction == down-right {
border-left: $width solid $background-color;
} @else if $direction == down-left {
border-right: $width solid $background-color;
}
}
@else if ($direction == inset-up) {
border-width: $height $width;
border-style: solid;
} @else if ($direction == inset-up) {
border-color: $background-color $background-color $foreground-color;
}
@else if ($direction == inset-down) {
border-width: $height $width;
border-style: solid;
border-width: $height $width;
} @else if ($direction == inset-down) {
border-color: $foreground-color $background-color $background-color;
}
@else if ($direction == inset-right) {
border-width: $width $height;
border-style: solid;
border-width: $height $width;
} @else if ($direction == inset-right) {
border-color: $background-color $background-color $background-color $foreground-color;
}
@else if ($direction == inset-left) {
border-width: $width $height;
border-style: solid;
border-width: $width $height;
} @else if ($direction == inset-left) {
border-color: $background-color $foreground-color $background-color $background-color;
border-style: solid;
border-width: $width $height;
}
}
@charset "UTF-8";
/// Provides an easy way to change the `word-wrap` property.
///
/// @param {String} $wrap [break-word]
/// Value for the `word-break` property.
///
/// @example scss - Usage
/// .wrapper {
/// @include word-wrap(break-word);
/// }
///
/// @example css - CSS Output
/// .wrapper {
/// overflow-wrap: break-word;
/// word-break: break-all;
/// word-wrap: break-word;
/// }
@mixin word-wrap($wrap: break-word) {
overflow-wrap: $wrap;
word-wrap: $wrap;
@if $wrap == break-word {
overflow-wrap: break-word;
word-break: break-all;
} @else {
word-break: $wrap;
}
}
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
// Official animation shorthand property.
@mixin animation ($animations...) {
@mixin animation($animations...) {
@include prefixer(animation, $animations, webkit moz spec);
}
// Individual Animation Properties
@mixin animation-name ($names...) {
@mixin animation-name($names...) {
@include prefixer(animation-name, $names, webkit moz spec);
}
@mixin animation-duration ($times...) {
@mixin animation-duration($times...) {
@include prefixer(animation-duration, $times, webkit moz spec);
}
@mixin animation-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out
@mixin animation-timing-function($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out
@include prefixer(animation-timing-function, $motions, webkit moz spec);
}
@mixin animation-iteration-count ($values...) {
// infinite | <number>
@mixin animation-iteration-count($values...) {
// infinite | <number>
@include prefixer(animation-iteration-count, $values, webkit moz spec);
}
@mixin animation-direction ($directions...) {
// normal | alternate
@mixin animation-direction($directions...) {
// normal | alternate
@include prefixer(animation-direction, $directions, webkit moz spec);
}
@mixin animation-play-state ($states...) {
// running | paused
@mixin animation-play-state($states...) {
// running | paused
@include prefixer(animation-play-state, $states, webkit moz spec);
}
@mixin animation-delay ($times...) {
@mixin animation-delay($times...) {
@include prefixer(animation-delay, $times, webkit moz spec);
}
@mixin animation-fill-mode ($modes...) {
// none | forwards | backwards | both
@mixin animation-fill-mode($modes...) {
// none | forwards | backwards | both
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
}
@mixin appearance ($value) {
@mixin appearance($value) {
@include prefixer(appearance, $value, webkit moz ms o spec);
}
//************************************************************************//
// Backface-visibility mixin
//************************************************************************//
@mixin backface-visibility($visibility) {
@include prefixer(backface-visibility, $visibility, webkit spec);
}
......@@ -17,7 +17,7 @@
@if $url-str == "url" {
$webkit-image: $image;
$spec-image: $image;
$spec-image: $image;
}
@else if $gradient-type == "linear" {
......
......@@ -12,7 +12,7 @@
$spec-background: ();
$background-type: type-of($background);
@if $background-type == string or list {
@if $background-type == string or $background-type == list {
$background-str: if($background-type == list, nth($background, 1), $background);
$url-str: str-slice($background-str, 0, 3);
......@@ -20,7 +20,7 @@
@if $url-str == "url" {
$webkit-background: $background;
$spec-background: $background;
$spec-background: $background;
}
@else if $gradient-type == "linear" {
......@@ -37,13 +37,13 @@
@else {
$webkit-background: $background;
$spec-background: $background;
$spec-background: $background;
}
}
@else {
$webkit-background: $background;
$spec-background: $background;
$spec-background: $background;
}
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
......
......@@ -15,7 +15,7 @@
@if $url-str == "url" {
$webkit-border: $border;
$spec-border: $border;
$spec-border: $border;
}
@else if $gradient-type == "linear" {
......@@ -32,13 +32,13 @@
@else {
$webkit-border: $border;
$spec-border: $border;
$spec-border: $border;
}
}
@else {
$webkit-border: $border;
$spec-border: $border;
$spec-border: $border;
}
$webkit-borders: append($webkit-borders, $webkit-border, comma);
......
//************************************************************************//
// Shorthand Border-radius mixins
//************************************************************************//
@mixin border-top-radius($radii) {
@include prefixer(border-top-left-radius, $radii, spec);
@include prefixer(border-top-right-radius, $radii, spec);
}
@mixin border-bottom-radius($radii) {
@include prefixer(border-bottom-left-radius, $radii, spec);
@include prefixer(border-bottom-right-radius, $radii, spec);
}
@mixin border-left-radius($radii) {
@include prefixer(border-top-left-radius, $radii, spec);
@include prefixer(border-bottom-left-radius, $radii, spec);
}
@mixin border-right-radius($radii) {
@include prefixer(border-top-right-radius, $radii, spec);
@include prefixer(border-bottom-right-radius, $radii, spec);
}
@mixin box-sizing ($box) {
// content-box | border-box | inherit
@include prefixer(box-sizing, $box, webkit moz spec);
}
@mixin calc($property, $value) {
#{$property}: -webkit-calc(#{$value});
#{$property}: calc(#{$value});
#{$property}: calc(#{$value});
}
@mixin columns($arg: auto) {
// <column-count> || <column-width>
// <column-count> || <column-width>
@include prefixer(columns, $arg, webkit moz spec);
}
@mixin column-count($int: auto) {
// auto || integer
// auto || integer
@include prefixer(column-count, $int, webkit moz spec);
}
@mixin column-gap($length: normal) {
// normal || length
// normal || length
@include prefixer(column-gap, $length, webkit moz spec);
}
@mixin column-fill($arg: auto) {
// auto || length
// auto || length
@include prefixer(column-fill, $arg, webkit moz spec);
}
@mixin column-rule($arg) {
// <border-width> || <border-style> || <color>
// <border-width> || <border-style> || <color>
@include prefixer(column-rule, $arg, webkit moz spec);
}
......@@ -28,7 +28,7 @@
}
@mixin column-rule-style($style: none) {
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
@include prefixer(column-rule-style, $style, webkit moz spec);
}
......@@ -37,11 +37,11 @@
}
@mixin column-span($arg: none) {
// none || all
// none || all
@include prefixer(column-span, $arg, webkit moz spec);
}
@mixin column-width($length: auto) {
// auto || length
// auto || length
@include prefixer(column-width, $length, webkit moz spec);
}
......@@ -2,4 +2,3 @@
// <filter-function> [<filter-function]* | none
@include prefixer(filter, $function, webkit spec);
}
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
@mixin font-face(
$font-family,
$file-path,
$weight: normal,
$style: normal,
$asset-pipeline: $asset-pipeline,
$file-formats: eot woff2 woff ttf svg) {
$font-url-prefix: font-url-prefixer($asset-pipeline);
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline) {
@font-face {
font-family: $font-family;
font-weight: $weight;
font-style: $style;
font-weight: $weight;
@if $asset-pipeline == true {
src: font-url('#{$file-path}.eot');
src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
font-url('#{$file-path}.woff') format('woff'),
font-url('#{$file-path}.ttf') format('truetype'),
font-url('#{$file-path}.svg##{$font-family}') format('svg');
} @else {
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
}
src: font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url-prefix
);
}
}
// Font feature settings mixin and property default.
// Examples: @include font-feature-settings("liga");
// @include font-feature-settings("lnum" false);
// @include font-feature-settings("pnum" 1, "kern" 0);
// @include font-feature-settings("ss01", "ss02");
@mixin font-feature-settings($settings...) {
@if length($settings) == 0 { $settings: none; }
@include prefixer(font-feature-settings, $settings, webkit moz ms spec);
}
\ No newline at end of file
}
......@@ -3,8 +3,8 @@
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
only screen and (min-resolution: #{round($ratio*96)}dpi),
only screen and (min-resolution: #{$ratio}dppx) {
only screen and (min-resolution: round($ratio * 96dpi)),
only screen and (min-resolution: $ratio * 1dppx) {
@content;
}
}
@mixin hyphens($hyphenation: none) {
// none | manual | auto
// none | manual | auto
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
}
\ No newline at end of file
}
@mixin image-rendering ($mode:auto) {
@if ($mode == crisp-edges) {
-ms-interpolation-mode: nearest-neighbor; // IE8+
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; // IE8+
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
@else {
image-rendering: $mode;
image-rendering: $mode;
}
}
......@@ -13,6 +13,7 @@
@content;
}
}
@if $original-prefix-for-mozilla {
@include disable-prefix-for-all();
$prefix-for-mozilla: true !global;
......
@mixin linear-gradient($pos, $G1, $G2: null,
$G3: null, $G4: null,
$G5: null, $G6: null,
$G7: null, $G8: null,
$G9: null, $G10: null,
@mixin linear-gradient($pos, $g1, $g2: null,
$g3: null, $g4: null,
$g5: null, $g6: null,
$g7: null, $g8: null,
$g9: null, $g10: null,
$fallback: null) {
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));
......@@ -11,9 +11,9 @@
// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
$pos: null;
$g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
$g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
$pos: null;
}
@if $pos {
......@@ -22,10 +22,10 @@
$pos-spec: nth($positions, 2);
}
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1);
// Set $g1 as the default fallback color
$fallback-color: nth($g1, 1);
// If $fallback is a color use that color as the fallback color
@if (type-of($fallback) == color) or ($fallback == "transparent") {
......
// Requires Sass 3.1+
@mixin radial-gradient($G1, $G2,
$G3: null, $G4: null,
$G5: null, $G6: null,
$G7: null, $G8: null,
$G9: null, $G10: null,
@mixin radial-gradient($g1, $g2,
$g3: null, $g4: null,
$g5: null, $g6: null,
$g7: null, $g8: null,
$g9: null, $g10: null,
$pos: null,
$shape-size: null,
$fallback: null) {
$data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
$G1: nth($data, 1);
$G2: nth($data, 2);
$data: _radial-arg-parser($g1, $g2, $pos, $shape-size);
$g1: nth($data, 1);
$g2: nth($data, 2);
$pos: nth($data, 3);
$shape-size: nth($data, 4);
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
$full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;
// Strip deprecated cover/contain for spec
$shape-size-spec: _shape-size-stripper($shape-size);
// Set $G1 as the default fallback color
// Set $g1 as the default fallback color
$first-color: nth($full, 1);
$fallback-color: nth($first-color, 1);
......@@ -28,10 +28,10 @@
}
// Add Commas and spaces
$shape-size: if($shape-size, '#{$shape-size}, ', null);
$pos: if($pos, '#{$pos}, ', null);
$pos-spec: if($pos, 'at #{$pos}', null);
$shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
$shape-size: if($shape-size, "#{$shape-size}, ", null);
$pos: if($pos, "#{$pos}, ", null);
$pos-spec: if($pos, "at #{$pos}", null);
$shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} ");
background-color: $fallback-color;
background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
......
@charset "UTF-8";
/// Outputs the spec and prefixed versions of the `::selection` pseudo-element.
///
/// @param {Bool} $current-selector [false]
/// If set to `true`, it takes the current element into consideration.
///
/// @example scss - Usage
/// .element {
/// @include selection(true) {
/// background-color: #ffbb52;
/// }
/// }
///
/// @example css - CSS Output
/// .element::-moz-selection {
/// background-color: #ffbb52;
/// }
///
/// .element::selection {
/// background-color: #ffbb52;
/// }
@mixin selection($current-selector: false) {
@if $current-selector {
&::-moz-selection {
@content;
}
&::selection {
@content;
}
} @else {
::-moz-selection {
@content;
}
::selection {
@content;
}
}
}
@mixin text-decoration($value) {
// <text-decoration-line> || <text-decoration-style> || <text-decoration-color>
@include prefixer(text-decoration, $value, moz);
}
@mixin text-decoration-line($line: none) {
// none || underline || overline || line-through
@include prefixer(text-decoration-line, $line, moz);
}
@mixin text-decoration-style($style: solid) {
// solid || double || dotted || dashed || wavy
@include prefixer(text-decoration-style, $style, moz webkit);
}
@mixin text-decoration-color($color: currentColor) {
// currentColor || <color>
@include prefixer(text-decoration-color, $color, moz);
}
@mixin transform($property: none) {
// none | <transform-function>
// none | <transform-function>
@include prefixer(transform, $property, webkit moz ms o spec);
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
}
@mixin transform-style ($style: flat) {
@mixin transform-style($style: flat) {
@include prefixer(transform-style, $style, webkit moz ms o spec);
}
......@@ -3,7 +3,7 @@
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
// @include transition-property (transform, opacity);
@mixin transition ($properties...) {
@mixin transition($properties...) {
// Fix for vendor-prefix transform property
$needs-prefixes: false;
$webkit: ();
......@@ -28,15 +28,12 @@
}
$webkit: append($webkit, $list1);
$moz: append($moz, $list2);
$spec: append($spec, $list3);
}
// Create lists for non-prefixed transition properties
@else {
$webkit: append($webkit, $list, comma);
$moz: append($moz, $list, comma);
$spec: append($spec, $list, comma);
$moz: append($moz, $list2);
$spec: append($spec, $list3);
} @else {
$webkit: append($webkit, $list, comma);
$moz: append($moz, $list, comma);
$spec: append($spec, $list, comma);
}
}
......@@ -44,34 +41,31 @@
-webkit-transition: $webkit;
-moz-transition: $moz;
transition: $spec;
}
@else {
} @else {
@if length($properties) >= 1 {
@include prefixer(transition, $properties, webkit moz spec);
}
@else {
} @else {
$properties: all 0.15s ease-out 0s;
@include prefixer(transition, $properties, webkit moz spec);
}
}
}
@mixin transition-property ($properties...) {
-webkit-transition-property: transition-property-names($properties, 'webkit');
-moz-transition-property: transition-property-names($properties, 'moz');
transition-property: transition-property-names($properties, false);
@mixin transition-property($properties...) {
-webkit-transition-property: transition-property-names($properties, "webkit");
-moz-transition-property: transition-property-names($properties, "moz");
transition-property: transition-property-names($properties, false);
}
@mixin transition-duration ($times...) {
@mixin transition-duration($times...) {
@include prefixer(transition-duration, $times, webkit moz spec);
}
@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@mixin transition-timing-function($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $motions, webkit moz spec);
}
@mixin transition-delay ($times...) {
@mixin transition-delay($times...) {
@include prefixer(transition-delay, $times, webkit moz spec);
}
@mixin user-select($arg: none) {
@include prefixer(user-select, $arg, webkit moz ms spec);
@mixin user-select($value: none) {
@include prefixer(user-select, $value, webkit moz ms spec);
}
@function assign-inputs($inputs, $pseudo: null) {
$list : ();
$list: ();
@each $input in $inputs {
$input: unquote($input);
......@@ -8,4 +8,4 @@
}
@return $list;
}
\ No newline at end of file
}
// Programatically determines whether a color is light or dark
// Returns a boolean
// More details here http://robots.thoughtbot.com/closer-look-color-lightness
@function is-light($hex-color) {
$-local-red: red(rgba($hex-color, 1.0));
$-local-green: green(rgba($hex-color, 1.0));
$-local-blue: blue(rgba($hex-color, 1.0));
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
@return $-local-lightness > .6;
}
@charset "UTF-8";
/// Checks if a list does not contains a value.
///
/// @access private
///
/// @param {List} $list
/// The list to check against.
///
/// @return {Bool}
@function contains-falsy($list) {
@each $item in $list {
@if not $item {
@return true;
}
}
@return false;
}
@charset "UTF-8";
/// Checks if a list contains a value(s).
///
/// @access private
///
/// @param {List} $list
/// The list to check against.
///
/// @param {List} $values
/// A single value or list of values to check for.
///
/// @example scss - Usage
/// contains($list, $value)
///
/// @return {Bool}
@function contains($list, $values...) {
@each $value in $values {
@if type-of(index($list, $value)) != "number" {
@return false;
}
}
@return true;
}
// Flexible grid
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($width / $container-width);
}
// Flexible gutter
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
@return percentage($gutter / $container-width);
}
// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
//
// The calculation presumes that your column structure will be missing the last gutter:
//
// -- column -- gutter -- column -- gutter -- column
//
// $fg-column: 60px; // Column Width
// $fg-gutter: 25px; // Gutter Width
// $fg-max-columns: 12; // Total Columns For Main Container
//
// div {
// width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
//
// p {
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
// float: left;
// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
// }
//
// blockquote {
// float: left;
// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
// }
// }
\ No newline at end of file
@function golden-ratio($value, $increment) {
@return modular-scale($value, $increment, $golden)
}
@function grid-width($n) {
@return $n * $gw-column + ($n - 1) * $gw-gutter;
}
// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
//
// $gw-column: 100px; // Column Width
// $gw-gutter: 40px; // Gutter Width
//
// div {
// width: grid-width(4); // returns 520px;
// margin-left: $gw-gutter; // returns 40px;
// }
@charset "UTF-8";
/// Checks for a valid CSS length.
///
/// @param {String} $value
@function is-length($value) {
@return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc"
or index(auto inherit initial 0, $value)
or (type-of($value) == "number" and not(unitless($value))));
}
@charset "UTF-8";
/// Programatically determines whether a color is light or dark.
///
/// @link http://robots.thoughtbot.com/closer-look-color-lightness
///
/// @param {Color (Hex)} $color
///
/// @example scss - Usage
/// is-light($color)
///
/// @return {Bool}
@function is-light($hex-color) {
$-local-red: red(rgba($hex-color, 1));
$-local-green: green(rgba($hex-color, 1));
$-local-blue: blue(rgba($hex-color, 1));
$-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
@return $-local-lightness > 0.6;
}
@charset "UTF-8";
/// Checks for a valid number.
///
/// @param {Number} $value
///
/// @require {function} contains
@function is-number($value) {
@return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value);
}
@charset "UTF-8";
/// Checks for a valid CSS size.
///
/// @param {String} $value
///
/// @require {function} contains
/// @require {function} is-length
@function is-size($value) {
@return is-length($value)
or contains("fill" "fit-content" "min-content" "max-content", $value);
}
......@@ -17,7 +17,10 @@ $major-eleventh: 2.667;
$major-twelfth: 3;
$double-octave: 4;
@function modular-scale($value, $increment, $ratio) {
$modular-scale-ratio: $perfect-fourth !default;
$modular-scale-base: em($em-base) !default;
@function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {
$v1: nth($value, 1);
$v2: nth($value, length($value));
$value: $v1;
......
......@@ -4,10 +4,10 @@
@function em($pxval, $base: $em-base) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
$pxval: strip-units($pxval);
}
@if not unitless($base) {
$base: strip-units($base);
$base: strip-units($base);
}
@return ($pxval / $base) * 1em;
}
......@@ -4,12 +4,12 @@
@function rem($pxval) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
$pxval: strip-units($pxval);
}
$base: $em-base;
@if not unitless($base) {
$base: strip-units($base);
$base: strip-units($base);
}
@return ($pxval / $base) * 1rem;
}
@charset "UTF-8";
/// Mixes a color with black.
///
/// @param {Color} $color
///
/// @param {Number (Percentage)} $percent
/// The amount of black to be mixed in.
///
/// @example scss - Usage
/// .element {
/// background-color: shade(#ffbb52, 60%);
/// }
///
/// @example css - CSS Output
/// .element {
/// background-color: #664a20;
/// }
///
/// @return {Color}
@function shade($color, $percent) {
@return mix(#000, $color, $percent);
}
// Srtips the units from a value. e.g. 12px -> 12
@charset "UTF-8";
@function strip-units($val) {
@return ($val / ($val * 0 + 1));
/// Strips the unit from a number.
///
/// @param {Number (With Unit)} $value
///
/// @example scss - Usage
/// $dimension: strip-units(10em);
///
/// @example css - CSS Output
/// $dimension: 10;
///
/// @return {Number (Unitless)}
@function strip-units($value) {
@return ($value / ($value * 0 + 1));
}
// Add percentage of white to a color
@function tint($color, $percent){
@return mix(white, $color, $percent);
}
// Add percentage of black to a color
@function shade($color, $percent){
@return mix(black, $color, $percent);
}
@charset "UTF-8";
/// Mixes a color with white.
///
/// @param {Color} $color
///
/// @param {Number (Percentage)} $percent
/// The amount of white to be mixed in.
///
/// @example scss - Usage
/// .element {
/// background-color: tint(#6ecaa6, 40%);
/// }
///
/// @example css - CSS Output
/// .element {
/// background-color: #a8dfc9;
/// }
///
/// @return {Color}
@function tint($color, $percent) {
@return mix(#fff, $color, $percent);
}
......@@ -2,21 +2,21 @@
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
//************************************************************************//
@function transition-property-names($props, $vendor: false) {
$new-props: ();
@each $prop in $props {
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
}
$new-props: ();
@return $new-props;
@each $prop in $props {
$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
}
@return $new-props;
}
@function transition-property-name($prop, $vendor: false) {
// put other properties that need to be prefixed here aswell
@if $vendor and $prop == transform {
@return unquote('-'+$vendor+'-'+$prop);
}
@else {
@return $prop;
}
}
\ No newline at end of file
// put other properties that need to be prefixed here aswell
@if $vendor and $prop == transform {
@return unquote('-'+$vendor+'-'+$prop);
}
@else {
@return $prop;
}
}
// Convert shorthand to the 4-value syntax
@charset "UTF-8";
/// Converts shorthand to the 4-value syntax.
///
/// @param {List} $shorthand
///
/// @example scss - Usage
/// .element {
/// margin: unpack(1em 2em);
/// }
///
/// @example css - CSS Output
/// .element {
/// margin: 1em 2em 1em 2em;
/// }
@function unpack($shorthand) {
@if length($shorthand) == 1 {
@return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
}
@else if length($shorthand) == 2 {
} @else if length($shorthand) == 2 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
}
@else if length($shorthand) == 3 {
} @else if length($shorthand) == 3 {
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
}
@else {
} @else {
@return $shorthand;
}
}
......@@ -3,8 +3,8 @@
// Source: http://sassmeister.com/gist/9647408
//************************************************************************//
@function _convert-units($number, $unit) {
$strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn';
$units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
$strings: "px" "cm" "mm" "%" "ch" "pica" "in" "em" "rem" "pt" "pc" "ex" "vw" "vh" "vmin" "vmax", "deg", "rad", "grad", "turn";
$units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
$index: index($strings, $unit);
@if not $index {
......
@charset "UTF-8";
/// Directional-property mixins are shorthands for writing properties like the following
///
/// @ignore You can also use `false` instead of `null`.
///
/// @param {List} $vals
/// List of directional values
///
/// @example scss - Usage
/// .element {
/// @include border-style(dotted null);
/// @include margin(null 0 10px);
/// }
///
/// @example css - CSS Output
/// .element {
/// border-bottom-style: dotted;
/// border-top-style: dotted;
/// margin-bottom: 10px;
/// margin-left: 0;
/// margin-right: 0;
/// }
///
/// @require {function} contains-falsy
///
/// @return {List}
@function collapse-directionals($vals) {
$output: null;
$a: nth($vals, 1);
$b: if(length($vals) < 2, $a, nth($vals, 2));
$c: if(length($vals) < 3, $a, nth($vals, 3));
$d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4)));
@if $a == 0 { $a: 0; }
@if $b == 0 { $b: 0; }
@if $c == 0 { $c: 0; }
@if $d == 0 { $d: 0; }
@if $a == $b and $a == $c and $a == $d { $output: $a; }
@else if $a == $c and $b == $d { $output: $a $b; }
@else if $b == $d { $output: $a $b $c; }
@else { $output: $a $b $c $d; }
@return $output;
}
/// Output directional properties, for instance `margin`.
///
/// @access private
///
/// @param {String} $pre
/// Prefix to use
/// @param {String} $suf
/// Suffix to use
/// @param {List} $vals
/// List of values
///
/// @require {function} collapse-directionals
/// @require {function} contains-falsy
@mixin directional-property($pre, $suf, $vals) {
// Property Names
$top: $pre + "-top" + if($suf, "-#{$suf}", "");
$bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
$left: $pre + "-left" + if($suf, "-#{$suf}", "");
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
$all: $pre + if($suf, "-#{$suf}", "");
$vals: collapse-directionals($vals);
@if contains-falsy($vals) {
@if nth($vals, 1) { #{$top}: nth($vals, 1); }
@if length($vals) == 1 {
@if nth($vals, 1) { #{$right}: nth($vals, 1); }
} @else {
@if nth($vals, 2) { #{$right}: nth($vals, 2); }
}
@if length($vals) == 2 {
@if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
} @else if length($vals) == 3 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 2) { #{$left}: nth($vals, 2); }
} @else if length($vals) == 4 {
@if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
@if nth($vals, 4) { #{$left}: nth($vals, 4); }
}
} @else {
#{$all}: $vals;
}
}
// Used for creating the source string for fonts using @font-face
// Reference: http://goo.gl/Ru1bKP
@function font-url-prefixer($asset-pipeline) {
@if $asset-pipeline == true {
@return font-url;
} @else {
@return url;
}
}
@function font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url) {
$src: null;
$formats-map: (
eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
woff2: "#{$file-path}.woff2" format("woff2"),
woff: "#{$file-path}.woff" format("woff"),
ttf: "#{$file-path}.ttf" format("truetype"),
svg: "#{$file-path}.svg##{$font-family}" format("svg")
);
@each $key, $values in $formats-map {
@if contains($file-formats, $key) {
$file-path: nth($values, 1);
$font-format: nth($values, 2);
@if $asset-pipeline == true {
$src: append($src, font-url($file-path) $font-format, comma);
} @else {
$src: append($src, url($file-path) $font-format, comma);
}
}
}
@return $src;
}
//************************************************************************//
// Helper for linear-gradient-parser
//************************************************************************//
@function _is-num($char) {
$values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9;
$index: index($values, $char);
@return if($index, true, false);
}
......@@ -10,7 +10,7 @@
$has-multiple-vals: str-index($first-val, " ");
$has-single-position: unquote(_position-flipper($first-val) + "");
$has-angle: _is-num(str-slice($first-val, 0, 0));
$has-angle: is-number(str-slice($first-val, 0, 0));
@if $has-multiple-vals {
$gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
......
......@@ -54,7 +54,7 @@
}
@function _position-flipper($pos) {
@return if($pos == left, right, null)
@return if($pos == left, right, null)
if($pos == right, left, null)
if($pos == top, bottom, null)
if($pos == bottom, top, null);
......
@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
@each $value in $G1, $G2 {
@function _radial-arg-parser($g1, $g2, $pos, $shape-size) {
@each $value in $g1, $g2 {
$first-val: nth($value, 1);
$pos-type: type-of($first-val);
$spec-at-index: null;
......@@ -22,7 +22,7 @@
$pos: $pos nth($value, $i);
}
}
$G1: null;
$g1: null;
}
// If not spec calculate correct values
......@@ -37,8 +37,8 @@
$pos: $value;
@if $pos == $G1 {
$G1: null;
@if $pos == $g1 {
$g1: null;
}
}
......@@ -54,16 +54,16 @@
$shape-size: $value;
@if $value == $G1 {
$G1: null;
@if $value == $g1 {
$g1: null;
}
@else if $value == $G2 {
$G2: null;
@else if $value == $g2 {
$g2: null;
}
}
}
}
}
@return $G1, $G2, $pos, $shape-size;
@return $g1, $g2, $pos, $shape-size;
}
......@@ -18,7 +18,7 @@
$gradients: (
webkit-image: -webkit- + $prefix + $pos + $suffix,
spec-image: $image
)
);
}
@else if $is-spec-syntax == 1 {
......@@ -27,7 +27,7 @@
$gradients: (
webkit-image: -webkit- + $prefix + $pos + $suffix,
spec-image: $image
)
);
}
@else if str-index($image, "cover") or str-index($image, "contain") {
......@@ -36,14 +36,14 @@
$gradients: (
webkit-image: null,
spec-image: $image
)
);
}
@else {
$gradients: (
webkit-image: -webkit- + $image,
spec-image: $image
)
);
}
@return $gradients;
......
......@@ -10,8 +10,8 @@
$spec: "#{$shape-size-spec} #{$pos-spec}";
// Add comma
@if ($spec != ' ') {
$spec: "#{$spec},"
@if ($spec != " ") {
$spec: "#{$spec},";
}
@return $pre-spec $spec;
......
......@@ -4,7 +4,7 @@
//************************************************************************//
@function _str-to-num($string) {
// Matrices
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
$strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
$numbers: 0 1 2 3 4 5 6 7 8 9;
// Result
......@@ -17,11 +17,11 @@
$character: str-slice($string, $i, $i);
$index: index($strings, $character);
@if $character == '-' {
@if $character == "-" {
$minus: true;
}
@else if $character == '.' {
@else if $character == "." {
$divider: 1;
}
......
@charset "UTF-8";
/// A global setting to enable or disable the `$asset-pipeline` variable for all functions that accept it.
///
/// @type Bool
$asset-pipeline: false !default;
// Variable settings for /addons/prefixer.scss
@charset "UTF-8";
/// Global variables to enable or disable vendor prefixes
$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default; // required for keyframe mixin
$prefix-for-spec: true !default;
......@@ -5,3 +5,4 @@
// Settings
@import "settings/grid";
@import "settings/visual-grid";
@import "settings/disable-warnings";
// Bourbon Neat 1.6.0.pre
// MIT Licensed
// Copyright (c) 2012-2013 thoughtbot, inc.
// Neat 1.7.1
// http://neat.bourbon.io
// Copyright 2012-2015 thoughtbot, inc.
// MIT License
// Helpers
@import "neat-helpers";
// Grid
@import "grid/private";
@import "grid/reset";
@import "grid/grid";
@import "grid/box-sizing";
@import "grid/omega";
@import "grid/outer-container";
@import "grid/span-columns";
......@@ -19,3 +19,5 @@
@import "grid/media";
@import "grid/to-deprecate";
@import "grid/visual-grid";
@import "grid/display-context";
@import "grid/direction-context";
@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
@charset "UTF-8";
/// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
///
/// @param {List} $query
/// A list of media query features and values. Each `$feature` should have a corresponding `$value`.
///
/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
///
/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
///
/// @param {Number (unitless)} $total-columns ($grid-columns)
/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
///
/// @example scss - Usage
/// $mobile: new-breakpoint(max-width 480px 4);
///
/// .element {
/// @include media($mobile) {
/// @include span-columns(4);
/// }
/// }
///
/// @example css - CSS Output
/// @media screen and (max-width: 480px) {
/// .element {
/// display: block;
/// float: left;
/// margin-right: 7.42297%;
/// width: 100%;
/// }
/// .element:last-child {
/// margin-right: 0;
/// }
/// }
@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
@if length($query) == 1 {
$query: $default-feature nth($query, 1) $total-columns;
}
@else if length($query) % 2 == 0 {
} @else if is-even(length($query)) {
$query: append($query, $total-columns);
}
@if not belongs-to($query, $visual-grid-breakpoints) {
@if is-not(belongs-to($query, $visual-grid-breakpoints)) {
$visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
}
......
// Not function for Libsass compatibility
// https://github.com/sass/libsass/issues/368
@function is-not($value) {
@return if($value, false, true);
}
// Checks if a number is even
@function is-even($int) {
@if $int%2 == 0 {
@return true;
}
@return false;
@return $int % 2 == 0;
}
// Checks if an element belongs to a list
// Checks if an element belongs to a list or not
@function belongs-to($tested-item, $list) {
@each $item in $list {
@if $item == $tested-item {
@return true;
}
}
@return is-not(not-belongs-to($tested-item, $list));
}
@return false;
@function not-belongs-to($tested-item, $list) {
@return is-not(index($list, $tested-item));
}
// Contains display value
@function contains-display-value($query) {
@if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) {
@return true;
}
@return false;
@return belongs-to(table, $query)
or belongs-to(block, $query)
or belongs-to(inline-block, $query)
or belongs-to(inline, $query);
}
// Parses the first argument of span-columns()
......@@ -32,39 +31,31 @@
@if length($span) == 3 {
$container-columns: nth($span, 3);
@return $container-columns;
}
@else if length($span) == 2 {
} @else if length($span) == 2 {
$container-columns: nth($span, 2);
@return $container-columns;
}
@else {
@return $grid-columns;
}
@return $grid-columns;
}
@function container-shift($shift: $shift) {
$parent-columns: $grid-columns !global !default;
$parent-columns: $grid-columns !default !global;
@if length($shift) == 3 {
$container-columns: nth($shift, 3);
@return $container-columns;
}
@else if length($shift) == 2 {
} @else if length($shift) == 2 {
$container-columns: nth($shift, 2);
@return $container-columns;
}
@else {
@return $parent-columns;
}
@return $parent-columns;
}
// Generates a striped background
@function gradient-stops($grid-columns, $color: $visual-grid-color) {
$transparent: rgba(0,0,0,0);
$transparent: transparent;
$column-width: flex-grid(1, $grid-columns);
$gutter-width: flex-gutter($grid-columns);
......@@ -77,9 +68,7 @@
$values: append($values, $transparent $column-offset, comma);
$values: append($values, $color $column-offset, comma);
$column-offset: $column-offset + $column-width;
}
@else {
} @else {
$values: append($values, $color $column-offset, comma);
$values: append($values, $transparent $column-offset, comma);
$column-offset: $column-offset + $gutter-width;
......@@ -91,9 +80,9 @@
// Layout direction
@function get-direction($layout, $default) {
$direction: nil;
@if $layout == LTR or $layout == RTL {
$direction: null;
@if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
$direction: direction-from-layout($layout);
} @else {
$direction: direction-from-layout($default);
......@@ -103,9 +92,9 @@
}
@function direction-from-layout($layout) {
$direction: nil;
$direction: null;
@if $layout == LTR {
@if to-upper-case($layout) == "LTR" {
$direction: right;
} @else {
$direction: left;
......@@ -117,7 +106,7 @@
@function get-opposite-direction($direction) {
$opposite-direction: left;
@if $direction == left {
@if $direction == "left" {
$opposite-direction: right;
}
......
@charset "UTF-8";
@if $border-box-sizing == true {
html { // http://bit.ly/1qk2tVR
box-sizing: border-box;
}
* {
&,
&:before,
&:after {
box-sizing: inherit;
}
}
}
@charset "UTF-8";
/// Changes the direction property used by other mixins called in the code block argument.
///
/// @param {String} $direction (left-to-right)
/// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
///
/// @example scss - Usage
/// @include direction-context(right-to-left) {
/// .right-to-left-block {
/// @include span-columns(6);
/// }
/// }
///
/// @example css - CSS Output
/// .right-to-left-block {
/// float: right;
/// ...
/// }
@mixin direction-context($direction: left-to-right) {
$scope-direction: $layout-direction;
@if to-lower-case($direction) == "left-to-right" {
$layout-direction: LTR !global;
} @else if to-lower-case($direction) == "right-to-left" {
$layout-direction: RTL !global;
}
@content;
$layout-direction: $scope-direction !global;
}
@charset "UTF-8";
/// Changes the display property used by other mixins called in the code block argument.
///
/// @param {String} $display (block)
/// Display value to be used within the block. Can be `table` or `block`.
///
/// @example scss
/// @include display-context(table) {
/// .display-table {
/// @include span-columns(6);
/// }
/// }
///
/// @example css
/// .display-table {
/// display: table-cell;
/// ...
/// }
@mixin display-context($display: block) {
$scope-display: $container-display-table;
$container-display-table: $display == table !global;
@content;
$container-display-table: $scope-display !global;
}
@charset "UTF-8";
/// Forces the element to fill its parent container.
///
/// @example scss - Usage
/// .element {
/// @include fill-parent;
/// }
///
/// @example css - CSS Output
/// .element {
/// width: 100%;
/// -webkit-box-sizing: border-box;
/// -moz-box-sizing: border-box;
/// box-sizing: border-box;
/// }
@mixin fill-parent() {
width: 100%;
@if $border-box-sizing == false {
@include box-sizing(border-box);
box-sizing: border-box;
}
}
@if $border-box-sizing == true {
* {
@include box-sizing(border-box);
}
}
@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
@charset "UTF-8";
/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid).
///
/// @param {List} $query
/// A list of media query features and values, where each `$feature` should have a corresponding `$value`.
/// For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
///
/// If there is only a single `$value` in `$query`, `$default-feature` is going to be used.
///
/// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).
///
///
/// @param {Number (unitless)} $total-columns ($grid-columns)
/// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
///
/// @example scss - Usage
/// .responsive-element {
/// @include media(769px) {
/// @include span-columns(6);
/// }
/// }
///
/// .new-context-element {
/// @include media(min-width 320px max-width 480px, 6) {
/// @include span-columns(6);
/// }
/// }
///
/// @example css - CSS Output
/// @media screen and (min-width: 769px) {
/// .responsive-element {
/// display: block;
/// float: left;
/// margin-right: 2.35765%;
/// width: 48.82117%;
/// }
///
/// .responsive-element:last-child {
/// margin-right: 0;
/// }
/// }
///
/// @media screen and (min-width: 320px) and (max-width: 480px) {
/// .new-context-element {
/// display: block;
/// float: left;
/// margin-right: 4.82916%;
/// width: 100%;
/// }
///
/// .new-context-element:last-child {
/// margin-right: 0;
/// }
/// }
@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {
@if length($query) == 1 {
@media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns;
......@@ -6,31 +62,29 @@
@content;
$grid-columns: $default-grid-columns !global;
}
}
@else {
$loopTo: length($query);
$mediaQuery: 'screen and ';
} @else {
$loop-to: length($query);
$media-query: "screen and ";
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global;
@if length($query) % 2 != 0 {
$grid-columns: nth($query, $loopTo) !global;
$loopTo: $loopTo - 1;
@if is-not(is-even(length($query))) {
$grid-columns: nth($query, $loop-to) !global;
$loop-to: $loop-to - 1;
}
$i: 1;
@while $i <= $loopTo {
$mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') ';
@while $i <= $loop-to {
$media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
@if ($i + 1) != $loopTo {
$mediaQuery: $mediaQuery + 'and ';
@if ($i + 1) != $loop-to {
$media-query: $media-query + "and ";
}
$i: $i + 2;
}
@media #{$mediaQuery} {
@media #{$media-query} {
@content;
$grid-columns: $default-grid-columns !global;
}
......
// Remove last element gutter
@charset "UTF-8";
/// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts.
///
/// @param {List} $query (block)
/// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`).
///
/// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature.
///
/// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead.
///
/// @example scss - Usage
/// .element {
/// @include omega;
/// }
///
/// .nth-element {
/// @include omega(4n);
/// }
///
/// @example css - CSS Output
/// .element {
/// margin-right: 0;
/// }
///
/// .nth-element:nth-child(4n) {
/// margin-right: 0;
/// }
///
/// .nth-element:nth-child(4n+1) {
/// clear: left;
/// }
@mixin omega($query: block, $direction: default) {
$table: if(belongs-to(table, $query), true, false);
$auto: if(belongs-to(auto, $query), true, false);
$table: belongs-to(table, $query);
$auto: belongs-to(auto, $query);
@if $direction != default {
@warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
@include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin.");
} @else {
$direction: get-direction($layout-direction, $default-layout-direction);
}
@if $table {
@warn "The omega mixin no longer removes padding in table layouts."
@include -neat-warn("The omega mixin no longer removes padding in table layouts.");
}
@if length($query) == 1 {
......@@ -27,22 +59,16 @@
@else {
@include nth-child($query, $direction);
}
}
@else if length($query) == 2 {
} @else if length($query) == 2 {
@if $auto {
&:last-child {
margin-#{$direction}: 0;
}
}
@else {
} @else {
@include nth-child(nth($query, 1), $direction);
}
}
@else {
@warn "Too many arguments passed to the omega() mixin."
} @else {
@include -neat-warn("Too many arguments passed to the omega() mixin.");
}
}
......@@ -53,7 +79,7 @@
margin-#{$direction}: 0;
}
@if type-of($query) == number {
@if type-of($query) == number and unit($query) == "n" {
&:nth-child(#{$query}+1) {
clear: $opposite-direction;
}
......
@mixin outer-container {
@charset "UTF-8";
/// Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its `max-width`.
/// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested.
///
/// @param {Number (unit)} $local-max-width ($max-width)
/// Max width to be applied to the element. Can be a percentage or a measure.
///
/// @example scss - Usage
/// .element {
/// @include outer-container(100%);
/// }
///
/// @example css - CSS Output
/// .element {
/// *zoom: 1;
/// max-width: 100%;
/// margin-left: auto;
/// margin-right: auto;
/// }
///
/// .element:before, .element:after {
/// content: " ";
/// display: table;
/// }
///
/// .element:after {
/// clear: both;
/// }
@mixin outer-container($local-max-width: $max-width) {
@include clearfix;
max-width: $max-width;
max-width: $local-max-width;
margin: {
left: auto;
right: auto;
......
@charset "UTF-8";
/// Adds padding to the element.
///
/// @param {List} $padding (flex-gutter())
/// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value.
///
/// @example scss - Usage
/// .element {
/// @include pad(30px -20px 10px default);
/// }
///
/// @example css - CSS Output
/// .element {
/// padding: 30px -20px 10px 2.35765%;
/// }
@mixin pad($padding: flex-gutter()) {
$padding-list: null;
@each $value in $padding {
......
......@@ -3,7 +3,7 @@ $fg-column: $column;
$fg-gutter: $gutter;
$fg-max-columns: $grid-columns;
$container-display-table: false !default;
$layout-direction: nil !default;
$layout-direction: LTR !default;
@function flex-grid($columns, $container-columns: $fg-max-columns) {
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
......@@ -31,13 +31,5 @@ $layout-direction: nil !default;
}
@function is-display-table($container-is-display-table, $display) {
$display-table: false;
@if $container-is-display-table == true {
$display-table: true;
} @else if $display == table {
$display-table: true;
}
@return $display-table;
@return $container-is-display-table == true or $display == table;
}
@mixin reset-display {
$container-display-table: false !global;
}
@mixin reset-layout-direction {
$layout-direction: $default-layout-direction !global;
}
@mixin reset-all {
@include reset-display;
@include reset-layout-direction;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment