← Back to branch summary

~caneypuggies/reformedchurcheslocator/couchapp-backbone

« back to all changes in this revision

Viewing changes to _attachments/js/vendor/bootstrap/less/carousel.less

  • Committer: Tim Black
  • Date: 2013-09-16 22:50:16 UTC
  • Revision ID: tim@alwaysreformed.com-20130916225016-zk8jiba25z33ew7h
Versioned Bower vendor directory

Show diffs side-by-side

added added

removed removed

Lines of Context:
_attachments/js/vendor/bootstrap/less/carousel.less
 
1
//
 
2
// Carousel
 
3
// --------------------------------------------------
 
4
 
 
5
 
 
6
// Wrapper for the slide container and indicators
 
7
.carousel {
 
8
  position: relative;
 
9
}
 
10
 
 
11
.carousel-inner {
 
12
  position: relative;
 
13
  overflow: hidden;
 
14
  width: 100%;
 
15
 
 
16
  > .item {
 
17
    display: none;
 
18
    position: relative;
 
19
    .transition(.6s ease-in-out left);
 
20
 
 
21
    // Account for jankitude on images
 
22
    > img,
 
23
    > a > img {
 
24
      .img-responsive();
 
25
      line-height: 1;
 
26
    }
 
27
  }
 
28
 
 
29
  > .active,
 
30
  > .next,
 
31
  > .prev { display: block; }
 
32
 
 
33
  > .active {
 
34
    left: 0;
 
35
  }
 
36
 
 
37
  > .next,
 
38
  > .prev {
 
39
    position: absolute;
 
40
    top: 0;
 
41
    width: 100%;
 
42
  }
 
43
 
 
44
  > .next {
 
45
    left: 100%;
 
46
  }
 
47
  > .prev {
 
48
    left: -100%;
 
49
  }
 
50
  > .next.left,
 
51
  > .prev.right {
 
52
    left: 0;
 
53
  }
 
54
 
 
55
  > .active.left {
 
56
    left: -100%;
 
57
  }
 
58
  > .active.right {
 
59
    left: 100%;
 
60
  }
 
61
 
 
62
}
 
63
 
 
64
// Left/right controls for nav
 
65
// ---------------------------
 
66
 
 
67
.carousel-control {
 
68
  position: absolute;
 
69
  top: 0;
 
70
  left: 0;
 
71
  bottom: 0;
 
72
  width: @carousel-control-width;
 
73
  .opacity(@carousel-control-opacity);
 
74
  font-size: @carousel-control-font-size;
 
75
  color: @carousel-control-color;
 
76
  text-align: center;
 
77
  text-shadow: @carousel-text-shadow;
 
78
  // We can't have this transition here because webkit cancels the carousel
 
79
  // animation if you trip this while in the middle of another animation.
 
80
 
 
81
  // Set gradients for backgrounds
 
82
  &.left {
 
83
    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
 
84
  }
 
85
  &.right {
 
86
    left: auto;
 
87
    right: 0;
 
88
    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
 
89
  }
 
90
 
 
91
  // Hover/focus state
 
92
  &:hover,
 
93
  &:focus {
 
94
    color: @carousel-control-color;
 
95
    text-decoration: none;
 
96
    .opacity(.9);
 
97
  }
 
98
 
 
99
  // Toggles
 
100
  .icon-prev,
 
101
  .icon-next,
 
102
  .glyphicon-chevron-left,
 
103
  .glyphicon-chevron-right {
 
104
    position: absolute;
 
105
    top: 50%;
 
106
    left: 50%;
 
107
    z-index: 5;
 
108
    display: inline-block;
 
109
  }
 
110
  .icon-prev,
 
111
  .icon-next {
 
112
    width:  20px;
 
113
    height: 20px;
 
114
    margin-top: -10px;
 
115
    margin-left: -10px;
 
116
    font-family: serif;
 
117
  }
 
118
 
 
119
  .icon-prev {
 
120
    &:before {
 
121
      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
 
122
    }
 
123
  }
 
124
  .icon-next {
 
125
    &:before {
 
126
      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
 
127
    }
 
128
  }
 
129
}
 
130
 
 
131
// Optional indicator pips
 
132
//
 
133
// Add an unordered list with the following class and add a list item for each
 
134
// slide your carousel holds.
 
135
 
 
136
.carousel-indicators {
 
137
  position: absolute;
 
138
  bottom: 10px;
 
139
  left: 50%;
 
140
  z-index: 15;
 
141
  width: 60%;
 
142
  margin-left: -30%;
 
143
  padding-left: 0;
 
144
  list-style: none;
 
145
  text-align: center;
 
146
 
 
147
  li {
 
148
    display: inline-block;
 
149
    width:  10px;
 
150
    height: 10px;
 
151
    margin: 1px;
 
152
    text-indent: -999px;
 
153
    border: 1px solid @carousel-indicator-border-color;
 
154
    border-radius: 10px;
 
155
    cursor: pointer;
 
156
  }
 
157
  .active {
 
158
    margin: 0;
 
159
    width:  12px;
 
160
    height: 12px;
 
161
    background-color: @carousel-indicator-active-bg;
 
162
  }
 
163
}
 
164
 
 
165
// Optional captions
 
166
// -----------------------------
 
167
// Hidden by default for smaller viewports
 
168
.carousel-caption {
 
169
  position: absolute;
 
170
  left: 15%;
 
171
  right: 15%;
 
172
  bottom: 20px;
 
173
  z-index: 10;
 
174
  padding-top: 20px;
 
175
  padding-bottom: 20px;
 
176
  color: @carousel-caption-color;
 
177
  text-align: center;
 
178
  text-shadow: @carousel-text-shadow;
 
179
  & .btn {
 
180
    text-shadow: none; // No shadow for button elements in carousel-caption
 
181
  }
 
182
}
 
183
 
 
184
 
 
185
// Scale up controls for tablets and up
 
186
@media screen and (min-width: @screen-tablet) {
 
187
 
 
188
  // Scale up the controls a smidge
 
189
  .carousel-control .icon-prev,
 
190
  .carousel-control .icon-next {
 
191
    width: 30px;
 
192
    height: 30px;
 
193
    margin-top: -15px;
 
194
    margin-left: -15px;
 
195
    font-size: 30px;
 
196
  }
 
197
 
 
198
  // Show and left align the captions
 
199
  .carousel-caption {
 
200
    left: 20%;
 
201
    right: 20%;
 
202
    padding-bottom: 30px;
 
203
  }
 
204
 
 
205
  // Move up the indicators
 
206
  .carousel-indicators {
 
207
    bottom: 20px;
 
208
  }
 
209
}