cupboard 0.2.0 → 0.2.1

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

@@ -6,8 +6,8 @@
 
 /*doc
 ---
-parent: 17_cards
-name: list_card
+parent: 02_cards
+name: 2_list_card
 title: List card
 ---
 
@@ -33,6 +33,7 @@ title: List card
     <p class="material">食材：吐司、低筋麵粉、無鹽奶油、自製煉乳或市售</p>
   </div>
 </div>
+
 */
 
 @import "compass/typography/text/ellipsis";

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

@@ -6,8 +6,8 @@
 
 /*doc
 ---
-parent: 17_cards
-name: photo_card
+parent: 02_cards
+name: 1_photo_card
 title: Photo card
 ---
 
@@ -39,7 +39,6 @@ title: Photo card
   </div>
 </div>
 
-
 */
 
 @import "compass/typography/text/ellipsis";
@@ -130,10 +129,6 @@ $photo-card-ingredient: #aa8f83 !default;
       height: 110px;
     }
   }
-
-  .feature-spot {
-    height: 864px;
-  }
 }
 
 @media only screen and (max-width: 991px) {
@@ -191,54 +186,3 @@ $photo-card-ingredient: #aa8f83 !default;
   }
 }
 
-// stat icons
-$stat-icon: #999 !default;
-$stat-icon-following: $ic-red !default;
-
-.fav-count {
-  @include icon("\f004");
-
-  &.active::before {
-    color: $stat-icon-following;
-  }
-}
-
-.views-count {
-  @include icon("\f06e");
-
-  &::before {
-    margin-right: -2px;
-  }
-}
-
-.dishes-count {
-  @include icon("\f030");
-}
-
-.search-score {
-  @include icon("\f080");
-}
-
-.comments-count {
-  @include icon("\e805");
-
-  &::before {
-    font-family: "icookfont";
-    font-weight: bold;
-  }
-}
-
-.fav-count span,
-.dishes-count,
-.comments-count,
-.search-score {
-  margin-left: 5px;
-
-  &::before {
-    color: $stat-icon;
-    font-size: 12px;
-    margin-right: 3px;
-    width: 12px;
-  }
-}
-

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

@@ -6,9 +6,9 @@
 
 /*doc
 ---
-parent: 17_cards
-name: product_card
-title: Product card
+parent: 02_cards
+name: 5_product_card
+title: Market product card
 ---
 
 <div class="ic-promoted-cards clearfix">
@@ -39,8 +39,9 @@ title: Product card
         </div>
       </div>
     </a>
-    </div>
   </div>
+</div>
+
 */
 
 $product-card-subtitle: #777 !default;

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

@@ -6,8 +6,8 @@
 
 /*doc
 ---
-parent: 17_cards
-name: video_card
+parent: 02_cards
+name: 6_video_card
 title: Video card
 ---
 
@@ -33,9 +33,9 @@ title: Video card
       <div>
         <div class="feature-label">
           <span>最新影片</span>
-            <div class="length">
-              <span>0:55</span>
-            </div>
+          <div class="length">
+            <span>0:55</span>
+          </div>
         </div>
         <img alt="繽紛水果氣泡水" class="img-responsive" src="/images/recipe-default.png">
         <div class="mask"></div>
@@ -47,6 +47,7 @@ title: Video card
     </a>
   </div>
 </div>
+
 */
 
 @import "compass/typography/text/ellipsis";

data/app/assets/stylesheets/components/comments/_comment-form.scss

