├── .bowerrc
├── .editorconfig
├── .firebaserc
├── .gitignore
├── README.md
├── bower.json
├── database.rules.json
├── firebase.json
└── public
    ├── elements
        ├── elements.html
        ├── my-place.html
        └── work-places.html
    ├── images
        └── touch
        │   ├── apple-touch-icon.png
        │   ├── chrome-splashscreen-icon-384x384.png
        │   ├── chrome-touch-icon-192x192.png
        │   ├── icon-128x128.png
        │   ├── ms-icon-144x144.png
        │   └── ms-touch-icon-144x144-precomposed.png
    ├── index.html
    ├── manifest.json
    ├── scripts
        └── app.js
    └── styles
        ├── app-theme.html
        ├── main.css
        └── shared-styles.html


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "public/bower_components"
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | 
 8 | [*]
 9 | 
10 | # Change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 | 
14 | # We recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 | 
20 | [*.md]
21 | trim_trailing_whitespace = false
22 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "ondetrabalhar-faacc"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | firebase-debug.log
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Onde Trabalhar?
 2 | > Toda boa ferramenta começa com um bom nome. Ainda não decidimos o nosso,  [ajude-nos](https://github.com/trabalhando/ondetrabalhar/issues/1)!
 3 | 
 4 | Protótipo: [https://ondetrabalhar-faacc.firebaseapp.com](https://ondetrabalhar-faacc.firebaseapp.com)
 5 | 
 6 | ## Proposta
 7 | Listar bons lugares para trabalhar nas cidades brasileiras. Podemos listar cafés, coworkings, hotéis e onde mais for possível trabalhar.
 8 | 
 9 | ## Projetos similares
10 | - https://workfrom.co/
11 | - http://www.coworkingintown.com/
12 | - http://workhardanywhere.com/
13 | 
14 | ## Tecnologia
15 | [Ajude-nos a decidir qual a melhor tecnologia pra esse projeto](https://github.com/trabalhando/ondetrabalhar/issues/4).
16 | 
17 | ## Funcionalidades
18 | O que você gostaria de ver nessa ferramenta? [Comente nessa issue](https://github.com/trabalhando/ondetrabalhar/issues/3).
19 | 
20 | ## Executando o projeto localmente
21 | 
22 | ```bash
23 | $ npm install -g bower firebase-tools && bower install && firebase serve
24 | ```
25 | 
26 | ## Deploy para o firebase
27 | 
28 | ```bash
29 | $ firebase deploy
30 | ```
31 | 
32 | ## Contribua!
33 | Tarefas: [![Stories in Ready](https://badge.waffle.io/trabalhando/ondetrabalhar.svg?label=ready&title=Ready)](http://waffle.io/trabalhando/ondetrabalhar)
34 | 
35 | Slack: https://onde-trabalhar.herokuapp.com/
36 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ondetrabalhar",
 3 |   "homepage": "https://github.com/trabalhando/ondetrabalhar",
 4 |   "authors": [
 5 |     "klarkc <walker@praiseweb.com.br>"
 6 |   ],
 7 |   "description": "Exemplos de caso de uso para projeto ondetrabalhar",
 8 |   "main": "index.html",
 9 |   "keywords": [
10 |     "ondetrabalhar"
11 |   ],
12 |   "license": "MIT",
13 |   "private": true,
14 |   "ignore": [
15 |     "**/.*",
16 |     "node_modules",
17 |     "bower_components",
18 |     "test",
19 |     "tests"
20 |   ],
21 |   "dependencies": {
22 |     "polymer": "^1.6.1",
23 |     "iron-flex-layout": "^1.3.1",
24 |     "google-apis": "GoogleWebComponents/google-apis#^1.1.6",
25 |     "iron-icons": "^1.1.3",
26 |     "paper-styles": "^1.1.4",
27 |     "icon-rate": "^1.1.2",
28 |     "iron-input": "^1.0.10",
29 |     "google-map": "klarkc/google-map#UseDOMInMarkers",
30 |     "polymerfire": "^0.9.5",
31 |     "app-storage": "^0.9.4",
32 |     "paper-input": "^1.1.17",
33 |     "paper-material": "PolymerElements/paper-material#^1.0.6",
34 |     "paper-card": "PolymerElements/paper-card#^1.1.2",
35 |     "paper-button": "PolymerElements/paper-button#^1.0.13",
36 |     "paper-toast": "PolymerElements/paper-toast#^1.3.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rules": {
3 |     "places": {
4 |       ".read": true,
5 |       ".write": true
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "database": {
 3 |     "rules": "database.rules.json"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "public",
 7 |     "rewrites": [
 8 |       {
 9 |         "source": "**",
10 |         "destination": "/index.html"
11 |       }
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/public/elements/elements.html:
--------------------------------------------------------------------------------
 1 | <!-- Iron elements -->
 2 | <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 3 | <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
 4 | <link rel="import" href="../bower_components/iron-icons/maps-icons.html">
 5 | 
 6 | <!-- Paper elements -->
 7 | <link rel="import" href="../bower_components/paper-styles/color.html">
 8 | <link rel="import" href="../bower_components/paper-styles/shadow.html">
 9 | <link rel="import" href="../bower_components/paper-material/paper-material.html">
10 | <link rel="import" href="../bower_components/paper-toast/paper-toast.html">
11 | <link rel="import" href="../bower_components/paper-input/paper-input.html">
12 | <link rel="import" href="../bower_components/paper-button/paper-button.html">
13 | <link rel="import" href="../bower_components/paper-card/paper-card.html">
14 | 
15 | <!-- Google Web Components -->
16 | <link rel="import" href="../bower_components/google-map/google-map.html">
17 | <link rel="import" href="../bower_components/google-map/google-map-marker.html">
18 | <link rel="import" href="../bower_components/polymerfire/firebase-app.html">
19 | <link rel="import" href="../bower_components/polymerfire/firebase-query.html">
20 | <link rel="import" href="../bower_components/polymerfire/firebase-document.html">
21 | 
22 | <!-- Other Web Components -->
23 | <link rel="import" href="../bower_components/icon-rate/icon-rate.html">
24 | 
25 | <!-- Configure your routes here, suggestion: page.js -->
26 | <!-- <link rel="import" href="routing.html"> -->
27 | 
28 | <!-- App Elements -->
29 | <link rel="import" href="../styles/shared-styles.html">
30 | <link rel="import" href="../styles/app-theme.html">
31 | <link rel="import" href="work-places.html">
32 | <link rel="import" href="my-place.html">
33 | 
34 | <!-- App Behaviors -->
35 | 


--------------------------------------------------------------------------------
/public/elements/my-place.html:
--------------------------------------------------------------------------------
  1 | <dom-module id="my-place">
  2 | 
  3 |     <template>
  4 |       <style include="iron-flex shared-styles">
  5 |       :host {
  6 |         display: block;
  7 |       }
  8 | 
  9 |       paper-card {
 10 |         width: 100%;
 11 |       }
 12 |       </style>
 13 |       <paper-card>
 14 |         <div class="card-content">
 15 |           <paper-input
 16 |             id="name"
 17 |             label="Nome"
 18 |             value="{{name}}"
 19 |             placeholder="Digite o nome do local"
 20 |             required
 21 |             pattern="[\sa-zA-Z0-9]+">
 22 |           </paper-input>
 23 |           <paper-input
 24 |             id="lat"
 25 |             label= "Latitude"
 26 |             value="{{area.lat}}"
 27 |             step="0.001"
 28 |             required
 29 |             allowed-pattern="[-.\d]">
 30 |           </paper-input>
 31 |           <paper-input
 32 |             id="lon"
 33 |             label= "Longitude"
 34 |             value="{{area.lon}}"
 35 |             step="0.001"
 36 |             required
 37 |             allowed-pattern="[-.\d]">
 38 |           </paper-input>
 39 |           <paper-input
 40 |             id="site"
 41 |             label= "Site"
 42 |             value="{{site}}"
 43 |             required>
 44 |           </paper-input>
 45 |           <paper-input
 46 |             id="email"
 47 |             label= "Email"
 48 |             value="{{email}}">
 49 |           </paper-input>
 50 |           <paper-input
 51 |             id="phone"
 52 |             label= "Telefone"
 53 |             value="{{phone}}">
 54 |           </paper-input>
 55 |           <paper-input
 56 |             id="businessHoursStart"
 57 |             label= "Início do Expediente"
 58 |             value="{{businessHoursStart}}">
 59 |           </paper-input>
 60 |           <paper-input
 61 |             id="businessHoursEnd"
 62 |             label= "Fim do Expediente"
 63 |             value="{{businessHoursEnd}}">
 64 |           </paper-input>
 65 |           <icon-rate id="rate" rate="{{rate}}" interactive></icon-rate>
 66 |         </div>
 67 |         <div class="card-actions">
 68 |           <paper-button on-tap="_validate">Adicionar</paper-button>
 69 |         </div>
 70 |       </paper-card>
 71 |     </template>
 72 |     <script>
 73 |     Polymer({
 74 |         is: "my-place",
 75 |         properties: {
 76 |           area: Object,
 77 |           name: String,
 78 |           site: String,
 79 |           email: String,
 80 |           phone: String,
 81 |           businessHours: Object
 82 |         },
 83 |         _validate: function() {
 84 |           var inputs = Polymer.dom(this).querySelectorAll('paper-card paper-input');
 85 | 
 86 |           if(!this.$.name.validate()) return;
 87 |           if(!this.$.lat.validate()) return;
 88 |           if(!this.$.lon.validate()) return;
 89 |           if(!this.$.site.validate()) return;
 90 |           if(!this.$.email.validate()) return;
 91 |           if(!this.$.phone.validate()) return;
 92 |           if(!this.$.businessHoursStart.validate()) return;
 93 |           if(!this.$.businessHoursEnd.validate()) return;
 94 | 
 95 |           this.fire('add', {
 96 |             lat: this.area.lat,
 97 |             lon: this.area.lon,
 98 |             name: this.name,
 99 |             site: this.site,
100 |             email: this.email,
101 |             phone: this.phone,
102 |             businessHours: {
103 |               start: this.businessHoursStart,
104 |               end: this.businessHoursEnd
105 |             },
106 |             rate: this.rate
107 |           });
108 |         }
109 |     });
110 |     </script>
111 | 
112 | </dom-module>
113 | 


--------------------------------------------------------------------------------
/public/elements/work-places.html:
--------------------------------------------------------------------------------
 1 | <dom-module id="work-places">
 2 | 
 3 |     <template>
 4 |       <style include="shared-styles">
 5 |       :host {
 6 |         display: block;
 7 |         @apply(--disable-selection);
 8 |       }
 9 | 
10 |       google-map {
11 |         height: 600px;
12 |       }
13 | 
14 |       google-map-marker #target {
15 |         position: absolute;
16 |         top: calc(50% - 64px);
17 |         left: calc(50% - 32px);
18 |         color: var(--accent-color);
19 |         pointer-events: none;
20 |         --iron-icon-height: 64px;
21 |         --iron-icon-width: 64px;
22 |       }
23 |       </style>
24 |       <google-map
25 |         latitude="{{area.lat}}"
26 |         longitude="{{area.lon}}"
27 |         zoom="{{area.zoom}}"
28 |         single-info-window>
29 |           <google-map-marker
30 |             id="target"
31 |             icon="maps:my-location"
32 |             icon-scale="1.4"
33 |             icon-fill-color="#4285f4"
34 |             icon-stroke-color="#4285f4"
35 |             latitude="{{area.lat}}"
36 |             longitude="{{area.lon}}">
37 |           </google-map-marker>>
38 |           <template is="dom-repeat" items="{{places}}" as="place">
39 |           <google-map-marker
40 |             latitude="{{place.lat}}"
41 |             longitude="{{place.lon}}"
42 |             title="{{place.name}}"
43 |             icon="icons:star"
44 |             icon-fill-color="yellow"
45 |             icon-scale="{{_getScale(place.rate)}}">
46 |             <h2>{{place.name}}</h2>
47 |             <a href="{{place.site}}">{{place.site}}</a>
48 |             <p>{{place.email}}</p>
49 |             <p>{{place.phone}}</p>
50 |             <p>
51 |               Horário de funcionamento:
52 |             </p>
53 |             <p>Das {{place.businessHours.start}} às {{place.businessHours.end}}</p>
54 |             <icon-rate rate="{{place.rate}}" interactive></icon-rate>
55 |           </google-map-marker>
56 |         </template>
57 |       </google-map>
58 |     </template>
59 |     <script>
60 |     Polymer({
61 |         is: "work-places",
62 |         properties: {
63 |           places: {
64 |             type: Array
65 |           },
66 |           area: {
67 |             type: Object,
68 |             value: {lat: undefined, lon: undefined, zoom: undefined}
69 |           }
70 |         },
71 |         observers: [
72 |           '_placesChanged(places.*)'
73 |         ],
74 |         _placesChanged: function(changeRecord) {
75 |           console.log(changeRecord.path, 'changed to', changeRecord.value);
76 |         },
77 |         _getScale: function(rate) {
78 |           // Scale between 1 and 2, for rate between 1 and 5
79 |           var scale = (rate + 3) / 4;
80 |           if(scale<1) return 1;
81 |           if(scale>2) return 2;
82 |           return scale;
83 |         }
84 |     });
85 |     </script>
86 | 
87 | </dom-module>
88 | 


--------------------------------------------------------------------------------
/public/images/touch/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trabalhando/ondetrabalhar/8aad9deccfe5a6873f5d785437d7db37988256a5/public/images/touch/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/images/touch/chrome-splashscreen-icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trabalhando/ondetrabalhar/8aad9deccfe5a6873f5d785437d7db37988256a5/public/images/touch/chrome-splashscreen-icon-384x384.png


--------------------------------------------------------------------------------
/public/images/touch/chrome-touch-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trabalhando/ondetrabalhar/8aad9deccfe5a6873f5d785437d7db37988256a5/public/images/touch/chrome-touch-icon-192x192.png


--------------------------------------------------------------------------------
/public/images/touch/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trabalhando/ondetrabalhar/8aad9deccfe5a6873f5d785437d7db37988256a5/public/images/touch/icon-128x128.png


--------------------------------------------------------------------------------
/public/images/touch/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trabalhando/ondetrabalhar/8aad9deccfe5a6873f5d785437d7db37988256a5/public/images/touch/ms-icon-144x144.png


--------------------------------------------------------------------------------
/public/images/touch/ms-touch-icon-144x144-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trabalhando/ondetrabalhar/8aad9deccfe5a6873f5d785437d7db37988256a5/public/images/touch/ms-touch-icon-144x144-precomposed.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="pt">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="description" content="">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <title>Onde trabalhar</title>
 9 | 
10 |   <!-- Google Fonts -->
11 |   <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,300,300italic|Titillium+Web:400,400italic,300,300italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
12 | 
13 |   <!-- Third Party Libraries -->
14 |   <!-- Place here -->
15 | 
16 |   <!-- Chrome for Android theme color -->
17 |   <meta name="theme-color" content="#5D4037">
18 | 
19 |   <!-- Web Application Manifest -->
20 |   <link rel="manifest" href="manifest.json">
21 | 
22 |   <!-- Tile color for Win8 -->
23 |   <meta name="msapplication-TileColor" content="#5D4037">
24 | 
25 |   <!-- Add to homescreen for Chrome on Android -->
26 |   <meta name="mobile-web-app-capable" content="yes">
27 |   <meta name="application-name" content="Onde trabalhar">
28 |   <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
29 | 
30 |   <!-- Add to homescreen for Safari on iOS -->
31 |   <meta name="apple-mobile-web-app-capable" content="yes">
32 |   <meta name="apple-mobile-web-app-status-bar-style" content="black">
33 |   <meta name="apple-mobile-web-app-title" content="Onde trabalhar">
34 |   <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
35 | 
36 |   <!-- Tile icon for Win8 (144x144) -->
37 |   <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
38 | 
39 |   <link rel="stylesheet" href="styles/main.css">
40 | 
41 |   <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
42 | 
43 |   <!-- For future use of the vulcanize tool, all html imports (including components) are placed below -->
44 |   <link rel="import" href="elements/elements.html">
45 | </head>
46 | 
47 | <body unresolved>
48 |   <template is="dom-bind" id="app">
49 |     <div class="middle">
50 |       <paper-toast id="toast" text="{{message}}"></paper-toast>
51 |       <my-place area="{{area}}" on-add="_addPlace"></my-place>
52 | 
53 |       <work-places area="{{area}}" places="{{places}}"></work-places>
54 | 
55 |       <firebase-app
56 |         name="{{config.firebase.name}}"
57 |         auth-domain="{{config.firebase.authDomain}}"
58 |         database-url="{{config.firebase.databaseURL}}"
59 |         api-key="{{config.firebase.apiKey}}">
60 |       </firebase-app>
61 | 
62 |       <firebase-query
63 |         id="query"
64 |         app-name="{{config.firebase.name}}"
65 |         path="/places"
66 |         data="{{places}}"
67 |         log>
68 |       </firebase-query>
69 |     </div>
70 |   </template>
71 | 
72 |   <!-- App Script -->
73 |   <script src="scripts/app.js"></script>
74 | </body>
75 | 
76 | </html>
77 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Onde trabalhar",
 3 |   "short_name": "Onde trabalhar",
 4 |   "icons": [{
 5 |         "src": "images/touch/icon-72x72.png",
 6 |         "sizes": "72x72",
 7 |         "type": "image/png"
 8 |       }, {
 9 |         "src": "images/touch/icon-96x96.png",
10 |         "sizes": "96x96",
11 |         "type": "image/png"
12 |       }, {
13 |         "src": "images/touch/icon-128x128.png",
14 |         "sizes": "128x128",
15 |         "type": "image/png"
16 |       }, {
17 |         "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
18 |         "sizes": "144x144",
19 |         "type": "image/png"
20 |       }, {
21 |         "src": "images/touch/apple-touch-icon.png",
22 |         "sizes": "152x152",
23 |         "type": "image/png"
24 |       }, {
25 |         "src": "images/touch/chrome-touch-icon-192x192.png",
26 |         "sizes": "192x192",
27 |         "type": "image/png"
28 |       },{
29 |         "src": "images/touch/chrome-splashscreen-icon-384x384.png",
30 |         "sizes": "384x384",
31 |         "type": "image/png"
32 |       },{
33 |         "src": "images/touch/icon-512x512.png",
34 |         "sizes": "512x512",
35 |         "type": "image/png"
36 |       }],
37 |   "background_color": "#D7CCC8",
38 |   "display": "standalone",
39 |   "theme_color": "#795548"
40 | }
41 | 


--------------------------------------------------------------------------------
/public/scripts/app.js:
--------------------------------------------------------------------------------
 1 | (function(document) {
 2 |   'use strict';
 3 | 
 4 |   // Grab a reference to our auto-binding template
 5 |   // and give it some initial binding values
 6 |   // Learn more about auto-binding templates at http://goo.gl/Dx1u2g
 7 |   var app = document.querySelector('#app');
 8 | 
 9 |   // Configure app
10 |   app.config = {
11 |     firebase: {
12 |       name: "ondetrabalhar",
13 |       apiKey: "AIzaSyD7UAYUdafNm6oNssSrwjWptYJOWxrvzsg",
14 |       authDomain: "ondetrabalhar-faacc.firebaseapp.com",
15 |       databaseURL: "https://ondetrabalhar-faacc.firebaseio.com",
16 |       storageBucket: "ondetrabalhar-faacc.appspot.com"
17 |     }
18 |   };
19 | 
20 |   // Temporary localization
21 |   app.area = {lat: -14.8530933, lon: -40.8387877, zoom: 18};
22 | 
23 |   app.message = "IT's gonna be Legen... Wait for it...";
24 | 
25 |   window.addEventListener('WebComponentsReady', function(e){
26 |     app.message += ' DARY!';
27 |     app.$.toast.show();
28 |   });
29 | 
30 |   // Handle new place
31 |   app._addPlace = function(event) {
32 |     var place = event.detail;
33 |     app.$.query.ref.push(place);
34 |   };
35 | })(document);
36 | 


--------------------------------------------------------------------------------
/public/styles/app-theme.html:
--------------------------------------------------------------------------------
  1 | <!-- Palette generated by Material Palette - materialpalette.com/brown/teal -->
  2 | 
  3 | <style is="custom-style" include="shared-styles">
  4 |   :root {
  5 |     /*
  6 |     * You can use these generic variables in your elements for easy theming.
  7 |     * For example, if all your elements use `--primary-text-color` as its main
  8 |     * color, then switching from a light to a dark theme is just a matter of
  9 |     * changing the value of `--primary-text-color` in your application.
 10 |     */
 11 |     --primary-text-color: var(--light-theme-text-color);
 12 |     --primary-background-color: var(--light-theme-background-color);
 13 |     --secondary-text-color: var(--light-theme-secondary-color);
 14 |     --disabled-text-color: var(--light-theme-disabled-color);
 15 |     --divider-color: var(--light-theme-divider-color);
 16 |     --error-color: var(--paper-deep-orange-a700);
 17 |     /*
 18 |     * Primary and accent colors. Also see color.html for more colors.
 19 |     */
 20 |     --primary-color: var(--paper-brown-500);
 21 |     --light-primary-color: var(--paper-brown-100);
 22 |     --dark-primary-color: var(--paper-brown-700);
 23 |     --accent-color: var(--paper-teal-500);
 24 |     --light-accent-color: var(--paper-teal-100);
 25 |     --dark-accent-color: var(--paper-teal-900);
 26 |     /*
 27 |     * Material Design Light background theme
 28 |     */
 29 |     --light-theme-background-color: #ffffff;
 30 |     --light-theme-base-color: #000000;
 31 |     --light-theme-text-color: var(--paper-grey-900);
 32 |     --light-theme-secondary-color: #737373;  /* for secondary text and icons */
 33 |     --light-theme-disabled-color: #9b9b9b;  /* disabled/hint text */
 34 |     --light-theme-divider-color: #dbdbdb;
 35 |     /*
 36 |     * Material Design Dark background theme
 37 |     */
 38 |     --dark-theme-background-color: var(--paper-grey-900);
 39 |     --dark-theme-base-color: #ffffff;
 40 |     --dark-theme-text-color: #ffffff;
 41 |     --dark-theme-secondary-color: #bcbcbc;  /* for secondary text and icons */
 42 |     --dark-theme-disabled-color: #646464;  /* disabled/hint text */
 43 |     --dark-theme-divider-color: #3c3c3c;
 44 |     /*
 45 |     * Deprecated values because of their confusing names.
 46 |     */
 47 |     --text-primary-color: var(--dark-theme-text-color);
 48 |     --default-primary-color: var(--primary-color);
 49 | 
 50 |     /* Custom Mixin's */
 51 |     --disable-selection: {
 52 |       -webkit-touch-callout: none; /* iOS Safari */
 53 |       -webkit-user-select: none;   /* Chrome/Safari/Opera */
 54 |       -khtml-user-select: none;    /* Konqueror */
 55 |       -moz-user-select: none;      /* Firefox */
 56 |       -ms-user-select: none;       /* Internet Explorer/Edge */
 57 |       user-select: none;           /* Non-prefixed version, currently not supported by any browser */
 58 |     };
 59 |   }
 60 |   /* Typography */
 61 | 
 62 |   body {
 63 |     color: var(--primary-text-color);
 64 |     font: 400 14px / 21px Lato;
 65 |   }
 66 | 
 67 |   a {
 68 |     color: var(--accent-color);
 69 |   }
 70 | 
 71 |   h1,
 72 |   h2,
 73 |   h3,
 74 |   h4 {
 75 |     color: var(--primary-color);
 76 |     font-family: Titillium Web;
 77 |     margin-top: 14px;
 78 |     margin-bottom: 14px;
 79 |   }
 80 | 
 81 |   h2 {
 82 |     font-size: 36px;
 83 |     font-weight: 400;
 84 |     line-height: 32px;
 85 |   }
 86 | 
 87 |   h3 {
 88 |     font-size: 18px;
 89 |     font-weight: 400;
 90 |   }
 91 | 
 92 |   /* General styles (not related with components) */
 93 |   body {
 94 |     background-color: var(--divider-color);
 95 | 
 96 |     @apply(--layout-fullbleed);
 97 |     @apply(--layout-vertical);
 98 |   }
 99 | 
100 |   .middle {
101 |     width: 100%;
102 |     max-width: 960px;
103 |     margin-left: auto;
104 |     margin-right: auto;
105 |   }
106 | 
107 |   /* Material Design Adaptive Breakpoints */
108 |   /*
109 |   Below you'll find CSS media queries based on the breakpoint guidance
110 |   published by the Material Design team. You can choose to use, customise
111 |   or remove these breakpoints based on your needs.
112 |   http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
113 |   */
114 |   /* mobile-small */
115 |   @media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) { }
116 |   /* mobile-large */
117 |   @media all and (min-width: 361px) and (orientation: portrait) { }
118 |   /* mobile-small-landscape */
119 |   @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
120 |   /* mobile-large-landscape */
121 |   @media all and (min-width: 481px) and (orientation: landscape) { }
122 |   /* tablet-small-landscape */
123 |   @media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
124 |   /* tablet-large-landscape */
125 |   @media all and (min-width: 961px) and (orientation: landscape) { }
126 |   /* tablet-small */
127 |   @media all and (min-width: 600px) and (orientation: portrait) { }
128 |   /* tablet-large */
129 |   @media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
130 |   /* desktop-x-small-landscape */
131 |   @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
132 |   /* desktop-x-small */
133 |   @media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
134 |   /* desktop-small-landscape */
135 |   @media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
136 |   /* desktop-small */
137 |   @media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
138 |   /* desktop-medium-landscape */
139 |   @media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
140 |   /* desktop-medium */
141 |   @media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
142 |   /* desktop-large */
143 |   @media all and (min-width: 1281px) and (max-width: 1600px) { }
144 |   /* desktop-xlarge */
145 |   @media all and (min-width: 1601px) and (max-width: 1920px) { }
146 |   </style>
147 | 


--------------------------------------------------------------------------------
/public/styles/main.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | This main file is for splash screen, while app-theme and web components are not loaded
 3 | */
 4 | 
 5 | body {
 6 |   background: #fafafa;
 7 |   color: #4c4c4c;
 8 |   font: 400 14px / 21px Lato;
 9 | }
10 | 


--------------------------------------------------------------------------------
/public/styles/shared-styles.html:
--------------------------------------------------------------------------------
 1 | <!-- Web Components shared styles -->
 2 | <dom-module id="shared-styles">
 3 |   <template>
 4 |     <style>
 5 |     .middle work-places, .middle my-place {
 6 |       margin: 16px;
 7 |     }
 8 | 
 9 |     .middle work-places {
10 |       @apply(--shadow-elevation-2dp);
11 |     }
12 | 
13 |     icon-rate {
14 |       --icon-rate-filled: {
15 |         color: var(--paper-yellow-900);
16 |       };
17 | 
18 |       --icon-rate-empty: {
19 |         color: var(--paper-yellow-200);
20 |       };
21 |     }
22 |     </style>
23 |   </template>
24 | </dom-module>
25 | 


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