mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-07 14:26:28 +02:00
Code Issues Releases Wiki Activity

Started working on Gluon core

Browse Source 
Core module has been initialized, as well as a default flavor. Minor changes (read DEVLOG), moved things around, cleaned up some things and built some of the basic features.
This commit is contained in:
Angelos Chalaris
2017-10-12 01:31:33 +03:00
parent 930b613d29
commit 3b621be609
59 changed files with 11920 additions and 23831 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2365
dist/mini-dark.css vendored
View File

File diff suppressed because it is too large Load Diff

1
dist/mini-dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2333
dist/mini-default.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

1416
dist/mini-lite.css vendored
View File

File diff suppressed because it is too large Load Diff

1
dist/mini-lite.min.css vendored
View File

File diff suppressed because one or more lines are too long

2402
dist/mini-nord.css vendored
View File

File diff suppressed because it is too large Load Diff

1
dist/mini-nord.min.css vendored
View File

File diff suppressed because one or more lines are too long

1393
dist/mini-pwa.css vendored
View File

File diff suppressed because it is too large Load Diff

1
dist/mini-pwa.min.css vendored
View File

File diff suppressed because one or more lines are too long

2143
dist/mini-sucroa.css vendored
View File

File diff suppressed because it is too large Load Diff

1
dist/mini-sucroa.min.css vendored
View File

File diff suppressed because one or more lines are too long

189
docs/index.html
View File

