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

Housekeeping

Browse source 
Updated codebase to use spaces instead of tabs. Everything is ready to release v2.3.1.
This commit is contained in:
Angelos Chalaris 2017-06-19 15:47:00 +03:00
parent 987a7cefae
commit 3d6af8acc5
30 changed files with 5229 additions and 5217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGELOG.md
View file

@ -1,5 +1,11 @@
# Changelog
## v2.3.1
- Fixed an issue with `<select>` elements on certain devices (#80, #82).
- Fixed an issue with `<input>` elements' padding on certain devices (#81, #83).
- Updated codebase from tabs to spaces, should now look better on Github.
## v2.3.0
- Added a new `.modal` component, which allows you to show modal dialogs (`contextual`).

1
README.md
View file

@ -81,6 +81,7 @@ Special thanks to these fine folks for helping in the development of **mini.css*
- [Per Harald Borgen](https://scrimba.com/perborgen) - Introductory video creator
- Rory Primrose ([@roryprimrose](https://github.com/roryprimrose)) - Code restructure
- Sandro Magi ([@naasking](https://github.com/naasking)) - [Multiple](https://github.com/Chalarangelo/mini.css/issues?q=is%3Aissue+author%3Anaasking) suggestions, ideas, bug reports
- Wade Garrett ([@wad3g](https://github.com/wad3g)) - [Multiple](https://github.com/Chalarangelo/mini.css/pulls?q=is%3Apr+author%3Awad3g) fixes for issues and bugs
## License

20
dist/mini-dark.css vendored
View file

@ -1,9 +1,9 @@
@charset "UTF-8";
/*
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.1
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.1
*/
/*
Browsers resets and base typography.
@ -1043,7 +1043,7 @@ input[type="file"] {
}
/*
Custom elements for forms and input elements.
Custom elements for forms and input elements.
*/
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary, [role="button"].primary {
@ -1663,7 +1663,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Custom elements for cards and containers.
Custom elements for cards and containers.
*/
@media screen and (min-width: 480px) {
.card.large {
@ -1998,7 +1998,7 @@ mark.inline-block {
}
/*
Custom contextual background elements and alerts.
Custom contextual background elements and alerts.
*/
mark.secondary {
background: #e53935;
@ -2038,7 +2038,7 @@ progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 1rem;
height: 0.625rem;
width: 90%;
width: calc(100% - 1rem);
margin: 0.5rem 0.5rem;
@ -2102,7 +2102,7 @@ progress[value="1000"]::-moz-progress-bar {
}
/*
Custom elements for progress elements and spinners.
Custom elements for progress elements and spinners.
*/
progress.inline {
display: inline-block;
@ -2252,7 +2252,7 @@ ul.breadcrumbs li:last-child:after {
}
/*
Custom elements for utilities and helper classes.
Custom elements for utilities and helper classes.
*/
.bordered {
border: 1px solid rgba(0, 0, 0, 0.25) !important;

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

File diff suppressed because one or more lines are too long

18
dist/mini-default.css vendored
View file

@ -1,9 +1,9 @@
@charset "UTF-8";
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.1
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.1
*/
/*
Browsers resets and base typography.
@ -1042,7 +1042,7 @@ input[type="file"] {
}
/*
Custom elements for forms and input elements.
Custom elements for forms and input elements.
*/
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary, [role="button"].primary {
@ -1664,7 +1664,7 @@ table.striped tr:nth-of-type(2n) > td {
}
/*
Custom elements for cards and containers.
Custom elements for cards and containers.
*/
@media screen and (min-width: 480px) {
.card.large {
@ -1999,7 +1999,7 @@ mark.inline-block {
}
/*
Custom contextual background elements and alerts.
Custom contextual background elements and alerts.
*/
mark.secondary {
background: #e53935;
@ -2103,7 +2103,7 @@ progress[value="1000"]::-moz-progress-bar {
}
/*
Custom elements for progress elements and spinners.
Custom elements for progress elements and spinners.
*/
progress.inline {
display: inline-block;
@ -2253,7 +2253,7 @@ ul.breadcrumbs li:last-child:after {
}
/*
Custom elements for utilities and helper classes.
Custom elements for utilities and helper classes.
*/
.bordered {
border: 1px solid rgba(0, 0, 0, 0.25) !important;

20
dist/mini-lite.css vendored
View file

@ -1,12 +1,12 @@
@charset "UTF-8";
/*
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.1
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.1
*/
/*
Browsers resets and base typography.
Browsers resets and base typography.
*/
html {
font-size: 16px;
@ -913,7 +913,7 @@ input[type="file"] {
}
/*
Custom elements for forms and input elements.
Custom elements for forms and input elements.
*/
button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary, [role="button"].primary {
@ -1170,7 +1170,7 @@ table th:first-child, table td:first-child {
}
/*
Custom elements for cards and containers.
Custom elements for cards and containers.
*/
.card.fluid {
max-width: 100%;
@ -1202,7 +1202,7 @@ mark.inline-block {
}
/*
Custom contextual background elements and alerts.
Custom contextual background elements and alerts.
*/
mark.secondary {
background: #e53935;
@ -1267,7 +1267,7 @@ progress[value="1000"]::-moz-progress-bar {
}
/*
Custom elements for progress elements and spinners.
Custom elements for progress elements and spinners.
*/
progress.inline {
display: inline-block;
@ -1320,7 +1320,7 @@ progress.tertiary::-moz-progress-bar {
}
/*
Custom elements for utilities and helper classes.
Custom elements for utilities and helper classes.
*/
.bordered {
border: 1px solid rgba(0, 0, 0, 0.25) !important;

4
docs/customization/input_control.html
View file

@ -227,6 +227,10 @@
<td data-label="Variable">$input-disabled-opacity</td><td data-label="Type">Opacity</td>
<td data-label="Description">Opacity of <code>&lt;input&gt;</code> elements (disabled)</td><td data-label="Sample value">0.75</td>
</tr>
<tr>
<td data-label="Variable">$select-padding-right</td><td data-label="Type">Padding right</td>
<td data-label="Description">Right padding of <code>&lt;select&gt;</code> elements</td><td data-label="Sample value">20px</td>
</tr>
<tr>
<td data-label="Variable">$input-group-name</td><td data-label="Type">String</td>
<td data-label="Description">Class name for input groups</td><td data-label="Sample value">'input-group'</td>

2
docs/flavors.html
View file

@ -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>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.1/dist/mini-default.min.css&quot;</span>&gt;</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">

2
docs/index.html
View file

@ -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>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.1/dist/mini-default.min.css&quot;</span>&gt;</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>

2
docs/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
docs/quick_reference.html
View file

@ -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>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.1/dist/mini-default.min.css&quot;</span>&gt;</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>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre>

1
docs/v2/DEVLOG.md
View file

@ -1265,3 +1265,4 @@
- Added a lot of code in `input_control` module, some exotic functions included. Also added `$select-padding-right` to help solve an issue and update changes.
- Used `svg` tricks to resolve the `select` issue, file size is now `6.90KB` gzipped, which is just below the maximum limit of the framework.
- Updated flavor files and source code to use spaces instead of tabs. Should now look better on Github.
- Released update to deal with bugs.

1108
src/flavors/mini-dark.scss
View file

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

@ -1,460 +1,460 @@
// 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.
// 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)
Maintainers: Angelos Chalaris
mini.css version: v2.3.1
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.3.1
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
$back-color: #f8f8f8; // 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';
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
$back-color: #f8f8f8; // 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: 2rem; // Font size of h1
$h2-font-size: 1.6875rem; // Font size for h2
$h3-font-size: 1.4375rem; // Font size for h3
$h4-font-size: 1.1875rem; // 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.2em; // 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.25rem; // 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: 1rem; // 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: 0.5rem; // <hr> margin
$horizontal-rule-border-style: $_1px solid #8c8c8c;// 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: 0.5rem; // Margin for <blockquote>
$blockquote-padding: 0.5rem 0.5rem 1.5rem; // Padding for <blockquote>
$blockquote-sidebar-style: 0; // Style for the sidebar of <blockquote>
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
$blockquote-cite-fore-color: #505050; // 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 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-element-padding: 0.125rem 0.25rem; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code>
$code-element-back-color: #e6e6e6; // 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: none; // Box shadow for <code>
$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 2*$_1px 2*$_1px 0; // Border radius for <pre>
$pre-element-margin: 0.5rem; // Margin for <pre>
$pre-element-box-shadow: none; // 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: $code-element-padding; // Padding for <kbd>
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
$kbd-element-back-color: #0c0c0c; // 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: #0277bd; // Text color for <a>
$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]
$figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
// Notes:
$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: 2rem; // Font size of h1
$h2-font-size: 1.6875rem; // Font size for h2
$h3-font-size: 1.4375rem; // Font size for h3
$h4-font-size: 1.1875rem; // 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.2em; // 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.25rem; // 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: 1rem; // 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: 0.5rem; // <hr> margin
$horizontal-rule-border-style: $_1px solid #8c8c8c; // 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: 0.5rem; // Margin for <blockquote>
$blockquote-padding: 0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
$blockquote-sidebar-style: 0; // Style for the sidebar of <blockquote>
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
$blockquote-cite-fore-color: #505050; // 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 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-element-padding: 0.125rem 0.25rem; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code>
$code-element-back-color: #e6e6e6; // 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: none; // Box shadow for <code>
$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 2*$_1px 2*$_1px 0;// Border radius for <pre>
$pre-element-margin: 0.5rem; // Margin for <pre>
$pre-element-box-shadow: none; // 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: $code-element-padding; // Padding for <kbd>
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
$kbd-element-back-color: #0c0c0c; // 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: #0277bd; // Text color for <a>
$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]
$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.
// 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`.
// 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.
// 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.
// 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.
// 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.
// 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.
// 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.
// `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.
// 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.
// 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:
// 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.
// 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 #c9c9c9; // Border style for forms
$form-border-radius: 0; // 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: none; // Box shadow for forms
$fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: $_1px solid #d0d0d0; // 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: $bold-font-weight; // 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: false; // 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 #c9c9c9; // 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: #e5e5e5; // Background color for readonly input
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
$input-placeholder-fore-color:#616161; // Text color for input placeholder
$select-padding-right: 1.5rem; // Right padding for select element
$button-back-color: #dcdcdc; // Back color for button elements
$button-back-opacity: 0.75; // 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: 2*$_1px; // Border radius for button elements
$button-padding: 0.5rem 0.75rem; // Padding for button elements
$button-margin: 0.5rem; // Margin for button elements
$button-box-shadow: none; // Box shadow for buttons
$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: #0277bd; // Background color for button variant 1
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
$button-variant2-name: 'secondary';// Class name for button variant 2
$button-variant2-back-color: #c62828; // Background color for button variant 2
$button-variant2-back-opacity: 0.9; // Background opacity for button variant 2
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
$button-variant2-fore-color: #fafafa; // Text color for button variant 2
$button-variant3-name: 'tertiary'; // Class name for button variant 3
$button-variant3-back-color: #5f9133; // Background color for button variant 3
$button-variant3-back-opacity: 0.9; // 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-style1-name: 'small'; // Class name for button style 1
$button-style1-border-style: 0; // Border style for button style 1
$button-style1-border-radius: $_1px; // Border radius for button style 1
$button-style1-padding: 0.25rem 0.375rem; // Padding for button style 1
$button-style1-margin: 0.5rem; // Margin for button style 1
$button-style2-name: 'large'; // Class name for button style 2
$button-style2-border-style: 0; // Border style for button style 2
$button-style2-border-radius: 4*$_1px; // Border radius for button style 2
$button-style2-padding: 0.75rem 1.125rem; // Padding for button style 2
$button-style2-margin: 0.5rem; // Margin for button style 2
$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
// 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 #c9c9c9; // Border style for forms
$form-border-radius: 0; // 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: none; // Box shadow for forms
$fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: $_1px solid #d0d0d0; // 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: $bold-font-weight; // 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: false; // 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 #c9c9c9; // 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: #e5e5e5; // Background color for readonly input
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
$input-placeholder-fore-color:#616161; // Text color for input placeholder
$select-padding-right: 1.5rem; // Right padding for select element
$button-back-color: #dcdcdc; // Back color for button elements
$button-back-opacity: 0.75; // 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: 2*$_1px; // Border radius for button elements
$button-padding: 0.5rem 0.75rem; // Padding for button elements
$button-margin: 0.5rem; // Margin for button elements
$button-box-shadow: none; // Box shadow for buttons
$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: #0277bd; // Background color for button variant 1
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
$button-variant2-name: 'secondary';// Class name for button variant 2
$button-variant2-back-color: #c62828; // Background color for button variant 2
$button-variant2-back-opacity: 0.9; // Background opacity for button variant 2
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
$button-variant2-fore-color: #fafafa; // Text color for button variant 2
$button-variant3-name: 'tertiary';// Class name for button variant 3
$button-variant3-back-color: #5f9133; // Background color for button variant 3
$button-variant3-back-opacity: 0.9; // 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-style1-name: 'small'; // Class name for button style 1
$button-style1-border-style: 0; // Border style for button style 1
$button-style1-border-radius: $_1px; // Border radius for button style 1
$button-style1-padding: 0.25rem 0.375rem; // Padding for button style 1
$button-style1-margin: 0.5rem; // Margin for button style 1
$button-style2-name: 'large'; // Class name for button style 2
$button-style2-border-style: 0; // Border style for button style 2
$button-style2-border-radius: 4*$_1px; // Border radius for button style 2
$button-style2-padding: 0.75rem 1.125rem; // Padding for button style 2
$button-style2-margin: 0.5rem; // Margin for button style 2
$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:
$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.
// 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.
// 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.
// 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
// 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: 2.75rem; // Height for <header>
$header-back-color: #12171a; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header>
$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: #20292e; // 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]
$include-drawer: false; // [Hidden flag override] Should the drawer component be included? (`true`/`false`) [2]
$footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // 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: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// If you wish to enable them, please refer to a full flavor for the required variables.
$header-height: 2.75rem; // Height for <header>
$header-back-color: #12171a; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header>
$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: #20292e; // 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]
$include-drawer: false; // [Hidden flag override] Should the drawer component be included? (`true`/`false`) [2]
$footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // 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: #0288d1; // Text color for links in <footer>
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// of <header> elements, using the value of $header-sticky-name for the name of the class.
// [2] - Due to the fact that the values of $include-nav-styles and $include-drawer are set to `false`, <nav> elements
// will not be stylized and the drawer component will not be included. 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 #c9c9c9; // 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: none; // Box shadow for <table>
$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: #e6e6e6; // Background color for <th>
$table-head-fore-color: $fore-color; // Tex 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:
// 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 #c9c9c9; // 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: none; // Box shadow for <table>
$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: #e6e6e6; // Background color for <th>
$table-head-fore-color: $fore-color; // 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.
// 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 #acacac; // Border style for cards
$card-border-radius: 0; // Border radius for cards
$card-margin: 0.5rem; // Margin for cards
$card-box-shadow: none; // Box shadow for cards
$card-section-name: 'section'; // Class name for card sections
$card-section-border-style: $_1px solid #c9c9c9; // Border style for card sections
$card-section-padding: 0.5rem; // 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: '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-padding1-name: 'double-padded'; // Class name for card section padding style 1
$card-section-padding1-padding: 0.75rem; // Padding for card section padding style 1
// Notes:
// 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 #acacac; // Border style for cards
$card-border-radius: 0; // Border radius for cards
$card-margin: 0.5rem; // Margin for cards
$card-box-shadow: none; // Box shadow for cards
$card-section-name: 'section'; // Class name for card sections
$card-section-border-style: $_1px solid #c9c9c9;// Border style for card sections
$card-section-padding: 0.5rem; // 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: '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-padding1-name: 'double-padded'; // Class name for card section padding style 1
$card-section-padding1-padding: 0.75rem; // Padding for card section padding 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: #0277bd; // 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.125em 0.25em; // Padding for <mark>
$mark-margin: 0; // Margin for <mark>
$mark-box-shadow: none; // Box shadow for <mark>
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #689f38; // Background color for <mark> variant 2
$mark-style1-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-style: 0; // Border style for <mark> style 1
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
$mark-style1-padding: 0.25em 0.5em; // Padding for <mark> style 1
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
$mark-style2-border-style: 0; // Border style for <mark> style 2
$mark-style2-border-radius: 2*$_1px; // Border radius for <mark> style 2
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
$mark-style2-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$include-toast: false; // [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
$include-tooltip: false; // Should tooltips be included? (`true`/`false`) [1]
$include-modal: false; // Should modals be included? (`true`/`false`) [1]
// Notes:
// --- --- ---
// 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: #0277bd; // 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.125em 0.25em; // Padding for <mark>
$mark-margin: 0; // Margin for <mark>
$mark-box-shadow: none; // Box shadow for <mark>
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #689f38; // Background color for <mark> variant 2
$mark-style1-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-style: 0; // Border style for <mark> style 1
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
$mark-style1-padding: 0.25em 0.5em; // Padding for <mark> style 1
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
$mark-style2-border-style: 0; // Border style for <mark> style 2
$mark-style2-border-radius: 2*$_1px; // Border radius for <mark> style 2
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
$mark-style2-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$include-toast: false; // [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
$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-toast, $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.
// Variables for progress elements and spinners
$progress-back-color: #e0e0e0; // Background color for <progress>
$progress-fore-color: #0277bd; // Progress bar color for <progress>
$progress-height: 0.625rem; // Height of <progress>
$progress-max-value: 1000; // Arithmetic max value of <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress>
$progress-left-right-margin: 0.5rem; // Left and right margin for <progress>
$progress-box-shadow: none; // Box shadow for <progress>
$progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 60%; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
$progress-variant1-fore-color:#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
$include-spinner-donut: false; // [Hidden flag override] Should spinner donuts be enabled? (`true`/`false`) [1]
// Notes :
// 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.
// Variables for progress elements and spinners
$progress-back-color: #e0e0e0; // Background color for <progress>
$progress-fore-color: #0277bd; // Progress bar color for <progress>
$progress-height: 0.625rem; // Height of <progress>
$progress-max-value: 1000; // Arithmetic max value of <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress>
$progress-left-right-margin: 0.5rem; // Left and right margin for <progress>
$progress-box-shadow: none; // Box shadow for <progress>
$progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 60%; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
$progress-variant1-fore-color: #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
$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
// donut styling will not be included. To enable it, pelase refer to a full flavor.
// 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]
$include-close-icon: false; // [Hidden flag override] Should the close icon be included? (`true`/`false`) [1]
$border-generic-name: 'bordered'; // Class name for generic border style
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
$border-radial-style1-radius: 2*$_1px; // Border radius for radial border style 1
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
$responsive-margin-large-value: 0.5rem; // Margin value for responsive margin on large screens
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
$responsive-padding-small-value: 0.125rem 0.25rem; // Padding value for responsive padding on small screens
$responsive-padding-medium-value: 0.25rem 0.375rem; // Padding value for responsive padding on medium screens
$responsive-padding-large-value: 0.375rem 0.5rem; // Padding value for responsive padding on large screens
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
// Notes:
// donut styling will not be included. To enable it, pelase refer to a full flavor.
// 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]
$include-close-icon: false; // [Hidden flag override] Should the close icon be included? (`true`/`false`) [1]
$border-generic-name: 'bordered'; // Class name for generic border style
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
$border-radial-style1-radius: 2*$_1px; // Border radius for radial border style 1
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
$responsive-margin-large-value: 0.5rem; // Margin value for responsive margin on large screens
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
$responsive-padding-small-value: 0.125rem 0.25rem;// Padding value for responsive padding on small screens
$responsive-padding-medium-value: 0.25rem 0.375rem;// Padding value for responsive padding on medium screens
$responsive-padding-large-value: 0.375rem 0.5rem; // Padding value for responsive padding on large screens
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
// Notes:
// [1] - Due to the values of $include-breadcrumbs and $include-close-icon being set
// to `false`, these elements will not be included. Refer to a full flavor file for
// help on how to enable them.
// to `false`, these elements 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.
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);
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
$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,
$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-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,
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
@import '../mini/navigation';
@import '../mini/table';
@import '../mini/card';
/*
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-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-style ($card-section-padding1-name, $card-section-padding1-padding);
// --- --- ---
// --- --- ---
// Tab module is disabled for this flavor.
// @import '../mini/tab';
// --- --- ---
// --- --- ---
@import '../mini/contextual';
/*
Custom contextual background elements and alerts.
Custom contextual background elements and alerts.
*/
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
$mark-style1-border-radius, $mark-style1-padding);
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
@import '../mini/progress';
/*
Custom elements for progress elements and spinners.
Custom elements for progress elements and spinners.
*/
@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);
@import '../mini/utility';
/*
Custom elements for utilities and helper classes.
Custom elements for utilities and helper classes.
*/
@include make-border-generic ($border-generic-name);
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
$responsive-margin-medium-value, $responsive-margin-large-value);
$responsive-margin-medium-value, $responsive-margin-large-value);
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
$responsive-padding-medium-value, $responsive-padding-large-value);
$responsive-padding-medium-value, $responsive-padding-large-value);
@include make-hidden-responsive ($responsive-hidden-prefix);
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);

136
src/mini/_card.scss
View file

@ -1,80 +1,80 @@
/*
Definitions for cards and containers.
Definitions for cards and containers.
*/
// Dependency: This module depends heavily on the grid system module.
$card-name: 'card' !default; // Class name for the cards
$card-section-name: 'section' !default; // Class name for the cards' sections
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent)
$card-normal-width: 320px !default; // Width for normal cards
$card-name: 'card' !default; // Class name for the cards
$card-section-name: 'section' !default; // Class name for the cards' sections
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent)
$card-normal-width: 320px !default; // Width for normal cards
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Check the `_card_mixins.scss` file to find this module's mixins.
@import 'card_mixins';
// Card styling
.#{$card-name} {
// Old syntax
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: justify;
-webkit-box-align: center;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-self: center;
align-self: center;
position: relative;
width: 100%;
// Actual styling for the cards
@if $card-back-color != $back-color {
background: $card-back-color;
}
@if $card-fore-color != $fore-color {
color: $card-fore-color;
}
@if $card-border-style != 0 {
border: $card-border-style;
}
@if $card-border-radius != 0 {
border-radius: $card-border-radius;
}
@if $card-margin != 0 {
margin: $card-margin;
}
@if $card-box-shadow != none {
box-shadow: $card-box-shadow;
}
// Hide overflow from section borders
overflow: hidden;
// Card sections
& > .#{$card-section-name} {
box-sizing: border-box;
margin: 0;
border: 0; // Clean borders and radiuses for any element-based sections
border-radius: 0; // Clean borders and radiuses for any element-based sections
border-bottom: $card-section-border-style;
padding: $card-section-padding;
width: 100%;
// Card media sections
&.#{$card-section-media-name} {
height: $card-section-media-height;
padding: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
// Card sections - last
& > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section
}
// Old syntax
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: justify;
-webkit-box-align: center;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-self: center;
align-self: center;
position: relative;
width: 100%;
// Actual styling for the cards
@if $card-back-color != $back-color {
background: $card-back-color;
}
@if $card-fore-color != $fore-color {
color: $card-fore-color;
}
@if $card-border-style != 0 {
border: $card-border-style;
}
@if $card-border-radius != 0 {
border-radius: $card-border-radius;
}
@if $card-margin != 0 {
margin: $card-margin;
}
@if $card-box-shadow != none {
box-shadow: $card-box-shadow;
}
// Hide overflow from section borders
overflow: hidden;
// Card sections
& > .#{$card-section-name} {
box-sizing: border-box;
margin: 0;
border: 0; // Clean borders and radiuses for any element-based sections
border-radius: 0; // Clean borders and radiuses for any element-based sections
border-bottom: $card-section-border-style;
padding: $card-section-padding;
width: 100%;
// Card media sections
&.#{$card-section-media-name} {
height: $card-section-media-height;
padding: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
// Card sections - last
& > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section
}
}
// Responsiveness (if the screen is larger than card, set max-width)
@media screen and (min-width: #{$card-normal-width}) {
.#{$card-name} {
max-width: $card-normal-width;
}
.#{$card-name} {
max-width: $card-normal-width;
}
}

112
src/mini/_card_mixins.scss
View file

@ -5,19 +5,19 @@
// - $card-alt-size-name : The name of the class used for the alternate size card.
// - $card-alt-size-width : The width of the alternate size card.
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
width: auto;
}
}
@else {
@media screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
}
}
}
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
width: auto;
}
}
@else {
@media screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
}
}
}
}
// Mixin for alternate cards (card color variants).
// Variables:
@ -25,36 +25,36 @@
// - $card-alt-back-color : The background color of the alternate card.
// - $card-alt-fore-color : The text color of the alternate card.
// - $card-alt-border-style : (Optional) The border style of the alternate card. Defaults to the value
// of $card-border-style.
// of $card-border-style.
// - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
// of $card-border-radius.
// of $card-border-radius.
// - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to
// the value of $card-section-border-style.
// the value of $card-section-border-style.
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
$card-alt-section-border-style : $card-section-border-style) {
.#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color {
background: $card-alt-back-color;
}
@if $card-alt-fore-color != $card-fore-color {
color: $card-alt-fore-color;
}
@if $card-alt-border-style != $card-border-style {
border: $card-alt-border-style;
}
@if $card-alt-border-radius != $card-border-radius {
border-radius: $card-alt-border-radius;
}
@if $card-alt-section-border-style != $card-section-border-style{
& > .#{$card-section-name} {
border-bottom: $card-alt-section-border-style;
}
& > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section
}
}
}
$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
$card-alt-section-border-style : $card-section-border-style) {
.#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color {
background: $card-alt-back-color;
}
@if $card-alt-fore-color != $card-fore-color {
color: $card-alt-fore-color;
}
@if $card-alt-border-style != $card-border-style {
border: $card-alt-border-style;
}
@if $card-alt-border-radius != $card-border-radius {
border-radius: $card-alt-border-radius;
}
@if $card-alt-section-border-style != $card-section-border-style{
& > .#{$card-section-name} {
border-bottom: $card-alt-section-border-style;
}
& > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section
}
}
}
}
// Mixin for alternate card sections (card section color variants).
// Variables:
@ -62,27 +62,27 @@
// - $card-section-alt-back-color : The background color of the alternate card section.
// - $card-section-alt-fore-color : The text color of the alternate card section.
// - $card-section-alt-border-style : (Optional) The border style of the alternate card section. Defaults to
// the value of $card-section-border-style.
// the value of $card-section-border-style.
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color,
$card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color {
background: $card-section-alt-back-color;
}
@if $card-section-alt-fore-color != $card-fore-color {
color: $card-section-alt-fore-color;
}
@if $card-section-alt-border-style != $card-section-border-style {
border: $card-section-alt-border-style;
}
}
$card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color {
background: $card-section-alt-back-color;
}
@if $card-section-alt-fore-color != $card-fore-color {
color: $card-section-alt-fore-color;
}
@if $card-section-alt-border-style != $card-section-border-style {
border: $card-section-alt-border-style;
}
}
}
// Mixin for alternate card sections (card section padding variants).
// Variables:
// - $card-section-alt-name : The name of the class used for the alternate card section.
// - $card-section-alt-padding : The padding of the alternate card section.
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding;
}
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding;
}
}

