mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-13 17:33:59 +02:00
Code Issues Releases Wiki Activity

Bootstrap flavor - full

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-11 14:16:33 +03:00
parent baee949488
commit 63a6e2479a
5 changed files with 212 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
flavors/mini-bootstrap.css
View File

@@ -1394,46 +1394,46 @@ img.thumbnail {
- [3] : The values that $accordion-hover-style can take are `lighten` and `darken`. The inside condition only - [3] : The values that $accordion-hover-style can take are `lighten` and `darken`. The inside condition only
checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`. checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
*/ */
input[type="checkbox"].clps { input[type="checkbox"].collapse {
display: none; } display: none; }
input[type="checkbox"].clps + div { input[type="checkbox"].collapse + div {
display: none; display: none;
color: #333; color: #333;
background-color: #eeeeee; background-color: #f5f5f5;
padding: 10px; padding: 19px;
margin-top: 5px; margin-top: 6px;
border: 1px solid #ccc; border: 1px solid #e3e3e3;
border-radius: 4px; } border-radius: 4px; }
input[type="checkbox"]:checked.clps + div { input[type="checkbox"]:checked.collapse + div {
display: block; } display: block; }
input[type="radio"].acrd { input[type="radio"].accordion {
display: none; } display: none; }
input[type="radio"].acrd + label { input[type="radio"].accordion + label {
width: 100%; width: 100%;
display: block; display: block;
color: #333; color: #333;
background-color: #eeeeee; background-color: #f5f5f5;
padding: 8px; padding: 8px;
margin-bottom: 5px; margin-bottom: 6px;
border: 1px solid #ccc; border: 1px solid #e3e3e3;
border-radius: 4px; border-radius: 4px;
cursor: pointer; } cursor: pointer; }
input[type="radio"].acrd + label:hover, input[type="radio"].acrd + label:active, input[type="radio"].acrd + label:focus { input[type="radio"].accordion + label:hover, input[type="radio"].accordion + label:active, input[type="radio"].accordion + label:focus {
background-color: #dbdbdb; } background-color: #e2e2e2; }
input[type="radio"].acrd + label + div { input[type="radio"].accordion + label + div {
display: none; display: none;
color: #333; color: #333;
background-color: #fff; background-color: #fff;
padding: 10px; padding: 19px;
margin-top: -1px; margin-top: -1px;
margin-bottom: 5px; margin-bottom: 6px;
border: 1px solid #ccc; border: 1px solid #e3e3e3;
border-radius: 0 0 4px 4px; } border-radius: 0 0 4px 4px; }
input[type="radio"]:checked.acrd + label { input[type="radio"]:checked.accordion + label {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
margin-bottom: 0; } margin-bottom: 0; }
input[type="radio"]:checked.acrd + label + div { input[type="radio"]:checked.accordion + label + div {
display: block; } display: block; }
/* /*
@@ -1464,29 +1464,37 @@ input[type="radio"]:checked.acrd + label {
- [2] : This mixin should be used in combination with `make-progress` and is suggested that you - [2] : This mixin should be used in combination with `make-progress` and is suggested that you
use it after `make-progress`. use it after `make-progress`.
*/ */
.prg { .progress-bar {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 20px; height: 20px;
background-color: #d7d7d7; background-color: #d7d7d7;
border-radius: 4px; } border-radius: 4px; }
.prg > span { .progress-bar > span {
float: left; float: left;
width: 0; width: 0;
height: 100%; height: 100%;
color: #fff; color: #fff;
background-color: #337ab7; background-color: #337ab7;
text-align: center; text-align: center;
font-size: 0.8em; } font-size: 12px; }
.prg > span.green { .progress-bar > span.progress-bar-success {
color: #fff; color: #fff;
background-color: #5cb85c; } background-color: #5cb85c; }
.prg > span.red { .progress-bar > span.progress-bar-info {
color: #fff; color: #fff;
background-color: #5bc0de; } background-color: #5bc0de; }
.progress-bar > span.progress-bar-warning {
color: #fff;
background-color: #f0ad4e; }
.progress-bar > span.progress-bar-danger {
color: #fff;
background-color: #d9534f; }
/* /*
Mixin for dotted spinner component. Mixin for dotted spinner component.
Parameters: Parameters:
@@ -1515,7 +1523,7 @@ input[type="radio"]:checked.acrd + label {
.spinner-dots { .spinner-dots {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
height: 1.5em; height: 20px;
vertical-align: bottom; } vertical-align: bottom; }
.spinner-dots:after { .spinner-dots:after {
display: inline-table; display: inline-table;
@@ -1525,17 +1533,17 @@ input[type="radio"]:checked.acrd + label {
@keyframes spin-dots { @keyframes spin-dots {
to { to {
transform: translateY(-6em); } } transform: translateY(-80px); } }
.spinner-round { .spinner-round {
display: inline-block; display: inline-block;
border: 0.4em solid rgba(34, 34, 34, 0.2); border: 6px solid rgba(51, 51, 51, 0.25);
border-left: 0.4em solid #222; border-left: 6px solid #337ab7;
transform: translateZ(0); transform: translateZ(0);
animation: spin-round 1.5s infinite linear; } animation: spin-round 1.5s infinite linear; }
.spinner-round, .spinner-round:after { .spinner-round, .spinner-round:after {
border-radius: 50%; border-radius: 50%;
width: 1.5em; width: 20px;
height: 1.5em; } height: 20px; }
@keyframes spin-round { @keyframes spin-round {
0% { 0% {
@@ -1574,7 +1582,7 @@ input[type="radio"]:checked.acrd + label {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
margin: auto; margin: auto;
border: 1px solid #ccc; border: 1px solid #ddd;
border-radius: 4px; } border-radius: 4px; }
.carousel input[type="radio"] { .carousel input[type="radio"] {
display: none; } display: none; }
@@ -1597,7 +1605,7 @@ input[type="radio"]:checked.acrd + label {
height: 160px; height: 160px;
overflow: auto; overflow: auto;
left: 0; left: 0;
top: 340px; top: 360px;
background-color: #333; background-color: #333;
color: #fff; color: #fff;
opacity: 0.1; } opacity: 0.1; }
@@ -1608,7 +1616,7 @@ input[type="radio"]:checked.acrd + label {
z-index: 998; z-index: 998;
cursor: pointer; cursor: pointer;
top: 450px; top: 450px;
color: #fafafa; color: #fff;
font-size: 1.8em; } font-size: 1.8em; }
.carousel input[type="radio"] + div + label:before { .carousel input[type="radio"] + div + label:before {
content: '\25cb'; } content: '\25cb'; }
@@ -1715,122 +1723,151 @@ input[type="radio"]:checked.acrd + label {
- [4] : The results of this mixin are purely stylistic and do not provide any grouping - [4] : The results of this mixin are purely stylistic and do not provide any grouping
functionality. functionality.
*/ */
.brdcrmb { .breadcrumb {
list-style: none; } list-style: none; }
.brdcrmb > li { .breadcrumb > li {
display: inline-block; } display: inline-block; }
.brdcrmb > li + li:before { .breadcrumb > li + li:before {
content: '\27e9\00a0'; } content: '\002f\00a0'; }
.well { .well {
border: 1px solid #ccc; border: 1px solid #e3e3e3;
border-radius: 4px; border-radius: 4px;
background-color: #e7e7e7; background-color: #f5f5f5;
color: #333; color: #333;
padding: 20px; } padding: 19px; }
.alert-blue + div { .alert-success + div {
border: 1px solid #285f8f;
border-radius: 4px;
background-color: #4f93ce;
color: #1d4567;
padding: 20px; }
input[type="checkbox"].alert-blue {
display: none; }
input[type="checkbox"].alert-blue + div {
display: none;
position: relative; }
input[type="checkbox"].alert-blue + div a {
font-weight: 700;
text-decoration: none;
color: #122a3f; }
input[type="checkbox"].alert-blue + div a:hover, input[type="checkbox"].alert-blue + div a:active, input[type="checkbox"].alert-blue + div a:focus {
text-decoration: underline; }
input[type="checkbox"].alert-blue + div .close {
position: absolute;
top: 20px;
right: 20px;
color: #1d4567; }
input[type="checkbox"].alert-blue + div .close:hover, input[type="checkbox"].alert-blue + div .close:active, input[type="checkbox"].alert-blue + div .close:focus {
color: #122a3f; }
input[type="checkbox"]:checked.alert-blue + div {
display: block; }
.alert-green + div {
border: 1px solid #449d44; border: 1px solid #449d44;
border-radius: 4px; border-radius: 4px;
background-color: #80c780; background-color: #80c780;
color: #357935; color: #357935;
padding: 20px; } padding: 15px; }
input[type="checkbox"].alert-green { input[type="checkbox"].alert-success {
display: none; } display: none; }
input[type="checkbox"].alert-green + div { input[type="checkbox"].alert-success + div {
display: none; display: none;
position: relative; } position: relative; }
input[type="checkbox"].alert-green + div a { input[type="checkbox"].alert-success + div a {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
color: #255625; } color: #255625; }
input[type="checkbox"].alert-green + div a:hover, input[type="checkbox"].alert-green + div a:active, input[type="checkbox"].alert-green + div a:focus { input[type="checkbox"].alert-success + div a:hover, input[type="checkbox"].alert-success + div a:active, input[type="checkbox"].alert-success + div a:focus {
text-decoration: underline; } text-decoration: underline; }
input[type="checkbox"].alert-green + div .close { input[type="checkbox"].alert-success + div .close {
position: absolute; position: absolute;
top: 20px; top: 15px;
right: 20px; right: 15px;
color: #357935; } color: #357935; }
input[type="checkbox"].alert-green + div .close:hover, input[type="checkbox"].alert-green + div .close:active, input[type="checkbox"].alert-green + div .close:focus { input[type="checkbox"].alert-success + div .close:hover, input[type="checkbox"].alert-success + div .close:active, input[type="checkbox"].alert-success + div .close:focus {
color: #255625; } color: #255625; }
input[type="checkbox"]:checked.alert-green + div { input[type="checkbox"]:checked.alert-success + div {
display: block; } display: block; }
.alert-red + div { .alert-info + div {
border: 1px solid #31b0d5; border: 1px solid #31b0d5;
border-radius: 4px; border-radius: 4px;
background-color: #85d0e7; background-color: #80c780;
color: #2390b0; color: #2390b0;
padding: 20px; } padding: 15px; }
input[type="checkbox"].alert-red { input[type="checkbox"].alert-info {
display: none; } display: none; }
input[type="checkbox"].alert-red + div { input[type="checkbox"].alert-info + div {
display: none; display: none;
position: relative; } position: relative; }
input[type="checkbox"].alert-red + div a { input[type="checkbox"].alert-info + div a {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
color: #1b6d85; } color: #1b6d85; }
input[type="checkbox"].alert-red + div a:hover, input[type="checkbox"].alert-red + div a:active, input[type="checkbox"].alert-red + div a:focus { input[type="checkbox"].alert-info + div a:hover, input[type="checkbox"].alert-info + div a:active, input[type="checkbox"].alert-info + div a:focus {
text-decoration: underline; } text-decoration: underline; }
input[type="checkbox"].alert-red + div .close { input[type="checkbox"].alert-info + div .close {
position: absolute; position: absolute;
top: 20px; top: 15px;
right: 20px; right: 15px;
color: #2390b0; } color: #2390b0; }
input[type="checkbox"].alert-red + div .close:hover, input[type="checkbox"].alert-red + div .close:active, input[type="checkbox"].alert-red + div .close:focus { input[type="checkbox"].alert-info + div .close:hover, input[type="checkbox"].alert-info + div .close:active, input[type="checkbox"].alert-info + div .close:focus {
color: #1b6d85; } color: #1b6d85; }
input[type="checkbox"]:checked.alert-red + div { input[type="checkbox"]:checked.alert-info + div {
display: block; }
.alert-warning + div {
border: 1px solid #ec971f;
border-radius: 4px;
background-color: #f4c37d;
color: #c77c11;
padding: 15px; }
input[type="checkbox"].alert-warning {
display: none; }
input[type="checkbox"].alert-warning + div {
display: none;
position: relative; }
input[type="checkbox"].alert-warning + div a {
font-weight: 700;
text-decoration: none;
color: #985f0d; }
input[type="checkbox"].alert-warning + div a:hover, input[type="checkbox"].alert-warning + div a:active, input[type="checkbox"].alert-warning + div a:focus {
text-decoration: underline; }
input[type="checkbox"].alert-warning + div .close {
position: absolute;
top: 15px;
right: 15px;
color: #c77c11; }
input[type="checkbox"].alert-warning + div .close:hover, input[type="checkbox"].alert-warning + div .close:active, input[type="checkbox"].alert-warning + div .close:focus {
color: #985f0d; }
input[type="checkbox"]:checked.alert-warning + div {
display: block; }
.alert-danger + div {
border: 1px solid #c9302c;
border-radius: 4px;
background-color: #e27c79;
color: #a02622;
padding: 15px; }
input[type="checkbox"].alert-danger {
display: none; }
input[type="checkbox"].alert-danger + div {
display: none;
position: relative; }
input[type="checkbox"].alert-danger + div a {
font-weight: 700;
text-decoration: none;
color: #761c19; }
input[type="checkbox"].alert-danger + div a:hover, input[type="checkbox"].alert-danger + div a:active, input[type="checkbox"].alert-danger + div a:focus {
text-decoration: underline; }
input[type="checkbox"].alert-danger + div .close {
position: absolute;
top: 15px;
right: 15px;
color: #a02622; }
input[type="checkbox"].alert-danger + div .close:hover, input[type="checkbox"].alert-danger + div .close:active, input[type="checkbox"].alert-danger + div .close:focus {
color: #761c19; }
input[type="checkbox"]:checked.alert-danger + div {
display: block; } display: block; }
.panel { .panel {
border: 1px solid #ccc; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
background-color: #fff; background-color: #fff;
color: #333; color: #333;
padding: 0; } padding: 0; }
.panel > * { .panel > * {
padding: 10px; } padding: 15px; }
.panel .head { .panel .head {
border: 0; border: 0;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ddd;
color: #333; color: #333;
background-color: #e7e7e7; background-color: #e7e7e7;
padding: 10px; padding: 15px;
margin: 0; } margin: 0; }
input[type="checkbox"].popover-top { input[type="checkbox"].popover-top {
@@ -1886,51 +1923,3 @@ input[type="checkbox"].popover-bottom {
margin-left: -7px; } margin-left: -7px; }
input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom { input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
display: block; } display: block; }
.btn-grp .btn {
border: 1px solid #ccc;
margin: 0; }
.btn-grp .btn:not(:first-child):not(:last-child) {
border-radius: 0;
border-right: 0; }
.btn-grp .btn:first-child {
border-radius: 4px 0 0 4px;
border-right: 0; }
.btn-grp .btn:last-child {
border-radius: 0 4px 4px 0; }
.btn-grp .btn.btn-primary {
border: 1px solid #285f8f;
margin: 0; }
.btn-grp .btn.btn-primary:not(:first-child):not(:last-child) {
border-radius: 0;
border-right: 0; }
.btn-grp .btn.btn-primary:first-child {
border-radius: 4px 0 0 4px;
border-right: 0; }
.btn-grp .btn.btn-primary:last-child {
border-radius: 0 4px 4px 0; }
.btn-grp .btn.btn-success {
border: 1px solid #449d44;
margin: 0; }
.btn-grp .btn.btn-success:not(:first-child):not(:last-child) {
border-radius: 0;
border-right: 0; }
.btn-grp .btn.btn-success:first-child {
border-radius: 4px 0 0 4px;
border-right: 0; }
.btn-grp .btn.btn-success:last-child {
border-radius: 0 4px 4px 0; }
.btn-grp .btn.btn-info {
border: 1px solid 1px solid #31b0d5;
margin: 0; }
.btn-grp .btn.btn-info:not(:first-child):not(:last-child) {
border-radius: 0;
border-right: 0; }
.btn-grp .btn.btn-info:first-child {
border-radius: 4px 0 0 4px;
border-right: 0; }
.btn-grp .btn.btn-info:last-child {
border-radius: 0 4px 4px 0; }

2
flavors/mini-bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

106
flavors/mini-bootstrap.scss
View File

@@ -460,13 +460,19 @@ $dropdown-class-name: dropdown; // Name for the dropdown class
// Variable definitions for the Collapse module (_collapse.scss) // Variable definitions for the Collapse module (_collapse.scss)
//==================================================================== //====================================================================
// Collapse and accordion class names. // Collapse and accordion class names.
$collapse-class-name: clps; // Name for the collapse class // --- NOTES: ---
$accordion-class-name: acrd; // Name for the accordion class // 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 // Collapse colors and styles (you can remove things you don't need or
// define more colors if you need them). // define more colors if you need them).
$collapse-border: 1px solid #ccc; // Border style for the collapse $collapse-border: 1px solid #e3e3e3; // Border style for the collapse
$collapse-color: $body-color; // Color for the text in the collapse $collapse-color: $body-color; // Color for the text in the collapse
$collapse-bg-color: #eeeeee; // Background color for the collapse $collapse-bg-color: #f5f5f5; // Background color for the collapse
// Accordion colors and styles (you can remove things you don't need or // Accordion colors and styles (you can remove things you don't need or
// define more colors if you need them). // define more colors if you need them).
$accordion-border: $collapse-border; // Border style for the accordion $accordion-border: $collapse-border; // Border style for the accordion
@@ -478,71 +484,104 @@ $accordion-label-bg-color: $collapse-bg-color; // Background color for t
@import '../scss/mini-extra/collapse'; @import '../scss/mini-extra/collapse';
// Use collapse and accordion mixins to create components wit the given specs. // 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. // 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-collapse($collapse-class-name, $collapse-border, 4px, 19px, 6px, $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%); @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) // Variable definitions for the Progress module (_progress.scss)
//==================================================================== //====================================================================
// Progress and progress variants class names. // Progress and progress variants class names.
$progress-class-name: prg; // Name for the progress class // --- NOTES: ---
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class // Naming conventions are based on the Bootstrap names, syntax is based
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class // 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 // Progress and progress variants colors (you can remove things you
// don't need or define more colors if you need them). // don't need or define more colors if you need them).
$progress-bg-color: #d7d7d7; // Background color for the progress bar container $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-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-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-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-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-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-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.) // Enable progress (_progress.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/progress'; @import '../scss/mini-extra/progress';
// Use progress mixins to create progress bars with given specs. For more // Use progress mixins to create progress bars with given specs. For more
// information refer to the _progress.scss file to check the definitions. // 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($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-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-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) // Variable definitions for the Spinner module (spinner.scss)
//==================================================================== //====================================================================
// Spinner class names. // 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-dotted-name: spinner-dots; // Name for the dotted spinner class
$spinner-round-name: spinner-round; // Name for the round spinner class $spinner-round-name: spinner-round; // Name for the round spinner class
// Spinner colors. // Spinner colors.
$spinner-round-doughnout: 0.4em solid rgba(34,34,34, 0.2); // Style for the round spinner doughnut $spinner-round-doughnout: 6px solid rgba(51,51,51, 0.25); // Style for the round spinner doughnut
$spinner-round-spin: 0.4em solid #222; // Style for the round spinner spinning part $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.) // Enable progress (spinner.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/spinner'; @import '../scss/mini-extra/spinner';
// Use spinner mixins to create spinners with given specs. For more // Use spinner mixins to create spinners with given specs. For more
// information refer to the spinner.scss file to check the definitions. // 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-dots($spinner-dotted-name, 20px, 1.5s);
@include make-spinner-round($spinner-round-name, 1.5em, $spinner-round-doughnout, $spinner-round-spin, 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) // Variable definitions for the Carousel module (_carousel.scss)
//==================================================================== //====================================================================
// Carousel class names. // 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-class-name: carousel; // Name for the carousel class
// Carousel colors and styles. // Carousel colors and styles.
$carousel-border: 1px solid #ccc; // Border style for the carousel $carousel-border: 1px solid #ddd; // Border style for the carousel
$carousel-content-bg-color: #e7e7e7; // Background color 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-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-description-bg-color: $body-color; // Background color for the carousel's description
$carousel-control-color: #fafafa; // Color for the carousel's control elements $carousel-control-color: #fff; // Color for the carousel's control elements
// Enable carousel (_carousel.scss). (Use individual mixins below to use.) // Enable carousel (_carousel.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/carousel'; @import '../scss/mini-extra/carousel';
// Use carousel mixin to create carousel with given specs. For more // Use carousel mixin to create carousel with given specs. For more
// information refer to the _carousel.scss file to check the definitions. // 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); @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) // Variable definitions for the Utility module (_utility.scss)
//==================================================================== //====================================================================
// Utility class names. // Utility class names.
$breadcrumbs-class-name: brdcrmb; // Name for the breadcrumbs class // --- 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 $well-class-name: well; // Name for the well class
$alert-style1-class: alert-blue; // Name for the style 1 alert $alert-style1-class: alert-success; // Name for the style 1 alert
$alert-style2-class: alert-green; // Name for the style 2 alert $alert-style2-class: alert-info; // Name for the style 2 alert
$alert-style3-class: alert-red; // Name for the style 3 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-class-name: panel; // Name for the panel class
$panel-header-name: head; // Name for the panel's header class $panel-header-name: head; // Name for the panel's header class
$button-states-class-name: stateful; // Name for the stateful button class $button-states-class-name: stateful; // Name for the stateful button class
@@ -552,7 +591,7 @@ $popover-below-name: popover-bottom; // Name for the popover below clas
// Utility color variables and styles (you can remove things you // Utility color variables and styles (you can remove things you
// don't need or define more colors if you need them). // don't need or define more colors if you need them).
$well-color: $body-color; // Text color for the well $well-color: $body-color; // Text color for the well
$well-bg-color: #e7e7e7; // Background color for the well $well-bg-color: #f5f5f5; // Background color for the well
$panel-color: $body-color; // Text color for the panel $panel-color: $body-color; // Text color for the panel
$panel-bg-color: $body-bg-color; // Background 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-color: $body-color; // Text color for the panel's header
@@ -563,21 +602,22 @@ $popover-bg-color: $body-color; // Background color for the popover
@import '../scss/mini-extra/utility'; @import '../scss/mini-extra/utility';
// Use utilities mixins to create utilities with given specs. For more // Use utilities mixins to create utilities with given specs. For more
// information refer to the _utility.scss file to check the definitions. // information refer to the _utility.scss file to check the definitions.
@include make-breadcrumbs($breadcrumbs-class-name); @include make-breadcrumbs($breadcrumbs-class-name, 1);
@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #ccc, 4px, 20px); @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-p-bg-color,20%), lighten($btn-p-bg-color, 10%) , 1px solid darken($btn-p-bg-color, 10%), 4px, 20px, close); @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-s-bg-color,20%), lighten($btn-s-bg-color, 10%) , 1px solid darken($btn-s-bg-color, 10%), 4px, 20px, 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-i-bg-color,20%), lighten($btn-i-bg-color, 10%) , 1px solid darken($btn-i-bg-color, 10%), 4px, 20px, 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-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-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-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); @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 // Use experimental utilities mixins to create utilities with given
// specs. Please exercise caution when using these mixins. // 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. // @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. // 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($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-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-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); // @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-i-bg-color, 10%), 4px);
//==================================================================== //====================================================================
//==================================================================== //====================================================================

2
flavors/mini-default.css
View File

@@ -1865,3 +1865,5 @@ input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
border-right: 0; } border-right: 0; }
.btn-grp .btn.red:last-child { .btn-grp .btn.red:last-child {
border-radius: 0 4px 4px 0; } border-radius: 0 4px 4px 0; }
/*# sourceMappingURL=mini-default.css.map */

2
flavors/mini-niteowl.css
View File

@@ -1865,3 +1865,5 @@ input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
border-right: 0; } border-right: 0; }
.btn-grp .btn.red:last-child { .btn-grp .btn.red:last-child {
border-radius: 0 4px 4px 0; } border-radius: 0 4px 4px 0; }
/*# sourceMappingURL=mini-niteowl.css.map */