Finalized mini-lite flavor
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
parent
e6ab5fc448
commit
12658813a9
87
dist/mini-lite.css
vendored
87
dist/mini-lite.css
vendored
|
|
@ -116,9 +116,8 @@ hr {
|
|||
overflow: visible;
|
||||
line-height: 1.25em;
|
||||
margin: 8px;
|
||||
height: 1px;
|
||||
background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
|
||||
background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
|
||||
height: 0;
|
||||
border-top: 1px solid #424242;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
@ -128,9 +127,7 @@ blockquote {
|
|||
background: #eeeeee;
|
||||
margin: 8px 10px;
|
||||
padding: 6px 10px 24px;
|
||||
border-left: 3px solid #616161;
|
||||
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 {
|
||||
|
|
@ -151,7 +148,6 @@ code {
|
|||
border-radius: 2px;
|
||||
background: #e0e0e0;
|
||||
padding: 2px 4px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
@ -160,8 +156,7 @@ pre {
|
|||
background: #e0e0e0;
|
||||
padding: 12px;
|
||||
margin: 8px 10px;
|
||||
border-left: 3px solid #1565c0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: false;
|
||||
}
|
||||
|
||||
kbd {
|
||||
|
|
@ -169,7 +164,6 @@ kbd {
|
|||
background: #212121;
|
||||
color: #fafafa;
|
||||
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 {
|
||||
|
|
@ -719,7 +713,6 @@ header {
|
|||
background: #263238;
|
||||
color: #fafafa;
|
||||
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;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -742,7 +735,6 @@ header a[role="button"], header label[role="button"], header [role="button"] {
|
|||
color: #fafafa;
|
||||
vertical-align: top;
|
||||
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,
|
||||
|
|
@ -794,7 +786,6 @@ form {
|
|||
border: 1px solid #bdbdbd;
|
||||
margin: 8px;
|
||||
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 {
|
||||
|
|
@ -910,7 +901,6 @@ a[role="button"], label[role="button"], [role="button"] {
|
|||
border-radius: 2px;
|
||||
padding: 8px 12px;
|
||||
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;
|
||||
-webkit-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;
|
||||
}
|
||||
|
||||
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,
|
||||
[type="reset"].small, .button.small, [role="button"].small {
|
||||
border-radius: 1px;
|
||||
|
|
@ -1089,7 +1066,6 @@ table {
|
|||
border-spacing: 0;
|
||||
border: 1px solid #bdbdbd;
|
||||
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 {
|
||||
|
|
@ -1128,7 +1104,6 @@ table th:first-child, table td:first-child {
|
|||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
table:not(.preset) thead, table:not(.preset) th {
|
||||
border: 0;
|
||||
|
|
@ -1145,7 +1120,6 @@ table th:first-child, table td:first-child {
|
|||
table:not(.preset) tr {
|
||||
display: block;
|
||||
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;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -1221,45 +1195,15 @@ table th:first-child, table td:first-child {
|
|||
/*
|
||||
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 {
|
||||
max-width: 100%;
|
||||
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 {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
.card > .section.darker {
|
||||
background: #bdbdbd;
|
||||
}
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 10px 12px 10px;
|
||||
}
|
||||
|
|
@ -1387,31 +1331,6 @@ progress.tertiary::-moz-progress-bar {
|
|||
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.
|
||||
*/
|
||||
|
|
|
|||
2
dist/mini-lite.min.css
vendored
2
dist/mini-lite.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -935,3 +935,5 @@
|
|||
|
||||
- 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.
|
||||
- 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.
|
||||
|
|
|
|||
|
|
@ -1,89 +1,79 @@
|
|||
// 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,
|
||||
// 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)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.1.1 (Fermion)
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
$back-color: #f5f5f5; // Body background color
|
||||
$base-font-family: // Default font stack for all elements:
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
$back-color: #f5f5f5; // 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-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
|
||||
$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
|
||||
$h6-font-size: 0.85em; // Font size for h6
|
||||
$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
|
||||
$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-fancy-gradient:"to right, #bdbdbd, #616161, #bdbdbd"; // Gradient style for fancy horizontal rule
|
||||
$blockquote-back-color: #eeeeee; // 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: 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);
|
||||
$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]
|
||||
$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
|
||||
$h6-font-size: 0.85em; // Font size for h6
|
||||
$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
|
||||
$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 #424242; // Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: false; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$blockquote-back-color: #eeeeee; // 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: 0; // 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: none; // Box shadow for <blockquote>
|
||||
$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: #e0e0e0; // 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);
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
$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>
|
||||
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 #1565c0; // Style of the sidebar of <pre>
|
||||
$pre-element-box-shadow: false; // Box shadow for <pre>
|
||||
$add-pre-element-sidebar: false; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$kbd-element-padding: 2px 4px; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #fafafa; // 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: #2196f3; // Background color for <samp>
|
||||
//$samp-element-border-style: 0; // Border style for <samp>
|
||||
//$samp-element-border-radius:2px; // Border radius for <samp>
|
||||
$kbd-element-box-shadow: none; // Box shadow for <kbd>
|
||||
$style-samp-element: false; // Should styles for <samp> be included? (`true`/`false`) [8]
|
||||
$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
|
||||
|
|
@ -95,7 +85,6 @@ $link-visited-fore-color: #01579b; // 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: #0288d1; // 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:
|
||||
|
|
@ -153,8 +142,7 @@ $header-fore-color: #fafafa; // Text color for <header>
|
|||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 2px 8px; // Padding 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-box-shadow: none; // Box shadow for <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
|
||||
|
|
@ -188,8 +176,7 @@ $form-border-style: 1px solid #bdbdbd; // 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
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$form-box-shadow: none; // Box shadow for forms
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #bdbdbd; // Border style 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-padding: 8px 12px; // Padding for button elements
|
||||
$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-box-shadow: none; // Box shadow for buttons
|
||||
$button-disabled-opacity: 0.65; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$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-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-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-border-style: 0; // Border style 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-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin 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-box-shadow: none; // Box shadow for <table>
|
||||
$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
|
||||
|
|
@ -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-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: #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-size1-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size1-width: 100%; // Width for fluid cards
|
||||
$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-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-padding: 10px 12px 10px; // Padding for card section padding style 1
|
||||
// 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-variant2-name: 'tertiary'; // Class name 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]
|
||||
// Notes :
|
||||
// [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);
|
||||
@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);
|
||||
@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,
|
||||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@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.
|
||||
*/
|
||||
@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,
|
||||
$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);
|
||||
// --- --- ---
|
||||
// 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-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-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';
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
|
|
|
|||
Loading…
Reference in a new issue