cupboard 0.2.0

data/app/assets/stylesheets/widgets/sidebar-widgets/_popular-recipes.scss

@@ -0,0 +1,105 @@
+// ----------------------------------
+// Sidebar widgets - popular recipes
+// ----------------------------------
+
+/*doc
+---
+parent: 04_sidebar_widgets
+title: Popular recipes
+name: 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>
+        <ul class="clearfix">
+          <li>
+            <a href="#">
+              <img src="/images/recipe-default.png" alt="">
+              <span>鮮奶酪</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <img src="/images/recipe-default.png" alt="">
+              <span>芒果奶酪</span>
+            </a>
+          </li>
+        </ul>
+        <ul class="clearfix">
+          <li>
+            <a href="#">
+              <img src="/images/recipe-default.png" alt="">
+              <span>義式鮮奶酪</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <img src="/images/recipe-default.png" alt="">
+              <span>鮮奶酪</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+*/
+
+@import "compass/typography/text/ellipsis";
+
+$popular-recipes-link: #ac8c85 !default;
+$popular-recipes-bg: #eeede8 !default;
+
+.popular-recipes {
+  .title a {
+    @include icon-b("\f101");
+
+    color: $popular-recipes-link;
+    font-size: 13px;
+
+    &::after {
+      margin-left: 2px;
+    }
+  }
+
+  ul:last-child li {
+    margin-bottom: 0;
+  }
+
+  li {
+    border-bottom: 0;
+    float: left;
+    margin-bottom: 15px;
+    margin-right: 3.58%;
+    padding-bottom: 0;
+    padding-top: 0;
+    width: 48.1%;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  a,
+  ul span {
+    display: block;
+    width: 100%;
+  }
+
+  ul span {
+    @include ellipsis;
+  }
+
+  img {
+    background-color: $popular-recipes-bg;
+    height: 122px;
+    margin-bottom: 10px;
+    width: 100%;
+  }
+}
+

data/app/assets/stylesheets/widgets/sidebar-widgets/_popular-search.scss

@@ -0,0 +1,317 @@
+// ---------------------------------
+// Sidebar widgets - popular search
+// ---------------------------------
+
+/*doc
+---
+parent: 04_sidebar_widgets
+title: Popular search
+name: popular_search
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <div class="inner-block widget">
+      <div id="popular-search-panel" class="popular-search">
+        <h4 class="title">最近熱門關鍵字</h4>
+        <ol style="counter-reset: li" class="slats">
+          <li class="media clearfix">
+            <div class="media-left">
+              <a href="#" title="馬鈴薯">馬鈴薯</a>
+              <i class="icon-minus">&nbsp;</i>
+            </div>
+            <div class="media-body hidden-xs hidden-sm">
+              <ul class="clearfix pull-right">
+                <li>
+                  <a href="#">
+                    <div class="img">
+                      <img alt="馬鈴薯" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="#">
+                    <div class="img">
+                      <img alt="馬鈴薯" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li class="media clearfix hot">
+            <div class="media-left">
+              <a href="#" title="地瓜">地瓜</a>
+              <i class="icon-arrow-up">&nbsp;</i>
+            </div>
+            <div class="media-body hidden-xs hidden-sm">
+              <ul class="clearfix pull-right">
+                <li>
+                  <a href="#">
+                    <div class="img">
+                      <img alt="地瓜" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="#">
+                    <div class="img">
+                      <img alt="地瓜" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li class="media clearfix">
+            <div class="media-left">
+              <a href="#" title="蛋糕">蛋糕</a>
+              <i class="icon-arrow-down">&nbsp;</i>
+            </div>
+            <div class="media-body hidden-xs hidden-sm">
+              <ul class="clearfix pull-right">
+                <li>
+                  <a href="#">
+                    <div class="img">
+                      <img alt="蛋糕" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="#">
+                    <div class="img">
+                      <img alt="蛋糕" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li class="media clearfix">
+            <div class="media-left">
+              <a href="#" title="洋蔥">洋蔥</a>
+              <i class="icon-arrow-up">&nbsp;</i>
+            </div>
+            <div class="media-body hidden-xs hidden-sm">
+              <ul class="clearfix pull-right">
+                  <li>
+                    <a href="#">
+                      <div class="img">
+                        <img alt="洋蔥" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                      </div>
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#">
+                      <div class="img">
+                        <img alt="洋蔥" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                      </div>
+                    </a>
+                  </li>
+              </ul>
+            </div>
+          </li>
+          <li class="media clearfix">
+            <div class="media-left">
+              <a href="#" title="起司早餐">起司早餐</a>
+              <span class="badge-support"></span>
+            </div>
+            <div class="media-body hidden-xs hidden-sm">
+              <ul class="clearfix pull-right">
+                <li>
+                  <a href="#">
+                    <div class="img">
+                      <img alt="起司早餐" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="#">
+                    <div class="img">
+                      <img alt="起司早餐" class="img-responsive" src="/images/recipe-default.png" width="80" height="60">
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+.popular-search {
+  .title {
+    margin-bottom: 5px;
+  }
+
+  ol > li:before {
+    background-color: transparent;
+    color: #564e4a;
+    content: counter(li);
+    counter-increment: li;
+    font-size: 18px;
+    font-weight: bold;
+    height: 30px;
+    left: 0;
+    line-height: 49px;
+    margin-right: 8px;
+    position: absolute;
+    top: 15px;
+    text-align: center;
+    width: 30px;
+  }
+
+  li {
+    margin-bottom: 0;
+    padding-left: 27px;
+    position: relative;
+    
+    &:first-child {
+      padding-top: 10px;
+    }
+
+    a:hover {
+      color: #999;
+    }
+  }
+
+  li.hot {
+    position: relative;
+    overflow: hidden;
+
+    &:after {
+      -webkit-text-size-adjust: none;
+      content: "HOT";
+      color: #aa0000;
+      font-size: 10px;
+      font-weight: 700;
+      left: 129px;
+      position: absolute;
+      top: 14px;
+    }
+  }
+
+  .media-left {
+    @include ellipsis;
+    
+    line-height: 60px;
+    margin-right: 0;
+    margin-top: 0;
+    width: 41.7%;
+
+    a {
+      color: #888;
+      float: left;
+      font-size: 16px;
+    }
+  }
+
+  .media-body {
+    li {
+      border-bottom: 0;
+      float: left;
+      height: 100%;
+      padding: 0;
+      width: 80px;
+
+      & + li {
+        margin-left: 10px;
+      }
+    }
+
+    a {
+      @include ellipsis;
+
+      display: block;
+      width: 80px;
+    }
+
+    .img {
+      height: 60px;
+      overflow: hidden;
+      width: 80px;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .icon-arrow-up {
+    @include icon("\f176");
+
+    &:before {
+      color: #aa0000;
+    }
+  }
+
+  .icon-arrow-down {
+    @include icon("\f175");
+
+    &:before {
+      color: #1c959e;
+    } 
+  }
+  
+  .icon-minus {
+    @include icon("\f068");
+
+    &:before {
+      color: #999;
+      position: relative;
+      right: -2px;
+    } 
+  }
+
+  .icon-arrow-up,
+  .icon-arrow-down,
+  .icon-minus {
+    float: right;
+
+    &:before {
+      font-weight: bold;
+      font-size: 16px;
+      margin-right: 0;
+      text-align: center;
+    }
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .popular-search {
+    ol > li {
+      padding-left: 17px;
+
+      &:before {
+        width: 10px;
+      }
+    }
+
+    .media-left {
+      width: 25%;
+    }
+  }
+}
+
+@media only screen and (max-width: 992px) {
+  .popular-search {
+    ol > li:before {
+      line-height: 7px;
+      width: 17px;
+    }
+
+    .media-left {
+      display: block;
+      line-height: 18px;
+      width: 100%;
+    }
+
+    .badge-support:after {
+      right: -58px;
+    }
+  }
+}

data/app/assets/stylesheets/widgets/sidebar-widgets/_recipes-collect.scss

@@ -0,0 +1,45 @@
+// ----------------------------------
+// Sidebar widgets - recipes collect
+// ----------------------------------
+
+/*doc
+---
+parent: 04_sidebar_widgets
+title: Recipes collect
+name: recipes_collect
+---
+<div class="row">
+	<div class="col-xs-12 col-sm-6">
+		<div class="inner-block widget">
+			<div class="recipes-collect">
+				<h4 class="title badge-pr">食譜料理募集中</h4>
+				<ul>
+					<li><a target="_blank" href="#">iCook 愛料理暖心食譜募集中</a></li>
+					<li><a target="_blank" href="#">iCook 愛料理暖心食譜募集中</a></li>
+					<li><a target="_blank" href="#">iCook 愛料理暖心食譜募集中</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
+*/
+
+$recipes-collect-icon: $orange !default;
+
+.recipes-collect {
+  li {
+    position: relative;
+  }
+
+  a {
+    @include icon-b("\f0a9");
+
+    &::after {
+      color: $recipes-collect-icon;
+      line-height: 19px;
+      margin-left: 0;
+      position: absolute;
+      right: 0;
+    }
+  }
+}