cupboard 0.2.0

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

@@ -0,0 +1,38 @@
+@import "compass/typography/text/ellipsis";
+// -------------------------------
+//
+// Media blocks - popular recipes
+//
+// -------------------------------
+//
+.popular-recipes {
+  & > div {
+    border-bottom: 0;
+    float: left;
+    margin-bottom: 15px;
+    margin-right: 3.58%;
+    padding-bottom: 0;
+    padding-top: 0;
+    width: 48.1%;
+  }
+
+  a {
+    color: #5c4544;
+    display: block;
+
+    &:hover {
+      color: #ac8c85;
+    }
+  }
+  
+  img {
+    background-color: #eeede8;
+    max-height: 122px;
+    margin-bottom: 10px;
+    width: 100%;
+  } 
+
+  span {
+    @include ellipsis;
+  } 
+}

data/app/assets/stylesheets/components/medias/_pr-lists.scss

@@ -0,0 +1,53 @@
+//
+// Media blocks - pr lists
+//
+// --------------------------
+// # brands - sidebar widget
+.pr-lists {
+  .cover {
+    height: 100px;
+    overflow: hidden;
+  }
+
+  .pr-list-item {
+    border-bottom: 0;
+    margin-bottom: 10px;
+    padding: 0;
+    position: relative;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    span {
+      bottom: 3px;
+      color: #5c4545;
+      position: absolute;
+      right: 8px;
+      z-index: 3;
+    }
+  }
+
+  a {
+    display: block;
+
+    &:hover span {
+      text-decoration: underline;
+    }
+  }
+  
+  img {
+    width: 100%;
+  }
+
+  .mask {
+    bottom: 0;
+    background-color: #fff;
+    filter: alpha(opacity=70) /0; //ie8
+    height: 30px;
+    opacity: 0.7;
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+  }
+}

data/app/assets/stylesheets/components/medias/_recipe-reference.scss

@@ -0,0 +1,45 @@
+@import "compass/typography/text/ellipsis";
+// --------------------------------
+//
+// Media blocks - recipe reference
+//
+// --------------------------------
+// # tv - sidebar widget
+.recipe-reference {
+  margin-top: 0;
+
+  .reference {
+    background: #fff;
+
+    a {
+      display: block;
+      position: relative;
+
+      &:hover > div {
+        text-decoration: underline;
+      }
+    }
+
+    img {
+      width: 100%;
+    }
+
+    div {
+      @include ellipsis;
+
+      bottom: 0;
+      color: #5c4545;
+      font-size: 14px;
+      padding: 5px 10px;
+      position: absolute;
+      width: 100%;
+      z-index: 2;
+    }
+
+    .mask {
+      background-color: #efede8;
+      orecipety: 0.8;
+      z-index: 0;
+    }
+  }
+}

data/app/assets/stylesheets/components/medias/_user-recipes.scss

