mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-09-15 00:12:14 +02:00
Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
255b35a462 | ||
|
|
d5eeb24b1b | ||
|
|
63a6e2479a | ||
|
|
baee949488 | ||
|
|
daf5d309ca | ||
|
|
56ce6acb00 | ||
|
|
de06298227 | ||
|
|
acb55fc971 | ||
|
|
38989e8cb3 | ||
|
|
c81e997592 | ||
|
|
9594c9b25e | ||
|
|
3dbdc27c55 | ||
|
|
d05cd28c56 | ||
|
|
ea8dfcc09f | ||
|
|
478d32e634 | ||
|
|
8c2c7d616c | ||
|
|
e646a5b4cb | ||
|
|
0139657e94 | ||
|
|
203100b465 | ||
|
|
505973ef3c | ||
|
|
9cf4c24db5 | ||
|
|
e08eaeefcd |
27
CHANGELOG.md
27
CHANGELOG.md
@@ -1,11 +1,30 @@
|
||||
# Changelog
|
||||
|
||||
## v1.1.0
|
||||
|
||||
- Fixed a problem with disabled buttons not behaving properly (issue #7).
|
||||
- Added support for `:disabled` pseudo-class for elements with disabled styles (issue #8).
|
||||
- Added support for `:active` and `:focus` for the close utility class (issue #9).
|
||||
- New module: Spinners (component comes in two styles) - part of the extra modules.
|
||||
- Removed the `flavor.scss` file from the `/scss` directory. Default flavor base will be `/flavors/mini-default.scss`.
|
||||
- Added hover styling and pointer cursor to the thumbnail styling (issue #10).
|
||||
- Minor change to caret styling (should be virtually identical).
|
||||
- Updated accordion definitions for consistency.
|
||||
- Updated label style definitions for consistency.
|
||||
- Minor changes to progress component styling (should be virtually identical).
|
||||
- Minor changes to panel component styling (should be virtually identical).
|
||||
- Bootstrap flavor added.
|
||||
|
||||
## v1.0.2
|
||||
|
||||
- Refactoring patch (all version will now use vMajor.Minor.Patch instead of just Major.Minor.Patch). Changes will be reflected in the updated links.
|
||||
|
||||
## v1.0.1
|
||||
|
||||
- Fixed modals covering other elements due to `z-index` (issue #3)
|
||||
- Fixed label & badge display overlapping in smaller displays (issue #4)
|
||||
- Fixed display of demo pages and incorrect padding of elements in panels (issue #5)
|
||||
- Fixed modals covering other elements due to `z-index` (issue #3).
|
||||
- Fixed label & badge display overlapping in smaller displays (issue #4).
|
||||
- Fixed display of demo pages and incorrect padding of elements in panels (issue #5).
|
||||
|
||||
## v1.0.0
|
||||
|
||||
- Initial release
|
||||
- Initial release.
|
||||
12
README.md
12
README.md
@@ -1,4 +1,4 @@
|
||||
# mini.css
|
||||
# mini.css v1.1.0
|
||||
## A minimal Sass-y responsive mobile-first style-agnostic CSS framework
|
||||
|
||||
|
||||
@@ -7,22 +7,24 @@ You can learn all about using it, its modules and components, as well as see a l
|
||||
|
||||
## Setup
|
||||
|
||||
**mini.css** is available in both Bowser and NPM:
|
||||
**mini.css** is available in both Bower and NPM:
|
||||
|
||||
bowser install mini.css
|
||||
bower install mini.css
|
||||
|
||||
npm install mini.css
|
||||
|
||||
|
||||
To give **mini.css** a try using the default flavor, paste the following code inside your HTML page's `<head>` tag:
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/dist/flavors/mini-default.min.css">
|
||||
|
||||
Replace `dist` with a release tag from the [Releases page](https://github.com/Chalarangelo/mini.css/releases).
|
||||
|
||||
Alternatively, you can use one of the other [flavors](https://github.com/Chalarangelo/mini.css/tree/master/flavors). Simply replace the final part of the URL with the flavor's CSS file (minified or not) and you're good to go!
|
||||
|
||||
## Customization
|
||||
|
||||
If you want to develop your own flavor or tweak an existing one, head over to the [SCSS](https://github.com/Chalarangelo/mini.css/tree/master/scss) folder, grab all the files and open the [flavor.scss](https://github.com/Chalarangelo/mini.css/blob/master/scss/flavor.scss) file to start building your own flavor.
|
||||
If you want to develop your own flavor or tweak an existing one, head over to the [SCSS](https://github.com/Chalarangelo/mini.css/tree/master/scss) folder, grab all the files and duplicate the [mini-default.scss](https://github.com/Chalarangelo/mini.css/blob/master/flavors/mini-default.scss) file from the flavors folder to start building your own flavor.
|
||||
|
||||
If you want to know all about the framework, the mixins and the variables, check the [wiki](https://github.com/Chalarangelo/mini.css/wiki).
|
||||
|
||||
|
||||
@@ -10,10 +10,8 @@
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<!-- For local testing only -->
|
||||
<!-- <link rel="stylesheet" href="../flavors/mini-default.min.css"> -->
|
||||
<!-- Old link -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css">
|
||||
<style>
|
||||
.footer{background-color:#272727; color:#ddd;}
|
||||
.footer a, .footer a:hover, .footer a:visited, .footer a:visited:hover, .footer a:active, .footer a:visited:active{color: #fff;}
|
||||
@@ -57,10 +55,10 @@
|
||||
<div class="col xs-12 md-10">
|
||||
<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 repository</a> or the <a href="https://github.com/Chalarangelo/mini.css/wiki">wiki</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=<span class="txt-green">"stylesheet"</span> href=<span class="txt-blue">"https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css"</span>></pre>
|
||||
<pre style="overflow: auto;"><link rel=<span class="txt-green">"stylesheet"</span> href=<span class="txt-blue">"https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css"</span>></pre>
|
||||
|
||||
<p>If you'd rather use a package manager, <strong>mini.css</strong> is available in both Bowser and NPM:</p>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">bowser install</span> mini.css</pre>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">bower install</span> mini.css</pre>
|
||||
<pre style="margin-left: 1px; border-left: 5px solid #3f84b3; border-top-left-radius: 0; border-bottom-left-radius: 0;"> <span class="txt-blue">npm install</span> mini.css</pre><br>
|
||||
|
||||
<h2 id="why-mini-css">Why mini.css?</h2><hr>
|
||||
|
||||
@@ -10,10 +10,8 @@
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<!-- For local testing only -->
|
||||
<!-- <link rel="stylesheet" href="../flavors/mini-niteowl.min.css"> -->
|
||||
<!-- Old link -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-niteowl.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-niteowl.min.css">
|
||||
<style>
|
||||
.panelcode{ border-top-left-radius:0; border-top-right-radius:0; margin-bottom:0; }
|
||||
pre{ overflow: auto; }
|
||||
@@ -73,7 +71,7 @@
|
||||
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||
<p>Below you can see each module in action, along with certain suggestions on how to add functionality to the various components. Bear in mind that this demo is for the <strong>NiteOwl</strong> flavor. Naming conventions may vary between flavors, however the structure and functionality of the modules should be the same. Please refer to specific flavors for those differences. The <strong><a href="https://chalarangelo.github.io/mini.css/modules">Default</a></strong> flavor uses the same naming conventions for the module components, so you won't have any trouble. If you are migrating from Bootstrap and want to use the <strong>Bootstrap</strong> flavor, most naming conventions are based on the original naming conventions of Bootstrap 3.3.7.</p>
|
||||
<p><strong>To use the Default flavor, add the following code inside your HTML page's <code><head></code> tag:</strong></p>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-niteowl.min.css"></pre><br>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-niteowl.min.css"></pre><br>
|
||||
|
||||
<h2 id="base">Base</h2>
|
||||
<p>The Base module contains customized typography rules, colors and most of the functionality provided in <a href="https://necolas.github.io/normalize.css/">normalize.css</a>. Below we showcase some of the most important typography styles.</p>
|
||||
@@ -613,6 +611,15 @@
|
||||
<span class="green" style="width:20%;"></span>
|
||||
<span style="width:40%;"></span>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<h3>Progress spinners</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<p>Spinner dots: <span class="spinner-dots"></span></p>
|
||||
<p>Spinner round: <span class="spinner-round"></span></p>
|
||||
<br>
|
||||
<pre class="panelcode"><span class="spinner-dots"></span>
|
||||
<span class="spinner-round"></span></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="carousel">Carousel</h2>
|
||||
|
||||
@@ -10,10 +10,8 @@
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<!-- For local testing only -->
|
||||
<!-- <link rel="stylesheet" href="../flavors/mini-default.min.css"> -->
|
||||
<!-- Old link -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/6b3db97a893cf4e7ec1b9f5aa40fc5957b1b94fc/flavors/mini-default.min.css"> -->
|
||||
<!-- Correct link -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css">
|
||||
<style>
|
||||
.panelcode{ border-top-left-radius:0; border-top-right-radius:0; margin-bottom:0; }
|
||||
pre{ overflow: auto; }
|
||||
@@ -73,7 +71,7 @@
|
||||
<h1>mini.css<small> a minimal Sass-y responsive mobile-first style-agnostic CSS framework</small></h1>
|
||||
<p>Below you can see each module in action, along with certain suggestions on how to add functionality to the various components. Bear in mind that this demo is for the <strong>Default</strong> flavor. Naming conventions may vary between flavors, however the structure and functionality of the modules should be the same. Please refer to specific flavors for those differences. The <strong><a href="https://chalarangelo.github.io/mini.css/modules-niteowl">NiteOwl</a></strong> flavor uses the same naming conventions for the module components, so you won't have any trouble. If you are migrating from Bootstrap and want to use the <strong>Bootstrap</strong> flavor, most naming conventions are based on the original naming conventions of Bootstrap 3.3.7.</p>
|
||||
<p><strong>To use the Default flavor, add the following code inside your HTML page's <code><head></code> tag:</strong></p>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/1.0.1/flavors/mini-default.min.css"></pre><br>
|
||||
<pre style="overflow: auto;"><link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css"></pre><br>
|
||||
|
||||
<h2 id="base">Base</h2>
|
||||
<p>The Base module contains customized typography rules, colors and most of the functionality provided in <a href="https://necolas.github.io/normalize.css/">normalize.css</a>. Below we showcase some of the most important typography styles.</p>
|
||||
@@ -613,6 +611,15 @@
|
||||
<span class="green" style="width:20%;"></span>
|
||||
<span style="width:40%;"></span>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
||||
<h3>Progress spinners</h3>
|
||||
<div class="panel" ><h4 class="head">Example</h4><br>
|
||||
<p>Spinner dots: <span class="spinner-dots"></span></p>
|
||||
<p>Spinner round: <span class="spinner-round"></span></p>
|
||||
<br>
|
||||
<pre class="panelcode"><span class="spinner-dots"></span>
|
||||
<span class="spinner-round"></span></pre>
|
||||
</div><br>
|
||||
|
||||
<h2 id="carousel">Carousel</h2>
|
||||
|
||||
23
flavors/README.md
Normal file
23
flavors/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Flavors
|
||||
|
||||
Below is a list of all the currently available flavors:
|
||||
|
||||
## Default
|
||||
|
||||
- Dark gray text on light gray background
|
||||
- High contrast
|
||||
- Simple and clean styling
|
||||
- Full flavor
|
||||
|
||||
|
||||
## NiteOwl
|
||||
|
||||
- Light gray text on dark blue background
|
||||
- High contrast
|
||||
- Simple and clean styling
|
||||
- Full flavor
|
||||
|
||||
## Bootstrap
|
||||
|
||||
- Similar to the Bootstrap framework's style.
|
||||
- Full flavor
|
||||
1925
flavors/mini-bootstrap.css
Normal file
1925
flavors/mini-bootstrap.css
Normal file
File diff suppressed because it is too large
Load Diff
1
flavors/mini-bootstrap.min.css
vendored
Normal file
1
flavors/mini-bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
623
flavors/mini-bootstrap.scss
Normal file
623
flavors/mini-bootstrap.scss
Normal file
@@ -0,0 +1,623 @@
|
||||
//====================================================================
|
||||
// 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: Bootstrap (mini-bootstrap)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.1 (October, 2016)
|
||||
*/
|
||||
//====================================================================
|
||||
//
|
||||
// CORE COMPONENTS (located in `mini`):
|
||||
//
|
||||
//====================================================================
|
||||
// Variable definitions for the Base module (_base.scss)
|
||||
//====================================================================
|
||||
// Pre-enable utilities (_utility.scss).
|
||||
// --- NOTES: ---
|
||||
// The utility module is pre enabled in order for certain elements to
|
||||
// use certain utility mixins.
|
||||
// -------------------
|
||||
@import '../scss/mini/utility';
|
||||
// Basic rules for body
|
||||
$body-margin: 0; // Margin for body
|
||||
$body-bg-color: #fff; // Body background color
|
||||
$body-color: #333; // Body text color
|
||||
// Basic typography rules
|
||||
$base-fonts: "\"Helvetica Neue\", Helvetica, Arial, sans-serif"; // Font-family
|
||||
$base-font-size: 14px; // Font-size
|
||||
$base-line-height: 1.42857143; // Line-height
|
||||
// Rules for headers (multipliers apply on top of the basic typography rules)
|
||||
// --- NOTES: ---
|
||||
// Headers are not followed by a bottom border.
|
||||
// <small> elements inside headers use the default small sizing.
|
||||
// -------------------
|
||||
$h1-multiplier: 2.571428571428571; // Header 1 font-sze multiplier
|
||||
$h2-multiplier: 2.142857142857143; // Header 2 font-sze multiplier
|
||||
$h3-multiplier: 1.714285714285714; // Header 3 font-sze multiplier
|
||||
$h4-multiplier: 1.285714285714286; // Header 4 font-sze multiplier
|
||||
$h5-multiplier: 1; // Header 5 font-sze multiplier
|
||||
$h6-multiplier: 0.8571428571428571; // Header 6 font-sze multiplier
|
||||
$header-line-height-multiplier: 0.76999999923; // Multiplier for line height of headers
|
||||
$header-margin: 0; // Margin for headers
|
||||
$header-font-weight: 500; // Font weight for headers
|
||||
// Rules for small elements inside headers
|
||||
$header-small-color: #777; // Header small text color
|
||||
$header-small-font-weight: 400; // 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.)
|
||||
// --- NOTES: ---
|
||||
// To counteract the styling of <small> elements inside headers,
|
||||
// $small-font-size is 80% instead of 85% (75% for headers).
|
||||
// -------------------
|
||||
$p-margin: 0 0 10px; // Margin for paragraph and pre elements
|
||||
$small-font-size: 80%; // 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: 10px; // Bottom margin for lists
|
||||
$mark-bg-color: #fcf8e3; // Mark background color
|
||||
$mark-color: $body-color; // Mark text color
|
||||
// Code, preformatted and keyboard rules
|
||||
// --- NOTES: ---
|
||||
// <pre> elements use the same style as <code> elements and do not
|
||||
// have their own unique padding specified.
|
||||
// <pre> elements use generic border styling to style their border
|
||||
// instead of a specific border color. (*)
|
||||
// Code elements use the default color used in the document's body,
|
||||
// instead of #c7254e.
|
||||
// (*): The generic border mixin from utilites could not be used,
|
||||
// because it is built to apply to a class of elements, not a type.
|
||||
// -------------------
|
||||
$code-fonts: "Menlo, Monaco, Consolas, \"Courier New\", monospace"; // Font-family for code, pre, kbd, samp elements
|
||||
$code-padding: 2px 4px; // Padding for code and pre elements
|
||||
$code-bg-color: #f9f2f4; // 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: $body-bg-color; // Kbd text color
|
||||
pre { border: 1px solid rgba(0,0,0, 0.25); } // Use generic styling to style border for pre elements
|
||||
// Hyperlink rules
|
||||
// --- NOTES: ---
|
||||
// <a> elements have no underline style applied to them when hovered
|
||||
// over or otherwise selected or focused.
|
||||
// -------------------
|
||||
$a-color: #337ab7; // Hyperlink text color
|
||||
$a-hover-color: #23527c; // Hyperlink hover text color
|
||||
$a-visited-color: #337ab7; // Hyperlink visited text color
|
||||
$a-visited-hover-color: #23527c; // 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: 0; // Border style for fieldset
|
||||
$fieldset-border-radius: 0; // Border radius for fieldset
|
||||
$fieldset-margin: 0; // Margin for fieldset
|
||||
$fieldset-padding: 0; // Padding for fieldset
|
||||
// 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).
|
||||
// --- NOTES: ---
|
||||
// Button styles use approximations for some colors (mainly hover colors).
|
||||
// Button border is built using utility module's generic mixin.
|
||||
// Buttons differ from Bootstrap's in terms of line height.
|
||||
// Button size variant font sizes are approximate.
|
||||
// `btn-link` is not supported.
|
||||
// -------------------
|
||||
$btn-default-color: $body-color; // Default text color for buttons
|
||||
$btn-alt-color: $body-bg-color; // Alternative text color for buttons
|
||||
$btn-default-bg-color: $body-bg-color; // Default background color for buttons
|
||||
$btn-p-bg-color: #337ab7; // Color for button style 1
|
||||
$btn-s-bg-color: #5cb85c; // Color for button style 2
|
||||
$btn-i-bg-color: #5bc0de; // Color for button style 3
|
||||
$btn-w-bg-color: #f0ad4e; // Color for button style 4
|
||||
$btn-d-bg-color: #d9534f; // Color for button style 5
|
||||
// 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: btn-primary; // Name for button style 1 class
|
||||
$btn-style2-name: btn-success; // Name for button style 2 class
|
||||
$btn-style3-name: btn-info; // Name for button style 3 class
|
||||
$btn-style4-name: btn-warning; // Name for button style 4 class
|
||||
$btn-style5-name: btn-danger; // Name for button style 5 class
|
||||
$btn-size1-name: btn-lg; // Name for the button size 1 class
|
||||
$btn-size2-name: btn-sm; // Name for the button size 2 class
|
||||
$btn-size3-name: btn-xs; // Name for the button size 3 class
|
||||
// Enable buttons (_button.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/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, 5px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65);
|
||||
@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-p-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-s-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-i-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style4-name, $btn-alt-color, $btn-w-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style5-name, $btn-alt-color, $btn-d-bg-color, darken);
|
||||
@include make-btn-size($btn-class-name, $btn-size1-name, 10px 16px, 128.6%);
|
||||
@include make-btn-size($btn-class-name, $btn-size2-name, 5px 10px, 85.7%);
|
||||
@include make-btn-size($btn-class-name, $btn-size3-name, 1px 5px, 85.7%);
|
||||
@include make-border-generic($btn-class-name);
|
||||
//====================================================================
|
||||
// Variable definitions for the Grid module (_grid.scss)
|
||||
//====================================================================
|
||||
// Class names for the grid system
|
||||
// --- NOTES: ---
|
||||
// Only .container-fluid is supported currently.
|
||||
// Column naming follows standard mini.css naming conventions
|
||||
// instead of Bootstrap conventions.
|
||||
// (example: `col md-1` instead of `col-md-1`)
|
||||
// Offsets are still built using the hidden column class, which is
|
||||
// suffixed with `-hidden` for convenience's sake.
|
||||
// -------------------
|
||||
$grid-container-name: container-fluid; // 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: hidden; // 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: 992px; // Breakpoint for small to medium devices
|
||||
$grid-large-breakpoint: 1200px; // Breakpoint for medium to large devices
|
||||
// Enable grid(s) (_grid.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/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, 15px, $grid-row-name, $grid-column-name, 12, 15px, $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
|
||||
// --- NOTES: ---
|
||||
// Basic styling is applied to forms using the .form class. The usual
|
||||
// mini.css syntax should be used instead of the Bootstrap syntax.
|
||||
// .form-group is not supported inside .form-inline.
|
||||
// .form-control-static, .has-error, .has-warning, .has-success are not
|
||||
// supported.
|
||||
// No class is provided for .control-label and subsequently no styling.
|
||||
// Focus and invalid borders are styled approximately.
|
||||
// The width of the left column (label) of horizontal forms is preset to
|
||||
// 20%.
|
||||
// Some other functionalities are not supported as they are considered
|
||||
// unimportant for the time being.
|
||||
// No form element size variants are supported yet.
|
||||
// -------------------
|
||||
$form-class-name: form; // Name for the form class
|
||||
$form-control-group-name: form-group; // Name for the form's control group class
|
||||
// Colors for form components
|
||||
$form-focus-color: #66afe9; // Color for focused form element outline
|
||||
$form-invalid-color: #a94442; // Color for invalid form element outline
|
||||
// Enable forms (_form.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/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, 6px 12px, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 34px, 0 0 5px 0, $form-control-group-name, 0 0 15px 0, form-inline, form-horizontal, 20%);
|
||||
//====================================================================
|
||||
// Variable definitions for the Table module (_table.scss)
|
||||
//====================================================================
|
||||
// Class names for the tables
|
||||
// --- NOTES: ---
|
||||
// The .table class applies the default styling of mini.css (vertical
|
||||
// borders). To get the default styling of Bootstrap, use .table-horizontal
|
||||
// along with .table.
|
||||
// All customized tables are striped by default.
|
||||
// Hover rows styling is not supported.
|
||||
// Condensed tables are not supported.
|
||||
// Contextual classes on tables are not supported (untested).
|
||||
// Responsive tables are not supported. (Will be added as default in
|
||||
// later versions)
|
||||
// -------------------
|
||||
$table-class-name: table; // Name for the table class
|
||||
$table-horizontal-name: table-horizontal; // Name for the horizontal style tables
|
||||
$table-bordered-name: table-bordered; // Name for the bordered style tables
|
||||
// Colors for the tables
|
||||
$table-head-bg-color: $body-bg-color; // Table header background color
|
||||
$table-head-color: $body-color; // Table header text color
|
||||
$table-body-bg-color: $body-bg-color; // Table body bakground color
|
||||
$table-body-alt-bg-color: #f9f9f9; // Table body alternative background color
|
||||
$table-body-color: $body-color; // Table body text color
|
||||
// Enable tables (_table.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/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 #ddd, 0, 8px, $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
|
||||
// --- NOTES: ---
|
||||
// The structure of the navigation bar is based on mini.css structure
|
||||
// conventions. However naming is applied based on the naming conventions
|
||||
// of Bootstrap.
|
||||
// Some colors are based on approximation.
|
||||
// Border color and border radius are built using generic utility mixins.
|
||||
// -------------------
|
||||
$navigation-class-name: navbar; // Name for the navigation bar class
|
||||
$navigation-vertical-name: navbar-vertical; // Name for the vertical navigation class
|
||||
$navigation-fixed-name: navbar-fixed; // Name for the fixed navigation class
|
||||
$navigation-logo-name: navbar-brand; // Name for the navigation logo class
|
||||
$navigation-link-name: navbar-nav; // Name for the navigation link class
|
||||
// Colors and breakpoint for the navigation
|
||||
$navigation-bg-color: #f8f8f8; // Background color for the navigation bar
|
||||
$navigation-color: $body-color; // 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 '../scss/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, 128.6%, $navigation-link-name, 15px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
|
||||
@include make-border-generic($navigation-class-name);
|
||||
@include make-border-radial-style($navigation-class-name, 4px);
|
||||
//====================================================================
|
||||
// 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).
|
||||
// --- NOTES: ---
|
||||
// Utilities are enabled at the start of the file.
|
||||
// Close icon colors are approximate.
|
||||
// Generic borders are included (although not part of Bootstrap originally).
|
||||
// No .show class is provided.
|
||||
// Contextual background styles do not have extra padding.
|
||||
// -------------------
|
||||
$thumbnail-class-name: thumbnail; // 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: text-primary; // Name for the colored text style 1 class
|
||||
$colored-text2-name: text-success; // Name for the colored text style 2 class
|
||||
$colored-text3-name: text-info; // Name for the colored text style 3 class
|
||||
$colored-text4-name: text-warning; // Name for the colored text style 4 class
|
||||
$colored-text5-name: text-danger; // Name for the colored text style 5 class
|
||||
$colored-text6-name: text-muted; // Name for the colored text style 6 class
|
||||
$colored-bg-text1-name: bg-primary; // Name for the colored background text style 1 class
|
||||
$colored-bg-text2-name: bg-success; // Name for the colored background text style 2 class
|
||||
$colored-bg-text3-name: bg-info; // Name for the colored background text style 3 class
|
||||
$colored-bg-text4-name: bg-warning; // Name for the colored background text style 4 class
|
||||
$colored-bg-text5-name: bg-danger; // Name for the colored background text style 5 class
|
||||
$drag-left-name: pull-left; // Name for the drag-left class
|
||||
$drag-right-name: pull-right; // Name for the drag-right class
|
||||
$center-block-name: center-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: clearfix; // 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).
|
||||
$thumbnail-hover-color: $a-color; // Border color of the thumbnail when hovering over it
|
||||
$bordered-radial-radius: 4px; // Border radius of rounded borders
|
||||
$bordered-radial2-radius: 50%; // Border radius of the alternative rounded borders
|
||||
$colored-text1-color: $btn-p-bg-color; // Text color for the colored text style 1 class
|
||||
$colored-text2-color: $btn-s-bg-color; // Text color for the colored text style 2 class
|
||||
$colored-text3-color: $btn-i-bg-color; // Text color for the colored text style 3 class
|
||||
$colored-text4-color: $btn-w-bg-color; // Text color for the colored text style 4 class
|
||||
$colored-text5-color: $btn-d-bg-color; // Text color for the colored text style 5 class
|
||||
$colored-text6-color: #777; // Text color for the colored text style 6 class
|
||||
$colored-bg-text1-bg-color: $btn-p-bg-color; // Background color for the colored text style 1 class
|
||||
$colored-bg-text2-bg-color: $btn-s-bg-color; // Background color for the colored text style 2 class
|
||||
$colored-bg-text3-bg-color: $btn-i-bg-color; // Background color for the colored text style 3 class
|
||||
$colored-bg-text4-bg-color: $btn-w-bg-color; // Background color for the colored text style 4 class
|
||||
$colored-bg-text5-bg-color: $btn-d-bg-color; // Background color for the colored text style 5 class
|
||||
// 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, 4px, 1px solid #ddd, 4px, $thumbnail-hover-color);
|
||||
@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-text($colored-text4-name, $colored-text4-color);
|
||||
@include make-colored-text($colored-text5-name, $colored-text5-color);
|
||||
@include make-colored-text($colored-text6-name, $colored-text6-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-colored-bg-text($colored-bg-text4-name, $colored-bg-text4-bg-color);
|
||||
@include make-colored-bg-text($colored-bg-text5-name, $colored-bg-text5-bg-color);
|
||||
@include make-caret-down($caret-class-name, 4px, $body-color);
|
||||
@include make-close($close-class-name, #aaa, pointer, 21px, 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);
|
||||
//====================================================================
|
||||
//
|
||||
// EXTRA COMPONENTS (located in `mini-extra`):
|
||||
//
|
||||
//====================================================================
|
||||
// Variable definitions for the Label module (_label.scss)
|
||||
//====================================================================
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
// --- NOTES: ---
|
||||
// Label and badge default classes are applied automatically, no contextual
|
||||
// class is needed. Neither .label-default nor .badge-default are supported.
|
||||
// Badge styling is not based on context, they are cotrolled based on the
|
||||
// classes the user specifies.
|
||||
// Labels and badges are sized approximately.
|
||||
// -------------------
|
||||
$lbl-default-color: $btn-alt-color; // Default text color for labels/badges
|
||||
$lbl-default-bg-color: #777; // Default background color for labels/badges
|
||||
$lbl-style1-bg-color: $btn-p-bg-color; // Color for labels/badges style 1
|
||||
$lbl-style2-bg-color: $btn-s-bg-color; // Color for labels/badges style 2
|
||||
$lbl-style3-bg-color: $btn-i-bg-color; // Color for labels/badges style 3
|
||||
$lbl-style4-bg-color: $btn-w-bg-color; // Color for labels/badges style 5
|
||||
$lbl-style5-bg-color: $btn-d-bg-color; // Color for labels/badges style 6
|
||||
// Label class names (you can remove things you don't need or define more
|
||||
// classes if you need them).
|
||||
$lbl-class-name: label; // Name for the base labels class
|
||||
$lbl-style1-name: label-primary; // Name for labels style 1 class
|
||||
$lbl-style2-name: label-success; // Name for labels style 2 class
|
||||
$lbl-style3-name: label-info; // Name for labels style 3 class
|
||||
$lbl-style4-name: label-warning; // Name for labels style 4 class
|
||||
$lbl-style5-name: label-danger; // Name for labels style 5 class
|
||||
$badge-class-name: badge; // Name for the base badges class
|
||||
$badge-style1-name: badge-primary; // Name for badges style 1 class
|
||||
$badge-style2-name: badge-success; // Name for badges style 2 class
|
||||
$badge-style3-name: badge-info; // Name for badges style 3 class
|
||||
$badge-style4-name: badge-warning; // Name for badges style 4 class
|
||||
$badge-style5-name: badge-danger; // Name for badges style 5 class
|
||||
// Enable labels (_label.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/label';
|
||||
// Use label mixins to create labels with given specs. For more information
|
||||
// refer to the _label.scss file to check the definitions.
|
||||
@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, .25em, .2em .6em .3em, hide);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-style1-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-style2-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-style3-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style4-name, $lbl-default-color, $lbl-style4-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style5-name, $lbl-default-color, $lbl-style5-bg-color);
|
||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 10px, 3px 7px, hide);
|
||||
@include make-lbl-style($badge-class-name, $badge-style1-name, $lbl-default-color, $lbl-style1-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style2-name, $lbl-default-color, $lbl-style2-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style3-name, $lbl-default-color, $lbl-style3-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style4-name, $lbl-default-color, $lbl-style4-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $badge-style5-name, $lbl-default-color, $lbl-style5-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Tab module (_tab.scss)
|
||||
//====================================================================
|
||||
// Tab class names.
|
||||
// --- NOTES: ---
|
||||
// Bootstrap naming conventions are used, but the structure follows the
|
||||
// component structure of mini.css.
|
||||
// Some extra styles are applied at the end of the module definition. This
|
||||
// is due to the way that Bootstrap's tabs are styled.
|
||||
// No events and methods are supported as of yet.
|
||||
// -------------------
|
||||
$tabs-class-name: nav-tabs; // Name for the tab system container class
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$tabs-border-color: #ddd; // Border color for the tabs system
|
||||
$tabs-content-bg-color: #fff; // Background for the active tab's content
|
||||
$tabs-color: $a-color; // Color for the text in the tab labels
|
||||
$tabs-bg-color: $body-bg-color; // Background color for the tab labels
|
||||
$tabs-active-color: $body-color; // Color for the text in the active tab's label
|
||||
$tabs-active-bg-color: $tabs-content-bg-color; // Background color for the active tab's label
|
||||
$tabs-active-stripe-style: 1px solid #ddd; // Style for the active tab label's stripe
|
||||
// Enable tabs (_tab.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/tab';
|
||||
// Use tabs mixin to create tab system with given specs. For more information
|
||||
// refer to the _tab.scss file to check the definitions.
|
||||
@include make-tabs($tabs-class-name, 250px, 3px, 20px, 10px 18px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
|
||||
.#{$tabs-class-name} input[type="radio"] + div > label + div { top: 40px; }
|
||||
.#{$tabs-class-name} input[type="radio"] + div > label { border:0; }
|
||||
.#{$tabs-class-name} input[type="radio"]:checked + div > label { border: $tabs-active-stripe-style; border-bottom: 0; }
|
||||
//====================================================================
|
||||
// Variable definitions for the Modal module (_modal.scss)
|
||||
//====================================================================
|
||||
// Modal class names.
|
||||
// --- NOTES: ---
|
||||
// The modal dialog is all contained in the .modal class.
|
||||
// Background color of the overlay is not the exact same as Bootstrap.
|
||||
// Some colors and styles are approximations.
|
||||
// No alternative sizes, methods or events are supported as of yet.
|
||||
// -------------------
|
||||
$modal-class-name: modal; // Name for the modal class
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$modal-bg-color: $body-bg-color; // Background color for the modal
|
||||
$modal-color: $body-color; // Color for the text in the modal
|
||||
$modal-border: 1px solid #999; // Border style for the modal
|
||||
// Enable modal (_modal.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/modal';
|
||||
// Use modal mixin to create modal with given specs. For more information
|
||||
// refer to the _modal.scss file to check the definitions.
|
||||
@include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 6px, 18px, 30px, 600px);
|
||||
@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
|
||||
//====================================================================
|
||||
// Variable definitions for the Dropdown module (_dropdown.scss)
|
||||
//====================================================================
|
||||
// Dropdown class names.
|
||||
// --- NOTES: ---
|
||||
// Dropdown styling uses the default styling of mini.css as the equivalent
|
||||
// Bootstrap component is very different.
|
||||
// -------------------
|
||||
$dropdown-class-name: dropdown; // Name for the dropdown class
|
||||
// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/dropdown';
|
||||
// Use dropdown mixin to create dropdown with given specs. For more information
|
||||
// refer to the _dropdown.scss file to check the definitions.
|
||||
@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 80%);
|
||||
//====================================================================
|
||||
// Variable definitions for the Collapse module (_collapse.scss)
|
||||
//====================================================================
|
||||
// Collapse and accordion class names.
|
||||
// --- NOTES: ---
|
||||
// Sizes and colors are approximate. The colors and style of the collapsed
|
||||
// (hidden) content are based on the Bootstrap example that uses the well.
|
||||
// Classes for collapse and accordion components are .collapse and
|
||||
// .accordion respectively.
|
||||
// -------------------
|
||||
$collapse-class-name: collapse; // Name for the collapse class
|
||||
$accordion-class-name: accordion; // Name for the accordion class
|
||||
// Collapse colors and styles (you can remove things you don't need or
|
||||
// define more colors if you need them).
|
||||
$collapse-border: 1px solid #e3e3e3; // Border style for the collapse
|
||||
$collapse-color: $body-color; // Color for the text in the collapse
|
||||
$collapse-bg-color: #f5f5f5; // Background color for the collapse
|
||||
// Accordion colors and styles (you can remove things you don't need or
|
||||
// define more colors if you need them).
|
||||
$accordion-border: $collapse-border; // Border style for the accordion
|
||||
$accordion-color: $collapse-color; // Color for the text in the accordion
|
||||
$accordion-bg-color: $body-bg-color; // Background color for the accordion
|
||||
$accordion-label-color: $collapse-color; // Color for the text in the accordion's label
|
||||
$accordion-label-bg-color: $collapse-bg-color; // Background color for the accordion's label
|
||||
// Enable collapse (_collapse.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/collapse';
|
||||
// Use collapse and accordion mixins to create components wit the given specs.
|
||||
// For more information refer to the _collapse.scss file to check the definitions.
|
||||
@include make-collapse($collapse-class-name, $collapse-border, 4px, 19px, 6px, $collapse-color, $collapse-bg-color);
|
||||
@include make-accordion($accordion-class-name, $accordion-border, 4px, 19px, 6px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);
|
||||
//====================================================================
|
||||
// Variable definitions for the Progress module (_progress.scss)
|
||||
//====================================================================
|
||||
// Progress and progress variants class names.
|
||||
// --- NOTES: ---
|
||||
// Naming conventions are based on the Bootstrap names, syntax is based
|
||||
// on the default mini.css syntax.
|
||||
// Colors and borders might look different due to some approximations.
|
||||
// -------------------
|
||||
$progress-class-name: progress-bar; // Name for the progress class
|
||||
$progress-bar-style1-name: progress-bar-success; // Name for the progress bar style 1 class
|
||||
$progress-bar-style2-name: progress-bar-info; // Name for the progress bar style 2 class
|
||||
$progress-bar-style3-name: progress-bar-warning; // Name for the progress bar style 3 class
|
||||
$progress-bar-style4-name: progress-bar-danger; // Name for the progress bar style 4 class
|
||||
// Progress and progress variants colors (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
||||
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
||||
$progress-bar-style1-color: $btn-alt-color; // Color for the text of the style 1 progress bar
|
||||
$progress-bar-style2-color: $btn-alt-color; // Color for the text of the style 2 progress bar
|
||||
$progress-bar-style3-color: $btn-alt-color; // Color for the text of the style 3 progress bar
|
||||
$progress-bar-style4-color: $btn-alt-color; // Color for the text of the style 4 progress bar
|
||||
$progress-bar-bg-color: $btn-p-bg-color; // Background color for the progress bar
|
||||
$progress-bar-style1-bg-color: $btn-s-bg-color; // Background color for the style 1 progress bar
|
||||
$progress-bar-style2-bg-color: $btn-i-bg-color; // Background color for the style 2 progress bar
|
||||
$progress-bar-style3-bg-color: $btn-w-bg-color; // Background color for the style 3 progress bar
|
||||
$progress-bar-style4-bg-color: $btn-d-bg-color; // Background color for the style 4 progress bar
|
||||
// Enable progress (_progress.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/progress';
|
||||
// Use progress mixins to create progress bars with given specs. For more
|
||||
// information refer to the _progress.scss file to check the definitions.
|
||||
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 12px, $progress-bar-color, $progress-bar-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style3-name, $progress-bar-style3-color, $progress-bar-style3-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style4-name, $progress-bar-style4-color, $progress-bar-style4-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Spinner module (spinner.scss)
|
||||
//====================================================================
|
||||
// Spinner class names.
|
||||
// --- NOTES: ---
|
||||
// Spinner styles are in line with Bootstrap's style as Bootstrap does
|
||||
// not feature a similar component.
|
||||
// -------------------
|
||||
$spinner-dotted-name: spinner-dots; // Name for the dotted spinner class
|
||||
$spinner-round-name: spinner-round; // Name for the round spinner class
|
||||
// Spinner colors.
|
||||
$spinner-round-doughnout: 6px solid rgba(51,51,51, 0.25); // Style for the round spinner doughnut
|
||||
$spinner-round-spin: 6px solid $btn-p-bg-color; // Style for the round spinner spinning part
|
||||
// Enable progress (spinner.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/spinner';
|
||||
// Use spinner mixins to create spinners with given specs. For more
|
||||
// information refer to the spinner.scss file to check the definitions.
|
||||
@include make-spinner-dots($spinner-dotted-name, 20px, 1.5s);
|
||||
@include make-spinner-round($spinner-round-name, 20px, $spinner-round-doughnout, $spinner-round-spin, 1.5s);
|
||||
//====================================================================
|
||||
// Variable definitions for the Carousel module (_carousel.scss)
|
||||
//====================================================================
|
||||
// Carousel class names.
|
||||
// --- NOTES: ---
|
||||
// Carousel styling is very similar to the mini.css default carousel,
|
||||
// although control styles are based on the Bootstrap styling.
|
||||
// Naming and structure conventions are based on mini.css.
|
||||
// -------------------
|
||||
$carousel-class-name: carousel; // Name for the carousel class
|
||||
// Carousel colors and styles.
|
||||
$carousel-border: 1px solid #ddd; // Border style for the carousel
|
||||
$carousel-content-bg-color: #e7e7e7; // Background color for the carousel
|
||||
$carousel-description-color: $body-bg-color; // Color for the text in the carousel's description
|
||||
$carousel-description-bg-color: $body-color; // Background color for the carousel's description
|
||||
$carousel-control-color: #fff; // Color for the carousel's control elements
|
||||
// Enable carousel (_carousel.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/carousel';
|
||||
// Use carousel mixin to create carousel with given specs. For more
|
||||
// information refer to the _carousel.scss file to check the definitions.
|
||||
@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 360px, 160px, 450px, 1.8em, $carousel-control-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Utility module (_utility.scss)
|
||||
//====================================================================
|
||||
// Utility class names.
|
||||
// --- NOTES: ---
|
||||
// Some component styles (like wells) are based on approximation.
|
||||
// Alert styles omit the .alert class and just use their style class.
|
||||
// Panel styling is based on approximation.
|
||||
// Panels are based on the mini.css default structure.
|
||||
// Popovers use the default mini.css styling.
|
||||
// Tooltips, jumbotron and some other components from Bootstrap are not
|
||||
// supported.
|
||||
// Experimental and unstable components are not included.
|
||||
// -------------------
|
||||
$breadcrumbs-class-name: breadcrumb; // Name for the breadcrumbs class
|
||||
$well-class-name: well; // Name for the well class
|
||||
$alert-style1-class: alert-success; // Name for the style 1 alert
|
||||
$alert-style2-class: alert-info; // Name for the style 2 alert
|
||||
$alert-style3-class: alert-warning; // Name for the style 3 alert
|
||||
$alert-style4-class: alert-danger; // Name for the style 4 alert
|
||||
$panel-class-name: panel; // Name for the panel class
|
||||
$panel-header-name: head; // Name for the panel's header class
|
||||
$button-states-class-name: stateful; // Name for the stateful button class
|
||||
$button-group-class-name: btn-grp; // Name for the button group class
|
||||
$popover-above-name: popover-top; // Name for the popover above class
|
||||
$popover-below-name: popover-bottom; // Name for the popover below class
|
||||
// Utility color variables and styles (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$well-color: $body-color; // Text color for the well
|
||||
$well-bg-color: #f5f5f5; // Background color for the well
|
||||
$panel-color: $body-color; // Text color for the panel
|
||||
$panel-bg-color: $body-bg-color; // Background color for the panel
|
||||
$panel-header-color: $body-color; // Text color for the panel's header
|
||||
$panel-header-bg-color: #e7e7e7; // Background color for the panel's header
|
||||
$popover-color: $body-bg-color; // Text color for the popover
|
||||
$popover-bg-color: $body-color; // Background color for the popover
|
||||
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/utility';
|
||||
// Use utilities mixins to create utilities with given specs. For more
|
||||
// information refer to the _utility.scss file to check the definitions.
|
||||
@include make-breadcrumbs($breadcrumbs-class-name, 1);
|
||||
@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #e3e3e3, 4px, 19px);
|
||||
@include make-alert($alert-style1-class, darken($btn-s-bg-color,20%), lighten($btn-s-bg-color, 10%) , 1px solid darken($btn-s-bg-color, 10%), 4px, 15px, close);
|
||||
@include make-alert($alert-style2-class, darken($btn-i-bg-color,20%), lighten($btn-s-bg-color, 10%) , 1px solid darken($btn-i-bg-color, 10%), 4px, 15px, close);
|
||||
@include make-alert($alert-style3-class, darken($btn-w-bg-color,20%), lighten($btn-w-bg-color, 10%) , 1px solid darken($btn-w-bg-color, 10%), 4px, 15px, close);
|
||||
@include make-alert($alert-style4-class, darken($btn-d-bg-color,20%), lighten($btn-d-bg-color, 10%) , 1px solid darken($btn-d-bg-color, 10%), 4px, 15px, close);
|
||||
@include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ddd, 4px, 15px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 15px);
|
||||
@include make-popover($popover-above-name, top, 5px, 45px, $popover-color, $popover-bg-color, 7px 10px);
|
||||
@include make-popover($popover-below-name, bottom, 4px, 45px, $popover-color, $popover-bg-color, 7px 10px);
|
||||
// Use experimental utilities mixins to create utilities with given
|
||||
// specs. Please exercise caution when using these mixins.
|
||||
// @include make-button-states($button-states-class-name); // This mixin is unstable and buggy, we suggest you disable it.
|
||||
// The folowing mixin is considered stable, you can disable it if you need to.
|
||||
// @include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px);
|
||||
// @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-p-bg-color, 10%), 4px);
|
||||
// @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-s-bg-color, 10%), 4px);
|
||||
// @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-i-bg-color, 10%), 4px);
|
||||
//====================================================================
|
||||
//====================================================================
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.0 (September, 2016)
|
||||
mini.css version: v1.1 (October, 2016)
|
||||
*/
|
||||
/*
|
||||
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
@@ -390,7 +390,7 @@ textarea {
|
||||
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 {
|
||||
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], .btn:disabled, a.btn.disabled, a.btn[disabled], a.btn:disabled, a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visited:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
|
||||
@@ -819,7 +819,7 @@ textarea {
|
||||
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
||||
color: #ddd;
|
||||
background: #141414; }
|
||||
.nav ul li .link.disabled, .nav ul li .link[disabled] {
|
||||
.nav ul li .link.disabled, .nav ul li .link[disabled], .nav ul li .link:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
.nav.vertical ul {
|
||||
@@ -889,6 +889,7 @@ textarea {
|
||||
- $thumb-padding : The padding between the image and the border.
|
||||
- $thumb-border : The style of the thumbnail's border.
|
||||
- $thumb-border-radius : The border radius of the thumbnail.
|
||||
- $thumb-hover-color : The color of the thumbnail's border when hovering over it.
|
||||
Notes:
|
||||
- [1] : This style only applies to `img` elements with the class specified in
|
||||
`$thumb-name`.
|
||||
@@ -982,7 +983,10 @@ textarea {
|
||||
img.thumb {
|
||||
padding: 0.25em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px; }
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
img.thumb:hover, img.thumb:focus, img.thumbactive {
|
||||
border-color: #2678b3; }
|
||||
|
||||
.bordered {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
||||
@@ -1017,8 +1021,7 @@ img.thumb {
|
||||
line-height: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.35em solid transparent;
|
||||
border-right: 0.35em solid transparent;
|
||||
border: 0.35em solid transparent;
|
||||
border-top: 0.35em solid #222; }
|
||||
|
||||
.close {
|
||||
@@ -1031,7 +1034,7 @@ img.thumb {
|
||||
cursor: pointer; }
|
||||
.close:before {
|
||||
content: '\00d7'; }
|
||||
.close:hover {
|
||||
.close:hover, .close:active, .close:focus {
|
||||
color: #777; }
|
||||
|
||||
.drg-left {
|
||||
@@ -1088,15 +1091,15 @@ img.thumb {
|
||||
|
||||
.lbl.blue {
|
||||
color: #eeeeee;
|
||||
background: #3f84b3; }
|
||||
background-color: #3f84b3; }
|
||||
|
||||
.lbl.green {
|
||||
color: #eeeeee;
|
||||
background: #2db747; }
|
||||
background-color: #2db747; }
|
||||
|
||||
.lbl.red {
|
||||
color: #eeeeee;
|
||||
background: #ea4848; }
|
||||
background-color: #ea4848; }
|
||||
|
||||
.bdg {
|
||||
display: inline-block;
|
||||
@@ -1109,15 +1112,15 @@ img.thumb {
|
||||
|
||||
.bdg.blue {
|
||||
color: #eeeeee;
|
||||
background: #3f84b3; }
|
||||
background-color: #3f84b3; }
|
||||
|
||||
.bdg.green {
|
||||
color: #eeeeee;
|
||||
background: #2db747; }
|
||||
background-color: #2db747; }
|
||||
|
||||
.bdg.red {
|
||||
color: #eeeeee;
|
||||
background: #ea4848; }
|
||||
background-color: #ea4848; }
|
||||
|
||||
/*
|
||||
Mixin for tab system.
|
||||
@@ -1348,7 +1351,7 @@ input[type="radio"].acrd {
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
input[type="radio"].acrd + label:hover, input[type="radio"].acrd + label:active, input[type="radio"].acrd + label:focus {
|
||||
background: #dbdbdb; }
|
||||
background-color: #dbdbdb; }
|
||||
input[type="radio"].acrd + label + div {
|
||||
display: none;
|
||||
color: #222;
|
||||
@@ -1402,19 +1405,74 @@ input[type="radio"]:checked.acrd + label {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: #eeeeee;
|
||||
background-color: #3f84b3;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
color: #eeeeee; }
|
||||
font-size: 0.8em; }
|
||||
|
||||
.prg > span.green {
|
||||
background-color: #2db747;
|
||||
color: #eeeeee; }
|
||||
color: #eeeeee;
|
||||
background-color: #2db747; }
|
||||
|
||||
.prg > span.red {
|
||||
background-color: #ea4848;
|
||||
color: #eeeeee; }
|
||||
color: #eeeeee;
|
||||
background-color: #ea4848; }
|
||||
|
||||
/*
|
||||
Mixin for dotted spinner component.
|
||||
Parameters:
|
||||
- $spinner-dots-name : The class name of the dotted spinner component.
|
||||
- $spinner-dots-height : The height of the dotted spinner component. [1][2]
|
||||
- $spinner-dots-animation-time : The animation time of the dotted spinner component.
|
||||
Notes:
|
||||
- [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is
|
||||
suggested that you specify it in the same measurement as the text base.
|
||||
- [2] : The value of $spinner-dots-height will be used for both the size of the component
|
||||
and the animation. Some tweaking might be required.
|
||||
*/
|
||||
/*
|
||||
Mixin for dotted spinner component.
|
||||
Parameters:
|
||||
- $spinner-round-name : The class name of the round spinner component.
|
||||
- $spinner-round-size : The size of the round spinner component. [1]
|
||||
- $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
|
||||
- $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
|
||||
- $spinner-round-animation-time : The animation time of the round spinner component.
|
||||
Notes:
|
||||
- [1] : The value of $spinner-round-size affects both height and width of the component.
|
||||
- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles
|
||||
specified in border style format.
|
||||
*/
|
||||
.spinner-dots {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 1.5em;
|
||||
vertical-align: bottom; }
|
||||
.spinner-dots:after {
|
||||
display: inline-table;
|
||||
white-space: pre;
|
||||
content: "\A.\A..\A...";
|
||||
animation: spin-dots 1.5s steps(4) infinite; }
|
||||
|
||||
@keyframes spin-dots {
|
||||
to {
|
||||
transform: translateY(-6em); } }
|
||||
.spinner-round {
|
||||
display: inline-block;
|
||||
border: 0.4em solid rgba(34, 34, 34, 0.2);
|
||||
border-left: 0.4em solid #222;
|
||||
transform: translateZ(0);
|
||||
animation: spin-round 1.5s infinite linear; }
|
||||
.spinner-round, .spinner-round:after {
|
||||
border-radius: 50%;
|
||||
width: 1.5em;
|
||||
height: 1.5em; }
|
||||
|
||||
@keyframes spin-round {
|
||||
0% {
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
/*
|
||||
Mixin for the carousel component.
|
||||
Parameters:
|
||||
@@ -1699,9 +1757,7 @@ input[type="checkbox"]:checked.alert-red + div {
|
||||
.panel > * {
|
||||
padding: 10px; }
|
||||
.panel .head {
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #222;
|
||||
background-color: #e7e7e7;
|
||||
@@ -1809,3 +1865,5 @@ input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.red:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
/*# sourceMappingURL=mini-default.css.map */
|
||||
|
||||
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
@@ -12,7 +12,7 @@
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.0 (September, 2016)
|
||||
mini.css version: v1.1 (October, 2016)
|
||||
*/
|
||||
//====================================================================
|
||||
//
|
||||
@@ -202,6 +202,7 @@ $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).
|
||||
$thumbnail-hover-color: $a-color; // Border color of the thumbnail when hovering over it
|
||||
$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
|
||||
@@ -214,7 +215,7 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the
|
||||
@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-thumb($thumbnail-class-name, 0.25em, 1px solid #ccc, 4px, $thumbnail-hover-color);
|
||||
@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);
|
||||
@@ -302,7 +303,7 @@ $modal-border: 1px solid #ccc; // Border style for the modal
|
||||
// Variable definitions for the Dropdown module (_dropdown.scss)
|
||||
//====================================================================
|
||||
// Dropdown class names.
|
||||
$dropdown-class-name: dropdown; // Name for the modal class
|
||||
$dropdown-class-name: dropdown; // Name for the dropdown class
|
||||
// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/dropdown';
|
||||
// Use dropdown mixin to create dropdown with given specs. For more information
|
||||
@@ -339,7 +340,7 @@ $accordion-label-bg-color: $collapse-bg-color; // Background color for t
|
||||
$progress-class-name: prg; // Name for the progress class
|
||||
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
||||
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
||||
// Progress and p progress variants colors (you can remove things you
|
||||
// Progress and progress variants colors (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
||||
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
||||
@@ -356,6 +357,21 @@ $progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for t
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Spinner module (spinner.scss)
|
||||
//====================================================================
|
||||
// Spinner class names.
|
||||
$spinner-dotted-name: spinner-dots; // Name for the dotted spinner class
|
||||
$spinner-round-name: spinner-round; // Name for the round spinner class
|
||||
// Spinner colors.
|
||||
$spinner-round-doughnout: 0.4em solid rgba(34,34,34, 0.2); // Style for the round spinner doughnut
|
||||
$spinner-round-spin: 0.4em solid #222; // Style for the round spinner spinning part
|
||||
// Enable progress (spinner.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/spinner';
|
||||
// Use spinner mixins to create spinners with given specs. For more
|
||||
// information refer to the spinner.scss file to check the definitions.
|
||||
@include make-spinner-dots($spinner-dotted-name, 1.5em, 1.5s);
|
||||
@include make-spinner-round($spinner-round-name, 1.5em, $spinner-round-doughnout, $spinner-round-spin, 1.5s);
|
||||
//====================================================================
|
||||
// Variable definitions for the Carousel module (_carousel.scss)
|
||||
//====================================================================
|
||||
// Carousel class names.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/*
|
||||
Flavor name: NiteOwl (mini-niteowl)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.0 (September, 2016)
|
||||
mini.css version: v1.1 (October, 2016)
|
||||
*/
|
||||
/*
|
||||
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
@@ -390,7 +390,7 @@ textarea {
|
||||
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 {
|
||||
background: #585858; }
|
||||
.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], .btn:disabled, a.btn.disabled, a.btn[disabled], a.btn:disabled, a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visited:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
|
||||
@@ -819,7 +819,7 @@ textarea {
|
||||
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
||||
color: #f5f5f5;
|
||||
background: #17212e; }
|
||||
.nav ul li .link.disabled, .nav ul li .link[disabled] {
|
||||
.nav ul li .link.disabled, .nav ul li .link[disabled], .nav ul li .link:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
.nav.vertical ul {
|
||||
@@ -889,6 +889,7 @@ textarea {
|
||||
- $thumb-padding : The padding between the image and the border.
|
||||
- $thumb-border : The style of the thumbnail's border.
|
||||
- $thumb-border-radius : The border radius of the thumbnail.
|
||||
- $thumb-hover-color : The color of the thumbnail's border when hovering over it.
|
||||
Notes:
|
||||
- [1] : This style only applies to `img` elements with the class specified in
|
||||
`$thumb-name`.
|
||||
@@ -982,7 +983,10 @@ textarea {
|
||||
img.thumb {
|
||||
padding: 0.25em;
|
||||
border: 1px solid #304251;
|
||||
border-radius: 4px; }
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
img.thumb:hover, img.thumb:focus, img.thumbactive {
|
||||
border-color: #6493cd; }
|
||||
|
||||
.bordered {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
||||
@@ -1017,8 +1021,7 @@ img.thumb {
|
||||
line-height: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 0.35em solid transparent;
|
||||
border-right: 0.35em solid transparent;
|
||||
border: 0.35em solid transparent;
|
||||
border-top: 0.35em solid #aaa; }
|
||||
|
||||
.close {
|
||||
@@ -1031,7 +1034,7 @@ img.thumb {
|
||||
cursor: pointer; }
|
||||
.close:before {
|
||||
content: '\00d7'; }
|
||||
.close:hover {
|
||||
.close:hover, .close:active, .close:focus {
|
||||
color: #777; }
|
||||
|
||||
.drg-left {
|
||||
@@ -1088,15 +1091,15 @@ img.thumb {
|
||||
|
||||
.lbl.blue {
|
||||
color: #f5f5f5;
|
||||
background: #364952; }
|
||||
background-color: #364952; }
|
||||
|
||||
.lbl.green {
|
||||
color: #f5f5f5;
|
||||
background: #409f45; }
|
||||
background-color: #409f45; }
|
||||
|
||||
.lbl.red {
|
||||
color: #f5f5f5;
|
||||
background: #e72a2a; }
|
||||
background-color: #e72a2a; }
|
||||
|
||||
.bdg {
|
||||
display: inline-block;
|
||||
@@ -1109,15 +1112,15 @@ img.thumb {
|
||||
|
||||
.bdg.blue {
|
||||
color: #f5f5f5;
|
||||
background: #364952; }
|
||||
background-color: #364952; }
|
||||
|
||||
.bdg.green {
|
||||
color: #f5f5f5;
|
||||
background: #409f45; }
|
||||
background-color: #409f45; }
|
||||
|
||||
.bdg.red {
|
||||
color: #f5f5f5;
|
||||
background: #e72a2a; }
|
||||
background-color: #e72a2a; }
|
||||
|
||||
/*
|
||||
Mixin for tab system.
|
||||
@@ -1348,7 +1351,7 @@ input[type="radio"].acrd {
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
input[type="radio"].acrd + label:hover, input[type="radio"].acrd + label:active, input[type="radio"].acrd + label:focus {
|
||||
background: #192531; }
|
||||
background-color: #192531; }
|
||||
input[type="radio"].acrd + label + div {
|
||||
display: none;
|
||||
color: #f5f5f5;
|
||||
@@ -1402,19 +1405,74 @@ input[type="radio"]:checked.acrd + label {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: #f5f5f5;
|
||||
background-color: #364952;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
color: #f5f5f5; }
|
||||
font-size: 0.8em; }
|
||||
|
||||
.prg > span.green {
|
||||
background-color: #409f45;
|
||||
color: #f5f5f5; }
|
||||
color: #f5f5f5;
|
||||
background-color: #409f45; }
|
||||
|
||||
.prg > span.red {
|
||||
background-color: #e72a2a;
|
||||
color: #f5f5f5; }
|
||||
color: #f5f5f5;
|
||||
background-color: #e72a2a; }
|
||||
|
||||
/*
|
||||
Mixin for dotted spinner component.
|
||||
Parameters:
|
||||
- $spinner-dots-name : The class name of the dotted spinner component.
|
||||
- $spinner-dots-height : The height of the dotted spinner component. [1][2]
|
||||
- $spinner-dots-animation-time : The animation time of the dotted spinner component.
|
||||
Notes:
|
||||
- [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is
|
||||
suggested that you specify it in the same measurement as the text base.
|
||||
- [2] : The value of $spinner-dots-height will be used for both the size of the component
|
||||
and the animation. Some tweaking might be required.
|
||||
*/
|
||||
/*
|
||||
Mixin for dotted spinner component.
|
||||
Parameters:
|
||||
- $spinner-round-name : The class name of the round spinner component.
|
||||
- $spinner-round-size : The size of the round spinner component. [1]
|
||||
- $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
|
||||
- $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
|
||||
- $spinner-round-animation-time : The animation time of the round spinner component.
|
||||
Notes:
|
||||
- [1] : The value of $spinner-round-size affects both height and width of the component.
|
||||
- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles
|
||||
specified in border style format.
|
||||
*/
|
||||
.spinner-dots {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 1.5em;
|
||||
vertical-align: bottom; }
|
||||
.spinner-dots:after {
|
||||
display: inline-table;
|
||||
white-space: pre;
|
||||
content: "\A.\A..\A...";
|
||||
animation: spin-dots 1.5s steps(4) infinite; }
|
||||
|
||||
@keyframes spin-dots {
|
||||
to {
|
||||
transform: translateY(-6em); } }
|
||||
.spinner-round {
|
||||
display: inline-block;
|
||||
border: 0.4em solid rgba(245, 245, 245, 0.2);
|
||||
border-left: 0.4em solid #f5f5f5;
|
||||
transform: translateZ(0);
|
||||
animation: spin-round 1.5s infinite linear; }
|
||||
.spinner-round, .spinner-round:after {
|
||||
border-radius: 50%;
|
||||
width: 1.5em;
|
||||
height: 1.5em; }
|
||||
|
||||
@keyframes spin-round {
|
||||
0% {
|
||||
transform: rotate(0deg); }
|
||||
100% {
|
||||
transform: rotate(360deg); } }
|
||||
/*
|
||||
Mixin for the carousel component.
|
||||
Parameters:
|
||||
@@ -1699,9 +1757,7 @@ input[type="checkbox"]:checked.alert-red + div {
|
||||
.panel > * {
|
||||
padding: 10px; }
|
||||
.panel .head {
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #304251;
|
||||
color: #f5f5f5;
|
||||
background-color: #26384b;
|
||||
@@ -1809,3 +1865,5 @@ input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.red:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
/*# sourceMappingURL=mini-niteowl.css.map */
|
||||
|
||||
2
flavors/mini-niteowl.min.css
vendored
2
flavors/mini-niteowl.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -12,7 +12,7 @@
|
||||
/*
|
||||
Flavor name: NiteOwl (mini-niteowl)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v1.0 (September, 2016)
|
||||
mini.css version: v1.1 (October, 2016)
|
||||
*/
|
||||
//====================================================================
|
||||
//
|
||||
@@ -202,6 +202,7 @@ $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).
|
||||
$thumbnail-hover-color: $a-color; // Border color of the thumbnail when hovering over it
|
||||
$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
|
||||
@@ -214,7 +215,7 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the
|
||||
@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 #304251, 4px);
|
||||
@include make-thumb($thumbnail-class-name, 0.25em, 1px solid #304251, 4px, $thumbnail-hover-color);
|
||||
@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);
|
||||
@@ -302,7 +303,7 @@ $modal-border: 1px solid #304251; // Border style for the modal
|
||||
// Variable definitions for the Dropdown module (_dropdown.scss)
|
||||
//====================================================================
|
||||
// Dropdown class names.
|
||||
$dropdown-class-name: dropdown; // Name for the modal class
|
||||
$dropdown-class-name: dropdown; // Name for the dropdown class
|
||||
// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/dropdown';
|
||||
// Use dropdown mixin to create dropdown with given specs. For more information
|
||||
@@ -339,7 +340,7 @@ $accordion-label-bg-color: $collapse-bg-color; // Background color for t
|
||||
$progress-class-name: prg; // Name for the progress class
|
||||
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
||||
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
||||
// Progress and p progress variants colors (you can remove things you
|
||||
// Progress and progress variants colors (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
||||
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
||||
@@ -356,6 +357,21 @@ $progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for t
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Spinner module (spinner.scss)
|
||||
//====================================================================
|
||||
// Spinner class names.
|
||||
$spinner-dotted-name: spinner-dots; // Name for the dotted spinner class
|
||||
$spinner-round-name: spinner-round; // Name for the round spinner class
|
||||
// Spinner colors.
|
||||
$spinner-round-doughnout: 0.4em solid rgba(245,245,245, 0.2); // Style for the round spinner doughnut
|
||||
$spinner-round-spin: 0.4em solid #f5f5f5; // Style for the round spinner spinning part
|
||||
// Enable progress (spinner.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/spinner';
|
||||
// Use spinner mixins to create spinners with given specs. For more
|
||||
// information refer to the spinner.scss file to check the definitions.
|
||||
@include make-spinner-dots($spinner-dotted-name, 1.5em, 1.5s);
|
||||
@include make-spinner-round($spinner-round-name, 1.5em, $spinner-round-doughnout, $spinner-round-spin, 1.5s);
|
||||
//====================================================================
|
||||
// Variable definitions for the Carousel module (_carousel.scss)
|
||||
//====================================================================
|
||||
// Carousel class names.
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mini.css",
|
||||
"version": "1.0.1",
|
||||
"version": "1.1.0",
|
||||
"description": "A minimal Sass-y responsive mobile-first style-agnostic CSS framework.",
|
||||
"main": "flavors/mini-default.min.css",
|
||||
"directories": {
|
||||
|
||||
420
scss/flavor.scss
420
scss/flavor.scss
@@ -1,420 +0,0 @@
|
||||
//====================================================================
|
||||
// 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)
|
||||
*/
|
||||
//====================================================================
|
||||
//
|
||||
// CORE COMPONENTS (located in `mini`):
|
||||
//
|
||||
//====================================================================
|
||||
// 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-color, $navigation-bg-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);
|
||||
//====================================================================
|
||||
//
|
||||
// EXTRA COMPONENTS (located in `mini-extra`):
|
||||
//
|
||||
//====================================================================
|
||||
// Variable definitions for the Label module (_label.scss)
|
||||
//====================================================================
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$lbl-default-color: $btn-alt-color; // Default text color for labels/badges
|
||||
$lbl-default-bg-color: #777; // Default background color for labels/badges
|
||||
$lbl-b-bg-color: $btn-b-bg-color; // Color for labels/badges style 1
|
||||
$lbl-g-bg-color: $btn-g-bg-color; // Color for labels/badges style 2
|
||||
$lbl-r-bg-color: $btn-r-bg-color; // Color for labels/badges style 3
|
||||
// Label class names (you can remove things you don't need or define more
|
||||
// classes if you need them).
|
||||
$lbl-class-name: lbl; // Name for the base labels class
|
||||
$lbl-style1-name: 'blue'; // Name for labels/badges style 1 class
|
||||
$lbl-style2-name: 'green'; // Name for labels/badges style 2 class
|
||||
$lbl-style3-name: 'red'; // Name for labels/badges style 3 class
|
||||
$badge-class-name: bdg; // Name for the base badges class
|
||||
// Enable labels (_label.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/label';
|
||||
// Use label mixins to create labels with given specs. For more information
|
||||
// refer to the _label.scss file to check the definitions.
|
||||
@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, 4px, 6px 10px, hide);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||
@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 8px, 3px 8px, hide);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style1-name, $lbl-default-color, $lbl-b-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style2-name, $lbl-default-color, $lbl-g-bg-color);
|
||||
@include make-lbl-style($badge-class-name, $lbl-style3-name, $lbl-default-color, $lbl-r-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Tab module (_tab.scss)
|
||||
//====================================================================
|
||||
// Tab class names.
|
||||
$tabs-class-name: tabs; // Name for the tab system container class
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$tabs-border-color: #ccc; // Border color for the tabs system
|
||||
$tabs-content-bg-color: #fff; // Background for the active tab's content
|
||||
$tabs-color: $a-color; // Color for the text in the tab labels
|
||||
$tabs-bg-color: $body-bg-color; // Background color for the tab labels
|
||||
$tabs-active-color: $body-color; // Color for the text in the active tab's label
|
||||
$tabs-active-bg-color: $tabs-content-bg-color; // Background color for the active tab's label
|
||||
$tabs-active-stripe-style: 3px solid $a-color; // Style for the active tab label's stripe
|
||||
// Enable tabs (_tab.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/tab';
|
||||
// Use tabs mixin to create tab system with given specs. For more information
|
||||
// refer to the _tab.scss file to check the definitions.
|
||||
@include make-tabs($tabs-class-name, 250px, 3px, 40px, 8px 14px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
|
||||
//====================================================================
|
||||
// Variable definitions for the Modal module (_modal.scss)
|
||||
//====================================================================
|
||||
// Modal class names.
|
||||
$modal-class-name: modal; // Name for the modal class
|
||||
// Colors and styles (you can remove things you don't need or define more
|
||||
// colors if you need them).
|
||||
$modal-bg-color: $body-bg-color; // Background color for the modal
|
||||
$modal-color: $body-color; // Color for the text in the modal
|
||||
$modal-border: 1px solid #ccc; // Border style for the modal
|
||||
// Enable modal (_modal.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/modal';
|
||||
// Use modal mixin to create modal with given specs. For more information
|
||||
// refer to the _modal.scss file to check the definitions.
|
||||
@include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 4px, 18px, 8.5%, 45%);
|
||||
@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
|
||||
//====================================================================
|
||||
// Variable definitions for the Dropdown module (_dropdown.scss)
|
||||
//====================================================================
|
||||
// Dropdown class names.
|
||||
$dropdown-class-name: dropdown; // Name for the modal class
|
||||
// Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/dropdown';
|
||||
// Use dropdown mixin to create dropdown with given specs. For more information
|
||||
// refer to the _dropdown.scss file to check the definitions.
|
||||
@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 0.8em);
|
||||
//====================================================================
|
||||
// Variable definitions for the Collapse module (_collapse.scss)
|
||||
//====================================================================
|
||||
// Collapse and accordion class names.
|
||||
$collapse-class-name: clps; // Name for the collapse class
|
||||
$accordion-class-name: acrd; // Name for the accordion class
|
||||
// Collapse colors and styles (you can remove things you don't need or
|
||||
// define more colors if you need them).
|
||||
$collapse-border: 1px solid #ccc; // Border style for the collapse
|
||||
$collapse-color: $body-color; // Color for the text in the collapse
|
||||
$collapse-bg-color: #eeeeee; // Background color for the collapse
|
||||
// Accordion colors and styles (you can remove things you don't need or
|
||||
// define more colors if you need them).
|
||||
$accordion-border: $collapse-border; // Border style for the accordion
|
||||
$accordion-color: $collapse-color; // Color for the text in the accordion
|
||||
$accordion-bg-color: $body-bg-color; // Background color for the accordion
|
||||
$accordion-label-color: $collapse-color; // Color for the text in the accordion's label
|
||||
$accordion-label-bg-color: $collapse-bg-color; // Background color for the accordion's label
|
||||
// Enable collapse (_collapse.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/collapse';
|
||||
// Use collapse and accordion mixins to create components wit the given specs.
|
||||
// For more information refer to the _collapse.scss file to check the definitions.
|
||||
@include make-collapse($collapse-class-name, $collapse-border, 4px, 10px, 5px, $collapse-color, $collapse-bg-color);
|
||||
@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);
|
||||
//====================================================================
|
||||
// Variable definitions for the Progress module (_progress.scss)
|
||||
//====================================================================
|
||||
// Progress and progress variants class names.
|
||||
$progress-class-name: prg; // Name for the progress class
|
||||
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
||||
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
||||
// Progress and p progress variants colors (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
||||
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
||||
$progress-bar-style1-color: $btn-alt-color; // Color for the text of the style 1 progress bar
|
||||
$progress-bar-style2-color: $btn-alt-color; // Color for the text of the style 2 progress bar
|
||||
$progress-bar-bg-color: $btn-b-bg-color; // Background color for the progress bar
|
||||
$progress-bar-style1-bg-color: $btn-g-bg-color; // Background color for the style 1 progress bar
|
||||
$progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for the style 2 progress bar
|
||||
// Enable progress (_progress.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/progress';
|
||||
// Use progress mixins to create progress bars with given specs. For more
|
||||
// information refer to the _progress.scss file to check the definitions.
|
||||
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 0.8em, $progress-bar-color, $progress-bar-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Carousel module (_carousel.scss)
|
||||
//====================================================================
|
||||
// Carousel class names.
|
||||
$carousel-class-name: carousel; // Name for the carousel class
|
||||
// Carousel colors and styles.
|
||||
$carousel-border: 1px solid #ccc; // Border style for the carousel
|
||||
$carousel-content-bg-color: #e7e7e7; // Background color for the carousel
|
||||
$carousel-description-color: $body-bg-color; // Color for the text in the carousel's description
|
||||
$carousel-description-bg-color: $body-color; // Background color for the carousel's description
|
||||
$carousel-control-color: #fafafa; // Color for the carousel's control elements
|
||||
// Enable carousel (_carousel.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/carousel';
|
||||
// Use carousel mixin to create carousel with given specs. For more
|
||||
// information refer to the _carousel.scss file to check the definitions.
|
||||
@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 340px, 160px, 450px, 1.8em, $carousel-control-color);
|
||||
//====================================================================
|
||||
// Variable definitions for the Utility module (_utility.scss)
|
||||
//====================================================================
|
||||
// Utility class names.
|
||||
$breadcrumbs-class-name: brdcrmb; // Name for the breadcrumbs class
|
||||
$well-class-name: well; // Name for the well class
|
||||
$alert-style1-class: alert-blue; // Name for the style 1 alert
|
||||
$alert-style2-class: alert-green; // Name for the style 2 alert
|
||||
$alert-style3-class: alert-red; // Name for the style 3 alert
|
||||
$panel-class-name: panel; // Name for the panel class
|
||||
$panel-header-name: head; // Name for the panel's header class
|
||||
$button-states-class-name: stateful; // Name for the stateful button class
|
||||
$button-group-class-name: btn-grp; // Name for the button group class
|
||||
$popover-above-name: popover-top; // Name for the popover above class
|
||||
$popover-below-name: popover-bottom; // Name for the popover below class
|
||||
// Utility color variables and styles (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$well-color: $body-color; // Text color for the well
|
||||
$well-bg-color: #e7e7e7; // Background color for the well
|
||||
$panel-color: $body-color; // Text color for the panel
|
||||
$panel-bg-color: $body-bg-color; // Background color for the panel
|
||||
$panel-header-color: $body-color; // Text color for the panel's header
|
||||
$panel-header-bg-color: #e7e7e7; // Background color for the panel's header
|
||||
$popover-color: $body-bg-color; // Text color for the popover
|
||||
$popover-bg-color: $body-color; // Background color for the popover
|
||||
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/utility';
|
||||
// Use utilities mixins to create utilities with given specs. For more
|
||||
// information refer to the _utility.scss file to check the definitions.
|
||||
@include make-breadcrumbs($breadcrumbs-class-name);
|
||||
@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #ccc, 4px, 20px);
|
||||
@include make-alert($alert-style1-class, darken($btn-b-bg-color,20%), lighten($btn-b-bg-color, 10%) , 1px solid darken($btn-b-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-alert($alert-style2-class, darken($btn-g-bg-color,20%), lighten($btn-g-bg-color, 10%) , 1px solid darken($btn-g-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-alert($alert-style3-class, darken($btn-r-bg-color,20%), lighten($btn-r-bg-color, 10%) , 1px solid darken($btn-r-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ccc, 4px, 10px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 10px);
|
||||
@include make-popover($popover-above-name, top, 5px, 45px, $popover-color, $popover-bg-color, 7px 10px);
|
||||
@include make-popover($popover-below-name, bottom, 4px, 45px, $popover-color, $popover-bg-color, 7px 10px);
|
||||
// Use experimental utilities mixins to create utilities with given
|
||||
// specs. Please exercise caution when using these mixins.
|
||||
//@include make-button-states($button-states-class-name); // This mixin is unstable and buggy, we suggest you disable it.
|
||||
// The folowing mixin is considered stable, you can disable it if you need to.
|
||||
@include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-b-bg-color, 10%), 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-g-bg-color, 10%), 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-r-bg-color, 10%), 4px);
|
||||
//====================================================================
|
||||
//====================================================================
|
||||
@@ -77,10 +77,10 @@
|
||||
cursor: pointer;
|
||||
&:hover, &:active, &:focus{
|
||||
@if $accordion-hover-style == 'lighten'{
|
||||
background: lighten($accordion-label-bg-color, $accordion-hover-style-percentage);
|
||||
background-color: lighten($accordion-label-bg-color, $accordion-hover-style-percentage);
|
||||
}
|
||||
@else{
|
||||
background: darken($accordion-label-bg-color, $accordion-hover-style-percentage);
|
||||
background-color: darken($accordion-label-bg-color, $accordion-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
& + div{
|
||||
|
||||
@@ -39,6 +39,6 @@
|
||||
@mixin make-lbl-style($lbl-name, $lbl-style-name, $lbl-style-color, $lbl-style-bg-color){
|
||||
.#{$lbl-name}.#{$lbl-style-name}{
|
||||
color: $lbl-style-color;
|
||||
background: $lbl-style-bg-color;
|
||||
background-color: $lbl-style-bg-color;
|
||||
}
|
||||
}
|
||||
@@ -25,10 +25,10 @@
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: $progress-bar-color;
|
||||
background-color: $progress-bar-bg-color;
|
||||
text-align: center;
|
||||
font-size: $progress-font-size;
|
||||
color: $progress-bar-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -47,7 +47,7 @@
|
||||
*/
|
||||
@mixin make-progress-bar-variant($progress-name, $progress-bar-variant-name, $progress-bar-variant-color, $progress-bar-variant-bg-color){
|
||||
.#{$progress-name} > span.#{$progress-bar-variant-name}{
|
||||
background-color: $progress-bar-variant-bg-color;
|
||||
color: $progress-bar-variant-color;
|
||||
background-color: $progress-bar-variant-bg-color;
|
||||
}
|
||||
}
|
||||
56
scss/mini-extra/_spinner.scss
Normal file
56
scss/mini-extra/_spinner.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
/*
|
||||
Mixin for dotted spinner component.
|
||||
Parameters:
|
||||
- $spinner-dots-name : The class name of the dotted spinner component.
|
||||
- $spinner-dots-height : The height of the dotted spinner component. [1][2]
|
||||
- $spinner-dots-animation-time : The animation time of the dotted spinner component.
|
||||
Notes:
|
||||
- [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is
|
||||
suggested that you specify it in the same measurement as the text base.
|
||||
- [2] : The value of $spinner-dots-height will be used for both the size of the component
|
||||
and the animation. Some tweaking might be required.
|
||||
*/
|
||||
@mixin make-spinner-dots($spinner-dots-name, $spinner-dots-height, $spinner-dots-animation-time){
|
||||
.#{$spinner-dots-name}{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: $spinner-dots-height;
|
||||
vertical-align: bottom;
|
||||
&:after{
|
||||
display: inline-table;
|
||||
white-space: pre;
|
||||
content: "\A.\A..\A...";
|
||||
animation: spin-dots $spinner-dots-animation-time steps(4) infinite;
|
||||
}
|
||||
}
|
||||
@keyframes spin-dots { to {transform: translateY(-$spinner-dots-height*4);} }
|
||||
}
|
||||
/*
|
||||
Mixin for dotted spinner component.
|
||||
Parameters:
|
||||
- $spinner-round-name : The class name of the round spinner component.
|
||||
- $spinner-round-size : The size of the round spinner component. [1]
|
||||
- $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
|
||||
- $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
|
||||
- $spinner-round-animation-time : The animation time of the round spinner component.
|
||||
Notes:
|
||||
- [1] : The value of $spinner-round-size affects both height and width of the component.
|
||||
- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles
|
||||
specified in border style format.
|
||||
*/
|
||||
@mixin make-spinner-round( $spinner-round-name, $spinner-round-size, $spinner-round-doughnut-style,
|
||||
$spinner-round-spin-style, $spinner-round-animation-time ){
|
||||
.#{$spinner-round-name}{
|
||||
display: inline-block;
|
||||
border: $spinner-round-doughnut-style;
|
||||
border-left: $spinner-round-spin-style;
|
||||
transform: translateZ(0);
|
||||
animation: spin-round $spinner-round-animation-time infinite linear;
|
||||
&,&:after{
|
||||
border-radius: 50%;
|
||||
width: $spinner-round-size;
|
||||
height: $spinner-round-size;
|
||||
}
|
||||
}
|
||||
@keyframes spin-round { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
|
||||
}
|
||||
@@ -125,9 +125,7 @@
|
||||
padding: $panel-padding;
|
||||
}
|
||||
& .#{$panel-header-name}{
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border: 0;
|
||||
border-bottom: $panel-border;
|
||||
color: $panel-header-color;
|
||||
background-color: $panel-header-bg-color;
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
padding: $btn-padding;
|
||||
@include btn-variant($btn-color, $btn-bg-color, $btn-hover-style, $btn-hover-style-percentage);
|
||||
cursor: $btn-cursor;
|
||||
&.disabled, &[disabled], &fieldset[disabled]{
|
||||
&.disabled, &[disabled], &:disabled{
|
||||
cursor: $btn-disabled-cursor;
|
||||
opacity: $btn-disabled-opacity;
|
||||
}
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
background: darken($nav-bg-color, $nav-hover-style-percentage);
|
||||
}
|
||||
}
|
||||
&.disabled, &[disabled]{
|
||||
&.disabled, &[disabled], &:disabled{
|
||||
cursor: $nav-disabled-cursor;
|
||||
opacity: $nav-disabled-opacity;
|
||||
}
|
||||
|
||||
@@ -5,15 +5,20 @@
|
||||
- $thumb-padding : The padding between the image and the border.
|
||||
- $thumb-border : The style of the thumbnail's border.
|
||||
- $thumb-border-radius : The border radius of the thumbnail.
|
||||
- $thumb-hover-color : The color of the thumbnail's border when hovering over it.
|
||||
Notes:
|
||||
- [1] : This style only applies to `img` elements with the class specified in
|
||||
`$thumb-name`.
|
||||
*/
|
||||
@mixin make-thumb($thumb-name, $thumb-padding, $thumb-border, $thumb-border-radius){
|
||||
@mixin make-thumb($thumb-name, $thumb-padding, $thumb-border, $thumb-border-radius, $thumb-hover-color){
|
||||
img.#{$thumb-name}{
|
||||
padding: $thumb-padding;
|
||||
border: $thumb-border;
|
||||
border-radius: $thumb-border-radius;
|
||||
cursor: pointer;
|
||||
&:hover, &:focus, &active{
|
||||
border-color: $thumb-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
@@ -92,8 +97,7 @@
|
||||
line-height: 1;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: $caret-size solid transparent;
|
||||
border-right: $caret-size solid transparent;
|
||||
border: $caret-size solid transparent;
|
||||
border-top: $caret-size solid $caret-color;
|
||||
}
|
||||
}
|
||||
@@ -119,7 +123,7 @@
|
||||
&:before {
|
||||
content: '\00d7';
|
||||
}
|
||||
&:hover{
|
||||
&:hover, &:active, &:focus{
|
||||
color: $close-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user