From 60e1f5e0e80602f3e1d00a77920b41c794175c0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 31 Jul 2013 17:48:22 -0700 Subject: start with buttons --- less/bootstrap.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index b7f393d7a..102d5b0c7 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -21,7 +21,6 @@ @import "type.less"; @import "code.less"; @import "grid.less"; - @import "tables.less"; @import "forms.less"; @import "buttons.less"; @@ -60,5 +59,8 @@ @import "jumbotron.less"; // Utility classes -@import "utilities.less"; // Has to be last to override when necessary +@import "utilities.less"; @import "responsive-utilities.less"; + +// Themes +@import "theme.less"; -- cgit v1.2.3 From 7e19b6b02ccd5417a6c2d3d418c08219773f1112 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 31 Jul 2013 18:02:41 -0700 Subject: add the theme file derp --- less/theme.less | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 less/theme.less (limited to 'less') diff --git a/less/theme.less b/less/theme.less new file mode 100644 index 000000000..6befcc0c1 --- /dev/null +++ b/less/theme.less @@ -0,0 +1,55 @@ + +// +// Buttons +// -------------------------------------------------- + +// Button mixin for generating new styles +.btn-styles(@btn-color: #555) { + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%)); + border-color: darken(@btn-color, 12%); + @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); + .box-shadow(@shadow); + + // Reset the shadow + &:active, + &.active { + background-color: darken(@btn-color, 10%); + border-color: darken(@btn-color, 12%); + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } +} + +// Common styles +.btn { + // Remove the gradient for the pressed/active state + &:active, + &.active { + background-image: none; + } +} + +// Apply the mixin to the buttons +.btn-default { .btn-styles(@btn-default-bg); } +.btn-primary { .btn-styles(@btn-primary-bg); } +.btn-success { .btn-styles(@btn-success-bg); } +.btn-warning { .btn-styles(@btn-warning-bg); } +.btn-danger { .btn-styles(@btn-danger-bg); } +.btn-info { .btn-styles(@btn-info-bg); } + + + + +// +// Navbar +// -------------------------------------------------- + +// Basic navbar +.navbar { + #gradient > .vertical(@start-color: lighten(@navbar-bg, 10%); @end-color: @navbar-bg;); +} + +// Inverted navbar +.navbar-inverse { + #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;); +} -- cgit v1.2.3 From 2af9cf10ce2e93fe0ac07651d405abc484e4c608 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 6 Aug 2013 18:42:10 -0700 Subject: more twerks to the theme --- less/theme.less | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/theme.less b/less/theme.less index 6befcc0c1..0ad042204 100644 --- a/less/theme.less +++ b/less/theme.less @@ -30,7 +30,7 @@ } // Apply the mixin to the buttons -.btn-default { .btn-styles(@btn-default-bg); } +.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } .btn-primary { .btn-styles(@btn-primary-bg); } .btn-success { .btn-styles(@btn-success-bg); } .btn-warning { .btn-styles(@btn-warning-bg); } @@ -47,9 +47,17 @@ // Basic navbar .navbar { #gradient > .vertical(@start-color: lighten(@navbar-bg, 10%); @end-color: @navbar-bg;); + + .navbar-nav > .active > a { + background-color: @navbar-bg; + } } // Inverted navbar .navbar-inverse { #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;); + + .navbar-nav > .active > a { + background-color: @navbar-inverse-bg; + } } -- cgit v1.2.3 From 61caed21e2553e1be29d98bd83c8e6ac06565ecd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:21:38 -0700 Subject: More consistent naming with screen size variables using xs, sm, md, and lg --- less/grid.less | 4 ++-- less/mixins.less | 24 ++++++++++----------- less/navbar.less | 6 +++--- less/navs.less | 2 +- less/responsive-utilities.less | 48 +++++++++++++++++++++--------------------- less/variables.less | 29 ++++++++++++------------- 6 files changed, 56 insertions(+), 57 deletions(-) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index e3684e5ae..c77f455f3 100644 --- a/less/grid.less +++ b/less/grid.less @@ -272,9 +272,9 @@ // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since // it's full-width. -@media (min-width: @screen-large-desktop) { +@media (min-width: @screen-lg-desktop) { .container { - max-width: @container-large-desktop; + max-width: @container-lg-desktop; } .col-lg-1, diff --git a/less/mixins.less b/less/mixins.less index de21668b7..c4d1de5ff 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -558,7 +558,7 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { float: left; width: percentage((@columns / @grid-columns)); } @@ -566,17 +566,17 @@ // Generate the small column offsets .make-sm-column-offset(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { right: percentage((@columns / @grid-columns)); } } @@ -591,7 +591,7 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-medium) { + @media (min-width: @screen-md) { float: left; width: percentage((@columns / @grid-columns)); } @@ -599,17 +599,17 @@ // Generate the large column offsets .make-md-column-offset(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md) { margin-left: percentage((@columns / @grid-columns)); } } .make-md-column-push(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md) { left: percentage((@columns / @grid-columns)); } } .make-md-column-pull(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md) { right: percentage((@columns / @grid-columns)); } } @@ -624,7 +624,7 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-large) { + @media (min-width: @screen-lg) { float: left; width: percentage((@columns / @grid-columns)); } @@ -632,17 +632,17 @@ // Generate the large column offsets .make-lg-column-offset(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg) { margin-left: percentage((@columns / @grid-columns)); } } .make-lg-column-push(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg) { left: percentage((@columns / @grid-columns)); } } .make-lg-column-pull(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg) { right: percentage((@columns / @grid-columns)); } } diff --git a/less/navbar.less b/less/navbar.less index b5320ba4e..110e8a35c 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -216,7 +216,7 @@ } } - @media (max-width: @screen-phone-max) { + @media (max-width: @screen-xs-max) { // Dropdowns get custom display when collapsed .open .dropdown-menu { position: static; @@ -311,7 +311,7 @@ .form-inline(); .form-group { - @media (max-width: @screen-phone-max) { + @media (max-width: @screen-xs-max) { margin-bottom: 5px; } } @@ -512,7 +512,7 @@ } } - @media (max-width: @screen-phone-max) { + @media (max-width: @screen-xs-max) { // Dropdowns get custom display .open .dropdown-menu { > .dropdown-header { diff --git a/less/navs.less b/less/navs.less index abee86dcc..6002a8cdd 100644 --- a/less/navs.less +++ b/less/navs.less @@ -162,7 +162,7 @@ } } - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { > li { display: table-cell; width: 1%; diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 529152032..062d6820c 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -37,98 +37,98 @@ .visible-xs { .responsive-visibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-invisibility(); } } .visible-sm { .responsive-invisibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-invisibility(); } } .visible-md { .responsive-invisibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-invisibility(); } } .visible-lg { .responsive-invisibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-visibility(); } } .hidden-xs { .responsive-invisibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-visibility(); } } .hidden-sm { .responsive-visibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-visibility(); } } .hidden-md { .responsive-visibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-visibility(); } } .hidden-lg { .responsive-visibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-invisibility(); } } diff --git a/less/variables.less b/less/variables.less index c3eeaaebc..a46ad4fb6 100644 --- a/less/variables.less +++ b/less/variables.less @@ -193,26 +193,25 @@ // -------------------------------------------------- // Extra small screen / phone -@screen-xsmall: 480px; -@screen-phone: @screen-xsmall; +@screen-xs: 480px; +@screen-phone: @screen-xs; // Small screen / tablet -@screen-small: 768px; -@screen-tablet: @screen-small; +@screen-sm: 768px; +@screen-tablet: @screen-sm; // Medium screen / desktop -@screen-medium: 992px; -@screen-desktop: @screen-medium; +@screen-md: 992px; +@screen-desktop: @screen-md; // Large screen / wide desktop -@screen-large: 1200px; -@screen-large-desktop: @screen-large; +@screen-lg: 1200px; +@screen-lg-desktop: @screen-lg; // So media queries don't overlap when required, provide a maximum -@screen-phone-max: (@screen-small - 1); -@screen-small-max: (@screen-medium - 1); -@screen-tablet-max: (@screen-desktop - 1); -@screen-desktop-max: (@screen-large-desktop - 1); +@screen-xs-max: (@screen-sm - 1); +@screen-sm-max: (@screen-md - 1); +@screen-md-max: (@screen-lg - 1); // Grid system @@ -600,10 +599,10 @@ // -------------------------------------------------- // Small screen / tablet -@container-tablet: ((720px + @grid-gutter-width)); +@container-tablet: ((720px + @grid-gutter-width)); // Medium screen / desktop -@container-desktop: ((940px + @grid-gutter-width)); +@container-desktop: ((940px + @grid-gutter-width)); // Large screen / wide desktop -@container-large-desktop: ((1140px + @grid-gutter-width)); +@container-lg-desktop: ((1140px + @grid-gutter-width)); -- cgit v1.2.3 From 663673438845b0bdb4f951ece7c6eabb2d51d065 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:46:42 -0700 Subject: Fixes #9752: clear floats in .panel-body --- less/panels.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/panels.less b/less/panels.less index 5cd04b3db..9d1b21389 100644 --- a/less/panels.less +++ b/less/panels.less @@ -15,6 +15,7 @@ // Panel contents .panel-body { padding: 15px; + .clearfix(); } // List groups in panels -- cgit v1.2.3 From e58721995879da2e866f27d389dfa9ed9da4d0b5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 17:26:52 -0700 Subject: Fix navbar brand alignment by removing header padding when above 768px --- less/navbar.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 110e8a35c..e83606d91 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -36,6 +36,9 @@ @media (min-width: @grid-float-breakpoint) { float: left; + padding-left: 0; + padding-right: 0; + margin-right: @navbar-padding-horizontal; } } -- cgit v1.2.3 From c56a749323836b7e0b7401d41de1d0c68a7cb7a8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 18:59:50 -0700 Subject: Finish first pass at and docment Bootstrap v2-ish theme * Adds new "theme" example * Adds new theme.less file to provide all the overrides and additional styles for the theme * theme.less compiles, via Grunt, to two new files to `dist/css`, bootstrap-theme.css and bootstrap-theme.min.css --- less/bootstrap.less | 3 - less/theme.less | 181 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 175 insertions(+), 9 deletions(-) (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index 771eb32d1..e80b29596 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -60,6 +60,3 @@ // Utility classes @import "utilities.less"; @import "responsive-utilities.less"; - -// Themes -@import "theme.less"; diff --git a/less/theme.less b/less/theme.less index 0ad042204..4acf9ee76 100644 --- a/less/theme.less +++ b/less/theme.less @@ -1,22 +1,44 @@ +// +// Load core variables and mixins +// -------------------------------------------------- + +@import "variables.less"; +@import "mixins.less"; + + + // // Buttons // -------------------------------------------------- -// Button mixin for generating new styles -.btn-styles(@btn-color: #555) { +// Common styles +.btn-default, +.btn-primary, +.btn-success, +.btn-info, +.btn-warning, +.btn-danger { text-shadow: 0 -1px 0 rgba(0,0,0,.2); - #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%)); - border-color: darken(@btn-color, 12%); @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); .box-shadow(@shadow); // Reset the shadow + &:active, + &.active { + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } +} + +// Button mixin for generating new styles +.btn-styles(@btn-color: #555;) { + #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%)); + border-color: darken(@btn-color, 12%); + &:active, &.active { background-color: darken(@btn-color, 10%); border-color: darken(@btn-color, 12%); - .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } } @@ -30,7 +52,7 @@ } // Apply the mixin to the buttons -.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } +.btn-default { .btn-styles(@btn-default-bg;); text-shadow: 0 1px 0 #fff; border-color: #ccc; } .btn-primary { .btn-styles(@btn-primary-bg); } .btn-success { .btn-styles(@btn-success-bg); } .btn-warning { .btn-styles(@btn-warning-bg); } @@ -39,6 +61,31 @@ +// +// Images +// -------------------------------------------------- + +.thumbnail, +.img-thumbnail { + .box-shadow(0 1px 2px rgba(0,0,0,.075)); +} + + + +// +// Dropdowns +// -------------------------------------------------- + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); + background-color: darken(@dropdown-link-hover-bg, 5%); +} + + // // Navbar @@ -47,11 +94,18 @@ // Basic navbar .navbar { #gradient > .vertical(@start-color: lighten(@navbar-bg, 10%); @end-color: @navbar-bg;); + border-radius: @border-radius-base; + @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); + .box-shadow(@shadow); .navbar-nav > .active > a { background-color: @navbar-bg; } } +.navbar-brand, +.navbar-nav > li > a { + text-shadow: 0 1px 0 rgba(255,255,255,.25); +} // Inverted navbar .navbar-inverse { @@ -60,4 +114,119 @@ .navbar-nav > .active > a { background-color: @navbar-inverse-bg; } + + .navbar-brand, + .navbar-nav > li > a { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } +} + +// Undo rounded corners in static and fixed navbars +.navbar-static-top, +.navbar-fixed-top, +.navbar-fixed-bottom { + border-radius: 0; +} + + + +// +// Alerts +// -------------------------------------------------- + +// Common styles +.alert { + text-shadow: 0 1px 0 rgba(255,255,255,.2); + @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); +} + +// Alert mixin for generating new styles +.alert-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%)); + border-color: darken(@color, 15%); +} + +// Apply the mixin to the alerts +.alert { .alert-styles(@alert-bg); } +.alert-success { .alert-styles(@alert-success-bg); } +.alert-info { .alert-styles(@alert-info-bg); } +.alert-danger { .alert-styles(@alert-danger-bg); } + + + +// +// Progress bars +// -------------------------------------------------- + +// Give the progress background some depth +.progress { + #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;) +} + +// Progress bar mixin for generating new styles +.progress-bar-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%)); +} + +// Apply the mixin to the progress bars +.progress-bar { .progress-bar-styles(@progress-bar-bg); } +.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); } +.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); } +.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); } +.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); } + + + +// +// List groups +// -------------------------------------------------- + +.list-group { + border-radius: @border-radius-base; + .box-shadow(0 1px 2px rgba(0,0,0,.075)); +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + 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%)); + border-color: darken(@list-group-active-border, 7.5%); +} + + + +// +// Panels +// -------------------------------------------------- + +// Common styles +.panel { + .box-shadow(0 1px 2px rgba(0,0,0,.05)); +} + +// Alert mixin for generating new styles +.panel-heading-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%)); +} + +// Apply the mixin to the panel headings only +.panel-heading { .panel-heading-styles(@panel-heading-bg); } +.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); } +.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); } +.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); } +.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); } +.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); } + + + +// +// Wells +// -------------------------------------------------- + +.well { + #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg;); + border-color: darken(@well-bg, 10%); + @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + .box-shadow(@shadow); } -- cgit v1.2.3 From 9a66906d3dec56d1e44083e8ee005affa71ffecf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 19:14:13 -0700 Subject: generic comment --- less/theme.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/theme.less b/less/theme.less index 4acf9ee76..52e2d239a 100644 --- a/less/theme.less +++ b/less/theme.less @@ -30,7 +30,7 @@ } } -// Button mixin for generating new styles +// Mixin for generating new styles .btn-styles(@btn-color: #555;) { #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%)); border-color: darken(@btn-color, 12%); @@ -141,7 +141,7 @@ .box-shadow(@shadow); } -// Alert mixin for generating new styles +// Mixin for generating new styles .alert-styles(@color) { #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%)); border-color: darken(@color, 15%); @@ -164,7 +164,7 @@ #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;) } -// Progress bar mixin for generating new styles +// Mixin for generating new styles .progress-bar-styles(@color) { #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%)); } @@ -205,7 +205,7 @@ .box-shadow(0 1px 2px rgba(0,0,0,.05)); } -// Alert mixin for generating new styles +// Mixin for generating new styles .panel-heading-styles(@color) { #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%)); } -- cgit v1.2.3 From d713f8341c26b1705a94fd890a92695d271dfb5b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 20:33:52 -0700 Subject: Update jumbotron * Defaults to no rounded corners and full width in the viewport * When in a container, the jumbotron has extra padding and will have rounded corners * Updates default jumbotron example to show the full width default display Fixes #9759. --- less/jumbotron.less | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/jumbotron.less b/less/jumbotron.less index ca51b481a..c14b87697 100644 --- a/less/jumbotron.less +++ b/less/jumbotron.less @@ -4,13 +4,14 @@ .jumbotron { - padding: 30px; + padding: 30px 15px; margin-bottom: 30px; font-size: (@font-size-base * 1.5); font-weight: 200; line-height: (@line-height-base * 1.5); color: @jumbotron-lead-color; background-color: @jumbotron-bg; + h1 { line-height: 1; color: @jumbotron-heading-color; @@ -19,9 +20,19 @@ line-height: 1.4; } + .container & { + border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container + } + @media screen and (min-width: @screen-tablet) { - padding: 50px 60px; - border-radius: @border-radius-large; // Only round corners at higher resolutions + padding-top: 50px; + padding-bottom: 50px; + + .container & { + padding-left: 60px; + padding-right: 60px; + } + h1 { font-size: (@font-size-base * 4.5); } -- cgit v1.2.3 From 5539db523743c177a2ebb7d878343776abf6b7b4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 21:00:13 -0700 Subject: Navbar update Addresses a few different cases where the navbar has and doesn't have a container, and accordingly adjusts the padding and margin of key elements. --- less/jumbotron.less | 2 +- less/navbar.less | 36 ++++++++++++++++++++++++------------ 2 files changed, 25 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/jumbotron.less b/less/jumbotron.less index c14b87697..bb5a71fb5 100644 --- a/less/jumbotron.less +++ b/less/jumbotron.less @@ -4,7 +4,7 @@ .jumbotron { - padding: 30px 15px; + padding: 30px; margin-bottom: 30px; font-size: (@font-size-base * 1.5); font-weight: 200; diff --git a/less/navbar.less b/less/navbar.less index e83606d91..ce598d0d2 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -30,15 +30,10 @@ // styling of responsive aspects. .navbar-header { - padding-left: @navbar-padding-horizontal; - padding-right: @navbar-padding-horizontal; .clearfix(); @media (min-width: @grid-float-breakpoint) { float: left; - padding-left: 0; - padding-right: 0; - margin-right: @navbar-padding-horizontal; } } @@ -69,8 +64,6 @@ @media (min-width: @grid-float-breakpoint) { width: auto; - padding-right: 0; - padding-left: 0; border-top: 0; box-shadow: none; @@ -88,6 +81,22 @@ } +// Both navbar header and collapse +// +// When a container is present, change the behavior of the header and collapse. + +.container > .navbar-header, +.container > .navbar-collapse { + margin-right: -@navbar-padding-horizontal; + margin-left: -@navbar-padding-horizontal; + + @media (min-width: @grid-float-breakpoint) { + margin-right: 0; + margin-left: 0; + } +} + + // // Navbar alignment options // @@ -129,8 +138,7 @@ .navbar-brand { float: left; - padding-top: @navbar-padding-vertical; - padding-bottom: @navbar-padding-vertical; + padding: @navbar-padding-vertical @navbar-padding-horizontal; font-size: @font-size-large; line-height: @line-height-computed; color: @navbar-brand-color; @@ -140,6 +148,12 @@ text-decoration: none; background-color: @navbar-brand-hover-bg; } + + @media (min-width: @grid-float-breakpoint) { + .navbar > .container & { + margin-left: -@navbar-padding-horizontal; + } + } } @@ -151,6 +165,7 @@ .navbar-toggle { position: relative; float: right; + margin-right: @navbar-padding-horizontal; padding: 9px 10px; .navbar-vertical-align(34px); background-color: transparent; @@ -175,9 +190,6 @@ } @media (min-width: @grid-float-breakpoint) { - position: relative; - top: auto; - left: auto; display: none; } } -- cgit v1.2.3 From f891f91bacfa20647eb0a8814b6a993662564b67 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 21:18:00 -0700 Subject: Reorder bootstrap.less to match docs oder --- less/bootstrap.less | 34 +++++++++++++++------------------- 1 file changed, 15 insertions(+), 19 deletions(-) (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index e80b29596..635e0256c 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -25,37 +25,33 @@ @import "forms.less"; @import "buttons.less"; -// Components: common +// Components @import "component-animations.less"; -@import "input-groups.less"; @import "dropdowns.less"; -@import "list-group.less"; -@import "panels.less"; -@import "wells.less"; -@import "close.less"; - -// Components: Nav +@import "button-groups.less"; +@import "input-groups.less"; @import "navs.less"; @import "navbar.less"; -@import "button-groups.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; +@import "labels.less"; +@import "badges.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 "wells.less"; +@import "close.less"; -// Components: Popovers +// Components w/ JavaScript @import "modals.less"; @import "tooltip.less"; @import "popovers.less"; - -// Components: Misc -@import "alerts.less"; -@import "thumbnails.less"; -@import "media.less"; -@import "labels.less"; -@import "badges.less"; -@import "progress-bars.less"; @import "carousel.less"; -@import "jumbotron.less"; // Utility classes @import "utilities.less"; -- cgit v1.2.3