├── .babelrc
├── .gitignore
├── angular
    ├── app.js
    └── index.html
├── angular5
    ├── .gitignore
    ├── app
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   └── main.ts
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── systemjs.config.js
    └── tsconfig.json
├── bootstrap
    ├── app.js
    ├── bootstrap-theme.js
    ├── bootstrap.js
    └── index.html
├── calendar
    ├── components
    │   ├── calendar
    │   │   ├── index.js
    │   │   └── style.js
    │   ├── canvas
    │   │   ├── index.js
    │   │   └── style.js
    │   ├── conf
    │   │   └── index.js
    │   ├── event
    │   │   ├── content-tpl.js
    │   │   ├── index.js
    │   │   └── style.js
    │   ├── events-manager
    │   │   ├── distribute.js
    │   │   └── index.js
    │   ├── jss.js
    │   ├── timeline
    │   │   ├── index.js
    │   │   ├── marker-tpl.js
    │   │   └── style.js
    │   └── utils
    │   │   └── index.js
    ├── dist
    │   └── index.js
    ├── index.html
    ├── index.js
    └── webpack.config.js
├── composition
    ├── app.js
    ├── component-a-style.js
    ├── component-b-style.js
    └── index.html
├── dynamic-props
    ├── app.js
    └── index.html
├── example.css
├── favicon.ico
├── function-values
    ├── Controls.js
    ├── app.js
    ├── dist
    │   └── app.js
    ├── index.html
    ├── index.js
    ├── jssRenderer.js
    ├── reactInlineRenderer.js
    ├── reactJssRenderer.js
    ├── utils.js
    └── webpack.config.js
├── index.html
├── inline
    ├── app.js
    └── index.html
├── jss-camel-case.js
├── jss-debug.js
├── jss-default-unit.js
├── jss-extend.js
├── jss-global.js
├── jss-isolate.js
├── jss-nested.js
├── jss-preset-default.js
├── jss-props-sort.js
├── jss-vendor-prefixer.js
├── jss.js
├── observables
    ├── dist
    │   ├── app.js
    │   └── app.js.map
    ├── index.html
    ├── index.js
    └── webpack.config.js
├── package-lock.json
├── package.json
├── perdido.js
├── perdido
    ├── app.js
    ├── index.html
    └── styles.js
├── plugins
    ├── jss-camel-case
    │   └── simple
    │   │   ├── app.js
    │   │   └── index.html
    ├── jss-default-unit
    │   └── simple
    │   │   ├── app.js
    │   │   └── index.html
    ├── jss-extend
    │   ├── multi
    │   │   ├── app.js
    │   │   └── index.html
    │   └── simple
    │   │   ├── app.js
    │   │   └── index.html
    ├── jss-global
    │   ├── app.js
    │   └── index.html
    ├── jss-isolate
    │   └── simple
    │   │   ├── app.js
    │   │   └── index.html
    ├── jss-nested
    │   └── simple
    │   │   ├── app.js
    │   │   └── index.html
    └── jss-props-sort
    │   └── simple
    │       ├── app.js
    │       └── index.html
├── react-ssr
    ├── bin
    │   └── build.js
    ├── dist
    │   ├── app.js
    │   └── index.html
    ├── src
    │   ├── Button.js
    │   ├── client.js
    │   └── server.js
    └── webpack.config.js
├── readme.md
├── swinging-cat-rx
    ├── README.md
    ├── dist
    │   └── app.js
    ├── index.html
    ├── index.js
    ├── package-lock.json
    ├── package.json
    ├── src
    │   ├── animation.js
    │   ├── ear.js
    │   ├── face.js
    │   ├── globalStyles.js
    │   ├── hand.js
    │   ├── jss.js
    │   ├── leg.js
    │   ├── lowerBody.js
    │   ├── scene.js
    │   ├── tail.js
    │   ├── theme.js
    │   ├── upperBody.js
    │   └── yarn.js
    └── webpack.config.js
└── swinging-cat
    ├── README.md
    ├── dist
        └── app.js
    ├── index.html
    ├── index.js
    ├── package.json
    ├── src
        ├── ear.js
        ├── face.js
        ├── globalStyles.js
        ├── hand.js
        ├── jss.js
        ├── keyframes.js
        ├── leg.js
        ├── lowerBody.js
        ├── scene.js
        ├── tail.js
        ├── theme.js
        ├── upperBody.js
        └── yarn.js
    └── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "react", "stage-0"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | npm-debug.log
4 | tmp
5 | *~
6 | 


--------------------------------------------------------------------------------
/angular/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   button1: {
 4 |     padding: '20px',
 5 |     background: 'blue',
 6 |     color: '#fff'
 7 |   },
 8 |   button2: {
 9 |     padding: '10px',
10 |     background: 'red'
11 |   }
12 | }
13 | 
14 | // Application logic.
15 | var sheet = jss.default.createStyleSheet(styles).attach()
16 | 
17 | angular
18 |   .module('myApp', [])
19 |   .controller('myController', function MyController($scope) {
20 |     $scope.classes = sheet.classes
21 |     $scope.showSource = function () {
22 |       location.href = 'https://github.com/cssinjs/examples/tree/master/angular'
23 |     }
24 |   })
25 | 


--------------------------------------------------------------------------------
/angular/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html ng-app="myApp">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Angular with jss</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |     <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular.min.js"></script>
 8 |     <script src="../jss.js"></script>
 9 |     <script src="./app.js"></script>
10 |   </head>
11 |   <body ng-controller="myController">
12 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/angular" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
13 |     <button class="{{classes.button1}}">Button 1</button>
14 |     <button class="{{classes.button2}}">Button 2</button>
15 |     <button ng-click="showSource()">View source</button>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/angular5/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /dist/
3 | 


--------------------------------------------------------------------------------
/angular5/app/app.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit } from '@angular/core'
  2 | 
  3 | import jss from 'jss'
  4 | 
  5 | @Component({
  6 |   selector: 'app',
  7 |   template: `
  8 |   <h1 [class]="classes.title">JSS Angular5 example</h1>
  9 | 
 10 |   <input [class]="classes.area" type="textarea">
 11 | 
 12 |   <div [class]="classes.buttons">      
 13 |     <label [class]="classes.redButton" (change)="onRedChanged($event)">
 14 |       <input type="radio" name="color" checked>
 15 |       Red
 16 |     </label>
 17 | 
 18 |     <label [class]="classes.greenButton" (change)="onGreenChanged($event)">
 19 |       <input type="radio" name="color">
 20 |       Green
 21 |     </label>
 22 | 
 23 |     <label [class]="classes.blueButton" (change)="onBlueChanged($event)">
 24 |       <input type="radio" name="color">
 25 |       Blue
 26 |     </label>
 27 |   </div>
 28 |   `
 29 | })
 30 | export class AppComponent implements OnInit {
 31 |   public classes: Object
 32 | 
 33 |   public onRedChanged: Function
 34 |   public onGreenChanged: Function
 35 |   public onBlueChanged: Function
 36 | 
 37 |   private readonly red: string = '#F44336'
 38 |   private readonly green: string = '#4CAF50'
 39 |   private readonly blue: string = '#2196F3'
 40 | 
 41 |   public ngOnInit(): void {
 42 |     const styles: Object = {
 43 |       title: {
 44 |         textAlign: 'center',
 45 |         backgroundColor: '#E0E0E0',
 46 |         '&:hover': {
 47 |           backgroundColor: '#BDBDBD'
 48 |         }
 49 |       },
 50 |       area: {
 51 |         width: '100%',
 52 |         height: '10rem',
 53 |         color: 'white',
 54 |         backgroundColor: data => data.area.backgroundColor
 55 |       },
 56 |       buttons: {
 57 |         display: 'flex',
 58 |         flexDirection: 'row',
 59 |         marginTop: '1rem'
 60 |       },
 61 |       redButton: this.createButtonStyle(this.red),
 62 |       greenButton: this.createButtonStyle(this.green),
 63 |       blueButton: this.createButtonStyle(this.blue)
 64 |     }
 65 | 
 66 |     const sheet: sheet = jss.createStyleSheet(styles, { link: true }).attach()
 67 | 
 68 |     this.classes = sheet.classes
 69 | 
 70 |     this.onRedChanged = this.createChangeFunction(sheet, this.red);
 71 |     this.onGreenChanged = this.createChangeFunction(sheet, this.green);
 72 |     this.onBlueChanged = this.createChangeFunction(sheet, this.blue);
 73 | 
 74 |     sheet.update({
 75 |       area: { backgroundColor: this.red }
 76 |     })
 77 |   }
 78 | 
 79 |   private createButtonStyle(color: string): Object {
 80 |     return {
 81 |       flex: 'auto',
 82 |       '&:hover': { color }
 83 |     }
 84 |   }
 85 | 
 86 |   private createChangeFunction(sheet: sheet, color: string): (event: Event) => void {
 87 |     return (event: Event) => {
 88 |       event.stopPropagation()
 89 |       event.preventDefault()
 90 | 
 91 |       sheet.update({
 92 |         area: { backgroundColor: color }
 93 |       })
 94 |     }
 95 |   }
 96 | }
 97 | 
 98 | interface sheet {
 99 |   readonly classes: Object
100 |   readonly update: Function
101 | }
102 | 


--------------------------------------------------------------------------------
/angular5/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core'
 2 | import { BrowserModule } from '@angular/platform-browser'
 3 | import { AppComponent } from './app.component'
 4 | 
 5 | import jss from 'jss'
 6 | import preset from 'jss-preset-default'
 7 | 
 8 | jss.setup(preset())
 9 | 
10 | @NgModule({
11 |   imports: [BrowserModule],
12 |   declarations: [AppComponent],
13 |   bootstrap: [AppComponent]
14 | })
15 | export class AppModule { } 
16 | 


--------------------------------------------------------------------------------
/angular5/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
2 | import { AppModule } from './app.module'
3 | 
4 | platformBrowserDynamic().bootstrapModule(AppModule).catch(err => {
5 |     throw new Error(err)
6 | })
7 | 


--------------------------------------------------------------------------------
/angular5/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <title>JSS Angular5 example</title>
 6 |     <meta charset="utf-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 | 
 9 |     <script src="node_modules/core-js/client/shim.min.js"></script>
10 |     <script src="node_modules/zone.js/dist/zone.js"></script>
11 |     <script src="node_modules/systemjs/dist/system.src.js"></script>
12 | 
13 |     <script src="systemjs.config.js"></script>
14 | 
15 |     <script>System.import('app').catch(function (err) { console.error(err); });</script>
16 | </head>
17 | 
18 | <body>
19 |     <app>Loading...</app>
20 | </body>
21 | 
22 | </html>


--------------------------------------------------------------------------------
/angular5/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jss-angular-example",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"",
 6 |     "lite": "lite-server",
 7 |     "tsc": "tsc",
 8 |     "tsc:w": "tsc -w"
 9 |   },
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "@angular/common": "5.0.5",
13 |     "@angular/compiler": "5.0.5",
14 |     "@angular/core": "5.0.5",
15 |     "@angular/platform-browser": "5.0.5",
16 |     "@angular/platform-browser-dynamic": "5.0.5",
17 |     "core-js": "2.5.1",
18 |     "jss": "9.3.3",
19 |     "jss-preset-default": "4.0.1",
20 |     "rxjs": "5.5.3",
21 |     "systemjs": "0.20.19",
22 |     "zone.js": "0.8.18"
23 |   },
24 |   "devDependencies": {
25 |     "concurrently": "3.5.1",
26 |     "lite-server": "2.3.0",
27 |     "typescript": "2.6.2"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/angular5/systemjs.config.js:
--------------------------------------------------------------------------------
 1 | (function (global) {
 2 |   System.config({
 3 |     paths: {
 4 |       'npm:': 'node_modules/'
 5 |     },
 6 |     map: {
 7 |       app: 'dist',
 8 | 
 9 |       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
10 |       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
11 |       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
12 |       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
13 |       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
14 | 
15 |       'jss': 'npm:jss/dist/jss.min.js',
16 |       'jss-preset-default': 'npm:jss-preset-default/dist/jss-preset-default.min.js',
17 |       'rxjs': 'npm:rxjs'
18 |     },
19 |     packages: {
20 |       app: {
21 |         main: './main.js',
22 |         defaultExtension: 'js'
23 |       },
24 |       rxjs: {
25 |         defaultExtension: 'js'
26 |       }
27 |     }
28 |   });
29 | })(this);
30 | 


--------------------------------------------------------------------------------
/angular5/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "removeComments": true,
 4 |     "outDir": "./dist/",
 5 |     "sourceMap": true,
 6 |     "moduleResolution": "node",
 7 |     "emitDecoratorMetadata": true,
 8 |     "experimentalDecorators": true,
 9 |     "target": "es5",
10 |     "lib": [
11 |       "es2017",
12 |       "dom"
13 |     ]
14 |   },
15 |   "angularCompilerOptions": {
16 |     "preserveWhitespaces": false
17 |   }
18 | }


--------------------------------------------------------------------------------
/bootstrap/app.js:
--------------------------------------------------------------------------------
 1 | // JSS setup.
 2 | var jss = window.jss.default
 3 | var preset = window.jssPreset.default
 4 | jss.setup(preset())
 5 | 
 6 | // Application.
 7 | var styles = {
 8 |   bootstrap: bootstrap,
 9 |   theme: bootstrapTheme,
10 |   app: {
11 |     composes: ['$bootstrap', '$theme']
12 |   },
13 |   button: {
14 |     composes: 'btn btn-primary btn-lg'
15 |   }
16 | }
17 | 
18 | var sheet = jss.createStyleSheet(styles).attach()
19 | var classes = sheet.classes
20 | 
21 | var div = document.body.appendChild(document.createElement('div'))
22 | div.innerHTML = '\
23 |   <div class="' + classes.app + '">\
24 |     <button class="'+ classes.button +'">Button</button>\
25 |   </div>\
26 | '
27 | 


--------------------------------------------------------------------------------
/bootstrap/bootstrap-theme.js:
--------------------------------------------------------------------------------
  1 | window.bootstrapTheme = {
  2 |   "@global": {
  3 |     ".btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger": {
  4 |       "text-shadow": "0 -1px 0 rgba(0, 0, 0, .2)",
  5 |       "-webkit-box-shadow": "inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)",
  6 |       "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075)"
  7 |     },
  8 |     ".btn-default:active, .btn-primary:active, .btn-success:active, .btn-info:active, .btn-warning:active, .btn-danger:active, .btn-default.active, .btn-primary.active, .btn-success.active, .btn-info.active, .btn-warning.active, .btn-danger.active": {
  9 |       "-webkit-box-shadow": "inset 0 3px 5px rgba(0, 0, 0, .125)",
 10 |       "box-shadow": "inset 0 3px 5px rgba(0, 0, 0, .125)"
 11 |     },
 12 |     ".btn-default.disabled, .btn-primary.disabled, .btn-success.disabled, .btn-info.disabled, .btn-warning.disabled, .btn-danger.disabled, .btn-default[disabled], .btn-primary[disabled], .btn-success[disabled], .btn-info[disabled], .btn-warning[disabled], .btn-danger[disabled], fieldset[disabled] .btn-default, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-success, fieldset[disabled] .btn-info, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-danger": {
 13 |       "-webkit-box-shadow": "none",
 14 |       "box-shadow": "none"
 15 |     },
 16 |     ".btn-default .badge, .btn-primary .badge, .btn-success .badge, .btn-info .badge, .btn-warning .badge, .btn-danger .badge": {
 17 |       "text-shadow": "none"
 18 |     },
 19 |     ".btn:active, .btn.active": {
 20 |       "background-image": "none"
 21 |     },
 22 |     ".btn-default": {
 23 |       "text-shadow": "0 1px 0 #fff",
 24 |       "background-image": "linear-gradient(to bottom, #fff 0%, #e0e0e0 100%)",
 25 |       "filter": "progid:DXImageTransform.Microsoft.gradient(enabled = false)",
 26 |       "background-repeat": "repeat-x",
 27 |       "border-color": "#ccc"
 28 |     },
 29 |     ".btn-default:hover, .btn-default:focus": {
 30 |       "background-color": "#e0e0e0",
 31 |       "background-position": "0 -15px"
 32 |     },
 33 |     ".btn-default:active, .btn-default.active": {
 34 |       "background-color": "#e0e0e0",
 35 |       "border-color": "#dbdbdb"
 36 |     },
 37 |     ".btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active": {
 38 |       "background-color": "#e0e0e0",
 39 |       "background-image": "none"
 40 |     },
 41 |     ".btn-primary": {
 42 |       "background-image": "linear-gradient(to bottom, #337ab7 0%, #265a88 100%)",
 43 |       "filter": "progid:DXImageTransform.Microsoft.gradient(enabled = false)",
 44 |       "background-repeat": "repeat-x",
 45 |       "border-color": "#245580"
 46 |     },
 47 |     ".btn-primary:hover, .btn-primary:focus": {
 48 |       "background-color": "#265a88",
 49 |       "background-position": "0 -15px"
 50 |     },
 51 |     ".btn-primary:active, .btn-primary.active": {
 52 |       "background-color": "#265a88",
 53 |       "border-color": "#245580"
 54 |     },
 55 |     ".btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active": {
 56 |       "background-color": "#265a88",
 57 |       "background-image": "none"
 58 |     },
 59 |     ".btn-success": {
 60 |       "background-image": "linear-gradient(to bottom, #5cb85c 0%, #419641 100%)",
 61 |       "filter": "progid:DXImageTransform.Microsoft.gradient(enabled = false)",
 62 |       "background-repeat": "repeat-x",
 63 |       "border-color": "#3e8f3e"
 64 |     },
 65 |     ".btn-success:hover, .btn-success:focus": {
 66 |       "background-color": "#419641",
 67 |       "background-position": "0 -15px"
 68 |     },
 69 |     ".btn-success:active, .btn-success.active": {
 70 |       "background-color": "#419641",
 71 |       "border-color": "#3e8f3e"
 72 |     },
 73 |     ".btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active": {
 74 |       "background-color": "#419641",
 75 |       "background-image": "none"
 76 |     },
 77 |     ".btn-info": {
 78 |       "background-image": "linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%)",
 79 |       "filter": "progid:DXImageTransform.Microsoft.gradient(enabled = false)",
 80 |       "background-repeat": "repeat-x",
 81 |       "border-color": "#28a4c9"
 82 |     },
 83 |     ".btn-info:hover, .btn-info:focus": {
 84 |       "background-color": "#2aabd2",
 85 |       "background-position": "0 -15px"
 86 |     },
 87 |     ".btn-info:active, .btn-info.active": {
 88 |       "background-color": "#2aabd2",
 89 |       "border-color": "#28a4c9"
 90 |     },
 91 |     ".btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active": {
 92 |       "background-color": "#2aabd2",
 93 |       "background-image": "none"
 94 |     },
 95 |     ".btn-warning": {
 96 |       "background-image": "linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%)",
 97 |       "filter": "progid:DXImageTransform.Microsoft.gradient(enabled = false)",
 98 |       "background-repeat": "repeat-x",
 99 |       "border-color": "#e38d13"
100 |     },
101 |     ".btn-warning:hover, .btn-warning:focus": {
102 |       "background-color": "#eb9316",
103 |       "background-position": "0 -15px"
104 |     },
105 |     ".btn-warning:active, .btn-warning.active": {
106 |       "background-color": "#eb9316",
107 |       "border-color": "#e38d13"
108 |     },
109 |     ".btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active": {
110 |       "background-color": "#eb9316",
111 |       "background-image": "none"
112 |     },
113 |     ".btn-danger": {
114 |       "background-image": "linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%)",
115 |       "filter": "progid:DXImageTransform.Microsoft.gradient(enabled = false)",
116 |       "background-repeat": "repeat-x",
117 |       "border-color": "#b92c28"
118 |     },
119 |     ".btn-danger:hover, .btn-danger:focus": {
120 |       "background-color": "#c12e2a",
121 |       "background-position": "0 -15px"
122 |     },
123 |     ".btn-danger:active, .btn-danger.active": {
124 |       "background-color": "#c12e2a",
125 |       "border-color": "#b92c28"
126 |     },
127 |     ".btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active": {
128 |       "background-color": "#c12e2a",
129 |       "background-image": "none"
130 |     },
131 |     ".thumbnail, .img-thumbnail": {
132 |       "-webkit-box-shadow": "0 1px 2px rgba(0, 0, 0, .075)",
133 |       "box-shadow": "0 1px 2px rgba(0, 0, 0, .075)"
134 |     },
135 |     ".dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus": {
136 |       "background-color": "#e8e8e8",
137 |       "background-image": "linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%)",
138 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0)",
139 |       "background-repeat": "repeat-x"
140 |     },
141 |     ".dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus": {
142 |       "background-color": "#2e6da4",
143 |       "background-image": "linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%)",
144 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0)",
145 |       "background-repeat": "repeat-x"
146 |     },
147 |     ".navbar-default": {
148 |       "background-image": "linear-gradient(to bottom, #fff 0%, #f8f8f8 100%)",
149 |       "filter": "progid:DXImageTransform.Microsoft.gradient(enabled = false)",
150 |       "background-repeat": "repeat-x",
151 |       "border-radius": "4px",
152 |       "-webkit-box-shadow": "inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075)",
153 |       "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075)"
154 |     },
155 |     ".navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a": {
156 |       "background-image": "linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%)",
157 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0)",
158 |       "background-repeat": "repeat-x",
159 |       "-webkit-box-shadow": "inset 0 3px 9px rgba(0, 0, 0, .075)",
160 |       "box-shadow": "inset 0 3px 9px rgba(0, 0, 0, .075)"
161 |     },
162 |     ".navbar-brand, .navbar-nav > li > a": {
163 |       "text-shadow": "0 1px 0 rgba(255, 255, 255, .25)"
164 |     },
165 |     ".navbar-inverse": {
166 |       "background-image": "linear-gradient(to bottom, #3c3c3c 0%, #222 100%)",
167 |       "filter": "progid:DXImageTransform.Microsoft.gradient(enabled = false)",
168 |       "background-repeat": "repeat-x",
169 |       "border-radius": "4px"
170 |     },
171 |     ".navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .active > a": {
172 |       "background-image": "linear-gradient(to bottom, #080808 0%, #0f0f0f 100%)",
173 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0)",
174 |       "background-repeat": "repeat-x",
175 |       "-webkit-box-shadow": "inset 0 3px 9px rgba(0, 0, 0, .25)",
176 |       "box-shadow": "inset 0 3px 9px rgba(0, 0, 0, .25)"
177 |     },
178 |     ".navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a": {
179 |       "text-shadow": "0 -1px 0 rgba(0, 0, 0, .25)"
180 |     },
181 |     ".navbar-static-top, .navbar-fixed-top, .navbar-fixed-bottom": {
182 |       "border-radius": "0"
183 |     },
184 |     "@media (max-width: 767px)": {
185 |       ".navbar .navbar-nav .open .dropdown-menu > .active > a, .navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar .navbar-nav .open .dropdown-menu > .active > a:focus": {
186 |         "color": "#fff",
187 |         "background-image": "linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%)",
188 |         "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0)",
189 |         "background-repeat": "repeat-x"
190 |       }
191 |     },
192 |     ".alert": {
193 |       "text-shadow": "0 1px 0 rgba(255, 255, 255, .2)",
194 |       "-webkit-box-shadow": "inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05)",
195 |       "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05)"
196 |     },
197 |     ".alert-success": {
198 |       "background-image": "linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%)",
199 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0)",
200 |       "background-repeat": "repeat-x",
201 |       "border-color": "#b2dba1"
202 |     },
203 |     ".alert-info": {
204 |       "background-image": "linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%)",
205 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0)",
206 |       "background-repeat": "repeat-x",
207 |       "border-color": "#9acfea"
208 |     },
209 |     ".alert-warning": {
210 |       "background-image": "linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%)",
211 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0)",
212 |       "background-repeat": "repeat-x",
213 |       "border-color": "#f5e79e"
214 |     },
215 |     ".alert-danger": {
216 |       "background-image": "linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%)",
217 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0)",
218 |       "background-repeat": "repeat-x",
219 |       "border-color": "#dca7a7"
220 |     },
221 |     ".progress": {
222 |       "background-image": "linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%)",
223 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0)",
224 |       "background-repeat": "repeat-x"
225 |     },
226 |     ".progress-bar": {
227 |       "background-image": "linear-gradient(to bottom, #337ab7 0%, #286090 100%)",
228 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0)",
229 |       "background-repeat": "repeat-x"
230 |     },
231 |     ".progress-bar-success": {
232 |       "background-image": "linear-gradient(to bottom, #5cb85c 0%, #449d44 100%)",
233 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0)",
234 |       "background-repeat": "repeat-x"
235 |     },
236 |     ".progress-bar-info": {
237 |       "background-image": "linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%)",
238 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0)",
239 |       "background-repeat": "repeat-x"
240 |     },
241 |     ".progress-bar-warning": {
242 |       "background-image": "linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%)",
243 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0)",
244 |       "background-repeat": "repeat-x"
245 |     },
246 |     ".progress-bar-danger": {
247 |       "background-image": "linear-gradient(to bottom, #d9534f 0%, #c9302c 100%)",
248 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0)",
249 |       "background-repeat": "repeat-x"
250 |     },
251 |     ".progress-bar-striped": {
252 |       "background-image": "linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)"
253 |     },
254 |     ".list-group": {
255 |       "border-radius": "4px",
256 |       "-webkit-box-shadow": "0 1px 2px rgba(0, 0, 0, .075)",
257 |       "box-shadow": "0 1px 2px rgba(0, 0, 0, .075)"
258 |     },
259 |     ".list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus": {
260 |       "text-shadow": "0 -1px 0 #286090",
261 |       "background-image": "linear-gradient(to bottom, #337ab7 0%, #2b669a 100%)",
262 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0)",
263 |       "background-repeat": "repeat-x",
264 |       "border-color": "#2b669a"
265 |     },
266 |     ".list-group-item.active .badge, .list-group-item.active:hover .badge, .list-group-item.active:focus .badge": {
267 |       "text-shadow": "none"
268 |     },
269 |     ".panel": {
270 |       "-webkit-box-shadow": "0 1px 2px rgba(0, 0, 0, .05)",
271 |       "box-shadow": "0 1px 2px rgba(0, 0, 0, .05)"
272 |     },
273 |     ".panel-default > .panel-heading": {
274 |       "background-image": "linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%)",
275 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0)",
276 |       "background-repeat": "repeat-x"
277 |     },
278 |     ".panel-primary > .panel-heading": {
279 |       "background-image": "linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%)",
280 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0)",
281 |       "background-repeat": "repeat-x"
282 |     },
283 |     ".panel-success > .panel-heading": {
284 |       "background-image": "linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%)",
285 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0)",
286 |       "background-repeat": "repeat-x"
287 |     },
288 |     ".panel-info > .panel-heading": {
289 |       "background-image": "linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%)",
290 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0)",
291 |       "background-repeat": "repeat-x"
292 |     },
293 |     ".panel-warning > .panel-heading": {
294 |       "background-image": "linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%)",
295 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0)",
296 |       "background-repeat": "repeat-x"
297 |     },
298 |     ".panel-danger > .panel-heading": {
299 |       "background-image": "linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%)",
300 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0)",
301 |       "background-repeat": "repeat-x"
302 |     },
303 |     ".well": {
304 |       "background-image": "linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%)",
305 |       "filter": "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0)",
306 |       "background-repeat": "repeat-x",
307 |       "border-color": "#dcdcdc",
308 |       "-webkit-box-shadow": "inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1)",
309 |       "box-shadow": "inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1)"
310 |     }
311 |   }
312 | };
313 | 


--------------------------------------------------------------------------------
/bootstrap/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Bootstrap jss example</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |   </head>
 8 |   <body>
 9 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/bootstrap" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 | 
11 |     Bootstrap style definintions has been compiled using JSS <a href="https://github.com/cssinjs/cli" target="_blank">cli</a>.<br /><br />
12 | 
13 |     <script src="../jss.js"></script>
14 |     <script src="../jss-preset-default.js"></script>
15 |     <script src="./bootstrap.js"></script>
16 |     <script src="./bootstrap-theme.js"></script>
17 |     <script src="./app.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/calendar/components/calendar/index.js:
--------------------------------------------------------------------------------
 1 | import debounce from 'lodash/debounce'
 2 | import jss from '../jss'
 3 | import * as utils from '../utils'
 4 | import Canvas from '../canvas'
 5 | import Timeline from '../timeline'
 6 | import EventsManager from '../events-manager'
 7 | import style from './style'
 8 | 
 9 | const sheet = jss.createStyleSheet(style)
