updating bootstrap in ACP to v3.3.1

v1.18.x
Julian Lam 10 years ago
parent fc7a882877
commit 2d4383c7b0

@ -261,3 +261,9 @@
display: none; /* not sure why I have to do this, but it only seems to show up on prod */ display: none; /* not sure why I have to do this, but it only seems to show up on prod */
} }
} }
// Allowing text to the right of an image-type brand
// See: https://github.com/twbs/bootstrap/commit/8e2348e9eda51296eb680192379ab37f10355ca3
.navbar-brand > img {
display: inline-block;
}

@ -1,16 +1,21 @@
{ {
"always-semicolon": true, "always-semicolon": true,
"block-indent": 2, "block-indent": 2,
"colon-space": [0, 1],
"color-case": "lower", "color-case": "lower",
"color-shorthand": true, "color-shorthand": true,
"combinator-space": true,
"element-case": "lower", "element-case": "lower",
"eof-newline": true, "eof-newline": true,
"leading-zero": false, "leading-zero": false,
"remove-empty-rulesets": true, "remove-empty-rulesets": true,
"rule-indent": 2, "space-after-colon": 1,
"stick-brace": " ", "space-after-combinator": 1,
"space-before-selector-delimiter": 0,
"space-between-declarations": "\n",
"space-after-opening-brace": "\n",
"space-before-closing-brace": "\n",
"space-before-colon": 0,
"space-before-combinator": 1,
"space-before-opening-brace": 1,
"strip-spaces": true, "strip-spaces": true,
"unitless-zero": true, "unitless-zero": true,
"vendor-prefix-align": true, "vendor-prefix-align": true,
@ -109,6 +114,8 @@
"list-style-type", "list-style-type",
"list-style-image", "list-style-image",
"pointer-events", "pointer-events",
"-ms-touch-action",
"touch-action",
"cursor", "cursor",
"visibility", "visibility",
"zoom", "zoom",

@ -44,11 +44,17 @@
} }
// Account for badges in navs // Account for badges in navs
a.list-group-item.active > &, .list-group-item.active > &,
.nav-pills > .active > a > & { .nav-pills > .active > a > & {
color: @badge-active-color; color: @badge-active-color;
background-color: @badge-active-bg; background-color: @badge-active-bg;
} }
.list-group-item > & {
float: right;
}
.list-group-item > & + & {
margin-right: 5px;
}
.nav-pills > li > a > & { .nav-pills > li > a > & {
margin-left: 3px; margin-left: 3px;
} }

@ -18,10 +18,6 @@
&.active { &.active {
z-index: 2; z-index: 2;
} }
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: 0;
}
} }
} }
@ -198,7 +194,6 @@
} }
// Justified button groups // Justified button groups
// ---------------------- // ----------------------
@ -226,15 +221,23 @@
// Checkbox and radio options // Checkbox and radio options
// //
// In order to support the browser's form validation feedback, powered by the // In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `opacity`. We cannot // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// use `display: none;` or `visibility: hidden;` as that also hides the popover. // `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. // This way, we ensure a DOM element is visible to position the popover from.
// //
// See https://github.com/twbs/bootstrap/pull/12794 for more. // See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
[data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] {
[data-toggle="buttons"] > .btn > input[type="checkbox"] { > .btn,
> .btn-group > .btn {
input[type="radio"],
input[type="checkbox"] {
position: absolute; position: absolute;
z-index: -1; clip: rect(0,0,0,0);
.opacity(0); pointer-events: none;
}
}
} }

@ -12,6 +12,7 @@
font-weight: @btn-font-weight; font-weight: @btn-font-weight;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
touch-action: manipulation;
cursor: pointer; cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent; border: 1px solid transparent;
@ -22,13 +23,15 @@
&, &,
&:active, &:active,
&.active { &.active {
&:focus { &:focus,
&.focus {
.tab-focus(); .tab-focus();
} }
} }
&:hover, &:hover,
&:focus { &:focus,
&.focus {
color: @btn-default-color; color: @btn-default-color;
text-decoration: none; text-decoration: none;
} }
@ -43,7 +46,7 @@
&.disabled, &.disabled,
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: @cursor-disabled;
pointer-events: none; // Future-proof disabling of clicks pointer-events: none; // Future-proof disabling of clicks
.opacity(.65); .opacity(.65);
.box-shadow(none); .box-shadow(none);
@ -85,11 +88,11 @@
.btn-link { .btn-link {
color: @link-color; color: @link-color;
font-weight: normal; font-weight: normal;
cursor: pointer;
border-radius: 0; border-radius: 0;
&, &,
&:active, &:active,
&.active,
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: transparent; background-color: transparent;

@ -24,6 +24,30 @@
&:extend(.img-responsive); &:extend(.img-responsive);
line-height: 1; line-height: 1;
} }
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
transition: transform .6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
&.next,
&.active.right {
transform: translate3d(100%, 0, 0);
left: 0;
}
&.prev,
&.active.left {
transform: translate3d(-100%, 0, 0);
left: 0;
}
&.next.left,
&.prev.right,
&.active {
transform: translate3d(0, 0, 0);
left: 0;
}
}
} }
> .active, > .active,

@ -32,6 +32,7 @@ kbd {
kbd { kbd {
padding: 0; padding: 0;
font-size: 100%; font-size: 100%;
font-weight: bold;
box-shadow: none; box-shadow: none;
} }
} }

