1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/bootstrap-source/bootstrap-3.0.3/less Kopie/carousel.less Fri Dec 20 22:49:16 2013 +0100
1.3 @@ -0,0 +1,232 @@
1.4 +//
1.5 +// Carousel
1.6 +// --------------------------------------------------
1.7 +
1.8 +
1.9 +// Wrapper for the slide container and indicators
1.10 +.carousel {
1.11 + position: relative;
1.12 +}
1.13 +
1.14 +.carousel-inner {
1.15 + position: relative;
1.16 + overflow: hidden;
1.17 + width: 100%;
1.18 +
1.19 + > .item {
1.20 + display: none;
1.21 + position: relative;
1.22 + .transition(.6s ease-in-out left);
1.23 +
1.24 + // Account for jankitude on images
1.25 + > img,
1.26 + > a > img {
1.27 + .img-responsive();
1.28 + line-height: 1;
1.29 + }
1.30 + }
1.31 +
1.32 + > .active,
1.33 + > .next,
1.34 + > .prev { display: block; }
1.35 +
1.36 + > .active {
1.37 + left: 0;
1.38 + }
1.39 +
1.40 + > .next,
1.41 + > .prev {
1.42 + position: absolute;
1.43 + top: 0;
1.44 + width: 100%;
1.45 + }
1.46 +
1.47 + > .next {
1.48 + left: 100%;
1.49 + }
1.50 + > .prev {
1.51 + left: -100%;
1.52 + }
1.53 + > .next.left,
1.54 + > .prev.right {
1.55 + left: 0;
1.56 + }
1.57 +
1.58 + > .active.left {
1.59 + left: -100%;
1.60 + }
1.61 + > .active.right {
1.62 + left: 100%;
1.63 + }
1.64 +
1.65 +}
1.66 +
1.67 +// Left/right controls for nav
1.68 +// ---------------------------
1.69 +
1.70 +.carousel-control {
1.71 + position: absolute;
1.72 + top: 0;
1.73 + left: 0;
1.74 + bottom: 0;
1.75 + width: @carousel-control-width;
1.76 + .opacity(@carousel-control-opacity);
1.77 + font-size: @carousel-control-font-size;
1.78 + color: @carousel-control-color;
1.79 + text-align: center;
1.80 + text-shadow: @carousel-text-shadow;
1.81 + // We can't have this transition here because WebKit cancels the carousel
1.82 + // animation if you trip this while in the middle of another animation.
1.83 +
1.84 + // Set gradients for backgrounds
1.85 + &.left {
1.86 + #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
1.87 + }
1.88 + &.right {
1.89 + left: auto;
1.90 + right: 0;
1.91 + #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
1.92 + }
1.93 +
1.94 + // Hover/focus state
1.95 + &:hover,
1.96 + &:focus {
1.97 + outline: none;
1.98 + color: @carousel-control-color;
1.99 + text-decoration: none;
1.100 + .opacity(.9);
1.101 + }
1.102 +
1.103 + // Toggles
1.104 + .icon-prev,
1.105 + .icon-next,
1.106 + .glyphicon-chevron-left,
1.107 + .glyphicon-chevron-right {
1.108 + position: absolute;
1.109 + top: 50%;
1.110 + z-index: 5;
1.111 + display: inline-block;
1.112 + }
1.113 + .icon-prev,
1.114 + .glyphicon-chevron-left {
1.115 + left: 50%;
1.116 + }
1.117 + .icon-next,
1.118 + .glyphicon-chevron-right {
1.119 + right: 50%;
1.120 + }
1.121 + .icon-prev,
1.122 + .icon-next {
1.123 + width: 20px;
1.124 + height: 20px;
1.125 + margin-top: -10px;
1.126 + margin-left: -10px;
1.127 + font-family: serif;
1.128 + }
1.129 +
1.130 + .icon-prev {
1.131 + &:before {
1.132 + content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
1.133 + }
1.134 + }
1.135 + .icon-next {
1.136 + &:before {
1.137 + content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
1.138 + }
1.139 + }
1.140 +}
1.141 +
1.142 +// Optional indicator pips
1.143 +//
1.144 +// Add an unordered list with the following class and add a list item for each
1.145 +// slide your carousel holds.
1.146 +
1.147 +.carousel-indicators {
1.148 + position: absolute;
1.149 + bottom: 10px;
1.150 + left: 50%;
1.151 + z-index: 15;
1.152 + width: 60%;
1.153 + margin-left: -30%;
1.154 + padding-left: 0;
1.155 + list-style: none;
1.156 + text-align: center;
1.157 +
1.158 + li {
1.159 + display: inline-block;
1.160 + width: 10px;
1.161 + height: 10px;
1.162 + margin: 1px;
1.163 + text-indent: -999px;
1.164 + border: 1px solid @carousel-indicator-border-color;
1.165 + border-radius: 10px;
1.166 + cursor: pointer;
1.167 +
1.168 + // IE8-9 hack for event handling
1.169 + //
1.170 + // Internet Explorer 8-9 does not support clicks on elements without a set
1.171 + // `background-color`. We cannot use `filter` since that's not viewed as a
1.172 + // background color by the browser. Thus, a hack is needed.
1.173 + //
1.174 + // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
1.175 + // set alpha transparency for the best results possible.
1.176 + background-color: #000 \9; // IE8
1.177 + background-color: rgba(0,0,0,0); // IE9
1.178 + }
1.179 + .active {
1.180 + margin: 0;
1.181 + width: 12px;
1.182 + height: 12px;
1.183 + background-color: @carousel-indicator-active-bg;
1.184 + }
1.185 +}
1.186 +
1.187 +// Optional captions
1.188 +// -----------------------------
1.189 +// Hidden by default for smaller viewports
1.190 +.carousel-caption {
1.191 + position: absolute;
1.192 + left: 15%;
1.193 + right: 15%;
1.194 + bottom: 20px;
1.195 + z-index: 10;
1.196 + padding-top: 20px;
1.197 + padding-bottom: 20px;
1.198 + color: @carousel-caption-color;
1.199 + text-align: center;
1.200 + text-shadow: @carousel-text-shadow;
1.201 + & .btn {
1.202 + text-shadow: none; // No shadow for button elements in carousel-caption
1.203 + }
1.204 +}
1.205 +
1.206 +
1.207 +// Scale up controls for tablets and up
1.208 +@media screen and (min-width: @screen-sm-min) {
1.209 +
1.210 + // Scale up the controls a smidge
1.211 + .carousel-control {
1.212 + .glyphicons-chevron-left,
1.213 + .glyphicons-chevron-right,
1.214 + .icon-prev,
1.215 + .icon-next {
1.216 + width: 30px;
1.217 + height: 30px;
1.218 + margin-top: -15px;
1.219 + margin-left: -15px;
1.220 + font-size: 30px;
1.221 + }
1.222 + }
1.223 +
1.224 + // Show and left align the captions
1.225 + .carousel-caption {
1.226 + left: 20%;
1.227 + right: 20%;
1.228 + padding-bottom: 30px;
1.229 + }
1.230 +
1.231 + // Move up the indicators
1.232 + .carousel-indicators {
1.233 + bottom: 20px;
1.234 + }
1.235 +}