cupboard 0.2.0 → 0.2.1

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

@@ -1,12 +1,12 @@
 // --------------------------------
-// Navigation - breadcrumb
+// Components - Breadcrumbs
 // --------------------------------
 
 /*doc
 ---
-title: Breadcrumb
-name: 06_breadcrumb
-category: UI components
+name: 04_breadcrumbs
+title: Breadcrumbs
+category: Components
 ---
 
 ```html_example
@@ -32,7 +32,7 @@ $breadcrumb-link-active: #999 !default;
   padding-left: 0;
   padding-top: 0;
 
-  & > li + li {
+  > li + li {
     @include icon("\f105");
   }
 
@@ -44,3 +44,4 @@ $breadcrumb-link-active: #999 !default;
     color: $breadcrumb-link-active;
   }
 }
+

data/app/assets/stylesheets/{base → components}/_buttons.scss

@@ -1,12 +1,12 @@
 // --------------------------------
-// Buttons
+// Components - buttons
 // --------------------------------
 
 /*doc
 ---
 title: Buttons
-name: 5_Buttons
-category: Design elements
+name: 01_Buttons
+category: components
 ---
 
 basic buttons, fram buttons, card Buttons

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

@@ -5,8 +5,8 @@
 /*doc
 ---
 title: Cards
-name: 17_cards
-category: UI components
+name: 02_cards
+category: Components
 ---
 
 */

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

@@ -0,0 +1,12 @@
+// ---------------------------
+// Components - Comments
+// ---------------------------
+
+/*doc
+---
+title: Comments
+name: 12_comments
+category: Components
+---
+
+*/

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

@@ -0,0 +1,12 @@
+// ---------------------------
+// Components - Covers
+// ---------------------------
+
+/*doc
+---
+title: Covers
+name: 13_covers
+category: Components
+---
+
+*/

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

@@ -0,0 +1,12 @@
+// --------------------------------
+// Components - Features
+// --------------------------------
+
+/*doc
+---
+title: Features
+name: 15_features
+category: Components
+---
+
+*/

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

@@ -0,0 +1,15 @@
+// --------------------------------
+// Components - icons
+// --------------------------------
+
+/*doc
+---
+title: icons
+name: icons
+category: icons
+---
+
+We mainly use both <a href="http://fontawesome.io/" target="_blank">Fontawesome</a> and <a href="https://github.com/polydice/icookfont-sass" target="_blank">icookfont-sass</a> for our iconfonts. both they were installed as gems by ruby on rails. some others use images like svg or png for UI designs.
+
+*/
+

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

@@ -0,0 +1,12 @@
+// --------------------------------
+// Components - Modals
+// --------------------------------
+
+/*doc
+---
+title: Modals
+name: 16_modals
+category: Components
+---
+
+*/

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

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

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

@@ -1,12 +1,12 @@
 // --------------------------------
-// Navigation - pagination
+// Components - Pagination
 // --------------------------------
 
 /*doc
 ---
+name: 05_pagination
 title: Pagination
-name: 07_pagination
-category: UI components
+category: Components
 ---
 
 <div><p>for some reasons we're using gem <code>icookfont-sass</code> and <code>icook-kaminari-views</code> now</p></div>
@@ -34,8 +34,8 @@ category: UI components
 </nav>
 ```
 
-<hr/>
-<p>pagination on mobile</p>
+<h2>Pagination on mobile</h2>
+
 ```html_example
 <nav>
   <ul class="pagination">
@@ -46,8 +46,8 @@ category: UI components
 </nav>
 ```
 
-<hr/>
-<p>disabled pagination link</p>
+<h2>Disabled pagination link</h2>
+
 ```html_example
 <nav>
   <ul class="pagination">

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

@@ -0,0 +1,12 @@
+// --------------------------------
+// Components - Recipes
+// --------------------------------
+
+/*doc
+---
+title: Recipes
+name: 08_recipes
+category: Components
+---
+
+*/

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

