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 # 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 ## v2.3.0
- Added a new `.modal` component, which allows you to show modal dialogs (`contextual`). - 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 - [Per Harald Borgen](https://scrimba.com/perborgen) - Introductory video creator
- Rory Primrose ([@roryprimrose](https://github.com/roryprimrose)) - Code restructure - 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 - 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 ## License

20
dist/mini-dark.css vendored
View file

@ -1,9 +1,9 @@
@charset "UTF-8"; @charset "UTF-8";
/* /*
Flavor name: Dark (mini-dark) Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v2.3.1 mini.css version: v2.3.1
*/ */
/* /*
Browsers resets and base typography. 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, button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary, [role="button"].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) { @media screen and (min-width: 480px) {
.card.large { .card.large {
@ -1998,7 +1998,7 @@ mark.inline-block {
} }
/* /*
Custom contextual background elements and alerts. Custom contextual background elements and alerts.
*/ */
mark.secondary { mark.secondary {
background: #e53935; background: #e53935;
@ -2038,7 +2038,7 @@ progress {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
height: 1rem; height: 0.625rem;
width: 90%; width: 90%;
width: calc(100% - 1rem); width: calc(100% - 1rem);
margin: 0.5rem 0.5rem; 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 { progress.inline {
display: inline-block; 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 { .bordered {
border: 1px solid rgba(0, 0, 0, 0.25) !important; 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"; @charset "UTF-8";
/* /*
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v2.3.1 mini.css version: v2.3.1
*/ */
/* /*
Browsers resets and base typography. 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, button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary, [role="button"].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) { @media screen and (min-width: 480px) {
.card.large { .card.large {
@ -1999,7 +1999,7 @@ mark.inline-block {
} }
/* /*
Custom contextual background elements and alerts. Custom contextual background elements and alerts.
*/ */
mark.secondary { mark.secondary {
background: #e53935; 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 { progress.inline {
display: inline-block; 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 { .bordered {
border: 1px solid rgba(0, 0, 0, 0.25) !important; 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"; @charset "UTF-8";
/* /*
Flavor name: Lite (mini-lite) Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v2.3.1 mini.css version: v2.3.1
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.
*/ */
html { html {
font-size: 16px; 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, button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary, .button.primary, [role="button"].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 { .card.fluid {
max-width: 100%; max-width: 100%;
@ -1202,7 +1202,7 @@ mark.inline-block {
} }
/* /*
Custom contextual background elements and alerts. Custom contextual background elements and alerts.
*/ */
mark.secondary { mark.secondary {
background: #e53935; 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 { progress.inline {
display: inline-block; 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 { .bordered {
border: 1px solid rgba(0, 0, 0, 0.25) !important; 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="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> <td data-label="Description">Opacity of <code>&lt;input&gt;</code> elements (disabled)</td><td data-label="Sample value">0.75</td>
</tr> </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> <tr>
<td data-label="Variable">$input-group-name</td><td data-label="Type">String</td> <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> <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> <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> <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://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> <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"> <ul style="margin-left:0px; padding-left: 4px">
<li class="card fluid"> <li class="card fluid">

2
docs/index.html
View file

@ -120,7 +120,7 @@
<br/> <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> <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://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/> <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> <hr>
</div> </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> </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> <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://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">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> <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> <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. - 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. - 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. - 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. // This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments, // Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
// structured like the flavor description below, will be included in your final CSS file. // structured like the flavor description below, will be included in your final CSS file.
// Note: This flavor is not a full flavor, we strongly recommend you duplicate the mini-default flavor instead // 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. // of this file, unless you know what you are doing.
/* /*
Flavor name: Lite (mini-lite) Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v2.3.1 mini.css version: v2.3.1
*/ */
// Basic rules for body and typography // Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color $fore-color: #212121; // Text and general foreground color
$back-color: #f8f8f8; // Body background color $back-color: #f8f8f8; // Body background color
$base-font-family: // Default font stack for all elements: $base-font-family: // Default font stack for all elements:
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif'; '-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts // OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
$base-root-font-size: 16px; // Root font sizing for all elements [1] $base-root-font-size: 16px; // Root font sizing for all elements [1]
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [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-font-size: 1rem; // Default font sizing for all elements [2]
$base-line-height: 1.5; // Default line height for all elements. $base-line-height: 1.5; // Default line height for all elements.
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`) $use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
$body-margin: 0; // Margin for the body $body-margin: 0; // Margin for the body
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3] $apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
$h1-font-size: 2rem; // Font size of h1 $h1-font-size: 2rem; // Font size of h1
$h2-font-size: 1.6875rem; // Font size for h2 $h2-font-size: 1.6875rem; // Font size for h2
$h3-font-size: 1.4375rem; // Font size for h3 $h3-font-size: 1.4375rem; // Font size for h3
$h4-font-size: 1.1875rem; // Font size for h4 $h4-font-size: 1.1875rem; // Font size for h4
$h5-font-size: 1rem; // Font size for h5 $h5-font-size: 1rem; // Font size for h5
$h6-font-size: 0.8125rem; // Font size for h6 $h6-font-size: 0.8125rem; // Font size for h6
$heading-line-height: 1.2em; // Line height for all headings $heading-line-height: 1.2em; // Line height for all headings
$heading-margin: 0.75rem 0.5rem; // Margin for all headings $heading-margin: 0.75rem 0.5rem; // Margin for all headings
$heading-font-weight: 500; // Font weight for all headings $heading-font-weight: 500; // Font weight for all headings
$heading-smalltext-fore-color: #424242; // <small> color in headings $heading-smalltext-fore-color: #424242; // <small> color in headings
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4] $make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
$heading-smalltext-b-font-size: 0.75em; // Font size of block <small> elements in headings $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 $heading-smalltext-b-top-margin:-0.25rem; // Top margin of block <small> elements in headings
$paragraph-margin: 0.5rem; // Margin for <p> elements $paragraph-margin: 0.5rem; // Margin for <p> elements
$list-margin: 0.5rem; // Margin for <ol> and <ul> elements $list-margin: 0.5rem; // Margin for <ol> and <ul> elements
$list-left-padding: 1rem; // Left padding 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> $bold-font-weight: 700; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.25em; // <hr> line height $horizontal-rule-line-height: 1.25em; // <hr> line height
$horizontal-rule-margin: 0.5rem; // <hr> margin $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-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] $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-back-color: #eeeeee; // Background color for <blockquote>
$blockquote-fore-color: $fore-color; // Text color for <blockquote> $blockquote-fore-color: $fore-color; // Text color for <blockquote>
$blockquote-margin: 0.5rem; // Margin for <blockquote> $blockquote-margin: 0.5rem; // Margin for <blockquote>
$blockquote-padding: 0.5rem 0.5rem 1.5rem; // Padding for <blockquote> $blockquote-padding: 0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
$blockquote-sidebar-style: 0; // Style for the sidebar of <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-font-size: 0.875rem; // Font size for citation of <blockquote>
$blockquote-cite-fore-color: #505050; // Text color 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-left-position: 0.625rem; // Left padding for citation of <blockquote>
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote> $blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
$blockquote-border-style: 0; // Border style for <blockquote> $blockquote-border-style: 0; // Border style for <blockquote>
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote> $blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
$blockquote-box-shadow: none; // Box shadow for <blockquote> $blockquote-box-shadow: none; // Box shadow for <blockquote>
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6] $use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
$code-element-padding: 0.125rem 0.25rem; // Padding for <code> $code-element-padding: 0.125rem 0.25rem; // Padding for <code>
$code-element-fore-color: $fore-color; // Text color for <code> $code-element-fore-color: $fore-color; // Text color for <code>
$code-element-back-color: #e6e6e6; // Background color for <code> $code-element-back-color: #e6e6e6; // Background color for <code>
$code-element-border-style: 0; // Border style for <code> $code-element-border-style: 0; // Border style for <code>
$code-element-border-radius: 2*$_1px; // Border radius for <code> $code-element-border-radius: 2*$_1px; // Border radius for <code>
$code-element-box-shadow: none; // Box shadow for <code> $code-element-box-shadow: none; // Box shadow for <code>
$pre-element-padding: 0.75rem; // Padding for <pre> $pre-element-padding: 0.75rem; // Padding for <pre>
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre> $pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
$pre-element-back-color: $code-element-back-color; // Background color for <pre> $pre-element-back-color: $code-element-back-color; // Background color for <pre>
$pre-element-border-style: 0; // Border style for <pre> $pre-element-border-style: 0; // Border style for <pre>
$pre-element-border-radius: 0 2*$_1px 2*$_1px 0; // Border radius 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-margin: 0.5rem; // Margin for <pre>
$pre-element-box-shadow: none; // Box shadow 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] $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-padding: $code-element-padding; // Padding for <kbd>
$kbd-element-fore-color: #fafafa; // Text color for <kbd> $kbd-element-fore-color: #fafafa; // Text color for <kbd>
$kbd-element-back-color: #0c0c0c; // Background color for <kbd> $kbd-element-back-color: #0c0c0c; // Background color for <kbd>
$kbd-element-border-style: 0; // Border style for <kbd> $kbd-element-border-style: 0; // Border style for <kbd>
$kbd-element-border-radius: $code-element-border-radius; // Border radius 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> $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] $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] $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 $small-font-size: 0.75em; // Font size for <small> elements
$sup-font-size: 0.75em; // Font size for <sup> elements $sup-font-size: 0.75em; // Font size for <sup> elements
$sub-font-size: 0.75em; // Font size for <sub> elements $sub-font-size: 0.75em; // Font size for <sub> elements
$sup-top: -0.5em; // <sup> top $sup-top: -0.5em; // <sup> top
$sub-bottom: -0.25em; // <sub> bottom $sub-bottom: -0.25em; // <sub> bottom
$link-fore-color: #0277bd; // Text color for <a> $link-fore-color: #0277bd; // Text color for <a>
$link-visited-fore-color: #01579b; // Text color for visited <a> $link-visited-fore-color: #01579b; // Text color for visited <a>
$link-font-weight: 500; // Font weight for <a> $link-font-weight: 500; // Font weight for <a>
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10] $apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11] $apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
$figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements $figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
$figcaption-fore-color: #424242; // Text color for <figcaption> elements $figcaption-fore-color: #424242; // Text color for <figcaption> elements
// Notes: // Notes:
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root // [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 // 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. // 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]). // [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 // 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`. // $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 // [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 // [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 // [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` // [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 // [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 // [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 // [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 // [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 // [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. // focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// Variables for grid elements // 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] $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] $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-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 0.75rem; // Padding for the grid container (left and right only) $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-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-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-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets $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-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-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-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-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-column-padding: 0 0.25rem; // Padding for the columns of the grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid $grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid $grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid $grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid $grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// Notes: // Notes:
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with // [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 // [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. // layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
// Variables for forms and inputs // Variables for forms and inputs
$form-back-color: #eeeeee; // Background color for forms $form-back-color: #eeeeee; // Background color for forms
$form-fore-color: $fore-color; // Text color for forms $form-fore-color: $fore-color; // Text color for forms
$form-border-style: $_1px solid #c9c9c9; // Border style for forms $form-border-style: $_1px solid #c9c9c9; // Border style for forms
$form-border-radius: 0; // Border radius for forms $form-border-radius: 0; // Border radius for forms
$form-margin: 0.5rem; // Margin for forms $form-margin: 0.5rem; // Margin for forms
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms $form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
$form-box-shadow: none; // Box shadow for forms $form-box-shadow: none; // Box shadow for forms
$fieldset-back-color: $form-back-color; // Background color for fieldset $fieldset-back-color: $form-back-color; // Background color for fieldset
$fieldset-border-style: $_1px solid #d0d0d0; // Border style for fieldset $fieldset-border-style: $_1px solid #d0d0d0; // Border style for fieldset
$fieldset-border-radius:2*$_1px; // Border radius for fieldset $fieldset-border-radius: 2*$_1px; // Border radius for fieldset
$fieldset-margin: 0.125rem; // Margin for fieldset $fieldset-margin: 0.125rem; // Margin for fieldset
$fieldset-padding: 0.5rem; // Padding for fieldset $fieldset-padding: 0.5rem; // Padding for fieldset
$legend-font-weight: $bold-font-weight; // Font weight for legend $legend-font-weight: $bold-font-weight; // Font weight for legend
$legend-font-size: 0.875rem; // Font size for legend $legend-font-size: 0.875rem; // Font size for legend
$legend-fore-color: $form-fore-color; // Text color for legend $legend-fore-color: $form-fore-color; // Text color for legend
$legend-padding: 0.125rem 0.25rem; // Padding for legend $legend-padding: 0.125rem 0.25rem; // Padding for legend
$label-padding: 0.25rem 0.5rem; // Padding for label $label-padding: 0.25rem 0.5rem; // Padding for label
$input-group-name: 'input-group'; // Class for input groups $input-group-name: 'input-group'; // Class for input groups
$include-fluid-input-group: false; // Should fluid input grooups be included? (`true`/`false`) [1] $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] $include-vertical-input-group: false; // Should vertical input grooups be included? (`true`/`false`) [1]
$input-back-color: #fafafa; // Background for input $input-back-color: #fafafa; // Background for input
$input-fore-color: $fore-color; // Text color for input $input-fore-color: $fore-color; // Text color for input
$input-border-style: $_1px solid #c9c9c9; // Border style for input $input-border-style: $_1px solid #c9c9c9; // Border style for input
$input-border-radius: 2*$_1px; // Border radius for input $input-border-radius: 2*$_1px; // Border radius for input
$input-margin: 0.25rem; // Margin for input $input-margin: 0.25rem; // Margin for input
$input-padding: 0.5rem 0.75rem; // Padding for input $input-padding: 0.5rem 0.75rem; // Padding for input
$input-focus-border-color: #0288d1; // Border color for focused input $input-focus-border-color: #0288d1; // Border color for focused input
$input-invalid-border-color: #d32f2f; // Border color for invalid input $input-invalid-border-color: #d32f2f; // Border color for invalid input
$input-disabled-opacity: 0.75; // Opacity for disabled input $input-disabled-opacity: 0.75; // Opacity for disabled input
$input-readonly-back-color: #e5e5e5; // Background color for readonly input $input-readonly-back-color: #e5e5e5; // Background color for readonly input
$input-readonly-border-color: #c9c9c9; // Border color for readonly input $input-readonly-border-color: #c9c9c9; // Border color for readonly input
$input-placeholder-fore-color:#616161; // Text color for input placeholder $input-placeholder-fore-color:#616161; // Text color for input placeholder
$select-padding-right: 1.5rem; // Right padding for select element $select-padding-right: 1.5rem; // Right padding for select element
$button-back-color: #dcdcdc; // Back color for button elements $button-back-color: #dcdcdc; // Back color for button elements
$button-back-opacity: 0.75; // Background opacity 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-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
$button-fore-color: $fore-color; // Text color for button elements $button-fore-color: $fore-color; // Text color for button elements
$button-border-style: 0; // Border style for button elements $button-border-style: 0; // Border style for button elements
$button-border-radius: 2*$_1px; // Border radius for button elements $button-border-radius: 2*$_1px; // Border radius for button elements
$button-padding: 0.5rem 0.75rem; // Padding for button elements $button-padding: 0.5rem 0.75rem; // Padding for button elements
$button-margin: 0.5rem; // Margin for button elements $button-margin: 0.5rem; // Margin for button elements
$button-box-shadow: none; // Box shadow for buttons $button-box-shadow: none; // Box shadow for buttons
$button-disabled-opacity: 0.75; // Disabled button elements opacity $button-disabled-opacity:0.75; // Disabled button elements opacity
$button-class-name: 'button'; // Class for custom button elements $button-class-name: 'button'; // Class for custom button elements
$include-button-group: false; // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2] $include-button-group: false; // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3] $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-name: 'primary'; // Class name for button variant 1
$button-variant1-back-color: #0277bd; // Background color 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-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-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-variant1-fore-color: #fafafa; // Text color for button variant 1
$button-variant2-name: 'secondary';// Class name for button variant 2 $button-variant2-name: 'secondary';// Class name for button variant 2
$button-variant2-back-color: #c62828; // Background color 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-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-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-variant2-fore-color: #fafafa; // Text color for button variant 2
$button-variant3-name: 'tertiary'; // Class name for button variant 3 $button-variant3-name: 'tertiary';// Class name for button variant 3
$button-variant3-back-color: #5f9133; // Background color 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-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-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
$button-variant3-fore-color: #fafafa; // Text color for button variant 3 $button-variant3-fore-color: #fafafa; // Text color for button variant 3
$button-style1-name: 'small'; // Class name for button style 1 $button-style1-name: 'small'; // Class name for button style 1
$button-style1-border-style: 0; // Border style for button style 1 $button-style1-border-style: 0; // Border style for button style 1
$button-style1-border-radius: $_1px; // Border radius for button style 1 $button-style1-border-radius: $_1px; // Border radius for button style 1
$button-style1-padding: 0.25rem 0.375rem; // Padding 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-style1-margin: 0.5rem; // Margin for button style 1
$button-style2-name: 'large'; // Class name for button style 2 $button-style2-name: 'large'; // Class name for button style 2
$button-style2-border-style: 0; // Border style 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-border-radius: 4*$_1px; // Border radius for button style 2
$button-style2-padding: 0.75rem 1.125rem; // Padding 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 $button-style2-margin: 0.5rem; // Margin for button style 2
$checkbox-size: 1rem; // Size for checkbox/radio [4] $checkbox-size: 1rem; // Size for checkbox/radio [4]
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio $checkbox-back-color: $input-back-color;// Background clor for checkbox/radio
$checkbox-fore-color: $input-fore-color; // Text/mark color 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-thickness: $_1px; // Border thickness for checkbox/radio
$checkbox-border-color: #bdbdbd; // Border color for checkbox/radio $checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
$checkbox-border-radius: $input-border-radius; // Border radius 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-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-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
$checkbox-box-shadow: none; // Box shadow for checkbox/radio $checkbox-box-shadow: none; // Box shadow for checkbox/radio
$include-switch: false; // Should switch components be included? (`true`/`false`) [5] $include-switch: false; // Should switch components be included? (`true`/`false`) [5]
// Notes: // Notes:
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values // [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. // [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 // [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 // 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. // 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. // 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. // [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. // [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. // If you wish to enable them, please refer to a full flavor for the required variables.
$header-height: 2.75rem; // Height for <header> $header-height: 2.75rem; // Height for <header>
$header-back-color: #12171a; // Background color for <header> $header-back-color: #12171a; // Background color for <header>
$header-fore-color: #f5f5f5; // Text color for <header> $header-fore-color: #f5f5f5; // Text color for <header>
$header-border-style: 0; // Border style for <header> $header-border-style: 0; // Border style for <header>
$header-margin: 0; // Margin for <header> $header-margin: 0; // Margin for <header>
$header-padding: 0.125rem 0.5rem; // Padding for <header> $header-padding: 0.125rem 0.5rem; // Padding for <header>
$header-box-shadow: none; // Box shadow for <header> $header-box-shadow: none; // Box shadow for <header>
$header-logo-name: 'logo'; // Class name for <header>'s logo $header-logo-name: 'logo'; // Class name for <header>'s logo
$header-logo-font-size: 1.75rem; // Font size 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-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-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
$header-logo-padding: 0; // Padding 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-hover-color: #20292e; // Hover color for <header>'s links
$header-link-margin: 0.125rem 0; // Margin 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] $include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
$header-sticky-name: 'sticky'; // Class name for sticky <header> $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-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] $include-drawer: false; // [Hidden flag override] Should the drawer component be included? (`true`/`false`) [2]
$footer-back-color: #192024; // Background color for <footer> $footer-back-color: #192024; // Background color for <footer>
$footer-fore-color: #f5f5f5; // Text color for <footer> $footer-fore-color: #f5f5f5; // Text color for <footer>
$footer-border-style: 0; // Border stye for <footer> $footer-border-style: 0; // Border stye for <footer>
$footer-font-size: 0.875rem; // Font size for <footer> $footer-font-size: 0.875rem; // Font size for <footer>
$footer-margin: 1rem 0 0; // Margin for <footer> $footer-margin: 1rem 0 0; // Margin for <footer>
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer> $footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
$footer-link-fore-color: #0288d1; // Text color for links in <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] $include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements $footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
// Notes: // Notes:
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning // [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 // [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 // 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. // 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 // [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. // of <footer> elements, using the value of $footer-sticky-name for the name of the class.
// Variables for responsive tables // Variables for responsive tables
$table-border-style: $_1px solid #c9c9c9; // Border style for <table> and children $table-border-style: $_1px solid #c9c9c9; // Border style for <table> and children
$table-border-radius: 0; // Border radius for <table> and children $table-border-radius: 0; // Border radius for <table> and children
$table-margin: 0 auto; // Margin for <table> $table-margin: 0 auto; // Margin for <table>
$table-box-shadow: none; // Box shadow for <table> $table-box-shadow: none; // Box shadow for <table>
$table-caption-font-size: 1.5rem; // Font size for <caption> $table-caption-font-size: 1.5rem; // Font size for <caption>
$table-caption-margin: 0.5rem; // Margin for <caption> $table-caption-margin: 0.5rem; // Margin for <caption>
$table-row-padding: 0.5rem; // Padding for <tr> - both views $table-row-padding: 0.5rem; // Padding for <tr> - both views
$table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view $table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view
$table-head-back-color: #e6e6e6; // Background color for <th> $table-head-back-color: #e6e6e6; // Background color for <th>
$table-head-fore-color: $fore-color; // Tex color for <th> $table-head-fore-color: $fore-color; // Text color for <th>
$table-body-back-color: #fafafa; // Background color for <td> $table-body-back-color: #fafafa; // Background color for <td>
$table-body-fore-color: $fore-color; // Text color for <td> $table-body-fore-color: $fore-color; // Text color for <td>
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view $table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
$table-mobile-card-spacing: 0.625rem; // Space between <tr> cards - 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-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 $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-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-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] $include-striped-table: false; // [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
// Notes: // Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table // [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`, // [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 // 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. // the variables associated with these components, if you want to enable them.
$card-name: 'card'; // Class name for cards $card-name: 'card'; // Class name for cards
$card-back-color: #fafafa; // Background color for cards $card-back-color: #fafafa; // Background color for cards
$card-fore-color: $fore-color; // Text color for cards $card-fore-color: $fore-color; // Text color for cards
$card-border-style: $_1px solid #acacac; // Border style for cards $card-border-style: $_1px solid #acacac; // Border style for cards
$card-border-radius: 0; // Border radius for cards $card-border-radius: 0; // Border radius for cards
$card-margin: 0.5rem; // Margin for cards $card-margin: 0.5rem; // Margin for cards
$card-box-shadow: none; // Box shadow for cards $card-box-shadow: none; // Box shadow for cards
$card-section-name: 'section'; // Class name for card sections $card-section-name: 'section'; // Class name for card sections
$card-section-border-style: $_1px solid #c9c9c9; // Border style 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-padding: 0.5rem; // Padding for card sections
$card-section-media-name: 'media'; // Class name for card media sections $card-section-media-name: 'media'; // Class name for card media sections
$card-section-media-height: 200px; // Height for card media setions $card-section-media-height: 200px; // Height for card media setions
$card-normal-width: 320px; // Width for normal cards $card-normal-width: 320px; // Width for normal cards
$card-size1-name: 'fluid'; // Class name for fluid cards $card-size1-name: 'fluid'; // Class name for fluid cards
$card-size1-width: 100%; // Width 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-name: 'dark'; // Class name for card section style 1
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1 $card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1 $card-section-style1-fore-color: $fore-color; // Text color for card section style 1
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1 $card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
$card-section-padding1-padding: 0.75rem; // Padding for card section padding style 1 $card-section-padding1-padding: 0.75rem; // Padding for card section padding style 1
// Notes: // Notes:
// [1] - The cards module depends heavily on the grid system module. // [1] - The cards module depends heavily on the grid system module.
// --- --- --- // --- --- ---
// No variables specified for the tab module. This module is disabled by default. // 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. // To re-enable it, please refer to a full flavor for variables and documentation.
// --- --- --- // --- --- ---
// Variables for contextual background elements and alerts // Variables for contextual background elements and alerts
$mark-back-color: #0277bd; // Background color for <mark> $mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: #fafafa; // Text color for <mark> $mark-fore-color: #fafafa; // Text color for <mark>
$mark-font-size: 0.9375em; // Font size for <mark> $mark-font-size: 0.9375em; // Font size for <mark>
$mark-line-height: 1em; // Line height for <mark> $mark-line-height: 1em; // Line height for <mark>
$mark-border-style: 0; // Border style for <mark> $mark-border-style: 0; // Border style for <mark>
$mark-border-radius: 2*$_1px; // Border radius for <mark> $mark-border-radius: 2*$_1px; // Border radius for <mark>
$mark-padding: 0.125em 0.25em; // Padding for <mark> $mark-padding: 0.125em 0.25em; // Padding for <mark>
$mark-margin: 0; // Margin for <mark> $mark-margin: 0; // Margin for <mark>
$mark-box-shadow: none; // Box shadow for <mark> $mark-box-shadow: none; // Box shadow for <mark>
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling $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-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #e53935; // Background color 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-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #689f38; // Background color 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-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-style: 0; // Border style 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-border-radius: 200px; // Border radius for <mark> style 1
$mark-style1-padding: 0.25em 0.5em; // Padding 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-name: 'inline-block'; // Class name for <mark> style 2
$mark-style2-border-style: 0; // Border style 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-border-radius: 2*$_1px; // Border radius for <mark> style 2
$mark-style2-padding: 0.375em; // Padding 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-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height 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-toast: false; // [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
$include-tooltip: false; // Should tooltips 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] $include-modal: false; // Should modals be included? (`true`/`false`) [1]
// Notes: // Notes:
// [1] - Due to the values of $include-toast, $include-tooltip and $include-modal being set // [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 // 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. // refer to a full flavor file for variable definitions.
// Variables for progress elements and spinners // Variables for progress elements and spinners
$progress-back-color: #e0e0e0; // Background color for <progress> $progress-back-color: #e0e0e0; // Background color for <progress>
$progress-fore-color: #0277bd; // Progress bar color for <progress> $progress-fore-color: #0277bd; // Progress bar color for <progress>
$progress-height: 0.625rem; // Height of <progress> $progress-height: 0.625rem; // Height of <progress>
$progress-max-value: 1000; // Arithmetic max value of <progress> $progress-max-value: 1000; // Arithmetic max value of <progress>
$progress-border-style: 0; // Border style for <progress> $progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container $progress-border-radius: 2*$_1px; // Border radius for the <progress> container
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress> $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-left-right-margin: 0.5rem; // Left and right margin for <progress>
$progress-box-shadow: none; // Box shadow for <progress> $progress-box-shadow: none; // Box shadow for <progress>
$progress-inline-name: 'inline'; // Class name for inline <progress> $progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 60%; // Width for inline <progress> $progress-inline-width: 60%; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1 $progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
$progress-variant1-fore-color:#e53935; // Progress bar color for <progress> variant 1 $progress-variant1-fore-color: #e53935; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2 $progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
$progress-variant2-fore-color:#689f38; // Progress bar color for <progress> variant 2 $progress-variant2-fore-color: #689f38; // Progress bar color for <progress> variant 2
$include-spinner-donut: false; // [Hidden flag override] Should spinner donuts be enabled? (`true`/`false`) [1] $include-spinner-donut: false; // [Hidden flag override] Should spinner donuts be enabled? (`true`/`false`) [1]
// Notes : // Notes :
// [1] - Due to the value of $include-spinner-donut being set to `false`, the spinner // [1] - Due to the value of $include-spinner-donut being set to `false`, the spinner
// donut styling will not be included. To enable it, pelase refer to a full flavor. // donut styling will not be included. To enable it, pelase refer to a full flavor.
// Variables for utilities and helper classes // Variables for utilities and helper classes
$hidden-name: 'hidden'; // Class name for hidden elements $hidden-name: 'hidden'; // Class name for hidden elements
$visually-hidden-name: 'visually-hidden'; // Class name for visually 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-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] $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-generic-name: 'bordered'; // Class name for generic border style
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1 $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-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-name: 'circular'; // Class name for radial border style 2
$border-radial-style2-radius: 50%; // Border radius 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-name: 'responsive-margin'; // Class name for responsive margin
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens $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-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-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-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-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-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-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-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements $responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
// Notes: // Notes:
// [1] - Due to the values of $include-breadcrumbs and $include-close-icon being set // [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 // to `false`, these elements will not be included. Refer to a full flavor file for
// help on how to enable them. // help on how to enable them.
@import '../mini/core'; @import '../mini/core';
@import '../mini/grid'; @import '../mini/grid';
@import '../mini/input_control'; @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, @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, @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, @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, @include make-button-alt-style ($button-style1-name, $button-style1-border-style,
$button-style1-border-radius, $button-style1-padding, $button-style1-margin); $button-style1-border-radius, $button-style1-padding, $button-style1-margin);
@include make-button-alt-style ($button-style2-name, $button-style2-border-style, @include make-button-alt-style ($button-style2-name, $button-style2-border-style,
$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/navigation';
@import '../mini/table'; @import '../mini/table';
@import '../mini/card'; @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-alt-size ($card-size1-name, $card-size1-width);
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color, @include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
$card-section-style1-fore-color); $card-section-style1-fore-color);
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding); @include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
// --- --- --- // --- --- ---
// Tab module is disabled for this flavor. // Tab module is disabled for this flavor.
// @import '../mini/tab'; // @import '../mini/tab';
// --- --- --- // --- --- ---
@import '../mini/contextual'; @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-variant1-name, $mark-variant1-back-color);
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-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, @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, @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'; @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-inline ($progress-inline-name, $progress-inline-width);
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color); @include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color); @include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
@import '../mini/utility'; @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-generic ($border-generic-name);
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius); @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-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value, @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, @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-hidden-responsive ($responsive-hidden-prefix);
@include make-visually-hidden-responsive ($responsive-visually-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. // Dependency: This module depends heavily on the grid system module.
$card-name: 'card' !default; // Class name for the cards $card-name: 'card' !default; // Class name for the cards
$card-section-name: 'section' !default; // Class name for the cards' sections $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-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent)
$card-normal-width: 320px !default; // Width for normal cards $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. // 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. $back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground 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. // Check the `_card_mixins.scss` file to find this module's mixins.
@import 'card_mixins'; @import 'card_mixins';
// Card styling // Card styling
.#{$card-name} { .#{$card-name} {
// Old syntax // Old syntax
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-pack: justify; -webkit-box-pack: justify;
-webkit-box-align: center; -webkit-box-align: center;
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
-webkit-align-self: center; -webkit-align-self: center;
align-self: center; align-self: center;
position: relative; position: relative;
width: 100%; width: 100%;
// Actual styling for the cards // Actual styling for the cards
@if $card-back-color != $back-color { @if $card-back-color != $back-color {
background: $card-back-color; background: $card-back-color;
} }
@if $card-fore-color != $fore-color { @if $card-fore-color != $fore-color {
color: $card-fore-color; color: $card-fore-color;
} }
@if $card-border-style != 0 { @if $card-border-style != 0 {
border: $card-border-style; border: $card-border-style;
} }
@if $card-border-radius != 0 { @if $card-border-radius != 0 {
border-radius: $card-border-radius; border-radius: $card-border-radius;
} }
@if $card-margin != 0 { @if $card-margin != 0 {
margin: $card-margin; margin: $card-margin;
} }
@if $card-box-shadow != none { @if $card-box-shadow != none {
box-shadow: $card-box-shadow; box-shadow: $card-box-shadow;
} }
// Hide overflow from section borders // Hide overflow from section borders
overflow: hidden; overflow: hidden;
// Card sections // Card sections
& > .#{$card-section-name} { & > .#{$card-section-name} {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
border: 0; // Clean borders and radiuses for any element-based sections border: 0; // Clean borders and radiuses for any element-based sections
border-radius: 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; border-bottom: $card-section-border-style;
padding: $card-section-padding; padding: $card-section-padding;
width: 100%; width: 100%;
// Card media sections // Card media sections
&.#{$card-section-media-name} { &.#{$card-section-media-name} {
height: $card-section-media-height; height: $card-section-media-height;
padding: 0; padding: 0;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
} }
} }
// Card sections - last // Card sections - last
& > .#{$card-section-name}:last-child { & > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section border-bottom: 0; // Clean the extra border for last section
} }
} }
// Responsiveness (if the screen is larger than card, set max-width) // Responsiveness (if the screen is larger than card, set max-width)
@media screen and (min-width: #{$card-normal-width}) { @media screen and (min-width: #{$card-normal-width}) {
.#{$card-name} { .#{$card-name} {
max-width: $card-normal-width; 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-name : The name of the class used for the alternate size card.
// - $card-alt-size-width : The width of 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) { @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) == '%' { @if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} { .#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width; max-width: $card-alt-size-width;
width: auto; width: auto;
} }
} }
@else { @else {
@media screen and (min-width: #{$card-alt-size-width}) { @media screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} { .#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width; max-width: $card-alt-size-width;
} }
} }
} }
} }
// Mixin for alternate cards (card color variants). // Mixin for alternate cards (card color variants).
// Variables: // Variables:
@ -25,36 +25,36 @@
// - $card-alt-back-color : The background color of the alternate card. // - $card-alt-back-color : The background color of the alternate card.
// - $card-alt-fore-color : The text 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 // - $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 // - $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 // - $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, @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-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
$card-alt-section-border-style : $card-section-border-style) { $card-alt-section-border-style : $card-section-border-style) {
.#{$card-name}.#{$card-alt-name} { .#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color { @if $card-alt-back-color != $card-back-color {
background: $card-alt-back-color; background: $card-alt-back-color;
} }
@if $card-alt-fore-color != $card-fore-color { @if $card-alt-fore-color != $card-fore-color {
color: $card-alt-fore-color; color: $card-alt-fore-color;
} }
@if $card-alt-border-style != $card-border-style { @if $card-alt-border-style != $card-border-style {
border: $card-alt-border-style; border: $card-alt-border-style;
} }
@if $card-alt-border-radius != $card-border-radius { @if $card-alt-border-radius != $card-border-radius {
border-radius: $card-alt-border-radius; border-radius: $card-alt-border-radius;
} }
@if $card-alt-section-border-style != $card-section-border-style{ @if $card-alt-section-border-style != $card-section-border-style{
& > .#{$card-section-name} { & > .#{$card-section-name} {
border-bottom: $card-alt-section-border-style; border-bottom: $card-alt-section-border-style;
} }
& > .#{$card-section-name}:last-child { & > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section border-bottom: 0; // Clean the extra border for last section
} }
} }
} }
} }
// Mixin for alternate card sections (card section color variants). // Mixin for alternate card sections (card section color variants).
// Variables: // Variables:
@ -62,27 +62,27 @@
// - $card-section-alt-back-color : The background color of the alternate card section. // - $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-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 // - $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, @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-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} { .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color { @if $card-section-alt-back-color != $card-back-color {
background: $card-section-alt-back-color; background: $card-section-alt-back-color;
} }
@if $card-section-alt-fore-color != $card-fore-color { @if $card-section-alt-fore-color != $card-fore-color {
color: $card-section-alt-fore-color; color: $card-section-alt-fore-color;
} }
@if $card-section-alt-border-style != $card-section-border-style { @if $card-section-alt-border-style != $card-section-border-style {
border: $card-section-alt-border-style; border: $card-section-alt-border-style;
} }
} }
} }
// Mixin for alternate card sections (card section padding variants). // Mixin for alternate card sections (card section padding variants).
// Variables: // Variables:
// - $card-section-alt-name : The name of the class used for the alternate card section. // - $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. // - $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) { @mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} { .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding; 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. // Contextual background elements use the mark element as their base.
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling. $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`) $include-toast: true !default; // [Hidden flag] Should toasts be included? (`true`/`false`)
$toast-name: 'toast' !default; // Class name for the toasts. $toast-name: 'toast' !default; // Class name for the toasts.
$include-tooltip: true !default; // Should tooltips be included? (`true`/`false`) $include-tooltip: true !default; // Should tooltips be included? (`true`/`false`)
$tooltip-name: 'tooltip' !default; // Class name for the tooltips. $tooltip-name: 'tooltip' !default; // Class name for the tooltips.
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name. $tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name.
$include-modal: true !default; // Should modals be included? (`true`/`false`) $include-modal: true !default; // Should modals be included? (`true`/`false`)
$modal-name: 'modal' !default; // Class name for the modals. $modal-name: 'modal' !default; // Class name for the modals.
$modal-close-name: 'close' !default; // Class name of the close element for the modal component. $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. // 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. $back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground 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. $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`). $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. // Check the `_contextual_mixins.scss` file to find this module's mixins.
@import 'contextual_mixins'; @import 'contextual_mixins';
// Default styling for mark. Use mixins for alternate styles. // Default styling for mark. Use mixins for alternate styles.
mark { mark {
@if $mark-back-color != $back-color { @if $mark-back-color != $back-color {
background: $mark-back-color; background: $mark-back-color;
} }
@if $mark-fore-color != $fore-color { @if $mark-fore-color != $fore-color {
color: $mark-fore-color; color: $mark-fore-color;
} }
@if $mark-font-size != 100% { @if $mark-font-size != 100% {
font-size: $mark-font-size; font-size: $mark-font-size;
} }
@if $mark-line-height != $base-line-height { @if $mark-line-height != $base-line-height {
line-height: $mark-line-height; line-height: $mark-line-height;
} }
@if $mark-border-style != 0 { @if $mark-border-style != 0 {
border: $mark-border-style; border: $mark-border-style;
} }
@if $mark-border-radius != 0 { @if $mark-border-radius != 0 {
border-radius: $mark-border-radius; border-radius: $mark-border-radius;
} }
@if $mark-padding != 0 { @if $mark-padding != 0 {
padding: $mark-padding; padding: $mark-padding;
} }
@if $mark-margin != 0 { @if $mark-margin != 0 {
margin: $mark-margin; margin: $mark-margin;
} }
@if $mark-box-shadow != none { @if $mark-box-shadow != none {
box-shadow: $mark-box-shadow; box-shadow: $mark-box-shadow;
} }
&.#{$mark-inline-block-name}{ &.#{$mark-inline-block-name}{
display: inline-block; // Can be used to deal with some problems. display: inline-block; // Can be used to deal with some problems.
} }
} }
// Default styling for toasts. Use mixins for alternate styles // Default styling for toasts. Use mixins for alternate styles
@if $include-toast { @if $include-toast {
.#{$toast-name} { .#{$toast-name} {
position: fixed; position: fixed;
background: $toast-back-color; background: $toast-back-color;
bottom: $toast-bottom; bottom: $toast-bottom;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@if $toast-fore-color != $fore-color { @if $toast-fore-color != $fore-color {
color: $toast-fore-color; color: $toast-fore-color;
} }
@if $toast-border-style != 0 { @if $toast-border-style != 0 {
border: $toast-border-style; border: $toast-border-style;
} }
@if $toast-border-radius != 0 { @if $toast-border-radius != 0 {
border-radius: $toast-border-radius; border-radius: $toast-border-radius;
} }
@if $toast-padding != 0 { @if $toast-padding != 0 {
padding: $toast-padding; padding: $toast-padding;
} }
@if $toast-box-shadow != none { @if $toast-box-shadow != none {
box-shadow: $toast-box-shadow; box-shadow: $toast-box-shadow;
} }
z-index: 1111; z-index: 1111;
} }
} }
// Default styling for tooltips. Use mixins for alternate styles // Default styling for tooltips. Use mixins for alternate styles
@if $include-tooltip { @if $include-tooltip {
.#{$tooltip-name} { .#{$tooltip-name} {
position: relative; position: relative;
display: inline-block; display: inline-block;
&:before, &:after { &:before, &:after {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%); clip-path: inset(100%);
transition: all 0.3s; transition: all 0.3s;
// Remember to keep this index a lower value than the one used for stickies. // 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. z-index: 1010; // Deals with certain problems when combined with cards and tables.
left: 50%; left: 50%;
} }
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling &:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
bottom: 75%; bottom: 75%;
} }
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling &.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%; top: 75%;
} }
@if $style-link-active-state { @if $style-link-active-state {
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
&:before, &:after { &:before, &:after {
opacity: 1; opacity: 1;
clip: auto; clip: auto;
-webkit-clip-path: inset(0%); -webkit-clip-path: inset(0%);
clip-path: inset(0%); clip-path: inset(0%);
} }
} }
} }
@else { @else {
&:hover, &:focus { &:hover, &:focus {
&:before, &:after { &:before, &:after {
opacity: 1; opacity: 1;
clip: auto; clip: auto;
-webkit-clip-path: inset(0%); -webkit-clip-path: inset(0%);
clip-path: inset(0%); clip-path: inset(0%);
} }
} }
} }
&:before { // This is the little tooltip triangle &:before { // This is the little tooltip triangle
content: ''; content: '';
background: transparent; background: transparent;
border: $tooltip-tail-size solid transparent; border: $tooltip-tail-size solid transparent;
// Older browsers will almost center the tooltip's tail // Older browsers will almost center the tooltip's tail
left: 50%; left: 50%;
// Newer browsers will center the tail properly // Newer browsers will center the tail properly
left: calc(50% - #{$tooltip-tail-size}); left: calc(50% - #{$tooltip-tail-size});
} }
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color; border-top-color: $tooltip-back-color;
} }
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-back-color; border-bottom-color: $tooltip-back-color;
} }
&:after { // This is the actual tooltip's text block &:after { // This is the actual tooltip's text block
content: attr(aria-label); content: attr(aria-label);
background: $tooltip-back-color; background: $tooltip-back-color;
@if $tooltip-border-radius != 0 { @if $tooltip-border-radius != 0 {
border-radius: $tooltip-border-radius; border-radius: $tooltip-border-radius;
} }
@if $tooltip-fore-color != $fore-color { @if $tooltip-fore-color != $fore-color {
color: $tooltip-fore-color; color: $tooltip-fore-color;
} }
@if $tooltip-padding != 0 { @if $tooltip-padding != 0 {
padding: $tooltip-padding; padding: $tooltip-padding;
} }
@if $tooltip-box-shadow != none { @if $tooltip-box-shadow != none {
box-shadow: $tooltip-box-shadow; box-shadow: $tooltip-box-shadow;
} }
white-space: nowrap; white-space: nowrap;
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
transform: translateX(-50%); transform: translateX(-50%);
} }
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-tail-size; margin-bottom: 2 * $tooltip-tail-size;
} }
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: 2 * $tooltip-tail-size; margin-top: 2 * $tooltip-tail-size;
} }
} }
} }
@if $include-modal { @if $include-modal {
.#{$modal-name} { .#{$modal-name} {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
display: none; display: none;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: rgba($modal-back-color, $modal-back-opacity); background: rgba($modal-back-color, $modal-back-opacity);
& .card { & .card {
margin: 0 auto; margin: 0 auto;
max-height: 50vh; max-height: 50vh;
overflow: auto; overflow: auto;
& .#{$modal-close-name} { & .#{$modal-close-name} {
position: absolute; position: absolute;
top: $modal-close-top; top: $modal-close-top;
right: $modal-close-right; right: $modal-close-right;
padding: 0; // Fixes the extra padding added from <label> styling. padding: 0; // Fixes the extra padding added from <label> styling.
} }
} }
} }
:checked + .#{$modal-name} { :checked + .#{$modal-name} {
// Old syntax // Old syntax
display: -webkit-box; display: -webkit-box;
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
z-index: 1200; z-index: 1200;
& .card { & .card {
& .#{$modal-close-name} { & .#{$modal-close-name} {
z-index: 1211; z-index: 1211;
} }
} }
} }
} }
// [WARNING: As of v2.2.0, the alert component is deprecated and no longer maintained.] // [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) // Animation definition for animated alerts (included if wanted)
@if $include-alerts { // Turn on if you want to enable the alert component. @if $include-alerts { // Turn on if you want to enable the alert component.
$alert-name: 'alert' !default; // Class name for the alerts. $alert-name: 'alert' !default; // Class name for the alerts.
$alert-include-animated: false !default; // Should animated alerts be included? (`true`/`false`) $alert-include-animated: false !default; // Should animated alerts be included? (`true`/`false`)
$alert-animated-name: 'animated' !default; // Class name for animated alerts. $alert-animated-name: 'animated' !default; // Class name for animated alerts.
$alert-back-color: #d1e6f3 !default; // Background color for alerts $alert-back-color: #d1e6f3 !default; // Background color for alerts
$alert-fore-color: $fore-color !default; // Text 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-style: 1px solid #d0d0d0 !default; // Border style for alerts
$alert-border-radius: 0 !default; // Border radius for alerts $alert-border-radius: 0 !default; // Border radius for alerts
$alert-padding: 0.75rem !default; // Padding for alerts $alert-padding: 0.75rem !default; // Padding for alerts
$alert-margin: 0.5rem !default; // Margin for alerts $alert-margin: 0.5rem !default; // Margin for alerts
$alert-box-shadow: none !default; // Box shadow for alerts $alert-box-shadow: none !default; // Box shadow for alerts
@if $alert-include-animated { @if $alert-include-animated {
@-webkit-keyframes alert-anim { @-webkit-keyframes alert-anim {
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; } 45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
50% { -webkit-transform: scale(1.005); -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%; } 55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
} }
@keyframes alert-anim { @keyframes alert-anim {
45% { transform: scale(1); transform-origin: 50% 50%; } 45% { transform: scale(1); transform-origin: 50% 50%; }
50% { transform: scale(1.005); transform-origin: 50% 50%; } 50% { transform: scale(1.005); transform-origin: 50% 50%; }
55% { transform: scale(1); transform-origin: 50% 50%; } 55% { transform: scale(1); transform-origin: 50% 50%; }
} }
} }
// Default styling for alerts. Use mixins for alternate styles // Default styling for alerts. Use mixins for alternate styles
.#{$alert-name} { .#{$alert-name} {
display: block; display: block;
@if $alert-back-color != $back-color { @if $alert-back-color != $back-color {
background: $alert-back-color; background: $alert-back-color;
} }
@if $alert-fore-color != $fore-color { @if $alert-fore-color != $fore-color {
color: $alert-fore-color; color: $alert-fore-color;
} }
@if $alert-border-style != 0 { @if $alert-border-style != 0 {
border: $alert-border-style; border: $alert-border-style;
} }
@if $alert-border-radius != 0 { @if $alert-border-radius != 0 {
border-radius: $alert-border-radius; border-radius: $alert-border-radius;
} }
@if $alert-margin != 0 { @if $alert-margin != 0 {
margin: $alert-margin; margin: $alert-margin;
} }
@if $alert-padding != 0 { @if $alert-padding != 0 {
padding: $alert-padding; padding: $alert-padding;
} }
@if $alert-box-shadow != none { @if $alert-box-shadow != none {
box-shadow: $alert-box-shadow; box-shadow: $alert-box-shadow;
} }
@if $alert-include-animated { @if $alert-include-animated {
&.#{$alert-animated-name} { &.#{$alert-animated-name} {
// Try to make the animated alert not blurry // Try to make the animated alert not blurry
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
// Apply the animation // Apply the animation
-webkit-animation: alert-anim 6s linear infinite; -webkit-animation: alert-anim 6s linear infinite;
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-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. // - $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) { @mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
mark.#{$mark-alt-name} { mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color { @if $mark-alt-back-color != $mark-back-color {
background: $mark-alt-back-color; background: $mark-alt-back-color;
} }
@if $mark-alt-fore-color != $mark-fore-color { @if $mark-alt-fore-color != $mark-fore-color {
color: $mark-alt-fore-color; color: $mark-alt-fore-color;
} }
} }
} }
// Mixin for alternative mark styles (contextual tags). // Mixin for alternative mark styles (contextual tags).
// Variables: // 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-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. // - $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, @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-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-alt-box-shadow : $mark-box-shadow ) {
mark.#{$mark-alt-name} { mark.#{$mark-alt-name} {
@if $mark-alt-font-size != $mark-font-size { @if $mark-alt-font-size != $mark-font-size {
font-size: $mark-alt-font-size; font-size: $mark-alt-font-size;
} }
@if $mark-alt-line-height != $mark-line-height { @if $mark-alt-line-height != $mark-line-height {
line-height: $mark-alt-line-height; line-height: $mark-alt-line-height;
} }
@if $mark-alt-border-style != $mark-border-style { @if $mark-alt-border-style != $mark-border-style {
border: $mark-alt-border-style; border: $mark-alt-border-style;
} }
@if $mark-alt-border-radius != $mark-border-radius { @if $mark-alt-border-radius != $mark-border-radius {
border-radius: $mark-alt-border-radius; border-radius: $mark-alt-border-radius;
} }
@if $mark-alt-padding != $mark-padding { @if $mark-alt-padding != $mark-padding {
padding: $mark-alt-padding; padding: $mark-alt-padding;
} }
@if $mark-alt-box-shadow != $mark-box-shadow { @if $mark-alt-box-shadow != $mark-box-shadow {
box-shadow: $mark-alt-box-shadow; box-shadow: $mark-alt-box-shadow;
} }
} }
} }
// Mixin for alternate toast (toast color variants). // Mixin for alternate toast (toast color variants).
// Variables: // Variables:
@ -54,17 +54,17 @@
// - $toast-alt-back-color : The background color of the alternate toast. // - $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. // - $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) { @mixin make-toast-alt-color ($toast-alt-name, $toast-alt-back-color, $toast-alt-fore-color: $toast-fore-color) {
@if not ($include-toast) { @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!"; @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} { .#{$toast-name}.#{$toast-alt-name} {
@if $toast-alt-back-color != $toast-back-color { @if $toast-alt-back-color != $toast-back-color {
background: $toast-alt-back-color; background: $toast-alt-back-color;
} }
@if $toast-alt-fore-color != $toast-fore-color { @if $toast-alt-fore-color != $toast-fore-color {
color: $toast-alt-fore-color; color: $toast-alt-fore-color;
} }
} }
} }
// Mixin for alternate toast styles (toast style variants). // Mixin for alternate toast styles (toast style variants).
// Variables: // Variables:
@ -74,24 +74,24 @@
// - $toast-alt-padding : (Optional) Padding of the alternate toast style. Defaults to the toast's padding. // - $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. // - $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, @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) { $toast-alt-padding : $toast-padding, $toast-alt-box-shadow : $toast-box-shadow) {
@if not ($include-toast) { @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!"; @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} { .#{$toast-name}.#{$toast-alt-name} {
@if $toast-alt-border-style != $toast-border-style { @if $toast-alt-border-style != $toast-border-style {
border: $toast-alt-border-style; border: $toast-alt-border-style;
} }
@if $toast-alt-border-radius != $toast-border-radius { @if $toast-alt-border-radius != $toast-border-radius {
border-radius: $toast-alt-border-radius; border-radius: $toast-alt-border-radius;
} }
@if $toast-alt-padding != $toast-padding { @if $toast-alt-padding != $toast-padding {
padding: $toast-alt-padding; padding: $toast-alt-padding;
} }
@if $toast-alt-box-shadow != $toast-box-shadow { @if $toast-alt-box-shadow != $toast-box-shadow {
box-shadow: $toast-alt-box-shadowbox-shadow; box-shadow: $toast-alt-box-shadowbox-shadow;
} }
} }
} }
// Mixin for alternate tooltip (tooltip color variants). // Mixin for alternate tooltip (tooltip color variants).
// Variables: // Variables:
@ -99,27 +99,27 @@
// - $tooltip-alt-back-color : The background color of the alternate tooltip. // - $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. // - $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) { @mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
@if not ($include-tooltip) { @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!"; @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} { .#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-back-color != $tooltip-back-color { @if $tooltip-alt-back-color != $tooltip-back-color {
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-alt-back-color; border-top-color: $tooltip-alt-back-color;
} }
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-alt-back-color; border-bottom-color: $tooltip-alt-back-color;
} }
} }
&:after { &:after {
@if $tooltip-alt-back-color != $tooltip-back-color { @if $tooltip-alt-back-color != $tooltip-back-color {
background: $tooltip-alt-back-color; background: $tooltip-alt-back-color;
} }
@if $tooltip-alt-fore-color != $tooltip-fore-color { @if $tooltip-alt-fore-color != $tooltip-fore-color {
color: $tooltip-alt-fore-color; color: $tooltip-alt-fore-color;
} }
} }
} }
} }
// Mixin for alternate tooltip styles (tooltip style variants). // Mixin for alternate tooltip styles (tooltip style variants).
// Variables: // Variables:
@ -129,36 +129,36 @@
// - $tooltip-alt-padding : (Optional) Padding of the alternate tooltip style. Defaults to the tooltip's padding. // - $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. // - $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, @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) { $tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
@if not ($include-tooltip) { @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!"; @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} { .#{$tooltip-name}.#{$tooltip-alt-name} {
@if $tooltip-alt-tail-size != $tooltip-tail-size { @if $tooltip-alt-tail-size != $tooltip-tail-size {
&:before { &:before {
border-width: $tooltip-alt-tail-size; border-width: $tooltip-alt-tail-size;
left: calc(50% - #{$tooltip-alt-tail-size}); left: calc(50% - #{$tooltip-alt-tail-size});
} }
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: 2 * $tooltip-alt-tail-size; margin-bottom: 2 * $tooltip-alt-tail-size;
} }
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: 2 * $tooltip-alt-tail-size; margin-top: 2 * $tooltip-alt-tail-size;
} }
} }
&:after { &:after {
@if $tooltip-alt-border-radius != $tooltip-border-radius { @if $tooltip-alt-border-radius != $tooltip-border-radius {
border-radius: $tooltip-alt-border-radius; border-radius: $tooltip-alt-border-radius;
} }
@if $tooltip-alt-padding != $tooltip-padding { @if $tooltip-alt-padding != $tooltip-padding {
padding: $tooltip-alt-padding; padding: $tooltip-alt-padding;
} }
@if $tooltip-alt-box-shadow != $tooltip-box-shadow { @if $tooltip-alt-box-shadow != $tooltip-box-shadow {
box-shadow: $tooltip-alt-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.] // [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). // Mixin for alternate alert (alert color variants).
@ -167,17 +167,17 @@
// - $alert-alt-back-color : The background color of the alternate alert. // - $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. // - $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) { @mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) {
@if not ($include-alerts) { @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!"; @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} { .#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-back-color != $alert-back-color { @if $alert-alt-back-color != $alert-back-color {
background: $alert-alt-back-color; background: $alert-alt-back-color;
} }
@if $alert-alt-fore-color != $alert-fore-color { @if $alert-alt-fore-color != $alert-fore-color {
color: $alert-alt-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.] // [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). // 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-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. // - $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, @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-padding : $alert-padding, $alert-alt-margin : $alert-margin,
$alert-alt-box-shadow : $alert-box-shadow) { $alert-alt-box-shadow : $alert-box-shadow) {
@if not ($include-alerts) { @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!"; @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} { .#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-border-style != $alert-border-style { @if $alert-alt-border-style != $alert-border-style {
border: $alert-alt-border-style; border: $alert-alt-border-style;
} }
@if $alert-alt-border-radius != $alert-border-radius { @if $alert-alt-border-radius != $alert-border-radius {
border-radius: $alert-alt-border-radius; border-radius: $alert-alt-border-radius;
} }
@if $alert-alt-padding != $alert-padding { @if $alert-alt-padding != $alert-padding {
padding: $alert-alt-padding; padding: $alert-alt-padding;
} }
@if $alert-alt-margin != $alert-margin { @if $alert-alt-margin != $alert-margin {
margin: $alert-alt-margin; margin: $alert-alt-margin;
} }
@if $alert-alt-box-shadow != $alert-box-shadow { @if $alert-alt-box-shadow != $alert-box-shadow {
box-shadow: $alert-alt-box-shadowbox-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`). $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! $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. $_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`) $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-start-breakpoint: 320px !default; // Breakpoint where fluid typography scaling starts.
$fluid-type-end-breakpoint: 1600px !default; // Breakpoint where fluid typography scaling ends. $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-small-type: 14px !default; // Smallest root font size for fluid typography.
$fluid-type-large-type: 18px !default; // Largest 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. $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`). $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`). $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`). $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-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`). $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`). $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 // Base typography rules
@if $use-fluid-typography { @if $use-fluid-typography {
// Calculation of local variables (unitless values needed for the calculation of 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-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); $_fluid-type-unitless-distance: ($fluid-type-end-breakpoint - $fluid-type-start-breakpoint)/($fluid-type-start-breakpoint * 0 + 1);
html { html {
font-size: #{$fluid-type-small-type}; font-size: #{$fluid-type-small-type};
} }
@media screen and (min-width: #{$fluid-type-start-breakpoint}) { @media screen and (min-width: #{$fluid-type-start-breakpoint}) {
html { html {
font-size: $base-root-font-size; // If the below calculation does not work, this is the fallback. 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})); 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}) { @media screen and (min-width: #{$fluid-type-end-breakpoint}) {
html { html {
font-size: #{$fluid-type-large-type}; font-size: #{$fluid-type-large-type};
} }
} }
} }
@else { @else {
html { html {
font-size: $base-root-font-size; // Set root's font sizing. font-size: $base-root-font-size; // Set root's font sizing.
} }
} }
@if $apply-defaults-to-all { @if $apply-defaults-to-all {
html, * { html, * {
font-family: #{$base-font-family}; font-family: #{$base-font-family};
line-height: $base-line-height; line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile. // Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
* { * {
font-size: $base-font-size; font-size: $base-font-size;
} }
} }
@else { @else {
html { html {
font-family: #{$base-font-family}; font-family: #{$base-font-family};
line-height: $base-line-height; line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile. // Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
} }
body { body {
margin: $body-margin; margin: $body-margin;
color: $fore-color; color: $fore-color;
background: $back-color; background: $back-color;
} }
// Correct display for older versions of IE. Fix display of some elements in other browsers as well. // 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 { article, aside, section, figcaption, figure, main, details, menu {
display: block; display: block;
} }
// Correct display in all browsers. // Correct display in all browsers.
summary { summary {
display: list-item; display: list-item;
} }
// Abbreviations // Abbreviations
abbr[title] { abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-. border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers. text-decoration: underline; // Opinionated style-fix for all browsers.
} }
// Correct display for older versions of IE. // Correct display for older versions of IE.
audio, video { audio, video {
display: inline-block; display: inline-block;
} }
// Hide overflow in IE. // Hide overflow in IE.
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
// Show overflow in IE. // Show overflow in IE.
input { input {
overflow: visible; overflow: visible;
} }
// Make images responsive by default. // Make images responsive by default.
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
// Fix display of <dfn> element in older versions of Android. // Fix display of <dfn> element in older versions of Android.
@if $include-dfn-fix { @if $include-dfn-fix {
dfn { dfn {
font-style: italic; font-style: italic;
} }
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height; line-height: $heading-line-height;
margin: $heading-margin; margin: $heading-margin;
font-weight: $heading-font-weight; font-weight: $heading-font-weight;
small { small {
color: $heading-smalltext-fore-color; color: $heading-smalltext-fore-color;
@if $make-heading-smalltext-block { @if $make-heading-smalltext-block {
display: block; display: block;
@if $heading-smalltext-b-top-margin != 0 { @if $heading-smalltext-b-top-margin != 0 {
margin-top: $heading-smalltext-b-top-margin; margin-top: $heading-smalltext-b-top-margin;
} }
@if $heading-smalltext-b-font-size != $small-font-size { @if $heading-smalltext-b-font-size != $small-font-size {
font-size: $heading-smalltext-b-font-size; font-size: $heading-smalltext-b-font-size;
} }
} }
} }
} }
h1 { h1 {
font-size: $h1-font-size; font-size: $h1-font-size;
} }
h2 { h2 {
font-size: $h2-font-size; font-size: $h2-font-size;
} }
h3 { h3 {
font-size: $h3-font-size; font-size: $h3-font-size;
} }
h4 { h4 {
font-size: $h4-font-size; font-size: $h4-font-size;
} }
h5 { h5 {
font-size: $h5-font-size; font-size: $h5-font-size;
} }
h6 { h6 {
font-size: $h6-font-size; font-size: $h6-font-size;
} }
p { p {
margin: $paragraph-margin; margin: $paragraph-margin;
} }
ol, ul { ol, ul {
margin: $list-margin; margin: $list-margin;
padding-left: $list-left-padding; padding-left: $list-left-padding;
} }
b, strong { b, strong {
font-weight: $bold-font-weight; font-weight: $bold-font-weight;
} }
hr { hr {
// Fixes and defaults for styling // Fixes and defaults for styling
box-sizing: content-box; box-sizing: content-box;
border: 0; border: 0;
overflow: visible; overflow: visible;
// Actual styling using variables // Actual styling using variables
line-height: $horizontal-rule-line-height; line-height: $horizontal-rule-line-height;
margin: $horizontal-rule-margin; margin: $horizontal-rule-margin;
@if $horizontal-rule-fancy-style { @if $horizontal-rule-fancy-style {
height: $_1px; height: $_1px;
background: linear-gradient(#{$horizontal-rule-fancy-gradient}); background: linear-gradient(#{$horizontal-rule-fancy-gradient});
} }
@else { @else {
height: 0; height: 0;
border-top: $horizontal-rule-border-style; border-top: $horizontal-rule-border-style;
} }
} }
blockquote { blockquote {
display: block; display: block;
position: relative; position: relative;
font-style: italic; font-style: italic;
@if $blockquote-back-color != $back-color { @if $blockquote-back-color != $back-color {
background: $blockquote-back-color; background: $blockquote-back-color;
} }
@if $blockquote-fore-color != $fore-color { @if $blockquote-fore-color != $fore-color {
color: $blockquote-fore-color; color: $blockquote-fore-color;
} }
// Overwrite defaults // Overwrite defaults
margin: $blockquote-margin; margin: $blockquote-margin;
padding: $blockquote-padding; padding: $blockquote-padding;
@if $blockquote-border-style != 0 { @if $blockquote-border-style != 0 {
border: $blockquote-border-style; border: $blockquote-border-style;
} }
@if $blockquote-sidebar-style != 0 { @if $blockquote-sidebar-style != 0 {
border-left: $blockquote-sidebar-style; border-left: $blockquote-sidebar-style;
} }
@if $blockquote-border-radius != 0 { @if $blockquote-border-radius != 0 {
border-radius: $blockquote-border-radius; border-radius: $blockquote-border-radius;
} }
@if $blockquote-box-shadow != none { @if $blockquote-box-shadow != none {
box-shadow: $blockquote-box-shadow; box-shadow: $blockquote-box-shadow;
} }
&:after { &:after {
position: absolute; position: absolute;
font-style: normal; font-style: normal;
font-size: $blockquote-cite-font-size; font-size: $blockquote-cite-font-size;
@if $blockquote-cite-fore-color != $blockquote-fore-color { @if $blockquote-cite-fore-color != $blockquote-fore-color {
color: $blockquote-cite-fore-color; color: $blockquote-cite-fore-color;
} }
left: $blockquote-cite-left-position; left: $blockquote-cite-left-position;
bottom: $blockquote-cite-bottom-position; bottom: $blockquote-cite-bottom-position;
content: '\2014 \2009'attr(cite); content: '\2014 \2009'attr(cite);
} }
} }
$use-default-code-fonts: true !default; $use-default-code-fonts: true !default;
@if $use-default-code-fonts { @if $use-default-code-fonts {
code, kbd, pre, samp{ code, kbd, pre, samp{
font-family: monospace, monospace; // Applies display fix for all code elements font-family: monospace, monospace; // Applies display fix for all code elements
} }
} }
@else { @else {
code, kbd, pre, samp{ code, kbd, pre, samp{
font-family: $code-font-family; // Display fix should be applied manually! font-family: $code-font-family; // Display fix should be applied manually!
} }
} }
code { code {
@if $code-element-border-style != 0{ @if $code-element-border-style != 0{
border: $code-element-border-style; border: $code-element-border-style;
} }
@if $code-element-border-radius != 0 { @if $code-element-border-radius != 0 {
border-radius: $code-element-border-radius; border-radius: $code-element-border-radius;
} }
@if $code-element-back-color != $back-color { @if $code-element-back-color != $back-color {
background: $code-element-back-color; background: $code-element-back-color;
} }
@if $code-element-fore-color != $fore-color { @if $code-element-fore-color != $fore-color {
color: $code-element-fore-color; color: $code-element-fore-color;
} }
@if $code-element-padding != 0 { @if $code-element-padding != 0 {
padding: $code-element-padding; padding: $code-element-padding;
} }
@if $code-element-box-shadow != none { @if $code-element-box-shadow != none {
box-shadow: $code-element-box-shadow; box-shadow: $code-element-box-shadow;
} }
} }
pre { pre {
overflow: auto; // Responsiveness overflow: auto; // Responsiveness
@if $pre-element-border-style != 0 { @if $pre-element-border-style != 0 {
border: $pre-element-border-style; border: $pre-element-border-style;
} }
@if $pre-element-border-radius != 0 { @if $pre-element-border-radius != 0 {
border-radius: $pre-element-border-radius; border-radius: $pre-element-border-radius;
} }
@if $pre-element-back-color != $back-color { @if $pre-element-back-color != $back-color {
background: $pre-element-back-color; background: $pre-element-back-color;
} }
@if $pre-element-fore-color != $fore-color { @if $pre-element-fore-color != $fore-color {
color: $pre-element-fore-color; color: $pre-element-fore-color;
} }
@if $pre-element-padding != 0 { @if $pre-element-padding != 0 {
padding: $pre-element-padding; padding: $pre-element-padding;
} }
@if $pre-element-margin != 0 { @if $pre-element-margin != 0 {
margin: $pre-element-margin; margin: $pre-element-margin;
} }
@if $add-pre-element-sidebar { @if $add-pre-element-sidebar {
border-left: $pre-element-sidebar-style; border-left: $pre-element-sidebar-style;
} }
@if $pre-element-box-shadow != none { @if $pre-element-box-shadow != none {
box-shadow: $pre-element-box-shadow; box-shadow: $pre-element-box-shadow;
} }
} }
kbd { kbd {
@if $kbd-element-border-style != 0 { @if $kbd-element-border-style != 0 {
border: $kbd-element-border-style; border: $kbd-element-border-style;
} }
@if $kbd-element-border-radius != 0 { @if $kbd-element-border-radius != 0 {
border-radius: $kbd-element-border-radius; border-radius: $kbd-element-border-radius;
} }
@if $kbd-element-back-color != $back-color { @if $kbd-element-back-color != $back-color {
background: $kbd-element-back-color; background: $kbd-element-back-color;
} }
@if $kbd-element-fore-color != $fore-color { @if $kbd-element-fore-color != $fore-color {
color: $kbd-element-fore-color; color: $kbd-element-fore-color;
} }
@if $kbd-element-padding != 0 { @if $kbd-element-padding != 0 {
padding: $kbd-element-padding; padding: $kbd-element-padding;
} }
@if $kbd-element-box-shadow != none { @if $kbd-element-box-shadow != none {
box-shadow: $kbd-element-box-shadow; box-shadow: $kbd-element-box-shadow;
} }
} }
$style-samp-element: false !default; $style-samp-element: false !default;
@if $style-samp-element { @if $style-samp-element {
samp{ samp{
@if $samp-element-border-style != 0 { @if $samp-element-border-style != 0 {
border: $samp-element-border-style; border: $samp-element-border-style;
} }
@if $samp-element-border-radius != 0 { @if $samp-element-border-radius != 0 {
border-radius: $samp-element-border-radius; border-radius: $samp-element-border-radius;
} }
@if $samp-element-back-color != $back-color { @if $samp-element-back-color != $back-color {
background: $samp-element-back-color; background: $samp-element-back-color;
} }
@if $samp-element-fore-color != $fore-color { @if $samp-element-fore-color != $fore-color {
color: $samp-element-fore-color; color: $samp-element-fore-color;
} }
@if $samp-element-padding != 0 { @if $samp-element-padding != 0 {
padding: $samp-element-padding; padding: $samp-element-padding;
} }
@if $samp-element-box-shadow != none { @if $samp-element-box-shadow != none {
box-shadow: $samp-element-box-shadow; box-shadow: $samp-element-box-shadow;
} }
} }
} }
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size { @if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
small, sup, sub { small, sup, sub {
font-size: $small-font-size; font-size: $small-font-size;
} }
sup { sup {
top: $sup-top; top: $sup-top;
} }
sub{ sub{
bottom: $sub-bottom; bottom: $sub-bottom;
} }
sup, sub { sup, sub {
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
} }
@else if $small-font-size == $sub-font-size { @else if $small-font-size == $sub-font-size {
small, sub { small, sub {
font-size: $small-font-size; font-size: $small-font-size;
} }
sup { sup {
font-size: $sup-font-size; font-size: $sup-font-size;
top: $sup-top; top: $sup-top;
} }
sub { sub {
bottom: $sub-bottom; bottom: $sub-bottom;
} }
sup, sub { sup, sub {
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
} }
@else if $small-font-size == $sup-font-size { @else if $small-font-size == $sup-font-size {
small, sup { small, sup {
font-size: $small-font-size; font-size: $small-font-size;
} }
sup { sup {
top: $sup-top; top: $sup-top;
} }
sub { sub {
font-size: $sub-font-size; font-size: $sub-font-size;
bottom: $sub-bottom; bottom: $sub-bottom;
} }
sup, sub { sup, sub {
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
} }
@else if $sup-font-size == $sub-font-size { @else if $sup-font-size == $sub-font-size {
small { small {
font-size: $small-font-size; font-size: $small-font-size;
} }
sup, sub { sup, sub {
font-size: $sup-font-size; font-size: $sup-font-size;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sup { sup {
top: $sup-top; top: $sup-top;
} }
sub{ sub{
bottom: $sub-bottom; bottom: $sub-bottom;
} }
} }
@else { @else {
small { small {
font-size: $small-font-size; font-size: $small-font-size;
} }
sup { sup {
font-size: $sup-font-size; font-size: $sup-font-size;
top: $sup-top; top: $sup-top;
} }
sub{ sub{
font-size: $sub-font-size; font-size: $sub-font-size;
bottom: $sub-bottom; bottom: $sub-bottom;
} }
sup, sub { sup, sub {
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
} }
// Link styling // Link styling
a{ a{
color: $link-fore-color; color: $link-fore-color;
@if $apply-link-underline { @if $apply-link-underline {
text-decoration: underline; text-decoration: underline;
} }
@else { @else {
text-decoration: none; text-decoration: none;
} }
@if $link-font-weight != 500 { @if $link-font-weight != 500 {
font-weight: $link-font-weight; font-weight: $link-font-weight;
} }
@if $apply-link-hover-fade { @if $apply-link-hover-fade {
opacity: 1; opacity: 1;
transition: opacity 0.3s; transition: opacity 0.3s;
} }
&:visited { &:visited {
color: $link-visited-fore-color; color: $link-visited-fore-color;
} }
@if $apply-link-hover-fade { @if $apply-link-hover-fade {
@if $style-link-active-state { @if $style-link-active-state {
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
opacity: 0.75; opacity: 0.75;
} }
} }
@else { @else {
&:hover, &:focus { &:hover, &:focus {
opacity: 0.75; opacity: 0.75;
} }
} }
} }
@else { @else {
@if $style-link-active-state { @if $style-link-active-state {
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
color: $link-hover-fore-color; color: $link-hover-fore-color;
} }
} }
@else { @else {
&:hover, &:focus { &:hover, &:focus {
color: $link-hover-fore-color; color: $link-hover-fore-color;
} }
} }
} }
} }
// Captions for figures // Captions for figures
figcaption { figcaption {
@if $figcaption-font-size != 100% { @if $figcaption-font-size != 100% {
font-size: $figcaption-font-size; font-size: $figcaption-font-size;
} }
@if $figcaption-fore-color != $fore-color { @if $figcaption-fore-color != $fore-color {
color: $figcaption-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 // 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. // base class for the button styles.
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity, @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-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}, 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} { [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); background: rgba($button-alt-back-color, $button-alt-back-opacity);
@if $button-alt-fore-color != $button-fore-color { @if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color; color: $button-alt-fore-color;
} }
&:hover, &:focus { &:hover, &:focus {
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity); background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
} }
} }
@if $style-link-active-state { @if $style-link-active-state {
a.#{$button-class-name}.#{$button-alt-name}:active, a[role="button"].#{$button-alt-name}:active { 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); background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
} }
} }
} }
// Mixin for alternate button styles (button style variants). // Mixin for alternate button styles (button style variants).
// Variables: // Variables:
@ -41,22 +41,22 @@
// required for such elements. However rules for the normal button elements are applied in order to not require the // 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. // base class for the button styles.
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius, @mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
$button-alt-padding, $button-alt-margin) { $button-alt-padding, $button-alt-margin) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name}, 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} { [type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
@if $button-alt-border-style != $button-border-style { @if $button-alt-border-style != $button-border-style {
border: $button-alt-border-style; border: $button-alt-border-style;
} }
@if $button-alt-border-radius != $button-border-radius { @if $button-alt-border-radius != $button-border-radius {
border-radius: $button-alt-border-radius; border-radius: $button-alt-border-radius;
} }
@if $button-alt-padding != $button-padding { @if $button-alt-padding != $button-padding {
padding: $button-alt-padding; padding: $button-alt-padding;
} }
@if $button-alt-margin != $button-margin { @if $button-alt-margin != $button-margin {
margin: $button-alt-margin; margin: $button-alt-margin;
} }
} }
} }
// Mixin for alternate switch (switch color variants). // Mixin for alternate switch (switch color variants).
// Variables: // 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-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. // - $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, @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-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) { $switch-alt-bar-back-color: $switch-bar-back-color) {
@if not ($include-switch) { @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!"; @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="checkbox"] + label.#{$switch-name}.#{$switch-alt-name},
[type="radio"] + label.#{$switch-name}.#{$switch-alt-name} { [type="radio"] + label.#{$switch-name}.#{$switch-alt-name} {
&:before { &:before {
@if $switch-alt-bar-back-color != $switch--bar-back-color { @if $switch-alt-bar-back-color != $switch--bar-back-color {
background: $switch-alt-bar-back-color; background: $switch-alt-bar-back-color;
} }
} }
&:after { &:after {
@if $switch-alt-knob-back-color != $switch-knob-back-color { @if $switch-alt-knob-back-color != $switch-knob-back-color {
background: $switch-alt-knob-back-color; background: $switch-alt-knob-back-color;
} }
} }
} }
[type="checkbox"]:checked + label.#{$switch-name}.#{$switch-alt-name}, [type="checkbox"]:checked + label.#{$switch-name}.#{$switch-alt-name},
[type="radio"]:checked + label.#{$switch-name}.#{$switch-alt-name} { [type="radio"]:checked + label.#{$switch-name}.#{$switch-alt-name} {
&:before { &:before {
@if $switch-alt-on-bar-back-color != $switch-on-bar-back-color { @if $switch-alt-on-bar-back-color != $switch-on-bar-back-color {
background: $switch-alt-on-bar-back-color; background: $switch-alt-on-bar-back-color;
} }
} }
&:after { &:after {
@if $switch-alt-on-knob-back-color != $switch-on-knob-back-color { @if $switch-alt-on-knob-back-color != $switch-on-knob-back-color {
background: $switch-alt-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. // Different elements are styled based on the same set of rules.
$button-class-name: 'button' !default; // Class name for the button-like elements. $button-class-name: 'button' !default; // Class name for the button-like elements.
$header-logo-name: 'logo' !default; // Class name for <header>'s logo. $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`). $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`). $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>. $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`). $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>. $footer-sticky-name: 'sticky' !default; // Class name for sticky <footer>.
$include-nav-styles: true !default; // [Hidden flag] Should <nav> elements by stylized? (`true`/`false`) $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-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add. $nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories. $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`) $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`) $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-name: 'drawer' !default; // Class name for the drawer component.
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle. $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-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-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-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width 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. $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. // 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. $back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground 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. // 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`) $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`). $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 // 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. $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-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-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 styling.
header { header {
display: block; // Correct display for older versions of IE. display: block; // Correct display for older versions of IE.
height: $header-height; height: $header-height;
@if $header-back-color != $back-color { @if $header-back-color != $back-color {
background: $header-back-color; background: $header-back-color;
} }
@if $header-fore-color != $fore-color { @if $header-fore-color != $fore-color {
color: $header-fore-color; color: $header-fore-color;
} }
@if $header-border-style != 0 { @if $header-border-style != 0 {
border: $header-border-style; border: $header-border-style;
} }
@if $header-margin != 0 { @if $header-margin != 0 {
margin: $header-margin; margin: $header-margin;
} }
@if $header-padding != 0 { @if $header-padding != 0 {
padding: $header-padding; padding: $header-padding;
} }
@if $header-box-shadow != none { @if $header-box-shadow != none {
box-shadow: $header-box-shadow; box-shadow: $header-box-shadow;
} }
// Responsiveness for smaller displays, scrolls horizontally. // Responsiveness for smaller displays, scrolls horizontally.
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
// Header logo styling. // Header logo styling.
.#{$header-logo-name} { .#{$header-logo-name} {
@if $header-colorize-svgs { // Deals with SVG colorization in case people use SVGs. @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. color: $header-fore-color; // Only toggle off if you know what you're doing.
} }
@if $header-logo-font-size != $base-font-size { @if $header-logo-font-size != $base-font-size {
font-size: $header-logo-font-size; font-size: $header-logo-font-size;
} }
@if $header-logo-line-height != $base-line-height { @if $header-logo-line-height != $base-line-height {
line-height: $header-logo-line-height; line-height: $header-logo-line-height;
} }
@if $header-logo-margin != 0 { @if $header-logo-margin != 0 {
margin: $header-logo-margin; margin: $header-logo-margin;
} }
@if $header-logo-padding != 0 { @if $header-logo-padding != 0 {
padding: $header-logo-padding; padding: $header-logo-padding;
} }
@if $apply-link-hover-fade { @if $apply-link-hover-fade {
transition: opacity 0.3s ; transition: opacity 0.3s ;
} }
} }
// Link styling. // Link styling.
button, [type="button"], button, [type="button"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name}, a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[role="button"], label[role="button"], [role="button"] { a[role="button"], label[role="button"], [role="button"] {
background: $header-back-color; // Apply color regardless to override styling from other things. background: $header-back-color; // Apply color regardless to override styling from other things.
color: $header-fore-color; color: $header-fore-color;
vertical-align: top; // Alignemt, really important to make this work well. vertical-align: top; // Alignemt, really important to make this work well.
@if $header-link-margin != 0 { @if $header-link-margin != 0 {
margin: $header-link-margin; margin: $header-link-margin;
} }
@if $style-link-active-state { @if $style-link-active-state {
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background: $header-link-hover-color; background: $header-link-hover-color;
} }
} }
@else { @else {
&:hover, &:focus { &:hover, &:focus {
background: $header-link-hover-color; background: $header-link-hover-color;
} }
} }
@if $button-box-shadow != none { // Override for buttons when shadow is enabled. @if $button-box-shadow != none { // Override for buttons when shadow is enabled.
box-shadow: none; box-shadow: none;
} }
@if $button-border-style != 0 { // Override for buttons when border-style is enabled. @if $button-border-style != 0 { // Override for buttons when border-style is enabled.
border: 0; border: 0;
} }
} }
@if $apply-link-underline { // Override for links if underline is enabled. @if $apply-link-underline { // Override for links if underline is enabled.
.#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] { .#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] {
text-decoration: none; text-decoration: none;
} }
} }
// Fix for responsive header, using the grid system's row and column alignment. // Fix for responsive header, using the grid system's row and column alignment.
&.#{$grid-row-name} { &.#{$grid-row-name} {
box-sizing: content-box; box-sizing: content-box;
} }
} }
// Navigation sidebar styling. // Navigation sidebar styling.
@if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on. @if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on.
nav { nav {
display: block; // Correct display for older versions of IE. display: block; // Correct display for older versions of IE.
@if $nav-back-color != $back-color { @if $nav-back-color != $back-color {
background: $nav-back-color; background: $nav-back-color;
} }
@if $nav-fore-color != $fore-color { @if $nav-fore-color != $fore-color {
color: $nav-fore-color; color: $nav-fore-color;
} }
@if $nav-border-style != 0 { @if $nav-border-style != 0 {
border: $nav-border-style; border: $nav-border-style;
} }
@if $nav-border-radius != 0 { @if $nav-border-radius != 0 {
border-radius: $nav-border-radius; border-radius: $nav-border-radius;
} }
@if $nav-margin != 0 { @if $nav-margin != 0 {
margin: $nav-margin; margin: $nav-margin;
} }
@if $nav-padding != 0 { @if $nav-padding != 0 {
padding: $nav-padding; padding: $nav-padding;
} }
@if $nav-box-shadow != none { @if $nav-box-shadow != none {
box-shadow: $nav-box-shadow; box-shadow: $nav-box-shadow;
} }
a, a:visited { a, a:visited {
display: block; display: block;
color: $nav-link-fore-color; // Apply regardless to de-stylize visited links. color: $nav-link-fore-color; // Apply regardless to de-stylize visited links.
text-decoration: none; text-decoration: none;
} }
// Subcategories in navigation. // Subcategories in navigation.
@for $i from 1 through $nav-sublink-depth { @for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} { .#{$nav-sublink-prefix}-#{$i} {
padding-left: $i * $nav-sublink-padding-left; padding-left: $i * $nav-sublink-padding-left;
position: relative; position: relative;
@if $nav-include-sublink-bar { @if $nav-include-sublink-bar {
&:before { &:before {
position: absolute; position: absolute;
left: $nav-sublink-bar-left-position; left: $nav-sublink-bar-left-position;
top: -$nav-sublink-bar-width; top: -$nav-sublink-bar-width;
content: ''; content: '';
height: 100%; height: 100%;
border: $nav-sublink-bar-width solid $nav-sublink-bar-color; border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
border-left: 0; border-left: 0;
} }
} }
} }
} }
} }
} }
// Footer styling. // Footer styling.
footer { footer {
display: block; // Correct display for older versions of IE. display: block; // Correct display for older versions of IE.
@if $footer-back-color != $back-color { @if $footer-back-color != $back-color {
background: $footer-back-color; background: $footer-back-color;
} }
@if $footer-fore-color != $fore-color { @if $footer-fore-color != $fore-color {
color: $footer-fore-color; color: $footer-fore-color;
} }
@if $footer-border-style != 0 { @if $footer-border-style != 0 {
border: $footer-border-style; border: $footer-border-style;
} }
@if $footer-margin != 0 { @if $footer-margin != 0 {
margin: $footer-margin; margin: $footer-margin;
} }
@if $footer-padding != 0 { @if $footer-padding != 0 {
padding: $footer-padding; padding: $footer-padding;
} }
font-size: $footer-font-size; font-size: $footer-font-size;
a, a:visited { a, a:visited {
color: $footer-link-fore-color; color: $footer-link-fore-color;
} }
} }
// Sticky headers and footers. // Sticky headers and footers.
@if $include-header-sticky and $include-footer-sticky { @if $include-header-sticky and $include-footer-sticky {
header.#{$header-sticky-name}, footer.#{$footer-sticky-name} { header.#{$header-sticky-name}, footer.#{$footer-sticky-name} {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables. z-index: 1101; // Deals with certain problems when combined with cards and tables.
} }
header.#{$header-sticky-name} { header.#{$header-sticky-name} {
top: 0; top: 0;
} }
footer.#{$footer-sticky-name} { footer.#{$footer-sticky-name} {
bottom: 0; bottom: 0;
} }
} }
@else if $include-header-sticky { @else if $include-header-sticky {
header.#{$header-sticky-name} { header.#{$header-sticky-name} {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1101; // Deals with certain problems when combined with cards and tables. z-index: 1101; // Deals with certain problems when combined with cards and tables.
} }
} }
@else if $include-footer-sticky { @else if $include-footer-sticky {
footer.#{$footer-sticky-name} { footer.#{$footer-sticky-name} {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
bottom: 0; bottom: 0;
z-index: 1101; // Deals with certain problems when combined with cards and tables. z-index: 1101; // Deals with certain problems when combined with cards and tables.
} }
} }
// Responsive drawer component // Responsive drawer component
@if $include-drawer { @if $include-drawer {
.#{$drawer-toggle-name}:before { .#{$drawer-toggle-name}:before {
position: relative; position: relative;
top: $drawer-toggle-top; top: $drawer-toggle-top;
font-family: sans-serif; font-family: sans-serif;
font-size: $drawer-toggle-font-size; font-size: $drawer-toggle-font-size;
line-height: $drawer-toggle-line-height; line-height: $drawer-toggle-line-height;
content: '\2261'; content: '\2261';
} }
.#{$drawer-name} { .#{$drawer-name} {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
top: 0; top: 0;
width: $drawer-width; width: $drawer-width;
height: 100vh; height: 100vh;
overflow-y: auto; overflow-y: auto;
background: $drawer-back-color; background: $drawer-back-color;
@if $drawer-border-style != 0 { @if $drawer-border-style != 0 {
border: $drawer-border-style; border: $drawer-border-style;
} }
@if $drawer-border-radius != 0 { @if $drawer-border-radius != 0 {
border-radius: $drawer-border-radius; border-radius: $drawer-border-radius;
} }
margin: 0; margin: 0;
@if $drawer-padding != 0 { @if $drawer-padding != 0 {
padding: $drawer-padding; padding: $drawer-padding;
} }
@if $drawer-box-shadow != none { @if $drawer-box-shadow != none {
box-shadow: $drawer-box-shadow; box-shadow: $drawer-box-shadow;
} }
z-index: 1110; z-index: 1110;
&:not(.#{$drawer-right-name}) { &:not(.#{$drawer-right-name}) {
left: -$drawer-width; left: -$drawer-width;
transition: left 0.3s; transition: left 0.3s;
} }
&.#{$drawer-right-name} { &.#{$drawer-right-name} {
right: -$drawer-width; right: -$drawer-width;
transition: right 0.3s; transition: right 0.3s;
} }
& .#{$drawer-close-name} { & .#{$drawer-close-name} {
position: absolute; position: absolute;
top: $drawer-close-top; top: $drawer-close-top;
right: $drawer-close-right; right: $drawer-close-right;
z-index: 1111; z-index: 1111;
padding: 0; // Fixes the extra padding added from <label> styling. padding: 0; // Fixes the extra padding added from <label> styling.
} }
} }
@media screen and (max-width: #{$drawer-width}) { @media screen and (max-width: #{$drawer-width}) {
.#{$drawer-name} { .#{$drawer-name} {
width: 100%; width: 100%;
} }
} }
@media screen and (min-width: #{$drawer-mobile-breakpoint}){ @media screen and (min-width: #{$drawer-mobile-breakpoint}){
.#{$drawer-name}:not(.#{$drawer-persistent-name}) { .#{$drawer-name}:not(.#{$drawer-persistent-name}) {
position: static; position: static;
height: 100%; height: 100%;
z-index: 1100; z-index: 1100;
& .#{$drawer-close-name} { & .#{$drawer-close-name} {
display: none; display: none;
} }
} }
.#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) { .#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
display: none; display: none;
} }
} }
:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) { :checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
left: 0; left: 0;
} }
:checked + .#{$drawer-name}.#{$drawer-right-name} { :checked + .#{$drawer-name}.#{$drawer-right-name} {
right: 0; 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 elements use the progress element as their base.
$progress-max-value: 100 !default; // Arithmetic max value of <progress> - use integer values. $progress-max-value: 100 !default; // Arithmetic max value of <progress> - use integer values.
$progress-height: 14px !default; // Height of <progress>. $progress-height: 14px !default; // Height of <progress>.
$include-spinner-donut: true !default; // [Hidden flag] Should spinner donuts be enabled? (`true`/`false`) $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. $spinner-donut-name: 'spinner-donut' !default; // Class name for donut spinner.
// Check the `_progress_mixins.scss` file to find this module's mixins. // Check the `_progress_mixins.scss` file to find this module's mixins.
@import 'progress_mixins'; @import 'progress_mixins';
// Default styling for progress. Use mixins for alternate styles. // Default styling for progress. Use mixins for alternate styles.
progress { progress {
display: block; display: block;
vertical-align: baseline; // Correct vertical alignment in certain browsers. vertical-align: baseline; // Correct vertical alignment in certain browsers.
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
height: $progress-height; height: $progress-height;
// Older browsers will sort not display progress properly, but that's ok // Older browsers will sort not display progress properly, but that's ok
width: 90%; width: 90%;
// Newer browsers will calculate the proper width // Newer browsers will calculate the proper width
width: calc(100% - #{$progress-left-right-margin*2}); width: calc(100% - #{$progress-left-right-margin*2});
margin: $progress-top-bottom-margin $progress-left-right-margin; margin: $progress-top-bottom-margin $progress-left-right-margin;
border: $progress-border-style; border: $progress-border-style;
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-radius: $progress-border-radius; border-radius: $progress-border-radius;
} }
@if $progress-box-shadow != none { @if $progress-box-shadow != none {
box-shadow: $progress-box-shadow; box-shadow: $progress-box-shadow;
} }
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox). background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
color: $progress-fore-color; // Foreground of the element (IE 10+). color: $progress-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers). &::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-fore-color; background: $progress-fore-color;
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius; border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius; border-bottom-left-radius: $progress-border-radius;
} }
} }
&::-webkit-progress-bar { // Background of the element (webkit browsers). &::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-back-color; background: $progress-back-color;
} }
&::-moz-progress-bar { // Foreground of the element (Firefox). &::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-fore-color; background: $progress-fore-color;
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-top-left-radius: $progress-border-radius; border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius; border-bottom-left-radius: $progress-border-radius;
} }
} }
&[value="#{$progress-max-value}"] { &[value="#{$progress-max-value}"] {
&::-webkit-progress-value { &::-webkit-progress-value {
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-radius: $progress-border-radius; border-radius: $progress-border-radius;
} }
} }
&::-moz-progress-bar { &::-moz-progress-bar {
@if $progress-border-radius != 0 { @if $progress-border-radius != 0 {
border-radius: $progress-border-radius; 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 // Animation definition for donut spinner
@-webkit-keyframes spinner-donut-anim { @-webkit-keyframes spinner-donut-anim {
0% { -webkit-transform: rotate(0deg); } 0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg);} 100% { -webkit-transform: rotate(360deg);}
} }
@keyframes spinner-donut-anim { @keyframes spinner-donut-anim {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);} 100% { transform: rotate(360deg);}
} }
} }
@if $include-spinner-donut { // Turn off to disable spinner donuts. @if $include-spinner-donut { // Turn off to disable spinner donuts.
// Style for donut spinner // Style for donut spinner
.#{$spinner-donut-name} { .#{$spinner-donut-name} {
display: inline-block; display: inline-block;
border: $spinner-donut-border-thickness solid $spinner-donut-back-color; border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color; border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
border-radius: 50%; border-radius: 50%;
width: $spinner-donut-size; width: $spinner-donut-size;
height: $spinner-donut-size; height: $spinner-donut-size;
-webkit-animation: spinner-donut-anim 1.2s linear infinite; -webkit-animation: spinner-donut-anim 1.2s linear infinite;
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-name : The name of the class used for the inline progress.
// - $progress-inline-width : The width of the inline progress. // - $progress-inline-width : The width of the inline progress.
@mixin make-progress-inline ($progress-inline-name, $progress-inline-width) { @mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
progress.#{$progress-inline-name} { progress.#{$progress-inline-name} {
display: inline-block; display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it. vertical-align: middle; // Align progress bar vertically to look better with text next to it.
@if $progress-inline-width != 100% { @if $progress-inline-width != 100% {
width: $progress-inline-width; width: $progress-inline-width;
} }
} }
} }
// Mixin for alternate progress (progress color variants). // Mixin for alternate progress (progress color variants).
// Variables: // Variables:
@ -19,23 +19,23 @@
// - $progress-alt-fore-color : The progress bar color of the alternate progress. // - $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. // - $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) { @mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
progress.#{$progress-alt-name} { progress.#{$progress-alt-name} {
@if $progress-alt-back-color != $progress-back-color { @if $progress-alt-back-color != $progress-back-color {
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox). background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
&::-webkit-progress-bar { // Background of the element (webkit browsers). &::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-alt-back-color; background: $progress-alt-back-color;
} }
} }
@if $progress-alt-fore-color != $progress-fore-color { @if $progress-alt-fore-color != $progress-fore-color {
color: $progress-alt-fore-color; // Foreground of the element (IE 10+). color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers). &::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-alt-fore-color; background: $progress-alt-fore-color;
} }
&::-moz-progress-bar { // Foreground of the element (Firefox). &::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-alt-fore-color; background: $progress-alt-fore-color;
} }
} }
} }
} }
// Mixin for alternate progress styles. // Mixin for alternate progress styles.
// Variables: // 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-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. // - $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, @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-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-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
$progress-alt-box-shadow : $progress-box-shadow) { $progress-alt-box-shadow : $progress-box-shadow) {
progress.#{$progress-alt-name} { progress.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height { @if $progress-alt-height != $progress-height {
height: $progress-alt-height; height: $progress-alt-height;
} }
@if $progress-alt-left-right-margin != $progress-left-right-margin { @if $progress-alt-left-right-margin != $progress-left-right-margin {
width: calc(100% - #{$progress-alt-left-right-margin*2}); 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 { @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; margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
} }
@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin { @if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin auto; margin: $progress-alt-top-bottom-margin auto;
} }
@if $progress-alt-border-style != $progress-border-style { @if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style; border: $progress-alt-border-style;
} }
@if progress-alt-border-radius != $progress-border-radius { @if progress-alt-border-radius != $progress-border-radius {
border-radius: $progress-alt-border-radius; border-radius: $progress-alt-border-radius;
&::-webkit-progress-value { &::-webkit-progress-value {
border-top-left-radius: $progress-alt-border-radius; border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius; border-bottom-left-radius: $progress-alt-border-radius;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
border-top-left-radius: $progress-alt-border-radius; border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius; border-bottom-left-radius: $progress-alt-border-radius;
} }
&[value="#{$progress-max-value}"] { &[value="#{$progress-max-value}"] {
&::-webkit-progress-value { &::-webkit-progress-value {
border-radius: $progress-alt-border-radius; border-radius: $progress-alt-border-radius;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
border-radius: $progress-alt-border-radius; border-radius: $progress-alt-border-radius;
} }
} }
} }
@if $progress-alt-box-shadow != $progress-box-shadow { @if $progress-alt-box-shadow != $progress-box-shadow {
box-shadow: $progress-alt-box-shadow; box-shadow: $progress-alt-box-shadow;
} }
} }
} }
// Mixin for alternate donut spinner colors (spinner donut color variants). // Mixin for alternate donut spinner colors (spinner donut color variants).
// Variables: // Variables:
@ -96,32 +96,32 @@
// - $spinner-donut-alt-back-color : The background color of the alternate donut spinner. // - $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. // - $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) { @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) { @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!"; @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} { .#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color; border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color; border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
} }
} }
// Mixin for alternate donut spinner styles (spinner donut styles variants). // Mixin for alternate donut spinner styles (spinner donut styles variants).
// Variables: // Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner style. // - $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-size : The size of the alternate donut spinner style.
// - $spinner-donut-alt-border-thickness : (Optional) The border thickness 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, @mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) { $spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
@if not ($include-spinner-donut) { @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!"; @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} { .#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness { @if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
border-width: $spinner-donut-alt-border-thickness; border-width: $spinner-donut-alt-border-thickness;
} }
@if $spinner-donut-alt-size != $spinner-donut-size { @if $spinner-donut-alt-size != $spinner-donut-size {
width: $spinner-donut-alt-size; width: $spinner-donut-alt-size;
height: $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. // Dependency: This module is somewhat dependent on the grid system.
$tab-container-name: 'tabs' !default; // Class name for the tabs container. $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`). $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-name: 'stacked' !default; // Class name for stacked tabs container.
$tab-stacked-breakpoint: 767px !default; // Breakpoint for tabs layout (stacked/horizontal) $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. // 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. $back-color: white !default; // [External variable - core] Background color for everything.
$fore-color: black !default; // [External variable - core] Foreground color for everything. $fore-color: black !default; // [External variable - core] Foreground color for everything.
// Tab styling // Tab styling
.#{$tab-container-name} { .#{$tab-container-name} {
width: 100%; width: 100%;
opacity: 1; opacity: 1;
// Old syntax // Old syntax
display: -webkit-box; display: -webkit-box;
-webkit-box-pack: justify; -webkit-box-pack: justify;
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-justify-content: space-between; -webkit-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
@if $tab-container-box-shadow != none { @if $tab-container-box-shadow != none {
box-shadow: $tab-container-box-shadow; box-shadow: $tab-container-box-shadow;
} }
// Tab label styling // Tab label styling
& > label { & > label {
// Old syntax // Old syntax
-webkit-box-flex: 1; -webkit-box-flex: 1;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
// Make tab labels stay at the top on large displays // Make tab labels stay at the top on large displays
-webkit-order: 1; -webkit-order: 1;
order: 1; order: 1;
// Actual styling // Actual styling
display: inline-block; display: inline-block;
height: $tab-label-height; height: $tab-label-height;
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: background 0.3s;
@if $tab-label-back-color != $back-color { @if $tab-label-back-color != $back-color {
background: $tab-label-back-color; background: $tab-label-back-color;
} }
@if $tab-label-fore-color != $fore-color { @if $tab-label-fore-color != $fore-color {
color: $tab-label-fore-color; color: $tab-label-fore-color;
} }
@if $tab-border-style != 0 { @if $tab-border-style != 0 {
border: $tab-border-style; border: $tab-border-style;
} }
@if $tab-label-padding != 0 { @if $tab-label-padding != 0 {
padding: $tab-label-padding; padding: $tab-label-padding;
} }
@if $tab-border-radius != 0 { // Style first and last tabs' labels' top corners as needed @if $tab-border-radius != 0 { // Style first and last tabs' labels' top corners as needed
&:first-of-type { &:first-of-type {
border-top-left-radius: $tab-border-radius; border-top-left-radius: $tab-border-radius;
} }
&:last-of-type { &:last-of-type {
border-top-right-radius: $tab-border-radius; border-top-right-radius: $tab-border-radius;
} }
} }
// Hover styling for tabs' labels // Hover styling for tabs' labels
&:hover, &:focus { &:hover, &:focus {
background: rgba($tab-label-back-color, $tab-label-hover-opacity); background: rgba($tab-label-back-color, $tab-label-hover-opacity);
} }
} }
// Tab radio styling // Tab radio styling
& > [type="radio"], & > [type="checkbox"] { & > [type="radio"], & > [type="checkbox"] {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
// Tab content styling // Tab content styling
& > label + div { & > label + div {
// New syntax // New syntax
-webkit-flex-basis: auto; -webkit-flex-basis: auto;
flex-basis: auto; flex-basis: auto;
// Make tab panels display after all the labels on larger displays // Make tab panels display after all the labels on larger displays
-webkit-order: 2; -webkit-order: 2;
order: 2; order: 2;
// Hide content, while allowing accessibility // Hide content, while allowing accessibility
height: 1px; height: 1px;
width: 1px; width: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%); -webkit-clip-path: inset(100%);
clip-path: inset(100%); clip-path: inset(100%);
// Presentation // Presentation
-webkit-transform: scaleY(0); -webkit-transform: scaleY(0);
transform: scaleY(0); transform: scaleY(0);
-webkit-transform-origin: top; -webkit-transform-origin: top;
transform-origin: top; transform-origin: top;
transition: -webkit-transform 0.3s, transition: -webkit-transform 0.3s,
transform 0.3s; transform 0.3s;
@if $tab-border-radius != 0 { @if $tab-border-radius != 0 {
border-bottom-left-radius: $tab-border-radius; border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius; border-bottom-right-radius: $tab-border-radius;
} }
} }
// Style for tab labels except the first // Style for tab labels except the first
@if $tab-border-style != 0 { @if $tab-border-style != 0 {
& > label:not(:first-of-type) { & > label:not(:first-of-type) {
border-left: 0; border-left: 0;
} }
} }
// Tab label styling for open tab // Tab label styling for open tab
& > :checked + label { & > :checked + label {
@if $tab-label-selected-back-color != $tab-label-back-color { @if $tab-label-selected-back-color != $tab-label-back-color {
background: $tab-label-selected-back-color; background: $tab-label-selected-back-color;
&:hover, &:focus { &:hover, &:focus {
background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity); background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
} }
} }
@if $tab-label-selected-fore-color != $tab-label-fore-color { @if $tab-label-selected-fore-color != $tab-label-fore-color {
color: $tab-label-selected-fore-color; color: $tab-label-selected-fore-color;
} }
border-bottom-color: $tab-selected-border-color; border-bottom-color: $tab-selected-border-color;
} }
// Tab content styling (open tab) // Tab content styling (open tab)
& > :checked + label + div { & > :checked + label + div {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
height: $tab-panel-height; height: $tab-panel-height;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
margin: 0; margin: 0;
-webkit-transform: scaleY(1); -webkit-transform: scaleY(1);
transform: scaleY(1); transform: scaleY(1);
@if $tab-panel-back-color != $back-color { @if $tab-panel-back-color != $back-color {
background: $tab-panel-back-color; background: $tab-panel-back-color;
} }
@if $tab-panel-fore-color != $fore-color { @if $tab-panel-fore-color != $fore-color {
color: $tab-panel-fore-color; color: $tab-panel-fore-color;
} }
@if $tab-border-style != 0 { @if $tab-border-style != 0 {
border: $tab-border-style; border: $tab-border-style;
border-top: 0; border-top: 0;
} }
@if $tab-panel-padding != 0 { @if $tab-panel-padding != 0 {
padding: $tab-panel-padding; padding: $tab-panel-padding;
} }
// Fix display for some browsers // Fix display for some browsers
clip: auto; clip: auto;
-webkit-clip-path: inset(0%); -webkit-clip-path: inset(0%);
clip-path: inset(0%); clip-path: inset(0%);
} }
} }
// Stacked tabs // Stacked tabs
@if $include-stacked-tabs { // Turn off if you don't want stacked tabs enabled (except on smaller screens for responsiveness) @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} { .#{$tab-container-name}.#{$tab-stacked-name} {
// Old syntax // Old syntax
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
// New syntax // New syntax
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
& > label { & > label {
-webkit-order: initial; // Reset order to show stacked tabs properly -webkit-order: initial; // Reset order to show stacked tabs properly
order: initial; order: initial;
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed @if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
&:last-of-type { &:last-of-type {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: $tab-border-radius; border-bottom-left-radius: $tab-border-radius;
border-bottom-right-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 // Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
&:first-of-type { &:first-of-type {
border-top-right-radius: $tab-border-radius; border-top-right-radius: $tab-border-radius;
} }
} }
} }
& > :checked + label { & > :checked + label {
@if $tab-border-style != 0 { @if $tab-border-style != 0 {
border: $tab-border-style; border: $tab-border-style;
} }
@if $tab-border-radius != 0 { @if $tab-border-radius != 0 {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
} }
& > label + div { & > label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly -webkit-order: initial; // Reset order to show stacked tabs properly
order: initial; order: initial;
// Presentation // Presentation
-webkit-transform-origin: top; -webkit-transform-origin: top;
transform-origin: top; transform-origin: top;
@if $tab-border-radius != 0 { @if $tab-border-radius != 0 {
border-radius: 0; border-radius: 0;
} }
} }
& > label:not(:first-of-type) { & > label:not(:first-of-type) {
@if $tab-border-style != 0 { @if $tab-border-style != 0 {
border: $tab-border-style; border: $tab-border-style;
border-top: 0; border-top: 0;
} }
} }
& > :checked + label + div { & > :checked + label + div {
height: auto; height: auto;
} }
@if $tab-border-radius != 0 { @if $tab-border-radius != 0 {
& > label + div:last-of-type { & > label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius; border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius; border-bottom-right-radius: $tab-border-radius;
} }
} }
} }
} }
// Responsiveness // Responsiveness
@media screen and (max-width: #{$tab-stacked-breakpoint}) { @media screen and (max-width: #{$tab-stacked-breakpoint}) {
.#{$tab-container-name} { .#{$tab-container-name} {
// Old syntax // Old syntax
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
// New syntax // New syntax
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
& > label { & > label {
-webkit-order: initial; // Reset order to show stacked tabs properly -webkit-order: initial; // Reset order to show stacked tabs properly
order: initial; order: initial;
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed @if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
&:first-of-type { &:first-of-type {
border-top-right-radius: $tab-border-radius; border-top-right-radius: $tab-border-radius;
} }
&:last-of-type { &:last-of-type {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-left-radius: $tab-border-radius; border-bottom-left-radius: $tab-border-radius;
border-bottom-right-radius: $tab-border-radius; border-bottom-right-radius: $tab-border-radius;
} }
} }
} }
& > :checked + label { & > :checked + label {
@if $tab-border-style != 0 { @if $tab-border-style != 0 {
border: $tab-border-style; border: $tab-border-style;
} }
@if $tab-border-radius != 0 { @if $tab-border-radius != 0 {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
} }
& > label + div { & > label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly -webkit-order: initial; // Reset order to show stacked tabs properly
order: initial; order: initial;
@if $tab-border-radius != 0 { @if $tab-border-radius != 0 {
border-radius: 0; border-radius: 0;
} }
} }
& > label:not(:first-of-type) { & > label:not(:first-of-type) {
@if $tab-border-style != 0 { @if $tab-border-style != 0 {
border: $tab-border-style; border: $tab-border-style;
border-top: 0; border-top: 0;
} }
} }
@if $tab-border-radius != 0 { @if $tab-border-radius != 0 {
& > label + div:last-of-type { & > label + div:last-of-type {
border-bottom-left-radius: $tab-border-radius; border-bottom-left-radius: $tab-border-radius;
border-bottom-right-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. $hidden-name: 'hidden' !default; // Class name for hidden elements.
$visually-hidden-name: 'visually-hidden' !default; // Class name for visually 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`) $include-breadcrumbs: true !default; // [Hidden flag] Should breadcrumbs be included? (`true`/`false`)
$breadcrumbs-name: 'breadcrumbs' !default; // Class name for breadcrumbs. $breadcrumbs-name: 'breadcrumbs' !default; // Class name for breadcrumbs.
$include-close-icon: true !default; // [Hidden flag] Should the close icon be included? (`true`/`false`) $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. $close-icon-name: 'close'!default; // Class name for close icon.
// The floats, clearfix and center-block flags are for legacy features. // The floats, clearfix and center-block flags are for legacy features.
$include-floats: false !default; // Should floats be included? (`true`/`false`) $include-floats: false !default; // Should floats be included? (`true`/`false`)
$include-clearfix: false !default; // Should clearfix 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`) $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`). $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. // Check the `_utility_mixins.scss` file to find this module's mixins.
@import 'utility_mixins'; @import 'utility_mixins';
// Hidden elements class. ATTENTION: Uses !important. // Hidden elements class. ATTENTION: Uses !important.
.#{$hidden-name}{ .#{$hidden-name}{
display: none !important; display: none !important;
} }
// Visually hidden elements class. ATTENTION: Uses !important. // Visually hidden elements class. ATTENTION: Uses !important.
.#{$visually-hidden-name} { .#{$visually-hidden-name} {
position: absolute !important; position: absolute !important;
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
margin: -1px !important; margin: -1px !important;
border: 0 !important; border: 0 !important;
padding: 0 !important; padding: 0 !important;
clip: rect(0 0 0 0) !important; clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important; -webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important; clip-path: inset(100%) !important;
overflow: hidden !important; overflow: hidden !important;
} }
@if $include-breadcrumbs { // Turn off if you do not want breadcrumbs to be included. @if $include-breadcrumbs { // Turn off if you do not want breadcrumbs to be included.
// Breadcrumbs // Breadcrumbs
ul.#{$breadcrumbs-name} { ul.#{$breadcrumbs-name} {
// Old syntax // Old syntax
display: -webkit-box; display: -webkit-box;
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
list-style: none; list-style: none;
// Apply margin from styling // Apply margin from styling
@if $breadcrumbs-margin != 0 { @if $breadcrumbs-margin != 0 {
margin: $breadcrumbs-margin; margin: $breadcrumbs-margin;
} }
@else { // Reset margins from list styling @else { // Reset margins from list styling
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
padding: 0; // Remove unnecessary left and right empty space padding: 0; // Remove unnecessary left and right empty space
@if $breadcrumbs-border-style !=0 { @if $breadcrumbs-border-style !=0 {
border: $breadcrumbs-border-style; border: $breadcrumbs-border-style;
} }
@if $breadcrumbs-border-radius != 0 { @if $breadcrumbs-border-radius != 0 {
border-radius: $breadcrumbs-border-radius; border-radius: $breadcrumbs-border-radius;
} }
@if $breadcrumbs-box-shadow != none { @if $breadcrumbs-box-shadow != none {
box-shadow: $breadcrumbs-box-shadow; box-shadow: $breadcrumbs-box-shadow;
} }
li { li {
// Old syntax // Old syntax
-webkit-box-flex: 1; -webkit-box-flex: 1;
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
position: relative; position: relative;
text-align: center; text-align: center;
background: $breadcrumbs-back-color; background: $breadcrumbs-back-color;
height: $breadcrumbs-height; height: $breadcrumbs-height;
line-height: $breadcrumbs-height; line-height: $breadcrumbs-height;
margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width; margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
&:before, &:after { &:before, &:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
width: 0; width: 0;
height: 0; height: 0;
border: 0 solid $breadcrumbs-back-color; border: 0 solid $breadcrumbs-back-color;
border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4); border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4);
} }
&:before { &:before {
left: -($breadcrumbs-height/2); left: -($breadcrumbs-height/2);
border-left-color: transparent; border-left-color: transparent;
} }
&:after { &:after {
left: 100%; left: 100%;
border-color: transparent; border-color: transparent;
border-left-color: $breadcrumbs-back-color; border-left-color: $breadcrumbs-back-color;
} }
&:first-child { &:first-child {
&:before { &:before {
border: 0; border: 0;
} }
} }
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
&:after { &:after {
border: 0; border: 0;
} }
} }
} }
} }
} }
@if $include-close-icon { // Turn off if you do not want to include the close icon @if $include-close-icon { // Turn off if you do not want to include the close icon
// Close icon // Close icon
.#{$close-icon-name}{ .#{$close-icon-name}{
display: inline-block; display: inline-block;
width: $close-icon-size; width: $close-icon-size;
font-family: sans-serif; font-family: sans-serif;
font-size: $close-icon-size; font-size: $close-icon-size;
line-height: 1; line-height: 1;
font-weight: 700; font-weight: 700;
border-radius: 2rem; border-radius: 2rem;
background: rgba($close-icon-back-color,0); background: rgba($close-icon-back-color,0);
vertical-align: top; vertical-align: top;
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: background 0.3s;
@if $style-link-active-state { @if $style-link-active-state {
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background: rgba($close-icon-back-color,1); background: rgba($close-icon-back-color,1);
} }
} }
@else { @else {
&:hover, &:focus { &:hover, &:focus {
background: rgba($close-icon-back-color,1); background: rgba($close-icon-back-color,1);
} }
} }
&:before { &:before {
content: "\00D7"; content: "\00D7";
display: block; display: block;
text-align: center; text-align: center;
} }
} }
} }
// Floats. ATTENTION: Uses !important. // Floats. ATTENTION: Uses !important.
// NOTE: Might be obsolete and not play well with others. // NOTE: Might be obsolete and not play well with others.
@if $include-floats { @if $include-floats {
.#{$float-prefix}-left { .#{$float-prefix}-left {
float: left !important; float: left !important;
} }
.#{$float-prefix}-right { .#{$float-prefix}-right {
float: right !important; float: right !important;
} }
} }
// Clearfix mixin. ATTENTION: Uses !important. // Clearfix mixin. ATTENTION: Uses !important.
// NOTE: Might be obsolete and not play well with others. // NOTE: Might be obsolete and not play well with others.
@if $include-clearfix { @if $include-clearfix {
.#{$clearfix-name} { .#{$clearfix-name} {
&:before, &:after { &:before, &:after {
content: ' ' !important; content: ' ' !important;
display: table !important; display: table !important;
clear: both !important; clear: both !important;
} }
} }
} }
// Center block. ATTENTION: Uses !important. // Center block. ATTENTION: Uses !important.
@if $include-center-block { @if $include-center-block {
.#{$center-block-name} { .#{$center-block-name} {
display: block !important; display: block !important;
margin-left: auto !important; margin-left: auto !important;
margin-right: auto !important; margin-right: auto !important;
} }
} }

