mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-04 04:47:23 +02:00
Bootstrap flavor - buttons
This commit is contained in:
Angelos Chalaris
@@ -484,42 +484,61 @@ textarea {
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
margin: 2px 0;
|
||||
margin: 5px 0;
|
||||
padding: 6px 12px;
|
||||
color: #2a2a2a;
|
||||
background: #eaeaea;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
cursor: pointer; }
|
||||
.btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus {
|
||||
background: #fdfdfd; }
|
||||
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 {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
|
||||
.btn.blue, a.btn.blue, a.btn.blue:visited {
|
||||
color: #eeeeee;
|
||||
background: #3f84b3; }
|
||||
.btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus {
|
||||
background: #5597c3; }
|
||||
.btn.btn-primary, a.btn.btn-primary, a.btn.btn-primary:visited {
|
||||
color: #fff;
|
||||
background: #337ab7; }
|
||||
.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: #2b6699; }
|
||||
|
||||
.btn.green, a.btn.green, a.btn.green:visited {
|
||||
color: #eeeeee;
|
||||
background: #2db747; }
|
||||
.btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus {
|
||||
background: #3bcf57; }
|
||||
.btn.btn-success, a.btn.btn-success, a.btn.btn-success:visited {
|
||||
color: #fff;
|
||||
background: #5cb85c; }
|
||||
.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: #48a648; }
|
||||
|
||||
.btn.red, a.btn.red, a.btn.red:visited {
|
||||
color: #eeeeee;
|
||||
background: #ea4848; }
|
||||
.btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus {
|
||||
background: #ee6a6a; }
|
||||
.btn.btn-info, a.btn.btn-info, a.btn.btn-info:visited {
|
||||
color: #fff;
|
||||
background: #5bc0de; }
|
||||
.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: #3bb4d8; }
|
||||
|
||||
.btn.lg {
|
||||
padding: 9px 15px;
|
||||
font-size: 135%; }
|
||||
.btn.btn-warning, a.btn.btn-warning, a.btn.btn-warning:visited {
|
||||
color: #fff;
|
||||
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 {
|
||||
padding: 4px 8px;
|
||||
font-size: 80%; }
|
||||
.btn.btn-danger, a.btn.btn-danger, a.btn.btn-danger:visited {
|
||||
color: #fff;
|
||||
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.
|
||||
@@ -1001,22 +1020,22 @@ img.thumb {
|
||||
border-radius: 50% !important; }
|
||||
|
||||
.txt-blue {
|
||||
color: #3f84b3 !important; }
|
||||
color: #337ab7 !important; }
|
||||
|
||||
.txt-green {
|
||||
color: #2db747 !important; }
|
||||
color: #5cb85c !important; }
|
||||
|
||||
.txt-red {
|
||||
color: #ea4848 !important; }
|
||||
color: #5bc0de !important; }
|
||||
|
||||
.bg-blue {
|
||||
background-color: #3f84b3 !important; }
|
||||
background-color: #337ab7 !important; }
|
||||
|
||||
.bg-green {
|
||||
background-color: #2db747 !important; }
|
||||
background-color: #5cb85c !important; }
|
||||
|
||||
.bg-red {
|
||||
background-color: #ea4848 !important; }
|
||||
background-color: #5bc0de !important; }
|
||||
|
||||
.caret {
|
||||
display: inline-block;
|
||||
@@ -1086,44 +1105,44 @@ img.thumb {
|
||||
.lbl {
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
color: #eeeeee;
|
||||
color: #fff;
|
||||
background-color: #777;
|
||||
border-radius: 4px; }
|
||||
.lbl:empty {
|
||||
display: none; }
|
||||
|
||||
.lbl.blue {
|
||||
color: #eeeeee;
|
||||
background-color: #3f84b3; }
|
||||
color: #fff;
|
||||
background-color: #337ab7; }
|
||||
|
||||
.lbl.green {
|
||||
color: #eeeeee;
|
||||
background-color: #2db747; }
|
||||
color: #fff;
|
||||
background-color: #5cb85c; }
|
||||
|
||||
.lbl.red {
|
||||
color: #eeeeee;
|
||||
background-color: #ea4848; }
|
||||
color: #fff;
|
||||
background-color: #5bc0de; }
|
||||
|
||||
.bdg {
|
||||
display: inline-block;
|
||||
padding: 3px 8px;
|
||||
color: #eeeeee;
|
||||
color: #fff;
|
||||
background-color: #777;
|
||||
border-radius: 8px; }
|
||||
.bdg:empty {
|
||||
display: none; }
|
||||
|
||||
.bdg.blue {
|
||||
color: #eeeeee;
|
||||
background-color: #3f84b3; }
|
||||
color: #fff;
|
||||
background-color: #337ab7; }
|
||||
|
||||
.bdg.green {
|
||||
color: #eeeeee;
|
||||
background-color: #2db747; }
|
||||
color: #fff;
|
||||
background-color: #5cb85c; }
|
||||
|
||||
.bdg.red {
|
||||
color: #eeeeee;
|
||||
background-color: #ea4848; }
|
||||
color: #fff;
|
||||
background-color: #5bc0de; }
|
||||
|
||||
/*
|
||||
Mixin for tab system.
|
||||
@@ -1408,18 +1427,18 @@ input[type="radio"]:checked.acrd + label {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: #eeeeee;
|
||||
background-color: #3f84b3;
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
text-align: center;
|
||||
font-size: 0.8em; }
|
||||
|
||||
.prg > span.green {
|
||||
color: #eeeeee;
|
||||
background-color: #2db747; }
|
||||
color: #fff;
|
||||
background-color: #5cb85c; }
|
||||
|
||||
.prg > span.red {
|
||||
color: #eeeeee;
|
||||
background-color: #ea4848; }
|
||||
color: #fff;
|
||||
background-color: #5bc0de; }
|
||||
|
||||
/*
|
||||
Mixin for dotted spinner component.
|
||||
@@ -1664,10 +1683,10 @@ input[type="radio"]:checked.acrd + label {
|
||||
padding: 20px; }
|
||||
|
||||
.alert-blue + div {
|
||||
border: 1px solid #32688d;
|
||||
border: 1px solid #285f8f;
|
||||
border-radius: 4px;
|
||||
background-color: #5e9cc7;
|
||||
color: #244c68;
|
||||
background-color: #4f93ce;
|
||||
color: #1d4567;
|
||||
padding: 20px; }
|
||||
|
||||
input[type="checkbox"].alert-blue {
|
||||
@@ -1678,25 +1697,25 @@ input[type="checkbox"].alert-blue {
|
||||
input[type="checkbox"].alert-blue + div a {
|
||||
font-weight: 700;
|
||||
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 {
|
||||
text-decoration: underline; }
|
||||
input[type="checkbox"].alert-blue + div .close {
|
||||
position: absolute;
|
||||
top: 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 {
|
||||
color: #173142; }
|
||||
color: #122a3f; }
|
||||
|
||||
input[type="checkbox"]:checked.alert-blue + div {
|
||||
display: block; }
|
||||
|
||||
.alert-green + div {
|
||||
border: 1px solid #238e37;
|
||||
border: 1px solid #449d44;
|
||||
border-radius: 4px;
|
||||
background-color: #46d160;
|
||||
color: #196527;
|
||||
background-color: #80c780;
|
||||
color: #357935;
|
||||
padding: 20px; }
|
||||
|
||||
input[type="checkbox"].alert-green {
|
||||
@@ -1707,25 +1726,25 @@ input[type="checkbox"].alert-green {
|
||||
input[type="checkbox"].alert-green + div a {
|
||||
font-weight: 700;
|
||||
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 {
|
||||
text-decoration: underline; }
|
||||
input[type="checkbox"].alert-green + div .close {
|
||||
position: absolute;
|
||||
top: 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 {
|
||||
color: #0f3c17; }
|
||||
color: #255625; }
|
||||
|
||||
input[type="checkbox"]:checked.alert-green + div {
|
||||
display: block; }
|
||||
|
||||
.alert-red + div {
|
||||
border: 1px solid #e51a1a;
|
||||
border: 1px solid #31b0d5;
|
||||
border-radius: 4px;
|
||||
background-color: #ef7676;
|
||||
color: #b71515;
|
||||
background-color: #85d0e7;
|
||||
color: #2390b0;
|
||||
padding: 20px; }
|
||||
|
||||
input[type="checkbox"].alert-red {
|
||||
@@ -1736,16 +1755,16 @@ input[type="checkbox"].alert-red {
|
||||
input[type="checkbox"].alert-red + div a {
|
||||
font-weight: 700;
|
||||
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 {
|
||||
text-decoration: underline; }
|
||||
input[type="checkbox"].alert-red + div .close {
|
||||
position: absolute;
|
||||
top: 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 {
|
||||
color: #891010; }
|
||||
color: #1b6d85; }
|
||||
|
||||
input[type="checkbox"]:checked.alert-red + div {
|
||||
display: block; }
|
||||
@@ -1833,38 +1852,38 @@ input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
|
||||
.btn-grp .btn:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
.btn-grp .btn.blue {
|
||||
border: 1px solid #32688d;
|
||||
.btn-grp .btn.btn-primary {
|
||||
border: 1px solid #285f8f;
|
||||
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-right: 0; }
|
||||
.btn-grp .btn.blue:first-child {
|
||||
.btn-grp .btn.btn-primary:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.blue:last-child {
|
||||
.btn-grp .btn.btn-primary:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
.btn-grp .btn.green {
|
||||
border: 1px solid #238e37;
|
||||
.btn-grp .btn.btn-success {
|
||||
border: 1px solid #449d44;
|
||||
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-right: 0; }
|
||||
.btn-grp .btn.green:first-child {
|
||||
.btn-grp .btn.btn-success:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.green:last-child {
|
||||
.btn-grp .btn.btn-success:last-child {
|
||||
border-radius: 0 4px 4px 0; }
|
||||
|
||||
.btn-grp .btn.red {
|
||||
border: 1px solid 1px solid #e51a1a;
|
||||
.btn-grp .btn.btn-info {
|
||||
border: 1px solid 1px solid #31b0d5;
|
||||
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-right: 0; }
|
||||
.btn-grp .btn.red:first-child {
|
||||
.btn-grp .btn.btn-info:first-child {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-right: 0; }
|
||||
.btn-grp .btn.red:last-child {
|
||||
.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
@@ -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 if you need them).
|
||||
$btn-default-color: #2a2a2a; // Default text color for buttons
|
||||
$btn-alt-color: #eeeeee; // Alternative text color for buttons
|
||||
$btn-default-bg-color: #eaeaea; // Default background color for buttons
|
||||
$btn-b-bg-color: #3f84b3; // Color for button style 1
|
||||
$btn-g-bg-color: #2db747; // Color for button style 2
|
||||
$btn-r-bg-color: #ea4848; // Color for button style 3
|
||||
// --- NOTES: ---
|
||||
// Button styles use approximations for some colors (mainly hover colors).
|
||||
// Button border is built using utility module's generic mixin.
|
||||
// Buttons differ from Bootstrap's in terms of line height.
|
||||
// Button size variant font sizes are approximate.
|
||||
// -------------------
|
||||
$btn-default-color: $body-color; // Default text color for buttons
|
||||
$btn-alt-color: $body-bg-color; // Alternative text color for buttons
|
||||
$btn-default-bg-color: $body-bg-color; // Default background color for buttons
|
||||
$btn-p-bg-color: #337ab7; // Color for button style 1
|
||||
$btn-s-bg-color: #5cb85c; // Color for button style 2
|
||||
$btn-i-bg-color: #5bc0de; // Color for button style 3
|
||||
$btn-w-bg-color: #f0ad4e; // Color for button style 4
|
||||
$btn-d-bg-color: #d9534f; // Color for button style 5
|
||||
// Button class names (you can remove things you don't need or define more
|
||||
// classes if you need them).
|
||||
$btn-class-name: btn; // Name for the base button class
|
||||
$btn-style1-name: 'blue'; // Name for button style 1 class
|
||||
$btn-style2-name: 'green'; // Name for button style 2 class
|
||||
$btn-style3-name: 'red'; // Name for button style 3 class
|
||||
$btn-size1-name: lg; // Name for the button size 1 class
|
||||
$btn-size2-name: sm; // Name for the button size 2 class
|
||||
$btn-style1-name: btn-primary; // Name for button style 1 class
|
||||
$btn-style2-name: btn-success; // Name for button style 2 class
|
||||
$btn-style3-name: btn-info; // Name for button style 3 class
|
||||
$btn-style4-name: btn-warning; // Name for button style 4 class
|
||||
$btn-style5-name: btn-danger; // Name for button style 5 class
|
||||
$btn-size1-name: btn-lg; // Name for the button size 1 class
|
||||
$btn-size2-name: btn-sm; // Name for the button size 2 class
|
||||
$btn-size3-name: btn-xs; // Name for the button size 3 class
|
||||
// Enable buttons (_button.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini/button';
|
||||
// Use button mixins to create buttons with given specs. For more information
|
||||
// refer to the _button.scss file to check the definitions.
|
||||
@include make-btn($btn-class-name, 0, 4px, 2px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, lighten, 7.5%, pointer, not-allowed, .65);
|
||||
@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-b-bg-color);
|
||||
@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-g-bg-color);
|
||||
@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-r-bg-color);
|
||||
@include make-btn-size($btn-class-name, $btn-size1-name, 9px 15px, 135%);
|
||||
@include make-btn-size($btn-class-name, $btn-size2-name, 4px 8px, 80%);
|
||||
@include make-btn($btn-class-name, 0, 4px, 5px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65);
|
||||
@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-p-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-s-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-i-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style4-name, $btn-alt-color, $btn-w-bg-color, darken);
|
||||
@include make-btn-style($btn-class-name, $btn-style5-name, $btn-alt-color, $btn-d-bg-color, darken);
|
||||
@include make-btn-size($btn-class-name, $btn-size1-name, 10px 16px, 128.6%);
|
||||
@include make-btn-size($btn-class-name, $btn-size2-name, 5px 10px, 85.7%);
|
||||
@include make-btn-size($btn-class-name, $btn-size3-name, 1px 5px, 85.7%);
|
||||
@include make-border-generic($btn-class-name);
|
||||
//====================================================================
|
||||
// Variable definitions for the Grid module (_grid.scss)
|
||||
//====================================================================
|
||||
@@ -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
|
||||
$bordered-radial-radius: 4px; // Border radius of rounded borders
|
||||
$bordered-radial2-radius: 50%; // Border radius of the alternative rounded borders
|
||||
$colored-text1-color: $btn-b-bg-color; // Text color for the colored text style 1 class
|
||||
$colored-text2-color: $btn-g-bg-color; // Text color for the colored text style 2 class
|
||||
$colored-text3-color: $btn-r-bg-color; // Text color for the colored text style 3 class
|
||||
$colored-bg-text1-bg-color: $btn-b-bg-color; // Background color for the colored text style 1 class
|
||||
$colored-bg-text2-bg-color: $btn-g-bg-color; // Background color for the colored text style 2 class
|
||||
$colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the colored text style 3 class
|
||||
$colored-text1-color: $btn-p-bg-color; // Text color for the colored text style 1 class
|
||||
$colored-text2-color: $btn-s-bg-color; // Text color for the colored text style 2 class
|
||||
$colored-text3-color: $btn-i-bg-color; // Text color for the colored text style 3 class
|
||||
$colored-bg-text1-bg-color: $btn-p-bg-color; // Background color for the colored text style 1 class
|
||||
$colored-bg-text2-bg-color: $btn-s-bg-color; // Background color for the colored text style 2 class
|
||||
$colored-bg-text3-bg-color: $btn-i-bg-color; // Background color for the colored text style 3 class
|
||||
// Enable utilities (_utility.scss). (Use individual mixins below to use.)
|
||||
// @import '../scss/mini/utility';
|
||||
// Use utility mixins to create utility classes with given specs. For more information
|
||||
@@ -271,9 +286,9 @@ $colored-bg-text3-bg-color: $btn-r-bg-color; // Background color for the
|
||||
// colors if you need them).
|
||||
$lbl-default-color: $btn-alt-color; // Default text color for labels/badges
|
||||
$lbl-default-bg-color: #777; // Default background color for labels/badges
|
||||
$lbl-b-bg-color: $btn-b-bg-color; // Color for labels/badges style 1
|
||||
$lbl-g-bg-color: $btn-g-bg-color; // Color for labels/badges style 2
|
||||
$lbl-r-bg-color: $btn-r-bg-color; // Color for labels/badges style 3
|
||||
$lbl-b-bg-color: $btn-p-bg-color; // Color for labels/badges style 1
|
||||
$lbl-g-bg-color: $btn-s-bg-color; // Color for labels/badges style 2
|
||||
$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
|
||||
// classes if you need them).
|
||||
$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-style1-color: $btn-alt-color; // Color for the text of the style 1 progress bar
|
||||
$progress-bar-style2-color: $btn-alt-color; // Color for the text of the style 2 progress bar
|
||||
$progress-bar-bg-color: $btn-b-bg-color; // Background color for the progress bar
|
||||
$progress-bar-style1-bg-color: $btn-g-bg-color; // Background color for the style 1 progress bar
|
||||
$progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for the style 2 progress bar
|
||||
$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
|
||||
// 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
|
||||
@@ -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.
|
||||
@include make-breadcrumbs($breadcrumbs-class-name);
|
||||
@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #ccc, 4px, 20px);
|
||||
@include make-alert($alert-style1-class, darken($btn-b-bg-color,20%), lighten($btn-b-bg-color, 10%) , 1px solid darken($btn-b-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-alert($alert-style2-class, darken($btn-g-bg-color,20%), lighten($btn-g-bg-color, 10%) , 1px solid darken($btn-g-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-alert($alert-style3-class, darken($btn-r-bg-color,20%), lighten($btn-r-bg-color, 10%) , 1px solid darken($btn-r-bg-color, 10%), 4px, 20px, close);
|
||||
@include make-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-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);
|
||||
@@ -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.
|
||||
// The folowing mixin is considered stable, you can disable it if you need to.
|
||||
@include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-b-bg-color, 10%), 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-g-bg-color, 10%), 4px);
|
||||
@include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-r-bg-color, 10%), 4px);
|
||||
@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);
|
||||
//====================================================================
|
||||
//====================================================================
|
||||
Reference in New Issue
Block a user