10 | 
11 | export default class Calendar {
12 |   /**
13 |    * Creates a new calendar view.
14 |    */
15 |   constructor(options) {
16 |     this.timeline = new Timeline(options.timeline)
17 |     this.canvas = new Canvas()
18 |     this.manager = new EventsManager(this.canvas)
19 |     this.element = null
20 |   }
21 | 
22 |   /**
23 |    * Renders layout.
24 |    *
25 |    * @return {Calendar}
26 |    */
27 |   create() {
28 |     sheet.attach()
29 |     this.element = utils.createElement('div', {
30 |       class: sheet.classes.calendar
31 |     })
32 |     this.timeline.create()
33 |     this.canvas.create()
34 |     this.element.appendChild(this.timeline.element)
35 |     this.element.appendChild(this.canvas.element)
36 |     window.addEventListener('resize', debounce(::this.onResizeWindow, 50))
37 |     return this
38 |   }
39 | 
40 |   /**
41 |    * Render main container.
42 |    *
43 |    * @param {Array} events
44 |    * @return {Calendar}
45 |    */
46 |   renderDay(events) {
47 |     this.manager
48 |       .destroy()
49 |       .set(events)
50 |       .render()
51 |     return this
52 |   }
53 | 
54 |   onResizeWindow() {
55 |     this.manager.destroy().render()
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/calendar/components/calendar/style.js:
--------------------------------------------------------------------------------
 1 | import conf from '../conf'
 2 | 
 3 | export default {
 4 |   calendar: {
 5 |     display: 'flex',
 6 |     fontSize: conf.fontSize,
 7 |     color: '#686868'
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/calendar/components/canvas/index.js:
--------------------------------------------------------------------------------
 1 | import jss from '../jss'
 2 | import * as utils from '../utils'
 3 | import * as style from './style'
 4 | 
 5 | const sheet = jss.createStyleSheet(style.rules)
 6 | 
 7 | export default class Canvas {
 8 |   /**
 9 |    * Canvas is a container view events can be added to.
10 |    */
11 |   constructor() {
12 |     this.element = null
13 |     this.contentElement = null
14 |   }
15 | 
16 |   /**
17 |    * Create canvas elements.
18 |    *
19 |    * @return {Canvas}
20 |    */
21 |   create() {
22 |     sheet.attach()
23 |     this.element = utils.createElement('div', {
24 |       class: sheet.classes.canvas
25 |     })
26 |     this.contentElement = utils.createElement('div', {
27 |       class: sheet.classes.content
28 |     })
29 |     this.element.appendChild(this.contentElement)
30 |     return this
31 |   }
32 | 
33 |   /**
34 |    * Add event.
35 |    *
36 |    * @param {Event} event
37 |    * @return {Canvas}
38 |    */
39 |   add(event) {
40 |     this.contentElement.appendChild(event.element)
41 |     return this
42 |   }
43 | 
44 |   /**
45 |    * Get content width.
46 |    *
47 |    * @return {Number}
48 |    */
49 |   getContentWidth() {
50 |     return this.contentElement.offsetWidth
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/calendar/components/canvas/style.js:
--------------------------------------------------------------------------------
 1 | import conf from '../conf'
 2 | 
 3 | export const rules = {
 4 |   canvas: {
 5 |     flex: 1,
 6 |     position: 'relative',
 7 |     height: conf.height,
 8 |     background: '#ececec',
 9 |     borderLeft: '1px solid #d5d5d5',
10 |     boxSizing: 'border-box'
11 |   },
12 |   content: {
13 |     position: 'absolute',
14 |     left: 10,
15 |     right: 10,
16 |     top: 0,
17 |     bottom: 0
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/calendar/components/conf/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Configuration shared between all components.
 3 |  *
 4 |  * @type {Object}
 5 |  */
 6 | export default {
 7 |   fontSize: 16,
 8 |   height: 720,
 9 |   timeline: {
10 |     start: 540,
11 |     end: 1290
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/calendar/components/event/content-tpl.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Returns compiled html for event content.
 3 |  *
 4 |  * @param {Object} data
 5 |  * @return {String}
 6 |  */
 7 | export function compile(data) {
 8 |   const {classes} = data
 9 |   return `
10 |     <div class="${classes.content}">
11 |       <h3 class="${classes.title}">${data.title}</h3>
12 |       <div class="${classes.location}">${data.location}</div>
13 |     </div>
14 |   `
15 | }
16 | 


--------------------------------------------------------------------------------
/calendar/components/event/index.js:
--------------------------------------------------------------------------------
 1 | import jss from '../jss'
 2 | import * as utils from '../utils'
 3 | import * as contentTpl from './content-tpl'
 4 | import style from './style'
 5 | 
 6 | const sheet = jss.createStyleSheet(style)
 7 | 
 8 | let uid = 0
 9 | 
10 | export default class Event {
11 |   /**
12 |    * Event view constructor.
13 |    * @param {Object} options
14 |    */
15 |   constructor(options) {
16 |     this.id = ++uid
17 |     this.start = options.start
18 |     this.end = options.end
19 |     this.title = options.title || 'Sample Item'
20 |     this.location = options.location || 'Sample Location'
21 |     this.element = null
22 |     this.style = null
23 |   }
24 | 
25 |   /**
26 |    * Create elements.
27 |    *
28 |    * @return {Event}
29 |    */
30 |   create() {
31 |     sheet.attach()
32 |     this.element = utils.createElement('div', {
33 |       class: sheet.classes.event
34 |     })
35 |     this.element.innerHTML = contentTpl.compile({
36 |       classes: sheet.classes,
37 |       title: this.title,
38 |       location: this.location
39 |     })
40 |     for (const key in this.style) {
41 |       this.element.style[key] = this.style[key]
42 |     }
43 |     return this
44 |   }
45 | 
46 |   /**
47 |    * Destroy event.
48 |    *
49 |    * @return {Event}
50 |    */
51 |   destroy() {
52 |     this.element.parentNode.removeChild(this.element)
53 |     return this
54 |   }
55 | 
56 |   /**
57 |    * Set inline style.
58 |    *
59 |    * @return {Event}
60 |    */
61 |   setStyle(style) {
62 |     this.style = style
63 |     return this
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/calendar/components/event/style.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   event: {
 3 |     position: 'absolute',
 4 |     background: '#fff',
 5 |     borderLeft: '4px solid #4b6ea8',
 6 |     boxSizing: 'border-box'
 7 |   },
 8 |   content: {
 9 |     padding: 7,
10 |     overflow: 'hidden',
11 |     height: '100%',
12 |     border: '1px solid #d5d5d5',
13 |     borderLeft: 'none',
14 |     boxSizing: 'border-box',
15 |     cursor: 'pointer',
16 |     '&:hover': {
17 |       borderColor: '#4b6ea8'
18 |     }
19 |   },
20 |   title: {
21 |     color: '#4b6ea8',
22 |     margin: 0,
23 |     fontSize: '1em'
24 |   },
25 |   location: {
26 |     fontSize: '0.8em'
27 |   },
28 |   '@media (max-width: 600px)': {
29 |     event: {
30 |       borderColor: 'green'
31 |     },
32 |     content: {
33 |       '&:hover': {
34 |         borderColor: 'green'
35 |       }
36 |     },
37 |     title: {
38 |       color: 'green'
39 |     },
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/calendar/components/events-manager/distribute.js:
--------------------------------------------------------------------------------
  1 | import * as utils from '../utils'
  2 | 
  3 | /**
  4 |  * Distribute events within canvas.
  5 |  *
  6 |  * - No events may visually overlap.
  7 |  * - If two events collide in time, they MUST have the same width.
  8 |  *   This is an invariant. Call this width W.
  9 |  * - W should be the maximum value possible without breaking the previous invariant.
 10 |  *
 11 |  * @param {Array} events
 12 |  * @param {Canvas} canvas
 13 |  * @return {Array} events
 14 |  */
 15 | export default function distribute (events, canvas) {
 16 |   function setStyle(column, nr, columns) {
 17 |     const width = canvas.getContentWidth() / columns.length
 18 |     column.forEach(event => {
 19 |       const top = utils.minToY(event.start)
 20 |       const height = utils.minToY(event.end) - top
 21 |       event.setStyle({
 22 |         width: width + 'px',
 23 |         height: height + 'px',
 24 |         top: top + 'px',
 25 |         left: nr * width + 'px'
 26 |       })
 27 |     })
 28 |   }
 29 | 
 30 |   createGroups(events).forEach(function (group) {
 31 |     createColumns(group).forEach(setStyle)
 32 |   })
 33 | 
 34 |   return events
 35 | }
 36 | 
 37 | /**
 38 |  * Create groups of events which do not overlap. Events within this groups
 39 |  * will be rendered in columns if they overlap.
 40 |  *
 41 |  * @param {Array} events
 42 |  * @return {Array}
 43 |  */
 44 | function createGroups(events) {
 45 |   const groups = []
 46 |   const eventGroupMap = {}
 47 | 
 48 |   events.forEach(event => {
 49 |     let group = eventGroupMap[event.id]
 50 |     if (!group) {
 51 |       group = eventGroupMap[event.id] = [event]
 52 |       groups.push(group)
 53 |     }
 54 | 
 55 |     events.forEach(_event => {
 56 |       if (_event === event) return
 57 |       if (collide(event, _event)) {
 58 |         if (!eventGroupMap[_event.id]) {
 59 |           eventGroupMap[_event.id] = group
 60 |           group.push(_event)
 61 |         }
 62 |       }
 63 |     })
 64 |   })
 65 | 
 66 |   return groups
 67 | }
 68 | 
 69 | /**
 70 |  * Create columns within a group. To avoid visual overlap.
 71 |  *
 72 |  * @param {Array} events
 73 |  * @return {Array}
 74 |  */
 75 | function createColumns(group) {
 76 |   const columns = []
 77 |   const eventStackMap = {}
 78 | 
 79 |   group.forEach(event => {
 80 |     let column = eventStackMap[event.id]
 81 |     if (!column) {
 82 |       column = eventStackMap[event.id] = [event]
 83 |       columns.push(column)
 84 |     }
 85 | 
 86 |     group.forEach(_event => {
 87 |       if (_event === event) return
 88 |       if (!collide(event, _event)) {
 89 |         if (!eventStackMap[_event.id]) {
 90 |           eventStackMap[_event.id] = column
 91 |           column.push(_event)
 92 |         }
 93 |       }
 94 |     })
 95 |   })
 96 | 
 97 |   return columns
 98 | }
 99 | 
100 | /**
101 |  * Check if 2 events collide in time.
102 |  *
103 |  * @param {Event} event1
104 |  * @param {Event} event2
105 |  * @return {Boolean}
106 |  */
107 | function collide(event1, event2) {
108 |   const startInside = event1.start >= event2.start && event1.start <= event2.end
109 |   const endInside = event1.end <= event2.end && event1.end > event2.start
110 |   return startInside || endInside
111 | }
112 | 


--------------------------------------------------------------------------------
/calendar/components/events-manager/index.js:
--------------------------------------------------------------------------------
 1 | import Event from '../event'
 2 | import distribute from './distribute'
 3 | 
 4 | /**
 5 |  * Handles events creation and distribution.
 6 |  */
 7 | export default class EventsManager {
 8 |   constructor(canvas) {
 9 |     this.canvas = canvas
10 |     this.events = []
11 |   }
12 | 
13 |   /**
14 |    * Destroy previously rendered events.
15 |    *
16 |    * @return {EventsManager}
17 |    */
18 |   destroy() {
19 |     this.events.forEach(event => event.destroy())
20 |     return this
21 |   }
22 | 
23 |   /**
24 |    * Render events at the right position and the right size.
25 |    *
26 |    * @param {Array} events
27 |    * @return {EventsManager}
28 |    */
29 |   set(events) {
30 |     this.events = events.map(options => new Event(options))
31 |     return this
32 |   }
33 | 
34 |   /**
35 |    * Render events at the right position and the right size.
36 |    *
37 |    * @return {EventsManager}
38 |    */
39 |   render() {
40 |     distribute(this.events, this.canvas).forEach(event => {
41 |       event.create()
42 |       this.canvas.add(event)
43 |     })
44 |     return this
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/calendar/components/jss.js:
--------------------------------------------------------------------------------
 1 | // Setup jss plugins.
 2 | import {create} from 'jss'
 3 | import extend from 'jss-extend'
 4 | import nested from 'jss-nested'
 5 | import camelCase from 'jss-camel-case'
 6 | import defaultUnit from 'jss-default-unit'
 7 | import vendorPrefixer from 'jss-vendor-prefixer'
 8 | 
 9 | const jss = create()
10 | 
11 | jss.use(extend())
12 | jss.use(nested())
13 | jss.use(camelCase())
14 | jss.use(defaultUnit())
15 | jss.use(vendorPrefixer())
16 | 
17 | export default jss
18 | 


--------------------------------------------------------------------------------
/calendar/components/timeline/index.js:
--------------------------------------------------------------------------------
 1 | import jss from '../jss'
 2 | import * as utils from '../utils'
 3 | import * as markerTpl from './marker-tpl'
 4 | import {rules} from './style'
 5 | 
 6 | const sheet = jss.createStyleSheet(rules)
 7 | 
 8 | export default class Timeline {
 9 |   /**
10 |    * Creates a timeline view.
11 |    */
12 |   constructor(options) {
13 |     this.element = null
14 |     this.start = options.start
15 |     this.end = options.end
16 |   }
17 | 
18 |   /**
19 |    * Creates timeline elements.
20 |    *
21 |    * @return {Timeline}
22 |    */
23 |   create() {
24 |     sheet.attach()
25 |     this.element = utils.createElement('div', {
26 |       class: sheet.classes.timeline
27 |     })
28 | 
29 |     const fragment = document.createDocumentFragment()
30 |     for (let min = this.start; min < this.end; min += 30) {
31 |       fragment.appendChild(this.createMarker({
32 |         suffix: getSuffix(min),
33 |         time: formatTime(min),
34 |         min: min
35 |       }))
36 |     }
37 |     this.element.appendChild(fragment)
38 |     return this
39 |   }
40 | 
41 |   /**
42 |    * Create time marker element.
43 |    *
44 |    * @param {Obejct} options
45 |    * @return {Element}
46 |    */
47 |   createMarker(options) {
48 |     const element = utils.createElement('div', {
49 |       class: sheet.classes.timeContainer
50 |     })
51 |     element.style.top = utils.minToY(options.min - this.start) + 'px'
52 |     element.innerHTML = markerTpl.compile({
53 |       time: options.time,
54 |       classes: sheet.classes,
55 |       suffix: options.suffix
56 |     })
57 |     return element
58 |   }
59 | }
60 | 
61 | /**
62 |  * Get PM/AM suffix.
63 |  *
64 |  * @param {Number} min
65 |  * @return {String}
66 |  */
67 | function getSuffix(min) {
68 |   const h = min / 60
69 |   if (!isInt(h)) return false
70 |   if (h < 12) return 'AM'
71 |   return 'PM'
72 | }
73 | 
74 | /**
75 |  * Returns true if integer.
76 |  *
77 |  * @param {Number} n
78 |  * @return {Boolean}
79 |  */
80 | function isInt(n) {
81 |   return n % 1 === 0
82 | }
83 | 
84 | /**
85 |  * Format time according the layout.
86 |  *
87 |  * @param {Number} min
88 |  * @return {String}
89 |  */
90 | function formatTime(min) {
91 |   let h = min / 60
92 |   if (h > 12.5) h -= 12
93 |   return isInt(h) ? h + ':00' : Math.floor(h) + ':30'
94 | }
95 | 


--------------------------------------------------------------------------------
/calendar/components/timeline/marker-tpl.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Returns compiled template. Some template engine should be used in production
 3 |  * use case.
 4 |  *
 5 |  * @param {Object} data
 6 |  * @return {String}
 7 |  */
 8 | export function compile(data) {
 9 |   const {classes} = data
10 |   const timeClass = classes[data.suffix ? 'timeWithSuffix' : 'time']
11 |   let html = `<span class="${timeClass}">${data.time}</span>`
12 |   if (data.suffix) {
13 |     html += `<span class="${classes.time}">${data.suffix}</span>`
14 |   }
15 |   return html
16 | }
17 | 


--------------------------------------------------------------------------------
/calendar/components/timeline/style.js:
--------------------------------------------------------------------------------
 1 | import conf from '../conf'
 2 | 
 3 | export const width = 75
 4 | 
 5 | export const rules = {
 6 |   timeline: {
 7 |     position: 'relative',
 8 |     flexShrink: 0,
 9 |     width,
10 |     height: conf.height,
11 |     padding: '0 7px 0 0',
12 |     boxSizing: 'border-box',
13 |     // Middle of the number should be the start.
14 |     marginTop: -conf.fontSize / 2
15 |   },
16 |   timeContainer: {
17 |     position: 'absolute',
18 |     width: '100%',
19 |     paddingRight: 10,
20 |     textAlign: 'right',
21 |     boxSizing: 'border-box',
22 |     cursor: 'pointer',
23 |     '&:hover span': {
24 |       color: '#4b6ea8'
25 |     }
26 |   },
27 |   time: {
28 |     fontSize: 10,
29 |     color: '#999'
30 |   },
31 |   timeWithSuffix: {
32 |     fontSize: 13,
33 |     fontWeight: 'bold',
34 |     marginRight: 5
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/calendar/components/utils/index.js:
--------------------------------------------------------------------------------
 1 | import conf from '../conf'
 2 | 
 3 | /**
 4 |  * Create DOM node, set attributes.
 5 |  *
 6 |  * @param {String} name
 7 |  * @param {Object} [attrs]
 8 |  * @return Element
 9 |  */
10 | export function createElement(name, attrs) {
11 |   const element = document.createElement(name)
12 | 
13 |   for (const name in attrs) {
14 |     element.setAttribute(name, attrs[name])
15 |   }
16 | 
17 |   return element
18 | }
19 | 
20 | const MIN_IN_DAY = 12 * 60
21 | 
22 | /**
23 |  * Converts minutes to Y offset in px.
24 |  *
25 |  * @param {Number} min
26 |  * @return {Number}
27 |  */
28 | export function minToY(min) {
29 |   return conf.height * min / MIN_IN_DAY
30 | }
31 | 


--------------------------------------------------------------------------------
/calendar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Calendar</title>
 5 |     <meta charset="utf-8" />
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |   </head>
 8 |   <body>
 9 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/calendar" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 | 
11 |     This example demonstrates:<br />
12 |     - conflict free encapsulation of css within components<br />
13 |     - usage of constants for calculating styles<br />
14 |     - usage of vendor prefixer, see flex<br />
15 |     - usage of @media conditional (resize window to width < 600px)<br />
16 |     - usage of nested rules with pseudo selectors for e.g. ':hover'<br /><br />
17 | 
18 |     <script src="./dist/index.js"></script>
19 |     <script>
20 |       (function () {
21 |         var calendar = window.calendar.createCalendar()
22 |         document.body.appendChild(calendar.element)
23 |         calendar.renderDay([
24 |           {
25 |             start: 30,
26 |             end: 150
27 |           },
28 |           {
29 |             start: 540,
30 |             end: 600
31 |           },
32 |           {
33 |             start: 560,
34 |             end: 620
35 |           },
36 |           {
37 |             start: 610,
38 |             end: 670
39 |           }
40 |         ])
41 |       }())
42 |     </script>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/calendar/index.js:
--------------------------------------------------------------------------------
1 | import conf from './components/conf'
2 | import Calendar from './components/calendar'
3 | 
4 | export function createCalendar() {
5 |   return new Calendar(conf).create()
6 | }
7 | 


--------------------------------------------------------------------------------
/calendar/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var webpack = require('webpack')
 4 | 
 5 | module.exports = {
 6 |   output: {
 7 |     library: 'calendar',
 8 |     libraryTarget: 'umd'
 9 |   },
10 |   module: {
11 |     loaders: [
12 |       {
13 |         loader: 'babel-loader',
14 |         test: /\.js$/,
15 |         exclude: /node_modules/
16 |       }
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/composition/app.js:
--------------------------------------------------------------------------------
 1 | var sheetA = jss.default.createStyleSheet(window.componentA).attach()
 2 | var sheetB = jss.default.createStyleSheet(window.componentB).attach()
 3 | 
 4 | var tpl = document.getElementById('template').innerHTML
 5 | var div = document.createElement('div')
 6 | div.innerHTML = tpl
 7 |   .replace('{button-a}', sheetA.classes.button)
 8 |   .replace('{button-b}', sheetB.classes.button)
 9 | document.body.appendChild(div)
10 | 


--------------------------------------------------------------------------------
/composition/component-a-style.js:
--------------------------------------------------------------------------------
1 | window.componentA = {
2 |   button: {
3 |     background: 'red'
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/composition/component-b-style.js:
--------------------------------------------------------------------------------
1 | window.componentB = {
2 |   button: {
3 |     color: 'green'
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/composition/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Simple jss example</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |   </head>
 8 |   <body>
 9 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/composition" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 | 
11 |     <script id="template" type="text">
12 |       <component-a>
13 |         <button class="{button-a}">Button A</button>
14 |         <component-b>
15 |           <button class="{button-b}">Button B</button>
16 |         </component-b>
17 |       </component-a>
18 |     </script>
19 | 
20 |     <script src="../jss.js"></script>
21 |     <script src="./component-a-style.js"></script>
22 |     <script src="./component-b-style.js"></script>
23 |     <script src="./app.js"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/dynamic-props/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   box: {
 4 |     float: 'left',
 5 |     width: '50px',
 6 |     height: '50px',
 7 |     background: 'red',
 8 |     margin: '10px'
 9 |   }
10 | }
11 | 
12 | // Application logic.
13 | var sheet = jss.default.createStyleSheet(styles, {
14 |   link: true
15 | }).attach()
16 | 
17 | var section = document.querySelectorAll('section')[0]
18 | for (var i = 0; i < 100; i++) {
19 |   var box = document.createElement('div')
20 |   box.className = sheet.classes.box
21 |   section.appendChild(box)
22 | }
23 | 
24 | var toArray = Array.prototype.slice
25 | var buttons = toArray.call(document.querySelectorAll('button'))
26 | buttons.forEach(function (button) {
27 |   button.addEventListener('click', setColor)
28 | })
29 | 
30 | function setColor(e) {
31 |   sheet.getRule('box').prop('background', e.target.innerHTML)
32 | }
33 | 


--------------------------------------------------------------------------------
/dynamic-props/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Dynamic properties in jss</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |   </head>
 8 |   <body>
 9 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/dynamic-props" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 |     <button>red</button>
11 |     <button>green</button>
12 |     <button>blue</button>
13 |     <section></section>
14 |     <script src="../jss.js"></script>
15 |     <script src="./app.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/example.css:
--------------------------------------------------------------------------------
 1 | a {
 2 |   color: #333;
 3 | }
 4 | 
 5 | /*!
 6 |  * "Fork me on GitHub" CSS ribbon v0.2.0 | MIT License
 7 |  * https://github.com/simonwhitaker/github-fork-ribbon-css
 8 | */
 9 | 
10 | .github-fork-ribbon {
11 |   width: 12.1em;
12 |   height: 12.1em;
13 |   position: absolute;
14 |   overflow: hidden;
15 |   top: 0;
16 |   right: 0;
17 |   z-index: 9999;
18 |   pointer-events: none;
19 |   font-size: 13px;
20 |   text-decoration: none;
21 |   text-indent: -999999px;
22 | }
23 | .github-fork-ribbon:before, .github-fork-ribbon:after {
24 |   /* The right and left classes determine the side we attach our banner to */
25 |   position: absolute;
26 |   display: block;
27 |   width: 15.38em;
28 |   height: 1.54em;
29 | 
30 |   top: 3.23em;
31 |   right: -3.23em;
32 | 
33 |   -webkit-box-sizing: content-box;
34 |   -moz-box-sizing: content-box;
35 |   box-sizing: content-box;
36 | 
37 |   -webkit-transform: rotate(45deg);
38 |   -moz-transform: rotate(45deg);
39 |   -ms-transform: rotate(45deg);
40 |   -o-transform: rotate(45deg);
41 |   transform: rotate(45deg);
42 | }
43 | 
44 | .github-fork-ribbon:before {
45 |   content: "";
46 | 
47 |   /* Add a bit of padding to give some substance outside the "stitching" */
48 |   padding: .38em 0;
49 | 
50 |   /* Set the base colour */
51 |   background-color: #333;
52 | 
53 |   /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
54 |   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
55 |   background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
56 |   background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
57 |   background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
58 |   background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
59 |   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
60 | 
61 |   /* Add a drop shadow */
62 |   -webkit-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
63 |   -moz-box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
64 |   box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, 0.5);
65 | 
66 |   pointer-events: auto;
67 | }
68 | 
69 | .github-fork-ribbon:after {
70 |   /* Set the text from the title attribute */
71 |   content: attr(title);
72 | 
73 |   /* Set the text properties */
74 |   color: #fff;
75 |   font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
76 |   line-height: 1.54em;
77 |   text-decoration: none;
78 |   text-shadow: 0 -.08em rgba(0, 0, 0, 0.5);
79 |   text-align: center;
80 |   text-indent: 0;
81 | 
82 |   /* Set the layout properties */
83 |   padding: .15em 0;
84 |   margin: .15em 0;
85 | 
86 |   /* Add "stitching" effect */
87 |   border-width: .08em 0;
88 |   border-style: dotted;
89 |   border-color: #fff;
90 |   border-color: rgba(255, 255, 255, 0.7);
91 | }
92 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cssinjs/examples/6f187e8df4b100b9d5fc2a19de14299141ae3a4c/favicon.ico


--------------------------------------------------------------------------------
/function-values/Controls.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | export default ({onAdd, amount, classes, onChangeRenderer}) => (
 4 |   <div>
 5 |     <form style={{marginBottom: 10}}>
 6 |       <label style={{marginRight: 10}}>Render using:</label>
 7 |       <select onChange={onChangeRenderer} defaultValue="jss">
 8 |         <option value="jss">Pure JSS</option>
 9 |         <option value="react-jss">React-JSS</option>
10 |         <option value="inline">React Inline Styles</option>
11 |       </select>
12 |     </form>
13 |     <form>
14 |       <input readOnly value={`${amount} objects`} style={{marginRight: 10}}/>
15 |       <button onClick={onAdd}>Render 30 more</button>
16 |     </form>
17 |   </div>
18 | )
19 | 
20 | 


--------------------------------------------------------------------------------
/function-values/app.js:
--------------------------------------------------------------------------------
 1 | import injectSheet from 'react-jss'
 2 | import React, {Component} from 'react'
 3 | import reactJssRenderer from './reactJssRenderer'
 4 | import reactInlineRenderer from './reactInlineRenderer'
 5 | import * as jssRenderer from './jssRenderer'
 6 | import {tick} from './utils'
 7 | import Controls from './Controls'
 8 | 
 9 | let update
10 | 
11 | tick(() => {
12 |   if (update) update()
13 | })
14 | 
15 | class ReactAnimation extends Component {
16 |   constructor(props) {
17 |     super(props)
18 |     update = this.forceUpdate.bind(this)
19 |     this.Renderer = this.getRenderer(props)
20 |   }
21 | 
22 |   componentWillReceiveProps(nextProps) {
23 |     this.Renderer = this.getRenderer(nextProps)
24 |   }
25 | 
26 |   getRenderer({renderer, amount}) { 
27 |     const createRenderer = renderer === 'inline' ? reactInlineRenderer : reactJssRenderer
28 |     return createRenderer(amount)
29 |   }
30 | 
31 |   render() {
32 |     return <this.Renderer />
33 |   }
34 | }
35 | 
36 | class JssAnimation extends Component {
37 |   constructor(props) {
38 |     super(props)
39 |     update = jssRenderer.update
40 |   }
41 | 
42 |   componentWillReceiveProps({amount}) {
43 |     jssRenderer.render(amount)
44 |   }
45 | 
46 |   componentWillMount() {
47 |     update = jssRenderer.update
48 |     jssRenderer.render(this.props.amount)
49 |   }
50 | 
51 |   componentWillUnmount() {
52 |     jssRenderer.destroy()
53 |   }
54 | 
55 |   render() {
56 |     return null
57 |   }
58 | }
59 | 
60 | export default class App extends Component {
61 |   static defaultProps = {
62 |     step: 30
63 |   }
64 | 
65 |   state = {
66 |     amount: 10,
67 |     renderer: 'react-jss'
68 |   }
69 | 
70 |   onAdd = (e) => {
71 |     e.preventDefault()
72 |     this.setState({amount: this.state.amount + this.props.step})
73 |   }
74 | 
75 |   onChangeRenderer = (e) => {
76 |     this.setState({renderer: e.target.value})
77 |   }
78 | 
79 |   render() {
80 |     const {amount, renderer} = this.state
81 |     const Animation = renderer === 'jss' ? JssAnimation : ReactAnimation
82 | 
83 |     return (
84 |       <div>
85 |         <Controls
86 |           onAdd={this.onAdd}
87 |           amount={amount}
88 |           onChangeRenderer={this.onChangeRenderer}
89 |         />
90 |         <Animation renderer={renderer} amount={amount} />
91 |       </div>
92 |     )
93 |   }
94 | }
95 | 
96 | 


--------------------------------------------------------------------------------
/function-values/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Function values in jss</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |     <style>
 8 |       html, body {
 9 |         overflow: hidden;
10 |       }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/function-values" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
15 |     <script src="./dist/app.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/function-values/index.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import {render} from 'react-dom'
3 | import App from './App'
4 | 
5 | render(<App />, document.body.appendChild(document.createElement('div')))
6 | 


--------------------------------------------------------------------------------
/function-values/jssRenderer.js:
--------------------------------------------------------------------------------
 1 | import jss from 'jss'
 2 | import preset from 'jss-preset-default'
 3 | import {getRandomColor, getRandomTransform} from './utils'
 4 | import times from 'lodash/times'
 5 | 
 6 | jss.setup(preset())
 7 | 
 8 | let container
 9 | let sheet
10 | 
11 | const createStyleSheet = (styles) => {
12 |   if (sheet) sheet.detach()
13 |   sheet = jss.createStyleSheet(styles, {link: true}).attach()
14 | }
15 | 
16 | const ensureContainer = () => {
17 |   if (!container) container = document.body.appendChild(document.createElement('div'))
18 | }
19 | 
20 | export const destroy = () => {
21 |   if (sheet) sheet.detach()
22 |   if (container) container.parentNode.removeChild(container)
23 | }
24 | 
25 | export const render = (amount) => {
26 |   const styles = {}
27 | 
28 |   times(amount, (i) => {
29 |     styles['object-' + i] = {
30 |       position: 'absolute',
31 |       width: 50,
32 |       height: 50,
33 |       borderRadius: '50%',
34 |       background: getRandomColor(),
35 |       transform: getRandomTransform,
36 |       transition: 'transform 500ms'
37 |     }
38 |   })
39 | 
40 |   createStyleSheet(styles)
41 | 
42 |   ensureContainer()
43 |   container.innerHTML = times(amount, (i) => (
44 |     `<div class="${sheet.classes['object-' + i]}"></div>`
45 |   )).join('')
46 | }
47 | 
48 | export const update = () => {
49 |   if (sheet) sheet.update()
50 | }
51 | 


--------------------------------------------------------------------------------
/function-values/reactInlineRenderer.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import times from 'lodash/times'
 3 | import {getRandomColor, getRandomTransform} from './utils'
 4 | 
 5 | export default (amount) => (
 6 |   class InlineStylesAnimatedObjects extends Component {
 7 |     render() {
 8 |       return (
 9 |         <div>
10 |           {times(amount, (i) => {
11 |             const style = {
12 |               position: 'absolute',
13 |               width: 50,
14 |               height: 50,
15 |               borderRadius: '50%',
16 |               transition: 'transform 500ms',
17 |               background: getRandomColor(),
18 |               transform: getRandomTransform()
19 |             }
20 |             return <div key={i} style={style} />
21 |           })}
22 |         </div>
23 |       )
24 |     }
25 |   }
26 | )
27 | 


--------------------------------------------------------------------------------
/function-values/reactJssRenderer.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react'
 2 | import injectSheet from 'react-jss'
 3 | import {getRandomColor, getRandomTransform} from './utils'
 4 | import times from 'lodash/times'
 5 | 
 6 | export default (amount) => {
 7 |   class JssAnimatedObjects extends Component {
 8 | 
 9 |     shouldComponentUpdate = () => false
10 | 
11 |     render() {
12 |       const {classes} = this.props
13 |       return (
14 |         <div>
15 |           {times(amount, (i) => <div key={i} className={classes[`object${i}`]} />)}
16 |         </div>
17 |       )
18 |     }
19 |   }
20 | 
21 |   const styles = {}
22 | 
23 |   times(amount, (i) => {
24 |     styles[`object${i}`] = {
25 |       position: 'absolute',
26 |       width: 50,
27 |       height: 50,
28 |       borderRadius: '50%',
29 |       transition: 'transform 500ms',
30 |       background: getRandomColor(),
31 |       transform: getRandomTransform
32 |     }
33 |   })
34 | 
35 |   return injectSheet(styles)(JssAnimatedObjects)
36 | }
37 | 


--------------------------------------------------------------------------------
/function-values/utils.js:
--------------------------------------------------------------------------------
 1 | import random from 'lodash/random'
 2 | import Stats from 'stats.js'
 3 | 
 4 | export const getRandomColor = () => (
 5 |   '#' + Math.floor(Math.random() * 0x1000000).toString(16)
 6 | )
 7 | 
 8 | export const getRandomTransform = () => {
 9 |   var x = random(0, window.innerWidth)
10 |   var y = random(0, window.innerHeight)
11 |   return `translate3d(${x}px, ${y}px, 0)`
12 | }
13 | 
14 | const stats = (() => {
15 |   const stats = new Stats()
16 |   stats.showPanel(0)
17 |   stats.dom.style.top = '80px'
18 |   stats.dom.style.left = '10px'
19 |   document.body.appendChild(stats.dom)
20 |   return stats
21 | })()
22 | 
23 | export const tick = (() => {
24 |   const delay = 100
25 |   let lastTime = Date.now()
26 | 
27 |   return function tick(callback) {
28 |     const now = Date.now()
29 |     stats.begin()
30 |     if (now - lastTime > delay) {
31 |       callback()
32 |       lastTime = now
33 |     }
34 |     stats.end()
35 |     requestAnimationFrame(tick.bind(null, callback))
36 |   }
37 | })()
38 | 


--------------------------------------------------------------------------------
/function-values/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var webpack = require('webpack')
 4 | var path = require('path')
 5 | 
 6 | module.exports = {
 7 |   entry: path.join(__dirname, 'index.js'),
 8 |   output: {
 9 |     path: path.join(__dirname, './dist'),
10 |     filename: 'app.js'
11 |   },
12 |   module: {
13 |     loaders: [
14 |       {
15 |         loader: 'babel-loader',
16 |         test: /\.js$/,
17 |         exclude: /node_modules/
18 |       }
19 |     ]
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>JSS Examples</title>
  6 | </head>
  7 | <body>
  8 |   <img src="http://avatars1.githubusercontent.com/u/9503099?v=3&s=100" width="100" height="100" />
  9 |   <h1>JSS Examples</h1>
 10 | 
 11 |   <section id="use-cases">
 12 |     <h2>Use cases</h2>
 13 | 
 14 |     <a href="./composition/index.html">Composition</a> |
 15 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/composition">Source</a>
 16 |     <br />
 17 |     <a href="./inline/index.html">Inline Styles</a> |
 18 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/inline">Source</a>
 19 |     <br />
 20 |     <a href="./dynamic-props/index.html">Set/get rule property at runtime</a> |
 21 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/dynamic-props">Source</a>
 22 |     <br />
 23 |     <a href="./angular/index.html">Angular with namespaces</a> |
 24 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/angular">Source</a>
 25 |     <br />
 26 |     <a href="./perdido/index.html">Perdido Layouts</a> |
 27 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/perdido">Source</a>
 28 |     <br />
 29 |     <a href="./react-ssr/dist/index.html">React with SSR</a> |
 30 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/react-ssr">Source</a>
 31 |     <br />
 32 |     <a href="./function-values/index.html">Function values</a> |
 33 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/function-values">Source</a>
 34 |     <br />
 35 |     <a href="./observables/index.html">Observable values</a> |
 36 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/observables">Source</a>
 37 |     <br />
 38 |     <a href="./swinging-cat/index.html">Swinging cat</a> |
 39 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/swinging-cat">Source</a>
 40 |     <br />
 41 |     <a href="./swinging-cat-rx/index.html">Swinging reactive cat</a> |
 42 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/swinging-cat-rx">Source</a>
 43 |   </section>
 44 | 
 45 |   <section id="apps">
 46 |     <h2>Apps</h2>
 47 | 
 48 |     <a href="./calendar/index.html">Calendar</a> |
 49 |     <a href="http://github.com/cssinjs/examples/tree/gh-pages/calendar">Source</a>
 50 |     <br />
 51 |     <a href="https://github.com/tizmagik/react-todomvc-jss">Todo App</a>
 52 |   </section>
 53 | 
 54 |   <section id="plugins">
 55 |     <h2>Plugins</h2>
 56 | 
 57 |     <ul>
 58 |       <li id="plugin-jss-nested">
 59 |         <h3>jss-nested</h3>
 60 |         <a href="./plugins/jss-nested/simple/index.html">Simple</a> |
 61 |         <a href="http://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-nested/simple">Source</a>
 62 |       </li>
 63 |       <li id="plugin-jss-extend">
 64 |         <h3>jss-extend</h3>
 65 |         <a href="./plugins/jss-extend/simple/index.html">Simple</a> |
 66 |         <a href="http://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-extend/simple">Source</a>
 67 |         <br />
 68 |         <a href="./plugins/jss-extend/multi/index.html">Multi</a> |
 69 |         <a href="http://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-extend/multi">Source</a>
 70 |       </li>
 71 |       <li id="plugin-jss-default-unit">
 72 |         <h3>jss-default-unit</h3>
 73 |         <a href="./plugins/jss-default-unit/simple/index.html">Simple</a> |
 74 |         <a href="http://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-default-unit/simple">Source</a>
 75 |       </li>
 76 |       <li id="plugin-jss-camel-case">
 77 |         <h3>jss-camel-case</h3>
 78 |         <a href="./plugins/jss-camel-case/simple/index.html">Simple</a> |
 79 |         <a href="http://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-camel-case/simple">Source</a>
 80 |       </li>
 81 |       <li id="plugin-jss-props-sort">
 82 |         <h3>jss-props-sort</h3>
 83 |         <a href="./plugins/jss-props-sort/simple/index.html">Simple</a> |
 84 |         <a href="http://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-props-sort/simple">Source</a>
 85 |       </li>
 86 |       <li id="plugin-jss-isolate">
 87 |         <h3>jss-isolate</h3>
 88 |         <a href="./plugins/jss-isolate/simple/index.html">Simple</a> |
 89 |         <a href="http://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-isolate/simple">Source</a>
 90 |       </li>
 91 |       <li id="plugin-jss-global">
 92 |         <h3>jss-global</h3>
 93 |         <a href="./plugins/jss-global/index.html">Simple</a> |
 94 |         <a href="http://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-global">Source</a>
 95 |       </li>
 96 |     </ul>
 97 |   </section>
 98 | </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/inline/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   button1: {
 4 |     padding: '20px',
 5 |     background: 'blue'
 6 |   }
 7 | }
 8 | 
 9 | var div = document.body.appendChild(document.createElement('div'))
10 | 
11 | // Application logic.
12 | div.innerHTML = '\
13 |   <button>Button 1</button>\
14 |   <button>Button 2</button>\
15 | '
16 | 
17 | var buttons = document.querySelectorAll('button')
18 | 
19 | // Apply from stylesheet rule.
20 | var sheet = jss.default.createStyleSheet(styles)
21 | sheet.getRule('button1').applyTo(buttons[0])
22 | 
23 | // Apply a standalone rule.
24 | var button2 = jss.default.createRule({
25 |   padding: '20px',
26 |   background: 'green'
27 | })
28 | button2.applyTo(buttons[1])
29 | 


--------------------------------------------------------------------------------
/inline/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Inline styles in JSS</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |   </head>
 8 |   <body>
 9 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/inline" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 | 
11 |     <script src="../jss.js"></script>
12 |     <script src="./app.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/jss-camel-case.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["jssCamelCase"] = factory();
  8 | 	else
  9 | 		root["jssCamelCase"] = factory();
 10 | })(this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | 
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | 
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | 
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			exports: {},
 25 | /******/ 			id: moduleId,
 26 | /******/ 			loaded: false
 27 | /******/ 		};
 28 | 
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | 
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.loaded = true;
 34 | 
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | 
 39 | 
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | 
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | 
 46 | /******/ 	// __webpack_public_path__
 47 | /******/ 	__webpack_require__.p = "";
 48 | 
 49 | /******/ 	// Load entry module and return exports
 50 | /******/ 	return __webpack_require__(0);
 51 | /******/ })
 52 | /************************************************************************/
 53 | /******/ ([
 54 | /* 0 */
 55 | /***/ (function(module, exports) {
 56 | 
 57 | 	"use strict";
 58 | 
 59 | 	Object.defineProperty(exports, "__esModule", {
 60 | 	  value: true
 61 | 	});
 62 | 	exports["default"] = camelCase;
 63 | 	var regExp = /([A-Z])/g;
 64 | 
 65 | 	/**
 66 | 	 * Replace a string passed from String#replace.
 67 | 	 * @param {String} str
 68 | 	 * @return {String}
 69 | 	 */
 70 | 	function replace(str) {
 71 | 	  return "-" + str.toLowerCase();
 72 | 	}
 73 | 
 74 | 	/**
 75 | 	 * Convert camel cased property names to dash separated.
 76 | 	 *
 77 | 	 * @param {Object} style
 78 | 	 * @return {Object}
 79 | 	 */
 80 | 	function convertCase(style) {
 81 | 	  var converted = {};
 82 | 
 83 | 	  for (var prop in style) {
 84 | 	    converted[prop.replace(regExp, replace)] = style[prop];
 85 | 	  }
 86 | 
 87 | 	  if (style.fallbacks) {
 88 | 	    if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);
 89 | 	  }
 90 | 
 91 | 	  return converted;
 92 | 	}
 93 | 
 94 | 	/**
 95 | 	 * Allow camel cased property names by converting them back to dasherized.
 96 | 	 *
 97 | 	 * @param {Rule} rule
 98 | 	 */
 99 | 	function camelCase() {
100 | 	  function onProcessStyle(style) {
101 | 	    if (Array.isArray(style)) {
102 | 	      // Handle rules like @font-face, which can have multiple styles in an array
103 | 	      for (var index = 0; index < style.length; index++) {
104 | 	        style[index] = convertCase(style[index]);
105 | 	      }
106 | 	      return style;
107 | 	    }
108 | 
109 | 	    return convertCase(style);
110 | 	  }
111 | 
112 | 	  return { onProcessStyle: onProcessStyle };
113 | 	}
114 | 
115 | /***/ })
116 | /******/ ])
117 | });
118 | ;


--------------------------------------------------------------------------------
/jss-debug.js:
--------------------------------------------------------------------------------
 1 | (function webpackUniversalModuleDefinition(root, factory) {
 2 | 	if(typeof exports === 'object' && typeof module === 'object')
 3 | 		module.exports = factory();
 4 | 	else if(typeof define === 'function' && define.amd)
 5 | 		define([], factory);
 6 | 	else if(typeof exports === 'object')
 7 | 		exports["jssDebug"] = factory();
 8 | 	else
 9 | 		root["jssDebug"] = factory();
10 | })(this, function() {
11 | return /******/ (function(modules) { // webpackBootstrap
12 | /******/ 	// The module cache
13 | /******/ 	var installedModules = {};
14 | 
15 | /******/ 	// The require function
16 | /******/ 	function __webpack_require__(moduleId) {
17 | 
18 | /******/ 		// Check if module is in cache
19 | /******/ 		if(installedModules[moduleId])
20 | /******/ 			return installedModules[moduleId].exports;
21 | 
22 | /******/ 		// Create a new module (and put it into the cache)
23 | /******/ 		var module = installedModules[moduleId] = {
24 | /******/ 			exports: {},
25 | /******/ 			id: moduleId,
26 | /******/ 			loaded: false
27 | /******/ 		};
28 | 
29 | /******/ 		// Execute the module function
30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
31 | 
32 | /******/ 		// Flag the module as loaded
33 | /******/ 		module.loaded = true;
34 | 
35 | /******/ 		// Return the exports of the module
36 | /******/ 		return module.exports;
37 | /******/ 	}
38 | 
39 | 
40 | /******/ 	// expose the modules object (__webpack_modules__)
41 | /******/ 	__webpack_require__.m = modules;
42 | 
43 | /******/ 	// expose the module cache
44 | /******/ 	__webpack_require__.c = installedModules;
45 | 
46 | /******/ 	// __webpack_public_path__
47 | /******/ 	__webpack_require__.p = "";
48 | 
49 | /******/ 	// Load entry module and return exports
50 | /******/ 	return __webpack_require__(0);
51 | /******/ })
52 | /************************************************************************/
53 | /******/ ([
54 | /* 0 */
55 | /***/ function(module, exports) {
56 | 
57 | 	/**
58 | 	 * Add rule name to the class name for debugging purposes.
59 | 	 *
60 | 	 * @param {Rule} rule
61 | 	 * @api public
62 | 	 */
63 | 	"use strict";
64 | 
65 | 	exports.__esModule = true;
66 | 	exports["default"] = jssDebug;
67 | 
68 | 	function jssDebug() {
69 | 	  return function (rule) {
70 | 	    var name = rule.name;
71 | 
72 | 	    if (!rule.options.named || !name) return;
73 | 	    rule.className += " jss:" + name;
74 | 	    if (rule.options.sheet) {
75 | 	      rule.options.sheet.classes[name] = rule.className;
76 | 	    }
77 | 	  };
78 | 	}
79 | 
80 | 	module.exports = exports["default"];
81 | 
82 | /***/ }
83 | /******/ ])
84 | });
85 | ;


--------------------------------------------------------------------------------
/jss-default-unit.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["jssDefaultUnit"] = factory();
  8 | 	else
  9 | 		root["jssDefaultUnit"] = factory();
 10 | })(this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			exports: {},
 25 | /******/ 			id: moduleId,
 26 | /******/ 			loaded: false
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.loaded = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// __webpack_public_path__
 47 | /******/ 	__webpack_require__.p = "";
 48 | /******/
 49 | /******/ 	// Load entry module and return exports
 50 | /******/ 	return __webpack_require__(0);
 51 | /******/ })
 52 | /************************************************************************/
 53 | /******/ ([
 54 | /* 0 */
 55 | /***/ (function(module, exports, __webpack_require__) {
 56 | 
 57 | 	'use strict';
 58 | 	
 59 | 	Object.defineProperty(exports, "__esModule", {
 60 | 	  value: true
 61 | 	});
 62 | 	
 63 | 	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 64 | 	
 65 | 	exports['default'] = defaultUnit;
 66 | 	
 67 | 	var _isObservable = __webpack_require__(1);
 68 | 	
 69 | 	var _isObservable2 = _interopRequireDefault(_isObservable);
 70 | 	
 71 | 	var _defaultUnits = __webpack_require__(4);
 72 | 	
 73 | 	var _defaultUnits2 = _interopRequireDefault(_defaultUnits);
 74 | 	
 75 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 76 | 	
 77 | 	/**
 78 | 	 * Clones the object and adds a camel cased property version.
 79 | 	 */
 80 | 	function addCamelCasedVersion(obj) {
 81 | 	  var regExp = /(-[a-z])/g;
 82 | 	  var replace = function replace(str) {
 83 | 	    return str[1].toUpperCase();
 84 | 	  };
 85 | 	  var newObj = {};
 86 | 	  for (var key in obj) {
 87 | 	    newObj[key] = obj[key];
 88 | 	    newObj[key.replace(regExp, replace)] = obj[key];
 89 | 	  }
 90 | 	  return newObj;
 91 | 	}
 92 | 	
 93 | 	var units = addCamelCasedVersion(_defaultUnits2['default']);
 94 | 	
 95 | 	/**
 96 | 	 * Recursive deep style passing function
 97 | 	 *
 98 | 	 * @param {String} current property
 99 | 	 * @param {(Object|Array|Number|String)} property value
100 | 	 * @param {Object} options
101 | 	 * @return {(Object|Array|Number|String)} resulting value
102 | 	 */
103 | 	function iterate(prop, value, options) {
104 | 	  if (!value) return value;
105 | 	
106 | 	  var convertedValue = value;
107 | 	
108 | 	  var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);
109 | 	  if (type === 'object') {
110 | 	    if (Array.isArray(value)) type = 'array';
111 | 	    if ((0, _isObservable2['default'])(value)) type = 'observable';
112 | 	  }
113 | 	
114 | 	  switch (type) {
115 | 	    case 'object':
116 | 	      if (prop === 'fallbacks') {
117 | 	        for (var innerProp in value) {
118 | 	          value[innerProp] = iterate(innerProp, value[innerProp], options);
119 | 	        }
120 | 	        break;
121 | 	      }
122 | 	      for (var _innerProp in value) {
123 | 	        value[_innerProp] = iterate(prop + '-' + _innerProp, value[_innerProp], options);
124 | 	      }
125 | 	      break;
126 | 	    case 'array':
127 | 	      for (var i = 0; i < value.length; i++) {
128 | 	        value[i] = iterate(prop, value[i], options);
129 | 	      }
130 | 	      break;
131 | 	    case 'number':
132 | 	      if (value !== 0) {
133 | 	        convertedValue = value + (options[prop] || units[prop] || '');
134 | 	      }
135 | 	      break;
136 | 	    default:
137 | 	      break;
138 | 	  }
139 | 	
140 | 	  return convertedValue;
141 | 	}
142 | 	
143 | 	/**
144 | 	 * Add unit to numeric values.
145 | 	 */
146 | 	function defaultUnit() {
147 | 	  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
148 | 	
149 | 	  var camelCasedOptions = addCamelCasedVersion(options);
150 | 	
151 | 	  function onProcessStyle(style, rule) {
152 | 	    if (rule.type !== 'style') return style;
153 | 	
154 | 	    for (var prop in style) {
155 | 	      style[prop] = iterate(prop, style[prop], camelCasedOptions);
156 | 	    }
157 | 	
158 | 	    return style;
159 | 	  }
160 | 	
161 | 	  function onChangeValue(value, prop) {
162 | 	    return iterate(prop, value, camelCasedOptions);
163 | 	  }
164 | 	
165 | 	  return { onProcessStyle: onProcessStyle, onChangeValue: onChangeValue };
166 | 	}
167 | 
168 | /***/ }),
169 | /* 1 */
170 | /***/ (function(module, exports, __webpack_require__) {
171 | 
172 | 	'use strict';
173 | 	var symbolObservable = __webpack_require__(2);
174 | 	
175 | 	module.exports = function (fn) {
176 | 		return Boolean(fn && fn[symbolObservable]);
177 | 	};
178 | 
179 | 
180 | /***/ }),
181 | /* 2 */
182 | /***/ (function(module, exports, __webpack_require__) {
183 | 
184 | 	/* WEBPACK VAR INJECTION */(function(global) {/* global window */
185 | 	'use strict';
186 | 	
187 | 	module.exports = __webpack_require__(3)(global || window || this);
188 | 	
189 | 	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
190 | 
191 | /***/ }),
192 | /* 3 */
193 | /***/ (function(module, exports) {
194 | 
195 | 	'use strict';
196 | 	
197 | 	module.exports = function symbolObservablePonyfill(root) {
198 | 		var result;
199 | 		var Symbol = root.Symbol;
200 | 	
201 | 		if (typeof Symbol === 'function') {
202 | 			if (Symbol.observable) {
203 | 				result = Symbol.observable;
204 | 			} else {
205 | 				result = Symbol('observable');
206 | 				Symbol.observable = result;
207 | 			}
208 | 		} else {
209 | 			result = '@@observable';
210 | 		}
211 | 	
212 | 		return result;
213 | 	};
214 | 
215 | 
216 | /***/ }),
217 | /* 4 */
218 | /***/ (function(module, exports) {
219 | 
220 | 	'use strict';
221 | 	
222 | 	Object.defineProperty(exports, "__esModule", {
223 | 	  value: true
224 | 	});
225 | 	/**
226 | 	 * Generated jss-default-unit CSS property units
227 | 	 *
228 | 	 * @type object
229 | 	 */
230 | 	exports['default'] = {
231 | 	  'animation-delay': 'ms',
232 | 	  'animation-duration': 'ms',
233 | 	  'background-position': 'px',
234 | 	  'background-position-x': 'px',
235 | 	  'background-position-y': 'px',
236 | 	  'background-size': 'px',
237 | 	  border: 'px',
238 | 	  'border-bottom': 'px',
239 | 	  'border-bottom-left-radius': 'px',
240 | 	  'border-bottom-right-radius': 'px',
241 | 	  'border-bottom-width': 'px',
242 | 	  'border-left': 'px',
243 | 	  'border-left-width': 'px',
244 | 	  'border-radius': 'px',
245 | 	  'border-right': 'px',
246 | 	  'border-right-width': 'px',
247 | 	  'border-spacing': 'px',
248 | 	  'border-top': 'px',
249 | 	  'border-top-left-radius': 'px',
250 | 	  'border-top-right-radius': 'px',
251 | 	  'border-top-width': 'px',
252 | 	  'border-width': 'px',
253 | 	  'border-after-width': 'px',
254 | 	  'border-before-width': 'px',
255 | 	  'border-end-width': 'px',
256 | 	  'border-horizontal-spacing': 'px',
257 | 	  'border-start-width': 'px',
258 | 	  'border-vertical-spacing': 'px',
259 | 	  bottom: 'px',
260 | 	  'box-shadow': 'px',
261 | 	  'column-gap': 'px',
262 | 	  'column-rule': 'px',
263 | 	  'column-rule-width': 'px',
264 | 	  'column-width': 'px',
265 | 	  'flex-basis': 'px',
266 | 	  'font-size': 'px',
267 | 	  'font-size-delta': 'px',
268 | 	  height: 'px',
269 | 	  left: 'px',
270 | 	  'letter-spacing': 'px',
271 | 	  'logical-height': 'px',
272 | 	  'logical-width': 'px',
273 | 	  margin: 'px',
274 | 	  'margin-after': 'px',
275 | 	  'margin-before': 'px',
276 | 	  'margin-bottom': 'px',
277 | 	  'margin-left': 'px',
278 | 	  'margin-right': 'px',
279 | 	  'margin-top': 'px',
280 | 	  'max-height': 'px',
281 | 	  'max-width': 'px',
282 | 	  'margin-end': 'px',
283 | 	  'margin-start': 'px',
284 | 	  'mask-position-x': 'px',
285 | 	  'mask-position-y': 'px',
286 | 	  'mask-size': 'px',
287 | 	  'max-logical-height': 'px',
288 | 	  'max-logical-width': 'px',
289 | 	  'min-height': 'px',
290 | 	  'min-width': 'px',
291 | 	  'min-logical-height': 'px',
292 | 	  'min-logical-width': 'px',
293 | 	  motion: 'px',
294 | 	  'motion-offset': 'px',
295 | 	  outline: 'px',
296 | 	  'outline-offset': 'px',
297 | 	  'outline-width': 'px',
298 | 	  padding: 'px',
299 | 	  'padding-bottom': 'px',
300 | 	  'padding-left': 'px',
301 | 	  'padding-right': 'px',
302 | 	  'padding-top': 'px',
303 | 	  'padding-after': 'px',
304 | 	  'padding-before': 'px',
305 | 	  'padding-end': 'px',
306 | 	  'padding-start': 'px',
307 | 	  'perspective-origin-x': '%',
308 | 	  'perspective-origin-y': '%',
309 | 	  perspective: 'px',
310 | 	  right: 'px',
311 | 	  'shape-margin': 'px',
312 | 	  size: 'px',
313 | 	  'text-indent': 'px',
314 | 	  'text-stroke': 'px',
315 | 	  'text-stroke-width': 'px',
316 | 	  top: 'px',
317 | 	  'transform-origin': '%',
318 | 	  'transform-origin-x': '%',
319 | 	  'transform-origin-y': '%',
320 | 	  'transform-origin-z': '%',
321 | 	  'transition-delay': 'ms',
322 | 	  'transition-duration': 'ms',
323 | 	  'vertical-align': 'px',
324 | 	  width: 'px',
325 | 	  'word-spacing': 'px',
326 | 	  // Not existing properties.
327 | 	  // Used to avoid issues with jss-expand intergration.
328 | 	  'box-shadow-x': 'px',
329 | 	  'box-shadow-y': 'px',
330 | 	  'box-shadow-blur': 'px',
331 | 	  'box-shadow-spread': 'px',
332 | 	  'font-line-height': 'px',
333 | 	  'text-shadow-x': 'px',
334 | 	  'text-shadow-y': 'px',
335 | 	  'text-shadow-blur': 'px'
336 | 	};
337 | 
338 | /***/ })
339 | /******/ ])
340 | });
341 | ;
342 | //# sourceMappingURL=jss-default-unit.js.map


--------------------------------------------------------------------------------
/jss-extend.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["jssExtend"] = factory();
  8 | 	else
  9 | 		root["jssExtend"] = factory();
 10 | })(this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			exports: {},
 25 | /******/ 			id: moduleId,
 26 | /******/ 			loaded: false
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.loaded = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// __webpack_public_path__
 47 | /******/ 	__webpack_require__.p = "";
 48 | /******/
 49 | /******/ 	// Load entry module and return exports
 50 | /******/ 	return __webpack_require__(0);
 51 | /******/ })
 52 | /************************************************************************/
 53 | /******/ ([
 54 | /* 0 */
 55 | /***/ (function(module, exports, __webpack_require__) {
 56 | 
 57 | 	'use strict';
 58 | 	
 59 | 	Object.defineProperty(exports, "__esModule", {
 60 | 	  value: true
 61 | 	});
 62 | 	
 63 | 	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 64 | 	
 65 | 	exports['default'] = jssExtend;
 66 | 	
 67 | 	var _warning = __webpack_require__(1);
 68 | 	
 69 | 	var _warning2 = _interopRequireDefault(_warning);
 70 | 	
 71 | 	var _isObservable = __webpack_require__(2);
 72 | 	
 73 | 	var _isObservable2 = _interopRequireDefault(_isObservable);
 74 | 	
 75 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 76 | 	
 77 | 	var isObject = function isObject(obj) {
 78 | 	  return obj && (typeof obj === 'undefined' ? 'undefined' : _typeof(obj)) === 'object' && !Array.isArray(obj) && !(0, _isObservable2['default'])(obj);
 79 | 	};
 80 | 	
 81 | 	/**
 82 | 	 * Recursively extend styles.
 83 | 	 */
 84 | 	function extend(style, rule, sheet) {
 85 | 	  var newStyle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
 86 | 	
 87 | 	  if (typeof style.extend === 'string') {
 88 | 	    if (sheet) {
 89 | 	      var refRule = sheet.getRule(style.extend);
 90 | 	      if (refRule) {
 91 | 	        if (refRule === rule) (0, _warning2['default'])(false, '[JSS] A rule tries to extend itself \r\n%s', rule);else if (refRule.options.parent) {
 92 | 	          var originalStyle = refRule.options.parent.rules.raw[style.extend];
 93 | 	          extend(originalStyle, rule, sheet, newStyle);
 94 | 	        }
 95 | 	      }
 96 | 	    }
 97 | 	  } else if (Array.isArray(style.extend)) {
 98 | 	    for (var index = 0; index < style.extend.length; index++) {
 99 | 	      extend(style.extend[index], rule, sheet, newStyle);
100 | 	    }
101 | 	  } else {
102 | 	    for (var prop in style.extend) {
103 | 	      if (prop === 'extend') {
104 | 	        extend(style.extend.extend, rule, sheet, newStyle);
105 | 	      } else if (isObject(style.extend[prop])) {
106 | 	        if (!newStyle[prop]) newStyle[prop] = {};
107 | 	        extend(style.extend[prop], rule, sheet, newStyle[prop]);
108 | 	      } else {
109 | 	        newStyle[prop] = style.extend[prop];
110 | 	      }
111 | 	    }
112 | 	  }
113 | 	  // Copy base style.
114 | 	  for (var _prop in style) {
115 | 	    if (_prop === 'extend') continue;
116 | 	    if (isObject(newStyle[_prop]) && isObject(style[_prop])) {
117 | 	      extend(style[_prop], rule, sheet, newStyle[_prop]);
118 | 	    } else if (isObject(style[_prop])) {
119 | 	      newStyle[_prop] = extend(style[_prop], rule, sheet);
120 | 	    } else {
121 | 	      newStyle[_prop] = style[_prop];
122 | 	    }
123 | 	  }
124 | 	
125 | 	  return newStyle;
126 | 	}
127 | 	
128 | 	/**
129 | 	 * Handle `extend` property.
130 | 	 *
131 | 	 * @param {Rule} rule
132 | 	 * @api public
133 | 	 */
134 | 	function jssExtend() {
135 | 	  function onProcessStyle(style, rule, sheet) {
136 | 	    return style.extend ? extend(style, rule, sheet) : style;
137 | 	  }
138 | 	
139 | 	  return { onProcessStyle: onProcessStyle };
140 | 	}
141 | 
142 | /***/ }),
143 | /* 1 */
144 | /***/ (function(module, exports, __webpack_require__) {
145 | 
146 | 	/**
147 | 	 * Copyright 2014-2015, Facebook, Inc.
148 | 	 * All rights reserved.
149 | 	 *
150 | 	 * This source code is licensed under the BSD-style license found in the
151 | 	 * LICENSE file in the root directory of this source tree. An additional grant
152 | 	 * of patent rights can be found in the PATENTS file in the same directory.
153 | 	 */
154 | 	
155 | 	'use strict';
156 | 	
157 | 	/**
158 | 	 * Similar to invariant but only logs a warning if the condition is not met.
159 | 	 * This can be used to log issues in development environments in critical
160 | 	 * paths. Removing the logging code for production environments will keep the
161 | 	 * same logic and follow the same code paths.
162 | 	 */
163 | 	
164 | 	var warning = function() {};
165 | 	
166 | 	if (true) {
167 | 	  warning = function(condition, format, args) {
168 | 	    var len = arguments.length;
169 | 	    args = new Array(len > 2 ? len - 2 : 0);
170 | 	    for (var key = 2; key < len; key++) {
171 | 	      args[key - 2] = arguments[key];
172 | 	    }
173 | 	    if (format === undefined) {
174 | 	      throw new Error(
175 | 	        '`warning(condition, format, ...args)` requires a warning ' +
176 | 	        'message argument'
177 | 	      );
178 | 	    }
179 | 	
180 | 	    if (format.length < 10 || (/^[s\W]*$/).test(format)) {
181 | 	      throw new Error(
182 | 	        'The warning format should be able to uniquely identify this ' +
183 | 	        'warning. Please, use a more descriptive format than: ' + format
184 | 	      );
185 | 	    }
186 | 	
187 | 	    if (!condition) {
188 | 	      var argIndex = 0;
189 | 	      var message = 'Warning: ' +
190 | 	        format.replace(/%s/g, function() {
191 | 	          return args[argIndex++];
192 | 	        });
193 | 	      if (typeof console !== 'undefined') {
194 | 	        console.error(message);
195 | 	      }
196 | 	      try {
197 | 	        // This error was thrown as a convenience so that you can use this stack
198 | 	        // to find the callsite that caused this warning to fire.
199 | 	        throw new Error(message);
200 | 	      } catch(x) {}
201 | 	    }
202 | 	  };
203 | 	}
204 | 	
205 | 	module.exports = warning;
206 | 
207 | 
208 | /***/ }),
209 | /* 2 */
210 | /***/ (function(module, exports, __webpack_require__) {
211 | 
212 | 	'use strict';
213 | 	var symbolObservable = __webpack_require__(3);
214 | 	
215 | 	module.exports = function (fn) {
216 | 		return Boolean(fn && fn[symbolObservable]);
217 | 	};
218 | 
219 | 
220 | /***/ }),
221 | /* 3 */
222 | /***/ (function(module, exports, __webpack_require__) {
223 | 
224 | 	/* WEBPACK VAR INJECTION */(function(global) {/* global window */
225 | 	'use strict';
226 | 	
227 | 	module.exports = __webpack_require__(4)(global || window || this);
228 | 	
229 | 	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
230 | 
231 | /***/ }),
232 | /* 4 */
233 | /***/ (function(module, exports) {
234 | 
235 | 	'use strict';
236 | 	
237 | 	module.exports = function symbolObservablePonyfill(root) {
238 | 		var result;
239 | 		var Symbol = root.Symbol;
240 | 	
241 | 		if (typeof Symbol === 'function') {
242 | 			if (Symbol.observable) {
243 | 				result = Symbol.observable;
244 | 			} else {
245 | 				result = Symbol('observable');
246 | 				Symbol.observable = result;
247 | 			}
248 | 		} else {
249 | 			result = '@@observable';
250 | 		}
251 | 	
252 | 		return result;
253 | 	};
254 | 
255 | 
256 | /***/ })
257 | /******/ ])
258 | });
259 | ;
260 | //# sourceMappingURL=jss-extend.js.map


--------------------------------------------------------------------------------
/jss-isolate.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["jssIsolate"] = factory();
  8 | 	else
  9 | 		root["jssIsolate"] = factory();
 10 | })(this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			exports: {},
 25 | /******/ 			id: moduleId,
 26 | /******/ 			loaded: false
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.loaded = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// __webpack_public_path__
 47 | /******/ 	__webpack_require__.p = "";
 48 | /******/
 49 | /******/ 	// Load entry module and return exports
 50 | /******/ 	return __webpack_require__(0);
 51 | /******/ })
 52 | /************************************************************************/
 53 | /******/ ([
 54 | /* 0 */
 55 | /***/ (function(module, exports, __webpack_require__) {
 56 | 
 57 | 	'use strict';
 58 | 	
 59 | 	Object.defineProperty(exports, "__esModule", {
 60 | 	  value: true
 61 | 	});
 62 | 	
 63 | 	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 64 | 	
 65 | 	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 66 | 	
 67 | 	exports['default'] = jssIsolate;
 68 | 	
 69 | 	var _inherited = __webpack_require__(1);
 70 | 	
 71 | 	var _inherited2 = _interopRequireDefault(_inherited);
 72 | 	
 73 | 	var _all = __webpack_require__(2);
 74 | 	
 75 | 	var _all2 = _interopRequireDefault(_all);
 76 | 	
 77 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 78 | 	
 79 | 	var resetSheetOptions = {
 80 | 	  meta: 'jss-isolate',
 81 | 	  // Lets make it always the first one in sheets for testing
 82 | 	  // and specificity.
 83 | 	  index: -Infinity,
 84 | 	  link: true
 85 | 	};
 86 | 	
 87 | 	var initialsMap = {
 88 | 	  inherited: _inherited2['default'],
 89 | 	  all: _all2['default']
 90 | 	};
 91 | 	
 92 | 	var getStyle = function getStyle() {
 93 | 	  var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inherited';
 94 | 	
 95 | 	  // Option is either "inherited" or "all".
 96 | 	  if (typeof option === 'string') return initialsMap[option];
 97 | 	
 98 | 	  if ((typeof option === 'undefined' ? 'undefined' : _typeof(option)) === 'object') {
 99 | 	    // Option is ["all/inherited", {...style}]
100 | 	    if (Array.isArray(option)) {
101 | 	      var type = option[0];
102 | 	      var style = option[1];
103 | 	      return _extends({}, initialsMap[type], style);
104 | 	    }
105 | 	    // Option is a style object, use inherited initials by default.
106 | 	    return _extends({}, _inherited2['default'], option);
107 | 	  }
108 | 	
109 | 	  return _inherited2['default'];
110 | 	};
111 | 	
112 | 	var ignoreParents = {
113 | 	  keyframes: true,
114 | 	  conditional: true
115 | 	};
116 | 	
117 | 	var shouldIsolate = function shouldIsolate(rule, sheet, options) {
118 | 	  var parent = rule.options.parent;
119 | 	
120 | 	
121 | 	  if (parent && ignoreParents[parent.type]) {
122 | 	    return false;
123 | 	  }
124 | 	
125 | 	  var isolate = options.isolate == null ? true : options.isolate;
126 | 	  if (sheet.options.isolate != null) isolate = sheet.options.isolate;
127 | 	  if (rule.style.isolate != null) {
128 | 	    isolate = rule.style.isolate;
129 | 	    delete rule.style.isolate;
130 | 	  }
131 | 	
132 | 	  // Option `isolate` may be for e.g. `{isolate: 'root'}`.
133 | 	  // In this case it must match the rule name in order to isolate it.
134 | 	  if (typeof isolate === 'string') {
135 | 	    return isolate === rule.key;
136 | 	  }
137 | 	
138 | 	  return isolate;
139 | 	};
140 | 	
141 | 	/**
142 | 	 * Performance optimized debounce without using setTimeout.
143 | 	 * Returns a function which:
144 | 	 * - will execute the passed fn not more than once per delay
145 | 	 * - will not execute the passed fn if last try was within delay
146 | 	 */
147 | 	var createDebounced = function createDebounced(fn) {
148 | 	  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
149 | 	
150 | 	  var time = Date.now();
151 | 	  return function () {
152 | 	    var now = Date.now();
153 | 	    if (now - time < delay) return false;
154 | 	    time = now;
155 | 	    fn();
156 | 	    return true;
157 | 	  };
158 | 	};
159 | 	
160 | 	function jssIsolate() {
161 | 	  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
162 | 	
163 | 	  var setSelectorDone = false;
164 | 	  var selectors = [];
165 | 	  var resetSheet = void 0;
166 | 	  var resetRule = void 0;
167 | 	
168 | 	  var setSelector = function setSelector() {
169 | 	    resetRule.selector = selectors.join(',\n');
170 | 	  };
171 | 	
172 | 	  var setSelectorDebounced = createDebounced(setSelector);
173 | 	
174 | 	  function onProcessRule(rule, sheet) {
175 | 	    if (!sheet || sheet === resetSheet || rule.type !== 'style') return;
176 | 	
177 | 	    if (!shouldIsolate(rule, sheet, options)) return;
178 | 	
179 | 	    // Create a reset Style Sheet once and use it for all rules.
180 | 	    if (!resetRule) {
181 | 	      resetSheet = rule.options.jss.createStyleSheet(null, resetSheetOptions);
182 | 	      resetRule = resetSheet.addRule('reset', getStyle(options.reset));
183 | 	      resetSheet.attach();
184 | 	    }
185 | 	
186 | 	    // Add reset rule class name to the classes map of users Style Sheet.
187 | 	    var selector = rule.selector;
188 | 	
189 | 	    if (selectors.indexOf(selector) === -1) {
190 | 	      selectors.push(selector);
191 | 	      setSelectorDone = setSelectorDebounced();
192 | 	    }
193 | 	  }
194 | 	
195 | 	  // We make sure selector is set, because `debaunceMaybe` will not execute
196 | 	  // the fn if called within delay.
197 | 	  function onProcessSheet() {
198 | 	    if (!setSelectorDone && selectors.length) setSelector();
199 | 	  }
200 | 	
201 | 	  return {
202 | 	    onProcessRule: onProcessRule,
203 | 	    onProcessSheet: onProcessSheet
204 | 	  };
205 | 	}
206 | 
207 | /***/ }),
208 | /* 1 */
209 | /***/ (function(module, exports) {
210 | 
211 | 	module.exports = {
212 | 	  "-ms-overflow-style": "auto",
213 | 	  "-moz-context-properties": "none",
214 | 	  "-moz-image-region": "auto",
215 | 	  "-moz-stack-sizing": "stretch-to-fit",
216 | 	  "-moz-user-input": "auto",
217 | 	  "-moz-user-modify": "read-only",
218 | 	  "-webkit-border-before-color": "currentcolor",
219 | 	  "-webkit-border-before-style": "none",
220 | 	  "-webkit-border-before-width": "medium",
221 | 	  "-webkit-text-fill-color": "currentcolor",
222 | 	  "-webkit-text-stroke-color": "currentcolor",
223 | 	  "-webkit-text-stroke-width": "0",
224 | 	  "-webkit-touch-callout": "default",
225 | 	  "azimuth": "center",
226 | 	  "border-collapse": "separate",
227 | 	  "border-spacing": "0",
228 | 	  "caption-side": "top",
229 | 	  "caret-color": "auto",
230 | 	  "color": "initial",
231 | 	  "cursor": "auto",
232 | 	  "empty-cells": "show",
233 | 	  "font-family": "initial",
234 | 	  "font-feature-settings": "normal",
235 | 	  "font-kerning": "auto",
236 | 	  "font-language-override": "normal",
237 | 	  "font-size": "medium",
238 | 	  "font-size-adjust": "none",
239 | 	  "font-stretch": "normal",
240 | 	  "font-style": "normal",
241 | 	  "font-synthesis": "weight style",
242 | 	  "font-variant": "normal",
243 | 	  "font-variant-alternates": "normal",
244 | 	  "font-variant-caps": "normal",
245 | 	  "font-variant-east-asian": "normal",
246 | 	  "font-variant-ligatures": "normal",
247 | 	  "font-variant-numeric": "normal",
248 | 	  "font-variant-position": "normal",
249 | 	  "font-weight": "normal",
250 | 	  "hyphens": "manual",
251 | 	  "image-orientation": "0deg",
252 | 	  "image-rendering": "auto",
253 | 	  "image-resolution": "1dppx",
254 | 	  "letter-spacing": "normal",
255 | 	  "line-height": "normal",
256 | 	  "list-style-image": "none",
257 | 	  "list-style-position": "outside",
258 | 	  "list-style-type": "disc",
259 | 	  "object-position": "50% 50%",
260 | 	  "orphans": "2",
261 | 	  "overflow-wrap": "normal",
262 | 	  "pointer-events": "auto",
263 | 	  "quotes": "initial",
264 | 	  "ruby-align": "space-around",
265 | 	  "ruby-merge": "separate",
266 | 	  "ruby-position": "over",
267 | 	  "tab-size": "8",
268 | 	  "text-align": "initial",
269 | 	  "text-align-last": "auto",
270 | 	  "text-combine-upright": "none",
271 | 	  "text-indent": "0",
272 | 	  "text-justify": "auto",
273 | 	  "text-orientation": "mixed",
274 | 	  "text-rendering": "auto",
275 | 	  "text-shadow": "none",
276 | 	  "text-transform": "none",
277 | 	  "text-underline-position": "auto",
278 | 	  "visibility": "visible",
279 | 	  "white-space": "normal",
280 | 	  "widows": "2",
281 | 	  "word-break": "normal",
282 | 	  "word-spacing": "normal",
283 | 	  "word-wrap": "normal",
284 | 	  "writing-mode": "horizontal-tb",
285 | 	  "-webkit-appearance": "none",
286 | 	  "-moz-appearance": "none",
287 | 	  "-ms-appearance": "none",
288 | 	  "appearance": "none"
289 | 	};
290 | 
291 | /***/ }),
292 | /* 2 */
293 | /***/ (function(module, exports) {
294 | 
295 | 	module.exports = {
296 | 	  "-ms-overflow-style": "auto",
297 | 	  "-moz-appearance": "none",
298 | 	  "-moz-binding": "none",
299 | 	  "-moz-border-bottom-colors": "none",
300 | 	  "-moz-border-left-colors": "none",
301 | 	  "-moz-border-right-colors": "none",
302 | 	  "-moz-border-top-colors": "none",
303 | 	  "-moz-context-properties": "none",
304 | 	  "-moz-float-edge": "content-box",
305 | 	  "-moz-force-broken-image-icon": "0",
306 | 	  "-moz-image-region": "auto",
307 | 	  "-moz-orient": "inline",
308 | 	  "-moz-outline-radius-bottomleft": "0",
309 | 	  "-moz-outline-radius-bottomright": "0",
310 | 	  "-moz-outline-radius-topleft": "0",
311 | 	  "-moz-outline-radius-topright": "0",
312 | 	  "-moz-stack-sizing": "stretch-to-fit",
313 | 	  "-moz-text-blink": "none",
314 | 	  "-moz-user-focus": "none",
315 | 	  "-moz-user-input": "auto",
316 | 	  "-moz-user-modify": "read-only",
317 | 	  "-moz-window-shadow": "default",
318 | 	  "-webkit-border-before-color": "currentcolor",
319 | 	  "-webkit-border-before-style": "none",
320 | 	  "-webkit-border-before-width": "medium",
321 | 	  "-webkit-box-reflect": "none",
322 | 	  "-webkit-mask-attachment": "scroll",
323 | 	  "-webkit-mask-clip": "border",
324 | 	  "-webkit-mask-composite": "source-over",
325 | 	  "-webkit-mask-image": "none",
326 | 	  "-webkit-mask-origin": "padding",
327 | 	  "-webkit-mask-position": "0% 0%",
328 | 	  "-webkit-mask-position-x": "0%",
329 | 	  "-webkit-mask-position-y": "0%",
330 | 	  "-webkit-mask-repeat": "repeat",
331 | 	  "-webkit-mask-repeat-x": "repeat",
332 | 	  "-webkit-mask-repeat-y": "repeat",
333 | 	  "-webkit-tap-highlight-color": "black",
334 | 	  "-webkit-text-fill-color": "currentcolor",
335 | 	  "-webkit-text-stroke-color": "currentcolor",
336 | 	  "-webkit-text-stroke-width": "0",
337 | 	  "-webkit-touch-callout": "default",
338 | 	  "align-content": "stretch",
339 | 	  "align-items": "stretch",
340 | 	  "align-self": "auto",
341 | 	  "animation-delay": "0s",
342 | 	  "animation-direction": "normal",
343 | 	  "animation-duration": "0s",
344 | 	  "animation-fill-mode": "none",
345 | 	  "animation-iteration-count": "1",
346 | 	  "animation-name": "none",
347 | 	  "animation-play-state": "running",
348 | 	  "animation-timing-function": "ease",
349 | 	  "azimuth": "center",
350 | 	  "backface-visibility": "visible",
351 | 	  "background-attachment": "scroll",
352 | 	  "background-blend-mode": "normal",
353 | 	  "background-clip": "border-box",
354 | 	  "background-color": "transparent",
355 | 	  "background-image": "none",
356 | 	  "background-origin": "padding-box",
357 | 	  "background-position": "0% 0%",
358 | 	  "background-repeat": "repeat",
359 | 	  "background-size": "auto auto",
360 | 	  "block-size": "auto",
361 | 	  "border-block-end-color": "currentcolor",
362 | 	  "border-block-end-style": "none",
363 | 	  "border-block-end-width": "medium",
364 | 	  "border-block-start-color": "currentcolor",
365 | 	  "border-block-start-style": "none",
366 | 	  "border-block-start-width": "medium",
367 | 	  "border-bottom-color": "currentcolor",
368 | 	  "border-bottom-left-radius": "0",
369 | 	  "border-bottom-right-radius": "0",
370 | 	  "border-bottom-style": "none",
371 | 	  "border-bottom-width": "medium",
372 | 	  "border-collapse": "separate",
373 | 	  "border-image-outset": "0s",
374 | 	  "border-image-repeat": "stretch",
375 | 	  "border-image-slice": "100%",
376 | 	  "border-image-source": "none",
377 | 	  "border-image-width": "1",
378 | 	  "border-inline-end-color": "currentcolor",
379 | 	  "border-inline-end-style": "none",
380 | 	  "border-inline-end-width": "medium",
381 | 	  "border-inline-start-color": "currentcolor",
382 | 	  "border-inline-start-style": "none",
383 | 	  "border-inline-start-width": "medium",
384 | 	  "border-left-color": "currentcolor",
385 | 	  "border-left-style": "none",
386 | 	  "border-left-width": "medium",
387 | 	  "border-right-color": "currentcolor",
388 | 	  "border-right-style": "none",
389 | 	  "border-right-width": "medium",
390 | 	  "border-spacing": "0",
391 | 	  "border-top-color": "currentcolor",
392 | 	  "border-top-left-radius": "0",
393 | 	  "border-top-right-radius": "0",
394 | 	  "border-top-style": "none",
395 | 	  "border-top-width": "medium",
396 | 	  "bottom": "auto",
397 | 	  "box-align": "stretch",
398 | 	  "box-decoration-break": "slice",
399 | 	  "box-direction": "normal",
400 | 	  "box-flex": "0",
401 | 	  "box-flex-group": "1",
402 | 	  "box-lines": "single",
403 | 	  "box-ordinal-group": "1",
404 | 	  "box-orient": "initial",
405 | 	  "box-pack": "start",
406 | 	  "box-shadow": "none",
407 | 	  "box-sizing": "content-box",
408 | 	  "break-after": "auto",
409 | 	  "break-before": "auto",
410 | 	  "break-inside": "auto",
411 | 	  "caption-side": "top",
412 | 	  "caret-color": "auto",
413 | 	  "clear": "none",
414 | 	  "clip": "auto",
415 | 	  "clip-path": "none",
416 | 	  "color": "initial",
417 | 	  "column-count": "auto",
418 | 	  "column-fill": "balance",
419 | 	  "column-gap": "normal",
420 | 	  "column-rule-color": "currentcolor",
421 | 	  "column-rule-style": "none",
422 | 	  "column-rule-width": "medium",
423 | 	  "column-span": "none",
424 | 	  "column-width": "auto",
425 | 	  "content": "normal",
426 | 	  "counter-increment": "none",
427 | 	  "counter-reset": "none",
428 | 	  "cursor": "auto",
429 | 	  "display": "inline",
430 | 	  "empty-cells": "show",
431 | 	  "filter": "none",
432 | 	  "flex-basis": "auto",
433 | 	  "flex-direction": "row",
434 | 	  "flex-grow": "0",
435 | 	  "flex-shrink": "1",
436 | 	  "flex-wrap": "nowrap",
437 | 	  "float": "none",
438 | 	  "font-family": "initial",
439 | 	  "font-feature-settings": "normal",
440 | 	  "font-kerning": "auto",
441 | 	  "font-language-override": "normal",
442 | 	  "font-size": "medium",
443 | 	  "font-size-adjust": "none",
444 | 	  "font-stretch": "normal",
445 | 	  "font-style": "normal",
446 | 	  "font-synthesis": "weight style",
447 | 	  "font-variant": "normal",
448 | 	  "font-variant-alternates": "normal",
449 | 	  "font-variant-caps": "normal",
450 | 	  "font-variant-east-asian": "normal",
451 | 	  "font-variant-ligatures": "normal",
452 | 	  "font-variant-numeric": "normal",
453 | 	  "font-variant-position": "normal",
454 | 	  "font-weight": "normal",
455 | 	  "grid-auto-columns": "auto",
456 | 	  "grid-auto-flow": "row",
457 | 	  "grid-auto-rows": "auto",
458 | 	  "grid-column-end": "auto",
459 | 	  "grid-column-gap": "0",
460 | 	  "grid-column-start": "auto",
461 | 	  "grid-row-end": "auto",
462 | 	  "grid-row-gap": "0",
463 | 	  "grid-row-start": "auto",
464 | 	  "grid-template-areas": "none",
465 | 	  "grid-template-columns": "none",
466 | 	  "grid-template-rows": "none",
467 | 	  "height": "auto",
468 | 	  "hyphens": "manual",
469 | 	  "image-orientation": "0deg",
470 | 	  "image-rendering": "auto",
471 | 	  "image-resolution": "1dppx",
472 | 	  "ime-mode": "auto",
473 | 	  "inline-size": "auto",
474 | 	  "isolation": "auto",
475 | 	  "justify-content": "flex-start",
476 | 	  "left": "auto",
477 | 	  "letter-spacing": "normal",
478 | 	  "line-break": "auto",
479 | 	  "line-height": "normal",
480 | 	  "list-style-image": "none",
481 | 	  "list-style-position": "outside",
482 | 	  "list-style-type": "disc",
483 | 	  "margin-block-end": "0",
484 | 	  "margin-block-start": "0",
485 | 	  "margin-bottom": "0",
486 | 	  "margin-inline-end": "0",
487 | 	  "margin-inline-start": "0",
488 | 	  "margin-left": "0",
489 | 	  "margin-right": "0",
490 | 	  "margin-top": "0",
491 | 	  "marker-offset": "auto",
492 | 	  "mask-clip": "border-box",
493 | 	  "mask-composite": "add",
494 | 	  "mask-image": "none",
495 | 	  "mask-mode": "match-source",
496 | 	  "mask-origin": "border-box",
497 | 	  "mask-position": "0% 0%",
498 | 	  "mask-repeat": "repeat",
499 | 	  "mask-size": "auto",
500 | 	  "mask-type": "luminance",
501 | 	  "max-height": "none",
502 | 	  "max-width": "none",
503 | 	  "min-block-size": "0",
504 | 	  "min-height": "0",
505 | 	  "min-inline-size": "0",
506 | 	  "min-width": "0",
507 | 	  "mix-blend-mode": "normal",
508 | 	  "object-fit": "fill",
509 | 	  "object-position": "50% 50%",
510 | 	  "offset-block-end": "auto",
511 | 	  "offset-block-start": "auto",
512 | 	  "offset-inline-end": "auto",
513 | 	  "offset-inline-start": "auto",
514 | 	  "opacity": "1.0",
515 | 	  "order": "0",
516 | 	  "orphans": "2",
517 | 	  "outline-color": "initial",
518 | 	  "outline-offset": "0",
519 | 	  "outline-style": "none",
520 | 	  "outline-width": "medium",
521 | 	  "overflow": "visible",
522 | 	  "overflow-clip-box": "padding-box",
523 | 	  "overflow-wrap": "normal",
524 | 	  "overflow-x": "visible",
525 | 	  "overflow-y": "visible",
526 | 	  "padding-block-end": "0",
527 | 	  "padding-block-start": "0",
528 | 	  "padding-bottom": "0",
529 | 	  "padding-inline-end": "0",
530 | 	  "padding-inline-start": "0",
531 | 	  "padding-left": "0",
532 | 	  "padding-right": "0",
533 | 	  "padding-top": "0",
534 | 	  "page-break-after": "auto",
535 | 	  "page-break-before": "auto",
536 | 	  "page-break-inside": "auto",
537 | 	  "perspective": "none",
538 | 	  "perspective-origin": "50% 50%",
539 | 	  "pointer-events": "auto",
540 | 	  "position": "static",
541 | 	  "quotes": "initial",
542 | 	  "resize": "none",
543 | 	  "right": "auto",
544 | 	  "ruby-align": "space-around",
545 | 	  "ruby-merge": "separate",
546 | 	  "ruby-position": "over",
547 | 	  "scroll-behavior": "auto",
548 | 	  "scroll-snap-coordinate": "none",
549 | 	  "scroll-snap-destination": "0px 0px",
550 | 	  "scroll-snap-points-x": "none",
551 | 	  "scroll-snap-points-y": "none",
552 | 	  "scroll-snap-type": "none",
553 | 	  "scroll-snap-type-x": "none",
554 | 	  "scroll-snap-type-y": "none",
555 | 	  "shape-image-threshold": "0.0",
556 | 	  "shape-margin": "0",
557 | 	  "shape-outside": "none",
558 | 	  "tab-size": "8",
559 | 	  "table-layout": "auto",
560 | 	  "text-align": "initial",
561 | 	  "text-align-last": "auto",
562 | 	  "text-combine-upright": "none",
563 | 	  "text-decoration-color": "currentcolor",
564 | 	  "text-decoration-line": "none",
565 | 	  "text-decoration-style": "solid",
566 | 	  "text-emphasis-color": "currentcolor",
567 | 	  "text-emphasis-position": "over right",
568 | 	  "text-emphasis-style": "none",
569 | 	  "text-indent": "0",
570 | 	  "text-justify": "auto",
571 | 	  "text-orientation": "mixed",
572 | 	  "text-overflow": "clip",
573 | 	  "text-rendering": "auto",
574 | 	  "text-shadow": "none",
575 | 	  "text-transform": "none",
576 | 	  "text-underline-position": "auto",
577 | 	  "top": "auto",
578 | 	  "touch-action": "auto",
579 | 	  "transform": "none",
580 | 	  "transform-box": "border-box ",
581 | 	  "transform-origin": "50% 50% 0",
582 | 	  "transform-style": "flat",
583 | 	  "transition-delay": "0s",
584 | 	  "transition-duration": "0s",
585 | 	  "transition-property": "all",
586 | 	  "transition-timing-function": "ease",
587 | 	  "user-select": "auto",
588 | 	  "vertical-align": "baseline",
589 | 	  "visibility": "visible",
590 | 	  "white-space": "normal",
591 | 	  "widows": "2",
592 | 	  "width": "auto",
593 | 	  "will-change": "auto",
594 | 	  "word-break": "normal",
595 | 	  "word-spacing": "normal",
596 | 	  "word-wrap": "normal",
597 | 	  "writing-mode": "horizontal-tb",
598 | 	  "z-index": "auto",
599 | 	  "-webkit-appearance": "none",
600 | 	  "-ms-appearance": "none",
601 | 	  "appearance": "none"
602 | 	};
603 | 
604 | /***/ })
605 | /******/ ])
606 | });
607 | ;
608 | //# sourceMappingURL=jss-isolate.js.map


--------------------------------------------------------------------------------
/jss-nested.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["jssNested"] = factory();
  8 | 	else
  9 | 		root["jssNested"] = factory();
 10 | })(this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			exports: {},
 25 | /******/ 			id: moduleId,
 26 | /******/ 			loaded: false
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.loaded = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// __webpack_public_path__
 47 | /******/ 	__webpack_require__.p = "";
 48 | /******/
 49 | /******/ 	// Load entry module and return exports
 50 | /******/ 	return __webpack_require__(0);
 51 | /******/ })
 52 | /************************************************************************/
 53 | /******/ ([
 54 | /* 0 */
 55 | /***/ (function(module, exports, __webpack_require__) {
 56 | 
 57 | 	'use strict';
 58 | 	
 59 | 	Object.defineProperty(exports, "__esModule", {
 60 | 	  value: true
 61 | 	});
 62 | 	
 63 | 	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 64 | 	
 65 | 	exports.default = jssNested;
 66 | 	
 67 | 	var _warning = __webpack_require__(1);
 68 | 	
 69 | 	var _warning2 = _interopRequireDefault(_warning);
 70 | 	
 71 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 72 | 	
 73 | 	var separatorRegExp = /\s*,\s*/g;
 74 | 	var parentRegExp = /&/g;
 75 | 	var refRegExp = /\$([\w-]+)/g;
 76 | 	
 77 | 	/**
 78 | 	 * Convert nested rules to separate, remove them from original styles.
 79 | 	 *
 80 | 	 * @param {Rule} rule
 81 | 	 * @api public
 82 | 	 */
 83 | 	function jssNested() {
 84 | 	  // Get a function to be used for $ref replacement.
 85 | 	  function getReplaceRef(container) {
 86 | 	    return function (match, key) {
 87 | 	      var rule = container.getRule(key);
 88 | 	      if (rule) return rule.selector;
 89 | 	      (0, _warning2.default)(false, '[JSS] Could not find the referenced rule %s in %s.', key, container.options.meta || container);
 90 | 	      return key;
 91 | 	    };
 92 | 	  }
 93 | 	
 94 | 	  var hasAnd = function hasAnd(str) {
 95 | 	    return str.indexOf('&') !== -1;
 96 | 	  };
 97 | 	
 98 | 	  function replaceParentRefs(nestedProp, parentProp) {
 99 | 	    var parentSelectors = parentProp.split(separatorRegExp);
100 | 	    var nestedSelectors = nestedProp.split(separatorRegExp);
101 | 	
102 | 	    var result = '';
103 | 	
104 | 	    for (var i = 0; i < parentSelectors.length; i++) {
105 | 	      var parent = parentSelectors[i];
106 | 	
107 | 	      for (var j = 0; j < nestedSelectors.length; j++) {
108 | 	        var nested = nestedSelectors[j];
109 | 	        if (result) result += ', ';
110 | 	        // Replace all & by the parent or prefix & with the parent.
111 | 	        result += hasAnd(nested) ? nested.replace(parentRegExp, parent) : parent + ' ' + nested;
112 | 	      }
113 | 	    }
114 | 	
115 | 	    return result;
116 | 	  }
117 | 	
118 | 	  function getOptions(rule, container, options) {
119 | 	    // Options has been already created, now we only increase index.
120 | 	    if (options) return _extends({}, options, { index: options.index + 1 });
121 | 	
122 | 	    var nestingLevel = rule.options.nestingLevel;
123 | 	
124 | 	    nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;
125 | 	
126 | 	    return _extends({}, rule.options, {
127 | 	      nestingLevel: nestingLevel,
128 | 	      index: container.indexOf(rule) + 1
129 | 	    });
130 | 	  }
131 | 	
132 | 	  function onProcessStyle(style, rule) {
133 | 	    if (rule.type !== 'style') return style;
134 | 	    var container = rule.options.parent;
135 | 	    var options = void 0;
136 | 	    var replaceRef = void 0;
137 | 	    for (var prop in style) {
138 | 	      var isNested = hasAnd(prop);
139 | 	      var isNestedConditional = prop[0] === '@';
140 | 	
141 | 	      if (!isNested && !isNestedConditional) continue;
142 | 	
143 | 	      options = getOptions(rule, container, options);
144 | 	
145 | 	      if (isNested) {
146 | 	        var selector = replaceParentRefs(prop, rule.selector
147 | 	        // Lazily create the ref replacer function just once for
148 | 	        // all nested rules within the sheet.
149 | 	        );if (!replaceRef) replaceRef = getReplaceRef(container
150 | 	        // Replace all $refs.
151 | 	        );selector = selector.replace(refRegExp, replaceRef);
152 | 	
153 | 	        container.addRule(selector, style[prop], _extends({}, options, { selector: selector }));
154 | 	      } else if (isNestedConditional) {
155 | 	        container
156 | 	        // Place conditional right after the parent rule to ensure right ordering.
157 | 	        .addRule(prop, null, options).addRule(rule.key, style[prop], { selector: rule.selector });
158 | 	      }
159 | 	
160 | 	      delete style[prop];
161 | 	    }
162 | 	
163 | 	    return style;
164 | 	  }
165 | 	
166 | 	  return { onProcessStyle: onProcessStyle };
167 | 	}
168 | 
169 | /***/ }),
170 | /* 1 */
171 | /***/ (function(module, exports, __webpack_require__) {
172 | 
173 | 	/**
174 | 	 * Copyright 2014-2015, Facebook, Inc.
175 | 	 * All rights reserved.
176 | 	 *
177 | 	 * This source code is licensed under the BSD-style license found in the
178 | 	 * LICENSE file in the root directory of this source tree. An additional grant
179 | 	 * of patent rights can be found in the PATENTS file in the same directory.
180 | 	 */
181 | 	
182 | 	'use strict';
183 | 	
184 | 	/**
185 | 	 * Similar to invariant but only logs a warning if the condition is not met.
186 | 	 * This can be used to log issues in development environments in critical
187 | 	 * paths. Removing the logging code for production environments will keep the
188 | 	 * same logic and follow the same code paths.
189 | 	 */
190 | 	
191 | 	var warning = function() {};
192 | 	
193 | 	if (true) {
194 | 	  warning = function(condition, format, args) {
195 | 	    var len = arguments.length;
196 | 	    args = new Array(len > 2 ? len - 2 : 0);
197 | 	    for (var key = 2; key < len; key++) {
198 | 	      args[key - 2] = arguments[key];
199 | 	    }
200 | 	    if (format === undefined) {
201 | 	      throw new Error(
202 | 	        '`warning(condition, format, ...args)` requires a warning ' +
203 | 	        'message argument'
204 | 	      );
205 | 	    }
206 | 	
207 | 	    if (format.length < 10 || (/^[s\W]*$/).test(format)) {
208 | 	      throw new Error(
209 | 	        'The warning format should be able to uniquely identify this ' +
210 | 	        'warning. Please, use a more descriptive format than: ' + format
211 | 	      );
212 | 	    }
213 | 	
214 | 	    if (!condition) {
215 | 	      var argIndex = 0;
216 | 	      var message = 'Warning: ' +
217 | 	        format.replace(/%s/g, function() {
218 | 	          return args[argIndex++];
219 | 	        });
220 | 	      if (typeof console !== 'undefined') {
221 | 	        console.error(message);
222 | 	      }
223 | 	      try {
224 | 	        // This error was thrown as a convenience so that you can use this stack
225 | 	        // to find the callsite that caused this warning to fire.
226 | 	        throw new Error(message);
227 | 	      } catch(x) {}
228 | 	    }
229 | 	  };
230 | 	}
231 | 	
232 | 	module.exports = warning;
233 | 
234 | 
235 | /***/ })
236 | /******/ ])
237 | });
238 | ;
239 | //# sourceMappingURL=jss-nested.js.map


