Bootstrap Carousel Fade - SCSS

gistfile1.txt

// Carousel Styles
    .carousel {
      height: 520px;
      min-height: 520px;
      @media (max-width: $screen-xs-max) {
        & {
          
        }
      }
      .carousel-inner {
        height: 100%;
        min-height: 520px;
        background-color: #000000;
        > .next.left,
        > .prev.right {
          left: 0;
        }

        > .active.left {
          left: 0%;
        }
        > .active.right {
          left: 0%;
        }
        .item {
          position: absolute;
          top: 0 !important;
          left: 0 !important;
          width: 100%;
          height: 100%;
          min-height: 520px;
          display: block;
          @include zero-opacity; 
          @include opacity-transition;
          height: 100%;
          background-position: center top; 
          background-repeat: no-repeat; 
          
          @media (min-width: $screen-md-max) {
            & {
              background-size: cover;
            }
          }
          @media (min-width: $screen-sm-min) {
            & {
              //background-position: left top;
            }
          }
          &.left, &.right {
            position: absolute;
            //@include zero-opacity;
            //@include default-transitions;

          }
          &.active {
            position: relative;
            @include full-opacity;
            @media (max-width: $screen-xs-max) {
              & {
                width: 100% !important;
              }
            }
          }
          
          //background-attachment: fixed;
          .overlay:after {
            background-color: #000000;
            z-index: 0;
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            opacity: 0.3;
            filter: alpha(opacity=100);
          }
          .slide-bg {
            //
          }
          .container {
            height:100%;
            &:before {
              content: '';
              display: inline-block;
              height: 100%;
              vertical-align: middle;
              margin-right: -1.15em;
            }
          }

          // Optional captions
          // -----------------------------
          .slide-caption {
            height: auto;
            opacity: 0;
            @include zero-opacity;
            @include default-transitions;
            color: $carousel-caption-color;
            text-align: left;
            z-index: 10;
            position: relative;
            max-width: 686px;
            width: 85%;
            //margin: auto;
            display: inline-block;
            vertical-align: middle;
            @media (max-width: $screen-xs-max) {

            }
            @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 

            }
            & .btn {
              text-shadow: none; // No shadow for button elements in carousel-caption
            }

            a {
              h1{
                font-size: 50px;
                font-weight: 900;
                letter-spacing: -1px;
                .lead {
                  font-size: 50px;
                  letter-spacing: 0px;
                }
              }
              
              h2 {
                font-size: 50px;
                font-weight: 900;
                letter-spacing: -1px;
                .lead {
                  font-size: 50px;
                  letter-spacing: 0px;
                }
              }
            }
            p {
              font-size: 24px;
              @media (max-width: $screen-xs-max) {
              & {
                font-size: 18px;
                }
              }
            }
            a.play-video {
              color: #ff6600;
              font-size: 38px;
              text-shadow: $carousel-text-shadow;
            }
          }

          &.active {
            .slide-caption {
              opacity: 1;
            }
          }
          &.left {
            .slide-caption {
              opacity: 0;
              @include zero-opacity;
              @include default-transitions;
            }
          }
          &.right {
            .slide-caption {
              opacity: 0;
              @include zero-opacity;
              @include default-transitions;
            }
          }
        }
      }
      .carousel-control {
        //display: none;
      }
            
      .carousel-indicators {
        position: absolute;
        bottom: 0px;
        left: 50%;
        z-index: 15;
        width: 60%;
        margin-left: -30%;
        padding-left: 0;
        list-style: none;
        text-align: center;
        li {
          display: inline-block;
          width:  10px;
          height: 10px;
          margin: 1px;
          text-indent: -999px;
          border: 1px solid $carousel-indicator-border-color;
          border-radius: 10px;
          cursor: pointer;

          // IE8-9 hack for event handling
          //
          // Internet Explorer 8-9 does not support clicks on elements without a set
          // `background-color`. We cannot use `filter` since that's not viewed as a
          // background color by the browser. Thus, a hack is needed.
          //
          // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
          // set alpha transparency for the best results possible.
          background-color: #000 \9; // IE8
          background-color: rgba(0,0,0,0); // IE9
        }
        .active {
          margin: 0;
          width:  12px;
          height: 12px;
          background-color: $carousel-indicator-active-bg;
        }
      }

    }// Carousel End