1051 lines
30 KiB
CSS
1051 lines
30 KiB
CSS
/*
|
|
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: #222;
|
|
background-color: #f5f5f5; }
|
|
|
|
/*
|
|
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: #555555;
|
|
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 #cfcfcf; }
|
|
|
|
/*
|
|
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: gainsboro; }
|
|
|
|
kbd {
|
|
color: #fefefe;
|
|
background-color: #222; }
|
|
|
|
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: #2678b3; }
|
|
a:active, a:hover {
|
|
outline-width: 0;
|
|
color: #3793d5; }
|
|
a:visited {
|
|
color: #1d5c89; }
|
|
a:visited:active, a:visited:hover {
|
|
color: #2678b3; }
|
|
|
|
/*
|
|
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: #ffff33;
|
|
color: #222; }
|
|
|
|
/*
|
|
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 #cfcfcf;
|
|
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: #2a2a2a;
|
|
background: #eaeaea;
|
|
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: #d7d7d7; }
|
|
.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: #eeeeee;
|
|
background: #337ab7; }
|
|
.btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus {
|
|
background: #2b6699; }
|
|
|
|
.btn.green, a.btn.green, a.btn.green:visited {
|
|
color: #eeeeee;
|
|
background: #5cb85c; }
|
|
.btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus {
|
|
background: #48a648; }
|
|
|
|
.btn.red, a.btn.red, a.btn.red:visited {
|
|
color: #eeeeee;
|
|
background: #d9534f; }
|
|
.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: #d23430; }
|
|
|
|
.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 #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: none; }
|
|
.frm input:not([type]) {
|
|
box-sizing: border-box;
|
|
border: 1px solid #ccc;
|
|
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: #2678b3; }
|
|
.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: #e9322d; }
|
|
.frm input[readonly], .frm select[readonly], .frm textarea[readonly] {
|
|
background-color: gainsboro;
|
|
border-color: #b5b5b5; }
|
|
.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 #777; }
|
|
.tbl td, .tbl th {
|
|
overflow: visible;
|
|
border-left: 1px solid #777;
|
|
border-bottom: none;
|
|
margin: 0;
|
|
padding: 0.5em; }
|
|
.tbl thead {
|
|
background-color: #4e4e4e;
|
|
color: #f5f5f5;
|
|
text-align: left; }
|
|
.tbl tbody {
|
|
background-color: #ddd;
|
|
color: #111; }
|
|
.tbl tbody tr:nth-child(2n-1) {
|
|
background-color: #f4f4f4; }
|
|
.tbl.hor td, .tbl.hor th {
|
|
border-left: none;
|
|
border-bottom: 1px solid #777; }
|
|
.tbl.bor td, .tbl.bor th {
|
|
border-bottom: 1px solid #777; }
|
|
|
|
/*
|
|
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 #ccc;
|
|
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: #337ab7 !important; }
|
|
|
|
.txt-green {
|
|
color: #5cb85c !important; }
|
|
|
|
.txt-red {
|
|
color: #d9534f !important; }
|
|
|
|
.bg-blue {
|
|
background-color: #337ab7 !important; }
|
|
|
|
.bg-green {
|
|
background-color: #5cb85c !important; }
|
|
|
|
.bg-red {
|
|
background-color: #d9534f !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 #222; }
|
|
|
|
.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 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: #222; }
|
|
.nav .logo {
|
|
font-size: 135%;
|
|
color: #fff; }
|
|
.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: 10px;
|
|
color: #fff;
|
|
margin: 0; }
|
|
.nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
|
|
color: #fff;
|
|
background: #353535; }
|
|
.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: 10px 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: 10px;
|
|
color: #fff;
|
|
background-color: #222;
|
|
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: #353535; }
|
|
|
|
@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: 10px 0; }
|
|
input[type="checkbox"]:checked + .nav.fixed + label:before {
|
|
content: '\00d7'; } }
|