cupboard 0.2.1 → 0.2.2

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

@@ -1,5 +1,3 @@
-@import "compass/typography/text/ellipsis";
-
 // --------------------------------
 // Cards - video card
 // --------------------------------
@@ -18,7 +16,7 @@ title: Video card
       <div>
         <div class="length">0:43</div>
         <img alt="繽紛水果氣泡水" class="img-responsive" src="/images/recipe-default.png">
-        <div class="mask"></div>
+        <div class="mask"><i class="fa fa-play"></i></div>
       </div>
       <div class="info">
         <div class="name" itemprop="name">繽紛水果氣泡水</div>
@@ -32,13 +30,16 @@ title: Video card
     <a class="video" href="/fruit-sparkling-water">
       <div>
         <div class="feature-label">
-          <span>最新影片</span>
+          <span>
+            <i class="fa fa-play"></i>
+            最新影片
+          </span>
           <div class="length">
             <span>0:55</span>
           </div>
         </div>
         <img alt="繽紛水果氣泡水" class="img-responsive" src="/images/recipe-default.png">
-        <div class="mask"></div>
+        <div class="mask"><i class="fa fa-play"></i></div>
       </div>
       <div class="info">
         <div class="name" itemprop="name">繽紛水果氣泡水</div>
@@ -50,16 +51,12 @@ title: Video card
 
 */
 
-@import "compass/typography/text/ellipsis";
-
 $video-mask-bg: rgba(86, 78, 73, 0.4) !default;
 $video-length-bg: rgba(86, 78, 73, 0.8) !default;
 $video-card-author-by: #7c8783 !default;
 $video-card-author: #555 !default;
 
 .mask {
-  @include icon("\f04b");
-
   background-color: $video-mask-bg;
   color: $white;
   display: none;
@@ -71,17 +68,21 @@ $video-card-author: #555 !default;
   width: 100%;
   z-index: 2;
 
-  &::before {
+  i {
     border: 2px solid $white;
     border-radius: 50%;
     font-size: 20px;
     height: 40px;
     line-height: 1.7;
-    margin-right: 0;
-    padding-left: 3px;
+    margin-top: -20px;
     position: relative;
-    top: 36%;
+    top: 50%;
     width: 40px;
+
+    &::before {
+      left: 2px;
+      position: relative;
+    }
   }
 }
 
@@ -131,7 +132,7 @@ $video-card-author: #555 !default;
   }
 
   .name {
-    color: $ic-brown;
+    color: $brown;
     font-size: 16px;
     margin-bottom: 5px;
   }
@@ -158,24 +159,22 @@ $video-card-author: #555 !default;
   }
 
   > span {
-    @include icon("\f04b");
-
-    background-color: $orange;
+    background-color: $orange-red;
     color: $white;
     padding: 5px 6px;
+  }
 
-    &::before {
-      border: 1px solid $white;
-      border-radius: 50%;
-      color: $white;
-      font-size: 11px;
-      height: 18px;
-      line-height: 17px;
-      padding-left: 3px;
-      text-align: center;
-      vertical-align: top;
-      width: 18px;
-    }
+  .fa {
+    border: 1px solid $white;
+    border-radius: 50%;
+    color: $white;
+    font-size: 11px;
+    height: 18px;
+    line-height: 17px;
+    padding-left: 3px;
+    text-align: center;
+    vertical-align: top;
+    width: 18px;
   }
 
   .length {

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

@@ -45,14 +45,14 @@ name: 1_comment_form
 
 */
 
-$comments-title: $ic-brown !default;
-$comments-border: $ic-brown !default;
+$comments-title: $brown !default;
+$comments-border: $brown !default;
 $comments-title-small-text: #aaa !default;
 $comments-content-text: #888 !default;
-$comments-content-link: $orange !default;
+$comments-content-link: $orange-red !default;
 $comments-content-timestamp: #aaa !default;
-$comments-author: #5d4545 !default;
-$comments-load-more: $ic-brown !default;
+$comments-author: $brown !default;
+$comments-load-more: $brown !default;
 $comments-notice-text: #aa8f83 !default;
 $comments-help-block-text: #888 !default;
 $comments-help-block-notice: #333 !default;
@@ -137,20 +137,12 @@ $comments-form-actions-text: #888 !default;
   }
 
   .load-more {
-    @include icon("\e800");
-
     color: $comments-load-more;
     display: block;
     font-size: 16px;
     margin: 20px auto 0;
     text-align: center;
     width: 25%;
-
-    &::before {
-      font-family: "icookfont";
-      font-weight: bold;
-      margin-right: 10px;
-    }
   }
 }
 

data/app/assets/stylesheets/components/comments/_single-comment.scss

@@ -32,6 +32,9 @@ name: 2_single_comment
                       <p>這種的保存方式，可以不需要冰嗎？<br/>因為我在找尋可以不用冰的自製辣椒醬</p>
                     </div>
                     <span class="timestamp">3天前</span>
+                    <span class="func">
+                      <a href="#" class="edit">編輯</a>．<a href="#" class="delete">刪除</a>
+                    </span>
                   </div>
                   <button class="report-msg" data-original-title="" title=""></button>
                 </div>
@@ -55,6 +58,9 @@ name: 2_single_comment
               </div>
             </div>
           </div>
+          <div>
+            <a href="#" class="load-more"><i class="icon-right-small"></i>看更多留言</a>
+          </div>
         </div>
       </div>
     </div>
@@ -63,7 +69,7 @@ name: 2_single_comment
 */
 
 $reply-comment-border: $basic-border !default;
-$reply-comment-author: $orange !default;
+$reply-comment-author: $orange-red !default;
 $comments-form-actions-border: $basic-border !default;
 $comment-border: $basic-border !default;
 $comment-form-text: #777 !default;
@@ -130,12 +136,11 @@ $recipe-comments-title: #666 !default;
       color: $comment-delete;
     }
 
-    .edit {
-      @include icon("|");
+    .edit::before {
+      @include icon-util("|", "FontAwesome");
 
-      &::before {
-        width: 7px;
-      }
+      margin-left: -5px;
+      margin-right: -5px;
     }
   }
 
@@ -153,15 +158,15 @@ $recipe-comments-title: #666 !default;
 
   .report-msg {
     bottom: 20px;
-    display: none;
+    // display: none;
     position: absolute;
     right: 0;
     z-index: 3;
   }
 
-  // .tooltip.top .tooltip-inner {
-  //   width: 120px;
-  // }
+  .tooltip.top .tooltip-inner {
+    width: 120px;
+  }
 }
 
 .reply-comment {
@@ -170,8 +175,6 @@ $recipe-comments-title: #666 !default;
   position: relative;
 
   .pull-left {
-    // margin-right: 10px;
-
     &::after {
       border-top: 1px solid $reply-comment-author;
       content: "";
@@ -233,13 +236,17 @@ $recipe-comments-title: #666 !default;
     padding: 0;
 
     a {
-      @include icon("\f0d7");
-
       color: $recipe-comments-title;
       display: block;
       margin-bottom: -5px;
       padding: 10px 15px 0;
       text-align: center;
+
+      &::before {
+        @include icon-util("\f0d7", "FontAwesome");
+
+        margin-right: 5px;
+      }
     }
 
     + .panel-collapse > .panel-body {

data/app/assets/stylesheets/components/covers/_brand-cover.scss

@@ -76,7 +76,7 @@ title: Brand cover
 
   .brand-name {
     bottom: 0;
-    color: $ic-brown;
+    color: $brown;
     font-size: 20px;
     line-height: 18px;
     position: absolute;

data/app/assets/stylesheets/components/covers/_categories-cover.scss

@@ -11,69 +11,89 @@ parent: 13_covers
 name: 1_categories_cover
 title: Category cover
 ---
-
-<div class="categories-cover">
-  <a href="" target="_blank">
-    <img alt="點心烘焙" class="img-responsive" src="/images/category-cover.png">
-  </a>
-  <div class="title">
-    <div class="name">點心烘焙</div>
-    <span class="hidden-xs hidden-sm"></span>
+<div class="categories">
+  <div class="inner-block cover-block">
+    <div class="cover">
+      <img src="/images/category-cover.png" alt="分類 - 電鍋" class="img-responsive">
+    </div>
+    <div class="cover-desc">
+      <div class="cover-title">電鍋</div>
+      <p class="description">家家戶戶一定會有一台電鍋，蒸包子、煲湯、煮飯、滷肉及西式甜點布丁，不管任何料理電鍋都能輕鬆完成。甚至可以一鍋搞定三菜一湯，是外出遊子及懶人的最佳夥伴～</p>
+    </div>
   </div>
 </div>
 
 */
 
-.categories-cover {
-  @include background-image(image-url("default/category-cover.png"));
+$cover-bg: $light-gray-light4 !default;
+$cover-link: $red !default;
 
-  background-repeat: no-repeat;
-  color: $white;
-  line-height: 1;
-  max-height: 150px;
-  overflow: hidden;
-  position: relative;
+// categories new cover
+.categories {
+  .cover-block {
+    background-color: $white;
+    margin-bottom: 15px;
+    padding: 15px;
 
-  > a {
-    display: block;
-    height: 100%;
-  }
+    a,
+    em {
+      color: $cover-link;
+    }
 
-  img {
-    width: 100%;
+    em {
+      font-style: inherit;
+    }
+
+    img {
+      min-height: 150px;
+      width: 100%;
+    }
   }
 
-  .title {
-    @include background-image(linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0, .4) 100%));
+  .cover {
+    border-radius: 3px;
+    margin-bottom: 15px;
+    min-height: 150px;
+    overflow: hidden;
+  }
 
-    bottom: 0;
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#59000000',GradientType=0 ); /* IE6-9 */
-    left: 0;
+  .cover-desc {
+    background-color: $cover-bg;
+    color: $brown;
     padding: 15px;
-    position: absolute;
-    width: 100%;
-    z-index: 2;
-  }
 
-  .name {
-    @include text-shadow(rgba(0, 0, 0, 0.5) 0px 1px 4px);
+    + p {
+      margin-bottom: -5px;
+      margin-top: 10px;
+      overflow: hidden;
+    }
 
-    float: left;
-    font-size: 24px;
+    .cover-title {
+      color: $brown;
+      font-size: 28px;
+    }
   }
+}
 
-  span {
-    display: inline-block;
-    font-size: 13px;
-    margin-left: 10px;
-    position: relative;
-    top: 9px;
+@media only screen and (min-width: 992px) {
+  .cover-block {
+    margin-bottom: 15px;
   }
 }
 
-@media only screen and (min-width: 991px) {
-  .categories-cover {
-    margin-bottom: 15px;
-    margin-top: -5px;
+@media only screen and (max-width: 640px) {
+  .cover-block .cover {
+    max-height: 60px;
+  }
+
+  .categories .cover-block {
+    .cover {
+      min-height: 65px;
+    }
+
+    img {
+      min-height: 65px;
+    }
   }
 }
+

data/app/assets/stylesheets/components/covers/_users-cover.scss

@@ -0,0 +1,75 @@
+// ----------------------------------------
+// Components - Covers - users cover
+// ----------------------------------------
+
+/*doc
+---
+parent: 13_covers
+name: 3_categories_cover
+title: Users cover
+---
+
+Premium user's favorites list cover.
+<div class="users">
+  <div class="cover-block hidden-xs">
+    <a target="_blank" class="cover" href="#">
+      <img src="/images/category-cover.png" alt="愛料理食驗室" class="img-responsive">
+    </a>
+    <div class="title">
+      <div class="name">愛料理食驗室</div>
+    </div>
+  </div>
+</div>
+
+*/
+
+$cover-gradient-top: rgba(0, 0, 0, 0) !default;
+$cover-gradient-bottom: rgba(0, 0, 0, 0.4) !default;
+$cover-name: $white !default;
+$cover-name-shadow: rgba(0, 0, 0, 0.5) !default;
+
+.cover-block {
+  position: relative;
+
+  .cover {
+    background-image: image-url("default/category-cover.png");
+    background-repeat: no-repeat;
+    display: block;
+    height: 100%;
+    line-height: 1;
+    max-height: 150px;
+    overflow: hidden;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .title {
+    background-image: linear-gradient(top, $cover-gradient-top 0%, $cover-gradient-bottom 100%);
+    bottom: 0;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#59000000',GradientType=0); // IE6-9
+    left: 0;
+    padding: 15px;
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+  }
+
+  .name {
+    color: $cover-name;
+    float: left;
+    font-size: 24px;
+    text-shadow: $cover-name-shadow 0 1px 4px;
+  }
+
+  span {
+    color: $cover-name;
+    display: inline-block;
+    font-size: 13px;
+    margin-left: 10px;
+    position: relative;
+    top: 11px;
+  }
+}
+

data/app/assets/stylesheets/components/features/_feature-events.scss

@@ -1,5 +1,3 @@
-@import "compass/typography/text/ellipsis";
-
 // ----------------------------------------
 // Components - Feature - feature events
 // ----------------------------------------
@@ -59,8 +57,8 @@ name: 02_feature_events
 
 $feature-event-link: #888 !default;
 $feature-event-link-bg: #fffcf0 !default;
-$feature-event-link-hover: $ic-brown !default;
-$feature-event-deadline: $orange !default;
+$feature-event-link-hover: $brown !default;
+$feature-event-deadline: $orange-red !default;
 
 .feature-events {
   ul,
@@ -105,7 +103,6 @@ $feature-event-deadline: $orange !default;
       &:not(.pull-right) {
         @include ellipsis;
 
-        display: inline-block;
         width: 75%;
       }
 

data/app/assets/stylesheets/components/features/_feature-slides.scss

@@ -1,5 +1,3 @@
-@import "compass/typography/text/ellipsis";
-
 // ----------------------------------------
 // Components - Feature - feature slides
 // ----------------------------------------
@@ -62,8 +60,8 @@ $featured-recipe-link: #888 !default;
 $featured-recipe-link-current: #ac8c85 !default;
 
 .feature-slides {
-  padding-top: 5px;
   overflow: hidden;
+  padding-top: 5px;
 
   ul,
   li {
@@ -120,12 +118,12 @@ $featured-recipe-link-current: #ac8c85 !default;
 
     &.current a,
     &:hover a {
-      @include icon("\f0da");
-
-      color: $ic-brown;
+      color: $brown;
       text-decoration: none;
 
       &::before {
+        @include icon-util("\f0da", "FontAwesome");
+
         color: $featured-recipe-link-current;
         font-size: 18px;
         width: 10px;
@@ -142,3 +140,4 @@ $featured-recipe-link-current: #ac8c85 !default;
     }
   }
 }
+

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

@@ -19,7 +19,7 @@ title: Footer social icons
  */
 
 $footer-social-icons: ("fb", "twitter", "ig", "line");
-$color: $ic-brown;
+$color: $brown;
 
 @each $icon in $footer-social-icons {
   .footer-social-#{$icon} {
@@ -32,51 +32,28 @@ $color: $ic-brown;
     }
 
     @if $icon == "fb" {
-      @include icon("\f09a");
+      &::before {
+        @include icon-util("\f09a", "FontAwesome");
+      }
     }
 
     @if $icon == "twitter" {
-      @include icon("\f099");
+      &::before {
+        @include icon-util("\f099", "FontAwesome");
+      }
     }
 
     @if $icon == "ig" {
-      @include icon("\f16d");
+      &::before {
+        @include icon-util("\f16d", "FontAwesome");
+      }
     }
 
     @if $icon == "line" {
-      @include icon("\e808");
-
       &::before {
-        font-family: "icookfont";
+        @include icon-util("\e808", "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

@@ -19,35 +19,32 @@ title: Card status
 */
 
 $stat-icon: #999 !default;
-$stat-icon-following: $ic-red !default;
+$stat-icon-following: $red !default;
 
 .fav-count {
-  @include icon("\f004");
+  &::before {
+    @include icon-util("\f004", "FontAwesome");
+  }
 
   &.active::before {
     color: $stat-icon-following;
   }
 }
 
-.views-count {
-  @include icon("\f06e");
+.views-count::before {
+  @include icon-util("\f06e", "FontAwesome");
 
-  &::before {
-    margin-right: -2px;
-  }
+  margin-right: -2px;
 }
 
-.dishes-count {
-  @include icon("\f030");
+.dishes-count::before {
+  @include icon-util("\f030", "FontAwesome");
 }
 
-.comments-count {
-  @include icon("\e805");
+.comments-count::before {
+  @include icon-util("\e805", "icookfont");
 
-  &::before {
-    font-family: "icookfont";
-    font-weight: bold;
-  }
+  font-weight: bold;
 }
 
 .fav-count,
@@ -55,7 +52,6 @@ $stat-icon-following: $ic-red !default;
 .comments-count,
 .views-count {
   color: $stat-icon;
-  margin-left: 5px;
 
   &::before {
     color: $stat-icon;

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

@@ -90,4 +90,9 @@ title: icookfont
   </li>
 </ul>
 
+<h3>How to use</h3>
+
+`<span class="icon-ic-shooping-car" aria-hidden="true"></span>`
+
  */
+

data/app/assets/stylesheets/components/modals/_modal-reset.scss

@@ -4,7 +4,7 @@
 // # override bootstrap modal
 
 .modal-backdrop {
-  background-color: $ic-brown;
+  background-color: $brown;
 
   &.in {
     opacity: 0.6;