490
src/mini/_contextual.scss
View file

@ -1,265 +1,265 @@
/*
Definitions for contextual background elements, toasts and tooltips.
Definitions for contextual background elements, toasts and tooltips.
*/
// Contextual background elements use the mark element as their base.
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling.
$include-toast: true !default; // [Hidden flag] Should toasts be included? (`true`/`false`)
$toast-name: 'toast' !default; // Class name for the toasts.
$include-tooltip: true !default; // Should tooltips be included? (`true`/`false`)
$tooltip-name: 'tooltip' !default; // Class name for the tooltips.
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name.
$include-modal: true !default; // Should modals be included? (`true`/`false`)
$modal-name: 'modal' !default; // Class name for the modals.
$modal-close-name: 'close' !default; // Class name of the close element for the modal component.
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling.
$include-toast: true !default; // [Hidden flag] Should toasts be included? (`true`/`false`)
$toast-name: 'toast' !default; // Class name for the toasts.
$include-tooltip: true !default; // Should tooltips be included? (`true`/`false`)
$tooltip-name: 'tooltip' !default; // Class name for the tooltips.
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name.
$include-modal: true !default; // Should modals be included? (`true`/`false`)
$modal-name: 'modal' !default; // Class name for the modals.
$modal-close-name: 'close' !default; // Class name of the close element for the modal component.
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
$base-line-height: 1 !default; // [External variable - core] Line height for everything.
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
$base-line-height: 1 !default; // [External variable - core] Line height for everything.
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
// Check the `_contextual_mixins.scss` file to find this module's mixins.
@import 'contextual_mixins';
// Default styling for mark. Use mixins for alternate styles.
mark {
@if $mark-back-color != $back-color {
background: $mark-back-color;
}
@if $mark-fore-color != $fore-color {
color: $mark-fore-color;
}
@if $mark-font-size != 100% {
font-size: $mark-font-size;
}
@if $mark-line-height != $base-line-height {
line-height: $mark-line-height;
}
@if $mark-border-style != 0 {
border: $mark-border-style;
}
@if $mark-border-radius != 0 {
border-radius: $mark-border-radius;
}
@if $mark-padding != 0 {
padding: $mark-padding;
}
@if $mark-margin != 0 {
margin: $mark-margin;
}
@if $mark-box-shadow != none {
box-shadow: $mark-box-shadow;
}
&.#{$mark-inline-block-name}{
display: inline-block; // Can be used to deal with some problems.
}
@if $mark-back-color != $back-color {
background: $mark-back-color;
}
@if $mark-fore-color != $fore-color {
color: $mark-fore-color;
}
@if $mark-font-size != 100% {
font-size: $mark-font-size;
}
@if $mark-line-height != $base-line-height {
line-height: $mark-line-height;
}
@if $mark-border-style != 0 {
border: $mark-border-style;
}
@if $mark-border-radius != 0 {
border-radius: $mark-border-radius;
}
@if $mark-padding != 0 {
padding: $mark-padding;
}
@if $mark-margin != 0 {
margin: $mark-margin;
}
@if $mark-box-shadow != none {
box-shadow: $mark-box-shadow;
}
&.#{$mark-inline-block-name}{
display: inline-block; // Can be used to deal with some problems.
}
}
// Default styling for toasts. Use mixins for alternate styles
@if $include-toast {
.#{$toast-name} {
position: fixed;
background: $toast-back-color;
bottom: $toast-bottom;
left: 50%;
transform: translate(-50%, -50%);
@if $toast-fore-color != $fore-color {
color: $toast-fore-color;
}
@if $toast-border-style != 0 {
border: $toast-border-style;
}
@if $toast-border-radius != 0 {
border-radius: $toast-border-radius;
}
@if $toast-padding != 0 {
padding: $toast-padding;
}
@if $toast-box-shadow != none {
box-shadow: $toast-box-shadow;
}
z-index: 1111;
}
.#{$toast-name} {
position: fixed;
background: $toast-back-color;
bottom: $toast-bottom;
left: 50%;
transform: translate(-50%, -50%);
@if $toast-fore-color != $fore-color {
color: $toast-fore-color;
}
@if $toast-border-style != 0 {
border: $toast-border-style;
}
@if $toast-border-radius != 0 {
border-radius: $toast-border-radius;
}
@if $toast-padding != 0 {
padding: $toast-padding;
}
@if $toast-box-shadow != none {
box-shadow: $toast-box-shadow;
}
z-index: 1111;
}
}
// Default styling for tooltips. Use mixins for alternate styles
@if $include-tooltip {
.#{$tooltip-name} {
position: relative;
display: inline-block;
&:before, &:after {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: all 0.3s;
// Remember to keep this index a lower value than the one used for stickies.
z-index: 1010; // Deals with certain problems when combined with cards and tables.
left: 50%;
}
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
bottom: 75%;
}
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%;
}
@if $style-link-active-state {
&:hover, &:focus, &:active {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
}
@else {
&:hover, &:focus {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
}
&:before { // This is the little tooltip triangle
content: '';
background: transparent;
border: $tooltip-tail-size solid transparent;
// Older browsers will almost center the tooltip's tail
left: 50%;
// Newer browsers will center the tail properly
left: calc(50% - #{$tooltip-tail-size});
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-back-color;
}
&:after { // This is the actual tooltip's text block
content: attr(aria-label);
background: $tooltip-back-color;
@if $tooltip-border-radius != 0 {
border-radius: $tooltip-border-radius;
}
@if $tooltip-fore-color != $fore-color {
color: $tooltip-fore-color;
}
@if $tooltip-padding != 0 {
padding: $tooltip-padding;
}
@if $tooltip-box-shadow != none {
box-shadow: $tooltip-box-shadow;
}
white-space: nowrap;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-tail-size;
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: 2 * $tooltip-tail-size;
}
}
.#{$tooltip-name} {
position: relative;
display: inline-block;
&:before, &:after {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: all 0.3s;
// Remember to keep this index a lower value than the one used for stickies.
z-index: 1010; // Deals with certain problems when combined with cards and tables.
left: 50%;
}
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
bottom: 75%;
}
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%;
}
@if $style-link-active-state {
&:hover, &:focus, &:active {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
}
@else {
&:hover, &:focus {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
}
&:before { // This is the little tooltip triangle
content: '';
background: transparent;
border: $tooltip-tail-size solid transparent;
// Older browsers will almost center the tooltip's tail
left: 50%;
// Newer browsers will center the tail properly
left: calc(50% - #{$tooltip-tail-size});
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-back-color;
}
&:after { // This is the actual tooltip's text block
content: attr(aria-label);
background: $tooltip-back-color;
@if $tooltip-border-radius != 0 {
border-radius: $tooltip-border-radius;
}
@if $tooltip-fore-color != $fore-color {
color: $tooltip-fore-color;
}
@if $tooltip-padding != 0 {
padding: $tooltip-padding;
}
@if $tooltip-box-shadow != none {
box-shadow: $tooltip-box-shadow;
}
white-space: nowrap;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-tail-size;
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: 2 * $tooltip-tail-size;
}
}
}
@if $include-modal {
.#{$modal-name} {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: rgba($modal-back-color, $modal-back-opacity);
& .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
& .#{$modal-close-name} {
position: absolute;
top: $modal-close-top;
right: $modal-close-right;
padding: 0; // Fixes the extra padding added from <label> styling.
}
}
}
:checked + .#{$modal-name} {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
z-index: 1200;
& .card {
& .#{$modal-close-name} {
z-index: 1211;
}
}
}
.#{$modal-name} {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: rgba($modal-back-color, $modal-back-opacity);
& .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
& .#{$modal-close-name} {
position: absolute;
top: $modal-close-top;
right: $modal-close-right;
padding: 0; // Fixes the extra padding added from <label> styling.
}
}
}
:checked + .#{$modal-name} {
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
z-index: 1200;
& .card {
& .#{$modal-close-name} {
z-index: 1211;
}
}
}
}
// [WARNING: As of v2.2.0, the alert component is deprecated and no longer maintained.]
$include-alerts: false !default; // [Hidden flag] Should alerts be included? (`true`/`false`)
$include-alerts: false !default; // [Hidden flag] Should alerts be included? (`true`/`false`)
// Animation definition for animated alerts (included if wanted)
@if $include-alerts { // Turn on if you want to enable the alert component.
$alert-name: 'alert' !default; // Class name for the alerts.
$alert-include-animated: false !default; // Should animated alerts be included? (`true`/`false`)
$alert-animated-name: 'animated' !default; // Class name for animated alerts.
$alert-back-color: #d1e6f3 !default; // Background color for alerts
$alert-fore-color: $fore-color !default; // Text color for alerts
$alert-border-style: 1px solid #d0d0d0 !default; // Border style for alerts
$alert-border-radius: 0 !default; // Border radius for alerts
$alert-padding: 0.75rem !default; // Padding for alerts
$alert-margin: 0.5rem !default; // Margin for alerts
$alert-box-shadow: none !default; // Box shadow for alerts
@if $alert-include-animated {
@-webkit-keyframes alert-anim {
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
}
@keyframes alert-anim {
45% { transform: scale(1); transform-origin: 50% 50%; }
50% { transform: scale(1.005); transform-origin: 50% 50%; }
55% { transform: scale(1); transform-origin: 50% 50%; }
}
}
// Default styling for alerts. Use mixins for alternate styles
.#{$alert-name} {
display: block;
@if $alert-back-color != $back-color {
background: $alert-back-color;
}
@if $alert-fore-color != $fore-color {
color: $alert-fore-color;
}
@if $alert-border-style != 0 {
border: $alert-border-style;
}
@if $alert-border-radius != 0 {
border-radius: $alert-border-radius;
}
@if $alert-margin != 0 {
margin: $alert-margin;
}
@if $alert-padding != 0 {
padding: $alert-padding;
}
@if $alert-box-shadow != none {
box-shadow: $alert-box-shadow;
}
@if $alert-include-animated {
&.#{$alert-animated-name} {
// Try to make the animated alert not blurry
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
// Apply the animation
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
}
}
@if $include-alerts { // Turn on if you want to enable the alert component.
$alert-name: 'alert' !default; // Class name for the alerts.
$alert-include-animated: false !default; // Should animated alerts be included? (`true`/`false`)
$alert-animated-name: 'animated' !default; // Class name for animated alerts.
$alert-back-color: #d1e6f3 !default; // Background color for alerts
$alert-fore-color: $fore-color !default; // Text color for alerts
$alert-border-style: 1px solid #d0d0d0 !default; // Border style for alerts
$alert-border-radius: 0 !default; // Border radius for alerts
$alert-padding: 0.75rem !default; // Padding for alerts
$alert-margin: 0.5rem !default; // Margin for alerts
$alert-box-shadow: none !default; // Box shadow for alerts
@if $alert-include-animated {
@-webkit-keyframes alert-anim {
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
}
@keyframes alert-anim {
45% { transform: scale(1); transform-origin: 50% 50%; }
50% { transform: scale(1.005); transform-origin: 50% 50%; }
55% { transform: scale(1); transform-origin: 50% 50%; }
}
}
// Default styling for alerts. Use mixins for alternate styles
.#{$alert-name} {
display: block;
@if $alert-back-color != $back-color {
background: $alert-back-color;
}
@if $alert-fore-color != $fore-color {
color: $alert-fore-color;
}
@if $alert-border-style != 0 {
border: $alert-border-style;
}
@if $alert-border-radius != 0 {
border-radius: $alert-border-radius;
}
@if $alert-margin != 0 {
margin: $alert-margin;
}
@if $alert-padding != 0 {
padding: $alert-padding;
}
@if $alert-box-shadow != none {
box-shadow: $alert-box-shadow;
}
@if $alert-include-animated {
&.#{$alert-animated-name} {
// Try to make the animated alert not blurry
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
// Apply the animation
-webkit-animation: alert-anim 6s linear infinite;
animation: alert-anim 6s linear infinite;
}
}
}
}

