cupboard 0.2.0

data/app/assets/stylesheets/widgets/modal/_modal-reset.scss

@@ -0,0 +1,40 @@
+//
+// Widgets - modal reset
+//
+// -----------------------------
+// # override bootstrap modal
+.modal-backdrop {
+  background-color: #564e4a;
+
+  &.in {
+    opacity: 0.6;
+  }
+}
+
+.modal-header {
+  padding: 20px 30px 15px;
+
+  h3 {
+    font-size: 14px;
+    margin: 0;
+  }
+}
+
+.modal-body { 
+  font-size: 13px;
+  padding: 15px 30px 30px;
+}
+
+.modal-content {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+
+  button {
+    color: #999;
+  }
+}
+
+.modal-footer {
+  border-top: 0;
+}

data/app/assets/stylesheets/widgets/modal/_recipe-list-modal.scss

@@ -0,0 +1,111 @@
+//
+// Widgets - recipe list modal
+//
+// -----------------------------
+@media only screen and (min-width: 768px) {
+  .recipe-list-modal {
+    .modal-dialog {
+      width: 526px;
+    }
+  }
+}
+@media only screen and (max-width: 768px) {
+  .recipe-list-modal {
+    .modal-dialog {
+      margin: 30px auto;
+      width: 290px;
+    }
+  }
+}
+
+.recipe-list-modal {
+  .modal-header {
+    background-color: #f06354;
+    color: #ffffff;
+    font-size: 16px;
+    text-align: center;
+    padding: 9px 30px;
+  }
+
+  .modal-body {
+    background-color: #eeede8;
+    font-size: 14px;
+    height: 330px;
+    padding: 15px;
+
+    ul {
+      list-style-type: none;
+    }
+
+    .list-type {
+      background-color: #eeede8;
+      color: #666666;
+      margin: 0px;
+      padding: 8px;
+    }
+
+    .lists-info {
+      background-color: #ffffff;
+      display: inline-block;
+      float: left;
+      height: 290px;
+      overflow-y: scroll;
+      padding: 15px;
+      width: 260px;
+
+      ul {
+        padding: 15px 20px;
+      }
+
+      .list-name {
+        color: #888888;
+      }
+    }
+
+    .recipe-info {
+      display: inline-block;
+      float: left;
+      margin-left: 15px;
+      width: 220px;
+
+      img {
+        height: 165px;
+        width: 100%;
+      }
+    }
+  }
+
+  .modal-footer {
+    background-color: #eeede8;
+    margin-top: 0px;
+    padding: 0px 20px 15px 20px;
+
+    .list-setting {
+      @include btn-icon("\f040", 14px, #564e4a, transparent);
+
+      bottom: 45px;
+      color: #564e4a;
+      left: 15px;
+      position: absolute;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    .btn-cancel {
+      color: #888;
+      margin: 0px;
+      padding: 0px;
+
+    }
+
+    .btn-submit {
+      background-color: #9fbe4c;
+      color: #ffffff;
+      margin-left: 15px;
+      padding: 8px;
+      width: 120px;
+    }
+  }
+}

data/app/assets/stylesheets/widgets/sidebar-widgets/_business-kitchen.scss

@@ -0,0 +1,134 @@
+// -----------------------------------
+// Sidebar widgets - business kitchen
+// -----------------------------------
+
+/*doc
+---
+parent: 04_sidebar_widgets
+title: Business kitchen
+name: business_kitchen
+---
+<div class="row">
+  <div class="col-xs-12 col-sm-5">
+    <div class="inner-block widget business-accounts">
+      <h3 class="title">品牌廚房<a rel="nofollow" class="link-to-more pull-right" href="#">更多</a></h3>
+      <ul>
+        <li class="media">
+          <div class="media-left">
+            <a title="用電鍋做布郎尼" href="#">
+              <img alt="" class="media-object" src="/images/recipe-default.png">
+            </a>
+          </div>
+          <div class="media-body">
+            <div class="media">
+              <div class="media-left">
+                <a title="iCook 愛料理" class="pull-left brand-logo" href="#">
+                  <img alt="" class="media-object" src="/images/default-avatar.png">
+                </a>
+              </div>
+              <div class="media-body">
+                <a class="brand-name" href="#">iCook 愛料理</a>
+              </div>
+            </div>
+            <a title="用電鍋做布郎尼" class="recipe-title" href="#">用電鍋做布郎尼</a>
+          </div>
+        </li>
+        <li class="media">
+          <div class="media-left">
+            <a title="用電鍋做布郎尼" href="#">
+              <img alt="" class="media-object" src="/images/recipe-default.png">
+            </a>
+          </div>
+          <div class="media-body">
+            <div class="media">
+              <div class="media-left">
+                <a title="iCook 愛料理" class="pull-left brand-logo" href="#">
+                  <img alt="" class="media-object" src="/images/default-avatar.png">
+                </a>
+              </div>
+              <div class="media-body">
+                <a class="brand-name" href="#">iCook 愛料理</a>
+              </div>
+            </div>
+            <a title="用電鍋做布郎尼" class="recipe-title" href="#">用電鍋做布郎尼</a>
+          </div>
+        </li>
+        <li class="media">
+          <div class="media-left">
+            <a title="用電鍋做布郎尼" href="#">
+              <img alt="" class="media-object" src="/images/recipe-default.png">
+            </a>
+          </div>
+          <div class="media-body">
+            <div class="media">
+              <div class="media-left">
+                <a title="iCook 愛料理" class="pull-left brand-logo" href="#">
+                  <img alt="" class="media-object" src="/images/default-avatar.png">
+                </a>
+              </div>
+              <div class="media-body">
+                <a class="brand-name" href="#">iCook 愛料理</a>
+              </div>
+            </div>
+            <a title="用電鍋做布郎尼" class="recipe-title" href="#">用電鍋做布郎尼</a>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+*/
+
+$recipes-business-accounts-bg: $basic-bg !default;
+$recipes-business-accounts-title: $ic-brown !default;
+$recipes-business-accounts-brand-name: #777 !default;
+
+.business-accounts {
+  li {
+    padding: 10px 0;
+
+    > .media-left a {
+      height: 66px;
+      overflow: hidden;
+      width: 88px;
+    }
+
+    img {
+      background-color: $recipes-business-accounts-bg;
+      width: 100%;
+    }
+  }
+
+  .title {
+    margin-bottom: 10px;
+  }
+
+  .recipe-title,
+  .brand-name {
+    @include ellipsis;
+
+    font-size: 15px;
+    width: 100%;
+  }
+
+  .recipe-title {
+    border-bottom: 0;
+    color: $recipes-business-accounts-title;
+    letter-spacing: 0;
+    margin-bottom: 0;
+    margin-top: 10px;
+    padding-bottom: 0;
+  }
+
+  .brand-name {
+    color: $recipes-business-accounts-brand-name;
+    line-height: 34px;
+  }
+
+  .brand-logo {
+    height: 34px;
+    width: 34px;
+  }
+}
+
+

data/app/assets/stylesheets/widgets/sidebar-widgets/_icook-video.scss

@@ -0,0 +1,109 @@
+@import "compass/typography/text/ellipsis";
+
+// ------------------------------
+// Sidebar widgets - icook video
+// ------------------------------
+
+/*doc
+---
+parent: 04_sidebar_widgets
+title: iCook video
+name: icook_video
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <div class="inner-block widget">
+      <div class="icook-videos">
+        <h4 class="title">愛料理 TV</h4>
+        <ul>
+          <li>
+            <a href="#">
+              <div>
+                <i class="fa fa-play-circle-o"></i>
+                <div class="play"></div>
+								<img class="img-responsive" src="/images/recipe-default.png" alt="">
+							</div>
+							<span>醬燒雞腿排</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</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-play-icon: $white !default;
+
+.icook-videos {
+  ul {
+    margin-bottom: 0;
+  }
+
+  li:not(:last-child) {
+    border-bottom: 1px solid $icook-videos-border;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+  }
+
+  a > div {
+    height: 150px;
+    margin-bottom: 10px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  span {
+    @include ellipsis;
+
+    color: $icook-videos-title;
+    display: block;
+    width: 100%;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .play {
+    background-color: $icook-videos-play-bg;
+    display: none;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    opacity: 0.2;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+  }
+
+  i {
+    color: $icook-videos-play-icon;
+    display: none;
+    font-size: 55px;
+    height: 50px;
+    left: 44%;
+    position: absolute;
+    top: 33%;
+    width: 50px;
+    z-index: 2;
+  }
+
+  li:hover {
+    .play,
+    i {
+      display: block;
+    }
+  }
+}

data/app/assets/stylesheets/widgets/sidebar-widgets/_popular-recipe-lists.scss

@@ -0,0 +1,232 @@
+// ---------------------------------------
+// Sidebar widgets - popular recipe lists
+// ---------------------------------------
+
+/*doc
+---
+parent: 04_sidebar_widgets
+title: Popular recipe lists
+name: popular_recipe_lists
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <div class="inner-block widget">
+      <div class="popular-recipe-lists">
+        <h4 class="title">推薦分類</h4>
+        <ol>
+          <li class="clearfix">
+            <a class="media clearfix" href="#">
+              <span class="media-body">
+                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
+                <span>提拉米蘇</span>
+              </span>
+              <span class="text-right pull-right">158 道食譜</span>
+            </a>
+          </li>
+          <li class="clearfix">
+            <a class="media clearfix" href="#">
+              <span class="media-body">
+                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
+                <span>熊貓料理</span>
+              </span>
+              <span class="text-right pull-right">28 道食譜</span>
+            </a>
+          </li>
+          <li class="clearfix">
+            <a class="media clearfix" href="#">
+              <span class="media-body">
+                  <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
+                <span>蓋飯</span>
+              </span>
+              <span class="text-right pull-right">389 道食譜</span>
+            </a>
+          </li>
+          <li class="clearfix">
+            <a class="media clearfix" href="#">
+              <span class="media-body">
+                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
+                <span>奶酪</span>
+              </span>
+              <span class="text-right pull-right">166 道食譜</span>
+            </a>
+          </li>
+          <li class="clearfix">
+            <a class="media clearfix" href="#">
+              <span class="media-body">
+                  <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
+                <span>寶寶副食品</span>
+              </span>
+              <span class="text-right pull-right">426 道食譜</span>
+            </a>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+
+*/
+
+@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;
+
+// brands 精選清單 / popular 推薦分類
+// popular-recipe-lists
+.popular-recipe-lists {
+  li {
+    position: relative;
+  }
+
+  a {
+    position: static;
+
+    &:hover {
+      color: $popular-recipe-lists-text;
+
+      span:not(.pull-right) {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .media-body {
+    display: inline-block;
+    line-height: 52px;
+    width: 68%;
+
+    > span {
+      @include ellipsis;
+
+      display: inline;
+      float: left;
+      font-size: 16px;
+      width: 65%;
+    }
+  }
+
+  .pull-right {
+    @include icon-b("\f0a9");
+
+    color: $popular-recipe-lists-text;
+    font-size: 12px;
+    letter-spacing: 0.01em;
+    line-height: 52px;
+    margin-left: 0;
+    padding-left: 0;
+    padding-right: 18px;
+    position: relative;
+    width: 8.5em;
+
+    &::after {
+      background-color: $popular-recipe-lists-icon-bg;
+      color: $popular-recipe-lists-icon-text;
+      font-size: 14px;
+      line-height: 52px;
+      margin-left: 0;
+      position: absolute;
+      right: 3px;
+      top: -1px;
+    }
+  }
+
+  img {
+    @include background(image-url("default/category_default.jpg"), no-repeat);
+
+    height: 51px;
+    margin-right: 10px;
+    width: 68px;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .popular-recipe-lists {
+    .media-body {
+      width: 60%;
+
+      > span {
+        width: 50%;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .popular-recipe-lists {
+    .media-body {
+      width: 84%;
+
+      > span {
+        width: 86%;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 740px) {
+  .popular-recipe-lists {
+    .media-body {
+      width: 80%;
+
+      > span {
+        width: 80%;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  .popular-recipe-lists {
+    .media-body {
+      width: 77%;
+
+      > span {
+        width: 76%;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .popular-recipe-lists {
+    .media-body {
+      width: 68%;
+
+      > span {
+        width: 66%;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .popular-recipe-lists {
+    .media-body {
+      width: 65%;
+
+      > span {
+        width: 56%;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .popular-recipe-lists {
+    .media-body {
+      width: 62%;
+
+      > span {
+        width: 51%;
+      }
+    }
+
+    .pull-right {
+      width: 8em;
+    }
+  }
+}
+