← Back to branch summary

~ubuntu-branches/ubuntu/saucy/fonts-font-awesome/saucy-proposed

« back to all changes in this revision

Viewing changes to docs/assets/less/twbs-222/carousel.less

  • Committer: Package Import Robot
  • Author(s): Mike Gabriel
  • Date: 2013-04-08 00:34:25 UTC
  • Revision ID: package-import@ubuntu.com-20130408003425-hsmm3w17jtim9el6
Tags: upstream-3.0.2
Import upstream version 3.0.2

Show diffs side-by-side

added added

removed removed

Lines of Context:
docs/assets/less/twbs-222/carousel.less
 
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
}