Bootstrap flavor - full
This commit is contained in:
Angelos Chalaris
parent
baee949488
commit
63a6e2479a
5 changed files with 212 additions and 179 deletions
|
|
@ -1394,46 +1394,46 @@ img.thumbnail {
|
|||
- [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`.
|
||||
*/
|
||||
input[type="checkbox"].clps {
|
||||
input[type="checkbox"].collapse {
|
||||
display: none; }
|
||||
input[type="checkbox"].clps + div {
|
||||
input[type="checkbox"].collapse + div {
|
||||
display: none;
|
||||
color: #333;
|
||||
background-color: #eeeeee;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f5f5f5;
|
||||
padding: 19px;
|
||||
margin-top: 6px;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: 4px; }
|
||||
input[type="checkbox"]:checked.clps + div {
|
||||
input[type="checkbox"]:checked.collapse + div {
|
||||
display: block; }
|
||||
|
||||
input[type="radio"].acrd {
|
||||
input[type="radio"].accordion {
|
||||
display: none; }
|
||||
input[type="radio"].acrd + label {
|
||||
input[type="radio"].accordion + label {
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: #333;
|
||||
background-color: #eeeeee;
|
||||
background-color: #f5f5f5;
|
||||
padding: 8px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 6px;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
input[type="radio"].acrd + label:hover, input[type="radio"].acrd + label:active, input[type="radio"].acrd + label:focus {
|
||||
background-color: #dbdbdb; }
|
||||
input[type="radio"].acrd + label + div {
|
||||
input[type="radio"].accordion + label:hover, input[type="radio"].accordion + label:active, input[type="radio"].accordion + label:focus {
|
||||
background-color: #e2e2e2; }
|
||||
input[type="radio"].accordion + label + div {
|
||||
display: none;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
padding: 19px;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 6px;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: 0 0 4px 4px; }
|
||||
input[type="radio"]:checked.acrd + label {
|
||||
input[type="radio"]:checked.accordion + label {
|
||||
border-radius: 4px 4px 0 0;
|
||||
margin-bottom: 0; }
|
||||
input[type="radio"]:checked.acrd + label + div {
|
||||
input[type="radio"]:checked.accordion + label + div {
|
||||
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
|
||||
use it after `make-progress`.
|
||||
*/
|
||||
.prg {
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
background-color: #d7d7d7;
|
||||
border-radius: 4px; }
|
||||
.prg > span {
|
||||
.progress-bar > span {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
text-align: center;
|
||||
font-size: 0.8em; }
|
||||
font-size: 12px; }
|
||||
|
||||
.prg > span.green {
|
||||
.progress-bar > span.progress-bar-success {
|
||||
color: #fff;
|
||||
background-color: #5cb85c; }
|
||||
|
||||
.prg > span.red {
|
||||
.progress-bar > span.progress-bar-info {
|
||||
color: #fff;
|
||||
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.
|
||||
Parameters:
|
||||
|
|
@ -1515,7 +1523,7 @@ input[type="radio"]:checked.acrd + label {
|
|||
.spinner-dots {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
height: 1.5em;
|
||||
height: 20px;
|
||||
vertical-align: bottom; }
|
||||
.spinner-dots:after {
|
||||
display: inline-table;
|
||||
|
|
@ -1525,17 +1533,17 @@ input[type="radio"]:checked.acrd + label {
|
|||
|
||||
@keyframes spin-dots {
|
||||
to {
|
||||
transform: translateY(-6em); } }
|
||||
transform: translateY(-80px); } }
|
||||
.spinner-round {
|
||||
display: inline-block;
|
||||
border: 0.4em solid rgba(34, 34, 34, 0.2);
|
||||
border-left: 0.4em solid #222;
|
||||
border: 6px solid rgba(51, 51, 51, 0.25);
|
||||
border-left: 6px solid #337ab7;
|
||||
transform: translateZ(0);
|
||||
animation: spin-round 1.5s infinite linear; }
|
||||
.spinner-round, .spinner-round:after {
|
||||
border-radius: 50%;
|
||||
width: 1.5em;
|
||||
height: 1.5em; }
|
||||
width: 20px;
|
||||
height: 20px; }
|
||||
|
||||
@keyframes spin-round {
|
||||
0% {
|
||||
|
|
@ -1574,7 +1582,7 @@ input[type="radio"]:checked.acrd + label {
|
|||
overflow: hidden;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px; }
|
||||
.carousel input[type="radio"] {
|
||||
display: none; }
|
||||
|
|
@ -1597,7 +1605,7 @@ input[type="radio"]:checked.acrd + label {
|
|||
height: 160px;
|
||||
overflow: auto;
|
||||
left: 0;
|
||||
top: 340px;
|
||||
top: 360px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
opacity: 0.1; }
|
||||
|
|
@ -1608,7 +1616,7 @@ input[type="radio"]:checked.acrd + label {
|
|||
z-index: 998;
|
||||
cursor: pointer;
|
||||
top: 450px;
|
||||
color: #fafafa;
|
||||
color: #fff;
|
||||
font-size: 1.8em; }
|
||||
.carousel input[type="radio"] + div + label:before {
|
||||
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
|
||||
functionality.
|
||||
*/
|
||||
.brdcrmb {
|
||||
.breadcrumb {
|
||||
list-style: none; }
|
||||
.brdcrmb > li {
|
||||
.breadcrumb > li {
|
||||
display: inline-block; }
|
||||
.brdcrmb > li + li:before {
|
||||
content: '\27e9\00a0'; }
|
||||
.breadcrumb > li + li:before {
|
||||
content: '\002f\00a0'; }
|
||||
|
||||
.well {
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: 4px;
|
||||
background-color: #e7e7e7;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
padding: 20px; }
|
||||
padding: 19px; }
|
||||
|
||||
.alert-blue + 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 {
|
||||
.alert-success + div {
|
||||
border: 1px solid #449d44;
|
||||
border-radius: 4px;
|
||||
background-color: #80c780;
|
||||
color: #357935;
|
||||
padding: 20px; }
|
||||
padding: 15px; }
|
||||
|
||||
input[type="checkbox"].alert-green {
|
||||
input[type="checkbox"].alert-success {
|
||||
display: none; }
|
||||
input[type="checkbox"].alert-green + div {
|
||||
input[type="checkbox"].alert-success + div {
|
||||
display: none;
|
||||
position: relative; }
|
||||
input[type="checkbox"].alert-green + div a {
|
||||
input[type="checkbox"].alert-success + div a {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
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; }
|
||||
input[type="checkbox"].alert-green + div .close {
|
||||
input[type="checkbox"].alert-success + div .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
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; }
|
||||
|
||||
input[type="checkbox"]:checked.alert-green + div {
|
||||
input[type="checkbox"]:checked.alert-success + div {
|
||||
display: block; }
|
||||
|
||||
.alert-red + div {
|
||||
.alert-info + div {
|
||||
border: 1px solid #31b0d5;
|
||||
border-radius: 4px;
|
||||
background-color: #85d0e7;
|
||||
background-color: #80c780;
|
||||
color: #2390b0;
|
||||
padding: 20px; }
|
||||
padding: 15px; }
|
||||
|
||||
input[type="checkbox"].alert-red {
|
||||
input[type="checkbox"].alert-info {
|
||||
display: none; }
|
||||
input[type="checkbox"].alert-red + div {
|
||||
input[type="checkbox"].alert-info + div {
|
||||
display: none;
|
||||
position: relative; }
|
||||
input[type="checkbox"].alert-red + div a {
|
||||
input[type="checkbox"].alert-info + div a {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
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; }
|
||||
input[type="checkbox"].alert-red + div .close {
|
||||
input[type="checkbox"].alert-info + div .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
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; }
|
||||
|
||||
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; }
|
||||
|
||||
.panel {
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
padding: 0; }
|
||||
|
||||
.panel > * {
|
||||
padding: 10px; }
|
||||
padding: 15px; }
|
||||
.panel .head {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #333;
|
||||
background-color: #e7e7e7;
|
||||
padding: 10px;
|
||||
padding: 15px;
|
||||
margin: 0; }
|
||||
|
||||
input[type="checkbox"].popover-top {
|
||||
|
|
@ -1886,51 +1923,3 @@ input[type="checkbox"].popover-bottom {
|
|||
margin-left: -7px; }
|
||||
input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
|
||||
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
2
flavors/mini-bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -460,13 +460,19 @@ $dropdown-class-name: dropdown; // Name for the dropdown class
|
|||
// 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
|
||||
// --- 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 #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-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
|
||||
// define more colors if you need them).
|
||||
$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';
|
||||
// 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%);
|
||||
@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.
|
||||
$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
|
||||
// --- 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, 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-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: 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
|
||||
$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, 1.5em, 1.5s);
|
||||
@include make-spinner-round($spinner-round-name, 1.5em, $spinner-round-doughnout, $spinner-round-spin, 1.5s);
|
||||
@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 #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-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
|
||||
$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, 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)
|
||||
//====================================================================
|
||||
// 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
|
||||
$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
|
||||
$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
|
||||
|
|
@ -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
|
||||
// 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
|
||||
$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
|
||||
|
|
@ -563,21 +602,22 @@ $popover-bg-color: $body-color; // Background color for the popover
|
|||
@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);
|
||||
@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-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-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-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-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-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.
|
||||
// @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);
|
||||
// @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);
|
||||
//====================================================================
|
||||
//====================================================================
|
||||
|
|
@ -1865,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 */
|
||||
|
|
|
|||
|
|
@ -1865,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 */
|
||||
|
|
|
|||
Loading…
Reference in a new issue