cupboard 0.2.1 → 0.2.2

data/app/assets/stylesheets/components/_buttons.scss

@@ -1,217 +1,13 @@
 // --------------------------------
-// Components - buttons
+// Components - Buttons
 // --------------------------------
 
 /*doc
 ---
 title: Buttons
-name: 01_Buttons
-category: components
+name: 01_buttons
+category: Components
 ---
 
-basic buttons, fram buttons, card Buttons
-use these class on tags such as `<a>`, `<button>` or `<input>`, and don't forget to incude the class `.btn`.
-
-### Basic buttons
-
-<div class="ic-buttons"></div>
-
-```html_example
-<a class="btn btn-standard" href="#">寫食譜</a>
-<a class="btn btn-pealbush" href="#">已訂閱</a>
-<a class="btn btn-red" href="#">我要購買</a>
-<a class="btn btn-orangered" href="#">繼續閱讀</a>
-<a class="btn btn-green" href="#">儲存更新</a>
-<a class="btn btn-blue" href="#">訂閱</a>
-
-```
-
-<hr/>
-
-### Frame buttons
-
-use in brands/products
-
-```html_example
-<a class="btn btn-frame" href="#">看詳細介紹</a>
-```
-
-<hr/>
-
-### Card Buttons
-
-use in recipes cards and recipes/show
-
-<div class="ic-buttons card-buttons"></div>
-
-```html_example
-<a class="btn btn-card" href="#">收藏</a>
-<a class="btn btn-card list" href="#">清單</a>
-<a class="btn btn-card following-recipe" href="#">已收</a>
-<a class="btn btn-card list href="#">清單</a>
-```
-
-
 */
 
