Created
May 5, 2013 09:26
-
-
Save michaelbaudino/5520266 to your computer and use it in GitHub Desktop.
Zurb Foundation 4 overrides (customization) file, converted to sass syntax (originally generated by `rails g foundation:install` in scss syntax)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //// | |
| //// Foundation 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 | |
| //// $base-line-height is 24px while $base-font-size is 16px | |
| // $base-line-height: 150% | |
| //// This is the default html and body font-size for the base em value. | |
| //// Since the typical default browser font-size is 16px, that makes the calculation for grid size. | |
| //// If you want your base font-size to be a different size and not have it effect grid size too, | |
| //// set the value of $em-base to $base-font-size ($em-base: $base-font-size;) | |
| $em-base: 16px !default | |
| //// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px) | |
| @function emCalc($pxWidth) | |
| @return $pxWidth / $em-base * 1em | |
| //// Various global styles | |
| // $body-bg: white | |
| // $body-font-color: #222222 | |
| // $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif | |
| // $body-font-weight: normal | |
| // $body-font-style: normal | |
| //// Font-smoothing | |
| // $font-smoothing: antialiased | |
| //// Text direction settings | |
| // $text-direction: ltr | |
| //// Colors | |
| // $primary-color: #2ba6cb | |
| // $secondary-color: #e9e9e9 | |
| // $alert-color: #c60f13 | |
| // $success-color: #5da423 | |
| //// Make sure border radius matches unless we want it different. | |
| // $global-radius: 3px | |
| // $global-rounded: 1000px | |
| //// Inset shadow shiny edges and depressions. | |
| // $shiny-edge-size: 0 1px 0 | |
| // $shiny-edge-color: rgba(white, 0.5) | |
| // $shiny-edge-active-color: rgba(black, 0.2) | |
| //// Control whether or not CSS classes come through in the CSS files. | |
| // $include-html-classes: true | |
| // $include-print-styles: true | |
| // $include-html-grid-classes: $include-html-classes | |
| // $include-html-visibility-classes: $include-html-classes | |
| // $include-html-button-classes: $include-html-classes | |
| // $include-html-form-classes: $include-html-classes | |
| // $include-html-media-classes: $include-html-classes | |
| // $include-html-section-classes: $include-html-classes | |
| // $include-html-reveal-classes: $include-html-classes | |
| // $include-html-alert-classes: $include-html-classes | |
| // $include-html-nav-classes: $include-html-classes | |
| // $include-html-label-classes: $include-html-classes | |
| // $include-html-panel-classes: $include-html-classes | |
| // $include-html-pricing-classes: $include-html-classes | |
| // $include-html-progress-classes: $include-html-classes | |
| // $include-html-magellan-classes: $include-html-classes | |
| //// Media Queries | |
| // $small-screen: emCalc(768px) | |
| // $medium-screen: emCalc(1280px) | |
| // $large-screen: emCalc(1440px) | |
| // $screen: "only screen" | |
| // $small: "only screen and (min-width:#{$small-screen})" | |
| // $medium: "only screen and (min-width:#{$medium-screen})" | |
| // $large: "only screen and (min-width:#{$large-screen})" | |
| // $landscape: "only screen and (orientation: landscape)" | |
| // $portrait: "only screen and (orientation: portrait)" | |
| //// | |
| //// Grid Variables | |
| //// | |
| // $row-width: emCalc(1000px) | |
| // $column-gutter: emCalc(30px) | |
| // $total-columns: 12 | |
| //// | |
| //// Block Grid Variables | |
| //// | |
| //// Maximum number of block grid elements per row | |
| // $block-grid-elements: 12 | |
| // $block-grid-default-spacing: 10px | |
| //// Enables media queries for block-grid classes. Set to false if writing semantic HTML. | |
| // $block-grid-media-queries: true | |
| //// | |
| //// Typography Variables | |
| //// | |
| //// Heading font styles | |
| // $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif | |
| // $header-font-weight: bold | |
| // $header-font-style: normal | |
| // $header-font-color: #222222 | |
| // $header-line-height: 1.4 | |
| // $header-top-margin: 0.2em | |
| // $header-bottom-margin: 0.5em | |
| // $header-text-rendering: optimizeLegibility | |
| //// Heading font sizes | |
| // $h1-font-size: emCalc(44px) | |
| // $h2-font-size: emCalc(37px) | |
| // $h3-font-size: emCalc(27px) | |
| // $h4-font-size: emCalc(23px) | |
| // $h5-font-size: emCalc(18px) | |
| // $h6-font-size: 1em | |
| //// Subheaders | |
| // $subheader-line-height: 1.4 | |
| // $subheader-font-color: lighten($header-font-color, 30%) | |
| // $subheader-font-weight: 300 | |
| // $subheader-top-margin: 0.2em | |
| // $subheader-bottom-margin: 0.5em | |
| //// <small> styling | |
| // $small-font-size: 60% | |
| // $small-font-color: lighten($header-font-color, 30%) | |
| //// Paragraphs | |
| // $paragraph-font-family: inherit | |
| // $paragraph-font-weight: normal | |
| // $paragraph-font-size: 1em | |
| // $paragraph-line-height: 1.6 | |
| // $paragraph-margin-bottom: emCalc(20px) | |
| // $paragraph-aside-font-size: emCalc(14px) | |
| // $paragraph-aside-line-height: 1.35 | |
| // $paragraph-aside-font-style: italic | |
| //// <code> tags | |
| // $code-color: darken($alert-color, 15%) | |
| // $code-font-family: Consolas, "Liberation Mono", Courier, monospace | |
| // $code-font-weight: bold | |
| //// Anchors | |
| // $anchor-text-decoration: none | |
| // $anchor-font-color: $primary-color | |
| // $anchor-font-color-hover: darken($primary-color, 5%) | |
| //// <hr> element | |
| // $hr-border-width: 1px | |
| // $hr-border-style: solid | |
| // $hr-border-color: #dddddd | |
| // $hr-margin: emCalc(20px) | |
| //// Lists | |
| // $list-style-position: outside | |
| // $list-side-margin: emCalc(18px) | |
| // $definition-list-header-weight: bold | |
| // $definition-list-header-margin-bottom: 0.3em | |
| // $definition-list-margin-bottom: emCalc(12px) | |
| //// Blockquotes | |
| // $blockquote-font-color: lighten($header-font-color, 30%) | |
| // $blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px) | |
| // $blockquote-border: 1px solid #dddddd | |
| // $blockquote-cite-font-size: emCalc(13px) | |
| // $blockquote-cite-font-color: lighten($header-font-color, 20%) | |
| // $blockquote-cite-link-color: $blockquote-cite-font-color | |
| //// Acronym | |
| // $acronym-underline: 1px dotted #dddddd | |
| //// Padding and margin | |
| // $microformat-padding: emCalc(10px) emCalc(12px) | |
| // $microformat-margin: 0 0 emCalc(20px) 0 | |
| //// Border styles | |
| // $microformat-border-width: 1px | |
| // $microformat-border-style: solid | |
| // $microformat-border-color: #dddddd | |
| //// Full name font styles | |
| // $microformat-fullname-font-weight: bold | |
| // $microformat-fullname-font-size: emCalc(15px) | |
| //// Summary font styles | |
| // $microformat-summary-font-weight: bold | |
| //// <abbr> padding | |
| // $microformat-abbr-padding: 0 emCalc(1px) | |
| //// <abbr> font styles | |
| // $microformat-abbr-font-weight: bold | |
| // $microformat-abbr-font-decoration: none | |
| //// | |
| //// Form Variables | |
| //// | |
| //// Base for lots of form spacing and positioning styles | |
| // $form-spacing: emCalc(16px) | |
| //// Labels | |
| // $label-pointer: pointer | |
| // $label-font-size: emCalc(14px) | |
| // $label-font-weight: 500 | |
| // $label-font-color: lighten(black, 30%) | |
| // $label-bottom-margin: emCalc(3px) | |
| // $input-font-family: inherit | |
| // $input-font-color: rgba(0, 0, 0, 0.75) | |
| // $input-font-size: emCalc(14px) | |
| // $input-bg-color: white | |
| // $input-focus-bg-color: darken(white, 2%) | |
| // $input-border-color: darken(white, 20%) | |
| // $input-focus-border-color: darken(white, 40%) | |
| // $input-border-style: solid | |
| // $input-border-width: 1px | |
| // $input-disabled-bg: #dddddd | |
| // $input-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) | |
| //// Fieldset border and spacing. | |
| // $fieldset-border-style: solid | |
| // $fieldset-border-width: 1px | |
| // $fieldset-border-color: #dddddd | |
| // $fieldset-padding: emCalc(20px) | |
| // $fieldset-margin: emCalc(18px) 0 | |
| //// Legends | |
| // $legend-bg: white | |
| // $legend-font-weight: bold | |
| // $legend-padding: 0 emCalc(3px) | |
| //// Prefix and postfix input elements | |
| // $input-prefix-bg: darken(white, 5%) | |
| // $input-prefix-border-color: darken(white, 20%) | |
| // $input-prefix-border-size: 1px | |
| // $input-prefix-border-type: solid | |
| // $input-prefix-overflow: hidden | |
| // $input-prefix-font-color: #333333 | |
| // $input-prefix-font-color-alt: white | |
| //// Error states for inputs and labels | |
| // $input-error-message-padding: emCalc(6px) emCalc(4px) | |
| // $input-error-message-top: -$form-spacing - emCalc(5px) | |
| // $input-error-message-font-size: emCalc(12px) | |
| // $input-error-message-font-weight: bold | |
| // $input-error-message-font-color: white | |
| // $input-error-message-font-color-alt: #333333 | |
| //// Padding for buttons. | |
| // $button-tny: emCalc(7px) | |
| // $button-sml: emCalc(9px) | |
| // $button-med: emCalc(12px) | |
| // $button-lrg: emCalc(16px) | |
| //// Display property. | |
| // $button-display: inline-block | |
| // $button-margin-bottom: emCalc(20px) | |
| //// Button text styles. | |
| // $button-font-family: inherit | |
| // $button-font-color: white | |
| // $button-font-color-alt: #333333 | |
| // $button-font-med: emCalc(16px) | |
| // $button-font-tny: emCalc(11px) | |
| // $button-font-sml: emCalc(13px) | |
| // $button-font-lrg: emCalc(20px) | |
| // $button-font-weight: bold | |
| // $button-font-align: center | |
| //// Various hover effects. | |
| // $button-function-factor: 10% | |
| //// Button border styles. | |
| // $button-border-width: 1px | |
| // $button-border-style: solid | |
| // $button-border-color: darken($primary-color, $button-function-factor) | |
| //// Radius used throughout the core. | |
| // $button-radius: $global-radius | |
| //// Opacity for disabled buttons. | |
| // $button-disabled-opacity: 0.6 | |
| //// | |
| //// Dropdown Button Variables | |
| //// | |
| //// Color of the pip in dropdown buttons | |
| // $dropdown-button-pip-color: white | |
| // $dropdown-button-pip-color-alt: #333333 | |
| //// Tiny dropdown buttons | |
| // $dropdown-button-padding-tny: $button-tny * 5 | |
| // $dropdown-button-pip-size-tny: $button-tny | |
| // $dropdown-button-pip-right-tny: $button-tny * 2 | |
| // $dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px) | |
| //// Small dropdown buttons | |
| // $dropdown-button-padding-sml: $button-sml * 5 | |
| // $dropdown-button-pip-size-sml: $button-sml | |
| // $dropdown-button-pip-right-sml: $button-sml * 2 | |
| // $dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px) | |
| //// Medium dropdown buttons | |
| // $dropdown-button-padding-med: $button-med * 4 + emCalc(3px) | |
| // $dropdown-button-pip-size-med: $button-med - emCalc(3px) | |
| // $dropdown-button-pip-right-med: $button-med * 2 | |
| // $dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px) | |
| //// Large dropdown buttons | |
| // $dropdown-button-padding-lrg: $button-lrg * 4 | |
| // $dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px) | |
| // $dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px) | |
| // $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px) | |
| //// | |
| //// Split Button Variables | |
| //// | |
| //// Shared styles for Split Buttons | |
| // $split-button-function-factor: 15% | |
| // $split-button-pip-color: white | |
| // $split-button-pip-color-alt: #333333 | |
| // $split-button-active-bg-tint: rgba(0, 0, 0, 0.1) | |
| //// Tiny split buttons | |
| // $split-button-padding-tny: $button-tny * 9 | |
| // $split-button-span-width-tny: $button-tny * 6.5 | |
| // $split-button-pip-size-tny: $button-tny | |
| // $split-button-pip-top-tny: $button-tny * 2 | |
| // $split-button-pip-left-tny: emCalc(-5px) | |
| //// Small split buttons | |
| // $split-button-padding-sml: $button-sml * 7 | |
| // $split-button-span-width-sml: $button-sml * 5 | |
| // $split-button-pip-size-sml: $button-sml | |
| // $split-button-pip-top-sml: $button-sml * 1.5 | |
| // $split-button-pip-left-sml: emCalc(-9px) | |
| //// Medium split buttons | |
| // $split-button-padding-med: $button-med * 6.4 | |
| // $split-button-span-width-med: $button-med * 4 | |
| // $split-button-pip-size-med: $button-med - emCalc(3px) | |
| // $split-button-pip-top-med: $button-med * 1.5 | |
| // $split-button-pip-left-med: emCalc(-9px) | |
| //// Large split buttons | |
| // $split-button-padding-lrg: $button-lrg * 6 | |
| // $split-button-span-width-lrg: $button-lrg * 3.75 | |
| // $split-button-pip-size-lrg: $button-lrg - emCalc(6px) | |
| // $split-button-pip-top-lrg: $button-lrg + emCalc(5px) | |
| // $split-button-pip-left-lrg: emCalc(-9px) | |
| //// | |
| //// Alert Variables | |
| //// | |
| //// Alert padding. | |
| // $alert-padding-top: emCalc(11px) | |
| // $alert-padding-left: $alert-padding-top | |
| // $alert-padding-right: $alert-padding-top + emCalc(10px) | |
| // $alert-padding-bottom: $alert-padding-top + emCalc(1px) | |
| //// Text style. | |
| // $alert-font-weight: bold | |
| // $alert-font-size: emCalc(14px) | |
| // $alert-font-color: white | |
| // $alert-font-color-alt: darken($secondary-color, 60%) | |
| //// Close hover effect. | |
| // $alert-function-factor: 10% | |
| //// Border styles. | |
| // $alert-border-style: solid | |
| // $alert-border-width: 1px | |
| // $alert-border-color: darken($primary-color, $alert-function-factor) | |
| // $alert-bottom-margin: emCalc(20px) | |
| //// Close buttons | |
| // $alert-close-color: #333333 | |
| // $alert-close-position: emCalc(5px) | |
| // $alert-close-font-size: emCalc(22px) | |
| // $alert-close-opacity: 0.3 | |
| // $alert-close-opacity-hover: 0.5 | |
| // $alert-close-padding: 5px 4px 4px | |
| //// Border radius | |
| // $alert-radius: $global-radius | |
| //// | |
| //// Breadcrumb Variables | |
| //// | |
| //// Background color for the breadcrumb container. | |
| // $crumb-bg: lighten($secondary-color, 5%) | |
| //// Padding around the breadcrumbs. | |
| // $crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px) | |
| // $crumb-side-padding: emCalc(12px) | |
| //// Border styles. | |
| // $crumb-function-factor: 10% | |
| // $crumb-border-size: 1px | |
| // $crumb-border-style: solid | |
| // $crumb-border-color: darken($crumb-bg, $crumb-function-factor) | |
| // $crumb-radius: $global-radius | |
| //// Various text styles for breadcrumbs. | |
| // $crumb-font-size: emCalc(11px) | |
| // $crumb-font-color: $primary-color | |
| // $crumb-font-color-current: #333333 | |
| // $crumb-font-color-unavailable: #999999 | |
| // $crumb-font-transform: uppercase | |
| // $crumb-link-decor: underline | |
| //// Slash between breadcrumbs | |
| // $crumb-slash-color: #aaaaaa | |
| // $crumb-slash: "/" | |
| //// | |
| //// Clearing Variables | |
| //// | |
| //// Background colors for parts of Clearing. | |
| // $clearing-bg: #111111 | |
| // $clearing-caption-bg: $clearing-bg | |
| // $clearing-carousel-bg: #111111 | |
| // $clearing-img-bg: $clearing-bg | |
| //// Close button | |
| // $clearing-close-color: white | |
| // $clearing-close-size: 40px | |
| //// Style the arrows | |
| // $clearing-arrow-size: 16px | |
| // $clearing-arrow-color: $clearing-close-color | |
| //// Style captions | |
| // $clearing-caption-font-color: white | |
| // $clearing-caption-padding: 10px 30px | |
| //// Make the image and carousel height and style | |
| // $clearing-active-img-height: 75% | |
| // $clearing-carousel-height: 150px | |
| // $clearing-carousel-thumb-width: 175px | |
| // $clearing-carousel-thumb-active-border: 4px solid rgb(255, 255, 255) | |
| //// | |
| //// Custom Form Variables | |
| //// | |
| //// Basic form styles input styles | |
| // $custom-form-border-color: #cccccc | |
| // $custom-form-bg: white | |
| // $custom-form-bg-disabled: #dddddd | |
| // $custom-form-check-color: #222222 | |
| //// Custom select form element. | |
| // $custom-select-bg: white | |
| // $custom-select-fade-to-color: #f3f3f3 | |
| // $custom-select-border-color: #dddddd | |
| // $custom-select-triangle-color: #aaaaaa | |
| // $custom-select-triangle-color-open: #222222 | |
| // $custom-select-height: emCalc(13px) + $form-spacing * 1.5 | |
| // $custom-select-margin-bottom: emCalc(20px) | |
| // $custom-select-font-color-selected: #141414 | |
| // $custom-select-disabled-color: #888888 | |
| //// Custom select dropdown element. | |
| // $custom-dropdown-height: 200px | |
| // $custom-dropdown-bg: white | |
| // $custom-dropdown-border-color: darken(white, 20%) | |
| // $custom-dropdown-border-width: 1px | |
| // $custom-dropdown-border-style: solid | |
| // $custom-dropdown-font-color: #555555 | |
| // $custom-dropdown-font-size: emCalc(14px) | |
| // $custom-dropdown-color-selected: #eeeeee | |
| // $custom-dropdown-font-color-selected: black | |
| // $custom-dropdown-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.1) | |
| // $custom-dropdown-offset-top: none | |
| // $custom-dropdown-list-padding: emCalc(4px) | |
| // $custom-dropdown-left-padding: emCalc(6px) | |
| // $custom-dropdown-right-padding: emCalc(38px) | |
| // $custom-dropdown-list-item-min-height: emCalc(24px) | |
| //// | |
| //// Dropdown Variables | |
| //// | |
| //// Height and width styles. | |
| // $f-dropdown-max-width: 200px | |
| // $f-dropdown-height: auto | |
| // $f-dropdown-max-height: none | |
| // $f-dropdown-margin-top: 2px | |
| //// Background color | |
| // $f-dropdown-bg: white | |
| //// Border styles for dropdowns. | |
| // $f-dropdown-border-style: solid | |
| // $f-dropdown-border-width: 1px | |
| // $f-dropdown-border-color: darken(white, 20%) | |
| //// Triangle pip. | |
| // $f-dropdown-triangle-size: 6px | |
| // $f-dropdown-triangle-color: white | |
| // $f-dropdown-triangle-side-offset: 10px | |
| //// List elements. | |
| // $f-dropdown-list-style: none | |
| // $f-dropdown-font-color: #555555 | |
| // $f-dropdown-font-size: emCalc(14px) | |
| // $f-dropdown-list-padding: emCalc(5px) emCalc(10px) | |
| // $f-dropdown-line-height: emCalc(18px) | |
| // $f-dropdown-list-hover-bg: #eeeeee | |
| // $dropdown-mobile-left: 0 | |
| //// When the dropdown has custom content. | |
| // $f-dropdown-content-padding: emCalc(20px) | |
| //// | |
| //// Flex Video Variables | |
| //// | |
| //// Video container padding and margins | |
| // $flex-video-padding-top: emCalc(25px) | |
| // $flex-video-padding-bottom: 67.5% | |
| // $flex-video-margin-bottom: emCalc(16px) | |
| //// Widescreen bottom padding | |
| // $flex-video-widescreen-padding-bottom: 57.25% | |
| //// | |
| //// Inline List Variables | |
| //// | |
| //// Margins and padding of the inline list. | |
| // $inline-list-margin-bottom: emCalc(17px) emCalc(-22px) | |
| // $inline-list-margin: 0 0 | |
| // $inline-list-padding: 0 | |
| //// Overflow of the inline list. | |
| // $inline-list-overflow: hidden | |
| //// List items | |
| // $inline-list-display: block | |
| //// Elments within list items | |
| // $inline-list-children-display: block | |
| //// | |
| //// Joyride Variables | |
| //// | |
| //// Joyride styles | |
| // $joyride-tip-bg: rgb(0, 0, 0) | |
| // $joyride-tip-default-width: 300px | |
| // $joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px) | |
| // $joyride-tip-border: solid 1px #555555 | |
| // $joyride-tip-radius: 4px | |
| // $joyride-tip-position-offset: 22px | |
| //// Tip font styles | |
| // $joyride-tip-font-color: white | |
| // $joyride-tip-font-size: emCalc(14px) | |
| // $joyride-tip-header-weight: bold | |
| //// Changes the nub size | |
| // $joyride-tip-nub-size: 14px | |
| //// Adjusts the styles for the timer when its enabled | |
| // $joyride-tip-timer-width: 50px | |
| // $joyride-tip-timer-height: 3px | |
| // $joyride-tip-timer-color: #666666 | |
| //// Changes up the styles for the close button | |
| // $joyride-tip-close-color: #777777 | |
| // $joyride-tip-close-size: 30px | |
| // $joyride-tip-close-weight: normal | |
| //// When Joyride is filling the screen, style for the bg | |
| // $joyride-screenfill: rgba(0, 0, 0, 0.5) | |
| //// | |
| //// Keystroke Variables | |
| //// | |
| //// Text styles. | |
| // $keystroke-font: "Consolas", "Menlo", "Courier", monospace | |
| // $keystroke-font-size: emCalc(15px) | |
| // $keystroke-font-color: #222222 | |
| // $keystroke-font-color-alt: white | |
| // $keystroke-function-factor: 7% | |
| //// Keystroke padding. | |
| // $keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px) | |
| //// Background and border styles. | |
| // $keystroke-bg: darken(white, $keystroke-function-factor) | |
| // $keystroke-border-style: solid | |
| // $keystroke-border-width: 1px | |
| // $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) | |
| // $keystroke-radius: $global-radius | |
| //// | |
| //// Label Variables | |
| //// | |
| //// Style the labels | |
| // $label-padding: emCalc(3px) emCalc(10px) emCalc(4px) | |
| // $label-radius: $global-radius | |
| //// We use these to style the label text | |
| // $label-font-sizing: emCalc(14px) | |
| // $label-font-weight: bold | |
| // $label-font-color: #333333 | |
| // $label-font-color-alt: white | |
| //// | |
| //// Magellan Variables | |
| //// | |
| //// Basic visual styles | |
| // $magellan-bg: white | |
| // $magellan-padding: 10px | |
| //// | |
| //// Orbit Settings | |
| //// | |
| //// Caption styles | |
| // $orbit-container-bg: whitesmoke | |
| // $orbit-caption-bg-old-browser: black | |
| // $orbit-caption-bg-old: rgb(0, 0, 0) | |
| // $orbit-caption-bg: rgba(0, 0, 0, 0.6) | |
| // $orbit-caption-font-color: white | |
| //// Left/right nav styles | |
| // $orbit-nav-bg-old: rgb(0, 0, 0) | |
| // $orbit-nav-bg: rgba(0, 0, 0, 0.6) | |
| //// Timer styles | |
| // $orbit-timer-bg-old: rgb(0, 0, 0) | |
| // $orbit-timer-bg: rgba(0, 0, 0, 0.6) | |
| //// Bullet nav styles | |
| // $orbit-bullet-nav-color: #999999 | |
| // $orbit-bullet-nav-color-active: #222222 | |
| //// Slide numbers | |
| // $orbit-slide-number-bg: rgb(0, 0, 0) | |
| // $orbit-slide-number-font-color: white | |
| // $orbit-slide-number-padding: emCalc(5px) | |
| //// Margin for when Orbit is stacked on small screens | |
| // $stack-on-small-margin-bottom: emCalc(20px) | |
| //// Doesn't quite work yet | |
| //// | |
| //// Pagination Variables | |
| //// | |
| //// Pagination container | |
| // $pagination-height: emCalc(24px) | |
| // $pagination-margin: emCalc(-5px) | |
| //// List-item properties | |
| // $pagination-li-float: $default-float | |
| // $pagination-li-height: emCalc(24px) | |
| // $pagination-li-font-color: #222222 | |
| // $pagination-li-font-size: emCalc(14px) | |
| // $pagination-li-margin: emCalc(5px) | |
| //// Pagination anchor links | |
| // $pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px) | |
| // $pagination-link-font-color: #999999 | |
| // $pagination-link-active-bg: darken(white, 10%) | |
| //// Disabled anchor links | |
| // $pagination-link-unavailable-cursor: default | |
| // $pagination-link-unavailable-font-color: #999999 | |
| // $pagination-link-unavailable-bg-active: transparent | |
| //// Currently selected anchor links | |
| // $pagination-link-current-background: $primary-color | |
| // $pagination-link-current-font-color: white | |
| // $pagination-link-current-font-weight: bold | |
| // $pagination-link-current-cursor: default | |
| // $pagination-link-current-active-bg: $primary-color | |
| //// | |
| //// Panel Variables | |
| //// | |
| //// Background and border styles | |
| // $panel-bg: darken(white, 5%) | |
| // $panel-border-style: solid | |
| // $panel-border-size: 1px | |
| //// Control how much we darken things on hover | |
| // $panel-function-factor: 10% | |
| // $panel-border-color: darken($panel-bg, $panel-function-factor) | |
| //// Inner padding and bottom margin | |
| // $panel-margin-bottom: emCalc(20px) | |
| // $panel-padding: emCalc(20px) | |
| //// Font colors | |
| // $panel-font-color: #333333 | |
| // $panel-font-color-alt: white | |
| //// | |
| //// Pricing Table Variables | |
| //// | |
| //// Border color | |
| // $price-table-border: solid 1px #dddddd | |
| //// Bottom margin of the pricing table | |
| // $price-table-margin-bottom: emCalc(20px) | |
| //// Control the title styles | |
| // $price-title-bg: #dddddd | |
| // $price-title-padding: emCalc(15px) emCalc(20px) | |
| // $price-title-align: center | |
| // $price-title-color: #333333 | |
| // $price-title-weight: bold | |
| // $price-title-size: emCalc(16px) | |
| //// Control the price styles | |
| // $price-money-bg: #eeeeee | |
| // $price-money-padding: emCalc(15px) emCalc(20px) | |
| // $price-money-align: center | |
| // $price-money-color: #333333 | |
| // $price-money-weight: normal | |
| // $price-money-size: emCalc(20px) | |
| //// Description styles | |
| // $price-bg: white | |
| // $price-desc-color: #777777 | |
| // $price-desc-padding: emCalc(15px) | |
| // $price-desc-align: center | |
| // $price-desc-font-size: emCalc(12px) | |
| // $price-desc-weight: normal | |
| // $price-desc-line-height: 1.4 | |
| // $price-desc-bottom-border: dotted 1px #dddddd | |
| //// List item styles | |
| // $price-item-color: #333333 | |
| // $price-item-padding: emCalc(15px) | |
| // $price-item-align: center | |
| // $price-item-font-size: emCalc(14px) | |
| // $price-item-weight: normal | |
| // $price-item-bottom-border: dotted 1px #dddddd | |
| //// CTA area styles | |
| // $price-cta-bg: whitesmoke | |
| // $price-cta-align: center | |
| // $price-cta-padding: emCalc(20px) emCalc(20px) 0 | |
| //// | |
| //// Progress Bar Variables | |
| //// | |
| //// Progress bar height | |
| // $progress-bar-height: emCalc(25px) | |
| // $progress-bar-color: transparent | |
| //// Border styles | |
| // $progress-bar-border-color: darken(white, 20%) | |
| // $progress-bar-border-size: 1px | |
| // $progress-bar-border-style: solid | |
| // $progress-bar-border-radius: $global-radius | |
| //// Margin & padding | |
| // $progress-bar-pad: emCalc(2px) | |
| // $progress-bar-margin-bottom: emCalc(10px) | |
| //// Meter colors | |
| // $progress-meter-color: $primary-color | |
| // $progress-meter-secondary-color: $secondary-color | |
| // $progress-meter-success-color: $success-color | |
| // $progress-meter-alert-color: $alert-color | |
| //// | |
| //// Reveal Variables | |
| //// | |
| //// Reveal overlay. | |
| // $reveal-overlay-bg: rgba(black, 0.45) | |
| // $reveal-overlay-bg-old: black | |
| //// Modal itself. | |
| // $reveal-modal-bg: white | |
| // $reveal-position-top: 50px | |
| // $reveal-default-width: 80% | |
| // $reveal-modal-padding: emCalc(20px) | |
| // $reveal-box-shadow: 0 0 10px rgba(black, 0.4) | |
| //// Reveal close button | |
| // $reveal-close-font-size: emCalc(22px) | |
| // $reveal-close-top: emCalc(8px) | |
| // $reveal-close-side: emCalc(11px) | |
| // $reveal-close-color: #aaaaaa | |
| // $reveal-close-weight: bold | |
| //// Modal border | |
| // $reveal-border-style: solid | |
| // $reveal-border-width: 1px | |
| // $reveal-border-color: #666666 | |
| //// | |
| //// Section Variables | |
| //// | |
| //// Padding and hover factor | |
| // $section-padding: emCalc(15px) | |
| // $section-function-factor: 10% | |
| //// Titles | |
| // $section-title-color: #333333 | |
| // $section-title-bg: #efefef | |
| // $section-title-bg-active: darken($section-title-bg, $section-function-factor) | |
| // $section-title-bg-active-tabs: white | |
| //// Border size | |
| // $section-border-size: 1px | |
| // $section-border-style: solid | |
| // $section-border-color: #cccccc | |
| //// Color of the background and some size options | |
| // $section-content-bg: white | |
| // $section-vertical-nav-min-width: emCalc(200px) | |
| // $section-vertical-tabs-title-width: emCalc(200px) | |
| // $section-bottom-margin: emCalc(20px) | |
| //// | |
| //// Side Nav Variables | |
| //// | |
| //// Padding | |
| // $side-nav-padding: emCalc(14px) 0 | |
| //// List styles | |
| // $side-nav-list-type: none | |
| // $side-nav-list-position: inside | |
| // $side-nav-list-margin: 0 0 emCalc(7px) 0 | |
| //// Link styles | |
| // $side-nav-link-color: $primary-color | |
| // $side-nav-link-color-active: lighten(black, 30%) | |
| // $side-nav-font-size: emCalc(14px) | |
| // $side-nav-font-weight: bold | |
| //// Border styles | |
| // $side-nav-divider-size: 1px | |
| // $side-nav-divider-style: solid | |
| // $side-nav-divider-color: darken(white, 10%) | |
| //// | |
| //// Sub Nav Variables | |
| //// | |
| //// Margin and padding | |
| // $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) | |
| // $sub-nav-list-padding-top: emCalc(4px) | |
| //// Definition | |
| // $sub-nav-font-size: emCalc(14px) | |
| // $sub-nav-font-color: #999999 | |
| // $sub-nav-font-weight: normal | |
| // $sub-nav-text-decoration: none | |
| // $sub-nav-border-radius: 1000px | |
| //// Active item styles | |
| // $sub-nav-active-font-weight: bold | |
| // $sub-nav-active-bg: $primary-color | |
| // $sub-nav-active-color: white | |
| // $sub-nav-active-padding: emCalc(3px) emCalc(9px) | |
| // $sub-nav-active-cursor: default | |
| //// | |
| //// Switch Variables | |
| //// | |
| //// Border styles and background colors for the switch container | |
| // $switch-border-color: darken(white, 20%) | |
| // $switch-border-style: solid | |
| // $switch-border-width: 1px | |
| // $switch-bg: white | |
| //// Switch heights for our default classes | |
| // $switch-height-tny: 22px | |
| // $switch-height-sml: 28px | |
| // $switch-height-med: 36px | |
| // $switch-height-lrg: 44px | |
| // $switch-bottom-margin: emCalc(20px) | |
| //// Font sizes for our classes. | |
| // $switch-font-size-tny: 11px | |
| // $switch-font-size-sml: 12px | |
| // $switch-font-size-med: 14px | |
| // $switch-font-size-lrg: 17px | |
| // $switch-label-side-padding: 6px | |
| //// Switch-paddle | |
| // $switch-paddle-bg: white | |
| // $switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%) | |
| // $switch-paddle-border-color: darken($switch-paddle-bg, 35%) | |
| // $switch-paddle-border-width: 1px | |
| // $switch-paddle-border-style: solid | |
| // $switch-paddle-transition-speed: 0.1s | |
| // $switch-paddle-transition-ease: ease-out | |
| // $switch-positive-color: lighten($success-color, 50%) | |
| // $switch-negative-color: whitesmoke | |
| //// Outline Style for tabbing through switches | |
| // $switch-label-outline: 1px dotted #888888 | |
| //// | |
| //// Table Variables | |
| //// | |
| //// Background color for the table and even rows | |
| // $table-bg: white | |
| // $table-even-row-bg: #f9f9f9 | |
| //// Table cell border style | |
| // $table-border-style: solid | |
| // $table-border-size: 1px | |
| // $table-border-color: #dddddd | |
| //// Table head styles | |
| // $table-head-bg: whitesmoke | |
| // $table-head-font-size: emCalc(14px) | |
| // $table-head-font-color: #222222 | |
| // $table-head-font-weight: bold | |
| // $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px) | |
| //// Row padding and font styles | |
| // $table-row-padding: emCalc(9px) emCalc(10px) | |
| // $table-row-font-size: emCalc(14px) | |
| // $table-row-font-color: #222222 | |
| // $table-line-height: emCalc(18px) | |
| //// Display and margin of tables | |
| // $table-display: table-cell | |
| // $table-margin-bottom: emCalc(20px) | |
| //// | |
| //// Image Thumbnail Variables | |
| //// | |
| //// Border styles | |
| // $thumb-border-style: solid | |
| // $thumb-border-width: 4px | |
| // $thumb-border-color: white | |
| // $thumb-box-shadow: 0 0 0 1px rgba(black, 0.2) | |
| // $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) | |
| //// Radius and transition speed for thumbs | |
| // $thumb-radius: $global-radius | |
| // $thumb-transition-speed: 200ms | |
| //// | |
| //// Tooltip Variables | |
| //// | |
| // $has-tip-border-bottom: dotted 1px #cccccc | |
| // $has-tip-font-weight: bold | |
| // $has-tip-font-color: #333333 | |
| // $has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) | |
| // $has-tip-font-color-hover: $primary-color | |
| // $has-tip-cursor-type: help | |
| // $tooltip-padding: emCalc(8px) | |
| // $tooltip-bg: black | |
| // $tooltip-font-size: emCalc(15px) | |
| // $tooltip-font-weight: bold | |
| // $tooltip-font-color: white | |
| // $tooltip-line-height: 1.3 | |
| // $tooltip-close-font-size: emCalc(10px) | |
| // $tooltip-close-font-weight: normal | |
| // $tooltip-close-font-color: #888888 | |
| // $tooltip-font-size-sml: emCalc(14px) | |
| // $tooltip-radius: $global-radius | |
| // $tooltip-pip-size: 5px | |
| //// | |
| //// Top Bar Variables | |
| //// | |
| //// Background color for the top bar | |
| // $topbar-bg: #111111 | |
| //// Height and margin | |
| // $topbar-height: 45px | |
| // $topbar-margin-bottom: emCalc(30px) | |
| //// Input height for top bar | |
| // $topbar-input-height: 2.45em | |
| //// Title in the top bar | |
| // $topbar-title-weight: bold | |
| // $topbar-title-font-size: emCalc(17px) | |
| //// Link colors and styles for top-level nav | |
| // $topbar-link-color: white | |
| // $topbar-link-weight: bold | |
| // $topbar-link-font-size: emCalc(13px) | |
| // $topbar-link-hover-lightness: -30% !default | |
| //// Darken by 30% | |
| //// Top bar dropdown elements | |
| // $topbar-dropdown-bg: #333333 | |
| // $topbar-dropdown-link-color: white | |
| // $topbar-dropdown-toggle-size: 5px | |
| // $topbar-dropdown-toggle-color: white | |
| // $topbar-dropdown-toggle-alpha: 0.5 | |
| // $dropdown-label-color: #555555 | |
| //// Top menu icon styles | |
| // $topbar-menu-link-transform: uppercase | |
| // $topbar-menu-link-font-size: emCalc(13px) | |
| // $topbar-menu-link-weight: bold | |
| // $topbar-menu-link-color: white | |
| // $topbar-menu-icon-color: white | |
| // $topbar-menu-link-color-toggled: #888888 | |
| // $topbar-menu-icon-color-toggled: #888888 | |
| //// Transitions and breakpoint styles | |
| // $topbar-transition-speed: 300ms | |
| // $topbar-breakpoint: emCalc(940px) | |
| //// Change to 9999px for always mobile layout | |
| // $topbar-media-query: "only screen and (min-width #{$topbar-breakpoint})" | |
| @import foundation |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment