cupboard 0.2.0

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

@@ -0,0 +1,34 @@
+// -----------------------------------
+// Brand sidebar widgets - pr video
+// -----------------------------------
+
+/*doc
+---
+parent: 06_brand_sidebar_widgets
+title: Pr video
+name: pr_video
+---
+
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+		<div class="inner-block widget">
+      <div class="pr-video">
+        <h4 class="title new">最新影音</h4>
+        <div>
+          <iframe width="480" height="270" src="https://www.youtube.com/embed/videoseries?list=PLR0a51zoW3m5-QNgtFeRmv7Rv2s9tVGPv" frameborder="0" allowfullscreen=""></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+*/
+
+.pr-video {
+  iframe {
+    height: 185px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+

data/app/assets/stylesheets/widgets/features/_feature-events.scss

@@ -0,0 +1,119 @@
+@import "compass/typography/text/ellipsis";
+
+// ----------------------------
+// Widgets - feature events
+// ----------------------------
+
+/*doc
+---
+parent: 03_widgets
+title: Feature events
+name: 2_feature_events
+---
+
+<div class="row">
+  <div class="col-xs-12 col-md-9">
+    <div class="feature-events">
+      <ul>
+        <li>
+          <a href="#">
+            <span>維力「醬心獨具，好味料理！」炸醬食譜募集</span>
+            <span class="pull-right">2015/05/07 截止</span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>泰山親子料理趣，上傳親子食譜拿大獎!</span>
+            <span class="pull-right">2015/05/31 截止</span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>麵穿越 不思議 ! 懸賞古早味麵食變身王</span>
+            <span class="pull-right">2015/06/07 截止</span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>暖心深夜食堂食譜募集，萬元鍋具等妳帶回家</span>
+            <span class="pull-right">募集結束</span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>味丹真麵堂料理募集，把LC鑄鐵鍋帶回家！</span>
+            <span class="pull-right">募集結束</span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span>淬釀開運食譜大募集 商品索取試用中！</span>
+            <span class="pull-right">募集結束</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+*/
+
+$feature-event-link: #888 !default;
+$feature-event-link-bg: #fffcf0 !default;
+$feature-event-link-hover: $ic-brown !default;
+$feature-event-deadline: $orange !default;
+
+.feature-events {
+  ul,
+  li {
+    list-style-type: none;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  li {
+    a {
+      color: $feature-event-link;
+      display: block;
+      font-size: 15px;
+      padding: 10px 15px 5px;
+    }
+
+    + li {
+      border-top: 1px solid $basic-border;
+    }
+
+    &:hover {
+      background-color: $feature-event-link-bg;
+
+      a {
+        color: $feature-event-link-hover;
+        text-decoration: none;
+      }
+    }
+
+    &.deadline {
+      span.pull-right {
+        color: $feature-event-deadline;
+      }
+    }
+
+    span {
+      line-height: 15px;
+
+      &:not(.pull-right) {
+        @include ellipsis;
+
+        display: inline-block;
+        width: 75%;
+      }
+
+      &.pull-right {
+        font-size: 13px;
+        margin-top: 2px;
+      }
+    }
+  }
+}
+

data/app/assets/stylesheets/widgets/features/_feature-slides.scss

@@ -0,0 +1,144 @@
+@import "compass/typography/text/ellipsis";
+
+// ----------------------------
+// Widgets - feature slides
+// ----------------------------
+
+/*doc
+---
+parent: 03_widgets
+title: Feature slides
+name: 1_feature_slides
+---
+
+<div class="row">
+  <div class="col-md-9">
+    <div class="feature-slides">
+      <ul class="pictures pull-left">
+        <li class="current" id="recipe_slide_0_pic">
+          <a href="#"><img alt="5分鐘酒蒸蛤蜊" src="/images/recipe-default.png"></a>
+
+        </li>
+        <li class="hidden" id="recipe_slide_1_pic">
+          <a href="#"><img alt="蔬菜煎餅" src="/images/recipe-default.png"></a>
+        </li>
+        <li class="hidden" id="recipe_slide_2_pic">
+          <a href="#"><img alt="蕃茄蔬菜麵" src="/images/recipe-default.png"></a>
+        </li>
+        <li class="hidden" id="recipe_slide_3_pic">
+          <a href="#"><img alt="鮮蝦水果沙拉" src="/images/recipe-default.png"></a>
+        </li>
+        <li class="hidden" id="recipe_slide_4_pic">
+          <a href="#"><img alt="自製芝麻油沙拉酱" src="/images/recipe-default.png"></a>
+        </li>
+      </ul>
+      <div class="featured-recipe-links">
+        <div class="slides">
+          <ul class="slide-tite">
+            <li id="recipe_slide_0" class="current">
+              <a href="#"><span>5分鐘酒蒸蛤蜊</span></a>
+            </li>
+            <li id="recipe_slide_1" class="">
+              <a href="#"><span>蔬菜煎餅</span></a>
+            </li>
+            <li id="recipe_slide_2" class="">
+              <a href="#"><span>蕃茄蔬菜麵</span></a>
+            </li>
+            <li id="recipe_slide_3" class="">
+              <a href="#"><span>鮮蝦水果沙拉</span></a>
+            </li>
+            <li id="recipe_slide_4" class="">
+              <a href="#"><span>自製芝麻油沙拉酱</span></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+$featured-recipe-link: #888 !default;
+$featured-recipe-link-current: #ac8c85 !default;
+
+.feature-slides {
+  padding-top: 5px;
+  overflow: hidden;
+
+  ul,
+  li {
+    list-style-type: none;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  .pictures {
+    max-height: 210px;
+    overflow: hidden;
+    width: 50%;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+.featured-recipe-links {
+  a {
+    @include ellipsis;
+
+    color: $featured-recipe-link;
+    display: block;
+    font-size: 16px;
+    height: 48px;
+    line-height: 1.1;
+    padding: 15px 0;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  li {
+    + li a {
+      border-top: 1px solid $basic-border;
+    }
+
+    &:first-child a {
+      height: 33px;
+      padding-top: 0;
+    }
+
+    &:last-child a {
+      height: 33px;
+      padding-bottom: 0;
+    }
+
+    &.current a,
+    &:hover a {
+      @include icon("\f0da");
+
+      color: $ic-brown;
+      text-decoration: none;
+
+      &::before {
+        color: $featured-recipe-link-current;
+        font-size: 18px;
+        width: 10px;
+      }
+    }
+  }
+
+  .slides {
+    float: right;
+    width: 47.4%;
+
+    ul {
+      list-style: none;
+    }
+  }
+}

data/app/assets/stylesheets/widgets/feeds/_blog-feeds.scss

@@ -0,0 +1,144 @@
+// -------------------------------
+// Widgets - feature feeds / blog
+// -------------------------------
+
+/*doc
+---
+parent: 03_widgets
+title: Feature feeds - blog feeds
+name: 3_blog_feeds
+---
+
+<div class="row">
+  <div class="col-xs-12">
+    <div class="channel-feeds inner-block">
+      <h3 class="feeds-title">愛料理生活誌<a class="link-to-more pull-right" href="#" target="_blank">更多文章</a>
+      </h3>
+      <div id="rss-viewer" class="full rss-viewer">
+        <ul class="clearfix">
+          <li>
+            <div class="feed">
+              <a href="#" title="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹">
+                <span class="img">
+                  <img alt="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹" src="/images/recipe-default.png">
+                </span>
+                <span>【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹</span>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="feed">
+              <a href="#" title="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹">
+                <span class="img">
+                  <img alt="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹" src="/images/recipe-default.png"
+                ></span>
+                <span>【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹</span>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="feed">
+              <a href="#" title="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹">
+                <span class="img">
+                  <img alt="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹" src="/images/recipe-default.png">
+                </span>
+                <span>【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹</span>
+              </a>
+            </div>
+          </li>
+          <li>
+            <div class="feed">
+              <a href="#" title="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹">
+                <span class="img">
+                  <img alt="【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹" src="/images/recipe-default.png">
+                </span>
+                <span>【秋之蟹逅】輕鬆吃蟹－挑蟹、殺蟹、煮蟹</span>
+              </a>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+*/
+
+$recipe-channel-feeds-title: $ic-brown !default;
+$recipes-feature-spot-border: $basic-border !default;
+$recipes-feature-spot-link-to-more: #888 !default;
+$recipes-feature-spot-link-to-more-icon: $ic-brown !default;
+$recipes-feature-spot-link-to-more-hover: $orange !default;
+
+.channel-feeds {
+  h3 {
+    border-bottom: 1px solid $recipe-channel-feeds-title;
+    color: $recipe-channel-feeds-title;
+    font-size: 16px;
+    margin-bottom: 15px;
+    margin-top: 0;
+    padding-bottom: 15px;
+  }
+
+  ul {
+    margin-bottom: 0;
+    padding-left: 0;
+  }
+
+  li {
+    float: left;
+    list-style-type: none;
+    // max-width: 172px;
+    width: 24%;
+
+    + li {
+      margin-left: 1.33%;
+    }
+  }
+
+  a,
+  span {
+    color: $recipe-channel-feeds-title;
+    display: block;
+  }
+
+  .img {
+    height: 110px;
+    margin-bottom: 10px;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  span:not(.img) {
+    display: block;
+    height: 2.8em;
+    overflow: hidden;
+  }
+
+  .ie & li {
+    width: 23.8%;
+  }
+}
+
+.link-to-more {
+  @include icon-b("\f0a9");
+
+  color: $recipes-feature-spot-link-to-more;
+  font-size: 14px;
+
+  &::after {
+    color: $recipes-feature-spot-link-to-more-icon;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:hover::after {
+    color: $recipes-feature-spot-link-to-more-hover;
+  }
+}
+

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

@@ -0,0 +1,143 @@
+// -------------------------------
+// Widgets - feature feeds / tv
+// -------------------------------
+
+/*doc
+---
+parent: 03_widgets
+title: Feature feeds - tv feeds
+name: 4_tv_feeds
+---
+
+<div class="row">
+  <div class="col-xs-12">
+    <div class="channel-feeds inner-block">
+      <h3>愛料理 TV <a target="_blank" class="link-to-more pull-right" href="https://tv.icook.tw/">更多影音</a>
+      </h3>
+      <div id="rss-viewer" class="full rss-viewer">
+        <ul class="clearfix">
+          <li>
+            <a title="繽紛水果氣泡水" class="video" target="_blank" href="#">
+              <div>
+                <div class="length">0:43</div>
+                <span class="img">
+                  <img src="/images/recipe-default.png" alt="">
+                </span>
+                <div class="mask"></div>
+              </div>
+              <span>酸甜水果滋味，最夯消暑飲品！</span>
+            </a>
+          </li>
+          <li>
+            <a title="涼拌小黃瓜" class="video" target="_blank" href="#">
+              <div>
+                <div class="length">1:12</div>
+                <span class="img">
+                  <img src="/images/recipe-default.png" alt="">
+                </span>
+                <div class="mask"></div>
+              </div>
+              <span>炎炎夏日開胃首選，拌一拌就完成！</span>
+            </a>
+          </li>
+          <li>
+            <a title="巧克力雪糕" class="video" target="_blank" href="#">
+              <div>
+                <div class="length">4:45</div>
+                <span class="img">
+                  <img src="/images/recipe-default.png" alt="">
+                </span>
+                <div class="mask"></div>
+              </div>
+              <span>不需冰淇淋機！香甜綿密的迷人口感</span>
+            </a>
+          </li>
+          <li>
+            <a title="芋圓地瓜圓" class="video" target="_blank" href="#">
+              <div>
+                <div class="length">8:44</div>
+                <span class="img">
+                  <img src="/images/recipe-default.png" alt="">
+                </span>
+                <div class="mask"></div>
+              </div>
+              <span>冰品必備配料！手作Q彈安心吃</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+*/
+
+$recipe-channel-feeds-tv-mask-bg: rgba(86, 78, 73, 0.4) !default;
+$recipe-channel-feeds-tv-mask-icon: $white !default;
+$recipe-channel-feeds-tv-length-bg: rgba(86, 78, 73, 0.8) !default;
+$recipe-channel-feeds-tv-length-text: $white !default;
+
+.channel-feeds {
+  .mask {
+    @include icon("\f04b");
+    background-color: $recipe-channel-feeds-tv-mask-bg;
+    display: none;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+
+    &::before {
+      border: 2px solid $recipe-channel-feeds-tv-mask-icon;
+      border-radius: 50%;
+      color: $recipe-channel-feeds-tv-mask-icon;
+      font-size: 20px;
+      font-weight: lighter;
+      height: 40px;
+      line-height: 36px;
+      margin-right: 0;
+      padding-left: 3px;
+      position: relative;
+      top: 34%;
+      width: 40px;
+    }
+  }
+
+  .length {
+    background-color: $recipe-channel-feeds-tv-length-bg;
+    bottom: 10px;
+    color: $recipe-channel-feeds-tv-length-text;
+    font-size: 12px;
+    left: 10px;
+    padding: 3px 11px 2px;
+    position: absolute;
+    text-align: center;
+    z-index: 3;
+  }
+
+  .video {
+    > div {
+      overflow: visible;
+      position: relative;
+    }
+
+    &:hover {
+      text-decoration: none;
+
+      .mask {
+        display: block;
+      }
+    }
+
+    span:not(.img) {
+      @include ellipsis;
+
+      height: 2.8em;
+      white-space: normal;
+      width: 100%;
+    }
+  }
+}