@@ -1,6 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- TODO: Add missing favicon and page_thumb images when about to release -->
<!-- TODO: Update meta information when about to release -->
<link rel="stylesheet" href="mini-default.min.css"> <link rel="stylesheet" href="mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title> <title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
@@ -12,194 +14,7 @@
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png"> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<style>
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
#logo-body { position: relative; background: -webkit-linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); background: linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); height: -webkit-calc(100vh - 48px); height: calc(100vh - 48px); overflow: hidden; text-align: center; }
#description { color: #f5f5f5; font-family: 'Noto Sans', sans-serif; position: absolute; top: 49vh; width: 100%; margin: 0; }
#top-heading { color: #f5f5f5; font-size: 2.8em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: absolute; margin: 0; top: 35vh; width: 100%; height: 20vh; min-height: 42px; font-family: 'Noto Sans', sans-serif; }
#top-vtag-cont { width: 100%; text-align: center; }
#top-version-tag { padding: 8px 8px; font-size: 1.2em; font-weight: 700; font-family: 'Noto Sans', sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 55vh; width: 40px; background: #4527a0; border-radius: 6px; margin: 0; margin-left: -30px; }
@media screen and (max-height:480px), screen and (max-width: 480px) { #top-version-tag { display: none; } #description { top: 60vh;}}
#mt1 { position: absolute; bottom: 0; left: -7vw; width: 0; height: 0; border-left: 12vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #07020d; }
#mt1:after { content: ""; position: absolute; left: -1.4vw; border-left: 1.4vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #150627; z-index: 2; }
#mt2 { position: absolute; bottom: -0.4vw; left: 10vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #120520; z-index: 3; }
#mt2:after { content: ""; position: absolute; left: -1.3vw; border-left: 1.3vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #1b0833; z-index: 4; }
#mt3 { position: absolute; bottom: 0; right: 17.75vw; width: 0; height: 0; border-left: 8vw solid transparent; border-right: 7vw solid transparent; border-bottom: 6vw solid #1b0833; z-index: 5; }
#mt3:after { content: ""; position: absolute; left: -8vw; border-left: 8vw solid transparent; border-right: 1.4vw solid transparent; border-bottom: 6vw solid #220a40; z-index: 6; }
#mt4 { position: absolute; bottom: -0.25vw; right: 8vw; width: 0; height: 0; border-left: 7.5vw solid transparent; border-right: 7.25vw solid transparent; border-bottom: 6.5vw solid #150627; z-index: 3;}
#mt4:after { content: ""; position: absolute; left: -7.5vw; border-left: 7.5vw solid transparent; border-right: 1.7vw solid transparent; border-bottom: 6.5vw solid #1f0a3b; z-index: 2;}
#mt5 { position: absolute; bottom: 0; right: -6.5vw; width: 0; height: 0; border-left: 9vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 8vw solid #0e041a; }
#mt5:after { content: ""; position: absolute; left: -9vw; border-left: 9vw solid transparent; border-right: 2vw solid transparent; border-bottom: 8vw solid #1b0833; z-index: 2; }
@media screen and (max-width: 767px) {
#mt1 { left: -10.5vw; border-left: 18vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #07020d; }
#mt1:after { left: -2.1vw; border-left: 2.1vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #150627; }
#mt2 { bottom: -0.6vw; left: 15vw; border-left: 10.5vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #120520; }
#mt2:after { left: -1.95vw; border-left: 1.95vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #1b0833; }
#mt3 { right: 26.625vw; border-left: 12vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 9vw solid #1b0833; }
#mt3:after { left: -12vw; border-left: 12vw solid transparent; border-right: 2.1vw solid transparent; border-bottom: 9vw solid #220a40; }
#mt4 { bottom: -0.375vw; right: 12vw; border-left: 11.25vw solid transparent; border-right: 10.875vw solid transparent; border-bottom: 9.75vw solid #150627; }
#mt4:after { left: -11.25vw; border-left: 11.25vw solid transparent; border-right: 2.55vw solid transparent; border-bottom: 9.75vw solid #1f0a3b; }
#mt5 { right: -9.75vw; border-left: 13.5vw solid transparent; border-right: 15.75vw solid transparent; border-bottom: 12vw solid #0e041a; }
#mt5:after { left: -13.5vw; border-left: 13.5vw solid transparent; border-right: 3vw solid transparent; border-bottom: 12vw solid #1b0833;}
}
#codename { position: absolute; bottom: 2px; right: 3px; color: #616161; z-index: 5; font-size: 0.55em; font-family: 'Noto Sans', sans-serif; }
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; } .box-centered { text-align: center; }
.box-centered > .card.fluid { -webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start;
justify-content: flex-start; -webkit-align-self: auto; align-self: auto;}
[class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;}
.fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} li a { text-decoration: none;}
</style>
</head> </head>
<body> <body>
<div id="logo-body">
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
<p id="top-vtag-cont"><mark id="top-version-tag">v2.3</mark></p>
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
<small id="codename">Fermion</small>
</div>
<header class="sticky">
<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container responsive-padding">
<div class="row" style="padding-top: 60px; padding-bottom: 20px;">
<div class="col-sm-12 col-lg-10 col-lg-offset-1 row">
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Minimal<small>Size matters!</small></h2><br/>
<img src="icons/wings.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Responsive<small>Think mobile!</small></h2><br/>
<img src="icons/bacteria.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br/>
<img src="icons/meteor.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h2>Setup &amp; usage</h2>
<p style="text-align:justify"><strong>mini.css</strong> is published in <strong>npm</strong>, <strong>yarn</strong> and <strong>bower</strong>, so you can easily download it, using your preferred package manager:</p>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
</div>
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors">Flavor</a> and use it for your project.</p>
<br/>
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Browser support</h2>
<div class="row" style="padding: 0.5rem;">
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png" alt="edge"><br/><h3><small>&nbsp;&nbsp;Edge<sup style="-0.675em"><i class="fa fa-lg fa-exclamation" aria-hidden="true" style="font-size: 80%;"></i></sup></small>12</h3></div>
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png" alt="firefox"><br/><h3><small>&nbsp;Firefox</small>28</h3></div>
<div class="col-sm" style="text-align:center; background: #FFE270; padding: 1rem;"><img src="browser-logos/chrome_128x128.png" alt="chrome"><br/><h3><small>&nbsp;Chrome</small>26</h3></div>
<div class="col-sm" style="text-align:center; background: #00D0FF; padding: 1rem;"><img src="browser-logos/safari_128x128.png" alt="safari"><br/><h3><small>&nbsp;Safari</small>7.1</h3></div>
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png" alt="opera"><br/><h3><small>&nbsp;Opera</small>17</h3></div>
<div class="col-sm" style="text-align:center; background: #0F98E0; padding: 1rem;"><img src="browser-logos/android_128x128.png" alt="android"><br/><h3><small>&nbsp;Android</small>4.4</h3></div>
</div></div> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<p style="padding-top: 1rem; padding-bottom: 1rem; text-align: justify"><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;Due to the way <strong>mini.css</strong> is designed, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers such as Internet Explorer will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><hr>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2>
<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
<br/>
<h3>Why should I use mini.css?</h3>
<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
<p>Not convinced yet? Maybe you should read these <a href="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
<br/>
<h3>What exactly does mini.css provide?</h3>
<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
<ul>
<li><a href="core">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
<li><a href="grid">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
<li><a href="navigation">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
<li><a href="input_control">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
<li><a href="table">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
<li><a href="card">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
<li><a href="tab">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
<li><a href="contextual">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
<li><a href="progress">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
<li><a href="utility">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul>
<p style="text-align: justify;">While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries <a href="https://chalarangelo.github.io/react-mini.css/">here</a>!</p>
<br/>
<h3>How do I customize mini.css?</h3>
<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization">customization</a> section.</p><br/>
</div>
<div class="col-sm col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 row">
<div class="card fluid" style=" width: 100%;">
<h3 class="section double-padded" style="text-align: center;">Support mini.css!</h3>
<p class="section double-padded" style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on Github.<br/> It means a lot to us and it only takes a couple of seconds!</p>
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;"><i class="fa fa-star-o fa-fw" aria-hidden="true"></i>&nbsp;Star mini.css</a>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 60px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h2>Getting started</h2>
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
<ul>
<li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
<li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
<ol>
<li><a href="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
<li><a href="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
<li><a href="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
</ol>
</li>
<li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React &amp; Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
<li>Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> to find out more.</li>
</ul>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>
<small>Icons made by <a href="http://www.freepik.com" title="Freepik"><small>Freepik</small></a> from <a href="http://www.flaticon.com" title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"><small>CC 3.0 BY</small></a></small></footer>
</body> </body>
</html> </html>

