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