--------------------------------------------------------------------------------
/jss-props-sort.js:
--------------------------------------------------------------------------------
 1 | (function webpackUniversalModuleDefinition(root, factory) {
 2 | 	if(typeof exports === 'object' && typeof module === 'object')
 3 | 		module.exports = factory();
 4 | 	else if(typeof define === 'function' && define.amd)
 5 | 		define([], factory);
 6 | 	else if(typeof exports === 'object')
 7 | 		exports["jssPropsSort"] = factory();
 8 | 	else
 9 | 		root["jssPropsSort"] = factory();
10 | })(this, function() {
11 | return /******/ (function(modules) { // webpackBootstrap
12 | /******/ 	// The module cache
13 | /******/ 	var installedModules = {};
14 | /******/
15 | /******/ 	// The require function
16 | /******/ 	function __webpack_require__(moduleId) {
17 | /******/
18 | /******/ 		// Check if module is in cache
19 | /******/ 		if(installedModules[moduleId])
20 | /******/ 			return installedModules[moduleId].exports;
21 | /******/
22 | /******/ 		// Create a new module (and put it into the cache)
23 | /******/ 		var module = installedModules[moduleId] = {
24 | /******/ 			exports: {},
25 | /******/ 			id: moduleId,
26 | /******/ 			loaded: false
27 | /******/ 		};
28 | /******/
29 | /******/ 		// Execute the module function
30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
31 | /******/
32 | /******/ 		// Flag the module as loaded
33 | /******/ 		module.loaded = true;
34 | /******/
35 | /******/ 		// Return the exports of the module
36 | /******/ 		return module.exports;
37 | /******/ 	}
38 | /******/
39 | /******/
40 | /******/ 	// expose the modules object (__webpack_modules__)
41 | /******/ 	__webpack_require__.m = modules;
42 | /******/
43 | /******/ 	// expose the module cache
44 | /******/ 	__webpack_require__.c = installedModules;
45 | /******/
46 | /******/ 	// __webpack_public_path__
47 | /******/ 	__webpack_require__.p = "";
48 | /******/
49 | /******/ 	// Load entry module and return exports
50 | /******/ 	return __webpack_require__(0);
51 | /******/ })
52 | /************************************************************************/
53 | /******/ ([
54 | /* 0 */
55 | /***/ function(module, exports) {
56 | 
57 | 	'use strict';
58 | 	
59 | 	Object.defineProperty(exports, "__esModule", {
60 | 	  value: true
61 | 	});
62 | 	exports['default'] = jssPropsSort;
63 | 	/**
64 | 	 * Sort props by length.
65 | 	 */
66 | 	function jssPropsSort() {
67 | 	  function sort(prop0, prop1) {
68 | 	    return prop0.length - prop1.length;
69 | 	  }
70 | 	
71 | 	  function onProcessStyle(style, rule) {
72 | 	    if (rule.type !== 'style') return style;
73 | 	
74 | 	    var newStyle = {};
75 | 	    var props = Object.keys(style).sort(sort);
76 | 	    for (var prop in props) {
77 | 	      newStyle[props[prop]] = style[props[prop]];
78 | 	    }
79 | 	    return newStyle;
80 | 	  }
81 | 	
82 | 	  return { onProcessStyle: onProcessStyle };
83 | 	}
84 | 
85 | /***/ }
86 | /******/ ])
87 | });
88 | ;
89 | //# sourceMappingURL=jss-props-sort.js.map