0
docs/card.html → docs/v2/card.html
View File

0
docs/contextual.html → docs/v2/contextual.html
View File

0
docs/core.html → docs/v2/core.html
View File

0
docs/favicon.png → docs/v2/favicon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

0
docs/favicon_small.png → docs/v2/favicon_small.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

0
docs/flavors.html → docs/v2/flavors.html
View File

0
docs/grid.html → docs/v2/grid.html
View File

216
docs/v2/index.html
View File

@@ -1,11 +1,205 @@
<!DOCTYPE html><html><head> <!DOCTYPE html>
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title><meta charset="utf-8"> <html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <head>
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit"> <link rel="stylesheet" href="mini-default.min.css">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
</head></html> <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">
<style>
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
#logo-body { position: relative; background: -webkit-linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); background: linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); height: -webkit-calc(100vh - 48px); height: calc(100vh - 48px); overflow: hidden; text-align: center; }
#description { color: #f5f5f5; font-family: 'Noto Sans', sans-serif; position: absolute; top: 49vh; width: 100%; margin: 0; }
#top-heading { color: #f5f5f5; font-size: 2.8em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: absolute; margin: 0; top: 35vh; width: 100%; height: 20vh; min-height: 42px; font-family: 'Noto Sans', sans-serif; }
#top-vtag-cont { width: 100%; text-align: center; }
#top-version-tag { padding: 8px 8px; font-size: 1.2em; font-weight: 700; font-family: 'Noto Sans', sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 55vh; width: 40px; background: #4527a0; border-radius: 6px; margin: 0; margin-left: -30px; }
@media screen and (max-height:480px), screen and (max-width: 480px) { #top-version-tag { display: none; } #description { top: 60vh;}}
#mt1 { position: absolute; bottom: 0; left: -7vw; width: 0; height: 0; border-left: 12vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #07020d; }
#mt1:after { content: ""; position: absolute; left: -1.4vw; border-left: 1.4vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #150627; z-index: 2; }
#mt2 { position: absolute; bottom: -0.4vw; left: 10vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #120520; z-index: 3; }
#mt2:after { content: ""; position: absolute; left: -1.3vw; border-left: 1.3vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #1b0833; z-index: 4; }
#mt3 { position: absolute; bottom: 0; right: 17.75vw; width: 0; height: 0; border-left: 8vw solid transparent; border-right: 7vw solid transparent; border-bottom: 6vw solid #1b0833; z-index: 5; }
#mt3:after { content: ""; position: absolute; left: -8vw; border-left: 8vw solid transparent; border-right: 1.4vw solid transparent; border-bottom: 6vw solid #220a40; z-index: 6; }
#mt4 { position: absolute; bottom: -0.25vw; right: 8vw; width: 0; height: 0; border-left: 7.5vw solid transparent; border-right: 7.25vw solid transparent; border-bottom: 6.5vw solid #150627; z-index: 3;}
#mt4:after { content: ""; position: absolute; left: -7.5vw; border-left: 7.5vw solid transparent; border-right: 1.7vw solid transparent; border-bottom: 6.5vw solid #1f0a3b; z-index: 2;}
#mt5 { position: absolute; bottom: 0; right: -6.5vw; width: 0; height: 0; border-left: 9vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 8vw solid #0e041a; }
#mt5:after { content: ""; position: absolute; left: -9vw; border-left: 9vw solid transparent; border-right: 2vw solid transparent; border-bottom: 8vw solid #1b0833; z-index: 2; }
@media screen and (max-width: 767px) {
#mt1 { left: -10.5vw; border-left: 18vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #07020d; }
#mt1:after { left: -2.1vw; border-left: 2.1vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #150627; }
#mt2 { bottom: -0.6vw; left: 15vw; border-left: 10.5vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #120520; }
#mt2:after { left: -1.95vw; border-left: 1.95vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #1b0833; }
#mt3 { right: 26.625vw; border-left: 12vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 9vw solid #1b0833; }
#mt3:after { left: -12vw; border-left: 12vw solid transparent; border-right: 2.1vw solid transparent; border-bottom: 9vw solid #220a40; }
#mt4 { bottom: -0.375vw; right: 12vw; border-left: 11.25vw solid transparent; border-right: 10.875vw solid transparent; border-bottom: 9.75vw solid #150627; }
#mt4:after { left: -11.25vw; border-left: 11.25vw solid transparent; border-right: 2.55vw solid transparent; border-bottom: 9.75vw solid #1f0a3b; }
#mt5 { right: -9.75vw; border-left: 13.5vw solid transparent; border-right: 15.75vw solid transparent; border-bottom: 12vw solid #0e041a; }
#mt5:after { left: -13.5vw; border-left: 13.5vw solid transparent; border-right: 3vw solid transparent; border-bottom: 12vw solid #1b0833;}
}
#codename { position: absolute; bottom: 2px; right: 3px; color: #616161; z-index: 5; font-size: 0.55em; font-family: 'Noto Sans', sans-serif; }
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; } .box-centered { text-align: center; }
.box-centered > .card.fluid { -webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start;
justify-content: flex-start; -webkit-align-self: auto; align-self: auto;}
[class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;}
.fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} li a { text-decoration: none;}
</style>
</head>
<body>
<div id="logo-body">
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
<p id="top-vtag-cont"><mark id="top-version-tag">v2.3</mark></p>
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
<small id="codename">Fermion</small>
</div>
<header class="sticky">
<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container responsive-padding">
<div class="row" style="padding-top: 60px; padding-bottom: 20px;">
<div class="col-sm-12 col-lg-10 col-lg-offset-1 row">
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Minimal<small>Size matters!</small></h2><br/>
<img src="icons/wings.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Responsive<small>Think mobile!</small></h2><br/>
<img src="icons/bacteria.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
</div>
</div>
</div>
<div class="col-sm-12 col-md-8 col-md-offset-2 col-lg col-lg-offset-0 box-centered row">
<div class="card fluid">
<div class="section">
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br/>
<img src="icons/meteor.svg" width="96px" height="96px"/><br/><br/>
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h2>Setup &amp; usage</h2>
<p style="text-align:justify"><strong>mini.css</strong> is published in <strong>npm</strong>, <strong>yarn</strong> and <strong>bower</strong>, so you can easily download it, using your preferred package manager:</p>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
</div>
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors">Flavor</a> and use it for your project.</p>
<br/>
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.3.4/dist/mini-default.min.css&quot;</span>&gt;</pre><br/>
<p style="text-align:justify">Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Browser support</h2>
<div class="row" style="padding: 0.5rem;">
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png" alt="edge"><br/><h3><small>&nbsp;&nbsp;Edge<sup style="-0.675em"><i class="fa fa-lg fa-exclamation" aria-hidden="true" style="font-size: 80%;"></i></sup></small>12</h3></div>
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png" alt="firefox"><br/><h3><small>&nbsp;Firefox</small>28</h3></div>
<div class="col-sm" style="text-align:center; background: #FFE270; padding: 1rem;"><img src="browser-logos/chrome_128x128.png" alt="chrome"><br/><h3><small>&nbsp;Chrome</small>26</h3></div>
<div class="col-sm" style="text-align:center; background: #00D0FF; padding: 1rem;"><img src="browser-logos/safari_128x128.png" alt="safari"><br/><h3><small>&nbsp;Safari</small>7.1</h3></div>
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png" alt="opera"><br/><h3><small>&nbsp;Opera</small>17</h3></div>
<div class="col-sm" style="text-align:center; background: #0F98E0; padding: 1rem;"><img src="browser-logos/android_128x128.png" alt="android"><br/><h3><small>&nbsp;Android</small>4.4</h3></div>
</div></div> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<p style="padding-top: 1rem; padding-bottom: 1rem; text-align: justify"><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;Due to the way <strong>mini.css</strong> is designed, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers such as Internet Explorer will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><hr>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2>
<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
<br/>
<h3>Why should I use mini.css?</h3>
<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
<p>Not convinced yet? Maybe you should read these <a href="https://hackernoon.com/5-reasons-to-try-out-mini-css-62ddb47b9370">5 reasons</a> to try out <strong>mini.css</strong>.</p>
<br/>
<h3>What exactly does mini.css provide?</h3>
<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
<ul>
<li><a href="core">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
<li><a href="grid">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
<li><a href="navigation">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
<li><a href="input_control">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
<li><a href="table">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
<li><a href="card">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
<li><a href="tab">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
<li><a href="contextual">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
<li><a href="progress">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
<li><a href="utility">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul>
<p style="text-align: justify;">While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries <a href="https://chalarangelo.github.io/react-mini.css/">here</a>!</p>
<br/>
<h3>How do I customize mini.css?</h3>
<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization">customization</a> section.</p><br/>
</div>
<div class="col-sm col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 row">
<div class="card fluid" style=" width: 100%;">
<h3 class="section double-padded" style="text-align: center;">Support mini.css!</h3>
<p class="section double-padded" style="text-align: center;">If you like <strong>mini.css</strong>, remember that you can show your support by starring it on Github.<br/> It means a lot to us and it only takes a couple of seconds!</p>
<a href="https://github.com/Chalarangelo/mini.css" target="_blank" class="section button primary large" style="text-align: center;"><i class="fa fa-star-o fa-fw" aria-hidden="true"></i>&nbsp;Star mini.css</a>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 60px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h2>Getting started</h2>
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
<ul>
<li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
<li>If you want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
<ol>
<li><a href="https://hackernoon.com/designing-a-simple-web-page-with-mini-css-f455e9f6403b">Designing a simple web page with <strong>mini.css</strong></a></li>
<li><a href="https://hackernoon.com/using-the-mini-css-card-module-and-media-object-3c5b5829d19c">Using the <strong>mini.css</strong> card module and media object</a></li>
<li><a href="https://hackernoon.com/creating-a-mobile-friendly-navigation-using-mini-css-8cea580c51ed">Creating a mobile-friendly navigation using <strong>mini.css</strong></a></li>
</ol>
</li>
<li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React &amp; Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
<li>Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> to find out more.</li>
</ul>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>
<small>Icons made by <a href="http://www.freepik.com" title="Freepik"><small>Freepik</small></a> from <a href="http://www.flaticon.com" title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"><small>CC 3.0 BY</small></a></small></footer>
</body>
</html>

