cupboard 0.2.0

data/app/assets/stylesheets/widgets/_brand-sidebar-widgets.scss

@@ -0,0 +1,11 @@
+// ----------------------
+// Brand sidebar widgets
+// ----------------------
+
+/*doc
+---
+title: Brand sidebar widgets
+name: 06_brand_sidebar_widgets
+category: modular_widgets
+---
+*/

data/app/assets/stylesheets/widgets/_recipe-mark.scss

@@ -0,0 +1,55 @@
+//
+// Widgets - recipe mark
+//
+// --------------------------
+// # tv - widget
+.recipe-mark {
+  ul {
+    margin-bottom: 0;
+  }
+
+  li {
+    border-top: 1px solid #efede8;
+    padding: 10px 0;
+
+    .num {
+      margin-right: 4px;
+    }
+
+    &:hover {
+      a {
+        color: #aaa;
+        text-decoration: underline;
+      }
+
+      .num {
+        @include border-radius(8px);
+
+        background-color: #aaa;
+        color: #fff;
+        padding: 1px 4px;
+      }
+    }
+
+    &:first-child {
+      border-top: 0;
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  
+    & > a > span:last-child {
+      font-size: 12px;
+    }
+
+    a {
+      color: #888;
+      display: block;
+      font-size: 14px;
+      line-height: 14px;
+      position: relative;
+    }
+  }
+}

data/app/assets/stylesheets/widgets/_sidebar-widgets.scss

@@ -0,0 +1,11 @@
+// -----------------------------------
+// Sidebar widgets
+// -----------------------------------
+
+/*doc
+---
+title: Sidebar widgets
+name: 04_sidebar_widgets
+category: modular_widgets
+---
+*/

data/app/assets/stylesheets/widgets/_tv-sidebar-widgets.scss

@@ -0,0 +1,11 @@
+// ----------------------
+// TV sidebar widgets
+// ----------------------
+
+/*doc
+---
+title: TV sidebar widgets
+name: 07_tv_sidebar_widgets
+category: modular_widgets
+---
+*/

data/app/assets/stylesheets/widgets/_user-sidebar-widgets.scss

@@ -0,0 +1,11 @@
+// -----------------------------------
+// User sidebar widgets
+// -----------------------------------
+
+/*doc
+---
+title: User sidebar widgets
+name: 05_user_sidebar_widgets
+category: modular_widgets
+---
+*/

data/app/assets/stylesheets/widgets/_widgets.scss

@@ -0,0 +1,11 @@
+// ----------------------------
+// Widgets
+// ----------------------------
+
+/*doc
+---
+title: Widgets
+name: 03_widgets
+category: modular_widgets
+---
+*/

data/app/assets/stylesheets/widgets/brands/_pr-ingredients.scss

@@ -0,0 +1,154 @@
+@import "compass/typography/text/ellipsis";
+@import "compass/css3/images";
+
+// ---------------------------------------
+// Brand sidebar widgets - pr ingredients
+// ---------------------------------------
+
+/*doc
+---
+parent: 06_brand_sidebar_widgets
+title: Pr ingredients
+name: pr_ingredients
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <div class="inner-block widget">
+      <div class="pr-ingredients">
+        <h4 class="title">推薦食材</h4>
+        <ul>
+          <li>
+            <span></span>
+            <a href="#">
+              <div class="mark">營養麵條</div>
+            </a>
+          </li>
+          <li>
+            <span></span>
+            <a href="#">
+              <div class="mark">花椰菜</div>
+            </a>
+          </li>
+          <li>
+            <span></span>
+            <a href="#">
+              <div class="mark">蛋</div>
+            </a>
+          </li>
+          <li>
+            <span></span>
+            <a href="#">
+              <div class="mark">牛肉</div>
+            </a>
+          </li>
+          <li>
+            <span></span>
+            <a href="#">
+              <div class="mark">鮭魚</div>
+            </a>
+          </li>
+          <li>
+            <span></span>
+            <a href="#">
+              <div class="mark">五花肉</div>
+            </a>
+          </li>
+          <li>
+            <span></span>
+            <a href="#">
+              <div class="mark">雞肉</div>
+            </a>
+          </li>
+        </ul>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+$pr-ingredients-round: #aa0000 !default;
+$pr-ingredients-border: $basic-border !default;
+$pr-ingredients-bg: $white !default;
+$pr-ingredients-tag-bg: $white !default;
+$pr-ingredients-tag-text: #5c4545 !default;
+$pr-ingredients-tag-border: #ccc !default;
+
+.pr-ingredients {
+  @include background-image(image-url("/images/section_bg.jpg"));
+
+  background-repeat: repeat;
+  border: 1px solid $pr-ingredients-border;
+  padding: 10px;
+
+  span {
+    @include icon("\f111");
+
+    background-color: $pr-ingredients-round;
+    display: block;
+    height: 22px;
+    left: -4px;
+    position: absolute;
+    top: 2px;
+    width: 4px;
+    z-index: 2;
+
+    &::before {
+      color: $pr-ingredients-round;
+      float: left;
+      font-size: 12px;
+      height: 14px;
+      left: 1px;
+      margin-right: 0;
+      position: absolute;
+      text-decoration: inherit;
+      top: 5px;
+      width: 14px;
+    }
+  }
+
+  ul {
+    background-color: $pr-ingredients-bg;
+    margin-bottom: 0;
+    padding: 10px 10px 0;
+  }
+
+  li {
+    border-bottom: 0;
+    display: inline-block;
+    margin-bottom: 5px;
+    margin-right: 10px;
+    padding: 0;
+    position: relative;
+
+    &:hover span {
+      background-color: $pr-ingredients-round;
+
+      &::before {
+        color: $pr-ingredients-round;
+      }
+    }
+  }
+
+  a {
+    display: block;
+    line-height: 14px;
+  }
+
+  .mark {
+    @include ellipsis;
+
+    background-color: $pr-ingredients-tag-bg;
+    border: 1px solid $pr-ingredients-tag-border;
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+    color: $pr-ingredients-tag-text;
+    float: left;
+    max-width: 200px;
+    padding: 5px 15px;
+    position: relative;
+    word-break: break-word;
+  }
+}
+

data/app/assets/stylesheets/widgets/brands/_pr-latest.scss

@@ -0,0 +1,62 @@
+// -----------------------------------
+// Brand sidebar widgets - pr latest
+// -----------------------------------
+
+/*doc
+---
+parent: 06_brand_sidebar_widgets
+title: Pr latest
+name: pr_latest
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+		<div class="inner-block widget">
+			<div class="pr-latest">
+				<h4 class="title">最新活動</h4>
+				<div>
+					<p>
+					  愛料理 x 寶寶副食品募集<br>
+						<span>
+							截止時間：2016年08月17日<br>
+							活動辦法：參加食品募集活動再抽東京雙人機票、手機等大獎!
+						</span>
+					</p>
+					<a class="btn btn-default" target="_blank" href="#">我要報名參加</a>
+				</div>
+			</div>
+		</div>
+  </div>
+</div>
+
+*/
+
+$pr-latest-bg: #eeede8 !default;
+$pr-latest-title: #5c4545 !default;
+$pr-latest-text: #666 !default;
+
+.pr-latest {
+  > div {
+    background-color: $pr-latest-bg;
+    padding: 10px;
+
+    p {
+      color: $pr-latest-title;
+      font-size: 15px;
+    }
+
+    span {
+      color: $pr-latest-text;
+      display: inline-block;
+      font-size: 11px;
+      line-height: 20px;
+      margin-top: 5px;
+    }
+  }
+
+  .btn {
+    margin-bottom: 10px;
+    width: 100%;
+  }
+}
+

data/app/assets/stylesheets/widgets/brands/_pr-popular-recipe-lists.scss

@@ -0,0 +1,51 @@
+// -----------------------------------
+// Brand sidebar widgets - pr recent
+// -----------------------------------
+
+/*doc
+---
+parent: 06_brand_sidebar_widgets
+title: Pr popular recipe lists
+name: pr_popular_recipe_lists
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <div class="inner-block widget">
+      <div class="popular-recipe-lists">
+        <h4 class="title">精選清單</h4>
+        <ul>
+          <li>
+            <a class="media clearfix" href="#">
+              <span class="media-body">
+                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
+                <span>愛料理食驗室</span>
+              </span>
+              <span class="text-right pull-right">22 道食譜</span>
+            </a>
+          </li>
+          <li>
+            <a class="media clearfix" href="#">
+              <span class="media-body">
+                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
+                <span>愛料理廚房</span>
+              </span>
+              <span class="text-right pull-right">110 道食譜</span>
+            </a>
+          </li>
+          <li>
+            <a class="media clearfix" href="#">
+              <span class="media-body">
+                <img class="pull-left img-responsive" src="/images/recipe-default.png" alt="">
+                <span>寶寶副食品募集</span>
+              </span>
+              <span class="text-right pull-right">65 道食譜</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+

data/app/assets/stylesheets/widgets/brands/_pr-recent.scss

@@ -0,0 +1,59 @@
+// -----------------------------------
+// Brand sidebar widgets - pr recent
+// -----------------------------------
+
+/*doc
+---
+parent: 06_brand_sidebar_widgets
+title: Pr recent
+name: pr_recent
+---
+
+<div class="row">
+	<div class="col-xs-12 col-sm-6">
+		<div class="inner-block widget">
+			<div class="pr-recent">
+				<h4 class="title">近期活動</h4>
+				<ul>
+					<li class="clearfix">
+						<a href="#">烘焙展中西烘焙大對決</a>
+					</li>
+					<li class="clearfix">
+						<a href="#">寶寶副食品募集</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+  </div>
+</div>
+*/
+
+$pr-recent-link: #5c4545 !default;
+$pr-recent-title: #888 !default;
+
+.pr-recent {
+  li {
+    padding-top: 10px;
+  }
+
+  a {
+    @include ellipsis;
+
+    color: $pr-recent-link;
+    display: inline-block;
+    float: left;
+    letter-spacing: 0.05em;
+    max-width: 74%;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  span {
+    color: $pr-recent-title;
+    float: right;
+    font-size: 11px;
+  }
+}
+