// ============================================= // Custom Settings // Last Updated:2013-6-24 // ============================================= /////////////////////// // framework // /////////////////////// // file paths // $root_path: "../"; // path to HTML document root (relative from CSS) // $images_path: "images/"; // path to images (relative from $root_path) // $fonts_path: "fonts/"; // path to fonts (relative from $root_path) // $boxsizing_path: "/js/libs/boxsizing.htc"; // path to box sizing polyfill (change to absolute path from HTML document root) // $PIE_path: "/js/libs/PIE.htc" !default; // path to IE CSS3 polyfill (change to absolute path from HTML document root) // build options // $reset: true; // enable CSS reset (recommended) // elements that will be reset (refine this to only include elements that you actually use in your markup patterns for optimal performance) // $reset-elements: html body // div span header footer aside nav menu main section article details // h1 h2 h3 h4 h5 h6 p // ol ul li dl dt dd // em small big strong b u i sub sup del strike // blockquote cite pre code time address // a img center hr // form fieldset legend label input textarea button // table caption tbody thead tfoot tr th td // iframe object canvas audio video; // $global-tags: true; // enable output in base/_global.scss (recommended) // grid settings // $grid-classes: true; // enable output of grid classes (recommended) // $numerators: one two three four five six seven eight nine ten eleven twelve; // $denominators: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth; // $denominators-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths; // $grid-adapters: $one-whole $one-half $one-third $one-fourth $one-fifth; // $max-width: 1200px; // maximum container width (i.e. - 960px) // $gutter: 10px; // gutter spacing (used by padded/gapped helpers, elements with padding, etc.) // flexbox settings // $flexbox-classes: true; // enable output of flexbox classes (optional) // $flexbox-helpers: flex-wrapper flex-box vertical-center; // for flexbox order use @include flex-order($val); // helper settings // $layout-classes: true; // enable output of layout helpers (recommended) // $layout-helpers: inline block // hidden // disabled // zero // pull-right pull-left clear // center; // $positioning-classes: true; // enable output of position helpers (optional) // $size-classes: true; // enable output of size helpers (recommended) // $size-helpers: small large; // $typography-classes: true; // enable output of typography helpers (recommended) // $typography-helpers: align-top align-right align-bottom align-left align-center justify // truncate; // $border-classes: true; // enable output of border helpers (optional) // $border-helpers: bordered border-right border-left border-top border-bottom; // round/square // $default-radius: 4px; // $radius-classes: true; // enable output of radius helpers (optional) // $radius-helpers: square round; // rotation // $rotation-classes: true; // enable output of rotational helpers (optional) // $rotation-helpers: rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr; // spinners // $spin-classes: true; // enable output of spin helpers (optional) // $spin-helpers: spin spin-once spin-twice spin-thrice // spin-fast spin-fast-once spin-fast-twice spin-fast-thrice // spin-slow spin-slow-once spin-slow-twice spin-slow-thrice; // spacers // $spacer-classes: true; // enable output of spacer helpers (recommended) // $spacer-helpers: padded pad-top pad-right pad-bottom pad-left // gapped gap-top gap-right gap-bottom gap-left // offset offset-top offset-right offset-bottom offset-left; // spacer multipliers // $spacer-mod-classes: true; // enable output of spacer modifiers (optional) // $spacer-modifiers: double triple; // states // $ui-states: disabled info alert warning error success; // $button-states: on active disabled info alert warning error success; // typography // $type-tags: true; // enable output of type selectors (recommended) // $type-elements: h1 h2 h3 h4 h5 h6 p // ul ol dl // blockquote cite // small big em b strong // sup sub // del strike // code pre; // $type-colors: true; // enable output of colors classes (optional) // $type-classes: false; // enable output of type classes (optional) // $type-classnames: h1 h2 h3 h4 h5 h6 p // ul ol dl // blockquote cite // small big large // b bold strong // em italic // sup sub // del strike // code pre // invalid valid // unstyled; // $styled-lists: true; // enable output of styled lists (optional) // webfonts // $webfont-classes: true; // enable output of webfont classes (optional) // buttons // $button-tags: true; // enable output of button selectors (recommended) // $button-classes: true; // enable output of button classes (recommended) // $button-modifiers: small large on active square round block; // navigation // $nav-tags: true; // enable output of nav selectors (optional) // $nav-classes: true; // tabs // $tab-classes: true; // enable output of tab classes (optional) // forms // $form-tags: true; // enable output of form selectors (recommended) // $form-classes: false; // enable output of form classes (optional) // $form-elements: fieldset legend label input textarea; // tiles // $tiles: true; // enable output of tile classes (optional) // $tile-modifiers: on active small large square round disabled; // message & callout boxes // $ui-classes: true; // $ui-modifiers: dismissible; // tables // $table-tags: true; // $table-classes: true; // ARIA role selectors (WIP - nav, buttons, tabs, etc.) // $aria-selectors: true; // enable Aria role selectors /////////////////////// // typography // /////////////////////// // typography $base-font-size: 14px; // base font size for Compass vertical rhythm $base-line-height: 18px; // base line height for Compass vertical rhythm // $font-family: Helvetica, Arial, Geneva, sans-serif; /////////////////////// // web fonts // /////////////////////// // font names (no spaces or special characters, these are used to build selectors) // $web-font-names: AverageSans, // AmericanTypewriter; // font files (must all be named the same as listed below and include .eot, .woff and .ttf file types) // $web-font-files: average-sans-webfont, // americantypewriterstd-bold; /////////////////////// // colors // /////////////////////// // base styles // $background-color: #ffffff; // $font-color: #2b2b2d; // links // $link-color: #489AC1; // $link-active: #198D98; // selection highlight // $selection-color: $link-color; // $selection-text: #ffffff; // borders // $border-thickness: 1px; // $border-style: solid; // $border-color: #dddddd; // $border: #{$border-thickness} #{$border-style} #{$border-color}; // buttons // $button-color: #1DABB8; // $button-border-color: darken($button-color, 10%); // $button-active: #198D98; // $button-text: #ffffff; // $button-active-text: #ffffff; // info // $info-color: #3a87ad; // text only // $info-text: #ffffff; // box text // $info-background: #d9edf7; // $info-border: #bce8f1; // alert // $alert-color: #c09853; // text only // $alert-text: #ffffff; // box text // $alert-background: #fcf8e3; // $alert-border: #fbeee0; // error // $error-color: #b94a48; // text only // $error-text: #ffffff; // box text // $error-background: #f2dede; // $error-border: #eed3d7; // warning // $warning-color: #FF971E; // text only // $warning-text: #ffffff; // box text // $warning-background: #FFE5C7; // $warning-border: #FFDBB3; // success // $success-color: #468847; // text only // $success-text: #ffffff; // box text // $success-background: #dff0d8; // $success-border: #d6e9c6; // disabled // $disabled-color: #808080; // text only // $disabled-text: #ffffff; // box text // $disabled-background: lighten($disabled-color, 20%); // $disabled-border: darken($disabled-color, 10%); // modifier states // $state-name: "info" "alert" "warning" "error" "success" "disabled" ; // $state-code: $info-color $alert-color $warning-color $error-color $success-color $disabled-color ; // $state-text: $info-text $alert-text $warning-text $error-text $success-text $disabled-text ; // modifier colors // $green: #2ecc71; // $blue: #3498db; // $purple: #9b59b6; // $yellow: #f1c40f; // $orange: #e67e22; // $red: #e74c3c; // $pink: #f02475; // $turquoise: #1abc9c; // $asphalt: #34495e; // $modifier-name: "green" "blue" "purple" "yellow" "orange" "red" "pink" "turquoise" "asphalt" ; // $modifier-code: $green $blue $purple $yellow $orange $red $pink $turquoise $asphalt ; // $modifier-text: $white $white $white $white $white $white $white $white $white ; /////////////////////// // modals // /////////////////////// // overlay // $overlay-color: #0b0b0b; // Color of overlay screen // $overlay-opacity: 0.5; // Opacity of overlay screen // $shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe // spacing // $popup-padding-left: 8px; // Padding from left and from right side // $popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px // $z-index-base: 500; // Base z-index of popup // controls // $include-arrows: true; // Include styles for nav arrows // $controls-opacity: 0.65; // Opacity of controls // $controls-color: #FFF; // Color of controls // $inner-close-icon-color: #333; // Color of close button when inside // $controls-text-color: #CCC; // Color of preloader and '1 of X' indicator // $controls-text-color-hover: #FFF; // Hover color of preloader and '1 of X' indicator // $IE7support: true; // Very basic IE7 support // Inline-type options // $modal-max-width: $max-width; // Maximum width of inline modals // Iframe-type options // $include-iframe-type: true; // Enable Iframe-type popups // $iframe-padding-top: ($gutter*4); // Iframe padding top // $iframe-background: #000; // Background color of iframes // $iframe-max-width: $max-width; // Maximum width of iframes // $iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.) // Image-type options // $include-image-type: true; // Enable Image-type popups // $image-padding-top: ($gutter*4); // Image padding top // $image-padding-bottom: ($gutter*4); // Image padding bottom // $include-mobile-layout-for-image: true; // Removes paddings from top and bottom // Image caption options // $caption-title-color: #F3F3F3; // Caption title color // $caption-subtitle-color: #BDBDBD; // Caption subtitle color