@ -17,8 +17,9 @@
.collapse { .collapse {
display: none; display: none;
visibility: hidden;
&.in { display: block; } &.in { display: block; visibility: visible; }
tr&.in { display: table-row; } tr&.in { display: table-row; }
tbody&.in { display: table-row-group; } tbody&.in { display: table-row-group; }
} }
@ -27,5 +28,7 @@
position: relative; position: relative;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
.transition(height .35s ease); .transition-property(~"height, visibility");
.transition-duration(.35s);
.transition-timing-function(ease);
} }

@ -103,16 +103,15 @@
&:focus { &:focus {
color: @dropdown-link-disabled-color; color: @dropdown-link-disabled-color;
} }
}
// Nuke hover/focus effects // Nuke hover/focus effects
.dropdown-menu > .disabled > a {
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
background-image: none; // Remove CSS gradient background-image: none; // Remove CSS gradient
.reset-filter(); .reset-filter();
cursor: not-allowed; cursor: @cursor-disabled;
} }
} }
@ -212,4 +211,3 @@
} }
} }
} }

@ -141,7 +141,7 @@ output {
&[disabled], &[disabled],
&[readonly], &[readonly],
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: @cursor-disabled;
background-color: @input-bg-disabled; background-color: @input-bg-disabled;
opacity: 1; // iOS fix for unreadable disabled content opacity: 1; // iOS fix for unreadable disabled content
} }
@ -168,23 +168,27 @@ input[type="search"] {
// Special styles for iOS temporal inputs // Special styles for iOS temporal inputs
// //
// In Mobile Safari, setting `display: block` on temporal inputs causes the // In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. // text within the input to become vertically misaligned. As a workaround, we
// As a workaround, we set a pixel line-height that matches the // set a pixel line-height that matches the given height of the input, but only
// given height of the input. Since this fucks up everything else, we have to // for Safari.
// appropriately reset it for Internet Explorer and the size variations.
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"], input[type="date"],
input[type="time"], input[type="time"],
input[type="datetime-local"], input[type="datetime-local"],
input[type="month"] { input[type="month"] {
line-height: @input-height-base; line-height: @input-height-base;
// IE8+ misaligns the text within date inputs, so we reset }
line-height: @line-height-base ~"\0"; input[type="date"].input-sm,
input[type="time"].input-sm,
&.input-sm { input[type="datetime-local"].input-sm,
input[type="month"].input-sm {
line-height: @input-height-small; line-height: @input-height-small;
} }
&.input-lg { input[type="date"].input-lg,
input[type="time"].input-lg,
input[type="datetime-local"].input-lg,
input[type="month"].input-lg {
line-height: @input-height-large; line-height: @input-height-large;
} }
} }
@ -208,11 +212,11 @@ input[type="month"] {
.checkbox { .checkbox {
position: relative; position: relative;
display: block; display: block;
min-height: @line-height-computed; // clear the floating input if there is no label text
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
label { label {
min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
padding-left: 20px; padding-left: 20px;
margin-bottom: 0; margin-bottom: 0;
font-weight: normal; font-weight: normal;
@ -258,7 +262,7 @@ input[type="checkbox"] {
&[disabled], &[disabled],
&.disabled, &.disabled,
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: @cursor-disabled;
} }
} }
// These classes are used directly on <label>s // These classes are used directly on <label>s
@ -266,7 +270,7 @@ input[type="checkbox"] {
.checkbox-inline { .checkbox-inline {
&.disabled, &.disabled,
fieldset[disabled] & { fieldset[disabled] & {
cursor: not-allowed; cursor: @cursor-disabled;
} }
} }
// These classes are used on elements with <label> descendants // These classes are used on elements with <label> descendants
@ -275,7 +279,7 @@ input[type="checkbox"] {
&.disabled, &.disabled,
fieldset[disabled] & { fieldset[disabled] & {
label { label {
cursor: not-allowed; cursor: @cursor-disabled;
} }
} }
} }
@ -306,12 +310,14 @@ input[type="checkbox"] {
// Build on `.form-control` with modifier classes to decrease or increase the // Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls. // height and font-size of form controls.
.input-sm { .input-sm,
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); .form-group-sm .form-control {
.input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
} }
.input-lg { .input-lg,
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); .form-group-lg .form-control {
.input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
} }
@ -331,7 +337,7 @@ input[type="checkbox"] {
// Feedback icon (requires .glyphicon classes) // Feedback icon (requires .glyphicon classes)
.form-control-feedback { .form-control-feedback {
position: absolute; position: absolute;
top: (@line-height-computed + 5); // Height of the `label` and its margin top: 0;
right: 0; right: 0;
z-index: 2; // Ensure icon is above input groups z-index: 2; // Ensure icon is above input groups
display: block; display: block;
@ -339,6 +345,7 @@ input[type="checkbox"] {
height: @input-height-base; height: @input-height-base;
line-height: @input-height-base; line-height: @input-height-base;
text-align: center; text-align: center;
pointer-events: none;
} }
.input-lg + .form-control-feedback { .input-lg + .form-control-feedback {
width: @input-height-large; width: @input-height-large;
@ -362,10 +369,15 @@ input[type="checkbox"] {
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
} }
// Reposition feedback icon if input has visible label above
.has-feedback label {
// Reposition feedback icon if label is hidden with "screenreader only" state & ~ .form-control-feedback {
.has-feedback label.sr-only ~ .form-control-feedback { top: (@line-height-computed + 5); // Height of the `label` and its margin
}
&.sr-only ~ .form-control-feedback {
top: 0; top: 0;
}
} }
@ -382,7 +394,6 @@ input[type="checkbox"] {
} }
// Inline forms // Inline forms
// //
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
@ -412,6 +423,11 @@ input[type="checkbox"] {
vertical-align: middle; vertical-align: middle;
} }
// Make static controls behave like regular ones
.form-control-static {
display: inline-block;
}
.input-group { .input-group {
display: inline-table; display: inline-table;
vertical-align: middle; vertical-align: middle;
@ -453,10 +469,7 @@ input[type="checkbox"] {
margin-left: 0; margin-left: 0;
} }
// Validation states // Re-override the feedback icon.
//
// Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback { .has-feedback .form-control-feedback {
top: 0; top: 0;
} }
@ -509,7 +522,6 @@ input[type="checkbox"] {
// Reposition the icon because it's now within a grid column and columns have // Reposition the icon because it's now within a grid column and columns have
// `position: relative;` on them. Also accounts for the grid gutter padding. // `position: relative;` on them. Also accounts for the grid gutter padding.
.has-feedback .form-control-feedback { .has-feedback .form-control-feedback {
top: 0;
right: (@grid-gutter-width / 2); right: (@grid-gutter-width / 2);
} }
@ -523,9 +535,6 @@ input[type="checkbox"] {
padding-top: ((@padding-large-vertical * @line-height-large) + 1); padding-top: ((@padding-large-vertical * @line-height-large) + 1);
} }
} }
.form-control {
&:extend(.input-lg);
}
} }
.form-group-sm { .form-group-sm {
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
@ -533,8 +542,5 @@ input[type="checkbox"] {
padding-top: (@padding-small-vertical + 1); padding-top: (@padding-small-vertical + 1);
} }
} }
.form-control {
&:extend(.input-sm);
}
} }
} }