0
docs/input_control.html → docs/v2/input_control.html
View File

0
docs/mini-default.min.css → docs/v2/mini-default.min.css vendored
View File

0
docs/modules.html → docs/v2/modules.html
View File

0
docs/navigation.html → docs/v2/navigation.html
View File

0
docs/page_thumb.png → docs/v2/page_thumb.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

0
docs/progress.html → docs/v2/progress.html
View File

0
docs/project_thumbnail.png → docs/v2/project_thumbnail.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

0
docs/quick_reference.html → docs/v2/quick_reference.html
View File

0
docs/react.html → docs/v2/react.html
View File

0
docs/tab.html → docs/v2/tab.html
View File

0
docs/table.html → docs/v2/table.html
View File

0
docs/templates.html → docs/v2/templates.html
View File

0
docs/utility.html → docs/v2/utility.html
View File

18
docs/v3/DEVLOG.md Normal file
View File

@@ -0,0 +1,18 @@
# mini.css v3 (Gluon) Development Log
## 20171011
- Moved all WIP to `gluon` branch, seems like the right choice.
- Initialized pages for **v3**.
- Initialized new folder structure in `src` and `dist`, moved legacy code from **v2** to `_v2` inside of `src`, so that it can be easily identified.
- Set version for the `gluon` branch to `v3.0.0-alpha.1`, should be ready for a pre-release next month at the latest.
- Started development of `core` and `default` flavor.
- Turned color palette of `core` into CSS variables to allow for customization.
- Changed native font stack to a less legacy-based one.
- Defined defaults for certain variables that were not defined in the past.
- `$_body-margin` and `$_apply-defaults-to-all` are now hidden variables, effectively hiding a layer of complexity behind them and allowing for easier customization and more streamlined defaults.
- Removed a fix for `article, aside, section, figcaption, figure, main, details, menu`, as it was IE-based. Replaced with a single fix for `details` as it could still be a bit of a problem in certain versions of Edge and Firefox.
- Removed fix for `audio, video`, as it was IE-based.
- Removed fix for `svg:not(:root)`, as it was IE-based.
- Completely removed the `dfn` fix, as it's a rarely (if ever) used element and it targets an older version of Android, meaning it's not a really meaningful fix to anyone.
- Stopped right before the headings, these will be updated and built next time.

