cupboard 0.2.1 → 0.2.2

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

@@ -70,7 +70,7 @@ title: Steps
 */
 
 $recipe-steps-border: #969696 !default;
-$recipe-steps-order: $ic-brown !default;
+$recipe-steps-order: $brown !default;
 $recipe-step-border: $basic-border !default;
 $recipe-step-text: #666 !default;
 
@@ -94,14 +94,6 @@ $recipe-step-text: #666 !default;
     ul {
       padding-left: 0;
 		}
-
-    .group_1,
-		.group_2,
-		.group_3,
-		.group_4,
-		.group_5 {
-      padding: 0 4px;
-		}
   }
 
   .step {
@@ -151,3 +143,4 @@ $recipe-step-text: #666 !default;
     width: 100%;
   }
 }
+

data/app/assets/stylesheets/components/sidebars/_brand-ingredients.scss

@@ -1,6 +1,3 @@
-@import "compass/typography/text/ellipsis";
-@import "compass/css3/images";
-
 // --------------------------------------------
 // Components - Sidebars - brand ingredients
 // --------------------------------------------
@@ -75,11 +72,7 @@ $pr-ingredients-tag-text: #5c4545 !default;
 $pr-ingredients-tag-border: #ccc !default;
 
 .pr-ingredients {
-  background-repeat: repeat;
-
   span {
-    @include icon("\f111");
-
     background-color: $pr-ingredients-round;
     display: block;
     height: 22px;
@@ -90,6 +83,8 @@ $pr-ingredients-tag-border: #ccc !default;
     z-index: 2;
 
     &::before {
+      @include icon-util("\f111", "FontAwesome");
+
       color: $pr-ingredients-round;
       float: left;
       font-size: 12px;
@@ -105,7 +100,7 @@ $pr-ingredients-tag-border: #ccc !default;
 
   ul {
     background-color: $pr-ingredients-bg;
-    margin-bottom: 0;
+    margin-bottom: -10px;
     padding: 0 5px;
   }
 

data/app/assets/stylesheets/components/sidebars/_brand-popular-lists.scss

@@ -16,7 +16,7 @@ name: 07_brand_popular_lists
         <h4 class="title">精選清單</h4>
         <ul>
           <li>
-            <a class="media clearfix" href="/brands/wumu/lists/1772072?ref=sidebar">
+            <a class="media clearfix" href="#">
               <span class="media-body">
 							  <img src="/images/recipe-default.png" alt="愛料理食驗室" class="pull-left img-responsive">
                 <span>愛料理食驗室</span>
@@ -25,7 +25,7 @@ name: 07_brand_popular_lists
             </a>
           </li>
           <li>
-            <a class="media clearfix" href="/brands/wumu/lists/946095?ref=sidebar">
+            <a class="media clearfix" href="#">
               <span class="media-body">
 								<img src="/images/recipe-default.png" alt="愛料理廚房" class="pull-left img-responsive">
                 <span>愛料理廚房</span>
@@ -34,7 +34,7 @@ name: 07_brand_popular_lists
             </a>
           </li>
           <li>
-            <a class="media clearfix" href="/brands/wumu/lists/946095?ref=sidebar">
+            <a class="media clearfix" href="#">
               <span class="media-body">
 								<img src="/images/recipe-default.png" alt="電鍋好味道" class="pull-left img-responsive">
                 <span>電鍋好味道</span>
@@ -50,25 +50,24 @@ name: 07_brand_popular_lists
 
 */
 
-@import "compass/typography/text/ellipsis";
-
 $popular-recipe-lists-text: #aa8f83 !default;
 $popular-recipe-lists-icon-bg: $white !default;
-$popular-recipe-lists-icon-text: $orange !default;
+$popular-recipe-lists-icon-text: $orange-red !default;
 
 // brands 精選清單
 .popular-recipe-lists {
   li {
-		padding-bottom: 10px;
+    padding-bottom: 10px;
     position: relative;
 
     + li {
       border-top: 1px solid $basic-border;
-			padding-top: 10px;
+      padding-top: 10px;
     }
   }
 
   a {
+    color: $brown;
     position: static;
 
     &:hover {
@@ -88,7 +87,6 @@ $popular-recipe-lists-icon-text: $orange !default;
     > span {
       @include ellipsis;
 
-      display: inline;
       float: left;
       font-size: 16px;
       width: 65%;
@@ -96,8 +94,6 @@ $popular-recipe-lists-icon-text: $orange !default;
   }
 
   .pull-right {
-    @include icon-b("\f0a9");
-
     color: $popular-recipe-lists-text;
     font-size: 12px;
     letter-spacing: 0.01em;
@@ -109,6 +105,8 @@ $popular-recipe-lists-icon-text: $orange !default;
     width: 8.5em;
 
     &::after {
+      @include icon-util("\f0a9", "FontAwesome");
+
       background-color: $popular-recipe-lists-icon-bg;
       color: $popular-recipe-lists-icon-text;
       font-size: 14px;
@@ -121,8 +119,7 @@ $popular-recipe-lists-icon-text: $orange !default;
   }
 
   img {
-    @include background(image-url("default/category_default.jpg"), no-repeat);
-
+    background: image-url("default/category_default.jpg"), no-repeat;
     height: 51px;
     margin-right: 10px;
     width: 68px;

data/app/assets/stylesheets/components/sidebars/_brand-recent-events.scss

@@ -28,7 +28,7 @@ name: 08_brand_recent_events
 </div>
 */
 
-$pr-recent-link: #5c4545 !default;
+$pr-recent-link: $brown !default;
 $pr-recent-title: #888 !default;
 
 .pr-recent {
@@ -45,7 +45,6 @@ $pr-recent-title: #888 !default;
     @include ellipsis;
 
     color: $pr-recent-link;
-    display: inline-block;
     float: left;
     letter-spacing: 0.05em;
     max-width: 74%;

data/app/assets/stylesheets/components/sidebars/_business-kitchen.scss

@@ -80,7 +80,7 @@ name: 01_business_kitchen
 */
 
 $recipes-business-accounts-bg: $basic-bg !default;
-$recipes-business-accounts-title: $ic-brown !default;
+$recipes-business-accounts-title: $brown !default;
 $recipes-business-accounts-brand-name: #777 !default;
 
 .business-accounts {
@@ -88,12 +88,6 @@ $recipes-business-accounts-brand-name: #777 !default;
     margin-top: 0;
     padding: 10px 0;
 
-    > .media-left a {
-      height: 66px;
-      overflow: hidden;
-      width: 88px;
-    }
-
     + li {
       border-top: 1px solid $basic-border;
     }
@@ -102,12 +96,19 @@ $recipes-business-accounts-brand-name: #777 !default;
       padding-top: 0;
     }
 
-    img {
-      background-color: $recipes-business-accounts-bg;
-      width: 100%;
+    > .media-left a {
+      display: block;
+      height: 66px;
+      overflow: hidden;
+      width: 88px;
     }
   }
 
+  img {
+    background-color: $recipes-business-accounts-bg;
+    width: 100%;
+  }
+
   .recipe-title,
   .brand-name {
     @include ellipsis;

data/app/assets/stylesheets/components/sidebars/_business-sponsors.scss

@@ -0,0 +1,65 @@
+// -------------------------------------------
+// Components - Sidebars - business sponsors
+// -------------------------------------------
+
+/*doc
+---
+parent: 17_sidebars
+title: Business kitchen
+name: 13_business_kitchen
+---
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <div class="inner-block widget business-sponsors">
+      <h3 class="title">🍳 特選推薦<span class="badge-sponsor pull-right">贊助</span></h3>
+      <ul>
+        <li><a target="_blank" href="#">🎉🎉@cooking第四期出刊啦 搶先看</a></li>
+        <li><a target="_blank" href="#">天氣終於涼了！煮火鍋囉！！</a></li>
+        <li><a target="_blank" href="#">快速搜尋零失敗食譜！立即免費試用</a></li>
+        <li><a target="_blank" href="#">愛料理週年慶 ❤️ 現省2000元超划算!</a></li>
+        <li><a target="_blank" href="#">美味的健康料理，從一只好鍋開始。</a></li>
+        <li><a target="_blank" href="#">洋芋片也能是料理的好夥伴～</a></li>
+        <li><a target="_blank" href="#">享受健康自在，體驗新鮮生活！</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+*/
+
+$business-sponsors-link: $brown !default;
+$business-sponsors-link-hover: #ac8c85 !default;
+
+.business-sponsors {
+  li {
+    padding: 10px 0;
+
+    + li {
+      border-top: 1px solid $basic-border;
+    }
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  a {
+    @include ellipsis;
+
+    color: $business-sponsors-link;
+
+    &:hover {
+      color: $business-sponsors-link-hover;
+    }
+  }
+
+  .title {
+    line-height: 26px;
+    padding-bottom: 8px;
+  }
+}
+

data/app/assets/stylesheets/components/sidebars/_hot-categories.scss

@@ -10,8 +10,8 @@ name: 03_hot_categories
 ---
 
 <div class="row">
-  <div class="col-xs-12 col-sm-6">
-    <div class="hot-categories">
+  <div class="col-xs-12 col-md-6">
+    <div class="hot-categories ic-hot-categories">
       <div class="title">精選主題分類</div>
       <ul class="clearfix">
         <li>
@@ -69,9 +69,9 @@ name: 03_hot_categories
 
 */
 
-$hot-categories-title-bg: #f9f7f2 !default;
+$hot-categories-title-bg: $light-gray-light4 !default;
 $hot-categories-link: #888 !default;
-$hot-categories-link-hover: $ic-brown !default;
+$hot-categories-link-hover: $brown !default;
 
 .hot-categories {
   background-color: $white;
@@ -81,7 +81,7 @@ $hot-categories-link-hover: $ic-brown !default;
   .title {
     background-color: $hot-categories-title-bg;
     border-bottom: 1px solid $basic-border;
-    color: $ic-brown;
+    color: $brown;
     line-height: 1;
     margin-bottom: 0;
     padding: 14px 15px;
@@ -89,26 +89,17 @@ $hot-categories-link-hover: $ic-brown !default;
   }
 
   ul {
+    @include flexbox;
+    @include flex-wrap(wrap);
+    @include flex-just(space-between);
+
     background-color: $white;
-    display: -ms-flexbox; // IE10
-    display: -webkit-flex; //safari
-    display: box; //for only support old ver. browsers...
-    display: flex;
-    -ms-flex-pack: center;
-    -ms-flex-wrap: wrap;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-justify-content: space-between;
-    justify-content: space-between;
     margin-bottom: 0;
     padding: 15px 15px 0;
   }
 
   li {
-    -ms-flex: none;
-    -webkit-flex: none;
     border-bottom: 0;
-    flex: none;
     list-style: none;
     margin-bottom: 0;
     padding-bottom: 0;
@@ -137,7 +128,7 @@ $hot-categories-link-hover: $ic-brown !default;
   span {
     @include ellipsis;
 
-    color: $ic-brown;
+    color: $brown;
     display: block;
     font-size: 16px;
     padding-bottom: 10px;
@@ -162,30 +153,20 @@ $hot-categories-link-hover: $ic-brown !default;
 
 @media only screen and (max-width: 991px) {
   .hot-categories {
-    ul {
-      -ms-flex-wrap: nowrap;
-      -webkit-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-		}
-
-    li {
-      width: 19%;
-
-      + li {
-        margin-left: 0.6em;
-			}
-		}
-
-    .img {
-      height: 100%;
-		}
+    li + li {
+      margin-left: 0.6em;
+    }
 	}
 }
 
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .hot-categories {
-    li:last-child {
-      display: none;
+    li {
+      width: 19%;
+
+      &:last-child {
+        display: none;
+      }
     }
   }
 }
@@ -198,7 +179,6 @@ $hot-categories-link-hover: $ic-brown !default;
 
     li {
       float: left;
-      width: 48%;
 
       + li {
         margin-left: 0;
@@ -210,3 +190,4 @@ $hot-categories-link-hover: $ic-brown !default;
 		}
 	}
 }
+

data/app/assets/stylesheets/components/sidebars/_icook-video.scss

@@ -1,5 +1,3 @@
-@import "compass/typography/text/ellipsis";
-
 // --------------------------------------
 // Components - Sidebars - icook video
 // --------------------------------------
@@ -34,11 +32,9 @@ name: 06_icook_video
 </div>
 */
 
-@import "compass/typography/text/ellipsis";
-
-$icook-videos-border: #efede8 !default;
-$icook-videos-title: #5c4545 !default;
-$icook-videos-play-bg: $ic-brown !default;
+$icook-videos-border: $basic-border !default;
+$icook-videos-title: $brown !default;
+$icook-videos-play-bg: $brown !default;
 $icook-videos-play-icon: $white !default;
 
 .icook-videos {
@@ -63,7 +59,6 @@ $icook-videos-play-icon: $white !default;
     @include ellipsis;
 
     color: $icook-videos-title;
-    display: block;
     width: 100%;
   }
 
@@ -107,3 +102,4 @@ $icook-videos-play-icon: $white !default;
     }
   }
 }
+

data/app/assets/stylesheets/components/sidebars/_popular-recipes.scss

@@ -10,35 +10,40 @@ name: 04_popular_recipes
 ---
 
 <div class="row">
-  <div class="col-xs-12 col-sm-6">
-    <div class="inner-block widget">
-      <div class="popular-recipes">
-        <h4 class="title">本日熱門食譜<span class="pull-right"><a href="#">更多</a></span>
-        </h4>
+  <div class="col-xs-12 col-md-6">
+    <div class="popular-recipes">
+      <h4 class="title">本日熱門食譜</h4>
+      <div class="inner-block">
         <ul class="clearfix">
           <li>
             <a href="#">
-              <img src="/images/recipe-default.png" alt="">
+              <div class="img">
+                <img src="/images/recipe-default.png" alt="鮮奶酪">
+              </div>
               <span>鮮奶酪</span>
             </a>
           </li>
           <li>
             <a href="#">
-              <img src="/images/recipe-default.png" alt="">
+              <div class="img">
+                <img src="/images/recipe-default.png" alt="芒果奶酪">
+              </div>
               <span>芒果奶酪</span>
             </a>
           </li>
-        </ul>
-        <ul class="clearfix">
           <li>
             <a href="#">
-              <img src="/images/recipe-default.png" alt="">
+              <div class="img">
+                <img src="/images/recipe-default.png" alt="義式鮮奶酪">
+              </div>
               <span>義式鮮奶酪</span>
             </a>
           </li>
           <li>
             <a href="#">
-              <img src="/images/recipe-default.png" alt="">
+              <div class="img">
+                <img src="/images/recipe-default.png" alt="鮮奶酪">
+              </div>
               <span>鮮奶酪</span>
             </a>
           </li>
@@ -50,56 +55,106 @@ name: 04_popular_recipes
 
 */
 
-@import "compass/typography/text/ellipsis";
-
 $popular-recipes-link: #ac8c85 !default;
 $popular-recipes-bg: #eeede8 !default;
 
 .popular-recipes {
-  .title a {
-    @include icon-b("\f101");
+  ul {
+    @include flexbox;
+    @include flex-wrap(wrap);
+    @include flex-just(space-between);
 
-    color: $popular-recipes-link;
-    font-size: 13px;
+    margin-bottom: -15px;
+    padding-left: 0;
 
-    &::after {
-      margin-left: 2px;
+    span {
+      @include ellipsis;
     }
   }
 
-  ul:last-child li {
-    margin-bottom: 0;
-  }
-
   li {
     border-bottom: 0;
-    float: left;
+    height: 100%;
+    list-style: none;
     margin-bottom: 15px;
-    margin-right: 3.58%;
     padding-bottom: 0;
     padding-top: 0;
     width: 48.1%;
 
-    &:last-child {
-      margin-right: 0;
+    &:nth-child(even) {
+      margin-left: auto;
     }
   }
 
-  a,
-  ul span {
+  span {
     display: block;
+    line-height: 1;
     width: 100%;
   }
 
-  ul span {
-    @include ellipsis;
+  a {
+    color: $brown;
   }
 
-  img {
+  .img {
     background-color: $popular-recipes-bg;
-    height: 122px;
+    border-radius: 3px;
     margin-bottom: 10px;
+    overflow: hidden;
+  }
+
+  img {
     width: 100%;
   }
+
+  .title {
+    background-color: $white;
+    border: 1px solid $basic-border;
+    border-bottom: 0;
+    color: $brown;
+    font-size: 16px;
+    line-height: 1;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: 15px;
+  }
+
+  .inner-block {
+    margin-bottom: 15px;
+    padding: 15px;
+  }
+}
+
+
+@media only screen and (max-width: 991px) {
+  .popular-recipes {
+    margin-bottom: 30px;
+
+    li {
+      width: 23%;
+
+      &:nth-child(3) {
+        margin-left: auto;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .popular-recipes {
+    li {
+      width: 48%;
+
+      &:nth-child(3) {
+        margin-left: 0;
+      }
+    }
+
+    li,
+    img,
+    .img {
+      height: 100%;
+    }
+  }
 }