@@ -1,12 +1,12 @@
-// ----------------------------------
-// Form components - recipe comment
-// ----------------------------------
+// --------------------------------------
+// Components - Comments - Comment form
+// --------------------------------------
 
 /*doc
 ---
+parent: 12_comments
 title: Comment form
-name: 15_comment_form
-category: UI components
+name: 1_comment_form
 ---
 
 <div class="inner-block comments">

data/app/assets/stylesheets/components/{single_comment → comments}/_single-comment.scss

@@ -1,12 +1,12 @@
-// --------------------------
-// Single comment
-// --------------------------
+// ----------------------------------------
+// Components - Comments - Single comment
+// ----------------------------------------
 
 /*doc
 ---
+parent: 12_comments
 title: Single comment
-name: 16_single_comment
-category: UI components
+name: 2_single_comment
 ---
 
 <div class="inner-block comments">

data/app/assets/stylesheets/components/{medias → covers}/_brand-cover.scss

@@ -1,17 +1,17 @@
-// ---------------------------
-// Media blocks - brand cover
-// ---------------------------
+// -----------------------------------
+// Components - Covers - brand cover
+// -----------------------------------
 
 /*doc
 ---
-name: 26_brand_cover
+parent: 13_covers
+name: 2_brand_cover
 title: Brand cover
-category: UI components
 ---
 
 <div class="brand-head">
   <div class="brand-cover">
-    <img alt="iCook" class="img-responsive" src="/images/setting-pr.jpg">
+    <img alt="iCook" class="img-responsive" src="/images/category-cover.png">
     <div class="cover-mask">&nbsp;</div>
   </div>
   <div class="brand">

data/app/assets/stylesheets/components/{medias → covers}/_categories-cover.scss

@@ -1,15 +1,15 @@
 @import "compass/css3/images";
 @import "compass/css3/text-shadow";
 
-// --------------------------------
-// Media blocks - categories cover
-// --------------------------------
+// ----------------------------------------
+// Components - Covers - categories cover
+// ----------------------------------------
 
 /*doc
 ---
-name: 25_categories_cover
+parent: 13_covers
+name: 1_categories_cover
 title: Category cover
-category: UI components
 ---
 
 <div class="categories-cover">

data/app/assets/stylesheets/{widgets → components}/features/_feature-events.scss

@@ -1,14 +1,14 @@
 @import "compass/typography/text/ellipsis";
 
-// ----------------------------
-// Widgets - feature events
-// ----------------------------
+// ----------------------------------------
+// Components - Feature - feature events
+// ----------------------------------------
 
 /*doc
 ---
-parent: 03_widgets
+parent: 15_features
 title: Feature events
-name: 2_feature_events
+name: 02_feature_events
 ---
 
 <div class="row">

data/app/assets/stylesheets/{widgets → components}/features/_feature-slides.scss

@@ -1,14 +1,14 @@
 @import "compass/typography/text/ellipsis";
 
-// ----------------------------
-// Widgets - feature slides
-// ----------------------------
+// ----------------------------------------
+// Components - Feature - feature slides
+// ----------------------------------------
 
 /*doc
 ---
-parent: 03_widgets
+parent: 15_features
 title: Feature slides
-name: 1_feature_slides
+name: 01_feature_slides
 ---
 
 <div class="row">

data/app/assets/stylesheets/components/icons/_footer-social-icons.scss

@@ -0,0 +1,82 @@
+// -------------------------------------------
+// Components - icons - footer social icons
+// -------------------------------------------
+
+/*doc
+---
+parent: icons
+name: 02_footer_social-icons
+title: Footer social icons
+---
+
+<ul class="socials clearfix ic-meta">
+  <li><a class="footer-social-fb" href="#" title="愛料理 粉絲團"></a></li>
+  <li><a class="footer-social-line" href="#" title="愛料理 line" target="_blank"></a></li>
+  <li><a class="footer-social-ig" href="#" title="愛料理 Instagram" target="_blank"></a></li>
+  <li><a class="footer-social-twitter" href="#" title="愛料理 推特" target="_blank"></a></li>
+</ul>
+
+ */
+
+$footer-social-icons: ("fb", "twitter", "ig", "line");
+$color: $ic-brown;
+
+@each $icon in $footer-social-icons {
+  .footer-social-#{$icon} {
+    background-repeat: no-repeat;
+    color: $color;
+
+    &:hover {
+      background-color: $color;
+      color: $white;
+    }
+
+    @if $icon == "fb" {
+      @include icon("\f09a");
+    }
+
+    @if $icon == "twitter" {
+      @include icon("\f099");
+    }
+
+    @if $icon == "ig" {
+      @include icon("\f16d");
+    }
+
+    @if $icon == "line" {
+      @include icon("\e808");
+
+      &::before {
+        font-family: "icookfont";
+      }
+    }
+  }
+}
+
+.socials {
+  li {
+    border: 1px solid $ic-brown;
+    border-radius: 3px;
+    display: inline-block;
+    float: left;
+    height: 40px;
+    text-align: center;
+    width: 40px;
+
+    + li {
+      margin-left: 15px;
+    }
+  }
+
+  a {
+    display: inline-block;
+    font-size: 18px;
+    height: 100%;
+    line-height: 38px;
+    width: 100%;
+
+    &::before {
+      margin-right: 0;
+    }
+  }
+}

data/app/assets/stylesheets/components/icons/_icon-status.scss