@@ -1,12 +1,12 @@
 // --------------------------------
-// Form components - search form
+// Components - Search form
 // --------------------------------
 
 /*doc
 ---
 title: Search form
-name: 14_search_form
-category: UI components
+name: 11_search_form
+category: Components
 ---
 
 ```html_example

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

@@ -0,0 +1,12 @@
+// --------------------------------
+// Components - Sidebars
+// --------------------------------
+
+/*doc
+---
+title: Sidebars
+name: 17_sidebars
+category: Components
+---
+
+*/

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

@@ -1,12 +1,12 @@
 // --------------------------------
-// Navigation - sorting cards
+// Components - Sorting cards
 // --------------------------------
 
 /*doc
 ---
 title: Sorting cards
-name: 13_sort_cards
-category: UI components
+name: 10_sort_cards
+category: Components
 ---
 
 ```html_example

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

@@ -0,0 +1,12 @@
+// --------------------------------
+// Components - Users
+// --------------------------------
+
+/*doc
+---
+title: Users
+name: 14_users
+category: Components
+---
+
+*/

data/app/assets/stylesheets/components/alerts/_alert-global.scss

@@ -1,16 +1,15 @@
 // --------------------------------
-// Alert
+// Components - Alerts
 // --------------------------------
 
 /*doc
 ---
-title: Alert
-name: 04_Alert
-category: UI components
+parent: 06_alerts
+name: 01_basic_alerts
+title: Basic alerts
 ---
 
-## Basic Alert
-<p>basic alert</p>
+don't forget the `.alert` class as the base
 
 ```html_example
 <div class="alert alert-error">Error</div>
@@ -21,7 +20,7 @@ category: UI components
 ```
 
 ## Alert with icon
-<p><small>simply add `.alert-icon` class</small></p>
+simply add `.alert-icon` class
 
 ```html_example
 <div class="alert alert-error alert-icon">Error</div>
@@ -32,7 +31,7 @@ category: UI components
 ```
 
 ## Dismissible alert
-<p><small>alert can be closed by add `.alert-icon` class and `<a>` tag with `.close` class</small></p>
+alert can be closed by add `.alert-icon` class and `<a>` tag with `.close` class
 
 ```html_example
 <div class="alert alert-error alert-icon alert-dismissible">
@@ -52,8 +51,8 @@ category: UI components
 </div>
 ```
 
-## link in alert
-<p><small>simply add `.alert-link` class to `<a>` tag in alert </small></p>
+## Link in alert
+simply add `.alert-link` class to `<a>` tag in alert
 
 ```html_example
 <div class="alert alert-error alert-icon alert-dismissible">

data/app/assets/stylesheets/components/alerts/_alert-market.scss

@@ -1,16 +1,16 @@
 // --------------------------------
-// Status messaging
+// Components - Alerts (Market)
 // --------------------------------
 
 /*doc
 ---
-title: Status
-name: 05_status
-category: UI components
+parent: 06_alerts
+name: 02_alert_market
+title: Market notices
 ---
 
-### Market status notice
-<p>link in notice</p>
+### Link in notice
+don't forget the `.notice` class as the base
 
 ```html_example
 <div class="notice notice-unfinished">
@@ -31,8 +31,8 @@ category: UI components
 </div>
 ```
 
-<hr/>
-<p>list in notice</p>
+---
+### List in notice
 
 ```html_example
 <div class="notice notice-unfinished">
@@ -44,17 +44,6 @@ category: UI components
   </ul>
 </div>
 ```
-
-<hr/>
-### No result status
-<div class="ic-no-result"><p>no recipes/dishes</p></div>
-
-```html_example
-<div class="no-result">
-  <p>目前沒有任何新的食譜或料理喔，趕快去 <a href="#">發表新食譜</a> 吧！</p>
-  <img src="/images/no-result.png" alt="No result">
-</div>
-```
 */
 
 // notice
@@ -67,9 +56,6 @@ $notice-preparing-bg: $white !default;
 $notice-expired-text: $black !default;
 $notice-expired-bg: #e6e6e6 !default;
 $notice-list-item-text: #888 !default;
