cupboard 0.2.0

data/app/assets/stylesheets/_mixins.scss

@@ -0,0 +1,6 @@
+@import "mixins/mixin-animation";
+@import "mixins/mixin-type";
+@import "mixins/mixin-icons";
+@import "mixins/mixin-buttons"; //must after icons
+@import "mixins/mixin-badge";
+@import "mixins/mixin-alert";

data/app/assets/stylesheets/_tables.scss

@@ -0,0 +1,244 @@
+// ----------------------------
+// Table
+// ----------------------------
+
+/*doc
+---
+title: Tables
+name: 7_Tables
+category: Design elements
+---
+
+Table view examples (in Market)
+
+### Order
+<div class="ic-table"><p>Order table</p></div>
+
+<table class="table basic-table order-table">
+  <thead>
+    <tr>
+      <th>商品</th>
+      <th>數量</th>
+      <th>金額</th>
+      <th>貨品</th>
+      <th>發票</th>
+     </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td> 愛料理生活購物袋 - 限定（手提）大款 </td>
+      <td>2</td>
+      <td>NT$598</td>
+      <td>未出貨</td>
+      <td>未寄送</td>
+    </tr>
+    <tr>
+      <td>宅配到府運費</td>
+      <td>--</td>
+      <td>NT$60</td>
+      <td>--</td>
+      <td>--</td>
+    </tr>
+  </tbody>
+</table>
+
+<hr/>
+### Sku
+<div class="ic-table"><p>Sku table</p></div>
+
+<table class="table basic-table sku-table">
+  <thead>
+    <tr>
+      <th>品名</th>
+      <th>數量</th>
+      <th>價格</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="media-heading hidden-md hidden-lg"><td>品名</td></tr>
+    <tr class="limit">
+      <td class="media">
+        <span class="img pull-left">
+          <img alt="Icook bag" class="img-responsive" src="http://placehold.it/640x480">
+        </span>
+        <div class="media-body">
+          <span class="title">愛料理生活購物袋 - 限定（手提）大款</span>
+          <span>長 37 x 寬 45 x 底 12 cm</span>
+        </div>
+      </td>
+      <td class="quantity-m">
+        <input id="order_quan_0" name="order_quan_0" type="hidden" value="1">
+        <select class="form-control" id="order_quan_0" name="order_quan_0" track-action="Selector" track-category="Order" track-label="選擇數量" track-on="click">
+          <option value="0">0</option>
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+        </select>
+      </td>
+      <td class="price-m">
+        <div class="price">
+          NT$299
+          <small>NT$349</small>
+        </div>
+      </td>
+    </tr>
+    <tr class="limit ">
+      <td class="media">
+        <div class="media-body">
+          <span class="title">愛料理生活購物袋 - 限定（側背）小款</span>
+          <span></span>
+        </div>
+      </td>
+      <td class="quantity-m">
+        <input id="order_quan_1" name="order_quan_1" type="hidden" value="2">
+        <select class="form-control" id="order_quan_1" name="order_quan_1" track-action="Selector" track-category="Order" track-label="選擇數量" track-on="click">
+          <option value="0">0</option>
+          <option value="1">1</option>
+          <option value="2">2</option>
+          <option value="3">3</option>
+        </select>
+      </td>
+      <td class="price-m">
+        <div class="price">
+          NT$349
+          <small>NT$399</small>
+        </div>
+      </td>
+    </tr>
+    <tr class="fee clearfix">
+      <td class="pull-left">運費&nbsp;&nbsp;<small>不分大小款，凡購買三個愛料理生活購物袋即享免運</small>
+      </td>
+      <td colspan="2">
+        <div class="price pull-right">
+          NT$60
+        </div>
+      </td>
+    </tr>
+    <tr class="total">
+      <td colspan="4">
+        <div>
+          <span>總計&nbsp; </span>NT$<span>0</span><br>
+          <input name="total" type="hidden" value="0">
+          <small class="ng-binding">還差 NT$1,047 就能免運費</small>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+*/
+
+$table-th-bg: #efede8 !default;
+$table-th-text: #555 !default;
+$table-td-text: #888 !default;
+$table-td-border: #ddd !default;
+
+.basic-table {
+  th {
+    background-color: $table-th-bg;
+    color: $table-th-text;
+    font-size: 16px;
+  }
+
+  td {
+    border-color: $table-td-border;
+    color: $table-td-text;
+    font-size: 16px;
+    padding: 20px 10px;
+  }
+
+  // override bootstraps's style
+  > thead > tr > th {
+    border-bottom: 0;
+  }
+
+  > tbody > tr > td {
+    padding: 20px 10px;
+  }
+}
+
+.sku-table {
+  thead {
+    th:nth-child(1) {
+      width: 72%;
+    }
+
+    th:nth-child(2) {
+      width: 14%;
+    }
+
+    th:nth-child(3) {
+      padding-left: 20px;
+    }
+  }
+
+  td:not(.price-m) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .price-m {
+    padding-left: 20px !important;
+  }
+
+  .limit:nth-of-type(1) td {
+    border-top: 0;
+  }
+
+  tr.fee {
+    border-top: 1px solid #ddd;
+
+    td:first-child {
+      color: #564e4a;
+      font-size: 16px;
+      border-top: 0;
+
+      small {
+        color: #555;
+        font-size: 13px;
+      }
+    }
+
+    .price {
+      color: #555;
+    }
+  }
+
+  .total {
+    text-align: right;
+
+    span {
+      font-size: 15px;
+    }
+
+    small {
+      color: #555;
+      font-size: 13px;
+    }
+  }
+
+  .price {
+    color: $orangered;
+
+    small {
+      color: #555;
+      font-size: 13px;
+      text-decoration: line-through;
+    }
+  }
+
+  img {
+    height: 90px;
+    width: 120px;
+  }
+
+  .media-body span {
+    color: #888;
+    display: block;
+
+    &.title {
+      color: #564e4a;
+      font-size: 16px;
+    }
+  }
+}
+

