diff --git a/src/UI/Activity/Blacklist/BlacklistLayoutTemplate.hbs b/src/UI/Activity/Blacklist/BlacklistLayoutTemplate.hbs index a3d14fc32..8f78eb0db 100644 --- a/src/UI/Activity/Blacklist/BlacklistLayoutTemplate.hbs +++ b/src/UI/Activity/Blacklist/BlacklistLayoutTemplate.hbs @@ -1,7 +1,7 @@
-
-
+
+
diff --git a/src/UI/Activity/History/HistoryLayoutTemplate.hbs b/src/UI/Activity/History/HistoryLayoutTemplate.hbs index d5e3d1bce..bffb274fe 100644 --- a/src/UI/Activity/History/HistoryLayoutTemplate.hbs +++ b/src/UI/Activity/History/HistoryLayoutTemplate.hbs @@ -1,7 +1,7 @@
-
-
+
+
diff --git a/src/UI/Activity/Queue/QueueLayoutTemplate.hbs b/src/UI/Activity/Queue/QueueLayoutTemplate.hbs index 9855429ee..e8e6a3c12 100644 --- a/src/UI/Activity/Queue/QueueLayoutTemplate.hbs +++ b/src/UI/Activity/Queue/QueueLayoutTemplate.hbs @@ -1,6 +1,6 @@
-
-
+
+
diff --git a/src/UI/Content/Bootstrap/alerts.less b/src/UI/Content/Bootstrap/alerts.less index 3eab06629..c4199db92 100644 --- a/src/UI/Content/Bootstrap/alerts.less +++ b/src/UI/Content/Bootstrap/alerts.less @@ -18,6 +18,7 @@ // Specified for the h4 to prevent conflicts of changing @headings-color color: inherit; } + // Provide class for links that match alerts .alert-link { font-weight: @alert-link-font-weight; @@ -28,17 +29,19 @@ > ul { margin-bottom: 0; } + > p + p { margin-top: 5px; } } -// Dismissable alerts +// Dismissible alerts // // Expand the right padding and account for the close button's positioning. -.alert-dismissable { - padding-right: (@alert-padding + 20); +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. +.alert-dismissible { + padding-right: (@alert-padding + 20); // Adjust close link position .close { @@ -56,12 +59,15 @@ .alert-success { .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); } + .alert-info { .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); } + .alert-warning { .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); } + .alert-danger { .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); } diff --git a/src/UI/Content/Bootstrap/badges.less b/src/UI/Content/Bootstrap/badges.less index 56828cab7..c70bb939e 100644 --- a/src/UI/Content/Bootstrap/badges.less +++ b/src/UI/Content/Bootstrap/badges.less @@ -3,7 +3,7 @@ // -------------------------------------------------- -// Base classes +// Base class .badge { display: inline-block; min-width: 10px; @@ -28,28 +28,39 @@ position: relative; top: -1px; } - .btn-xs & { + + .btn-xs &, + .btn-group-xs > .btn & { top: 0; padding: 1px 5px; } -} -// Hover state, but only for links -a.badge { - &:hover, - &:focus { - color: @badge-link-hover-color; - text-decoration: none; - cursor: pointer; + // Hover state, but only for links + a& { + &:hover, + &:focus { + color: @badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } } -} -// Account for counters in navs -a.list-group-item.active > .badge, -.nav-pills > .active > a > .badge { - color: @badge-active-color; - background-color: @badge-active-bg; -} -.nav-pills > li > a > .badge { - margin-left: 3px; + // Account for badges in navs + .list-group-item.active > &, + .nav-pills > .active > a > & { + color: @badge-active-color; + background-color: @badge-active-bg; + } + + .list-group-item > & { + float: right; + } + + .list-group-item > & + & { + margin-right: 5px; + } + + .nav-pills > li > a > & { + margin-left: 3px; + } } diff --git a/src/UI/Content/Bootstrap/bootstrap.less b/src/UI/Content/Bootstrap/bootstrap.less index 765e0c4bc..61b77474f 100644 --- a/src/UI/Content/Bootstrap/bootstrap.less +++ b/src/UI/Content/Bootstrap/bootstrap.less @@ -2,9 +2,10 @@ @import "variables.less"; @import "mixins.less"; -// Reset +// Reset and dependencies @import "normalize.less"; -//@import "print.less"; +@import "print.less"; +@import "glyphicons.less"; // Core CSS @import "scaffolding.less"; @@ -17,7 +18,6 @@ // Components @import "component-animations.less"; -@import "glyphicons.less"; @import "dropdowns.less"; @import "button-groups.less"; @import "input-groups.less"; @@ -28,13 +28,14 @@ @import "pager.less"; @import "labels.less"; @import "badges.less"; -//@import "jumbotron.less"; -//@import "thumbnails.less"; +@import "jumbotron.less"; +@import "thumbnails.less"; @import "alerts.less"; @import "progress-bars.less"; -//@import "media.less"; -//@import "list-group.less"; -//@import "panels.less"; +@import "media.less"; +@import "list-group.less"; +@import "panels.less"; +@import "responsive-embed.less"; @import "wells.less"; @import "close.less"; @@ -42,7 +43,7 @@ @import "modals.less"; @import "tooltip.less"; @import "popovers.less"; -//@import "carousel.less"; +@import "carousel.less"; // Utility classes @import "utilities.less"; diff --git a/src/UI/Content/Bootstrap/button-groups.less b/src/UI/Content/Bootstrap/button-groups.less index 27eb796b8..13c1800de 100644 --- a/src/UI/Content/Bootstrap/button-groups.less +++ b/src/UI/Content/Bootstrap/button-groups.less @@ -18,10 +18,6 @@ &.active { z-index: 2; } - &:focus { - // Remove focus outline when dropdown JS adds it after closing the menu - outline: none; - } } } @@ -75,13 +71,13 @@ .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:first-child { +.btn-group > .btn-group:first-child:not(:last-child) { > .btn:last-child, > .dropdown-toggle { .border-right-radius(0); } } -.btn-group > .btn-group:last-child > .btn:first-child { +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { .border-left-radius(0); } @@ -198,7 +194,6 @@ } - // Justified button groups // ---------------------- @@ -216,11 +211,33 @@ > .btn-group .btn { width: 100%; } + + > .btn-group .dropdown-menu { + left: auto; + } } // Checkbox and radio options -[data-toggle="buttons"] > .btn > input[type="radio"], -[data-toggle="buttons"] > .btn > input[type="checkbox"] { - display: none; +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use +// `display: none;` or `visibility: hidden;` as that also hides the popover. +// Simply visually hiding the inputs via `opacity` would leave them clickable in +// certain cases which is prevented by using `clip` and `pointer-events`. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 and +// https://github.com/twbs/bootstrap/pull/14559 for more information. + +[data-toggle="buttons"] { + > .btn, + > .btn-group > .btn { + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; + } + } } diff --git a/src/UI/Content/Bootstrap/buttons.less b/src/UI/Content/Bootstrap/buttons.less index d4fc156be..5a746049e 100644 --- a/src/UI/Content/Bootstrap/buttons.less +++ b/src/UI/Content/Bootstrap/buttons.less @@ -12,6 +12,7 @@ font-weight: @btn-font-weight; text-align: center; vertical-align: middle; + touch-action: manipulation; cursor: pointer; background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid transparent; @@ -22,13 +23,15 @@ &, &:active, &.active { - &:focus { + &:focus, + &.focus { .tab-focus(); } } &:hover, - &:focus { + &:focus, + &.focus { color: @btn-default-color; text-decoration: none; } @@ -43,7 +46,7 @@ &.disabled, &[disabled], fieldset[disabled] & { - cursor: not-allowed; + cursor: @cursor-disabled; pointer-events: none; // Future-proof disabling of clicks .opacity(.65); .box-shadow(none); @@ -85,11 +88,11 @@ .btn-link { color: @link-color; font-weight: normal; - cursor: pointer; border-radius: 0; &, &:active, + &.active, &[disabled], fieldset[disabled] & { background-color: transparent; @@ -104,7 +107,7 @@ &:hover, &:focus { color: @link-hover-color; - text-decoration: underline; + text-decoration: @link-hover-decoration; background-color: transparent; } &[disabled], @@ -140,8 +143,6 @@ .btn-block { display: block; width: 100%; - padding-left: 0; - padding-right: 0; } // Vertically space out multiple block buttons diff --git a/src/UI/Content/Bootstrap/carousel.less b/src/UI/Content/Bootstrap/carousel.less index e3fb8a2cf..4bbe946d3 100644 --- a/src/UI/Content/Bootstrap/carousel.less +++ b/src/UI/Content/Bootstrap/carousel.less @@ -24,11 +24,37 @@ &:extend(.img-responsive); line-height: 1; } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-webkit-transform-3d) { + .transition-transform(~'0.6s ease-in-out'); + .backface-visibility(~'hidden'); + .perspective(1000); + + &.next, + &.active.right { + .translate3d(100%, 0, 0); + left: 0; + } + &.prev, + &.active.left { + .translate3d(-100%, 0, 0); + left: 0; + } + &.next.left, + &.prev.right, + &.active { + .translate3d(0, 0, 0); + left: 0; + } + } } > .active, > .next, - > .prev { display: block; } + > .prev { + display: block; + } > .active { left: 0; @@ -91,7 +117,7 @@ // Hover/focus state &:hover, &:focus { - outline: none; + outline: 0; color: @carousel-control-color; text-decoration: none; .opacity(.9); @@ -110,20 +136,23 @@ .icon-prev, .glyphicon-chevron-left { left: 50%; + margin-left: -10px; } .icon-next, .glyphicon-chevron-right { right: 50%; + margin-right: -10px; } .icon-prev, .icon-next { width: 20px; height: 20px; margin-top: -10px; - margin-left: -10px; + line-height: 1; font-family: serif; } + .icon-prev { &:before { content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) @@ -167,6 +196,7 @@ // Internet Explorer 8-9 does not support clicks on elements without a set // `background-color`. We cannot use `filter` since that's not viewed as a // background color by the browser. Thus, a hack is needed. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer // // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we // set alpha transparency for the best results possible. @@ -213,9 +243,16 @@ width: 30px; height: 30px; margin-top: -15px; - margin-left: -15px; font-size: 30px; } + .glyphicon-chevron-left, + .icon-prev { + margin-left: -15px; + } + .glyphicon-chevron-right, + .icon-next { + margin-right: -15px; + } } // Show and left align the captions diff --git a/src/UI/Content/Bootstrap/close.less b/src/UI/Content/Bootstrap/close.less index 9b4e74f2b..6d5bfe087 100644 --- a/src/UI/Content/Bootstrap/close.less +++ b/src/UI/Content/Bootstrap/close.less @@ -23,6 +23,7 @@ // Additional properties for button version // iOS requires the button element instead of an anchor tag. // If you want the anchor version, it requires `href="#"`. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile button& { padding: 0; cursor: pointer; diff --git a/src/UI/Content/Bootstrap/code.less b/src/UI/Content/Bootstrap/code.less index 3eed26c05..a08b4d48c 100644 --- a/src/UI/Content/Bootstrap/code.less +++ b/src/UI/Content/Bootstrap/code.less @@ -17,7 +17,6 @@ code { font-size: 90%; color: @code-color; background-color: @code-bg; - white-space: nowrap; border-radius: @border-radius-base; } @@ -29,6 +28,13 @@ kbd { background-color: @kbd-bg; border-radius: @border-radius-small; box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + + kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + box-shadow: none; + } } // Blocks of code diff --git a/src/UI/Content/Bootstrap/component-animations.less b/src/UI/Content/Bootstrap/component-animations.less index 1efe45e2c..0bcee910a 100644 --- a/src/UI/Content/Bootstrap/component-animations.less +++ b/src/UI/Content/Bootstrap/component-animations.less @@ -5,7 +5,7 @@ // Heads up! // // We don't use the `.opacity()` mixin here since it causes a bug with text -// fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. +// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. .fade { opacity: 0; @@ -17,13 +17,17 @@ .collapse { display: none; - &.in { - display: block; - } + + &.in { display: block; } + tr&.in { display: table-row; } + tbody&.in { display: table-row-group; } } + .collapsing { position: relative; height: 0; overflow: hidden; - .transition(height .35s ease); + .transition-property(~"height, visibility"); + .transition-duration(.35s); + .transition-timing-function(ease); } diff --git a/src/UI/Content/Bootstrap/dropdowns.less b/src/UI/Content/Bootstrap/dropdowns.less index f165165e7..af344607b 100644 --- a/src/UI/Content/Bootstrap/dropdowns.less +++ b/src/UI/Content/Bootstrap/dropdowns.less @@ -10,12 +10,13 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: @caret-width-base solid; + border-top: @caret-width-base dashed; border-right: @caret-width-base solid transparent; border-left: @caret-width-base solid transparent; } // The dropdown wrapper (div) +.dropup, .dropdown { position: relative; } @@ -38,6 +39,7 @@ margin: 2px 0 0; // override default ul list-style: none; font-size: @font-size-base; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) background-color: @dropdown-bg; border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; @@ -102,16 +104,15 @@ &:focus { color: @dropdown-link-disabled-color; } -} -// Nuke hover/focus effects -.dropdown-menu > .disabled > a { + + // Nuke hover/focus effects &:hover, &:focus { text-decoration: none; background-color: transparent; background-image: none; // Remove CSS gradient .reset-filter(); - cursor: not-allowed; + cursor: @cursor-disabled; } } @@ -154,6 +155,7 @@ font-size: @font-size-small; line-height: @line-height-base; color: @dropdown-header-color; + white-space: nowrap; // as with > li > a } // Backdrop to catch body clicks on mobile, etc. @@ -189,7 +191,7 @@ .dropdown-menu { top: auto; bottom: 100%; - margin-bottom: 1px; + margin-bottom: 2px; } } @@ -210,4 +212,3 @@ } } } - diff --git a/src/UI/Content/Bootstrap/forms.less b/src/UI/Content/Bootstrap/forms.less index f607b8509..e4b50629e 100644 --- a/src/UI/Content/Bootstrap/forms.less +++ b/src/UI/Content/Bootstrap/forms.less @@ -11,7 +11,7 @@ fieldset { padding: 0; margin: 0; border: 0; - // Chrome and Firefox set a `min-width: -webkit-min-content;` on fieldsets, + // Chrome and Firefox set a `min-width: min-content;` on fieldsets, // so we reset that to ensure it behaves more like a standard block element. // See https://github.com/twbs/bootstrap/issues/12359. min-width: 0; @@ -31,6 +31,7 @@ legend { label { display: inline-block; + max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) margin-bottom: 5px; font-weight: bold; } @@ -51,7 +52,7 @@ input[type="search"] { input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - margin-top: 1px \9; /* IE8-9 */ + margin-top: 1px \9; // IE8-9 line-height: normal; } @@ -122,7 +123,7 @@ output { background-color: @input-bg; background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid @input-border; - border-radius: @input-border-radius; + border-radius: @input-border-radius; // Note: This has no effect on s in CSS. .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); @@ -140,9 +141,13 @@ output { &[disabled], &[readonly], fieldset[disabled] & { - cursor: not-allowed; background-color: @input-bg-disabled; - opacity: 1; // iOS fix for unreadable disabled content + opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655 + } + + &[disabled], + fieldset[disabled] & { + cursor: @cursor-disabled; } // Reset height for `textarea`s @@ -164,13 +169,30 @@ input[type="search"] { } -// Special styles for iOS date input +// Special styles for iOS temporal inputs // -// In Mobile Safari, date inputs require a pixel line-height that matches the -// given height of the input. +// In Mobile Safari, setting `display: block` on temporal inputs causes the +// text within the input to become vertically misaligned. As a workaround, we +// set a pixel line-height that matches the given height of the input, but only +// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="month"] { + line-height: @input-height-base; -input[type="date"] { - line-height: @input-height-base; + &.input-sm, + .input-group-sm & { + line-height: @input-height-small; + } + + &.input-lg, + .input-group-lg & { + line-height: @input-height-large; + } + } } @@ -180,7 +202,7 @@ input[type="date"] { // horizontal forms, use the predefined grid classes. .form-group { - margin-bottom: 15px; + margin-bottom: @form-group-margin-bottom; } @@ -190,13 +212,15 @@ input[type="date"] { .radio, .checkbox { + position: relative; display: block; - min-height: @line-height-computed; // clear the floating input if there is no label text margin-top: 10px; margin-bottom: 10px; - padding-left: 20px; + label { - display: inline; + min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text + padding-left: 20px; + margin-bottom: 0; font-weight: normal; cursor: pointer; } @@ -205,9 +229,11 @@ input[type="date"] { .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { - float: left; + position: absolute; margin-left: -20px; + margin-top: 4px \9; } + .radio + .radio, .checkbox + .checkbox { margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing @@ -216,6 +242,7 @@ input[type="date"] { // Radios and checkboxes on same line .radio-inline, .checkbox-inline { + position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; @@ -230,17 +257,54 @@ input[type="date"] { } // Apply same disabled cursor tweak as for inputs +// Some special care is needed because