Skip to content
Snippets Groups Projects
Commit 2248ae66 authored by Chris Hallberg's avatar Chris Hallberg Committed by Demian Katz
Browse files

Upgrade to Bootstrap v3.4.0 (#1300)

parent e4ec9dfd
Branches
Tags
No related merge requests found
Showing
with 170 additions and 154 deletions
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
......@@ -15,8 +15,7 @@
// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headings-color
color: inherit;
color: inherit; // Specified for the h4 to prevent conflicts of changing @headings-color
}
// Provide class for links that match alerts
......@@ -39,7 +38,8 @@
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
// The misspelled .alert-dismissable was deprecated in 3.2.0.
.alert-dismissable,
.alert-dismissible {
padding-right: (@alert-padding + 20);
......
......@@ -10,11 +10,11 @@
padding: 3px 7px;
font-size: @font-size-small;
font-weight: @badge-font-weight;
color: @badge-color;
line-height: @badge-line-height;
vertical-align: middle;
white-space: nowrap;
color: @badge-color;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: @badge-bg;
border-radius: @badge-border-radius;
......
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Bootstrap v3.4.0 (https://getbootstrap.com/)
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
......
......@@ -14,9 +14,9 @@
display: inline-block;
+ li:before {
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: @breadcrumb-color;
content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
}
}
......
// stylelint-disable selector-no-qualifying-type */
//
// Button groups
// --------------------------------------------------
......@@ -103,18 +105,18 @@
// Give the line between buttons some depth
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
padding-left: 12px;
}
// The clickable button for toggling the menu
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
......@@ -205,8 +207,8 @@
border-collapse: separate;
> .btn,
> .btn-group {
float: none;
display: table-cell;
float: none;
width: 1%;
}
> .btn-group .btn {
......@@ -237,7 +239,7 @@
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
}
......
// stylelint-disable selector-no-qualifying-type
//
// Buttons
// --------------------------------------------------
......@@ -11,12 +13,12 @@
margin-bottom: 0; // For input.btn
font-weight: @btn-font-weight;
text-align: center;
white-space: nowrap;
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;
white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
.user-select(none);
......@@ -38,9 +40,9 @@
&:active,
&.active {
outline: 0;
background-image: none;
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
outline: 0;
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
}
&.disabled,
......@@ -92,8 +94,8 @@
// Make a button look and behave like a link
.btn-link {
font-weight: 400;
color: @link-color;
font-weight: normal;
border-radius: 0;
&,
......
// stylelint-disable media-feature-name-no-unknown
//
// Carousel
// --------------------------------------------------
......@@ -10,12 +12,12 @@
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
overflow: hidden;
> .item {
display: none;
position: relative;
display: none;
.transition(.6s ease-in-out left);
// Account for jankitude on images
......@@ -27,8 +29,8 @@
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
.transition-transform(~'0.6s ease-in-out');
.backface-visibility(~'hidden');
.transition-transform(~"0.6s ease-in-out");
.backface-visibility(~"hidden");
.perspective(1000px);
&.next,
......@@ -93,34 +95,34 @@
.carousel-control {
position: absolute;
top: 0;
left: 0;
bottom: 0;
left: 0;
width: @carousel-control-width;
.opacity(@carousel-control-opacity);
font-size: @carousel-control-font-size;
color: @carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
.opacity(@carousel-control-opacity);
// We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
#gradient > .horizontal(@start-color: rgba(0, 0, 0, .5); @end-color: rgba(0, 0, 0, .0001));
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
left: auto;
#gradient > .horizontal(@start-color: rgba(0, 0, 0, .0001); @end-color: rgba(0, 0, 0, .5));
}
// Hover/focus state
&:hover,
&:focus {
outline: 0;
color: @carousel-control-color;
text-decoration: none;
outline: 0;
.opacity(.9);
}
......@@ -131,9 +133,9 @@
.glyphicon-chevron-right {
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 5;
display: inline-block;
margin-top: -10px;
}
.icon-prev,
.glyphicon-chevron-left {
......@@ -147,21 +149,20 @@
}
.icon-prev,
.icon-next {
width: 20px;
width: 20px;
height: 20px;
line-height: 1;
font-family: serif;
line-height: 1;
}
.icon-prev {
&:before {
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
content: "\2039";// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
}
}
.icon-next {
&:before {
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
content: "\203a";// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
}
}
}
......@@ -177,21 +178,18 @@
left: 50%;
z-index: 15;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
margin-left: -30%;
text-align: center;
list-style: none;
li {
display: inline-block;
width: 10px;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
border: 1px solid @carousel-indicator-border-color;
border-radius: 10px;
cursor: pointer;
// IE8-9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
......@@ -202,12 +200,16 @@
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
background-color: rgba(0, 0, 0, 0); // IE9
border: 1px solid @carousel-indicator-border-color;
border-radius: 10px;
}
.active {
margin: 0;
width: 12px;
width: 12px;
height: 12px;
margin: 0;
background-color: @carousel-indicator-active-bg;
}
}
......@@ -217,15 +219,16 @@
// Hidden by default for smaller viewports
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: @carousel-caption-color;
text-align: center;
text-shadow: @carousel-text-shadow;
& .btn {
text-shadow: none; // No shadow for button elements in carousel-caption
}
......@@ -258,8 +261,8 @@
// Show and left align the captions
.carousel-caption {
left: 20%;
right: 20%;
left: 20%;
padding-bottom: 30px;
}
......
// stylelint-disable property-no-vendor-prefix
//
// Close icons
// --------------------------------------------------
......@@ -30,5 +32,6 @@
background: transparent;
border: 0;
-webkit-appearance: none;
appearance: none;
}
}
......@@ -27,12 +27,12 @@ kbd {
color: @kbd-color;
background-color: @kbd-bg;
border-radius: @border-radius-small;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
kbd {
padding: 0;
font-size: 100%;
font-weight: bold;
font-weight: 700;
box-shadow: none;
}
}
......@@ -44,9 +44,9 @@ pre {
margin: 0 0 (@line-height-computed / 2);
font-size: (@font-size-base - 1); // 14px to 13px
line-height: @line-height-base;
color: @pre-color;
word-break: break-all;
word-wrap: break-word;
color: @pre-color;
background-color: @pre-bg;
border: 1px solid @pre-border-color;
border-radius: @border-radius-base;
......
// stylelint-disable selector-no-qualifying-type
//
// Component animations
// --------------------------------------------------
......@@ -10,6 +12,7 @@
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
......
......@@ -10,10 +10,10 @@
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: @caret-width-base dashed;
border-top: @caret-width-base solid ~"\9"; // IE8
border-top: @caret-width-base dashed;
border-top: @caret-width-base solid ~"\9"; // IE8
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
}
// The dropdown wrapper (div)
......@@ -38,15 +38,15 @@
min-width: 160px;
padding: 5px 0;
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)
list-style: none;
background-color: @dropdown-bg;
background-clip: padding-box;
border: 1px solid @dropdown-fallback-border; // IE8 fallback
border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
.box-shadow(0 6px 12px rgba(0, 0, 0, .175));
// Aligns the dropdown menu to right
//
......@@ -66,20 +66,17 @@
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
font-weight: 400;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @dropdown-link-hover-color;
background-color: @dropdown-link-hover-bg;
&:hover,
&:focus {
color: @dropdown-link-hover-color;
text-decoration: none;
background-color: @dropdown-link-hover-bg;
}
}
}
......@@ -90,8 +87,8 @@
&:focus {
color: @dropdown-link-active-color;
text-decoration: none;
outline: 0;
background-color: @dropdown-link-active-bg;
outline: 0;
}
}
......@@ -110,10 +107,10 @@
&:hover,
&:focus {
text-decoration: none;
cursor: @cursor-disabled;
background-color: transparent;
background-image: none; // Remove CSS gradient
.reset-filter();
cursor: @cursor-disabled;
}
}
......@@ -135,8 +132,8 @@
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
......@@ -145,8 +142,8 @@
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
left: 0;
right: auto;
left: 0;
}
// Dropdown section headers
......@@ -162,10 +159,10 @@
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
top: 0;
left: 0;
z-index: (@zindex-dropdown - 10);
}
......@@ -184,10 +181,10 @@
.navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
content: "";
border-top: 0;
border-bottom: @caret-width-base dashed;
border-bottom: @caret-width-base solid ~"\9"; // IE8
content: "";
}
// Different positioning for bottom up menu
.dropdown-menu {
......
// stylelint-disable selector-no-qualifying-type, property-no-vendor-prefix, media-feature-name-no-vendor-prefix
//
// Forms
// --------------------------------------------------
......@@ -8,13 +10,13 @@
// Restyle and baseline non-control form elements.
fieldset {
padding: 0;
margin: 0;
border: 0;
// 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;
padding: 0;
margin: 0;
border: 0;
}
legend {
......@@ -33,7 +35,7 @@ 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;
font-weight: 700;
}
......@@ -43,9 +45,18 @@ label {
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.
// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
// Override content-box in Normalize (* isn't specific enough)
.box-sizing(border-box);
// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
-webkit-appearance: none;
appearance: none;
}
// Position radios and checkboxes better
......@@ -54,6 +65,16 @@ input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9; // IE8-9
line-height: normal;
// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
&[disabled],
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
input[type="file"] {
......@@ -123,7 +144,7 @@ output {
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; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
// Customize the `:focus` state to imitate native WebKit styles.
......@@ -134,8 +155,8 @@ output {
// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
border: 0;
background-color: transparent;
border: 0;
}
// Disabled and read-only inputs
......@@ -162,18 +183,6 @@ output {
}
// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
input[type="search"] {
-webkit-appearance: none;
}
// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
......@@ -226,11 +235,19 @@ input[type="search"] {
margin-top: 10px;
margin-bottom: 10px;
// These are used on elements with <label> descendants
&.disabled,
fieldset[disabled] & {
label {
cursor: @cursor-disabled;
}
}
label {
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;
font-weight: 400;
cursor: pointer;
}
}
......@@ -239,8 +256,8 @@ input[type="search"] {
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-left: -20px;
margin-top: 4px \9;
margin-left: -20px;
}
.radio + .radio,
......@@ -255,45 +272,20 @@ input[type="search"] {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: 400;
vertical-align: middle;
font-weight: normal;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
&[disabled],
// These are used directly on <label>s
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
&.disabled,
fieldset[disabled] & {
cursor: @cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
&.disabled,
fieldset[disabled] & {
label {
cursor: @cursor-disabled;
}
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px; // space out consecutive inline controls
}
......@@ -303,17 +295,17 @@ input[type="checkbox"] {
// a horizontal form layout.
.form-control-static {
min-height: (@line-height-computed + @font-size-base);
// Size it appropriately next to real form controls
padding-top: (@padding-base-vertical + 1);
padding-bottom: (@padding-base-vertical + 1);
// Remove default margin from `p`
margin-bottom: 0;
min-height: (@line-height-computed + @font-size-base);
&.input-lg,
&.input-sm {
padding-left: 0;
padding-right: 0;
padding-left: 0;
}
}
......@@ -556,9 +548,9 @@ input[type="checkbox"] {
.checkbox,
.radio-inline,
.checkbox-inline {
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
margin-top: 0;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
}
// Account for padding we're adding to ensure the alignment and of help text
// and other content below items
......@@ -576,9 +568,9 @@ input[type="checkbox"] {
// labels on narrow viewports stack the same as a default form example.
@media (min-width: @screen-sm-min) {
.control-label {
text-align: right;
margin-bottom: 0;
padding-top: (@padding-base-vertical + 1); // Default padding plus a border
margin-bottom: 0;
text-align: right;
}
}
......
// stylelint-disable value-list-comma-newline-after, value-list-comma-space-after, indentation, declaration-colon-newline-after, font-family-no-missing-generic-family-keyword
//
// Glyphicons for Bootstrap
//
......@@ -9,13 +11,13 @@
// Import the fonts
@font-face {
font-family: 'Glyphicons Halflings';
src: url('@{icon-font-path}@{icon-font-name}.eot');
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
font-family: "Glyphicons Halflings";
src: url("@{icon-font-path}@{icon-font-name}.eot");
src: url("@{icon-font-path}@{icon-font-name}.eot?#iefix") format("embedded-opentype"),
url("@{icon-font-path}@{icon-font-name}.woff2") format("woff2"),
url("@{icon-font-path}@{icon-font-name}.woff") format("woff"),
url("@{icon-font-path}@{icon-font-name}.ttf") format("truetype"),
url("@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}") format("svg");
}
// Catchall baseclass
......@@ -23,9 +25,9 @@
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
......
......@@ -40,6 +40,16 @@
.make-row();
}
.row-no-gutters {
margin-right: 0;
margin-left: 0;
[class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
// Columns
//
......
// stylelint-disable selector-no-qualifying-type
//
// Input groups
// --------------------------------------------------
......@@ -12,8 +14,8 @@
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
padding-left: 0;
}
.form-control {
......@@ -77,7 +79,7 @@
.input-group-addon {
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
font-weight: 400;
line-height: 1;
color: @input-color;
text-align: center;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment