← Back to branch summary

~openerp-dev/openerp-web/trunk-customfilter-jir

« back to all changes in this revision

Viewing changes to addons/web/static/lib/bootstrap/stylesheets/bootstrap/_carousel.scss

  • Committer: Vidhin Mehta (OpenERP)
  • Date: 2014-04-21 05:26:17 UTC
  • mfrom: (3747.2.239 trunk)
  • Revision ID: vme@tinyerp.com-20140421052617-spns3fo5ryybbwhx
[MERGE]Trunk.

Show diffs side-by-side

added added

removed removed

Lines of Context:
addons/web/static/lib/bootstrap/stylesheets/bootstrap/_carousel.scss
 
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
    @include transition(.6s ease-in-out left);
 
20
 
 
21
    // Account for jankitude on images
 
22
    > img,
 
23
    > a > img {
 
24
      @include 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
  @include 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
    @include 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
    @include 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
    outline: none;
 
95
    color: $carousel-control-color;
 
96
    text-decoration: none;
 
97
    @include opacity(.9);
 
98
  }
 
99
 
 
100
  // Toggles
 
101
  .icon-prev,
 
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
 
 
144
.carousel-indicators {
 
145
  position: absolute;
 
146
  bottom: 10px;
 
147
  left: 50%;
 
148
  z-index: 15;
 
149
  width: 60%;
 
150
  margin-left: -30%;
 
151
  padding-left: 0;
 
152
  list-style: none;
 
153
  text-align: center;
 
154
 
 
155
  li {
 
156
    display: inline-block;
 
157
    width:  10px;
 
158
    height: 10px;
 
159
    margin: 1px;
 
160
    text-indent: -999px;
 
161
    border: 1px solid $carousel-indicator-border-color;
 
162
    border-radius: 10px;
 
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
 
175
  }
 
176
  .active {
 
177
    margin: 0;
 
178
    width:  12px;
 
179
    height: 12px;
 
180
    background-color: $carousel-indicator-active-bg;
 
181
  }
 
182
}
 
183
 
 
184
// Optional captions
 
185
// -----------------------------
 
186
// Hidden by default for smaller viewports
 
187
.carousel-caption {
 
188
  position: absolute;
 
189
  left: 15%;
 
190
  right: 15%;
 
191
  bottom: 20px;
 
192
  z-index: 10;
 
193
  padding-top: 20px;
 
194
  padding-bottom: 20px;
 
195
  color: $carousel-caption-color;
 
196
  text-align: center;
 
197
  text-shadow: $carousel-text-shadow;
 
198
  & .btn {
 
199
    text-shadow: none; // No shadow for button elements in carousel-caption
 
200
  }
 
201
}
 
202
 
 
203
 
 
204
// Scale up controls for tablets and up
 
205
@media screen and (min-width: $screen-sm-min) {
 
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
}