Tried and tested flavor generation
This commit is contained in:
Angelos Chalaris
parent
a361f69240
commit
4c631cf4d4
27 changed files with 3896 additions and 81 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -11,3 +11,5 @@ docs/v3/index-splash-o2\.jpg
|
|||
docs/v3/responsive-original\.svg
|
||||
|
||||
docs/v3/index-splash_original\.jpg
|
||||
|
||||
node_modules
|
||||
|
|
|
|||
|
|
@ -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: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">
|
||||
<script src="./jszip.min.js"></script>
|
||||
<script src="./FileSaver.min.js"></script>
|
||||
<script src="./sass.js"></script>
|
||||
</head><body>`;
|
||||
var customizationEnd = `</body></html>`;
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ module.exports = {
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
|
|
@ -205,12 +205,12 @@ module.exports = {
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
|
|
@ -438,14 +438,14 @@ module.exports = {
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseBackColor">Button inverse variant background color:</label>
|
||||
<input type="text" id="buttonInverseBackColor" value="#111" 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>
|
||||
<input type="text" id="buttonInverseBackColor" value="#212121" autocomplete="off"/>
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseHoverBackColor">Button inverse variant background color (hover):</label>
|
||||
<input type="text" id="buttonInverseHoverBackColor" value="#212121" 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>
|
||||
<input type="text" id="buttonInverseHoverBackColor" value="#111" autocomplete="off"/>
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
|
|
@ -639,7 +639,7 @@ module.exports = {
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
|
|
@ -751,8 +751,8 @@ module.exports = {
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="toastBackColor">Toast background color:</label>
|
||||
<input type="text" id="toastBackColor" value="#212121" 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>
|
||||
<input type="text" id="toastBackColor" value="#424242" autocomplete="off"/>
|
||||
<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>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -1366,8 +1366,8 @@ module.exports = {
|
|||
flavorFile +='// structured like the flavor description below, will be included in your final CSS file.\\n';
|
||||
flavorFile +='/*\\n';
|
||||
flavorFile +=' Flavor name: Custom (mini-custom)\\n';
|
||||
flavorFile +=' Author: Undefined \\n';
|
||||
flavorFile +=' mini.css version: v3.0.0\\n';
|
||||
flavorFile +=' Generated online - https://minicss.org/flavors\\n';
|
||||
flavorFile +=' mini.css version: ${version}\\n';
|
||||
flavorFile +='*/\\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';
|
||||
|
|
@ -1416,6 +1416,9 @@ module.exports = {
|
|||
flavorFile +='\\n';
|
||||
flavorFile +='@import \\'../mini/layout\\';\\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-width: '+flavorData.layout.cardSmallWidth+'px; // Width for small cards.\\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-group-border-color: '+flavorData.inputControl.buttonGroupBorderColor+'; // Border color for button groups.\\n';
|
||||
flavorFile +='\\n';
|
||||
flavorFile +='@import \\'../mini/inputControl\\';\\n';
|
||||
flavorFile +='@import \\'../mini/input_control\\';\\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-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';
|
||||
|
|
@ -1514,7 +1520,7 @@ module.exports = {
|
|||
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-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-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';
|
||||
|
|
@ -1564,8 +1570,8 @@ module.exports = {
|
|||
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-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 +='$collapse-label-height: '+flavorData.contextual.collapseLabelHeight+'; // Height for the labels in the collapse 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+'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-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';
|
||||
|
|
@ -1576,6 +1582,10 @@ module.exports = {
|
|||
flavorFile +='$collapse-content-back-color: '+flavorData.contextual.collapseContentBackColor+'; // Background color for collapse component\\'s content panes\\n';
|
||||
flavorFile +='\\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-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';
|
||||
|
|
@ -1592,7 +1602,7 @@ module.exports = {
|
|||
}
|
||||
if(flavorData.progress.enabled){
|
||||
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-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';
|
||||
|
|
@ -1603,6 +1613,9 @@ module.exports = {
|
|||
flavorFile +='\\n';
|
||||
flavorFile +='@import \\'../mini/progress\\';\\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-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';
|
||||
|
|
@ -1641,7 +1654,85 @@ module.exports = {
|
|||
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>`,
|
||||
sections: [
|
||||
|
|
|
|||
|
|
@ -360,3 +360,12 @@
|
|||
## 20180520
|
||||
- Finished Sass variable generation for `input_control` 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
2
docs/v3/FileSaver.min.js
vendored
Normal 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})}
|
||||
|
|
@ -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: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">
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -44,7 +47,7 @@
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
|
|
@ -229,12 +232,12 @@
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
|
|
@ -462,14 +465,14 @@
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseBackColor">Button inverse variant background color:</label>
|
||||
<input type="text" id="buttonInverseBackColor" value="#111" 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>
|
||||
<input type="text" id="buttonInverseBackColor" value="#212121" autocomplete="off"/>
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="buttonInverseHoverBackColor">Button inverse variant background color (hover):</label>
|
||||
<input type="text" id="buttonInverseHoverBackColor" value="#212121" 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>
|
||||
<input type="text" id="buttonInverseHoverBackColor" value="#111" autocomplete="off"/>
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
|
|
@ -663,7 +666,7 @@
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<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>
|
||||
</div>
|
||||
<div class="input-group vertical">
|
||||
|
|
@ -775,8 +778,8 @@
|
|||
</div>
|
||||
<div class="input-group vertical">
|
||||
<label for="toastBackColor">Toast background color:</label>
|
||||
<input type="text" id="toastBackColor" value="#212121" 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>
|
||||
<input type="text" id="toastBackColor" value="#424242" autocomplete="off"/>
|
||||
<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>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -1390,8 +1393,8 @@
|
|||
flavorFile +='// structured like the flavor description below, will be included in your final CSS file.\n';
|
||||
flavorFile +='/*\n';
|
||||
flavorFile +=' Flavor name: Custom (mini-custom)\n';
|
||||
flavorFile +=' Author: Undefined \n';
|
||||
flavorFile +=' mini.css version: v3.0.0\n';
|
||||
flavorFile +=' Generated online - https://minicss.org/flavors\n';
|
||||
flavorFile +=' mini.css version: v3.0.0-alpha.3\n';
|
||||
flavorFile +='*/\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';
|
||||
|
|
@ -1440,6 +1443,9 @@
|
|||
flavorFile +='\n';
|
||||
flavorFile +='@import \'../mini/layout\';\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-width: '+flavorData.layout.cardSmallWidth+'px; // Width for small cards.\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-group-border-color: '+flavorData.inputControl.buttonGroupBorderColor+'; // Border color for button groups.\n';
|
||||
flavorFile +='\n';
|
||||
flavorFile +='@import \'../mini/inputControl\';\n';
|
||||
flavorFile +='@import \'../mini/input_control\';\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-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';
|
||||
|
|
@ -1538,7 +1547,7 @@
|
|||
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-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-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';
|
||||
|
|
@ -1588,8 +1597,8 @@
|
|||
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-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 +='$collapse-label-height: '+flavorData.contextual.collapseLabelHeight+'; // Height for the labels in the collapse 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+'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-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';
|
||||
|
|
@ -1600,6 +1609,10 @@
|
|||
flavorFile +='$collapse-content-back-color: '+flavorData.contextual.collapseContentBackColor+'; // Background color for collapse component\'s content panes\n';
|
||||
flavorFile +='\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-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';
|
||||
|
|
@ -1616,7 +1629,7 @@
|
|||
}
|
||||
if(flavorData.progress.enabled){
|
||||
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-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';
|
||||
|
|
@ -1627,6 +1640,9 @@
|
|||
flavorFile +='\n';
|
||||
flavorFile +='@import \'../mini/progress\';\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-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';
|
||||
|
|
@ -1665,7 +1681,85 @@
|
|||
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>
|
||||
</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
15
docs/v3/jszip.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/v3/mini.zip
Normal file
BIN
docs/v3/mini.zip
Normal file
Binary file not shown.
354
docs/v3/mini/_contextual.scss
Normal file
354
docs/v3/mini/_contextual.scss
Normal 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
27
docs/v3/mini/_contextual_mixins.scss
Normal 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
304
docs/v3/mini/_core.scss
Normal 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
131
docs/v3/mini/_icon.scss
Normal 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
317
docs/v3/mini/_input_control.scss
Normal 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
46
docs/v3/mini/_input_control_mixins.scss
Normal 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
199
docs/v3/mini/_layout.scss
Normal 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
62
docs/v3/mini/_layout_mixins.scss
Normal 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
314
docs/v3/mini/_navigation.scss
Normal 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
113
docs/v3/mini/_progress.scss
Normal 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
32
docs/v3/mini/_progress_mixins.scss
Normal 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
371
docs/v3/mini/_table.scss
Normal 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
169
docs/v3/mini/_utility.scss
Normal 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
202
docs/v3/sass.js
Normal 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
839
docs/v3/sass.worker.js
Normal file
File diff suppressed because one or more lines are too long
116
package-lock.json
generated
Normal file
116
package-lock.json
generated
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,10 @@
|
|||
"url": "git+https://github.com/Chalarangelo/mini.css.git"
|
||||
},
|
||||
"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": [
|
||||
"css",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
/*
|
||||
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: (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-line-height: 1.5 !default; // Line height for most elements
|
||||
$base-font-size: 1rem !default; // Font sizing for all elements
|
||||
|
|
|
|||
|
|
@ -109,12 +109,12 @@ $box-shadow-generic-var: '--generic-box-shadow' !default;
|
|||
}
|
||||
}
|
||||
// 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} {
|
||||
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} {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -125,7 +125,7 @@ $box-shadow-generic-var: '--generic-box-shadow' !default;
|
|||
}
|
||||
}
|
||||
// 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} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
|
|
@ -139,7 +139,7 @@ $box-shadow-generic-var: '--generic-box-shadow' !default;
|
|||
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} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
|
|
|
|||
Loading…
Reference in a new issue