Global
SCSS
$experimental: true !default;
$base-font-size: 100% !default;
$base-line-height: 150% !default;
$rem-base: 16px !default;
@mixin radius($radius:$global-radius) {
@if $radius {
@if $experimental {
-webkit-border-radius: $radius;
}
border-radius: $radius;
}
}
@mixin side-radius($side, $radius:$global-radius) {
@if $side == left {
@if $experimental {
-moz-border-radius-bottomleft: $radius;
-moz-border-radius-topleft: $radius;
-webkit-border-bottom-left-radius: $radius;
-webkit-border-top-left-radius: $radius;
}
border-bottom-left-radius: $radius;
border-top-left-radius: $radius;
}
@else if $side == right {
@if $experimental {
-moz-border-radius-topright: $radius;
-moz-border-radius-bottomright: $radius;
-webkit-border-top-right-radius: $radius;
-webkit-border-bottom-right-radius: $radius;
}
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
@else if $side == top {
@if $experimental {
-moz-border-radius-topright: $radius;
-moz-border-radius-topleft: $radius;
-webkit-border-top-right-radius: $radius;
-webkit-border-top-left-radius: $radius;
}
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@else if $side == bottom {
@if $experimental {
-moz-border-radius-bottomright: $radius;
-moz-border-radius-bottomleft: $radius;
-webkit-border-bottom-right-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
}
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
}
@mixin inset-shadow($active:true) {
@if $experimental {
-webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
}
box-shadow: $shiny-edge-size $shiny-edge-color inset;
@if $active { &:active {
@if $experimental {
-webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
}
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
}
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
@if $experimental {
-webkit-transition: $property $speed $ease;
-moz-transition: $property $speed $ease;
}
transition: $property $speed $ease;
}
@mixin box-sizing($type:border-box) {
@if $experimental {
-moz-box-sizing: $type;
-webkit-box-sizing: $type;
}
box-sizing: $type;
}
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
content: "";
display: block;
width: 0;
height: 0;
border: inset $triangle-size;
@if ($triangle-direction == top) {
border-color: $triangle-color transparent transparent transparent;
border-top-style: solid;
}
@if ($triangle-direction == bottom) {
border-color: transparent transparent $triangle-color transparent;
border-bottom-style: solid;
}
@if ($triangle-direction == left) {
border-color: transparent transparent transparent $triangle-color;
border-left-style: solid;
}
@if ($triangle-direction == right) {
border-color: transparent $triangle-color transparent transparent;
border-right-style: solid;
}
}
@mixin clearfix {
*zoom:1;
&:before, &:after { content: " "; display: table; }
&:after { clear: both; }
}
@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
@if $experimental {
-webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
-moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
}
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
&:#{$selector} {
@if $experimental {
-webkit-box-shadow: 0 0 5px $glowing-effect-color;
-moz-box-shadow: 0 0 5px $glowing-effect-color;
}
box-shadow: 0 0 5px $glowing-effect-color;
border-color: $glowing-effect-color;
}
}
$body-bg: #fff !default;
$body-font-color: #222 !default;
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
$body-font-weight: normal !default;
$body-font-style: normal !default;
$font-smoothing: antialiased !default;
$text-direction: ltr !default;
$default-float: left !default;
$opposite-direction: right !default;
@if $text-direction == ltr {
$default-float: left;
$opposite-direction: right;
} @else {
$default-float: right;
$opposite-direction: left;
}
$primary-color: #008CBA !default;
$secondary-color: #e7e7e7 !default;
$alert-color: #f04124 !default;
$success-color: #43AC6A !default;
$global-radius: 3px !default;
$global-rounded: 1000px !default;
$shiny-edge-size: 0 1px 0 !default;
$shiny-edge-color: rgba(#fff, .5) !default;
$shiny-edge-active-color: rgba(#000, .2) !default;
$include-html-classes: true !default;
$include-print-styles: true !default;
$include-html-global-classes: $include-html-classes !default;
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);
$screen: "only screen" !default;
$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;
$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
$small: $medium-up;
$medium: $medium-up;
$large: $large-up;
$cursor-crosshair-value: crosshair !default;
$cursor-default-value: default !default;
$cursor-pointer-value: pointer !default;
$cursor-help-value: help !default;
$cursor-text-value: text !default;
@include exports("global") {
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
meta.foundation-mq-small {
font-family: "/" + unquote($small-only) + "/";
width: lower-bound($small-range);
}
meta.foundation-mq-medium {
font-family: "/" + unquote($medium-only) + "/";
width: lower-bound($medium-range);
}
meta.foundation-mq-large {
font-family: "/" + unquote($large-up) + "/";
width: lower-bound($large-range);
}
meta.foundation-mq-xlarge {
font-family: "/" + unquote($xlarge-up) + "/";
width: lower-bound($xlarge-range);
}
meta.foundation-mq-xxlarge {
font-family: "/" + unquote($xxlarge-up) + "/";
width: lower-bound($xxlarge-range);
}
@if $include-html-global-classes {
*,
*:before,
*:after {
@include box-sizing(border-box);
}
html,
body { font-size: $base-font-size; }
body {
background: $body-bg;
color: $body-font-color;
padding: 0;
margin: 0;
font-family: $body-font-family;
font-weight: $body-font-weight;
font-style: $body-font-style;
line-height: 1;
position: relative;
cursor: $cursor-default-value;
}
a:hover { cursor: $cursor-pointer-value; }
img,
object,
embed { max-width: 100%; height: auto; }
object,
embed { height: 100%; }
img { -ms-interpolation-mode: bicubic; }
#map_canvas,
.map_canvas {
img,
embed,
object { max-width: none !important;
}
}
.left { float: left !important; }
.right { float: right !important; }
.clearfix { @include clearfix; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
.hide { display: none; }
.antialiased { -webkit-font-smoothing: antialiased; }
img {
display: inline-block;
vertical-align: middle;
}
textarea { height: auto; min-height: 50px; }
select { width: 100%; }
}
}