11
docs/v3/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!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: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>

0
src/flavors/mini-dark.scss → src/_v2/flavors/mini-dark.scss
View File

644
src/_v2/flavors/mini-default.scss Normal file
View File

@@ -0,0 +1,644 @@
// 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);

0
src/flavors/mini-lite.scss → src/_v2/flavors/mini-lite.scss
View File

0
src/flavors/mini-nord.scss → src/_v2/flavors/mini-nord.scss
View File

0
src/flavors/mini-pwa.scss → src/_v2/flavors/mini-pwa.scss
View File

0
src/flavors/mini-sucroa.scss → src/_v2/flavors/mini-sucroa.scss
View File

0
src/mini/_card.scss → src/_v2/mini/_card.scss
View File

0
src/mini/_card_mixins.scss → src/_v2/mini/_card_mixins.scss
View File

0
src/mini/_contextual.scss → src/_v2/mini/_contextual.scss
View File

0
src/mini/_contextual_mixins.scss → src/_v2/mini/_contextual_mixins.scss
View File

466
src/_v2/mini/_core.scss Normal file
View File

@@ -0,0 +1,466 @@
/*
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;
}
}

0
src/mini/_grid.scss → src/_v2/mini/_grid.scss
View File

0
src/mini/_input_control.scss → src/_v2/mini/_input_control.scss
View File

0
src/mini/_input_control_mixins.scss → src/_v2/mini/_input_control_mixins.scss
View File

0
src/mini/_navigation.scss → src/_v2/mini/_navigation.scss
View File

0
src/mini/_progress.scss → src/_v2/mini/_progress.scss
View File

0
src/mini/_progress_mixins.scss → src/_v2/mini/_progress_mixins.scss
View File

0
src/mini/_tab.scss → src/_v2/mini/_tab.scss
View File

0
src/mini/_table.scss → src/_v2/mini/_table.scss
View File

0
src/mini/_utility.scss → src/_v2/mini/_utility.scss
View File

0
src/mini/_utility_mixins.scss → src/_v2/mini/_utility_mixins.scss
View File

637
src/flavors/mini-default.scss
View File

@@ -5,640 +5,7 @@
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v2.3.4 mini.css version: v3.0.0-alpha.1
*/ */
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
$back-color: #f8f8f8; // Body background color
$base-font-family: // Default font stack for all elements:
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
// 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/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);