--------------------------------------------------------------------------------
/jss-vendor-prefixer.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["jssVendorPrefixer"] = factory();
  8 | 	else
  9 | 		root["jssVendorPrefixer"] = factory();
 10 | })(this, function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId])
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			exports: {},
 25 | /******/ 			id: moduleId,
 26 | /******/ 			loaded: false
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.loaded = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// __webpack_public_path__
 47 | /******/ 	__webpack_require__.p = "";
 48 | /******/
 49 | /******/ 	// Load entry module and return exports
 50 | /******/ 	return __webpack_require__(0);
 51 | /******/ })
 52 | /************************************************************************/
 53 | /******/ ([
 54 | /* 0 */
 55 | /***/ (function(module, exports, __webpack_require__) {
 56 | 
 57 | 	'use strict';
 58 | 	
 59 | 	Object.defineProperty(exports, "__esModule", {
 60 | 	  value: true
 61 | 	});
 62 | 	exports['default'] = jssVendorPrefixer;
 63 | 	
 64 | 	var _cssVendor = __webpack_require__(1);
 65 | 	
 66 | 	var vendor = _interopRequireWildcard(_cssVendor);
 67 | 	
 68 | 	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
 69 | 	
 70 | 	/**
 71 | 	 * Add vendor prefix to a property name when needed.
 72 | 	 *
 73 | 	 * @param {Rule} rule
 74 | 	 * @api public
 75 | 	 */
 76 | 	function jssVendorPrefixer() {
 77 | 	  function onProcessRule(rule) {
 78 | 	    if (rule.type === 'keyframes') {
 79 | 	      rule.key = '@' + vendor.prefix.css + rule.key.substr(1);
 80 | 	    }
 81 | 	  }
 82 | 	
 83 | 	  function onProcessStyle(style, rule) {
 84 | 	    if (rule.type !== 'style') return style;
 85 | 	
 86 | 	    for (var prop in style) {
 87 | 	      var value = style[prop];
 88 | 	
 89 | 	      var changeProp = false;
 90 | 	      var supportedProp = vendor.supportedProperty(prop);
 91 | 	      if (supportedProp && supportedProp !== prop) changeProp = true;
 92 | 	
 93 | 	      var changeValue = false;
 94 | 	      var supportedValue = vendor.supportedValue(supportedProp, value);
 95 | 	      if (supportedValue && supportedValue !== value) changeValue = true;
 96 | 	
 97 | 	      if (changeProp || changeValue) {
 98 | 	        if (changeProp) delete style[prop];
 99 | 	        style[supportedProp || prop] = supportedValue || value;
100 | 	      }
101 | 	    }
102 | 	
103 | 	    return style;
104 | 	  }
105 | 	
106 | 	  function onChangeValue(value, prop) {
107 | 	    return vendor.supportedValue(prop, value);
108 | 	  }
109 | 	
110 | 	  return { onProcessRule: onProcessRule, onProcessStyle: onProcessStyle, onChangeValue: onChangeValue };
111 | 	}
112 | 
113 | /***/ }),
114 | /* 1 */
115 | /***/ (function(module, exports, __webpack_require__) {
116 | 
117 | 	'use strict';
118 | 	
119 | 	Object.defineProperty(exports, "__esModule", {
120 | 	  value: true
121 | 	});
122 | 	exports.supportedValue = exports.supportedProperty = exports.prefix = undefined;
123 | 	
124 | 	var _prefix = __webpack_require__(2);
125 | 	
126 | 	var _prefix2 = _interopRequireDefault(_prefix);
127 | 	
128 | 	var _supportedProperty = __webpack_require__(4);
129 | 	
130 | 	var _supportedProperty2 = _interopRequireDefault(_supportedProperty);
131 | 	
132 | 	var _supportedValue = __webpack_require__(6);
133 | 	
134 | 	var _supportedValue2 = _interopRequireDefault(_supportedValue);
135 | 	
136 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
137 | 	
138 | 	exports['default'] = {
139 | 	  prefix: _prefix2['default'],
140 | 	  supportedProperty: _supportedProperty2['default'],
141 | 	  supportedValue: _supportedValue2['default']
142 | 	}; /**
143 | 	    * CSS Vendor prefix detection and property feature testing.
144 | 	    *
145 | 	    * @copyright Oleg Slobodskoi 2015
146 | 	    * @website https://github.com/jsstyles/css-vendor
147 | 	    * @license MIT
148 | 	    */
149 | 	
150 | 	exports.prefix = _prefix2['default'];
151 | 	exports.supportedProperty = _supportedProperty2['default'];
152 | 	exports.supportedValue = _supportedValue2['default'];
153 | 
154 | /***/ }),
155 | /* 2 */
156 | /***/ (function(module, exports, __webpack_require__) {
157 | 
158 | 	'use strict';
159 | 	
160 | 	Object.defineProperty(exports, "__esModule", {
161 | 	  value: true
162 | 	});
163 | 	
164 | 	var _isInBrowser = __webpack_require__(3);
165 | 	
166 | 	var _isInBrowser2 = _interopRequireDefault(_isInBrowser);
167 | 	
168 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
169 | 	
170 | 	var js = ''; /**
171 | 	              * Export javascript style and css style vendor prefixes.
172 | 	              * Based on "transform" support test.
173 | 	              */
174 | 	
175 | 	var css = '';
176 | 	
177 | 	// We should not do anything if required serverside.
178 | 	if (_isInBrowser2['default']) {
179 | 	  // Order matters. We need to check Webkit the last one because
180 | 	  // other vendors use to add Webkit prefixes to some properties
181 | 	  var jsCssMap = {
182 | 	    Moz: '-moz-',
183 | 	    // IE did it wrong again ...
184 | 	    ms: '-ms-',
185 | 	    O: '-o-',
186 | 	    Webkit: '-webkit-'
187 | 	  };
188 | 	  var style = document.createElement('p').style;
189 | 	  var testProp = 'Transform';
190 | 	
191 | 	  for (var key in jsCssMap) {
192 | 	    if (key + testProp in style) {
193 | 	      js = key;
194 | 	      css = jsCssMap[key];
195 | 	      break;
196 | 	    }
197 | 	  }
198 | 	}
199 | 	
200 | 	/**
201 | 	 * Vendor prefix string for the current browser.
202 | 	 *
203 | 	 * @type {{js: String, css: String}}
204 | 	 * @api public
205 | 	 */
206 | 	exports['default'] = { js: js, css: css };
207 | 
208 | /***/ }),
209 | /* 3 */
210 | /***/ (function(module, exports) {
211 | 
212 | 	"use strict";
213 | 	
214 | 	Object.defineProperty(exports, "__esModule", {
215 | 	    value: true
216 | 	});
217 | 	
218 | 	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
219 | 	
220 | 	var isBrowser = exports.isBrowser = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object" && (typeof document === "undefined" ? "undefined" : _typeof(document)) === 'object' && document.nodeType === 9;
221 | 	
222 | 	exports.default = isBrowser;
223 | 
224 | /***/ }),
225 | /* 4 */
226 | /***/ (function(module, exports, __webpack_require__) {
227 | 
228 | 	'use strict';
229 | 	
230 | 	Object.defineProperty(exports, "__esModule", {
231 | 	  value: true
232 | 	});
233 | 	exports['default'] = supportedProperty;
234 | 	
235 | 	var _isInBrowser = __webpack_require__(3);
236 | 	
237 | 	var _isInBrowser2 = _interopRequireDefault(_isInBrowser);
238 | 	
239 | 	var _prefix = __webpack_require__(2);
240 | 	
241 | 	var _prefix2 = _interopRequireDefault(_prefix);
242 | 	
243 | 	var _camelize = __webpack_require__(5);
244 | 	
245 | 	var _camelize2 = _interopRequireDefault(_camelize);
246 | 	
247 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
248 | 	
249 | 	var el = void 0;
250 | 	var cache = {};
251 | 	
252 | 	if (_isInBrowser2['default']) {
253 | 	  el = document.createElement('p');
254 | 	
255 | 	  /**
256 | 	   * We test every property on vendor prefix requirement.
257 | 	   * Once tested, result is cached. It gives us up to 70% perf boost.
258 | 	   * http://jsperf.com/element-style-object-access-vs-plain-object
259 | 	   *
260 | 	   * Prefill cache with known css properties to reduce amount of
261 | 	   * properties we need to feature test at runtime.
262 | 	   * http://davidwalsh.name/vendor-prefix
263 | 	   */
264 | 	  var computed = window.getComputedStyle(document.documentElement, '');
265 | 	  for (var key in computed) {
266 | 	    if (!isNaN(key)) cache[computed[key]] = computed[key];
267 | 	  }
268 | 	}
269 | 	
270 | 	/**
271 | 	 * Test if a property is supported, returns supported property with vendor
272 | 	 * prefix if required. Returns `false` if not supported.
273 | 	 *
274 | 	 * @param {String} prop dash separated
275 | 	 * @return {String|Boolean}
276 | 	 * @api public
277 | 	 */
278 | 	function supportedProperty(prop) {
279 | 	  // For server-side rendering.
280 | 	  if (!el) return prop;
281 | 	
282 | 	  // We have not tested this prop yet, lets do the test.
283 | 	  if (cache[prop] != null) return cache[prop];
284 | 	
285 | 	  // Camelization is required because we can't test using
286 | 	  // css syntax for e.g. in FF.
287 | 	  // Test if property is supported as it is.
288 | 	  if ((0, _camelize2['default'])(prop) in el.style) {
289 | 	    cache[prop] = prop;
290 | 	  }
291 | 	  // Test if property is supported with vendor prefix.
292 | 	  else if (_prefix2['default'].js + (0, _camelize2['default'])('-' + prop) in el.style) {
293 | 	      cache[prop] = _prefix2['default'].css + prop;
294 | 	    } else {
295 | 	      cache[prop] = false;
296 | 	    }
297 | 	
298 | 	  return cache[prop];
299 | 	}
300 | 
301 | /***/ }),
302 | /* 5 */
303 | /***/ (function(module, exports) {
304 | 
305 | 	'use strict';
306 | 	
307 | 	Object.defineProperty(exports, "__esModule", {
308 | 	  value: true
309 | 	});
310 | 	exports['default'] = camelize;
311 | 	var regExp = /[-\s]+(.)?/g;
312 | 	
313 | 	/**
314 | 	 * Convert dash separated strings to camel cased.
315 | 	 *
316 | 	 * @param {String} str
317 | 	 * @return {String}
318 | 	 */
319 | 	function camelize(str) {
320 | 	  return str.replace(regExp, toUpper);
321 | 	}
322 | 	
323 | 	function toUpper(match, c) {
324 | 	  return c ? c.toUpperCase() : '';
325 | 	}
326 | 
327 | /***/ }),
328 | /* 6 */
329 | /***/ (function(module, exports, __webpack_require__) {
330 | 
331 | 	'use strict';
332 | 	
333 | 	Object.defineProperty(exports, "__esModule", {
334 | 	  value: true
335 | 	});
336 | 	exports['default'] = supportedValue;
337 | 	
338 | 	var _isInBrowser = __webpack_require__(3);
339 | 	
340 | 	var _isInBrowser2 = _interopRequireDefault(_isInBrowser);
341 | 	
342 | 	var _prefix = __webpack_require__(2);
343 | 	
344 | 	var _prefix2 = _interopRequireDefault(_prefix);
345 | 	
346 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
347 | 	
348 | 	var cache = {};
349 | 	var el = void 0;
350 | 	
351 | 	if (_isInBrowser2['default']) el = document.createElement('p');
352 | 	
353 | 	/**
354 | 	 * Returns prefixed value if needed. Returns `false` if value is not supported.
355 | 	 *
356 | 	 * @param {String} property
357 | 	 * @param {String} value
358 | 	 * @return {String|Boolean}
359 | 	 * @api public
360 | 	 */
361 | 	function supportedValue(property, value) {
362 | 	  // For server-side rendering.
363 | 	  if (!el) return value;
364 | 	
365 | 	  // It is a string or a number as a string like '1'.
366 | 	  // We want only prefixable values here.
367 | 	  if (typeof value !== 'string' || !isNaN(parseInt(value, 10))) return value;
368 | 	
369 | 	  var cacheKey = property + value;
370 | 	
371 | 	  if (cache[cacheKey] != null) return cache[cacheKey];
372 | 	
373 | 	  // IE can even throw an error in some cases, for e.g. style.content = 'bar'
374 | 	  try {
375 | 	    // Test value as it is.
376 | 	    el.style[property] = value;
377 | 	  } catch (err) {
378 | 	    cache[cacheKey] = false;
379 | 	    return false;
380 | 	  }
381 | 	
382 | 	  // Value is supported as it is.
383 | 	  if (el.style[property] !== '') {
384 | 	    cache[cacheKey] = value;
385 | 	  } else {
386 | 	    // Test value with vendor prefix.
387 | 	    value = _prefix2['default'].css + value;
388 | 	
389 | 	    // Hardcode test to convert "flex" to "-ms-flexbox" for IE10.
390 | 	    if (value === '-ms-flex') value = '-ms-flexbox';
391 | 	
392 | 	    el.style[property] = value;
393 | 	
394 | 	    // Value is supported with vendor prefix.
395 | 	    if (el.style[property] !== '') cache[cacheKey] = value;
396 | 	  }
397 | 	
398 | 	  if (!cache[cacheKey]) cache[cacheKey] = false;
399 | 	
400 | 	  // Reset style value.
401 | 	  el.style[property] = '';
402 | 	
403 | 	  return cache[cacheKey];
404 | 	}
405 | 
406 | /***/ })
407 | /******/ ])
408 | });
409 | ;
410 | //# sourceMappingURL=jss-vendor-prefixer.js.map


