├── .gitignore ├── .travis.yml ├── Gruntfile.js ├── README.md ├── bower.json ├── docs ├── jade │ ├── layout.jade │ └── pages │ │ ├── base.jade │ │ ├── components.jade │ │ └── layouts.jade └── styl │ └── docs.styl ├── fonts ├── arkicons.eot ├── arkicons.svg ├── arkicons.ttf └── arkicons.woff ├── package.json ├── pics ├── icon-alert.png ├── rating-stars-small.png └── rating-stars.png └── stylus ├── arkicons.styl ├── button.styl ├── component.styl ├── form.styl ├── iconic.styl ├── index.styl ├── layout.styl ├── mixins ├── css3 │ ├── background.styl │ ├── border.styl │ ├── effect.styl │ ├── gradients.styl │ ├── index.styl │ ├── select.styl │ └── vendor.styl ├── index.styl ├── polyfill.styl └── typography.styl ├── mod ├── alert.styl ├── pagination.styl └── rating.styl ├── nav.styl ├── reset.styl ├── table.styl ├── type.styl └── variable.styl /.gitignore: -------------------------------------------------------------------------------- 1 | *.css 2 | *.html 3 | *.DS_Store 4 | *~ 5 | /node_modules 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 0.8 4 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | stylus: { 4 | compile: { 5 | files: { 6 | 'docs/css/docs.css': 'docs/styl/docs.styl' 7 | } 8 | } 9 | } 10 | , jade: { 11 | compile: { 12 | files: { 13 | 'docs/index.html': 'docs/jade/pages/base.jade' 14 | , 'docs/components.html': 'docs/jade/pages/components.jade' 15 | , 'docs/layouts.html': 'docs/jade/pages/layouts.jade' 16 | } 17 | } 18 | } 19 | , watch: { 20 | options: { 21 | livereload: true 22 | } 23 | , jade: { 24 | files: 'docs/jade/**/*.jade' 25 | , tasks: 'jade' 26 | } 27 | , stylus: { 28 | files: 'docs/styl/**/*.styl' 29 | , tasks: 'stylus' 30 | } 31 | } 32 | , connect: { 33 | pub: { 34 | options: { 35 | hostname: 'localhost' 36 | , port: 9000 37 | , base: './' 38 | , keepalive: true 39 | } 40 | } 41 | } 42 | }) 43 | 44 | grunt.loadNpmTasks('grunt-contrib-jade') 45 | grunt.loadNpmTasks('grunt-contrib-stylus') 46 | grunt.loadNpmTasks('grunt-contrib-watch') 47 | grunt.loadNpmTasks('grunt-contrib-uglify') 48 | grunt.loadNpmTasks('grunt-contrib-connect') 49 | grunt.loadNpmTasks('grunt-contrib-copy') 50 | 51 | grunt.registerTask('default', ['stylus', 'jade']) 52 | } 53 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/mockee/arkui.png?branch=master)](https://travis-ci.org/mockee/arkui) 2 | 3 | # Arkui 4 | 5 | Basic UI components for Douban Read. [Live Docs](http://mockee.github.io/arkui/). 6 | 7 | ## Quick Start 8 | 9 | Installation: Arkui requires `npm` and Grunt `~0.4.0`. 10 | 11 | ```bash 12 | $ npm install && grunt 13 | ``` 14 | 15 | Preview: Start connect web server on [http://localhost:9000](http://localhost:9000) 16 | 17 | ```bash 18 | $ grunt connect 19 | ``` 20 | 21 | Development: Run `watch` tasks (`jade`, `style`), and then edit files in `/stylus`. 22 | 23 | ```bash 24 | $ grunt watch 25 | ``` 26 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "arkui", 3 | "description": "Basic UI components for Douban Read.", 4 | "version": "1.0.4" 5 | } 6 | -------------------------------------------------------------------------------- /docs/jade/layout.jade: -------------------------------------------------------------------------------- 1 | doctype 2 | html 3 | head 4 | meta(charset='UTF-8') 5 | title= 'arkui' 6 | style 7 | include ../css/docs.css 8 | script. 9 | (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})() 10 | 11 | body 12 | block nav 13 | - nav_items = [{ title: 'Base CSS', name: 'index' }] 14 | - nav_items.push({ title: 'Layouts', name: 'layouts' }) 15 | - nav_items.push({ title: 'Components', name: 'components' }) 16 | 17 | nav.navbar 18 | ul.inner 19 | each item in nav_items 20 | li 21 | - klass = page_name === item.name ? 'active' : '' 22 | a(href= item.name + '.html', class= klass) 23 | = item.title 24 | header 25 | .inner 26 | h1 Arkui 27 | h2 Basic UI components for Douban Read. 28 | .container 29 | block content 30 | footer 31 | -------------------------------------------------------------------------------- /docs/jade/pages/base.jade: -------------------------------------------------------------------------------- 1 | extends ../layout 2 | 3 | block nav 4 | - page_name = 'index' 5 | 6 | block content 7 | - btn_th = ['Button', 'Input', 'class=""', 'Description'] 8 | - menu_items = [{ name: 'Typography', anchor: 'typography'}] 9 | - menu_items.push({ name: 'Buttons', anchor: 'buttons'}) 10 | - menu_items.push({ name: 'Tables', anchor: 'tables'}) 11 | - menu_items.push({ name: 'Forms', anchor: 'forms'}) 12 | - nav_mitems = [{ name: 'Code', url: 'https://github.com/mockee/arkui' }] 13 | - nav_mitems.push({ name: 'Issues', url: 'https://github.com/mockee/arkui/issues' }) 14 | 15 | - tags = ['小说', '悬疑', '推理', '神秘主义', '密室', '本格', '重口味', '成长'] 16 | - list_items = ['UNITAS', 'World Literature', 'Guokr Reading', 'Scientific American', 'World Architecture', 'Douban Read'] 17 | 18 | - btns = [{ text: '购买', sel: 'btn', desc: 'Standard button in Store' }] 19 | - btns.push({ text: '试读', sel: 'btn btn-minor', desc: 'Usually appears with standard button' }) 20 | - btns.push({ text: '分享', sel: 'btn btn-info', desc: 'Info button for the particular entry' }) 21 | - btns.push({ text: '阅读', sel: 'btn btn-read', desc: 'Douban Read exclusive button' }) 22 | - btns.push({ text: '发布', sel: 'btn btn-green', desc: 'Sage green button, used for submission' }) 23 | - btns.push({ text: '确定', sel: 'btn btn-disabled', desc: 'Disabled button' }) 24 | - btns.push({ text: '取消', sel: 'btn-link', desc: 'Link-like button' }) 25 | 26 | - btn_sizes = [{ text: '普通', sel: 'btn' }] 27 | - btn_sizes.push({ text: '大尺寸', sel: 'btn-large' }) 28 | - btn_sizes.push({ text: '超大尺寸', sel: 'btn-huge' }) 29 | 30 | - table_th = ['Name', 'Class', 'Description'] 31 | - table_td = [{ name: 'Default', sel: 'None', desc: 'No styles, just columns and rows' }] 32 | - table_td.push({ name: 'Basic', sel: '.table', desc: 'Only horizontal lines between rows' }) 33 | - table_td.push({ name: 'Bordered', sel: '.table-bordered', desc: 'Rounds corners and adds outer border' }) 34 | - table_td.push({ name: 'Striped', sel: '.table-striped', desc: 'Adds background color to odd rows' }) 35 | 36 | .mod#nav 37 | nav.nav.nav-store 38 | .inner 39 | ul.items 40 | each item in menu_items 41 | li 42 | a(href='#' + item.anchor)= item.name 43 | ul.items.items-minor 44 | each mitem in nav_mitems 45 | li 46 | a(href=mitem.url, target="_blank")= mitem.name 47 | 48 | .mod#typography 49 | .hd 50 | h3 Typography 51 | .bd 52 | .main 53 | .col.col9 54 | p 55 | code= '

' 56 | b Bold 57 | = ' text works for ' 58 | em emphasis 59 | code= 'emphasis' 60 | = ', but it is harder to read.' 61 | code= '

' 62 | p 63 | code= '

' 64 | = 'Type set in ' 65 | i italics 66 | code= 'italics' 67 | | can lose legibility. 68 | | Word shapes shift as sans serif fonts slant over to one side. 69 | | Spacing within and between letters gets lost as serif fonts 70 | | tend to get narrower and closer together in their italic form. 71 | | Readers have to slow down to process the word shapes. 72 | code= '

' 73 | .col.col4.col-right 74 | blockquote 75 | h1 h1 / 一级标题 76 | h2 h2 / 二级标题 77 | h3 h3 / 三级标题 78 | 79 | #lists.main 80 | article.col.col9 81 | section 82 | .hd 83 | h3 Two Column List 84 | code .list-col2 85 | .bd 86 | ul.list-col.list-col2 87 | each i in [1,2,3,4] 88 | li 134 x 297 89 | section 90 | .hd 91 | h3 Five Column List 92 | code .list-col5 93 | .bd 94 | ul.list-col.list-col5 95 | each i in [1,2,3,4,5] 96 | li cover 97 | 98 | aside.col.col4.col-right 99 | section 100 | .hd 101 | h3 Tags 102 | code .tags 103 | .bd 104 | ul.tags 105 | each tag in tags 106 | li 107 | a(href='#')= tag 108 | section 109 | .hd 110 | h3 List 111 | code .list 112 | .bd 113 | ul.list 114 | each item in list_items 115 | li= item 116 | section 117 | .hd 118 | h3 Lined List 119 | code .list-lined 120 | .bd 121 | ul.list-lined 122 | each item in list_items 123 | li= item 124 | 125 | .mod#buttons 126 | .hd 127 | h3 Buttons 128 | .bd 129 | .main 130 | article.col.col9 131 | table.table.table-bordered.table-zebra 132 | thead 133 | tr 134 | each th in btn_th 135 | th= th 136 | tbody 137 | each btn in btns 138 | tr 139 | td 140 | button(class=btn.sel)= btn.text 141 | td 142 | input(class=btn.sel 143 | type='button' 144 | value= btn.text) 145 | td 146 | code= btn.sel 147 | td= btn.desc 148 | aside.col.col4.col-right 149 | .button-sizes 150 | table.table.table-bordered.table-zebra 151 | thead 152 | tr 153 | th Button 154 | th class="" 155 | tbody 156 | each btn_size in btn_sizes 157 | tr 158 | td 159 | button.btn.btn-green(class=btn_size.sel) 160 | = btn_size.text 161 | td 162 | code= btn_size.sel 163 | 164 | .mod#tables 165 | .hd 166 | h3 Tables 167 | .bd 168 | .main 169 | article.col.col9 170 | table.table.table-striped 171 | thead 172 | tr 173 | each th in table_th 174 | th= th 175 | tbody 176 | each td in table_td 177 | tr 178 | td= td.name 179 | td 180 | code= td.sel 181 | td= td.desc 182 | aside.col.col4.col-right 183 | 184 | .mod#forms 185 | .hd 186 | h3 Forms 187 | .bd 188 | .main 189 | article.col.col9 190 | section 191 | .hd 192 | h3 Horizontal Form 193 | .bd 194 | form.form-horizontal 195 | fieldset 196 | .field-group 197 | label.field-label Text input 198 | .fields-inline 199 | input.col1(type='text', value='col1') 200 | input.col3.focused(type='text', value='col3 focused') 201 | span.help-inline Multi inline input 202 | .field-group 203 | label.field-label Radios 204 | .fields-inline 205 | each val in [1,2,3] 206 | if val === 1 207 | label.radio 208 | input(type='radio', name='radios', checked) 209 | = 'item' + val 210 | else 211 | label.radio 212 | input(type='radio', name='radios') 213 | = 'item' + val 214 | .field-group 215 | label.field-label Checkboxs 216 | .fields-inline 217 | each val in [1,2,3,4,5] 218 | if val === 1 219 | label.checkbox 220 | input(type='checkbox', checked) 221 | = 'item' + val 222 | else 223 | label.checkbox 224 | input(type='checkbox') 225 | = 'item' + val 226 | .field-group 227 | label.field-label Disabled input 228 | .fields 229 | input.col5.disabled( 230 | type='text' 231 | value='col5 disabled' 232 | disabled) 233 | p.help-block Block help text for current field 234 | .field-group 235 | label.field-label Multi-input 236 | .fields.multi-input 237 | each i in [1,2] 238 | input.col5(type='text', value='col5') 239 | span.help-inline Inline help text 240 | .field-group 241 | label.field-label File input 242 | .fields 243 | input(type='file') 244 | .field-group 245 | label.field-label Select list 246 | .fields 247 | select.col3 248 | each i in [1,2,3,4,5] 249 | option 250 | = 'list item' + i 251 | .field-group 252 | label.field-label Textarea 253 | .fields 254 | textarea.col5(rows='5', placeholder='placeholder') 255 | .field-group 256 | label.field-label Checkbox 257 | .fields 258 | label.checkbox 259 | input(type='checkbox') 260 | = 'I agree to the Douban Terms of Service' 261 | .form-actions 262 | button.btn.btn-minor.btn-large(type='cancel') 保存退出 263 | button.btn.btn-read.btn-large(type='submit') 下一步 264 | 265 | aside.col.col4.col-right 266 | section 267 | .hd 268 | h3 Vertical Form 269 | .bd 270 | form.form-vertical 271 | fieldset 272 | .field-group 273 | label.field-label Text input 274 | .fields 275 | input.col3(type='text', value='col3') 276 | .field-group 277 | label.field-label Input with error 278 | .fields 279 | input.col3.error(type='text' 280 | value='col3 error') 281 | span.help-inline.error Error info 282 | .field-group 283 | label.field-label Disabled input 284 | .fields 285 | input.col3.disabled( 286 | type='text' 287 | value='col3 disabled' 288 | disabled) 289 | .field-group 290 | label.field-label Readonly input 291 | .fields 292 | input.col3.readonly( 293 | type='text' 294 | value='col3 readonly' 295 | readonly) 296 | .field-group 297 | label.field-label Url 298 | .fields 299 | input.col3(type='url' 300 | placeholder='douban.com') 301 | .field-group 302 | label.field-label Email 303 | .fields 304 | input.col3(type='email' 305 | placeholder='mockee@douban.com') 306 | .field-group 307 | label.field-label Date 308 | .fields 309 | input.col3(type='date' 310 | placeholder='Month/Day/Year') 311 | .form-actions 312 | button.btn.btn-large(type='submit') 保存修改 313 | button.btn.btn-minor.btn-large(type='cancel') 取消 314 | -------------------------------------------------------------------------------- /docs/jade/pages/components.jade: -------------------------------------------------------------------------------- 1 | extends ../layout 2 | 3 | block nav 4 | - page_name = 'components' 5 | 6 | block content 7 | - menu_components_items = [{ name: 'Pagination', anchor: 'pagination'}] 8 | - menu_components_items.push({ name: 'Rating', anchor: 'Rating'}) 9 | 10 | - rating_list = [{ name: '力荐', rank: 5 }] 11 | - rating_list.push({ name: '推荐', rank: 4 }) 12 | - rating_list.push({ name: '还行', rank: 3 }) 13 | - rating_list.push({ name: '较差', rank: 2 }) 14 | - rating_list.push({ name: '很差', rank: 1 }) 15 | 16 | .mod#nav 17 | nav.nav.nav-store 18 | .inner 19 | ul.items 20 | each item in menu_components_items 21 | li 22 | a(href='#' + item.anchor)= item.name 23 | 24 | .main 25 | article.col.col9 26 | .mod#pagination 27 | .hd 28 | h3 Pagination 29 | .bd 30 | .pagination 31 | ul 32 | li.prev 33 | < 前页 34 | each i in [1,2,3,4,5,'...',17,18] 35 | li 36 | if (i === 1) 37 | a(href='#').active= i 38 | else if (i === '...') 39 | =i 40 | else 41 | a(href='#')= i 42 | li.next 43 | a(href='#') 后页 > 44 | .mod#alerts 45 | .hd 46 | h3 Alerts 47 | .bd 48 | .alert .alert 49 | aside.col.col4 50 | .mod#rating 51 | .hd 52 | h3 Rating 53 | .bd 54 | .rating-status 55 | .rating-result(title='5.0') 56 | span.rating-stars.stars-context.stars-3 57 | strong.rating-num 5.0 58 | ul.rating-stat.bar-chart 59 | each item in rating_list 60 | - rank_value = item.rank * 10 61 | - rank_class = 'stars-small-' + item.rank 62 | li.item 63 | span.rank-name= item.name 64 | span.rating-stars.stars-small-context(title= item.rank, class= rank_class) 65 | span.bar(style='width:' + rank_value + 'px') 66 | span.rank-rate= rank_value + '%' 67 | -------------------------------------------------------------------------------- /docs/jade/pages/layouts.jade: -------------------------------------------------------------------------------- 1 | extends ../layout 2 | 3 | block nav 4 | - page_name = 'layouts' 5 | 6 | block content 7 | .mod 8 | .hd 9 | h3 Basic Grid Example 10 | .bd.layout 11 | each i in [0,1,2,3,4,5,6,7] 12 | - l = 'col' + (i + 3) 13 | - r = 'col' + (10 - i) 14 | .main 15 | .col(class= l) 16 | code= '.col.' + l 17 | .col.col-right(class= r) 18 | code= '.col.' + r 19 | 20 | .mod 21 | .hd 22 | h3 Common Ground 23 | .bd.layout 24 | .main 25 | article.col.col9 26 | code article.col.col9 27 | aside.col.col4.col-right 28 | code aside.col.col4 29 | .main 30 | nav.col.col3 31 | code nav.col.col3 32 | article.col.col10.col-right 33 | code article.col.col10 34 | -------------------------------------------------------------------------------- /docs/styl/docs.styl: -------------------------------------------------------------------------------- 1 | @import "../../stylus/index" 2 | 3 | body 4 | padding: 15px 0 5 | 6 | .inner 7 | .container 8 | width: 936px 9 | margin: 0 auto 10 | 11 | nav.navbar 12 | top: 0 13 | left: 0 14 | z-index: 10 15 | position: fixed 16 | _position: absolute 17 | height: 28px 18 | width: 100% 19 | background-color: #000 20 | li 21 | inline-block() 22 | vertical-align: top 23 | a 24 | color: $grayLight 25 | inline-block() 26 | vertical-align: top 27 | padding: 5px 20px 28 | &.active 29 | &.active:hover 30 | cursor: default 31 | font-size: 14px 32 | color: #fff 33 | padding: 10px 20px 34 | _padding: 5px 20px 35 | background-color: $linkColor 36 | &:hover 37 | color: #fff 38 | background: none 39 | 40 | header 41 | padding: 40px 0 30px 20px 42 | margin-bottom: 40px 43 | background-color: #f7f7f7 44 | border-bottom: 1px solid #eee 45 | 46 | header h1 47 | font-weight: bold 48 | font-size: 60px 49 | line-height: 1 50 | 51 | header h2 52 | font-weight: normal 53 | color: $grayLight 54 | font-size: 16px 55 | 56 | .container 57 | min-width: 700px 58 | 59 | .mod 60 | margin-bottom: 30px 61 | .hd 62 | margin-bottom: 15px 63 | h3 64 | color: black 65 | font-size: 20px 66 | 67 | section .hd h3 68 | color: $gray 69 | font-size: 18px 70 | 71 | code 72 | font: normal $baseFontSize $monoFontFamily 73 | border: 1px solid #eaeaea 74 | background #f8f8f8 75 | padding: 1px 5px 76 | margin: 0 2px 77 | border-radius: 3px 78 | white-space: nowrap 79 | 80 | blockquote 81 | padding: 10px 15px 82 | background-color: #f7f7f7 83 | 84 | // docs table 85 | .table-zebra tbody tr:nth-child(odd) td 86 | .table-zebra tbody tr:nth-child(odd) th 87 | background-color: #f9f9f9 88 | 89 | .nav-store .inner 90 | width: 93% 91 | 92 | #typography p 93 | font-size: 13px 94 | 95 | #lists 96 | margin: 20px 0 -40px 97 | .list-col li 98 | color: #ddd 99 | height: 134px 100 | line-height: @height 101 | text-align: center 102 | background-color: #f3f3f3 103 | &:hover 104 | background-color: $grayLighter 105 | 106 | .list-col2 li 107 | font-size: 28px 108 | 109 | .list-col5 li 110 | font-size: 16px 111 | 112 | #lists code 113 | position: relative 114 | top: -2px 115 | margin-left: 10px 116 | font-size: $baseFontSize 117 | 118 | // Layouts 119 | .col-right 120 | float: right 121 | 122 | .layout 123 | .main 124 | .inner 125 | width: 13 * ($column + $gutter) 126 | margin: 0 auto 127 | .main 128 | margin-bottom: 20px 129 | header 130 | margin-bottom: 30px 131 | background-color: #ebebe4 132 | footer 133 | padding: 0 10px 134 | 135 | .layout .col 136 | height: 34px 137 | position: relative 138 | background-color: #f3f3f3 139 | &:hover 140 | background-color: $grayLighter 141 | code 142 | position: absolute 143 | top: 6px 144 | left: 4px 145 | 146 | // Components 147 | .pagination 148 | padding-top: 0 149 | -------------------------------------------------------------------------------- /fonts/arkicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mockee/arkui/ac3996ceb5bff399b16808f7a1e3d8cf3a481866/fonts/arkicons.eot -------------------------------------------------------------------------------- /fonts/arkicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /fonts/arkicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mockee/arkui/ac3996ceb5bff399b16808f7a1e3d8cf3a481866/fonts/arkicons.ttf -------------------------------------------------------------------------------- /fonts/arkicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mockee/arkui/ac3996ceb5bff399b16808f7a1e3d8cf3a481866/fonts/arkicons.woff -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Arkui", 3 | "version": "0.1.0", 4 | "description": "Basic UI components for Douban Read.", 5 | "devDependencies": { 6 | "grunt": "~0.4.2", 7 | "grunt-contrib-watch": "~0.6.1", 8 | "grunt-contrib-jshint": "~0.6.3", 9 | "grunt-contrib-jade": "~0.11.0", 10 | "grunt-contrib-stylus": "~0.16.0", 11 | "grunt-contrib-uglify": "~0.4.0", 12 | "grunt-browserify": "~2.1.0", 13 | "grunt-contrib-connect": "~0.7.1", 14 | "grunt-contrib-copy": "~0.5.0", 15 | "grunt-string-replace": "~0.2.7", 16 | "stylus": "~0.45.1", 17 | "fluidity": "~0.2.0" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "https://github.com/mockee/arkui.git" 22 | }, 23 | "bugs": { 24 | "url": "https://github.com/mockee/arkui/issues" 25 | }, 26 | "license": { 27 | "type": "MIT", 28 | "url": "https://github.com/twbs/bootstrap/blob/master/LICENSE" 29 | }, 30 | "engines": { 31 | "node": "~0.10.15" 32 | }, 33 | "keywords": [ 34 | "css", 35 | "style", 36 | "frontend", 37 | "components" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /pics/icon-alert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mockee/arkui/ac3996ceb5bff399b16808f7a1e3d8cf3a481866/pics/icon-alert.png -------------------------------------------------------------------------------- /pics/rating-stars-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mockee/arkui/ac3996ceb5bff399b16808f7a1e3d8cf3a481866/pics/rating-stars-small.png -------------------------------------------------------------------------------- /pics/rating-stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mockee/arkui/ac3996ceb5bff399b16808f7a1e3d8cf3a481866/pics/rating-stars.png -------------------------------------------------------------------------------- /stylus/arkicons.styl: -------------------------------------------------------------------------------- 1 | .arkicon-star 2 | .arkicon-share 3 | .arkicon-salon 4 | .arkicon-remark 5 | .arkicon-remark-dash 6 | .arkicon-pin-on 7 | .arkicon-pin-off 8 | .arkicon-list 9 | .arkicon-layout 10 | .arkicon-layout.vertical 11 | .arkicon-layout-vertical 12 | .arkicon-helper 13 | .arkicon-fullscreen 14 | .arkicon-notification 15 | .arkicon-comment 16 | .arkicon-bookmark 17 | .arkicon-bookmarks 18 | .arkicon-back 19 | .arkicon-annotation 20 | .arkicon-annotations 21 | .arkicon-annotations-bold 22 | .arkicon-zoom-in 23 | .arkicon-zoom-out 24 | .arkicon-expand 25 | .arkicon-copy 26 | .arkicon-angle-right 27 | .arkicon-angle-left 28 | .arkicon-times 29 | font-family: 'arkicons' 30 | color: #7e8282 31 | speak: none 32 | font-style: normal 33 | font-weight: normal 34 | font-variant: normal 35 | text-transform: none 36 | line-height: 1 37 | -webkit-font-smoothing: antialiased 38 | -moz-osx-font-smoothing: grayscale 39 | 40 | .arkicon-zoom-out:before 41 | font-size: 1.375em 42 | content: "\e600" 43 | 44 | .arkicon-zoom-in:before 45 | font-size: 1.375em 46 | content: "\e601" 47 | 48 | .arkicon-star:before 49 | font-size: 1.125em 50 | content: "\e602" 51 | 52 | .arkicon-share:before 53 | font-size: 1.375em 54 | content: "\e603" 55 | 56 | .arkicon-salon:before 57 | font-size: 1.1875em 58 | content: "\e604" 59 | 60 | .arkicon-remark:before 61 | content: "\e605" 62 | 63 | .arkicon-remark-dash:before 64 | content: "\e606" 65 | 66 | .arkicon-pin-on:before 67 | content: "\e607" 68 | 69 | .arkicon-pin-off:before 70 | content: "\e608" 71 | 72 | .arkicon-notification:before 73 | font-size: 1.375em 74 | content: "\e609" 75 | 76 | .arkicon-list:before 77 | font-size: 0.8125em 78 | content: "\e60a" 79 | 80 | .arkicon-layout.vertical:before 81 | .arkicon-layout-vertical:before 82 | content: "\e60b" 83 | 84 | .arkicon-layout:before 85 | content: "\e60c" 86 | 87 | .arkicon-helper:before 88 | content: "\e60d" 89 | 90 | .arkicon-fullscreen:before 91 | content: "\e60e" 92 | 93 | .arkicon-expand:before 94 | font-size: 1.375em 95 | content: "\e60f" 96 | 97 | .arkicon-copy:before 98 | content: "\e610" 99 | 100 | .arkicon-comment:before 101 | content: "\e611" 102 | 103 | .arkicon-bookmarks:before 104 | font-size: 1.125em 105 | content: "\e612" 106 | 107 | .arkicon-bookmark:before 108 | content: "\e613" 109 | 110 | .arkicon-back:before 111 | font-size: 0.875em 112 | content: "\e614" 113 | 114 | .arkicon-annotations:before 115 | font-size: 1.1875em 116 | content: "\e615" 117 | 118 | .arkicon-angle-right:before 119 | content: "\e616" 120 | 121 | .arkicon-annotations-bold:before 122 | content: "\e617" 123 | 124 | .arkicon-annotation:before 125 | content: "\e618" 126 | 127 | .arkicon-times:before 128 | content: "\e619" 129 | 130 | .arkicon-angle-left:before 131 | content: "\e61a" 132 | -------------------------------------------------------------------------------- /stylus/button.styl: -------------------------------------------------------------------------------- 1 | @import "mixins" 2 | @import "variable" 3 | 4 | .btn 5 | .btn:hover 6 | inline-block() 7 | font-size: 13px 8 | color: white 9 | font-family: inherit 10 | padding: 4px 12px 11 | margin-bottom: 0 12 | line-height: 1.1 13 | background-color: $redBrown 14 | border: 1px solid @background-color 15 | border-radius: 2px 16 | cursor: pointer 17 | vertical-align: middle 18 | text-decoration: none 19 | .btn:hover 20 | border-color: $redBrownDark 21 | background-color: @border-color 22 | 23 | .btn-info 24 | .btn-info:hover 25 | color: #825d5b 26 | border-color: #d3d3cc 27 | background-color: #edede3 28 | 29 | .btn-info:hover 30 | background-color: #dbdbd4 31 | 32 | .btn-sample 33 | border-color: #999995 34 | background-color: @border-color 35 | &:hover 36 | border-color: #b2b2ae 37 | background-color: @border-color 38 | 39 | .btn-minor 40 | color: #888 41 | border-color: #ebebe5 42 | background-color: @border-color 43 | &:hover 44 | color: @color 45 | border-color: #f5f5ef 46 | background-color: @border-color 47 | 48 | .btn-read 49 | border-color: #6e839a 50 | background-color: @border-color 51 | &:hover 52 | border-color: #7a8ea3 53 | background-color: @border-color 54 | 55 | .btn-green 56 | .btn-green:hover 57 | background-color: $sageGreen 58 | border-color: $sageGreen 59 | 60 | .btn-disabled 61 | .btn-disabled:hover 62 | color: #aaa 63 | border-color: #ddd 64 | background-color: $grayLighter 65 | padding: 4px 12px 66 | cursor: not-allowed 67 | 68 | .btn-large 69 | .btn-large:hover 70 | padding: 6px 14px 71 | 72 | .btn-huge 73 | .btn-huge:hover 74 | font-size: 16px 75 | padding: 10px 40px 76 | 77 | input 78 | button 79 | &.btn-link 80 | display: inline 81 | color: $linkColor 82 | line-height: 1 83 | padding: 1px 0 84 | vertical-align: middle 85 | font-size: $baseFontSize 86 | border: none 87 | background: none 88 | &:hover 89 | color: #fff 90 | background: $linkColor 91 | 92 | // for Firefox 93 | unquote(" 94 | @-moz-document url-prefix() { 95 | input.btn 96 | input.btn:hover { 97 | padding: 3px 12px; 98 | } 99 | } 100 | ") 101 | 102 | // for IE 6/7 103 | input.btn 104 | input.btn:hover 105 | button.btn 106 | button.btn:hover 107 | *padding-bottom: 0 108 | _padding: 4px 12px 109 | _line-height: 11px 110 | 111 | // for IE 9 112 | :root 113 | .btn 114 | .btn:hover 115 | padding: unquote("5px 12px 3px\9") 116 | 117 | .btn-large 118 | .btn-large:hover 119 | padding: unquote("6px 14px\9") 120 | 121 | .btn-huge 122 | .btn-huge:hover 123 | padding: unquote("10px 40px\9") 124 | 125 | input.btn 126 | _padding-top: 6px 127 | _padding-bottom: 2px 128 | 129 | .btn-large 130 | .btn-large:hover 131 | *line-height: 18px 132 | *padding-top: 3px 133 | 134 | input.btn-huge 135 | input.btn-huge:hover 136 | button.btn-huge 137 | button.btn-huge:hover 138 | *padding: 8px 40px 6px 139 | _padding: 8px 40px 12px 140 | 141 | input 142 | button 143 | &.btn-link 144 | _padding: 3px 0 0 145 | *height: $baseFontSize 146 | *cursor: pointer 147 | -------------------------------------------------------------------------------- /stylus/component.styl: -------------------------------------------------------------------------------- 1 | @import "mod/rating" 2 | @import "mod/pagination" 3 | @import "mod/alert" 4 | -------------------------------------------------------------------------------- /stylus/form.styl: -------------------------------------------------------------------------------- 1 | @import "mixins" 2 | @import "variable" 3 | 4 | label 5 | input 6 | button 7 | select 8 | textarea 9 | font-size: 13px 10 | font-family: inherit 11 | line-height: $baseLineHeight 12 | 13 | input 14 | button 15 | select 16 | textarea 17 | font-family: $baseFontFamily 18 | 19 | textarea 20 | input[type="text"] 21 | input[type="password"] 22 | input[type="datetime"] 23 | input[type="datetime-local"] 24 | input[type="date"] 25 | input[type="month"] 26 | input[type="time"] 27 | input[type="week"] 28 | input[type="number"] 29 | input[type="email"] 30 | input[type="url"] 31 | input[type="search"] 32 | input[type="tel"] 33 | input[type="color"] 34 | inline-block() 35 | padding: 4px 36 | height: 20px 37 | line-height: 19px 38 | border: 1px solid #ccc 39 | &.focused 40 | &:focus 41 | outline: 0 42 | border-color: #aaa 43 | &.error 44 | border-color: $errorColor 45 | border-right-width: 2px 46 | 47 | textarea 48 | height: auto 49 | 50 | .field-group 51 | margin-bottom: 15px 52 | 53 | .field-label 54 | color: $grayDark 55 | font-size: 14px 56 | 57 | select 58 | input[type="file"] 59 | height: 28px 60 | line-height: @height 61 | 62 | select 63 | border: 1px solid #ccc 64 | 65 | input[disabled] 66 | select[disabled] 67 | textarea[disabled] 68 | input[readonly] 69 | select[readonly] 70 | textarea[readonly] 71 | color: #aaa 72 | background-color: $grayLighter 73 | border: 1px solid #ddd 74 | 75 | input[disabled] 76 | select[disabled] 77 | textarea[disabled] 78 | cursor: not-allowed 79 | 80 | input[readonly] 81 | select[readonly] 82 | textarea[readonly] 83 | color: $grayLight 84 | cursor: text 85 | background-color: #f7f7f7 86 | 87 | // Radios & Checkboxs 88 | input[type="radio"] 89 | input[type="checkbox"] 90 | margin: 3px 0 91 | *margin-top: 0 92 | line-height: normal 93 | 94 | .radio 95 | .checkbox 96 | inline-block() 97 | color: $gray 98 | margin: 5px 15px 0 0 99 | 100 | .radio input[type="radio"] 101 | .checkbox input[type="checkbox"] 102 | float: left 103 | padding: 0 104 | margin-right: 5px 105 | 106 | .help-block 107 | color: #999 108 | margin: 5px 0 0 109 | 110 | .help-inline 111 | inline-block() 112 | color: #999 113 | padding-left: 8px 114 | vertical-align: middle 115 | 116 | .error 117 | color: $errorColor 118 | 119 | .form-actions 120 | button 121 | margin-right: 5px 122 | 123 | .fields-inline 124 | input 125 | margin-right: 5px 126 | 127 | .form-horizontal 128 | .field-group:after 129 | display: table 130 | content: '' 131 | clear: both 132 | 133 | .field-group 134 | *zoom: 1 135 | 136 | .field-label 137 | float: left 138 | padding-left: 5px 139 | width: 95px 140 | margin-top: 3px 141 | text-align: right 142 | 143 | .fields 144 | .fields-inline 145 | margin-left: 120px 146 | 147 | .form-actions 148 | margin: 10px 0 0 120px 149 | 150 | .form-vertical 151 | .form-actions 152 | padding-top: 8px 153 | .field-label 154 | display: block 155 | margin-bottom: 3px 156 | 157 | .multi-input input 158 | margin-bottom: 8px 159 | 160 | .multi-input .help-inline 161 | margin-top: -8px 162 | -------------------------------------------------------------------------------- /stylus/iconic.styl: -------------------------------------------------------------------------------- 1 | iconic-font(name='arkicons', path='/fonts/', fontFamily='arkicons') 2 | @font-face 3 | // IE9 Compat modes: eot 4 | // IE6-IE8: #iefix 5 | // Safari, Android, iOS: ttf 6 | // Legacy iOS: svg 7 | font-family: fontFamily 8 | src: url(path + name + '.eot') 9 | src: url(path + name + '.eot?#iefix') format('embedded-opentype'), 10 | url(path + name + '.woff') format('woff'), 11 | url(path + name + '.ttf') format('truetype'), 12 | url(path + name + '.svg#arkicons') format('svg') 13 | font-weight: normal 14 | font-style: normal 15 | 16 | // You can use data attributes for inserting icons 17 | [data-icon]:before 18 | font-family: 'arkicons' 19 | content: attr(data-icon) 20 | speak: none 21 | font-weight: normal 22 | font-variant: normal 23 | text-transform: none 24 | line-height: 1 25 | -webkit-font-smoothing: antialiased 26 | -moz-osx-font-smoothing: grayscale 27 | -------------------------------------------------------------------------------- /stylus/index.styl: -------------------------------------------------------------------------------- 1 | @import "reset" 2 | @import "mixins" 3 | @import "type" 4 | @import "layout" 5 | @import "button" 6 | @import "nav" 7 | @import "table" 8 | @import "form" 9 | @import "component" 10 | -------------------------------------------------------------------------------- /stylus/layout.styl: -------------------------------------------------------------------------------- 1 | @import "mixins" 2 | @import "variable" 3 | 4 | // Grid System 5 | grid-width(col) 6 | col * ($column + $gutter) - $gutter 7 | 8 | /* usage: 9 | * ul.list-col5 10 | * list-colums(5, 10, 120px, 110px) 11 | * li 12 | * padding: 0 5px 13 | */ 14 | 15 | colWidth = rawColWidth + padding + borderWidth 16 | 17 | list-columns(col, parentCol, colWidth, rawColWidth = colWidth) 18 | listWidth = grid-width(parentCol) 19 | colPadding = (listWidth - colWidth * col) / (col - 1) 20 | width: listWidth + colPadding 21 | li 22 | width: rawColWidth 23 | margin-right: colPadding 24 | 25 | for col in 1..16 26 | .col{col} 27 | width: grid-width(col) 28 | 29 | .hd 30 | .main 31 | clearfix() 32 | 33 | .col 34 | float: left 35 | 36 | .main .col:last-child 37 | float: right 38 | 39 | section 40 | margin-bottom: 20px 41 | -------------------------------------------------------------------------------- /stylus/mixins/css3/background.styl: -------------------------------------------------------------------------------- 1 | background-size() 2 | -webkit-background-size: arguments 3 | -moz-background-size: arguments 4 | background-size: arguments 5 | -------------------------------------------------------------------------------- /stylus/mixins/css3/border.styl: -------------------------------------------------------------------------------- 1 | @import "vendor" 2 | 3 | border-radius() 4 | vendor('border-radius', arguments, only: webkit official) 5 | 6 | border-top-left-radius() 7 | vendor('border-top-left-radius', arguments, only: webkit official) 8 | 9 | border-top-right-radius() 10 | vendor('border-top-right-radius', arguments, only: webkit official) 11 | 12 | border-bottom-left-radius() 13 | vendor('border-bottom-left-radius', arguments, only: webkit official) 14 | 15 | border-bottom-right-radius() 16 | vendor('border-bottom-right-radius', arguments, only: webkit official) 17 | 18 | 19 | /** 20 | * Actually there's a CSS3 "Backgrounds and Borders Module" containing all 21 | * the specs of B&B and box-shadow. 22 | */ 23 | 24 | box-shadow() 25 | vendor('box-shadow', arguments, only: webkit official) 26 | 27 | box-sizing() 28 | vendor('box-sizing', arguments, only: webkit moz official) 29 | -------------------------------------------------------------------------------- /stylus/mixins/css3/effect.styl: -------------------------------------------------------------------------------- 1 | @import "vendor" 2 | 3 | transform-origin() 4 | vendor('transform-origin', arguments) 5 | 6 | transform() 7 | vendor('transform', arguments) 8 | 9 | transition() 10 | vendor('transition', arguments) 11 | 12 | transition-property() 13 | vendor('transition-property', arguments) 14 | 15 | transition-duration() 16 | vendor('transition-duration', arguments) 17 | 18 | transition-timing-function() 19 | vendor('transition-timing-function', arguments) 20 | 21 | transition-delay() 22 | vendor('transition-delay', arguments) 23 | -------------------------------------------------------------------------------- /stylus/mixins/css3/gradients.styl: -------------------------------------------------------------------------------- 1 | /* 2 | * From https://github.com/visionmedia/nib/blob/master/lib/nib/gradients.styl 3 | */ 4 | 5 | /* 6 | * Replace the given str with val in the expr. 7 | */ 8 | 9 | replace(expr, str, val) 10 | expr = clone(expr) 11 | for e, i in expr 12 | if length(e) > 1 13 | expr[i] = replace(e, str, val) 14 | else 15 | if str == e 16 | expr[i] = val 17 | expr 18 | 19 | /* 20 | * Normalize gradient points. 21 | */ 22 | 23 | grad-point(pos) 24 | if length(pos) == 1 25 | return left pos if pos in (top bottom) 26 | return pos top if pos in (left right) 27 | else if pos[0] in (top bottom) 28 | pos[1] pos[0] 29 | else 30 | pos 31 | 32 | /* 33 | * Implicit color stop position. 34 | */ 35 | 36 | pos-in-stops(i, stops) 37 | len = length(stops) 38 | if len - 1 == i 39 | 100% 40 | else if i 41 | unit(i / len * 100, '%') 42 | else 43 | 0% 44 | 45 | /* 46 | * Normalize color stops: 47 | * 48 | * - (color pos) -> (pos color) 49 | * - (color) -> (implied-pos color) 50 | * 51 | */ 52 | 53 | normalize-stops(stops) 54 | stops = clone(stops) 55 | for stop, i in stops 56 | if length(stop) == 1 57 | color = stop[0] 58 | stop[0] = pos-in-stops(i, stops) 59 | stop[1] = color 60 | else if typeof(stop[1]) == 'unit' 61 | pos = stop[1] 62 | stop[1] = stop[0] 63 | stop[0] = pos 64 | stops 65 | 66 | /* 67 | * Join color stops with the given translation function. 68 | */ 69 | 70 | join-stops(stops, translate) 71 | str = '' 72 | len = length(stops) 73 | for stop, i in stops 74 | str += ', ' if i 75 | pos = stop[0] 76 | color = stop[1] 77 | str += translate(color, pos) 78 | unquote(str) 79 | 80 | /* 81 | * Legacy Webkit color stop. 82 | */ 83 | 84 | webkit-stop(color, pos) 85 | 'color-stop(%d, %s)' % (pos / 100 color) 86 | 87 | /* 88 | * Standard color stop. 89 | */ 90 | 91 | std-stop(color, pos) 92 | '%s %s' % (color pos) 93 | 94 | /* 95 | * Create a linear gradient with the given start position 96 | * and variable number of color stops. 97 | * 98 | * Examples: 99 | * 100 | * background: linear-gradient(top, red, green, blue) 101 | * background: linear-gradient(bottom, red, green 50%, blue) 102 | * background: linear-gradient(bottom, red, 50% green, blue) 103 | * background: linear-gradient(bottom, red, 50% green, 90% white, blue) 104 | * 105 | */ 106 | 107 | linear-gradient(start, stops...) 108 | error('color stops required') unless length(stops) 109 | prop = current-property[0] 110 | val = current-property[1] 111 | 112 | if start is a 'color' 113 | unshift(stops, start) 114 | start = top 115 | 116 | stops = normalize-stops(stops) 117 | 118 | // gradient image 119 | if start[0] is a 'unit' 120 | if has-canvas 121 | img = linear-gradient-image(start, stops) 122 | add-property(prop, replace(val, '__CALL__', img)) 123 | start = start[1] 124 | 125 | // legacy webkit 126 | end = grad-point(opposite-position(start)) 127 | webkit-legacy = '-webkit-gradient(linear, %s, %s, %s)' % (grad-point(start) end join-stops(stops, webkit-stop)) 128 | add-property(prop, replace(val, '__CALL__', webkit-legacy)) 129 | 130 | // vendor prefixed 131 | stops = join-stops(stops, std-stop) 132 | for prefix in vendor-prefixes 133 | unless prefix == official 134 | gradient = '-%s-linear-gradient(%s, %s)' % (prefix start stops) 135 | add-property(prop, replace(val, '__CALL__', gradient)) 136 | 137 | // standard 138 | 'linear-gradient(%s, %s)' % (start stops) 139 | 140 | /* 141 | * Create a linear gradient image with the given start position 142 | * and variable number of color stops. 143 | */ 144 | 145 | linear-gradient-image(start, stops...) 146 | error('node-canvas is required for linear-gradient-image()') unless has-canvas 147 | stops = stops[0] if length(stops) == 1 148 | error('gradient image size required') unless start[0] is a 'unit' 149 | size = start[0] 150 | start = start[1] or 'top' 151 | grad = create-gradient-image(size, start) 152 | stops = normalize-stops(stops) 153 | add-color-stop(grad, stop[0], stop[1]) for stop in stops 154 | 'url(%s)' % gradient-data-uri(grad) 155 | -------------------------------------------------------------------------------- /stylus/mixins/css3/index.styl: -------------------------------------------------------------------------------- 1 | @import 'background' 2 | @import 'gradients' 3 | @import 'border' 4 | @import 'select' 5 | @import 'effect' 6 | -------------------------------------------------------------------------------- /stylus/mixins/css3/select.styl: -------------------------------------------------------------------------------- 1 | @import "vendor" 2 | 3 | user-select(value) 4 | vendor('user-select', arguments, only: webkit moz ms) 5 | 6 | set-selection-color(hash) 7 | ::selection 8 | background: hash 9 | ::-moz-selection 10 | background: hash 11 | -------------------------------------------------------------------------------- /stylus/mixins/css3/vendor.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * Refer to Nib: 3 | * repo: https://github.com/visionmedia/nib/blob/master/lib/nib/vendor.styl 4 | * commit: 626921de2d8ee83adb727325f4a7043bb82a42cf 5 | */ 6 | 7 | is-comma-list() 8 | return match('\), \(', ''+arguments) 9 | 10 | literal-join(string, literals) 11 | result = unquote('') 12 | first = true 13 | for args in literals 14 | subresult = unquote('') 15 | for arg in args 16 | subresult = subresult arg 17 | if first 18 | result = subresult 19 | first = false 20 | else 21 | result = s('%s%s%s', result, unquote(string), subresult) 22 | return result 23 | 24 | replace-args(args,argument,val) 25 | result = () 26 | // Checking if there are values divided by comma 27 | if is-comma-list(args) 28 | for subargs in args 29 | subresult = () 30 | for arg in subargs 31 | arg = unquote(val) if arg == argument 32 | push(subresult, arg) 33 | subresult = literal-join(' ', subresult) if length(subresult) > 1 34 | push(result, subresult) 35 | result = literal-join(', ', result) 36 | else 37 | for arg in args 38 | arg = unquote(val) if arg == argument 39 | push(result, arg) 40 | return result 41 | 42 | vendor-prefixes ?= webkit moz o ms official 43 | 44 | vendor(prop, args, only = null, ignore = null) 45 | for prefix in vendor-prefixes 46 | unless (only and !(prefix in only)) or (ignore and prefix in ignore) 47 | if official == prefix 48 | {prop}: args 49 | else 50 | newargs = args 51 | // Adjusting the args if needed 52 | if prop in ('transition' 'transition-property') 53 | newargs = replace-args(args, transform, '-' + prefix + '-transform') 54 | {'-' + prefix + '-' + prop}: newargs 55 | -------------------------------------------------------------------------------- /stylus/mixins/index.styl: -------------------------------------------------------------------------------- 1 | @import "css3" 2 | @import "polyfill" 3 | @import "typography" 4 | -------------------------------------------------------------------------------- /stylus/mixins/polyfill.styl: -------------------------------------------------------------------------------- 1 | clearfix() 2 | *zoom: 1 3 | &:before 4 | &:after 5 | display: table 6 | content: '' 7 | line-height: 0 8 | &:after 9 | clear: both 10 | 11 | inline-block() 12 | display: inline-block 13 | *display: inline 14 | *zoom: 1 15 | 16 | opacity(alpha) 17 | opacity: alpha 18 | filter: unquote('alpha(opacity=' + alpha*100 + ')'); 19 | 20 | background-image-uri(img) 21 | background-image: uri(img) 22 | *background-image: url(img) 23 | _background-image: url(img) 24 | -------------------------------------------------------------------------------- /stylus/mixins/typography.styl: -------------------------------------------------------------------------------- 1 | // Hiragino Sans GB (冬青黑体简体中文) 2 | // Mac OS X included regular(W3) and bold(W6) two weights since 10.6 3 | 4 | // STHeiti (华文黑体) 5 | // STHeitiSC-Thin added in iOS 7. http://d.pr/f/Y3jb 6 | 7 | // Microsoft YaHei (微软雅黑) 8 | // A OpenType font with ClearType support 9 | // Designer: Founder Group 10 | // Hinting: Monotype Corporation 11 | 12 | // http://en.wikipedia.org/wiki/WenQuanYi 13 | // http://wenq.org/wqy2/index.cgi?FontGuide 14 | // WenQuanYi Micro Hei (文泉驿微米黑) 15 | // WenQuanYi Micro Hei Mono (文泉驿等宽微米黑) 16 | // WenQuanYi Zen Hei (文泉驿正黑) 17 | // WenQuanYi Zen Hei Mono (文泉驿等宽正黑) 18 | // WenQuanYi Zen Hei Sharp (文泉驿点阵正黑) [ignore] 19 | 20 | // Apple LiGothic Medium / LiGothicMed (蘋果儷中黑) 21 | // SimHei (中易黑体) [ignore] 22 | 23 | // STKaiti (华文楷体) 24 | // AR PL UKai (AR PL 中楷) 25 | // AR PL KaitiM GB (文鼎 PL 简中楷) 26 | // KaiTi (楷体) 27 | // Kaiti_GB2312 (中易楷体) 28 | // TW-Kai (全字庫正楷體) 29 | 30 | $HeiFont = "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", LiGothicMed 31 | $KaiFont = STKaiti, "AR PL UKai", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW-Kai" 32 | $EnFont = "Helvetica Neue", Helvetica, "Lucida Grande", "Luxi Sans", Arial 33 | $CodeFont = Consolas, "Liberation Mono", "BitStream Vera Sans Mono", CourierNewPS-BoldMT, "Courier New", Courier, monospace 34 | 35 | word-wrap() 36 | word-wrap: arguments 37 | -ms-word-wrap: arguments 38 | 39 | text-justify() 40 | text-justify: arguments 41 | -ms-text-justify: arguments 42 | 43 | hyphens() 44 | -webkit-hyphens: arguments 45 | -moz-hyphens: arguments 46 | -ms-hyphens: arguments 47 | hyphens: arguments 48 | 49 | ellipsis(no-wrap = true) 50 | if no-wrap 51 | white-space: nowrap 52 | overflow: hidden 53 | text-overflow: ellipsis 54 | -------------------------------------------------------------------------------- /stylus/mod/alert.styl: -------------------------------------------------------------------------------- 1 | @import "../variable" 2 | 3 | .alert 4 | color: #863434 5 | border-width: 1px 6 | border-style: solid 7 | border-color: #f2f2f2 8 | padding: 12px 12px 12px 35px 9 | background: @border-color url(/pics/icon-alert.png) no-repeat 10px center 10 | -------------------------------------------------------------------------------- /stylus/mod/pagination.styl: -------------------------------------------------------------------------------- 1 | @import "../variable" 2 | 3 | .pagination 4 | padding-top: 25px 5 | 6 | .pagination ul 7 | text-align: center 8 | 9 | .pagination li 10 | display: inline 11 | color: #aaa 12 | font-size: 14px 13 | margin: 0 4px 14 | 15 | .pagination a 16 | inline-block() 17 | line-height: 1 18 | padding: 2px 5px 19 | 20 | .pagination .active 21 | color: #fff 22 | cursor: default 23 | background-color: $linkColor 24 | 25 | .pagination .prev 26 | margin-right: 15px 27 | 28 | .pagination .next 29 | margin-left: 15px 30 | -------------------------------------------------------------------------------- /stylus/mod/rating.styl: -------------------------------------------------------------------------------- 1 | @import "../mixins" 2 | @import "../variable" 3 | 4 | .stars-context 5 | .stars-small-context 6 | inline-block() 7 | vertical-align: -5px 8 | overflow: hidden 9 | width: 96px 10 | height: 18px 11 | margin-left: 4px 12 | background: url(/pics/rating-stars.png) no-repeat 13 | 14 | .stars- 15 | .stars-null 16 | .stars-0 17 | background-position: 0px -110px 18 | 19 | .stars-1 20 | background-position: 0px -88px 21 | 22 | .stars-2 23 | background-position: 0px -66px 24 | 25 | .stars-3 26 | background-position: 0px -44px 27 | 28 | .stars-4 29 | background-position: 0px -22px 30 | 31 | .stars-5 32 | background-position: 0px 0px 33 | 34 | .stars-small-context 35 | width: 75px 36 | margin-left: 5px 37 | background-image: url(/pics/rating-stars-small.png) 38 | *vertical-align: -2px 39 | 40 | .stars-small-0 41 | background-position: 0px -99px 42 | 43 | .stars-small-1 44 | background-position: 0px -79px 45 | 46 | .stars-small-2 47 | background-position: 0px -59px 48 | 49 | .stars-small-3 50 | background-position: 0px -38px 51 | 52 | .stars-small-4 53 | background-position: 0px -18px 54 | 55 | .stars-small-5 56 | background-position: 0px 1px 57 | 58 | .rating-status 59 | margin-top: 30px 60 | .rating-stars 61 | vertical-align: middle 62 | .rating-num 63 | inline-block() 64 | color: #825d5b 65 | font-size: 14px 66 | vertical-align: top 67 | padding-left: 5px 68 | 69 | .rating-stat 70 | margin-top: 20px 71 | .item 72 | margin-bottom: 5px 73 | color: #111 74 | font-size: 0 75 | .rank-name 76 | .bar 77 | .rank-rate 78 | .rating-stars 79 | vertical-align: middle 80 | .rating-stars 81 | margin-top: 1px; 82 | .rank-name 83 | color: #666 84 | font-size: 12px 85 | .bar 86 | margin: 0 8px 0 2px 87 | .rank-rate 88 | color: #111 89 | font-size: 12px 90 | 91 | .bar-chart .bar 92 | inline-block() 93 | background-color: #825d5b 94 | height: 15px 95 | 96 | .star-region 97 | float: left 98 | opacity(0) 99 | cursor: pointer 100 | .stars-context 101 | .star-region 102 | width: 19px 103 | height: 18px 104 | .stars-small-context 105 | .star-region 106 | width: 13px 107 | height: 13px 108 | margin-right: 2px 109 | 110 | .rating 111 | .label 112 | margin-right: 5px 113 | -------------------------------------------------------------------------------- /stylus/nav.styl: -------------------------------------------------------------------------------- 1 | .nav:after 2 | .items-minor:after 3 | display: table 4 | content: '' 5 | clear: both 6 | 7 | .nav 8 | padding: 9px 0 10px 9 | background-color: #f6f6f1 10 | border-top: 1px solid #eee 11 | .inner 12 | margin: 0 auto 13 | 14 | .items 15 | float: left 16 | li 17 | inline-block() 18 | margin-right: 30px 19 | color: #4b4b4b 20 | font-size: 13px 21 | line-height: 1 22 | a 23 | padding: 3px 6px 24 | a 25 | display: block 26 | .on a 27 | & 28 | &:hover 29 | color: #fff 30 | background: #aaa 31 | 32 | .items-minor 33 | float: right 34 | margin-top: 6px 35 | line-height: 1 36 | a 37 | display: inline 38 | line-height: 1 39 | padding: 0 40 | li 41 | display: inline 42 | font-size: $baseFontSize 43 | margin-right: 10px 44 | white-space: nowrap 45 | &:first-child:before 46 | content: '' 47 | margin: 0 48 | &:before 49 | content: '|' 50 | color: #adada9 51 | margin-right: 10px 52 | &:last-child 53 | margin-right: 0 54 | 55 | // for IE 6&7 56 | .nav 57 | .items-minor 58 | *zoom: 1 59 | 60 | .nav .items-minor 61 | *margin-top: 4px 62 | 63 | .items-minor a 64 | *line-height: 1.2 65 | -------------------------------------------------------------------------------- /stylus/reset.styl: -------------------------------------------------------------------------------- 1 | article 2 | aside 3 | details 4 | figcaption 5 | figure 6 | footer 7 | header 8 | hgroup 9 | nav 10 | section 11 | display: block 12 | 13 | body, div 14 | dl, dt, dd 15 | ul, ol, li 16 | h1, h2, h3, h4, h5, h6 17 | pre, form, fieldset, input, button, textarea 18 | p, blockquote 19 | th, td 20 | margin: 0 21 | padding: 0 22 | 23 | table 24 | border-collapse: collapse 25 | border-spacing: 0 26 | 27 | img 28 | fieldset 29 | border: 0 30 | 31 | address 32 | caption, cite 33 | code, dfn 34 | em, strong 35 | th 36 | font-style: normal 37 | font-weight: normal 38 | 39 | ol, ul 40 | list-style: none 41 | 42 | th 43 | caption 44 | text-align: left 45 | 46 | h1, h2, h3, h4, h5, h6 47 | font-size: 100% 48 | font-weight: normal 49 | 50 | h1, h2, h3, h4, h5, h6 51 | p, blockquote 52 | word-wrap: break-word 53 | 54 | q:before 55 | q:after 56 | content: '' 57 | 58 | a:hover 59 | a:active 60 | outline: 0 61 | 62 | img 63 | border: 0 64 | max-width: 100% 65 | vertical-align: middle 66 | -ms-interpolation-mode: bicubic 67 | 68 | input 69 | vertical-align: middle 70 | 71 | input 72 | button 73 | textarea 74 | font-size: 12px 75 | outline: none 76 | resize: none 77 | 78 | input 79 | button 80 | *overflow: visible 81 | line-height: normal 82 | 83 | input::-moz-focus-inner 84 | button::-moz-focus-inner 85 | padding: 0 86 | border: 0 87 | 88 | button 89 | input[type="button"] 90 | input[type="reset"] 91 | input[type="submit"] 92 | cursor: pointer 93 | -webkit-appearance: button 94 | 95 | input[type="search"] 96 | box-sizing: content-box 97 | -webkit-appearance: textfield 98 | 99 | input[type="search"]::-webkit-search-decoration 100 | input[type="search"]::-webkit-search-cancel-button 101 | -webkit-appearance: none 102 | 103 | textarea 104 | overflow: auto 105 | vertical-align: top 106 | -------------------------------------------------------------------------------- /stylus/table.styl: -------------------------------------------------------------------------------- 1 | @import "mixins" 2 | 3 | table 4 | max-width: 100% 5 | background-color: transparent 6 | border-collapse: collapse 7 | border-spacing: 0 8 | 9 | .table 10 | width: 100% 11 | margin-bottom: 18px 12 | 13 | .table th 14 | .table td 15 | padding: 8px 16 | line-height: 18px 17 | text-align: left 18 | vertical-align: middle 19 | border-top: 1px solid #ddd 20 | 21 | .table th 22 | font-size: 13px 23 | font-weight: bold 24 | 25 | .table thead th 26 | vertical-align: bottom 27 | 28 | .table caption + thead tr:first-child th 29 | .table caption + thead tr:first-child td 30 | .table colgroup + thead tr:first-child th 31 | .table colgroup + thead tr:first-child td 32 | .table thead:first-child tr:first-child th 33 | .table thead:first-child tr:first-child td 34 | border-top: 0 35 | 36 | .table tbody + tbody 37 | border-top: 2px solid #ddd 38 | 39 | .table-bordered 40 | border: 1px solid #ddd 41 | border-collapse: separate 42 | *border-collapse: collapsed 43 | border-left: 0 44 | border-radius: 4px 45 | 46 | .table-bordered th 47 | .table-bordered td 48 | border-left: 1px solid #ddd 49 | 50 | .table-bordered caption + thead tr:first-child th 51 | .table-bordered caption + tbody tr:first-child th 52 | .table-bordered caption + tbody tr:first-child td 53 | .table-bordered colgroup + thead tr:first-child th 54 | .table-bordered colgroup + tbody tr:first-child th 55 | .table-bordered colgroup + tbody tr:first-child td 56 | .table-bordered thead:first-child tr:first-child th 57 | .table-bordered tbody:first-child tr:first-child th 58 | .table-bordered tbody:first-child tr:first-child td 59 | border-top: 0 60 | 61 | .table-bordered thead:first-child tr:first-child th:first-child 62 | .table-bordered tbody:first-child tr:first-child td:first-child 63 | border-top-left-radius: 4px 64 | 65 | .table-bordered thead:first-child tr:first-child th:last-child 66 | .table-bordered tbody:first-child tr:first-child td:last-child 67 | border-top-right-radius: 4px; 68 | 69 | .table-bordered thead:last-child tr:last-child th:first-child 70 | .table-bordered tbody:last-child tr:last-child td:first-child 71 | border-radius: 0 0 0 4px 72 | border-bottom-left-radius: 4px 73 | 74 | .table-bordered thead:last-child tr:last-child th:last-child 75 | .table-bordered tbody:last-child tr:last-child td:last-child 76 | border-bottom-right-radius: 4px; 77 | 78 | .table-striped tbody tr:nth-child(odd) td 79 | .table-striped tbody tr:nth-child(odd) th 80 | background-color: #e6e6dd 81 | -------------------------------------------------------------------------------- /stylus/type.styl: -------------------------------------------------------------------------------- 1 | @import "mixins" 2 | @import "variable" 3 | 4 | body 5 | font: $baseFontSize/$baseLineHeight $baseFontFamily 6 | 7 | a, a:hover 8 | color: $linkColor 9 | text-decoration: none 10 | 11 | a:hover 12 | color: white 13 | background-color: $linkColor 14 | 15 | h1, h2, h3 16 | color: black 17 | font-weight: bold 18 | 19 | h1 20 | font-size: 20px 21 | 22 | h2 23 | font-size: 16px 24 | 25 | h3 26 | font-size: 14px 27 | 28 | p 29 | margin-bottom: 10px 30 | 31 | b, em 32 | .text-bold 33 | font-weight: bold 34 | 35 | i 36 | font-style: italic 37 | 38 | q:before 39 | q:after 40 | blockquote:before 41 | blockquote:after 42 | content: '' 43 | 44 | ul, ol 45 | font-size: 0 46 | li 47 | font-size: $baseFontSize 48 | 49 | .list li 50 | display: block 51 | margin-bottom: 3px 52 | 53 | .list-lined li 54 | margin-bottom: 8px 55 | padding-bottom: 8px 56 | border-bottom: 1px solid #eee 57 | 58 | .list-col li 59 | inline-block() 60 | vertical-align: top 61 | 62 | .list-col2 63 | margin-right: -30px 64 | li 65 | width: 297px 66 | margin: 0 30px 20px 0 67 | 68 | .list-col5 69 | margin-right: -43px 70 | li 71 | width: 90px 72 | margin: 0 43px 15px 0 73 | text-align: center 74 | 75 | .tags 76 | line-height: 0 77 | li 78 | display: inline 79 | a 80 | inline-block() 81 | line-height: 1 82 | margin: 0 7px 6px 0 83 | padding: 6px 10px 84 | background-color: #ebebe4 85 | word-wrap: break-word 86 | overflow: hidden 87 | a:hover 88 | color: $linkColor 89 | background-color: #dbdbd4 90 | 91 | -------------------------------------------------------------------------------- /stylus/variable.styl: -------------------------------------------------------------------------------- 1 | $column ?= 48px 2 | $gutter ?= 24px 3 | 4 | // colors 5 | $grayDarker ?= #222 6 | $grayDark ?= #333 7 | $gray ?= #666 8 | $grayLight ?= #999 9 | $grayLighter ?= #eee 10 | $redBrown ?= #825d5b 11 | $redBrownDark ?= #825f5e 12 | $sageGreen ?= #67a88f 13 | 14 | $linkColor ?= #825d5b 15 | $errorColor ?= #b85f5f 16 | 17 | $baseFontSize ?= 12px 18 | $baseLineHeight ?= 1.5 19 | $baseFontFamily ?= "Helvetica Neue", Helvetica, Arial, sans-serif 20 | --------------------------------------------------------------------------------