Updated nord flavor, added maintainers
Updated flavor file to the latest release's standards, changed indentation for readability, cleaned up variables etc. Added palette link to nord flavor. Added maintainers to all flavors to make sure people can find them.
This commit is contained in:
Angelos Chalaris
parent
ccfdb2f2ce
commit
690df105d1
1
dist/mini-default.css
vendored
1
dist/mini-default.css
vendored
|
|
@ -2,6 +2,7 @@
|
||||||
/*
|
/*
|
||||||
Flavor name: Default (mini-default)
|
Flavor name: Default (mini-default)
|
||||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
|
Maintainers: Angelos Chalaris
|
||||||
mini.css version: v2.1.1 (Fermion)
|
mini.css version: v2.1.1 (Fermion)
|
||||||
*/
|
*/
|
||||||
/*
|
/*
|
||||||
|
|
|
||||||
1
dist/mini-lite.css
vendored
1
dist/mini-lite.css
vendored
|
|
@ -2,6 +2,7 @@
|
||||||
/*
|
/*
|
||||||
Flavor name: Lite (mini-lite)
|
Flavor name: Lite (mini-lite)
|
||||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
|
Maintainers: Angelos Chalaris
|
||||||
mini.css version: v2.1.1 (Fermion)
|
mini.css version: v2.1.1 (Fermion)
|
||||||
*/
|
*/
|
||||||
/*
|
/*
|
||||||
|
|
|
||||||
23
dist/mini-nord.css
vendored
23
dist/mini-nord.css
vendored
|
|
@ -1,7 +1,8 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
/*
|
/*
|
||||||
Flavor name: Nord (mini-nord)
|
Flavor name: Nord (mini-nord)
|
||||||
Author: tphecca (https://github.com/tphecca)
|
Author: tphecca (https://github.com/tphecca)
|
||||||
|
Maintainers: tphecca
|
||||||
mini.css version: v2.1.1 (Fermion)
|
mini.css version: v2.1.1 (Fermion)
|
||||||
*/
|
*/
|
||||||
/*
|
/*
|
||||||
|
|
@ -2158,34 +2159,34 @@ ul.breadcrumbs li:last-child:after {
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsive-margin {
|
.responsive-margin {
|
||||||
margin: 768px !important;
|
margin: 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 6px) {
|
@media screen and (min-width: 768px) {
|
||||||
.responsive-margin {
|
.responsive-margin {
|
||||||
margin: 1280px !important;
|
margin: 6px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 8px) {
|
@media screen and (min-width: 1280px) {
|
||||||
.responsive-margin {
|
.responsive-margin {
|
||||||
margin: 4px !important;
|
margin: 8px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsive-padding {
|
.responsive-padding {
|
||||||
padding: 768px !important;
|
padding: 2px 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 4px 6px) {
|
@media screen and (min-width: 768px) {
|
||||||
.responsive-padding {
|
.responsive-padding {
|
||||||
padding: 1280px !important;
|
padding: 4px 6px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 6px 8px) {
|
@media screen and (min-width: 1280px) {
|
||||||
.responsive-padding {
|
.responsive-padding {
|
||||||
padding: 2px 4px !important;
|
padding: 6px 8px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1000,3 +1000,5 @@
|
||||||
- Have **hugging cat** a hug, seemed excited.
|
- Have **hugging cat** a hug, seemed excited.
|
||||||
- Created templates (6 of them), built `templates` page for showcasing them and added links to it from everywhere.
|
- Created templates (6 of them), built `templates` page for showcasing them and added links to it from everywhere.
|
||||||
- Added a list bullet in the `index` page to help people get to the templates more easily.
|
- Added a list bullet in the `index` page to help people get to the templates more easily.
|
||||||
|
- Updated `nord` flavor to be fully up-to-date with the latest version of **mini.css**.
|
||||||
|
- Added maintainers to all flavors.
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
/*
|
/*
|
||||||
Flavor name: Default (mini-default)
|
Flavor name: Default (mini-default)
|
||||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
|
Maintainers: Angelos Chalaris
|
||||||
mini.css version: v2.1.1 (Fermion)
|
mini.css version: v2.1.1 (Fermion)
|
||||||
*/
|
*/
|
||||||
// Basic rules for body and typography
|
// Basic rules for body and typography
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
/*
|
/*
|
||||||
Flavor name: Lite (mini-lite)
|
Flavor name: Lite (mini-lite)
|
||||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
|
Maintainers: Angelos Chalaris
|
||||||
mini.css version: v2.1.1 (Fermion)
|
mini.css version: v2.1.1 (Fermion)
|
||||||
*/
|
*/
|
||||||
// Basic rules for body and typography
|
// Basic rules for body and typography
|
||||||
|
|
|
||||||
|
|
@ -2,114 +2,106 @@
|
||||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||||
// structured like the flavor description below, will be included in your final CSS file.
|
// structured like the flavor description below, will be included in your final CSS file.
|
||||||
/*
|
/*
|
||||||
Flavor name: Nord (mini-nord)
|
Flavor name: Nord (mini-nord)
|
||||||
Author: tphecca (https://github.com/tphecca)
|
Author: tphecca (https://github.com/tphecca)
|
||||||
|
Maintainers: tphecca
|
||||||
mini.css version: v2.1.1 (Fermion)
|
mini.css version: v2.1.1 (Fermion)
|
||||||
*/
|
*/
|
||||||
|
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
|
||||||
// Basic rules for body and typography
|
// Basic rules for body and typography
|
||||||
$fore-color: #2E3440; // Text and general foreground color
|
$fore-color: #2E3440; // Text and general foreground color
|
||||||
$back-color: #ECEFF4; // Body background color
|
$back-color: #ECEFF4; // Body background color
|
||||||
$base-font-family: // Default font stack for all elements:
|
$base-font-family: // Default font stack for all elements:
|
||||||
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
||||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||||
$base-font-size: 1em; // Default font sizing for all elements [2]
|
$base-font-size: 1em; // Default font sizing for all elements [2]
|
||||||
$base-line-height: 1.5; // Default line height for all elements.
|
$base-line-height: 1.5; // Default line height for all elements.
|
||||||
$body-margin: 0; // Margin for the body
|
$body-margin: 0; // Margin for the body
|
||||||
$apply-defaults-to-all: true; // Should default values be applied to all
|
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
|
||||||
// elements? (`true` or `false`) [3]
|
$h1-font-size: 2em; // Font size of h1
|
||||||
$h1-font-size: 2em; // Font size of h1
|
|
||||||
$h2-font-size: 1.5em; // Font size for h2
|
$h2-font-size: 1.5em; // Font size for h2
|
||||||
$h3-font-size: 1.25em; // Font size for h3
|
$h3-font-size: 1.25em; // Font size for h3
|
||||||
$h4-font-size: 1.1em; // Font size for h4
|
$h4-font-size: 1.1em; // Font size for h4
|
||||||
$h5-font-size: 1em; // Font size for h5
|
$h5-font-size: 1em; // Font size for h5
|
||||||
$h6-font-size: 0.85em; // Font size for h6
|
$h6-font-size: 0.85em; // Font size for h6
|
||||||
$heading-line-height: 1.2em; // Line height for all headings
|
$heading-line-height: 1.2em; // Line height for all headings
|
||||||
$heading-margin: 12px 8px; // Margin for all headings
|
$heading-margin: 12px 8px; // Margin for all headings
|
||||||
$heading-font-weight: 500; // Font weight for all headings
|
$heading-font-weight: 500; // Font weight for all headings
|
||||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||||
$make-heading-smalltext-block: true; // Should <small> elements in headings
|
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
|
||||||
// be displayed as blocks (`true`/`false`) [4]
|
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
||||||
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
$heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings
|
||||||
$heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings
|
$paragraph-margin: 1px 8px; // Margin for <p> elements
|
||||||
$paragraph-margin: 1px 8px; // Margin for <p> elements
|
|
||||||
$list-margin: 1px 8px 10px; // Margin for <ol> and <ul> elements
|
$list-margin: 1px 8px 10px; // Margin for <ol> and <ul> elements
|
||||||
$list-left-padding: 28px; // Left padding for <ol> and <ul> elements
|
$list-left-padding: 28px; // Left padding for <ol> and <ul> elements
|
||||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||||
$horizontal-rule-margin: 8px; // <hr> margin
|
$horizontal-rule-margin: 8px; // <hr> margin
|
||||||
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used
|
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used in the <hr> element's border-top)
|
||||||
// in the <hr> element's border-top)
|
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
|
|
||||||
// <hr> element (`true`/`false`) [5]
|
|
||||||
$horizontal-rule-fancy-gradient:"to right, #ECEFF4, #D8DEE9, #ECEFF4"; // Gradient style for fancy horizontal rule
|
$horizontal-rule-fancy-gradient:"to right, #ECEFF4, #D8DEE9, #ECEFF4"; // Gradient style for fancy horizontal rule
|
||||||
$blockquote-back-color: #D8DEE9; // Background color for <blockquote>
|
$blockquote-back-color: #D8DEE9; // Background color for <blockquote>
|
||||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||||
$blockquote-margin: 8px 10px; // Margin for <blockquote>
|
$blockquote-margin: 8px 10px; // Margin for <blockquote>
|
||||||
$blockquote-padding: 6px 10px 24px; // Padding for <blockquote>
|
$blockquote-padding: 6px 10px 24px; // Padding for <blockquote>
|
||||||
$blockquote-sidebar-style: 3px solid #616161; // Style for the sidebar of <blockquote>
|
$blockquote-sidebar-style: 3px solid #616161; // Style for the sidebar of <blockquote>
|
||||||
$blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote>
|
$blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote>
|
||||||
$blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote>
|
$blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote>
|
||||||
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
|
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
|
||||||
$blockquote-cite-bottom-position: // Bottom padding for citation of <blockquote>
|
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
|
||||||
0;
|
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
|
||||||
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
|
$blockquote-box-shadow: // Box shadow for <blockquote>
|
||||||
$blockquote-box-shadow: // Box shadow for <blockquote>
|
|
||||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
$use-default-code-fonts: true; // Should default font choice (monospace) be
|
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||||
// used for code elements? (`true`/`false`) [6]
|
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
||||||
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
$code-element-padding: 2px 4px; // Padding for <code>
|
||||||
$code-element-padding: 2px 4px; // Padding for <code>
|
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
$code-element-back-color: #E5E9F0; // Background color for <code>
|
||||||
$code-element-back-color: #E5E9F0; // Background color for <code>
|
$code-element-border-style: 0; // Border style for <code>
|
||||||
$code-element-border-style: 0; // Border style for <code>
|
$code-element-border-radius: 2px; // Border radius for <code>
|
||||||
$code-element-border-radius: 2px; // Border radius for <code>
|
$code-element-box-shadow: // Box shadow for <code>
|
||||||
$code-element-box-shadow: // Box shadow for <code>
|
|
||||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
$pre-element-padding: 12px; // Padding for <pre>
|
$pre-element-padding: 12px; // Padding for <pre>
|
||||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||||
$pre-element-border-style: 0; // Border style for <pre>
|
$pre-element-border-style: 0; // Border style for <pre>
|
||||||
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
|
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
|
||||||
$pre-element-margin: 8px 10px; // Margin for <pre>
|
$pre-element-margin: 8px 10px; // Margin for <pre>
|
||||||
$pre-element-box-shadow: // Box shadow for <pre>
|
$pre-element-box-shadow: // Box shadow for <pre>
|
||||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
|
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||||
// left side of <pre> (`true`/`false`) [7]
|
$pre-element-sidebar-style: 3px solid #5E81AC; // Style of the sidebar of <pre>
|
||||||
$pre-element-sidebar-style: 3px solid #5E81AC; // Style of the sidebar of <pre>
|
|
||||||
$kbd-element-padding: 2px 4px; // Padding for <kbd>
|
$kbd-element-padding: 2px 4px; // Padding for <kbd>
|
||||||
$kbd-element-fore-color: #ECEFF4; // Text color for <kbd>
|
$kbd-element-fore-color: #ECEFF4; // Text color for <kbd>
|
||||||
$kbd-element-back-color: $fore-color; // Background color for <kbd>
|
$kbd-element-back-color: $fore-color; // Background color for <kbd>
|
||||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||||
$kbd-element-border-radius: 2px; // Border radius for <kbd>
|
$kbd-element-border-radius: 2px; // Border radius for <kbd>
|
||||||
$kbd-element-box-shadow: // Box shadow for <kbd>
|
$kbd-element-box-shadow: // Box shadow for <kbd>
|
||||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
$style-samp-element: false; // Should styles for <samp> be included?
|
$style-samp-element: false; // Should styles for <samp> be included?
|
||||||
// (`true`/`false`) [8]
|
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||||
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
//$samp-element-back-color: #2196f3; // Background color for <samp>
|
||||||
//$samp-element-back-color: #81A1C1; // Background color for <samp>
|
//$samp-element-border-style: 0; // Border style for <samp>
|
||||||
//$samp-element-border-style: 0; // Border style for <samp>
|
//$samp-element-border-radius:2px; // Border radius for <samp>
|
||||||
//$samp-element-border-radius: 2px; // Border radius for <samp>
|
//$samp-element-box-shadow: // Box shadow for <samp>
|
||||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn>
|
//0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
// be included (`true`/`false`) [9]
|
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
|
||||||
$small-font-size: 75%; // Font size for <small> elements
|
$small-font-size: 75%; // Font size for <small> elements
|
||||||
$sup-font-size: 75%; // Font size for <sup> elements
|
$sup-font-size: 75%; // Font size for <sup> elements
|
||||||
$sub-font-size: 75%; // Font size for <sub> elements
|
$sub-font-size: 75%; // Font size for <sub> elements
|
||||||
$sup-top: -8px; // <sup> top
|
$sup-top: -8px; // <sup> top
|
||||||
$sub-bottom: -4px; // <sub> bottom
|
$sub-bottom: -4px; // <sub> bottom
|
||||||
$link-fore-color: #88C0D0; // Text color for <a>
|
$link-fore-color: #88C0D0; // Text color for <a>
|
||||||
$link-visited-fore-color: #5E81AC; // Text color for visited <a>
|
$link-visited-fore-color: #5E81AC; // Text color for visited <a>
|
||||||
$link-font-weight: 500; // Font weight for <a>
|
$link-font-weight: 500; // Font weight for <a>
|
||||||
$apply-link-underline: true; // Should an underline be applied to all <a>
|
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
|
||||||
// elements? (`true`/`false`) [10]
|
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
|
||||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
|
//$link-hover-fore-color: #8FBCBB; // Text color for <a> when hovered or focused
|
||||||
// elements use fade-out instead of a different
|
$figcaption-font-size: 80%; // Font size of <figcaption> elements
|
||||||
// color (`true`/`false`) [11]
|
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
||||||
//$link-hover-fore-color: #8FBCBB; // Text color for <a> when hovered or focused
|
|
||||||
$figcaption-font-size: 80%; // Font size of <figcaption> elements
|
|
||||||
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||||
// element's font sizing.
|
// element's font sizing.
|
||||||
|
|
@ -135,79 +127,72 @@ $figcaption-fore-color: #424242; // Text color for <figcaption> element
|
||||||
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||||
// Variables for grid elements
|
// Variables for grid elements
|
||||||
$use-four-step-grid: false; // Should the old 4-step grid system be used
|
$use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
|
||||||
// instead of the new (`true`/`false`) [1]
|
$include-parent-layout: true !default; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
|
||||||
$include-parent-layout: true !default; // Should the classes for rows defining the column
|
$grid-container-name: 'container'; // Class name for the grid container
|
||||||
// layout of children be included (`true`/`false`) [2]
|
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
|
||||||
$grid-container-name: 'container'; // Class name for the grid container
|
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||||
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
|
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
|
||||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
|
||||||
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
|
|
||||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||||
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||||
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
||||||
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
||||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||||
$grid-column-padding: 0 4px; // Padding for the columns of the grid
|
$grid-column-padding: 0 4px; // Padding for the columns of the grid
|
||||||
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
|
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||||
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
|
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
||||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||||
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
||||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||||
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
|
||||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
||||||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||||
// Variables for navigational elements
|
// Variables for navigational elements
|
||||||
$header-height: 44px; // Height for <header>
|
$header-height: 44px; // Height for <header>
|
||||||
$header-back-color: #2E3440; // Background color for <header>
|
$header-back-color: #2E3440; // Background color for <header>
|
||||||
$header-fore-color: #ECEFF4; // Text color for <header>
|
$header-fore-color: #ECEFF4; // Text color for <header>
|
||||||
$header-border-style: 0; // Border style for <header>
|
$header-border-style: 0; // Border style for <header>
|
||||||
$header-margin: 0; // Margin for <header>
|
$header-margin: 0; // Margin for <header>
|
||||||
$header-padding: 2px 8px; // Padding for <header>
|
$header-padding: 2px 8px; // Padding for <header>
|
||||||
$header-box-shadow: // Box shadow for <header>
|
$header-box-shadow: // Box shadow for <header>
|
||||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||||
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||||
$header-logo-line-height: 1.2; // Line height for <header>'s logo
|
$header-logo-line-height: 1.2; // Line height for <header>'s logo
|
||||||
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
|
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
|
||||||
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
|
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
|
||||||
$header-link-hover-color: #37474f; // Hover color for <header>'s links
|
$header-link-hover-color: #37474f; // Hover color for <header>'s links
|
||||||
$header-link-margin: 2px 0 0; // Margin for <header>'s links
|
$header-link-margin: 2px 0 0; // Margin for <header>'s links
|
||||||
$include-header-sticky: true; // Should sticky <header> elements be
|
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||||
// included? (`true`/`false`) [1]
|
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
|
||||||
$nav-back-color: #ECEFF4; // Background for <nav>
|
$nav-back-color: #ECEFF4; // Background for <nav>
|
||||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||||
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
|
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
|
||||||
$nav-border-radius: 0; // Border radius for <nav>
|
$nav-border-radius: 0; // Border radius for <nav>
|
||||||
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
|
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
|
||||||
$nav-margin: 2px; // Margin for <nav>
|
$nav-margin: 2px; // Margin for <nav>
|
||||||
$nav-box-shadow: // Box shadow for <nav>
|
$nav-box-shadow: // Box shadow for <nav>
|
||||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
$nav-link-fore-color: #88C0D0; // Text color for links in <nav>
|
$nav-link-fore-color: #88C0D0; // Text color for links in <nav>
|
||||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||||
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
|
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
|
||||||
$nav-include-sublink-bar: true; // Should a left border bar be added to
|
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||||
// subcategories (`true`/`false`) [2]
|
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
|
||||||
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
|
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
|
||||||
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
|
$footer-back-color: #434C5E; // Background color for <footer>
|
||||||
$footer-back-color: #434C5E; // Background color for <footer>
|
$footer-fore-color: #ECEFF4; // Text color for <footer>
|
||||||
$footer-fore-color: #ECEFF4; // Text color for <footer>
|
|
||||||
$footer-border-style: 0; // Border stye for <footer>
|
$footer-border-style: 0; // Border stye for <footer>
|
||||||
$footer-font-size: 85%; // Font size for <footer>
|
$footer-font-size: 85%; // Font size for <footer>
|
||||||
$footer-margin: 18px 0 0; // Margin for <footer>
|
$footer-margin: 18px 0 0; // Margin for <footer>
|
||||||
$footer-padding: 22px 10px 12px; // Padding for <footer>
|
$footer-padding: 22px 10px 12px; // Padding for <footer>
|
||||||
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
|
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
|
||||||
$include-footer-sticky: true; // Should sticky <footer> elements be
|
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||||
// included (`true`/`false`) [3]
|
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||||
|
|
@ -217,105 +202,97 @@ $footer-sticky-name: 'sticky'; // Class name for sticky <footer> elem
|
||||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||||
// Variables for forms and inputs
|
// Variables for forms and inputs
|
||||||
$form-back-color: #ECEFF4; // Background color for forms
|
$form-back-color: #ECEFF4; // Background color for forms
|
||||||
$form-fore-color: $fore-color; // Text color for forms
|
$form-fore-color: $fore-color; // Text color for forms
|
||||||
$form-border-style: 1px solid #D8DEE9; // Border style for forms
|
$form-border-style: 1px solid #D8DEE9; // Border style for forms
|
||||||
$form-border-radius: 0; // Border radius for forms
|
$form-border-radius: 0; // Border radius for forms
|
||||||
$form-margin: 8px; // Margin for forms
|
$form-margin: 8px; // Margin for forms
|
||||||
$form-padding: 12px 10px 18px; // Padding for forms
|
$form-padding: 12px 10px 18px; // Padding for forms
|
||||||
$form-box-shadow: // Box shadow for forms
|
$form-box-shadow: // Box shadow for forms
|
||||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||||
$fieldset-border-style: 1px solid #D8DEE9; // Border style for fieldset
|
$fieldset-border-style: 1px solid #D8DEE9; // Border style for fieldset
|
||||||
$fieldset-border-radius: 2px; // Border radius for fieldset
|
$fieldset-border-radius: 2px; // Border radius for fieldset
|
||||||
$fieldset-margin: 2px; // Margin for fieldset
|
$fieldset-margin: 2px; // Margin for fieldset
|
||||||
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
||||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||||
$legend-font-size: 0.925em; // Font size for legend
|
$legend-font-size: 0.925em; // Font size for legend
|
||||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||||
$legend-padding: 2px 4px; // Padding for legend
|
$legend-padding: 2px 4px; // Padding for legend
|
||||||
$label-padding: 4px; // Padding for label
|
$label-padding: 4px; // Padding for label
|
||||||
$input-group-name: 'input-group'; // Class for input groups
|
$input-group-name: 'input-group'; // Class for input groups
|
||||||
$include-fluid-input-group: true; // Should fluid input grooups be
|
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||||
// included? (`true`/`false`) [1]
|
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
|
||||||
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
|
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
$input-back-color: #E5E9F0; // Background for input
|
||||||
$input-back-color: #E5E9F0; // Background for input
|
$input-fore-color: $fore-color; // Text color for input
|
||||||
$input-fore-color: $fore-color; // Text color for input
|
$input-border-style: 1px solid #D8DEE9; // Border style for input
|
||||||
$input-border-style: 1px solid #D8DEE9; // Border style for input
|
|
||||||
$input-border-radius: 1px; // Border radius for input
|
$input-border-radius: 1px; // Border radius for input
|
||||||
$input-margin: 2px; // Margin for input
|
$input-margin: 2px; // Margin for input
|
||||||
$input-padding: 8px 12px; // padding for input
|
$input-padding: 8px 12px; // Padding for input
|
||||||
$input-focus-border-color: #81A1C1; // Border color for focused input
|
$input-focus-border-color: #81A1C1; // Border color for focused input
|
||||||
$input-invalid-border-color: #BF616A; // Border color for invalid input
|
$input-invalid-border-color: #BF616A; // Border color for invalid input
|
||||||
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||||
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
||||||
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
||||||
$input-placeholder-fore-color: #616161; // Text color for input placeholder
|
$input-placeholder-fore-color: #616161; // Text color for input placeholder
|
||||||
$button-back-color: #D8DEE9; // Back color for button elements
|
$button-back-color: #D8DEE9; // Back color for button elements
|
||||||
$button-back-opacity: 0.65; // Background opacity for button elements
|
$button-back-opacity: 0.65; // Background opacity for button elements
|
||||||
$button-hover-back-opacity: 0.8; // Background opacity for button elements
|
$button-hover-back-opacity: 0.8; // Background opacity for button elements on hover or focus
|
||||||
// on hover or focus
|
$button-fore-color: $fore-color; // Text color for button elements
|
||||||
$button-fore-color: $fore-color; // Text color for button elements
|
|
||||||
$button-border-style: 0; // Border style for button elements
|
$button-border-style: 0; // Border style for button elements
|
||||||
$button-border-radius: 2px; // Border radius for button elements
|
$button-border-radius: 2px; // Border radius for button elements
|
||||||
$button-padding: 8px 12px; // Padding for button elements
|
$button-padding: 8px 12px; // Padding for button elements
|
||||||
$button-margin: 8px; // Margin for button elements
|
$button-margin: 8px; // Margin for button elements
|
||||||
$button-box-shadow: // Box shadow for buttons
|
$button-box-shadow: // Box shadow for buttons
|
||||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
$button-disabled-opacity: 0.65; // Disabled button elements opacity
|
$button-disabled-opacity: 0.65; // Disabled button elements opacity
|
||||||
$button-class-name: 'button'; // Class for custom button elements
|
$button-class-name: 'button'; // Class for custom button elements
|
||||||
$button-group-name: 'button-group'; // Class for button groups
|
$button-group-name: 'button-group'; // Class for button groups
|
||||||
$button-group-border-style: 1px solid #9e9e9e; // Border style for button groups
|
$button-group-border-style: 1px solid #9e9e9e; // Border style for button groups
|
||||||
$button-group-margin: $button-margin; // Margin for button groups
|
$button-group-margin: $button-margin; // Margin for button groups
|
||||||
$button-group-box-shadow: // Box shadow for button groups
|
$button-group-box-shadow: // Box shadow for button groups
|
||||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||||
$hide-file-inputs: true; // Should a style be added that makes all
|
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
|
||||||
// <input>s of type `file` hidden?
|
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||||
// (`true`/`false`) [2]
|
$button-variant1-back-color: #5E81AC; // Background color for button variant 1
|
||||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||||
$button-variant1-back-color: #5E81AC; // Background color for button variant 1
|
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
|
||||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
$button-variant1-fore-color: #ECEFF4; // Text color for button variant 1
|
||||||
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
|
$button-variant2-name: 'secondary'; // Class name for button variant 2
|
||||||
1; // on hover or focus
|
$button-variant2-back-color: #BF616A; // Background color for button variant 2
|
||||||
$button-variant1-fore-color: #ECEFF4; // Text color for button variant 1
|
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
|
||||||
$button-variant2-name: 'secondary'; // Class name for button variant 2
|
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
|
||||||
$button-variant2-back-color: #BF616A; // Background color for button variant 2
|
$button-variant2-fore-color: #ECEFF4; // Text color for button variant 2
|
||||||
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
|
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
||||||
$button-variant2-hover-back-opacity: // Background opacity for button variant 2
|
$button-variant3-back-color: #A3BE8C; // Background color for button variant 3
|
||||||
1; // on hover or focus
|
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
|
||||||
$button-variant2-fore-color: #ECEFF4; // Text color for button variant 2
|
$button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
|
||||||
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
$button-variant3-fore-color: #ECEFF4; // Text color for button variant 3
|
||||||
$button-variant3-back-color: #A3BE8C; // Background color for button variant 3
|
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||||
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
|
$button-variant4-back-color: $fore-color; // Background color for button variant 4
|
||||||
$button-variant3-hover-back-opacity: // Background opacity for button variant 3
|
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||||
1; // on hover or focus
|
$button-variant4-hover-back-opacity: 0.9; // Background opacity for button variant 4 on hover or focus
|
||||||
$button-variant3-fore-color: #ECEFF4; // Text color for button variant 3
|
$button-variant4-fore-color: #ECEFF4; // Text color for button variant 4
|
||||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
|
||||||
$button-variant4-back-color: $fore-color; // Background color for button variant 4
|
|
||||||
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
|
||||||
$button-variant4-hover-back-opacity: // Background opacity for button variant 4
|
|
||||||
0.9; // on hover or focus
|
|
||||||
$button-variant4-fore-color: #ECEFF4; // Text color for button variant 4
|
|
||||||
$button-style1-name: 'small'; // Class name for button style 1
|
$button-style1-name: 'small'; // Class name for button style 1
|
||||||
$button-style1-border-style: 0; // Border style for button style 1
|
$button-style1-border-style: 0; // Border style for button style 1
|
||||||
$button-style1-border-radius: 1px; // Border radius for button style 1
|
$button-style1-border-radius: 1px; // Border radius for button style 1
|
||||||
$button-style1-padding: 4px 6px; // Padding for button style 1
|
$button-style1-padding: 4px 6px; // Padding for button style 1
|
||||||
$button-style1-margin: 6px 8px; // Margin for button style 1
|
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||||
$button-style2-name: 'large'; // Class name for button style 2
|
$button-style2-name: 'large'; // Class name for button style 2
|
||||||
$button-style2-border-style: 0; // Border style for button style 2
|
$button-style2-border-style: 0; // Border style for button style 2
|
||||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||||
$button-style2-padding: 12px 18px; // Padding for button style 2
|
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||||
$button-style2-margin: 10px 8px; // Margin for button style 2
|
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||||
$checkbox-size: 16px; // Size for checkbox/radio [3]
|
$checkbox-size: 16px; // Size for checkbox/radio [3]
|
||||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||||
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
|
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
|
||||||
$checkbox-border-color: #D8DEE9; // Border color for checkbox/radio
|
$checkbox-border-color: #D8DEE9; // Border color for checkbox/radio
|
||||||
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
|
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
|
||||||
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
|
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
|
||||||
$checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
|
$checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
|
||||||
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
|
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||||
// specified in the corresponding variables.
|
// specified in the corresponding variables.
|
||||||
|
|
@ -325,32 +302,29 @@ $checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabl
|
||||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||||
// Variables for responsive tables
|
// Variables for responsive tables
|
||||||
$table-border-style: 1px solid #D8DEE9; // Border style for <table> and children
|
$table-border-style: 1px solid #D8DEE9; // Border style for <table> and children
|
||||||
$table-border-radius: 0; // Border radius for <table> and children
|
$table-border-radius: 0; // Border radius for <table> and children
|
||||||
$table-margin: 0 auto; // Margin for <table>
|
$table-margin: 0 auto; // Margin for <table>
|
||||||
$table-box-shadow: // Box shadow for <table>
|
$table-box-shadow: // Box shadow for <table>
|
||||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
$table-caption-font-size: 1.5em; // Font size for <caption>
|
$table-caption-font-size: 1.5em; // Font size for <caption>
|
||||||
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
|
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
|
||||||
$table-row-padding: 8px; // Padding for <tr> - both views
|
$table-row-padding: 8px; // Padding for <tr> - both views
|
||||||
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||||
$table-head-back-color: #D8DEE9; // Background color for <th>
|
$table-head-back-color: #D8DEE9; // Background color for <th>
|
||||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||||
$table-body-back-color: #ECEFF4; // Background color for <td>
|
$table-body-back-color: #ECEFF4; // Background color for <td>
|
||||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||||
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
|
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
|
||||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
|
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
|
||||||
// in mobile view [1]
|
$table-mobile-label-font-weight: $bold-font-weight; // Font weight for mobile headers
|
||||||
$table-mobile-label-font-weight: $bold-font-weight; // Font weight for mobile headers
|
$include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||||
$include-horizontal-table: true; // Should horizontal <table> elements be
|
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
|
||||||
// included? (`true`/`false`) [2]
|
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
||||||
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
|
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||||
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
$table-striped-alt-body-back-color: #E5E9F0; // Alternate background color for <td> in striped <table>
|
||||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
|
||||||
$table-striped-alt-body-back-color: // Alternate background color for <td> in
|
|
||||||
#E5E9F0; // striped <table>
|
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||||
// in order for their mobile headers to display properly.
|
// in order for their mobile headers to display properly.
|
||||||
|
|
@ -358,121 +332,118 @@ $table-striped-alt-body-back-color: // Alternate background color for
|
||||||
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
// $table-horizontal-name and a breakpoint defined in $table-horizontal-breakpoint.
|
||||||
// Variables for cards [1]
|
// Variables for cards [1]
|
||||||
$card-name: 'card'; // Class name for cards
|
$card-name: 'card'; // Class name for cards
|
||||||
$card-back-color: #ECEFF4; // Background color for cards
|
$card-back-color: #ECEFF4; // Background color for cards
|
||||||
$card-fore-color: $fore-color; // Text color for cards
|
$card-fore-color: $fore-color; // Text color for cards
|
||||||
$card-border-style: 1px solid #D8DEE9; // Border style for cards
|
$card-border-style: 1px solid #D8DEE9; // Border style for cards
|
||||||
$card-border-radius: 0; // Border radius for cards
|
$card-border-radius: 0; // Border radius for cards
|
||||||
$card-margin: 2px 10px 20px; // Margin for cards
|
$card-margin: 2px 10px 20px; // Margin for cards
|
||||||
$card-box-shadow: // Box shadow for cards
|
$card-box-shadow: // Box shadow for cards
|
||||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||||
$card-section-name: 'section'; // Class name for card sections
|
$card-section-name: 'section'; // Class name for card sections
|
||||||
$card-section-border-style: 1px solid #E5E9F0; // Border style for card sections
|
$card-section-border-style: 1px solid #E5E9F0; // Border style for card sections
|
||||||
$card-section-padding: 6px 8px 6px; // Padding for card sections
|
$card-section-padding: 6px 8px 6px; // Padding for card sections
|
||||||
$card-section-media-name: 'media'; // Class name for card media sections
|
$card-section-media-name: 'media'; // Class name for card media sections
|
||||||
$card-section-media-height: 200px; // Height for card media setions
|
$card-section-media-height: 200px; // Height for card media setions
|
||||||
$card-normal-width: 320px; // Width for normal cards
|
$card-normal-width: 320px; // Width for normal cards
|
||||||
$card-size1-name: 'large'; // Class name for large cards
|
$card-size1-name: 'large'; // Class name for large cards
|
||||||
$card-size1-width: 480px; // Width for large cards
|
$card-size1-width: 480px; // Width for large cards
|
||||||
$card-size2-name: 'small'; // Class name for small cards
|
$card-size2-name: 'small'; // Class name for small cards
|
||||||
$card-size2-width: 240px; // Width for small cards
|
$card-size2-width: 240px; // Width for small cards
|
||||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||||
$card-size3-width: 100%; // Width for fluid cards
|
$card-size3-width: 100%; // Width for fluid cards
|
||||||
$card-style1-name: 'inverse'; // Class name for card style 1
|
$card-style1-name: 'inverse'; // Class name for card style 1
|
||||||
$card-style1-back-color: $fore-color; // Background color for card style 1
|
$card-style1-back-color: $fore-color; // Background color for card style 1
|
||||||
$card-style1-fore-color: #ECEFF4; // Text color for card style 1
|
$card-style1-fore-color: #ECEFF4; // Text color for card style 1
|
||||||
$card-style1-border-style: 1px solid #3B4252; // Border style for card style 1
|
$card-style1-border-style: 1px solid #3B4252; // Border style for card style 1
|
||||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||||
$card-style1-section-border-style: // Border style for card style 1 sections
|
$card-style1-section-border-style: 1px solid #434C5E; // Border style for card style 1 sections
|
||||||
1px solid #434C5E;
|
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
$card-section-style1-back-color:#ECEFF4; // Background color for card section style 1
|
||||||
$card-section-style1-back-color:#ECEFF4; // Background color for card section style 1
|
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
|
||||||
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
|
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
||||||
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
$card-section-style2-back-color:#D8DEE9; // Background color for card section style 2
|
||||||
$card-section-style2-back-color:#D8DEE9; // Background color for card section style 2
|
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
|
||||||
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
|
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
$card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
|
||||||
$card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
|
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - The cards module depends heavily on the grid system module.
|
// [1] - The cards module depends heavily on the grid system module.
|
||||||
// Variables for tabs
|
// Variables for tabs
|
||||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||||
$tab-container-box-shadow: // Box shadow for the tabs' container
|
$tab-container-box-shadow: // Box shadow for the tabs' container
|
||||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||||
$tab-label-back-color: #D8DEE9; // Background color for tabs' labels
|
$tab-label-back-color: #D8DEE9; // Background color for tabs' labels
|
||||||
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
||||||
$tab-label-selected-back-color: #4C566A; // Background color for open tab's label
|
$tab-label-selected-back-color: #4C566A; // Background color for open tab's label
|
||||||
$tab-label-selected-fore-color: #ECEFF4; // Text color for open tab's label
|
$tab-label-selected-fore-color: #ECEFF4; // Text color for open tab's label
|
||||||
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
||||||
$tab-label-padding: 8px 12px; // Padding for tabs' labels
|
$tab-label-padding: 8px 12px; // Padding for tabs' labels
|
||||||
$tab-label-height: 26px; // Height for tabs' labels
|
$tab-label-height: 26px; // Height for tabs' labels
|
||||||
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs
|
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs
|
||||||
$tab-border-radius: 0; // Border radius for tabs
|
$tab-border-radius: 0; // Border radius for tabs
|
||||||
$tab-panel-back-color: #ECEFF4; // Background color for tabs' panels
|
$tab-panel-back-color: #ECEFF4; // Background color for tabs' panels
|
||||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||||
$tab-panel-padding: 8px; // Padding for tabs' panels
|
$tab-panel-padding: 8px; // Padding for tabs' panels
|
||||||
$tab-panel-height: 400px; // Height for tabs' panels
|
$tab-panel-height: 400px; // Height for tabs' panels
|
||||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||||
// Variables for contextual background elements and alerts
|
// Variables for contextual background elements and alerts
|
||||||
$mark-back-color: #5E81AC; // Background color for <mark>
|
$mark-back-color: #5E81AC; // Background color for <mark>
|
||||||
$mark-fore-color: #ECEFF4; // Text color for <mark>
|
$mark-fore-color: #ECEFF4; // Text color for <mark>
|
||||||
$mark-font-size: 95%; // Font size for <mark>
|
$mark-font-size: 95%; // Font size for <mark>
|
||||||
$mark-line-height: 1; // Line height for <mark>
|
$mark-line-height: 1; // Line height for <mark>
|
||||||
$mark-border-style: 0; // Border style for <mark>
|
$mark-border-style: 0; // Border style for <mark>
|
||||||
$mark-border-radius: 2px; // Border radius for <mark>
|
$mark-border-radius: 2px; // Border radius for <mark>
|
||||||
$mark-padding: 2px 4px; // Padding for <mark>
|
$mark-padding: 2px 4px; // Padding for <mark>
|
||||||
$mark-margin: 0; // Margin for <mark>
|
$mark-margin: 0; // Margin for <mark>
|
||||||
$mark-box-shadow: // Box shadow for <mark>
|
$mark-box-shadow: // Box shadow for <mark>
|
||||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||||
$mark-variant1-back-color: #BF616A; // Background color for <mark> variant 1
|
$mark-variant1-back-color: #BF616A; // Background color for <mark> variant 1
|
||||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||||
$mark-variant2-back-color: #A3BE8C; // Background color for <mark> variant 2
|
$mark-variant2-back-color: #A3BE8C; // Background color for <mark> variant 2
|
||||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||||
$mark-style2-border-radius: 2px; // Border radius for <mark> style 2
|
$mark-style2-border-radius: 2px; // Border radius for <mark> style 2
|
||||||
$mark-style2-padding: 5px; // Padding for <mark> style 2
|
$mark-style2-padding: 5px; // Padding for <mark> style 2
|
||||||
$mark-style2-font-size: 100%; // Font size for <mark> style 2
|
$mark-style2-font-size: 100%; // Font size for <mark> style 2
|
||||||
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
|
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
|
||||||
$alert-name: 'alert'; // Class name for alerts
|
$alert-name: 'alert'; // Class name for alerts
|
||||||
$alert-back-color: #ECEFF4; // Background color for alerts
|
$alert-back-color: #ECEFF4; // Background color for alerts
|
||||||
$alert-fore-color: $fore-color; // Text color for alerts
|
$alert-fore-color: $fore-color; // Text color for alerts
|
||||||
$alert-border-style: 1px solid #D8DEE9; // Border style for alerts
|
$alert-border-style: 1px solid #D8DEE9; // Border style for alerts
|
||||||
$alert-border-radius: 0; // Border radius for alerts
|
$alert-border-radius: 0; // Border radius for alerts
|
||||||
$alert-padding: 12px 16px; // Padding for alerts
|
$alert-padding: 12px 16px; // Padding for alerts
|
||||||
$alert-margin: 1px 10px; // Margin for alerts
|
$alert-margin: 1px 10px; // Margin for alerts
|
||||||
$alert-box-shadow: // Box shadow for alerts
|
$alert-box-shadow: // Box shadow for alerts
|
||||||
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
||||||
$alert-include-animated: true; // Should animated alerts be included?
|
$alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
|
||||||
// (`true`/`false`) [1]
|
$alert-animated-class: 'animated'; // Class name for animated alerts
|
||||||
$alert-animated-class: 'animated'; // Class name for animated alerts
|
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
|
||||||
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
|
$alert-variant1-back-color: #EBCB8B; // Background color for alert variant 1
|
||||||
$alert-variant1-back-color: #EBCB8B; // Background color for alert variant 1
|
$alert-variant2-name: 'critical'; // Class name for alert variant 2
|
||||||
$alert-variant2-name: 'critical'; // Class name for alert variant 2
|
$alert-variant2-back-color: #BF616A; // Background color for alert variant 2
|
||||||
$alert-variant2-back-color: #BF616A; // Background color for alert variant 2
|
$alert-variant2-fore-color: #ECEFF4; // Text color for alert variant 2
|
||||||
$alert-variant2-fore-color: #ECEFF4; // Text color for alert variant 2
|
$alert-style1-name: 'urgent'; // Class name for alert style 1
|
||||||
$alert-style1-name: 'urgent'; // Class name for alert style 1
|
$alert-style1-border-style: 1px solid #D08770; // Border style for alert style 1
|
||||||
$alert-style1-border-style: 1px solid #D08770; // Border style for alert style 1
|
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
|
||||||
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
|
$alert-style2-name: 'critical'; // Class name for alert style 2
|
||||||
$alert-style2-name: 'critical'; // Class name for alert style 2
|
$alert-style2-border-style: 1px solid #BF616A; // Border style for alert style 2
|
||||||
$alert-style2-border-style: 1px solid #BF616A; // Border style for alert style 2
|
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
|
||||||
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
|
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
|
||||||
$include-tooltip: true; // Should tooltips be included?
|
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||||
// (`true`/`false`) [2]
|
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
$tooltip-fore-color: #ECEFF4; // Text color for tooltips
|
||||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
$tooltip-border-radius: 2px; // Border radius for tooltips
|
||||||
$tooltip-fore-color: #ECEFF4; // Text color for tooltips
|
|
||||||
$tooltip-border-radius: 2px; // Border radius for tooltips
|
|
||||||
$tooltip-tail-size: 6px; // The size of the tooltip's tail
|
$tooltip-tail-size: 6px; // The size of the tooltip's tail
|
||||||
$tooltip-padding: 6px; // Padding for tooltips
|
$tooltip-padding: 6px; // Padding for tooltips
|
||||||
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
|
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
|
||||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
|
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
|
||||||
// will be used to determine the class that will be used for animated alerts.
|
// will be used to determine the class that will be used for animated alerts.
|
||||||
|
|
@ -480,103 +451,87 @@ $tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
||||||
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
||||||
// included.
|
// included.
|
||||||
// Variables for progress elements and spinners
|
// Variables for progress elements and spinners
|
||||||
$progress-back-color: #D8DEE9; // Background color for <progress>
|
$progress-back-color: #D8DEE9; // Background color for <progress>
|
||||||
$progress-fore-color: #5E81AC; // Progress bar color for <progress>
|
$progress-fore-color: #5E81AC; // Progress bar color for <progress>
|
||||||
$progress-height: 14px; // Height of <progress>
|
$progress-height: 14px; // Height of <progress>
|
||||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||||
$progress-border-style: 0; // Border style for <progress>
|
$progress-border-style: 0; // Border style for <progress>
|
||||||
$progress-border-radius: 1px; // Border radius for the <progress> container
|
$progress-border-radius: 1px; // Border radius for the <progress> container
|
||||||
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
||||||
$progress-left-right-margin: 8px; // Left and right margin for <progress>
|
$progress-left-right-margin: 8px; // Left and right margin for <progress>
|
||||||
$progress-box-shadow: // Box shadow for <progress>
|
$progress-box-shadow: // Box shadow for <progress>
|
||||||
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
||||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||||
$progress-inline-width: 60%; // Width for inline <progress>
|
$progress-inline-width: 60%; // Width for inline <progress>
|
||||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||||
$progress-variant1-fore-color: #BF616A; // Progress bar color for <progress> variant 1
|
$progress-variant1-fore-color: #BF616A; // Progress bar color for <progress> variant 1
|
||||||
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
||||||
$progress-variant2-fore-color: #A3BE8C; // Progress bar color for <progress> variant 2
|
$progress-variant2-fore-color: #A3BE8C; // Progress bar color for <progress> variant 2
|
||||||
$progress-style1-name: 'nano'; // Class name for <progress> style 1
|
$progress-style1-name: 'nano'; // Class name for <progress> style 1
|
||||||
$progress-style1-height: 2px; // Height for <progress> style 1
|
$progress-style1-height: 2px; // Height for <progress> style 1
|
||||||
$progress-style1-top-bottom-margin: // Top and bottom margin for <progress> style 1
|
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
|
||||||
0;
|
$progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
|
||||||
$progress-style1-left-right-margin: // Left and right margin for <progress> style 1
|
$progress-style1-border-style: 0; // Border style for <progress> style 1
|
||||||
0;
|
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
|
||||||
$progress-style1-border-style: 0; // Border style for <progress> style 1
|
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||||
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
|
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
|
||||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
$spinner-donut-back-color: #D8DEE9; // Background color for donut spinner
|
||||||
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
|
$spinner-donut-fore-color: #5E81AC; // Foreground color for donut spinner
|
||||||
$spinner-donut-back-color: #D8DEE9; // Background color for donut spinner
|
|
||||||
$spinner-donut-fore-color: #5E81AC; // Foreground color for donut spinner
|
|
||||||
$spinner-donut-size: 20px; // Size for donut spinner
|
$spinner-donut-size: 20px; // Size for donut spinner
|
||||||
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
|
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
|
||||||
$spinner-donut-variant1-back-color: // Background color for donut spinner variant 1
|
$spinner-donut-variant1-back-color: #D8DEE9; // Background color for donut spinner variant 1
|
||||||
#D8DEE9;
|
$spinner-donut-variant1-fore-color: #BF616A; // Foreground color for donut spinner variant 1
|
||||||
$spinner-donut-variant1-fore-color: // Foreground color for donut spinner variant 1
|
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
||||||
#BF616A;
|
$spinner-donut-variant2-back-color: #D8DEE9; // Background color for donut spinner variant 2
|
||||||
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
$spinner-donut-variant2-fore-color: #A3BE8C; // Foreground color for donut spinner variant 2
|
||||||
$spinner-donut-variant2-back-color: // Background color for donut spinner variant 2
|
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
|
||||||
#D8DEE9;
|
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1
|
||||||
$spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2
|
$spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1
|
||||||
#A3BE8C;
|
|
||||||
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
|
|
||||||
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1
|
|
||||||
$spinner-donut-style1-border-thickness: // Border thickness for donut spinner style 1
|
|
||||||
6px;
|
|
||||||
// Variables for utilities and helper classes
|
// Variables for utilities and helper classes
|
||||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||||
$breadcrumbs-back-color: #D8DEE9; // Background color for breadcrumbs
|
$breadcrumbs-back-color: #D8DEE9; // Background color for breadcrumbs
|
||||||
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
|
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
|
||||||
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
||||||
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
|
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
|
||||||
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||||
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
|
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
|
||||||
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs
|
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs
|
||||||
0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);
|
0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);
|
||||||
$close-icon-name: 'close'; // Class name for close icon
|
$close-icon-name: 'close'; // Class name for close icon
|
||||||
$close-icon-size: 32px; // Size of the close icon
|
$close-icon-size: 32px; // Size of the close icon
|
||||||
$close-icon-back-color: #ECEFF4; // Background color for the close icon
|
$close-icon-back-color: #ECEFF4; // Background color for the close icon
|
||||||
$close-icon-fore-color: #2E3440; // Foreground color for the close icon
|
$close-icon-fore-color: #2E3440; // Foreground color for the close icon
|
||||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||||
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
|
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
|
||||||
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
|
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
|
||||||
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
|
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
|
||||||
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
|
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
|
||||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
|
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
|
||||||
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
|
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
|
||||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
||||||
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
||||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||||
$responsive-margin-medium-breakpoint: // Medium screen breakpoint for responsive margin
|
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
|
||||||
$grid-medium-breakpoint;
|
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
|
||||||
$responsive-margin-large-breakpoint: // Large screen breakpoint for responsive margin
|
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
|
||||||
$grid-large-breakpoint;
|
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||||
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
|
$responsive-padding-small-value:2px 4px; // Padding value for responsive padding on small screens
|
||||||
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
|
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
|
||||||
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
|
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
|
||||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
||||||
$responsive-padding-medium-breakpoint: // Medium screen breakpoint for responsive padding
|
|
||||||
$grid-medium-breakpoint;
|
|
||||||
$responsive-padding-large-breakpoint: // Large screen breakpoint for responsive padding
|
|
||||||
$grid-large-breakpoint;
|
|
||||||
$responsive-padding-small-value:2px 4px; // Padding value for responsive padding on small screens
|
|
||||||
$responsive-padding-medium-value: // Padding value for responsive padding on medium screens
|
|
||||||
4px 6px;
|
|
||||||
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
|
|
||||||
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
|
||||||
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
|
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
|
||||||
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
||||||
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
||||||
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
||||||
// Notes:
|
// Notes:
|
||||||
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
|
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
|
||||||
// names that will be used.
|
// names that will be used.
|
||||||
|
|
@ -658,12 +613,10 @@ $include-center-block-name: false; // Should center block be included
|
||||||
@include make-border-generic ($border-generic-name);
|
@include make-border-generic ($border-generic-name);
|
||||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||||
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-medium-breakpoint,
|
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
|
||||||
$responsive-margin-large-breakpoint, $responsive-margin-small-value, $responsive-margin-medium-value,
|
$responsive-margin-medium-value, $responsive-margin-large-value);
|
||||||
$responsive-margin-large-value);
|
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
|
||||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
|
$responsive-padding-medium-value, $responsive-padding-large-value);
|
||||||
$responsive-padding-large-breakpoint, $responsive-padding-small-value, $responsive-padding-medium-value,
|
|
||||||
$responsive-padding-large-value);
|
|
||||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||||
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||||
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue