cupboard 0.2.1 → 0.2.2

data/app/assets/stylesheets/components/modals/_recipe-list-modal.scss

@@ -41,7 +41,7 @@ name: 01_recipe_list_modal
       </div>
     </div>
     <div class="modal-footer">
-      <a class="list-setting" href="#">清單管理</a>
+      <a class="list-setting" href="#"><i class="fa fa-pencil"></i>清單管理</a>
       <button class="btn btn-link btn-cancel">取消</button>
       <button class="btn btn-submit">儲存</button>
     </div>
@@ -56,7 +56,7 @@ $list-recipe-modal-btn-submit-bg: #9fbe4c !default;
 
 .list-recipe-modal {
   .modal-header {
-    background-color: $orange;
+    background-color: $orange-red;
     color: $white;
     font-size: 16px;
     padding: 9px 30px;
@@ -137,16 +137,19 @@ $list-recipe-modal-btn-submit-bg: #9fbe4c !default;
   }
 
   .list-setting {
-    @include btn-icon("\f040", 14px, $ic-brown, transparent);
-
     bottom: 45px;
-    color: $ic-brown;
+    color: $brown;
     left: 15px;
     position: absolute;
 
     &:hover {
       text-decoration: none;
     }
+
+    i {
+      margin-right: 5px;
+      width: 12px;
+    }
   }
 }
 

data/app/assets/stylesheets/components/modals/_vip-modal.scss

@@ -0,0 +1,114 @@
+// ----------------------------------------
+// Components - Modals - VIP modal
+// ----------------------------------------
+
+/*doc
+---
+parent: 16_modals
+title: VIP modal
+name: 02_vip_modal
+---
+
+<div class="ic-vip-modal">
+  <div class="vip-modal-inner">
+    <div class="vip-modal modal-dialog modal-content clearfix">
+      <a class="close" href="#"></a>
+      <div>
+        <div class="modal-cover"></div>
+        <h4 class="modal-title text-center">VIP 專屬優惠</h4>
+        <p>僅限 VIP 會員的商品、贈品或抽獎等優惠，還有各式專屬活動，不定期為你的生活增添驚喜！</p>
+        <a href="#" class="btn btn-red btn-to-vip">立即成為 VIP 首月免費</a>
+        <p class="more-detail">
+          <a href="#" target="_blank">了解更多 VIP 服務</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+*/
+
+$vip-modal-title: $brown !default;
+$vip-modal-text: #8c8783 !default;
+$vip-modal-close-icon: $white !default;
+$vip-modal-btn-bg: $red !default;
+$vip-modal-btn-text: $white !default;
+
+.vip-modal-inner {
+  margin: 30px auto 0;
+  padding-left: 15px;
+  padding-right: 15px;
+  position: relative;
+}
+
+.vip-modal {
+  border-radius: 3px;
+  margin: 0 auto;
+  max-width: 350px;
+  padding: 30px 24px 15px;
+  position: relative;
+
+  p {
+    color: $vip-modal-text;
+    font-size: 14px;
+    letter-spacing: 0.6px;
+    line-height: 22px;
+    margin-bottom: 30px;
+  }
+
+  .modal-title {
+    color: $vip-modal-title;
+    font-size: 18px;
+    line-height: 22px;
+    margin-bottom: 15px;
+  }
+
+  .more-detail {
+    margin: 15px 0;
+    text-align: center;
+
+    a {
+      color: $brown;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .sub-detail {
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 15px;
+  }
+
+  .modal-cover {
+    background-image: image-url("vip_modal.svg");
+    background-repeat: no-repeat;
+    height: 150px;
+    margin: 0 auto 15px;
+    width: 150px;
+  }
+
+  .close {
+    height: 14px;
+    line-height: 0;
+    opacity: 1;
+    position: absolute;
+    right: -29px;
+    top: 0;
+    width: 14px;
+
+    &::before {
+      @include icon-util("\e801", "icookfont");
+
+      color: $vip-modal-close-icon;
+    }
+  }
+}
+
+.btn-to-vip {
+  font-size: 16px;
+  width: 100%;
+}
+

data/app/assets/stylesheets/components/navigations/_blog-navi.scss

@@ -15,11 +15,6 @@ name: 03_blog_navi
     <li><a href="#">生活</a></li>
     <li><a href="#">健康</a></li>
     <li><a href="#">美麗</a></li>
-    <li><a href="#">食材</a></li>
-    <li><a href="#">料理</a></li>
-    <li><a href="#">專訪</a></li>
-    <li><a href="#">活動</a></li>
-    <li><a href="#">公告</a></li>
   </ul>
 </div>
 ```
@@ -27,7 +22,7 @@ name: 03_blog_navi
 */
 
 $blog-nav-border: #ccc !default;
-$blog-nav-link: $ic-brown !default;
+$blog-nav-link: $brown !default;
 $blog-nav-link-hover: #ac8c85 !default;
 
 .blog-nav {
@@ -44,23 +39,23 @@ $blog-nav-link-hover: #ac8c85 !default;
     &:last-child {
       margin-right: 0;
     }
+  }
 
-    a {
-      @include icon("\f0da");
+  a {
+    color: $blog-nav-link;
+    font-size: 16px;
+    text-decoration: none;
 
-      color: $blog-nav-link;
-      font-size: 16px;
-      text-decoration: none;
+    &::before,
+    &:hover {
+      color: $blog-nav-link-hover;
+    }
 
-      &::before,
-      &:hover {
-        color: $blog-nav-link-hover;
-      }
+    &::before {
+      @include icon-util("\f0da", "FontAwesome");
 
-      &::before {
-        margin-right: 0;
-        width: 8px;
-      }
+      margin-right: 0;
+      width: 8px;
     }
   }
 }
@@ -118,3 +113,4 @@ $blog-nav-link-hover: #ac8c85 !default;
     }
   }
 }
+

data/app/assets/stylesheets/components/navigations/_brand-tabs-navi.scss

@@ -30,8 +30,8 @@ name: 02_brand_tabs_navi
 */
 
 $brand-tab-border: #ebe5e1 !default;
-$brand-tab-hover-border: $ic-brown !default;
-$brand-tab-link: $ic-brown !default;
+$brand-tab-hover-border: $brown !default;
+$brand-tab-link: $brown !default;
 $brand-tab-link-active: #aa0000 !default;
 $brand-tab-link-bg: $white !default;
 
@@ -94,7 +94,7 @@ $brand-tab-link-bg: $white !default;
       text-align: center;
 
       &:hover {
-        border-bottom: 3px solid #564e4a;
+        border-bottom: 3px solid $brown;
       }
 
       &:hover a {
@@ -110,7 +110,7 @@ $brand-tab-link-bg: $white !default;
       }
 
       &.active {
-        border-bottom: 3px solid #aa0000;
+        border-bottom: 3px solid $brand-tab-link-active;
 
         a {
           border-bottom: 0;

data/app/assets/stylesheets/components/navigations/_categories-navi.scss

@@ -16,13 +16,10 @@ in categories/index
   <ul class="main-menu clearfix">
     <li class="list-group-item">
       <div class="panel-group">
-        <div class="img hidden-xs hidden-sm">
-          <a href="#"><img alt="" src="http://placehold.it/80x60" width="80"></a>
-        </div>
-        <a class="list-title" href="#">五穀雜糧</a>
+        <a class="list-title" href="/categories/18">派塔、泡芙</a>
         <ul class="list-group hidden-xs">
-          <li class="list-group-item"><a href="#">玉米</a></li>
-          <li class="list-group-item"><a href="#">藜麥</a></li>
+          <li class="list-group-item"><a href="/categories/464">鹹派</a></li>
+          <li class="list-group-item"><a href="/categories/465">泡芙</a></li>
         </ul>
       </div>
     </li>
@@ -33,171 +30,91 @@ in categories/index
 */
 
 // categories/index
-$mega-menu-icon: #aa8f83 !default;
+$categories-title: $brown !default;
+$categories-icon: $red !default;
+$categories-text: $brown-light20 !default;
+$categories-bg: $light-gray-light4 !default;
 
 .mega-menu {
-  background-color: $white;
-  border-width: 0 0 1px;
-  margin-bottom: 0;
+  padding-bottom: 0;
 
   .list-title {
-    @include icon("\f0da");
-
+    color: $categories-title;
     display: block;
-    color: $ic-brown;
     font-size: 16px;
     padding-left: 10px;
     position: relative;
 
     &::before {
-      color: $mega-menu-icon;
-      font-size: 18px;
+      @include icon-util("\f0da", "FontAwesome");
+
+      color: $categories-icon;
+      font-size: 13px;
       left: 0;
-      margin-right: 0;
       position: absolute;
       top: 4px;
-      width: 12px;
+      width: 5px;
     }
   }
 
   .list-group-item {
-    border-radius: 0;
+    background-color: transparent;
     border: 0;
-    margin-bottom: 0;
+    margin-left: 10px;
     padding: 0;
 
-    &:hover > .accordion-heading > .list-title {
-      color: $ic-brown;
-    }
-
-    &.active a {
-      color: $ic-brown;
-      text-decoration: underline;
-    }
-  }
-
-  .main-menu {
-    margin-bottom: 0;
-    padding-left: 0;
-    padding-top: 20px;
-
-    > .list-group-item {
-      border-right: 1px solid $basic-border;
-      float: left;
-      margin-bottom: 20px;
-      padding-left: 15px;
-      padding-right: 5px;
-      width: 16.6%;
-
-      &:nth-child(6n) {
-        border-right: 0;
-      }
-
-      > .list-title {
-        border-bottom: 1px solid $basic-border;
-        color: $ic-brown;
-        font-size: 16px;
-        margin-bottom: 5px;
-        padding-bottom: 5px;
-        padding-left: 10px;
-      }
-    }
-  }
-
-  .panel-group {
-    margin-bottom: 0;
-
-    .list-group-item {
-      padding: 3px 0 0 10px;
+    > .list-title {
+      margin-bottom: 5px;
+      padding-bottom: 5px;
     }
-  }
+	}
 
   .list-group {
     margin-bottom: 0;
 
-    .list-group-item {
-      margin-left: 10px;
-      padding-left: 0;
-    }
-
     a {
-      color: #888;
-      display: block;
-      line-height: 26px;
-      padding: 0;
-    }
-
-    &:hover {
-      color: #999;
-    }
-  }
+      color: $categories-text;
 
-  .main-menu > .list-group-item,
-  .panel-group > .list-group-item {
-    > .list-title {
-      color: #5c4545;
+      &:hover {
+        color: $brown;
+      }
     }
-  }
 
-  .img {
-    background-color: #eeede8;
-    height: 60px;
-    margin-bottom: 15px;
-    overflow: hidden;
-    width: 80px;
+    .list-group-item {
+      line-height: 1;
+      margin-top: 10px;
+		}
   }
-}
 
-// categories/show
-.cate-menu {
-  padding: 0;
-
-  .navbar-collapse {
-    padding-left: 0;
-    padding-right: 0;
-  }
+  .entry:last-child {
+    .main-menu {
+      margin-bottom: 0;
+      padding-bottom: 0;
+		}
+	}
 
   .panel-group {
-    margin-left: 5px;
-  }
-
-  .main-menu {
-    padding-top: 0;
-
-    & > .list-group-item {
-      border-right: 0;
-      float: none;
-      padding-left: 25px;
-      padding-right: 0;
-      width: 100%;
-
-      a {
-        line-height: 26px;
-      }
-
-      .list-title {
-        font-size: 14px;
-        margin-left: 15px;
-        padding-left: 0;
-
-        &:before {
-          left: -12px;
-        }
-      }
-    }
-  }
-
-  .list-group .list-group-item {
-    margin-left: 15px;
+    margin-bottom: 0;
   }
+}
 
-  .title {
-    background-color: #f7f6f3;
-    padding: 5px 10px;
-    margin-bottom: 10px;
-
-    a {
-      color: #564e4a;
-    }
+.main-menu {
+  background-color: $categories-bg;
+  display: flex;
+  display: box; //for only support old ver. browsers...
+  display: -ms-flexbox; // IE10
+  -ms-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-bottom: 15px;
+  padding: 15px 15px 0;
+  padding-top: 15px;
+
+  > .list-group-item {
+    background-color: transparent;
+    margin-bottom: 15px;
+    margin-left: 0;
+    width: 16.6%;
   }
 }
+

data/app/assets/stylesheets/components/recipes/_ingredients.scss

@@ -109,9 +109,6 @@ $ingredient-group7-text: #4b0050 !default;
 $ingredient-group7-bg: #f6e3fb !default;
 $ingredient-group8-text: #50291b !default;
 $ingredient-group8-bg: #fad6c8 !default;
-$recipe-notes-bg: #fefee5 !default;
-$recipe-notes-border: #fee59a !default;
-$recipe-notes-text: #666 !default;
 
 @each $group, $color, $background in
   (1, $ingredient-group1-text, $ingredient-group1-bg),
@@ -128,30 +125,28 @@ $recipe-notes-text: #666 !default;
     background-color: $background;
   }
 
-  .steps .group-#{$group} {
-    border-radius: 10px;
-    color: $color;
-    padding: 0 6px;
-  }
-
-  .recipe-detail {
-    .group-#{$group} {
-      border: 1px solid $background;
+  .group-#{$group} {
+    border: 1px solid $background;
 
-      .group-name {
-        color: $color;
-        padding: 10px;
-      }
+    .group-name {
+      color: $color;
+      padding: 10px;
+    }
 
-      .ingredient {
-        margin-left: 10px;
-        margin-right: 10px;
+    .ingredient {
+      margin-left: 10px;
+      margin-right: 10px;
 
-        &:last-child {
-          border-bottom: 0;
-        }
+      &:last-child {
+        border-bottom: 0;
       }
     }
   }
+
+  .steps .group-#{$group} {
+    border-radius: 10px;
+    color: $color;
+    padding: 0 6px;
+  }
 }
 

data/app/assets/stylesheets/components/recipes/_notes.scss

@@ -32,7 +32,7 @@ $recipe-notes-text: #666 !default;
 
   .title {
     border-bottom: 0;
-    color: $ic-brown;
+    color: $brown;
     font-size: 20px;
     line-height: 22px;
     padding-bottom: 20px;
@@ -46,7 +46,7 @@ $recipe-notes-text: #666 !default;
   }
 
   a {
-    color: $orange;
+    color: $orange-red;
     text-decoration: underline;
   }
 }

data/app/assets/stylesheets/components/recipes/_recipe-details.scss

@@ -4,7 +4,7 @@
 
 $recipe-detail-border: $basic-border !default;
 $recipe-detail-text: #888 !default;
-$recipe-detail-title: $ic-brown !default;
+$recipe-detail-title: $brown !default;
 $recipe-detail-title-border: $basic-border !default;
 $recipe-detail-time: #888 !default;
 
@@ -40,9 +40,11 @@ $recipe-detail-time: #888 !default;
   }
 
   .time {
-    @include icon("\f017");
-
     color: $recipe-detail-time;
+
+    &::before {
+      @include icon-util("\f017", "FontAwesome");
+    }
   }
 }
 

data/app/assets/stylesheets/components/recipes/_recipe-navi.scss

@@ -10,23 +10,25 @@ title: Navi
 ---
 
 <div><p>in recipes/show</p></div>
-<div class="category-tags">
-  <h3 class="title">更多食譜相關分類</h3>
-  <ul class="clearfix">
-    <li><a href="#">主題料理</a></li>
-    <li><a href="#">省錢懶人</a></li>
-    <li class="active"><a href="#">快速料理</a> (1231)</li>
-  </ul>
-  <ul class="clearfix">
-    <li><a href="#">主題料理</a></li>
-    <li><a href="#">美味時刻</a></li>
-    <li class="active"><a href="#">深夜食堂</a> (669)</li>
-  </ul>
-  <ul class="clearfix">
-    <li><a href="#">主題料理</a></li>
-    <li><a href="#">海鮮料理</a></li>
-    <li class="active"><a href="#">貝類</a> (1267)</li>
-  </ul>
+<div class="recipe-detail">
+  <div class="category-tags">
+    <h3>更多食譜相關分類</h3>
+    <ul class="clearfix">
+      <li><a href="#">主題料理</a></li>
+      <li><a href="#">省錢懶人</a></li>
+      <li class="active"><a href="#">快速料理</a> (1231)</li>
+    </ul>
+    <ul class="clearfix">
+      <li><a href="#">主題料理</a></li>
+      <li><a href="#">美味時刻</a></li>
+      <li class="active"><a href="#">深夜食堂</a> (669)</li>
+    </ul>
+    <ul class="clearfix">
+      <li><a href="#">主題料理</a></li>
+      <li><a href="#">海鮮料理</a></li>
+      <li class="active"><a href="#">貝類</a> (1267)</li>
+    </ul>
+  </div>
 </div>
 
 ```html_example
@@ -43,18 +45,14 @@ title: Navi
 $category-tag-title: #999 !default;
 $category-tag-title-border: #efede8 !default;
 $category-tag-link: #999 !default;
-$category-tag-link-active: $ic-brown !default;
+$category-tag-link-active: $brown !default;
 $category-tag-icon: #ac8c85 !default;
 
 .category-tags {
   margin-top: 20px;
 
-  .title {
-    border-bottom: 1px solid $category-tag-title-border;
-    color: $category-tag-title;
-    font-size: 16px;
-    line-height: 20px;
-    margin-top: 0;
+  h3 {
+    border-color: $light-gray;
     margin-bottom: 10px;
     padding-bottom: 15px;
   }
@@ -62,7 +60,7 @@ $category-tag-icon: #ac8c85 !default;
   ul {
     padding-left: 0;
 
-    & + ul {
+    + ul {
       margin-top: 12px;
     }
   }
@@ -84,11 +82,11 @@ $category-tag-icon: #ac8c85 !default;
     }
 
     &:first-child {
-      @include icon("\f0da");
+      &::before {
+        @include icon-util("\f0da", "FontAwesome");
 
-      &:before {
         color: $category-tag-icon;
-        margin-right: 4px;
+        margin-right: 5px;
         padding-left: 5px;
       }
     }
@@ -98,15 +96,14 @@ $category-tag-icon: #ac8c85 !default;
     }
 
     + li {
-      @include icon("\f054");
+      &::before {
+        @include icon-util("\e80d", "icookfont");
 
-      &:before {
         font-size: 11px;
         margin-left: 4px;
-        margin-right: 0;
         vertical-align: middle;
-        width: 12px;
       }
     }
   }
 }
+