vuejs · kazupon · Oct 1, 2017 · Sep 30, 2017 · Oct 1, 2017
diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md
diff --git a/themes/vue/layout/layout.ejs b/themes/vue/layout/layout.ejs
@@ -1,4 +1,5 @@
 <% var isIndex = page.path === 'index.html' %>
+
 <!DOCTYPE html>
 <html lang="ja">
   <head>

diff --git a/themes/vue/layout/partials/learn_dropdown.ejs b/themes/vue/layout/partials/learn_dropdown.ejs
@@ -4,6 +4,7 @@
     <li><ul>
       <li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">ガイド</a></li>
       <li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
+      <li><a href="<%- url_for("/v2/style-guide/") %>" class="nav-link<%- page.path.match(/\/style-guide(\/|$)/) ? ' current' : '' %>">スタイルガイド</a></li>
       <li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">例</a></li>
     </ul></li>
   </ul>

diff --git a/themes/vue/layout/partials/sidebar.ejs b/themes/vue/layout/partials/sidebar.ejs
@@ -18,10 +18,12 @@
           ガイド
         <% } else if (type === 'api') { %>
           API
+        <% } else if (type === 'style-guide') { %>
+          スタイルガイド<sup class="beta">beta</sup>
         <% } else if (type === 'examples') { %>
           例
         <% } %>
-        <% if (type !== 'cookbook') { %>
+        <% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %>
           <select class="version-select">
             <option value="SELF" selected>2.x</option>
             <option value="v1">1.0</option>

diff --git a/themes/vue/layout/partials/toc.ejs b/themes/vue/layout/partials/toc.ejs
@@ -1,5 +1,5 @@
 <ul class="menu-root">
-  <% type !== 'api' && site.pages.find({type: type}).sort('order').each(function (p) { %>
+  <% ['api', 'style-guide'].indexOf(type) === -1 && site.pages.find({type: type}).sort('order').each(function (p) { %>
     <% var fileName = p.path.replace(/^.+?\/([\w-]+)\.html/, '$1') %>
     <% if (type === 'guide') { %>
       <% if (fileName === 'installation') { %>

diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
@@ -63,11 +63,11 @@ a.button
 
 .highlight
   overflow-x: auto
-  padding: 0
   background-color: $codebg
-  padding: .8em .8em .4em
+  padding: .4em 0 0
   line-height: 1.1em
   border-radius: $radius
+  position: relative
   table, tr, td
     width: 100%
     border-collapse: collapse
@@ -86,7 +86,7 @@ a.button
   &.html, &.js, &.bash, &.css
     .code:before
       position: absolute
-      margin-top: -1em
+      top: 0
       right: 0
       color: #ccc
       text-align: right
@@ -190,3 +190,9 @@ a.button
     border-left: 4px solid transparent
     border-right: 4px solid transparent
     border-top: 5px solid #ccc
+
+sup.beta.beta
+  font-size: .6em
+  margin-left: .7em
+  text-transform: uppercase
+  opacity: .6
diff --git a/themes/vue/source/css/_style-guide.styl b/themes/vue/source/css/_style-guide.styl
@@ -0,0 +1,82 @@
+$style-guide-bad-bg = lighten(desaturate($red, 80%), 80%)
+$style-guide-bad-text = darken(desaturate($red, 80%), 20%)
+$style-guide-good-bg = lighten(desaturate($green, 80%), 85%)
+$style-guide-good-text = darken(desaturate($green, 80%), 10%)
+
+$style-guide-priority-a-bg = $style-guide-bad-text
+$style-guide-priority-a-color = white
+$style-guide-priority-b-bg = $style-guide-bad-text
+$style-guide-priority-b-color = white
+$style-guide-priority-c-bg = steelblue
+$style-guide-priority-c-color = white
+$style-guide-priority-d-bg = $style-guide-bad-text
+$style-guide-priority-d-color = white
+
+.style-guide
+  .style-example, details, .style-enforcement
+    border-radius $radius
+    margin: 1.6em 0
+    padding 1.6em
+    h4
+      margin-top: 0
+    figure, p
+      &:last-child
+        margin-bottom 0
+        padding-bottom 0
+  .style-example
+    &.example-bad
+      background $style-guide-bad-bg
+      h4
+        color $style-guide-bad-text
+    &.example-good
+      background $style-guide-good-bg
+      h4
+        color $style-guide-good-text
+  details, .style-enforcement
+    background-color #eee
+  details
+    position relative
+  summary
+    cursor pointer
+    padding 1.6em
+    margin -1.6em
+    outline none
+    > h4
+      display inline-block
+      margin 0
+  .style-enforcement
+    table
+      width 100%
+      background-color $codebg
+      border-radius $radius
+    th, td
+      padding .4em
+      text-align center
+    th
+      padding-bottom .2em
+    td
+      padding-top .2em
+  .style-rule-tag
+    background-color $codebg
+    border-radius $radius
+    font-size .9em
+    color $style-guide-good-text
+    font-weight 600
+    text-transform uppercase
+    padding: .1em .4em
+  a > .style-rule-tag
+    color $green
+  sup
+    text-transform: uppercase
+    font-size: .7em
+    margin-left: 1em
+    pointer-events: all
+    position: absolute
+  [data-p="a"]
+    color: #6b2a2a
+  [data-p="b"]
+    color: #8c480a
+  [data-p="c"]
+    color: #2b5a99
+  [data-p="d"]
+    content: #3f536d
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
@@ -1,12 +1,13 @@
 @import "_common"
+@import "_animations"
 @import "_header"
 @import "_demo"
 @import "_sponsor"
 @import "_migration"
 @import "_sidebar"
 @import "_offline-menu"
 @import "_team"
-@import "_animations"
+@import "_style-guide"
 
 #header
   box-shadow: 0 0 1px rgba(0,0,0,.25)

diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
@@ -161,11 +161,15 @@
 
     // build sidebar
     var currentPageAnchor = sidebar.querySelector('.sidebar-link.current')
-    var isAPI = document.querySelector('.content').classList.contains('api')
-    if (currentPageAnchor || isAPI) {
+    var contentClasses = document.querySelector('.content').classList
+    var isAPIOrStyleGuide = (
+      contentClasses.contains('api') ||
+      contentClasses.contains('style-guide')
+    )
+    if (currentPageAnchor || isAPIOrStyleGuide) {
       var allHeaders = []
       var sectionContainer
-      if (isAPI) {
+      if (isAPIOrStyleGuide) {
         sectionContainer = document.querySelector('.menu-root')
       } else {
         sectionContainer = document.createElement('ul')
@@ -180,7 +184,7 @@
           allHeaders.push(h)
           allHeaders.push.apply(allHeaders, h3s)
           if (h3s.length) {
-            sectionContainer.appendChild(makeSubLinks(h3s, isAPI))
+            sectionContainer.appendChild(makeSubLinks(h3s, isAPIOrStyleGuide))
           }
         })
       } else {