From cde958a5a7267ea3ea0e61fc8e84ebe3268b23f3 Mon Sep 17 00:00:00 2001 From: Sky Johnson Date: Fri, 11 Apr 2025 15:20:56 -0500 Subject: [PATCH] convert to css --- css/accordion.css | 36 ++ css/accordion.less | 34 -- css/alerts.css | 80 +++ css/alerts.less | 79 --- css/bootstrap.css | 45 ++ css/bootstrap.less | 63 --- css/breadcrumbs.css | 26 + css/breadcrumbs.less | 24 - css/button-groups.css | 225 ++++++++ css/button-groups.less | 229 -------- css/buttons.css | 208 ++++++++ css/buttons.less | 228 -------- css/carousel.css | 151 ++++++ css/carousel.less | 158 ------ css/close.css | 35 ++ css/close.less | 32 -- css/code.css | 63 +++ css/code.less | 61 --- css/component-animations.css | 24 + css/component-animations.less | 22 - css/dropdowns.css | 259 +++++++++ css/dropdowns.less | 248 --------- css/forms.css | 918 ++++++++++++++++++++++++++++++++ css/forms.less | 690 ------------------------ css/grid.css | 171 ++++++ css/grid.less | 21 - css/hero-unit.css | 27 + css/hero-unit.less | 25 - css/labels-badges.css | 116 ++++ css/labels-badges.less | 84 --- css/layouts.css | 40 ++ css/layouts.less | 16 - css/media.css | 54 ++ css/media.less | 55 -- css/mixins.less | 702 ------------------------ css/modals.css | 121 +++++ css/modals.less | 95 ---- css/navbar.css | 537 +++++++++++++++++++ css/navbar.less | 497 ----------------- css/navs.css | 373 +++++++++++++ css/navs.less | 409 -------------- css/pager.css | 47 ++ css/pager.less | 43 -- css/pagination.css | 116 ++++ css/pagination.less | 123 ----- css/popovers.css | 123 +++++ css/popovers.less | 133 ----- css/progress-bars.css | 85 +++ css/progress-bars.less | 122 ----- css/reset.css | 203 +++++++ css/reset.less | 216 -------- css/responsive-1200px-min.css | 98 ++++ css/responsive-1200px-min.less | 28 - css/responsive-767px-max.css | 197 +++++++ css/responsive-767px-max.less | 193 ------- css/responsive-768px-979px.css | 89 ++++ css/responsive-768px-979px.less | 19 - css/responsive-navbar.css | 202 +++++++ css/responsive-navbar.less | 189 ------- css/responsive-utilities.css | 56 ++ css/responsive-utilities.less | 59 -- css/responsive.css | 18 + css/responsive.less | 48 -- css/scaffolding.css | 46 ++ css/scaffolding.less | 53 -- css/sprites.css | 115 ++++ css/sprites.less | 197 ------- css/tables.css | 232 ++++++++ css/tables.less | 244 --------- css/tests/buttons.html | 16 +- css/thumbnails.css | 61 +++ css/thumbnails.less | 53 -- css/tooltip.css | 91 ++++ css/tooltip.less | 70 --- css/type.css | 323 +++++++++++ css/type.less | 247 --------- css/utilities.css | 32 ++ css/utilities.less | 30 -- css/variables.css | 265 +++++++++ css/variables.less | 301 ----------- css/wells.css | 31 ++ css/wells.less | 29 - 82 files changed, 5941 insertions(+), 6183 deletions(-) create mode 100644 css/accordion.css delete mode 100644 css/accordion.less create mode 100644 css/alerts.css delete mode 100644 css/alerts.less create mode 100644 css/bootstrap.css delete mode 100644 css/bootstrap.less create mode 100644 css/breadcrumbs.css delete mode 100644 css/breadcrumbs.less create mode 100644 css/button-groups.css delete mode 100644 css/button-groups.less create mode 100644 css/buttons.css delete mode 100644 css/buttons.less create mode 100644 css/carousel.css delete mode 100644 css/carousel.less create mode 100644 css/close.css delete mode 100644 css/close.less create mode 100644 css/code.css delete mode 100644 css/code.less create mode 100644 css/component-animations.css delete mode 100644 css/component-animations.less create mode 100644 css/dropdowns.css delete mode 100644 css/dropdowns.less create mode 100644 css/forms.css delete mode 100644 css/forms.less create mode 100644 css/grid.css delete mode 100644 css/grid.less create mode 100644 css/hero-unit.css delete mode 100644 css/hero-unit.less create mode 100644 css/labels-badges.css delete mode 100644 css/labels-badges.less create mode 100644 css/layouts.css delete mode 100644 css/layouts.less create mode 100644 css/media.css delete mode 100644 css/media.less delete mode 100644 css/mixins.less create mode 100644 css/modals.css delete mode 100644 css/modals.less create mode 100644 css/navbar.css delete mode 100644 css/navbar.less create mode 100644 css/navs.css delete mode 100644 css/navs.less create mode 100644 css/pager.css delete mode 100644 css/pager.less create mode 100644 css/pagination.css delete mode 100644 css/pagination.less create mode 100644 css/popovers.css delete mode 100644 css/popovers.less create mode 100644 css/progress-bars.css delete mode 100644 css/progress-bars.less create mode 100644 css/reset.css delete mode 100644 css/reset.less create mode 100644 css/responsive-1200px-min.css delete mode 100644 css/responsive-1200px-min.less create mode 100644 css/responsive-767px-max.css delete mode 100644 css/responsive-767px-max.less create mode 100644 css/responsive-768px-979px.css delete mode 100644 css/responsive-768px-979px.less create mode 100644 css/responsive-navbar.css delete mode 100644 css/responsive-navbar.less create mode 100644 css/responsive-utilities.css delete mode 100644 css/responsive-utilities.less create mode 100644 css/responsive.css delete mode 100644 css/responsive.less create mode 100644 css/scaffolding.css delete mode 100644 css/scaffolding.less create mode 100644 css/sprites.css delete mode 100644 css/sprites.less create mode 100644 css/tables.css delete mode 100644 css/tables.less create mode 100644 css/thumbnails.css delete mode 100644 css/thumbnails.less create mode 100644 css/tooltip.css delete mode 100644 css/tooltip.less create mode 100644 css/type.css delete mode 100644 css/type.less create mode 100644 css/utilities.css delete mode 100644 css/utilities.less create mode 100644 css/variables.css delete mode 100644 css/variables.less create mode 100644 css/wells.css delete mode 100644 css/wells.less 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); -}