Lungo.js/src/stylesheets/Lungo.layout.list.less

/**
 * Stylesheet
 *
 * @namespace LUNGO.Layout
 * @class List
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "constants.less";
@import "mixins.less";

.list {
    & li {
        list-style-type: none;

        &.padding {
            padding: 8px;
        }

        & a {
            position: relative;
            display: block;
            padding: 8px;
        }

        &.arrow > a::after{
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            border-right: 3px solid #D0D0D8;
            border-top: 3px solid #D0D0D8;
            position: absolute;
            right: 12px;
            top: 43%;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        & .icon:not(.small), & img {
            float: left;
            width: 32px;
            height: 32px;
            margin-right: 8px;
            font-size: 2.6em;
            line-height: 1.0em;
            text-align: center;
        }

        &.thumb img {
           margin: -8px 8px -8px -8px;
           height: 46px !important;
           width:46px !important;
        }
    }

    & .bubble {
        padding-left: 5px;
        padding-right: 5px;
    }

    & .onright {
        font-size: 0.75em;
        font-weight: bold;
    }

    & .onright .icon, & small .icon {
        height: 13px !important;
        width: 13px !important;
        margin-right: 1px !important;
        font-size: 1.2em !important;
        line-height: 0.8em;
    }

    //@todo: Refactor li.anchor stylesheet;
    & li.anchor {
        font-size: 0.85em;
        font-weight: bold;
        padding: 0px 4px;
        line-height: 1.5em;

        & .icon.small {
            margin-right: 2px;
        }

        & .bubble { display: none; }
    }
}