cupboard 0.2.0 → 0.2.1

data/app/assets/stylesheets/{widgets/sidebar-widgets → components/sidebars}/_popular-search.scss

@@ -1,18 +1,20 @@
-// ---------------------------------
-// Sidebar widgets - popular search
-// ---------------------------------
+@import "compass/typography/text/ellipsis";
+
+// -----------------------------------------
+// Components - Sidebars - popular search
+// -----------------------------------------
 
 /*doc
 ---
-parent: 04_sidebar_widgets
+parent: 17_sidebars
 title: Popular search
-name: popular_search
+name: 02_popular_search
 ---
 
 <div class="row">
   <div class="col-xs-12 col-sm-6">
     <div class="inner-block widget">
-      <div id="popular-search-panel" class="popular-search">
+      <div class="popular-search">
         <h4 class="title">最近熱門關鍵字</h4>
         <ol style="counter-reset: li" class="slats">
           <li class="media clearfix">
@@ -142,68 +144,79 @@ name: popular_search
 </div>
 */
 
+$popular-search-link: #888 !default;
+$popular-search-link-hover: #999 !default;
+$popular-search-arrow-up: #aa0000 !default;
+$popular-search-arrow-down: #1c959e !default;
+$popular-search-minus: #999 !default;
+
 .popular-search {
-  .title {
-    margin-bottom: 5px;
-  }
+  ol {
+    margin-top: -10px;
 
-  ol > li:before {
-    background-color: transparent;
-    color: #564e4a;
-    content: counter(li);
-    counter-increment: li;
-    font-size: 18px;
-    font-weight: bold;
-    height: 30px;
-    left: 0;
-    line-height: 49px;
-    margin-right: 8px;
-    position: absolute;
-    top: 15px;
-    text-align: center;
-    width: 30px;
+    > li::before {
+      background-color: transparent;
+      color: $ic-brown;
+      content: counter(li);
+      counter-increment: li;
+      font-size: 18px;
+      font-weight: bold;
+      height: 30px;
+      left: 0;
+      line-height: 49px;
+      margin-right: 8px;
+      position: absolute;
+      text-align: center;
+      top: 15px;
+      width: 30px;
+    }
   }
 
   li {
     margin-bottom: 0;
-    padding-left: 27px;
+    margin-top: 0;
+    padding: 10px 0 10px 27px;
     position: relative;
-    
+
+    + li {
+      border-top: 1px solid $basic-border;
+    }
+
     &:first-child {
       padding-top: 10px;
     }
 
-    a:hover {
-      color: #999;
+    &.hot {
+      overflow: hidden;
+      position: relative;
+
+      &::after {
+        -webkit-text-size-adjust: none;
+        color: $popular-search-arrow-up;
+        content: "HOT";
+        font-size: 10px;
+        font-weight: 700;
+        left: 129px;
+        position: absolute;
+        top: 14px;
+      }
     }
-  }
 
-  li.hot {
-    position: relative;
-    overflow: hidden;
-
-    &:after {
-      -webkit-text-size-adjust: none;
-      content: "HOT";
-      color: #aa0000;
-      font-size: 10px;
-      font-weight: 700;
-      left: 129px;
-      position: absolute;
-      top: 14px;
+    a:hover {
+      color: $popular-search-link-hover;
     }
   }
 
   .media-left {
     @include ellipsis;
-    
+
     line-height: 60px;
     margin-right: 0;
     margin-top: 0;
     width: 41.7%;
 
     a {
-      color: #888;
+      color: $popular-search-link;
       float: left;
       font-size: 16px;
     }
@@ -217,7 +230,7 @@ name: popular_search
       padding: 0;
       width: 80px;
 
-      & + li {
+      + li {
         margin-left: 10px;
       }
     }
@@ -244,27 +257,27 @@ name: popular_search
   .icon-arrow-up {
     @include icon("\f176");
 
-    &:before {
-      color: #aa0000;
+    &::before {
+      color: $popular-search-arrow-up;
     }
   }
 
   .icon-arrow-down {
     @include icon("\f175");
 
-    &:before {
-      color: #1c959e;
-    } 
+    &::before {
+      color: $popular-search-arrow-down;
+    }
   }
-  
+
   .icon-minus {
     @include icon("\f068");
 
-    &:before {
-      color: #999;
+    &::before {
+      color: $popular-search-minus;
       position: relative;
       right: -2px;
-    } 
+    }
   }
 
   .icon-arrow-up,
@@ -272,7 +285,7 @@ name: popular_search
   .icon-minus {
     float: right;
 
-    &:before {
+    &::before {
       font-weight: bold;
       font-size: 16px;
       margin-right: 0;
@@ -286,7 +299,7 @@ name: popular_search
     ol > li {
       padding-left: 17px;
 
-      &:before {
+      &::before {
         width: 10px;
       }
     }
@@ -299,7 +312,7 @@ name: popular_search
 
 @media only screen and (max-width: 992px) {
   .popular-search {
-    ol > li:before {
+    ol > li::before {
       line-height: 7px;
       width: 17px;
     }
@@ -310,8 +323,8 @@ name: popular_search
       width: 100%;
     }
 
-    .badge-support:after {
+    .badge-support::after {
       right: -58px;
     }
   }
-}
+}

data/app/assets/stylesheets/{widgets/sidebar-widgets → components/sidebars}/_recipes-collect.scss

@@ -1,20 +1,21 @@
-// ----------------------------------
-// Sidebar widgets - recipes collect
-// ----------------------------------
+// ------------------------------------------
+// Components - Sidebars - recipes collect
+// ------------------------------------------
 
 /*doc
 ---
-parent: 04_sidebar_widgets
+parent: 17_sidebars
 title: Recipes collect
-name: recipes_collect
+name: 05_recipes_collect
 ---
+
 <div class="row">
 	<div class="col-xs-12 col-sm-6">
 		<div class="inner-block widget">
 			<div class="recipes-collect">
 				<h4 class="title badge-pr">食譜料理募集中</h4>
 				<ul>
-					<li><a target="_blank" href="#">iCook 愛料理暖心食譜募集中</a></li>
+					<li><a target="_blank" href="#">VIP 獨家好康免費拿>></a></li>
 					<li><a target="_blank" href="#">iCook 愛料理暖心食譜募集中</a></li>
 					<li><a target="_blank" href="#">iCook 愛料理暖心食譜募集中</a></li>
 				</ul>
@@ -28,7 +29,13 @@ $recipes-collect-icon: $orange !default;
 
 .recipes-collect {
   li {
+    padding-bottom: 10px;
     position: relative;
+
+    + li {
+      border-top: 1px solid $basic-border;
+      padding-top: 10px;
+    }
   }
 
   a {

data/app/assets/stylesheets/components/sidebars/_sidebar-basic.scss

@@ -0,0 +1,77 @@
+// -------------------------------------------
+// Components - Sidebars - sidebar basic
+// -------------------------------------------
+// default sidebar widget basic style
+
+$sidebar-title: #aa0000 !default;
+$sidebar-link: #5c4544 !default;
+$sidebar-link-hover: #ac8c85 !default;
+$title-link-to-more-text: #888 !default;
+$title-link-to-more-icon: $ic-brown !default;
+$title-link-to-more-hover: $orange !default;
+
+.widget {
+  padding-left: 11px;
+  padding-right: 11px;
+
+  .title {
+    border-bottom: 1px solid $sidebar-title !important;
+    color: $sidebar-title;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0 0 10px;
+    padding-bottom: 10px;
+  }
+
+  ul,
+  ol {
+    list-style-type: none;
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+
+  li {
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    a {
+      color: $sidebar-link;
+      display: block;
+
+      &:hover {
+        color: $sidebar-link-hover;
+      }
+    }
+  }
+}
+
+.widget + .ad {
+  margin-top: 20px;
+
+  iframe {
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.link-to-more {
+  @include icon-b("\f0a9");
+
+  color: $title-link-to-more-text;
+  font-size: 14px;
+
+  &::after {
+    color: $title-link-to-more-icon;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:hover::after {
+    color: $title-link-to-more-hover;
+  }
+}
+

data/app/assets/stylesheets/{widgets/tv → components/sidebars}/_tv-more-recipes.scss

@@ -1,20 +1,20 @@
-// ----------------------------------
-// TV sidebar widgets - more recipes
-// ----------------------------------
+// ----------------------------------------------
+// Components - Sidebars - tv more recipes
+// ----------------------------------------------
 
 /*doc
 ---
-parent: 07_tv_sidebar_widgets
+parent: 17_sidebars
 title: TV more recipes
-name: 07_tv_more_recipes
+name: 11_tv_more_recipes
 ---
 
 <div class="row">
   <div class="col-xs-12 col-sm-4">
-    <div class="inner-block widget widget-tv more-recipes">
+    <div class="inner-block more-recipes">
       <h4 class="title">
         便當食譜
-        <a class="more pull-right" target="_blank" href="#">更多</a>
+        <a class="link-to-more pull-right" target="_blank" href="#">更多</a>
       </h4>
       <div class="media">
         <div class="pull-left">
@@ -60,6 +60,18 @@ name: 07_tv_more_recipes
 $more-recipes-title: $ic-brown !default;
 
 .more-recipes {
+  img {
+    width: 100%;
+  }
+
+  .title {
+    border-bottom: 1px solid $ic-brown;
+    color: $ic-brown;
+    font-size: 16px;
+    margin-top: 0;
+    padding-bottom: 10px;
+  }
+
   .media + .media {
     margin-top: 10px;
   }
@@ -70,11 +82,7 @@ $more-recipes-title: $ic-brown !default;
 
   .pull-left {
     height: 66px;
-    width: 88px;
-  }
-
-  img {
-    width: 100%;
+    width: 98px;
   }
 
   .recipe-name {

data/app/assets/stylesheets/{widgets/tv → components/sidebars}/_tv-popular-tags.scss

@@ -1,17 +1,17 @@
-// ----------------------------------
-// TV sidebar widgets - popular tags
-// ----------------------------------
+// ----------------------------------------------
+// Components - Sidebars - tv popular tags
+// ----------------------------------------------
 
 /*doc
 ---
-parent: 07_tv_sidebar_widgets
+parent: 17_sidebars
 title: TV popular tags
-name: 07_tv_popular_tags
+name: 12_tv_popular_tags
 ---
 
 <div class="row">
   <div class="col-xs-12 col-sm-5">
-    <div class="inner-block widget widget-tv">
+    <div class="inner-block">
       <div class="popular-tags">
         <h4 class="title">熱門主題</h4>
         <ul class="clearfix tags">
@@ -28,22 +28,23 @@ name: 07_tv_popular_tags
 </div>
 */
 
-$tv-widget-title: $ic-brown !default;
 $tag-link: #8c8783 !default;
 $tag-link-bg: #efede8 !default;
 $tag-link-hover: $ic-brown !default;
-$video-tag-bg: #8c8783 !default;
 
-.widget-tv {
+.popular-tags {
   .title {
-    border-bottom: 1px solid $tv-widget-title !important;
-    color: $tv-widget-title;
+    border-bottom: 1px solid $ic-brown;
+    color: $ic-brown;
+    font-size: 16px;
+    margin-top: 0;
+    padding-bottom: 10px;
   }
-}
 
-.popular-tags {
   .tags {
     margin-bottom: -10px;
+    margin-top: 15px;
+    padding-left: 0;
   }
 
   .tag {

data/app/assets/stylesheets/{widgets → components}/users/_fav-list.scss

@@ -6,9 +6,9 @@
 
 /*doc
 ---
-parent: 05_user_sidebar_widgets
+parent: 14_users
 title: User favorites list
-name: fav_list
+name: 02_fav_list
 ---
 
 <div class="row">
@@ -59,10 +59,10 @@ name: fav_list
 $accordion-list-bg: $white !default;
 $accordion-list-title: #efede8 !default;
 $accordion-list-link: #777 !default;
-$accordion-list-link-active: $brown !default;
+$accordion-list-link-active: $ic-brown !default;
 $accordion-list-link-hover-text: $white !default;
 $accordion-list-border: #ebe5e1 !default;
-$accordion-list-button: $brown !default;
+$accordion-list-button: $ic-brown !default;
 
 .accordion-list {
   .navbar-collapse {
@@ -101,11 +101,8 @@ $accordion-list-button: $brown !default;
   }
 
   li {
-    padding: 10px;
-
     a {
       color: $accordion-list-link;
-      padding: 0;
 
       &:hover {
         background-color: transparent;

data/app/assets/stylesheets/{widgets → components}/users/_user-stats.scss

@@ -1,12 +1,12 @@
 // ----------------------------------
-// User sidebar widgets - user stats
+// Components - Users - user stats
 // ----------------------------------
 
 /*doc
 ---
-parent: 05_user_sidebar_widgets
+parent: 14_users
 title: User stats
-name: user_stats
+name: 01_user_stats
 ---
 <div class="row">
   <div class="col-xs-12 col-sm-6">

data/app/assets/stylesheets/{mixins → helpers}/_mixin-alert.scss

@@ -1,15 +1,6 @@
- // --------------------------------
+// --------------------------------
 // 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) {

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

@@ -0,0 +1,11 @@
+// --------------------------------
+// Mixin - animations
+// --------------------------------
+
+// #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 → helpers}/_mixin-badge.scss

@@ -1,6 +1,5 @@
-// 
+// --------------------------------
 // Mixin - badge
-//
 // --------------------------------
 @mixin badge($content, $bg-color) {
   &:after {

data/app/assets/stylesheets/{mixins → helpers}/_mixin-buttons.scss

@@ -1,10 +1,6 @@
-// 
-// Mixin - buttons
-//
-// -------------------------------------
-// * don't forget to import icons mixin 
-// -------------------------------------
-//
+// --------------------------------
+// Mixin - button
+// --------------------------------
 // button without icon
 @mixin btn ($btn-font-size, $btn-font-color, $btn-bg-color) {
   border-radius: 4px;
@@ -16,6 +12,6 @@
 // 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);  
+  @include icon ($icon);
 }
 

data/app/assets/stylesheets/{mixins → helpers}/_mixin-icons.scss

@@ -1,10 +1,8 @@
-//
-// Mixin - icons
-//
 // --------------------------------
-// *use font-awesome icon-font
+// Mixin - icons
 // --------------------------------
-@mixin basic-icon($icon) {  
+// use font-awesome / icon-font
+@mixin basic-icon($icon) {
   content: $icon;
   display: inline-block;
   font-family: FontAwesome;
@@ -14,7 +12,7 @@
   line-height: 1;
   width: 14px;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;   
+  -moz-osx-font-smoothing: grayscale;
 }
 
 @mixin icon($icon) {

data/app/assets/stylesheets/{variables/_color-palette.scss → helpers/_variables-color.scss}

@@ -1,5 +1,5 @@
 // --------------------------------
-// Color Palette
+// Variables - colors
 // --------------------------------
 
 /*doc
@@ -140,7 +140,7 @@ $black: #000 !default;
 $white: #fff !default;
 $orange: #f06354 !default;
 $basic-bg: #efede8 !default;
-$basic-border: #ebe5e1 !default;
+$basic-border: #e2e0db !default;
 
 // iCook main colors
 // variable named with prefix `ic-`

data/app/assets/stylesheets/layouts/{_footer.scss → _base-footer.scss}

@@ -1,12 +1,12 @@
-// --------------------------------
-// Layouts - Footer / base footer
-// --------------------------------
+// -----------------------------------
+// Layouts - Footers - base footer
+// -----------------------------------
 
 /*doc
 ---
-parent: 02_footers
+parent: 03_footers
 title: Base footer
-name: footer
+name: 01_base_footer
 ---
 
 <div class="ic-footers">

data/app/assets/stylesheets/layouts/_footer-nav.scss

@@ -1,12 +1,12 @@
-// --------------------------------
-// Layouts - Footer / mega footer
-// --------------------------------
+// -----------------------------------
+// Layouts - Footers - mega footer
+// -----------------------------------
 
 /*doc
 ---
-parent: 02_footers
+parent: 03_footers
 title: Mega footer
-name: footer_nav
+name: 02_footer_nav
 ---
 
 <div class="ic-footers">

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

@@ -5,8 +5,8 @@
 /*doc
 ---
 title: Footers
-name: 02_footers
-category: modular_widgets
+name: 03_footers
+category: layouts
 ---
 */
 

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

@@ -1,15 +1,15 @@
-// --------------------------------
-// Layouts - Global navigation
-// --------------------------------
+// -----------------------------------------
+// Layouts - Headers - global navigation
+// -----------------------------------------
 
 /*doc
 ---
-parent: 01_headers
+parent: 02_headers
 title: Global navigation
-name: global_navbar
+name: 01_global_navbar
 ---
 
-> Primary header<br/><small>a.k.a. iCook-navbar which is on multiple sites as global header.</small>
+> Primary header<br/><small>a.k.a. icook-navbar which is on multiple sites as global header.</small>
 
 <div class="ic-header">
   <div class="ic-highlight">Note this is already made as a gem-used application. check this: <a href="https://github.com/polydice/icook-navbar" target="_blank">polydice/icook-navbar</a> on github.</div>