--------------------------------------------------------------------------------
/observables/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Observable values in JSS</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |     <style>
 8 |       html, body {
 9 |         overflow: hidden;
10 |       }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/observables" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
15 |     <script src="./dist/app.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/observables/index.js:
--------------------------------------------------------------------------------
 1 | import {Observable} from 'rxjs'
 2 | import jss from 'jss'
 3 | import preset from 'jss-preset-default'
 4 | 
 5 | jss.setup(preset())
 6 | 
 7 | const renderBox = () => {
 8 |   const box = document.createElement('div')
 9 |   box.textContent = 'Drag me'
10 |   return box
11 | }
12 | 
13 | const getPosition = (box) => {
14 |   // Create event streams. Note no event listeners are created at this point.
15 |   const mousedown$ = Observable.fromEvent(box, 'mousedown')
16 |   const mousemove$ = Observable.fromEvent(box.ownerDocument, 'mousemove')
17 |   const mouseup$ = Observable.fromEvent(box, 'mouseup')
18 | 
19 |   // Now mousedown event listener will be created.
20 |   return mousedown$.switchMap((md) => {
21 |     const startX = md.clientX + window.scrollX
22 |     const startY = md.clientY + window.scrollY
23 |     const style = getComputedStyle(md.target)
24 |     const startLeft = parseInt(style.left, 10) || 0
25 |     const startTop = parseInt(style.top, 10) || 0
26 | 
27 |     // Now mousemove event listener is will be created.
28 |     return mousemove$
29 |       // Convert the event to object to a position object.
30 |       .map(mm => ({
31 |         left: startLeft + mm.clientX - startX,
32 |         top: startTop + mm.clientY - startY
33 |       }))
34 |       // As soon as mouseup event occurs, mousemove listener will be removed.
35 |       .takeUntil(mouseup$)
36 |   })
37 | }
38 | 
39 | const renderStyles = (pos$) => {
40 |   // Create the style sheet.
41 |   const {classes} = jss.createStyleSheet({
42 |     box: {
43 |       position: 'absolute',
44 |       width: 100,
45 |       height: 100,
46 |       background: 'black',
47 |       color: 'white',
48 |       cursor: 'move',
49 |       display: 'flex',
50 |       'align-items': 'center',
51 |       'justify-content': 'center',
52 |       top: pos$.map(pos => pos.top),
53 |       left: pos$.map(pos => pos.left)
54 |     }
55 |   // Use option `link: true` in order to connect CSSStyleRule with the JSS StyleRule.
56 |   }, {link: true}).attach()
57 | 
58 |   return classes.box
59 | }
60 | 
61 | const mount = () => {
62 |   const box = renderBox()
63 |   const pos$ = getPosition(box)
64 |   box.className = renderStyles(pos$)
65 |   document.body.appendChild(box)
66 | }
67 | 
68 | mount()
69 | 