@ -33,7 +33,8 @@
// Individual icons // Individual icons
.glyphicon-asterisk { &:before { content: "\2a"; } } .glyphicon-asterisk { &:before { content: "\2a"; } }
.glyphicon-plus { &:before { content: "\2b"; } } .glyphicon-plus { &:before { content: "\2b"; } }
.glyphicon-euro { &:before { content: "\20ac"; } } .glyphicon-euro,
.glyphicon-eur { &:before { content: "\20ac"; } }
.glyphicon-minus { &:before { content: "\2212"; } } .glyphicon-minus { &:before { content: "\2212"; } }
.glyphicon-cloud { &:before { content: "\2601"; } } .glyphicon-cloud { &:before { content: "\2601"; } }
.glyphicon-envelope { &:before { content: "\2709"; } } .glyphicon-envelope { &:before { content: "\2709"; } }

@ -4,7 +4,7 @@
.jumbotron { .jumbotron {
padding: @jumbotron-padding; padding: @jumbotron-padding (@jumbotron-padding / 2);
margin-bottom: @jumbotron-padding; margin-bottom: @jumbotron-padding;
color: @jumbotron-color; color: @jumbotron-color;
background-color: @jumbotron-bg; background-color: @jumbotron-bg;
@ -23,7 +23,8 @@
border-top-color: darken(@jumbotron-bg, 10%); border-top-color: darken(@jumbotron-bg, 10%);
} }
.container & { .container &,
.container-fluid & {
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
} }
@ -32,10 +33,10 @@
} }
@media screen and (min-width: @screen-sm-min) { @media screen and (min-width: @screen-sm-min) {
padding-top: (@jumbotron-padding * 1.6); padding: (@jumbotron-padding * 1.6) 0;
padding-bottom: (@jumbotron-padding * 1.6);
.container & { .container &,
.container-fluid & {
padding-left: (@jumbotron-padding * 2); padding-left: (@jumbotron-padding * 2);
padding-right: (@jumbotron-padding * 2); padding-right: (@jumbotron-padding * 2);
} }

@ -35,14 +35,6 @@
margin-bottom: 0; margin-bottom: 0;
.border-bottom-radius(@list-group-border-radius); .border-bottom-radius(@list-group-border-radius);
} }
// Align badges within list items
> .badge {
float: right;
}
> .badge + .badge {
margin-right: 5px;
}
} }
@ -74,6 +66,7 @@ a.list-group-item {
&.disabled:focus { &.disabled:focus {
background-color: @list-group-disabled-bg; background-color: @list-group-disabled-bg;
color: @list-group-disabled-color; color: @list-group-disabled-color;
cursor: @cursor-disabled;
// Force color to inherit for custom content // Force color to inherit for custom content
.list-group-item-heading { .list-group-item-heading {

@ -1,54 +1,45 @@
// Media objects .media {
// Source: http://stubbornella.org/content/?p=497 // Proper spacing between instances of .media
// -------------------------------------------------- margin-top: 15px;
&:first-child {
margin-top: 0;
}
}
// Common styles .media-right,
// ------------------------- .media > .pull-right {
padding-left: 10px;
}
// Clear the floats .media-left,
.media, .media > .pull-left {
.media-body { padding-right: 10px;
overflow: hidden;
zoom: 1;
} }
// Proper spacing between instances of .media .media-left,
.media, .media-right,
.media .media { .media-body {
margin-top: 15px; display: table-cell;
vertical-align: top;
} }
.media:first-child {
margin-top: 0; .media-middle {
vertical-align: middle;
} }
// For images and videos, set to block .media-bottom {
.media-object { vertical-align: bottom;
display: block;
} }
// Reset margins on headings for tighter default spacing // Reset margins on headings for tighter default spacing
.media-heading { .media-heading {
margin: 0 0 5px; margin-top: 0;
} margin-bottom: 5px;
// Media image alignment
// -------------------------
.media {
> .pull-left {
margin-right: 10px;
}
> .pull-right {
margin-left: 10px;
}
} }
// Media list variation // Media list variation
// ------------------------- //
// Undo default ul/ol styles // Undo default ul/ol styles
.media-list { .media-list {
padding-left: 0; padding-left: 0;

@ -10,6 +10,7 @@
&:hover, &:hover,
&:focus, &:focus,
&.focus,
&:active, &:active,
&.active, &.active,
.open > .dropdown-toggle& { .open > .dropdown-toggle& {
@ -28,6 +29,7 @@
&, &,
&:hover, &:hover,
&:focus, &:focus,
&.focus,
&:active, &:active,
&.active { &.active {
background-color: @background; background-color: @background;

@ -10,7 +10,11 @@
.radio, .radio,
.checkbox, .checkbox,
.radio-inline, .radio-inline,
.checkbox-inline { .checkbox-inline,
&.radio label,
&.checkbox label,
&.radio-inline label,
&.checkbox-inline label {
color: @text-color; color: @text-color;
} }
// Set the border and box shadow on specific inputs to match // Set the border and box shadow on specific inputs to match

@ -5,7 +5,7 @@
.make-grid-columns() { .make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12 // Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial .col(@index) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item); .col((@index + 1), @item);
} }
@ -27,7 +27,7 @@
} }
.float-grid-columns(@class) { .float-grid-columns(@class) {
.col(@index) when (@index = 1) { // initial .col(@index) { // initial
@item: ~".col-@{class}-@{index}"; @item: ~".col-@{class}-@{index}";
.col((@index + 1), @item); .col((@index + 1), @item);
} }

@ -8,7 +8,6 @@
// Keep images from scaling beyond the width of their parents. // Keep images from scaling beyond the width of their parents.
.img-responsive(@display: block) { .img-responsive(@display: block) {
display: @display; display: @display;
width: 100% \9; // Force IE10 and below to size SVG images correctly
max-width: 100%; // Part 1: Set a maximum relative to the parent max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
} }

@ -99,8 +99,11 @@
// Placeholder text // Placeholder text
.placeholder(@color: @input-color-placeholder) { .placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; // Firefox // Firefox
opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 &::-moz-placeholder {
color: @color;
opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
}
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome &::-webkit-input-placeholder { color: @color; } // Safari and Chrome
} }

@ -30,10 +30,10 @@
// When fading in the modal, animate it to slide down // When fading in the modal, animate it to slide down
&.fade .modal-dialog { &.fade .modal-dialog {
.translate3d(0, -25%, 0); .translate(0, -25%);
.transition-transform(~"0.3s ease-out"); .transition-transform(~"0.3s ease-out");
} }
&.in .modal-dialog { .translate3d(0, 0, 0) } &.in .modal-dialog { .translate(0, 0) }
} }
.modal-open .modal { .modal-open .modal {
overflow-x: hidden; overflow-x: hidden;
@ -62,12 +62,10 @@
// Modal background // Modal background
.modal-backdrop { .modal-backdrop {
position: fixed; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0;
left: 0; left: 0;
z-index: @zindex-modal-background;
background-color: @modal-backdrop-bg; background-color: @modal-backdrop-bg;
// Fade for backdrop // Fade for backdrop
&.fade { .opacity(0); } &.fade { .opacity(0); }

@ -67,6 +67,7 @@
&.collapse { &.collapse {
display: block !important; display: block !important;
visibility: visible !important;
height: auto !important; height: auto !important;
padding-bottom: 0; // Override default setting padding-bottom: 0; // Override default setting
overflow: visible !important; overflow: visible !important;
@ -92,7 +93,7 @@
.navbar-collapse { .navbar-collapse {
max-height: @navbar-collapse-max-height; max-height: @navbar-collapse-max-height;
@media (max-width: @screen-xs-min) and (orientation: landscape) { @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
max-height: 200px; max-height: 200px;
} }
} }
@ -141,7 +142,6 @@
right: 0; right: 0;
left: 0; left: 0;
z-index: @zindex-navbar-fixed; z-index: @zindex-navbar-fixed;
.translate3d(0, 0, 0);
// Undo the rounded corners // Undo the rounded corners
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
@ -173,6 +173,10 @@
text-decoration: none; text-decoration: none;
} }
> img {
display: block;
}
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
.navbar > .container &, .navbar > .container &,
.navbar > .container-fluid & { .navbar > .container-fluid & {
@ -271,26 +275,10 @@
padding-bottom: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical;
} }
} }
&.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
} }
} }
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) {
.navbar-left { .pull-left(); }
.navbar-right { .pull-right(); }
}
// Navbar form // Navbar form
// //
// Extension of the `.form-inline` with some extra flavor for optimum display in // Extension of the `.form-inline` with some extra flavor for optimum display in
@ -311,6 +299,10 @@
.form-group { .form-group {
@media (max-width: @grid-float-breakpoint-max) { @media (max-width: @grid-float-breakpoint-max) {
margin-bottom: 5px; margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
} }
} }
@ -326,11 +318,6 @@
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
.box-shadow(none); .box-shadow(none);
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
} }
} }
@ -344,6 +331,7 @@
} }
// Menu position and menu caret support for dropups via extra dropup class // Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-top-radius(@navbar-border-radius);
.border-bottom-radius(0); .border-bottom-radius(0);
} }
@ -375,14 +363,31 @@
float: left; float: left;
margin-left: @navbar-padding-horizontal; margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal; margin-right: @navbar-padding-horizontal;
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
//
// Declared after the navbar components to ensure more specificity on the margins.
// Outdent the form if last child to line up with content down the page @media (min-width: @grid-float-breakpoint) {
&.navbar-right:last-child { .navbar-left { .pull-left(); }
.navbar-right {
.pull-right();
margin-right: -@navbar-padding-horizontal;
~ .navbar-right {
margin-right: 0; margin-right: 0;
} }
} }
} }
// Alternate navbars // Alternate navbars
// -------------------------------------------------- // --------------------------------------------------

