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

Finalized mini-lite flavor

Browse source 
Tweaked a few things, made everything less fancy and dealt with excessive styles. This should now be a simple barebones flavor that serves as a very simple and basic starting stylesheet.
This commit is contained in:
Angelos Chalaris 2017-04-03 15:03:32 +03:00
parent e6ab5fc448
commit 12658813a9
4 changed files with 60 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
dist/mini-lite.css vendored
View file

@ -116,9 +116,8 @@ hr {
overflow: visible; overflow: visible;
line-height: 1.25em; line-height: 1.25em;
margin: 8px; margin: 8px;
height: 1px; height: 0;
background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); border-top: 1px solid #424242;
background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
} }
blockquote { blockquote {
@ -128,9 +127,7 @@ blockquote {
background: #eeeeee; background: #eeeeee;
margin: 8px 10px; margin: 8px 10px;
padding: 6px 10px 24px; padding: 6px 10px 24px;
border-left: 3px solid #616161;
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
} }
blockquote:after { blockquote:after {
@ -151,7 +148,6 @@ code {
border-radius: 2px; border-radius: 2px;
background: #e0e0e0; background: #e0e0e0;
padding: 2px 4px; padding: 2px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
} }
pre { pre {
@ -160,8 +156,7 @@ pre {
background: #e0e0e0; background: #e0e0e0;
padding: 12px; padding: 12px;
margin: 8px 10px; margin: 8px 10px;
border-left: 3px solid #1565c0; box-shadow: false;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
} }
kbd { kbd {
@ -169,7 +164,6 @@ kbd {
background: #212121; background: #212121;
color: #fafafa; color: #fafafa;
padding: 2px 4px; padding: 2px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
} }
small, sup, sub { small, sup, sub {
@ -719,7 +713,6 @@ header {
background: #263238; background: #263238;
color: #fafafa; color: #fafafa;
padding: 2px 8px; padding: 2px 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
@ -742,7 +735,6 @@ header a[role="button"], header label[role="button"], header [role="button"] {
color: #fafafa; color: #fafafa;
vertical-align: top; vertical-align: top;
margin: 2px 0 0; margin: 2px 0 0;
box-shadow: none;
} }
header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus, header button:hover, header button:active, header button:focus, header [type="button"]:hover, header [type="button"]:active, header [type="button"]:focus,
@ -794,7 +786,6 @@ form {
border: 1px solid #bdbdbd; border: 1px solid #bdbdbd;
margin: 8px; margin: 8px;
padding: 12px 10px 18px; padding: 12px 10px 18px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
} }
fieldset { fieldset {
@ -910,7 +901,6 @@ a[role="button"], label[role="button"], [role="button"] {
border-radius: 2px; border-radius: 2px;
padding: 8px 12px; padding: 8px 12px;
margin: 8px; margin: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
text-decoration: none; text-decoration: none;
-webkit-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
@ -1054,19 +1044,6 @@ button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="but
background: #689f38; background: #689f38;
} }
button.inverse, [type="button"].inverse, [type="submit"].inverse,
[type="reset"].inverse, .button.inverse, [role="button"].inverse {
background: #212121;
color: #fafafa;
}
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
[type="reset"].inverse:hover,
[type="reset"].inverse:active,
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:active, [role="button"].inverse:focus {
background: rgba(33, 33, 33, 0.9);
}
button.small, [type="button"].small, [type="submit"].small, button.small, [type="button"].small, [type="submit"].small,
[type="reset"].small, .button.small, [role="button"].small { [type="reset"].small, .button.small, [role="button"].small {
border-radius: 1px; border-radius: 1px;
@ -1089,7 +1066,6 @@ table {
border-spacing: 0; border-spacing: 0;
border: 1px solid #bdbdbd; border: 1px solid #bdbdbd;
margin: 0 auto; margin: 0 auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
} }
table caption { table caption {
@ -1128,7 +1104,6 @@ table th:first-child, table td:first-child {
border-collapse: collapse; border-collapse: collapse;
border: 0; border: 0;
width: 100%; width: 100%;
box-shadow: none;
} }
table:not(.preset) thead, table:not(.preset) th { table:not(.preset) thead, table:not(.preset) th {
border: 0; border: 0;
@ -1145,7 +1120,6 @@ table th:first-child, table td:first-child {
table:not(.preset) tr { table:not(.preset) tr {
display: block; display: block;
border: 1px solid #bdbdbd; border: 1px solid #bdbdbd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
background: #fafafa; background: #fafafa;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -1221,45 +1195,15 @@ table th:first-child, table td:first-child {
/* /*
Custom elements for cards and containers. Custom elements for cards and containers.
*/ */
@media screen and (min-width: 480px) {
.card.large {
max-width: 480px;
}
}
@media screen and (min-width: 240px) {
.card.small {
max-width: 240px;
}
}
.card.fluid { .card.fluid {
max-width: 100%; max-width: 100%;
width: auto; width: auto;
} }
.card.inverse {
background: #212121;
color: #fafafa;
border: 1px solid #424242;
}
.card.inverse > .section {
border-bottom: 1px solid #616161;
}
.card.inverse > .section:last-child {
border-bottom: 0;
}
.card > .section.dark { .card > .section.dark {
background: #e0e0e0; background: #e0e0e0;
} }
.card > .section.darker {
background: #bdbdbd;
}
.card > .section.double-padded { .card > .section.double-padded {
padding: 10px 12px 10px; padding: 10px 12px 10px;
} }
@ -1387,31 +1331,6 @@ progress.tertiary::-moz-progress-bar {
background: #689f38; background: #689f38;
} }
progress.nano {
height: 2px;
width: 100%;
margin: 0 auto;
border-radius: 0;
}
progress.nano::-webkit-progress-value {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano::-moz-progress-bar {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
progress.nano[value="1000"]::-webkit-progress-value {
border-radius: 0;
}
progress.nano[value="1000"]::-moz-progress-bar {
border-radius: 0;
}
/* /*
Definitions for utilities and helper classes. Definitions for utilities and helper classes.
*/ */

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

File diff suppressed because one or more lines are too long

2
docs/v2/DEVLOG.md
View file

@ -935,3 +935,5 @@
- Minor update to `input_control`'s code to fix a small problem with it. - Minor update to `input_control`'s code to fix a small problem with it.
- Started developing `mini-lite` flavor (`lite`) as a very lightweight barebones base for the framework, using the default style for the most part. Size is under `5KB` for starters. - Started developing `mini-lite` flavor (`lite`) as a very lightweight barebones base for the framework, using the default style for the most part. Size is under `5KB` for starters.
- Updated `lite`, removed extra stuff, made it as simple as possible, still under `5KB`.
- Tested `lite` using a quick demo in `Codepen` (*TODO* actually make a demo of it in a Codepen), no problems found, runs great.

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

@ -1,89 +1,79 @@
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully. // This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments, // Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
// structured like the flavor description below, will be included in your final CSS file. // structured like the flavor description below, will be included in your final CSS file.
// Note: This flavor is not a full flavor, we strongly recommend you duplicate the mini-default flavor instead
// of this file, unless you know what you are doing.
/* /*
Flavor name: Lite (mini-lite) Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.1.1 (Fermion) mini.css version: v2.1.1 (Fermion)
*/ */
// Basic rules for body and typography // Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color $fore-color: #212121; // Text and general foreground color
$back-color: #f5f5f5; // Body background color $back-color: #f5f5f5; // Body background color
$base-font-family: // Default font stack for all elements: $base-font-family: // Default font stack for all elements:
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif'; '-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts // OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
$base-root-font-size: 16px; // Root font sizing for all elements [1] $base-root-font-size: 16px; // Root font sizing for all elements [1]
$base-font-size: 1em; // Default font sizing for all elements [2] $base-font-size: 1em; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements. $base-line-height: 1.5; // Default line height for all elements.
$body-margin: 0; // Margin for the body $body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all 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 $h1-font-size: 2em; // Font size of h1
$h2-font-size: 1.5em; // Font size for h2 $h2-font-size: 1.5em; // Font size for h2
$h3-font-size: 1.25em; // Font size for h3 $h3-font-size: 1.25em; // Font size for h3
$h4-font-size: 1.1em; // Font size for h4 $h4-font-size: 1.1em; // Font size for h4
$h5-font-size: 1em; // Font size for h5 $h5-font-size: 1em; // Font size for h5
$h6-font-size: 0.85em; // Font size for h6 $h6-font-size: 0.85em; // Font size for h6
$heading-line-height: 1.2em; // Line height for all headings $heading-line-height: 1.2em; // Line height for all headings
$heading-margin: 12px 8px; // Margin for all headings $heading-margin: 12px 8px; // Margin for all headings
$heading-font-weight: 500; // Font weight for all headings $heading-font-weight: 500; // Font weight for all headings
$heading-smalltext-fore-color: #424242; // <small> color in headings $heading-smalltext-fore-color: #424242; // <small> color in headings
$make-heading-smalltext-block: true; // Should <small> elements in headings 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-font-size: 75%; // Font size of block <small> elements in headings
$heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings $heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings
$paragraph-margin: 1px 8px; // Margin for <p> elements $paragraph-margin: 1px 8px; // Margin for <p> elements
$list-margin: 1px 8px 10px; // Margin for <ol> and <ul> elements $list-margin: 1px 8px 10px; // Margin for <ol> and <ul> elements
$list-left-padding: 28px; // Left padding for <ol> and <ul> elements $list-left-padding: 28px; // Left padding for <ol> and <ul> elements
$bold-font-weight: 700; // Font weight for <b> and <strong> $bold-font-weight: 700; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.25em; // <hr> line height $horizontal-rule-line-height: 1.25em; // <hr> line height
$horizontal-rule-margin: 8px; // <hr> margin $horizontal-rule-margin: 8px; // <hr> margin
$horizontal-rule-border-style: 1px solid #757575;// Border style for horizontal rules (used in the <hr> element's border-top) $horizontal-rule-border-style: 1px solid #424242; // 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-style: false; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
$horizontal-rule-fancy-gradient:"to right, #bdbdbd, #616161, #bdbdbd"; // Gradient style for fancy horizontal rule $blockquote-back-color: #eeeeee; // Background color for <blockquote>
$blockquote-back-color: #eeeeee; // Background color for <blockquote> $blockquote-fore-color: $fore-color; // Text color for <blockquote>
$blockquote-fore-color: $fore-color; // Text color for <blockquote> $blockquote-margin: 8px 10px; // Margin for <blockquote>
$blockquote-margin: 8px 10px; // Margin for <blockquote> $blockquote-padding: 6px 10px 24px; // Padding for <blockquote>
$blockquote-padding: 6px 10px 24px; // Padding for <blockquote> $blockquote-sidebar-style: 0; // Style for the sidebar of <blockquote>
$blockquote-sidebar-style: 3px solid #616161; // Style for the sidebar of <blockquote> $blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote>
$blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote> $blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote>
$blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote> $blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote> $blockquote-cite-bottom-position: 0; // Bottom 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-style: 0; // Border style for <blockquote> $blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote> $blockquote-box-shadow: none; // Box shadow for <blockquote>
$blockquote-box-shadow: // Box shadow for <blockquote>
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
$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-padding: 2px 4px; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code> $code-element-fore-color: $fore-color; // Text color for <code>
$code-element-back-color: #e0e0e0; // Background color for <code> $code-element-back-color: #e0e0e0; // Background color for <code>
$code-element-border-style: 0; // Border style for <code> $code-element-border-style: 0; // Border style for <code>
$code-element-border-radius: 2px; // Border radius for <code> $code-element-border-radius: 2px; // Border radius for <code>
$code-element-box-shadow: // Box shadow for <code> $code-element-box-shadow: none; // 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-padding: 12px; // Padding for <pre>
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre> $pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
$pre-element-back-color: $code-element-back-color; // Background color for <pre> $pre-element-back-color: $code-element-back-color; // Background color for <pre>
$pre-element-border-style: 0; // Border style for <pre> $pre-element-border-style: 0; // Border style for <pre>
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre> $pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
$pre-element-margin: 8px 10px; // Margin for <pre> $pre-element-margin: 8px 10px; // Margin for <pre>
$pre-element-box-shadow: // Box shadow for <pre> $pre-element-box-shadow: false; // 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: false; // 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 #1565c0; // Style of the sidebar of <pre>
$kbd-element-padding: 2px 4px; // Padding for <kbd> $kbd-element-padding: 2px 4px; // Padding for <kbd>
$kbd-element-fore-color: #fafafa; // Text color for <kbd> $kbd-element-fore-color: #fafafa; // Text color for <kbd>
$kbd-element-back-color: $fore-color; // Background color for <kbd> $kbd-element-back-color: $fore-color; // Background color for <kbd>
$kbd-element-border-style: 0; // Border style for <kbd> $kbd-element-border-style: 0; // Border style for <kbd>
$kbd-element-border-radius: 2px; // Border radius for <kbd> $kbd-element-border-radius: 2px; // Border radius for <kbd>
$kbd-element-box-shadow: // Box shadow for <kbd> $kbd-element-box-shadow: none; // 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]
$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: #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] $include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
$small-font-size: 75%; // Font size for <small> elements $small-font-size: 75%; // Font size for <small> elements
$sup-font-size: 75%; // Font size for <sup> elements $sup-font-size: 75%; // Font size for <sup> elements
@ -95,7 +85,6 @@ $link-visited-fore-color: #01579b; // Text color for visited <a>
$link-font-weight: 500; // Font weight for <a> $link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10] $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-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: #0288d1; // Text color for <a> when hovered or focused
$figcaption-font-size: 80%; // Font size of <figcaption> elements $figcaption-font-size: 80%; // Font size of <figcaption> elements
$figcaption-fore-color: #424242; // Text color for <figcaption> elements $figcaption-fore-color: #424242; // Text color for <figcaption> elements
// Notes: // Notes:
@ -153,8 +142,7 @@ $header-fore-color: #fafafa; // Text color for <header>
$header-border-style: 0; // Border style for <header> $header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header> $header-margin: 0; // Margin for <header>
$header-padding: 2px 8px; // Padding for <header> $header-padding: 2px 8px; // Padding for <header>
$header-box-shadow: // Box shadow for <header> $header-box-shadow: none; // 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-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75em; // Font size for <header>'s logo $header-logo-font-size: 1.75em; // Font size for <header>'s logo
$header-logo-line-height: 1.2; // Line height for <header>'s logo $header-logo-line-height: 1.2; // Line height for <header>'s logo
@ -188,8 +176,7 @@ $form-border-style: 1px solid #bdbdbd; // Border style for forms
$form-border-radius: 0; // Border radius for forms $form-border-radius: 0; // Border radius for forms
$form-margin: 8px; // Margin for forms $form-margin: 8px; // Margin for forms
$form-padding: 12px 10px 18px; // Padding for forms $form-padding: 12px 10px 18px; // Padding for forms
$form-box-shadow: // Box shadow for forms $form-box-shadow: none; // 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-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset $fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset
$fieldset-border-radius:2px; // Border radius for fieldset $fieldset-border-radius:2px; // Border radius for fieldset
@ -222,8 +209,7 @@ $button-border-style: 0; // Border style for button elements
$button-border-radius: 2px; // Border radius for button elements $button-border-radius: 2px; // Border radius for button elements
$button-padding: 8px 12px; // Padding for button elements $button-padding: 8px 12px; // Padding for button elements
$button-margin: 8px; // Margin for button elements $button-margin: 8px; // Margin for button elements
$button-box-shadow: // Box shadow for buttons $button-box-shadow: none; // 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-disabled-opacity: 0.65; // Disabled button elements opacity
$button-class-name: 'button'; // Class for custom button elements $button-class-name: 'button'; // Class for custom button elements
$include-button-group: false; // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2] $include-button-group: false; // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
@ -243,11 +229,6 @@ $button-variant3-back-color: #689f38; // Background color for button varia
$button-variant3-back-opacity: 0.85; // Background opacity 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-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
$button-variant3-fore-color: #fafafa; // Text color for button variant 3 $button-variant3-fore-color: #fafafa; // 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: #fafafa; // Text color for button variant 4
$button-style1-name: 'small'; // Class name for button style 1 $button-style1-name: 'small'; // Class name for button style 1
$button-style1-border-style: 0; // Border style for button style 1 $button-style1-border-style: 0; // Border style for button style 1
$button-style1-border-radius: 1px; // Border radius for button style 1 $button-style1-border-radius: 1px; // Border radius for button style 1
@ -281,8 +262,7 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
$table-border-style: 1px solid #bdbdbd; // Border style for <table> and children $table-border-style: 1px solid #bdbdbd; // Border style for <table> and children
$table-border-radius: 0; // Border radius for <table> and children $table-border-radius: 0; // Border radius for <table> and children
$table-margin: 0 auto; // Margin for <table> $table-margin: 0 auto; // Margin for <table>
$table-box-shadow: // Box shadow for <table> $table-box-shadow: none; // 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-font-size: 1.5em; // Font size for <caption>
$table-caption-margin: 6px 8px 12px; // Margin for <caption> $table-caption-margin: 6px 8px 12px; // Margin for <caption>
$table-row-padding: 8px; // Padding for <tr> - both views $table-row-padding: 8px; // Padding for <tr> - both views
@ -317,24 +297,11 @@ $card-section-padding: 6px 8px 6px; // Padding for card sections
$card-section-media-name: 'media'; // Class name for card media sections $card-section-media-name: 'media'; // Class name for card media sections
$card-section-media-height: 200px; // Height for card media setions $card-section-media-height: 200px; // Height for card media setions
$card-normal-width: 320px; // Width for normal cards $card-normal-width: 320px; // Width for normal cards
$card-size1-name: 'large'; // Class name for large cards $card-size1-name: 'fluid'; // Class name for fluid cards
$card-size1-width: 480px; // Width for large cards $card-size1-width: 100%; // Width for fluid 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: #fafafa; // Text color for card style 1
$card-style1-border-style: 1px solid #424242; // Border style for card style 1
$card-style1-border-radius: 0; // Border radius for card style 1
$card-style1-section-border-style:1px solid #616161;// Border style for card style 1 sections
$card-section-style1-name: 'dark'; // Class name for card section style 1 $card-section-style1-name: 'dark'; // Class name for card section style 1
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1 $card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1 $card-section-style1-fore-color: $fore-color; // Text color for card section style 1
$card-section-style2-name: 'darker'; // Class name for card section style 2
$card-section-style2-back-color:#bdbdbd; // 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-name: 'double-padded'; // Class name for card section padding style 1
$card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1 $card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
// Notes: // Notes:
@ -392,12 +359,6 @@ $progress-variant1-name: 'secondary'; // Class name for <progress> variant
$progress-variant1-fore-color:#e53935; // Progress bar color for <progress> variant 1 $progress-variant1-fore-color:#e53935; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2 $progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
$progress-variant2-fore-color:#689f38; // Progress bar color for <progress> variant 2 $progress-variant2-fore-color:#689f38; // 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
$include-spinner-donut: false; // [Hidden flag override] Should spinner donuts be enabled? (`true`/`false`) [1] $include-spinner-donut: false; // [Hidden flag override] Should spinner donuts be enabled? (`true`/`false`) [1]
// Notes : // Notes :
// [1] - Due to the value of $include-spinner-donut being set to `false`, the spinner // [1] - Due to the value of $include-spinner-donut being set to `false`, the spinner
@ -439,8 +400,6 @@ $responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for
$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color); $button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color, @include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color); $button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
@include make-button-alt-style ($button-style1-name, $button-style1-border-style, @include make-button-alt-style ($button-style1-name, $button-style1-border-style,
$button-style1-border-radius, $button-style1-padding, $button-style1-margin); $button-style1-border-radius, $button-style1-padding, $button-style1-margin);
@include make-button-alt-style ($button-style2-name, $button-style2-border-style, @include make-button-alt-style ($button-style2-name, $button-style2-border-style,
@ -451,14 +410,8 @@ $responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for
Custom elements for cards and containers. Custom elements for cards and containers.
*/ */
@include make-card-alt-size ($card-size1-name, $card-size1-width); @include make-card-alt-size ($card-size1-name, $card-size1-width);
@include make-card-alt-size ($card-size2-name, $card-size2-width);
@include make-card-alt-size ($card-size3-name, $card-size3-width);
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color, @include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
$card-section-style1-fore-color); $card-section-style1-fore-color);
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
$card-section-style2-fore-color);
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding); @include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
// --- --- --- // --- --- ---
// Tab module is disabled for this flavor. // Tab module is disabled for this flavor.
@ -481,9 +434,6 @@ $responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for
@include make-progress-inline ($progress-inline-name, $progress-inline-width); @include make-progress-inline ($progress-inline-name, $progress-inline-width);
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color); @include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color); @include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
$progress-style1-border-style, $progress-style1-border-radius);
@import '../mini/utility'; @import '../mini/utility';
/* /*
Custom elements for utilities and helper classes. Custom elements for utilities and helper classes.