Updated docs for release
This commit is contained in:
Angelos Chalaris
parent
ad609410c5
commit
5dc5b0529f
89 changed files with 91 additions and 8174 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 7.6 KiB |
|
|
@ -67,7 +67,7 @@ var indexHtml = `<!DOCTYPE html>
|
|||
</body>
|
||||
</html>`;
|
||||
|
||||
var indexOutputPath = './docs/v3/index.html'; // This path is relative to package.json.
|
||||
var indexOutputPath = './docs/index.html'; // This path is relative to package.json.
|
||||
|
||||
fs.writeFile(indexOutputPath,
|
||||
`${indexHtml}`,
|
||||
|
|
@ -76,7 +76,7 @@ fs.writeFile(indexOutputPath,
|
|||
|
||||
// DOCUMENTATION
|
||||
var docFragments = require('./doc-fragments/docFragments'); // Gets all document fragments as a list.
|
||||
var docOutputPath = './docs/v3/docs.html'; // This path is relative to package.json.
|
||||
var docOutputPath = './docs/docs.html'; // This path is relative to package.json.
|
||||
|
||||
const FEATHER_BANNER = `<a href="https://feathericons.com/" class="section double-padded" id="feather-banner" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f8f8f8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17" y1="15" x2="9" y2="15"></line></svg> Powered by Feather</a>`;
|
||||
|
||||
|
|
@ -193,7 +193,7 @@ fs.writeFile(docOutputPath,
|
|||
|
||||
// CUSTOMIZATION
|
||||
var custFragments = require('./doc-fragments/customizationFragments'); // Gets all customization fragments as a list.
|
||||
var custOutputPath = './docs/v3/flavors.html'; // This path is relative to package.json.
|
||||
var custOutputPath = './docs/flavors.html'; // This path is relative to package.json.
|
||||
|
||||
var customizationStart = `<!DOCTYPE html><html lang="en"><head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&subset=latin-ext" rel="stylesheet">
|
||||
|
|
@ -254,12 +254,12 @@ fs.writeFile(custOutputPath,
|
|||
|
||||
var miniSassFiles = ['_contextual_mixins', '_contextual', '_core', '_icon', '_input_control_mixins', '_input_control', '_layout_mixins', '_layout', '_navigation', '_progress_mixins', '_progress', '_table', '_utility'];
|
||||
|
||||
miniSassFiles.forEach(f => fs.createReadStream(`./src/mini/${f}.scss`).pipe(fs.createWriteStream(`./docs/v3/mini/${f}.scss`)));
|
||||
miniSassFiles.forEach(f => fs.createReadStream(`./src/mini/${f}.scss`).pipe(fs.createWriteStream(`./docs/mini/${f}.scss`)));
|
||||
|
||||
var flavorFiles = ['mini-default', 'mini-dark', 'mini-nord'];
|
||||
|
||||
flavorFiles.forEach(f => {
|
||||
fs.createReadStream(`./src/flavors/${f}.scss`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.scss`));
|
||||
fs.createReadStream(`./dist/${f}.css`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.css`));
|
||||
fs.createReadStream(`./dist/${f}.min.css`).pipe(fs.createWriteStream(`./docs/v3/flavors/${f}.min.css`));
|
||||
fs.createReadStream(`./src/flavors/${f}.scss`).pipe(fs.createWriteStream(`./docs/flavorFiles/${f}.scss`));
|
||||
fs.createReadStream(`./dist/${f}.css`).pipe(fs.createWriteStream(`./docs/flavorFiles/${f}.css`));
|
||||
fs.createReadStream(`./dist/${f}.min.css`).pipe(fs.createWriteStream(`./docs/flavorFiles/${f}.min.css`));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ module.exports = {
|
|||
title: 'Prebuilt flavors',
|
||||
content: `<div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p>
|
||||
<ul>
|
||||
<li>Default: <a href="flavors/mini-default.scss" download>SCSS file</a> - <a href="flavors/mini-default.css" download>CSS file</a> - <a href="flavors/mini-default.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Dark: <a href="flavors/mini-dark.scss" download>SCSS file</a> - <a href="flavors/mini-dark.css" download>CSS file</a> - <a href="flavors/mini-dark.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Nord: <a href="flavors/mini-nord.scss" download>SCSS file</a> - <a href="flavors/mini-nord.css" download>CSS file</a> - <a href="flavors/mini-nord.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Default: <a href="flavorFiles/mini-default.scss" download>SCSS file</a> - <a href="flavorFiles/mini-default.css" download>CSS file</a> - <a href="flavorFiles/mini-default.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Dark: <a href="flavorFiles/mini-dark.scss" download>SCSS file</a> - <a href="flavorFiles/mini-dark.css" download>CSS file</a> - <a href="flavorFiles/mini-dark.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Nord: <a href="flavorFiles/mini-nord.scss" download>SCSS file</a> - <a href="flavorFiles/mini-nord.css" download>CSS file</a> - <a href="flavorFiles/mini-nord.min.css" download>CSS file (minified)</a></li>
|
||||
</ul></div>`
|
||||
}
|
||||
|
|
|
|||
BIN
docs/favicon.png
Normal file
BIN
docs/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
docs/favicon_small.png
Normal file
BIN
docs/favicon_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -29,9 +29,9 @@
|
|||
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="prebuilt-flavors" class="card fluid">
|
||||
<h2 class="section double-padded">Prebuilt flavors</h2><div class="section"><p><strong>mini.css</strong> comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:</p>
|
||||
<ul>
|
||||
<li>Default: <a href="flavors/mini-default.scss" download>SCSS file</a> - <a href="flavors/mini-default.css" download>CSS file</a> - <a href="flavors/mini-default.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Dark: <a href="flavors/mini-dark.scss" download>SCSS file</a> - <a href="flavors/mini-dark.css" download>CSS file</a> - <a href="flavors/mini-dark.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Nord: <a href="flavors/mini-nord.scss" download>SCSS file</a> - <a href="flavors/mini-nord.css" download>CSS file</a> - <a href="flavors/mini-nord.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Default: <a href="flavorFiles/mini-default.scss" download>SCSS file</a> - <a href="flavorFiles/mini-default.css" download>CSS file</a> - <a href="flavorFiles/mini-default.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Dark: <a href="flavorFiles/mini-dark.scss" download>SCSS file</a> - <a href="flavorFiles/mini-dark.css" download>CSS file</a> - <a href="flavorFiles/mini-dark.min.css" download>CSS file (minified)</a></li>
|
||||
<li>Nord: <a href="flavorFiles/mini-nord.scss" download>SCSS file</a> - <a href="flavorFiles/mini-nord.css" download>CSS file</a> - <a href="flavorFiles/mini-nord.min.css" download>CSS file (minified)</a></li>
|
||||
</ul></div>
|
||||
</div><br/><div id="flavor-tools" class="card fluid">
|
||||
<h2 class="section double-padded">Complementary tools</h2><div class="section"><p>Building a custom flavor can be complex, even with the amount of streamlining we have provided. We have hand-picked the following tools to assist you in creating the perfect flavor for your needs:</p>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#FCD999;" d="M378.203,260.162L378.203,260.162L250.74,132.725v-0.001c-17.489-5.419-36.035-8.434-55.258-8.635
|
||||
v386.822c105.882-1.104,191.363-87.268,191.363-193.411C386.844,297.536,383.818,278.28,378.203,260.162z"/>
|
||||
<path style="fill:#FEECCC;" d="M195.482,124.089c-0.683-0.011-1.377-0.011-2.059-0.011C86.596,124.078,0,210.674,0,317.5
|
||||
C0,376.595,26.5,429.5,68.266,464.979l70.896,38.23c17.215,5.021,35.424,7.714,54.261,7.714c0.683,0,1.377,0,2.059-0.011
|
||||
c87.029-1.343,157.23-87.415,157.23-193.411S282.51,125.432,195.482,124.089z"/>
|
||||
<path style="fill:#FCD999;" d="M250.74,132.725c-42.26,12.611-73.074,51.769-73.074,98.131c0,56.554,45.847,102.4,102.4,102.4
|
||||
c46.369,0,85.531-30.822,98.137-73.094C359.385,199.443,311.461,151.538,250.74,132.725z"/>
|
||||
<path style="fill:#FBC566;" d="M114.369,419.911l14.302,79.906c3.447,1.229,6.952,2.355,10.49,3.391
|
||||
c12.14-8.181,20.127-22.062,20.127-37.797C159.289,440.471,139.23,420.218,114.369,419.911z"/>
|
||||
<g>
|
||||
<path style="fill:#FCD999;" d="M136.533,465.411c0,13.733-3.049,26.066-7.862,34.406c-22.3-7.919-42.724-19.82-60.405-34.839
|
||||
c0.25-24.951,20.526-45.079,45.511-45.079c0.193,0,0.387,0,0.592,0.011C126.669,420.537,136.533,440.676,136.533,465.411z"/>
|
||||
<circle style="fill:#FCD999;" cx="73.956" cy="283.363" r="17.067"/>
|
||||
</g>
|
||||
<path style="fill:#FBC566;" d="M226.759,373.251v68.267c18.842,0,34.133-15.28,34.133-34.133
|
||||
C260.892,388.531,245.601,373.251,226.759,373.251z"/>
|
||||
<path style="fill:#FCD999;" d="M226.759,373.251c6.281,0,11.378,15.28,11.378,34.133c0,18.853-5.097,34.133-11.378,34.133
|
||||
c-18.853,0-34.133-15.28-34.133-34.133C192.626,388.531,207.906,373.251,226.759,373.251z"/>
|
||||
<g>
|
||||
<circle style="fill:#F9B233;" cx="412.809" cy="33.746" r="8.533"/>
|
||||
<circle style="fill:#F9B233;" cx="436.952" cy="9.61" r="8.533"/>
|
||||
<path style="fill:#F9B233;" d="M404.769,138.335c-8.886,8.886-23.295,8.886-32.181,0c-8.886-8.886-8.886-23.295,0-32.181
|
||||
l16.09-16.09c8.886-8.886,8.886-23.295,0-32.181s-23.295-8.886-32.181,0l-60.34,60.34l-39.261,89.465l55.352,55.352
|
||||
L404.769,138.335z"/>
|
||||
</g>
|
||||
<path style="fill:#FA9647;" d="M505.335,69.95c-8.886-8.886-23.295-8.886-32.181,0L296.157,246.946l96.544-32.181l112.634-112.634
|
||||
C514.222,93.244,514.222,78.836,505.335,69.95z"/>
|
||||
<path style="fill:#FD5F6E;" d="M360.52,214.765v-32.181l-128.725,96.544c26.66,26.66,69.883,26.659,96.544,0l64.363-64.363H360.52z"
|
||||
/>
|
||||
<path style="fill:#FA9647;" d="M328.339,182.584v-32.182h-32.181v-32.181l-64.363,64.363c-26.659,26.659-26.659,69.883,0,96.544
|
||||
c8.886,8.886,37.703-5.522,64.363-32.181l64.363-64.363H328.339z"/>
|
||||
<path style="fill:#FEECCC;" d="M280.066,196.722l-11.378,34.133l11.378,34.133c18.852,0,34.133-15.282,34.133-34.133
|
||||
S298.918,196.722,280.066,196.722z"/>
|
||||
<path style="fill:#FFFFFF;" d="M245.933,230.856c0,18.852,15.283,34.133,34.133,34.133v-68.267
|
||||
C261.216,196.722,245.933,212.004,245.933,230.856z"/>
|
||||
<g>
|
||||
<circle style="fill:#FCD999;" cx="108.089" cy="232.163" r="8.533"/>
|
||||
<circle style="fill:#FCD999;" cx="295.026" cy="407.381" r="8.533"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.5 KiB |
|
|
@ -1,51 +0,0 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#BBE095;" d="M486.935,146.104l-7.905,7.905l-144.751,23.714L394.063,70.51l92.873-45.444
|
||||
C520.355,58.487,520.355,112.682,486.935,146.104z"/>
|
||||
<path style="fill:#E0F4B4;" d="M486.935,25.065L334.278,177.722l23.714-144.751l7.905-7.905
|
||||
C399.318-8.355,453.513-8.355,486.935,25.065z"/>
|
||||
<polygon style="fill:#5EDAFF;" points="357.992,154.008 203.478,308.522 243.002,147.96 357.992,32.97 "/>
|
||||
<polygon style="fill:#089AC6;" points="243.002,268.997 104.298,407.701 128.013,262.951 243.002,147.96 "/>
|
||||
<path style="fill:#4B58E3;" d="M128.013,383.987l-68.32,68.32c0-80.897-8.157-112.88,25.224-146.261l43.096-43.096
|
||||
C128.013,262.951,128.013,383.987,128.013,383.987z"/>
|
||||
<polygon style="fill:#089AC6;" points="479.029,154.008 364.04,268.997 203.478,308.522 357.992,154.008 "/>
|
||||
<polygon style="fill:#4B58E3;" points="364.04,268.997 249.049,383.987 104.298,407.701 243.002,268.997 "/>
|
||||
<g>
|
||||
<path style="fill:#693F9E;" d="M249.049,383.987l-43.096,43.096c-33.382,33.382-65.365,25.224-146.261,25.224l68.32-68.32H249.049z
|
||||
"/>
|
||||
<path style="fill:#693F9E;" d="M2.619,509.381c-3.492-3.492-3.492-9.154,0-12.648L456.897,42.457c3.492-3.492,9.156-3.492,12.648,0
|
||||
c3.492,3.492,3.492,9.154,0,12.648L15.267,509.381C11.774,512.873,6.112,512.873,2.619,509.381z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 390 KiB After Width: | Height: | Size: 390 KiB |
BIN
docs/index-splash_original.jpg
Normal file
BIN
docs/index-splash_original.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
63
docs/index.html
Normal file
63
docs/index.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&subset=latin-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites.">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="index-splash">
|
||||
<div class="index-splash-image no-filter"></div>
|
||||
<div class="index-splash-image"></div>
|
||||
<h1 class="splash">mini<small>.css</small></h1>
|
||||
<p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p>
|
||||
<p id="version-info">v3.0.0</p>
|
||||
<a class="button splash" href="docs">Get started</a>
|
||||
</div>
|
||||
<header class="row sticky">
|
||||
<span class="col-md-1 col-lg-2"></span>
|
||||
<span class="logo col-sm-3 col-md">mini.css</span>
|
||||
<a class="button col-sm col-md" href="docs">
|
||||
<svg 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" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
<span> Docs</span></a>
|
||||
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
|
||||
<svg 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" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<span> Github</span></a>
|
||||
<a class="button col-sm col-md" href="flavors">
|
||||
<svg 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" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
|
||||
<span> Flavors</span></a>
|
||||
<span class="col-md-1 col-lg-2"></span>
|
||||
</header>
|
||||
<div class="row padded">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<img src="./responsive.svg" class="feature-image">
|
||||
<h2 class="feature-header">Fast and Responsive</h2><br>
|
||||
<p>Want to build websites that look beautiful on any and all devices, but also load fast on mobile connections? Then <strong>mini.css</strong> is the right tool for you! Its tiny size (under 10KB gzipped), along with its <strong>responsive grid</strong> and modern components ensures that all your users are satisfied and can access your website anytime, anywhere. Bridging the gap between fully-featured frameworks (e.g. Bootstrap and Semantic UI) and micro frameworks (e.g. Milligram and Pure.CSS), <strong>mini.css</strong> packs a lot of features in a small package, while it relies solely on CSS, meaning you do not have to worry about any conflicts with other Javascript libraries you might be using.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row padded alt-back">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<img src="./tailored.svg" class="feature-image">
|
||||
<h2 class="feature-header">Tailored to Your Needs</h2><br>
|
||||
<p>Creating a CSS framework that caters to everyone's needs is no easy task, but <strong>mini.css</strong> manages to rise to the occasion by providing extensive and coherent documentation in combination with templates, examples and semantic HTML5 markup. Modern UX patterns and accessibility guidelines are well-documented and can be used out of the box, using one of the unique <strong>flavors</strong> that the framework provides. If you still want more, you can create your own custom flavor or tweak an existing one just by opening its CSS file and changing a few custom properties. It's that simple! </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row padded primary-section">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<h2 class="feature-header">Get started now!</h2><br>
|
||||
<p>Head over to the <a href="docs">documentation</a> to learn how to get started using <strong>mini.css</strong>, as well as what flavors and components are availble and how to use them to create the website or web app you've always wanted. If you like the framework and want to support it, remember to to star it on Github. It means a lot to us and it only takes a couple of seconds!</p>
|
||||
<p style="text-align:center;"><a href="docs" class="button">Get started</a></p>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="centered">mini.css on Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p style="text-align: justify;"><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>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer>
|
||||
</body>
|
||||
</html>
|
||||
0
docs/v3/jszip.min.js → docs/jszip.min.js
vendored
0
docs/v3/jszip.min.js → docs/jszip.min.js
vendored
BIN
docs/page_thumb.png
Normal file
BIN
docs/page_thumb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
|
Before Width: | Height: | Size: 925 B After Width: | Height: | Size: 926 B |
0
docs/v3/style.min.css → docs/style.min.css
vendored
0
docs/v3/style.min.css → docs/style.min.css
vendored
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,54 +0,0 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<path style="fill:#F74D37;" d="M355.501,245.374L213.124,387.75c-24.541,24.542-64.333,24.542-88.874,0s-24.542-64.332,0-88.874
|
||||
l142.376-142.376l-72.064-72.064L48.257,230.741c-64.342,64.342-64.342,168.661,0,233.002s168.661,64.342,233.002,0l146.306-146.306
|
||||
L355.501,245.374z"/>
|
||||
<path style="fill:#C43D2C;" d="M48.256,463.744l75.994-75.994c24.541,24.542,64.333,24.542,88.874,0L355.5,245.374l72.064,72.064
|
||||
L281.259,463.743C216.916,528.086,112.598,528.086,48.256,463.744z"/>
|
||||
<g>
|
||||
|
||||
<rect x="276.246" y="33.588" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 447.431 311.1306)" style="fill:#F9D026;" width="23.813" height="58.623"/>
|
||||
<rect x="230.5" style="fill:#F9D026;" width="23.815" height="58.624"/>
|
||||
<rect x="292.441" y="96.746" style="fill:#F9D026;" width="58.624" height="23.815"/>
|
||||
</g>
|
||||
<g>
|
||||
|
||||
<rect x="437.184" y="194.529" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 608.3666 699.6761)" style="fill:#E7C224;" width="23.813" height="58.623"/>
|
||||
<rect x="391.446" y="160.935" style="fill:#E7C224;" width="23.815" height="58.624"/>
|
||||
<rect x="453.376" y="257.681" style="fill:#E7C224;" width="58.624" height="23.815"/>
|
||||
</g>
|
||||
<rect x="314.661" y="270.675" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 406.8443 783.1379)" style="fill:#B7B9C0;" width="101.909" height="73.266"/>
|
||||
<rect x="153.734" y="109.741" transform="matrix(0.7071 0.7071 -0.7071 0.7071 163.4544 -101.8644)" style="fill:#D8D9DD;" width="101.909" height="73.266"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -375,3 +375,4 @@
|
|||
- Updated the flavor generation to show the progress.
|
||||
- Fixed documentation links.
|
||||
- Updated generator, it now adds and updates the proper folders along with everything else.
|
||||
- Rebuilt docs.
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
|
|
@ -1,63 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&subset=latin-ext" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./style.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites.">
|
||||
<!DOCTYPE html><html><head>
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="index-splash">
|
||||
<div class="index-splash-image no-filter"></div>
|
||||
<div class="index-splash-image"></div>
|
||||
<h1 class="splash">mini<small>.css</small></h1>
|
||||
<p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p>
|
||||
<p id="version-info">v3.0.0</p>
|
||||
<a class="button splash" href="docs">Get started</a>
|
||||
</div>
|
||||
<header class="row sticky">
|
||||
<span class="col-md-1 col-lg-2"></span>
|
||||
<span class="logo col-sm-3 col-md">mini.css</span>
|
||||
<a class="button col-sm col-md" href="docs">
|
||||
<svg 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" style="height: 20px; vertical-align: text-top;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
||||
<span> Docs</span></a>
|
||||
<a class="button col-sm col-md" href="https://github.com/Chalarangelo/mini.css" target="_blank">
|
||||
<svg 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" style="height: 20px; vertical-align: text-top;"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
<span> Github</span></a>
|
||||
<a class="button col-sm col-md" href="flavors">
|
||||
<svg 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" style="height: 20px; vertical-align: text-top;"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg>
|
||||
<span> Flavors</span></a>
|
||||
<span class="col-md-1 col-lg-2"></span>
|
||||
</header>
|
||||
<div class="row padded">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<img src="./responsive.svg" class="feature-image">
|
||||
<h2 class="feature-header">Fast and Responsive</h2><br>
|
||||
<p>Want to build websites that look beautiful on any and all devices, but also load fast on mobile connections? Then <strong>mini.css</strong> is the right tool for you! Its tiny size (under 10KB gzipped), along with its <strong>responsive grid</strong> and modern components ensures that all your users are satisfied and can access your website anytime, anywhere. Bridging the gap between fully-featured frameworks (e.g. Bootstrap and Semantic UI) and micro frameworks (e.g. Milligram and Pure.CSS), <strong>mini.css</strong> packs a lot of features in a small package, while it relies solely on CSS, meaning you do not have to worry about any conflicts with other Javascript libraries you might be using.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row padded alt-back">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<img src="./tailored.svg" class="feature-image">
|
||||
<h2 class="feature-header">Tailored to Your Needs</h2><br>
|
||||
<p>Creating a CSS framework that caters to everyone's needs is no easy task, but <strong>mini.css</strong> manages to rise to the occasion by providing extensive and coherent documentation in combination with templates, examples and semantic HTML5 markup. Modern UX patterns and accessibility guidelines are well-documented and can be used out of the box, using one of the unique <strong>flavors</strong> that the framework provides. If you still want more, you can create your own custom flavor or tweak an existing one just by opening its CSS file and changing a few custom properties. It's that simple! </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row padded primary-section">
|
||||
<div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
|
||||
<h2 class="feature-header">Get started now!</h2><br>
|
||||
<p>Head over to the <a href="docs">documentation</a> to learn how to get started using <strong>mini.css</strong>, as well as what flavors and components are availble and how to use them to create the website or web app you've always wanted. If you like the framework and want to support it, remember to to star it on Github. It means a lot to us and it only takes a couple of seconds!</p>
|
||||
<p style="text-align:center;"><a href="docs" class="button">Get started</a></p>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="centered">mini.css on Github</a>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="row"><div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"><p style="text-align: justify;"><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>. Photo by <a href="https://unsplash.com/photos/vjMgqUkS8q8" target="_blank">Christopher Gower</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>.</p></div></footer>
|
||||
</body>
|
||||
</html>
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
|
||||
</head></html>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<!DOCTYPE html><html><head>
|
||||
<!-- TODO: Rename this to index.html prior to final release of Gluon, move all other doc files to the main docs folder -->
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<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">
|
||||
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
|
||||
</head></html>
|
||||
|
|
@ -1,644 +0,0 @@
|
|||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
/*
|
||||
Flavor name: Dark (mini-dark)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.7
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #d0d0d0; // Text and general foreground color
|
||||
$back-color: #232e33; // Body background color
|
||||
$base-font-family: // Default font stack for all elements:
|
||||
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [1]
|
||||
$base-font-size: 1rem; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$body-margin: 0; // Margin for the body
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
|
||||
$h1-font-size: 2rem; // Font size of h1
|
||||
$h2-font-size: 1.6875rem; // Font size for h2
|
||||
$h3-font-size: 1.4375rem; // Font size for h3
|
||||
$h4-font-size: 1.1875rem; // Font size for h4
|
||||
$h5-font-size: 1rem; // Font size for h5
|
||||
$h6-font-size: 0.8125rem; // Font size for h6
|
||||
$heading-line-height: 1.2em; // Line height for all headings
|
||||
$heading-margin: 0.75rem 0.5rem; // Margin for all headings
|
||||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #acacac; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 0.75em; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-0.25rem; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 0.5rem; // Margin for <p> elements
|
||||
$list-margin: 0.5rem; // Margin for <ol> and <ul> elements
|
||||
$list-left-padding: 1rem; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5rem; // <hr> margin
|
||||
$horizontal-rule-border-style: $_1px solid #9e9e9e;// Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$horizontal-rule-fancy-gradient:"to right, #616161, #9e9e9e, #616161"; // Gradient style for fancy horizontal rule
|
||||
$blockquote-back-color: #232e33; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 0.5rem; // Margin for <blockquote>
|
||||
$blockquote-padding: 0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 4*$_1px solid #192024;// Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #acacac; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 0.625rem; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 0 2*$_1px 2*$_1px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: none; // Box shadow for <blockquote>
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
||||
$code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #20292e; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2*$_1px; // Border radius for <code>
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
$pre-element-padding: 0.75rem; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2*$_1px 2*$_1px 0; // Border radius for <pre>
|
||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||
$pre-element-box-shadow: none; // Box shadow for <pre>
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 4*$_1px solid #01579b;// Style of the sidebar of <pre>
|
||||
$kbd-element-padding: $code-element-padding; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #0c0c0c; // Text color for <kbd>
|
||||
$kbd-element-back-color: #fafafa; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: $code-element-border-radius; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: $code-element-box-shadow; // Box shadow for <kbd>
|
||||
$style-samp-element: false; // Should styles for <samp> be included? (`true`/`false`) [8]
|
||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||
//$samp-element-back-color: #2196f3; // Background color for <samp>
|
||||
//$samp-element-border-style: 0; // Border style for <samp>
|
||||
//$samp-element-border-radius: 2px; // Border radius for <samp>
|
||||
//$samp-element-box-shadow: // Box shadow for <samp>
|
||||
//0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
|
||||
$small-font-size: 0.75em; // Font size for <small> elements
|
||||
$sup-font-size: 0.75em; // Font size for <sup> elements
|
||||
$sub-font-size: 0.75em; // Font size for <sub> elements
|
||||
$sup-top: -0.5em; // <sup> top
|
||||
$sub-bottom: -0.25em; // <sub> bottom
|
||||
$link-fore-color: #039be5; // Text color for <a>
|
||||
$link-visited-fore-color: #0288d1; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
|
||||
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
|
||||
$figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #acacac; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||
// element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
|
||||
// the way that it's calculated.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// color, as defined in $link-fore-color.
|
||||
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||
// Variables for grid elements
|
||||
$use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
|
||||
$include-parent-layout: true; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 0.75rem; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-row-parent-layout-prefix:'cols'; // Class name prefix for the grid's row parents [2]
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
||||
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||
$grid-column-padding: 0 0.25rem; // Padding for the columns of the grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Notes:
|
||||
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
||||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #1c2529; // Background color for forms
|
||||
$form-fore-color: #9e9e9e; // Text color for forms
|
||||
$form-border-style: $_1px solid #20292e; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 0.5rem; // Margin for forms
|
||||
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
|
||||
$form-box-shadow: none; // Box shadow for forms
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: $_1px solid #263238; // Border style for fieldset
|
||||
$fieldset-border-radius:2*$_1px; // Border radius for fieldset
|
||||
$fieldset-margin: 0.125rem; // Margin for fieldset
|
||||
$fieldset-padding: 0.5rem; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.875rem; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 0.125rem 0.25rem; // Padding for legend
|
||||
$label-padding: 0.25rem 0.5rem; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$input-group-fluid-name:'fluid'; // Class name for fluid input groups
|
||||
$include-vertical-input-group: true; // Should vertical input groups be included? (`true`/`false`) [1]
|
||||
$input-group-vertical-name: 'vertical'; // Class name for vertical input groups.
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #39444a; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: $_1px solid #263238; // Border style for input
|
||||
$input-border-radius: 2*$_1px; // Border radius for input
|
||||
$input-margin: 0.25rem; // Margin for input
|
||||
$input-padding: 0.5rem 0.75rem; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
$input-invalid-border-color: #d32f2f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #263238; // Background color for readonly input
|
||||
$input-readonly-border-color: #20292e; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#757575; // Text color for input placeholder
|
||||
$select-padding-right: 1.5rem; // Right padding for select element
|
||||
$button-back-color: #39444a; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2*$_1px; // Border radius for button elements
|
||||
$button-padding: 0.5rem 0.75rem; // Padding for button elements
|
||||
$button-margin: 0.5rem; // Margin for button elements
|
||||
$button-box-shadow: none; // Box shadow for buttons
|
||||
$button-disabled-opacity: 0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class for button groups
|
||||
$button-group-border-style: $_1px solid #263238; // Border style for button groups
|
||||
$button-group-margin: $button-margin; // Margin for button groups
|
||||
$button-group-box-shadow: none; // Box shadow for button groups
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #0277bd; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
|
||||
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary';// Class name for button variant 2
|
||||
$button-variant2-back-color: #c62828; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 0.9; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
|
||||
$button-variant2-fore-color: #fafafa; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary';// Class name for button variant 3
|
||||
$button-variant3-back-color: #5f9133; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 0.9; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
|
||||
$button-variant3-fore-color: #fafafa; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: #ebecec; // Background color for button variant 4
|
||||
$button-variant4-back-opacity: 0.9; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: 1; // Background opacity for button variant 4 on hover or focus
|
||||
$button-variant4-fore-color: #0c0c0c; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: $_1px; // Border radius for button style 1
|
||||
$button-style1-padding: 0.25rem 0.375rem; // Padding for button style 1
|
||||
$button-style1-margin: 0.5rem; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4*$_1px; // Border radius for button style 2
|
||||
$button-style2-padding: 0.75rem 1.125rem; // Padding for button style 2
|
||||
$button-style2-margin: 0.5rem; // Margin for button style 2
|
||||
$checkbox-size: 1rem; // Size for checkbox/radio [3]
|
||||
$checkbox-back-color: $input-back-color;// Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color;// Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: $_1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #1c2529; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius;// Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$checkbox-box-shadow: none; // Box shadow for checkbox/radio
|
||||
$include-switch: true; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch'; // Class name for switch components
|
||||
$switch-bar-back-color: #324148; // Back color for the switch's bar
|
||||
$switch-on-bar-back-color: #39444a; // Back color for the switch's bar when the switch is turned on
|
||||
$switch-bar-width: 1.75rem; // Width for the switch's bar
|
||||
$switch-bar-height: 0.875rem; // Height for the switch's bar
|
||||
$switch-bar-border-style: 0; // Border style for the switch's bar
|
||||
$switch-bar-border-radius: 0.5rem; // Borer radius for the switch's bar
|
||||
$switch-bottom-spacing: 0.5rem; // Bottom spacing for the switch's bar
|
||||
$switch-bar-box-shadow: none; // Box shadow for the switch's bar
|
||||
$switch-knob-back-color: #39444a; // Back color for the switch's knob
|
||||
$switch-on-knob-back-color: #0277bd; // Back color for the switch's knob when the switch is turned on
|
||||
$switch-knob-width: 1.25rem; // Width for the switch's knob
|
||||
$switch-knob-height: 1.25rem; // Height for the switch's knob
|
||||
$switch-knob-border-style: 0; // Border style for the switch's knob
|
||||
$switch-knob-border-radius: 100%; // Borer radius for the switch's knob
|
||||
$switch-knob-box-shadow: none; // Box shadow for the switch's knob
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
|
||||
// [2] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #151c1f; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #192024; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #37474f; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: $_1px solid #324148; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 0.75rem 1rem; // Padding for <nav>
|
||||
$nav-margin: 0.5rem; // Margin for <nav>
|
||||
$nav-box-shadow: none; // Box shadow for <nav>
|
||||
$nav-link-fore-color: #3e79bd; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: $_1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #616161; // Subcategory bar color
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: $nav-back-color; // Background color of the drawer component
|
||||
$drawer-border-style: $nav-border-style; // Border style of the drawer component
|
||||
$drawer-border-radius: 0; // Border radius of the drawer component
|
||||
$drawer-width: 320px; // Width of the drawer component
|
||||
$drawer-padding: 0; // Padding of the drawer component
|
||||
$drawer-box-shadow: none; // Box shadow for the drawer component
|
||||
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
|
||||
$drawer-normal-height: calc(100vh - 3rem); // Height of the drawer component when shown as normal menu
|
||||
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
|
||||
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
|
||||
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
|
||||
$drawer-toggle-font-size: 2.5rem; // Font size for the drawer component's toggle icon
|
||||
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
|
||||
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon
|
||||
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
|
||||
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon
|
||||
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: $_1px solid #1c2529; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: none; // Box shadow for <table>
|
||||
$table-caption-font-size: 1.5rem; // Font size for <caption>
|
||||
$table-caption-margin: 0.5rem; // Margin for <caption>
|
||||
$table-row-padding: 0.5rem; // Padding for <tr> - both views
|
||||
$table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #20292e; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Text color for <th>
|
||||
$table-body-back-color: $back-color; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 0.625rem; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
|
||||
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
||||
$include-scrollable-table: true; // Should scrollable <table> elements be included? (`true`/`false`) [3]
|
||||
$table-scrollable-name: 'scrollable'; // Class name for <table> scrollable view
|
||||
$table-scrollable-height: 400px; // Height for <table> scrolalble view.
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: #263238; // Alternate background color for <td> in striped <table>
|
||||
// Notes:
|
||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||
// in order for their mobile headers to display properly.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name.
|
||||
// [3] - If $include-scrollable-table is `true`, then the <table> scrollable view will be included in a class defined by
|
||||
// $table-scrollable-name and a height defined by $table-scrollable-height.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #232e33; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: $_1px solid #616161; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 0.5rem; // Margin for cards
|
||||
$card-box-shadow: none; // Box shadow for cards
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: $_1px solid #757575;// Border style for card sections
|
||||
$card-section-padding: 0.5rem; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #fff176; // Background color for card style 1
|
||||
$card-style1-fore-color: $back-color; // Text color for card style 1
|
||||
$card-style1-border-style: $_1px solid #d1c661; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style:$_1px solid #d1c661;// Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #b71c1c; // Background color for card style 2
|
||||
$card-style2-fore-color: #fafafa; // Text color for card style 2
|
||||
$card-style2-border-style: $_1px solid #a71a1a; // Border style for card style 2
|
||||
$card-style2-border-radius: 0; // Border radius for card style 2
|
||||
$card-style2-section-border-style:$_1px solid #a71a1a;// Border style for card style 2 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #1d262a; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
||||
$card-section-style2-back-color: #171e21; // Background color for card section style 2
|
||||
$card-section-style2-fore-color: $fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 0.75rem; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: none; // Box shadow for the tabs' container
|
||||
$tab-label-back-color: #1d262a; // Background color for tabs' labels
|
||||
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
||||
$tab-label-selected-back-color: #263238; // Background color for open tab's label
|
||||
$tab-label-selected-fore-color: $fore-color; // Text color for open tab's label
|
||||
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
||||
$tab-label-padding: 0.75rem; // Padding for tabs' labels
|
||||
$tab-label-height: 1.5rem; // Height for tabs' labels
|
||||
$tab-border-style: $_1px solid #757575;// Border style for tabs
|
||||
$tab-border-radius: 0; // Border radius for tabs
|
||||
$tab-selected-border-color: #0277bd; // Selected tab's bottom border color
|
||||
$tab-panel-back-color: #232e33; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
$tab-panel-padding: 0.5rem; // Padding for tabs' panels
|
||||
$tab-panel-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 0.9375em; // Font size for <mark>
|
||||
$mark-line-height: 1em; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2*$_1px; // Border radius for <mark>
|
||||
$mark-padding: 0.125em 0.25em; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: none; // Box shadow for <mark>
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #689f38; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 0.25em 0.5em; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$mark-style2-border-radius: 2*$_1px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 1em; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
|
||||
$toast-name: 'toast'; // Class name for toast component
|
||||
$toast-bottom: 1.5rem; // Bottom position for toasts
|
||||
$toast-back-color: #acacac; // Background color for toasts
|
||||
$toast-fore-color: #0c0c0c; // Text color for toasts
|
||||
$toast-border-style: 0; // Border style for toasts
|
||||
$toast-border-radius: 2rem; // Border radius for toasts
|
||||
$toast-padding: 0.75rem 1.5rem; // Padding for toasts
|
||||
$toast-box-shadow: none; // Box shadow for toasts
|
||||
$toast-style1-name: 'small'; // Class name for toast style 1
|
||||
$toast-style1-border-style: 0; // Border style for toast style 1
|
||||
$toast-style1-border-radius:1.5rem; // Border radius for toast style 1
|
||||
$toast-style1-padding: 0.5rem 1rem; // Padding for toast style 1
|
||||
$toast-style2-name: 'large'; // Class name for toast style 2
|
||||
$toast-style2-border-style: 0; // Border style for toast style 2
|
||||
$toast-style2-border-radius:3rem; // Border radius for toast style 2
|
||||
$toast-style2-padding: 1.125rem 2.25rem; // Padding for toast style 2
|
||||
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||
$tooltip-fore-color: #0c0c0c; // Text color for tooltips
|
||||
$tooltip-border-radius: 2*$_1px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 0.5rem; // The size of the tooltip's tail
|
||||
$tooltip-padding: 0.5rem; // Padding for tooltips
|
||||
$tooltip-box-shadow: none; // Box shadow for tooltip-box-shadow
|
||||
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
||||
$include-modal: true; // Should modals be included? (`true`/`false`) [2]
|
||||
$modal-name: 'modal'; // Class name for the modals
|
||||
$modal-back-color: #000; // Background color of the modal overlay
|
||||
$modal-back-opacity: 0.45; // Background opacity of the modal overlay
|
||||
$modal-close-name: 'close'; // Class name of the close element od the modal component.
|
||||
$modal-close-top: 0.75rem; // Top position of the modal component's close icon
|
||||
$modal-close-right: 0.25rem; // Right position of the modal component's close icon
|
||||
// Notes:
|
||||
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
|
||||
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
||||
// included.
|
||||
// [2] - If the value of $include-modal is `true`, a modal component will be created based on the values of the variables
|
||||
// for the modal, as explained in their descriptions.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #39444a; // Background color for <progress>
|
||||
$progress-fore-color: #0277bd; // Progress bar color for <progress>
|
||||
$progress-height: 0.625rem; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 0.5rem; // Left and right margin for <progress>
|
||||
$progress-box-shadow: none; // Box shadow for <progress>
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
$progress-variant1-fore-color: #e53935; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
||||
$progress-variant2-fore-color: #689f38; // Progress bar color for <progress> variant 2
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness: 0.25rem; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #39444a; // Background color for donut spinner
|
||||
$spinner-donut-fore-color: #1565c0; // Foreground color for donut spinner
|
||||
$spinner-donut-size: 1.25rem; // Size for donut spinner
|
||||
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
|
||||
$spinner-donut-variant1-back-color: #39444a; // Background color for donut spinner variant 1
|
||||
$spinner-donut-variant1-fore-color: #c62828; // Foreground color for donut spinner variant 1
|
||||
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
||||
$spinner-donut-variant2-back-color: #39444a; // Background color for donut spinner variant 2
|
||||
$spinner-donut-variant2-fore-color: #2e7d32; // Foreground color for donut spinner variant 2
|
||||
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
|
||||
$spinner-donut-style1-size: 2rem; // Size for donut spinner style 1
|
||||
$spinner-donut-style1-border-thickness: 0.375rem; // Border thickness for donut spinner style 1
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #37474f; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 0.5rem; // Margin for breadcrumbs
|
||||
$breadcrumbs-height: 2rem; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 0.125rem; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 0; // Border radius for breadcrumbs
|
||||
$breadcrumbs-box-shadow: none; // Box shadow for breadcrumbs
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 1.5rem; // Size of the close icon
|
||||
$close-icon-back-color: #39444a; // Background color for the close icon
|
||||
$close-icon-fore-color: #fafafa; // Foreground color for the close icon
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2*$_1px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: // Box shadow value for generic box-shadow style 1
|
||||
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);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 0.5rem; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-small-value: 0.125rem 0.25rem;// Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: 0.25rem 0.375rem;// Padding value for responsive padding on medium screens
|
||||
$responsive-padding-large-value: 0.375rem 0.5rem; // Padding value for responsive padding on large screens
|
||||
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
||||
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
|
||||
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
||||
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
||||
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
|
||||
// names that will be used.
|
||||
// [2] - If the value of $include-clearfix is true, a clearfix class will be created using the value of $clearfix-name to determine the
|
||||
// class name of the clearfix component.
|
||||
// [3] - If the value of $include-center-block is true, a center block class will be created using the value of $center-block-name to
|
||||
// determine the class name of the center block class.
|
||||
// Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
|
||||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
|
||||
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
|
||||
$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
|
||||
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
|
||||
$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
|
||||
@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
|
||||
$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
|
||||
@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
|
||||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
@include make-card-alt-size ($card-size3-name, $card-size3-width);
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
|
||||
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
|
||||
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
|
||||
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color);
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
$card-section-style2-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
@import '../mini/tab';
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
|
||||
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
|
||||
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
|
||||
$mark-style1-border-radius, $mark-style1-padding);
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
|
||||
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
|
||||
$toast-style1-border-radius, $toast-style1-padding);
|
||||
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
|
||||
$toast-style2-border-radius, $toast-style2-padding);
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
|
||||
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
|
||||
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
$spinner-donut-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
|
||||
$spinner-donut-style1-border-thickness);
|
||||
@import '../mini/utility';
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
|
||||
$responsive-margin-medium-value, $responsive-margin-large-value);
|
||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
|
||||
$responsive-padding-medium-value, $responsive-padding-large-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||
@include make-hidden-responsive ($responsive-hidden-prefix);
|
||||
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);
|
||||
|
|
@ -1,644 +0,0 @@
|
|||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.4
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
$back-color: #f8f8f8; // Body background color
|
||||
$base-font-family: // Default font stack for all elements:
|
||||
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [1]
|
||||
$base-font-size: 1rem; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$body-margin: 0; // Margin for the body
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
|
||||
$h1-font-size: 2rem; // Font size of h1
|
||||
$h2-font-size: 1.6875rem; // Font size for h2
|
||||
$h3-font-size: 1.4375rem; // Font size for h3
|
||||
$h4-font-size: 1.1875rem; // Font size for h4
|
||||
$h5-font-size: 1rem; // Font size for h5
|
||||
$h6-font-size: 0.8125rem; // Font size for h6
|
||||
$heading-line-height: 1.2em; // Line height for all headings
|
||||
$heading-margin: 0.75rem 0.5rem; // Margin for all headings
|
||||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 0.75em; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-0.25rem; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 0.5rem; // Margin for <p> elements
|
||||
$list-margin: 0.5rem; // Margin for <ol> and <ul> elements
|
||||
$list-left-padding: 1rem; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5rem; // <hr> margin
|
||||
$horizontal-rule-border-style: $_1px solid #8c8c8c;// Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$horizontal-rule-fancy-gradient:"to right, #bdbdbd, #8c8c8c, #bdbdbd"; // Gradient style for fancy horizontal rule
|
||||
$blockquote-back-color: #eeeeee; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 0.5rem; // Margin for <blockquote>
|
||||
$blockquote-padding: 0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 4*$_1px solid #505050;// Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #505050; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 0.625rem; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 0 2*$_1px 2*$_1px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: none; // Box shadow for <blockquote>
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
||||
$code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e6e6e6; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2*$_1px; // Border radius for <code>
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
$pre-element-padding: 0.75rem; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2*$_1px 2*$_1px 0;// Border radius for <pre>
|
||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||
$pre-element-box-shadow: none; // Box shadow for <pre>
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 4*$_1px solid #1565c0;// Style of the sidebar of <pre>
|
||||
$kbd-element-padding: $code-element-padding; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
|
||||
$kbd-element-back-color: #0c0c0c; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: $code-element-border-radius; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: $code-element-box-shadow; // Box shadow for <kbd>
|
||||
$style-samp-element: false; // Should styles for <samp> be included? (`true`/`false`) [8]
|
||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||
//$samp-element-back-color: #2196f3; // Background color for <samp>
|
||||
//$samp-element-border-style: 0; // Border style for <samp>
|
||||
//$samp-element-border-radius: 2px; // Border radius for <samp>
|
||||
//$samp-element-box-shadow: // Box shadow for <samp>
|
||||
//0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
|
||||
$small-font-size: 0.75em; // Font size for <small> elements
|
||||
$sup-font-size: 0.75em; // Font size for <sup> elements
|
||||
$sub-font-size: 0.75em; // Font size for <sub> elements
|
||||
$sup-top: -0.5em; // <sup> top
|
||||
$sub-bottom: -0.25em; // <sub> bottom
|
||||
$link-fore-color: #0277bd; // Text color for <a>
|
||||
$link-visited-fore-color: #01579b; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
|
||||
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
|
||||
$figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||
// element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
|
||||
// the way that it's calculated.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// color, as defined in $link-fore-color.
|
||||
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||
// Variables for grid elements
|
||||
$use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
|
||||
$include-parent-layout: true; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 0.75rem; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-row-parent-layout-prefix:'cols'; // Class name prefix for the grid's row parents [2]
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
||||
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||
$grid-column-padding: 0 0.25rem; // Padding for the columns of the grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Notes:
|
||||
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
||||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: $_1px solid #c9c9c9; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 0.5rem; // Margin for forms
|
||||
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
|
||||
$form-box-shadow: none; // Box shadow for forms
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: $_1px solid #d0d0d0; // Border style for fieldset
|
||||
$fieldset-border-radius: 2*$_1px; // Border radius for fieldset
|
||||
$fieldset-margin: 0.125rem; // Margin for fieldset
|
||||
$fieldset-padding: 0.5rem; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.875rem; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 0.125rem 0.25rem; // Padding for legend
|
||||
$label-padding: 0.25rem 0.5rem; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$input-group-fluid-name:'fluid'; // Class name for fluid input groups
|
||||
$include-vertical-input-group: true; // Should vertical input groups be included? (`true`/`false`) [1]
|
||||
$input-group-vertical-name: 'vertical'; // Class name for vertical input groups.
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #fafafa; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: $_1px solid #c9c9c9; // Border style for input
|
||||
$input-border-radius: 2*$_1px; // Border radius for input
|
||||
$input-margin: 0.25rem; // Margin for input
|
||||
$input-padding: 0.5rem 0.75rem; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
$input-invalid-border-color: #d32f2f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e5e5e5; // Background color for readonly input
|
||||
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#616161; // Text color for input placeholder
|
||||
$select-padding-right: 1.5rem; // Right padding for <select> element
|
||||
$button-back-color: #dcdcdc; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2*$_1px; // Border radius for button elements
|
||||
$button-padding: 0.5rem 0.75rem; // Padding for button elements
|
||||
$button-margin: 0.5rem; // Margin for button elements
|
||||
$button-box-shadow: none; // Box shadow for buttons
|
||||
$button-disabled-opacity: 0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class for button groups
|
||||
$button-group-border-style: $_1px solid #bdbdbd; // Border style for button groups
|
||||
$button-group-margin: $button-margin; // Margin for button groups
|
||||
$button-group-box-shadow: none; // Box shadow for button groups
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #0277bd; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
|
||||
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary';// Class name for button variant 2
|
||||
$button-variant2-back-color: #c62828; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 0.9; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
|
||||
$button-variant2-fore-color: #fafafa; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary';// Class name for button variant 3
|
||||
$button-variant3-back-color: #5f9133; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 0.9; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
|
||||
$button-variant3-fore-color: #fafafa; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: #0c0c0c; // Background color for button variant 4
|
||||
$button-variant4-back-opacity: 0.9; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: 1; // Background opacity for button variant 4 on hover or focus
|
||||
$button-variant4-fore-color: #fafafa; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: $_1px; // Border radius for button style 1
|
||||
$button-style1-padding: 0.25rem 0.375rem; // Padding for button style 1
|
||||
$button-style1-margin: 0.5rem; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4*$_1px; // Border radius for button style 2
|
||||
$button-style2-padding: 0.75rem 1.125rem; // Padding for button style 2
|
||||
$button-style2-margin: 0.5rem; // Margin for button style 2
|
||||
$checkbox-size: 1rem; // Size for checkbox/radio [3]
|
||||
$checkbox-back-color: $input-back-color;// Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color;// Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: $_1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius;// Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$checkbox-box-shadow: none; // Box shadow for checkbox/radio
|
||||
$include-switch: true; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch'; // Class name for switch components
|
||||
$switch-bar-back-color: #c9c9c9; // Back color for the switch's bar
|
||||
$switch-on-bar-back-color: #dcdcdc; // Back color for the switch's bar when the switch is turned on
|
||||
$switch-bar-width: 1.75rem; // Width for the switch's bar
|
||||
$switch-bar-height: 0.875rem; // Height for the switch's bar
|
||||
$switch-bar-border-style: 0; // Border style for the switch's bar
|
||||
$switch-bar-border-radius: 0.5rem; // Border radius for the switch's bar
|
||||
$switch-bottom-spacing: 0.5rem; // Bottom spacing for the switch's bar
|
||||
$switch-bar-box-shadow: none; // Box shadow for the switch's bar
|
||||
$switch-knob-back-color: #e0e0e0; // Back color for the switch's knob
|
||||
$switch-on-knob-back-color: #0277bd; // Back color for the switch's knob when the switch is turned on
|
||||
$switch-knob-width: 1.25rem; // Width for the switch's knob
|
||||
$switch-knob-height: 1.25rem; // Height for the switch's knob
|
||||
$switch-knob-border-style: 0; // Border style for the switch's knob
|
||||
$switch-knob-border-radius: 100%; // Borer radius for the switch's knob
|
||||
$switch-knob-box-shadow: none; // Box shadow for the switch's knob
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
|
||||
// [2] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #12171a; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #20292e; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #eceff1; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: $_1px solid #c9c9c9; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 0.75rem 1rem; // Padding for <nav>
|
||||
$nav-margin: 0.5rem; // Margin for <nav>
|
||||
$nav-box-shadow: none; // Box shadow for <nav>
|
||||
$nav-link-fore-color: #145caf; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: $_1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #bdbdbd; // Subcategory bar color
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: $nav-back-color; // Background color of the drawer component
|
||||
$drawer-border-style: $nav-border-style; // Border style of the drawer component
|
||||
$drawer-border-radius: 0; // Border radius of the drawer component
|
||||
$drawer-width: 320px; // Width of the drawer component
|
||||
$drawer-padding: 0; // Padding of the drawer component
|
||||
$drawer-box-shadow: none; // Box shadow for the drawer component
|
||||
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
|
||||
$drawer-normal-height: calc(100vh - 3rem); // Height of the drawer component when shown as normal menu
|
||||
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
|
||||
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
|
||||
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
|
||||
$drawer-toggle-font-size: 2.5rem; // Font size for the drawer component's toggle icon
|
||||
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
|
||||
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon
|
||||
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
|
||||
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon
|
||||
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: $_1px solid #c9c9c9; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: none; // Box shadow for <table>
|
||||
$table-caption-font-size: 1.5rem; // Font size for <caption>
|
||||
$table-caption-margin: 0.5rem; // Margin for <caption>
|
||||
$table-row-padding: 0.5rem; // Padding for <tr> - both views
|
||||
$table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #e6e6e6; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Text color for <th>
|
||||
$table-body-back-color: #fafafa; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 0.625rem; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
|
||||
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
||||
$include-scrollable-table: true; // Should scrollable <table> elements be included? (`true`/`false`) [3]
|
||||
$table-scrollable-name: 'scrollable'; // Class name for <table> scrollable view
|
||||
$table-scrollable-height: 400px; // Height for <table> scrolalble view.
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: #e5e5e5; // Alternate background color for <td> in striped <table>
|
||||
// Notes:
|
||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||
// in order for their mobile headers to display properly.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name.
|
||||
// [3] - If $include-scrollable-table is `true`, then the <table> scrollable view will be included in a class defined by
|
||||
// $table-scrollable-name and a height defined by $table-scrollable-height.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: $_1px solid #acacac; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 0.5rem; // Margin for cards
|
||||
$card-box-shadow: none; // Box shadow for cards
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: $_1px solid #c9c9c9;// Border style for card sections
|
||||
$card-section-padding: 0.5rem; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #ffca28; // Background color for card style 1
|
||||
$card-style1-fore-color: $fore-color; // Text color for card style 1
|
||||
$card-style1-border-style: $_1px solid #e8b825;// Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style:$_1px solid #e8b825;// Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #b71c1c; // Background color for card style 2
|
||||
$card-style2-fore-color: #fafafa; // Text color for card style 2
|
||||
$card-style2-border-style: $_1px solid #a71a1a; // Border style for card style 2
|
||||
$card-style2-border-radius: 0; // Border radius for card style 2
|
||||
$card-style2-section-border-style:$_1px solid #a71a1a;// Border style for card style 2 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
||||
$card-section-style2-back-color: #bdbdbd; // Background color for card section style 2
|
||||
$card-section-style2-fore-color: $fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 0.75rem; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: none; // Box shadow for the tabs' container
|
||||
$tab-label-back-color: #e6e6e6; // Background color for tabs' labels
|
||||
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
||||
$tab-label-selected-back-color: #eeeeee; // Background color for open tab's label
|
||||
$tab-label-selected-fore-color: $fore-color; // Text color for open tab's label
|
||||
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
||||
$tab-label-padding: 0.75rem; // Padding for tabs' labels
|
||||
$tab-label-height: 1.5rem; // Height for tabs' labels
|
||||
$tab-border-style: $_1px solid #bdbdbd;// Border style for tabs
|
||||
$tab-border-radius: 0; // Border radius for tabs
|
||||
$tab-selected-border-color: #0277bd; // Selected tab's bottom border color
|
||||
$tab-panel-back-color: #fafafa; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
$tab-panel-padding: 0.5rem; // Padding for tabs' panels
|
||||
$tab-panel-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 0.9375em; // Font size for <mark>
|
||||
$mark-line-height: 1em; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2*$_1px; // Border radius for <mark>
|
||||
$mark-padding: 0.125em 0.25em; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: none; // Box shadow for <mark>
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #689f38; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 0.25em 0.5em; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$mark-style2-border-radius: 2*$_1px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 1em; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
|
||||
$toast-name: 'toast'; // Class name for toast component
|
||||
$toast-bottom: 1.5rem; // Bottom position for toasts
|
||||
$toast-back-color: #424242; // Background color for toasts
|
||||
$toast-fore-color: #fafafa; // Text color for toasts
|
||||
$toast-border-style: 0; // Border style for toasts
|
||||
$toast-border-radius: 2rem; // Border radius for toasts
|
||||
$toast-padding: 0.75rem 1.5rem; // Padding for toasts
|
||||
$toast-box-shadow: none; // Box shadow for toasts
|
||||
$toast-style1-name: 'small'; // Class name for toast style 1
|
||||
$toast-style1-border-style: 0; // Border style for toast style 1
|
||||
$toast-style1-border-radius:1.5rem; // Border radius for toast style 1
|
||||
$toast-style1-padding: 0.5rem 1rem; // Padding for toast style 1
|
||||
$toast-style2-name: 'large'; // Class name for toast style 2
|
||||
$toast-style2-border-style: 0; // Border style for toast style 2
|
||||
$toast-style2-border-radius:3rem; // Border radius for toast style 2
|
||||
$toast-style2-padding: 1.125rem 2.25rem; // Padding for toast style 2
|
||||
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||
$tooltip-fore-color: #fafafa; // Text color for tooltips
|
||||
$tooltip-border-radius: 2*$_1px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 0.5rem; // The size of the tooltip's tail
|
||||
$tooltip-padding: 0.5rem; // Padding for tooltips
|
||||
$tooltip-box-shadow: none; // Box shadow for tooltip-box-shadow
|
||||
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
||||
$include-modal: true; // Should modals be included? (`true`/`false`) [2]
|
||||
$modal-name: 'modal'; // Class name for the modals
|
||||
$modal-back-color: #000; // Background color of the modal overlay
|
||||
$modal-back-opacity: 0.45; // Background opacity of the modal overlay
|
||||
$modal-close-name: 'close'; // Class name of the close element od the modal component.
|
||||
$modal-close-top: 0.75rem; // Top position of the modal component's close icon
|
||||
$modal-close-right: 0.25rem; // Right position of the modal component's close icon
|
||||
// Notes:
|
||||
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
|
||||
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
||||
// included.
|
||||
// [2] - If the value of $include-modal is `true`, a modal component will be created based on the values of the variables
|
||||
// for the modal, as explained in their descriptions.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #e0e0e0; // Background color for <progress>
|
||||
$progress-fore-color: #0277bd; // Progress bar color for <progress>
|
||||
$progress-height: 0.625rem; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 0.5rem; // Left and right margin for <progress>
|
||||
$progress-box-shadow: none; // Box shadow for <progress>
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
$progress-variant1-fore-color: #e53935; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
||||
$progress-variant2-fore-color: #689f38; // Progress bar color for <progress> variant 2
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness: 0.25rem; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #e3f2fd; // Background color for donut spinner
|
||||
$spinner-donut-fore-color: #1565c0; // Foreground color for donut spinner
|
||||
$spinner-donut-size: 1.25rem; // Size for donut spinner
|
||||
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
|
||||
$spinner-donut-variant1-back-color: #ffebee; // Background color for donut spinner variant 1
|
||||
$spinner-donut-variant1-fore-color: #c62828; // Foreground color for donut spinner variant 1
|
||||
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
||||
$spinner-donut-variant2-back-color: #e8f5e9; // Background color for donut spinner variant 2
|
||||
$spinner-donut-variant2-fore-color: #2e7d32; // Foreground color for donut spinner variant 2
|
||||
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
|
||||
$spinner-donut-style1-size: 2rem; // Size for donut spinner style 1
|
||||
$spinner-donut-style1-border-thickness: 0.375rem; // Border thickness for donut spinner style 1
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #e6e6e6; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 0.5rem; // Margin for breadcrumbs
|
||||
$breadcrumbs-height: 2rem; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 0.125rem; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 0; // Border radius for breadcrumbs
|
||||
$breadcrumbs-box-shadow: none; // Box shadow for breadcrumbs
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 1.5rem; // Size of the close icon
|
||||
$close-icon-back-color: #e6e6e6; // Background color for the close icon
|
||||
$close-icon-fore-color: #212121; // Foreground color for the close icon
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2*$_1px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: // Box shadow value for generic box-shadow style 1
|
||||
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);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 0.5rem; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-small-value: 0.125rem 0.25rem;// Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: 0.25rem 0.375rem;// Padding value for responsive padding on medium screens
|
||||
$responsive-padding-large-value: 0.375rem 0.5rem; // Padding value for responsive padding on large screens
|
||||
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
||||
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
|
||||
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
||||
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
||||
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
|
||||
// names that will be used.
|
||||
// [2] - If the value of $include-clearfix is true, a clearfix class will be created using the value of $clearfix-name to determine the
|
||||
// class name of the clearfix component.
|
||||
// [3] - If the value of $include-center-block is true, a center block class will be created using the value of $center-block-name to
|
||||
// determine the class name of the center block class.
|
||||
// Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
|
||||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
|
||||
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
|
||||
$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
|
||||
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
|
||||
$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
|
||||
@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
|
||||
$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
|
||||
@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
|
||||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
@include make-card-alt-size ($card-size3-name, $card-size3-width);
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
|
||||
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
|
||||
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
|
||||
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color);
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
$card-section-style2-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
@import '../mini/tab';
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
|
||||
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
|
||||
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
|
||||
$mark-style1-border-radius, $mark-style1-padding);
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
|
||||
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
|
||||
$toast-style1-border-radius, $toast-style1-padding);
|
||||
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
|
||||
$toast-style2-border-radius, $toast-style2-padding);
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
|
||||
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
|
||||
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
$spinner-donut-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
|
||||
$spinner-donut-style1-border-thickness);
|
||||
@import '../mini/utility';
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
|
||||
$responsive-margin-medium-value, $responsive-margin-large-value);
|
||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
|
||||
$responsive-padding-medium-value, $responsive-padding-large-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||
@include make-hidden-responsive ($responsive-hidden-prefix);
|
||||
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);
|
||||
|
|
@ -1,460 +0,0 @@
|
|||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
// Note: This flavor is not a full flavor, we strongly recommend you duplicate the mini-default flavor instead
|
||||
// of this file, unless you know what you are doing.
|
||||
/*
|
||||
Flavor name: Lite (mini-lite)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.7
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
$back-color: #f8f8f8; // Body background color
|
||||
$base-font-family: // Default font stack for all elements:
|
||||
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [1]
|
||||
$base-font-size: 1rem; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$body-margin: 0; // Margin for the body
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
|
||||
$h1-font-size: 2rem; // Font size of h1
|
||||
$h2-font-size: 1.6875rem; // Font size for h2
|
||||
$h3-font-size: 1.4375rem; // Font size for h3
|
||||
$h4-font-size: 1.1875rem; // Font size for h4
|
||||
$h5-font-size: 1rem; // Font size for h5
|
||||
$h6-font-size: 0.8125rem; // Font size for h6
|
||||
$heading-line-height: 1.2em; // Line height for all headings
|
||||
$heading-margin: 0.75rem 0.5rem; // Margin for all headings
|
||||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 0.75em; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-0.25rem; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 0.5rem; // Margin for <p> elements
|
||||
$list-margin: 0.5rem; // Margin for <ol> and <ul> elements
|
||||
$list-left-padding: 1rem; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5rem; // <hr> margin
|
||||
$horizontal-rule-border-style: $_1px solid #8c8c8c; // Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: false; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$blockquote-back-color: #eeeeee; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 0.5rem; // Margin for <blockquote>
|
||||
$blockquote-padding: 0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 0; // Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #505050; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 0.625rem; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: none; // Box shadow for <blockquote>
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||
$code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e6e6e6; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2*$_1px; // Border radius for <code>
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
$pre-element-padding: 0.75rem; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2*$_1px 2*$_1px 0;// Border radius for <pre>
|
||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||
$pre-element-box-shadow: none; // Box shadow for <pre>
|
||||
$add-pre-element-sidebar: false; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$kbd-element-padding: $code-element-padding; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
|
||||
$kbd-element-back-color: #0c0c0c; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: $code-element-border-radius; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: $code-element-box-shadow; // Box shadow for <kbd>
|
||||
$style-samp-element: false; // Should styles for <samp> be included? (`true`/`false`) [8]
|
||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
|
||||
$small-font-size: 0.75em; // Font size for <small> elements
|
||||
$sup-font-size: 0.75em; // Font size for <sup> elements
|
||||
$sub-font-size: 0.75em; // Font size for <sub> elements
|
||||
$sup-top: -0.5em; // <sup> top
|
||||
$sub-bottom: -0.25em; // <sub> bottom
|
||||
$link-fore-color: #0277bd; // Text color for <a>
|
||||
$link-visited-fore-color: #01579b; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
|
||||
$figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||
// element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
|
||||
// the way that it's calculated.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// color, as defined in $link-fore-color.
|
||||
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||
// Variables for grid elements
|
||||
$use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
|
||||
$include-parent-layout: true; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 0.75rem; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-row-parent-layout-prefix:'cols'; // Class name prefix for the grid's row parents [2]
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
||||
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||
$grid-column-padding: 0 0.25rem; // Padding for the columns of the grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Notes:
|
||||
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
||||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: $_1px solid #c9c9c9; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 0.5rem; // Margin for forms
|
||||
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
|
||||
$form-box-shadow: none; // Box shadow for forms
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: $_1px solid #d0d0d0; // Border style for fieldset
|
||||
$fieldset-border-radius: 2*$_1px; // Border radius for fieldset
|
||||
$fieldset-margin: 0.125rem; // Margin for fieldset
|
||||
$fieldset-padding: 0.5rem; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.875rem; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 0.125rem 0.25rem; // Padding for legend
|
||||
$label-padding: 0.25rem 0.5rem; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: false; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$include-vertical-input-group: false; // Should vertical input grooups be included? (`true`/`false`) [1]
|
||||
$input-back-color: #fafafa; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: $_1px solid #c9c9c9; // Border style for input
|
||||
$input-border-radius: 2*$_1px; // Border radius for input
|
||||
$input-margin: 0.25rem; // Margin for input
|
||||
$input-padding: 0.5rem 0.75rem; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
$input-invalid-border-color: #d32f2f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e5e5e5; // Background color for readonly input
|
||||
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#616161; // Text color for input placeholder
|
||||
$apply-select-fix: false; // [Hidden flag override] Should the styles that fix <select> styling be applied? (`true`/`false`)
|
||||
$button-back-color: #dcdcdc; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2*$_1px; // Border radius for button elements
|
||||
$button-padding: 0.5rem 0.75rem; // Padding for button elements
|
||||
$button-margin: 0.5rem; // Margin for button elements
|
||||
$button-box-shadow: none; // Box shadow for buttons
|
||||
$button-disabled-opacity:0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$include-button-group: false; // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #0277bd; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
|
||||
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary';// Class name for button variant 2
|
||||
$button-variant2-back-color: #c62828; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 0.9; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
|
||||
$button-variant2-fore-color: #fafafa; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary';// Class name for button variant 3
|
||||
$button-variant3-back-color: #5f9133; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 0.9; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
|
||||
$button-variant3-fore-color: #fafafa; // Text color for button variant 3
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: $_1px; // Border radius for button style 1
|
||||
$button-style1-padding: 0.25rem 0.375rem; // Padding for button style 1
|
||||
$button-style1-margin: 0.5rem; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4*$_1px; // Border radius for button style 2
|
||||
$button-style2-padding: 0.75rem 1.125rem; // Padding for button style 2
|
||||
$button-style2-margin: 0.5rem; // Margin for button style 2
|
||||
$checkbox-size: 1rem; // Size for checkbox/radio [4]
|
||||
$checkbox-back-color: $input-back-color;// Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color;// Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: $_1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius;// Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$checkbox-box-shadow: none; // Box shadow for checkbox/radio
|
||||
$include-switch: false; // Should switch components be included? (`true`/`false`) [5]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
|
||||
// [2] - Due to the fact that the value of $include-button-group is set to `false`, no button group styles will be created.
|
||||
// If you wish to enable them, please refer to a full flavor for the required variables.
|
||||
// [3] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
// [5] - Due to the fact that the value of $include-switch is set to `false`, no switch styles will be created.
|
||||
// If you wish to enable them, please refer to a full flavor for the required variables.
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #12171a; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.125rem 0.5rem; // Padding for <header>
|
||||
$header-box-shadow: none; // Box shadow for <header>
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #20292e; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$include-nav-styles: false; // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
|
||||
$include-drawer: false; // [Hidden flag override] Should the drawer component be included? (`true`/`false`) [2]
|
||||
$footer-back-color: #192024; // Background color for <footer>
|
||||
$footer-fore-color: #f5f5f5; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #0288d1; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - Due to the fact that the values of $include-nav-styles and $include-drawer are set to `false`, <nav> elements
|
||||
// will not be stylized and the drawer component will not be included. If you set it to `true`, please refer to a full
|
||||
// flavor to find the required variable definitions.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: $_1px solid #c9c9c9; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: none; // Box shadow for <table>
|
||||
$table-caption-font-size: 1.5rem; // Font size for <caption>
|
||||
$table-caption-margin: 0.5rem; // Margin for <caption>
|
||||
$table-row-padding: 0.5rem; // Padding for <tr> - both views
|
||||
$table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #e6e6e6; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Text color for <th>
|
||||
$table-body-back-color: #fafafa; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 0.625rem; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
|
||||
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$include-horizontal-table: false; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$include-scrollable-table: false; // Should scrollable <table> elements be included? (`true`/`false`) [2]
|
||||
$include-striped-table: false; // [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
|
||||
// Notes:
|
||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||
// in order for their mobile headers to display properly.
|
||||
// [2] - Due to the $include-horizontal-table, $include-scrollable-table and $include-striped-table flags being set to `false`,
|
||||
// no styling will be provided for horizontal, scrollable and striped <table> elements. Please refer to a full fulavor to find
|
||||
// the variables associated with these components, if you want to enable them.
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: $_1px solid #acacac; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 0.5rem; // Margin for cards
|
||||
$card-box-shadow: none; // Box shadow for cards
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: $_1px solid #c9c9c9;// Border style for card sections
|
||||
$card-section-padding: 0.5rem; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size1-width: 100%; // Width for fluid cards
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 0.75rem; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// --- --- ---
|
||||
// No variables specified for the tab module. This module is disabled by default.
|
||||
// To re-enable it, please refer to a full flavor for variables and documentation.
|
||||
// --- --- ---
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #0277bd; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 0.9375em; // Font size for <mark>
|
||||
$mark-line-height: 1em; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2*$_1px; // Border radius for <mark>
|
||||
$mark-padding: 0.125em 0.25em; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: none; // Box shadow for <mark>
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #e53935; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #689f38; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 0.25em 0.5em; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$mark-style2-border-radius: 2*$_1px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 1em; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
|
||||
$include-toast: false; // [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
|
||||
$include-tooltip: false; // Should tooltips be included? (`true`/`false`) [1]
|
||||
$include-modal: false; // Should modals be included? (`true`/`false`) [1]
|
||||
// Notes:
|
||||
// [1] - Due to the values of $include-toast, $include-tooltip and $include-modal being set
|
||||
// to `false`, no styling is provided for these elements. If you want to enable them, please
|
||||
// refer to a full flavor file for variable definitions.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #e0e0e0; // Background color for <progress>
|
||||
$progress-fore-color: #0277bd; // Progress bar color for <progress>
|
||||
$progress-height: 0.625rem; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 0.5rem; // Left and right margin for <progress>
|
||||
$progress-box-shadow: none; // Box shadow for <progress>
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
$progress-variant1-fore-color: #e53935; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
||||
$progress-variant2-fore-color: #689f38; // Progress bar color for <progress> variant 2
|
||||
$include-spinner-donut: false; // [Hidden flag override] Should spinner donuts be enabled? (`true`/`false`) [1]
|
||||
// Notes :
|
||||
// [1] - Due to the value of $include-spinner-donut being set to `false`, the spinner
|
||||
// donut styling will not be included. To enable it, pelase refer to a full flavor.
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$include-breadcrumbs: false; // [Hidden flag override] Should breadcrumbs be included? (`true`/`false`) [1]
|
||||
$include-close-icon: false; // [Hidden flag override] Should the close icon be included? (`true`/`false`) [1]
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2*$_1px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 0.5rem; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-small-value: 0.125rem 0.25rem;// Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: 0.25rem 0.375rem;// Padding value for responsive padding on medium screens
|
||||
$responsive-padding-large-value: 0.375rem 0.5rem; // Padding value for responsive padding on large screens
|
||||
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
||||
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
|
||||
// Notes:
|
||||
// [1] - Due to the values of $include-breadcrumbs and $include-close-icon being set
|
||||
// to `false`, these elements will not be included. Refer to a full flavor file for
|
||||
// help on how to enable them.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
|
||||
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
|
||||
$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
|
||||
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
|
||||
$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
|
||||
@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
|
||||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
// --- --- ---
|
||||
// Tab module is disabled for this flavor.
|
||||
// @import '../mini/tab';
|
||||
// --- --- ---
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
|
||||
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
|
||||
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
|
||||
$mark-style1-border-radius, $mark-style1-padding);
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
|
||||
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
|
||||
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
|
||||
@import '../mini/utility';
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
|
||||
$responsive-margin-medium-value, $responsive-margin-large-value);
|
||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
|
||||
$responsive-padding-medium-value, $responsive-padding-large-value);
|
||||
@include make-hidden-responsive ($responsive-hidden-prefix);
|
||||
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);
|
||||
|
|
@ -1,676 +0,0 @@
|
|||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
/*
|
||||
Flavor name: Nord (mini-nord)
|
||||
Author: tphecca (https://github.com/tphecca)
|
||||
Maintainers: tphecca
|
||||
mini.css version: v2.3.7
|
||||
*/
|
||||
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #2E3440; // Text and general foreground color
|
||||
$back-color: #ECEFF4; // Body background color
|
||||
$base-font-family: // Default font stack for all elements:
|
||||
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$base-font-size: 1em; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$body-margin: 0; // Margin for the body
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
|
||||
$h1-font-size: 2em; // Font size of h1
|
||||
$h2-font-size: 1.5em; // Font size for h2
|
||||
$h3-font-size: 1.25em; // Font size for h3
|
||||
$h4-font-size: 1.1em; // Font size for h4
|
||||
$h5-font-size: 1em; // Font size for h5
|
||||
$h6-font-size: 0.85em; // Font size for h6
|
||||
$heading-line-height: 1.2em; // Line height for all headings
|
||||
$heading-margin: 12px 8px; // Margin for all headings
|
||||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 1px 8px; // Margin for <p> elements
|
||||
$list-margin: 1px 8px 10px; // Margin for <ol> and <ul> elements
|
||||
$list-left-padding: 28px; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 8px; // <hr> margin
|
||||
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$horizontal-rule-fancy-gradient:"to right, #ECEFF4, #D8DEE9, #ECEFF4"; // Gradient style for fancy horizontal rule
|
||||
$blockquote-back-color: #D8DEE9; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 8px 10px; // Margin for <blockquote>
|
||||
$blockquote-padding: 6px 10px 24px; // Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 3px solid #616161; // Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: // Box shadow for <blockquote>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
||||
$code-element-padding: 2px 4px; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #E5E9F0; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2px; // Border radius for <code>
|
||||
$code-element-box-shadow: // Box shadow for <code>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$pre-element-padding: 12px; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
|
||||
$pre-element-margin: 8px 10px; // Margin for <pre>
|
||||
$pre-element-box-shadow: // Box shadow for <pre>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 3px solid #5E81AC; // Style of the sidebar of <pre>
|
||||
$kbd-element-padding: 2px 4px; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #ECEFF4; // Text color for <kbd>
|
||||
$kbd-element-back-color: $fore-color; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: 2px; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: // Box shadow for <kbd>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$style-samp-element: false; // Should styles for <samp> be included?
|
||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||
//$samp-element-back-color: #2196f3; // Background color for <samp>
|
||||
//$samp-element-border-style: 0; // Border style for <samp>
|
||||
//$samp-element-border-radius:2px; // Border radius for <samp>
|
||||
//$samp-element-box-shadow: // Box shadow for <samp>
|
||||
//0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
|
||||
$small-font-size: 75%; // Font size for <small> elements
|
||||
$sup-font-size: 75%; // Font size for <sup> elements
|
||||
$sub-font-size: 75%; // Font size for <sub> elements
|
||||
$sup-top: -8px; // <sup> top
|
||||
$sub-bottom: -4px; // <sub> bottom
|
||||
$link-fore-color: #88C0D0; // Text color for <a>
|
||||
$link-visited-fore-color: #5E81AC; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
|
||||
//$link-hover-fore-color: #8FBCBB; // Text color for <a> when hovered or focused
|
||||
$figcaption-font-size: 80%; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||
// element's font sizing.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// color, as defined in $link-fore-color.
|
||||
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||
// Variables for grid elements
|
||||
$use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
|
||||
$include-parent-layout: true !default; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-row-parent-layout-prefix:'cols'; // Class name prefix for the grid's row parents [2]
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
||||
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||
$grid-column-padding: 0 4px; // Padding for the columns of the grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Notes:
|
||||
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
||||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #ECEFF4; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #D8DEE9; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 8px; // Margin for forms
|
||||
$form-padding: 12px 10px 18px; // Padding for forms
|
||||
$form-box-shadow: // Box shadow for forms
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #D8DEE9; // Border style for fieldset
|
||||
$fieldset-border-radius: 2px; // Border radius for fieldset
|
||||
$fieldset-margin: 2px; // Margin for fieldset
|
||||
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.925em; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 2px 4px; // Padding for legend
|
||||
$label-padding: 4px 8px; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
|
||||
$include-vertical-input-group: true; // Should vertical input groups be included? (`true`/`false`) [1]
|
||||
$input-group-vertical-name: 'vertical'; // Class name for vertical input groups.
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #E5E9F0; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #D8DEE9; // Border style for input
|
||||
$input-border-radius: 1px; // Border radius for input
|
||||
$input-margin: 2px; // Margin for input
|
||||
$input-padding: 8px 12px; // Padding for input
|
||||
$input-focus-border-color: #81A1C1; // Border color for focused input
|
||||
$input-invalid-border-color: #BF616A; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
||||
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
||||
$input-placeholder-fore-color: #616161; // Text color for input placeholder
|
||||
$select-padding-right: 20px; // Right padding for select element
|
||||
$button-back-color: #D8DEE9; // Back color for button elements
|
||||
$button-back-opacity: 0.65; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 0.8; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2px; // Border radius for button elements
|
||||
$button-padding: 8px 12px; // Padding for button elements
|
||||
$button-margin: 8px; // Margin for button elements
|
||||
$button-box-shadow: // Box shadow for buttons
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$button-disabled-opacity: 0.65; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class for button groups
|
||||
$button-group-border-style: 1px solid #9e9e9e; // Border style for button groups
|
||||
$button-group-margin: $button-margin; // Margin for button groups
|
||||
$button-group-box-shadow: // Box shadow for button groups
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #5E81AC; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
|
||||
$button-variant1-fore-color: #ECEFF4; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary'; // Class name for button variant 2
|
||||
$button-variant2-back-color: #BF616A; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: 1; // Background opacity for button variant 2 on hover or focus
|
||||
$button-variant2-fore-color: #ECEFF4; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
||||
$button-variant3-back-color: #A3BE8C; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: 1; // Background opacity for button variant 3 on hover or focus
|
||||
$button-variant3-fore-color: #ECEFF4; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: $fore-color; // Background color for button variant 4
|
||||
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: 0.9; // Background opacity for button variant 4 on hover or focus
|
||||
$button-variant4-fore-color: #ECEFF4; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 1px; // Border radius for button style 1
|
||||
$button-style1-padding: 4px 6px; // Padding for button style 1
|
||||
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||
$checkbox-size: 16px; // Size for checkbox/radio [3]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #D8DEE9; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
|
||||
$checkbox-box-shadow: // Box shadow for the checkbox/radio
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$include-switch: true; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch'; // Class name for switch components
|
||||
$switch-bar-back-color: #D8DEE9; // Back color for the switch's bar
|
||||
$switch-on-bar-back-color: #D8DEE9; // Back color for the switch's bar when the switch is turned on
|
||||
$switch-bar-width: 28px; // Width for the switch's bar
|
||||
$switch-bar-height: 14px; // Height for the switch's bar
|
||||
$switch-bar-border-style: 0; // Border style for the switch's bar
|
||||
$switch-bar-border-radius: 8px; // Borer radius for the switch's bar
|
||||
$switch-bottom-spacing: 8px; // Bottom spacing for the switch's bar
|
||||
$switch-bar-box-shadow: // Box shadow for the switch's bar
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$switch-knob-back-color: #ECEFF4; // Back color for the switch's knob
|
||||
$switch-on-knob-back-color: #5E81AC; // Back color for the switch's knob when the switch is turned on
|
||||
$switch-knob-width: 20px; // Width for the switch's knob
|
||||
$switch-knob-height: 20px; // Height for the switch's knob
|
||||
$switch-knob-border-style: 0; // Border style for the switch's knob
|
||||
$switch-knob-border-radius: 100%; // Borer radius for the switch's knob
|
||||
$switch-knob-box-shadow: // Box shadow for the switch's knob
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
|
||||
// [2] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 44px; // Height for <header>
|
||||
$header-back-color: #2E3440; // Background color for <header>
|
||||
$header-fore-color: #ECEFF4; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 2px 8px; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.2; // Line height for <header>'s logo
|
||||
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
|
||||
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #37474f; // Hover color for <header>'s links
|
||||
$header-link-margin: 2px 0 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #ECEFF4; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #D8DEE9; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
|
||||
$nav-margin: 2px; // Margin for <nav>
|
||||
$nav-box-shadow: // Box shadow for <nav>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$nav-link-fore-color: #88C0D0; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 3px; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #81A1C1; // Subcategory bar color
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: $nav-back-color; // Background color of the drawer component
|
||||
$drawer-border-style: $nav-border-style; // Border style of the drawer component
|
||||
$drawer-border-radius: 0; // Border radius of the drawer component
|
||||
$drawer-width: 320px; // Width of the drawer component
|
||||
$drawer-padding: 0; // Padding of the drawer component
|
||||
$drawer-box-shadow: none; // Box shadow for the drawer component
|
||||
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
|
||||
$drawer-normal-height: calc(100vh - 48px); // Height of the drawer component when shown as normal menu
|
||||
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
|
||||
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
|
||||
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
|
||||
$drawer-toggle-font-size: 40px; // Font size for the drawer component's toggle icon
|
||||
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
|
||||
$drawer-toggle-top: 7px; // Top position for the drawer component's toggle icon
|
||||
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
|
||||
$drawer-close-top: 12px; // Top position of the drawer component's close icon
|
||||
$drawer-close-right: 4px; // Right position of the drawer component's close icon
|
||||
$footer-back-color: #434C5E; // Background color for <footer>
|
||||
$footer-fore-color: #ECEFF4; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 85%; // Font size for <footer>
|
||||
$footer-margin: 18px 0 0; // Margin for <footer>
|
||||
$footer-padding: 22px 10px 12px; // Padding for <footer>
|
||||
$footer-link-fore-color: #88C0D0; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #D8DEE9; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$table-caption-font-size: 1.5em; // Font size for <caption>
|
||||
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
|
||||
$table-row-padding: 8px; // Padding for <tr> - both views
|
||||
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #D8DEE9; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$table-body-back-color: #ECEFF4; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 10px; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
|
||||
$table-mobile-label-font-weight: $bold-font-weight; // Font weight for mobile headers
|
||||
$include-horizontal-table: true; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal view
|
||||
$include-scrollable-table: true; // Should scrollable <table> elements be included? (`true`/`false`) [3]
|
||||
$table-scrollable-name: 'scrollable'; // Class name for <table> scrollable view
|
||||
$table-scrollable-height: 400px; // Height for <table> scrolalble view.
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: #E5E9F0; // Alternate background color for <td> in striped <table>
|
||||
// Notes:
|
||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||
// in order for their mobile headers to display properly.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name.
|
||||
// [3] - If $include-scrollable-table is `true`, then the <table> scrollable view will be included in a class defined by
|
||||
// $table-scrollable-name and a height defined by $table-scrollable-height.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #ECEFF4; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #D8DEE9; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 2px 10px 20px; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #E5E9F0; // Border style for card sections
|
||||
$card-section-padding: 6px 8px 6px; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #EBCB8B; // Background color for card style 1
|
||||
$card-style1-fore-color: $fore-color; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #D08770; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #D08770; // Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #BF616A; // Background color for card style 2
|
||||
$card-style2-fore-color: #ECEFF4; // Text color for card style 2
|
||||
$card-style2-border-style: 1px solid #BF616A; // Border style for card style 2
|
||||
$card-style2-border-radius: 0; // Border radius for card style 2
|
||||
$card-style2-section-border-style:1px solid #BF616A; // Border style for card style 2 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color:#ECEFF4; // Background color for card section style 1
|
||||
$card-section-style1-fore-color:$fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
||||
$card-section-style2-back-color:#D8DEE9; // Background color for card section style 2
|
||||
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: // Box shadow for the tabs' container
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$tab-label-back-color: #D8DEE9; // Background color for tabs' labels
|
||||
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
||||
$tab-label-selected-back-color: #4C566A; // Background color for open tab's label
|
||||
$tab-label-selected-fore-color: #ECEFF4; // Text color for open tab's label
|
||||
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
||||
$tab-label-padding: 8px 12px; // Padding for tabs' labels
|
||||
$tab-label-height: 26px; // Height for tabs' labels
|
||||
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs
|
||||
$tab-border-radius: 0; // Border radius for tabs
|
||||
$tab-selected-border-color: #5E81AC; // Selected tab's bottom border color
|
||||
$tab-panel-back-color: #ECEFF4; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
$tab-panel-padding: 8px; // Padding for tabs' panels
|
||||
$tab-panel-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #5E81AC; // Background color for <mark>
|
||||
$mark-fore-color: #ECEFF4; // Text color for <mark>
|
||||
$mark-font-size: 95%; // Font size for <mark>
|
||||
$mark-line-height: 1; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-padding: 2px 4px; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #BF616A; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #A3BE8C; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$mark-style2-border-radius: 2px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 5px; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 100%; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
|
||||
$include-toast: true; // Should the toast component be included? (`true`/`false`)
|
||||
$toast-name: 'toast'; // Class name for toast component
|
||||
$toast-bottom: 24px; // Bottom position for toasts
|
||||
$toast-back-color: #424242; // Background color for toasts
|
||||
$toast-fore-color: #ECEFF4; // Text color for toasts
|
||||
$toast-border-style: 0; // Border style for toasts
|
||||
$toast-border-radius: 32px; // Border radius for toasts
|
||||
$toast-padding: 12px 24px; // Padding for toasts
|
||||
$toast-box-shadow: none; // Box shadow for toasts
|
||||
$toast-style1-name: 'small'; // Class name for toast style 1
|
||||
$toast-style1-border-style: 0; // Border style for toast style 1
|
||||
$toast-style1-border-radius:24px; // Border radius for toast style 1
|
||||
$toast-style1-padding: 8px 16px; // Padding for toast style 1
|
||||
$toast-style2-name: 'large'; // Class name for toast style 2
|
||||
$toast-style2-border-style: 0; // Border style for toast style 2
|
||||
$toast-style2-border-radius:48px; // Border radius for toast style 2
|
||||
$toast-style2-padding: 18px 36px; // Padding for toast style 2
|
||||
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [2]
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||
$tooltip-fore-color: #ECEFF4; // Text color for tooltips
|
||||
$tooltip-border-radius: 2px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 6px; // The size of the tooltip's tail
|
||||
$tooltip-padding: 6px; // Padding for tooltips
|
||||
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
||||
$include-modal: true; // Should modals be included? (`true`/`false`) [3]
|
||||
$modal-name: 'modal'; // Class name for the modals
|
||||
$modal-back-color: #000; // Background color of the modal overlay
|
||||
$modal-back-opacity: 0.45; // Background opacity of the modal overlay
|
||||
$modal-close-name: 'close'; // Class name of the close element od the modal component.
|
||||
$modal-close-top: 12px; // Top position of the modal component's close icon
|
||||
$modal-close-right: 4px; // Right position of the modal component's close icon
|
||||
// Notes:
|
||||
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
|
||||
// will be used to determine the class that will be used for animated alerts.
|
||||
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
|
||||
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
||||
// included.
|
||||
// [3] - If the value of $include-modal is `true`, a modal component will be created based on the values of the variables
|
||||
// for the modal, as explained in their descriptions.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #D8DEE9; // Background color for <progress>
|
||||
$progress-fore-color: #5E81AC; // Progress bar color for <progress>
|
||||
$progress-height: 14px; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 8px; // Left and right margin for <progress>
|
||||
$progress-box-shadow: // Box shadow for <progress>
|
||||
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
$progress-variant1-fore-color: #BF616A; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
||||
$progress-variant2-fore-color: #A3BE8C; // Progress bar color for <progress> variant 2
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #D8DEE9; // Background color for donut spinner
|
||||
$spinner-donut-fore-color: #5E81AC; // Foreground color for donut spinner
|
||||
$spinner-donut-size: 20px; // Size for donut spinner
|
||||
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
|
||||
$spinner-donut-variant1-back-color: #D8DEE9; // Background color for donut spinner variant 1
|
||||
$spinner-donut-variant1-fore-color: #BF616A; // Foreground color for donut spinner variant 1
|
||||
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
||||
$spinner-donut-variant2-back-color: #D8DEE9; // Background color for donut spinner variant 2
|
||||
$spinner-donut-variant2-fore-color: #A3BE8C; // Foreground color for donut spinner variant 2
|
||||
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
|
||||
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1
|
||||
$spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #D8DEE9; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
|
||||
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
|
||||
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs
|
||||
0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 32px; // Size of the close icon
|
||||
$close-icon-back-color: #ECEFF4; // Background color for the close icon
|
||||
$close-icon-fore-color: #2E3440; // Foreground color for the close icon
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
|
||||
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
|
||||
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
|
||||
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
||||
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-small-value:2px 4px; // Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
|
||||
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
|
||||
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
||||
$responsive-visually-hidden-prefix: 'visually-hidden';// Class name prefix for responsive visually hidden elements
|
||||
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
||||
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
||||
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
|
||||
// names that will be used.
|
||||
// [2] - If the value of $include-clearfix is true, a clearfix class will be created using the value of $clearfix-name to determine the
|
||||
// class name of the clearfix component.
|
||||
// [3] - If the value of $include-center-block is true, a center block class will be created using the value of $center-block-name to
|
||||
// determine the class name of the center block class.
|
||||
// Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
|
||||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
|
||||
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
|
||||
$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
|
||||
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
|
||||
$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
|
||||
@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
|
||||
$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
|
||||
@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
|
||||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
@include make-card-alt-size ($card-size3-name, $card-size3-width);
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
|
||||
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
|
||||
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
|
||||
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color);
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
$card-section-style2-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
@import '../mini/tab';
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
|
||||
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
|
||||
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
|
||||
$mark-style1-border-radius, $mark-style1-padding);
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
|
||||
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
|
||||
$toast-style1-border-radius, $toast-style1-padding);
|
||||
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
|
||||
$toast-style2-border-radius, $toast-style2-padding);
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
|
||||
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
|
||||
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
$spinner-donut-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
|
||||
$spinner-donut-style1-border-thickness);
|
||||
@import '../mini/utility';
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
|
||||
$responsive-margin-medium-value, $responsive-margin-large-value);
|
||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
|
||||
$responsive-padding-medium-value, $responsive-padding-large-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
|
||||
@include make-hidden-responsive ($responsive-hidden-prefix);
|
||||
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);
|
||||
|
|
@ -1,468 +0,0 @@
|
|||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
// Note: This flavor is not a full flavor, we strongly recommend you duplicate the mini-default flavor instead
|
||||
// of this file, unless you know what you are doing.
|
||||
/*
|
||||
Flavor name: Progressive Web App (mini-pw)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.3.7
|
||||
*/
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #212121; // Text and general foreground color
|
||||
$back-color: #eeeeee; // Body background color
|
||||
$base-font-family: // Default font stack for all elements:
|
||||
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [1]
|
||||
$base-font-size: 1rem; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$body-margin: 0; // Margin for the body
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
|
||||
$h1-font-size: 2.4375rem; // Font size of h1
|
||||
$h2-font-size: 1.935rem; // Font size for h2
|
||||
$h3-font-size: 1.5625rem; // Font size for h3
|
||||
$h4-font-size: 1.25rem; // Font size for h4
|
||||
$h5-font-size: 1rem; // Font size for h5
|
||||
$h6-font-size: 0.8125rem; // Font size for h6
|
||||
$heading-line-height: 1.25em; // Line height for all headings
|
||||
$heading-margin: 0.75rem 0.5rem; // Margin for all headings
|
||||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 0.75em; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-0.25em; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 0.5rem; // Margin for <p> elements
|
||||
$list-margin: 0.5rem; // Margin for <ol> and <ul> elements
|
||||
$list-left-padding: 1.25rem; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 600; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5rem; // <hr> margin
|
||||
$horizontal-rule-border-style: $_1px solid #757575; // Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: false; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$blockquote-back-color: #e0e0e0; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 0.5rem; // Margin for <blockquote>
|
||||
$blockquote-padding: 0.5rem 0.5rem 1.5rem;// Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 4*$_1px solid #3f51b5;// Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 0.625rem; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 0 3*$_1px 3*$_1px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: // Box shadow for <blockquote>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||
$code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e0e0e0; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2*$_1px; // Border radius for <code>
|
||||
$code-element-box-shadow: // Box shadow for <code>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$pre-element-padding: 0.75rem; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 3*$_1px 3*$_1px 0;// Border radius for <pre>
|
||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||
$pre-element-box-shadow: // Box shadow for <pre>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 4*$_1px solid #303f9f;// Style of the sidebar of <pre>
|
||||
$kbd-element-padding: $code-element-padding; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
|
||||
$kbd-element-back-color: #212121; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: $code-element-border-radius; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: $code-element-box-shadow; // Box shadow for <kbd>
|
||||
$style-samp-element: false; // Should styles for <samp> be included? (`true`/`false`) [8]
|
||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
|
||||
$small-font-size: 0.75em; // Font size for <small> elements
|
||||
$sup-font-size: 0.75em; // Font size for <sup> elements
|
||||
$sub-font-size: 0.75em; // Font size for <sub> elements
|
||||
$sup-top: -0.5em; // <sup> top
|
||||
$sub-bottom: -0.25em; // <sub> bottom
|
||||
$link-fore-color: #3f51b5; // Text color for <a>
|
||||
$link-visited-fore-color: #3f51b5; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
|
||||
$figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||
// element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
|
||||
// the way that it's calculated.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// color, as defined in $link-fore-color.
|
||||
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||
// Variables for grid elements
|
||||
$use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
|
||||
$include-parent-layout: true; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 0.75rem; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-row-parent-layout-prefix:'cols'; // Class name prefix for the grid's row parents [2]
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
||||
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||
$grid-column-padding: 0 0.25rem; // Padding for the columns of the grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Notes:
|
||||
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
||||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: $_1px solid #bdbdbd; // Border style for forms
|
||||
$form-border-radius: 3*$_1px; // Border radius for forms
|
||||
$form-margin: 0.5rem; // Margin for forms
|
||||
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
|
||||
$form-box-shadow: // Box shadow for forms
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: $_1px solid #e0e0e0; // Border style for fieldset
|
||||
$fieldset-border-radius: 2*$_1px; // Border radius for fieldset
|
||||
$fieldset-margin: 0.125rem; // Margin for fieldset
|
||||
$fieldset-padding: 0.5rem; // Padding for fieldset
|
||||
$legend-font-weight: 600; // Font weight for legend
|
||||
$legend-font-size: 0.875rem; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 0.125rem 0.25rem; // Padding for legend
|
||||
$label-padding: 0.25rem 0.5rem; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: false; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$include-vertical-input-group: true; // Should vertical input grooups be included? (`true`/`false`) [1]
|
||||
$input-back-color: #fafafa; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: $_1px solid #bdbdbd; // Border style for input
|
||||
$input-border-radius: 2*$_1px; // Border radius for input
|
||||
$input-margin: 0.25rem; // Margin for input
|
||||
$input-padding: 0.5rem 0.75rem; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
$input-invalid-border-color: #d32f2f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
||||
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#616161; // Text color for input placeholder
|
||||
$apply-select-fix: false; // [Hidden flag override] Should the styles that fix <select> styling be applied? (`true`/`false`)
|
||||
$button-back-color: #e0e0e0; // Back color for button elements
|
||||
$button-back-opacity: 1; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 3*$_1px; // Border radius for button elements
|
||||
$button-padding: 0.625rem 0.875rem; // Padding for button elements
|
||||
$button-margin: 0.5rem; // Margin for button elements
|
||||
$button-box-shadow: // Box shadow for buttons
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$button-disabled-opacity:0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$include-button-group: false; // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #303f9f; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 1; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: 1; // Background opacity for button variant 1 on hover or focus
|
||||
$button-variant1-fore-color: #fafafa; // Text color for button variant 1
|
||||
$checkbox-size: 1rem; // Size for checkbox/radio [4]
|
||||
$checkbox-back-color: $input-back-color;// Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color;// Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: $_1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius;// Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$checkbox-box-shadow: none; // Box shadow for checkbox/radio
|
||||
$include-switch: false; // Should switch components be included? (`true`/`false`) [5]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
|
||||
// [2] - Due to the fact that the value of $include-button-group is set to `false`, no button group styles will be created.
|
||||
// If you wish to enable them, please refer to a full flavor for the required variables.
|
||||
// [3] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
// [5] - Due to the fact that the value of $include-switch is set to `false`, no switch styles will be created.
|
||||
// If you wish to enable them, please refer to a full flavor for the required variables.
|
||||
$header-height: 3rem; // Height for <header>
|
||||
$header-back-color: #283593; // Background color for <header>
|
||||
$header-fore-color: #fafafa; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 0.25rem 0.75rem; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75rem; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.3125em; // Line height for <header>'s logo
|
||||
$header-logo-margin: 0.0625rem 0.375rem 0.0625rem 0.0625rem; // Margin for <header>'s logo
|
||||
$header-logo-padding: 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #303f9f; // Hover color for <header>'s links
|
||||
$header-link-margin: 0.125rem 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$include-nav-styles: false; // [Hidden flag override] Should <nav> elements by stylized? (`true`/`false`) [2]
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: #f5f5f5; // Background color of the drawer component
|
||||
$drawer-border-style: 1px solid #bdbdbd; // Border style of the drawer component
|
||||
$drawer-border-radius: 0; // Border radius of the drawer component
|
||||
$drawer-width: 320px; // Width of the drawer component
|
||||
$drawer-padding: 0; // Padding of the drawer component
|
||||
$drawer-box-shadow: // Box shadow for the drawer component
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
|
||||
$drawer-normal-height: calc(100vh - 3rem); // Height of the drawer component when shown as normal menu
|
||||
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
|
||||
$drawer-persistent-name: 'drawer'; // Class name for the persisten variant of the drawer component
|
||||
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
|
||||
$drawer-toggle-font-size: 2.5rem; // Font size for the drawer component's toggle icon
|
||||
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
|
||||
$drawer-toggle-top: 0.4375rem; // Top position for the drawer component's toggle icon
|
||||
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
|
||||
$drawer-close-top: 0.75rem; // Top position of the drawer component's close icon
|
||||
$drawer-close-right: 0.25rem; // Right position of the drawer component's close icon
|
||||
$footer-back-color: #283593; // Background color for <footer>
|
||||
$footer-fore-color: #fafafa; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 0.875rem; // Font size for <footer>
|
||||
$footer-margin: 1rem 0 0; // Margin for <footer>
|
||||
$footer-padding: 1.5rem 0.5rem 0.75rem; // Padding for <footer>
|
||||
$footer-link-fore-color: #f5f5f5; // Text color for links in <footer>
|
||||
$include-footer-sticky: false; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - Due to the fact that the value of $include-nav-styles is set to `false`, <nav> elements
|
||||
// will not be stylized. If you set it to `true`, please refer to a full flavor
|
||||
// to find the required variable definitions.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: $_1px solid #bdbdbd; // Border style for <table> and children
|
||||
$table-border-radius: 3*$_1px; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$table-caption-font-size: 1.5rem; // Font size for <caption>
|
||||
$table-caption-margin: 0.5rem; // Margin for <caption>
|
||||
$table-row-padding: 0.5rem; // Padding for <tr> - both views
|
||||
$table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #f5f5f5; // Background color for <th>
|
||||
$table-head-fore-color: #424242; // Text color for <th>
|
||||
$table-body-back-color: #fafafa; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 0.625rem; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
|
||||
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$include-horizontal-table: false; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$include-scrollable-table: false; // Should scrollable <table> elements be included? (`true`/`false`) [2]
|
||||
$include-striped-table: false; // [Hidden flag override] Should striped <table> elements be included (`true`/`false`) [2]
|
||||
// Notes:
|
||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||
// in order for their mobile headers to display properly.
|
||||
// [2] - Due to the $include-horizontal-table, $include-scrollable-table and $include-striped-table flags being set to `false`,
|
||||
// no styling will be provided for horizontal, scrollable and striped <table> elements. Please refer to a full fulavor to find
|
||||
// the variables associated with these components, if you want to enable them.
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: $_1px solid #bdbdbd; // Border style for cards
|
||||
$card-border-radius: 3*$_1px; // Border radius for cards
|
||||
$card-margin: 0.5rem; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: $_1px solid #bdbdbd;// Border style for card sections
|
||||
$card-section-padding: 0.75rem; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size1-width: 100%; // Width for fluid cards
|
||||
$card-section-style1-name: 'accent'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #303f9f; // Background color for card section style 1
|
||||
$card-section-style1-border-style: $_1px solid #283593; // Border style for card section style 1
|
||||
$card-section-style1-fore-color: #fafafa; // Text color for card section style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// --- --- ---
|
||||
// No variables specified for the tab module. This module is disabled by default.
|
||||
// To re-enable it, please refer to a full flavor for variables and documentation.
|
||||
// --- --- ---
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #283593; // Background color for <mark>
|
||||
$mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 0.9375em; // Font size for <mark>
|
||||
$mark-line-height: 1em; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2*$_1px; // Border radius for <mark>
|
||||
$mark-padding: 0.25em 0.375em; // Padding for <mark>
|
||||
$mark-margin: 0.125rem; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$toast-name: 'toast'; // Class name for toast component
|
||||
$toast-bottom: 1.5rem; // Bottom position for toasts
|
||||
$toast-back-color: $fore-color; // Background color for toasts
|
||||
$toast-fore-color: #fafafa; // Text color for toasts
|
||||
$toast-border-style: 0; // Border style for toasts
|
||||
$toast-border-radius: 2rem; // Border radius for toasts
|
||||
$toast-padding: 0.75rem 1.5rem; // Padding for toasts
|
||||
$toast-box-shadow: // Box shadow for toasts
|
||||
0 2*$_1px 2*$_1px 0 rgba(0, 0, 0, 0.14), 0 1*$_1px 5*$_1px 0 rgba(0, 0, 0, 0.12), 0 3*$_1px 1*$_1px -2*$_1px rgba(0, 0, 0, 0.2);
|
||||
$include-tooltip: false; // Should tooltips be included? (`true`/`false`) [1]
|
||||
$include-modal: false; // Should modals be included? (`true`/`false`) [1]
|
||||
// Notes:
|
||||
// [1] - Due to the values of $include-tooltip and $include-modal being set
|
||||
// to `false`, no styling is provided for these elements. If you want to enable them, please
|
||||
// refer to a full flavor file for variable definitions.
|
||||
// --- --- ---
|
||||
// No variables specified for the progress module. This module is disabled by default.
|
||||
// To re-enable it, please refer to a full flavor for variables and documentation.
|
||||
// --- --- ---
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$include-breadcrumbs: false; // [Hidden flag override] Should breadcrumbs be included? (`true`/`false`) [1]
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 1.5rem; // Size of the close icon
|
||||
$close-icon-back-color: #e0e0e0; // Background color for the close icon
|
||||
$close-icon-fore-color: #212121; // Foreground color for the close icon
|
||||
// Notes:
|
||||
// [1] - Due to the values of $include-breadcrumbs being set to `false`, this element will
|
||||
// not be included. Refer to a full flavor file for help on how to enable them.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
|
||||
/*
|
||||
Custom style fixes and tweaks for input elements.
|
||||
*/
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.button, label.button, .button,
|
||||
a[role="button"], label[role="button"], [role="button"], label{
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
|
||||
a.button:hover,
|
||||
a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
|
||||
a[role="button"]:hover,
|
||||
a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
|
||||
background: #e5e5e5;
|
||||
box-shadow: 0 3*$_1px 3*$_1px 0 rgba(0,0,0,0.14),0 1*$_1px 7*$_1px 0 rgba(0,0,0,0.12),0 3*$_1px 1*$_1px -1*$_1px rgba(0,0,0,0.2);
|
||||
}
|
||||
button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus,
|
||||
[type="reset"].primary:hover,
|
||||
[type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
|
||||
background: #3f51b5;
|
||||
}
|
||||
@import '../mini/navigation';
|
||||
/*
|
||||
Custom style fixes and tweaks for input elements.
|
||||
*/
|
||||
.drawer-toggle::before{
|
||||
line-height: 0.3125;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.drawer-toggle:not(.drawer) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.drawer {
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a, label:not(.close), [role="button"] {
|
||||
display: block;
|
||||
margin: 0;
|
||||
background: #f5f5f5;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
border-radius: 0;
|
||||
&:hover, &:focus {
|
||||
background: #fafafa;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '../mini/table';
|
||||
/*
|
||||
Custom style fixes and tweaks for table elements.
|
||||
*/
|
||||
th, table:not(.preset) td:before {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
table:not(.preset) td:before {
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
}
|
||||
th, td {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color, $card-section-style1-border-style);
|
||||
// --- --- ---
|
||||
// Tab module is disabled for this flavor.
|
||||
// @import '../mini/tab';
|
||||
// --- --- ---
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom style fixes and tweaks for contextual elements.
|
||||
*/
|
||||
.toast {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
// --- --- ---
|
||||
// Progress module is disabled for this flavor.
|
||||
// @import '../mini/progress';
|
||||
// --- --- ---
|
||||
@import '../mini/utility';
|
||||
|
|
@ -1,646 +0,0 @@
|
|||
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||
// structured like the flavor description below, will be included in your final CSS file.
|
||||
/*
|
||||
Flavor name: Sucroa (mini-sucroa)
|
||||
Author: Angeliki Daskalakis
|
||||
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.3.7
|
||||
*/
|
||||
// Google Fonts imports and usage
|
||||
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
|
||||
// font-family: 'Libre Baskerville', serif;
|
||||
// font-family: 'Cousine', monospace;
|
||||
// Basic rules for body and typography
|
||||
$fore-color: #211423; // Text and general foreground color
|
||||
$back-color: #fffcc9; // Body background color
|
||||
$base-font-family: 'Libre Baskerville', serif; // Default font stack for all elements:
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$base-font-size: 1em; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.7; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$body-margin: 0; // Margin for the body
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all elements? (`true` or `false`) [3]
|
||||
$h1-font-size: 2.2em; // Font size of h1
|
||||
$h2-font-size: 1.7em; // Font size for h2
|
||||
$h3-font-size: 1.4em; // Font size for h3
|
||||
$h4-font-size: 1.2em; // Font size for h4
|
||||
$h5-font-size: 1em; // Font size for h5
|
||||
$h6-font-size: 0.9em; // Font size for h6
|
||||
$heading-line-height: 1.2em; // Line height for all headings
|
||||
$heading-margin: 12px 10px; // Margin for all headings
|
||||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-2px; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 4px 10px; // Margin for <p> elements
|
||||
$list-margin: 4px 10px 10px; // Margin for <ol> and <ul> elements
|
||||
$list-left-padding: 32px; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.3em; // <hr> line height
|
||||
$horizontal-rule-margin: 10px; // <hr> margin
|
||||
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$horizontal-rule-fancy-gradient:"to right, #5d545f, #1e1320, #5d545f"; // Gradient style for fancy horizontal rule
|
||||
$blockquote-back-color: #eae1ff; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 10px; // Margin for <blockquote>
|
||||
$blockquote-padding: 8px 12px 28px; // Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 3px solid #331e36; // Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #5d545f; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 4px; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 2px; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: // Box shadow for <blockquote>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$use-default-code-fonts: false; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||
$code-font-family: 'Cousine', monospace, monospace;// Fonts for code elements if not default
|
||||
$code-element-padding: 3px 4px; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e8deff; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2px; // Border radius for <code>
|
||||
$code-element-box-shadow: // Box shadow for <code>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$pre-element-padding: 8px 12px 8px; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 2px; // Border radius for <pre>
|
||||
$pre-element-margin: 10px; // Margin for <pre>
|
||||
$pre-element-box-shadow: // Box shadow for <pre>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 3px solid #6979c6; // Style of the sidebar of <pre>
|
||||
$kbd-element-padding: 3px 4px; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #fffddc; // Text color for <kbd>
|
||||
$kbd-element-back-color: #331e36; // Background color for <kbd>
|
||||
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||
$kbd-element-border-radius: 2px; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: // Box shadow for <kbd>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$style-samp-element: false; // Should styles for <samp> be included? (`true`/`false`) [8]
|
||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||
//$samp-element-back-color: #2196f3; // Background color for <samp>
|
||||
//$samp-element-border-style: 0; // Border style for <samp>
|
||||
//$samp-element-border-radius:2px; // Border radius for <samp>
|
||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn> be included (`true`/`false`) [9]
|
||||
$small-font-size: 80%; // Font size for <small> elements
|
||||
$sup-font-size: 80%; // Font size for <sup> elements
|
||||
$sub-font-size: 80%; // Font size for <sub> elements
|
||||
$sup-top: -6px; // <sup> top
|
||||
$sub-bottom: -6px; // <sub> bottom
|
||||
$link-fore-color: #5664a3; // Text color for <a>
|
||||
$link-visited-fore-color: #434e7f; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
$apply-link-underline: true; // Should an underline be applied to all <a> elements? (`true`/`false`) [10]
|
||||
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`) [11]
|
||||
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
|
||||
$figcaption-font-size: 80%; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||
// element's font sizing.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||
// color, as defined in $link-fore-color.
|
||||
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||
// Variables for grid elements
|
||||
$use-four-step-grid: false; // Should the old 4-step grid system be used instead of the new (`true`/`false`) [1]
|
||||
$include-parent-layout: true; // Should the classes for rows defining the column layout of children be included (`true`/`false`) [2]
|
||||
$grid-container-name: 'container'; // Class name for the grid container
|
||||
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
|
||||
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
|
||||
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
||||
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
||||
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||
$grid-column-padding: 0 4px; // Padding for the columns of the grid
|
||||
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
|
||||
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Notes:
|
||||
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
|
||||
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.
|
||||
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
|
||||
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #e8deff; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #a9a2ba; // Border style for forms
|
||||
$form-border-radius: 2px; // Border radius for forms
|
||||
$form-margin: 10px; // Margin for forms
|
||||
$form-padding: 14px 10px 20px; // Padding for forms
|
||||
$form-box-shadow: // Box shadow for forms
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #a9a2ba; // Border style for fieldset
|
||||
$fieldset-border-radius: 2px; // Border radius for fieldset
|
||||
$fieldset-margin: 2px; // Margin for fieldset
|
||||
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
$legend-font-size: 0.925em; // Font size for legend
|
||||
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||
$legend-padding: 2px 4px; // Padding for legend
|
||||
$label-padding: 6px; // Padding for label
|
||||
$input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: true; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$input-group-fluid-name: 'fluid'; // Class name for fluid input groups
|
||||
$include-vertical-input-group: true; // Should vertical input groups be included? (`true`/`false`) [1]
|
||||
$input-group-vertical-name: 'vertical'; // Class name for vertical input groups.
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #f2edff; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #a9a2ba; // Border style for input
|
||||
$input-border-radius: 2px; // Border radius for input
|
||||
$input-margin: 2px; // Margin for input
|
||||
$input-padding: 8px 12px; // Padding for input
|
||||
$input-focus-border-color: #6979c6; // Border color for focused input
|
||||
$input-invalid-border-color: #d2405f; // Border color for invalid input
|
||||
$input-disabled-opacity: 0.8; // Opacity for disabled input
|
||||
$input-readonly-back-color: #eae1ff; // Background color for readonly input
|
||||
$input-readonly-border-color: #a9a2ba; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#493e4b; // Text color for input placeholder
|
||||
$select-padding-right: 20px; // Right padding for select element
|
||||
$button-back-color: #d3cae8; // Back color for button elements
|
||||
$button-back-opacity: 1; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 0.75; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 1px solid #a9a2ba; // Border style for button elements
|
||||
$button-border-radius: 3px; // Border radius for button elements
|
||||
$button-padding: 8px 12px; // Padding for button elements
|
||||
$button-margin: 10px; // Margin for button elements
|
||||
$button-box-shadow: // Box shadow for buttons
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$button-disabled-opacity: 0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class for button groups
|
||||
$button-group-border-style: 1px solid #a9a2ba; // Border style for button groups
|
||||
$button-group-margin: $button-margin; // Margin for button groups
|
||||
$button-group-box-shadow: // Box shadow for button groups
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$button-group-mobile-breakpoint: 767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [1]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #6979c6; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 1; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: 0.75; // Background opacity for button variant 1 on hover or focus
|
||||
$button-variant1-fore-color: #fffddc; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary'; // Class name for button variant 2
|
||||
$button-variant2-back-color: #d2405f; // Background color for button variant 2
|
||||
$button-variant2-back-opacity: 1; // Background opacity for button variant 2
|
||||
$button-variant2-hover-back-opacity: 0.75; // Background opacity for button variant 2 on hover or focus
|
||||
$button-variant2-fore-color: #fffddc; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
||||
$button-variant3-back-color: #2b866d; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 1; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: 0.75; // Background opacity for button variant 3 on hover or focus
|
||||
$button-variant3-fore-color: #fffddc; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: #331e36; // Background color for button variant 4
|
||||
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: 0.75; // Background opacity for button variant 4 on hover or focus
|
||||
$button-variant4-fore-color: #fffddc; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 2px; // Border radius for button style 1
|
||||
$button-style1-padding: 4px 6px; // Padding for button style 1
|
||||
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||
$checkbox-size: 16px; // Size for checkbox/radio [2]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #a9a2ba; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 3px; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
|
||||
$checkbox-box-shadow: // Box shadow for checkbox/radio
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$include-switch: false; // Should switch components be included? (`true`/`false`)
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables. The same applies for $include-vertical-input-group and vertical input groups.
|
||||
// [2] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
|
||||
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
|
||||
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [3] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
$header-height: 48px; // Height for <header>
|
||||
$header-back-color: #211423; // Background color for <header>
|
||||
$header-fore-color: #fffddc; // Text color for <header>
|
||||
$header-border-style: 0; // Border style for <header>
|
||||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 3px 10px; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.5; // Line height for <header>'s logo
|
||||
$header-logo-margin: 6px 6px 1px 1px; // Margin for <header>'s logo
|
||||
$header-logo-padding: 6px 0 0; // Padding for <header>'s logo
|
||||
$header-link-hover-color: #493e4b; // Hover color for <header>'s links
|
||||
$header-link-margin: 3px 0 0; // Margin for <header>'s links
|
||||
$include-header-sticky: true; // Should sticky <header> elements be included? (`true`/`false`) [1]
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #e8deff; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #a9a2ba; // Border style for <nav>
|
||||
$nav-border-radius: 2px; // Border radius for <nav>
|
||||
$nav-padding: 12px 10px 18px 22px; // Padding for <nav>
|
||||
$nav-margin: 2px; // Margin for <nav>
|
||||
$nav-box-shadow: // Box shadow for <nav>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$nav-link-fore-color: #6979c6; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left:14px; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: false; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: $nav-back-color; // Background color of the drawer component
|
||||
$drawer-border-style: $nav-border-style; // Border style of the drawer component
|
||||
$drawer-border-radius: 2px; // Border radius of the drawer component
|
||||
$drawer-width: 320px; // Width of the drawer component
|
||||
$drawer-padding: 0; // Padding of the drawer component
|
||||
$drawer-box-shadow: none; // Box shadow for the drawer component
|
||||
$drawer-mobile-breakpoint: 768px; // Mobile breakpoint for the drawer component
|
||||
$drawer-normal-height: calc(100vh - 54px); // Height of the drawer component when shown as normal menu
|
||||
$drawer-right-name: 'right'; // Class name for the right variant of the drawer component
|
||||
$drawer-persistent-name: 'persistent'; // Class name for the persisten variant of the drawer component
|
||||
$drawer-toggle-name: 'drawer-toggle'; // Class name for the drawer component's toggle
|
||||
$drawer-toggle-font-size: 40px; // Font size for the drawer component's toggle icon
|
||||
$drawer-toggle-line-height:0.125; // Line height for the drawer component's toggle icon
|
||||
$drawer-toggle-top: 9px; // Top position for the drawer component's toggle icon
|
||||
$drawer-close-name: 'close'; // Class name of the close element for the drawer component
|
||||
$drawer-close-top: 12px; // Top position of the drawer component's close icon
|
||||
$drawer-close-right: 4px; // Right position of the drawer component's close icon
|
||||
$footer-back-color: #211423; // Background color for <footer>
|
||||
$footer-fore-color: #fffddc; // Text color for <footer>
|
||||
$footer-border-style: 0; // Border stye for <footer>
|
||||
$footer-font-size: 90%; // Font size for <footer>
|
||||
$footer-margin: 22px 0 0; // Margin for <footer>
|
||||
$footer-padding: 24px 10px 14px; // Padding for <footer>
|
||||
$footer-link-fore-color: #7480b3; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be included (`true`/`false`) [3]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $nav-include-sublink-bar is `true`, a left-side border bar will appear next to the navigation
|
||||
// subcategories, using the values specified.
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #a9a2ba; // Border style for <table> and children
|
||||
$table-border-radius: 2px; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$table-caption-font-size: 1.5em; // Font size for <caption>
|
||||
$table-caption-margin: 6px 10px 12px; // Margin for <caption>
|
||||
$table-row-padding: 10x; // Padding for <tr> - both views
|
||||
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #d3cae8; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$table-body-back-color: #f2edff; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
$table-mobile-breakpoint: 767px; // Breakpoint for <table> mobile view
|
||||
$table-mobile-card-spacing: 12px; // Space between <tr> cards - mobile view
|
||||
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers in mobile view [1]
|
||||
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||
$include-horizontal-table: false; // Should horizontal <table> elements be included? (`true`/`false`) [2]
|
||||
$include-scrollable-table: false; // Should scrollable <table> elements be included? (`true`/`false`) [2]
|
||||
$table-not-responsive-name: 'preset'; // Class name for <table> non-responsive view
|
||||
$table-striped-name: 'striped'; // Class name for striped <table>
|
||||
$table-striped-alt-body-back-color: #ece4ff; // Alternate background color for <td> in striped <table>
|
||||
// Notes:
|
||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||
// in order for their mobile headers to display properly.
|
||||
// [2] - If $include-horizontal-table is `true`, then the <table> horizontal view will be included in a class defined by
|
||||
// $table-horizontal-name.
|
||||
// [3] - If $include-scrollable-table is `true`, then the <table> scrollable view will be included in a class defined by
|
||||
// $table-scrollable-name and a height defined by $table-scrollable-height.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #f2d7d8; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #9b898a; // Border style for cards
|
||||
$card-border-radius: 2px; // Border radius for cards
|
||||
$card-margin: 4px 10px 22px; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #c7b0b1; // Border style for card sections
|
||||
$card-section-padding: 8px 10px; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
$card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #fe9992; // Background color for card style 1
|
||||
$card-style1-fore-color: $fore-color; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #fedb64; // Border style for card style 1
|
||||
$card-style1-border-radius: 2px; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #fedb64; // Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #ac354e; // Background color for card style 2
|
||||
$card-style2-fore-color: #fffddc; // Text color for card style 2
|
||||
$card-style2-border-style: 1px solid #86293d; // Border style for card style 2
|
||||
$card-style2-border-radius: 2px; // Border radius for card style 2
|
||||
$card-style2-section-border-style:1px solid #86293d; // Border style for card style 2 sections
|
||||
$card-section-style1-name: 'light'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #f6e5e6; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
$card-section-style2-name: 'lighter'; // Class name for card section style 2
|
||||
$card-section-style2-back-color: #fbf4f4; // Background color for card section style 2
|
||||
$card-section-style2-fore-color: $fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 12px 14px; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: // Box shadow for the tabs' container
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$tab-label-back-color: #d3cae8; // Background color for tabs' labels
|
||||
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
||||
$tab-label-selected-back-color: #e8deff; // Background color for open tab's label
|
||||
$tab-label-selected-fore-color: $fore-color; // Text color for open tab's label
|
||||
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
||||
$tab-label-padding: 10px 12px; // Padding for tabs' labels
|
||||
$tab-label-height: 28px; // Height for tabs' labels
|
||||
$tab-border-style: 1px solid #a9a2ba; // Border style for tabs
|
||||
$tab-border-radius: 2px; // Border radius for tabs
|
||||
$tab-selected-border-color: #6979c6; // Selected tab's bottom border color
|
||||
$tab-panel-back-color: #eee7ff; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
$tab-panel-padding: 10px; // Padding for tabs' panels
|
||||
$tab-panel-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for contextual background elements and alerts
|
||||
$mark-back-color: #6979c6; // Background color for <mark>
|
||||
$mark-fore-color: #fffddc; // Text color for <mark>
|
||||
$mark-font-size: 95%; // Font size for <mark>
|
||||
$mark-line-height: 1; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-padding: 3px 5px; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||
$mark-variant1-back-color: #d2405f; // Background color for <mark> variant 1
|
||||
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
|
||||
$mark-variant2-back-color: #2b866d; // Background color for <mark> variant 2
|
||||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$mark-style2-border-radius: 2px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 5px; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 100%; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
|
||||
$toast-name: 'toast'; // Class name for toast component
|
||||
$toast-bottom: 24px; // Bottom position for toasts
|
||||
$toast-back-color: #424242; // Background color for toasts
|
||||
$toast-fore-color: #fffddc; // Text color for toasts
|
||||
$toast-border-style: 0; // Border style for toasts
|
||||
$toast-border-radius: 32px; // Border radius for toasts
|
||||
$toast-padding: 12px 24px; // Padding for toasts
|
||||
$toast-box-shadow: none; // Box shadow for toasts
|
||||
$toast-style1-name: 'small'; // Class name for toast style 1
|
||||
$toast-style1-border-style: 0; // Border style for toast style 1
|
||||
$toast-style1-border-radius: 24px; // Border radius for toast style 1
|
||||
$toast-style1-padding: 8px 16px; // Padding for toast style 1
|
||||
$toast-style2-name: 'large'; // Class name for toast style 2
|
||||
$toast-style2-border-style: 0; // Border style for toast style 2
|
||||
$toast-style2-border-radius: 48px; // Border radius for toast style 2
|
||||
$toast-style2-padding: 18px 36px; // Padding for toast style 2
|
||||
$include-tooltip: true; // Should tooltips be included? (`true`/`false`) [1]
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||
$tooltip-fore-color: #fffddc; // Text color for tooltips
|
||||
$tooltip-border-radius: 3px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 8px; // The size of the tooltip's tail
|
||||
$tooltip-padding: 10px; // Padding for tooltips
|
||||
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
||||
$include-modal: false; // Should modals be included? (`true`/`false`) [2]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
|
||||
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
||||
// included.
|
||||
// [2] - If the value of $include-modal is `true`, a modal component will be created based on the values of the variables
|
||||
// for the modal, as explained in their descriptions.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #e8deff; // Background color for <progress>
|
||||
$progress-fore-color: #6979c6; // Progress bar color for <progress>
|
||||
$progress-height: 16px; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 10px; // Left and right margin for <progress>
|
||||
$progress-box-shadow: // Box shadow for <progress>
|
||||
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
$progress-variant1-fore-color: #d2405f; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
|
||||
$progress-variant2-fore-color: #2b866d; // Progress bar color for <progress> variant 2
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness: 4px; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #d6daef; // Background color for donut spinner
|
||||
$spinner-donut-fore-color: #6979c6; // Foreground color for donut spinner
|
||||
$spinner-donut-size: 20px; // Size for donut spinner
|
||||
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
|
||||
$spinner-donut-variant1-back-color: #f2cad3; // Background color for donut spinner variant 1
|
||||
$spinner-donut-variant1-fore-color: #d2405f; // Foreground color for donut spinner variant 1
|
||||
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
||||
$spinner-donut-variant2-back-color: #c5ded7; // Background color for donut spinner variant 2
|
||||
$spinner-donut-variant2-fore-color: #2b866d; // Foreground color for donut spinner variant 2
|
||||
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
|
||||
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1
|
||||
$spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #e8deff; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 12px 10px; // Margin for breadcrumbs
|
||||
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 3px; // Width of the breadcrumbs' separator
|
||||
$breadcrumbs-border-style: 1px solid #a9a2ba; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
|
||||
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs
|
||||
0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 32px; // Size of the close icon
|
||||
$close-icon-back-color: #e8deff; // Background color for the close icon
|
||||
$close-icon-fore-color: #211423; // Foreground color for the close icon
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 4px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
|
||||
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
|
||||
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
|
||||
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
||||
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive margin
|
||||
$responsive-margin-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive margin
|
||||
$responsive-margin-small-value: 3px; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 6px; // Margin value for responsive margin on medium screens
|
||||
$responsive-margin-large-value: 10px; // Margin value for responsive margin on large screens
|
||||
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||
$responsive-padding-medium-breakpoint: $grid-medium-breakpoint; // Medium screen breakpoint for responsive padding
|
||||
$responsive-padding-large-breakpoint: $grid-large-breakpoint; // Large screen breakpoint for responsive padding
|
||||
$responsive-padding-small-value: 2px 3px; // Padding value for responsive padding on small screens
|
||||
$responsive-padding-medium-value: 4px 6px; // Padding value for responsive padding on medium screens
|
||||
$responsive-padding-large-value: 8px 10px; // Padding value for responsive padding on large screens
|
||||
$responsive-hidden-prefix: 'hidden'; // Class name prefix for responsive hidden elements
|
||||
$responsive-visually-hidden-prefix: 'visually-hidden'; // Class name prefix for responsive visually hidden elements
|
||||
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
||||
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
||||
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
|
||||
// names that will be used.
|
||||
// [2] - If the value of $include-clearfix is true, a clearfix class will be created using the value of $clearfix-name to determine the
|
||||
// class name of the clearfix component.
|
||||
// [3] - If the value of $include-center-block is true, a center block class will be created using the value of $center-block-name to
|
||||
// determine the class name of the center block class.
|
||||
// Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
|
||||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
@import '../mini/grid';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
|
||||
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
|
||||
$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
|
||||
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
|
||||
$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
|
||||
@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
|
||||
$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
|
||||
@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
|
||||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
@include make-card-alt-size ($card-size3-name, $card-size3-width);
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
|
||||
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
|
||||
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
|
||||
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color);
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
$card-section-style2-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
@import '../mini/tab';
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
|
||||
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
|
||||
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
|
||||
$mark-style1-border-radius, $mark-style1-padding);
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
|
||||
@include make-toast-alt-style($toast-style1-name, $toast-style1-border-style,
|
||||
$toast-style1-border-radius, $toast-style1-padding);
|
||||
@include make-toast-alt-style($toast-style2-name, $toast-style2-border-style,
|
||||
$toast-style2-border-radius, $toast-style2-padding);
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
|
||||
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
|
||||
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
$spinner-donut-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
|
||||
$spinner-donut-style1-border-thickness);
|
||||
@import '../mini/utility';
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-small-value,
|
||||
$responsive-margin-medium-value, $responsive-margin-large-value);
|
||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
|
||||
$responsive-padding-medium-value, $responsive-padding-large-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
|
||||
@include make-hidden-responsive ($responsive-hidden-prefix);
|
||||
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
/*
|
||||
Definitions for cards and containers.
|
||||
*/
|
||||
// Dependency: This module depends heavily on the grid system module.
|
||||
$card-name: 'card' !default; // Class name for the cards
|
||||
$card-section-name: 'section' !default; // Class name for the cards' sections
|
||||
$card-section-media-name: 'media' !default; // Class name for the cards' sections (media cotent)
|
||||
$card-normal-width: 320px !default; // Width for normal cards
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
// Check the `_card_mixins.scss` file to find this module's mixins.
|
||||
@import 'card_mixins';
|
||||
// Card styling
|
||||
.#{$card-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-box-align: center;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// Actual styling for the cards
|
||||
background: $card-back-color; // Do not use conditions on this, causes transparency issues
|
||||
@if $card-fore-color != $fore-color {
|
||||
color: $card-fore-color;
|
||||
}
|
||||
@if $card-border-style != 0 {
|
||||
border: $card-border-style;
|
||||
}
|
||||
@if $card-border-radius != 0 {
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
@if $card-margin != 0 {
|
||||
margin: $card-margin;
|
||||
}
|
||||
@if $card-box-shadow != none {
|
||||
box-shadow: $card-box-shadow;
|
||||
}
|
||||
// Hide overflow from section borders
|
||||
overflow: hidden;
|
||||
// Card sections
|
||||
& > .#{$card-section-name} {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 0; // Clean borders and radiuses for any element-based sections
|
||||
border-radius: 0; // Clean borders and radiuses for any element-based sections
|
||||
border-bottom: $card-section-border-style;
|
||||
padding: $card-section-padding;
|
||||
width: 100%;
|
||||
// Card media sections
|
||||
&.#{$card-section-media-name} {
|
||||
height: $card-section-media-height;
|
||||
padding: 0;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
// Card sections - last
|
||||
& > .#{$card-section-name}:last-child {
|
||||
border-bottom: 0; // Clean the extra border for last section
|
||||
}
|
||||
}
|
||||
// Responsiveness (if the screen is larger than card, set max-width)
|
||||
@media screen and (min-width: #{$card-normal-width}) {
|
||||
.#{$card-name} {
|
||||
max-width: $card-normal-width;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
// Card module's mixin definitions are here. For the module itself
|
||||
// check `_card.scss`.
|
||||
// Mixin for alternate card sizes.
|
||||
// Variables:
|
||||
// - $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).
|
||||
// Variables:
|
||||
// - $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-style : (Optional) The border style of the alternate card. Defaults to the value
|
||||
// of $card-border-style.
|
||||
// - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
|
||||
// of $card-border-radius.
|
||||
// - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to
|
||||
// the value of $card-section-border-style.
|
||||
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
|
||||
$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
|
||||
$card-alt-section-border-style : $card-section-border-style) {
|
||||
.#{$card-name}.#{$card-alt-name} {
|
||||
@if $card-alt-back-color != $card-back-color {
|
||||
background: $card-alt-back-color;
|
||||
}
|
||||
@if $card-alt-fore-color != $card-fore-color {
|
||||
color: $card-alt-fore-color;
|
||||
}
|
||||
@if $card-alt-border-style != $card-border-style {
|
||||
border: $card-alt-border-style;
|
||||
}
|
||||
@if $card-alt-border-radius != $card-border-radius {
|
||||
border-radius: $card-alt-border-radius;
|
||||
}
|
||||
@if $card-alt-section-border-style != $card-section-border-style{
|
||||
& > .#{$card-section-name} {
|
||||
border-bottom: $card-alt-section-border-style;
|
||||
}
|
||||
& > .#{$card-section-name}:last-child {
|
||||
border-bottom: 0; // Clean the extra border for last section
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section color variants).
|
||||
// Variables:
|
||||
// - $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.
|
||||
// - $card-section-alt-border-style : (Optional) The border style of the alternate card section. Defaults to
|
||||
// the value of $card-section-border-style.
|
||||
@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color,
|
||||
$card-section-alt-fore-color, $card-section-alt-border-style : $card-section-border-style) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
@if $card-section-alt-back-color != $card-back-color {
|
||||
background: $card-section-alt-back-color;
|
||||
}
|
||||
@if $card-section-alt-fore-color != $card-fore-color {
|
||||
color: $card-section-alt-fore-color;
|
||||
}
|
||||
@if $card-section-alt-border-style != $card-section-border-style {
|
||||
border: $card-section-alt-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section padding variants).
|
||||
// Variables:
|
||||
// - $card-section-alt-name : The name of the class used for the alternate card section.
|
||||
// - $card-section-alt-padding : The padding of the alternate card section.
|
||||
@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
padding: $card-section-alt-padding;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,265 +0,0 @@
|
|||
/*
|
||||
Definitions for contextual background elements, toasts and tooltips.
|
||||
*/
|
||||
// Contextual background elements use the mark element as their base.
|
||||
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling.
|
||||
$include-toast: true !default; // [Hidden flag] Should toasts be included? (`true`/`false`)
|
||||
$toast-name: 'toast' !default; // Class name for the toasts.
|
||||
$include-tooltip: true !default; // Should tooltips be included? (`true`/`false`)
|
||||
$tooltip-name: 'tooltip' !default; // Class name for the tooltips.
|
||||
$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name.
|
||||
$include-modal: true !default; // Should modals be included? (`true`/`false`)
|
||||
$modal-name: 'modal' !default; // Class name for the modals.
|
||||
$modal-close-name: 'close' !default; // Class name of the close element for the modal component.
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
$base-line-height: 1 !default; // [External variable - core] Line height for everything.
|
||||
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
|
||||
// Check the `_contextual_mixins.scss` file to find this module's mixins.
|
||||
@import 'contextual_mixins';
|
||||
// Default styling for mark. Use mixins for alternate styles.
|
||||
mark {
|
||||
@if $mark-back-color != $back-color {
|
||||
background: $mark-back-color;
|
||||
}
|
||||
@if $mark-fore-color != $fore-color {
|
||||
color: $mark-fore-color;
|
||||
}
|
||||
@if $mark-font-size != 100% {
|
||||
font-size: $mark-font-size;
|
||||
}
|
||||
@if $mark-line-height != $base-line-height {
|
||||
line-height: $mark-line-height;
|
||||
}
|
||||
@if $mark-border-style != 0 {
|
||||
border: $mark-border-style;
|
||||
}
|
||||
@if $mark-border-radius != 0 {
|
||||
border-radius: $mark-border-radius;
|
||||
}
|
||||
@if $mark-padding != 0 {
|
||||
padding: $mark-padding;
|
||||
}
|
||||
@if $mark-margin != 0 {
|
||||
margin: $mark-margin;
|
||||
}
|
||||
@if $mark-box-shadow != none {
|
||||
box-shadow: $mark-box-shadow;
|
||||
}
|
||||
&.#{$mark-inline-block-name}{
|
||||
display: inline-block; // Can be used to deal with some problems.
|
||||
}
|
||||
}
|
||||
// Default styling for toasts. Use mixins for alternate styles
|
||||
@if $include-toast {
|
||||
.#{$toast-name} {
|
||||
position: fixed;
|
||||
background: $toast-back-color;
|
||||
bottom: $toast-bottom;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@if $toast-fore-color != $fore-color {
|
||||
color: $toast-fore-color;
|
||||
}
|
||||
@if $toast-border-style != 0 {
|
||||
border: $toast-border-style;
|
||||
}
|
||||
@if $toast-border-radius != 0 {
|
||||
border-radius: $toast-border-radius;
|
||||
}
|
||||
@if $toast-padding != 0 {
|
||||
padding: $toast-padding;
|
||||
}
|
||||
@if $toast-box-shadow != none {
|
||||
box-shadow: $toast-box-shadow;
|
||||
}
|
||||
z-index: 1111;
|
||||
}
|
||||
}
|
||||
// Default styling for tooltips. Use mixins for alternate styles
|
||||
@if $include-tooltip {
|
||||
.#{$tooltip-name} {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
transition: all 0.3s;
|
||||
// Remember to keep this index a lower value than the one used for stickies.
|
||||
z-index: 1010; // Deals with certain problems when combined with cards and tables.
|
||||
left: 50%;
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
bottom: 75%;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
top: 75%;
|
||||
}
|
||||
@if $style-link-active-state {
|
||||
&:hover, &:focus, &:active {
|
||||
&:before, &:after {
|
||||
opacity: 1;
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover, &:focus {
|
||||
&:before, &:after {
|
||||
opacity: 1;
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before { // This is the little tooltip triangle
|
||||
content: '';
|
||||
background: transparent;
|
||||
border: $tooltip-tail-size solid transparent;
|
||||
// Older browsers will almost center the tooltip's tail
|
||||
left: 50%;
|
||||
// Newer browsers will center the tail properly
|
||||
left: calc(50% - #{$tooltip-tail-size});
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: $tooltip-back-color;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
||||
border-bottom-color: $tooltip-back-color;
|
||||
}
|
||||
&:after { // This is the actual tooltip's text block
|
||||
content: attr(aria-label);
|
||||
background: $tooltip-back-color;
|
||||
@if $tooltip-border-radius != 0 {
|
||||
border-radius: $tooltip-border-radius;
|
||||
}
|
||||
@if $tooltip-fore-color != $fore-color {
|
||||
color: $tooltip-fore-color;
|
||||
}
|
||||
@if $tooltip-padding != 0 {
|
||||
padding: $tooltip-padding;
|
||||
}
|
||||
@if $tooltip-box-shadow != none {
|
||||
box-shadow: $tooltip-box-shadow;
|
||||
}
|
||||
white-space: nowrap;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: 2 * $tooltip-tail-size;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
margin-top: 2 * $tooltip-tail-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $include-modal {
|
||||
.#{$modal-name} {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba($modal-back-color, $modal-back-opacity);
|
||||
& .card {
|
||||
margin: 0 auto;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
& .#{$modal-close-name} {
|
||||
position: absolute;
|
||||
top: $modal-close-top;
|
||||
right: $modal-close-right;
|
||||
padding: 0; // Fixes the extra padding added from <label> styling.
|
||||
}
|
||||
}
|
||||
}
|
||||
:checked + .#{$modal-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
z-index: 1200;
|
||||
& .card {
|
||||
& .#{$modal-close-name} {
|
||||
z-index: 1211;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// [WARNING: As of v2.2.0, the alert component is deprecated and no longer maintained.]
|
||||
$include-alerts: false !default; // [Hidden flag] Should alerts be included? (`true`/`false`)
|
||||
// Animation definition for animated alerts (included if wanted)
|
||||
@if $include-alerts { // Turn on if you want to enable the alert component.
|
||||
$alert-name: 'alert' !default; // Class name for the alerts.
|
||||
$alert-include-animated: false !default; // Should animated alerts be included? (`true`/`false`)
|
||||
$alert-animated-name: 'animated' !default; // Class name for animated alerts.
|
||||
$alert-back-color: #d1e6f3 !default; // Background color for alerts
|
||||
$alert-fore-color: $fore-color !default; // Text color for alerts
|
||||
$alert-border-style: 1px solid #d0d0d0 !default; // Border style for alerts
|
||||
$alert-border-radius: 0 !default; // Border radius for alerts
|
||||
$alert-padding: 0.75rem !default; // Padding for alerts
|
||||
$alert-margin: 0.5rem !default; // Margin for alerts
|
||||
$alert-box-shadow: none !default; // Box shadow for alerts
|
||||
@if $alert-include-animated {
|
||||
@-webkit-keyframes alert-anim {
|
||||
45% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
|
||||
50% { -webkit-transform: scale(1.005); -webkit-transform-origin: 50% 50%; }
|
||||
55% { -webkit-transform: scale(1); -webkit-transform-origin: 50% 50%; }
|
||||
}
|
||||
@keyframes alert-anim {
|
||||
45% { transform: scale(1); transform-origin: 50% 50%; }
|
||||
50% { transform: scale(1.005); transform-origin: 50% 50%; }
|
||||
55% { transform: scale(1); transform-origin: 50% 50%; }
|
||||
}
|
||||
}
|
||||
// Default styling for alerts. Use mixins for alternate styles
|
||||
.#{$alert-name} {
|
||||
display: block;
|
||||
@if $alert-back-color != $back-color {
|
||||
background: $alert-back-color;
|
||||
}
|
||||
@if $alert-fore-color != $fore-color {
|
||||
color: $alert-fore-color;
|
||||
}
|
||||
@if $alert-border-style != 0 {
|
||||
border: $alert-border-style;
|
||||
}
|
||||
@if $alert-border-radius != 0 {
|
||||
border-radius: $alert-border-radius;
|
||||
}
|
||||
@if $alert-margin != 0 {
|
||||
margin: $alert-margin;
|
||||
}
|
||||
@if $alert-padding != 0 {
|
||||
padding: $alert-padding;
|
||||
}
|
||||
@if $alert-box-shadow != none {
|
||||
box-shadow: $alert-box-shadow;
|
||||
}
|
||||
@if $alert-include-animated {
|
||||
&.#{$alert-animated-name} {
|
||||
// Try to make the animated alert not blurry
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
// Apply the animation
|
||||
-webkit-animation: alert-anim 6s linear infinite;
|
||||
animation: alert-anim 6s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
// Contextual module's mixin definitions are here. For the module itself
|
||||
// check `_contextual.scss`.
|
||||
// Mixin for alternate mark (contextual color variants).
|
||||
// Variables:
|
||||
// - $mark-alt-name : The name of the class used for the alternate mark.
|
||||
// - $mark-alt-back-color : The background color of the alternate mark.
|
||||
// - $mark-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the mark.
|
||||
@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color, $mark-alt-fore-color: $mark-fore-color) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-back-color != $mark-back-color {
|
||||
background: $mark-alt-back-color;
|
||||
}
|
||||
@if $mark-alt-fore-color != $mark-fore-color {
|
||||
color: $mark-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternative mark styles (contextual tags).
|
||||
// Variables:
|
||||
// - $mark-alt-name : The name of the class used for the alternate mark style.
|
||||
// - $mark-alt-border-style : The border-style of the alternate mark style.
|
||||
// - $mark-alt-border-radius : The border-radius of the alternate mark style.
|
||||
// - $mark-alt-padding : (Optional) The padding of the alternate mark style. Defaults to the padding of the mark.
|
||||
// - $mark-alt-font-size : (Optional) The font-size of the alternate mark style. Defaults to the font-size of the mark.
|
||||
// - $mark-alt-line-height : (Optional) The line height of the alternate mark style. Defaults to the line height of the mark.
|
||||
// - $mark-alt-box-shadow : (Optional) The box shadow of the alternate mark style. Defaults to the box shadow of the mark.
|
||||
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-style, $mark-alt-border-radius,
|
||||
$mark-alt-padding : $mark-padding, $mark-alt-font-size : $mark-font-size, $mark-alt-line-height : $mark-line-height,
|
||||
$mark-alt-box-shadow : $mark-box-shadow ) {
|
||||
mark.#{$mark-alt-name} {
|
||||
@if $mark-alt-font-size != $mark-font-size {
|
||||
font-size: $mark-alt-font-size;
|
||||
}
|
||||
@if $mark-alt-line-height != $mark-line-height {
|
||||
line-height: $mark-alt-line-height;
|
||||
}
|
||||
@if $mark-alt-border-style != $mark-border-style {
|
||||
border: $mark-alt-border-style;
|
||||
}
|
||||
@if $mark-alt-border-radius != $mark-border-radius {
|
||||
border-radius: $mark-alt-border-radius;
|
||||
}
|
||||
@if $mark-alt-padding != $mark-padding {
|
||||
padding: $mark-alt-padding;
|
||||
}
|
||||
@if $mark-alt-box-shadow != $mark-box-shadow {
|
||||
box-shadow: $mark-alt-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate toast (toast color variants).
|
||||
// Variables:
|
||||
// - $toast-alt-name : The name of the class used for the alternate toast.
|
||||
// - $toast-alt-back-color : The background color of the alternate toast.
|
||||
// - $toast-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the toast.
|
||||
@mixin make-toast-alt-color ($toast-alt-name, $toast-alt-back-color, $toast-alt-fore-color: $toast-fore-color) {
|
||||
@if not ($include-toast) {
|
||||
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
|
||||
}
|
||||
.#{$toast-name}.#{$toast-alt-name} {
|
||||
@if $toast-alt-back-color != $toast-back-color {
|
||||
background: $toast-alt-back-color;
|
||||
}
|
||||
@if $toast-alt-fore-color != $toast-fore-color {
|
||||
color: $toast-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate toast styles (toast style variants).
|
||||
// Variables:
|
||||
// - $toast-alt-name : The name of the class used for the alternate toast style.
|
||||
// - $toast-alt-border-style : The border style of the alternate toast style.
|
||||
// - $toast-alt-border-radius : Border radius of the alternate toast style.
|
||||
// - $toast-alt-padding : (Optional) Padding of the alternate toast style. Defaults to the toast's padding.
|
||||
// - $toast-alt-box-shadow : (Optional) Box shadow of the alretnate toast style. Defaults to the toast's box shadow.
|
||||
@mixin make-toast-alt-style ($toast-alt-name, $toast-alt-border-style, $toast-alt-border-radius,
|
||||
$toast-alt-padding : $toast-padding, $toast-alt-box-shadow : $toast-box-shadow) {
|
||||
@if not ($include-toast) {
|
||||
@error "Contextual module's toast mixins are only available if toasts are enabled. Set '$include-toast' to 'true' and try again!";
|
||||
}
|
||||
.#{$toast-name}.#{$toast-alt-name} {
|
||||
@if $toast-alt-border-style != $toast-border-style {
|
||||
border: $toast-alt-border-style;
|
||||
}
|
||||
@if $toast-alt-border-radius != $toast-border-radius {
|
||||
border-radius: $toast-alt-border-radius;
|
||||
}
|
||||
@if $toast-alt-padding != $toast-padding {
|
||||
padding: $toast-alt-padding;
|
||||
}
|
||||
@if $toast-alt-box-shadow != $toast-box-shadow {
|
||||
box-shadow: $toast-alt-box-shadowbox-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate tooltip (tooltip color variants).
|
||||
// Variables:
|
||||
// - $tooltip-alt-name : The name of the class used for the alternate tooltip.
|
||||
// - $tooltip-alt-back-color : The background color of the alternate tooltip.
|
||||
// - $tooltip-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the tooltip.
|
||||
@mixin make-tooltip-alt-color ($tooltip-alt-name, $tooltip-alt-back-color, $tooltip-alt-fore-color: $tooltip-fore-color) {
|
||||
@if not ($include-tooltip) {
|
||||
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
|
||||
}
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-back-color != $tooltip-back-color {
|
||||
&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
|
||||
border-top-color: $tooltip-alt-back-color;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
|
||||
border-bottom-color: $tooltip-alt-back-color;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
@if $tooltip-alt-back-color != $tooltip-back-color {
|
||||
background: $tooltip-alt-back-color;
|
||||
}
|
||||
@if $tooltip-alt-fore-color != $tooltip-fore-color {
|
||||
color: $tooltip-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate tooltip styles (tooltip style variants).
|
||||
// Variables:
|
||||
// - $tooltip-alt-name : The name of the class used for the alternate tooltip style.
|
||||
// - $tooltip-alt-tail-size : The border style of the alternate tooltip style.
|
||||
// - $tooltip-alt-border-radius : Border radius of the alternate tooltip style.
|
||||
// - $tooltip-alt-padding : (Optional) Padding of the alternate tooltip style. Defaults to the tooltip's padding.
|
||||
// - $tooltip-alt-box-shadow : (Optional) Box shadow of the alretnate tooltip style. Defaults to the tooltip's box shadow.
|
||||
@mixin make-tooltip-alt-style ($tooltip-alt-name, $tooltip-alt-tail-size, $tooltip-alt-border-radius,
|
||||
$tooltip-alt-padding : $tooltip-padding, $tooltip-alt-box-shadow : $tooltip-box-shadow) {
|
||||
@if not ($include-tooltip) {
|
||||
@error "Contextual module's tooltip mixins are only available if tooltips are enabled. Set '$include-tooltip' to 'true' and try again!";
|
||||
}
|
||||
.#{$tooltip-name}.#{$tooltip-alt-name} {
|
||||
@if $tooltip-alt-tail-size != $tooltip-tail-size {
|
||||
&:before {
|
||||
border-width: $tooltip-alt-tail-size;
|
||||
left: calc(50% - #{$tooltip-alt-tail-size});
|
||||
}
|
||||
&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
|
||||
margin-bottom: 2 * $tooltip-alt-tail-size;
|
||||
}
|
||||
&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
|
||||
margin-top: 2 * $tooltip-alt-tail-size;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
@if $tooltip-alt-border-radius != $tooltip-border-radius {
|
||||
border-radius: $tooltip-alt-border-radius;
|
||||
}
|
||||
@if $tooltip-alt-padding != $tooltip-padding {
|
||||
padding: $tooltip-alt-padding;
|
||||
}
|
||||
@if $tooltip-alt-box-shadow != $tooltip-box-shadow {
|
||||
box-shadow: $tooltip-alt-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
|
||||
// Mixin for alternate alert (alert color variants).
|
||||
// Variables:
|
||||
// - $alert-alt-name : The name of the class used for the alternate alert.
|
||||
// - $alert-alt-back-color : The background color of the alternate alert.
|
||||
// - $alert-alt-fore-color : (Optional) The text color of the alternate mark. Defaults to the text color of the alert.
|
||||
@mixin make-alert-alt-color ($alert-alt-name, $alert-alt-back-color, $alert-alt-fore-color: $alert-fore-color) {
|
||||
@if not ($include-alerts) {
|
||||
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
|
||||
}
|
||||
.#{$alert-name}.#{$alert-alt-name} {
|
||||
@if $alert-alt-back-color != $alert-back-color {
|
||||
background: $alert-alt-back-color;
|
||||
}
|
||||
@if $alert-alt-fore-color != $alert-fore-color {
|
||||
color: $alert-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// [WARNING: As of v2.2.0, this mixin is deprecated, due to the fact that the alert component is no longer maintained.]
|
||||
// Mixin for alternate alert styles (alert style variants).
|
||||
// Variables:
|
||||
// - $alert-alt-name : The name of the class used for the alternate alert style.
|
||||
// - $alert-alt-border-style : The border style of the alternate alert style.
|
||||
// - $alert-alt-border-radius : Border radius of the alternate alert style.
|
||||
// - $alert-alt-padding : (Optional) Padding of the alternate alert style. Defaults to the alert's padding.
|
||||
// - $alert-alt-margin : (Optional) Margin of the alternate alert style. Defaults to the alert's margin.
|
||||
// - $alert-alt-box-shadow : (Optional) Box shadow of the alretnate alert style. Defaults to the alert's box shadow.
|
||||
@mixin make-alert-alt-style ($alert-alt-name, $alert-alt-border-style, $alert-alt-border-radius,
|
||||
$alert-alt-padding : $alert-padding, $alert-alt-margin : $alert-margin,
|
||||
$alert-alt-box-shadow : $alert-box-shadow) {
|
||||
@if not ($include-alerts) {
|
||||
@error "Contextual module's alert mixins are only available if alerts are enabled. Set '$include-alerts' to 'true' and try again!";
|
||||
}
|
||||
.#{$alert-name}.#{$alert-alt-name} {
|
||||
@if $alert-alt-border-style != $alert-border-style {
|
||||
border: $alert-alt-border-style;
|
||||
}
|
||||
@if $alert-alt-border-radius != $alert-border-radius {
|
||||
border-radius: $alert-alt-border-radius;
|
||||
}
|
||||
@if $alert-alt-padding != $alert-padding {
|
||||
padding: $alert-alt-padding;
|
||||
}
|
||||
@if $alert-alt-margin != $alert-margin {
|
||||
margin: $alert-alt-margin;
|
||||
}
|
||||
@if $alert-alt-box-shadow != $alert-box-shadow {
|
||||
box-shadow: $alert-alt-box-shadowbox-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,466 +0,0 @@
|
|||
/*
|
||||
Browsers resets and base typography.
|
||||
*/
|
||||
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true`/`false`).
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements - Should only be specified in `px` units!
|
||||
$_1px: (1px/$base-root-font-size) * 1rem !default; // Calculated rem value of 1px.
|
||||
$use-fluid-typography: false !default; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$fluid-type-start-breakpoint: 320px !default; // Breakpoint where fluid typography scaling starts.
|
||||
$fluid-type-end-breakpoint: 1600px !default; // Breakpoint where fluid typography scaling ends.
|
||||
$fluid-type-small-type: 14px !default; // Smallest root font size for fluid typography.
|
||||
$fluid-type-large-type: 18px !default; // Largest root font size for fluid typography.
|
||||
$include-dfn-fix: true !default; // Fix display of <dfn> element in older versions of Android.
|
||||
$make-heading-smalltext-block: false !default; // Should <small> elements in headings be displayed as blocks (`true`/`false`).
|
||||
$horizontal-rule-fancy-style: false !default; // Should a fancy styling be applied for the <hr> element (`true`/`false`).
|
||||
$add-pre-element-sidebar: false !default; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`).
|
||||
$apply-link-underline: true !default; // Should an underline be applied to all <a> elements? (`true`/`false`).
|
||||
$apply-link-hover-fade: true !default; // Should the :hover and :focus state of <a> elements use fade-out instead of a different color (`true`/`false`).
|
||||
$style-link-active-state: false !default; // [Hidden flag] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
|
||||
// Base typography rules
|
||||
@if $use-fluid-typography {
|
||||
// Calculation of local variables (unitless values needed for the calculation of fluid typography)
|
||||
$_fluid-type-unitless-size-change: ($fluid-type-large-type - $fluid-type-small-type)/($fluid-type-small-type * 0 + 1);
|
||||
$_fluid-type-unitless-distance: ($fluid-type-end-breakpoint - $fluid-type-start-breakpoint)/($fluid-type-start-breakpoint * 0 + 1);
|
||||
html {
|
||||
font-size: #{$fluid-type-small-type};
|
||||
}
|
||||
@media screen and (min-width: #{$fluid-type-start-breakpoint}) {
|
||||
html {
|
||||
font-size: $base-root-font-size; // If the below calculation does not work, this is the fallback.
|
||||
font-size: calc(#{$fluid-type-small-type} + #{$_fluid-type-unitless-size-change} * ((100vw - #{$fluid-type-start-breakpoint}) / #{$_fluid-type-unitless-distance}));
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$fluid-type-end-breakpoint}) {
|
||||
html {
|
||||
font-size: #{$fluid-type-large-type};
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
}
|
||||
}
|
||||
|
||||
@if $apply-defaults-to-all {
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
@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: $fore-color;
|
||||
background: $back-color;
|
||||
}
|
||||
|
||||
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
|
||||
article, aside, section, figcaption, figure, main, details, menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
abbr[title] {
|
||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||
text-decoration: underline; // Opinionated style-fix for all browsers.
|
||||
}
|
||||
|
||||
// Correct display for older versions of IE.
|
||||
audio, video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Hide overflow in IE.
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Show overflow in IE.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Make images responsive by default.
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Fix display of <dfn> element in older versions of Android.
|
||||
@if $include-dfn-fix {
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: $heading-margin;
|
||||
font-weight: $heading-font-weight;
|
||||
small {
|
||||
color: $heading-smalltext-fore-color;
|
||||
@if $make-heading-smalltext-block {
|
||||
display: block;
|
||||
@if $heading-smalltext-b-top-margin != 0 {
|
||||
margin-top: $heading-smalltext-b-top-margin;
|
||||
}
|
||||
@if $heading-smalltext-b-font-size != $small-font-size {
|
||||
font-size: $heading-smalltext-b-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1-font-size;
|
||||
}
|
||||
h2 {
|
||||
font-size: $h2-font-size;
|
||||
}
|
||||
h3 {
|
||||
font-size: $h3-font-size;
|
||||
}
|
||||
h4 {
|
||||
font-size: $h4-font-size;
|
||||
}
|
||||
h5 {
|
||||
font-size: $h5-font-size;
|
||||
}
|
||||
h6 {
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $paragraph-margin;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: $list-margin;
|
||||
padding-left: $list-left-padding;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $bold-font-weight;
|
||||
}
|
||||
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
// Actual styling using variables
|
||||
line-height: $horizontal-rule-line-height;
|
||||
margin: $horizontal-rule-margin;
|
||||
@if $horizontal-rule-fancy-style {
|
||||
height: $_1px;
|
||||
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
}
|
||||
@else {
|
||||
height: 0;
|
||||
border-top: $horizontal-rule-border-style;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
@if $blockquote-back-color != $back-color {
|
||||
background: $blockquote-back-color;
|
||||
}
|
||||
@if $blockquote-fore-color != $fore-color {
|
||||
color: $blockquote-fore-color;
|
||||
}
|
||||
// Overwrite defaults
|
||||
margin: $blockquote-margin;
|
||||
padding: $blockquote-padding;
|
||||
@if $blockquote-border-style != 0 {
|
||||
border: $blockquote-border-style;
|
||||
}
|
||||
@if $blockquote-sidebar-style != 0 {
|
||||
border-left: $blockquote-sidebar-style;
|
||||
}
|
||||
@if $blockquote-border-radius != 0 {
|
||||
border-radius: $blockquote-border-radius;
|
||||
}
|
||||
@if $blockquote-box-shadow != none {
|
||||
box-shadow: $blockquote-box-shadow;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
font-style: normal;
|
||||
font-size: $blockquote-cite-font-size;
|
||||
@if $blockquote-cite-fore-color != $blockquote-fore-color {
|
||||
color: $blockquote-cite-fore-color;
|
||||
}
|
||||
left: $blockquote-cite-left-position;
|
||||
bottom: $blockquote-cite-bottom-position;
|
||||
content: '\2014 \2009'attr(cite);
|
||||
}
|
||||
}
|
||||
|
||||
$use-default-code-fonts: true !default;
|
||||
@if $use-default-code-fonts {
|
||||
code, kbd, pre, samp{
|
||||
font-family: monospace, monospace; // Applies display fix for all code elements
|
||||
}
|
||||
}
|
||||
@else {
|
||||
code, kbd, pre, samp{
|
||||
font-family: $code-font-family; // Display fix should be applied manually!
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@if $code-element-border-style != 0{
|
||||
border: $code-element-border-style;
|
||||
}
|
||||
@if $code-element-border-radius != 0 {
|
||||
border-radius: $code-element-border-radius;
|
||||
}
|
||||
@if $code-element-back-color != $back-color {
|
||||
background: $code-element-back-color;
|
||||
}
|
||||
@if $code-element-fore-color != $fore-color {
|
||||
color: $code-element-fore-color;
|
||||
}
|
||||
@if $code-element-padding != 0 {
|
||||
padding: $code-element-padding;
|
||||
}
|
||||
@if $code-element-box-shadow != none {
|
||||
box-shadow: $code-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto; // Responsiveness
|
||||
@if $pre-element-border-style != 0 {
|
||||
border: $pre-element-border-style;
|
||||
}
|
||||
@if $pre-element-border-radius != 0 {
|
||||
border-radius: $pre-element-border-radius;
|
||||
}
|
||||
@if $pre-element-back-color != $back-color {
|
||||
background: $pre-element-back-color;
|
||||
}
|
||||
@if $pre-element-fore-color != $fore-color {
|
||||
color: $pre-element-fore-color;
|
||||
}
|
||||
@if $pre-element-padding != 0 {
|
||||
padding: $pre-element-padding;
|
||||
}
|
||||
@if $pre-element-margin != 0 {
|
||||
margin: $pre-element-margin;
|
||||
}
|
||||
@if $add-pre-element-sidebar {
|
||||
border-left: $pre-element-sidebar-style;
|
||||
}
|
||||
@if $pre-element-box-shadow != none {
|
||||
box-shadow: $pre-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
@if $kbd-element-border-style != 0 {
|
||||
border: $kbd-element-border-style;
|
||||
}
|
||||
@if $kbd-element-border-radius != 0 {
|
||||
border-radius: $kbd-element-border-radius;
|
||||
}
|
||||
@if $kbd-element-back-color != $back-color {
|
||||
background: $kbd-element-back-color;
|
||||
}
|
||||
@if $kbd-element-fore-color != $fore-color {
|
||||
color: $kbd-element-fore-color;
|
||||
}
|
||||
@if $kbd-element-padding != 0 {
|
||||
padding: $kbd-element-padding;
|
||||
}
|
||||
@if $kbd-element-box-shadow != none {
|
||||
box-shadow: $kbd-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
$style-samp-element: false !default;
|
||||
@if $style-samp-element {
|
||||
samp{
|
||||
@if $samp-element-border-style != 0 {
|
||||
border: $samp-element-border-style;
|
||||
}
|
||||
@if $samp-element-border-radius != 0 {
|
||||
border-radius: $samp-element-border-radius;
|
||||
}
|
||||
@if $samp-element-back-color != $back-color {
|
||||
background: $samp-element-back-color;
|
||||
}
|
||||
@if $samp-element-fore-color != $fore-color {
|
||||
color: $samp-element-fore-color;
|
||||
}
|
||||
@if $samp-element-padding != 0 {
|
||||
padding: $samp-element-padding;
|
||||
}
|
||||
@if $samp-element-box-shadow != none {
|
||||
box-shadow: $samp-element-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
|
||||
small, sup, sub {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $small-font-size == $sub-font-size {
|
||||
small, sub {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
font-size: $sup-font-size;
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $small-font-size == $sup-font-size {
|
||||
small, sup {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
font-size: $sub-font-size;
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $sup-font-size == $sub-font-size {
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup, sub {
|
||||
font-size: $sup-font-size;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
font-size: $sup-font-size;
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
font-size: $sub-font-size;
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
// Link styling
|
||||
a{
|
||||
color: $link-fore-color;
|
||||
@if $apply-link-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
@if $link-font-weight != 500 {
|
||||
font-weight: $link-font-weight;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
&:visited {
|
||||
color: $link-visited-fore-color;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
@if $style-link-active-state {
|
||||
&:hover, &:focus, &:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover, &:focus {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@if $style-link-active-state {
|
||||
&:hover, &:focus, &:active {
|
||||
color: $link-hover-fore-color;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover, &:focus {
|
||||
color: $link-hover-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Captions for figures
|
||||
figcaption {
|
||||
@if $figcaption-font-size != 100% {
|
||||
font-size: $figcaption-font-size;
|
||||
}
|
||||
@if $figcaption-fore-color != $fore-color {
|
||||
color: $figcaption-fore-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,548 +0,0 @@
|
|||
/*
|
||||
Definitions for the grid system.
|
||||
*/
|
||||
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
|
||||
$use-four-step-grid: false !default; // Flag for the grid system choice (`true`/`false`).
|
||||
$include-parent-layout: true !default; // Flag for rows defining column layouts (`true`/`false`).
|
||||
$grid-container-name: 'container' !default; // Class name for the grid system container.
|
||||
$grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only).
|
||||
$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-column-count: 12 !default; // Number of columns in the grid (integer value only).
|
||||
$grid-column-padding: 0 4px !default; // Padding for the columns of the grid.
|
||||
$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-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid (four-step-grid-only).
|
||||
$grid-small-breakpoint: 480px !default; // Small screen breakpoint for grid (four-step-grid-only).
|
||||
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
|
||||
$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid.
|
||||
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
|
||||
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
|
||||
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
|
||||
// Fluid grid system container definition.
|
||||
.#{$grid-container-name} {
|
||||
margin: 0 auto;
|
||||
padding: 0 $grid-container-side-padding;
|
||||
}
|
||||
// Grid row definition.
|
||||
.#{$grid-row-name} {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
// Legacy grid system definitions.
|
||||
@if $use-four-step-grid {
|
||||
@if $include-parent-layout {
|
||||
// Grid column generic definitions for extra small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-'],
|
||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-'] > * {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix} > * {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Grid column generic definitions for extra small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix} {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-#{$i} > * {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$i} {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-normal-suffix} {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-first-suffix} {
|
||||
-webkit-order: -999;
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-last-suffix} {
|
||||
-webkit-order: 999;
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
// Legacy grid system definitions.
|
||||
@if $use-four-step-grid {
|
||||
// Small screen breakpoint.
|
||||
@media screen and (min-width: #{$grid-small-breakpoint}){
|
||||
@if $include-parent-layout {
|
||||
// Grid column generic definitions for small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'],
|
||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Grid column generic definitions for small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix} {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
|
||||
-webkit-order: -999;
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
|
||||
-webkit-order: 999;
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Non-legacy grid system definitions.
|
||||
@else {
|
||||
@if $include-parent-layout {
|
||||
// Grid column generic definitions for small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'],
|
||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Grid column generic definitions for small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix} {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
|
||||
-webkit-order: -999;
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
|
||||
-webkit-order: 999;
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
// The rest is mixed definitions.
|
||||
// Medium screen breakpoint.
|
||||
@media screen and (min-width: #{$grid-medium-breakpoint}){
|
||||
@if $include-parent-layout {
|
||||
// Grid column generic definitions for medium screens.
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'], .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > * {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Grid column generic definitions for medium screens.
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix} {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-#{$i} > * {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-first-suffix} {
|
||||
-webkit-order: -999;
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-last-suffix} {
|
||||
-webkit-order: 999;
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
// Large screen breakpoint.
|
||||
@media screen and (min-width: #{$grid-large-breakpoint}){
|
||||
@if $include-parent-layout {
|
||||
// Grid column generic definitions for large screens.
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'],
|
||||
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > * {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
// Grid column generic definitions for large screens.
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
box-sizing: border-box;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: $grid-column-padding;
|
||||
}
|
||||
// Grid column specific definition for flexible column.
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix} {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for predefined columns.
|
||||
@for $i from 1 through $grid-column-count {
|
||||
@if $include-parent-layout {
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i},
|
||||
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-#{$i} > * {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} {
|
||||
// Old syntax
|
||||
max-width: #{($i * 100% / $grid-column-count)};
|
||||
// New syntax
|
||||
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
flex-basis: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-first-suffix} {
|
||||
-webkit-order: -999;
|
||||
order: -999;
|
||||
}
|
||||
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-last-suffix} {
|
||||
-webkit-order: 999;
|
||||
order: 999;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,677 +0,0 @@
|
|||
/*
|
||||
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; // Should fluid input groups be included? (`true`/`false`)
|
||||
$input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups.
|
||||
$include-vertical-input-group:true !default; // Should vertical input groups be included? (`true`/`false`)
|
||||
$input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups.
|
||||
$button-class-name: 'button' !default; // Class for custom button elements.
|
||||
$include-button-group: true !default; // [Hidden flag] Should button groups be enabled? (`true`/`false`)
|
||||
$button-group-name: 'button-group' !default;// Class for button groups.
|
||||
$apply-select-fix: true !default; // [Hidden flag] Should the styles that fix <select> styling be applied? (`true`/`false`)
|
||||
// The below option will use the legacy high specificity selectors for <input> element styling instead
|
||||
// of the less specific, yet less complicated and less bloated input selector. This only applies to
|
||||
// the pseudo-classes and states of the <input> controls and not the default styling of them.
|
||||
$input-high-specificity-selectors: false !default; // [Hidden flag] Use legacy selectors for <input> element styling (`true`/`false`).
|
||||
// The below option will use the legacy high specificity selectors for <button> and button-like elements
|
||||
// instead of the less specific, yet less complicated and less bloated generic selector. This only applies
|
||||
// to the styling of consecutive elements.
|
||||
$button-group-high-specificity-selectors: false !default; // [Hidden flag] Use legacy selectors for button-like elements inside button groups (`false`/ `true`).
|
||||
$hide-file-inputs: true !default; // Should `file` <input> elements be hidden? (`true`/`false`)
|
||||
$hide-check-and-radio: true !default; // [Hidden flag] Should checkboxes and radios be hidden? (`true`/`false`)
|
||||
$include-switch: true !default; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch' !default; // Class name for switch components
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default.
|
||||
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
|
||||
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
|
||||
// Necessary functions for certain elements (select)
|
||||
/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
|
||||
/// -----------------------------------------------------------------------
|
||||
/// 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;
|
||||
}
|
||||
// Generate the arrow for the select element
|
||||
@function selectArrow() {
|
||||
$_input_fore_color: str-replace(#{$input-fore-color}, '#', '%23'); // Make sure it's all encoded properly
|
||||
@return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="'+$_input_fore_color+'" d="M.25.75h.5L.5 1"/></svg>';
|
||||
}
|
||||
// [Obsolete as of v2.3.2] Generate the rest of the background for the select element
|
||||
@function selectBackground() {
|
||||
$_input_back_color: str-replace(#{$input-back-color}, '#', '%23'); // Make sure it's all encoded properly
|
||||
@return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:'+$_input-back-color+'"/>';
|
||||
}
|
||||
// [Obsolete as of v2.3.2] Generate the rest of the background for the select element when readonly
|
||||
@function selectReadonlyBackground() {
|
||||
$_input-readonly-back-color: str-replace(#{$input-readonly-back-color}, '#', '%23'); // Make sure it's all encoded properly
|
||||
@return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:'+$_input-readonly-back-color+'"/>';
|
||||
}
|
||||
// Check the `_input_control_mixins.scss` file to find this module's mixins.
|
||||
@import 'input_control_mixins';
|
||||
// Base form styling.
|
||||
form {
|
||||
@if $form-back-color != $back-color {
|
||||
background: $form-back-color;
|
||||
}
|
||||
@if $form-fore-color != $fore-color {
|
||||
color: $form-fore-color;
|
||||
}
|
||||
@if $form-border-style != 0 {
|
||||
border: $form-border-style;
|
||||
}
|
||||
@if $form-border-radius != 0 {
|
||||
border-radius: $form-border-radius;
|
||||
}
|
||||
@if $form-margin != 0 {
|
||||
margin: $form-margin;
|
||||
}
|
||||
@if $form-padding != 0 {
|
||||
padding: $form-padding;
|
||||
}
|
||||
@if $form-box-shadow != none {
|
||||
box-shadow: $form-box-shadow;
|
||||
}
|
||||
}
|
||||
// Fieldset styling.
|
||||
fieldset {
|
||||
@if $fieldset-back-color != $form-back-color {
|
||||
background: $fieldset-back-color;
|
||||
}
|
||||
// Apply always to overwrite defaults for all of the below.
|
||||
border: $fieldset-border-style;
|
||||
border-radius: $fieldset-border-radius;
|
||||
margin: $fieldset-margin;
|
||||
padding: $fieldset-padding;
|
||||
}
|
||||
// Legend styling.
|
||||
legend {
|
||||
// IE and Edge fixes.
|
||||
box-sizing: border-box;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
// Actual styling.
|
||||
font-weight: $legend-font-weight;
|
||||
font-size: $legend-font-size;
|
||||
@if $legend-fore-color != $fore-color {
|
||||
color: $legend-fore-color;
|
||||
}
|
||||
@if $legend-padding != 0 {
|
||||
padding: $legend-padding;
|
||||
}
|
||||
}
|
||||
// Label syling.
|
||||
@if $label-padding != 0 {
|
||||
label {
|
||||
padding: $label-padding; // Padding is all that seems to be needed for now, but more stuff could be added later.
|
||||
}
|
||||
}
|
||||
// Input group base naming.
|
||||
.#{$input-group-name} {
|
||||
display: inline-block;
|
||||
// Fluid input groups
|
||||
@if $include-fluid-input-group {
|
||||
&.#{$input-group-fluid-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
& > input {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0px;
|
||||
flex-basis: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsiveness for fluid input groups
|
||||
@if $include-fluid-input-group {
|
||||
@media screen and (max-width: #{$input-group-mobile-breakpoint}) {
|
||||
.#{$input-group-name}.#{$input-group-fluid-name} {
|
||||
// Old syntax
|
||||
-webkit-box-orient: vertical;
|
||||
// New syntax
|
||||
-webkit-align-items: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $include-vertical-input-group {
|
||||
.#{$input-group-name}.#{$input-group-vertical-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: stretch;
|
||||
align-items: stretch;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
& > input {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0px;
|
||||
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;
|
||||
}
|
||||
// Remove the default vertical scrollbar in IE.
|
||||
textarea {
|
||||
overflow: 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.
|
||||
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
|
||||
[type="password"], [type="url"], [type="tel"], textarea, select {
|
||||
box-sizing: border-box;
|
||||
// Background, color and border should not be unassigned, as the browser defaults will apply.
|
||||
background: $input-back-color;
|
||||
color: $input-fore-color;
|
||||
border: $input-border-style;
|
||||
@if $input-border-radius != 0 {
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
@if $input-margin != 0 {
|
||||
margin: $input-margin;
|
||||
}
|
||||
@if $input-padding != 0 {
|
||||
padding: $input-padding;
|
||||
}
|
||||
@if $input-high-specificity-selectors {
|
||||
&:hover, &:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
}
|
||||
&:invalid, &:focus:invalid{
|
||||
border-color: $input-invalid-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&[readonly]{
|
||||
background: $input-readonly-back-color;
|
||||
border-color: $input-readonly-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if not $input-high-specificity-selectors {
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
|
||||
&:hover, &:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
@if $input-high-specificity-selectors or $input-disabled-opacity != $button-disabled-opacity {
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $input-disabled-opacity;
|
||||
}
|
||||
}
|
||||
&:invalid, &:focus:invalid{
|
||||
border-color: $input-invalid-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
&[readonly]{
|
||||
background: $input-readonly-back-color;
|
||||
border-color: $input-readonly-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Correct background styling in Safari
|
||||
@if $apply-select-fix {
|
||||
select:not([multiple]):not([size]) {
|
||||
padding-right: $select-padding-right;
|
||||
background: url(selectArrow()) no-repeat right;
|
||||
background-color: $input-back-color;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
&[readonly]{
|
||||
background-color: $input-readonly-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Make select respect parent width, stylize options
|
||||
select {
|
||||
max-width: 100%;
|
||||
}
|
||||
option {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
opacity: 1;
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
::-ms-placeholder {
|
||||
opacity: 1;
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
color: $input-placeholder-fore-color;
|
||||
}
|
||||
// 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: rgba($button-back-color, $button-back-opacity);
|
||||
color: $button-fore-color;
|
||||
border: $button-border-style;
|
||||
@if $button-border-radius != 0 {
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
@if $button-padding != 0 {
|
||||
padding: $button-padding;
|
||||
}
|
||||
@if $button-margin != 0 {
|
||||
margin: $button-margin;
|
||||
}
|
||||
@if $button-box-shadow != none {
|
||||
box-shadow: $button-box-shadow;
|
||||
}
|
||||
@if $apply-link-underline { // Override for links if underline is enabled.
|
||||
text-decoration: none;
|
||||
}
|
||||
transition: background 0.3s;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus {
|
||||
background: rgba($button-back-color, $button-hover-back-opacity);
|
||||
@if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@if $input-high-specificity-selectors or $input-disabled-opacity != $button-disabled-opacity {
|
||||
&:disabled, &[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: $button-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if not $input-high-specificity-selectors {
|
||||
@if $input-disabled-opacity == $button-disabled-opacity {
|
||||
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: $button-disabled-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $style-link-active-state {
|
||||
a.#{$button-class-name}:active, a[role="button"]:active {
|
||||
background: rgba($button-back-color, $button-hover-back-opacity);
|
||||
@if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styling for file inputs
|
||||
@if $hide-file-inputs {
|
||||
input[type="file"] { // Hide, use labels instead. Hidden inputs like this are still accessible.
|
||||
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%);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; // Correct inability to style in iOS and Safari.
|
||||
font: inherit; // Change font propery to `inherit` in Safari.
|
||||
}
|
||||
}
|
||||
@if $include-button-group {
|
||||
// Button group definition
|
||||
.#{$button-group-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
border: $button-group-border-style;
|
||||
@if $button-border-radius != 0 {
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
@if $button-group-margin != 0 {
|
||||
margin: $button-group-margin;
|
||||
}
|
||||
@if $button-group-box-shadow != none {
|
||||
box-shadow: $button-group-box-shadow;
|
||||
}
|
||||
&> button, [type="button"], & > [type="submit"], & > [type="reset"],
|
||||
& > .#{$button-class-name}, & > [role="button"] {
|
||||
margin: 0;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
@if $button-border-radius != 0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
@if $button-group-high-specificity-selectors {
|
||||
@if $button-group-border-style != 0 {
|
||||
+ button, + [type="button"], + [type="submit"], + [type="reset"],
|
||||
+ .#{$button-class-name}, + [role="button"] {
|
||||
border-left: $button-group-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $button-box-shadow != none {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@if not $button-group-high-specificity-selectors {
|
||||
@if $button-group-border-style != 0 {
|
||||
& > :not(:first-child) {
|
||||
border-left: $button-group-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsiveness for button groups
|
||||
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
|
||||
.#{$button-group-name} {
|
||||
// Old syntax
|
||||
-webkit-box-orient: vertical;
|
||||
// New syntax
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
@if $button-group-high-specificity-selectors {
|
||||
@if $button-group-border-style !=0 {
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
.#{$button-class-name}, [role="button"] {
|
||||
+ button, + [type="button"], + [type="submit"], + [type="reset"],
|
||||
+ .#{$button-class-name}, + [role="button"] {
|
||||
border: 0;
|
||||
border-top: $button-group-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@if $button-group-border-style !=0 {
|
||||
& > :not(:first-child) {
|
||||
border: 0;
|
||||
border-top: $button-group-border-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Definitions for checkboxes and radio button elements.
|
||||
// Note: both elements are hidden by default and use labels to show their input state.
|
||||
// Hide both input types - accessible (element is not visible, but screen readers read it normally).
|
||||
@if $hide-check-and-radio { // If you want to make these two <input>s visible by default, turn this on.
|
||||
[type="checkbox"], [type="radio"] {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
// Use input-group to setup the style for labels.
|
||||
.#{$input-group-name} {
|
||||
// Label styling based on the specifics of the checkbox/radio variables.
|
||||
[type="checkbox"] + label, [type="radio"] + label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
$_unit: $checkbox-size*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
margin-left: floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
}
|
||||
@else {
|
||||
margin-left: $checkbox-size * 1.25;
|
||||
}
|
||||
cursor: pointer;
|
||||
// Styling for checkbox/radio box part.
|
||||
&:before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: $checkbox-bottom-spacing;
|
||||
left: 0;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
content: '';
|
||||
border: $checkbox-border-thickness solid $checkbox-border-color;
|
||||
@if $checkbox-border-radius != 0 {
|
||||
border-radius: $checkbox-border-radius;
|
||||
}
|
||||
background: $checkbox-back-color;
|
||||
color: $checkbox-fore-color;
|
||||
$_unit: $checkbox-size*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
}
|
||||
@else {
|
||||
margin-left: - $checkbox-size * 1.25;
|
||||
}
|
||||
@if $checkbox-box-shadow != none {
|
||||
box-shadow: $checkbox-box-shadow;
|
||||
}
|
||||
}
|
||||
// Hover, focus styling.
|
||||
&:hover, &:focus {
|
||||
&:before {
|
||||
border-color: $checkbox-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
[type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
|
||||
border-color: $checkbox-focus-border-color;
|
||||
}
|
||||
// Make radio button box and fill circular.
|
||||
[type="radio"] + label {
|
||||
&:before, &:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
// Disabled and readonly styles.
|
||||
[type="checkbox"][disabled] + label, [type="radio"][disabled] + label,
|
||||
[type="checkbox"]:disabled + label, [type="radio"]:disabled + label {
|
||||
cursor: not-allowed;
|
||||
&:before, &:after {
|
||||
opacity: $checkbox-disabled-opacity;
|
||||
}
|
||||
}
|
||||
// Fill for checked checkbox/radio elements.
|
||||
[type="checkbox"]:checked + label, [type="radio"]:checked + label{
|
||||
&:after {
|
||||
position: absolute;
|
||||
background: $checkbox-fore-color;
|
||||
content: '';
|
||||
$_unit: $checkbox-size*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
top: floor($checkbox-size * 0.25) + $checkbox-bottom-spacing;
|
||||
left: floor($checkbox-size * 0.25);
|
||||
width: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
|
||||
height: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
|
||||
}
|
||||
@else {
|
||||
margin-left: - ($checkbox-size * 1.25);
|
||||
top: $checkbox-size * 0.25 + $checkbox-bottom-spacing;
|
||||
left: $checkbox-size * 0.25;
|
||||
width: $checkbox-size * 0.5 + $checkbox-border-thickness * 2;
|
||||
height: $checkbox-size * 0.5 + $checkbox-border-thickness * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Definitions for switch components.
|
||||
@if $include-switch {
|
||||
.#{$input-group-name} {
|
||||
// Label styling based on the specifics of the switch variables.
|
||||
[type="checkbox"] + label.#{$switch-name}, [type="radio"] + label.#{$switch-name} {
|
||||
// Styling for the bar part of the switch
|
||||
&:before {
|
||||
@if $switch-bottom-spacing != $checkbox-bottom-spacing {
|
||||
top: $switch-bottom-spacing;
|
||||
}
|
||||
width: $switch-bar-width;
|
||||
height: $switch-bar-height;
|
||||
border: $switch-bar-border-style;
|
||||
@if $switch-bar-border-radius != 0 {
|
||||
border-radius: $switch-bar-border-radius;
|
||||
}
|
||||
background: $switch-bar-back-color;
|
||||
$_unit: $switch-bar-width*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
margin-left: - floor($switch-bar-width + floor($switch-knob-width/2));
|
||||
}
|
||||
@else {
|
||||
margin-left: - ($switch-bar-width + $switch-knob-width/2);
|
||||
}
|
||||
@if $switch-bar-box-shadow != none {
|
||||
box-shadow: $switch-bar-box-shadow;
|
||||
}
|
||||
}
|
||||
// Styling for the knob part of the switch
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: $switch-knob-width;
|
||||
height: $switch-knob-height;
|
||||
background: $switch-knob-back-color;
|
||||
@if $switch-knob-border-style != 0 {
|
||||
border: $switch-knob-border-style;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@if $switch-knob-border-radius != 0 {
|
||||
border-radius: $switch-knob-border-radius;
|
||||
}
|
||||
$_unit: $switch-bar-width*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
top: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
|
||||
margin-left: - floor($switch-bar-width + $switch-knob-width);
|
||||
}
|
||||
@else {
|
||||
top: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
|
||||
margin-left: - ($switch-bar-width + $switch-knob-width);
|
||||
}
|
||||
@if $switch-knob-box-shadow != none {
|
||||
box-shadow: $switch-knob-box-shadow;
|
||||
}
|
||||
transition: left 0.3s;
|
||||
}
|
||||
// Hover and focus styles are absent for switches, as they are mainly intended for mobile, but you can add them in manually.
|
||||
}
|
||||
// [type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
|
||||
// border-color: $checkbox-focus-border-color;
|
||||
// }
|
||||
// Fill for checked checkbox/radio elements.
|
||||
[type="checkbox"]:checked + label.#{$switch-name}, [type="radio"]:checked + label.#{$switch-name}{
|
||||
&:before {
|
||||
@if $switch-on-bar-back-color != $switch-bar-back-color {
|
||||
background: $switch-on-bar-back-color;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
left: $switch-bar-width;
|
||||
// Some values need to be re-applied to avoid overwriting by the default checkbox ones.
|
||||
width: $switch-knob-width;
|
||||
height: $switch-knob-height;
|
||||
$_unit: $switch-bar-width*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
top: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
|
||||
margin-left: - floor($switch-bar-width + $switch-knob-width);
|
||||
}
|
||||
@else {
|
||||
top: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
|
||||
margin-left: - ($switch-bar-width + $switch-knob-width);
|
||||
}
|
||||
@if $switch-on-knob-back-color != $switch-knob-back-color {
|
||||
background: $switch-on-knob-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
// Input_control module's mixin definitions are here. For the module itself
|
||||
// check `_input_control.scss`.
|
||||
// Mixin for alternate buttons (button color variants).
|
||||
// Variables:
|
||||
// - $button-alt-name : The name of the class used for the alternate button.
|
||||
// - $button-alt-back-color : The background color of the alternate button.
|
||||
// - $button-alt-back-opacity : Opacity of the background color of the alternate button.
|
||||
// - $button-alt-hover-back-opacity : Opacity of the background color of the alternate button on hover.
|
||||
// - $button-alt-fore-color : (Optional) The text color of the alternate button. Defaults to the text color of the button.
|
||||
// Notes:
|
||||
// Due to something like `.button.secondary` being a higher specificity than `a.button` or `a`, no extra rules are
|
||||
// required for such elements. However rules for the normal button elements are applied in order to not require the
|
||||
// base class for the button styles.
|
||||
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
|
||||
$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
|
||||
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
|
||||
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
|
||||
background: rgba($button-alt-back-color, $button-alt-back-opacity);
|
||||
@if $button-alt-fore-color != $button-fore-color {
|
||||
color: $button-alt-fore-color;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
|
||||
}
|
||||
}
|
||||
@if $style-link-active-state {
|
||||
a.#{$button-class-name}.#{$button-alt-name}:active, a[role="button"].#{$button-alt-name}:active {
|
||||
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate button styles (button style variants).
|
||||
// Variables:
|
||||
// - $button-alt-name : The name of the class used for the alternate button style.
|
||||
// - $button-alt-border-style : The border style of the alternate button style.
|
||||
// - $button-alt-border-radius : Border radius of the alternate button style.
|
||||
// - $button-alt-padding : Padding of the alternate button style.
|
||||
// - $button-alt-margin : Margin of the alternate button style.
|
||||
// Notes:
|
||||
// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
|
||||
// required for such elements. However rules for the normal button elements are applied in order to not require the
|
||||
// base class for the button styles.
|
||||
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
|
||||
$button-alt-padding, $button-alt-margin) {
|
||||
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
|
||||
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
|
||||
@if $button-alt-border-style != $button-border-style {
|
||||
border: $button-alt-border-style;
|
||||
}
|
||||
@if $button-alt-border-radius != $button-border-radius {
|
||||
border-radius: $button-alt-border-radius;
|
||||
}
|
||||
@if $button-alt-padding != $button-padding {
|
||||
padding: $button-alt-padding;
|
||||
}
|
||||
@if $button-alt-margin != $button-margin {
|
||||
margin: $button-alt-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate switch (switch color variants).
|
||||
// Variables:
|
||||
// - $switch-alt-name : The name of the class used for the alternate switch.
|
||||
// - $switch-alt-on-knob-back-color : The background color of the alternate switch's knob when the switch is turned on.
|
||||
// - $switch-alt-on-bar-back-color : (Optional) The background color of the alternate switch's bar when the switch is turned on. Defaults to the background color of the switch's bar when the switch is turned on.
|
||||
// - $switch-alt-knob-back-color : (Optional) The background color of the alternate switch's knob. Defaults to the background color of the switch's knob.
|
||||
// - $switch-alt-bar-back-color : (Optional) The background color of the alternate switch's bar. Defaults to the background color of the switch's bar.
|
||||
@mixin make-switch-alt-color ($switch-alt-name, $switch-alt-on-knob-back-color,
|
||||
$switch-alt-on-bar-back-color: $switch-on-bar-back-color, $switch-alt-knob-back-color: $switch-knob-back-color,
|
||||
$switch-alt-bar-back-color: $switch-bar-back-color) {
|
||||
@if not ($include-switch) {
|
||||
@error "Input_control module's switch mixins are only available if switchws are enabled. Set '$include-switch' to 'true' and try again!";
|
||||
}
|
||||
[type="checkbox"] + label.#{$switch-name}.#{$switch-alt-name},
|
||||
[type="radio"] + label.#{$switch-name}.#{$switch-alt-name} {
|
||||
&:before {
|
||||
@if $switch-alt-bar-back-color != $switch--bar-back-color {
|
||||
background: $switch-alt-bar-back-color;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
@if $switch-alt-knob-back-color != $switch-knob-back-color {
|
||||
background: $switch-alt-knob-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
[type="checkbox"]:checked + label.#{$switch-name}.#{$switch-alt-name},
|
||||
[type="radio"]:checked + label.#{$switch-name}.#{$switch-alt-name} {
|
||||
&:before {
|
||||
@if $switch-alt-on-bar-back-color != $switch-on-bar-back-color {
|
||||
background: $switch-alt-on-bar-back-color;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
@if $switch-alt-on-knob-back-color != $switch-on-knob-back-color {
|
||||
background: $switch-alt-on-knob-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,294 +0,0 @@
|
|||
/*
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
$button-class-name: 'button' !default; // Class name for the button-like elements.
|
||||
$header-logo-name: 'logo' !default; // Class name for <header>'s logo.
|
||||
$header-colorize-svgs: true !default; // [Hidden flag] Colorizes SVGs in the <header> element's logo (`true`/`false`).
|
||||
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included (`true`/`false`).
|
||||
$header-sticky-name: 'sticky' !default; // Class name for sticky <header>.
|
||||
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included (`true`/`false`).
|
||||
$footer-sticky-name: 'sticky' !default; // Class name for sticky <footer>.
|
||||
$include-nav-styles: true !default; // [Hidden flag] Should <nav> elements by stylized? (`true`/`false`)
|
||||
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav.
|
||||
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add.
|
||||
$nav-sublink-padding-left:12px !default; // Left padding to add to subcategories.
|
||||
$nav-include-sublink-bar: false !default; // Should a border be added to the subcategories? (`true`/`false`)
|
||||
$include-drawer: true !default; // [Hidden flag] Should the drawer component be included? (`true`/`false`)
|
||||
$drawer-name: 'drawer' !default; // Class name for the drawer component.
|
||||
$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
|
||||
$drawer-mobile-breakpoint:768px !default; // Mobile breakpoint for the drawer component.
|
||||
$drawer-right-name: 'right' !default; // Class name for the right variant of the drawer component.
|
||||
$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
|
||||
$drawer-width: 320px !default; // Width of the drawer component.
|
||||
$drawer-close-name: 'close' !default; // Class name of the close element for the drawer component.
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
// Policy for below external flag is `ALWAYS_TRUE`. This is done due to links being underlined by default and as a safeguard from ugly branding.
|
||||
$apply-link-underline: true !default; // [External flag - core] Should underlining be applied to <a> elements? (`true`/`false`)
|
||||
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
|
||||
// The below variable is used to fix the display problem of the <header> element when used as a responsive row
|
||||
$grid-row-name: 'row' !default; // [External flag - grid] Class name for the grid system rows.
|
||||
$button-class-name: 'button' !default; // [External variable - input_control] Name of the button-like element styling class.
|
||||
$button-box-shadow:0 1px 3px rgba(0,0,0, 0.1) !default;// [External variable - input_control] Value of button's box-shadow.
|
||||
$button-border-style: 1px solid transparent !default; // [External variable - input_control] Value of button's border-style.
|
||||
// Header styling.
|
||||
header {
|
||||
display: block; // Correct display for older versions of IE.
|
||||
height: $header-height;
|
||||
background: $header-back-color; // Always apply background color to avoid shine through
|
||||
@if $header-fore-color != $fore-color {
|
||||
color: $header-fore-color;
|
||||
}
|
||||
@if $header-border-style != 0 {
|
||||
border: $header-border-style;
|
||||
}
|
||||
@if $header-margin != 0 {
|
||||
margin: $header-margin;
|
||||
}
|
||||
@if $header-padding != 0 {
|
||||
padding: $header-padding;
|
||||
}
|
||||
@if $header-box-shadow != none {
|
||||
box-shadow: $header-box-shadow;
|
||||
}
|
||||
// Responsiveness for smaller displays, scrolls horizontally.
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
// Header logo styling.
|
||||
.#{$header-logo-name} {
|
||||
@if $header-colorize-svgs { // Deals with SVG colorization in case people use SVGs.
|
||||
color: $header-fore-color; // Only toggle off if you know what you're doing.
|
||||
}
|
||||
@if $header-logo-font-size != $base-font-size {
|
||||
font-size: $header-logo-font-size;
|
||||
}
|
||||
@if $header-logo-line-height != $base-line-height {
|
||||
line-height: $header-logo-line-height;
|
||||
}
|
||||
@if $header-logo-margin != 0 {
|
||||
margin: $header-logo-margin;
|
||||
}
|
||||
@if $header-logo-padding != 0 {
|
||||
padding: $header-logo-padding;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
transition: opacity 0.3s ;
|
||||
}
|
||||
}
|
||||
// Link styling.
|
||||
button, [type="button"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
background: $header-back-color; // Apply color regardless to override styling from other things.
|
||||
color: $header-fore-color;
|
||||
vertical-align: top; // Alignemt, really important to make this work well.
|
||||
@if $header-link-margin != 0 {
|
||||
margin: $header-link-margin;
|
||||
}
|
||||
@if $style-link-active-state {
|
||||
&:hover, &:focus, &:active {
|
||||
background: $header-link-hover-color;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover, &:focus {
|
||||
background: $header-link-hover-color;
|
||||
}
|
||||
}
|
||||
@if $button-box-shadow != none { // Override for buttons when shadow is enabled.
|
||||
box-shadow: none;
|
||||
}
|
||||
@if $button-border-style != 0 { // Override for buttons when border-style is enabled.
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@if $apply-link-underline { // Override for links if underline is enabled.
|
||||
.#{$header-logo-name}, a.#{$button-class-name}, a[role="button"] {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// Fix for responsive header, using the grid system's row and column alignment.
|
||||
&.#{$grid-row-name} {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
// Navigation sidebar styling.
|
||||
@if $include-nav-styles { // Unless you want unstylized <nav> elements, keep this flag on.
|
||||
nav {
|
||||
display: block; // Correct display for older versions of IE.
|
||||
@if $nav-back-color != $back-color {
|
||||
background: $nav-back-color;
|
||||
}
|
||||
@if $nav-fore-color != $fore-color {
|
||||
color: $nav-fore-color;
|
||||
}
|
||||
@if $nav-border-style != 0 {
|
||||
border: $nav-border-style;
|
||||
}
|
||||
@if $nav-border-radius != 0 {
|
||||
border-radius: $nav-border-radius;
|
||||
}
|
||||
@if $nav-margin != 0 {
|
||||
margin: $nav-margin;
|
||||
}
|
||||
@if $nav-padding != 0 {
|
||||
padding: $nav-padding;
|
||||
}
|
||||
@if $nav-box-shadow != none {
|
||||
box-shadow: $nav-box-shadow;
|
||||
}
|
||||
a, a:visited {
|
||||
display: block;
|
||||
color: $nav-link-fore-color; // Apply regardless to de-stylize visited links.
|
||||
text-decoration: none;
|
||||
}
|
||||
// Subcategories in navigation.
|
||||
@for $i from 1 through $nav-sublink-depth {
|
||||
.#{$nav-sublink-prefix}-#{$i} {
|
||||
padding-left: $i * $nav-sublink-padding-left;
|
||||
position: relative;
|
||||
@if $nav-include-sublink-bar {
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: $nav-sublink-bar-left-position;
|
||||
top: -$nav-sublink-bar-width;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: $nav-sublink-bar-width solid $nav-sublink-bar-color;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Footer styling.
|
||||
footer {
|
||||
display: block; // Correct display for older versions of IE.
|
||||
@if $footer-back-color != $back-color {
|
||||
background: $footer-back-color;
|
||||
}
|
||||
@if $footer-fore-color != $fore-color {
|
||||
color: $footer-fore-color;
|
||||
}
|
||||
@if $footer-border-style != 0 {
|
||||
border: $footer-border-style;
|
||||
}
|
||||
@if $footer-margin != 0 {
|
||||
margin: $footer-margin;
|
||||
}
|
||||
@if $footer-padding != 0 {
|
||||
padding: $footer-padding;
|
||||
}
|
||||
font-size: $footer-font-size;
|
||||
a, a:visited {
|
||||
color: $footer-link-fore-color;
|
||||
}
|
||||
}
|
||||
// Sticky headers and footers.
|
||||
@if $include-header-sticky and $include-footer-sticky {
|
||||
header.#{$header-sticky-name}, footer.#{$footer-sticky-name} {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
header.#{$header-sticky-name} {
|
||||
top: 0;
|
||||
}
|
||||
footer.#{$footer-sticky-name} {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
@else if $include-header-sticky {
|
||||
header.#{$header-sticky-name} {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
}
|
||||
@else if $include-footer-sticky {
|
||||
footer.#{$footer-sticky-name} {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
}
|
||||
// Responsive drawer component
|
||||
@if $include-drawer {
|
||||
.#{$drawer-toggle-name}:before {
|
||||
position: relative;
|
||||
top: $drawer-toggle-top;
|
||||
font-family: sans-serif;
|
||||
font-size: $drawer-toggle-font-size;
|
||||
line-height: $drawer-toggle-line-height;
|
||||
content: '\2261';
|
||||
}
|
||||
.#{$drawer-name} {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: $drawer-width;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: $drawer-back-color;
|
||||
@if $drawer-border-style != 0 {
|
||||
border: $drawer-border-style;
|
||||
}
|
||||
@if $drawer-border-radius != 0 {
|
||||
border-radius: $drawer-border-radius;
|
||||
}
|
||||
margin: 0;
|
||||
@if $drawer-padding != 0 {
|
||||
padding: $drawer-padding;
|
||||
}
|
||||
@if $drawer-box-shadow != none {
|
||||
box-shadow: $drawer-box-shadow;
|
||||
}
|
||||
z-index: 1110;
|
||||
&:not(.#{$drawer-right-name}) {
|
||||
left: -$drawer-width;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
&.#{$drawer-right-name} {
|
||||
right: -$drawer-width;
|
||||
transition: right 0.3s;
|
||||
}
|
||||
& .#{$drawer-close-name} {
|
||||
position: absolute;
|
||||
top: $drawer-close-top;
|
||||
right: $drawer-close-right;
|
||||
z-index: 1111;
|
||||
padding: 0; // Fixes the extra padding added from <label> styling.
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$drawer-width}) {
|
||||
.#{$drawer-name} {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$drawer-mobile-breakpoint}){
|
||||
.#{$drawer-name}:not(.#{$drawer-persistent-name}) {
|
||||
position: static;
|
||||
height: 100%;
|
||||
z-index: 1100;
|
||||
& .#{$drawer-close-name} {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.#{$drawer-toggle-name}:not(.#{$drawer-persistent-name}) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
:checked + .#{$drawer-name}:not(.#{$drawer-right-name}) {
|
||||
left: 0;
|
||||
}
|
||||
:checked + .#{$drawer-name}.#{$drawer-right-name} {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
// Progress elements use the progress element as their base.
|
||||
$progress-max-value: 100 !default; // Arithmetic max value of <progress> - use integer values.
|
||||
$progress-height: 14px !default; // Height of <progress>.
|
||||
$include-spinner-donut: true !default; // [Hidden flag] Should spinner donuts be enabled? (`true`/`false`)
|
||||
$spinner-donut-name: 'spinner-donut' !default; // Class name for donut spinner.
|
||||
// Check the `_progress_mixins.scss` file to find this module's mixins.
|
||||
@import 'progress_mixins';
|
||||
// Default styling for progress. Use mixins for alternate styles.
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline; // Correct vertical alignment in certain browsers.
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: $progress-height;
|
||||
// Older browsers will sort not display progress properly, but that's ok
|
||||
width: 90%;
|
||||
// Newer browsers will calculate the proper width
|
||||
width: calc(100% - #{$progress-left-right-margin*2});
|
||||
margin: $progress-top-bottom-margin $progress-left-right-margin;
|
||||
border: $progress-border-style;
|
||||
@if $progress-border-radius != 0 {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
@if $progress-box-shadow != none {
|
||||
box-shadow: $progress-box-shadow;
|
||||
}
|
||||
background: $progress-back-color; // Background color of the element (IE 10+ and Firefox).
|
||||
color: $progress-fore-color; // Foreground of the element (IE 10+).
|
||||
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
|
||||
background: $progress-fore-color;
|
||||
@if $progress-border-radius != 0 {
|
||||
border-top-left-radius: $progress-border-radius;
|
||||
border-bottom-left-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
&::-webkit-progress-bar { // Background of the element (webkit browsers).
|
||||
background: $progress-back-color;
|
||||
}
|
||||
&::-moz-progress-bar { // Foreground of the element (Firefox).
|
||||
background: $progress-fore-color;
|
||||
@if $progress-border-radius != 0 {
|
||||
border-top-left-radius: $progress-border-radius;
|
||||
border-bottom-left-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
&[value="#{$progress-max-value}"] {
|
||||
&::-webkit-progress-value {
|
||||
@if $progress-border-radius != 0 {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
@if $progress-border-radius != 0 {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $include-spinner-donut { // Turn off to disable spinner donuts.
|
||||
// Animation definition for donut spinner
|
||||
@-webkit-keyframes spinner-donut-anim {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes spinner-donut-anim {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg);}
|
||||
}
|
||||
}
|
||||
@if $include-spinner-donut { // Turn off to disable spinner donuts.
|
||||
// Style for donut spinner
|
||||
.#{$spinner-donut-name} {
|
||||
display: inline-block;
|
||||
border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
|
||||
border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
|
||||
border-radius: 50%;
|
||||
width: $spinner-donut-size;
|
||||
height: $spinner-donut-size;
|
||||
-webkit-animation: spinner-donut-anim 1.2s linear infinite;
|
||||
animation: spinner-donut-anim 1.2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
// Progress module's mixin definitions are here. For the module itself
|
||||
// check `_progress.scss`.
|
||||
// Mixin for inline progress.
|
||||
// Variables:
|
||||
// - $progress-inline-name : The name of the class used for the inline progress.
|
||||
// - $progress-inline-width : The width of the inline progress.
|
||||
@mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
|
||||
progress.#{$progress-inline-name} {
|
||||
display: inline-block;
|
||||
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
|
||||
@if $progress-inline-width != 100% {
|
||||
width: $progress-inline-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate progress (progress color variants).
|
||||
// Variables:
|
||||
// - $progress-alt-name : The name of the class used for the alternate progress.
|
||||
// - $progress-alt-fore-color : The progress bar color of the alternate progress.
|
||||
// - $progress-alt-back-color : (Optional) The background color of the alternate progress. Defaults to the background color of the progress.
|
||||
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
|
||||
progress.#{$progress-alt-name} {
|
||||
@if $progress-alt-back-color != $progress-back-color {
|
||||
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
|
||||
&::-webkit-progress-bar { // Background of the element (webkit browsers).
|
||||
background: $progress-alt-back-color;
|
||||
}
|
||||
}
|
||||
@if $progress-alt-fore-color != $progress-fore-color {
|
||||
color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
|
||||
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
|
||||
background: $progress-alt-fore-color;
|
||||
}
|
||||
&::-moz-progress-bar { // Foreground of the element (Firefox).
|
||||
background: $progress-alt-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate progress styles.
|
||||
// Variables:
|
||||
// - $progress-alt-name : The name of the class used for the alternate progress style.
|
||||
// - $progress-alt-height : The height of the alternate progress style.
|
||||
// - $progress-alt-top-bottom-margin : (Optional) The top and bottom margin of the alternate progress style. Defaults to the margin of the progress.
|
||||
// - $progress-alt-left-right-margin : (Optional) The left and right margin of the alternate progress style. Defaults to the margin of the progress.
|
||||
// - $progress-alt-border-style : (Optional) The border style of the alternate progress style. Defaults to the border style of the progress.
|
||||
// - $progress-alt-border-radius : (Optional) The border radius of the alternate progress style. Defaults to the border radius of the progress.
|
||||
// - $progress-alt-box-shadow : (Optional) The box shadow of the alternate progress style. Defaults to the box shadow of the progress.
|
||||
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
|
||||
$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
|
||||
$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
|
||||
$progress-alt-box-shadow : $progress-box-shadow) {
|
||||
progress.#{$progress-alt-name} {
|
||||
@if $progress-alt-height != $progress-height {
|
||||
height: $progress-alt-height;
|
||||
}
|
||||
@if $progress-alt-left-right-margin != $progress-left-right-margin {
|
||||
width: calc(100% - #{$progress-alt-left-right-margin*2});
|
||||
}
|
||||
@if $progress-alt-left-right-margin != $progress-left-right-margin or $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
|
||||
margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
|
||||
}
|
||||
@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
|
||||
margin: $progress-alt-top-bottom-margin auto;
|
||||
}
|
||||
@if $progress-alt-border-style != $progress-border-style {
|
||||
border: $progress-alt-border-style;
|
||||
}
|
||||
@if progress-alt-border-radius != $progress-border-radius {
|
||||
border-radius: $progress-alt-border-radius;
|
||||
&::-webkit-progress-value {
|
||||
border-top-left-radius: $progress-alt-border-radius;
|
||||
border-bottom-left-radius: $progress-alt-border-radius;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border-top-left-radius: $progress-alt-border-radius;
|
||||
border-bottom-left-radius: $progress-alt-border-radius;
|
||||
}
|
||||
&[value="#{$progress-max-value}"] {
|
||||
&::-webkit-progress-value {
|
||||
border-radius: $progress-alt-border-radius;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border-radius: $progress-alt-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $progress-alt-box-shadow != $progress-box-shadow {
|
||||
box-shadow: $progress-alt-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate donut spinner colors (spinner donut color variants).
|
||||
// Variables:
|
||||
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner.
|
||||
// - $spinner-donut-alt-back-color : The background color of the alternate donut spinner.
|
||||
// - $spinner-donut-alt-fore-color : The foreground color of the alternate donut spinner.
|
||||
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) {
|
||||
@if not ($include-spinner-donut) {
|
||||
@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
|
||||
}
|
||||
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
|
||||
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
|
||||
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
|
||||
}
|
||||
}
|
||||
// Mixin for alternate donut spinner styles (spinner donut styles variants).
|
||||
// Variables:
|
||||
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner style.
|
||||
// - $spinner-donut-alt-size : The size of the alternate donut spinner style.
|
||||
// - $spinner-donut-alt-border-thickness : (Optional) The border thickness of the alternate donut spinner style.
|
||||
// Defaults to the value of $spinner-donut-alt-border-thickness.
|
||||
@mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
|
||||
$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
|
||||
@if not ($include-spinner-donut) {
|
||||
@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
|
||||
}
|
||||
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
|
||||
@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
|
||||
border-width: $spinner-donut-alt-border-thickness;
|
||||
}
|
||||
@if $spinner-donut-alt-size != $spinner-donut-size {
|
||||
width: $spinner-donut-alt-size;
|
||||
height: $spinner-donut-alt-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,261 +0,0 @@
|
|||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
*/
|
||||
// Dependency: This module is somewhat dependent on the grid system.
|
||||
$tab-container-name: 'tabs' !default; // Class name for the tabs container.
|
||||
$include-stacked-tabs: true !default; // [Hidden flag] Should stacked tabs be included? (`true`/`false`).
|
||||
$tab-stacked-name: 'stacked' !default; // Class name for stacked tabs container.
|
||||
$tab-stacked-breakpoint: 767px !default; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
// Tab styling
|
||||
.#{$tab-container-name} {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
@if $tab-container-box-shadow != none {
|
||||
box-shadow: $tab-container-box-shadow;
|
||||
}
|
||||
// Tab label styling
|
||||
& > label {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
// Make tab labels stay at the top on large displays
|
||||
-webkit-order: 1;
|
||||
order: 1;
|
||||
// Actual styling
|
||||
display: inline-block;
|
||||
height: $tab-label-height;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
@if $tab-label-back-color != $back-color {
|
||||
background: $tab-label-back-color;
|
||||
}
|
||||
@if $tab-label-fore-color != $fore-color {
|
||||
color: $tab-label-fore-color;
|
||||
}
|
||||
@if $tab-border-style != 0 {
|
||||
border: $tab-border-style;
|
||||
}
|
||||
@if $tab-label-padding != 0 {
|
||||
padding: $tab-label-padding;
|
||||
}
|
||||
@if $tab-border-radius != 0 { // Style first and last tabs' labels' top corners as needed
|
||||
&:first-of-type {
|
||||
border-top-left-radius: $tab-border-radius;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-top-right-radius: $tab-border-radius;
|
||||
}
|
||||
}
|
||||
// Hover styling for tabs' labels
|
||||
&:hover, &:focus {
|
||||
background: rgba($tab-label-back-color, $tab-label-hover-opacity);
|
||||
}
|
||||
}
|
||||
// Tab radio styling
|
||||
& > [type="radio"], & > [type="checkbox"] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
// Tab content styling
|
||||
& > label + div {
|
||||
// New syntax
|
||||
-webkit-flex-basis: auto;
|
||||
flex-basis: auto;
|
||||
// Make tab panels display after all the labels on larger displays
|
||||
-webkit-order: 2;
|
||||
order: 2;
|
||||
// Hide content, while allowing accessibility
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
// Presentation
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
transition: -webkit-transform 0.3s,
|
||||
transform 0.3s;
|
||||
@if $tab-border-radius != 0 {
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
}
|
||||
// Style for tab labels except the first
|
||||
@if $tab-border-style != 0 {
|
||||
& > label:not(:first-of-type) {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
// Tab label styling for open tab
|
||||
& > :checked + label {
|
||||
@if $tab-label-selected-back-color != $tab-label-back-color {
|
||||
background: $tab-label-selected-back-color;
|
||||
&:hover, &:focus {
|
||||
background: rgba($tab-label-selected-back-color, $tab-label-hover-opacity);
|
||||
}
|
||||
}
|
||||
@if $tab-label-selected-fore-color != $tab-label-fore-color {
|
||||
color: $tab-label-selected-fore-color;
|
||||
}
|
||||
border-bottom-color: $tab-selected-border-color;
|
||||
}
|
||||
// Tab content styling (open tab)
|
||||
& > :checked + label + div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: $tab-panel-height;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
@if $tab-panel-back-color != $back-color {
|
||||
background: $tab-panel-back-color;
|
||||
}
|
||||
@if $tab-panel-fore-color != $fore-color {
|
||||
color: $tab-panel-fore-color;
|
||||
}
|
||||
@if $tab-border-style != 0 {
|
||||
border: $tab-border-style;
|
||||
border-top: 0;
|
||||
}
|
||||
@if $tab-panel-padding != 0 {
|
||||
padding: $tab-panel-padding;
|
||||
}
|
||||
// Fix display for some browsers
|
||||
clip: auto;
|
||||
-webkit-clip-path: inset(0%);
|
||||
clip-path: inset(0%);
|
||||
}
|
||||
}
|
||||
// Stacked tabs
|
||||
@if $include-stacked-tabs { // Turn off if you don't want stacked tabs enabled (except on smaller screens for responsiveness)
|
||||
.#{$tab-container-name}.#{$tab-stacked-name} {
|
||||
// Old syntax
|
||||
-webkit-box-orient: vertical;
|
||||
// New syntax
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
& > label {
|
||||
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||
order: initial;
|
||||
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
|
||||
&:last-of-type {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
// Keep :first-of-type below :last-of-type to make sure that single collapses get proper radiuses
|
||||
&:first-of-type {
|
||||
border-top-right-radius: $tab-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > :checked + label {
|
||||
@if $tab-border-style != 0 {
|
||||
border: $tab-border-style;
|
||||
}
|
||||
@if $tab-border-radius != 0 {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
& > label + div {
|
||||
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||
order: initial;
|
||||
// Presentation
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
@if $tab-border-radius != 0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
& > label:not(:first-of-type) {
|
||||
@if $tab-border-style != 0 {
|
||||
border: $tab-border-style;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
& > :checked + label + div {
|
||||
height: auto;
|
||||
}
|
||||
@if $tab-border-radius != 0 {
|
||||
& > label + div:last-of-type {
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsiveness
|
||||
@media screen and (max-width: #{$tab-stacked-breakpoint}) {
|
||||
.#{$tab-container-name} {
|
||||
// Old syntax
|
||||
-webkit-box-orient: vertical;
|
||||
// New syntax
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
& > label {
|
||||
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||
order: initial;
|
||||
@if $tab-border-radius != 0 { // Style first and last tabs' labels' corners as needed
|
||||
&:first-of-type {
|
||||
border-top-right-radius: $tab-border-radius;
|
||||
}
|
||||
&:last-of-type {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > :checked + label {
|
||||
@if $tab-border-style != 0 {
|
||||
border: $tab-border-style;
|
||||
}
|
||||
@if $tab-border-radius != 0 {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
& > label + div {
|
||||
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||
order: initial;
|
||||
@if $tab-border-radius != 0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
& > label:not(:first-of-type) {
|
||||
@if $tab-border-style != 0 {
|
||||
border: $tab-border-style;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
@if $tab-border-radius != 0 {
|
||||
& > label + div:last-of-type {
|
||||
border-bottom-left-radius: $tab-border-radius;
|
||||
border-bottom-right-radius: $tab-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,753 +0,0 @@
|
|||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
// The tables use the common table elements and syntax.
|
||||
$table-mobile-breakpoint: 767px !default; // Breakpoint for table mobile view.
|
||||
$table-mobile-card-spacing: 10px !default; // Space between <tr> cards - mobile view.
|
||||
$table-mobile-card-label: 'data-label' !default;// Attribute used to replace column headers in mobile view.
|
||||
$table-not-responsive-name: 'preset' !default; // Class name for table non-responsive view.
|
||||
$include-horizontal-table: true !default; // Should horizontal tables be included? (`true`/`false`)
|
||||
$table-horizontal-name: 'horizontal' !default;// Class name for table horizontal view.
|
||||
$include-scrollable-table: true !default; // Should scrollable tables be included? (`true`/`false`)
|
||||
$table-scrollable-name: 'scrollable' !default;// Class name for table scrollable view.
|
||||
$table-scrollable-height: 400px !default; // Height for table scrollable view.
|
||||
$include-striped-table: true !default; // [Hidden flag] Should striped tables be included? (`true`/`false`)
|
||||
$table-striped-name: 'striped' !default; // Class name for striped table.
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
$base-font-size: 1rem; // [External variable - core] Default font sizing for all elements.
|
||||
$base-line-height: 1.5; // [External variable - core] Default line height for all elements.
|
||||
// Desktop view.
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
// Apply border style by default always. Otherwise, browser default will be applied.
|
||||
border: $table-border-style;
|
||||
@if $table-border-radius != 0 {
|
||||
border-radius: $table-border-radius;
|
||||
}
|
||||
@if $table-margin != 0 {
|
||||
margin: $table-margin;
|
||||
}
|
||||
@if $table-box-shadow != none {
|
||||
box-shadow: $table-box-shadow;
|
||||
}
|
||||
caption {
|
||||
font-size: $table-caption-font-size;
|
||||
margin: $table-caption-margin;
|
||||
}
|
||||
tr {
|
||||
padding: $table-row-padding; // Apply always to overwrite default.
|
||||
}
|
||||
th, td {
|
||||
padding: $table-column-padding; // Apply always to overwrite default.
|
||||
border-left: $table-border-style;
|
||||
border-top: $table-border-style;
|
||||
}
|
||||
td {
|
||||
background: $table-body-back-color; // Do not put inside condition, causes problems if not present.
|
||||
@if $table-body-fore-color != $fore-color {
|
||||
color: $table-body-fore-color;
|
||||
}
|
||||
}
|
||||
thead th {
|
||||
border-top: 0;
|
||||
}
|
||||
th {
|
||||
@if $table-head-back-color != $back-color {
|
||||
background: $table-head-back-color;
|
||||
}
|
||||
@if $table-head-fore-color != $fore-color {
|
||||
color: $table-head-fore-color;
|
||||
}
|
||||
}
|
||||
th:first-child, td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
// Mobile view for responsive tables.
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint}) {
|
||||
table:not(.#{$table-not-responsive-name}) {
|
||||
border-collapse: collapse;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
@if $table-box-shadow != none {
|
||||
box-shadow: none;
|
||||
}
|
||||
// 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%);
|
||||
}
|
||||
tr {
|
||||
display: block;
|
||||
border: $table-border-style;
|
||||
@if $table-border-radius != 0 {
|
||||
border-radius: $table-border-radius;
|
||||
}
|
||||
@if $table-box-shadow != none {
|
||||
box-shadow: $table-box-shadow;
|
||||
}
|
||||
@if $table-body-back-color != $back-color {
|
||||
background: $table-body-back-color;
|
||||
}
|
||||
margin-bottom: $table-mobile-card-spacing;
|
||||
}
|
||||
td {
|
||||
display: block;
|
||||
border: 0;
|
||||
@if $table-border-style != 0 {
|
||||
border-bottom: $table-border-style;
|
||||
}
|
||||
text-align: right;
|
||||
// Fixes empty <td> elements messing up the cards
|
||||
min-height: $base-font-size * $base-line-height;
|
||||
}
|
||||
td:before {
|
||||
content: attr(#{$table-mobile-card-label});
|
||||
float: left;
|
||||
font-weight: $table-mobile-label-font-weight;
|
||||
}
|
||||
td:last-child {
|
||||
@if $table-border-style != 0 {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Horizontal table view.
|
||||
@if $include-horizontal-table and $include-scrollable-table {
|
||||
@media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
|
||||
table.#{$table-horizontal-name}, table.#{$table-scrollable-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
padding: $table-row-padding;
|
||||
caption {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
table.#{$table-horizontal-name} {
|
||||
thead, tbody {
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
tbody {
|
||||
overflow: auto; // Allows content scrolling.
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-flex: 1 0 0;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
th, td {
|
||||
width: 100%;
|
||||
border: $table-border-style; // Apply to overwrite.
|
||||
@if $table-border-style != 0 {
|
||||
&:not(:first-child) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
thead {
|
||||
tr:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr:first-child > td {
|
||||
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
|
||||
}
|
||||
}
|
||||
}
|
||||
table.#{$table-scrollable-name} {
|
||||
overflow: auto;
|
||||
max-height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
border: $table-border-style;
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
padding: 0; // Resets padding to avooid awkward spacing.
|
||||
}
|
||||
th, td {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint}) {
|
||||
table.#{$table-horizontal-name}.#{$table-not-responsive-name}, table.#{$table-scrollable-name}.#{$table-not-responsive-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
padding: $table-row-padding;
|
||||
caption {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
|
||||
thead, tbody {
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
tbody {
|
||||
overflow: auto; // Allows content scrolling.
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-flex: 1 0 0;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
th, td {
|
||||
width: 100%;
|
||||
border: $table-border-style; // Apply to overwrite.
|
||||
@if $table-border-style != 0 {
|
||||
&:not(:first-child) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
thead {
|
||||
tr:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr:first-child > td {
|
||||
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
|
||||
}
|
||||
}
|
||||
}
|
||||
table.#{$table-scrollable-name}.#{$table-not-responsive-name} {
|
||||
overflow: auto;
|
||||
max-height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
border: $table-border-style;
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
padding: 0; // Resets padding to avooid awkward spacing.
|
||||
}
|
||||
th, td {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $include-horizontal-table {
|
||||
@media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
|
||||
table.#{$table-horizontal-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
padding: $table-row-padding;
|
||||
caption {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tbody {
|
||||
overflow: auto; // Allows content scrolling.
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-flex: 1 0 0;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
th, td {
|
||||
width: 100%;
|
||||
border: $table-border-style; // Apply to overwrite.
|
||||
@if $table-border-style != 0 {
|
||||
&:not(:first-child) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
thead {
|
||||
tr:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr:first-child > td {
|
||||
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Horizontal table view for non-responsive tables. - Apply over breakpoint when non-responsive.
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint}) {
|
||||
table.#{$table-horizontal-name}.#{$table-not-responsive-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
caption {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
}
|
||||
tbody {
|
||||
overflow: auto;
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
-webkit-flex: 1 0 0;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-flex: 1 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
th, td {
|
||||
width: 100%;
|
||||
border: $table-border-style; // Apply to overwrite.
|
||||
@if $table-border-style != 0 {
|
||||
&:not(:first-child){
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
tbody {
|
||||
tr:first-child > td {
|
||||
padding-left: 2 * $table-column-padding; // Fixes padding for the first column of data.
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $include-scrollable-table {
|
||||
@media screen and (min-width: #{($table-mobile-breakpoint+1px)}) {
|
||||
table.#{$table-scrollable-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
overflow: auto;
|
||||
max-height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding: $table-row-padding;
|
||||
padding-top: 0;
|
||||
caption {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
border: $table-border-style;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
padding: 0; // Resets padding to avooid awkward spacing.
|
||||
}
|
||||
th, td {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint}) {
|
||||
table.#{$table-scrollable-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
overflow: auto;
|
||||
max-height: $table-scrollable-height;
|
||||
border: 0;
|
||||
padding: $table-row-padding;
|
||||
padding-top: 0;
|
||||
caption {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
thead, tbody {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
border: $table-border-style;
|
||||
}
|
||||
thead {
|
||||
z-index: 999; // Fixes the visibility of the element.
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
tbody {
|
||||
border-top: 0;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
tr {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-webkit-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
padding: 0; // Resets padding to avooid awkward spacing.
|
||||
}
|
||||
th, td {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
// New syntax
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Striped tables.
|
||||
@if $include-striped-table { // Striped tables can be turned on or off.
|
||||
table.#{$table-striped-name} {
|
||||
tr:nth-of-type(2n) > td {
|
||||
background: $table-striped-alt-body-back-color;
|
||||
}
|
||||
}
|
||||
// Responsiveness for striped tables.
|
||||
@media screen and (max-width: #{$table-mobile-breakpoint}) {
|
||||
table.#{$table-striped-name}:not(.#{$table-not-responsive-name}) {
|
||||
tr:nth-of-type(2n) {
|
||||
background: $table-striped-alt-body-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
/*
|
||||
Definitions for utilities and helper classes.
|
||||
*/
|
||||
$hidden-name: 'hidden' !default; // Class name for hidden elements.
|
||||
$visually-hidden-name: 'visually-hidden' !default; // Class name for visually hidden elements.
|
||||
$include-breadcrumbs: true !default; // [Hidden flag] Should breadcrumbs be included? (`true`/`false`)
|
||||
$breadcrumbs-name: 'breadcrumbs' !default; // Class name for breadcrumbs.
|
||||
$include-close-icon: true !default; // [Hidden flag] Should the close icon be included? (`true`/`false`)
|
||||
$close-icon-name: 'close'!default; // Class name for close icon.
|
||||
// The floats, clearfix and center-block flags are for legacy features.
|
||||
$include-floats: false !default; // Should floats be included? (`true`/`false`)
|
||||
$include-clearfix: false !default; // Should clearfix be included? (`true`/`false`)
|
||||
$include-center-block: false !default; // Should center block be included? (`true`/`false`)
|
||||
$style-link-active-state: false !default; // [External flag - core] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`).
|
||||
// Check the `_utility_mixins.scss` file to find this module's mixins.
|
||||
@import 'utility_mixins';
|
||||
// Hidden elements class. ATTENTION: Uses !important.
|
||||
.#{$hidden-name}{
|
||||
display: none !important;
|
||||
}
|
||||
// Visually hidden elements class. ATTENTION: Uses !important.
|
||||
.#{$visually-hidden-name} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
@if $include-breadcrumbs { // Turn off if you do not want breadcrumbs to be included.
|
||||
// Breadcrumbs
|
||||
ul.#{$breadcrumbs-name} {
|
||||
// Old syntax
|
||||
display: -webkit-box;
|
||||
// New syntax
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
// Apply margin from styling
|
||||
@if $breadcrumbs-margin != 0 {
|
||||
margin: $breadcrumbs-margin;
|
||||
}
|
||||
@else { // Reset margins from list styling
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
padding: 0; // Remove unnecessary left and right empty space
|
||||
@if $breadcrumbs-border-style !=0 {
|
||||
border: $breadcrumbs-border-style;
|
||||
}
|
||||
@if $breadcrumbs-border-radius != 0 {
|
||||
border-radius: $breadcrumbs-border-radius;
|
||||
}
|
||||
@if $breadcrumbs-box-shadow != none {
|
||||
box-shadow: $breadcrumbs-box-shadow;
|
||||
}
|
||||
li {
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
// New syntax
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background: $breadcrumbs-back-color;
|
||||
height: $breadcrumbs-height;
|
||||
line-height: $breadcrumbs-height;
|
||||
margin-right: ($breadcrumbs-height/2) + $breadcrumbs-separator-width;
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0 solid $breadcrumbs-back-color;
|
||||
border-width: ($breadcrumbs-height/2) ceil($breadcrumbs-height/4);
|
||||
}
|
||||
&:before {
|
||||
left: -($breadcrumbs-height/2);
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&:after {
|
||||
left: 100%;
|
||||
border-color: transparent;
|
||||
border-left-color: $breadcrumbs-back-color;
|
||||
}
|
||||
&:first-child {
|
||||
&:before {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
&:after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $include-close-icon { // Turn off if you do not want to include the close icon
|
||||
// Close icon
|
||||
.#{$close-icon-name}{
|
||||
display: inline-block;
|
||||
width: $close-icon-size;
|
||||
font-family: sans-serif;
|
||||
font-size: $close-icon-size;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
border-radius: 2rem;
|
||||
background: rgba($close-icon-back-color,0);
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
@if $style-link-active-state {
|
||||
&:hover, &:focus, &:active {
|
||||
background: rgba($close-icon-back-color,1);
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover, &:focus {
|
||||
background: rgba($close-icon-back-color,1);
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "\00D7";
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Floats. ATTENTION: Uses !important.
|
||||
// NOTE: Might be obsolete and not play well with others.
|
||||
@if $include-floats {
|
||||
.#{$float-prefix}-left {
|
||||
float: left !important;
|
||||
}
|
||||
.#{$float-prefix}-right {
|
||||
float: right !important;
|
||||
}
|
||||
}
|
||||
// Clearfix mixin. ATTENTION: Uses !important.
|
||||
// NOTE: Might be obsolete and not play well with others.
|
||||
@if $include-clearfix {
|
||||
.#{$clearfix-name} {
|
||||
&:before, &:after {
|
||||
content: ' ' !important;
|
||||
display: table !important;
|
||||
clear: both !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Center block. ATTENTION: Uses !important.
|
||||
@if $include-center-block {
|
||||
.#{$center-block-name} {
|
||||
display: block !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
// Utility module's mixin definitions are here. For the module itself
|
||||
// check `_utility.scss`.
|
||||
// Generic border mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $border-generic-name : The name of the class used for the generic border.
|
||||
@mixin make-border-generic ($border-generic-name) {
|
||||
.#{$border-generic-name} {
|
||||
border: 1px solid rgba(0,0,0, 0.25) !important;
|
||||
}
|
||||
}
|
||||
// Generic radial border mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $border-radial-name : The name of the class used for the radial border.
|
||||
// - $border-radial-radius : The border radius used for the radial border.
|
||||
@mixin make-border-radial-style ($border-radial-name, $border-radial-radius) {
|
||||
.#{$border-radial-name} {
|
||||
border-radius: $border-radial-radius !important;
|
||||
}
|
||||
}
|
||||
// Generic box shadow mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $box-shadow-name : The name of the class used for the generic box shadow.
|
||||
// - $box-shadow-value : The box shadow value of the generic box shadow.
|
||||
@mixin make-box-shadow-generic ($box-shadow-name, $box-shadow-value) {
|
||||
.#{$box-shadow-name} {
|
||||
box-shadow: $box-shadow-value !important;
|
||||
}
|
||||
}
|
||||
// Responsive margin mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $margin-name : The name of the class used for the responsive margin.
|
||||
// - $margin-small-value : Responsive margin value for smaller screens.
|
||||
// - $margin-medium-value : Responsive margin value for medium screens.
|
||||
// - $margin-large-value : Responsive margin value for large screens.
|
||||
// - $margin-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive margin. Defaults to `768px`.
|
||||
// - $margin-large-breakpoint : (Optional) Large screen breakpoint for the responsive margin. Defaults to `1280px`.
|
||||
// - $margin-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
|
||||
// - $margin-small-breakpoint : (Optional) Small screen breakpoint for the responsive margin, used only if above flag is set to `true`. Defaults to `480px`.
|
||||
// - $margin-extra-small-value : (Optional) Responsive margin value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
|
||||
@mixin make-margin-responsive ($margin-name, $margin-small-value,
|
||||
$margin-medium-value, $margin-large-value, $margin-medium-breakpoint : 768px,
|
||||
$margin-large-breakpoint : 1280px, $margin-use-four-step-grid : false,
|
||||
$margin-small-breakpoint : 480px, $margin-extra-small-value : 0) {
|
||||
@if $margin-use-four-step-grid {
|
||||
.#{$margin-name} {
|
||||
margin: $margin-extra-small-value !important;
|
||||
}
|
||||
@media screen and (min-width: #{$margin-small-breakpoint}) {
|
||||
margin: $margin-small-value !important;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$margin-name} {
|
||||
margin: $margin-small-value !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$margin-medium-breakpoint}) {
|
||||
.#{$margin-name} {
|
||||
margin: $margin-medium-value !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$margin-large-breakpoint}) {
|
||||
.#{$margin-name} {
|
||||
margin: $margin-large-value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsive padding mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $padding-name : The name of the class used for the responsive padding.
|
||||
// - $padding-small-value : Responsive padding value for smaller screens.
|
||||
// - $padding-medium-value : Responsive padding value for medium screens.
|
||||
// - $padding-large-value : Responsive padding value for large screens.
|
||||
// - $padding-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive padding. Defaults to `768px`.
|
||||
// - $padding-large-breakpoint : (Optional) Large screen breakpoint for the responsive padding. Defaults to `1280px`.
|
||||
// - $padding-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
|
||||
// - $padding-small-breakpoint : (Optional) Small screen breakpoint for the responsive padding, used only if above flag is set to `true`. Defaults to `480px`.
|
||||
// - $padding-extra-small-value : (Optional) Responsive padding value for extra small screens, used only if above flag is set to `true`. Defaults to `0`.
|
||||
@mixin make-padding-responsive ($padding-name, $padding-small-value,
|
||||
$padding-medium-value, $padding-large-value, $padding-medium-breakpoint : 768px,
|
||||
$padding-large-breakpoint : 1280px, $padding-use-four-step-grid : false,
|
||||
$padding-small-breakpoint : 480px, $padding-extra-small-value : 0) {
|
||||
@if $padding-use-four-step-grid{
|
||||
.#{$padding-name} {
|
||||
padding: $padding-extra-small-value !important;
|
||||
}
|
||||
@media screen and (min-width: #{$padding-small-breakpoint}) {
|
||||
padding: $padding-small-value !important;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.#{$padding-name} {
|
||||
padding: $padding-small-value !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$padding-medium-breakpoint}) {
|
||||
.#{$padding-name} {
|
||||
padding: $padding-medium-value !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$padding-large-breakpoint}) {
|
||||
.#{$padding-name} {
|
||||
padding: $padding-large-value !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsive hidden elements mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $hidden-prefix : The prefix for the name of the class used for the responsive hiding.
|
||||
// - $hidden-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive hiding. Defaults to `768px`.
|
||||
// - $hidden-large-breakpoint : (Optional) Large screen breakpoint for the responsive hiding. Defaults to `1280px`.
|
||||
// - $hidden-small-suffix : (Optional) The small-screen suffix for the name of the class used for the responsive hiding. Defaults to 'sm'.
|
||||
// - $hidden-medium-suffix : (Optional) The medium-screen suffix for the name of the class used for the responsive hiding. Defaults to 'md'.
|
||||
// - $hidden-large-suffix : (Optional) The large-screen suffix for the name of the class used for the responsive hiding. Defaults to 'lg'.
|
||||
// - $hidden-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
|
||||
// - $hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive hiding, used only if the above variable is set to `true`. Defaults to `480px`.
|
||||
// - $hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
|
||||
@mixin make-hidden-responsive ($hidden-prefix, $hidden-medium-breakpoint : 768px,
|
||||
$hidden-large-breakpoint : 1280px , $hidden-small-suffix : 'sm', $hidden-medium-suffix : 'md',
|
||||
$hidden-large-suffix : 'lg', $hidden-use-four-step-grid : false,
|
||||
$hidden-small-breakpoint : 480px, $hidden-extra-small-suffix : 'xs') {
|
||||
@if $hidden-use-four-step-grid {
|
||||
@media screen and (max-width: #{$hidden-small-breakpoint}-1px) {
|
||||
.#{$hidden-prefix}-#{$hidden-extra-small-suffix} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$hidden-small-breakpoint}) and (max-width: #{$hidden-medium-breakpoint}-1px) {
|
||||
.#{$hidden-prefix}-#{$hidden-small-suffix} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
|
||||
.#{$hidden-prefix}-#{$hidden-small-suffix} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$hidden-medium-breakpoint}) and (max-width: #{$hidden-large-breakpoint}-1px) {
|
||||
.#{$hidden-prefix}-#{$hidden-medium-suffix} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$hidden-large-breakpoint}) {
|
||||
.#{$hidden-prefix}-#{$hidden-large-suffix} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsive visually hidden elements mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $visually-hidden-prefix : The prefix for the name of the class used for the responsive visual hiding.
|
||||
// - $visually-hidden-medium-breakpoint : (Optional) Medium screen breakpoint for the responsive visual hiding. Defaults to `768px`.
|
||||
// - $visually-hidden-large-breakpoint : (Optional) Large screen breakpoint for the responsive visual hiding. Defaults to `1280px`.
|
||||
// - $visually-hidden-small-suffix : (Optional) The small-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'sm'.
|
||||
// - $visually-hidden-medium-suffix : (Optional) The medium-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'md'.
|
||||
// - $visually-hidden-large-suffix : (Optional) The large-screen suffix for the name of the class used for the responsive visual hiding. Defaults to 'lg'.
|
||||
// - $visually-hidden-use-four-step-grid : (Optional) Should the legacy four-step grid be used? Defaults to `false`.
|
||||
// - $visually-hidden-small-breakpoint : (Optional) Small screen breakpoint for the responsive visual hiding, used only if the above variable is set to `true`. Defaults to `480px`.
|
||||
// - $visually-hidden-extra-small-suffix : (Optional) The extra-small-screen suffix for the name of the class used for the responsive visual hiding. Used only if the above flag is set to `true`. Defaults to 'xs'.
|
||||
@mixin make-visually-hidden-responsive ($visually-hidden-prefix, $visually-hidden-medium-breakpoint : 768px,
|
||||
$visually-hidden-large-breakpoint : 1280px , $visually-hidden-small-suffix : 'sm', $visually-hidden-medium-suffix : 'md',
|
||||
$visually-hidden-large-suffix : 'lg', $visually-hidden-use-four-step-grid : false,
|
||||
$visually-hidden-small-breakpoint : 480px, $visually-hidden-extra-small-suffix : 'xs') {
|
||||
@if $visually-hidden-use-four-step-grid {
|
||||
@media screen and (max-width: #{$visually-hidden-small-breakpoint}-1px) {
|
||||
.#{$visually-hidden-prefix}-#{$visually-hidden-extra-small-suffix} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$visually-hidden-small-breakpoint}) and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
|
||||
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
@media screen and (max-width: #{$visually-hidden-medium-breakpoint}-1px) {
|
||||
.#{$visually-hidden-prefix}-#{$visually-hidden-small-suffix} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$visually-hidden-medium-breakpoint}) and (max-width: #{$visually-hidden-large-breakpoint}-1px) {
|
||||
.#{$visually-hidden-prefix}-#{$visually-hidden-medium-suffix} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: #{$visually-hidden-large-breakpoint}) {
|
||||
.#{$visually-hidden-prefix}-#{$visually-hidden-large-suffix} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip: rect(0 0 0 0) !important;
|
||||
-webkit-clip-path: inset(100%) !important;
|
||||
clip-path: inset(100%) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue