Flavor builder file added, flavors properly built (only default so far)
This commit is contained in:
Angelos Chalaris
parent
821b69336a
commit
bcbd2b2d11
17
README.md
17
README.md
|
|
@ -17,3 +17,20 @@ TODO:
|
||||||
- Modals (checkbox based)
|
- Modals (checkbox based)
|
||||||
- Labels and badges
|
- Labels and badges
|
||||||
- Pure css progress bars
|
- Pure css progress bars
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
HOMEWORK FOR AFTER THE HOLIDAYS:
|
||||||
|
|
||||||
|
- Make a set of pages for the live version like base-modules, customization, extra-modules to showcase the modules and not clutter the main page
|
||||||
|
- Link to said pages from main page (move the grid's stuff to the other page and also the minimal note with th two **)
|
||||||
|
- Move variables to a main file, cleanup the mini-default.scss and flavored csses etc, make it more consistent
|
||||||
|
- Update wiki with changes, write missing pages (documentation etc.)
|
||||||
|
- Add the missing extra components, try to stay below 5KB
|
||||||
|
- Add images and make two live pages to showcase vastly different flavors
|
||||||
|
- Make NiteOwl flavor (dark flavor, like the thing that cquanu (my star in html template) has for github, colors look cool)
|
||||||
|
- Make more flavors
|
||||||
|
- Update wiki punchline footer and README!
|
||||||
|
- Promote in reddit etc.
|
||||||
|
- Write a blog post about it
|
||||||
|
- Use it
|
||||||
1050
css/mini-full.css
1050
css/mini-full.css
File diff suppressed because it is too large
Load diff
1
css/mini-full.min.css
vendored
1
css/mini-full.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -32,8 +32,6 @@
|
||||||
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||||
<p>If you want to create your own flavor, get involved or report an issue, head over to <strong>mini.css</strong>'s <a href="https://github.com/Chalarangelo/mini.css">Github page</a>. If you want to give <strong>mini.css</strong> a try using the default flavor, paste the following code inside your HTML page's <code><head></code> tag:</p>
|
<p>If you want to create your own flavor, get involved or report an issue, head over to <strong>mini.css</strong>'s <a href="https://github.com/Chalarangelo/mini.css">Github page</a>. If you want to give <strong>mini.css</strong> a try using the default flavor, paste the following code inside your HTML page's <code><head></code> tag:</p>
|
||||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://github.com/Chalarangelo/mini.css/tree/master/flavors/mini-default.min.css"></pre>
|
<pre style="overflow: auto;"><link rel="stylesheet" href="https://github.com/Chalarangelo/mini.css/tree/master/flavors/mini-default.min.css"></pre>
|
||||||
|
|
||||||
<!-- <p>TODO: INSERT IMAGE SHOWCASING IT HERE!</p> -->
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<h2 id="why-mini-css">Why mini.css?</h2><hr>
|
<h2 id="why-mini-css">Why mini.css?</h2><hr>
|
||||||
|
|
@ -63,6 +61,73 @@
|
||||||
<h3>Responsive grid</h3>
|
<h3>Responsive grid</h3>
|
||||||
<p><strong>mini.css</strong> comes with a reponsive grid that lets you build pages that look great on all devices without having to constantly tweak your page's layout. It can be customized to as many columns as you like, too, and it's only about 450 bytes.<sup>*</sup></p>
|
<p><strong>mini.css</strong> comes with a reponsive grid that lets you build pages that look great on all devices without having to constantly tweak your page's layout. It can be customized to as many columns as you like, too, and it's only about 450 bytes.<sup>*</sup></p>
|
||||||
|
|
||||||
|
<h4><strong>Grid example (12-columns)</strong><sup>**</sup></h4>
|
||||||
|
<div class="grid-container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div>
|
||||||
|
<div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div><div class="col xs-1 bordered">1/12</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div><div class="col xs-2 bordered">1/6</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-3 bordered">1/4</div><div class="col xs-3 bordered">1/4</div><div class="col xs-3 bordered">1/4</div><div class="col xs-3 bordered">1/4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-4 bordered">1/3</div><div class="col xs-4 bordered">1/3</div><div class="col xs-4 bordered">1/3</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-6 bordered">1/2</div><div class="col xs-6 bordered">1/2</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-12 bordered">1/1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h4><strong>Code</strong></h4>
|
||||||
|
<pre><div class="grid-container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
<div class="col xs-1"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-2"></div>
|
||||||
|
<div class="col xs-2"></div>
|
||||||
|
<div class="col xs-2"></div>
|
||||||
|
<div class="col xs-2"></div>
|
||||||
|
<div class="col xs-2"></div>
|
||||||
|
<div class="col xs-2"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-3"></div>
|
||||||
|
<div class="col xs-3"></div>
|
||||||
|
<div class="col xs-3"></div>
|
||||||
|
<div class="col xs-3"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-4"></div>
|
||||||
|
<div class="col xs-4"></div>
|
||||||
|
<div class="col xs-4"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-6"></div>
|
||||||
|
<div class="col xs-6"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col xs-12"></div>
|
||||||
|
</div>
|
||||||
|
</div></pre>
|
||||||
|
|
||||||
|
|
||||||
<h3>Navigation</h3>
|
<h3>Navigation</h3>
|
||||||
<p>Navigation is made simple with the navigation bar module, that lets you build customized navigation bars that work great in mobile devices. These navigation elements are probably one of the heavier modules at about 530 bytes.<sup>*</sup></p>
|
<p>Navigation is made simple with the navigation bar module, that lets you build customized navigation bars that work great in mobile devices. These navigation elements are probably one of the heavier modules at about 530 bytes.<sup>*</sup></p>
|
||||||
|
|
||||||
|
|
@ -78,7 +143,8 @@
|
||||||
<h3>Utilities and helper classes</h3>
|
<h3>Utilities and helper classes</h3>
|
||||||
<p>Lots of things that you might use quite often are not included in the framework's base module. This is where the utilities module comes in with a variety of classes for quick floats, centering content, making generic borders and simple icons or just hiding elements. This module is entirely customizable, allowing you to pick any pieces you like, but in total its size is about 450 bytes.<sup>*</sup></p>
|
<p>Lots of things that you might use quite often are not included in the framework's base module. This is where the utilities module comes in with a variety of classes for quick floats, centering content, making generic borders and simple icons or just hiding elements. This module is entirely customizable, allowing you to pick any pieces you like, but in total its size is about 450 bytes.<sup>*</sup></p>
|
||||||
|
|
||||||
<small>(*): Size metrics are based on gzipped size of each module for the default flavor. Your flavor might be larger or smaller, depending on how you use the variables provided. However, for most cases, the provided metrics are representative of your final size. Combining all modules might make your final gzipped CSS file smaller than the sum of the modules' sizes. </small>
|
<small>(*): Size metrics are based on gzipped size of each module for the default flavor. Your flavor might be larger or smaller, depending on how you use the variables provided. However, for most cases, the provided metrics are representative of your final size. Combining all modules might make your final gzipped CSS file smaller than the sum of the modules' sizes. </small><br>
|
||||||
|
<small>(**): Provided examples are based on the naming conventions and the styling of the default flavor. If you create your own flavor, results might vary. </small>
|
||||||
<br><br>
|
<br><br>
|
||||||
|
|
||||||
<h2 id="customization">Customization</h2><hr>
|
<h2 id="customization">Customization</h2><hr>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
|
/*
|
||||||
|
Flavor name: Default (mini-default)
|
||||||
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
|
mini.css version: v1.0 (September, 2016)
|
||||||
|
*/
|
||||||
/*
|
/*
|
||||||
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
||||||
Set body colors and margin.
|
Set body colors and margin.
|
||||||
|
|
@ -384,28 +389,28 @@ textarea {
|
||||||
background: #eaeaea;
|
background: #eaeaea;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
.btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus {
|
.btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus {
|
||||||
background: #d7d7d7; }
|
background: #fdfdfd; }
|
||||||
.btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] {
|
.btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.65; }
|
opacity: 0.65; }
|
||||||
|
|
||||||
.btn.blue, a.btn.blue, a.btn.blue:visited {
|
.btn.blue, a.btn.blue, a.btn.blue:visited {
|
||||||
color: #eeeeee;
|
color: #eeeeee;
|
||||||
background: #337ab7; }
|
background: #3f84b3; }
|
||||||
.btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus {
|
.btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus {
|
||||||
background: #2b6699; }
|
background: #5597c3; }
|
||||||
|
|
||||||
.btn.green, a.btn.green, a.btn.green:visited {
|
.btn.green, a.btn.green, a.btn.green:visited {
|
||||||
color: #eeeeee;
|
color: #eeeeee;
|
||||||
background: #5cb85c; }
|
background: #2db747; }
|
||||||
.btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus {
|
.btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus {
|
||||||
background: #48a648; }
|
background: #3bcf57; }
|
||||||
|
|
||||||
.btn.red, a.btn.red, a.btn.red:visited {
|
.btn.red, a.btn.red, a.btn.red:visited {
|
||||||
color: #eeeeee;
|
color: #eeeeee;
|
||||||
background: #d9534f; }
|
background: #ea4848; }
|
||||||
.btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus {
|
.btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus {
|
||||||
background: #d23430; }
|
background: #ee6a6a; }
|
||||||
|
|
||||||
.btn.lg {
|
.btn.lg {
|
||||||
padding: 9px 15px;
|
padding: 9px 15px;
|
||||||
|
|
@ -725,28 +730,158 @@ textarea {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
empty-cells: show;
|
empty-cells: show;
|
||||||
border: 1px solid #777; }
|
border: 1px solid #bdbdbd; }
|
||||||
.tbl td, .tbl th {
|
.tbl td, .tbl th {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
border-left: 1px solid #777;
|
border-left: 1px solid #bdbdbd;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0.5em; }
|
padding: 0.5em; }
|
||||||
.tbl thead {
|
.tbl thead {
|
||||||
background-color: #4e4e4e;
|
background-color: #d9d9d9;
|
||||||
color: #f5f5f5;
|
color: #111;
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
.tbl tbody {
|
.tbl tbody {
|
||||||
background-color: #ddd;
|
background-color: #f5f5f5;
|
||||||
color: #111; }
|
color: #111; }
|
||||||
.tbl tbody tr:nth-child(2n-1) {
|
.tbl tbody tr:nth-child(2n-1) {
|
||||||
background-color: #f4f4f4; }
|
background-color: #ececec; }
|
||||||
.tbl.hor td, .tbl.hor th {
|
.tbl.hor td, .tbl.hor th {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
border-bottom: 1px solid #777; }
|
border-bottom: 1px solid #bdbdbd; }
|
||||||
.tbl.bor td, .tbl.bor th {
|
.tbl.bor td, .tbl.bor th {
|
||||||
border-bottom: 1px solid #777; }
|
border-bottom: 1px solid #bdbdbd; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Mixin for navigation bar and complementary styles.
|
||||||
|
Parameters:
|
||||||
|
- $nav-name : The class name for the navigation bar.
|
||||||
|
- $nav-vertical-name : The class name for the vertical style of the navigation bar.
|
||||||
|
- $nav-fixed-name : The class name for the fixed style of the navigation bar.
|
||||||
|
- $nav-logo-name : The class name for the logo item of the navigation bar.
|
||||||
|
- $nav-logo-size : The font-size of the logo item of the navigation bar.
|
||||||
|
- $nav-link-name : The class name for the navigation links of the navigation bar.
|
||||||
|
- $nav-padding : The padding of the elements of the navigation bar. [1]
|
||||||
|
- $nav-color : The text color of the navigation elements.
|
||||||
|
- $nav-bg-color : The background color of the navigation bar.
|
||||||
|
- $nav-hover-style : Hover/active/focus style of the navigation elements. [2]
|
||||||
|
- $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier.
|
||||||
|
- $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled.
|
||||||
|
- $nav-disabled-opacity : The opacity of the navigation elements when disabled.
|
||||||
|
- $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4]
|
||||||
|
- $grid-columns-total : Total amount fo columns in the used grid. [5]
|
||||||
|
- $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5]
|
||||||
|
- $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button.
|
||||||
|
- $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6]
|
||||||
|
- $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label.
|
||||||
|
- $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label.
|
||||||
|
Notes:
|
||||||
|
- [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed).
|
||||||
|
For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse
|
||||||
|
label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to
|
||||||
|
avoid CSS errors and ultimately the style not being applied to some elements.
|
||||||
|
- [2] : The values that $nav-hover-style can take are `lighten` and `darken`. The inside condition only
|
||||||
|
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
||||||
|
- [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values
|
||||||
|
are provided, due to the inside condition only checking for `left`, `right` will be used as the
|
||||||
|
default value.
|
||||||
|
- [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars
|
||||||
|
should not be affected as they are 100% width, meaning that anchoring to left or right should have
|
||||||
|
the same result.
|
||||||
|
- [5] : These values are used to make the navigation bar work better with the grid system. Values do not have
|
||||||
|
to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving
|
||||||
|
a small gap just before the third column in the grid. If no grid is specified, you can use percentage
|
||||||
|
values like 100 and 15 to get a 15% width for example.
|
||||||
|
- [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left`
|
||||||
|
and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be
|
||||||
|
used as a default if no valid value is specified.
|
||||||
|
*/
|
||||||
|
.nav {
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ddd; }
|
||||||
|
.nav .logo {
|
||||||
|
font-size: 135%;
|
||||||
|
color: #272727; }
|
||||||
|
.nav ul {
|
||||||
|
display: inline-block;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
.nav ul li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
white-space: nowrap; }
|
||||||
|
.nav ul li * {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px;
|
||||||
|
color: #272727;
|
||||||
|
margin: 0; }
|
||||||
|
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
||||||
|
color: #272727;
|
||||||
|
background: #cacaca; }
|
||||||
|
.nav ul li .link.disabled, .nav ul li .link[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.65; }
|
||||||
|
.nav.vertical ul {
|
||||||
|
display: block; }
|
||||||
|
.nav.vertical ul li {
|
||||||
|
display: block; }
|
||||||
|
.nav.vertical ul li * {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 0; }
|
||||||
|
.nav.fixed {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999;
|
||||||
|
width: 100%; }
|
||||||
|
.nav.fixed.vertical {
|
||||||
|
height: 100%;
|
||||||
|
width: 16.66667%; }
|
||||||
|
.nav.fixed.vertical ul {
|
||||||
|
width: 100%; }
|
||||||
|
.nav.fixed.vertical ul li {
|
||||||
|
display: block; }
|
||||||
|
.nav + label {
|
||||||
|
display: none;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 10px;
|
||||||
|
font-size: 1.75em;
|
||||||
|
padding: 8px;
|
||||||
|
color: #272727;
|
||||||
|
background-color: #ddd;
|
||||||
|
width: auto;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 0;
|
||||||
|
right: 0; }
|
||||||
|
.nav + label:before {
|
||||||
|
position: relative;
|
||||||
|
content: '\2630'; }
|
||||||
|
.nav + label:hover, .nav + label:active, .nav + label:focus {
|
||||||
|
background: #cacaca; }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav {
|
||||||
|
overflow: auto; }
|
||||||
|
.nav.fixed {
|
||||||
|
display: none; }
|
||||||
|
.nav.fixed + label {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
input[type="checkbox"]:checked + .nav.fixed {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%; }
|
||||||
|
input[type="checkbox"]:checked + .nav.fixed ul {
|
||||||
|
display: block; }
|
||||||
|
input[type="checkbox"]:checked + .nav.fixed ul li {
|
||||||
|
display: block; }
|
||||||
|
input[type="checkbox"]:checked + .nav.fixed ul li * {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 0; }
|
||||||
|
input[type="checkbox"]:checked + .nav.fixed + label:before {
|
||||||
|
content: '\00d7'; } }
|
||||||
/*
|
/*
|
||||||
Image thumbnail style mixin. [1]
|
Image thumbnail style mixin. [1]
|
||||||
Parameters:
|
Parameters:
|
||||||
|
|
@ -859,22 +994,22 @@ img.thumb {
|
||||||
border-radius: 50% !important; }
|
border-radius: 50% !important; }
|
||||||
|
|
||||||
.txt-blue {
|
.txt-blue {
|
||||||
color: #337ab7 !important; }
|
color: #3f84b3 !important; }
|
||||||
|
|
||||||
.txt-green {
|
.txt-green {
|
||||||
color: #5cb85c !important; }
|
color: #2db747 !important; }
|
||||||
|
|
||||||
.txt-red {
|
.txt-red {
|
||||||
color: #d9534f !important; }
|
color: #ea4848 !important; }
|
||||||
|
|
||||||
.bg-blue {
|
.bg-blue {
|
||||||
background-color: #337ab7 !important; }
|
background-color: #3f84b3 !important; }
|
||||||
|
|
||||||
.bg-green {
|
.bg-green {
|
||||||
background-color: #5cb85c !important; }
|
background-color: #2db747 !important; }
|
||||||
|
|
||||||
.bg-red {
|
.bg-red {
|
||||||
background-color: #d9534f !important; }
|
background-color: #ea4848 !important; }
|
||||||
|
|
||||||
.caret {
|
.caret {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -917,134 +1052,3 @@ img.thumb {
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none !important; }
|
display: none !important; }
|
||||||
|
|
||||||
/*
|
|
||||||
Mixin for navigation bar and complementary styles.
|
|
||||||
Parameters:
|
|
||||||
- $nav-name : The class name for the navigation bar.
|
|
||||||
- $nav-vertical-name : The class name for the vertical style of the navigation bar.
|
|
||||||
- $nav-fixed-name : The class name for the fixed style of the navigation bar.
|
|
||||||
- $nav-logo-name : The class name for the logo item of the navigation bar.
|
|
||||||
- $nav-logo-size : The font-size of the logo item of the navigation bar.
|
|
||||||
- $nav-link-name : The class name for the navigation links of the navigation bar.
|
|
||||||
- $nav-padding : The padding of the elements of the navigation bar. [1]
|
|
||||||
- $nav-color : The text color of the navigation elements.
|
|
||||||
- $nav-bg-color : The background color of the navigation bar.
|
|
||||||
- $nav-hover-style : Hover/active/focus style of the navigation elements. [2]
|
|
||||||
- $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier.
|
|
||||||
- $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled.
|
|
||||||
- $nav-disabled-opacity : The opacity of the navigation elements when disabled.
|
|
||||||
- $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4]
|
|
||||||
- $grid-columns-total : Total amount fo columns in the used grid. [5]
|
|
||||||
- $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5]
|
|
||||||
- $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button.
|
|
||||||
- $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6]
|
|
||||||
- $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label.
|
|
||||||
- $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label.
|
|
||||||
Notes:
|
|
||||||
- [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed).
|
|
||||||
For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse
|
|
||||||
label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to
|
|
||||||
avoid CSS errors and ultimately the style not being applied to some elements.
|
|
||||||
- [2] : The values that $nav-hover-style can take are `lighten` and `darken`. The inside condition only
|
|
||||||
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
|
|
||||||
- [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values
|
|
||||||
are provided, due to the inside condition only checking for `left`, `right` will be used as the
|
|
||||||
default value.
|
|
||||||
- [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars
|
|
||||||
should not be affected as they are 100% width, meaning that anchoring to left or right should have
|
|
||||||
the same result.
|
|
||||||
- [5] : These values are used to make the navigation bar work better with the grid system. Values do not have
|
|
||||||
to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving
|
|
||||||
a small gap just before the third column in the grid. If no grid is specified, you can use percentage
|
|
||||||
values like 100 and 15 to get a 15% width for example.
|
|
||||||
- [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left`
|
|
||||||
and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be
|
|
||||||
used as a default if no valid value is specified.
|
|
||||||
*/
|
|
||||||
.nav {
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: #222; }
|
|
||||||
.nav .logo {
|
|
||||||
font-size: 135%;
|
|
||||||
color: #fff; }
|
|
||||||
.nav ul {
|
|
||||||
display: inline-block;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
.nav ul li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap; }
|
|
||||||
.nav ul li * {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10px;
|
|
||||||
color: #fff;
|
|
||||||
margin: 0; }
|
|
||||||
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
|
||||||
color: #fff;
|
|
||||||
background: #353535; }
|
|
||||||
.nav ul li .link.disabled, .nav ul li .link[disabled] {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.65; }
|
|
||||||
.nav.vertical ul {
|
|
||||||
display: block; }
|
|
||||||
.nav.vertical ul li {
|
|
||||||
display: block; }
|
|
||||||
.nav.vertical ul li * {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 0; }
|
|
||||||
.nav.fixed {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 999;
|
|
||||||
width: 100%; }
|
|
||||||
.nav.fixed.vertical {
|
|
||||||
height: 100%;
|
|
||||||
width: 16.66667%; }
|
|
||||||
.nav.fixed.vertical ul {
|
|
||||||
width: 100%; }
|
|
||||||
.nav.fixed.vertical ul li {
|
|
||||||
display: block; }
|
|
||||||
.nav + label {
|
|
||||||
display: none;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 10px;
|
|
||||||
font-size: 1.75em;
|
|
||||||
padding: 10px;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #222;
|
|
||||||
width: auto;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1000;
|
|
||||||
top: 0;
|
|
||||||
right: 0; }
|
|
||||||
.nav + label:before {
|
|
||||||
position: relative;
|
|
||||||
content: '\2630'; }
|
|
||||||
.nav + label:hover, .nav + label:active, .nav + label:focus {
|
|
||||||
background: #353535; }
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.nav {
|
|
||||||
overflow: auto; }
|
|
||||||
.nav.fixed {
|
|
||||||
display: none; }
|
|
||||||
.nav.fixed + label {
|
|
||||||
display: block; }
|
|
||||||
|
|
||||||
input[type="checkbox"]:checked + .nav.fixed {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%; }
|
|
||||||
input[type="checkbox"]:checked + .nav.fixed ul {
|
|
||||||
display: block; }
|
|
||||||
input[type="checkbox"]:checked + .nav.fixed ul li {
|
|
||||||
display: block; }
|
|
||||||
input[type="checkbox"]:checked + .nav.fixed ul li * {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 0; }
|
|
||||||
input[type="checkbox"]:checked + .nav.fixed + label:before {
|
|
||||||
content: '\00d7'; } }
|
|
||||||
|
|
|
||||||
2
flavors/mini-default.min.css
vendored
2
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,42 +1,68 @@
|
||||||
// Base
|
//====================================================================
|
||||||
$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family
|
// This is the file you should edit to make the flavor you want.
|
||||||
$base-font-size: 1em; // Font-size
|
// Please read the instructions carefully.
|
||||||
$base-line-height: 1.5; // Line-height
|
//====================================================================
|
||||||
|
// !! IMPORTANT !!
|
||||||
|
// Please copy this file or rename it, if you want to keep the default
|
||||||
|
// flavor definitions file.
|
||||||
|
//====================================================================
|
||||||
|
// Update the comment below to include it in your flavor, providing the information
|
||||||
|
// you want along with your customized flavor. You can also delete it if you don't
|
||||||
|
// want it in your final CSS file.
|
||||||
|
/*
|
||||||
|
Flavor name: Default (mini-default)
|
||||||
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
|
mini.css version: v1.0 (September, 2016)
|
||||||
|
*/
|
||||||
|
// Variable definitions for the Base module (_base.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Basic rules for body
|
||||||
$body-margin: 0; // Margin for body
|
$body-margin: 0; // Margin for body
|
||||||
$body-bg-color: #f5f5f5; // Body background color
|
$body-bg-color: #f5f5f5; // Body background color
|
||||||
$body-color: #222; // Body text color
|
$body-color: #222; // Body text color
|
||||||
$header-line-height-multiplier: 0.8; // Multiplier for line height of headers
|
// Basic typography rules
|
||||||
$header-margin: 0.7em 0; // Margin for headers
|
$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family
|
||||||
$header-font-weight: 500; // Font weight for headers
|
$base-font-size: 1em; // Font-size
|
||||||
|
$base-line-height: 1.5; // Line-height
|
||||||
|
// Rules for headers (multipliers apply on top of the basic typography rules)
|
||||||
$h1-multiplier: 2; // Header 1 font-sze multiplier
|
$h1-multiplier: 2; // Header 1 font-sze multiplier
|
||||||
$h2-multiplier: 1.5; // Header 2 font-sze multiplier
|
$h2-multiplier: 1.5; // Header 2 font-sze multiplier
|
||||||
$h3-multiplier: 1.15; // Header 3 font-sze multiplier
|
$h3-multiplier: 1.15; // Header 3 font-sze multiplier
|
||||||
$h4-multiplier: 1; // Header 4 font-sze multiplier
|
$h4-multiplier: 1; // Header 4 font-sze multiplier
|
||||||
$h5-multiplier: 0.8; // Header 5 font-sze multiplier
|
$h5-multiplier: 0.8; // Header 5 font-sze multiplier
|
||||||
$h6-multiplier: 0.7; // Header 6 font-sze multiplier
|
$h6-multiplier: 0.7; // Header 6 font-sze multiplier
|
||||||
|
$header-line-height-multiplier: 0.8; // Multiplier for line height of headers
|
||||||
|
$header-margin: 0.7em 0; // Margin for headers
|
||||||
|
$header-font-weight: 500; // Font weight for headers
|
||||||
|
// Rules for small elements inside headers
|
||||||
$header-small-color: lighten($body-color, 20%); // Header small text color
|
$header-small-color: lighten($body-color, 20%); // Header small text color
|
||||||
$header-small-font-weight: 200; // Header small font weight
|
$header-small-font-weight: 200; // Header small font weight
|
||||||
|
// Rules for horizontal rules
|
||||||
$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule
|
$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule
|
||||||
$hr-margin: 0.7em 0; // Margin for horizontal rule
|
$hr-margin: 0.7em 0; // Margin for horizontal rule
|
||||||
$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule
|
$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule
|
||||||
$small-font-size: 75%; // Font size for small, sub and sup elements
|
// Common content typography rules (paragraphs, lists etc.)
|
||||||
$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements
|
$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements
|
||||||
|
$small-font-size: 75%; // Font size for small, sub and sup elements
|
||||||
|
$sub-bottom: -0.25em; // Sub bottom
|
||||||
|
$sup-top: -0.5em; // Sup top
|
||||||
$list-margin-top: 0; // Top margin for lists
|
$list-margin-top: 0; // Top margin for lists
|
||||||
$list-margin-bottom: 0.6em; // Bottom margin for lists
|
$list-margin-bottom: 0.6em; // Bottom margin for lists
|
||||||
|
$mark-bg-color: #ffff33; // Mark background color
|
||||||
|
$mark-color: $body-color; // Mark text color
|
||||||
|
// Code, preformatted and keyboard rules
|
||||||
$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements
|
$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements
|
||||||
$code-padding: 2px 4px; // Padding for code and pre elements
|
$code-padding: 2px 4px; // Padding for code and pre elements
|
||||||
$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color
|
$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color
|
||||||
$code-border-radius: 4px; // Border radius for code, pre and kbd elements
|
$code-border-radius: 4px; // Border radius for code, pre and kbd elements
|
||||||
$kbd-bg-color: $body-color; // Kbd background color
|
$kbd-bg-color: $body-color; // Kbd background color
|
||||||
$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color
|
$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color
|
||||||
|
// Hyperlink rules
|
||||||
$a-color: #2678b3; // Hyperlink text color
|
$a-color: #2678b3; // Hyperlink text color
|
||||||
$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color
|
$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color
|
||||||
$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color
|
$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color
|
||||||
$a-visited-hover-color: $a-color; // Hyperlink visited hover text color
|
$a-visited-hover-color: $a-color; // Hyperlink visited hover text color
|
||||||
$mark-bg-color: #ffff33; // Mark background color
|
// Button, input and form rules
|
||||||
$mark-color: $body-color; // Mark text color
|
|
||||||
$sub-bottom: -0.25em; // Sub bottom
|
|
||||||
$sup-top: -0.5em; // Sup top
|
|
||||||
$button-fonts: $base-fonts; // Font-family for buttons and inputs
|
$button-fonts: $base-fonts; // Font-family for buttons and inputs
|
||||||
$button-font-size: 100%; // Font size for buttons and inputs
|
$button-font-size: 100%; // Font size for buttons and inputs
|
||||||
$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs
|
$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs
|
||||||
|
|
@ -45,49 +71,157 @@ $fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style fo
|
||||||
$fieldset-border-radius: 4px; // Border radius for fieldset
|
$fieldset-border-radius: 4px; // Border radius for fieldset
|
||||||
$fieldset-margin: 0 2px; // Margin for fieldset
|
$fieldset-margin: 0 2px; // Margin for fieldset
|
||||||
$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset
|
$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset
|
||||||
// Button default colors
|
// Enable base (_base.scss) and use the variables defined above.
|
||||||
|
@import '../scss/mini/base';
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Button module (_button.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Colors and styles (you can remove things you don't need or define more
|
||||||
|
// colors if you need them).
|
||||||
$btn-default-color: #2a2a2a; // Default text color for buttons
|
$btn-default-color: #2a2a2a; // Default text color for buttons
|
||||||
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
||||||
$btn-default-bg-color: #eaeaea; // Default background color for buttons
|
$btn-default-bg-color: #eaeaea; // Default background color for buttons
|
||||||
$btn-b-bg-color: #337ab7; // Color for button style 1
|
$btn-b-bg-color: #3f84b3; // Color for button style 1
|
||||||
$btn-g-bg-color: #5cb85c; // Color for button style 2
|
$btn-g-bg-color: #2db747; // Color for button style 2
|
||||||
$btn-r-bg-color: #d9534f; // Color for button style 3
|
$btn-r-bg-color: #ea4848; // Color for button style 3
|
||||||
@import '../scss/mini/base';
|
// Button class names (you can remove things you don't need or define more
|
||||||
|
// classes if you need them).
|
||||||
|
$btn-class-name: btn; // Name for the base button class
|
||||||
|
$btn-style1-name: 'blue'; // Name for button style 1 class
|
||||||
|
$btn-style2-name: 'green'; // Name for button style 2 class
|
||||||
|
$btn-style3-name: 'red'; // Name for button style 3 class
|
||||||
|
$btn-size1-name: lg; // Name for the button size 1 class
|
||||||
|
$btn-size2-name: sm; // Name for the button size 2 class
|
||||||
|
// Enable buttons (_button.scss). (Use individual mixins below to use.)
|
||||||
@import '../scss/mini/button';
|
@import '../scss/mini/button';
|
||||||
// Use button mixins to create buttons with default specs.
|
// Use button mixins to create buttons with given specs. For more information
|
||||||
@include make-btn(btn, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65);
|
// refer to the _button.scss file to check the definitions.
|
||||||
@include make-btn-style(btn, 'blue', $btn-alt-color, $btn-b-bg-color, darken, 7.5%);
|
@include make-btn($btn-class-name, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, lighten, 7.5%, pointer, not-allowed, .65);
|
||||||
@include make-btn-style(btn, 'green', $btn-alt-color, $btn-g-bg-color, darken, 7.5%);
|
@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-b-bg-color);
|
||||||
@include make-btn-style(btn, 'red', $btn-alt-color, $btn-r-bg-color, darken, 7.5%);
|
@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-g-bg-color);
|
||||||
@include make-btn-size(btn, lg, 9px 15px, 135%);
|
@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-r-bg-color);
|
||||||
@include make-btn-size(btn, sm, 4px 8px, 80%);
|
@include make-btn-size($btn-class-name, $btn-size1-name, 9px 15px, 135%);
|
||||||
|
@include make-btn-size($btn-class-name, $btn-size2-name, 4px 8px, 80%);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Grid module (_grid.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the grid system
|
||||||
|
$grid-container-name: grid-container; // Name for the grid container class
|
||||||
|
$grid-row-name: row; // Name for the grid's row class
|
||||||
|
$grid-column-name: col; // Name for the grid's column class
|
||||||
|
$grid-extra-small-device-name: xs; // Name for extra small devices
|
||||||
|
$grid-small-device-name: sm; // Name for small devices
|
||||||
|
$grid-medium-device-name: md; // Name for medium devices
|
||||||
|
$grid-large-device-name: lg; // Name for large devices
|
||||||
|
$grid-no-show-name: no; // Name for hidden grid elements class
|
||||||
|
// Grid breakpoints for different screens
|
||||||
|
$grid-small-breakpoint: 768px; // Breakpoint for extra small to small devices
|
||||||
|
$grid-medium-breakpoint: 1024px; // Breakpoint for small to medium devices
|
||||||
|
$grid-large-breakpoint: 1280px; // Breakpoint for medium to large devices
|
||||||
|
// Enable grid(s) (_grid.scss). (Use individual mixins below to use.)
|
||||||
@import '../scss/mini/grid';
|
@import '../scss/mini/grid';
|
||||||
// Use grid mixin to create grid with default specs.
|
// Use grid mixin to create grid with given specs. For more information
|
||||||
@include make-grid(grid-container, 0, row, col, 12, 12px, xs, sm, md, lg, no, 768px, 1024px, 1280px);
|
// refer to the grid.scss file to check the definitions.
|
||||||
|
@include make-grid($grid-container-name, 0, $grid-row-name, $grid-column-name, 12, 12px, $grid-extra-small-device-name, $grid-small-device-name, $grid-medium-device-name, $grid-large-device-name, $grid-no-show-name, $grid-small-breakpoint, $grid-medium-breakpoint, $grid-large-breakpoint);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Form module (_form.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the forms and components
|
||||||
|
$form-class-name: frm; // Name for the form class
|
||||||
|
$form-control-group-name: ctrl-group; // Name for the form's control group class
|
||||||
|
// Colors for form components
|
||||||
|
$form-focus-color: #2678b3; // Color for focused form element outline
|
||||||
|
$form-invalid-color: #e9322d; // Color for invalid form element outline
|
||||||
|
// Enable forms (_form.scss). (Use individual mixins below to use.)
|
||||||
@import '../scss/mini/form';
|
@import '../scss/mini/form';
|
||||||
// Use form mixin to create form with default specs.
|
// Use form mixin to create form with given specs. For more information
|
||||||
@include make-frm(frm, 1px solid #ccc, 4px, 0.2em, 0.3em, #2678b3, #e9322d, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, ctrl-group, 0 0 0.3em 0, inline, aligned,15em);
|
// refer to the _form.scss file to check the definitions.
|
||||||
|
@include make-frm($form-class-name, 1px solid #ccc, 4px, 0.2em, 0.3em, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, $form-control-group-name, 0 0 0.3em 0, inline, aligned,15em);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Table module (_table.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the tables
|
||||||
|
$table-class-name: tbl; // Name for the table class
|
||||||
|
$table-horizontal-name: hor; // Name for the horizontal style tables
|
||||||
|
$table-bordered-name: bor; // Name for the bordered style tables
|
||||||
|
// Colors for the tables
|
||||||
|
$table-head-bg-color: #d9d9d9; // Table header background color
|
||||||
|
$table-head-color: #111; // Table header text color
|
||||||
|
$table-body-bg-color: #f5f5f5; // Table body bakground color
|
||||||
|
$table-body-alt-bg-color: #ececec; // Table body alternative background color
|
||||||
|
$table-body-color: #111; // Table body text color
|
||||||
|
// Enable tables (_table.scss). (Use individual mixins below to use.)
|
||||||
@import '../scss/mini/table';
|
@import '../scss/mini/table';
|
||||||
// Use table mixin to create table with default specs.
|
// Use table mixin to create table with given specs. For more information
|
||||||
@include make-tbl(tbl, 1px solid #777, 0, 0.5em, #4e4e4e, #f5f5f5, #ddd, #f4f4f4, #111, hor, bor);
|
// refer to the _table.scss file to check the definitions.
|
||||||
@import '../scss/mini/utility';
|
@include make-tbl($table-class-name, 1px solid #bdbdbd, 0, 0.5em, $table-head-bg-color, $table-head-color, $table-body-bg-color,$table-body-alt-bg-color, $table-body-color, $table-horizontal-name, $table-bordered-name);
|
||||||
// Use utility mixins to create utility classes with default specs.
|
//====================================================================
|
||||||
@include make-thumb(thumb, 0.25em, 1px solid #ccc, 4px);
|
// Variable definitions for the Navigation module (_nav.scss)
|
||||||
@include make-border-generic(bordered);
|
//====================================================================
|
||||||
@include make-border-radial-style(rounded, 4px);
|
// Class names for the navigation elements
|
||||||
@include make-border-radial-style(circle, 50%);
|
$navigation-class-name: nav; // Name for the navigation bar class
|
||||||
@include make-colored-text(txt-blue, $btn-b-bg-color);
|
$navigation-vertical-name: vertical; // Name for the vertical navigation class
|
||||||
@include make-colored-text(txt-green, $btn-g-bg-color);
|
$navigation-fixed-name: fixed; // Name for the fixed navigation class
|
||||||
@include make-colored-text(txt-red, $btn-r-bg-color);
|
$navigation-logo-name: logo; // Name for the navigation logo class
|
||||||
@include make-colored-bg-text(bg-blue, $btn-b-bg-color);
|
$navigation-link-name: link; // Name for the navigation link class
|
||||||
@include make-colored-bg-text(bg-green, $btn-g-bg-color);
|
// Colors and breakpoint for the navigation
|
||||||
@include make-colored-bg-text(bg-red, $btn-r-bg-color);
|
$navigation-bg-color: #272727; // Background color for the navigation bar
|
||||||
@include make-caret-down(caret, 0.35em, #222);
|
$navigation-color: #ddd; // Color for the navigation text
|
||||||
@include make-close(close, #aaa, pointer, 1.3em, 700, #777);
|
$navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed naviation collapse
|
||||||
@include make-drags(drg-left, drg-right);
|
// Enable navigation (_nav.scss). (Use individual mixins below to use.)
|
||||||
@include make-center-block(ct-block);
|
|
||||||
@include make-clearfix(cf);
|
|
||||||
@include make-hidden(hidden);
|
|
||||||
@import '../scss/mini/nav';
|
@import '../scss/mini/nav';
|
||||||
// Use nav mixin to create nav with default specs.
|
// Use nav mixin to create nav with default specs. For more information
|
||||||
@include make-nav(nav, vertical, fixed, logo, 135%, link, 10px, #fff, #222, lighten, 7.5%, not-allowed, .65, left, 12, 2, 768px, top-right, 10px, 1.75em);
|
// refer to the _nav.scss file to check the definitions.
|
||||||
|
@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-bg-color, $navigation-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Utilities and Helper Classes module (_utility.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the utility and helper classes (you can remove things you
|
||||||
|
// don't need or define more if you need them).
|
||||||
|
$thumbnail-class-name: thumb; // Name for the thumbnail class
|
||||||
|
$bordered-class-name: bordered; // Name for the bordered class
|
||||||
|
$bordered-radial-name: rounded; // Name for the rounded border class
|
||||||
|
$bordered-radial2-name: circle; // Name for the alternative rounded border class
|
||||||
|
$colored-text1-name: txt-blue; // Name for the colored text style 1 class
|
||||||
|
$colored-text2-name: txt-green; // Name for the colored text style 2 class
|
||||||
|
$colored-text3-name: txt-red; // Name for the colored text style 3 class
|
||||||
|
$colored-bg-text1-name: bg-blue; // Name for the colored background text style 1 class
|
||||||
|
$colored-bg-text2-name: bg-green; // Name for the colored background text style 2 class
|
||||||
|
$colored-bg-text3-name: bg-red; // Name for the colored background text style 3 class
|
||||||
|
$drag-left-name: drg-left; // Name for the drag-left class
|
||||||
|
$drag-right-name: drg-right; // Name for the drag-right class
|
||||||
|
$center-block-name: ct-block; // Name for the center block class
|
||||||
|
$caret-class-name: caret; // Name for the caret class
|
||||||
|
$close-class-name: close; // Name for the close class
|
||||||
|
$clearfix-class-name: cf; // Name for the clearfix class
|
||||||
|
$hidden-class-name: hidden; // Name for the hidden class
|
||||||
|
// Colors for the utility and helper classes (you can remove things you
|
||||||
|
// don't need or define more colors if you need them).
|
||||||
|
$bordered-radial-radius: 4px; // Border radius of rounded borders
|
||||||
|
$bordered-radial2-radius: 50%; // Border radius of the alternative rounded borders
|
||||||
|
$colored-text1-color: $btn-b-bg-color; // Text color for the colored text style 1 class
|
||||||
|
$colored-text2-color: $btn-g-bg-color; // Text color for the colored text style 2 class
|
||||||
|
$colored-text3-color: $btn-r-bg-color; // Text color for the colored text style 3 class
|
||||||
|
$colored-bg-text1-bg-color: $btn-b-bg-color; // Background color for the colored text style 1 class
|
||||||
|
$colored-bg-text2-bg-color: $btn-g-bg-color; // Background color for the colored text style 2 class
|
||||||
|
$colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the colored text style 3 class
|
||||||
|
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
|
||||||
|
@import '../scss/mini/utility';
|
||||||
|
// Use utility mixins to create utility classes with given specs. For more information
|
||||||
|
// refer to the _utility.scss file to check the definitions.
|
||||||
|
@include make-thumb($thumbnail-class-name, 0.25em, 1px solid #ccc, 4px);
|
||||||
|
@include make-border-generic($bordered-class-name);
|
||||||
|
@include make-border-radial-style($bordered-radial-name, $bordered-radial-radius);
|
||||||
|
@include make-border-radial-style($bordered-radial2-name, $bordered-radial2-radius);
|
||||||
|
@include make-colored-text($colored-text1-name, $colored-text1-color);
|
||||||
|
@include make-colored-text($colored-text2-name, $colored-text2-color);
|
||||||
|
@include make-colored-text($colored-text3-name, $colored-text3-color);
|
||||||
|
@include make-colored-bg-text($colored-bg-text1-name, $colored-bg-text1-bg-color);
|
||||||
|
@include make-colored-bg-text($colored-bg-text2-name, $colored-bg-text2-bg-color);
|
||||||
|
@include make-colored-bg-text($colored-bg-text3-name, $colored-bg-text3-bg-color);
|
||||||
|
@include make-caret-down($caret-class-name, 0.35em, #222);
|
||||||
|
@include make-close($close-class-name, #aaa, pointer, 1.3em, 700, #777);
|
||||||
|
@include make-drags($drag-left-name, $drag-right-name);
|
||||||
|
@include make-center-block($center-block-name);
|
||||||
|
@include make-clearfix($clearfix-class-name);
|
||||||
|
@include make-hidden($hidden-class-name);
|
||||||
227
scss/flavor.scss
Normal file
227
scss/flavor.scss
Normal file
|
|
@ -0,0 +1,227 @@
|
||||||
|
//====================================================================
|
||||||
|
// This is the file you should edit to make the flavor you want.
|
||||||
|
// Please read the instructions carefully.
|
||||||
|
//====================================================================
|
||||||
|
// !! IMPORTANT !!
|
||||||
|
// Please copy this file or rename it, if you want to keep the default
|
||||||
|
// flavor definitions file.
|
||||||
|
//====================================================================
|
||||||
|
// Update the comment below to include it in your flavor, providing the information
|
||||||
|
// you want along with your customized flavor. You can also delete it if you don't
|
||||||
|
// want it in your final CSS file.
|
||||||
|
/*
|
||||||
|
Flavor name: Default (mini-default)
|
||||||
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
|
mini.css version: v1.0 (September, 2016)
|
||||||
|
*/
|
||||||
|
// Variable definitions for the Base module (_base.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Basic rules for body
|
||||||
|
$body-margin: 0; // Margin for body
|
||||||
|
$body-bg-color: #f5f5f5; // Body background color
|
||||||
|
$body-color: #222; // Body text color
|
||||||
|
// Basic typography rules
|
||||||
|
$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family
|
||||||
|
$base-font-size: 1em; // Font-size
|
||||||
|
$base-line-height: 1.5; // Line-height
|
||||||
|
// Rules for headers (multipliers apply on top of the basic typography rules)
|
||||||
|
$h1-multiplier: 2; // Header 1 font-sze multiplier
|
||||||
|
$h2-multiplier: 1.5; // Header 2 font-sze multiplier
|
||||||
|
$h3-multiplier: 1.15; // Header 3 font-sze multiplier
|
||||||
|
$h4-multiplier: 1; // Header 4 font-sze multiplier
|
||||||
|
$h5-multiplier: 0.8; // Header 5 font-sze multiplier
|
||||||
|
$h6-multiplier: 0.7; // Header 6 font-sze multiplier
|
||||||
|
$header-line-height-multiplier: 0.8; // Multiplier for line height of headers
|
||||||
|
$header-margin: 0.7em 0; // Margin for headers
|
||||||
|
$header-font-weight: 500; // Font weight for headers
|
||||||
|
// Rules for small elements inside headers
|
||||||
|
$header-small-color: lighten($body-color, 20%); // Header small text color
|
||||||
|
$header-small-font-weight: 200; // Header small font weight
|
||||||
|
// Rules for horizontal rules
|
||||||
|
$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule
|
||||||
|
$hr-margin: 0.7em 0; // Margin for horizontal rule
|
||||||
|
$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule
|
||||||
|
// Common content typography rules (paragraphs, lists etc.)
|
||||||
|
$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements
|
||||||
|
$small-font-size: 75%; // Font size for small, sub and sup elements
|
||||||
|
$sub-bottom: -0.25em; // Sub bottom
|
||||||
|
$sup-top: -0.5em; // Sup top
|
||||||
|
$list-margin-top: 0; // Top margin for lists
|
||||||
|
$list-margin-bottom: 0.6em; // Bottom margin for lists
|
||||||
|
$mark-bg-color: #ffff33; // Mark background color
|
||||||
|
$mark-color: $body-color; // Mark text color
|
||||||
|
// Code, preformatted and keyboard rules
|
||||||
|
$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements
|
||||||
|
$code-padding: 2px 4px; // Padding for code and pre elements
|
||||||
|
$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color
|
||||||
|
$code-border-radius: 4px; // Border radius for code, pre and kbd elements
|
||||||
|
$kbd-bg-color: $body-color; // Kbd background color
|
||||||
|
$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color
|
||||||
|
// Hyperlink rules
|
||||||
|
$a-color: #2678b3; // Hyperlink text color
|
||||||
|
$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color
|
||||||
|
$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color
|
||||||
|
$a-visited-hover-color: $a-color; // Hyperlink visited hover text color
|
||||||
|
// Button, input and form rules
|
||||||
|
$button-fonts: $base-fonts; // Font-family for buttons and inputs
|
||||||
|
$button-font-size: 100%; // Font size for buttons and inputs
|
||||||
|
$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs
|
||||||
|
$button-margin: 0; // Margin for buttons and inputs
|
||||||
|
$fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style for fieldset
|
||||||
|
$fieldset-border-radius: 4px; // Border radius for fieldset
|
||||||
|
$fieldset-margin: 0 2px; // Margin for fieldset
|
||||||
|
$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset
|
||||||
|
// Enable base (_base.scss) and use the variables defined above.
|
||||||
|
@import 'mini/base';
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Button module (_button.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Colors and styles (you can remove things you don't need or define more
|
||||||
|
// colors if you need them).
|
||||||
|
$btn-default-color: #2a2a2a; // Default text color for buttons
|
||||||
|
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
||||||
|
$btn-default-bg-color: #eaeaea; // Default background color for buttons
|
||||||
|
$btn-b-bg-color: #3f84b3; // Color for button style 1
|
||||||
|
$btn-g-bg-color: #2db747; // Color for button style 2
|
||||||
|
$btn-r-bg-color: #ea4848; // Color for button style 3
|
||||||
|
// Button class names (you can remove things you don't need or define more
|
||||||
|
// classes if you need them).
|
||||||
|
$btn-class-name: btn; // Name for the base button class
|
||||||
|
$btn-style1-name: 'blue'; // Name for button style 1 class
|
||||||
|
$btn-style2-name: 'green'; // Name for button style 2 class
|
||||||
|
$btn-style3-name: 'red'; // Name for button style 3 class
|
||||||
|
$btn-size1-name: lg; // Name for the button size 1 class
|
||||||
|
$btn-size2-name: sm; // Name for the button size 2 class
|
||||||
|
// Enable buttons (_button.scss). (Use individual mixins below to use.)
|
||||||
|
@import 'mini/button';
|
||||||
|
// Use button mixins to create buttons with given specs. For more information
|
||||||
|
// refer to the _button.scss file to check the definitions.
|
||||||
|
@include make-btn($btn-class-name, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, lighten, 7.5%, pointer, not-allowed, .65);
|
||||||
|
@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-b-bg-color);
|
||||||
|
@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-g-bg-color);
|
||||||
|
@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-r-bg-color);
|
||||||
|
@include make-btn-size($btn-class-name, $btn-size1-name, 9px 15px, 135%);
|
||||||
|
@include make-btn-size($btn-class-name, $btn-size2-name, 4px 8px, 80%);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Grid module (_grid.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the grid system
|
||||||
|
$grid-container-name: grid-container; // Name for the grid container class
|
||||||
|
$grid-row-name: row; // Name for the grid's row class
|
||||||
|
$grid-column-name: col; // Name for the grid's column class
|
||||||
|
$grid-extra-small-device-name: xs; // Name for extra small devices
|
||||||
|
$grid-small-device-name: sm; // Name for small devices
|
||||||
|
$grid-medium-device-name: md; // Name for medium devices
|
||||||
|
$grid-large-device-name: lg; // Name for large devices
|
||||||
|
$grid-no-show-name: no; // Name for hidden grid elements class
|
||||||
|
// Grid breakpoints for different screens
|
||||||
|
$grid-small-breakpoint: 768px; // Breakpoint for extra small to small devices
|
||||||
|
$grid-medium-breakpoint: 1024px; // Breakpoint for small to medium devices
|
||||||
|
$grid-large-breakpong: 1280px; // Breakpoint for medium to large devices
|
||||||
|
// Enable grid(s) (_grid.scss). (Use individual mixins below to use.)
|
||||||
|
@import 'mini/grid';
|
||||||
|
// Use grid mixin to create grid with given specs. For more information
|
||||||
|
// refer to the grid.scss file to check the definitions.
|
||||||
|
@include make-grid($grid-container-name, 0, $grid-row-name, $grid-column-name, 12, 12px, $grid-extra-small-device-name, $grid-small-device-name, $grid-medium-device-name, $grid-large-device-name, $grid-no-show-name, $grid-small-breakpoint, $grid-medium-breakpoint, $grid-large-breakpoint);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Form module (_form.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the forms and components
|
||||||
|
$form-class-name: frm; // Name for the form class
|
||||||
|
$form-control-group-name: ctrl-group; // Name for the form's control group class
|
||||||
|
// Colors for form components
|
||||||
|
$form-focus-color: #2678b3; // Color for focused form element outline
|
||||||
|
$form-invalid-color: #e9322d; // Color for invalid form element outline
|
||||||
|
// Enable forms (_form.scss). (Use individual mixins below to use.)
|
||||||
|
@import 'mini/form';
|
||||||
|
// Use form mixin to create form with given specs. For more information
|
||||||
|
// refer to the _form.scss file to check the definitions.
|
||||||
|
@include make-frm($form-class-name, 1px solid #ccc, 4px, 0.2em, 0.3em, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 1.9em, 0.5em 0 0 0.2em, $form-control-group-name, 0 0 0.3em 0, inline, aligned,15em);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Table module (_table.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the tables
|
||||||
|
$table-class-name: tbl; // Name for the table class
|
||||||
|
$table-horizontal-name: hor; // Name for the horizontal style tables
|
||||||
|
$table-bordered-name: bor; // Name for the bordered style tables
|
||||||
|
// Colors for the tables
|
||||||
|
$table-head-bg-color: #d9d9d9; // Table header background color
|
||||||
|
$table-head-color: #111; // Table header text color
|
||||||
|
$table-body-bg-color: #f5f5f5; // Table body bakground color
|
||||||
|
$table-body-alt-bg-color: #ececec; // Table body alternative background color
|
||||||
|
$table-body-color: #111; // Table body text color
|
||||||
|
// Enable tables (_table.scss). (Use individual mixins below to use.)
|
||||||
|
@import 'mini/table';
|
||||||
|
// Use table mixin to create table with given specs. For more information
|
||||||
|
// refer to the _table.scss file to check the definitions.
|
||||||
|
@include make-tbl($table-class-name, 1px solid #bdbdbd, 0, 0.5em, $table-head-bg-color, $table-head-color, $table-body-bg-color,$table-body-alt-bg-color, $table-body-color, $table-horizontal-name, $table-bordered-name);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Navigation module (_nav.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the navigation elements
|
||||||
|
$navigation-class-name: nav; // Name for the navigation bar class
|
||||||
|
$navigation-vertical-name: vertical; // Name for the vertical navigation class
|
||||||
|
$navigation-fixed-name: fixed; // Name for the fixed navigation class
|
||||||
|
$navigation-logo-name: logo; // Name for the navigation logo class
|
||||||
|
$navigation-link-name: link; // Name for the navigation link class
|
||||||
|
// Colors and breakpoint for the navigation
|
||||||
|
$navigation-bg-color: #272727; // Background color for the navigation bar
|
||||||
|
$navigation-color: #ddd; // Color for the navigation text
|
||||||
|
$navigation-fixed-collapse-breakpoint: 768px; // Breakpoint for fixed naviation collapse
|
||||||
|
// Enable navigation (_nav.scss). (Use individual mixins below to use.)
|
||||||
|
@import 'mini/nav';
|
||||||
|
// Use nav mixin to create nav with default specs. For more information
|
||||||
|
// refer to the _nav.scss file to check the definitions.
|
||||||
|
@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 135%, $navigation-link-name, 8px, $navigation-bg-color, $navigation-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Utilities and Helper Classes module (_utility.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Class names for the utility and helper classes (you can remove things you
|
||||||
|
// don't need or define more if you need them).
|
||||||
|
$thumbnail-class-name: thumb; // Name for the thumbnail class
|
||||||
|
$bordered-class-name: bordered; // Name for the bordered class
|
||||||
|
$bordered-radial-name: rounded; // Name for the rounded border class
|
||||||
|
$bordered-radial2-name: circle; // Name for the alternative rounded border class
|
||||||
|
$colored-text1-name: txt-blue; // Name for the colored text style 1 class
|
||||||
|
$colored-text2-name: txt-green; // Name for the colored text style 2 class
|
||||||
|
$colored-text3-name: txt-red; // Name for the colored text style 3 class
|
||||||
|
$colored-bg-text1-name: bg-blue; // Name for the colored background text style 1 class
|
||||||
|
$colored-bg-text2-name: bg-green; // Name for the colored background text style 2 class
|
||||||
|
$colored-bg-text3-name: bg-red; // Name for the colored background text style 3 class
|
||||||
|
$drag-left-name: drg-left; // Name for the drag-left class
|
||||||
|
$drag-right-name: drg-right; // Name for the drag-right class
|
||||||
|
$center-block-name: ct-block; // Name for the center block class
|
||||||
|
$caret-class-name: caret; // Name for the caret class
|
||||||
|
$close-class-name: close; // Name for the close class
|
||||||
|
$clearfix-class-name: cf; // Name for the clearfix class
|
||||||
|
$hidden-class-name: hidden; // Name for the hidden class
|
||||||
|
// Colors for the utility and helper classes (you can remove things you
|
||||||
|
// don't need or define more colors if you need them).
|
||||||
|
$bordered-radial-radius: 4px; // Border radius of rounded borders
|
||||||
|
$bordered-radial2-radius: 50%; // Border radius of the alternative rounded borders
|
||||||
|
$colored-text1-color: $btn-b-bg-color; // Text color for the colored text style 1 class
|
||||||
|
$colored-text2-color: $btn-g-bg-color; // Text color for the colored text style 2 class
|
||||||
|
$colored-text3-color: $btn-r-bg-color; // Text color for the colored text style 3 class
|
||||||
|
$colored-bg-text1-bg-color: $btn-b-bg-color; // Background color for the colored text style 1 class
|
||||||
|
$colored-bg-text2-bg-color: $btn-g-bg-color; // Background color for the colored text style 2 class
|
||||||
|
$colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the colored text style 3 class
|
||||||
|
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
|
||||||
|
@import 'mini/utility';
|
||||||
|
// Use utility mixins to create utility classes with given specs. For more information
|
||||||
|
// refer to the _utility.scss file to check the definitions.
|
||||||
|
@include make-thumb($thumbnail-class-name, 0.25em, 1px solid #ccc, 4px);
|
||||||
|
@include make-border-generic($bordered-class-name);
|
||||||
|
@include make-border-radial-style($bordered-radial-name, $bordered-radial-radius);
|
||||||
|
@include make-border-radial-style($bordered-radial2-name, $bordered-radial2-radius);
|
||||||
|
@include make-colored-text($colored-text1-name, $colored-text1-color);
|
||||||
|
@include make-colored-text($colored-text2-name, $colored-text2-color);
|
||||||
|
@include make-colored-text($colored-text3-name, $colored-text3-color);
|
||||||
|
@include make-colored-bg-text($colored-bg-text1-name, $colored-bg-text1-bg-color);
|
||||||
|
@include make-colored-bg-text($colored-bg-text2-name, $colored-bg-text2-bg-color);
|
||||||
|
@include make-colored-bg-text($colored-bg-text3-name, $colored-bg-text3-bg-color);
|
||||||
|
@include make-caret-down($caret-class-name, 0.35em, #222);
|
||||||
|
@include make-close($close-class-name, #aaa, pointer, 1.3em, 700, #777);
|
||||||
|
@include make-drags($drag-left-name, $drag-right-name);
|
||||||
|
@include make-center-block($center-block-name);
|
||||||
|
@include make-clearfix($clearfix-class-name);
|
||||||
|
@include make-hidden($hidden-class-name);
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
// Base
|
|
||||||
$base-fonts: "\"Helvetica Neue\", Helvetica, sans-serif"; // Font-family
|
|
||||||
$base-font-size: 1em; // Font-size
|
|
||||||
$base-line-height: 1.5; // Line-height
|
|
||||||
$body-margin: 0; // Margin for body
|
|
||||||
$body-bg-color: #f5f5f5; // Body background color
|
|
||||||
$body-color: #222; // Body text color
|
|
||||||
$header-line-height-multiplier: 0.8; // Multiplier for line height of headers
|
|
||||||
$header-margin: 0.7em 0; // Margin for headers
|
|
||||||
$header-font-weight: 500; // Font weight for headers
|
|
||||||
$h1-multiplier: 2; // Header 1 font-sze multiplier
|
|
||||||
$h2-multiplier: 1.5; // Header 2 font-sze multiplier
|
|
||||||
$h3-multiplier: 1.15; // Header 3 font-sze multiplier
|
|
||||||
$h4-multiplier: 1; // Header 4 font-sze multiplier
|
|
||||||
$h5-multiplier: 0.8; // Header 5 font-sze multiplier
|
|
||||||
$h6-multiplier: 0.7; // Header 6 font-sze multiplier
|
|
||||||
$header-small-color: lighten($body-color, 20%); // Header small text color
|
|
||||||
$header-small-font-weight: 200; // Header small font weight
|
|
||||||
$hr-line-height-multiplier: 0.8; // Multiplier for line height of horizontal rule
|
|
||||||
$hr-margin: 0.7em 0; // Margin for horizontal rule
|
|
||||||
$hr-border-style: 1px solid darken($body-bg-color, 15%); // Color and style of horizontal rule
|
|
||||||
$small-font-size: 75%; // Font size for small, sub and sup elements
|
|
||||||
$p-margin: 0 0 0.6em; // Margin for paragraph and pre elements
|
|
||||||
$list-margin-top: 0; // Top margin for lists
|
|
||||||
$list-margin-bottom: 0.6em; // Bottom margin for lists
|
|
||||||
$code-fonts: monospace, monospace; // Font-family for code, pre, kbd, samp elements
|
|
||||||
$code-padding: 2px 4px; // Padding for code and pre elements
|
|
||||||
$code-bg-color: darken($body-bg-color, 10%); // Code and pre background color
|
|
||||||
$code-border-radius: 4px; // Border radius for code, pre and kbd elements
|
|
||||||
$kbd-bg-color: $body-color; // Kbd background color
|
|
||||||
$kbd-color: lighten($body-bg-color, 3.5%); // Kbd text color
|
|
||||||
$a-color: #2678b3; // Hyperlink text color
|
|
||||||
$a-hover-color: lighten($a-color, 10%); // Hyperlink hover text color
|
|
||||||
$a-visited-color: darken($a-color, 10%); // Hyperlink visited text color
|
|
||||||
$a-visited-hover-color: $a-color; // Hyperlink visited hover text color
|
|
||||||
$mark-bg-color: #ffff33; // Mark background color
|
|
||||||
$mark-color: $body-color; // Mark text color
|
|
||||||
$sub-bottom: -0.25em; // Sub bottom
|
|
||||||
$sup-top: -0.5em; // Sup top
|
|
||||||
$button-fonts: $base-fonts; // Font-family for buttons and inputs
|
|
||||||
$button-font-size: 100%; // Font size for buttons and inputs
|
|
||||||
$button-line-height-multiplier: 0.8; // Multiplier for line height of buttons and inputs
|
|
||||||
$button-margin: 0; // Margin for buttons and inputs
|
|
||||||
$fieldset-border: 1px solid darken($body-bg-color, 15%); // Border style for fieldset
|
|
||||||
$fieldset-border-radius: 4px; // Border radius for fieldset
|
|
||||||
$fieldset-margin: 0 2px; // Margin for fieldset
|
|
||||||
$fieldset-padding: 0.35em 0.65em 0.75em; // Padding for fieldset
|
|
||||||
// Button default colors
|
|
||||||
$btn-default-color: #2a2a2a; // Default text color for buttons
|
|
||||||
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
|
||||||
$btn-default-bg-color: #eaeaea; // Default background color for buttons
|
|
||||||
$btn-b-bg-color: #3f84b3; // Color for button style 1
|
|
||||||
$btn-g-bg-color: #2db747; // Color for button style 2
|
|
||||||
$btn-r-bg-color: #ea4848; // Color for button style 3
|
|
||||||
Loading…
Reference in a new issue