Mercurial > wikked

comparison static/bootstrap/less/carousel.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Carousel 2 // Carousel
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // Wrapper for the slide container and indicators
6 .carousel { 7 .carousel {
7 position: relative; 8 position: relative;
8 margin-bottom: @baseLineHeight;
9 line-height: 1;
10 } 9 }
11 10
12 .carousel-inner { 11 .carousel-inner {
12 position: relative;
13 overflow: hidden; 13 overflow: hidden;
14 width: 100%; 14 width: 100%;
15 position: relative;
16 }
17
18 .carousel-inner {
19 15
20 > .item { 16 > .item {
21 display: none; 17 display: none;
22 position: relative; 18 position: relative;
23 .transition(.6s ease-in-out left); 19 .transition(.6s ease-in-out left);
24 20
25 // Account for jankitude on images 21 // Account for jankitude on images
26 > img, 22 > img,
27 > a > img { 23 > a > img {
28 display: block; 24 .img-responsive();
29 line-height: 1; 25 line-height: 1;
30 } 26 }
31 } 27 }
32 28
33 > .active, 29 > .active,
68 // Left/right controls for nav 64 // Left/right controls for nav
69 // --------------------------- 65 // ---------------------------
70 66
71 .carousel-control { 67 .carousel-control {
72 position: absolute; 68 position: absolute;
73 top: 40%; 69 top: 0;
74 left: 15px; 70 left: 0;
75 width: 40px; 71 bottom: 0;
76 height: 40px; 72 width: @carousel-control-width;
77 margin-top: -20px; 73 .opacity(@carousel-control-opacity);
78 font-size: 60px; 74 font-size: @carousel-control-font-size;
79 font-weight: 100; 75 color: @carousel-control-color;
80 line-height: 30px;
81 color: @white;
82 text-align: center; 76 text-align: center;
83 background: @grayDarker; 77 text-shadow: @carousel-text-shadow;
84 border: 3px solid @white; 78 // We can't have this transition here because WebKit cancels the carousel
85 .border-radius(23px); 79 // animation if you trip this while in the middle of another animation.
86 .opacity(50); 80
87 81 // Set gradients for backgrounds
88 // we can't have this transition here 82 &.left {
89 // because webkit cancels the carousel 83 #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
90 // animation if you trip this while 84 }
91 // in the middle of another animation
92 // ;_;
93 // .transition(opacity .2s linear);
94
95 // Reposition the right one
96 &.right { 85 &.right {
97 left: auto; 86 left: auto;
98 right: 15px; 87 right: 0;
88 #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
99 } 89 }
100 90
101 // Hover/focus state 91 // Hover/focus state
102 &:hover, 92 &:hover,
103 &:focus { 93 &:focus {
104 color: @white; 94 outline: none;
95 color: @carousel-control-color;
105 text-decoration: none; 96 text-decoration: none;
106 .opacity(90); 97 .opacity(.9);
107 } 98 }
108 } 99
109 100 // Toggles
110 // Carousel indicator pips 101 .icon-prev,
111 // ----------------------------- 102 .icon-next,
103 .glyphicon-chevron-left,
104 .glyphicon-chevron-right {
105 position: absolute;
106 top: 50%;
107 z-index: 5;
108 display: inline-block;
109 }
110 .icon-prev,
111 .glyphicon-chevron-left {
112 left: 50%;
113 }
114 .icon-next,
115 .glyphicon-chevron-right {
116 right: 50%;
117 }
118 .icon-prev,
119 .icon-next {
120 width: 20px;
121 height: 20px;
122 margin-top: -10px;
123 margin-left: -10px;
124 font-family: serif;
125 }
126
127 .icon-prev {
128 &:before {
129 content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
130 }
131 }
132 .icon-next {
133 &:before {
134 content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
135 }
136 }
137 }
138
139 // Optional indicator pips
140 //
141 // Add an unordered list with the following class and add a list item for each
142 // slide your carousel holds.
143
112 .carousel-indicators { 144 .carousel-indicators {
113 position: absolute; 145 position: absolute;
114 top: 15px; 146 bottom: 10px;
115 right: 15px; 147 left: 50%;
116 z-index: 5; 148 z-index: 15;
117 margin: 0; 149 width: 60%;
150 margin-left: -30%;
151 padding-left: 0;
118 list-style: none; 152 list-style: none;
153 text-align: center;
119 154
120 li { 155 li {
121 display: block; 156 display: inline-block;
122 float: left; 157 width: 10px;
123 width: 10px;
124 height: 10px; 158 height: 10px;
125 margin-left: 5px; 159 margin: 1px;
126 text-indent: -999px; 160 text-indent: -999px;
127 background-color: #ccc; 161 border: 1px solid @carousel-indicator-border-color;
128 background-color: rgba(255,255,255,.25); 162 border-radius: 10px;
129 border-radius: 5px; 163 cursor: pointer;
164
165 // IE8-9 hack for event handling
166 //
167 // Internet Explorer 8-9 does not support clicks on elements without a set
168 // `background-color`. We cannot use `filter` since that's not viewed as a
169 // background color by the browser. Thus, a hack is needed.
170 //
171 // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
172 // set alpha transparency for the best results possible.
173 background-color: #000 \9; // IE8
174 background-color: rgba(0,0,0,0); // IE9
130 } 175 }
131 .active { 176 .active {
132 background-color: #fff; 177 margin: 0;
133 } 178 width: 12px;
134 } 179 height: 12px;
135 180 background-color: @carousel-indicator-active-bg;
136 // Caption for text below images 181 }
182 }
183
184 // Optional captions
137 // ----------------------------- 185 // -----------------------------
138 186 // Hidden by default for smaller viewports
139 .carousel-caption { 187 .carousel-caption {
140 position: absolute; 188 position: absolute;
141 left: 0; 189 left: 15%;
142 right: 0; 190 right: 15%;
143 bottom: 0; 191 bottom: 20px;
144 padding: 15px; 192 z-index: 10;
145 background: @grayDark; 193 padding-top: 20px;
146 background: rgba(0,0,0,.75); 194 padding-bottom: 20px;
147 } 195 color: @carousel-caption-color;
148 .carousel-caption h4, 196 text-align: center;
149 .carousel-caption p { 197 text-shadow: @carousel-text-shadow;
150 color: @white; 198 & .btn {
151 line-height: @baseLineHeight; 199 text-shadow: none; // No shadow for button elements in carousel-caption
152 } 200 }
153 .carousel-caption h4 { 201 }
154 margin: 0 0 5px; 202
155 } 203
156 .carousel-caption p { 204 // Scale up controls for tablets and up
157 margin-bottom: 0; 205 @media screen and (min-width: @screen-sm-min) {
158 } 206
207 // Scale up the controls a smidge
208 .carousel-control {
209 .glyphicons-chevron-left,
210 .glyphicons-chevron-right,
211 .icon-prev,
212 .icon-next {
213 width: 30px;
214 height: 30px;
215 margin-top: -15px;
216 margin-left: -15px;
217 font-size: 30px;
218 }
219 }
220
221 // Show and left align the captions
222 .carousel-caption {
223 left: 20%;
224 right: 20%;
225 padding-bottom: 30px;
226 }
227
228 // Move up the indicators
229 .carousel-indicators {
230 bottom: 20px;
231 }
232 }