|
|
@@ -13,7 +13,7 @@ |
|
|
// $experimental: true; |
|
|
|
|
|
// 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. |
|
|
// for compatibility with browser-based text zoom or user-set defaults. |
|
|
|
|
|
// 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 different and not have it affect the grid breakpoints, |
|
|
@@ -34,6 +34,7 @@ $rem-base: 16px; |
|
|
// Grid |
|
|
|
|
|
// $include-html-grid-classes: $include-html-classes; |
|
|
// $include-xl-html-grid-classes: false; |
|
|
|
|
|
$row-width: rem-calc(1200); |
|
|
$column-gutter: rem-calc(20); |
|
|
@@ -103,42 +104,54 @@ $global-radius: 5px; |
|
|
// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; |
|
|
// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; |
|
|
|
|
|
// Legacy |
|
|
// $small: $medium-up; |
|
|
// $medium: $medium-up; |
|
|
// $large: $large-up; |
|
|
|
|
|
//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet |
|
|
// $cursor-crosshair-value: crosshair; |
|
|
// $cursor-default-value: default; |
|
|
// $cursor-pointer-value: pointer; |
|
|
// $cursor-help-value: help; |
|
|
// $cursor-text-value: text; |
|
|
|
|
|
// |
|
|
// Typography Variables |
|
|
// TYPOGRAPHY |
|
|
// |
|
|
|
|
|
// Control header font styles |
|
|
// $include-html-type-classes: $include-html-classes; |
|
|
|
|
|
// We use these to control header font styles |
|
|
$header-font-family: 'Open Sans', sans-serif; |
|
|
$header-font-weight: 400; |
|
|
// $header-font-style: normal; |
|
|
// $header-font-color: #222; |
|
|
// $header-line-height: 1.4; |
|
|
// $header-top-margin: .2em; |
|
|
// $header-bottom-margin: .5em; |
|
|
// $header-top-margin: .2rem; |
|
|
// $header-bottom-margin: .5rem; |
|
|
// $header-text-rendering: optimizeLegibility; |
|
|
|
|
|
// Control header font sizes |
|
|
|
|
|
// We use these to control header font sizes |
|
|
$h1-font-size: rem-calc(34); |
|
|
$h2-font-size: rem-calc(28); |
|
|
$h3-font-size: rem-calc(24); |
|
|
$h4-font-size: rem-calc(20); |
|
|
$h5-font-size: rem-calc(18); |
|
|
$h6-font-size: rem-calc(14); |
|
|
|
|
|
// Control how subheaders are styled. |
|
|
|
|
|
// These control how subheaders are styled. |
|
|
// $subheader-line-height: 1.4; |
|
|
// $subheader-font-color: lighten($header-font-color, 30%); |
|
|
// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); |
|
|
// $subheader-font-weight: 300; |
|
|
// $subheader-top-margin: .2em; |
|
|
// $subheader-bottom-margin: .5em; |
|
|
// $subheader-top-margin: .2rem; |
|
|
// $subheader-bottom-margin: .5rem; |
|
|
|
|
|
// A general <small> styling |
|
|
// $small-font-size: 60%; |
|
|
// $small-font-color: scale-color($header-font-color, $lightness: 35%); |
|
|
|
|
|
// Style paragraphs |
|
|
|
|
|
// We use these to style paragraphs |
|
|
// $paragraph-font-family: inherit; |
|
|
// $paragraph-font-weight: inherit; |
|
|
// $paragraph-font-size: 1em; |
|
|
@@ -149,33 +162,65 @@ $paragraph-margin-bottom: rem-calc(28); |
|
|
// $paragraph-aside-font-style: italic; |
|
|
// $paragraph-text-rendering: optimizeLegibility; |
|
|
|
|
|
// We use these to style <code> tags |
|
|
// $code-color: scale-color($alert-color, $lightness: -27%); |
|
|
// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace; |
|
|
// $code-font-weight: bold; |
|
|
|
|
|
// Style the <hr> element |
|
|
// We use these to style anchors |
|
|
// $anchor-text-decoration: none; |
|
|
// $anchor-font-color: $primary-color; |
|
|
// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%); |
|
|
|
|
|
// We use these to style the <hr> element |
|
|
// $hr-border-width: 1px; |
|
|
$hr-border-style: dotted; |
|
|
$hr-border-color: $border-color; |
|
|
$hr-margin: rem-calc(30); |
|
|
|
|
|
// We use these to style lists |
|
|
// $list-style-position: outside !default; |
|
|
// $list-style-position: outside; |
|
|
$list-side-margin: 2rem; |
|
|
$list-ordered-side-margin: 2rem; |
|
|
// $list-side-margin-no-bullet: 0 !default; |
|
|
// $list-nested-margin: rem-calc(20) !default; |
|
|
// $list-side-margin-no-bullet: 0; |
|
|
// $list-nested-margin: rem-calc(20); |
|
|
// $definition-list-header-weight: bold; |
|
|
// $definition-list-header-margin-bottom: .3rem; |
|
|
// $definition-list-margin-bottom: rem-calc(12); |
|
|
|
|
|
// We use these to style blockquotes |
|
|
// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); |
|
|
// $blockquote-padding: rem-calc(9 20 0 19); |
|
|
// $blockquote-border: 1px solid #ddd; |
|
|
// $blockquote-cite-font-size: rem-calc(13); |
|
|
// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); |
|
|
// $blockquote-cite-link-color: $blockquote-cite-font-color; |
|
|
|
|
|
// Acronym styles |
|
|
// $acronym-underline: 1px dotted #ddd; |
|
|
|
|
|
// We use these to control padding and margin |
|
|
// $microformat-padding: rem-calc(10 12); |
|
|
// $microformat-margin: rem-calc(0 0 20 0); |
|
|
|
|
|
// We use these to control the border styles |
|
|
// $microformat-border-width: 1px; |
|
|
// $microformat-border-style: solid; |
|
|
// $microformat-border-color: #ddd; |
|
|
|
|
|
// Legacy |
|
|
// $small: $medium-up; |
|
|
// $medium: $medium-up; |
|
|
// $large: $large-up; |
|
|
// We use these to control full name font styles |
|
|
// $microformat-fullname-font-weight: bold; |
|
|
// $microformat-fullname-font-size: rem-calc(15); |
|
|
|
|
|
// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet |
|
|
// $cursor-crosshair-value: crosshair; |
|
|
// $cursor-default-value: default; |
|
|
// $cursor-pointer-value: pointer; |
|
|
// $cursor-help-value: help; |
|
|
// $cursor-text-value: text; |
|
|
// We use this to control the summary font styles |
|
|
// $microformat-summary-font-weight: bold; |
|
|
|
|
|
// We use this to control abbr padding |
|
|
// $microformat-abbr-padding: rem-calc(0 1); |
|
|
|
|
|
// We use this to control abbr font styles |
|
|
// $microformat-abbr-font-weight: bold; |
|
|
// $microformat-abbr-font-decoration: none; |
|
|
|
|
|
// Accordion |
|
|
|
|
|
@@ -443,8 +488,9 @@ $button-margin-bottom: rem-calc(10); |
|
|
// $form-label-pointer: pointer; |
|
|
// $form-label-font-size: rem-calc(14); |
|
|
// $form-label-font-weight: normal; |
|
|
// $form-label-line-height: 1.5; |
|
|
// $form-label-font-color: scale-color(#000, $lightness: 30%); |
|
|
// $form-label-bottom-margin: rem-calc(8); |
|
|
// $form-label-bottom-margin: 0; |
|
|
// $input-font-family: inherit; |
|
|
// $input-font-color: rgba(0,0,0,0.75); |
|
|
// $input-font-size: rem-calc(14); |
|
|
@@ -454,6 +500,7 @@ $button-margin-bottom: rem-calc(10); |
|
|
// $input-focus-border-color: scale-color(#fff, $lightness: -40%); |
|
|
// $input-border-style: solid; |
|
|
// $input-border-width: 1px; |
|
|
// $input-border-radius: $global-radius; |
|
|
// $input-disabled-bg: #ddd; |
|
|
// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); |
|
|
// $input-include-glowing-effect: true; |
|
|
@@ -864,7 +911,8 @@ $button-margin-bottom: rem-calc(10); |
|
|
|
|
|
// We use these to control link styles. |
|
|
// $side-nav-link-color: $primary-color; |
|
|
// $side-nav-link-color-active: scale-color(#000, $lightness: 30%); |
|
|
// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%); |
|
|
// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%); |
|
|
// $side-nav-font-size: rem-calc(14); |
|
|
// $side-nav-font-weight: normal; |
|
|
// $side-nav-font-family: $body-font-family; |
|
|
@@ -1075,6 +1123,7 @@ $button-margin-bottom: rem-calc(10); |
|
|
// $tooltip-close-font-color: #777; |
|
|
// $tooltip-font-size-sml: rem-calc(14); |
|
|
// $tooltip-radius: $global-radius; |
|
|
// $tooltip-rounded: $global-rounded; |
|
|
// $tooltip-pip-size: 5px; |
|
|
|
|
|
// |
|
|
@@ -1108,15 +1157,19 @@ $button-margin-bottom: rem-calc(10); |
|
|
// $topbar-link-color: #fff; |
|
|
// $topbar-link-color-hover: #fff; |
|
|
// $topbar-link-color-active: #fff; |
|
|
// $topbar-link-color-active-hover: #fff; |
|
|
// $topbar-link-weight: normal; |
|
|
// $topbar-link-font-size: rem-calc(13); |
|
|
// $topbar-link-hover-lightness: -10%; // Darken by 10% |
|
|
// $topbar-link-bg-hover: #272727 ; |
|
|
// $topbar-link-bg-hover: #272727; |
|
|
// $topbar-link-bg-active: $primary-color; |
|
|
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); |
|
|
// $topbar-link-font-family: $body-font-family; |
|
|
// $topbar-link-text-transform: none; |
|
|
// $topbar-link-padding: $topbar-height / 3; |
|
|
|
|
|
// $topbar-button-font-size: 0.75rem; |
|
|
// $topbar-button-top: 7px; |
|
|
|
|
|
// $topbar-dropdown-label-color: #777; |
|
|
// $topbar-dropdown-label-text-transform: uppercase; |
|
|
@@ -1146,3 +1199,11 @@ $button-margin-bottom: rem-calc(10); |
|
|
// Sticky Class |
|
|
// $topbar-sticky-class: ".sticky"; |
|
|
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item |
|
|
|
|
|
// |
|
|
// VISIBILITY CLASSES |
|
|
// |
|
|
|
|
|
// $include-html-visibility-classes: $include-html-classes; |
|
|
// $include-table-visibility-classes: true; |
|
|
// $include-legacy-visibility-classes: true; |