@ -36,7 +36,7 @@
color: @nav-disabled-link-hover-color; color: @nav-disabled-link-hover-color;
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
cursor: not-allowed; cursor: @cursor-disabled;
} }
} }
} }
@ -223,9 +223,11 @@
.tab-content { .tab-content {
> .tab-pane { > .tab-pane {
display: none; display: none;
visibility: hidden;
} }
> .active { > .active {
display: block; display: block;
visibility: visible;
} }
} }

@ -1,4 +1,4 @@
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
// //
// 1. Set default font family to sans-serif. // 1. Set default font family to sans-serif.
@ -25,7 +25,8 @@ body {
// //
// Correct `block` display not defined for any HTML5 element in IE 8/9. // Correct `block` display not defined for any HTML5 element in IE 8/9.
// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. // Correct `block` display not defined for `details` or `summary` in IE 10/11
// and Firefox.
// Correct `block` display not defined for `main` in IE 11. // Correct `block` display not defined for `main` in IE 11.
// //
@ -38,6 +39,7 @@ footer,
header, header,
hgroup, hgroup,
main, main,
menu,
nav, nav,
section, section,
summary { summary {
@ -85,7 +87,7 @@ template {
// //
a { a {
background: transparent; background-color: transparent;
} }
// //

@ -48,8 +48,7 @@
> span { > span {
color: @pager-disabled-color; color: @pager-disabled-color;
background-color: @pager-bg; background-color: @pager-bg;
cursor: not-allowed; cursor: @cursor-disabled;
} }
} }
} }

