93 lines
6 KiB
SCSS
93 lines
6 KiB
SCSS
|
// Base
|
||
|
|
$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family
|
||
|
|
$base-font-size: 1em; // Font-size
|
||
|
|
$base-line-height: 1.5; // Line-height
|
||
|
|
$body-margin: 0; // Margin for body
|
||
|
|
$body-bg-color: #f5f5f5; // Body background color
|
||
|
|
$body-color: #222; // Body text color
|
||
|
|
$header-line-height-multiplier: 0.8; // Multiplier for line height of headers
|
||
|
|
$header-margin: 0.7em 0; // Margin for headers
|
||
|
|
$header-font-weight: 500; // Font weight for headers
|
||
|
|
$h1-multiplier: 2; // Header 1 font-sze multiplier
|
||
|
|
$h2-multiplier: 1.5; // Header 2 font-sze multiplier
|
||
|
|
$h3-multiplier: 1.15; // Header 3 font-sze multiplier
|
||
|
|
$h4-multiplier: 1; // Header 4 font-sze multiplier
|
||
|
|
$h5-multiplier: 0.8; // Header 5 font-sze multiplier
|
||
|
|
$h6-multiplier: 0.7; // Header 6 font-sze multiplier
|
||
|
|
$header-small-color: lighten($body-color, 20%); // Header small text color
|
||
|
|
$header-small-font-weight: 200; // Header small font weight
|
||
|
|
$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule
|
||
|
|
$hr-margin: 0.7em 0; // Margin for horizontal rule
|
||
|
|
$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule
|
||
|
|
$small-font-size: 75%; // Font size for small, sub and sup elements
|
||
|
|
$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements
|
||
|
|
$list-margin-top: 0; // Top margin for lists
|
||
|
|
$list-margin-bottom: 0.6em; // Bottom margin for lists
|
||
|
|
$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements
|
||
|
|
$code-padding: 2px 4px; // Padding for code and pre elements
|
||
|
|
$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color
|
||
|
|
$code-border-radius: 4px; // Border radius for code, pre and kbd elements
|
||
|
|
$kbd-bg-color: $body-color; // Kbd background color
|
||
|
|
$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color
|
||
|
|
$a-color: #2678b3; // Hyperlink text color
|
||
|
|
$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color
|
||
|
|
$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color
|
||
|
|
$a-visited-hover-color: $a-color; // Hyperlink visited hover text color
|
||
|
|
$mark-bg-color: #ffff33; // Mark background color
|
||
|
|
$mark-color: $body-color; // Mark text color
|
||
|
|
$sub-bottom: -0.25em; // Sub bottom
|
||
|
|
$sup-top: -0.5em; // Sup top
|
||
|
|
$button-fonts: $base-fonts; // Font-family for buttons and inputs
|
||
|
|
$button-font-size: 100%; // Font size for buttons and inputs
|
||
|
|
$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs
|
||
|
|
$button-margin: 0; // Margin for buttons and inputs
|
||
|
|
$fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style for fieldset
|
||
|
|
$fieldset-border-radius: 4px; // Border radius for fieldset
|
||
|
|
$fieldset-margin: 0 2px; // Margin for fieldset
|
||
|
|
$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset
|
||
|
|
// Button default colors
|
||
|
|
$btn-default-color: #2a2a2a; // Default text color for buttons
|
||
|
|
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
||
|
|
$btn-default-bg-color: #eaeaea; // Default background color for buttons
|
||
|
|
$btn-b-bg-color: #337ab7; // Color for button style 1
|
||
|
|
$btn-g-bg-color: #5cb85c; // Color for button style 2
|
||
|
|
$btn-r-bg-color: #d9534f; // Color for button style 3
|
||
|
|
@import '../scss/mini/base';
|
||
|
|
@import '../scss/mini/button';
|
||
|
|
// Use button mixins to create buttons with default specs.
|
||
|
|
@include make-btn(btn, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65);
|
||
|
|
@include make-btn-style(btn, 'blue', $btn-alt-color, $btn-b-bg-color, darken, 7.5%);
|
||
|
|
@include make-btn-style(btn, 'green', $btn-alt-color, $btn-g-bg-color, darken, 7.5%);
|
||
|
|
@include make-btn-style(btn, 'red', $btn-alt-color, $btn-r-bg-color, darken, 7.5%);
|
||
|
|
@include make-btn-size(btn, lg, 9px 15px, 135%);
|
||
|
|
@include make-btn-size(btn, sm, 4px 8px, 80%);
|
||
|
|
@import '../scss/mini/grid';
|
||
|
|
// Use grid mixin to create grid with default specs.
|
||
|
|
@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);
|
||
|
|
@import '../scss/mini/form';
|
||
|
|
// Use form mixin to create form with default specs.
|
||
|
|
@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em);
|
||
|
|
@import '../scss/mini/table';
|
||
|
|
// Use table mixin to create table with default specs.
|
||
|
|
@include make-tbl(tbl, 1px solid #777, 0, 0.5em, #4e4e4e, #f5f5f5, #ddd, #f4f4f4, #111, hor, bor);
|
||
|
|
@import '../scss/mini/utility';
|
||
|
|
// Use utility mixins to create utility classes with default specs.
|
||
|
|
@include make-thumb(thumb, 0.25em, 1px solid #ccc, 4px);
|
||
|
|
@include make-border-generic(bordered);
|
||
|
|
@include make-border-radial-style(rounded, 4px);
|
||
|
|
@include make-border-radial-style(circle, 50%);
|
||
|
|
@include make-colored-text(txt-blue, $btn-b-bg-color);
|
||
|
|
@include make-colored-text(txt-green, $btn-g-bg-color);
|
||
|
|
@include make-colored-text(txt-red, $btn-r-bg-color);
|
||
|
|
@include make-colored-bg-text(bg-blue, $btn-b-bg-color);
|
||
|
|
@include make-colored-bg-text(bg-green, $btn-g-bg-color);
|
||
|
|
@include make-colored-bg-text(bg-red, $btn-r-bg-color);
|
||
|
|
@include make-caret-down(caret, 0.35em, #222);
|
||
|
|
@include make-close(close, #aaa, pointer, 1.3em, 700, #777);
|
||
|
|
@include make-drags(drg-left, drg-right);
|
||
|
|
@include make-center-block(ct-block);
|
||
|
|
@include make-clearfix(cf);
|
||
|
|
@include make-hidden(hidden);
|
||
|
|
@import '../scss/mini/nav';
|
||
|
|
// Use nav mixin to create nav with default specs.
|
||
|
|
@include make-nav(nav, vertical, fixed, logo, 135%, link, 10px, #fff, #222, lighten, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em);
|