<li>
    <div class="title">
        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
        文字入力
    </div>
    <div class="content clearfix">
        <div>
            <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text"  ng-change="inputText(designText)" ng-model="designText" ng-value="designTextValue">
        </div>
        <div>
            <ul class="font-family-box">
                <li ng-repeat="(index,item) in listFontFamily" ng-click="setFontFamily(item.slug, index)" ng-style="{'font-family' : item.slug}" ng-class="{active: itemFont == index}">{{ item.name }}</li>
            </ul>
        </div>

        <div class="clearfix spacing-letter ">
            <div class="pull-left text-label">
                文字間隔 :
            </div>
            <div class="pull-right">
                <div class="box clearfix">
                    <div class="item item-plus" ng-click="setLetterSpacingText('plus')">
                        <i class="fa fa-plus-square-o" aria-hidden="true"></i>
                    </div>
                    <div class="item item-text" style="cursor: pointer" ng-click="setLetterSpacingText('default')">
                        リセット
                    </div>
                    <div class="item item-minus" ng-click="setLetterSpacingText('minus')">
                        <i class="fa fa-minus-square-o" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
<li>
    <div class="title">
        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
        カラー変更
        <!--<div class="pull-right">元の色に戻す</div>-->
    </div>
    <div class="content clearfix">
        <div class="color-patterns">
            <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</li>

<li>
    <div class="title">
        <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
        重ね順変更
    </div>
    <div class="content clearfix">
        <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
            <img src="images/layer-icon-1.png"/>
            <div>前面へ</div>
        </div>
        <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
            <img src="images/layer-icon-2.png"/>
            <div>背面へ</div>
        </div>
        <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
            <img src="images/layer-icon-3.png"/>
            <div>最前面へ</div>
        </div>
        <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
            <img src="images/layer-icon-4.png"/>
            <div>最前面へ</div>
        </div>
    </div>
</li>