data/app/assets/stylesheets/_typography.scss

@@ -0,0 +1,292 @@
+// -------------
+// Typography
+// -------------
+
+/*doc
+---
+title: Typography
+name: 2_typography
+category: Design elements
+---
+
+Headings, Paragraph, Blockquote, Time format, default definitions also may be customized in multi sites.
+
+### Heading
+
+Here are only briefly list some customization, and please use it carefully, especially when you use it in widgets or other sections.
+
+<div class="ic-headings icook">
+  <small>iCook</small>
+</div>
+
+```html_example
+<h1>h1.愛料理食譜社群網</h1>
+<h2>h2.愛料理食譜社群網</h2>
+<h3>h3.愛料理食譜社群網</h3>
+<h4>h4.愛料理食譜社群網</h4>
+```
+```
+h1 { font-size: 28px; }
+h2 { font-size: 24px; }
+h3 { font-size: 18px; }
+h4 { font-size: 16px; }
+```
+
+<div class="ic-headings market">
+  <small>Market</small>
+</div>
+```html_example
+<h1>h1.愛料理市集</h1>
+<h2>h2.愛料理市集</h2>
+<h3>h3.愛料理市集</h3>
+<h4>h4.愛料理市集</h4>
+```
+```
+h1 { font-size: 22px; }
+h2 { font-size: 18px; }
+h3 { font-size: 18px; }
+h4 { font-size: 19px; }
+```
+
+<div class="ic-headings blog">
+  <small>Blog</small>
+</div>
+```html_example
+<h1>h1.愛料理生活誌</h1>
+<h2>h2.愛料理生活誌</h2>
+<h3>h3.愛料理生活誌</h3>
+<h4>h4.愛料理生活誌</h4>
+<h5>h5.愛料理生活誌</h5>
+<h6>h6.愛料理生活誌</h6>
+```
+```
+h1 { font-size: 34px; }
+h2 { font-size: 30px; }
+h3 { font-size: 26px; }
+h4 { font-size: 24px; }
+h5 { font-size: 18px; }
+h6 { font-size: 16px; }
+```
+
+
+<hr/>
+
+### Paragraph
+Note **DO NOT** forget to check other non-desktop devices...<br/>
+Bet:200
+ter typography better reading experiences.
+
+
+iCook
+
+<div class="ic-paragraph icook">
+  <small>recipe description</small>
+</div>
+
+```html_example
+<p>愛料理站長：法式經典料理不用多說，這是從 4F 習得的食譜，份量調整到只有3~4人份左右，沾法國麵包超好吃的。紅酒的部份，選勃根地產區的任一紅酒，紅酒的量其實是將所有食材淹沒為主，我是把整罐給倒下去了。</p>
+```
+
+```
+p {
+  color: #888;
+  font-size: 15px;
+  letter-spacing: 0.03em;
+}
+```
+<br/>
+
+
+Blog
+
+<div class="ic-paragraph blog">
+  <small>article Paragraph</small>
+</div>
+
+```html_example
+  <p>愛料理站長：法式經典料理不用多說，這是從 4F 習得的食譜，份量調整到只有3~4人份左右，沾法國麵包超好吃的。紅酒的部份，選勃根地產區的任一紅酒，紅酒的量其實是將所有食材淹沒為主，我是把整罐給倒下去了。</p>
+```
+
+```
+p {
+  color: #444;
+  font-size: 16px;
+  letter-spacing: 0.04em;
+  line-height: 1.8em;
+  margin: 1em 0;
+}
+```
+<hr/>
+
+### Blockquote
+Default `background-color: #fafafa;` , and see how to [embed icons](#) in a iCook way.
+
+Blog
+
+<div class="ic-blockquote blog">
+  <small>text is <code>color: #444;</code> and <code>font-size: 14px;</code>.</small><br/>
+  <small>blockquote with <code>padding: 30px 50px 30px 56px;</code></small>.
+</div>
+
+```html_example
+<blockquote>料理是一件幸福的事，分享食譜則是分享幸福給更多的人。</blockquote>
+```
+
+```
+color: #444;
+font-size: 14px;
+padding: 30px 50px 30px 56px;
+```
+<br/>
+
+Market
+
+<div class="ic-blockquote market">
+  <small>text is <code>color: #555;</code> and <code>font-size: 16px;</code>.</small><br/>
+  <small>blockquote with <code>padding: 10px 25px;</code></small>.
+</div>
+
+```html_example
+  <blockquote>料理是一件幸福的事，分享食譜則是分享幸福給更多的人。</blockquote>
+```
+
+```
+color: #555;
+font-size: 16px;
+padding: 10px 25px;
+```
+<hr/>
+
+### Time format
+
+<div class="ic-timeformat icook">
+  <p>iCook</p>
+  <p>recipe cooking time</p>
+  <div class="cooking-time">5 分鐘</div>
+</div>
+
+```html_xample
+<div class="cooking-time">5 分鐘</div>
+```
+
+<br/>
+<div class="ic-timeformat icook">
+  <p>recipe published</p>
+  <div class="recipe-published">2012/12/30 發表</div>
+</div>
+
+```html_xample
+  <div class="recipe-published">2012/12/30 發表</div>
+```
+
+<br/>
+<div class="ic-timeformat blog">
+  <p>Blog</p>
+  <div>發表於 2012/12/30</div>
+</div>
+
+```html_xample
+<div class="recipe-published">發表於 2012/12/30</div>
+```
+
+*/
+
+// headings
+.ic-headings {
+  &.icook + .codeExample {
+    h1 { font-size: 28px; }
+    h2 { font-size: 24px; }
+    h3 { font-size: 18px; }
+    h4 { font-size: 16px; }
+  }
+
+  &.market + .codeExample {
+    h1 { font-size: 22px; }
+    h2 { font-size: 18px; }
+    h3 { font-size: 18px; }
+    h4 { font-size: 19px; }
+  }
+
+  &.blog + .codeExample {
+		h1 { font-size: 34px; }
+		h2 { font-size: 30px; }
+		h3 { font-size: 26px; }
+		h4 { font-size: 24px; }
+		h5 { font-size: 18px; }
+		h6 { font-size: 16px; }
+  }
+}
+
+// paragraph
+.ic-paragraph {
+  &.icook + .codeExample p {
+    color: #888;
+    font-size: 15px;
+    letter-spacing: 0.03em;
+  }
+
+  &.blog + .codeExample p {
+    color: #444;
+    font-size: 16px;
+    letter-spacing: 0.04em;
+    line-height: 1.8em;
+    margin: 1em 0;
+  }
+}
+
+// blockquote
+%blockquote {
+  @include icon("\f10d");
+
+  background-color: #fafafa;
+  border-left: 0;
+  position: relative;
+
+  &::before {
+    color: #f06354;
+    font-size: 16px;
+    line-height: 1;
+    margin-right: 10px;
+    position: absolute;
+  }
+}
+
+.ic-blockquote.blog + .codeExample blockquote {
+  @extend %blockquote;
+
+  color: #444;
+  font-size: 14px;
+  padding: 30px 50px 30px 56px;
+
+  &::before {
+    left: 20px;
+    top: 20px;
+  }
+}
+
+.ic-blockquote.market + .codeExample blockquote {
+  @extend %blockquote;
+
+  color: #555;
+  font-size: 16px;
+  padding: 10px 25px;
+
+  &::before {
+    left: 10px;
+    top: 10px;
+  }
+}
+
+// time format
+.cooking-time {
+  @include icon("\f017");
+
+  color: #999;
+  font-size: 16px;
+}
+
+.recipe-published {
+  color: #8c8783;
+  font-size: 14px;
+}
+