@@ -0,0 +1,46 @@
+//
+// Media blocks - user recipes
+//
+// --------------------------
+// # rcipes/show - user widget
+.user-recipes {
+  .media {
+    margin-top: 10px;
+
+    & + .media {
+      border-top: 1px solid #ebe5e1;
+      padding-top: 10px;
+    }
+
+    a {
+      color: #564e4a;
+
+      &:hover span {
+        text-decoration: underline;
+      }
+    }
+
+    .img {
+      float: left;
+      height: 52px;
+      margin-right: 10px;
+      overflow: hidden;
+      padding-right: 0;
+      width: 70px;
+    }
+
+    img {
+      width: 100%;
+    }
+
+    .media-body {
+      line-height: 3.75em;
+
+      span {
+        display: inline-block;
+        line-height: 1.4;
+        vertical-align: middle;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+// --------------------------------
+// Navigation - blog
+// --------------------------------
+
+/*doc
+---
+parent: 08_navigations
+title: Blog navigation
+name: blog_navigation
+---
+
+```html_example
+<div class="blog-nav">
+  <ul class="nav-links clearfix">
+    <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>
+```
+
+*/
+
+$blog-nav-border: #ccc !default;
+$blog-nav-link: $ic-brown !default;
+$blog-nav-link-hover: #ac8c85 !default;
+
+.blog-nav {
+  ul {
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+
+  li {
+    display: inline;
+    float: left;
+    margin-right: 30px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    a {
+      @include icon("\f0da");
+
+      color: $blog-nav-link;
+      font-size: 16px;
+      text-decoration: none;
+
+      &::before,
+      &:hover {
+        color: $blog-nav-link-hover;
+      }
+
+      &::before {
+        margin-right: 0;
+        width: 8px;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .blog-nav .nav-links {
+    background-color: $white;
+    float: none;
+    padding: 4px 15px;
+
+    li {
+      margin-right: 0;
+    }
+
+    a {
+      display: block;
+      font-size: 18px;
+      padding: 10px;
+      text-align: center;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 641px) and (max-width: 991px) {
+  .blog-nav {
+    li a {
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .blog-nav .nav-links {
+    padding: 4px 0;
+  }
+}
+
+@media only screen and (max-width: 640px) {
+  .blog-nav .nav-links {
+    li {
+      width: 25%;
+
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3),
+      &:nth-child(4) {
+        border-bottom: 1px solid $blog-nav-border;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,187 @@
+// --------------------------------
+// Navigation - brand tabs
+// --------------------------------
+
+/*doc
+---
+parent: 08_navigations
+title: Brand navigation
+name: brand_navigation
+---
+
+<div><p>brands tabs</p></div>
+<div>
+  <ul class="brand-tabs">
+    <li class="brand-tab active">
+      <a href="#"><span>食譜</span></a>
+    </li>
+    <li class="brand-tab">
+      <a href="#"><span>收藏</span></a>
+    </li>
+    <li class="brand-tab">
+      <a href="#"><span>料理</span></a>
+    </li>
+    <li class="brand-tab">
+      <a href="#"><span>商品</span></a>
+    </li>
+    <li class="brand-tab">
+      <a href="#"><span>專欄</span></a>
+    </li>
+    <li id="brand-campaigns">
+      <a href="#"><span>活動</span></a>
+    </li>
+    <li class="brand-tab">
+      <a href="#"><span>草稿</span></a>
+    </li>
+  </ul>
+</div>
+```html_example
+<div>
+  <ul class="brand-tabs">
+    <li class="brand-tab active">
+      <a href="#"><span>食譜</span></a>
+    </li>
+    <li class="brand-tab">
+      <a href="#"><span>收藏</span></a>
+    </li>
+    <li class="brand-tab">
+      <a href="#"><span>料理</span></a>
+    </li>
+  </ul>
+</div>
+```
+
+*/
+
+$brand-tab-border: #ebe5e1 !default;
+$brand-tab-hover-border: $ic-brown !default;
+$brand-tab-link: $ic-brown !default;
+$brand-tab-link-active: #aa0000 !default;
+$brand-tab-link-bg: $white !default;
+
+.brand-tabs {
+  background-color: $white;
+  border: 1px solid $brand-tab-border;
+  display: inline-block;
+  margin-bottom: 2px;
+  margin-left: 0;
+  padding-left: 0;
+  width: 100%;
+
+  li {
+    float: left;
+    line-height: 52px;
+    list-style-type: none;
+
+    &:first-child a {
+      margin-left: 15px;
+    }
+
+    &:hover a {
+      border-bottom: 3px solid $brand-tab-hover-border;
+      text-decoration: none;
+    }
+
+    &.active a {
+      border-bottom: 3px solid $brand-tab-link-active;
+      color: $brand-tab-link-active;
+    }
+  }
+
+  a {
+    background-color: $brand-tab-link-bg;
+    color: $brand-tab-link;
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-bottom: 15px;
+    padding-top: 18px;
+  }
+}
+
+// brand tabs responsive
+@media only screen and (max-width: 767px) {
+  .brand-tabs {
+    height: auto;
+    min-height: 52px;
+    margin-bottom: -5px;
+
+    a {
+      display: block;
+      line-height: 47px;
+      padding: 0 12px;
+    }
+
+    li {
+      height: 50px;
+      margin-left: 1.4%;
+      margin-right: 1.4%;
+      text-align: center;
+
+      &:hover {
+        border-bottom: 3px solid #564e4a;
+      }
+
+      &:hover a {
+        border-bottom: 0;
+      }
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active {
+        border-bottom: 3px solid #aa0000;
+
+        a {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 640px)  {
+  .brand-tabs {
+    li {
+      margin-left: 1.3%;
+    }
+
+    a {
+      padding: 0 3px;
+    }
+  }
+}
+
+@media only screen and (min-width: 321px) and (max-width: 479px) {
+  .brand-tabs {
+    li {
+      margin-left: 1%;
+      margin-right: 1%;
+    }
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .brand-tabs {
+    height: auto;
+    min-height: 52px;
+
+    li {
+      margin-left: 1.4%;
+      margin-right: 1%;
+
+      &:first-child {
+        margin-left: 1.4%;
+
+        a {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+