scala-news-reader
rss/atom news reader in scala
git clone https://9o.is/git/scala-news-reader.git
carousel.less
(2482B)
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 // Account for jankitude on images
26 > img,
27 > a > img {
28 display: block;
29 line-height: 1;
30 }
31 }
32
33 > .active,
34 > .next,
35 > .prev { display: block; }
36
37 > .active {
38 left: 0;
39 }
40
41 > .next,
42 > .prev {
43 position: absolute;
44 top: 0;
45 width: 100%;
46 }
47
48 > .next {
49 left: 100%;
50 }
51 > .prev {
52 left: -100%;
53 }
54 > .next.left,
55 > .prev.right {
56 left: 0;
57 }
58
59 > .active.left {
60 left: -100%;
61 }
62 > .active.right {
63 left: 100%;
64 }
65
66 }
67
68 // Left/right controls for nav
69 // ---------------------------
70
71 .carousel-control {
72 position: absolute;
73 top: 40%;
74 left: 15px;
75 width: 40px;
76 height: 40px;
77 margin-top: -20px;
78 font-size: 60px;
79 font-weight: 100;
80 line-height: 30px;
81 color: @white;
82 text-align: center;
83 background: @grayDarker;
84 border: 3px solid @white;
85 .border-radius(23px);
86 .opacity(50);
87
88 // we can't have this transition here
89 // because webkit cancels the carousel
90 // animation if you trip this while
91 // in the middle of another animation
92 // ;_;
93 // .transition(opacity .2s linear);
94
95 // Reposition the right one
96 &.right {
97 left: auto;
98 right: 15px;
99 }
100
101 // Hover/focus state
102 &:hover,
103 &:focus {
104 color: @white;
105 text-decoration: none;
106 .opacity(90);
107 }
108 }
109
110 // Carousel indicator pips
111 // -----------------------------
112 .carousel-indicators {
113 position: absolute;
114 top: 15px;
115 right: 15px;
116 z-index: 5;
117 margin: 0;
118 list-style: none;
119
120 li {
121 display: block;
122 float: left;
123 width: 10px;
124 height: 10px;
125 margin-left: 5px;
126 text-indent: -999px;
127 background-color: #ccc;
128 background-color: rgba(255,255,255,.25);
129 border-radius: 5px;
130 }
131 .active {
132 background-color: #fff;
133 }
134 }
135
136 // Caption for text below images
137 // -----------------------------
138
139 .carousel-caption {
140 position: absolute;
141 left: 0;
142 right: 0;
143 bottom: 0;
144 padding: 15px;
145 background: @grayDark;
146 background: rgba(0,0,0,.75);
147 }
148 .carousel-caption h4,
149 .carousel-caption p {
150 color: @white;
151 line-height: @baseLineHeight;
152 }
153 .carousel-caption h4 {
154 margin: 0 0 5px;
155 }
156 .carousel-caption p {
157 margin-bottom: 0;
158 }