cupboard 0.2.1 → 0.2.2

data/app/assets/stylesheets/helpers/_variables-color.scss

@@ -4,9 +4,9 @@
 
 /*doc
 ---
+parent: 01_base
 title: Colors
-name: 3_color-palatte
-category: Design elements
+name: 01_variables_color
 ---
 
 Color palettes for Text-color, Button-color, Background-color, etc.
@@ -39,22 +39,22 @@ iCook Colors
     </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 class="bar">Original<span class="ic-red">$red</span></div>
+    <div class="bar">Lighten 10%<span class="ic-red-light10">$red-light10</span></div>
+    <div class="bar">Lighten 20%<span class="ic-red-light20">$red-light20</span></div>
+    <div class="bar">Lighten 30%<span class="ic-red-light30">$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 class="bar">Original &nbsp;<em>用在大標</em><span class="ic-brown">$brown</span></div>
+    <div class="bar">Lighten 10% &nbsp;<em>用在敘述</em><span class="ic-brown-light10">$brown-light10</span></div>
+    <div class="bar">Lighten 20% &nbsp;<em>用在mata</em><span class="ic-brown-light20">$brown-light20</span></div>
+    <div class="bar">Lighten 30% &nbsp;<em>用在背景</em><span class="ic-brown-light30">$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 class="bar">Darken 20%<span class="ic-gray-dark20">$light-gray-dark20</span></div>
+    <div class="bar">Darken 5% &nbsp;<em>用在border</em><span class="ic-gray-dark5">$light-gray-dark5</span></div>
+    <div class="bar">Original<span class="ic-gray">$light-gray</span></div>
+    <div class="bar">Lighten 4%<span class="ic-gray-light4">$light-gray-light4</span></div>
   </div>
 </div>
 
@@ -135,29 +135,37 @@ Alert message Colors
 
 */
 
+// iCook main colors
+$red: #f04646 !default;
+$red-light10: adjust-color($red, $red: 15, $green: 26, $blue: 26) !default;  // #ff6060
+$red-light20: adjust-color($red, $red: 15, $green: 51, $blue: 51) !default;  // #ff7979
+$red-light30: adjust-color($red, $red: 15, $green: 77, $blue: 77) !default;  // #ff9393
+
+$brown: #564e4a !default;
+$brown-light10: adjust-color($brown, $red: 26, $green: 26, $blue: 26) !default;  // #706864
+$brown-light20: adjust-color($brown, $red: 51, $green: 51, $blue: 51) !default;  // #89817d
+$brown-light30: adjust-color($brown, $red: 77, $green: 77, $blue: 77) !default;  // #a39b97
+
+$light-gray: #efede8 !default;
+$light-gray-dark20: adjust-color($light-gray, $red: -51, $green: -51, $blue: -51) !default;  // #bcbab5
+$light-gray-dark5: adjust-color($light-gray, $red: -13, $green: -13, $blue: -13) !default;   // #e2e0db
+$light-gray-light4: adjust-color($light-gray, $red: 10, $green: 10, $blue: 10) !default;     // #f9f7f2
+
 // general colors
 $black: #000 !default;
 $white: #fff !default;
-$orange: #f06354 !default;
-$basic-bg: #efede8 !default;
-$basic-border: #e2e0db !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;
+$orange: #f0993c !default;
+$orange-red: #f06354 !default;
+$green: #46ca90 !default;
+$blue: #41aaf0 !default;
+$basic-bg: $light-gray !default;
+$basic-border: $light-gray-dark5 !default;
+
+// Footer colors
+$ft-text: $brown-light10 !default;
+$ft-link: $brown-light10 !default;
+$ft-border: $red !default;
+$ft-social-link: $brown !default;
 
 // Group colors
 $group-color1: #d8f0d8 !default;
@@ -170,53 +178,9 @@ $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;
+$alert-error: $red !default;
+$alert-warning: #f0993c !default;
+$alert-success: #46ca90 !default;
+$alert-info: #41aaf0 !default;
+$alert-failed: $brown !default;
 

data/app/assets/stylesheets/layouts/_base-footer.scss

@@ -13,8 +13,8 @@ name: 01_base_footer
   <div class="row">
     <div class="col-xs-12">
       <div class="footer">
-        <div class="basic-footer">
-          <div class="container">© 2011-2015 Polydice, Inc.<br class="visible-xs">
+        <div class="base-footer">
+          <div class="container">© 2011-2016 Polydice, Inc.<br class="visible-xs">
             <a rel="nofollow" target="_blank" href="#">服務條款</a>與
             <a rel="nofollow" target="_blank" href="#">隱私權政策</a>
           </div>