-.btn {
-  &.orders {
-    @include icon("\f00b");
-
-    color: #888;
-    font-size: 15px;
-
-    &:hover {
-      color: #333;
-    }
-  }
-}
-
-.btn-standard {
-  @include btn(14px, $darkgray, $palegray);
-  border: 1px solid $linegray1;
-
-  &.new-recipe {
-    @include icon("\f040");
-    padding: 5px 12px;
-  }
-}
-
-.btn-pealbush {
-  @include btn(14px, $darkgray, $pearlbush);
-}
-
-.btn-red {
-  @include btn(14px, #fff, $darkred);
-}
-
-.btn-orangered {
-  @include btn(14px, #fff, $orangered);
-}
-
-.btn-green {
-  @include btn(14px, #fff, $grassgreen); 
-}
-
-.btn-blue {
-  @include btn(14px, #fff, $softblue);
-}
-
-.btn-frame {
-  @include btn(14px, $lightgray, #fff);
-  border: 1px solid $lightgray;
-
-  &:hover {
-    color: $redbrown;
-  }
-}
-
-// in recipe card
-.btn-card {
-  @include btn(14px, #fff, rgba(86, 78, 74, .8));
-
-  border-radius: 13px;
-  border: 2px solid #fff;
-  width: 104px;
-
-  &:hover {
-    background-color: rgba(86, 78, 74, .7);
-  }
-
-  &.favorite {
-    @include icon("\f08a");
-  }
-
-  &.list {
-    @include icon("\f0c9");
-
-    background-color: #fff;
-    color: $darkbrown;
-    margin-left: 4px;
-    position: relative;
-
-    &:after {
-      bottom: 0;
-      border: 1px solid $darkbrown;
-      border-radius: 12px;
-      content: "";
-      display: block;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-
-  &.favorite,
-  &.list {
-    padding: 4px 6px;
-
-    span {
-      margin-left: -4px;
-    }
-  }
-
-  &.following-recipe {
-    background-color: $orangered;
-
-    &:before {
-      color: #fff;
-      content: "\f004";
-    }
-
-    & + .list {
-      color: $orangered;
-
-      &:after {
-        border-color: $orangered;
-      }
-    }
-  }
-}
-
-// in dish card
-.btn-like {
-  @include icon("\f004");
-
-  border-radius: 50%;
-  background-color: rgba(86, 78, 74, .85);
-  border: 3px solid #fff;
-  color: #fff;
-  font-size: 20px;
-  height: 42px;
-  padding: 0;
-  width: 42px;
-  z-index: 2;
-
-  &:before {
-    height: 20px;
-    line-height: 1.4;
-    margin-right: 0;
-    vertical-align: middle;
-    width: 20px;
-  }
-
-  &:hover,
-  &.btn-liking-dish {
-    background-color: #f06354;
-    color: #fff;
-  }
-}
-
-// override bootstrap
-.btn:active {
-  box-shadow: none;
-}
-
-.btn-red,
-.btn-orangered,
-.btn-green,
-.btn-blue,
-.btn-card:not(.list) {
-  &:hover,
-  &:focus {
-    color: #fff;
-  }
-}
-

data/app/assets/stylesheets/components/_pagination.scss

@@ -59,15 +59,16 @@ category: Components
 ```
 
 */
+
 $pagi-link-bg: $white !default;
-$pagi-link-text: $ic-brown !default;
-$pagi-link-hover-bg: $ic-brown !default;
+$pagi-link-text: $brown !default;
+$pagi-link-hover-bg: $brown !default;
 $pagi-link-hover-text: $white !default;
-$pagi-link-active-bg: $ic-brown !default;
+$pagi-link-active-bg: $brown !default;
 $pagi-link-active-text: $white !default;
-$pagi-link-border: #e2e0db !default;
-$pagi-link-disabled-bg: #efede8 !default;
-$pagi-link-disabled-text: #bcbab5 !default;
+$pagi-link-border: $light-gray-dark5 !default;
+$pagi-link-disabled-bg: $light-gray !default;
+$pagi-link-disabled-text: $light-gray-dark20 !default;
 
 .pagination {
   clear: both;
@@ -109,27 +110,36 @@ $pagi-link-disabled-text: #bcbab5 !default;
     padding-right: 15px;
   }
 
-  .prev a {
-    @include icon("\e812");
+  .prev a,
+  .next_page a {
+    &::before {
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      display: inline-block;
+      font-family: "icookfont";
+      font-style: normal;
+      font-weight: normal;
+      height: 14px;
+      line-height: 1;
+      width: 14px;
+    }
+  }
 
+  .prev a {
     border-bottom-left-radius: 4px;
     border-top-left-radius: 4px;
 
     &::before {
-      font-family: "icookfont";
-      margin-right: 0;
+      content: "\e812";
     }
   }
 
   .next_page a {
-    @include icon("\e811");
-
     border-bottom-right-radius: 4px;
     border-top-right-radius: 4px;
 
     &::before {
-      font-family: "icookfont";
-      margin-right: 0;
+      content: "\e811";
     }
   }
 
@@ -142,7 +152,7 @@ $pagi-link-disabled-text: #bcbab5 !default;
 
 @media only screen and (max-width: 768px) {
   .pagination {
-    li.page {
+    .page {
       display: none;
 
       &.active {
@@ -154,7 +164,7 @@ $pagi-link-disabled-text: #bcbab5 !default;
 
 @media only screen and (max-width: 768px) {
   .pagination {
-    li.page {
+    .page {
       display: none;
 
       &.active {

data/app/assets/stylesheets/components/_search-form.scss

@@ -9,48 +9,109 @@ name: 11_search_form
 category: Components
 ---
 
+<div>in users/brands</div>
+
 ```html_example
-<div class="to-fulltext-search">
-  <form id="global-search">
-    <input class="search-input" placeholder="搜尋全站食譜、食材" type="text">
-    <button type="submit" class="btn btn-search">&nbsp;</button>
+<div class="my-search">
+  <form action="" method="get" accept-charset="UTF-8" class="search-user-recipes" id="search-user-recipes">
+    <div class="form-group">
+      <input name="q" type="text" class="form-control" placeholder="搜尋 iCook 愛料理 的食譜">
+    </div>
+    <button class="btn btn-user-search" type="submit">&nbsp;</button>
+  </form>
+</div>
+```
+<br/>
+<div>with badge</div>
+<div class="my-search">
+	<form action="" method="get" accept-charset="UTF-8" class="search-user-recipes user-favorites" id="search-user-recipes">
+		<div class="form-group">
+      <span class="badge-vip"></span>
+			<input name="q" type="text" class="form-control" placeholder="搜尋 iCook 愛料理 的食譜">
+		</div>
+		<button class="btn btn-user-search" type="submit">&nbsp;</button>
+	</form>
+</div>
+
+```
+<div class="my-search">
+  <form action="" method="get" accept-charset="UTF-8" class="search-user-recipes" id="search-user-recipes">
+    <div class="form-group">
+      <span class="badge-vip"></span>
+      <input name="q" type="text" class="form-control" placeholder="搜尋 iCook 愛料理 的食譜">
+    </div>
+    <button class="btn btn-user-search" type="submit">&nbsp;</button>
   </form>
 </div>
 ```
 
 */
 
-.to-fulltext-search {
-  box-sizing: border-box;
-  background-color: #fff;
-  border: 1px solid #ebe5e1;
-  display: block;
-  font-size: 13px;
-  height: 30px;
-  max-width: 220px;
+$search-user-recipes-border: #dedede !default;
+$search-user-recipes-border-focus: $red !default;
+$search-user-recipes-text: #888 !default;
+$btn-user-search-bg: $red !default;
+$btn-user-search-text: $white !default;
+
+.my-search {
+  background-color: $light-gray;
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.search-user-recipes {
   position: relative;
-  width: 100%;
 
-  .search-input {
-    background-color: transparent;
-    border: none;
-    padding: 6px 6px 6px 12px;
+  .form-control {
+    border: 1px solid $search-user-recipes-border;
+    border-radius: 0;
+    box-shadow: none;
+    color: $search-user-recipes-text;
+    height: 36px;
     width: 100%;
+
+    &:focus {
+      border-color: $search-user-recipes-border-focus;
+    }
   }
 
-  .btn-search {
-    @include icon("\f002");
+  .form-group {
+    margin-bottom: 0;
+  }
 
-    background-color: transparent;
+  // user search
+  .btn-user-search {
+    background-color: $btn-user-search-bg;
     border-radius: 0;
-    color: #888;
-    display: block;
-    font-size: 13px;
-    height: 20px;
-    padding: 0;
+    color: $btn-user-search-text;
+    height: 36px;
     position: absolute;
-    right: 3px;
-    top: 5px;
-    width: 20px;
+    right: 0;
+    top: 0;
+    width: 40px;
+
+    &::before {
+      @include icon-util("\f002", "FontAwesome");
+    }
+  }
+
+  // vip search
+  &.user-favorites {
+    .badge-vip {
+      left: 10px;
+      margin-left: 0;
+      position: absolute;
+      top: 9px;
+      z-index: 2;
+
+      &::after {
+        margin-left: 0;
+      }
+    }
+
+    .form-control {
+      padding-left: 50px;
+    }
   }
 }
+

data/app/assets/stylesheets/components/_sorting-cards.scss

@@ -38,7 +38,7 @@ sorting with badge
 */
 
 $sort-cards-link: #999 !default;
-$sort-cards-link-hover: #5c4545 !default;
+$sort-cards-link-hover: $brown !default;
 
 .sort-cards {
   margin-bottom: 0;

data/app/assets/stylesheets/components/alerts/_alert-global.scss

@@ -33,49 +33,62 @@ simply add `.alert-icon` class
 ## Dismissible alert
 alert can be closed by add `.alert-icon` class and `<a>` tag with `.close` class
 
-```html_example
 <div class="alert alert-error alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Error
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Error
 </div>
 <div class="alert alert-warning alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Warning
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Warning
 </div>
 <div class="alert alert-success alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Success
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Success
 </div>
 <div class="alert alert-info alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Info
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Info
 </div>
 <div class="alert alert-failed alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Failed
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Failed
+</div>
+
+```
+<div class="alert alert-error alert-icon alert-dismissible">
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Error
 </div>
 ```
 
 ## Link in alert
 simply add `.alert-link` class to `<a>` tag in alert
 
-```html_example
 <div class="alert alert-error alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Error. This is a <a href="#" class="alert-link">link to somewhere</a>.
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Error. This is a <a href="#" class="alert-link">link to somewhere</a>.
 </div>
 <div class="alert alert-warning alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Warning. This is a <a href="#" class="alert-link">link to somewhere</a>.
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Warning. This is a <a href="#" class="alert-link">link to somewhere</a>.
 </div>
 <div class="alert alert-success alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Success. This is a <a href="#" class="alert-link">link to somewhere</a>.
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Success. This is a <a href="#" class="alert-link">link to somewhere</a>.
 </div>
 <div class="alert alert-info alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Info. This is a <a href="#" class="alert-link">link to somewhere</a>.
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Info. This is a <a href="#" class="alert-link">link to somewhere</a>.
 </div>
 <div class="alert alert-failed alert-icon alert-dismissible">
-  <a href="#" class="close">x</a>Failed. This is a <a href="#" class="alert-link">link to somewhere</a>.
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Failed. This is a <a href="#" class="alert-link">link to somewhere</a>.
+</div>
+
+```
+<div class="alert alert-error alert-icon alert-dismissible">
+  <a href="#" class="close"><i class="icon-ic-close"></i></a>Error. This is a <a href="#" class="alert-link">link to somewhere</a>.
 </div>
 ```
 
 */
 
-$alerts: (error: $ic-alert-error, warning: $ic-alert-warning, success: $ic-alert-success, info: $ic-alert-info, failed: $ic-alert-failed);
-$aler-save: (success, info);
+$alerts: (
+  error: $alert-error,
+  warning: $alert-warning,
+  success: $alert-success,
+  info: $alert-info,
+  failed: $alert-failed
+);
 
 @each $type, $color in $alerts {
   .alert-#{$type} {
@@ -87,24 +100,29 @@ $aler-save: (success, info);
       padding-left: 59px;
       position: relative;
 
-      @if ($type == "success") or ($type == "info") {
-        @include icon("\f06a");
-      } @else {
-        @include icon("\f071");
-      }
-
       &::before {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        content: "\f071";
         background-color: $color;
         color: $white;
+        display: inline-block;
+        font-family: "FontAwesome";
+        font-weight: normal;
         height: 100%;
         left: 0;
         line-height: inherit;
-        margin-right: 0;
         padding: 15px;
         position: absolute;
         top: 0;
         width: 44px;
       }
+
+      @if ($type == "success") or ($type == "info") {
+        &::before {
+          content: "\f06a";
+        }
+      }
     }
 
     &.alert-dismissible {
@@ -117,13 +135,13 @@ $aler-save: (success, info);
       text-decoration: underline;
     }
 
-    .close { background-color: $color;
+    .close {
+      background-color: $color;
       border-radius: 50%;
       color: $white;
       font-size: 14px;
       font-weight: normal;
       height: 18px;
-      line-height: 1.2;
       opacity: 1; // override bootstrap
       right: 0;
       text-align: center;
@@ -131,6 +149,10 @@ $aler-save: (success, info);
       top: 0;
       width: 18px;
     }
+
+    .icon-ic-close {
+      font-size: 9px;
+    }
 	}
 }
 

data/app/assets/stylesheets/components/alerts/_alert-market.scss

@@ -15,19 +15,19 @@ don't forget the `.notice` class as the base
 ```html_example
 <div class="notice notice-unfinished">
   請於下單 10 日內(含例假日)完成匯款交易，逾期將自動取消訂單。<br/>
-	若有任何問題請<a href="#">點此聯絡我們</a>。
+  若有任何問題請<a href="#">點此聯絡我們</a>。
 </div>
 <div class="notice notice-done">
   訂單已匯款、出貨完成。<br/>
-	若有任何問題請<a href="#">點此聯絡我們</a>。
+  若有任何問題請<a href="#">點此聯絡我們</a>。
 </div>
 <div class="notice notice-preparing">
   出貨處理中。<br/>
-	若有任何問題請<a href="#">點此聯絡我們</a>。
+  若有任何問題請<a href="#">點此聯絡我們</a>。
 </div>
 <div class="notice notice-expired">
   繳費已逾期，請重新下單。<br/>
-	若有任何問題請<a href="#">點此聯絡我們</a>。
+  若有任何問題請<a href="#">點此聯絡我們</a>。
 </div>
 ```
 
@@ -47,7 +47,7 @@ don't forget the `.notice` class as the base
 */
 
 // notice
-$notice-unfinished-text: $orange !default;
+$notice-unfinished-text: $orange-red !default;
 $notice-unfinished-bg: #ffeae5 !default;
 $notice-done-text: #a0bd4b !default;
 $notice-done-bg: #eeffe5 !default;
@@ -72,7 +72,7 @@ $notice-list-item-text: #888 !default;
   padding: 10px;
 
   a {
-    color: $orange;
+    color: $orange-red;
     text-decoration: underline;
   }
 

data/app/assets/stylesheets/components/alerts/_alert-no-result.scss

@@ -44,3 +44,4 @@ $no-result-text: #999 !default;
     width: 90px;
   }
 }
+

data/app/assets/stylesheets/components/alerts/_report-msg.scss

@@ -0,0 +1,51 @@
+// --------------------------------
+// Components - Report-msg
+// --------------------------------
+$report-msg-icon: #999 !default;
+$report-msg-icon-hover: #aa0000 !default;
+$report-msg-reported-icon: #9fbe4b !default;
+
+.report-msg {
+  &,
+  &:focus {
+    background: none;
+    border: 0;
+    outline: none;
+    padding: 0;
+  }
+
+  &::before {
+    @include icon-util("\f024", "FontAwesome");
+
+    color: $report-msg-icon;
+  }
+
+
+  &:hover,
+  &:active,
+  &[aria-describedby] {
+    &::before {
+      color: $report-msg-icon-hover;
+    }
+  }
+
+  &.reported {
+    &::before {
+      @include icon-util("\f00c", "FontAwesome");
+
+      color: $report-msg-reported-icon;
+    }
+
+    + .tooltip .tooltip-inner {
+      width: 310px;
+    }
+  }
+}
+
+.report-msg,
+.report-msg.reported {
+  &::before {
+    margin-right: 0;
+  }
+}
+