284
src/mini/_contextual_mixins.scss
View file

@ -6,14 +6,14 @@
// - $mark-alt-back-color : The background color of the alternate mark.
// - $mark-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the mark.
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
background: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color {
color: $mark-alt-fore-color;
}
}
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
background: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color {
color: $mark-alt-fore-color;
}
}
}
// Mixin for alternative mark styles (contextual tags).
// Variables:
@ -25,28 +25,28 @@
// - $mark-alt-line-height : (Optional) The line height of the alternate mark style. Defaults to the line height of the mark.
// - $mark-alt-box-shadow : (Optional) The box shadow of the alternate mark style. Defaults to the box shadow of the mark.
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-style, $mark-alt-border-radius,
$mark-alt-padding : $mark-padding, $mark-alt-font-size : $mark-font-size, $mark-alt-line-height : $mark-line-height,
$mark-alt-box-shadow : $mark-box-shadow ) {
mark.#{$mark-alt-name} {
@if $mark-alt-font-size != $mark-font-size {
font-size: $mark-alt-font-size;
}
@if $mark-alt-line-height != $mark-line-height {
line-height: $mark-alt-line-height;
}
@if $mark-alt-border-style != $mark-border-style {
border: $mark-alt-border-style;
}
@if $mark-alt-border-radius != $mark-border-radius {
border-radius: $mark-alt-border-radius;
}
@if $mark-alt-padding != $mark-padding {
padding: $mark-alt-padding;
}
@if $mark-alt-box-shadow != $mark-box-shadow {
box-shadow: $mark-alt-box-shadow;
}
}
$mark-alt-padding : $mark-padding, $mark-alt-font-size : $mark-font-size, $mark-alt-line-height : $mark-line-height,
$mark-alt-box-shadow : $mark-box-shadow ) {
mark.#{$mark-alt-name} {
@if $mark-alt-font-size != $mark-font-size {
font-size: $mark-alt-font-size;
}
@if $mark-alt-line-height != $mark-line-height {
line-height: $mark-alt-line-height;
}
@if $mark-alt-border-style != $mark-border-style {
border: $mark-alt-border-style;
}
@if $mark-alt-border-radius != $mark-border-radius {
border-radius: $mark-alt-border-radius;
}
@if $mark-alt-padding != $mark-padding {
padding: $mark-alt-padding;
}
@if $mark-alt-box-shadow != $mark-box-shadow {
box-shadow: $mark-alt-box-shadow;
}
}
}
// Mixin for alternate toast (toast color variants).
// Variables:
@ -54,17 +54,17 @@
// - $toast-alt-back-color : The background color of the alternate toast.
// - $toast-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the toast.
@mixin make-toast-alt-color ($toast-alt-name, $toast-alt-back-color, $toast-alt-fore-color: $toast-fore-color) {
@if not ($include-toast) {
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
}
.#{$toast-name}.#{$toast-alt-name} {
@if $toast-alt-back-color != $toast-back-color {
background: $toast-alt-back-color;
}
@if $toast-alt-fore-color != $toast-fore-color {
color: $toast-alt-fore-color;
}
}
@if not ($include-toast) {
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
}
.#{$toast-name}.#{$toast-alt-name} {
@if $toast-alt-back-color != $toast-back-color {
background: $toast-alt-back-color;
}
@if $toast-alt-fore-color != $toast-fore-color {
color: $toast-alt-fore-color;
}
}
}
// Mixin for alternate toast styles (toast style variants).
// Variables:
@ -74,24 +74,24 @@
// - $toast-alt-padding : (Optional) Padding of the alternate toast style. Defaults to the toast's padding.
// - $toast-alt-box-shadow : (Optional) Box shadow of the alretnate toast style. Defaults to the toast's box shadow.
@mixin make-toast-alt-style ($toast-alt-name, $toast-alt-border-style, $toast-alt-border-radius,
$toast-alt-padding : $toast-padding, $toast-alt-box-shadow : $toast-box-shadow) {
@if not ($include-toast) {
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
}
.#{$toast-name}.#{$toast-alt-name} {
@if $toast-alt-border-style != $toast-border-style {
border: $toast-alt-border-style;
}
@if $toast-alt-border-radius != $toast-border-radius {
border-radius: $toast-alt-border-radius;
}
@if $toast-alt-padding != $toast-padding {
padding: $toast-alt-padding;
}
@if $toast-alt-box-shadow != $toast-box-shadow {
box-shadow: $toast-alt-box-shadowbox-shadow;
}
}
$toast-alt-padding : $toast-padding, $toast-alt-box-shadow : $toast-box-shadow) {
@if not ($include-toast) {
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
}
.#{$toast-name}.#{$toast-alt-name} {
@if $toast-alt-border-style != $toast-border-style {
border: $toast-alt-border-style;
}
@if $toast-alt-border-radius != $toast-border-radius {
border-radius: $toast-alt-border-radius;
}
@if $toast-alt-padding != $toast-padding {
padding: $toast-alt-padding;
}
@if $toast-alt-box-shadow != $toast-box-shadow {
box-shadow: $toast-alt-box-shadowbox-shadow;
}
}
}
// Mixin for alternate tooltip (tooltip color variants).
// Variables:
@ -99,27 +99,27 @@
// - $tooltip-alt-back-color : The background color of the alternate tooltip.
// - $tooltip-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the tooltip.
@mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
@if not ($include-tooltip) {
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
}
.#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-back-color != $tooltip-back-color {
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-alt-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-alt-back-color;
}
}
&:after {
@if $tooltip-alt-back-color != $tooltip-back-color {
background: $tooltip-alt-back-color;
}
@if $tooltip-alt-fore-color != $tooltip-fore-color {
color: $tooltip-alt-fore-color;
}
}
}
@if not ($include-tooltip) {
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
}
.#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-back-color != $tooltip-back-color {
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-alt-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-alt-back-color;
}
}
&:after {
@if $tooltip-alt-back-color != $tooltip-back-color {
background: $tooltip-alt-back-color;
}
@if $tooltip-alt-fore-color != $tooltip-fore-color {
color: $tooltip-alt-fore-color;
}
}
}
}
// Mixin for alternate tooltip styles (tooltip style variants).
// Variables:
@ -129,36 +129,36 @@
// - $tooltip-alt-padding : (Optional) Padding of the alternate tooltip style. Defaults to the tooltip's padding.
// - $tooltip-alt-box-shadow : (Optional) Box shadow of the alretnate tooltip style. Defaults to the tooltip's box shadow.
@mixin make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius,
$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
@if not ($include-tooltip) {
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
}
.#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-tail-size != $tooltip-tail-size {
&:before {
border-width: $tooltip-alt-tail-size;
left: calc(50% - #{$tooltip-alt-tail-size});
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-alt-tail-size;
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: 2 * $tooltip-alt-tail-size;
}
}
$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
@if not ($include-tooltip) {
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
}
.#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-tail-size != $tooltip-tail-size {
&:before {
border-width: $tooltip-alt-tail-size;
left: calc(50% - #{$tooltip-alt-tail-size});
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-alt-tail-size;
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: 2 * $tooltip-alt-tail-size;
}
}
&:after {
@if $tooltip-alt-border-radius != $tooltip-border-radius {
border-radius: $tooltip-alt-border-radius;
}
@if $tooltip-alt-padding != $tooltip-padding {
padding: $tooltip-alt-padding;
}
@if $tooltip-alt-box-shadow != $tooltip-box-shadow {
box-shadow: $tooltip-alt-box-shadow;
}
}
}
&:after {
@if $tooltip-alt-border-radius != $tooltip-border-radius {
border-radius: $tooltip-alt-border-radius;
}
@if $tooltip-alt-padding != $tooltip-padding {
padding: $tooltip-alt-padding;
}
@if $tooltip-alt-box-shadow != $tooltip-box-shadow {
box-shadow: $tooltip-alt-box-shadow;
}
}
}
}
// [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
// Mixin for alternate alert (alert color variants).
@ -167,17 +167,17 @@
// - $alert-alt-back-color : The background color of the alternate alert.
// - $alert-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the alert.
@mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) {
@if not ($include-alerts) {
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
}
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-back-color != $alert-back-color {
background: $alert-alt-back-color;
}
@if $alert-alt-fore-color != $alert-fore-color {
color: $alert-alt-fore-color;
}
}
@if not ($include-alerts) {
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
}
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-back-color != $alert-back-color {
background: $alert-alt-back-color;
}
@if $alert-alt-fore-color != $alert-fore-color {
color: $alert-alt-fore-color;
}
}
}
// [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
// Mixin for alternate alert styles (alert style variants).
@ -189,26 +189,26 @@
// - $alert-alt-margin : (Optional) Margin of the alternate alert style. Defaults to the alert's margin.
// - $alert-alt-box-shadow : (Optional) Box shadow of the alretnate alert style. Defaults to the alert's box shadow.
@mixin make-alert-alt-style ($alert-alt-name, $alert-alt-border-style, $alert-alt-border-radius,
$alert-alt-padding : $alert-padding, $alert-alt-margin : $alert-margin,
$alert-alt-box-shadow : $alert-box-shadow) {
@if not ($include-alerts) {
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
}
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-border-style != $alert-border-style {
border: $alert-alt-border-style;
}
@if $alert-alt-border-radius != $alert-border-radius {
border-radius: $alert-alt-border-radius;
}
@if $alert-alt-padding != $alert-padding {
padding: $alert-alt-padding;
}
@if $alert-alt-margin != $alert-margin {
margin: $alert-alt-margin;
}
@if $alert-alt-box-shadow != $alert-box-shadow {
box-shadow: $alert-alt-box-shadowbox-shadow;
}
}
$alert-alt-padding : $alert-padding, $alert-alt-margin : $alert-margin,
$alert-alt-box-shadow : $alert-box-shadow) {
@if not ($include-alerts) {
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
}
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-border-style != $alert-border-style {
border: $alert-alt-border-style;
}
@if $alert-alt-border-radius != $alert-border-radius {
border-radius: $alert-alt-border-radius;
}
@if $alert-alt-padding != $alert-padding {
padding: $alert-alt-padding;
}
@if $alert-alt-margin != $alert-margin {
margin: $alert-alt-margin;
}
@if $alert-alt-box-shadow != $alert-box-shadow {
box-shadow: $alert-alt-box-shadowbox-shadow;
}
}
}

