List item textrea style

by bruth

HTML

<script src="https://raw.github.com/jackmoore/autosize/master/jquery.autosize.js"></script>
<ul class=list>
    <li><textarea>item 1</textarea></li>
    <li><textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non est quam, quis blandit erat. Quisque dignissim, ante ac lobortis ultricies, nisl augue ultricies lorem, id porttitor odio metus ac nibh.</textarea>
        <ul class=list>
            <li><textarea>item 2</textarea>
                <ul class=list>
                    <li><textarea>item 3</textarea></li>
                    <li><textarea>item 3</textarea></li>
                </ul>
            </li>
            <li><textarea>item 2</textarea></li>
        </ul>
    </li>
</ul>

CSS

.list {
    margin: 0;
    padding: 0 0 0 20px;
}

.list .list {
    padding-left: 20px;
}

.list li {
    margin: 8px 0;
    color: #aaa;
    list-style: disc;
}

.list li > textarea {
    border: none;
    color: #333;
    font-size: 14px;
    width: 100%;
    background: transparent;
    height: 14px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    resize: none;
    outline: none;
    vertical-align: top;
}

CoffeeScript

$ ->

    $('.list li > textarea').autosize
        className: 'autosize'