mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-08 06:46:29 +02:00
Initial commit for sucroa flavour
This commit is contained in:
Angeliki Daskalakis
630
dist/mini-sucroa-test.html
vendored
Normal file
630
dist/mini-sucroa-test.html
vendored
Normal file
@@ -0,0 +1,630 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Live demo styled as of 20161121 -->
|
||||||
|
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/21ca8d498f0ff51cdeab7c16606fc06502c7de29/dist/mini-default.min.css"> -->
|
||||||
|
<link rel="stylesheet" href="mini-sucroa.min.css">
|
||||||
|
<title>mini.css - A minimal Sass-y responsive mobile-first 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 - A minimal Sass-y responsive mobile-first style-agnostic CSS framework">
|
||||||
|
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
|
||||||
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||||
|
<style>
|
||||||
|
#header-logo {
|
||||||
|
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
|
||||||
|
margin-left: -3px; padding: 2px;
|
||||||
|
}
|
||||||
|
#top-logo {
|
||||||
|
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||||
|
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||||
|
}
|
||||||
|
#top-header {
|
||||||
|
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||||
|
}
|
||||||
|
#top-version-tag {
|
||||||
|
padding: 3px 5px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||||
|
}
|
||||||
|
.box-centered { text-align: center; }
|
||||||
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||||
|
.box-colored.red { background: #b71c1c; }
|
||||||
|
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
||||||
|
<a href="#" class="button">Introduction</a>
|
||||||
|
<a href="#" class="button">Module Overview</a>
|
||||||
|
<a href="#" class="button">Module Demos</a>
|
||||||
|
<a href="#" class="button">Flavors</a>
|
||||||
|
<a href="#" class="button">Customization</a>
|
||||||
|
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row" style="padding-top: 20px;">
|
||||||
|
<div class="col-sm-12 col-md">
|
||||||
|
<div class="box-centered">
|
||||||
|
<h2>Minimal</h2>
|
||||||
|
<i class="fa fa-compress fa-4x" aria-hidden="true"></i>
|
||||||
|
<br><br>
|
||||||
|
<p><strong>mini.css</strong> is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md">
|
||||||
|
<div class="box-centered">
|
||||||
|
<h2>Reponsive</h2>
|
||||||
|
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
|
||||||
|
<br><br>
|
||||||
|
<p><strong>mini.css</strong> is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md">
|
||||||
|
<div class="box-centered">
|
||||||
|
<h2>Style-agnostic</h2>
|
||||||
|
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
|
||||||
|
<br><br>
|
||||||
|
<p><strong>mini.css</strong> gives you the power of customization, using its fully moddable flavors. This will give you control over how your websites look and allow great designs to stand out!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div>
|
||||||
|
<br><hr>
|
||||||
|
<p>Below you can see a showcase of the features and styles included in the <strong>default</strong> flavor of <strong>mini.css</strong>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div>
|
||||||
|
<h2>Typography <small>Styles for common textual elements</small></h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-md-4">
|
||||||
|
<div><h1>Heading 1 <small>Subheading</small></h1></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-4">
|
||||||
|
<div><h2>Heading 2 <small>Subheading</small></h2></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-4">
|
||||||
|
<div><h3>Heading 3 <small>Subheading</small></h3></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-md-4">
|
||||||
|
<div><h4>Heading 4 <small>Subheading</small></h4></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-4">
|
||||||
|
<div><h5>Heading 5 <small>Subheading</small></h5></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-4">
|
||||||
|
<div><h6>Heading 6 <small>Subheading</small></h6></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<blockquote cite="Mr. Quotalot">This is some quoted text from elsewhere.</blockquote><br>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div>
|
||||||
|
<br>
|
||||||
|
<p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.0 is codenamed <strong>Fermion</strong>? No? Well, now you do! Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. We use <mark>highlights</mark> quite a lot as well. Apart from the primary color, you can also try the <mark class="secondary">secondary</mark> and <mark class="tertiary">tertiary</mark> colors. If you wanna be fancy, maybe use a <mark class="tag">tag</mark> or a <mark class="bubble">bubble</mark>. All of these work well inside headings and the like. To finish our typography tour, check out the preformatted code block below.</p><br>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<pre>function sum(num1, num2) {
|
||||||
|
var num3 = num1 + num2;
|
||||||
|
console.log('Result: ' + num3);
|
||||||
|
}</pre>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div class="alert">
|
||||||
|
<h3>This is an alert</h3>
|
||||||
|
<p>Alerts are important</p>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<p class="alert urgent">Hi</p>
|
||||||
|
<h2 class="alert critical">Loop</h2>
|
||||||
|
<a class="alert urgent">Hi</a>
|
||||||
|
<h2 class="alert critical">Loop</h2>
|
||||||
|
<br>
|
||||||
|
<div class="alert urgent">
|
||||||
|
<h3>This is an alert</h3>
|
||||||
|
<p>Alerts are important</p>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="alert critical">
|
||||||
|
<h3>This is an alert</h3>
|
||||||
|
<p>Alerts are important</p>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="alert animated">
|
||||||
|
<h3>This is an alert</h3>
|
||||||
|
<p>Alerts are important</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div>
|
||||||
|
<hr>
|
||||||
|
<h2>Grid system <small>Easy layout using flexbox</small></h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div>
|
||||||
|
<p><strong>mini.css</strong> uses the Flexible Layout Module (commonly known as <code>flexbox</code>) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The <code>container</code> of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the <code>row</code> class and columns can be created using the usual <code>col-SZ-XX</code> syntax where <code>SZ</code> and <code>XX</code> are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the <code>col-SZ-offset-XX</code> syntax. The <strong>default</strong> grid is separated into 12 vertical columns. You can see some examples below.</p><br>
|
||||||
|
</p></div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-5">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 col-sm-offset-3">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4 col-sm-offset-2">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-3 col-sm-offset-1">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2 col-sm-offset-3">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm col-md-6 col-lg">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm col-sm-first col-md-normal col-lg-last">
|
||||||
|
<div class="box-colored red"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm col-lg-6">
|
||||||
|
<div class="box-colored"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div>
|
||||||
|
<hr>
|
||||||
|
<h2>Common Elements <small>Styles for common HTML elements</small></h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div>
|
||||||
|
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p><br>
|
||||||
|
<h3>Tables</h3>
|
||||||
|
<p>Tables are responsive and use the <code>data-label</code> attribute to specify the header name for each cell, so that they can be displayed as cards on mobile devices. Here's an example (resize to see mobile display if you are on desktop):</p>
|
||||||
|
<table>
|
||||||
|
<caption>Hacker List</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Surname</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Handle</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Name">John</td>
|
||||||
|
<td data-label="Surname">Smith</td>
|
||||||
|
<td data-label="Email">johnsmith@mail.com</td>
|
||||||
|
<td data-label="Handle">SmithereensJohn</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Name">Lisa</td>
|
||||||
|
<td data-label="Surname">Cody</td>
|
||||||
|
<td data-label="Email">codyl@mail.com</td>
|
||||||
|
<td data-label="Handle">Codyl</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Name">Max</td>
|
||||||
|
<td data-label="Surname">Roberts</td>
|
||||||
|
<td data-label="Email">terminus@mail.com</td>
|
||||||
|
<td data-label="Handle">T3rm1nu5</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Name">Adam</td>
|
||||||
|
<td data-label="Surname">Leeks</td>
|
||||||
|
<td data-label="Email">leekt@mail.com</td>
|
||||||
|
<td data-label="Handle">Leekt</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<br>
|
||||||
|
<table style="display: flex; flex-direction: row; overflow: auto; border: 0;">
|
||||||
|
<caption style="display: flex; flex-flow: column wrap; flex: 0 1 auto; align-self: center;">Hacker List</caption>
|
||||||
|
<thead style="display: flex; flex-flow: row wrap; flex: 0 0 auto;">
|
||||||
|
<tr style="display: flex; flex-direction: column;">
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Surname</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Handle</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody style="display: flex; flex-flow: row wrap; flex: 0 0 auto;">
|
||||||
|
<tr style="display: flex; flex-direction: column;">
|
||||||
|
<td data-label="Name">John</td>
|
||||||
|
<td data-label="Surname">Smith</td>
|
||||||
|
<td data-label="Email">johnsmith@mail.com</td>
|
||||||
|
<td data-label="Handle">SmithereensJohn</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="display: flex; flex-direction: column;">
|
||||||
|
<td data-label="Name">Lisa</td>
|
||||||
|
<td data-label="Surname">Cody</td>
|
||||||
|
<td data-label="Email">codyl@mail.com</td>
|
||||||
|
<td data-label="Handle">Codyl</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="display: flex; flex-direction: column;">
|
||||||
|
<td data-label="Name">Max</td>
|
||||||
|
<td data-label="Surname">Roberts</td>
|
||||||
|
<td data-label="Email">terminus@mail.com</td>
|
||||||
|
<td data-label="Handle">T3rm1nu5</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="display: flex; flex-direction: column;">
|
||||||
|
<td data-label="Name">Adam</td>
|
||||||
|
<td data-label="Surname">Leeks</td>
|
||||||
|
<td data-label="Email">leekt@mail.com</td>
|
||||||
|
<td data-label="Handle">Leekt</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<br>
|
||||||
|
<h3>Forms</h3>
|
||||||
|
<p>Forms are inline by default and textual <code><input></code>, <code><textarea></code> and <code><select></code> elements have been pre-styled. To make inputs take up more space than their default, simply add something like <code>width="100%"</code>. You can also utilize the grid system to align forms to your liking. Below are some examples:</p>
|
||||||
|
<form>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Inline form (default style):</legend>
|
||||||
|
<div class="input-group"><label for="username">Username</label> <input type="text" value="" id="username" placeholder="username"> </div>
|
||||||
|
<div class="input-group"><label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com"> </div>
|
||||||
|
<div class="input-group"><label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
|
||||||
|
</fieldset><br>
|
||||||
|
<fieldset class="container">
|
||||||
|
<legend>Aligned form (using <code>width</code> and grid):</legend>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-2" style="text-align:right;">
|
||||||
|
<label for="website" style="vertical-align: text-top;">Website</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm">
|
||||||
|
<input type="text" value="" id="website" placeholder="website" style="width:85%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-2" style="text-align:right;">
|
||||||
|
<label for="weburl" style="vertical-align: text-top;">URL</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm">
|
||||||
|
<input type="url" value="" id="weburl" placeholder="https://www.mywebsite.com" style="width:85%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-2" style="text-align:right;">
|
||||||
|
<label for="desc" style="vertical-align: text-top;">Description</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm">
|
||||||
|
<textarea type="url" value="" id="desc" placeholder="description" style="width:85%;"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset><br>
|
||||||
|
<fieldset>
|
||||||
|
<legend>More inputs</legend>
|
||||||
|
<input disabled value="Disabled">
|
||||||
|
<input readonly value="Readonly">
|
||||||
|
<input type="number" value="4">
|
||||||
|
<select>
|
||||||
|
<option>Test</option>
|
||||||
|
<option>Demo</option>
|
||||||
|
</select>
|
||||||
|
<input type="search" placeholder="search..." value="">
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<br>
|
||||||
|
<h3>Navigation</h3>
|
||||||
|
<p>Use the <code><header></code>, <code><nav></code> and <code><footer></code> elements to add navigational elements to your page. The <code><header></code> element displays as a non-fixed horizontal bar and can contain a logo along with a set of links or buttons. Style any links using the <code>.button</code> class to give them the proper style. it is suggested that you place the <code><header></code> element outside of your grid system's <code>.container</code> to avoid styling problems. You can see an example below:</p>
|
||||||
|
<header><a href="#" class="logo">Logo</a><button>Link 1</button><a href="#" class="button">Link 2</a><button>Link 3</button></header><br>
|
||||||
|
<p><code><nav></code> implements the traditional navigation sidebar, using simple styling. The sidebar is not fixed by default and it has no specific width set, so you can use the grid system or some Javascript code to show or hide it and decide its size. Use simple links and <code><span></code> elements to add links and categories. The <code>.sublink-1</code> and <code>.sublink-2</code> classes can be added to create links in categories and subcategories. Below you can see an example (sidebar is displayed next to text on medium-large displays, but fills the whole display on phones and smaller screens):</p>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-md-9">
|
||||||
|
<p>This is some sample content that will show next to the navigation menu. Which means that we'll have to present some more fun facts about <strong>mini.css</strong> to occupy this space. Well, here's a couple:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>mini.css</strong> was inspired by Bootstrap and Pure.css. Its original goal was to build a framework with the stylistic fluff of Bootstrap, but nearly the size of Pure.css. The first version, codenamed <strong>Neutrino</strong> was well-received and was mostly a tech demo of what <strong>Fermion</strong> now offers.</li>
|
||||||
|
<li><strong>mini.css</strong> v2.0 has been designed with modern browser compatibility and recent web standards in mind. Part of its aim is to reduce the footprint of websites by providing a customizable base to work with, while cutting down a lot of the fat that comes with premade stylesheets.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-3">
|
||||||
|
<nav>
|
||||||
|
<a href="#">Link 1</a>
|
||||||
|
<a href="#">Link 2</a>
|
||||||
|
<span>Category 1</span>
|
||||||
|
<a href="#" class="sublink-1">Link 3</a>
|
||||||
|
<a href="#" class="sublink-1">Link 4</a>
|
||||||
|
<span class="sublink-1">Category 2</span>
|
||||||
|
<a href="#" class="sublink-2">Link 5</a>
|
||||||
|
<a href="#" class="sublink-2">Link 6</a>
|
||||||
|
<a href="#" class="sublink-1">Link 7</a>
|
||||||
|
<a href="#" >Link 8</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><br>
|
||||||
|
<p>Finally, use the <code><footer></code> element to create your footer. Add links, images, credits. This element is not meant for main navigation, but many pages use it for some kind of navigation or other. Try to place the <code><footer></code> outside of the grid system for best results. Below is an example:</p>
|
||||||
|
<footer>© 2016 mini.css | <a href="#">About</a> | <a href="#">Terms of use</a></footer>
|
||||||
|
<br>
|
||||||
|
<h3>Buttons</h3>
|
||||||
|
<p>Buttons are already pre-styled in <strong>mini.css</strong> to allow for consistent presentation. However, there is a lot you can do to customize them, as the pre-applied styles are mostly overrides for the default presentation styles. Pre-styled buttons and other button-like inputs can be seen below:</p>
|
||||||
|
<span style="margin:3px;"></span>
|
||||||
|
<button>Normal button</button>
|
||||||
|
<input type="button" value="Input button">
|
||||||
|
<input type="submit" value="Submit button">
|
||||||
|
<input type="reset" value="Reset button">
|
||||||
|
<a href="#" class="button">Link button</a>
|
||||||
|
<button disabled>Disabled button</button><br>
|
||||||
|
<p>Button groups can also be created, utilising the <code>.button-group</code> class. Simply add a set of buttons in it and you're good to go. Check it out below:</p>
|
||||||
|
<div class="button-group">
|
||||||
|
<input type="button" value="Input button">
|
||||||
|
<input type="submit" value="Submit button">
|
||||||
|
<input type="reset" value="Reset button">
|
||||||
|
<button>Normal button</button>
|
||||||
|
<a href="#" class="button">Link button</a>
|
||||||
|
</div>
|
||||||
|
<p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code><input type="file"></code> element of your choice and you're good to go. For example:</p>
|
||||||
|
<span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button"><i class="fa fa-upload" aria-hidden="true"></i> Upload file</label><br>
|
||||||
|
<p>There are also different kinds of buttons, specifically <code>primary</code>, <code>secondary</code> and <code>tertiary</code>, as well as <code>small</code> and <code>large</code> buttons. All of these types can be specified as classes. For example:</p>
|
||||||
|
<span style="margin:3px;"></span>
|
||||||
|
<button class="primary">Primary normal button</button>
|
||||||
|
<input type="button" value="Secondary input button" class="secondary">
|
||||||
|
<input type="reset" value="Tertiary reset button" class="tertiary">
|
||||||
|
<input type="submit" value="Large submit button" class="large">
|
||||||
|
<label disabled class="button small primary">Small primary disabled label button</label>
|
||||||
|
<br><br>
|
||||||
|
<h3>Checkboxes and Radio buttons</h3>
|
||||||
|
<p>Checkboxes and radio buttons are styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while keeping things simple and adding just the needed consistency for those input types. Place an <code><input></code> (checkbox or radio button) and a linked <code><label></code> inside an <code>.input-group</code> and the controls will style themselves. To allow accessibility for those controls, you can use <code>tabindex="0"</code> on the <code><input></code> elements only. You can see some examples below:</p>
|
||||||
|
<form>
|
||||||
|
<fieldset>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="checkbox" id="c1" tabindex="0"> <label for="c1">Checkbox</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="checkbox" id="c2" disabled> <label for="c2" disabled>Disabled</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="radio" name="radios" value="r1" checked id="r1" tabindex="0"> <label for="r1">Value 1</label>
|
||||||
|
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="r2">Value 2</label>
|
||||||
|
<input type="radio" name="radios" value="r3"checked id="r3" tabindex="0"> <label for="r3">Value 3</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<br>
|
||||||
|
<h3>Progress bars</h3>
|
||||||
|
<p>The <code><progress></code> element is used for progress bars. There are three color variants (default, <code>secondary</code> and <code>tertiary</code>), as well as an <code>inline</code> class that displays the progress bar as an inline block, along with a <code>nano</code> variant for tiny progress bars. Below are some examples:</p>
|
||||||
|
<br>
|
||||||
|
<progress value="45" max="100""></progress><br>
|
||||||
|
<progress value="20" max="100" class="secondary"></progress><br>
|
||||||
|
<progress value="60" max="100" class="tertiary"></progress><br>
|
||||||
|
<p>Inline progress: <progress value="85" max="100" class="inline"></progress></p>
|
||||||
|
<p>Nano progress:</p>
|
||||||
|
<progress class="nano" value="35" max="100"></progress>
|
||||||
|
<hr>
|
||||||
|
<h2>Utilities and Helpers <small>Useful classes for common problems</small></h2>
|
||||||
|
<p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:</p>
|
||||||
|
<p><span class="bordered">Generic border (using black outline and opacity of 0.25)</span>, <span class="bordered rounded">Radial border style 1</span> & <span class="bordered circular"> 2 </span>.</p>
|
||||||
|
<ul class="breadcrumbs"><li><a href="#">These</a></li><li><a href="#">is</a></li><li><a href="#">what</a></li><li><a href="#">breadcrumbs</a></li><li><a href="#">look</a></li><li><span>like</span></li></ul>
|
||||||
|
<p>You can also use the <code>.hidden</code> class to hide any element you want or the <code>.visually-hidden</code> class for elements that need to be invisible to users but exist in the accessibility tree, set <code>float</code>s to left or right using the <code>.float-left</code> and <code>.float-right</code> classes or clear <code>float</code>s using the <code>.clearfix</code> class, which implements the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p><br>
|
||||||
|
<h2>Cards <small>Modern content containers</small></h2>
|
||||||
|
<p>Cards are some of the most modern and stylish content containers and are widely used in many website types. <strong>mini.css</strong> provides you with the <code>.card</code> class, along with a handful of pre-built styles to help you create beatiful cards for your pages. Note that this module is heavily dependent on the grid system module. To use the cards, simply replace the grid's columns with your cards and you're ready to go. Note that in the examples below, we try to showcase as many features as possible, but there might be something we missed. Also, the <code>.row</code> which acts as the contaienr for the cards has the <code>.cards</code> class applied to it, which helps align the cards horizontally, by automatically shrinking or expanding the spaces between them.</p>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row cards">
|
||||||
|
<div class="card">
|
||||||
|
<img src="catdemo.jpg" class="section media">
|
||||||
|
<div class="section">
|
||||||
|
<h2>Chubby cat</h2>
|
||||||
|
<span>This is a lovely cat!</span>
|
||||||
|
</div>
|
||||||
|
<small class="section">03-11-2016, 09:44 PM</small>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2 class="section">Chubby cat<small>Uploaded Nov, 3rd, 2016</small></h2>
|
||||||
|
<img src="catdemo.jpg" class="section media">
|
||||||
|
<p class="section">This cat is pretty amazing, right? Just look at it!</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="section">Cards are pretty awesome, as you can see.</p>
|
||||||
|
<p class="section">This is a card with three text sections.</p>
|
||||||
|
<p class="section">By the way, here's a link to the <strong>mini.css</strong> <a href="https://github.com/Chalarangelo/mini.css">project repository on Github</a>, just in case.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="section">You can use <code><button></code>s and other similar elements as card sections. Like the button below.</div>
|
||||||
|
<button class="section">Button section</button>
|
||||||
|
</div>
|
||||||
|
<div class="card primary">
|
||||||
|
<p>Cards resize automatically to fit any and all content, allowing you to do anything you want with them. They also align the content automatically, so your sections will always look pretty. Nothing to worry about anymore! By the way, this is a <code>.primary</code> card.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2 class="section dark"><code>.dark</code> heading</h2>
|
||||||
|
<p class="section">Totally normal text.</p>
|
||||||
|
<p class="section primary"><code>.primary</code> section text.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card fluid">
|
||||||
|
<h1 class="section">Fluid</h1>
|
||||||
|
<p class="section">Yes, <code>.fluid</code> cards are also available! You might want to use these in combination with the grid system's columns to achieve a better effect. There's an example below, after the other size variants for the cards. Have a look.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card small">
|
||||||
|
<h2> Small</h2>
|
||||||
|
<p>There are also <code>.small</code> cards. Tiny, cute, small cards.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card large">
|
||||||
|
<div class="section">
|
||||||
|
<h2> Large</h2>
|
||||||
|
<hr>
|
||||||
|
<p>And, of course, there are <code>.large</code> cards.</p>
|
||||||
|
<p>Because you'll need them.</p><br>
|
||||||
|
</div>
|
||||||
|
<input class="section" placeholder="Enter some text here...">
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="section double-padded">
|
||||||
|
These cards work quite well together, no matter the size. Well, except the <code>.fluid</code> ones which should be used together, without the other cards. Unless you want a fluid card to act as a separator of sorts, which might be desirable. Just use them in columns, like we show you below, it's the best way. By the way, this was a <code>.double-padded</code> section.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12 col-md-3">
|
||||||
|
<div class="card fluid">
|
||||||
|
<h1 class="section double-padded">Card 1</h1>
|
||||||
|
<p>This is the first card. It is placed inside a column.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md">
|
||||||
|
<div class="card fluid">
|
||||||
|
<h1 class="section double-padded">Card 2</h1>
|
||||||
|
<p>This is the second card. It is placed inside a larger column. On smaller displays these will display like a list of cards.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-3">
|
||||||
|
<div class="card fluid">
|
||||||
|
<h1 class="section double-padded">Card 3</h1>
|
||||||
|
<p>This is the third card. It is placed inside a column.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h2>Tabs & accordions<small>Present content any way you like</small></h2>
|
||||||
|
<p><strong>mini.css</strong> provides you with a very modern tab component, that can easily be used for multiple things, like tabbed navigation, single collapses, accordion collapses and even image carousels. This might sound like a lot to do with one component, but the design behind it allows it to be truly versatile and replace all those components. To use the tab component, simply create a container using a <code><div></code> with the <code>.tabs</code> class. Populate it with <code><input type="radio"></code>s, each followed by a linked <code><label></code> and another <code><div></code> which includes the tab's contents. If you want to create an accordion add the <code>.stacked</code> class to the container. The same thing works for collapses as well. Accordions and collapses can also use <code><input type="checkbox"></code>s instead. Carousels can be created similarly, remember to add images to the inner content <code><div></code> and you're good to go. You can see some examples below:</p><br>
|
||||||
|
<div class="tabs stacked">
|
||||||
|
<input type="checkbox" id="collapse" autocomplete="off">
|
||||||
|
<label for="collapse">Single collapse</label>
|
||||||
|
<div>
|
||||||
|
<p>This is some content you can hide and show at will using the above label. Isn't that useful?</p>
|
||||||
|
</div>
|
||||||
|
</div><br>
|
||||||
|
<div class="tabs stacked">
|
||||||
|
<input type="radio" name="accordion" id="a1" autocomplete="off" checked>
|
||||||
|
<label for="a1">Accordion section 1</label>
|
||||||
|
<div>
|
||||||
|
<h3>Section 1 - The amazing versatility of tabs</h3>
|
||||||
|
<p>Yes, this is still based on tabs. Isn't it wonderful how many things you can accomplish using one simple component?</p>
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="accordion" id="a2" autocomplete="off">
|
||||||
|
<label for="a2">Accordion section 2</label>
|
||||||
|
<div>
|
||||||
|
<h3>Section 2 - How accordions work</h3>
|
||||||
|
<p>Accordions are very similar to collapses. Just add multiple <code><input type="radio"></code>s, along with their content and you are ready to go.</p>
|
||||||
|
</div>
|
||||||
|
</div><br>
|
||||||
|
<div class="tabs">
|
||||||
|
<input type="radio" name="tabdemo" id="tab1" checked>
|
||||||
|
<label for="tab1">Tab 1</label>
|
||||||
|
<div>
|
||||||
|
<h3>Tab 1</h3>
|
||||||
|
<p>This is the first tab's content.</p>
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="tabdemo" id="tab2">
|
||||||
|
<label for="tab2">Tab 2</label>
|
||||||
|
<div>
|
||||||
|
<h3>Tab 2</h3>
|
||||||
|
<p>This is the second tab's content.</p>
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="tabdemo" id="tab3">
|
||||||
|
<label for="tab3">Tab 3</label>
|
||||||
|
<div>
|
||||||
|
<h3>Tab 3</h3>
|
||||||
|
<p>This is the third tab's content.</p>
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="tabdemo" id="tab4">
|
||||||
|
<label for="tab4">Tab 4</label>
|
||||||
|
<div>
|
||||||
|
<h3>Tab 4</h3>
|
||||||
|
<p>This is the fourth tab's content.</p>
|
||||||
|
</div>
|
||||||
|
</div><br>
|
||||||
|
<div class="tabs">
|
||||||
|
<input type="radio" name="carousel" id="car1" checked>
|
||||||
|
<label for="car1">Image 1</label>
|
||||||
|
<div>
|
||||||
|
<img src="catdemo.jpg" style="height: 240px; width: auto;">
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="carousel" id="car2">
|
||||||
|
<label for="car2">Image 2</label>
|
||||||
|
<div>
|
||||||
|
<img src="catdemo.jpg" style="height: 480px; width: auto">
|
||||||
|
</div>
|
||||||
|
<input type="radio" name="carousel" id="car3">
|
||||||
|
<label for="car3">Image 3</label>
|
||||||
|
<div>
|
||||||
|
<img src="catdemo.jpg" style="height: 720px; width: auto">
|
||||||
|
</div>
|
||||||
|
</div><br>
|
||||||
|
<h2>Spinners<small>Loading with style</small></h2>
|
||||||
|
<p>Finally, <strong>mini.css</strong> provides you with a couple of spinner variations, <code>.spinner-dot</code> and <code>.spinner-donut</code>. Simply apply these to a <code><div></code> and you are ready to go. Both are showcased below:</p>
|
||||||
|
<p>This is some text with a <code>.spinner-dot</code> spinner. These spinners are designed with normal paragraphs in mind, so some tweaking of the component itself and/or the way it is presented might be requird. Loading looks like this <span class="spinner-dot"></span></p>
|
||||||
|
<p>And this here is a <code>.spinner-donut</code> spinner. It is more versatile and it can also use a couple of variants like <code>.secondary</code> and <code>.tertiary</code>, as shown below:</p>
|
||||||
|
<div class="spinner-donut"></div>
|
||||||
|
<div class="spinner-donut secondary"></div>
|
||||||
|
<div class="spinner-donut tertiary"></div>
|
||||||
|
<div class="spinner-donut large"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer><strong>mini.css</strong> was designed and built 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>.</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1582
dist/mini-sucroa.css
vendored
Normal file
1582
dist/mini-sucroa.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
1
dist/mini-sucroa.min.css
vendored
Normal file
1
dist/mini-sucroa.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
614
src/flavors/mini-sucroa.scss
Normal file
614
src/flavors/mini-sucroa.scss
Normal file
@@ -0,0 +1,614 @@
|
|||||||
|
// This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
|
||||||
|
// Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
|
||||||
|
// structured like the flavor description below, will be included in your final CSS file.
|
||||||
|
/*
|
||||||
|
Flavor name: Sucroa (mini-sucroa)
|
||||||
|
Author: Angeliki Daskalakis
|
||||||
|
mini.css version: v2.0.2 (Fermion)
|
||||||
|
*/
|
||||||
|
// Google Fonts imports and usage
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
|
||||||
|
// font-family: 'Libre Baskerville', serif;
|
||||||
|
// font-family: 'Inconsolata', monospace;
|
||||||
|
// Basic rules for body and typography
|
||||||
|
$fore-color: #212121; // Text and general foreground color
|
||||||
|
$back-color: #f5f5f5; // Body background color
|
||||||
|
$base-font-family: '\"Libre Baskerville\", serif'; // Default font stack for all elements:
|
||||||
|
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||||
|
$base-font-size: 1em; // Default font sizing for all elements [2]
|
||||||
|
$base-line-height: 1.7; // Default line height for all elements.
|
||||||
|
$body-margin: 0; // Margin for the body
|
||||||
|
$apply-defaults-to-all: true; // Should default values be applied to all
|
||||||
|
// elements? (`true` or `false`) [3]
|
||||||
|
$h1-font-size: 2.2em; // Font size of h1
|
||||||
|
$h2-font-size: 1.7em; // Font size for h2
|
||||||
|
$h3-font-size: 1.4em; // Font size for h3
|
||||||
|
$h4-font-size: 1.2em; // Font size for h4
|
||||||
|
$h5-font-size: 1em; // Font size for h5
|
||||||
|
$h6-font-size: 0.9em; // Font size for h6
|
||||||
|
$heading-line-height: 1.2em; // Line height for all headings
|
||||||
|
$heading-margin: 12px 10px; // Margin for all headings
|
||||||
|
$heading-font-weight: 500; // Font weight for all headings
|
||||||
|
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||||
|
$make-heading-smalltext-block: true; // Should <small> elements in headings
|
||||||
|
// be displayed as blocks (`true`/`false`) [4]
|
||||||
|
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
||||||
|
$heading-smalltext-b-top-margin:-2px; // Top margin of block <small> elements in headings
|
||||||
|
$paragraph-margin: 4px 10px; // Margin for <p> elements
|
||||||
|
$list-margin: 4px 10px 10px; // Margin for <ol> and <ul> elements
|
||||||
|
$list-left-padding: 32px; // Left padding for <ol> and <ul> elements
|
||||||
|
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||||
|
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||||
|
$horizontal-rule-margin: 8px; // <hr> margin
|
||||||
|
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used
|
||||||
|
// in the <hr> element's border-top)
|
||||||
|
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
|
||||||
|
// <hr> element (`true`/`false`) [5]
|
||||||
|
$horizontal-rule-fancy-gradient:"to right, #bdbdbd, #616161, #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: 8px 10px; // Margin for <blockquote>
|
||||||
|
$blockquote-padding: 6px 10px 24px; // Padding for <blockquote>
|
||||||
|
$blockquote-sidebar-style: 3px solid #616161; // Style for the sidebar of <blockquote>
|
||||||
|
$blockquote-cite-font-size: 0.85em; // Font size for citation of <blockquote>
|
||||||
|
$blockquote-cite-fore-color: #616161; // Text color for citation of <blockquote>
|
||||||
|
$blockquote-cite-left-position: 10px; // Left padding for citation of <blockquote>
|
||||||
|
$blockquote-cite-bottom-position: // Bottom padding for citation of <blockquote>
|
||||||
|
0;
|
||||||
|
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||||
|
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
|
||||||
|
$blockquote-box-shadow: // Box shadow for <blockquote>
|
||||||
|
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
|
$use-default-code-fonts: false; // Should default font choice (monospace) be
|
||||||
|
// used for code elements? (`true`/`false`) [6]
|
||||||
|
$code-font-family: '\"Inconsolata\", monospace, monospace'; // Fonts for code elements if not default
|
||||||
|
$code-element-padding: 2px 4px; // Padding for <code>
|
||||||
|
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||||
|
$code-element-back-color: #e0e0e0; // Background color for <code>
|
||||||
|
$code-element-border-style: 0; // Border style for <code>
|
||||||
|
$code-element-border-radius: 2px; // Border radius for <code>
|
||||||
|
$code-element-box-shadow: // Box shadow for <code>
|
||||||
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
|
$pre-element-padding: 12px; // Padding for <pre>
|
||||||
|
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||||
|
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||||
|
$pre-element-border-style: 0; // Border style for <pre>
|
||||||
|
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
|
||||||
|
$pre-element-margin: 8px 10px; // Margin for <pre>
|
||||||
|
$pre-element-box-shadow: // Box shadow for <pre>
|
||||||
|
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
|
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
|
||||||
|
// left side of <pre> (`true`/`false`) [7]
|
||||||
|
$pre-element-sidebar-style: 3px solid #1565c0; // Style of the sidebar of <pre>
|
||||||
|
$kbd-element-padding: 2px 4px; // Padding for <kbd>
|
||||||
|
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
|
||||||
|
$kbd-element-back-color: $fore-color; // Background color for <kbd>
|
||||||
|
$kbd-element-border-style: 0; // Border style for <kbd>
|
||||||
|
$kbd-element-border-radius: 2px; // Border radius for <kbd>
|
||||||
|
$kbd-element-box-shadow: // Box shadow for <kbd>
|
||||||
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
|
$style-samp-element: false; // Should styles for <samp> be included?
|
||||||
|
// (`true`/`false`) [8]
|
||||||
|
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||||
|
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||||
|
//$samp-element-back-color: #2196f3; // Background color for <samp>
|
||||||
|
//$samp-element-border-style: 0; // Border style for <samp>
|
||||||
|
//$samp-element-border-radius: 2px; // Border radius for <samp>
|
||||||
|
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn>
|
||||||
|
// be included (`true`/`false`) [9]
|
||||||
|
$small-font-size: 75%; // Font size for <small> elements
|
||||||
|
$sup-font-size: 75%; // Font size for <sup> elements
|
||||||
|
$sub-font-size: 75%; // Font size for <sub> elements
|
||||||
|
$sup-top: -8px; // <sup> top
|
||||||
|
$sub-bottom: -4px; // <sub> bottom
|
||||||
|
$link-fore-color: #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
|
||||||
|
// Notes:
|
||||||
|
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||||
|
// element's font sizing.
|
||||||
|
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||||
|
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||||
|
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||||
|
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||||
|
// to elements manually.
|
||||||
|
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||||
|
// the main heading and the 2 values specified below will apply.
|
||||||
|
// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and
|
||||||
|
// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead.
|
||||||
|
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||||
|
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||||
|
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||||
|
// be applied as a left border for the <pre> elements.
|
||||||
|
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||||
|
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||||
|
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||||
|
// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included.
|
||||||
|
// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal
|
||||||
|
// color, as defined in $link-fore-color.
|
||||||
|
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
|
||||||
|
// focused. Otherwise, the color specified in $link-hover-fore-color will be used.
|
||||||
|
// Variables for grid elements
|
||||||
|
$use-four-step-grid: false; // Should the old 4-step grid system be used
|
||||||
|
// instead of the new (`true`/`false`) [1]
|
||||||
|
$grid-container-name: 'container'; // Class name for the grid container
|
||||||
|
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
|
||||||
|
$grid-row-name: 'row'; // Class name for the grid's rows
|
||||||
|
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns
|
||||||
|
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||||
|
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
|
||||||
|
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
|
||||||
|
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
|
||||||
|
$grid-column-count: 12; // Number of columns in the grid (integer value only)
|
||||||
|
$grid-column-padding: 0 4px; // Padding for the columns of the grid
|
||||||
|
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
|
||||||
|
//$grid-small-breakpoint: 480px; // Small screen breakpoint for 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.
|
||||||
|
// Variables for navigational elements
|
||||||
|
$header-height: 44px; // Height for <header>
|
||||||
|
$header-back-color: #263238; // Background color for <header>
|
||||||
|
$header-fore-color: #fafafa; // Text color for <header>
|
||||||
|
$header-border-style: 0; // Border style for <header>
|
||||||
|
$header-margin: 0; // Margin for <header>
|
||||||
|
$header-padding: 2px 8px; // Padding for <header>
|
||||||
|
$header-box-shadow: // Box shadow for <header>
|
||||||
|
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||||
|
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||||
|
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||||
|
$header-logo-line-height: 1.2; // Line height for <header>'s logo
|
||||||
|
$header-logo-margin: 1px 6px 1px 1px; // Margin for <header>'s logo
|
||||||
|
$header-logo-padding: 3px 0 0; // Padding for <header>'s logo
|
||||||
|
$header-link-hover-color: #37474f; // Hover color for <header>'s links
|
||||||
|
$header-link-margin: 2px 0 0; // Margin for <header>'s links
|
||||||
|
$nav-back-color: #eceff1; // Background for <nav>
|
||||||
|
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||||
|
$nav-border-style: 1px solid #bdbdbd; // Border style for <nav>
|
||||||
|
$nav-border-radius: 0; // Border radius for <nav>
|
||||||
|
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
|
||||||
|
$nav-margin: 2px; // Margin for <nav>
|
||||||
|
$nav-box-shadow: // Box shadow for <nav>
|
||||||
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
$nav-link-fore-color: #1565c0; // Text color for links in <nav>
|
||||||
|
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||||
|
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||||
|
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
|
||||||
|
$footer-back-color: #263238; // Background color for <footer>
|
||||||
|
$footer-fore-color: #fafafa; // Text color for <footer>
|
||||||
|
$footer-border-style: 0; // Border stye for <footer>
|
||||||
|
$footer-font-size: 85%; // Font size for <footer>
|
||||||
|
$footer-margin: 18px 0 0; // Margin for <footer>
|
||||||
|
$footer-padding: 22px 10px 12px; // Padding for <footer>
|
||||||
|
$footer-link-fore-color: #039be5; // Text color for links in <footer>
|
||||||
|
// Variables for forms and inputs
|
||||||
|
$form-back-color: #eeeeee; // Background color for forms
|
||||||
|
$form-fore-color: $fore-color; // Text color for forms
|
||||||
|
$form-border-style: 1px solid #bdbdbd; // Border style for forms
|
||||||
|
$form-border-radius: 0; // Border radius for forms
|
||||||
|
$form-margin: 8px; // Margin for forms
|
||||||
|
$form-padding: 12px 10px 18px; // Padding for forms
|
||||||
|
$form-box-shadow: // Box shadow for forms
|
||||||
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||||
|
$fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset
|
||||||
|
$fieldset-border-radius: 2px; // Border radius for fieldset
|
||||||
|
$fieldset-margin: 2px; // Margin for fieldset
|
||||||
|
$fieldset-padding: 6px 8px 8px; // Padding for fieldset
|
||||||
|
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||||
|
$legend-font-size: 0.925em; // Font size for legend
|
||||||
|
$legend-fore-color: $form-fore-color; // Text color for legend
|
||||||
|
$legend-padding: 2px 4px; // Padding for legend
|
||||||
|
$input-group-name: 'input-group'; // Class for input groups
|
||||||
|
$input-back-color: #fafafa; // Background for input
|
||||||
|
$input-fore-color: $fore-color; // Text color for input
|
||||||
|
$input-border-style: 1px solid #bdbdbd; // Border style for input
|
||||||
|
$input-border-radius: 1px; // Border radius for input
|
||||||
|
$input-margin: 2px; // Margin for input
|
||||||
|
$input-padding: 8px 12px; // padding for input
|
||||||
|
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||||
|
$input-invalid-border-color: #d32f2f; // Border color for invalid input
|
||||||
|
$input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||||
|
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
||||||
|
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
||||||
|
$input-placeholder-fore-color: #616161; // Text color for input placeholder
|
||||||
|
$button-back-color: #bdbdbd; // Back color for button elements
|
||||||
|
$button-back-opacity: 0.65; // Background opacity for button elements
|
||||||
|
$button-hover-back-opacity: 0.8; // Background opacity for button elements
|
||||||
|
// on hover or focus
|
||||||
|
$button-fore-color: $fore-color; // Text color for button elements
|
||||||
|
$button-border-style: 0; // Border style for button elements
|
||||||
|
$button-border-radius: 2px; // Border radius for button elements
|
||||||
|
$button-padding: 8px 12px; // Padding for button elements
|
||||||
|
$button-margin: 8px; // Margin for button elements
|
||||||
|
$button-box-shadow: // Box shadow for buttons
|
||||||
|
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
|
$button-disabled-opacity: 0.65; // Disabled button elements opacity
|
||||||
|
$button-class-name: 'button'; // Class for custom button elements
|
||||||
|
$button-group-name: 'button-group'; // Class for button groups
|
||||||
|
$button-group-border-style: 1px solid #9e9e9e; // Border style for button groups
|
||||||
|
$button-group-margin: $button-margin; // Margin for button groups
|
||||||
|
$button-group-box-shadow: // Box shadow for button groups
|
||||||
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||||
|
$hide-file-inputs: true; // Should a style be added that makes all
|
||||||
|
// <input>s of type `file` hidden?
|
||||||
|
// (`true`/`false`) [1]
|
||||||
|
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||||
|
$button-variant1-back-color: #0277bd; // Background color for button variant 1
|
||||||
|
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||||
|
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
|
||||||
|
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.85; // Background opacity for button variant 2
|
||||||
|
$button-variant2-hover-back-opacity: // Background opacity for button variant 2
|
||||||
|
1; // 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: #689f38; // Background color for button variant 3
|
||||||
|
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
|
||||||
|
$button-variant3-hover-back-opacity: // Background opacity for button variant 3
|
||||||
|
1; // 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: $fore-color; // Background color for button variant 4
|
||||||
|
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||||
|
$button-variant4-hover-back-opacity: // Background opacity for button variant 4
|
||||||
|
0.9; // 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: 4px 6px; // Padding for button style 1
|
||||||
|
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||||
|
$button-style2-name: 'large'; // Class name for button style 2
|
||||||
|
$button-style2-border-style: 0; // Border style for button style 2
|
||||||
|
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||||
|
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||||
|
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||||
|
$checkbox-size: 16px; // Size for checkbox/radio [2]
|
||||||
|
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||||
|
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||||
|
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
|
||||||
|
$checkbox-border-color: #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: 3px; // Bottom spacing for checkbox/radio
|
||||||
|
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
|
||||||
|
// Notes:
|
||||||
|
// [1] - 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.
|
||||||
|
// [2] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||||
|
// Variables for responsive tables
|
||||||
|
$table-border-style: 1px solid #bdbdbd; // Border style for <table> and children
|
||||||
|
$table-border-radius: 0; // Border radius for <table> and children
|
||||||
|
$table-margin: 0 auto; // Margin for <table>
|
||||||
|
$table-box-shadow: // Box shadow for <table>
|
||||||
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
$table-caption-font-size: 1.5em; // Font size for <caption>
|
||||||
|
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
|
||||||
|
$table-row-padding: 8px; // Padding for <tr> - both views
|
||||||
|
$table-column-padding: 10px; // Padding for <td> and <th> - desktop view
|
||||||
|
$table-head-back-color: #e0e0e0; // Background color for <th>
|
||||||
|
$table-head-fore-color: $fore-color; // Tex 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: 10px; // Space between <tr> cards - mobile view
|
||||||
|
$table-mobile-card-label: 'data-label'; // Attribute used to replace column headers
|
||||||
|
// in mobile view [1]
|
||||||
|
$table-mobile-label-font-weight:$bold-font-weight; // Font weight for mobile headers
|
||||||
|
$table-horizontal-breakpoint: 768px; // Breakpoint for <table> horizontal view
|
||||||
|
$table-horizontal-name: 'horizontal'; // Class name for <table> horizontal 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: // Alternate background color for <td> in
|
||||||
|
#eeeeee; // 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.
|
||||||
|
// 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 #9e9e9e; // Border style for cards
|
||||||
|
$card-border-radius: 0; // Border radius for cards
|
||||||
|
$card-margin: 2px 10px 20px; // Margin for cards
|
||||||
|
$card-box-shadow: // Box shadow for cards
|
||||||
|
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||||
|
$card-section-name: 'section'; // Class name for card sections
|
||||||
|
$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections
|
||||||
|
$card-section-padding: 6px 8px 6px; // Padding for card sections
|
||||||
|
$card-section-media-name: 'media'; // Class name for card media sections
|
||||||
|
$card-section-media-height: 200px; // Height for card media setions
|
||||||
|
$card-normal-width: 320px; // Width for normal cards
|
||||||
|
$card-size1-name: 'large'; // Class name for large cards
|
||||||
|
$card-size1-width: 480px; // Width for large cards
|
||||||
|
$card-size2-name: 'small'; // Class name for small cards
|
||||||
|
$card-size2-width: 240px; // Width for small cards
|
||||||
|
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||||
|
$card-size3-width: 100%; // Width for fluid cards
|
||||||
|
$card-style1-name: 'inverse'; // Class name for card style 1
|
||||||
|
$card-style1-back-color: $fore-color; // Background color for card style 1
|
||||||
|
$card-style1-fore-color: #fafafa; // Text color for card style 1
|
||||||
|
$card-style1-border-style: 1px solid #424242; // Border style for card style 1
|
||||||
|
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||||
|
$card-style1-section-border-style: // Border style for card style 1 sections
|
||||||
|
1px solid #616161;
|
||||||
|
$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: 10px 12px 10px; // Padding for card section padding style 1
|
||||||
|
// Notes:
|
||||||
|
// [1] - The cards module depends heavily on the grid system module.
|
||||||
|
// Variables for tabs
|
||||||
|
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||||
|
$tab-container-box-shadow: // Box shadow for the tabs' container
|
||||||
|
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||||
|
$tab-label-back-color: #e0e0e0; // 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: 8px 12px; // Padding for tabs' labels
|
||||||
|
$tab-label-height: 26px; // Height for tabs' labels
|
||||||
|
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs
|
||||||
|
$tab-border-radius: 0; // Border radius for tabs
|
||||||
|
$tab-panel-back-color: #fafafa; // Background color for tabs' panels
|
||||||
|
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||||
|
$tab-panel-padding: 8px; // Padding for tabs' panels
|
||||||
|
$tab-panel-height: 400px; // Height for tabs' panels
|
||||||
|
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
|
||||||
|
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||||
|
// Variables for contextual background elements and alerts
|
||||||
|
$mark-back-color: #0277bd; // Background color for <mark>
|
||||||
|
$mark-fore-color: #fafafa; // Text color for <mark>
|
||||||
|
$mark-font-size: 95%; // Font size for <mark>
|
||||||
|
$mark-line-height: 1; // Line height for <mark>
|
||||||
|
$mark-border-style: 0; // Border style for <mark>
|
||||||
|
$mark-border-radius: 2px; // Border radius for <mark>
|
||||||
|
$mark-padding: 2px 4px; // Padding for <mark>
|
||||||
|
$mark-margin: 0; // Margin for <mark>
|
||||||
|
$mark-box-shadow: // Box shadow for <mark>
|
||||||
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
|
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||||
|
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
|
||||||
|
$mark-variant1-back-color: #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: 4px 8px; // Padding for <mark> style 1
|
||||||
|
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||||
|
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||||
|
$mark-style2-border-radius: 2px; // Border radius for <mark> style 2
|
||||||
|
$mark-style2-padding: 5px; // Padding for <mark> style 2
|
||||||
|
$mark-style2-font-size: 100%; // Font size for <mark> style 2
|
||||||
|
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
|
||||||
|
$alert-name: 'alert'; // Class name for alerts
|
||||||
|
$alert-back-color: #eeeeee; // Background color for alerts
|
||||||
|
$alert-fore-color: $fore-color; // Text color for alerts
|
||||||
|
$alert-border-style: 1px solid #bdbdbd; // Border style for alerts
|
||||||
|
$alert-border-radius: 0; // Border radius for alerts
|
||||||
|
$alert-padding: 12px 16px; // Padding for alerts
|
||||||
|
$alert-margin: 1px 10px; // Margin for alerts
|
||||||
|
$alert-box-shadow: // Box shadow for alerts
|
||||||
|
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
||||||
|
$alert-include-animated: true; // Should animated alerts be included?
|
||||||
|
// (`true`/`false`) [1]
|
||||||
|
$alert-animated-class: 'animated'; // Class name for animated alerts
|
||||||
|
$alert-variant1-name: 'urgent'; // Class name for alert variant 1
|
||||||
|
$alert-variant1-back-color: #ffca28; // Background color for alert variant 1
|
||||||
|
$alert-variant2-name: 'critical'; // Class name for alert variant 2
|
||||||
|
$alert-variant2-back-color: #b71c1c; // Background color for alert variant 2
|
||||||
|
$alert-variant2-fore-color: #fafafa; // Text color for alert variant 2
|
||||||
|
$alert-style1-name: 'urgent'; // Class name for alert style 1
|
||||||
|
$alert-style1-border-style: 1px solid #ff8f00; // Border style for alert style 1
|
||||||
|
$alert-style1-border-radius: $alert-border-radius; // Border radius for alert style 1
|
||||||
|
$alert-style2-name: 'critical'; // Class name for alert style 2
|
||||||
|
$alert-style2-border-style: 1px solid #d50000; // Border style for alert style 2
|
||||||
|
$alert-style2-border-radius: $alert-border-radius; // Border radius for alert style 2
|
||||||
|
// Notes:
|
||||||
|
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
|
||||||
|
// will be used to determine the class that will be used for animated alerts.
|
||||||
|
// Variables for progress elements and spinners
|
||||||
|
$progress-back-color: #eeeeee; // Background color for <progress>
|
||||||
|
$progress-fore-color: #01579b; // Progress bar color for <progress>
|
||||||
|
$progress-height: 14px; // Height of <progress>
|
||||||
|
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||||
|
$progress-border-style: 0; // Border style for <progress>
|
||||||
|
$progress-border-radius: 1px; // Border radius for the <progress> container
|
||||||
|
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
||||||
|
$progress-left-right-margin: 8px; // Left and right margin for <progress>
|
||||||
|
$progress-box-shadow: // Box shadow for <progress>
|
||||||
|
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
||||||
|
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||||
|
$progress-inline-width: 60%; // Width for inline <progress>
|
||||||
|
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||||
|
$progress-variant1-fore-color: #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
|
||||||
|
$progress-style1-name: 'nano'; // Class name for <progress> style 1
|
||||||
|
$progress-style1-height: 2px; // Height for <progress> style 1
|
||||||
|
$progress-style1-top-bottom-margin: // Top and bottom margin for <progress> style 1
|
||||||
|
0;
|
||||||
|
$progress-style1-left-right-margin: // Left and right margin for <progress> style 1
|
||||||
|
0;
|
||||||
|
$progress-style1-border-style: 0; // Border style for <progress> style 1
|
||||||
|
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
|
||||||
|
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||||
|
$spinner-donut-border-thickness:4px; // 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: 20px; // Size for donut spinner
|
||||||
|
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
|
||||||
|
$spinner-donut-variant1-back-color: // Background color for donut spinner variant 1
|
||||||
|
#ffebee;
|
||||||
|
$spinner-donut-variant1-fore-color: // Foreground color for donut spinner variant 1
|
||||||
|
#c62828;
|
||||||
|
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
||||||
|
$spinner-donut-variant2-back-color: // Background color for donut spinner variant 2
|
||||||
|
#e8f5e9;
|
||||||
|
$spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2
|
||||||
|
#2e7d32;
|
||||||
|
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
|
||||||
|
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1
|
||||||
|
$spinner-donut-style1-border-thickness: // Border thickness for donut spinner style 1
|
||||||
|
6px;
|
||||||
|
// 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: #e0e0e0; // Background color for breadcrumbs
|
||||||
|
$breadcrumbs-margin: 10px 8px; // Margin for breadcrumbs
|
||||||
|
$breadcrumbs-height: 32px; // Height of the breadcrumbs
|
||||||
|
$breadcrumbs-separator-width: 2px; // Width of the breadcrumbs' separator
|
||||||
|
$breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||||
|
$breadcrumbs-border-radius: 4px; // Border radius for breadcrumbs
|
||||||
|
$breadcrumbs-box-shadow: // Box shadow for breadcrumbs
|
||||||
|
0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.15);
|
||||||
|
$close-icon-name: 'close'; // Class name for close icon
|
||||||
|
$close-icon-size: 32px; // Size of the close icon
|
||||||
|
$close-icon-back-color: #e0e0e0; // 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: 2px; // Border radius for radial border style 1
|
||||||
|
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||||
|
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||||
|
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
|
||||||
|
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
|
||||||
|
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
|
||||||
|
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
|
||||||
|
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||||
|
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
|
||||||
|
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
|
||||||
|
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||||
|
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
||||||
|
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
||||||
|
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||||
|
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||||
|
$responsive-margin-medium-breakpoint: // Medium screen breakpoint for responsive margin
|
||||||
|
$grid-medium-breakpoint;
|
||||||
|
$responsive-margin-large-breakpoint: // Large screen breakpoint for responsive margin
|
||||||
|
$grid-large-breakpoint;
|
||||||
|
$responsive-margin-small-value: 4px; // Margin value for responsive margin on small screens
|
||||||
|
$responsive-margin-medium-value:6px; // Margin value for responsive margin on medium screens
|
||||||
|
$responsive-margin-large-value: 8px; // Margin value for responsive margin on large screens
|
||||||
|
$responsive-padding-name: 'responsive-padding'; // Class name for responsive padding
|
||||||
|
$responsive-padding-medium-breakpoint: // Medium screen breakpoint for responsive padding
|
||||||
|
$grid-medium-breakpoint;
|
||||||
|
$responsive-padding-large-breakpoint: // Large screen breakpoint for responsive padding
|
||||||
|
$grid-large-breakpoint;
|
||||||
|
$responsive-padding-small-value:2px 4px; // Padding value for responsive padding on small screens
|
||||||
|
$responsive-padding-medium-value: // Padding value for responsive padding on medium screens
|
||||||
|
4px 6px;
|
||||||
|
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
|
||||||
|
$float-prefix: 'float'; // Prefix for float classes
|
||||||
|
$clearfix-name: 'clearfix'; // Class name for clearfix
|
||||||
|
$center-block-name: 'center-block'; // Class name for center block
|
||||||
|
// 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/navigation';
|
||||||
|
@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/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-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-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
|
||||||
|
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
|
||||||
|
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
|
||||||
|
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
|
||||||
|
@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-progress-alt-style ($progress-style1-name, $progress-style1-height,
|
||||||
|
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
|
||||||
|
$progress-style1-border-style, $progress-style1-border-radius);
|
||||||
|
@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-medium-breakpoint,
|
||||||
|
$responsive-margin-large-breakpoint, $responsive-margin-small-value, $responsive-margin-medium-value,
|
||||||
|
$responsive-margin-large-value);
|
||||||
|
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
|
||||||
|
$responsive-padding-large-breakpoint, $responsive-padding-small-value, $responsive-padding-medium-value,
|
||||||
|
$responsive-padding-large-value);
|
||||||
|
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||||
|
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||||
|
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||||
|
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
|
||||||
|
@include make-floats ($float-prefix);
|
||||||
Reference in New Issue
Block a user