carousel.less

/*
 * Metro UI CSS
 * (c) 2012-2013 by Sergey Pimenov
 * Licensed under the MIT License and Commercial
 *
 * Carousel.less
 *
 */

.carousel {
    display: block;
    position: relative;
    //line-height: 1;
    //width: 100%;
    //height: 100%;
    margin-bottom: 20px;

    .slides {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;

        .slide {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

            &.image {
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .description {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 10px;
                background: rgba(0,0,0,.7);
                color: #fff;
            }
        }
    }

    .control {
        position: absolute;
        top: 50%;
        left: 15px;
        width: 40px;
        height: 45px;
        margin-top: -20px;
        font-size: 48pt;
        font-weight: 100;
        line-height: 30px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        opacity: .75;

        &.right {
            left: auto;
            right: 15px;
        }

        &:hover {
            opacity: 1;
        }

    }

    .markers {
        & > ul {
            .unstyled;
            list-style: none;
            position: absolute;
            top: 100%;
            left: 0;
            padding-top: 10px;
        }

        li {
            display: block;
            float: left;
            margin-right: 5px;

            a {
                width: 32px;
                height: 6px;
                background-color: red;
                display: block;
                float: left;
            }

            &.active a {
                background-color: #1e1e1e;
            }
        }
    }

    // Subclasses for animation effects
    .effect-slide {}
    .effect-fade {}
}