From 237640c70697ffa0605770dee625d9e3c6abf479 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 23:36:25 -0700 Subject: Drop the accordion for the panel * Deletes the accordion.less file * Extends the panel to be collapsible with our JS plugin * Supports panel color variations --- less/accordion.less | 31 ------------------------------- less/bootstrap.less | 1 - less/mixins.less | 8 ++++++++ less/panels.less | 50 ++++++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 52 insertions(+), 38 deletions(-) delete mode 100644 less/accordion.less (limited to 'less') diff --git a/less/accordion.less b/less/accordion.less deleted file mode 100644 index c3023ac49..000000000 --- a/less/accordion.less +++ /dev/null @@ -1,31 +0,0 @@ -// -// Accordion -// -------------------------------------------------- - - -// Parent container -.accordion { - margin-bottom: @line-height-computed; -} - -// Group == heading + body -.accordion-group { - margin-bottom: 2px; - border: 1px solid @accordion-border-color; - border-radius: @border-radius-base; -} -.accordion-heading { - border-bottom: 0; - - .accordion-toggle { - display: block; - padding: 8px 15px; - cursor: pointer; - } -} - -// Inner needs the styles because you can't animate properly with any styles on the element -.accordion-inner { - padding: 9px 15px; - border-top: 1px solid @accordion-border-color; -} diff --git a/less/bootstrap.less b/less/bootstrap.less index b7f393d7a..accfb92e4 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -55,7 +55,6 @@ @import "labels.less"; @import "badges.less"; @import "progress-bars.less"; -@import "accordion.less"; @import "carousel.less"; @import "jumbotron.less"; diff --git a/less/mixins.less b/less/mixins.less index 24bce6bbf..e6499bf9b 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -335,6 +335,14 @@ color: @heading-text-color; background-color: @heading-bg-color; border-color: @heading-border; + + .panel-collapse .panel-body { + border-top-color: @border; + } + } + .panel-footer { + + .panel-collapse .panel-body { + border-bottom-color: @border; + } } } diff --git a/less/panels.less b/less/panels.less index b78f0796a..063973160 100644 --- a/less/panels.less +++ b/less/panels.less @@ -5,14 +5,18 @@ // Base class .panel { - padding: 15px; - margin-bottom: 20px; + margin-bottom: @line-height-computed; background-color: @panel-bg; border: 1px solid @panel-border; border-radius: @panel-border-radius; .box-shadow(0 1px 1px rgba(0,0,0,.05)); } +// Panel contents +.panel-body { + padding: 15px; +} + // List groups in panels // // By default, space out list group content from panel headings to account for @@ -20,7 +24,7 @@ .panel { .list-group { - margin: 15px -15px -15px; + margin-bottom: 0; .list-group-item { border-width: 1px 0; @@ -38,7 +42,6 @@ } // Collapse space between when there's no additional content. .panel-heading + .list-group { - margin-top: -15px; .list-group-item:first-child { border-top-width: 0; } @@ -46,7 +49,6 @@ // Optional heading .panel-heading { - margin: -15px -15px 15px; padding: 10px 15px; background-color: @panel-heading-bg; border-bottom: 1px solid @panel-border; @@ -65,13 +67,49 @@ // Optional footer (stays gray in every modifier class) .panel-footer { - margin: 15px -15px -15px; padding: 10px 15px; background-color: @panel-footer-bg; border-top: 1px solid @panel-border; .border-bottom-radius(@panel-border-radius - 1); } + +// Collapsable panels (aka, accordion) +// +// Wrap a series of panels in `.panel-group` to turn them into an accordion with +// the help of our collapse JavaScript plugin. + +.panel-group { + // Tighten up margin so it's only between panels + .panel { + margin-bottom: 0; + border-radius: @panel-border-radius; + overflow: hidden; // crop contents when collapsed + + .panel { + margin-top: 5px; + } + } + + .panel-heading { + border-bottom: 0; + + .panel-collapse .panel-body { + border-top: 1px solid @panel-border; + } + } + .panel-footer { + border-top: 0; + + .panel-collapse .panel-body { + border-bottom: 1px solid @panel-border; + } + } + + // New subcomponent for wrapping collapsable content for proper animations + .panel-collapse { + + } +} + + // Contextual variations .panel-primary { .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); -- cgit v1.2.3 From b0ab806dcc3c5d64a80f34acefeb3ac75e860b33 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 23:44:50 -0700 Subject: fix negative indenting in button group for nested button groups --- less/button-groups.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index d9c91252b..28cb90fc1 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -55,7 +55,10 @@ } // Prevent double borders when buttons are next to each other -.btn-group .btn + .btn { +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { margin-left: -1px; } -- cgit v1.2.3 From ea04fa538e7e08db6284d4aeccec3e617909af8e Mon Sep 17 00:00:00 2001 From: ggam Date: Tue, 13 Aug 2013 13:27:45 +0200 Subject: Added pagination-size mixin --- less/mixins.less | 24 ++++++++++++++++++++++++ less/pagination.less | 40 ++-------------------------------------- 2 files changed, 26 insertions(+), 38 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 24bce6bbf..57f1ff24c 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -393,6 +393,30 @@ border-radius: @border-radius; } +// Pagination +// ------------------------- +.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size; @border-radius) { + > li { + > a, + > span { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + } + &:first-child { + > a, + > span { + .border-left-radius(@border-radius); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius); + } + } + } +} + // Labels // ------------------------- .label-variant(@color) { diff --git a/less/pagination.less b/less/pagination.less index 65679beff..12bb71b19 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -63,46 +63,10 @@ // Large .pagination-lg { - > li { - > a, - > span { - padding: @padding-large-vertical @padding-large-horizontal; - font-size: @font-size-large; - } - &:first-child { - > a, - > span { - .border-left-radius(@border-radius-large); - } - } - &:last-child { - > a, - > span { - .border-right-radius(@border-radius-large); - } - } - } + .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large); } // Small .pagination-sm { - > li { - > a, - > span { - padding: @padding-small-vertical @padding-small-horizontal; - font-size: @font-size-small; - } - &:first-child { - > a, - > span { - .border-left-radius(@border-radius-small); - } - } - &:last-child { - > a, - > span { - .border-right-radius(@border-radius-small); - } - } - } + .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small); } -- cgit v1.2.3 From e74ac0723bbb5f8f08d7ee53a6ecbc0ba6933070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= Date: Tue, 13 Aug 2013 14:25:05 +0200 Subject: Fixed errors --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 57f1ff24c..5b74445f1 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -395,7 +395,7 @@ // Pagination // ------------------------- -.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size; @border-radius) { +.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { > li { > a, > span { -- cgit v1.2.3 From f15f259876d77004fadf5b5937af5ab6b5eabb8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 09:59:38 -0700 Subject: derp --- less/button-groups.less | 43 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 35 insertions(+), 8 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 28cb90fc1..0ca9ca851 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -55,11 +55,13 @@ } // Prevent double borders when buttons are next to each other -.btn-group .btn + .btn, -.btn-group .btn + .btn-group, -.btn-group .btn-group + .btn, -.btn-group .btn-group + .btn-group { - margin-left: -1px; +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -1px; + } } // Optional: Group multiple button groups together for a toolbar @@ -166,26 +168,51 @@ // Vertical button groups // ---------------------- -.btn-group-vertical > .btn { +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group { display: block; float: none; width: 100%; max-width: 100%; - + .btn { +} +.btn-group-vertical { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { margin-top: -1px; + margin-left: 0; } } -.btn-group-vertical .btn { + +.btn-group-vertical > .btn { &:not(:first-child):not(:last-child) { border-radius: 0; } &:first-child:not(:last-child) { + border-top-right-radius: @border-radius-base; .border-bottom-radius(0); } &:last-child:not(:first-child) { + border-bottom-left-radius: @border-radius-base; .border-top-radius(0); } } +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child { + > .btn:last-child, + > .dropdown-toggle { + border-top-right-radius: @border-radius-base; + .border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child > .btn:first-child { + border-bottom-left-radius: @border-radius-base; + .border-top-radius(0); +} + // Justified button groups -- cgit v1.2.3 From 6ec0fd7d43d1ab243a8796b7544a4634ef086117 Mon Sep 17 00:00:00 2001 From: ggam Date: Tue, 13 Aug 2013 19:06:02 +0200 Subject: Added input-size mixin --- less/forms.less | 36 +++--------------------------------- less/mixins.less | 23 +++++++++++++++++++++++ 2 files changed, 26 insertions(+), 33 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index af575db22..18d3efb54 100644 --- a/less/forms.less +++ b/less/forms.less @@ -208,43 +208,13 @@ input[type="number"] { } - // Form control sizing -// -// Relative text size, padding, and border-radii changes for form controls. For -// horizontal sizing, wrap controls in the predefined grid classes. `` +// element gets special love because it's special, and that's a fact! + +.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + height: @input-height; + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; + + select& { + height: @input-height; + line-height: @input-height; + } + + textarea& { + height: auto; + } +} -- cgit v1.2.3 From 69a3e9b4d07cdaa281525c067f11ea83e1863f1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 10:24:18 -0700 Subject: enable button groups in vertical button groups --- less/button-groups.less | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 0ca9ca851..adaad3f80 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -168,18 +168,27 @@ // Vertical button groups // ---------------------- -.btn-group-vertical > .btn, -.btn-group-vertical > .btn-group { - display: block; - float: none; - width: 100%; - max-width: 100%; -} .btn-group-vertical { - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { + > .btn, + > .btn-group { + display: block; + float: none; + width: 100%; + max-width: 100%; + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + .clearfix(); + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } @@ -204,12 +213,10 @@ .btn-group-vertical > .btn-group:first-child { > .btn:last-child, > .dropdown-toggle { - border-top-right-radius: @border-radius-base; .border-bottom-radius(0); } } .btn-group-vertical > .btn-group:last-child > .btn:first-child { - border-bottom-left-radius: @border-radius-base; .border-top-radius(0); } -- cgit v1.2.3 From 270af4dda31692eb22d48d56db5c98a0c89f4c28 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 13:16:56 -0700 Subject: fixes #9431: specify font-size in dropdown menus to avoid inheritance issues --- less/dropdowns.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index af14bf9e9..055d76717 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -33,6 +33,7 @@ padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; + font-size: @font-size-base; background-color: @dropdown-bg; border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; -- cgit v1.2.3