cupboard 0.2.0

data/app/assets/stylesheets/components/navigations/_tv-nav.scss

@@ -0,0 +1,283 @@
+// --------------------------------
+// Navigation - tv
+// --------------------------------
+
+/*doc
+---
+parent: 08_navigations
+title: TV navigation
+name: tv_navigation
+---
+
+<div class="tv-nav">
+  <div class="navba tv-series">
+    <div class="navbar-header">
+      <a href="#" class="title hidden-xs"><span>愛料理 TV</span><span>35</span></a>
+      <button type="button" class="navbar-toggle in collapsed" data-target="#series-collapse" data-toggle="collapse" aria-expanded="false">愛料理 TV</button>
+    </div>
+    <div class="navbar-collapse collapse" id="series-collapse">
+      <ul class="nav navbar-nav">
+        <li class="visible-xs"><a href="#">全系列</a></li>
+        <li>
+          <a class="clearfix" href="#">
+            <span><span class="item">早午餐</span><span class="num visible-xs">5</span></span>
+          </a>
+        </li>
+        <li>
+          <a class="clearfix" href="#">
+            <span><span class="item">義大利麵</span><span class="num visible-xs">5</span></span>
+          </a>
+        </li>
+        <li>
+          <a class="clearfix" href="#">
+            <span><span class="item">歐陸家常菜</span><span class="num visible-xs">5</span></span>
+          </a>
+        </li>
+        <li>
+          <a class="clearfix" href="#">
+            <span><span class="item">甜蜜午茶</span><span class="num visible-xs">5</span></span>
+          </a>
+        </li>
+        <li>
+          <a class="clearfix" href="#">
+            <span><span class="item">在地台灣味</span><span class="num visible-xs">5</span></span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+```html_example
+<div class="tv-nav">
+  <div class="navba tv-series">
+    <div class="navbar-header">
+      <a href="#" class="title hidden-xs"><span>愛料理 TV</span><span>35</span></a>
+      <button type="button" class="navbar-toggle in collapsed" data-target="#series-collapse" data-toggle="collapse" aria-expanded="false">愛料理 TV</button>
+    </div>
+    <div class="navbar-collapse collapse" id="series-collapse">
+      <ul class="nav navbar-nav">
+        <li class="visible-xs"><a href="#">全系列</a></li>
+        <li>
+          <a class="clearfix" href="#">
+            <span>
+              <span class="item">早午餐</span>
+              <span class="num visible-xs">5</span>
+            </span>
+          </a>
+        </li>
+        <li class="active">
+          <a class="clearfix" href="#">
+            <span>
+              <span class="item">義大利麵</span>
+              <span class="num visible-xs">5</span>
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+```
+
+*/
+
+$tv-series-text: #5c4545 !default;
+$tv-series-bar: #acacac !default;
+$tv-series-bg: #5c4545 !default;
+$tv-series-link: #aaa !default;
+$tv-series-link-active: $orange !default;
+
+.tv-series {
+  background-color: $white;
+  border: 0;
+  border-radius: 0;
+  margin-bottom: 15px;
+  margin-top: 20px;
+  min-height: 100%;
+  overflow: hidden;
+  padding: 0;
+
+  a {
+    font-size: 16px;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .title {
+    color: $tv-series-text;
+    float: left;
+    font-size: 16px;
+    margin: 0 20px;
+
+    &::after {
+      content: "|";
+      color: $tv-series-bar;
+      font-size: 14px;
+      position: relative;
+      right: -3px;
+      top: -1px;
+    }
+
+    span + span {
+      border-radius: 6px;
+      background-color: $tv-series-bg;
+      color: $white;
+      font-size: 11px;
+      margin-left: 10px;
+      margin-right: 10px;
+      padding: 1px 5px;
+      position: relative;
+      top: -2px;
+    }
+  }
+
+  .navbar-collapse {
+    max-height: 100%; //override bootstrap's default max height
+    padding: 0;
+  }
+
+  .navbar-toggle {
+    @include icon-b("\f0d8");
+
+    color: $tv-series-text;
+    font-size: 14px;
+    margin: 0;
+    padding: 8px 20px;
+    text-align: left;
+    width: 100%;
+
+    &::after {
+      font-size: 20px;
+      height: 14px;
+      margin-left: 5px;
+      margin-right: 0;
+      position: absolute;
+      right: 14px;
+      top: 10px;
+      width: 14px;
+    }
+
+    &.collapsed::after {
+      content: "\f0d7";
+    }
+  }
+
+  .navbar-header {
+    margin-top: 19px;
+
+    > a:hover span:first-child {
+      text-decoration: underline;
+    }
+  }
+
+  .navbar-nav {
+    > li > a {
+      color: $tv-series-link;
+      margin-right: 15px;
+      padding: 20px 0 20px;
+      position: relative;
+
+      &::after {
+        @include ease-in-out(.5s);
+
+        border-bottom: 3px solid $tv-series-link;
+        bottom: -3px;
+        content: "";
+        height: 1px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+
+      &:hover {
+        background-color: transparent;
+
+        &::after {
+          @include ease-in-out(.5s);
+          bottom: 0;
+        }
+      }
+    }
+
+    > .active > a {
+      color: $tv-series-link-active;
+
+      &::after {
+        border-color: $tv-series-link-active;
+        bottom: 0;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .tv-series {
+    margin-top: 10px;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .tv-series {
+    border-bottom: 1px solid #ebe5e1;
+    margin-bottom: 0;
+
+    .navbar-collapse {
+     background-color: #fafaf8;
+    }
+
+    .navbar-header {
+      float: none;
+      margin-top: 0;
+    }
+
+    .navbar-nav {
+      margin: 0;
+
+      & > li > a {
+        display: block;
+        font-size: 14px;
+        height: 37px;
+        margin-right: 0;
+        padding: 8px 20px;
+
+        &:after {
+          border-bottom: 0;
+        }
+      }
+
+      li {
+        border-top: 1px solid #ebe5e1;
+
+        &.active a {
+          color: #aa8f83;
+        }
+ 
+        & > a:hover,
+        & > a:hover .item {
+          text-decoration: underline;
+        }
+
+        &.active > a .num,
+        & > a:hover .num {
+          border-radius: 6px;
+          background-color: #aaa;
+          color: #fff;
+          padding: 0 4px;
+        }
+
+        & > a .num {
+          display: inline-block !important;
+          float: right;
+        }
+
+        &.active > a .num {
+          background-color: #aa8f83;
+        }
+      }
+    }
+  }
+}
+

data/app/assets/stylesheets/components/recipes/_ingredients.scss

@@ -0,0 +1,223 @@
+// --------------------------------
+// Recipe components - ingredients
+// --------------------------------
+
+/*doc
+---
+name: 22_recipe_ingredients
+title: Recipe ingredients
+category: UI components
+---
+
+<div>&nbsp;</div>
+<div class="recipe-detail clearfix">
+  <div class="col-xs-12 col-md-4">
+    <div class="recipe-ingredients">
+      <small>group-0</small>
+      <h3 class="clearfix">
+        <span class="pull-left">食材（<span>5 人份</span>）</span>
+        <span class="pull-right"><span class="time">20 分鐘</span></span>
+      </h3>
+      <div class="ingredients">
+        <div class="group group-0">
+          <div class="clearfix ingredient" itemprop="ingredients">
+            <span class="pull-left ingredient-name">白蘿蔔</span>
+            <span class="pull-right ingredient-unit">1條</span>
+          </div>
+          <div class="clearfix ingredient" itemprop="ingredients">
+            <span class="pull-left ingredient-name">鹽</span>
+            <span class="pull-right ingredient-unit">1大匙</span>
+          </div>
+        </div>
+        <div class="group group-1">
+          <div class="group-name">醃料</div>
+          <div class="clearfix ingredient" itemprop="ingredients">
+            <span class="pull-left ingredient-name">糯米醋</span>
+            <span class="pull-right ingredient-unit">1杯</span>
+          </div>
+          <div class="clearfix ingredient" itemprop="ingredients">
+            <span class="pull-left ingredient-name">白砂糖</span>
+            <span class="pull-right ingredient-unit">1杯</span>
+          </div>
+          <div class="clearfix ingredient" itemprop="ingredients">
+            <span class="pull-left ingredient-name">常溫開水</span>
+            <span class="pull-right ingredient-unit">1杯</span>
+          </div>
+          <div class="clearfix ingredient" itemprop="ingredients">
+            <span class="pull-left ingredient-name">韓式辣椒粉</span>
+            <span class="pull-right ingredient-unit">半杯</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-sm-4">
+    group colors<br/>
+    <small>group-1</small>
+    <div class="group group-1">
+      <div class="group-name">醃料</div>
+    </div>
+    <small>group-2</small>
+    <div class="group group-2">
+      <div class="group-name">醃料</div>
+    </div>
+    <small>group-3</small>
+    <div class="group group-3">
+      <div class="group-name">醃料</div>
+    </div>
+    <small>group-4</small>
+    <div class="group group-4">
+      <div class="group-name">醃料</div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-sm-4">
+    <br/>
+    <small>group-5</small>
+    <div class="group group-5">
+      <div class="group-name">醃料</div>
+    </div>
+    <small>group-6</small>
+    <div class="group group-6">
+      <div class="group-name">醃料</div>
+    </div>
+    <small>group-7</small>
+    <div class="group group-7">
+      <div class="group-name">醃料</div>
+    </div>
+    <small>group-8</small>
+    <div class="group group-8">
+      <div class="group-name">醃料</div>
+    </div>
+  </div>
+</div>
+*/
+
+// ingredient
+$ingredient-group1-text: #3c4e3c !default;
+$ingredient-group1-bg: #d8f0d8 !default;
+$ingredient-group2-text: #0b0045 !default;
+$ingredient-group2-bg: #d3d7eb !default;
+$ingredient-group3-text: #000046 !default;
+$ingredient-group3-bg: #daecf4 !default;
+$ingredient-group4-text: #500000 !default;
+$ingredient-group4-bg: #f5dcdc !default;
+$ingredient-group5-text: #463200 !default;
+$ingredient-group5-bg: #fdecd3 !default;
+$ingredient-group6-text: #003b22 !default;
+$ingredient-group6-bg: #d8f0e6 !default;
+$ingredient-group7-text: #4b0050 !default;
+$ingredient-group7-bg: #f6e3fb !default;
+$ingredient-group8-text: #50291b !default;
+$ingredient-group8-bg: #fad6c8 !default;
+$recipe-detail-border: $basic-border !default;
+$recipe-detail-text: #888 !default;
+// recipe-detail
+$recipe-detail-title: $ic-brown !default;
+$recipe-detail-title-border: $basic-border !default;
+$recipe-detail-time: #888 !default;
+$recipe-notes-bg: #fefee5 !default;
+$recipe-notes-border: #fee59a !default;
+$recipe-notes-text: #666 !default;
+
+@each $group, $color, $background in
+  (1, $ingredient-group1-text, $ingredient-group1-bg),
+  (2, $ingredient-group2-text, $ingredient-group2-bg),
+  (3, $ingredient-group3-text, $ingredient-group3-bg),
+  (4, $ingredient-group4-text, $ingredient-group4-bg),
+  (5, $ingredient-group5-text, $ingredient-group5-bg),
+  (6, $ingredient-group6-text, $ingredient-group6-bg),
+  (7, $ingredient-group7-text, $ingredient-group7-bg),
+  (8, $ingredient-group8-text, $ingredient-group8-bg) {
+
+  .group-#{$group} .group-name,
+  .steps .group-#{$group} {
+    background-color: $background;
+  }
+
+  .steps .group-#{$group} {
+    border-radius: 10px;
+    color: $color;
+    padding: 0 6px;
+  }
+
+  .recipe-detail {
+    .group-#{$group} {
+      border: 1px solid $background;
+
+      .group-name {
+        color: $color;
+        padding: 10px;
+      }
+
+      .ingredient {
+        margin-left: 10px;
+        margin-right: 10px;
+
+        &:last-child {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.recipe-detail {
+  .ingredient {
+    border-bottom: 1px solid $recipe-detail-border;
+    color: $recipe-detail-text;
+    line-height: 1.2;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    text-align: left;
+  }
+
+  .ingredient-name {
+    max-width: 75%;
+  }
+
+  .group {
+    margin-top: 10px;
+  }
+
+  .group-0 .ingredient:first-child {
+    padding-top: 0;
+  }
+
+  h3 {
+    border-bottom: 1px solid $recipe-detail-title;
+    color: $recipe-detail-title;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 0;
+    padding-bottom: 5px;
+  }
+
+  .time {
+    @include icon("\f017");
+
+    color: $recipe-detail-time;
+  }
+
+
+  .notes {
+    background-color: $recipe-notes-bg;
+    border-top: 4px solid $recipe-notes-border;
+    margin-top: 15px;
+    padding: 20px 30px;
+
+    h3 {
+      border-bottom: 0;
+      font-size: 20px;
+      line-height: 22px;
+      padding-bottom: 20px;
+    }
+
+    p {
+      color: $recipe-notes-text;
+      font-size: 16px;
+      margin-bottom: 0;
+      word-wrap: break-word;
+    }
+  }
+
+}