398 lines
13 KiB
SCSS
398 lines
13 KiB
SCSS
// USER VARIABLES
|
|
//
|
|
|
|
//
|
|
// Base 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.
|
|
|
|
// 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 effect the grid breakpoints,
|
|
// set $wm-em-base to $wm-base-font-size and make sure $wm-base-font-size is a px value.
|
|
// $wm-base-font-size: 100%;
|
|
|
|
// $wm-base-line-height is 24px while $wm-base-font-size is 16px
|
|
// $wm-base-line-height: 150%;
|
|
|
|
// This is the default html and body font-size for the base em value.
|
|
// $wm-em-base: 16;
|
|
|
|
// We use these to control various global styles
|
|
// $wm-body-bg: #fff;
|
|
// $wm-body-font-color: #222;
|
|
$wm-body-font-family: Georgia, serif;
|
|
// $wm-body-font-weight: normal;
|
|
// $wm-body-font-style: normal;
|
|
|
|
// We use this to control font-smoothing
|
|
// $wm-font-smoothing: subpixel-antialiased;
|
|
|
|
// We use these to control text direction settings
|
|
// $wm-text-direction: ltr;
|
|
|
|
// NOTE: No need to change this conditional statement, $wm-text-direction variable controls it all.
|
|
// $wm-default-float: left;
|
|
// $wm-opposite-direction: right;
|
|
// @if $wm-text-direction == ltr {
|
|
// $wm-default-float: left;
|
|
// $wm-opposite-direction: right;
|
|
// } @else {
|
|
// $wm-default-float: right;
|
|
// $wm-opposite-direction: left;
|
|
// }
|
|
|
|
// We use this to control whether or not CSS classes come through in the gem files.
|
|
// $wm-include-html-classes: true;
|
|
// $wm-include-print-styles: true;
|
|
// $wm-include-html-global-classes: $wm-include-html-classes;
|
|
|
|
//
|
|
// Global Variables
|
|
//
|
|
|
|
// We use these as default colors throughout
|
|
|
|
// vl - very light
|
|
// l - light
|
|
// d - dark
|
|
// vd - very dark
|
|
|
|
$c-main-1: #2ba6cb;
|
|
$c-main-1-vl: lighten($c-main-1, 20%);
|
|
$c-main-1-l: lighten($c-main-1, 10%);
|
|
$c-main-1-d: darken($c-main-1, 10%);
|
|
$c-main-1-vd: darken($c-main-1, 20%);
|
|
// $c-main-2: #2bcb88;
|
|
// $c-main-2-vl: lighten($c-main-2, 20%);
|
|
// $c-main-2-l: lighten($c-main-2, 10%);
|
|
// $c-main-2-d: darken($c-main-2, 10%);
|
|
// $c-main-2-vd: darken($c-main-2, 20%);
|
|
// $c-main-3: #cb512b;
|
|
// $c-main-3-vl: lighten($c-main-3, 20%);
|
|
// $c-main-3-l: lighten($c-main-3, 10%);
|
|
// $c-main-3-d: darken($c-main-3, 10%);
|
|
// $c-main-3-vd: darken($c-main-3, 20%);
|
|
// $c-grey: #e9e9e9;
|
|
// $c-grey-vl: lighten($c-grey, 20%);
|
|
// $c-grey-l: lighten($c-grey, 10%);
|
|
// $c-grey-d: darken($c-grey, 10%);
|
|
// $c-grey-vd: darken($c-grey, 20%);
|
|
// $c-alert: #c60f13;
|
|
// $c-alert-vl: lighten($c-alert, 20%);
|
|
// $c-alert-l: lighten($c-alert, 10%);
|
|
// $c-alert-d: darken($c-alert, 10%);
|
|
// $c-alert-vd: darken($c-alert, 20%);
|
|
// $c-success: #5da423;
|
|
// $c-success-vl: lighten($c-success, 20%);
|
|
// $c-success-l: lighten($c-success, 10%);
|
|
// $c-success-d: darken($c-success, 10%);
|
|
// $c-success-vd: darken($c-success, 20%);
|
|
|
|
// We use these to make sure border radius matches unless we want it different.
|
|
// $wm-global-radius: 3px;
|
|
// $wm-global-rounded: 1000px;
|
|
|
|
// We use these to control inset shadow shiny edges and depressions.
|
|
// $wm-shiny-edge-size: 0 1px 0;
|
|
// $wm-shiny-edge-color: rgba(#fff, .5);
|
|
// $wm-shiny-edge-active-color: rgba(#000, .2);
|
|
|
|
//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
|
|
// $wm-cursor-crosshair-value: crosshair;
|
|
// $wm-cursor-default-value: default;
|
|
// $wm-cursor-pointer-value: pointer;
|
|
// $wm-cursor-help-value: help;
|
|
// $wm-cursor-text-value: text;
|
|
|
|
//
|
|
// Typography Variables
|
|
//
|
|
|
|
// $wm-include-html-type-classes: $wm-include-html-classes;
|
|
|
|
// We use these to control header font styles
|
|
$wm-header-font-family: 'Roboto Slab', sans-serif;
|
|
// $wm-header-font-weight: bold;
|
|
// $wm-header-font-style: normal;
|
|
$wm-header-font-color: $c-main-1;
|
|
// $wm-header-line-height: 1.4;
|
|
// $wm-header-top-margin: .2em;
|
|
// $wm-header-bottom-margin: .5em;
|
|
// $wm-header-text-rendering: optimizeLegibility;
|
|
|
|
// We use these to control header font sizes
|
|
// $wm-h1-font-size: emCalc(44);
|
|
// $wm-h2-font-size: emCalc(37);
|
|
// $wm-h3-font-size: emCalc(27);
|
|
// $wm-h4-font-size: emCalc(23);
|
|
// $wm-h5-font-size: emCalc(18);
|
|
// $wm-h6-font-size: 1em;
|
|
|
|
// These control how subheaders are styled.
|
|
// $wm-subheader-line-height: 1.4;
|
|
// $wm-subheader-font-color: lighten($wm-header-font-color, 30%);
|
|
// $wm-subheader-font-weight: 300;
|
|
// $wm-subheader-top-margin: .2em;
|
|
// $wm-subheader-bottom-margin: .5em;
|
|
|
|
// A general <small> styling
|
|
// $wm-small-font-size: 60%;
|
|
// $wm-small-font-color: lighten($wm-header-font-color, 30%);
|
|
|
|
// We use these to style paragraphs
|
|
// $wm-paragraph-font-family: inherit;
|
|
// $wm-paragraph-font-weight: normal;
|
|
// $wm-paragraph-font-size: 1em;
|
|
// $wm-paragraph-line-height: 1.6;
|
|
// $wm-paragraph-margin-bottom: emCalc(20);
|
|
// $wm-paragraph-aside-font-size: emCalc(14);
|
|
// $wm-paragraph-aside-line-height: 1.35;
|
|
// $wm-paragraph-aside-font-style: italic;
|
|
// $wm-paragraph-text-rendering: optimizeLegibility;
|
|
|
|
// We use these to style <code> tags
|
|
$wm-code-color: #333;
|
|
$wm-code-font-family: 'Inconsolata', Consolas, 'Liberation Mono', Courier, monospace;
|
|
$wm-code-font-weight: 400;
|
|
|
|
// We use these to style anchors
|
|
// $wm-anchor-text-decoration: none;
|
|
// $wm-anchor-font-color: $c-main-1;
|
|
$wm-anchor-font-color-hover: $c-main-1-vl;
|
|
|
|
// We use these to style the <hr> element
|
|
// $wm-hr-border-width: 1px;
|
|
// $wm-hr-border-style: solid;
|
|
// $wm-hr-border-color: #ddd;
|
|
// $wm-hr-margin: emCalc(20);
|
|
|
|
// We use these to style lists
|
|
// $wm-ulist-style-type: disc;
|
|
// $wm-ulist-style-position: outside;
|
|
// $wm-ulist-side-margin: emCalc(20px);
|
|
// $wm-ulist-nested-margin: emCalc(20px);
|
|
// $wm-olist-style-type: decimal;
|
|
// $wm-olist-style-position: outside;
|
|
// $wm-olist-side-margin: emCalc(25px);
|
|
// $wm-olist-nested-margin: emCalc(25px);
|
|
// $wm-dlist-header-weight: bold;
|
|
// $wm-dlist-header-margin-bottom: .3em;
|
|
// $wm-dlist-margin-bottom: emCalc(12);
|
|
|
|
// We use these to style blockquotes
|
|
// $wm-blockquote-font-color: lighten($wm-header-font-color, 30%);
|
|
// $wm-blockquote-padding: emCalc(9, 20, 0, 19);
|
|
// $wm-blockquote-border: 1px solid #ddd;
|
|
// $wm-blockquote-cite-font-size: emCalc(13);
|
|
// $wm-blockquote-cite-font-color: lighten($wm-header-font-color, 20%);
|
|
// $wm-blockquote-cite-link-color: $wm-blockquote-cite-font-color;
|
|
|
|
// Acronym styles
|
|
// $wm-acronym-underline: 1px dotted #ddd;
|
|
|
|
// We use these to control padding and margin
|
|
// $wm-microformat-padding: emCalc(10, 12);
|
|
// $wm-microformat-margin: emCalc(0, 0, 20, 0);
|
|
|
|
// We use these to control the border styles
|
|
// $wm-microformat-border-width: 1px;
|
|
// $wm-microformat-border-style: solid;
|
|
// $wm-microformat-border-color: #ddd;
|
|
|
|
// We use these to control full name font styles
|
|
// $wm-microformat-fullname-font-weight: bold;
|
|
// $wm-microformat-fullname-font-size: emCalc(15);
|
|
|
|
// We use this to control the summary font styles
|
|
// $wm-microformat-summary-font-weight: bold;
|
|
|
|
// We use this to control abbr padding
|
|
// $wm-microformat-abbr-padding: emCalc(0, 1);
|
|
|
|
// We use this to control abbr font styles
|
|
// $wm-microformat-abbr-font-weight: bold;
|
|
// $wm-microformat-abbr-font-decoration: none;
|
|
|
|
// Control code in <pre><code>
|
|
$wm-include-code-classes: true;
|
|
|
|
// This code control the color in the code
|
|
// $c-code-pre-bg: #111;
|
|
// $c-code-1-n: $c-main-1;
|
|
// $c-code-1-vl: lighten($c-code-1-n, 10%);
|
|
// $c-code-1-l: lighten($c-code-1-n, 5%);
|
|
// $c-code-1-d: darken($c-code-1-n, 5%);
|
|
// $c-code-1-vd: darken($c-code-1-n, 10%);
|
|
// $c-code-2-n: $c-main-2;
|
|
// $c-code-2-vl: lighten($c-code-2-n, 30%);
|
|
// $c-code-2-l: lighten($c-code-2-n, 15%);
|
|
// $c-code-2-d: darken($c-code-2-n, 15%);
|
|
// $c-code-2-vd: darken($c-code-2-n, 30%);
|
|
// $c-code-3-n: $c-main-3;
|
|
// $c-code-3-vl: lighten($c-code-3-n, 30%);
|
|
// $c-code-3-l: lighten($c-code-3-n, 15%);
|
|
// $c-code-3-d: darken($c-code-3-n, 15%);
|
|
// $c-code-3-vd: darken($c-code-3-n, 30%);
|
|
|
|
//
|
|
// Media Queries
|
|
//
|
|
|
|
// $wm-small-screen-min: 0px;
|
|
// $wm-medium-screen-min: 640px;
|
|
// $wm-large-screen-min: 1024px;
|
|
// $wm-xlarge-screen-min: 1440px;
|
|
|
|
// $wm-small-screen-max: $wm-medium-screen-min - 1;
|
|
// $wm-medium-screen-max: $wm-large-screen-min - 1;
|
|
// $wm-large-screen-max: $wm-xlarge-screen-min - 1;
|
|
|
|
// $wm-screen: "only screen";
|
|
// $wm-small-only: "only screen and (min-width: #{$wm-small-screen-min}) and (max-width: #{$wm-small-screen-max})";
|
|
// $wm-small-min: "only screen and (min-width: #{$wm-small-screen-min})";
|
|
// $wm-small-max: "only screen and (max-width: #{$wm-small-screen-max})";
|
|
// $wm-medium-only: "only screen and (min-width: #{$wm-medium-screen-min}) and (max-width: #{$wm-medium-screen-max})";
|
|
// $wm-medium-min: "only screen and (min-width: #{$wm-medium-screen-min})";
|
|
// $wm-medium-max: "only screen and (max-width: #{$wm-medium-screen-max})";
|
|
// $wm-large-only: "only screen and (min-width: #{$wm-large-screen-min}) and (max-width: #{$wm-large-screen-max})";
|
|
// $wm-large-min: "only screen and (min-width: #{$wm-large-screen-min})";
|
|
// $wm-large-max: "only screen and (max-width: #{$wm-large-screen-max})";
|
|
// $wm-xlarge-only: "only screen and (min-width: #{$wm-xlarge-screen-min})";
|
|
// $wm-xlarge-min: "only screen and (min-width: #{$wm-xlarge-screen-min})";
|
|
// $wm-landscape: "only screen and (orientation: landscape)";
|
|
// $wm-portrait: "only screen and (orientation: portrait)";
|
|
|
|
//
|
|
// Grid Variables
|
|
//
|
|
|
|
// $wm-include-html-grid-classes: true;
|
|
$wm-row-width: emCalc(1200px);
|
|
// $wm-column-gutter: emCalc(30px);
|
|
// $wm-total-columns: 12;
|
|
|
|
//
|
|
// Button Variables
|
|
//
|
|
|
|
// $wm-include-html-button-classes: $wm-include-html-classes;
|
|
|
|
// We use these to build padding for buttons.
|
|
// $wm-button-med: emCalc(12);
|
|
// $wm-button-tny: emCalc(7);
|
|
// $wm-button-sml: emCalc(9);
|
|
// $wm-button-lrg: emCalc(16);
|
|
|
|
// We use this to control the display property.
|
|
// $wm-button-display: inline-block;
|
|
// $wm-button-margin-bottom: emCalc(20);
|
|
|
|
// We use these to control button text styles.
|
|
// $wm-button-font-family: inherit;
|
|
// $wm-button-font-color: #fff;
|
|
// $wm-button-font-color-alt: #333;
|
|
// $wm-button-font-med: emCalc(16);
|
|
// $wm-button-font-tny: emCalc(11);
|
|
// $wm-button-font-sml: emCalc(13);
|
|
// $wm-button-font-lrg: emCalc(20);
|
|
// $wm-button-font-weight: bold;
|
|
// $wm-button-font-align: center;
|
|
|
|
// We use these to control various hover effects.
|
|
// $wm-button-function-factor: 10%;
|
|
|
|
// We use these to control button border styles.
|
|
// $wm-button-border-width: 1px;
|
|
// $wm-button-border-style: solid;
|
|
|
|
// We use this to set the default radius used throughout the core.
|
|
// $wm-button-radius: $wm-global-radius;
|
|
// $wm-button-round: $wm-global-rounded;
|
|
|
|
// We use this to set default opacity for disabled buttons.
|
|
// $wm-button-disabled-opacity: 0.6;
|
|
|
|
//
|
|
// Form Variables
|
|
//
|
|
|
|
// $wm-include-html-form-classes: $wm-include-html-classes;
|
|
|
|
// We use this to set the base for lots of form spacing and positioning styles
|
|
// $wm-form-spacing: emCalc(16);
|
|
|
|
// We use these to style the labels in different ways
|
|
// $wm-form-label-pointer: pointer;
|
|
// $wm-form-label-font-size: emCalc(14);
|
|
// $wm-form-label-font-weight: 500;
|
|
// $wm-form-label-font-color: lighten(#000, 30%);
|
|
// $wm-form-label-bottom-margin: emCalc(3);
|
|
// $wm-input-font-family: inherit;
|
|
// $wm-input-font-color: rgba(0,0,0,0.75);
|
|
// $wm-input-font-size: emCalc(14);
|
|
// $wm-input-bg-color: #fff;
|
|
// $wm-input-focus-bg-color: darken(#fff, 2%);
|
|
// $wm-input-border-color: darken(#fff, 20%);
|
|
// $wm-input-focus-border-color: darken(#fff, 40%);
|
|
// $wm-input-border-style: solid;
|
|
// $wm-input-border-width: 1px;
|
|
// $wm-input-disabled-bg: #ddd;
|
|
// $wm-input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
|
// $wm-input-include-glowing-effect: true;
|
|
|
|
// We use these to style the select form element.
|
|
// $wm-select-bg: #fff;
|
|
// $wm-select-fade-to-color: #f3f3f3;
|
|
// $wm-select-border-color: $wm-input-border-color;
|
|
// $wm-select-triangle-color: #aaa;
|
|
// $wm-select-triangle-color-open: #222;
|
|
// $wm-select-height: emCalc(13) + ($wm-form-spacing * 1.5);
|
|
// $wm-select-margin-bottom: emCalc(20);
|
|
// $wm-select-font-color-selected: #141414;
|
|
// $wm-select-disabled-color: #888;
|
|
// $wm-select-font-size: $wm-input-font-size;
|
|
// $wm-select-width-small: 134px;
|
|
// $wm-select-width-medium: 254px;
|
|
// $wm-select-width-large: 434px;
|
|
|
|
// We use these to style the fieldset border and spacing.
|
|
// $wm-fieldset-border-style: solid;
|
|
// $wm-fieldset-border-width: 1px;
|
|
// $wm-fieldset-border-color: #ddd;
|
|
// $wm-fieldset-padding: emCalc(20);
|
|
// $wm-fieldset-margin: emCalc(18, 0);
|
|
|
|
// We use these to style the legends when you use them
|
|
// $wm-legend-bg: #fff;
|
|
// $wm-legend-font-weight: bold;
|
|
// $wm-legend-padding: emCalc(0, 3);
|
|
|
|
// We use these to style the prefix and postfix input elements
|
|
// $wm-input-prefix-bg: darken(#fff, 5%);
|
|
// $wm-input-prefix-border-color: darken(#fff, 20%);
|
|
// $wm-input-prefix-border-size: 1px;
|
|
// $wm-input-prefix-border-type: solid;
|
|
// $wm-input-prefix-overflow: hidden;
|
|
// $wm-input-prefix-font-color: #333;
|
|
// $wm-input-prefix-font-color-alt: #fff;
|
|
|
|
// We use these to style the error states for inputs and labels
|
|
// $wm-input-error-message-padding: emCalc(6, 4);
|
|
// $wm-input-error-message-top: -($wm-form-spacing) - emCalc(5);
|
|
// $wm-input-error-message-font-size: emCalc(12);
|
|
// $wm-input-error-message-font-weight: bold;
|
|
// $wm-input-error-message-font-color: #fff;
|
|
// $wm-input-error-message-font-color-alt: #333;
|
|
|
|
// We use this to style the glowing effect of inputs when focused
|
|
// $wm-glowing-effect-fade-time: 0.45s;
|
|
// $wm-glowing-effect-color: $wm-input-focus-border-color;
|
|
|
|
//
|
|
// Visibility
|
|
//
|
|
|
|
// $wm-include-html-visibility-classes: $wm-include-html-classes;
|