├── CNAME ├── docs ├── assets │ ├── js │ │ ├── docs.js │ │ └── sticky.js │ ├── img │ │ ├── avatar.jpg │ │ ├── avatar2.png │ │ ├── avatar3.jpg │ │ ├── avatar4.jpg │ │ ├── avatar5.png │ │ ├── avatar6.jpg │ │ ├── avatar7.jpg │ │ └── photo-couch.png │ └── css │ │ ├── pygments-manni.css │ │ ├── docs.min.css │ │ ├── normalize.css │ │ └── docs.css ├── dist │ ├── fonts │ │ ├── photon-entypo.eot │ │ ├── photon-entypo.ttf │ │ └── photon-entypo.woff │ └── template-app │ │ ├── images │ │ ├── avatar.jpg │ │ ├── avatar2.png │ │ ├── avatar3.jpg │ │ ├── avatar4.jpg │ │ ├── avatar5.png │ │ ├── avatar6.jpg │ │ └── avatar7.jpg │ │ ├── package.json │ │ ├── js │ │ ├── menu.js │ │ └── index.js │ │ ├── app.js │ │ └── index.html ├── _layouts │ └── default.html ├── _includes │ ├── nav.html │ ├── header.html │ ├── javascript.html │ └── footer.html ├── components │ ├── basic-window.html │ ├── bars.html │ ├── basic-sidebar.html │ ├── mini-sidebar.html │ ├── buttons.html │ ├── three-paned.html │ ├── buttons-mini.html │ ├── buttons-large.html │ ├── common-layout.html │ ├── bars-tabs.html │ ├── bars-actions.html │ ├── forms.html │ ├── button-groups.html │ ├── tables.html │ ├── lists.html │ ├── navs.html │ └── icons.html ├── index.html ├── demo-app.html ├── getting-started.html └── LICENSE ├── fonts ├── photon-entypo.eot ├── photon-entypo.ttf └── photon-entypo.woff ├── dist ├── fonts │ ├── photon-entypo.eot │ ├── photon-entypo.ttf │ └── photon-entypo.woff └── template-app │ ├── package.json │ ├── js │ └── menu.js │ ├── app.js │ └── index.html ├── sass ├── images.scss ├── appify.scss ├── photon.scss ├── grid.scss ├── navs.scss ├── tables.scss ├── bars.scss ├── lists.scss ├── base.scss ├── tabs.scss ├── variables.scss ├── button-groups.scss ├── forms.scss ├── utilities.scss ├── mixins.scss ├── buttons.scss ├── normalize.scss ├── docs.scss └── icons.scss ├── _config.yml ├── .travis.yml ├── .gitignore ├── LICENSE ├── package.json ├── README.md ├── Gruntfile.js └── CONTRIBUTING.md /CNAME: -------------------------------------------------------------------------------- 1 | photonkit.com 2 | -------------------------------------------------------------------------------- /docs/assets/js/docs.js: -------------------------------------------------------------------------------- 1 | $('.example-component-container').Stickyfill(); 2 | -------------------------------------------------------------------------------- /fonts/photon-entypo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/fonts/photon-entypo.eot -------------------------------------------------------------------------------- /fonts/photon-entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/fonts/photon-entypo.ttf -------------------------------------------------------------------------------- /fonts/photon-entypo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/fonts/photon-entypo.woff -------------------------------------------------------------------------------- /docs/assets/img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/assets/img/avatar.jpg -------------------------------------------------------------------------------- /dist/fonts/photon-entypo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/dist/fonts/photon-entypo.eot -------------------------------------------------------------------------------- /dist/fonts/photon-entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/dist/fonts/photon-entypo.ttf -------------------------------------------------------------------------------- /dist/fonts/photon-entypo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/dist/fonts/photon-entypo.woff -------------------------------------------------------------------------------- /docs/assets/img/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/assets/img/avatar2.png -------------------------------------------------------------------------------- /docs/assets/img/avatar3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/assets/img/avatar3.jpg -------------------------------------------------------------------------------- /docs/assets/img/avatar4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/assets/img/avatar4.jpg -------------------------------------------------------------------------------- /docs/assets/img/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/assets/img/avatar5.png -------------------------------------------------------------------------------- /docs/assets/img/avatar6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/assets/img/avatar6.jpg -------------------------------------------------------------------------------- /docs/assets/img/avatar7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/assets/img/avatar7.jpg -------------------------------------------------------------------------------- /docs/assets/img/photo-couch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/assets/img/photo-couch.png -------------------------------------------------------------------------------- /docs/dist/fonts/photon-entypo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/fonts/photon-entypo.eot -------------------------------------------------------------------------------- /docs/dist/fonts/photon-entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/fonts/photon-entypo.ttf -------------------------------------------------------------------------------- /docs/dist/fonts/photon-entypo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/fonts/photon-entypo.woff -------------------------------------------------------------------------------- /docs/dist/template-app/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/template-app/images/avatar.jpg -------------------------------------------------------------------------------- /docs/dist/template-app/images/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/template-app/images/avatar2.png -------------------------------------------------------------------------------- /docs/dist/template-app/images/avatar3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/template-app/images/avatar3.jpg -------------------------------------------------------------------------------- /docs/dist/template-app/images/avatar4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/template-app/images/avatar4.jpg -------------------------------------------------------------------------------- /docs/dist/template-app/images/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/template-app/images/avatar5.png -------------------------------------------------------------------------------- /docs/dist/template-app/images/avatar6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/template-app/images/avatar6.jpg -------------------------------------------------------------------------------- /docs/dist/template-app/images/avatar7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/connors/photon/HEAD/docs/dist/template-app/images/avatar7.jpg -------------------------------------------------------------------------------- /docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include header.html %} 5 | 6 | 7 | {{ content }} 8 | {% include footer.html %} 9 | {% include javascript.html %} 10 | 11 | 12 | -------------------------------------------------------------------------------- /dist/template-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "proton-template-app", 3 | "version": "1.0.0", 4 | "description": "A simple template app for Proton", 5 | "main": "app.js", 6 | "author": "Connor Sears", 7 | "scripts": { 8 | "start": "electron ." 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docs/dist/template-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "proton-template-app", 3 | "version": "1.0.0", 4 | "description": "A simple template app for Proton", 5 | "main": "app.js", 6 | "author": "Connor Sears", 7 | "scripts": { 8 | "start": "electron ." 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /sass/images.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Images.scss 3 | // -------------------------------------------------- 4 | 5 | img { 6 | -webkit-user-drag: text; 7 | } 8 | 9 | .img-circle { 10 | border-radius: 50%; 11 | } 12 | 13 | .img-rounded { 14 | border-radius: $default-border-radius; 15 | } 16 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Meta data 2 | name: Photon 3 | authors: Connor Sears 4 | description: Build desktop apps with simple HTML and CSS components. 5 | 6 | # Dependencies 7 | highlighter: rouge 8 | 9 | # Permalinks 10 | permalink: pretty 11 | 12 | # Server 13 | source: docs 14 | port: 4000 15 | url: http://photonkit.com 16 | -------------------------------------------------------------------------------- /docs/_includes/nav.html: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /sass/appify.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Basic styles that make web elements behave more like native applications 3 | // ------------------------------------------------------------------------ 4 | 5 | * { 6 | cursor: default; 7 | -webkit-user-select: none; 8 | } 9 | 10 | // Forms 11 | input, 12 | textarea { 13 | -webkit-user-select: text; 14 | } 15 | 16 | form, 17 | input, 18 | optgroup, 19 | select, 20 | textarea { 21 | -webkit-user-select: text; 22 | -webkit-app-region: no-drag; 23 | } 24 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | sudo: false 4 | 5 | git: 6 | depth: 10 7 | 8 | node_js: 9 | - "0.12" 10 | 11 | env: 12 | matrix: 13 | - RUBY_VERSION=2.0 14 | 15 | before_install: 16 | - rvm install $RUBY_VERSION 17 | - rvm use $RUBY_VERSION --fuzzy 18 | - export GEMDIR=$(rvm gemdir) 19 | 20 | install: 21 | - travis_retry npm install 22 | - travis_retry gem install --no-document "jekyll:~>3.0.0" "rouge:~>1.10" "sass:~>3.4" 23 | 24 | matrix: 25 | fast_finish: true 26 | -------------------------------------------------------------------------------- /docs/components/basic-window.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Basic window structure 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | Your application's content goes inside .window-content. 15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /sass/photon.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | @import "variables.scss"; 3 | 4 | // Mixins 5 | @import "mixins.scss"; 6 | 7 | // Normalize, Appify, Base, & Utilities CSS 8 | @import "normalize.scss"; 9 | @import "appify.scss"; 10 | @import "base.scss"; 11 | @import "utilities.scss"; 12 | 13 | // Components 14 | @import "buttons.scss"; 15 | @import "button-groups.scss"; 16 | @import "bars.scss"; 17 | @import "forms.scss"; 18 | @import "grid.scss"; 19 | @import "images.scss"; 20 | @import "lists.scss"; 21 | @import "navs.scss"; 22 | @import "icons.scss"; 23 | @import "tables.scss"; 24 | @import "tabs.scss"; 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | _gh_pages 3 | _site 4 | .ruby-version 5 | .sass-cache 6 | 7 | # Numerous always-ignore extensions 8 | *.diff 9 | *.err 10 | *.orig 11 | *.log 12 | *.rej 13 | *.swo 14 | *.swp 15 | *.zip 16 | *.vi 17 | *~ 18 | 19 | # OS or Editor folders 20 | .DS_Store 21 | ._* 22 | Thumbs.db 23 | .cache 24 | .project 25 | .settings 26 | .tmproj 27 | *.esproj 28 | nbproject 29 | *.sublime-project 30 | *.sublime-workspace 31 | .idea 32 | 33 | # Komodo 34 | *.komodoproject 35 | .komodotools 36 | 37 | # Folders to ignore 38 | node_modules 39 | bower_components 40 | example-components 41 | -------------------------------------------------------------------------------- /docs/_includes/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ page.title }} 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /docs/components/bars.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bars example 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Header

15 |
16 | 17 |
18 | 19 | 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/_includes/javascript.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /sass/grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // The Grid.css 3 | // -------------------------------------------------- 4 | 5 | .pane-group { 6 | position: absolute; 7 | top: 0; 8 | right: 0; 9 | bottom: 0; 10 | left: 0; 11 | display: flex; 12 | } 13 | 14 | .pane { 15 | position: relative; 16 | overflow-y: auto; 17 | flex: 1; 18 | border-left: 1px solid $border-color; 19 | 20 | &:first-child { 21 | border-left: 0; 22 | } 23 | } 24 | 25 | .pane-sm { 26 | max-width: 220px; 27 | min-width: 150px; 28 | } 29 | 30 | .pane-mini { 31 | width: 80px; 32 | flex: none; 33 | } 34 | 35 | .pane-one-fourth { 36 | width: 25%; 37 | flex: none; 38 | } 39 | 40 | .pane-one-third { 41 | width: 33.3%; 42 | flex: none; 43 | } 44 | -------------------------------------------------------------------------------- /docs/components/basic-sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sidebar layout 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
Sidebar
17 |
18 |
19 |
Main content pane
20 |
21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/components/mini-sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sidebar layout 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
Mini
17 |
18 |
19 |
Main content pane
20 |
21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/components/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons example 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/dist/template-app/js/menu.js: -------------------------------------------------------------------------------- 1 | var remote = require('remote') 2 | var Menu = remote.require('menu') 3 | var MenuItem = remote.require('menu-item') 4 | 5 | // Build our new menu 6 | var menu = new Menu() 7 | menu.append(new MenuItem({ 8 | label: 'Delete', 9 | click: function() { 10 | // Trigger an alert when menu item is clicked 11 | alert('Deleted') 12 | } 13 | })) 14 | menu.append(new MenuItem({ 15 | label: 'More Info...', 16 | click: function() { 17 | // Trigger an alert when menu item is clicked 18 | alert('Here is more information') 19 | } 20 | })) 21 | 22 | // Add the listener 23 | document.addEventListener('DOMContentLoaded', function () { 24 | document.querySelector('.js-context-menu').addEventListener('click', function (event) { 25 | menu.popup(remote.getCurrentWindow()); 26 | }) 27 | }) 28 | -------------------------------------------------------------------------------- /docs/components/three-paned.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Two paned layout 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
First pane
17 |
18 |
19 |
Second pane
20 |
21 |
22 |
Third pane
23 |
24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/components/buttons-mini.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons example 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/components/buttons-large.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons example 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /sass/navs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navs.scss 3 | // -------------------------------------------------- 4 | 5 | .nav-group { 6 | font-size: 14px; 7 | } 8 | 9 | .nav-group-item { 10 | padding: 2px 10px 2px 25px; 11 | display: block; 12 | color: $gray-color; 13 | text-decoration: none; 14 | white-space: nowrap; 15 | overflow: hidden; 16 | text-overflow: ellipsis; 17 | 18 | &:active, 19 | &.active { 20 | background-color: #dcdfe1; 21 | } 22 | 23 | .icon { 24 | width: 19px; // Prevents a one pixel cutoff 25 | height: 18px; 26 | float: left; 27 | color: #737475; 28 | margin-top: -3px; 29 | margin-right: 7px; 30 | font-size: 18px; 31 | text-align: center; 32 | } 33 | } 34 | 35 | .nav-group-title { 36 | margin: 0; 37 | padding: 10px 10px 2px; 38 | font-size: 12px; 39 | font-weight: 500; 40 | color: lighten($gray-color, 20%); 41 | } 42 | -------------------------------------------------------------------------------- /docs/components/common-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sidebar layout 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Header

15 |
16 |
17 |
18 |
19 |
Sidebar
20 |
21 |
22 |
Main content pane
23 |
24 |
25 |
26 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /sass/tables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navs.scss 3 | // -------------------------------------------------- 4 | 5 | table { 6 | width: 100%; 7 | border: 0; 8 | border-collapse: separate; 9 | font-size: 12px; 10 | text-align: left; 11 | } 12 | 13 | thead { 14 | background-color: #f5f5f4; 15 | } 16 | 17 | tbody { 18 | background-color: #fff; 19 | } 20 | 21 | .table-striped tr:nth-child(even) { 22 | background-color: #f5f5f4; 23 | } 24 | 25 | tr:active, 26 | .table-striped tr:active:nth-child(even) { 27 | color: #fff; 28 | background-color: $active-color; 29 | } 30 | 31 | thead tr:active { 32 | color: $gray-color; 33 | background-color: #f5f5f4; 34 | } 35 | 36 | th { 37 | font-weight: normal; 38 | border-right: 1px solid $border-color; 39 | border-bottom: 1px solid $border-color; 40 | } 41 | 42 | th, 43 | td { 44 | padding: 2px 15px; 45 | white-space: nowrap; 46 | overflow: hidden; 47 | text-overflow: ellipsis; 48 | 49 | &:last-child { 50 | border-right: 0; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /dist/template-app/js/menu.js: -------------------------------------------------------------------------------- 1 | // var remote = require('remote') 2 | // var Menu = remote.require('menu') 3 | // var MenuItem = remote.require('menu-item') 4 | const {remote} = require('electron') 5 | const {Menu,MenuItem} = remote 6 | 7 | // Build our new menu 8 | var menu = new Menu() 9 | menu.append(new MenuItem({ 10 | label: 'Delete', 11 | click: function() { 12 | // Trigger an alert when menu item is clicked 13 | alert('Deleted') 14 | } 15 | })) 16 | menu.append(new MenuItem({ 17 | label: 'More Info...', 18 | click: function() { 19 | // Trigger an alert when menu item is clicked 20 | alert('Here is more information') 21 | } 22 | })) 23 | 24 | // Add the listener 25 | document.addEventListener('DOMContentLoaded', function () { 26 | 27 | let filesContext = document.querySelectorAll('.file_arq'); 28 | 29 | filesContext.forEach(function(el){ 30 | el.addEventListener('click', function (event) { 31 | event.preventDefault() 32 | menu.popup(remote.getCurrentWindow()); 33 | }) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /docs/dist/template-app/js/index.js: -------------------------------------------------------------------------------- 1 | var remote = require('remote') 2 | var Menu = remote.require('menu') 3 | var MenuItem = remote.require('menu-item') 4 | 5 | var menu = new Menu() 6 | menu.append(new MenuItem({ 7 | label: 'Delete', 8 | click: function() { 9 | alert('Deleted') 10 | } 11 | })) 12 | menu.append(new MenuItem({ 13 | label: 'More Info...', 14 | click: function() { 15 | alert('Here is more information') 16 | } 17 | })) 18 | 19 | document.addEventListener('DOMContentLoaded', function () { 20 | document.querySelector('.js-context-menu').addEventListener('click', function (event) { 21 | // var BrowserWindow = require('remote').require('browser-window') 22 | // 23 | // var button = event.target 24 | // var windowPosition = BrowserWindow.getFocusedWindow().getPosition() 25 | // 26 | // var x = button.offsetLeft + windowPosition[0] + (button.offsetWidth / 2) 27 | // var y = button.offsetTop + windowPosition[1] + button.offsetHeight 28 | 29 | menu.popup(remote.getCurrentWindow()); 30 | }) 31 | }) 32 | -------------------------------------------------------------------------------- /docs/components/bars-tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bars example 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Header with tabs

15 |
16 | 17 |
18 |
19 | 20 | Tab 21 |
22 |
23 | 24 | Tab active 25 |
26 |
27 | 28 | Tab 29 |
30 |
31 | 32 |
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 connors and other contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /sass/bars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Bars.css 3 | // -------------------------------------------------- 4 | 5 | .toolbar { 6 | min-height: 22px; 7 | box-shadow: inset 0 1px 0 #f5f4f5; 8 | @include linear-gradient(#e8e6e8, #d1cfd1); 9 | @include clearfix; 10 | } 11 | 12 | .toolbar-header { 13 | border-bottom: 1px solid $dark-border-color; 14 | 15 | .title { 16 | margin-top: 1px; 17 | } 18 | } 19 | 20 | .toolbar-footer { 21 | border-top: 1px solid $dark-border-color; 22 | -webkit-app-region: drag; 23 | } 24 | 25 | // Simple centered title to go in the toolbar 26 | .title { 27 | margin: 0; 28 | font-size: 12px; 29 | font-weight: 400; 30 | text-align: center; 31 | color: #555; 32 | cursor: default; 33 | } 34 | 35 | // Borderless toolbar for the clean look 36 | .toolbar-borderless { 37 | border-top: 0; 38 | border-bottom: 0; 39 | } 40 | 41 | // Buttons in toolbars 42 | .toolbar-actions { 43 | margin-top: 4px; 44 | margin-bottom: 3px; 45 | padding-right: 3px; 46 | padding-left: 3px; 47 | padding-bottom: 3px; 48 | -webkit-app-region: drag; 49 | @include clearfix; 50 | 51 | > .btn, 52 | > .btn-group { 53 | margin-left: 4px; 54 | margin-right: 4px; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /sass/lists.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Lists.scss 3 | // -------------------------------------------------- 4 | 5 | // List groups 6 | // These are to be used when shows list items that contain 7 | // more substanstial amounts of information. (headings, images, text, etc.) 8 | 9 | .list-group { 10 | width: 100%; 11 | list-style: none; 12 | margin: 0; 13 | padding: 0; 14 | 15 | 16 | * { 17 | margin: 0; 18 | white-space: nowrap; 19 | overflow: hidden; 20 | text-overflow: ellipsis; 21 | } 22 | } 23 | 24 | .list-group-item { 25 | padding: 10px; 26 | font-size: 12px; 27 | color: #414142; 28 | border-top: 1px solid $border-color; 29 | 30 | &:first-child { 31 | border-top: 0; 32 | } 33 | 34 | &.active, 35 | // `.selected` is deprecated. Use `.active` instead. 36 | &.selected { 37 | color: #fff; 38 | background-color: $active-color; 39 | } 40 | } 41 | 42 | .list-group-header { 43 | padding: 10px; 44 | } 45 | 46 | // Media objects in lists 47 | .media-object { 48 | margin-top: 3px; 49 | } 50 | 51 | .media-object.pull-left { 52 | margin-right: 10px 53 | } 54 | 55 | .media-object.pull-right { 56 | margin-left: 10px 57 | } 58 | 59 | .media-body { 60 | overflow: hidden; 61 | } 62 | -------------------------------------------------------------------------------- /docs/_includes/footer.html: -------------------------------------------------------------------------------- 1 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "photon", 3 | "version": "0.1.2", 4 | "author": "Connor Sears", 5 | "keywords": [ 6 | "photon", 7 | "html", 8 | "css", 9 | "electron" 10 | ], 11 | "style": "dist/css/photon.css", 12 | "sass": "sass/photon.scss", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/connors/photon.git" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/connors/photon/issues" 19 | }, 20 | "scripts": { 21 | "start": "electron dist/template-app", 22 | "build": "grunt" 23 | }, 24 | "license": "MIT", 25 | "devDependencies": { 26 | "electron-prebuilt": "^0.36.0", 27 | "grunt": "~0.4.5", 28 | "grunt-banner": "~0.5.0", 29 | "grunt-cli": "^0.1.13", 30 | "grunt-contrib-clean": "~0.6.0", 31 | "grunt-contrib-compress": "~0.13.0", 32 | "grunt-contrib-concat": "~0.5.1", 33 | "grunt-contrib-connect": "~0.11.2", 34 | "grunt-contrib-copy": "~0.8.0", 35 | "grunt-contrib-cssmin": "~0.13.0", 36 | "grunt-contrib-sass": "~0.9.2", 37 | "grunt-contrib-watch": "~0.6.1", 38 | "grunt-html": "~5.0.0", 39 | "grunt-jekyll": "~0.4.2", 40 | "grunt-sed": "twbs/grunt-sed#v0.2.0", 41 | "load-grunt-tasks": "~3.2.0", 42 | "time-grunt": "~1.2.0" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /sass/base.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // -------------------------------------------------- 4 | 5 | * { 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | } 9 | 10 | html { 11 | height: 100%; 12 | width: 100%; 13 | overflow: hidden; 14 | } 15 | 16 | body { 17 | height: 100%; 18 | padding: 0; 19 | margin: 0; 20 | font-family: $font-family-default; 21 | font-size: $font-size-default; 22 | line-height: $line-height-default; 23 | color: $gray-color; 24 | background-color: transparent; 25 | } 26 | 27 | hr { 28 | margin: 15px 0; 29 | overflow: hidden; 30 | background: transparent; 31 | border: 0; 32 | border-bottom: 1px solid $border-color; 33 | } 34 | 35 | // Typography 36 | h1, h2, h3, h4, h5, h6 { 37 | margin-top: 20px; 38 | margin-bottom: 10px; 39 | font-weight: 500; 40 | white-space: nowrap; 41 | overflow: hidden; 42 | text-overflow: ellipsis; 43 | } 44 | 45 | h1 { font-size: 36px; } 46 | h2 { font-size: 30px; } 47 | h3 { font-size: 24px; } 48 | h4 { font-size: 18px; } 49 | h5 { font-size: 14px; } 50 | h6 { font-size: 12px; } 51 | 52 | // Basic app structure 53 | .window { 54 | position: absolute; 55 | top: 0; 56 | right: 0; 57 | bottom: 0; 58 | left: 0; 59 | display: flex; 60 | flex-direction: column; 61 | background-color: $chrome-color; 62 | } 63 | 64 | .window-content { 65 | position: relative; 66 | overflow-y: auto; 67 | display: flex; 68 | flex: 1; 69 | } 70 | -------------------------------------------------------------------------------- /sass/tabs.scss: -------------------------------------------------------------------------------- 1 | // Tabs 2 | 3 | .tab-group { 4 | margin-top: -1px; 5 | display: flex; 6 | border-top: 1px solid #989698; 7 | border-bottom: 1px solid #989698; 8 | } 9 | 10 | .tab-item { 11 | position: relative; 12 | flex: 1; 13 | padding: 3px; 14 | font-size: 12px; 15 | text-align: center; 16 | border-left: 1px solid #989698; 17 | @include linear-gradient(#b8b6b8, #b0aeb0); 18 | 19 | &:first-child { 20 | border-left: 0; 21 | } 22 | 23 | &.active { 24 | @include linear-gradient(#d4d2d4, #cccacc); 25 | } 26 | 27 | .icon-close-tab { 28 | position: absolute; 29 | top: 50%; 30 | left: 5px; 31 | width: 15px; 32 | height: 15px; 33 | font-size: 15px; 34 | line-height: 15px; 35 | text-align: center; 36 | color: #666; 37 | opacity: 0; 38 | transition: opacity .1s linear, background-color .1s linear; 39 | border-radius: 3px; 40 | transform: translateY(-50%); 41 | z-index: 10; 42 | } 43 | 44 | &:after { 45 | position: absolute; 46 | top: 0; 47 | right: 0; 48 | bottom: 0; 49 | left: 0; 50 | content: ""; 51 | background-color: rgba(0,0,0,.08); 52 | opacity: 0; 53 | transition: opacity .1s linear; 54 | z-index: 1; 55 | } 56 | 57 | // Okay, I know... this is nuts but... 58 | &:hover:not(.active):after { 59 | opacity: 1; 60 | } 61 | 62 | &:hover .icon-close-tab { 63 | opacity: 1; 64 | } 65 | 66 | .icon-close-tab:hover { 67 | background-color: rgba(0,0,0,.08); 68 | } 69 | } 70 | 71 | .tab-item-fixed { 72 | flex: none; 73 | padding: 3px 10px; 74 | } 75 | -------------------------------------------------------------------------------- /docs/dist/template-app/app.js: -------------------------------------------------------------------------------- 1 | var app = require('app'); // Module to control application life. 2 | var BrowserWindow = require('browser-window'); // Module to create native browser window. 3 | 4 | // Keep a global reference of the window object, if you don't, the window will 5 | // be closed automatically when the JavaScript object is garbage collected. 6 | var mainWindow = null; 7 | 8 | // Quit when all windows are closed. 9 | app.on('window-all-closed', function() { 10 | // On OS X it is common for applications and their menu bar 11 | // to stay active until the user quits explicitly with Cmd + Q 12 | if (process.platform != 'darwin') { 13 | app.quit(); 14 | } 15 | }); 16 | 17 | // This method will be called when Electron has finished 18 | // initialization and is ready to create browser windows. 19 | app.on('ready', function() { 20 | // Create the browser window. 21 | mainWindow = new BrowserWindow({ 22 | width: 600, 23 | height: 300, 24 | 'min-width': 500, 25 | 'min-height': 200, 26 | 'accept-first-mouse': true, 27 | 'title-bar-style': 'hidden' 28 | }); 29 | 30 | // and load the index.html of the app. 31 | mainWindow.loadURL('file://' + __dirname + '/index.html'); 32 | 33 | // Open the DevTools. 34 | //mainWindow.openDevTools(); 35 | 36 | // Emitted when the window is closed. 37 | mainWindow.on('closed', function() { 38 | // Dereference the window object, usually you would store windows 39 | // in an array if your app supports multi windows, this is the time 40 | // when you should delete the corresponding element. 41 | mainWindow = null; 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /dist/template-app/app.js: -------------------------------------------------------------------------------- 1 | // {app} Module to control application life. 2 | // {BrowserWindow} Module to create native browser window. 3 | const {app, BrowserWindow} = require('electron') 4 | 5 | // Keep a global reference of the window object, if you don't, the window will 6 | // be closed automatically when the JavaScript object is garbage collected. 7 | var mainWindow = null; 8 | 9 | // Quit when all windows are closed. 10 | app.on('window-all-closed', function() { 11 | // On OS X it is common for applications and their menu bar 12 | // to stay active until the user quits explicitly with Cmd + Q 13 | if (process.platform != 'darwin') { 14 | app.quit(); 15 | } 16 | }); 17 | 18 | // This method will be called when Electron has finished 19 | // initialization and is ready to create browser windows. 20 | app.on('ready', function() { 21 | // Create the browser window. 22 | mainWindow = new BrowserWindow({ 23 | width: 800, 24 | height: 600, 25 | minWidth: 500, 26 | minHeight: 200, 27 | acceptFirstMouse: true, 28 | titleBarStyle: 'hidden', 29 | frame: false 30 | }); 31 | 32 | // and load the index.html of the app. 33 | mainWindow.loadURL('file://' + __dirname + '/index.html'); 34 | 35 | // Open the DevTools. 36 | //mainWindow.openDevTools(); 37 | 38 | // Emitted when the window is closed. 39 | mainWindow.on('closed', function() { 40 | // Dereference the window object, usually you would store windows 41 | // in an array if your app supports multi windows, this is the time 42 | // when you should delete the corresponding element. 43 | mainWindow = null; 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /sass/variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | 5 | // Type 6 | // -------------------------------------------------- 7 | 8 | $font-path: '../fonts/' !default; 9 | // Try to use the system's font on whatever platform the user is on. 10 | $font-family-default: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif !default; 11 | $font-size-default: 13px !default; 12 | $font-weight: 500 !default; 13 | $font-weight-bold: 700 !default; 14 | $font-weight-light: 300 !default; 15 | $line-height-default: 1.6 !default; 16 | 17 | 18 | // Colors 19 | // -------------------------------------------------- 20 | 21 | // Main colors 22 | $primary-color: #3b99fc !default; 23 | $chrome-color: #fff !default; 24 | 25 | // Copy 26 | $gray-color: #333 !default; 27 | 28 | // Borders 29 | $border-color: #ddd !default; 30 | $dark-border-color: #c2c0c2 !default; 31 | $darker-bottom-border-color: #a19fa1 !default; 32 | $toolbar-border-color: #939293 !default; 33 | 34 | // Action colors 35 | $default-color: #fff !default; 36 | $positive-color: #34c84a !default; 37 | $negative-color: #fc605b !default; 38 | $warning-color: #fdbc40 !default; 39 | 40 | // Shades 41 | $dark-color: #57acf5 !default; 42 | 43 | // Focus and active colors 44 | $active-color: #116cd6; 45 | $focus-input-color: lighten($primary-color, 10%) !default; 46 | 47 | // Other 48 | // -------------------------------------------------- 49 | 50 | // Border radius 51 | $default-border-radius: 4px; 52 | 53 | // Padding 54 | $padding: 10px; 55 | $padding-mini: 3px; 56 | $padding-less: 5px; 57 | $padding-more: 20px; 58 | -------------------------------------------------------------------------------- /sass/button-groups.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Button-groups.css 3 | // Adapted from Bootstrap's button-groups.less (https://github.com/twbs/bootstrap/blob/master/less/button-groups.less) 4 | // -------------------------------------------------- 5 | 6 | // Button groups 7 | .btn-group { 8 | position: relative; 9 | display: inline-block; 10 | vertical-align: middle; // match .btn alignment given font-size hack above 11 | -webkit-app-region: no-drag; 12 | 13 | .btn { 14 | position: relative; 15 | float: left; 16 | 17 | // Bring the "active" button to the front 18 | &:focus, 19 | &:active{ 20 | z-index: 2; 21 | } 22 | 23 | &.active { 24 | z-index: 3; 25 | } 26 | } 27 | } 28 | 29 | // Prevent double borders when buttons are next to each other 30 | .btn-group { 31 | .btn + .btn, 32 | .btn + .btn-group, 33 | .btn-group + .btn, 34 | .btn-group + .btn-group { 35 | margin-left: -1px; 36 | } 37 | 38 | > .btn:first-child { 39 | border-top-right-radius: 0; 40 | border-bottom-right-radius: 0; 41 | } 42 | 43 | > .btn:last-child { 44 | border-top-left-radius: 0; 45 | border-bottom-left-radius: 0; 46 | } 47 | 48 | > .btn:not(:first-child):not(:last-child) { 49 | border-radius: 0; 50 | } 51 | 52 | .btn + .btn { 53 | border-left: 1px solid $dark-border-color; 54 | } 55 | 56 | .btn + .btn.active { 57 | border-left: 0; 58 | } 59 | 60 | // Selected state 61 | .active { 62 | color: #fff; 63 | border: 1px solid transparent; 64 | background-color: #6d6c6d; 65 | background-image: none; 66 | } 67 | 68 | // Invert the icon in the active button 69 | .active .icon { 70 | color: #fff; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /docs/components/bars-actions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bars example 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Header with actions

15 | 16 |
17 |
18 | 21 | 24 | 27 | 30 | 33 |
34 | 35 | 39 | 40 | 43 |
44 |
45 | 46 |
47 | 48 | 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /sass/forms.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Forms.css 3 | // Adapted from Bootstrap's forms.less (https://github.com/twbs/bootstrap/blob/master/less/forms.less) 4 | // -------------------------------------------------- 5 | 6 | label { 7 | display: inline-block; 8 | font-size: $font-size-default; 9 | margin-bottom: 5px; 10 | white-space: nowrap; 11 | overflow: hidden; 12 | text-overflow: ellipsis; 13 | } 14 | 15 | input[type="search"] { 16 | box-sizing: border-box; 17 | } 18 | 19 | input[type="radio"], 20 | input[type="checkbox"] { 21 | margin: 4px 0 0; 22 | line-height: normal; 23 | } 24 | 25 | .form-control { 26 | display: inline-block; 27 | width: 100%; 28 | min-height: 25px; 29 | padding: $padding-less $padding; 30 | font-size: $font-size-default; 31 | line-height: $line-height-default; 32 | background-color: $chrome-color; 33 | border: 1px solid $border-color; 34 | border-radius: $default-border-radius; 35 | outline: none; 36 | 37 | &:focus { 38 | border-color: $focus-input-color; 39 | box-shadow: 0 0 0 3px $focus-input-color; 40 | } 41 | } 42 | 43 | // Reset height for `textarea`s 44 | textarea { 45 | height: auto; 46 | } 47 | 48 | // Form groups 49 | // 50 | // Designed to help with the organization and spacing of vertical forms. For 51 | // horizontal forms, use the predefined grid classes. 52 | 53 | .form-group { 54 | margin-bottom: 10px; 55 | } 56 | 57 | // Checkboxes and radios 58 | // 59 | // Indent the labels to position radios/checkboxes as hanging controls. 60 | 61 | .radio, 62 | .checkbox { 63 | position: relative; 64 | display: block; 65 | margin-top: 10px; 66 | margin-bottom: 10px; 67 | 68 | label { 69 | padding-left: 20px; 70 | margin-bottom: 0; 71 | font-weight: normal; 72 | } 73 | } 74 | 75 | .radio input[type="radio"], 76 | .radio-inline input[type="radio"], 77 | .checkbox input[type="checkbox"], 78 | .checkbox-inline input[type="checkbox"] { 79 | position: absolute; 80 | margin-left: -20px; 81 | margin-top: 4px; 82 | } 83 | 84 | // Form actions 85 | .form-actions .btn { 86 | margin-right: 10px; 87 | 88 | &:last-child { 89 | margin-right: 0; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /docs/components/forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Forms example 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 | 42 |
43 | 46 |
47 |
48 | 51 |
52 |
53 | 57 |
58 |
59 | 63 |
64 |
65 | 66 | 67 |
68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Photon 4 | --- 5 | 6 |
7 |
8 | {% include nav.html %} 9 | 10 |
11 |

The fastest way to build beautiful Electron apps using simple HTML and CSS

12 | 13 |
14 | 15 |
16 | 17 | Download Photon 18 | See all components 19 |
20 | Desktop photo by Bill Couch 21 |
22 |
23 | 24 |
25 |
26 |
27 |
28 |

Powered by Electron

29 |

Underneath it all is Electron. Originally built for GitHub's 30 | Atom text editor, Electron is the easiest way to build cross-platform desktop applications.

31 | 32 |

If you can write a bit of HTML, CSS, and JS, you can build full featured applications. 33 | Companies like Microsoft, Facebook, and Slack are using it – why aren't you?

34 | 35 | Learn more 36 |
37 |
38 |

Become a contributor

39 |

There's still a lot to do before Photon reaches version 1.0. If you're interested in working towards that goal, 40 | be sure to head over to the GitHub project and look over the open 41 | issues and pull requests. 42 |

43 | 44 |

Have something specific in mind? Open a pull request and tell everyone why it's awesome.

45 | 46 | View the GitHub project 47 |
48 |
49 |
50 |
51 | -------------------------------------------------------------------------------- /sass/utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Utilities styles 3 | // -------------------------------------------------- 4 | 5 | // Utility classes 6 | .selectable-text { 7 | cursor: text; 8 | -webkit-user-select: text; 9 | } 10 | 11 | // Text alignment 12 | .text-center { 13 | text-align: center; 14 | } 15 | 16 | .text-right { 17 | text-align: right; 18 | } 19 | 20 | .text-left { 21 | text-align: left; 22 | } 23 | 24 | // Floats 25 | .pull-left { 26 | float: left; 27 | } 28 | 29 | .pull-right { 30 | float: right; 31 | } 32 | 33 | // Padding 34 | .padded { 35 | padding: $padding; 36 | } 37 | 38 | .padded-less { 39 | padding: $padding-less; 40 | } 41 | 42 | .padded-more { 43 | padding: $padding-more; 44 | } 45 | 46 | // Vertical Padding 47 | .padded-vertically { 48 | padding-top: $padding; 49 | padding-bottom: $padding; 50 | } 51 | 52 | .padded-vertically-less { 53 | padding-top: $padding-less; 54 | padding-bottom: $padding-less; 55 | } 56 | 57 | .padded-vertically-more { 58 | padding-top: $padding-more; 59 | padding-bottom: $padding-more; 60 | } 61 | 62 | // Horizontal Padding 63 | .padded-horizontally { 64 | padding-right: $padding; 65 | padding-left: $padding; 66 | } 67 | 68 | .padded-horizontally-less { 69 | padding-right: $padding-less; 70 | padding-left: $padding-less; 71 | } 72 | 73 | .padded-horizontally-more { 74 | padding-right: $padding-more; 75 | padding-left: $padding-more; 76 | } 77 | 78 | // Padding top 79 | .padded-top { 80 | padding-top: $padding; 81 | } 82 | 83 | .padded-top-less { 84 | padding-top: $padding-less; 85 | } 86 | 87 | .padded-top-more { 88 | padding-top: $padding-more; 89 | } 90 | 91 | // Padding bottom 92 | .padded-bottom { 93 | padding-bottom: $padding; 94 | } 95 | 96 | .padded-bottom-less { 97 | padding-bottom: $padding-less; 98 | } 99 | 100 | .padded-bottom-more { 101 | padding-bottom: $padding-more; 102 | } 103 | 104 | // Set the background-color to set a sidebar back a bit. 105 | .sidebar { 106 | background-color: #f5f5f4; 107 | } 108 | 109 | // Allow the window to be dragged around the desktop by any element in the application. 110 | .draggable { 111 | -webkit-app-region: drag; 112 | } 113 | 114 | // within draggable regions, allow specific elements to be exempted. 115 | .not-draggable { 116 | -webkit-app-region: no-drag; 117 | } 118 | 119 | // Clearfix 120 | .clearfix { 121 | @include clearfix(); 122 | } 123 | -------------------------------------------------------------------------------- /sass/mixins.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Mixins 3 | // -------------------------------------------------- 4 | 5 | // General 6 | // -------------------------------------------------- 7 | 8 | // Clearfix 9 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 10 | // 11 | // For modern browsers 12 | // 1. The space content is one way to avoid an Opera bug when the 13 | // contenteditable attribute is included anywhere else in the document. 14 | // Otherwise it causes space to appear at the top and bottom of elements 15 | // that are clearfixed. 16 | // 2. The use of `table` rather than `block` is only necessary if using 17 | // `:before` to contain the top-margins of child elements. 18 | @mixin clearfix() { 19 | &:before, 20 | &:after { 21 | display: table; // 2 22 | content: " "; // 1 23 | } 24 | &:after { 25 | clear: both; 26 | } 27 | } 28 | 29 | // Box shadow 30 | @mixin box-shadow($shadow...) { 31 | -webkit-box-shadow: $shadow; 32 | box-shadow: $shadow; 33 | } 34 | 35 | // Gradients 36 | 37 | // From top to bottom 38 | @mixin linear-gradient($color-from, $color-to) { 39 | background-color: $color-from; // Old browsers 40 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+ 41 | background-image: -webkit-linear-gradient(top, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+ 42 | background-image: linear-gradient(to bottom, $color-from 0%, $color-to 100%); // W3C 43 | } 44 | 45 | // From left to right 46 | @mixin split-linear-gradient($color-from, $color-to) { 47 | background-color: $color-from; // Old browsers 48 | background-image: -webkit-gradient(linear, left top, right top, color-stop(50%,$color-from), color-stop(50%,$color-to)); // Chrome, Safari4+ 49 | background-image: -webkit-linear-gradient(left, $color-from 50%, $color-to 50%); // Chrome10+, Safari5.1+ 50 | background-image: linear-gradient(to right, $color-from 50%, $color-to 50%); // W3C 51 | } 52 | 53 | // From bottom left to top right 54 | @mixin directional-gradient($color-from, $color-to, $deg: 45deg) { 55 | background-color: $color-from; // Old browsers 56 | background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%,$color-from), color-stop(100%,$color-to)); // Chrome, Safari4+ 57 | background-image: -webkit-linear-gradient($deg, $color-from 0%, $color-to 100%); // Chrome10+, Safari5.1+ 58 | background-image: -moz-linear-gradient($deg, $color-from 0%, $color-to 100%); // FF3.6+ 59 | background-image: linear-gradient($deg, $color-from 0%, $color-to 100%); // W3C 60 | } 61 | -------------------------------------------------------------------------------- /docs/components/button-groups.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons example 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 |
19 | 22 | 25 | 28 | 31 | 34 |
35 | 36 |
37 | 38 |
39 | 42 | 45 | 48 | 51 | 54 |
55 | 56 |
57 | 58 |
59 | 62 | 65 | 68 | 71 | 74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /docs/components/tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tables example 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
NameKindFile Size
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
photon.cssCSS28K
92 |
93 |
94 |
95 |
96 | 97 | 98 | -------------------------------------------------------------------------------- /docs/components/lists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lists example 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |
    23 |
  • 24 | 25 |
    • 26 |
  • 27 | 28 |
    29 | List item title 30 |

    Lorem ipsum dolor sit amet.

    31 |
    32 |
    • 33 |
  • 34 | 35 |
    36 | List item title 37 |

    Lorem ipsum dolor sit amet.

    38 |
    39 |
    • 40 |
  • 41 | 42 |
    43 | List item title 44 |

    Lorem ipsum dolor sit amet.

    45 |
    46 |
    • 47 |
  • 48 | 49 |
    50 | List item title 51 |

    Lorem ipsum dolor sit amet.

    52 |
    53 |
    • 54 |
  • 55 | 56 |
    57 | List item title 58 |

    Lorem ipsum dolor sit amet.

    59 |
    60 |
    • 61 |
  • 62 | 63 |
    64 | List item title 65 |

    Lorem ipsum dolor sit amet.

    66 |
    67 |
    • 68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /docs/assets/css/pygments-manni.css: -------------------------------------------------------------------------------- 1 | .hll { background-color: #ffffcc } 2 | /*{ background: #f0f3f3; }*/ 3 | .c { color: #999; } /* Comment */ 4 | .err { color: #AA0000; background-color: #FFAAAA } /* Error */ 5 | .k { color: #006699; } /* Keyword */ 6 | .o { color: #555555 } /* Operator */ 7 | .cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */ 8 | .cp { color: #009999 } /* Comment.Preproc */ 9 | .c1 { color: #999; } /* Comment.Single */ 10 | .cs { color: #999; } /* Comment.Special */ 11 | .gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ 12 | .ge { font-style: italic } /* Generic.Emph */ 13 | .gr { color: #FF0000 } /* Generic.Error */ 14 | .gh { color: #003300; } /* Generic.Heading */ 15 | .gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ 16 | .go { color: #AAAAAA } /* Generic.Output */ 17 | .gp { color: #000099; } /* Generic.Prompt */ 18 | .gs { } /* Generic.Strong */ 19 | .gu { color: #003300; } /* Generic.Subheading */ 20 | .gt { color: #99CC66 } /* Generic.Traceback */ 21 | .kc { color: #006699; } /* Keyword.Constant */ 22 | .kd { color: #006699; } /* Keyword.Declaration */ 23 | .kn { color: #006699; } /* Keyword.Namespace */ 24 | .kp { color: #006699 } /* Keyword.Pseudo */ 25 | .kr { color: #006699; } /* Keyword.Reserved */ 26 | .kt { color: #007788; } /* Keyword.Type */ 27 | .m { color: #FF6600 } /* Literal.Number */ 28 | .s { color: #d44950 } /* Literal.String */ 29 | .na { color: #4f9fcf } /* Name.Attribute */ 30 | .nb { color: #336666 } /* Name.Builtin */ 31 | .nc { color: #00AA88; } /* Name.Class */ 32 | .no { color: #336600 } /* Name.Constant */ 33 | .nd { color: #9999FF } /* Name.Decorator */ 34 | .ni { color: #999999; } /* Name.Entity */ 35 | .ne { color: #CC0000; } /* Name.Exception */ 36 | .nf { color: #CC00FF } /* Name.Function */ 37 | .nl { color: #9999FF } /* Name.Label */ 38 | .nn { color: #00CCFF; } /* Name.Namespace */ 39 | .nt { color: #2f6f9f; } /* Name.Tag */ 40 | .nv { color: #003333 } /* Name.Variable */ 41 | .ow { color: #000000; } /* Operator.Word */ 42 | .w { color: #bbbbbb } /* Text.Whitespace */ 43 | .mf { color: #FF6600 } /* Literal.Number.Float */ 44 | .mh { color: #FF6600 } /* Literal.Number.Hex */ 45 | .mi { color: #FF6600 } /* Literal.Number.Integer */ 46 | .mo { color: #FF6600 } /* Literal.Number.Oct */ 47 | .sb { color: #CC3300 } /* Literal.String.Backtick */ 48 | .sc { color: #CC3300 } /* Literal.String.Char */ 49 | .sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ 50 | .s2 { color: #CC3300 } /* Literal.String.Double */ 51 | .se { color: #CC3300; } /* Literal.String.Escape */ 52 | .sh { color: #CC3300 } /* Literal.String.Heredoc */ 53 | .si { color: #AA0000 } /* Literal.String.Interpol */ 54 | .sx { color: #CC3300 } /* Literal.String.Other */ 55 | .sr { color: #33AAAA } /* Literal.String.Regex */ 56 | .s1 { color: #CC3300 } /* Literal.String.Single */ 57 | .ss { color: #FFCC33 } /* Literal.String.Symbol */ 58 | .bp { color: #336666 } /* Name.Builtin.Pseudo */ 59 | .vc { color: #003333 } /* Name.Variable.Class */ 60 | .vg { color: #003333 } /* Name.Variable.Global */ 61 | .vi { color: #003333 } /* Name.Variable.Instance */ 62 | .il { color: #FF6600 } /* Literal.Number.Integer.Long */ 63 | 64 | .css .o, 65 | .css .o + .nt, 66 | .css .nt + .nt { color: #999; } 67 | -------------------------------------------------------------------------------- /sass/buttons.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Buttons.css 3 | // -------------------------------------------------- 4 | 5 | .btn { 6 | display: inline-block; 7 | padding: 3px 8px; 8 | margin-bottom: 0; 9 | font-size: 12px; 10 | line-height: 1.4; 11 | text-align: center; 12 | white-space: nowrap; 13 | vertical-align: middle; 14 | cursor: default; 15 | background-image: none; 16 | border: 1px solid transparent; 17 | border-radius: $default-border-radius; 18 | box-shadow: 0 1px 1px rgba(0,0,0,.06); 19 | -webkit-app-region: no-drag; 20 | 21 | &:focus { 22 | outline: none; 23 | box-shadow: none; 24 | } 25 | } 26 | 27 | .btn-mini { 28 | padding: 2px 6px; 29 | } 30 | 31 | .btn-large { 32 | padding: 6px 12px; 33 | } 34 | 35 | .btn-form { 36 | padding-right: 20px; 37 | padding-left: 20px; 38 | } 39 | 40 | // Normal buttons 41 | .btn-default { 42 | color: $gray-color; 43 | border-top-color: $dark-border-color; 44 | border-right-color: $dark-border-color; 45 | border-bottom-color: $darker-bottom-border-color; 46 | border-left-color: $dark-border-color; 47 | @include linear-gradient(#fcfcfc, #f1f1f1); 48 | 49 | &:active { 50 | background-color: #ddd; 51 | background-image: none; 52 | } 53 | } 54 | 55 | // Button variations 56 | .btn-primary, 57 | .btn-positive, 58 | .btn-negative, 59 | .btn-warning { 60 | color: #fff; 61 | text-shadow: 0 1px 1px rgba(0,0,0,.1); 62 | } 63 | 64 | // For primary buttons 65 | .btn-primary { 66 | border-color: #388df8; 67 | border-bottom-color: darken(#388df8, 15%); 68 | @include linear-gradient(#6eb4f7, #1a82fb); 69 | 70 | &:active { 71 | @include linear-gradient(darken(#6eb4f7, 10%), darken(#1a82fb, 10%)); 72 | } 73 | } 74 | 75 | // For positive buttons 76 | .btn-positive { 77 | border-color: darken($positive-color, 10%); 78 | border-bottom-color: darken($positive-color, 15%); 79 | @include linear-gradient(lighten($positive-color, 10%), darken($positive-color, 10%)); 80 | 81 | &:active { 82 | @include linear-gradient($positive-color, darken($positive-color, 15%)); 83 | } 84 | } 85 | 86 | // For negative actions 87 | .btn-negative { 88 | border-color: darken($negative-color, 10%); 89 | border-bottom-color: darken($negative-color, 15%); 90 | @include linear-gradient(lighten($negative-color, 10%), darken($negative-color, 10%)); 91 | 92 | &:active { 93 | @include linear-gradient($negative-color, darken($negative-color, 15%)); 94 | } 95 | } 96 | 97 | // For warning actions 98 | .btn-warning { 99 | border-color: darken($warning-color, 10%); 100 | border-bottom-color: darken($warning-color, 15%); 101 | @include linear-gradient(lighten($warning-color, 10%), darken($warning-color, 10%)); 102 | 103 | &:active { 104 | @include linear-gradient($warning-color, darken($warning-color, 15%)); 105 | } 106 | } 107 | 108 | // Icons in buttons 109 | .btn .icon { 110 | float: left; 111 | width: 14px; 112 | height: 14px; 113 | margin-top: 1px; 114 | margin-bottom: 1px; 115 | color: #737475; 116 | font-size: 14px; 117 | line-height: 1; 118 | } 119 | 120 | // Add the margin next to the icon if there is text in the button too 121 | .btn .icon-text { 122 | margin-right: 5px; 123 | } 124 | 125 | // This utility class add a down arrow icon to the button 126 | .btn-dropdown:after { 127 | font-family: "photon-entypo"; 128 | margin-left: 5px; 129 | content: '\e873'; 130 | } 131 | -------------------------------------------------------------------------------- /docs/components/navs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Navs example 7 | 8 | 9 | 10 | 11 | 16 | 17 | 18 |
19 |
20 |
21 |
22 | 49 | 50 | 51 | 70 | 89 |
90 |
91 |
92 |
93 |
94 |
95 | 96 | 97 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Photon](http://photonkit.com/) 2 | 3 | [![Build Status](https://img.shields.io/travis/connors/photon/master.svg)](https://travis-ci.org/connors/photon) 4 | 5 | UI toolkit for building desktop apps with Electron. 6 | 7 | ## Getting started 8 | 9 | * Clone the repo with `git clone https://github.com/connors/photon.git` 10 | * [Read the docs](http://photonkit.com) to learn about the components and how to get your new application started 11 | 12 | Take note that our master branch is our active, unstable development branch and that if you're looking to download a stable copy of the repo, check the [tagged downloads](https://github.com/connors/photon/tags). 13 | 14 | ### What's included 15 | 16 | Within the download you'll find the following directories and files, logically grouping common assets. You'll see something like this: 17 | 18 | ``` 19 | photon/ 20 | ├── css/ 21 | │ ├── photon.css 22 | ├── fonts/ 23 | │ ├── photon-entypo.eot 24 | │ ├── photon-entypo.svg 25 | │ ├── photon-entypo.ttf 26 | │ └── photon-entypo.woff 27 | └── template-app/ 28 | ├── js/ 29 | │ └── menu.js 30 | ├── app.js 31 | ├── index.html 32 | └── package.json 33 | ``` 34 | 35 | We provide compiled CSS (`photon.*`). We also include the Entypo fonts and a template Electron application for you to quickly get started. 36 | 37 | ## Documentation 38 | 39 | Photon's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at . The docs may also be run locally. 40 | 41 | ### Running documentation locally 42 | 43 | 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.5.x). 44 | * **Windows users:** Read [this unofficial guide](http://jekyll-windows.juthilo.com/) to get Jekyll up and running without problems. 45 | 2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`. 46 | 3. From the root `/photon` directory, run `jekyll serve` in the command line. 47 | 4. Open in your browser, and boom! 48 | 49 | Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). 50 | 51 | ## Contributing 52 | 53 | Please file a GitHub issue to [report a bug](https://github.com/connors/photon/issues). When reporting a bug, be sure to follow the [contributor guidelines](https://github.com/connors/photon/blob/master/CONTRIBUTING.md). 54 | 55 | 56 | ## Development 57 | 58 | 1. Install node dependencies: `npm install`. 59 | 2. Open the example app: `npm start`. 60 | 61 | Modifying source Sass files? Open a second Terminal tab and run `npm run build` to kick off a build of the compiled `photon.css`. 62 | 63 | ## Versioning 64 | 65 | For transparency into our release cycle and in striving to maintain backward compatibility, Photon is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible. 66 | 67 | Releases will be numbered with the following format: 68 | 69 | `..` 70 | 71 | And constructed with the following guidelines: 72 | 73 | * Breaking backward compatibility **bumps the major** while resetting minor and patch 74 | * New additions without breaking backward compatibility **bumps the minor** while resetting the patch 75 | * Bug fixes and misc changes **bumps only the patch** 76 | 77 | For more information on SemVer, please visit . 78 | 79 | ## Maintainers 80 | 81 | Connor Sears 82 | 83 | * 84 | * 85 | 86 | ## License 87 | 88 | Copyright @connors. Released under MIT. 89 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Photon's Gruntfile 3 | * Copyright 2015 Connor Sears 4 | * Licensed under MIT (https://github.com/connors/photon/blob/master/LICENSE) 5 | */ 6 | 7 | module.exports = function(grunt) { 8 | 'use strict'; 9 | 10 | // Force use of Unix newlines 11 | grunt.util.linefeed = '\n'; 12 | 13 | // Project configuration. 14 | grunt.initConfig({ 15 | pkg: grunt.file.readJSON('package.json'), 16 | 17 | // Metadata. 18 | meta: { 19 | distPath: 'dist/', 20 | docsAssetsPath: 'docs/assets/', 21 | docsDistPath: 'docs/dist/', 22 | docsPath: 'docs/', 23 | srcPath: 'sass/', 24 | }, 25 | 26 | banner: '/*!\n' + 27 | ' * =====================================================\n' + 28 | ' * Photon v<%= pkg.version %>\n' + 29 | ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + 30 | ' * Licensed under <%= pkg.license %> (https://github.com/connors/proton/blob/master/LICENSE)\n' + 31 | ' *\n' + 32 | ' * v<%= pkg.version %> designed by @connors.\n' + 33 | ' * =====================================================\n' + 34 | ' */\n', 35 | 36 | clean: { 37 | dist: ['<%= meta.distPath %>/css', '<%= meta.docsDistPath %>/css'] 38 | }, 39 | 40 | sass: { 41 | options: { 42 | sourcemap: 'none', 43 | style: 'expanded', 44 | unixNewlines: true 45 | }, 46 | core: { 47 | src: 'sass/photon.scss', 48 | dest: '<%= meta.distPath %>css/<%= pkg.name %>.css' 49 | }, 50 | docs: { 51 | src: 'sass/docs.scss', 52 | dest: '<%= meta.docsAssetsPath %>css/docs.css' 53 | } 54 | }, 55 | 56 | usebanner: { 57 | dist: { 58 | options: { 59 | position: 'top', 60 | banner: '<%= banner %>' 61 | }, 62 | files: { 63 | src: [ 64 | '<%= meta.distPath %>css/*.css' 65 | ] 66 | } 67 | } 68 | }, 69 | 70 | copy: { 71 | fonts: { 72 | expand: true, 73 | src: 'fonts/*', 74 | dest: '<%= meta.distPath %>' 75 | }, 76 | docs: { 77 | expand: true, 78 | cwd: '<%= meta.distPath %>', 79 | src: [ 80 | '**/*' 81 | ], 82 | dest: '<%= meta.docsDistPath %>' 83 | } 84 | }, 85 | 86 | cssmin: { 87 | options: { 88 | keepSpecialComments: '*' // keep all important comments 89 | }, 90 | docs: { 91 | src: [ 92 | '<%= meta.docsAssetsPath %>css/docs.css', 93 | '<%= meta.docsAssetsPath %>css/pygments-manni.css', 94 | '<%= meta.docsAssetsPath %>css/normalize.css' 95 | ], 96 | dest: '<%= meta.docsAssetsPath %>css/docs.min.css' 97 | } 98 | }, 99 | 100 | watch: { 101 | options: { 102 | hostname: 'localhost', 103 | livereload: true, 104 | port: 8000 105 | }, 106 | css: { 107 | files: '<%= meta.srcPath %>**/*.scss', 108 | tasks: ['dist-css', 'copy'] 109 | }, 110 | html: { 111 | files: '<%= meta.docsPath %>**', 112 | tasks: ['jekyll'] 113 | } 114 | }, 115 | 116 | jekyll: { 117 | options: { 118 | config: '_config.yml' 119 | }, 120 | docs: {}, 121 | github: { 122 | options: { 123 | raw: 'github: true' 124 | } 125 | } 126 | }, 127 | 128 | connect: { 129 | site: { 130 | options: { 131 | base: '_site/', 132 | hostname: 'localhost', 133 | livereload: true, 134 | open: true, 135 | port: 8000 136 | } 137 | } 138 | } 139 | 140 | }); 141 | 142 | 143 | // Load the plugins 144 | require('load-grunt-tasks')(grunt, { scope: 'devDependencies' }); 145 | require('time-grunt')(grunt); 146 | 147 | // Tasks 148 | grunt.registerTask('dist-css', ['sass', 'usebanner', 'cssmin']); 149 | grunt.registerTask('dist', ['clean', 'dist-css', 'copy']); 150 | grunt.registerTask('server', ['dist', 'jekyll:docs', 'connect', 'watch']); 151 | 152 | grunt.registerTask('default', ['dist']); 153 | }; 154 | -------------------------------------------------------------------------------- /sass/normalize.scss: -------------------------------------------------------------------------------- 1 | // Based on normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css 2 | // This normalize aims to reduce the number of rules and focus on Chrome. 3 | 4 | // 5 | // 1. Normalize vertical alignment of `progress` in Chrome. 6 | // 7 | 8 | audio, 9 | canvas, 10 | progress, 11 | video { 12 | vertical-align: baseline; // 1 13 | } 14 | 15 | // 16 | // Prevent modern browsers from displaying `audio` without controls. 17 | // 18 | 19 | audio:not([controls]) { 20 | display: none; 21 | } 22 | 23 | // Links 24 | // ========================================================================== 25 | 26 | // 27 | // Improve readability of focused elements when they are also in an 28 | // active/hover state. 29 | // 30 | 31 | a:active, 32 | a:hover { 33 | outline: 0; 34 | } 35 | 36 | // Text-level semantics 37 | // ========================================================================== 38 | 39 | // 40 | // Address styling not present in IE 8/9/10/11, Safari, and Chrome. 41 | // 42 | 43 | abbr[title] { 44 | border-bottom: 1px dotted; 45 | } 46 | 47 | // 48 | // Address style set to `bolder` in Chrome. 49 | // 50 | 51 | b, 52 | strong { 53 | font-weight: bold; 54 | } 55 | 56 | // 57 | // Address styling not present in Chrome. 58 | // 59 | 60 | dfn { 61 | font-style: italic; 62 | } 63 | 64 | // 65 | // Address variable `h1` font-size and margin within `section` and `article` 66 | // contexts in Chrome. 67 | // 68 | 69 | h1 { 70 | font-size: 2em; 71 | margin: 0.67em 0; 72 | } 73 | 74 | // 75 | // Address inconsistent and variable font size. 76 | // 77 | 78 | small { 79 | font-size: 80%; 80 | } 81 | 82 | // 83 | // Prevent `sub` and `sup` affecting `line-height`. 84 | // 85 | 86 | sub, 87 | sup { 88 | font-size: 75%; 89 | line-height: 0; 90 | position: relative; 91 | vertical-align: baseline; 92 | } 93 | 94 | sup { 95 | top: -0.5em; 96 | } 97 | 98 | sub { 99 | bottom: -0.25em; 100 | } 101 | 102 | // Grouping content 103 | // ========================================================================== 104 | 105 | // 106 | // Contain overflow. 107 | // 108 | 109 | pre { 110 | overflow: auto; 111 | } 112 | 113 | // 114 | // Address odd `em`-unit font size rendering. 115 | // 116 | 117 | code, 118 | kbd, 119 | pre, 120 | samp { 121 | font-family: monospace, monospace; 122 | font-size: 1em; 123 | } 124 | 125 | // Forms 126 | // ========================================================================== 127 | 128 | // 129 | // Known limitation: by default, Chrome allows very limited 130 | // styling of `select`, unless a `border` property is set. 131 | // 132 | 133 | // 134 | // 1. Correct color not being inherited. 135 | // Known issue: affects color of disabled elements. 136 | // 2. Correct font properties not being inherited. 137 | // 3. Resets margin 138 | // 139 | 140 | button, 141 | input, 142 | optgroup, 143 | select, 144 | textarea { 145 | color: inherit; // 1 146 | font: inherit; // 2 147 | margin: 0; // 3 148 | } 149 | 150 | // 151 | // Fix the cursor style for Chrome's increment/decrement buttons. For certain 152 | // `font-size` values of the `input`, it causes the cursor style of the 153 | // decrement button to change from `default` to `text`. 154 | // 155 | 156 | input[type="number"]::-webkit-inner-spin-button, 157 | input[type="number"]::-webkit-outer-spin-button { 158 | height: auto; 159 | } 160 | 161 | // 162 | // 1. Address `appearance` set to `searchfield` in Chrome. 163 | // 2. Address `box-sizing` set to `border-box` in Chrome. 164 | // 165 | 166 | input[type="search"] { 167 | -webkit-appearance: textfield; // 1 168 | box-sizing: content-box; // 2 169 | } 170 | 171 | // 172 | // Remove inner padding and search cancel button in Chrome on OS X. 173 | // 174 | 175 | input[type="search"]::-webkit-search-cancel-button, 176 | input[type="search"]::-webkit-search-decoration { 177 | -webkit-appearance: none; 178 | } 179 | 180 | // 181 | // Define consistent border, margin, and padding. 182 | // 183 | 184 | fieldset { 185 | border: 1px solid #c0c0c0; 186 | margin: 0 2px; 187 | padding: 0.35em 0.625em 0.75em; 188 | } 189 | 190 | // 191 | // 1. Correct `color` not being inherited in IE 8/9/10/11. 192 | // 2. Remove padding so people aren't caught out if they zero out fieldsets. 193 | // 194 | 195 | legend { 196 | border: 0; // 1 197 | padding: 0; // 2 198 | } 199 | 200 | // Tables 201 | // ========================================================================== 202 | 203 | // 204 | // Remove most spacing between table cells. 205 | // 206 | 207 | table { 208 | border-collapse: collapse; 209 | border-spacing: 0; 210 | } 211 | 212 | td, 213 | th { 214 | padding: 0; 215 | } 216 | -------------------------------------------------------------------------------- /docs/assets/js/sticky.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Stickyfill -- `position: sticky` polyfill 3 | * v. 1.1.3 | https://github.com/wilddeer/stickyfill 4 | * Copyright Oleg Korsunsky | http://wd.dizaina.net/ 5 | * 6 | * MIT License 7 | */ 8 | !function(a,b){function c(){y=D=z=A=B=C=K}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)||0}function f(){F={top:b.pageYOffset,left:b.pageXOffset}}function g(){return b.pageXOffset!=F.left?(f(),void z()):void(b.pageYOffset!=F.top&&(f(),i()))}function h(){setTimeout(function(){b.pageYOffset!=F.top&&(F.top=b.pageYOffset,i())},0)}function i(){for(var a=H.length-1;a>=0;a--)j(H[a])}function j(a){if(a.inited){var b=F.top<=a.limit.start?0:F.top>=a.limit.end?2:1;a.mode!=b&&p(a,b)}}function k(){for(var a=H.length-1;a>=0;a--)if(H[a].inited){var b=Math.abs(t(H[a].clone)-H[a].docOffsetTop),c=Math.abs(H[a].parent.node.offsetHeight-H[a].parent.height);if(b>=2||c>=2)return!1}return!0}function l(a){isNaN(parseFloat(a.computed.top))||a.isCell||"none"==a.computed.display||(a.inited=!0,a.clone||q(a),"absolute"!=a.parent.computed.position&&"relative"!=a.parent.computed.position&&(a.parent.node.style.position="relative"),j(a),a.parent.height=a.parent.node.offsetHeight,a.docOffsetTop=t(a.clone))}function m(a){var b=!0;a.clone&&r(a),d(a.node.style,a.css);for(var c=H.length-1;c>=0;c--)if(H[c].node!==a.node&&H[c].parent.node===a.parent.node){b=!1;break}b&&(a.parent.node.style.position=a.parent.css.position),a.mode=-1}function n(){for(var a=H.length-1;a>=0;a--)l(H[a])}function o(){for(var a=H.length-1;a>=0;a--)m(H[a])}function p(a,b){var c=a.node.style;switch(b){case 0:c.position="absolute",c.left=a.offset.left+"px",c.right=a.offset.right+"px",c.top=a.offset.top+"px",c.bottom="auto",c.width="auto",c.marginLeft=0,c.marginRight=0,c.marginTop=0;break;case 1:c.position="fixed",c.left=a.box.left+"px",c.right=a.box.right+"px",c.top=a.css.top,c.bottom="auto",c.width="auto",c.marginLeft=0,c.marginRight=0,c.marginTop=0;break;case 2:c.position="absolute",c.left=a.offset.left+"px",c.right=a.offset.right+"px",c.top="auto",c.bottom=0,c.width="auto",c.marginLeft=0,c.marginRight=0}a.mode=b}function q(a){a.clone=document.createElement("div");var b=a.node.nextSibling||a.node,c=a.clone.style;c.height=a.height+"px",c.width=a.width+"px",c.marginTop=a.computed.marginTop,c.marginBottom=a.computed.marginBottom,c.marginLeft=a.computed.marginLeft,c.marginRight=a.computed.marginRight,c.padding=c.border=c.borderSpacing=0,c.fontSize="1em",c.position="static",c.cssFloat=a.computed.cssFloat,a.node.parentNode.insertBefore(a.clone,b)}function r(a){a.clone.parentNode.removeChild(a.clone),a.clone=void 0}function s(a){var b=getComputedStyle(a),c=a.parentNode,d=getComputedStyle(c),f=a.style.position;a.style.position="relative";var g={top:b.top,marginTop:b.marginTop,marginBottom:b.marginBottom,marginLeft:b.marginLeft,marginRight:b.marginRight,cssFloat:b.cssFloat,display:b.display},h={top:e(b.top),marginBottom:e(b.marginBottom),paddingLeft:e(b.paddingLeft),paddingRight:e(b.paddingRight),borderLeftWidth:e(b.borderLeftWidth),borderRightWidth:e(b.borderRightWidth)};a.style.position=f;var i={position:a.style.position,top:a.style.top,bottom:a.style.bottom,left:a.style.left,right:a.style.right,width:a.style.width,marginTop:a.style.marginTop,marginLeft:a.style.marginLeft,marginRight:a.style.marginRight},j=u(a),k=u(c),l={node:c,css:{position:c.style.position},computed:{position:d.position},numeric:{borderLeftWidth:e(d.borderLeftWidth),borderRightWidth:e(d.borderRightWidth),borderTopWidth:e(d.borderTopWidth),borderBottomWidth:e(d.borderBottomWidth)}},m={node:a,box:{left:j.win.left,right:J.clientWidth-j.win.right},offset:{top:j.win.top-k.win.top-l.numeric.borderTopWidth,left:j.win.left-k.win.left-l.numeric.borderLeftWidth,right:-j.win.right+k.win.right-l.numeric.borderRightWidth},css:i,isCell:"table-cell"==b.display,computed:g,numeric:h,width:j.win.right-j.win.left,height:j.win.bottom-j.win.top,mode:-1,inited:!1,parent:l,limit:{start:j.doc.top-h.top,end:k.doc.top+c.offsetHeight-l.numeric.borderBottomWidth-a.offsetHeight-h.top-h.marginBottom}};return m}function t(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function u(a){var c=a.getBoundingClientRect();return{doc:{top:c.top+b.pageYOffset,left:c.left+b.pageXOffset},win:c}}function v(){G=setInterval(function(){!k()&&z()},500)}function w(){clearInterval(G)}function x(){I&&(document[L]?w():v())}function y(){I||(f(),n(),b.addEventListener("scroll",g),b.addEventListener("wheel",h),b.addEventListener("resize",z),b.addEventListener("orientationchange",z),a.addEventListener(M,x),v(),I=!0)}function z(){if(I){o();for(var a=H.length-1;a>=0;a--)H[a]=s(H[a].node);n()}}function A(){b.removeEventListener("scroll",g),b.removeEventListener("wheel",h),b.removeEventListener("resize",z),b.removeEventListener("orientationchange",z),a.removeEventListener(M,x),w(),I=!1}function B(){A(),o()}function C(){for(B();H.length;)H.pop()}function D(a){for(var b=H.length-1;b>=0;b--)if(H[b].node===a)return;var c=s(a);H.push(c),I?l(c):y()}function E(a){for(var b=H.length-1;b>=0;b--)H[b].node===a&&(m(H[b]),H.splice(b,1))}var F,G,H=[],I=!1,J=a.documentElement,K=function(){},L="hidden",M="visibilitychange";void 0!==a.webkitHidden&&(L="webkitHidden",M="webkitvisibilitychange"),b.getComputedStyle||c();for(var N=["","-webkit-","-moz-","-ms-"],O=document.createElement("div"),P=N.length-1;P>=0;P--){try{O.style.position=N[P]+"sticky"}catch(Q){}""!=O.style.position&&c()}f(),b.Stickyfill={stickies:H,add:D,remove:E,init:y,rebuild:z,pause:A,stop:B,kill:C}}(document,window),window.jQuery&&!function($){$.fn.Stickyfill=function(){return this.each(function(){Stickyfill.add(this)}),this}}(window.jQuery); 9 | -------------------------------------------------------------------------------- /docs/dist/template-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Photon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 |

Photon

18 |
19 | 20 | 21 |
22 |
23 |
24 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 |
NameKindDate ModifiedAuthor
bars.scssDocumentOct 13, 2015connors
base.scssDocumentOct 13, 2015connors
button-groups.scssDocumentOct 13, 2015connors
buttons.scssDocumentOct 13, 2015connors
docs.scssDocumentOct 13, 2015connors
forms.scssDocumentOct 13, 2015connors
grid.scssDocumentOct 13, 2015connors
icons.scssDocumentOct 13, 2015connors
images.scssDocumentOct 13, 2015connors
lists.scssDocumentOct 13, 2015connors
mixins.scssDocumentOct 13, 2015connors
navs.scssDocumentOct 13, 2015connors
normalize.scssDocumentOct 13, 2015connors
photon.scssDocumentOct 13, 2015connors
tables.scssDocumentOct 13, 2015connors
tabs.scssDocumentOct 13, 2015connors
utilities.scssDocumentOct 13, 2015connors
variables.scssDocumentOct 13, 2015connors
178 |
179 |
180 |
181 |
182 | 183 | 184 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Photon 2 | 3 | ## Types of issues 4 | 5 | The GitHub issue tracker should only be used for one of the 6 | following: 7 | 8 | + **Bugs** — when a feature of the project has been _identified as 9 | broken_. 10 | 11 | + **Feature requests** — when you ask for a _new feature_ to be added to a 12 | project. 13 | 14 | + **Contribution enquiries** — when you want to discuss whether a _new 15 | feature_ or _change_ would be accepted in a project before you begin 16 | development work on it. 17 | 18 | These are some things that don't belong in the issue tracker: 19 | 20 | + **Please avoid personal support requests.** We cannot 21 | provide personal support for implementation issues. The best place for help 22 | is generally going to be StackOverflow, Twitter, IRC, etc. 23 | 24 | + **Please avoid derailing issues.** Keep the discussion on topic and respect 25 | the opinions of others. 26 | 27 | ## Bugs 28 | 29 | A bug is a _demonstrable problem_ that is caused by the code in the 30 | repository. 31 | 32 | If you've come across a problem with the code and you're letting us know about 33 | it, _thank you_. We appreciate your time and the effort you're making to help 34 | improve the code for everyone else! 35 | 36 | Please read the following guidelines for reporting bugs: 37 | 38 | 1. **Use the GitHub issue search** — check if the issue has already been 39 | reported. If it has been, please comment on the existing issue. 40 | 41 | 2. **Check if the issue has been fixed** — the latest `master` or 42 | development branch may already contain a fix. 43 | 44 | 3. **Isolate the demonstrable problem** — make sure that the code in the 45 | project's repository is _definitely_ responsible for the issue. Create a 46 | [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - an 47 | extremely simple and immediately viewable example of the issue. 48 | 49 | 4. **Include a live example** — provide a link to your reduced test case 50 | when appropriate (e.g. if the issue is related to front-end technologies). 51 | Please use [jsFiddle](http://jsfiddle.net) to host examples. 52 | 53 | Please try to be as detailed as possible in your report too. What is your 54 | environment? What steps will reproduce the issue? What browser(s) and OS 55 | experience the problem? What would you expect to be the outcome? All these 56 | details will help me and others to assess and fix any potential bugs. 57 | 58 | ### Example of a good bug report 59 | 60 | > Short and descriptive title 61 | > 62 | > A summary of the issue and the browser/OS environment in which it occurs. If 63 | > suitable, include the steps required to reproduce the bug. 64 | > 65 | > 1. This is the first step 66 | > 2. This is the second step 67 | > 3. Further steps, etc. 68 | > 69 | > `` - a link to the reduced test case 70 | > 71 | > Any other information you want to share that is relevant to the issue being 72 | > reported. This might include the lines of code that you have identified as 73 | > causing the bug, and potential solutions (and your opinions on their 74 | > merits). 75 | 76 | A good bug report shouldn't leave us needing to chase you up to get further 77 | information that is required to assess or fix the bug. 78 | 79 | ## Feature requests 80 | 81 | Feature requests are welcome! Please provide links to examples or articles that 82 | help to illustrate the specifics of a feature you're requesting. The more 83 | detail, the better. It will help us to decide whether the feature is something I 84 | agree should become part of the project. 85 | 86 | ## Contribution enquiries 87 | 88 | Contribution enquiries should take place before any significant pull request, 89 | otherwise you risk spending a lot of time working on something that we might not 90 | want to pull into the repository. 91 | 92 | In this regard, some contribution enquires may be feature requests that you 93 | would like to have a go at implementing yourself if they are wanted. Other 94 | enquiries might revolve around refactoring code or porting a project to 95 | different languages. 96 | 97 | ## Pull requests 98 | 99 | Good pull requests - patches, improvements, new features - are a fantastic 100 | help. 101 | 102 | If you've spotted any small, obvious errors and want to help out by patching it, 103 | that will be much appreciated. 104 | 105 | If your contribution involves a significant amount of work or substantial 106 | changes to any part of the project, please open a "contribution enquiry" issue 107 | first to check that the work is wanted or matches the goals of the project. 108 | 109 | All pull requests should remain focused in scope and avoid containing unrelated 110 | commits. 111 | 112 | Please follow this process; it's the best way to get your work included in the 113 | project: 114 | 115 | 1. [Fork](https://github.com/connors/photon/fork) the project. 116 | 117 | 2. Clone your fork (`git clone 118 | git@github.com:/.git`). 119 | 120 | 3. Add an `upstream` remote (`git remote add upstream 121 | git://github.com//.git`). 122 | 123 | 4. Get the latest changes from upstream (e.g. `git pull upstream 124 | `). 125 | 126 | 5. Create a new topic branch to contain your feature, change, or fix (`git 127 | checkout -b `). 128 | 129 | 6. Make sure that your changes adhere to the current coding conventions used 130 | throughout the project - indentation, accurate comments, etc. 131 | 132 | 7. Commit your changes in logical chunks; use git's [interactive 133 | rebase](https://help.github.com/articles/interactive-rebase) feature to tidy 134 | up your commits before making them public. Please adhere to these [git commit 135 | message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) 136 | or your pull request is unlikely be merged into the main project. 137 | 138 | 8. Locally merge (or rebase) the upstream branch into your topic branch. 139 | 140 | 9. Push your topic branch up to your fork (`git push origin 141 | `). 142 | 143 | 10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a 144 | clear title and description. Please mention which browsers you tested in. 145 | 146 | If you have any other questions about contributing, please feel free to contact 147 | us. 148 | 149 | **Don't edit files in `dist/`.** You should edit files in `sass/` and `js/`. 150 | 151 | ## Special thanks to @necolas 152 | 153 | For writing the original [issue-guidelines](https://github.com/necolas/issue-guidelines/) from which these were adapted. 154 | -------------------------------------------------------------------------------- /dist/template-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Photon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 |

Photon

18 |
19 | 20 | 21 |
22 |
23 |
24 | 55 |
56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 |
NameKindDate ModifiedAuthor
bars.scssDocumentOct 13, 2015connors
base.scssDocumentOct 13, 2015connors
button-groups.scssDocumentOct 13, 2015connors
buttons.scssDocumentOct 13, 2015connors
docs.scssDocumentOct 13, 2015connors
forms.scssDocumentOct 13, 2015connors
grid.scssDocumentOct 13, 2015connors
icons.scssDocumentOct 13, 2015connors
images.scssDocumentOct 13, 2015connors
lists.scssDocumentOct 13, 2015connors
mixins.scssDocumentOct 13, 2015connors
navs.scssDocumentOct 13, 2015connors
normalize.scssDocumentOct 13, 2015connors
photon.scssDocumentOct 13, 2015connors
tables.scssDocumentOct 13, 2015connors
tabs.scssDocumentOct 13, 2015connors
utilities.scssDocumentOct 13, 2015connors
variables.scssDocumentOct 13, 2015connors
178 |
179 |
180 |
181 |
182 | 183 | 184 | -------------------------------------------------------------------------------- /docs/assets/css/docs.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";.btn,a{text-decoration:none}.col,.masthead{position:relative}.btn,.photo-credit{white-space:nowrap}.container:after,.nav:after{clear:both}.masthead-title,.oss-section,.sub-masthead{text-shadow:0 0 3px rgba(0,0,0,.3)}.btn,.text-centered{text-align:center}.icon:before,button,select{text-transform:none}*{-webkit-box-sizing:border-box;box-sizing:border-box}body{font:16px/1.7 Roboto,"Helvetica Neue",Helvetica,arial,sans-serif;font-weight:300;color:#333}.btn,.icon:before,.nav-item{line-height:1}h1,h2,h3,h4,h5,h6{margin-top:0;font-weight:300}h2{margin-bottom:.18em;font-size:1.6em}h3{margin-bottom:.15em;font-size:1.3em}h5{font-weight:400}p{margin-top:.5em;margin-bottom:.5em;font-size:1em;color:#555}.download-decription{margin-bottom:1em}.lead{font-size:1.1em;color:#777}a{color:#4b92c6}.highlight{margin:0;font-size:.9em}.btn{display:inline-block;padding:10px 15px;margin-bottom:0;font-size:14px;vertical-align:middle;color:#666;background-image:none;border:1px solid #ddd;border-radius:4px;transition:all .2s linear}.nav-item,.photo-credit{transition:opacity .15s linear}.btn:hover{border-color:#999}.btn-components,.btn-download{margin-right:1rem;margin-left:1rem;padding:12px 30px;display:block}.btn-download{margin-bottom:1rem;color:#0f2b3c;border-color:transparent;background-color:rgba(255,255,255,.9)}.btn-download:hover{border-color:transparent;background-color:#fff}@media (min-width:32em){.btn-components,.btn-download{margin-right:0;margin-left:0;display:inline-block}.btn-download{margin-right:1rem;margin-bottom:0;margin-left:0}}.btn-inversed{color:#fff;border-color:rgba(255,255,255,.7)}.btn-inversed:hover{border-color:#fff}.container{margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}.container:after,.container:before{display:table;content:" "}.col{padding:3rem 1rem}@media (min-width:32em){.container{padding-left:0;padding-right:0;max-width:65rem}.col-group{display:-webkit-flex;display:-ms-flex;display:flex}.col{min-width:0;padding-right:3rem;padding-left:3rem;flex:1}.col-one-third{max-width:33.333%}}.masthead{padding-bottom:80px;color:#fff;background-image:url(/assets/img/photo-couch.png);background-size:cover}.masthead:after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background-color:#000;opacity:.25;z-index:1}.masthead-content{position:relative;margin-top:50px;z-index:10}.subpage-lead,.subpage-title{margin-top:0;margin-bottom:0;font-weight:300}.masthead-title{margin:0;padding:0 1rem 1.5rem;font-size:1.5em}@media (min-width:32em){.masthead{background-position:center}.masthead:after{display:none}.masthead-title{padding:0 8rem 3rem;font-size:2.1em}}.photo-credit{position:absolute;left:50%;bottom:1em;font-size:.8em;color:#fff;transform:translatex(-50%);opacity:.5;z-index:10}.photo-credit:hover{opacity:.9}.sub-masthead{color:#fff;background-color:#000;background-image:-webkit-gradient(linear,left bottom,right top,color-stop(0,#000),color-stop(100%,#0f2b3c));background-image:-webkit-linear-gradient(45deg,#000 0,#0f2b3c 100%);background-image:-moz-linear-gradient(45deg,#000 0,#0f2b3c 100%);background-image:linear-gradient(45deg,#000 0,#0f2b3c 100%)}.subpage-header-content{padding:2.5rem 1rem 3rem}@media (min-width:32em){.subpage-header-content{padding:3rem 3rem 4rem}}.subpage-lead{color:#fff;font-size:1.3em;opacity:.8}.nav{position:relative;padding-top:1.2rem;padding-bottom:1.2rem;margin-left:1rem;margin-right:1rem;display:block;font-weight:500;border-bottom:1px solid rgba(255,255,255,.2);z-index:10}.nav:after,.nav:before{display:table;content:" "}.nav-group,.title{display:block}.title{font-size:1em;color:#fff}.nav-item{margin-right:.7rem;font-size:.8em;color:#fff;opacity:.7}.nav-item:hover{opacity:1}.example-component-window{height:300px;overflow:hidden;box-shadow:0 0 30px rgba(0,0,0,.1);border:1px solid #bebebe;border-radius:6px}@media (min-width:32em){.nav,.nav-item{margin-right:3rem}.nav{margin-left:3rem}.title{float:left}.nav-group{margin-top:.5em;float:right}.nav-item{float:left}.nav-item:last-child{margin-right:0}.example-component-container{position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;position:sticky;top:3rem;min-width:310px;margin-bottom:3rem}}.icon:before,.oss-section,sub,sup{position:relative}.demo-app-container{height:450px;margin-right:3rem;margin-bottom:3rem;margin-left:3rem;display:none;border-radius:6px;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.3)}@media (min-width:32em){.demo-app-container{display:block}}.component-example,.demo-app{width:100%;height:100%;display:block;border:0}.footer-links li,.icon:before{display:inline-block}.component-section,.docs-section{border-bottom:1px solid #ddd}.docs-section-gray{background-color:#f8f8f8}.oss-section{color:#fff;background-color:#000;background-image:-webkit-gradient(linear,left bottom,right top,color-stop(0,#000),color-stop(100%,#0f2b3c));background-image:-webkit-linear-gradient(45deg,#000 0,#0f2b3c 100%);background-image:-moz-linear-gradient(45deg,#000 0,#0f2b3c 100%);background-image:linear-gradient(45deg,#000 0,#0f2b3c 100%)}.oss-section a:not(.btn){color:#fff}.oss-section p{color:#ccc}.oss-section .btn{margin-top:20px}.oss-section .col:last-child{padding-top:0}@media (min-width:32em){.basic-template-section{border-top:1px solid #ddd}.oss-section .col:last-child{padding-top:3rem}}.component-section{margin-bottom:1rem}.component-section.last-component-section{margin-bottom:0}.component-section .col:last-child{padding-top:0}@media (min-width:32em){.component-section{margin-bottom:0;border-bottom:0;background-color:#fff;background-image:-webkit-gradient(linear,left top,right top,color-stop(50%,#fff),color-stop(50%,#f5f5f5));background-image:-webkit-linear-gradient(left,#fff 50%,#f5f5f5 50%);background-image:linear-gradient(to right,#fff 50%,#f5f5f5 50%)}.component-section .col{padding-top:3rem;border-left:1px solid #ddd}.component-section .col:first-child{border-left:0}.component-section .col:last-child{padding-top:3rem;padding-bottom:0}}.component-description,.docs-hr{margin-bottom:2rem}legend,td,th{padding:0}.footer{margin-top:-1px;border-top:1px solid #ddd}.footer-content{font-size:.8em;font-weight:500;opacity:.8}.footer-links{padding-left:0;list-style:none}@media (min-width:32em){.footer-content{margin-right:5rem;margin-left:5rem}}.docs-hr{margin-top:2rem;background:0 0;border:0;border-bottom:1px solid #ddd}@font-face{font-family:photon-entypo;src:url(/dist/fonts/photon-entypo.eot);src:url(/dist/fonts/photon-entypo.eot?#iefix) format("eot"),url(/dist/fonts/photon-entypo.woff) format("woff"),url(/dist/fonts/photon-entypo.ttf) format("truetype");font-weight:400;font-style:normal}.icon:before{font-family:photon-entypo;speak:none;font-size:100%;font-style:normal;font-weight:400;font-variant:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ge,.sd,dfn{font-style:italic}.icon-bucket:before{content:'\e8d5'}.icon-code:before{content:'\e834'}.icon-window:before{content:'\e86d'}.buttons-component{height:80px}.button-groups-component{height:110px}.forms-component{height:430px}.icons-component{height:700px;overflow:hidden}.hll{background-color:#ffc}.c{color:#999}.err{color:#A00;background-color:#FAA}.k{color:#069}.o{color:#555}.cm{color:#999}.cp{color:#099}.c1,.cs{color:#999}.gd{background-color:#FCC;border:1px solid #C00}.gr{color:red}.gh{color:#030}.gi{background-color:#CFC;border:1px solid #0C0}img,legend{border:0}.go{color:#AAA}.gp{color:#009}.gu{color:#030}.gt{color:#9C6}.kc,.kd,.kn,.kp,.kr{color:#069}.kt{color:#078}.m{color:#F60}.s{color:#d44950}.na{color:#4f9fcf}.nb{color:#366}.nc{color:#0A8}.no{color:#360}.nd{color:#99F}.ni{color:#999}.ne{color:#C00}.nf{color:#C0F}.nl{color:#99F}.nn{color:#0CF}.nt{color:#2f6f9f}.nv{color:#033}.ow{color:#000}.w{color:#bbb}.mf,.mh,.mi,.mo{color:#F60}.s2,.sb,.sc,.sd,.se,.sh{color:#C30}.si{color:#A00}.sx{color:#C30}.sr{color:#3AA}.s1{color:#C30}.ss{color:#FC3}.bp{color:#366}.vc,.vg,.vi{color:#033}.il{color:#F60}.css .nt+.nt,.css .o,.css .o+.nt{color:#999}/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /docs/demo-app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Demo App 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 |
23 |
24 |

Photon

25 | 26 |
27 | 28 |
29 | 32 | 35 | 38 | 41 | 44 |
45 | 46 | 50 | 51 | 54 |
55 |
56 | 57 |
58 |
59 |
60 | 91 | 92 | 111 | 130 |
131 |
132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 |
NameKindDate ModifiedAuthor
bars.scssDocumentOct 13, 2015connors
base.scssDocumentOct 13, 2015connors
button-groups.scssDocumentOct 13, 2015connors
buttons.scssDocumentOct 13, 2015connors
docs.scssDocumentOct 13, 2015connors
forms.scssDocumentOct 13, 2015connors
grid.scssDocumentOct 13, 2015connors
icons.scssDocumentOct 13, 2015connors
images.scssDocumentOct 13, 2015connors
lists.scssDocumentOct 13, 2015connors
mixins.scssDocumentOct 13, 2015connors
navs.scssDocumentOct 13, 2015connors
normalize.scssDocumentOct 13, 2015connors
photon.scssDocumentOct 13, 2015connors
tables.scssDocumentOct 13, 2015connors
tabs.scssDocumentOct 13, 2015connors
utilities.scssDocumentOct 13, 2015connors
variables.scssDocumentOct 13, 2015connors
252 |
253 |
254 |
255 |
256 | 257 | 258 | -------------------------------------------------------------------------------- /docs/getting-started.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Photon · Getting started 4 | --- 5 | 6 | 7 |
8 |
9 | {% include nav.html %} 10 |
11 |

Getting started

12 |

Just download Photon and you'll be well on your way

13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 |
21 |

What's included

22 |

Photon is downloadable in two forms, within which you'll find the following directories and files, logically grouping common and compiled resources.

23 | 24 |
25 | 26 |

Precompiled Photon

27 |

Once downloaded, unzip the compressed folder to see the structure of (the compiled) photon. You'll see something like this:

28 | 29 | {% highlight html %} 30 | photon/ 31 | ├── css/ 32 | │ ├── photon.css 33 | ├── fonts/ 34 | │ ├── photon-entypo.eot 35 | │ ├── photon-entypo.svg 36 | │ ├── photon-entypo.ttf 37 | │ └── photon-entypo.woff 38 | └── template-app/ 39 | ├── js/ 40 | │ └── menu.js 41 | ├── app.js 42 | ├── index.html 43 | └── package.json 44 | {% endhighlight %} 45 | 46 |

This is the most basic form of Photon: precompiled files for quick drop-in usage in nearly any Electron project. We provide compiled CSS (`photon.*`). We also include the Entypo fonts and a template Electron application for you to quickly get started.

47 | 48 | 49 |
50 | 51 |

Photon source code

52 |

The Photon source code download includes the precompiled CSS, and font assets, along with source Sass, and documentation. More specifically, it includes the following and more:

53 | {% highlight html %} 54 | photon/ 55 | ├── sass/ 56 | ├── fonts/ 57 | ├── dist/ 58 | │ ├── css/ 59 | │ ├── fonts/ 60 | │ └── template-app/ 61 | └── docs/ 62 | {% endhighlight %} 63 | 64 |

The sass/ and fonts/ are the source code for our CSS and icon fonts (respectively). 65 | The dist/ folder includes everything listed in the precompiled download section above. 66 | The docs/ folder includes the source code for our documentation, and examples/ of Photon usage. 67 | Beyond that, any other included file provides support for packages, license information, and development.

68 |
69 |
70 |

Photon

71 |

Compiled CSS and fonts. No docs or original source files are included.

72 | Download 73 | 74 |
75 | 76 | 77 |

Source code

78 |

If you haven't already, download the source code for Photon.

79 | Download 80 |
81 |
82 |
83 |
84 | 85 |
86 |
87 |
88 |
89 |

Application layout

90 |

Every Photon application has the same basic structure that consists of 91 | a main .window element and corresponding .window-content wrapper.

92 | {% highlight html %} 93 |
94 |
95 | ... 96 |
97 |
98 | {% endhighlight %} 99 |
100 |
101 |
102 | 103 |
104 |
105 |
106 |
107 |
108 | 109 |
110 |
111 |
112 |
113 |

Paned layout

114 |

Divide up your applications content any way you want using .pane-group and .pane elements. 115 | Add as many panes as you need. They'll layout out evenly across the application.

116 | {% highlight html %} 117 |
118 |
119 |
120 |
...
121 |
...
122 |
...
123 |
124 |
125 |
126 | {% endhighlight %} 127 |
128 |
129 |
130 | 131 |
132 |
133 |
134 |
135 |
136 | 137 |
138 |
139 |
140 |
141 |

Sidebar layout

142 |

Sidebars are useful for housing navigation or other supplemental information in your application. 143 | The optional .sidebar class sets the pane's background color to gray.

144 | {% highlight html %} 145 |
146 |
147 |
148 |
...
149 |
...
150 |
151 |
152 |
153 | {% endhighlight %} 154 |
155 |
156 |
157 | 158 |
159 |
160 |
161 |
162 |
163 | 164 |
165 |
166 |
167 |
168 |

Mini-sidebar layout

169 |

If a smaller sidebar is what you need, look no further.

170 | {% highlight html %} 171 |
172 |
173 |
174 |
...
175 |
...
176 |
177 |
178 |
179 | {% endhighlight %} 180 |
181 |
182 |
183 | 184 |
185 |
186 |
187 |
188 |
189 | 190 |
191 |
192 |
193 |
194 |

Common layout

195 |

Many applications follow the same simple layout with a header, content, and footer structure. 196 | That's super easy to build in Photon.

197 | {% highlight html %} 198 |
199 |
200 |

Header

201 |
202 |
203 |
204 |
...
205 |
...
206 |
207 |
208 |
209 |

Footer

210 |
211 |
212 | {% endhighlight %} 213 |
214 |
215 |
216 | 217 |
218 |
219 |
220 |
221 |
222 | 223 |
224 |
225 |
226 |
227 |

Basic Template

228 |

229 | {% highlight html %} 230 | 231 | 232 | 233 | Photon 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 |
245 | 246 |
247 |

Photon

248 |
249 | 250 | 251 |
252 |
253 |

Welcome to Photon

254 |

255 | Thanks for downloading Photon. This is an example HTML page that's linked up to compiled Photon CSS, has the proper meta tags 256 | and the HTML structure. 257 |

258 |
259 |
260 |
261 | 262 | 263 | {% endhighlight %} 264 |
265 |
266 |
267 |
268 | -------------------------------------------------------------------------------- /docs/assets/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS and IE text size adjust after device orientation change, 6 | * without disabling user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability of focused elements when they are also in an 95 | * active/hover state. 96 | */ 97 | 98 | a:active, 99 | a:hover { 100 | outline: 0; 101 | } 102 | 103 | /* Text-level semantics 104 | ========================================================================== */ 105 | 106 | /** 107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 108 | */ 109 | 110 | abbr[title] { 111 | border-bottom: 1px dotted; 112 | } 113 | 114 | /** 115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 116 | */ 117 | 118 | b, 119 | strong { 120 | font-weight: bold; 121 | } 122 | 123 | /** 124 | * Address styling not present in Safari and Chrome. 125 | */ 126 | 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | /** 132 | * Address variable `h1` font-size and margin within `section` and `article` 133 | * contexts in Firefox 4+, Safari, and Chrome. 134 | */ 135 | 136 | h1 { 137 | font-size: 2em; 138 | margin: 0.67em 0; 139 | } 140 | 141 | /** 142 | * Address styling not present in IE 8/9. 143 | */ 144 | 145 | mark { 146 | background: #ff0; 147 | color: #000; 148 | } 149 | 150 | /** 151 | * Address inconsistent and variable font size in all browsers. 152 | */ 153 | 154 | small { 155 | font-size: 80%; 156 | } 157 | 158 | /** 159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 160 | */ 161 | 162 | sub, 163 | sup { 164 | font-size: 75%; 165 | line-height: 0; 166 | position: relative; 167 | vertical-align: baseline; 168 | } 169 | 170 | sup { 171 | top: -0.5em; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | /* Embedded content 179 | ========================================================================== */ 180 | 181 | /** 182 | * Remove border when inside `a` element in IE 8/9/10. 183 | */ 184 | 185 | img { 186 | border: 0; 187 | } 188 | 189 | /** 190 | * Correct overflow not hidden in IE 9/10/11. 191 | */ 192 | 193 | svg:not(:root) { 194 | overflow: hidden; 195 | } 196 | 197 | /* Grouping content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Address margin not present in IE 8/9 and Safari. 202 | */ 203 | 204 | figure { 205 | margin: 1em 40px; 206 | } 207 | 208 | /** 209 | * Address differences between Firefox and other browsers. 210 | */ 211 | 212 | hr { 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ 358 | box-sizing: content-box; /* 2 */ 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define consistent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /docs/assets/css/docs.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | * { 3 | -webkit-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font: 16px/1.7 "Roboto", "Helvetica Neue", Helvetica, arial, sans-serif; 9 | font-weight: 300; 10 | color: #333; 11 | } 12 | 13 | h1, h2, h3, h4, h5, h6 { 14 | margin-top: 0; 15 | font-weight: 300; 16 | } 17 | 18 | h2 { 19 | margin-bottom: .18em; 20 | font-size: 1.6em; 21 | } 22 | 23 | h3 { 24 | margin-bottom: .15em; 25 | font-size: 1.3em; 26 | } 27 | 28 | h5 { 29 | font-weight: 400; 30 | } 31 | 32 | p { 33 | margin-top: .5em; 34 | margin-bottom: .5em; 35 | font-size: 1em; 36 | color: #555; 37 | } 38 | 39 | .download-decription { 40 | margin-bottom: 1em; 41 | } 42 | 43 | .lead { 44 | font-size: 1.1em; 45 | color: #777; 46 | } 47 | 48 | a { 49 | color: #4b92c6; 50 | text-decoration: none; 51 | } 52 | 53 | .highlight { 54 | margin: 0; 55 | font-size: .9em; 56 | } 57 | 58 | .btn { 59 | display: inline-block; 60 | padding: 10px 15px; 61 | margin-bottom: 0; 62 | font-size: 14px; 63 | line-height: 1; 64 | text-align: center; 65 | white-space: nowrap; 66 | vertical-align: middle; 67 | text-decoration: none; 68 | color: #666; 69 | background-image: none; 70 | border: 1px solid #ddd; 71 | border-radius: 4px; 72 | transition: all .2s linear; 73 | } 74 | .btn:hover { 75 | border-color: #999; 76 | } 77 | 78 | .btn-components, 79 | .btn-download { 80 | margin-right: 1rem; 81 | margin-left: 1rem; 82 | padding: 12px 30px; 83 | display: block; 84 | } 85 | 86 | .btn-download { 87 | margin-bottom: 1rem; 88 | color: #0f2b3c; 89 | border-color: transparent; 90 | background-color: rgba(255, 255, 255, 0.9); 91 | } 92 | .btn-download:hover { 93 | border-color: transparent; 94 | background-color: #fff; 95 | } 96 | 97 | @media (min-width: 32em) { 98 | .btn-components, 99 | .btn-download { 100 | margin-right: 0; 101 | margin-left: 0; 102 | display: inline-block; 103 | } 104 | 105 | .btn-download { 106 | margin-right: 1rem; 107 | margin-bottom: 0; 108 | margin-left: 0; 109 | } 110 | } 111 | .btn-inversed { 112 | color: #fff; 113 | border-color: rgba(255, 255, 255, 0.7); 114 | } 115 | .btn-inversed:hover { 116 | border-color: #fff; 117 | } 118 | 119 | .container { 120 | margin-left: auto; 121 | margin-right: auto; 122 | padding-left: 1rem; 123 | padding-right: 1rem; 124 | } 125 | .container:before, .container:after { 126 | display: table; 127 | content: " "; 128 | } 129 | .container:after { 130 | clear: both; 131 | } 132 | 133 | .col { 134 | position: relative; 135 | padding: 3rem 1rem; 136 | } 137 | 138 | @media (min-width: 32em) { 139 | .container { 140 | padding-left: 0; 141 | padding-right: 0; 142 | max-width: 65rem; 143 | } 144 | 145 | .col-group { 146 | display: -webkit-flex; 147 | display: -ms-flex; 148 | display: flex; 149 | } 150 | 151 | .col { 152 | min-width: 0; 153 | padding-right: 3rem; 154 | padding-left: 3rem; 155 | flex: 1; 156 | } 157 | 158 | .col-one-third { 159 | max-width: 33.333%; 160 | } 161 | } 162 | .masthead { 163 | position: relative; 164 | padding-bottom: 80px; 165 | color: #fff; 166 | background-image: url("/assets/img/photo-couch.png"); 167 | background-size: cover; 168 | } 169 | .masthead:after { 170 | position: absolute; 171 | top: 0; 172 | right: 0; 173 | bottom: 0; 174 | left: 0; 175 | content: ""; 176 | background-color: #000; 177 | opacity: .25; 178 | z-index: 1; 179 | } 180 | 181 | .masthead-content { 182 | position: relative; 183 | margin-top: 50px; 184 | z-index: 10; 185 | } 186 | 187 | .masthead-title { 188 | margin: 0; 189 | padding: 0 1rem 1.5rem; 190 | font-size: 1.5em; 191 | text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 192 | } 193 | 194 | @media (min-width: 32em) { 195 | .masthead { 196 | background-position: center; 197 | } 198 | .masthead:after { 199 | display: none; 200 | } 201 | 202 | .masthead-title { 203 | padding: 0 8rem 3rem; 204 | font-size: 2.1em; 205 | } 206 | } 207 | .photo-credit { 208 | position: absolute; 209 | left: 50%; 210 | bottom: 1em; 211 | font-size: .8em; 212 | color: #fff; 213 | white-space: nowrap; 214 | transform: translatex(-50%); 215 | transition: opacity .15s linear; 216 | opacity: .5; 217 | z-index: 10; 218 | } 219 | .photo-credit:hover { 220 | opacity: .9; 221 | } 222 | 223 | .sub-masthead { 224 | color: #fff; 225 | text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 226 | background-color: #000; 227 | background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #000), color-stop(100%, #0f2b3c)); 228 | background-image: -webkit-linear-gradient(45deg, #000 0%, #0f2b3c 100%); 229 | background-image: -moz-linear-gradient(45deg, #000 0%, #0f2b3c 100%); 230 | background-image: linear-gradient(45deg, #000 0%, #0f2b3c 100%); 231 | } 232 | 233 | .subpage-header-content { 234 | padding: 2.5rem 1rem 3rem; 235 | } 236 | 237 | @media (min-width: 32em) { 238 | .subpage-header-content { 239 | padding: 3rem 3rem 4rem; 240 | } 241 | } 242 | .subpage-title { 243 | margin-top: 0; 244 | margin-bottom: 0; 245 | font-weight: 300; 246 | } 247 | 248 | .subpage-lead { 249 | margin-top: 0; 250 | margin-bottom: 0; 251 | color: #fff; 252 | font-size: 1.3em; 253 | font-weight: 300; 254 | opacity: .8; 255 | } 256 | 257 | .nav { 258 | position: relative; 259 | padding-top: 1.2rem; 260 | padding-bottom: 1.2rem; 261 | margin-left: 1rem; 262 | margin-right: 1rem; 263 | display: block; 264 | font-weight: 500; 265 | border-bottom: 1px solid rgba(255, 255, 255, 0.2); 266 | z-index: 10; 267 | } 268 | .nav:before, .nav:after { 269 | display: table; 270 | content: " "; 271 | } 272 | .nav:after { 273 | clear: both; 274 | } 275 | 276 | .title { 277 | display: block; 278 | font-size: 1em; 279 | color: #fff; 280 | } 281 | 282 | .nav-item { 283 | margin-right: .7rem; 284 | font-size: .8em; 285 | color: #fff; 286 | line-height: 1; 287 | opacity: .7; 288 | transition: opacity .15s linear; 289 | } 290 | .nav-item:hover { 291 | opacity: 1; 292 | } 293 | 294 | .nav-group { 295 | display: block; 296 | } 297 | 298 | @media (min-width: 32em) { 299 | .nav { 300 | margin-left: 3rem; 301 | margin-right: 3rem; 302 | } 303 | 304 | .title { 305 | float: left; 306 | } 307 | 308 | .nav-group { 309 | margin-top: .5em; 310 | float: right; 311 | } 312 | 313 | .nav-item { 314 | margin-right: 3rem; 315 | float: left; 316 | } 317 | 318 | .nav-item:last-child { 319 | margin-right: 0; 320 | } 321 | } 322 | .example-component-window { 323 | height: 300px; 324 | overflow: hidden; 325 | box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); 326 | border: 1px solid #bebebe; 327 | border-radius: 6px; 328 | } 329 | 330 | @media (min-width: 32em) { 331 | .example-component-container { 332 | position: -webkit-sticky; 333 | position: -moz-sticky; 334 | position: -ms-sticky; 335 | position: -o-sticky; 336 | position: sticky; 337 | top: 3rem; 338 | min-width: 310px; 339 | margin-bottom: 3rem; 340 | } 341 | } 342 | .demo-app-container { 343 | height: 450px; 344 | margin-right: 3rem; 345 | margin-bottom: 3rem; 346 | margin-left: 3rem; 347 | display: none; 348 | border-radius: 6px; 349 | overflow: hidden; 350 | box-shadow: 0 0 60px rgba(0, 0, 0, 0.3); 351 | } 352 | 353 | @media (min-width: 32em) { 354 | .demo-app-container { 355 | display: block; 356 | } 357 | } 358 | .demo-app, 359 | .component-example { 360 | width: 100%; 361 | height: 100%; 362 | display: block; 363 | border: 0; 364 | } 365 | 366 | .docs-section { 367 | border-bottom: 1px solid #ddd; 368 | } 369 | 370 | .docs-section-gray { 371 | background-color: #f8f8f8; 372 | } 373 | 374 | @media (min-width: 32em) { 375 | .basic-template-section { 376 | border-top: 1px solid #ddd; 377 | } 378 | } 379 | .oss-section { 380 | position: relative; 381 | color: #fff; 382 | text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 383 | background-color: #000; 384 | background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #000), color-stop(100%, #0f2b3c)); 385 | background-image: -webkit-linear-gradient(45deg, #000 0%, #0f2b3c 100%); 386 | background-image: -moz-linear-gradient(45deg, #000 0%, #0f2b3c 100%); 387 | background-image: linear-gradient(45deg, #000 0%, #0f2b3c 100%); 388 | } 389 | .oss-section a:not(.btn) { 390 | color: #fff; 391 | } 392 | .oss-section p { 393 | color: #cccccc; 394 | } 395 | .oss-section .btn { 396 | margin-top: 20px; 397 | } 398 | .oss-section .col:last-child { 399 | padding-top: 0; 400 | } 401 | 402 | @media (min-width: 32em) { 403 | .oss-section .col:last-child { 404 | padding-top: 3rem; 405 | } 406 | } 407 | .component-section { 408 | margin-bottom: 1rem; 409 | border-bottom: 1px solid #ddd; 410 | } 411 | .component-section.last-component-section { 412 | margin-bottom: 0; 413 | } 414 | .component-section .col:last-child { 415 | padding-top: 0; 416 | } 417 | 418 | @media (min-width: 32em) { 419 | .component-section { 420 | margin-bottom: 0; 421 | border-bottom: 0; 422 | background-color: #fff; 423 | background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #f5f5f5)); 424 | background-image: -webkit-linear-gradient(left, #fff 50%, #f5f5f5 50%); 425 | background-image: linear-gradient(to right, #fff 50%, #f5f5f5 50%); 426 | } 427 | .component-section .col { 428 | padding-top: 3rem; 429 | border-left: 1px solid #ddd; 430 | } 431 | .component-section .col:first-child { 432 | border-left: 0; 433 | } 434 | .component-section .col:last-child { 435 | padding-top: 3rem; 436 | padding-bottom: 0; 437 | } 438 | } 439 | .component-description { 440 | margin-bottom: 2rem; 441 | } 442 | 443 | .footer { 444 | margin-top: -1px; 445 | border-top: 1px solid #ddd; 446 | } 447 | 448 | .footer-content { 449 | font-size: .8em; 450 | font-weight: 500; 451 | opacity: .8; 452 | } 453 | 454 | .footer-links { 455 | padding-left: 0; 456 | list-style: none; 457 | } 458 | .footer-links li { 459 | display: inline-block; 460 | } 461 | 462 | @media (min-width: 32em) { 463 | .footer-content { 464 | margin-right: 5rem; 465 | margin-left: 5rem; 466 | } 467 | } 468 | .text-centered { 469 | text-align: center; 470 | } 471 | 472 | .docs-hr { 473 | margin-top: 2rem; 474 | margin-bottom: 2rem; 475 | background: 0 0; 476 | border: 0; 477 | border-bottom: 1px solid #ddd; 478 | } 479 | 480 | @font-face { 481 | font-family: "photon-entypo"; 482 | src: url("/dist/fonts/photon-entypo.eot"); 483 | src: url("/dist/fonts/photon-entypo.eot?#iefix") format("eot"), url("/dist/fonts/photon-entypo.woff") format("woff"), url("/dist/fonts/photon-entypo.ttf") format("truetype"); 484 | font-weight: normal; 485 | font-style: normal; 486 | } 487 | .icon:before { 488 | position: relative; 489 | display: inline-block; 490 | font-family: "photon-entypo"; 491 | speak: none; 492 | font-size: 100%; 493 | font-style: normal; 494 | font-weight: normal; 495 | font-variant: normal; 496 | text-transform: none; 497 | line-height: 1; 498 | -webkit-font-smoothing: antialiased; 499 | -moz-osx-font-smoothing: grayscale; 500 | } 501 | 502 | .icon-bucket:before { 503 | content: '\e8d5'; 504 | } 505 | 506 | /* '' */ 507 | .icon-code:before { 508 | content: '\e834'; 509 | } 510 | 511 | /* '' */ 512 | .icon-window:before { 513 | content: '\e86d'; 514 | } 515 | 516 | /* '' */ 517 | .buttons-component { 518 | height: 80px; 519 | } 520 | 521 | .button-groups-component { 522 | height: 110px; 523 | } 524 | 525 | .forms-component { 526 | height: 430px; 527 | } 528 | 529 | .icons-component { 530 | height: 700px; 531 | overflow: hidden; 532 | } 533 | -------------------------------------------------------------------------------- /sass/docs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Docs.css 3 | // -------------------------------------------------- 4 | 5 | //Imports 6 | @import "mixins.scss"; 7 | 8 | // Docs variables 9 | $desktop-spacing: 3rem; 10 | $mobile-spacing: 1rem; 11 | 12 | //Base styles 13 | * { 14 | -webkit-box-sizing: border-box; 15 | box-sizing: border-box; 16 | } 17 | 18 | body { 19 | font: 16px/1.7 "Roboto", "Helvetica Neue", Helvetica, arial, sans-serif; 20 | font-weight: 300; 21 | color: #333; 22 | } 23 | 24 | // Typography 25 | h1, h2, h3, h4, h5, h6 { 26 | margin-top: 0; 27 | font-weight: 300; 28 | } 29 | 30 | h2 { 31 | margin-bottom: .18em; 32 | font-size: 1.6em; 33 | } 34 | 35 | h3 { 36 | margin-bottom: .15em; 37 | font-size: 1.3em; 38 | } 39 | 40 | h5 { 41 | font-weight: 400; 42 | } 43 | 44 | p { 45 | margin-top: .5em; 46 | margin-bottom: .5em; 47 | font-size: 1em; 48 | color: #555; 49 | } 50 | 51 | .download-decription { 52 | margin-bottom: 1em; 53 | } 54 | 55 | .lead { 56 | font-size: 1.1em; 57 | color: #777; 58 | } 59 | 60 | a { 61 | color: #4b92c6; 62 | text-decoration: none; 63 | } 64 | 65 | // Code 66 | .highlight { 67 | margin: 0; 68 | font-size: .9em; 69 | } 70 | 71 | // Buttons 72 | .btn { 73 | display: inline-block; 74 | padding: 10px 15px; 75 | margin-bottom: 0; 76 | font-size: 14px; 77 | line-height: 1; 78 | text-align: center; 79 | white-space: nowrap; 80 | vertical-align: middle; 81 | text-decoration: none; 82 | color: #666; 83 | background-image: none; 84 | border: 1px solid #ddd; 85 | border-radius: 4px; 86 | transition: all .2s linear; 87 | 88 | &:hover { 89 | border-color: #999; 90 | } 91 | } 92 | 93 | .btn-components, 94 | .btn-download { 95 | margin-right: $mobile-spacing; 96 | margin-left: $mobile-spacing; 97 | padding: 12px 30px; 98 | display: block; 99 | } 100 | 101 | .btn-download { 102 | margin-bottom: 1rem; 103 | color: #0f2b3c; 104 | border-color: transparent; 105 | background-color: rgba(255,255,255,.9); 106 | 107 | &:hover { 108 | border-color: transparent; 109 | background-color: #fff; 110 | } 111 | } 112 | 113 | @media (min-width: 32em) { 114 | .btn-components, 115 | .btn-download { 116 | margin-right: 0; 117 | margin-left: 0; 118 | display: inline-block; 119 | } 120 | 121 | .btn-download { 122 | margin-right: 1rem; 123 | margin-bottom: 0; 124 | margin-left: 0; 125 | } 126 | } 127 | 128 | .btn-inversed { 129 | color: #fff; 130 | border-color: rgba(255,255,255,.7); 131 | 132 | &:hover { 133 | border-color: #fff; 134 | } 135 | } 136 | 137 | // Use a simple flexbox grid 138 | .container { 139 | margin-left: auto; 140 | margin-right: auto; 141 | padding-left: $mobile-spacing; 142 | padding-right: $mobile-spacing; 143 | @include clearfix; 144 | } 145 | .col { 146 | position: relative; 147 | padding: 3rem $mobile-spacing; 148 | } 149 | 150 | @media (min-width: 32em) { 151 | .container { 152 | padding-left: 0; 153 | padding-right: 0; 154 | max-width: 65rem; 155 | } 156 | 157 | .col-group { 158 | display: -webkit-flex; // Make the grid work in older Safari browsers 159 | display: -ms-flex; // Make the grid work in older IE browsers 160 | display: flex 161 | } 162 | 163 | .col { 164 | min-width: 0; // Fixes everything for firefox 165 | padding-right: $desktop-spacing; 166 | padding-left: $desktop-spacing; 167 | flex: 1; 168 | } 169 | 170 | .col-one-third { 171 | max-width: 33.333%; 172 | } 173 | } 174 | 175 | // Masthead Jumbotron 176 | .masthead { 177 | position: relative; 178 | padding-bottom: 80px; 179 | color: #fff; 180 | background-image: url('/assets/img/photo-couch.png'); 181 | background-size: cover; 182 | 183 | &:after { 184 | position: absolute; 185 | top: 0; 186 | right: 0; 187 | bottom: 0; 188 | left: 0; 189 | content: ""; 190 | background-color: #000; 191 | opacity: .25; 192 | z-index: 1; 193 | } 194 | } 195 | 196 | .masthead-content { 197 | position: relative; 198 | margin-top: 50px; 199 | z-index: 10; 200 | } 201 | 202 | .masthead-title { 203 | margin: 0; 204 | padding: 0 1rem 1.5rem; 205 | font-size: 1.5em; 206 | text-shadow: 0 0 3px rgba(0,0,0,.3); 207 | } 208 | 209 | @media (min-width: 32em) { 210 | .masthead { 211 | background-position: center; 212 | 213 | &:after { 214 | display: none; 215 | } 216 | } 217 | 218 | .masthead-title { 219 | padding: 0 8rem 3rem; 220 | font-size: 2.1em; 221 | } 222 | } 223 | 224 | .photo-credit { 225 | position: absolute; 226 | left: 50%; 227 | bottom: 1em; 228 | font-size: .8em; 229 | color: #fff; 230 | white-space: nowrap; 231 | transform: translatex(-50%); 232 | transition: opacity .15s linear; 233 | opacity: .5; 234 | z-index: 10; 235 | 236 | &:hover { 237 | opacity: .9; 238 | } 239 | } 240 | 241 | // Sub page masthead 242 | .sub-masthead { 243 | color: #fff; 244 | text-shadow: 0 0 3px rgba(0,0,0,.3); 245 | @include directional-gradient(#000, #0f2b3c); 246 | } 247 | 248 | .subpage-header-content { 249 | padding: 2.5rem 1rem 3rem; 250 | } 251 | 252 | @media (min-width: 32em) { 253 | .subpage-header-content { 254 | padding: 3rem 3rem 4rem; 255 | } 256 | } 257 | 258 | .subpage-title { 259 | margin-top: 0; 260 | margin-bottom: 0; 261 | font-weight: 300; 262 | } 263 | 264 | .subpage-lead { 265 | margin-top: 0; 266 | margin-bottom: 0; 267 | color: #fff; 268 | font-size: 1.3em; 269 | font-weight: 300; 270 | opacity: .8; 271 | } 272 | 273 | // Navbar inside each masthead and sub masthead 274 | .nav { 275 | position: relative; 276 | padding-top: 1.2rem; 277 | padding-bottom: 1.2rem; 278 | margin-left: $mobile-spacing; 279 | margin-right: $mobile-spacing; 280 | display: block; 281 | font-weight: 500; 282 | border-bottom: 1px solid rgba(255,255,255,.2); 283 | z-index: 10; 284 | @include clearfix; 285 | } 286 | 287 | .title { 288 | display: block; 289 | font-size: 1em; 290 | color: #fff; 291 | } 292 | 293 | .nav-item { 294 | margin-right: .7rem; 295 | font-size: .8em; 296 | color: #fff; 297 | line-height: 1; 298 | opacity: .7; 299 | transition: opacity .15s linear; 300 | 301 | &:hover { 302 | opacity: 1; 303 | } 304 | } 305 | 306 | .nav-group { 307 | display: block; 308 | } 309 | 310 | @media (min-width: 32em) { 311 | .nav { 312 | margin-left: $desktop-spacing; 313 | margin-right: $desktop-spacing; 314 | } 315 | 316 | .title { 317 | float: left; 318 | } 319 | 320 | .nav-group { 321 | margin-top: .5em; 322 | float: right; 323 | } 324 | 325 | .nav-item { 326 | margin-right: $desktop-spacing; 327 | float: left; 328 | } 329 | 330 | .nav-item:last-child { 331 | margin-right: 0; 332 | } 333 | } 334 | 335 | // Wrap the example in window style (border and box-shadow) 336 | .example-component-window { 337 | height: 300px; 338 | overflow: hidden; 339 | box-shadow: 0 0 30px rgba(0,0,0,.1); 340 | border: 1px solid #bebebe; 341 | border-radius: 6px; 342 | } 343 | 344 | // The demo is useless on mobile 345 | @media (min-width: 32em) { 346 | .example-component-container { 347 | position: -webkit-sticky; 348 | position: -moz-sticky; 349 | position: -ms-sticky; 350 | position: -o-sticky; 351 | position: sticky; 352 | top: $desktop-spacing; 353 | min-width: 310px; 354 | margin-bottom: $desktop-spacing; 355 | } 356 | } 357 | 358 | // This is the homepage's demo 359 | .demo-app-container { 360 | height: 450px; 361 | margin-right: $desktop-spacing; 362 | margin-bottom: $desktop-spacing; 363 | margin-left: $desktop-spacing; 364 | display: none; 365 | border-radius: 6px; 366 | overflow: hidden; 367 | box-shadow: 0 0 60px rgba(0,0,0,.3); 368 | } 369 | 370 | // The demo is useless on mobile 371 | @media (min-width: 32em) { 372 | .demo-app-container { 373 | display: block; 374 | } 375 | } 376 | 377 | .demo-app, 378 | .component-example { 379 | width: 100%; 380 | height: 100%; 381 | display: block; 382 | border: 0; 383 | } 384 | 385 | // Sections 386 | .docs-section { 387 | border-bottom: 1px solid #ddd; 388 | } 389 | 390 | .docs-section-gray { 391 | background-color: #f8f8f8; 392 | } 393 | 394 | @media (min-width: 32em) { 395 | .basic-template-section { 396 | border-top: 1px solid #ddd; 397 | } 398 | } 399 | 400 | .oss-section { 401 | position: relative; 402 | color: #fff; 403 | text-shadow: 0 0 3px rgba(0,0,0,.3); 404 | @include directional-gradient(#000, #0f2b3c); 405 | 406 | a:not(.btn) { 407 | color: #fff; 408 | } 409 | 410 | p { 411 | color: darken(#ffffff, 20%); 412 | } 413 | 414 | .btn { 415 | margin-top: 20px; 416 | } 417 | 418 | .col:last-child { 419 | padding-top: 0; // Give the two sections consistent spaceing on mobile 420 | } 421 | } 422 | 423 | @media (min-width: 32em) { 424 | .oss-section .col:last-child { 425 | padding-top: $desktop-spacing; 426 | } 427 | } 428 | 429 | .component-section { 430 | margin-bottom: $mobile-spacing; 431 | border-bottom: 1px solid #ddd; 432 | 433 | &.last-component-section { 434 | margin-bottom: 0; 435 | } 436 | 437 | .col:last-child { 438 | padding-top: 0; 439 | } 440 | } 441 | 442 | // Component section (split) 443 | @media (min-width: 32em) { 444 | .component-section { 445 | margin-bottom: 0; 446 | border-bottom: 0; 447 | @include split-linear-gradient(#fff, #f5f5f5); 448 | 449 | .col { 450 | padding-top: $desktop-spacing; 451 | border-left: 1px solid #ddd; 452 | 453 | &:first-child { 454 | border-left: 0; 455 | } 456 | 457 | &:last-child { 458 | padding-top: $desktop-spacing; 459 | padding-bottom: 0; 460 | } 461 | } 462 | } 463 | } 464 | 465 | .component-description { 466 | margin-bottom: 2rem; 467 | } 468 | 469 | // Footer 470 | .footer { 471 | margin-top: -1px; // Remove the double border 472 | border-top: 1px solid #ddd; 473 | } 474 | 475 | .footer-content { 476 | font-size: .8em; 477 | font-weight: 500; 478 | opacity: .8; 479 | } 480 | 481 | .footer-links { 482 | padding-left: 0; 483 | list-style: none; 484 | 485 | li { 486 | display: inline-block; 487 | } 488 | } 489 | 490 | @media (min-width: 32em) { 491 | .footer-content { 492 | margin-right: 5rem; 493 | margin-left: 5rem; 494 | } 495 | } 496 | 497 | // Utilities 498 | .text-centered { 499 | text-align: center; 500 | } 501 | 502 | .docs-hr { 503 | margin-top: 2rem; 504 | margin-bottom: 2rem; 505 | background: 0 0; 506 | border: 0; 507 | border-bottom: 1px solid #ddd; 508 | } 509 | 510 | // Icons 511 | @font-face { 512 | font-family: "photon-entypo"; 513 | src: url('/dist/fonts/photon-entypo.eot'); 514 | src: url('/dist/fonts/photon-entypo.eot?#iefix') format('eot'), 515 | url('/dist/fonts/photon-entypo.woff') format('woff'), 516 | url('/dist/fonts/photon-entypo.ttf') format('truetype'); 517 | font-weight: normal; 518 | font-style: normal; 519 | } 520 | 521 | .icon:before { 522 | position: relative; 523 | display: inline-block; 524 | font-family: "photon-entypo"; 525 | speak: none; 526 | font-size: 100%; 527 | font-style: normal; 528 | font-weight: normal; 529 | font-variant: normal; 530 | text-transform: none; 531 | line-height: 1; 532 | -webkit-font-smoothing: antialiased; 533 | -moz-osx-font-smoothing: grayscale; 534 | } 535 | 536 | .icon-bucket:before { content: '\e8d5'; } /* '' */ 537 | .icon-code:before { content: '\e834'; } /* '' */ 538 | .icon-window:before { content: '\e86d'; } /* '' */ 539 | 540 | 541 | // Component specific CSS 542 | .buttons-component { 543 | height: 80px; 544 | } 545 | 546 | .button-groups-component { 547 | height: 110px; 548 | } 549 | 550 | .forms-component { 551 | height: 430px; 552 | } 553 | 554 | .icons-component { 555 | height: 700px; 556 | overflow: hidden; 557 | } 558 | -------------------------------------------------------------------------------- /docs/components/icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Icons example 7 | 8 | 9 | 10 | 11 | 12 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 |
307 | 308 | 309 | -------------------------------------------------------------------------------- /sass/icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "photon-entypo"; 3 | src: url($font-path + 'photon-entypo.eot'); 4 | src: url($font-path + 'photon-entypo.eot?#iefix') format('eot'), 5 | url($font-path + 'photon-entypo.woff') format('woff'), 6 | url($font-path + 'photon-entypo.ttf') format('truetype'); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | 11 | .icon:before { 12 | position: relative; 13 | display: inline-block; 14 | font-family: "photon-entypo"; 15 | speak: none; 16 | font-size: 100%; 17 | font-style: normal; 18 | font-weight: normal; 19 | font-variant: normal; 20 | text-transform: none; 21 | line-height: 1; 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .icon-note:before { content: '\e800'; } /* '' */ 27 | .icon-note-beamed:before { content: '\e801'; } /* '' */ 28 | .icon-music:before { content: '\e802'; } /* '' */ 29 | .icon-search:before { content: '\e803'; } /* '' */ 30 | .icon-flashlight:before { content: '\e804'; } /* '' */ 31 | .icon-mail:before { content: '\e805'; } /* '' */ 32 | .icon-heart:before { content: '\e806'; } /* '' */ 33 | .icon-heart-empty:before { content: '\e807'; } /* '' */ 34 | .icon-star:before { content: '\e808'; } /* '' */ 35 | .icon-star-empty:before { content: '\e809'; } /* '' */ 36 | .icon-user:before { content: '\e80a'; } /* '' */ 37 | .icon-users:before { content: '\e80b'; } /* '' */ 38 | .icon-user-add:before { content: '\e80c'; } /* '' */ 39 | .icon-video:before { content: '\e80d'; } /* '' */ 40 | .icon-picture:before { content: '\e80e'; } /* '' */ 41 | .icon-camera:before { content: '\e80f'; } /* '' */ 42 | .icon-layout:before { content: '\e810'; } /* '' */ 43 | .icon-menu:before { content: '\e811'; } /* '' */ 44 | .icon-check:before { content: '\e812'; } /* '' */ 45 | .icon-cancel:before { content: '\e813'; } /* '' */ 46 | .icon-cancel-circled:before { content: '\e814'; } /* '' */ 47 | .icon-cancel-squared:before { content: '\e815'; } /* '' */ 48 | .icon-plus:before { content: '\e816'; } /* '' */ 49 | .icon-plus-circled:before { content: '\e817'; } /* '' */ 50 | .icon-plus-squared:before { content: '\e818'; } /* '' */ 51 | .icon-minus:before { content: '\e819'; } /* '' */ 52 | .icon-minus-circled:before { content: '\e81a'; } /* '' */ 53 | .icon-minus-squared:before { content: '\e81b'; } /* '' */ 54 | .icon-help:before { content: '\e81c'; } /* '' */ 55 | .icon-help-circled:before { content: '\e81d'; } /* '' */ 56 | .icon-info:before { content: '\e81e'; } /* '' */ 57 | .icon-info-circled:before { content: '\e81f'; } /* '' */ 58 | .icon-back:before { content: '\e820'; } /* '' */ 59 | .icon-home:before { content: '\e821'; } /* '' */ 60 | .icon-link:before { content: '\e822'; } /* '' */ 61 | .icon-attach:before { content: '\e823'; } /* '' */ 62 | .icon-lock:before { content: '\e824'; } /* '' */ 63 | .icon-lock-open:before { content: '\e825'; } /* '' */ 64 | .icon-eye:before { content: '\e826'; } /* '' */ 65 | .icon-tag:before { content: '\e827'; } /* '' */ 66 | .icon-bookmark:before { content: '\e828'; } /* '' */ 67 | .icon-bookmarks:before { content: '\e829'; } /* '' */ 68 | .icon-flag:before { content: '\e82a'; } /* '' */ 69 | .icon-thumbs-up:before { content: '\e82b'; } /* '' */ 70 | .icon-thumbs-down:before { content: '\e82c'; } /* '' */ 71 | .icon-download:before { content: '\e82d'; } /* '' */ 72 | .icon-upload:before { content: '\e82e'; } /* '' */ 73 | .icon-upload-cloud:before { content: '\e82f'; } /* '' */ 74 | .icon-reply:before { content: '\e830'; } /* '' */ 75 | .icon-reply-all:before { content: '\e831'; } /* '' */ 76 | .icon-forward:before { content: '\e832'; } /* '' */ 77 | .icon-quote:before { content: '\e833'; } /* '' */ 78 | .icon-code:before { content: '\e834'; } /* '' */ 79 | .icon-export:before { content: '\e835'; } /* '' */ 80 | .icon-pencil:before { content: '\e836'; } /* '' */ 81 | .icon-feather:before { content: '\e837'; } /* '' */ 82 | .icon-print:before { content: '\e838'; } /* '' */ 83 | .icon-retweet:before { content: '\e839'; } /* '' */ 84 | .icon-keyboard:before { content: '\e83a'; } /* '' */ 85 | .icon-comment:before { content: '\e83b'; } /* '' */ 86 | .icon-chat:before { content: '\e83c'; } /* '' */ 87 | .icon-bell:before { content: '\e83d'; } /* '' */ 88 | .icon-attention:before { content: '\e83e'; } /* '' */ 89 | .icon-alert:before { content: '\e83f'; } /* '' */ 90 | .icon-vcard:before { content: '\e840'; } /* '' */ 91 | .icon-address:before { content: '\e841'; } /* '' */ 92 | .icon-location:before { content: '\e842'; } /* '' */ 93 | .icon-map:before { content: '\e843'; } /* '' */ 94 | .icon-direction:before { content: '\e844'; } /* '' */ 95 | .icon-compass:before { content: '\e845'; } /* '' */ 96 | .icon-cup:before { content: '\e846'; } /* '' */ 97 | .icon-trash:before { content: '\e847'; } /* '' */ 98 | .icon-doc:before { content: '\e848'; } /* '' */ 99 | .icon-docs:before { content: '\e849'; } /* '' */ 100 | .icon-doc-landscape:before { content: '\e84a'; } /* '' */ 101 | .icon-doc-text:before { content: '\e84b'; } /* '' */ 102 | .icon-doc-text-inv:before { content: '\e84c'; } /* '' */ 103 | .icon-newspaper:before { content: '\e84d'; } /* '' */ 104 | .icon-book-open:before { content: '\e84e'; } /* '' */ 105 | .icon-book:before { content: '\e84f'; } /* '' */ 106 | .icon-folder:before { content: '\e850'; } /* '' */ 107 | .icon-archive:before { content: '\e851'; } /* '' */ 108 | .icon-box:before { content: '\e852'; } /* '' */ 109 | .icon-rss:before { content: '\e853'; } /* '' */ 110 | .icon-phone:before { content: '\e854'; } /* '' */ 111 | .icon-cog:before { content: '\e855'; } /* '' */ 112 | .icon-tools:before { content: '\e856'; } /* '' */ 113 | .icon-share:before { content: '\e857'; } /* '' */ 114 | .icon-shareable:before { content: '\e858'; } /* '' */ 115 | .icon-basket:before { content: '\e859'; } /* '' */ 116 | .icon-bag:before { content: '\e85a'; } /* '' */ 117 | .icon-calendar:before { content: '\e85b'; } /* '' */ 118 | .icon-login:before { content: '\e85c'; } /* '' */ 119 | .icon-logout:before { content: '\e85d'; } /* '' */ 120 | .icon-mic:before { content: '\e85e'; } /* '' */ 121 | .icon-mute:before { content: '\e85f'; } /* '' */ 122 | .icon-sound:before { content: '\e860'; } /* '' */ 123 | .icon-volume:before { content: '\e861'; } /* '' */ 124 | .icon-clock:before { content: '\e862'; } /* '' */ 125 | .icon-hourglass:before { content: '\e863'; } /* '' */ 126 | .icon-lamp:before { content: '\e864'; } /* '' */ 127 | .icon-light-down:before { content: '\e865'; } /* '' */ 128 | .icon-light-up:before { content: '\e866'; } /* '' */ 129 | .icon-adjust:before { content: '\e867'; } /* '' */ 130 | .icon-block:before { content: '\e868'; } /* '' */ 131 | .icon-resize-full:before { content: '\e869'; } /* '' */ 132 | .icon-resize-small:before { content: '\e86a'; } /* '' */ 133 | .icon-popup:before { content: '\e86b'; } /* '' */ 134 | .icon-publish:before { content: '\e86c'; } /* '' */ 135 | .icon-window:before { content: '\e86d'; } /* '' */ 136 | .icon-arrow-combo:before { content: '\e86e'; } /* '' */ 137 | .icon-down-circled:before { content: '\e86f'; } /* '' */ 138 | .icon-left-circled:before { content: '\e870'; } /* '' */ 139 | .icon-right-circled:before { content: '\e871'; } /* '' */ 140 | .icon-up-circled:before { content: '\e872'; } /* '' */ 141 | .icon-down-open:before { content: '\e873'; } /* '' */ 142 | .icon-left-open:before { content: '\e874'; } /* '' */ 143 | .icon-right-open:before { content: '\e875'; } /* '' */ 144 | .icon-up-open:before { content: '\e876'; } /* '' */ 145 | .icon-down-open-mini:before { content: '\e877'; } /* '' */ 146 | .icon-left-open-mini:before { content: '\e878'; } /* '' */ 147 | .icon-right-open-mini:before { content: '\e879'; } /* '' */ 148 | .icon-up-open-mini:before { content: '\e87a'; } /* '' */ 149 | .icon-down-open-big:before { content: '\e87b'; } /* '' */ 150 | .icon-left-open-big:before { content: '\e87c'; } /* '' */ 151 | .icon-right-open-big:before { content: '\e87d'; } /* '' */ 152 | .icon-up-open-big:before { content: '\e87e'; } /* '' */ 153 | .icon-down:before { content: '\e87f'; } /* '' */ 154 | .icon-left:before { content: '\e880'; } /* '' */ 155 | .icon-right:before { content: '\e881'; } /* '' */ 156 | .icon-up:before { content: '\e882'; } /* '' */ 157 | .icon-down-dir:before { content: '\e883'; } /* '' */ 158 | .icon-left-dir:before { content: '\e884'; } /* '' */ 159 | .icon-right-dir:before { content: '\e885'; } /* '' */ 160 | .icon-up-dir:before { content: '\e886'; } /* '' */ 161 | .icon-down-bold:before { content: '\e887'; } /* '' */ 162 | .icon-left-bold:before { content: '\e888'; } /* '' */ 163 | .icon-right-bold:before { content: '\e889'; } /* '' */ 164 | .icon-up-bold:before { content: '\e88a'; } /* '' */ 165 | .icon-down-thin:before { content: '\e88b'; } /* '' */ 166 | .icon-left-thin:before { content: '\e88c'; } /* '' */ 167 | .icon-right-thin:before { content: '\e88d'; } /* '' */ 168 | .icon-up-thin:before { content: '\e88e'; } /* '' */ 169 | .icon-ccw:before { content: '\e88f'; } /* '' */ 170 | .icon-cw:before { content: '\e890'; } /* '' */ 171 | .icon-arrows-ccw:before { content: '\e891'; } /* '' */ 172 | .icon-level-down:before { content: '\e892'; } /* '' */ 173 | .icon-level-up:before { content: '\e893'; } /* '' */ 174 | .icon-shuffle:before { content: '\e894'; } /* '' */ 175 | .icon-loop:before { content: '\e895'; } /* '' */ 176 | .icon-switch:before { content: '\e896'; } /* '' */ 177 | .icon-play:before { content: '\e897'; } /* '' */ 178 | .icon-stop:before { content: '\e898'; } /* '' */ 179 | .icon-pause:before { content: '\e899'; } /* '' */ 180 | .icon-record:before { content: '\e89a'; } /* '' */ 181 | .icon-to-end:before { content: '\e89b'; } /* '' */ 182 | .icon-to-start:before { content: '\e89c'; } /* '' */ 183 | .icon-fast-forward:before { content: '\e89d'; } /* '' */ 184 | .icon-fast-backward:before { content: '\e89e'; } /* '' */ 185 | .icon-progress-0:before { content: '\e89f'; } /* '' */ 186 | .icon-progress-1:before { content: '\e8a0'; } /* '' */ 187 | .icon-progress-2:before { content: '\e8a1'; } /* '' */ 188 | .icon-progress-3:before { content: '\e8a2'; } /* '' */ 189 | .icon-target:before { content: '\e8a3'; } /* '' */ 190 | .icon-palette:before { content: '\e8a4'; } /* '' */ 191 | .icon-list:before { content: '\e8a5'; } /* '' */ 192 | .icon-list-add:before { content: '\e8a6'; } /* '' */ 193 | .icon-signal:before { content: '\e8a7'; } /* '' */ 194 | .icon-trophy:before { content: '\e8a8'; } /* '' */ 195 | .icon-battery:before { content: '\e8a9'; } /* '' */ 196 | .icon-back-in-time:before { content: '\e8aa'; } /* '' */ 197 | .icon-monitor:before { content: '\e8ab'; } /* '' */ 198 | .icon-mobile:before { content: '\e8ac'; } /* '' */ 199 | .icon-network:before { content: '\e8ad'; } /* '' */ 200 | .icon-cd:before { content: '\e8ae'; } /* '' */ 201 | .icon-inbox:before { content: '\e8af'; } /* '' */ 202 | .icon-install:before { content: '\e8b0'; } /* '' */ 203 | .icon-globe:before { content: '\e8b1'; } /* '' */ 204 | .icon-cloud:before { content: '\e8b2'; } /* '' */ 205 | .icon-cloud-thunder:before { content: '\e8b3'; } /* '' */ 206 | .icon-flash:before { content: '\e8b4'; } /* '' */ 207 | .icon-moon:before { content: '\e8b5'; } /* '' */ 208 | .icon-flight:before { content: '\e8b6'; } /* '' */ 209 | .icon-paper-plane:before { content: '\e8b7'; } /* '' */ 210 | .icon-leaf:before { content: '\e8b8'; } /* '' */ 211 | .icon-lifebuoy:before { content: '\e8b9'; } /* '' */ 212 | .icon-mouse:before { content: '\e8ba'; } /* '' */ 213 | .icon-briefcase:before { content: '\e8bb'; } /* '' */ 214 | .icon-suitcase:before { content: '\e8bc'; } /* '' */ 215 | .icon-dot:before { content: '\e8bd'; } /* '' */ 216 | .icon-dot-2:before { content: '\e8be'; } /* '' */ 217 | .icon-dot-3:before { content: '\e8bf'; } /* '' */ 218 | .icon-brush:before { content: '\e8c0'; } /* '' */ 219 | .icon-magnet:before { content: '\e8c1'; } /* '' */ 220 | .icon-infinity:before { content: '\e8c2'; } /* '' */ 221 | .icon-erase:before { content: '\e8c3'; } /* '' */ 222 | .icon-chart-pie:before { content: '\e8c4'; } /* '' */ 223 | .icon-chart-line:before { content: '\e8c5'; } /* '' */ 224 | .icon-chart-bar:before { content: '\e8c6'; } /* '' */ 225 | .icon-chart-area:before { content: '\e8c7'; } /* '' */ 226 | .icon-tape:before { content: '\e8c8'; } /* '' */ 227 | .icon-graduation-cap:before { content: '\e8c9'; } /* '' */ 228 | .icon-language:before { content: '\e8ca'; } /* '' */ 229 | .icon-ticket:before { content: '\e8cb'; } /* '' */ 230 | .icon-water:before { content: '\e8cc'; } /* '' */ 231 | .icon-droplet:before { content: '\e8cd'; } /* '' */ 232 | .icon-air:before { content: '\e8ce'; } /* '' */ 233 | .icon-credit-card:before { content: '\e8cf'; } /* '' */ 234 | .icon-floppy:before { content: '\e8d0'; } /* '' */ 235 | .icon-clipboard:before { content: '\e8d1'; } /* '' */ 236 | .icon-megaphone:before { content: '\e8d2'; } /* '' */ 237 | .icon-database:before { content: '\e8d3'; } /* '' */ 238 | .icon-drive:before { content: '\e8d4'; } /* '' */ 239 | .icon-bucket:before { content: '\e8d5'; } /* '' */ 240 | .icon-thermometer:before { content: '\e8d6'; } /* '' */ 241 | .icon-key:before { content: '\e8d7'; } /* '' */ 242 | .icon-flow-cascade:before { content: '\e8d8'; } /* '' */ 243 | .icon-flow-branch:before { content: '\e8d9'; } /* '' */ 244 | .icon-flow-tree:before { content: '\e8da'; } /* '' */ 245 | .icon-flow-line:before { content: '\e8db'; } /* '' */ 246 | .icon-flow-parallel:before { content: '\e8dc'; } /* '' */ 247 | .icon-rocket:before { content: '\e8dd'; } /* '' */ 248 | .icon-gauge:before { content: '\e8de'; } /* '' */ 249 | .icon-traffic-cone:before { content: '\e8df'; } /* '' */ 250 | .icon-cc:before { content: '\e8e0'; } /* '' */ 251 | .icon-cc-by:before { content: '\e8e1'; } /* '' */ 252 | .icon-cc-nc:before { content: '\e8e2'; } /* '' */ 253 | .icon-cc-nc-eu:before { content: '\e8e3'; } /* '' */ 254 | .icon-cc-nc-jp:before { content: '\e8e4'; } /* '' */ 255 | .icon-cc-sa:before { content: '\e8e5'; } /* '' */ 256 | .icon-cc-nd:before { content: '\e8e6'; } /* '' */ 257 | .icon-cc-pd:before { content: '\e8e7'; } /* '' */ 258 | .icon-cc-zero:before { content: '\e8e8'; } /* '' */ 259 | .icon-cc-share:before { content: '\e8e9'; } /* '' */ 260 | .icon-cc-remix:before { content: '\e8ea'; } /* '' */ 261 | .icon-github:before { content: '\e8eb'; } /* '' */ 262 | .icon-github-circled:before { content: '\e8ec'; } /* '' */ 263 | .icon-flickr:before { content: '\e8ed'; } /* '' */ 264 | .icon-flickr-circled:before { content: '\e8ee'; } /* '' */ 265 | .icon-vimeo:before { content: '\e8ef'; } /* '' */ 266 | .icon-vimeo-circled:before { content: '\e8f0'; } /* '' */ 267 | .icon-twitter:before { content: '\e8f1'; } /* '' */ 268 | .icon-twitter-circled:before { content: '\e8f2'; } /* '' */ 269 | .icon-facebook:before { content: '\e8f3'; } /* '' */ 270 | .icon-facebook-circled:before { content: '\e8f4'; } /* '' */ 271 | .icon-facebook-squared:before { content: '\e8f5'; } /* '' */ 272 | .icon-gplus:before { content: '\e8f6'; } /* '' */ 273 | .icon-gplus-circled:before { content: '\e8f7'; } /* '' */ 274 | .icon-pinterest:before { content: '\e8f8'; } /* '' */ 275 | .icon-pinterest-circled:before { content: '\e8f9'; } /* '' */ 276 | .icon-tumblr:before { content: '\e8fa'; } /* '' */ 277 | .icon-tumblr-circled:before { content: '\e8fb'; } /* '' */ 278 | .icon-linkedin:before { content: '\e8fc'; } /* '' */ 279 | .icon-linkedin-circled:before { content: '\e8fd'; } /* '' */ 280 | .icon-dribbble:before { content: '\e8fe'; } /* '' */ 281 | .icon-dribbble-circled:before { content: '\e8ff'; } /* '' */ 282 | .icon-stumbleupon:before { content: '\e900'; } /* '' */ 283 | .icon-stumbleupon-circled:before { content: '\e901'; } /* '' */ 284 | .icon-lastfm:before { content: '\e902'; } /* '' */ 285 | .icon-lastfm-circled:before { content: '\e903'; } /* '' */ 286 | .icon-rdio:before { content: '\e904'; } /* '' */ 287 | .icon-rdio-circled:before { content: '\e905'; } /* '' */ 288 | .icon-spotify:before { content: '\e906'; } /* '' */ 289 | .icon-spotify-circled:before { content: '\e907'; } /* '' */ 290 | .icon-qq:before { content: '\e908'; } /* '' */ 291 | .icon-instagram:before { content: '\e909'; } /* '' */ 292 | .icon-dropbox:before { content: '\e90a'; } /* '' */ 293 | .icon-evernote:before { content: '\e90b'; } /* '' */ 294 | .icon-flattr:before { content: '\e90c'; } /* '' */ 295 | .icon-skype:before { content: '\e90d'; } /* '' */ 296 | .icon-skype-circled:before { content: '\e90e'; } /* '' */ 297 | .icon-renren:before { content: '\e90f'; } /* '' */ 298 | .icon-sina-weibo:before { content: '\e910'; } /* '' */ 299 | .icon-paypal:before { content: '\e911'; } /* '' */ 300 | .icon-picasa:before { content: '\e912'; } /* '' */ 301 | .icon-soundcloud:before { content: '\e913'; } /* '' */ 302 | .icon-mixi:before { content: '\e914'; } /* '' */ 303 | .icon-behance:before { content: '\e915'; } /* '' */ 304 | .icon-google-circles:before { content: '\e916'; } /* '' */ 305 | .icon-vkontakte:before { content: '\e917'; } /* '' */ 306 | .icon-smashing:before { content: '\e918'; } /* '' */ 307 | .icon-sweden:before { content: '\e919'; } /* '' */ 308 | .icon-db-shape:before { content: '\e91a'; } /* '' */ 309 | .icon-logo-db:before { content: '\e91b'; } /* '' */ 310 | -------------------------------------------------------------------------------- /docs/LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | Attribution 3.0 Unported 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS LICENSE DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE INFORMATION PROVIDED, AND DISCLAIMS LIABILITY FOR 10 | DAMAGES RESULTING FROM ITS USE. 11 | 12 | License 13 | 14 | THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE 15 | COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY 16 | COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS 17 | AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED. 18 | 19 | BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE 20 | TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY 21 | BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS 22 | CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND 23 | CONDITIONS. 24 | 25 | 1. Definitions 26 | 27 | a. "Adaptation" means a work based upon the Work, or upon the Work and 28 | other pre-existing works, such as a translation, adaptation, 29 | derivative work, arrangement of music or other alterations of a 30 | literary or artistic work, or phonogram or performance and includes 31 | cinematographic adaptations or any other form in which the Work may be 32 | recast, transformed, or adapted including in any form recognizably 33 | derived from the original, except that a work that constitutes a 34 | Collection will not be considered an Adaptation for the purpose of 35 | this License. For the avoidance of doubt, where the Work is a musical 36 | work, performance or phonogram, the synchronization of the Work in 37 | timed-relation with a moving image ("synching") will be considered an 38 | Adaptation for the purpose of this License. 39 | b. "Collection" means a collection of literary or artistic works, such as 40 | encyclopedias and anthologies, or performances, phonograms or 41 | broadcasts, or other works or subject matter other than works listed 42 | in Section 1(f) below, which, by reason of the selection and 43 | arrangement of their contents, constitute intellectual creations, in 44 | which the Work is included in its entirety in unmodified form along 45 | with one or more other contributions, each constituting separate and 46 | independent works in themselves, which together are assembled into a 47 | collective whole. A work that constitutes a Collection will not be 48 | considered an Adaptation (as defined above) for the purposes of this 49 | License. 50 | c. "Distribute" means to make available to the public the original and 51 | copies of the Work or Adaptation, as appropriate, through sale or 52 | other transfer of ownership. 53 | d. "Licensor" means the individual, individuals, entity or entities that 54 | offer(s) the Work under the terms of this License. 55 | e. "Original Author" means, in the case of a literary or artistic work, 56 | the individual, individuals, entity or entities who created the Work 57 | or if no individual or entity can be identified, the publisher; and in 58 | addition (i) in the case of a performance the actors, singers, 59 | musicians, dancers, and other persons who act, sing, deliver, declaim, 60 | play in, interpret or otherwise perform literary or artistic works or 61 | expressions of folklore; (ii) in the case of a phonogram the producer 62 | being the person or legal entity who first fixes the sounds of a 63 | performance or other sounds; and, (iii) in the case of broadcasts, the 64 | organization that transmits the broadcast. 65 | f. "Work" means the literary and/or artistic work offered under the terms 66 | of this License including without limitation any production in the 67 | literary, scientific and artistic domain, whatever may be the mode or 68 | form of its expression including digital form, such as a book, 69 | pamphlet and other writing; a lecture, address, sermon or other work 70 | of the same nature; a dramatic or dramatico-musical work; a 71 | choreographic work or entertainment in dumb show; a musical 72 | composition with or without words; a cinematographic work to which are 73 | assimilated works expressed by a process analogous to cinematography; 74 | a work of drawing, painting, architecture, sculpture, engraving or 75 | lithography; a photographic work to which are assimilated works 76 | expressed by a process analogous to photography; a work of applied 77 | art; an illustration, map, plan, sketch or three-dimensional work 78 | relative to geography, topography, architecture or science; a 79 | performance; a broadcast; a phonogram; a compilation of data to the 80 | extent it is protected as a copyrightable work; or a work performed by 81 | a variety or circus performer to the extent it is not otherwise 82 | considered a literary or artistic work. 83 | g. "You" means an individual or entity exercising rights under this 84 | License who has not previously violated the terms of this License with 85 | respect to the Work, or who has received express permission from the 86 | Licensor to exercise rights under this License despite a previous 87 | violation. 88 | h. "Publicly Perform" means to perform public recitations of the Work and 89 | to communicate to the public those public recitations, by any means or 90 | process, including by wire or wireless means or public digital 91 | performances; to make available to the public Works in such a way that 92 | members of the public may access these Works from a place and at a 93 | place individually chosen by them; to perform the Work to the public 94 | by any means or process and the communication to the public of the 95 | performances of the Work, including by public digital performance; to 96 | broadcast and rebroadcast the Work by any means including signs, 97 | sounds or images. 98 | i. "Reproduce" means to make copies of the Work by any means including 99 | without limitation by sound or visual recordings and the right of 100 | fixation and reproducing fixations of the Work, including storage of a 101 | protected performance or phonogram in digital form or other electronic 102 | medium. 103 | 104 | 2. Fair Dealing Rights. Nothing in this License is intended to reduce, 105 | limit, or restrict any uses free from copyright or rights arising from 106 | limitations or exceptions that are provided for in connection with the 107 | copyright protection under copyright law or other applicable laws. 108 | 109 | 3. License Grant. Subject to the terms and conditions of this License, 110 | Licensor hereby grants You a worldwide, royalty-free, non-exclusive, 111 | perpetual (for the duration of the applicable copyright) license to 112 | exercise the rights in the Work as stated below: 113 | 114 | a. to Reproduce the Work, to incorporate the Work into one or more 115 | Collections, and to Reproduce the Work as incorporated in the 116 | Collections; 117 | b. to create and Reproduce Adaptations provided that any such Adaptation, 118 | including any translation in any medium, takes reasonable steps to 119 | clearly label, demarcate or otherwise identify that changes were made 120 | to the original Work. For example, a translation could be marked "The 121 | original work was translated from English to Spanish," or a 122 | modification could indicate "The original work has been modified."; 123 | c. to Distribute and Publicly Perform the Work including as incorporated 124 | in Collections; and, 125 | d. to Distribute and Publicly Perform Adaptations. 126 | e. For the avoidance of doubt: 127 | 128 | i. Non-waivable Compulsory License Schemes. In those jurisdictions in 129 | which the right to collect royalties through any statutory or 130 | compulsory licensing scheme cannot be waived, the Licensor 131 | reserves the exclusive right to collect such royalties for any 132 | exercise by You of the rights granted under this License; 133 | ii. Waivable Compulsory License Schemes. In those jurisdictions in 134 | which the right to collect royalties through any statutory or 135 | compulsory licensing scheme can be waived, the Licensor waives the 136 | exclusive right to collect such royalties for any exercise by You 137 | of the rights granted under this License; and, 138 | iii. Voluntary License Schemes. The Licensor waives the right to 139 | collect royalties, whether individually or, in the event that the 140 | Licensor is a member of a collecting society that administers 141 | voluntary licensing schemes, via that society, from any exercise 142 | by You of the rights granted under this License. 143 | 144 | The above rights may be exercised in all media and formats whether now 145 | known or hereafter devised. The above rights include the right to make 146 | such modifications as are technically necessary to exercise the rights in 147 | other media and formats. Subject to Section 8(f), all rights not expressly 148 | granted by Licensor are hereby reserved. 149 | 150 | 4. Restrictions. The license granted in Section 3 above is expressly made 151 | subject to and limited by the following restrictions: 152 | 153 | a. You may Distribute or Publicly Perform the Work only under the terms 154 | of this License. You must include a copy of, or the Uniform Resource 155 | Identifier (URI) for, this License with every copy of the Work You 156 | Distribute or Publicly Perform. You may not offer or impose any terms 157 | on the Work that restrict the terms of this License or the ability of 158 | the recipient of the Work to exercise the rights granted to that 159 | recipient under the terms of the License. You may not sublicense the 160 | Work. You must keep intact all notices that refer to this License and 161 | to the disclaimer of warranties with every copy of the Work You 162 | Distribute or Publicly Perform. When You Distribute or Publicly 163 | Perform the Work, You may not impose any effective technological 164 | measures on the Work that restrict the ability of a recipient of the 165 | Work from You to exercise the rights granted to that recipient under 166 | the terms of the License. This Section 4(a) applies to the Work as 167 | incorporated in a Collection, but this does not require the Collection 168 | apart from the Work itself to be made subject to the terms of this 169 | License. If You create a Collection, upon notice from any Licensor You 170 | must, to the extent practicable, remove from the Collection any credit 171 | as required by Section 4(b), as requested. If You create an 172 | Adaptation, upon notice from any Licensor You must, to the extent 173 | practicable, remove from the Adaptation any credit as required by 174 | Section 4(b), as requested. 175 | b. If You Distribute, or Publicly Perform the Work or any Adaptations or 176 | Collections, You must, unless a request has been made pursuant to 177 | Section 4(a), keep intact all copyright notices for the Work and 178 | provide, reasonable to the medium or means You are utilizing: (i) the 179 | name of the Original Author (or pseudonym, if applicable) if supplied, 180 | and/or if the Original Author and/or Licensor designate another party 181 | or parties (e.g., a sponsor institute, publishing entity, journal) for 182 | attribution ("Attribution Parties") in Licensor's copyright notice, 183 | terms of service or by other reasonable means, the name of such party 184 | or parties; (ii) the title of the Work if supplied; (iii) to the 185 | extent reasonably practicable, the URI, if any, that Licensor 186 | specifies to be associated with the Work, unless such URI does not 187 | refer to the copyright notice or licensing information for the Work; 188 | and (iv) , consistent with Section 3(b), in the case of an Adaptation, 189 | a credit identifying the use of the Work in the Adaptation (e.g., 190 | "French translation of the Work by Original Author," or "Screenplay 191 | based on original Work by Original Author"). The credit required by 192 | this Section 4 (b) may be implemented in any reasonable manner; 193 | provided, however, that in the case of a Adaptation or Collection, at 194 | a minimum such credit will appear, if a credit for all contributing 195 | authors of the Adaptation or Collection appears, then as part of these 196 | credits and in a manner at least as prominent as the credits for the 197 | other contributing authors. For the avoidance of doubt, You may only 198 | use the credit required by this Section for the purpose of attribution 199 | in the manner set out above and, by exercising Your rights under this 200 | License, You may not implicitly or explicitly assert or imply any 201 | connection with, sponsorship or endorsement by the Original Author, 202 | Licensor and/or Attribution Parties, as appropriate, of You or Your 203 | use of the Work, without the separate, express prior written 204 | permission of the Original Author, Licensor and/or Attribution 205 | Parties. 206 | c. Except as otherwise agreed in writing by the Licensor or as may be 207 | otherwise permitted by applicable law, if You Reproduce, Distribute or 208 | Publicly Perform the Work either by itself or as part of any 209 | Adaptations or Collections, You must not distort, mutilate, modify or 210 | take other derogatory action in relation to the Work which would be 211 | prejudicial to the Original Author's honor or reputation. Licensor 212 | agrees that in those jurisdictions (e.g. Japan), in which any exercise 213 | of the right granted in Section 3(b) of this License (the right to 214 | make Adaptations) would be deemed to be a distortion, mutilation, 215 | modification or other derogatory action prejudicial to the Original 216 | Author's honor and reputation, the Licensor will waive or not assert, 217 | as appropriate, this Section, to the fullest extent permitted by the 218 | applicable national law, to enable You to reasonably exercise Your 219 | right under Section 3(b) of this License (right to make Adaptations) 220 | but not otherwise. 221 | 222 | 5. Representations, Warranties and Disclaimer 223 | 224 | UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR 225 | OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY 226 | KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, 227 | INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, 228 | FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF 229 | LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, 230 | WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION 231 | OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU. 232 | 233 | 6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE 234 | LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR 235 | ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES 236 | ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS 237 | BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 238 | 239 | 7. Termination 240 | 241 | a. This License and the rights granted hereunder will terminate 242 | automatically upon any breach by You of the terms of this License. 243 | Individuals or entities who have received Adaptations or Collections 244 | from You under this License, however, will not have their licenses 245 | terminated provided such individuals or entities remain in full 246 | compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will 247 | survive any termination of this License. 248 | b. Subject to the above terms and conditions, the license granted here is 249 | perpetual (for the duration of the applicable copyright in the Work). 250 | Notwithstanding the above, Licensor reserves the right to release the 251 | Work under different license terms or to stop distributing the Work at 252 | any time; provided, however that any such election will not serve to 253 | withdraw this License (or any other license that has been, or is 254 | required to be, granted under the terms of this License), and this 255 | License will continue in full force and effect unless terminated as 256 | stated above. 257 | 258 | 8. Miscellaneous 259 | 260 | a. Each time You Distribute or Publicly Perform the Work or a Collection, 261 | the Licensor offers to the recipient a license to the Work on the same 262 | terms and conditions as the license granted to You under this License. 263 | b. Each time You Distribute or Publicly Perform an Adaptation, Licensor 264 | offers to the recipient a license to the original Work on the same 265 | terms and conditions as the license granted to You under this License. 266 | c. If any provision of this License is invalid or unenforceable under 267 | applicable law, it shall not affect the validity or enforceability of 268 | the remainder of the terms of this License, and without further action 269 | by the parties to this agreement, such provision shall be reformed to 270 | the minimum extent necessary to make such provision valid and 271 | enforceable. 272 | d. No term or provision of this License shall be deemed waived and no 273 | breach consented to unless such waiver or consent shall be in writing 274 | and signed by the party to be charged with such waiver or consent. 275 | e. This License constitutes the entire agreement between the parties with 276 | respect to the Work licensed here. There are no understandings, 277 | agreements or representations with respect to the Work not specified 278 | here. Licensor shall not be bound by any additional provisions that 279 | may appear in any communication from You. This License may not be 280 | modified without the mutual written agreement of the Licensor and You. 281 | f. The rights granted under, and the subject matter referenced, in this 282 | License were drafted utilizing the terminology of the Berne Convention 283 | for the Protection of Literary and Artistic Works (as amended on 284 | September 28, 1979), the Rome Convention of 1961, the WIPO Copyright 285 | Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 286 | and the Universal Copyright Convention (as revised on July 24, 1971). 287 | These rights and subject matter take effect in the relevant 288 | jurisdiction in which the License terms are sought to be enforced 289 | according to the corresponding provisions of the implementation of 290 | those treaty provisions in the applicable national law. If the 291 | standard suite of rights granted under applicable copyright law 292 | includes additional rights not granted under this License, such 293 | additional rights are deemed to be included in the License; this 294 | License is not intended to restrict the license of any rights under 295 | applicable law. 296 | 297 | 298 | Creative Commons Notice 299 | 300 | Creative Commons is not a party to this License, and makes no warranty 301 | whatsoever in connection with the Work. Creative Commons will not be 302 | liable to You or any party on any legal theory for any damages 303 | whatsoever, including without limitation any general, special, 304 | incidental or consequential damages arising in connection to this 305 | license. Notwithstanding the foregoing two (2) sentences, if Creative 306 | Commons has expressly identified itself as the Licensor hereunder, it 307 | shall have all rights and obligations of Licensor. 308 | 309 | Except for the limited purpose of indicating to the public that the 310 | Work is licensed under the CCPL, Creative Commons does not authorize 311 | the use by either party of the trademark "Creative Commons" or any 312 | related trademark or logo of Creative Commons without the prior 313 | written consent of Creative Commons. Any permitted use will be in 314 | compliance with Creative Commons' then-current trademark usage 315 | guidelines, as may be published on its website or otherwise made 316 | available upon request from time to time. For the avoidance of doubt, 317 | this trademark restriction does not form part of this License. 318 | 319 | Creative Commons may be contacted at http://creativecommons.org/. 320 | --------------------------------------------------------------------------------