<%- post.title %>
16 |<%- post.date.format('MMM D[,] YYYY') %>
17 |<%- post.excerpt %>
18 | ... continue reading
19 | {{fullName}}
78 | ```
79 |
80 | ``` js
81 | var vm = new Vue({
82 | el: '#demo',
83 | data: {
84 | firstName: 'Foo',
85 | lastName: 'Bar',
86 | fullName: 'Foo Bar'
87 | }
88 | })
89 |
90 | vm.$watch('firstName', function (val) {
91 | this.fullName = val + ' ' + this.lastName
92 | })
93 |
94 | vm.$watch('lastName', function (val) {
95 | this.fullName = this.firstName + ' ' + val
96 | })
97 | ```
98 |
99 |
100 | Kode di atas adalah kode yang impoeratif dan repetitif. Bandingkan dengan versi computed property seperti di bawah ini:
101 |
102 | ``` js
103 | var vm = new Vue({
104 | el: '#demo',
105 | data: {
106 | firstName: 'Foo',
107 | lastName: 'Bar'
108 | },
109 | computed: {
110 | fullName: function () {
111 | return this.firstName + ' ' + this.lastName
112 | }
113 | }
114 | })
115 | ```
116 |
117 |
118 | Lebih baik, bukan?
119 |
120 | ### Computed Setter
121 |
122 |
123 | Computed properties pada mulanya hanyalah sebuah getter (getter-only), akan tetapi Anda juga dapat menyediakan sebuah setter ketika membutuhkannya:
124 |
125 | ``` js
126 | // ...
127 | computed: {
128 | fullName: {
129 | // getter
130 | get: function () {
131 | return this.firstName + ' ' + this.lastName
132 | },
133 | // setter
134 | set: function (newValue) {
135 | var names = newValue.split(' ')
136 | this.firstName = names[0]
137 | this.lastName = names[names.length - 1]
138 | }
139 | }
140 | }
141 | // ...
142 | ```
143 |
144 |
145 | Sekarang ketika Anda memanggil `vm.fullName = 'John Doe'`, setter tersebut akan terpanggil dan `vm.firstName` dan `vm.lastName`juga akan ikut terbaharui.
146 |
147 |
148 | Detil teknis dibalik cara kerja computed property [didiskusikan halaman yang lain](reactivity.html#Inside-Computed-Properties) yang membahas tentang reactivity system (sistem reaktifitas).
149 |
--------------------------------------------------------------------------------
/src/guide/conditional.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Conditional Rendering
3 | type: guide
4 | order: 7
5 | ---
6 |
7 | ## v-if
8 |
9 |
10 | Pada string templates, sebagai contoh Handlebars, kita akan menulis sebuah blok kondisional seperti ini:
11 |
12 | ``` html
13 |
14 | {{#if ok}}
15 | Yes
16 | {{/if}} 17 | ``` 18 | 19 | 20 | Pada Vue.js, kita menggunakan `v-if` directive untuk mendapatkan hal yang sama: 21 | 22 | ``` html 23 |Yes
24 | ``` 25 | 26 | 27 | Memungkinkan juga untuk menambahkan blok "else" dengan `v-else`: 28 | 29 | ``` html 30 |Yes
31 |No
32 | ``` 33 | 34 | ## Template v-if 35 | 36 | 37 | Karena `v-if` adalah sebuah directive, dia harus terikat dengan sebuah elemen tunggal. Tetapi, bagaimana jika kita ingin men-toggle lebih dari satu elemen? Dalam kasus ini kita bisa menggunakan `v-if` pada sebuah elemen ``, yang akan bertindak sebagai sebuah invisible wrapper. 38 | 39 | ``` html 40 | 41 |Title
42 |Paragraph 1
43 |Paragraph 2
44 | 45 | ``` 46 | 47 | ## v-show 48 | 49 | 50 | Opsi lain untuk menampilkan sebuah elemen secara kondisional adalah `v-show` directive. Penggunaannya sebagian besar sama: 51 | 52 | ``` html 53 |Hello!
54 | ``` 55 | 56 | 57 | Perbedaannya adalah elemen dengan `v-show` akan selalu dirender dan berada di dalam DOM; `v-show` secara singkat men-toggle `tampilan` properti CSS dari elemen tersebut. 58 | 59 | 60 | Catatan bahwa `v-show` tidak mendukung sintaks ``. 61 | 62 | ## v-else 63 | 64 | 65 | Anda bisa menggunakan `v-else` directive untuk mengindikasi sebuah "blok else" untuk `v-if` atau `v-show`: 66 | 67 | 68 | ``` html 69 |
70 | Sorry
71 |
72 |
73 | Not sorry
74 |
75 | ```
76 |
77 |
78 | Elemen `v-else` harus segera diikuti oleh elemen `v-if` atau `v-show` - jika tidak dia tidak akan dikenali.
79 |
80 | ### Component caveat
81 |
82 |
83 | Ketika digunakan dengan komponen dan `v-show`, `v-else` tidak mendapatkan properti yang diterapkan karena prioritas directives. Jadi, daripada melakukan ini:
84 |
85 | ```html
86 | This could be a component too
88 | ``` 89 | 90 | 91 | Ganti `v-else` dengan `v-show`: 92 | 93 | ```html 94 |This could be a component too
96 | ``` 97 | 98 | 99 | Cara kerja dan hasilnya sama saja dengan `v-if`. 100 | 101 | ## v-if vs. v-show 102 | 103 | 104 | Ketika sebuah blok `v-if` ditoggle, Vue.js harus melakukan proses kompilasi parsial/sebagian, karena konten template didalam `v-if` juga dapat mengandung data binding atau komponen anak. `v-if` merupakan rendering kondisional secara "nyata" karena dia harus memastikan event listeners dan komponen anak didalam blok kondisional benar-benar dihancurkan dan dibuat ulang ketika toggles. 105 | 106 | 107 | `v-if` juga **malas/lazy**: jika kondisi false pada awal render, dia tidak akan melakukan apapun - kompilasi parsial tidak akan mulai hingga kondisi menjadi true untuk pertama kali (dan kompilasi pun kemudian di-cached). 108 | 109 | 110 | Sebagai perbandingan, `v-show` lebih ringkas - elemennya selalu dikompilasi dan disimpan, dengan hanya simple CSS-based toggling. 111 | 112 | 113 | Secara umum, `v-if` mempunyai higher toggle costs sementara `v-show` mempunyai higher initial render costs. Jadi pilih `v-show` jika anda memerlukan untuk men-toggle sesuatu secara sering, dan pilih `v-if` jika kondisinya tidak sering berubah selama berjalan. 114 | -------------------------------------------------------------------------------- /src/guide/custom-filter.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Custom Filters 3 | type: guide 4 | order: 15 5 | --- 6 | 7 | ## Basics 8 | 9 | Similar to custom directives, you can register a custom filter with the global `Vue.filter()` method, passing in a **filterID** and a **filter function**. The filter function takes a value as the argument and returns the transformed value: 10 | 11 | ``` js 12 | Vue.filter('reverse', function (value) { 13 | return value.split('').reverse().join('') 14 | }) 15 | ``` 16 | 17 | ``` html 18 | 19 | 20 | ``` 21 | 22 | The filter function also receives any inline arguments: 23 | 24 | ``` js 25 | Vue.filter('wrap', function (value, begin, end) { 26 | return begin + value + end 27 | }) 28 | ``` 29 | 30 | ``` html 31 | 32 | 33 | ``` 34 | 35 | ## Two-way Filters 36 | 37 | Up till now we have used filters to transform values coming from the model and before displaying them in the view. But it is also possible to define a filter that transforms the value before it is written back to the model from the view (input elements): 38 | 39 | ``` js 40 | Vue.filter('currencyDisplay', { 41 | // model -> view 42 | // formats the value when updating the input element. 43 | read: function(val) { 44 | return '$'+val.toFixed(2) 45 | }, 46 | // view -> model 47 | // formats the value when writing to the data. 48 | write: function(val, oldVal) { 49 | var number = +val.replace(/[^\d.]/g, '') 50 | return isNaN(number) ? 0 : parseFloat(number.toFixed(2)) 51 | } 52 | }) 53 | ``` 54 | 55 | Demo: 56 | 57 | {% raw %} 58 |
59 |
60 |
62 |
81 | {% endraw %}
82 |
83 | ## Dynamic Arguments
84 |
85 | If a filter argument is not enclosed by quotes, it will be evaluated dynamically in the current vm's data context. In addition, the filter function is always invoked using the current vm as its `this` context. For example:
86 |
87 | ``` html
88 |
89 | {{msg | concat userInput}}
90 | ```
91 |
92 | ``` js
93 | Vue.filter('concat', function (value, input) {
94 | // here `input` === `this.userInput`
95 | return value + input
96 | })
97 | ```
98 |
99 | For this simple example above, you can achieve the same result with just an expression, but for more complicated procedures that need more than one statement, you need to put them either in a computed property or a custom filter.
100 |
101 | The built-in `filterBy` and `orderBy` filters are both filters that perform non-trivial work on the Array being passed in and relies on the current state of the owner Vue instance.
102 |
--------------------------------------------------------------------------------
/src/guide/events.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Methods and Event Handling
3 | type: guide
4 | order: 9
5 | ---
6 |
7 | ## Method Handler
8 |
9 | We can use the `v-on` directive to listen to DOM events:
10 |
11 | ``` html
12 | Model value: {{money}}
61 |
13 |
14 |
15 | ```
16 |
17 | We are binding a click event listener to a method named `greet`. Here's how to define that method in our Vue instance:
18 |
19 | ``` js
20 | var vm = new Vue({
21 | el: '#example',
22 | data: {
23 | name: 'Vue.js'
24 | },
25 | // define methods under the `methods` object
26 | methods: {
27 | greet: function (event) {
28 | // `this` inside methods point to the Vue instance
29 | alert('Hello ' + this.name + '!')
30 | // `event` is the native DOM event
31 | alert(event.target.tagName)
32 | }
33 | }
34 | })
35 |
36 | // you can invoke methods in JavaScript too
37 | vm.greet() // -> 'Hello Vue.js!'
38 | ```
39 |
40 | Test it yourself:
41 |
42 | {% raw %}
43 |
44 |
45 |
46 |
63 | {% endraw %}
64 |
65 | ## Inline Statement Handler
66 |
67 | Instead of binding directly to a method name, we can also use an inline JavaScript statement:
68 |
69 | ``` html
70 |
71 |
72 |
73 |
74 | ```
75 | ``` js
76 | new Vue({
77 | el: '#example-2',
78 | methods: {
79 | say: function (msg) {
80 | alert(msg)
81 | }
82 | }
83 | })
84 | ```
85 |
86 | Result:
87 | {% raw %}
88 |
89 |
90 |
91 |
92 |
102 | {% endraw %}
103 |
104 | Similar to the restrictions on inline expressions, event handlers are restricted to **one statement only**.
105 |
106 | Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable:
107 |
108 | ``` html
109 |
110 | ```
111 |
112 | ``` js
113 | // ...
114 | methods: {
115 | say: function (msg, event) {
116 | // now we have access to the native event
117 | event.preventDefault()
118 | }
119 | }
120 | ```
121 |
122 | ## Event Modifiers
123 |
124 | It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
125 |
126 | To address this problem, Vue.js provides two **event modifiers** for `v-on`: `.prevent` and `.stop`. Recall that modifiers are directive postfixes denoted by a dot:
127 |
128 | ``` html
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | ```
141 |
142 | In 1.0.16, two additional modifiers have been introduced:
143 |
144 | ``` html
145 |
146 | ...
147 |
148 |
149 |
150 | ...
151 | ```
152 |
153 | ## Key Modifiers
154 |
155 | When listening for keyboard events, we often need to check for common key codes. Vue.js also allows adding key modifiers for `v-on` when listening for key events:
156 |
157 | ``` html
158 |
159 |
160 | ```
161 |
162 | Remembering all the keyCodes is a hassle, so Vue.js provides aliases for most commonly used keys:
163 |
164 | ``` html
165 |
166 |
167 |
168 |
169 |
170 | ```
171 |
172 | Here's the full list of key modifier aliases:
173 |
174 | - enter
175 | - tab
176 | - delete
177 | - esc
178 | - space
179 | - up
180 | - down
181 | - left
182 | - right
183 |
184 | **1.0.8+:** Single letter key aliases are also supported.
185 |
186 | **1.0.17+:** You can also define custom key modifier aliases:
187 |
188 | ``` js
189 | // enable @keyup.f1
190 | Vue.directive('on').keyCodes.f1 = 112
191 | ```
192 |
193 | ## Why Listeners in HTML?
194 |
195 | You might be concerned that this whole event listening approach violates the good old rules about "separation of concern". Rest assured - since all Vue.js handler functions and expressions are strictly bound to the ViewModel that's handling the current View, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on`:
196 |
197 | 1. It makes it easier to locate the handler function implementations within your JS code by simply skimming the HTML template.
198 |
199 | 2. Since you don't have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test.
200 |
201 | 3. When a ViewModel is destroyed, all event listeners are automatically removed. You don't need to worry about cleaning it up yourself.
202 |
--------------------------------------------------------------------------------
/src/guide/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Memulai
3 | type: guide
4 | order: 1
5 | ---
6 |
7 |
8 | Mari kita mulai dengan tour ringkas penggunaan fitur data binding pada Vue.js. Jika anda lebih tertarik untuk ikhtisar yang lebih tinggi levelnya, cek [postingan blog ini](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/).
9 |
10 |
11 | Cara termudah untuk mencoba Vue.js adalah melalui [contoh Hello World pada JSFiddle](https://jsfiddle.net/yyx990803/okv0rgrk/). Silakan membuka tab baru dan ikuti sebagaimana yang telah kami contohkan.
12 |
13 | ### Hello World
14 |
15 | ``` html
16 |
17 | {{ message }}
18 |
19 | ```
20 | ``` js
21 | new Vue({
22 | el: '#app',
23 | data: {
24 | message: 'Hello Vue.js!'
25 | }
26 | })
27 | ```
28 | {% raw %}
29 |
30 | {{ message }}
31 |
32 |
40 | {% endraw %}
41 |
42 |
43 | ### Data Binding Dua Arah
44 |
45 | ``` html
46 |
47 |
50 | ```
51 | ``` js
52 | new Vue({
53 | el: '#app',
54 | data: {
55 | message: 'Hello Vue.js!'
56 | }
57 | })
58 | ```
59 | {% raw %}
60 | {{ message }}
48 | 49 |
61 |
64 |
72 | {% endraw %}
73 |
74 | ### Render sebuah List
75 |
76 | ``` html
77 | {{ message }}
62 | 63 |
78 |
84 | ```
85 | ``` js
86 | new Vue({
87 | el: '#app',
88 | data: {
89 | todos: [
90 | { text: 'Belajar JavaScript' },
91 | { text: 'Belajar Vue.js' },
92 | { text: 'Buat sesuatu yang mengagumkan' }
93 | ]
94 | }
95 | })
96 | ```
97 | {% raw %}
98 | -
79 |
- 80 | {{ todo.text }} 81 | 82 |
99 |
105 |
117 | {% endraw %}
118 |
119 |
120 | ### Menangani Inputan dari Pengguna
121 |
122 | ``` html
123 | -
100 |
- 101 | {{ todo.text }} 102 | 103 |
124 |
127 | ```
128 | ``` js
129 | new Vue({
130 | el: '#app',
131 | data: {
132 | message: 'Hello Vue.js!'
133 | },
134 | methods: {
135 | reverseMessage: function () {
136 | this.message = this.message.split('').reverse().join('')
137 | }
138 | }
139 | })
140 | ```
141 | {% raw %}
142 | {{ message }}
125 | 126 |
143 |
146 |
159 | {% endraw %}
160 |
161 |
162 | ### Lakukan Secara Bersamaan
163 |
164 | ``` html
165 | {{ message }}
144 | 145 |
166 |
167 |
174 | ```
175 | ``` js
176 | new Vue({
177 | el: '#app',
178 | data: {
179 | newTodo: '',
180 | todos: [
181 | { text: 'Add some todos' }
182 | ]
183 | },
184 | methods: {
185 | addTodo: function () {
186 | var text = this.newTodo.trim()
187 | if (text) {
188 | this.todos.push({ text: text })
189 | this.newTodo = ''
190 | }
191 | },
192 | removeTodo: function (index) {
193 | this.todos.splice(index, 1)
194 | }
195 | }
196 | })
197 | ```
198 | {% raw %}
199 | -
168 |
- 169 | {{ todo.text }} 170 | 171 | 172 |
200 |
201 |
208 |
231 | {% endraw %}
232 |
233 |
234 | Kami harap ini dapat memberikan Anda gambaran bagaimana Vue.js bekerja. Kami yakin anda juga memiliki banyak pertanyaan sekarang. Silakan baca terus, dan kami akan membahasnya di panduan berikutnya.
235 |
--------------------------------------------------------------------------------
/src/guide/installation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Instalasi
3 | type: guide
4 | order: 0
5 | vue_version: 1.0.26
6 | dev_size: "266.44"
7 | min_size: "75.01"
8 | gz_size: "26.03"
9 | ---
10 |
11 | ### Catatan Kompatibilitas
12 |
13 |
14 | Vue.js **tidak mendukung** IE8 dan di bawahnya, karena Vue.js memakai fitur ECMAScript 5 yang dapat berjalan di IE8. Akan tetapi, Vue.js mendukung semua [browser yang dapat menjalankan ECMAScript 5](http://caniuse.com/#feat=es5).
15 |
16 | ### Catatan Rilis
17 |
18 |
19 | Detil catatan rilis untuk setiap versi tersedia di [GitHub](https://github.com/vuejs/vue/releases).
20 |
21 | ## Standalone
22 |
23 |
24 | Download dengan mudah dan cukup masukkan ke dalam tag `
100 |
101 |
102 | -
202 |
- 203 | {{ todo.text }} 204 | 205 | 206 |
103 |
140 |
104 |
139 |
105 |
106 |
110 | Simpel
107 | 108 |Cukup tulis beberapa kode HTML, ambil beberapa JSON, dan buat instance Vue.
109 |
111 |
114 | Reaktif
112 |Expressions & computed properties with transparent dependency tracking.
113 |
115 |
116 |
120 | Komponen-komponen
117 | 118 |Buat aplikasi Anda dengan komponen yang terpisah dan dapat digunakan ulang.
119 |
121 |
122 |
126 | Padat
123 | 124 |~24kb min+gzip, tanpa dependency.
125 |
127 |
128 |
132 | Cepat
129 | 130 |Async batch DOM updates yang presisi dan efisien.
131 |
133 |
134 |
138 | Siap Pakai
135 | 136 |Install melalui NPM atau Bower, tergantung ekosistem favorit Anda
137 |
141 |
142 |
158 |
163 |
164 |
165 |
166 |
--------------------------------------------------------------------------------
/themes/vue/layout/layout.ejs:
--------------------------------------------------------------------------------
1 | <% var isIndex = page.path === 'index.html' %>
2 |
3 |
4 |
5 | Anda harus mencoba Vue.js jika menginginkan:
143 | 150 |-
151 |
- Data binding yang Extendable 152 |
- Object models Javascript biasa 153 |
- API yang mudah dimengerti 154 |
- Membangun UI dengan cara menyusun komponen-komponen 155 |
- Mixing & matching library kecil 156 |
28 | <% if (page.blog_index) { %>
29 | <%- partial('partials/blog') %>
30 | <% } else { %>
31 | <%- body %>
32 | <% } %>
33 |
34 |
35 |
36 |
37 | <% } else { %>
38 | <%- body %>
39 | <% } %>
40 |
41 |
42 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/themes/vue/layout/page.ejs:
--------------------------------------------------------------------------------
1 | <% if (page.type) { %>
2 | <%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
3 | <% } %>
4 |
26 |
--------------------------------------------------------------------------------
/themes/vue/layout/partials/ad.ejs:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/themes/vue/layout/partials/blog.ejs:
--------------------------------------------------------------------------------
1 |
6 |
7 |
22 |
--------------------------------------------------------------------------------
/themes/vue/layout/partials/community_dropdown.ejs:
--------------------------------------------------------------------------------
1 | The Vue.js Blog
8 |
9 |
10 | 
11 |
12 |
15 |
20 | <% }) %>
21 |
2 |
3 | 
4 | Vue.js
5 |
6 |
9 |
--------------------------------------------------------------------------------
/themes/vue/layout/partials/main_menu.ejs:
--------------------------------------------------------------------------------
1 |
4 | Vue.js
5 |
6 |
9 |
2 |
5 |
29 |
--------------------------------------------------------------------------------
/themes/vue/layout/partials/sponsors.ejs:
--------------------------------------------------------------------------------
1 |
2 | Disponsori oleh
3 |
6 |
28 |
7 |
8 | 
9 | Support Vue.js
10 |
11 |
12 |
9 | Support Vue.js
10 |
11 | 13 | <%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %> 14 | 19 |
20 | 27 |4 | 5 |
6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 |
14 | 
15 |
16 |
17 | 
18 |
19 |
20 | 
21 |
22 |
23 | 
24 |
25 |
26 | 
27 |
28 |
--------------------------------------------------------------------------------
/themes/vue/layout/post.ejs:
--------------------------------------------------------------------------------
1 |
2 |
5 |
21 |
6 |
7 | Recent Posts
8 |
9 |
12 |
20 |
7 | Recent Posts
8 |
9 |
10 |
11 |
12 | -
13 | <% site.posts.sort('date', -1).limit(10).each(function (post) { %>
14 |
- 15 | <%- post.title %> 16 | 17 | <% }) %> 18 |
22 | <%- partial('partials/ad') %>
23 |
27 |
--------------------------------------------------------------------------------
/themes/vue/source/css/_blog.styl:
--------------------------------------------------------------------------------
1 | .content.blog
2 | h1
3 | margin 0 0 .5em
4 | h2
5 | margin .8em 0
6 | padding-bottom 0
7 | border-bottom none
8 | a
9 | color $dark
10 | &:hover
11 | border-bottom 2px solid $green
12 | h4
13 | color $light
14 | margin 1.2em 0
15 | figure, p
16 | margin-left 0
17 | .post
18 | padding 1em 0 2em
19 | border-bottom 1px solid $border
20 |
21 | @media screen and (max-width: 1400px) and (min-width: 720px)
22 | .content.blog.post
23 | margin 0 0 0 280px
24 |
--------------------------------------------------------------------------------
/themes/vue/source/css/_common.styl:
--------------------------------------------------------------------------------
1 | @import "_settings"
2 | @import "_syntax"
3 |
4 | body
5 | font-family $body-font
6 | font-size $body-font-size
7 | -webkit-font-smoothing antialiased
8 | -moz-osx-font-smoothing grayscale
9 | color $medium
10 | margin 0
11 |
12 | a
13 | text-decoration none
14 | color $medium
15 |
16 | img
17 | border none
18 |
19 | h1, h2, h3, h4, strong
20 | font-weight 600
21 | color $dark
22 |
23 | code, pre
24 | font-family $code-font
25 | font-size $code-font-size
26 | background-color $codebg
27 | -webkit-font-smoothing initial
28 | -moz-osx-font-smoothing initial
29 |
30 | code
31 | color #e96900
32 | padding 3px 5px
33 | margin 0 2px
34 | border-radius 2px
35 | white-space nowrap
36 |
37 | em
38 | color $light
39 |
40 | p
41 | word-spacing 0.05em
42 |
43 | button()
44 | display inline-block
45 | font-weight 700
46 | color #fff
47 | background-color lighten($green, 8%)
48 | transition all .15s ease
49 | &:hover
50 | background-color lighten($green, 15%)
51 | -webkit-transform scale(1.03)
52 | transform scale(1.03)
53 |
54 | a.button
55 | button()
56 | font-family $code-font
57 | border-bottom 2px solid darken($green, 12%)
58 | padding 12px 14px
59 | border-radius 4px
60 |
61 |
62 | a.small-button
63 | button()
64 | padding 4px 8px 5px
65 | border-radius 4px
66 | width 140px
67 | margin 0 5px
68 |
69 | .highlight
70 | overflow-x auto
71 | position relative
72 | padding 0
73 | background-color $codebg
74 | padding .8em .8em .4em
75 | line-height 1.1em
76 | border-radius $radius
77 | table, tr, td
78 | width 100%
79 | border-collapse collapse
80 | padding 0
81 | margin 0
82 | .gutter
83 | width 1.5em
84 | .code
85 | pre
86 | padding 1.2em 1.4em
87 | line-height 1.5em
88 | margin 0
89 | &.html, &.js, &.bash, &.css
90 | .code:after
91 | position absolute
92 | top 0
93 | right 0
94 | color #ccc
95 | text-align right
96 | font-size .75em
97 | padding 5px 10px 0
98 | line-height 15px
99 | height 15px
100 | font-weight 600
101 | &.html .code:after
102 | content 'HTML'
103 | &.js .code:after
104 | content 'JS'
105 | &.bash .code:after
106 | content 'Shell'
107 | &.css .code:after
108 | content 'CSS'
109 |
110 | #main
111 | position relative
112 | z-index 1
113 | padding 0 60px 30px
114 | overflow-x hidden
115 |
116 | #ad
117 | width 140px
118 | text-align center
119 | position fixed
120 | z-index 99
121 | bottom 10px
122 | right 10px
123 | padding 10px
124 | background-color rgba(255, 255, 255, .65)
125 | border-radius 3px
126 | font-size 13px
127 | a
128 | color $light
129 | font-weight normal
130 | span
131 | display inline-block
132 | margin-bottom 5px
133 | img
134 | width 125px
135 | // .carbon-img, .carbon-text
136 | // display block
137 | // margin-bottom 6px
138 | // font-weight normal
139 | // color $medium
140 | // .carbon-poweredby
141 | // color #aaa
142 | // font-weight normal
143 |
144 | #nav
145 | .nav-link
146 | cursor pointer
147 | .nav-dropdown-container
148 | .nav-link
149 | &:hover
150 | border-bottom none
151 | &:hover
152 | .nav-dropdown
153 | display block
154 | .nav-dropdown
155 | display none
156 | position absolute
157 | top 100%
158 | left 0
159 | background-color #fff
160 | padding 10px 0
161 | border 1px solid #ddd
162 | border-bottom-color #ccc
163 | text-align left
164 | border-radius 4px
165 | li
166 | line-height 1.8em
167 | margin 0
168 | display block
169 | a
170 | color $light
171 | font-size .9em
172 | display block
173 | padding 0 30px 0 20px
174 | &:hover
175 | color $green
176 | .arrow
177 | display inline-block
178 | vertical-align middle
179 | margin-top -1px
180 | margin-left 6px
181 | margin-right -14px
182 | width 0
183 | height 0
184 | border-left 4px solid transparent
185 | border-right 4px solid transparent
186 | border-top 5px solid #ccc
187 |
188 | #donate
189 | height 24px
190 | .wrapper
191 | vertical-align top
192 | height 20px
193 | border 1px solid #d4d4d4
194 | display inline-block
195 | box-sizing border-box
196 | line-height 16px
197 | border-radius 3px
198 | cursor pointer
199 | background-image linear-gradient(to bottom,#fcfcfc 0,#eee 100%)
200 | position relative
201 | width 72px
202 | &:hover
203 | border-color #ccc
204 | background-image linear-gradient(to bottom,#eee 0,#ddd 100%)
205 | img
206 | width 14px
207 | height 14px
208 | position absolute
209 | top 2px
210 | left 5px
211 | a
212 | font 700 11px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif
213 | color #333333
214 | text-shadow 0 1px 0 #fff
215 | position absolute
216 | top 2px
217 | left 24px
218 |
--------------------------------------------------------------------------------
/themes/vue/source/css/_demo.styl:
--------------------------------------------------------------------------------
1 | #demo, .demo
2 | border 1px solid #eee
3 | border-radius $radius
4 | padding 25px 35px
5 | margin-bottom 40px
6 | font-size 1.2em
7 | line-height 1.5em
8 | -webkit-user-select: none;
9 | -moz-user-select: none;
10 | -ms-user-select: none;
11 | user-select: none;
12 | h1
13 | margin 0 0 .5em
14 | font-size 1.8em
15 | ul
16 | padding-left 1.5em
17 | margin 0
18 | li
19 | cursor pointer
20 | color $medium
21 | -ms-user-select none
22 | -moz-user-select none
23 | -webkit-user-select none
24 | &.done
25 | color $light
26 | text-decoration line-through
27 |
28 | ul#demo, ul.demo
29 | li
30 | margin-left 1.5em
31 |
32 | @media screen and (max-width: 720px)
33 | #demo, .demo
34 | margin-left 0
35 |
--------------------------------------------------------------------------------
/themes/vue/source/css/_search.styl:
--------------------------------------------------------------------------------
1 | @import '_settings'
2 |
3 | $border = #ddd
4 |
5 | .algolia-autocomplete
6 | line-height normal
7 |
8 | .aa-dropdown-menu
9 | border-color #999
10 | font-size 0.9rem
11 |
12 | @media (min-width: 768px)
13 | .aa-dropdown-menu
14 | min-width: 515px
15 |
16 | .algolia-docsearch-suggestion
17 | border-color $border
18 |
19 | .algolia-docsearch-suggestion--content
20 | color $dark
21 |
22 | .algolia-docsearch-suggestion--subcategory-column
23 | border-color $border
24 |
25 | .algolia-docsearch-suggestion--category-header
26 | background: $green
27 |
28 | .algolia-docsearch-footer
29 | border-color $border
30 |
31 | .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight
32 | background rgba(255, 255, 255, 0.6)
33 |
34 | .algolia-docsearch-suggestion--highlight
35 | color: #2c815b
36 |
37 | .aa-cursor .algolia-docsearch-suggestion--content
38 | color: $dark
39 |
--------------------------------------------------------------------------------
/themes/vue/source/css/_settings.styl:
--------------------------------------------------------------------------------
1 | // font faces
2 | $body-font = 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
3 | $logo-font = 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
4 | $code-font = 'Roboto Mono', Monaco, courier, monospace
5 |
6 | // font sizes
7 | $body-font-size = 15px
8 | $code-font-size = .8em
9 |
10 | // colors
11 | $dark = #2c3e50
12 | $medium = #34495e
13 | $light = #7f8c8d
14 | $green = #42b983
15 | $border = #dddddd
16 | $codebg = #f8f8f8
17 | $red = #ff6666
18 |
19 | $radius = 2px
20 |
--------------------------------------------------------------------------------
/themes/vue/source/css/_syntax.styl:
--------------------------------------------------------------------------------
1 | .gutter pre
2 | color #999
3 |
4 | pre
5 | color: #525252
6 | .function .keyword,
7 | .constant
8 | color: #0092db
9 | .keyword,
10 | .attribute
11 | color: #e96900
12 | .number,
13 | .literal
14 | color: #AE81FF
15 | .tag,
16 | .tag .title,
17 | .change,
18 | .winutils,
19 | .flow,
20 | .lisp .title,
21 | .clojure .built_in,
22 | .nginx .title,
23 | .tex .special
24 | color: #2973b7
25 | .class .title
26 | color: white
27 | .symbol,
28 | .symbol .string,
29 | .value,
30 | .regexp
31 | color: $green
32 | .title
33 | color: #A6E22E
34 | .tag .value,
35 | .string,
36 | .subst,
37 | .haskell .type,
38 | .preprocessor,
39 | .ruby .class .parent,
40 | .built_in,
41 | .sql .aggregate,
42 | .django .template_tag,
43 | .django .variable,
44 | .smalltalk .class,
45 | .javadoc,
46 | .django .filter .argument,
47 | .smalltalk .localvars,
48 | .smalltalk .array,
49 | .attr_selector,
50 | .pseudo,
51 | .addition,
52 | .stream,
53 | .envvar,
54 | .apache .tag,
55 | .apache .cbracket,
56 | .tex .command,
57 | .prompt
58 | color: $green
59 | .comment,
60 | .java .annotation,
61 | .python .decorator,
62 | .template_comment,
63 | .pi,
64 | .doctype,
65 | .deletion,
66 | .shebang,
67 | .apache .sqbracket,
68 | .tex .formula
69 | color: #b3b3b3
70 | .coffeescript .javascript,
71 | .javascript .xml,
72 | .tex .formula,
73 | .xml .javascript,
74 | .xml .vbscript,
75 | .xml .css,
76 | .xml .cdata
77 | opacity: 0.5
--------------------------------------------------------------------------------
/themes/vue/source/css/benchmark.styl:
--------------------------------------------------------------------------------
1 | #benchmark-results
2 | margin-bottom 2em
3 | ul
4 | list-style-type none
5 | padding 0
6 | margin-left 0
7 |
8 | .framework, .time, .bar, .inner
9 | display inline-block
10 |
11 | .framework
12 | width 4.2em
13 | //text-align right
14 | margin-right 1em
15 | font-weight 600
16 |
17 | .time
18 | width 4.2em
19 | margin-right 1em
20 |
21 | .bar
22 | width 60%
23 | &.min .inner
24 | background-color #e74c3c
25 |
26 | .inner
27 | height 3px
28 | vertical-align middle
29 | background-color #3498db
30 |
31 | @media screen and (max-width: 600px)
32 | #benchmark-results
33 | .bar
34 | width 45%
--------------------------------------------------------------------------------
/themes/vue/source/css/index.styl:
--------------------------------------------------------------------------------
1 | @import "_common"
2 |
3 | zoom()
4 | -webkit-transform scale(1.05)
5 | -moz-transform scale(1.05)
6 | -ms-transform scale(1.05)
7 | transform scale(1.05)
8 |
9 | html, body
10 | height 100%
11 |
12 | #nav, #translations
13 | list-style-type none
14 | text-align center
15 | padding 0
16 | margin 0
17 | li
18 | display inline-block
19 | position relative
20 | line-height 40px
21 | &:last-child .nav-link
22 | margin-right 0
23 |
24 | #translations
25 | position fixed
26 | right 1em
27 | bottom 0.5em
28 | .delimiter
29 | color $light
30 | margin 0 5px
31 | .nav-link
32 | margin 0
33 |
34 | .nav-link
35 | color $light
36 | padding-bottom 3px
37 | margin 0 1.5em
38 | &:first-child
39 | margin-left 0
40 | &:hover, &.current
41 | border-bottom 3px solid $green
42 |
43 | #logo
44 | display block
45 | margin 0 auto
46 | width 200px
47 |
48 | #logo-wrap
49 | margin 3.5em 0 4em
50 |
51 | #hero
52 | text-align center
53 | height 100%
54 | min-height 720px
55 | position relative
56 | .inner
57 | z-index 2
58 | height 640px
59 | width 100%
60 | position absolute
61 | top 50%
62 | margin-top -340px
63 | left 0
64 | h1
65 | font-family $logo-font
66 | font-weight 300
67 | font-size 4em
68 | margin 0
69 | .warning
70 | color $light
71 | .desc
72 | max-width 800px
73 | padding 0 20px
74 | text-align center
75 | margin 1.5em auto
76 | color $light
77 | .down
78 | position absolute
79 | z-index 1
80 | bottom 0
81 | width 100%
82 | left 0
83 | padding 1.5em 0
84 | img
85 | width 20px
86 | a.button
87 | width 280px
88 | margin .5em
89 |
90 | #social
91 | text-align center
92 | list-style-type none
93 | margin 0 auto
94 | padding 0
95 | margin 1.5em auto
96 | li
97 | display inline-block
98 | margin 0 5px
99 | vertical-align middle
100 | &.last
101 | margin-left -2px
102 |
103 | #example
104 | //background-color #f3f3f3
105 | text-align center
106 | padding 20px
107 | max-width 1200px
108 | margin 0 auto 3em
109 | h2
110 | margin-bottom 1.5em
111 | code, pre
112 | background-color transparent
113 | figure.highlight
114 | margin 0
115 | box-shadow none
116 | background-color transparent
117 | .sign
118 | display inline-block
119 | height 10em
120 | line-height 9em
121 | padding 0 .5em
122 | font-weight 600
123 | color $light
124 | .block
125 | text-align left
126 | display inline-block
127 | width 28%
128 | height 10em
129 | vertical-align top
130 | background-color #f9f9f9
131 | border-radius 2px
132 | box-shadow 0 1px 2px rgba(0,0,0,.125)
133 | #demo
134 | padding 0 20px
135 | word-wrap break-word
136 | input
137 | font-size .75em
138 | border 1px solid #ccc
139 | padding 4px 8px
140 | border-radius 2px
141 | font-family $body-font
142 | &:focus
143 | outline none
144 | border-color $green
145 |
146 | #features
147 | padding 3em 0
148 | text-align center
149 | background-color #f9f9f9
150 | .cool
151 | font-size 1.8em
152 | text-align center
153 | margin-top 1em
154 | color $light
155 | .feats
156 | max-width 1200px
157 | margin 0 auto
158 | .feat
159 | box-sizing border-box
160 | -moz-box-sizing border-box
161 | display inline-block
162 | text-align left
163 | vertical-align top
164 | width 280px
165 | margin 40px
166 | h2
167 | color $medium
168 | line-height 40px
169 | margin-bottom 0
170 | p
171 | color $light
172 | padding-left 52px
173 | margin .4em 0
174 | a
175 | color $green
176 | font-weight 600
177 | .icon
178 | display inline-block
179 | vertical-align middle
180 | position relative
181 | top -3px
182 | width 40px
183 | height 40px
184 | margin-right 12px
185 | background url(../images/icons.png)
186 | background-size 240px 40px
187 | &.fast
188 | background-position -40px 0
189 | &.compact
190 | background-position -80px 0
191 | &.powerful
192 | background-position -120px 0
193 | &.composable
194 | background-position -160px 0
195 | &.module
196 | background-position -200px 0
197 |
198 | #why
199 | padding 4em 0
200 | background-color $green
201 | color #fff
202 | h2
203 | margin-top 0
204 | color #fff
205 | font-size 1.5em
206 | text-align center
207 | ul
208 | line-height 1.8em
209 | font-size 1.15em
210 | width 320px
211 | margin 0 auto
212 | padding 0
213 | list-style-type none
214 | li:before
215 | content ""
216 | display inline-block
217 | width 24px
218 | height 24px
219 | background url(../images/check.png) center center no-repeat
220 | background-size 24px 24px
221 | margin-right 10px
222 | position relative
223 | top 4px
224 |
225 | #footer
226 | text-align center
227 | color #fff
228 | padding 4em 0
229 | background-color #7f8c8d
230 | .avatar
231 | width 100px
232 | border-radius 100%
233 | margin 2.5em 0 1em
234 | a
235 | color #fff
236 | text-decoration underline
237 | &.start
238 | font-size 1.2em
239 | text-decoration none
240 | text-transform uppercase
241 | letter-spacing 1px
242 | border 1px solid #fff
243 | display inline-block
244 | padding 12px 20px
245 | border-radius 25px
246 | transition all .15s ease
247 | margin-bottom 2em
248 | &:hover
249 | background-color #fff
250 | color #7f8c8d
251 | zoom()
252 | p
253 | margin .3em 0
254 |
255 | #main
256 | display none
257 |
258 | #donate
259 | margin-left -2px !important
260 |
261 | #sponsors
262 | padding-top 20px
263 |
264 | #sponsors, #sponsors-mobile
265 | span
266 | color $light
267 | font-size .85em
268 | a, img
269 | position relative
270 | width 100px
271 | display inline-block
272 | vertical-align middle
273 | a
274 | margin 5px 10px 0
275 |
276 | #sponsors-mobile
277 | display none
278 | text-align center
279 | margin-bottom 2em
280 | padding 0 1em
281 | a
282 | margin 20px 10px 0
283 |
284 | @media screen and (max-width: 480px)
285 | body
286 | font-size 14px
287 | #nav
288 | margin 1.5em 1.2em 0
289 | #translations
290 | margin-bottom 2em
291 | #logo
292 | width 120px
293 | .nav-link
294 | font-size .85em
295 | margin 0 .5em
296 | .divider
297 | font-size 1.2em
298 | margin 2.5em 1em
299 | #hero
300 | min-height 560px
301 | .inner
302 | height 600px
303 | margin-top -300px
304 | h1
305 | font-size 2em
306 | font-weight 400
307 | .buttons
308 | max-width 300px
309 | margin 1em auto
310 | a.button
311 | width 260px
312 | font-size .8em
313 | margin .5em 0
314 | a.small-button
315 | margin .3em 0
316 | .desc
317 | max-width 300px
318 | .warning, .desc
319 | font-size .85em
320 | margin .8em auto
321 | br
322 | display none
323 | .down
324 | display none
325 | #social
326 | max-width 340px
327 | margin 1.2em auto
328 | line-height 1.8em
329 | .cool
330 | margin-top 0
331 | #features .feat
332 | font-size 14px
333 | margin .8em 0
334 | width 250px
335 | #why
336 | ul
337 | width 280px
338 | font-size 1.1em
339 | h2
340 | font-size 1.4em
341 |
342 | @media screen and (max-width: 960px)
343 | #features, #hero
344 | font-size 16px
345 | #sponsors
346 | display none
347 | #sponsors-mobile
348 | display block
349 | #example
350 | .block
351 | display block
352 | width auto
353 | height auto
354 | #demo
355 | padding 5px 20px 20px
356 | .sign
357 | display block
358 | height 1em
359 | line-height 1em
360 | padding .5em 0
361 | #translations
362 | position relative
363 | right 0
364 | bottom 0
365 |
--------------------------------------------------------------------------------
/themes/vue/source/css/page.styl:
--------------------------------------------------------------------------------
1 | @import "_common"
2 | @import "_demo"
3 | @import "_blog"
4 | @import "_search"
5 |
6 | $header-height = 40px
7 |
8 | #header
9 | background-color #fff
10 | box-shadow 0 0 4px rgba(0,0,0,.25)
11 | padding 25px 60px
12 | position relative
13 | z-index 2
14 |
15 | #nav
16 | list-style-type none
17 | margin 0
18 | padding 0
19 | position absolute
20 | right 60px
21 | top 25px
22 | height $header-height
23 | line-height $header-height
24 | .break
25 | display none
26 | li
27 | display inline-block
28 | position relative
29 | margin 0 .6em
30 |
31 | .nav-link
32 | padding-bottom 3px
33 | &:hover, &.current
34 | border-bottom 3px solid $green
35 |
36 | #search-query
37 | height 30px
38 | line-height 30px
39 | box-sizing border-box
40 | padding 0 15px 0 30px
41 | border 1px solid #e3e3e3
42 | outline none
43 | border-radius 15px
44 | margin-right 10px
45 | transition border-color .2s ease
46 | background #fff url(/images/search.png) 8px 5px no-repeat
47 | background-size 20px
48 | &:focus
49 | border-color $green
50 |
51 | #logo
52 | display inline-block
53 | font-size 1.5em
54 | line-height $header-height
55 | color $dark
56 | font-family $logo-font
57 | font-weight 500
58 | img
59 | vertical-align middle
60 | margin-right 6px
61 | width $header-height
62 | height $header-height
63 |
64 | #mobile-bar
65 | position fixed
66 | top 0
67 | left 0
68 | width 100%
69 | height 40px
70 | background-color #fff
71 | z-index 9
72 | display none
73 | box-shadow 0 0 4px rgba(0,0,0,.25)
74 | .menu-button
75 | position absolute
76 | width 24px
77 | height 24px
78 | top 8px
79 | left 12px
80 | background url(../images/menu.png) center center no-repeat
81 | background-size 24px
82 | .logo
83 | position absolute
84 | width 30px
85 | height 30px
86 | background url(../images/logo.png) center center no-repeat
87 | top 5px
88 | left 50%
89 | margin-left -15px
90 | background-size 30px
91 |
92 | .sidebar
93 | position absolute
94 | z-index 10
95 | top 0
96 | left 60px
97 | bottom 0
98 | padding 2.2em 0
99 | width 260px
100 | margin-right 20px
101 | overflow-x hidden
102 | overflow-y auto
103 | -webkit-overflow-scrolling touch
104 | -ms-overflow-style none
105 | h2
106 | margin-top .2em
107 | ul
108 | list-style-type none
109 | margin 0
110 | line-height 1.8em
111 | padding-left 1em
112 | .version-select
113 | vertical-align middle
114 | margin-left 5px
115 | .menu-root
116 | padding-left 0
117 | .menu-sub
118 | font-size .85em
119 | .sidebar-link
120 | color $light
121 | &.current
122 | font-weight 600
123 | color $green
124 | &.new
125 | &:after
126 | content "NEW"
127 | display inline-block
128 | font-size 10px
129 | font-weight 600
130 | color #fff
131 | background-color $green
132 | line-height 14px
133 | padding 0 4px
134 | border-radius 3px
135 | margin-left 5px
136 | vertical-align middle
137 | position relative
138 | top -1px
139 | &:hover
140 | border-bottom 2px solid $green
141 | .section-link
142 | &.active
143 | font-weight bold
144 | color $green
145 | .main-menu
146 | margin-bottom 20px
147 | display none
148 | padding-left 0
149 |
150 | .content
151 | padding 2.2em 0
152 | max-width 600px
153 | margin 0 auto
154 | &.api
155 | ul
156 | padding-left 1.25em
157 | line-height 1.4em
158 | ul, p
159 | margin .6em 0
160 | a.button
161 | font-size .9em
162 | color #fff
163 | margin .2em 0
164 | width 180px
165 | text-align center
166 | padding 12px 24px
167 | display inline-block
168 | vertical-align middle
169 | img
170 | max-width 100%
171 | span.light
172 | color $light
173 | span.info
174 | font-size .85em
175 | display inline-block
176 | vertical-align middle
177 | width 280px
178 | margin-left 20px
179 | h1
180 | margin 0 0 1em
181 | h2
182 | margin 2em 0 .8em
183 | padding-bottom .7em
184 | border-bottom 1px solid $border
185 | h3
186 | margin 3em 0 1.2em
187 | position relative
188 | &:before
189 | content "#"
190 | color $green
191 | position absolute
192 | left -0.7em
193 | top -2px
194 | font-size 1.2em
195 | font-weight bold
196 | figure, p, ul, ol
197 | margin 1.2em 0
198 | p, ul, ol
199 | line-height 1.6em
200 | ul, ol
201 | padding-left 1.5em
202 | a
203 | color $green
204 | font-weight 600
205 | blockquote
206 | margin 2em 0
207 | padding-left 20px
208 | border-left 4px solid $green
209 | p
210 | font-weight 600
211 | margin-left 0
212 | iframe
213 | margin 1em 0
214 | p.tip
215 | padding 12px 24px 12px 30px
216 | margin 2em 0
217 | border-left 4px solid $red
218 | background-color $codebg
219 | position relative
220 | border-bottom-right-radius $radius
221 | border-top-right-radius $radius
222 | &:before
223 | position absolute
224 | top 14px
225 | left -12px
226 | background-color $red
227 | color #fff
228 | content "!"
229 | width 20px
230 | height 20px
231 | border-radius 100%
232 | text-align center
233 | line-height 20px
234 | font-weight bold
235 | font-family $logo-font
236 | font-size 14px
237 |
238 | .guide-links
239 | margin-top 2em
240 | height 1em
241 |
242 | .footer
243 | color $light
244 | margin-top 2em
245 | padding-top 2em
246 | border-top 1px solid #e5e5e5
247 | font-size .9em
248 |
249 | #main.fix-sidebar
250 | .sidebar
251 | position fixed
252 |
253 | #donate
254 | margin-top 15px
255 |
256 | @media screen and (max-width: 1300px)
257 | .content.with-sidebar
258 | margin-left 290px
259 | #ad
260 | z-index 8
261 | position relative
262 | width 140px
263 | height 60px
264 | padding 0
265 | bottom 0
266 | right 0
267 | margin 0 0 15px -6px
268 | .carbon-wrap, .carbon-img, .carbon-text, .carbon-poweredby
269 | display inline-block
270 | vertical-align top
271 | .carbon-text
272 | width 130px
273 | margin-left 15px
274 | .carbon-poweredby
275 | position absolute
276 | bottom 0
277 | left 145px
278 |
279 | @media screen and (max-width: 720px)
280 | #ad
281 | width 100%
282 | body
283 | -webkit-text-size-adjust none
284 | font-size 14px
285 | #header
286 | display none
287 | #logo
288 | display none
289 | .nav-link
290 | padding-bottom 1px
291 | &:hover, &.current
292 | border-bottom 2px solid $green
293 | #search-query
294 | width 200px
295 | margin-bottom 10px
296 | #mobile-bar
297 | display block
298 | #main
299 | padding 2em 1.4em 0
300 | .highlight pre
301 | padding 1.2em 1em
302 | .sidebar
303 | position fixed
304 | background-color #f9f9f9
305 | height 100%
306 | top 0
307 | left 0
308 | padding 60px 30px 20px
309 | box-shadow 0 0 10px rgba(0,0,0,.2)
310 | box-sizing border-box
311 | transition all .4s cubic-bezier(0.4, 0, 0, 1)
312 | -webkit-transform translate(-280px, 0)
313 | transform translate(-280px, 0)
314 | .main-menu
315 | display block
316 | &.open
317 | -webkit-transform translate(0, 0)
318 | transform translate(0, 0)
319 | .content
320 | &.with-sidebar
321 | margin-left 0
322 | .footer
323 | margin-left 0
324 | text-align center
325 |
326 | @media screen and (max-width: 560px)
327 | #downloads
328 | text-align center
329 | margin-bottom 25px
330 | .info
331 | margin-top 5px
332 | margin-left 0
333 | iframe
334 | margin: 0 !important
335 |
--------------------------------------------------------------------------------
/themes/vue/source/images/chaitin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/chaitin.png
--------------------------------------------------------------------------------
/themes/vue/source/images/check.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/check.png
--------------------------------------------------------------------------------
/themes/vue/source/images/down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/down.png
--------------------------------------------------------------------------------
/themes/vue/source/images/feed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/feed.png
--------------------------------------------------------------------------------
/themes/vue/source/images/htmlburger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/htmlburger.png
--------------------------------------------------------------------------------
/themes/vue/source/images/icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/icons.png
--------------------------------------------------------------------------------
/themes/vue/source/images/itunescn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/itunescn.png
--------------------------------------------------------------------------------
/themes/vue/source/images/jsfiddle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/jsfiddle.png
--------------------------------------------------------------------------------
/themes/vue/source/images/juejin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/juejin.png
--------------------------------------------------------------------------------
/themes/vue/source/images/laravel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/laravel.png
--------------------------------------------------------------------------------
/themes/vue/source/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/logo.png
--------------------------------------------------------------------------------
/themes/vue/source/images/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/menu.png
--------------------------------------------------------------------------------
/themes/vue/source/images/patreon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/patreon.png
--------------------------------------------------------------------------------
/themes/vue/source/images/paypal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/paypal.png
--------------------------------------------------------------------------------
/themes/vue/source/images/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/search.png
--------------------------------------------------------------------------------
/themes/vue/source/images/someline.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/someline.png
--------------------------------------------------------------------------------
/themes/vue/source/images/strikingly.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs-id/docs-old/70d670df41229bfbcfd73a6a0c2b1e8844f4eb22/themes/vue/source/images/strikingly.png
--------------------------------------------------------------------------------
/themes/vue/source/js/common.js:
--------------------------------------------------------------------------------
1 | (function () {
2 |
3 | initSearch()
4 | initMobileMenu()
5 | if (PAGE_TYPE) {
6 | initVersionSelect()
7 | initSubHeaders()
8 | }
9 |
10 | /**
11 | * Swiftype search box
12 | */
13 |
14 | function initSearch () {
15 | docsearch({
16 | appId: 'BH4D9OD16A',
17 | apiKey: '85cc3221c9f23bfbaa4e3913dd7625ea',
18 | indexName: 'vuejs',
19 | inputSelector: '#search-query'
20 | });
21 | }
22 |
23 | /**
24 | * Mobile burger menu button for toggling sidebar
25 | */
26 |
27 | function initMobileMenu () {
28 | var mobileBar = document.getElementById('mobile-bar')
29 | var sidebar = document.querySelector('.sidebar')
30 | var menuButton = mobileBar.querySelector('.menu-button')
31 |
32 | menuButton.addEventListener('click', function () {
33 | sidebar.classList.toggle('open')
34 | })
35 |
36 | document.body.addEventListener('click', function (e) {
37 | if (e.target !== menuButton && !sidebar.contains(e.target)) {
38 | sidebar.classList.remove('open')
39 | }
40 | })
41 | }
42 |
43 | /**
44 | * Doc version select
45 | */
46 |
47 | function initVersionSelect () {
48 | // version select
49 | document.querySelector('.version-select').addEventListener('change', function (e) {
50 | var version = e.target.value
51 | if (version.indexOf('1.') !== 0) {
52 | version = version.replace('.', '')
53 | var section = window.location.pathname.match(/\/(\w+?)\//)[1]
54 | window.location.assign('http://' + version + '.vuejs.org/' + section + '/')
55 | } else {
56 | // TODO when 1.x is out
57 | }
58 | })
59 | }
60 |
61 | /**
62 | * Sub headers in sidebar
63 | */
64 |
65 | function initSubHeaders () {
66 | var each = [].forEach
67 | var main = document.getElementById('main')
68 | var header = document.getElementById('header')
69 | var sidebar = document.querySelector('.sidebar')
70 | var content = document.querySelector('.content')
71 |
72 | // build sidebar
73 | var currentPageAnchor = sidebar.querySelector('.sidebar-link.current')
74 | var isAPI = document.querySelector('.content').classList.contains('api')
75 | if (currentPageAnchor || isAPI) {
76 | var allHeaders = []
77 | var sectionContainer
78 | if (isAPI) {
79 | sectionContainer = document.querySelector('.menu-root')
80 | } else {
81 | sectionContainer = document.createElement('ul')
82 | sectionContainer.className = 'menu-sub'
83 | currentPageAnchor.parentNode.appendChild(sectionContainer)
84 | }
85 | var headers = content.querySelectorAll('h2')
86 | if (headers.length) {
87 | each.call(headers, function (h) {
88 | sectionContainer.appendChild(makeLink(h))
89 | var h3s = collectH3s(h)
90 | allHeaders.push(h)
91 | allHeaders.push.apply(allHeaders, h3s)
92 | if (h3s.length) {
93 | sectionContainer.appendChild(makeSubLinks(h3s, isAPI))
94 | }
95 | })
96 | } else {
97 | headers = content.querySelectorAll('h3')
98 | each.call(headers, function (h) {
99 | sectionContainer.appendChild(makeLink(h))
100 | allHeaders.push(h)
101 | })
102 | }
103 |
104 | var animating = false
105 | sectionContainer.addEventListener('click', function (e) {
106 | e.preventDefault()
107 | if (e.target.classList.contains('section-link')) {
108 | sidebar.classList.remove('open')
109 | setActive(e.target)
110 | animating = true
111 | setTimeout(function () {
112 | animating = false
113 | }, 400)
114 | }
115 | }, true)
116 |
117 | // make links clickable
118 | allHeaders.forEach(makeHeaderClickable)
119 |
120 | // init smooth scroll
121 | smoothScroll.init({
122 | speed: 400,
123 | offset: window.innerWidth > 720
124 | ? 40
125 | : 58
126 | })
127 | }
128 |
129 | // listen for scroll event to do positioning & highlights
130 | window.addEventListener('scroll', updateSidebar)
131 | window.addEventListener('resize', updateSidebar)
132 |
133 | function updateSidebar () {
134 | var doc = document.documentElement
135 | var top = doc && doc.scrollTop || document.body.scrollTop
136 | var headerHeight = header.offsetHeight
137 | if (top > headerHeight) {
138 | main.className = 'fix-sidebar'
139 | } else {
140 | main.className = ''
141 | }
142 | if (animating || !allHeaders) return
143 | var last
144 | for (var i = 0; i < allHeaders.length; i++) {
145 | var link = allHeaders[i]
146 | if (link.offsetTop > top) {
147 | if (!last) last = link
148 | break
149 | } else {
150 | last = link
151 | }
152 | }
153 | if (last)
154 | setActive(last.id)
155 | }
156 |
157 | function makeLink (h) {
158 | var link = document.createElement('li')
159 | var text = h.textContent.replace(/\(.*\)$/, '')
160 | link.innerHTML =
161 | '' +
162 | text +
163 | ''
164 | return link
165 | }
166 |
167 | function collectH3s (h) {
168 | var h3s = []
169 | var next = h.nextSibling
170 | while (next && next.tagName !== 'H2') {
171 | if (next.tagName === 'H3') {
172 | h3s.push(next)
173 | }
174 | next = next.nextSibling
175 | }
176 | return h3s
177 | }
178 |
179 | function makeSubLinks (h3s, small) {
180 | var container = document.createElement('ul')
181 | if (small) {
182 | container.className = 'menu-sub'
183 | }
184 | h3s.forEach(function (h) {
185 | container.appendChild(makeLink(h))
186 | })
187 | return container
188 | }
189 |
190 | function setActive (id) {
191 | var previousActive = sidebar.querySelector('.section-link.active')
192 | var currentActive = typeof id === 'string'
193 | ? sidebar.querySelector('.section-link[href="#' + id + '"]')
194 | : id
195 | if (currentActive !== previousActive) {
196 | if (previousActive) previousActive.classList.remove('active')
197 | currentActive.classList.add('active')
198 | }
199 | }
200 |
201 | function makeHeaderClickable (link) {
202 | var wrapper = document.createElement('a')
203 | wrapper.href = '#' + link.id
204 | wrapper.setAttribute('data-scroll', '')
205 | link.parentNode.insertBefore(wrapper, link)
206 | wrapper.appendChild(link)
207 | }
208 | }
209 | })()
210 |
--------------------------------------------------------------------------------
/themes/vue/source/js/smooth-scroll.min.js:
--------------------------------------------------------------------------------
1 | /** smooth-scroll v5.1.2, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
2 | !function(t,e){"function"==typeof define&&define.amd?define("smoothScroll",e(t)):"object"==typeof exports?module.exports=e(t):t.smoothScroll=e(t)}(this,function(t){"use strict";var e,n={},o=!!document.querySelector&&!!t.addEventListener,r={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},a=function(t,e,n){if("[object Object]"===Object.prototype.toString.call(t))for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.call(n,t[o],o,t);else for(var r=0,a=t.length;a>r;r++)e.call(n,t[r],r,t)},c=function(t,e){var n={};return a(t,function(e,o){n[o]=t[o]}),a(e,function(t,o){n[o]=e[o]}),n},u=function(t,e){for(var n=e.charAt(0);t&&t!==document;t=t.parentNode)if("."===n){if(t.classList.contains(e.substr(1)))return t}else if("#"===n){if(t.id===e.substr(1))return t}else if("["===n&&t.hasAttribute(e.substr(1,e.length-2)))return t;return!1},i=function(t){for(var e,n=String(t),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<%- page.title %>
24 |<%- page.date.format('MMM D[,] YYYY') %>
25 | <%- page.content %> 26 |todos
13 | 18 |-
22 |
-
25 | 26 | 27 | 28 | 29 |30 | 36 |
37 |