From 0eecb0bde02deaec5df3231ba195a7eaa726252a Mon Sep 17 00:00:00 2001 From: Keivan Beigi Date: Mon, 21 Jan 2013 16:41:46 -0800 Subject: [PATCH] updated bootstrap to v2.2.2, restored most of values to their default. (only file changed is the varible.less file) --- .gitignore | 4 +- .../Content2/Bootstrap/accordion.less | 2 +- NzbDrone.Web/Content2/Bootstrap/alerts.less | 16 + .../Content2/Bootstrap/bootstrap.less | 3 +- .../Content2/Bootstrap/breadcrumbs.less | 14 +- .../Content2/Bootstrap/button-groups.less | 82 ++-- NzbDrone.Web/Content2/Bootstrap/buttons.less | 45 +-- NzbDrone.Web/Content2/Bootstrap/carousel.less | 30 +- NzbDrone.Web/Content2/Bootstrap/code.less | 5 +- .../Content2/Bootstrap/dropdowns.less | 39 +- NzbDrone.Web/Content2/Bootstrap/forms.less | 81 +++- .../Content2/Bootstrap/hero-unit.less | 11 +- .../Content2/Bootstrap/labels-badges.less | 16 +- NzbDrone.Web/Content2/Bootstrap/media.less | 55 +++ NzbDrone.Web/Content2/Bootstrap/mixins.css | 27 -- NzbDrone.Web/Content2/Bootstrap/mixins.less | 23 +- NzbDrone.Web/Content2/Bootstrap/modals.less | 25 +- NzbDrone.Web/Content2/Bootstrap/navbar.less | 49 ++- NzbDrone.Web/Content2/Bootstrap/navs.less | 18 +- NzbDrone.Web/Content2/Bootstrap/pager.less | 19 +- .../Content2/Bootstrap/pagination.less | 81 +++- NzbDrone.Web/Content2/Bootstrap/popovers.less | 92 +++-- .../Content2/Bootstrap/progress-bars.less | 6 +- NzbDrone.Web/Content2/Bootstrap/reset.less | 95 ++++- .../Bootstrap/responsive-767px-max.less | 21 +- .../Content2/Bootstrap/responsive-navbar.less | 16 +- .../Content2/Bootstrap/responsive.less | 11 +- NzbDrone.Web/Content2/Bootstrap/sprites.less | 6 +- NzbDrone.Web/Content2/Bootstrap/tables.less | 116 +++--- .../Content2/Bootstrap/thumbnails.less | 2 +- NzbDrone.Web/Content2/Bootstrap/tooltip.less | 2 +- NzbDrone.Web/Content2/Bootstrap/type.less | 92 +++-- NzbDrone.Web/Content2/Bootstrap/variables.css | 1 - .../Content2/Bootstrap/variables.less | 43 +- .../Content2/Bootstrap/variables.min.css | 1 - NzbDrone.Web/Content2/Bootstrap/wells.less | 6 +- NzbDrone.Web/NzbDrone.Web.csproj | 1 - NzbDrone.Web/Scripts2/bootstrap.js | 382 ++++++++++++------ 38 files changed, 1005 insertions(+), 533 deletions(-) create mode 100644 NzbDrone.Web/Content2/Bootstrap/media.less delete mode 100644 NzbDrone.Web/Content2/Bootstrap/mixins.css delete mode 100644 NzbDrone.Web/Content2/Bootstrap/variables.css delete mode 100644 NzbDrone.Web/Content2/Bootstrap/variables.min.css diff --git a/.gitignore b/.gitignore index eb8ef0eec..519a1e3db 100644 --- a/.gitignore +++ b/.gitignore @@ -124,4 +124,6 @@ _TeamCity* config.xml nzbdrone.log*txt NzbDrone.Web/MediaCover -UpdateLogs/ \ No newline at end of file +UpdateLogs/ +*/Bootstrap/*.css +*//Bootstrap/*.css diff --git a/NzbDrone.Web/Content2/Bootstrap/accordion.less b/NzbDrone.Web/Content2/Bootstrap/accordion.less index c13c7be26..d63523bc8 100644 --- a/NzbDrone.Web/Content2/Bootstrap/accordion.less +++ b/NzbDrone.Web/Content2/Bootstrap/accordion.less @@ -12,7 +12,7 @@ .accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; - .border-radius(4px); + .border-radius(@baseBorderRadius); } .accordion-heading { border-bottom: 0; diff --git a/NzbDrone.Web/Content2/Bootstrap/alerts.less b/NzbDrone.Web/Content2/Bootstrap/alerts.less index 7fc116ab8..0116b191b 100644 --- a/NzbDrone.Web/Content2/Bootstrap/alerts.less +++ b/NzbDrone.Web/Content2/Bootstrap/alerts.less @@ -9,8 +9,14 @@ .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 { @@ -34,17 +40,27 @@ 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 diff --git a/NzbDrone.Web/Content2/Bootstrap/bootstrap.less b/NzbDrone.Web/Content2/Bootstrap/bootstrap.less index 30f96a6ca..1fde055bc 100644 --- a/NzbDrone.Web/Content2/Bootstrap/bootstrap.less +++ b/NzbDrone.Web/Content2/Bootstrap/bootstrap.less @@ -1,5 +1,5 @@ /*! - * Bootstrap v2.1.1 + * Bootstrap v2.2.2 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 @@ -52,6 +52,7 @@ // Components: Misc @import "thumbnails.less"; +@import "media.less"; @import "labels-badges.less"; @import "progress-bars.less"; @import "accordion.less"; diff --git a/NzbDrone.Web/Content2/Bootstrap/breadcrumbs.less b/NzbDrone.Web/Content2/Bootstrap/breadcrumbs.less index fd269b31a..f753df6be 100644 --- a/NzbDrone.Web/Content2/Bootstrap/breadcrumbs.less +++ b/NzbDrone.Web/Content2/Bootstrap/breadcrumbs.less @@ -8,17 +8,17 @@ margin: 0 0 @baseLineHeight; list-style: none; background-color: #f5f5f5; - .border-radius(4px); - li { + .border-radius(@baseBorderRadius); + > li { display: inline-block; .ie7-inline-block(); text-shadow: 0 1px 0 @white; + > .divider { + padding: 0 5px; + color: #ccc; + } } - .divider { - padding: 0 5px; - color: #ccc; - } - .active { + > .active { color: @grayLight; } } diff --git a/NzbDrone.Web/Content2/Bootstrap/button-groups.less b/NzbDrone.Web/Content2/Bootstrap/button-groups.less index 62e53f373..d6054c808 100644 --- a/NzbDrone.Web/Content2/Bootstrap/button-groups.less +++ b/NzbDrone.Web/Content2/Bootstrap/button-groups.less @@ -6,6 +6,8 @@ // 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) @@ -22,13 +24,9 @@ font-size: 0; // Hack to remove whitespace that results from using inline-block margin-top: @baseLineHeight / 2; margin-bottom: @baseLineHeight / 2; - .btn-group { - display: inline-block; - .ie7-inline-block(); - } - .btn + .btn, - .btn-group + .btn, - .btn + .btn-group { + > .btn + .btn, + > .btn-group + .btn, + > .btn + .btn-group { margin-left: 5px; } } @@ -42,59 +40,44 @@ margin-left: -1px; } .btn-group > .btn, -.btn-group > .dropdown-menu { +.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: 11px; + font-size: @fontSizeMini; } .btn-group > .btn-small { - font-size: 12px; + font-size: @fontSizeSmall; } .btn-group > .btn-large { - font-size: 16px; + 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; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; + .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 { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; + .border-top-right-radius(@baseBorderRadius); + .border-bottom-right-radius(@baseBorderRadius); } // Reset corners for large buttons .btn-group > .btn.large:first-child { margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; + .border-top-left-radius(@borderRadiusLarge); + .border-bottom-left-radius(@borderRadiusLarge); } .btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; + .border-top-right-radius(@borderRadiusLarge); + .border-bottom-right-radius(@borderRadiusLarge); } // On hover/focus/active, bring the proper btn to front @@ -120,7 +103,7 @@ .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)); + .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; } @@ -147,7 +130,7 @@ // 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)); + .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 @@ -193,8 +176,7 @@ } // Upside down carets for .dropup .dropup .btn-large .caret { - border-bottom: 5px solid @black; - border-top: 0; + border-bottom-width: 5px; } @@ -221,25 +203,25 @@ display: inline-block; // makes buttons only take up the width they need .ie7-inline-block(); } -.btn-group-vertical .btn { +.btn-group-vertical > .btn { display: block; float: none; - width: 100%; + max-width: 100%; .border-radius(0); } -.btn-group-vertical .btn + .btn { +.btn-group-vertical > .btn + .btn { margin-left: 0; margin-top: -1px; } -.btn-group-vertical .btn:first-child { - .border-radius(4px 4px 0 0); +.btn-group-vertical > .btn:first-child { + .border-radius(@baseBorderRadius @baseBorderRadius 0 0); } -.btn-group-vertical .btn:last-child { - .border-radius(0 0 4px 4px); +.btn-group-vertical > .btn:last-child { + .border-radius(0 0 @baseBorderRadius @baseBorderRadius); } -.btn-group-vertical .btn-large:first-child { - .border-radius(6px 6px 0 0); +.btn-group-vertical > .btn-large:first-child { + .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0); } -.btn-group-vertical .btn-large:last-child { - .border-radius(0 0 6px 6px); +.btn-group-vertical > .btn-large:last-child { + .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge); } diff --git a/NzbDrone.Web/Content2/Bootstrap/buttons.less b/NzbDrone.Web/Content2/Bootstrap/buttons.less index 3fd1e95f5..6f565b73c 100644 --- a/NzbDrone.Web/Content2/Bootstrap/buttons.less +++ b/NzbDrone.Web/Content2/Bootstrap/buttons.less @@ -10,11 +10,10 @@ .btn { display: inline-block; .ie7-inline-block(); - padding: 4px 14px; + padding: 4px 12px; margin-bottom: 0; // For input.btn font-size: @baseFontSize; line-height: @baseLineHeight; - *line-height: @baseLineHeight; text-align: center; vertical-align: middle; cursor: pointer; @@ -22,16 +21,14 @@ 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(4px); + .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)); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); // Hover state &:hover { color: @grayDark; text-decoration: none; - background-color: darken(@white, 10%); - *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */ background-position: 0 -15px; // transition is only when going to hover, otherwise the background @@ -47,18 +44,15 @@ // Active state &.active, &:active { - background-color: darken(@white, 10%); - background-color: darken(@white, 15%) e("\9"); background-image: none; outline: 0; - .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)); + .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-color: darken(@white, 10%); background-image: none; .opacity(65); .box-shadow(none); @@ -73,30 +67,35 @@ // Large .btn-large { - padding: 9px 14px; - font-size: @baseFontSize + 2px; - line-height: normal; - .border-radius(5px); + padding: @paddingLarge; + font-size: @fontSizeLarge; + .border-radius(@borderRadiusLarge); } -.btn-large [class^="icon-"] { - margin-top: 2px; +.btn-large [class^="icon-"], +.btn-large [class*=" icon-"] { + margin-top: 4px; } // Small .btn-small { - padding: 3px 9px; - font-size: @baseFontSize - 2px; - line-height: @baseLineHeight - 2px; + padding: @paddingSmall; + font-size: @fontSizeSmall; + .border-radius(@borderRadiusSmall); } -.btn-small [class^="icon-"] { +.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: 2px 6px; - font-size: @baseFontSize - 3px; - line-height: @baseLineHeight - 3px; + padding: @paddingMini; + font-size: @fontSizeMini; + .border-radius(@borderRadiusSmall); } diff --git a/NzbDrone.Web/Content2/Bootstrap/carousel.less b/NzbDrone.Web/Content2/Bootstrap/carousel.less index 33f98ac4d..2dc050603 100644 --- a/NzbDrone.Web/Content2/Bootstrap/carousel.less +++ b/NzbDrone.Web/Content2/Bootstrap/carousel.less @@ -15,50 +15,50 @@ position: relative; } -.carousel { +.carousel-inner { - .item { + > .item { display: none; position: relative; .transition(.6s ease-in-out left); } // Account for jankitude on images - .item > img { + > .item > img { display: block; line-height: 1; } - .active, - .next, - .prev { display: block; } + > .active, + > .next, + > .prev { display: block; } - .active { + > .active { left: 0; } - .next, - .prev { + > .next, + > .prev { position: absolute; top: 0; width: 100%; } - .next { + > .next { left: 100%; } - .prev { + > .prev { left: -100%; } - .next.left, - .prev.right { + > .next.left, + > .prev.right { left: 0; } - .active.left { + > .active.left { left: -100%; } - .active.right { + > .active.right { left: 100%; } diff --git a/NzbDrone.Web/Content2/Bootstrap/code.less b/NzbDrone.Web/Content2/Bootstrap/code.less index f1851a074..266a926e7 100644 --- a/NzbDrone.Web/Content2/Bootstrap/code.less +++ b/NzbDrone.Web/Content2/Bootstrap/code.less @@ -19,6 +19,7 @@ code { color: #d14; background-color: #f7f7f9; border: 1px solid #e1e1e8; + white-space: nowrap; } // Blocks of code @@ -35,7 +36,7 @@ pre { background-color: #f5f5f5; border: 1px solid #ccc; // fallback for IE7-8 border: 1px solid rgba(0,0,0,.15); - .border-radius(4px); + .border-radius(@baseBorderRadius); // Make prettyprint styles more spaced out for readability &.prettyprint { @@ -46,6 +47,8 @@ pre { code { padding: 0; color: inherit; + white-space: pre; + white-space: pre-wrap; background-color: transparent; border: 0; } diff --git a/NzbDrone.Web/Content2/Bootstrap/dropdowns.less b/NzbDrone.Web/Content2/Bootstrap/dropdowns.less index 390c37497..484bd3dda 100644 --- a/NzbDrone.Web/Content2/Bootstrap/dropdowns.less +++ b/NzbDrone.Web/Content2/Bootstrap/dropdowns.less @@ -72,7 +72,7 @@ } // Links within the dropdown menu - a { + li > a { display: block; padding: 3px 20px; clear: both; @@ -90,7 +90,6 @@ .dropdown-submenu:hover > a { text-decoration: none; color: @dropdownLinkColorHover; - background-color: @dropdownLinkBackgroundHover; #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); } @@ -98,10 +97,9 @@ // ------------ .dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: @dropdownLinkColorHover; + color: @dropdownLinkColorActive; text-decoration: none; outline: 0; - background-color: @dropdownLinkBackgroundActive; #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); } @@ -116,6 +114,8 @@ .dropdown-menu .disabled > a:hover { text-decoration: none; background-color: transparent; + background-image: none; // Remove CSS gradient + .reset-filter(); cursor: default; } @@ -163,19 +163,28 @@ .dropdown-submenu { position: relative; } +// Default dropdowns .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px 6px; - border-radius: 0 6px 6px 6px; + .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: " "; @@ -193,6 +202,19 @@ 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 // ----------------- @@ -205,6 +227,7 @@ // Typeahead // --------- .typeahead { + z-index: 1051; margin-top: 2px; // give it some space to breathe - .border-radius(4px); + .border-radius(@baseBorderRadius); } diff --git a/NzbDrone.Web/Content2/Bootstrap/forms.less b/NzbDrone.Web/Content2/Bootstrap/forms.less index 3d24432a3..2dff22919 100644 --- a/NzbDrone.Web/Content2/Bootstrap/forms.less +++ b/NzbDrone.Web/Content2/Bootstrap/forms.less @@ -81,11 +81,12 @@ input[type="color"], display: inline-block; height: @baseLineHeight; padding: 4px 6px; - margin-bottom: 9px; + 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 @@ -126,18 +127,17 @@ input[type="color"], 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)); + .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: 0; + margin: 4px 0 0; *margin-top: 0; /* IE7 */ margin-top: 1px \9; /* IE8-9 */ line-height: normal; - cursor: pointer; } // Reset width of input images, buttons, radios, checkboxes @@ -154,9 +154,9 @@ input[type="checkbox"] { // Set the height of select and file controls to match text inputs select, input[type="file"] { - height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + 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: 30px; + line-height: @inputHeight; } // Make select elements obey height by applying a border @@ -210,7 +210,7 @@ input[type="checkbox"]:focus { // Placeholder // ------------------------- -// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn’t understand a selector +// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector input, textarea { .placeholder(); @@ -223,13 +223,13 @@ textarea { // Indent the labels to position radios/checkboxes as hanging .radio, .checkbox { - min-height: 18px; // clear the floating input if there is no label text - padding-left: 18px; + 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: -18px; + margin-left: -20px; } // Move the options list down to align with labels @@ -304,8 +304,17 @@ textarea[class*="span"], .controls-row { .clearfix(); // Clear the float from controls } -.controls-row [class*="span"] { - float: left; // Float to collapse white-space for proper grid alignment + +// 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; } @@ -357,14 +366,15 @@ input[type="checkbox"][readonly] { // HTML5 invalid states // Shares styles with the .control-group.error above -input:focus:required:invalid, -textarea:focus:required:invalid, -select:focus:required:invalid { +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { color: #b94a48; border-color: #ee5f5b; &:focus { border-color: darken(#ee5f5b, 10%); - .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); + @shadow: 0 0 6px lighten(#ee5f5b, 20%); + .box-shadow(@shadow); } } @@ -413,16 +423,23 @@ select:focus:required:invalid { .input-append, .input-prepend { margin-bottom: 5px; - font-size: 0; + 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 { + 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; - font-size: @baseFontSize; vertical-align: top; .border-radius(0 @inputBorderRadius @inputBorderRadius 0); // Make input on top when focused so blue border and shadow always show @@ -445,7 +462,8 @@ select:focus:required:invalid { border: 1px solid #ccc; } .add-on, - .btn { + .btn, + .btn-group > .dropdown-toggle { vertical-align: top; .border-radius(0); } @@ -454,6 +472,7 @@ select:focus:required:invalid { border-color: @green; } } + .input-prepend { .add-on, .btn { @@ -461,30 +480,41 @@ select:focus:required:invalid { } .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, + .btn-group { margin-left: -1px; } .add-on:last-child, - .btn: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 { @@ -496,10 +526,14 @@ select:focus:required:invalid { margin-left: -1px; .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } + .btn-group:first-child { + margin-left: 0; + } } + // SEARCH FORM // ----------- @@ -638,7 +672,10 @@ legend + .control-group { // And apply it only to .help-block instances that follow a form control input, select, - textarea { + textarea, + .uneditable-input, + .input-prepend, + .input-append { + .help-block { margin-top: @baseLineHeight / 2; } diff --git a/NzbDrone.Web/Content2/Bootstrap/hero-unit.less b/NzbDrone.Web/Content2/Bootstrap/hero-unit.less index 672b7d7c7..763d86aee 100644 --- a/NzbDrone.Web/Content2/Bootstrap/hero-unit.less +++ b/NzbDrone.Web/Content2/Bootstrap/hero-unit.less @@ -6,6 +6,10 @@ .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 { @@ -15,10 +19,7 @@ color: @heroUnitHeadingColor; letter-spacing: -1px; } - p { - font-size: 18px; - font-weight: 200; - line-height: @baseLineHeight * 1.5; - color: @heroUnitLeadColor; + li { + line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less } } diff --git a/NzbDrone.Web/Content2/Bootstrap/labels-badges.less b/NzbDrone.Web/Content2/Bootstrap/labels-badges.less index 43c800d6b..9c3a40bfb 100644 --- a/NzbDrone.Web/Content2/Bootstrap/labels-badges.less +++ b/NzbDrone.Web/Content2/Bootstrap/labels-badges.less @@ -6,25 +6,35 @@ // 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); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); background-color: @grayLight; } // Set unique padding and border-radii .label { - padding: 1px 4px 2px; .border-radius(3px); } .badge { - padding: 1px 9px 2px; + padding-left: 9px; + padding-right: 9px; .border-radius(9px); } +// Empty labels/badges collapse +.label, +.badge { + &:empty { + display: none; + } +} + // Hover state, but only for links a { &.label:hover, diff --git a/NzbDrone.Web/Content2/Bootstrap/media.less b/NzbDrone.Web/Content2/Bootstrap/media.less new file mode 100644 index 000000000..1decab71d --- /dev/null +++ b/NzbDrone.Web/Content2/Bootstrap/media.less @@ -0,0 +1,55 @@ +// 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/NzbDrone.Web/Content2/Bootstrap/mixins.css b/NzbDrone.Web/Content2/Bootstrap/mixins.css deleted file mode 100644 index 6923f72db..000000000 --- a/NzbDrone.Web/Content2/Bootstrap/mixins.css +++ /dev/null @@ -1,27 +0,0 @@ -.clearfix { - *zoom: 1; -} -.clearfix:before, -.clearfix:after { - display: table; - content: ""; - line-height: 0; -} -.clearfix:after { - clear: both; -} -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} -.input-block-level { - display: block; - width: 100%; - min-height: 30px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} diff --git a/NzbDrone.Web/Content2/Bootstrap/mixins.less b/NzbDrone.Web/Content2/Bootstrap/mixins.less index d8532c1f0..b734bab2d 100644 --- a/NzbDrone.Web/Content2/Bootstrap/mixins.less +++ b/NzbDrone.Web/Content2/Bootstrap/mixins.less @@ -154,7 +154,7 @@ .input-block-level { display: block; width: 100%; - min-height: 30px; // Make inputs at least the height of their button counterpart + 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 } @@ -163,7 +163,7 @@ // Mixin for form field states .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { // Set the text color - > label, + .control-label, .help-block, .help-inline { color: @textColor; @@ -183,7 +183,8 @@ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus { border-color: darken(@borderColor, 10%); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%)); + @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 @@ -248,8 +249,10 @@ } // Drop shadows -.box-shadow(@shadowA, @shadowB:X, ...){ - +.box-shadow(@shadow) { + -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; + box-shadow: @shadow; } // Transitions @@ -294,6 +297,7 @@ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885 -o-transform: skew(@x, @y); transform: skew(@x, @y); + -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 } .translate3d(@x, @y, @z) { -webkit-transform: translate3d(@x, @y, @z); @@ -321,7 +325,7 @@ } // Background sizing -.background-size(@size){ +.background-size(@size) { -webkit-background-size: @size; -moz-background-size: @size; -o-background-size: @size; @@ -443,7 +447,7 @@ 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) { + .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); @@ -639,6 +643,11 @@ 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); diff --git a/NzbDrone.Web/Content2/Bootstrap/modals.less b/NzbDrone.Web/Content2/Bootstrap/modals.less index 81cacb7ab..8e272d409 100644 --- a/NzbDrone.Web/Content2/Bootstrap/modals.less +++ b/NzbDrone.Web/Content2/Bootstrap/modals.less @@ -2,16 +2,6 @@ // Modals // -------------------------------------------------- - -// Recalculate z-index where appropriate, -// but only apply to elements within modal -.modal-open .modal { - .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } - .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } - .popover { z-index: @zindexPopover + @zindexModal; } - .tooltip { z-index: @zindexTooltip + @zindexModal; } -} - // Background .modal-backdrop { position: fixed; @@ -33,12 +23,11 @@ // Base modal .modal { position: fixed; - top: 50%; + top: 10%; left: 50%; z-index: @zindexModal; - overflow: auto; width: 560px; - margin: -250px 0 0 -280px; + margin-left: -280px; background-color: @white; border: 1px solid #999; border: 1px solid rgba(0,0,0,.3); @@ -46,11 +35,14 @@ .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: 50%; } + &.fade.in { top: 10%; } } .modal-header { padding: 9px 15px; @@ -66,6 +58,7 @@ // Body (where all modal content resides) .modal-body { + position: relative; overflow-y: auto; max-height: 400px; padding: 15px; @@ -95,4 +88,8 @@ .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/NzbDrone.Web/Content2/Bootstrap/navbar.less b/NzbDrone.Web/Content2/Bootstrap/navbar.less index aad9835c2..b292b72bb 100644 --- a/NzbDrone.Web/Content2/Bootstrap/navbar.less +++ b/NzbDrone.Web/Content2/Bootstrap/navbar.less @@ -10,7 +10,6 @@ .navbar { overflow: visible; margin-bottom: @baseLineHeight; - color: @navbarText; // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar *position: relative; @@ -25,7 +24,7 @@ padding-right: 20px; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); border: 1px solid @navbarBorder; - .border-radius(4px); + .border-radius(@baseBorderRadius); .box-shadow(0 1px 4px rgba(0,0,0,.065)); // Prevent floats from breaking the navbar @@ -41,6 +40,7 @@ // Override the default collapsed state .nav-collapse.collapse { height: auto; + overflow: visible; } @@ -52,10 +52,10 @@ // 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:40px; - font-weight: 100; + font-size: 20px; + font-weight: 200; color: @navbarBrandColor; - //text-shadow: 0 1px 0 @navbarBackgroundHighlight; + text-shadow: 0 1px 0 @navbarBackgroundHighlight; &:hover { text-decoration: none; } @@ -66,6 +66,7 @@ .navbar-text { margin-bottom: 0; line-height: @navbarHeight; + color: @navbarText; } // Janky solution for now to account for links outside the .nav @@ -122,7 +123,7 @@ } .input-append, .input-prepend { - margin-top: 6px; + 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 @@ -152,7 +153,6 @@ .navbar-static-top { position: static; - width: 100%; margin-bottom: 0; // remove 18px margin for default navbar .navbar-inner { .border-radius(0); @@ -202,7 +202,7 @@ .navbar-fixed-top, .navbar-static-top { .navbar-inner { - .box-shadow(inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)); + .box-shadow(~"0 1px 10px rgba(0,0,0,.1)"); } } @@ -210,7 +210,7 @@ .navbar-fixed-bottom { bottom: 0; .navbar-inner { - .box-shadow(inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)); + .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)"); } } @@ -241,10 +241,11 @@ padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2); color: @navbarLinkColor; text-decoration: none; - font-size : 21px; + text-shadow: 0 1px 0 @navbarBackgroundHighlight; } .navbar .nav .dropdown-toggle .caret { margin-top: 8px; + } // Hover @@ -274,7 +275,7 @@ 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)); + .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; @@ -334,6 +335,12 @@ } } +// Caret should match text color on hover +.navbar .nav li.dropdown > a:hover .caret { + border-top-color: @navbarLinkColorActive; + border-bottom-color: @navbarLinkColorActive; +} + // Remove background color from open dropdown .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, @@ -379,7 +386,6 @@ // ------------------------- .navbar-inverse { - color: @navbarInverseText; .navbar-inner { #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); @@ -389,12 +395,20 @@ .brand, .nav > li > a { color: @navbarInverseLinkColor; - //text-shadow: 0 -1px 0 rgba(0,0,0,.25); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); &:hover { color: @navbarInverseLinkColorHover; } } + .brand { + color: @navbarInverseBrandColor; + } + + .navbar-text { + color: @navbarInverseText; + } + .nav > li > a:focus, .nav > li > a:hover { background-color: @navbarInverseLinkBackgroundHover; @@ -429,6 +443,10 @@ background-color: @navbarInverseLinkBackgroundActive; color: @navbarInverseLinkColorActive; } + .nav li.dropdown > a:hover .caret { + border-top-color: @navbarInverseLinkColorActive; + border-bottom-color: @navbarInverseLinkColorActive; + } .nav li.dropdown > .dropdown-toggle .caret { border-top-color: @navbarInverseLinkColor; border-bottom-color: @navbarInverseLinkColor; @@ -446,7 +464,7 @@ 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)); + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); .transition(none); .placeholder(@navbarInverseSearchPlaceholderColor); @@ -470,6 +488,3 @@ } } - - - diff --git a/NzbDrone.Web/Content2/Bootstrap/navs.less b/NzbDrone.Web/Content2/Bootstrap/navs.less index 856300d2e..2d08e79da 100644 --- a/NzbDrone.Web/Content2/Bootstrap/navs.less +++ b/NzbDrone.Web/Content2/Bootstrap/navs.less @@ -21,6 +21,12 @@ 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; @@ -63,10 +69,12 @@ } .nav-list > .active > a, .nav-list > .active > a:hover { - color: @blue; + color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.2); background-color: @linkColor; } -.nav-list [class^="icon-"] { +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { margin-right: 2px; } // Dividers (basically an hr) within the dropdown @@ -122,7 +130,7 @@ .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: @gray; - background-color: @white; + background-color: @bodyBackground; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; @@ -144,7 +152,7 @@ // Active state .nav-pills > .active > a, .nav-pills > .active > a:hover { - color: @blue; + color: @white; background-color: @linkColor; } @@ -239,7 +247,7 @@ .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover { - color: @blue; + color: @white; background-color: @grayLight; border-color: @grayLight; } diff --git a/NzbDrone.Web/Content2/Bootstrap/pager.less b/NzbDrone.Web/Content2/Bootstrap/pager.less index a7629d3db..da2425367 100644 --- a/NzbDrone.Web/Content2/Bootstrap/pager.less +++ b/NzbDrone.Web/Content2/Bootstrap/pager.less @@ -12,28 +12,29 @@ .pager li { display: inline; } -.pager a, -.pager span { +.pager li > a, +.pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; .border-radius(15px); } -.pager a:hover { +.pager li > a:hover { text-decoration: none; background-color: #f5f5f5; } -.pager .next a, -.pager .next span { +.pager .next > a, +.pager .next > span { float: right; } -.pager .previous a { +.pager .previous > a, +.pager .previous > span { float: left; } -.pager .disabled a, -.pager .disabled a:hover, -.pager .disabled span { +.pager .disabled > a, +.pager .disabled > a:hover, +.pager .disabled > span { color: @grayLight; background-color: #fff; cursor: default; diff --git a/NzbDrone.Web/Content2/Bootstrap/pagination.less b/NzbDrone.Web/Content2/Bootstrap/pagination.less index 61a760be5..e35d3f4a8 100644 --- a/NzbDrone.Web/Content2/Bootstrap/pagination.less +++ b/NzbDrone.Web/Content2/Bootstrap/pagination.less @@ -2,27 +2,30 @@ // Pagination (multiple pages) // -------------------------------------------------- - +// Space out pagination from surrounding content .pagination { - height: @baseLineHeight * 2; 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; - .border-radius(3px); + // Visuals + .border-radius(@baseBorderRadius); .box-shadow(0 1px 2px rgba(0,0,0,.05)); } .pagination ul > li { - display: inline; + display: inline; // Remove list-style and block-level defaults } .pagination ul > li > a, .pagination ul > li > span { - float: left; - padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; + float: left; // Collapse white-space + padding: 4px 12px; + line-height: @baseLineHeight; text-decoration: none; background-color: @paginationBackground; border: 1px solid @paginationBorder; @@ -31,7 +34,7 @@ .pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span { - background-color: #f5f5f5; + background-color: @paginationActiveBackground; } .pagination ul > .active > a, .pagination ul > .active > span { @@ -48,17 +51,71 @@ .pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-left-width: 1px; - .border-radius(3px 0 0 3px); + .border-left-radius(@baseBorderRadius); } .pagination ul > li:last-child > a, .pagination ul > li:last-child > span { - .border-radius(0 3px 3px 0); + .border-right-radius(@baseBorderRadius); } -// Centered + +// 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/NzbDrone.Web/Content2/Bootstrap/popovers.less b/NzbDrone.Web/Content2/Bootstrap/popovers.less index 2b3f1b059..b5b2a7eb5 100644 --- a/NzbDrone.Web/Content2/Bootstrap/popovers.less +++ b/NzbDrone.Web/Content2/Bootstrap/popovers.less @@ -11,6 +11,7 @@ display: none; width: 236px; padding: 1px; + text-align: left; // Reset given new insertion method background-color: @popoverBackground; -webkit-background-clip: padding-box; -moz-background-clip: padding; @@ -20,12 +21,14 @@ .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-bottom: 10px; } + &.top { margin-top: -10px; } &.right { margin-left: 10px; } &.bottom { margin-top: 10px; } - &.left { margin-right: 10px; } - + &.left { margin-left: -10px; } } .popover-title { @@ -41,77 +44,86 @@ .popover-content { padding: 9px 14px; - p, ul, ol { - margin-bottom: 0; - } } // Arrows +// +// .arrow is outer, .arrow:after is inner + .popover .arrow, .popover .arrow:after { position: absolute; - display: inline-block; + display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } +.popover .arrow { + border-width: @popoverArrowOuterWidth; +} .popover .arrow:after { + border-width: @popoverArrowWidth; content: ""; - z-index: -1; } .popover { &.top .arrow { - bottom: -@popoverArrowWidth; left: 50%; - margin-left: -@popoverArrowWidth; - border-width: @popoverArrowWidth @popoverArrowWidth 0; - border-top-color: @popoverArrowColor; + margin-left: -@popoverArrowOuterWidth; + border-bottom-width: 0; + border-top-color: #999; // IE8 fallback + border-top-color: @popoverArrowOuterColor; + bottom: -@popoverArrowOuterWidth; &:after { - border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0; - border-top-color: @popoverArrowOuterColor; - bottom: -1px; - left: -@popoverArrowOuterWidth; + bottom: 1px; + margin-left: -@popoverArrowWidth; + border-bottom-width: 0; + border-top-color: @popoverArrowColor; } } &.right .arrow { top: 50%; - left: -@popoverArrowWidth; - margin-top: -@popoverArrowWidth; - border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0; - border-right-color: @popoverArrowColor; + left: -@popoverArrowOuterWidth; + margin-top: -@popoverArrowOuterWidth; + border-left-width: 0; + border-right-color: #999; // IE8 fallback + border-right-color: @popoverArrowOuterColor; &:after { - border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0; - border-right-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - left: -1px; + left: 1px; + bottom: -@popoverArrowWidth; + border-left-width: 0; + border-right-color: @popoverArrowColor; } } &.bottom .arrow { - top: -@popoverArrowWidth; left: 50%; - margin-left: -@popoverArrowWidth; - border-width: 0 @popoverArrowWidth @popoverArrowWidth; - border-bottom-color: @popoverArrowColor; + margin-left: -@popoverArrowOuterWidth; + border-top-width: 0; + border-bottom-color: #999; // IE8 fallback + border-bottom-color: @popoverArrowOuterColor; + top: -@popoverArrowOuterWidth; &:after { - border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; - border-bottom-color: @popoverArrowOuterColor; - top: -1px; - left: -@popoverArrowOuterWidth; + top: 1px; + margin-left: -@popoverArrowWidth; + border-top-width: 0; + border-bottom-color: @popoverArrowColor; } } + &.left .arrow { top: 50%; - right: -@popoverArrowWidth; - margin-top: -@popoverArrowWidth; - border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth; - border-left-color: @popoverArrowColor; + right: -@popoverArrowOuterWidth; + margin-top: -@popoverArrowOuterWidth; + border-right-width: 0; + border-left-color: #999; // IE8 fallback + border-left-color: @popoverArrowOuterColor; &:after { - border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; - border-left-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - right: -1px; + right: 1px; + border-right-width: 0; + border-left-color: @popoverArrowColor; + bottom: -@popoverArrowWidth; } } + } diff --git a/NzbDrone.Web/Content2/Bootstrap/progress-bars.less b/NzbDrone.Web/Content2/Bootstrap/progress-bars.less index 5d5a1da7b..5e0c3dda0 100644 --- a/NzbDrone.Web/Content2/Bootstrap/progress-bars.less +++ b/NzbDrone.Web/Content2/Bootstrap/progress-bars.less @@ -48,7 +48,7 @@ margin-bottom: @baseLineHeight; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); - .border-radius(4px); + .border-radius(@baseBorderRadius); } // Bar of progress @@ -59,14 +59,14 @@ float: left; font-size: 12px; text-align: center; - //text-shadow: 0 -1px 0 rgba(0,0,0,.25); + 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)); + .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); } // Striped bars diff --git a/NzbDrone.Web/Content2/Bootstrap/reset.less b/NzbDrone.Web/Content2/Bootstrap/reset.less index 2901a85c8..4806bd5e5 100644 --- a/NzbDrone.Web/Content2/Bootstrap/reset.less +++ b/NzbDrone.Web/Content2/Bootstrap/reset.less @@ -1,5 +1,5 @@ // -// Modals +// Reset CSS // Adapted from http://github.com/necolas/normalize.css // -------------------------------------------------- @@ -88,7 +88,8 @@ img { } // Prevent max-width from affecting Google Maps -#map_canvas img { +#map_canvas img, +.google-maps img { max-width: none; } @@ -115,16 +116,24 @@ input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 border: 0; } button, -input[type="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"] { - cursor: pointer; // Cursors on all buttons applied consistently - -webkit-appearance: button; // Style clickable inputs in iOS + -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 - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + .box-sizing(content-box); -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, @@ -135,3 +144,73 @@ 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/NzbDrone.Web/Content2/Bootstrap/responsive-767px-max.less b/NzbDrone.Web/Content2/Bootstrap/responsive-767px-max.less index 79c7eaa82..1d5c1239c 100644 --- a/NzbDrone.Web/Content2/Bootstrap/responsive-767px-max.less +++ b/NzbDrone.Web/Content2/Bootstrap/responsive-767px-max.less @@ -58,6 +58,7 @@ } // 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; @@ -70,6 +71,9 @@ width: 100%; .box-sizing(border-box); } + .row-fluid [class*="offset"]:first-child { + margin-left: 0; + } // FORM FIELDS // ----------- @@ -103,7 +107,8 @@ right: 20px; width: auto; margin: 0; - &.fade.in { top: auto; } + &.fade { top: -100px; } + &.fade.in { top: 20px; } } } @@ -155,6 +160,20 @@ } } + // 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; diff --git a/NzbDrone.Web/Content2/Bootstrap/responsive-navbar.less b/NzbDrone.Web/Content2/Bootstrap/responsive-navbar.less index c454dd5e3..2a0b0c057 100644 --- a/NzbDrone.Web/Content2/Bootstrap/responsive-navbar.less +++ b/NzbDrone.Web/Content2/Bootstrap/responsive-navbar.less @@ -75,7 +75,7 @@ .nav-collapse .btn { padding: 4px 10px 4px; font-weight: normal; - .border-radius(4px); + .border-radius(@baseBorderRadius); } .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; @@ -84,6 +84,10 @@ .nav-collapse .dropdown-menu a:hover { 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 .dropdown-menu a:hover { background-color: @navbarInverseBackground; @@ -99,7 +103,7 @@ top: auto; left: auto; float: none; - display: block; + display: none; max-width: none; margin: 0 15px; padding: 0; @@ -108,6 +112,10 @@ .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; @@ -129,7 +137,7 @@ 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)); + .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 { @@ -166,7 +174,7 @@ // DEFAULT DESKTOP // --------------- -@media (min-width: 980px) { +@media (min-width: @navbarCollapseDesktopWidth) { // Required to make the collapsing navbar work on regular desktops .nav-collapse.collapse { diff --git a/NzbDrone.Web/Content2/Bootstrap/responsive.less b/NzbDrone.Web/Content2/Bootstrap/responsive.less index 87b347085..7cfaf80b9 100644 --- a/NzbDrone.Web/Content2/Bootstrap/responsive.less +++ b/NzbDrone.Web/Content2/Bootstrap/responsive.less @@ -1,5 +1,5 @@ /*! - * Bootstrap Responsive v2.1.1 + * Bootstrap Responsive v2.2.2 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 @@ -14,6 +14,15 @@ // ------------------------------------------------------------- +// 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; +} + + // REPEAT VARIABLES & MIXINS // ------------------------- // Required since we compile the responsive stuff separately diff --git a/NzbDrone.Web/Content2/Bootstrap/sprites.less b/NzbDrone.Web/Content2/Bootstrap/sprites.less index 9bf970fa9..9cd2ae3bf 100644 --- a/NzbDrone.Web/Content2/Bootstrap/sprites.less +++ b/NzbDrone.Web/Content2/Bootstrap/sprites.less @@ -30,8 +30,6 @@ /* White icons with optional class, or on hover/active states of certain elements */ .icon-white, -.nav-tabs > .active > a > [class^="icon-"], -.nav-tabs > .active > a > [class*=" icon-"], .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], @@ -41,7 +39,9 @@ .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], -.dropdown-menu > .active > a > [class*=" icon-"] { +.dropdown-menu > .active > a > [class*=" icon-"], +.dropdown-submenu:hover > a > [class^="icon-"], +.dropdown-submenu:hover > a > [class*=" icon-"] { background-image: url("@{iconWhiteSpritePath}"); } diff --git a/NzbDrone.Web/Content2/Bootstrap/tables.less b/NzbDrone.Web/Content2/Bootstrap/tables.less index 13c37c6e8..f3b9967f0 100644 --- a/NzbDrone.Web/Content2/Bootstrap/tables.less +++ b/NzbDrone.Web/Content2/Bootstrap/tables.less @@ -48,6 +48,11 @@ table { tbody + tbody { border-top: 2px solid @tableBorder; } + + // Nesting + .table { + background-color: @bodyBackground; + } } @@ -71,7 +76,7 @@ table { border-collapse: separate; // Done so we can round those corners! *border-collapse: collapse; // IE7 can't round corners anyway border-left: 0; - .border-radius(4px); + .border-radius(@baseBorderRadius); th, td { border-left: 1px solid @tableBorder; @@ -89,51 +94,47 @@ table { border-top: 0; } // For first th or 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 { - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - } - thead:first-child tr:first-child th:last-child, - tbody:first-child tr:first-child td:last-child { - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; + thead:first-child tr:first-child > th:first-child, + tbody:first-child tr:first-child > td:first-child { + .border-top-left-radius(@baseBorderRadius); } - // For first th or td in the first row in the first thead or tbody - thead:last-child tr:last-child th:first-child, - tbody:last-child tr:last-child td:first-child, - tfoot:last-child tr:last-child td:first-child { - .border-radius(0 0 0 4px); - -webkit-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - } - thead:last-child tr:last-child th:last-child, - tbody:last-child tr:last-child td:last-child, - tfoot:last-child tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; + thead:first-child tr:first-child > th:last-child, + tbody:first-child tr:first-child > td:last-child { + .border-top-right-radius(@baseBorderRadius); + } + // For first th or td in the last row in the last thead or tbody + thead:last-child tr:last-child > th:first-child, + tbody:last-child tr:last-child > td:first-child, + tfoot:last-child tr:last-child > td:first-child { + .border-bottom-left-radius(@baseBorderRadius); + } + thead:last-child tr:last-child > th:last-child, + tbody:last-child tr:last-child > td:last-child, + tfoot:last-child tr:last-child > td: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 { - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; + .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 { - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-topleft: 4px; + .border-top-right-radius(@baseBorderRadius); } } @@ -147,8 +148,8 @@ table { // Default zebra-stripe styles (alternating gray and transparent backgrounds) .table-striped { tbody { - tr:nth-child(odd) td, - tr:nth-child(odd) th { + > tr:nth-child(odd) > td, + > tr:nth-child(odd) > th { background-color: @tableBackgroundAccent; } } @@ -172,39 +173,30 @@ table { // ----------------- // Reset default grid behavior -table [class*=span], -.row-fluid table [class*=span] { +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 { - .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); } - .span13 { .tableColumns(13); } - .span14 { .tableColumns(14); } - .span15 { .tableColumns(15); } - .span16 { .tableColumns(16); } - .span17 { .tableColumns(17); } - .span18 { .tableColumns(18); } - .span19 { .tableColumns(19); } - .span20 { .tableColumns(20); } - .span21 { .tableColumns(21); } - .span22 { .tableColumns(22); } - .span23 { .tableColumns(23); } - .span24 { .tableColumns(24); } +.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); } } diff --git a/NzbDrone.Web/Content2/Bootstrap/thumbnails.less b/NzbDrone.Web/Content2/Bootstrap/thumbnails.less index 91b75f785..a84a7d37d 100644 --- a/NzbDrone.Web/Content2/Bootstrap/thumbnails.less +++ b/NzbDrone.Web/Content2/Bootstrap/thumbnails.less @@ -29,7 +29,7 @@ padding: 4px; line-height: @baseLineHeight; border: 1px solid #ddd; - .border-radius(4px); + .border-radius(@baseBorderRadius); .box-shadow(0 1px 3px rgba(0,0,0,.055)); .transition(all .2s ease-in-out); } diff --git a/NzbDrone.Web/Content2/Bootstrap/tooltip.less b/NzbDrone.Web/Content2/Bootstrap/tooltip.less index fba1856f5..93fac8d6b 100644 --- a/NzbDrone.Web/Content2/Bootstrap/tooltip.less +++ b/NzbDrone.Web/Content2/Bootstrap/tooltip.less @@ -27,7 +27,7 @@ text-align: center; text-decoration: none; background-color: @tooltipBackground; - .border-radius(4px); + .border-radius(@baseBorderRadius); } // Arrows diff --git a/NzbDrone.Web/Content2/Bootstrap/type.less b/NzbDrone.Web/Content2/Bootstrap/type.less index 2e0f386ee..683a30772 100644 --- a/NzbDrone.Web/Content2/Bootstrap/type.less +++ b/NzbDrone.Web/Content2/Bootstrap/type.less @@ -20,35 +20,28 @@ p { // Emphasis & misc // ------------------------- -small { - font-size: 85%; // Ex: 14px base font * 85% = about 12px -} -strong { - font-weight: bold; -} -em { - font-style: italic; -} -cite { - font-style: normal; -} +// 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; -} -.text-warning { - color: @warningText; -} -.text-error { - color: @errorText; -} -.text-info { - color: @infoText; -} -.text-success { - color: @successText; -} +.muted { color: @grayLight; } +a.muted:hover { color: darken(@grayLight, 10%); } + +.text-warning { color: @warningText; } +a.text-warning:hover { color: darken(@warningText, 10%); } + +.text-error { color: @errorText; } +a.text-error:hover { color: darken(@errorText, 10%); } + +.text-info { color: @infoText; } +a.text-info:hover { color: darken(@infoText, 10%); } + +.text-success { color: @successText; } +a.text-success:hover { color: darken(@successText, 10%); } // Headings @@ -58,7 +51,7 @@ h1, h2, h3, h4, h5, h6 { margin: (@baseLineHeight / 2) 0; font-family: @headingsFontFamily; font-weight: @headingsFontWeight; - line-height: 1; + line-height: @baseLineHeight; color: @headingsColor; text-rendering: optimizelegibility; // Fix the character spacing for headings small { @@ -67,17 +60,22 @@ h1, h2, h3, h4, h5, h6 { color: @grayLight; } } -h1 { font-size: 36px; line-height: 40px; } -h2 { font-size: 30px; line-height: 40px; } -h3 { font-size: 24px; line-height: 40px; } -h4 { font-size: 18px; line-height: 20px; } -h5 { font-size: 14px; line-height: 20px; } -h6 { font-size: 12px; line-height: 20px; } -h1 small { font-size: 24px; } -h2 small { font-size: 18px; } -h3 small { font-size: 14px; } -h4 small { font-size: 14px; } +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 @@ -108,12 +106,26 @@ ol ul { 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; + padding-left: 5px; + padding-right: 5px; + } +} + // Description Lists dl { margin-bottom: @baseLineHeight; @@ -155,7 +167,9 @@ hr { } // Abbreviations and acronyms -abbr[title] { +abbr[title], +// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 +abbr[data-original-title] { cursor: help; border-bottom: 1px dotted @grayLight; } diff --git a/NzbDrone.Web/Content2/Bootstrap/variables.css b/NzbDrone.Web/Content2/Bootstrap/variables.css deleted file mode 100644 index 5f282702b..000000000 --- a/NzbDrone.Web/Content2/Bootstrap/variables.css +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/NzbDrone.Web/Content2/Bootstrap/variables.less b/NzbDrone.Web/Content2/Bootstrap/variables.less index 03e13bebf..ed6a90fb6 100644 --- a/NzbDrone.Web/Content2/Bootstrap/variables.less +++ b/NzbDrone.Web/Content2/Bootstrap/variables.less @@ -9,10 +9,10 @@ // Grays // ------------------------- -@black: #57606B; -@grayDarker: #191919 ; -@grayDark: #57606B; -@gray: #57606B; +@black: #000; +@grayDarker: #222; +@grayDark: #333; +@gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff; @@ -22,7 +22,6 @@ // ------------------------- @blue: #065EFE; @blueDark: #0064cd; -@blueDark: #0064cd; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; @@ -33,13 +32,13 @@ // Scaffolding // ------------------------- -@bodyBackground: @grayDarker; +@bodyBackground: @white; @textColor: @grayDark; // Links // ------------------------- -@linkColor: @blue; +@linkColor: #08c; @linkColorHover: darken(@linkColor, 15%); @@ -58,6 +57,24 @@ @headingsFontWeight: 100; // 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 @@ -94,9 +111,11 @@ // ------------------------- @inputBackground: @white; @inputBorder: #ccc; -@inputBorderRadius: 0px; +@inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5; +@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border + // Dropdowns // ------------------------- @@ -107,7 +126,7 @@ @dropdownLinkColor: @grayDark; @dropdownLinkColorHover: @white; -@dropdownLinkColorActive: @dropdownLinkColor; +@dropdownLinkColorActive: @white; @dropdownLinkBackgroundActive: @linkColor; @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; @@ -117,6 +136,7 @@ // COMPONENT VARIABLES // -------------------------------------------------- + // Z-index master list // ------------------------- // Used for a bird's eye view of components dependent on the z-axis @@ -157,7 +177,8 @@ // Navbar // ------------------------- -@navbarCollapseWidth: 0px; +@navbarCollapseWidth: 979px; +@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarHeight: 40px; @navbarBackgroundHighlight: #ffffff; @@ -186,7 +207,7 @@ @navbarInverseLinkBackgroundActive: @navbarInverseBackground; @navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); -@navbarInverseSearchBackgroundFocus: @blue; +@navbarInverseSearchBackgroundFocus: @white; @navbarInverseSearchBorder: @navbarInverseBackground; @navbarInverseSearchPlaceholderColor: #ccc; diff --git a/NzbDrone.Web/Content2/Bootstrap/variables.min.css b/NzbDrone.Web/Content2/Bootstrap/variables.min.css deleted file mode 100644 index 5f282702b..000000000 --- a/NzbDrone.Web/Content2/Bootstrap/variables.min.css +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/NzbDrone.Web/Content2/Bootstrap/wells.less b/NzbDrone.Web/Content2/Bootstrap/wells.less index e4e0a9beb..84a744b1c 100644 --- a/NzbDrone.Web/Content2/Bootstrap/wells.less +++ b/NzbDrone.Web/Content2/Bootstrap/wells.less @@ -10,7 +10,7 @@ margin-bottom: 20px; background-color: @wellBackground; border: 1px solid darken(@wellBackground, 7%); - .border-radius(4px); + .border-radius(@baseBorderRadius); .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { border-color: #ddd; @@ -21,9 +21,9 @@ // Sizes .well-large { padding: 24px; - .border-radius(6px); + .border-radius(@borderRadiusLarge); } .well-small { padding: 9px; - .border-radius(3px); + .border-radius(@borderRadiusSmall); } diff --git a/NzbDrone.Web/NzbDrone.Web.csproj b/NzbDrone.Web/NzbDrone.Web.csproj index 9b66b72ee..dd8310308 100644 --- a/NzbDrone.Web/NzbDrone.Web.csproj +++ b/NzbDrone.Web/NzbDrone.Web.csproj @@ -214,7 +214,6 @@ - mixins.less diff --git a/NzbDrone.Web/Scripts2/bootstrap.js b/NzbDrone.Web/Scripts2/bootstrap.js index f73fcb8e7..6c15a5832 100644 --- a/NzbDrone.Web/Scripts2/bootstrap.js +++ b/NzbDrone.Web/Scripts2/bootstrap.js @@ -1,5 +1,5 @@ /* =================================================== - * bootstrap-transition.js v2.1.1 + * bootstrap-transition.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#transitions * =================================================== * Copyright 2012 Twitter, Inc. @@ -20,13 +20,13 @@ !function ($) { - $(function () { + "use strict"; // jshint ;_; - "use strict"; // jshint ;_; + /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) + * ======================================================= */ - /* CSS TRANSITION SUPPORT (http://www.modernizr.com/) - * ======================================================= */ + $(function () { $.support.transition = (function () { @@ -58,7 +58,7 @@ }) }(window.jQuery);/* ========================================================== - * bootstrap-alert.js v2.1.1 + * bootstrap-alert.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#alerts * ========================================================== * Copyright 2012 Twitter, Inc. @@ -127,6 +127,8 @@ /* ALERT PLUGIN DEFINITION * ======================= */ + var old = $.fn.alert + $.fn.alert = function (option) { return this.each(function () { var $this = $(this) @@ -139,15 +141,22 @@ $.fn.alert.Constructor = Alert + /* ALERT NO CONFLICT + * ================= */ + + $.fn.alert.noConflict = function () { + $.fn.alert = old + return this + } + + /* ALERT DATA-API * ============== */ - $(function () { - $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) - }) + $(document).on('click.alert.data-api', dismiss, Alert.prototype.close) }(window.jQuery);/* ============================================================ - * bootstrap-button.js v2.1.1 + * bootstrap-button.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#buttons * ============================================================ * Copyright 2012 Twitter, Inc. @@ -212,6 +221,8 @@ /* BUTTON PLUGIN DEFINITION * ======================== */ + var old = $.fn.button + $.fn.button = function (option) { return this.each(function () { var $this = $(this) @@ -230,19 +241,26 @@ $.fn.button.Constructor = Button + /* BUTTON NO CONFLICT + * ================== */ + + $.fn.button.noConflict = function () { + $.fn.button = old + return this + } + + /* BUTTON DATA-API * =============== */ - $(function () { - $('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) { - var $btn = $(e.target) - if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') - $btn.button('toggle') - }) + $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) { + var $btn = $(e.target) + if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') + $btn.button('toggle') }) }(window.jQuery);/* ========================================================== - * bootstrap-carousel.js v2.1.1 + * bootstrap-carousel.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#carousel * ========================================================== * Copyright 2012 Twitter, Inc. @@ -272,7 +290,6 @@ var Carousel = function (element, options) { this.$element = $(element) this.options = options - this.options.slide && this.slide(this.options.slide) this.options.pause == 'hover' && this.$element .on('mouseenter', $.proxy(this.pause, this)) .on('mouseleave', $.proxy(this.cycle, this)) @@ -337,9 +354,7 @@ , direction = type == 'next' ? 'left' : 'right' , fallback = type == 'next' ? 'first' : 'last' , that = this - , e = $.Event('slide', { - relatedTarget: $next[0] - }) + , e this.sliding = true @@ -347,6 +362,10 @@ $next = $next.length ? $next : this.$element.find('.item')[fallback]() + e = $.Event('slide', { + relatedTarget: $next[0] + }) + if ($next.hasClass('active')) return if ($.support.transition && this.$element.hasClass('slide')) { @@ -382,6 +401,8 @@ /* CAROUSEL PLUGIN DEFINITION * ========================== */ + var old = $.fn.carousel + $.fn.carousel = function (option) { return this.each(function () { var $this = $(this) @@ -403,21 +424,27 @@ $.fn.carousel.Constructor = Carousel + /* CAROUSEL NO CONFLICT + * ==================== */ + + $.fn.carousel.noConflict = function () { + $.fn.carousel = old + return this + } + /* CAROUSEL DATA-API * ================= */ - $(function () { - $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) { - var $this = $(this), href - , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 - , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data()) - $target.carousel(options) - e.preventDefault() - }) + $(document).on('click.carousel.data-api', '[data-slide]', function (e) { + var $this = $(this), href + , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 + , options = $.extend({}, $target.data(), $this.data()) + $target.carousel(options) + e.preventDefault() }) }(window.jQuery);/* ============================================================= - * bootstrap-collapse.js v2.1.1 + * bootstrap-collapse.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#collapse * ============================================================= * Copyright 2012 Twitter, Inc. @@ -538,8 +565,10 @@ } - /* COLLAPSIBLE PLUGIN DEFINITION - * ============================== */ + /* COLLAPSE PLUGIN DEFINITION + * ========================== */ + + var old = $.fn.collapse $.fn.collapse = function (option) { return this.each(function () { @@ -558,23 +587,30 @@ $.fn.collapse.Constructor = Collapse - /* COLLAPSIBLE DATA-API + /* COLLAPSE NO CONFLICT * ==================== */ - $(function () { - $('body').on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { - var $this = $(this), href - , target = $this.attr('data-target') - || e.preventDefault() - || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 - , option = $(target).data('collapse') ? 'toggle' : $this.data() - $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') - $(target).collapse(option) - }) + $.fn.collapse.noConflict = function () { + $.fn.collapse = old + return this + } + + + /* COLLAPSE DATA-API + * ================= */ + + $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { + var $this = $(this), href + , target = $this.attr('data-target') + || e.preventDefault() + || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 + , option = $(target).data('collapse') ? 'toggle' : $this.data() + $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') + $(target).collapse(option) }) }(window.jQuery);/* ============================================================ - * bootstrap-dropdown.js v2.1.1 + * bootstrap-dropdown.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#dropdowns * ============================================================ * Copyright 2012 Twitter, Inc. @@ -628,9 +664,10 @@ if (!isActive) { $parent.toggleClass('open') - $this.focus() } + $this.focus() + return false } @@ -657,7 +694,7 @@ if (!isActive || (isActive && e.keyCode == 27)) return $this.click() - $items = $('[role=menu] li:not(.divider) a', $parent) + $items = $('[role=menu] li:not(.divider):visible a', $parent) if (!$items.length) return @@ -675,8 +712,9 @@ } function clearMenus() { - getParent($(toggle)) - .removeClass('open') + $(toggle).each(function () { + getParent($(this)).removeClass('open') + }) } function getParent($this) { @@ -698,6 +736,8 @@ /* DROPDOWN PLUGIN DEFINITION * ========================== */ + var old = $.fn.dropdown + $.fn.dropdown = function (option) { return this.each(function () { var $this = $(this) @@ -710,20 +750,27 @@ $.fn.dropdown.Constructor = Dropdown + /* DROPDOWN NO CONFLICT + * ==================== */ + + $.fn.dropdown.noConflict = function () { + $.fn.dropdown = old + return this + } + + /* APPLY TO STANDARD DROPDOWN ELEMENTS * =================================== */ - $(function () { - $('html') - .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) - $('body') - .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) - .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) - .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) - }) + $(document) + .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) + .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) + .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() }) + .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) + .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) }(window.jQuery);/* ========================================================= - * bootstrap-modal.js v2.1.1 + * bootstrap-modal.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#modals * ========================================================= * Copyright 2012 Twitter, Inc. @@ -773,8 +820,6 @@ if (this.isShown || e.isDefaultPrevented()) return - $('body').addClass('modal-open') - this.isShown = true this.escape() @@ -796,13 +841,12 @@ that.$element .addClass('in') .attr('aria-hidden', false) - .focus() that.enforceFocus() transition ? - that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) : - that.$element.trigger('shown') + that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) : + that.$element.focus().trigger('shown') }) } @@ -820,8 +864,6 @@ this.isShown = false - $('body').removeClass('modal-open') - this.escape() $(document).off('focusin.modal') @@ -891,9 +933,11 @@ this.$backdrop = $('
') .appendTo(document.body) - if (this.options.backdrop != 'static') { - this.$backdrop.click($.proxy(this.hide, this)) - } + this.$backdrop.click( + this.options.backdrop == 'static' ? + $.proxy(this.$element[0].focus, this.$element[0]) + : $.proxy(this.hide, this) + ) if (doAnimate) this.$backdrop[0].offsetWidth // force reflow @@ -920,6 +964,8 @@ /* MODAL PLUGIN DEFINITION * ======================= */ + var old = $.fn.modal + $.fn.modal = function (option) { return this.each(function () { var $this = $(this) @@ -940,28 +986,36 @@ $.fn.modal.Constructor = Modal + /* MODAL NO CONFLICT + * ================= */ + + $.fn.modal.noConflict = function () { + $.fn.modal = old + return this + } + + /* MODAL DATA-API * ============== */ - $(function () { - $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) { - var $this = $(this) - , href = $this.attr('href') - , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 - , option = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) + $(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) { + var $this = $(this) + , href = $this.attr('href') + , $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7 + , option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) - e.preventDefault() + e.preventDefault() - $target - .modal(option) - .one('hide', function () { - $this.focus() - }) - }) + $target + .modal(option) + .one('hide', function () { + $this.focus() + }) }) -}(window.jQuery);/* =========================================================== - * bootstrap-tooltip.js v2.1.1 +}(window.jQuery); +/* =========================================================== + * bootstrap-tooltip.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#tooltips * Inspired by the original jQuery.tipsy by Jason Frame * =========================================================== @@ -1081,9 +1135,9 @@ inside = /in/.test(placement) $tip - .remove() + .detach() .css({ top: 0, left: 0, display: 'block' }) - .appendTo(inside ? this.$element : document.body) + .insertAfter(this.$element) pos = this.getPosition(inside) @@ -1106,7 +1160,7 @@ } $tip - .css(tp) + .offset(tp) .addClass(placement) .addClass('in') } @@ -1128,18 +1182,18 @@ function removeWithAnimation() { var timeout = setTimeout(function () { - $tip.off($.support.transition.end).remove() + $tip.off($.support.transition.end).detach() }, 500) $tip.one($.support.transition.end, function () { clearTimeout(timeout) - $tip.remove() + $tip.detach() }) } $.support.transition && this.$tip.hasClass('fade') ? removeWithAnimation() : - $tip.remove() + $tip.detach() return this } @@ -1197,8 +1251,9 @@ this.enabled = !this.enabled } - , toggle: function () { - this[this.tip().hasClass('in') ? 'hide' : 'show']() + , toggle: function (e) { + var self = $(e.currentTarget)[this.type](this._options).data(this.type) + self[self.tip().hasClass('in') ? 'hide' : 'show']() } , destroy: function () { @@ -1211,6 +1266,8 @@ /* TOOLTIP PLUGIN DEFINITION * ========================= */ + var old = $.fn.tooltip + $.fn.tooltip = function ( option ) { return this.each(function () { var $this = $(this) @@ -1231,12 +1288,20 @@ , trigger: 'hover' , title: '' , delay: 0 - , html: true + , html: false } -}(window.jQuery); -/* =========================================================== - * bootstrap-popover.js v2.1.1 + + /* TOOLTIP NO CONFLICT + * =================== */ + + $.fn.tooltip.noConflict = function () { + $.fn.tooltip = old + return this + } + +}(window.jQuery);/* =========================================================== + * bootstrap-popover.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#popovers * =========================================================== * Copyright 2012 Twitter, Inc. @@ -1281,7 +1346,7 @@ , content = this.getContent() $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title) - $tip.find('.popover-content > *')[this.options.html ? 'html' : 'text'](content) + $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content) $tip.removeClass('fade top bottom left right in') } @@ -1318,6 +1383,8 @@ /* POPOVER PLUGIN DEFINITION * ======================= */ + var old = $.fn.popover + $.fn.popover = function (option) { return this.each(function () { var $this = $(this) @@ -1334,11 +1401,20 @@ placement: 'right' , trigger: 'click' , content: '' - , template: '