700
src/mini/_core.scss
View file

@ -1,466 +1,466 @@
/*
Browsers resets and base typography.
Browsers resets and base typography.
*/
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true`/`false`).
$base-root-font-size: 16px !default; // Root font sizing for all elements - Should only be specified in `px` units!
$_1px: (1px/$base-root-font-size) * 1rem !default; // Calculated rem value of 1px.
$use-fluid-typography: false !default; // Should fluid typography be used at the root element? (`true`/`false`)
$fluid-type-start-breakpoint: 320px !default; // Breakpoint where fluid typography scaling starts.
$fluid-type-end-breakpoint: 1600px !default; // Breakpoint where fluid typography scaling ends.
$fluid-type-small-type: 14px !default; // Smallest root font size for fluid typography.
$fluid-type-large-type: 18px !default; // Largest root font size for fluid typography.
$include-dfn-fix: true !default; // Fix display of <dfn> element in older versions of Android.
$make-heading-smalltext-block:false !default; // Should <small> elements in headings be displayed as blocks (`true`/`false`).
$horizontal-rule-fancy-style: false !default; // Should a fancy styling be applied for the <hr> element (`true`/`false`).
$add-pre-element-sidebar: false !default; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`).
$apply-link-underline: true !default; // Should an underline be applied to all <a> elements? (`true`/`false`).
$apply-link-hover-fade: true !default; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`).
$style-link-active-state: false !default; // [Hidden flag] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true`/`false`).
$base-root-font-size: 16px !default; // Root font sizing for all elements - Should only be specified in `px` units!
$_1px: (1px/$base-root-font-size) * 1rem !default; // Calculated rem value of 1px.
$use-fluid-typography: false !default; // Should fluid typography be used at the root element? (`true`/`false`)
$fluid-type-start-breakpoint: 320px !default; // Breakpoint where fluid typography scaling starts.
$fluid-type-end-breakpoint: 1600px !default; // Breakpoint where fluid typography scaling ends.
$fluid-type-small-type: 14px !default; // Smallest root font size for fluid typography.
$fluid-type-large-type: 18px !default; // Largest root font size for fluid typography.
$include-dfn-fix: true !default; // Fix display of <dfn> element in older versions of Android.
$make-heading-smalltext-block: false !default; // Should <small> elements in headings be displayed as blocks (`true`/`false`).
$horizontal-rule-fancy-style: false !default; // Should a fancy styling be applied for the <hr> element (`true`/`false`).
$add-pre-element-sidebar: false !default; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`).
$apply-link-underline: true !default; // Should an underline be applied to all <a> elements? (`true`/`false`).
$apply-link-hover-fade: true !default; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`).
$style-link-active-state: false !default; // [Hidden flag] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
// Base typography rules
@if $use-fluid-typography {
// Calculation of local variables (unitless values needed for the calculation of fluid typography)
$_fluid-type-unitless-size-change: ($fluid-type-large-type - $fluid-type-small-type)/($fluid-type-small-type * 0 + 1);
$_fluid-type-unitless-distance: ($fluid-type-end-breakpoint - $fluid-type-start-breakpoint)/($fluid-type-start-breakpoint * 0 + 1);
html {
font-size: #{$fluid-type-small-type};
}
@media screen and (min-width: #{$fluid-type-start-breakpoint}) {
html {
font-size: $base-root-font-size; // If the below calculation does not work, this is the fallback.
font-size: calc(#{$fluid-type-small-type} + #{$_fluid-type-unitless-size-change} * ((100vw - #{$fluid-type-start-breakpoint}) / #{$_fluid-type-unitless-distance}));
}
}
@media screen and (min-width: #{$fluid-type-end-breakpoint}) {
html {
font-size: #{$fluid-type-large-type};
}
}
// Calculation of local variables (unitless values needed for the calculation of fluid typography)
$_fluid-type-unitless-size-change: ($fluid-type-large-type - $fluid-type-small-type)/($fluid-type-small-type * 0 + 1);
$_fluid-type-unitless-distance: ($fluid-type-end-breakpoint - $fluid-type-start-breakpoint)/($fluid-type-start-breakpoint * 0 + 1);
html {
font-size: #{$fluid-type-small-type};
}
@media screen and (min-width: #{$fluid-type-start-breakpoint}) {
html {
font-size: $base-root-font-size; // If the below calculation does not work, this is the fallback.
font-size: calc(#{$fluid-type-small-type} + #{$_fluid-type-unitless-size-change} * ((100vw - #{$fluid-type-start-breakpoint}) / #{$_fluid-type-unitless-distance}));
}
}
@media screen and (min-width: #{$fluid-type-end-breakpoint}) {
html {
font-size: #{$fluid-type-large-type};
}
}
}
@else {
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
}
@if $apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
}
@else {
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
}
body {
margin: $body-margin;
color: $fore-color;
background: $back-color;
margin: $body-margin;
color: $fore-color;
background: $back-color;
}
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
article, aside, section, figcaption, figure, main, details, menu {
display: block;
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
display: list-item;
}
// Abbreviations
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers.
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers.
}
// Correct display for older versions of IE.
audio, video {
display: inline-block;
display: inline-block;
}
// Hide overflow in IE.
svg:not(:root) {
overflow: hidden;
overflow: hidden;
}
// Show overflow in IE.
input {
overflow: visible;
overflow: visible;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
max-width: 100%;
height: auto;
}
// Fix display of <dfn> element in older versions of Android.
@if $include-dfn-fix {
dfn {
font-style: italic;
}
dfn {
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: $heading-margin;
font-weight: $heading-font-weight;
small {
color: $heading-smalltext-fore-color;
@if $make-heading-smalltext-block {
display: block;
@if $heading-smalltext-b-top-margin != 0 {
margin-top: $heading-smalltext-b-top-margin;
}
@if $heading-smalltext-b-font-size != $small-font-size {
font-size: $heading-smalltext-b-font-size;
}
}
}
line-height: $heading-line-height;
margin: $heading-margin;
font-weight: $heading-font-weight;
small {
color: $heading-smalltext-fore-color;
@if $make-heading-smalltext-block {
display: block;
@if $heading-smalltext-b-top-margin != 0 {
margin-top: $heading-smalltext-b-top-margin;
}
@if $heading-smalltext-b-font-size != $small-font-size {
font-size: $heading-smalltext-b-font-size;
}
}
}
}
h1 {
font-size: $h1-font-size;
font-size: $h1-font-size;
}
h2 {
font-size: $h2-font-size;
font-size: $h2-font-size;
}
h3 {
font-size: $h3-font-size;
font-size: $h3-font-size;
}
h4 {
font-size: $h4-font-size;
font-size: $h4-font-size;
}
h5 {
font-size: $h5-font-size;
font-size: $h5-font-size;
}
h6 {
font-size: $h6-font-size;
font-size: $h6-font-size;
}
p {
margin: $paragraph-margin;
margin: $paragraph-margin;
}
ol, ul {
margin: $list-margin;
padding-left: $list-left-padding;
margin: $list-margin;
padding-left: $list-left-padding;
}
b, strong {
font-weight: $bold-font-weight;
font-weight: $bold-font-weight;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
overflow: visible;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: $horizontal-rule-margin;
@if $horizontal-rule-fancy-style {
height: $_1px;
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
}
@else {
height: 0;
border-top: $horizontal-rule-border-style;
}
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
overflow: visible;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: $horizontal-rule-margin;
@if $horizontal-rule-fancy-style {
height: $_1px;
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
}
@else {
height: 0;
border-top: $horizontal-rule-border-style;
}
}
blockquote {
display: block;
position: relative;
font-style: italic;
@if $blockquote-back-color != $back-color {
background: $blockquote-back-color;
}
@if $blockquote-fore-color != $fore-color {
color: $blockquote-fore-color;
}
// Overwrite defaults
margin: $blockquote-margin;
padding: $blockquote-padding;
@if $blockquote-border-style != 0 {
border: $blockquote-border-style;
}
@if $blockquote-sidebar-style != 0 {
border-left: $blockquote-sidebar-style;
}
@if $blockquote-border-radius != 0 {
border-radius: $blockquote-border-radius;
}
@if $blockquote-box-shadow != none {
box-shadow: $blockquote-box-shadow;
}
&:after {
position: absolute;
font-style: normal;
font-size: $blockquote-cite-font-size;
@if $blockquote-cite-fore-color != $blockquote-fore-color {
color: $blockquote-cite-fore-color;
}
left: $blockquote-cite-left-position;
bottom: $blockquote-cite-bottom-position;
content: '\2014 \2009'attr(cite);
}
display: block;
position: relative;
font-style: italic;
@if $blockquote-back-color != $back-color {
background: $blockquote-back-color;
}
@if $blockquote-fore-color != $fore-color {
color: $blockquote-fore-color;
}
// Overwrite defaults
margin: $blockquote-margin;
padding: $blockquote-padding;
@if $blockquote-border-style != 0 {
border: $blockquote-border-style;
}
@if $blockquote-sidebar-style != 0 {
border-left: $blockquote-sidebar-style;
}
@if $blockquote-border-radius != 0 {
border-radius: $blockquote-border-radius;
}
@if $blockquote-box-shadow != none {
box-shadow: $blockquote-box-shadow;
}
&:after {
position: absolute;
font-style: normal;
font-size: $blockquote-cite-font-size;
@if $blockquote-cite-fore-color != $blockquote-fore-color {
color: $blockquote-cite-fore-color;
}
left: $blockquote-cite-left-position;
bottom: $blockquote-cite-bottom-position;
content: '\2014 \2009'attr(cite);
}
}
$use-default-code-fonts: true !default;
@if $use-default-code-fonts {
code, kbd, pre, samp{
font-family: monospace, monospace; // Applies display fix for all code elements
}
code, kbd, pre, samp{
font-family: monospace, monospace; // Applies display fix for all code elements
}
}
@else {
code, kbd, pre, samp{
font-family: $code-font-family; // Display fix should be applied manually!
}
code, kbd, pre, samp{
font-family: $code-font-family; // Display fix should be applied manually!
}
}
code {
@if $code-element-border-style != 0{
border: $code-element-border-style;
}
@if $code-element-border-radius != 0 {
border-radius: $code-element-border-radius;
}
@if $code-element-back-color != $back-color {
background: $code-element-back-color;
}
@if $code-element-fore-color != $fore-color {
color: $code-element-fore-color;
}
@if $code-element-padding != 0 {
padding: $code-element-padding;
}
@if $code-element-box-shadow != none {
box-shadow: $code-element-box-shadow;
}
@if $code-element-border-style != 0{
border: $code-element-border-style;
}
@if $code-element-border-radius != 0 {
border-radius: $code-element-border-radius;
}
@if $code-element-back-color != $back-color {
background: $code-element-back-color;
}
@if $code-element-fore-color != $fore-color {
color: $code-element-fore-color;
}
@if $code-element-padding != 0 {
padding: $code-element-padding;
}
@if $code-element-box-shadow != none {
box-shadow: $code-element-box-shadow;
}
}
pre {
overflow: auto; // Responsiveness
@if $pre-element-border-style != 0 {
border: $pre-element-border-style;
}
@if $pre-element-border-radius != 0 {
border-radius: $pre-element-border-radius;
}
@if $pre-element-back-color != $back-color {
background: $pre-element-back-color;
}
@if $pre-element-fore-color != $fore-color {
color: $pre-element-fore-color;
}
@if $pre-element-padding != 0 {
padding: $pre-element-padding;
}
@if $pre-element-margin != 0 {
margin: $pre-element-margin;
}
@if $add-pre-element-sidebar {
border-left: $pre-element-sidebar-style;
}
@if $pre-element-box-shadow != none {
box-shadow: $pre-element-box-shadow;
}
overflow: auto; // Responsiveness
@if $pre-element-border-style != 0 {
border: $pre-element-border-style;
}
@if $pre-element-border-radius != 0 {
border-radius: $pre-element-border-radius;
}
@if $pre-element-back-color != $back-color {
background: $pre-element-back-color;
}
@if $pre-element-fore-color != $fore-color {
color: $pre-element-fore-color;
}
@if $pre-element-padding != 0 {
padding: $pre-element-padding;
}
@if $pre-element-margin != 0 {
margin: $pre-element-margin;
}
@if $add-pre-element-sidebar {
border-left: $pre-element-sidebar-style;
}
@if $pre-element-box-shadow != none {
box-shadow: $pre-element-box-shadow;
}
}
kbd {
@if $kbd-element-border-style != 0 {
border: $kbd-element-border-style;
}
@if $kbd-element-border-radius != 0 {
border-radius: $kbd-element-border-radius;
}
@if $kbd-element-back-color != $back-color {
background: $kbd-element-back-color;
}
@if $kbd-element-fore-color != $fore-color {
color: $kbd-element-fore-color;
}
@if $kbd-element-padding != 0 {
padding: $kbd-element-padding;
}
@if $kbd-element-box-shadow != none {
box-shadow: $kbd-element-box-shadow;
}
@if $kbd-element-border-style != 0 {
border: $kbd-element-border-style;
}
@if $kbd-element-border-radius != 0 {
border-radius: $kbd-element-border-radius;
}
@if $kbd-element-back-color != $back-color {
background: $kbd-element-back-color;
}
@if $kbd-element-fore-color != $fore-color {
color: $kbd-element-fore-color;
}
@if $kbd-element-padding != 0 {
padding: $kbd-element-padding;
}
@if $kbd-element-box-shadow != none {
box-shadow: $kbd-element-box-shadow;
}
}
$style-samp-element: false !default;
@if $style-samp-element {
samp{
@if $samp-element-border-style != 0 {
border: $samp-element-border-style;
}
@if $samp-element-border-radius != 0 {
border-radius: $samp-element-border-radius;
}
@if $samp-element-back-color != $back-color {
background: $samp-element-back-color;
}
@if $samp-element-fore-color != $fore-color {
color: $samp-element-fore-color;
}
@if $samp-element-padding != 0 {
padding: $samp-element-padding;
}
@if $samp-element-box-shadow != none {
box-shadow: $samp-element-box-shadow;
}
}
samp{
@if $samp-element-border-style != 0 {
border: $samp-element-border-style;
}
@if $samp-element-border-radius != 0 {
border-radius: $samp-element-border-radius;
}
@if $samp-element-back-color != $back-color {
background: $samp-element-back-color;
}
@if $samp-element-fore-color != $fore-color {
color: $samp-element-fore-color;
}
@if $samp-element-padding != 0 {
padding: $samp-element-padding;
}
@if $samp-element-box-shadow != none {
box-shadow: $samp-element-box-shadow;
}
}
}
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
small, sup, sub {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small, sup, sub {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $small-font-size == $sub-font-size {
small, sub {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small, sub {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $small-font-size == $sup-font-size {
small, sup {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub {
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small, sup {
font-size: $small-font-size;
}
sup {
top: $sup-top;
}
sub {
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
@else if $sup-font-size == $sub-font-size {
small {
font-size: $small-font-size;
}
sup, sub {
font-size: $sup-font-size;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
small {
font-size: $small-font-size;
}
sup, sub {
font-size: $sup-font-size;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: $sup-top;
}
sub{
bottom: $sub-bottom;
}
}
@else {
small {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub{
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small {
font-size: $small-font-size;
}
sup {
font-size: $sup-font-size;
top: $sup-top;
}
sub{
font-size: $sub-font-size;
bottom: $sub-bottom;
}
sup, sub {
line-height: 0;
position: relative;
vertical-align: baseline;
}
}
// Link styling
a{
color: $link-fore-color;
@if $apply-link-underline {
text-decoration: underline;
}
@else {
text-decoration: none;
}
@if $link-font-weight != 500 {
font-weight: $link-font-weight;
}
@if $apply-link-hover-fade {
opacity: 1;
transition: opacity 0.3s;
}
&:visited {
color: $link-visited-fore-color;
}
@if $apply-link-hover-fade {
@if $style-link-active-state {
&:hover, &:focus, &:active {
opacity: 0.75;
}
}
@else {
&:hover, &:focus {
opacity: 0.75;
}
}
}
@else {
@if $style-link-active-state {
&:hover, &:focus, &:active {
color: $link-hover-fore-color;
}
}
@else {
&:hover, &:focus {
color: $link-hover-fore-color;
}
}
}
color: $link-fore-color;
@if $apply-link-underline {
text-decoration: underline;
}
@else {
text-decoration: none;
}
@if $link-font-weight != 500 {
font-weight: $link-font-weight;
}
@if $apply-link-hover-fade {
opacity: 1;
transition: opacity 0.3s;
}
&:visited {
color: $link-visited-fore-color;
}
@if $apply-link-hover-fade {
@if $style-link-active-state {
&:hover, &:focus, &:active {
opacity: 0.75;
}
}
@else {
&:hover, &:focus {
opacity: 0.75;
}
}
}
@else {
@if $style-link-active-state {
&:hover, &:focus, &:active {
color: $link-hover-fore-color;
}
}
@else {
&:hover, &:focus {
color: $link-hover-fore-color;
}
}
}
}
// Captions for figures
figcaption {
@if $figcaption-font-size != 100% {
font-size: $figcaption-font-size;
}
@if $figcaption-fore-color != $fore-color {
color: $figcaption-fore-color;
}
@if $figcaption-font-size != 100% {
font-size: $figcaption-font-size;
}
@if $figcaption-fore-color != $fore-color {
color: $figcaption-fore-color;
}
}

1046
src/mini/_grid.scss
View file

File diff suppressed because it is too large Load diff

1044
src/mini/_input_control.scss
View file

File diff suppressed because it is too large Load diff

126
src/mini/_input_control_mixins.scss
View file

@ -12,22 +12,22 @@
// required for such elements. However rules for the normal button elements are applied in order to not require the
// base class for the button styles.
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
background: rgba($button-alt-back-color, $button-alt-back-opacity);
@if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color;
}
&:hover, &:focus {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
}
@if $style-link-active-state {
a.#{$button-class-name}.#{$button-alt-name}:active, a[role="button"].#{$button-alt-name}:active {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
}
$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
background: rgba($button-alt-back-color, $button-alt-back-opacity);
@if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color;
}
&:hover, &:focus {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
}
@if $style-link-active-state {
a.#{$button-class-name}.#{$button-alt-name}:active, a[role="button"].#{$button-alt-name}:active {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
}
}
// Mixin for alternate button styles (button style variants).
// Variables:
@ -41,22 +41,22 @@
// required for such elements. However rules for the normal button elements are applied in order to not require the
// base class for the button styles.
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
$button-alt-padding, $button-alt-margin) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
@if $button-alt-border-style != $button-border-style {
border: $button-alt-border-style;
}
@if $button-alt-border-radius != $button-border-radius {
border-radius: $button-alt-border-radius;
}
@if $button-alt-padding != $button-padding {
padding: $button-alt-padding;
}
@if $button-alt-margin != $button-margin {
margin: $button-alt-margin;
}
}
$button-alt-padding, $button-alt-margin) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
@if $button-alt-border-style != $button-border-style {
border: $button-alt-border-style;
}
@if $button-alt-border-radius != $button-border-radius {
border-radius: $button-alt-border-radius;
}
@if $button-alt-padding != $button-padding {
padding: $button-alt-padding;
}
@if $button-alt-margin != $button-margin {
margin: $button-alt-margin;
}
}
}
// Mixin for alternate switch (switch color variants).
// Variables:
@ -66,36 +66,36 @@
// - $switch-alt-knob-back-color : (Optional) The background color of the alternate switch's knob. Defaults to the background color of the switch's knob.
// - $switch-alt-bar-back-color : (Optional) The background color of the alternate switch's bar. Defaults to the background color of the switch's bar.
@mixin make-switch-alt-color ($switch-alt-name, $switch-alt-on-knob-back-color,
$switch-alt-on-bar-back-color: $switch-on-bar-back-color, $switch-alt-knob-back-color: $switch-knob-back-color,
$switch-alt-bar-back-color: $switch-bar-back-color) {
@if not ($include-switch) {
@error "Input_control module's switch mixins are only available if switchws are enabled. Set '$include-switch' to 'true' and try again!";
}
[type="checkbox"] + label.#{$switch-name}.#{$switch-alt-name},
[type="radio"] + label.#{$switch-name}.#{$switch-alt-name} {
&:before {
@if $switch-alt-bar-back-color != $switch--bar-back-color {
background: $switch-alt-bar-back-color;
}
}
&:after {
@if $switch-alt-knob-back-color != $switch-knob-back-color {
background: $switch-alt-knob-back-color;
}
}
}
[type="checkbox"]:checked + label.#{$switch-name}.#{$switch-alt-name},
[type="radio"]:checked + label.#{$switch-name}.#{$switch-alt-name} {
&:before {
@if $switch-alt-on-bar-back-color != $switch-on-bar-back-color {
background: $switch-alt-on-bar-back-color;
}
}
&:after {
@if $switch-alt-on-knob-back-color != $switch-on-knob-back-color {
background: $switch-alt-on-knob-back-color;
}
}
}
$switch-alt-on-bar-back-color: $switch-on-bar-back-color, $switch-alt-knob-back-color: $switch-knob-back-color,
$switch-alt-bar-back-color: $switch-bar-back-color) {
@if not ($include-switch) {
@error "Input_control module's switch mixins are only available if switchws are enabled. Set '$include-switch' to 'true' and try again!";
}
[type="checkbox"] + label.#{$switch-name}.#{$switch-alt-name},
[type="radio"] + label.#{$switch-name}.#{$switch-alt-name} {
&:before {
@if $switch-alt-bar-back-color != $switch--bar-back-color {
background: $switch-alt-bar-back-color;
}
}
&:after {
@if $switch-alt-knob-back-color != $switch-knob-back-color {
background: $switch-alt-knob-back-color;
}
}
}
[type="checkbox"]:checked + label.#{$switch-name}.#{$switch-alt-name},
[type="radio"]:checked + label.#{$switch-name}.#{$switch-alt-name} {
&:before {
@if $switch-alt-on-bar-back-color != $switch-on-bar-back-color {
background: $switch-alt-on-bar-back-color;
}
}
&:after {
@if $switch-alt-on-knob-back-color != $switch-on-knob-back-color {
background: $switch-alt-on-knob-back-color;
}
}
}
}

542
src/mini/_navigation.scss
View file

@ -1,296 +1,296 @@
/*
Definitions for navigation elements.
Definitions for navigation elements.
*/
// Different elements are styled based on the same set of rules.
$button-class-name: 'button' !default; // Class name for the button-like elements.
$header-logo-name: 'logo' !default; // Class name for <header>'s logo.
$header-colorize-svgs: true !default; // [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included (`true`/`false`).
$header-sticky-name: 'sticky' !default; // Class name for sticky <header>.
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included (`true`/`false`).
$footer-sticky-name: 'sticky' !default; // Class name for sticky <footer>.
$include-nav-styles: true !default; // [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories? (`true`/`false`)
$include-drawer: true !default; // [Hidden flag] Should the drawer component be included? (`true`/`false`)
$drawer-name: 'drawer' !default; // Class name for the drawer component.
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
$drawer-right-name: 'right' !default; // Class name for the right variant of the drawer component.
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width of the drawer component.
$drawer-close-name: 'close' !default; // Class name of the close element for the drawer component.
$button-class-name: 'button' !default; // Class name for the button-like elements.
$header-logo-name: 'logo' !default; // Class name for <header>'s logo.
$header-colorize-svgs: true !default; // [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included (`true`/`false`).
$header-sticky-name: 'sticky' !default; // Class name for sticky <header>.
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included (`true`/`false`).
$footer-sticky-name: 'sticky' !default; // Class name for sticky <footer>.
$include-nav-styles: true !default; // [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories? (`true`/`false`)
$include-drawer: true !default; // [Hidden flag] Should the drawer component be included? (`true`/`false`)
$drawer-name: 'drawer' !default; // Class name for the drawer component.
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
$drawer-mobile-breakpoint:768px !default; // Mobile breakpoint for the drawer component.
$drawer-right-name: 'right' !default; // Class name for the right variant of the drawer component.
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width of the drawer component.
$drawer-close-name: 'close' !default; // Class name of the close element for the drawer component.
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default and as a safeguard from ugly branding.
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
// The below variable is used to fix the display problem of the <header> element when used as a responsive row
$grid-row-name: 'row' !default; // [External flag - grid] Class name for the grid system rows.
$button-class-name: 'button' !default; // [External variable - input_control] Name of the button-like element styling class.
$grid-row-name: 'row' !default; // [External flag - grid] Class name for the grid system rows.
$button-class-name: 'button' !default; // [External variable - input_control] Name of the button-like element styling class.
$button-box-shadow:0 1px 3px rgba(0,0,0, 0.1) !default;// [External variable - input_control] Value of button's box-shadow.
$button-border-style: 1px solid transparent !default; // [External variable - input_control] Value of button's border-style.
$button-border-style: 1px solid transparent !default; // [External variable - input_control] Value of button's border-style.
// Header styling.
header {
display: block; // Correct display for older versions of IE.
height: $header-height;
@if $header-back-color != $back-color {
background: $header-back-color;
}
@if $header-fore-color != $fore-color {
color: $header-fore-color;
}
@if $header-border-style != 0 {
border: $header-border-style;
}
@if $header-margin != 0 {
margin: $header-margin;
}
@if $header-padding != 0 {
padding: $header-padding;
}
@if $header-box-shadow != none {
box-shadow: $header-box-shadow;
}
// Responsiveness for smaller displays, scrolls horizontally.
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// Header logo styling.
.#{$header-logo-name} {
@if $header-colorize-svgs { // Deals with SVG colorization in case people use SVGs.
color: $header-fore-color; // Only toggle off if you know what you're doing.
}
@if $header-logo-font-size != $base-font-size {
font-size: $header-logo-font-size;
}
@if $header-logo-line-height != $base-line-height {
line-height: $header-logo-line-height;
}
@if $header-logo-margin != 0 {
margin: $header-logo-margin;
}
@if $header-logo-padding != 0 {
padding: $header-logo-padding;
}
@if $apply-link-hover-fade {
transition: opacity 0.3s ;
}
}
// Link styling.
button, [type="button"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[role="button"], label[role="button"], [role="button"] {
background: $header-back-color; // Apply color regardless to override styling from other things.
color: $header-fore-color;
vertical-align: top; // Alignemt, really important to make this work well.
@if $header-link-margin != 0 {
margin: $header-link-margin;
}
@if $style-link-active-state {
&:hover, &:focus, &:active {
background: $header-link-hover-color;
}
}
@else {
&:hover, &:focus {
background: $header-link-hover-color;
}
}
@if $button-box-shadow != none { // Override for buttons when shadow is enabled.
box-shadow: none;
}
@if $button-border-style != 0 { // Override for buttons when border-style is enabled.
border: 0;
}
}
@if $apply-link-underline { // Override for links if underline is enabled.
.#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] {
text-decoration: none;
}
}
// Fix for responsive header, using the grid system's row and column alignment.
&.#{$grid-row-name} {
box-sizing: content-box;
}
display: block; // Correct display for older versions of IE.
height: $header-height;
@if $header-back-color != $back-color {
background: $header-back-color;
}
@if $header-fore-color != $fore-color {
color: $header-fore-color;
}
@if $header-border-style != 0 {
border: $header-border-style;
}
@if $header-margin != 0 {
margin: $header-margin;
}
@if $header-padding != 0 {
padding: $header-padding;
}
@if $header-box-shadow != none {
box-shadow: $header-box-shadow;
}
// Responsiveness for smaller displays, scrolls horizontally.
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// Header logo styling.
.#{$header-logo-name} {
@if $header-colorize-svgs { // Deals with SVG colorization in case people use SVGs.
color: $header-fore-color; // Only toggle off if you know what you're doing.
}
@if $header-logo-font-size != $base-font-size {
font-size: $header-logo-font-size;
}
@if $header-logo-line-height != $base-line-height {
line-height: $header-logo-line-height;
}
@if $header-logo-margin != 0 {
margin: $header-logo-margin;
}
@if $header-logo-padding != 0 {
padding: $header-logo-padding;
}
@if $apply-link-hover-fade {
transition: opacity 0.3s ;
}
}
// Link styling.
button, [type="button"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[role="button"], label[role="button"], [role="button"] {
background: $header-back-color; // Apply color regardless to override styling from other things.
color: $header-fore-color;
vertical-align: top; // Alignemt, really important to make this work well.
@if $header-link-margin != 0 {
margin: $header-link-margin;
}
@if $style-link-active-state {
&:hover, &:focus, &:active {
background: $header-link-hover-color;
}
}
@else {
&:hover, &:focus {
background: $header-link-hover-color;
}
}
@if $button-box-shadow != none { // Override for buttons when shadow is enabled.
box-shadow: none;
}
@if $button-border-style != 0 { // Override for buttons when border-style is enabled.
border: 0;
}
}
@if $apply-link-underline { // Override for links if underline is enabled.
.#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] {
text-decoration: none;
}
}
// Fix for responsive header, using the grid system's row and column alignment.
&.#{$grid-row-name} {
box-sizing: content-box;
}
}
// Navigation sidebar styling.
@if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on.
nav {
display: block; // Correct display for older versions of IE.
@if $nav-back-color != $back-color {
background: $nav-back-color;
}
@if $nav-fore-color != $fore-color {
color: $nav-fore-color;
}
@if $nav-border-style != 0 {
border: $nav-border-style;
}
@if $nav-border-radius != 0 {
border-radius: $nav-border-radius;
}
@if $nav-margin != 0 {
margin: $nav-margin;
}
@if $nav-padding != 0 {
padding: $nav-padding;
}
@if $nav-box-shadow != none {
box-shadow: $nav-box-shadow;
}
a, a:visited {
display: block;
color: $nav-link-fore-color; // Apply regardless to de-stylize visited links.
text-decoration: none;
}
// Subcategories in navigation.
@for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} {
padding-left: $i * $nav-sublink-padding-left;
position: relative;
@if $nav-include-sublink-bar {
&:before {
position: absolute;
left: $nav-sublink-bar-left-position;
top: -$nav-sublink-bar-width;
content: '';
height: 100%;
border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
border-left: 0;
}
}
}
}
}
@if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on.
nav {
display: block; // Correct display for older versions of IE.
@if $nav-back-color != $back-color {
background: $nav-back-color;
}
@if $nav-fore-color != $fore-color {
color: $nav-fore-color;
}
@if $nav-border-style != 0 {
border: $nav-border-style;
}
@if $nav-border-radius != 0 {
border-radius: $nav-border-radius;
}
@if $nav-margin != 0 {
margin: $nav-margin;
}
@if $nav-padding != 0 {
padding: $nav-padding;
}
@if $nav-box-shadow != none {
box-shadow: $nav-box-shadow;
}
a, a:visited {
display: block;
color: $nav-link-fore-color; // Apply regardless to de-stylize visited links.
text-decoration: none;
}
// Subcategories in navigation.
@for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} {
padding-left: $i * $nav-sublink-padding-left;
position: relative;
@if $nav-include-sublink-bar {
&:before {
position: absolute;
left: $nav-sublink-bar-left-position;
top: -$nav-sublink-bar-width;
content: '';
height: 100%;
border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
border-left: 0;
}
}
}
}
}
}
// Footer styling.
footer {
display: block; // Correct display for older versions of IE.
@if $footer-back-color != $back-color {
background: $footer-back-color;
}
@if $footer-fore-color != $fore-color {
color: $footer-fore-color;
}
@if $footer-border-style != 0 {
border: $footer-border-style;
}
@if $footer-margin != 0 {
margin: $footer-margin;
}
@if $footer-padding != 0 {
padding: $footer-padding;
}
font-size: $footer-font-size;
a, a:visited {
color: $footer-link-fore-color;
}
display: block; // Correct display for older versions of IE.
@if $footer-back-color != $back-color {
background: $footer-back-color;
}
@if $footer-fore-color != $fore-color {
color: $footer-fore-color;
}
@if $footer-border-style != 0 {
border: $footer-border-style;
}
@if $footer-margin != 0 {
margin: $footer-margin;
}
@if $footer-padding != 0 {
padding: $footer-padding;
}
font-size: $footer-font-size;
a, a:visited {
color: $footer-link-fore-color;
}
}
// Sticky headers and footers.
@if $include-header-sticky and $include-footer-sticky {
header.#{$header-sticky-name}, footer.#{$footer-sticky-name} {
position: -webkit-sticky;
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
}
header.#{$header-sticky-name} {
top: 0;
}
footer.#{$footer-sticky-name} {
bottom: 0;
}
header.#{$header-sticky-name}, footer.#{$footer-sticky-name} {
position: -webkit-sticky;
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
}
header.#{$header-sticky-name} {
top: 0;
}
footer.#{$footer-sticky-name} {
bottom: 0;
}
}
@else if $include-header-sticky {
header.#{$header-sticky-name} {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
}
header.#{$header-sticky-name} {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
}
}
@else if $include-footer-sticky {
footer.#{$footer-sticky-name} {
position: -webkit-sticky;
position: sticky;
bottom: 0;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
}
footer.#{$footer-sticky-name} {
position: -webkit-sticky;
position: sticky;
bottom: 0;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
}
}
// Responsive drawer component
@if $include-drawer {
.#{$drawer-toggle-name}:before {
position: relative;
top: $drawer-toggle-top;
font-family: sans-serif;
font-size: $drawer-toggle-font-size;
line-height: $drawer-toggle-line-height;
content: '\2261';
}
.#{$drawer-name} {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
overflow-y: auto;
background: $drawer-back-color;
@if $drawer-border-style != 0 {
border: $drawer-border-style;
}
@if $drawer-border-radius != 0 {
border-radius: $drawer-border-radius;
}
margin: 0;
@if $drawer-padding != 0 {
padding: $drawer-padding;
}
@if $drawer-box-shadow != none {
box-shadow: $drawer-box-shadow;
}
z-index: 1110;
&:not(.#{$drawer-right-name}) {
left: -$drawer-width;
transition: left 0.3s;
}
&.#{$drawer-right-name} {
right: -$drawer-width;
transition: right 0.3s;
}
& .#{$drawer-close-name} {
position: absolute;
top: $drawer-close-top;
right: $drawer-close-right;
z-index: 1111;
padding: 0; // Fixes the extra padding added from <label> styling.
}
}
@media screen and (max-width: #{$drawer-width}) {
.#{$drawer-name} {
width: 100%;
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
.#{$drawer-name}:not(.#{$drawer-persistent-name}) {
position: static;
height: 100%;
z-index: 1100;
& .#{$drawer-close-name} {
display: none;
}
}
.#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
display: none;
}
}
:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
left: 0;
}
:checked + .#{$drawer-name}.#{$drawer-right-name} {
right: 0;
}
.#{$drawer-toggle-name}:before {
position: relative;
top: $drawer-toggle-top;
font-family: sans-serif;
font-size: $drawer-toggle-font-size;
line-height: $drawer-toggle-line-height;
content: '\2261';
}
.#{$drawer-name} {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
overflow-y: auto;
background: $drawer-back-color;
@if $drawer-border-style != 0 {
border: $drawer-border-style;
}
@if $drawer-border-radius != 0 {
border-radius: $drawer-border-radius;
}
margin: 0;
@if $drawer-padding != 0 {
padding: $drawer-padding;
}
@if $drawer-box-shadow != none {
box-shadow: $drawer-box-shadow;
}
z-index: 1110;
&:not(.#{$drawer-right-name}) {
left: -$drawer-width;
transition: left 0.3s;
}
&.#{$drawer-right-name} {
right: -$drawer-width;
transition: right 0.3s;
}
& .#{$drawer-close-name} {
position: absolute;
top: $drawer-close-top;
right: $drawer-close-right;
z-index: 1111;
padding: 0; // Fixes the extra padding added from <label> styling.
}
}
@media screen and (max-width: #{$drawer-width}) {
.#{$drawer-name} {
width: 100%;
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
.#{$drawer-name}:not(.#{$drawer-persistent-name}) {
position: static;
height: 100%;
z-index: 1100;
& .#{$drawer-close-name} {
display: none;
}
}
.#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
display: none;
}
}
:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
left: 0;
}
:checked + .#{$drawer-name}.#{$drawer-right-name} {
right: 0;
}
}

