Mercurial > wikked

comparison static/bootstrap/less/carousel.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
1 //
2 // Carousel
3 // --------------------------------------------------
4
5
6 .carousel {
7 position: relative;
8 margin-bottom: @baseLineHeight;
9 line-height: 1;
10 }
11
12 .carousel-inner {
13 overflow: hidden;
14 width: 100%;
15 position: relative;
16 }
17
18 .carousel-inner {
19
20 > .item {
21 display: none;
22 position: relative;
23 .transition(.6s ease-in-out left);
24 }
25
26 // Account for jankitude on images
27 > .item > img {
28 display: block;
29 line-height: 1;
30 }
31
32 > .active,
33 > .next,
34 > .prev { display: block; }
35
36 > .active {
37 left: 0;
38 }
39
40 > .next,
41 > .prev {
42 position: absolute;
43 top: 0;
44 width: 100%;
45 }
46
47 > .next {
48 left: 100%;
49 }
50 > .prev {
51 left: -100%;
52 }
53 > .next.left,
54 > .prev.right {
55 left: 0;
56 }
57
58 > .active.left {
59 left: -100%;
60 }
61 > .active.right {
62 left: 100%;
63 }
64
65 }
66
67 // Left/right controls for nav
68 // ---------------------------
69
70 .carousel-control {
71 position: absolute;
72 top: 40%;
73 left: 15px;
74 width: 40px;
75 height: 40px;
76 margin-top: -20px;
77 font-size: 60px;
78 font-weight: 100;
79 line-height: 30px;
80 color: @white;
81 text-align: center;
82 background: @grayDarker;
83 border: 3px solid @white;
84 .border-radius(23px);
85 .opacity(50);
86
87 // we can't have this transition here
88 // because webkit cancels the carousel
89 // animation if you trip this while
90 // in the middle of another animation
91 // ;_;
92 // .transition(opacity .2s linear);
93
94 // Reposition the right one
95 &.right {
96 left: auto;
97 right: 15px;
98 }
99
100 // Hover state
101 &:hover {
102 color: @white;
103 text-decoration: none;
104 .opacity(90);
105 }
106 }
107
108
109 // Caption for text below images
110 // -----------------------------
111
112 .carousel-caption {
113 position: absolute;
114 left: 0;
115 right: 0;
116 bottom: 0;
117 padding: 15px;
118 background: @grayDark;
119 background: rgba(0,0,0,.75);
120 }
121 .carousel-caption h4,
122 .carousel-caption p {
123 color: @white;
124 line-height: @baseLineHeight;
125 }
126 .carousel-caption h4 {
127 margin: 0 0 5px;
128 }
129 .carousel-caption p {
130 margin-bottom: 0;
131 }