cupboard 0.2.0

data/app/assets/stylesheets/layouts/_headers.scss

@@ -0,0 +1,11 @@
+// --------------------------------
+// Layouts - Headers
+// --------------------------------
+
+/*doc
+---
+title: Header
+name: 01_headers
+category: modular_widgets
+---
+*/

data/app/assets/stylesheets/layouts/_sub-header-market.scss

@@ -0,0 +1,138 @@
+// --------------------------------
+// Layouts - Market channel header
+// --------------------------------
+
+/*doc
+---
+parent: 01_headers
+title: Channel header
+name: sub_header_market
+---
+
+<div class="ic-header">
+<div class="sub-header">
+<div class="navbar navbar-static-top sub-header" id="market-hd">
+  <div class="container">
+    <div class="row">
+      <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
+        <div class="channel-logo clearfix">
+          <h2>
+            <a href="#" title="愛料理市集" class="clearfix" rel="nofollow">
+              <img alt="愛料理市集" width="75" class="hidden-xs img-responsive pull-left" src="/images/icook-logo.svg">
+              <div class="channel-name">
+                <small>Market</small><br>
+                <span>愛料理市集</span>
+              </div>
+            </a>
+          </h2>
+        </div>
+      </div>
+      <div class="col-xs-6 col-sm-8 col-md-8 col-lg-9">
+        <h2 class="hidden-xs hidden-sm">精選生活中的美好事物，分享給愛料理的妳</h2>
+        <a class="btn btn-standard orders pull-right" href="#">訂購清單</a>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</div>
+*/
+
+// default channel header
+$ch-hd-text-color: #564e4a !default;
+
+// channel header
+#market-hd {
+  .channel-logo {
+    > h2 {
+      border-bottom: 0;
+      margin: 0;
+
+      a {
+        display: block;
+      }
+
+      img {
+        margin-right: 12px;
+        margin-top: 8px;
+      }
+    }
+  }
+ 
+  .channel-name {
+    display: inline-block;
+    line-height: 0.8;
+
+    small {
+      color: $orangered;
+    }
+
+    span {
+      color: $ch-hd-text-color;
+      font-size: 24px;
+    }
+  }
+
+  h2 {
+    border-bottom: 1px solid #ccc;
+    color: #888;
+    font-size: 14px;
+    margin: 0;
+    padding-bottom: 8px;
+  }
+}
+
+// for global header and sub header responsive and adjust
+// desktop and tablet
+@media only screen and (min-width: 992px) {
+  #market-hd {
+    h2,
+    .btn-orders {
+      position: relative;
+    }
+
+    h2 {
+      margin-left: -93px;
+      top: 36px;
+      width: 95%;
+    }
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  #market-hd {
+    h2 {
+      margin-left: -60px;
+      width: 92%;
+    }
+  }
+}
+
+// small tablet and phone
+@media only screen and (max-width: 768px) {
+  #market-hd {
+    .btn-orders {
+      top: 30px;
+    }
+  }
+}
+
+@media only screen and (max-width: 992px) {
+  #market-hd {
+    .btn-orders {
+      margin-right: 10px;
+      position: relative;
+      top: 28px;
+    }
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  #market-hd {
+    .btn-orders {
+      top: 27px;
+      margin-right: 0;
+    }
+  }
+}
+

data/app/assets/stylesheets/mixins/_mixin-alert.scss

@@ -0,0 +1,27 @@
+ // --------------------------------
+// Mixin - alert and messaging
+// --------------------------------
+// global
+// @mixin alert($color, $border-color, $background-color) {
+//   background-color: $background-color;
+//   border: 1px solid $border-color;
+//   color: $color;
+//   font-size: 14px;
+//   margin-bottom: 10px;
+//   padding: 20px;
+// }
+
+// alert
+@mixin alert-variant($alert-type-color) {
+  background-color: rgba($alert-type-color, 0.1);
+  border: 1px solid $alert-type-color;
+  border-radius: 3px;
+  color: $alert-type-color;
+}
+
+// notice/market
+@mixin notice-variant($notice-text, $notice-bg) {
+  background-color: $notice-bg;
+  border: 1px solid $notice-text;
+  color: $notice-text;
+}