150
src/mini/_progress.scss
View file

@ -1,86 +1,86 @@
/*
Definitions for progress elements and spinners.
Definitions for progress elements and spinners.
*/
// Progress elements use the progress element as their base.
$progress-max-value: 100 !default; // Arithmetic max value of <progress> - use integer values.
$progress-height: 14px !default; // Height of <progress>.
$include-spinner-donut: true !default; // [Hidden flag] Should spinner donuts be enabled? (`true`/`false`)
$spinner-donut-name: 'spinner-donut' !default; // Class name for donut spinner.
$progress-max-value: 100 !default; // Arithmetic max value of <progress> - use integer values.
$progress-height: 14px !default; // Height of <progress>.
$include-spinner-donut: true !default; // [Hidden flag] Should spinner donuts be enabled? (`true`/`false`)
$spinner-donut-name: 'spinner-donut' !default; // Class name for donut spinner.
// Check the `_progress_mixins.scss` file to find this module's mixins.
@import 'progress_mixins';
// Default styling for progress. Use mixins for alternate styles.
progress {
display: block;
vertical-align: baseline; // Correct vertical alignment in certain browsers.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: $progress-height;
// Older browsers will sort not display progress properly, but that's ok
width: 90%;
// Newer browsers will calculate the proper width
width: calc(100% - #{$progress-left-right-margin*2});
margin: $progress-top-bottom-margin $progress-left-right-margin;
border: $progress-border-style;
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
@if $progress-box-shadow != none {
box-shadow: $progress-box-shadow;
}
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
color: $progress-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-fore-color;
@if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
}
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-back-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-fore-color;
@if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
}
&::-moz-progress-bar {
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
}
}
display: block;
vertical-align: baseline; // Correct vertical alignment in certain browsers.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: $progress-height;
// Older browsers will sort not display progress properly, but that's ok
width: 90%;
// Newer browsers will calculate the proper width
width: calc(100% - #{$progress-left-right-margin*2});
margin: $progress-top-bottom-margin $progress-left-right-margin;
border: $progress-border-style;
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
@if $progress-box-shadow != none {
box-shadow: $progress-box-shadow;
}
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
color: $progress-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-fore-color;
@if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
}
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-back-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-fore-color;
@if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
}
&::-moz-progress-bar {
@if $progress-border-radius != 0 {
border-radius: $progress-border-radius;
}
}
}
}
@if $include-spinner-donut { // Turn off to disable spinner donuts.
@if $include-spinner-donut { // Turn off to disable spinner donuts.
// Animation definition for donut spinner
@-webkit-keyframes spinner-donut-anim {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg);}
}
@keyframes spinner-donut-anim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
@-webkit-keyframes spinner-donut-anim {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg);}
}
@keyframes spinner-donut-anim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
}
@if $include-spinner-donut { // Turn off to disable spinner donuts.
// Style for donut spinner
.#{$spinner-donut-name} {
display: inline-block;
border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
border-radius: 50%;
width: $spinner-donut-size;
height: $spinner-donut-size;
-webkit-animation: spinner-donut-anim 1.2s linear infinite;
animation: spinner-donut-anim 1.2s linear infinite;
}
@if $include-spinner-donut { // Turn off to disable spinner donuts.
// Style for donut spinner
.#{$spinner-donut-name} {
display: inline-block;
border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
border-radius: 50%;
width: $spinner-donut-size;
height: $spinner-donut-size;
-webkit-animation: spinner-donut-anim 1.2s linear infinite;
animation: spinner-donut-anim 1.2s linear infinite;
}
}

