199 lines
6.5 KiB
SCSS
199 lines
6.5 KiB
SCSS
// Foundation Global Function, Variables and Mixins
|
|
//
|
|
// Variables
|
|
//
|
|
|
|
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
|
// for compatibility with brower-based text zoom or user-set defaults.
|
|
$base-font-size: 100% !default;
|
|
|
|
// Set your base font-size in pixels so emCalc can do its magic below
|
|
$em-base: 16px !default;
|
|
|
|
// We use these to control various global styles
|
|
$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;
|
|
|
|
// We use these to control text direction settings
|
|
$text-direction: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
|
|
$default-float: left !default;
|
|
$opposite-direction: right !default;
|
|
// No need to change this conditional statement, $text-direction variable controls it all.
|
|
@if $text-direction == ltr {
|
|
$default-float: left;
|
|
$opposite-direction: right;
|
|
} @else {
|
|
$default-float: right;
|
|
$opposite-direction: left;
|
|
}
|
|
|
|
// We use these as default colors throughout
|
|
$primary-color: #2ba6cb !default;
|
|
$secondary-color: #e9e9e9 !default;
|
|
$alert-color: #c60f13 !default;
|
|
$success-color: #5da423 !default;
|
|
|
|
// We use these to make sure border radius matches unless we want it different.
|
|
$global-radius: 3px !default;
|
|
$global-rounded: 1000px !default;
|
|
|
|
// We use these to control inset shadow shiny edges and depressions.
|
|
$shiny-edge-size: 0 1px 0 !default;
|
|
$shiny-edge-color: rgba(#fff, .5) !default;
|
|
$shiny-edge-active-color: rgba(#000, .2) !default;
|
|
|
|
// We use this to control whether or not CSS classes come through in the gem files.
|
|
$include-html-classes: true !default;
|
|
$include-print-styles: true !default;
|
|
|
|
$include-html-grid-classes: $include-html-classes !default;
|
|
$include-html-visibility-classes: $include-html-classes !default;
|
|
$include-html-button-classes: $include-html-classes !default;
|
|
$include-html-form-classes: $include-html-classes !default;
|
|
$include-html-media-classes: $include-html-classes !default;
|
|
$include-html-section-classes: $include-html-classes !default;
|
|
$include-html-reveal-classes: $include-html-classes !default;
|
|
$include-html-alert-classes: $include-html-classes !default;
|
|
$include-html-nav-classes: $include-html-classes !default;
|
|
$include-html-label-classes: $include-html-classes !default;
|
|
$include-html-panel-classes: $include-html-classes !default;
|
|
$include-html-pricing-classes: $include-html-classes !default;
|
|
$include-html-progress-classes: $include-html-classes !default;
|
|
$include-html-magellan-classes: $include-html-classes !default;
|
|
|
|
//
|
|
// Functions
|
|
//
|
|
|
|
// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
|
|
@function emCalc($pxWidth) {
|
|
@return $pxWidth / $em-base * 1em;
|
|
}
|
|
|
|
// Creating rems and pixels
|
|
@function remCalc($pxWidth) {
|
|
@return $pxWidth / $em-base * 1rem;
|
|
}
|
|
|
|
// Grid Calculation for Percentages
|
|
@function gridCalc($colNumber, $totalColumns) {
|
|
@return percentage(($colNumber / $totalColumns));
|
|
}
|
|
|
|
|
|
//
|
|
// Mixins
|
|
//
|
|
|
|
// We use this to control border radius.
|
|
@mixin radius($radius:$global-radius) {
|
|
@if $radius {
|
|
-webkit-border-radius: $radius;
|
|
border-radius: $radius;
|
|
}
|
|
}
|
|
|
|
// We use this to create equal side border radius on elements.
|
|
@mixin side-radius($side, $radius) {
|
|
@include radius(0);
|
|
@if $side == left {
|
|
-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 {
|
|
-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 {
|
|
-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 {
|
|
-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;
|
|
}
|
|
}
|
|
|
|
// We can control whether or not we have inset shadows edges.
|
|
@mixin inset-shadow($active:true) {
|
|
-webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
|
box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
|
|
|
@if $active { &:active {
|
|
-webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
|
|
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
|
|
}
|
|
|
|
// We use this to add transitions to elements
|
|
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
|
-webkit-transition: $property $speed $ease;
|
|
-moz-transition: $property $speed $ease;
|
|
transition: $property $speed $ease;
|
|
}
|
|
|
|
// We use this to add box-sizing across browser prefixes
|
|
@mixin box-sizing($type:border-box) {
|
|
-moz-box-sizing: $type;
|
|
-webkit-box-sizing: $type;
|
|
box-sizing: $type;
|
|
}
|
|
|
|
// We use this to create equalateral triangles
|
|
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
|
content: "";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border: solid $triangle-size;
|
|
@if ($triangle-direction == top) {
|
|
border-color: $triangle-color transparent transparent transparent;
|
|
}
|
|
@if ($triangle-direction == bottom) {
|
|
border-color: transparent transparent $triangle-color transparent;
|
|
}
|
|
@if ($triangle-direction == left) {
|
|
border-color: transparent transparent transparent $triangle-color;
|
|
}
|
|
@if ($triangle-direction == right) {
|
|
border-color: transparent $triangle-color transparent transparent;
|
|
}
|
|
}
|
|
|
|
// We use this to do clear floats
|
|
@mixin clearfix() {
|
|
*zoom:1;
|
|
&:before, &:after { content: " "; display: table; }
|
|
&:after { clear: both; }
|
|
}
|
|
|
|
// Media Queries
|
|
$small-screen: emCalc(768px) !default;
|
|
$medium-screen: emCalc(1280px) !default;
|
|
$large-screen: emCalc(1440px) !default;
|
|
|
|
$screen: "only screen" !default;
|
|
$small: "only screen and (min-width:"#{$small-screen}")" !default;
|
|
$medium: "only screen and (min-width:"#{$medium-screen}")" !default;
|
|
$large: "only screen and (min-width:"#{$large-screen}")" !default;
|
|
$landscape: "only screen and (orientation: landscape)" !default;
|
|
$portrait: "only screen and (orientation: portrait)" !default;
|