cupboard 0.2.1 → 0.2.2

data/app/assets/stylesheets/base/{_table.scss → _tables.scss}

@@ -1,12 +1,12 @@
 // ----------------------------
-// Base - table
+// Base - tables
 // ----------------------------
 
 /*doc
 ---
 parent: 01_base
 title: Tables
-name: 4_tables
+name: 05_tables
 ---
 
 Table view examples (in Market)
@@ -127,7 +127,7 @@ Table view examples (in Market)
 </table>
 */
 
-$table-th-bg: #efede8 !default;
+$table-th-bg: $light-gray !default;
 $table-th-text: #555 !default;
 $table-td-text: #888 !default;
 $table-td-border: #ddd !default;
@@ -185,21 +185,21 @@ $table-td-border: #ddd !default;
   }
 
   tr.fee {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid $table-td-border;
 
     td:first-child {
-      color: #564e4a;
+      color: $brown;
       font-size: 16px;
       border-top: 0;
 
       small {
-        color: #555;
+        color: $table-th-text;
         font-size: 13px;
       }
     }
 
     .price {
-      color: #555;
+      color: $table-th-text;
     }
   }
 
@@ -211,16 +211,16 @@ $table-td-border: #ddd !default;
     }
 
     small {
-      color: #555;
+      color: $table-th-text;
       font-size: 13px;
     }
   }
 
   .price {
-    color: $orangered;
+    color: $orange-red;
 
     small {
-      color: #555;
+      color: $table-th-text;
       font-size: 13px;
       text-decoration: line-through;
     }
@@ -232,11 +232,11 @@ $table-td-border: #ddd !default;
   }
 
   .media-body span {
-    color: #888;
+    color: $table-td-text;
     display: block;
 
     &.title {
-      color: #564e4a;
+      color: $brown;
       font-size: 16px;
     }
   }

data/app/assets/stylesheets/base/_typography.scss

@@ -6,7 +6,7 @@
 ---
 parent: 01_base
 title: Typography
-name: 1_typography
+name: 02_typography
 ---
 
 ### Fonts
@@ -26,74 +26,28 @@ Currently we're using
 
 ### 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>
+Here are only briefly list some customized headings, and please use it carefully, especially when you use it in sidebar or other sections.
 
 ```html_example
-<h1>h1.愛料理食譜社群網</h1>
-<h2>h2.愛料理食譜社群網</h2>
-<h3>h3.愛料理食譜社群網</h3>
-<h4>h4.愛料理食譜社群網</h4>
+<h1>料理是一件幸福的事 H1 title</h1>
+<h2>料理是一件幸福的事 H2 title</h2>
+<h3>料理是一件幸福的事 H3 title</h3>
+<h4>料理是一件幸福的事 H4 title</h4>
 ```
 ```
 h1 { font-size: 28px; }
 h2 { font-size: 24px; }
-h3 { font-size: 18px; }
+h3 { font-size: 20px; }
 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/>
 Better typography better reading experiences.
 
-
-iCook
-
-<div class="ic-paragraph icook">
-  <small>recipe description</small>
-</div>
+<div class="ic-paragraph icook"></div>
 
 ```html_example
 <p>愛料理站長：法式經典料理不用多說，這是從 4F 習得的食譜，份量調整到只有3~4人份左右，沾法國麵包超好吃的。紅酒的部份，選勃根地產區的任一紅酒，紅酒的量其實是將所有食材淹沒為主，我是把整罐給倒下去了。</p>
@@ -101,187 +55,57 @@ iCook
 
 ```
 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;
+  font-size: 14px;
+  line-height: 24px;
 }
 ```
 <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>
+<div class="ic-blockquote blog"></div>
 
 ```html_example
 <blockquote>料理是一件幸福的事，分享食譜則是分享幸福給更多的人。</blockquote>
 ```
 
 ```
-color: #444;
-font-size: 14px;
-padding: 30px 50px 30px 56px;
+blockquote {
+  border-left: 4px solid $red;
+  color: $brown-light20;
+  font-size: 18px;
+  padding-left: 15px;
+}
 ```
 <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/>
+### Small text
 
-### 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>
+```html_example
+<small>料理是一件幸福的事，分享食譜則是分享幸福給更多的人。</small>
 ```