@@ -0,0 +1,67 @@
+// --------------------------------
+// Components - icons - status
+// --------------------------------
+
+/*doc
+---
+parent: icons
+name: 01_icon_status
+title: Card status
+---
+
+<ul class="meta clearfix ic-meta">
+  <li class="views-count">595</li>
+  <li class="fav-count">4,020</li>
+  <li class="comments-count">6</li>
+  <li class="dishes-count">16</li>
+</ul>
+
+*/
+
+$stat-icon: #999 !default;
+$stat-icon-following: $ic-red !default;
+
+.fav-count {
+  @include icon("\f004");
+
+  &.active::before {
+    color: $stat-icon-following;
+  }
+}
+
+.views-count {
+  @include icon("\f06e");
+
+  &::before {
+    margin-right: -2px;
+  }
+}
+
+.dishes-count {
+  @include icon("\f030");
+}
+
+.comments-count {
+  @include icon("\e805");
+
+  &::before {
+    font-family: "icookfont";
+    font-weight: bold;
+  }
+}
+
+.fav-count,
+.dishes-count,
+.comments-count,
+.views-count {
+  color: $stat-icon;
+  margin-left: 5px;
+
+  &::before {
+    color: $stat-icon;
+    font-size: 12px;
+    margin-right: 3px;
+    width: 12px;
+  }
+}
+

data/app/assets/stylesheets/components/icons/_icookfont.scss

@@ -0,0 +1,93 @@
+// -------------------------------------------
+// Components - icons - icookfont
+// -------------------------------------------
+
+/*doc
+---
+parent: icons
+name: 03_icookfont
+title: icookfont
+---
+
+`gem install icookfont-sass`
+
+<ul class="clearfix ic-icookfont">
+  <li>
+    <span class="icon-right-small"></span>
+    <span>icon-right-small</span>
+  </li>
+  <li>
+    <span class="icon-ic-close"></span>
+    <span>icon-ic-close</span>
+  </li>
+  <li>
+    <span class="icon-ic-icook"></span>
+    <span>icon-ic-icook</span>
+  </li>
+  <li>
+    <span class="icon-ic-trash-o"></span>
+    <span>icon-ic-trash-o</span>
+  </li>
+  <li>
+    <span class="icon-ic-plus"></span>
+    <span>icon-ic-plus</span>
+  </li>
+  <li>
+    <span class="icon-ic-comment"></span>
+    <span>icon-ic-comment</span>
+  </li>
+  <li>
+    <span class="icon-drag"></span>
+    <span>icon-drag</span>
+  </li>
+  <li>
+    <span class="icon-ic-shooping-car"></span>
+    <span>icon-ic-shooping-car</span>
+  </li>
+  <li>
+    <span class="icon-ic-LINE"></span>
+    <span>icon-ic-LINE</span>
+  </li>
+  <li>
+    <span class="icon-ic-chef-command"></span>
+    <span>icon-ic-chef-command</span>
+  </li>
+  <li>
+    <span class="icon-ic-chef"></span>
+    <span>icon-ic-chef</span>
+  </li>
+  <li>
+    <span class="icon-ic-check"></span>
+    <span>icon-ic-check</span>
+  </li>
+  <li>
+    <span class="icon-ic-angle-left"></span>
+    <span>icon-ic-angle-left</span>
+  </li>
+  <li>
+    <span class="icon-ic-angle-right"></span>
+    <span>icon-ic-angle-right</span>
+  </li>
+  <li>
+    <span class="icon-ic-zoom-out"></span>
+    <span>icon-ic-zoom-out</span>
+  </li>
+  <li>
+    <span class="icon-ic-zoom-in"></span>
+    <span>icon-ic-zoom-in</span>
+  </li>
+  <li>
+    <span class="icon-volume"></span>
+    <span>icon-volume</span>
+  </li>
+  <li>
+    <span class="icon-ic-arrow-right"></span>
+    <span>icon-ic-arrow-right</span>
+  </li>
+  <li>
+    <span class="icon-ic-arrow-left"></span>
+    <span>icon-ic-arrow-left</span>
+  </li>
+</ul>
+
+ */

data/app/assets/stylesheets/{widgets/modal → components/modals}/_modal-reset.scss

@@ -1,10 +1,10 @@
-//
-// Widgets - modal reset
-//
-// -----------------------------
+// ----------------------------------------
+// Components - Modals - modal reset
+// ----------------------------------------
 // # override bootstrap modal
+
 .modal-backdrop {
-  background-color: #564e4a;
+  background-color: $ic-brown;
 
   &.in {
     opacity: 0.6;
@@ -20,7 +20,7 @@
   }
 }
 
-.modal-body { 
+.modal-body {
   font-size: 13px;
   padding: 15px 30px 30px;
 }