174
src/mini/_progress_mixins.scss
View file

@ -5,13 +5,13 @@
// - $progress-inline-name : The name of the class used for the inline progress.
// - $progress-inline-width : The width of the inline progress.
@mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
progress.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
@if $progress-inline-width != 100% {
width: $progress-inline-width;
}
}
progress.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
@if $progress-inline-width != 100% {
width: $progress-inline-width;
}
}
}
// Mixin for alternate progress (progress color variants).
// Variables:
@ -19,23 +19,23 @@
// - $progress-alt-fore-color : The progress bar color of the alternate progress.
// - $progress-alt-back-color : (Optional) The background color of the alternate progress. Defaults to the background color of the progress.
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-back-color != $progress-back-color {
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-alt-back-color;
}
}
@if $progress-alt-fore-color != $progress-fore-color {
color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-alt-fore-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-alt-fore-color;
}
}
}
progress.#{$progress-alt-name} {
@if $progress-alt-back-color != $progress-back-color {
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-alt-back-color;
}
}
@if $progress-alt-fore-color != $progress-fore-color {
color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-alt-fore-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-alt-fore-color;
}
}
}
}
// Mixin for alternate progress styles.
// Variables:
@ -47,48 +47,48 @@
// - $progress-alt-border-radius : (Optional) The border radius of the alternate progress style. Defaults to the border radius of the progress.
// - $progress-alt-box-shadow : (Optional) The box shadow of the alternate progress style. Defaults to the box shadow of the progress.
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
$progress-alt-box-shadow : $progress-box-shadow) {
progress.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height {
height: $progress-alt-height;
}
@if $progress-alt-left-right-margin != $progress-left-right-margin {
width: calc(100% - #{$progress-alt-left-right-margin*2});
}
@if $progress-alt-left-right-margin != $progress-left-right-margin or $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
}
@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin auto;
}
@if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style;
}
@if progress-alt-border-radius != $progress-border-radius {
border-radius: $progress-alt-border-radius;
&::-webkit-progress-value {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
border-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-radius: $progress-alt-border-radius;
}
}
}
@if $progress-alt-box-shadow != $progress-box-shadow {
box-shadow: $progress-alt-box-shadow;
}
}
$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
$progress-alt-box-shadow : $progress-box-shadow) {
progress.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height {
height: $progress-alt-height;
}
@if $progress-alt-left-right-margin != $progress-left-right-margin {
width: calc(100% - #{$progress-alt-left-right-margin*2});
}
@if $progress-alt-left-right-margin != $progress-left-right-margin or $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
}
@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin auto;
}
@if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style;
}
@if progress-alt-border-radius != $progress-border-radius {
border-radius: $progress-alt-border-radius;
&::-webkit-progress-value {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
border-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-radius: $progress-alt-border-radius;
}
}
}
@if $progress-alt-box-shadow != $progress-box-shadow {
box-shadow: $progress-alt-box-shadow;
}
}
}
// Mixin for alternate donut spinner colors (spinner donut color variants).
// Variables:
@ -96,32 +96,32 @@
// - $spinner-donut-alt-back-color : The background color of the alternate donut spinner.
// - $spinner-donut-alt-fore-color : The foreground color of the alternate donut spinner.
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) {
@if not ($include-spinner-donut) {
@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
}
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
}
@if not ($include-spinner-donut) {
@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
}
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
}
}
// Mixin for alternate donut spinner styles (spinner donut styles variants).
// Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner style.
// - $spinner-donut-alt-size : The size of the alternate donut spinner style.
// - $spinner-donut-alt-border-thickness : (Optional) The border thickness of the alternate donut spinner style.
// Defaults to the value of $spinner-donut-alt-border-thickness.
// Defaults to the value of $spinner-donut-alt-border-thickness.
@mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
@if not ($include-spinner-donut) {
@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
}
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
border-width: $spinner-donut-alt-border-thickness;
}
@if $spinner-donut-alt-size != $spinner-donut-size {
width: $spinner-donut-alt-size;
height: $spinner-donut-alt-size;
}
}
$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
@if not ($include-spinner-donut) {
@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
}
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
border-width: $spinner-donut-alt-border-thickness;
}
@if $spinner-donut-alt-size != $spinner-donut-size {
width: $spinner-donut-alt-size;
height: $spinner-donut-alt-size;
}
}
}