@@ -25,24 +25,21 @@ name: 01_base_footer
 </div>
 */
 
-.footer {
-  border-top: 1px solid #e8e5e1;
-}
-
-.basic-footer {
-  background-color: #fff;
-  color: #666;
-  font-size: 13px;
-  padding-top: 15px;
-  padding-bottom: 15px;
+.base-footer {
+  background-color: $white;
+  border-bottom: 2px solid $ft-border;
+  color: $ft-text;
+  padding: 28px 0;
   text-align: center;
-  
+
   a {
-    color: #666;
-  
-    &:hover {
-      color: #999;
-    }
+    color: $ft-link;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .base-footer {
+    padding: 15px 0;
   }
 }
 

data/app/assets/stylesheets/layouts/_global-navbar.scss

@@ -59,7 +59,7 @@ $elements: sub-header, global-dropdown, global-header;
 
 // default global header
 $gl-hd-bg: $white !default; // default global header background color
-$gl-hd-link: $ic-brown !default; // default global header link color
+$gl-hd-link: $brown !default; // default global header link color
 $gl-hd-link-hover: #8c8783 !default;
 $gl-hd-text-size: 15px !default; // default global header font size
 $gl-hd-border: #aa0000 !default;
@@ -92,21 +92,19 @@ $gl-hd-dropdown-border: #e0dcda !default;
     top: 2px;
   }
 
-  .recipes {
-    @include icon("\f0f5");
+  .recipes::before {
+    @include icon-util("\f0f5", "FontAwesome");
   }
 
-  .account {
-    @include icon("\f013");
+  .account::before {
+    @include icon-util("\f013", "FontAwesome");
 
-    &::before {
-      left: 3px;
-      position: relative;
-    }
+    left: 3px;
+    position: relative;
   }
 
-  .my-fav {
-    @include icon("\f004");
+  .my-fav::before {
+    @include icon-util("\f004", "FontAwesome");
   }
 
   .sign-in {
@@ -169,7 +167,7 @@ $gl-hd-dropdown-border: #e0dcda !default;
     z-index: index($elements, global-dropdown);
   }
 
-	.avatar::after {
+  .avatar::after {
     content: "|";
     margin-left: 5px;
   }
@@ -236,9 +234,8 @@ $gl-hd-dropdown-border: #e0dcda !default;
     }
 
     a.logo {
-      @include background(asset-url("icook-logo.png") no-repeat 0px 7px);
-
       background-size: 32px 22px;
+      background: image-url("icook-logo.png") no-repeat 0px 7px;
       font-size: 16px;
       margin: 5px 0 0 16px;
       padding: 9px 6px 9px 38px;
@@ -253,9 +250,9 @@ $gl-hd-dropdown-border: #e0dcda !default;
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .global-header .logged a {
     max-width: 130px;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    overflow: hidden;
   }
 }
 

data/app/assets/stylesheets/layouts/_mega-footer.scss

@@ -0,0 +1,298 @@
+// -----------------------------------
+// Layouts - Footers - mega footer
+// -----------------------------------
+
+/*doc
+---
+parent: 03_footers
+title: Mega footer
+name: 02_footer_nav
+---
+
+<div class="ic-footers">
+  <div class="row">
+    <div class="col-xs-12">
+      <div class="footer">
+				<div class="mega-footer">
+					<div class="container">
+						<div class="row center-block">
+							<div class="col-xs-12 col-md-4">
+								<div class="report">
+									<span class="logo">&nbsp;</span>
+									<span>© 2011-2016 Polydice, Inc.</span>
+									<span class="visible-xs-inline">
+										<a rel="nofollow" target="_blank" href="#">服務條款</a>
+										和
+										<a rel="nofollow" target="_blank" href="#">隱私權政策</a>
+									</span>
+								</div>
+								<ul class="socials">
+									<li class="hidden-xs"><a class="footer-social-fb" href="#" title="愛料理 粉絲團" target="_blank" ref="nofollow"></a></li>
+									<li class="hidden-xs"><a class="footer-social-line" href="#" title="愛料理 line" target="_blank" ref="nofollow">&nbsp;</a></li>
+									<li class="hidden-xs"><a class="footer-social-ig" href="#" title="愛料理 Instagram" target="_blank" ref="nofollow"></a></li>
+									<li class="hidden-xs"><a class="footer-social-twitter" href="#" title="愛料理 推特" target="_blank" ref="nofollow"></a></li>
+									<li><a href="#" class="col-xs-12 btn-report"><span>建議與問題</span></a></li>
+								</ul>
+							</div>
+							<div class="col-xs-12 col-md-8 pull-right">
+								<div class="footer-links hidden-xs">
+									<h4>關於愛料理</h4>
+									<ul class="pull-left">
+										<li>
+											<a href="#" rel="nofollow" target="_blank">公司資訊</a>
+										</li>
+										<li>
+											<a href="#" rel="nofollow" target="_blank">徵才訊息</a>
+										</li><li>
+											<a href="#" rel="nofollow" target="_blank">廣告合作</a>
+										</li>
+										<li>
+											<a href="#" rel="nofollow" target="_blank">品牌資產</a>
+										</li>
+										<li>
+											<a rel="nofollow" target="_blank" href="#">服務條款</a>
+										</li>
+										<li>
+											<a rel="nofollow" target="_blank" href="#">隱私權政策</a>
+										</li>
+									</ul>
+								</div>
+								<div class="footer-links hidden-xs">
+									<h4>會員服務</h4>
+									<ul>
+                    <li><a href="#">我的收藏</a></li>
+                    <li><a href="#">個人首頁</a></li>
+                    <li><a href="#">帳號設定</a></li>
+                    <li><a href="#">忘記密碼</a></li>
+                    <li><a href="#">我的訂單</a></li>
+                    <li><a href="#">VIP 會員</a></li>
+									</ul>
+								</div>
+								<div class="footer-links hidden-xs">
+									<h4>逛食譜</h4>
+									<ul class="pull-left">
+										<li><a href="#">熱門食譜</a></li>
+										<li><a href="#">新到食譜</a></li>
+										<li><a href="#">全部分類</a></li>
+									</ul>
+								</div>
+								<div class="footer-links hidden-xs">
+									<h4>逛其他</h4>
+									<ul class="pull-left">
+										<li><a href="#" rel="nofollow">生活誌</a></li>
+										<li><a href="#" rel="nofollow">享樂誌</a></li>
+										<li><a href="#" rel="nofollow">影音</a></li>
+										<li><a href="#" rel="nofollow">市集</a></li>
+									</ul>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+.mega-footer {
+  background-color: $white;
+  border-bottom: 2px solid $ft-border;
+  color: $ft-text;
+  padding: 40px 0;
+
+  a {
+    color: $ft-link;
+  }
+
+  ul {
+    margin-bottom: 0;
+    padding-left: 0;
+
+    &.pull-left:not(.socials) {
+      margin-right: 20px;
+    }
+  }
+
+  h4 {
+    color: $brown;
+    font-size: 18px;
+    letter-spacing: 0.5px;
+    margin-bottom: 16px;
+    margin-top: 0;
+  }
+
+  li {
+    line-height: 1;
+    list-style-type: none;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    a {
+      font-size: 14px;
+      letter-spacing: 0.5px;
+    }
+  }
+
+  .col-md-4 {
+    padding-left: 8%;
+  }
+
+  .footer-links {
+    float: left;
+    margin: 0 5%;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover h4 {
+      opacity: 1;
+    }
+  }
+
+  .report {
+    color: $ft-text;
+    font-size: 14px;
+    text-align: left;
+
+    > span {
+      display: inline-block;
+      letter-spacing: 0.5px;
+      margin: 5px auto;
+      width: 100%;
+    }
+  }
+
+  .logo {
+    background-image: image-url("icook-logo-footer.svg");
+    background-repeat: no-repeat;
+    display: block;
+    height: 46px;
+    margin: 0 0 10px;
+    text-align: left;
+    width: 175px;
+  }
+
+  .socials {
+    li {
+      border: 1px solid $ft-social-link;
+      border-radius: 3px;
+      display: inline-block;
+      float: left;
+      height: 40px;
+      margin: 5px 15px 10px 0;
+      text-align: center;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    li:not(:last-child) {
+      font-size: 16px;
+      width: 40px;
+    }
+
+    a {
+      display: inline-block;
+      font-size: 18px;
+      height: 100%;
+      line-height: 38px;
+      width: 100%;
+
+      &:hover {
+        color: $white;
+        text-decoration: none;
+      }
+
+      &::before {
+        margin-right: 0;
+      }
+    }
+
+    .btn-report {
+      border-radius: 2px;
+      font-size: 16px;
+      width: 150px;
+
+      &:hover {
+        background-color: $brown;
+        color: $white;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+  .mega-footer {
+    .col-md-4 {
+      margin-bottom: 30px;
+      width: 100%;
+    }
+
+    .col-md-8 {
+      float: none;
+      width: 100%;
+    }
+
+    .report,
+    .socials {
+      float: left;
+      margin-right: 15px;
+      text-align: center;
+    }
+
+    .footer-links {
+      margin: 0 5.5%;
+    }
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1024px) {
+  .mega-footer {
+    .col-md-4 {
+      padding-left: 20%;
+    }
+
+    .col-md-8 {
+      float: none;
+      margin: 0 auto;
+      width: 90%;
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .mega-footer {
+    padding-bottom: 10px;
+    padding-top: 30px;
+    text-align: center;
+
+    .col-md-4 {
+      padding-left: 0;
+    }
+
+    .report {
+      float: none;
+      margin: 0 auto;
+      text-align: center;
+
+      .logo {
+        margin: 0 auto;
+      }
+    }
+
+    .socials {
+      li {
+        float: none;
+        margin-top: 16px;
+      }
+    }
+  }
+}
+
+

data/app/assets/stylesheets/vendors/SpinKit/.bower.json

@@ -0,0 +1,30 @@
+{
+  "name": "SpinKit",
+  "homepage": "https://github.com/tobiasahlin/SpinKit",
+  "authors": [
+    "Tobias Ahlin"
+  ],
+  "description": "A collection of loading indicators animated with CSS",
+  "main": "css/spinkit.css",
+  "keywords": [
+    "css",
+    "scss",
+    "web"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules"
+  ],
+  "version": "1.2.5",
+  "_release": "1.2.5",
+  "_resolution": {
+    "type": "version",
+    "tag": "1.2.5",
+    "commit": "384fbc3f654f7ef7349134e116f9b6d0a4d7d852"
+  },
+  "_source": "https://github.com/tobiasahlin/SpinKit.git",
+  "_target": "^1.2.5",
+  "_originalSource": "SpinKit",
+  "_direct": true
+}

data/app/assets/stylesheets/vendors/SpinKit/CHANGELOG.md

@@ -0,0 +1,40 @@
+# 1.2.5
+
+* Fixed: Add folding cube spinner (11) to combined CSS file
+
+# 1.2.4
+
+* Fixed: Borked gulp script (#106)
+* Fixed: Moved changes made in CSS, to SCSS
+
+# 1.2.3
+
+* Fixed: More exact (33% -> 33.33%) cube dimensions for cube grid spinner
+* Fixed: Comment format for HTML inside CSS, for easier copy and pasting (removed * at the beginning of each row)
+
+# 1.2.2
+
+* Fixed: Use variable for spinner size (defaults to 40px)
+
+# 1.2.1
+
+* Fixed: Two spinners were slightly broken on Android
+* Changed: Bumped default top and bottom margin to 40px
+
+# 1.2.0
+
+* Added: Folding cube spinner
+* Fixed: Lowercase in package name
+
+# 1.1.0
+
+* Removed one spinner (circle with rotating circle, not polished enough)
+* Cleaned up the CSS
+* Added more SCSS variables to more easily customize spinners
+* Introduced SCSS `@for` loops to more easily change timing of spinners
+* Removed moot `version` property from bower.json
+
+
+# 1.0.1
+
+* Fix: Missed sass variables for background-color

data/app/assets/stylesheets/vendors/SpinKit/CONTRIBUTING.md

@@ -0,0 +1,22 @@
+# Pull Request Guidelines
+
+We all love Pull Requests so if you have something you'd like to share with the community we'd be happy to help you out with contributing. But before you create your PR please read and understand the following. :heart:
+
+## Code
+
+If you're submitting a new animation, make sure that it looks identical in [all browsers that support CSS animations](http://caniuse.com/css-animation).
+
+The animation styles should be put in an [SCSS](http://sass-lang.com/) file which you place in [scss/spinners/](https://github.com/tobiasahlin/SpinKit/blob/master/scss/spinners). It must also be imported in [scss/spinkit.scss](https://github.com/tobiasahlin/SpinKit/blob/master/scss/spinkit.scss). Carefully look at the existing spinners to make sure you follow the same conventions and that you list an example on top of the page exactly like the other spinners (we extract this when generating the HTML files). Don't use any browser prefixes as this will be added automatically to the generated CSS files by [autoprefixer](https://github.com/postcss/autoprefixer).
+
+To generate the CSS and HTML files you need to have [node.js](http://nodejs.org/) installed on your system. After that you need to issue `npm install` from the SpinKit project directory to install [gulp](https://github.com/gulpjs/gulp) and other dependencies listed in `package.json`. After doing this you should be able to just call `gulp build` to generate the files. These files should be included in your pull requests.
+
+
+## Style
+
+Following the same code style makes all of our lives a bit easier, currently we ask that you use:
+
+- 2 spaces for indenting
+- No trailing spaces
+- One trailing newline at the end of each file
+
+If you use Sublime Text (or any other editor with the same capability) you can install EditorConfig (through [Sublime Package Control](https://sublime.wbond.net/installation)), which will pick up our project's `.editorconfig` and make your file conform to above rules on each save.