340
src/mini/_utility_mixins.scss
View file

@ -4,27 +4,27 @@
// Variables: // Variables:
// - $border-generic-name : The name of the class used for the generic border. // - $border-generic-name : The name of the class used for the generic border.
@mixin make-border-generic ($border-generic-name) { @mixin make-border-generic ($border-generic-name) {
.#{$border-generic-name} { .#{$border-generic-name} {
border: 1px solid rgba(0,0,0, 0.25) !important; border: 1px solid rgba(0,0,0, 0.25) !important;
} }
} }
// Generic radial border mixin. ATTENTION: Uses !important. // Generic radial border mixin. ATTENTION: Uses !important.
// Variables: // Variables:
// - $border-radial-name : The name of the class used for the radial border. // - $border-radial-name : The name of the class used for the radial border.
// - $border-radial-radius : The border radius 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) { @mixin make-border-radial-style ($border-radial-name, $border-radial-radius) {
.#{$border-radial-name} { .#{$border-radial-name} {
border-radius: $border-radial-radius !important; border-radius: $border-radial-radius !important;
} }
} }
// Generic box shadow mixin. ATTENTION: Uses !important. // Generic box shadow mixin. ATTENTION: Uses !important.
// Variables: // Variables:
// - $box-shadow-name : The name of the class used for the generic box shadow. // - $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. // - $box-shadow-value : The box shadow value of the generic box shadow.
@mixin make-box-shadow-generic ($box-shadow-name, $box-shadow-value) { @mixin make-box-shadow-generic ($box-shadow-name, $box-shadow-value) {
.#{$box-shadow-name} { .#{$box-shadow-name} {
box-shadow: $box-shadow-value !important; box-shadow: $box-shadow-value !important;
} }
} }
// Responsive margin mixin. ATTENTION: Uses !important. // Responsive margin mixin. ATTENTION: Uses !important.
// Variables: // 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-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`. // - $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, @mixin make-margin-responsive ($margin-name, $margin-small-value,
$margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px, $margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
$margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false, $margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
$margin-small-breakpoint : 480px, $margin-extra-small-value : 0) { $margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
@if $margin-use-four-step-grid { @if $margin-use-four-step-grid {
.#{$margin-name} { .#{$margin-name} {
margin: $margin-extra-small-value !important; margin: $margin-extra-small-value !important;
} }
@media screen and (min-width: #{$margin-small-breakpoint}) { @media screen and (min-width: #{$margin-small-breakpoint}) {
margin: $margin-small-value !important; margin: $margin-small-value !important;
} }
} }
@else { @else {
.#{$margin-name} { .#{$margin-name} {
margin: $margin-small-value !important; margin: $margin-small-value !important;
} }
} }
@media screen and (min-width: #{$margin-medium-breakpoint}) { @media screen and (min-width: #{$margin-medium-breakpoint}) {
.#{$margin-name} { .#{$margin-name} {
margin: $margin-medium-value !important; margin: $margin-medium-value !important;
} }
} }
@media screen and (min-width: #{$margin-large-breakpoint}) { @media screen and (min-width: #{$margin-large-breakpoint}) {
.#{$margin-name} { .#{$margin-name} {
margin: $margin-large-value !important; margin: $margin-large-value !important;
} }
} }
} }
// Responsive padding mixin. ATTENTION: Uses !important. // Responsive padding mixin. ATTENTION: Uses !important.
// Variables: // 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-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`. // - $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, @mixin make-padding-responsive ($padding-name, $padding-small-value,
$padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px, $padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
$padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false, $padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
$padding-small-breakpoint : 480px, $padding-extra-small-value : 0) { $padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
@if $padding-use-four-step-grid{ @if $padding-use-four-step-grid{
.#{$padding-name} { .#{$padding-name} {
padding: $padding-extra-small-value !important; padding: $padding-extra-small-value !important;
} }
@media screen and (min-width: #{$padding-small-breakpoint}) { @media screen and (min-width: #{$padding-small-breakpoint}) {
padding: $padding-small-value !important; padding: $padding-small-value !important;
} }
} }
@else { @else {
.#{$padding-name} { .#{$padding-name} {
padding: $padding-small-value !important; padding: $padding-small-value !important;
} }
} }
@media screen and (min-width: #{$padding-medium-breakpoint}) { @media screen and (min-width: #{$padding-medium-breakpoint}) {
.#{$padding-name} { .#{$padding-name} {
padding: $padding-medium-value !important; padding: $padding-medium-value !important;
} }
} }
@media screen and (min-width: #{$padding-large-breakpoint}) { @media screen and (min-width: #{$padding-large-breakpoint}) {
.#{$padding-name} { .#{$padding-name} {
padding: $padding-large-value !important; padding: $padding-large-value !important;
} }
} }
} }
// Responsive hidden elements mixin. ATTENTION: Uses !important. // Responsive hidden elements mixin. ATTENTION: Uses !important.
// Variables: // 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-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'. // - $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, @mixin make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint : 768px,
$hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md', $hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
$hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false, $hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
$hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') { $hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
@if $hidden-use-four-step-grid { @if $hidden-use-four-step-grid {
@media screen and (max-width: #{$hidden-small-breakpoint}-1px) { @media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-extra-small-suffix} { .#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
display: none !important; display: none !important;
} }
} }
@media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) { @media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} { .#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none !important; display: none !important;
} }
} }
} }
@else { @else {
@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) { @media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} { .#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none !important; display: none !important;
} }
} }
@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) { @media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
.#{$hidden-prefix}-#{$hidden-medium-suffix} { .#{$hidden-prefix}-#{$hidden-medium-suffix} {
display: none !important; display: none !important;
} }
} }
@media screen and (min-width: #{$hidden-large-breakpoint}) { @media screen and (min-width: #{$hidden-large-breakpoint}) {
.#{$hidden-prefix}-#{$hidden-large-suffix} { .#{$hidden-prefix}-#{$hidden-large-suffix} {
display: none !important; display: none !important;
} }
} }
} }
} }
// Responsive visually hidden elements mixin. ATTENTION: Uses !important. // Responsive visually hidden elements mixin. ATTENTION: Uses !important.
// Variables: // 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-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'. // - $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, @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-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-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
$visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') { $visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
@if $visually-hidden-use-four-step-grid { @if $visually-hidden-use-four-step-grid {
@media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) { @media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} { .#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
position: absolute !important; position: absolute !important;
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
margin: -1px !important; margin: -1px !important;
border: 0 !important; border: 0 !important;
padding: 0 !important; padding: 0 !important;
clip: rect(0 0 0 0) !important; clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important; -webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important; clip-path: inset(100%) !important;
overflow: hidden !important; overflow: hidden !important;
} }
} }
@media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) { @media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} { .#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important; position: absolute !important;
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
margin: -1px !important; margin: -1px !important;
border: 0 !important; border: 0 !important;
padding: 0 !important; padding: 0 !important;
clip: rect(0 0 0 0) !important; clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important; -webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important; clip-path: inset(100%) !important;
overflow: hidden !important; overflow: hidden !important;
} }
} }
} }
@else { @else {
@media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) { @media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} { .#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important; position: absolute !important;
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
margin: -1px !important; margin: -1px !important;
border: 0 !important; border: 0 !important;
padding: 0 !important; padding: 0 !important;
clip: rect(0 0 0 0) !important; clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important; -webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important; clip-path: inset(100%) !important;
overflow: hidden !important; overflow: hidden !important;
} }
} }
@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) { @media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} { .#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
position: absolute !important; position: absolute !important;
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
margin: -1px !important; margin: -1px !important;
border: 0 !important; border: 0 !important;
padding: 0 !important; padding: 0 !important;
clip: rect(0 0 0 0) !important; clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important; -webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important; clip-path: inset(100%) !important;
overflow: hidden !important; overflow: hidden !important;
} }
} }
@media screen and (min-width: #{$visually-hidden-large-breakpoint}) { @media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} { .#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
position: absolute !important; position: absolute !important;
width: 1px !important; width: 1px !important;
height: 1px !important; height: 1px !important;
margin: -1px !important; margin: -1px !important;
border: 0 !important; border: 0 !important;
padding: 0 !important; padding: 0 !important;
clip: rect(0 0 0 0) !important; clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important; -webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important; clip-path: inset(100%) !important;
overflow: hidden !important; overflow: hidden !important;
} }
} }
} }
} }