@ -69,7 +69,7 @@
color: @pagination-disabled-color; color: @pagination-disabled-color;
background-color: @pagination-disabled-bg; background-color: @pagination-disabled-bg;
border-color: @pagination-disabled-border; border-color: @pagination-disabled-border;
cursor: not-allowed; cursor: @cursor-disabled;
} }
} }
} }

@ -56,7 +56,8 @@
// any kind of custom content between the two. // any kind of custom content between the two.
.panel { .panel {
> .list-group { > .list-group,
> .panel-collapse > .list-group {
margin-bottom: 0; margin-bottom: 0;
.list-group-item { .list-group-item {
@ -100,6 +101,11 @@
> .table-responsive > .table, > .table-responsive > .table,
> .panel-collapse > .table { > .panel-collapse > .table {
margin-bottom: 0; margin-bottom: 0;
caption {
padding-left: @panel-body-padding;
padding-right: @panel-body-padding;
}
} }
// Add border top radius for first one // Add border top radius for first one
> .table:first-child, > .table:first-child,
@ -109,6 +115,9 @@
> thead:first-child, > thead:first-child,
> tbody:first-child { > tbody:first-child {
> tr:first-child { > tr:first-child {
border-top-left-radius: (@panel-border-radius - 1);
border-top-right-radius: (@panel-border-radius - 1);
td:first-child, td:first-child,
th:first-child { th:first-child {
border-top-left-radius: (@panel-border-radius - 1); border-top-left-radius: (@panel-border-radius - 1);
@ -128,6 +137,9 @@
> tbody:last-child, > tbody:last-child,
> tfoot:last-child { > tfoot:last-child {
> tr:last-child { > tr:last-child {
border-bottom-left-radius: (@panel-border-radius - 1);
border-bottom-right-radius: (@panel-border-radius - 1);
td:first-child, td:first-child,
th:first-child { th:first-child {
border-bottom-left-radius: (@panel-border-radius - 1); border-bottom-left-radius: (@panel-border-radius - 1);
@ -140,7 +152,9 @@
} }
} }
> .panel-body + .table, > .panel-body + .table,
> .panel-body + .table-responsive { > .panel-body + .table-responsive,
> .table + .panel-body,
> .table-responsive + .panel-body {
border-top: 1px solid @table-border-color; border-top: 1px solid @table-border-color;
} }
> .table > tbody:first-child > tr:first-child th, > .table > tbody:first-child > tr:first-child th,
@ -202,6 +216,7 @@
.panel { .panel {
margin-bottom: 0; margin-bottom: 0;
border-radius: @panel-border-radius; border-radius: @panel-border-radius;
+ .panel { + .panel {
margin-top: 5px; margin-top: 5px;
} }
@ -209,10 +224,13 @@
.panel-heading { .panel-heading {
border-bottom: 0; border-bottom: 0;
+ .panel-collapse > .panel-body {
+ .panel-collapse > .panel-body,
+ .panel-collapse > .list-group {
border-top: 1px solid @panel-inner-border; border-top: 1px solid @panel-inner-border;
} }
} }
.panel-footer { .panel-footer {
border-top: 0; border-top: 0;
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {

@ -11,7 +11,12 @@
display: none; display: none;
max-width: @popover-max-width; max-width: @popover-max-width;
padding: 1px; padding: 1px;
text-align: left; // Reset given new insertion method // Reset font and text propertes given new insertion method
font-family: @font-family-base;
font-size: @font-size-base;
font-weight: normal;
line-height: @line-height-base;
text-align: left;
background-color: @popover-bg; background-color: @popover-bg;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid @popover-fallback-border-color; border: 1px solid @popover-fallback-border-color;
@ -33,8 +38,6 @@
margin: 0; // reset heading margin margin: 0; // reset heading margin
padding: 8px 14px; padding: 8px 14px;
font-size: @font-size-base; font-size: @font-size-base;
font-weight: normal;
line-height: 18px;
background-color: @popover-title-bg; background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%); border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0; border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
@ -129,5 +132,4 @@
bottom: -@popover-arrow-width; bottom: -@popover-arrow-width;
} }
} }
} }

@ -1,15 +1,18 @@
// /*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
// Basic print styles
// --------------------------------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print { // ==========================================================================
// Print styles.
// Inlined to avoid the additional HTTP request: h5bp.com/r
// ==========================================================================
* { @media print {
text-shadow: none !important; *,
color: #000 !important; // Black prints faster: h5bp.com/s *:before,
*:after {
background: transparent !important; background: transparent !important;
color: #000 !important; // Black prints faster: h5bp.com/s
box-shadow: none !important; box-shadow: none !important;
text-shadow: none !important;
} }
a, a,
@ -25,9 +28,10 @@
content: " (" attr(title) ")"; content: " (" attr(title) ")";
} }
// Don't show links for images, or javascript/internal links // Don't show links that are fragment identifiers,
a[href^="javascript:"]:after, // or use the `javascript:` pseudo protocol
a[href^="#"]:after { a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""; content: "";
} }
@ -62,6 +66,8 @@
page-break-after: avoid; page-break-after: avoid;
} }
// Bootstrap specific changes start
//
// Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245 // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
// Once fixed, we can just straight up remove this. // Once fixed, we can just straight up remove this.
select { select {
@ -72,12 +78,6 @@
.navbar { .navbar {
display: none; display: none;
} }
.table {
td,
th {
background-color: #fff !important;
}
}
.btn, .btn,
.dropup > .btn { .dropup > .btn {
> .caret { > .caret {
@ -90,6 +90,11 @@
.table { .table {
border-collapse: collapse !important; border-collapse: collapse !important;
td,
th {
background-color: #fff !important;
}
} }
.table-bordered { .table-bordered {
th, th,
@ -98,4 +103,5 @@
} }
} }
// Bootstrap specific changes end
} }

@ -19,7 +19,6 @@
} }
// Bar itself // Bar itself
// ------------------------- // -------------------------
@ -29,7 +28,7 @@
height: @line-height-computed; height: @line-height-computed;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
background-color: @progress-bg; background-color: @progress-bg;
border-radius: @border-radius-base; border-radius: @progress-border-radius;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
} }
@ -67,23 +66,6 @@
.animation(progress-bar-stripes 2s linear infinite); .animation(progress-bar-stripes 2s linear infinite);
} }
// Account for lower percentages
.progress-bar {
&[aria-valuenow="1"],
&[aria-valuenow="2"] {
min-width: 30px;
}
&[aria-valuenow="0"] {
color: @gray-light;
min-width: 30px;
background-color: transparent;
background-image: none;
box-shadow: none;
}
}
// Variations // Variations
// ------------------------- // -------------------------

@ -12,7 +12,8 @@
.embed-responsive-item, .embed-responsive-item,
iframe, iframe,
embed, embed,
object { object,
video {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;

@ -52,7 +52,7 @@ a {
&:hover, &:hover,
&:focus { &:focus {
color: @link-hover-color; color: @link-hover-color;
text-decoration: underline; text-decoration: @link-hover-decoration;
} }
&:focus { &:focus {

@ -6,6 +6,12 @@
table { table {
background-color: @table-bg; background-color: @table-bg;
} }
caption {
padding-top: @table-cell-padding;
padding-bottom: @table-cell-padding;
color: @text-muted;
text-align: left;
}
th { th {
text-align: left; text-align: left;
} }
@ -106,11 +112,8 @@ th {
.table-striped { .table-striped {
> tbody > tr:nth-child(odd) { > tbody > tr:nth-child(odd) {
> td,
> th {
background-color: @table-bg-accent; background-color: @table-bg-accent;
} }
}
} }
@ -120,11 +123,8 @@ th {
.table-hover { .table-hover {
> tbody > tr:hover { > tbody > tr:hover {
> td,
> th {
background-color: @table-bg-hover; background-color: @table-bg-hover;
} }
}
} }
@ -169,14 +169,15 @@ table {
// will display normally. // will display normally.
.table-responsive { .table-responsive {
overflow-x: auto;
min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media screen and (max-width: @screen-xs-max) { @media screen and (max-width: @screen-xs-max) {
width: 100%; width: 100%;
margin-bottom: (@line-height-computed * 0.75); margin-bottom: (@line-height-computed * 0.75);
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color; border: 1px solid @table-border-color;
-webkit-overflow-scrolling: touch;
// Tighten up spacing // Tighten up spacing
> .table { > .table {

@ -7,7 +7,6 @@
@import "mixins.less"; @import "mixins.less";
// //
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
@ -28,6 +27,10 @@
&.active { &.active {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
} }
.badge {
text-shadow: none;
}
} }
// Mixin for generating new styles // Mixin for generating new styles
@ -74,7 +77,6 @@
.btn-danger { .btn-styles(@btn-danger-bg); } .btn-danger { .btn-styles(@btn-danger-bg); }
// //
// Images // Images
// -------------------------------------------------- // --------------------------------------------------
@ -85,7 +87,6 @@
} }
// //
// Dropdowns // Dropdowns
// -------------------------------------------------- // --------------------------------------------------
@ -103,7 +104,6 @@
} }
// //
// Navbar // Navbar
// -------------------------------------------------- // --------------------------------------------------
@ -116,8 +116,9 @@
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow); .box-shadow(@shadow);
.navbar-nav > .open > a,
.navbar-nav > .active > a { .navbar-nav > .active > a {
#gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%)); #gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
} }
} }
@ -131,8 +132,9 @@
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg); #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
.navbar-nav > .open > a,
.navbar-nav > .active > a { .navbar-nav > .active > a {
#gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%)); #gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
} }
@ -149,6 +151,17 @@
border-radius: 0; border-radius: 0;
} }
// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
.navbar .navbar-nav .open .dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: #fff;
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
}
}
}
// //
@ -175,7 +188,6 @@
.alert-danger { .alert-styles(@alert-danger-bg); } .alert-danger { .alert-styles(@alert-danger-bg); }
// //
// Progress bars // Progress bars
// -------------------------------------------------- // --------------------------------------------------
@ -218,8 +230,11 @@
text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%); text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
#gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%)); #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
border-color: darken(@list-group-active-border, 7.5%); border-color: darken(@list-group-active-border, 7.5%);
}
.badge {
text-shadow: none;
}
}
// //
@ -245,7 +260,6 @@
.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); } .panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
// //
// Wells // Wells
// -------------------------------------------------- // --------------------------------------------------

