cupboard 0.2.0

data/app/assets/stylesheets/_variables.scss

@@ -0,0 +1 @@
+@import "variables/color-palette";

data/app/assets/stylesheets/_widgets.scss

@@ -0,0 +1,50 @@
+//
+// Widgets
+//
+// --------------------------------
+// global
+// --------------------------------
+// - features
+@import "widgets/features/feature-slides";
+@import "widgets/features/feature-events";
+@import "widgets/feeds/blog-feeds";
+@import "widgets/feeds/tv-feeds";
+// - sidebar widgets
+@import "widgets/sidebar-widgets/business-kitchen";
+@import "widgets/sidebar-widgets/sidebar-widget";
+@import "widgets/sidebar-widgets/popular-search";
+@import "widgets/sidebar-widgets/recipes-collect";
+@import "widgets/sidebar-widgets/popular-recipes";
+@import "widgets/sidebar-widgets/popular-recipe-lists";
+@import "widgets/sidebar-widgets/icook-video";
+
+// --------------------------------
+// users
+// --------------------------------
+@import "widgets/users/user-stats";
+@import "widgets/users/fav-list";
+
+// --------------------------------
+// brands
+// --------------------------------
+// @import "widgets/pr-ingredients";
+@import "widgets/brands/pr-recent";
+@import "widgets/brands/pr-latest";
+@import "widgets/brands/pr-popular-recipe-lists";
+@import "widgets/brands/pr-ingredients";
+@import "widgets/brands/pr-video";
+
+// --------------------------------
+// TV
+// --------------------------------
+// @import "widgets/recipe-mark";
+@import "widgets/tv/tv-popular-tags";
+@import "widgets/tv/tv-more-recipes";
+
+// --------------------------------
+// Modal
+// --------------------------------
+// # recipe list modal
+@import "widgets/modal/modal-reset";
+@import "widgets/modal/recipe-list-modal";
+

data/app/assets/stylesheets/base/_badge.scss

@@ -0,0 +1,89 @@
+// --------------------------------
+// Badges
+// --------------------------------
+
+/*doc
+---
+title: Badge
+name: 02_badge
+category: UI components
+---
+
+<div><p>simply add <code>.badge-</code> class as below</p></div>
+
+<div class="row">
+  <div class="col-xs-12 col-md-3">
+    <p>brand</p>
+    <span class="badge-brand">愛料理</span>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <p>pr</p>
+    <span class="badge-pr">食譜料理募集中</span>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <p>new</p>
+    <span class="badge-new">炒飯食譜募集活動</span>
+  </div>
+  <div class="col-xs-12 col-md-3">
+    <p>support</p>
+    <span class="badge-support">愛料理市集</span>
+  </div>
+</div>
+<br/>
+<div>
+  <p>vip</p>
+  <div>愛料理<span class="badge-vip"></span></div>
+</div>
+
+```html_example
+<div class="badge-brand">愛料理</div>
+<div class="badge-pr">食譜料理募集中</div>
+<div class="badge-new">炒飯食譜募集活動</div>
+<div class="badge-support">愛料理市集</div>
+<div>愛料理<span class="badge-vip"></span></div>
+```
+
+*/
+
+$badge-brand-bg: #ac8b86 !default;
+$badge-new-bg: $orange !default;
+$badge-pr-bg: #aa8f83 !default;
+$badge-support-bg: #999 !default;
+$badge-vip-bg: $orange !default;
+
+@each $type, $content, $color in
+  (brand, "品牌", $badge-brand-bg),
+  (new, "NEW", $badge-new-bg),
+  (pr, "PR", $badge-pr-bg),
+  (support, "贊助", $badge-support-bg) {
+  .badge-#{$type} {
+    @include badge($content, $color);
+  }
+}
+
+.badge-support::after {
+  border-radius: 10px;
+  font-size: 10px;
+  padding: 3px 7px;
+}
+
+.badge-vip {
+  background-color: $badge-vip-bg;
+  border-radius: 15px;
+  color: $white;
+  display: inline-block;
+  height: 17px;
+  margin-left: 5px;
+  padding: 0 8px;
+  width: 33px;
+
+  &::after {
+    background-image: image-url("vip-icon.svg");
+    background-repeat: no-repeat;
+    content: "";
+    display: inline-block;
+    height: 10px;
+    padding: 0 8px;
+    width: 18px;
+  }
+}

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

@@ -0,0 +1,217 @@
+// --------------------------------
+// Buttons
+// --------------------------------
+
+/*doc
+---
+title: Buttons
+name: 5_Buttons
+category: Design elements
+---
+
+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/_accordion.scss

@@ -0,0 +1,69 @@
+.product-qna {
+  padding-bottom: 0;
+
+  h4 {
+    margin-bottom: 0;
+  }
+
+  .panel-group {
+    margin-bottom: 0;
+    
+    .panel + .panel {
+      margin-top: 0;
+    }
+  }
+
+  .panel {
+    box-shadow: none;
+    border-radius: 0;
+    border-width: 0 0 1px;
+    border-color: #ddd;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  .panel-body {
+    border: 0 !important;
+    padding: 0 20px 20px 24px;;
+
+    p {
+      color: #888;
+      font-size: 15px;
+      margin-bottom: 0;
+    }
+  }
+
+  .panel-heading {
+    border-radius: 0;
+    padding: 0;
+
+    a {
+      @include icon("\f059");
+      @include icon-b("\f0d8");
+
+      color: #564e4a;
+      display: block;
+      font-size: 16px;
+      padding: 20px 20px 20px 24px;
+      position: relative;
+
+      &:before {
+        left: 0;
+        position: absolute;
+        top: 23px;
+      }
+
+      &:after {
+        margin-left: 0;
+        position: absolute;
+        right: 0;
+      }
+
+      &.collapsed:after {
+        content: "\f0d7";
+      }
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+// --------------------------------
+// Navigation - breadcrumb
+// --------------------------------
+
+/*doc
+---
+title: Breadcrumb
+name: 06_breadcrumb
+category: UI components
+---
+
+```html_example
+<div>
+  <ol class="breadcrumb">
+    <li><a href="#">逛食譜</a></li>
+    <li><a href="#">每日菜色</a></li>
+    <li><a href="#">麵食</a></li>
+    <li class="active">餛飩抄手</li>
+  </ol>
+</div>
+```
+
+*/
+
+$breadcrumb-link: $ic-brown !default;
+$breadcrumb-link-active: #999 !default;
+
+.breadcrumb {
+  background-color: transparent; // override bootstrap
+  border-radius: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-top: 0;
+
+  & > li + li {
+    @include icon("\f105");
+  }
+
+  a {
+    color: $breadcrumb-link;
+  }
+
+  .active {
+    color: $breadcrumb-link-active;
+  }
+}