cupboard 0.2.1 → 0.2.2

data/app/assets/stylesheets/components/buttons/_card-buttons.scss

@@ -0,0 +1,88 @@
+// -----------------------------------------
+// Components - Buttons - card buttons
+// -----------------------------------------
+
+/*doc
+---
+parent: 01_buttons
+title: Card buttons
+name: 03_card_buttons
+---
+
+<h3>in recipe card</h3>
+<div class="ic-buttons card"></div>
+
+```html_example
+<a class="btn btn-follow-recipe" href="#">
+  <span class="fa fa-heart"></span>
+  <span>收藏</span>
+</a>
+<a class="btn btn-list" href="#">
+  <span class="fa fa-bars"></span>
+  <span>清單</span>
+</a>
+<a class="btn btn-follow-recipe following" href="#">
+  <span class="fa fa-heart"></span>
+  <span>已收</span>
+</a>
+<a class="btn btn-list" href="#">
+  <span class="fa fa-bars"></span>
+  <span>清單</span>
+</a>
+<a class="btn btn-follow-recipe following" href="#">
+  <span class="fa fa-heart"></span>
+  <span>已收</span>
+</a>
+<a class="btn btn-list following" href="#">
+  <span class="fa fa-bars"></span>
+  <span>清單</span>
+</a>
+```
+
+*/
+
+$card-button-basic-bg: rgba(86, 78, 74, 0.8) !default;
+$card-button-basic-bg-hover: rgba(86, 78, 74, 0.7) !default;
+$card-button-basic-border: $white !default;
+$card-button-basic-text: $white !default;
+$card-btn-list-bg: $white !default;
+$card-btn-list-text: $brown !default;
+$card-btn-following-bg: $red !default;
+$card-btn-following-icon: $white !default;
+
+// recipe card buttons
+%card-button-basic {
+  background-color: $card-button-basic-bg;
+  border-radius: 140px;
+  color: $card-button-basic-text;
+  float: left;
+  font-size: inherit;
+  padding: 9px 10px;
+  position: relative;
+  text-align: center;
+
+  span:first-child {
+    min-width: 14px;
+  }
+}
+
+.btn-follow-recipe,
+.btn-list {
+  @extend %card-button-basic;
+
+  &:hover,
+  &:focus {
+    background-color: $card-button-basic-bg-hover;
+    color: $white;
+  }
+
+  &.following {
+    background-color: $card-btn-following-bg;
+  }
+}
+
+.btn-list {
+  margin-left: 4px;
+}
+
+

data/app/assets/stylesheets/components/buttons/_default-buttons.scss

@@ -0,0 +1,98 @@
+// -----------------------------------------
+// Components - Buttons - default buttons
+// -----------------------------------------
+
+/*doc
+---
+parent: 01_buttons
+title: Default buttons
+name: 01_default_buttons
+---
+
+basic buttons and functional buttons, use these class on tags such as `<a>`, `<button>` or `<input>`, and don't forget to incude the class `.btn`.
+
+<h3>Color</h3>
+<div class="ic-buttons defaults"></div>
+
+```html_example
+<a class="btn btn-white" href="#">Default</a>
+<a class="btn btn-red" href="#">Danger</a>
+<a class="btn btn-orange" href="#">Warning</a>
+<a class="btn btn-green" href="#">Success</a>
+<a class="btn btn-blue" href="#">Info</a>
+```
+
+---
+
+<h3>Sizing</h3>
+<div class="ic-buttons sizing"></div>
+
+```html_example
+<a class="btn btn-white btn-lg" href="#">Large</a>
+<a class="btn btn-white" href="#">Default</a>
+<a class="btn btn-white btn-sm" href="#">small</a>
+<a class="btn btn-white btn-xs" href="#">Extra small</a>
+```
+
+*/
+
+// default buttons
+// override bootstrap's base styles
+.btn {
+  border-radius: 3px;
+  font-weight: 300;
+  padding: 9px 12px;
+}
+
+// use bootstrap button mixin to redefine our button styles
+// @button-variant($color, $background, $border)
+//   $color: button text
+//   $background: button background
+//   $border: border color
+
+@each $btn, $btn-color in
+  (red, $red),
+  (orange, $orange),
+  (green, $green),
+  (blue, $blue) {
+
+  .btn-#{$btn} {
+    @include button-variant($white, $btn-color, transparent);
+
+    &,
+    &:hover,
+    &:active,
+    &:focus,
+    &:visited {
+      background-color: $btn-color;
+      color: $white;
+    }
+  }
+}
+
+.btn-white {
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:visited {
+    color: $brown;
+    background-color: $white;
+    border-color: $brown;
+  }
+}
+
+// Sizing
+.btn-lg {
+  padding: 14px 12px;
+}
+
+.btn-sm {
+  padding: 4px 12px;
+}
+
+.btn-xs {
+  height: 20px;
+  padding: 0 12px;
+}
+

