From a27ecfccf301f8996d7ddf6bd6f7f46f358a5a31 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Jul 2013 17:32:07 -0700 Subject: [PATCH] Make more components mixin-friendly --- docs/assets/css/bootstrap.css | 18 +++----- less/accordion.less | 13 +++--- less/alerts.less | 15 +++---- less/carousel.less | 14 +------ less/close.less | 20 ++++----- less/labels.less | 6 +-- less/list-group.less | 77 ++++++++++++++++------------------- 7 files changed, 69 insertions(+), 94 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index c76723b999..e721aaa80f 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2326,6 +2326,11 @@ input[type="button"].btn-block { border-bottom-left-radius: 4px; } +.list-group-item > .badge { + float: right; + margin-right: -15px; +} + .list-group-item-heading { margin-top: 0; margin-bottom: 5px; @@ -2365,16 +2370,6 @@ a.list-group-item.active .list-group-item-text { color: #e1edf7; } -.list-group-item > .badge, -.list-group-item > .glyphicon-chevron-right { - float: right; - margin-right: -15px; -} - -.list-group-item > .glyphicon + .badge { - margin-right: 5px; -} - .panel { padding: 15px; margin-bottom: 20px; @@ -4279,9 +4274,6 @@ a.list-group-item.active > .badge, .accordion-heading .accordion-toggle { display: block; padding: 8px 15px; -} - -.accordion-toggle { cursor: pointer; } diff --git a/less/accordion.less b/less/accordion.less index 59765f1540..0d18978317 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -16,15 +16,12 @@ } .accordion-heading { border-bottom: 0; -} -.accordion-heading .accordion-toggle { - display: block; - padding: 8px 15px; -} -// General toggle styles -.accordion-toggle { - cursor: pointer; + .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 diff --git a/less/alerts.less b/less/alerts.less index 24b7911437..596734152b 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -82,11 +82,12 @@ .alert-block { padding-top: 15px; padding-bottom: 15px; -} -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; -} -.alert-block p + p { - margin-top: 5px; + + > p, + > ul { + margin-bottom: 0; + } + p + p { + margin-top: 5px; + } } diff --git a/less/carousel.less b/less/carousel.less index 13159db41f..d0f636cf8a 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -8,15 +8,10 @@ position: relative; } -// Wrap all slides, but only show the active one .carousel-inner { position: relative; overflow: hidden; width: 100%; -} - -// Immediate parent of all slides -.carousel-inner { > .item { display: none; @@ -80,13 +75,8 @@ color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); - - // we can't have this transition here - // because webkit cancels the carousel - // animation if you trip this while - // in the middle of another animation - // ;_; - // .transition(opacity .2s linear); + // We can't have this transition here because webkit cancels the carousel + // animation if you trip this while in the middle of another animation. // Set gradients for backgrounds &.left { diff --git a/less/close.less b/less/close.less index e879da4d62..5fe23b3dc8 100644 --- a/less/close.less +++ b/less/close.less @@ -19,15 +19,15 @@ cursor: pointer; .opacity(.5); } -} -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -button.close { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; + // Additional properties for button version + // iOS requires the button element instead of an anchor tag. + // If you want the anchor version, it requires `href="#"`. + button& { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + } } diff --git a/less/labels.less b/less/labels.less index 92fe8f89e2..3d863f7dfc 100644 --- a/less/labels.less +++ b/less/labels.less @@ -15,7 +15,7 @@ background-color: @gray-light; border-radius: .25em; - // Add hover effects, but only for links + // Add hover effects, but only for links &[href] { &:hover, &:focus { @@ -32,7 +32,7 @@ .label-danger { background-color: @label-danger-bg; &[href] { - &:hover, + &:hover, &:focus { background-color: darken(@label-danger-bg, 10%); } @@ -67,4 +67,4 @@ background-color: darken(@label-info-bg, 10%); } } -} \ No newline at end of file +} diff --git a/less/list-group.less b/less/list-group.less index f9d9f612cd..34718633ac 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -22,16 +22,22 @@ // Place the border on the list items and negative margin up for better styling margin-bottom: -1px; border: 1px solid @list-group-border; -} -// Round the first and last items -.list-group-item:first-child { - .border-top-radius(@border-radius-base); -} -.list-group-item:last-child { - margin-bottom: 0; - .border-bottom-radius(@border-radius-base); -} + // Round the first and last items + &:first-child { + .border-top-radius(@border-radius-base); + } + &:last-child { + margin-bottom: 0; + .border-bottom-radius(@border-radius-base); + } + + // Align badges within list items + > .badge { + float: right; + margin-right: -15px; + } +} // Custom content options // ------------------------- @@ -50,45 +56,34 @@ // Custom content within linked items a.list-group-item { + // Colorize content accordingly .list-group-item-heading { color: #333; } .list-group-item-text { color: #555; } -} -// Hover state -a.list-group-item:hover, -a.list-group-item:focus { - text-decoration: none; - background-color: @list-group-hover-bg; -} - -// Active class on item itself, not parent -a.list-group-item.active { - z-index: 2; // Place active items above their siblings for proper border styling - color: @list-group-active-color; - background-color: @list-group-active-bg; - border-color: @list-group-active-border; - - // Force color to inherit for custom content - .list-group-item-heading { - color: inherit; + // Hover state + &:hover, + &:focus { + text-decoration: none; + background-color: @list-group-hover-bg; } - .list-group-item-text { - color: lighten(@list-group-active-bg, 40%); + + // Active class on item itself, not parent + &.active { + z-index: 2; // Place active items above their siblings for proper border styling + color: @list-group-active-color; + background-color: @list-group-active-bg; + border-color: @list-group-active-border; + + // Force color to inherit for custom content + .list-group-item-heading { + color: inherit; + } + .list-group-item-text { + color: lighten(@list-group-active-bg, 40%); + } } } - -// Chevrons and badges within list items -// ------------------------- - -.list-group-item > .badge, -.list-group-item > .glyphicon-chevron-right { - float: right; - margin-right: -15px; -} -.list-group-item > .glyphicon + .badge { - margin-right: 5px; -}