cupboard 0.2.0

data/app/assets/stylesheets/_forms.scss

@@ -0,0 +1,159 @@
+// ----------------------------
+// Form
+// ----------------------------
+
+/*doc
+---
+title: Forms
+name: 6_forms
+category: Design elements
+---
+
+Basic form, select menu, checkbox, radio button
+
+### 基本表格樣式
+<div class="ic-form basic-form"><small>Basic Form</small></div>
+
+<form role="form" class="form-horizontal">
+  <div class="form-group">
+    <label for="exampleInputUsername1" class="control-label col-sm-2">帳號</label>
+    <div class="col-sm-10">
+      <input type="text" class="form-control" id="exampleInputUsername1" placeholder="Username">
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1" class="control-label col-sm-2">密碼</label>
+    <div class="col-sm-10">
+      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputEmail1" class="control-label col-sm-2">電子信箱</label>
+    <div class="col-sm-10">
+      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputAddress" class="control-label col-sm-2">地址</label>
+    <div class="col-sm-10">
+      <div class="input-group">
+        <div class="input-group-addon">台北市 110 中正區</div>
+        <input type="text" id="exampleInputAddress" placeholder="Address" class="form-control">
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="selectGender" class="control-label col-sm-2">性別</label>
+		<div class="col-sm-10">
+			<select class="form-control" id="selectGender">
+				<option>--</option>
+				<option>男性</option>
+				<option>女性</option>
+			</select>
+		</div>
+  </div>
+  <div class="form-group">
+    <label for="checkSubscribe" class="control-label col-sm-2">食譜</label>
+    <div class="col-sm-10 checkbox">
+      <label>
+        <input type="checkbox" value="">訂閱的使用者發表新食譜時通知我
+      </label>
+    </div>
+  </div>
+  <div class="form-group">
+    <label class="control-label col-sm-2">發表食譜</label>
+    <div class="col-md-10 radio">
+      <label>
+        <input checked="checked" id="showRecipe_true" name="showRecipe_true" type="radio" value="true">顯示
+      </label>
+      <label>
+        <input id="showRecipe_false" name="showRecipe_true" type="radio" value="false">不顯示
+      </label>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox">訂閱電子報
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-xs-12 col-sm-off-set-2 col-sm-10 pull-right">
+      <button type="submit" class="btn btn-default">送出</button>
+    </div>
+  </div>
+</form>
+
+```
+<form class="form-horizontal">
+  <div class="form-group">
+    <label class="col-sm-2 control-label">帳號</label>
+    <div class="col-sm-10">
+      <input class="form-control" placeholder="Username">
+    </div>
+  </div>
+  ...
+</form>
+```
+
+*/
+
+$form-input-bg: #fafafa !default;
+$form-input-border: #a39b97 !default;
+$form-input-addon-bg: #efede8 !default;
+$form-input-text: #777 !default;
+
+.form-horizontal {
+  label {
+    color: $ic-brown;
+  }
+
+  input:not([type="radio"], [type="checkbox"]),
+  select {
+    background-color: $form-input-bg;
+    border: 1px solid $form-input-border;
+    border-radius: 3px;
+    height: 44px;
+    padding: 15px;
+  }
+
+  [type="checkbox"] {
+    height: 16px;
+    width: 16px;
+  }
+
+  [type="submit"] {
+    background-color: $ic-red;
+    border: 0;
+    border-radius: 3px;
+    color: $white;
+    padding: 10px 12px;
+    width: 100%;
+  }
+
+  .input-group-addon {
+    background-color: $form-input-addon-bg;
+    border-bottom-left-radius: 3px;
+    border-color: $form-input-border;
+    border-top-left-radius: 3px;
+
+    + input {
+      border-left: 0;
+		}
+  }
+
+	.checkbox,
+  .radio {
+    label {
+      color: $form-input-text;
+		  font-size: 16px;
+    }
+	}
+
+  .radio label + label {
+    margin-left: 10px;
+  }
+}

data/app/assets/stylesheets/_global.scss

@@ -0,0 +1,40 @@
+// ----------------------------
+// Global
+// ----------------------------
+
+/*doc
+---
+title: Global
+name: 1_global
+category: Design elements
+---
+
+Fonts, Colors, Animations these can be used in multi sites.
+
+### Fonts
+
+Currently we're using
+`"Helvetica Neue", "Microsoft Jhenghei", Helvetica, Arial, Geneva, sans-serif` as our default body font sets, and with default `letter-spacing: 0.06em;` .
+
+[Normal] Cooking is a happiness thing, sharing recipes is that to share happiness to more people.<br/>
+[一般] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。
+
+**[Bold] Cooking is a happiness thing, share recipes is that to share happiness to more people.<br/>
+[粗體] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。**
+
+*[Italic] Cooking is a happiness thing, share recipes is that to share happiness to more people.<br/>
+[斜體] 料理是一件幸福的事，分享食譜則是分享幸福給更多的人。*
+<hr/>
+
+
+### Animations
+
+in tv/index - hover state of tv series-nav
+
+<div class="ic-animation clearfix">
+  <p>Ease-in-out - Duraion: 0.5s, Ease-in-out (Hover to see effect)</p>
+  <div class="ease-in-block pull-left">Hover over me</div>
+</div>
+
+*/
+