data/app/assets/stylesheets/components/buttons/_round-buttons.scss

@@ -0,0 +1,125 @@
+// -----------------------------------------
+// Components - Buttons - round buttons
+// -----------------------------------------
+
+/*doc
+---
+parent: 01_buttons
+title: Round buttons
+name: 02_round_buttons
+---
+
+<div class="ic-buttons rounds">
+<ul class="clearfix">
+  <li>
+    <a class="btn btn-round btn-fav" href="#">
+      <span class="fa fa-heart"></span>
+    </a>
+    <a class="btn btn-round btn-fav" href="#">
+      <span class="fa fa-heart"></span>
+      <span>收藏</span>
+    </a>
+  </li>
+  <li>
+    <a class="btn btn-round btn-follow" href="#">
+      <span class="icon-ic-plus"></span>
+    </a>
+    <a class="btn btn-round btn-follow" href="#">
+      <span class="icon-ic-plus"></span>
+      <span>訂閱</span>
+    </a>
+  </li>
+  <li>
+    <a class="btn btn-round btn-followed" href="#">
+      <span class="icon-ic-check"></span>
+    </a>
+    <a class="btn btn-round btn-followed" href="#">
+      <span class="icon-ic-check"></span>
+      <span>已訂</span>
+    </a>
+  </li>
+  <li>
+    <a class="btn btn-round btn-save" href="#">
+      <span class="icon-ic-check"></span>
+    </a>
+    <a class="btn btn-round btn-save" href="#">
+      <span class="icon-ic-check"></span>
+      <span>儲存</span>
+    </a>
+  </li>
+  <li>
+    <a class="btn btn-round btn-download" href="#">
+      <span class="fa fa-download"></span>
+    </a>
+    <a class="btn btn-round btn-download" href="#">
+      <span class="fa fa-download"></span>
+      <span>下載</span>
+    </a>
+  </li>
+</ul>
+</div>
+
+```html_example
+<a class="btn btn-round btn-fav" href="#">
+  <span class="fa fa-heart"></span>
+</a>
+<a class="btn btn-round btn-fav" href="#">
+  <span class="fa fa-heart"></span>
+  <span>收藏</span>
+</a>
+```
+*/
+
+$btn-fav-bg: $red !default;
+$btn-follow-bg: #53ade5 !default;
+$btn-followed-bg: #e2e0db !default;
+$btn-save-bg: #50c88e !default;
+$btn-download-bg: $white !default;
+
+.btn-round {
+  border-radius: 50%;
+  min-width: 40px;
+}
+
+@each $btn, $bg in
+  (fav, $btn-fav-bg),
+  (follow, $btn-follow-bg),
+  (followed, $btn-followed-bg),
+  (save, $btn-save-bg),
+  (download, $btn-download-bg) {
+
+  .btn-#{$btn} {
+    background-color: $bg;
+    border-radius: 140px;
+    color: $white;
+    font-weight: 300;
+    padding: 9px 10px;
+
+    &,
+    &:hover,
+    &:active,
+    &:focus,
+    &:visited {
+      color: $white;
+    }
+
+    span:first-child {
+      min-width: 14px;
+    }
+  }
+}
+
+.btn-followed,
+.btn-download {
+  &,
+  &:hover,
+  &:active,
+  &:focus,
+  &:visited {
+    color: $brown;
+  }
+}
+
+.btn-download {
+  border: 1px solid $brown;
+}

data/app/assets/stylesheets/components/cards/_brand-product-card.scss

@@ -1,4 +1,3 @@
-@import "compass/typography/text/ellipsis";
 // --------------------------------
 // Cards - brand product card
 // --------------------------------
@@ -10,20 +9,22 @@ name: 4_brand_product_card
 title: Brand product card
 ---
 
-<div class="brand-product">
-  <div class="media list-card product-card" data-recipe-id="1771330">
+<div class="ic-brand-product">
+  <div class="media pr-list-card" data-recipe-id="1771330">
     <a class="visible-xs" style="display:block;height:100%;width:100%;position:absolute;z-index:2;left:0;top:0;" href="#"></a>
     <a title="愛料理購物袋" class="pull-left" href="#">
