cupboard 0.2.0

data/app/assets/stylesheets/components/navigations/_categories-nav-responsive.scss

@@ -0,0 +1,131 @@
+//
+// Navigation - categories
+//
+// --------------------------
+//
+// categories navigation responsive
+@media only screen and (min-width: 769px) and (max-width: 991px) {
+  .mega-menu {
+    .navbar-header {
+      float: none;
+      width: 100%;
+    }
+
+    button {
+      display: block;
+    }
+
+    .navbar-collapse.collapse {
+      display: none !important;
+
+      &.in {
+        display: block !important;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .mega-menu {
+    border-width: 0 0 1px 0 !important;
+    border-style: solid;
+    border-color: #ebe5e1 !important;
+    float: none;
+    margin: 0 0 15px;
+    min-height: 30px;
+    padding: 0;
+    width: auto;
+
+    ul,
+    li {
+      margin-bottom: 0;
+      padding: 0;     
+    }
+
+    ul {
+      background-color: #fff;
+      border: 0;
+    }
+
+    li {
+      a {
+        padding: 4px 0;
+      }
+
+      &:first-child {
+        border-top: 0;
+        padding-top: 0;
+      }
+
+      &:last-child a {
+        border-bottom: 0 !important;
+      }
+    }
+  
+    .list-title:before {
+      top: 8px;
+    }
+
+    .panel-group {
+      .list-group-item {
+        padding: 3px 0 3px 14px;
+      }
+    }
+
+    .list-group .list-group-item {
+      padding-left: 0;
+      width: 100%;
+    }
+  }
+
+  .cate-menu {
+    button {
+      @include icon-b("\f0d8");
+
+      color: #564e4a;
+      display: block;
+      font-size: 13px;
+      margin: 0;
+      padding: 10px 0;
+      text-align: left;
+      width: 100%;
+
+      &:after {
+        font-size: 20px;
+        right: 0;
+        top: 10px;
+        position: absolute;
+        width: 12px;
+      }
+
+      &.collapsed:after {
+        content: "\f0d7";
+      }
+    }
+
+    &.main-menu > .list-group-item .list-title {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .mega-menu {
+    .navbar-header {
+      width: 100%;
+    }
+  }
+
+  .entry .main-menu > .list-group-item {
+    height: 362px;
+    overflow: hidden;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .mega-menu .main-menu > .list-group-item {
+    border-right: 0;
+    width: 50%;
+  }
+}

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

@@ -0,0 +1,307 @@
+// --------------------------------
+// Navigation - categories
+// --------------------------------
+
+/*doc
+---
+parent: 08_navigations
+title: Category navigation
+name: category_navigations
+---
+
+<div><p>in categories/index</p></div>
+<div class="entries mega-menu">
+  <div class="entry">
+    <h4><a href="#">主要食材</a></h4>
+    <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>
+          <ul class="list-group hidden-xs">
+            <li class="list-group-item"><a href="#">玉米</a></li>
+            <li class="list-group-item"><a href="#">藜麥</a></li>
+          </ul>
+        </div>
+      </li>
+      <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>
+          <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="#">竹筍</a></li>
+            <li class="list-group-item"><a href="#">筊白筍</a></li>
+            <li class="list-group-item"><a href="#">芋頭</a></li>
+          </ul>
+        </div>
+      </li>
+      <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>
+          <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="#">蘋果</a></li>
+            <li class="list-group-item"><a href="#">香蕉</a></li>
+          </ul>
+        </div>
+      </li>
+      <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>
+          <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="#">貝類</a></li>
+            <li class="list-group-item"><a href="#">軟體海鮮</a></li>
+            <li class="list-group-item"><a href="#">魚類</a></li>
+          </ul>
+        </div>
+      </li>
+      <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>
+          <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="#">小黃瓜</a></li>
+            <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="#">苦瓜</a></li>
+          </ul>
+        </div>
+      </li>
+      <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>
+          <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="#">豬肉</a></li>
+            <li class="list-group-item"><a href="#">雞肉</a></li>
+            <li class="list-group-item"><a href="#">鴨肉</a></li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+```html_example
+<div class="entries mega-menu">
+  <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>
+        <ul class="list-group hidden-xs">
+          <li class="list-group-item"><a href="#">玉米</a></li>
+          <li class="list-group-item"><a href="#">藜麥</a></li>
+        </ul>
+      </div>
+    </li>
+  </ul>
+</div>
+```
+
+*/
+
+// categories/index
+.mega-menu {
+  background-color: #fff;
+  border-width: 0 0 1px;
+  margin-bottom: 0;
+ 
+  h4 {
+    background-color: #efede8;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: 12px 15px;
+
+    a {
+      color: #564e4a;
+      font-size: 16px;
+      line-height: 1;
+    }
+  }
+
+  .list-title {
+    @include icon("\f0da");
+
+    display: block;
+    color: #564e4a;
+    font-size: 16px;
+    padding-left: 10px;
+    position: relative;
+
+    &:before {
+      color: #aa8f83;
+      font-size: 18px;
+      left: 0;
+      margin-right: 0;
+      position: absolute;
+      top: 4px;
+      width: 12px;
+    }
+  }
+
+  .list-group-item {
+    border-radius: 0;
+    border: 0;
+    margin-bottom: 0;
+    padding: 0;
+
+    &:hover > .accordion-heading > .list-title {
+      color: #564e4a;
+    }
+
+    &.active a {
+      color: #564e4a;
+      text-decoration: underline;
+    }
+  }
+
+  .main-menu {
+    margin-bottom: 0;
+    padding-left: 0;
+    padding-top: 20px;
+    
+    & > .list-group-item {
+      border-right: 1px solid #ebe5e1;
+      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 #ebe5e1;
+        color: #564e4a;
+        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-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;
+    }
+  }
+
+  .main-menu > .list-group-item,
+  .panel-group > .list-group-item {
+    > .list-title {
+      color: #5c4545;
+    }
+  }
+
+  .img {
+    background-color: #eeede8;
+    height: 60px;
+    margin-bottom: 15px;
+    overflow: hidden;
+    width: 80px;
+  }
+}
+
+// categories/show
+.cate-menu {
+  padding: 0;
+
+  .navbar-collapse {
+    padding-left: 0;
+    padding-right: 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;
+  }
+
+  .title {
+    background-color: #f7f6f3;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+    
+    a {
+      color: #564e4a;
+    }
+  }
+}

data/app/assets/stylesheets/components/navigations/_recipe-nav.scss

@@ -0,0 +1,112 @@
+// --------------------------------
+// Navigation - recipes
+// --------------------------------
+
+/*doc
+---
+parent: 08_navigations
+title: Recipe navigation
+name: recipe_navigations
+---
+
+<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>
+
+```html_example
+<div class="category-tags">
+  <ul class="clearfix">
+    <li><a href="#">主題料理</a></li>
+    <li><a href="#">省錢懶人</a></li>
+    <li class="active"><a href="#">快速料理</a> (1231)</li>
+  </ul>
+</div>
+```
+*/
+
+$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-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;
+    margin-bottom: 10px;
+    padding-bottom: 15px;
+  }
+
+  ul {
+    padding-left: 0;
+
+    & + ul {
+      margin-top: 12px;
+    }
+  }
+
+  li {
+    color: $category-tag-link;
+    float: left;
+    font-size: 16px;
+    line-height: 24px;
+    list-style-type: none;
+
+    a {
+      color: $category-tag-link;
+      text-decoration: underline;
+    }
+
+    &.active a {
+      color: $category-tag-link-active;
+    }
+
+    &:first-child {
+      @include icon("\f0da");
+
+      &:before {
+        color: $category-tag-icon;
+        margin-right: 4px;
+        padding-left: 5px;
+      }
+    }
+
+    & + li {
+      @include icon("\f054");
+
+      &:before {
+        font-size: 11px;
+        margin-left: 4px;
+        margin-right: 0;
+        vertical-align: middle;
+        width: 12px;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}