data/app/assets/stylesheets/_images.scss

@@ -0,0 +1,125 @@
+// ----------------------------
+// Images
+// ----------------------------
+
+/*doc
+---
+title: Images
+name: 8_images
+category: Design elements
+---
+
+Logo, feature image, card image, covers, avatar, etc.
+
+### Logo
+
+<div class="row">
+  <div class="col-xs-6 col-md-3">
+    <p>header</p>
+    <img width="75" src="/images/icook-logo.svg" alt="Icook logo">
+  </div>
+  <div class="col-xs-6 col-md-4">
+    <p>footer</p>
+    <img width="130" class="logo-2x" src="/images/logo-2x.png" alt="Logo 2x">
+  </div>
+</div>
+
+<hr />
+### Feature image
+<p>recipes/index</p>
+
+<div>
+  <img width="560" height="240" class="img-responsive" src="http://placehold.it/560x240" alt="560x240">
+</div>
+
+<hr/>
+### Card image
+
+<div class="row card-img">
+  <div class="col-xs-12 col-md-3">
+    <small>recipe-card #list card</small>
+    <img width="200" height="150" class="img-responsive" src="http://placehold.it/200x150" alt="200x150">
+    <small class="help">//for 160x120(layout)</small>
+  </div>
+  <div class="col-xs-12 col-md-4">
+    <small>recipe-card #photo card</small>
+    <img width="400" height="300" class="img-responsive" src="http://placehold.it/400x300" alt="400x300">
+    <small class="help">//for 172x129(layout)</small>
+  </div>
+  <div class="col-xs-12 col-md-4">
+    <small>dish-card</small>
+    <img width="150" height="150" class="img-responsive" src="http://placehold.it/150" alt="150">
+  </div>
+</div>
+
+<hr/>
+### Cover
+
+<div class="row ic-cover">
+  <div class="col-xs-12 col-md-4">
+    <small>recipe cover &nbsp;&nbsp;# recipes/show</small>
+    <img width="800" height="600" class="img-responsive" src="http://placehold.it/800x600" alt="800x600">
+    <small class="help">//for 480x360(layout)</small>
+  </div>
+  <div class="col-xs-12 col-md-4">
+    <small>categories cover &nbsp;&nbsp;# categories/show</small>
+    <img width="800" height="600" class="img-responsive" src="http://placehold.it/800x167" alt="800x167">
+    <small class="help">//for 718x150(layout)</small>
+  </div>
+  <div class="col-xs-12 col-md-4">
+    <small>brand cover &nbsp;&nbsp;# brands/recipes</small>
+    <img width="1140" height="300" class="img-responsive" src="http://placehold.it/1140x300" alt="1140x300">
+  </div>
+</div>
+
+<hr/>
+### Avatar
+
+<div class="row ic-avatar">
+  <div class="col-xs-12 col-md-3">
+    <small>user</small>
+    <img width="80" height="80" class="img-circle" src="http://placehold.it/80" alt="80">
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <small>comment</small>
+    <img width="55" height="55" class="img-circle" src="http://placehold.it/55" alt="55">
+    <small class="help">//tv comment</small>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <small>brand avatar</small>
+    <img width="200" height="198" class="img-responsive" src="http://placehold.it/200x198" alt="200x198">
+    <small class="help">//for 96x96(layout)</small>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <small>dish comment</small>
+    <img width="182" height="182" class="img-responsive" src="http://placehold.it/182" alt="182">
+    <small class="help">//for 40x40(layout)</small>
+  </div>
+</div>
+
+<hr/>
+### Market
+<p>images used in Market</p>
+<div class="row">
+  <div class="col-xs-12 col-md-3">
+    <p>list cover - index</p>
+    <img width="640" height="480" class="img-responsive" src="http://placehold.it/640x480" alt="640x480">
+    <small class="help">//for 263x197(layout)</small>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <p>Main cover - Jumbotron</p>
+    <img width="800" height="600" class="img-responsive" src="http://placehold.it/800x600" alt="800x600">
+    <small class="help">//for 653x489(layout)</small>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <p>Brand logo - Jumbotron</p>
+    <img width="280" height="80" class="img-responsive" src="http://placehold.it/280x80" alt="280x80">
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <p>SKU</p>
+    <img width="800" height="581" class="img-responsive" src="http://placehold.it/800x581" alt="800x581">
+    <small class="help">//for 120x90(layout)</small>
+  </div>
+</div>
+
+*/

data/app/assets/stylesheets/_layouts.scss

@@ -0,0 +1,4 @@
+@import "layouts/global-navbar";
+@import "layouts/sub-header-market";
+@import "layouts/footer-nav";
+@import "layouts/footer";

