Bootstrap flavor - base
This commit is contained in:
Angelos Chalaris
parent
ea8dfcc09f
commit
d05cd28c56
|
|
@ -3,21 +3,122 @@
|
|||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.1 (October, 2016)
|
||||
*/
|
||||
/*
|
||||
Image thumbnail style mixin. [1]
|
||||
Parameters:
|
||||
- $thumb-name : The class name for the thumbnail style.
|
||||
- $thumb-padding : The padding between the image and the border.
|
||||
- $thumb-border : The style of the thumbnail's border.
|
||||
- $thumb-border-radius : The border radius of the thumbnail.
|
||||
- $thumb-hover-color : The color of the thumbnail's border when hovering over it.
|
||||
Notes:
|
||||
- [1] : This style only applies to `img` elements with the class specified in
|
||||
`$thumb-name`.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic border style.
|
||||
Parameters:
|
||||
- $border-generic-name : The class name for the generic border.
|
||||
Notes:
|
||||
- [1] : The border style uses rgba to create a 1px solid border with 0.25
|
||||
opacity around an element, which makes it look properly bordered.
|
||||
Might be incompatible with older browsers.
|
||||
- [2] : The border style overwrites any border style as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic border radius styles.
|
||||
Parameters:
|
||||
- $border-style-name : The class name for the generic border radius style.
|
||||
- $border-style-radius : The radius for the generic border radius style.
|
||||
Notes:
|
||||
- [1] : The border style overwrites any border style as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic contextual color text styles.
|
||||
Parameters:
|
||||
- $colored-text-name : The class name for the contextual color text style.
|
||||
- $colored-text-color : The color for the contextual color text style.
|
||||
Notes:
|
||||
- [1] : The contextual color text style overwrites any text color as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic contextual background text styles.
|
||||
Parameters:
|
||||
- $colored-bg-text-name : The class name for the contextual background text style.
|
||||
- $colored-bg-text-color : The background color for the contextual background text style.
|
||||
Notes:
|
||||
- [1] : The contextual background text style overwrites any text color as it
|
||||
uses `!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for simple caret utility class.
|
||||
Parameters:
|
||||
- $caret-name : The class name for caret utility class.
|
||||
- $caret-size : The size of the caret utility element. [1]
|
||||
- $caret-color : The color of the caret utility element.
|
||||
Notes:
|
||||
- [1] : The caret is built using the border trick. Sizes can be specified
|
||||
in either `px` or `em`, but they might take a bit of tweaking to
|
||||
get right.
|
||||
*/
|
||||
/*
|
||||
Mixin for simple close sign utility class.
|
||||
Parameters:
|
||||
- $close-name : The class name for close utility class.
|
||||
- $close-color : The color of the close utility element.
|
||||
- $close-cursor : The cursor for the close utility element.
|
||||
- $close-font-size : The font-size for the close utility element.
|
||||
- $close-font-weight : The font-weight for the close utility element.
|
||||
- $close-hover-color : The color of the close utility element when hovering over it.
|
||||
*/
|
||||
/*
|
||||
Mixin for quick float classes. [1]
|
||||
Parameters:
|
||||
- $drag-left-name : The class name for left drags.
|
||||
- $drag-right-name : The class name for right drags.
|
||||
Notes:
|
||||
- [1] : These classes use `!important` to set the float properties,
|
||||
exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for center block class.
|
||||
Parameters:
|
||||
- $center-block-name : The class name for center block class.
|
||||
*/
|
||||
/*
|
||||
Mixin for clearfix class.
|
||||
Parameters:
|
||||
- $clearfix-name : The class name for the clearfix class.
|
||||
*/
|
||||
/*
|
||||
Mixin for hidden class. [1]
|
||||
Parameters:
|
||||
- $hidden-name : The class name for hidden elements.
|
||||
Notes:
|
||||
- [1] : This class uses `!important` to set the display property,
|
||||
exercise caution when using.
|
||||
*/
|
||||
pre {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25); }
|
||||
|
||||
/*
|
||||
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
Set body colors and margin.
|
||||
*/
|
||||
html {
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: #222;
|
||||
background-color: #f5f5f5; }
|
||||
color: #333;
|
||||
background-color: #fff; }
|
||||
|
||||
/*
|
||||
Correct display in IE 9-.
|
||||
|
|
@ -36,30 +137,30 @@ figure {
|
|||
Styles for headers.
|
||||
*/
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2;
|
||||
margin: 0.7em 0;
|
||||
line-height: 1.1;
|
||||
margin: 0;
|
||||
font-weight: 500; }
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
color: #555555;
|
||||
font-weight: 200; }
|
||||
color: #777;
|
||||
font-weight: 400; }
|
||||
|
||||
h1 {
|
||||
font-size: 2em; }
|
||||
font-size: 36px; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em; }
|
||||
font-size: 30px; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.15em; }
|
||||
font-size: 24.0px; }
|
||||
|
||||
h4 {
|
||||
font-size: 1em; }
|
||||
font-size: 18.0px; }
|
||||
|
||||
h5 {
|
||||
font-size: 0.8em; }
|
||||
font-size: 14px; }
|
||||
|
||||
h6 {
|
||||
font-size: 0.7em; }
|
||||
font-size: 12px; }
|
||||
|
||||
/*
|
||||
Correct box-sizing in Firefox.
|
||||
|
|
@ -67,30 +168,30 @@ h6 {
|
|||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
line-height: 1.2;
|
||||
line-height: 1.14286;
|
||||
margin: 0.7em 0;
|
||||
height: 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #cfcfcf; }
|
||||
border-top: 1px solid #d9d9d9; }
|
||||
|
||||
/*
|
||||
Style for all small text and size for sub and sup.
|
||||
*/
|
||||
small, sub, sup {
|
||||
font-size: 75%; }
|
||||
font-size: 80%; }
|
||||
|
||||
/*
|
||||
Style for paragraph and preformatted elements.
|
||||
*/
|
||||
p, pre {
|
||||
margin: 0 0 0.6em; }
|
||||
margin: 0 0 10px; }
|
||||
|
||||
/*
|
||||
Style for lists.
|
||||
*/
|
||||
ul, ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.6em; }
|
||||
margin-bottom: 10px; }
|
||||
ul ul, ul ol, ol ul, ol ol {
|
||||
margin-bottom: 0; }
|
||||
|
||||
|
|
@ -98,19 +199,19 @@ ul, ol {
|
|||
Styles for code and preformatted.
|
||||
*/
|
||||
samp, kbd, code, pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em; }
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 14px; }
|
||||
|
||||
kbd, code, pre {
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px; }
|
||||
|
||||
code, pre {
|
||||
background-color: gainsboro; }
|
||||
background-color: #f9f2f4; }
|
||||
|
||||
kbd {
|
||||
color: #fefefe;
|
||||
background-color: #222; }
|
||||
color: #fff;
|
||||
background-color: #333; }
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
|
|
@ -132,14 +233,14 @@ pre {
|
|||
a {
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
color: #2678b3; }
|
||||
color: #337ab7; }
|
||||
a:active, a:hover {
|
||||
outline-width: 0;
|
||||
color: #3793d5; }
|
||||
color: #23527c; }
|
||||
a:visited {
|
||||
color: #1d5c89; }
|
||||
color: #337ab7; }
|
||||
a:visited:active, a:visited:hover {
|
||||
color: #2678b3; }
|
||||
color: #23527c; }
|
||||
|
||||
/*
|
||||
Prevent the duplicate application of `bolder` in Safari 6.
|
||||
|
|
@ -172,8 +273,8 @@ abbr[title] {
|
|||
Style for mark.
|
||||
*/
|
||||
mark {
|
||||
background-color: #ffff33;
|
||||
color: #222; }
|
||||
background-color: #fcf8e3;
|
||||
color: #333; }
|
||||
|
||||
/*
|
||||
Styling for hidden elements.
|
||||
|
|
@ -234,9 +335,9 @@ button, input, hr {
|
|||
Style for buttons and input elements.
|
||||
*/
|
||||
button, input, optgroup, select, textarea {
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
line-height: 1.2;
|
||||
line-height: 1.14286;
|
||||
margin: 0; }
|
||||
|
||||
/*
|
||||
|
|
@ -260,10 +361,10 @@ button, html [type="button"], [type="reset"], [type="submit"] {
|
|||
Style for fieldset.
|
||||
*/
|
||||
fieldset {
|
||||
border: 1px solid #cfcfcf;
|
||||
border-radius: 4px;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.65em 0.75em; }
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
/*
|
||||
Add correct box sizing and remove padding in IE 10-.
|
||||
|
|
@ -686,8 +787,8 @@ textarea {
|
|||
.frm input:invalid, .frm input:focus:invalid, .frm input:focus:invalid:focus, .frm select:invalid, .frm select:focus:invalid, .frm select:focus:invalid:focus, .frm textarea:invalid, .frm textarea:focus:invalid, .frm textarea:focus:invalid:focus {
|
||||
border-color: #e9322d; }
|
||||
.frm input[readonly], .frm select[readonly], .frm textarea[readonly] {
|
||||
background-color: gainsboro;
|
||||
border-color: #b5b5b5; }
|
||||
background-color: #e6e6e6;
|
||||
border-color: #bfbfbf; }
|
||||
.frm input[type="checkbox"], .frm input[type="radio"] {
|
||||
display: inline-block; }
|
||||
.frm select {
|
||||
|
|
@ -882,111 +983,13 @@ textarea {
|
|||
padding: 8px 0; }
|
||||
input[type="checkbox"]:checked + .nav.fixed + label:before {
|
||||
content: '\00d7'; } }
|
||||
/*
|
||||
Image thumbnail style mixin. [1]
|
||||
Parameters:
|
||||
- $thumb-name : The class name for the thumbnail style.
|
||||
- $thumb-padding : The padding between the image and the border.
|
||||
- $thumb-border : The style of the thumbnail's border.
|
||||
- $thumb-border-radius : The border radius of the thumbnail.
|
||||
- $thumb-hover-color : The color of the thumbnail's border when hovering over it.
|
||||
Notes:
|
||||
- [1] : This style only applies to `img` elements with the class specified in
|
||||
`$thumb-name`.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic border style.
|
||||
Parameters:
|
||||
- $border-generic-name : The class name for the generic border.
|
||||
Notes:
|
||||
- [1] : The border style uses rgba to create a 1px solid border with 0.25
|
||||
opacity around an element, which makes it look properly bordered.
|
||||
Might be incompatible with older browsers.
|
||||
- [2] : The border style overwrites any border style as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic border radius styles.
|
||||
Parameters:
|
||||
- $border-style-name : The class name for the generic border radius style.
|
||||
- $border-style-radius : The radius for the generic border radius style.
|
||||
Notes:
|
||||
- [1] : The border style overwrites any border style as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic contextual color text styles.
|
||||
Parameters:
|
||||
- $colored-text-name : The class name for the contextual color text style.
|
||||
- $colored-text-color : The color for the contextual color text style.
|
||||
Notes:
|
||||
- [1] : The contextual color text style overwrites any text color as it uses
|
||||
`!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for generic contextual background text styles.
|
||||
Parameters:
|
||||
- $colored-bg-text-name : The class name for the contextual background text style.
|
||||
- $colored-bg-text-color : The background color for the contextual background text style.
|
||||
Notes:
|
||||
- [1] : The contextual background text style overwrites any text color as it
|
||||
uses `!important`, exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for simple caret utility class.
|
||||
Parameters:
|
||||
- $caret-name : The class name for caret utility class.
|
||||
- $caret-size : The size of the caret utility element. [1]
|
||||
- $caret-color : The color of the caret utility element.
|
||||
Notes:
|
||||
- [1] : The caret is built using the border trick. Sizes can be specified
|
||||
in either `px` or `em`, but they might take a bit of tweaking to
|
||||
get right.
|
||||
*/
|
||||
/*
|
||||
Mixin for simple close sign utility class.
|
||||
Parameters:
|
||||
- $close-name : The class name for close utility class.
|
||||
- $close-color : The color of the close utility element.
|
||||
- $close-cursor : The cursor for the close utility element.
|
||||
- $close-font-size : The font-size for the close utility element.
|
||||
- $close-font-weight : The font-weight for the close utility element.
|
||||
- $close-hover-color : The color of the close utility element when hovering over it.
|
||||
*/
|
||||
/*
|
||||
Mixin for quick float classes. [1]
|
||||
Parameters:
|
||||
- $drag-left-name : The class name for left drags.
|
||||
- $drag-right-name : The class name for right drags.
|
||||
Notes:
|
||||
- [1] : These classes use `!important` to set the float properties,
|
||||
exercise caution when using.
|
||||
*/
|
||||
/*
|
||||
Mixin for center block class.
|
||||
Parameters:
|
||||
- $center-block-name : The class name for center block class.
|
||||
*/
|
||||
/*
|
||||
Mixin for clearfix class.
|
||||
Parameters:
|
||||
- $clearfix-name : The class name for the clearfix class.
|
||||
*/
|
||||
/*
|
||||
Mixin for hidden class. [1]
|
||||
Parameters:
|
||||
- $hidden-name : The class name for hidden elements.
|
||||
Notes:
|
||||
- [1] : This class uses `!important` to set the display property,
|
||||
exercise caution when using.
|
||||
*/
|
||||
img.thumb {
|
||||
padding: 0.25em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
img.thumb:hover, img.thumb:focus, img.thumbactive {
|
||||
border-color: #2678b3; }
|
||||
border-color: #337ab7; }
|
||||
|
||||
.bordered {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
||||
|
|
@ -1162,13 +1165,13 @@ img.thumb {
|
|||
left: 1px;
|
||||
height: 40px;
|
||||
padding: 8px 14px;
|
||||
color: #2678b3;
|
||||
background-color: #f5f5f5;
|
||||
color: #337ab7;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px 4px 0 0;
|
||||
cursor: pointer; }
|
||||
.tabs input[type="radio"] + div > label:hover, .tabs input[type="radio"] + div > label:active, .tabs input[type="radio"] + div > label:focus {
|
||||
background: gainsboro; }
|
||||
background: #e6e6e6; }
|
||||
.tabs input[type="radio"] + div > label + div {
|
||||
position: absolute;
|
||||
z-index: -2;
|
||||
|
|
@ -1180,9 +1183,9 @@ img.thumb {
|
|||
background: #fff;
|
||||
border: 1px solid #ccc; }
|
||||
.tabs input[type="radio"]:checked + div > label {
|
||||
color: #222;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
border-top: 3px solid #2678b3;
|
||||
border-top: 3px solid #337ab7;
|
||||
border-bottom: 1px solid #fff; }
|
||||
.tabs input[type="radio"]:checked + div > label + div {
|
||||
position: absolute;
|
||||
|
|
@ -1236,8 +1239,8 @@ img.thumb {
|
|||
z-index: 998;
|
||||
position: relative;
|
||||
width: 45%;
|
||||
color: #222;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
margin: 8.5% auto 0;
|
||||
padding: 18px;
|
||||
border: 1px solid #ccc;
|
||||
|
|
@ -1329,7 +1332,7 @@ input[type="checkbox"].clps {
|
|||
display: none; }
|
||||
input[type="checkbox"].clps + div {
|
||||
display: none;
|
||||
color: #222;
|
||||
color: #333;
|
||||
background-color: #eeeeee;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
|
|
@ -1343,7 +1346,7 @@ input[type="radio"].acrd {
|
|||
input[type="radio"].acrd + label {
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: #222;
|
||||
color: #333;
|
||||
background-color: #eeeeee;
|
||||
padding: 8px;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -1354,8 +1357,8 @@ input[type="radio"].acrd {
|
|||
background-color: #dbdbdb; }
|
||||
input[type="radio"].acrd + label + div {
|
||||
display: none;
|
||||
color: #222;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -1529,8 +1532,8 @@ input[type="radio"]:checked.acrd + label {
|
|||
overflow: auto;
|
||||
left: 0;
|
||||
top: 340px;
|
||||
background-color: #222;
|
||||
color: #f5f5f5;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
opacity: 0.1; }
|
||||
.carousel input[type="radio"] + div > div:hover, .carousel input[type="radio"] + div > div:active, .carousel input[type="radio"] + div > div:focus {
|
||||
opacity: 0.8; }
|
||||
|
|
@ -1657,7 +1660,7 @@ input[type="radio"]:checked.acrd + label {
|
|||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #e7e7e7;
|
||||
color: #222;
|
||||
color: #333;
|
||||
padding: 20px; }
|
||||
|
||||
.alert-blue + div {
|
||||
|
|
@ -1750,8 +1753,8 @@ input[type="checkbox"]:checked.alert-red + div {
|
|||
.panel {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f5f5f5;
|
||||
color: #222;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 0; }
|
||||
|
||||
.panel > * {
|
||||
|
|
@ -1759,7 +1762,7 @@ input[type="checkbox"]:checked.alert-red + div {
|
|||
.panel .head {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #222;
|
||||
color: #333;
|
||||
background-color: #e7e7e7;
|
||||
padding: 10px;
|
||||
margin: 0; }
|
||||
|
|
@ -1771,8 +1774,8 @@ input[type="checkbox"].popover-top {
|
|||
input[type="checkbox"].popover-top + label > .popover-top {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: #222;
|
||||
color: #f5f5f5;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 7px 10px;
|
||||
z-index: 998;
|
||||
|
|
@ -1781,7 +1784,7 @@ input[type="checkbox"].popover-top {
|
|||
input[type="checkbox"].popover-top + label > .popover-top:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-top: 7px solid #222;
|
||||
border-top: 7px solid #333;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
bottom: -7px;
|
||||
|
|
@ -1798,8 +1801,8 @@ input[type="checkbox"].popover-bottom {
|
|||
input[type="checkbox"].popover-bottom + label > .popover-bottom {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: #222;
|
||||
color: #f5f5f5;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 7px 10px;
|
||||
z-index: 998;
|
||||
|
|
@ -1808,7 +1811,7 @@ input[type="checkbox"].popover-bottom {
|
|||
input[type="checkbox"].popover-bottom + label > .popover-bottom:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-bottom: 7px solid #222;
|
||||
border-bottom: 7px solid #333;
|
||||
border-right: 7px solid transparent;
|
||||
border-left: 7px solid transparent;
|
||||
top: -7px;
|
||||
|
|
|
|||
2
flavors/mini-bootstrap.min.css
vendored
2
flavors/mini-bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -21,61 +21,90 @@
|
|||
//====================================================================
|
||||
// Variable definitions for the Base module (_base.scss)
|
||||
//====================================================================
|
||||
// Pre-enable utilities (_utility.scss).
|
||||
// --- NOTES: ---
|
||||
// The utility module is pre enabled in order for certain elements to
|
||||
// use certain utility mixins.
|
||||
// -------------------
|
||||
@import '../scss/mini/utility';
|
||||
// Basic rules for body
|
||||
$body-margin: 0; // Margin for body
|
||||
$body-bg-color: #f5f5f5; // Body background color
|
||||
$body-color: #222; // Body text color
|
||||
$body-bg-color: #fff; // Body background color
|
||||
$body-color: #333; // Body text color
|
||||
// Basic typography rules
|
||||
$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family
|
||||
$base-font-size: 1em; // Font-size
|
||||
$base-line-height: 1.5; // Line-height
|
||||
$base-fonts: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"; // Font-family
|
||||
$base-font-size: 14px; // Font-size
|
||||
$base-line-height: 1.42857143; // Line-height
|
||||
// Rules for headers (multipliers apply on top of the basic typography rules)
|
||||
$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-line-height-multiplier: 0.8; // Multiplier for line height of headers
|
||||
$header-margin: 0.7em 0; // Margin for headers
|
||||
// --- NOTES: ---
|
||||
// Headers are not followed by a bottom border.
|
||||
// <small> elements inside headers use the default small sizing.
|
||||
// -------------------
|
||||
$h1-multiplier: 2.571428571428571; // Header 1 font-sze multiplier
|
||||
$h2-multiplier: 2.142857142857143; // Header 2 font-sze multiplier
|
||||
$h3-multiplier: 1.714285714285714; // Header 3 font-sze multiplier
|
||||
$h4-multiplier: 1.285714285714286; // Header 4 font-sze multiplier
|
||||
$h5-multiplier: 1; // Header 5 font-sze multiplier
|
||||
$h6-multiplier: 0.8571428571428571; // Header 6 font-sze multiplier
|
||||
$header-line-height-multiplier: 0.76999999923; // Multiplier for line height of headers
|
||||
$header-margin: 0; // Margin for headers
|
||||
$header-font-weight: 500; // Font weight for headers
|
||||
// Rules for small elements inside headers
|
||||
$header-small-color: lighten($body-color, 20%); // Header small text color
|
||||
$header-small-font-weight: 200; // Header small font weight
|
||||
$header-small-color: #777; // Header small text color
|
||||
$header-small-font-weight: 400; // Header small font weight
|
||||
// Rules for horizontal rules
|
||||
$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
|
||||
// Common content typography rules (paragraphs, lists etc.)
|
||||
$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements
|
||||
$small-font-size: 75%; // Font size for small, sub and sup elements
|
||||
// --- NOTES: ---
|
||||
// To counteract the styling of <small> elements inside headers,
|
||||
// $small-font-size is 80% instead of 85% (75% for headers).
|
||||
// -------------------
|
||||
$p-margin: 0 0 10px; // Margin for paragraph and pre elements
|
||||
$small-font-size: 80%; // Font size for small, sub and sup elements
|
||||
$sub-bottom: -0.25em; // Sub bottom
|
||||
$sup-top: -0.5em; // Sup top
|
||||
$list-margin-top: 0; // Top margin for lists
|
||||
$list-margin-bottom: 0.6em; // Bottom margin for lists
|
||||
$mark-bg-color: #ffff33; // Mark background color
|
||||
$list-margin-bottom: 10px; // Bottom margin for lists
|
||||
$mark-bg-color: #fcf8e3; // Mark background color
|
||||
$mark-color: $body-color; // Mark text color
|
||||
// Code, preformatted and keyboard rules
|
||||
$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements
|
||||
// --- NOTES: ---
|
||||
// <pre> elements use the same style as <code> elements and do not
|
||||
// have their own unique padding specified.
|
||||
// <pre> elements use generic border styling to style their border
|
||||
// instead of a specific border color. (*)
|
||||
// Code elements use the default color used in the document's body,
|
||||
// instead of #c7254e.
|
||||
// (*): The generic border mixin from utilites could not be used,
|
||||
// because it is built to apply to a class of elements, not a type.
|
||||
// -------------------
|
||||
$code-fonts: "Menlo, Monaco, Consolas, \"Courier New\", 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-bg-color: #f9f2f4; // 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
|
||||
$kbd-color: $body-bg-color; // Kbd text color
|
||||
pre { border: 1px solid rgba(0,0,0, 0.25); } // Use generic styling to style border for pre elements
|
||||
// Hyperlink rules
|
||||
$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
|
||||
// --- NOTES: ---
|
||||
// <a> elements have no underline style applied to them when hovered
|
||||
// over or otherwise selected or focused.
|
||||
// -------------------
|
||||
$a-color: #337ab7; // Hyperlink text color
|
||||
$a-hover-color: #23527c; // Hyperlink hover text color
|
||||
$a-visited-color: #337ab7; // Hyperlink visited text color
|
||||
$a-visited-hover-color: #23527c; // Hyperlink visited hover text color
|
||||
// Button, input and form rules
|
||||
$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
|
||||
$fieldset-border: 0; // Border style for fieldset
|
||||
$fieldset-border-radius: 0; // Border radius for fieldset
|
||||
$fieldset-margin: 0; // Margin for fieldset
|
||||
$fieldset-padding: 0; // Padding for fieldset
|
||||
// Enable base (_base.scss) and use the variables defined above.
|
||||
@import '../scss/mini/base';
|
||||
//====================================================================
|
||||
|
|
@ -212,7 +241,7 @@ $colored-bg-text1-bg-color: $btn-b-bg-color; // Background color for the
|
|||
$colored-bg-text2-bg-color: $btn-g-bg-color; // Background color for the colored text style 2 class
|
||||
$colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the colored text style 3 class
|
||||
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini/utility';
|
||||
// @import '../scss/mini/utility';
|
||||
// Use utility mixins to create utility classes with given specs. For more information
|
||||
// refer to the _utility.scss file to check the definitions.
|
||||
@include make-thumb($thumbnail-class-name, 0.25em, 1px solid #ccc, 4px, $thumbnail-hover-color);
|
||||
|
|
|
|||
Loading…
Reference in a new issue