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

Tried and tested flavor generation

Browse source
This commit is contained in:
Angelos Chalaris 2018-05-26 13:46:26 +03:00
parent a361f69240
commit 4c631cf4d4
27 changed files with 3896 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -11,3 +11,5 @@ docs/v3/index-splash-o2\.jpg
docs/v3/responsive-original\.svg docs/v3/responsive-original\.svg
docs/v3/index-splash_original\.jpg docs/v3/index-splash_original\.jpg
node_modules

3
docs/build-docs.js
View file

@ -207,6 +207,9 @@ var customizationStart = `<!DOCTYPE html><html lang="en"><head>
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png"> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<script src="./jszip.min.js"></script>
<script src="./FileSaver.min.js"></script>
<script src="./sass.js"></script>
</head><body>`; </head><body>`;
var customizationEnd = `</body></html>`; var customizationEnd = `</body></html>`;

127
docs/doc-fragments/buildYourOwnFlavor.js
View file

@ -20,7 +20,7 @@ module.exports = {
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="boldFontWeight">Heading font weight:</label> <label for="boldFontWeight">Heading font weight:</label>
<input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="500" min="100" step="100" max="900" autocomplete="off"/> <input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="700" min="100" step="100" max="900" autocomplete="off"/>
<p><small>Font weight for headings (400 is normal, 700 is bold)</small></p> <p><small>Font weight for headings (400 is normal, 700 is bold)</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
@ -205,12 +205,12 @@ module.exports = {
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="cardSmallWidth">Card small width (px):</label> <label for="cardSmallWidth">Card small width (px):</label>
<input type="number" id="cardSmallWidth" style="width:calc(100% - 0.5rem);" value="320" min="1" autocomplete="off"/> <input type="number" id="cardSmallWidth" style="width:calc(100% - 0.5rem);" value="240" min="1" autocomplete="off"/>
<p><small>Width of small cards, in pixels</small></p> <p><small>Width of small cards, in pixels</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="cardLargeWidth">Card large width (px):</label> <label for="cardLargeWidth">Card large width (px):</label>
<input type="number" id="cardLargeWidth" style="width:calc(100% - 0.5rem);" value="320" min="1" autocomplete="off"/> <input type="number" id="cardLargeWidth" style="width:calc(100% - 0.5rem);" value="480" min="1" autocomplete="off"/>
<p><small>Width of large cards, in pixels</small></p> <p><small>Width of large cards, in pixels</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
@ -438,14 +438,14 @@ module.exports = {
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="buttonInverseBackColor">Button inverse variant background color:</label> <label for="buttonInverseBackColor">Button inverse variant background color:</label>
<input type="text" id="buttonInverseBackColor" value="#111" autocomplete="off"/> <input type="text" id="buttonInverseBackColor" value="#212121" autocomplete="off"/>
<span id="buttonInverseBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#111; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span> <span id="buttonInverseBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#212121; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
<p style="margin-top: -1rem"><small>Background color for inverse button variant</small></p> <p style="margin-top: -1rem"><small>Background color for inverse button variant</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="buttonInverseHoverBackColor">Button inverse variant background color (hover):</label> <label for="buttonInverseHoverBackColor">Button inverse variant background color (hover):</label>
<input type="text" id="buttonInverseHoverBackColor" value="#212121" autocomplete="off"/> <input type="text" id="buttonInverseHoverBackColor" value="#111" autocomplete="off"/>
<span id="buttonInverseHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#212121; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span> <span id="buttonInverseHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#111; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
<p style="margin-top: -1rem"><small>Background color for inverse button variant on hover</small></p> <p style="margin-top: -1rem"><small>Background color for inverse button variant on hover</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
@ -639,7 +639,7 @@ module.exports = {
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="mobileLabelFontWeight">Mobile card label font weight:</label> <label for="mobileLabelFontWeight">Mobile card label font weight:</label>
<input type="number" id="mobileLabelFontWeight" style="width:calc(100% - 0.5rem);" value="16" min="1" autocomplete="off"/> <input type="number" id="mobileLabelFontWeight" style="width:calc(100% - 0.5rem);" value="600" min="1" autocomplete="off"/>
<p><small>Font weight for tables' mobile card labels (400 is normal, 700 is bold)</small></p> <p><small>Font weight for tables' mobile card labels (400 is normal, 700 is bold)</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
@ -751,8 +751,8 @@ module.exports = {
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="toastBackColor">Toast background color:</label> <label for="toastBackColor">Toast background color:</label>
<input type="text" id="toastBackColor" value="#212121" autocomplete="off"/> <input type="text" id="toastBackColor" value="#424242" autocomplete="off"/>
<span id="toastBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#212121; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span> <span id="toastBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#424242; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
<p style="margin-top: -1rem"><small>Background color for toasts</small></p> <p style="margin-top: -1rem"><small>Background color for toasts</small></p>
</div> </div>
</fieldset> </fieldset>
@ -1366,8 +1366,8 @@ module.exports = {
flavorFile +='// structured like the flavor description below, will be included in your final CSS file.\\n'; flavorFile +='// structured like the flavor description below, will be included in your final CSS file.\\n';
flavorFile +='/*\\n'; flavorFile +='/*\\n';
flavorFile +=' Flavor name: Custom (mini-custom)\\n'; flavorFile +=' Flavor name: Custom (mini-custom)\\n';
flavorFile +=' Author: Undefined \\n'; flavorFile +=' Generated online - https://minicss.org/flavors\\n';
flavorFile +=' mini.css version: v3.0.0\\n'; flavorFile +=' mini.css version: ${version}\\n';
flavorFile +='*/\\n'; flavorFile +='*/\\n';
flavorFile +='$base-root-font-size: '+flavorData.core.baseRootFontSize+'px; // Root font sizing for all elements (\`px\` only)\\n'; flavorFile +='$base-root-font-size: '+flavorData.core.baseRootFontSize+'px; // Root font sizing for all elements (\`px\` only)\\n';
flavorFile +='$base-line-height: '+flavorData.core.baseLineHeight+'; // Line height for most elements\\n'; flavorFile +='$base-line-height: '+flavorData.core.baseLineHeight+'; // Line height for most elements\\n';
@ -1416,6 +1416,9 @@ module.exports = {
flavorFile +='\\n'; flavorFile +='\\n';
flavorFile +='@import \\'../mini/layout\\';\\n'; flavorFile +='@import \\'../mini/layout\\';\\n';
flavorFile +='\\n'; flavorFile +='\\n';
flavorFile +='/*\\n';
flavorFile +=' Custom elements for card elements.\\n';
flavorFile +='*/\\n';
flavorFile +='$card-small-name: \\'small\\'; // Class name for small cards.\\n'; flavorFile +='$card-small-name: \\'small\\'; // Class name for small cards.\\n';
flavorFile +='$card-small-width: '+flavorData.layout.cardSmallWidth+'px; // Width for small cards.\\n'; flavorFile +='$card-small-width: '+flavorData.layout.cardSmallWidth+'px; // Width for small cards.\\n';
flavorFile +='@include make-card-alt-size ($card-small-name, $card-small-width);\\n'; flavorFile +='@include make-card-alt-size ($card-small-name, $card-small-width);\\n';
@ -1467,8 +1470,11 @@ module.exports = {
flavorFile +='$button-hover-border-color: '+flavorData.inputControl.buttonHoverBorderColor+'; // Border color for buttons (hover).\\n'; flavorFile +='$button-hover-border-color: '+flavorData.inputControl.buttonHoverBorderColor+'; // Border color for buttons (hover).\\n';
flavorFile +='$button-group-border-color: '+flavorData.inputControl.buttonGroupBorderColor+'; // Border color for button groups.\\n'; flavorFile +='$button-group-border-color: '+flavorData.inputControl.buttonGroupBorderColor+'; // Border color for button groups.\\n';
flavorFile +='\\n'; flavorFile +='\\n';
flavorFile +='@import \\'../mini/inputControl\\';\\n'; flavorFile +='@import \\'../mini/input_control\\';\\n';
flavorFile +='\\n'; flavorFile +='\\n';
flavorFile +='/*\\n';
flavorFile +=' Custom elements for forms and input elements.\\n';
flavorFile +='*/\\n';
flavorFile +='$button-primary-name: \\'primary\\'; // Class name for primary button color variant.\\n'; flavorFile +='$button-primary-name: \\'primary\\'; // Class name for primary button color variant.\\n';
flavorFile +='$button-primary-back-color: '+flavorData.inputControl.buttonPrimaryBackColor+';// Background color for primary button color variant.\\n'; flavorFile +='$button-primary-back-color: '+flavorData.inputControl.buttonPrimaryBackColor+';// Background color for primary button color variant.\\n';
flavorFile +='$button-primary-hover-back-color: '+flavorData.inputControl.buttonPrimaryHoverBackColor+';// Background color for primary button color variant (hover).\\n'; flavorFile +='$button-primary-hover-back-color: '+flavorData.inputControl.buttonPrimaryHoverBackColor+';// Background color for primary button color variant (hover).\\n';
@ -1514,7 +1520,7 @@ module.exports = {
flavorFile +='$nav-hover-back-color: '+flavorData.navigation.navHoverBackColor+'; // Background color for the nav element (hover).\\n'; flavorFile +='$nav-hover-back-color: '+flavorData.navigation.navHoverBackColor+'; // Background color for the nav element (hover).\\n';
flavorFile +='$nav-fore-color: '+flavorData.navigation.navForeColor+'; // Text color for the nav element.\\n'; flavorFile +='$nav-fore-color: '+flavorData.navigation.navForeColor+'; // Text color for the nav element.\\n';
flavorFile +='$nav-border-color: '+flavorData.navigation.navBorderColor+'; // Border color for the nav element.\\n'; flavorFile +='$nav-border-color: '+flavorData.navigation.navBorderColor+'; // Border color for the nav element.\\n';
flavorFile +='$nav-link-color: '+flavorData.navigation.navLinkColor+'; / Color for link in the nav element.\\n'; flavorFile +='$nav-link-color: '+flavorData.navigation.navLinkColor+'; // Color for link in the nav element.\\n';
flavorFile +='$footer-fore-color: '+flavorData.navigation.footerForeColor+'; // Text color for the footer element.\\n'; flavorFile +='$footer-fore-color: '+flavorData.navigation.footerForeColor+'; // Text color for the footer element.\\n';
flavorFile +='$footer-back-color: '+flavorData.navigation.footerBackColor+'; // Background color for footer nav element.\\n'; flavorFile +='$footer-back-color: '+flavorData.navigation.footerBackColor+'; // Background color for footer nav element.\\n';
flavorFile +='$footer-border-color: '+flavorData.navigation.footerBorderColor+'; // Border color for the footer element.\\n'; flavorFile +='$footer-border-color: '+flavorData.navigation.footerBorderColor+'; // Border color for the footer element.\\n';
@ -1564,8 +1570,8 @@ module.exports = {
flavorFile +='$modal-overlay-color: '+flavorData.contextual.modalOverlayColor+'; // Overlay color for modal dialog component\\n'; flavorFile +='$modal-overlay-color: '+flavorData.contextual.modalOverlayColor+'; // Overlay color for modal dialog component\\n';
flavorFile +='$modal-close-color: '+flavorData.contextual.modalCloseColor+'; // Text color for the close button of the modal dialog component\\n'; flavorFile +='$modal-close-color: '+flavorData.contextual.modalCloseColor+'; // Text color for the close button of the modal dialog component\\n';
flavorFile +='$modal-close-hover-back-color: '+flavorData.contextual.modalCloseHoverBackColor+'; // Background color for the close button of the modal dialog component (on hover/focus)\\n'; flavorFile +='$modal-close-hover-back-color: '+flavorData.contextual.modalCloseHoverBackColor+'; // Background color for the close button of the modal dialog component (on hover/focus)\\n';
flavorFile +='$modal-close-size: '+flavorData.contextual.modalCloseSize+'; // Font size for the close button of the modal dialog component\\n'; flavorFile +='$modal-close-size: '+flavorData.contextual.modalCloseSize+'rem; // Font size for the close button of the modal dialog component\\n';
flavorFile +='$collapse-label-height: '+flavorData.contextual.collapseLabelHeight+'; // Height for the labels in the collapse component\\n'; flavorFile +='$collapse-label-height: '+flavorData.contextual.collapseLabelHeight+'rem; // Height for the labels in the collapse component\\n';
flavorFile +='$collapse-content-max-height: '+flavorData.contextual.collapseContentMaxHeight+'px; // Max height for the content panes in the collapse component\\n'; flavorFile +='$collapse-content-max-height: '+flavorData.contextual.collapseContentMaxHeight+'px; // Max height for the content panes in the collapse component\\n';
flavorFile +='$collapse-label-back-color: '+flavorData.contextual.collapseLabelBackColor+'; // Background color for labels in the collapse component\\n'; flavorFile +='$collapse-label-back-color: '+flavorData.contextual.collapseLabelBackColor+'; // Background color for labels in the collapse component\\n';
flavorFile +='$collapse-label-fore-color: '+flavorData.contextual.collapseLabelForeColor+'; // Text color for labels in the collapse component\\n'; flavorFile +='$collapse-label-fore-color: '+flavorData.contextual.collapseLabelForeColor+'; // Text color for labels in the collapse component\\n';
@ -1576,6 +1582,10 @@ module.exports = {
flavorFile +='$collapse-content-back-color: '+flavorData.contextual.collapseContentBackColor+'; // Background color for collapse component\\'s content panes\\n'; flavorFile +='$collapse-content-back-color: '+flavorData.contextual.collapseContentBackColor+'; // Background color for collapse component\\'s content panes\\n';
flavorFile +='\\n'; flavorFile +='\\n';
flavorFile +='@import \\'../mini/contextual\\';\\n'; flavorFile +='@import \\'../mini/contextual\\';\\n';
flavorFile +='\\n';
flavorFile +='/*\\n';
flavorFile +=' Custom elements for contextual background elements, toasts and tooltips.\\n';
flavorFile +='*/\\n';
flavorFile +='$mark-secondary-name: \\'secondary\\'; // Class name for secondary <mark> color variant.\\n'; flavorFile +='$mark-secondary-name: \\'secondary\\'; // Class name for secondary <mark> color variant.\\n';
flavorFile +='$mark-secondary-back-color: '+flavorData.contextual.markSecondaryBackColor+'; // Background color for secondary <mark> color variant.\\n'; flavorFile +='$mark-secondary-back-color: '+flavorData.contextual.markSecondaryBackColor+'; // Background color for secondary <mark> color variant.\\n';
flavorFile +='@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);\\n'; flavorFile +='@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);\\n';
@ -1592,7 +1602,7 @@ module.exports = {
} }
if(flavorData.progress.enabled){ if(flavorData.progress.enabled){
flavorFile +='$progress-back-color: '+flavorData.progress.progressBackColor+'; // Background color of <progress>.\\n'; flavorFile +='$progress-back-color: '+flavorData.progress.progressBackColor+'; // Background color of <progress>.\\n';
flavorFile +='$progress-fore-color '+flavorData.progress.progressForeColor+'; // Foreground color of <progress>.\\n'; flavorFile +='$progress-fore-color: '+flavorData.progress.progressForeColor+'; // Foreground color of <progress>.\\n';
flavorFile +='$progress-height: '+flavorData.progress.progressHeight+'rem; // Height of <progress>.\\n'; flavorFile +='$progress-height: '+flavorData.progress.progressHeight+'rem; // Height of <progress>.\\n';
flavorFile +='$progress-max-value: '+flavorData.progress.progressMaxValue+'; // Arithmetic max value of <progress> - use integer values.\\n'; flavorFile +='$progress-max-value: '+flavorData.progress.progressMaxValue+'; // Arithmetic max value of <progress> - use integer values.\\n';
flavorFile +='$progress-inline-width: '+flavorData.progress.progressInlineWidth+'%; // Width of inline <progress> elements.\\n'; flavorFile +='$progress-inline-width: '+flavorData.progress.progressInlineWidth+'%; // Width of inline <progress> elements.\\n';
@ -1603,6 +1613,9 @@ module.exports = {
flavorFile +='\\n'; flavorFile +='\\n';
flavorFile +='@import \\'../mini/progress\\';\\n'; flavorFile +='@import \\'../mini/progress\\';\\n';
flavorFile +='\\n'; flavorFile +='\\n';
flavorFile +='/*\\n';
flavorFile +=' Custom elements for progress bars and spinners.\\n';
flavorFile +='*/\\n';
flavorFile +='$progress-primary-name: \\'primary\\'; // Class name for primary <progress> color variant.\\n'; flavorFile +='$progress-primary-name: \\'primary\\'; // Class name for primary <progress> color variant.\\n';
flavorFile +='$progress-primary-fore-color: '+flavorData.progress.progressPrimaryForeColor+'; // Foreground color for primary <progress> color variant.\\n'; flavorFile +='$progress-primary-fore-color: '+flavorData.progress.progressPrimaryForeColor+'; // Foreground color for primary <progress> color variant.\\n';
flavorFile +='@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);\\n'; flavorFile +='@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);\\n';
@ -1641,7 +1654,85 @@ module.exports = {
flavorFile +='\\n'; flavorFile +='\\n';
} }
console.log(flavorFile); var base = './';
var directory = '../';
var files = [
'mini/_core.scss',
'mini/_layout.scss',
'mini/_layout_mixins.scss',
'mini/_input_control.scss',
'mini/_input_control_mixins.scss',
'mini/_navigation.scss',
'mini/_table.scss',
'mini/_contextual.scss',
'mini/_contextual_mixins.scss',
'mini/_progress.scss',
'mini/_progress_mixins.scss',
'mini/_icon.scss',
'mini/_utility.scss',
];
var sass = new Sass();
sass.options({style: Sass.style.expanded, precision: -1, comments: false, indent: ' ', linefeed: '\\n'});
sass.preloadFiles(base, directory, files, function filesPreloaded() {
console.log('Files loaded...');
sass.writeFile('flavors/flavor.scss', flavorFile, function filesWritten(r1){
console.log('Flavor file created...');
sass.compileFile('flavors/flavor.scss', function expandedCompiled(r2){
let expandedCSS = r2.text;
console.log('Expanded CSS compiled...');
sass.compileFile('flavors/flavor.scss', {style: Sass.style.compressed}, function compressedCompiled(r3){
let compressedCSS = r3.text;
console.log('Compressed CSS compiled...');
sass.readFile([
'../mini/_core.scss',
'../mini/_layout.scss',
'../mini/_layout_mixins.scss',
'../mini/_input_control.scss',
'../mini/_input_control_mixins.scss',
'../mini/_navigation.scss',
'../mini/_table.scss',
'../mini/_contextual.scss',
'../mini/_contextual_mixins.scss',
'../mini/_progress.scss',
'../mini/_progress_mixins.scss',
'../mini/_icon.scss',
'../mini/_utility.scss'
], function filesRead(r4){
console.log('Read loaded files...');
var zip = new JSZip();
var flavorsFolder = zip.folder('flavors');
var miniFolder = zip.folder('mini');
zip.file('mini-custom.css', expandedCSS);
zip.file('mini-custom.min.css', compressedCSS);
flavorsFolder.file('mini-custom.scss', flavorFile);
miniFolder.file('_core.scss', r4['../mini/_core.scss']);
miniFolder.file('_layout.scss', r4['../mini/_layout.scss']);
miniFolder.file('_layout_mixins.scss', r4['../mini/_layout_mixins.scss']);
miniFolder.file('_input_control.scss', r4['../mini/_input_control.scss']);
miniFolder.file('_input_control_mixins.scss', r4['../mini/_input_control_mixins.scss']);
miniFolder.file('_navigation.scss', r4['../mini/_navigation.scss']);
miniFolder.file('_table.scss', r4['../mini/_table.scss']);
miniFolder.file('_contextual.scss', r4['../mini/_contextual.scss']);
miniFolder.file('_contextual_mixins.scss', r4['../mini/_contextual_mixins.scss']);
miniFolder.file('_progress.scss', r4['../mini/_progress.scss']);
miniFolder.file('_progress_mixins.scss', r4['../mini/_progress_mixins.scss']);
miniFolder.file('_icon.scss', r4['../mini/_icon.scss']);
miniFolder.file('_utility.scss', r4['../mini/_utility.scss']);
console.log('Files added to zip...');
zip.generateAsync({type:"blob"}).then(function(content) {
saveAs(content, "mini-custom.zip");
});
});
});
});
});
});
// var zip = new JSZip();
// zip.file("flavor.sass", flavorFile);
// zip.generateAsync({type:"blob"}).then(function(content) {
// saveAs(content, "mini.zip");
// });
} }
</script>`, </script>`,
sections: [ sections: [

9
docs/v3/DEVLOG.md
View file

@ -360,3 +360,12 @@
## 20180520 ## 20180520
- Finished Sass variable generation for `input_control` module in flavors page. - Finished Sass variable generation for `input_control` module in flavors page.
- Finished Sass variable generation for `contextual` module in flavors page. - Finished Sass variable generation for `contextual` module in flavors page.
## 20180526
- Added `jszip`, `sass.js` and `file-saver` to `package.json`.
- Used above tools and some code to finish up the `flavors` page generation process.
- *TODO* Add links to useful tools.
- *TODO* Add flavors.
- *TODO* Auto-compile SCSS to CSS when generating, copy all `src` to the `docs`.
- *TODO* Rebase and release.

2
docs/v3/FileSaver.min.js vendored Normal file
View file

@ -0,0 +1,2 @@
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs=saveAs||function(e){"use strict";if(typeof e==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var t=e.document,n=function(){return e.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),o="download"in r,a=function(e){var t=new MouseEvent("click");e.dispatchEvent(t)},i=/constructor/i.test(e.HTMLElement)||e.safari,f=/CriOS\/[\d]+/.test(navigator.userAgent),u=function(t){(e.setImmediate||e.setTimeout)(function(){throw t},0)},s="application/octet-stream",d=1e3*40,c=function(e){var t=function(){if(typeof e==="string"){n().revokeObjectURL(e)}else{e.remove()}};setTimeout(t,d)},l=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var o=e["on"+t[r]];if(typeof o==="function"){try{o.call(e,n||e)}catch(a){u(a)}}}},p=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){return new Blob([String.fromCharCode(65279),e],{type:e.type})}return e},v=function(t,u,d){if(!d){t=p(t)}var v=this,w=t.type,m=w===s,y,h=function(){l(v,"writestart progress write writeend".split(" "))},S=function(){if((f||m&&i)&&e.FileReader){var r=new FileReader;r.onloadend=function(){var t=f?r.result:r.result.replace(/^data:[^;]*;/,"data:attachment/file;");var n=e.open(t,"_blank");if(!n)e.location.href=t;t=undefined;v.readyState=v.DONE;h()};r.readAsDataURL(t);v.readyState=v.INIT;return}if(!y){y=n().createObjectURL(t)}if(m){e.location.href=y}else{var o=e.open(y,"_blank");if(!o){e.location.href=y}}v.readyState=v.DONE;h();c(y)};v.readyState=v.INIT;if(o){y=n().createObjectURL(t);setTimeout(function(){r.href=y;r.download=u;a(r);h();c(y);v.readyState=v.DONE});return}S()},w=v.prototype,m=function(e,t,n){return new v(e,t||e.name||"download",n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,n){t=t||e.name||"download";if(!n){e=p(e)}return navigator.msSaveOrOpenBlob(e,t)}}w.abort=function(){};w.readyState=w.INIT=0;w.WRITING=1;w.DONE=2;w.error=w.onwritestart=w.onprogress=w.onwrite=w.onabort=w.onerror=w.onwriteend=null;return m}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define("FileSaver.js",function(){return saveAs})}

130
docs/v3/flavors.html
View file

@ -10,6 +10,9 @@
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png"> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<script src="./jszip.min.js"></script>
<script src="./FileSaver.min.js"></script>
<script src="./sass.js"></script>
</head><body><div id="root"><header class="row"> </head><body><div id="root"><header class="row">
<span class="logo col-sm-3 col-md">mini.css</span> <span class="logo col-sm-3 col-md">mini.css</span>
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank"> <a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
@ -44,7 +47,7 @@
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="boldFontWeight">Heading font weight:</label> <label for="boldFontWeight">Heading font weight:</label>
<input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="500" min="100" step="100" max="900" autocomplete="off"/> <input type="number" id="boldFontWeight" style="width:calc(100% - 0.5rem);" value="700" min="100" step="100" max="900" autocomplete="off"/>
<p><small>Font weight for headings (400 is normal, 700 is bold)</small></p> <p><small>Font weight for headings (400 is normal, 700 is bold)</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
@ -229,12 +232,12 @@
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="cardSmallWidth">Card small width (px):</label> <label for="cardSmallWidth">Card small width (px):</label>
<input type="number" id="cardSmallWidth" style="width:calc(100% - 0.5rem);" value="320" min="1" autocomplete="off"/> <input type="number" id="cardSmallWidth" style="width:calc(100% - 0.5rem);" value="240" min="1" autocomplete="off"/>
<p><small>Width of small cards, in pixels</small></p> <p><small>Width of small cards, in pixels</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="cardLargeWidth">Card large width (px):</label> <label for="cardLargeWidth">Card large width (px):</label>
<input type="number" id="cardLargeWidth" style="width:calc(100% - 0.5rem);" value="320" min="1" autocomplete="off"/> <input type="number" id="cardLargeWidth" style="width:calc(100% - 0.5rem);" value="480" min="1" autocomplete="off"/>
<p><small>Width of large cards, in pixels</small></p> <p><small>Width of large cards, in pixels</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
@ -462,14 +465,14 @@
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="buttonInverseBackColor">Button inverse variant background color:</label> <label for="buttonInverseBackColor">Button inverse variant background color:</label>
<input type="text" id="buttonInverseBackColor" value="#111" autocomplete="off"/> <input type="text" id="buttonInverseBackColor" value="#212121" autocomplete="off"/>
<span id="buttonInverseBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#111; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span> <span id="buttonInverseBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#212121; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
<p style="margin-top: -1rem"><small>Background color for inverse button variant</small></p> <p style="margin-top: -1rem"><small>Background color for inverse button variant</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="buttonInverseHoverBackColor">Button inverse variant background color (hover):</label> <label for="buttonInverseHoverBackColor">Button inverse variant background color (hover):</label>
<input type="text" id="buttonInverseHoverBackColor" value="#212121" autocomplete="off"/> <input type="text" id="buttonInverseHoverBackColor" value="#111" autocomplete="off"/>
<span id="buttonInverseHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#212121; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span> <span id="buttonInverseHoverBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#111; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
<p style="margin-top: -1rem"><small>Background color for inverse button variant on hover</small></p> <p style="margin-top: -1rem"><small>Background color for inverse button variant on hover</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
@ -663,7 +666,7 @@
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="mobileLabelFontWeight">Mobile card label font weight:</label> <label for="mobileLabelFontWeight">Mobile card label font weight:</label>
<input type="number" id="mobileLabelFontWeight" style="width:calc(100% - 0.5rem);" value="16" min="1" autocomplete="off"/> <input type="number" id="mobileLabelFontWeight" style="width:calc(100% - 0.5rem);" value="600" min="1" autocomplete="off"/>
<p><small>Font weight for tables' mobile card labels (400 is normal, 700 is bold)</small></p> <p><small>Font weight for tables' mobile card labels (400 is normal, 700 is bold)</small></p>
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
@ -775,8 +778,8 @@
</div> </div>
<div class="input-group vertical"> <div class="input-group vertical">
<label for="toastBackColor">Toast background color:</label> <label for="toastBackColor">Toast background color:</label>
<input type="text" id="toastBackColor" value="#212121" autocomplete="off"/> <input type="text" id="toastBackColor" value="#424242" autocomplete="off"/>
<span id="toastBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#212121; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span> <span id="toastBackColorPreview" class="circular bordered" style="width: 24px; height: 24px; background:#424242; display: inline-block; vertical-align:middle; position: relative; top: -2.25rem; right: calc(-100% + 2.5rem); box-sizing: border-box"></span>
<p style="margin-top: -1rem"><small>Background color for toasts</small></p> <p style="margin-top: -1rem"><small>Background color for toasts</small></p>
</div> </div>
</fieldset> </fieldset>
@ -1390,8 +1393,8 @@
flavorFile +='// structured like the flavor description below, will be included in your final CSS file.\n'; flavorFile +='// structured like the flavor description below, will be included in your final CSS file.\n';
flavorFile +='/*\n'; flavorFile +='/*\n';
flavorFile +=' Flavor name: Custom (mini-custom)\n'; flavorFile +=' Flavor name: Custom (mini-custom)\n';
flavorFile +=' Author: Undefined \n'; flavorFile +=' Generated online - https://minicss.org/flavors\n';
flavorFile +=' mini.css version: v3.0.0\n'; flavorFile +=' mini.css version: v3.0.0-alpha.3\n';
flavorFile +='*/\n'; flavorFile +='*/\n';
flavorFile +='$base-root-font-size: '+flavorData.core.baseRootFontSize+'px; // Root font sizing for all elements (`px` only)\n'; flavorFile +='$base-root-font-size: '+flavorData.core.baseRootFontSize+'px; // Root font sizing for all elements (`px` only)\n';
flavorFile +='$base-line-height: '+flavorData.core.baseLineHeight+'; // Line height for most elements\n'; flavorFile +='$base-line-height: '+flavorData.core.baseLineHeight+'; // Line height for most elements\n';
@ -1440,6 +1443,9 @@
flavorFile +='\n'; flavorFile +='\n';
flavorFile +='@import \'../mini/layout\';\n'; flavorFile +='@import \'../mini/layout\';\n';
flavorFile +='\n'; flavorFile +='\n';
flavorFile +='/*\n';
flavorFile +=' Custom elements for card elements.\n';
flavorFile +='*/\n';
flavorFile +='$card-small-name: \'small\'; // Class name for small cards.\n'; flavorFile +='$card-small-name: \'small\'; // Class name for small cards.\n';
flavorFile +='$card-small-width: '+flavorData.layout.cardSmallWidth+'px; // Width for small cards.\n'; flavorFile +='$card-small-width: '+flavorData.layout.cardSmallWidth+'px; // Width for small cards.\n';
flavorFile +='@include make-card-alt-size ($card-small-name, $card-small-width);\n'; flavorFile +='@include make-card-alt-size ($card-small-name, $card-small-width);\n';
@ -1491,8 +1497,11 @@
flavorFile +='$button-hover-border-color: '+flavorData.inputControl.buttonHoverBorderColor+'; // Border color for buttons (hover).\n'; flavorFile +='$button-hover-border-color: '+flavorData.inputControl.buttonHoverBorderColor+'; // Border color for buttons (hover).\n';
flavorFile +='$button-group-border-color: '+flavorData.inputControl.buttonGroupBorderColor+'; // Border color for button groups.\n'; flavorFile +='$button-group-border-color: '+flavorData.inputControl.buttonGroupBorderColor+'; // Border color for button groups.\n';
flavorFile +='\n'; flavorFile +='\n';
flavorFile +='@import \'../mini/inputControl\';\n'; flavorFile +='@import \'../mini/input_control\';\n';
flavorFile +='\n'; flavorFile +='\n';
flavorFile +='/*\n';
flavorFile +=' Custom elements for forms and input elements.\n';
flavorFile +='*/\n';
flavorFile +='$button-primary-name: \'primary\'; // Class name for primary button color variant.\n'; flavorFile +='$button-primary-name: \'primary\'; // Class name for primary button color variant.\n';
flavorFile +='$button-primary-back-color: '+flavorData.inputControl.buttonPrimaryBackColor+';// Background color for primary button color variant.\n'; flavorFile +='$button-primary-back-color: '+flavorData.inputControl.buttonPrimaryBackColor+';// Background color for primary button color variant.\n';
flavorFile +='$button-primary-hover-back-color: '+flavorData.inputControl.buttonPrimaryHoverBackColor+';// Background color for primary button color variant (hover).\n'; flavorFile +='$button-primary-hover-back-color: '+flavorData.inputControl.buttonPrimaryHoverBackColor+';// Background color for primary button color variant (hover).\n';
@ -1538,7 +1547,7 @@
flavorFile +='$nav-hover-back-color: '+flavorData.navigation.navHoverBackColor+'; // Background color for the nav element (hover).\n'; flavorFile +='$nav-hover-back-color: '+flavorData.navigation.navHoverBackColor+'; // Background color for the nav element (hover).\n';
flavorFile +='$nav-fore-color: '+flavorData.navigation.navForeColor+'; // Text color for the nav element.\n'; flavorFile +='$nav-fore-color: '+flavorData.navigation.navForeColor+'; // Text color for the nav element.\n';
flavorFile +='$nav-border-color: '+flavorData.navigation.navBorderColor+'; // Border color for the nav element.\n'; flavorFile +='$nav-border-color: '+flavorData.navigation.navBorderColor+'; // Border color for the nav element.\n';
flavorFile +='$nav-link-color: '+flavorData.navigation.navLinkColor+'; / Color for link in the nav element.\n'; flavorFile +='$nav-link-color: '+flavorData.navigation.navLinkColor+'; // Color for link in the nav element.\n';
flavorFile +='$footer-fore-color: '+flavorData.navigation.footerForeColor+'; // Text color for the footer element.\n'; flavorFile +='$footer-fore-color: '+flavorData.navigation.footerForeColor+'; // Text color for the footer element.\n';
flavorFile +='$footer-back-color: '+flavorData.navigation.footerBackColor+'; // Background color for footer nav element.\n'; flavorFile +='$footer-back-color: '+flavorData.navigation.footerBackColor+'; // Background color for footer nav element.\n';
flavorFile +='$footer-border-color: '+flavorData.navigation.footerBorderColor+'; // Border color for the footer element.\n'; flavorFile +='$footer-border-color: '+flavorData.navigation.footerBorderColor+'; // Border color for the footer element.\n';
@ -1588,8 +1597,8 @@
flavorFile +='$modal-overlay-color: '+flavorData.contextual.modalOverlayColor+'; // Overlay color for modal dialog component\n'; flavorFile +='$modal-overlay-color: '+flavorData.contextual.modalOverlayColor+'; // Overlay color for modal dialog component\n';
flavorFile +='$modal-close-color: '+flavorData.contextual.modalCloseColor+'; // Text color for the close button of the modal dialog component\n'; flavorFile +='$modal-close-color: '+flavorData.contextual.modalCloseColor+'; // Text color for the close button of the modal dialog component\n';
flavorFile +='$modal-close-hover-back-color: '+flavorData.contextual.modalCloseHoverBackColor+'; // Background color for the close button of the modal dialog component (on hover/focus)\n'; flavorFile +='$modal-close-hover-back-color: '+flavorData.contextual.modalCloseHoverBackColor+'; // Background color for the close button of the modal dialog component (on hover/focus)\n';
flavorFile +='$modal-close-size: '+flavorData.contextual.modalCloseSize+'; // Font size for the close button of the modal dialog component\n'; flavorFile +='$modal-close-size: '+flavorData.contextual.modalCloseSize+'rem; // Font size for the close button of the modal dialog component\n';
flavorFile +='$collapse-label-height: '+flavorData.contextual.collapseLabelHeight+'; // Height for the labels in the collapse component\n'; flavorFile +='$collapse-label-height: '+flavorData.contextual.collapseLabelHeight+'rem; // Height for the labels in the collapse component\n';
flavorFile +='$collapse-content-max-height: '+flavorData.contextual.collapseContentMaxHeight+'px; // Max height for the content panes in the collapse component\n'; flavorFile +='$collapse-content-max-height: '+flavorData.contextual.collapseContentMaxHeight+'px; // Max height for the content panes in the collapse component\n';
flavorFile +='$collapse-label-back-color: '+flavorData.contextual.collapseLabelBackColor+'; // Background color for labels in the collapse component\n'; flavorFile +='$collapse-label-back-color: '+flavorData.contextual.collapseLabelBackColor+'; // Background color for labels in the collapse component\n';
flavorFile +='$collapse-label-fore-color: '+flavorData.contextual.collapseLabelForeColor+'; // Text color for labels in the collapse component\n'; flavorFile +='$collapse-label-fore-color: '+flavorData.contextual.collapseLabelForeColor+'; // Text color for labels in the collapse component\n';
@ -1600,6 +1609,10 @@
flavorFile +='$collapse-content-back-color: '+flavorData.contextual.collapseContentBackColor+'; // Background color for collapse component\'s content panes\n'; flavorFile +='$collapse-content-back-color: '+flavorData.contextual.collapseContentBackColor+'; // Background color for collapse component\'s content panes\n';
flavorFile +='\n'; flavorFile +='\n';
flavorFile +='@import \'../mini/contextual\';\n'; flavorFile +='@import \'../mini/contextual\';\n';
flavorFile +='\n';
flavorFile +='/*\n';
flavorFile +=' Custom elements for contextual background elements, toasts and tooltips.\n';
flavorFile +='*/\n';
flavorFile +='$mark-secondary-name: \'secondary\'; // Class name for secondary <mark> color variant.\n'; flavorFile +='$mark-secondary-name: \'secondary\'; // Class name for secondary <mark> color variant.\n';
flavorFile +='$mark-secondary-back-color: '+flavorData.contextual.markSecondaryBackColor+'; // Background color for secondary <mark> color variant.\n'; flavorFile +='$mark-secondary-back-color: '+flavorData.contextual.markSecondaryBackColor+'; // Background color for secondary <mark> color variant.\n';
flavorFile +='@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);\n'; flavorFile +='@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);\n';
@ -1616,7 +1629,7 @@
} }
if(flavorData.progress.enabled){ if(flavorData.progress.enabled){
flavorFile +='$progress-back-color: '+flavorData.progress.progressBackColor+'; // Background color of <progress>.\n'; flavorFile +='$progress-back-color: '+flavorData.progress.progressBackColor+'; // Background color of <progress>.\n';
flavorFile +='$progress-fore-color '+flavorData.progress.progressForeColor+'; // Foreground color of <progress>.\n'; flavorFile +='$progress-fore-color: '+flavorData.progress.progressForeColor+'; // Foreground color of <progress>.\n';
flavorFile +='$progress-height: '+flavorData.progress.progressHeight+'rem; // Height of <progress>.\n'; flavorFile +='$progress-height: '+flavorData.progress.progressHeight+'rem; // Height of <progress>.\n';
flavorFile +='$progress-max-value: '+flavorData.progress.progressMaxValue+'; // Arithmetic max value of <progress> - use integer values.\n'; flavorFile +='$progress-max-value: '+flavorData.progress.progressMaxValue+'; // Arithmetic max value of <progress> - use integer values.\n';
flavorFile +='$progress-inline-width: '+flavorData.progress.progressInlineWidth+'%; // Width of inline <progress> elements.\n'; flavorFile +='$progress-inline-width: '+flavorData.progress.progressInlineWidth+'%; // Width of inline <progress> elements.\n';
@ -1627,6 +1640,9 @@
flavorFile +='\n'; flavorFile +='\n';
flavorFile +='@import \'../mini/progress\';\n'; flavorFile +='@import \'../mini/progress\';\n';
flavorFile +='\n'; flavorFile +='\n';
flavorFile +='/*\n';
flavorFile +=' Custom elements for progress bars and spinners.\n';
flavorFile +='*/\n';
flavorFile +='$progress-primary-name: \'primary\'; // Class name for primary <progress> color variant.\n'; flavorFile +='$progress-primary-name: \'primary\'; // Class name for primary <progress> color variant.\n';
flavorFile +='$progress-primary-fore-color: '+flavorData.progress.progressPrimaryForeColor+'; // Foreground color for primary <progress> color variant.\n'; flavorFile +='$progress-primary-fore-color: '+flavorData.progress.progressPrimaryForeColor+'; // Foreground color for primary <progress> color variant.\n';
flavorFile +='@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);\n'; flavorFile +='@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);\n';
@ -1665,7 +1681,85 @@
flavorFile +='\n'; flavorFile +='\n';
} }
console.log(flavorFile); var base = './';
var directory = '../';
var files = [
'mini/_core.scss',
'mini/_layout.scss',
'mini/_layout_mixins.scss',
'mini/_input_control.scss',
'mini/_input_control_mixins.scss',
'mini/_navigation.scss',
'mini/_table.scss',
'mini/_contextual.scss',
'mini/_contextual_mixins.scss',
'mini/_progress.scss',
'mini/_progress_mixins.scss',
'mini/_icon.scss',
'mini/_utility.scss',
];
var sass = new Sass();
sass.options({style: Sass.style.expanded, precision: -1, comments: false, indent: ' ', linefeed: '\n'});
sass.preloadFiles(base, directory, files, function filesPreloaded() {
console.log('Files loaded...');
sass.writeFile('flavors/flavor.scss', flavorFile, function filesWritten(r1){
console.log('Flavor file created...');
sass.compileFile('flavors/flavor.scss', function expandedCompiled(r2){
let expandedCSS = r2.text;
console.log('Expanded CSS compiled...');
sass.compileFile('flavors/flavor.scss', {style: Sass.style.compressed}, function compressedCompiled(r3){
let compressedCSS = r3.text;
console.log('Compressed CSS compiled...');
sass.readFile([
'../mini/_core.scss',
'../mini/_layout.scss',
'../mini/_layout_mixins.scss',
'../mini/_input_control.scss',
'../mini/_input_control_mixins.scss',
'../mini/_navigation.scss',
'../mini/_table.scss',
'../mini/_contextual.scss',
'../mini/_contextual_mixins.scss',
'../mini/_progress.scss',
'../mini/_progress_mixins.scss',
'../mini/_icon.scss',
'../mini/_utility.scss'
], function filesRead(r4){
console.log('Read loaded files...');
var zip = new JSZip();
var flavorsFolder = zip.folder('flavors');
var miniFolder = zip.folder('mini');
zip.file('mini-custom.css', expandedCSS);
zip.file('mini-custom.min.css', compressedCSS);
flavorsFolder.file('mini-custom.scss', flavorFile);
miniFolder.file('_core.scss', r4['../mini/_core.scss']);
miniFolder.file('_layout.scss', r4['../mini/_layout.scss']);
miniFolder.file('_layout_mixins.scss', r4['../mini/_layout_mixins.scss']);
miniFolder.file('_input_control.scss', r4['../mini/_input_control.scss']);
miniFolder.file('_input_control_mixins.scss', r4['../mini/_input_control_mixins.scss']);
miniFolder.file('_navigation.scss', r4['../mini/_navigation.scss']);
miniFolder.file('_table.scss', r4['../mini/_table.scss']);
miniFolder.file('_contextual.scss', r4['../mini/_contextual.scss']);
miniFolder.file('_contextual_mixins.scss', r4['../mini/_contextual_mixins.scss']);
miniFolder.file('_progress.scss', r4['../mini/_progress.scss']);
miniFolder.file('_progress_mixins.scss', r4['../mini/_progress_mixins.scss']);
miniFolder.file('_icon.scss', r4['../mini/_icon.scss']);
miniFolder.file('_utility.scss', r4['../mini/_utility.scss']);
console.log('Files added to zip...');
zip.generateAsync({type:"blob"}).then(function(content) {
saveAs(content, "mini-custom.zip");
});
});
});
});
});
});
// var zip = new JSZip();
// zip.file("flavor.sass", flavorFile);
// zip.generateAsync({type:"blob"}).then(function(content) {
// saveAs(content, "mini.zip");
// });
} }
</script> </script>
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>.</p></footer></main> </div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>.</p></footer></main>

15
docs/v3/jszip.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

BIN
docs/v3/mini.zip Normal file
View file

Binary file not shown.

354
docs/v3/mini/_contextual.scss Normal file
View file

@ -0,0 +1,354 @@
/*
Definitions for contextual background elements, toasts and tooltips.
*/
$mark-back-color: #0277bd !default; // Background color for <mark>
$mark-fore-color: #fafafa !default; // Text color for <mark>
$mark-font-size: 0.95em !default; // Font size for <mark>
$mark-line-height: 1em !default; // Line height for <mark>
$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block <mark>
$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean)
$toast-name: 'toast' !default; // Class name for toast component
$toast-back-color: #424242 !default; // Background color for toast component
$toast-fore-color: #fafafa !default; // Text color for toast component
$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean)
$tooltip-name: 'tooltip' !default; // Class name for tooltip component
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name
$tooltip-back-color: #212121 !default; // Background color for tooltip component
$tooltip-fore-color: #fafafa !default; // Text color for tooltip component
$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean)
$modal-name: 'modal' !default; // Class name for modal dialog component
$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component
$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button
$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component
$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus)
$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component
$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean)
$collapse-name: 'collapse' !default; // Class name for collapse component
$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component
$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component
$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component
$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component
$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover)
$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component
$collapse-border-color: #ddd !default; // Border color for collapse component
$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels
$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes
// CSS variable name definitions [exercise caution if modifying these]
$mark-back-color-var: '--mark-back-color' !default;
$mark-fore-color-var: '--mark-fore-color' !default;
$toast-back-color-var: '--toast-back-color' !default;
$toast-fore-color-var: '--toast-fore-color' !default;
$tooltip-back-color-var: '--tooltip-back-color' !default;
$tooltip-fore-color-var: '--tooltip-fore-color' !default;
$modal-overlay-color-var: '--modal-overlay-color' !default;
$modal-close-color-var: '--modal-close-color' !default;
$modal-close-hover-back-color-var: '--modal-close-hover-color' !default;
$collapse-label-back-color-var: '--collapse-label-back-color' !default;
$collapse-label-fore-color-var: '--collapse-label-fore-color' !default;
$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default;
$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default;
$collapse-border-color-var: '--collapse-border-color' !default;
$collapse-content-back-color-var: '--collapse-content-back-color' !default;
$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-line-height: 1.5 !default; // Line height for most elements
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_contextual_mixins.scss` file to find this module's mixins.
@import '_contextual_mixins';
/* Contextual module CSS variable definitions */
:root {
#{$mark-back-color-var}: $mark-back-color;
#{$mark-fore-color-var}: $mark-fore-color;
}
// Default styling for mark. Use mixins for alternate styles.
mark {
background: var(#{$mark-back-color-var});
color: var(#{$mark-fore-color-var});
font-size: $mark-font-size;
line-height: $mark-line-height;
border-radius: var(#{$universal-border-radius-var});
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
&.#{$mark-inline-block-name} {
display: inline-block;
// This is hardcoded, as we want inline-block <mark> elements to be styled as normal pieces of text, instead of look small and weird.
font-size: 1em;
// Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons.
line-height: $base-line-height;
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
}
// Styling for toasts. - No border styling, I think it's unnecessary anyways.
@if $_include-toast {
:root {
#{$toast-back-color-var}: $toast-back-color;
#{$toast-fore-color-var}: $toast-fore-color;
}
.#{$toast-name} {
position: fixed;
bottom: calc(var(#{$universal-margin-var}) * 3);
left: 50%;
transform: translate(-50%, -50%);
z-index: 1111;
color: var(#{$toast-fore-color-var});
background: var(#{$toast-back-color-var});
border-radius: calc(var(#{$universal-border-radius-var}) * 16);
padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
}
// Styling for tooltips.
@if $_include-tooltip {
:root {
#{$tooltip-back-color-var}: $tooltip-back-color;
#{$tooltip-fore-color-var}: $tooltip-fore-color;
}
.#{$tooltip-name} {
position: relative;
display: inline-block;
&:before, &:after {
position: absolute;
opacity: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: all 0.3s;
// Remember to keep this index a lower value than the one used for stickies.
z-index: 1010; // Deals with certain problems when combined with cards and tables.
left: 50%;
}
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
bottom: 75%;
}
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
top: 75%;
}
&:hover, &:focus {
&:before, &:after {
opacity: 1;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
}
}
&:before { // This is the little tooltip triangle
content: '';
background: transparent;
border: var(#{$universal-margin-var}) solid transparent;
// Newer browsers will center the tail properly
left: calc(50% - var(#{$universal-margin-var}));
}
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
border-top-color: $tooltip-back-color;
}
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
border-bottom-color: $tooltip-back-color;
}
&:after { // This is the actual tooltip's text block
content: attr(aria-label);
color: var(#{$tooltip-fore-color-var});
background: var(#{$tooltip-back-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
white-space: nowrap;
transform: translateX(-50%);
}
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
margin-top: calc(2 * var(#{$universal-margin-var}));
}
}
}
// Styling for modal dialogs.
@if $_include-modal {
:root {
#{$modal-overlay-color-var}: $modal-overlay-color;
#{$modal-close-color-var}: $modal-close-color;
#{$modal-close-hover-back-color-var}: $modal-close-hover-back-color;
}
[type="checkbox"].#{$modal-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
& + div {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: var(#{$modal-overlay-color-var});
& .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
& .#{$modal-close-name} {
position: absolute;
top: 0;
right: 0;
width: $modal-close-size;
height: $modal-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0;
cursor: pointer;
transition: background 0.3s;
&:before {
display: block;
content: '\00D7';
color: var(#{$modal-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $modal-close-size;
line-height: 1;
text-align: center;
}
&:hover, &:focus {
background: var(#{$modal-close-hover-back-color-var});
}
}
}
}
&:checked + div {
display: flex;
flex: 0 1 auto;
z-index: 1200;
& .card {
& .#{$modal-close-name} {
z-index: 1211;
}
}
}
}
}
// Styling for collapse.
@if $_include-collapse {
:root {
#{$collapse-label-back-color-var}: $collapse-label-back-color;
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
#{$collapse-border-color-var}: $collapse-border-color;
#{$collapse-content-back-color-var} : $collapse-content-back-color;
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
}
.#{$collapse-name} {
width: calc(100% - 2 * var(#{$universal-margin-var}));
opacity: 1;
display: flex;
flex-direction: column;
margin: var(#{$universal-margin-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
& > [type="radio"], & > [type="checkbox"] {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
& > label {
flex-grow: 1;
display: inline-block;
height: $collapse-label-height;
cursor: pointer;
transition: background 0.3s;
color: var(#{$collapse-label-fore-color-var});
background: var(#{$collapse-label-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
&:hover, &:focus {
background: var(#{$collapse-label-hover-back-color-var});
}
+ div {
flex-basis: auto;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: max-height 0.3s;
max-height: 1px; // for transition
}
}
> :checked + label {
background: var(#{$collapse-selected-label-back-color-var});
// border: 0.0625rem solid #bdbdbd; // var it
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
& + div {
box-sizing: border-box;
position: relative;
width: 100%;
height: auto;
overflow: auto;
margin: 0;
background: var(#{$collapse-content-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
border-top: 0;
padding: var(#{$universal-padding-var});
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%);
max-height: $collapse-content-max-height;
}
}
& > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles.
border-top: 0;
}
& > label:first-of-type {
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
}
& > label:last-of-type:not(:first-of-type) {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
}
& > label:last-of-type:first-of-type {
border-radius: var(#{$universal-border-radius-var});
}
& > :checked:last-of-type:not(:first-of-type) + label {
border-radius: 0;
}
& > :checked:last-of-type + label + div {
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
}
}
}

27
docs/v3/mini/_contextual_mixins.scss Normal file
View file

@ -0,0 +1,27 @@
// Contextual module's mixin definitions are here. For the module itself
// check `_contextual.scss`.
// Mark color variant mixin:
// $mark-alt-name: The name of the class used for the <mark> variant.
// $mark-alt-back-color: Background color for <mark> variant.
// $mark-alt-fore-color: Text color for <mark> variant.
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color,
$mark-alt-fore-color : $mark-fore-color) {
mark.#{$mark-alt-name} {
@if $mark-alt-back-color != $mark-back-color {
#{$mark-back-color-var}: $mark-alt-back-color;
}
@if $mark-alt-fore-color != $mark-fore-color{
#{$mark-fore-color-var}: $mark-alt-fore-color;
}
}
}
// Mark size variant mixin:
// $mark-alt-name: The name of the class used for the <mark> variant.
// $mark-alt-padding: The padding of the <mark> variant.
// $mark-alt-border-radius: The border radius of the <mark> variant.
@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) {
mark.#{$mark-alt-name} {
padding: $mark-alt-padding;
border-radius: $mark-alt-border-radius;
}
}

304
docs/v3/mini/_core.scss Normal file
View file

@ -0,0 +1,304 @@
/*
Browsers resets and base typography.
*/
@function rempx ($size) { @return 1px/$size;} // Keep this, the generator breaks otherwise
// TODO: Add fluid type and test thoroughly
$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
$__1px: rempx($base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
$base-line-height: 1.5 !default; // Line height for most elements
$base-font-size: 1rem !default; // Font sizing for all elements
$_body-margin: 0 !default; // [Hidden] Margin for body
$fore-color: #111 !default; // Text & foreground color
$secondary-fore-color: #444 !default; // Secondary text & foreground color
$back-color: #f8f8f8 !default; // Background color
$secondary-back-color: #f0f0f0 !default; // Secondary background color
$blockquote-color: #f57c00 !default; // <blockquote> sidebar and quotation color
$pre-color: #1565c0 !default; // <pre> sidebar color
$border-color: #aaa !default; // Border color
$secondary-border-color: #ddd !default; // Secondary border color
$heading-line-height: 1.2 !default; // Line height for headings
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
$universal-margin: 0.5rem !default; // Universal margin for the most elements
$universal-padding: 0.5rem !default; // Universal padding for the most elements
$universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
$universal-box-shadow: none !default; // Universal box-shadow for most elements
$small-font-size: 0.75em !default; // Font sizing for <small> elements
$heading-font-weight: 500 !default; // Font weight for headings
$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
$horizontal-rule-line-height: 1.25em !default; // <hr> line height
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
$code-font-size: 0.85em !default; // Font size for <code>, <kbd>
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
$sup-top: -0.5em !default; // <sup> top
$sub-bottom: -0.25em !default; // <sub> bottom
$a-link-color: #0277bd !default; // Color for <a>:link
$a-visited-color: #01579b !default; // Color for <a>:visited
// CSS variable name definitions [exercise caution if modifying these]
$fore-color-var: '--fore-color' !default;
$secondary-fore-color-var: '--secondary-fore-color' !default;
$back-color-var: '--back-color' !default;
$secondary-back-color-var: '--secondary-back-color' !default;
$blockquote-color-var: '--blockquote-color' !default;
$pre-color-var: '--pre-color' !default;
$border-color-var: '--border-color' !default;
$secondary-border-color-var: '--secondary-border-color' !default;
$heading-ratio-var: '--heading-ratio' !default;
$universal-margin-var: '--universal-margin' !default;
$universal-padding-var: '--universal-padding' !default;
$universal-border-radius-var: '--universal-border-radius' !default;
$universal-box-shadow-var: '--universal-box-shadow' !default;
$a-link-color-var: '--a-link-color' !default;
$a-visited-color-var: '--a-visited-color' !default;
/* Core module CSS variable definitions */
:root {
#{$fore-color-var}: $fore-color;
#{$secondary-fore-color-var}: $secondary-fore-color;
#{$back-color-var}: $back-color;
#{$secondary-back-color-var}: $secondary-back-color;
#{$blockquote-color-var}: $blockquote-color;
#{$pre-color-var}: $pre-color;
#{$border-color-var}: $border-color;
#{$secondary-border-color-var}: $secondary-border-color;
#{$heading-ratio-var}: $heading-ratio;
#{$universal-margin-var}: $universal-margin;
#{$universal-padding-var}: $universal-padding;
#{$universal-border-radius-var}: $universal-border-radius;
#{$a-link-color-var} : $a-link-color;
#{$a-visited-color-var} : $a-visited-color;
@if $universal-box-shadow != none {
#{$universal-box-shadow-var}: $universal-box-shadow;
}
}
html {
font-size: $base-root-font-size; // Set root's font sizing.
}
a, b, del, em, i, ins, q, span, strong, u {
font-size: 1em; // Fix for elements inside headings not displaying properly.
}
@if $_apply-defaults-to-all {
html, * {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
* {
font-size: $base-font-size;
}
}
@else {
html {
font-family: #{$base-font-family};
line-height: $base-line-height;
// Prevent adjustments of font size after orientation changes in mobile.
-webkit-text-size-adjust: 100%;
}
}
body {
margin: $_body-margin;
color: var(#{$fore-color-var});
background: var(#{$back-color-var});
}
// Correct display for Edge & Firefox.
details {
display: block;
}
// Correct display in all browsers.
summary {
display: list-item;
}
// Abbreviations
abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline dotted; // Opinionated style-fix for all browsers.
}
// Show overflow in Edge.
input {
overflow: visible;
}
// Make images responsive by default.
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
font-weight: $heading-font-weight;
small {
color: var(#{$secondary-fore-color-var});
display: block;
@if $subheading-top-margin != 0 {
margin-top: $subheading-top-margin;
}
@if $subheading-font-size != $small-font-size {
font-size: $subheading-font-size;
}
}
}
h1 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h2 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h3 {
font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h4 {
font-size: calc(1rem * var(#{$heading-ratio-var}));
}
h5 {
font-size: 1rem;
}
h6 {
font-size: calc(1rem / var(#{$heading-ratio-var}));
}
p {
margin: var(#{$universal-margin-var});
}
ol, ul {
margin: var(#{$universal-margin-var});
padding-left: calc(2 * var(#{$universal-margin-var}));
}
b, strong {
font-weight: $bold-font-weight;
}
hr {
// Fixes and defaults for styling
box-sizing: content-box;
border: 0;
// Actual styling using variables
line-height: $horizontal-rule-line-height;
margin: var(#{$universal-margin-var});
height: $__1px;
background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
}
blockquote { // Doesn't have a back color by default, can be added manually.
display: block;
position: relative;
font-style: italic;
color: var(#{$secondary-fore-color-var});
margin: var(#{$universal-margin-var});
padding: calc(3 * var(#{$universal-padding-var}));
border: $__1px solid var(#{$secondary-border-color-var});
border-left: 6*$__1px solid var(#{$blockquote-color-var});
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
&:before {
position: absolute;
top: calc(0rem - var(#{$universal-padding-var}));
left: 0;
font-family: sans-serif;
font-size: $blockquote-quotation-size;
font-weight: 700;
content: "\201c";
color: var(#{$blockquote-color-var});
}
&[cite]:after{
font-style: normal;
font-size: $blockquote-cite-size;
font-weight: 700;
content: "\a— " attr(cite);
white-space: pre;
}
}
code, kbd, pre, samp {
font-family: #{$code-font-family}; // Display fix should be applied manually!
font-size: $code-font-size;
}
code { // No border color by default and fore color is the default for text, can be altered manually.
background: var(#{$secondary-back-color-var});
border-radius: var(#{$universal-border-radius-var});
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
kbd { // No border color by default, can be altered manually.
background: var(#{$fore-color-var});
color: var(#{$back-color-var});
border-radius: var(#{$universal-border-radius-var});
// This could be a bit counterintuitive and burden the codebase a bit, look into it again?
padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
pre { // Fore color is the default, can be altered manually.
overflow: auto; // Responsiveness
background: var(#{$secondary-back-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
border: $__1px solid var(#{$secondary-border-color-var});
border-left: 4*$__1px solid var(#{$pre-color-var});
border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
// Prevent elements from affecting the line height in all browsers.
sup, sub, code, kbd {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small, sup, sub, figcaption {
font-size: $small-element-font-size;
}
sup {
top: $sup-top;
}
sub {
bottom: $sub-bottom;
}
figure {
margin: var(#{$universal-margin-var});
}
figcaption {
color: var(#{$secondary-fore-color-var});
}
a {
text-decoration: none;
&:link{
color: var(#{$a-link-color-var});
}
&:visited {
color: var(#{$a-visited-color-var});
}
&:hover, &:focus {
text-decoration: underline;
}
}

131
docs/v3/mini/_icon.scss Normal file
View file

@ -0,0 +1,131 @@
/*
Definitions for icons - powered by Feather (https://feathericons.com/).
*/
$icon-prefix: 'icon' !default; // Class name prefix for icons.
$icon-alert-name: 'alert' !default; // Class name suffix for alert icon.
$icon-bookmark-name: 'bookmark' !default; // Class name suffix for bookmark icon.
$icon-calendar-name: 'calendar' !default; // Class name suffix for calendar icon.
$icon-credit-name: 'credit' !default; // Class name suffix for credit icon.
$icon-edit-name: 'edit' !default; // Class name suffix for edit icon.
$icon-link-name: 'link' !default; // Class name suffix for link icon.
$icon-help-name: 'help' !default; // Class name suffix for help icon.
$icon-home-name: 'home' !default; // Class name suffix for home icon.
$icon-info-name: 'info' !default; // Class name suffix for info icon.
$icon-lock-name: 'lock' !default; // Class name suffix for lock icon.
$icon-mail-name: 'mail' !default; // Class name suffix for mail icon.
$icon-location-name: 'location' !default; // Class name suffix for location icon.
$icon-phone-name: 'phone' !default; // Class name suffix for phone icon.
$icon-rss-name: 'rss' !default; // Class name suffix for rss icon.
$icon-search-name: 'search' !default; // Class name suffix for search icon.
$icon-settings-name: 'settings' !default; // Class name suffix for settings icon.
$icon-share-name: 'share' !default; // Class name suffix for share icon.
$icon-cart-name: 'cart' !default; // Class name suffix for cart icon.
$icon-upload-name: 'upload' !default; // Class name suffix for upload icon.
$icon-user-name: 'user' !default; // Class name suffix for user icon.
$icon-secondary-color-name: 'secondary' !default;// Class name for secondary color icons.
$icon-inverse-color-name: 'inverse' !default; // Class name for inverse color icons.
/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $fore-color: #111 !default; // Text & foreground color
// $universal-margin-var: '--universal-margin' !default;
// $fore-color-var: '--fore-color' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$fore-color-var}: $fore-color;
// }
//
// ============================================================
// Base styling for icons.
span[class^='#{$icon-prefix}-'] {
display: inline-block;
height: 1em;
width: 1em;
vertical-align: -0.125em; // fixes alignment issues
background-size: contain;
margin: 0 calc(var(#{$universal-margin-var}) / 4);
&.#{$icon-secondary-color-name}{
-webkit-filter: invert(25%);
filter: invert(25%);
}
&.#{$icon-inverse-color-name}{
-webkit-filter: invert(100%);
filter: invert(100%);
}
}
span{
$stroke-color: str-replace(#{$fore-color}, '#', '%23');
&.#{$icon-prefix}-#{$icon-alert-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12' y2='16'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-bookmark-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-calendar-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-credit-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-edit-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-link-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-help-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-home-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-info-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-lock-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-mail-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-location-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-phone-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-rss-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-search-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-settings-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-share-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-cart-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-upload-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
&.#{$icon-prefix}-#{$icon-user-name}{
background-image: #{str-replace("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E\")",'currentColor',$stroke-color)};
}
}

317
docs/v3/mini/_input_control.scss Normal file
View file

@ -0,0 +1,317 @@
/*
Definitions for forms and input elements.
*/
// Different elements are styled based on the same set of rules.
$input-group-name: 'input-group' !default; // Class name for input groups.
$_include-fluid-input-group: true !default; // [Hidden] Should fluid input groups be included? (boolean)
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
$button-class-name: 'button' !default; // Class name for elements styled as buttons.
$input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
$button-group-name: 'button-group' !default; // Class name for button groups.
$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
$form-back-color: #f0f0f0 !default; // Background color for forms.
$form-fore-color: #111 !default; // Text color for forms.
$form-border-color: #ddd !default; // Border color for forms.
$input-back-color: #f8f8f8 !default; // Background color for input elements.
$input-fore-color: #111 !default; // Text color for input elements.
$input-border-color: #ddd !default; // Border color for input elements.
$input-focus-color: #0288d1 !default; // Border color for focused input elements.
$input-invalid-color: #d32f2f !default; // Border color for invalid input elements.
$button-back-color: #e2e2e2 !default; // Background color for buttons.
$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover).
$button-fore-color: #212121 !default; // Text color for buttons.
$button-border-color: transparent !default; // Border color for buttons.
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
// CSS variable name definitions [exercise caution if modifying these]
$form-back-color-var: '--form-back-color' !default;
$form-fore-color-var: '--form-fore-color' !default;
$form-border-color-var: '--form-border-color' !default;
$input-back-color-var: '--input-back-color' !default;
$input-fore-color-var: '--input-fore-color' !default;
$input-border-color-var: '--input-border-color' !default;
$input-focus-color-var: '--input-focus-color' !default;
$input-invalid-color-var: '--input-invalid-color' !default;
$button-back-color-var: '--button-back-color' !default;
$button-hover-back-color-var: '--button-hover-back-color' !default;
$button-fore-color-var: '--button-fore-color' !default;
$button-border-color-var: '--button-border-color' !default;
$button-hover-border-color-var: '--button-hover-border-color' !default;
$button-group-border-color-var: '--button-group-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-font-size: 1rem !default; // Font sizing for all elements
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins';
/* Input_control module CSS variable definitions */
:root {
#{$form-back-color-var}: $form-back-color;
#{$form-fore-color-var}: $form-fore-color;
#{$form-border-color-var}: $form-border-color;
#{$input-back-color-var}: $input-back-color;
#{$input-fore-color-var}: $input-fore-color;
#{$input-border-color-var}: $input-border-color;
#{$input-focus-color-var}: $input-focus-color;
#{$input-invalid-color-var}: $input-invalid-color;
#{$button-back-color-var}: $button-back-color;
#{$button-hover-back-color-var}: $button-hover-back-color;
#{$button-fore-color-var}: $button-fore-color;
#{$button-border-color-var}: $button-border-color;
#{$button-hover-border-color-var}: $button-hover-border-color;
#{$button-group-border-color-var}: $button-group-border-color;
}
// Base form styling
form { // Text color is the default, this can be changed manually.
background: var(#{$form-back-color-var});
color: var(#{$form-fore-color-var});
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
}
// Fieldset styling
fieldset {
// Apply always to overwrite defaults for all of the below.
border: $__1px solid var(#{$form-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 4);
padding: var(#{$universal-padding-var});
}
// Legend styling.
legend {
// Edge fixes.
box-sizing: border-box;
display: table;
max-width: 100%;
white-space: normal;
// Actual styling.
font-weight: $bold-font-weight;
padding: calc(var(#{$universal-padding-var}) / 2);
}
// Label syling. - Basically just padding, but there might be more in the future.
label {
padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
}
// Input group styling.
.#{$input-group-name} {
display: inline-block;
// Fluid input groups
@if $_include-fluid-input-group {
&.#{$input-group-fluid-name} {
display: flex;
align-items: center;
justify-content: center;
& > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
// On mobile
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
align-items: stretch;
flex-direction: column;
}
}
// Vertical input groups
&.#{$input-group-vertical-name} {
display: flex;
align-items: stretch;
flex-direction: column;
& > input {
max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
}
}
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
// Correct style in Chrome and Safari.
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
// Correct style in Chrome and Safari.
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
// Common textual input styling. - Avoid using box-shadow with these.
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
box-sizing: border-box;
// Background, color and border should not be unassigned, as the browser defaults will apply.
background: var(#{$input-back-color-var});
color: var(#{$input-fore-color-var});
border: $__1px solid var(#{$input-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: calc(var(#{$universal-margin-var}) / 2);
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
&:hover, &:focus {
border-color: var(#{$input-focus-color-var});
box-shadow: none;
}
&:invalid, &:focus:invalid{
border-color: var(#{$input-invalid-color-var});
box-shadow: none;
}
&[readonly]{
background: var(#{$secondary-back-color-var});
}
}
// Fix for select and option elements overflowing their parent container.
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
// Styling for checkboxes and radio buttons.
[type="checkbox"], [type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
vertical-align: text-bottom;
padding: 0; // Remove padding added from previous styles.
flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
&:checked:before {
position: absolute;
}
}
[type="checkbox"] {
&:checked:before {
content: '\2713';
font-family: sans-serif;
font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
top: calc(0rem - var(#{$universal-padding-var}));
left: calc(var(#{$universal-padding-var}) / 4);
}
}
[type="radio"] {
border-radius: 100%;
&:checked:before {
border-radius: 100%;
content: '';
top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
background: var(#{$input-fore-color-var});
width: 0.5rem;
height: 0.5rem;
}
}
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
:placeholder-shown {
color: var(#{$input-fore-color-var});
}
::-ms-placeholder {
color: var(#{$input-fore-color-var});
opacity: 0.54;
}
// Definitions for the button and button-like elements.
// Different elements are styled based on the same set of rules.
// Reset for Firefox focusing on button elements.
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Fixes for Android 4, iOS and Safari.
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
// Other fixes.
button {
overflow: visible; // Show the overflow in IE.
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
}
// Default styling
button, [type="button"], [type="submit"], [type="reset"],
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
a[role="button"], label[role="button"], [role="button"] {
display: inline-block;
background: var(#{$button-back-color-var});
color: var(#{$button-fore-color-var});
border: $__1px solid var(#{$button-border-color-var});
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
text-decoration: none;
cursor: pointer;
transition: background 0.3s;
&:hover, &:focus {
background: var(#{$button-hover-back-color-var});
border-color: var(#{$button-hover-border-color-var});
}
}
// Disabled styling for input and button elements.
input, textarea, select, button, .#{$button-class-name}, [role="button"] {
// .button[disabled] is actually higher specificity than a.button, so no need for more than that
&:disabled, &[disabled] {
cursor: not-allowed;
opacity: $input-disabled-opacity;
}
}
// Button group styling.
.#{$button-group-name} {
display: flex;
border: $__1px solid var(#{$button-group-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
& > button, [type="button"], & > [type="submit"], & > [type="reset"],
& > .#{$button-class-name}, & > [role="button"] {
margin: 0;
max-width: 100%;
flex: 1 1 auto;
text-align: center;
border: 0;
border-radius: 0;
box-shadow: none;
}
& > :not(:first-child) {
border-left: $__1px solid var(#{$button-group-border-color-var});
}
// Responsiveness for button groups
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
flex-direction: column;
& > :not(:first-child) {
border: 0; // Reapply to remove the left border from elements.
border-top: $__1px solid var(#{$button-group-border-color-var});
}
}
}

46
docs/v3/mini/_input_control_mixins.scss Normal file
View file

@ -0,0 +1,46 @@
// Input_control module's mixin definitions are here. For the module itself
// check `_input_control.scss`.
// Button color variant mixin:
// $button-alt-name: The name of the class used for the button variant.
// $button-alt-back-color: Background color for button variant.
// $button-alt-hover-back-color: Background color for button variant (hover).
// $button-alt-fore-color: Text color for button variant.
// $button-alt-border-color: Border color for button variant.
// $button-alt-hover-border-color: Border color for button variant (hover).
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
$button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
$button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
@if $button-alt-back-color != $button-back-color {
#{$button-back-color-var}: $button-alt-back-color;
}
@if $button-alt-fore-color != $button-fore-color{
#{$button-fore-color-var}: $button-alt-fore-color;
}
@if $button-alt-border-color != $button-border-color{
#{$button-border-color-var}: $button-alt-border-color;
}
&:hover, &:focus {
@if $button-alt-hover-back-color != $button-hover-back-color{
#{$button-hover-back-color-var}: $button-alt-hover-back-color;
}
@if $button-alt-hover-border-color != $button-hover-border-color{
#{$button-hover-border-color-var}: $button-alt-hover-border-color;
}
}
}
}
}
// Button size variant mixin:
// $button-alt-name: The name of the class used for the button variant.
// $button-alt-padding: The padding of the button variant.
// $button-alt-margin The margin of the button variant.
@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
&.#{$button-alt-name} {
padding: $button-alt-padding;
margin: $button-alt-margin;
}
}
}

199
docs/v3/mini/_layout.scss Normal file
View file

@ -0,0 +1,199 @@
/*
Definitions for the grid system, cards and containers.
*/
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
$_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`).
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
$grid-container-name: 'container' !default; // Class name for the grid system container.
$grid-row-name: 'row' !default; // Class name for the grid system rows.
$grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents.
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
$card-name: 'card' !default; // Class name for the cards.
$card-section-name: 'section' !default; // Class name for the cards' sections.
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent).
$card-normal-width: 320px !default; // Width for normal cards.
$card-section-media-height: 200px !default; // Height for cards' media sections.
$card-fore-color: #111 !default; // Text color for the cards.
$card-back-color: #f8f8f8 !default; // Background color for the cards.
$card-border-color: #ddd !default; // Border color for the cards.
// CSS variable name definitions [exercise caution if modifying these]
$card-fore-color-var: '--card-fore-color' !default;
$card-back-color-var: '--card-back-color' !default;
$card-border-color-var: '--card-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_layout_mixins.scss` file to find this module's mixins.
@import 'layout_mixins';
// Fluid grid system container definition.
.#{$grid-container-name} {
margin: 0 auto;
padding: 0 calc(1.5 * var(#{$universal-padding-var}));
}
// Grid row definition.
.#{$grid-row-name} {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
}
// Inline mixin, used to generate class definitions for each grid step.
@mixin generate-grid-size ($size-prefix){
@if $_include-parent-layout {
.#{$grid-column-prefix}-#{$size-prefix},
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 calc(var(#{$universal-padding-var}) / 2);
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
@else {
// Grid column generic definitions.
.#{$grid-column-prefix}-#{$size-prefix},
[class^='#{$grid-column-prefix}-#{$size-prefix}-'],
[class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
flex: 0 0 auto;
padding: 0 calc(var(#{$universal-padding-var}) / 2);
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix} {
max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
@if $_include-parent-layout {
.#{$grid-column-prefix}-#{$size-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
max-width: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
max-width: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
// Offest definitions.
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
@if ($i - 1) == 0 {
margin-left: 0;
}
@else {
margin-left: #{(($i - 1) * 100% / $grid-column-count)};
}
}
}
// Reordering definitions.
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
order: initial;
}
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix} {
order: -999;
}
.#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
order: 999;
}
}
// Definitions for smaller screens.
@include generate-grid-size($grid-small-prefix);
// Definitions for medium screens.
@media screen and (min-width: #{$grid-medium-breakpoint}){
@include generate-grid-size($grid-medium-prefix);
}
// Definitions for large screens.
@media screen and (min-width: #{$grid-large-breakpoint}){
@include generate-grid-size($grid-large-prefix);
}
/* Card component CSS variable definitions */
:root {
#{$card-back-color-var}: $card-back-color;
#{$card-fore-color-var}: $card-fore-color;
#{$card-border-color-var}: $card-border-color;
}
// Card styling
.#{$card-name} {
// New syntax
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: center;
position: relative;
width: 100%;
// Actual styling for the cards
background: var(#{$card-back-color-var});
color: var(#{$card-fore-color-var});
border: $__1px solid var(#{$card-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
overflow: hidden; // Hide overflow from section borders
// Responsiveness (if the screen is larger than card, set max-width)
@media screen and (min-width: #{$card-normal-width}) {
max-width: $card-normal-width;
}
// Card sections
& > .#{$card-section-name} {
// Reapply background and foreground colors, so that mixins can be applied properly.
background: var(#{$card-back-color-var});
color: var(#{$card-fore-color-var});
box-sizing: border-box;
margin: 0;
border: 0; // Clean borders and radiuses for any element-based sections
border-radius: 0; // Clean borders and radiuses for any element-based sections
border-bottom: $__1px solid var(#{$card-border-color-var});
padding: var(#{$universal-padding-var});
width: 100%;
// Card media sections
&.#{$card-section-media-name} {
height: $card-section-media-height;
padding: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
// Card sections - last
& > .#{$card-section-name}:last-child {
border-bottom: 0; // Clean the extra border for last section
}
}

62
docs/v3/mini/_layout_mixins.scss Normal file
View file

@ -0,0 +1,62 @@
// Layout (card) module's mixin definitions are here. For the module itself
// check `_layout.scss`.
// Mixin for alternate card sizes:
// $card-alt-size-name: The name of the class used for the alternate size card.
// $card-alt-size-width: The width of the alternate size card.
@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
@if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
width: auto;
}
}
@else {
@media screen and (min-width: #{$card-alt-size-width}) {
.#{$card-name}.#{$card-alt-size-name} {
max-width: $card-alt-size-width;
}
}
}
}
// Mixin for alternate cards (card color variants):
// $card-alt-name: The name of the class used for 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-border-color: The border style of the alternate card.
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
$card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
.#{$card-name}.#{$card-alt-name} {
@if $card-alt-back-color != $card-back-color {
#{$card-back-color-var}: $card-alt-back-color;
}
@if $card-alt-fore-color != $card-fore-color {
#{$card-fore-color-var}: $card-alt-fore-color;
}
@if $card-alt-border-color != $card-border-color {
#{$card-border-color-var}: $card-alt-border-color;
}
}
}
// Mixin for alternate card sections (card section color variants):
// $card-section-alt-name: The name of the class used for 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.
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
$card-section-alt-fore-color : $card-fore-color) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
@if $card-section-alt-back-color != $card-back-color {
#{$card-back-color-var}: $card-section-alt-back-color;
}
@if $card-section-alt-fore-color != $card-fore-color {
#{$card-fore-color-var}: $card-section-alt-fore-color;
}
}
}
// Mixin for alternate card sections (card section padding variants):
// $card-section-alt-name: The name of the class used for the alternate card section.
// $card-section-alt-padding: The padding of the alternate card section.
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
padding: $card-section-alt-padding;
}
}

314
docs/v3/mini/_navigation.scss Normal file
View file

@ -0,0 +1,314 @@
/*
Definitions for navigation elements.
*/
// Different elements are styled based on the same set of rules.
$header-height: 3.1875rem !default; // Height of the header element.
$header-back-color: #f8f8f8 !default; // Background color for the header element.
$header-hover-back-color: #f0f0f0 !default; // Background color for the header element (hover).
$header-fore-color: #444 !default; // Text color for the header element.
$header-border-color: #ddd !default; // Border color for the header element.
$nav-back-color: #f8f8f8 !default; // Background color for the nav element.
$nav-hover-back-color: #f0f0f0 !default; // Background color for the nav element (hover).
$nav-fore-color: #444 !default; // Text color for the nav element.
$nav-border-color: #ddd !default; // Border color for the nav element.
$nav-link-color: #0277bd !default; // Color for link in the nav element.
$footer-fore-color: #444 !default; // Text color for the footer element.
$footer-back-color: #f8f8f8 !default; // Background color for footer nav element.
$footer-border-color: #ddd !default; // Border color for the footer element.
$footer-link-color: #0277bd !default; // Color for link in the footer element.
$drawer-back-color: #f8f8f8 !default; // Background color for the drawer component.
$drawer-border-color: #ddd !default; // Border color for the drawer component.
$drawer-hover-back-color: #f0f0f0 !default; // Background color for the drawer component's close (hover).
$drawer-close-color: #444 !default; // Color of the close element for the drawer component.
$_header-only-bottom-border: true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
$_header-links-uppercase: true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
$header-logo-name: 'logo' !default; // Class name for the header logo element.
$header-logo-font-size: 1.75rem !default; // Font ize for the header logo element.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
$_footer-only-top-border: true !default; // [Hidden] Apply styling only to the top border of footer? (boolean)
$footer-font-size: 0.875rem !default; // Font size for text in footer element.
$sticky-name: 'sticky' !default; // Class name for sticky headers and footers.
$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-font-size: 1.5em !default; // Font size for the drawer component's toggle. (prefer em units)
$drawer-mobile-breakpoint: 768px !default; // Mobile breakpoint for the drawer component.
$_drawer-right: true !default; // [Hidden] Should the drawer appear on the right side of the screen?
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
$drawer-width: 320px !default; // Width of the drawer component.
$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
$drawer-close-size: 2rem !default; // Size of the close element for the drawer component.
// CSS variable name definitions [exercise caution if modifying these]
$header-fore-color-var: '--header-fore-color' !default;
$header-back-color-var: '--header-back-color' !default;
$header-hover-back-color-var: '--header-hover-back-color' !default;
$header-border-color-var: '--header-border-color' !default;
$nav-fore-color-var: '--nav-fore-color' !default;
$nav-back-color-var: '--nav-back-color' !default;
$nav-hover-back-color-var: '--nav-hover-back-color' !default;
$nav-border-color-var: '--nav-border-color' !default;
$nav-link-color-var: '--nav-link-color' !default;
$footer-fore-color-var: '--footer-fore-color' !default;
$footer-back-color-var: '--footer-back-color' !default;
$footer-border-color-var: '--footer-border-color' !default;
$footer-link-color-var: '--footer-link-color' !default;
$drawer-back-color-var: '--drawer-back-color' !default;
$drawer-border-color-var: '--drawer-border-color' !default;
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
$drawer-close-color-var: '--drawer-close-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
/* Navigation module CSS variable definitions */
:root {
#{$header-back-color-var}: $header-back-color;
#{$header-hover-back-color-var}: $header-hover-back-color;
#{$header-fore-color-var}: $header-fore-color;
#{$header-border-color-var}: $header-border-color;
#{$nav-back-color-var}: $nav-back-color;
#{$nav-hover-back-color-var}: $nav-hover-back-color;
#{$nav-fore-color-var}: $nav-fore-color;
#{$nav-border-color-var}: $nav-border-color;
#{$nav-link-color-var}: $nav-link-color;
#{$footer-fore-color-var}: $footer-fore-color;
#{$footer-back-color-var}: $footer-back-color;
#{$footer-border-color-var}: $footer-border-color;
#{$footer-link-color-var}: $footer-link-color;
#{$drawer-back-color-var}: $drawer-back-color;
#{$drawer-hover-back-color-var}: $drawer-hover-back-color;
#{$drawer-border-color-var}: $drawer-border-color;
#{$drawer-close-color-var}: $drawer-close-color;
}
// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
header {
height: $header-height;
background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
color: var(#{$header-fore-color-var});
@if $_header-only-bottom-border {
border-bottom: $__1px solid var(#{$header-border-color-var});
}
@else {
border: $__1px solid var(#{$header-border-color-var});
}
padding: calc(var(#{$universal-padding-var}) / 4) 0;
// Responsiveness for smaller displays, scrolls horizontally.
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// Fix for responsive header, using the grid system's row and column alignment.
&.#{$grid-row-name} {
box-sizing: content-box;
}
// Header logo styling.
.#{$header-logo-name} {
color: var(#{$header-fore-color-var});
font-size: $header-logo-font-size;
padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
text-decoration: none;
}
// Link styling.
button, [type="button"], .#{$button-class-name}, [role="button"] {
box-sizing: border-box;
position: relative;
top: calc(0rem - var(#{$universal-padding-var}) / 4); // Use universal-padding to offset the padding of the header.
height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2); // Fill header.
background: var(#{$header-back-color-var}); // Apply color regardless to override styling from other things.
line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
text-align: center;
color: var(#{$header-fore-color-var});
border: 0;
border-radius: 0;
margin: 0;
@if $_header-links-uppercase {
text-transform: uppercase;
}
&:hover, &:focus {
background: var(#{$header-hover-back-color-var});
}
}
}
// Navigation sidebar styling.
nav {
background: var(#{$nav-back-color-var});
color: var(#{$nav-fore-color-var});
border: $__1px solid var(#{$nav-border-color-var});
border-radius: var(#{$universal-border-radius-var});
margin: var(#{$universal-margin-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
* {
padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
}
a, a:visited {
display: block;
color: var(#{$nav-link-color-var}); // Apply regardless to de-stylize visited links.
border-radius: var(#{$universal-border-radius-var});
transition: background 0.3s;
&:hover, &:focus {
text-decoration: none;
background: var(#{$nav-hover-back-color-var});
}
}
// Subcategories in navigation.
@for $i from 1 through $nav-sublink-depth {
.#{$nav-sublink-prefix}-#{$i} {
position: relative;
margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
&:before {
position: absolute;
left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
top: -#{$__1px};
content: '';
height: 100%;
border: $__1px solid var(#{$nav-border-color-var});
border-left: 0;
}
}
}
}
// Footer styling.
footer {
background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
color: var(#{$footer-fore-color-var});
@if $_footer-only-top-border {
border-top: $__1px solid var(#{$footer-border-color-var});
}
@else {
border: $__1px solid var(#{$footer-border-color-var});
}
// margin: $footer-margin;
padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
font-size: $footer-font-size;
a, a:visited {
color: var(#{$footer-link-color-var});
}
}
// Definitions for sticky headers and footers.
header.#{$sticky-name} {
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
top: 0;
}
footer.#{$sticky-name} {
position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
position: sticky;
z-index: 1101; // Deals with certain problems when combined with cards and tables.
bottom: 0;
}
// Responsive drawer component.
.#{$drawer-toggle-name} {
&:before { // No color specified, should use the color of its surroundings!
display: inline-block;
position: relative;
vertical-align: bottom;
content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
font-family: sans-serif;
font-size: $drawer-toggle-font-size; // Almost hardcoded, should be fully compatible with its surroundings.
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) {
display: none;
}
}
}
[type="checkbox"].#{$drawer-name} {
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
+ * {
display: block;
box-sizing: border-box;
position: fixed;
top: 0;
width: $drawer-width;
height: 100vh;
overflow-y: auto;
background: var(#{$drawer-back-color-var});
border: $__1px solid var(#{$drawer-border-color-var});
border-radius: 0; // Set to 0 to override the value from `nav`.
margin: 0; // Set to 0 to override the value from `nav`.
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
z-index: 1110;
@if $_drawer-right {
right: -$drawer-width;
transition: right 0.3s;
}
@else {
left: -$drawer-width;
transition: left 0.3s;
}
& .#{$drawer-close-name} {
position: absolute;
top: var(#{$universal-margin-var});
right: var(#{$universal-margin-var});
z-index: 1111;
width: $drawer-close-size;
height: $drawer-close-size;
border-radius: var(#{$universal-border-radius-var});
padding: var(#{$universal-padding-var});
margin: 0; // Fixes the offset from label
cursor: pointer;
transition: background 0.3s;
&:before { // Transparent background unless hovered over. Does not block text behind it.
display: block;
content: '\00D7';
color: var(#{$drawer-close-color-var});
position: relative;
font-family: sans-serif;
font-size: $drawer-close-size;
line-height: 1; // Setting to 1 seems to center the 'X' properly.
text-align: center;
}
&:hover, &:focus {
background: var(#{$drawer-hover-back-color-var});
}
}
@media screen and (max-width: #{$drawer-width}) {
width: 100%;
}
}
&:checked + * {
@if $_drawer-right {
right: 0;
}
@else {
left: 0;
}
}
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
&:not(.#{$drawer-persistent-name}) + * {
position: static;
height: 100%;
z-index: 1100;
& .#{$drawer-close-name} {
display: none;
}
}
}
}

113
docs/v3/mini/_progress.scss Normal file
View file

@ -0,0 +1,113 @@
/*
Definitions for progress elements and spinners.
*/
$progress-back-color: #ddd !default; // Background color of <progress>.
$progress-fore-color: #555 !default; // Foreground color of <progress>.
$progress-height: 0.75rem !default; // Height of <progress>.
$progress-max-value: 1000 !default; // Arithmetic max value of <progress> - use integer values.
$progress-inline-name: 'inline' !default; // Class name for inline <progress> elements.
$progress-inline-width: 60% !default; // Width of inline <progress> elements.
$_include-spinner-donut: true !default; // [Hidden] Should spinner donuts be included? (boolean)
$spinner-donut-name: 'spinner' !default; // Class name for spinner donuts
$spinner-donut-size: 1.25rem !default; // Size of the spinner donuts
$spinner-donut-border-thickness: 0.25rem !default; // Border thickness for spinner donuts
$spinner-donut-back-color: #ddd !default; // Background color for spinner donuts
$spinner-donut-fore-color: #555 !default; // Foreground color for spinner donuts
// CSS variable name definitions [exercise caution if modifying these]
$progress-back-color-var: '--progress-back-color' !default;
$progress-fore-color-var: '--progress-fore-color' !default;
$spinner-donut-back-color-var: '--spinner-back-color' !default;
$spinner-donut-fore-color-var: '--spinner-fore-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_progress_mixins.scss` file to find this module's mixins.
@import '_progress_mixins';
/* Progess module CSS variable definitions */
:root {
#{$progress-back-color-var}: $progress-back-color;
#{$progress-fore-color-var}: $progress-fore-color;
}
// Default styling for progress. Use mixins for alternate styles
progress {
display: block;
vertical-align: baseline; // Correct vertical alignment in some browsers.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: $progress-height;
width: calc(100% - 2 * var(#{$universal-margin-var}));
margin: var(#{$universal-margin-var});
border: 0; // Removes default border
border-radius: calc(2 * var(#{$universal-border-radius-var}));
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: var(#{$progress-back-color-var});
color: var(#{$progress-fore-color-var});
// Foreground color on webkit browsers
&::-webkit-progress-value {
background: var(#{$progress-fore-color-var});
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
}
// Background color on webkit browser
&::-webkit-progress-bar {
background: var(#{$progress-back-color});
}
// Foreground color on Firefox
&::-moz-progress-bar {
background: var(#{$progress-fore-color-var});
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
border-radius: calc(2 * var(#{$universal-border-radius-var}));
}
&::-moz-progress-bar {
border-radius: calc(2 * var(#{$universal-border-radius-var}));
}
}
&.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
width: $progress-inline-width;
}
}
// Style for donut spinner
@if $_include-spinner-donut {
:root {
#{$spinner-donut-back-color-var}: $spinner-donut-back-color;
#{$spinner-donut-fore-color-var}: $spinner-donut-fore-color;
}
// Donut spinner animation
@keyframes spinner-donut-anim {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
.#{$spinner-donut-name} {
display: inline-block;
margin: var(#{$universal-margin-var});
border: $spinner-donut-border-thickness solid var(#{$spinner-donut-back-color-var});
border-left: $spinner-donut-border-thickness solid var(#{$spinner-donut-fore-color-var});
border-radius: 50%;
width: $spinner-donut-size;
height: $spinner-donut-size;
animation: spinner-donut-anim 1.2s linear infinite;
}
}

32
docs/v3/mini/_progress_mixins.scss Normal file
View file

@ -0,0 +1,32 @@
// Progress module's mixin definitions are here. For the module itself
// check `progress.scss`.
// Progress color variant mixin:
// $progress-alt-name: The name of the class used for the <progress> variant.
// $progress-alt-fore-color: Foregound color for <progress> variant.
// $progress-alt-back-color: Background color for <progress> variant.
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
$progress-alt-back-color : $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-fore-color != $progress-fore-color{
#{$progress-fore-color-var}: $progress-alt-fore-color;
}
@if $progress-alt-back-color != $progress-back-color {
#{$progress-back-color-var}: $progress-alt-back-color;
}
}
}
// Spinner donut color variant mixin:
// $spinner-donut-alt-name: The name of the class used for the spinner donut variant.
// $spinner-donut-alt-fore-color: Text color for spinner donut variant.
// $spinner-donut-alt-back-color: Background color for spinner donut variant.
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-fore-color : $spinner-donut-fore-color,
$spinner-donut-alt-back-color : $spinner-donut-back-color) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-fore-color != $spinner-donut-fore-color{
#{$spinner-donut-fore-color-var}: $spinner-donut-alt-fore-color;
}
@if $spinner-donut-alt-back-color != $spinner-donut-back-color {
#{$spinner-donut-back-color-var}: $spinner-donut-alt-back-color;
}
}
}

371
docs/v3/mini/_table.scss Normal file
View file

@ -0,0 +1,371 @@
/*
Definitions for the responsive table component.
*/
// The tables use the common table elements and syntax - <tfoot> is not supported.
$table-mobile-breakpoint: 768px !default; // Breakpoint for <table> mobile view.
$table-max-height: 400px !default; // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size: 1.5rem !default; // Font size for <caption> elements.
$table-mobile-card-label: 'data-label' !default; // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600 !default; // Font weight for column header labels in mobile view.
$table-border-color: #aaa !default; // Border color for <table> elements.
$table-border-separator-color: #666 !default; // Border color for the border between <thead> and <tbody>.
$table-th-back-color: #e6e6e6 !default; // Background color for <th> elements.
$table-th-fore-color: #111 !default; // Text color for <th> elements.
$table-td-back-color: #f8f8f8 !default; // Background color for <td> elements.
$table-td-fore-color: #111 !default; // Text color for <td> elements.
$_include-horizontal-table: true !default; // [Hidden] Flag for horizontal tables (`true`/`false`).
$table-horizontal-name: 'horizontal' !default; // Class name for horizontal <table> elements.
$_include-striped-table: true !default; // [Hidden] Flag for striped tables.
$table-striped-name: 'striped' !default; // Class name for striped <table> elements.
$table-td-alt-back-color: #eee !default; // Alternative background color for <td> elements in striped tables.
$_include-hoverable-table: true !default; // [Hidden] Flag for striped tables.
$table-hoverable-name: 'hoverable' !default; // Class name for hoverable <table> elements.
$table-td-hover-back-color: #90caf9 !default; // Hover background color for <td> elements in hoverable tables.
// CSS variable name definitions [exercise caution if modifying these]
$table-border-color-var: '--table-border-color' !default;
$table-border-separator-color-var: '--table-border-separator-color' !default;
$table-th-back-color-var: '--table-head-back-color' !default;
$table-th-fore-color-var: '--table-head-fore-color' !default;
$table-td-back-color-var: '--table-body-back-color' !default;
$table-td-fore-color-var: '--table-body-fore-color' !default;
$table-td-alt-back-color-var: '--table-body-alt-back-color' !default;
$table-td-hover-back-color-var: '--table-body-hover-back-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
/* Table module CSS variable definitions. */
:root {
#{$table-border-color-var}: $table-border-color;
#{$table-border-separator-color-var}: $table-border-separator-color;
#{$table-th-back-color-var}: $table-th-back-color;
#{$table-th-fore-color-var}: $table-th-fore-color;
#{$table-td-back-color-var}: $table-td-back-color;
#{$table-td-fore-color-var}: $table-td-fore-color;
#{$table-td-alt-back-color-var}: $table-td-alt-back-color;
}
// Desktop view (scrollable vertical tables).
table {
border-collapse: separate;
border-spacing: 0;
margin: 0;
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
padding: var(#{$universal-padding-var});
padding-top: 0;
@if not($_include-horizontal-table) {
overflow: auto;
max-height: $table-max-height;
}
caption {
font-size: $table-caption-font-size;
margin: calc(2 * var(#{$universal-margin-var})) 0;
max-width: 100%;
flex: 0 0 100%;
}
thead, tbody {
display: flex;
flex-flow: row wrap;
border: $__1px solid var(#{$table-border-color-var});
@if not($_include-horizontal-table) {
max-width: 100%;
flex: 0 0 100%;
}
}
thead {
z-index: 999; // Fixes the visibility of the element.
border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
border-bottom: $__1px solid var(#{$table-border-separator-color-var});
@if not($_include-horizontal-table) {
position: sticky;
top: 0;
}
}
tbody {
border-top: 0;
margin-top: calc(0 - var(#{$universal-margin-var}));
border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
}
tr {
display: flex;
padding: 0; // Apply always to overwrite default.
@if not($_include-horizontal-table) {
flex-flow: row wrap;
flex: 0 0 100%;
}
}
th, td {
padding: calc(2 * var(#{$universal-padding-var})); // Apply always to overwrite default.
@if not($_include-horizontal-table) {
flex: 1 0 0%;
overflow: hidden;
text-overflow: ellipsis;
}
}
th {
text-align: left;
background: var(#{$table-th-back-color-var});
color: var(#{$table-th-fore-color-var});
}
td {
background: var(#{$table-td-back-color-var});
color: var(#{$table-td-fore-color-var});
border-top: $__1px solid var(#{$table-border-color-var});
}
@if not($_include-horizontal-table) {
tbody tr:first-child td {
border-top: 0;
}
}
}
// Styling for horizontal tables
@if $_include-horizontal-table {
table:not(.#{$table-horizontal-name}) {
overflow: auto;
max-height: $table-max-height;
thead, tbody {
max-width: 100%;
flex: 0 0 100%;
}
tr {
flex-flow: row wrap;
flex: 0 0 100%;
}
th, td {
flex: 1 0 0%;
overflow: hidden;
text-overflow: ellipsis;
}
thead {
position: sticky;
top: 0;
}
tbody tr:first-child td {
border-top: 0;
}
}
table.#{$table-horizontal-name} {
border: 0;
thead, tbody {
border: 0;
flex-flow: row nowrap;
}
tbody {
overflow: auto;
justify-content: space-between;
flex: 1 0 0;
margin-left: calc( 4 * var(#{$universal-margin-var}));
padding-bottom: calc(var(#{$universal-padding-var}) / 4);
}
tr {
flex-direction: column;
flex: 1 0 auto;
}
th, td {
width: 100%;
border: 0;
border-bottom: $__1px solid var(#{$table-border-color-var});
&:not(:first-child){
border-top: 0;
}
}
th {
text-align: right;
border-left: $__1px solid var(#{$table-border-color-var});
border-right: $__1px solid var(#{$table-border-separator-color-var});
}
thead {
tr:first-child {
padding-left: 0;
}
}
th:first-child, td:first-child {
border-top: $__1px solid var(#{$table-border-color-var});
}
tbody tr:last-child td {
border-right: $__1px solid var(#{$table-border-color-var});
&:first-child{
border-top-right-radius: 0.25rem;
}
&:last-child{
border-bottom-right-radius: 0.25rem;
}
}
thead tr:first-child th {
&:first-child{
border-top-left-radius: 0.25rem;
}
&:last-child{
border-bottom-left-radius: 0.25rem;
}
}
}
}
// Mobile
@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
@if $_include-horizontal-table {
table, table.#{$table-horizontal-name} {
border-collapse: collapse;
border: 0;
width: 100%;
display: table;
// Accessibility (element is not visible, but screen readers read it normally)
thead, th {
border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
tbody {
border: 0;
display: table-row-group;
}
tr {
display: block;
border: $__1px solid var(#{$table-border-color-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: #fafafa; // use variables, this is a test (body)
padding: var(#{$universal-padding-var});
margin: var(#{$universal-margin-var});
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
th, td {
width: auto;
}
td {
display: block;
border: 0;
text-align: right;
}
td:before {
content: attr(#{$table-mobile-card-label});
float: left;
font-weight: $table-mobile-label-font-weight;
}
th:first-child, td:first-child {
border-top: 0;
}
tbody tr:last-child td {
border-right: 0;
}
}
}
@else {
table {
border-collapse: collapse;
border: 0;
width: 100%;
display: table;
// Accessibility (element is not visible, but screen readers read it normally)
thead, th {
border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
}
tbody {
border: 0;
display: table-row-group;
}
tr {
display: block;
border: $__1px solid var(#{$table-border-color-var});
border-radius: var(#{$universal-border-radius-var});
@if $universal-box-shadow != none {
box-shadow: var(#{$universal-box-shadow-var});
}
background: #fafafa; // use variables, this is a test (body)
padding: var(#{$universal-padding-var});
margin: var(#{$universal-margin-var});
margin-bottom: calc(2 * var(#{$universal-margin-var}));
}
td {
display: block;
border: 0;
text-align: right;
}
td:before {
content: attr(#{$table-mobile-card-label});
float: left;
font-weight: $table-mobile-label-font-weight;
}
}
}
}
// Striped tables.
@if $_include-striped-table {
:root {
#{$table-td-alt-back-color-var} : $table-td-alt-back-color;
}
table.#{$table-striped-name} {
tr:nth-of-type(2n) > td {
background: var(#{$table-td-alt-back-color-var});
}
}
// Responsiveness for striped tables.
@media screen and (max-width: #{$table-mobile-breakpoint}) {
table.#{$table-striped-name} {
tr:nth-of-type(2n) {
background: var(#{$table-td-alt-back-color-var});
}
}
}
}
// Hoverable tables.
@if $_include-striped-table {
:root {
#{$table-td-hover-back-color-var} : $table-td-hover-back-color;
}
table.#{$table-hoverable-name} {
tr {
&:hover, &:focus {
&, & > td {
background: var(#{$table-td-hover-back-color-var});
}
}
}
}
@media screen and (max-width: #{$table-mobile-breakpoint}) {
table.#{$table-hoverable-name} {
tr {
&:hover, &:focus {
&, & > td {
background: var(#{$table-td-hover-back-color-var});
}
}
}
}
}
}

169
docs/v3/mini/_utility.scss Normal file
View file

@ -0,0 +1,169 @@
/*
Definitions for utilities and helper classes.
*/
$hidden-name: 'hidden' !default; // Class name for hidden elements.
$visually-hidden-name: 'visually-hidden' !default; // Class name for visually hidden elements.
$border-generic-name: 'bordered' !default; // Class name for bordered elements.
$border-generic-color: rgba(0,0,0, 0.3) !default; // Border color for bordered elements.
$border-rounded-name: 'rounded' !default; // Class name for rounded-border elements.
$border-circular-name: 'circular' !default; // Class name for circular-border elements.
$box-shadow-generic-name:'shadowed' !default; // Class name for box-shadow elements.
$box-shadow-generic: 0 4*$__1px 4*$__1px 0 rgba(0, 0, 0, 0.125), 0 2*$__1px 2*$__1px -2*$__1px rgba(0, 0, 0, 0.25) !default;
$responsive-margin-name: 'responsive-margin' !default; //Class name for responsive margin elements.
$responsive-margin-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive margin elements.
$responsive-margin-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive margin elements.
$responsive-padding-name: 'responsive-padding' !default; //Class name for responsive padding elements.
$responsive-padding-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive padding elements.
$responsive-padding-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive padding elements.
$hidden-prefix: 'hidden' !default; // Class prefix for responsive hidden elements.
$hidden-small-suffix: 'sm' !default; // Class suffix for responsive hidden elements.
$hidden-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive hidden elements.
$hidden-medium-suffix: 'md' !default; // Class suffix for responsive hidden elements.
$hidden-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive hidden elements.
$hidden-large-suffix: 'lg' !default; // Class suffix for responsive hidden elements.
$visually-hidden-prefix: 'visually-hidden' !default; // Class prefix for responsive visually hidden elements.
$visually-hidden-small-suffix: 'sm' !default; // Class suffix for responsive hidden elements.
$visually-hidden-medium-breakpoint: 768px !default; // Medium screen breakpoint for responsive visually hidden elements.
$visually-hidden-medium-suffix: 'md' !default; // Class suffix for responsive hidden elements.
$visually-hidden-large-breakpoint: 1280px !default; // Medium screen breakpoint for responsive visually hidden elements.
$visually-hidden-large-suffix: 'lg' !default; // Class suffix for responsive hidden elements.
// CSS variable name definitions [exercise caution if modifying these]
$border-generic-color-var: '--generic-border-color' !default;
$box-shadow-generic-var: '--generic-box-shadow' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
/* Utility module CSS variable definitions */
:root {
#{$border-generic-color-var}: $border-generic-color;
#{$box-shadow-generic-var}: $box-shadow-generic;
}
// Hidden elements class. NOTE: Uses !important.
.#{$hidden-name}{
display: none !important;
}
// Visually hidden elements class. NOTE: Uses !important.
.#{$visually-hidden-name} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
// Generic bordered element class. NOTE: Uses !important.
.#{$border-generic-name} {
border: $__1px solid var(#{$border-generic-color-var}) !important;
}
// Generic rounded-border element class. NOTE: Uses !important.
.#{$border-rounded-name} {
border-radius: var(#{$universal-border-radius-var}) !important;
}
// Generic circular-border element class. NOTE: Uses !important.
.#{$border-circular-name} {
border-radius: 50% !important;
}
// Generic box-shadow element class. NOTE: Uses !important.
.#{$box-shadow-generic-name} {
box-shadow: var(#{$box-shadow-generic-var}) !important;
}
// Responsive margin class. NOTE: Uses !important.
.#{$responsive-margin-name} {
margin: calc(var(#{$universal-margin-var}) / 4) !important;
@media screen and (min-width: #{$responsive-margin-medium-breakpoint}) {
margin: calc(var(#{$universal-margin-var}) / 2) !important;
}
@media screen and (min-width: #{$responsive-margin-large-breakpoint}) {
margin: var(#{$universal-margin-var}) !important;
}
}
// Responsive padding class. NOTE: Uses !important.
.#{$responsive-padding-name} {
padding: calc(var(#{$universal-padding-var}) / 4) !important;
@media screen and (min-width: #{$responsive-padding-medium-breakpoint}) {
padding: calc(var(#{$universal-padding-var}) / 2) !important;
}
@media screen and (min-width: #{$responsive-padding-large-breakpoint}) {
padding: var(#{$universal-padding-var}) !important;
}
}
// Responsive hidden element class. NOTE: Uses !important.
@media screen and (max-width: $hidden-medium-breakpoint - 1px) {
.#{$hidden-prefix}-#{$hidden-small-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: $hidden-large-breakpoint - 1px) {
.#{$hidden-prefix}-#{$hidden-medium-suffix} {
display: none !important;
}
}
@media screen and (min-width: #{$hidden-large-breakpoint}) {
.#{$hidden-prefix}-#{$hidden-large-suffix} {
display: none !important;
}
}
// Responsive visually hidden element class. NOTE: Uses !important.
@media screen and (max-width: $visually-hidden-medium-breakpoint - 1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: $visually-hidden-large-breakpoint - 1px) {
.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}
@media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
border: 0 !important;
padding: 0 !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(100%) !important;
clip-path: inset(100%) !important;
overflow: hidden !important;
}
}

202
docs/v3/sass.js Normal file
View file

@ -0,0 +1,202 @@
/*! sass.js - v0.10.9 (3e41106) - built 2018-02-06
providing libsass 3.4.9 (6de5050d)
via emscripten 1.37.33 ()
*/
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.Sass = factory();
}
}(this, function () {/*global document*/
// identify the path sass.js is located at in case we're loaded by a simple
// <script src="path/to/sass.js"></script>
// this path can be used to identify the location of
// * sass.worker.js from sass.js
// * libsass.js.mem from sass.sync.js
// see https://github.com/medialize/sass.js/pull/32#issuecomment-103142214
// see https://github.com/medialize/sass.js/issues/33
var SASSJS_RELATIVE_PATH = (function() {
'use strict';
// in Node things are rather simple
if (typeof __dirname !== 'undefined') {
return __dirname;
}
// we can only run this test in the browser,
// so make sure we actually have a DOM to work with.
if (typeof document === 'undefined' || !document.getElementsByTagName) {
return null;
}
// http://www.2ality.com/2014/05/current-script.html
var currentScript = document.currentScript || (function() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
var path = currentScript && currentScript.src;
if (!path) {
return null;
}
// [worker] make sure we're not running in some concatenated thing
if (path.slice(-8) === '/sass.js') {
return path.slice(0, -8);
}
// [sync] make sure we're not running in some concatenated thing
if (path.slice(-13) === '/sass.sync.js') {
return path.slice(0, -13);
}
return null;
})() || '.';
/*global Worker, SASSJS_RELATIVE_PATH*/
'use strict';
var noop = function(){};
var slice = [].slice;
// defined upon first Sass.initialize() call
var globalWorkerUrl;
function Sass(workerUrl) {
if (!workerUrl && !globalWorkerUrl) {
/*jshint laxbreak:true */
throw new Error(
'Sass needs to be initialized with the URL of sass.worker.js - '
+ 'either via Sass.setWorkerUrl(url) or by new Sass(url)'
);
/*jshint laxbreak:false */
}
if (!globalWorkerUrl) {
globalWorkerUrl = workerUrl;
}
// bind all functions
// we're doing this because we used to have a single hard-wired instance that allowed
// [].map(Sass.removeFile) and we need to maintain that for now (at least until 1.0.0)
for (var key in this) {
if (typeof this[key] === 'function') {
this[key] = this[key].bind(this);
}
}
this._callbacks = {};
this._worker = new Worker(workerUrl || globalWorkerUrl);
this._worker.addEventListener('message', this._handleWorkerMessage, false);
}
// allow setting the workerUrl before the first Sass instance is initialized,
// where registering the global workerUrl would've happened automatically
Sass.setWorkerUrl = function(workerUrl) {
globalWorkerUrl = workerUrl;
};
Sass.style = {
nested: 0,
expanded: 1,
compact: 2,
compressed: 3
};
Sass.comments = {
'none': 0,
'default': 1
};
Sass.prototype = {
style: Sass.style,
comments: Sass.comments,
destroy: function() {
this._worker && this._worker.terminate();
this._worker = null;
this._callbacks = {};
this._importer = null;
},
_handleWorkerMessage: function(event) {
if (event.data.command) {
this[event.data.command](event.data.args);
}
this._callbacks[event.data.id] && this._callbacks[event.data.id](event.data.result);
delete this._callbacks[event.data.id];
},
_dispatch: function(options, callback) {
if (!this._worker) {
throw new Error('Sass worker has been terminated');
}
options.id = 'cb' + Date.now() + Math.random();
this._callbacks[options.id] = callback;
this._worker.postMessage(options);
},
_importerInit: function(args) {
// importer API done callback pushing results
// back to the worker
var done = function done(result) {
this._worker.postMessage({
command: '_importerFinish',
args: [result]
});
}.bind(this);
try {
this._importer(args[0], done);
} catch(e) {
done({ error: e.message });
throw e;
}
},
importer: function(importerCallback, callback) {
if (typeof importerCallback !== 'function' && importerCallback !== null) {
throw new Error('importer callback must either be a function or null');
}
// callback is executed in the main EventLoop
this._importer = importerCallback;
// tell worker to activate importer callback
this._worker.postMessage({
command: 'importer',
args: [Boolean(importerCallback)]
});
callback && callback();
},
};
var commands = 'writeFile readFile listFiles removeFile clearFiles lazyFiles preloadFiles options compile compileFile';
commands.split(' ').forEach(function(command) {
Sass.prototype[command] = function() {
var callback = slice.call(arguments, -1)[0];
var args = slice.call(arguments, 0, -1);
if (typeof callback !== 'function') {
args.push(callback);
callback = noop;
}
this._dispatch({
command: command,
args: args
}, callback);
};
});
// automatically set the workerUrl in case we're loaded by a simple
// <script src="path/to/sass.js"></script>
// see https://github.com/medialize/sass.js/pull/32#issuecomment-103142214
Sass.setWorkerUrl(SASSJS_RELATIVE_PATH + '/sass.worker.js');
return Sass;
}));

839
docs/v3/sass.worker.js Normal file
View file

File diff suppressed because one or more lines are too long

116
package-lock.json generated Normal file
View file

@ -0,0 +1,116 @@
{
"name": "mini.css",
"version": "2.3.4",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"core-js": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.3.0.tgz",
"integrity": "sha1-+rg/uwstjchfpjbEudNMdUIMbWU=",
"dev": true
},
"core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true
},
"es6-promise": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz",
"integrity": "sha1-AQ1YWEI6XxGJeWZfRkhqlcbuK7Y=",
"dev": true
},
"file-saver": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.8.tgz",
"integrity": "sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg==",
"dev": true
},
"immediate": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
"integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=",
"dev": true
},
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
"dev": true
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
"jszip": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/jszip/-/jszip-3.1.5.tgz",
"integrity": "sha512-5W8NUaFRFRqTOL7ZDDrx5qWHJyBXy6velVudIzQUSoqAAYqzSh2Z7/m0Rf1QbmQJccegD0r+YZxBjzqoBiEeJQ==",
"dev": true,
"requires": {
"core-js": "2.3.0",
"es6-promise": "3.0.2",
"lie": "3.1.1",
"pako": "1.0.6",
"readable-stream": "2.0.6"
}
},
"lie": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
"integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
"dev": true,
"requires": {
"immediate": "3.0.6"
}
},
"pako": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
"integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==",
"dev": true
},
"process-nextick-args": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
"integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
"dev": true
},
"readable-stream": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
"integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
"dev": true,
"requires": {
"core-util-is": "1.0.2",
"inherits": "2.0.3",
"isarray": "1.0.0",
"process-nextick-args": "1.0.7",
"string_decoder": "0.10.31",
"util-deprecate": "1.0.2"
}
},
"sass.js": {
"version": "0.10.9",
"resolved": "https://registry.npmjs.org/sass.js/-/sass.js-0.10.9.tgz",
"integrity": "sha512-eHI/9qdncEcJwgher1QFCCNIxgL6Mq1IcSTil72pRkYuTDOJo5u7LFmLcWgadPfi53D88GuaxzsviwheDsBYoQ==",
"dev": true
},
"string_decoder": {
"version": "0.10.31",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
"integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
"dev": true
},
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true
}
}
}

5
package.json
View file

@ -15,7 +15,10 @@
"url": "git+https://github.com/Chalarangelo/mini.css.git" "url": "git+https://github.com/Chalarangelo/mini.css.git"
}, },
"devDependencies": { "devDependencies": {
"node-sass": "^4.5.2" "file-saver": "^1.3.8",
"jszip": "^3.1.5",
"node-sass": "^4.5.2",
"sass.js": "^0.10.9"
}, },
"keywords": [ "keywords": [
"css", "css",

4
src/mini/_core.scss
View file

@ -1,11 +1,11 @@
/* /*
Browsers resets and base typography. Browsers resets and base typography.
*/ */
@function rempx ($size) { @return 1px/$size;} // Keep this, the generator breaks otherwise
// TODO: Add fluid type and test thoroughly // TODO: Add fluid type and test thoroughly
$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only) $base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean) $_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px` $__1px: rempx($base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements $base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
$base-line-height: 1.5 !default; // Line height for most elements $base-line-height: 1.5 !default; // Line height for most elements
$base-font-size: 1rem !default; // Font sizing for all elements $base-font-size: 1rem !default; // Font sizing for all elements

8
src/mini/_utility.scss
View file

@ -109,12 +109,12 @@ $box-shadow-generic-var: '--generic-box-shadow' !default;
} }
} }
// Responsive hidden element class. NOTE: Uses !important. // Responsive hidden element class. NOTE: Uses !important.
@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;
} }
@ -125,7 +125,7 @@ $box-shadow-generic-var: '--generic-box-shadow' !default;
} }
} }
// Responsive visually hidden element class. NOTE: Uses !important. // Responsive visually hidden element class. NOTE: Uses !important.
@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;
@ -139,7 +139,7 @@ $box-shadow-generic-var: '--generic-box-shadow' !default;
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;