@** * Yobi, Project Hosting SW * * Copyright 2013 NAVER Corp. * http://yobi.io * * @author Jihan Kim * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. **@ @import utils.TemplateHelper._ Yobi UI
Yobi UI

Buttons

.ybtn

Default Inverse Watching Danger

<a href="#" class="ybtn">Default</a> <button type="button" class="ybtn ybtn-primary">Primary</button> <a href="#" class="ybtn ybtn-inverse">Inverse</a> <button type="button" class="ybtn ybtn-info">Info</button> <a href="#" class="ybtn ybtn-watching">Watching</a> <button type="button" class="ybtn ybtn-warning">Warning</button> <a href="#" class="ybtn ybtn-danger">Danger</a>
Upload
<div class="btn-wrap"> <div class="nbtn medium white fake-file-wrap"> <i class="ico ico-plus-blue"></i>Upload <input type="file" class="file" name="filePath" accept="image/*"> </div> </div>

Select

.dropdown-toggle
.small
.medium
.large
<div class="btn-group" data-name="assigneeId"> <button class="btn dropdown-toggle large" data-toggle="dropdown"> <span class="d-label">전체</span> <span class="d-caret"><span class="caret"></span></span> </button> <ul class="dropdown-menu"> <li data-value="" data-selected="true" class="active"><a href="javascript:void(0)">전체</a></li> <li data-value="0"><a href="javascript:void(0)">담당자 없음</a></li> </ul> </div>

Search Form

.form-search
<form class="form-search"> <input type="text" class="text" name="filter" placeholder="현재 프로젝트에서 검색"><!-- --><button type="button" class="btn">검색</button> </form> 
.search-bar
<div class="search"> <div class="search-bar"> <input name="filter" class="textbox full" type="text"> <button type="submit" class="search-btn"><i class="yobicon-search"></i></button> </div> </div>

Labels

.issue-label

.issue-label .active

.issue-label .active .editable

<button class="issue-label">Clean</button> <button class="issue-label active" style="background-color:#da5454; color:#fff;">Clean<span class="delete">&times;</span></button> <button class="issue-label active editable" style="background-color:#da5454; color:#fff;">Clean<span class="delete">&times;</span></button>

Avatar

.avatar-wrap
.mini (12x12)
.smaller (20x20)
.small (24x24)
.medium (32x32, default)
.mlarge (40x40)
.large (64x64)
.xlarge (128x128)

Tabs

.nav .nav-tabs

Switches

<input type="checkbox" data-toggle="switch">