beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Updated nord flavor, added maintainers

Browse source 
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 2017-04-19 15:05:08 +03:00
parent ccfdb2f2ce
commit 690df105d1
8 changed files with 399 additions and 439 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
dist/mini-default.css vendored
View file

@ -2,6 +2,7 @@
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.1 (Fermion)
*/
/*

1
dist/mini-lite.css vendored
View file

@ -2,6 +2,7 @@
/*
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.1 (Fermion)
*/
/*

23
dist/mini-nord.css vendored
View file

@ -1,7 +1,8 @@
@charset "UTF-8";
/*
Flavor name: Nord (mini-nord)
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.1.1 (Fermion)
*/
/*
@ -2158,34 +2159,34 @@ ul.breadcrumbs li:last-child:after {
}
.responsive-margin {
margin: 768px !important;
margin: 4px !important;
}
@media screen and (min-width: 6px) {
@media screen and (min-width: 768px) {
.responsive-margin {
margin: 1280px !important;
margin: 6px !important;
}
}
@media screen and (min-width: 8px) {
@media screen and (min-width: 1280px) {
.responsive-margin {
margin: 4px !important;
margin: 8px !important;
}
}
.responsive-padding {
padding: 768px !important;
padding: 2px 4px !important;
}
@media screen and (min-width: 4px 6px) {
@media screen and (min-width: 768px) {
.responsive-padding {
padding: 1280px !important;
padding: 4px 6px !important;
}
}
@media screen and (min-width: 6px 8px) {
@media screen and (min-width: 1280px) {
.responsive-padding {
padding: 2px 4px !important;
padding: 6px 8px !important;
}
}

2
dist/mini-nord.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/v2/DEVLOG.md
View file

@ -1000,3 +1000,5 @@
- 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.
- 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.

1
src/flavors/mini-default.scss
View file

@ -4,6 +4,7 @@
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.1 (Fermion)
*/
// Basic rules for body and typography

1
src/flavors/mini-lite.scss
View file

@ -6,6 +6,7 @@
/*
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.1.1 (Fermion)
*/
// Basic rules for body and typography

807
src/flavors/mini-nord.scss
View file

