From 2d092dfeea969d82bc55a153c6a597a3e87a0a03 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 16:04:01 -0800 Subject: start playing with carousel stuff --- bootstrap.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'bootstrap.css') diff --git a/bootstrap.css b/bootstrap.css index 333d6f04c..d906168cf 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sat Dec 24 22:30:43 PST 2011 + * Date: Sun Dec 25 21:24:32 PST 2011 */ html, body { margin: 0; @@ -2385,6 +2385,8 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { top: 50%; left: 50%; z-index: 11000; + max-height: 500px; + overflow: auto; width: 560px; margin: -250px 0 0 -250px; background-color: #ffffff; @@ -2662,6 +2664,12 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } +.carousel .item { + display: none; +} +.carousel .active { + display: block; +} .hidden { display: none; visibility: hidden; -- cgit v1.2.3 From 8b58a1c3d9fea740c89f48c1771a6c7dd44e1f41 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 19:13:02 -0800 Subject: placeholder design for carousel --- bootstrap.css | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) (limited to 'bootstrap.css') diff --git a/bootstrap.css b/bootstrap.css index 601c1875b..ae1754aa6 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Mon Jan 2 16:04:30 PST 2012 + * Date: Mon Jan 2 19:12:52 PST 2012 */ html, body { margin: 0; @@ -491,7 +491,7 @@ address { } code, pre { padding: 0 3px 2px; - font-family: Menlo, Monaco, Courier New, monospace; + font-family: Menlo, Monaco, "Courier New", monospace; font-size: 12px; color: #404040; -webkit-border-radius: 3px; @@ -2584,12 +2584,36 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; } +.carousel { + position: relative; +} .carousel .item { display: none; } .carousel .active { display: block; } +.carousel .nav { + 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; +} +.carousel .nav.right { + right: 5px; + left: auto; +} +.carousel .nav:hover { + text-decoration: none; + background: rgba(0, 0, 0, 0.8); +} .hidden { display: none; visibility: hidden; -- cgit v1.2.3 From 3fb6f6ee8670acff0c681c621b87a06a087f94be Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 22:30:57 -0800 Subject: basic carousel implementation --- bootstrap.css | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) (limited to 'bootstrap.css') diff --git a/bootstrap.css b/bootstrap.css index ae1754aa6..b4fd7e748 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Mon Jan 2 19:12:52 PST 2012 + * Date: Mon Jan 2 22:30:09 PST 2012 */ html, body { margin: 0; @@ -2587,13 +2587,48 @@ a.thumbnail:hover { .carousel { position: relative; } +.carousel .carousel-inner { + overflow: hidden; + width: 100%; + position: relative; +} .carousel .item { display: none; + position: relative; + -webkit-transition: 0.25s linear left; + -moz-transition: 0.25s linear left; + -ms-transition: 0.25s linear left; + -o-transition: 0.25s linear left; + transition: 0.25s linear left; } -.carousel .active { +.carousel .active, .carousel .next, .carousel .prev { display: block; } +.carousel .next, .carousel .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel .next { + left: 100%; +} +.carousel .prev { + left: -100%; +} +.carousel .next.left, .carousel .prev.right { + left: 0%; +} +.carousel .active.left { + left: -100%; +} +.carousel .active.right { + left: 100%; +} .carousel .nav { + width: auto; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; height: 50px; position: absolute; top: 50%; -- cgit v1.2.3 From f5bcfaec2c13eb3102ffc2890a69a7c2b725ff36 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 2 Jan 2012 22:33:49 -0800 Subject: ease-in-out slide transition --- bootstrap.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'bootstrap.css') diff --git a/bootstrap.css b/bootstrap.css index b4fd7e748..5413144e9 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Mon Jan 2 22:30:09 PST 2012 + * Date: Mon Jan 2 22:33:44 PST 2012 */ html, body { margin: 0; @@ -2595,11 +2595,11 @@ a.thumbnail:hover { .carousel .item { display: none; position: relative; - -webkit-transition: 0.25s linear left; - -moz-transition: 0.25s linear left; - -ms-transition: 0.25s linear left; - -o-transition: 0.25s linear left; - transition: 0.25s linear left; + -webkit-transition: 0.6s ease-in-out left; + -moz-transition: 0.6s ease-in-out left; + -ms-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; } .carousel .active, .carousel .next, .carousel .prev { display: block; -- cgit v1.2.3