diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/button-groups.less | 34 | ||||
| -rw-r--r-- | less/carousel.less | 1 | ||||
| -rw-r--r-- | less/dropdowns.less | 11 | ||||
| -rw-r--r-- | less/forms.less | 14 | ||||
| -rw-r--r-- | less/grid.less | 26 | ||||
| -rw-r--r-- | less/jumbotron.less | 4 | ||||
| -rw-r--r-- | less/mixins.less | 44 | ||||
| -rw-r--r-- | less/modals.less | 6 | ||||
| -rw-r--r-- | less/navbar.less | 42 | ||||
| -rw-r--r-- | less/navs.less | 20 | ||||
| -rw-r--r-- | less/panels.less | 8 | ||||
| -rw-r--r-- | less/progress-bars.less | 12 | ||||
| -rw-r--r-- | less/tables.less | 38 | ||||
| -rw-r--r-- | less/thumbnails.less | 32 | ||||
| -rw-r--r-- | less/type.less | 3 | ||||
| -rw-r--r-- | less/variables.less | 15 |
16 files changed, 106 insertions, 204 deletions
diff --git a/less/button-groups.less b/less/button-groups.less index c25357622..87f643d74 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -2,37 +2,6 @@ // Button groups // -------------------------------------------------- -// Button carets -// -// Match the button text color to the arrow/caret for indicating dropdown-ness. - -.caret { - .btn-default & { - border-top-color: @btn-default-color; - } - .btn-primary &, - .btn-success &, - .btn-warning &, - .btn-danger &, - .btn-info & { - border-top-color: #fff; - } -} -.dropup { - .btn-default .caret { - border-bottom-color: @btn-default-color; - } - .btn-primary, - .btn-success, - .btn-warning, - .btn-danger, - .btn-info { - .caret { - border-bottom-color: #fff; - } - } -} - // Make the div behave like a button .btn-group, .btn-group-vertical { @@ -178,7 +147,8 @@ .btn-group-vertical { > .btn, - > .btn-group { + > .btn-group, + > .btn-group > .btn { display: block; float: none; width: 100%; diff --git a/less/carousel.less b/less/carousel.less index 317963b7f..e53365df4 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -91,6 +91,7 @@ // Hover/focus state &:hover, &:focus { + outline: none; color: @carousel-control-color; text-decoration: none; .opacity(.9); diff --git a/less/dropdowns.less b/less/dropdowns.less index 5d7e0fb4e..1a8f1973f 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -10,12 +10,9 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: @caret-width-base solid @dropdown-caret-color; + border-top: @caret-width-base solid; border-right: @caret-width-base solid transparent; border-left: @caret-width-base solid transparent; - // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed, - // we can just straight up remove this. - border-bottom: 0 dotted; } // The dropdown wrapper (div) @@ -163,10 +160,8 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { - // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this - // gets fixed, restore `border-top: 0;`. - border-top: 0 dotted; - border-bottom: @caret-width-base solid @dropdown-caret-color; + border-top: 0; + border-bottom: @caret-width-base solid; content: ""; } // Different positioning for bottom up menu diff --git a/less/forms.less b/less/forms.less index f6bbce596..a74babdb3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -92,14 +92,6 @@ output { vertical-align: middle; } -// Placeholder -// -// Placeholder text gets special styles because when browsers invalidate entire -// lines if it doesn't understand a selector/ -.form-control { - .placeholder(); -} - // Common form controls // @@ -142,6 +134,12 @@ output { // Customize the `:focus` state to imitate native WebKit styles. .form-control-focus(); + // Placeholder + // + // Placeholder text gets special styles because when browsers invalidate entire + // lines if it doesn't understand a selector/ + .placeholder(); + // Disabled and read-only inputs // Note: HTML5 says that controls under a fieldset > legend:first-child won't // be disabled if the fieldset is disabled. Due to implementation difficulty, diff --git a/less/grid.less b/less/grid.less index 67e78f760..f5256be54 100644 --- a/less/grid.less +++ b/less/grid.less @@ -5,6 +5,16 @@ // Set the container width, and override it for fixed navbars in media queries .container { .container-fixed(); + + @media (min-width: @screen-sm) { + width: @container-sm; + } + @media (min-width: @screen-md) { + width: @container-md; + } + @media (min-width: @screen-lg-min) { + width: @container-lg; + } } // mobile first defaults @@ -18,8 +28,8 @@ // Extra small grid // -// Grid classes for extra small devices like smartphones. No offset, push, or -// pull classes are present here due to the size of the target. +// Columns, offsets, pushes, and pulls for extra small devices like +// smartphones. // // Note that `.col-xs-12` doesn't get floated on purpose--there's no need since // it's full-width. @@ -40,10 +50,6 @@ // it's full-width. @media (min-width: @screen-sm-min) { - .container { - width: @container-sm; - } - .make-grid-columns-float(sm); .make-grid(@grid-columns, sm, width); .make-grid(@grid-columns, sm, pull); @@ -60,10 +66,6 @@ // it's full-width. @media (min-width: @screen-md-min) { - .container { - width: @container-md; - } - .make-grid-columns-float(md); .make-grid(@grid-columns, md, width); .make-grid(@grid-columns, md, pull); @@ -80,10 +82,6 @@ // it's full-width. @media (min-width: @screen-lg-min) { - .container { - width: @container-lg; - } - .make-grid-columns-float(lg); .make-grid(@grid-columns, lg, width); .make-grid(@grid-columns, lg, pull); diff --git a/less/jumbotron.less b/less/jumbotron.less index 720bda7d3..0460b69d4 100644 --- a/less/jumbotron.less +++ b/less/jumbotron.less @@ -25,6 +25,10 @@ border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container } + .container { + max-width: 100%; + } + @media screen and (min-width: @screen-sm-min) { padding-top: (@jumbotron-padding * 1.6); padding-bottom: (@jumbotron-padding * 1.6); diff --git a/less/mixins.less b/less/mixins.less index 4718cb2c0..df515f39a 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -30,8 +30,8 @@ // WebKit-style focus .tab-focus() { // Default - outline: thin dotted #333; - // WebKit + outline: thin dotted; + //Webkit outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } @@ -55,7 +55,8 @@ // Placeholder text .placeholder(@color: @input-color-placeholder) { &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; } // Firefox 19+ + &::-moz-placeholder { color: @color; // Firefox 19+ + opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome } @@ -391,7 +392,7 @@ // Panels // ------------------------- -.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) { +.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { border-color: @border; & > .panel-heading { @@ -402,9 +403,6 @@ + .panel-collapse .panel-body { border-top-color: @border; } - & > .dropdown .caret { - border-color: @heading-text-color transparent; - } } & > .panel-footer { + .panel-collapse .panel-body { @@ -430,27 +428,27 @@ // Tables // ------------------------- -.table-row-variant(@state; @background; @border) { +.table-row-variant(@state; @background) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. - .table > thead > tr, - .table > tbody > tr, - .table > tfoot > tr { - > td.@{state}, - > th.@{state}, - &.@{state} > td, - &.@{state} > th { - background-color: @background; + .table { + > thead, + > tbody, + > tfoot { + > tr > .@{state}, + > .@{state} > td, + > .@{state} > th { + background-color: @background; + } } } // Hover states for `.table-hover` // Note: this is not available for cells or rows within `thead` or `tfoot`. - .table-hover > tbody > tr { - > td.@{state}:hover, - > th.@{state}:hover, - &.@{state}:hover > td, - &.@{state}:hover > th { + .table-hover > tbody { + > tr > .@{state}:hover, + > .@{state}:hover > td, + > .@{state}:hover > th { background-color: darken(@background, 5%); } } @@ -750,7 +748,7 @@ .col(1); // kickstart it } -.calc-grid(@index, @class, @type) when (@type = width) { +.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) { .col-@{class}-@{index} { width: percentage((@index / @grid-columns)); } @@ -772,7 +770,7 @@ } // Basic looping in LESS -.make-grid(@index, @class, @type) when (@index > 0) { +.make-grid(@index, @class, @type) when (@index >= 0) { .calc-grid(@index, @class, @type); // next iteration .make-grid(@index - 1, @class, @type); diff --git a/less/modals.less b/less/modals.less index 99cf76469..c9feb7f18 100644 --- a/less/modals.less +++ b/less/modals.less @@ -38,7 +38,7 @@ margin-left: auto; margin-right: auto; width: auto; - padding: 10px; + margin: 10px; z-index: (@zindex-modal-background + 10); } @@ -122,8 +122,8 @@ .modal-dialog { width: 600px; - padding-top: 30px; - padding-bottom: 30px; + margin-top: 30px; + margin-bottom: 30px; } .modal-content { .box-shadow(0 5px 15px rgba(0,0,0,.5)); diff --git a/less/navbar.less b/less/navbar.less index 987cde6b0..bae180be7 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -180,6 +180,7 @@ padding: 9px 10px; .navbar-vertical-align(34px); background-color: transparent; + background-image: none; // Fix for at least Firefox on Android, per #11468 border: 1px solid transparent; border-radius: @border-radius-base; @@ -340,10 +341,10 @@ // Add a class to make any element properly align itself vertically within the navbars. .navbar-text { - float: left; .navbar-vertical-align(@line-height-computed); @media (min-width: @grid-float-breakpoint) { + float: left; margin-left: @navbar-padding-horizontal; margin-right: @navbar-padding-horizontal; } @@ -414,15 +415,8 @@ border-color: @navbar-default-border; } - // Dropdown menu items and carets + // Dropdown menu items .navbar-nav { - // Caret should match text color on hover - > .dropdown > a:hover .caret, - > .dropdown > a:focus .caret { - border-top-color: @navbar-default-link-hover-color; - border-bottom-color: @navbar-default-link-hover-color; - } - // Remove background color from open dropdown > .open > a { &, @@ -430,17 +424,8 @@ &:focus { background-color: @navbar-default-link-active-bg; color: @navbar-default-link-active-color; - .caret { - border-top-color: @navbar-default-link-active-color; - border-bottom-color: @navbar-default-link-active-color; - } } } - > .dropdown > a .caret { - border-top-color: @navbar-default-link-color; - border-bottom-color: @navbar-default-link-color; - } - @media (max-width: @screen-xs-max) { // Dropdowns get custom display when collapsed @@ -561,24 +546,6 @@ color: @navbar-inverse-link-active-color; } } - > .dropdown > a:hover .caret { - border-top-color: @navbar-inverse-link-hover-color; - border-bottom-color: @navbar-inverse-link-hover-color; - } - > .dropdown > a .caret { - border-top-color: @navbar-inverse-link-color; - border-bottom-color: @navbar-inverse-link-color; - } - > .open > a { - &, - &:hover, - &:focus { - .caret { - border-top-color: @navbar-inverse-link-active-color; - border-bottom-color: @navbar-inverse-link-active-color; - } - } - } @media (max-width: @screen-xs-max) { // Dropdowns get custom display @@ -586,6 +553,9 @@ > .dropdown-header { border-color: @navbar-inverse-border; } + .divider { + background-color: @navbar-inverse-border; + } > li > a { color: @navbar-inverse-link-color; &:hover, diff --git a/less/navs.less b/less/navs.less index 6cddcd494..859d5d866 100644 --- a/less/navs.less +++ b/less/navs.less @@ -48,11 +48,6 @@ &:focus { background-color: @nav-link-hover-bg; border-color: @link-color; - - .caret { - border-top-color: @link-hover-color; - border-bottom-color: @link-hover-color; - } } } @@ -138,11 +133,6 @@ &:focus { color: @nav-pills-active-link-hover-color; background-color: @nav-pills-active-link-hover-bg; - - .caret { - border-top-color: @nav-pills-active-link-hover-color; - border-bottom-color: @nav-pills-active-link-hover-color; - } } } } @@ -243,16 +233,6 @@ // Dropdowns // ------------------------- -// Make dropdown carets use link color in navs -.nav .caret { - border-top-color: @link-color; - border-bottom-color: @link-color; -} -.nav a:hover .caret { - border-top-color: @link-hover-color; - border-bottom-color: @link-hover-color; -} - // Specific dropdowns .nav-tabs .dropdown-menu { // make dropdown border overlap tab border diff --git a/less/panels.less b/less/panels.less index 84a12d1ed..549588073 100644 --- a/less/panels.less +++ b/less/panels.less @@ -57,13 +57,17 @@ .panel { > .table, - > .table-responsive { + > .table-responsive > .table { margin-bottom: 0; } > .panel-body + .table, > .panel-body + .table-responsive { border-top: 1px solid @table-border-color; } + > .table > tbody:first-child th, + > .table > tbody:first-child td { + border-top: 0; + } > .table-bordered, > .table-responsive > .table-bordered { border: 0; @@ -96,7 +100,7 @@ border-bottom: 1px solid transparent; .border-top-radius(@panel-border-radius - 1); - & > .dropdown .dropdown-toggle { + > .dropdown .dropdown-toggle { color: inherit; } } diff --git a/less/progress-bars.less b/less/progress-bars.less index 507c82dbd..76c87be17 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -12,18 +12,6 @@ to { background-position: 0 0; } } -// Firefox -@-moz-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// Opera -@-o-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } -} - // Spec and IE10+ @keyframes progress-bar-stripes { from { background-position: 40px 0; } diff --git a/less/tables.less b/less/tables.less index 0deadc782..7192c4d5e 100644 --- a/less/tables.less +++ b/less/tables.less @@ -104,10 +104,12 @@ th { // // Default zebra-stripe styles (alternating gray and transparent backgrounds) -.table-striped > tbody > tr:nth-child(odd) { - > td, - > th { - background-color: @table-bg-accent; +.table-striped { + > tbody > tr:nth-child(odd) { + > td, + > th { + background-color: @table-bg-accent; + } } } @@ -116,10 +118,12 @@ th { // // Placed here since it has to come after the potential zebra striping -.table-hover > tbody > tr:hover { - > td, - > th { - background-color: @table-bg-hover; +.table-hover { + > tbody > tr:hover { + > td, + > th { + background-color: @table-bg-hover; + } } } @@ -148,21 +152,11 @@ table { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. -.table > thead > tr, -.table > tbody > tr, -.table > tfoot > tr { - > td.active, - > th.active, - &.active > td, - &.active > th { - background-color: @table-bg-active; - } -} - // Generate the contextual variants -.table-row-variant(success; @state-success-bg; @state-success-border); -.table-row-variant(danger; @state-danger-bg; @state-danger-border); -.table-row-variant(warning; @state-warning-bg; @state-warning-border); +.table-row-variant(active; @table-bg-active); +.table-row-variant(success; @state-success-bg); +.table-row-variant(danger; @state-danger-bg); +.table-row-variant(warning; @state-warning-bg); // Responsive tables diff --git a/less/thumbnails.less b/less/thumbnails.less index a09aa9b83..43e7d1d26 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -5,27 +5,31 @@ // Mixin and adjust the regular image class .thumbnail { - .img-thumbnail(); - display: block; // Override the inline-block from `.img-thumbnail` + display: block; + padding: @thumbnail-padding; margin-bottom: @line-height-computed; + line-height: @line-height-base; + background-color: @thumbnail-bg; + border: 1px solid @thumbnail-border; + border-radius: @thumbnail-border-radius; + .transition(all .2s ease-in-out); > img { .img-responsive(); margin-left: auto; margin-right: auto; } -} - -// Add a hover state for linked versions only -a.thumbnail:hover, -a.thumbnail:focus, -a.thumbnail.active { - border-color: @link-color; -} + // Add a hover state for linked versions only + a&:hover, + a&:focus, + a&.active { + border-color: @link-color; + } -// Image captions -.thumbnail .caption { - padding: @thumbnail-caption-padding; - color: @thumbnail-caption-color; + // Image captions + .caption { + padding: @thumbnail-caption-padding; + color: @thumbnail-caption-color; + } } diff --git a/less/type.less b/less/type.less index 437c70b76..982d94f59 100644 --- a/less/type.less +++ b/less/type.less @@ -233,7 +233,8 @@ blockquote { p:last-child { margin-bottom: 0; } - small { + small, + .small { display: block; line-height: @line-height-base; color: @blockquote-small-color; diff --git a/less/variables.less b/less/variables.less index e596215d0..120a65e06 100644 --- a/less/variables.less +++ b/less/variables.less @@ -41,7 +41,7 @@ @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; -@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; +@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 14px; @@ -157,7 +157,7 @@ @input-color-placeholder: @gray-light; @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); -@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @legend-color: @gray-dark; @@ -186,8 +186,6 @@ @dropdown-header-color: @gray-light; -@dropdown-caret-color: #000; - // COMPONENT VARIABLES // -------------------------------------------------- @@ -321,7 +319,6 @@ @nav-disabled-link-hover-color: @gray-light; @nav-open-link-hover-color: #fff; -@nav-open-caret-border-color: #fff; // Tabs @nav-tabs-border-color: #ddd; @@ -375,19 +372,19 @@ // Form states and alerts // ------------------------- -@state-success-text: #468847; +@state-success-text: #3c763d; @state-success-bg: #dff0d8; @state-success-border: darken(spin(@state-success-bg, -10), 5%); -@state-info-text: #3a87ad; +@state-info-text: #31708f; @state-info-bg: #d9edf7; @state-info-border: darken(spin(@state-info-bg, -10), 7%); -@state-warning-text: #c09853; +@state-warning-text: #8a6d3b; @state-warning-bg: #fcf8e3; @state-warning-border: darken(spin(@state-warning-bg, -10), 5%); -@state-danger-text: #b94a48; +@state-danger-text: #a94442; @state-danger-bg: #f2dede; @state-danger-border: darken(spin(@state-danger-bg, -10), 5%); |