--------------------------------------------------------------------------------
/observables/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var webpack = require('webpack')
 4 | var path = require('path')
 5 | 
 6 | module.exports = {
 7 |   entry: path.join(__dirname, 'index.js'),
 8 |   output: {
 9 |     path: path.join(__dirname, './dist'),
10 |     filename: 'app.js'
11 |   },
12 |   module: {
13 |     loaders: [
14 |       {
15 |         loader: 'babel-loader',
16 |         test: /\.js$/,
17 |         exclude: /node_modules/
18 |       }
19 |     ]
20 |   },
21 |   devtool: 'cheap-source-map'
22 | }
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "examples",
 3 |   "description": "JSS Examples",
 4 |   "version": "2.1.0",
 5 |   "private": true,
 6 |   "author": {
 7 |     "name": "Oleg Slobodskoi",
 8 |     "email": "oleg008@gmail.com"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git@github.com:cssinjs/examples.git"
13 |   },
14 |   "license": "MIT",
15 |   "engines": {
16 |     "node": ">=0.8.0"
17 |   },
18 |   "devDependencies": {
19 |     "babel-cli": "^6.10.1",
20 |     "babel-core": "^6.9.1",
21 |     "babel-eslint": "^8.0.1",
22 |     "babel-loader": "^7.1.2",
23 |     "babel-preset-es2015": "^6.9.0",
24 |     "babel-preset-react": "^6.5.0",
25 |     "babel-preset-stage-0": "^6.5.0",
26 |     "bootstrap": "^3.3.7",
27 |     "cpy": "^6.0.0",
28 |     "jss": "^9.3.3",
29 |     "jss-camel-case": "^6.0.0",
30 |     "jss-default-unit": "^8.0.0",
31 |     "jss-extend": "^6.0.1",
32 |     "jss-global": "^3.0.0",
33 |     "jss-isolate": "^5.0.0",
34 |     "jss-nested": "^6.0.1",
35 |     "jss-preset-default": "^4.0.1",
36 |     "jss-props-sort": "^6.0.0",
37 |     "jss-vendor-prefixer": "^7.0.0",
38 |     "lodash": "^4.17.4",
39 |     "parallelshell": "^3.0.2",
40 |     "perdido": "^2.0.0",
41 |     "react": "^16.0.0",
42 |     "react-dom": "^16.0.0",
43 |     "react-jss": "^8.1.0",
44 |     "rxjs": "^5.4.3",
45 |     "stats.js": "^0.17.0",
46 |     "webpack": "^3.8.1"
47 |   },
48 |   "scripts": {
49 |     "build": "npm run build:calendar && npm run build:react-ssr && npm run build:function-values && npm run build:observables && npm run build:swinging-cat && npm run build:swinging-cat-rx",
50 |     "build:calendar": "webpack ./calendar/index.js ./calendar/dist/index.js --config ./calendar/webpack.config.js",
51 |     "build:react-ssr": "webpack --config ./react-ssr/webpack.config.js && node ./react-ssr/bin/build > ./react-ssr/dist/index.html",
52 |     "build:function-values": "webpack --config ./function-values/webpack.config.js",
53 |     "build:observables": "webpack --config ./observables/webpack.config.js",
54 |     "build:swinging-cat": "webpack --config ./swinging-cat/webpack.config.js",
55 |     "build:swinging-cat-rx": "webpack --config ./swinging-cat-rx/webpack.config.js",
56 |     "jss:all": "parallelshell 'npm run jss -s' 'npm run jss:plugins -s'",
57 |     "jss": "cpy ./node_modules/jss/dist/jss.js ./",
58 |     "jss:plugins": "parallelshell 'npm run jss:camel-case -s' 'npm run jss:extend -s' 'npm run jss:nested -s' 'npm run jss:props-sort -s' 'npm run jss:default-unit -s' 'npm run jss:vendor-prefixer -s' 'npm run jss:perdido -s' 'npm run jss:isolate -s' 'npm run jss:global -s' 'npm run jss:preset-default -s'",
59 |     "jss:camel-case": "cpy ./node_modules/jss-camel-case/dist/jss-camel-case.js ./",
60 |     "jss:extend": "cpy ./node_modules/jss-extend/dist/jss-extend.js ./",
61 |     "jss:isolate": "cpy ./node_modules/jss-isolate/dist/jss-isolate.js ./",
62 |     "jss:nested": "cpy ./node_modules/jss-nested/dist/jss-nested.js ./",
63 |     "jss:props-sort": "cpy ./node_modules/jss-props-sort/dist/jss-props-sort.js ./",
64 |     "jss:default-unit": "cpy ./node_modules/jss-default-unit/dist/jss-default-unit.js ./",
65 |     "jss:vendor-prefixer": "cpy ./node_modules/jss-vendor-prefixer/dist/jss-vendor-prefixer.js ./",
66 |     "jss:global": "cpy ./node_modules/jss-global/dist/jss-global.js ./",
67 |     "jss:preset-default": "cpy ./node_modules/jss-preset-default/dist/jss-preset-default.js ./",
68 |     "jss:perdido": "cpy ./node_modules/perdido/dist/perdido.js ./",
69 |     "prepublishOnly": "NODE_ENV=production npm run jss:all && npm run build"
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/perdido/app.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   //Setup JSS
 3 |   var jss = window.jss.default,
 4 |       jssPreset = window.jssPreset.default,
 5 |       perdido = window.perdido.default
 6 | 
 7 |   jss.setup(jssPreset())
 8 | 
 9 |   // Get the template
10 |   var template = document.getElementById('template').innerHTML;
11 | 
12 |   // Attach the reset styles.
13 |   var sheet = jss.createStyleSheet(window.styles).attach()
14 | 
15 |   var div = document.body.appendChild(document.createElement('div'))
16 |   // Replace the class names with the JSS generated ones.
17 |   div.innerHTML = template
18 |     .replace('{awesomeHeader}', sheet.classes.awesomeHeader)
19 |     .replace('{coolDescription}',
20 |       `${sheet.classes.coolDescription} ${sheet.classes.centerSections}`)
21 |     .replace('{fourUp}',
22 |       `${sheet.classes.fourUp} ${sheet.classes.centerSections}`)
23 |     .replace('{offset}',
24 |       `${sheet.classes.offset} ${sheet.classes.centerSections}`)
25 |     .replace('{nested}',
26 |       `${sheet.classes.nested} ${sheet.classes.centerSections}`)
27 |     .replace('{aligned}',
28 |       `${sheet.classes.aligned} ${sheet.classes.centerSections}`)
29 |     .replace('{cycled}',
30 |       `${sheet.classes.cycled} ${sheet.classes.centerSections}`)
31 |     .replace('{vertical}',
32 |       `${sheet.classes.vertical} ${sheet.classes.centerSections}`)
33 |     .replace('{mmmWaffles}',
34 |       `${sheet.classes.mmmWaffles} ${sheet.classes.centerSections}`)
35 |     .replace('{diffSizes}',
36 |       `${sheet.classes.diffSizes} ${sheet.classes.centerSections}`)
37 |     .replace('{reordered}',
38 |       `${sheet.classes.reordered} ${sheet.classes.centerSections}`)
39 |     .replace(/\{purdyArticles\}/g, sheet.classes.purdyArticles);
40 | }())
41 | 


--------------------------------------------------------------------------------
/perdido/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Perdido Demo</title>
  5 |     <meta charset="utf-8" />
  6 |     <link rel="stylesheet" href="../example.css" />
  7 |   </head>
  8 |   <body>
  9 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/perdido" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
 10 | 
 11 |     <script id="template" type="text">
 12 |       <header class="{awesomeHeader}">
 13 |         <h2><a href="https://github.com/wldcordeiro/perdido">Perdido Grid</a></h2>
 14 |       </header>
 15 | 
 16 |       <div class="{coolDescription}">
 17 |         <p>Description here.</p>
 18 |       </div>
 19 | 
 20 |       <!-- Simple 1/4 -->
 21 |       <section class="{fourUp}">
 22 |         <article class="{purdyArticles}">1</article>
 23 |         <article class="{purdyArticles}">2</article>
 24 |         <article class="{purdyArticles}">3</article>
 25 |         <article class="{purdyArticles}">4</article>
 26 |         <article class="{purdyArticles}">5</article>
 27 |         <article class="{purdyArticles}">6</article>
 28 |       </section>
 29 | 
 30 |       <!-- Offset -->
 31 |       <section class="{offset}">
 32 |         <article class="{purdyArticles}">1</article>
 33 |         <article class="{purdyArticles}">2</article>
 34 |       </section>
 35 | 
 36 |       <!-- Nesting -->
 37 |       <section class="{nested}">
 38 |         <article class="{purdyArticles}">a</article>
 39 |         <article class="{purdyArticles}">a</article>
 40 |         <article class="{purdyArticles}">
 41 |           <article class="{purdyArticles}">b</article>
 42 |           <article class="{purdyArticles}">b</article>
 43 |         </article>
 44 |       </section>
 45 | 
 46 |       <!-- Alignment -->
 47 |       <section class="{aligned}">
 48 |         <article class="{purdyArticles}">1</article>
 49 |       </section>
 50 | 
 51 |       <!-- Cycle -->
 52 |       <section class="{cycled}">
 53 |         <article class="{purdyArticles}">
 54 |         1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem rem nam dolore repellendus provident, voluptas necessitatibus vel cupiditate delectus, doloremque incidunt accusantium quia! Nisi molestiae totam natus, in assumenda accusantium.
 55 |         </article>
 56 |         <article class="{purdyArticles}">
 57 |         2 - Lorem ipsum dolor sit amet.
 58 |         </article>
 59 |         <article class="{purdyArticles}">
 60 |         3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. At sunt harum ut rerum id quae voluptas velit iusto quasi distinctio.
 61 |         </article>
 62 |         <article class="{purdyArticles}">
 63 |         4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, sequi?
 64 |         </article>
 65 |         <article class="{purdyArticles}">
 66 |         5 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime nisi deserunt, dolorem accusamus sint ipsam dolor quae ab animi assumenda architecto placeat possimus fugit doloribus vel, corporis amet aliquam maiores!
 67 |         </article>
 68 |         <article class="{purdyArticles}">
 69 |         6 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 70 |         </article>
 71 |       </section>
 72 | 
 73 |       <!-- Vertical Grid -->
 74 |       <section class="{vertical}">
 75 |         <article class="{purdyArticles}">1</article>
 76 |         <article class="{purdyArticles}">2</article>
 77 |         <article class="{purdyArticles}">3</article>
 78 |       </section>
 79 | 
 80 |       <!-- Waffle Grid -->
 81 |       <section class="{mmmWaffles}">
 82 |         <article>1</article>
 83 |         <article>2</article>
 84 |         <article>3</article>
 85 |         <article>4</article>
 86 |         <article>5</article>
 87 |         <article>6</article>
 88 |         <article>7</article>
 89 |         <article>8</article>
 90 |         <article>9</article>
 91 |         <article>10</article>
 92 |         <article>11</article>
 93 |         <article>12</article>
 94 |         <article>13</article>
 95 |         <article>14</article>
 96 |         <article>15</article>
 97 |       </section>
 98 | 
 99 |       <!-- Varying sizes -->
100 |       <section class="{diffSizes}">
101 |         <article class="{purdyArticles}">1</article>
102 |         <article class="{purdyArticles}">2</article>
103 |       </section>
104 | 
105 |       <!-- Source Ordering -->
106 |       <section class="{reordered}">
107 |         <article class="{purdyArticles}">1</article>
108 |         <article class="{purdyArticles}">2</article>
109 |       </section>
110 |     </script>
111 | 
112 |     <script src="../jss.js"></script>
113 |     <script src="../jss-preset-default.js"></script>
114 |     <script src="../perdido.js"></script>
115 |     <script src="./styles.js"></script>
116 |     <script src="./app.js"></script>
117 |   </body>
118 | </html>
119 | 


--------------------------------------------------------------------------------
/perdido/styles.js:
--------------------------------------------------------------------------------
  1 | var blockMar = 30
  2 | 
  3 | window.styles = {
  4 |   '@global': {
  5 |     '*, *:after, *:before': {
  6 |       boxSizing: 'border-box',
  7 |       padding: 0,
  8 |       margin: 0
  9 |     },
 10 | 
 11 |     html: {
 12 |       fontWeight: 'bold',
 13 |       color: '#FFFFFF',
 14 |       padding: blockMar,
 15 |       height: 'auto',
 16 |       overflowY: 'scroll',
 17 |       overflowX: 'hidden',
 18 |     },
 19 | 
 20 |     body: {
 21 |       width: '100%',
 22 |       overflowX: 'hidden',
 23 |       margin: 0,
 24 |       '*zoom': 1,
 25 | 
 26 |       '&:after, :before': {
 27 |         content: '""',
 28 |         display: 'table',
 29 |       },
 30 | 
 31 |       '&:after': {
 32 |         clear: 'both'
 33 |       }
 34 |     },
 35 | 
 36 |     'section:last-of-type': {
 37 |       marginBottom: 0,
 38 |     }
 39 |   },
 40 |   // Header
 41 |   awesomeHeader: {
 42 |     textAlign: 'center',
 43 |     marginTop: 20
 44 |   },
 45 | 
 46 |   // Description
 47 |   coolDescription: {
 48 |     fontWeight: 'bold'
 49 |   },
 50 |   // Grid examples
 51 | 
 52 |   centerSections: {
 53 |     extend: perdido.center('1140px'),
 54 |     marginTop: blockMar,
 55 |     marginBottom: blockMar,
 56 |   },
 57 | 
 58 |   purdyArticles: {
 59 |     height: 100,
 60 |     lineHeight: '100px',
 61 |     textAlign: 'center',
 62 |     marginTop: blockMar / 2,
 63 |     marginBottom: blockMar / 2,
 64 | 
 65 |     '& article': {
 66 |       marginTop: 0,
 67 |       marginBottom: 0,
 68 |     }
 69 |   },
 70 | 
 71 |   // Simple 1/4
 72 |   fourUp: {
 73 |     background: '#FD7442',
 74 |     '& article': {
 75 |       background: '#FD5C22',
 76 |       extend: perdido.column('1/1'),
 77 |     },
 78 |   },
 79 | 
 80 |   // Offset
 81 |   offset: {
 82 |     background: '#BA6D66',
 83 |     '& article': {
 84 |       background: '#B15A52',
 85 |       extend: perdido.column('1/3'),
 86 |       '&:first-child': {
 87 |         extend: perdido.offset('1/3')
 88 |       }
 89 |     }
 90 |   },
 91 | 
 92 |   // Nesting
 93 |   nested: {
 94 |     background: '#B18EA2',
 95 |     '& article': {
 96 |       extend: perdido.column('1/3'),
 97 |       background: '#A47B92',
 98 | 
 99 |       '& article': {
100 |         extend: perdido.column('1/2'),
101 |         background: '#976883',
102 |       }
103 |     }
104 |   },
105 | 
106 |   // Alignment
107 |   aligned: {
108 |     extend: perdido.align('center'),
109 |     background: '#D1EFF0',
110 |     height: 300,
111 |     '& article': {
112 |       extend: perdido.column('1/3'),
113 |       background: '#AFE3E5',
114 |       marginTop: 0,
115 |       marginBottom: 0,
116 |     }
117 |   },
118 | 
119 |   // Cycle
120 |   cycled: {
121 |     background: '#3E95F1',
122 | 
123 |     '& article': {
124 |       extend: perdido.column('2/8', {cycle: 4}),
125 |       height: 'auto',
126 |       lineHeight: '25px',
127 |       fontWeight: 'normal',
128 |       padding: blockMar / 2,
129 |       background: '#2285EF'
130 |     }
131 |   },
132 | 
133 |   // Vertical Grid
134 |   vertical: {
135 |     background: '#FF8F1E',
136 | 
137 |     '& article': {
138 |       extend: perdido.row('1/3'),
139 |       marginTop: 0,
140 |       background: '#FF8001',
141 |       padding: 30
142 |     }
143 |   },
144 | 
145 |   // Waffle Grid
146 |   mmmWaffles: {
147 |     background: '#47E3FF',
148 | 
149 |     '& article': {
150 |       background: '#26DEFF',
151 |       extend: perdido.waffle('1/3'),
152 |       marginTop: 0,
153 |       lineHeight: 'inherit',
154 |       padding: blockMar
155 |     }
156 |   },
157 | 
158 |   // Varying Sizes
159 |   diffSizes: {
160 |     background: '#FF0080',
161 | 
162 |     '& article': {
163 |       background: '#E60073',
164 | 
165 |       '&:first-child': {
166 |         extend: perdido.column('1/3')
167 |       },
168 |       '&:last-child': {
169 |         extend: perdido.column('2/3')
170 |       }
171 |     }
172 |   },
173 | 
174 |   // Source Ordering
175 |   reordered: {
176 |     background: '#A0615F',
177 | 
178 |     '& article': {
179 |       background: '#905856',
180 |       extend: perdido.column('1/2'),
181 |     }
182 |   },
183 | 
184 |   // Media Queries
185 |   '@media (min-width: 500px)': {
186 |     fourUp: {
187 |       '& article': {
188 |         extend: perdido.column('1/2'),
189 |       }
190 |     }
191 |   },
192 | 
193 |   '@media (min-width: 800px)': {
194 |     fourUp: {
195 |       '& article': {
196 |         extend: perdido.column('1/3'),
197 |       }
198 |     },
199 |     reordered: {
200 |       '& article': {
201 |         '&:first-child': {
202 |           extend: perdido.move('1/2')
203 |         },
204 |         '&:last-child': {
205 |           extend: perdido.move('-1/2')
206 |         }
207 |       }
208 |     },
209 |   },
210 | 
211 |   '@media (min-width: 1100px)': {
212 |     fourUp: {
213 |       '& article': {
214 |         extend: perdido.column('1/4'),
215 |       }
216 |     }
217 |   },
218 | }
219 | 


--------------------------------------------------------------------------------
/plugins/jss-camel-case/simple/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   button: {
 4 |     fontSize: '50px',
 5 |     zIndex: 1,
 6 |     lineHeight: 1.2
 7 |   }
 8 | }
 9 | 
10 | // JSS Setup
11 | jss.default.use(jssCamelCase.default())
12 | var sheet = jss.default.createStyleSheet(styles).attach()
13 | 
14 | // Application logic.
15 | var div = document.body.appendChild(document.createElement('div'))
16 | div.innerHTML = '<button class="'+ sheet.classes.button +'">Button</button>'
17 | 


--------------------------------------------------------------------------------
/plugins/jss-camel-case/simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Simple example - jss-camel-case plugin</title>
 6 |   <link rel="stylesheet" href="../../../example.css" />
 7 | </head>
 8 | <body>
 9 |   <a href="https://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-camel-case/simple" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 | 
11 |   <script src="../../../jss.js"></script>
12 |   <script src="../../../jss-camel-case.js"></script>
13 |   <script src="./app.js"></script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/plugins/jss-default-unit/simple/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   button: {
 4 |     'font-size': 20,
 5 |     'z-index': 1,
 6 |     'line-height': 1.2
 7 |   }
 8 | }
 9 | 
10 | // JSS Setup
11 | jss.default.use(jssDefaultUnit.default())
12 | var sheet = jss.default.createStyleSheet(styles).attach()
13 | 
14 | // Application logic.
15 | var div = document.body.appendChild(document.createElement('div'))
16 | div.innerHTML = '<button class="'+ sheet.classes.button +'">Button</button>'
17 | 


--------------------------------------------------------------------------------
/plugins/jss-default-unit/simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Simple example - jss-default-unit plugin</title>
 6 |   <link rel="stylesheet" href="../../../example.css" />
 7 | </head>
 8 | <body>
 9 |   <a href="https://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-default-unit/simple" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 | 
11 |   <script src="../../../jss.js"></script>
12 |   <script src="../../../jss-default-unit.js"></script>
13 |   <script src="./app.js"></script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/plugins/jss-extend/multi/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var button0 = {
 3 |   padding: '20px',
 4 |   background: 'blue'
 5 | }
 6 | 
 7 | var redButton = {
 8 |   background: 'red'
 9 | }
10 | 
11 | var styles = {
12 |   button0: button0,
13 |   button1: {
14 |     extend: [button0, redButton],
15 |     'font-size': '20px'
16 |   }
17 | }
18 | 
19 | // JSS Setup
20 | jss.default.use(jssExtend.default())
21 | var sheet = jss.default.createStyleSheet(styles).attach()
22 | 
23 | 
24 | // Application logic.
25 | var div = document.body.appendChild(document.createElement('div'))
26 | div.innerHTML = '\
27 |   <button class="'+ sheet.classes.button0 +'">Button 1</button>\
28 |   <button class="'+ sheet.classes.button1 +'">Button 2</button>\
29 | '
30 | 


--------------------------------------------------------------------------------
/plugins/jss-extend/multi/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Multi example - jss-extend plugin</title>
 6 |   <link rel="stylesheet" href="../../../example.css" />
 7 | </head>
 8 | <body>
 9 |   <a href="https://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-extend/multi" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 | 
11 |   <script src="../../../jss.js"></script>
12 |   <script src="../../../jss-extend.js"></script>
13 |   <script src="./app.js"></script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/plugins/jss-extend/simple/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   button: {
 4 |     'font-size': '20px'
 5 |   },
 6 |   redButton: {
 7 |     extend: 'button',
 8 |     background: 'red'
 9 |   }
10 | }
11 | 
12 | // JSS Setup
13 | jss.default.use(jssExtend.default())
14 | var sheet = jss.default.createStyleSheet(styles).attach()
15 | 
16 | // Application logic.
17 | var div = document.body.appendChild(document.createElement('div'))
18 | div.innerHTML = '<button class="'+ sheet.classes.redButton +'">Button</button>'
19 | 


--------------------------------------------------------------------------------
/plugins/jss-extend/simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Simple example - jss-extend plugin</title>
 6 |   <link rel="stylesheet" href="../../../example.css" />
 7 | </head>
 8 | <body>
 9 |   <a href="https://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-extend/simple" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 | 
11 |   <script src="../../../jss.js"></script>
12 |   <script src="../../../jss-extend.js"></script>
13 |   <script src="./app.js"></script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/plugins/jss-global/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   '@global': {
 4 |     '.square': {
 5 |       float: 'left',
 6 |       width: '100px',
 7 |       height: '100px',
 8 |       background: 'red'
 9 |     }
10 |   }
11 | }
12 | 
13 | // Application logic.
14 | var sheet = jss.default.use(jssGlobal.default()).createStyleSheet(styles).attach()
15 | var div = document.body.appendChild(document.createElement('div'))
16 | div.innerHTML = '\
17 |   <div class="square">\
18 |     <button>Detach</button>\
19 |     <button>Attach</button>\
20 |   </div>\
21 | '
22 | 
23 | var buttons = document.getElementsByTagName('button')
24 | 
25 | buttons[0].addEventListener('click', function() {
26 |   sheet.detach()
27 | })
28 | 
29 | buttons[1].addEventListener('click', function() {
30 |   sheet.attach()
31 | })
32 | 


--------------------------------------------------------------------------------
/plugins/jss-global/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>jss-global example</title>
 6 |     <link rel="stylesheet" href="../../example.css" />
 7 |   </head>
 8 |   <body>
 9 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-global" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 |     <script src="../../jss.js"></script>
11 |     <script src="../../jss-global.js"></script>
12 |     <script src="./app.js"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/plugins/jss-isolate/simple/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |     button: {
 4 |       'background-color': '#50ee50',
 5 |       'color': '#fff',
 6 |       'border-radius': '3px',
 7 |       'padding': '10px 20px',
 8 |       'font-family': 'sans-serif',
 9 |     }
10 |   }
11 | 
12 | // JSS Setup
13 | jss.default.use(jssIsolate.default())
14 | var sheet = jss.default.createStyleSheet(styles).attach()
15 | 
16 | // Application logic.
17 | var div = document.body.appendChild(document.createElement('div'))
18 | div.innerHTML = '<a class="'+ sheet.classes.button +'">Button</a>'
19 | 


--------------------------------------------------------------------------------
/plugins/jss-isolate/simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Simple example - jss-isolate plugin</title>
 6 |   <link rel="stylesheet" href="../../../example.css" />
 7 | </head>
 8 | <body style="font-size: 40px; line-height: 3; font-style: italic;">
 9 |   <a href="https://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-isolate/simple" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 |   <script src="../../../jss.js"></script>
11 |   <script src="../../../jss-isolate.js"></script>
12 |   <script src="./app.js"></script>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/plugins/jss-nested/simple/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   square: {
 4 |     float: 'left',
 5 |     width: '100px',
 6 |     height: '100px',
 7 |     '&:hover': {
 8 |       background: 'yellow'
 9 |     },
10 |     // Use whatever selector you want.
11 |     '& button': {
12 |       padding: '20px',
13 |       background: 'blue'
14 |     }
15 |   }
16 | }
17 | 
18 | // JSS Setup
19 | jss.default.use(jssNested.default())
20 | var sheet = jss.default.createStyleSheet(styles).attach()
21 | 
22 | // Application logic.
23 | var div = document.body.appendChild(document.createElement('div'))
24 | div.innerHTML = '\
25 |   <div class="'+ sheet.classes.square +'">\
26 |     <button>Button</button>\
27 |   </div>\
28 | '
29 | 


--------------------------------------------------------------------------------
/plugins/jss-nested/simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Simple example - jss-nested plugin</title>
 6 |   <link rel="stylesheet" href="../../../example.css" />
 7 | </head>
 8 | <body>
 9 |   <a href="https://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-nested/simple" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 |   <script src="../../../jss.js"></script>
11 |   <script src="../../../jss-nested.js"></script>
12 |   <script src="./app.js"></script>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/plugins/jss-props-sort/simple/app.js:
--------------------------------------------------------------------------------
 1 | // Styles
 2 | var styles = {
 3 |   button: {
 4 |     'border-left': '3px solid red',
 5 |     border: '3px solid green'
 6 |   }
 7 | }
 8 | 
 9 | // JSS Setup
10 | jss.default.use(jssPropsSort.default())
11 | var sheet = jss.default.createStyleSheet(styles).attach()
12 | 
13 | // Application logic.
14 | var div = document.body.appendChild(document.createElement('div'))
15 | div.innerHTML = '<button class="'+ sheet.classes.button +'">Button</button>'
16 | 


--------------------------------------------------------------------------------
/plugins/jss-props-sort/simple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Simple example - jss-props-sort plugin</title>
 6 |   <link rel="stylesheet" href="../../../example.css" />
 7 | </head>
 8 | <body>
 9 |   <a href="https://github.com/cssinjs/examples/tree/gh-pages/plugins/jss-props-sort/simple" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
10 |   <script src="../../../jss.js"></script>
11 |   <script src="../../../jss-props-sort.js"></script>
12 |   <script src="./app.js"></script>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/react-ssr/bin/build.js:
--------------------------------------------------------------------------------
1 | require('babel-register')({
2 |   presets: ["es2015", "react", "stage-0"]
3 | })
4 | var ReactDOMServer = require('react-dom/server')
5 | var render = require('../src/server').default
6 | console.log(render())
7 | 
8 | 


--------------------------------------------------------------------------------
/react-ssr/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |   <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Server-side rendering with rehydration</title>
 6 |     <link rel="stylesheet" href="../../example.css" />
 7 |     <style type="text/css" id="server-side-styles">
 8 |       .Button-button-0-1 {
 9 |   color: green;
10 | }
11 |     </style>
12 |   </head>
13 |   <body>
14 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/react-ssr" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
15 |     <div id="app"><button class="Button-button-0-1" data-reactroot="">My Button</button></div>
16 |     <script src="./app.js"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/react-ssr/src/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import injectSheet from 'react-jss'
 3 | 
 4 | const styles = {
 5 |   button: {
 6 |     color: 'green'
 7 |   }
 8 | }
 9 | 
