cupboard 0.2.0

data/app/assets/stylesheets/components/_cards.scss

@@ -0,0 +1,12 @@
+// --------------------------------
+// Components - Cards
+// --------------------------------
+
+/*doc
+---
+title: Cards
+name: 17_cards
+category: UI components
+---
+
+*/

data/app/assets/stylesheets/components/_grid.scss

@@ -0,0 +1,45 @@
+// --------------------------------
+// Grid
+// --------------------------------
+
+/*doc
+---
+title: Grid
+name: 03_grid
+category: UI components
+---
+
+<div class="ic-grid">
+  <div class="row">
+    <div class="col-xs-12">
+      <p>Mainly use 4 and 8 column of bootstrap's grid system for our page layouts.</p>
+    </div>
+    <div class="clearfix">
+      <div class="col-xs-12 col-md-8">
+        <p>.col-xs-12. col-md-8</p>
+      </div>
+      <div class="col-xs-12 col-md-4">
+        <p>.col-xs-12 .col-md-4</p>
+      </div>
+    </div>
+    <div class="col-xs-12">
+      <p>Nesting grids</p>
+    </div>
+    <div class="clearfix nested">
+      <div class="col-xs-12 col-md-8">
+        <p>.col-xs-12 .col-md-8</p>
+        <div class="row">
+          <div class="col-xs-12 col-md-4">
+            <p>.col-xs-12 .col-md-4</p>
+          </div>
+          <div class="col-xs-12 col-md-8">
+            <p>.col-xs.12 .col-md-8</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+*/
+

data/app/assets/stylesheets/components/_navigations.scss

@@ -0,0 +1,12 @@
+// --------------------------------
+// Components - Navigation
+// --------------------------------
+
+/*doc
+---
+title: Navigations
+name: 08_navigations
+category: UI components
+---
+
+*/

data/app/assets/stylesheets/components/_pagination.scss