@ -12,7 +12,7 @@
background-color: @thumbnail-bg; background-color: @thumbnail-bg;
border: 1px solid @thumbnail-border; border: 1px solid @thumbnail-border;
border-radius: @thumbnail-border-radius; border-radius: @thumbnail-border-radius;
.transition(all .2s ease-in-out); .transition(border .2s ease-in-out);
> img, > img,
a > img { a > img {

@ -9,7 +9,10 @@
z-index: @zindex-tooltip; z-index: @zindex-tooltip;
display: block; display: block;
visibility: visible; visibility: visible;
// Reset font and text propertes given new insertion method
font-family: @font-family-base;
font-size: @font-size-small; font-size: @font-size-small;
font-weight: normal;
line-height: 1.4; line-height: 1.4;
.opacity(0); .opacity(0);
@ -39,6 +42,7 @@
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
.tooltip { .tooltip {
&.top .tooltip-arrow { &.top .tooltip-arrow {
bottom: 0; bottom: 0;
@ -49,13 +53,15 @@
} }
&.top-left .tooltip-arrow { &.top-left .tooltip-arrow {
bottom: 0; bottom: 0;
left: @tooltip-arrow-width; right: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: @tooltip-arrow-color;
} }
&.top-right .tooltip-arrow { &.top-right .tooltip-arrow {
bottom: 0; bottom: 0;
right: @tooltip-arrow-width; left: @tooltip-arrow-width;
margin-bottom: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: @tooltip-arrow-color;
} }
@ -82,13 +88,15 @@
} }
&.bottom-left .tooltip-arrow { &.bottom-left .tooltip-arrow {
top: 0; top: 0;
left: @tooltip-arrow-width; right: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: @tooltip-arrow-color;
} }
&.bottom-right .tooltip-arrow { &.bottom-right .tooltip-arrow {
top: 0; top: 0;
right: @tooltip-arrow-width; left: @tooltip-arrow-width;
margin-top: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: @tooltip-arrow-color;
} }

@ -80,11 +80,6 @@ small,
font-size: floor((100% * @font-size-small / @font-size-base)); font-size: floor((100% * @font-size-small / @font-size-base));
} }
// Undo browser default styling
cite {
font-style: normal;
}
mark, mark,
.mark { .mark {
background-color: @state-warning-bg; background-color: @state-warning-bg;
@ -299,12 +294,6 @@ blockquote.pull-right {
} }
} }
// Quotes
blockquote:before,
blockquote:after {
content: "";
}
// Addresses // Addresses
address { address {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;

@ -53,5 +53,4 @@
.affix { .affix {
position: fixed; position: fixed;
.translate3d(0, 0, 0);
} }

@ -7,13 +7,14 @@
// //
//## Gray and brand colors for use across Bootstrap. //## Gray and brand colors for use across Bootstrap.
@gray-darker: lighten(#000, 13.5%); // #222 @gray-base: #000;
@gray-dark: lighten(#000, 20%); // #333 @gray-darker: lighten(@gray-base, 13.5%); // #222
@gray: lighten(#000, 33.5%); // #555 @gray-dark: lighten(@gray-base, 20%); // #333
@gray-light: lighten(#000, 46.7%); // #777 @gray: lighten(@gray-base, 33.5%); // #555
@gray-lighter: lighten(#000, 93.5%); // #eee @gray-light: lighten(@gray-base, 46.7%); // #777
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: #428bca;
@brand-primary: darken(#428bca, 6.5%);
@brand-success: #5cb85c; @brand-success: #5cb85c;
@brand-info: #5bc0de; @brand-info: #5bc0de;
@brand-warning: #f0ad4e; @brand-warning: #f0ad4e;
@ -33,13 +34,15 @@
@link-color: @brand-primary; @link-color: @brand-primary;
//** Link hover color set via `darken()` function. //** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%); @link-hover-color: darken(@link-color, 15%);
//** Link hover decoration.
@link-hover-decoration: underline;
//== Typography //== Typography
// //
//## Font, line-height, and color for body text, headings, and more. //## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif; @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@ -181,13 +184,20 @@
@input-color: @gray; @input-color: @gray;
//** `<input>` border color //** `<input>` border color
@input-border: #ccc; @input-border: #ccc;
//** `<input>` border radius
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
@input-border-radius: @border-radius-base; @input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small;
//** Border color for inputs on focus //** Border color for inputs on focus
@input-border-focus: #66afe9; @input-border-focus: #66afe9;
//** Placeholder text color //** Placeholder text color
@input-color-placeholder: @gray-light; @input-color-placeholder: #999;
//** Default `.form-control` height //** Default `.form-control` height
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@ -204,6 +214,9 @@
//** Border color for textual input addons //** Border color for textual input addons
@input-group-addon-border-color: @input-border; @input-group-addon-border-color: @input-border;
//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
//== Dropdowns //== Dropdowns
// //
@ -252,8 +265,7 @@
@zindex-popover: 1060; @zindex-popover: 1060;
@zindex-tooltip: 1070; @zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030; @zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040; @zindex-modal: 1040;
@zindex-modal: 1050;
//== Media queries breakpoints //== Media queries breakpoints
@ -302,10 +314,10 @@
//** Number of columns in the grid. //** Number of columns in the grid.
@grid-columns: 12; @grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right. //** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 15px; @grid-gutter-width: 30px;
// Navbar collapse // Navbar collapse
//** Point at which the navbar becomes uncollapsed. //** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: 0; @grid-float-breakpoint: @screen-sm-min;
//** Point at which the navbar begins collapsing. //** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
@ -315,17 +327,17 @@
//## Define the maximum width of `.container` for different screen sizes. //## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet // Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width)); @container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up. //** For `@screen-sm-min` and up.
@container-sm: @container-tablet; @container-sm: @container-tablet;
// Medium screen / desktop // Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width)); @container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up. //** For `@screen-md-min` and up.
@container-md: @container-desktop; @container-md: @container-desktop;
// Large screen / wide desktop // Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width)); @container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up. //** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop; @container-lg: @container-large-desktop;
@ -368,12 +380,12 @@
// Inverted navbar // Inverted navbar
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: @gray-light; @navbar-inverse-color: lighten(@gray-light, 15%);
@navbar-inverse-bg: #222; @navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); @navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: @gray-light; @navbar-inverse-link-color: lighten(@gray-light, 15%);
@navbar-inverse-link-hover-color: #fff; @navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent; @navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@ -403,8 +415,6 @@
@nav-disabled-link-color: @gray-light; @nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light; @nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
//== Tabs //== Tabs
@nav-tabs-border-color: #ddd; @nav-tabs-border-color: #ddd;
@ -529,7 +539,7 @@
//** Popover arrow width //** Popover arrow width
@popover-arrow-width: 10px; @popover-arrow-width: 10px;
//** Popover arrow color //** Popover arrow color
@popover-arrow-color: #fff; @popover-arrow-color: @popover-bg;
//** Popover outer arrow width //** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1); @popover-arrow-outer-width: (@popover-arrow-width + 1);
@ -628,6 +638,8 @@
@progress-bg: #f5f5f5; @progress-bg: #f5f5f5;
//** Progress bar text color //** Progress bar text color
@progress-bar-color: #fff; @progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
//** Default progress bar color //** Default progress bar color
@progress-bar-bg: @brand-primary; @progress-bar-bg: @brand-primary;
@ -842,5 +854,3 @@
@dl-horizontal-offset: @component-offset-horizontal; @dl-horizontal-offset: @component-offset-horizontal;
//** Horizontal line color. //** Horizontal line color.
@hr-border: @gray-lighter; @hr-border: @gray-lighter;

Loading…
Cancel
Save