-// no-result
-$no-result-bg: #f9f8f6 !default;
-$no-result-text: #999 !default;
 
 @each $type, $text-color, $bg-color in
   (unfinished, $notice-unfinished-text, $notice-unfinished-bg),
@@ -102,28 +88,3 @@ $no-result-text: #999 !default;
   }
 }
 
-// no result
-.no-result {
-  background-color: $no-result-bg;
-  border-radius: 4px;
-  color: $no-result-text;
-  margin: 50px auto;
-  padding: 20px;
-  position: relative;
-
-  a {
-    color: $no-result-text;
-    text-decoration: underline;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  img {
-    bottom: 20px;
-    position: absolute;
-    right: 20px;
-    width: 90px;
-  }
-}

data/app/assets/stylesheets/components/alerts/_alert-no-result.scss

@@ -0,0 +1,46 @@
+// --------------------------------
+// Components - Alerts (No result)
+// --------------------------------
+
+/*doc
+---
+parent: 06_alerts
+name: 03_alert_no_result
+title: No result
+---
+
+```html_example
+<div class="no-result">
+  <p>目前沒有任何新的食譜或料理喔，趕快去 <a href="#">發表新食譜</a> 吧！</p>
+  <img src="/images/no-result.png" alt="No result">
+</div>
+```
+*/
+
+$no-result-bg: #f9f8f6 !default;
+$no-result-text: #999 !default;
+
+.no-result {
+  background-color: $no-result-bg;
+  border-radius: 4px;
+  color: $no-result-text;
+  margin: 50px auto;
+  padding: 20px;
+  position: relative;
+
+  a {
+    color: $no-result-text;
+    text-decoration: underline;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  img {
+    bottom: 20px;
+    position: absolute;
+    right: 20px;
+    width: 90px;
+  }
+}

data/app/assets/stylesheets/components/cards/_brand-product-card.scss

@@ -0,0 +1,72 @@
+@import "compass/typography/text/ellipsis";
+// --------------------------------
+// Cards - brand product card
+// --------------------------------
+
+/*doc
+---
+parent: 02_cards
+name: 4_brand_product_card
+title: Brand product card
+---
+
+<div class="brand-product">
+  <div class="media list-card product-card" data-recipe-id="1771330">
+    <a class="visible-xs" style="display:block;height:100%;width:100%;position:absolute;z-index:2;left:0;top:0;" href="#"></a>
+    <a title="愛料理購物袋" class="pull-left" href="#">
+      <img alt="愛料理購物袋" class="img-responsive" src="images/recipe-default.png">
+    </a>
+    <div class="media-body card-info">
+      <a title="愛料理購物袋" datatitle="愛料理購物袋" itemprop="name" href="#">愛料理購物袋</a>
+      <span class="sub-title hidden-xs">自有品牌商品 大小款獨家發售中</span>
+      <p itemprop="description">愛料理購物袋，陪妳買菜的好夥伴！共同裝載著對料理的熱情，與日常生活的美好。</p>
+      <div>
+        <p class="price">
+          售價：$<span>449/個"</span>
+  </p>      <a class="btn btn-details btn-frame col-sm-4 col-md-3 pull-right hidden-xs" href="#">看詳細介紹</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+*/
+
+// # brands/product
+$brand-product-sub-title: #ac8b80 !default;
+$brand-product-price: #aa8f83 !default;
+
+.brand-product {
+  .product-card {
+
+    img {
+      height: 100%;
+    }
+
+    .card-info {
+      p {
+        margin-bottom: 10px;
+        height: 3em;
+      }
+    }
+
+    .sub-title {
+      color: $brand-product-sub-title;
+      font-size: 12px;
+      margin-bottom: 5px;
+    }
+
+    p.price {
+      color: $brand-product-price;
+      font-size: 14px;
+      float: left;
+      height: 1.3em;
+    }
+
+    .btn-frame {
+      font-size: 13px;
+      height: 30px;
+      text-decoration: none;
+      width: 110px;
+    }
+  }
+}

data/app/assets/stylesheets/components/cards/_dish-card.scss

@@ -4,8 +4,8 @@
 
 /*doc
 ---
-parent: 17_cards
-name: dish_card
+parent: 02_cards
+name: 3_dish_card
 title: Dish card
 ---
 
@@ -66,7 +66,6 @@ title: Dish card
   </div>
 </div>
 
-
 */
 
 @import "compass/typography/text/ellipsis";

data/app/assets/stylesheets/components/cards/_feeds-card.scss

@@ -0,0 +1,147 @@
+@import "compass/typography/text/ellipsis";
+
+// --------------------------------
+// Components - Cards - blog feed
+// --------------------------------
+
+/*doc
+---
+parent: 02_cards
+title: Feeds card
+name: 7_feeds_card
+---
+
+<div class="channel-feeds">
+  <ul class="clearfix">
+    <li>
+      <small>blog feed</small>
+      <a href="#" title="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹">
+        <span class="img">
+          <img alt="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹" src="/images/recipe-default.png">
+        </span>
+        <span>【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹</span>
+      </a>
+    </li>
+    <li>
+      <small>tv feed</small>
+      <a title="懶人電鍋紅豆湯" class="video" target="_blank" href="#">
+        <div>
+          <div class="length">0:46</div>
+          <span class="img"><img src="/images/recipe-default.png" alt="懶人電鍋紅豆湯"></span>
+          <div class="mask"></div>
+        </div>
+        <span>熱紅豆湯 x 懶人煮法</span>
+      </a>
+    </li>
+  </ul>
+</div>
+
+*/
+
+$recipe-channel-feeds-tv-mask-bg: rgba(86, 78, 73, 0.4) !default;
+$recipe-channel-feeds-tv-mask-icon: $white !default;
+$recipe-channel-feeds-tv-length-bg: rgba(86, 78, 73, 0.8) !default;
+$recipe-channel-feeds-tv-length-text: $white !default;
+
+.channel-feeds {
+  ul {
+    padding-left: 0;
+  }
+
+  li {
+    float: left;
+    list-style-type: none;
+    max-width: 172px;
+
+    + li {
+      margin-left: 10px;
+    }
+  }
+
+  a,
+  span {
+    color: $ic-brown;
+    display: block;
+  }
+
+  span:not(.img) {
+    display: block;
+    height: 2.8em;
+    overflow: hidden;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .img {
+    margin-bottom: 10px;
+    height: 110px;
+    overflow: hidden;
+  }
+
+  // tv feeds
+  .mask {
+    @include icon("\f04b");
+    background-color: $recipe-channel-feeds-tv-mask-bg;
+    display: none;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+
+    &::before {
+      border: 2px solid $recipe-channel-feeds-tv-mask-icon;
+      border-radius: 50%;
+      color: $recipe-channel-feeds-tv-mask-icon;
+      font-size: 20px;
+      font-weight: lighter;
+      height: 40px;
+      line-height: 36px;
+      margin-right: 0;
+      padding-left: 3px;
+      position: relative;
+      top: 34%;
+      width: 40px;
+    }
+  }
+
+  .length {
+    background-color: $recipe-channel-feeds-tv-length-bg;
+    bottom: 10px;
+    color: $recipe-channel-feeds-tv-length-text;
+    font-size: 12px;
+    left: 10px;
+    padding: 3px 11px 2px;
+    position: absolute;
+    text-align: center;
+    z-index: 3;
+  }
+
+  .video {
+    > div {
+      overflow: visible;
+      position: relative;
+    }
+
+    &:hover {
+      text-decoration: none;
+
+      .mask {
+        display: block;
+      }
+    }
+
+    span:not(.img) {
+      @include ellipsis;
+
+      height: 2.8em;
+      white-space: normal;
+      width: 100%;
+    }
+  }
+}
+