mirror of
https://github.com/adulau/brouilleursdeblanc.git
synced 2024-11-21 17:47:10 +00:00
Cleanup stylesheets
- Add Bourbon and Neat
This commit is contained in:
Michael Rose
parent
2b1dc9b5c9
commit
aadb22ffcf
106 changed files with 3778 additions and 922 deletions
|
|
@ -13,7 +13,7 @@ comments: true
|
||||||
share: true
|
share: true
|
||||||
---
|
---
|
||||||
|
|
||||||
This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
|
This is a sample post with a large feature image up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
|
||||||
|
|
||||||
Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
|
Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,24 +20,25 @@ figure {
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
img {
|
img {
|
||||||
@include translate(0, 0);
|
@include transform(translateY(0));
|
||||||
-webkit-transition-duration: 0.25s;
|
-webkit-transition-duration: 0.25s;
|
||||||
-moz-transition-duration: 0.25s;
|
-moz-transition-duration: 0.25s;
|
||||||
-o-transition-duration: 0.25s;
|
-o-transition-duration: 0.25s;
|
||||||
@include opacity(0.7);
|
opacity: 0.7;
|
||||||
&:hover {
|
&:hover {
|
||||||
@include translate(0, -5px);
|
@include transform(translateY(-5px));
|
||||||
@include box-shadow(0 0 10px rgba($black, .20));
|
@include box-shadow(0 0 10px rgba($black, .20));
|
||||||
@include opacity(1);
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.half {
|
&.half {
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
img {
|
img {
|
||||||
width: 310px;
|
width: 47.5%;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 2.5%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
}
|
}
|
||||||
figcaption {
|
figcaption {
|
||||||
clear: left;
|
clear: left;
|
||||||
|
|
@ -45,11 +46,12 @@ figure {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.third {
|
&.third {
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
img {
|
img {
|
||||||
width: 200px;
|
width: 30.8%;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 2.5%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
}
|
}
|
||||||
figcaption {
|
figcaption {
|
||||||
clear: left;
|
clear: left;
|
||||||
|
|
@ -74,11 +76,11 @@ table {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 8px 20px;
|
padding: 8px 20px;
|
||||||
@include font-rem(14);
|
@include font-size(14);
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
color: $white;
|
color: $white;
|
||||||
border: 2px solid $black !important;
|
border: 2px solid $black !important;
|
||||||
@include rounded(20px);
|
border-radius: $border-radius;
|
||||||
&:visited {
|
&:visited {
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
|
@ -168,7 +168,7 @@ textarea[disabled],
|
||||||
input[readonly],
|
input[readonly],
|
||||||
select[readonly],
|
select[readonly],
|
||||||
textarea[readonly] {
|
textarea[readonly] {
|
||||||
@include opacity(.5);
|
opacity: 0.5;
|
||||||
cursor : not-allowed;
|
cursor : not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -263,7 +263,7 @@ select:focus {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
@include font-rem(32);
|
@include font-size(32);
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
@ -278,7 +278,7 @@ select:focus {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
@include font-rem(32);
|
@include font-size(32);
|
||||||
}
|
}
|
||||||
.search-field::-webkit-search-decoration,
|
.search-field::-webkit-search-decoration,
|
||||||
.search-field::-webkit-search-cancel-button,
|
.search-field::-webkit-search-cancel-button,
|
||||||
9
_sass/_grid-settings.scss
Normal file
9
_sass/_grid-settings.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
@import "vendor/neat/neat-helpers";
|
||||||
|
|
||||||
|
// Change the grid settings
|
||||||
|
$visual_grid: false;
|
||||||
|
$max-width: em(960);
|
||||||
|
|
||||||
|
// Define your breakpoints
|
||||||
|
$medium: new-breakpoint(min-width em(768) 12);
|
||||||
|
$large: new-breakpoint(min-width em(1000) 12);
|
||||||
|
|
@ -4,13 +4,15 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: $body-color;
|
background-color: $body-color;
|
||||||
border-top: 5px solid $black;
|
border-top: 5px solid $black;
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
@include font-rem(20);
|
@include font-size(20);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Top Navigation
|
// Top Navigation
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
.navigation-wrapper {
|
.navigation-wrapper {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
|
|
@ -28,7 +30,7 @@ body {
|
||||||
float: left;
|
float: left;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@include font-rem(14);
|
@include font-size(14,no);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $white;
|
color: $white;
|
||||||
a:hover {
|
a:hover {
|
||||||
|
|
@ -49,14 +51,14 @@ body {
|
||||||
#site-nav {
|
#site-nav {
|
||||||
z-index: 9000;
|
z-index: 9000;
|
||||||
display: none;
|
display: none;
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
-webkit-animation-duration: 1s;
|
-webkit-animation-duration: 1s;
|
||||||
-moz-animation-duration: 1s;
|
-moz-animation-duration: 1s;
|
||||||
-o-animation-duration: 1s;
|
-o-animation-duration: 1s;
|
||||||
animation-duration: 1s;
|
animation-duration: 1s;
|
||||||
}
|
}
|
||||||
&.closed {
|
&.closed {
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -65,7 +67,7 @@ body {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
li {
|
li {
|
||||||
float: none;
|
float: none;
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -79,34 +81,37 @@ body {
|
||||||
display: block;
|
display: block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 4px 20px;
|
padding: 6px 20px;
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
|
height: 44px;
|
||||||
@include rounded(0);
|
@include rounded(0);
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Masthead
|
// Masthead
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
.masthead {
|
.masthead {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.wrap {
|
.wrap {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 27.5em;
|
max-width: em(440);
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
max-width: 45.5em;
|
max-width: em(728);
|
||||||
padding-right: 60px;
|
padding-right: 60px;
|
||||||
padding-left: 60px;
|
padding-left: 60px;
|
||||||
}
|
}
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
max-width: 60em;
|
max-width: em(960);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -114,22 +119,16 @@ body {
|
||||||
img {
|
img {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
-webkit-animation-duration: 1s;
|
@include animation-duration(1s);
|
||||||
-moz-animation-duration: 1s;
|
@include animation-delay(.05s);
|
||||||
-o-animation-duration: 1s;
|
|
||||||
animation-duration: 1s;
|
|
||||||
-webkit-animation-delay: .05s;
|
|
||||||
-moz-animation-delay: .05s;
|
|
||||||
-o-animation-delay: .05s;
|
|
||||||
animation-delay: .05s;
|
|
||||||
border: 4px solid $white;
|
border: 4px solid $white;
|
||||||
@include rounded(100px);
|
@include rounded(100px);
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
@include rounded(150px);
|
@include rounded(150px);
|
||||||
}
|
}
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
@include rounded(200px);
|
@include rounded(200px);
|
||||||
|
|
@ -138,37 +137,29 @@ body {
|
||||||
}
|
}
|
||||||
.site-title {
|
.site-title {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
-webkit-animation-duration: 1s;
|
@include animation-duration(1s);
|
||||||
-moz-animation-duration: 1s;
|
@include animation-delay(.75s);
|
||||||
-o-animation-duration: 1s;
|
a {
|
||||||
animation-duration: 1s;
|
color: $black;
|
||||||
-webkit-animation-delay: .75s;
|
}
|
||||||
-moz-animation-delay: .75s;
|
|
||||||
-o-animation-delay: .75s;
|
|
||||||
animation-delay: .75s;
|
|
||||||
a { color: $black; }
|
|
||||||
}
|
}
|
||||||
.site-description {
|
.site-description {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-family: $alt-font;
|
font-family: $alt-font;
|
||||||
@include font-rem(16);
|
@include font-size(16);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
-webkit-animation-duration: 1s;
|
@include animation-duration(1s);
|
||||||
-moz-animation-duration: 1s;
|
@include animation-delay(1s);
|
||||||
-o-animation-duration: 1s;
|
@include media($medium) {
|
||||||
animation-duration: 1s;
|
@include font-size(20);
|
||||||
-webkit-animation-delay: 1s;
|
|
||||||
-moz-animation-delay: 1s;
|
|
||||||
-o-animation-delay: 1s;
|
|
||||||
animation-delay: 1s;
|
|
||||||
@media #{$medium} {
|
|
||||||
@include font-rem(20);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Main
|
// Main
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
}
|
}
|
||||||
|
|
@ -181,31 +172,25 @@ body {
|
||||||
.entry-feature-image {
|
.entry-feature-image {
|
||||||
margin: 20px 0 0;
|
margin: 20px 0 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
margin-top: -75px;
|
margin-top: -75px;
|
||||||
}
|
}
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
margin-top: -145px;
|
margin-top: -145px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.entry-header {
|
.entry-header {
|
||||||
max-width: 640px;
|
@include fill-parent;
|
||||||
width: 100%;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
@media #{$large} {
|
|
||||||
max-width: 100%;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.entry-tags {
|
.entry-tags {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@include font-rem(16);
|
@include font-size(16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
a { color: $text-color; }
|
a {
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
span + .entry-title {
|
span + .entry-title {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -213,7 +198,7 @@ span + .entry-title {
|
||||||
.entry-title {
|
.entry-title {
|
||||||
font-family: $alt-font;
|
font-family: $alt-font;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
@include font-rem(36);
|
@include font-size(36,yes,36);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -3px;
|
letter-spacing: -3px;
|
||||||
|
|
@ -221,50 +206,34 @@ span + .entry-title {
|
||||||
color: $black;
|
color: $black;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
max-width: 600px;
|
@include font-size(52,yes,54);
|
||||||
@include font-rem(52);
|
|
||||||
}
|
}
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
max-width: 800px;
|
@include font-size(68,yes,72);
|
||||||
@include font-rem(68);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.entry-wrapper {
|
.entry-wrapper {
|
||||||
margin: 0 auto 3em;
|
@include outer-container;
|
||||||
max-width: 440px;
|
margin-top: 0;
|
||||||
padding-right: 20px;
|
margin-bottom: 3em;
|
||||||
padding-left: 20px;
|
padding-right: $gutter;
|
||||||
@include clearfix();
|
padding-left: $gutter;
|
||||||
@media #{$medium} {
|
|
||||||
max-width: 760px;
|
|
||||||
padding-right: 60px;
|
|
||||||
padding-left: 60px;
|
|
||||||
}
|
|
||||||
@media #{$large} {
|
|
||||||
max-width: 960px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.entry-meta {
|
.entry-meta {
|
||||||
max-width: 640px;
|
@include span-columns(12);
|
||||||
width: 100%;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
margin-left: auto;
|
|
||||||
display: block;
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
@include font-rem(14);
|
@include font-size(14);
|
||||||
a { color: $text-color; }
|
a {
|
||||||
@media #{$large} {
|
color: $text-color;
|
||||||
float: left;
|
}
|
||||||
width: 150px;
|
@include media($large) {
|
||||||
margin: 0 40px 40px 0;
|
@include span-columns(2.5);
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
& > span {
|
& > span {
|
||||||
padding: 0 20px 10px 0;
|
padding: 0 20px 10px 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border-bottom: 1px solid lighten($black,80);
|
border-bottom: 1px solid lighten($black,80);
|
||||||
|
|
@ -274,7 +243,7 @@ span + .entry-title {
|
||||||
}
|
}
|
||||||
.bio-photo {
|
.bio-photo {
|
||||||
display: none;
|
display: none;
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
display: block;
|
display: block;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
|
|
@ -284,15 +253,12 @@ span + .entry-title {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.entry-content {
|
.entry-content {
|
||||||
max-width: 640px;
|
@include span-columns(12);
|
||||||
width: 100%;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
p:first-child {
|
p:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
@media #{$large} {
|
@include media($large) {
|
||||||
float: left;
|
@include span-columns(9.5);
|
||||||
}
|
}
|
||||||
p > a,
|
p > a,
|
||||||
li > a {
|
li > a {
|
||||||
|
|
@ -319,14 +285,15 @@ span + .entry-title {
|
||||||
// Page layout
|
// Page layout
|
||||||
#home,
|
#home,
|
||||||
#page {
|
#page {
|
||||||
|
.entry-wrapper {
|
||||||
|
max-width: em(760);
|
||||||
|
}
|
||||||
.entry-title {
|
.entry-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
.entry-content {
|
.entry-content {
|
||||||
@media #{$large} {
|
@include span-columns(12);
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Post index layout
|
// Post index layout
|
||||||
|
|
@ -338,16 +305,17 @@ span + .entry-title {
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
border-bottom: 1px solid lighten($black,80);
|
border-bottom: 1px solid lighten($black,80);
|
||||||
border-bottom: 1px solid rgba($black,.10);
|
border-bottom: 1px solid rgba($black,.10);
|
||||||
|
@include font-size(18,no);
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
}
|
}
|
||||||
a > span {
|
a > span {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
.entry-date {
|
.entry-date {
|
||||||
@include font-rem(14);
|
@include font-size(14,no);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
display: none;
|
display: none;
|
||||||
@media #{$medium} {
|
@include media($medium) {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -361,7 +329,7 @@ span + .entry-title {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
&.inline li {
|
&.inline li {
|
||||||
float: left;
|
float: left;
|
||||||
@include font-rem(14);
|
@include font-size(14);
|
||||||
line-height: 2.5;
|
line-height: 2.5;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
|
|
@ -372,32 +340,55 @@ span + .entry-title {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
span {
|
span {
|
||||||
vertical-align: super;
|
vertical-align: super;
|
||||||
@include font-rem(10);
|
@include font-size(10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Search
|
// Table of Contents
|
||||||
// --------------------------------------------------
|
// table of contents
|
||||||
.search-wrapper {
|
#markdown-toc {
|
||||||
display: none;
|
font-family: $alt-font;
|
||||||
position: absolute;
|
margin-top: $gutter;
|
||||||
top: 50px;
|
margin-bottom: $gutter;
|
||||||
width: 90%;
|
padding-left: 0;
|
||||||
padding-right: 5%;
|
border: 1px solid $border-color;
|
||||||
padding-left: 5%;
|
border-radius: $border-radius;
|
||||||
@include clearfix;
|
ul {
|
||||||
@media #{$medium} {
|
list-style-type: none;
|
||||||
top: 100px;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
li {
|
||||||
|
@include font-size(16,no,18);
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
margin: 0;
|
||||||
|
padding: (.25 * $gutter) (.5 * $gutter);
|
||||||
|
background: $table-stripe-color;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: (.25 * $gutter) (.5 * $gutter);
|
||||||
|
border-left: 2px solid transparent;
|
||||||
|
border-bottom: 0 solid transparent;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: lighten($border-color,5);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
.footer-wrapper {
|
.footer-wrapper {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
margin: 2em auto;
|
margin: 2em auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: $alt-font;
|
font-family: $alt-font;
|
||||||
@include font-rem(14);
|
@include font-size(14);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: lighten($text-color,20);
|
color: lighten($text-color,20);
|
||||||
a {
|
a {
|
||||||
|
|
@ -405,25 +396,45 @@ span + .entry-title {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Search Overlay
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.search-wrapper {
|
||||||
|
@include outer-container;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-right: $gutter;
|
||||||
|
padding-left: $gutter;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Social Icons
|
// Social Icons
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
.social-icons {
|
.social-icons {
|
||||||
margin: 1em 0 2em;
|
margin: 1em 0 2em;
|
||||||
a {
|
a {
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
&:hover { color:$black; }
|
&:hover {
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Chrome Frame
|
|
||||||
|
// Browser Upgrade
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
.upgrade {
|
.upgrade {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Google Search
|
|
||||||
|
// Google Search Form
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
#goog-fixurl {
|
#goog-fixurl {
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
@ -437,19 +448,11 @@ span + .entry-title {
|
||||||
#goog-wm-qt {
|
#goog-wm-qt {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
@include font-size(14);
|
||||||
|
border-width: 2px;
|
||||||
|
border-radius: $border-radius;
|
||||||
}
|
}
|
||||||
#goog-wm-sb {
|
#goog-wm-sb {
|
||||||
display: inline-block;
|
@extend .btn;
|
||||||
padding: 8px 20px;
|
|
||||||
background-color: $black;
|
|
||||||
color: $white;
|
|
||||||
border: 2px solid $black !important;
|
|
||||||
@include rounded(20px);
|
|
||||||
&:visited {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: $white;
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
225
_sass/_mixins.scss
Normal file
225
_sass/_mixins.scss
Normal file
|
|
@ -0,0 +1,225 @@
|
||||||
|
// UTILITY MIXINS
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// Webkit-style focus
|
||||||
|
// --------------------
|
||||||
|
@mixin tab-focus() {
|
||||||
|
// Default
|
||||||
|
outline: thin dotted #333;
|
||||||
|
// Webkit
|
||||||
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Center-align a block level element
|
||||||
|
// ----------------------------------
|
||||||
|
@mixin center-block() {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TYPOGRAPHY
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// Full-fat vertical rhythm
|
||||||
|
// ------------------------
|
||||||
|
@mixin font-size($size) {
|
||||||
|
font-size: 0px + $size;
|
||||||
|
font-size: 0rem + $size / $doc-font-size;
|
||||||
|
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
||||||
|
margin-bottom: 0px + $doc-line-height;
|
||||||
|
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Just the REMs
|
||||||
|
// -------------
|
||||||
|
@mixin font-rem($size) {
|
||||||
|
font-size: 0px + $size;
|
||||||
|
font-size: 0rem + $size / $doc-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Just font-size and line-height
|
||||||
|
// ------------------------------
|
||||||
|
@mixin font($size) {
|
||||||
|
font-size: 0px + $size;
|
||||||
|
font-size: 0rem + $size / $doc-font-size;
|
||||||
|
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin text-overflow() {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap; }
|
||||||
|
|
||||||
|
// MIXINS
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
%tab-focus {
|
||||||
|
// Default
|
||||||
|
outline: thin dotted #333;
|
||||||
|
// Webkit
|
||||||
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Typography
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
/* Vertical Rhythm
|
||||||
|
https://github.com/sturobson/Sassifaction
|
||||||
|
|
||||||
|
In this mixin you can specify the font size in PX and
|
||||||
|
it will calculate the REM based on your $doc-font-size
|
||||||
|
& $doc-line-height variables.
|
||||||
|
|
||||||
|
@include font-size(24);
|
||||||
|
|
||||||
|
It will also create a bottom margin based on the
|
||||||
|
$doc-font-size & $doc-line-height variables unless you
|
||||||
|
specify that it shouldn't have one.
|
||||||
|
|
||||||
|
@include font-size(24, no);
|
||||||
|
|
||||||
|
Or if you want to specify a different bottom margin to
|
||||||
|
be generated.
|
||||||
|
|
||||||
|
@include font-size(24,32);
|
||||||
|
|
||||||
|
This mixin also generates a pixel-less line height by
|
||||||
|
default unless you specify that you either don't want
|
||||||
|
one where I'd suggest declaring 1 within the mixin.
|
||||||
|
|
||||||
|
@include font-size(24, yes, 1);
|
||||||
|
|
||||||
|
There's also the option to specify a different line-height
|
||||||
|
for it to generate to, where you would specify the
|
||||||
|
line-height in (effectively) it's pixel value.
|
||||||
|
|
||||||
|
@include font-size(24, yes, 40);
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin font-size($size, $margin: yes, $line-height: $doc-line-height) {
|
||||||
|
|
||||||
|
// generates the font-size in REMs with a PX fallback
|
||||||
|
font-size: 0px + $size;
|
||||||
|
font-size: 0rem + $size / $doc-font-size;
|
||||||
|
|
||||||
|
// line-height functions
|
||||||
|
////////////////////////
|
||||||
|
|
||||||
|
// if you a line-height is specified in the mixin
|
||||||
|
@if $line-height != $doc-line-height and $line-height != 1 {
|
||||||
|
line-height: ceil($size / $line-height) * ($line-height / $size);
|
||||||
|
}
|
||||||
|
|
||||||
|
// if $line-height == 1
|
||||||
|
// because, typing 1 is quicker than 16
|
||||||
|
@else if $line-height == 1 {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// normal $line-height
|
||||||
|
// if the line-height is left.
|
||||||
|
@else {
|
||||||
|
line-height: ceil($size / $doc-line-height) * ($doc-line-height / $size);
|
||||||
|
}
|
||||||
|
|
||||||
|
// margin-bottom functions
|
||||||
|
//////////////////////////
|
||||||
|
|
||||||
|
// if no is bottom margin is required
|
||||||
|
@if $margin == no {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if a specific bottom margin is required
|
||||||
|
@else if $margin != yes and $margin != no {
|
||||||
|
margin-bottom: 0px + $margin;
|
||||||
|
margin-bottom: 0rem + ($margin / $doc-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
// if you're keeping the vertical rhythm with the margin
|
||||||
|
@else {
|
||||||
|
margin-bottom: 0px + $doc-line-height;
|
||||||
|
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ROUND CORNERS
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// @include rounded(VALUE);
|
||||||
|
@mixin rounded($radius:4px) {
|
||||||
|
border-radius : $radius; }
|
||||||
|
|
||||||
|
// @include border-radius(VALUE,VALUE,VALUE,VALUE);
|
||||||
|
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
|
||||||
|
border-top-right-radius : $topright;
|
||||||
|
border-bottom-right-radius : $bottomright;
|
||||||
|
border-bottom-left-radius : $bottomleft;
|
||||||
|
border-top-left-radius : $topleft;
|
||||||
|
background-clip : padding-box; }
|
||||||
|
|
||||||
|
// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
|
||||||
|
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||||
|
-webkit-box-shadow : $shadow;
|
||||||
|
-moz-box-shadow : $shadow;
|
||||||
|
box-shadow : $shadow; }
|
||||||
|
|
||||||
|
// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
|
||||||
|
@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
|
||||||
|
-webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
||||||
|
-moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
||||||
|
box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); }
|
||||||
|
|
||||||
|
// @include text-shadow();
|
||||||
|
@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
||||||
|
text-shadow : $shadow; }
|
||||||
|
|
||||||
|
// @include opacity(VALUE);
|
||||||
|
@mixin opacity($opacity : .5) {
|
||||||
|
opacity : $opacity; }
|
||||||
|
|
||||||
|
// For image replacement
|
||||||
|
@mixin hide-text() {
|
||||||
|
text-indent : 100%;
|
||||||
|
white-space : nowrap;
|
||||||
|
overflow : hidden; }
|
||||||
|
|
||||||
|
// Hide from visual and speaking browsers
|
||||||
|
@mixin hidden() {
|
||||||
|
display : none !important;
|
||||||
|
visibility : hidden; }
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide but maintain layout
|
||||||
|
@mixin invisible() {
|
||||||
|
visibility : hidden; }
|
||||||
|
|
||||||
|
// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
|
||||||
|
@mixin resize($direction: both) {
|
||||||
|
resize : $direction;
|
||||||
|
overflow : auto; }
|
||||||
|
|
||||||
|
// @include userselect(VALUE) (all, element, none, text)
|
||||||
|
@mixin user-select($select) {
|
||||||
|
-webkit-user-select : $select;
|
||||||
|
-moz-user-select : $select;
|
||||||
|
-o-user-select : $select;
|
||||||
|
user-select : $select; }
|
||||||
|
|
||||||
|
// Hidden but available to speaking browsers
|
||||||
|
@mixin visuallyhidden() {
|
||||||
|
overflow : hidden;
|
||||||
|
position : absolute;
|
||||||
|
clip : rect(0 0 0 0);
|
||||||
|
height : 1px;
|
||||||
|
width : 1px;
|
||||||
|
margin : -1px;
|
||||||
|
padding : 0;
|
||||||
|
border : 0; }
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
.highlight {
|
.highlight {
|
||||||
background-color: #efefef;
|
background-color: #efefef;
|
||||||
font-family: $code-font;
|
font-family: $code-font;
|
||||||
@include font(12);
|
|
||||||
color: #333332;
|
color: #333332;
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
@include rounded(4px);
|
@include rounded($border-radius);
|
||||||
pre {
|
pre {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -1,12 +1,16 @@
|
||||||
//
|
// STYLE RESETS
|
||||||
// Reset CSS
|
|
||||||
// Adapted from http://github.com/necolas/normalize.css
|
// Adapted from http://github.com/necolas/normalize.css
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// Apply a natural box layout model to all elements
|
||||||
|
*, *:before, *:after {
|
||||||
|
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
// Display in IE6-9 and FF3
|
// Remove margin
|
||||||
// -------------------------
|
body { margin: 0; }
|
||||||
|
|
||||||
|
// Display HTML5 elements in IE6-9 and FF3
|
||||||
article,
|
article,
|
||||||
aside,
|
aside,
|
||||||
details,
|
details,
|
||||||
|
|
@ -21,8 +25,6 @@ section {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Display block in IE6-9 and FF3
|
// Display block in IE6-9 and FF3
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
audio,
|
audio,
|
||||||
canvas,
|
canvas,
|
||||||
video {
|
video {
|
||||||
|
|
@ -32,33 +34,28 @@ video {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevents modern browsers from displaying 'audio' without controls
|
// Prevents modern browsers from displaying 'audio' without controls
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
audio:not([controls]) {
|
audio:not([controls]) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Base settings
|
// Base font settings
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
-ms-text-size-adjust: 100%;
|
-ms-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
// Focus states
|
// Apply focus state
|
||||||
a:focus {
|
a:focus {
|
||||||
@include tab-focus;
|
@extend %tab-focus;
|
||||||
}
|
}
|
||||||
// Hover & Active
|
|
||||||
|
// Remove outline
|
||||||
a:hover,
|
a:hover,
|
||||||
a:active {
|
a:active {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevents sub and sup affecting line-height in all browsers
|
// Prevent sub and sup affecting line-height in all browsers
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
sub,
|
sub,
|
||||||
sup {
|
sup {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -73,21 +70,17 @@ sub {
|
||||||
bottom: -0.25em;
|
bottom: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Blockquote
|
// Normalize blockquotes
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Img border in a's and image quality
|
// Img border in a's and image quality
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
/* Responsive images (ensure images don't scale beyond their parents) */
|
// Responsive images (ensure images don't scale beyond their parents)
|
||||||
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
|
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||||
width: auto\9; /* IE7-8 need help adjusting responsive images */
|
width: auto\9; // IE7-8 need help adjusting responsive images
|
||||||
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
|
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||||
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -100,10 +93,7 @@ img {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Forms
|
// Consistent form font size in all browsers, margin changes, misc
|
||||||
// -------------------------
|
|
||||||
|
|
||||||
// Font size in all browsers, margin changes, misc consistency
|
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
select,
|
select,
|
||||||
|
|
@ -151,73 +141,3 @@ textarea {
|
||||||
overflow: auto; // Remove vertical scrollbar in IE6-9
|
overflow: auto; // Remove vertical scrollbar in IE6-9
|
||||||
vertical-align: top; // Readability and alignment cross-browser
|
vertical-align: top; // Readability and alignment cross-browser
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Printing
|
|
||||||
// -------------------------
|
|
||||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
|
|
||||||
* {
|
|
||||||
text-shadow: none !important;
|
|
||||||
color: #000 !important; // Black prints faster: h5bp.com/s
|
|
||||||
background: transparent !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:visited {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a[href]:after {
|
|
||||||
content: " (" attr(href) ")";
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title]:after {
|
|
||||||
content: " (" attr(title) ")";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Don't show links for images, or javascript/internal links
|
|
||||||
.ir a:after,
|
|
||||||
a[href^="javascript:"]:after,
|
|
||||||
a[href^="#"]:after {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
pre,
|
|
||||||
blockquote {
|
|
||||||
border: 1px solid #999;
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
display: table-header-group; // h5bp.com/t
|
|
||||||
}
|
|
||||||
|
|
||||||
tr,
|
|
||||||
img {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@page {
|
|
||||||
margin: 0.5cm;
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
orphans: 3;
|
|
||||||
widows: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
page-break-after: avoid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
269
_sass/_site.scss
Normal file
269
_sass/_site.scss
Normal file
|
|
@ -0,0 +1,269 @@
|
||||||
|
// Selection
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background-color: lighten($base-color, 65%);
|
||||||
|
color: $base-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
::selection {
|
||||||
|
background-color: lighten($base-color, 65%);
|
||||||
|
color: $base-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Body
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: $base-font;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// TYPOGRAPHY
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: $base-font;
|
||||||
|
color: $text-color;
|
||||||
|
@include font-size(16);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@include font-size(18,yes,28);
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
@include font-size(16,12,24);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Headings
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: $heading-font;
|
||||||
|
text-rendering: optimizeLegibility; // Fix the character spacing for headings
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
@include font-size(36);
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
@include font-size(32);
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
@include font-size(28);
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
@include font-size(24);
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
@include font-size(20);
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
@include font-size(18);
|
||||||
|
}
|
||||||
|
|
||||||
|
u,
|
||||||
|
ins {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Tables
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: ((0px + $doc-line-height) / 2) 0;
|
||||||
|
margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
tbody {
|
||||||
|
tr:hover > td, tr:hover > th {
|
||||||
|
background-color: $table-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
tr:first-child td {
|
||||||
|
border-bottom: 2px solid $table-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
padding: (0px + $doc-line-height) / 2;
|
||||||
|
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
|
||||||
|
font-family: $alt-font;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
background-color: $table-header-color;
|
||||||
|
border-bottom: 1px solid darken($border-color, 15%);
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: (0px + $doc-line-height) / 2;
|
||||||
|
padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
|
||||||
|
@include font-size(18);
|
||||||
|
}
|
||||||
|
tr, td, th {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Links
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $link-color;
|
||||||
|
&:visited {
|
||||||
|
color: lighten($link-color, 20);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: darken($link-color, 20);
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
outline: thin dotted;
|
||||||
|
color: darken($link-color, 20);
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-arrow {
|
||||||
|
font-weight: 100;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Figures
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
padding-top: 10px;
|
||||||
|
@include font-size(14);
|
||||||
|
line-height: 1.3;
|
||||||
|
color: lighten($text-color, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Feature Image Caption
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.image-credit {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 440px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
text-align: right;
|
||||||
|
@include font-size(14,no);
|
||||||
|
line-height: 1.3;
|
||||||
|
color: lighten($text-color, 30);
|
||||||
|
@include clearfix();
|
||||||
|
@include media($medium) {
|
||||||
|
max-width: 760px;
|
||||||
|
padding-right: 60px;
|
||||||
|
padding-left: 60px;
|
||||||
|
}
|
||||||
|
@include media($large) {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: lighten($text-color, 30);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Note text
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
padding: .5em 1em;
|
||||||
|
text-indent: 0;
|
||||||
|
@include font-size(16);
|
||||||
|
background-color: lighten($black, 95);
|
||||||
|
border: 1px solid lighten($black, 90);
|
||||||
|
@include rounded(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Blockquotes
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
font-family: $alt-font;
|
||||||
|
font-style: italic;
|
||||||
|
@include font-size(16);
|
||||||
|
padding-left: 20px;
|
||||||
|
border-left: 8px solid $black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Footnotes
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.footnotes {
|
||||||
|
@include font-size(14);
|
||||||
|
font-family: $base-font;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Code
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
tt, code, kbd, samp, pre {
|
||||||
|
font-family: $code-font;
|
||||||
|
}
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
code {
|
||||||
|
@include font-size(14);
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0 5px;
|
||||||
|
border: 1px solid lighten($black, 90);
|
||||||
|
background-color: lighten($black, 95);
|
||||||
|
@include rounded(3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
@include font-size(14);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Utility Classes
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.all-caps {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.pull-left {
|
||||||
|
float: left;
|
||||||
|
padding-right: $gutter;
|
||||||
|
}
|
||||||
|
.pull-right {
|
||||||
|
float: right;
|
||||||
|
padding-left: $gutter;
|
||||||
|
}
|
||||||
|
.unstyled-list {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Global Transition
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
|
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
|
||||||
|
@include transition(all .2s ease);
|
||||||
|
}
|
||||||
46
_sass/_variables.scss
Normal file
46
_sass/_variables.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
// TYPOGRAPHY ================================================
|
||||||
|
$base-font: 'source-sans-pro', sans-serif;
|
||||||
|
$heading-font: $base-font;
|
||||||
|
$caption-font: $base-font;
|
||||||
|
$code-font: 'source-code-pro', monospace;
|
||||||
|
$alt-font: 'volkhov', serif;
|
||||||
|
|
||||||
|
$doc-font-size: 16;
|
||||||
|
$doc-line-height: 24;
|
||||||
|
|
||||||
|
$border-radius: 3px;
|
||||||
|
|
||||||
|
|
||||||
|
// set-up the body font-size / line-height
|
||||||
|
body {
|
||||||
|
margin-top: 0px + $doc-line-height;
|
||||||
|
font-size: 0px + $doc-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// COLORS =====================================================
|
||||||
|
$body-color : #fff;
|
||||||
|
$text-color : #222;
|
||||||
|
$base-color : #343434;
|
||||||
|
$comp-color : spin($base-color, 180);
|
||||||
|
$border-color : #ddd;
|
||||||
|
$white : #fff;
|
||||||
|
$black : #000;
|
||||||
|
$accent-color : $black;
|
||||||
|
$link-color : #222;
|
||||||
|
|
||||||
|
$table-border-color : $border-color;
|
||||||
|
$table-border : 1px solid $table-border-color;
|
||||||
|
$table-background : $body-color;
|
||||||
|
$table-header-color : lighten($table-background, 10);
|
||||||
|
$table-hover-color : darken($table-background, 2);
|
||||||
|
$table-stripe-color : darken($table-background, 4);
|
||||||
|
$table-stripe-color-hover : darken($table-stripe-color, 5);
|
||||||
|
|
||||||
|
|
||||||
|
// MEDIA QUERIES ==============================================
|
||||||
|
$micro : "only screen and (min-width: 30em)";
|
||||||
|
$small : "only screen and (min-width: 37.5em)";
|
||||||
|
$medium : "only screen and (min-width: 48em)";
|
||||||
|
$large : "only screen and (min-width: 62em)";
|
||||||
|
$x-large : "only screen and (min-width: 86.375em)";
|
||||||
|
|
@ -1,133 +0,0 @@
|
||||||
.CodeRay {
|
|
||||||
background-color: #efefef;
|
|
||||||
font-family: $code-font;
|
|
||||||
@include font(12);
|
|
||||||
color: #333332;
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
@include rounded(4px);
|
|
||||||
pre {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div.CodeRay { }
|
|
||||||
span.CodeRay { white-space: pre; border: 0px; padding: 2px }
|
|
||||||
|
|
||||||
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
|
|
||||||
table.CodeRay td {
|
|
||||||
padding: 1em 0.5em;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeRay .line-numbers, .CodeRay .no {
|
|
||||||
background-color: #ECECEC;
|
|
||||||
color: #AAA;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeRay .line-numbers a {
|
|
||||||
color: #AAA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeRay .line-numbers tt { font-weight: bold }
|
|
||||||
.CodeRay .line-numbers .highlighted { color: red }
|
|
||||||
.CodeRay .line { display: block; float: left; width: 100%; }
|
|
||||||
.CodeRay span.line-numbers { padding: 0 24px 0 4px }
|
|
||||||
.CodeRay .code { width: 100% }
|
|
||||||
|
|
||||||
ol.CodeRay { font-size: 10pt }
|
|
||||||
ol.CodeRay li { white-space: pre }
|
|
||||||
|
|
||||||
.CodeRay .code pre { overflow: auto }
|
|
||||||
.CodeRay .debug { color:white ! important; background:blue ! important; }
|
|
||||||
|
|
||||||
.CodeRay .annotation { color:#007 }
|
|
||||||
.CodeRay .attribute-name { color:#f08 }
|
|
||||||
.CodeRay .attribute-value { color:#700 }
|
|
||||||
.CodeRay .binary { color:#509; font-weight:bold }
|
|
||||||
.CodeRay .comment { color:#998; font-style: italic;}
|
|
||||||
.CodeRay .char { color:#04D }
|
|
||||||
.CodeRay .char .content { color:#04D }
|
|
||||||
.CodeRay .char .delimiter { color:#039 }
|
|
||||||
.CodeRay .class { color:#458; font-weight:bold }
|
|
||||||
.CodeRay .complex { color:#A08; font-weight:bold }
|
|
||||||
.CodeRay .constant { color:teal; }
|
|
||||||
.CodeRay .color { color:#0A0 }
|
|
||||||
.CodeRay .class-variable { color:#369 }
|
|
||||||
.CodeRay .decorator { color:#B0B; }
|
|
||||||
.CodeRay .definition { color:#099; font-weight:bold }
|
|
||||||
.CodeRay .directive { color:#088; font-weight:bold }
|
|
||||||
.CodeRay .delimiter { color:black }
|
|
||||||
.CodeRay .doc { color:#970 }
|
|
||||||
.CodeRay .doctype { color:#34b }
|
|
||||||
.CodeRay .doc-string { color:#D42; font-weight:bold }
|
|
||||||
.CodeRay .escape { color:#666; font-weight:bold }
|
|
||||||
.CodeRay .entity { color:#800; font-weight:bold }
|
|
||||||
.CodeRay .error { color:#F00; background-color:#FAA }
|
|
||||||
.CodeRay .exception { color:#C00; font-weight:bold }
|
|
||||||
.CodeRay .filename { color:#099; }
|
|
||||||
.CodeRay .function { color:#900; font-weight:bold }
|
|
||||||
.CodeRay .global-variable { color:teal; font-weight:bold }
|
|
||||||
.CodeRay .hex { color:#058; font-weight:bold }
|
|
||||||
.CodeRay .integer { color:#099; }
|
|
||||||
.CodeRay .include { color:#B44; font-weight:bold }
|
|
||||||
.CodeRay .inline { color: black }
|
|
||||||
.CodeRay .inline .inline { background: #ccc }
|
|
||||||
.CodeRay .inline .inline .inline { background: #bbb }
|
|
||||||
.CodeRay .inline .inline-delimiter { color: #D14; }
|
|
||||||
.CodeRay .inline-delimiter { color: #D14; }
|
|
||||||
.CodeRay .important { color:#f00; }
|
|
||||||
.CodeRay .interpreted { color:#B2B; font-weight:bold }
|
|
||||||
.CodeRay .instance-variable { color:teal }
|
|
||||||
.CodeRay .label { color:#970; font-weight:bold }
|
|
||||||
.CodeRay .local-variable { color:#963 }
|
|
||||||
.CodeRay .octal { color:#40E; font-weight:bold }
|
|
||||||
.CodeRay .operator { }
|
|
||||||
.CodeRay .predefined-constant { font-weight:bold }
|
|
||||||
.CodeRay .predefined { color:#369; font-weight:bold }
|
|
||||||
.CodeRay .preprocessor { color:#579; }
|
|
||||||
.CodeRay .pseudo-class { color:#00C; font-weight:bold }
|
|
||||||
.CodeRay .predefined-type { color:#074; font-weight:bold }
|
|
||||||
.CodeRay .reserved, .keyword { color:#000; font-weight:bold }
|
|
||||||
|
|
||||||
.CodeRay .key { color: #808; }
|
|
||||||
.CodeRay .key .delimiter { color: #606; }
|
|
||||||
.CodeRay .key .char { color: #80f; }
|
|
||||||
.CodeRay .value { color: #088; }
|
|
||||||
|
|
||||||
.CodeRay .regexp { background-color:#fff0ff }
|
|
||||||
.CodeRay .regexp .content { color:#808 }
|
|
||||||
.CodeRay .regexp .delimiter { color:#404 }
|
|
||||||
.CodeRay .regexp .modifier { color:#C2C }
|
|
||||||
.CodeRay .regexp .function { color:#404; font-weight: bold }
|
|
||||||
|
|
||||||
.CodeRay .string { color: #D20; }
|
|
||||||
.CodeRay .string .string { }
|
|
||||||
.CodeRay .string .string .string { background-color:#ffd0d0 }
|
|
||||||
.CodeRay .string .content { color: #D14; }
|
|
||||||
.CodeRay .string .char { color: #D14; }
|
|
||||||
.CodeRay .string .delimiter { color: #D14; }
|
|
||||||
|
|
||||||
.CodeRay .shell { color:#D14 }
|
|
||||||
.CodeRay .shell .content { }
|
|
||||||
.CodeRay .shell .delimiter { color:#D14 }
|
|
||||||
|
|
||||||
.CodeRay .symbol { color:#990073 }
|
|
||||||
.CodeRay .symbol .content { color:#A60 }
|
|
||||||
.CodeRay .symbol .delimiter { color:#630 }
|
|
||||||
|
|
||||||
.CodeRay .tag { color:#070 }
|
|
||||||
.CodeRay .tag-special { color:#D70; font-weight:bold }
|
|
||||||
.CodeRay .type { color:#339; font-weight:bold }
|
|
||||||
.CodeRay .variable { color:#036 }
|
|
||||||
|
|
||||||
.CodeRay .insert { background: #afa; }
|
|
||||||
.CodeRay .delete { background: #faa; }
|
|
||||||
.CodeRay .change { color: #aaf; background: #007; }
|
|
||||||
.CodeRay .head { color: #f8f; background: #505 }
|
|
||||||
|
|
||||||
.CodeRay .insert .insert { color: #080; font-weight:bold }
|
|
||||||
.CodeRay .delete .delete { color: #800; font-weight:bold }
|
|
||||||
.CodeRay .change .change { color: #66f; }
|
|
||||||
.CodeRay .head .head { color: #f4f; }
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
// Defining number of columns in the grid.
|
|
||||||
// Common Values would be 12, 16 or 24
|
|
||||||
$width: 100%;
|
|
||||||
$def_grid: 12;
|
|
||||||
$margin: 0;
|
|
||||||
|
|
||||||
@mixin container(){
|
|
||||||
margin:0 auto;
|
|
||||||
width:$width;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Works out the width of elements based
|
|
||||||
// on total number of columns and width
|
|
||||||
// number of columns being displayed.
|
|
||||||
// Removes 20px for margins
|
|
||||||
@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
|
|
||||||
display:$display;
|
|
||||||
float:$float;
|
|
||||||
width:(100%/$grid * $cols) - ($margin * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Allows for padding before element
|
|
||||||
@mixin prefix($grid:$def_grid,$cols:''){
|
|
||||||
margin-left:(100%/$grid * $cols);
|
|
||||||
}
|
|
||||||
// Allows for padding after element
|
|
||||||
@mixin suffix($grid:$def_grid,$cols:''){
|
|
||||||
margin-right:(100%/$grid * $cols);
|
|
||||||
}
|
|
||||||
// Removes left margin
|
|
||||||
@mixin first(){
|
|
||||||
margin-left:0;
|
|
||||||
}
|
|
||||||
// Removes right margin
|
|
||||||
@mixin last(){
|
|
||||||
margin-right:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin push($grid:$def_grid,$move:'') {
|
|
||||||
position:relative;
|
|
||||||
left:(100%/$grid * $move);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin pull($grid:$def_grid,$move:''){
|
|
||||||
position:relative;
|
|
||||||
left:(100%/$grid * $move) * -1;
|
|
||||||
}
|
|
||||||
|
|
@ -1,269 +0,0 @@
|
||||||
// UTILITY MIXINS
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// Clearfix
|
|
||||||
// --------------------
|
|
||||||
// For clearing floats like a boss h5bp.com/q
|
|
||||||
@mixin clearfix {
|
|
||||||
*zoom: 1;
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
display: table;
|
|
||||||
content: "";
|
|
||||||
// Fixes Opera/contenteditable bug:
|
|
||||||
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Webkit-style focus
|
|
||||||
// --------------------
|
|
||||||
@mixin tab-focus() {
|
|
||||||
// Default
|
|
||||||
outline: thin dotted #333;
|
|
||||||
// Webkit
|
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Center-align a block level element
|
|
||||||
// ----------------------------------
|
|
||||||
@mixin center-block() {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TYPOGRAPHY
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// Full-fat vertical rhythm
|
|
||||||
// ------------------------
|
|
||||||
@mixin font-size($size) {
|
|
||||||
font-size: 0px + $size;
|
|
||||||
font-size: 0rem + $size / $doc-font-size;
|
|
||||||
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
|
||||||
margin-bottom: 0px + $doc-line-height;
|
|
||||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Just the REMs
|
|
||||||
// -------------
|
|
||||||
@mixin font-rem($size) {
|
|
||||||
font-size: 0px + $size;
|
|
||||||
font-size: 0rem + $size / $doc-font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Just font-size and line-height
|
|
||||||
// ------------------------------
|
|
||||||
@mixin font($size) {
|
|
||||||
font-size: 0px + $size;
|
|
||||||
font-size: 0rem + $size / $doc-font-size;
|
|
||||||
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin text-overflow() {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap; }
|
|
||||||
|
|
||||||
// GRADIENTS
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
|
|
||||||
background-color: $endColor;
|
|
||||||
background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
||||||
background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
||||||
background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
|
||||||
background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
|
||||||
background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
|
||||||
background-image : linear-gradient(left, $startColor, $endColor); // W3C
|
|
||||||
background-repeat : repeat-x; }
|
|
||||||
|
|
||||||
@mixin vertical($startColor : $white, $endColor: $lightergrey) {
|
|
||||||
background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
||||||
background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
||||||
background-color : $endColor;
|
|
||||||
background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
|
||||||
background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
|
||||||
background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
|
||||||
background-image : linear-gradient(top, $startColor, $endColor); // W3C
|
|
||||||
background-repeat : repeat-x; }
|
|
||||||
|
|
||||||
@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
|
|
||||||
background-color : $endColor;
|
|
||||||
background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
|
||||||
background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
|
||||||
background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
||||||
background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
|
||||||
background-image : linear-gradient($deg, $startColor, $endColor); // W3C
|
|
||||||
background-repeat : repeat-x; }
|
|
||||||
|
|
||||||
// .bordered(COLOR, COLOR, COLOR, COLOR);
|
|
||||||
@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
|
|
||||||
border-top : solid 1px $top-color;
|
|
||||||
border-left : solid 1px $left-color;
|
|
||||||
border-right : solid 1px $right-color;
|
|
||||||
border-bottom : solid 1px $bottom-color; }
|
|
||||||
|
|
||||||
// ROUND CORNERS
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// @include rounded(VALUE);
|
|
||||||
@mixin rounded($radius:4px) {
|
|
||||||
border-radius : $radius; }
|
|
||||||
|
|
||||||
// @include border-radius(VALUE,VALUE,VALUE,VALUE);
|
|
||||||
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
|
|
||||||
border-top-right-radius : $topright;
|
|
||||||
border-bottom-right-radius : $bottomright;
|
|
||||||
border-bottom-left-radius : $bottomleft;
|
|
||||||
border-top-left-radius : $topleft;
|
|
||||||
background-clip : padding-box; }
|
|
||||||
|
|
||||||
// @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
|
|
||||||
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
|
||||||
-webkit-box-shadow : $shadow;
|
|
||||||
-moz-box-shadow : $shadow;
|
|
||||||
box-shadow : $shadow; }
|
|
||||||
|
|
||||||
// @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
|
|
||||||
@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
|
|
||||||
-webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
|
||||||
-moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
|
||||||
box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); }
|
|
||||||
|
|
||||||
// @include text-shadow();
|
|
||||||
@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
|
||||||
text-shadow : $shadow; }
|
|
||||||
|
|
||||||
// @include opacity(VALUE);
|
|
||||||
@mixin opacity($opacity : .5) {
|
|
||||||
opacity : $opacity; }
|
|
||||||
|
|
||||||
// TRANSFORMATIONS
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// @include rotate(VALUEdeg);
|
|
||||||
@mixin rotate($deg) {
|
|
||||||
-webkit-transform : rotate($deg);
|
|
||||||
-moz-transform : rotate($deg);
|
|
||||||
-ms-transform : rotate($deg);
|
|
||||||
-o-transform : rotate($deg);
|
|
||||||
transform : rotate($deg); }
|
|
||||||
|
|
||||||
// @include scale(VALUE);
|
|
||||||
@mixin scale($ratio) {
|
|
||||||
-webkit-transform : scale($ratio);
|
|
||||||
-moz-transform : scale($ratio);
|
|
||||||
-ms-transform : scale($ratio);
|
|
||||||
-o-transform : scale($ratio);
|
|
||||||
transform : scale($ratio); }
|
|
||||||
|
|
||||||
// @include skew(VALUE, VALUE);
|
|
||||||
@mixin skew($x: 0, $y: 0) {
|
|
||||||
-webkit-transform : skew($x, $y);
|
|
||||||
-moz-transform : skew($x, $y);
|
|
||||||
-ms-transform : skew($x, $y);
|
|
||||||
-o-transform : skew($x, $y);
|
|
||||||
transform : skew($x, $y); }
|
|
||||||
|
|
||||||
// @include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
|
|
||||||
@mixin transition($transition) {
|
|
||||||
-webkit-transition : $transition;
|
|
||||||
-moz-transition : $transition;
|
|
||||||
-ms-transition : $transition;
|
|
||||||
-o-transition : $transition;
|
|
||||||
transition : $transition; }
|
|
||||||
|
|
||||||
// @include translate(VALUE, VALUE)
|
|
||||||
@mixin translate($x: 0, $y: 0) {
|
|
||||||
-webkit-transform : translate($x, $y);
|
|
||||||
-moz-transform : translate($x, $y);
|
|
||||||
-ms-transform : translate($x, $y);
|
|
||||||
-o-transform : translate($x, $y);
|
|
||||||
transform : translate($x, $y); }
|
|
||||||
|
|
||||||
@mixin translate3d($x: 0, $y: 0, $z: 0) {
|
|
||||||
-webkit-transform : translate($x, $y, $z);
|
|
||||||
-moz-transform : translate($x, $y, $z);
|
|
||||||
-ms-transform : translate($x, $y, $z);
|
|
||||||
-o-transform : translate($x, $y, $z);
|
|
||||||
transform : translate($x, $y, $z); }
|
|
||||||
|
|
||||||
@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
|
|
||||||
-webkit-animation: $name $duration $delay $ease;
|
|
||||||
-moz-animation: $name $duration $delay $ease;
|
|
||||||
-ms-animation: $name $duration $delay $ease;}
|
|
||||||
|
|
||||||
// BACKGROUND
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
// @include background-alpha(VALUE VALUE);
|
|
||||||
@mixin background-alpha($color: $white, $alpha: 1) {
|
|
||||||
background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); }
|
|
||||||
|
|
||||||
// @include background-size(VALUE VALUE);
|
|
||||||
@mixin background-size($size){
|
|
||||||
-webkit-background-size : $size;
|
|
||||||
-moz-background-size : $size;
|
|
||||||
-o-background-size : $size;
|
|
||||||
background-size : $size; }
|
|
||||||
|
|
||||||
// @include background-clip(VALUE); (border-box, padding-box, content-box)
|
|
||||||
@mixin background-clip($clip) {
|
|
||||||
-webkit-background-clip : $clip;
|
|
||||||
-moz-background-clip : $clip;
|
|
||||||
background-clip : $clip; }
|
|
||||||
|
|
||||||
// @include box-sizing(VALUE); (border-box, padding-box, content-box)
|
|
||||||
@mixin box-sizing($boxsize: border-box) {
|
|
||||||
-webkit-box-sizing : $boxsize;
|
|
||||||
-moz-box-sizing : $boxsize;
|
|
||||||
-ms-box-sizing : $boxsize;
|
|
||||||
box-sizing : $boxsize; }
|
|
||||||
|
|
||||||
// For image replacement
|
|
||||||
@mixin hide-text() {
|
|
||||||
text-indent : 100%;
|
|
||||||
white-space : nowrap;
|
|
||||||
overflow : hidden; }
|
|
||||||
|
|
||||||
// Hide from visual and speaking browsers
|
|
||||||
@mixin hidden() {
|
|
||||||
display : none !important;
|
|
||||||
visibility : hidden; }
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide but maintain layout
|
|
||||||
@mixin invisible() {
|
|
||||||
visibility : hidden; }
|
|
||||||
|
|
||||||
// @include resize(VALUE) (none, both, horizontal, vertical, inherit)
|
|
||||||
@mixin resize($direction: both) {
|
|
||||||
resize : $direction;
|
|
||||||
overflow : auto; }
|
|
||||||
|
|
||||||
// @include userselect(VALUE) (all, element, none, text)
|
|
||||||
@mixin user-select($select) {
|
|
||||||
-webkit-user-select : $select;
|
|
||||||
-moz-user-select : $select;
|
|
||||||
-o-user-select : $select;
|
|
||||||
user-select : $select; }
|
|
||||||
|
|
||||||
// Hidden but available to speaking browsers
|
|
||||||
@mixin visuallyhidden() {
|
|
||||||
overflow : hidden;
|
|
||||||
position : absolute;
|
|
||||||
clip : rect(0 0 0 0);
|
|
||||||
height : 1px;
|
|
||||||
width : 1px;
|
|
||||||
margin : -1px;
|
|
||||||
padding : 0;
|
|
||||||
border : 0; }
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
// Selection
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background-color: lighten($base-color, 65%);
|
|
||||||
color: $base-color;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
::selection {
|
|
||||||
background-color: lighten($base-color, 65%);
|
|
||||||
color: $base-color;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Utility Classes
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.wrap {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.all-caps {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
.pull-left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.pull-right {
|
|
||||||
float:right;
|
|
||||||
}
|
|
||||||
.unstyled-list {
|
|
||||||
list-style: none;
|
|
||||||
margin-left: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Global Transition
|
|
||||||
// ---------------------------------------------------
|
|
||||||
|
|
||||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
|
|
||||||
@include transition(all .2s ease);
|
|
||||||
}
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
// Body
|
|
||||||
// --------------------------------------------------
|
|
||||||
body {
|
|
||||||
font-family: $base-font;
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Headings
|
|
||||||
// --------------------------------------------------
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: $heading-font;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Links
|
|
||||||
// --------------------------------------------------
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: $link-color;
|
|
||||||
&:visited {
|
|
||||||
color: lighten($link-color, 20);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: darken($link-color, 20);
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
outline: thin dotted;
|
|
||||||
color: darken($link-color, 20);
|
|
||||||
}
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-arrow {
|
|
||||||
font-weight: 100;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Figures
|
|
||||||
// --------------------------------------------------
|
|
||||||
figcaption {
|
|
||||||
padding-top: 10px;
|
|
||||||
@include font(14);
|
|
||||||
line-height: 1.3;
|
|
||||||
color: lighten($text-color, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Feature Image Caption
|
|
||||||
// --------------------------------------------------
|
|
||||||
.image-credit {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 440px;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-right: 20px;
|
|
||||||
padding-left: 20px;
|
|
||||||
text-align: right;
|
|
||||||
@include font(14);
|
|
||||||
line-height: 1.3;
|
|
||||||
color: lighten($text-color, 30);
|
|
||||||
@include clearfix();
|
|
||||||
@media #{$medium} {
|
|
||||||
max-width: 760px;
|
|
||||||
padding-right: 60px;
|
|
||||||
padding-left: 60px;
|
|
||||||
}
|
|
||||||
@media #{$large} {
|
|
||||||
max-width: 960px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: lighten($text-color, 30);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Note text
|
|
||||||
// --------------------------------------------------
|
|
||||||
.notice {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
padding: .5em 1em;
|
|
||||||
text-indent: 0;
|
|
||||||
@include font-rem(16);
|
|
||||||
background-color: lighten($black, 95);
|
|
||||||
border: 1px solid lighten($black, 90);
|
|
||||||
@include rounded(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Blockquotes
|
|
||||||
// --------------------------------------------------
|
|
||||||
blockquote {
|
|
||||||
font-family: $alt-font;
|
|
||||||
font-style: italic;
|
|
||||||
@include font-size(16);
|
|
||||||
padding-left: 20px;
|
|
||||||
border-left: 8px solid $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Footnotes
|
|
||||||
// --------------------------------------------------
|
|
||||||
.footnotes {
|
|
||||||
@include font(14);
|
|
||||||
font-family: $base-font;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Code
|
|
||||||
// --------------------------------------------------
|
|
||||||
tt, code, kbd, samp, pre {
|
|
||||||
font-family: $code-font;
|
|
||||||
}
|
|
||||||
p,
|
|
||||||
li {
|
|
||||||
code {
|
|
||||||
@include font(12);
|
|
||||||
white-space: nowrap;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0 5px;
|
|
||||||
border: 1px solid lighten($black, 90);
|
|
||||||
background-color: lighten($black, 95);
|
|
||||||
@include rounded(3px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
@include font(12);
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
// TYPOGRAPHY ================================================
|
|
||||||
$base-font: 'source-sans-pro', sans-serif;
|
|
||||||
$heading-font: $base-font;
|
|
||||||
$caption-font: $base-font;
|
|
||||||
$code-font: 'source-code-pro', monospace;
|
|
||||||
$alt-font: 'volkhov', serif;
|
|
||||||
|
|
||||||
$doc-font-size: 16;
|
|
||||||
$doc-line-height: 24;
|
|
||||||
|
|
||||||
|
|
||||||
// set-up the body font-size / line-height
|
|
||||||
body {
|
|
||||||
margin-top: 0px + $doc-line-height;
|
|
||||||
font-size: 0px + $doc-font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// COLORS =====================================================
|
|
||||||
$body-color : #fff;
|
|
||||||
$text-color : #222;
|
|
||||||
$base-color : #343434;
|
|
||||||
$comp-color : spin($base-color, 180);
|
|
||||||
$border-color : $base-color;
|
|
||||||
$white : #fff;
|
|
||||||
$black : #000;
|
|
||||||
$accent-color : $black;
|
|
||||||
$link-color : #222;
|
|
||||||
|
|
||||||
|
|
||||||
// MEDIA QUERIES ==============================================
|
|
||||||
$micro : "only screen and (min-width: 30em)";
|
|
||||||
$small : "only screen and (min-width: 37.5em)";
|
|
||||||
$medium : "only screen and (min-width: 48em)";
|
|
||||||
$large : "only screen and (min-width: 62em)";
|
|
||||||
$x-large : "only screen and (min-width: 86.375em)";
|
|
||||||
8
_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss
vendored
Normal file
8
_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// These mixins/functions are deprecated
|
||||||
|
// They will be removed in the next MAJOR version release
|
||||||
|
//************************************************************************//
|
||||||
|
@mixin inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
@warn "inline-block mixin is deprecated and will be removed in the next major version release";
|
||||||
|
}
|
||||||
78
_sass/vendor/bourbon/_bourbon.scss
vendored
Normal file
78
_sass/vendor/bourbon/_bourbon.scss
vendored
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
// Settings
|
||||||
|
@import "settings/prefixer";
|
||||||
|
@import "settings/px-to-em";
|
||||||
|
|
||||||
|
// Custom Helpers
|
||||||
|
@import "helpers/convert-units";
|
||||||
|
@import "helpers/gradient-positions-parser";
|
||||||
|
@import "helpers/is-num";
|
||||||
|
@import "helpers/linear-angle-parser";
|
||||||
|
@import "helpers/linear-gradient-parser";
|
||||||
|
@import "helpers/linear-positions-parser";
|
||||||
|
@import "helpers/linear-side-corner-parser";
|
||||||
|
@import "helpers/radial-arg-parser";
|
||||||
|
@import "helpers/radial-positions-parser";
|
||||||
|
@import "helpers/radial-gradient-parser";
|
||||||
|
@import "helpers/render-gradients";
|
||||||
|
@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/image-rendering";
|
||||||
|
@import "css3/keyframes";
|
||||||
|
@import "css3/linear-gradient";
|
||||||
|
@import "css3/perspective";
|
||||||
|
@import "css3/radial-gradient";
|
||||||
|
@import "css3/transform";
|
||||||
|
@import "css3/transition";
|
||||||
|
@import "css3/user-select";
|
||||||
|
@import "css3/placeholder";
|
||||||
|
|
||||||
|
// Addons & other mixins
|
||||||
|
@import "addons/button";
|
||||||
|
@import "addons/clearfix";
|
||||||
|
@import "addons/directional-values";
|
||||||
|
@import "addons/ellipsis";
|
||||||
|
@import "addons/font-family";
|
||||||
|
@import "addons/hide-text";
|
||||||
|
@import "addons/html5-input-types";
|
||||||
|
@import "addons/position";
|
||||||
|
@import "addons/prefixer";
|
||||||
|
@import "addons/retina-image";
|
||||||
|
@import "addons/size";
|
||||||
|
@import "addons/timing-functions";
|
||||||
|
@import "addons/triangle";
|
||||||
|
@import "addons/word-wrap";
|
||||||
|
|
||||||
|
// Soon to be deprecated Mixins
|
||||||
|
@import "bourbon-deprecated-upcoming";
|
||||||
374
_sass/vendor/bourbon/addons/_button.scss
vendored
Normal file
374
_sass/vendor/bourbon/addons/_button.scss
vendored
Normal file
|
|
@ -0,0 +1,374 @@
|
||||||
|
@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
|
||||||
|
|
||||||
|
@if type-of($style) == string and type-of($base-color) == color {
|
||||||
|
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if type-of($style) == string and type-of($base-color) == number {
|
||||||
|
$padding: $text-size;
|
||||||
|
$text-size: $base-color;
|
||||||
|
$base-color: #4294f0;
|
||||||
|
|
||||||
|
@if $padding == inherit {
|
||||||
|
$padding: 7px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if type-of($style) == color and type-of($base-color) == color {
|
||||||
|
$base-color: $style;
|
||||||
|
$style: simple;
|
||||||
|
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if type-of($style) == color and type-of($base-color) == number {
|
||||||
|
$padding: $text-size;
|
||||||
|
$text-size: $base-color;
|
||||||
|
$base-color: $style;
|
||||||
|
$style: simple;
|
||||||
|
|
||||||
|
@if $padding == inherit {
|
||||||
|
$padding: 7px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if type-of($style) == number {
|
||||||
|
$padding: $base-color;
|
||||||
|
$text-size: $style;
|
||||||
|
$base-color: #4294f0;
|
||||||
|
$style: simple;
|
||||||
|
|
||||||
|
@if $padding == #4294f0 {
|
||||||
|
$padding: 7px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include buttonstyle($style, $base-color, $text-size, $padding);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Selector Style Button
|
||||||
|
//************************************************************************//
|
||||||
|
@mixin buttonstyle($type, $b-color, $t-size, $pad) {
|
||||||
|
// Grayscale button
|
||||||
|
@if $type == simple and $b-color == grayscale($b-color) {
|
||||||
|
@include simple($b-color, true, $t-size, $pad);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $type == shiny and $b-color == grayscale($b-color) {
|
||||||
|
@include shiny($b-color, true, $t-size, $pad);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $type == pill and $b-color == grayscale($b-color) {
|
||||||
|
@include pill($b-color, true, $t-size, $pad);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $type == flat and $b-color == grayscale($b-color) {
|
||||||
|
@include flat($b-color, true, $t-size, $pad);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Colored button
|
||||||
|
@if $type == simple {
|
||||||
|
@include simple($b-color, false, $t-size, $pad);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $type == shiny {
|
||||||
|
@include shiny($b-color, false, $t-size, $pad);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $type == pill {
|
||||||
|
@include pill($b-color, false, $t-size, $pad);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $type == flat {
|
||||||
|
@include flat($b-color, false, $t-size, $pad);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Simple Button
|
||||||
|
//************************************************************************//
|
||||||
|
@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||||
|
$color: hsl(0, 0, 100%);
|
||||||
|
$border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||||
|
$inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
|
||||||
|
$stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
|
||||||
|
$text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
|
||||||
|
|
||||||
|
@if is-light($base-color) {
|
||||||
|
$color: hsl(0, 0, 20%);
|
||||||
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$border: grayscale($border);
|
||||||
|
$inset-shadow: grayscale($inset-shadow);
|
||||||
|
$stop-gradient: grayscale($stop-gradient);
|
||||||
|
$text-shadow: grayscale($text-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
border: 1px solid $border;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||||
|
color: $color;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: $textsize;
|
||||||
|
font-weight: bold;
|
||||||
|
@include linear-gradient ($base-color, $stop-gradient);
|
||||||
|
padding: $padding;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: 0 1px 0 $text-shadow;
|
||||||
|
background-clip: padding-box;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||||
|
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
|
||||||
|
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$base-color-hover: grayscale($base-color-hover);
|
||||||
|
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||||
|
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||||
|
cursor: pointer;
|
||||||
|
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:not(:disabled),
|
||||||
|
&:focus:not(:disabled) {
|
||||||
|
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
|
||||||
|
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$border-active: grayscale($border-active);
|
||||||
|
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
border: 1px solid $border-active;
|
||||||
|
box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Shiny Button
|
||||||
|
//************************************************************************//
|
||||||
|
@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||||
|
$color: hsl(0, 0, 100%);
|
||||||
|
$border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
|
||||||
|
$border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
|
||||||
|
$fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
|
||||||
|
$inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
|
||||||
|
$second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
|
||||||
|
$text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
|
||||||
|
$third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
|
||||||
|
|
||||||
|
@if is-light($base-color) {
|
||||||
|
$color: hsl(0, 0, 20%);
|
||||||
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$border: grayscale($border);
|
||||||
|
$border-bottom: grayscale($border-bottom);
|
||||||
|
$fourth-stop: grayscale($fourth-stop);
|
||||||
|
$inset-shadow: grayscale($inset-shadow);
|
||||||
|
$second-stop: grayscale($second-stop);
|
||||||
|
$text-shadow: grayscale($text-shadow);
|
||||||
|
$third-stop: grayscale($third-stop);
|
||||||
|
}
|
||||||
|
|
||||||
|
border: 1px solid $border;
|
||||||
|
border-bottom: 1px solid $border-bottom;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||||
|
color: $color;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: $textsize;
|
||||||
|
font-weight: bold;
|
||||||
|
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
|
||||||
|
padding: $padding;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: 0 -1px 1px $text-shadow;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
$first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
|
||||||
|
$second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
|
||||||
|
$third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
|
||||||
|
$fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$first-stop-hover: grayscale($first-stop-hover);
|
||||||
|
$second-stop-hover: grayscale($second-stop-hover);
|
||||||
|
$third-stop-hover: grayscale($third-stop-hover);
|
||||||
|
$fourth-stop-hover: grayscale($fourth-stop-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
@include linear-gradient(top, $first-stop-hover 0%,
|
||||||
|
$second-stop-hover 50%,
|
||||||
|
$third-stop-hover 50%,
|
||||||
|
$fourth-stop-hover 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:not(:disabled),
|
||||||
|
&:focus:not(:disabled) {
|
||||||
|
$inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
box-shadow: inset 0 0 20px 0 $inset-shadow-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Pill Button
|
||||||
|
//************************************************************************//
|
||||||
|
@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||||
|
$color: hsl(0, 0, 100%);
|
||||||
|
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
|
||||||
|
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
|
||||||
|
$border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
|
||||||
|
$inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
|
||||||
|
$stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
|
||||||
|
$text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
|
||||||
|
|
||||||
|
@if is-light($base-color) {
|
||||||
|
$color: hsl(0, 0, 20%);
|
||||||
|
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$border-bottom: grayscale($border-bottom);
|
||||||
|
$border-sides: grayscale($border-sides);
|
||||||
|
$border-top: grayscale($border-top);
|
||||||
|
$inset-shadow: grayscale($inset-shadow);
|
||||||
|
$stop-gradient: grayscale($stop-gradient);
|
||||||
|
$text-shadow: grayscale($text-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
border: 1px solid $border-top;
|
||||||
|
border-color: $border-top $border-sides $border-bottom;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: inset 0 1px 0 0 $inset-shadow;
|
||||||
|
color: $color;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: $textsize;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1;
|
||||||
|
@include linear-gradient ($base-color, $stop-gradient);
|
||||||
|
padding: $padding;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: 0 -1px 1px $text-shadow;
|
||||||
|
background-clip: padding-box;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
$base-color-hover: adjust-color($base-color, $lightness: -4.5%);
|
||||||
|
$border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
|
||||||
|
$border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
|
||||||
|
$border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
|
||||||
|
$inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
|
||||||
|
$stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
|
||||||
|
$text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$base-color-hover: grayscale($base-color-hover);
|
||||||
|
$border-bottom: grayscale($border-bottom);
|
||||||
|
$border-sides: grayscale($border-sides);
|
||||||
|
$border-top: grayscale($border-top);
|
||||||
|
$inset-shadow-hover: grayscale($inset-shadow-hover);
|
||||||
|
$stop-gradient-hover: grayscale($stop-gradient-hover);
|
||||||
|
$text-shadow-hover: grayscale($text-shadow-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
border: 1px solid $border-top;
|
||||||
|
border-color: $border-top $border-sides $border-bottom;
|
||||||
|
box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
|
||||||
|
cursor: pointer;
|
||||||
|
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
|
||||||
|
text-shadow: 0 -1px 1px $text-shadow-hover;
|
||||||
|
background-clip: padding-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:not(:disabled),
|
||||||
|
&:focus:not(:disabled) {
|
||||||
|
$active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
|
||||||
|
$border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
|
||||||
|
$border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
|
||||||
|
$inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
|
||||||
|
$text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$active-color: grayscale($active-color);
|
||||||
|
$border-active: grayscale($border-active);
|
||||||
|
$border-bottom-active: grayscale($border-bottom-active);
|
||||||
|
$inset-shadow-active: grayscale($inset-shadow-active);
|
||||||
|
$text-shadow-active: grayscale($text-shadow-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
background: $active-color;
|
||||||
|
border: 1px solid $border-active;
|
||||||
|
border-bottom: 1px solid $border-bottom-active;
|
||||||
|
box-shadow: inset 0 0 6px 3px $inset-shadow-active;
|
||||||
|
text-shadow: 0 -1px 1px $text-shadow-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Flat Button
|
||||||
|
//************************************************************************//
|
||||||
|
@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
|
||||||
|
$color: hsl(0, 0, 100%);
|
||||||
|
|
||||||
|
@if is-light($base-color) {
|
||||||
|
$color: hsl(0, 0, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: $base-color;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: none;
|
||||||
|
color: $color;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 7px 18px;
|
||||||
|
text-decoration: none;
|
||||||
|
background-clip: padding-box;
|
||||||
|
|
||||||
|
&:hover:not(:disabled){
|
||||||
|
$base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$base-color-hover: grayscale($base-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: $base-color-hover;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:not(:disabled),
|
||||||
|
&:focus:not(:disabled) {
|
||||||
|
$base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
|
||||||
|
|
||||||
|
@if $grayscale == true {
|
||||||
|
$base-color-active: grayscale($base-color-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: $base-color-active;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
_sass/vendor/bourbon/addons/_clearfix.scss
vendored
Normal file
23
_sass/vendor/bourbon/addons/_clearfix.scss
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
// 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;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
@mixin clearfix {
|
||||||
|
&:after {
|
||||||
|
content:"";
|
||||||
|
display:table;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Acknowledgements
|
||||||
|
// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)
|
||||||
111
_sass/vendor/bourbon/addons/_directional-values.scss
vendored
Normal file
111
_sass/vendor/bourbon/addons/_directional-values.scss
vendored
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
// 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...);
|
||||||
|
}
|
||||||
7
_sass/vendor/bourbon/addons/_ellipsis.scss
vendored
Normal file
7
_sass/vendor/bourbon/addons/_ellipsis.scss
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@mixin ellipsis($width: 100%) {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: $width;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
5
_sass/vendor/bourbon/addons/_font-family.scss
vendored
Normal file
5
_sass/vendor/bourbon/addons/_font-family.scss
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
$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;
|
||||||
10
_sass/vendor/bourbon/addons/_hide-text.scss
vendored
Normal file
10
_sass/vendor/bourbon/addons/_hide-text.scss
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
@mixin hide-text {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
86
_sass/vendor/bourbon/addons/_html5-input-types.scss
vendored
Normal file
86
_sass/vendor/bourbon/addons/_html5-input-types.scss
vendored
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// 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;
|
||||||
|
// }
|
||||||
32
_sass/vendor/bourbon/addons/_position.scss
vendored
Normal file
32
_sass/vendor/bourbon/addons/_position.scss
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
@mixin position ($position: relative, $coordinates: null null null null) {
|
||||||
|
|
||||||
|
@if type-of($position) == list {
|
||||||
|
$coordinates: $position;
|
||||||
|
$position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
$coordinates: unpack($coordinates);
|
||||||
|
|
||||||
|
$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;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
_sass/vendor/bourbon/addons/_prefixer.scss
vendored
Normal file
45
_sass/vendor/bourbon/addons/_prefixer.scss
vendored
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
|
||||||
|
//************************************************************************//
|
||||||
|
// Variables located in /settings/_prefixer.scss
|
||||||
|
|
||||||
|
@mixin prefixer ($property, $value, $prefixes) {
|
||||||
|
@each $prefix in $prefixes {
|
||||||
|
@if $prefix == webkit {
|
||||||
|
@if $prefix-for-webkit {
|
||||||
|
-webkit-#{$property}: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if $prefix == moz {
|
||||||
|
@if $prefix-for-mozilla {
|
||||||
|
-moz-#{$property}: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if $prefix == ms {
|
||||||
|
@if $prefix-for-microsoft {
|
||||||
|
-ms-#{$property}: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if $prefix == o {
|
||||||
|
@if $prefix-for-opera {
|
||||||
|
-o-#{$property}: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if $prefix == spec {
|
||||||
|
@if $prefix-for-spec {
|
||||||
|
#{$property}: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@warn "Unrecognized prefix: #{$prefix}";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin disable-prefix-for-all() {
|
||||||
|
$prefix-for-webkit: false !global;
|
||||||
|
$prefix-for-mozilla: false !global;
|
||||||
|
$prefix-for-microsoft: false !global;
|
||||||
|
$prefix-for-opera: false !global;
|
||||||
|
$prefix-for-spec: false !global;
|
||||||
|
}
|
||||||
31
_sass/vendor/bourbon/addons/_retina-image.scss
vendored
Normal file
31
_sass/vendor/bourbon/addons/_retina-image.scss
vendored
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) {
|
||||||
|
@if $asset-pipeline {
|
||||||
|
background-image: image-url("#{$filename}.#{$extension}");
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
background-image: url("#{$filename}.#{$extension}");
|
||||||
|
}
|
||||||
|
|
||||||
|
@include hidpi {
|
||||||
|
@if $asset-pipeline {
|
||||||
|
@if $retina-filename {
|
||||||
|
background-image: image-url("#{$retina-filename}.#{$extension}");
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@if $retina-filename {
|
||||||
|
background-image: url("#{$retina-filename}.#{$extension}");
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
background-size: $background-size;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
16
_sass/vendor/bourbon/addons/_size.scss
vendored
Normal file
16
_sass/vendor/bourbon/addons/_size.scss
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
@mixin size($size) {
|
||||||
|
$height: nth($size, 1);
|
||||||
|
$width: $height;
|
||||||
|
|
||||||
|
@if length($size) > 1 {
|
||||||
|
$height: nth($size, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $height == auto or (type-of($height) == number and not unitless($height)) {
|
||||||
|
height: $height;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $width == auto or (type-of($height) == number and not unitless($width)) {
|
||||||
|
width: $width;
|
||||||
|
}
|
||||||
|
}
|
||||||
32
_sass/vendor/bourbon/addons/_timing-functions.scss
vendored
Normal file
32
_sass/vendor/bourbon/addons/_timing-functions.scss
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
// 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/demos/effect/easing.html
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||||
|
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
|
||||||
|
$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);
|
||||||
|
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
|
||||||
|
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
|
||||||
|
$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);
|
||||||
|
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
|
||||||
|
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
|
||||||
|
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
|
||||||
|
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
|
||||||
|
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
|
||||||
83
_sass/vendor/bourbon/addons/_triangle.scss
vendored
Normal file
83
_sass/vendor/bourbon/addons/_triangle.scss
vendored
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
@mixin triangle ($size, $color, $direction) {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
|
||||||
|
$width: nth($size, 1);
|
||||||
|
$height: nth($size, length($size));
|
||||||
|
|
||||||
|
$foreground-color: nth($color, 1);
|
||||||
|
$background-color: if(length($color) == 2, nth($color, 2), transparent);
|
||||||
|
|
||||||
|
@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-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;
|
||||||
|
|
||||||
|
} @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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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) {
|
||||||
|
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;
|
||||||
|
border-color: $background-color $background-color $foreground-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if ($direction == inset-down) {
|
||||||
|
border-width: $height $width;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $foreground-color $background-color $background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if ($direction == inset-right) {
|
||||||
|
border-width: $width $height;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $background-color $background-color $background-color $foreground-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if ($direction == inset-left) {
|
||||||
|
border-width: $width $height;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $background-color $foreground-color $background-color $background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
8
_sass/vendor/bourbon/addons/_word-wrap.scss
vendored
Normal file
8
_sass/vendor/bourbon/addons/_word-wrap.scss
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@mixin word-wrap($wrap: break-word) {
|
||||||
|
word-wrap: $wrap;
|
||||||
|
|
||||||
|
@if $wrap == break-word {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
52
_sass/vendor/bourbon/css3/_animation.scss
vendored
Normal file
52
_sass/vendor/bourbon/css3/_animation.scss
vendored
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
// 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...) {
|
||||||
|
@include prefixer(animation, $animations, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Individual Animation Properties
|
||||||
|
@mixin animation-name ($names...) {
|
||||||
|
@include prefixer(animation-name, $names, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@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
|
||||||
|
@include prefixer(animation-timing-function, $motions, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin animation-iteration-count ($values...) {
|
||||||
|
// infinite | <number>
|
||||||
|
@include prefixer(animation-iteration-count, $values, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin animation-direction ($directions...) {
|
||||||
|
// normal | alternate
|
||||||
|
@include prefixer(animation-direction, $directions, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin animation-play-state ($states...) {
|
||||||
|
// running | paused
|
||||||
|
@include prefixer(animation-play-state, $states, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin animation-delay ($times...) {
|
||||||
|
@include prefixer(animation-delay, $times, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin animation-fill-mode ($modes...) {
|
||||||
|
// none | forwards | backwards | both
|
||||||
|
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
|
||||||
|
}
|
||||||
3
_sass/vendor/bourbon/css3/_appearance.scss
vendored
Normal file
3
_sass/vendor/bourbon/css3/_appearance.scss
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@mixin appearance ($value) {
|
||||||
|
@include prefixer(appearance, $value, webkit moz ms o spec);
|
||||||
|
}
|
||||||
6
_sass/vendor/bourbon/css3/_backface-visibility.scss
vendored
Normal file
6
_sass/vendor/bourbon/css3/_backface-visibility.scss
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// Backface-visibility mixin
|
||||||
|
//************************************************************************//
|
||||||
|
@mixin backface-visibility($visibility) {
|
||||||
|
@include prefixer(backface-visibility, $visibility, webkit spec);
|
||||||
|
}
|
||||||
42
_sass/vendor/bourbon/css3/_background-image.scss
vendored
Normal file
42
_sass/vendor/bourbon/css3/_background-image.scss
vendored
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// Background-image property for adding multiple background images with
|
||||||
|
// gradients, or for stringing multiple gradients together.
|
||||||
|
//************************************************************************//
|
||||||
|
|
||||||
|
@mixin background-image($images...) {
|
||||||
|
$webkit-images: ();
|
||||||
|
$spec-images: ();
|
||||||
|
|
||||||
|
@each $image in $images {
|
||||||
|
$webkit-image: ();
|
||||||
|
$spec-image: ();
|
||||||
|
|
||||||
|
@if (type-of($image) == string) {
|
||||||
|
$url-str: str-slice($image, 0, 3);
|
||||||
|
$gradient-type: str-slice($image, 0, 6);
|
||||||
|
|
||||||
|
@if $url-str == "url" {
|
||||||
|
$webkit-image: $image;
|
||||||
|
$spec-image: $image;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $gradient-type == "linear" {
|
||||||
|
$gradients: _linear-gradient-parser($image);
|
||||||
|
$webkit-image: map-get($gradients, webkit-image);
|
||||||
|
$spec-image: map-get($gradients, spec-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $gradient-type == "radial" {
|
||||||
|
$gradients: _radial-gradient-parser($image);
|
||||||
|
$webkit-image: map-get($gradients, webkit-image);
|
||||||
|
$spec-image: map-get($gradients, spec-image);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$webkit-images: append($webkit-images, $webkit-image, comma);
|
||||||
|
$spec-images: append($spec-images, $spec-image, comma);
|
||||||
|
}
|
||||||
|
|
||||||
|
background-image: $webkit-images;
|
||||||
|
background-image: $spec-images;
|
||||||
|
}
|
||||||
55
_sass/vendor/bourbon/css3/_background.scss
vendored
Normal file
55
_sass/vendor/bourbon/css3/_background.scss
vendored
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// Background property for adding multiple backgrounds using shorthand
|
||||||
|
// notation.
|
||||||
|
//************************************************************************//
|
||||||
|
|
||||||
|
@mixin background($backgrounds...) {
|
||||||
|
$webkit-backgrounds: ();
|
||||||
|
$spec-backgrounds: ();
|
||||||
|
|
||||||
|
@each $background in $backgrounds {
|
||||||
|
$webkit-background: ();
|
||||||
|
$spec-background: ();
|
||||||
|
$background-type: type-of($background);
|
||||||
|
|
||||||
|
@if $background-type == string or list {
|
||||||
|
$background-str: if($background-type == list, nth($background, 1), $background);
|
||||||
|
|
||||||
|
$url-str: str-slice($background-str, 0, 3);
|
||||||
|
$gradient-type: str-slice($background-str, 0, 6);
|
||||||
|
|
||||||
|
@if $url-str == "url" {
|
||||||
|
$webkit-background: $background;
|
||||||
|
$spec-background: $background;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $gradient-type == "linear" {
|
||||||
|
$gradients: _linear-gradient-parser("#{$background}");
|
||||||
|
$webkit-background: map-get($gradients, webkit-image);
|
||||||
|
$spec-background: map-get($gradients, spec-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $gradient-type == "radial" {
|
||||||
|
$gradients: _radial-gradient-parser("#{$background}");
|
||||||
|
$webkit-background: map-get($gradients, webkit-image);
|
||||||
|
$spec-background: map-get($gradients, spec-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
$webkit-background: $background;
|
||||||
|
$spec-background: $background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
$webkit-background: $background;
|
||||||
|
$spec-background: $background;
|
||||||
|
}
|
||||||
|
|
||||||
|
$webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
|
||||||
|
$spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
|
||||||
|
}
|
||||||
|
|
||||||
|
background: $webkit-backgrounds;
|
||||||
|
background: $spec-backgrounds;
|
||||||
|
}
|
||||||
59
_sass/vendor/bourbon/css3/_border-image.scss
vendored
Normal file
59
_sass/vendor/bourbon/css3/_border-image.scss
vendored
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
@mixin border-image($borders...) {
|
||||||
|
$webkit-borders: ();
|
||||||
|
$spec-borders: ();
|
||||||
|
|
||||||
|
@each $border in $borders {
|
||||||
|
$webkit-border: ();
|
||||||
|
$spec-border: ();
|
||||||
|
$border-type: type-of($border);
|
||||||
|
|
||||||
|
@if $border-type == string or list {
|
||||||
|
$border-str: if($border-type == list, nth($border, 1), $border);
|
||||||
|
|
||||||
|
$url-str: str-slice($border-str, 0, 3);
|
||||||
|
$gradient-type: str-slice($border-str, 0, 6);
|
||||||
|
|
||||||
|
@if $url-str == "url" {
|
||||||
|
$webkit-border: $border;
|
||||||
|
$spec-border: $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $gradient-type == "linear" {
|
||||||
|
$gradients: _linear-gradient-parser("#{$border}");
|
||||||
|
$webkit-border: map-get($gradients, webkit-image);
|
||||||
|
$spec-border: map-get($gradients, spec-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $gradient-type == "radial" {
|
||||||
|
$gradients: _radial-gradient-parser("#{$border}");
|
||||||
|
$webkit-border: map-get($gradients, webkit-image);
|
||||||
|
$spec-border: map-get($gradients, spec-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
$webkit-border: $border;
|
||||||
|
$spec-border: $border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
$webkit-border: $border;
|
||||||
|
$spec-border: $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
$webkit-borders: append($webkit-borders, $webkit-border, comma);
|
||||||
|
$spec-borders: append($spec-borders, $spec-border, comma);
|
||||||
|
}
|
||||||
|
|
||||||
|
-webkit-border-image: $webkit-borders;
|
||||||
|
border-image: $spec-borders;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Examples:
|
||||||
|
// @include border-image(url("image.png"));
|
||||||
|
// @include border-image(url("image.png") 20 stretch);
|
||||||
|
// @include border-image(linear-gradient(45deg, orange, yellow));
|
||||||
|
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
|
||||||
|
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
|
||||||
|
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
|
||||||
22
_sass/vendor/bourbon/css3/_border-radius.scss
vendored
Normal file
22
_sass/vendor/bourbon/css3/_border-radius.scss
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
4
_sass/vendor/bourbon/css3/_box-sizing.scss
vendored
Normal file
4
_sass/vendor/bourbon/css3/_box-sizing.scss
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@mixin box-sizing ($box) {
|
||||||
|
// content-box | border-box | inherit
|
||||||
|
@include prefixer(box-sizing, $box, webkit moz spec);
|
||||||
|
}
|
||||||
4
_sass/vendor/bourbon/css3/_calc.scss
vendored
Normal file
4
_sass/vendor/bourbon/css3/_calc.scss
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@mixin calc($property, $value) {
|
||||||
|
#{$property}: -webkit-calc(#{$value});
|
||||||
|
#{$property}: calc(#{$value});
|
||||||
|
}
|
||||||
47
_sass/vendor/bourbon/css3/_columns.scss
vendored
Normal file
47
_sass/vendor/bourbon/css3/_columns.scss
vendored
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
@mixin columns($arg: auto) {
|
||||||
|
// <column-count> || <column-width>
|
||||||
|
@include prefixer(columns, $arg, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-count($int: auto) {
|
||||||
|
// auto || integer
|
||||||
|
@include prefixer(column-count, $int, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-gap($length: normal) {
|
||||||
|
// normal || length
|
||||||
|
@include prefixer(column-gap, $length, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-fill($arg: auto) {
|
||||||
|
// auto || length
|
||||||
|
@include prefixer(column-fill, $arg, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-rule($arg) {
|
||||||
|
// <border-width> || <border-style> || <color>
|
||||||
|
@include prefixer(column-rule, $arg, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-rule-color($color) {
|
||||||
|
@include prefixer(column-rule-color, $color, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-rule-style($style: none) {
|
||||||
|
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
|
||||||
|
@include prefixer(column-rule-style, $style, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-rule-width ($width: none) {
|
||||||
|
@include prefixer(column-rule-width, $width, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-span($arg: none) {
|
||||||
|
// none || all
|
||||||
|
@include prefixer(column-span, $arg, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin column-width($length: auto) {
|
||||||
|
// auto || length
|
||||||
|
@include prefixer(column-width, $length, webkit moz spec);
|
||||||
|
}
|
||||||
5
_sass/vendor/bourbon/css3/_filter.scss
vendored
Normal file
5
_sass/vendor/bourbon/css3/_filter.scss
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@mixin filter($function: none) {
|
||||||
|
// <filter-function> [<filter-function]* | none
|
||||||
|
@include prefixer(filter, $function, webkit spec);
|
||||||
|
}
|
||||||
|
|
||||||
321
_sass/vendor/bourbon/css3/_flex-box.scss
vendored
Normal file
321
_sass/vendor/bourbon/css3/_flex-box.scss
vendored
Normal file
|
|
@ -0,0 +1,321 @@
|
||||||
|
// CSS3 Flexible Box Model and property defaults
|
||||||
|
|
||||||
|
// Custom shorthand notation for flexbox
|
||||||
|
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
|
||||||
|
@include display-box;
|
||||||
|
@include box-orient($orient);
|
||||||
|
@include box-pack($pack);
|
||||||
|
@include box-align($align);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin display-box {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox; // IE 10
|
||||||
|
display: box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-orient($orient: inline-axis) {
|
||||||
|
// horizontal|vertical|inline-axis|block-axis|inherit
|
||||||
|
@include prefixer(box-orient, $orient, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-pack($pack: start) {
|
||||||
|
// start|end|center|justify
|
||||||
|
@include prefixer(box-pack, $pack, webkit moz spec);
|
||||||
|
-ms-flex-pack: $pack; // IE 10
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-align($align: stretch) {
|
||||||
|
// start|end|center|baseline|stretch
|
||||||
|
@include prefixer(box-align, $align, webkit moz spec);
|
||||||
|
-ms-flex-align: $align; // IE 10
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-direction($direction: normal) {
|
||||||
|
// normal|reverse|inherit
|
||||||
|
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||||
|
-ms-flex-direction: $direction; // IE 10
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-lines($lines: single) {
|
||||||
|
// single|multiple
|
||||||
|
@include prefixer(box-lines, $lines, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-ordinal-group($int: 1) {
|
||||||
|
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||||
|
-ms-flex-order: $int; // IE 10
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-flex($value: 0.0) {
|
||||||
|
@include prefixer(box-flex, $value, webkit moz spec);
|
||||||
|
-ms-flex: $value; // IE 10
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-flex-group($int: 1) {
|
||||||
|
@include prefixer(box-flex-group, $int, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
// CSS3 Flexible Box Model and property defaults
|
||||||
|
// Unified attributes for 2009, 2011, and 2012 flavours.
|
||||||
|
|
||||||
|
// 2009 - display (box | inline-box)
|
||||||
|
// 2011 - display (flexbox | inline-flexbox)
|
||||||
|
// 2012 - display (flex | inline-flex)
|
||||||
|
@mixin display($value) {
|
||||||
|
// flex | inline-flex
|
||||||
|
@if $value == "flex" {
|
||||||
|
// 2009
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: box;
|
||||||
|
|
||||||
|
// 2012
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-flex;
|
||||||
|
display: -ms-flexbox; // 2011 (IE 10)
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "inline-flex" {
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
display: -moz-inline-box;
|
||||||
|
display: inline-box;
|
||||||
|
|
||||||
|
display: -webkit-inline-flex;
|
||||||
|
display: -moz-inline-flex;
|
||||||
|
display: -ms-inline-flexbox;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
display: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009 - box-flex (integer)
|
||||||
|
// 2011 - flex (decimal | width decimal)
|
||||||
|
// 2012 - flex (integer integer width)
|
||||||
|
@mixin flex($value) {
|
||||||
|
|
||||||
|
// Grab flex-grow for older browsers.
|
||||||
|
$flex-grow: nth($value, 1);
|
||||||
|
|
||||||
|
// 2009
|
||||||
|
@include prefixer(box-flex, $flex-grow, webkit moz spec);
|
||||||
|
|
||||||
|
// 2011 (IE 10), 2012
|
||||||
|
@include prefixer(flex, $value, webkit moz ms spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
|
||||||
|
// - box-direction (normal | reverse)
|
||||||
|
// 2011 - flex-direction (row | row-reverse | column | column-reverse)
|
||||||
|
// 2012 - flex-direction (row | row-reverse | column | column-reverse)
|
||||||
|
@mixin flex-direction($value: row) {
|
||||||
|
|
||||||
|
// Alt values.
|
||||||
|
$value-2009: $value;
|
||||||
|
$value-2011: $value;
|
||||||
|
$direction: "normal";
|
||||||
|
|
||||||
|
@if $value == row {
|
||||||
|
$value-2009: horizontal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "row-reverse" {
|
||||||
|
$value-2009: horizontal;
|
||||||
|
$direction: reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == column {
|
||||||
|
$value-2009: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "column-reverse" {
|
||||||
|
$value-2009: vertical;
|
||||||
|
$direction: reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009
|
||||||
|
@include prefixer(box-orient, $value-2009, webkit moz spec);
|
||||||
|
@if $direction == "reverse" {
|
||||||
|
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2012
|
||||||
|
@include prefixer(flex-direction, $value, webkit moz spec);
|
||||||
|
|
||||||
|
// 2011 (IE 10)
|
||||||
|
-ms-flex-direction: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009 - box-lines (single | multiple)
|
||||||
|
// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||||
|
// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
|
||||||
|
@mixin flex-wrap($value: nowrap) {
|
||||||
|
|
||||||
|
// Alt values.
|
||||||
|
$alt-value: $value;
|
||||||
|
@if $value == nowrap {
|
||||||
|
$alt-value: single;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == wrap {
|
||||||
|
$alt-value: multiple;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "wrap-reverse" {
|
||||||
|
$alt-value: multiple;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include prefixer(box-lines, $alt-value, webkit moz spec);
|
||||||
|
@include prefixer(flex-wrap, $value, webkit moz ms spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009 - TODO: parse values into flex-direction/flex-wrap
|
||||||
|
// 2011 - TODO: parse values into flex-direction/flex-wrap
|
||||||
|
// 2012 - flex-flow (flex-direction || flex-wrap)
|
||||||
|
@mixin flex-flow($value) {
|
||||||
|
@include prefixer(flex-flow, $value, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009 - box-ordinal-group (integer)
|
||||||
|
// 2011 - flex-order (integer)
|
||||||
|
// 2012 - order (integer)
|
||||||
|
@mixin order($int: 0) {
|
||||||
|
// 2009
|
||||||
|
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||||
|
|
||||||
|
// 2012
|
||||||
|
@include prefixer(order, $int, webkit moz spec);
|
||||||
|
|
||||||
|
// 2011 (IE 10)
|
||||||
|
-ms-flex-order: $int;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2012 - flex-grow (number)
|
||||||
|
@mixin flex-grow($number: 0) {
|
||||||
|
@include prefixer(flex-grow, $number, webkit moz spec);
|
||||||
|
-ms-flex-positive: $number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2012 - flex-shrink (number)
|
||||||
|
@mixin flex-shrink($number: 1) {
|
||||||
|
@include prefixer(flex-shrink, $number, webkit moz spec);
|
||||||
|
-ms-flex-negative: $number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2012 - flex-basis (number)
|
||||||
|
@mixin flex-basis($width: auto) {
|
||||||
|
@include prefixer(flex-basis, $width, webkit moz spec);
|
||||||
|
-ms-flex-preferred-size: $width;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009 - box-pack (start | end | center | justify)
|
||||||
|
// 2011 - flex-pack (start | end | center | justify)
|
||||||
|
// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
|
||||||
|
@mixin justify-content ($value: flex-start) {
|
||||||
|
|
||||||
|
// Alt values.
|
||||||
|
$alt-value: $value;
|
||||||
|
@if $value == "flex-start" {
|
||||||
|
$alt-value: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "flex-end" {
|
||||||
|
$alt-value: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "space-between" {
|
||||||
|
$alt-value: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "space-around" {
|
||||||
|
$alt-value: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009
|
||||||
|
@include prefixer(box-pack, $alt-value, webkit moz spec);
|
||||||
|
|
||||||
|
// 2012
|
||||||
|
@include prefixer(justify-content, $value, webkit moz ms o spec);
|
||||||
|
|
||||||
|
// 2011 (IE 10)
|
||||||
|
-ms-flex-pack: $alt-value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009 - box-align (start | end | center | baseline | stretch)
|
||||||
|
// 2011 - flex-align (start | end | center | baseline | stretch)
|
||||||
|
// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
|
||||||
|
@mixin align-items($value: stretch) {
|
||||||
|
|
||||||
|
$alt-value: $value;
|
||||||
|
|
||||||
|
@if $value == "flex-start" {
|
||||||
|
$alt-value: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "flex-end" {
|
||||||
|
$alt-value: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2009
|
||||||
|
@include prefixer(box-align, $alt-value, webkit moz spec);
|
||||||
|
|
||||||
|
// 2012
|
||||||
|
@include prefixer(align-items, $value, webkit moz ms o spec);
|
||||||
|
|
||||||
|
// 2011 (IE 10)
|
||||||
|
-ms-flex-align: $alt-value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
|
||||||
|
// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
|
||||||
|
@mixin align-self($value: auto) {
|
||||||
|
|
||||||
|
$value-2011: $value;
|
||||||
|
@if $value == "flex-start" {
|
||||||
|
$value-2011: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "flex-end" {
|
||||||
|
$value-2011: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2012
|
||||||
|
@include prefixer(align-self, $value, webkit moz spec);
|
||||||
|
|
||||||
|
// 2011 (IE 10)
|
||||||
|
-ms-flex-item-align: $value-2011;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
|
||||||
|
// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
|
||||||
|
@mixin align-content($value: stretch) {
|
||||||
|
|
||||||
|
$value-2011: $value;
|
||||||
|
@if $value == "flex-start" {
|
||||||
|
$value-2011: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "flex-end" {
|
||||||
|
$value-2011: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "space-between" {
|
||||||
|
$value-2011: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
@elseif $value == "space-around" {
|
||||||
|
$value-2011: distribute;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2012
|
||||||
|
@include prefixer(align-content, $value, webkit moz spec);
|
||||||
|
|
||||||
|
// 2011 (IE 10)
|
||||||
|
-ms-flex-line-pack: $value-2011;
|
||||||
|
}
|
||||||
|
|
||||||
23
_sass/vendor/bourbon/css3/_font-face.scss
vendored
Normal file
23
_sass/vendor/bourbon/css3/_font-face.scss
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
// 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: false ) {
|
||||||
|
@font-face {
|
||||||
|
font-family: $font-family;
|
||||||
|
font-weight: $weight;
|
||||||
|
font-style: $style;
|
||||||
|
|
||||||
|
@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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
10
_sass/vendor/bourbon/css3/_font-feature-settings.scss
vendored
Normal file
10
_sass/vendor/bourbon/css3/_font-feature-settings.scss
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
10
_sass/vendor/bourbon/css3/_hidpi-media-query.scss
vendored
Normal file
10
_sass/vendor/bourbon/css3/_hidpi-media-query.scss
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
|
||||||
|
@mixin hidpi($ratio: 1.3) {
|
||||||
|
@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) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
4
_sass/vendor/bourbon/css3/_hyphens.scss
vendored
Normal file
4
_sass/vendor/bourbon/css3/_hyphens.scss
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
@mixin hyphens($hyphenation: none) {
|
||||||
|
// none | manual | auto
|
||||||
|
@include prefixer(hyphens, $hyphenation, webkit moz ms spec);
|
||||||
|
}
|
||||||
14
_sass/vendor/bourbon/css3/_image-rendering.scss
vendored
Normal file
14
_sass/vendor/bourbon/css3/_image-rendering.scss
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
image-rendering: $mode;
|
||||||
|
}
|
||||||
|
}
|
||||||
35
_sass/vendor/bourbon/css3/_keyframes.scss
vendored
Normal file
35
_sass/vendor/bourbon/css3/_keyframes.scss
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
|
||||||
|
@mixin keyframes($name) {
|
||||||
|
$original-prefix-for-webkit: $prefix-for-webkit;
|
||||||
|
$original-prefix-for-mozilla: $prefix-for-mozilla;
|
||||||
|
$original-prefix-for-microsoft: $prefix-for-microsoft;
|
||||||
|
$original-prefix-for-opera: $prefix-for-opera;
|
||||||
|
$original-prefix-for-spec: $prefix-for-spec;
|
||||||
|
|
||||||
|
@if $original-prefix-for-webkit {
|
||||||
|
@include disable-prefix-for-all();
|
||||||
|
$prefix-for-webkit: true !global;
|
||||||
|
@-webkit-keyframes #{$name} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@if $original-prefix-for-mozilla {
|
||||||
|
@include disable-prefix-for-all();
|
||||||
|
$prefix-for-mozilla: true !global;
|
||||||
|
@-moz-keyframes #{$name} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$prefix-for-webkit: $original-prefix-for-webkit !global;
|
||||||
|
$prefix-for-mozilla: $original-prefix-for-mozilla !global;
|
||||||
|
$prefix-for-microsoft: $original-prefix-for-microsoft !global;
|
||||||
|
$prefix-for-opera: $original-prefix-for-opera !global;
|
||||||
|
$prefix-for-spec: $original-prefix-for-spec !global;
|
||||||
|
|
||||||
|
@if $original-prefix-for-spec {
|
||||||
|
@keyframes #{$name} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
38
_sass/vendor/bourbon/css3/_linear-gradient.scss
vendored
Normal file
38
_sass/vendor/bourbon/css3/_linear-gradient.scss
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
@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));
|
||||||
|
$pos-spec: null;
|
||||||
|
$pos-degree: null;
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $pos {
|
||||||
|
$positions: _linear-positions-parser($pos);
|
||||||
|
$pos-degree: nth($positions, 1);
|
||||||
|
$pos-spec: nth($positions, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
|
||||||
|
|
||||||
|
// 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") {
|
||||||
|
$fallback-color: $fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: $fallback-color;
|
||||||
|
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
|
||||||
|
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
|
||||||
|
}
|
||||||
8
_sass/vendor/bourbon/css3/_perspective.scss
vendored
Normal file
8
_sass/vendor/bourbon/css3/_perspective.scss
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@mixin perspective($depth: none) {
|
||||||
|
// none | <length>
|
||||||
|
@include prefixer(perspective, $depth, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin perspective-origin($value: 50% 50%) {
|
||||||
|
@include prefixer(perspective-origin, $value, webkit moz spec);
|
||||||
|
}
|
||||||
8
_sass/vendor/bourbon/css3/_placeholder.scss
vendored
Normal file
8
_sass/vendor/bourbon/css3/_placeholder.scss
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@mixin placeholder {
|
||||||
|
$placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
|
||||||
|
@each $placeholder in $placeholders {
|
||||||
|
&:#{$placeholder}-placeholder {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
39
_sass/vendor/bourbon/css3/_radial-gradient.scss
vendored
Normal file
39
_sass/vendor/bourbon/css3/_radial-gradient.scss
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
// 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,
|
||||||
|
$pos: null,
|
||||||
|
$shape-size: null,
|
||||||
|
$fallback: null) {
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
// Strip deprecated cover/contain for spec
|
||||||
|
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||||
|
|
||||||
|
// Set $G1 as the default fallback color
|
||||||
|
$first-color: nth($full, 1);
|
||||||
|
$fallback-color: nth($first-color, 1);
|
||||||
|
|
||||||
|
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||||
|
$fallback-color: $fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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} ');
|
||||||
|
|
||||||
|
background-color: $fallback-color;
|
||||||
|
background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
|
||||||
|
background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
|
||||||
|
}
|
||||||
15
_sass/vendor/bourbon/css3/_transform.scss
vendored
Normal file
15
_sass/vendor/bourbon/css3/_transform.scss
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
@mixin transform($property: none) {
|
||||||
|
// 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
|
||||||
|
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transform-style ($style: flat) {
|
||||||
|
@include prefixer(transform-style, $style, webkit moz ms o spec);
|
||||||
|
}
|
||||||
77
_sass/vendor/bourbon/css3/_transition.scss
vendored
Normal file
77
_sass/vendor/bourbon/css3/_transition.scss
vendored
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
|
||||||
|
// Example: @include transition (all 2s ease-in-out);
|
||||||
|
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
|
||||||
|
// @include transition-property (transform, opacity);
|
||||||
|
|
||||||
|
@mixin transition ($properties...) {
|
||||||
|
// Fix for vendor-prefix transform property
|
||||||
|
$needs-prefixes: false;
|
||||||
|
$webkit: ();
|
||||||
|
$moz: ();
|
||||||
|
$spec: ();
|
||||||
|
|
||||||
|
// Create lists for vendor-prefixed transform
|
||||||
|
@each $list in $properties {
|
||||||
|
@if nth($list, 1) == "transform" {
|
||||||
|
$needs-prefixes: true;
|
||||||
|
$list1: -webkit-transform;
|
||||||
|
$list2: -moz-transform;
|
||||||
|
$list3: ();
|
||||||
|
|
||||||
|
@each $var in $list {
|
||||||
|
$list3: join($list3, $var);
|
||||||
|
|
||||||
|
@if $var != "transform" {
|
||||||
|
$list1: join($list1, $var);
|
||||||
|
$list2: join($list2, $var);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $needs-prefixes {
|
||||||
|
-webkit-transition: $webkit;
|
||||||
|
-moz-transition: $moz;
|
||||||
|
transition: $spec;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@if length($properties) >= 1 {
|
||||||
|
@include prefixer(transition, $properties, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@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-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()
|
||||||
|
@include prefixer(transition-timing-function, $motions, webkit moz spec);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transition-delay ($times...) {
|
||||||
|
@include prefixer(transition-delay, $times, webkit moz spec);
|
||||||
|
}
|
||||||
3
_sass/vendor/bourbon/css3/_user-select.scss
vendored
Normal file
3
_sass/vendor/bourbon/css3/_user-select.scss
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@mixin user-select($arg: none) {
|
||||||
|
@include prefixer(user-select, $arg, webkit moz ms spec);
|
||||||
|
}
|
||||||
11
_sass/vendor/bourbon/functions/_assign.scss
vendored
Normal file
11
_sass/vendor/bourbon/functions/_assign.scss
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
@function assign-inputs($inputs, $pseudo: null) {
|
||||||
|
$list : ();
|
||||||
|
|
||||||
|
@each $input in $inputs {
|
||||||
|
$input: unquote($input);
|
||||||
|
$input: if($pseudo, $input + ":" + $pseudo, $input);
|
||||||
|
$list: append($list, $input, comma);
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $list;
|
||||||
|
}
|
||||||
13
_sass/vendor/bourbon/functions/_color-lightness.scss
vendored
Normal file
13
_sass/vendor/bourbon/functions/_color-lightness.scss
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
39
_sass/vendor/bourbon/functions/_flex-grid.scss
vendored
Normal file
39
_sass/vendor/bourbon/functions/_flex-grid.scss
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
// 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%;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
3
_sass/vendor/bourbon/functions/_golden-ratio.scss
vendored
Normal file
3
_sass/vendor/bourbon/functions/_golden-ratio.scss
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@function golden-ratio($value, $increment) {
|
||||||
|
@return modular-scale($value, $increment, $golden)
|
||||||
|
}
|
||||||
13
_sass/vendor/bourbon/functions/_grid-width.scss
vendored
Normal file
13
_sass/vendor/bourbon/functions/_grid-width.scss
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
@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;
|
||||||
|
// }
|
||||||
66
_sass/vendor/bourbon/functions/_modular-scale.scss
vendored
Normal file
66
_sass/vendor/bourbon/functions/_modular-scale.scss
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
// Scaling Variables
|
||||||
|
$golden: 1.618;
|
||||||
|
$minor-second: 1.067;
|
||||||
|
$major-second: 1.125;
|
||||||
|
$minor-third: 1.2;
|
||||||
|
$major-third: 1.25;
|
||||||
|
$perfect-fourth: 1.333;
|
||||||
|
$augmented-fourth: 1.414;
|
||||||
|
$perfect-fifth: 1.5;
|
||||||
|
$minor-sixth: 1.6;
|
||||||
|
$major-sixth: 1.667;
|
||||||
|
$minor-seventh: 1.778;
|
||||||
|
$major-seventh: 1.875;
|
||||||
|
$octave: 2;
|
||||||
|
$major-tenth: 2.5;
|
||||||
|
$major-eleventh: 2.667;
|
||||||
|
$major-twelfth: 3;
|
||||||
|
$double-octave: 4;
|
||||||
|
|
||||||
|
@function modular-scale($value, $increment, $ratio) {
|
||||||
|
$v1: nth($value, 1);
|
||||||
|
$v2: nth($value, length($value));
|
||||||
|
$value: $v1;
|
||||||
|
|
||||||
|
// scale $v2 to just above $v1
|
||||||
|
@while $v2 > $v1 {
|
||||||
|
$v2: ($v2 / $ratio); // will be off-by-1
|
||||||
|
}
|
||||||
|
@while $v2 < $v1 {
|
||||||
|
$v2: ($v2 * $ratio); // will fix off-by-1
|
||||||
|
}
|
||||||
|
|
||||||
|
// check AFTER scaling $v2 to prevent double-counting corner-case
|
||||||
|
$double-stranded: $v2 > $v1;
|
||||||
|
|
||||||
|
@if $increment > 0 {
|
||||||
|
@for $i from 1 through $increment {
|
||||||
|
@if $double-stranded and ($v1 * $ratio) > $v2 {
|
||||||
|
$value: $v2;
|
||||||
|
$v2: ($v2 * $ratio);
|
||||||
|
} @else {
|
||||||
|
$v1: ($v1 * $ratio);
|
||||||
|
$value: $v1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $increment < 0 {
|
||||||
|
// adjust $v2 to just below $v1
|
||||||
|
@if $double-stranded {
|
||||||
|
$v2: ($v2 / $ratio);
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from $increment through -1 {
|
||||||
|
@if $double-stranded and ($v1 / $ratio) < $v2 {
|
||||||
|
$value: $v2;
|
||||||
|
$v2: ($v2 / $ratio);
|
||||||
|
} @else {
|
||||||
|
$v1: ($v1 / $ratio);
|
||||||
|
$value: $v1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $value;
|
||||||
|
}
|
||||||
13
_sass/vendor/bourbon/functions/_px-to-em.scss
vendored
Normal file
13
_sass/vendor/bourbon/functions/_px-to-em.scss
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
// Convert pixels to ems
|
||||||
|
// eg. for a relational value of 12px write em(12) when the parent is 16px
|
||||||
|
// if the parent is another value say 24px write em(12, 24)
|
||||||
|
|
||||||
|
@function em($pxval, $base: $em-base) {
|
||||||
|
@if not unitless($pxval) {
|
||||||
|
$pxval: strip-units($pxval);
|
||||||
|
}
|
||||||
|
@if not unitless($base) {
|
||||||
|
$base: strip-units($base);
|
||||||
|
}
|
||||||
|
@return ($pxval / $base) * 1em;
|
||||||
|
}
|
||||||
15
_sass/vendor/bourbon/functions/_px-to-rem.scss
vendored
Normal file
15
_sass/vendor/bourbon/functions/_px-to-rem.scss
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
// Convert pixels to rems
|
||||||
|
// eg. for a relational value of 12px write rem(12)
|
||||||
|
// Assumes $em-base is the font-size of <html>
|
||||||
|
|
||||||
|
@function rem($pxval) {
|
||||||
|
@if not unitless($pxval) {
|
||||||
|
$pxval: strip-units($pxval);
|
||||||
|
}
|
||||||
|
|
||||||
|
$base: $em-base;
|
||||||
|
@if not unitless($base) {
|
||||||
|
$base: strip-units($base);
|
||||||
|
}
|
||||||
|
@return ($pxval / $base) * 1rem;
|
||||||
|
}
|
||||||
5
_sass/vendor/bourbon/functions/_strip-units.scss
vendored
Normal file
5
_sass/vendor/bourbon/functions/_strip-units.scss
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
// Srtips the units from a value. e.g. 12px -> 12
|
||||||
|
|
||||||
|
@function strip-units($val) {
|
||||||
|
@return ($val / ($val * 0 + 1));
|
||||||
|
}
|
||||||
9
_sass/vendor/bourbon/functions/_tint-shade.scss
vendored
Normal file
9
_sass/vendor/bourbon/functions/_tint-shade.scss
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
22
_sass/vendor/bourbon/functions/_transition-property-name.scss
vendored
Normal file
22
_sass/vendor/bourbon/functions/_transition-property-name.scss
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
// Return vendor-prefixed property names if appropriate
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
_sass/vendor/bourbon/functions/_unpack.scss
vendored
Normal file
17
_sass/vendor/bourbon/functions/_unpack.scss
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
// Convert shorthand to the 4-value syntax
|
||||||
|
|
||||||
|
@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 {
|
||||||
|
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
|
||||||
|
}
|
||||||
|
@else if length($shorthand) == 3 {
|
||||||
|
@return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@return $shorthand;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
15
_sass/vendor/bourbon/helpers/_convert-units.scss
vendored
Normal file
15
_sass/vendor/bourbon/helpers/_convert-units.scss
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// Helper function for str-to-num fn.
|
||||||
|
// 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;
|
||||||
|
$index: index($strings, $unit);
|
||||||
|
|
||||||
|
@if not $index {
|
||||||
|
@warn "Unknown unit `#{$unit}`.";
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
@return $number * nth($units, $index);
|
||||||
|
}
|
||||||
13
_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss
vendored
Normal file
13
_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
@function _gradient-positions-parser($gradient-type, $gradient-positions) {
|
||||||
|
@if $gradient-positions
|
||||||
|
and ($gradient-type == linear)
|
||||||
|
and (type-of($gradient-positions) != color) {
|
||||||
|
$gradient-positions: _linear-positions-parser($gradient-positions);
|
||||||
|
}
|
||||||
|
@else if $gradient-positions
|
||||||
|
and ($gradient-type == radial)
|
||||||
|
and (type-of($gradient-positions) != color) {
|
||||||
|
$gradient-positions: _radial-positions-parser($gradient-positions);
|
||||||
|
}
|
||||||
|
@return $gradient-positions;
|
||||||
|
}
|
||||||
8
_sass/vendor/bourbon/helpers/_is-num.scss
vendored
Normal file
8
_sass/vendor/bourbon/helpers/_is-num.scss
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
25
_sass/vendor/bourbon/helpers/_linear-angle-parser.scss
vendored
Normal file
25
_sass/vendor/bourbon/helpers/_linear-angle-parser.scss
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
// Private function for linear-gradient-parser
|
||||||
|
@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
|
||||||
|
$offset: null;
|
||||||
|
$unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
|
||||||
|
$unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
|
||||||
|
|
||||||
|
@if ($unit-long == "grad") or
|
||||||
|
($unit-long == "turn") {
|
||||||
|
$offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if ($unit-short == "deg") or
|
||||||
|
($unit-short == "rad") {
|
||||||
|
$offset: if($unit-short == "deg", -90 * 3, 1.6rad);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $offset {
|
||||||
|
$num: _str-to-num($first-val);
|
||||||
|
|
||||||
|
@return (
|
||||||
|
webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
|
||||||
|
spec-image: $image
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
41
_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss
vendored
Normal file
41
_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
@function _linear-gradient-parser($image) {
|
||||||
|
$image: unquote($image);
|
||||||
|
$gradients: ();
|
||||||
|
$start: str-index($image, "(");
|
||||||
|
$end: str-index($image, ",");
|
||||||
|
$first-val: str-slice($image, $start + 1, $end - 1);
|
||||||
|
|
||||||
|
$prefix: str-slice($image, 0, $start);
|
||||||
|
$suffix: str-slice($image, $end, str-length($image));
|
||||||
|
|
||||||
|
$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));
|
||||||
|
|
||||||
|
@if $has-multiple-vals {
|
||||||
|
$gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $has-single-position != "" {
|
||||||
|
$pos: unquote($has-single-position + "");
|
||||||
|
|
||||||
|
$gradients: (
|
||||||
|
webkit-image: -webkit- + $image,
|
||||||
|
spec-image: $prefix + "to " + $pos + $suffix
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $has-angle {
|
||||||
|
// Rotate degree for webkit
|
||||||
|
$gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
$gradients: (
|
||||||
|
webkit-image: -webkit- + $image,
|
||||||
|
spec-image: $image
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $gradients;
|
||||||
|
}
|
||||||
61
_sass/vendor/bourbon/helpers/_linear-positions-parser.scss
vendored
Normal file
61
_sass/vendor/bourbon/helpers/_linear-positions-parser.scss
vendored
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
@function _linear-positions-parser($pos) {
|
||||||
|
$type: type-of(nth($pos, 1));
|
||||||
|
$spec: null;
|
||||||
|
$degree: null;
|
||||||
|
$side: null;
|
||||||
|
$corner: null;
|
||||||
|
$length: length($pos);
|
||||||
|
// Parse Side and corner positions
|
||||||
|
@if ($length > 1) {
|
||||||
|
@if nth($pos, 1) == "to" { // Newer syntax
|
||||||
|
$side: nth($pos, 2);
|
||||||
|
|
||||||
|
@if $length == 2 { // eg. to top
|
||||||
|
// Swap for backwards compatability
|
||||||
|
$degree: _position-flipper(nth($pos, 2));
|
||||||
|
}
|
||||||
|
@else if $length == 3 { // eg. to top left
|
||||||
|
$corner: nth($pos, 3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if $length == 2 { // Older syntax ("top left")
|
||||||
|
$side: _position-flipper(nth($pos, 1));
|
||||||
|
$corner: _position-flipper(nth($pos, 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
@if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
|
||||||
|
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||||
|
}
|
||||||
|
@else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
|
||||||
|
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||||
|
}
|
||||||
|
@else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
|
||||||
|
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||||
|
}
|
||||||
|
@else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
|
||||||
|
$degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
|
||||||
|
}
|
||||||
|
$spec: to $side $corner;
|
||||||
|
}
|
||||||
|
@else if $length == 1 {
|
||||||
|
// Swap for backwards compatability
|
||||||
|
@if $type == string {
|
||||||
|
$degree: $pos;
|
||||||
|
$spec: to _position-flipper($pos);
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
$degree: -270 - $pos; //rotate the gradient opposite from spec
|
||||||
|
$spec: $pos;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$degree: unquote($degree + ",");
|
||||||
|
$spec: unquote($spec + ",");
|
||||||
|
@return $degree $spec;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function _position-flipper($pos) {
|
||||||
|
@return if($pos == left, right, null)
|
||||||
|
if($pos == right, left, null)
|
||||||
|
if($pos == top, bottom, null)
|
||||||
|
if($pos == bottom, top, null);
|
||||||
|
}
|
||||||
31
_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss
vendored
Normal file
31
_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss
vendored
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
// Private function for linear-gradient-parser
|
||||||
|
@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
|
||||||
|
$val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
|
||||||
|
$val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
|
||||||
|
$val-3: null;
|
||||||
|
$has-val-3: str-index($val-2, " ");
|
||||||
|
|
||||||
|
@if $has-val-3 {
|
||||||
|
$val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
|
||||||
|
$val-2: str-slice($val-2, 0, $has-val-3 - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
$pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
|
||||||
|
$pos: unquote($pos + "");
|
||||||
|
|
||||||
|
// Use old spec for webkit
|
||||||
|
@if $val-1 == "to" {
|
||||||
|
@return (
|
||||||
|
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||||
|
spec-image: $image
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bring the code up to spec
|
||||||
|
@else {
|
||||||
|
@return (
|
||||||
|
webkit-image: -webkit- + $image,
|
||||||
|
spec-image: $prefix + "to " + $pos + $suffix
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
69
_sass/vendor/bourbon/helpers/_radial-arg-parser.scss
vendored
Normal file
69
_sass/vendor/bourbon/helpers/_radial-arg-parser.scss
vendored
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
@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;
|
||||||
|
|
||||||
|
// Determine if spec was passed to mixin
|
||||||
|
@if type-of($value) == list {
|
||||||
|
$spec-at-index: if(index($value, at), index($value, at), false);
|
||||||
|
}
|
||||||
|
@if $spec-at-index {
|
||||||
|
@if $spec-at-index > 1 {
|
||||||
|
@for $i from 1 through ($spec-at-index - 1) {
|
||||||
|
$shape-size: $shape-size nth($value, $i);
|
||||||
|
}
|
||||||
|
@for $i from ($spec-at-index + 1) through length($value) {
|
||||||
|
$pos: $pos nth($value, $i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if $spec-at-index == 1 {
|
||||||
|
@for $i from ($spec-at-index + 1) through length($value) {
|
||||||
|
$pos: $pos nth($value, $i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$G1: null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If not spec calculate correct values
|
||||||
|
@else {
|
||||||
|
@if ($pos-type != color) or ($first-val != "transparent") {
|
||||||
|
@if ($pos-type == number)
|
||||||
|
or ($first-val == "center")
|
||||||
|
or ($first-val == "top")
|
||||||
|
or ($first-val == "right")
|
||||||
|
or ($first-val == "bottom")
|
||||||
|
or ($first-val == "left") {
|
||||||
|
|
||||||
|
$pos: $value;
|
||||||
|
|
||||||
|
@if $pos == $G1 {
|
||||||
|
$G1: null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if
|
||||||
|
($first-val == "ellipse")
|
||||||
|
or ($first-val == "circle")
|
||||||
|
or ($first-val == "closest-side")
|
||||||
|
or ($first-val == "closest-corner")
|
||||||
|
or ($first-val == "farthest-side")
|
||||||
|
or ($first-val == "farthest-corner")
|
||||||
|
or ($first-val == "contain")
|
||||||
|
or ($first-val == "cover") {
|
||||||
|
|
||||||
|
$shape-size: $value;
|
||||||
|
|
||||||
|
@if $value == $G1 {
|
||||||
|
$G1: null;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $value == $G2 {
|
||||||
|
$G2: null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return $G1, $G2, $pos, $shape-size;
|
||||||
|
}
|
||||||
50
_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss
vendored
Normal file
50
_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss
vendored
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
@function _radial-gradient-parser($image) {
|
||||||
|
$image: unquote($image);
|
||||||
|
$gradients: ();
|
||||||
|
$start: str-index($image, "(");
|
||||||
|
$end: str-index($image, ",");
|
||||||
|
$first-val: str-slice($image, $start + 1, $end - 1);
|
||||||
|
|
||||||
|
$prefix: str-slice($image, 0, $start);
|
||||||
|
$suffix: str-slice($image, $end, str-length($image));
|
||||||
|
|
||||||
|
$is-spec-syntax: str-index($first-val, "at");
|
||||||
|
|
||||||
|
@if $is-spec-syntax and $is-spec-syntax > 1 {
|
||||||
|
$keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
|
||||||
|
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
|
||||||
|
$pos: append($pos, $keyword, comma);
|
||||||
|
|
||||||
|
$gradients: (
|
||||||
|
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||||
|
spec-image: $image
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $is-spec-syntax == 1 {
|
||||||
|
$pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
|
||||||
|
|
||||||
|
$gradients: (
|
||||||
|
webkit-image: -webkit- + $prefix + $pos + $suffix,
|
||||||
|
spec-image: $image
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if str-index($image, "cover") or str-index($image, "contain") {
|
||||||
|
@warn "Radial-gradient needs to be updated to conform to latest spec.";
|
||||||
|
|
||||||
|
$gradients: (
|
||||||
|
webkit-image: null,
|
||||||
|
spec-image: $image
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
$gradients: (
|
||||||
|
webkit-image: -webkit- + $image,
|
||||||
|
spec-image: $image
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $gradients;
|
||||||
|
}
|
||||||
18
_sass/vendor/bourbon/helpers/_radial-positions-parser.scss
vendored
Normal file
18
_sass/vendor/bourbon/helpers/_radial-positions-parser.scss
vendored
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
@function _radial-positions-parser($gradient-pos) {
|
||||||
|
$shape-size: nth($gradient-pos, 1);
|
||||||
|
$pos: nth($gradient-pos, 2);
|
||||||
|
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||||
|
|
||||||
|
$pre-spec: unquote(if($pos, "#{$pos}, ", null))
|
||||||
|
unquote(if($shape-size, "#{$shape-size},", null));
|
||||||
|
$pos-spec: if($pos, "at #{$pos}", null);
|
||||||
|
|
||||||
|
$spec: "#{$shape-size-spec} #{$pos-spec}";
|
||||||
|
|
||||||
|
// Add comma
|
||||||
|
@if ($spec != ' ') {
|
||||||
|
$spec: "#{$spec},"
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $pre-spec $spec;
|
||||||
|
}
|
||||||
26
_sass/vendor/bourbon/helpers/_render-gradients.scss
vendored
Normal file
26
_sass/vendor/bourbon/helpers/_render-gradients.scss
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
// User for linear and radial gradients within background-image or border-image properties
|
||||||
|
|
||||||
|
@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
|
||||||
|
$pre-spec: null;
|
||||||
|
$spec: null;
|
||||||
|
$vendor-gradients: null;
|
||||||
|
@if $gradient-type == linear {
|
||||||
|
@if $gradient-positions {
|
||||||
|
$pre-spec: nth($gradient-positions, 1);
|
||||||
|
$spec: nth($gradient-positions, 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if $gradient-type == radial {
|
||||||
|
$pre-spec: nth($gradient-positions, 1);
|
||||||
|
$spec: nth($gradient-positions, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $vendor {
|
||||||
|
$vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
|
||||||
|
}
|
||||||
|
@else if $vendor == false {
|
||||||
|
$vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
|
||||||
|
$vendor-gradients: unquote($vendor-gradients);
|
||||||
|
}
|
||||||
|
@return $vendor-gradients;
|
||||||
|
}
|
||||||
10
_sass/vendor/bourbon/helpers/_shape-size-stripper.scss
vendored
Normal file
10
_sass/vendor/bourbon/helpers/_shape-size-stripper.scss
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
@function _shape-size-stripper($shape-size) {
|
||||||
|
$shape-size-spec: null;
|
||||||
|
@each $value in $shape-size {
|
||||||
|
@if ($value == "cover") or ($value == "contain") {
|
||||||
|
$value: null;
|
||||||
|
}
|
||||||
|
$shape-size-spec: "#{$shape-size-spec} #{$value}";
|
||||||
|
}
|
||||||
|
@return $shape-size-spec;
|
||||||
|
}
|
||||||
50
_sass/vendor/bourbon/helpers/_str-to-num.scss
vendored
Normal file
50
_sass/vendor/bourbon/helpers/_str-to-num.scss
vendored
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
//************************************************************************//
|
||||||
|
// Helper function for linear/radial-gradient-parsers.
|
||||||
|
// Source: http://sassmeister.com/gist/9647408
|
||||||
|
//************************************************************************//
|
||||||
|
@function _str-to-num($string) {
|
||||||
|
// Matrices
|
||||||
|
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
|
||||||
|
$numbers: 0 1 2 3 4 5 6 7 8 9;
|
||||||
|
|
||||||
|
// Result
|
||||||
|
$result: 0;
|
||||||
|
$divider: 0;
|
||||||
|
$minus: false;
|
||||||
|
|
||||||
|
// Looping through all characters
|
||||||
|
@for $i from 1 through str-length($string) {
|
||||||
|
$character: str-slice($string, $i, $i);
|
||||||
|
$index: index($strings, $character);
|
||||||
|
|
||||||
|
@if $character == '-' {
|
||||||
|
$minus: true;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if $character == '.' {
|
||||||
|
$divider: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@if not $index {
|
||||||
|
$result: if($minus, $result * -1, $result);
|
||||||
|
@return _convert-units($result, str-slice($string, $i));
|
||||||
|
}
|
||||||
|
|
||||||
|
$number: nth($numbers, $index);
|
||||||
|
|
||||||
|
@if $divider == 0 {
|
||||||
|
$result: $result * 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
// Move the decimal dot to the left
|
||||||
|
$divider: $divider * 10;
|
||||||
|
$number: $number / $divider;
|
||||||
|
}
|
||||||
|
|
||||||
|
$result: $result + $number;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return if($minus, $result * -1, $result);
|
||||||
|
}
|
||||||
6
_sass/vendor/bourbon/settings/_prefixer.scss
vendored
Normal file
6
_sass/vendor/bourbon/settings/_prefixer.scss
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
// Variable settings for /addons/prefixer.scss
|
||||||
|
$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
|
||||||
1
_sass/vendor/bourbon/settings/_px-to-em.scss
vendored
Normal file
1
_sass/vendor/bourbon/settings/_px-to-em.scss
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
$em-base: 16px !default;
|
||||||
7
_sass/vendor/neat/_neat-helpers.scss
vendored
Normal file
7
_sass/vendor/neat/_neat-helpers.scss
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
// Functions
|
||||||
|
@import "functions/private";
|
||||||
|
@import "functions/new-breakpoint";
|
||||||
|
|
||||||
|
// Settings
|
||||||
|
@import "settings/grid";
|
||||||
|
@import "settings/visual-grid";
|
||||||
21
_sass/vendor/neat/_neat.scss
vendored
Normal file
21
_sass/vendor/neat/_neat.scss
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
// Bourbon Neat 1.6.0.pre
|
||||||
|
// MIT Licensed
|
||||||
|
// Copyright (c) 2012-2013 thoughtbot, inc.
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
@import "neat-helpers";
|
||||||
|
|
||||||
|
// Grid
|
||||||
|
@import "grid/private";
|
||||||
|
@import "grid/reset";
|
||||||
|
@import "grid/grid";
|
||||||
|
@import "grid/omega";
|
||||||
|
@import "grid/outer-container";
|
||||||
|
@import "grid/span-columns";
|
||||||
|
@import "grid/row";
|
||||||
|
@import "grid/shift";
|
||||||
|
@import "grid/pad";
|
||||||
|
@import "grid/fill-parent";
|
||||||
|
@import "grid/media";
|
||||||
|
@import "grid/to-deprecate";
|
||||||
|
@import "grid/visual-grid";
|
||||||
16
_sass/vendor/neat/functions/_new-breakpoint.scss
vendored
Normal file
16
_sass/vendor/neat/functions/_new-breakpoint.scss
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
@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 {
|
||||||
|
$query: append($query, $total-columns);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if not belongs-to($query, $visual-grid-breakpoints) {
|
||||||
|
$visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $query;
|
||||||
|
}
|
||||||
125
_sass/vendor/neat/functions/_private.scss
vendored
Normal file
125
_sass/vendor/neat/functions/_private.scss
vendored
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
// Checks if a number is even
|
||||||
|
@function is-even($int) {
|
||||||
|
@if $int%2 == 0 {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Checks if an element belongs to a list
|
||||||
|
@function belongs-to($tested-item, $list) {
|
||||||
|
@each $item in $list {
|
||||||
|
@if $item == $tested-item {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parses the first argument of span-columns()
|
||||||
|
@function container-span($span: $span) {
|
||||||
|
@if length($span) == 3 {
|
||||||
|
$container-columns: nth($span, 3);
|
||||||
|
@return $container-columns;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if length($span) == 2 {
|
||||||
|
$container-columns: nth($span, 2);
|
||||||
|
@return $container-columns;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@return $grid-columns;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@function container-shift($shift: $shift) {
|
||||||
|
$parent-columns: $grid-columns !global !default;
|
||||||
|
|
||||||
|
@if length($shift) == 3 {
|
||||||
|
$container-columns: nth($shift, 3);
|
||||||
|
@return $container-columns;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if length($shift) == 2 {
|
||||||
|
$container-columns: nth($shift, 2);
|
||||||
|
@return $container-columns;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@return $parent-columns;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generates a striped background
|
||||||
|
@function gradient-stops($grid-columns, $color: $visual-grid-color) {
|
||||||
|
$transparent: rgba(0,0,0,0);
|
||||||
|
|
||||||
|
$column-width: flex-grid(1, $grid-columns);
|
||||||
|
$gutter-width: flex-gutter($grid-columns);
|
||||||
|
$column-offset: $column-width;
|
||||||
|
|
||||||
|
$values: ($transparent 0, $color 0);
|
||||||
|
|
||||||
|
@for $i from 1 to $grid-columns*2 {
|
||||||
|
@if is-even($i) {
|
||||||
|
$values: append($values, $transparent $column-offset, comma);
|
||||||
|
$values: append($values, $color $column-offset, comma);
|
||||||
|
$column-offset: $column-offset + $column-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
$values: append($values, $color $column-offset, comma);
|
||||||
|
$values: append($values, $transparent $column-offset, comma);
|
||||||
|
$column-offset: $column-offset + $gutter-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $values;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Layout direction
|
||||||
|
@function get-direction($layout, $default) {
|
||||||
|
$direction: nil;
|
||||||
|
|
||||||
|
@if $layout == LTR or $layout == RTL {
|
||||||
|
$direction: direction-from-layout($layout);
|
||||||
|
} @else {
|
||||||
|
$direction: direction-from-layout($default);
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function direction-from-layout($layout) {
|
||||||
|
$direction: nil;
|
||||||
|
|
||||||
|
@if $layout == LTR {
|
||||||
|
$direction: right;
|
||||||
|
} @else {
|
||||||
|
$direction: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function get-opposite-direction($direction) {
|
||||||
|
$opposite-direction: left;
|
||||||
|
|
||||||
|
@if $direction == left {
|
||||||
|
$opposite-direction: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $opposite-direction;
|
||||||
|
}
|
||||||
7
_sass/vendor/neat/grid/_fill-parent.scss
vendored
Normal file
7
_sass/vendor/neat/grid/_fill-parent.scss
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@mixin fill-parent() {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@if $border-box-sizing == false {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
}
|
||||||
|
}
|
||||||
5
_sass/vendor/neat/grid/_grid.scss
vendored
Normal file
5
_sass/vendor/neat/grid/_grid.scss
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@if $border-box-sizing == true {
|
||||||
|
* {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
}
|
||||||
|
}
|
||||||
38
_sass/vendor/neat/grid/_media.scss
vendored
Normal file
38
_sass/vendor/neat/grid/_media.scss
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
@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;
|
||||||
|
$grid-columns: $total-columns !global;
|
||||||
|
@content;
|
||||||
|
$grid-columns: $default-grid-columns !global;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
$loopTo: length($query);
|
||||||
|
$mediaQuery: '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;
|
||||||
|
}
|
||||||
|
|
||||||
|
$i: 1;
|
||||||
|
@while $i <= $loopTo {
|
||||||
|
$mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') ';
|
||||||
|
|
||||||
|
@if ($i + 1) != $loopTo {
|
||||||
|
$mediaQuery: $mediaQuery + 'and ';
|
||||||
|
}
|
||||||
|
|
||||||
|
$i: $i + 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$mediaQuery} {
|
||||||
|
@content;
|
||||||
|
$grid-columns: $default-grid-columns !global;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
61
_sass/vendor/neat/grid/_omega.scss
vendored
Normal file
61
_sass/vendor/neat/grid/_omega.scss
vendored
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
// Remove last element gutter
|
||||||
|
@mixin omega($query: block, $direction: default) {
|
||||||
|
$table: if(belongs-to(table, $query), true, false);
|
||||||
|
$auto: if(belongs-to(auto, $query), true, false);
|
||||||
|
|
||||||
|
@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."
|
||||||
|
} @else {
|
||||||
|
$direction: get-direction($layout-direction, $default-layout-direction);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $table {
|
||||||
|
@warn "The omega mixin no longer removes padding in table layouts."
|
||||||
|
}
|
||||||
|
|
||||||
|
@if length($query) == 1 {
|
||||||
|
@if $auto {
|
||||||
|
&:last-child {
|
||||||
|
margin-#{$direction}: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if contains-display-value($query) and $table == false {
|
||||||
|
margin-#{$direction}: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@include nth-child($query, $direction);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if length($query) == 2 {
|
||||||
|
@if $auto {
|
||||||
|
&:last-child {
|
||||||
|
margin-#{$direction}: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@include nth-child(nth($query, 1), $direction);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@warn "Too many arguments passed to the omega() mixin."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin nth-child($query, $direction) {
|
||||||
|
$opposite-direction: get-opposite-direction($direction);
|
||||||
|
|
||||||
|
&:nth-child(#{$query}) {
|
||||||
|
margin-#{$direction}: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if type-of($query) == number {
|
||||||
|
&:nth-child(#{$query}+1) {
|
||||||
|
clear: $opposite-direction;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
8
_sass/vendor/neat/grid/_outer-container.scss
vendored
Normal file
8
_sass/vendor/neat/grid/_outer-container.scss
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@mixin outer-container {
|
||||||
|
@include clearfix;
|
||||||
|
max-width: $max-width;
|
||||||
|
margin: {
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
8
_sass/vendor/neat/grid/_pad.scss
vendored
Normal file
8
_sass/vendor/neat/grid/_pad.scss
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
@mixin pad($padding: flex-gutter()) {
|
||||||
|
$padding-list: null;
|
||||||
|
@each $value in $padding {
|
||||||
|
$value: if($value == 'default', flex-gutter(), $value);
|
||||||
|
$padding-list: join($padding-list, $value);
|
||||||
|
}
|
||||||
|
padding: $padding-list;
|
||||||
|
}
|
||||||
43
_sass/vendor/neat/grid/_private.scss
vendored
Normal file
43
_sass/vendor/neat/grid/_private.scss
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
$parent-columns: $grid-columns !default;
|
||||||
|
$fg-column: $column;
|
||||||
|
$fg-gutter: $gutter;
|
||||||
|
$fg-max-columns: $grid-columns;
|
||||||
|
$container-display-table: false !default;
|
||||||
|
$layout-direction: nil !default;
|
||||||
|
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
|
||||||
|
@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);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function grid-width($n) {
|
||||||
|
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function get-parent-columns($columns) {
|
||||||
|
@if $columns != $grid-columns {
|
||||||
|
$parent-columns: $columns !global;
|
||||||
|
} @else {
|
||||||
|
$parent-columns: $grid-columns !global;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $parent-columns;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
12
_sass/vendor/neat/grid/_reset.scss
vendored
Normal file
12
_sass/vendor/neat/grid/_reset.scss
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
17
_sass/vendor/neat/grid/_row.scss
vendored
Normal file
17
_sass/vendor/neat/grid/_row.scss
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
@mixin row($display: block, $direction: $default-layout-direction) {
|
||||||
|
@include clearfix;
|
||||||
|
$layout-direction: $direction !global;
|
||||||
|
|
||||||
|
@if $display == table {
|
||||||
|
display: table;
|
||||||
|
@include fill-parent;
|
||||||
|
table-layout: fixed;
|
||||||
|
$container-display-table: true !global;
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
display: block;
|
||||||
|
$container-display-table: false !global;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
16
_sass/vendor/neat/grid/_shift.scss
vendored
Normal file
16
_sass/vendor/neat/grid/_shift.scss
vendored
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
@mixin shift($n-columns: 1) {
|
||||||
|
@include shift-in-context($n-columns);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin shift-in-context($shift: $columns of $container-columns) {
|
||||||
|
$n-columns: nth($shift, 1);
|
||||||
|
$parent-columns: container-shift($shift) !global;
|
||||||
|
|
||||||
|
$direction: get-direction($layout-direction, $default-layout-direction);
|
||||||
|
$opposite-direction: get-opposite-direction($direction);
|
||||||
|
|
||||||
|
margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
|
||||||
|
|
||||||
|
// Reset nesting context
|
||||||
|
$parent-columns: $grid-columns !global;
|
||||||
|
}
|
||||||
43
_sass/vendor/neat/grid/_span-columns.scss
vendored
Normal file
43
_sass/vendor/neat/grid/_span-columns.scss
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
@mixin span-columns($span: $columns of $container-columns, $display: block) {
|
||||||
|
$columns: nth($span, 1);
|
||||||
|
$container-columns: container-span($span);
|
||||||
|
|
||||||
|
// Set nesting context (used by shift())
|
||||||
|
$parent-columns: get-parent-columns($container-columns) !global;
|
||||||
|
|
||||||
|
$direction: get-direction($layout-direction, $default-layout-direction);
|
||||||
|
$opposite-direction: get-opposite-direction($direction);
|
||||||
|
|
||||||
|
$display-table: is-display-table($container-display-table, $display);
|
||||||
|
|
||||||
|
@if $display-table {
|
||||||
|
display: table-cell;
|
||||||
|
width: percentage($columns / $container-columns);
|
||||||
|
} @else {
|
||||||
|
float: #{$opposite-direction};
|
||||||
|
|
||||||
|
@if $display != no-display {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $display == collapse {
|
||||||
|
@warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead."
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $display == collapse or $display == block-collapse {
|
||||||
|
width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
width: flex-grid($columns, $container-columns);
|
||||||
|
}
|
||||||
|
|
||||||
|
} @else {
|
||||||
|
margin-#{$direction}: flex-gutter($container-columns);
|
||||||
|
width: flex-grid($columns, $container-columns);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-#{$direction}: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
57
_sass/vendor/neat/grid/_to-deprecate.scss
vendored
Normal file
57
_sass/vendor/neat/grid/_to-deprecate.scss
vendored
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
|
||||||
|
@warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";
|
||||||
|
|
||||||
|
@if length($query) == 1 {
|
||||||
|
@media screen and ($default-feature: nth($query, 1)) {
|
||||||
|
$default-grid-columns: $grid-columns;
|
||||||
|
$grid-columns: $total-columns;
|
||||||
|
@content;
|
||||||
|
$grid-columns: $default-grid-columns;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if length($query) == 2 {
|
||||||
|
@media screen and (nth($query, 1): nth($query, 2)) {
|
||||||
|
$default-grid-columns: $grid-columns;
|
||||||
|
$grid-columns: $total-columns;
|
||||||
|
@content;
|
||||||
|
$grid-columns: $default-grid-columns;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if length($query) == 3 {
|
||||||
|
@media screen and (nth($query, 1): nth($query, 2)) {
|
||||||
|
$default-grid-columns: $grid-columns;
|
||||||
|
$grid-columns: nth($query, 3);
|
||||||
|
@content;
|
||||||
|
$grid-columns: $default-grid-columns;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if length($query) == 4 {
|
||||||
|
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
||||||
|
$default-grid-columns: $grid-columns;
|
||||||
|
$grid-columns: $total-columns;
|
||||||
|
@content;
|
||||||
|
$grid-columns: $default-grid-columns;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else if length($query) == 5 {
|
||||||
|
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
||||||
|
$default-grid-columns: $grid-columns;
|
||||||
|
$grid-columns: nth($query, 5);
|
||||||
|
@content;
|
||||||
|
$grid-columns: $default-grid-columns;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin nth-omega($nth, $display: block, $direction: default) {
|
||||||
|
@warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
|
||||||
|
@include omega($nth $display, $direction);
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue