diff options
author | Phil Thompson <phil@bhsowebdesign.com> | 2013-05-05 19:29:06 +0400 |
---|---|---|
committer | Phil Thompson <phil@bhsowebdesign.com> | 2013-05-05 19:29:06 +0400 |
commit | 42612aca167a9cb9154f48171c037dbf3edd978c (patch) | |
tree | aed528f1c91f251504560cb21c5b35d95f1b0ba6 /templates | |
parent | 0e70e17705d7de55c64f350f98801330ce5d46c4 (diff) |
Added the _variables.scss file into the project template folder
Diffstat (limited to 'templates')
-rw-r--r-- | templates/project/_variables.scss | 301 |
1 files changed, 301 insertions, 0 deletions
diff --git a/templates/project/_variables.scss b/templates/project/_variables.scss new file mode 100644 index 00000000..afb689a6 --- /dev/null +++ b/templates/project/_variables.scss @@ -0,0 +1,301 @@ +// +// Variables +// -------------------------------------------------- + + +// Global values +// -------------------------------------------------- + + +// Grays +// ------------------------- +$black: #000; +$grayDarker: #222; +$grayDark: #333; +$gray: #555; +$grayLight: #999; +$grayLighter: #eee; +$white: #fff; + + +// Accent colors +// ------------------------- +$blue: #049cdb; +$blueDark: #0064cd; +$green: #46a546; +$red: #9d261d; +$yellow: #ffc40d; +$orange: #f89406; +$pink: #c3325f; +$purple: #7a43b6; + + +// Scaffolding +// ------------------------- +$bodyBackground: $white; +$textColor: $grayDark; + + +// Links +// ------------------------- +$linkColor: #08c; +$linkColorHover: darken($linkColor, 15%); + + +// Typography +// ------------------------- +$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +$serifFontFamily: Georgia, "Times New Roman", Times, serif; +$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; + +$baseFontSize: 14px; +$baseFontFamily: $sansFontFamily; +$baseLineHeight: 20px; +$altFontFamily: $serifFontFamily; + +$headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily +$headingsFontWeight: bold; // instead of browser default, bold +$headingsColor: inherit; // empty to use BS default, $textColor + + +// Component sizing +// ------------------------- +// Based on 14px font-size and 20px line-height + +$fontSizeLarge: $baseFontSize * 1.25; // ~18px +$fontSizeSmall: $baseFontSize * 0.85; // ~12px +$fontSizeMini: $baseFontSize * 0.75; // ~11px + +$paddingLarge: 11px 19px; // 44px +$paddingSmall: 2px 10px; // 26px +$paddingMini: 0px 6px; // 22px + +$baseBorderRadius: 4px; +$borderRadiusLarge: 6px; +$borderRadiusSmall: 3px; + + +// Tables +// ------------------------- +$tableBackground: transparent; // overall background-color +$tableBackgroundAccent: #f9f9f9; // for striping +$tableBackgroundHover: #f5f5f5; // for hover +$tableBorder: #ddd; // table and cell border + +// Buttons +// ------------------------- +$btnBackground: $white; +$btnBackgroundHighlight: darken($white, 10%); +$btnBorder: #ccc; + +$btnPrimaryBackground: $linkColor; +$btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 20%); + +$btnInfoBackground: #5bc0de; +$btnInfoBackgroundHighlight: #2f96b4; + +$btnSuccessBackground: #62c462; +$btnSuccessBackgroundHighlight: #51a351; + +$btnWarningBackground: lighten($orange, 15%); +$btnWarningBackgroundHighlight: $orange; + +$btnDangerBackground: #ee5f5b; +$btnDangerBackgroundHighlight: #bd362f; + +$btnInverseBackground: #444; +$btnInverseBackgroundHighlight: $grayDarker; + + +// Forms +// ------------------------- +$inputBackground: $white; +$inputBorder: #ccc; +$inputBorderRadius: $baseBorderRadius; +$inputDisabledBackground: $grayLighter; +$formActionsBackground: #f5f5f5; +$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border + + +// Dropdowns +// ------------------------- +$dropdownBackground: $white; +$dropdownBorder: rgba(0,0,0,.2); +$dropdownDividerTop: #e5e5e5; +$dropdownDividerBottom: $white; + +$dropdownLinkColor: $grayDark; +$dropdownLinkColorHover: $white; +$dropdownLinkColorActive: $white; + +$dropdownLinkBackgroundActive: $linkColor; +$dropdownLinkBackgroundHover: $dropdownLinkBackgroundActive; + + + +// COMPONENT VARIABLES +// -------------------------------------------------- + + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindexDropdown: 1000; +$zindexPopover: 1010; +$zindexTooltip: 1030; +$zindexFixedNavbar: 1030; +$zindexModalBackdrop: 1040; +$zindexModal: 1050; + + +// Sprite icons path +// ------------------------- +$iconSpritePath: image-path("glyphicons-halflings.png"); +$iconWhiteSpritePath: image-path("glyphicons-halflings-white.png"); + + +// Input placeholder text color +// ------------------------- +$placeholderText: $grayLight; + + +// Hr border color +// ------------------------- +$hrBorder: $grayLighter; + + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + + +// Wells +// ------------------------- +$wellBackground: #f5f5f5; + + +// Navbar +// ------------------------- +$navbarCollapseWidth: 979px; +$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; + +$navbarHeight: 40px; +$navbarBackgroundHighlight: #ffffff; +$navbarBackground: darken($navbarBackgroundHighlight, 5%); +$navbarBorder: darken($navbarBackground, 12%); + +$navbarText: #777; +$navbarLinkColor: #777; +$navbarLinkColorHover: $grayDark; +$navbarLinkColorActive: $gray; +$navbarLinkBackgroundHover: transparent; +$navbarLinkBackgroundActive: darken($navbarBackground, 5%); + +$navbarBrandColor: $navbarLinkColor; + +// Inverted navbar +$navbarInverseBackground: #111111; +$navbarInverseBackgroundHighlight: #222222; +$navbarInverseBorder: #252525; + +$navbarInverseText: $grayLight; +$navbarInverseLinkColor: $grayLight; +$navbarInverseLinkColorHover: $white; +$navbarInverseLinkColorActive: $navbarInverseLinkColorHover; +$navbarInverseLinkBackgroundHover: transparent; +$navbarInverseLinkBackgroundActive: $navbarInverseBackground; + +$navbarInverseSearchBackground: lighten($navbarInverseBackground, 25%); +$navbarInverseSearchBackgroundFocus: $white; +$navbarInverseSearchBorder: $navbarInverseBackground; +$navbarInverseSearchPlaceholderColor: #ccc; + +$navbarInverseBrandColor: $navbarInverseLinkColor; + + +// Pagination +// ------------------------- +$paginationBackground: #fff; +$paginationBorder: #ddd; +$paginationActiveBackground: #f5f5f5; + + +// Hero unit +// ------------------------- +$heroUnitBackground: $grayLighter; +$heroUnitHeadingColor: inherit; +$heroUnitLeadColor: inherit; + + +// Form states and alerts +// ------------------------- +$warningText: #c09853; +$warningBackground: #fcf8e3; +$warningBorder: darken(adjust-hue($warningBackground, -10), 3%); + +$errorText: #b94a48; +$errorBackground: #f2dede; +$errorBorder: darken(adjust-hue($errorBackground, -10), 3%); + +$successText: #468847; +$successBackground: #dff0d8; +$successBorder: darken(adjust-hue($successBackground, -10), 5%); + +$infoText: #3a87ad; +$infoBackground: #d9edf7; +$infoBorder: darken(adjust-hue($infoBackground, -10), 7%); + + +// Tooltips and popovers +// ------------------------- +$tooltipColor: #fff; +$tooltipBackground: #000; +$tooltipArrowWidth: 5px; +$tooltipArrowColor: $tooltipBackground; + +$popoverBackground: #fff; +$popoverArrowWidth: 10px; +$popoverArrowColor: #fff; +$popoverTitleBackground: darken($popoverBackground, 3%); + +// Special enhancement for popovers +$popoverArrowOuterWidth: $popoverArrowWidth + 1; +$popoverArrowOuterColor: rgba(0,0,0,.25); + + + +// GRID +// -------------------------------------------------- + + +// Default 940px grid +// ------------------------- +$gridColumns: 12; +$gridColumnWidth: 60px; +$gridGutterWidth: 20px; +$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); + +// 1200px min +$gridColumnWidth1200: 70px; +$gridGutterWidth1200: 30px; +$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)); + +// 768px-979px +$gridColumnWidth768: 42px; +$gridGutterWidth768: 20px; +$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)); + + +// Fluid grid +// ------------------------- +$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); +$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); + +// 1200px min +$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); +$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); + +// 768px-979px +$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); +$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); |