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

Bootstrap flavor - buttons

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-08 12:00:46 +03:00
parent d05cd28c56
commit 3dbdc27c55
3 changed files with 154 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
flavors/mini-bootstrap.css
View File

@@ -484,42 +484,61 @@ textarea {
display: inline-block; display: inline-block;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
margin: 2px 0; margin: 5px 0;
padding: 6px 12px; padding: 6px 12px;
color: #2a2a2a; color: #333;
background: #eaeaea; background: #fff;
cursor: pointer; } cursor: pointer; }
.btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus { .btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus {
background: #fdfdfd; } background: #ececec; }
.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 { .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; cursor: not-allowed;
opacity: 0.65; } opacity: 0.65; }
.btn.blue, a.btn.blue, a.btn.blue:visited { .btn.btn-primary, a.btn.btn-primary, a.btn.btn-primary:visited {
color: #eeeeee; color: #fff;
background: #3f84b3; } background: #337ab7; }
.btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus { .btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus, a.btn.btn-primary:hover, a.btn.btn-primary:active, a.btn.btn-primary:focus, a.btn.btn-primary:visited:hover, a.btn.btn-primary:visited:active, a.btn.btn-primary:visited:focus {
background: #5597c3; } background: #2b6699; }
.btn.green, a.btn.green, a.btn.green:visited { .btn.btn-success, a.btn.btn-success, a.btn.btn-success:visited {
color: #eeeeee; color: #fff;
background: #2db747; } background: #5cb85c; }
.btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus { .btn.btn-success:hover, .btn.btn-success:active, .btn.btn-success:focus, a.btn.btn-success:hover, a.btn.btn-success:active, a.btn.btn-success:focus, a.btn.btn-success:visited:hover, a.btn.btn-success:visited:active, a.btn.btn-success:visited:focus {
background: #3bcf57; } background: #48a648; }
.btn.red, a.btn.red, a.btn.red:visited { .btn.btn-info, a.btn.btn-info, a.btn.btn-info:visited {
color: #eeeeee; color: #fff;
background: #ea4848; } background: #5bc0de; }
.btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus { .btn.btn-info:hover, .btn.btn-info:active, .btn.btn-info:focus, a.btn.btn-info:hover, a.btn.btn-info:active, a.btn.btn-info:focus, a.btn.btn-info:visited:hover, a.btn.btn-info:visited:active, a.btn.btn-info:visited:focus {
background: #ee6a6a; } background: #3bb4d8; }
.btn.lg { .btn.btn-warning, a.btn.btn-warning, a.btn.btn-warning:visited {
padding: 9px 15px; color: #fff;
font-size: 135%; } background: #f0ad4e; }
.btn.btn-warning:hover, .btn.btn-warning:active, .btn.btn-warning:focus, a.btn.btn-warning:hover, a.btn.btn-warning:active, a.btn.btn-warning:focus, a.btn.btn-warning:visited:hover, a.btn.btn-warning:visited:active, a.btn.btn-warning:visited:focus {
background: #ed9d2b; }
.btn.sm { .btn.btn-danger, a.btn.btn-danger, a.btn.btn-danger:visited {
padding: 4px 8px; color: #fff;
font-size: 80%; } background: #d9534f; }
.btn.btn-danger:hover, .btn.btn-danger:active, .btn.btn-danger:focus, a.btn.btn-danger:hover, a.btn.btn-danger:active, a.btn.btn-danger:focus, a.btn.btn-danger:visited:hover, a.btn.btn-danger:visited:active, a.btn.btn-danger:visited:focus {
background: #d23430; }
.btn.btn-lg {
padding: 10px 16px;
font-size: 128.6%; }
.btn.btn-sm {
padding: 5px 10px;
font-size: 85.7%; }
.btn.btn-xs {
padding: 1px 5px;
font-size: 85.7%; }
.btn {
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
/* /*
Mixin for responsive, mobile-first grid. Mixin for responsive, mobile-first grid.
@@ -1001,22 +1020,22 @@ img.thumb {
border-radius: 50% !important; } border-radius: 50% !important; }
.txt-blue { .txt-blue {
color: #3f84b3 !important; } color: #337ab7 !important; }
.txt-green { .txt-green {
color: #2db747 !important; } color: #5cb85c !important; }
.txt-red { .txt-red {
color: #ea4848 !important; } color: #5bc0de !important; }
.bg-blue { .bg-blue {
background-color: #3f84b3 !important; } background-color: #337ab7 !important; }
.bg-green { .bg-green {
background-color: #2db747 !important; } background-color: #5cb85c !important; }
.bg-red { .bg-red {
background-color: #ea4848 !important; } background-color: #5bc0de !important; }
.caret { .caret {
display: inline-block; display: inline-block;
@@ -1086,44 +1105,44 @@ img.thumb {
.lbl { .lbl {
display: inline-block; display: inline-block;
padding: 6px 10px; padding: 6px 10px;
color: #eeeeee; color: #fff;
background-color: #777; background-color: #777;
border-radius: 4px; } border-radius: 4px; }
.lbl:empty { .lbl:empty {
display: none; } display: none; }
.lbl.blue { .lbl.blue {
color: #eeeeee; color: #fff;
background-color: #3f84b3; } background-color: #337ab7; }
.lbl.green { .lbl.green {
color: #eeeeee; color: #fff;
background-color: #2db747; } background-color: #5cb85c; }
.lbl.red { .lbl.red {
color: #eeeeee; color: #fff;
background-color: #ea4848; } background-color: #5bc0de; }
.bdg { .bdg {
display: inline-block; display: inline-block;
padding: 3px 8px; padding: 3px 8px;
color: #eeeeee; color: #fff;
background-color: #777; background-color: #777;
border-radius: 8px; } border-radius: 8px; }
.bdg:empty { .bdg:empty {
display: none; } display: none; }
.bdg.blue { .bdg.blue {
color: #eeeeee; color: #fff;
background-color: #3f84b3; } background-color: #337ab7; }
.bdg.green { .bdg.green {
color: #eeeeee; color: #fff;
background-color: #2db747; } background-color: #5cb85c; }
.bdg.red { .bdg.red {
color: #eeeeee; color: #fff;
background-color: #ea4848; } background-color: #5bc0de; }
/* /*
Mixin for tab system. Mixin for tab system.
@@ -1408,18 +1427,18 @@ input[type="radio"]:checked.acrd + label {
float: left; float: left;
width: 0; width: 0;
height: 100%; height: 100%;
color: #eeeeee; color: #fff;
background-color: #3f84b3; background-color: #337ab7;
text-align: center; text-align: center;
font-size: 0.8em; } font-size: 0.8em; }
.prg > span.green { .prg > span.green {
color: #eeeeee; color: #fff;
background-color: #2db747; } background-color: #5cb85c; }
.prg > span.red { .prg > span.red {
color: #eeeeee; color: #fff;
background-color: #ea4848; } background-color: #5bc0de; }
/* /*
Mixin for dotted spinner component. Mixin for dotted spinner component.
@@ -1664,10 +1683,10 @@ input[type="radio"]:checked.acrd + label {
padding: 20px; } padding: 20px; }
.alert-blue + div { .alert-blue + div {
border: 1px solid #32688d; border: 1px solid #285f8f;
border-radius: 4px; border-radius: 4px;
background-color: #5e9cc7; background-color: #4f93ce;
color: #244c68; color: #1d4567;
padding: 20px; } padding: 20px; }
input[type="checkbox"].alert-blue { input[type="checkbox"].alert-blue {
@@ -1678,25 +1697,25 @@ input[type="checkbox"].alert-blue {
input[type="checkbox"].alert-blue + div a { input[type="checkbox"].alert-blue + div a {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
color: #173142; } 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 { 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; } text-decoration: underline; }
input[type="checkbox"].alert-blue + div .close { input[type="checkbox"].alert-blue + div .close {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;
color: #244c68; } 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 { 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: #173142; } color: #122a3f; }
input[type="checkbox"]:checked.alert-blue + div { input[type="checkbox"]:checked.alert-blue + div {
display: block; } display: block; }
.alert-green + div { .alert-green + div {
border: 1px solid #238e37; border: 1px solid #449d44;
border-radius: 4px; border-radius: 4px;
background-color: #46d160; background-color: #80c780;
color: #196527; color: #357935;
padding: 20px; } padding: 20px; }
input[type="checkbox"].alert-green { input[type="checkbox"].alert-green {
@@ -1707,25 +1726,25 @@ input[type="checkbox"].alert-green {
input[type="checkbox"].alert-green + div a { input[type="checkbox"].alert-green + div a {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
color: #0f3c17; } 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-green + div a:hover, input[type="checkbox"].alert-green + div a:active, input[type="checkbox"].alert-green + div a:focus {
text-decoration: underline; } text-decoration: underline; }
input[type="checkbox"].alert-green + div .close { input[type="checkbox"].alert-green + div .close {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;
color: #196527; } 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-green + div .close:hover, input[type="checkbox"].alert-green + div .close:active, input[type="checkbox"].alert-green + div .close:focus {
color: #0f3c17; } color: #255625; }
input[type="checkbox"]:checked.alert-green + div { input[type="checkbox"]:checked.alert-green + div {
display: block; } display: block; }
.alert-red + div { .alert-red + div {
border: 1px solid #e51a1a; border: 1px solid #31b0d5;
border-radius: 4px; border-radius: 4px;
background-color: #ef7676; background-color: #85d0e7;
color: #b71515; color: #2390b0;
padding: 20px; } padding: 20px; }
input[type="checkbox"].alert-red { input[type="checkbox"].alert-red {
@@ -1736,16 +1755,16 @@ input[type="checkbox"].alert-red {
input[type="checkbox"].alert-red + div a { input[type="checkbox"].alert-red + div a {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
color: #891010; } 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-red + div a:hover, input[type="checkbox"].alert-red + div a:active, input[type="checkbox"].alert-red + div a:focus {
text-decoration: underline; } text-decoration: underline; }
input[type="checkbox"].alert-red + div .close { input[type="checkbox"].alert-red + div .close {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;
color: #b71515; } 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-red + div .close:hover, input[type="checkbox"].alert-red + div .close:active, input[type="checkbox"].alert-red + div .close:focus {
color: #891010; } color: #1b6d85; }
input[type="checkbox"]:checked.alert-red + div { input[type="checkbox"]:checked.alert-red + div {
display: block; } display: block; }
@@ -1833,38 +1852,38 @@ input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
.btn-grp .btn:last-child { .btn-grp .btn:last-child {
border-radius: 0 4px 4px 0; } border-radius: 0 4px 4px 0; }
.btn-grp .btn.blue { .btn-grp .btn.btn-primary {
border: 1px solid #32688d; border: 1px solid #285f8f;
margin: 0; } margin: 0; }
.btn-grp .btn.blue:not(:first-child):not(:last-child) { .btn-grp .btn.btn-primary:not(:first-child):not(:last-child) {
border-radius: 0; border-radius: 0;
border-right: 0; } border-right: 0; }
.btn-grp .btn.blue:first-child { .btn-grp .btn.btn-primary:first-child {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
border-right: 0; } border-right: 0; }
.btn-grp .btn.blue:last-child { .btn-grp .btn.btn-primary:last-child {
border-radius: 0 4px 4px 0; } border-radius: 0 4px 4px 0; }
.btn-grp .btn.green { .btn-grp .btn.btn-success {
border: 1px solid #238e37; border: 1px solid #449d44;
margin: 0; } margin: 0; }
.btn-grp .btn.green:not(:first-child):not(:last-child) { .btn-grp .btn.btn-success:not(:first-child):not(:last-child) {
border-radius: 0; border-radius: 0;
border-right: 0; } border-right: 0; }
.btn-grp .btn.green:first-child { .btn-grp .btn.btn-success:first-child {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
border-right: 0; } border-right: 0; }
.btn-grp .btn.green:last-child { .btn-grp .btn.btn-success:last-child {
border-radius: 0 4px 4px 0; } border-radius: 0 4px 4px 0; }
.btn-grp .btn.red { .btn-grp .btn.btn-info {
border: 1px solid 1px solid #e51a1a; border: 1px solid 1px solid #31b0d5;
margin: 0; } margin: 0; }
.btn-grp .btn.red:not(:first-child):not(:last-child) { .btn-grp .btn.btn-info:not(:first-child):not(:last-child) {
border-radius: 0; border-radius: 0;
border-right: 0; } border-right: 0; }
.btn-grp .btn.red:first-child { .btn-grp .btn.btn-info:first-child {
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
border-right: 0; } border-right: 0; }
.btn-grp .btn.red:last-child { .btn-grp .btn.btn-info:last-child {
border-radius: 0 4px 4px 0; } 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

85
flavors/mini-bootstrap.scss
View File

@@ -112,30 +112,45 @@ $fieldset-padding: 0; // Padding for fieldset
//==================================================================== //====================================================================
// Colors and styles (you can remove things you don't need or define more // Colors and styles (you can remove things you don't need or define more
// colors if you need them). // colors if you need them).
$btn-default-color: #2a2a2a; // Default text color for buttons // --- NOTES: ---
$btn-alt-color: #eeeeee; // Alternative text color for buttons // Button styles use approximations for some colors (mainly hover colors).
$btn-default-bg-color: #eaeaea; // Default background color for buttons // Button border is built using utility module's generic mixin.
$btn-b-bg-color: #3f84b3; // Color for button style 1 // Buttons differ from Bootstrap's in terms of line height.
$btn-g-bg-color: #2db747; // Color for button style 2 // Button size variant font sizes are approximate.
$btn-r-bg-color: #ea4848; // Color for button style 3 // -------------------
$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 // Button class names (you can remove things you don't need or define more
// classes if you need them). // classes if you need them).
$btn-class-name: btn; // Name for the base button class $btn-class-name: btn; // Name for the base button class
$btn-style1-name: 'blue'; // Name for button style 1 class $btn-style1-name: btn-primary; // Name for button style 1 class
$btn-style2-name: 'green'; // Name for button style 2 class $btn-style2-name: btn-success; // Name for button style 2 class
$btn-style3-name: 'red'; // Name for button style 3 class $btn-style3-name: btn-info; // Name for button style 3 class
$btn-size1-name: lg; // Name for the button size 1 class $btn-style4-name: btn-warning; // Name for button style 4 class
$btn-size2-name: sm; // Name for the button size 2 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.) // Enable buttons (_button.scss). (Use individual mixins below to use.)
@import '../scss/mini/button'; @import '../scss/mini/button';
// Use button mixins to create buttons with given specs. For more information // Use button mixins to create buttons with given specs. For more information
// refer to the _button.scss file to check the definitions. // 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($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-b-bg-color); @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-g-bg-color); @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-r-bg-color); @include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-i-bg-color, darken);
@include make-btn-size($btn-class-name, $btn-size1-name, 9px 15px, 135%); @include make-btn-style($btn-class-name, $btn-style4-name, $btn-alt-color, $btn-w-bg-color, darken);
@include make-btn-size($btn-class-name, $btn-size2-name, 4px 8px, 80%); @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) // Variable definitions for the Grid module (_grid.scss)
//==================================================================== //====================================================================
@@ -234,12 +249,12 @@ $hidden-class-name: hidden; // Name for the hidden class
$thumbnail-hover-color: $a-color; // Border color of the thumbnail when hovering over it $thumbnail-hover-color: $a-color; // Border color of the thumbnail when hovering over it
$bordered-radial-radius: 4px; // Border radius of rounded borders $bordered-radial-radius: 4px; // Border radius of rounded borders
$bordered-radial2-radius: 50%; // Border radius of the alternative 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-text1-color: $btn-p-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-text2-color: $btn-s-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-text3-color: $btn-i-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-text1-bg-color: $btn-p-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-text2-bg-color: $btn-s-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 $colored-bg-text3-bg-color: $btn-i-bg-color; // Background color for the colored text style 3 class
// Enable utilities (_utility.scss). (Use individual mixins below to use.) // Enable utilities (_utility.scss). (Use individual mixins below to use.)
// @import '../scss/mini/utility'; // @import '../scss/mini/utility';
// Use utility mixins to create utility classes with given specs. For more information // Use utility mixins to create utility classes with given specs. For more information
@@ -271,9 +286,9 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the
// colors if you need them). // colors if you need them).
$lbl-default-color: $btn-alt-color; // Default text color for labels/badges $lbl-default-color: $btn-alt-color; // Default text color for labels/badges
$lbl-default-bg-color: #777; // Default background 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-b-bg-color: $btn-p-bg-color; // Color for labels/badges style 1
$lbl-g-bg-color: $btn-g-bg-color; // Color for labels/badges style 2 $lbl-g-bg-color: $btn-s-bg-color; // Color for labels/badges style 2
$lbl-r-bg-color: $btn-r-bg-color; // Color for labels/badges style 3 $lbl-r-bg-color: $btn-i-bg-color; // Color for labels/badges style 3
// Label class names (you can remove things you don't need or define more // Label class names (you can remove things you don't need or define more
// classes if you need them). // classes if you need them).
$lbl-class-name: lbl; // Name for the base labels class $lbl-class-name: lbl; // Name for the base labels class
@@ -375,9 +390,9 @@ $progress-bg-color: #d7d7d7; // Background color for the progress ba
$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-bg-color: $btn-b-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-g-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-r-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
// 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
@@ -447,9 +462,9 @@ $popover-bg-color: $body-color; // Background color for the popover
// 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);
@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 #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-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-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-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-r-bg-color,20%), lighten($btn-r-bg-color, 10%) , 1px solid darken($btn-r-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-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-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);
@@ -458,8 +473,8 @@ $popover-bg-color: $body-color; // Background color for the popover
//@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-b-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-g-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-r-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);
//==================================================================== //====================================================================
//==================================================================== //====================================================================