-
-<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>
+small {
+  font-size: 12px;
+  line-height: 18px;
+}
 ```
 
-<hr/>
-### Byline
-
-<div class="row">
-	<div class="col-xs-12 col-md-3">
-		<p>recipe card - iCook</p>
-		<p class="byline">by <a href="#">愛料理</a></p>
-	</div>
-	<div class="col-xs-12 col-md-5 tv-sub-info">
-		<p>TV</p>
-		<span class="byline">
-      於&nbsp; 2015/2/17&nbsp;發表
-      <a href="#">闔家團圓年菜</a>
-		  阿嬌
-    </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>
-
-
 */
 
-// default global body styles
-$byline-text: #a5a5a5 !default;
-$byline-link: #777 !default;
-$material-text: #aa8f83 !default;
-$sku-small-text: #555 !default;
-
 // 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;
-  }
+blockquote {
+  border-left: 4px solid $red;
+  color: $brown-light20;
+  font-size: 18px;
+  padding: 0 0 0 15px;  // override bootstrap default
 }
 
-// time format
-.cooking-time {
-  @include icon("\f017");
-
-  color: #999;
-  font-size: 16px;
-}
-
-.recipe-published {
-  color: #8c8783;
-  font-size: 14px;
+// small text
+small {
+  color: $brown;
+  font-size: 12px;
+  line-height: 18px;
 }
 
-// byline and small text
-.byline {
-  color: $byline-text;
-
-  a {
-    color: $byline-link;
-  }
-}
-
-.material {
-  color: $material-text;
-  font-size: 13px;
-  max-height: 40px;
-}

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

@@ -30,9 +30,19 @@ category: Components
   </div>
 </div>
 <br/>
-<div>
-  <p>vip</p>
-  <div>愛料理<span class="badge-vip"></span></div>
+<div class="row">
+  <div class="col-xs-12 col-md-3">
+    <p>vip</p>
+    <div>愛料理<span class="badge-vip"></span></div>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <p>sponsor</p>
+    <div><span class="badge-sponsor">贊助</span></div>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <p>dish reply</p>
+    <div><span class="badge-author">作者回覆</span></div>
+  </div>
 </div>
 
 ```html_example
@@ -41,15 +51,18 @@ category: Components
 <div class="badge-new">炒飯食譜募集活動</div>
 <div class="badge-support">愛料理市集</div>
 <div>愛料理<span class="badge-vip"></span></div>
+<div><span class="badge-sponsor">贊助</span></div>
+<div><span class="badge-author">作者回覆</span></div>
 ```
 
 */
 
 $badge-brand-bg: #ac8b86 !default;
-$badge-new-bg: $orange !default;
+$badge-new-bg: $orange-red !default;
 $badge-pr-bg: #aa8f83 !default;
+$badge-author-bg: $orange-red !default;
 $badge-support-bg: #999 !default;
-$badge-vip-bg: $orange !default;
+$badge-vip-bg: $red !default;
 
 @each $type, $content, $color in
   (brand, "品牌", $badge-brand-bg),
@@ -74,17 +87,41 @@ $badge-vip-bg: $orange !default;
   display: inline-block;
   height: 17px;
   margin-left: 5px;
-  padding: 0 8px;
-  width: 33px;
+  text-align: center;
+  width: 34px;
 
   &::after {
     background-image: image-url("vip-icon.svg");
+    background-position: 0 2px;
     background-repeat: no-repeat;
     content: "";
     display: inline-block;
-    height: 10px;
-    padding: 0 8px;
-    width: 18px;
+    height: 100%;
+    vertical-align: middle;
+    width: 60%;
   }
 }
 
+.badge-sponsor {
+  background-color: $light-gray;
+  border-radius: 17px;
+  color: $brown;
+  font-size: 12px;
+  font-weight: bold;
+  height: 26px;
+  line-height: 22px;
+  margin-right: 10px;
+  padding: 3px 5px 3px 7px;
+  text-align: center;
+  width: 46px;
+}
+
+.badge-author {
+  background-color: $badge-author-bg;
+  border-radius: 30px;
+  color: $white;
+  font-size: 12px;
+  line-height: 1;
+  padding: 5px 11px;
+}
+

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

@@ -12,18 +12,19 @@ category: Components
 ```html_example
 <div>
   <ol class="breadcrumb">
-    <li><a href="#">逛食譜</a></li>
-    <li><a href="#">每日菜色</a></li>
-    <li><a href="#">麵食</a></li>
-    <li class="active">餛飩抄手</li>
+    <li><a href="#">全部分類</a></li>
+    <li><a href="#">蛋糕</a></li>
+    <li class="active">磅蛋糕</li>
   </ol>
 </div>
 ```
 
 */
 
-$breadcrumb-link: $ic-brown !default;
-$breadcrumb-link-active: #999 !default;
+$breadcrumb-link: $brown !default;
+$breadcrumb-link-hover: $brown-light30 !default;
+$breadcrumb-active: $red !default;
+$breadcrumb-icon: $brown !default;
 
 .breadcrumb {
   background-color: transparent; // override bootstrap
@@ -32,16 +33,31 @@ $breadcrumb-link-active: #999 !default;
   padding-left: 0;
   padding-top: 0;
 
-  > li + li {
-    @include icon("\f105");
+  > li {
+    font-size: 16px;
+
+    + li::before {
+      color: $breadcrumb-icon;
+      content: "\e80d";
+      font-family: "icookfont";
+      font-size: 12px;
+      margin-right: 5px;
+      padding: 0;
+      vertical-align: text-bottom;
+      width: 12px;
+    }
   }
 
   a {
     color: $breadcrumb-link;
+
+    &:hover {
+      color: $breadcrumb-link-hover;
+    }
   }
 
   .active {
-    color: $breadcrumb-link-active;
+    color: $breadcrumb-active;
   }
 }