diff --git a/css/accordion.css b/css/accordion.css
new file mode 100644
index 0000000..00439c5
--- /dev/null
+++ b/css/accordion.css
@@ -0,0 +1,36 @@
+/*
+ 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;
+}
diff --git a/css/accordion.less b/css/accordion.less
deleted file mode 100644
index d63523b..0000000
--- a/css/accordion.less
+++ /dev/null
@@ -1,34 +0,0 @@
-//
-// Accordion
-// --------------------------------------------------
-
-
-// Parent container
-.accordion {
- margin-bottom: @baseLineHeight;
-}
-
-// Group == heading + body
-.accordion-group {
- margin-bottom: 2px;
- border: 1px solid #e5e5e5;
- .border-radius(@baseBorderRadius);
-}
-.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;
-}
diff --git a/css/alerts.css b/css/alerts.css
new file mode 100644
index 0000000..150a907
--- /dev/null
+++ b/css/alerts.css
@@ -0,0 +1,80 @@
+/*
+ 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;
+}
diff --git a/css/alerts.less b/css/alerts.less
deleted file mode 100644
index 0116b19..0000000
--- a/css/alerts.less
+++ /dev/null
@@ -1,79 +0,0 @@
-//
-// Alerts
-// --------------------------------------------------
-
-
-// Base styles
-// -------------------------
-
-.alert {
- padding: 8px 35px 8px 14px;
- margin-bottom: @baseLineHeight;
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
- background-color: @warningBackground;
- border: 1px solid @warningBorder;
- .border-radius(@baseBorderRadius);
-}
-.alert,
-.alert h4 {
- // Specified for the h4 to prevent conflicts of changing @headingsColor
- color: @warningText;
-}
-.alert h4 {
- margin: 0;
-}
-
-// Adjust close link position
-.alert .close {
- position: relative;
- top: -2px;
- right: -21px;
- line-height: @baseLineHeight;
-}
-
-
-// Alternate styles
-// -------------------------
-
-.alert-success {
- background-color: @successBackground;
- border-color: @successBorder;
- color: @successText;
-}
-.alert-success h4 {
- color: @successText;
-}
-.alert-danger,
-.alert-error {
- background-color: @errorBackground;
- border-color: @errorBorder;
- color: @errorText;
-}
-.alert-danger h4,
-.alert-error h4 {
- color: @errorText;
-}
-.alert-info {
- background-color: @infoBackground;
- border-color: @infoBorder;
- color: @infoText;
-}
-.alert-info h4 {
- color: @infoText;
-}
-
-
-// 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;
-}
diff --git a/css/bootstrap.css b/css/bootstrap.css
new file mode 100644
index 0000000..831de14
--- /dev/null
+++ b/css/bootstrap.css
@@ -0,0 +1,45 @@
+/*
+ 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";
diff --git a/css/bootstrap.less b/css/bootstrap.less
deleted file mode 100644
index 3eabae1..0000000
--- a/css/bootstrap.less
+++ /dev/null
@@ -1,63 +0,0 @@
-/*!
- * Bootstrap v2.3.2
- *
- * Copyright 2013 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world by @mdo and @fat.
- */
-
-// Core variables and mixins
-@import "variables.less"; // Modify this for custom colors, font-sizes, etc
-@import "mixins.less";
-
-// CSS Reset
-@import "reset.less";
-
-// Grid system and page structure
-@import "scaffolding.less";
-@import "grid.less";
-@import "layouts.less";
-
-// Base CSS
-@import "type.less";
-@import "code.less";
-@import "forms.less";
-@import "tables.less";
-
-// Components: common
-@import "sprites.less";
-@import "dropdowns.less";
-@import "wells.less";
-@import "component-animations.less";
-@import "close.less";
-
-// Components: Buttons & Alerts
-@import "buttons.less";
-@import "button-groups.less";
-@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
-
-// Components: Nav
-@import "navs.less";
-@import "navbar.less";
-@import "breadcrumbs.less";
-@import "pagination.less";
-@import "pager.less";
-
-// Components: Popovers
-@import "modals.less";
-@import "tooltip.less";
-@import "popovers.less";
-
-// Components: Misc
-@import "thumbnails.less";
-@import "media.less";
-@import "labels-badges.less";
-@import "progress-bars.less";
-@import "accordion.less";
-@import "carousel.less";
-@import "hero-unit.less";
-
-// Utility classes
-@import "utilities.less"; // Has to be last to override when necessary
diff --git a/css/breadcrumbs.css b/css/breadcrumbs.css
new file mode 100644
index 0000000..da90539
--- /dev/null
+++ b/css/breadcrumbs.css
@@ -0,0 +1,26 @@
+/*
+ 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);
+}
diff --git a/css/breadcrumbs.less b/css/breadcrumbs.less
deleted file mode 100644
index f753df6..0000000
--- a/css/breadcrumbs.less
+++ /dev/null
@@ -1,24 +0,0 @@
-//
-// Breadcrumbs
-// --------------------------------------------------
-
-
-.breadcrumb {
- padding: 8px 15px;
- margin: 0 0 @baseLineHeight;
- list-style: none;
- background-color: #f5f5f5;
- .border-radius(@baseBorderRadius);
- > li {
- display: inline-block;
- .ie7-inline-block();
- text-shadow: 0 1px 0 @white;
- > .divider {
- padding: 0 5px;
- color: #ccc;
- }
- }
- > .active {
- color: @grayLight;
- }
-}
diff --git a/css/button-groups.css b/css/button-groups.css
new file mode 100644
index 0000000..5d80209
--- /dev/null
+++ b/css/button-groups.css
@@ -0,0 +1,225 @@
+/*
+ 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);
+}
diff --git a/css/button-groups.less b/css/button-groups.less
deleted file mode 100644
index 55cdc60..0000000
--- a/css/button-groups.less
+++ /dev/null
@@ -1,229 +0,0 @@
-//
-// Button groups
-// --------------------------------------------------
-
-
-// Make the div behave like a button
-.btn-group {
- position: relative;
- display: inline-block;
- .ie7-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 (e.g., the table on the tests page)
- .ie7-restore-left-whitespace();
-}
-
-// 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: @baseLineHeight / 2;
- margin-bottom: @baseLineHeight / 2;
- > .btn + .btn,
- > .btn-group + .btn,
- > .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: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
-}
-
-// Reset fonts for other sizes
-.btn-group > .btn-mini {
- font-size: @fontSizeMini;
-}
-.btn-group > .btn-small {
- font-size: @fontSizeSmall;
-}
-.btn-group > .btn-large {
- font-size: @fontSizeLarge;
-}
-
-// 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(@baseBorderRadius);
- .border-bottom-left-radius(@baseBorderRadius);
-}
-// 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(@baseBorderRadius);
- .border-bottom-right-radius(@baseBorderRadius);
-}
-// Reset corners for large buttons
-.btn-group > .btn.large:first-child {
- margin-left: 0;
- .border-top-left-radius(@borderRadiusLarge);
- .border-bottom-left-radius(@borderRadiusLarge);
-}
-.btn-group > .btn.large:last-child,
-.btn-group > .large.dropdown-toggle {
- .border-top-right-radius(@borderRadiusLarge);
- .border-bottom-right-radius(@borderRadiusLarge);
-}
-
-// 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
-// ----------------------
-
-// Give the line between buttons some depth
-.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)");
- *padding-top: 5px;
- *padding-bottom: 5px;
-}
-.btn-group > .btn-mini + .dropdown-toggle {
- padding-left: 5px;
- padding-right: 5px;
- *padding-top: 2px;
- *padding-bottom: 2px;
-}
-.btn-group > .btn-small + .dropdown-toggle {
- *padding-top: 5px;
- *padding-bottom: 4px;
-}
-.btn-group > .btn-large + .dropdown-toggle {
- padding-left: 12px;
- padding-right: 12px;
- *padding-top: 7px;
- *padding-bottom: 7px;
-}
-
-.btn-group.open {
-
- // The clickable button for toggling the menu
- // Remove the gradient and set the same inset shadow as the :active state
- .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.dropdown-toggle {
- background-color: @btnBackgroundHighlight;
- }
- .btn-primary.dropdown-toggle {
- background-color: @btnPrimaryBackgroundHighlight;
- }
- .btn-warning.dropdown-toggle {
- background-color: @btnWarningBackgroundHighlight;
- }
- .btn-danger.dropdown-toggle {
- background-color: @btnDangerBackgroundHighlight;
- }
- .btn-success.dropdown-toggle {
- background-color: @btnSuccessBackgroundHighlight;
- }
- .btn-info.dropdown-toggle {
- background-color: @btnInfoBackgroundHighlight;
- }
- .btn-inverse.dropdown-toggle {
- background-color: @btnInverseBackgroundHighlight;
- }
-}
-
-
-// Reposition the caret
-.btn .caret {
- margin-top: 8px;
- margin-left: 0;
-}
-// Carets in other button sizes
-.btn-large .caret {
- margin-top: 6px;
-}
-.btn-large .caret {
- 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,
-.btn-warning,
-.btn-danger,
-.btn-info,
-.btn-success,
-.btn-inverse {
- .caret {
- border-top-color: @white;
- border-bottom-color: @white;
- }
-}
-
-
-
-// Vertical button groups
-// ----------------------
-
-.btn-group-vertical {
- display: inline-block; // makes buttons only take up the width they need
- .ie7-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(@baseBorderRadius @baseBorderRadius 0 0);
-}
-.btn-group-vertical > .btn:last-child {
- .border-radius(0 0 @baseBorderRadius @baseBorderRadius);
-}
-.btn-group-vertical > .btn-large:first-child {
- .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0);
-}
-.btn-group-vertical > .btn-large:last-child {
- .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge);
-}
diff --git a/css/buttons.css b/css/buttons.css
new file mode 100644
index 0000000..4d1c2fb
--- /dev/null
+++ b/css/buttons.css
@@ -0,0 +1,208 @@
+/*
+ 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;
+}
diff --git a/css/buttons.less b/css/buttons.less
deleted file mode 100644
index 4cd4d86..0000000
--- a/css/buttons.less
+++ /dev/null
@@ -1,228 +0,0 @@
-//
-// Buttons
-// --------------------------------------------------
-
-
-// Base styles
-// --------------------------------------------------
-
-// Core
-.btn {
- display: inline-block;
- .ie7-inline-block();
- padding: 4px 12px;
- margin-bottom: 0; // For input.btn
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
- border: 1px solid @btnBorder;
- *border: 0; // Remove the border to prevent IE7's black border on input:focus
- border-bottom-color: darken(@btnBorder, 10%);
- .border-radius(@baseBorderRadius);
- .ie7-restore-left-whitespace(); // Give IE7 some love
- .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
-
- // Hover/focus state
- &:hover,
- &:focus {
- color: @grayDark;
- text-decoration: none;
- background-position: 0 -15px;
-
- // transition is only when going to hover/focus, otherwise the background
- // behind the gradient (there for IE<=9 fallback) gets mismatched
- .transition(background-position .1s linear);
- }
-
- // Focus state for keyboard and accessibility
- &:focus {
- .tab-focus();
- }
-
- // Active state
- &.active,
- &: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
- &.disabled,
- &[disabled] {
- cursor: default;
- background-image: none;
- .opacity(65);
- .box-shadow(none);
- }
-
-}
-
-
-
-// Button Sizes
-// --------------------------------------------------
-
-// Large
-.btn-large {
- padding: @paddingLarge;
- font-size: @fontSizeLarge;
- .border-radius(@borderRadiusLarge);
-}
-.btn-large [class^="icon-"],
-.btn-large [class*=" icon-"] {
- margin-top: 4px;
-}
-
-// Small
-.btn-small {
- padding: @paddingSmall;
- font-size: @fontSizeSmall;
- .border-radius(@borderRadiusSmall);
-}
-.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: @paddingMini;
- font-size: @fontSizeMini;
- .border-radius(@borderRadiusSmall);
-}
-
-
-// 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"],
-input[type="reset"],
-input[type="button"] {
- &.btn-block {
- width: 100%;
- }
-}
-
-
-
-// Alternate buttons
-// --------------------------------------------------
-
-// Provide *some* extra contrast for those who can get it
-.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 {
- .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
-}
-// Warning appears are orange
-.btn-warning {
- .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
-}
-// Danger and error appear as red
-.btn-danger {
- .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
-}
-// Success appears as green
-.btn-success {
- .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
-}
-// Info appears as a neutral blue
-.btn-info {
- .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
-}
-// Inverse appears as dark gray
-.btn-inverse {
- .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
-}
-
-
-// Cross-browser Jank
-// --------------------------------------------------
-
-button.btn,
-input[type="submit"].btn {
-
- // Firefox 3.6 only I believe
- &::-moz-focus-inner {
- padding: 0;
- border: 0;
- }
-
- // IE7 has some default padding on button controls
- *padding-top: 3px;
- *padding-bottom: 3px;
-
- &.btn-large {
- *padding-top: 7px;
- *padding-bottom: 7px;
- }
- &.btn-small {
- *padding-top: 3px;
- *padding-bottom: 3px;
- }
- &.btn-mini {
- *padding-top: 1px;
- *padding-bottom: 1px;
- }
-}
-
-
-// Link buttons
-// --------------------------------------------------
-
-// Make a button look and behave like a link
-.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: @linkColor;
- .border-radius(0);
-}
-.btn-link:hover,
-.btn-link:focus {
- color: @linkColorHover;
- text-decoration: underline;
- background-color: transparent;
-}
-.btn-link[disabled]:hover,
-.btn-link[disabled]:focus {
- color: @grayDark;
- text-decoration: none;
-}
diff --git a/css/carousel.css b/css/carousel.css
new file mode 100644
index 0000000..491babd
--- /dev/null
+++ b/css/carousel.css
@@ -0,0 +1,151 @@
+/*
+ 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;
+}
diff --git a/css/carousel.less b/css/carousel.less
deleted file mode 100644
index 55bc050..0000000
--- a/css/carousel.less
+++ /dev/null
@@ -1,158 +0,0 @@
-//
-// Carousel
-// --------------------------------------------------
-
-
-.carousel {
- position: relative;
- margin-bottom: @baseLineHeight;
- line-height: 1;
-}
-
-.carousel-inner {
- overflow: hidden;
- width: 100%;
- position: relative;
-}
-
-.carousel-inner {
-
- > .item {
- display: none;
- position: relative;
- .transition(.6s ease-in-out left);
-
- // Account for jankitude on images
- > img,
- > a > img {
- display: block;
- line-height: 1;
- }
- }
-
- > .active,
- > .next,
- > .prev { display: block; }
-
- > .active {
- left: 0;
- }
-
- > .next,
- > .prev {
- position: absolute;
- top: 0;
- width: 100%;
- }
-
- > .next {
- left: 100%;
- }
- > .prev {
- left: -100%;
- }
- > .next.left,
- > .prev.right {
- left: 0;
- }
-
- > .active.left {
- left: -100%;
- }
- > .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: @white;
- text-align: center;
- background: @grayDarker;
- border: 3px solid @white;
- .border-radius(23px);
- .opacity(50);
-
- // we can't have this transition here
- // because webkit cancels the carousel
- // animation if you trip this while
- // in the middle of another animation
- // ;_;
- // .transition(opacity .2s linear);
-
- // Reposition the right one
- &.right {
- left: auto;
- right: 15px;
- }
-
- // Hover/focus state
- &:hover,
- &:focus {
- color: @white;
- text-decoration: none;
- .opacity(90);
- }
-}
-
-// Carousel indicator pips
-// -----------------------------
-.carousel-indicators {
- position: absolute;
- top: 15px;
- right: 15px;
- z-index: 5;
- margin: 0;
- list-style: none;
-
- 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;
- }
- .active {
- background-color: #fff;
- }
-}
-
-// Caption for text below images
-// -----------------------------
-
-.carousel-caption {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- padding: 15px;
- background: @grayDark;
- background: rgba(0,0,0,.75);
-}
-.carousel-caption h4,
-.carousel-caption p {
- color: @white;
- line-height: @baseLineHeight;
-}
-.carousel-caption h4 {
- margin: 0 0 5px;
-}
-.carousel-caption p {
- margin-bottom: 0;
-}
diff --git a/css/close.css b/css/close.css
new file mode 100644
index 0000000..0d32c10
--- /dev/null
+++ b/css/close.css
@@ -0,0 +1,35 @@
+/*
+ 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;
+}
diff --git a/css/close.less b/css/close.less
deleted file mode 100644
index 4c626bd..0000000
--- a/css/close.less
+++ /dev/null
@@ -1,32 +0,0 @@
-//
-// Close icons
-// --------------------------------------------------
-
-
-.close {
- float: right;
- font-size: 20px;
- font-weight: bold;
- line-height: @baseLineHeight;
- color: @black;
- text-shadow: 0 1px 0 rgba(255,255,255,1);
- .opacity(20);
- &:hover,
- &:focus {
- color: @black;
- text-decoration: none;
- cursor: pointer;
- .opacity(40);
- }
-}
-
-// 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;
-}
\ No newline at end of file
diff --git a/css/code.css b/css/code.css
new file mode 100644
index 0000000..c93f791
--- /dev/null
+++ b/css/code.css
@@ -0,0 +1,63 @@
+/*
+ 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;
+}
diff --git a/css/code.less b/css/code.less
deleted file mode 100644
index 266a926..0000000
--- a/css/code.less
+++ /dev/null
@@ -1,61 +0,0 @@
-//
-// Code (inline and blocK)
-// --------------------------------------------------
-
-
-// Inline and block code styles
-code,
-pre {
- padding: 0 3px 2px;
- #font > #family > .monospace;
- font-size: @baseFontSize - 2;
- color: @grayDark;
- .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: (@baseLineHeight - 1) / 2;
- margin: 0 0 @baseLineHeight / 2;
- font-size: @baseFontSize - 1; // 14px to 13px
- line-height: @baseLineHeight;
- 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(@baseBorderRadius);
-
- // Make prettyprint styles more spaced out for readability
- &.prettyprint {
- margin-bottom: @baseLineHeight;
- }
-
- // Account for some code outputs that place code tags in pre tags
- 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;
-}
\ No newline at end of file
diff --git a/css/component-animations.css b/css/component-animations.css
new file mode 100644
index 0000000..1277bbc
--- /dev/null
+++ b/css/component-animations.css
@@ -0,0 +1,24 @@
+/*
+ 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;
+}
diff --git a/css/component-animations.less b/css/component-animations.less
deleted file mode 100644
index d614263..0000000
--- a/css/component-animations.less
+++ /dev/null
@@ -1,22 +0,0 @@
-//
-// Component animations
-// --------------------------------------------------
-
-
-.fade {
- opacity: 0;
- .transition(opacity .15s linear);
- &.in {
- opacity: 1;
- }
-}
-
-.collapse {
- position: relative;
- height: 0;
- overflow: hidden;
- .transition(height .35s ease);
- &.in {
- height: auto;
- }
-}
diff --git a/css/dropdowns.css b/css/dropdowns.css
new file mode 100644
index 0000000..cc34d03
--- /dev/null
+++ b/css/dropdowns.css
@@ -0,0 +1,259 @@
+/*
+ Dropdown menus
+ ========================================
+*/
+
+/* Use the .menu class on any 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);
+}
diff --git a/css/dropdowns.less b/css/dropdowns.less
deleted file mode 100644
index 9e47b47..0000000
--- a/css/dropdowns.less
+++ /dev/null
@@ -1,248 +0,0 @@
-//
-// Dropdown menus
-// --------------------------------------------------
-
-
-// Use the .menu class on any 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 @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: @zindexDropdown;
- 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: @dropdownBackground;
- border: 1px solid #ccc; // Fallback for IE7-8
- border: 1px solid @dropdownBorder;
- *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
- &.pull-right {
- right: 0;
- left: auto;
- }
-
- // Dividers (basically an hr) within the dropdown
- .divider {
- .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
- }
-
- // Links within the dropdown menu
- > li > a {
- display: block;
- padding: 3px 20px;
- clear: both;
- font-weight: normal;
- line-height: @baseLineHeight;
- color: @dropdownLinkColor;
- 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: @dropdownLinkColorHover;
- #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
-}
-
-// Active state
-// ------------
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
- color: @dropdownLinkColorActive;
- text-decoration: none;
- outline: 0;
- #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
-}
-
-// 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: @grayLight;
-}
-// Nuke hover/focus effects
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
- text-decoration: none;
- background-color: transparent;
- background-image: none; // Remove CSS gradient
- .reset-filter();
- 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: @zindexDropdown;
-
- & > .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: @zindexDropdown - 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,
-.navbar-fixed-bottom .dropdown {
- // Reverse the caret
- .caret {
- border-top: 0;
- border-bottom: 4px solid @black;
- content: "";
- }
- // Different positioning for bottom up menu
- .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: darken(@dropdownBackground, 20%);
- margin-top: 5px;
- margin-right: -10px;
-}
-.dropdown-submenu:hover > a:after {
- border-left-color: @dropdownLinkColorHover;
-}
-
-// 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-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(@baseBorderRadius);
-}
diff --git a/css/forms.css b/css/forms.css
new file mode 100644
index 0000000..4349566
--- /dev/null
+++ b/css/forms.css
@@ -0,0 +1,918 @@
+/*
+ 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);
+}
diff --git a/css/forms.less b/css/forms.less
deleted file mode 100644
index 06767bd..0000000
--- a/css/forms.less
+++ /dev/null
@@ -1,690 +0,0 @@
-//
-// Forms
-// --------------------------------------------------
-
-
-// GENERAL STYLES
-// --------------
-
-// Make all forms have space below them
-form {
- margin: 0 0 @baseLineHeight;
-}
-
-fieldset {
- padding: 0;
- margin: 0;
- border: 0;
-}
-
-// Groups of fields with labels on top (legends)
-legend {
- display: block;
- width: 100%;
- padding: 0;
- margin-bottom: @baseLineHeight;
- font-size: @baseFontSize * 1.5;
- line-height: @baseLineHeight * 2;
- color: @grayDark;
- border: 0;
- border-bottom: 1px solid #e5e5e5;
-
- // Small
- small {
- font-size: @baseLineHeight * .75;
- color: @grayLight;
- }
-}
-
-// Set font for forms
-label,
-input,
-button,
-select,
-textarea {
- #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
-}
-input,
-button,
-select,
-textarea {
- font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
-}
-
-// 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: @baseLineHeight;
- padding: 4px 6px;
- margin-bottom: @baseLineHeight / 2;
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
- color: @gray;
- .border-radius(@inputBorderRadius);
- 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: @inputBackground;
- border: 1px solid @inputBorder;
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
- .transition(~"border linear .2s, box-shadow linear .2s");
-
- // Focus state
- &: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: @inputHeight; /* 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: @inputHeight;
-}
-
-// 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 @inputBorder;
- background-color: @inputBackground; // 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 {
- .tab-focus();
-}
-
-
-// Uneditable inputs
-// -------------------------
-
-// Make uneditable inputs look inactive
-.uneditable-input,
-.uneditable-textarea {
- color: @grayLight;
- background-color: darken(@inputBackground, 1%);
- border-color: @inputBorder;
- .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,
-textarea {
- .placeholder();
-}
-
-
-// CHECKBOXES & RADIOS
-// -------------------
-
-// Indent the labels to position radios/checkboxes as hanging
-.radio,
-.checkbox {
- min-height: @baseLineHeight; // 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 collaspes
-}
-
-// 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
-// ----------------------
-
-// Grid sizes
-#grid > .input(@gridColumnWidth, @gridGutterWidth);
-
-// Control row for multiple inputs per line
-.controls-row {
- .clearfix(); // Clear the float from controls
-}
-
-// 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;
-}
-// Explicity 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: @inputDisabledBackground;
-}
-// 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 {
- .formFieldState(@warningText, @warningText, @warningBackground);
-}
-// Error
-.control-group.error {
- .formFieldState(@errorText, @errorText, @errorBackground);
-}
-// Success
-.control-group.success {
- .formFieldState(@successText, @successText, @successBackground);
-}
-// Success
-.control-group.info {
- .formFieldState(@infoText, @infoText, @infoBackground);
-}
-
-// 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;
- &:focus {
- border-color: darken(#ee5f5b, 10%);
- @shadow: 0 0 6px lighten(#ee5f5b, 20%);
- .box-shadow(@shadow);
- }
-}
-
-
-
-// FORM ACTIONS
-// ------------
-
-.form-actions {
- padding: (@baseLineHeight - 1) 20px @baseLineHeight;
- margin-top: @baseLineHeight;
- margin-bottom: @baseLineHeight;
- background-color: @formActionsBackground;
- border-top: 1px solid #e5e5e5;
- .clearfix(); // Adding clearfix to allow for .pull-right button containers
-}
-
-
-
-// HELP TEXT
-// ---------
-
-.help-block,
-.help-inline {
- color: lighten(@textColor, 15%); // lighten the text some for contrast
-}
-
-.help-block {
- display: block; // account for any element using help-block
- margin-bottom: @baseLineHeight / 2;
-}
-
-.help-inline {
- display: inline-block;
- .ie7-inline-block();
- 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: @baseLineHeight / 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,
- select,
- .uneditable-input,
- .dropdown-menu,
- .popover {
- font-size: @baseFontSize;
- }
-
- input,
- select,
- .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 @inputBorderRadius @inputBorderRadius 0);
- // Make input on top when focused so blue border and shadow always show
- &:focus {
- z-index: 2;
- }
- }
- .add-on {
- display: inline-block;
- width: auto;
- height: @baseLineHeight;
- min-width: 16px;
- padding: 4px 5px;
- font-size: @baseFontSize;
- font-weight: normal;
- line-height: @baseLineHeight;
- text-align: center;
- text-shadow: 0 1px 0 @white;
- background-color: @grayLighter;
- border: 1px solid #ccc;
- }
- .add-on,
- .btn,
- .btn-group > .dropdown-toggle {
- vertical-align: top;
- .border-radius(0);
- }
- .active {
- background-color: lighten(@green, 30);
- border-color: @green;
- }
-}
-
-.input-prepend {
- .add-on,
- .btn {
- margin-right: -1px;
- }
- .add-on:first-child,
- .btn:first-child {
- // FYI, `.btn:first-child` accounts for a button group that's prepended
- .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
- }
-}
-
-.input-append {
- input,
- select,
- .uneditable-input {
- .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
- + .btn-group .btn:last-child {
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
- }
- }
- .add-on,
- .btn,
- .btn-group {
- margin-left: -1px;
- }
- .add-on:last-child,
- .btn:last-child,
- .btn-group:last-child > .dropdown-toggle {
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
- }
-}
-
-// Remove all border-radius for inputs with both prepend and append
-.input-prepend.input-append {
- input,
- select,
- .uneditable-input {
- .border-radius(0);
- + .btn-group .btn {
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
- }
- }
- .add-on:first-child,
- .btn:first-child {
- margin-right: -1px;
- .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
- }
- .add-on:last-child,
- .btn:last-child {
- margin-left: -1px;
- .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
- }
- .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); // Override due to specificity
-}
-.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 {
- input,
- textarea,
- select,
- .help-inline,
- .uneditable-input,
- .input-prepend,
- .input-append {
- display: inline-block;
- .ie7-inline-block();
- margin-bottom: 0;
- vertical-align: middle;
- }
- // Re-hide hidden elements due to specifity
- .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: @baseLineHeight / 2;
-}
-
-// Legend collapses margin, so next element is responsible for spacing
-legend + .control-group {
- margin-top: @baseLineHeight;
- -webkit-margin-top-collapse: separate;
-}
-
-// Horizontal-specific styles
-// --------------------------
-
-.form-horizontal {
- // Increase spacing between groups
- .control-group {
- margin-bottom: @baseLineHeight;
- .clearfix();
- }
- // Float the labels left
- .control-label {
- float: left;
- width: @horizontalComponentOffset - 20;
- padding-top: 5px;
- text-align: right;
- }
- // Move over all input controls and content
- .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: @horizontalComponentOffset;
- *margin-left: 0;
- &:first-child {
- *padding-left: @horizontalComponentOffset;
- }
- }
- // Remove bottom margin on block level help text since that's accounted for on .control-group
- .help-block {
- margin-bottom: 0;
- }
- // And apply it only to .help-block instances that follow a form control
- input,
- select,
- textarea,
- .uneditable-input,
- .input-prepend,
- .input-append {
- + .help-block {
- margin-top: @baseLineHeight / 2;
- }
- }
- // Move over buttons in .form-actions to align with .controls
- .form-actions {
- padding-left: @horizontalComponentOffset;
- }
-}
diff --git a/css/grid.css b/css/grid.css
new file mode 100644
index 0000000..dd02184
--- /dev/null
+++ b/css/grid.css
@@ -0,0 +1,171 @@
+/*
+ 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;
+}
diff --git a/css/grid.less b/css/grid.less
deleted file mode 100644
index 750d203..0000000
--- a/css/grid.less
+++ /dev/null
@@ -1,21 +0,0 @@
-//
-// Grid system
-// --------------------------------------------------
-
-
-// Fixed (940px)
-#grid > .core(@gridColumnWidth, @gridGutterWidth);
-
-// Fluid (940px)
-#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
-
-// 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;
-}
diff --git a/css/hero-unit.css b/css/hero-unit.css
new file mode 100644
index 0000000..6241016
--- /dev/null
+++ b/css/hero-unit.css
@@ -0,0 +1,27 @@
+/*
+ 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 */
+}
diff --git a/css/hero-unit.less b/css/hero-unit.less
deleted file mode 100644
index 763d86a..0000000
--- a/css/hero-unit.less
+++ /dev/null
@@ -1,25 +0,0 @@
-//
-// Hero unit
-// --------------------------------------------------
-
-
-.hero-unit {
- padding: 60px;
- margin-bottom: 30px;
- font-size: 18px;
- font-weight: 200;
- line-height: @baseLineHeight * 1.5;
- color: @heroUnitLeadColor;
- background-color: @heroUnitBackground;
- .border-radius(6px);
- h1 {
- margin-bottom: 0;
- font-size: 60px;
- line-height: 1;
- color: @heroUnitHeadingColor;
- letter-spacing: -1px;
- }
- li {
- line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less
- }
-}
diff --git a/css/labels-badges.css b/css/labels-badges.css
new file mode 100644
index 0000000..4535759
--- /dev/null
+++ b/css/labels-badges.css
@@ -0,0 +1,116 @@
+/*
+ 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;
+}
diff --git a/css/labels-badges.less b/css/labels-badges.less
deleted file mode 100644
index bc321fe..0000000
--- a/css/labels-badges.less
+++ /dev/null
@@ -1,84 +0,0 @@
-//
-// Labels and badges
-// --------------------------------------------------
-
-
-// Base classes
-.label,
-.badge {
- display: inline-block;
- padding: 2px 4px;
- font-size: @baseFontSize * .846;
- font-weight: bold;
- line-height: 14px; // ensure proper line-height if floated
- color: @white;
- vertical-align: baseline;
- white-space: nowrap;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- background-color: @grayLight;
-}
-// 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,
-.badge {
- &:empty {
- display: none;
- }
-}
-
-// Hover/focus state, but only for links
-a {
- &.label:hover,
- &.label:focus,
- &.badge:hover,
- &.badge:focus {
- color: @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)
-.label,
-.badge {
- // Important (red)
- &-important { background-color: @errorText; }
- &-important[href] { background-color: darken(@errorText, 10%); }
- // Warnings (orange)
- &-warning { background-color: @orange; }
- &-warning[href] { background-color: darken(@orange, 10%); }
- // Success (green)
- &-success { background-color: @successText; }
- &-success[href] { background-color: darken(@successText, 10%); }
- // Info (turquoise)
- &-info { background-color: @infoText; }
- &-info[href] { background-color: darken(@infoText, 10%); }
- // Inverse (black)
- &-inverse { background-color: @grayDark; }
- &-inverse[href] { background-color: darken(@grayDark, 10%); }
-}
-
-// Quick fix for labels/badges in buttons
-.btn {
- .label,
- .badge {
- position: relative;
- top: -1px;
- }
-}
-.btn-mini {
- .label,
- .badge {
- top: 0;
- }
-}
diff --git a/css/layouts.css b/css/layouts.css
new file mode 100644
index 0000000..68249c8
--- /dev/null
+++ b/css/layouts.css
@@ -0,0 +1,40 @@
+/*
+ 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;
+}
diff --git a/css/layouts.less b/css/layouts.less
deleted file mode 100644
index 24a2062..0000000
--- a/css/layouts.less
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// Layouts
-// --------------------------------------------------
-
-
-// Container (centered, fixed-width layouts)
-.container {
- .container-fixed();
-}
-
-// Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.container-fluid {
- padding-right: @gridGutterWidth;
- padding-left: @gridGutterWidth;
- .clearfix();
-}
\ No newline at end of file
diff --git a/css/media.css b/css/media.css
new file mode 100644
index 0000000..990f361
--- /dev/null
+++ b/css/media.css
@@ -0,0 +1,54 @@
+/*
+ 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;
+}
diff --git a/css/media.less b/css/media.less
deleted file mode 100644
index e461e44..0000000
--- a/css/media.less
+++ /dev/null
@@ -1,55 +0,0 @@
-// Media objects
-// Source: http://stubbornella.org/content/?p=497
-// --------------------------------------------------
-
-
-// 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;
-}
diff --git a/css/mixins.less b/css/mixins.less
deleted file mode 100644
index 857561e..0000000
--- a/css/mixins.less
+++ /dev/null
@@ -1,702 +0,0 @@
-//
-// Mixins
-// --------------------------------------------------
-
-
-// UTILITY MIXINS
-// --------------------------------------------------
-
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
-.clearfix {
- *zoom: 1;
- &:before,
- &:after {
- display: table;
- content: "";
- // Fixes Opera/contenteditable bug:
- // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
- line-height: 0;
- }
- &:after {
- clear: both;
- }
-}
-
-// Webkit-style focus
-// ------------------
-.tab-focus() {
- // Default
- outline: thin dotted #333;
- // Webkit
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
-}
-
-// Center-align a block level element
-// ----------------------------------
-.center-block() {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-// IE7 inline-block
-// ----------------
-.ie7-inline-block() {
- *display: inline; /* IE7 inline-block hack */
- *zoom: 1;
-}
-
-// IE7 likes to collapse whitespace on either side of the inline-block elements.
-// Ems because we're attempting to match the width of a space character. Left
-// version is for form buttons, which typically come after other elements, and
-// right version is for icons, which come before. Applying both is ok, but it will
-// mean that space between those elements will be .6em (~2 space characters) in IE7,
-// instead of the 1 space in other browsers.
-.ie7-restore-left-whitespace() {
- *margin-left: .3em;
-
- &:first-child {
- *margin-left: 0;
- }
-}
-
-.ie7-restore-right-whitespace() {
- *margin-right: .3em;
-}
-
-// Sizing shortcuts
-// -------------------------
-.size(@height, @width) {
- width: @width;
- height: @height;
-}
-.square(@size) {
- .size(@size, @size);
-}
-
-// Placeholder text
-// -------------------------
-.placeholder(@color: @placeholderText) {
- &:-moz-placeholder {
- color: @color;
- }
- &:-ms-input-placeholder {
- color: @color;
- }
- &::-webkit-input-placeholder {
- color: @color;
- }
-}
-
-// Text overflow
-// -------------------------
-// Requires inline-block or block for proper styling
-.text-overflow() {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-// CSS image replacement
-// -------------------------
-// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
-.hide-text {
- font: 0/0 a;
- color: transparent;
- text-shadow: none;
- background-color: transparent;
- border: 0;
-}
-
-
-// FONTS
-// --------------------------------------------------
-
-#font {
- #family {
- .serif() {
- font-family: @serifFontFamily;
- }
- .sans-serif() {
- font-family: @sansFontFamily;
- }
- .monospace() {
- font-family: @monoFontFamily;
- }
- }
- .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
- #font > #family > .serif;
- #font > .shorthand(@size, @weight, @lineHeight);
- }
- .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
- #font > #family > .sans-serif;
- #font > .shorthand(@size, @weight, @lineHeight);
- }
- .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
- #font > #family > .monospace;
- #font > .shorthand(@size, @weight, @lineHeight);
- }
-}
-
-
-// FORMS
-// --------------------------------------------------
-
-// Block level inputs
-.input-block-level {
- display: block;
- width: 100%;
- min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
- .box-sizing(border-box); // Makes inputs behave like true block-level elements
-}
-
-
-
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
- // Set the text color
- .control-label,
- .help-block,
- .help-inline {
- color: @textColor;
- }
- // Style inputs accordingly
- .checkbox,
- .radio,
- input,
- select,
- textarea {
- color: @textColor;
- }
- input,
- select,
- textarea {
- border-color: @borderColor;
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
- &:focus {
- border-color: darken(@borderColor, 10%);
- @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
- .box-shadow(@shadow);
- }
- }
- // Give a small background color for input-prepend/-append
- .input-prepend .add-on,
- .input-append .add-on {
- color: @textColor;
- background-color: @backgroundColor;
- border-color: @textColor;
- }
-}
-
-
-
-// CSS3 PROPERTIES
-// --------------------------------------------------
-
-// Border Radius
-.border-radius(@radius) {
- -webkit-border-radius: @radius;
- -moz-border-radius: @radius;
- border-radius: @radius;
-}
-
-// Single Corner Border Radius
-.border-top-left-radius(@radius) {
- -webkit-border-top-left-radius: @radius;
- -moz-border-radius-topleft: @radius;
- border-top-left-radius: @radius;
-}
-.border-top-right-radius(@radius) {
- -webkit-border-top-right-radius: @radius;
- -moz-border-radius-topright: @radius;
- border-top-right-radius: @radius;
-}
-.border-bottom-right-radius(@radius) {
- -webkit-border-bottom-right-radius: @radius;
- -moz-border-radius-bottomright: @radius;
- border-bottom-right-radius: @radius;
-}
-.border-bottom-left-radius(@radius) {
- -webkit-border-bottom-left-radius: @radius;
- -moz-border-radius-bottomleft: @radius;
- border-bottom-left-radius: @radius;
-}
-
-// Single Side Border Radius
-.border-top-radius(@radius) {
- .border-top-right-radius(@radius);
- .border-top-left-radius(@radius);
-}
-.border-right-radius(@radius) {
- .border-top-right-radius(@radius);
- .border-bottom-right-radius(@radius);
-}
-.border-bottom-radius(@radius) {
- .border-bottom-right-radius(@radius);
- .border-bottom-left-radius(@radius);
-}
-.border-left-radius(@radius) {
- .border-top-left-radius(@radius);
- .border-bottom-left-radius(@radius);
-}
-
-// Drop shadows
-.box-shadow(@shadow) {
- -webkit-box-shadow: @shadow;
- -moz-box-shadow: @shadow;
- box-shadow: @shadow;
-}
-
-// Transitions
-.transition(@transition) {
- -webkit-transition: @transition;
- -moz-transition: @transition;
- -o-transition: @transition;
- transition: @transition;
-}
-.transition-delay(@transition-delay) {
- -webkit-transition-delay: @transition-delay;
- -moz-transition-delay: @transition-delay;
- -o-transition-delay: @transition-delay;
- transition-delay: @transition-delay;
-}
-.transition-duration(@transition-duration) {
- -webkit-transition-duration: @transition-duration;
- -moz-transition-duration: @transition-duration;
- -o-transition-duration: @transition-duration;
- transition-duration: @transition-duration;
-}
-
-// Transformations
-.rotate(@degrees) {
- -webkit-transform: rotate(@degrees);
- -moz-transform: rotate(@degrees);
- -ms-transform: rotate(@degrees);
- -o-transform: rotate(@degrees);
- transform: rotate(@degrees);
-}
-.scale(@ratio) {
- -webkit-transform: scale(@ratio);
- -moz-transform: scale(@ratio);
- -ms-transform: scale(@ratio);
- -o-transform: scale(@ratio);
- transform: scale(@ratio);
-}
-.translate(@x, @y) {
- -webkit-transform: translate(@x, @y);
- -moz-transform: translate(@x, @y);
- -ms-transform: translate(@x, @y);
- -o-transform: translate(@x, @y);
- transform: translate(@x, @y);
-}
-.skew(@x, @y) {
- -webkit-transform: skew(@x, @y);
- -moz-transform: skew(@x, @y);
- -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
- -o-transform: skew(@x, @y);
- transform: skew(@x, @y);
- -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319
-}
-.translate3d(@x, @y, @z) {
- -webkit-transform: translate3d(@x, @y, @z);
- -moz-transform: translate3d(@x, @y, @z);
- -o-transform: translate3d(@x, @y, @z);
- transform: translate3d(@x, @y, @z);
-}
-
-// Backface visibility
-// Prevent browsers from flickering when using CSS 3D transforms.
-// Default value is `visible`, but can be changed to `hidden
-// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
-.backface-visibility(@visibility){
- -webkit-backface-visibility: @visibility;
- -moz-backface-visibility: @visibility;
- backface-visibility: @visibility;
-}
-
-// Background clipping
-// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
-.background-clip(@clip) {
- -webkit-background-clip: @clip;
- -moz-background-clip: @clip;
- background-clip: @clip;
-}
-
-// Background sizing
-.background-size(@size) {
- -webkit-background-size: @size;
- -moz-background-size: @size;
- -o-background-size: @size;
- background-size: @size;
-}
-
-
-// Box sizing
-.box-sizing(@boxmodel) {
- -webkit-box-sizing: @boxmodel;
- -moz-box-sizing: @boxmodel;
- box-sizing: @boxmodel;
-}
-
-// User select
-// For selecting text on the page
-.user-select(@select) {
- -webkit-user-select: @select;
- -moz-user-select: @select;
- -ms-user-select: @select;
- -o-user-select: @select;
- user-select: @select;
-}
-
-// Resize anything
-.resizable(@direction) {
- resize: @direction; // Options: horizontal, vertical, both
- overflow: auto; // Safari fix
-}
-
-// CSS3 Content Columns
-.content-columns(@columnCount, @columnGap: @gridGutterWidth) {
- -webkit-column-count: @columnCount;
- -moz-column-count: @columnCount;
- column-count: @columnCount;
- -webkit-column-gap: @columnGap;
- -moz-column-gap: @columnGap;
- column-gap: @columnGap;
-}
-
-// Optional hyphenation
-.hyphens(@mode: auto) {
- word-wrap: break-word;
- -webkit-hyphens: @mode;
- -moz-hyphens: @mode;
- -ms-hyphens: @mode;
- -o-hyphens: @mode;
- hyphens: @mode;
-}
-
-// Opacity
-.opacity(@opacity) {
- opacity: @opacity / 100;
- filter: ~"alpha(opacity=@{opacity})";
-}
-
-
-
-// BACKGROUNDS
-// --------------------------------------------------
-
-// Add an alphatransparency value to any background or border color (via Elyse Holladay)
-#translucent {
- .background(@color: @white, @alpha: 1) {
- background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- }
- .border(@color: @white, @alpha: 1) {
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- .background-clip(padding-box);
- }
-}
-
-// Gradient Bar Colors for buttons and alerts
-.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
- color: @textColor;
- text-shadow: @textShadow;
- #gradient > .vertical(@primaryColor, @secondaryColor);
- border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
-}
-
-// Gradients
-#gradient {
- .horizontal(@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
- background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
- background-repeat: repeat-x;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
- }
- .vertical(@startColor: #555, @endColor: #333) {
- background-color: mix(@startColor, @endColor, 60%);
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
- background-repeat: repeat-x;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
- }
- .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
- background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
- }
- .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- background-color: mix(@midColor, @endColor, 80%);
- background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
- background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
- background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
- background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
- background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
- background-repeat: no-repeat;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
- }
-
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- background-color: mix(@midColor, @endColor, 80%);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
- background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
- background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
- background-repeat: no-repeat;
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
- }
- .radial(@innerColor: #555, @outerColor: #333) {
- background-color: @outerColor;
- background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
- background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
- background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
- background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
- background-repeat: no-repeat;
- }
- .striped(@color: #555, @angle: 45deg) {
- background-color: @color;
- background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
- background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
- }
-}
-// Reset filters for IE
-.reset-filter() {
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
-}
-
-
-
-// COMPONENT MIXINS
-// --------------------------------------------------
-
-// Horizontal dividers
-// -------------------------
-// Dividers (basically an hr) within dropdowns and nav lists
-.nav-divider(@top: #e5e5e5, @bottom: @white) {
- // IE7 needs a set width since we gave a height. Restricting just
- // to IE7 to keep the 1px left/right space in other browsers.
- // It is unclear where IE is getting the extra space that we need
- // to negative-margin away, but so it goes.
- *width: 100%;
- height: 1px;
- margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
- *margin: -5px 0 5px;
- overflow: hidden;
- background-color: @top;
- border-bottom: 1px solid @bottom;
-}
-
-// Button backgrounds
-// ------------------
-.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
- // gradientBar will set the background to a pleasing blend of these, to support IE<=9
- .gradientBar(@startColor, @endColor, @textColor, @textShadow);
- *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
- .reset-filter();
-
- // in these cases the gradient won't cover the background, so we override
- &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
- color: @textColor;
- background-color: @endColor;
- *background-color: darken(@endColor, 5%);
- }
-
- // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
- &:active,
- &.active {
- background-color: darken(@endColor, 10%) e("\9");
- }
-}
-
-// Navbar vertical align
-// -------------------------
-// Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
-.navbarVerticalAlign(@elementHeight) {
- margin-top: (@navbarHeight - @elementHeight) / 2;
-}
-
-
-
-// Grid System
-// -----------
-
-// Centered container element
-.container-fixed() {
- margin-right: auto;
- margin-left: auto;
- .clearfix();
-}
-
-// Table columns
-.tableColumns(@columnSpan: 1) {
- float: none; // undo default grid column styles
- width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
- margin-left: 0; // undo default grid column styles
-}
-
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-.makeRow() {
- margin-left: @gridGutterWidth * -1;
- .clearfix();
-}
-.makeColumn(@columns: 1, @offset: 0) {
- float: left;
- margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-}
-
-// The Grid
-#grid {
-
- .core (@gridColumnWidth, @gridGutterWidth) {
-
- .spanX (@index) when (@index > 0) {
- .span@{index} { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {}
-
- .offsetX (@index) when (@index > 0) {
- .offset@{index} { .offset(@index); }
- .offsetX(@index - 1);
- }
- .offsetX (0) {}
-
- .offset (@columns) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
- }
-
- .span (@columns) {
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- }
-
- .row {
- margin-left: @gridGutterWidth * -1;
- .clearfix();
- }
-
- [class*="span"] {
- float: left;
- min-height: 1px; // prevent collapsing columns
- margin-left: @gridGutterWidth;
- }
-
- // Set the container width, and override it for fixed navbars in media queries
- .container,
- .navbar-static-top .container,
- .navbar-fixed-top .container,
- .navbar-fixed-bottom .container { .span(@gridColumns); }
-
- // generate .spanX and .offsetX
- .spanX (@gridColumns);
- .offsetX (@gridColumns);
-
- }
-
- .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
-
- .spanX (@index) when (@index > 0) {
- .span@{index} { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {}
-
- .offsetX (@index) when (@index > 0) {
- .offset@{index} { .offset(@index); }
- .offset@{index}:first-child { .offsetFirstChild(@index); }
- .offsetX(@index - 1);
- }
- .offsetX (0) {}
-
- .offset (@columns) {
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
- }
-
- .offsetFirstChild (@columns) {
- margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
- *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
- }
-
- .span (@columns) {
- width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
- *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
- }
-
- .row-fluid {
- width: 100%;
- .clearfix();
- [class*="span"] {
- .input-block-level();
- float: left;
- margin-left: @fluidGridGutterWidth;
- *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
- }
- [class*="span"]:first-child {
- margin-left: 0;
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: @fluidGridGutterWidth;
- }
-
- // generate .spanX and .offsetX
- .spanX (@gridColumns);
- .offsetX (@gridColumns);
- }
-
- }
-
- .input(@gridColumnWidth, @gridGutterWidth) {
-
- .spanX (@index) when (@index > 0) {
- input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
- .spanX(@index - 1);
- }
- .spanX (0) {}
-
- .span(@columns) {
- width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
- }
-
- input,
- textarea,
- .uneditable-input {
- margin-left: 0; // override margin-left from core grid system
- }
-
- // Space grid-sized controls properly if multiple per line
- .controls-row [class*="span"] + [class*="span"] {
- margin-left: @gridGutterWidth;
- }
-
- // generate .spanX
- .spanX (@gridColumns);
-
- }
-}
diff --git a/css/modals.css b/css/modals.css
new file mode 100644
index 0000000..06eb14a
--- /dev/null
+++ b/css/modals.css
@@ -0,0 +1,121 @@
+/*
+ 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;
+}
diff --git a/css/modals.less b/css/modals.less
deleted file mode 100644
index 8e272d4..0000000
--- a/css/modals.less
+++ /dev/null
@@ -1,95 +0,0 @@
-//
-// Modals
-// --------------------------------------------------
-
-// Background
-.modal-backdrop {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: @zindexModalBackdrop;
- background-color: @black;
- // Fade for backdrop
- &.fade { opacity: 0; }
-}
-
-.modal-backdrop,
-.modal-backdrop.fade.in {
- .opacity(80);
-}
-
-// Base modal
-.modal {
- position: fixed;
- top: 10%;
- left: 50%;
- z-index: @zindexModal;
- width: 560px;
- margin-left: -280px;
- background-color: @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;
-
- &.fade {
- .transition(e('opacity .3s linear, top .3s ease-out'));
- top: -25%;
- }
- &.fade.in { top: 10%; }
-}
-.modal-header {
- padding: 9px 15px;
- border-bottom: 1px solid #eee;
- // Close icon
- .close { margin-top: 2px; }
- // Heading
- 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 @white);
- .clearfix(); // clear it in case folks use .pull-* classes on buttons
-
- // Properly space out buttons
- .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
- .btn-group .btn + .btn {
- margin-left: -1px;
- }
- // and override it for block buttons as well
- .btn-block + .btn-block {
- margin-left: 0;
- }
-}
diff --git a/css/navbar.css b/css/navbar.css
new file mode 100644
index 0000000..0312566
--- /dev/null
+++ b/css/navbar.css
@@ -0,0 +1,537 @@
+/*
+ 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);
+}
diff --git a/css/navbar.less b/css/navbar.less
deleted file mode 100644
index 93d09bc..0000000
--- a/css/navbar.less
+++ /dev/null
@@ -1,497 +0,0 @@
-//
-// Navbars (Redux)
-// --------------------------------------------------
-
-
-// COMMON STYLES
-// -------------
-
-// Base class and wrapper
-.navbar {
- overflow: visible;
- margin-bottom: @baseLineHeight;
-
- // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
- *position: relative;
- *z-index: 2;
-}
-
-// 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: @navbarHeight;
- padding-left: 20px;
- padding-right: 20px;
- #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
- border: 1px solid @navbarBorder;
- .border-radius(@baseBorderRadius);
- .box-shadow(0 1px 4px rgba(0,0,0,.065));
-
- // Prevent floats from breaking the navbar
- .clearfix();
-}
-
-// Set width to auto for default container
-// We then reset it for fixed navbars in the #gridSystem mixin
-.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 @navbarHeight
- padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
- margin-left: -20px; // negative indent to left-align the text down the page
- font-size: 20px;
- font-weight: 200;
- color: @navbarBrandColor;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
- &:hover,
- &:focus {
- text-decoration: none;
- }
-}
-
-// Plain text in topbar
-// -------------------------
-.navbar-text {
- margin-bottom: 0;
- line-height: @navbarHeight;
- color: @navbarText;
-}
-
-// Janky solution for now to account for links outside the .nav
-// -------------------------
-.navbar-link {
- color: @navbarLinkColor;
- &:hover,
- &:focus {
- color: @navbarLinkColorHover;
- }
-}
-
-// Dividers in navbar
-// -------------------------
-.navbar .divider-vertical {
- height: @navbarHeight;
- margin: 0 9px;
- border-left: 1px solid @navbarBackground;
- border-right: 1px solid @navbarBackgroundHighlight;
-}
-
-// Buttons in navbar
-// -------------------------
-.navbar .btn,
-.navbar .btn-group {
- .navbarVerticalAlign(30px); // Vertically center in navbar
-}
-.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
- .clearfix();
- input,
- select,
- .radio,
- .checkbox {
- .navbarVerticalAlign(30px); // Vertically center in navbar
- }
- input,
- select,
- .btn {
- display: inline-block;
- margin-bottom: 0;
- }
- input[type="image"],
- input[type="checkbox"],
- input[type="radio"] {
- margin-top: 3px;
- }
- .input-append,
- .input-prepend {
- margin-top: 5px;
- white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
- input {
- margin-top: 0; // remove the margin on top since it's on the parent
- }
- }
-}
-
-// Navbar search
-// -------------------------
-.navbar-search {
- position: relative;
- float: left;
- .navbarVerticalAlign(30px); // Vertically center in navbar
- margin-bottom: 0;
- .search-query {
- margin-bottom: 0;
- padding: 4px 14px;
- #font > .sans-serif(13px, normal, 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-inner {
- .border-radius(0);
- }
-}
-
-
-
-// Fixed navbar
-// -------------------------
-
-// Shared (top/bottom) styles
-.navbar-fixed-top,
-.navbar-fixed-bottom {
- position: fixed;
- right: 0;
- left: 0;
- z-index: @zindexFixedNavbar;
- 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
-// Required here as we reset the width earlier on and the grid mixins don't override early enough
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
- #grid > .core > .span(@gridColumns);
-}
-
-// Fixed to top
-.navbar-fixed-top {
- top: 0;
-}
-.navbar-fixed-top,
-.navbar-static-top {
- .navbar-inner {
- .box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
- }
-}
-
-// Fixed to bottom
-.navbar-fixed-bottom {
- bottom: 0;
- .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 @navbarHeight
- padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2);
- color: @navbarLinkColor;
- text-decoration: none;
- text-shadow: 0 1px 0 @navbarBackgroundHighlight;
-}
-.navbar .nav .dropdown-toggle .caret {
- margin-top: 8px;
-}
-
-// Hover/focus
-.navbar .nav > li > a:focus,
-.navbar .nav > li > a:hover {
- background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
- color: @navbarLinkColorHover;
- text-decoration: none;
-}
-
-// Active nav items
-.navbar .nav > .active > a,
-.navbar .nav > .active > a:hover,
-.navbar .nav > .active > a:focus {
- color: @navbarLinkColorActive;
- text-decoration: none;
- background-color: @navbarLinkBackgroundActive;
- .box-shadow(inset 0 3px 8px rgba(0,0,0,.125));
-}
-
-// Navbar button for toggling navbar items in responsive layouts
-// These definitions need to come after '.navbar .btn'
-.navbar .btn-navbar {
- display: none;
- float: right;
- padding: 7px 10px;
- margin-left: 5px;
- margin-right: 5px;
- .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
- .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: @dropdownBorder;
- position: absolute;
- top: -7px;
- left: 9px;
- }
- &:after {
- content: '';
- display: inline-block;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-bottom: 6px solid @dropdownBackground;
- 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: @dropdownBorder;
- border-bottom: 0;
- bottom: -7px;
- top: auto;
- }
- &:after {
- border-top: 6px solid @dropdownBackground;
- 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: @navbarLinkColorHover;
- border-bottom-color: @navbarLinkColorHover;
-}
-
-// 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: @navbarLinkBackgroundActive;
- color: @navbarLinkColorActive;
-}
-.navbar .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarLinkColor;
- border-bottom-color: @navbarLinkColor;
-}
-.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: @navbarLinkColorActive;
- border-bottom-color: @navbarLinkColorActive;
-}
-
-// Right aligned menus need alt position
-.navbar .pull-right > li > .dropdown-menu,
-.navbar .nav > li > .dropdown-menu.pull-right {
- left: auto;
- right: 0;
- &:before {
- left: auto;
- right: 12px;
- }
- &:after {
- left: auto;
- right: 13px;
- }
- .dropdown-menu {
- left: auto;
- right: 100%;
- margin-left: 0;
- margin-right: -1px;
- .border-radius(6px 0 6px 6px);
- }
-}
-
-
-// Inverted navbar
-// -------------------------
-
-.navbar-inverse {
-
- .navbar-inner {
- #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
- border-color: @navbarInverseBorder;
- }
-
- .brand,
- .nav > li > a {
- color: @navbarInverseLinkColor;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- &:hover,
- &:focus {
- color: @navbarInverseLinkColorHover;
- }
- }
-
- .brand {
- color: @navbarInverseBrandColor;
- }
-
- .navbar-text {
- color: @navbarInverseText;
- }
-
- .nav > li > a:focus,
- .nav > li > a:hover {
- background-color: @navbarInverseLinkBackgroundHover;
- color: @navbarInverseLinkColorHover;
- }
-
- .nav .active > a,
- .nav .active > a:hover,
- .nav .active > a:focus {
- color: @navbarInverseLinkColorActive;
- background-color: @navbarInverseLinkBackgroundActive;
- }
-
- // Inline text links
- .navbar-link {
- color: @navbarInverseLinkColor;
- &:hover,
- &:focus {
- color: @navbarInverseLinkColorHover;
- }
- }
-
- // Dividers in navbar
- .divider-vertical {
- border-left-color: @navbarInverseBackground;
- border-right-color: @navbarInverseBackgroundHighlight;
- }
-
- // Dropdowns
- .nav li.dropdown.open > .dropdown-toggle,
- .nav li.dropdown.active > .dropdown-toggle,
- .nav li.dropdown.open.active > .dropdown-toggle {
- background-color: @navbarInverseLinkBackgroundActive;
- color: @navbarInverseLinkColorActive;
- }
- .nav li.dropdown > a:hover .caret,
- .nav li.dropdown > a:focus .caret {
- border-top-color: @navbarInverseLinkColorActive;
- border-bottom-color: @navbarInverseLinkColorActive;
- }
- .nav li.dropdown > .dropdown-toggle .caret {
- border-top-color: @navbarInverseLinkColor;
- border-bottom-color: @navbarInverseLinkColor;
- }
- .nav li.dropdown.open > .dropdown-toggle .caret,
- .nav li.dropdown.active > .dropdown-toggle .caret,
- .nav li.dropdown.open.active > .dropdown-toggle .caret {
- border-top-color: @navbarInverseLinkColorActive;
- border-bottom-color: @navbarInverseLinkColorActive;
- }
-
- // Navbar search
- .navbar-search {
- .search-query {
- color: @white;
- background-color: @navbarInverseSearchBackground;
- border-color: @navbarInverseSearchBorder;
- .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
- .transition(none);
- .placeholder(@navbarInverseSearchPlaceholderColor);
-
- // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
- &:focus,
- &.focused {
- padding: 5px 15px;
- color: @grayDark;
- text-shadow: 0 1px 0 @white;
- background-color: @navbarInverseSearchBackgroundFocus;
- border: 0;
- .box-shadow(0 0 3px rgba(0,0,0,.15));
- outline: 0;
- }
- }
- }
-
- // Navbar collapse button
- .btn-navbar {
- .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
- }
-
-}
diff --git a/css/navs.css b/css/navs.css
new file mode 100644
index 0000000..166efce
--- /dev/null
+++ b/css/navs.css
@@ -0,0 +1,373 @@
+/*
+ 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;
+}
diff --git a/css/navs.less b/css/navs.less
deleted file mode 100644
index 01cd805..0000000
--- a/css/navs.less
+++ /dev/null
@@ -1,409 +0,0 @@
-//
-// Navs
-// --------------------------------------------------
-
-
-// BASE CLASS
-// ----------
-
-.nav {
- margin-left: 0;
- margin-bottom: @baseLineHeight;
- 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: @grayLighter;
-}
-
-// Prevent IE8 from misplacing imgs
-// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
-.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: @baseLineHeight;
- color: @grayLight;
- 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: @white;
- text-shadow: 0 -1px 0 rgba(0,0,0,.2);
- background-color: @linkColor;
-}
-.nav-list [class^="icon-"],
-.nav-list [class*=" icon-"] {
- margin-right: 2px;
-}
-// Dividers (basically an hr) within the dropdown
-.nav-list .divider {
- .nav-divider();
-}
-
-
-
-// TABS AND PILLS
-// -------------
-
-// Common styles
-.nav-tabs,
-.nav-pills {
- .clearfix();
-}
-.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: @baseLineHeight;
- border: 1px solid transparent;
- .border-radius(4px 4px 0 0);
- &:hover,
- &:focus {
- border-color: @grayLighter @grayLighter #ddd;
- }
-}
-// Active state, and it's :hover/:focus to override normal :hover/:focus
-.nav-tabs > .active > a,
-.nav-tabs > .active > a:hover,
-.nav-tabs > .active > a:focus {
- color: @gray;
- background-color: @bodyBackground;
- 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: @white;
- background-color: @linkColor;
-}
-
-
-
-// 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-radius(4px);
-}
-.nav-tabs.nav-stacked > li:last-child > a {
- .border-bottom-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: @linkColor;
- border-bottom-color: @linkColor;
- margin-top: 6px;
-}
-.nav .dropdown-toggle:hover .caret,
-.nav .dropdown-toggle:focus .caret {
- border-top-color: @linkColorHover;
- border-bottom-color: @linkColorHover;
-}
-/* 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: @gray;
- border-bottom-color: @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: @white;
- background-color: @grayLight;
- border-color: @grayLight;
-}
-.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: @white;
- border-bottom-color: @white;
- .opacity(100);
-}
-
-// Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover,
-.tabs-stacked .open > a:focus {
- border-color: @grayLight;
-}
-
-
-
-// TABBABLE
-// --------
-
-
-// COMMON STYLES
-// -------------
-
-// Clear any floats
-.tabbable {
- .clearfix();
-}
-.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);
- &:hover,
- &: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: @grayLighter #ddd @grayLighter @grayLighter;
-}
-.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;
- *border-right-color: @white;
-}
-
-// 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: @grayLighter @grayLighter @grayLighter #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;
- *border-left-color: @white;
-}
-
-
-
-// DISABLED STATES
-// ---------------
-
-// Gray out text
-.nav > .disabled > a {
- color: @grayLight;
-}
-// Nuke hover/focus effects
-.nav > .disabled > a:hover,
-.nav > .disabled > a:focus {
- text-decoration: none;
- background-color: transparent;
- cursor: default;
-}
diff --git a/css/pager.css b/css/pager.css
new file mode 100644
index 0000000..8fd781c
--- /dev/null
+++ b/css/pager.css
@@ -0,0 +1,47 @@
+/*
+ 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;
+}
diff --git a/css/pager.less b/css/pager.less
deleted file mode 100644
index 1476188..0000000
--- a/css/pager.less
+++ /dev/null
@@ -1,43 +0,0 @@
-//
-// Pager pagination
-// --------------------------------------------------
-
-
-.pager {
- margin: @baseLineHeight 0;
- list-style: none;
- text-align: center;
- .clearfix();
-}
-.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: @grayLight;
- background-color: #fff;
- cursor: default;
-}
\ No newline at end of file
diff --git a/css/pagination.css b/css/pagination.css
new file mode 100644
index 0000000..1be61ae
--- /dev/null
+++ b/css/pagination.css
@@ -0,0 +1,116 @@
+/*
+ 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);
+}
diff --git a/css/pagination.less b/css/pagination.less
deleted file mode 100644
index a789db2..0000000
--- a/css/pagination.less
+++ /dev/null
@@ -1,123 +0,0 @@
-//
-// Pagination (multiple pages)
-// --------------------------------------------------
-
-// Space out pagination from surrounding content
-.pagination {
- margin: @baseLineHeight 0;
-}
-
-.pagination ul {
- // Allow for text-based alignment
- display: inline-block;
- .ie7-inline-block();
- // Reset default ul styles
- margin-left: 0;
- margin-bottom: 0;
- // Visuals
- .border-radius(@baseBorderRadius);
- .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: @baseLineHeight;
- text-decoration: none;
- background-color: @paginationBackground;
- border: 1px solid @paginationBorder;
- border-left-width: 0;
-}
-.pagination ul > li > a:hover,
-.pagination ul > li > a:focus,
-.pagination ul > .active > a,
-.pagination ul > .active > span {
- background-color: @paginationActiveBackground;
-}
-.pagination ul > .active > a,
-.pagination ul > .active > span {
- color: @grayLight;
- cursor: default;
-}
-.pagination ul > .disabled > span,
-.pagination ul > .disabled > a,
-.pagination ul > .disabled > a:hover,
-.pagination ul > .disabled > a:focus {
- color: @grayLight;
- background-color: transparent;
- cursor: default;
-}
-.pagination ul > li:first-child > a,
-.pagination ul > li:first-child > span {
- border-left-width: 1px;
- .border-left-radius(@baseBorderRadius);
-}
-.pagination ul > li:last-child > a,
-.pagination ul > li:last-child > span {
- .border-right-radius(@baseBorderRadius);
-}
-
-
-// Alignment
-// --------------------------------------------------
-
-.pagination-centered {
- text-align: center;
-}
-.pagination-right {
- text-align: right;
-}
-
-
-// Sizing
-// --------------------------------------------------
-
-// Large
-.pagination-large {
- ul > li > a,
- ul > li > span {
- padding: @paddingLarge;
- font-size: @fontSizeLarge;
- }
- ul > li:first-child > a,
- ul > li:first-child > span {
- .border-left-radius(@borderRadiusLarge);
- }
- ul > li:last-child > a,
- ul > li:last-child > span {
- .border-right-radius(@borderRadiusLarge);
- }
-}
-
-// Small and mini
-.pagination-mini,
-.pagination-small {
- ul > li:first-child > a,
- ul > li:first-child > span {
- .border-left-radius(@borderRadiusSmall);
- }
- ul > li:last-child > a,
- ul > li:last-child > span {
- .border-right-radius(@borderRadiusSmall);
- }
-}
-
-// Small
-.pagination-small {
- ul > li > a,
- ul > li > span {
- padding: @paddingSmall;
- font-size: @fontSizeSmall;
- }
-}
-// Mini
-.pagination-mini {
- ul > li > a,
- ul > li > span {
- padding: @paddingMini;
- font-size: @fontSizeMini;
- }
-}
diff --git a/css/popovers.css b/css/popovers.css
new file mode 100644
index 0000000..2dbfaa4
--- /dev/null
+++ b/css/popovers.css
@@ -0,0 +1,123 @@
+/*
+ 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);
+}
diff --git a/css/popovers.less b/css/popovers.less
deleted file mode 100644
index aae35c8..0000000
--- a/css/popovers.less
+++ /dev/null
@@ -1,133 +0,0 @@
-//
-// Popovers
-// --------------------------------------------------
-
-
-.popover {
- position: absolute;
- top: 0;
- left: 0;
- z-index: @zindexPopover;
- display: none;
- max-width: 276px;
- padding: 1px;
- text-align: left; // Reset given new insertion method
- background-color: @popoverBackground;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding;
- 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
- &.top { margin-top: -10px; }
- &.right { margin-left: 10px; }
- &.bottom { margin-top: 10px; }
- &.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: @popoverTitleBackground;
- border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
- .border-radius(5px 5px 0 0);
-
- &: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: @popoverArrowOuterWidth;
-}
-.popover .arrow:after {
- border-width: @popoverArrowWidth;
- content: "";
-}
-
-.popover {
- &.top .arrow {
- left: 50%;
- margin-left: -@popoverArrowOuterWidth;
- border-bottom-width: 0;
- border-top-color: #999; // IE8 fallback
- border-top-color: @popoverArrowOuterColor;
- bottom: -@popoverArrowOuterWidth;
- &:after {
- bottom: 1px;
- margin-left: -@popoverArrowWidth;
- border-bottom-width: 0;
- border-top-color: @popoverArrowColor;
- }
- }
- &.right .arrow {
- top: 50%;
- left: -@popoverArrowOuterWidth;
- margin-top: -@popoverArrowOuterWidth;
- border-left-width: 0;
- border-right-color: #999; // IE8 fallback
- border-right-color: @popoverArrowOuterColor;
- &:after {
- left: 1px;
- bottom: -@popoverArrowWidth;
- border-left-width: 0;
- border-right-color: @popoverArrowColor;
- }
- }
- &.bottom .arrow {
- left: 50%;
- margin-left: -@popoverArrowOuterWidth;
- border-top-width: 0;
- border-bottom-color: #999; // IE8 fallback
- border-bottom-color: @popoverArrowOuterColor;
- top: -@popoverArrowOuterWidth;
- &:after {
- top: 1px;
- margin-left: -@popoverArrowWidth;
- border-top-width: 0;
- border-bottom-color: @popoverArrowColor;
- }
- }
-
- &.left .arrow {
- top: 50%;
- right: -@popoverArrowOuterWidth;
- margin-top: -@popoverArrowOuterWidth;
- border-right-width: 0;
- border-left-color: #999; // IE8 fallback
- border-left-color: @popoverArrowOuterColor;
- &:after {
- right: 1px;
- border-right-width: 0;
- border-left-color: @popoverArrowColor;
- bottom: -@popoverArrowWidth;
- }
- }
-
-}
diff --git a/css/progress-bars.css b/css/progress-bars.css
new file mode 100644
index 0000000..877d8d0
--- /dev/null
+++ b/css/progress-bars.css
@@ -0,0 +1,85 @@
+/*
+ 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);
+}
diff --git a/css/progress-bars.less b/css/progress-bars.less
deleted file mode 100644
index 5e0c3dd..0000000
--- a/css/progress-bars.less
+++ /dev/null
@@ -1,122 +0,0 @@
-//
-// Progress bars
-// --------------------------------------------------
-
-
-// ANIMATIONS
-// ----------
-
-// Webkit
-@-webkit-keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
-}
-
-// Firefox
-@-moz-keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
-}
-
-// IE9
-@-ms-keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
-}
-
-// Opera
-@-o-keyframes progress-bar-stripes {
- from { background-position: 0 0; }
- to { background-position: 40px 0; }
-}
-
-// Spec
-@keyframes progress-bar-stripes {
- from { background-position: 40px 0; }
- to { background-position: 0 0; }
-}
-
-
-
-// THE BARS
-// --------
-
-// Outer container
-.progress {
- overflow: hidden;
- height: @baseLineHeight;
- margin-bottom: @baseLineHeight;
- #gradient > .vertical(#f5f5f5, #f9f9f9);
- .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
- .border-radius(@baseBorderRadius);
-}
-
-// Bar of progress
-.progress .bar {
- width: 0%;
- height: 100%;
- color: @white;
- float: left;
- font-size: 12px;
- text-align: center;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- #gradient > .vertical(#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 {
- #gradient > .striped(#149bdf);
- .background-size(40px 40px);
-}
-
-// Call animation for the active one
-.progress.active .bar {
- -webkit-animation: progress-bar-stripes 2s linear infinite;
- -moz-animation: progress-bar-stripes 2s linear infinite;
- -ms-animation: progress-bar-stripes 2s linear infinite;
- -o-animation: progress-bar-stripes 2s linear infinite;
- animation: progress-bar-stripes 2s linear infinite;
-}
-
-
-
-// COLORS
-// ------
-
-// Danger (red)
-.progress-danger .bar, .progress .bar-danger {
- #gradient > .vertical(#ee5f5b, #c43c35);
-}
-.progress-danger.progress-striped .bar, .progress-striped .bar-danger {
- #gradient > .striped(#ee5f5b);
-}
-
-// Success (green)
-.progress-success .bar, .progress .bar-success {
- #gradient > .vertical(#62c462, #57a957);
-}
-.progress-success.progress-striped .bar, .progress-striped .bar-success {
- #gradient > .striped(#62c462);
-}
-
-// Info (teal)
-.progress-info .bar, .progress .bar-info {
- #gradient > .vertical(#5bc0de, #339bb9);
-}
-.progress-info.progress-striped .bar, .progress-striped .bar-info {
- #gradient > .striped(#5bc0de);
-}
-
-// Warning (orange)
-.progress-warning .bar, .progress .bar-warning {
- #gradient > .vertical(lighten(@orange, 15%), @orange);
-}
-.progress-warning.progress-striped .bar, .progress-striped .bar-warning {
- #gradient > .striped(lighten(@orange, 15%));
-}
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..99effd5
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,203 @@
+/*
+ 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;
+ }
+}
diff --git a/css/reset.less b/css/reset.less
deleted file mode 100644
index 4806bd5..0000000
--- a/css/reset.less
+++ /dev/null
@@ -1,216 +0,0 @@
-//
-// Reset CSS
-// Adapted from http://github.com/necolas/normalize.css
-// --------------------------------------------------
-
-
-// Display in IE6-9 and FF3
-// -------------------------
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section {
- display: block;
-}
-
-// Display block in IE6-9 and FF3
-// -------------------------
-
-audio,
-canvas,
-video {
- display: inline-block;
- *display: inline;
- *zoom: 1;
-}
-
-// Prevents modern browsers from displaying 'audio' without controls
-// -------------------------
-
-audio:not([controls]) {
- display: none;
-}
-
-// Base settings
-// -------------------------
-
-html {
- font-size: 100%;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
-}
-// Focus states
-a:focus {
- .tab-focus();
-}
-// Hover & Active
-a:hover,
-a:active {
- outline: 0;
-}
-
-// Prevents sub and sup affecting line-height in all browsers
-// -------------------------
-
-sub,
-sup {
- position: relative;
- font-size: 75%;
- line-height: 0;
- vertical-align: baseline;
-}
-sup {
- top: -0.5em;
-}
-sub {
- bottom: -0.25em;
-}
-
-// Img border in a's and image quality
-// -------------------------
-
-img {
- /* Responsive images (ensure images don't scale beyond their parents) */
- max-width: 100%; /* Part 1: Set a maxium relative to the parent */
- width: auto\9; /* IE7-8 need help adjusting responsive images */
- height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
-
- vertical-align: middle;
- border: 0;
- -ms-interpolation-mode: bicubic;
-}
-
-// Prevent max-width from affecting Google Maps
-#map_canvas img,
-.google-maps img {
- max-width: none;
-}
-
-// Forms
-// -------------------------
-
-// Font size in all browsers, margin changes, misc consistency
-button,
-input,
-select,
-textarea {
- margin: 0;
- font-size: 100%;
- vertical-align: middle;
-}
-button,
-input {
- *overflow: visible; // Inner spacing ie IE6/7
- line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
- padding: 0;
- border: 0;
-}
-button,
-html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
-input[type="reset"],
-input[type="submit"] {
- -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
- cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
-}
-label,
-select,
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"],
-input[type="radio"],
-input[type="checkbox"] {
- cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
-}
-input[type="search"] { // Appearance in Safari/Chrome
- .box-sizing(content-box);
- -webkit-appearance: textfield;
-}
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button {
- -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
-}
-textarea {
- overflow: auto; // Remove vertical scrollbar in IE6-9
- vertical-align: top; // Readability and alignment cross-browser
-}
-
-
-// Printing
-// -------------------------
-// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
-
-@media print {
-
- * {
- text-shadow: none !important;
- color: #000 !important; // Black prints faster: h5bp.com/s
- 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; // h5bp.com/t
- }
-
- 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;
- }
-}
diff --git a/css/responsive-1200px-min.css b/css/responsive-1200px-min.css
new file mode 100644
index 0000000..77c6105
--- /dev/null
+++ b/css/responsive-1200px-min.css
@@ -0,0 +1,98 @@
+/*
+ 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;
+ }
+}
diff --git a/css/responsive-1200px-min.less b/css/responsive-1200px-min.less
deleted file mode 100644
index 4f35ba6..0000000
--- a/css/responsive-1200px-min.less
+++ /dev/null
@@ -1,28 +0,0 @@
-//
-// Responsive: Large desktop and up
-// --------------------------------------------------
-
-
-@media (min-width: 1200px) {
-
- // Fixed grid
- #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
-
- // Fluid grid
- #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
-
- // Input grid
- #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
-
- // Thumbnails
- .thumbnails {
- margin-left: -@gridGutterWidth1200;
- }
- .thumbnails > li {
- margin-left: @gridGutterWidth1200;
- }
- .row-fluid .thumbnails {
- margin-left: 0;
- }
-
-}
diff --git a/css/responsive-767px-max.css b/css/responsive-767px-max.css
new file mode 100644
index 0000000..17e8b24
--- /dev/null
+++ b/css/responsive-767px-max.css
@@ -0,0 +1,197 @@
+/*
+ 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;
+ }
+}
diff --git a/css/responsive-767px-max.less b/css/responsive-767px-max.less
deleted file mode 100644
index 128f4ce..0000000
--- a/css/responsive-767px-max.less
+++ /dev/null
@@ -1,193 +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;
- }
- 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"], // Makes uneditable inputs full-width when using grid sizing
- .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 {
- .input-block-level();
- }
- // 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; // redeclare so they don't wrap to new lines
- 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;
- &.fade { top: -100px; }
- &.fade.in { top: 20px; }
- }
-
-}
-
-
-
-// UP TO LANDSCAPE PHONE
-// ---------------------
-
-@media (max-width: 480px) {
-
- // Smooth out the collapsing/expanding nav
- .nav-collapse {
- -webkit-transform: translate3d(0, 0, 0); // activate the GPU
- }
-
- // Block level the page header small tag for readability
- .page-header h1 small {
- display: block;
- line-height: @baseLineHeight;
- }
-
- // 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
- .controls {
- margin-left: 0;
- }
- // Move the options list down to align with labels
- .control-list {
- padding-top: 0; // has to be padding because margin collaspes
- }
- // Move over buttons in .form-actions to align with .controls
- .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;
- }
-
-}
diff --git a/css/responsive-768px-979px.css b/css/responsive-768px-979px.css
new file mode 100644
index 0000000..877d0ac
--- /dev/null
+++ b/css/responsive-768px-979px.css
@@ -0,0 +1,89 @@
+/*
+ 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... */
+}
diff --git a/css/responsive-768px-979px.less b/css/responsive-768px-979px.less
deleted file mode 100644
index 8e8c486..0000000
--- a/css/responsive-768px-979px.less
+++ /dev/null
@@ -1,19 +0,0 @@
-//
-// Responsive: Tablet to desktop
-// --------------------------------------------------
-
-
-@media (min-width: 768px) and (max-width: 979px) {
-
- // Fixed grid
- #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
-
- // Fluid grid
- #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
-
- // Input grid
- #grid > .input(@gridColumnWidth768, @gridGutterWidth768);
-
- // No need to reset .thumbnails here since it's the same @gridGutterWidth
-
-}
diff --git a/css/responsive-navbar.css b/css/responsive-navbar.css
new file mode 100644
index 0000000..afda53f
--- /dev/null
+++ b/css/responsive-navbar.css
@@ -0,0 +1,202 @@
+/*
+ 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;
+ }
+}
diff --git a/css/responsive-navbar.less b/css/responsive-navbar.less
deleted file mode 100644
index 21cd3ba..0000000
--- a/css/responsive-navbar.less
+++ /dev/null
@@ -1,189 +0,0 @@
-//
-// Responsive: Navbar
-// --------------------------------------------------
-
-
-// TABLETS AND BELOW
-// -----------------
-@media (max-width: @navbarCollapseWidth) {
-
- // 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: @baseLineHeight;
- }
- .navbar-fixed-bottom {
- margin-top: @baseLineHeight;
- }
- .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 (@baseLineHeight / 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: @navbarText;
- 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: @navbarLinkColor;
- .border-radius(3px);
- }
- // Buttons
- .nav-collapse .btn {
- padding: 4px 10px 4px;
- font-weight: normal;
- .border-radius(@baseBorderRadius);
- }
- .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: @navbarBackground;
- }
- .navbar-inverse .nav-collapse .nav > li > a,
- .navbar-inverse .nav-collapse .dropdown-menu a {
- color: @navbarInverseLinkColor;
- }
- .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: @navbarInverseBackground;
- }
- // 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,
- &:after {
- display: none;
- }
- }
- // Forms in navbar
- .nav-collapse .navbar-form,
- .nav-collapse .navbar-search {
- float: none;
- padding: (@baseLineHeight / 2) 15px;
- margin: (@baseLineHeight / 2) 0;
- border-top: 1px solid @navbarBackground;
- border-bottom: 1px solid @navbarBackground;
- .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: @navbarInverseBackground;
- border-bottom-color: @navbarInverseBackground;
- }
- // 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: @navbarCollapseDesktopWidth) {
-
- // Required to make the collapsing navbar work on regular desktops
- .nav-collapse.collapse {
- height: auto !important;
- overflow: visible !important;
- }
-
-}
diff --git a/css/responsive-utilities.css b/css/responsive-utilities.css
new file mode 100644
index 0000000..18b54d3
--- /dev/null
+++ b/css/responsive-utilities.css
@@ -0,0 +1,56 @@
+/*
+ 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; }
+}
diff --git a/css/responsive-utilities.less b/css/responsive-utilities.less
deleted file mode 100644
index bf43e8e..0000000
--- a/css/responsive-utilities.less
+++ /dev/null
@@ -1,59 +0,0 @@
-//
-// Responsive: Utility classes
-// --------------------------------------------------
-
-
-// IE10 Metro responsive
-// Required for Windows 8 Metro split-screen snapping with IE10
-// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
-@-ms-viewport{
- width: device-width;
-}
-
-// Hide from screenreaders and browsers
-// Credit: HTML5 Boilerplate
-.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; } // Use inherit to restore previous behavior
- // Hide
- .hidden-phone { display: none !important; }
-}
-
-// Print utilities
-.visible-print { display: none !important; }
-.hidden-print { }
-
-@media print {
- .visible-print { display: inherit !important; }
- .hidden-print { display: none !important; }
-}
diff --git a/css/responsive.css b/css/responsive.css
new file mode 100644
index 0000000..038e905
--- /dev/null
+++ b/css/responsive.css
@@ -0,0 +1,18 @@
+/*
+ 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
+*/
diff --git a/css/responsive.less b/css/responsive.less
deleted file mode 100644
index 3d4c58c..0000000
--- a/css/responsive.less
+++ /dev/null
@@ -1,48 +0,0 @@
-/*!
- * Bootstrap Responsive v2.3.2
- *
- * Copyright 2013 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world by @mdo and @fat.
- */
-
-
-// Responsive.less
-// For phone and tablet devices
-// -------------------------------------------------------------
-
-
-// REPEAT VARIABLES & MIXINS
-// -------------------------
-// Required since we compile the responsive stuff separately
-
-@import "variables.less"; // Modify this for custom colors, font-sizes, etc
-@import "mixins.less";
-
-
-// RESPONSIVE CLASSES
-// ------------------
-
-@import "responsive-utilities.less";
-
-
-// MEDIA QUERIES
-// ------------------
-
-// Large desktops
-@import "responsive-1200px-min.less";
-
-// Tablets to regular desktops
-@import "responsive-768px-979px.less";
-
-// Phones to portrait tablets and narrow desktops
-@import "responsive-767px-max.less";
-
-
-// RESPONSIVE NAVBAR
-// ------------------
-
-// From 979px and below, show a button to toggle navbar contents
-@import "responsive-navbar.less";
diff --git a/css/scaffolding.css b/css/scaffolding.css
new file mode 100644
index 0000000..7a6a70c
--- /dev/null
+++ b/css/scaffolding.css
@@ -0,0 +1,46 @@
+/*
+ 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 */
+}
diff --git a/css/scaffolding.less b/css/scaffolding.less
deleted file mode 100644
index f17e8ca..0000000
--- a/css/scaffolding.less
+++ /dev/null
@@ -1,53 +0,0 @@
-//
-// Scaffolding
-// --------------------------------------------------
-
-
-// Body reset
-// -------------------------
-
-body {
- margin: 0;
- font-family: @baseFontFamily;
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
- color: @textColor;
- background-color: @bodyBackground;
-}
-
-
-// Links
-// -------------------------
-
-a {
- color: @linkColor;
- text-decoration: none;
-}
-a:hover,
-a:focus {
- color: @linkColorHover;
- 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
-}
diff --git a/css/sprites.css b/css/sprites.css
new file mode 100644
index 0000000..8e20f36
--- /dev/null
+++ b/css/sprites.css
@@ -0,0 +1,115 @@
+/*
+ Sprites
+ ========================================
+*/
+
+/* ICONS */
+
+/*
+ All icons receive the styles of the 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
+ .
+
+ For the white version of the icons, just add the .icon-white class:
+
+*/
+
+ [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... */
diff --git a/css/sprites.less b/css/sprites.less
deleted file mode 100644
index 1812bf7..0000000
--- a/css/sprites.less
+++ /dev/null
@@ -1,197 +0,0 @@
-//
-// Sprites
-// --------------------------------------------------
-
-
-// ICONS
-// -----
-
-// All icons receive the styles of the 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
-// .
-
-// For the white version of the icons, just add the .icon-white class:
-//
-
-[class^="icon-"],
-[class*=" icon-"] {
- display: inline-block;
- width: 14px;
- height: 14px;
- .ie7-restore-right-whitespace();
- line-height: 14px;
- vertical-align: text-top;
- background-image: url("@{iconSpritePath}");
- 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: url("@{iconWhiteSpritePath}");
-}
-
-.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; }
-
-.icon-pencil { background-position: 0 -72px; }
-.icon-map-marker { background-position: -24px -72px; }
-.icon-adjust { background-position: -48px -72px; }
-.icon-tint { background-position: -72px -72px; }
-.icon-edit { background-position: -96px -72px; }
-.icon-share { background-position: -120px -72px; }
-.icon-check { background-position: -144px -72px; }
-.icon-move { background-position: -168px -72px; }
-.icon-step-backward { background-position: -192px -72px; }
-.icon-fast-backward { background-position: -216px -72px; }
-.icon-backward { background-position: -240px -72px; }
-.icon-play { background-position: -264px -72px; }
-.icon-pause { background-position: -288px -72px; }
-.icon-stop { background-position: -312px -72px; }
-.icon-forward { background-position: -336px -72px; }
-.icon-fast-forward { background-position: -360px -72px; }
-.icon-step-forward { background-position: -384px -72px; }
-.icon-eject { background-position: -408px -72px; }
-.icon-chevron-left { background-position: -432px -72px; }
-.icon-chevron-right { background-position: -456px -72px; }
-
-.icon-plus-sign { background-position: 0 -96px; }
-.icon-minus-sign { background-position: -24px -96px; }
-.icon-remove-sign { background-position: -48px -96px; }
-.icon-ok-sign { background-position: -72px -96px; }
-.icon-question-sign { background-position: -96px -96px; }
-.icon-info-sign { background-position: -120px -96px; }
-.icon-screenshot { background-position: -144px -96px; }
-.icon-remove-circle { background-position: -168px -96px; }
-.icon-ok-circle { background-position: -192px -96px; }
-.icon-ban-circle { background-position: -216px -96px; }
-.icon-arrow-left { background-position: -240px -96px; }
-.icon-arrow-right { background-position: -264px -96px; }
-.icon-arrow-up { background-position: -289px -96px; } // 1px off
-.icon-arrow-down { background-position: -312px -96px; }
-.icon-share-alt { background-position: -336px -96px; }
-.icon-resize-full { background-position: -360px -96px; }
-.icon-resize-small { background-position: -384px -96px; }
-.icon-plus { background-position: -408px -96px; }
-.icon-minus { background-position: -433px -96px; }
-.icon-asterisk { background-position: -456px -96px; }
-
-.icon-exclamation-sign { background-position: 0 -120px; }
-.icon-gift { background-position: -24px -120px; }
-.icon-leaf { background-position: -48px -120px; }
-.icon-fire { background-position: -72px -120px; }
-.icon-eye-open { background-position: -96px -120px; }
-.icon-eye-close { background-position: -120px -120px; }
-.icon-warning-sign { background-position: -144px -120px; }
-.icon-plane { background-position: -168px -120px; }
-.icon-calendar { background-position: -192px -120px; }
-.icon-random { background-position: -216px -120px; width: 16px; }
-.icon-comment { background-position: -240px -120px; }
-.icon-magnet { background-position: -264px -120px; }
-.icon-chevron-up { background-position: -288px -120px; }
-.icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off
-.icon-retweet { background-position: -336px -120px; }
-.icon-shopping-cart { background-position: -360px -120px; }
-.icon-folder-close { background-position: -384px -120px; width: 16px; }
-.icon-folder-open { background-position: -408px -120px; width: 16px; }
-.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off
-.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off
-
-.icon-hdd { background-position: 0 -144px; }
-.icon-bullhorn { background-position: -24px -144px; }
-.icon-bell { background-position: -48px -144px; }
-.icon-certificate { background-position: -72px -144px; }
-.icon-thumbs-up { background-position: -96px -144px; }
-.icon-thumbs-down { background-position: -120px -144px; }
-.icon-hand-right { background-position: -144px -144px; }
-.icon-hand-left { background-position: -168px -144px; }
-.icon-hand-up { background-position: -192px -144px; }
-.icon-hand-down { background-position: -216px -144px; }
-.icon-circle-arrow-right { background-position: -240px -144px; }
-.icon-circle-arrow-left { background-position: -264px -144px; }
-.icon-circle-arrow-up { background-position: -288px -144px; }
-.icon-circle-arrow-down { background-position: -312px -144px; }
-.icon-globe { background-position: -336px -144px; }
-.icon-wrench { background-position: -360px -144px; }
-.icon-tasks { background-position: -384px -144px; }
-.icon-filter { background-position: -408px -144px; }
-.icon-briefcase { background-position: -432px -144px; }
-.icon-fullscreen { background-position: -456px -144px; }
diff --git a/css/tables.css b/css/tables.css
new file mode 100644
index 0000000..6c7166a
--- /dev/null
+++ b/css/tables.css
@@ -0,0 +1,232 @@
+/*
+ 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%);
+}
diff --git a/css/tables.less b/css/tables.less
deleted file mode 100644
index 0e35271..0000000
--- a/css/tables.less
+++ /dev/null
@@ -1,244 +0,0 @@
-//
-// Tables
-// --------------------------------------------------
-
-
-// BASE TABLES
-// -----------------
-
-table {
- max-width: 100%;
- background-color: @tableBackground;
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-// BASELINE STYLES
-// ---------------
-
-.table {
- width: 100%;
- margin-bottom: @baseLineHeight;
- // Cells
- th,
- td {
- padding: 8px;
- line-height: @baseLineHeight;
- text-align: left;
- vertical-align: top;
- border-top: 1px solid @tableBorder;
- }
- th {
- font-weight: bold;
- }
- // Bottom align for column headings
- thead th {
- vertical-align: bottom;
- }
- // Remove top border from thead by default
- caption + thead tr:first-child th,
- caption + thead tr:first-child td,
- colgroup + thead tr:first-child th,
- colgroup + thead tr:first-child td,
- thead:first-child tr:first-child th,
- thead:first-child tr:first-child td {
- border-top: 0;
- }
- // Account for multiple tbody instances
- tbody + tbody {
- border-top: 2px solid @tableBorder;
- }
-
- // Nesting
- .table {
- background-color: @bodyBackground;
- }
-}
-
-
-
-// CONDENSED TABLE W/ HALF PADDING
-// -------------------------------
-
-.table-condensed {
- th,
- td {
- padding: 4px 5px;
- }
-}
-
-
-// BORDERED VERSION
-// ----------------
-
-.table-bordered {
- border: 1px solid @tableBorder;
- border-collapse: separate; // Done so we can round those corners!
- *border-collapse: collapse; // IE7 can't round corners anyway
- border-left: 0;
- .border-radius(@baseBorderRadius);
- th,
- td {
- border-left: 1px solid @tableBorder;
- }
- // Prevent a double border
- caption + thead tr:first-child th,
- caption + tbody tr:first-child th,
- caption + tbody tr:first-child td,
- colgroup + thead tr:first-child th,
- colgroup + tbody tr:first-child th,
- colgroup + tbody tr:first-child td,
- thead:first-child tr:first-child th,
- tbody:first-child tr:first-child th,
- tbody:first-child tr:first-child td {
- border-top: 0;
- }
- // For first th/td in the first row in the first thead or tbody
- thead:first-child tr:first-child > th:first-child,
- tbody:first-child tr:first-child > td:first-child,
- tbody:first-child tr:first-child > th:first-child {
- .border-top-left-radius(@baseBorderRadius);
- }
- // For last th/td in the first row in the first thead or tbody
- thead:first-child tr:first-child > th:last-child,
- tbody:first-child tr:first-child > td:last-child,
- tbody:first-child tr:first-child > th:last-child {
- .border-top-right-radius(@baseBorderRadius);
- }
- // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
- thead:last-child tr:last-child > th:first-child,
- tbody:last-child tr:last-child > td:first-child,
- tbody:last-child tr:last-child > th:first-child,
- tfoot:last-child tr:last-child > td:first-child,
- tfoot:last-child tr:last-child > th:first-child {
- .border-bottom-left-radius(@baseBorderRadius);
- }
- // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
- thead:last-child tr:last-child > th:last-child,
- tbody:last-child tr:last-child > td:last-child,
- tbody:last-child tr:last-child > th:last-child,
- tfoot:last-child tr:last-child > td:last-child,
- tfoot:last-child tr:last-child > th:last-child {
- .border-bottom-right-radius(@baseBorderRadius);
- }
-
- // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
- tfoot + tbody:last-child tr:last-child td:first-child {
- .border-bottom-left-radius(0);
- }
- 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
- caption + thead tr:first-child th:first-child,
- caption + tbody tr:first-child td:first-child,
- colgroup + thead tr:first-child th:first-child,
- colgroup + tbody tr:first-child td:first-child {
- .border-top-left-radius(@baseBorderRadius);
- }
- caption + thead tr:first-child th:last-child,
- caption + tbody tr:first-child td:last-child,
- colgroup + thead tr:first-child th:last-child,
- colgroup + tbody tr:first-child td:last-child {
- .border-top-right-radius(@baseBorderRadius);
- }
-
-}
-
-
-
-
-// ZEBRA-STRIPING
-// --------------
-
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-.table-striped {
- tbody {
- > tr:nth-child(odd) > td,
- > tr:nth-child(odd) > th {
- background-color: @tableBackgroundAccent;
- }
- }
-}
-
-
-// HOVER EFFECT
-// ------------
-// Placed here since it has to come after the potential zebra striping
-.table-hover {
- tbody {
- tr:hover > td,
- tr:hover > th {
- background-color: @tableBackgroundHover;
- }
- }
-}
-
-
-// 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; // undo default grid column styles
- margin-left: 0; // undo default grid column styles
-}
-
-// Change the column widths to account for td/th padding
-.table td,
-.table th {
- &.span1 { .tableColumns(1); }
- &.span2 { .tableColumns(2); }
- &.span3 { .tableColumns(3); }
- &.span4 { .tableColumns(4); }
- &.span5 { .tableColumns(5); }
- &.span6 { .tableColumns(6); }
- &.span7 { .tableColumns(7); }
- &.span8 { .tableColumns(8); }
- &.span9 { .tableColumns(9); }
- &.span10 { .tableColumns(10); }
- &.span11 { .tableColumns(11); }
- &.span12 { .tableColumns(12); }
-}
-
-
-
-// TABLE BACKGROUNDS
-// -----------------
-// Exact selectors below required to override .table-striped
-
-.table tbody tr {
- &.success > td {
- background-color: @successBackground;
- }
- &.error > td {
- background-color: @errorBackground;
- }
- &.warning > td {
- background-color: @warningBackground;
- }
- &.info > td {
- background-color: @infoBackground;
- }
-}
-
-// Hover states for .table-hover
-.table-hover tbody tr {
- &.success:hover > td {
- background-color: darken(@successBackground, 5%);
- }
- &.error:hover > td {
- background-color: darken(@errorBackground, 5%);
- }
- &.warning:hover > td {
- background-color: darken(@warningBackground, 5%);
- }
- &.info:hover > td {
- background-color: darken(@infoBackground, 5%);
- }
-}
diff --git a/css/tests/buttons.html b/css/tests/buttons.html
index 9b3c2c5..8cb85e9 100644
--- a/css/tests/buttons.html
+++ b/css/tests/buttons.html
@@ -8,26 +8,14 @@
-
+
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/css/thumbnails.css b/css/thumbnails.css
new file mode 100644
index 0000000..0baace2
--- /dev/null
+++ b/css/thumbnails.css
@@ -0,0 +1,61 @@
+/*
+ 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);
+}
diff --git a/css/thumbnails.less b/css/thumbnails.less
deleted file mode 100644
index 4fd07d2..0000000
--- a/css/thumbnails.less
+++ /dev/null
@@ -1,53 +0,0 @@
-//
-// Thumbnails
-// --------------------------------------------------
-
-
-// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files
-
-// Make wrapper ul behave like the grid
-.thumbnails {
- margin-left: -@gridGutterWidth;
- list-style: none;
- .clearfix();
-}
-// 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: @baseLineHeight;
- margin-left: @gridGutterWidth;
-}
-
-// The actual thumbnail (can be `a` or `div`)
-.thumbnail {
- display: block;
- padding: 4px;
- line-height: @baseLineHeight;
- border: 1px solid #ddd;
- .border-radius(@baseBorderRadius);
- .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: @linkColor;
- .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: @gray;
-}
diff --git a/css/tooltip.css b/css/tooltip.css
new file mode 100644
index 0000000..5c0291e
--- /dev/null
+++ b/css/tooltip.css
@@ -0,0 +1,91 @@
+/*
+ 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);
+}
diff --git a/css/tooltip.less b/css/tooltip.less
deleted file mode 100644
index 83d5f2b..0000000
--- a/css/tooltip.less
+++ /dev/null
@@ -1,70 +0,0 @@
-//
-// Tooltips
-// --------------------------------------------------
-
-
-// Base class
-.tooltip {
- position: absolute;
- z-index: @zindexTooltip;
- display: block;
- visibility: visible;
- font-size: 11px;
- line-height: 1.4;
- .opacity(0);
- &.in { .opacity(80); }
- &.top { margin-top: -3px; padding: 5px 0; }
- &.right { margin-left: 3px; padding: 0 5px; }
- &.bottom { margin-top: 3px; padding: 5px 0; }
- &.left { margin-left: -3px; padding: 0 5px; }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
- max-width: 200px;
- padding: 8px;
- color: @tooltipColor;
- text-align: center;
- text-decoration: none;
- background-color: @tooltipBackground;
- .border-radius(@baseBorderRadius);
-}
-
-// 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: -@tooltipArrowWidth;
- border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
- border-top-color: @tooltipArrowColor;
- }
- &.right .tooltip-arrow {
- top: 50%;
- left: 0;
- margin-top: -@tooltipArrowWidth;
- border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
- border-right-color: @tooltipArrowColor;
- }
- &.left .tooltip-arrow {
- top: 50%;
- right: 0;
- margin-top: -@tooltipArrowWidth;
- border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
- border-left-color: @tooltipArrowColor;
- }
- &.bottom .tooltip-arrow {
- top: 0;
- left: 50%;
- margin-left: -@tooltipArrowWidth;
- border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
- border-bottom-color: @tooltipArrowColor;
- }
-}
diff --git a/css/type.css b/css/type.css
new file mode 100644
index 0000000..9e9116c
--- /dev/null
+++ b/css/type.css
@@ -0,0 +1,323 @@
+/*
+ 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);
+}
diff --git a/css/type.less b/css/type.less
deleted file mode 100644
index 6a472db..0000000
--- a/css/type.less
+++ /dev/null
@@ -1,247 +0,0 @@
-//
-// Typography
-// --------------------------------------------------
-
-
-// Body text
-// -------------------------
-
-p {
- margin: 0 0 @baseLineHeight / 2;
-}
-.lead {
- margin-bottom: @baseLineHeight;
- font-size: @baseFontSize * 1.5;
- font-weight: 200;
- line-height: @baseLineHeight * 1.5;
-}
-
-
-// Emphasis & misc
-// -------------------------
-
-// Ex: 14px base font * 85% = about 12px
-small { font-size: 85%; }
-
-strong { font-weight: bold; }
-em { font-style: italic; }
-cite { font-style: normal; }
-
-// Utility classes
-.muted { color: @grayLight; }
-a.muted:hover,
-a.muted:focus { color: darken(@grayLight, 10%); }
-
-.text-warning { color: @warningText; }
-a.text-warning:hover,
-a.text-warning:focus { color: darken(@warningText, 10%); }
-
-.text-error { color: @errorText; }
-a.text-error:hover,
-a.text-error:focus { color: darken(@errorText, 10%); }
-
-.text-info { color: @infoText; }
-a.text-info:hover,
-a.text-info:focus { color: darken(@infoText, 10%); }
-
-.text-success { color: @successText; }
-a.text-success:hover,
-a.text-success:focus { color: darken(@successText, 10%); }
-
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-.text-center { text-align: center; }
-
-
-// Headings
-// -------------------------
-
-h1, h2, h3, h4, h5, h6 {
- margin: (@baseLineHeight / 2) 0;
- font-family: @headingsFontFamily;
- font-weight: @headingsFontWeight;
- line-height: @baseLineHeight;
- color: @headingsColor;
- text-rendering: optimizelegibility; // Fix the character spacing for headings
- small {
- font-weight: normal;
- line-height: 1;
- color: @grayLight;
- }
-}
-
-h1,
-h2,
-h3 { line-height: @baseLineHeight * 2; }
-
-h1 { font-size: @baseFontSize * 2.75; } // ~38px
-h2 { font-size: @baseFontSize * 2.25; } // ~32px
-h3 { font-size: @baseFontSize * 1.75; } // ~24px
-h4 { font-size: @baseFontSize * 1.25; } // ~18px
-h5 { font-size: @baseFontSize; }
-h6 { font-size: @baseFontSize * 0.85; } // ~12px
-
-h1 small { font-size: @baseFontSize * 1.75; } // ~24px
-h2 small { font-size: @baseFontSize * 1.25; } // ~18px
-h3 small { font-size: @baseFontSize; }
-h4 small { font-size: @baseFontSize; }
-
-
-// Page header
-// -------------------------
-
-.page-header {
- padding-bottom: (@baseLineHeight / 2) - 1;
- margin: @baseLineHeight 0 (@baseLineHeight * 1.5);
- border-bottom: 1px solid @grayLighter;
-}
-
-
-
-// Lists
-// --------------------------------------------------
-
-// Unordered and Ordered lists
-ul, ol {
- padding: 0;
- margin: 0 0 @baseLineHeight / 2 25px;
-}
-ul ul,
-ul ol,
-ol ol,
-ol ul {
- margin-bottom: 0;
-}
-li {
- line-height: @baseLineHeight;
-}
-
-// 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;
- > li {
- display: inline-block;
- .ie7-inline-block();
- padding-left: 5px;
- padding-right: 5px;
- }
-}
-
-// Description Lists
-dl {
- margin-bottom: @baseLineHeight;
-}
-dt,
-dd {
- line-height: @baseLineHeight;
-}
-dt {
- font-weight: bold;
-}
-dd {
- margin-left: @baseLineHeight / 2;
-}
-// Horizontal layout (like forms)
-.dl-horizontal {
- .clearfix(); // Ensure dl clears floats if empty dd elements present
- dt {
- float: left;
- width: @horizontalComponentOffset - 20;
- clear: left;
- text-align: right;
- .text-overflow();
- }
- dd {
- margin-left: @horizontalComponentOffset;
- }
-}
-
-// MISC
-// ----
-
-// Horizontal rules
-hr {
- margin: @baseLineHeight 0;
- border: 0;
- border-top: 1px solid @hrBorder;
- border-bottom: 1px solid @white;
-}
-
-// Abbreviations and acronyms
-abbr[title],
-// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
-abbr[data-original-title] {
- cursor: help;
- border-bottom: 1px dotted @grayLight;
-}
-abbr.initialism {
- font-size: 90%;
- text-transform: uppercase;
-}
-
-// Blockquotes
-blockquote {
- padding: 0 0 0 15px;
- margin: 0 0 @baseLineHeight;
- border-left: 5px solid @grayLighter;
- p {
- margin-bottom: 0;
- font-size: @baseFontSize * 1.25;
- font-weight: 300;
- line-height: 1.25;
- }
- small {
- display: block;
- line-height: @baseLineHeight;
- color: @grayLight;
- &:before {
- content: '\2014 \00A0';
- }
- }
-
- // Float right with text-align: right
- &.pull-right {
- float: right;
- padding-right: 15px;
- padding-left: 0;
- border-right: 5px solid @grayLighter;
- border-left: 0;
- p,
- small {
- text-align: right;
- }
- small {
- &:before {
- content: '';
- }
- &:after {
- content: '\00A0 \2014';
- }
- }
- }
-}
-
-// Quotes
-q:before,
-q:after,
-blockquote:before,
-blockquote:after {
- content: "";
-}
-
-// Addresses
-address {
- display: block;
- margin-bottom: @baseLineHeight;
- font-style: normal;
- line-height: @baseLineHeight;
-}
diff --git a/css/utilities.css b/css/utilities.css
new file mode 100644
index 0000000..c077cd1
--- /dev/null
+++ b/css/utilities.css
@@ -0,0 +1,32 @@
+/*
+ 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;
+}
diff --git a/css/utilities.less b/css/utilities.less
deleted file mode 100644
index 314b4ff..0000000
--- a/css/utilities.less
+++ /dev/null
@@ -1,30 +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;
-}
diff --git a/css/variables.css b/css/variables.css
new file mode 100644
index 0000000..3a2f609
--- /dev/null
+++ b/css/variables.css
@@ -0,0 +1,265 @@
+/*
+ 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) */
+}
diff --git a/css/variables.less b/css/variables.less
deleted file mode 100644
index 31c131b..0000000
--- a/css/variables.less
+++ /dev/null
@@ -1,301 +0,0 @@
-//
-// Variables
-// --------------------------------------------------
-
-
-// Global values
-// --------------------------------------------------
-
-
-// Grays
-// -------------------------
-@black: #000;
-@grayDarker: #222;
-@grayDark: #333;
-@gray: #555;
-@grayLight: #999;
-@grayLighter: #eee;
-@white: #fff;
-
-
-// Accent colors
-// -------------------------
-@blue: #049cdb;
-@blueDark: #0064cd;
-@green: #46a546;
-@red: #9d261d;
-@yellow: #ffc40d;
-@orange: #f89406;
-@pink: #c3325f;
-@purple: #7a43b6;
-
-
-// Scaffolding
-// -------------------------
-@bodyBackground: @white;
-@textColor: @grayDark;
-
-
-// Links
-// -------------------------
-@linkColor: #08c;
-@linkColorHover: darken(@linkColor, 15%);
-
-
-// Typography
-// -------------------------
-@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
-@serifFontFamily: Georgia, "Times New Roman", Times, serif;
-@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;
-
-@baseFontSize: 14px;
-@baseFontFamily: @sansFontFamily;
-@baseLineHeight: 20px;
-@altFontFamily: @serifFontFamily;
-
-@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight: bold; // instead of browser default, bold
-@headingsColor: inherit; // empty to use BS default, @textColor
-
-
-// Component sizing
-// -------------------------
-// Based on 14px font-size and 20px line-height
-
-@fontSizeLarge: @baseFontSize * 1.25; // ~18px
-@fontSizeSmall: @baseFontSize * 0.85; // ~12px
-@fontSizeMini: @baseFontSize * 0.75; // ~11px
-
-@paddingLarge: 11px 19px; // 44px
-@paddingSmall: 2px 10px; // 26px
-@paddingMini: 0 6px; // 22px
-
-@baseBorderRadius: 4px;
-@borderRadiusLarge: 6px;
-@borderRadiusSmall: 3px;
-
-
-// Tables
-// -------------------------
-@tableBackground: transparent; // overall background-color
-@tableBackgroundAccent: #f9f9f9; // for striping
-@tableBackgroundHover: #f5f5f5; // for hover
-@tableBorder: #ddd; // table and cell border
-
-// Buttons
-// -------------------------
-@btnBackground: @white;
-@btnBackgroundHighlight: darken(@white, 10%);
-@btnBorder: #ccc;
-
-@btnPrimaryBackground: @linkColor;
-@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
-
-@btnInfoBackground: #5bc0de;
-@btnInfoBackgroundHighlight: #2f96b4;
-
-@btnSuccessBackground: #62c462;
-@btnSuccessBackgroundHighlight: #51a351;
-
-@btnWarningBackground: lighten(@orange, 15%);
-@btnWarningBackgroundHighlight: @orange;
-
-@btnDangerBackground: #ee5f5b;
-@btnDangerBackgroundHighlight: #bd362f;
-
-@btnInverseBackground: #444;
-@btnInverseBackgroundHighlight: @grayDarker;
-
-
-// Forms
-// -------------------------
-@inputBackground: @white;
-@inputBorder: #ccc;
-@inputBorderRadius: @baseBorderRadius;
-@inputDisabledBackground: @grayLighter;
-@formActionsBackground: #f5f5f5;
-@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
-
-
-// Dropdowns
-// -------------------------
-@dropdownBackground: @white;
-@dropdownBorder: rgba(0,0,0,.2);
-@dropdownDividerTop: #e5e5e5;
-@dropdownDividerBottom: @white;
-
-@dropdownLinkColor: @grayDark;
-@dropdownLinkColorHover: @white;
-@dropdownLinkColorActive: @white;
-
-@dropdownLinkBackgroundActive: @linkColor;
-@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
-
-
-
-// COMPONENT VARIABLES
-// --------------------------------------------------
-
-
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
-@zindexDropdown: 1000;
-@zindexPopover: 1010;
-@zindexTooltip: 1030;
-@zindexFixedNavbar: 1030;
-@zindexModalBackdrop: 1040;
-@zindexModal: 1050;
-
-
-// Sprite icons path
-// -------------------------
-@iconSpritePath: "../img/glyphicons-halflings.png";
-@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
-
-
-// Input placeholder text color
-// -------------------------
-@placeholderText: @grayLight;
-
-
-// Hr border color
-// -------------------------
-@hrBorder: @grayLighter;
-
-
-// Horizontal forms & lists
-// -------------------------
-@horizontalComponentOffset: 180px;
-
-
-// Wells
-// -------------------------
-@wellBackground: #f5f5f5;
-
-
-// Navbar
-// -------------------------
-@navbarCollapseWidth: 979px;
-@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
-
-@navbarHeight: 40px;
-@navbarBackgroundHighlight: #ffffff;
-@navbarBackground: darken(@navbarBackgroundHighlight, 5%);
-@navbarBorder: darken(@navbarBackground, 12%);
-
-@navbarText: #777;
-@navbarLinkColor: #777;
-@navbarLinkColorHover: @grayDark;
-@navbarLinkColorActive: @gray;
-@navbarLinkBackgroundHover: transparent;
-@navbarLinkBackgroundActive: darken(@navbarBackground, 5%);
-
-@navbarBrandColor: @navbarLinkColor;
-
-// Inverted navbar
-@navbarInverseBackground: #111111;
-@navbarInverseBackgroundHighlight: #222222;
-@navbarInverseBorder: #252525;
-
-@navbarInverseText: @grayLight;
-@navbarInverseLinkColor: @grayLight;
-@navbarInverseLinkColorHover: @white;
-@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
-@navbarInverseLinkBackgroundHover: transparent;
-@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
-
-@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
-@navbarInverseSearchBackgroundFocus: @white;
-@navbarInverseSearchBorder: @navbarInverseBackground;
-@navbarInverseSearchPlaceholderColor: #ccc;
-
-@navbarInverseBrandColor: @navbarInverseLinkColor;
-
-
-// Pagination
-// -------------------------
-@paginationBackground: #fff;
-@paginationBorder: #ddd;
-@paginationActiveBackground: #f5f5f5;
-
-
-// Hero unit
-// -------------------------
-@heroUnitBackground: @grayLighter;
-@heroUnitHeadingColor: inherit;
-@heroUnitLeadColor: inherit;
-
-
-// Form states and alerts
-// -------------------------
-@warningText: #c09853;
-@warningBackground: #fcf8e3;
-@warningBorder: darken(spin(@warningBackground, -10), 3%);
-
-@errorText: #b94a48;
-@errorBackground: #f2dede;
-@errorBorder: darken(spin(@errorBackground, -10), 3%);
-
-@successText: #468847;
-@successBackground: #dff0d8;
-@successBorder: darken(spin(@successBackground, -10), 5%);
-
-@infoText: #3a87ad;
-@infoBackground: #d9edf7;
-@infoBorder: darken(spin(@infoBackground, -10), 7%);
-
-
-// Tooltips and popovers
-// -------------------------
-@tooltipColor: #fff;
-@tooltipBackground: #000;
-@tooltipArrowWidth: 5px;
-@tooltipArrowColor: @tooltipBackground;
-
-@popoverBackground: #fff;
-@popoverArrowWidth: 10px;
-@popoverArrowColor: #fff;
-@popoverTitleBackground: darken(@popoverBackground, 3%);
-
-// Special enhancement for popovers
-@popoverArrowOuterWidth: @popoverArrowWidth + 1;
-@popoverArrowOuterColor: rgba(0,0,0,.25);
-
-
-
-// GRID
-// --------------------------------------------------
-
-
-// Default 940px grid
-// -------------------------
-@gridColumns: 12;
-@gridColumnWidth: 60px;
-@gridGutterWidth: 20px;
-@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// 1200px min
-@gridColumnWidth1200: 70px;
-@gridGutterWidth1200: 30px;
-@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
-
-// 768px-979px
-@gridColumnWidth768: 42px;
-@gridGutterWidth768: 20px;
-@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
-
-
-// Fluid grid
-// -------------------------
-@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
-@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
-
-// 1200px min
-@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
-@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
-
-// 768px-979px
-@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
-@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
diff --git a/css/wells.css b/css/wells.css
new file mode 100644
index 0000000..06bf24a
--- /dev/null
+++ b/css/wells.css
@@ -0,0 +1,31 @@
+/*
+ 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);
+}
diff --git a/css/wells.less b/css/wells.less
deleted file mode 100644
index 84a744b..0000000
--- a/css/wells.less
+++ /dev/null
@@ -1,29 +0,0 @@
-//
-// Wells
-// --------------------------------------------------
-
-
-// Base class
-.well {
- min-height: 20px;
- padding: 19px;
- margin-bottom: 20px;
- background-color: @wellBackground;
- border: 1px solid darken(@wellBackground, 7%);
- .border-radius(@baseBorderRadius);
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
- blockquote {
- border-color: #ddd;
- border-color: rgba(0,0,0,.15);
- }
-}
-
-// Sizes
-.well-large {
- padding: 24px;
- .border-radius(@borderRadiusLarge);
-}
-.well-small {
- padding: 9px;
- .border-radius(@borderRadiusSmall);
-}