-      <img alt="愛料理購物袋" class="img-responsive" src="images/recipe-default.png">
+      <div class="img">
+        <img alt="愛料理購物袋" class="img-responsive" src="images/recipe-default.png">
+      </div>
     </a>
     <div class="media-body card-info">
-      <a title="愛料理購物袋" datatitle="愛料理購物袋" itemprop="name" href="#">愛料理購物袋</a>
+      <a title="愛料理購物袋" class="title" itemprop="name" href="#">愛料理購物袋</a>
       <span class="sub-title hidden-xs">自有品牌商品 大小款獨家發售中</span>
-      <p itemprop="description">愛料理購物袋，陪妳買菜的好夥伴！共同裝載著對料理的熱情，與日常生活的美好。</p>
+      <p itemprop="description" class="desc">愛料理購物袋，陪妳買菜的好夥伴！共同裝載著對料理的熱情，與日常生活的美好。</p>
       <div>
         <p class="price">
-          售價：$<span>449/個"</span>
-  </p>      <a class="btn btn-details btn-frame col-sm-4 col-md-3 pull-right hidden-xs" href="#">看詳細介紹</a>
+          售價：$<span>449/個</span>
+  </p>      <a class="btn btn-details btn-white col-sm-4 col-md-3 pull-right hidden-xs" href="#">看詳細介紹</a>
       </div>
     </div>
   </div>
@@ -31,42 +32,70 @@ title: Brand product card
 
 */
 
-// # brands/product
+// brands/product
+$brand-product-title: $brown !default;
 $brand-product-sub-title: #ac8b80 !default;
+$brand-product-desc: $brown-light10 !default;
 $brand-product-price: #aa8f83 !default;
+$brand-product-btn: #aaa !default;
 
