diff options
| author | Mark Otto <[email protected]> | 2012-01-15 18:40:17 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-01-15 18:40:17 -0800 |
| commit | f48278dac6ac89fcf9d1ab7526ec3029dd1a4d8e (patch) | |
| tree | abd4404da5b0243263082e8a70ad874d10a42f5c /lib | |
| parent | c02501e1b714ebb44c560483316ac36c4f709c50 (diff) | |
| download | bootstrap-f48278dac6ac89fcf9d1ab7526ec3029dd1a4d8e.tar.xz bootstrap-f48278dac6ac89fcf9d1ab7526ec3029dd1a4d8e.zip | |
updated accordion and carousel; accordion still needs work
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/accordion.less | 21 | ||||
| -rw-r--r-- | lib/bootstrap.less | 1 | ||||
| -rw-r--r-- | lib/carousel.less | 115 |
3 files changed, 106 insertions, 31 deletions
diff --git a/lib/accordion.less b/lib/accordion.less new file mode 100644 index 000000000..babbe85f9 --- /dev/null +++ b/lib/accordion.less @@ -0,0 +1,21 @@ +// ACCORDION +// --------- + +.accordion { + padding: 0; +} +.accordion-heading { + padding: 5px 10px; + border: 1px solid #ddd; +} +.accordion-body { + padding: 10px; + margin-left: 0; + margin-bottom: @baseLineHeight / 2; + border: 1px solid #ddd; + border-top: 0; + display: none; +} +.accordion .in { + display: block; +} diff --git a/lib/bootstrap.less b/lib/bootstrap.less index db5ed61f7..fec87a339 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -52,6 +52,7 @@ @import "thumbnails.less"; @import "labels.less"; @import "progress-bars.less"; +@import "accordion.less"; @import "carousel.less"; // Utility classes diff --git a/lib/carousel.less b/lib/carousel.less index 0cfb0127a..a9399ef63 100644 --- a/lib/carousel.less +++ b/lib/carousel.less @@ -2,14 +2,17 @@ // -------- .carousel { + position: relative; + line-height: 1; +} +.carousel-inner { + overflow: hidden; + width: 100%; position: relative; +} - .carousel-inner { - overflow: hidden; - width: 100%; - position: relative; - } +.carousel { .item { display: none; @@ -17,38 +20,88 @@ .transition(.6s ease-in-out left); } - .active, .next, .prev { display: block; } + .active, + .next, + .prev { display: block; } - .active { left: 0 } + .active { + left: 0; + } - .next, .prev { + .next, + .prev { position: absolute; top: 0; width: 100%; } - .next { left: 100%; } - .prev { left: -100%; } - .next.left, .prev.right { left: 0% } + .next { + left: 100%; + } + .prev { + left: -100%; + } + .next.left, + .prev.right { + left: 0; + } + + .active.left { + left: -100%; + } + .active.right { + left: 100%; + } - .active.left { left: -100% } - .active.right { left: 100% } +} - .nav { - width: auto; - .border-radius(0); - height: 50px; - position: absolute; - top: 50%; - margin: -25px 0 0; - cursor: pointer; - background: rgba(0, 0, 0, 0.7); - color: white; - font-size: 42px; - left: 5px; - font-weight: 100; - padding: 0 15px; - &.right { right: 5px; left: auto; } - &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); } - } -}
\ No newline at end of file +// Left/right controls for nav +// --------------------------- + +.carousel-control { + position: absolute; + top: 40%; + left: 15px; + width: 40px; + height: 40px; + margin-top: -20px; + font-size: 60px; + font-weight: 100; + line-height: 30px; + color: #ccc; + text-align: center; + background: #999; + background: rgba(0,0,0,.5); + .border-radius(20px); + + // Reposition the right one + &.right { + left: auto; + right: 15px; + } + + // Hover state + &:hover { + color: #fff; + text-decoration: none; + background: #333; + background: rgba(0,0,0,.75); + } +} + +// Caption for text below images +// ----------------------------- + +.carousel-caption { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 10px 15px 5px; + background: #333; + background: rgba(0,0,0,.75); +} +.carousel-caption h4, +.carousel-caption p { + color: #fff; +} |