data/app/assets/stylesheets/_lists.scss

@@ -0,0 +1,203 @@
+// ----------------------------
+// Lists
+// ----------------------------
+
+/*doc
+---
+title: Lists
+name: 4_Lists
+category: Design elements
+---
+
+unordered list, ordered list, description
+
+### Unordered list
+<div class="ic-lists">
+  <small>orign</small><br/>
+</div>
+
+- 所有發表
+- 網友熱搜電鍋菜
+- 愛瘦身食堂
+- 愛料理 TV
+- 愛料理活動
+
+<br/>
+<div class="ic-lists">
+  <small>icook - favorite list</small><br/>
+</div>
+<ul class="ic-favlist">
+  <li class="clearfix"><a href="#"><span class="item">所有發表</span></a></li>
+  <li class="clearfix"><a href="#"><span class="item">網友熱搜電鍋菜</span><span class="num pull-right">6</span></a></li>
+  <li class="clearfix"><a href="#"><span class="item">愛瘦身食堂</span><span class="num pull-right">25</span></a></li>
+  <li class="clearfix"><a href="#"><span class="item">愛料理 TV</span><span class="num pull-right">382</span></a></li>
+  <li class="clearfix"><a href="#"><span class="item">愛料理活動</span><span class="num pull-right">1234</span></a></li>
+</ul>
+
+```
+<ul>
+  <li>...</li>
+</ul>
+````
+
+---
+
+### Ordered list
+<div class="ic-lists">
+  <small>orign</small><br/>
+</div>
+
+1. 馬鈴薯
+2. 地瓜
+3. 豬肉
+4. 洋蔥
+5. 起司早餐
+
+<br/>
+<div class="ic-lists ic-search-keywords">
+  <small>icook - popular search keywords</small><br/>
+</div>
+<ol class="ic-search-keywords" style="counter-reset: li">
+  <li><a href="#">馬鈴薯</a></li>
+  <li><a href="#">地瓜</a></li>
+  <li><a href="#">豬肉</a></li>
+  <li><a href="#">洋蔥</a></li>
+  <li><a href="#">起司早餐</a></li>
+</ol>
+
+```
+<ol>
+  <li>...</li>
+</ol>
+```
+
+---
+
+### Description
+
+<dl>
+  <dt>豬肉</dt>
+  <dd>豬肉不同的部位，口感也都不同，如:里肌、後腿、梅花、五花、松阪豬、嘴邊肉等。</dd>
+  <dt>雞肉</dt>
+  <dd>常見的雞肉料理方式有炸雞、烤雞、燉雞、雞湯、雞肉飯等等。</dd>
+  <dt>牛肉</dt>
+  <dd>牛肉味道鮮美，是受全世界人喜愛的食品，其料理方式主要有生、烤、炒、煮、肉球或肉乾等等。</dd>
+</dl>
+```
+<dl>
+  <dt>...</dt>
+  <dd>...</dd>
+</dl>
+```
+
+*/
+
+.ic-lists + ul  {
+  width: 200px;
+}
+
+// favlist
+
+.ic-favlist {
+  list-style-type: none;
+  padding-left: 0;
+
+  li {
+    border-top: 1px solid #ebe5e1;
+    padding: 5px 0 5px 12px;
+
+    a {
+      display: block;
+      line-height: 26px;
+      padding: 0;
+    }
+
+    span.num {
+      color: #aaa;
+      font-size: 11px;
+    }
+
+    span.item {
+      color: #aaa;
+      float: left;
+      font-size: 13px;
+      max-width: 80%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:first-child {
+      border-top: 0;
+      padding-top: 0;
+
+      span {
+        color: #aa8f83;
+      }
+    }
+
+    &:hover,
+    &.active {
+      span.num {
+        border-radius: 6px;
+        color: #fff;
+        line-height: 16px;
+        margin-top:  5px;
+        padding: 0 4px;
+      }
+    }
+
+    &:hover {
+      span.item {
+        text-decoration: underline;
+      }
+
+      span.num {
+        background-color: #aaa;
+      }
+    }
+
+    &.active {
+      span.item {
+        color: #aa8f83;
+      }
+
+      span.num {
+        background-color: #aa8f83;
+      }
+    }
+  }
+}
+
+.ic-search-keywords + ol {
+  padding-left: 0;
+
+  li {
+    list-style-type: none;
+    margin-bottom: 0;
+    padding: 10px 0 10px 27px;
+    position: relative;
+
+    &:before {
+      color: #564e4a;
+      content: counter(li);
+      counter-increment: li;
+      font-size: 18px;
+      font-weight: bold;
+      height: 25px;
+      left: 0;
+      margin-right: 8px;
+      position: absolute;
+      text-align: center;
+      top: 7px;
+      width: 30px;
+    }
+
+    a {
+      color: #888;
+      display: block;
+      font-size: 16px;
+    }
+  }
+}
+