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

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

@ -2,10 +2,12 @@
// 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
@ -16,8 +18,7 @@ $base-root-font-size: 16px; // Root font sizing for all elements [1]
$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]
$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
@ -28,8 +29,7 @@ $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]
$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
@ -38,10 +38,8 @@ $list-left-padding: 28px; // Left padding for <ol> and <ul> element
$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-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>
@ -51,14 +49,12 @@ $blockquote-sidebar-style: 3px solid #616161; // Style for the sidebar o
$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-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]
$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>
@ -75,8 +71,7 @@ $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>
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]
$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>
@ -86,14 +81,14 @@ $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-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>
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn>
// be included (`true`/`false`) [9]
//$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
@ -102,11 +97,8 @@ $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]
$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
@ -135,10 +127,8 @@ $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]
$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
@ -150,8 +140,6 @@ $grid-order-first-suffix: 'first'; // Class name suffix for grid colum
$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
@ -178,8 +166,7 @@ $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]
$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>
@ -193,8 +180,7 @@ $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-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
@ -205,8 +191,7 @@ $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]
$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
@ -235,8 +220,7 @@ $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]
$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
@ -244,7 +228,7 @@ $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-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
@ -253,8 +237,7 @@ $input-readonly-border-color: #bdbdbd; // Border color for readonly inp
$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-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
@ -270,32 +253,26 @@ $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]
$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-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: // Background opacity for button variant 2
1; // on hover or focus
$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: // Background opacity for button variant 3
1; // on hover or focus
$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: // Background opacity for button variant 4
0.9; // on hover or focus
$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
@ -340,17 +317,14 @@ $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-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]
$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-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.
@ -382,8 +356,7 @@ $card-style1-back-color: $fore-color; // Background color for card styl
$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-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
@ -448,8 +421,7 @@ $alert-padding: 12px 16px; // Padding for alerts
$alert-margin: 1px 10px; // Margin 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-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
@ -462,8 +434,7 @@ $alert-style1-border-radius: $alert-border-radius; // Border radius for al
$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]
$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
@ -498,10 +469,8 @@ $progress-variant2-name: 'tertiary'; // Class name for <progress> vari
$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-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
@ -510,19 +479,14 @@ $spinner-donut-back-color: #D8DEE9; // Background color for donut spin
$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-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: // Background color for donut spinner variant 2
#D8DEE9;
$spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2
#A3BE8C;
$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: // Border thickness for donut spinner style 1
6px;
$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
@ -556,21 +520,12 @@ $box-shadow-style4-name: 'shadow-large'; // Class name for generic box-
$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-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
@ -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);