Text Editor Idea

CSS/jQuery

by Joshua Powell

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="textEdit">
    <ul class="tools">
        <li><i class="fa fa-indent"></i>
            <ul class="align">
                <li><i class="fa fa-align-left"></i></li><!--
                --><li><i class="fa fa-align-right"></i></li><!--
                --><li><i class="fa fa-align-justify"></i></li><!--
                --><li><i class="fa fa-align-center"></i></li>
            </ul>
        </li>
        <li><i class="fa fa-font"></i>
            <ul class="fontStyle">
                <li><i class="fa fa-bold"></i></li><!--
                --><li><i class="fa fa-italic"></i></li><!--
                --><li><i class="fa fa-underline"></i></li><!--
                --><li><i class="fa fa-link"></i></li>
            </ul>
        </li>
        <li><i class="fa fa-scissors"></i></li>
        <li><i class="fa fa-list"></i></li>
        <li><i class="fa fa-list-ol"></i></li>
        <li><i class="fa fa-clipboard"></i></li>
        <li><i class="fa fa-floppy-o"></i></li>
        <li><i class="fa fa-table"></i></li>
        <li><i class="fa fa-eraser"></i></li>
        <li><i class="fa fa-columns"></i></li>
    </ul>
    <div class="inputText">
        
    </div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-family: "century gothic";
}

body * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.textEdit {
    width: 60%;
    position: absolute;
    left: 20%;
    border-radius: 5px 0 0 5px;
    overflow-x: hidden;
    top: 50%;
    margin-top: -200px;
}

.tools {
    width: 35px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-right: 5px solid rgba(255, 255, 255, 0.6);
}

.tools i {
    font-size: 2em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tools > li {
    width: 100%;
    height: 10%;
    background: #7b7b7b;
    padding: 5px;
    position: relative;
    cursor: pointer;
}

ul.align, ul.fontStyle {
    min-width: 140px;
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

ul.tools li:hover ul.align, ul.tools li:hover ul.fontStyle {
    visibility: visible;
    left: 100%;
}

ul.align li, ul.fontStyle li {
    display: inline-block;
    height: 10%;
    background: #7b7b7b;
    padding: 5px;
    position: relative;
    cursor: pointer;
}

.inputText {
    width: 100%;
    min-height: 400px;
    padding-left: 40px;
    background: tan;
}