-.brand-product {
-  .product-card {
+.pr-list-card {
+  position: relative;
 
-    img {
-      height: 100%;
-    }
+  img {
+    width: 100%;
+  }
 
-    .card-info {
-      p {
-        margin-bottom: 10px;
-        height: 3em;
-      }
-    }
+  .img {
+    overflow: hidden;
+    width: 160px;
+  }
 
-    .sub-title {
-      color: $brand-product-sub-title;
-      font-size: 12px;
-      margin-bottom: 5px;
-    }
+  .card-info {
+    height: 100%;
+    line-height: 1;
+  }
 
-    p.price {
-      color: $brand-product-price;
-      font-size: 14px;
-      float: left;
-      height: 1.3em;
-    }
+  .desc {
+    color: $brand-product-desc;
+    height: 3em;
+    margin-bottom: 10px;
+  }
 
-    .btn-frame {
-      font-size: 13px;
-      height: 30px;
-      text-decoration: none;
-      width: 110px;
+  .title {
+    @include ellipsis;
+
+    color: $brand-product-title;
+    display: block;
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+
+  .sub-title {
+    color: $brand-product-sub-title;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  .price {
+    color: $brand-product-price;
+    float: left;
+    font-size: 14px;
+    height: 1.3em;
+  }
+
+  .btn-details {
+    font-size: 13px;
+    height: 30px;
+    text-decoration: none;
+    padding: 6px 12px;
+    color: $brand-product-btn;
+    border-color: $brand-product-btn;
+    width: 110px;
+
+    &:hover {
+      color: $brown;
     }
   }
 }
+

data/app/assets/stylesheets/components/cards/_dish-card.scss

@@ -68,17 +68,15 @@ title: Dish card
 
 */
 
-@import "compass/typography/text/ellipsis";
-
 $dish-card-border: #f0f0f0 !default;
 $dish-card-info: #777 !default;
-$dish-card-name: $ic-brown !default;
+$dish-card-name: $brown !default;
 $dish-card-time: #aaa !default;
 $dish-card-refer-bg: rgba(#efede8, 0.6) !default;
 $dish-card-refer-text: #878c83 !default;
 $dish-card-refer-bg-hover: #efede8 !default;
 $dish-card-refer-bg-text: #777 !default;
-$dish-card-has-reply: $orange !default;
+$dish-card-has-reply: $orange-red !default;
 $dish-card-upload: #eeede8 !default;
 $dish-card-upload-icon: #777 !default;
 $dish-card-upload-info: #aaa !default;
@@ -87,7 +85,6 @@ $dish-card-upload-info: #aaa !default;
   border: 1px solid $dish-card-border;
   border-radius: 2px;
   display: inline-block;
-  // float: left;
   max-width: 172px;
   position: relative;
 
@@ -140,7 +137,6 @@ $dish-card-upload-info: #aaa !default;
 
     a {
       @include ellipsis;
-      @include icon("\f064");
 
       background-color: $dish-card-refer-bg;
       color: $dish-card-refer-text;
@@ -148,6 +144,10 @@ $dish-card-upload-info: #aaa !default;
       line-height: 16px;
       padding: 12px 10px;
 
+      &::before {
+        @include icon-util("\f064", 'FontAwesome');
+      }
+
       &:hover,
       &:active {
         background-color: $dish-card-refer-bg-hover;
@@ -186,15 +186,11 @@ $dish-card-upload-info: #aaa !default;
   &.has-reply {
     .name,
     .time {
-      @include icon-b("\e809");
-
       &::after {
+        @include icon-util("\e809", "icookfont");
+
         color: $dish-card-has-reply;
-        display: inline-block;
         float: right;
-        font-family: "icookfont";
-        height: 14px;
-        margin-left: 0;
         position: relative;
         right: 0;
         top: 1px;

data/app/assets/stylesheets/components/cards/_featured-card.scss

@@ -0,0 +1,69 @@
+// --------------------------------
+// Components - Cards - blog feed
+// --------------------------------
+
+/*doc
+---
+parent: 02_cards
+title: Featured card
+name: 8_featured_card
+---
+
+<div class="featured-card">
+  <a href="#">
+    <div class="img">
+			<img alt="名菜自己做" src="/images/recipe-default.png">
+    </div>
+		<div class="name">名菜自己做</div>
+  </a>
+</div>
+
+*/
+
+$featured-card-bg: $light-gray-light4 !default;
+$featured-card-icon: $red !default;
+
+.featured-card {
+  background-color: $featured-card-bg;
+  min-height: 138px;
+  width: 31.5%;
+
+  .img {
+    overflow: hidden;
+  }
+
+  img {
+    width: 100%;
+	}
+
+  &:hover {
+    text-decoration: underline;
+	}
+
+  + .featured-card {
+    margin-left: auto;
+	}
+
+  .name {
+    color: $brown;
+    font-size: 16px;
+    line-height: 1;
+    padding: 15px 15px 15px 25px;
+    position: relative;
+
+    &::before {
+			@include icon-util("\f0da", "FontAwesome");
+
+      color: $featured-card-icon;
+      font-size: 13px;
+      position: absolute;
+      width: 5px;
+    }
+
+    &::before {
+      left: 15px;
+      top: 16px;
+    }
+	}
+}
+

data/app/assets/stylesheets/components/cards/_feeds-card.scss

@@ -1,8 +1,6 @@
-@import "compass/typography/text/ellipsis";
-
-// --------------------------------
-// Components - Cards - blog feed
-// --------------------------------
+// -----------------------------------------------
+// Components - Cards - blog feeds and TV feeds
+// -----------------------------------------------
 
 /*doc
 ---
@@ -28,7 +26,7 @@ name: 7_feeds_card
         <div>
           <div class="length">0:46</div>
           <span class="img"><img src="/images/recipe-default.png" alt="懶人電鍋紅豆湯"></span>
-          <div class="mask"></div>
+          <div class="mask"><i class="fa fa-play"></i></div>
         </div>
         <span>熱紅豆湯 x 懶人煮法</span>
       </a>
@@ -60,7 +58,7 @@ $recipe-channel-feeds-tv-length-text: $white !default;
 
   a,
   span {
-    color: $ic-brown;
+    color: $brown;
     display: block;
   }
 
@@ -75,14 +73,13 @@ $recipe-channel-feeds-tv-length-text: $white !default;
   }
 
   .img {
-    margin-bottom: 10px;
     height: 110px;
+    margin-bottom: 10px;
     overflow: hidden;
   }
 
   // tv feeds
   .mask {
-    @include icon("\f04b");
     background-color: $recipe-channel-feeds-tv-mask-bg;
     display: none;
     height: 100%;
@@ -93,7 +90,7 @@ $recipe-channel-feeds-tv-length-text: $white !default;
     width: 100%;
     z-index: 2;
 
-    &::before {
+    i {
       border: 2px solid $recipe-channel-feeds-tv-mask-icon;
       border-radius: 50%;
       color: $recipe-channel-feeds-tv-mask-icon;
@@ -101,10 +98,10 @@ $recipe-channel-feeds-tv-length-text: $white !default;
       font-weight: lighter;
       height: 40px;
       line-height: 36px;
-      margin-right: 0;
+      margin-top: -20px;
       padding-left: 3px;
       position: relative;
-      top: 34%;
+      top: 50%;
       width: 40px;
     }
   }