data/app/assets/stylesheets/mixins/_mixin-animation.scss

@@ -0,0 +1,10 @@
+// 
+// Animation - tv series
+//
+// --------------------------------
+@mixin ease-in-out($sec) {
+  transition: all $sec ease-in-out;
+  -webkit-transition: all $sec ease-in-out; 
+  -moz-transition: all $sec ease-in-out; 
+  -o-transition: all $sec ease-in-out; 
+}

data/app/assets/stylesheets/mixins/_mixin-badge.scss

@@ -0,0 +1,21 @@
+// 
+// Mixin - badge
+//
+// --------------------------------
+@mixin badge($content, $bg-color) {
+  &:after {
+    background-color: $bg-color;
+    border-radius: 4px;
+    content: $content;
+    color: #fff;
+    display: inline-block;
+    font-size: 11px;
+    font-weight: normal;
+    line-height: 1;
+    min-width: 10px;
+    margin-left: 5px;
+    padding: 3px 6px 1px;
+    position: relative;
+    top: -1px;
+  }
+}

data/app/assets/stylesheets/mixins/_mixin-buttons.scss

@@ -0,0 +1,21 @@
+// 
+// Mixin - buttons
+//
+// -------------------------------------
+// * don't forget to import icons mixin 
+// -------------------------------------
+//
+// button without icon
+@mixin btn ($btn-font-size, $btn-font-color, $btn-bg-color) {
+  border-radius: 4px;
+  background-color: $btn-bg-color;
+  color: $btn-font-color;
+  font-size: $btn-font-size;
+}
+
+// button with icon
+@mixin btn-icon ($icon, $btn-font-size, $btn-font-color, $btn-bg-color) {
+  @include btn ($btn-font-size, $btn-font-color, $btn-bg-color);
+  @include icon ($icon);  
+}
+

data/app/assets/stylesheets/mixins/_mixin-icons.scss

@@ -0,0 +1,32 @@
+//
+// Mixin - icons
+//
+// --------------------------------
+// *use font-awesome icon-font
+// --------------------------------
+@mixin basic-icon($icon) {  
+  content: $icon;
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  height: 14px;
+  line-height: 1;
+  width: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;   
+}
+
+@mixin icon($icon) {
+  &:before {
+    @include basic-icon($icon);
+    margin-right: 5px;
+  }
+}
+
+@mixin icon-b($icon) {
+  &:after {
+    @include basic-icon($icon);
+    margin-left: 5px;
+  }
+}

data/app/assets/stylesheets/mixins/_mixin-type.scss

@@ -0,0 +1,7 @@
+// 
+// Mixin - typography
+//
+// --------------------------------
+
+$font-family: "Helvetica Neue","Microsoft Jhenghei",Helvetica,Arial,Geneva,sans-serif !default;
+$letter-spacing: 0.06em !default;

data/app/assets/stylesheets/variables/_color-palette.scss