' + , template: '

' }) + + /* POPOVER NO CONFLICT + * =================== */ + + $.fn.popover.noConflict = function () { + $.fn.popover = old + return this + } + }(window.jQuery);/* ============================================================= - * bootstrap-scrollspy.js v2.1.1 + * bootstrap-scrollspy.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#scrollspy * ============================================================= * Copyright 2012 Twitter, Inc. @@ -1398,7 +1474,7 @@ , $href = /^#\w/.test(href) && $(href) return ( $href && $href.length - && [[ $href.position().top, href ]] ) || null + && [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null }) .sort(function (a, b) { return a[0] - b[0] }) .each(function () { @@ -1460,6 +1536,8 @@ /* SCROLLSPY PLUGIN DEFINITION * =========================== */ + var old = $.fn.scrollspy + $.fn.scrollspy = function (option) { return this.each(function () { var $this = $(this) @@ -1477,6 +1555,15 @@ } + /* SCROLLSPY NO CONFLICT + * ===================== */ + + $.fn.scrollspy.noConflict = function () { + $.fn.scrollspy = old + return this + } + + /* SCROLLSPY DATA-API * ================== */ @@ -1488,7 +1575,7 @@ }) }(window.jQuery);/* ======================================================== - * bootstrap-tab.js v2.1.1 + * bootstrap-tab.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#tabs * ======================================================== * Copyright 2012 Twitter, Inc. @@ -1538,7 +1625,7 @@ if ( $this.parent('li').hasClass('active') ) return - previous = $ul.find('.active a').last()[0] + previous = $ul.find('.active:last a')[0] e = $.Event('show', { relatedTarget: previous @@ -1599,6 +1686,8 @@ /* TAB PLUGIN DEFINITION * ===================== */ + var old = $.fn.tab + $.fn.tab = function ( option ) { return this.each(function () { var $this = $(this) @@ -1611,18 +1700,25 @@ $.fn.tab.Constructor = Tab + /* TAB NO CONFLICT + * =============== */ + + $.fn.tab.noConflict = function () { + $.fn.tab = old + return this + } + + /* TAB DATA-API * ============ */ - $(function () { - $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { - e.preventDefault() - $(this).tab('show') - }) + $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { + e.preventDefault() + $(this).tab('show') }) }(window.jQuery);/* ============================================================= - * bootstrap-typeahead.js v2.1.1 + * bootstrap-typeahead.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#typeahead * ============================================================= * Copyright 2012 Twitter, Inc. @@ -1656,8 +1752,8 @@ this.sorter = this.options.sorter || this.sorter this.highlighter = this.options.highlighter || this.highlighter this.updater = this.options.updater || this.updater - this.$menu = $(this.options.menu).appendTo('body') this.source = this.options.source + this.$menu = $(this.options.menu) this.shown = false this.listen() } @@ -1679,16 +1775,18 @@ } , show: function () { - var pos = $.extend({}, this.$element.offset(), { + var pos = $.extend({}, this.$element.position(), { height: this.$element[0].offsetHeight }) - this.$menu.css({ - top: pos.top + pos.height - , left: pos.left - }) + this.$menu + .insertAfter(this.$element) + .css({ + top: pos.top + pos.height + , left: pos.left + }) + .show() - this.$menu.show() this.shown = true return this } @@ -1797,7 +1895,7 @@ .on('keypress', $.proxy(this.keypress, this)) .on('keyup', $.proxy(this.keyup, this)) - if ($.browser.chrome || $.browser.webkit || $.browser.msie) { + if (this.eventSupported('keydown')) { this.$element.on('keydown', $.proxy(this.keydown, this)) } @@ -1806,6 +1904,15 @@ .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) } + , eventSupported: function(eventName) { + var isSupported = eventName in this.$element + if (!isSupported) { + this.$element.setAttribute(eventName, 'return;') + isSupported = typeof this.$element[eventName] === 'function' + } + return isSupported + } + , move: function (e) { if (!this.shown) return @@ -1831,7 +1938,7 @@ } , keydown: function (e) { - this.suppressKeyPressRepeat = !~$.inArray(e.keyCode, [40,38,9,13,27]) + this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]) this.move(e) } @@ -1844,6 +1951,9 @@ switch(e.keyCode) { case 40: // down arrow case 38: // up arrow + case 16: // shift + case 17: // ctrl + case 18: // alt break case 9: // tab @@ -1887,6 +1997,8 @@ /* TYPEAHEAD PLUGIN DEFINITION * =========================== */ + var old = $.fn.typeahead + $.fn.typeahead = function (option) { return this.each(function () { var $this = $(this) @@ -1908,21 +2020,28 @@ $.fn.typeahead.Constructor = Typeahead - /* TYPEAHEAD DATA-API + /* TYPEAHEAD NO CONFLICT + * =================== */ + + $.fn.typeahead.noConflict = function () { + $.fn.typeahead = old + return this + } + + + /* TYPEAHEAD DATA-API * ================== */ - $(function () { - $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { - var $this = $(this) - if ($this.data('typeahead')) return - e.preventDefault() - $this.typeahead($this.data()) - }) + $(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) { + var $this = $(this) + if ($this.data('typeahead')) return + e.preventDefault() + $this.typeahead($this.data()) }) }(window.jQuery); /* ========================================================== - * bootstrap-affix.js v2.1.1 + * bootstrap-affix.js v2.2.2 * http://twitter.github.com/bootstrap/javascript.html#affix * ========================================================== * Copyright 2012 Twitter, Inc. @@ -1951,7 +2070,9 @@ var Affix = function (element, options) { this.options = $.extend({}, $.fn.affix.defaults, options) - this.$window = $(window).on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) + this.$window = $(window) + .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) + .on('click.affix.data-api', $.proxy(function () { setTimeout($.proxy(this.checkPosition, this), 1) }, this)) this.$element = $(element) this.checkPosition() } @@ -1989,6 +2110,8 @@ /* AFFIX PLUGIN DEFINITION * ======================= */ + var old = $.fn.affix + $.fn.affix = function (option) { return this.each(function () { var $this = $(this) @@ -2006,6 +2129,15 @@ } + /* AFFIX NO CONFLICT + * ================= */ + + $.fn.affix.noConflict = function () { + $.fn.affix = old + return this + } + + /* AFFIX DATA-API * ============== */