← Back to branch summary

~ubuntu-branches/ubuntu/utopic/horizon/utopic

« back to all changes in this revision

Viewing changes to openstack_dashboard/static/bootstrap/scss/bootstrap/_carousel.scss

  • Committer: Package Import Robot
  • Author(s): Chuck Short
  • Date: 2014-07-25 11:39:09 UTC
  • mfrom: (1.1.42)
  • Revision ID: package-import@ubuntu.com-20140725113909-b8920pdy87itn1ro
Tags: 1:2014.2~b2-0ubuntu1
* New upstream release.
* debian/patches/ubuntu_settings.patch: Refresed
* debian/patches/fix-dashboard-manage.patch: Refreshed
* debian/patches/fix-dashboard-django-wsgi.patch: Refreshed

Show diffs side-by-side

added added

removed removed

Lines of Context:
openstack_dashboard/static/bootstrap/scss/bootstrap/_carousel.scss
 
1
// CAROUSEL
 
2
// --------
 
3
 
 
4
.carousel {
 
5
  position: relative;
 
6
  margin-bottom: $baseLineHeight;
 
7
  line-height: 1;
 
8
}
 
9
 
 
10
.carousel-inner {
 
11
  overflow: hidden;
 
12
  width: 100%;
 
13
  position: relative;
 
14
}
 
15
 
 
16
.carousel {
 
17
 
 
18
  .item {
 
19
    display: none;
 
20
    position: relative;
 
21
    @include transition(.6s ease-in-out left);
 
22
  }
 
23
 
 
24
  // Account for jankitude on images
 
25
  .item > img {
 
26
    display: block;
 
27
    line-height: 1;
 
28
  }
 
29
 
 
30
  .active, .next, .prev { display: block; }
 
31
 
 
32
  .active {
 
33
    left: 0;
 
34
  }
 
35
 
 
36
  .next, .prev {
 
37
    position: absolute;
 
38
    top: 0;
 
39
    width: 100%;
 
40
  }
 
41
 
 
42
  .next {
 
43
    left: 100%;
 
44
  }
 
45
  .prev {
 
46
    left: -100%;
 
47
  }
 
48
  .next.left, .prev.right {
 
49
    left: 0;
 
50
  }
 
51
 
 
52
  .active.left {
 
53
    left: -100%;
 
54
  }
 
55
  .active.right {
 
56
    left: 100%;
 
57
  }
 
58
 
 
59
}
 
60
 
 
61
// Left/right controls for nav
 
62
// ---------------------------
 
63
 
 
64
.carousel-control {
 
65
  position: absolute;
 
66
  top: 40%;
 
67
  left: 15px;
 
68
  width: 40px;
 
69
  height: 40px;
 
70
  margin-top: -20px;
 
71
  font-size: 60px;
 
72
  font-weight: 100;
 
73
  line-height: 30px;
 
74
  color: $white;
 
75
  text-align: center;
 
76
  background: $grayDarker;
 
77
  border: 3px solid $white;
 
78
  @include border-radius(23px);
 
79
  @include opacity(0.5);
 
80
 
 
81
  // we can't have this transition here
 
82
  // because webkit cancels the carousel
 
83
  // animation if you trip this while
 
84
  // in the middle of another animation
 
85
  // ;_;
 
86
  // @include transition(opacity .2s linear);
 
87
 
 
88
  // Reposition the right one
 
89
  &.right {
 
90
    left: auto;
 
91
    right: 15px;
 
92
  }
 
93
 
 
94
  // Hover state
 
95
  &:hover {
 
96
    color: $white;
 
97
    text-decoration: none;
 
98
    @include opacity(0.9);
 
99
  }
 
100
}
 
101
 
 
102
// Caption for text below images
 
103
// -----------------------------
 
104
 
 
105
.carousel-caption {
 
106
  position: absolute;
 
107
  left: 0;
 
108
  right: 0;
 
109
  bottom: 0;
 
110
  padding: 10px 15px 5px;
 
111
  background: $grayDark;
 
112
  background: rgba(0,0,0,.75);
 
113
}
 
114
.carousel-caption h4, .carousel-caption p {
 
115
  color: $white;
 
116
}