@@ -0,0 +1,222 @@
+// --------------------------------
+// Color Palette
+// --------------------------------
+
+/*doc
+---
+title: Colors
+name: 3_color-palatte
+category: Design elements
+---
+
+Color palettes for Text-color, Button-color, Background-color, etc.
+
+### 愛料理主要色彩
+iCook Colors
+
+<div class="ic-colors">
+  <div class="row main-colors">
+    <div class="col-xs-12 col-sm-4">
+      <div class="main-color main-1">
+        <p>#F04646</p>
+        <span>Original</span>
+        <span>Lighten 10%</span>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4">
+      <div class="main-color main-2">
+        <p>#564E4A</p>
+        <span>Original</span>
+        <span>Lighten 10%</span>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4">
+      <div class="main-color main-3">
+        <p>#EFEDE8</p>
+        <span>Original</span>
+        <span>Darken 20%</span>
+      </div>
+    </div>
+  </div>
+  <div class="main-color-bar clearfix">
+    <div class="bar">Original<span class="ic-red"></span></div>
+    <div class="bar">Lighten 10%<span class="ic-red-light10"></span></div>
+    <div class="bar">Lighten 20%<span class="ic-red-light20"></span></div>
+    <div class="bar">Lighten 30%<span class="ic-red-light30"></span></div>
+  </div>
+  <div class="main-color-bar clearfix">
+    <div class="bar">Original &nbsp;<em>用在大標</em><span class="ic-brown"></span></div>
+    <div class="bar">Lighten 10% &nbsp;<em>用在敘述</em><span class="ic-brown-light10"></span></div>
+    <div class="bar">Lighten 20% &nbsp;<em>用在mata</em><span class="ic-brown-light20"></span></div>
+    <div class="bar">Lighten 30% &nbsp;<em>用在背景</em><span class="ic-brown-light30"></span></div>
+  </div>
+  <div class="main-color-bar clearfix">
+    <div class="bar">Darken 20%<span class="ic-gray-dark20"></span></div>
+    <div class="bar">Darken 5% &nbsp;<em>用在border</em><span class="ic-gray-dark5"></span></div>
+    <div class="bar">Original<span class="ic-gray"></span></div>
+    <div class="bar">Lighten 4%<span class="ic-gray-light4"></span></div>
+  </div>
+</div>
+
+<br/>
+<hr/>
+### 群組色
+Group Colors
+<br/><small>Background color as the base color, text (and border) darken 60%</small>
+<br/><small>used in recipe ingredient groups</small>
+
+<div class="ic-colors">
+  <div class="row group-colors">
+    <div class="col-xs-6 col-sm-3 group-color">
+      <p>#D8F0D8</p>
+      <span class="group-color1">Gruop</span>
+    </div>
+    <div class="col-xs-6 col-sm-3 group-color">
+      <p>#C8CDF0</p>
+      <span class="group-color2">Gruop</span>
+    </div>
+    <div class="col-xs-6 col-sm-3 group-color">
+      <p>#DAECF4</p>
+      <span class="group-color3">Gruop</span>
+    </div>
+    <div class="col-xs-6 col-sm-3 group-color">
+      <p>#F5DCDC</p>
+      <span class="group-color4">Gruop</span>
+    </div>
+    <div class="col-xs-6 col-sm-3 group-color">
+      <p>#FDECD3</p>
+      <span class="group-color5">Gruop</span>
+    </div>
+    <div class="col-xs-6 col-sm-3 group-color">
+      <p>#D8F0E6</p>
+      <span class="group-color6">Gruop</span>
+    </div>
+    <div class="col-xs-6 col-sm-3 group-color">
+      <p>#F6E3FB</p>
+      <span class="group-color7">Gruop</span>
+    </div>
+    <div class="col-xs-6 col-sm-3 group-color">
+      <p>#FAD6C8</p>
+      <span class="group-color8">Gruop</span>
+    </div>
+  </div>
+</div>
+
+<br/>
+<hr/>
+### 訊息提示
+Alert message Colors
+<br/><small>Text (and border) as base color, and opacity 0.1 as background color</small>
+
+<div class="ic-colors">
+  <div class="row msg-colors">
+    <div class="col-xs-6 col-sm-3">
+      <p>#F04646</p>
+      <div class="ic-alert ic-alert-error">Danger</div>
+    </div>
+    <div class="col-xs-6 col-sm-3">
+      <p>#F0993C</p>
+      <div class="ic-alert ic-alert-warning">Warning</div>
+    </div>
+    <div class="col-xs-6 col-sm-3">
+      <p>#46CA90</p>
+      <div class="ic-alert ic-alert-success">Success</div>
+    </div>
+    <div class="col-xs-6 col-sm-3">
+      <p>#41AAF0</p>
+      <div class="ic-alert ic-alert-info">Info</div>
+    </div>
+    <div class="col-xs-6 col-sm-3">
+      <p>#564E4A</p>
+      <div class="ic-alert ic-alert-failed">Failed</div>
+    </div>
+  </div>
+</div>
+
+*/
+
+// general colors
+$black: #000 !default;
+$white: #fff !default;
+$orange: #f06354 !default;
+$basic-bg: #efede8 !default;
+$basic-border: #ebe5e1 !default;
+
+// iCook main colors
+// variable named with prefix `ic-`
+$ic-red: #f04646 !default;
+$ic-red-light10: adjust-color($ic-red, $red: 15, $green: 26, $blue: 26) !default;
+$ic-red-light20: adjust-color($ic-red, $red: 15, $green: 51, $blue: 51) !default;
+$ic-red-light30: adjust-color($ic-red, $red: 15, $green: 77, $blue: 77) !default;
+
+$ic-brown: #564e4a !default;
+$ic-brown-light10: adjust-color($ic-brown, $red: 26, $green: 26, $blue: 26) !default;
+$ic-brown-light20: adjust-color($ic-brown, $red: 51, $green: 51, $blue: 51) !default;
+$ic-brown-light30: adjust-color($ic-brown, $red: 77, $green: 77, $blue: 77) !default;
+
+$ic-gray: #efede8 !default;
+$ic-gray-dark20: adjust-color($ic-gray, $red: -51, $green: -51, $blue: -51) !default;
+$ic-gray-dark5: adjust-color($ic-gray, $red: -13, $green: -13, $blue: -13) !default;
+$ic-gray-light4: adjust-color($ic-gray, $red: 10, $green: 10, $blue: 10) !default;
+
+// Group colors
+$group-color1: #d8f0d8 !default;
+$group-color2: #c8cdf9 !default;
+$group-color3: #daecf4 !default;
+$group-color4: #f5dcdc !default;
+$group-color5: #fdecd3 !default;
+$group-color6: #d8f0e6 !default;
+$group-color7: #f6e3fb !default;
+$group-color8: #fad6c8 !default;
+
+// Alert message colors
+$ic-alert-error: $ic-red !default;
+$ic-alert-warning: #f0993c !default;
+$ic-alert-success: #46ca90 !default;
+$ic-alert-info: #41aaf0 !default;
+$ic-alert-failed: $ic-brown !default;
+
+
+//----OLD-------------------------
+$darkgray: #666 !default;
+$textgray: #888 !default;
+$brightgray: #999 !default;
+$lightgray: #aaa !default;
+
+// small text
+$smallgray: #9b9b9b !default;
+$lightbrown: #aa8f83 !default;
+$brown: #ac8c85 !default;
+$orangered: #f06354 !default;
+
+// title text
+$darkred: #aa0000 !default;
+$redbrown: #5c4545 !default;
+$darkbrown: #564e4a !default;
+
+// --------------------------------
+// Button-color Palette
+// --------------------------------
+$pearlbush: #e3d6cc !default;
+$softblue: #53ade5 !default;
+$grassgreen: #9fbe4c !default;
+$palegray: #fbf9f7 !default;
+
+// --------------------------------
+// Background-color Palette
+// --------------------------------
+$yellow: #fee59a !default;
+$lightyellow: #fefee5 !default;
+$paleyellow: #fffbf0 !default;
+$lightwhite: #f9f8f6 !default;
+$graybeige: #eeede8 !default;
+$beige: #efede9 !default;
+$lightbeige: #ede9e1 !default;
+$beigebrown: #ebe5e1 !default;
+
+// --------------------------------
+// Border-color Palette
+// --------------------------------
+$linegray1: #ccc !default;
+$linegray2: #969696 !default;
+