439
src/mini/_core.scss
View File

@@ -1,48 +1,27 @@
/* /*
Browsers resets and base typography. Browsers resets and base typography.
*/ */
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true`/`false`).
$base-root-font-size: 16px !default; // Root font sizing for all elements - Should only be specified in `px` units! // TODO: Add fluid type and test thoroughly
$_1px: (1px/$base-root-font-size) * 1rem !default; // Calculated rem value of 1px. $base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
$use-fluid-typography: false !default; // Should fluid typography be used at the root element? (`true`/`false`) $_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
$fluid-type-start-breakpoint: 320px !default; // Breakpoint where fluid typography scaling starts. $__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
$fluid-type-end-breakpoint: 1600px !default; // Breakpoint where fluid typography scaling ends. $base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
$fluid-type-small-type: 14px !default; // Smallest root font size for fluid typography. $base-line-height: 1.5 !default; // Line height for most elements
$fluid-type-large-type: 18px !default; // Largest root font size for fluid typography. $base-font-size: 1rem !default; // Font sizing for all elements
$include-dfn-fix: true !default; // Fix display of <dfn> element in older versions of Android. $_body-margin: 0 !default; // [Hidden] Margin for body
$make-heading-smalltext-block: false !default; // Should <small> elements in headings be displayed as blocks (`true`/`false`). $fore-color: #212121 !default; // Text & foreground color
$horizontal-rule-fancy-style: false !default; // Should a fancy styling be applied for the <hr> element (`true`/`false`). $back-color: #f8f8f8 !default; // Background color
$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`). :root {
$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`). --fore-color: $fore-color;
$style-link-active-state: false !default; // [Hidden flag] Should the :active state of <a> elements be stylized, same as the :hover state (`true`/`false`). --back-color: $back-color;
// 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 {
html {
font-size: $base-root-font-size; // Set root's font sizing. font-size: $base-root-font-size; // Set root's font sizing.
}
} }
@if $apply-defaults-to-all { @if $_apply-defaults-to-all {
html, * { html, * {
font-family: #{$base-font-family}; font-family: #{$base-font-family};
line-height: $base-line-height; line-height: $base-line-height;
@@ -63,13 +42,13 @@ $style-link-active-state: false !default; // [Hidden flag] Should the
} }
body { body {
margin: $body-margin; margin: $_body-margin;
color: $fore-color; color: var(--fore-color);
background: $back-color; background: var(--back-color);
} }
// Correct display for older versions of IE. Fix display of some elements in other browsers as well. // Correct display for Edge & Firefox.
article, aside, section, figcaption, figure, main, details, menu { details {
display: block; display: block;
} }
@@ -81,20 +60,10 @@ summary {
// Abbreviations // Abbreviations
abbr[title] { abbr[title] {
border-bottom: none; // Remove bottom border in Firefox 39-. border-bottom: none; // Remove bottom border in Firefox 39-.
text-decoration: underline; // Opinionated style-fix for all browsers. text-decoration: underline dotted; // Opinionated style-fix for all browsers.
} }
// Correct display for older versions of IE. // Show overflow in Edge.
audio, video {
display: inline-block;
}
// Hide overflow in IE.
svg:not(:root) {
overflow: hidden;
}
// Show overflow in IE.
input { input {
overflow: visible; overflow: visible;
} }
@@ -104,363 +73,3 @@ img {
max-width: 100%; max-width: 100%;
height: auto; 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;
}
}