Added PWA flavor
Added a flavor targeting Android and mobile devices in general.
This commit is contained in:
Angelos Chalaris
parent
f95f90a28d
commit
b36daa59fd
18 changed files with 1894 additions and 13 deletions
|
|
@ -1,5 +1,9 @@
|
|||
# Changelog
|
||||
|
||||
## v2.3.3
|
||||
|
||||
- Added a new `mini-pwa` flavor, targeting Android and mobile devices in general.
|
||||
|
||||
## v2.3.2
|
||||
|
||||
- Improved the styling of `select` to be a bit lighter in terms of size.
|
||||
|
|
|
|||
2
dist/mini-dark.css
vendored
2
dist/mini-dark.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Dark (mini-dark)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
|
|||
2
dist/mini-default.css
vendored
2
dist/mini-default.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
|
|||
2
dist/mini-lite.css
vendored
2
dist/mini-lite.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Lite (mini-lite)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
|
|||
2
dist/mini-nord.css
vendored
2
dist/mini-nord.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Nord (mini-nord)
|
||||
Author: tphecca (https://github.com/tphecca)
|
||||
Maintainers: tphecca
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
|
|||
1393
dist/mini-pwa.css
vendored
Normal file
1393
dist/mini-pwa.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
dist/mini-pwa.min.css
vendored
Normal file
1
dist/mini-pwa.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/mini-sucroa.css
vendored
2
dist/mini-sucroa.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Sucroa (mini-sucroa)
|
||||
Author: Angeliki Daskalakis
|
||||
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
<h1>Flavors</h1>
|
||||
<p style="text-align:justify">One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.2/dist/mini-default.min.css"</span>></pre><br>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p style="text-align:justify">There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
|
||||
<ul style="margin-left:0px; padding-left: 4px">
|
||||
<li class="card fluid">
|
||||
|
|
@ -92,6 +92,15 @@
|
|||
<p><strong>Size:</strong> 7 KB</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="card fluid">
|
||||
<h2 class="section double-padded">Progressive Web App <a href="http://codepen.io/chalarangelo/pen/KqEOjy" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a><small>mini-pwa</small></h2>
|
||||
<pre class="section double-padded" style="border-left:0; box-shadow: none;"><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-pwa.min.css"</span>></pre>
|
||||
<p class="section double-padded" style="text-align:justify">The Progressive Web App flavor follows the <a href="https://material.io/">Google Material Design Guidelines</a> and targets mobile devices and especially those based on the Android operating system. It uses mostly the default naming conventions (<code>.primary</code> etc.). The grid system has 12 columns and most components use rounded corners with soft shadows. To make the flavor lighter, button groups, horizontal and vertical tables, certain card styles, the entirety of the progress and tab modules, along with tooltips, navigation bars, modals and most style variants are not included. Finally, the card module's <code>.dark</code> class has been replaced by the <code>.accent</code> class.</p>
|
||||
<div class="section double-padded">
|
||||
<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
|
||||
<p><strong>Size:</strong> 5 KB</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p style="text-align:justify">If you would rather modify one of the pre-defined flavors or create your own, check out our <a href="customization">customization</a> page for instructions.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@
|
|||
<br/>
|
||||
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.2/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
||||
<hr>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
</div><br>
|
||||
<p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.2/dist/mini-default.min.css"</span>></pre><br>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.3/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p style="text-align:justify">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
||||
<p style="text-align:justify">We strongly suggest you add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
|
||||
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre>
|
||||
|
|
|
|||
|
|
@ -1274,3 +1274,9 @@
|
|||
- Added `$apply-select-fix` to the `input_control` module, disabled the fix for `mini-lite` to make the flavor lighter.
|
||||
- Updated `select` styles to utilize some smart tricks, reducing size by a sliver (about `0.03KB` less when gzipped).
|
||||
- Released the **v2.3.2** hotfix.
|
||||
|
||||
# v2.3.3 Development Log
|
||||
|
||||
## 20170715
|
||||
|
||||
- Worked on the `mini-pwa` flavor. Updated everything and released `v2.3.3`.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Flavor name: Dark (mini-dark)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #d0d0d0; // Text and general foreground color
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
Flavor name: Lite (mini-lite)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Flavor name: Nord (mini-nord)
|
||||
Author: tphecca (https://github.com/tphecca)
|
||||
Maintainers: tphecca
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
|
||||
// Basic rules for body and typography
|
||||
|
|
|
|||
468
src/flavors/mini-pwa.scss
Normal file
468
src/flavors/mini-pwa.scss
Normal file
|
|
@ -0,0 +1,468 @@
|
|||
// 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: Progressive Web App (mini-pw)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
$back-color: #eeeeee; // 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]
|
||||
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [1]
|
||||
$base-font-size: 1rem; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$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: 2.4375rem; // Font size of h1
|
||||
$h2-font-size: 1.935rem; // Font size for h2
|
||||
$h3-font-size: 1.5625rem; // Font size for h3
|
||||
$h4-font-size: 1.25rem; // Font size for h4
|
||||
$h5-font-size: 1rem; // Font size for h5
|
||||
$h6-font-size: 0.8125rem; // Font size for h6
|
||||
$heading-line-height: 1.25em; // Line height for all headings
|
||||
$heading-margin: 0.75rem 0.5rem; // 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: 0.75em; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-0.25em; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 0.5rem; // Margin for <p> elements
|
||||
$list-margin: 0.5rem; // Margin for <ol> and <ul> elements
|
||||
$list-left-padding: 1.25rem; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 600; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5rem; // <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: false; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$blockquote-back-color: #e0e0e0; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 0.5rem; // Margin for <blockquote>
|
||||
$blockquote-padding: 0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 4*$_1px solid #3f51b5;// Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 0.625rem; // 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 3*$_1px 3*$_1px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: // Box shadow for <blockquote>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||
$code-element-padding: 0.125rem 0.25rem; // 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: 2*$_1px; // Border radius for <code>
|
||||
$code-element-box-shadow: // Box shadow for <code>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$pre-element-padding: 0.75rem; // 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 3*$_1px 3*$_1px 0;// Border radius for <pre>
|
||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||
$pre-element-box-shadow: // Box shadow for <pre>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 4*$_1px solid #303f9f;// Style of the sidebar of <pre>
|
||||
$kbd-element-padding: $code-element-padding; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
|
||||
$kbd-element-back-color: #212121; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: $code-element-border-radius; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: $code-element-box-shadow; // 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: 0.75em; // Font size for <small> elements
|
||||
$sup-font-size: 0.75em; // Font size for <sup> elements
|
||||
$sub-font-size: 0.75em; // Font size for <sub> elements
|
||||
$sup-top: -0.5em; // <sup> top
|
||||
$sub-bottom: -0.25em; // <sub> bottom
|
||||
$link-fore-color: #3f51b5; // Text color for <a>
|
||||
$link-visited-fore-color: #3f51b5; // 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]
|
||||
$figcaption-font-size: 0.8125rem; // 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. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
|
||||
// the way that it's calculated.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// color, as defined in $link-fore-color.
|
||||
// [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; // 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: 0.75rem; // 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-padding: 0 0.25rem; // Padding for the columns of the 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 forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: $_1px solid #bdbdbd; // Border style for forms
|
||||
$form-border-radius: 3*$_1px; // Border radius for forms
|
||||
$form-margin: 0.5rem; // Margin for forms
|
||||
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
|
||||
$form-box-shadow: // Box shadow for forms
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: $_1px solid #e0e0e0; // Border style for fieldset
|
||||
$fieldset-border-radius: 2*$_1px; // Border radius for fieldset
|
||||
$fieldset-margin: 0.125rem; // Margin for fieldset
|
||||
$fieldset-padding: 0.5rem; // Padding for fieldset
|
||||
$legend-font-weight: 600; // Font weight for legend
|
||||
$legend-font-size: 0.875rem; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 0.125rem 0.25rem; // Padding for legend
|
||||
$label-padding: 0.25rem 0.5rem; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: false; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$include-vertical-input-group: true; // Should vertical input grooups be included? (`true`/`false`) [1]
|
||||
$input-back-color: #fafafa; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: $_1px solid #bdbdbd; // Border style for input
|
||||
$input-border-radius: 2*$_1px; // Border radius for input
|
||||
$input-margin: 0.25rem; // Margin for input
|
||||
$input-padding: 0.5rem 0.75rem; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
$input-invalid-border-color: #d32f2f; // 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
|
||||
$apply-select-fix: false; // [Hidden flag override] Should the styles that fix <select> styling be applied? (`true`/`false`)
|
||||
$button-back-color: #e0e0e0; // Back color for button elements
|
||||
$button-back-opacity: 1; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // 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: 3*$_1px; // Border radius for button elements
|
||||
$button-padding: 0.625rem 0.875rem; // Padding for button elements
|
||||
$button-margin: 0.5rem; // Margin for button elements
|
||||
$button-box-shadow: // Box shadow for buttons
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$button-disabled-opacity:0.75; // 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]
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #303f9f; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 1; // 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: #fafafa; // Text color for button variant 1
|
||||
$checkbox-size: 1rem; // Size for checkbox/radio [4]
|
||||
$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: #bdbdbd; // 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: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$checkbox-box-shadow: none; // Box shadow for checkbox/radio
|
||||
$include-switch: false; // Should switch components be included? (`true`/`false`) [5]
|
||||
// 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. The same applies for $include-vertical-input-group and vertical input groups.
|
||||
// [2] - Due to the fact that the value of $include-button-group is set to `false`, no button group styles will be created.
|
||||
// If you wish to enable them, please refer to a full flavor for the required variables.
|
||||
// [3] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
// [5] - Due to the fact that the value of $include-switch is set to `false`, no switch styles will be created.
|
||||
// If you wish to enable them, please refer to a full flavor for the required variables.
|
||||
$header-height: 3rem; // Height for <header>
|
||||
$header-back-color: #283593; // Background color for <header>
|
||||
$header-fore-color: #fafafa; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.25rem 0.75rem; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #303f9f; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 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>
|
||||
$include-nav-styles: false; // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: #f5f5f5; // Background color of the drawer component
|
||||
$drawer-border-style: 1px solid #bdbdbd; // Border style of the drawer component
|
||||
$drawer-border-radius: 0; // Border radius of the drawer component
|
||||
$drawer-width: 320px; // Width of the drawer component
|
||||
$drawer-padding: 0; // Padding of the drawer component
|
||||
$drawer-box-shadow: // Box shadow for the drawer component
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
|
||||
$drawer-normal-height: calc(100vh - 3rem); // Height of the drawer component when shown as normal menu
|
||||
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
|
||||
$drawer-persistent-name: 'drawer'; // Class name for the persisten variant of the drawer component
|
||||
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
|
||||
$drawer-toggle-font-size: 2.5rem; // Font size for the drawer component's toggle icon
|
||||
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
|
||||
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon
|
||||
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
|
||||
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon
|
||||
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon
|
||||
$footer-back-color: #283593; // Background color for <footer>
|
||||
$footer-fore-color: #fafafa; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #f5f5f5; // Text color for links in <footer>
|
||||
$include-footer-sticky: false; // 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.
|
||||
// [2] - Due to the fact that the value of $include-nav-styles is set to `false`, <nav> elements
|
||||
// will not be stylized. If you set it to `true`, please refer to a full flavor
|
||||
// to find the required variable definitions.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: $_1px solid #bdbdbd; // Border style for <table> and children
|
||||
$table-border-radius: 3*$_1px; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$table-caption-font-size: 1.5rem; // Font size for <caption>
|
||||
$table-caption-margin: 0.5rem; // Margin for <caption>
|
||||
$table-row-padding: 0.5rem; // Padding for <tr> - both views
|
||||
$table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #f5f5f5; // Background color for <th>
|
||||
$table-head-fore-color: #424242; // Text color for <th>
|
||||
$table-body-back-color: #fafafa; // 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: 0.625rem; // 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: false; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$include-scrollable-table: false; // Should scrollable <table> elements be included? (`true`/`false`) [2]
|
||||
$include-striped-table: false; // [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
|
||||
// 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.
|
||||
// [2] - Due to the $include-horizontal-table, $include-scrollable-table and $include-striped-table flags being set to `false`,
|
||||
// no styling will be provided for horizontal, scrollable and striped <table> elements. Please refer to a full fulavor to find
|
||||
// the variables associated with these components, if you want to enable them.
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: $_1px solid #bdbdbd; // Border style for cards
|
||||
$card-border-radius: 3*$_1px; // Border radius for cards
|
||||
$card-margin: 0.5rem; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: $_1px solid #bdbdbd;// Border style for card sections
|
||||
$card-section-padding: 0.75rem; // 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: 'fluid'; // Class name for fluid cards
|
||||
$card-size1-width: 100%; // Width for fluid cards
|
||||
$card-section-style1-name: 'accent'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #303f9f; // Background color for card section style 1
|
||||
$card-section-style1-border-style: $_1px solid #283593; // Border style for card section style 1
|
||||
$card-section-style1-fore-color: #fafafa; // Text color for card section style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// --- --- ---
|
||||
// No variables specified for the tab module. This module is disabled by default.
|
||||
// To re-enable it, please refer to a full flavor for variables and documentation.
|
||||
// --- --- ---
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #283593; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 0.9375em; // Font size for <mark>
|
||||
$mark-line-height: 1em; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2*$_1px; // Border radius for <mark>
|
||||
$mark-padding: 0.25em 0.375em; // Padding for <mark>
|
||||
$mark-margin: 0.125rem; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$toast-name: 'toast'; // Class name for toast component
|
||||
$toast-bottom: 1.5rem; // Bottom position for toasts
|
||||
$toast-back-color: $fore-color; // Background color for toasts
|
||||
$toast-fore-color: #fafafa; // Text color for toasts
|
||||
$toast-border-style: 0; // Border style for toasts
|
||||
$toast-border-radius: 2rem; // Border radius for toasts
|
||||
$toast-padding: 0.75rem 1.5rem; // Padding for toasts
|
||||
$toast-box-shadow: // Box shadow for toasts
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$include-tooltip: false; // Should tooltips be included? (`true`/`false`) [1]
|
||||
$include-modal: false; // Should modals be included? (`true`/`false`) [1]
|
||||
// Notes:
|
||||
// [1] - Due to the values of $include-tooltip and $include-modal being set
|
||||
// to `false`, no styling is provided for these elements. If you want to enable them, please
|
||||
// refer to a full flavor file for variable definitions.
|
||||
// --- --- ---
|
||||
// No variables specified for the progress module. This module is disabled by default.
|
||||
// To re-enable it, please refer to a full flavor for variables and documentation.
|
||||
// --- --- ---
|
||||
// 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
|
||||
$include-breadcrumbs: false; // [Hidden flag override] Should breadcrumbs be included? (`true`/`false`) [1]
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 1.5rem; // Size of the close icon
|
||||
$close-icon-back-color: #e0e0e0; // Background color for the close icon
|
||||
$close-icon-fore-color: #212121; // Foreground color for the close icon
|
||||
// Notes:
|
||||
// [1] - Due to the values of $include-breadcrumbs being set to `false`, this element will
|
||||
// not be included. Refer to a full flavor file for help on how to enable them.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
|
||||
/*
|
||||
Custom style fixes and tweaks for input elements.
|
||||
*/
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.button, label.button, .button,
|
||||
a[role="button"], label[role="button"], [role="button"], label{
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
|
||||
a.button:hover,
|
||||
a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
|
||||
a[role="button"]:hover,
|
||||
a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
|
||||
background: #e5e5e5;
|
||||
box-shadow: 0 3*$_1px 3*$_1px 0 rgba(0,0,0,0.14),0 1*$_1px 7*$_1px 0 rgba(0,0,0,0.12),0 3*$_1px 1*$_1px -1*$_1px rgba(0,0,0,0.2);
|
||||
}
|
||||
button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus,
|
||||
[type="reset"].primary:hover,
|
||||
[type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
|
||||
background: #3f51b5;
|
||||
}
|
||||
@import '../mini/navigation';
|
||||
/*
|
||||
Custom style fixes and tweaks for input elements.
|
||||
*/
|
||||
.drawer-toggle::before{
|
||||
line-height: 0.3125;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.drawer-toggle:not(.drawer) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.drawer {
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a, label:not(.close), [role="button"] {
|
||||
display: block;
|
||||
margin: 0;
|
||||
background: #f5f5f5;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
border-radius: 0;
|
||||
&:hover, &:focus {
|
||||
background: #fafafa;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../mini/table';
|
||||
/*
|
||||
Custom style fixes and tweaks for table elements.
|
||||
*/
|
||||
th, table:not(.preset) td:before {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
table:not(.preset) td:before {
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
}
|
||||
th, td {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color, $card-section-style1-border-style);
|
||||
// --- --- ---
|
||||
// Tab module is disabled for this flavor.
|
||||
// @import '../mini/tab';
|
||||
// --- --- ---
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom style fixes and tweaks for contextual elements.
|
||||
*/
|
||||
.toast {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
// --- --- ---
|
||||
// Progress module is disabled for this flavor.
|
||||
// @import '../mini/progress';
|
||||
// --- --- ---
|
||||
@import '../mini/utility';
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
Flavor name: Sucroa (mini-sucroa)
|
||||
Author: Angeliki Daskalakis
|
||||
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.3.2
|
||||
mini.css version: v2.3.3
|
||||
*/
|
||||
// Google Fonts imports and usage
|
||||
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
|
||||
|
|
|
|||
Loading…
Reference in a new issue