bootstrap-source/bootstrap-3.0.3/less Kopie/carousel.less
changeset 115 a9d04f5f5650
parent 114 6093dda9fe38
child 116 00287f05dc6a
     1.1 --- a/bootstrap-source/bootstrap-3.0.3/less Kopie/carousel.less	Sat Jan 18 12:34:36 2014 +0100
     1.2 +++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.3 @@ -1,232 +0,0 @@
     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 -}
Impressum Datenschutzerklärung