496
src/mini/_tab.scss
View file

@ -1,261 +1,261 @@
/*
Definitions for tabs/horizontal accordions.
Definitions for tabs/horizontal accordions.
*/
// Dependency: This module is somewhat dependent on the grid system.
$tab-container-name: 'tabs' !default; // Class name for the tabs container.
$include-stacked-tabs: true !default; // [Hidden flag] Should stacked tabs be included? (`true`/`false`).
$tab-stacked-name: 'stacked' !default; // Class name for stacked tabs container.
$tab-stacked-breakpoint: 767px !default; // Breakpoint for tabs layout (stacked/horizontal)
$tab-container-name: 'tabs' !default; // Class name for the tabs container.
$include-stacked-tabs: true !default; // [Hidden flag] Should stacked tabs be included? (`true`/`false`).
$tab-stacked-name: 'stacked' !default; // Class name for stacked tabs container.
$tab-stacked-breakpoint: 767px !default; // Breakpoint for tabs layout (stacked/horizontal)
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
$back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything.
// Tab styling
.#{$tab-container-name} {
width: 100%;
opacity: 1;
// Old syntax
display: -webkit-box;
-webkit-box-pack: justify;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
@if $tab-container-box-shadow != none {
box-shadow: $tab-container-box-shadow;
}
// Tab label styling
& > label {
// Old syntax
-webkit-box-flex: 1;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
// Make tab labels stay at the top on large displays
-webkit-order: 1;
order: 1;
// Actual styling
display: inline-block;
height: $tab-label-height;
cursor: pointer;
transition: background 0.3s;
@if $tab-label-back-color != $back-color {
background: $tab-label-back-color;
}
@if $tab-label-fore-color != $fore-color {
color: $tab-label-fore-color;
}
@if $tab-border-style != 0 {
border: $tab-border-style;
}
@if $tab-label-padding != 0 {
padding: $tab-label-padding;
}
@if $tab-border-radius != 0 { // Style first and last tabs' labels' top corners as needed
&:first-of-type {
border-top-left-radius: $tab-border-radius;
}
&:last-of-type {
border-top-right-radius: $tab-border-radius;
}
}
// Hover styling for tabs' labels
&:hover, &:focus {
background: rgba($tab-label-back-color, $tab-label-hover-opacity);
}
}
// Tab radio styling
& > [type="radio"], & > [type="checkbox"] {
display: none;
visibility: hidden;
}
// Tab content styling
& > label + div {
// New syntax
-webkit-flex-basis: auto;
flex-basis: auto;
// Make tab panels display after all the labels on larger displays
-webkit-order: 2;
order: 2;
// Hide content, while allowing accessibility
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
// Presentation
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
transition: -webkit-transform 0.3s,
transform 0.3s;
@if $tab-border-radius != 0 {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
// Style for tab labels except the first
@if $tab-border-style != 0 {
& > label:not(:first-of-type) {
border-left: 0;
}
}
// Tab label styling for open tab
& > :checked + label {
@if $tab-label-selected-back-color != $tab-label-back-color {
background: $tab-label-selected-back-color;
&:hover, &:focus {
background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
}
}
@if $tab-label-selected-fore-color != $tab-label-fore-color {
color: $tab-label-selected-fore-color;
}
border-bottom-color: $tab-selected-border-color;
}
// Tab content styling (open tab)
& > :checked + label + div {
box-sizing: border-box;
position: relative;
height: $tab-panel-height;
width: 100%;
overflow: auto;
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
@if $tab-panel-back-color != $back-color {
background: $tab-panel-back-color;
}
@if $tab-panel-fore-color != $fore-color {
color: $tab-panel-fore-color;
}
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
@if $tab-panel-padding != 0 {
padding: $tab-panel-padding;
}
// Fix display for some browsers
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
width: 100%;
opacity: 1;
// Old syntax
display: -webkit-box;
-webkit-box-pack: justify;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
@if $tab-container-box-shadow != none {
box-shadow: $tab-container-box-shadow;
}
// Tab label styling
& > label {
// Old syntax
-webkit-box-flex: 1;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
// Make tab labels stay at the top on large displays
-webkit-order: 1;
order: 1;
// Actual styling
display: inline-block;
height: $tab-label-height;
cursor: pointer;
transition: background 0.3s;
@if $tab-label-back-color != $back-color {
background: $tab-label-back-color;
}
@if $tab-label-fore-color != $fore-color {
color: $tab-label-fore-color;
}
@if $tab-border-style != 0 {
border: $tab-border-style;
}
@if $tab-label-padding != 0 {
padding: $tab-label-padding;
}
@if $tab-border-radius != 0 { // Style first and last tabs' labels' top corners as needed
&:first-of-type {
border-top-left-radius: $tab-border-radius;
}
&:last-of-type {
border-top-right-radius: $tab-border-radius;
}
}
// Hover styling for tabs' labels
&:hover, &:focus {
background: rgba($tab-label-back-color, $tab-label-hover-opacity);
}
}
// Tab radio styling
& > [type="radio"], & > [type="checkbox"] {
display: none;
visibility: hidden;
}
// Tab content styling
& > label + div {
// New syntax
-webkit-flex-basis: auto;
flex-basis: auto;
// Make tab panels display after all the labels on larger displays
-webkit-order: 2;
order: 2;
// Hide content, while allowing accessibility
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
// Presentation
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
transition: -webkit-transform 0.3s,
transform 0.3s;
@if $tab-border-radius != 0 {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
// Style for tab labels except the first
@if $tab-border-style != 0 {
& > label:not(:first-of-type) {
border-left: 0;
}
}
// Tab label styling for open tab
& > :checked + label {
@if $tab-label-selected-back-color != $tab-label-back-color {
background: $tab-label-selected-back-color;
&:hover, &:focus {
background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
}
}
@if $tab-label-selected-fore-color != $tab-label-fore-color {
color: $tab-label-selected-fore-color;
}
border-bottom-color: $tab-selected-border-color;
}
// Tab content styling (open tab)
& > :checked + label + div {
box-sizing: border-box;
position: relative;
height: $tab-panel-height;
width: 100%;
overflow: auto;
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
@if $tab-panel-back-color != $back-color {
background: $tab-panel-back-color;
}
@if $tab-panel-fore-color != $fore-color {
color: $tab-panel-fore-color;
}
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
@if $tab-panel-padding != 0 {
padding: $tab-panel-padding;
}
// Fix display for some browsers
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
// Stacked tabs
@if $include-stacked-tabs { // Turn off if you don't want stacked tabs enabled (except on smaller screens for responsiveness)
.#{$tab-container-name}.#{$tab-stacked-name} {
// Old syntax
-webkit-box-orient: vertical;
// New syntax
-webkit-flex-direction: column;
flex-direction: column;
& > label {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
&:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
// Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
&:first-of-type {
border-top-right-radius: $tab-border-radius;
}
}
}
& > :checked + label {
@if $tab-border-style != 0 {
border: $tab-border-style;
}
@if $tab-border-radius != 0 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
& > label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
// Presentation
-webkit-transform-origin: top;
transform-origin: top;
@if $tab-border-radius != 0 {
border-radius: 0;
}
}
& > label:not(:first-of-type) {
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
}
& > :checked + label + div {
height: auto;
}
@if $tab-border-radius != 0 {
& > label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
}
.#{$tab-container-name}.#{$tab-stacked-name} {
// Old syntax
-webkit-box-orient: vertical;
// New syntax
-webkit-flex-direction: column;
flex-direction: column;
& > label {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
&:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
// Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
&:first-of-type {
border-top-right-radius: $tab-border-radius;
}
}
}
& > :checked + label {
@if $tab-border-style != 0 {
border: $tab-border-style;
}
@if $tab-border-radius != 0 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
& > label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
// Presentation
-webkit-transform-origin: top;
transform-origin: top;
@if $tab-border-radius != 0 {
border-radius: 0;
}
}
& > label:not(:first-of-type) {
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
}
& > :checked + label + div {
height: auto;
}
@if $tab-border-radius != 0 {
& > label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
}
}
// Responsiveness
@media screen and (max-width: #{$tab-stacked-breakpoint}) {
.#{$tab-container-name} {
// Old syntax
-webkit-box-orient: vertical;
// New syntax
-webkit-flex-direction: column;
flex-direction: column;
& > label {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
&:first-of-type {
border-top-right-radius: $tab-border-radius;
}
&:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
}
& > :checked + label {
@if $tab-border-style != 0 {
border: $tab-border-style;
}
@if $tab-border-radius != 0 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
& > label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
@if $tab-border-radius != 0 {
border-radius: 0;
}
}
& > label:not(:first-of-type) {
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
}
@if $tab-border-radius != 0 {
& > label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
}
.#{$tab-container-name} {
// Old syntax
-webkit-box-orient: vertical;
// New syntax
-webkit-flex-direction: column;
flex-direction: column;
& > label {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
&:first-of-type {
border-top-right-radius: $tab-border-radius;
}
&:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
}
& > :checked + label {
@if $tab-border-style != 0 {
border: $tab-border-style;
}
@if $tab-border-radius != 0 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
& > label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
@if $tab-border-radius != 0 {
border-radius: 0;
}
}
& > label:not(:first-of-type) {
@if $tab-border-style != 0 {
border: $tab-border-style;
border-top: 0;
}
}
@if $tab-border-radius != 0 {
& > label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius;
}
}
}
}

1458
src/mini/_table.scss
View file

File diff suppressed because it is too large Load diff

284
src/mini/_utility.scss
View file

@ -1,167 +1,167 @@
/*
Definitions for utilities and helper classes.
Definitions for utilities and helper classes.
*/
$hidden-name: 'hidden' !default; // Class name for hidden elements.
$visually-hidden-name: 'visually-hidden' !default; // Class name for visually hidden elements.
$include-breadcrumbs: true !default; // [Hidden flag] Should breadcrumbs be included? (`true`/`false`)
$breadcrumbs-name: 'breadcrumbs' !default; // Class name for breadcrumbs.
$include-close-icon: true !default; // [Hidden flag] Should the close icon be included? (`true`/`false`)
$close-icon-name: 'close'!default; // Class name for close icon.
$hidden-name: 'hidden' !default; // Class name for hidden elements.
$visually-hidden-name: 'visually-hidden' !default; // Class name for visually hidden elements.
$include-breadcrumbs: true !default; // [Hidden flag] Should breadcrumbs be included? (`true`/`false`)
$breadcrumbs-name: 'breadcrumbs' !default; // Class name for breadcrumbs.
$include-close-icon: true !default; // [Hidden flag] Should the close icon be included? (`true`/`false`)
$close-icon-name: 'close'!default; // Class name for close icon.
// The floats, clearfix and center-block flags are for legacy features.
$include-floats: false !default; // Should floats be included? (`true`/`false`)
$include-clearfix: false !default; // Should clearfix be included? (`true`/`false`)
$include-center-block: false !default; // Should center block be included? (`true`/`false`)
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
$include-floats: false !default; // Should floats be included? (`true`/`false`)
$include-clearfix: false !default; // Should clearfix be included? (`true`/`false`)
$include-center-block: false !default; // Should center block be included? (`true`/`false`)
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
// Check the `_utility_mixins.scss` file to find this module's mixins.
@import 'utility_mixins';
// Hidden elements class. ATTENTION: Uses !important.
.#{$hidden-name}{
display: none !important;
display: none !important;
}
// Visually hidden elements class. ATTENTION: Uses !important.
.#{$visually-hidden-name} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
@if $include-breadcrumbs { // Turn off if you do not want breadcrumbs to be included.
// Breadcrumbs
ul.#{$breadcrumbs-name} {
// Old syntax
display: -webkit-box;
// New syntax
display: -webkit-flex;
display: flex;
list-style: none;
// Apply margin from styling
@if $breadcrumbs-margin != 0 {
margin: $breadcrumbs-margin;
}
@else { // Reset margins from list styling
margin-left: 0;
margin-right: 0;
}
padding: 0; // Remove unnecessary left and right empty space
@if $breadcrumbs-border-style !=0 {
border: $breadcrumbs-border-style;
}
@if $breadcrumbs-border-radius != 0 {
border-radius: $breadcrumbs-border-radius;
}
@if $breadcrumbs-box-shadow != none {
box-shadow: $breadcrumbs-box-shadow;
}
li {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
position: relative;
text-align: center;
background: $breadcrumbs-back-color;
height: $breadcrumbs-height;
line-height: $breadcrumbs-height;
margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
&:before, &:after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
border: 0 solid $breadcrumbs-back-color;
border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4);
}
&:before {
left: -($breadcrumbs-height/2);
border-left-color: transparent;
}
&:after {
left: 100%;
border-color: transparent;
border-left-color: $breadcrumbs-back-color;
}
&:first-child {
&:before {
border: 0;
}
}
&:last-child {
margin-right: 0;
&:after {
border: 0;
}
}
}
}
@if $include-breadcrumbs { // Turn off if you do not want breadcrumbs to be included.
// Breadcrumbs
ul.#{$breadcrumbs-name} {
// Old syntax
display: -webkit-box;
// New syntax
display: -webkit-flex;
display: flex;
list-style: none;
// Apply margin from styling
@if $breadcrumbs-margin != 0 {
margin: $breadcrumbs-margin;
}
@else { // Reset margins from list styling
margin-left: 0;
margin-right: 0;
}
padding: 0; // Remove unnecessary left and right empty space
@if $breadcrumbs-border-style !=0 {
border: $breadcrumbs-border-style;
}
@if $breadcrumbs-border-radius != 0 {
border-radius: $breadcrumbs-border-radius;
}
@if $breadcrumbs-box-shadow != none {
box-shadow: $breadcrumbs-box-shadow;
}
li {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
position: relative;
text-align: center;
background: $breadcrumbs-back-color;
height: $breadcrumbs-height;
line-height: $breadcrumbs-height;
margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
&:before, &:after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
border: 0 solid $breadcrumbs-back-color;
border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4);
}
&:before {
left: -($breadcrumbs-height/2);
border-left-color: transparent;
}
&:after {
left: 100%;
border-color: transparent;
border-left-color: $breadcrumbs-back-color;
}
&:first-child {
&:before {
border: 0;
}
}
&:last-child {
margin-right: 0;
&:after {
border: 0;
}
}
}
}
}
@if $include-close-icon { // Turn off if you do not want to include the close icon
// Close icon
.#{$close-icon-name}{
display: inline-block;
width: $close-icon-size;
font-family: sans-serif;
font-size: $close-icon-size;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba($close-icon-back-color,0);
vertical-align: top;
cursor: pointer;
transition: background 0.3s;
@if $style-link-active-state {
&:hover, &:focus, &:active {
background: rgba($close-icon-back-color,1);
}
}
@else {
&:hover, &:focus {
background: rgba($close-icon-back-color,1);
}
}
&:before {
content: "\00D7";
display: block;
text-align: center;
}
}
// Close icon
.#{$close-icon-name}{
display: inline-block;
width: $close-icon-size;
font-family: sans-serif;
font-size: $close-icon-size;
line-height: 1;
font-weight: 700;
border-radius: 2rem;
background: rgba($close-icon-back-color,0);
vertical-align: top;
cursor: pointer;
transition: background 0.3s;
@if $style-link-active-state {
&:hover, &:focus, &:active {
background: rgba($close-icon-back-color,1);
}
}
@else {
&:hover, &:focus {
background: rgba($close-icon-back-color,1);
}
}
&:before {
content: "\00D7";
display: block;
text-align: center;
}
}
}
// Floats. ATTENTION: Uses !important.
// NOTE: Might be obsolete and not play well with others.
@if $include-floats {
.#{$float-prefix}-left {
float: left !important;
}
.#{$float-prefix}-right {
float: right !important;
}
.#{$float-prefix}-left {
float: left !important;
}
.#{$float-prefix}-right {
float: right !important;
}
}
// Clearfix mixin. ATTENTION: Uses !important.
// NOTE: Might be obsolete and not play well with others.
@if $include-clearfix {
.#{$clearfix-name} {
&:before, &:after {
content: ' ' !important;
display: table !important;
clear: both !important;
}
}
.#{$clearfix-name} {
&:before, &:after {
content: ' ' !important;
display: table !important;
clear: both !important;
}
}
}
// Center block. ATTENTION: Uses !important.
@if $include-center-block {
.#{$center-block-name} {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
.#{$center-block-name} {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
}

