cupboard 0.2.0

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

@@ -0,0 +1,137 @@
+// --------------------------------
+// Alert
+// --------------------------------
+
+/*doc
+---
+title: Alert
+name: 04_Alert
+category: UI components
+---
+
+## Basic Alert
+<p>basic alert</p>
+
+```html_example
+<div class="alert alert-error">Error</div>
+<div class="alert alert-warning">warning</div>
+<div class="alert alert-success">Success</div>
+<div class="alert alert-info">Info</div>
+<div class="alert alert-failed">Failed</div>
+```
+
+## Alert with icon
+<p><small>simply add `.alert-icon` class</small></p>
+
+```html_example
+<div class="alert alert-error alert-icon">Error</div>
+<div class="alert alert-warning alert-icon">warning</div>
+<div class="alert alert-success alert-icon">Success</div>
+<div class="alert alert-info alert-icon">Info</div>
+<div class="alert alert-failed alert-icon">Failed</div>
+```
+
+## Dismissible alert
+<p><small>alert can be closed by add `.alert-icon` class and `<a>` tag with `.close` class</small></p>
+
+```html_example
+<div class="alert alert-error alert-icon alert-dismissible">
+  <a href="#" class="close">x</a>Error
+</div>
+<div class="alert alert-warning alert-icon alert-dismissible">
+  <a href="#" class="close">x</a>Warning
+</div>
+<div class="alert alert-success alert-icon alert-dismissible">
+  <a href="#" class="close">x</a>Success
+</div>
+<div class="alert alert-info alert-icon alert-dismissible">
+  <a href="#" class="close">x</a>Info
+</div>
+<div class="alert alert-failed alert-icon alert-dismissible">
+  <a href="#" class="close">x</a>Failed
+</div>
+```
+
+## link in alert
+<p><small>simply add `.alert-link` class to `<a>` tag in alert </small></p>
+
+```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>.
+</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>.
+</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>.
+</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>.
+</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>.
+</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);
+
+@each $type, $color in $alerts {
+  .alert-#{$type} {
+    @include alert-variant($color);
+
+    position: relative;
+
+    &.alert-icon {
+      padding-left: 59px;
+      position: relative;
+
+      @if ($type == "success") or ($type == "info") {
+        @include icon("\f06a");
+      } @else {
+        @include icon("\f071");
+      }
+
+      &::before {
+        background-color: $color;
+        color: $white;
+        height: 100%;
+        left: 0;
+        line-height: inherit;
+        margin-right: 0;
+        padding: 15px;
+        position: absolute;
+        top: 0;
+        width: 44px;
+      }
+    }
+
+    &.alert-dismissible {
+      padding-right: 15px; // override bootstrap
+    }
+
+    .alert-link {
+      color: $color;
+      font-weight: normal;  // override bootstrap
+      text-decoration: underline;
+    }
+
+    .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;
+      text-shadow: none;
+      top: 0;
+      width: 18px;
+    }
+	}
+}
+

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

@@ -0,0 +1,129 @@
+// --------------------------------
+// Status messaging
+// --------------------------------
+
+/*doc
+---
+title: Status
+name: 05_status
+category: UI components
+---
+
+### Market status notice
+<p>link in notice</p>
+
+```html_example
+<div class="notice notice-unfinished">
+  請於下單 10 日內(含例假日)完成匯款交易，逾期將自動取消訂單。<br/>
+	若有任何問題請<a href="#">點此聯絡我們</a>。
+</div>
+<div class="notice notice-done">
+  訂單已匯款、出貨完成。<br/>
+	若有任何問題請<a href="#">點此聯絡我們</a>。
+</div>
+<div class="notice notice-preparing">
+  出貨處理中。<br/>
+	若有任何問題請<a href="#">點此聯絡我們</a>。
+</div>
+<div class="notice notice-expired">
+  繳費已逾期，請重新下單。<br/>
+	若有任何問題請<a href="#">點此聯絡我們</a>。
+</div>
+```
+
+<hr/>
+<p>list in notice</p>
+
+```html_example
+<div class="notice notice-unfinished">
+  請於下單24小時內完成匯款交易，逾期將自動取消訂單。
+  <ul>
+    <li>匯款銀行代碼: 807</li>
+    <li>匯款帳號: 123456789</li>
+    <li>匯款金額: 9000 元</li>
+  </ul>
+</div>
+```
+
+<hr/>
+### No result status
+<div class="ic-no-result"><p>no recipes/dishes</p></div>
+
+```html_example
+<div class="no-result">
+  <p>目前沒有任何新的食譜或料理喔，趕快去 <a href="#">發表新食譜</a> 吧！</p>
+  <img src="/images/no-result.png" alt="No result">
+</div>
+```
+*/
+
+// notice
+$notice-unfinished-text: $orange !default;
+$notice-unfinished-bg: #ffeae5 !default;
+$notice-done-text: #a0bd4b !default;
+$notice-done-bg: #eeffe5 !default;
+$notice-preparing-text: #666 !default;
+$notice-preparing-bg: $white !default;
+$notice-expired-text: $black !default;
+$notice-expired-bg: #e6e6e6 !default;
+$notice-list-item-text: #888 !default;
+// no-result
+$no-result-bg: #f9f8f6 !default;
+$no-result-text: #999 !default;
+
+@each $type, $text-color, $bg-color in
+  (unfinished, $notice-unfinished-text, $notice-unfinished-bg),
+  (done, $notice-done-text, $notice-done-bg),
+  (preparing, $notice-preparing-text, $notice-preparing-bg),
+  (expired, $notice-expired-text, $notice-expired-bg) {
+  .notice-#{$type} {
+    @include notice-variant($text-color, $bg-color);
+  }
+}
+
+.notice {
+  margin-bottom: 20px;
+  padding: 10px;
+
+  a {
+    color: $orange;
+    text-decoration: underline;
+  }
+
+  ul {
+    margin-bottom: 0;
+    margin-top: 5px;
+    padding-left: 0;
+
+    li {
+      color: $notice-list-item-text;
+      list-style-type: none;
+    }
+  }
+}
+
+// no result
+.no-result {
+  background-color: $no-result-bg;
+  border-radius: 4px;
+  color: $no-result-text;
+  margin: 50px auto;
+  padding: 20px;
+  position: relative;
+
+  a {
+    color: $no-result-text;
+    text-decoration: underline;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  img {
+    bottom: 20px;
+    position: absolute;
+    right: 20px;
+    width: 90px;
+  }
+}

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

@@ -0,0 +1,244 @@
+// --------------------------------
+// Cards - dish card
+// --------------------------------
+
+/*doc
+---
+parent: 17_cards
+name: dish_card
+title: Dish card
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-4">
+    <p>dish-card in recipes/show</p>
+    <div class="dish-card">
+      <a class="card-img" href="#">
+        <img class="img-responsive" src="/images/recipe-default.png">
+      </a>
+      <div class="card-info clearfix">
+        <div class="name">
+          <span>iCook 愛料理</span>
+        </div>
+        <p>簡單方便，吃的清爽又安心</p>
+        <div class="time">2016/05/04</div>
+      </div>
+      <div class="refer-to">
+        <a href="#">沁涼豆花_電鍋料理 20分鐘</a>
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-sm-4">
+    <p>dish-card with reply notice</p>
+    <div class="dish-card has-reply">
+      <a class="card-img" href="#">
+        <img class="img-responsive" src="/images/recipe-default.png">
+      </a>
+      <div class="card-info clearfix">
+        <div class="name">
+          <span>iCook 愛料理</span>
+        </div>
+        <p>簡單方便，吃的清爽又安心</p>
+        <div class="time">2016/05/04</div>
+      </div>
+      <div class="refer-to">
+        <a href="#">沁涼豆花_電鍋料理 20分鐘</a>
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-sm-4 cook-a-dish">
+    <p>in users/dishes</p>
+    <div class="dish-card">
+      <a class="card-img" href="#">
+        <img class="img-responsive" src="/images/recipe-default.png">
+      </a>
+      <div class="card-info clearfix">
+        <div class="name">
+          <span>iCook 愛料理</span>
+        </div>
+        <p>簡單方便，吃的清爽又安心</p>
+        <div class="time">2016/05/04</div>
+      </div>
+      <div class="refer-to">
+        <a href="#">沁涼豆花_電鍋料理 20分鐘</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+*/
+
+@import "compass/typography/text/ellipsis";
+
+$dish-card-border: #f0f0f0 !default;
+$dish-card-info: #777 !default;
+$dish-card-name: $ic-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-upload: #eeede8 !default;
+$dish-card-upload-icon: #777 !default;
+$dish-card-upload-info: #aaa !default;
+
+.dish-card {
+  border: 1px solid $dish-card-border;
+  border-radius: 2px;
+  display: inline-block;
+  // float: left;
+  max-width: 172px;
+  position: relative;
+
+  a:hover,
+  a:active {
+    text-decoration: none;
+  }
+
+  img {
+    max-height: 150px;
+    width: 100%;
+  }
+
+  .card-img {
+    display: block;
+    padding: 10px;
+  }
+
+  .card-info {
+    color: $dish-card-info;
+    height: 46px;
+    padding: 0 10px 10px;
+
+    p {
+      @include ellipsis;
+
+      line-height: 15px;
+      margin-bottom: 0;
+      overflow: hidden;
+    }
+  }
+
+  .name span {
+    @include ellipsis;
+
+    color: $dish-card-name;
+    display: inline-block;
+    line-height: 16px;
+    width: 85%;
+  }
+
+  .time {
+    color: $dish-card-time;
+    display: none;
+  }
+
+  .refer-to {
+    display: none;
+    height: 40px;
+
+    a {
+      @include ellipsis;
+      @include icon("\f064");
+
+      background-color: $dish-card-refer-bg;
+      color: $dish-card-refer-text;
+      display: block;
+      line-height: 16px;
+      padding: 12px 10px;
+
+      &:hover,
+      &:active {
+        background-color: $dish-card-refer-bg-hover;
+        color: $dish-card-refer-bg-text;
+      }
+    }
+  }
+
+  // in users/dishes and brands/dishes
+  .cook-a-dish & {
+    .card-info {
+      height: 30px;
+    }
+
+    .name,
+    p {
+      display: none;
+    }
+
+    .time,
+    .refer-to {
+      display: block;
+    }
+  }
+
+  // in recipes/dishes/index
+  .dishes-entry  & {
+    min-height: 100%;
+
+    .time,
+    .refer-to {
+      display: none;
+    }
+  }
+
+  &.has-reply {
+    .name,
+    .time {
+      @include icon-b("\e809");
+
+      &::after {
+        color: $dish-card-has-reply;
+        display: inline-block;
+        float: right;
+        font-family: "icookfont";
+        height: 14px;
+        margin-left: 0;
+        position: relative;
+        right: 0;
+        top: 1px;
+      }
+    }
+  }
+
+  &.upload {
+    padding: 10px 10px 0;
+    text-align: center;
+
+    > div:first-child {
+      background-color: $dish-card-upload;
+      position: relative;
+    }
+
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+
+    img {
+      opacity: 0;
+    }
+
+    i {
+      color: $dish-card-upload-icon;
+
+      font-size: 20px;
+      height: auto;
+      left: 43%;
+      position: absolute;
+      top: 40%;
+      width: 24px;
+    }
+
+    .card-info {
+      color: $dish-card-upload-info;
+      font-size: 18px;
+      line-height: 36px;
+      margin-top: 10px;
+      padding-bottom: 14px;
+    }
+  }
+}
+