1925 lines
64 KiB
CSS
1925 lines
64 KiB
CSS
/*
|
|
Flavor name: Bootstrap (mini-bootstrap)
|
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
|
mini.css version: v1.1 (October, 2016)
|
|
*/
|
|
/*
|
|
Image thumbnail style mixin. [1]
|
|
Parameters:
|
|
- $thumb-name : The class name for the thumbnail style.
|
|
- $thumb-padding : The padding between the image and the border.
|
|
- $thumb-border : The style of the thumbnail's border.
|
|
- $thumb-border-radius : The border radius of the thumbnail.
|
|
- $thumb-hover-color : The color of the thumbnail's border when hovering over it.
|
|
Notes:
|
|
- [1] : This style only applies to `img` elements with the class specified in
|
|
`$thumb-name`.
|
|
*/
|
|
/*
|
|
Mixin for generic border style.
|
|
Parameters:
|
|
- $border-generic-name : The class name for the generic border.
|
|
Notes:
|
|
- [1] : The border style uses rgba to create a 1px solid border with 0.25
|
|
opacity around an element, which makes it look properly bordered.
|
|
Might be incompatible with older browsers.
|
|
- [2] : The border style overwrites any border style as it uses
|
|
`!important`, exercise caution when using.
|
|
*/
|
|
/*
|
|
Mixin for generic border radius styles.
|
|
Parameters:
|
|
- $border-style-name : The class name for the generic border radius style.
|
|
- $border-style-radius : The radius for the generic border radius style.
|
|
Notes:
|
|
- [1] : The border style overwrites any border style as it uses
|
|
`!important`, exercise caution when using.
|
|
*/
|
|
/*
|
|
Mixin for generic contextual color text styles.
|
|
Parameters:
|
|
- $colored-text-name : The class name for the contextual color text style.
|
|
- $colored-text-color : The color for the contextual color text style.
|
|
Notes:
|
|
- [1] : The contextual color text style overwrites any text color as it uses
|
|
`!important`, exercise caution when using.
|
|
*/
|
|
/*
|
|
Mixin for generic contextual background text styles.
|
|
Parameters:
|
|
- $colored-bg-text-name : The class name for the contextual background text style.
|
|
- $colored-bg-text-color : The background color for the contextual background text style.
|
|
Notes:
|
|
- [1] : The contextual background text style overwrites any text color as it
|
|
uses `!important`, exercise caution when using.
|
|
*/
|
|
/*
|
|
Mixin for simple caret utility class.
|
|
Parameters:
|
|
- $caret-name : The class name for caret utility class.
|
|
- $caret-size : The size of the caret utility element. [1]
|
|
- $caret-color : The color of the caret utility element.
|
|
Notes:
|
|
- [1] : The caret is built using the border trick. Sizes can be specified
|
|
in either `px` or `em`, but they might take a bit of tweaking to
|
|
get right.
|
|
*/
|
|
/*
|
|
Mixin for simple close sign utility class.
|
|
Parameters:
|
|
- $close-name : The class name for close utility class.
|
|
- $close-color : The color of the close utility element.
|
|
- $close-cursor : The cursor for the close utility element.
|
|
- $close-font-size : The font-size for the close utility element.
|
|
- $close-font-weight : The font-weight for the close utility element.
|
|
- $close-hover-color : The color of the close utility element when hovering over it.
|
|
*/
|
|
/*
|
|
Mixin for quick float classes. [1]
|
|
Parameters:
|
|
- $drag-left-name : The class name for left drags.
|
|
- $drag-right-name : The class name for right drags.
|
|
Notes:
|
|
- [1] : These classes use `!important` to set the float properties,
|
|
exercise caution when using.
|
|
*/
|
|
/*
|
|
Mixin for center block class.
|
|
Parameters:
|
|
- $center-block-name : The class name for center block class.
|
|
*/
|
|
/*
|
|
Mixin for clearfix class.
|
|
Parameters:
|
|
- $clearfix-name : The class name for the clearfix class.
|
|
*/
|
|
/*
|
|
Mixin for hidden class. [1]
|
|
Parameters:
|
|
- $hidden-name : The class name for hidden elements.
|
|
Notes:
|
|
- [1] : This class uses `!important` to set the display property,
|
|
exercise caution when using.
|
|
*/
|
|
pre {
|
|
border: 1px solid rgba(0, 0, 0, 0.25); }
|
|
|
|
/*
|
|
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
|
Set body colors and margin.
|
|
*/
|
|
html {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.42857;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%; }
|
|
|
|
body {
|
|
margin: 0;
|
|
color: #333;
|
|
background-color: #fff; }
|
|
|
|
/*
|
|
Correct display in IE 9-.
|
|
Give images display: block to be responsive.
|
|
*/
|
|
article, aside, footer, header, nav, section, figcaption, figure, main, details, menu, img {
|
|
display: block; }
|
|
|
|
/*
|
|
Correct margin in IE 8.
|
|
*/
|
|
figure {
|
|
margin: 1em 40px; }
|
|
|
|
/*
|
|
Styles for headers.
|
|
*/
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
font-weight: 500; }
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
color: #777;
|
|
font-weight: 400; }
|
|
|
|
h1 {
|
|
font-size: 36px; }
|
|
|
|
h2 {
|
|
font-size: 30px; }
|
|
|
|
h3 {
|
|
font-size: 24.0px; }
|
|
|
|
h4 {
|
|
font-size: 18.0px; }
|
|
|
|
h5 {
|
|
font-size: 14px; }
|
|
|
|
h6 {
|
|
font-size: 12px; }
|
|
|
|
/*
|
|
Correct box-sizing in Firefox.
|
|
Style for horizontal rule.
|
|
*/
|
|
hr {
|
|
box-sizing: content-box;
|
|
line-height: 1.14286;
|
|
margin: 0.7em 0;
|
|
height: 0;
|
|
border: 0;
|
|
border-top: 1px solid #d9d9d9; }
|
|
|
|
/*
|
|
Style for all small text and size for sub and sup.
|
|
*/
|
|
small, sub, sup {
|
|
font-size: 80%; }
|
|
|
|
/*
|
|
Style for paragraph and preformatted elements.
|
|
*/
|
|
p, pre {
|
|
margin: 0 0 10px; }
|
|
|
|
/*
|
|
Style for lists.
|
|
*/
|
|
ul, ol {
|
|
margin-top: 0;
|
|
margin-bottom: 10px; }
|
|
ul ul, ul ol, ol ul, ol ol {
|
|
margin-bottom: 0; }
|
|
|
|
/*
|
|
Styles for code and preformatted.
|
|
*/
|
|
samp, kbd, code, pre {
|
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
font-size: 14px; }
|
|
|
|
kbd, code, pre {
|
|
padding: 2px 4px;
|
|
border-radius: 4px; }
|
|
|
|
code, pre {
|
|
background-color: #f9f2f4; }
|
|
|
|
kbd {
|
|
color: #fff;
|
|
background-color: #333; }
|
|
|
|
pre {
|
|
display: block;
|
|
word-break: break-all;
|
|
word-wrap: break-word; }
|
|
pre code {
|
|
padding: 0;
|
|
font-size: inherit;
|
|
color: inherit;
|
|
white-space: pre-wrap;
|
|
background-color: transparent;
|
|
border-radius: 0; }
|
|
|
|
/*
|
|
Style for hyperlinks, remove underline.
|
|
Remove gray background on active links in IE 10.
|
|
Remove outline on focused links when they are also active or hovered.
|
|
*/
|
|
a {
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
color: #337ab7; }
|
|
a:active, a:hover {
|
|
outline-width: 0;
|
|
color: #23527c; }
|
|
a:visited {
|
|
color: #337ab7; }
|
|
a:visited:active, a:visited:hover {
|
|
color: #23527c; }
|
|
|
|
/*
|
|
Prevent the duplicate application of `bolder` in Safari 6.
|
|
*/
|
|
b, strong {
|
|
font-weight: inherit; }
|
|
|
|
/*
|
|
Correct font weight in Chrome, Edge, Safari.
|
|
*/
|
|
b, strong {
|
|
font-weight: bolder; }
|
|
|
|
/*
|
|
Correct font style in Android 4.3-.
|
|
*/
|
|
dfn {
|
|
font-style: italic; }
|
|
|
|
/*
|
|
Remove botom border in Firefox 39-.
|
|
Correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
*/
|
|
abbr[title] {
|
|
border-bottom: none;
|
|
text-decoration: underline;
|
|
text-decoration: underline dotted; }
|
|
|
|
/*
|
|
Style for mark.
|
|
*/
|
|
mark {
|
|
background-color: #fcf8e3;
|
|
color: #333; }
|
|
|
|
/*
|
|
Styling for hidden elements.
|
|
Correct display for template in IE.
|
|
Correct display for audio:not([controls]) in iOS 4-7.
|
|
*/
|
|
[hidden], .hidden, template, audio:not([controls]) {
|
|
display: none; }
|
|
|
|
audio:not([controls]) {
|
|
height: 0; }
|
|
|
|
/*
|
|
Correct display in IE 9-.
|
|
*/
|
|
audio, video, progress {
|
|
display: inline-block; }
|
|
|
|
/*
|
|
Styles for sub and sup.
|
|
Prevent `sub` and `sup` elements from affecting the line height.
|
|
Correct vertical alignment of progress in Chrome, Firefox, and Opera.
|
|
*/
|
|
sub, sup, progress {
|
|
vertical-align: baseline; }
|
|
|
|
sub, sup {
|
|
line-height: 0;
|
|
position: relative; }
|
|
|
|
sub {
|
|
bottom: -0.25em; }
|
|
|
|
sup {
|
|
top: -0.5em; }
|
|
|
|
/*
|
|
Remove the border on images inside links in IE 10-.
|
|
Make images responsive.
|
|
*/
|
|
img {
|
|
border-style: none;
|
|
max-width: 100%; }
|
|
|
|
/*
|
|
Hide the overflow in IE.
|
|
*/
|
|
svg:not(:root) {
|
|
overflow: hidden; }
|
|
|
|
/*
|
|
Show the overflow in IE and Edge.
|
|
*/
|
|
button, input, hr {
|
|
overflow: visible; }
|
|
|
|
/*
|
|
Style for buttons and input elements.
|
|
*/
|
|
button, input, optgroup, select, textarea {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 100%;
|
|
line-height: 1.14286;
|
|
margin: 0; }
|
|
|
|
/*
|
|
Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
*/
|
|
button, select {
|
|
text-transform: none; }
|
|
|
|
/*
|
|
Correct styling for iOS, Safari and Firefox.
|
|
*/
|
|
button, html [type="button"], [type="reset"], [type="submit"] {
|
|
-webkit-appearance: button; }
|
|
button::-moz-focus-inner, html [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
|
border-style: none;
|
|
padding: 0; }
|
|
button:-moz-focusring, html [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
|
|
outline: 1px dotted ButtonText; }
|
|
|
|
/*
|
|
Style for fieldset.
|
|
*/
|
|
fieldset {
|
|
border: 0;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
/*
|
|
Add correct box sizing and remove padding in IE 10-.
|
|
*/
|
|
[type="checkbox"], [type="radio"], legend {
|
|
box-sizing: border-box;
|
|
padding: 0; }
|
|
|
|
/*
|
|
|
|
Correct text wrapping and color inheritance from `fieldset` elements in Edge and IE.
|
|
Remove the padding so developers are not caught out when they zero out `fieldset`
|
|
elements in all browsers.
|
|
*/
|
|
legend {
|
|
color: inherit;
|
|
display: table;
|
|
max-width: 100%;
|
|
white-space: normal; }
|
|
|
|
/*
|
|
Remove the default vertical scrollbar in IE.
|
|
*/
|
|
textarea {
|
|
overflow: auto; }
|
|
|
|
/*
|
|
Correct the cursor style of increment and decrement buttons in Chrome.
|
|
Make images responsive.
|
|
*/
|
|
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button, img {
|
|
height: auto; }
|
|
|
|
/*
|
|
Correct styling in Chrome and Safari.
|
|
Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
|
|
*/
|
|
[type="search"] {
|
|
-webkit-appearance: textfield;
|
|
outline-offset: -2px; }
|
|
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none; }
|
|
|
|
/*
|
|
Correct the inability to style clickable types in iOS and Safari.
|
|
Change font properties to `inherit` in Safari.
|
|
*/
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button;
|
|
font: inherit; }
|
|
|
|
/*
|
|
Mixin for button color variant.
|
|
Parameters:
|
|
- $btn-variant-color : The text color of the button variant.
|
|
- $btn-variant-bg-color : The background color of the button variant.
|
|
- $btn-variant-hover-style : Hover/active/focus style of the button variant. [1]
|
|
- $btn-variant-hover-style-percentage : Hover/active/focus style of the button variant percentage modifier.
|
|
Notes:
|
|
- [1] : The values that $btn-variant-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`.
|
|
- [2] : Do not use this mixin directly, use `make-btn-style` instead.
|
|
*/
|
|
/*
|
|
Mixin for the buttons.
|
|
Parameters:
|
|
- $btn-name : The class name of the buttons.
|
|
- $btn-border : The border of the buttons.
|
|
- $btn-border-radius : The border-radius of the buttons.
|
|
- $btn-margin : The margin of the buttons.
|
|
- $btn-padding : The padding of the buttons.
|
|
- $btn-color : The text color of the buttons.
|
|
- $btn-bg-color : The background color of the buttons.
|
|
- $btn-hover-style : Hover/active/focus style of the buttons. [1]
|
|
- $btn-hover-style-percentage : Hover/active/focus style of the buttons percentage modifier.
|
|
- $btn-cursor : The cursor style when hovering over the buttons.
|
|
- $btn-disabled-cursor : The cursor style when hovering over the buttons whie disabled.
|
|
- $btn-disabled-opacity : The opacity of the buttons when disabled.
|
|
Notes:
|
|
- [1] : The values that $btn-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`.
|
|
- [2] : This only creates a basic button style. For more styles use `make-btn-style`.
|
|
*/
|
|
/*
|
|
Mixin for button styles.
|
|
Parameters:
|
|
- $btn-name : The class name of the buttons. [1]
|
|
- $btn-style-name : The class name of the button style.
|
|
- $btn-style-color : The text color of the button style.
|
|
- $btn-style-bg-color : The background color of the button style.
|
|
- $btn-style-hover-style : Hover/active/focus style of the button style. [2][3]
|
|
- $btn-style-hover-style-percentage : Hover/active/focus style of the button style percentage modifier.[3]
|
|
Notes:
|
|
- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise
|
|
the specified style will not work correctly.
|
|
- [2] : The values that $btn-style-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`.
|
|
- [3] : The values of $btn-style-hover-style and $btn-style-hover-style-percentage default to `lighten`
|
|
and `7.5%` if not specified.
|
|
- [4] : This mixin should be used in combination with `make-btn` and is suggested that you use it after
|
|
`make-btn`.
|
|
*/
|
|
/*
|
|
Mixin for button sizes.
|
|
Parameters:
|
|
- $btn-name : The class name of the buttons. [1]
|
|
- $btn-size-name : The class name of the button size.
|
|
- $btn-size-padding : The padding of the button size.
|
|
- $btn-size-font-size : The font-size of the button size.
|
|
Notes:
|
|
- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise
|
|
the specified style will not work correctly.
|
|
- [2] : This mixin should be used in combination with `make-btn` and is suggested that you use it after
|
|
`make-btn`.
|
|
*/
|
|
.btn, a.btn, a.btn:visited {
|
|
display: inline-block;
|
|
border: 0;
|
|
border-radius: 4px;
|
|
margin: 5px 0;
|
|
padding: 6px 12px;
|
|
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: #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.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.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.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.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.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.
|
|
Parameters:
|
|
- $container-name : The class name of the container for the grid.
|
|
- $container-padding : The left and right padding of the container. [1]
|
|
- $row-name : The class name of the grid's rows.
|
|
- $col-name : The class name of the grid's columns.
|
|
- $col-number : The amount of columns in the grid.
|
|
- $xs-prefix : Class prefix for extra small screens.
|
|
- $sm-prefix : Class prefix for small screens.
|
|
- $md-prefix : Class prefix for medium screens.
|
|
- $lg-prefix : Class prefix for large screens.
|
|
- $hide-suffix : Class suffix for hidden columns. [2]
|
|
- $sm-breakpoint : Breakpoint for small screens.
|
|
- $md-breakpoint : Breakpoint for medium screens.
|
|
- $lg-breakpoint : Breakpoint for large screens.
|
|
Notes:
|
|
- [1] : The padding of the container might cause the page to grow by $container-padding to the right. This
|
|
can be fixed either via @media queries or setting the padding to 0.
|
|
- [2] : Columns with the $hide-suffix will be only hidden in the screen size specified.
|
|
- [3] : Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information.
|
|
*/
|
|
.container-fluid {
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
width: 100%; }
|
|
.container-fluid * {
|
|
box-sizing: border-box; }
|
|
|
|
.row:before, .row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both; }
|
|
|
|
.col {
|
|
float: left;
|
|
padding: 15px; }
|
|
|
|
.xs-1 {
|
|
width: 8.33333%; }
|
|
|
|
.xs-2 {
|
|
width: 16.66667%; }
|
|
|
|
.xs-3 {
|
|
width: 25%; }
|
|
|
|
.xs-4 {
|
|
width: 33.33333%; }
|
|
|
|
.xs-5 {
|
|
width: 41.66667%; }
|
|
|
|
.xs-6 {
|
|
width: 50%; }
|
|
|
|
.xs-7 {
|
|
width: 58.33333%; }
|
|
|
|
.xs-8 {
|
|
width: 66.66667%; }
|
|
|
|
.xs-9 {
|
|
width: 75%; }
|
|
|
|
.xs-10 {
|
|
width: 83.33333%; }
|
|
|
|
.xs-11 {
|
|
width: 91.66667%; }
|
|
|
|
.xs-12 {
|
|
width: 100%; }
|
|
|
|
.sm-hidden,
|
|
.md-hidden,
|
|
.lg-hidden {
|
|
display: block; }
|
|
|
|
.xs-hidden {
|
|
display: none; }
|
|
|
|
@media (min-width: 768px) {
|
|
.sm-1 {
|
|
width: 8.33333%; }
|
|
|
|
.sm-2 {
|
|
width: 16.66667%; }
|
|
|
|
.sm-3 {
|
|
width: 25%; }
|
|
|
|
.sm-4 {
|
|
width: 33.33333%; }
|
|
|
|
.sm-5 {
|
|
width: 41.66667%; }
|
|
|
|
.sm-6 {
|
|
width: 50%; }
|
|
|
|
.sm-7 {
|
|
width: 58.33333%; }
|
|
|
|
.sm-8 {
|
|
width: 66.66667%; }
|
|
|
|
.sm-9 {
|
|
width: 75%; }
|
|
|
|
.sm-10 {
|
|
width: 83.33333%; }
|
|
|
|
.sm-11 {
|
|
width: 91.66667%; }
|
|
|
|
.sm-12 {
|
|
width: 100%; }
|
|
|
|
.xs-hidden,
|
|
.md-hidden,
|
|
.lg-hidden {
|
|
display: block; }
|
|
|
|
.sm-hidden {
|
|
display: none; } }
|
|
@media (min-width: 992px) {
|
|
.md-1 {
|
|
width: 8.33333%; }
|
|
|
|
.md-2 {
|
|
width: 16.66667%; }
|
|
|
|
.md-3 {
|
|
width: 25%; }
|
|
|
|
.md-4 {
|
|
width: 33.33333%; }
|
|
|
|
.md-5 {
|
|
width: 41.66667%; }
|
|
|
|
.md-6 {
|
|
width: 50%; }
|
|
|
|
.md-7 {
|
|
width: 58.33333%; }
|
|
|
|
.md-8 {
|
|
width: 66.66667%; }
|
|
|
|
.md-9 {
|
|
width: 75%; }
|
|
|
|
.md-10 {
|
|
width: 83.33333%; }
|
|
|
|
.md-11 {
|
|
width: 91.66667%; }
|
|
|
|
.md-12 {
|
|
width: 100%; }
|
|
|
|
.xs-hidden,
|
|
.sm-hidden,
|
|
.lg-hidden {
|
|
display: block; }
|
|
|
|
.md-hidden {
|
|
display: none; } }
|
|
@media (min-width: 1200px) {
|
|
.lg-1 {
|
|
width: 8.33333%; }
|
|
|
|
.lg-2 {
|
|
width: 16.66667%; }
|
|
|
|
.lg-3 {
|
|
width: 25%; }
|
|
|
|
.lg-4 {
|
|
width: 33.33333%; }
|
|
|
|
.lg-5 {
|
|
width: 41.66667%; }
|
|
|
|
.lg-6 {
|
|
width: 50%; }
|
|
|
|
.lg-7 {
|
|
width: 58.33333%; }
|
|
|
|
.lg-8 {
|
|
width: 66.66667%; }
|
|
|
|
.lg-9 {
|
|
width: 75%; }
|
|
|
|
.lg-10 {
|
|
width: 83.33333%; }
|
|
|
|
.lg-11 {
|
|
width: 91.66667%; }
|
|
|
|
.lg-12 {
|
|
width: 100%; }
|
|
|
|
.xs-hidden,
|
|
.sm-hidden,
|
|
.md-hidden {
|
|
display: block; }
|
|
|
|
.lg-hidden {
|
|
display: none; } }
|
|
/*
|
|
Mixin for the forms.
|
|
Parameters:
|
|
- $frm-name : The class name of the form.
|
|
- $frm-border : The border of the form elements.
|
|
- $frm-border-radius : The border-radius of the form elements.
|
|
- $frm-margin : The margin of the form elements.
|
|
- $frm-padding : The padding of the form elements.
|
|
- $frm-focus-color : The color used to mark the focused form element.
|
|
- $frm-invalid-color : The color used to mark an invalid form element.
|
|
- $frm-disabled-cursor : The cursor style when hovering over disabled form elements.
|
|
- $frm-disabled-opacity : The opacity of the form elements when disabled.
|
|
- $frm-readonly-bg-color : The background color of the form elements when they are readonly.
|
|
- $frm-readonly-border-color : The border color of the form elements when they are readonly.
|
|
- $frm-select-height : The height for non-multiline select elements in the form.
|
|
- $frm-label-margin : The margin for the form's label elements.
|
|
- $frm-ctrl-group-name : The class name of the control groups in the form.
|
|
- $frm-ctl-group-margin : The margin for control groups inside the form.
|
|
- $frm-inline-name : The class name for forms with inline style.
|
|
- $frm-aligned-name : The class name for forms with aligned style.
|
|
- $frm-aligned-label-width : The width of labels in forms with aligned style.
|
|
Notes:
|
|
- [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling.
|
|
Please use the button styles and mixins provided to properly style them to your liking.
|
|
*/
|
|
.form input[type="color"], .form input[type^="date"], .form input[type$="time"], .form input[type="email"],
|
|
.form input[type="month"], .form input[type="week"], .form input[type="text"], .form input[type="password"],
|
|
.form input[type="url"], .form input[type="number"], .form input[type="search"], .form input[type="tel"],
|
|
.form select, .form textarea {
|
|
box-sizing: border-box;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: none; }
|
|
.form input:not([type]) {
|
|
box-sizing: border-box;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: none; }
|
|
.form input, .form select, .form textarea {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 6px 12px; }
|
|
.form input:focus, .form select:focus, .form textarea:focus {
|
|
border-color: #66afe9; }
|
|
.form input[disabled], .form select[disabled], .form textarea[disabled] {
|
|
cursor: not-allowed;
|
|
opacity: 0.65; }
|
|
.form input:invalid, .form input:focus:invalid, .form input:focus:invalid:focus, .form select:invalid, .form select:focus:invalid, .form select:focus:invalid:focus, .form textarea:invalid, .form textarea:focus:invalid, .form textarea:focus:invalid:focus {
|
|
border-color: #a94442; }
|
|
.form input[readonly], .form select[readonly], .form textarea[readonly] {
|
|
background-color: #e6e6e6;
|
|
border-color: #bfbfbf; }
|
|
.form input[type="checkbox"], .form input[type="radio"] {
|
|
display: inline-block; }
|
|
.form select {
|
|
height: 34px; }
|
|
.form select[multiple] {
|
|
height: auto; }
|
|
.form label {
|
|
margin: 0 0 5px 0; }
|
|
.form.form-inline input, .form.form-inline select, .form.form-inline textarea, .form.form-inline label, .form.form-horizontal input, .form.form-horizontal select, .form.form-horizontal textarea, .form.form-horizontal label {
|
|
display: inline-block; }
|
|
.form.form-inline .ctrl-group {
|
|
display: inline-block; }
|
|
.form.form-horizontal .form-group label {
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
width: 20%;
|
|
margin-top: 0; }
|
|
.form .form-group {
|
|
margin: 0 0 15px 0; }
|
|
|
|
/*
|
|
Mixin for the tables.
|
|
Parameters:
|
|
- $tbl-name : The class name of the table.
|
|
- $tbl-border : The border of the table and cells. [1]
|
|
- $tbl-margin : The margin of the table cells.
|
|
- $tbl-padding : The padding of the table cells.
|
|
- $tbl-head-bg-color : The color of the thead background.
|
|
- $tbl-head-color : The color of the thead text.
|
|
- $tbl-body-bg-color : The color of the even-numbered rows in tbody.
|
|
- $tbl-body-alt-bg-color : The color of the odd-numbered rows in tbody.
|
|
- $tbl-body-color : The color of the text in tbody.
|
|
- $tbl-horizontal-name : The class name for the horizontal style table.
|
|
- $tbl-bordered-name : The class name for the bordered style table.
|
|
Notes:
|
|
- [1] : This style will apply to the table and cells. All styles applied to
|
|
the table (horizontal, bordered) will use the same style of border.
|
|
*/
|
|
.table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
empty-cells: show;
|
|
border: 1px solid #ddd; }
|
|
.table td, .table th {
|
|
overflow: visible;
|
|
border-left: 1px solid #ddd;
|
|
border-bottom: none;
|
|
margin: 0;
|
|
padding: 8px; }
|
|
.table thead {
|
|
background-color: #fff;
|
|
color: #333;
|
|
text-align: left; }
|
|
.table tbody {
|
|
background-color: #fff;
|
|
color: #333; }
|
|
.table tbody tr:nth-child(2n-1) {
|
|
background-color: #f9f9f9; }
|
|
.table.table-horizontal td, .table.table-horizontal th {
|
|
border-left: none;
|
|
border-bottom: 1px solid #ddd; }
|
|
.table.table-bordered td, .table.table-bordered th {
|
|
border-bottom: 1px solid #ddd; }
|
|
|
|
/*
|
|
Mixin for navigation bar and complementary styles.
|
|
Parameters:
|
|
- $nav-name : The class name for the navigation bar.
|
|
- $nav-vertical-name : The class name for the vertical style of the navigation bar.
|
|
- $nav-fixed-name : The class name for the fixed style of the navigation bar.
|
|
- $nav-logo-name : The class name for the logo item of the navigation bar.
|
|
- $nav-logo-size : The font-size of the logo item of the navigation bar.
|
|
- $nav-link-name : The class name for the navigation links of the navigation bar.
|
|
- $nav-padding : The padding of the elements of the navigation bar. [1]
|
|
- $nav-color : The text color of the navigation elements.
|
|
- $nav-bg-color : The background color of the navigation bar.
|
|
- $nav-hover-style : Hover/active/focus style of the navigation elements. [2]
|
|
- $nav-hover-style-percentage : Hover/active/focus style of the navigation elements percentage modifier.
|
|
- $nav-disabled-cursor : The cursor style when hovering over the navigation elements whie disabled.
|
|
- $nav-disabled-opacity : The opacity of the navigation elements when disabled.
|
|
- $nav-fixed-left-right : The orientation of the fixed navigation bar. [3][4]
|
|
- $grid-columns-total : Total amount fo columns in the used grid. [5]
|
|
- $grid-coloumns-count-for-nav-fixed-vertical : Desired amount of columns occupied by the vertical navigation bar in the grid. [5]
|
|
- $nav-fixed-collapse-breakpoint : The breakpoint below which fixed navigation bars will collapse to a menu toggle button.
|
|
- $nav-fixed-collapse-label-location : Location of the collapsed menu button label. [6]
|
|
- $nav-fixed-collapse-label-margin : The margin for the collapsed menu button label.
|
|
- $nav-fixed-collapse-label-font-size : The font size of the collapsed menu button label.
|
|
Notes:
|
|
- [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed).
|
|
For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse
|
|
label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to
|
|
avoid CSS errors and ultimately the style not being applied to some elements.
|
|
- [2] : The values that $nav-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`.
|
|
- [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values
|
|
are provided, due to the inside condition only checking for `left`, `right` will be used as the
|
|
default value.
|
|
- [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars
|
|
should not be affected as they are 100% width, meaning that anchoring to left or right should have
|
|
the same result.
|
|
- [5] : These values are used to make the navigation bar work better with the grid system. Values do not have
|
|
to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving
|
|
a small gap just before the third column in the grid. If no grid is specified, you can use percentage
|
|
values like 100 and 15 to get a 15% width for example.
|
|
- [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left`
|
|
and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be
|
|
used as a default if no valid value is specified.
|
|
*/
|
|
.navbar {
|
|
box-sizing: border-box;
|
|
background-color: #f8f8f8; }
|
|
.navbar .navbar-brand {
|
|
font-size: 128.6%;
|
|
color: #333; }
|
|
.navbar ul {
|
|
display: inline-block;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
.navbar ul li {
|
|
display: inline-block;
|
|
margin: 0;
|
|
white-space: nowrap; }
|
|
.navbar ul li > * {
|
|
display: inline-block;
|
|
padding: 15px;
|
|
color: #333;
|
|
margin: 0; }
|
|
.navbar ul li .navbar-nav:hover, .navbar ul li .navbar-nav:active, .navbar ul li .navbar-nav:focus {
|
|
color: #333;
|
|
background: #e5e5e5; }
|
|
.navbar ul li .navbar-nav.disabled, .navbar ul li .navbar-nav[disabled], .navbar ul li .navbar-nav:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.65; }
|
|
.navbar.navbar-vertical ul {
|
|
display: block; }
|
|
.navbar.navbar-vertical ul li {
|
|
display: block; }
|
|
.navbar.navbar-vertical ul li > * {
|
|
width: 100%;
|
|
padding: 15px 0; }
|
|
.navbar.navbar-fixed {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
width: 100%; }
|
|
.navbar.navbar-fixed.navbar-vertical {
|
|
height: 100%;
|
|
width: 16.66667%; }
|
|
.navbar.navbar-fixed.navbar-vertical ul {
|
|
width: 100%; }
|
|
.navbar.navbar-fixed.navbar-vertical ul li {
|
|
display: block; }
|
|
.navbar + label {
|
|
display: none;
|
|
font-weight: 700;
|
|
margin: 10px;
|
|
font-size: 1.75em;
|
|
padding: 15px;
|
|
color: #333;
|
|
background-color: #f8f8f8;
|
|
width: auto;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
right: 0; }
|
|
.navbar + label:before {
|
|
position: relative;
|
|
content: '\2630'; }
|
|
.navbar + label:hover, .navbar + label:active, .navbar + label:focus {
|
|
background: #e5e5e5; }
|
|
|
|
@media (max-width: 768px) {
|
|
.navbar {
|
|
overflow: auto; }
|
|
.navbar.navbar-fixed {
|
|
display: none; }
|
|
.navbar.navbar-fixed + label {
|
|
display: block; }
|
|
|
|
input[type="checkbox"]:checked + .navbar.navbar-fixed {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%; }
|
|
input[type="checkbox"]:checked + .navbar.navbar-fixed ul {
|
|
display: block; }
|
|
input[type="checkbox"]:checked + .navbar.navbar-fixed ul li {
|
|
display: block; }
|
|
input[type="checkbox"]:checked + .navbar.navbar-fixed ul li * {
|
|
width: 100%;
|
|
padding: 15px 0; }
|
|
input[type="checkbox"]:checked + .navbar.navbar-fixed + label:before {
|
|
content: '\00d7'; } }
|
|
.navbar {
|
|
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
|
|
|
.navbar {
|
|
border-radius: 4px !important; }
|
|
|
|
img.thumbnail {
|
|
padding: 4px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
cursor: pointer; }
|
|
img.thumbnail:hover, img.thumbnail:focus, img.thumbnailactive {
|
|
border-color: #337ab7; }
|
|
|
|
.bordered {
|
|
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
|
|
|
.rounded {
|
|
border-radius: 4px !important; }
|
|
|
|
.circle {
|
|
border-radius: 50% !important; }
|
|
|
|
.text-primary {
|
|
color: #337ab7 !important; }
|
|
|
|
.text-success {
|
|
color: #5cb85c !important; }
|
|
|
|
.text-info {
|
|
color: #5bc0de !important; }
|
|
|
|
.text-warning {
|
|
color: #f0ad4e !important; }
|
|
|
|
.text-danger {
|
|
color: #d9534f !important; }
|
|
|
|
.text-muted {
|
|
color: #777 !important; }
|
|
|
|
.bg-primary {
|
|
background-color: #337ab7 !important; }
|
|
|
|
.bg-success {
|
|
background-color: #5cb85c !important; }
|
|
|
|
.bg-info {
|
|
background-color: #5bc0de !important; }
|
|
|
|
.bg-warning {
|
|
background-color: #f0ad4e !important; }
|
|
|
|
.bg-danger {
|
|
background-color: #d9534f !important; }
|
|
|
|
.caret {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
width: 0;
|
|
height: 0;
|
|
border: 4px solid transparent;
|
|
border-top: 4px solid #333; }
|
|
|
|
.close {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
color: #aaa;
|
|
font-size: 21px;
|
|
font-weight: 700;
|
|
cursor: pointer; }
|
|
.close:before {
|
|
content: '\00d7'; }
|
|
.close:hover, .close:active, .close:focus {
|
|
color: #777; }
|
|
|
|
.pull-left {
|
|
float: left !important; }
|
|
|
|
.pull-right {
|
|
float: right !important; }
|
|
|
|
.center-block {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto; }
|
|
|
|
.clearfix:before, .clearfix:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both; }
|
|
|
|
.hidden {
|
|
display: none !important; }
|
|
|
|
/*
|
|
Mixin for the labels/badges.
|
|
Parameters:
|
|
- $lbl-name : The class name of the labels/badges.
|
|
- $lbl-bg-color : The background color of the labels/badges.
|
|
- $lbl-color : The text color of the labels/badges.
|
|
- $lbl-border-radius : The border-radius of the labels/badges.
|
|
- $lbl-padding : The padding of the labels/badges.
|
|
- $lbl-hide-on-empty : Style of the label/badges when empty. [1]
|
|
Notes:
|
|
- [1] : The values that $lbl-hide-on-empty can take are `hide` or `show`. The inside condition only
|
|
checks if the value is `hide` and acts accordingly. Invalid values are treated as `show`.
|
|
*/
|
|
/*
|
|
Mixin for labels/badges styles.
|
|
Parameters:
|
|
- $lbl-name : The class name of the labels/badges. [1]
|
|
- $lbl-style-name : The class name of the labels/badges style.
|
|
- $lbl-style-color : The text color of the labels/badges style.
|
|
- $lbl-style-bg-color : The background color of the labels/badges style.
|
|
Notes:
|
|
- [1] : The value of $lbl-name must be the same as the value specified when using `make-lbl`, otherwise
|
|
the specified style will not work correctly.
|
|
*/
|
|
.label {
|
|
display: inline-block;
|
|
padding: 0.2em 0.6em 0.3em;
|
|
color: #fff;
|
|
background-color: #777;
|
|
border-radius: 0.25em; }
|
|
.label:empty {
|
|
display: none; }
|
|
|
|
.label.label-primary {
|
|
color: #fff;
|
|
background-color: #337ab7; }
|
|
|
|
.label.label-success {
|
|
color: #fff;
|
|
background-color: #5cb85c; }
|
|
|
|
.label.label-info {
|
|
color: #fff;
|
|
background-color: #5bc0de; }
|
|
|
|
.label.label-warning {
|
|
color: #fff;
|
|
background-color: #f0ad4e; }
|
|
|
|
.label.label-danger {
|
|
color: #fff;
|
|
background-color: #d9534f; }
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 3px 7px;
|
|
color: #fff;
|
|
background-color: #777;
|
|
border-radius: 10px; }
|
|
.badge:empty {
|
|
display: none; }
|
|
|
|
.badge.badge-primary {
|
|
color: #fff;
|
|
background-color: #337ab7; }
|
|
|
|
.badge.badge-success {
|
|
color: #fff;
|
|
background-color: #5cb85c; }
|
|
|
|
.badge.badge-info {
|
|
color: #fff;
|
|
background-color: #5bc0de; }
|
|
|
|
.badge.badge-warning {
|
|
color: #fff;
|
|
background-color: #f0ad4e; }
|
|
|
|
.badge.badge-danger {
|
|
color: #fff;
|
|
background-color: #d9534f; }
|
|
|
|
/*
|
|
Mixin for tab system.
|
|
Parameters:
|
|
- $tabs-name : The class name for the tab system's container.
|
|
- $tabs-label-spacing : The spacing between tab labels.
|
|
- $tabs-label-height : The height of the tab labels.
|
|
- $tabs-label-padding : The padding of the tab labels.
|
|
- $tabs-label-color : The text color of the tab labels.
|
|
- $tabs-label-bg-color : The background color of the tab labels.
|
|
- $tabs-active-label-color : The text color of the active tab's label.
|
|
- $tabs-active-label-bg-color : The background color of the active tab's label.
|
|
- $tabs-border-color : Border color for the tab system. [1]
|
|
- $tabs-label-border-radius : Border radius for the tab labels.
|
|
- $tabs-active-label-stripe : The style of the colored stripe that appears on the active tab's label. [2]
|
|
- $tabs-inactive-label-hover-style : Hover/active/focus style of the tab labels. [3]
|
|
- $tabs-inactive-label-hover-style-percentage : Hover/active/focus style of the tab labels percentage modifier.
|
|
- $tabs-content-bg-color : The background color of the active tab's content.
|
|
- $tabs-content-padding : The padding of the active tab's content.
|
|
Notes:
|
|
- [1] : The color specified in $tabs-border-color applies to all borders in the tab system. This
|
|
includes borders in the tab labels and active tab's content.
|
|
- [2] : The style of the colored stripe is a border style so you should specify it as such.
|
|
- [3] : The values that $tabs-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`.
|
|
*/
|
|
.nav-tabs {
|
|
position: relative;
|
|
min-height: 250px;
|
|
width: 100%; }
|
|
.nav-tabs input[type="radio"] {
|
|
display: none; }
|
|
.nav-tabs input[type="radio"] + div {
|
|
display: inline; }
|
|
.nav-tabs input[type="radio"] + div > label {
|
|
position: reative;
|
|
float: left;
|
|
margin-right: 3px;
|
|
left: 1px;
|
|
height: 20px;
|
|
padding: 10px 18px;
|
|
color: #337ab7;
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px 4px 0 0;
|
|
cursor: pointer; }
|
|
.nav-tabs input[type="radio"] + div > label:hover, .nav-tabs input[type="radio"] + div > label:active, .nav-tabs input[type="radio"] + div > label:focus {
|
|
background: #e6e6e6; }
|
|
.nav-tabs input[type="radio"] + div > label + div {
|
|
position: absolute;
|
|
z-index: -2;
|
|
left: 0;
|
|
top: 19px;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border: 1px solid #ddd; }
|
|
.nav-tabs input[type="radio"]:checked + div > label {
|
|
color: #333;
|
|
background: #fff;
|
|
border-top: 1px solid #ddd;
|
|
border-bottom: 1px solid #fff; }
|
|
.nav-tabs input[type="radio"]:checked + div > label + div {
|
|
position: absolute;
|
|
z-index: -1; }
|
|
|
|
.nav-tabs input[type="radio"] + div > label + div {
|
|
top: 40px; }
|
|
|
|
.nav-tabs input[type="radio"] + div > label {
|
|
border: 0; }
|
|
|
|
.nav-tabs input[type="radio"]:checked + div > label {
|
|
border: 1px solid #ddd;
|
|
border-bottom: 0; }
|
|
|
|
/*
|
|
Mixin for modal dialogs.
|
|
Parameters:
|
|
- $modal-name : The class name for the modal dialog.
|
|
- $modal-color : The text color of the modal dialog.
|
|
- $modal-bg-color : The background color of the modal dialog.
|
|
- $modal-transition-enabled : Determines if a transition style will be applied when the modal changes states. [1]
|
|
- $modal-shadow-enabled : Determines if a shadow should be cast from the modal dialog. [1]
|
|
- $modal-border : The border style of the modal dialog.
|
|
- $modal-border-radius : The border radius of the modal dialog's border.
|
|
- $modal-padding : The padding of the modal dialog's contents.
|
|
- $modal-top-margin : The distance of the modal dialog from the top of the parent container. [2]
|
|
- $modal-width : The width of the modal dialog. [2]
|
|
Notes:
|
|
- [1] : The values of $modal-transition-enabled and $modal-shadow-enabled should be `enabled` or `disabled`.
|
|
If an invalid value is supplied, the mixin will act as if it was `disabled`.
|
|
- [2] : The values of $modal-top-margin and $modal-width should be in percentage (%) values to properly scale
|
|
on all devices. However, there are no restrictions.
|
|
*/
|
|
/*
|
|
Mixin for close button support inside of modal dialogs.
|
|
Parameters:
|
|
- $modal-name : The class name for the modal dialog. [1]
|
|
- $close-name : The class name for the close sign utility class. [2]
|
|
- $modal-padding : The padding of the close button. [3]
|
|
Notes:
|
|
- [1] : The value of $modal-name should match the value specified in the modal dialog's
|
|
mixin, in order for this to work correctly.
|
|
- [2] : The value of $close-name should match the value specified in the close sign utility's
|
|
mixin, in order for this to work correctly.
|
|
- [3] : The close button will be placed at the top right of the modal dialog. Its padding
|
|
should be similar to the value specified for padding in the modal dialog itself, however
|
|
it could vary based on personal preference.
|
|
*/
|
|
.modal {
|
|
display: none; }
|
|
.modal + div {
|
|
z-index: 997;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 0;
|
|
opacity: 0;
|
|
display: none;
|
|
transition: opacity .3s ease-out; }
|
|
.modal + div > div {
|
|
z-index: 998;
|
|
position: relative;
|
|
width: 600px;
|
|
color: #333;
|
|
background-color: #fff;
|
|
margin: 30px auto 0;
|
|
padding: 18px;
|
|
border: 1px solid #999;
|
|
border-radius: 6px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
|
|
.modal:checked + div {
|
|
height: 100%;
|
|
opacity: 1;
|
|
display: block; }
|
|
.modal:checked + div > label {
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0; }
|
|
|
|
.modal + div > div .close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px; }
|
|
|
|
/*
|
|
Mixin for navigation bar's dropdown element.
|
|
Parameters:
|
|
- $nav-name : The class name for the navigation bar. [1]
|
|
- $nav-link-name : The class name for the navigation links of the navigation bar. [1]
|
|
- $dropdown-name : The class name for the dropdown element. [2]
|
|
- $dropdown-left-margin : The left margin of the dropdown element's contents. [3]
|
|
- $dropdown-font-size : The font size of the dropdown element's contents.
|
|
Notes:
|
|
- [1] : The values of $nav-name and $nav-link-name must match those specified in the navigation bar's
|
|
definition, otherwise the dropdown element will not work properly.
|
|
- [2] : The value of $dropdown-name is used in two distinct elements of the component, namely the
|
|
checkbox and the dropdown toggle.
|
|
- [3] : The value of $dropdown-left-margin will affect all open dropdown menus, as well as dropdown
|
|
menus on mobile screens. It is suggested that you set this value to something different than
|
|
0 to visually represent the menu hierarchy in devices with smaller screens.
|
|
*/
|
|
.navbar .navbar-nav.dropdown {
|
|
cursor: pointer; }
|
|
.navbar input[type="checkbox"], .navbar input[type="radio"] {
|
|
display: none; }
|
|
.navbar input[type="checkbox"].dropdown + div, .navbar input[type="radio"].dropdown + div {
|
|
display: none; }
|
|
.navbar input[type="checkbox"]:checked.dropdown + div, .navbar input[type="radio"]:checked.dropdown + div {
|
|
display: block;
|
|
font-size: 80%;
|
|
margin-left: 20px; }
|
|
|
|
/*
|
|
Mixin for collapse component.
|
|
Parameters:
|
|
- $collapse-name : The class name of the collapse component.
|
|
- $collapse-border : The border style of the collapse contents.
|
|
- $collapse-border-radius : The border radius of the collapse contents.
|
|
- $collapse-padding : The padding of the collapse contents.
|
|
- $collapse-margin-top : The margin above the collapse contents. [1]
|
|
- $collapse-color : The collapse contents' text color.
|
|
- $collapse-bg-color : The collapse contents' background color.
|
|
Notes:
|
|
- [1] : The value of $collapse-margin-top is used for spacing between the button label that is usually
|
|
above the collapsed contents and the contents themselves.
|
|
*/
|
|
/*
|
|
Mixin for accordion component.
|
|
Parameters:
|
|
- $accordion-name : The class name of the accordion component.
|
|
- $accordion-border : The border style of the accordion component.
|
|
- $accordion-border-radius : The border radius of the accordion component. [1]
|
|
- $accordion-padding : The padding of the accordion's contents.
|
|
- $accordion-margin : The margin between accordion's parts. [2]
|
|
- $accordion-color : The accordion contents' text color.
|
|
- $accordion-bg-color : The accordion contents' background color.
|
|
- $accordion-label-color : The accordion labels' text color.
|
|
- $accordion-label-bg-color : The accordion labels' background color.
|
|
- $accordion-label-padding : The padding of the accordion's labels.
|
|
- $accordion-hover-style : Hover/active/focus style of the accordion's labels. [3]
|
|
- $accordion-hover-style-percentage : Hover/active/focus style of the accordion's labels percentage modifier.
|
|
Notes:
|
|
- [1] : The value of $accordion-border-radius will be applied to labels along with their contents.
|
|
Closed labels will have the border-radius applied to all of their corners, while open labels will
|
|
change accordingly to combine their border with the shown contents.
|
|
- [2] : The value of $accordion-margin will be applied only to margin-bottom of all parts in order
|
|
to space them out evenly. This does not apply to label and related content margins.
|
|
- [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"].collapse {
|
|
display: none; }
|
|
input[type="checkbox"].collapse + div {
|
|
display: none;
|
|
color: #333;
|
|
background-color: #f5f5f5;
|
|
padding: 19px;
|
|
margin-top: 6px;
|
|
border: 1px solid #e3e3e3;
|
|
border-radius: 4px; }
|
|
input[type="checkbox"]:checked.collapse + div {
|
|
display: block; }
|
|
|
|
input[type="radio"].accordion {
|
|
display: none; }
|
|
input[type="radio"].accordion + label {
|
|
width: 100%;
|
|
display: block;
|
|
color: #333;
|
|
background-color: #f5f5f5;
|
|
padding: 8px;
|
|
margin-bottom: 6px;
|
|
border: 1px solid #e3e3e3;
|
|
border-radius: 4px;
|
|
cursor: pointer; }
|
|
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: 19px;
|
|
margin-top: -1px;
|
|
margin-bottom: 6px;
|
|
border: 1px solid #e3e3e3;
|
|
border-radius: 0 0 4px 4px; }
|
|
input[type="radio"]:checked.accordion + label {
|
|
border-radius: 4px 4px 0 0;
|
|
margin-bottom: 0; }
|
|
input[type="radio"]:checked.accordion + label + div {
|
|
display: block; }
|
|
|
|
/*
|
|
Mixin for the progress element.
|
|
Parameters:
|
|
- $progress-name : The class name of the progress wrapper.
|
|
- $progress-height : The height of the progress wrapper.
|
|
- $progress-border-radius : The border radius of the progress wrapper.
|
|
- $progress-bg-color : The background color of the progress wrapper. [1]
|
|
- $progress-font-size : The font size of the progress bar's text (if any).
|
|
- $progress-bar-color : The progress bar's text color.
|
|
- $progress-bar-bg-color : The progress bar's background color.
|
|
Notes:
|
|
- [1] : The background color of the progress wrapper should be a different color than the
|
|
page's background to make sure that it is visible.
|
|
- [2] : This only creates a basic progress style. For more progress bar styles use `make-progress-bar-variant`.
|
|
*/
|
|
/*
|
|
Mixin for progress bar styles.
|
|
Parameters:
|
|
- $progress-name : The class name of the progress wrapper. [1]
|
|
- $progress-bar-variant-name : The class name of the progress bar variant.
|
|
- $progress-bar-variant-color : The progress bar variant's text color.
|
|
- $progress-bar-variant-bg-coor : The progress bar variant's background color.
|
|
Notes:
|
|
- [1] : The name of $progress-name should match the one specified in `make-progress` for the
|
|
progress bar variant to work correctly.
|
|
- [2] : This mixin should be used in combination with `make-progress` and is suggested that you
|
|
use it after `make-progress`.
|
|
*/
|
|
.progress-bar {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 20px;
|
|
background-color: #d7d7d7;
|
|
border-radius: 4px; }
|
|
.progress-bar > span {
|
|
float: left;
|
|
width: 0;
|
|
height: 100%;
|
|
color: #fff;
|
|
background-color: #337ab7;
|
|
text-align: center;
|
|
font-size: 12px; }
|
|
|
|
.progress-bar > span.progress-bar-success {
|
|
color: #fff;
|
|
background-color: #5cb85c; }
|
|
|
|
.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:
|
|
- $spinner-dots-name : The class name of the dotted spinner component.
|
|
- $spinner-dots-height : The height of the dotted spinner component. [1][2]
|
|
- $spinner-dots-animation-time : The animation time of the dotted spinner component.
|
|
Notes:
|
|
- [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is
|
|
suggested that you specify it in the same measurement as the text base.
|
|
- [2] : The value of $spinner-dots-height will be used for both the size of the component
|
|
and the animation. Some tweaking might be required.
|
|
*/
|
|
/*
|
|
Mixin for dotted spinner component.
|
|
Parameters:
|
|
- $spinner-round-name : The class name of the round spinner component.
|
|
- $spinner-round-size : The size of the round spinner component. [1]
|
|
- $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
|
|
- $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
|
|
- $spinner-round-animation-time : The animation time of the round spinner component.
|
|
Notes:
|
|
- [1] : The value of $spinner-round-size affects both height and width of the component.
|
|
- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles
|
|
specified in border style format.
|
|
*/
|
|
.spinner-dots {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
height: 20px;
|
|
vertical-align: bottom; }
|
|
.spinner-dots:after {
|
|
display: inline-table;
|
|
white-space: pre;
|
|
content: "\A.\A..\A...";
|
|
animation: spin-dots 1.5s steps(4) infinite; }
|
|
|
|
@keyframes spin-dots {
|
|
to {
|
|
transform: translateY(-80px); } }
|
|
.spinner-round {
|
|
display: inline-block;
|
|
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: 20px;
|
|
height: 20px; }
|
|
|
|
@keyframes spin-round {
|
|
0% {
|
|
transform: rotate(0deg); }
|
|
100% {
|
|
transform: rotate(360deg); } }
|
|
/*
|
|
Mixin for the carousel component.
|
|
Parameters:
|
|
- $carousel-name : The class name for the carousel.
|
|
- $carousel-width : The width of the carousel. [1]
|
|
- $carousel-height : The height of the carousel.
|
|
- $carousel-border : The style of the carousel's border.
|
|
- $carousel-border-radius : The border-radius of the carousel.
|
|
- $carousel-container-bg-color : The background color of the carousel.
|
|
- $carousel-content-padding : The padding of the carousel's contents. [2]
|
|
- $carousel-description-color : The text color of the carousel's description.
|
|
- $carousel-description-bg-color : The background color of the carousel's description.
|
|
- $carousel-description-top : The distance of the carousel's description from the top of the container. [3]
|
|
- $carousel-description-height : The height of the carousel's description area. [3]
|
|
- $carousel-control-top : The distance of the carousel's controls from the top of the container. [3]
|
|
- $carousel-control-font-size : The font-size of the carousel's controls.
|
|
- $carousel-control-color : The text color of the carousel's controls.
|
|
Notes:
|
|
- [1] : The height of the carousel is suggested to be defined as a percentage so that
|
|
it makes it responsive for smaller screens.
|
|
- [2] : The value of $carousel-content-padding only applies to images inside the carousel.
|
|
- [3] : The distances from the top are used for positioning the elements. The height of the
|
|
desccription should normally be the height of the container minus the top distance of
|
|
the description. Control distance should be about 90% of the container's height.
|
|
*/
|
|
.carousel {
|
|
position: relative;
|
|
width: 80%;
|
|
height: 500px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
margin: auto;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px; }
|
|
.carousel input[type="radio"] {
|
|
display: none; }
|
|
.carousel input[type="radio"] + div {
|
|
display: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
padding: 10px;
|
|
background-color: #e7e7e7; }
|
|
.carousel input[type="radio"] + div > img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
margin: auto; }
|
|
.carousel input[type="radio"] + div > div {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 160px;
|
|
overflow: auto;
|
|
left: 0;
|
|
top: 360px;
|
|
background-color: #333;
|
|
color: #fff;
|
|
opacity: 0.1; }
|
|
.carousel input[type="radio"] + div > div:hover, .carousel input[type="radio"] + div > div:active, .carousel input[type="radio"] + div > div:focus {
|
|
opacity: 0.8; }
|
|
.carousel input[type="radio"] + div + label {
|
|
position: relative;
|
|
z-index: 998;
|
|
cursor: pointer;
|
|
top: 450px;
|
|
color: #fff;
|
|
font-size: 1.8em; }
|
|
.carousel input[type="radio"] + div + label:before {
|
|
content: '\25cb'; }
|
|
.carousel input[type="radio"]:checked + div {
|
|
display: block; }
|
|
.carousel input[type="radio"]:checked + div + label:before {
|
|
content: '\25cf'; }
|
|
|
|
/*
|
|
Mixin for breadcrumbs style.
|
|
Parameters:
|
|
- $breadcrumbs-name : The class name for the breadcrumbs style.
|
|
- $breadcrumbs-style : The style of the breadcrumbs separator character. [1][2][3]
|
|
Notes:
|
|
- [1] : $breadcrumbs-style accepts the values 1, 2 or 3. If an invalid value is
|
|
supplied, it will be treated as 3.
|
|
- [2] : The three provided styles are as follows:
|
|
- $breadcrumbs-style == 1 : forward slash.
|
|
- $breadcrumbs-style == 2 : greater than symbol.
|
|
- $breadcrumbs-style == 3 : right angle symbol (default).
|
|
- [3] : The value of $breadcrumbs-style can be omitted and will default to 3.
|
|
*/
|
|
/*
|
|
Mixin for generic container style.
|
|
Parameters:
|
|
- $container-name : The class name for the generic container.
|
|
- $container-color : The text color of the generic container.
|
|
- $container-bg-color : The background color of the generic container.
|
|
- $container-border : The border style of the generic container.
|
|
- $container-border-radius : The border-radius of the generic container.
|
|
- $container-padding : The content badding of the generic container.
|
|
Notes:
|
|
- [1] : This mixin is also used for making alerts and panels.
|
|
*/
|
|
/*
|
|
Mixin for generic alert style.
|
|
Parameters:
|
|
- $alert-name : The class name for the alert.
|
|
- $alert-color : The text color of the alert.
|
|
- $alert-bg-color : The background color of the alert.
|
|
- $alert-border : The border style of the alert.
|
|
- $alert-border-radius : The border-radius of the alert.
|
|
- $alert-padding : The content badding of the alert.
|
|
- $close-name : The class name for the close utility. [1]
|
|
Notes:
|
|
- [1] : The value of $close-name must match that of the class specified
|
|
for close elements for the alert to work correctly.
|
|
- [2] : This mixin uses `make-generic-container` to partially generate its
|
|
CSS.
|
|
*/
|
|
/*
|
|
Mixin for generic panel style.
|
|
Parameters:
|
|
- $panel-name : The class name for the panel.
|
|
- $panel-color : The text color of the panel.
|
|
- $panel-bg-color : The background color of the panel.
|
|
- $panel-border : The border style of the panel.
|
|
- $panel-border-radius : The border-radius of the panel.
|
|
- $panel-padding : The content badding of the panel.
|
|
- $panel-header-name : The class name for the panel's header.
|
|
- $panel-header-color : The text color of the panel's header.
|
|
- $panel-header-bg-color : The background color of the panel's header.
|
|
- $panel-header-padding : The padding of the panel's header.
|
|
Notes:
|
|
- [1] : This mixin uses `make-generic-container` to partially generate its
|
|
CSS.
|
|
*/
|
|
/*
|
|
Mixin for generic popover style.
|
|
Parameters:
|
|
- $popover-name : The name for the popover style
|
|
- $popover-direction : The direction of the popover. [1]
|
|
- $popover-border-radius : The border radius for the popover style.
|
|
- $popover-distance : The distance for the popover style's placement. [2]
|
|
- $popover-color : The text color of the popover style.
|
|
- $popover-bg-color : The background color of the popover style.
|
|
- $popover-padding : The padding of the popover.
|
|
Notes:
|
|
- [1] : The values that $popover-direction accepts are 'top' and 'bottom'. If an invalid value
|
|
is provided, it will be treated as 'bottom'.
|
|
- [2] : The value of $popover-distance should be treated as a general guideline for the popover
|
|
distance and is supposed to be tweaked with inline styles or helper classes for better use.
|
|
*/
|
|
/*
|
|
Mixin for generic button states.
|
|
Parameters:
|
|
- $button-states-name : The class name of the stateful button.
|
|
Notes:
|
|
- [1] : This mixin is experimental, it might be buggy.
|
|
*/
|
|
/*
|
|
Mixin for generic button groups.
|
|
Parameters:
|
|
- $btn-group-name : The class name of the button group.
|
|
- $btn-name : The name of the button class. [1][2]
|
|
- $btn-group-border : The border style of the button group.
|
|
- $btn-group-border-radius : The border radius at the edges of the button group.
|
|
Notes:
|
|
- [1] : The value of $btn-name must match that of the generic button class.
|
|
- [2] : The value of $btn-name can be hacked to allow for button variants to be styled
|
|
in custom manners (e.g. if you button class is `btn` and your button variant's class
|
|
is `blue`, you can style it, using `btn +'.blue'`).
|
|
- [3] : This mixin is experimental, although it is marked stable for most cases.
|
|
- [4] : The results of this mixin are purely stylistic and do not provide any grouping
|
|
functionality.
|
|
*/
|
|
.breadcrumb {
|
|
list-style: none; }
|
|
.breadcrumb > li {
|
|
display: inline-block; }
|
|
.breadcrumb > li + li:before {
|
|
content: '\002f\00a0'; }
|
|
|
|
.well {
|
|
border: 1px solid #e3e3e3;
|
|
border-radius: 4px;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
padding: 19px; }
|
|
|
|
.alert-success + div {
|
|
border: 1px solid #449d44;
|
|
border-radius: 4px;
|
|
background-color: #80c780;
|
|
color: #357935;
|
|
padding: 15px; }
|
|
|
|
input[type="checkbox"].alert-success {
|
|
display: none; }
|
|
input[type="checkbox"].alert-success + div {
|
|
display: none;
|
|
position: relative; }
|
|
input[type="checkbox"].alert-success + div a {
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
color: #255625; }
|
|
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-success + div .close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
color: #357935; }
|
|
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-success + div {
|
|
display: block; }
|
|
|
|
.alert-info + div {
|
|
border: 1px solid #31b0d5;
|
|
border-radius: 4px;
|
|
background-color: #80c780;
|
|
color: #2390b0;
|
|
padding: 15px; }
|
|
|
|
input[type="checkbox"].alert-info {
|
|
display: none; }
|
|
input[type="checkbox"].alert-info + div {
|
|
display: none;
|
|
position: relative; }
|
|
input[type="checkbox"].alert-info + div a {
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
color: #1b6d85; }
|
|
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-info + div .close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
color: #2390b0; }
|
|
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-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 #ddd;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
color: #333;
|
|
padding: 0; }
|
|
|
|
.panel > * {
|
|
padding: 15px; }
|
|
.panel .head {
|
|
border: 0;
|
|
border-bottom: 1px solid #ddd;
|
|
color: #333;
|
|
background-color: #e7e7e7;
|
|
padding: 15px;
|
|
margin: 0; }
|
|
|
|
input[type="checkbox"].popover-top {
|
|
display: none; }
|
|
input[type="checkbox"].popover-top + label {
|
|
position: relative; }
|
|
input[type="checkbox"].popover-top + label > .popover-top {
|
|
position: absolute;
|
|
display: none;
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-radius: 5px;
|
|
padding: 7px 10px;
|
|
z-index: 998;
|
|
width: auto;
|
|
bottom: 49px; }
|
|
input[type="checkbox"].popover-top + label > .popover-top:before {
|
|
position: absolute;
|
|
display: block;
|
|
border-top: 7px solid #333;
|
|
border-right: 7px solid transparent;
|
|
border-left: 7px solid transparent;
|
|
bottom: -7px;
|
|
content: '';
|
|
left: 50%;
|
|
margin-left: -7px; }
|
|
input[type="checkbox"]:checked.popover-top + label > .popover-top {
|
|
display: block; }
|
|
|
|
input[type="checkbox"].popover-bottom {
|
|
display: none; }
|
|
input[type="checkbox"].popover-bottom + label {
|
|
position: relative; }
|
|
input[type="checkbox"].popover-bottom + label > .popover-bottom {
|
|
position: absolute;
|
|
display: none;
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
padding: 7px 10px;
|
|
z-index: 998;
|
|
width: auto;
|
|
top: 49px; }
|
|
input[type="checkbox"].popover-bottom + label > .popover-bottom:before {
|
|
position: absolute;
|
|
display: block;
|
|
border-bottom: 7px solid #333;
|
|
border-right: 7px solid transparent;
|
|
border-left: 7px solid transparent;
|
|
top: -7px;
|
|
content: '';
|
|
left: 50%;
|
|
margin-left: -7px; }
|
|
input[type="checkbox"]:checked.popover-bottom + label > .popover-bottom {
|
|
display: block; }
|