340
src/mini/_utility_mixins.scss
View file

@ -4,27 +4,27 @@
// Variables:
// - $border-generic-name : The name of the class used for the generic border.
@mixin make-border-generic ($border-generic-name) {
.#{$border-generic-name} {
border: 1px solid rgba(0,0,0, 0.25) !important;
}
.#{$border-generic-name} {
border: 1px solid rgba(0,0,0, 0.25) !important;
}
}
// Generic radial border mixin. ATTENTION: Uses !important.
// Variables:
// - $border-radial-name : The name of the class used for the radial border.
// - $border-radial-radius : The border radius used for the radial border.
@mixin make-border-radial-style ($border-radial-name, $border-radial-radius) {
.#{$border-radial-name} {
border-radius: $border-radial-radius !important;
}
.#{$border-radial-name} {
border-radius: $border-radial-radius !important;
}
}
// Generic box shadow mixin. ATTENTION: Uses !important.
// Variables:
// - $box-shadow-name : The name of the class used for the generic box shadow.
// - $box-shadow-value : The box shadow value of the generic box shadow.
@mixin make-box-shadow-generic ($box-shadow-name, $box-shadow-value) {
.#{$box-shadow-name} {
box-shadow: $box-shadow-value !important;
}
.#{$box-shadow-name} {
box-shadow: $box-shadow-value !important;
}
}
// Responsive margin mixin. ATTENTION: Uses !important.
// Variables:
@ -38,32 +38,32 @@
// - $margin-small-breakpoint : (Optional) Small screen breakpoint for the responsive margin, used only if above flag is set to `true`. Defaults to `480px`.
// - $margin-extra-small-value : (Optional) Responsive margin value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
@mixin make-margin-responsive ($margin-name, $margin-small-value,
$margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
$margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
$margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
@if $margin-use-four-step-grid {
.#{$margin-name} {
margin: $margin-extra-small-value !important;
}
@media screen and (min-width: #{$margin-small-breakpoint}) {
margin: $margin-small-value !important;
}
}
@else {
.#{$margin-name} {
margin: $margin-small-value !important;
}
}
@media screen and (min-width: #{$margin-medium-breakpoint}) {
.#{$margin-name} {
margin: $margin-medium-value !important;
}
}
@media screen and (min-width: #{$margin-large-breakpoint}) {
.#{$margin-name} {
margin: $margin-large-value !important;
}
}
$margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
$margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
$margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
@if $margin-use-four-step-grid {
.#{$margin-name} {
margin: $margin-extra-small-value !important;
}
@media screen and (min-width: #{$margin-small-breakpoint}) {
margin: $margin-small-value !important;
}
}
@else {
.#{$margin-name} {
margin: $margin-small-value !important;
}
}
@media screen and (min-width: #{$margin-medium-breakpoint}) {
.#{$margin-name} {
margin: $margin-medium-value !important;
}
}
@media screen and (min-width: #{$margin-large-breakpoint}) {
.#{$margin-name} {
margin: $margin-large-value !important;
}
}
}
// Responsive padding mixin. ATTENTION: Uses !important.
// Variables:
@ -77,32 +77,32 @@
// - $padding-small-breakpoint : (Optional) Small screen breakpoint for the responsive padding, used only if above flag is set to `true`. Defaults to `480px`.
// - $padding-extra-small-value : (Optional) Responsive padding value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
@mixin make-padding-responsive ($padding-name, $padding-small-value,
$padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
$padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
$padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
@if $padding-use-four-step-grid{
.#{$padding-name} {
padding: $padding-extra-small-value !important;
}
@media screen and (min-width: #{$padding-small-breakpoint}) {
padding: $padding-small-value !important;
}
}
@else {
.#{$padding-name} {
padding: $padding-small-value !important;
}
}
@media screen and (min-width: #{$padding-medium-breakpoint}) {
.#{$padding-name} {
padding: $padding-medium-value !important;
}
}
@media screen and (min-width: #{$padding-large-breakpoint}) {
.#{$padding-name} {
padding: $padding-large-value !important;
}
}
$padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
$padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
$padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
@if $padding-use-four-step-grid{
.#{$padding-name} {
padding: $padding-extra-small-value !important;
}
@media screen and (min-width: #{$padding-small-breakpoint}) {
padding: $padding-small-value !important;
}
}
@else {
.#{$padding-name} {
padding: $padding-small-value !important;
}
}
@media screen and (min-width: #{$padding-medium-breakpoint}) {
.#{$padding-name} {
padding: $padding-medium-value !important;
}
}
@media screen and (min-width: #{$padding-large-breakpoint}) {
.#{$padding-name} {
padding: $padding-large-value !important;
}
}
}
// Responsive hidden elements mixin. ATTENTION: Uses !important.
// Variables:
@ -116,38 +116,38 @@
// - $hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive hiding, used only if the above variable is set to `true`. Defaults to `480px`.
// - $hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
@mixin make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint : 768px,
$hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
$hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
$hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
@if $hidden-use-four-step-grid {
@media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none !important;
}
}
}
@else {
@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-medium-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-large-breakpoint}) {
.#{$hidden-prefix}-#{$hidden-large-suffix} {
display: none !important;
}
}
}
$hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
$hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
$hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
@if $hidden-use-four-step-grid {
@media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none !important;
}
}
}
@else {
@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-medium-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-large-breakpoint}) {
.#{$hidden-prefix}-#{$hidden-large-suffix} {
display: none !important;
}
}
}
}
// Responsive visually hidden elements mixin. ATTENTION: Uses !important.
// Variables:
@ -161,81 +161,81 @@
// - $visually-hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive visual hiding, used only if the above variable is set to `true`. Defaults to `480px`.
// - $visually-hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive visual hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
@mixin make-visually-hidden-responsive ($visually-hidden-prefix, $visually-hidden-medium-breakpoint : 768px,
$visually-hidden-large-breakpoint : 1280px , $visually-hidden-small-suffix : 'sm', $visually-hidden-medium-suffix : 'md',
$visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
$visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
@if $visually-hidden-use-four-step-grid {
@media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
}
@else {
@media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
}
$visually-hidden-large-breakpoint : 1280px , $visually-hidden-small-suffix : 'sm', $visually-hidden-medium-suffix : 'md',
$visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
$visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
@if $visually-hidden-use-four-step-grid {
@media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
}
@else {
@media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
}
}