10 | function Button({classes}) {
11 |   return <button className={classes.button}>My Button</button>
12 | }
13 | 
14 | export default injectSheet(styles)(Button)
15 | 


--------------------------------------------------------------------------------
/react-ssr/src/client.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {render} from 'react-dom'
 3 | import Button from './Button'
 4 | 
 5 | render(<Button />, document.getElementById('app'), () => {
 6 |   // We don't need the static css any more once we have launched our application.
 7 |   const ssStyles = document.getElementById('server-side-styles')
 8 |   ssStyles.parentNode.removeChild(ssStyles)
 9 | })
10 | 


--------------------------------------------------------------------------------
/react-ssr/src/server.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {renderToString} from 'react-dom/server'
 3 | import {JssProvider, SheetsRegistry} from 'react-jss'
 4 | import Button from './Button'
 5 | 
 6 | export default function render() {
 7 |   const sheets = new SheetsRegistry()
 8 | 
 9 |   const app = renderToString(
10 |     <JssProvider registry={sheets}>
11 |       <Button />
12 |     </JssProvider>
13 |   )
14 | 
15 |   return '' +
16 | `<!DOCTYPE html>
17 |   <html>
18 |   <head>
19 |     <meta charset="utf-8">
20 |     <title>Server-side rendering with rehydration</title>
21 |     <link rel="stylesheet" href="../../example.css" />
22 |     <style type="text/css" id="server-side-styles">
23 |       ${sheets.toString()}
24 |     </style>
25 |   </head>
26 |   <body>
27 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/react-ssr" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
28 |     <div id="app">${app}</div>
29 |     <script src="./app.js"></script>
30 |   </body>
31 | </html>`
32 | }
33 | 


