mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Merge branch '2.0-wip' of github.com:twitter/bootstrap into 2.0-wip
Conflicts: bootstrap.css
This commit is contained in:
Mark Otto
commit
bdc22e71c8
71
bootstrap.css
vendored
71
bootstrap.css
vendored
@ -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: Thu Jan 5 01:33:17 PST 2012
|
||||
* Date: Thu Jan 5 01:36:56 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;
|
||||
@ -2587,6 +2587,8 @@ i {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11000;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
width: 560px;
|
||||
margin: -250px 0 0 -250px;
|
||||
background-color: #ffffff;
|
||||
@ -2908,6 +2910,71 @@ a.thumbnail:hover {
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
}
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
.carousel .carousel-inner {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.carousel .item {
|
||||
display: none;
|
||||
position: relative;
|
||||
-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;
|
||||
}
|
||||
.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%;
|
||||
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;
|
||||
|
||||
15
bootstrap.min.css
vendored
15
bootstrap.min.css
vendored
@ -87,7 +87,7 @@ blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}bloc
|
||||
blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
|
||||
blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
|
||||
address{display:block;margin-bottom:18px;line-height:18px;}
|
||||
code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Courier New, monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
|
||||
code{padding:1px 3px;background-color:#fee9cc;}
|
||||
pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
|
||||
pre code{padding:0;background-color:transparent;}
|
||||
@ -396,7 +396,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
.pagination.centered{text-align:center;}
|
||||
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
|
||||
.modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
|
||||
.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
|
||||
.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
|
||||
.modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
|
||||
.modal.fade.in{top:50%;}
|
||||
.modal-header{padding:5px 15px;border-bottom:1px solid #eee;}
|
||||
@ -442,5 +442,16 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
|
||||
a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
|
||||
.thumbnail>img{display:block;max-width:100%;}
|
||||
.thumbnail .caption{padding:9px;}
|
||||
.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;}
|
||||
.carousel .item{display:none;position:relative;-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;}
|
||||
.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%;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;}
|
||||
@media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
|
||||
|
||||
@ -117,6 +117,10 @@
|
||||
<td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td>
|
||||
<td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td>
|
||||
<td>A plugin for rotating through elements. A merry-go-round.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Is javascript necessary?</h3>
|
||||
@ -720,7 +724,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
|
||||
<table class="zebra-striped">
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event</th>
|
||||
@ -1002,6 +1006,110 @@ $('#myCollapsible').on('hidden', function () {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Carousel
|
||||
================================================== -->
|
||||
|
||||
<section id="carousel">
|
||||
<div class="page-header">
|
||||
<h1>Carousel <small>bootstrap-carousel.js</small></h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<p>A generic plugin for cycling through elements. A merry-go-round.</p>
|
||||
<a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h3>Using bootstrap-carousel.js</h3>
|
||||
<pre class="prettyprint linenums">$('.carousel').carousel()</pre>
|
||||
<h3>Options</h3>
|
||||
<table class="bordered-table striped-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>interval</td>
|
||||
<td>number</td>
|
||||
<td>5000</td>
|
||||
<td>The amount of type to delay between automatically cycling an item.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Markup</h3>
|
||||
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="thumbnail carousel">
|
||||
|
||||
<!-- items -->
|
||||
<div class="carousel-inner">…</div>
|
||||
|
||||
<!-- navigation -->
|
||||
<a class="nav" href="#myCarousel" data-slide="next">&lt;</a>
|
||||
<a class="nav" href="#myCarousel" data-slide="prev">&gt;</a>
|
||||
|
||||
</div>
|
||||
</pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>.carousel(options)</h4>
|
||||
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('.myCarousel').carousel({
|
||||
interval: 2000
|
||||
})</pre>
|
||||
<h4>.carousel('cycle')</h4>
|
||||
<p>Cycles through the carousel items from left to right.</p>
|
||||
<h4>.carousel('pause')</h4>
|
||||
<p>Stops the carousel from cycling through items.</p>
|
||||
<h4>.carousel('prev')</h4>
|
||||
<p>Cycles to the previous item.</p>
|
||||
<h4>.carousel('next')</h4>
|
||||
<p>Cycles to the next item.</p>
|
||||
<h3>Demo</h3>
|
||||
|
||||
<!-- carousel -->
|
||||
|
||||
<div id="myCarousel" class="thumbnail carousel slide">
|
||||
|
||||
<div class="carousel-inner">
|
||||
<div class="item active">
|
||||
<img src="http://placehold.it/1100x400" alt="">
|
||||
<div class="caption">
|
||||
<h5>First Thumbnail label</h5>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="http://placehold.it/1100x400" alt="">
|
||||
<div class="caption">
|
||||
<h5>Second Thumbnail label</h5>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="http://placehold.it/1100x400" alt="">
|
||||
<div class="caption">
|
||||
<h5>Third Thumbnail label</h5>
|
||||
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="left nav" href="#myCarousel" data-slide="prev">«</a>
|
||||
<a class="right nav" href="#myCarousel" data-slide="next">»</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
@ -1028,6 +1136,7 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<script src="../js/bootstrap-popover.js"></script>
|
||||
<script src="../js/bootstrap-button.js"></script>
|
||||
<script src="../js/bootstrap-collapse.js"></script>
|
||||
<script src="../js/bootstrap-carousel.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
@ -1036,13 +1145,14 @@ $('#myCollapsible').on('hidden', function () {
|
||||
selector: "a[rel=twipsy]"
|
||||
})
|
||||
|
||||
//popover demo
|
||||
// popover demo
|
||||
$("a[rel=popover]")
|
||||
.popover()
|
||||
.click(function(e) {
|
||||
e.preventDefault()
|
||||
})
|
||||
|
||||
// button state demo
|
||||
$('#fat-btn')
|
||||
.click(function () {
|
||||
var btn = $(this)
|
||||
@ -1051,6 +1161,9 @@ $('#myCollapsible').on('hidden', function () {
|
||||
btn.button('reset')
|
||||
}, 3000)
|
||||
})
|
||||
|
||||
// carousel demo
|
||||
$('#myCarousel').carousel()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
78
js/bootstrap-carousel.js
vendored
78
js/bootstrap-carousel.js
vendored
@ -25,12 +25,63 @@
|
||||
/* CAROUSEL CLASS DEFINITION
|
||||
* ========================= */
|
||||
|
||||
var Carousel = function () {
|
||||
|
||||
var Carousel = function (element, options) {
|
||||
this.$element = $(element)
|
||||
this.options = $.extend({}, $.fn.carousel.defaults, options)
|
||||
this.options.slide && this.slide(this.options.slide)
|
||||
}
|
||||
|
||||
Carousel.prototype = {
|
||||
|
||||
cycle: function () {
|
||||
this.interval = setInterval($.proxy(this.next, this), this.options.interval)
|
||||
return this
|
||||
}
|
||||
|
||||
, pause: function () {
|
||||
clearInterval(this.interval)
|
||||
return this
|
||||
}
|
||||
|
||||
, next: function () {
|
||||
return this.slide('next')
|
||||
}
|
||||
|
||||
, prev: function () {
|
||||
return this.slide('prev')
|
||||
}
|
||||
|
||||
, slide: function (type) {
|
||||
var $active = this.$element.find('.active')
|
||||
, $next = $active[type]()
|
||||
, isCycling = this.interval
|
||||
, direction = type == 'next' ? 'left' : 'right'
|
||||
, fallback = type == 'next' ? 'first' : 'last'
|
||||
, that = this
|
||||
|
||||
isCycling && this.pause()
|
||||
|
||||
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
|
||||
|
||||
if (!$.support.transition && this.$element.hasClass('slide')) {
|
||||
$active.removeClass('active')
|
||||
$next.addClass('active')
|
||||
} else {
|
||||
$next.addClass(type)
|
||||
$next[0].offsetWidth // force reflow
|
||||
$active.addClass(direction)
|
||||
$next.addClass(direction)
|
||||
this.$element.one($.support.transition.end, function () {
|
||||
$next.removeClass([type, direction].join(' ')).addClass('active')
|
||||
$active.removeClass(['active', direction].join(' '))
|
||||
})
|
||||
}
|
||||
|
||||
isCycling && this.cycle()
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -41,11 +92,30 @@
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('carousel')
|
||||
if (!data) $this.data('carousel', (data = new Carousel(this)))
|
||||
if (typeof option == 'string') data[option].call($this)
|
||||
, options = typeof option == 'object' && option
|
||||
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
|
||||
if (typeof option == 'string' || (option = options.slide)) data[option]()
|
||||
else data.cycle()
|
||||
})
|
||||
}
|
||||
|
||||
$.fn.carousel.defaults = {
|
||||
interval: 5000
|
||||
}
|
||||
|
||||
$.fn.carousel.Constructor = Carousel
|
||||
|
||||
|
||||
/* CAROUSEL DATA-API
|
||||
* ================= */
|
||||
|
||||
$(function () {
|
||||
$('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
|
||||
var $this = $(this)
|
||||
, $target = $($this.attr('data-target') || $this.attr('href'))
|
||||
, options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
|
||||
$target.carousel(options)
|
||||
})
|
||||
})
|
||||
|
||||
}( window.jQuery )
|
||||
@ -60,7 +60,7 @@
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
.monospace() {
|
||||
font-family: Menlo, Monaco, Courier New, monospace;
|
||||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||||
}
|
||||
}
|
||||
.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
||||
|
||||
@ -23,6 +23,8 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 11000;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
width: 560px;
|
||||
margin: -250px 0 0 -250px;
|
||||
background-color: @white;
|
||||
|
||||
@ -32,3 +32,53 @@ a.thumbnail:hover {
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
|
||||
position: relative;
|
||||
|
||||
.carousel-inner {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: none;
|
||||
position: relative;
|
||||
.transition(.6s ease-in-out left);
|
||||
}
|
||||
|
||||
.active, .next, .prev { display: block; }
|
||||
|
||||
.next, .prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.next { left: 100%; }
|
||||
.prev { left: -100%; }
|
||||
.next.left, .prev.right { left: 0% }
|
||||
|
||||
.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); }
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user