1812 lines
59 KiB
CSS
1812 lines
59 KiB
CSS
/*
|
|
Flavor name: NiteOwl (mini-niteowl)
|
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
|
mini.css version: v1.0 (September, 2016)
|
|
*/
|
|
/*
|
|
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, sans-serif;
|
|
font-size: 1em;
|
|
line-height: 1.5;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%; }
|
|
|
|
body {
|
|
margin: 0;
|
|
color: #f5f5f5;
|
|
background-color: #151f29; }
|
|
|
|
/*
|
|
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.2;
|
|
margin: 0.7em 0;
|
|
font-weight: 500; }
|
|
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
|
color: #b5b5b5;
|
|
font-weight: 200; }
|
|
|
|
h1 {
|
|
font-size: 2em; }
|
|
|
|
h2 {
|
|
font-size: 1.5em; }
|
|
|
|
h3 {
|
|
font-size: 1.15em; }
|
|
|
|
h4 {
|
|
font-size: 1em; }
|
|
|
|
h5 {
|
|
font-size: 0.8em; }
|
|
|
|
h6 {
|
|
font-size: 0.7em; }
|
|
|
|
/*
|
|
Correct box-sizing in Firefox.
|
|
Style for horizontal rule.
|
|
*/
|
|
hr {
|
|
box-sizing: content-box;
|
|
line-height: 1.2;
|
|
margin: 0.7em 0;
|
|
height: 0;
|
|
border: 0;
|
|
border-top: 1px solid #304251; }
|
|
|
|
/*
|
|
Style for all small text and size for sub and sup.
|
|
*/
|
|
small, sub, sup {
|
|
font-size: 75%; }
|
|
|
|
/*
|
|
Style for paragraph and preformatted elements.
|
|
*/
|
|
p, pre {
|
|
margin: 0 0 0.6em; }
|
|
|
|
/*
|
|
Style for lists.
|
|
*/
|
|
ul, ol {
|
|
margin-top: 0;
|
|
margin-bottom: 0.6em; }
|
|
ul ul, ul ol, ol ul, ol ol {
|
|
margin-bottom: 0; }
|
|
|
|
/*
|
|
Styles for code and preformatted.
|
|
*/
|
|
samp, kbd, code, pre {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em; }
|
|
|
|
kbd, code, pre {
|
|
padding: 2px 4px;
|
|
border-radius: 4px; }
|
|
|
|
code, pre {
|
|
background-color: #040607; }
|
|
|
|
kbd {
|
|
color: #1b2835;
|
|
background-color: #f5f5f5; }
|
|
|
|
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: #6493cd; }
|
|
a:active, a:hover {
|
|
outline-width: 0;
|
|
color: #8baed9; }
|
|
a:visited {
|
|
color: #3e78c0; }
|
|
a:visited:active, a:visited:hover {
|
|
color: #6493cd; }
|
|
|
|
/*
|
|
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: #e44b23;
|
|
color: #f5f5f5; }
|
|
|
|
/*
|
|
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, sans-serif;
|
|
font-size: 100%;
|
|
line-height: 1.2;
|
|
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: 1px solid #304251;
|
|
border-radius: 4px;
|
|
margin: 0 2px;
|
|
padding: 0.35em 0.65em 0.75em; }
|
|
|
|
/*
|
|
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: 2px 0;
|
|
padding: 6px 12px;
|
|
color: #f5f5f5;
|
|
background: #454545;
|
|
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: #585858; }
|
|
.btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] {
|
|
cursor: not-allowed;
|
|
opacity: 0.65; }
|
|
|
|
.btn.blue, a.btn.blue, a.btn.blue:visited {
|
|
color: #f5f5f5;
|
|
background: #364952; }
|
|
.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: #455e69; }
|
|
|
|
.btn.green, a.btn.green, a.btn.green:visited {
|
|
color: #f5f5f5;
|
|
background: #409f45; }
|
|
.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: #398d3d; }
|
|
|
|
.btn.red, a.btn.red, a.btn.red:visited {
|
|
color: #f5f5f5;
|
|
background: #e72a2a; }
|
|
.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: #d31818; }
|
|
|
|
.btn.lg {
|
|
padding: 9px 15px;
|
|
font-size: 135%; }
|
|
|
|
.btn.sm {
|
|
padding: 4px 8px;
|
|
font-size: 80%; }
|
|
|
|
/*
|
|
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.
|
|
*/
|
|
.grid-container {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
width: 100%; }
|
|
.grid-container * {
|
|
box-sizing: border-box; }
|
|
|
|
.row:before, .row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both; }
|
|
|
|
.col {
|
|
float: left;
|
|
padding: 12px; }
|
|
|
|
.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-no,
|
|
.md-no,
|
|
.lg-no {
|
|
display: block; }
|
|
|
|
.xs-no {
|
|
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-no,
|
|
.md-no,
|
|
.lg-no {
|
|
display: block; }
|
|
|
|
.sm-no {
|
|
display: none; } }
|
|
@media (min-width: 1024px) {
|
|
.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-no,
|
|
.sm-no,
|
|
.lg-no {
|
|
display: block; }
|
|
|
|
.md-no {
|
|
display: none; } }
|
|
@media (min-width: 1280px) {
|
|
.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-no,
|
|
.sm-no,
|
|
.md-no {
|
|
display: block; }
|
|
|
|
.lg-no {
|
|
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.
|
|
*/
|
|
.frm input[type="color"], .frm input[type^="date"], .frm input[type$="time"], .frm input[type="email"],
|
|
.frm input[type="month"], .frm input[type="week"], .frm input[type="text"], .frm input[type="password"],
|
|
.frm input[type="url"], .frm input[type="number"], .frm input[type="search"], .frm input[type="tel"],
|
|
.frm select, .frm textarea {
|
|
box-sizing: border-box;
|
|
border: 1px solid #304251;
|
|
border-radius: 4px;
|
|
box-shadow: none; }
|
|
.frm input:not([type]) {
|
|
box-sizing: border-box;
|
|
border: 1px solid #304251;
|
|
border-radius: 4px;
|
|
box-shadow: none; }
|
|
.frm input, .frm select, .frm textarea {
|
|
display: block;
|
|
margin: 0.2em;
|
|
padding: 0.3em; }
|
|
.frm input:focus, .frm select:focus, .frm textarea:focus {
|
|
border-color: #f1e05a; }
|
|
.frm input[disabled], .frm select[disabled], .frm textarea[disabled] {
|
|
cursor: not-allowed;
|
|
opacity: 0.65; }
|
|
.frm input:invalid, .frm input:focus:invalid, .frm input:focus:invalid:focus, .frm select:invalid, .frm select:focus:invalid, .frm select:focus:invalid:focus, .frm textarea:invalid, .frm textarea:focus:invalid, .frm textarea:focus:invalid:focus {
|
|
border-color: #e44b23; }
|
|
.frm input[readonly], .frm select[readonly], .frm textarea[readonly] {
|
|
background-color: #040607;
|
|
border-color: black; }
|
|
.frm input[type="checkbox"], .frm input[type="radio"] {
|
|
display: inline-block; }
|
|
.frm select {
|
|
height: 1.9em; }
|
|
.frm select[multiple] {
|
|
height: auto; }
|
|
.frm label {
|
|
margin: 0.5em 0 0 0.2em; }
|
|
.frm.inline input, .frm.inline select, .frm.inline textarea, .frm.inline label, .frm.aligned input, .frm.aligned select, .frm.aligned textarea, .frm.aligned label {
|
|
display: inline-block; }
|
|
.frm.inline .ctrl-group {
|
|
display: inline-block; }
|
|
.frm.aligned .ctrl-group label {
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
width: 15em;
|
|
margin-top: 0; }
|
|
.frm .ctrl-group {
|
|
margin: 0 0 0.3em 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.
|
|
*/
|
|
.tbl {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
empty-cells: show;
|
|
border: 1px solid #304251; }
|
|
.tbl td, .tbl th {
|
|
overflow: visible;
|
|
border-left: 1px solid #304251;
|
|
border-bottom: none;
|
|
margin: 0;
|
|
padding: 0.5em; }
|
|
.tbl thead {
|
|
background-color: #3b5773;
|
|
color: #f5f5f5;
|
|
text-align: left; }
|
|
.tbl tbody {
|
|
background-color: #1e2c3a;
|
|
color: #e1e1e1; }
|
|
.tbl tbody tr:nth-child(2n-1) {
|
|
background-color: #26384b; }
|
|
.tbl.hor td, .tbl.hor th {
|
|
border-left: none;
|
|
border-bottom: 1px solid #304251; }
|
|
.tbl.bor td, .tbl.bor th {
|
|
border-bottom: 1px solid #304251; }
|
|
|
|
/*
|
|
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.
|
|
*/
|
|
.nav {
|
|
box-sizing: border-box;
|
|
background-color: #243447; }
|
|
.nav .logo {
|
|
font-size: 135%;
|
|
color: #f5f5f5; }
|
|
.nav ul {
|
|
display: inline-block;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0; }
|
|
.nav ul li {
|
|
display: inline-block;
|
|
margin: 0;
|
|
white-space: nowrap; }
|
|
.nav ul li > * {
|
|
display: inline-block;
|
|
padding: 8px;
|
|
color: #f5f5f5;
|
|
margin: 0; }
|
|
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
|
color: #f5f5f5;
|
|
background: #17212e; }
|
|
.nav ul li .link.disabled, .nav ul li .link[disabled] {
|
|
cursor: not-allowed;
|
|
opacity: 0.65; }
|
|
.nav.vertical ul {
|
|
display: block; }
|
|
.nav.vertical ul li {
|
|
display: block; }
|
|
.nav.vertical ul li > * {
|
|
width: 100%;
|
|
padding: 8px 0; }
|
|
.nav.fixed {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
width: 100%; }
|
|
.nav.fixed.vertical {
|
|
height: 100%;
|
|
width: 16.66667%; }
|
|
.nav.fixed.vertical ul {
|
|
width: 100%; }
|
|
.nav.fixed.vertical ul li {
|
|
display: block; }
|
|
.nav + label {
|
|
display: none;
|
|
font-weight: 700;
|
|
margin: 10px;
|
|
font-size: 1.75em;
|
|
padding: 8px;
|
|
color: #f5f5f5;
|
|
background-color: #243447;
|
|
width: auto;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
right: 0; }
|
|
.nav + label:before {
|
|
position: relative;
|
|
content: '\2630'; }
|
|
.nav + label:hover, .nav + label:active, .nav + label:focus {
|
|
background: #17212e; }
|
|
|
|
@media (max-width: 768px) {
|
|
.nav {
|
|
overflow: auto; }
|
|
.nav.fixed {
|
|
display: none; }
|
|
.nav.fixed + label {
|
|
display: block; }
|
|
|
|
input[type="checkbox"]:checked + .nav.fixed {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%; }
|
|
input[type="checkbox"]:checked + .nav.fixed ul {
|
|
display: block; }
|
|
input[type="checkbox"]:checked + .nav.fixed ul li {
|
|
display: block; }
|
|
input[type="checkbox"]:checked + .nav.fixed ul li * {
|
|
width: 100%;
|
|
padding: 8px 0; }
|
|
input[type="checkbox"]:checked + .nav.fixed + label:before {
|
|
content: '\00d7'; } }
|
|
/*
|
|
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.
|
|
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.
|
|
*/
|
|
img.thumb {
|
|
padding: 0.25em;
|
|
border: 1px solid #304251;
|
|
border-radius: 4px; }
|
|
|
|
.bordered {
|
|
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
|
|
|
.rounded {
|
|
border-radius: 4px !important; }
|
|
|
|
.circle {
|
|
border-radius: 50% !important; }
|
|
|
|
.txt-blue {
|
|
color: #364952 !important; }
|
|
|
|
.txt-green {
|
|
color: #409f45 !important; }
|
|
|
|
.txt-red {
|
|
color: #e72a2a !important; }
|
|
|
|
.bg-blue {
|
|
background-color: #364952 !important; }
|
|
|
|
.bg-green {
|
|
background-color: #409f45 !important; }
|
|
|
|
.bg-red {
|
|
background-color: #e72a2a !important; }
|
|
|
|
.caret {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 0.35em solid transparent;
|
|
border-right: 0.35em solid transparent;
|
|
border-top: 0.35em solid #aaa; }
|
|
|
|
.close {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
color: #aaa;
|
|
font-size: 1.3em;
|
|
font-weight: 700;
|
|
cursor: pointer; }
|
|
.close:before {
|
|
content: '\00d7'; }
|
|
.close:hover {
|
|
color: #777; }
|
|
|
|
.drg-left {
|
|
float: left !important; }
|
|
|
|
.drg-right {
|
|
float: right !important; }
|
|
|
|
.ct-block {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto; }
|
|
|
|
.cf:before, .cf: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.
|
|
*/
|
|
.lbl {
|
|
display: inline-block;
|
|
padding: 6px 10px;
|
|
color: #f5f5f5;
|
|
background-color: #525252;
|
|
border-radius: 4px; }
|
|
.lbl:empty {
|
|
display: none; }
|
|
|
|
.lbl.blue {
|
|
color: #f5f5f5;
|
|
background: #364952; }
|
|
|
|
.lbl.green {
|
|
color: #f5f5f5;
|
|
background: #409f45; }
|
|
|
|
.lbl.red {
|
|
color: #f5f5f5;
|
|
background: #e72a2a; }
|
|
|
|
.bdg {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
color: #f5f5f5;
|
|
background-color: #525252;
|
|
border-radius: 8px; }
|
|
.bdg:empty {
|
|
display: none; }
|
|
|
|
.bdg.blue {
|
|
color: #f5f5f5;
|
|
background: #364952; }
|
|
|
|
.bdg.green {
|
|
color: #f5f5f5;
|
|
background: #409f45; }
|
|
|
|
.bdg.red {
|
|
color: #f5f5f5;
|
|
background: #e72a2a; }
|
|
|
|
/*
|
|
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`.
|
|
*/
|
|
.tabs {
|
|
position: relative;
|
|
min-height: 250px;
|
|
width: 100%; }
|
|
.tabs input[type="radio"] {
|
|
display: none; }
|
|
.tabs input[type="radio"] + div {
|
|
display: inline; }
|
|
.tabs input[type="radio"] + div > label {
|
|
position: reative;
|
|
float: left;
|
|
margin-right: 3px;
|
|
left: 1px;
|
|
height: 40px;
|
|
padding: 8px 14px;
|
|
color: #6493cd;
|
|
background-color: #151f29;
|
|
border: 1px solid #304251;
|
|
border-radius: 4px 4px 0 0;
|
|
cursor: pointer; }
|
|
.tabs input[type="radio"] + div > label:hover, .tabs input[type="radio"] + div > label:active, .tabs input[type="radio"] + div > label:focus {
|
|
background: #040607; }
|
|
.tabs input[type="radio"] + div > label + div {
|
|
position: absolute;
|
|
z-index: -2;
|
|
left: 0;
|
|
top: 39px;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 20px;
|
|
background: #1e2c3a;
|
|
border: 1px solid #304251; }
|
|
.tabs input[type="radio"]:checked + div > label {
|
|
color: #f5f5f5;
|
|
background: #1e2c3a;
|
|
border-top: 3px solid #6493cd;
|
|
border-bottom: 1px solid #1e2c3a; }
|
|
.tabs input[type="radio"]:checked + div > label + div {
|
|
position: absolute;
|
|
z-index: -1; }
|
|
|
|
/*
|
|
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: 45%;
|
|
color: #f5f5f5;
|
|
background-color: #151f29;
|
|
margin: 8.5% auto 0;
|
|
padding: 18px;
|
|
border: 1px solid #304251;
|
|
border-radius: 4px;
|
|
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.
|
|
*/
|
|
.nav .link.dropdown {
|
|
cursor: pointer; }
|
|
.nav input[type="checkbox"], .nav input[type="radio"] {
|
|
display: none; }
|
|
.nav input[type="checkbox"].dropdown + div, .nav input[type="radio"].dropdown + div {
|
|
display: none; }
|
|
.nav input[type="checkbox"]:checked.dropdown + div, .nav input[type="radio"]:checked.dropdown + div {
|
|
display: block;
|
|
font-size: 0.8em;
|
|
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"].clps {
|
|
display: none; }
|
|
input[type="checkbox"].clps + div {
|
|
display: none;
|
|
color: #f5f5f5;
|
|
background-color: #26384b;
|
|
padding: 10px;
|
|
margin-top: 5px;
|
|
border: 1px solid #304251;
|
|
border-radius: 4px; }
|
|
input[type="checkbox"]:checked.clps + div {
|
|
display: block; }
|
|
|
|
input[type="radio"].acrd {
|
|
display: none; }
|
|
input[type="radio"].acrd + label {
|
|
width: 100%;
|
|
display: block;
|
|
color: #f5f5f5;
|
|
background-color: #26384b;
|
|
padding: 8px;
|
|
margin-bottom: 5px;
|
|
border: 1px solid #304251;
|
|
border-radius: 4px;
|
|
cursor: pointer; }
|
|
input[type="radio"].acrd + label:hover, input[type="radio"].acrd + label:active, input[type="radio"].acrd + label:focus {
|
|
background: #192531; }
|
|
input[type="radio"].acrd + label + div {
|
|
display: none;
|
|
color: #f5f5f5;
|
|
background-color: #151f29;
|
|
padding: 10px;
|
|
margin-top: -1px;
|
|
margin-bottom: 5px;
|
|
border: 1px solid #304251;
|
|
border-radius: 0 0 4px 4px; }
|
|
input[type="radio"]:checked.acrd + label {
|
|
border-radius: 4px 4px 0 0;
|
|
margin-bottom: 0; }
|
|
input[type="radio"]:checked.acrd + 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`.
|
|
*/
|
|
.prg {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 20px;
|
|
background-color: #d7d7d7;
|
|
border-radius: 4px; }
|
|
.prg > span {
|
|
float: left;
|
|
width: 0;
|
|
height: 100%;
|
|
background-color: #364952;
|
|
text-align: center;
|
|
font-size: 0.8em;
|
|
color: #f5f5f5; }
|
|
|
|
.prg > span.green {
|
|
background-color: #409f45;
|
|
color: #f5f5f5; }
|
|
|
|
.prg > span.red {
|
|
background-color: #e72a2a;
|
|
color: #f5f5f5; }
|
|
|
|
/*
|
|
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 #304251;
|
|
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: #e5ebf1; }
|
|
.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: 340px;
|
|
background-color: #151f29;
|
|
color: #f5f5f5;
|
|
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: #f5f5f5;
|
|
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.
|
|
*/
|
|
.brdcrmb {
|
|
list-style: none; }
|
|
.brdcrmb > li {
|
|
display: inline-block; }
|
|
.brdcrmb > li + li:before {
|
|
content: '\27e9\00a0'; }
|
|
|
|
.well {
|
|
border: 1px solid #304251;
|
|
border-radius: 4px;
|
|
background-color: #26384b;
|
|
color: #f5f5f5;
|
|
padding: 20px; }
|
|
|
|
.alert-blue + div {
|
|
border: 1px solid #222e33;
|
|
border-radius: 4px;
|
|
background-color: #4a6471;
|
|
color: #0e1215;
|
|
padding: 20px; }
|
|
|
|
input[type="checkbox"].alert-blue {
|
|
display: none; }
|
|
input[type="checkbox"].alert-blue + div {
|
|
display: none;
|
|
position: relative; }
|
|
input[type="checkbox"].alert-blue + div a {
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
color: black; }
|
|
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: #0e1215; }
|
|
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: black; }
|
|
|
|
input[type="checkbox"]:checked.alert-blue + div {
|
|
display: block; }
|
|
|
|
.alert-green + div {
|
|
border: 1px solid #317b35;
|
|
border-radius: 4px;
|
|
background-color: #57bb5c;
|
|
color: #235625;
|
|
padding: 20px; }
|
|
|
|
input[type="checkbox"].alert-green {
|
|
display: none; }
|
|
input[type="checkbox"].alert-green + div {
|
|
display: none;
|
|
position: relative; }
|
|
input[type="checkbox"].alert-green + div a {
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
color: #143216; }
|
|
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: #235625; }
|
|
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: #143216; }
|
|
|
|
input[type="checkbox"]:checked.alert-green + div {
|
|
display: block; }
|
|
|
|
.alert-red + div {
|
|
border: 1px solid #c81616;
|
|
border-radius: 4px;
|
|
background-color: #ec5858;
|
|
color: #9a1111;
|
|
padding: 20px; }
|
|
|
|
input[type="checkbox"].alert-red {
|
|
display: none; }
|
|
input[type="checkbox"].alert-red + div {
|
|
display: none;
|
|
position: relative; }
|
|
input[type="checkbox"].alert-red + div a {
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
color: #6c0c0c; }
|
|
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: #9a1111; }
|
|
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: #6c0c0c; }
|
|
|
|
input[type="checkbox"]:checked.alert-red + div {
|
|
display: block; }
|
|
|
|
.panel {
|
|
border: 1px solid #304251;
|
|
border-radius: 4px;
|
|
background-color: #151f29;
|
|
color: #f5f5f5;
|
|
padding: 0; }
|
|
|
|
.panel > * {
|
|
padding: 10px; }
|
|
.panel .head {
|
|
border-top: 0;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid #304251;
|
|
color: #f5f5f5;
|
|
background-color: #26384b;
|
|
padding: 10px;
|
|
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: #f5f5f5;
|
|
color: #151f29;
|
|
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 #f5f5f5;
|
|
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: #f5f5f5;
|
|
color: #151f29;
|
|
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 #f5f5f5;
|
|
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; }
|
|
|
|
.btn-grp .btn {
|
|
border: 1px solid #304251;
|
|
margin: 0; }
|
|
.btn-grp .btn:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
border-right: 0; }
|
|
.btn-grp .btn:first-child {
|
|
border-radius: 4px 0 0 4px;
|
|
border-right: 0; }
|
|
.btn-grp .btn:last-child {
|
|
border-radius: 0 4px 4px 0; }
|
|
|
|
.btn-grp .btn.blue {
|
|
border: 1px solid #222e33;
|
|
margin: 0; }
|
|
.btn-grp .btn.blue:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
border-right: 0; }
|
|
.btn-grp .btn.blue:first-child {
|
|
border-radius: 4px 0 0 4px;
|
|
border-right: 0; }
|
|
.btn-grp .btn.blue:last-child {
|
|
border-radius: 0 4px 4px 0; }
|
|
|
|
.btn-grp .btn.green {
|
|
border: 1px solid #317b35;
|
|
margin: 0; }
|
|
.btn-grp .btn.green:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
border-right: 0; }
|
|
.btn-grp .btn.green:first-child {
|
|
border-radius: 4px 0 0 4px;
|
|
border-right: 0; }
|
|
.btn-grp .btn.green:last-child {
|
|
border-radius: 0 4px 4px 0; }
|
|
|
|
.btn-grp .btn.red {
|
|
border: 1px solid 1px solid #c81616;
|
|
margin: 0; }
|
|
.btn-grp .btn.red:not(:first-child):not(:last-child) {
|
|
border-radius: 0;
|
|
border-right: 0; }
|
|
.btn-grp .btn.red:first-child {
|
|
border-radius: 4px 0 0 4px;
|
|
border-right: 0; }
|
|
.btn-grp .btn.red:last-child {
|
|
border-radius: 0 4px 4px 0; }
|