cupboard 0.2.0

data/app/assets/stylesheets/components/medias/_blog-feeds.scss

@@ -0,0 +1,28 @@
+//
+// Media blocks - blog feeds
+//
+// --------------------------
+//
+.blog-feeds {
+  a,
+  span {
+    color: #564e4a;
+    display: block;
+  }
+
+  span:not(.img) {
+    display: block;
+    height: 2.8em;
+    overflow: hidden;
+  }
+
+  .img {
+    margin-bottom: 10px;
+    height: 110px;
+    overflow: hidden;
+  }
+
+  img {
+    width: 100%;
+  }
+}

data/app/assets/stylesheets/components/medias/_brand-cover.scss

@@ -0,0 +1,127 @@
+// ---------------------------
+// Media blocks - brand cover
+// ---------------------------
+
+/*doc
+---
+name: 26_brand_cover
+title: Brand cover
+category: UI components
+---
+
+<div class="brand-head">
+  <div class="brand-cover">
+    <img alt="iCook" class="img-responsive" src="/images/setting-pr.jpg">
+    <div class="cover-mask">&nbsp;</div>
+  </div>
+  <div class="brand">
+    <a href="#" rel="nofollow" target="_blank">
+      <span class="brand-img">
+        <img alt="iCook" class="img-responsive" src="/images/default-avatar.png">
+      </span>
+      <span class="brand-name badge-brand">iCook 愛料理</span>
+    </a>
+  </div>
+</div>
+
+*/
+
+.brand-head {
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.brand-cover {
+  overflow: hidden;
+  position: relative;
+
+  img {
+    width: 100%;
+  }
+}
+
+.cover-mask {
+  background-color: $white;
+  bottom: 0;
+  height: 44px;
+  opacity: 0.7;
+  position: absolute;
+  width: 100%;
+}
+
+.brand {
+  bottom: 10px;
+  left: 15px;
+  position: absolute;
+  width: 95%;
+
+  > a {
+    margin-right: 10px;
+  }
+
+  .brand-img {
+    background: $white;
+    display: inline-block;
+    float: left;
+    height: 100px;
+    margin-right: 10px;
+    padding: 2px;
+    width: 100px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .brand-name {
+    bottom: 0;
+    color: $ic-brown;
+    font-size: 20px;
+    line-height: 18px;
+    position: absolute;
+  }
+
+  .badge-brand::after {
+    left: 5px;
+    line-height: 12px;
+    margin-left: 0;
+    padding: 3px 6px;
+    top: -3px;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .brand-cover img {
+    height: 300px;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .brand-head {
+    margin-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .brand {
+    bottom: 10px;
+    left: 26px;
+    width: 84%;
+
+    .brand-img {
+      height: 80px;
+      width: 80px;
+    }
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .brand .brand-img {
+    height: 55px;
+    width: 55px;
+  }
+}
+

data/app/assets/stylesheets/components/medias/_brand-product.scss

@@ -0,0 +1,35 @@
+@import "compass/typography/text/ellipsis";
+// --------------------------------
+//
+// Media blocks - brand product
+//
+// --------------------------------
+// # brands/product
+.product-card {
+  .card-info {
+    p {
+      margin-bottom: 10px;
+      height: 3em;
+    }
+  }
+
+  .sub-title {
+    color:  #ac8b80;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  p.price {
+    color: #aa8f83;
+    font-size: 14px;
+    float: left;
+    height: 1.3em;
+  }
+
+  .btn-frame {
+    font-size: 13px;
+    height: 30px;
+    text-decoration: none;
+    width: 110px;
+  }
+}

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

@@ -0,0 +1,66 @@
+@import "compass/typography/text/ellipsis";
+// --------------------------------
+//
+// Media blocks - business kitchen
+//
+// --------------------------------
+// # recipes/index - widget
+.business-kitchen {
+  //override bootstrap media-block
+  .media,
+  .media-left,
+  .media-body {
+    display: block;
+  }
+
+  .media-left {
+    float: left;
+  }
+
+  .media-body {
+    width: auto;
+  }
+
+  & > .media {
+    padding: 15px 0;
+  }
+
+  .brand-logo,
+  .recipe-title {
+    @include ellipsis;
+
+    display: block;
+    width: 100%;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .brand-logo {
+    color: #777;
+    font-size: 15px;
+    line-height: 34px;
+    margin-bottom: 0;
+
+    img {
+      margin-right: 10px;
+    }
+  }
+
+  .recipe-title {
+    color: #564e4a;
+    display: inline-block;
+    font-size: 15px;
+    letter-spacing: 0;
+    margin-top: 10px;
+  }
+
+  img {
+    background-color: #eeede8;
+  }
+
+  a {
+    word-wrap: break-word;
+  }
+}

data/app/assets/stylesheets/components/medias/_categories-cover.scss

@@ -0,0 +1,79 @@
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+
+// --------------------------------
+// Media blocks - categories cover
+// --------------------------------
+
+/*doc
+---
+name: 25_categories_cover
+title: Category cover
+category: UI components
+---
+
+<div class="categories-cover">
+  <a href="" target="_blank">
+    <img alt="點心烘焙" class="img-responsive" src="/images/category-cover.png">
+  </a>
+  <div class="title">
+    <div class="name">點心烘焙</div>
+    <span class="hidden-xs hidden-sm"></span>
+  </div>
+</div>
+
+*/
+
+.categories-cover {
+  @include background-image(image-url("default/category-cover.png"));
+
+  background-repeat: no-repeat;
+  color: $white;
+  line-height: 1;
+  max-height: 150px;
+  overflow: hidden;
+  position: relative;
+
+  > a {
+    display: block;
+    height: 100%;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .title {
+    @include background-image(linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0, .4) 100%));
+
+    bottom: 0;
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#59000000',GradientType=0 ); /* IE6-9 */
+    left: 0;
+    padding: 15px;
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+  }
+
+  .name {
+    @include text-shadow(rgba(0, 0, 0, 0.5) 0px 1px 4px);
+
+    float: left;
+    font-size: 24px;
+  }
+
+  span {
+    display: inline-block;
+    font-size: 13px;
+    margin-left: 10px;
+    position: relative;
+    top: 9px;
+  }
+}
+
+@media only screen and (min-width: 991px) {
+  .categories-cover {
+    margin-bottom: 15px;
+    margin-top: -5px;
+  }
+}

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

@@ -0,0 +1,36 @@
+//
+// Media blocks - hot categories
+//
+// --------------------------
+// # categories/show
+.hot-categories {
+  .hot-categories-item {
+    margin-bottom: 10px;
+  }
+
+  .title {
+    background-color: #f7f6f3;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+  }
+
+  a {
+    color: #888;
+    display: block;
+
+    &:hover {
+      color: #564e4a;
+      text-decoration: none;
+
+      span {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  img {
+    height: 32px;
+    margin-right: 5px;
+    width: 32px;
+  }
+}

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

@@ -0,0 +1,89 @@
+@import "compass/css3/images";
+@import "compass/typography/text/ellipsis";
+// ----------------------------------
+//
+// Media blocks - popular categories
+//
+// ----------------------------------
+//
+.popular-category {
+  padding-bottom: 10px;
+
+  & + .popular-category {
+    border-top: 1px solid #ebe5e1;
+    padding-top: 10px;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+
+  .media-body {
+    width: 74%;
+    
+    & > span {
+      @include ellipsis;
+
+      color: #5c4544;
+      display: inline;
+      float: left;
+      font-size: 16px;
+      line-height: 52px;
+      width: 64%;
+    }
+  }
+
+  img {
+    @include background(image-url("category-default.jpg"));
+
+    background-repeat: no-repeat;
+    margin-right: 10px;
+    height: 51px;
+    width: 68px;
+  }
+
+  .media-right {
+    @include icon-b("\f0a9");
+
+    color: #aa8f83;
+    font-size: 12px;
+    letter-spacing: 0.01em;
+    line-height: 52px;
+    margin-left: 0;
+    padding-right: 18px;
+    padding-left: 0;
+    position: relative;
+    width: 94px;
+
+    &:after {
+      background-color: #fff;
+      color: #f06354;
+      font-size: 14px;
+      line-height: 52px;
+      margin-left: 0;
+      position: absolute;
+      right: 3px;
+      top: -1px;
+    }
+  }
+
+  a:hover {
+    text-decoration: none;
+
+    .media-body > span {
+      color: #aa8f83;
+      text-decoration: underline;
+    }
+  }
+}
+
+@media only screen and (max-width: 320px) {
+  .popular-category .media-body {
+    width: 62%;
+    
+    & > span {
+      width: 51%;
+    }
+  }
+}
+