Compare commits
No commits in common. "cde958a5a7267ea3ea0e61fc8e84ebe3268b23f3" and "b37dccb182fba09fc8f1414b32148b62ea4a4624" have entirely different histories.
cde958a5a7
...
b37dccb182
|
@ -1,36 +0,0 @@
|
|||
/*
|
||||
Accordion
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Parent container */
|
||||
.accordion {
|
||||
margin-bottom: var(--base-line-height);
|
||||
}
|
||||
|
||||
/* Group == heading + body */
|
||||
.accordion-group {
|
||||
margin-bottom: 2px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
.accordion-heading {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion-heading .accordion-toggle {
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
/* General toggle styles */
|
||||
.accordion-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Inner needs the styles because you can't animate properly with any styles on the element */
|
||||
.accordion-inner {
|
||||
padding: 9px 15px;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
|
@ -1,80 +0,0 @@
|
|||
/*
|
||||
Alerts
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Base styles */
|
||||
.alert {
|
||||
padding: 8px 35px 8px 14px;
|
||||
margin-bottom: var(--base-line-height);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
background-color: var(--warning-background);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
.alert,
|
||||
.alert h4 {
|
||||
/* Specified for the h4 to prevent conflicts of changing --headings-color */
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.alert h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Adjust close link position */
|
||||
.alert .close {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
right: -21px;
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
/* Alternate styles */
|
||||
.alert-success {
|
||||
background-color: var(--success-background);
|
||||
border-color: var(--success-border);
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
.alert-success h4 {
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
background-color: var(--error-background);
|
||||
border-color: var(--error-border);
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.alert-danger h4,
|
||||
.alert-error h4 {
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: var(--info-background);
|
||||
border-color: var(--info-border);
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
.alert-info h4 {
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
/* Block alerts */
|
||||
.alert-block {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.alert-block>p,
|
||||
.alert-block>ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.alert-block p+p {
|
||||
margin-top: 5px;
|
||||
}
|
45
css/bootstrap.css
vendored
45
css/bootstrap.css
vendored
|
@ -1,45 +0,0 @@
|
|||
/*
|
||||
MakoCSS v1.0.0
|
||||
|
||||
Copyright 2025 Sharkk, sharkk.net
|
||||
*/
|
||||
|
||||
/*
|
||||
In modern CSS, we don't need the import statements as they would be handled
|
||||
by @import in regular CSS or by bundling tools. However, for reference, here's
|
||||
the order of components that would be included:
|
||||
*/
|
||||
|
||||
@import "variables.css";
|
||||
@import "reset.css";
|
||||
@import "scaffolding.css";
|
||||
@import "grid.css";
|
||||
@import "layouts.css";
|
||||
@import "type.css";
|
||||
@import "code.css";
|
||||
@import "forms.css";
|
||||
@import "tables.css";
|
||||
@import "sprites.css";
|
||||
@import "dropdowns.css";
|
||||
@import "wells.css";
|
||||
@import "component-animations.css";
|
||||
@import "close.css";
|
||||
@import "buttons.css";
|
||||
@import "button-groups.css";
|
||||
@import "alerts.css";
|
||||
@import "navs.css";
|
||||
@import "navbar.css";
|
||||
@import "breadcrumbs.css";
|
||||
@import "pagination.css";
|
||||
@import "pager.css";
|
||||
@import "modals.css";
|
||||
@import "tooltip.css";
|
||||
@import "popovers.css";
|
||||
@import "thumbnails.css";
|
||||
@import "media.css";
|
||||
@import "labels-badges.css";
|
||||
@import "progress-bars.css";
|
||||
@import "accordion.css";
|
||||
@import "carousel.css";
|
||||
@import "hero-unit.css";
|
||||
@import "utilities.css";
|
|
@ -1,26 +0,0 @@
|
|||
/*
|
||||
Breadcrumbs
|
||||
========================================
|
||||
*/
|
||||
|
||||
.breadcrumb {
|
||||
padding: 8px 15px;
|
||||
margin: 0 0 var(--base-line-height);
|
||||
list-style: none;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
.breadcrumb > li {
|
||||
display: inline-block;
|
||||
text-shadow: 0 1px 0 var(--white);
|
||||
}
|
||||
|
||||
.breadcrumb > li > .divider {
|
||||
padding: 0 5px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.breadcrumb > .active {
|
||||
color: var(--gray-light);
|
||||
}
|
|
@ -1,225 +0,0 @@
|
|||
/*
|
||||
Button groups
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Make the div behave like a button */
|
||||
.btn-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
/* remove as part 1 of font-size inline-block hack */
|
||||
vertical-align: middle;
|
||||
/* match .btn alignment given font-size hack above */
|
||||
white-space: nowrap;
|
||||
/* prevent buttons from wrapping when in tight spaces */
|
||||
}
|
||||
|
||||
/* Space out series of button groups */
|
||||
.btn-group+.btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Optional: Group multiple button groups together for a toolbar */
|
||||
.btn-toolbar {
|
||||
font-size: 0;
|
||||
/* Hack to remove whitespace that results from using inline-block */
|
||||
margin-top: calc(var(--base-line-height) / 2);
|
||||
margin-bottom: calc(var(--base-line-height) / 2);
|
||||
}
|
||||
|
||||
.btn-toolbar>.btn+.btn,
|
||||
.btn-toolbar>.btn-group+.btn,
|
||||
.btn-toolbar>.btn+.btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Float them, remove border radius, then re-add to first and last elements */
|
||||
.btn-group>.btn {
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-group>.btn+.btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.btn-group>.btn,
|
||||
.btn-group>.dropdown-menu,
|
||||
.btn-group>.popover {
|
||||
font-size: var(--base-font-size);
|
||||
/* redeclare as part 2 of font-size inline-block hack */
|
||||
}
|
||||
|
||||
/* Reset fonts for other sizes */
|
||||
.btn-group>.btn-mini {
|
||||
font-size: var(--font-size-mini);
|
||||
}
|
||||
|
||||
.btn-group>.btn-small {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.btn-group>.btn-large {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
/* Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match */
|
||||
.btn-group>.btn:first-child {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: var(--base-border-radius);
|
||||
border-bottom-left-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it */
|
||||
.btn-group>.btn:last-child,
|
||||
.btn-group>.dropdown-toggle {
|
||||
border-top-right-radius: var(--base-border-radius);
|
||||
border-bottom-right-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Reset corners for large buttons */
|
||||
.btn-group>.btn.large:first-child {
|
||||
margin-left: 0;
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-bottom-left-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
.btn-group>.btn.large:last-child,
|
||||
.btn-group>.large.dropdown-toggle {
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
border-bottom-right-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
/* On hover/focus/active, bring the proper btn to front */
|
||||
.btn-group>.btn:hover,
|
||||
.btn-group>.btn:focus,
|
||||
.btn-group>.btn:active,
|
||||
.btn-group>.btn.active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* On active and open, don't show outline */
|
||||
.btn-group .dropdown-toggle:active,
|
||||
.btn-group.open .dropdown-toggle {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Split button dropdowns */
|
||||
.btn-group>.btn+.dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .125), inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.btn-group>.btn-mini+.dropdown-toggle {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.btn-group>.btn-large+.dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.btn-group.open .dropdown-toggle {
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
/* Keep the hover's background when dropdown is open */
|
||||
.btn-group.open .btn.dropdown-toggle {
|
||||
background-color: var(--btn-background-highlight);
|
||||
}
|
||||
|
||||
.btn-group.open .btn-primary.dropdown-toggle {
|
||||
background-color: var(--btn-primary-background-highlight);
|
||||
}
|
||||
|
||||
.btn-group.open .btn-warning.dropdown-toggle {
|
||||
background-color: var(--btn-warning-background-highlight);
|
||||
}
|
||||
|
||||
.btn-group.open .btn-danger.dropdown-toggle {
|
||||
background-color: var(--btn-danger-background-highlight);
|
||||
}
|
||||
|
||||
.btn-group.open .btn-success.dropdown-toggle {
|
||||
background-color: var(--btn-success-background-highlight);
|
||||
}
|
||||
|
||||
.btn-group.open .btn-info.dropdown-toggle {
|
||||
background-color: var(--btn-info-background-highlight);
|
||||
}
|
||||
|
||||
.btn-group.open .btn-inverse.dropdown-toggle {
|
||||
background-color: var(--btn-inverse-background-highlight);
|
||||
}
|
||||
|
||||
/* Reposition the caret */
|
||||
.btn .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Carets in other button sizes */
|
||||
.btn-large .caret {
|
||||
margin-top: 6px;
|
||||
border-left-width: 5px;
|
||||
border-right-width: 5px;
|
||||
border-top-width: 5px;
|
||||
}
|
||||
|
||||
.btn-mini .caret,
|
||||
.btn-small .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Upside down carets for .dropup */
|
||||
.dropup .btn-large .caret {
|
||||
border-bottom-width: 5px;
|
||||
}
|
||||
|
||||
/* Account for other colors */
|
||||
.btn-primary .caret,
|
||||
.btn-warning .caret,
|
||||
.btn-danger .caret,
|
||||
.btn-info .caret,
|
||||
.btn-success .caret,
|
||||
.btn-inverse .caret {
|
||||
border-top-color: var(--white);
|
||||
border-bottom-color: var(--white);
|
||||
}
|
||||
|
||||
/* Vertical button groups */
|
||||
.btn-group-vertical {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-group-vertical>.btn {
|
||||
display: block;
|
||||
float: none;
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-group-vertical>.btn+.btn {
|
||||
margin-left: 0;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.btn-group-vertical>.btn:first-child {
|
||||
border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
|
||||
}
|
||||
|
||||
.btn-group-vertical>.btn:last-child {
|
||||
border-radius: 0 0 var(--base-border-radius) var(--base-border-radius);
|
||||
}
|
||||
|
||||
.btn-group-vertical>.btn-large:first-child {
|
||||
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
|
||||
}
|
||||
|
||||
.btn-group-vertical>.btn-large:last-child {
|
||||
border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
|
||||
}
|
208
css/buttons.css
208
css/buttons.css
|
@ -1,208 +0,0 @@
|
|||
/*
|
||||
Buttons
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Core */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
margin-bottom: 0;
|
||||
/* For input.btn */
|
||||
font-size: var(--base-font-size);
|
||||
line-height: var(--base-line-height);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-color: var(--btn-background);
|
||||
background-image: linear-gradient(to bottom, var(--btn-background), var(--btn-background-highlight));
|
||||
border: 1px solid var(--btn-border);
|
||||
border-bottom-color: #b3b3b3;
|
||||
/* darken(--btn-border, 10%) */
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
/* Hover/focus state */
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
color: var(--gray-dark);
|
||||
text-decoration: none;
|
||||
background-position: 0 -15px;
|
||||
transition: background-position 0.1s linear;
|
||||
}
|
||||
|
||||
/* Focus state for keyboard and accessibility */
|
||||
.btn:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Active state */
|
||||
.btn.active,
|
||||
.btn:active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.btn.disabled,
|
||||
.btn[disabled] {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
opacity: 0.65;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Button Sizes */
|
||||
.btn-large {
|
||||
padding: var(--padding-large);
|
||||
font-size: var(--font-size-large);
|
||||
border-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
.btn-large [class^="icon-"],
|
||||
.btn-large [class*=" icon-"] {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Small */
|
||||
.btn-small {
|
||||
padding: var(--padding-small);
|
||||
font-size: var(--font-size-small);
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
.btn-small [class^="icon-"],
|
||||
.btn-small [class*=" icon-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.btn-mini [class^="icon-"],
|
||||
.btn-mini [class*=" icon-"] {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
/* Mini */
|
||||
.btn-mini {
|
||||
padding: var(--padding-mini);
|
||||
font-size: var(--font-size-mini);
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
/* Block button */
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Vertically space out multiple block buttons */
|
||||
.btn-block+.btn-block {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Specificity overrides */
|
||||
input[type="submit"].btn-block,
|
||||
input[type="reset"].btn-block,
|
||||
input[type="button"].btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Alternate buttons */
|
||||
.btn-primary.active,
|
||||
.btn-warning.active,
|
||||
.btn-danger.active,
|
||||
.btn-success.active,
|
||||
.btn-info.active,
|
||||
.btn-inverse.active {
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
|
||||
/* Set the backgrounds */
|
||||
.btn-primary {
|
||||
color: var(--white);
|
||||
background-color: var(--btn-primary-background);
|
||||
background-image: linear-gradient(to bottom, var(--btn-primary-background), var(--btn-primary-background-highlight));
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Warning appears as orange */
|
||||
.btn-warning {
|
||||
color: var(--white);
|
||||
background-color: var(--btn-warning-background);
|
||||
background-image: linear-gradient(to bottom, var(--btn-warning-background), var(--btn-warning-background-highlight));
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Danger and error appear as red */
|
||||
.btn-danger {
|
||||
color: var(--white);
|
||||
background-color: var(--btn-danger-background);
|
||||
background-image: linear-gradient(to bottom, var(--btn-danger-background), var(--btn-danger-background-highlight));
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Success appears as green */
|
||||
.btn-success {
|
||||
color: var(--white);
|
||||
background-color: var(--btn-success-background);
|
||||
background-image: linear-gradient(to bottom, var(--btn-success-background), var(--btn-success-background-highlight));
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Info appears as a neutral blue */
|
||||
.btn-info {
|
||||
color: var(--white);
|
||||
background-color: var(--btn-info-background);
|
||||
background-image: linear-gradient(to bottom, var(--btn-info-background), var(--btn-info-background-highlight));
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Inverse appears as dark gray */
|
||||
.btn-inverse {
|
||||
color: var(--white);
|
||||
background-color: var(--btn-inverse-background);
|
||||
background-image: linear-gradient(to bottom, var(--btn-inverse-background), var(--btn-inverse-background-highlight));
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Cross-browser Jank */
|
||||
button.btn::-moz-focus-inner,
|
||||
input[type="submit"].btn::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Link buttons */
|
||||
.btn-link,
|
||||
.btn-link:active,
|
||||
.btn-link[disabled] {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-link:hover,
|
||||
.btn-link:focus {
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-link[disabled]:hover,
|
||||
.btn-link[disabled]:focus {
|
||||
color: var(--gray-dark);
|
||||
text-decoration: none;
|
||||
}
|
151
css/carousel.css
151
css/carousel.css
|
@ -1,151 +0,0 @@
|
|||
/*
|
||||
Carousel
|
||||
========================================
|
||||
*/
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
margin-bottom: var(--base-line-height);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-inner>.item {
|
||||
display: none;
|
||||
position: relative;
|
||||
transition: 0.6s ease-in-out left;
|
||||
}
|
||||
|
||||
/* Account for jankitude on images */
|
||||
.carousel-inner>.item>img,
|
||||
.carousel-inner>.item>a>img {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.carousel-inner>.active,
|
||||
.carousel-inner>.next,
|
||||
.carousel-inner>.prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-inner>.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.carousel-inner>.next,
|
||||
.carousel-inner>.prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carousel-inner>.next {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.carousel-inner>.prev {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.carousel-inner>.next.left,
|
||||
.carousel-inner>.prev.right {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.carousel-inner>.active.left {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.carousel-inner>.active.right {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Left/right controls for nav */
|
||||
.carousel-control {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 15px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-top: -20px;
|
||||
font-size: 60px;
|
||||
font-weight: 100;
|
||||
line-height: 30px;
|
||||
color: var(--white);
|
||||
text-align: center;
|
||||
background: var(--gray-darker);
|
||||
border: 3px solid var(--white);
|
||||
border-radius: 23px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Reposition the right one */
|
||||
.carousel-control.right {
|
||||
left: auto;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
/* Hover/focus state */
|
||||
.carousel-control:hover,
|
||||
.carousel-control:focus {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Carousel indicator pips */
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 5;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.carousel-indicators li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 5px;
|
||||
text-indent: -999px;
|
||||
background-color: #ccc;
|
||||
background-color: rgba(255, 255, 255, .25);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.carousel-indicators .active {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Caption for text below images */
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 15px;
|
||||
background: var(--gray-dark);
|
||||
background: rgba(0, 0, 0, .75);
|
||||
}
|
||||
|
||||
.carousel-caption h4,
|
||||
.carousel-caption p {
|
||||
color: var(--white);
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
.carousel-caption h4 {
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
.carousel-caption p {
|
||||
margin-bottom: 0;
|
||||
}
|
|
@ -1,35 +0,0 @@
|
|||
/*
|
||||
Close icons
|
||||
========================================
|
||||
*/
|
||||
|
||||
.close {
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: var(--base-line-height);
|
||||
color: var(--black);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: var(--black);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Additional properties for button version
|
||||
* iOS requires the button element instead of an anchor tag.
|
||||
* If you want the anchor version, it requires `href="#"`.
|
||||
*/
|
||||
button.close {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
63
css/code.css
63
css/code.css
|
@ -1,63 +0,0 @@
|
|||
/*
|
||||
Code (inline and block)
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Inline and block code styles */
|
||||
code,
|
||||
pre {
|
||||
padding: 0 3px 2px;
|
||||
font-family: var(--mono-font-family);
|
||||
font-size: calc(var(--base-font-size) - 2px);
|
||||
color: var(--gray-dark);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
color: #d14;
|
||||
background-color: #f7f7f9;
|
||||
border: 1px solid #e1e1e8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Blocks of code */
|
||||
pre {
|
||||
display: block;
|
||||
padding: calc((var(--base-line-height) - 1) / 2);
|
||||
margin: 0 0 calc(var(--base-line-height) / 2);
|
||||
font-size: calc(var(--base-font-size) - 1px);
|
||||
/* 14px to 13px */
|
||||
line-height: var(--base-line-height);
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
/* fallback for IE7-8 */
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Make prettyprint styles more spaced out for readability */
|
||||
pre.prettyprint {
|
||||
margin-bottom: var(--base-line-height);
|
||||
}
|
||||
|
||||
/* Account for some code outputs that place code tags in pre tags */
|
||||
pre code {
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Enable scrollable blocks of code */
|
||||
.pre-scrollable {
|
||||
max-height: 340px;
|
||||
overflow-y: scroll;
|
||||
}
|
|
@ -1,24 +0,0 @@
|
|||
/*
|
||||
Component animations
|
||||
========================================
|
||||
*/
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
|
||||
.fade.in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height 0.35s ease;
|
||||
}
|
||||
|
||||
.collapse.in {
|
||||
height: auto;
|
||||
}
|
|
@ -1,259 +0,0 @@
|
|||
/*
|
||||
Dropdown menus
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns */
|
||||
.dropup,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
/* The caret makes the toggle a bit too tall in IE7 */
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
|
||||
.dropdown-toggle:active,
|
||||
.open .dropdown-toggle {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Dropdown arrow/caret
|
||||
-------------------- */
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: top;
|
||||
border-top: 4px solid var(--black);
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Place the caret */
|
||||
.dropdown .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* The dropdown menu (ul)
|
||||
---------------------- */
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: var(--zindex-dropdown);
|
||||
display: none; /* none by default, but block on "open" of the menu */
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0; /* override default ul */
|
||||
list-style: none;
|
||||
background-color: var(--dropdown-background);
|
||||
border: 1px solid #ccc; /* Fallback for IE7-8 */
|
||||
border: 1px solid var(--dropdown-border);
|
||||
border-right-width: 2px;
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
/* Aligns the dropdown menu to right */
|
||||
.dropdown-menu.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* Dividers (basically an hr) within the dropdown */
|
||||
.dropdown-menu .divider {
|
||||
height: 1px;
|
||||
margin: 8px 1px;
|
||||
overflow: hidden;
|
||||
background-color: var(--dropdown-divider-top);
|
||||
border-bottom: 1px solid var(--dropdown-divider-bottom);
|
||||
}
|
||||
|
||||
/* Links within the dropdown menu */
|
||||
.dropdown-menu > li > a {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: var(--base-line-height);
|
||||
color: var(--dropdown-link-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Hover/Focus state
|
||||
--------------- */
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus,
|
||||
.dropdown-submenu:hover > a,
|
||||
.dropdown-submenu:focus > a {
|
||||
text-decoration: none;
|
||||
color: var(--dropdown-link-color-hover);
|
||||
background-color: var(--dropdown-link-background-hover);
|
||||
background-image: linear-gradient(to bottom, var(--dropdown-link-background-hover), #0077b3);
|
||||
}
|
||||
|
||||
/* Active state
|
||||
------------ */
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
color: var(--dropdown-link-color-active);
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: var(--dropdown-link-background-active);
|
||||
background-image: linear-gradient(to bottom, var(--dropdown-link-background-active), #0077b3);
|
||||
}
|
||||
|
||||
/* Disabled state
|
||||
-------------- */
|
||||
/* Gray out text and ensure the hover/focus state remains gray */
|
||||
.dropdown-menu > .disabled > a,
|
||||
.dropdown-menu > .disabled > a:hover,
|
||||
.dropdown-menu > .disabled > a:focus {
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
/* Nuke hover/focus effects */
|
||||
.dropdown-menu > .disabled > a:hover,
|
||||
.dropdown-menu > .disabled > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Open state for the dropdown
|
||||
--------------------------- */
|
||||
.open {
|
||||
/* IE7's z-index only goes to the nearest positioned ancestor, which would
|
||||
make the menu appear below buttons that appeared later on the page */
|
||||
z-index: var(--zindex-dropdown);
|
||||
}
|
||||
|
||||
.open > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Backdrop to catch body clicks on mobile, etc.
|
||||
--------------------------- */
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: calc(var(--zindex-dropdown) - 10);
|
||||
}
|
||||
|
||||
/* Right aligned dropdowns
|
||||
--------------------------- */
|
||||
.pull-right > .dropdown-menu {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
------------------------------------------------------ */
|
||||
/* Just add .dropup after the standard .dropdown class and you're set, bro.
|
||||
TODO: abstract this so that the navbar fixed styles are not placed here? */
|
||||
.dropup .caret,
|
||||
.navbar-fixed-bottom .dropdown .caret {
|
||||
border-top: 0;
|
||||
border-bottom: 4px solid var(--black);
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Different positioning for bottom up menu */
|
||||
.dropup .dropdown-menu,
|
||||
.navbar-fixed-bottom .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
/* Sub menus
|
||||
--------------------------- */
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Default dropdowns */
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
border-radius: 0 6px 6px 6px;
|
||||
}
|
||||
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Dropups */
|
||||
.dropup .dropdown-submenu > .dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: -2px;
|
||||
border-radius: 5px 5px 5px 0;
|
||||
}
|
||||
|
||||
/* Caret to indicate there is a submenu */
|
||||
.dropdown-submenu > a:after {
|
||||
display: block;
|
||||
content: " ";
|
||||
float: right;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-left-color: #cccccc;
|
||||
margin-top: 5px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.dropdown-submenu:hover > a:after {
|
||||
border-left-color: var(--dropdown-link-color-hover);
|
||||
}
|
||||
|
||||
/* Left aligned submenus */
|
||||
.dropdown-submenu.pull-left {
|
||||
/* Undo the float
|
||||
Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. */
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* Positioning the submenu */
|
||||
.dropdown-submenu.pull-left > .dropdown-menu {
|
||||
left: -100%;
|
||||
margin-left: 10px;
|
||||
border-radius: 6px 0 6px 6px;
|
||||
}
|
||||
|
||||
/* Tweak nav headers
|
||||
----------------- */
|
||||
/* Increase padding from 15px to 20px on sides */
|
||||
.dropdown .dropdown-menu .nav-header {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Typeahead
|
||||
--------- */
|
||||
.typeahead {
|
||||
z-index: 1051;
|
||||
margin-top: 2px; /* give it some space to breathe */
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
918
css/forms.css
918
css/forms.css
|
@ -1,918 +0,0 @@
|
|||
/*
|
||||
Forms
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* GENERAL STYLES
|
||||
-------------- */
|
||||
|
||||
/* Make all forms have space below them */
|
||||
form {
|
||||
margin: 0 0 var(--base-line-height);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Groups of fields with labels on top (legends) */
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: var(--base-line-height);
|
||||
font-size: calc(var(--base-font-size) * 1.5);
|
||||
line-height: calc(var(--base-line-height) * 2);
|
||||
color: var(--gray-dark);
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/* Small */
|
||||
legend small {
|
||||
font-size: calc(var(--base-line-height) * 0.75);
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
/* Set font for forms */
|
||||
label,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-size: var(--base-font-size);
|
||||
font-weight: normal;
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: var(--base-font-family); /* And only set font-family here for those that need it */
|
||||
}
|
||||
|
||||
/* Identify controls by their labels */
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Form controls
|
||||
-------------------------- */
|
||||
|
||||
/* Shared size and type resets */
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
display: inline-block;
|
||||
height: var(--base-line-height);
|
||||
padding: 4px 6px;
|
||||
margin-bottom: calc(var(--base-line-height) / 2);
|
||||
font-size: var(--base-font-size);
|
||||
line-height: var(--base-line-height);
|
||||
color: var(--gray);
|
||||
border-radius: var(--input-border-radius);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Reset appearance properties for textual inputs and textarea
|
||||
Declare width for legacy (can't be on input[type=*] selectors or it's too specific) */
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
width: 206px; /* plus 12px padding and 2px border */
|
||||
}
|
||||
|
||||
/* Reset height since textareas have rows */
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Everything else */
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
background-color: var(--input-background);
|
||||
border: 1px solid var(--input-border);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
transition: border linear .2s, box-shadow linear .2s;
|
||||
}
|
||||
|
||||
/* Focus state */
|
||||
textarea:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="datetime"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="week"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="color"]:focus,
|
||||
.uneditable-input:focus {
|
||||
border-color: rgba(82,168,236,.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9; /* IE6-9 */
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
|
||||
}
|
||||
|
||||
/* Position radios and checkboxes better */
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 4px 0 0;
|
||||
margin-top: 0; /* IE7 */
|
||||
margin-top: 1px \9; /* IE8-9 */
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/* Reset width of input images, buttons, radios, checkboxes */
|
||||
input[type="file"],
|
||||
input[type="image"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
width: auto; /* Override of generic input selector */
|
||||
}
|
||||
|
||||
/* Set the height of select and file controls to match text inputs */
|
||||
select,
|
||||
input[type="file"] {
|
||||
height: var(--input-height); /* In IE7, the height of the select element cannot be changed by height, only font-size */
|
||||
margin-top: 4px; /* For IE7, add top margin to align select with labels */
|
||||
line-height: var(--input-height);
|
||||
}
|
||||
|
||||
/* Make select elements obey height by applying a border */
|
||||
select {
|
||||
width: 220px; /* default input width + 10px of padding that doesn't get applied */
|
||||
border: 1px solid var(--input-border);
|
||||
background-color: var(--input-background); /* Chrome on Linux and Mobile Safari need background-color */
|
||||
}
|
||||
|
||||
/* Make multiple select elements height not fixed */
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Focus for select, file, radio, and checkbox */
|
||||
select:focus,
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Uneditable inputs
|
||||
------------------ */
|
||||
|
||||
/* Make uneditable inputs look inactive */
|
||||
.uneditable-input,
|
||||
.uneditable-textarea {
|
||||
color: var(--gray-light);
|
||||
background-color: #fcfcfc;
|
||||
border-color: var(--input-border);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.025);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* For text that needs to appear as an input but should not be an input */
|
||||
.uneditable-input {
|
||||
overflow: hidden; /* prevent text from wrapping, but still cut it off like an input does */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Make uneditable textareas behave like a textarea */
|
||||
.uneditable-textarea {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Placeholder
|
||||
----------- */
|
||||
|
||||
/* Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector */
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--placeholder-text);
|
||||
}
|
||||
|
||||
/* CHECKBOXES & RADIOS
|
||||
------------------- */
|
||||
|
||||
/* Indent the labels to position radios/checkboxes as hanging */
|
||||
.radio,
|
||||
.checkbox {
|
||||
min-height: var(--base-line-height); /* clear the floating input if there is no label text */
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.radio input[type="radio"],
|
||||
.checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
/* Move the options list down to align with labels */
|
||||
.controls > .radio:first-child,
|
||||
.controls > .checkbox:first-child {
|
||||
padding-top: 5px; /* has to be padding because margin collapses */
|
||||
}
|
||||
|
||||
/* Radios and checkboxes on same line */
|
||||
/* TODO v3: Convert .inline to .control-inline */
|
||||
.radio.inline,
|
||||
.checkbox.inline {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.radio.inline + .radio.inline,
|
||||
.checkbox.inline + .checkbox.inline {
|
||||
margin-left: 10px; /* space out consecutive inline controls */
|
||||
}
|
||||
|
||||
/* INPUT SIZES
|
||||
----------- */
|
||||
|
||||
/* General classes for quick sizes */
|
||||
.input-mini { width: 60px; }
|
||||
.input-small { width: 90px; }
|
||||
.input-medium { width: 150px; }
|
||||
.input-large { width: 210px; }
|
||||
.input-xlarge { width: 270px; }
|
||||
.input-xxlarge { width: 530px; }
|
||||
|
||||
/* Grid style input sizes */
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input[class*="span"],
|
||||
/* Redeclare since the fluid row class is more specific */
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"] {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Ensure input-prepend/append never wraps */
|
||||
.input-append input[class*="span"],
|
||||
.input-append .uneditable-input[class*="span"],
|
||||
.input-prepend input[class*="span"],
|
||||
.input-prepend .uneditable-input[class*="span"],
|
||||
.row-fluid input[class*="span"],
|
||||
.row-fluid select[class*="span"],
|
||||
.row-fluid textarea[class*="span"],
|
||||
.row-fluid .uneditable-input[class*="span"],
|
||||
.row-fluid .input-prepend [class*="span"],
|
||||
.row-fluid .input-append [class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* GRID SIZING FOR INPUTS
|
||||
---------------------- */
|
||||
|
||||
/* Control row for multiple inputs per line */
|
||||
.controls-row {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.controls-row:before,
|
||||
.controls-row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.controls-row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Float to collapse white-space for proper grid alignment */
|
||||
.controls-row [class*="span"],
|
||||
/* Redeclare the fluid grid collapse since we undo the float for inputs */
|
||||
.row-fluid .controls-row [class*="span"] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Explicitly set top padding on all checkboxes/radios, not just first-child */
|
||||
.controls-row .checkbox[class*="span"],
|
||||
.controls-row .radio[class*="span"] {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/* DISABLED STATE
|
||||
-------------- */
|
||||
|
||||
/* Disabled and read-only inputs */
|
||||
input[disabled],
|
||||
select[disabled],
|
||||
textarea[disabled],
|
||||
input[readonly],
|
||||
select[readonly],
|
||||
textarea[readonly] {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--input-disabled-background);
|
||||
}
|
||||
|
||||
/* Explicitly reset the colors here */
|
||||
input[type="radio"][disabled],
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"][readonly],
|
||||
input[type="checkbox"][readonly] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* FORM FIELD FEEDBACK STATES
|
||||
-------------------------- */
|
||||
|
||||
/* Warning */
|
||||
.control-group.warning .control-label,
|
||||
.control-group.warning .help-block,
|
||||
.control-group.warning .help-inline {
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.control-group.warning .checkbox,
|
||||
.control-group.warning .radio,
|
||||
.control-group.warning input,
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.control-group.warning input,
|
||||
.control-group.warning select,
|
||||
.control-group.warning textarea {
|
||||
border-color: var(--warning-text);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
.control-group.warning input:focus,
|
||||
.control-group.warning select:focus,
|
||||
.control-group.warning textarea:focus {
|
||||
border-color: #a47e3c;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #dbc59e;
|
||||
}
|
||||
|
||||
.control-group.warning .input-prepend .add-on,
|
||||
.control-group.warning .input-append .add-on {
|
||||
color: var(--warning-text);
|
||||
background-color: var(--warning-background);
|
||||
border-color: var(--warning-text);
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.control-group.error .control-label,
|
||||
.control-group.error .help-block,
|
||||
.control-group.error .help-inline {
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.control-group.error .checkbox,
|
||||
.control-group.error .radio,
|
||||
.control-group.error input,
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.control-group.error input,
|
||||
.control-group.error select,
|
||||
.control-group.error textarea {
|
||||
border-color: var(--error-text);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
.control-group.error input:focus,
|
||||
.control-group.error select:focus,
|
||||
.control-group.error textarea:focus {
|
||||
border-color: #953b39;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #d59392;
|
||||
}
|
||||
|
||||
.control-group.error .input-prepend .add-on,
|
||||
.control-group.error .input-append .add-on {
|
||||
color: var(--error-text);
|
||||
background-color: var(--error-background);
|
||||
border-color: var(--error-text);
|
||||
}
|
||||
|
||||
/* Success */
|
||||
.control-group.success .control-label,
|
||||
.control-group.success .help-block,
|
||||
.control-group.success .help-inline {
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
.control-group.success .checkbox,
|
||||
.control-group.success .radio,
|
||||
.control-group.success input,
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
.control-group.success input,
|
||||
.control-group.success select,
|
||||
.control-group.success textarea {
|
||||
border-color: var(--success-text);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
.control-group.success input:focus,
|
||||
.control-group.success select:focus,
|
||||
.control-group.success textarea:focus {
|
||||
border-color: #356635;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #7aba7b;
|
||||
}
|
||||
|
||||
.control-group.success .input-prepend .add-on,
|
||||
.control-group.success .input-append .add-on {
|
||||
color: var(--success-text);
|
||||
background-color: var(--success-background);
|
||||
border-color: var(--success-text);
|
||||
}
|
||||
|
||||
/* Info */
|
||||
.control-group.info .control-label,
|
||||
.control-group.info .help-block,
|
||||
.control-group.info .help-inline {
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
.control-group.info .checkbox,
|
||||
.control-group.info .radio,
|
||||
.control-group.info input,
|
||||
.control-group.info select,
|
||||
.control-group.info textarea {
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
.control-group.info input,
|
||||
.control-group.info select,
|
||||
.control-group.info textarea {
|
||||
border-color: var(--info-text);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
.control-group.info input:focus,
|
||||
.control-group.info select:focus,
|
||||
.control-group.info textarea:focus {
|
||||
border-color: #2d6987;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #7ab5d3;
|
||||
}
|
||||
|
||||
.control-group.info .input-prepend .add-on,
|
||||
.control-group.info .input-append .add-on {
|
||||
color: var(--info-text);
|
||||
background-color: var(--info-background);
|
||||
border-color: var(--info-text);
|
||||
}
|
||||
|
||||
/* HTML5 invalid states
|
||||
Shares styles with the .control-group.error above */
|
||||
input:focus:invalid,
|
||||
textarea:focus:invalid,
|
||||
select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #ee5f5b;
|
||||
}
|
||||
|
||||
input:focus:invalid:focus,
|
||||
textarea:focus:invalid:focus,
|
||||
select:focus:invalid:focus {
|
||||
border-color: #e9322d;
|
||||
box-shadow: 0 0 6px #f8b9b7;
|
||||
}
|
||||
|
||||
/* FORM ACTIONS
|
||||
------------ */
|
||||
|
||||
.form-actions {
|
||||
padding: calc(var(--base-line-height) - 1px) 20px var(--base-line-height);
|
||||
margin-top: var(--base-line-height);
|
||||
margin-bottom: var(--base-line-height);
|
||||
background-color: var(--form-actions-background);
|
||||
border-top: 1px solid #e5e5e5;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.form-actions:before,
|
||||
.form-actions:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.form-actions:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* HELP TEXT
|
||||
--------- */
|
||||
|
||||
.help-block,
|
||||
.help-inline {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: block;
|
||||
margin-bottom: calc(var(--base-line-height) / 2);
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
zoom: 1;
|
||||
vertical-align: middle;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* INPUT GROUPS
|
||||
------------ */
|
||||
|
||||
/* Allow us to put symbols and text within the input field for a cleaner look */
|
||||
.input-append,
|
||||
.input-prepend {
|
||||
display: inline-block;
|
||||
margin-bottom: calc(var(--base-line-height) / 2);
|
||||
vertical-align: middle;
|
||||
font-size: 0; /* white space collapse hack */
|
||||
white-space: nowrap; /* Prevent span and input from separating */
|
||||
}
|
||||
|
||||
/* Reset the white space collapse hack */
|
||||
.input-append input,
|
||||
.input-prepend input,
|
||||
.input-append select,
|
||||
.input-prepend select,
|
||||
.input-append .uneditable-input,
|
||||
.input-prepend .uneditable-input,
|
||||
.input-append .dropdown-menu,
|
||||
.input-prepend .dropdown-menu,
|
||||
.input-append .popover,
|
||||
.input-prepend .popover {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
.input-append input,
|
||||
.input-prepend input,
|
||||
.input-append select,
|
||||
.input-prepend select,
|
||||
.input-append .uneditable-input,
|
||||
.input-prepend .uneditable-input {
|
||||
position: relative; /* placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness */
|
||||
margin-bottom: 0; /* prevent bottom margin from screwing up alignment in stacked forms */
|
||||
margin-left: 0;
|
||||
vertical-align: top;
|
||||
border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
|
||||
}
|
||||
|
||||
/* Make input on top when focused so blue border and shadow always show */
|
||||
.input-append input:focus,
|
||||
.input-prepend input:focus,
|
||||
.input-append select:focus,
|
||||
.input-prepend select:focus,
|
||||
.input-append .uneditable-input:focus,
|
||||
.input-prepend .uneditable-input:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.input-append .add-on,
|
||||
.input-prepend .add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: var(--base-line-height);
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-size: var(--base-font-size);
|
||||
font-weight: normal;
|
||||
line-height: var(--base-line-height);
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 var(--white);
|
||||
background-color: var(--gray-lighter);
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.input-append .add-on,
|
||||
.input-prepend .add-on,
|
||||
.input-append .btn,
|
||||
.input-prepend .btn,
|
||||
.input-append .btn-group > .dropdown-toggle,
|
||||
.input-prepend .btn-group > .dropdown-toggle {
|
||||
vertical-align: top;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.input-append .active,
|
||||
.input-prepend .active {
|
||||
background-color: #a9dba9;
|
||||
border-color: var(--green);
|
||||
}
|
||||
|
||||
.input-prepend .add-on,
|
||||
.input-prepend .btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.input-prepend .add-on:first-child,
|
||||
.input-prepend .btn:first-child {
|
||||
border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
|
||||
}
|
||||
|
||||
.input-append input,
|
||||
.input-append select,
|
||||
.input-append .uneditable-input {
|
||||
border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
|
||||
}
|
||||
|
||||
.input-append input + .btn-group .btn:last-child,
|
||||
.input-append select + .btn-group .btn:last-child,
|
||||
.input-append .uneditable-input + .btn-group .btn:last-child {
|
||||
border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
|
||||
}
|
||||
|
||||
.input-append .add-on,
|
||||
.input-append .btn,
|
||||
.input-append .btn-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.input-append .add-on:last-child,
|
||||
.input-append .btn:last-child,
|
||||
.input-append .btn-group:last-child > .dropdown-toggle {
|
||||
border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
|
||||
}
|
||||
|
||||
/* Remove all border-radius for inputs with both prepend and append */
|
||||
.input-prepend.input-append input,
|
||||
.input-prepend.input-append select,
|
||||
.input-prepend.input-append .uneditable-input {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append input + .btn-group .btn,
|
||||
.input-prepend.input-append select + .btn-group .btn,
|
||||
.input-prepend.input-append .uneditable-input + .btn-group .btn {
|
||||
border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append .add-on:first-child,
|
||||
.input-prepend.input-append .btn:first-child {
|
||||
margin-right: -1px;
|
||||
border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
|
||||
}
|
||||
|
||||
.input-prepend.input-append .add-on:last-child,
|
||||
.input-prepend.input-append .btn:last-child {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
|
||||
}
|
||||
|
||||
.input-prepend.input-append .btn-group:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* SEARCH FORM
|
||||
----------- */
|
||||
|
||||
input.search-query {
|
||||
padding-right: 14px;
|
||||
padding-right: 4px \9;
|
||||
padding-left: 14px;
|
||||
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
||||
margin-bottom: 0; /* Remove the default margin on all inputs */
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
/* Allow for input prepend/append in search forms */
|
||||
.form-search .input-append .search-query,
|
||||
.form-search .input-prepend .search-query {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-search .input-append .search-query {
|
||||
border-radius: 14px 0 0 14px;
|
||||
}
|
||||
|
||||
.form-search .input-append .btn {
|
||||
border-radius: 0 14px 14px 0;
|
||||
}
|
||||
|
||||
.form-search .input-prepend .search-query {
|
||||
border-radius: 0 14px 14px 0;
|
||||
}
|
||||
|
||||
.form-search .input-prepend .btn {
|
||||
border-radius: 14px 0 0 14px;
|
||||
}
|
||||
|
||||
/* HORIZONTAL & VERTICAL FORMS
|
||||
--------------------------- */
|
||||
|
||||
/* Common properties
|
||||
----------------- */
|
||||
.form-search,
|
||||
.form-inline,
|
||||
.form-horizontal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-search input,
|
||||
.form-inline input,
|
||||
.form-horizontal input,
|
||||
.form-search textarea,
|
||||
.form-inline textarea,
|
||||
.form-horizontal textarea,
|
||||
.form-search select,
|
||||
.form-inline select,
|
||||
.form-horizontal select,
|
||||
.form-search .help-inline,
|
||||
.form-inline .help-inline,
|
||||
.form-horizontal .help-inline,
|
||||
.form-search .uneditable-input,
|
||||
.form-inline .uneditable-input,
|
||||
.form-horizontal .uneditable-input,
|
||||
.form-search .input-prepend,
|
||||
.form-inline .input-prepend,
|
||||
.form-horizontal .input-prepend,
|
||||
.form-search .input-append,
|
||||
.form-inline .input-append,
|
||||
.form-horizontal .input-append {
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
zoom: 1;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Re-hide hidden elements due to specifity */
|
||||
.form-search .hide,
|
||||
.form-inline .hide,
|
||||
.form-horizontal .hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-search label,
|
||||
.form-inline label,
|
||||
.form-search .btn-group,
|
||||
.form-inline .btn-group {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Remove margin for input-prepend/-append */
|
||||
.form-search .input-append,
|
||||
.form-inline .input-append,
|
||||
.form-search .input-prepend,
|
||||
.form-inline .input-prepend {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Inline checkbox/radio labels (remove padding on left) */
|
||||
.form-search .radio,
|
||||
.form-search .checkbox,
|
||||
.form-inline .radio,
|
||||
.form-inline .checkbox {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Remove float and margin, set to inline-block */
|
||||
.form-search .radio input[type="radio"],
|
||||
.form-search .checkbox input[type="checkbox"],
|
||||
.form-inline .radio input[type="radio"],
|
||||
.form-inline .checkbox input[type="checkbox"] {
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Margin to space out fieldsets */
|
||||
.control-group {
|
||||
margin-bottom: calc(var(--base-line-height) / 2);
|
||||
}
|
||||
|
||||
/* Legend collapses margin, so next element is responsible for spacing */
|
||||
legend + .control-group {
|
||||
margin-top: var(--base-line-height);
|
||||
-webkit-margin-top-collapse: separate;
|
||||
}
|
||||
|
||||
/* Horizontal-specific styles
|
||||
-------------------------- */
|
||||
.form-horizontal {
|
||||
/* Increase spacing between groups */
|
||||
}
|
||||
|
||||
.form-horizontal .control-group {
|
||||
margin-bottom: var(--base-line-height);
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group:before,
|
||||
.form-horizontal .control-group:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Float the labels left */
|
||||
.form-horizontal .control-label {
|
||||
float: left;
|
||||
width: calc(var(--horizontal-component-offset) - 20px);
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Move over all input controls and content */
|
||||
.form-horizontal .controls {
|
||||
/* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
|
||||
don't inherit the margin of the parent, in this case .controls */
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
margin-left: var(--horizontal-component-offset);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.form-horizontal .controls:first-child {
|
||||
padding-left: var(--horizontal-component-offset);
|
||||
}
|
||||
|
||||
/* Remove bottom margin on block level help text since that's accounted for on .control-group */
|
||||
.form-horizontal .help-block {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* And apply it only to .help-block instances that follow a form control */
|
||||
.form-horizontal input,
|
||||
.form-horizontal select,
|
||||
.form-horizontal textarea,
|
||||
.form-horizontal .uneditable-input,
|
||||
.form-horizontal .input-prepend,
|
||||
.form-horizontal .input-append {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-horizontal input + .help-block,
|
||||
.form-horizontal select + .help-block,
|
||||
.form-horizontal textarea + .help-block,
|
||||
.form-horizontal .uneditable-input + .help-block,
|
||||
.form-horizontal .input-prepend + .help-block,
|
||||
.form-horizontal .input-append + .help-block {
|
||||
margin-top: calc(var(--base-line-height) / 2);
|
||||
}
|
||||
|
||||
/* Move over buttons in .form-actions to align with .controls */
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: var(--horizontal-component-offset);
|
||||
}
|
171
css/grid.css
171
css/grid.css
|
@ -1,171 +0,0 @@
|
|||
/*
|
||||
Grid system
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Fixed grid system */
|
||||
.row {
|
||||
margin-left: calc(var(--grid-gutter-width) * -1);
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.row:before,
|
||||
.row:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
margin-left: var(--grid-gutter-width);
|
||||
}
|
||||
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1)));
|
||||
}
|
||||
|
||||
/* Generate .spanX classes */
|
||||
.span1 { width: var(--grid-column-width); }
|
||||
.span2 { width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width)); }
|
||||
.span3 { width: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 2); }
|
||||
.span4 { width: calc(var(--grid-column-width) * 4 + var(--grid-gutter-width) * 3); }
|
||||
.span5 { width: calc(var(--grid-column-width) * 5 + var(--grid-gutter-width) * 4); }
|
||||
.span6 { width: calc(var(--grid-column-width) * 6 + var(--grid-gutter-width) * 5); }
|
||||
.span7 { width: calc(var(--grid-column-width) * 7 + var(--grid-gutter-width) * 6); }
|
||||
.span8 { width: calc(var(--grid-column-width) * 8 + var(--grid-gutter-width) * 7); }
|
||||
.span9 { width: calc(var(--grid-column-width) * 9 + var(--grid-gutter-width) * 8); }
|
||||
.span10 { width: calc(var(--grid-column-width) * 10 + var(--grid-gutter-width) * 9); }
|
||||
.span11 { width: calc(var(--grid-column-width) * 11 + var(--grid-gutter-width) * 10); }
|
||||
.span12 { width: calc(var(--grid-column-width) * 12 + var(--grid-gutter-width) * 11); }
|
||||
|
||||
/* Generate .offsetX classes */
|
||||
.offset1 { margin-left: calc(var(--grid-column-width) + var(--grid-gutter-width) * 2); }
|
||||
.offset2 { margin-left: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width) * 3); }
|
||||
.offset3 { margin-left: calc(var(--grid-column-width) * 3 + var(--grid-gutter-width) * 4); }
|
||||
.offset4 { margin-left: calc(var(--grid-column-width) * 4 + var(--grid-gutter-width) * 5); }
|
||||
.offset5 { margin-left: calc(var(--grid-column-width) * 5 + var(--grid-gutter-width) * 6); }
|
||||
.offset6 { margin-left: calc(var(--grid-column-width) * 6 + var(--grid-gutter-width) * 7); }
|
||||
.offset7 { margin-left: calc(var(--grid-column-width) * 7 + var(--grid-gutter-width) * 8); }
|
||||
.offset8 { margin-left: calc(var(--grid-column-width) * 8 + var(--grid-gutter-width) * 9); }
|
||||
.offset9 { margin-left: calc(var(--grid-column-width) * 9 + var(--grid-gutter-width) * 10); }
|
||||
.offset10 { margin-left: calc(var(--grid-column-width) * 10 + var(--grid-gutter-width) * 11); }
|
||||
.offset11 { margin-left: calc(var(--grid-column-width) * 11 + var(--grid-gutter-width) * 12); }
|
||||
|
||||
/* Fluid grid system */
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.row-fluid:before,
|
||||
.row-fluid:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.row-fluid:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: calc(var(--base-line-height) + 10px);
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
margin-left: var(--fluid-grid-gutter-width);
|
||||
margin-left: calc(var(--fluid-grid-gutter-width) - 0.5%);
|
||||
}
|
||||
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Space grid-sized controls properly if multiple per line */
|
||||
.row-fluid .controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: var(--fluid-grid-gutter-width);
|
||||
}
|
||||
|
||||
/* Generate .spanX classes for fluid grid */
|
||||
.row-fluid .span1 { width: var(--fluid-grid-column-width); }
|
||||
.row-fluid .span2 { width: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .span3 { width: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width) * 2); }
|
||||
.row-fluid .span4 { width: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width) * 3); }
|
||||
.row-fluid .span5 { width: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width) * 4); }
|
||||
.row-fluid .span6 { width: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width) * 5); }
|
||||
.row-fluid .span7 { width: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width) * 6); }
|
||||
.row-fluid .span8 { width: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width) * 7); }
|
||||
.row-fluid .span9 { width: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width) * 8); }
|
||||
.row-fluid .span10 { width: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width) * 9); }
|
||||
.row-fluid .span11 { width: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width) * 10); }
|
||||
.row-fluid .span12 { width: 100%; }
|
||||
|
||||
/* Generate .offsetX classes for fluid grid */
|
||||
.row-fluid .offset1 { margin-left: calc(var(--fluid-grid-column-width) + var(--fluid-grid-gutter-width) * 2); }
|
||||
.row-fluid .offset1:first-child { margin-left: calc(var(--fluid-grid-column-width) + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset2 { margin-left: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width) * 3); }
|
||||
.row-fluid .offset2:first-child { margin-left: calc(var(--fluid-grid-column-width) * 2 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset3 { margin-left: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width) * 4); }
|
||||
.row-fluid .offset3:first-child { margin-left: calc(var(--fluid-grid-column-width) * 3 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset4 { margin-left: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width) * 5); }
|
||||
.row-fluid .offset4:first-child { margin-left: calc(var(--fluid-grid-column-width) * 4 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset5 { margin-left: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width) * 6); }
|
||||
.row-fluid .offset5:first-child { margin-left: calc(var(--fluid-grid-column-width) * 5 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset6 { margin-left: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width) * 7); }
|
||||
.row-fluid .offset6:first-child { margin-left: calc(var(--fluid-grid-column-width) * 6 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset7 { margin-left: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width) * 8); }
|
||||
.row-fluid .offset7:first-child { margin-left: calc(var(--fluid-grid-column-width) * 7 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset8 { margin-left: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width) * 9); }
|
||||
.row-fluid .offset8:first-child { margin-left: calc(var(--fluid-grid-column-width) * 8 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset9 { margin-left: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width) * 10); }
|
||||
.row-fluid .offset9:first-child { margin-left: calc(var(--fluid-grid-column-width) * 9 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset10 { margin-left: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width) * 11); }
|
||||
.row-fluid .offset10:first-child { margin-left: calc(var(--fluid-grid-column-width) * 10 + var(--fluid-grid-gutter-width)); }
|
||||
.row-fluid .offset11 { margin-left: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width) * 12); }
|
||||
.row-fluid .offset11:first-child { margin-left: calc(var(--fluid-grid-column-width) * 11 + var(--fluid-grid-gutter-width)); }
|
||||
|
||||
/* Input grid sizing */
|
||||
input.span1, textarea.span1, .uneditable-input.span1 { width: calc(var(--grid-column-width) - 14px); }
|
||||
input.span2, textarea.span2, .uneditable-input.span2 { width: calc((var(--grid-column-width) * 2) + var(--grid-gutter-width) - 14px); }
|
||||
input.span3, textarea.span3, .uneditable-input.span3 { width: calc((var(--grid-column-width) * 3) + (var(--grid-gutter-width) * 2) - 14px); }
|
||||
input.span4, textarea.span4, .uneditable-input.span4 { width: calc((var(--grid-column-width) * 4) + (var(--grid-gutter-width) * 3) - 14px); }
|
||||
input.span5, textarea.span5, .uneditable-input.span5 { width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter-width) * 4) - 14px); }
|
||||
input.span6, textarea.span6, .uneditable-input.span6 { width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5) - 14px); }
|
||||
input.span7, textarea.span7, .uneditable-input.span7 { width: calc((var(--grid-column-width) * 7) + (var(--grid-gutter-width) * 6) - 14px); }
|
||||
input.span8, textarea.span8, .uneditable-input.span8 { width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7) - 14px); }
|
||||
input.span9, textarea.span9, .uneditable-input.span9 { width: calc((var(--grid-column-width) * 9) + (var(--grid-gutter-width) * 8) - 14px); }
|
||||
input.span10, textarea.span10, .uneditable-input.span10 { width: calc((var(--grid-column-width) * 10) + (var(--grid-gutter-width) * 9) - 14px); }
|
||||
input.span11, textarea.span11, .uneditable-input.span11 { width: calc((var(--grid-column-width) * 11) + (var(--grid-gutter-width) * 10) - 14px); }
|
||||
input.span12, textarea.span12, .uneditable-input.span12 { width: calc((var(--grid-column-width) * 12) + (var(--grid-gutter-width) * 11) - 14px); }
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Space grid-sized controls properly if multiple per line */
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: var(--grid-gutter-width);
|
||||
}
|
||||
|
||||
/* Reset utility classes due to specificity */
|
||||
[class*="span"].hide,
|
||||
.row-fluid [class*="span"].hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[class*="span"].pull-right,
|
||||
.row-fluid [class*="span"].pull-right {
|
||||
float: right;
|
||||
}
|
|
@ -1,27 +0,0 @@
|
|||
/*
|
||||
Hero unit
|
||||
========================================
|
||||
*/
|
||||
|
||||
.hero-unit {
|
||||
padding: 60px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 200;
|
||||
line-height: calc(var(--base-line-height) * 1.5);
|
||||
color: var(--hero-unit-lead-color);
|
||||
background-color: var(--hero-unit-background);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: 60px;
|
||||
line-height: 1;
|
||||
color: var(--hero-unit-heading-color);
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.hero-unit li {
|
||||
line-height: calc(var(--base-line-height) * 1.5); /* Reset since we specify in type.css */
|
||||
}
|
|
@ -1,116 +0,0 @@
|
|||
/*
|
||||
Labels and badges
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Base classes */
|
||||
.label,
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 4px;
|
||||
font-size: calc(var(--base-font-size) * 0.846);
|
||||
font-weight: bold;
|
||||
line-height: 14px; /* ensure proper line-height if floated */
|
||||
color: var(--white);
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
/* Set unique padding and border-radii */
|
||||
.label {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding-left: 9px;
|
||||
padding-right: 9px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
/* Empty labels/badges collapse */
|
||||
.label:empty,
|
||||
.badge:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hover/focus state, but only for links */
|
||||
a.label:hover,
|
||||
a.label:focus,
|
||||
a.badge:hover,
|
||||
a.badge:focus {
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Colors
|
||||
Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) */
|
||||
|
||||
/* Important (red) */
|
||||
.label-important,
|
||||
.badge-important {
|
||||
background-color: var(--error-text);
|
||||
}
|
||||
|
||||
.label-important[href],
|
||||
.badge-important[href] {
|
||||
background-color: #953b39;
|
||||
}
|
||||
|
||||
/* Warnings (orange) */
|
||||
.label-warning,
|
||||
.badge-warning {
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
.label-warning[href],
|
||||
.badge-warning[href] {
|
||||
background-color: #c67605;
|
||||
}
|
||||
|
||||
/* Success (green) */
|
||||
.label-success,
|
||||
.badge-success {
|
||||
background-color: var(--success-text);
|
||||
}
|
||||
|
||||
.label-success[href],
|
||||
.badge-success[href] {
|
||||
background-color: #356635;
|
||||
}
|
||||
|
||||
/* Info (turquoise) */
|
||||
.label-info,
|
||||
.badge-info {
|
||||
background-color: var(--info-text);
|
||||
}
|
||||
|
||||
.label-info[href],
|
||||
.badge-info[href] {
|
||||
background-color: #2d6987;
|
||||
}
|
||||
|
||||
/* Inverse (black) */
|
||||
.label-inverse,
|
||||
.badge-inverse {
|
||||
background-color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.label-inverse[href],
|
||||
.badge-inverse[href] {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Quick fix for labels/badges in buttons */
|
||||
.btn .label,
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.btn-mini .label,
|
||||
.btn-mini .badge {
|
||||
top: 0;
|
||||
}
|
|
@ -1,40 +0,0 @@
|
|||
/*
|
||||
Layouts
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Container (centered, fixed-width layouts) */
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.container:before,
|
||||
.container:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.container:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Fluid layouts (left aligned, with sidebar, min- & max-width content) */
|
||||
.container-fluid {
|
||||
padding-right: var(--grid-gutter-width);
|
||||
padding-left: var(--grid-gutter-width);
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.container-fluid:before,
|
||||
.container-fluid:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.container-fluid:after {
|
||||
clear: both;
|
||||
}
|
|
@ -1,54 +0,0 @@
|
|||
/*
|
||||
Media objects
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Common styles
|
||||
------------- */
|
||||
|
||||
/* Clear the floats */
|
||||
.media,
|
||||
.media-body {
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/* Proper spacing between instances of .media */
|
||||
.media,
|
||||
.media .media {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.media:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* For images and videos, set to block */
|
||||
.media-object {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Reset margins on headings for tighter default spacing */
|
||||
.media-heading {
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
/* Media image alignment
|
||||
-------------------- */
|
||||
.media > .pull-left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.media > .pull-right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Media list variation
|
||||
------------------- */
|
||||
|
||||
/* Undo default ul/ol styles */
|
||||
.media-list {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
121
css/modals.css
121
css/modals.css
|
@ -1,121 +0,0 @@
|
|||
/*
|
||||
Modals
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Background */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: var(--zindex-modal-backdrop);
|
||||
background-color: var(--black);
|
||||
}
|
||||
|
||||
/* Fade for backdrop */
|
||||
.modal-backdrop.fade {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.fade.in {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Base modal */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
z-index: var(--zindex-modal);
|
||||
width: 560px;
|
||||
margin-left: -280px;
|
||||
background-color: var(--white);
|
||||
border: 1px solid #999;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
border: 1px solid #999; /* IE6-7 */
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 3px 7px rgba(0,0,0,0.3);
|
||||
background-clip: padding-box;
|
||||
/* Remove focus outline from opened modal */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal.fade {
|
||||
transition: opacity 0.3s linear, top 0.3s ease-out;
|
||||
top: -25%;
|
||||
}
|
||||
|
||||
.modal.fade.in {
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 9px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Close icon */
|
||||
.modal-header .close {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Heading */
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/* Body (where all modal content resides) */
|
||||
.modal-body {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Remove bottom margin if need be */
|
||||
.modal-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Footer (for actions) */
|
||||
.modal-footer {
|
||||
padding: 14px 15px 15px;
|
||||
margin-bottom: 0;
|
||||
text-align: right; /* right align buttons */
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #ddd;
|
||||
border-radius: 0 0 6px 6px;
|
||||
box-shadow: inset 0 1px 0 var(--white);
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.modal-footer:before,
|
||||
.modal-footer:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.modal-footer:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Properly space out buttons */
|
||||
.modal-footer .btn + .btn {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 0; /* account for input[type="submit"] which gets the bottom margin like all other inputs */
|
||||
}
|
||||
|
||||
/* but override that for button groups */
|
||||
.modal-footer .btn-group .btn + .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
/* and override it for block buttons as well */
|
||||
.modal-footer .btn-block + .btn-block {
|
||||
margin-left: 0;
|
||||
}
|
537
css/navbar.css
537
css/navbar.css
|
@ -1,537 +0,0 @@
|
|||
/*
|
||||
Navbars
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* COMMON STYLES
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Base class and wrapper */
|
||||
.navbar {
|
||||
overflow: visible;
|
||||
margin-bottom: var(--base-line-height);
|
||||
}
|
||||
|
||||
/* Inner for background effects */
|
||||
/* Gradient is applied to its own element because overflow visible is not honored by IE when filter is present */
|
||||
.navbar-inner {
|
||||
min-height: var(--navbar-height);
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
background-color: var(--navbar-background);
|
||||
background-image: linear-gradient(to bottom, var(--navbar-background-highlight), var(--navbar-background));
|
||||
border: 1px solid var(--navbar-border);
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.065);
|
||||
}
|
||||
|
||||
.navbar-inner:before,
|
||||
.navbar-inner:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.navbar-inner:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Set width to auto for default container */
|
||||
.navbar .container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Override the default collapsed state */
|
||||
.nav-collapse.collapse {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Brand: website or project name
|
||||
----------------------------- */
|
||||
.navbar .brand {
|
||||
float: left;
|
||||
display: block;
|
||||
/* Vertically center the text given var(--navbar-height) */
|
||||
padding: calc((var(--navbar-height) - var(--base-line-height)) / 2) 20px calc((var(--navbar-height) - var(--base-line-height)) / 2);
|
||||
margin-left: -20px; /* negative indent to left-align the text down the page */
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
color: var(--navbar-brand-color);
|
||||
text-shadow: 0 1px 0 var(--navbar-background-highlight);
|
||||
}
|
||||
|
||||
.navbar .brand:hover,
|
||||
.navbar .brand:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Plain text in topbar
|
||||
-------------------------- */
|
||||
.navbar-text {
|
||||
margin-bottom: 0;
|
||||
line-height: var(--navbar-height);
|
||||
color: var(--navbar-text);
|
||||
}
|
||||
|
||||
/* Janky solution for now to account for links outside the .nav
|
||||
-------------------------- */
|
||||
.navbar-link {
|
||||
color: var(--navbar-link-color);
|
||||
}
|
||||
|
||||
.navbar-link:hover,
|
||||
.navbar-link:focus {
|
||||
color: var(--navbar-link-color-hover);
|
||||
}
|
||||
|
||||
/* Dividers in navbar
|
||||
-------------------------- */
|
||||
.navbar .divider-vertical {
|
||||
height: var(--navbar-height);
|
||||
margin: 0 9px;
|
||||
border-left: 1px solid var(--navbar-background);
|
||||
border-right: 1px solid var(--navbar-background-highlight);
|
||||
}
|
||||
|
||||
/* Buttons in navbar
|
||||
-------------------------- */
|
||||
.navbar .btn,
|
||||
.navbar .btn-group {
|
||||
margin-top: calc((var(--navbar-height) - 30px) / 2);
|
||||
}
|
||||
|
||||
.navbar .btn-group .btn,
|
||||
.navbar .input-prepend .btn,
|
||||
.navbar .input-append .btn,
|
||||
.navbar .input-prepend .btn-group,
|
||||
.navbar .input-append .btn-group {
|
||||
margin-top: 0; /* then undo the margin here so we don't accidentally double it */
|
||||
}
|
||||
|
||||
/* Navbar forms
|
||||
-------------------------- */
|
||||
.navbar-form {
|
||||
margin-bottom: 0; /* remove default bottom margin */
|
||||
}
|
||||
|
||||
.navbar-form:before,
|
||||
.navbar-form:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.navbar-form:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.navbar-form input,
|
||||
.navbar-form select,
|
||||
.navbar-form .radio,
|
||||
.navbar-form .checkbox {
|
||||
margin-top: calc((var(--navbar-height) - 30px) / 2);
|
||||
}
|
||||
|
||||
.navbar-form input,
|
||||
.navbar-form select,
|
||||
.navbar-form .btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-form input[type="image"],
|
||||
.navbar-form input[type="checkbox"],
|
||||
.navbar-form input[type="radio"] {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.navbar-form .input-append,
|
||||
.navbar-form .input-prepend {
|
||||
margin-top: 5px;
|
||||
white-space: nowrap; /* prevent two items from separating within a .navbar-form that has .pull-left */
|
||||
}
|
||||
|
||||
.navbar-form .input-append input,
|
||||
.navbar-form .input-prepend input {
|
||||
margin-top: 0; /* remove the margin on top since it's on the parent */
|
||||
}
|
||||
|
||||
/* Navbar search
|
||||
-------------------------- */
|
||||
.navbar-search {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-top: calc((var(--navbar-height) - 30px) / 2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-search .search-query {
|
||||
margin-bottom: 0;
|
||||
padding: 4px 14px;
|
||||
font-family: var(--sans-font-family);
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
border-radius: 15px; /* redeclare because of specificity of the type attribute */
|
||||
}
|
||||
|
||||
/* Static navbar
|
||||
-------------------------- */
|
||||
.navbar-static-top {
|
||||
position: static;
|
||||
margin-bottom: 0; /* remove 18px margin for default navbar */
|
||||
}
|
||||
|
||||
.navbar-static-top .navbar-inner {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Fixed navbar
|
||||
-------------------------- */
|
||||
/* Shared (top/bottom) styles */
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: var(--zindex-fixed-navbar);
|
||||
margin-bottom: 0; /* remove 18px margin for default navbar */
|
||||
}
|
||||
|
||||
.navbar-fixed-top .navbar-inner,
|
||||
.navbar-static-top .navbar-inner {
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom .navbar-inner {
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-top .navbar-inner,
|
||||
.navbar-fixed-bottom .navbar-inner {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Reset container width */
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1)));
|
||||
}
|
||||
|
||||
/* Fixed to top */
|
||||
.navbar-fixed-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-top .navbar-inner,
|
||||
.navbar-static-top .navbar-inner {
|
||||
box-shadow: 0 1px 10px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
/* Fixed to bottom */
|
||||
.navbar-fixed-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom .navbar-inner {
|
||||
box-shadow: 0 -1px 10px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
/* NAVIGATION
|
||||
---------- */
|
||||
.navbar .nav {
|
||||
position: relative;
|
||||
left: 0;
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.navbar .nav.pull-right {
|
||||
float: right; /* redeclare due to specificity */
|
||||
margin-right: 0; /* remove margin on float right nav */
|
||||
}
|
||||
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
.navbar .nav > li > a {
|
||||
float: none;
|
||||
/* Vertically center the text given var(--navbar-height) */
|
||||
padding: calc((var(--navbar-height) - var(--base-line-height)) / 2) 15px calc((var(--navbar-height) - var(--base-line-height)) / 2);
|
||||
color: var(--navbar-link-color);
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 var(--navbar-background-highlight);
|
||||
}
|
||||
|
||||
.navbar .nav .dropdown-toggle .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Hover/focus */
|
||||
.navbar .nav > li > a:focus,
|
||||
.navbar .nav > li > a:hover {
|
||||
background-color: var(--navbar-link-background-hover); /* "transparent" is default to differentiate :hover/:focus from .active */
|
||||
color: var(--navbar-link-color-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Active nav items */
|
||||
.navbar .nav > .active > a,
|
||||
.navbar .nav > .active > a:hover,
|
||||
.navbar .nav > .active > a:focus {
|
||||
color: var(--navbar-link-color-active);
|
||||
text-decoration: none;
|
||||
background-color: var(--navbar-link-background-active);
|
||||
box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
|
||||
}
|
||||
|
||||
/* Navbar button for toggling navbar items in responsive layouts */
|
||||
.navbar .btn-navbar {
|
||||
display: none;
|
||||
float: right;
|
||||
padding: 7px 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
background-color: #ededed;
|
||||
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
|
||||
border-color: #e5e5e5 #e5e5e5 #bfbfbf;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
||||
}
|
||||
|
||||
.navbar .btn-navbar .icon-bar {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
.btn-navbar .icon-bar + .icon-bar {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* Dropdown menus
|
||||
-------------- */
|
||||
/* Menu position and menu carets */
|
||||
.navbar .nav > li > .dropdown-menu:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
border-bottom-color: var(--dropdown-border);
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.navbar .nav > li > .dropdown-menu:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid var(--dropdown-background);
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
/* Menu position and menu caret support for dropups via extra dropup class */
|
||||
.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
|
||||
border-top: 7px solid #ccc;
|
||||
border-top-color: var(--dropdown-border);
|
||||
border-bottom: 0;
|
||||
bottom: -7px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
|
||||
border-top: 6px solid var(--dropdown-background);
|
||||
border-bottom: 0;
|
||||
bottom: -6px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
/* Caret should match text color on hover/focus */
|
||||
.navbar .nav li.dropdown > a:hover .caret,
|
||||
.navbar .nav li.dropdown > a:focus .caret {
|
||||
border-top-color: var(--navbar-link-color-hover);
|
||||
border-bottom-color: var(--navbar-link-color-hover);
|
||||
}
|
||||
|
||||
/* Remove background color from open dropdown */
|
||||
.navbar .nav li.dropdown.open > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
||||
background-color: var(--navbar-link-background-active);
|
||||
color: var(--navbar-link-color-active);
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown > .dropdown-toggle .caret {
|
||||
border-top-color: var(--navbar-link-color);
|
||||
border-bottom-color: var(--navbar-link-color);
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
|
||||
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
|
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
|
||||
border-top-color: var(--navbar-link-color-active);
|
||||
border-bottom-color: var(--navbar-link-color-active);
|
||||
}
|
||||
|
||||
/* Right aligned menus need alt position */
|
||||
.navbar .pull-right > li > .dropdown-menu,
|
||||
.navbar .nav > li > .dropdown-menu.pull-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar .pull-right > li > .dropdown-menu:before,
|
||||
.navbar .nav > li > .dropdown-menu.pull-right:before {
|
||||
left: auto;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.navbar .pull-right > li > .dropdown-menu:after,
|
||||
.navbar .nav > li > .dropdown-menu.pull-right:after {
|
||||
left: auto;
|
||||
right: 13px;
|
||||
}
|
||||
|
||||
.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
|
||||
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: -1px;
|
||||
border-radius: 6px 0 6px 6px;
|
||||
}
|
||||
|
||||
/* Inverted navbar
|
||||
-------------------------- */
|
||||
.navbar-inverse .navbar-inner {
|
||||
background-color: var(--navbar-inverse-background);
|
||||
background-image: linear-gradient(to bottom, var(--navbar-inverse-background-highlight), var(--navbar-inverse-background));
|
||||
border-color: var(--navbar-inverse-border);
|
||||
}
|
||||
|
||||
.navbar-inverse .brand,
|
||||
.navbar-inverse .nav > li > a {
|
||||
color: var(--navbar-inverse-link-color);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
.navbar-inverse .brand:hover,
|
||||
.navbar-inverse .brand:focus,
|
||||
.navbar-inverse .nav > li > a:hover,
|
||||
.navbar-inverse .nav > li > a:focus {
|
||||
color: var(--navbar-inverse-link-color-hover);
|
||||
}
|
||||
|
||||
.navbar-inverse .brand {
|
||||
color: var(--navbar-inverse-brand-color);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-text {
|
||||
color: var(--navbar-inverse-text);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > li > a:focus,
|
||||
.navbar-inverse .nav > li > a:hover {
|
||||
background-color: var(--navbar-inverse-link-background-hover);
|
||||
color: var(--navbar-inverse-link-color-hover);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav .active > a,
|
||||
.navbar-inverse .nav .active > a:hover,
|
||||
.navbar-inverse .nav .active > a:focus {
|
||||
color: var(--navbar-inverse-link-color-active);
|
||||
background-color: var(--navbar-inverse-link-background-active);
|
||||
}
|
||||
|
||||
/* Inline text links */
|
||||
.navbar-inverse .navbar-link {
|
||||
color: var(--navbar-inverse-link-color);
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-link:hover,
|
||||
.navbar-inverse .navbar-link:focus {
|
||||
color: var(--navbar-inverse-link-color-hover);
|
||||
}
|
||||
|
||||
/* Dividers in navbar */
|
||||
.navbar-inverse .divider-vertical {
|
||||
border-left-color: var(--navbar-inverse-background);
|
||||
border-right-color: var(--navbar-inverse-background-highlight);
|
||||
}
|
||||
|
||||
/* Dropdowns */
|
||||
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
|
||||
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
|
||||
background-color: var(--navbar-inverse-link-background-active);
|
||||
color: var(--navbar-inverse-link-color-active);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav li.dropdown > a:hover .caret,
|
||||
.navbar-inverse .nav li.dropdown > a:focus .caret {
|
||||
border-top-color: var(--navbar-inverse-link-color-active);
|
||||
border-bottom-color: var(--navbar-inverse-link-color-active);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
|
||||
border-top-color: var(--navbar-inverse-link-color);
|
||||
border-bottom-color: var(--navbar-inverse-link-color);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
|
||||
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
|
||||
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
|
||||
border-top-color: var(--navbar-inverse-link-color-active);
|
||||
border-bottom-color: var(--navbar-inverse-link-color-active);
|
||||
}
|
||||
|
||||
/* Navbar search */
|
||||
.navbar-inverse .navbar-search .search-query {
|
||||
color: var(--white);
|
||||
background-color: var(--navbar-inverse-search-background);
|
||||
border-color: var(--navbar-inverse-search-border);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-search .search-query::placeholder {
|
||||
color: var(--navbar-inverse-search-placeholder-color);
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
.navbar-inverse .navbar-search .search-query:focus,
|
||||
.navbar-inverse .navbar-search .search-query.focused {
|
||||
padding: 5px 15px;
|
||||
color: var(--gray-dark);
|
||||
text-shadow: 0 1px 0 var(--white);
|
||||
background-color: var(--navbar-inverse-search-background-focus);
|
||||
border: 0;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,.15);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Navbar collapse button */
|
||||
.navbar-inverse .btn-navbar {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
background-color: #0c0c0c;
|
||||
background-image: linear-gradient(to bottom, #151515, #040404);
|
||||
border-color: #040404 #040404 #000000;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
||||
}
|
373
css/navs.css
373
css/navs.css
|
@ -1,373 +0,0 @@
|
|||
/*
|
||||
Navs
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* BASE CLASS */
|
||||
.nav {
|
||||
margin-left: 0;
|
||||
margin-bottom: var(--base-line-height);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Make links block level */
|
||||
.nav > li > a {
|
||||
display: block;
|
||||
}
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: var(--gray-lighter);
|
||||
}
|
||||
|
||||
/* Prevent IE8 from misplacing imgs */
|
||||
.nav > li > a > img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Redeclare pull classes because of specifity */
|
||||
.nav > .pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Nav headers (for dropdowns and lists) */
|
||||
.nav-header {
|
||||
display: block;
|
||||
padding: 3px 15px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: var(--base-line-height);
|
||||
color: var(--gray-light);
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
/* Space them out when they follow another list item (link) */
|
||||
.nav li + .nav-header {
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
/* NAV LIST */
|
||||
.nav-list {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nav-list > li > a,
|
||||
.nav-list .nav-header {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
.nav-list > li > a {
|
||||
padding: 3px 15px;
|
||||
}
|
||||
.nav-list > .active > a,
|
||||
.nav-list > .active > a:hover,
|
||||
.nav-list > .active > a:focus {
|
||||
color: var(--white);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
||||
background-color: var(--link-color);
|
||||
}
|
||||
.nav-list [class^="icon-"],
|
||||
.nav-list [class*=" icon-"] {
|
||||
margin-right: 2px;
|
||||
}
|
||||
/* Dividers (basically an hr) within the dropdown */
|
||||
.nav-list .divider {
|
||||
height: 1px;
|
||||
margin: 9px 1px;
|
||||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid var(--white);
|
||||
}
|
||||
|
||||
/* TABS AND PILLS */
|
||||
/* Common styles */
|
||||
.nav-tabs::after,
|
||||
.nav-pills::after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.nav-tabs > li,
|
||||
.nav-pills > li {
|
||||
float: left;
|
||||
}
|
||||
.nav-tabs > li > a,
|
||||
.nav-pills > li > a {
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
margin-right: 2px;
|
||||
line-height: 14px; /* keeps the overall height an even number */
|
||||
}
|
||||
|
||||
/* TABS */
|
||||
/* Give the tabs something to sit on */
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
/* Make the list-items overlay the bottom border */
|
||||
.nav-tabs > li {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
/* Actual tabs (as links) */
|
||||
.nav-tabs > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
line-height: var(--base-line-height);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover,
|
||||
.nav-tabs > li > a:focus {
|
||||
border-color: var(--gray-lighter) var(--gray-lighter) #ddd;
|
||||
}
|
||||
/* Active state, and its :hover/:focus to override normal :hover/:focus */
|
||||
.nav-tabs > .active > a,
|
||||
.nav-tabs > .active > a:hover,
|
||||
.nav-tabs > .active > a:focus {
|
||||
color: var(--gray);
|
||||
background-color: var(--body-background);
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* PILLS */
|
||||
/* Links rendered as pills */
|
||||
.nav-pills > li > a {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Active state */
|
||||
.nav-pills > .active > a,
|
||||
.nav-pills > .active > a:hover,
|
||||
.nav-pills > .active > a:focus {
|
||||
color: var(--white);
|
||||
background-color: var(--link-color);
|
||||
}
|
||||
|
||||
/* STACKED NAV */
|
||||
/* Stacked tabs and pills */
|
||||
.nav-stacked > li {
|
||||
float: none;
|
||||
}
|
||||
.nav-stacked > li > a {
|
||||
margin-right: 0; /* no need for the gap between nav items */
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.nav-tabs.nav-stacked {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.nav-tabs.nav-stacked > li > a {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0;
|
||||
}
|
||||
.nav-tabs.nav-stacked > li:first-child > a {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.nav-tabs.nav-stacked > li:last-child > a {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.nav-tabs.nav-stacked > li > a:hover,
|
||||
.nav-tabs.nav-stacked > li > a:focus {
|
||||
border-color: #ddd;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Pills */
|
||||
.nav-pills.nav-stacked > li > a {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.nav-pills.nav-stacked > li:last-child > a {
|
||||
margin-bottom: 1px; /* decrease margin to match sizing of stacked tabs */
|
||||
}
|
||||
|
||||
/* DROPDOWNS */
|
||||
.nav-tabs .dropdown-menu {
|
||||
border-radius: 0 0 6px 6px; /* remove the top rounded corners here since there is a hard edge above the menu */
|
||||
}
|
||||
.nav-pills .dropdown-menu {
|
||||
border-radius: 6px; /* make rounded corners match the pills */
|
||||
}
|
||||
|
||||
/* Default dropdown links */
|
||||
/* Make carets use linkColor to start */
|
||||
.nav .dropdown-toggle .caret {
|
||||
border-top-color: var(--link-color);
|
||||
border-bottom-color: var(--link-color);
|
||||
margin-top: 6px;
|
||||
}
|
||||
.nav .dropdown-toggle:hover .caret,
|
||||
.nav .dropdown-toggle:focus .caret {
|
||||
border-top-color: var(--link-color-hover);
|
||||
border-bottom-color: var(--link-color-hover);
|
||||
}
|
||||
/* move down carets for tabs */
|
||||
.nav-tabs .dropdown-toggle .caret {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Active dropdown links */
|
||||
.nav .active .dropdown-toggle .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.nav-tabs .active .dropdown-toggle .caret {
|
||||
border-top-color: var(--gray);
|
||||
border-bottom-color: var(--gray);
|
||||
}
|
||||
|
||||
/* Active:hover/:focus dropdown links */
|
||||
.nav > .dropdown.active > a:hover,
|
||||
.nav > .dropdown.active > a:focus {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Open dropdowns */
|
||||
.nav-tabs .open .dropdown-toggle,
|
||||
.nav-pills .open .dropdown-toggle,
|
||||
.nav > li.dropdown.open.active > a:hover,
|
||||
.nav > li.dropdown.open.active > a:focus {
|
||||
color: var(--white);
|
||||
background-color: var(--gray-light);
|
||||
border-color: var(--gray-light);
|
||||
}
|
||||
.nav li.dropdown.open .caret,
|
||||
.nav li.dropdown.open.active .caret,
|
||||
.nav li.dropdown.open a:hover .caret,
|
||||
.nav li.dropdown.open a:focus .caret {
|
||||
border-top-color: var(--white);
|
||||
border-bottom-color: var(--white);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Dropdowns in stacked tabs */
|
||||
.tabs-stacked .open > a:hover,
|
||||
.tabs-stacked .open > a:focus {
|
||||
border-color: var(--gray-light);
|
||||
}
|
||||
|
||||
/* TABBABLE */
|
||||
/* COMMON STYLES */
|
||||
/* Clear any floats */
|
||||
.tabbable::after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.tab-content {
|
||||
overflow: auto; /* prevent content from running below tabs */
|
||||
}
|
||||
|
||||
/* Remove border on bottom, left, right */
|
||||
.tabs-below > .nav-tabs,
|
||||
.tabs-right > .nav-tabs,
|
||||
.tabs-left > .nav-tabs {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
/* Show/hide tabbable areas */
|
||||
.tab-content > .tab-pane,
|
||||
.pill-content > .pill-pane {
|
||||
display: none;
|
||||
}
|
||||
.tab-content > .active,
|
||||
.pill-content > .active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* BOTTOM */
|
||||
.tabs-below > .nav-tabs {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
.tabs-below > .nav-tabs > li {
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tabs-below > .nav-tabs > li > a {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.tabs-below > .nav-tabs > li > a:hover,
|
||||
.tabs-below > .nav-tabs > li > a:focus {
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
.tabs-below > .nav-tabs > .active > a,
|
||||
.tabs-below > .nav-tabs > .active > a:hover,
|
||||
.tabs-below > .nav-tabs > .active > a:focus {
|
||||
border-color: transparent #ddd #ddd #ddd;
|
||||
}
|
||||
|
||||
/* LEFT & RIGHT */
|
||||
/* Common styles */
|
||||
.tabs-left > .nav-tabs > li,
|
||||
.tabs-right > .nav-tabs > li {
|
||||
float: none;
|
||||
}
|
||||
.tabs-left > .nav-tabs > li > a,
|
||||
.tabs-right > .nav-tabs > li > a {
|
||||
min-width: 74px;
|
||||
margin-right: 0;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
/* Tabs on the left */
|
||||
.tabs-left > .nav-tabs {
|
||||
float: left;
|
||||
margin-right: 19px;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.tabs-left > .nav-tabs > li > a {
|
||||
margin-right: -1px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.tabs-left > .nav-tabs > li > a:hover,
|
||||
.tabs-left > .nav-tabs > li > a:focus {
|
||||
border-color: var(--gray-lighter) #ddd var(--gray-lighter) var(--gray-lighter);
|
||||
}
|
||||
.tabs-left > .nav-tabs .active > a,
|
||||
.tabs-left > .nav-tabs .active > a:hover,
|
||||
.tabs-left > .nav-tabs .active > a:focus {
|
||||
border-color: #ddd transparent #ddd #ddd;
|
||||
}
|
||||
|
||||
/* Tabs on the right */
|
||||
.tabs-right > .nav-tabs {
|
||||
float: right;
|
||||
margin-left: 19px;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.tabs-right > .nav-tabs > li > a {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.tabs-right > .nav-tabs > li > a:hover,
|
||||
.tabs-right > .nav-tabs > li > a:focus {
|
||||
border-color: var(--gray-lighter) var(--gray-lighter) var(--gray-lighter) #ddd;
|
||||
}
|
||||
.tabs-right > .nav-tabs .active > a,
|
||||
.tabs-right > .nav-tabs .active > a:hover,
|
||||
.tabs-right > .nav-tabs .active > a:focus {
|
||||
border-color: #ddd #ddd #ddd transparent;
|
||||
}
|
||||
|
||||
/* DISABLED STATES */
|
||||
/* Gray out text */
|
||||
.nav > .disabled > a {
|
||||
color: var(--gray-light);
|
||||
}
|
||||
/* Nuke hover/focus effects */
|
||||
.nav > .disabled > a:hover,
|
||||
.nav > .disabled > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
|
@ -1,47 +0,0 @@
|
|||
/*
|
||||
Pager pagination
|
||||
========================================
|
||||
*/
|
||||
|
||||
.pager {
|
||||
margin: var(--base-line-height) 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
.pager::after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
.pager li {
|
||||
display: inline;
|
||||
}
|
||||
.pager li > a,
|
||||
.pager li > span {
|
||||
display: inline-block;
|
||||
padding: 5px 14px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.pager li > a:hover,
|
||||
.pager li > a:focus {
|
||||
text-decoration: none;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.pager .next > a,
|
||||
.pager .next > span {
|
||||
float: right;
|
||||
}
|
||||
.pager .previous > a,
|
||||
.pager .previous > span {
|
||||
float: left;
|
||||
}
|
||||
.pager .disabled > a,
|
||||
.pager .disabled > a:hover,
|
||||
.pager .disabled > a:focus,
|
||||
.pager .disabled > span {
|
||||
color: var(--gray-light);
|
||||
background-color: #fff;
|
||||
cursor: default;
|
||||
}
|
|
@ -1,116 +0,0 @@
|
|||
/*
|
||||
Pagination (multiple pages)
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Space out pagination from surrounding content */
|
||||
.pagination {
|
||||
margin: var(--base-line-height) 0;
|
||||
}
|
||||
|
||||
.pagination ul {
|
||||
/* Allow for text-based alignment */
|
||||
display: inline-block;
|
||||
/* Reset default ul styles */
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
/* Visuals */
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
||||
}
|
||||
.pagination ul > li {
|
||||
display: inline; /* Remove list-style and block-level defaults */
|
||||
}
|
||||
.pagination ul > li > a,
|
||||
.pagination ul > li > span {
|
||||
float: left; /* Collapse white-space */
|
||||
padding: 4px 12px;
|
||||
line-height: var(--base-line-height);
|
||||
text-decoration: none;
|
||||
background-color: var(--pagination-background);
|
||||
border: 1px solid var(--pagination-border);
|
||||
border-left-width: 0;
|
||||
}
|
||||
.pagination ul > li > a:hover,
|
||||
.pagination ul > li > a:focus,
|
||||
.pagination ul > .active > a,
|
||||
.pagination ul > .active > span {
|
||||
background-color: var(--pagination-active-background);
|
||||
}
|
||||
.pagination ul > .active > a,
|
||||
.pagination ul > .active > span {
|
||||
color: var(--gray-light);
|
||||
cursor: default;
|
||||
}
|
||||
.pagination ul > .disabled > span,
|
||||
.pagination ul > .disabled > a,
|
||||
.pagination ul > .disabled > a:hover,
|
||||
.pagination ul > .disabled > a:focus {
|
||||
color: var(--gray-light);
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
.pagination ul > li:first-child > a,
|
||||
.pagination ul > li:first-child > span {
|
||||
border-left-width: 1px;
|
||||
border-top-left-radius: var(--base-border-radius);
|
||||
border-bottom-left-radius: var(--base-border-radius);
|
||||
}
|
||||
.pagination ul > li:last-child > a,
|
||||
.pagination ul > li:last-child > span {
|
||||
border-top-right-radius: var(--base-border-radius);
|
||||
border-bottom-right-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Alignment */
|
||||
.pagination-centered {
|
||||
text-align: center;
|
||||
}
|
||||
.pagination-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Sizing */
|
||||
|
||||
/* Large */
|
||||
.pagination-large ul > li > a,
|
||||
.pagination-large ul > li > span {
|
||||
padding: var(--padding-large);
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
.pagination-large ul > li:first-child > a,
|
||||
.pagination-large ul > li:first-child > span {
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-bottom-left-radius: var(--border-radius-large);
|
||||
}
|
||||
.pagination-large ul > li:last-child > a,
|
||||
.pagination-large ul > li:last-child > span {
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
border-bottom-right-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
/* Small and mini */
|
||||
.pagination-mini ul > li:first-child > a,
|
||||
.pagination-small ul > li:first-child > span {
|
||||
border-top-left-radius: var(--border-radius-small);
|
||||
border-bottom-left-radius: var(--border-radius-small);
|
||||
}
|
||||
.pagination-mini ul > li:last-child > a,
|
||||
.pagination-small ul > li:last-child > span {
|
||||
border-top-right-radius: var(--border-radius-small);
|
||||
border-bottom-right-radius: var(--border-radius-small);
|
||||
}
|
||||
|
||||
/* Small */
|
||||
.pagination-small ul > li > a,
|
||||
.pagination-small ul > li > span {
|
||||
padding: var(--padding-small);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
/* Mini */
|
||||
.pagination-mini ul > li > a,
|
||||
.pagination-mini ul > li > span {
|
||||
padding: var(--padding-mini);
|
||||
font-size: var(--font-size-mini);
|
||||
}
|
123
css/popovers.css
123
css/popovers.css
|
@ -1,123 +0,0 @@
|
|||
/*
|
||||
Popovers
|
||||
========================================
|
||||
*/
|
||||
|
||||
.popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: var(--zindex-popover);
|
||||
display: none;
|
||||
max-width: 276px;
|
||||
padding: 1px;
|
||||
text-align: left; /* Reset given new insertion method */
|
||||
background-color: var(--popover-background);
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||
|
||||
/* Overrides for proper insertion */
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Offset the popover to account for the popover arrow */
|
||||
.popover.top { margin-top: -10px; }
|
||||
.popover.right { margin-left: 10px; }
|
||||
.popover.bottom { margin-top: 10px; }
|
||||
.popover.left { margin-left: -10px; }
|
||||
|
||||
.popover-title {
|
||||
margin: 0; /* reset heading margin */
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
background-color: var(--popover-title-background);
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.popover-title:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
/* Arrows
|
||||
*
|
||||
* .arrow is outer, .arrow:after is inner */
|
||||
|
||||
.popover .arrow,
|
||||
.popover .arrow:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
.popover .arrow {
|
||||
border-width: var(--popover-arrow-outer-width);
|
||||
}
|
||||
.popover .arrow:after {
|
||||
border-width: var(--popover-arrow-width);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.popover.top .arrow {
|
||||
left: 50%;
|
||||
margin-left: calc(var(--popover-arrow-outer-width) * -1);
|
||||
border-bottom-width: 0;
|
||||
border-top-color: var(--popover-arrow-outer-color);
|
||||
bottom: calc(var(--popover-arrow-outer-width) * -1);
|
||||
}
|
||||
.popover.top .arrow:after {
|
||||
bottom: 1px;
|
||||
margin-left: calc(var(--popover-arrow-width) * -1);
|
||||
border-bottom-width: 0;
|
||||
border-top-color: var(--popover-arrow-color);
|
||||
}
|
||||
.popover.right .arrow {
|
||||
top: 50%;
|
||||
left: calc(var(--popover-arrow-outer-width) * -1);
|
||||
margin-top: calc(var(--popover-arrow-outer-width) * -1);
|
||||
border-left-width: 0;
|
||||
border-right-color: var(--popover-arrow-outer-color);
|
||||
}
|
||||
.popover.right .arrow:after {
|
||||
left: 1px;
|
||||
bottom: calc(var(--popover-arrow-width) * -1);
|
||||
border-left-width: 0;
|
||||
border-right-color: var(--popover-arrow-color);
|
||||
}
|
||||
.popover.bottom .arrow {
|
||||
left: 50%;
|
||||
margin-left: calc(var(--popover-arrow-outer-width) * -1);
|
||||
border-top-width: 0;
|
||||
border-bottom-color: var(--popover-arrow-outer-color);
|
||||
top: calc(var(--popover-arrow-outer-width) * -1);
|
||||
}
|
||||
.popover.bottom .arrow:after {
|
||||
top: 1px;
|
||||
margin-left: calc(var(--popover-arrow-width) * -1);
|
||||
border-top-width: 0;
|
||||
border-bottom-color: var(--popover-arrow-color);
|
||||
}
|
||||
.popover.left .arrow {
|
||||
top: 50%;
|
||||
right: calc(var(--popover-arrow-outer-width) * -1);
|
||||
margin-top: calc(var(--popover-arrow-outer-width) * -1);
|
||||
border-right-width: 0;
|
||||
border-left-color: var(--popover-arrow-outer-color);
|
||||
}
|
||||
.popover.left .arrow:after {
|
||||
right: 1px;
|
||||
border-right-width: 0;
|
||||
border-left-color: var(--popover-arrow-color);
|
||||
bottom: calc(var(--popover-arrow-width) * -1);
|
||||
}
|
|
@ -1,85 +0,0 @@
|
|||
/*
|
||||
Progress bars
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* ANIMATIONS */
|
||||
@keyframes progress-bar-stripes {
|
||||
from { background-position: 40px 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
/* THE BARS */
|
||||
|
||||
/* Outer container */
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
height: var(--base-line-height);
|
||||
margin-bottom: var(--base-line-height);
|
||||
background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Bar of progress */
|
||||
.progress .bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
color: var(--white);
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
background-image: linear-gradient(to bottom, #149bdf, #0480be);
|
||||
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
box-sizing: border-box;
|
||||
transition: width .6s ease;
|
||||
}
|
||||
.progress .bar + .bar {
|
||||
box-shadow: inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
/* Striped bars */
|
||||
.progress-striped .bar {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
/* Call animation for the active one */
|
||||
.progress.active .bar {
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
|
||||
/* Danger (red) */
|
||||
.progress-danger .bar, .progress .bar-danger {
|
||||
background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
|
||||
}
|
||||
.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
/* Success (green) */
|
||||
.progress-success .bar, .progress .bar-success {
|
||||
background-image: linear-gradient(to bottom, #62c462, #57a957);
|
||||
}
|
||||
.progress-success.progress-striped .bar, .progress-striped .bar-success {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
/* Info (teal) */
|
||||
.progress-info .bar, .progress .bar-info {
|
||||
background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
|
||||
}
|
||||
.progress-info.progress-striped .bar, .progress-striped .bar-info {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
/* Warning (orange) */
|
||||
.progress-warning .bar, .progress .bar-warning {
|
||||
background-image: linear-gradient(to bottom, #fbb450, var(--orange));
|
||||
}
|
||||
.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
203
css/reset.css
203
css/reset.css
|
@ -1,203 +0,0 @@
|
|||
/*
|
||||
Browser style reset
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Display block for HTML5 elements */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Media elements */
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Base settings */
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/* Hover & Active */
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
img {
|
||||
/* Responsive images */
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Prevent max-width from affecting maps */
|
||||
.map-canvas img,
|
||||
.google-maps img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label,
|
||||
select,
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
box-sizing: content-box;
|
||||
-webkit-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
color: #000 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/* Don't show links for images, or javascript/internal links */
|
||||
.ir a:after,
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 0.5cm;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
98
css/responsive-1200px-min.css
vendored
98
css/responsive-1200px-min.css
vendored
|
@ -1,98 +0,0 @@
|
|||
/*
|
||||
Responsive: Large desktop and up
|
||||
========================================
|
||||
*/
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
/* Fixed grid */
|
||||
.row {
|
||||
margin-left: calc(var(--grid-gutter-width-1200) * -1);
|
||||
}
|
||||
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
margin-left: var(--grid-gutter-width-1200);
|
||||
}
|
||||
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: var(--grid-row-width-1200);
|
||||
}
|
||||
|
||||
.span12 { width: var(--grid-row-width-1200); }
|
||||
.span11 { width: calc(var(--grid-column-width-1200) * 11 + var(--grid-gutter-width-1200) * 10); }
|
||||
.span10 { width: calc(var(--grid-column-width-1200) * 10 + var(--grid-gutter-width-1200) * 9); }
|
||||
.span9 { width: calc(var(--grid-column-width-1200) * 9 + var(--grid-gutter-width-1200) * 8); }
|
||||
.span8 { width: calc(var(--grid-column-width-1200) * 8 + var(--grid-gutter-width-1200) * 7); }
|
||||
.span7 { width: calc(var(--grid-column-width-1200) * 7 + var(--grid-gutter-width-1200) * 6); }
|
||||
.span6 { width: calc(var(--grid-column-width-1200) * 6 + var(--grid-gutter-width-1200) * 5); }
|
||||
.span5 { width: calc(var(--grid-column-width-1200) * 5 + var(--grid-gutter-width-1200) * 4); }
|
||||
.span4 { width: calc(var(--grid-column-width-1200) * 4 + var(--grid-gutter-width-1200) * 3); }
|
||||
.span3 { width: calc(var(--grid-column-width-1200) * 3 + var(--grid-gutter-width-1200) * 2); }
|
||||
.span2 { width: calc(var(--grid-column-width-1200) * 2 + var(--grid-gutter-width-1200)); }
|
||||
.span1 { width: var(--grid-column-width-1200); }
|
||||
|
||||
/* Fluid grid */
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
margin-left: var(--fluid-grid-gutter-width-1200);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row-fluid .span12 { width: 100%; }
|
||||
.row-fluid .span11 { width: calc(100% - var(--fluid-grid-column-width-1200) - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span10 { width: calc(100% - var(--fluid-grid-column-width-1200) * 2 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span9 { width: calc(100% - var(--fluid-grid-column-width-1200) * 3 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span8 { width: calc(100% - var(--fluid-grid-column-width-1200) * 4 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span7 { width: calc(100% - var(--fluid-grid-column-width-1200) * 5 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span6 { width: calc(100% - var(--fluid-grid-column-width-1200) * 6 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span5 { width: calc(100% - var(--fluid-grid-column-width-1200) * 7 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span4 { width: calc(100% - var(--fluid-grid-column-width-1200) * 8 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span3 { width: calc(100% - var(--fluid-grid-column-width-1200) * 9 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span2 { width: calc(100% - var(--fluid-grid-column-width-1200) * 10 - var(--fluid-grid-gutter-width-1200)); }
|
||||
.row-fluid .span1 { width: calc(100% - var(--fluid-grid-column-width-1200) * 11 - var(--fluid-grid-gutter-width-1200)); }
|
||||
|
||||
/* Input grid */
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 { width: var(--grid-row-width-1200); }
|
||||
|
||||
input.span11,
|
||||
textarea.span11,
|
||||
.uneditable-input.span11 { width: calc(var(--grid-column-width-1200) * 11 + var(--grid-gutter-width-1200) * 10); }
|
||||
|
||||
/* Continue for other spans... */
|
||||
|
||||
/* Thumbnails */
|
||||
.thumbnails {
|
||||
margin-left: calc(var(--grid-gutter-width-1200) * -1);
|
||||
}
|
||||
|
||||
.thumbnails > li {
|
||||
margin-left: var(--grid-gutter-width-1200);
|
||||
}
|
||||
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
|
@ -1,197 +0,0 @@
|
|||
/*
|
||||
Responsive: Landscape phone to desktop/tablet
|
||||
========================================
|
||||
*/
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* Padding to set content in a bit */
|
||||
body {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Negative indent the now static "fixed" navbar */
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom,
|
||||
.navbar-static-top {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
/* Remove padding on container given explicit padding set on body */
|
||||
.container-fluid {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
/* Reset horizontal dl */
|
||||
.dl-horizontal dt {
|
||||
float: none;
|
||||
clear: none;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
.dl-horizontal dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* GRID & CONTAINERS */
|
||||
/* Remove width from containers */
|
||||
.container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Fluid rows */
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Undo negative margin on rows and thumbnails */
|
||||
.row,
|
||||
.thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.thumbnails > li {
|
||||
float: none;
|
||||
margin-left: 0; /* Reset the default margin for all li elements when no .span* classes are present */
|
||||
}
|
||||
|
||||
/* Make all grid-sized elements block level again */
|
||||
[class*="span"],
|
||||
.uneditable-input[class*="span"],
|
||||
.row-fluid [class*="span"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.span12,
|
||||
.row-fluid .span12 {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row-fluid [class*="offset"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* FORM FIELDS */
|
||||
/* Make span* classes full width */
|
||||
.input-large,
|
||||
.input-xlarge,
|
||||
.input-xxlarge,
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* But don't let it screw up prepend/append inputs */
|
||||
.input-prepend input,
|
||||
.input-append input,
|
||||
.input-prepend input[class*="span"],
|
||||
.input-append input[class*="span"] {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.controls-row [class*="span"] + [class*="span"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal.fade {
|
||||
top: -100px;
|
||||
}
|
||||
|
||||
.modal.fade.in {
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* UP TO LANDSCAPE PHONE */
|
||||
@media (max-width: 480px) {
|
||||
/* Block level the page header small tag for readability */
|
||||
.page-header h1 small {
|
||||
display: block;
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
/* Update checkboxes for iOS */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Remove the horizontal form styles */
|
||||
.form-horizontal .control-label {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-top: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Move over all input controls and content */
|
||||
.form-horizontal .controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Move the options list down to align with labels */
|
||||
.form-horizontal .control-list {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Move over buttons in .form-actions to align with .controls */
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Medias */
|
||||
/* Reset float and spacing to stack */
|
||||
.media .pull-left,
|
||||
.media .pull-right {
|
||||
float: none;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Remove side margins since we stack instead of indent */
|
||||
.media-object {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.modal-header .close {
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
}
|
||||
|
||||
/* Carousel */
|
||||
.carousel-caption {
|
||||
position: static;
|
||||
}
|
||||
}
|
|
@ -1,89 +0,0 @@
|
|||
/*
|
||||
Responsive: Tablet to desktop
|
||||
========================================
|
||||
*/
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
/* Fixed grid */
|
||||
.row {
|
||||
margin-left: calc(var(--grid-gutter-width-768) * -1);
|
||||
}
|
||||
|
||||
[class*="span"] {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
margin-left: var(--grid-gutter-width-768);
|
||||
}
|
||||
|
||||
.container,
|
||||
.navbar-static-top .container,
|
||||
.navbar-fixed-top .container,
|
||||
.navbar-fixed-bottom .container {
|
||||
width: var(--grid-row-width-768);
|
||||
}
|
||||
|
||||
.span12 { width: var(--grid-row-width-768); }
|
||||
.span11 { width: calc(var(--grid-column-width-768) * 11 + var(--grid-gutter-width-768) * 10); }
|
||||
.span10 { width: calc(var(--grid-column-width-768) * 10 + var(--grid-gutter-width-768) * 9); }
|
||||
.span9 { width: calc(var(--grid-column-width-768) * 9 + var(--grid-gutter-width-768) * 8); }
|
||||
.span8 { width: calc(var(--grid-column-width-768) * 8 + var(--grid-gutter-width-768) * 7); }
|
||||
.span7 { width: calc(var(--grid-column-width-768) * 7 + var(--grid-gutter-width-768) * 6); }
|
||||
.span6 { width: calc(var(--grid-column-width-768) * 6 + var(--grid-gutter-width-768) * 5); }
|
||||
.span5 { width: calc(var(--grid-column-width-768) * 5 + var(--grid-gutter-width-768) * 4); }
|
||||
.span4 { width: calc(var(--grid-column-width-768) * 4 + var(--grid-gutter-width-768) * 3); }
|
||||
.span3 { width: calc(var(--grid-column-width-768) * 3 + var(--grid-gutter-width-768) * 2); }
|
||||
.span2 { width: calc(var(--grid-column-width-768) * 2 + var(--grid-gutter-width-768)); }
|
||||
.span1 { width: var(--grid-column-width-768); }
|
||||
|
||||
/* Fluid grid */
|
||||
.row-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-fluid [class*="span"] {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
margin-left: var(--fluid-grid-gutter-width-768);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row-fluid [class*="span"]:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row-fluid .span12 { width: 100%; }
|
||||
.row-fluid .span11 { width: calc(100% - var(--fluid-grid-column-width-768) - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span10 { width: calc(100% - var(--fluid-grid-column-width-768) * 2 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span9 { width: calc(100% - var(--fluid-grid-column-width-768) * 3 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span8 { width: calc(100% - var(--fluid-grid-column-width-768) * 4 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span7 { width: calc(100% - var(--fluid-grid-column-width-768) * 5 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span6 { width: calc(100% - var(--fluid-grid-column-width-768) * 6 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span5 { width: calc(100% - var(--fluid-grid-column-width-768) * 7 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span4 { width: calc(100% - var(--fluid-grid-column-width-768) * 8 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span3 { width: calc(100% - var(--fluid-grid-column-width-768) * 9 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span2 { width: calc(100% - var(--fluid-grid-column-width-768) * 10 - var(--fluid-grid-gutter-width-768)); }
|
||||
.row-fluid .span1 { width: calc(100% - var(--fluid-grid-column-width-768) * 11 - var(--fluid-grid-gutter-width-768)); }
|
||||
|
||||
/* Input grid */
|
||||
input,
|
||||
textarea,
|
||||
.uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
input.span12,
|
||||
textarea.span12,
|
||||
.uneditable-input.span12 { width: var(--grid-row-width-768); }
|
||||
|
||||
input.span11,
|
||||
textarea.span11,
|
||||
.uneditable-input.span11 { width: calc(var(--grid-column-width-768) * 11 + var(--grid-gutter-width-768) * 10); }
|
||||
|
||||
input.span10,
|
||||
textarea.span10,
|
||||
.uneditable-input.span10 { width: calc(var(--grid-column-width-768) * 10 + var(--grid-gutter-width-768) * 9); }
|
||||
|
||||
/* Continue for other spans... */
|
||||
}
|
|
@ -1,202 +0,0 @@
|
|||
/*
|
||||
Responsive: Navbar
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* TABLETS AND BELOW */
|
||||
@media (max-width: 979px) {
|
||||
/* UNFIX THE TOPBAR */
|
||||
/* Remove any padding from the body */
|
||||
body {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Unfix the navbars */
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
margin-bottom: var(--base-line-height);
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom {
|
||||
margin-top: var(--base-line-height);
|
||||
}
|
||||
|
||||
.navbar-fixed-top .navbar-inner,
|
||||
.navbar-fixed-bottom .navbar-inner {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Account for brand name */
|
||||
.navbar .brand {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
|
||||
/* COLLAPSIBLE NAVBAR */
|
||||
/* Nav collapse clears brand */
|
||||
.nav-collapse {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Block-level the nav */
|
||||
.nav-collapse .nav {
|
||||
float: none;
|
||||
margin: 0 0 calc(var(--base-line-height) / 2);
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > .divider-vertical {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-collapse .nav .nav-header {
|
||||
color: var(--navbar-text);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* Nav and dropdown links in navbar */
|
||||
.nav-collapse .nav > li > a,
|
||||
.nav-collapse .dropdown-menu a {
|
||||
padding: 9px 15px;
|
||||
font-weight: bold;
|
||||
color: var(--navbar-link-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.nav-collapse .btn {
|
||||
padding: 4px 10px 4px;
|
||||
font-weight: normal;
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
.nav-collapse .dropdown-menu li + li a {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > a:hover,
|
||||
.nav-collapse .nav > li > a:focus,
|
||||
.nav-collapse .dropdown-menu a:hover,
|
||||
.nav-collapse .dropdown-menu a:focus {
|
||||
background-color: var(--navbar-background);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav > li > a,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a {
|
||||
color: var(--navbar-inverse-link-color);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav > li > a:hover,
|
||||
.navbar-inverse .nav-collapse .nav > li > a:focus,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a:hover,
|
||||
.navbar-inverse .nav-collapse .dropdown-menu a:focus {
|
||||
background-color: var(--navbar-inverse-background);
|
||||
}
|
||||
|
||||
/* Buttons in the navbar */
|
||||
.nav-collapse.in .btn-group {
|
||||
margin-top: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Dropdowns in the navbar */
|
||||
.nav-collapse .dropdown-menu {
|
||||
position: static;
|
||||
top: auto;
|
||||
left: auto;
|
||||
float: none;
|
||||
display: none;
|
||||
max-width: none;
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nav-collapse .open > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-collapse .dropdown-menu:before,
|
||||
.nav-collapse .dropdown-menu:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-collapse .dropdown-menu .divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > .dropdown-menu:before,
|
||||
.nav-collapse .nav > li > .dropdown-menu:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Forms in navbar */
|
||||
.nav-collapse .navbar-form,
|
||||
.nav-collapse .navbar-search {
|
||||
float: none;
|
||||
padding: calc(var(--base-line-height) / 2) 15px;
|
||||
margin: calc(var(--base-line-height) / 2) 0;
|
||||
border-top: 1px solid var(--navbar-background);
|
||||
border-bottom: 1px solid var(--navbar-background);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .navbar-form,
|
||||
.navbar-inverse .nav-collapse .navbar-search {
|
||||
border-top-color: var(--navbar-inverse-background);
|
||||
border-bottom-color: var(--navbar-inverse-background);
|
||||
}
|
||||
|
||||
/* Pull right (secondary) nav content */
|
||||
.navbar .nav-collapse .nav.pull-right {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Hide everything in the navbar save .brand and toggle button */
|
||||
.nav-collapse,
|
||||
.nav-collapse.collapse {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Navbar button */
|
||||
.navbar .btn-navbar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* STATIC NAVBAR */
|
||||
.navbar-static .navbar-inner {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* DEFAULT DESKTOP */
|
||||
@media (min-width: 980px) {
|
||||
/* Required to make the collapsing navbar work on regular desktops */
|
||||
.nav-collapse.collapse {
|
||||
height: auto !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
|
@ -1,56 +0,0 @@
|
|||
/*
|
||||
Responsive: Utility classes
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* IE10 Metro responsive */
|
||||
/* Required for Windows 8 Metro split-screen snapping with IE10 */
|
||||
@viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
/* Hide from screenreaders and browsers */
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Visibility utilities */
|
||||
|
||||
/* For desktops */
|
||||
.visible-phone { display: none !important; }
|
||||
.visible-tablet { display: none !important; }
|
||||
.hidden-phone { }
|
||||
.hidden-tablet { }
|
||||
.hidden-desktop { display: none !important; }
|
||||
.visible-desktop { display: inherit !important; }
|
||||
|
||||
/* Tablets & small desktops only */
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
/* Hide everything else */
|
||||
.hidden-desktop { display: inherit !important; }
|
||||
.visible-desktop { display: none !important; }
|
||||
/* Show */
|
||||
.visible-tablet { display: inherit !important; }
|
||||
/* Hide */
|
||||
.hidden-tablet { display: none !important; }
|
||||
}
|
||||
|
||||
/* Phones only */
|
||||
@media (max-width: 767px) {
|
||||
/* Hide everything else */
|
||||
.hidden-desktop { display: inherit !important; }
|
||||
.visible-desktop { display: none !important; }
|
||||
/* Show */
|
||||
.visible-phone { display: inherit !important; }
|
||||
/* Hide */
|
||||
.hidden-phone { display: none !important; }
|
||||
}
|
||||
|
||||
/* Print utilities */
|
||||
.visible-print { display: none !important; }
|
||||
|
||||
@media print {
|
||||
.visible-print { display: inherit !important; }
|
||||
.hidden-print { display: none !important; }
|
||||
}
|
|
@ -1,18 +0,0 @@
|
|||
/*
|
||||
Bootstrap Responsive
|
||||
========================================
|
||||
|
||||
Originally designed and built by @mdo and @fat
|
||||
Converted to CSS variables
|
||||
*/
|
||||
|
||||
/*
|
||||
This file serves as the main import for responsive styles.
|
||||
In a CSS variables implementation, you would include:
|
||||
|
||||
1. responsive-utilities.css - Utility classes for responsive layouts
|
||||
2. responsive-1200px-min.css - Styles for large desktops
|
||||
3. responsive-768px-979px.css - Styles for tablets to regular desktops
|
||||
4. responsive-767px-max.css - Styles for phones to portrait tablets
|
||||
5. responsive-navbar.css - Responsive navigation bar
|
||||
*/
|
|
@ -1,46 +0,0 @@
|
|||
/*
|
||||
Scaffolding
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Body reset */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--base-font-family);
|
||||
font-size: var(--base-font-size);
|
||||
line-height: var(--base-line-height);
|
||||
color: var(--text-color);
|
||||
background-color: var(--body-background);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
/* Rounded corners */
|
||||
.img-rounded {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Add polaroid-esque trim */
|
||||
.img-polaroid {
|
||||
padding: 4px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.2);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
/* Perfect circle */
|
||||
.img-circle {
|
||||
border-radius: 500px; /* crank the border-radius so it works with most reasonably sized images */
|
||||
}
|
115
css/sprites.css
115
css/sprites.css
|
@ -1,115 +0,0 @@
|
|||
/*
|
||||
Sprites
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* ICONS */
|
||||
|
||||
/*
|
||||
All icons receive the styles of the <i> tag with a base class
|
||||
of .i and are then given a unique class to add width, height,
|
||||
and background-position. Your resulting HTML will look like
|
||||
<i class="icon-inbox"></i>.
|
||||
|
||||
For the white version of the icons, just add the .icon-white class:
|
||||
<i class="icon-inbox icon-white"></i>
|
||||
*/
|
||||
|
||||
[class^="icon-"],
|
||||
[class*=" icon-"] {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
vertical-align: text-top;
|
||||
background-image: var(--icon-sprite-path);
|
||||
background-position: 14px 14px;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
/* White icons with optional class, or on hover/focus/active states of certain elements */
|
||||
.icon-white,
|
||||
.nav-pills > .active > a > [class^="icon-"],
|
||||
.nav-pills > .active > a > [class*=" icon-"],
|
||||
.nav-list > .active > a > [class^="icon-"],
|
||||
.nav-list > .active > a > [class*=" icon-"],
|
||||
.navbar-inverse .nav > .active > a > [class^="icon-"],
|
||||
.navbar-inverse .nav > .active > a > [class*=" icon-"],
|
||||
.dropdown-menu > li > a:hover > [class^="icon-"],
|
||||
.dropdown-menu > li > a:focus > [class^="icon-"],
|
||||
.dropdown-menu > li > a:hover > [class*=" icon-"],
|
||||
.dropdown-menu > li > a:focus > [class*=" icon-"],
|
||||
.dropdown-menu > .active > a > [class^="icon-"],
|
||||
.dropdown-menu > .active > a > [class*=" icon-"],
|
||||
.dropdown-submenu:hover > a > [class^="icon-"],
|
||||
.dropdown-submenu:focus > a > [class^="icon-"],
|
||||
.dropdown-submenu:hover > a > [class*=" icon-"],
|
||||
.dropdown-submenu:focus > a > [class*=" icon-"] {
|
||||
background-image: var(--icon-white-sprite-path);
|
||||
}
|
||||
|
||||
.icon-glass { background-position: 0 0; }
|
||||
.icon-music { background-position: -24px 0; }
|
||||
.icon-search { background-position: -48px 0; }
|
||||
.icon-envelope { background-position: -72px 0; }
|
||||
.icon-heart { background-position: -96px 0; }
|
||||
.icon-star { background-position: -120px 0; }
|
||||
.icon-star-empty { background-position: -144px 0; }
|
||||
.icon-user { background-position: -168px 0; }
|
||||
.icon-film { background-position: -192px 0; }
|
||||
.icon-th-large { background-position: -216px 0; }
|
||||
.icon-th { background-position: -240px 0; }
|
||||
.icon-th-list { background-position: -264px 0; }
|
||||
.icon-ok { background-position: -288px 0; }
|
||||
.icon-remove { background-position: -312px 0; }
|
||||
.icon-zoom-in { background-position: -336px 0; }
|
||||
.icon-zoom-out { background-position: -360px 0; }
|
||||
.icon-off { background-position: -384px 0; }
|
||||
.icon-signal { background-position: -408px 0; }
|
||||
.icon-cog { background-position: -432px 0; }
|
||||
.icon-trash { background-position: -456px 0; }
|
||||
|
||||
.icon-home { background-position: 0 -24px; }
|
||||
.icon-file { background-position: -24px -24px; }
|
||||
.icon-time { background-position: -48px -24px; }
|
||||
.icon-road { background-position: -72px -24px; }
|
||||
.icon-download-alt { background-position: -96px -24px; }
|
||||
.icon-download { background-position: -120px -24px; }
|
||||
.icon-upload { background-position: -144px -24px; }
|
||||
.icon-inbox { background-position: -168px -24px; }
|
||||
.icon-play-circle { background-position: -192px -24px; }
|
||||
.icon-repeat { background-position: -216px -24px; }
|
||||
.icon-refresh { background-position: -240px -24px; }
|
||||
.icon-list-alt { background-position: -264px -24px; }
|
||||
.icon-lock { background-position: -287px -24px; } /* 1px off */
|
||||
.icon-flag { background-position: -312px -24px; }
|
||||
.icon-headphones { background-position: -336px -24px; }
|
||||
.icon-volume-off { background-position: -360px -24px; }
|
||||
.icon-volume-down { background-position: -384px -24px; }
|
||||
.icon-volume-up { background-position: -408px -24px; }
|
||||
.icon-qrcode { background-position: -432px -24px; }
|
||||
.icon-barcode { background-position: -456px -24px; }
|
||||
|
||||
.icon-tag { background-position: 0 -48px; }
|
||||
.icon-tags { background-position: -25px -48px; } /* 1px off */
|
||||
.icon-book { background-position: -48px -48px; }
|
||||
.icon-bookmark { background-position: -72px -48px; }
|
||||
.icon-print { background-position: -96px -48px; }
|
||||
.icon-camera { background-position: -120px -48px; }
|
||||
.icon-font { background-position: -144px -48px; }
|
||||
.icon-bold { background-position: -167px -48px; } /* 1px off */
|
||||
.icon-italic { background-position: -192px -48px; }
|
||||
.icon-text-height { background-position: -216px -48px; }
|
||||
.icon-text-width { background-position: -240px -48px; }
|
||||
.icon-align-left { background-position: -264px -48px; }
|
||||
.icon-align-center { background-position: -288px -48px; }
|
||||
.icon-align-right { background-position: -312px -48px; }
|
||||
.icon-align-justify { background-position: -336px -48px; }
|
||||
.icon-list { background-position: -360px -48px; }
|
||||
.icon-indent-left { background-position: -384px -48px; }
|
||||
.icon-indent-right { background-position: -408px -48px; }
|
||||
.icon-facetime-video { background-position: -432px -48px; }
|
||||
.icon-picture { background-position: -456px -48px; }
|
||||
|
||||
/* Continue with all the other icons... */
|
232
css/tables.css
232
css/tables.css
|
@ -1,232 +0,0 @@
|
|||
/*
|
||||
Tables
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* BASE TABLES */
|
||||
table {
|
||||
max-width: 100%;
|
||||
background-color: var(--table-background);
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* BASELINE STYLES */
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: var(--base-line-height);
|
||||
}
|
||||
|
||||
/* Cells */
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px;
|
||||
line-height: var(--base-line-height);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid var(--table-border);
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Bottom align for column headings */
|
||||
.table thead th {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
/* Remove top border from thead by default */
|
||||
.table caption + thead tr:first-child th,
|
||||
.table caption + thead tr:first-child td,
|
||||
.table colgroup + thead tr:first-child th,
|
||||
.table colgroup + thead tr:first-child td,
|
||||
.table thead:first-child tr:first-child th,
|
||||
.table thead:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/* Account for multiple tbody instances */
|
||||
.table tbody + tbody {
|
||||
border-top: 2px solid var(--table-border);
|
||||
}
|
||||
|
||||
/* Nesting */
|
||||
.table .table {
|
||||
background-color: var(--body-background);
|
||||
}
|
||||
|
||||
/* CONDENSED TABLE W/ HALF PADDING */
|
||||
.table-condensed th,
|
||||
.table-condensed td {
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
/* BORDERED VERSION */
|
||||
.table-bordered {
|
||||
border: 1px solid var(--table-border);
|
||||
border-collapse: separate;
|
||||
border-left: 0;
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
.table-bordered th,
|
||||
.table-bordered td {
|
||||
border-left: 1px solid var(--table-border);
|
||||
}
|
||||
|
||||
/* Prevent a double border */
|
||||
.table-bordered caption + thead tr:first-child th,
|
||||
.table-bordered caption + tbody tr:first-child th,
|
||||
.table-bordered caption + tbody tr:first-child td,
|
||||
.table-bordered colgroup + thead tr:first-child th,
|
||||
.table-bordered colgroup + tbody tr:first-child th,
|
||||
.table-bordered colgroup + tbody tr:first-child td,
|
||||
.table-bordered thead:first-child tr:first-child th,
|
||||
.table-bordered tbody:first-child tr:first-child th,
|
||||
.table-bordered tbody:first-child tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/* For first th/td in the first row in the first thead or tbody */
|
||||
.table-bordered thead:first-child tr:first-child > th:first-child,
|
||||
.table-bordered tbody:first-child tr:first-child > td:first-child,
|
||||
.table-bordered tbody:first-child tr:first-child > th:first-child {
|
||||
border-top-left-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* For last th/td in the first row in the first thead or tbody */
|
||||
.table-bordered thead:first-child tr:first-child > th:last-child,
|
||||
.table-bordered tbody:first-child tr:first-child > td:last-child,
|
||||
.table-bordered tbody:first-child tr:first-child > th:last-child {
|
||||
border-top-right-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* For first th/td in the last row in the last thead, tbody, and tfoot */
|
||||
.table-bordered thead:last-child tr:last-child > th:first-child,
|
||||
.table-bordered tbody:last-child tr:last-child > td:first-child,
|
||||
.table-bordered tbody:last-child tr:last-child > th:first-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > td:first-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > th:first-child {
|
||||
border-bottom-left-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* For last th/td in the last row in the last thead, tbody, and tfoot */
|
||||
.table-bordered thead:last-child tr:last-child > th:last-child,
|
||||
.table-bordered tbody:last-child tr:last-child > td:last-child,
|
||||
.table-bordered tbody:last-child tr:last-child > th:last-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > td:last-child,
|
||||
.table-bordered tfoot:last-child tr:last-child > th:last-child {
|
||||
border-bottom-right-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Clear border-radius for first and last td in the last row in the last tbody for table with tfoot */
|
||||
.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
/* Special fixes to round the left border on the first td/th */
|
||||
.table-bordered caption + thead tr:first-child th:first-child,
|
||||
.table-bordered caption + tbody tr:first-child td:first-child,
|
||||
.table-bordered colgroup + thead tr:first-child th:first-child,
|
||||
.table-bordered colgroup + tbody tr:first-child td:first-child {
|
||||
border-top-left-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
.table-bordered caption + thead tr:first-child th:last-child,
|
||||
.table-bordered caption + tbody tr:first-child td:last-child,
|
||||
.table-bordered colgroup + thead tr:first-child th:last-child,
|
||||
.table-bordered colgroup + tbody tr:first-child td:last-child {
|
||||
border-top-right-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* ZEBRA-STRIPING */
|
||||
/* Default zebra-stripe styles (alternating gray and transparent backgrounds) */
|
||||
.table-striped tbody > tr:nth-child(odd) > td,
|
||||
.table-striped tbody > tr:nth-child(odd) > th {
|
||||
background-color: var(--table-background-accent);
|
||||
}
|
||||
|
||||
/* HOVER EFFECT */
|
||||
/* Placed here since it has to come after the potential zebra striping */
|
||||
.table-hover tbody tr:hover > td,
|
||||
.table-hover tbody tr:hover > th {
|
||||
background-color: var(--table-background-hover);
|
||||
}
|
||||
|
||||
/* TABLE CELL SIZING */
|
||||
/* Reset default grid behavior */
|
||||
table td[class*="span"],
|
||||
table th[class*="span"],
|
||||
.row-fluid table td[class*="span"],
|
||||
.row-fluid table th[class*="span"] {
|
||||
display: table-cell;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Change the column widths to account for td/th padding */
|
||||
.table td.span1,
|
||||
.table th.span1 { width: calc((var(--grid-column-width) * 1) + var(--grid-gutter-width) * 0); }
|
||||
.table td.span2,
|
||||
.table th.span2 { width: calc((var(--grid-column-width) * 2) + var(--grid-gutter-width) * 1); }
|
||||
.table td.span3,
|
||||
.table th.span3 { width: calc((var(--grid-column-width) * 3) + var(--grid-gutter-width) * 2); }
|
||||
.table td.span4,
|
||||
.table th.span4 { width: calc((var(--grid-column-width) * 4) + var(--grid-gutter-width) * 3); }
|
||||
.table td.span5,
|
||||
.table th.span5 { width: calc((var(--grid-column-width) * 5) + var(--grid-gutter-width) * 4); }
|
||||
.table td.span6,
|
||||
.table th.span6 { width: calc((var(--grid-column-width) * 6) + var(--grid-gutter-width) * 5); }
|
||||
.table td.span7,
|
||||
.table th.span7 { width: calc((var(--grid-column-width) * 7) + var(--grid-gutter-width) * 6); }
|
||||
.table td.span8,
|
||||
.table th.span8 { width: calc((var(--grid-column-width) * 8) + var(--grid-gutter-width) * 7); }
|
||||
.table td.span9,
|
||||
.table th.span9 { width: calc((var(--grid-column-width) * 9) + var(--grid-gutter-width) * 8); }
|
||||
.table td.span10,
|
||||
.table th.span10 { width: calc((var(--grid-column-width) * 10) + var(--grid-gutter-width) * 9); }
|
||||
.table td.span11,
|
||||
.table th.span11 { width: calc((var(--grid-column-width) * 11) + var(--grid-gutter-width) * 10); }
|
||||
.table td.span12,
|
||||
.table th.span12 { width: calc((var(--grid-column-width) * 12) + var(--grid-gutter-width) * 11); }
|
||||
|
||||
/* TABLE BACKGROUNDS */
|
||||
/* Exact selectors below required to override .table-striped */
|
||||
|
||||
.table tbody tr.success > td {
|
||||
background-color: var(--success-background);
|
||||
}
|
||||
|
||||
.table tbody tr.error > td {
|
||||
background-color: var(--error-background);
|
||||
}
|
||||
|
||||
.table tbody tr.warning > td {
|
||||
background-color: var(--warning-background);
|
||||
}
|
||||
|
||||
.table tbody tr.info > td {
|
||||
background-color: var(--info-background);
|
||||
}
|
||||
|
||||
/* Hover states for .table-hover */
|
||||
.table-hover tbody tr.success:hover > td {
|
||||
background-color: color-mix(in srgb, var(--success-background), black 5%);
|
||||
}
|
||||
|
||||
.table-hover tbody tr.error:hover > td {
|
||||
background-color: color-mix(in srgb, var(--error-background), black 5%);
|
||||
}
|
||||
|
||||
.table-hover tbody tr.warning:hover > td {
|
||||
background-color: color-mix(in srgb, var(--warning-background), black 5%);
|
||||
}
|
||||
|
||||
.table-hover tbody tr.info:hover > td {
|
||||
background-color: color-mix(in srgb, var(--info-background), black 5%);
|
||||
}
|
|
@ -1,127 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Buttons · Bootstrap</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="..//bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<link href="../bootstrap-responsive.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h2>Dropups</h2>
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn">Dropup</button>
|
||||
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-primary">Dropup</button>
|
||||
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-danger">Dropup</button>
|
||||
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-warning">Dropup</button>
|
||||
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-success">Dropup</button>
|
||||
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-info">Dropup</button>
|
||||
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button class="btn btn-inverse">Dropup</button>
|
||||
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../docs/assets/js/jquery.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-button.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,150 +0,0 @@
|
|||
/*!
|
||||
* Bootstrap CSS Tests
|
||||
*/
|
||||
|
||||
|
||||
/* Remove background image */
|
||||
body {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
/* Space out subhead */
|
||||
.subhead {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
/*h4 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
*/
|
||||
|
||||
.type-test {
|
||||
margin-bottom: 20px;
|
||||
padding: 0 20px 20px;
|
||||
background: url(../../docs/assets/img/grid-baseline-20px.png);
|
||||
}
|
||||
.type-test h1,
|
||||
.type-test h2,
|
||||
.type-test h3,
|
||||
.type-test h4,
|
||||
.type-test h5,
|
||||
.type-test h6 {
|
||||
background-color: rgba(255,0,0,.2);
|
||||
}
|
||||
|
||||
|
||||
/* colgroup tests */
|
||||
.col1 {
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
.col2 {
|
||||
background-color: rgba(0,255,0,.1);
|
||||
}
|
||||
.col3 {
|
||||
background-color: rgba(0,0,255,.1);
|
||||
}
|
||||
|
||||
|
||||
/* Fluid row inputs */
|
||||
#rowInputs .row > [class*=span],
|
||||
#fluidRowInputs .row-fluid > [class*=span] {
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
|
||||
|
||||
/* Fluid grid */
|
||||
.fluid-grid {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
.fluid-grid .row {
|
||||
height: 40px;
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
.fluid-grid .span1 {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
|
||||
/* Gradients */
|
||||
|
||||
[class^="gradient-"] {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
margin: 20px 0;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.gradient-horizontal {
|
||||
background-color: #333333;
|
||||
background-image: -moz-linear-gradient(left, #555555, #333333);
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333));
|
||||
background-image: -webkit-linear-gradient(left, #555555, #333333);
|
||||
background-image: -o-linear-gradient(left, #555555, #333333);
|
||||
background-image: linear-gradient(to right, #555555, #333333);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
|
||||
}
|
||||
|
||||
.gradient-vertical {
|
||||
background-color: #474747;
|
||||
background-image: -moz-linear-gradient(top, #555555, #333333);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
|
||||
background-image: -webkit-linear-gradient(top, #555555, #333333);
|
||||
background-image: -o-linear-gradient(top, #555555, #333333);
|
||||
background-image: linear-gradient(to bottom, #555555, #333333);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
|
||||
}
|
||||
|
||||
.gradient-directional {
|
||||
background-color: #333333;
|
||||
background-image: -moz-linear-gradient(45deg, #555555, #333333);
|
||||
background-image: -webkit-linear-gradient(45deg, #555555, #333333);
|
||||
background-image: -o-linear-gradient(45deg, #555555, #333333);
|
||||
background-image: linear-gradient(45deg, #555555, #333333);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.gradient-vertical-three {
|
||||
background-color: #8940a5;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
|
||||
background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0);
|
||||
}
|
||||
|
||||
.gradient-radial {
|
||||
background-color: #333333;
|
||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333));
|
||||
background-image: -webkit-radial-gradient(circle, #555555, #333333);
|
||||
background-image: -moz-radial-gradient(circle, #555555, #333333);
|
||||
background-image: -o-radial-gradient(circle, #555555, #333333);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.gradient-striped {
|
||||
background-color: #555555;
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
|
||||
.gradient-horizontal-three {
|
||||
background-color: #00b3ee;
|
||||
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
|
||||
background-image: -webkit-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: -moz-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: -o-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-image: linear-gradient(to right, #00b3ee, #7a43b6 50%, #c3325f);
|
||||
background-repeat: no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b3ee', endColorstr='#c3325f', GradientType=0);
|
||||
}
|
File diff suppressed because it is too large
Load Diff
|
@ -1,71 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form class="container">
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Fixed grid</h1>
|
||||
</div>
|
||||
|
||||
<h3>Vertical alignment</h3>
|
||||
<input type="text" class="span2" placeholder="span2">
|
||||
<select class="span2"><option>span2</option></select>
|
||||
<span class="uneditable-input span2">span1</span>
|
||||
|
||||
<h3>Width across elements</h3>
|
||||
<div>
|
||||
<input type="text" class="span2" placeholder="span2">
|
||||
</div>
|
||||
<div>
|
||||
<select class="span2"><option>span2</option></select>
|
||||
</div>
|
||||
<div>
|
||||
<span class="uneditable-input span2">span2</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Fluid grid</h1>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<input type="text" class="span2" placeholder="span2">
|
||||
<select class="span2"><option>span2</option></select>
|
||||
<span class="uneditable-input span2">span1</span>
|
||||
</div>
|
||||
|
||||
</form> <!-- /container -->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,179 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form class="container">
|
||||
|
||||
<div class="page-header">
|
||||
<h1>Form controls</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
|
||||
<label>Select</label>
|
||||
<select>
|
||||
<option>Select</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
|
||||
<hr>
|
||||
|
||||
<label>textarea</label>
|
||||
<textarea>Textarea</textarea>
|
||||
|
||||
<hr>
|
||||
|
||||
<label>text</label>
|
||||
<input type="text" value="Text input">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>password</label>
|
||||
<input type="password" value="Password input">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>checkbox</label>
|
||||
<input type="checkbox" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>radio</label>
|
||||
<input type="radio" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>button</label>
|
||||
<input type="button" value="Button">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>submit</label>
|
||||
<input type="submit" value="Submit">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>reset</label>
|
||||
<input type="reset" value="Reset">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
<div class="span4">
|
||||
|
||||
<label>file</label>
|
||||
<input type="file" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>hidden</label>
|
||||
<input type="hidden" value="hidden">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>image</label>
|
||||
<input type="image" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>datetime</label>
|
||||
<input type="datetime" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>datetime-local</label>
|
||||
<input type="datetime-local" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>date</label>
|
||||
<input type="date" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>month</label>
|
||||
<input type="month" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>time</label>
|
||||
<input type="time" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>week</label>
|
||||
<input type="week" value="">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
<div class="span4">
|
||||
|
||||
<label>number</label>
|
||||
<input type="number" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>range</label>
|
||||
<input type="range" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>email</label>
|
||||
<input type="email" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>url</label>
|
||||
<input type="url" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>search</label>
|
||||
<input type="search" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>tel</label>
|
||||
<input type="tel" value="">
|
||||
|
||||
<hr>
|
||||
|
||||
<label>color</label>
|
||||
<input type="color" value="">
|
||||
|
||||
</div><!-- /span4 -->
|
||||
</div><!-- /row -->
|
||||
|
||||
</form> <!-- /container -->
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,104 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Fixed navbar -->
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="./navbar.html">Default</a></li>
|
||||
<li><a href="./navbar-static-top.html">Static top</a></li>
|
||||
<li class="active"><a href="./navbar-fixed-top.html">Fixed top</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Navbar example</h1>
|
||||
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../docs/assets/js/jquery.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-button.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,107 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.hero-unit {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Static navbar -->
|
||||
<div class="navbar navbar-static-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="./navbar.html">Default</a></li>
|
||||
<li class="active"><a href="./navbar-static-top.html">Static top</a></li>
|
||||
<li><a href="./navbar-fixed-top.html">Fixed top</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Navbar example</h1>
|
||||
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../docs/assets/js/jquery.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-button.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,107 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap, from Twitter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.navbar {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
|
||||
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Static navbar -->
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav pull-right">
|
||||
<li class="active"><a href="./navbar.html">Default</a></li>
|
||||
<li><a href="./navbar-static-top.html">Static top</a></li>
|
||||
<li><a href="./navbar-fixed-top.html">Fixed top</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main hero unit for a primary marketing message or call to action -->
|
||||
<div class="hero-unit">
|
||||
<h1>Navbar example</h1>
|
||||
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- Le javascript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="../../docs/assets/js/jquery.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-button.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
|
||||
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,61 +0,0 @@
|
|||
/*
|
||||
Thumbnails
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files */
|
||||
|
||||
/* Make wrapper ul behave like the grid */
|
||||
.thumbnails {
|
||||
margin-left: calc(var(--grid-gutter-width) * -1);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.thumbnails::after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Fluid rows have no left margin */
|
||||
.row-fluid .thumbnails {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Float li to make thumbnails appear in a row */
|
||||
.thumbnails > li {
|
||||
float: left; /* Explicity set the float since we don't require .span* classes */
|
||||
margin-bottom: var(--base-line-height);
|
||||
margin-left: var(--grid-gutter-width);
|
||||
}
|
||||
|
||||
/* The actual thumbnail (can be `a` or `div`) */
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
line-height: var(--base-line-height);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.055);
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Add a hover/focus state for linked versions only */
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus {
|
||||
border-color: var(--link-color);
|
||||
box-shadow: 0 1px 4px rgba(0,105,214,.25);
|
||||
}
|
||||
|
||||
/* Images and captions */
|
||||
.thumbnail > img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
color: var(--gray);
|
||||
}
|
|
@ -1,91 +0,0 @@
|
|||
/*
|
||||
Tooltips
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Base class */
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: var(--zindex-tooltip);
|
||||
display: block;
|
||||
visibility: visible;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tooltip.in {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tooltip.top {
|
||||
margin-top: -3px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.tooltip.right {
|
||||
margin-left: 3px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.tooltip.bottom {
|
||||
margin-top: 3px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.tooltip.left {
|
||||
margin-left: -3px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/* Wrapper for the tooltip content */
|
||||
.tooltip-inner {
|
||||
max-width: 200px;
|
||||
padding: 8px;
|
||||
color: var(--tooltip-color);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: var(--tooltip-background);
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Arrows */
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.tooltip.top .tooltip-arrow {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: calc(var(--tooltip-arrow-width) * -1);
|
||||
border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
|
||||
border-top-color: var(--tooltip-arrow-color);
|
||||
}
|
||||
|
||||
.tooltip.right .tooltip-arrow {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: calc(var(--tooltip-arrow-width) * -1);
|
||||
border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
|
||||
border-right-color: var(--tooltip-arrow-color);
|
||||
}
|
||||
|
||||
.tooltip.left .tooltip-arrow {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: calc(var(--tooltip-arrow-width) * -1);
|
||||
border-width: var(--tooltip-arrow-width) 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
|
||||
border-left-color: var(--tooltip-arrow-color);
|
||||
}
|
||||
|
||||
.tooltip.bottom .tooltip-arrow {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: calc(var(--tooltip-arrow-width) * -1);
|
||||
border-width: 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
|
||||
border-bottom-color: var(--tooltip-arrow-color);
|
||||
}
|
323
css/type.css
323
css/type.css
|
@ -1,323 +0,0 @@
|
|||
/*
|
||||
Typography
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Body text */
|
||||
p {
|
||||
margin: 0 0 calc(var(--base-line-height) / 2);
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin-bottom: var(--base-line-height);
|
||||
font-size: calc(var(--base-font-size) * 1.5);
|
||||
font-weight: 200;
|
||||
line-height: calc(var(--base-line-height) * 1.5);
|
||||
}
|
||||
|
||||
/* Emphasis & misc */
|
||||
small {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.muted {
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
a.muted:hover,
|
||||
a.muted:focus {
|
||||
color: color-mix(in srgb, var(--gray-light), black 10%);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
a.text-warning:hover,
|
||||
a.text-warning:focus {
|
||||
color: color-mix(in srgb, var(--warning-text), black 10%);
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
a.text-error:hover,
|
||||
a.text-error:focus {
|
||||
color: color-mix(in srgb, var(--error-text), black 10%);
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: var(--info-text);
|
||||
}
|
||||
|
||||
a.text-info:hover,
|
||||
a.text-info:focus {
|
||||
color: color-mix(in srgb, var(--info-text), black 10%);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
a.text-success:hover,
|
||||
a.text-success:focus {
|
||||
color: color-mix(in srgb, var(--success-text), black 10%);
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: calc(var(--base-line-height) / 2) 0;
|
||||
font-family: var(--headings-font-family);
|
||||
font-weight: var(--headings-font-weight);
|
||||
line-height: var(--base-line-height);
|
||||
color: var(--headings-color);
|
||||
text-rendering: optimizelegibility; /* Fix the character spacing for headings */
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h2 small,
|
||||
h3 small,
|
||||
h4 small,
|
||||
h5 small,
|
||||
h6 small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: calc(var(--base-line-height) * 2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: calc(var(--base-font-size) * 2.75); /* ~38px */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: calc(var(--base-font-size) * 2.25); /* ~32px */
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: calc(var(--base-font-size) * 1.75); /* ~24px */
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: calc(var(--base-font-size) * 1.25); /* ~18px */
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: calc(var(--base-font-size) * 0.85); /* ~12px */
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: calc(var(--base-font-size) * 1.75); /* ~24px */
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: calc(var(--base-font-size) * 1.25); /* ~18px */
|
||||
}
|
||||
|
||||
h3 small {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
h4 small {
|
||||
font-size: var(--base-font-size);
|
||||
}
|
||||
|
||||
/* Page header */
|
||||
.page-header {
|
||||
padding-bottom: calc((var(--base-line-height) / 2) - 1);
|
||||
margin: var(--base-line-height) 0 calc(var(--base-line-height) * 1.5);
|
||||
border-bottom: 1px solid var(--gray-lighter);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul, ol {
|
||||
padding: 0;
|
||||
margin: 0 0 calc(var(--base-line-height) / 2) 25px;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
/* Remove default list styles */
|
||||
ul.unstyled,
|
||||
ol.unstyled {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Single-line list items */
|
||||
ul.inline,
|
||||
ol.inline {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.inline > li,
|
||||
ol.inline > li {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/* Description Lists */
|
||||
dl {
|
||||
margin-bottom: var(--base-line-height);
|
||||
}
|
||||
|
||||
dt, dd {
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: calc(var(--base-line-height) / 2);
|
||||
}
|
||||
|
||||
/* Horizontal layout (like forms) */
|
||||
.dl-horizontal::after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dl-horizontal dt {
|
||||
float: left;
|
||||
width: calc(var(--horizontal-component-offset) - 20);
|
||||
clear: left;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dl-horizontal dd {
|
||||
margin-left: var(--horizontal-component-offset);
|
||||
}
|
||||
|
||||
/* MISC */
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
margin: var(--base-line-height) 0;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--hr-border);
|
||||
border-bottom: 1px solid var(--white);
|
||||
}
|
||||
|
||||
/* Abbreviations and acronyms */
|
||||
abbr[title],
|
||||
/* Added data-* attribute to help out our tooltip plugin */
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted var(--gray-light);
|
||||
}
|
||||
|
||||
abbr.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 0 0 var(--base-line-height);
|
||||
border-left: 5px solid var(--gray-lighter);
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
margin-bottom: 0;
|
||||
font-size: calc(var(--base-font-size) * 1.25);
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
blockquote small {
|
||||
display: block;
|
||||
line-height: var(--base-line-height);
|
||||
color: var(--gray-light);
|
||||
}
|
||||
|
||||
blockquote small::before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
|
||||
/* Float right with text-align: right */
|
||||
blockquote.pull-right {
|
||||
float: right;
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
border-right: 5px solid var(--gray-lighter);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
blockquote.pull-right p,
|
||||
blockquote.pull-right small {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
blockquote.pull-right small::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
blockquote.pull-right small::after {
|
||||
content: '\00A0 \2014';
|
||||
}
|
||||
|
||||
/* Quotes */
|
||||
q::before,
|
||||
q::after,
|
||||
blockquote::before,
|
||||
blockquote::after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Addresses */
|
||||
address {
|
||||
display: block;
|
||||
margin-bottom: var(--base-line-height);
|
||||
font-style: normal;
|
||||
line-height: var(--base-line-height);
|
||||
}
|
|
@ -1,32 +0,0 @@
|
|||
/*
|
||||
Utility classes
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Quick floats */
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Toggling content */
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Visibility */
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* For Affix plugin */
|
||||
.affix {
|
||||
position: fixed;
|
||||
}
|
|
@ -1,265 +0,0 @@
|
|||
/*
|
||||
Variables
|
||||
========================================
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Global values */
|
||||
|
||||
/* Grays */
|
||||
--black: #000;
|
||||
--gray-darker: #222;
|
||||
--gray-dark: #333;
|
||||
--gray: #555;
|
||||
--gray-light: #999;
|
||||
--gray-lighter: #eee;
|
||||
--white: #fff;
|
||||
|
||||
/* Accent colors */
|
||||
--blue: #049cdb;
|
||||
--blue-dark: #0064cd;
|
||||
--green: #46a546;
|
||||
--red: #9d261d;
|
||||
--yellow: #ffc40d;
|
||||
--orange: #f89406;
|
||||
--pink: #c3325f;
|
||||
--purple: #7a43b6;
|
||||
|
||||
/* Scaffolding */
|
||||
--body-background: var(--white);
|
||||
--text-color: var(--gray-dark);
|
||||
|
||||
/* Links */
|
||||
--link-color: #08c;
|
||||
--link-color-hover: #005580;
|
||||
/* darken(#08c, 15%) */
|
||||
|
||||
/* Typography */
|
||||
--sans-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--serif-font-family: Georgia, "Times New Roman", Times, serif;
|
||||
--mono-font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
||||
|
||||
--base-font-size: 14px;
|
||||
--base-font-family: var(--sans-font-family);
|
||||
--base-line-height: 20px;
|
||||
--alt-font-family: var(--serif-font-family);
|
||||
|
||||
--headings-font-family: inherit;
|
||||
--headings-font-weight: bold;
|
||||
--headings-color: inherit;
|
||||
|
||||
/* Component sizing */
|
||||
--font-size-large: calc(var(--base-font-size) * 1.25);
|
||||
/* ~18px */
|
||||
--font-size-small: calc(var(--base-font-size) * 0.85);
|
||||
/* ~12px */
|
||||
--font-size-mini: calc(var(--base-font-size) * 0.75);
|
||||
/* ~11px */
|
||||
|
||||
--padding-large: 11px 19px;
|
||||
--padding-small: 2px 10px;
|
||||
--padding-mini: 0 6px;
|
||||
|
||||
--base-border-radius: 4px;
|
||||
--border-radius-large: 6px;
|
||||
--border-radius-small: 3px;
|
||||
|
||||
/* Tables */
|
||||
--table-background: transparent;
|
||||
--table-background-accent: #f9f9f9;
|
||||
--table-background-hover: #f5f5f5;
|
||||
--table-border: #ddd;
|
||||
|
||||
/* Buttons */
|
||||
--btn-background: var(--white);
|
||||
--btn-background-highlight: #e6e6e6;
|
||||
/* darken(#fff, 10%) */
|
||||
--btn-border: #ccc;
|
||||
|
||||
--btn-primary-background: var(--link-color);
|
||||
--btn-primary-background-highlight: #04c;
|
||||
/* spin(#08c, 20%) */
|
||||
|
||||
--btn-info-background: #5bc0de;
|
||||
--btn-info-background-highlight: #2f96b4;
|
||||
|
||||
--btn-success-background: #62c462;
|
||||
--btn-success-background-highlight: #51a351;
|
||||
|
||||
--btn-warning-background: #fbb450;
|
||||
/* lighten(#f89406, 15%) */
|
||||
--btn-warning-background-highlight: var(--orange);
|
||||
|
||||
--btn-danger-background: #ee5f5b;
|
||||
--btn-danger-background-highlight: #bd362f;
|
||||
|
||||
--btn-inverse-background: #444;
|
||||
--btn-inverse-background-highlight: var(--gray-darker);
|
||||
|
||||
/* Forms */
|
||||
--input-background: var(--white);
|
||||
--input-border: #ccc;
|
||||
--input-border-radius: var(--base-border-radius);
|
||||
--input-disabled-background: var(--gray-lighter);
|
||||
--form-actions-background: #f5f5f5;
|
||||
--input-height: calc(var(--base-line-height) + 10px);
|
||||
|
||||
/* Dropdowns */
|
||||
--dropdown-background: var(--white);
|
||||
--dropdown-border: rgba(0, 0, 0, .2);
|
||||
--dropdown-divider-top: #e5e5e5;
|
||||
--dropdown-divider-bottom: var(--white);
|
||||
|
||||
--dropdown-link-color: var(--gray-dark);
|
||||
--dropdown-link-color-hover: var(--white);
|
||||
--dropdown-link-color-active: var(--white);
|
||||
|
||||
--dropdown-link-background-active: var(--link-color);
|
||||
--dropdown-link-background-hover: var(--dropdown-link-background-active);
|
||||
|
||||
/* Z-index master list */
|
||||
--zindex-dropdown: 1000;
|
||||
--zindex-popover: 1010;
|
||||
--zindex-tooltip: 1030;
|
||||
--zindex-fixed-navbar: 1030;
|
||||
--zindex-modal-backdrop: 1040;
|
||||
--zindex-modal: 1050;
|
||||
|
||||
/* Sprite icons path */
|
||||
--icon-sprite-path: "../img/glyphicons-halflings.png";
|
||||
--icon-white-sprite-path: "../img/glyphicons-halflings-white.png";
|
||||
|
||||
/* Input placeholder text color */
|
||||
--placeholder-text: var(--gray-light);
|
||||
|
||||
/* Hr border color */
|
||||
--hr-border: var(--gray-lighter);
|
||||
|
||||
/* Horizontal forms & lists */
|
||||
--horizontal-component-offset: 180px;
|
||||
|
||||
/* Wells */
|
||||
--well-background: #f5f5f5;
|
||||
|
||||
/* Navbar */
|
||||
--navbar-collapse-width: 979px;
|
||||
--navbar-collapse-desktop-width: calc(var(--navbar-collapse-width) + 1);
|
||||
|
||||
--navbar-height: 40px;
|
||||
--navbar-background-highlight: #ffffff;
|
||||
--navbar-background: #f5f5f5;
|
||||
/* darken(#ffffff, 5%) */
|
||||
--navbar-border: #d4d4d4;
|
||||
/* darken(#f5f5f5, 12%) */
|
||||
|
||||
--navbar-text: #777;
|
||||
--navbar-link-color: #777;
|
||||
--navbar-link-color-hover: var(--gray-dark);
|
||||
--navbar-link-color-active: var(--gray);
|
||||
--navbar-link-background-hover: transparent;
|
||||
--navbar-link-background-active: #e6e6e6;
|
||||
/* darken(#f5f5f5, 5%) */
|
||||
|
||||
--navbar-brand-color: var(--navbar-link-color);
|
||||
|
||||
/* Inverted navbar */
|
||||
--navbar-inverse-background: #111111;
|
||||
--navbar-inverse-background-highlight: #222222;
|
||||
--navbar-inverse-border: #252525;
|
||||
|
||||
--navbar-inverse-text: var(--gray-light);
|
||||
--navbar-inverse-link-color: var(--gray-light);
|
||||
--navbar-inverse-link-color-hover: var(--white);
|
||||
--navbar-inverse-link-color-active: var(--navbar-inverse-link-color-hover);
|
||||
--navbar-inverse-link-background-hover: transparent;
|
||||
--navbar-inverse-link-background-active: var(--navbar-inverse-background);
|
||||
|
||||
--navbar-inverse-search-background: #2c2c2c;
|
||||
/* lighten(#111111, 25%) */
|
||||
--navbar-inverse-search-background-focus: var(--white);
|
||||
--navbar-inverse-search-border: var(--navbar-inverse-background);
|
||||
--navbar-inverse-search-placeholder-color: #ccc;
|
||||
|
||||
--navbar-inverse-brand-color: var(--navbar-inverse-link-color);
|
||||
|
||||
/* Pagination */
|
||||
--pagination-background: #fff;
|
||||
--pagination-border: #ddd;
|
||||
--pagination-active-background: #f5f5f5;
|
||||
|
||||
/* Hero unit */
|
||||
--hero-unit-background: var(--gray-lighter);
|
||||
--hero-unit-heading-color: inherit;
|
||||
--hero-unit-lead-color: inherit;
|
||||
|
||||
/* Form states and alerts */
|
||||
--warning-text: #c09853;
|
||||
--warning-background: #fcf8e3;
|
||||
--warning-border: #fbeed5;
|
||||
/* darken(spin(#fcf8e3, -10), 3%) */
|
||||
|
||||
--error-text: #b94a48;
|
||||
--error-background: #f2dede;
|
||||
--error-border: #eed3d7;
|
||||
/* darken(spin(#f2dede, -10), 3%) */
|
||||
|
||||
--success-text: #468847;
|
||||
--success-background: #dff0d8;
|
||||
--success-border: #d6e9c6;
|
||||
/* darken(spin(#dff0d8, -10), 5%) */
|
||||
|
||||
--info-text: #3a87ad;
|
||||
--info-background: #d9edf7;
|
||||
--info-border: #bce8f1;
|
||||
/* darken(spin(#d9edf7, -10), 7%) */
|
||||
|
||||
/* Tooltips and popovers */
|
||||
--tooltip-color: #fff;
|
||||
--tooltip-background: #000;
|
||||
--tooltip-arrow-width: 5px;
|
||||
--tooltip-arrow-color: var(--tooltip-background);
|
||||
|
||||
--popover-background: #fff;
|
||||
--popover-arrow-width: 10px;
|
||||
--popover-arrow-color: #fff;
|
||||
--popover-title-background: #f7f7f7;
|
||||
/* darken(#fff, 3%) */
|
||||
|
||||
/* Special enhancement for popovers */
|
||||
--popover-arrow-outer-width: calc(var(--popover-arrow-width) + 1);
|
||||
--popover-arrow-outer-color: rgba(0, 0, 0, .25);
|
||||
|
||||
/* GRID */
|
||||
--grid-columns: 12;
|
||||
--grid-column-width: 60px;
|
||||
--grid-gutter-width: 20px;
|
||||
--grid-row-width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1)));
|
||||
|
||||
/* 1200px min */
|
||||
--grid-column-width-1200: 70px;
|
||||
--grid-gutter-width-1200: 30px;
|
||||
--grid-row-width-1200: calc((var(--grid-columns) * var(--grid-column-width-1200)) + (var(--grid-gutter-width-1200) * (var(--grid-columns) - 1)));
|
||||
|
||||
/* 768px-979px */
|
||||
--grid-column-width-768: 42px;
|
||||
--grid-gutter-width-768: 20px;
|
||||
--grid-row-width-768: calc((var(--grid-columns) * var(--grid-column-width-768)) + (var(--grid-gutter-width-768) * (var(--grid-columns) - 1)));
|
||||
|
||||
/* Fluid grid */
|
||||
--fluid-grid-column-width: 6.38298%;
|
||||
/* percentage(60px/940px) */
|
||||
--fluid-grid-gutter-width: 2.12766%;
|
||||
/* percentage(20px/940px) */
|
||||
|
||||
/* 1200px min */
|
||||
--fluid-grid-column-width-1200: 5.98291%;
|
||||
/* percentage(70px/1170px) */
|
||||
--fluid-grid-gutter-width-1200: 2.5641%;
|
||||
/* percentage(30px/1170px) */
|
||||
|
||||
/* 768px-979px */
|
||||
--fluid-grid-column-width-768: 5.80111%;
|
||||
/* percentage(42px/724px) */
|
||||
--fluid-grid-gutter-width-768: 2.76243%;
|
||||
/* percentage(20px/724px) */
|
||||
}
|
|
@ -1,31 +0,0 @@
|
|||
/*
|
||||
Wells
|
||||
========================================
|
||||
*/
|
||||
|
||||
/* Base class */
|
||||
.well {
|
||||
min-height: 20px;
|
||||
padding: 19px;
|
||||
margin-bottom: 20px;
|
||||
background-color: var(--well-background);
|
||||
border: 1px solid color-mix(in srgb, var(--well-background) 93%, black);
|
||||
border-radius: var(--base-border-radius);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.well blockquote {
|
||||
border-color: #ddd;
|
||||
border-color: rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.well-large {
|
||||
padding: 24px;
|
||||
border-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
.well-small {
|
||||
padding: 9px;
|
||||
border-radius: var(--border-radius-small);
|
||||
}
|
Loading…
Reference in New Issue
Block a user