--------------------------------------------------------------------------------
/react-ssr/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var webpack = require('webpack')
 4 | var path = require('path')
 5 | 
 6 | module.exports = {
 7 |   entry: path.join(__dirname, 'src', 'client.js'),
 8 |   output: {
 9 |     path: path.join(__dirname, './dist'),
10 |     filename: 'app.js'
11 |   },
12 |   module: {
13 |     loaders: [
14 |       {
15 |         loader: 'babel-loader',
16 |         test: /\.js$/,
17 |         exclude: /node_modules/
18 |       }
19 |     ]
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | ## Moved
2 | 
3 | The new place for exmaples is [here](https://github.com/cssinjs/jss/tree/master/examples)
4 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/README.md:
--------------------------------------------------------------------------------
 1 | ## Build
 2 | 
 3 | ```bash
 4 | cd swinging-cat-rx
 5 | npm install
 6 | cd ..
 7 | npm run build:swinging-cat-rx
 8 | open swinging-cat/index.html
 9 | ```
10 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Swinging cat RX</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |     <style>
 8 |       html, body {
 9 |         overflow: hidden;
10 |       }
11 |       .author {
12 |         display: block;
13 |         margin: 10px;
14 |         color: white;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <a href="https://codepen.io/davidkpiano/pen/c188c1c723f79cebe74a151f64c50574" target="_blank" class="author">Originally created by David Khorshid</a>
20 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/swinging-cat-rx" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
21 |     <script src="./dist/app.js"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/index.js:
--------------------------------------------------------------------------------
1 | import './src/globalStyles'
2 | import scene from './src/scene'
3 | import { setup } from './src/animation'
4 | 
5 | document.body.appendChild(scene())
6 | setup()
7 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webpackbin-project",
 3 |   "version": "1.0.0",
 4 |   "description": "Project boilerplate",
 5 |   "scripts": {
 6 |     "start": "webpack-dev-server --content-base build/ --port 3000",
 7 |     "build": "webpack"
 8 |   },
 9 |   "dependencies": {
10 |     "dynamics.js": "^1.1.5",
11 |     "hammerjs": "^2.0.8",
12 |     "jss": "^9.5.1",
13 |     "jss-preset-default": "^4.1.0",
14 |     "rxjs": "^5.4.3"
15 |   },
16 |   "devDependencies": {
17 |     "html-webpack-plugin": "2.22.0",
18 |     "webpack-dev-server": "2.3.0",
19 |     "webpack": "^2.2.0",
20 |     "babel-core": "^6.23.1",
21 |     "babel-loader": "^6.2.10",
22 |     "babel-preset-es2015": "^6.22.0",
23 |     "babel-preset-stage-0": "^6.5.0"
24 |   },
25 |   "author": "WebpackBin",
26 |   "license": "ISC"
27 | }
28 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/animation.js:
--------------------------------------------------------------------------------
 1 | import { Observable, Subject, Scheduler } from 'rxjs'
 2 | import 'hammerjs'
 3 | import dynamics from 'dynamics.js'
 4 | 
 5 | export const swingAnimationValues = [5, -10, 15, -23, 23, -15, 10, -10, 5]
 6 | 
 7 | export const animationSubject = new Subject(0)
 8 | 
 9 | // animationSubject.subscribe(
10 | //   $val => console.log('Next: ' + $val),
11 | //   err => console.log('Error: ' + err),
12 | //   () => console.log('Completed')
13 | // )
14 | 
15 | export function getPercentValue(animationValues, $percent) {
16 |   for (let i = 0; i < animationValues.length; i++) {
17 |     if ($percent >= animationValues[i].percent) {
18 |       return animationValues[i].value
19 |     }
20 |   }
21 |   return animationValues[animationValues.length - 1].value
22 | }
23 | 
24 | export const rotate = ($val, $mult = 1) => `rotate(${$val * $mult}deg)`
25 | export const scaleY = $val => `scaleY(${$val})`
26 | export const translateY = ($val, $mult = 1) => `translateY(${$val * $mult}rem)`
27 | export const translateX = ($val, $mult = 1) => `translateX(${$val * $mult}px)`
28 | 
29 | export const swingAnimation$ = ($mult = 1, animation = rotate) => (
30 |   animationSubject.map($val => animation($val, $mult))
31 | )
32 | 
33 | export const animationLoader$ = duration => (
34 |   Observable
35 |     .interval(0, Scheduler.animationFrame)
36 |     .startWith(0)
37 |     .scan(x => x > duration * (10 ? 0 : x + 1), 0)
38 |     .map(x => x * 10 / duration)
39 | )
40 | 
41 | export const doAnimation$ = loader$ => Observable.combineLatest(
42 |   animationSubject,
43 |   loader$,
44 |   (val, percent) => val === 0 ? val : percent
45 | )
46 | 
47 | export const setup = function() {
48 |   const cat = document.querySelector('#cat')
49 |   const hCat = new Hammer(cat)
50 |   const noop = () => {}
51 | 
52 |   const springBack = fromX => Observable.fromEventPattern(
53 |     handler => dynamics.animate(
54 |         { deltaX: fromX },
55 |         { deltaX: 0 },
56 |         {
57 |           change: e => handler(e.deltaX),
58 |           type: dynamics.spring,
59 |           duration: 3000,
60 |           bounciness: 500,
61 |           friction: 100
62 |         }
63 |     ),
64 |     noop
65 |   )
66 | 
67 |   const pan$ = Observable.fromEventPattern(
68 |     handler => hCat.on('panleft panright panend', handler),
69 |     noop
70 |   )
71 | 
72 |   const move$ = pan$
73 |     .switchMap(e => e.type === 'panend' ? springBack(e.deltaX) : Observable.of(e.deltaX))
74 |     .startWith(0)
75 | 
76 |   move$.subscribe(deltaX => animationSubject.next(-deltaX * .1))
77 | }
78 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/ear.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | 
 3 | const styles = {
 4 |   catEar: {
 5 |     width: 20,
 6 |     height: '100%',
 7 |     position: 'absolute',
 8 |     borderRadius: 5,
 9 |     top: -10,
10 |     '&:before': {
11 |       content: '""',
12 |       width: '60%',
13 |       height: '100%',
14 |       top: 10,
15 |       position: 'absolute',
16 |       backgroundColor: '#fff'
17 |     },
18 |     '&:first-child': {
19 |       left: 0,
20 |       transformOrigin: 'top left',
21 |       transform: 'skewY(40deg)',
22 |       backgroundColor: '#fff',
23 |       '&:before':  {
24 |         content: '""',
25 |         left: 0,
26 |         borderTopRightRadius: '50%',
27 |         borderBottomRightRadius: '50%',
28 |         backgroundColor: '#D7EBFB'
29 |       }
30 |     },
31 |     '&:last-child': {
32 |       right: 0,
33 |       transformOrigin: 'top right',
34 |       transform: 'skewY(-40deg)',
35 |       backgroundColor: '#d1e6f7',
36 |       '&:before': {
37 |         content: '""',
38 |         right: 0,
39 |         borderTopLeftRadius: '50%',
40 |         borderBottomLeftRadius: '50%',
41 |         backgroundColor: '#e0f0fc'
42 |       }
43 |     }
44 |   }
45 | }
46 | 
47 | const {classes} = jss.createStyleSheet(styles).attach()
48 | 
49 | export default () => `<div class=${classes.catEar}></div>`
50 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/face.js:
--------------------------------------------------------------------------------
  1 | import jss from './jss'
  2 | import * as theme from './theme'
  3 | import { swingAnimation$, translateX, doAnimation$, animationLoader$, getPercentValue, scaleY } from './animation'
  4 | 
  5 | const animationValues = [
  6 |   { percent: 100, value: 1 },
  7 |   { percent: 78, value: 0.1 },
  8 |   { percent: 43, value: 1 },
  9 |   { percent: 23, value: 0.1 },
 10 |   { percent: 10, value: 1 },
 11 |   { percent: 8, value: 0.1 },
 12 |   { percent: 0, value: 1 }
 13 | ]
 14 | 
 15 | const styles = {
 16 |   catFace: {
 17 |     position: 'absolute',
 18 |     top: 0,
 19 |     left: 0,
 20 |     height: '100%',
 21 |     width: '100%',
 22 |     transform: swingAnimation$(-.5, translateX),
 23 |     transitionTimingFunction: theme.easing,
 24 |     transformStyle: 'preserve-3d',
 25 |     perspective: 100
 26 |   },
 27 |   catEyes: {
 28 |     position: 'absolute',
 29 |     top: '50%',
 30 |     width: '100%',
 31 |     height: 6,
 32 |     transition: '0.6s',
 33 |     transform: doAnimation$(animationLoader$(theme.duration))
 34 |       .map($val => scaleY(getPercentValue(animationValues, $val))),
 35 |     '&:before': {
 36 |       content: '""',
 37 |       left: 20,
 38 |       position: 'absolute',
 39 |       height: 6,
 40 |       width: 6,
 41 |       borderRadius: '50%',
 42 |       backgroundColor: theme.colorFeatures
 43 |     },
 44 |     '&:after': {
 45 |       content: '""',
 46 |       right: 20,
 47 |       position: 'absolute',
 48 |       height: 6,
 49 |       width: 6,
 50 |       borderRadius: '50%',
 51 |       backgroundColor: theme.colorFeatures
 52 |     }
 53 |   },
 54 |   catMouth: {
 55 |     position: 'absolute',
 56 |     width: 12,
 57 |     height: 8,
 58 |     backgroundColor: theme.colorFeatures,
 59 |     top: '60%',
 60 |     left: 'calc(50% - 6px)',
 61 |     borderTopLeftRadius: '50% 30%',
 62 |     borderTopRightRadius: '50% 30%',
 63 |     borderBottomLeftRadius: '50% 70%',
 64 |     borderBottomRightRadius: '50% 70%',
 65 |     transform: 'translateZ(10px)',
 66 |     '&:before': {
 67 |       content: '""',
 68 |       borderLeftColor: 'transparent',
 69 |       right: 'calc(50% - 1px)',
 70 |       transformOrigin: 'top right',
 71 |       transform: 'rotate(10deg)',
 72 |       position: 'absolute',
 73 |       width: '90%',
 74 |       height: '100%',
 75 |       border: [2, 'solid', theme.colorFeaturesLight],
 76 |       top: '80%',
 77 |       borderRadius: 100,
 78 |       borderTopColor: 'transparent',
 79 |       zIndex: -1
 80 |     },
 81 |     '&:after': {
 82 |       content: '""',
 83 |       borderRightColor: 'transparent',
 84 |       left: 'calc(50% - 1px)',
 85 |       transformOrigin: 'top left',
 86 |       transform: 'rotate(-10deg)',
 87 |       position: 'absolute',
 88 |       width: '90%',
 89 |       height: '100%',
 90 |       border: [2, 'solid', theme.colorFeaturesLight],
 91 |       top: '80%',
 92 |       borderRadius: 100,
 93 |       borderTopColor: 'transparent',
 94 |       zIndex: -1
 95 |     }
 96 |   },
 97 |   catWhiskers: {
 98 |     width: '50%',
 99 |     height: 8,
100 |     position: 'absolute',
101 |     bottom: '25%',
102 |     left: '25%',
103 |     transformStyle: 'preserve-3d',
104 |     perspective: 60,
105 |     '&:before': {
106 |       content: '""',
107 |       right: '100%',
108 |       transformOrigin: 'right center',
109 |       transform: 'rotateY(70deg) rotateZ(-10deg)',
110 |       position: 'absolute',
111 |       height: '100%',
112 |       width: '30%',
113 |       border: [2, 'solid', theme.colorFeaturesLight],
114 |       borderLeft: 'none',
115 |       borderRight: 'none'
116 |     },
117 |     '&:after': {
118 |       content: '""',
119 |       left: '100%',
120 |       transformOrigin: 'left center',
121 |       transform: 'rotateY(-70deg) rotateZ(10deg)',
122 |       position: 'absolute',
123 |       height: '100%',
124 |       width: '30%',
125 |       border: [2, 'solid', theme.colorFeaturesLight],
126 |       borderLeft: 'none',
127 |       borderRight: 'none'
128 |     }
129 |   }
130 | }
131 | 
132 | const {classes} = jss.createStyleSheet(styles, {link: true}).attach()
133 | 
134 | export default () => `
135 |   <div class=${classes.catFace}>
136 |     <div class=${classes.catEyes}></div>
137 |     <div class=${classes.catMouth}></div>
138 |     <div class=${classes.catWhiskers}></div>
139 |   </div>
140 | `
141 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/globalStyles.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | 
 4 | const styles = {
 5 |   '@global': {
 6 |     body: {
 7 |       height: '100%',
 8 |       width: '100%',
 9 |       margin: 0,
10 |       padding: 0,
11 |       backgroundColor: theme.colorBg,
12 |       overflow: 'hidden'
13 |     },
14 |     html: {
15 |       height: '100%',
16 |       width: '100%',
17 |       margin: 0,
18 |       padding: 0,
19 |       backgroundColor: theme.colorBg,
20 |       overflow: 'hidden'
21 |     },
22 |     '*': {
23 |       boxSizing: 'border-box',
24 |       position: 'relative',
25 |       '&:before': {
26 |         content: '""',
27 |         display: 'block',
28 |         boxSizing: 'border-box',
29 |         position: 'relative',
30 |       },
31 |       '&:after': {
32 |         content: '""',
33 |         display: 'block',
34 |         boxSizing: 'border-box',
35 |         position: 'relative',
36 |       }
37 |     }
38 |   }
39 | }
40 | 
41 | jss.createStyleSheet(styles).attach()
42 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/hand.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | 
 4 | const styles = {
 5 |   catHand: {
 6 |     position: 'absolute',
 7 |     width: 20,
 8 |     height: '100%',
 9 |     backgroundColor: '#fff',
10 |     zIndex: -1,
11 |     backgroundImage: `linear-gradient(
12 |       to right,
13 |       ${theme.colorFurLight},
14 |       ${theme.colorFurLight} 20%,
15 |       ${theme.colorFurDark}
16 |     )`,
17 |     '&:nth-child(1)': {
18 |       borderTopLeftRadius: 100,
19 |       left: 10,
20 |       '&:after': {
21 |         content: '""',
22 |         left: '50%'
23 |       }
24 |     },
25 |     '&:nth-child(2)': {
26 |       borderTopLeftRadius: 0,
27 |       borderTopRightRadius: 100,
28 |       right: 10,
29 |       '&:after': {
30 |         content: '""',
31 |         right: '50%'
32 |       }
33 |     }
34 |   }
35 | }
36 | 
37 | const {classes} = jss.createStyleSheet(styles).attach()
38 | 
39 | export default () => `<div class=${classes.catHand}></div>`
40 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/jss.js:
--------------------------------------------------------------------------------
1 | import jss from 'jss'
2 | import preset from 'jss-preset-default'
3 | 
4 | export default jss.setup(preset())
5 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/leg.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | import { swingAnimation$ } from './animation'
 4 | 
 5 | const transform = swingAnimation$(.1).delay(200)
 6 | 
 7 | const styles = {
 8 |   catLowerLegPaw: {
 9 |     position: 'absolute',
10 |     height: 20,
11 |     width: 20,
12 |     zIndex: 1,
13 |     transformOrigin: 'top center',
14 |     transform,
15 |     borderTopLeftRadius: 20,
16 |     borderTopRightRadius: 20,
17 |     backgroundImage: `linear-gradient(to right, #fff, ${theme.colorFurLight}, ${theme.colorFurDark})`
18 |   },
19 |   catLegFirstNested: {
20 |     bottom: 20
21 |   },
22 |   catLegNested: {
23 |     top: '25%'
24 |   },
25 |   catLegSecond: {
26 |     right: 0
27 |   },
28 |   catLowerPaw: {
29 |     top: '50%',
30 |     borderRadius: '50%',
31 |     backgroundColor: '#fff',
32 |     transform
33 |   }
34 | }
35 | 
36 | const {classes} = jss.createStyleSheet(styles, {link: true}).attach()
37 | 
38 | export default (isFirstLeg) => {
39 |   let leg = ''
40 |   if (isFirstLeg) {
41 |     leg = `<div class="${classes.catLowerLegPaw} ${classes.catLegFirstNested}">`
42 |   } else {
43 |     leg = `<div class="${classes.catLowerLegPaw} ${classes.catLegFirstNested} ${classes.catLegSecond}">`
44 |   }
45 |   for (let t = 0; t <= 15; t++) {
46 |     leg += `<div class="${classes.catLowerLegPaw} ${classes.catLegNested}">`
47 |   }
48 |   leg += `<div class="${classes.catLowerLegPaw} ${classes.catLowerPaw}"></div>`
49 |   for (let t = 0; t <= 15; t++) {
50 |     leg += '</div>'
51 |   }
52 |   leg += '</div>'
53 |   return leg
54 | }
55 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/lowerBody.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | import leg from './leg'
 4 | import tail from './tail'
 5 | import { swingAnimation$ } from './animation'
 6 | 
 7 | const styles = {
 8 |   catLowerWrap: {
 9 |     height: '90%',
10 |     position: 'absolute',
11 |     top: '100%',
12 |     width: 75,
13 |     left: 'calc(50% - 37.5px)',
14 |     transformOrigin: 'top center',
15 |     transform: swingAnimation$(-1).delay(100)
16 |   },
17 |   catLower: {
18 |     position: 'absolute',
19 |     top: 0,
20 |     left: 0,
21 |     width: '100%',
22 |     height: '100%',
23 |     transform: swingAnimation$(),
24 |     transformOrigin: 'top center',
25 |     '&:after': {
26 |       content: '""',
27 |       position: 'absolute',
28 |       top: 0,
29 |       left: 0,
30 |       width: '100%',
31 |       height: '100%',
32 |       borderRadius: 100,
33 |       backgroundImage: `radial-gradient(circle at 10px 50px, #ffffff, #ffffff 40%, ${theme.colorFurLight} 65%, ${theme.colorFurDark})`,
34 |       zIndex: 1
35 |     }
36 |   }
37 | }
38 | 
39 | const {classes} = jss.createStyleSheet(styles, {link: true}).attach()
40 | 
41 | export default () => `
42 |   <div class=${classes.catLowerWrap}>
43 |     <div class=${classes.catLower}>
44 |       ${leg(true)}
45 |       ${leg(false)}
46 |       ${tail()}
47 |     </div>
48 |   </div>
49 | `
50 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/scene.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import { Observable } from 'rxjs'
 3 | import * as theme from './theme'
 4 | import yarn from './yarn'
 5 | import upperBody from './upperBody'
 6 | import lowerBody from './lowerBody'
 7 | import { swingAnimation$, doAnimation$, translateY, getPercentValue } from './animation'
 8 | 
 9 | const animationValues = [
10 |   { percent: 100, value: 0.4 },
11 |   { percent: 93.75, value: -0.4 },
12 |   { percent: 87.5, value: 0.4 },
13 |   { percent: 81.25, value: -0.4 },
14 |   { percent: 75, value: 0.4 },
15 |   { percent: 68.75, value: -0.4 },
16 |   { percent: 62.5, value: 0.4 },
17 |   { percent: 56.25, value: -0.4 },
18 |   { percent: 50, value: 0.4 },
19 |   { percent: 43.75, value: -0.4 },
20 |   { percent: 37.5, value: 0.4 },
21 |   { percent: 31.25, value: -0.4 },
22 |   { percent: 25, value: 0.4 },
23 |   { percent: 18.75, value: -0.4 },
24 |   { percent: 12.5, value: 0.4 },
25 |   { percent: 6.25, value: -0.4 },
26 |   { percent: 0, value: 0.4 }
27 | ]
28 | 
29 | const styles = {
30 |   root: {
31 |     width: '100%',
32 |     height: '100%',
33 |     transitionTimingFunction: theme.easing,
34 |     transition: '0.9s'
35 |   },
36 |   scene: {
37 |     top: '10rem',
38 |     left: 'calc(50% - 2.5rem)',
39 |     position: 'absolute',
40 |     width: '5rem',
41 |     height: '5rem',
42 |     transformOrigin: 'center -20rem',
43 |     transitionTimingFunction: theme.easing,
44 |     transform: swingAnimation$().delay(100),
45 |     '&:before': {
46 |       content: '""',
47 |       height: '20rem',
48 |       width: 2,
49 |       backgroundColor: theme.colorYarn,
50 |       left: 'calc(50% - 1px)',
51 |       bottom: '20rem'
52 |     }
53 |   },
54 |   catWrap: {
55 |     position: 'absolute',
56 |     top: 0,
57 |     left: 'calc(50% - 45px)',
58 |     width: 90,
59 |     height: 130,
60 |     transform: swingAnimation$(-1),
61 |     transformOrigin: 'top center'
62 |   },
63 |   cat: {
64 |     position: 'absolute',
65 |     top: 0,
66 |     left: 0,
67 |     width: '100%',
68 |     height: '100%',
69 |     transform: swingAnimation$().delay(150),
70 |     transformOrigin: 'top center'
71 |   }
72 | }
73 | const {classes} = jss.createStyleSheet(styles, {link: true}).attach()
74 | 
75 | 
76 | export default () => {
77 |   const root = document.createElement('div')
78 |   root.className = classes.root
79 | 
80 |   root.innerHTML = `
81 |     <div class=${classes.scene}>
82 |       ${yarn()}
83 |       <div class=${classes.catWrap}>
84 |         <div class=${classes.cat} id='cat'>
85 |           ${upperBody()}
86 |           ${lowerBody()}
87 |         </div>
88 |       </div>
89 |     </div>
90 |   `
91 |   return root
92 | }
93 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/tail.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | import { swingAnimation$ } from './animation'
 4 | 
 5 | 
 6 | const styles = {
 7 |   catTail: {
 8 |     position: 'absolute',
 9 |     height: 15,
10 |     width: 10,
11 |     transformOrigin: 'top center',
12 |     zIndex: 0,
13 |     transform: swingAnimation$(-.4),
14 |     transitionTimingFunction: theme.easing,
15 |     backgroundImage: `linear-gradient(
16 |       to right,
17 |       #fff,
18 |       ${theme.colorFurLight},
19 |       ${theme.colorFurDark}
20 |     )`,
21 |     borderBottomLeftRadius: 10,
22 |     borderBottomRightRadius: 10
23 |   },
24 |   catTailNotFirst: {
25 |     top: '50%'
26 |   },
27 |   catTailFirst: {
28 |     left: 'calc(50% - 5px)',
29 |     top: '95%'
30 |   }
31 | }
32 | 
33 | const {classes} = jss.createStyleSheet(styles, {link: true}).attach()
34 | 
35 | export default () => {
36 |   let tail = `<div class="${classes.catTail} ${classes.catTailFirst}">`
37 |   for (let t = 0; t <= 15; t++) {
38 |     tail += `<div class="${classes.catTail} ${classes.catTailNotFirst}">`
39 |   }
40 |   for (let t = 0; t <= 15; t++) {
41 |     tail += '</div>'
42 |   }
43 |   tail += '</div>'
44 |   return tail
45 | }
46 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/theme.js:
--------------------------------------------------------------------------------
 1 | export const colorBg = '#1F1F3C'
 2 | export const colorFurLight = '#D5E8F8'
 3 | export const colorFurDark = '#8B9BD9'
 4 | export const colorFeatures = '#4B4D75'
 5 | export const colorFeaturesLight = '#9FA2CB'
 6 | export const colorYarn = '#DB242A'
 7 | export const easing = 'cubic-bezier(0.5, 0, 0.5, 1)'
 8 | export const offset = '.5s'
 9 | export const duration = 5
10 | 
11 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/upperBody.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | import face from './face'
 4 | import hand from './hand'
 5 | import ear from './ear'
 6 | 
 7 | const styles = {
 8 |   catUpper: {
 9 |     position: 'absolute',
10 |     top: 0,
11 |     left: 0,
12 |     width: '100%',
13 |     height: '100%',
14 |     transformOrigin: 'top center',
15 |     zIndex: 1
16 |   },
17 |   catHead: {
18 |     width: 90,
19 |     height: 90,
20 |     backgroundImage: `radial-gradient(
21 |       circle at 10px 10px,
22 |       #ffffff,
23 |       #ffffff 40%,
24 |       ${theme.colorFurLight} 65%,
25 |       ${theme.colorFurDark}
26 |     )`,
27 |     borderRadius: '50%',
28 |     top: 'calc(100% - 45px)'
29 |   },
30 |   catEars: {
31 |     position: 'absolute',
32 |     top: 0,
33 |     left: 0,
34 |     height: '50%',
35 |     width: '100%',
36 |     zIndex: -1
37 |   }
38 | }
39 | 
40 | const {classes} = jss.createStyleSheet(styles).attach()
41 | 
42 | export default () => `
43 |   <div class=${classes.catUpper}>
44 |     ${hand()}
45 |     ${hand()}
46 |     <div class=${classes.catHead}>
47 |       <div class=${classes.catEars}>
48 |         ${ear()}
49 |         ${ear()}
50 |       </div>
51 |       ${face()}
52 |     </div>
53 |   </div>
54 | `
55 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/src/yarn.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | 
 4 | const styles = {
 5 |   yarn: {
 6 |     position: 'absolute',
 7 |     top: 0,
 8 |     left: 0,
 9 |     width: 80,
10 |     height: 80,
11 |     borderRadius: '50%',
12 |     backgroundImage: `radial-gradient(
13 |       circle at top left,
14 |       #e97c7f,
15 |       ${theme.colorYarn} 50%,
16 |       #af1d22
17 |     )`,
18 |     zIndex: 1,
19 |     '&:before': {
20 |       content: '""',
21 |       left: 'calc(50% + 7px)',
22 |       position: 'absolute',
23 |       width: 20,
24 |       height: 20,
25 |       borderRadius: '50%',
26 |       backgroundColor: '#fff',
27 |       top: -1
28 |     },
29 |     '&:after': {
30 |       content: '""',
31 |       right: 'calc(50% + 7px)',
32 |       position: 'absolute',
33 |       width: 20,
34 |       height: 20,
35 |       borderRadius: '50%',
36 |       backgroundColor: '#fff',
37 |       top: -1
38 |     }
39 |   }
40 | }
41 | 
42 | const {classes} = jss.createStyleSheet(styles).attach()
43 | 
44 | export default () => `<div class=${classes.yarn}></div>`
45 | 


--------------------------------------------------------------------------------
/swinging-cat-rx/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var webpack = require('webpack')
 4 | var path = require('path')
 5 | 
 6 | module.exports = {
 7 |   entry: path.join(__dirname, 'index.js'),
 8 |   output: {
 9 |     path: path.join(__dirname, './dist'),
10 |     filename: 'app.js'
11 |   },
12 |   module: {
13 |     loaders: [
14 |       {
15 |         loader: 'babel-loader',
16 |         test: /\.js$/,
17 |         exclude: /node_modules/
18 |       }
19 |     ]
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/swinging-cat/README.md:
--------------------------------------------------------------------------------
 1 | ## Build
 2 | 
 3 | ```bash
 4 | cd swinging-cat
 5 | npm install
 6 | cd ..
 7 | npm run build:swinging-cat
 8 | open swinging-cat/index.html
 9 | ```
10 | 


--------------------------------------------------------------------------------
/swinging-cat/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Swinging cat</title>
 6 |     <link rel="stylesheet" href="../example.css" />
 7 |     <style>
 8 |       html, body {
 9 |         overflow: hidden;
10 |       }
11 |       .author {
12 |         display: block;
13 |         margin: 10px;
14 |         color: white;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <a href="https://codepen.io/davidkpiano/pen/Xempjq" target="_blank" class="author">Originally created by David Khorshid</a>
20 |     <a href="https://github.com/cssinjs/examples/tree/gh-pages/swinging-cat" title="View on Github" class="github-fork-ribbon" target="_blank">View on Github</a>
21 |     <script src="./dist/app.js"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/swinging-cat/index.js:
--------------------------------------------------------------------------------
1 | import './src/globalStyles'
2 | import scene from './src/scene'
3 | 
4 | document.body.appendChild(scene())
5 | 


--------------------------------------------------------------------------------
/swinging-cat/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webpackbin-project",
 3 |   "version": "1.0.0",
 4 |   "description": "Project boilerplate",
 5 |   "scripts": {
 6 |     "start": "webpack-dev-server --content-base build/ --port 3000"
 7 |   },
 8 |   "dependencies": {
 9 |     "jss": "9.0.0",
10 |     "jss-preset-default": "4.0.0",
11 |     "rxjs": "5.4.3"
12 |   },
13 |   "devDependencies": {
14 |     "html-webpack-plugin": "2.22.0",
15 |     "webpack-dev-server": "2.3.0",
16 |     "webpack": "^2.2.0",
17 |     "babel-core": "^6.23.1",
18 |     "babel-loader": "^6.2.10",
19 |     "babel-preset-es2015": "^6.22.0",
20 |     "babel-preset-stage-0": "^6.5.0"
21 |   },
22 |   "author": "WebpackBin",
23 |   "license": "ISC"
24 | }


--------------------------------------------------------------------------------
/swinging-cat/src/ear.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | 
 3 | const styles = {
 4 |   catEar: {
 5 |     width: 20,
 6 |     height: '100%',
 7 |     position: 'absolute',
 8 |     borderRadius: 5,
 9 |     top: -10,
10 |     '&:before': {
11 |       content: '""',
12 |       width: '60%',
13 |       height: '100%',
14 |       top: 10,
15 |       position: 'absolute',
16 |       backgroundColor: '#fff'
17 |     },
18 |     '&:first-child': {
19 |       left: 0,
20 |       transformOrigin: 'top left',
21 |       transform: 'skewY(40deg)',
22 |       backgroundColor: '#fff',
23 |       '&:before':  {
24 |         content: '""',
25 |         left: 0,
26 |         borderTopRightRadius: '50%',
27 |         borderBottomRightRadius: '50%',
28 |         backgroundColor: '#D7EBFB'
29 |       }
30 |     },
31 |     '&:last-child': {
32 |       right: 0,
33 |       transformOrigin: 'top right',
34 |       transform: 'skewY(-40deg)',
35 |       backgroundColor: '#d1e6f7',
36 |       '&:before': {
37 |         content: '""',
38 |         right: 0,
39 |         borderTopLeftRadius: '50%',
40 |         borderBottomLeftRadius: '50%',
41 |         backgroundColor: '#e0f0fc'
42 |       }
43 |     }
44 |   }
45 | }
46 | 
47 | const {classes} = jss.createStyleSheet(styles).attach()
48 | 
49 | export default () => `<div class=${classes.catEar}></div>`
50 | 


--------------------------------------------------------------------------------
/swinging-cat/src/face.js:
--------------------------------------------------------------------------------
  1 | import jss from './jss'
  2 | import * as theme from './theme'
  3 | 
  4 | const styles = {
  5 |   catFace: {
  6 |     position: 'absolute',
  7 |     top: 0,
  8 |     left: 0,
  9 |     height: '100%',
 10 |     width: '100%',
 11 |     animation: `face ${theme.duration} ${theme.easing} infinite both`,
 12 |     transformStyle: 'preserve-3d',
 13 |     perspective: 100
 14 |   },
 15 |   catEyes: {
 16 |     position: 'absolute',
 17 |     top: '50%',
 18 |     width: '100%',
 19 |     height: 6,
 20 |     animation: `blink ${theme.duration} step-end infinite both`,
 21 |     '&:before': {
 22 |       content: '""',
 23 |       left: 20,
 24 |       position: 'absolute',
 25 |       height: 6,
 26 |       width: 6,
 27 |       borderRadius: '50%',
 28 |       backgroundColor: theme.colorFeatures
 29 |     },
 30 |     '&:after': {
 31 |       content: '""',
 32 |       right: 20,
 33 |       position: 'absolute',
 34 |       height: 6,
 35 |       width: 6,
 36 |       borderRadius: '50%',
 37 |       backgroundColor: theme.colorFeatures
 38 |     }
 39 |   },
 40 |   catMouth: {
 41 |     position: 'absolute',
 42 |     width: 12,
 43 |     height: 8,
 44 |     backgroundColor: theme.colorFeatures,
 45 |     top: '60%',
 46 |     left: 'calc(50% - 6px)',
 47 |     borderTopLeftRadius: '50% 30%',
 48 |     borderTopRightRadius: '50% 30%',
 49 |     borderBottomLeftRadius: '50% 70%',
 50 |     borderBottomRightRadius: '50% 70%',
 51 |     transform: 'translateZ(10px)',
 52 |     '&:before': {
 53 |       content: '""',
 54 |       borderLeftColor: 'transparent',
 55 |       right: 'calc(50% - 1px)',
 56 |       transformOrigin: 'top right',
 57 |       transform: 'rotate(10deg)',
 58 |       position: 'absolute',
 59 |       width: '90%',
 60 |       height: '100%',
 61 |       border: `2px solid ${theme.colorFeaturesLight}`,
 62 |       top: '80%',
 63 |       borderRadius: 100,
 64 |       borderTopColor: 'transparent',
 65 |       zIndex: -1
 66 |     },
 67 |     '&:after': {
 68 |       content: '""',
 69 |       borderRightColor: 'transparent',
 70 |       left: 'calc(50% - 1px)',
 71 |       transformOrigin: 'top left',
 72 |       transform: 'rotate(-10deg)',
 73 |       position: 'absolute',
 74 |       width: '90%',
 75 |       height: '100%',
 76 |       border: `2px solid ${theme.colorFeaturesLight}`,
 77 |       top: '80%',
 78 |       borderRadius: 100,
 79 |       borderTopColor: 'transparent',
 80 |       zIndex: -1
 81 |     }
 82 |   },
 83 |   catWhiskers: {
 84 |     width: '50%',
 85 |     height: 8,
 86 |     position: 'absolute',
 87 |     bottom: '25%',
 88 |     left: '25%',
 89 |     transformStyle: 'preserve-3d',
 90 |     perspective: 60,
 91 |     '&:before': {
 92 |       content: '""',
 93 |       right: '100%',
 94 |       transformOrigin: 'right center',
 95 |       transform: 'rotateY(70deg) rotateZ(-10deg)',
 96 |       position: 'absolute',
 97 |       height: '100%',
 98 |       width: '30%',
 99 |       border: `2px solid  ${theme.colorFeaturesLight}`,
100 |       borderLeft: 'none',
101 |       borderRight: 'none'
102 |     },
103 |     '&:after': {
104 |       content: '""',
105 |       left: '100%',
106 |       transformOrigin: 'left center',
107 |       transform: 'rotateY(-70deg) rotateZ(10deg)',
108 |       position: 'absolute',
109 |       height: '100%',
110 |       width: '30%',
111 |       border: `2px solid  ${theme.colorFeaturesLight}`,
112 |       borderLeft: 'none',
113 |       borderRight: 'none'
114 |     }
115 |   }
116 | }
117 | 
118 | const {classes} = jss.createStyleSheet(styles).attach()
119 | 
120 | export default () => `
121 |   <div class=${classes.catFace}>
122 |     <div class=${classes.catEyes}></div>
123 |     <div class=${classes.catMouth}></div>
124 |     <div class=${classes.catWhiskers}></div>
125 |   </div>
126 | `
127 | 


--------------------------------------------------------------------------------
/swinging-cat/src/globalStyles.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | import keyframes from './keyframes'
 4 | 
 5 | const styles = {
 6 |   '@global': {
 7 |     body: {
 8 |       height: '100%',
 9 |       width: '100%',
10 |       margin: 0,
11 |       padding: 0,
12 |       backgroundColor: theme.colorBg,
13 |       overflow: 'hidden'
14 |     },
15 |     html: {
16 |       height: '100%',
17 |       width: '100%',
18 |       margin: 0,
19 |       padding: 0,
20 |       backgroundColor: theme.colorBg,
21 |       overflow: 'hidden'
22 |     },
23 |     '*': {
24 |       boxSizing: 'border-box',
25 |       position: 'relative',
26 |       animationTimingFunction: theme.easing,
27 |       animationFillMode: 'both',
28 |       '&:before': {
29 |         content: '""',
30 |         display: 'block',
31 |         boxSizing: 'border-box',
32 |         position: 'relative',
33 |         animationTimingFunction: theme.easing,
34 |         animationFillMode: 'both'
35 |       },
36 |       '&:after': {
37 |         content: '""',
38 |         display: 'block',
39 |         boxSizing: 'border-box',
40 |         position: 'relative',
41 |         animationTimingFunction: theme.easing,
42 |         animationFillMode: 'both'
43 |       }
44 |     }
45 |   },
46 |   '@keyframes bob': keyframes.bob,
47 |   '@keyframes reverse-swing': keyframes.reverseSwing,
48 |   '@keyframes face': keyframes.face,
49 |   '@keyframes blink': keyframes.blink,
50 |   '@keyframes swing-leg': keyframes.swingLeg,
51 |   '@keyframes swing-tail': keyframes.swingTail,
52 |   '@keyframes swing': keyframes.swing
53 | }
54 | 
55 | jss.createStyleSheet(styles).attach()
56 | 


--------------------------------------------------------------------------------
/swinging-cat/src/hand.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | 
 4 | const styles = {
 5 |   catHand: {
 6 |     position: 'absolute',
 7 |     width: 20,
 8 |     height: '100%',
 9 |     backgroundColor: '#fff',
10 |     zIndex: -1,
11 |     backgroundImage: `linear-gradient(to right, ${theme.colorFurLight}, ${theme.colorFurLight} 20%, ${theme.colorFurDark})`,
12 |     '&:nth-child(1)': {
13 |       borderTopLeftRadius: 100,
14 |       left: 10,
15 |       '&:after': {
16 |         content: '""',
17 |         left: '50%'
18 |       }
19 |     },
20 |     '&:nth-child(2)': {
21 |       borderTopLeftRadius: 0,
22 |       borderTopRightRadius: 100,
23 |       right: 10,
24 |       '&:after': {
25 |         content: '""',
26 |         right: '50%'
27 |       }
28 |     }
29 |   }
30 | }
31 | 
32 | const {classes} = jss.createStyleSheet(styles).attach()
33 | 
34 | export default () => `<div class=${classes.catHand}></div>`
35 | 


--------------------------------------------------------------------------------
/swinging-cat/src/jss.js:
--------------------------------------------------------------------------------
1 | import jss from 'jss'
2 | import preset from 'jss-preset-default'
3 | 
4 | export default jss.setup(preset())
5 | 


--------------------------------------------------------------------------------
/swinging-cat/src/keyframes.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   bob: {
  3 |     '0%': {
  4 |       transform: 'translateY(0.4rem)'
  5 |     },
  6 |     '6.25%': {
  7 |       transform: 'translateY(-0.4rem)'
  8 |     },
  9 |     '12.5%': {
 10 |       transform: 'translateY(0.4rem)'
 11 |     },
 12 |     '18.75%': {
 13 |       transform: 'translateY(-0.4rem)'
 14 |     },
 15 |     '25%': {
 16 |       transform: 'translateY(0.4rem)'
 17 |     },
 18 |     '31.25%': {
 19 |       transform: 'translateY(-0.4rem)'
 20 |     },
 21 |     '37.5%': {
 22 |       transform: 'translateY(0.4rem)'
 23 |     },
 24 |     '43.75%': {
 25 |       transform: 'translateY(-0.4rem)'
 26 |     },
 27 |     '50%': {
 28 |       transform: 'translateY(0.4rem)'
 29 |     },
 30 |     '56.25%': {
 31 |       transform: 'translateY(-0.4rem)'
 32 |     },
 33 |     '62.5%': {
 34 |       transform: 'translateY(0.4rem)'
 35 |     },
 36 |     '68.75%': {
 37 |       transform: 'translateY(-0.4rem)'
 38 |     },
 39 |     '75%': {
 40 |       transform: 'translateY(0.4rem)'
 41 |     },
 42 |     '81.25%': {
 43 |       transform: 'translateY(-0.4rem)'
 44 |     },
 45 |     '87.5%': {
 46 |       transform: 'translateY(0.4rem)'
 47 |     },
 48 |     '93.75%': {
 49 |       transform: 'translateY(-0.4rem)'
 50 |     },
 51 |     '100%': {
 52 |       transform: 'translateY(0.4rem)'
 53 |     }
 54 |   },
 55 |   reverseSwing: {
 56 |     '0%': {
 57 |       transform: 'rotate(-5deg)'
 58 |     },
 59 |     '12.5%': {
 60 |       transform: 'rotate(10deg)'
 61 |     },
 62 |     '25%': {
 63 |       transform: 'rotate(-10deg)'
 64 |     },
 65 |     '37.5%': {
 66 |       transform: 'rotate(15deg)'
 67 |     },
 68 |     '50%': {
 69 |       transform: 'rotate(-23deg)'
 70 |     },
 71 |     '62.5%': {
 72 |       transform: 'rotate(23deg)'
 73 |     },
 74 |     '75%': {
 75 |       transform: 'rotate(-15deg)'
 76 |     },
 77 |     '87.5%': {
 78 |       transform: 'rotate(10deg)'
 79 |     },
 80 |     '100%': {
 81 |       transform: 'rotate(-5deg)'
 82 |     }
 83 |   },
 84 |   face: {
 85 |     '0%': {
 86 |       transform: 'translateX(-2.5px)'
 87 |     },
 88 |     '12.5%': {
 89 |       transform: 'translateX(5px)'
 90 |     },
 91 |     '25%': {
 92 |       transform: 'translateX(-5px)'
 93 |     },
 94 |     '37.5%': {
 95 |       transform: 'translateX(7.5px)'
 96 |     },
 97 |     '50%': {
 98 |       transform: 'translateX(-11.5px)'
 99 |     },
100 |     '62.5%': {
101 |       transform: 'translateX(11.5px)'
102 |     },
103 |     '75%': {
104 |       transform: 'translateX(-7.5px)'
105 |     },
106 |     '87.5%': {
107 |       transform: 'translateX(5px)'
108 |     },
109 |     '100%': {
110 |       transform: 'translateX(-2.5px)'
111 |     }
112 |   },
113 |   blink: {
114 |     'from, to, 10%, 25%, 80%': {
115 |       transform: 'scaleY(1)'
116 |     },
117 |     '8%, 23%, 78%': {
118 |       transform: 'scaleY(0.1)'
119 |     }
120 |   },
121 |   swingLeg: {
122 |     '0%': {
123 |       transform: 'rotate(0.5deg)'
124 |     },
125 |     '12.5%': {
126 |       transform: 'rotate(-1deg)'
127 |     },
128 |     '25%': {
129 |       transform: 'rotate(1deg)'
130 |     },
131 |     '37.5%': {
132 |       transform: 'rotate(-1.5deg)'
133 |     },
134 |     '50%': {
135 |       transform: 'rotate(2.3deg)'
136 |     },
137 |     '62.5%': {
138 |       transform: 'rotate(-2.3deg)'
139 |     },
140 |     '75%': {
141 |       transform: 'rotate(1.5deg)'
142 |     },
143 |     '87.5%': {
144 |       transform: 'rotate(-1deg)'
145 |     },
146 |     '100%': {
147 |       transform: 'rotate(0.5deg)'
148 |     }
149 |   },
150 |   swingTail: {
151 |     '0%': {
152 |       transform: 'rotate(-2deg)'
153 |     },
154 |     '12.5%': {
155 |       transform: 'rotate(4deg)'
156 |     },
157 |     '25%': {
158 |       transform: 'rotate(-4deg)'
159 |     },
160 |     '37.5%': {
161 |       transform: 'rotate(6deg)'
162 |     },
163 |     '50%': {
164 |       transform: 'rotate(-9.2deg)'
165 |     },
166 |     '62.5%': {
167 |       transform: 'rotate(9.2deg)'
168 |     },
169 |     '75%': {
170 |       transform: 'rotate(-6deg)'
171 |     },
172 |     '87.5%': {
173 |       transform: 'rotate(4deg)'
174 |     },
175 |     '100%': {
176 |       transform: 'rotate(-2deg)'
177 |     }
178 |   },
179 |   swing: {
180 |       '0%': {
181 |         transform: 'rotate(5deg)'
182 |       },
183 |       '12.5%': {
184 |         transform: 'rotate(-10deg)'
185 |       },
186 |       '25%': {
187 |         transform: 'rotate(10deg)'
188 |       },
189 |       '37.5%': {
190 |         transform: 'rotate(-15deg)'
191 |       },
192 |       '50%': {
193 |         transform: 'rotate(23deg)'
194 |       },
195 |       '62.5%': {
196 |         transform: 'rotate(-23deg)'
197 |       },
198 |       '75%': {
199 |         transform: 'rotate(15deg)'
200 |       },
201 |       '87.5%': {
202 |         transform: 'rotate(-10deg)'
203 |       },
204 |       '100%': {
205 |         transform: 'rotate(5deg)'
206 |       }
207 |     }  
208 | }
209 | 


--------------------------------------------------------------------------------
/swinging-cat/src/leg.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | 
 4 | const styles = {
 5 |   catLowerLegPaw: {
 6 |     position: 'absolute',
 7 |     height: 20,
 8 |     width: 20,
 9 |     animation: `swing-leg ${theme.duration} 0.3s infinite both`,
10 |     zIndex: 1,
11 |     transformOrigin: 'top center',
12 |     borderTopLeftRadius: 20,
13 |     borderTopRightRadius: 20,
14 |     backgroundImage: `linear-gradient(to right, #fff, ${theme.colorFurLight}, ${theme.colorFurDark})`
15 |   },
16 |   catLegFirstNested: {
17 |     bottom: 20
18 |   },
19 |   catLegNested: {
20 |     top: '25%'
21 |   },
22 |   catLegSecond: {
23 |     right: 0
24 |   },
25 |   catLowerPaw: {
26 |     top: '50%',
27 |     borderRadius: '50%',
28 |     backgroundColor: '#fff'
29 |   }
30 | }
31 | 
32 | const {classes} = jss.createStyleSheet(styles).attach()
33 | 
34 | export default (isFirstLeg) => {
35 |   let leg = ''
36 |   if (isFirstLeg) {
37 |     leg = `<div class="${classes.catLowerLegPaw} ${classes.catLegFirstNested}">`
38 |   } else {
39 |     leg = `<div class="${classes.catLowerLegPaw} ${classes.catLegFirstNested} ${classes.catLegSecond}">`
40 |   }
41 |   for (let t = 0; t <= 15; t++) {
42 |     leg += `<div class="${classes.catLowerLegPaw} ${classes.catLegNested}">`
43 |   }
44 |   leg += `<div class="${classes.catLowerLegPaw} ${classes.catLowerPaw}"></div>`
45 |   for (let t = 0; t <= 15; t++) {
46 |     leg += '</div>'
47 |   }
48 |   leg += '</div>'
49 |   return leg
50 | }
51 | 


--------------------------------------------------------------------------------
/swinging-cat/src/lowerBody.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | import leg from './leg'
 4 | import tail from './tail'
 5 | 
 6 | const styles = {
 7 |   catLowerWrap: {
 8 |     height: '90%',
 9 |     position: 'absolute',
10 |     top: '100%',
11 |     width: 75,
12 |     left: 'calc(50% - 37.5px)',
13 |     animation: `reverse-swing ${theme.duration} 0.2s infinite both`,
14 |     transformOrigin: 'top center'
15 |   },
16 |   catLower: {
17 |     position: 'absolute',
18 |     top: 0,
19 |     left: 0,
20 |     width: '100%',
21 |     height: '100%',
22 |     animation: `swing ${theme.duration} ${theme.offset} infinite both`,
23 |     transformOrigin: 'top center',
24 |     '&:after': {
25 |       content: '""',
26 |       position: 'absolute',
27 |       top: 0,
28 |       left: 0,
29 |       width: '100%',
30 |       height: '100%',
31 |       borderRadius: 100,
32 |       backgroundImage: `radial-gradient(circle at 10px 50px, #ffffff, #ffffff 40%, ${theme.colorFurLight} 65%, ${theme.colorFurDark})`,
33 |       zIndex: 1
34 |     }
35 |   }
36 | }
37 | 
38 | const {classes} = jss.createStyleSheet(styles).attach()
39 | 
40 | export default () => `
41 |   <div class=${classes.catLowerWrap}>
42 |     <div class=${classes.catLower}>
43 |       ${leg(true)}
44 |       ${leg(false)}
45 |       ${tail()}
46 |     </div>
47 |   </div>
48 | `
49 | 


--------------------------------------------------------------------------------
/swinging-cat/src/scene.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | import yarn from './yarn'
 4 | import upperBody from './upperBody'
 5 | import lowerBody from './lowerBody'
 6 | 
 7 | const styles = {
 8 |   root: {
 9 |     width: '100%',
10 |     height: '100%',
11 |     animation: `bob ${theme.duration} ${theme.easing} infinite both`
12 |   },
13 |   scene: {
14 |     top: '10rem',
15 |     left: 'calc(50% - 2.5rem)',
16 |     position: 'absolute',
17 |     width: '5rem',
18 |     height: '5rem',
19 |     transformOrigin: 'center -20rem',
20 |     animation: `swing ${theme.duration} ${theme.easing} infinite both`,
21 |     '&:before': {
22 |       content: '""',
23 |       height: '20rem',
24 |       width: 2,
25 |       backgroundColor: theme.colorYarn,
26 |       left: 'calc(50% - 1px)',
27 |       bottom: '20rem'
28 |     }
29 |   },
30 |   catWrap: {
31 |     position: 'absolute',
32 |     top: 0,
33 |     left: 'calc(50% - 45px)',
34 |     width: 90,
35 |     height: 130,
36 |     animation: `reverse-swing ${theme.duration} ${theme.easing} infinite both`,
37 |     transformOrigin: 'top center'
38 |   },
39 |   cat: {
40 |     position: 'absolute',
41 |     top: 0,
42 |     left: 0,
43 |     width: '100%',
44 |     height: '100%',
45 |     animation: `swing ${theme.duration} .2s infinite both`,
46 |     transformOrigin: 'top center'
47 |   }
48 | }
49 | const {classes} = jss.createStyleSheet(styles).attach()
50 | 
51 | 
52 | export default () => {
53 |   const root = document.createElement('div')
54 |   root.className = classes.root
55 | 
56 |   root.innerHTML = `
57 |     <div class=${classes.scene}>
58 |       ${yarn()}
59 |       <div class=${classes.catWrap}>
60 |         <div class=${classes.cat}>
61 |           ${upperBody()}
62 |           ${lowerBody()}
63 |         </div>
64 |       </div>
65 |     </div>
66 |   `
67 |   return root
68 | }
69 | 


--------------------------------------------------------------------------------
/swinging-cat/src/tail.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | 
 4 | const styles = {
 5 |   catTail: {
 6 |     position: 'absolute',
 7 |     height: 15,
 8 |     width: 10,
 9 |     animation: `swing-tail ${theme.duration} ${theme.easing} infinite both`,
10 |     transformOrigin: 'top center',
11 |     zIndex: 0,
12 |     backgroundImage: `linear-gradient(to right, #fff, ${theme.colorFurLight}, ${theme.colorFurDark})`,
13 |     borderBottomLeftRadius: 10,
14 |     borderBottomRightRadius: 10
15 |   },
16 |   catTailNotFirst: {
17 |     top: '50%'
18 |   },
19 |   catTailFirst: {
20 |     left: 'calc(50% - 5px)',
21 |     top: '95%'
22 |   }
23 | }
24 | 
25 | const {classes} = jss.createStyleSheet(styles).attach()
26 | 
27 | export default () => {
28 |   let tail = `<div class="${classes.catTail} ${classes.catTailFirst}">`
29 |   for (let t = 0; t <= 15; t++) {
30 |     tail += `<div class="${classes.catTail} ${classes.catTailNotFirst}">`
31 |   }
32 |   for (let t = 0; t <= 15; t++) {
33 |     tail += '</div>'
34 |   }
35 |   tail += '</div>'
36 |   return tail
37 | }
38 | 


--------------------------------------------------------------------------------
/swinging-cat/src/theme.js:
--------------------------------------------------------------------------------
 1 | export const colorBg = '#1F1F3C'
 2 | export const colorFurLight = '#D5E8F8'
 3 | export const colorFurDark = '#8B9BD9'
 4 | export const colorFeatures = '#4B4D75'
 5 | export const colorFeaturesLight = '#9FA2CB'
 6 | export const colorYarn = '#DB242A'
 7 | export const duration = '7s'
 8 | export const easing = 'cubic-bezier(0.5, 0, 0.5, 1)'
 9 | export const offset = '.5s'
10 | export const swings = '5 -10 10 -15 23 -23 15 -10 5'
11 | export const totalSwings = 'length($swings)'
12 | 


--------------------------------------------------------------------------------
/swinging-cat/src/upperBody.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | import face from './face'
 4 | import hand from './hand'
 5 | import ear from './ear'
 6 | 
 7 | const styles = {
 8 |   catUpper: {
 9 |     position: 'absolute',
10 |     top: 0,
11 |     left: 0,
12 |     width: '100%',
13 |     height: '100%',
14 |     transformOrigin: 'top center',
15 |     zIndex: 1
16 |   },
17 |   catHead: {
18 |     width: 90,
19 |     height: 90,
20 |     backgroundImage: `radial-gradient(circle at 10px 10px, #ffffff, #ffffff 40%, ${theme.colorFurLight} 65%, ${theme.colorFurDark})`,
21 |     borderRadius: '50%',
22 |     top: 'calc(100% - 45px)'
23 |   },
24 |   catEars: {
25 |     position: 'absolute',
26 |     top: 0,
27 |     left: 0,
28 |     height: '50%',
29 |     width: '100%',
30 |     zIndex: -1
31 |   }
32 | }
33 | 
34 | const {classes} = jss.createStyleSheet(styles).attach()
35 | 
36 | export default () => `
37 |   <div class=${classes.catUpper}>
38 |     ${hand()}
39 |     ${hand()}
40 |     <div class=${classes.catHead}>
41 |       <div class=${classes.catEars}>
42 |         ${ear()}
43 |         ${ear()}
44 |       </div>
45 |       ${face()}
46 |     </div>
47 |   </div>
48 | `
49 | 


--------------------------------------------------------------------------------
/swinging-cat/src/yarn.js:
--------------------------------------------------------------------------------
 1 | import jss from './jss'
 2 | import * as theme from './theme'
 3 | 
 4 | const styles = {
 5 |   yarn: {
 6 |     position: 'absolute',
 7 |     top: 0,
 8 |     left: 0,
 9 |     width: 80,
10 |     height: 80,
11 |     borderRadius: '50%',
12 |     backgroundImage: `radial-gradient(circle at top left, #e97c7f, ${theme.colorYarn} 50%, #af1d22)`,
13 |     zIndex: 1,
14 |     '&:before': {
15 |       content: '""',
16 |       left: 'calc(50% + 7px)',
17 |       position: 'absolute',
18 |       width: 20,
19 |       height: 20,
20 |       borderRadius: '50%',
21 |       backgroundColor: '#fff',
22 |       top: -1
23 |     },
24 |     '&:after': {
25 |       content: '""',
26 |       right: 'calc(50% + 7px)',
27 |       position: 'absolute',
28 |       width: 20,
29 |       height: 20,
30 |       borderRadius: '50%',
31 |       backgroundColor: '#fff',
32 |       top: -1
33 |     }
34 |   }
35 | }
36 | 
37 | const {classes} = jss.createStyleSheet(styles).attach()
38 | 
39 | export default () => `<div class=${classes.yarn}></div>`
40 | 


--------------------------------------------------------------------------------
/swinging-cat/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var webpack = require('webpack')
 4 | var path = require('path')
 5 | 
 6 | module.exports = {
 7 |   entry: path.join(__dirname, 'index.js'),
 8 |   output: {
 9 |     path: path.join(__dirname, './dist'),
10 |     filename: 'app.js'
11 |   },
12 |   module: {
13 |     loaders: [
14 |       {
15 |         loader: 'babel-loader',
16 |         test: /\.js$/,
17 |         exclude: /node_modules/
18 |       }
19 |     ]
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------