@@ -0,0 +1,166 @@
+// --------------------------------
+// Navigation - pagination
+// --------------------------------
+
+/*doc
+---
+title: Pagination
+name: 07_pagination
+category: UI components
+---
+
+<div><p>for some reasons we're using gem <code>icookfont-sass</code> and <code>icook-kaminari-views</code> now</p></div>
+
+```html_example
+<nav>
+  <ul class="pagination">
+    <li class="page active"><a href="#">1</a></li>
+    <li class="page"><a rel="next" href="#">2</a></li>
+    <li class="page"><a href="#">3</a></li>
+    <li class="page gap disabled"><a href="#" onclick="return false;">...</a></li>
+    <li class="next_page"><a rel="next" href="#"></a></li>
+  </ul>
+</nav>
+```
+```html_example
+<nav>
+  <ul class="pagination">
+    <li class="prev"><a rel="prev" href="#"></a></li>
+    <li class="page"><a href="#">1</a></li>
+    <li class="page active"><a href="#">2</a></li>
+    <li class="page"><a href="#">3</a></li>
+    <li class="next_page"><a rel="next" href="#"></a></li>
+  </ul>
+</nav>
+```
+
+<hr/>
+<p>pagination on mobile</p>
+```html_example
+<nav>
+  <ul class="pagination">
+    <li class="prev"><a rel="prev" href="#"></a></li>
+    <li class="page active"><a href="#">1</a></li>
+    <li class="next_page"><a rel="next" href="#"></a></li>
+  </ul>
+</nav>
+```
+
+<hr/>
+<p>disabled pagination link</p>
+```html_example
+<nav>
+  <ul class="pagination">
+    <li class="prev disabled"><a rel="prev" href="#"></a></li>
+    <li class="page active"><a href="#">1</a></li>
+    <li class="next_page disabled"><a rel="next" href="#"></a></li>
+  </ul>
+</nav>
+```
+
+*/
+$pagi-link-bg: $white !default;
+$pagi-link-text: $ic-brown !default;
+$pagi-link-hover-bg: $ic-brown !default;
+$pagi-link-hover-text: $white !default;
+$pagi-link-active-bg: $ic-brown !default;
+$pagi-link-active-text: $white !default;
+$pagi-link-border: #e2e0db !default;
+$pagi-link-disabled-bg: #efede8 !default;
+$pagi-link-disabled-text: #bcbab5 !default;
+
+.pagination {
+  clear: both;
+  margin: 20px auto 0;
+  text-align: center;
+
+  > .disabled > a {
+    &,
+    &:hover {
+      background-color: $pagi-link-disabled-bg;
+      color: $pagi-link-disabled-text;
+    }
+  }
+
+  li {
+    a {
+      border-color: $pagi-link-border;
+      color: $pagi-link-text;
+    }
+
+    &:hover a {
+      background-color: $pagi-link-hover-bg;
+      color: $pagi-link-hover-text;
+      font-size: 14px;
+    }
+  }
+
+  .active a,
+  .active:hover a {
+    background-color: $pagi-link-active-bg;
+    border-color: $pagi-link-border;
+    color: $pagi-link-active-text;
+  }
+
+  .prev a,
+  .next_page a {
+    display: block;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .prev a {
+    @include icon("\e812");
+
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+
+    &::before {
+      font-family: "icookfont";
+      margin-right: 0;
+    }
+  }
+
+  .next_page a {
+    @include icon("\e811");
+
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+
+    &::before {
+      font-family: "icookfont";
+      margin-right: 0;
+    }
+  }
+
+  .first,
+  .last,
+  .gap {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .pagination {
+    li.page {
+      display: none;
+
+      &.active {
+        display: inline;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .pagination {
+    li.page {
+      display: none;
+
+      &.active {
+        display: inline;
+      }
+    }
+  }
+}
+

data/app/assets/stylesheets/components/_search-form.scss

@@ -0,0 +1,56 @@
+// --------------------------------
+// Form components - search form
+// --------------------------------
+
+/*doc
+---
+title: Search form
+name: 14_search_form
+category: UI components
+---
+
+```html_example
+<div class="to-fulltext-search">
+  <form id="global-search">
+    <input class="search-input" placeholder="搜尋全站食譜、食材" type="text">
+    <button type="submit" class="btn btn-search">&nbsp;</button>
+  </form>
+</div>
+```
+
+*/
+
+.to-fulltext-search {
+  box-sizing: border-box;
+  background-color: #fff;
+  border: 1px solid #ebe5e1;
+  display: block;
+  font-size: 13px;
+  height: 30px;
+  max-width: 220px;
+  position: relative;
+  width: 100%;
+
+  .search-input {
+    background-color: transparent;
+    border: none;
+    padding: 6px 6px 6px 12px;
+    width: 100%;
+  }
+
+  .btn-search {
+    @include icon("\f002");
+
+    background-color: transparent;
+    border-radius: 0;
+    color: #888;
+    display: block;
+    font-size: 13px;
+    height: 20px;
+    padding: 0;
+    position: absolute;
+    right: 3px;
+    top: 5px;
+    width: 20px;
+  }
+}

data/app/assets/stylesheets/components/_sorting-cards.scss

@@ -0,0 +1,76 @@
+// --------------------------------
+// Navigation - sorting cards
+// --------------------------------
+
+/*doc
+---
+title: Sorting cards
+name: 13_sort_cards
+category: UI components
+---
+
+```html_example
+<ul class="sort-cards">
+  <li>排序&nbsp;&nbsp;|&nbsp;</li>
+  <li class="active">
+    <a href="#"><span>最近發表</span></a>
+	</li>
+  <li>
+    <a href="#"><span>依收藏數</span></a>
+  </li>
+</ul>
+```
+<hr/>
+sorting with badge
+
+```html_example
+<ul class="sort-cards">
+  <li>排序&nbsp;&nbsp;|&nbsp;</li>
+  <li class="active">
+    <a href="#"><span>最近發表</span></a>
+	</li>
+  <li>
+    <a href="#"><span>依收藏數</span></a>
+  </li>
+  <span class="badge-vip"></span>
+</ul>
+```
+*/
+
+$sort-cards-link: #999 !default;
+$sort-cards-link-hover: #5c4545 !default;
+
+.sort-cards {
+  margin-bottom: 0;
+  padding-bottom: 10px;
+  padding-top: 3px;
+  text-align: right;
+
+  a {
+    color: $sort-cards-link;
+
+    &:hover {
+      color: $sort-cards-link-hover;
+    }
+
+    &:first-child {
+      margin-left: 5px;
+    }
+  }
+
+  li {
+    color: $sort-cards-link-hover;
+    display: inline-block;
+
+    &.active a {
+      color: $sort-cards-link-hover;
+    }
+  }
+
+  .badge-vip {
+    margin-left: 3px;
+    position: relative;
+    top: 1px;
+  }
+}
+

data/app/assets/stylesheets/components/_text.scss

@@ -0,0 +1,166 @@
+// ----------------------------
+// Text
+// ----------------------------
+
+/*doc
+---
+title: Text
+name: 01_text
+category: UI Components
+---
+
+Heading group, byline, small text, badge
+
+### Heading group
+
+<div class="row">
+	<div class="col-xs-12 col-md-4">
+		<p>Heading with link</p>
+		<h3 class="clearfix head-link">熱門食譜<a href="#" class="more pull-right">更多</a></h3>
+	</div>
+	<div class="col-xs-12 col-md-8">
+		<p>Heading with text</p>
+		<h3 class="clearfix head-text">逛食譜<span class="pull-right">超過 60,000 道食譜等妳來逛</span></h3>
+	</div>
+</div>
+<br/>
+<div class="row">
+	<div class="col-xs-12 col-md-4">
+		<p>Branding - iCook</p>
+		<div class="channel-name">
+			<small>食譜社群網</small><br>
+			<span>愛料理</span>
+		</div>
+	</div>
+	<div class="col-xs-12 col-md-8">
+		<p>Branding - Market</p>
+		<h3 class="brand-name"><small>iCook 愛料理</small><br>愛料理生活購物袋</h3>
+	</div>
+</div>
+
+<hr/>
+### Byline
+
+<div class="row">
+	<div class="col-xs-12 col-md-3">
+		<p>recipe card - iCook</p>
+		<p class="username">by <a href="#">愛料理</a></p>
+	</div>
+	<div class="col-xs-12 col-md-5 tv-sub-info">
+		<p>TV</p>
+		<span class="time">
+		於&nbsp; 2015/2/17&nbsp;發表
+		</span>
+		<span><a href="#">闔家團圓年菜</a></span>
+		<span>阿嬌</span>
+	</div>
+</div>
+
+<hr/>
+### Small text
+<div class="row">
+	<div class="col-xs-12 col-md-6">
+		<p>recipe card (list-card) - iCook</p>
+		<small class="material">食材：豬絞肉、青蔥(切末)、水餃皮、清水、醬油、味霖、鹽、白胡椒粉</small>
+	</div>
+	<div class="col-xs-12 col-md-6">
+		<p>sku - Market</p>
+		<small class="sku-small">不分大小款，凡購買三個愛料理生活購物袋即享免運</small>
+	</div>
+</div>
+
+
+*/
+
+$head-link-more: #888 !default;
+$head-text: #888 !default;
+$byline-text: #a5a5a5 !default;
+$byline-link: #777 !default;
+$tv-sub-info-text: #817a77 !default;
+$tv-sub-info-link: $ic-brown !default;
+$material-text: #aa8f83 !default;
+$sku-small-text: #555 !default;
+
+.head-link,
+.head-text {
+  color: $ic-brown;
+}
+
+.head-link {
+  font-size: 18px;
+
+  .more {
+    color: $head-link-more;
+    line-height: 19px;
+
+    &:hover {
+      color: $orange;
+      text-decoration: none;
+    }
+	}
+}
+
+.head-text {
+  font-size: 16px;
+  max-width: 400px;
+
+  span {
+    color: $head-text;
+    font-weight: normal;
+	}
+}
+
+.channel-name {
+  small {
+    color: $orange;
+    font-size: 12px;
+  }
+
+  span {
+    color: $ic-brown;
+    display: block;
+    font-size: 24px;
+  }
+}
+
+.brand-name {
+  color: $ic-brown;
+  font-size: 20px;
+  margin-top: 0;
+
+  small {
+    color: $ic-brown;
+    display: inline-block;
+    font-size: 13px;
+    margin-bottom: 10px;
+  }
+}
+
+p.username {
+  color: $byline-text;
+
+  a {
+    color: $byline-link;
+    font-size: 13px;
+  }
+}
+
+.tv-sub-info {
+  color: $tv-sub-info-text;
+
+  a {
+    color: $tv-sub-info-link;
+    margin: 0 10px;
+  }
+}
+
+.material {
+  color: $material-text;
+  font-size: 13px;
+  max-height: 40px;
+}
+
+.sku-small {
+  color: $sku-small-text;
+  font-size: 13px;
+}