├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── docs ├── README.docs.md ├── README.md ├── assets │ ├── art.cdr │ ├── carousel.png │ ├── docs.css │ ├── logo.png │ └── style.css ├── build.js ├── client.js ├── examples │ ├── DataTreeViewBasicUsage.js │ ├── EditorsTextBoxBasicUsage.js │ ├── EditorsTextBoxDisabledState.js │ ├── EditorsTextBoxPlaceholder.js │ ├── EditorsTextBoxPrependAndAppend.js │ └── NavigationVNavBasicUsage.js ├── md │ └── building.md ├── server.js └── src │ ├── CodeMirror.client.js │ ├── CodeMirror.css │ ├── CodeMirror.js │ ├── ComponentsPage.js │ ├── GettingStartedPage.js │ ├── HomePage.js │ ├── NavMain.js │ ├── NotFoundPage.js │ ├── PageFooter.js │ ├── PageHeader.js │ ├── ReactPlayground.js │ ├── Root.js │ ├── Routes.js │ └── Samples.js ├── gulpfile.js ├── karma.conf.js ├── package.json ├── readme.md ├── register-babel.js ├── run-babel ├── samples ├── codeSample.jsx ├── layout │ ├── formGroup │ │ ├── formGroupSample.html │ │ └── formGroupSample.jsx │ ├── stackPanel │ │ ├── stackPanelSample.html │ │ └── stackPanelSample.jsx │ ├── tabControl │ │ ├── tabControlSample.html │ │ └── tabControlSample.jsx │ └── treeView │ │ ├── treeViewSample.html │ │ └── treeViewSample.jsx ├── meta │ └── componentBuilder │ │ ├── componentBuilderSample.html │ │ └── componentBuilderSample.jsx ├── navigation │ ├── link │ │ ├── about.html │ │ ├── index.html │ │ └── pages.jsx │ └── pager │ │ ├── pagerSample.html │ │ └── pagerSample.jsx └── samples.css ├── src ├── components │ ├── data │ │ └── treeView │ │ │ ├── treeRow.jsx │ │ │ └── treeView.jsx │ ├── editors │ │ └── textbox │ │ │ └── textbox.js │ ├── gearz.mixin.js │ ├── layout │ │ ├── formGroup │ │ │ └── formGroup.jsx │ │ ├── stackPanel │ │ │ └── stackPanel.jsx │ │ └── tabControl │ │ │ ├── tab.jsx │ │ │ ├── tabControl.css │ │ │ ├── tabControl.jsx │ │ │ └── tabHeader.jsx │ ├── meta │ │ └── componentBuilder │ │ │ └── componentBuilder.jsx │ └── navigation │ │ ├── VNav │ │ ├── VNav.jsx │ │ ├── VNavGroup.jsx │ │ └── VNavItem.jsx │ │ ├── link │ │ └── link.jsx │ │ └── pager │ │ ├── pager.css │ │ └── pager.jsx ├── index.js ├── less │ ├── data │ │ └── treeView.less │ └── navigation │ │ └── VNav.less └── lib │ ├── componentFactory │ ├── component-factory.jsx │ └── templates │ │ └── stringTemplate.jsx │ ├── expression-evaluator.js │ ├── gearz.routing.js │ ├── gearz.routing.mixins.js │ ├── rc.component.factory.js │ └── text-expression-evaluator.js ├── test ├── .eslintrc ├── VNav-spec.js ├── expression-evaluator-spec.js ├── index.js └── text-expression-evaluator-spec.js ├── tools ├── amd │ ├── README.md │ └── bower.json └── build.js ├── webpack.config.js ├── webpack.docs.js └── webpack ├── docs.config.js ├── strategies ├── development.js ├── docs.js ├── index.js ├── optimize.js └── test.js ├── test.config.js └── webpack.config.js /.eslintignore: -------------------------------------------------------------------------------- 1 | amd/** 2 | dist/** 3 | docs-built/** 4 | lib/** 5 | node_modules/** 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true 5 | }, 6 | "ecmaFeatures": { 7 | "jsx": true 8 | }, 9 | "parser": "babel-eslint", 10 | "plugins": [ 11 | "react" 12 | ], 13 | "rules": { 14 | "comma-spacing": 1, 15 | "key-spacing": 0, 16 | "no-underscore-dangle": 0, 17 | "no-unused-vars": [1, { "vars": "all", "args": "none" }], 18 | "no-undef": 1, 19 | "no-var": 2, 20 | "quotes": [1, "single", "avoid-escape"], 21 | "react/display-name": 0, 22 | "react/jsx-uses-react": 1, 23 | "react/no-did-mount-set-state": 1, 24 | "react/no-did-update-set-state": 1, 25 | "react/no-multi-comp": 1, 26 | "react/prop-types": [1, { ignore: [children, className] }], 27 | "react/react-in-jsx-scope": 1, 28 | "react/self-closing-comp": 1, 29 | "react/wrap-multilines": 1, 30 | "react/jsx-uses-vars": 1, 31 | "strict": 0 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | *~ 3 | .DS_Store 4 | npm-debug.log 5 | node_modules 6 | amd/ 7 | !tools/amd/ 8 | lib/ 9 | !tools/lib/ 10 | dist/ 11 | !tools/dist/ 12 | docs-built/ 13 | tmp-bower-repo/ 14 | tmp-docs-repo/ 15 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | docs/ 3 | docs-built/ 4 | test-built/ 5 | test/ 6 | tools/ 7 | .gitignore 8 | .travis.yml 9 | karma.conf.js 10 | tmp-docs-repo/ 11 | tmp-bower-repo/ 12 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "0.10" 5 | - "0.12" 6 | - "iojs" 7 | webhooks: 8 | urls: 9 | - https://webhooks.gitter.im/e/0f4bbc965d7f5b1db630 10 | on_success: always 11 | on_failure: always 12 | on_start: false 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Andre Rodrigues Pena, Miguel Angelo dos Santos Bicudo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /docs/README.docs.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gearz-lab/react-ui/8bc4808092fd913ec6554f5b9f60d4a00f7bb7ef/docs/README.docs.md -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gearz-lab/react-ui/8bc4808092fd913ec6554f5b9f60d4a00f7bb7ef/docs/README.md -------------------------------------------------------------------------------- /docs/assets/art.cdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gearz-lab/react-ui/8bc4808092fd913ec6554f5b9f60d4a00f7bb7ef/docs/assets/art.cdr -------------------------------------------------------------------------------- /docs/assets/carousel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gearz-lab/react-ui/8bc4808092fd913ec6554f5b9f60d4a00f7bb7ef/docs/assets/carousel.png -------------------------------------------------------------------------------- /docs/assets/docs.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Docs (http://getbootstrap.com) 3 | * Copyright 2011-2014 Twitter, Inc. 4 | * Licensed under the Creative Commons Attribution 3.0 Unported License. For 5 | * details, see http://creativecommons.org/licenses/by/3.0/. 6 | */ 7 | 8 | 9 | /* 10 | * Bootstrap Documentation 11 | * Special styles for presenting Bootstrap's documentation and code examples. 12 | * 13 | * Table of contents: 14 | * 15 | * Scaffolding 16 | * Main navigation 17 | * Footer 18 | * Social buttons 19 | * Homepage 20 | * Page headers 21 | * Old docs callout 22 | * Ads 23 | * Side navigation 24 | * Docs sections 25 | * Callouts 26 | * Grid styles 27 | * Examples 28 | * Code snippets (highlight) 29 | * Responsive tests 30 | * Glyphicons 31 | * Customizer 32 | * Miscellaneous 33 | */ 34 | 35 | 36 | /* 37 | * Scaffolding 38 | * 39 | * Update the basics of our documents to prep for docs content. 40 | */ 41 | 42 | body { 43 | position: relative; /* For scrollspy */ 44 | } 45 | 46 | /* Keep code small in tables on account of limited space */ 47 | .table code { 48 | font-size: 13px; 49 | font-weight: normal; 50 | } 51 | 52 | /* Outline button for use within the docs */ 53 | .btn-outline { 54 | color: #563d7c; 55 | background-color: transparent; 56 | border-color: #563d7c; 57 | } 58 | .btn-outline:hover, 59 | .btn-outline:focus, 60 | .btn-outline:active { 61 | color: #fff; 62 | background-color: #563d7c; 63 | border-color: #563d7c; 64 | } 65 | 66 | /* Inverted outline button (white on dark) */ 67 | .btn-outline-inverse { 68 | color: #fff; 69 | background-color: transparent; 70 | border-color: #cdbfe3; 71 | } 72 | .btn-outline-inverse:hover, 73 | .btn-outline-inverse:focus, 74 | .btn-outline-inverse:active { 75 | color: #563d7c; 76 | text-shadow: none; 77 | background-color: #fff; 78 | border-color: #fff; 79 | } 80 | 81 | /* Bootstrap "B" icon */ 82 | .bs-docs-booticon { 83 | display: block; 84 | font-weight: 500; 85 | color: #fff; 86 | text-align: center; 87 | cursor: default; 88 | background-color: #563d7c; 89 | border-radius: 0; 90 | } 91 | .bs-docs-booticon-sm { 92 | width: 30px; 93 | height: 30px; 94 | font-size: 20px; 95 | line-height: 28px; 96 | } 97 | .bs-docs-booticon-lg { 98 | width: 144px; 99 | height: 144px; 100 | font-size: 108px; 101 | line-height: 140px; 102 | } 103 | .bs-docs-booticon-inverse { 104 | color: #563d7c; 105 | background-color: #fff; 106 | } 107 | .bs-docs-booticon-outline { 108 | background-color: transparent; 109 | border: 1px solid #cdbfe3; 110 | } 111 | 112 | 113 | /* 114 | * Main navigation 115 | * 116 | * Turn the `.navbar` at the top of the docs purple. 117 | */ 118 | 119 | .bs-docs-nav { 120 | margin-bottom: 0; 121 | background-color: #fff; 122 | border-bottom: 0; 123 | } 124 | .bs-home-nav .bs-nav-b { 125 | display: none; 126 | } 127 | .bs-docs-nav .navbar-brand, 128 | .bs-docs-nav .navbar-nav > li > a { 129 | font-weight: 500; 130 | color: #563d7c; 131 | } 132 | .bs-docs-nav .navbar-nav > li > a:hover, 133 | .bs-docs-nav .navbar-nav > .active > a, 134 | .bs-docs-nav .navbar-nav > .active > a:hover { 135 | color: #463265; 136 | background-color: #f9f9f9; 137 | } 138 | .bs-docs-nav .navbar-toggle .icon-bar { 139 | background-color: #563d7c; 140 | } 141 | .bs-docs-nav .navbar-header .navbar-toggle { 142 | border-color: #fff; 143 | } 144 | .bs-docs-nav .navbar-header .navbar-toggle:hover, 145 | .bs-docs-nav .navbar-header .navbar-toggle:focus { 146 | background-color: #f9f9f9; 147 | border-color: #f9f9f9; 148 | } 149 | 150 | 151 | /* 152 | * Footer 153 | * 154 | * Separated section of content at the bottom of all pages, save the homepage. 155 | */ 156 | 157 | .bs-docs-footer { 158 | padding-top: 40px; 159 | padding-bottom: 40px; 160 | margin-top: 100px; 161 | color: #777; 162 | text-align: center; 163 | border-top: 1px solid #e5e5e5; 164 | } 165 | .bs-docs-footer-links { 166 | padding-left: 0; 167 | margin-top: 20px; 168 | color: #999; 169 | } 170 | .bs-docs-footer-links li { 171 | display: inline; 172 | padding: 0 2px; 173 | } 174 | .bs-docs-footer-links li:first-child { 175 | padding-left: 0; 176 | } 177 | 178 | @media (min-width: 768px) { 179 | .bs-docs-footer p { 180 | margin-bottom: 0; 181 | } 182 | } 183 | 184 | 185 | /* 186 | * Social buttons 187 | * 188 | * Twitter and GitHub social action buttons (for homepage and footer). 189 | */ 190 | 191 | .bs-docs-social { 192 | margin-bottom: 20px; 193 | text-align: center; 194 | } 195 | .bs-docs-social-buttons { 196 | display: inline-block; 197 | padding-left: 0; 198 | margin-bottom: 0; 199 | list-style: none; 200 | } 201 | .bs-docs-social-buttons li { 202 | display: inline-block; 203 | padding: 5px 8px; 204 | line-height: 1; 205 | } 206 | .bs-docs-social-buttons .twitter-follow-button { 207 | width: 225px !important; 208 | } 209 | .bs-docs-social-buttons .twitter-share-button { 210 | width: 98px !important; 211 | } 212 | /* Style the GitHub buttons via CSS instead of inline attributes */ 213 | .github-btn { 214 | overflow: hidden; 215 | border: 0; 216 | } 217 | 218 | 219 | /* 220 | * Homepage 221 | * 222 | * Tweaks to the custom homepage and the masthead (main jumbotron). 223 | */ 224 | 225 | /* Share masthead with page headers */ 226 | .bs-docs-masthead, 227 | .bs-docs-header { 228 | position: relative; 229 | padding: 30px 15px; 230 | color: #cdbfe3; 231 | text-align: center; 232 | text-shadow: 0 1px 0 rgba(0,0,0,.1); 233 | background-color: #6f5499; 234 | background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499)); 235 | background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%); 236 | background-image: -o-linear-gradient(top, #563d7c 0%, #6f5499 100%); 237 | background-image: linear-gradient(to bottom, #563d7c 0%, #6f5499 100%); 238 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0); 239 | background-repeat: repeat-x; 240 | } 241 | 242 | /* Masthead (headings and download button) */ 243 | .bs-docs-masthead .bs-docs-booticon { 244 | margin: 0 auto 30px; 245 | } 246 | .bs-docs-masthead h1 { 247 | font-weight: 300; 248 | line-height: 1; 249 | color: #fff; 250 | } 251 | .bs-docs-masthead .lead { 252 | margin: 0 auto 30px; 253 | font-size: 20px; 254 | color: #fff; 255 | } 256 | .bs-docs-masthead .version { 257 | margin-top: -15px; 258 | margin-bottom: 30px; 259 | color: #9783b9; 260 | } 261 | .bs-docs-masthead .btn { 262 | width: 100%; 263 | padding: 15px 30px; 264 | font-size: 20px; 265 | } 266 | 267 | @media (min-width: 480px) { 268 | .bs-docs-masthead .btn { 269 | width: auto; 270 | } 271 | } 272 | 273 | @media (min-width: 768px) { 274 | .bs-docs-masthead { 275 | padding: 80px 0; 276 | } 277 | .bs-docs-masthead h1 { 278 | font-size: 60px; 279 | } 280 | .bs-docs-masthead .lead { 281 | font-size: 24px; 282 | } 283 | } 284 | 285 | @media (min-width: 992px) { 286 | .bs-docs-masthead .lead { 287 | width: 80%; 288 | font-size: 30px; 289 | } 290 | } 291 | 292 | 293 | /* 294 | * Page headers 295 | * 296 | * Jumbotron-esque headers at the top of every page that's not the homepage. 297 | */ 298 | 299 | /* Page headers */ 300 | .bs-docs-header { 301 | margin-bottom: 40px; 302 | font-size: 20px; 303 | } 304 | .bs-docs-header h1 { 305 | margin-top: 0; 306 | color: #fff; 307 | } 308 | .bs-docs-header p { 309 | margin-bottom: 0; 310 | font-weight: 300; 311 | line-height: 1.4; 312 | } 313 | .bs-docs-header .container { 314 | position: relative; 315 | } 316 | 317 | @media (min-width: 768px) { 318 | .bs-docs-header { 319 | padding-top: 60px; 320 | padding-bottom: 60px; 321 | font-size: 24px; 322 | text-align: left; 323 | } 324 | .bs-docs-header h1 { 325 | font-size: 60px; 326 | line-height: 1; 327 | } 328 | } 329 | 330 | @media (min-width: 992px) { 331 | .bs-docs-header h1, 332 | .bs-docs-header p { 333 | margin-right: 380px; 334 | } 335 | } 336 | 337 | 338 | /* 339 | * Carbon ads 340 | * 341 | * Single display ad that shows on all pages (except homepage) in page headers. 342 | * The hella `!important` is required for any pre-set property. 343 | */ 344 | 345 | .carbonad { 346 | width: auto !important; 347 | height: auto !important; 348 | padding: 20px !important; 349 | margin: 30px -30px -31px !important; 350 | overflow: hidden; /* clearfix */ 351 | font-size: 13px !important; 352 | line-height: 16px !important; 353 | text-align: left; 354 | background: transparent !important; 355 | border: solid #866ab3 !important; 356 | border-width: 1px 0 !important; 357 | } 358 | .carbonad-img { 359 | margin: 0 !important; 360 | } 361 | .carbonad-text, 362 | .carbonad-tag { 363 | display: block !important; 364 | float: none !important; 365 | width: auto !important; 366 | height: auto !important; 367 | margin-left: 145px !important; 368 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; 369 | } 370 | .carbonad-text { 371 | padding-top: 0 !important; 372 | } 373 | .carbonad-tag { 374 | color: inherit !important; 375 | text-align: left !important; 376 | } 377 | .carbonad-text a, 378 | .carbonad-tag a { 379 | color: #fff !important; 380 | } 381 | .carbonad #azcarbon > img { 382 | display: none; /* hide what I assume are tracking images */ 383 | } 384 | 385 | @media (min-width: 480px) { 386 | .carbonad { 387 | width: 330px !important; 388 | margin: 20px auto !important; 389 | border-width: 1px !important; 390 | border-radius: 4px; 391 | } 392 | .bs-docs-masthead .carbonad { 393 | margin: 50px auto 0 !important; 394 | } 395 | } 396 | 397 | @media (min-width: 768px) { 398 | .carbonad { 399 | margin-right: 0 !important; 400 | margin-left: 0 !important; 401 | } 402 | } 403 | 404 | @media (min-width: 992px) { 405 | .carbonad { 406 | position: absolute; 407 | top: 0; 408 | right: 15px; /* 15px instead of 0 since box-sizing */ 409 | width: 330px !important; 410 | padding: 15px !important; 411 | margin: 0 !important; 412 | } 413 | .bs-docs-masthead .carbonad { 414 | position: static; 415 | } 416 | } 417 | 418 | 419 | /* 420 | * Homepage featurettes 421 | * 422 | * Reasons to use Bootstrap, entries from the Expo, and more. 423 | */ 424 | 425 | .bs-docs-featurette { 426 | padding-top: 40px; 427 | padding-bottom: 40px; 428 | font-size: 16px; 429 | line-height: 1.5; 430 | color: #555; 431 | text-align: center; 432 | background-color: #fff; 433 | border-bottom: 1px solid #e5e5e5; 434 | } 435 | .bs-docs-featurette + .bs-docs-footer { 436 | margin-top: 0; 437 | border-top: 0; 438 | } 439 | 440 | .bs-docs-featurette-title { 441 | margin-bottom: 5px; 442 | font-size: 30px; 443 | font-weight: normal; 444 | color: #333; 445 | } 446 | .half-rule { 447 | width: 100px; 448 | margin: 40px auto; 449 | } 450 | .bs-docs-featurette h3 { 451 | margin-bottom: 5px; 452 | font-weight: normal; 453 | color: #333; 454 | } 455 | .bs-docs-featurette-img { 456 | display: block; 457 | margin-bottom: 20px; 458 | color: #333; 459 | } 460 | .bs-docs-featurette-img:hover { 461 | color: #428bca; 462 | text-decoration: none; 463 | } 464 | .bs-docs-featurette-img img { 465 | display: block; 466 | margin-bottom: 15px; 467 | } 468 | 469 | @media (min-width: 480px) { 470 | .bs-docs-featurette .img-responsive { 471 | margin-top: 30px; 472 | } 473 | } 474 | @media (min-width: 768px) { 475 | .bs-docs-featurette { 476 | padding-top: 100px; 477 | padding-bottom: 100px; 478 | } 479 | .bs-docs-featurette-title { 480 | font-size: 40px; 481 | } 482 | .bs-docs-featurette .lead { 483 | max-width: 80%; 484 | margin-right: auto; 485 | margin-left: auto; 486 | } 487 | .bs-docs-featured-sites .col-sm-3:first-child img { 488 | border-top-left-radius: 4px; 489 | border-bottom-left-radius: 4px; 490 | } 491 | .bs-docs-featured-sites .col-sm-3:last-child img { 492 | border-top-right-radius: 4px; 493 | border-bottom-right-radius: 4px; 494 | } 495 | 496 | .bs-docs-featurette .img-responsive { 497 | margin-top: 0; 498 | } 499 | } 500 | 501 | /* Featured sites */ 502 | .bs-docs-featured-sites { 503 | margin-right: -1px; 504 | margin-left: -1px; 505 | } 506 | .bs-docs-featured-sites .col-sm-3 { 507 | padding-right: 1px; 508 | padding-left: 1px; 509 | } 510 | .bs-docs-featured-sites .img-responsive { 511 | margin-bottom: 15px; 512 | } 513 | @media (min-width: 480px) { 514 | .bs-docs-featured-sites .img-responsive { 515 | margin-bottom: 0; 516 | } 517 | } 518 | 519 | /* Example thumbnails */ 520 | @media (max-width: 480px) { 521 | .bs-examples { 522 | margin-right: -10px; 523 | margin-left: -10px; 524 | } 525 | .bs-examples > [class^="col-"] { 526 | padding-right: 10px; 527 | padding-left: 10px; 528 | } 529 | } 530 | 531 | 532 | /* 533 | * Side navigation 534 | * 535 | * Scrollspy and affixed enhanced navigation to highlight sections and secondary 536 | * sections of docs content. 537 | */ 538 | 539 | /* By default it's not affixed in mobile views, so undo that */ 540 | .bs-docs-sidebar.affix { 541 | position: static; 542 | } 543 | @media (min-width: 768px) { 544 | .bs-docs-sidebar { 545 | padding-left: 20px; 546 | } 547 | } 548 | 549 | /* First level of nav */ 550 | .bs-docs-sidenav { 551 | margin-top: 20px; 552 | margin-bottom: 20px; 553 | } 554 | 555 | /* All levels of nav */ 556 | .bs-docs-sidebar .nav > li > a { 557 | display: block; 558 | padding: 4px 20px; 559 | font-size: 13px; 560 | font-weight: 500; 561 | color: #999; 562 | } 563 | .bs-docs-sidebar .nav > li > a:hover, 564 | .bs-docs-sidebar .nav > li > a:focus { 565 | padding-left: 19px; 566 | color: #563d7c; 567 | text-decoration: none; 568 | background-color: transparent; 569 | border-left: 1px solid #563d7c; 570 | } 571 | .bs-docs-sidebar .nav > .active > a, 572 | .bs-docs-sidebar .nav > .active:hover > a, 573 | .bs-docs-sidebar .nav > .active:focus > a { 574 | padding-left: 18px; 575 | font-weight: bold; 576 | color: #563d7c; 577 | background-color: transparent; 578 | border-left: 2px solid #563d7c; 579 | } 580 | 581 | /* Nav: second level (shown on .active) */ 582 | .bs-docs-sidebar .nav .nav { 583 | display: none; /* Hide by default, but at >768px, show it */ 584 | padding-bottom: 10px; 585 | } 586 | .bs-docs-sidebar .nav .nav > li > a { 587 | padding-top: 1px; 588 | padding-bottom: 1px; 589 | padding-left: 30px; 590 | font-size: 12px; 591 | font-weight: normal; 592 | } 593 | .bs-docs-sidebar .nav .nav > li > a:hover, 594 | .bs-docs-sidebar .nav .nav > li > a:focus { 595 | padding-left: 29px; 596 | } 597 | .bs-docs-sidebar .nav .nav > .active > a, 598 | .bs-docs-sidebar .nav .nav > .active:hover > a, 599 | .bs-docs-sidebar .nav .nav > .active:focus > a { 600 | padding-left: 28px; 601 | font-weight: 500; 602 | } 603 | 604 | /* Back to top (hidden on mobile) */ 605 | .back-to-top, 606 | .bs-docs-theme-toggle { 607 | display: none; 608 | padding: 4px 10px; 609 | margin-top: 10px; 610 | margin-left: 10px; 611 | font-size: 12px; 612 | font-weight: 500; 613 | color: #999; 614 | } 615 | .back-to-top:hover, 616 | .bs-docs-theme-toggle:hover { 617 | color: #563d7c; 618 | text-decoration: none; 619 | } 620 | .bs-docs-theme-toggle { 621 | margin-top: 0; 622 | } 623 | 624 | @media (min-width: 768px) { 625 | .back-to-top, 626 | .bs-docs-theme-toggle { 627 | display: block; 628 | } 629 | } 630 | 631 | /* Show and affix the side nav when space allows it */ 632 | @media (min-width: 992px) { 633 | .bs-docs-sidebar .nav > .active > ul { 634 | display: block; 635 | } 636 | /* Widen the fixed sidebar */ 637 | .bs-docs-sidebar.affix, 638 | .bs-docs-sidebar.affix-bottom { 639 | width: 213px; 640 | } 641 | .bs-docs-sidebar.affix { 642 | position: fixed; /* Undo the static from mobile first approach */ 643 | top: 20px; 644 | } 645 | .bs-docs-sidebar.affix-bottom { 646 | position: absolute; /* Undo the static from mobile first approach */ 647 | } 648 | .bs-docs-sidebar.affix-bottom .bs-docs-sidenav, 649 | .bs-docs-sidebar.affix .bs-docs-sidenav { 650 | margin-top: 0; 651 | margin-bottom: 0; 652 | } 653 | } 654 | @media (min-width: 1200px) { 655 | /* Widen the fixed sidebar again */ 656 | .bs-docs-sidebar.affix-bottom, 657 | .bs-docs-sidebar.affix { 658 | width: 263px; 659 | } 660 | } 661 | 662 | 663 | /* 664 | * Docs sections 665 | * 666 | * Content blocks for each component or feature. 667 | */ 668 | 669 | /* Space things out */ 670 | .bs-docs-section { 671 | margin-bottom: 60px; 672 | } 673 | .bs-docs-section:last-child { 674 | margin-bottom: 0; 675 | } 676 | 677 | h1[id] { 678 | padding-top: 20px; 679 | margin-top: 0; 680 | } 681 | 682 | 683 | /* 684 | * Callouts 685 | * 686 | * Not quite alerts, but custom and helpful notes for folks reading the docs. 687 | * Requires a base and modifier class. 688 | */ 689 | 690 | /* Common styles for all types */ 691 | .bs-callout { 692 | padding: 20px; 693 | margin: 20px 0; 694 | border: 1px solid #eee; 695 | border-left-width: 5px; 696 | border-radius: 3px; 697 | } 698 | .bs-callout h4 { 699 | margin-top: 0; 700 | margin-bottom: 5px; 701 | } 702 | .bs-callout p:last-child { 703 | margin-bottom: 0; 704 | } 705 | .bs-callout code { 706 | border-radius: 3px; 707 | } 708 | 709 | /* Tighten up space between multiple callouts */ 710 | .bs-callout + .bs-callout { 711 | margin-top: -5px; 712 | } 713 | 714 | /* Variations */ 715 | .bs-callout-danger { 716 | border-left-color: #d9534f; 717 | } 718 | .bs-callout-danger h4 { 719 | color: #d9534f; 720 | } 721 | .bs-callout-warning { 722 | border-left-color: #f0ad4e; 723 | } 724 | .bs-callout-warning h4 { 725 | color: #f0ad4e; 726 | } 727 | .bs-callout-info { 728 | border-left-color: #5bc0de; 729 | } 730 | .bs-callout-info h4 { 731 | color: #5bc0de; 732 | } 733 | 734 | 735 | /* 736 | * Color swatches 737 | * 738 | * Color swatches and associated values for our grayscale and brand colors. 739 | */ 740 | 741 | .color-swatches { 742 | margin: 0 -5px; 743 | overflow: hidden; /* clearfix */ 744 | } 745 | .color-swatch { 746 | float: left; 747 | width: 60px; 748 | height: 60px; 749 | margin: 0 5px; 750 | border-radius: 3px; 751 | } 752 | 753 | @media (min-width: 768px) { 754 | .color-swatch { 755 | width: 100px; 756 | height: 100px; 757 | } 758 | } 759 | 760 | /* Framework colors */ 761 | .color-swatches .gray-darker { 762 | background-color: #222; 763 | } 764 | .color-swatches .gray-dark { 765 | background-color: #333; 766 | } 767 | .color-swatches .gray { 768 | background-color: #555; 769 | } 770 | .color-swatches .gray-light { 771 | background-color: #999; 772 | } 773 | .color-swatches .gray-lighter { 774 | background-color: #eee; 775 | } 776 | .color-swatches .brand-primary { 777 | background-color: #428bca; 778 | } 779 | .color-swatches .brand-success { 780 | background-color: #5cb85c; 781 | } 782 | .color-swatches .brand-warning { 783 | background-color: #f0ad4e; 784 | } 785 | .color-swatches .brand-danger { 786 | background-color: #d9534f; 787 | } 788 | .color-swatches .brand-info { 789 | background-color: #5bc0de; 790 | } 791 | 792 | /* Docs colors */ 793 | .color-swatches .bs-purple { 794 | background-color: #563d7c; 795 | } 796 | .color-swatches .bs-purple-light { 797 | background-color: #c7bfd3; 798 | } 799 | .color-swatches .bs-purple-lighter { 800 | background-color: #e5e1ea; 801 | } 802 | .color-swatches .bs-gray { 803 | background-color: #f9f9f9; 804 | } 805 | 806 | 807 | /* 808 | * Team members 809 | * 810 | * Avatars, names, and usernames for core team. 811 | */ 812 | 813 | .bs-team .team-member { 814 | line-height: 32px; 815 | color: #555; 816 | } 817 | .bs-team .team-member:hover { 818 | color: #333; 819 | text-decoration: none; 820 | } 821 | .bs-team .github-btn { 822 | float: right; 823 | width: 180px; 824 | height: 20px; 825 | margin-top: 6px; 826 | } 827 | .bs-team img { 828 | float: left; 829 | width: 32px; 830 | margin-right: 10px; 831 | border-radius: 4px; 832 | } 833 | 834 | 835 | /* 836 | * Grid examples 837 | * 838 | * Highlight the grid columns within the docs so folks can see their padding, 839 | * alignment, sizing, etc. 840 | */ 841 | 842 | .show-grid { 843 | margin-bottom: 15px; 844 | } 845 | .show-grid [class^="col-"] { 846 | padding-top: 10px; 847 | padding-bottom: 10px; 848 | background-color: #eee; 849 | background-color: rgba(86,61,124,.15); 850 | border: 1px solid #ddd; 851 | border: 1px solid rgba(86,61,124,.2); 852 | } 853 | 854 | 855 | /* 856 | * Examples 857 | * 858 | * Isolated sections of example content for each component or feature. Usually 859 | * followed by a code snippet. 860 | */ 861 | 862 | .bs-example { 863 | position: relative; 864 | padding: 45px 15px 15px; 865 | margin: 0 -15px 15px; 866 | border-color: #e5e5e5 #eee #eee; 867 | border-style: solid; 868 | border-width: 1px 0; 869 | -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05); 870 | box-shadow: inset 0 3px 6px rgba(0,0,0,.05); 871 | } 872 | /* Echo out a label for the example */ 873 | .bs-example:after { 874 | position: absolute; 875 | top: 15px; 876 | left: 15px; 877 | font-size: 12px; 878 | font-weight: bold; 879 | color: #959595; 880 | text-transform: uppercase; 881 | letter-spacing: 1px; 882 | content: "Example"; 883 | } 884 | 885 | /* Tweak display of the code snippets when following an example */ 886 | .bs-example + .highlight { 887 | margin: -15px -15px 15px; 888 | border-width: 0 0 1px; 889 | border-radius: 0; 890 | } 891 | 892 | /* Make the examples and snippets not full-width */ 893 | @media (min-width: 768px) { 894 | .bs-example { 895 | margin-right: 0; 896 | margin-left: 0; 897 | background-color: #fff; 898 | border-color: #ddd; 899 | border-width: 1px; 900 | border-radius: 4px 4px 0 0; 901 | -webkit-box-shadow: none; 902 | box-shadow: none; 903 | } 904 | .bs-example + .highlight { 905 | margin-top: -16px; 906 | margin-right: 0; 907 | margin-left: 0; 908 | border-width: 1px; 909 | border-bottom-right-radius: 4px; 910 | border-bottom-left-radius: 4px; 911 | } 912 | } 913 | 914 | /* Undo width of container */ 915 | .bs-example .container { 916 | width: auto; 917 | } 918 | 919 | /* Tweak content of examples for optimum awesome */ 920 | .bs-example > p:last-child, 921 | .bs-example > ul:last-child, 922 | .bs-example > ol:last-child, 923 | .bs-example > blockquote:last-child, 924 | .bs-example > .form-control:last-child, 925 | .bs-example > .table:last-child, 926 | .bs-example > .navbar:last-child, 927 | .bs-example > .jumbotron:last-child, 928 | .bs-example > .alert:last-child, 929 | .bs-example > .panel:last-child, 930 | .bs-example > .list-group:last-child, 931 | .bs-example > .well:last-child, 932 | .bs-example > .progress:last-child, 933 | .bs-example > .table-responsive:last-child > .table { 934 | margin-bottom: 0; 935 | } 936 | .bs-example > p > .close { 937 | float: none; 938 | } 939 | 940 | /* Typography */ 941 | .bs-example-type .table .type-info { 942 | color: #999; 943 | vertical-align: middle; 944 | } 945 | .bs-example-type .table td { 946 | padding: 15px 0; 947 | border-color: #eee; 948 | } 949 | .bs-example-type .table tr:first-child td { 950 | border-top: 0; 951 | } 952 | .bs-example-type h1, 953 | .bs-example-type h2, 954 | .bs-example-type h3, 955 | .bs-example-type h4, 956 | .bs-example-type h5, 957 | .bs-example-type h6 { 958 | margin: 0; 959 | } 960 | 961 | /* Contextual background colors */ 962 | .bs-example-bg-classes p { 963 | padding: 15px; 964 | } 965 | 966 | /* Images */ 967 | .bs-example > .img-circle, 968 | .bs-example > .img-rounded, 969 | .bs-example > .img-thumbnail { 970 | margin: 5px; 971 | } 972 | 973 | /* Tables */ 974 | .bs-example > .table-responsive > .table { 975 | background-color: #fff; 976 | } 977 | 978 | /* Buttons */ 979 | .bs-example > .btn, 980 | .bs-example > .btn-group { 981 | margin-top: 5px; 982 | margin-bottom: 5px; 983 | } 984 | .bs-example > .btn-toolbar + .btn-toolbar { 985 | margin-top: 10px; 986 | } 987 | 988 | /* Forms */ 989 | .bs-example-control-sizing select, 990 | .bs-example-control-sizing input[type="text"] + input[type="text"] { 991 | margin-top: 10px; 992 | } 993 | .bs-example-form .input-group { 994 | margin-bottom: 10px; 995 | } 996 | .bs-example > textarea.form-control { 997 | resize: vertical; 998 | } 999 | 1000 | /* List groups */ 1001 | .bs-example > .list-group { 1002 | max-width: 400px; 1003 | } 1004 | 1005 | /* Navbars */ 1006 | .bs-example .navbar:last-child { 1007 | margin-bottom: 0; 1008 | } 1009 | .bs-navbar-top-example, 1010 | .bs-navbar-bottom-example { 1011 | z-index: 1; 1012 | padding: 0; 1013 | overflow: hidden; /* cut the drop shadows off */ 1014 | } 1015 | .bs-navbar-top-example .navbar-header, 1016 | .bs-navbar-bottom-example .navbar-header { 1017 | margin-left: 0; 1018 | } 1019 | .bs-navbar-top-example .navbar-fixed-top, 1020 | .bs-navbar-bottom-example .navbar-fixed-bottom { 1021 | position: relative; 1022 | margin-right: 0; 1023 | margin-left: 0; 1024 | } 1025 | .bs-navbar-top-example { 1026 | padding-bottom: 45px; 1027 | } 1028 | .bs-navbar-top-example:after { 1029 | top: auto; 1030 | bottom: 15px; 1031 | } 1032 | .bs-navbar-top-example .navbar-fixed-top { 1033 | top: -1px; 1034 | } 1035 | .bs-navbar-bottom-example { 1036 | padding-top: 45px; 1037 | } 1038 | .bs-navbar-bottom-example .navbar-fixed-bottom { 1039 | bottom: -1px; 1040 | } 1041 | .bs-navbar-bottom-example .navbar { 1042 | margin-bottom: 0; 1043 | } 1044 | @media (min-width: 768px) { 1045 | .bs-navbar-top-example .navbar-fixed-top, 1046 | .bs-navbar-bottom-example .navbar-fixed-bottom { 1047 | position: absolute; 1048 | } 1049 | } 1050 | 1051 | /* Pagination */ 1052 | .bs-example .pagination { 1053 | margin-top: 10px; 1054 | margin-bottom: 10px; 1055 | } 1056 | 1057 | /* Pager */ 1058 | .bs-example > .pager { 1059 | margin-top: 0; 1060 | } 1061 | 1062 | /* Example modals */ 1063 | .bs-example-modal { 1064 | background-color: #f5f5f5; 1065 | } 1066 | .bs-example-modal .modal { 1067 | position: relative; 1068 | top: auto; 1069 | right: auto; 1070 | bottom: auto; 1071 | left: auto; 1072 | z-index: 1; 1073 | display: block; 1074 | } 1075 | .bs-example-modal .modal-dialog { 1076 | left: auto; 1077 | margin-right: auto; 1078 | margin-left: auto; 1079 | } 1080 | 1081 | /* Example dropdowns */ 1082 | .bs-example > .dropdown > .dropdown-toggle { 1083 | float: left; 1084 | } 1085 | .bs-example > .dropdown > .dropdown-menu { 1086 | position: static; 1087 | display: block; 1088 | margin-bottom: 5px; 1089 | clear: left; 1090 | } 1091 | 1092 | /* Example tabbable tabs */ 1093 | .bs-example-tabs .nav-tabs { 1094 | margin-bottom: 15px; 1095 | } 1096 | 1097 | /* Tooltips */ 1098 | .bs-example-tooltips { 1099 | text-align: center; 1100 | } 1101 | .bs-example-tooltips > .btn { 1102 | margin-top: 5px; 1103 | margin-bottom: 5px; 1104 | } 1105 | 1106 | /* Popovers */ 1107 | .bs-example-popover { 1108 | padding-bottom: 24px; 1109 | background-color: #f9f9f9; 1110 | } 1111 | .bs-example-popover .popover { 1112 | position: relative; 1113 | display: block; 1114 | float: left; 1115 | width: 260px; 1116 | margin: 20px; 1117 | } 1118 | 1119 | /* Scrollspy demo on fixed height div */ 1120 | .scrollspy-example { 1121 | position: relative; 1122 | height: 200px; 1123 | margin-top: 10px; 1124 | overflow: auto; 1125 | } 1126 | 1127 | 1128 | /* 1129 | * Code snippets 1130 | * 1131 | * Generated via Pygments and Jekyll, these are snippets of HTML, CSS, and JS. 1132 | */ 1133 | 1134 | .highlight { 1135 | padding: 9px 14px; 1136 | margin-bottom: 14px; 1137 | background-color: #f7f7f9; 1138 | border: 1px solid #e1e1e8; 1139 | border-radius: 4px; 1140 | } 1141 | .highlight pre { 1142 | padding: 0; 1143 | margin-top: 0; 1144 | margin-bottom: 0; 1145 | word-break: normal; 1146 | word-wrap: nowrap; 1147 | white-space: nowrap; 1148 | background-color: transparent; 1149 | border: 0; 1150 | } 1151 | .highlight pre code { 1152 | font-size: inherit; 1153 | color: #333; /* Effectively the base text color */ 1154 | } 1155 | .highlight pre code:first-child { 1156 | display: inline-block; 1157 | padding-right: 45px; 1158 | } 1159 | 1160 | 1161 | /* 1162 | * Responsive tests 1163 | * 1164 | * Generate a set of tests to show the responsive utilities in action. 1165 | */ 1166 | 1167 | /* Responsive (scrollable) doc tables */ 1168 | .table-responsive .highlight pre { 1169 | white-space: normal; 1170 | } 1171 | 1172 | /* Utility classes table */ 1173 | .bs-table th small, 1174 | .responsive-utilities th small { 1175 | display: block; 1176 | font-weight: normal; 1177 | color: #999; 1178 | } 1179 | .responsive-utilities tbody th { 1180 | font-weight: normal; 1181 | } 1182 | .responsive-utilities td { 1183 | text-align: center; 1184 | } 1185 | .responsive-utilities td.is-visible { 1186 | color: #468847; 1187 | background-color: #dff0d8 !important; 1188 | } 1189 | .responsive-utilities td.is-hidden { 1190 | color: #ccc; 1191 | background-color: #f9f9f9 !important; 1192 | } 1193 | 1194 | /* Responsive tests */ 1195 | .responsive-utilities-test { 1196 | margin-top: 5px; 1197 | } 1198 | .responsive-utilities-test .col-xs-6 { 1199 | margin-bottom: 10px; 1200 | } 1201 | .responsive-utilities-test span { 1202 | display: block; 1203 | padding: 15px 10px; 1204 | font-size: 14px; 1205 | font-weight: bold; 1206 | line-height: 1.1; 1207 | text-align: center; 1208 | border-radius: 4px; 1209 | } 1210 | .visible-on .col-xs-6 .hidden-xs, 1211 | .visible-on .col-xs-6 .hidden-sm, 1212 | .visible-on .col-xs-6 .hidden-md, 1213 | .visible-on .col-xs-6 .hidden-lg, 1214 | .hidden-on .col-xs-6 .hidden-xs, 1215 | .hidden-on .col-xs-6 .hidden-sm, 1216 | .hidden-on .col-xs-6 .hidden-md, 1217 | .hidden-on .col-xs-6 .hidden-lg { 1218 | color: #999; 1219 | border: 1px solid #ddd; 1220 | } 1221 | .visible-on .col-xs-6 .visible-xs-block, 1222 | .visible-on .col-xs-6 .visible-sm-block, 1223 | .visible-on .col-xs-6 .visible-md-block, 1224 | .visible-on .col-xs-6 .visible-lg-block, 1225 | .hidden-on .col-xs-6 .visible-xs-block, 1226 | .hidden-on .col-xs-6 .visible-sm-block, 1227 | .hidden-on .col-xs-6 .visible-md-block, 1228 | .hidden-on .col-xs-6 .visible-lg-block { 1229 | color: #468847; 1230 | background-color: #dff0d8; 1231 | border: 1px solid #d6e9c6; 1232 | } 1233 | 1234 | 1235 | /* 1236 | * Glyphicons 1237 | * 1238 | * Special styles for displaying the icons and their classes in the docs. 1239 | */ 1240 | 1241 | .bs-glyphicons { 1242 | margin: 0 -10px 20px; 1243 | overflow: hidden; 1244 | } 1245 | .bs-glyphicons-list { 1246 | padding-left: 0; 1247 | list-style: none; 1248 | } 1249 | .bs-glyphicons li { 1250 | float: left; 1251 | width: 25%; 1252 | height: 115px; 1253 | padding: 10px; 1254 | font-size: 10px; 1255 | line-height: 1.4; 1256 | text-align: center; 1257 | background-color: #f9f9f9; 1258 | border: 1px solid #fff; 1259 | } 1260 | .bs-glyphicons .glyphicon { 1261 | margin-top: 5px; 1262 | margin-bottom: 10px; 1263 | font-size: 24px; 1264 | } 1265 | .bs-glyphicons .glyphicon-class { 1266 | display: block; 1267 | text-align: center; 1268 | word-wrap: break-word; /* Help out IE10+ with class names */ 1269 | } 1270 | .bs-glyphicons li:hover { 1271 | color: #fff; 1272 | background-color: #563d7c; 1273 | } 1274 | 1275 | @media (min-width: 768px) { 1276 | .bs-glyphicons { 1277 | margin-right: 0; 1278 | margin-left: 0; 1279 | } 1280 | .bs-glyphicons li { 1281 | width: 12.5%; 1282 | font-size: 12px; 1283 | } 1284 | } 1285 | 1286 | 1287 | /* 1288 | * Customizer 1289 | * 1290 | * Since this is so form control heavy, we have quite a few styles to customize 1291 | * the display of inputs, headings, and more. Also included are all the download 1292 | * buttons and actions. 1293 | */ 1294 | 1295 | .bs-customizer .toggle { 1296 | float: right; 1297 | margin-top: 25px; 1298 | } 1299 | 1300 | /* Headings and form contrls */ 1301 | .bs-customizer label { 1302 | margin-top: 10px; 1303 | font-weight: 500; 1304 | color: #555; 1305 | } 1306 | .bs-customizer h2 { 1307 | padding-top: 30px; 1308 | margin-top: 0; 1309 | margin-bottom: 5px; 1310 | } 1311 | .bs-customizer h3 { 1312 | margin-bottom: 0; 1313 | } 1314 | .bs-customizer h4 { 1315 | margin-top: 15px; 1316 | margin-bottom: 0; 1317 | } 1318 | .bs-customizer .bs-callout h4 { 1319 | margin-top: 0; /* lame, but due to specificity we have to duplicate */ 1320 | margin-bottom: 5px; 1321 | } 1322 | .bs-customizer input[type="text"] { 1323 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace; 1324 | background-color: #fafafa; 1325 | } 1326 | .bs-customizer .help-block { 1327 | margin-bottom: 5px; 1328 | font-size: 12px; 1329 | } 1330 | 1331 | /* For the variables, use regular weight */ 1332 | #less-section label { 1333 | font-weight: normal; 1334 | } 1335 | 1336 | .bs-customizer-input { 1337 | float: left; 1338 | width: 33.333333%; 1339 | padding-right: 15px; 1340 | padding-left: 15px; 1341 | } 1342 | 1343 | /* Downloads */ 1344 | .bs-customize-download .btn-outline { 1345 | padding: 20px; 1346 | } 1347 | 1348 | /* Error handling */ 1349 | .bs-customizer-alert { 1350 | position: fixed; 1351 | top: 0; 1352 | right: 0; 1353 | left: 0; 1354 | z-index: 1030; 1355 | padding: 15px 0; 1356 | color: #fff; 1357 | background-color: #d9534f; 1358 | border-bottom: 1px solid #b94441; 1359 | -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25); 1360 | box-shadow: inset 0 1px 0 rgba(255,255,255,.25); 1361 | } 1362 | .bs-customizer-alert .close { 1363 | margin-top: -4px; 1364 | font-size: 24px; 1365 | } 1366 | .bs-customizer-alert p { 1367 | margin-bottom: 0; 1368 | } 1369 | .bs-customizer-alert .glyphicon { 1370 | margin-right: 5px; 1371 | } 1372 | .bs-customizer-alert pre { 1373 | margin: 10px 0 0; 1374 | color: #fff; 1375 | background-color: #a83c3a; 1376 | border-color: #973634; 1377 | -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); 1378 | box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); 1379 | } 1380 | 1381 | 1382 | /* 1383 | * Brand guidelines 1384 | * 1385 | * Extra styles for displaying wordmarks, logos, etc. 1386 | */ 1387 | 1388 | /* Logo series wrapper */ 1389 | .bs-brand-logos { 1390 | display: table; 1391 | width: 100%; 1392 | margin-bottom: 15px; 1393 | overflow: hidden; 1394 | color: #563d7c; 1395 | background-color: #f9f9f9; 1396 | border-radius: 4px; 1397 | } 1398 | 1399 | /* Individual items */ 1400 | .bs-brand-item { 1401 | padding: 60px 0; 1402 | text-align: center; 1403 | } 1404 | .bs-brand-item + .bs-brand-item { 1405 | border-top: 1px solid #fff; 1406 | } 1407 | .bs-brand-logos .inverse { 1408 | color: #fff; 1409 | background-color: #563d7c; 1410 | } 1411 | .bs-brand-item .svg { 1412 | width: 144px; 1413 | height: 144px; 1414 | } 1415 | 1416 | /* Heading content within */ 1417 | .bs-brand-item h1, 1418 | .bs-brand-item h3 { 1419 | margin-top: 0; 1420 | margin-bottom: 0; 1421 | } 1422 | .bs-brand-item .bs-docs-booticon { 1423 | margin-right: auto; 1424 | margin-left: auto; 1425 | } 1426 | 1427 | /* Make the icons stand out on what is/isn't okay */ 1428 | .bs-brand-item .glyphicon { 1429 | width: 30px; 1430 | height: 30px; 1431 | margin: 10px auto -10px; 1432 | line-height: 30px; 1433 | color: #fff; 1434 | border-radius: 50%; 1435 | } 1436 | .bs-brand-item .glyphicon-ok { 1437 | background-color: #5cb85c; 1438 | } 1439 | .bs-brand-item .glyphicon-remove { 1440 | background-color: #d9534f; 1441 | } 1442 | 1443 | @media (min-width: 768px) { 1444 | .bs-brand-item { 1445 | display: table-cell; 1446 | width: 1%; 1447 | } 1448 | .bs-brand-item + .bs-brand-item { 1449 | border-top: 0; 1450 | border-left: 1px solid #fff; 1451 | } 1452 | .bs-brand-item h1 { 1453 | font-size: 60px; 1454 | } 1455 | } 1456 | 1457 | 1458 | /* 1459 | * Miscellaneous 1460 | * 1461 | * Odds and ends for optimum docs display. 1462 | */ 1463 | 1464 | /* Examples gallery: space out content better */ 1465 | .bs-examples .thumbnail { 1466 | margin-bottom: 10px; 1467 | } 1468 | .bs-examples h4 { 1469 | margin-bottom: 5px; 1470 | } 1471 | .bs-examples p { 1472 | margin-bottom: 20px; 1473 | } 1474 | 1475 | /* Pseudo :focus state for showing how it looks in the docs */ 1476 | #focusedInput { 1477 | border-color: rgb(204,204,204); /* Restate unfocused value to make CSSLint happy that there's a pre-CSS3 fallback*/ 1478 | border-color: rgba(82,168,236,.8); 1479 | outline: 0; 1480 | outline: thin dotted \9; /* IE6-9 */ 1481 | -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6); 1482 | box-shadow: 0 0 8px rgba(82,168,236,.6); 1483 | } 1484 | 1485 | 1486 | /* 1487 | * ZeroClipboard styles 1488 | */ 1489 | 1490 | .zero-clipboard { 1491 | position: relative; 1492 | display: none; 1493 | } 1494 | .btn-clipboard { 1495 | position: absolute; 1496 | top: 0; 1497 | right: 0; 1498 | z-index: 10; 1499 | display: block; 1500 | padding: 5px 8px; 1501 | font-size: 12px; 1502 | color: #777; 1503 | cursor: pointer; 1504 | background-color: #fff; 1505 | border: 1px solid #e1e1e8; 1506 | border-radius: 0 4px 0 4px; 1507 | } 1508 | .btn-clipboard-hover { 1509 | color: #fff; 1510 | background-color: #563d7c; 1511 | border-color: #563d7c; 1512 | } 1513 | 1514 | @media (min-width: 768px) { 1515 | .zero-clipboard { 1516 | display: block; 1517 | } 1518 | } 1519 | -------------------------------------------------------------------------------- /docs/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gearz-lab/react-ui/8bc4808092fd913ec6554f5b9f60d4a00f7bb7ef/docs/assets/logo.png -------------------------------------------------------------------------------- /docs/assets/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * React Bootstrap Documentation 3 | * Special styles for presenting react-bootstrap's documentation and code examples. 4 | * Based on the Bootstrap Documentation styles and overridden as necessary. 5 | */ 6 | 7 | body { 8 | background-color: #f9f9f9; 9 | } 10 | 11 | .bs-docs-nav { 12 | background-color: #222; 13 | } 14 | 15 | .bs-docs-nav .navbar-nav>li>a { 16 | color: #aaa; 17 | font-weight: normal; 18 | } 19 | 20 | .bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a, .bs-docs-nav .navbar-nav>.active>a:hover { 21 | background: #333; 22 | color: #fafafa; 23 | } 24 | 25 | .bs-docs-nav .navbar-collapse { 26 | overflow: hidden; 27 | } 28 | 29 | @media (min-width: 768px) { 30 | 31 | .bs-docs-nav .navbar-nav>li>a { 32 | border-bottom: 3px solid #222; 33 | } 34 | .bs-docs-nav .navbar-nav>li>a:hover,.bs-docs-nav .navbar-nav>.active>a, .bs-docs-nav .navbar-nav>.active>a:hover { 35 | border-bottom: 3px solid #cc7a6f; 36 | } 37 | } 38 | 39 | .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { 40 | color: white; 41 | } 42 | 43 | .bs-docs-masthead, .bs-docs-header { 44 | background: #79255E; 45 | filter: none; 46 | color: #79255E; 47 | } 48 | 49 | .bs-docs-header h1 { 50 | color: #e9e9e9; 51 | } 52 | 53 | .bs-docs-header p { 54 | color: #e9e9e9; 55 | } 56 | 57 | .bs-docs-sidebar .nav>li>a { 58 | color: #666; 59 | } 60 | 61 | .bs-docs-sidebar .nav>li>a:hover, .bs-docs-sidebar .nav>li>a:focus { 62 | color: #cc7a6f; 63 | border-left: 1px solid #cc7a6f; 64 | } 65 | 66 | .back-to-top:hover { 67 | color: #cc7a6f; 68 | } 69 | 70 | 71 | .CodeMirror, .CodeMirror-scroll { 72 | height: auto; 73 | } 74 | 75 | .bs-example .btn-toolbar + .btn-toolbar { 76 | margin-top: 10px; 77 | } 78 | 79 | .bs-example .static-modal .modal { 80 | position: relative; 81 | top: auto; 82 | right: auto; 83 | left: auto; 84 | bottom: auto; 85 | z-index: 1; 86 | display: block; 87 | } 88 | 89 | .bs-docs-booticon { 90 | background: url('./logo.png') 0 0 no-repeat; 91 | background-size: contain; 92 | border: 0; 93 | width: 345px; 94 | } 95 | 96 | .bs-example-scroll { 97 | overflow: scroll; 98 | height: 200px; 99 | } 100 | 101 | .bs-example-scroll > div { 102 | position: relative; 103 | padding: 100px 0; 104 | } 105 | 106 | .playground { 107 | margin-bottom: 36px; 108 | } 109 | 110 | .bs-example { 111 | margin-bottom: 0; 112 | } 113 | 114 | .bs-example + .highlight { 115 | margin-top: 0; 116 | margin-bottom: 0; 117 | border-top: none; 118 | border-bottom-right-radius: 0; 119 | } 120 | 121 | .code-toggle { 122 | float: right; 123 | display: inline-block; 124 | position: relative; 125 | top: -1px; 126 | background: #fafafa; 127 | border-bottom-left-radius: 4px; 128 | border-bottom-right-radius: 4px; 129 | border: 1px solid #e1e1e8; 130 | border-top: none; 131 | padding: 4px 8px; 132 | } 133 | 134 | @media (min-width: 768px) { 135 | .code-toggle { 136 | background: #fff; 137 | } 138 | } 139 | 140 | .code-toggle.open { 141 | background: #f8f5ec; 142 | } 143 | 144 | // Minimal CSS Needed for contained modals 145 | .modal-container { 146 | position: relative; 147 | } 148 | .modal-container .modal, .modal-container .modal-backdrop { 149 | position: absolute; 150 | } 151 | 152 | -------------------------------------------------------------------------------- /docs/build.js: -------------------------------------------------------------------------------- 1 | import from 'colors'; 2 | import React from 'react'; 3 | import path from 'path'; 4 | import Router from 'react-router'; 5 | import routes from './src/Routes'; 6 | import Root from './src/Root'; 7 | import fsep from 'fs-extra-promise'; 8 | import { exec } from 'child-process-promise'; 9 | import rimraf from 'rimraf-promise'; 10 | 11 | const repoRoot = path.resolve(__dirname, '../'); 12 | const docsBuilt = path.join(repoRoot, 'docs-built'); 13 | 14 | const licenseSrc = path.join(repoRoot, 'LICENSE'); 15 | const licenseDest = path.join(docsBuilt, 'LICENSE'); 16 | const readmeSrc = path.join(__dirname, 'README.docs.md'); 17 | const readmeDest = path.join(docsBuilt, 'README.md'); 18 | 19 | export default function BuildDocs() { 20 | console.log('Building: '.cyan + 'docs'.green); 21 | 22 | return rimraf(docsBuilt) 23 | .then(() => fsep.mkdir(docsBuilt)) 24 | .then(() => { 25 | let writes = Root 26 | .getPages() 27 | .map(fileName => new Promise((resolve, reject) => { 28 | Router.run(routes, '/' + fileName, Handler => { 29 | let RootHTML = React.renderToString(React.createElement(Handler)); 30 | return fsep.writeFile(path.join(docsBuilt, fileName), RootHTML) 31 | .then(write => resolve(write)); 32 | }); 33 | })); 34 | 35 | return Promise.all(writes.concat([ 36 | exec(`webpack --config webpack.docs.js -p --bail`), 37 | fsep.copy(licenseSrc, licenseDest), 38 | fsep.copy(readmeSrc, readmeDest) 39 | ])); 40 | }) 41 | .then(() => console.log('Built: '.cyan + 'docs'.green)); 42 | } 43 | -------------------------------------------------------------------------------- /docs/client.js: -------------------------------------------------------------------------------- 1 | import from 'bootstrap/less/bootstrap.less'; 2 | import from './assets/docs.css'; 3 | import from './assets/style.css'; 4 | 5 | import from './assets/carousel.png'; 6 | import from './assets/logo.png'; 7 | 8 | // React-UI styles 9 | import from '../src/less/data/treeView.less'; 10 | import from '../src/less/navigation/VNav.less'; 11 | 12 | import React from 'react'; 13 | import Router from 'react-router'; 14 | import routes from './src/Routes'; 15 | 16 | // TODO: Move this to Webpack 17 | // For React devtools 18 | window.React = React; 19 | 20 | Router.run(routes, Router.RefreshLocation, Handler => { 21 | React.render( 22 | React.createElement(Handler, window.INITIAL_PROPS), document); 23 | }); 24 | -------------------------------------------------------------------------------- /docs/examples/DataTreeViewBasicUsage.js: -------------------------------------------------------------------------------- 1 | const treeNodes = { 2 | page: { 3 | display: "PageControl", 4 | nodes: { 5 | editPanel: { 6 | display: "StackPanelControl", 7 | nodes: { 8 | panel: { 9 | display: "Panel (Main)", 10 | nodes: { 11 | name: { 12 | display: "TexboxControl (Name)" 13 | }, 14 | dateOfBirth: { 15 | display: "DatePickerControl (Date of Birth)" 16 | }, 17 | gender: { 18 | display: "ToggleButtonControl (Gender)" 19 | } 20 | } 21 | }, 22 | panel2: { 23 | display: "Panel (Additional Info)", 24 | nodes: { 25 | isResponsible: { 26 | display: "ToogleButtonControl (Is Responsible)" 27 | } 28 | } 29 | } 30 | } 31 | } 32 | } 33 | } 34 | }; 35 | 36 | const LayoutTreeViewBasicUsage = ( 37 | 38 | ); 39 | 40 | React.render(LayoutTreeViewBasicUsage, mountNode); 41 | -------------------------------------------------------------------------------- /docs/examples/EditorsTextBoxBasicUsage.js: -------------------------------------------------------------------------------- 1 | const EditorsTextBoxBasicUsage = ( 2 | 6 | ); 7 | 8 | React.render(EditorsTextBoxBasicUsage, mountNode); 9 | -------------------------------------------------------------------------------- /docs/examples/EditorsTextBoxDisabledState.js: -------------------------------------------------------------------------------- 1 | const EditorsTextBoxDisabledState = ( 2 | 7 | ); 8 | 9 | React.render(EditorsTextBoxDisabledState, mountNode); 10 | -------------------------------------------------------------------------------- /docs/examples/EditorsTextBoxPlaceholder.js: -------------------------------------------------------------------------------- 1 | const EditorsTextBoxPrependAndAppend = ( 2 | 7 | ); 8 | 9 | React.render(EditorsTextBoxPrependAndAppend, mountNode); 10 | -------------------------------------------------------------------------------- /docs/examples/EditorsTextBoxPrependAndAppend.js: -------------------------------------------------------------------------------- 1 | const EditorsTextBoxPlaceholder = ( 2 | 8 | ); 9 | 10 | React.render(EditorsTextBoxPlaceholder, mountNode); 11 | -------------------------------------------------------------------------------- /docs/examples/NavigationVNavBasicUsage.js: -------------------------------------------------------------------------------- 1 | const selectHandler = (name) => alert(name); 2 | 3 | const NavigationSideNavBasicUsage = ( 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | 15 | React.render(NavigationSideNavBasicUsage, mountNode); 16 | -------------------------------------------------------------------------------- /docs/md/building.md: -------------------------------------------------------------------------------- 1 | Building react-ui 2 | === 3 | 4 | Building CSS 5 | --- 6 | 7 | CSS is build through `gulp`. Run: 8 | 9 | $ gulp styles -------------------------------------------------------------------------------- /docs/server.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import express from 'express'; 3 | import path from 'path'; 4 | import webpack from 'webpack'; 5 | import webpackMiddleware from 'webpack-dev-middleware'; 6 | import webpackConfigBuilder from '../webpack/webpack.config'; 7 | import Router from 'react-router'; 8 | import routes from './src/Routes'; 9 | 10 | const development = process.env.NODE_ENV !== 'production'; 11 | let app = express(); 12 | 13 | if (development) { 14 | let webpackConfig = webpackConfigBuilder({ 15 | development: development, 16 | docs: true 17 | }); 18 | 19 | 20 | 21 | let publicPath = webpackConfig.output.publicPath; 22 | 23 | webpackConfig.output.path = '/'; 24 | webpackConfig.output.publicPath = undefined; 25 | 26 | app = app 27 | .use(webpackMiddleware(webpack(webpackConfig), { 28 | noInfo: false, 29 | publicPath: publicPath, 30 | stats: { 31 | colors: true 32 | } 33 | })) 34 | .use(function renderApp(req, res) { 35 | Router.run(routes, req.url, Handler => { 36 | let html = React.renderToString(); 37 | res.send(html); 38 | }); 39 | }); 40 | } else { 41 | app = app 42 | .use(express.static(path.join(__dirname, '../docs-built'))); 43 | } 44 | 45 | app 46 | .listen(4000, function () { 47 | console.log('Server started at http://localhost:4000'); 48 | }); 49 | -------------------------------------------------------------------------------- /docs/src/CodeMirror.client.js: -------------------------------------------------------------------------------- 1 | import CodeMirror from 'codemirror'; 2 | import 'codemirror/mode/javascript/javascript'; 3 | 4 | import 'codemirror/theme/solarized.css'; 5 | import 'codemirror/lib/codemirror.css'; 6 | import './CodeMirror.css'; 7 | 8 | export default { 9 | IS_NODE: false, 10 | CodeMirror 11 | }; 12 | -------------------------------------------------------------------------------- /docs/src/CodeMirror.css: -------------------------------------------------------------------------------- 1 | .cm-s-solarized.CodeMirror { 2 | -moz-box-shadow: none; 3 | -webkit-box-shadow: none; 4 | box-shadow: none; 5 | } 6 | 7 | .highlight, .code-toggle.open { 8 | background-color: #fdf6e3; 9 | } 10 | 11 | .cm-s-solarized .cm-comment { color: #93a1a1; } 12 | 13 | .CodeMirror, .CodeMirror-scroll { 14 | height: auto; 15 | } 16 | -------------------------------------------------------------------------------- /docs/src/CodeMirror.js: -------------------------------------------------------------------------------- 1 | export default { 2 | IS_NODE: true, 3 | CodeMirror: {} 4 | }; 5 | -------------------------------------------------------------------------------- /docs/src/ComponentsPage.js: -------------------------------------------------------------------------------- 1 | /* eslint no-path-concat: 0 */ 2 | 3 | import React from 'react'; 4 | 5 | import Affix from 'react-bootstrap/lib/Affix'; 6 | import Nav from 'react-bootstrap/lib/Nav'; 7 | import SubNav from 'react-bootstrap/lib/SubNav'; 8 | import NavItem from 'react-bootstrap/lib/NavItem'; 9 | 10 | import NavMain from './NavMain'; 11 | import PageHeader from './PageHeader'; 12 | import PageFooter from './PageFooter'; 13 | import ReactPlayground from './ReactPlayground'; 14 | import Samples from './Samples'; 15 | import Textbox from '../../src/components/editors/textbox/textbox'; 16 | 17 | const ComponentsPage = React.createClass({ 18 | getInitialState() { 19 | return { 20 | activeNavItemHref: null, 21 | navOffsetTop: null 22 | }; 23 | }, 24 | 25 | handleNavItemSelect(key, href) { 26 | this.setState({ 27 | activeNavItemHref: href 28 | }); 29 | 30 | window.location = href; 31 | }, 32 | 33 | componentDidMount() { 34 | let elem = this.refs.sideNav.getDOMNode(), 35 | domUtils = Affix.domUtils, 36 | sideNavOffsetTop = domUtils.getOffset(elem).top, 37 | sideNavMarginTop = parseInt(domUtils.getComputedStyles(elem.firstChild).marginTop, 10), 38 | topNavHeight = this.refs.topNav.getDOMNode().offsetHeight; 39 | 40 | this.setState({ 41 | navOffsetTop: sideNavOffsetTop - topNavHeight - sideNavMarginTop, 42 | navOffsetBottom: this.refs.footer.getDOMNode().offsetHeight 43 | }); 44 | }, 45 | 46 | render() { 47 | return ( 48 |
49 | 50 | 51 | 54 | 55 |
56 |
57 |
58 | 59 | {/* General */} 60 |
61 |

General

62 |

ReactUI uses Statefy to control state and props. 63 | We recommend reading it's documentation.

64 | 65 |
66 |

Auto generated events

67 |

Statefy adds auto-generated change events to any props. So, for instance, if a component has 68 | a url prop, then, there's also a onUrlChange event. When this event is handled, if 69 | event.preventDefault() is called, then the component will not update it's internal state and it's 70 | up the the caller to render the component again.

71 |
72 |
73 | 74 | {/* Editors */} 75 |
76 |

Editors

77 | 78 |

Textbox

79 |

Basic usage

80 | 81 | 82 |

Prepending and appending text

83 | 84 | 85 |

Placeholder

86 | 87 | 88 |

Disabled state

89 | 90 | 91 |
92 | 93 | {/* Data */} 94 |
95 |

Data

96 |

TreeView

97 |

Basic usage

98 | 99 |
100 | 101 | {/* Navigation */} 102 |
103 |

Navigation

104 | 105 |

Basic usage

106 | 107 |
108 | 109 |
110 | 111 | 112 | 113 |
114 | 119 | 134 | 135 | Back to top 136 | 137 | 138 |
139 |
140 |
141 | 142 | 143 |
144 | ); 145 | } 146 | }); 147 | 148 | export default ComponentsPage; 149 | -------------------------------------------------------------------------------- /docs/src/GettingStartedPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import NavMain from './NavMain'; 4 | import PageHeader from './PageHeader'; 5 | import PageFooter from './PageFooter'; 6 | 7 | const Page = React.createClass({ 8 | render() { 9 | return ( 10 |
11 | 12 | 13 | 16 | 17 |
18 |
19 |
20 |
21 |

Setup

22 |

You can import the lib as AMD modules, CommonJS modules, or as a global JS script.

23 | 24 |

First add the Bootstrap CSS to your project; check here if you have not already done that. Then:

25 | 26 |

CommonJS

27 | 28 |

Installing:

29 | 30 |
31 | 
{`
 32 |   $ npm install react
 33 |   $ npm install reactui
 34 |                     `}
35 | 36 |

Using:

37 | 38 | 
{`
 39 |   var Textbox = require('reactui/lib/Textbox');
 40 |   // or
 41 |   var Textbox = require('reactui').Textbox;
 42 |                     `}
43 |
44 | 45 |

AMD

46 | 47 |

Installing:

48 | 49 |
50 | 
{`
 51 |   $ bower install react
 52 |   $ bower install reactui
 53 |                     `}
54 | 55 |

Using:

56 | 57 | 
{`
 58 |   define(['reactui/lib/Textbox'], function(Alert) { ... });
 59 |   // or
 60 |   define(['reactui'], function(ReactUI) { var Textbox = ReactUI.Textbox; ... });
 61 |                     `}
62 |
63 | 64 |

Browser globals

65 | 66 |

Installing:

67 | 68 |

The bower repo contains react-ui.js and react-ui.min.js with all components exported in the window.ReactUI object.

69 | 70 |

Using:

71 | 72 |
73 | 
{`
 74 |   
 75 |   
 76 |   
 79 |                     `}
80 |
81 |
82 |
83 |

Browser support

84 |

We aim to support all browsers supported by both React and Bootstrap.

85 | 86 |

React requires polyfills for non-ES5 capable browsers.

87 | 88 |

jQuery is currently required only for IE8 support for components which require reading element positions from the DOM: Popover and Tooltip when launched with OverlayTrigger. We would like to remove this dependency in future versions but for now, including the following snippet in your page should have you covered:

89 | 90 |
91 | 
{`
 92 |   
105 |                     `}
106 |
107 |
108 |
109 |
110 |
111 | 112 | 113 |
114 | ); 115 | }, 116 | 117 | shouldComponentUpdate() { 118 | return false; 119 | } 120 | }); 121 | 122 | export default Page; 123 | -------------------------------------------------------------------------------- /docs/src/HomePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import NavMain from './NavMain'; 4 | import PageFooter from './PageFooter'; 5 | 6 | const HomePage = React.createClass({ 7 | render: function () { 8 | return ( 9 |
10 | 11 | 12 |
13 |
14 | 15 |

Bootstrap based data components for React

16 |
17 |
18 | 19 | 20 |
21 | ); 22 | } 23 | }); 24 | 25 | export default HomePage; 26 | -------------------------------------------------------------------------------- /docs/src/NavMain.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Router, { Link } from 'react-router'; 3 | import Navbar from 'react-bootstrap/lib/Navbar'; 4 | import Nav from 'react-bootstrap/lib/Nav'; 5 | 6 | const NAV_LINKS = { 7 | 'getting-started': { 8 | link: 'getting-started', 9 | title: 'Getting started' 10 | }, 11 | 'components': { 12 | link: 'components', 13 | title: 'Components' 14 | } 15 | }; 16 | 17 | const NavMain = React.createClass({ 18 | propTypes: { 19 | activePage: React.PropTypes.string 20 | }, 21 | 22 | render() { 23 | let brand = React-UI; 24 | let links = Object.keys(NAV_LINKS).map(this.renderNavItem).concat([ 25 |
  • 26 | GitHub 27 |
    • 28 | ]); 29 | 30 | return ( 31 | 32 | 35 | 36 | ); 37 | }, 38 | 39 | renderNavItem(linkName) { 40 | let link = NAV_LINKS[linkName]; 41 | 42 | return ( 43 |
  • 44 | {link.title} 45 |
    • 46 | ); 47 | } 48 | }); 49 | 50 | export default NavMain; 51 | -------------------------------------------------------------------------------- /docs/src/NotFoundPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import NavMain from './NavMain'; 4 | import PageHeader from './PageHeader'; 5 | import PageFooter from './PageFooter'; 6 | 7 | const NotFoundPage = React.createClass({ 8 | render() { 9 | return ( 10 |
    11 | 12 | 13 | 16 | 17 | 18 |
    19 | ); 20 | } 21 | }); 22 | 23 | export default NotFoundPage; 24 | -------------------------------------------------------------------------------- /docs/src/PageFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import packageJSON from '../../package.json'; 3 | 4 | const PageHeader = React.createClass({ 5 | render() { 6 | return ( 7 |
    8 |
    9 |
    10 |
      11 |
    • 12 | 34 |
      • 35 |
    36 |
    37 |

    Code licensed under MIT.

    38 |
      39 |
    • Currently v{packageJSON.version}
      • 40 |
    • ·
      • 41 |
    • GitHub
      • 42 |
    • ·
      • 43 |
    • Issues
      • 44 |
    45 |
    46 |
    47 | ); 48 | } 49 | }); 50 | 51 | export default PageHeader; 52 | -------------------------------------------------------------------------------- /docs/src/PageHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const PageHeader = React.createClass({ 4 | propTypes: { 5 | title: React.PropTypes.string, 6 | subTitle: React.PropTypes.string 7 | }, 8 | render() { 9 | return ( 10 |
    11 |
    12 |

    {this.props.title}

    13 |

    {this.props.subTitle}

    14 |
    15 |
    16 | ); 17 | } 18 | }); 19 | 20 | export default PageHeader; 21 | -------------------------------------------------------------------------------- /docs/src/ReactPlayground.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import React from 'react'; 3 | import classNames from 'classnames'; 4 | 5 | // React-UI 6 | import FormGroup from '../../src/components/layout/formGroup/formGroup.jsx'; 7 | import Textbox from '../../src/components/editors/textbox/textbox'; 8 | import TreeView from '../../src/components/data/treeView/treeView.jsx'; 9 | import VNav from '../../src/components/navigation/VNav/VNav.jsx'; 10 | import VNavGroup from '../../src/components/navigation/VNav/VNavGroup.jsx'; 11 | import VNavItem from '../../src/components/navigation/VNav/VNavItem.jsx'; 12 | 13 | // React-Bootstrap 14 | import Accordion from 'react-bootstrap/lib/Accordion'; 15 | import Alert from 'react-bootstrap/lib/Alert'; 16 | import Badge from 'react-bootstrap/lib/Badge'; 17 | import Button from 'react-bootstrap/lib/Button'; 18 | import ButtonGroup from 'react-bootstrap/lib/ButtonGroup'; 19 | import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'; 20 | import CollapsableNav from 'react-bootstrap/lib/CollapsableNav'; 21 | import CollapsableMixin from 'react-bootstrap/lib/CollapsableMixin'; 22 | import Carousel from 'react-bootstrap/lib/Carousel'; 23 | import CarouselItem from 'react-bootstrap/lib/CarouselItem'; 24 | import Col from 'react-bootstrap/lib/Col'; 25 | import DropdownButton from 'react-bootstrap/lib/DropdownButton'; 26 | import Glyphicon from 'react-bootstrap/lib/Glyphicon'; 27 | import Grid from 'react-bootstrap/lib/Grid'; 28 | import Input from 'react-bootstrap/lib/Input'; 29 | import Jumbotron from 'react-bootstrap/lib/Jumbotron'; 30 | import Label from 'react-bootstrap/lib/Label'; 31 | import ListGroup from 'react-bootstrap/lib/ListGroup'; 32 | import ListGroupItem from 'react-bootstrap/lib/ListGroupItem'; 33 | import Nav from 'react-bootstrap/lib/Nav'; 34 | import Navbar from 'react-bootstrap/lib/Navbar'; 35 | import NavItem from 'react-bootstrap/lib/NavItem'; 36 | import MenuItem from 'react-bootstrap/lib/MenuItem'; 37 | import Modal from 'react-bootstrap/lib/Modal'; 38 | import ModalTrigger from 'react-bootstrap/lib/ModalTrigger'; 39 | import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; 40 | import OverlayMixin from 'react-bootstrap/lib/OverlayMixin'; 41 | import PageHeader from 'react-bootstrap/lib/PageHeader'; 42 | import PageItem from 'react-bootstrap/lib/PageItem'; 43 | import Pager from 'react-bootstrap/lib/Pager'; 44 | import Panel from 'react-bootstrap/lib/Panel'; 45 | import PanelGroup from 'react-bootstrap/lib/PanelGroup'; 46 | import Popover from 'react-bootstrap/lib/Popover'; 47 | import ProgressBar from 'react-bootstrap/lib/ProgressBar'; 48 | import Row from 'react-bootstrap/lib/Row'; 49 | import SplitButton from 'react-bootstrap/lib/SplitButton'; 50 | import TabbedArea from 'react-bootstrap/lib/TabbedArea'; 51 | import Table from 'react-bootstrap/lib/Table'; 52 | import TabPane from 'react-bootstrap/lib/TabPane'; 53 | import Tooltip from 'react-bootstrap/lib/Tooltip'; 54 | import Well from 'react-bootstrap/lib/Well'; 55 | /* eslint-enable */ 56 | 57 | import {CodeMirror, IS_NODE} from './CodeMirror'; 58 | import babel from 'babel/browser'; 59 | 60 | const IS_MOBILE = typeof navigator !== 'undefined' && ( 61 | navigator.userAgent.match(/Android/i) 62 | || navigator.userAgent.match(/webOS/i) 63 | || navigator.userAgent.match(/iPhone/i) 64 | || navigator.userAgent.match(/iPad/i) 65 | || navigator.userAgent.match(/iPod/i) 66 | || navigator.userAgent.match(/BlackBerry/i) 67 | || navigator.userAgent.match(/Windows Phone/i) 68 | ); 69 | 70 | const CodeMirrorEditor = React.createClass({ 71 | componentDidMount() { 72 | if (IS_MOBILE || IS_NODE) { 73 | return; 74 | } 75 | 76 | this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), { 77 | mode: 'javascript', 78 | lineNumbers: false, 79 | lineWrapping: false, 80 | matchBrackets: true, 81 | tabSize: 2, 82 | theme: 'solarized light', 83 | readOnly: this.props.readOnly 84 | }); 85 | this.editor.on('change', this.handleChange); 86 | }, 87 | 88 | componentDidUpdate() { 89 | if (this.props.readOnly) { 90 | this.editor.setValue(this.props.codeText); 91 | } 92 | }, 93 | 94 | handleChange() { 95 | if (!this.props.readOnly && this.props.onChange) { 96 | this.props.onChange(this.editor.getValue()); 97 | } 98 | }, 99 | 100 | render() { 101 | // wrap in a div to fully contain CodeMirror 102 | let editor; 103 | 104 | if (IS_MOBILE) { 105 | let preStyles = {overflow: 'scroll'}; 106 | editor = 
    {this.props.codeText}
    ; 107 | } else { 108 | editor =