Mercurial > wikked

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