@ -2,114 +2,106 @@
// 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.
/*
Flavor name: Nord (mini-nord)
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
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
$fore-color: #2E3440; // Text and general foreground color
$back-color: #ECEFF4; // Body background color
$base-font-family: // Default font stack for all elements:
$fore-color: #2E3440; // Text and general foreground color
$back-color: #ECEFF4; // Body background color
$base-font-family: // Default font stack for all elements:
'-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
$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.
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all
// elements? (`true` or `false`) [3]
$h1-font-size: 2em; // Font size of h1
$body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2em; // Font size of h1
$h2-font-size: 1.5em; // Font size for h2
$h3-font-size: 1.25em; // Font size for h3
$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
$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-font-weight: 500; // Font weight for all headings
$heading-smalltext-fore-color: #424242; // <small> color in headings
$make-heading-smalltext-block: true; // Should <small> elements in headings
// be displayed as blocks (`true`/`false`) [4]
$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
$paragraph-margin: 1px 8px; // Margin for <p> elements
$heading-smalltext-fore-color: #424242; // <small> color in headings
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
$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
$paragraph-margin: 1px 8px; // Margin for <p> elements
$list-margin: 1px 8px 10px; // Margin 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>
$horizontal-rule-line-height: 1.25em; // <hr> line height
$horizontal-rule-margin: 8px; // <hr> margin
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used
// 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-line-height: 1.25em; // <hr> line height
$horizontal-rule-margin: 8px; // <hr> margin
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used 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-gradient:"to right, #ECEFF4, #D8DEE9, #ECEFF4"; // Gradient style for fancy horizontal rule
$blockquote-back-color: #D8DEE9; // Background color for <blockquote>
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
$blockquote-margin: 8px 10px; // Margin for <blockquote>
$blockquote-padding: 6px 10px 24px; // Padding for <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-fore-color: #616161; // Text color 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>
0;
$blockquote-border-style: 0; // Border style for <blockquote>
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
$blockquote-box-shadow: // Box shadow for <blockquote>
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
$blockquote-margin: 8px 10px; // Margin for <blockquote>
$blockquote-padding: 6px 10px 24px; // Padding for <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-fore-color: #616161; // Text color for citation of <blockquote>
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
$blockquote-border-style: 0; // Border style for <blockquote>
$blockquote-border-radius: 0 2px 2px 0; // Border radius 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);
$use-default-code-fonts: true; // Should default font choice (monospace) be
// used for code elements? (`true`/`false`) [6]
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
$code-element-padding: 2px 4px; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code>
$code-element-back-color: #E5E9F0; // Background color for <code>
$code-element-border-style: 0; // Border style for <code>
$code-element-border-radius: 2px; // Border radius for <code>
$code-element-box-shadow: // Box shadow for <code>
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
$code-element-padding: 2px 4px; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code>
$code-element-back-color: #E5E9F0; // Background color for <code>
$code-element-border-style: 0; // Border style for <code>
$code-element-border-radius: 2px; // Border radius 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);
$pre-element-padding: 12px; // Padding 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-border-style: 0; // Border style for <pre>
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
$pre-element-padding: 12px; // Padding 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-border-style: 0; // Border style for <pre>
$pre-element-border-radius: 0 2px 2px 0; // Border radius 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);
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
// left side of <pre> (`true`/`false`) [7]
$pre-element-sidebar-style: 3px solid #5E81AC; // Style of the sidebar of <pre>
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
$pre-element-sidebar-style: 3px solid #5E81AC; // Style of the sidebar of <pre>
$kbd-element-padding: 2px 4px; // Padding for <kbd>
$kbd-element-fore-color: #ECEFF4; // Text 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-radius: 2px; // Border radius for <kbd>
$kbd-element-box-shadow: // Box shadow for <kbd>
$kbd-element-fore-color: #ECEFF4; // Text 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-radius: 2px; // Border radius 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);
$style-samp-element: false; // Should styles for <samp> be included?
// (`true`/`false`) [8]
//$samp-element-padding: 2px 4px; // Padding for <samp>
//$samp-element-fore-color: $fore-color; // Text color for <samp>
//$samp-element-back-color: #81A1C1; // Background color for <samp>
//$samp-element-border-style: 0; // Border style for <samp>
//$samp-element-border-radius: 2px; // Border radius for <samp>
$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
$sup-font-size: 75%; // Font size for <sup> elements
$sub-font-size: 75%; // Font size for <sub> elements
$sup-top: -8px; // <sup> top
$sub-bottom: -4px; // <sub> bottom
$link-fore-color: #88C0D0; // Text color for <a>
$link-visited-fore-color: #5E81AC; // Text color for visited <a>
$link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a>
// 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]
//$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
//$samp-element-padding: 2px 4px; // Padding for <samp>
//$samp-element-fore-color: $fore-color; // Text color for <samp>
//$samp-element-back-color: #2196f3; // Background color for <samp>
//$samp-element-border-style: 0; // Border style for <samp>
//$samp-element-border-radius:2px; // Border radius for <samp>
//$samp-element-box-shadow: // Box shadow for <samp>
//0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$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
$sup-font-size: 75%; // Font size for <sup> elements
$sub-font-size: 75%; // Font size for <sub> elements
$sup-top: -8px; // <sup> top
$sub-bottom: -4px; // <sub> bottom
$link-fore-color: #88C0D0; // Text color for <a>
$link-visited-fore-color: #5E81AC; // Text color for visited <a>
$link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a> 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]
//$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:
// [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.
@ -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
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// Variables for grid elements
$use-four-step-grid: false; // Should the old 4-step grid system be used
// 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]
$grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$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]
$use-four-step-grid: false; // Should the old 4-step grid system be used 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]
$grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$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-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-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-column-count: 12; // Number of columns in the grid (integer value only)
$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-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-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-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium 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:
// [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.
// [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.
// Variables for navigational elements
$header-height: 44px; // Height for <header>
$header-back-color: #2E3440; // Background color for <header>
$header-fore-color: #ECEFF4; // Text color for <header>
$header-height: 44px; // Height for <header>
$header-back-color: #2E3440; // Background color for <header>
$header-fore-color: #ECEFF4; // Text color 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-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);
$header-logo-name: 'logo'; // Class name 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-margin: 1px 6px 1px 1px; // Margin 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-margin: 2px 0 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be
// included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$header-logo-name: 'logo'; // Class name 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-margin: 1px 6px 1px 1px; // Margin 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-margin: 2px 0 0; // Margin for <header>'s links
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header>
$nav-back-color: #ECEFF4; // Background for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
$nav-fore-color: $fore-color; // Text color for <nav>
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
$nav-border-radius: 0; // Border radius for <nav>
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
$nav-margin: 2px; // Margin for <nav>
$nav-box-shadow: // Box shadow for <nav>
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
$nav-margin: 2px; // Margin 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);
$nav-link-fore-color: #88C0D0; // Text color for links in <nav>
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory 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-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to
// subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
$footer-back-color: #434C5E; // Background color for <footer>
$footer-fore-color: #ECEFF4; // Text color for <footer>
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
$footer-back-color: #434C5E; // Background color for <footer>
$footer-fore-color: #ECEFF4; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 85%; // Font size for <footer>
$footer-margin: 18px 0 0; // Margin for <footer>
$footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be
// included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
$footer-padding: 22px 10px 12px; // Padding for <footer>
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [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.
@ -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.
// Variables for forms and inputs
$form-back-color: #ECEFF4; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms
$form-border-style: 1px solid #D8DEE9; // Border style for forms
$form-fore-color: $fore-color; // Text color for forms
$form-border-style: 1px solid #D8DEE9; // Border style for forms
$form-border-radius: 0; // Border radius for forms
$form-margin: 8px; // Margin for forms
$form-padding: 12px 10px 18px; // Padding for forms
$form-box-shadow: // Box shadow for forms
$form-margin: 8px; // Margin for forms
$form-padding: 12px 10px 18px; // Padding 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);
$fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: 1px solid #D8DEE9; // Border style for fieldset
$fieldset-border-radius: 2px; // Border radius for fieldset
$fieldset-margin: 2px; // Margin for fieldset
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
$legend-font-weight: $bold-font-weight; // Font weight for legend
$legend-font-size: 0.925em; // Font size for legend
$legend-fore-color: $form-fore-color; // Text color for legend
$fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: 1px solid #D8DEE9; // Border style for fieldset
$fieldset-border-radius: 2px; // Border radius for fieldset
$fieldset-margin: 2px; // Margin for fieldset
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
$legend-font-weight: $bold-font-weight; // Font weight for legend
$legend-font-size: 0.925em; // Font size for legend
$legend-fore-color: $form-fore-color; // Text color for legend
$legend-padding: 2px 4px; // Padding for legend
$label-padding: 4px; // Padding for label
$input-group-name: 'input-group'; // Class for input groups
$include-fluid-input-group: true; // Should fluid input grooups be
// included? (`true`/`false`) [1]
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
$input-back-color: #E5E9F0; // Background for input
$input-fore-color: $fore-color; // Text color for input
$input-border-style: 1px solid #D8DEE9; // Border style for input
$label-padding: 4px; // Padding for label
$input-group-name: 'input-group'; // Class for input groups
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
$input-back-color: #E5E9F0; // Background for input
$input-fore-color: $fore-color; // Text color for input
$input-border-style: 1px solid #D8DEE9; // Border style for input
$input-border-radius: 1px; // Border radius for input
$input-margin: 2px; // Margin for input
$input-padding: 8px 12px; // padding for input
$input-focus-border-color: #81A1C1; // Border color for focused input
$input-invalid-border-color: #BF616A; // Border color for invalid input
$input-disabled-opacity: 0.75; // Opacity for disabled input
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
$input-placeholder-fore-color: #616161; // Text color for input placeholder
$button-back-color: #D8DEE9; // Back color for button elements
$input-margin: 2px; // Margin for input
$input-padding: 8px 12px; // Padding for input
$input-focus-border-color: #81A1C1; // Border color for focused input
$input-invalid-border-color: #BF616A; // Border color for invalid input
$input-disabled-opacity: 0.75; // Opacity for disabled input
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
$input-placeholder-fore-color: #616161; // Text color for input placeholder
$button-back-color: #D8DEE9; // Back color for button elements
$button-back-opacity: 0.65; // Background opacity for button elements
$button-hover-back-opacity: 0.8; // Background opacity for button elements
// on hover or focus
$button-fore-color: $fore-color; // Text color for button elements
$button-hover-back-opacity: 0.8; // Background opacity for button elements on hover or focus
$button-fore-color: $fore-color; // Text color 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-margin: 8px; // Margin for button elements
$button-box-shadow: // Box shadow for buttons
$button-margin: 8px; // Margin for button elements
$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);
$button-disabled-opacity: 0.65; // Disabled button elements opacity
$button-class-name: 'button'; // Class for custom button elements
$button-group-name: 'button-group'; // Class 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-box-shadow: // Box shadow 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-margin: $button-margin; // Margin 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);
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
$hide-file-inputs: true; // Should a style be added that makes all
// <input>s of type `file` hidden?
// (`true`/`false`) [2]
$button-variant1-name: 'primary'; // Class name for button variant 1
$button-variant1-back-color: #5E81AC; // Background color for button variant 1
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
1; // on hover or focus
$button-variant1-fore-color: #ECEFF4; // Text color for button variant 1
$button-variant2-name: 'secondary'; // Class name for button variant 2
$button-variant2-back-color: #BF616A; // Background color for button variant 2
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
$button-variant2-hover-back-opacity: // Background opacity for button variant 2
1; // on hover or focus
$button-variant2-fore-color: #ECEFF4; // Text color for button variant 2
$button-variant3-name: 'tertiary'; // Class name for button variant 3
$button-variant3-back-color: #A3BE8C; // Background color for button variant 3
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
$button-variant3-hover-back-opacity: // Background opacity for button variant 3
1; // on hover or focus
$button-variant3-fore-color: #ECEFF4; // Text color for button variant 3
$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-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
$button-variant1-name: 'primary'; // Class name for button variant 1
$button-variant1-back-color: #5E81AC; // Background color for button variant 1
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
$button-variant1-fore-color: #ECEFF4; // Text color for button variant 1
$button-variant2-name: 'secondary'; // Class name for button variant 2
$button-variant2-back-color: #BF616A; // Background color for button variant 2
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
$button-variant2-fore-color: #ECEFF4; // Text color for button variant 2
$button-variant3-name: 'tertiary'; // Class name for button variant 3
$button-variant3-back-color: #A3BE8C; // Background color for button variant 3
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
$button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
$button-variant3-fore-color: #ECEFF4; // Text color for button variant 3
$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: 0.9; // Background opacity for button variant 4 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-border-style: 0; // Border style 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-margin: 6px 8px; // Margin 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-padding: 4px 6px; // Padding 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-border-style: 0; // Border style 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-margin: 10px 8px; // Margin for button style 2
$checkbox-size: 16px; // Size for checkbox/radio [3]
$checkbox-back-color: $input-back-color; // Background clor 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-color: #D8DEE9; // Border color 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
$button-style2-border-style: 0; // Border style 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-margin: 10px 8px; // Margin for button style 2
$checkbox-size: 16px; // Size for checkbox/radio [3]
$checkbox-back-color: $input-back-color; // Background clor 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-color: #D8DEE9; // Border color 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-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:
// [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.
@ -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.
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
// 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-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);
$table-caption-font-size: 1.5em; // Font size for <caption>
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
$table-caption-font-size: 1.5em; // Font size for <caption>
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
$table-row-padding: 8px; // Padding for <tr> - both views
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
$table-head-back-color: #D8DEE9; // Background color for <th>
$table-head-fore-color: $fore-color; // Tex color for <th>
$table-body-back-color: #ECEFF4; // Background color for <td>
$table-body-fore-color: $fore-color; // Text color for <td>
$table-mobile-breakpoint: 767px; // Breakpoint for <table> 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
// in mobile view [1]
$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]
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
$table-striped-name: 'striped'; // Class name for striped <table>
$table-striped-alt-body-back-color: // Alternate background color for <td> in
#E5E9F0; // striped <table>
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
$table-head-back-color: #D8DEE9; // Background color for <th>
$table-head-fore-color: $fore-color; // Tex color for <th>
$table-body-back-color: #ECEFF4; // Background color for <td>
$table-body-fore-color: $fore-color; // Text color for <td>
$table-mobile-breakpoint: 767px; // Breakpoint for <table> 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 in mobile view [1]
$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]
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
$table-striped-name: 'striped'; // Class name for striped <table>
$table-striped-alt-body-back-color: #E5E9F0; // Alternate background color for <td> in striped <table>
// Notes:
// [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.
@ -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.
// Variables for cards [1]
$card-name: 'card'; // Class name for cards
$card-back-color: #ECEFF4; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #D8DEE9; // Border style for cards
$card-border-radius: 0; // Border radius for cards
$card-margin: 2px 10px 20px; // Margin for cards
$card-box-shadow: // Box shadow for cards
$card-back-color: #ECEFF4; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards
$card-border-style: 1px solid #D8DEE9; // Border style for cards
$card-border-radius: 0; // Border radius for cards
$card-margin: 2px 10px 20px; // Margin 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);
$card-section-name: 'section'; // Class name 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-media-name: 'media'; // Class name for card media sections
$card-section-media-height: 200px; // Height for card media setions
$card-normal-width: 320px; // Width for normal cards
$card-size1-name: 'large'; // Class name for large cards
$card-size1-width: 480px; // Width for large cards
$card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 240px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name 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-border-style: 1px solid #3B4252; // Border style 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
1px solid #434C5E;
$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-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-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-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-name: 'section'; // Class name 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-media-name: 'media'; // Class name for card media sections
$card-section-media-height: 200px; // Height for card media setions
$card-normal-width: 320px; // Width for normal cards
$card-size1-name: 'large'; // Class name for large cards
$card-size1-width: 480px; // Width for large cards
$card-size2-name: 'small'; // Class name for small cards
$card-size2-width: 240px; // Width for small cards
$card-size3-name: 'fluid'; // Class name for fluid cards
$card-size3-width: 100%; // Width for fluid cards
$card-style1-name: 'inverse'; // Class name 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-border-style: 1px solid #3B4252; // Border style for card style 1
$card-style1-border-radius: 0; // Border radius for card style 1
$card-style1-section-border-style: 1px solid #434C5E; // Border style for card style 1 sections
$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-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-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-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
// Notes:
// [1] - The cards module depends heavily on the grid system module.
// Variables for tabs
$tab-container-name: 'tabs'; // Class name 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);
$tab-label-back-color: #D8DEE9; // Background 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-fore-color: #ECEFF4; // Text color for open tab's label
$tab-label-back-color: #D8DEE9; // Background 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-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-padding: 8px 12px; // Padding for tabs' labels
$tab-label-height: 26px; // Height for tabs' labels
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs
$tab-border-radius: 0; // Border radius for tabs
$tab-panel-back-color: #ECEFF4; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 8px; // Padding for tabs' panels
$tab-label-height: 26px; // Height for tabs' labels
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs
$tab-border-radius: 0; // Border radius for tabs
$tab-panel-back-color: #ECEFF4; // Background 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-height: 400px; // Height for tabs' panels
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
// Variables for contextual background elements and alerts
$mark-back-color: #5E81AC; // Background 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-border-style: 0; // Border style for <mark>
$mark-border-radius: 2px; // Border radius for <mark>
$mark-padding: 2px 4px; // Padding for <mark>
$mark-margin: 0; // Margin for <mark>
$mark-box-shadow: // Box shadow for <mark>
$mark-margin: 0; // Margin 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);
$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-back-color: #BF616A; // Background color for <mark> variant 1
$mark-variant2-name: 'tertiary'; // Class name 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-border-style: 0; // Border style 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-style2-name: 'inline-block'; // Class name 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-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
$mark-variant1-name: 'secondary'; // Class name 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-back-color: #A3BE8C; // Background color for <mark> variant 2
$mark-style1-name: 'tag'; // Class name 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-padding: 4px 8px; // Padding for <mark> style 1
$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-radius: 2px; // Border radius 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-line-height: 1.35; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #ECEFF4; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #D8DEE9; // Border style for alerts
$mark-style2-font-size: 100%; // Font size for <mark> style 2
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #ECEFF4; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts
$alert-border-style: 1px solid #D8DEE9; // Border style 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-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);
$alert-include-animated: true; // Should animated alerts be included?
// (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name 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-back-color: #BF616A; // Background 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-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-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-radius: $alert-border-radius; // Border radius for alert style 2
$include-tooltip: true; // Should tooltips be included?
// (`true`/`false`) [2]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color for tooltips
$tooltip-fore-color: #ECEFF4; // Text color for tooltips
$tooltip-border-radius: 2px; // Border radius for tooltips
$alert-include-animated: true; // Should animated alerts be included? (`true`/`false`) [1]
$alert-animated-class: 'animated'; // Class name for animated alerts
$alert-variant1-name: 'urgent'; // Class name 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-back-color: #BF616A; // Background 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-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-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-radius: $alert-border-radius; // Border radius for alert style 2
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
$tooltip-name: 'tooltip'; // Class name for the tooltip component
$tooltip-back-color: $fore-color; // Background color 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-padding: 6px; // Padding for tooltips
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
$tooltip-padding: 6px; // Padding for tooltips
$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);
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
// Notes:
// [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.
@ -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
// included.
// Variables for progress elements and spinners
$progress-back-color: #D8DEE9; // Background color for <progress>
$progress-fore-color: #5E81AC; // Progress bar color for <progress>
$progress-height: 14px; // Height of <progress>
$progress-back-color: #D8DEE9; // Background color for <progress>
$progress-fore-color: #5E81AC; // Progress bar color for <progress>
$progress-height: 14px; // Height of <progress>
$progress-max-value: 1000; // Arithmetic max value of <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 1px; // Border radius for the <progress> container
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
$progress-left-right-margin: 8px; // Left and right margin for <progress>
$progress-box-shadow: // Box shadow for <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 1px; // Border radius for the <progress> container
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
$progress-left-right-margin: 8px; // Left and right margin 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);
$progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 60%; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name 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-fore-color: #A3BE8C; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name 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
0;
$progress-style1-left-right-margin: // Left and right margin for <progress> style 1
0;
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
$spinner-donut-back-color: #D8DEE9; // Background color for donut spinner
$spinner-donut-fore-color: #5E81AC; // Foreground color for donut spinner
$progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 60%; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name 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-fore-color: #A3BE8C; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 2px; // Height for <progress> style 1
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
$progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
$spinner-donut-border-thickness:4px; // Border thickness 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-variant1-name: 'secondary'; // Class name for donut spinner variant 1
$spinner-donut-variant1-back-color: // Background color for donut spinner variant 1
#D8DEE9;
$spinner-donut-variant1-fore-color: // Foreground color for donut spinner variant 1
#BF616A;
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
$spinner-donut-variant2-back-color: // Background color for donut spinner variant 2
#D8DEE9;
$spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2
#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;
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
$spinner-donut-variant1-back-color: #D8DEE9; // Background color for donut spinner variant 1
$spinner-donut-variant1-fore-color: #BF616A; // Foreground color for donut spinner variant 1
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
$spinner-donut-variant2-back-color: #D8DEE9; // Background color for donut spinner variant 2
$spinner-donut-variant2-fore-color: #A3BE8C; // Foreground color for donut spinner variant 2
$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: 6px; // Border thickness for donut spinner style 1
// Variables for utilities and helper classes
$hidden-name: 'hidden'; // Class name for hidden elements
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
$breadcrumbs-back-color: #D8DEE9; // Background color for breadcrumbs
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
$breadcrumbs-height: 32px; // Height of the breadcrumbs
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
$breadcrumbs-back-color: #D8DEE9; // Background color for breadcrumbs
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
$breadcrumbs-height: 32px; // Height of the breadcrumbs
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
$breadcrumbs-border-radius: 4px; // Border radius 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);
$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-back-color: #ECEFF4; // Background 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-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-style2-name: 'circular'; // Class name 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-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-value: // Box shadow value for generic box-shadow style 2
$close-icon-back-color: #ECEFF4; // Background 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-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-style2-name: 'circular'; // Class name 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-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-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);
$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-name: 'shadow-medium'; // Class name 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);
$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-name: 'shadow-large'; // Class name 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);
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-medium-breakpoint: // Medium screen breakpoint for responsive margin
$grid-medium-breakpoint;
$responsive-margin-large-breakpoint: // Large screen breakpoint for responsive margin
$grid-large-breakpoint;
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
$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-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
$responsive-padding-small-value:2px 4px; // Padding value for responsive padding on small screens
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
$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
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
// 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
// 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-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-margin-responsive ($responsive-margin-name, $responsive-margin-medium-breakpoint,
$responsive-margin-large-breakpoint, $responsive-margin-small-value, $responsive-margin-medium-value,
$responsive-margin-large-value);
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
$responsive-padding-large-breakpoint, $responsive-padding-small-value, $responsive-padding-medium-value,
$responsive-padding-large-value);
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
$responsive-margin-medium-value, $responsive-margin-large-value);
@include make-padding-responsive ($responsive-padding-name, $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-style2-name, $box-shadow-style2-value);
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);