├── .gitignore ├── .meteor ├── .finished-upgraders ├── .gitignore ├── .id ├── packages ├── platforms ├── release └── versions ├── LICENSE ├── README.md ├── app ├── appSite │ ├── admin │ │ ├── components │ │ │ └── AdminPage.jsx │ │ └── router.js │ ├── dashboard │ │ ├── components │ │ │ └── DashboardPage.jsx │ │ └── router.js │ ├── layout │ │ ├── components │ │ │ ├── AdminLayout.jsx │ │ │ ├── AppLayout.jsx │ │ │ └── Header.jsx │ │ └── containers │ │ │ └── AppLayout.jsx │ ├── sidebar │ │ ├── components │ │ │ └── AdminSidebar.jsx │ │ └── containers │ │ │ └── AdminSidebar.jsx │ └── styles │ │ ├── components │ │ ├── _card.scss │ │ ├── _content.scss │ │ ├── _header.scss │ │ ├── _layout.scss │ │ ├── _page.scss │ │ ├── _sidebar-nav.scss │ │ └── _sidebar.scss │ │ ├── main.scss │ │ └── pages │ │ └── _page-animation.scss ├── common │ └── accounts │ │ ├── layout │ │ └── components │ │ │ ├── GuestFooter.jsx │ │ │ └── LoginLayout.jsx │ │ ├── router.jsx │ │ ├── sign-in │ │ ├── components │ │ │ ├── SignIn.jsx │ │ │ └── SignInWithService.jsx │ │ └── controller.js │ │ ├── sign-up │ │ ├── components │ │ │ └── SignUp.jsx │ │ └── controller.js │ │ └── styles │ │ └── _accounts.scss └── marketingSite │ ├── elements │ ├── components │ │ ├── Buttons.jsx │ │ ├── Elements.jsx │ │ ├── Grid.jsx │ │ └── Typography.jsx │ └── router.js │ ├── features │ ├── components │ │ ├── Features.jsx │ │ ├── KitLinks.jsx │ │ └── StarterKitFeatures.jsx │ └── router.js │ ├── home │ ├── components │ │ └── Home.jsx │ └── router.js │ ├── layout │ ├── components │ │ ├── FourOhFour.jsx │ │ ├── GitHubRibbon.jsx │ │ ├── LandingLayout.jsx │ │ └── LandingNavigation.jsx │ ├── controllers │ │ └── LandingNavigation.jsx │ └── router.js │ └── styles │ ├── components │ ├── _404.scss │ ├── _buttons.scss │ ├── _cta.scss │ ├── _footer.scss │ ├── _github_ribbon.scss │ ├── _header.scss │ ├── _layout.scss │ └── _nav.scss │ ├── helpers │ ├── _colors.scss │ └── _reset.scss │ ├── main.scss │ └── pages │ ├── _page-elements.scss │ └── _page-features.scss ├── imports └── helpers │ ├── ga.js │ └── routeHelpers.js ├── package.json ├── public └── images │ ├── bg.jpg │ ├── foxes.jpg │ └── sidebar-bg.jpg └── server ├── accounts.js ├── config ├── security.js └── social_accounts.js ├── entry.js ├── loaders └── users.js └── router.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .deploy 3 | .DS_Store 4 | server/accounts_settings.js 5 | node_modules -------------------------------------------------------------------------------- /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | 1.2.0-standard-minifiers-package 10 | 1.2.0-meteor-platform-split 11 | 1.2.0-cordova-changes 12 | 1.2.0-breaking-changes 13 | 1.3.0-split-minifiers-package 14 | 1.4.0-remove-old-dev-bundle-link 15 | 1.4.1-add-shell-server-package 16 | 1.4.3-split-account-service-packages 17 | -------------------------------------------------------------------------------- /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | dev_bundle 2 | local 3 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | zcyn4xxwexlf2hpd7t 8 | -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-base@1.0.4 # Packages every Meteor app needs to have 8 | mobile-experience@1.0.4 # Packages for a great mobile UX 9 | mongo@1.1.16 # The database Meteor supports right now 10 | session@1.1.7 # Client-side reactive dictionary for your app 11 | jquery@1.11.10 # Helpful client-side library 12 | tracker@1.1.2 # Meteor's client-side reactive programming library 13 | 14 | standard-minifier-css@1.3.4 # CSS minifier run for production mode 15 | standard-minifier-js@2.0.0 # JS minifier run for production mode 16 | es5-shim@4.6.15 # ECMAScript 5 compatibility for older browsers. 17 | ecmascript@0.7.2 # Enable ECMAScript2015+ syntax in app code 18 | 19 | #autopublish # Publish all data to the clients (for prototyping) 20 | #insecure # Allow all DB writes from clients (for prototyping) 21 | 22 | browser-policy@1.1.0 23 | 24 | fourseven:scss 25 | kadira:flow-router-ssr 26 | reywood:bootstrap3-sass 27 | kadira:dochead 28 | fortawesome:fontawesome 29 | meteortoys:allthings 30 | alanning:roles 31 | 32 | accounts-google@1.1.2 33 | service-configuration@1.0.11 34 | accounts-password@1.3.5 35 | reactive-dict@1.1.8 36 | reactive-var@1.0.11 37 | accounts-facebook@1.1.1 38 | shell-server 39 | facebook-config-ui 40 | google-config-ui 41 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.4.4.1 2 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | accounts-base@1.2.16 2 | accounts-facebook@1.1.1 3 | accounts-google@1.1.2 4 | accounts-oauth@1.1.15 5 | accounts-password@1.3.5 6 | alanning:roles@1.2.16 7 | allow-deny@1.0.5 8 | autoupdate@1.3.12 9 | babel-compiler@6.18.2 10 | babel-runtime@1.0.1 11 | base64@1.0.10 12 | binary-heap@1.0.10 13 | blaze@2.3.2 14 | blaze-tools@1.0.10 15 | boilerplate-generator@1.0.11 16 | browser-policy@1.1.0 17 | browser-policy-common@1.0.11 18 | browser-policy-content@1.1.0 19 | browser-policy-framing@1.1.0 20 | caching-compiler@1.1.9 21 | caching-html-compiler@1.1.2 22 | callback-hook@1.0.10 23 | check@1.2.5 24 | chuangbo:cookie@1.1.0 25 | ddp@1.2.5 26 | ddp-client@1.3.4 27 | ddp-common@1.2.8 28 | ddp-rate-limiter@1.0.7 29 | ddp-server@1.3.14 30 | deps@1.0.12 31 | diff-sequence@1.0.7 32 | ecmascript@0.7.3 33 | ecmascript-runtime@0.3.15 34 | ejson@1.0.13 35 | email@1.2.1 36 | es5-shim@4.6.15 37 | facebook-config-ui@1.0.0 38 | facebook-oauth@1.3.0 39 | fastclick@1.0.13 40 | fortawesome:fontawesome@4.7.0 41 | fourseven:scss@3.13.0 42 | geojson-utils@1.0.10 43 | google-config-ui@1.0.0 44 | google-oauth@1.2.3 45 | hot-code-push@1.0.4 46 | html-tools@1.0.11 47 | htmljs@1.0.11 48 | http@1.2.12 49 | id-map@1.0.9 50 | jquery@1.11.10 51 | kadira:dochead@1.5.0 52 | kadira:flow-router-ssr@3.13.0 53 | launch-screen@1.1.1 54 | livedata@1.0.18 55 | localstorage@1.0.12 56 | logging@1.1.17 57 | meteor@1.6.1 58 | meteor-base@1.0.4 59 | meteorhacks:fast-render@2.16.0 60 | meteorhacks:inject-data@2.0.0 61 | meteorhacks:meteorx@1.4.1 62 | meteorhacks:picker@1.0.3 63 | meteortoys:allthings@3.0.0 64 | meteortoys:authenticate@3.0.0 65 | meteortoys:autopub@3.0.0 66 | meteortoys:blueprint@3.0.0 67 | meteortoys:email@3.0.0 68 | meteortoys:hotreload@3.0.0 69 | meteortoys:listen@3.0.0 70 | meteortoys:method@3.0.4 71 | meteortoys:pub@3.0.4 72 | meteortoys:result@3.0.0 73 | meteortoys:shell@3.0.0 74 | meteortoys:status@3.0.0 75 | meteortoys:sub@3.0.0 76 | meteortoys:throttle@3.0.0 77 | meteortoys:toykit@3.0.4 78 | minifier-css@1.2.16 79 | minifier-js@2.0.0 80 | minimongo@1.0.21 81 | mobile-experience@1.0.4 82 | mobile-status-bar@1.0.14 83 | modules@0.8.2 84 | modules-runtime@0.7.10 85 | mongo@1.1.16 86 | mongo-id@1.0.6 87 | msavin:jetsetter@2.0.0 88 | msavin:mongol@2.0.1 89 | npm-bcrypt@0.9.2 90 | npm-mongo@2.2.24 91 | oauth@1.1.13 92 | oauth2@1.1.11 93 | observe-sequence@1.0.16 94 | ordered-dict@1.0.9 95 | promise@0.8.8 96 | random@1.0.10 97 | rate-limit@1.0.8 98 | reactive-dict@1.1.8 99 | reactive-var@1.0.11 100 | reload@1.1.11 101 | retry@1.0.9 102 | reywood:bootstrap3-sass@3.3.5_3 103 | routepolicy@1.0.12 104 | service-configuration@1.0.11 105 | session@1.1.7 106 | sha@1.0.9 107 | shell-server@0.2.3 108 | spacebars@1.0.15 109 | spacebars-compiler@1.1.2 110 | srp@1.0.10 111 | standard-minifier-css@1.3.4 112 | standard-minifier-js@2.0.0 113 | templating@1.3.2 114 | templating-compiler@1.3.2 115 | templating-runtime@1.3.2 116 | templating-tools@1.1.2 117 | tracker@1.1.2 118 | ui@1.0.13 119 | underscore@1.0.10 120 | url@1.1.0 121 | webapp@1.3.15 122 | webapp-hashing@1.0.9 123 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Floyd Price 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Meteor Kits - Starter Kit (React Edition) 2 | 3 | This is a Meteor 1.3.x and React 15+ starter kit. Use this as the basis for your next Meteor & React project. I built this for myself and I use a version of it (different style) for foundation to my client work it has served me well and provided me with a head start for each and every project I have used it on. 4 | 5 | [View the Start Kit Demo](https://starterkit-react.meteorkits.com/) 6 | 7 | ## Home Page 8 | [![Welcome Page](https://floydprice.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-09-at-16.41.27-1024x576.png)](https://floydprice.com/blog/introducing-meteor-cast-starter-kit/) 9 | 10 | ## Accounts 11 | [![Welcome Page](https://floydprice.com/wp-content/uploads/2016/03/Screen-Shot-2016-03-09-at-16.57.43-1024x648.png)](https://floydprice.com/blog/introducing-meteor-cast-starter-kit/) 12 | 13 | ## Admin Home 14 | [![Admin Page](http://cl.ly/2Y3n3M1w3y2F/download/Image%202016-04-14%20at%201.45.26%20pm.png)](https://floydprice.com/blog/introducing-meteor-cast-starter-kit/) 15 | 16 | ## Features 17 | 18 | * Clean modern design 19 | * Marketing Site and Application Site 20 | * 100% React view layer (Even accounts) 21 | * Based on Meteor 1.3.x and ReactJS 15+ (Latest and greatest) 22 | * [Stateless function components and containers](https://floydprice.com/blog/creating-react-components-meteor-1-3/) 23 | * [Meteor Toys](https://atmospherejs.com/meteortoys/allthings) (use Ctrl-M to activate) 24 | * MIT License 25 | * Used on a production application 26 | * Actively maintained 27 | 28 | 29 | ## Getting Started 30 | 31 | - Clone the repo to your local machine 32 | - run npm i 33 | - run meteor 34 | - open browser at localhost:3000 35 | - Start coding your application... 36 | - (Optional) To include social (outh) services uncomment the line in server/entry.js 37 | - (Optional) To bootstrap users uncomment the line in server/entry.js 38 | 39 | ## Contributing 40 | 41 | This is a project that I use for my own personal use, however now that it's open source it's likely that you might add features to it that solve your own needs. If you do please contribute back via pull requests. 42 | 43 | I'm particularly interested in: 44 | 45 | - Responsive CSS 46 | - Admin features 47 | - Test coverage 48 | - Mantra 49 | -------------------------------------------------------------------------------- /app/appSite/admin/components/AdminPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default (props) => { 4 | return ( 5 |
6 |

Admin Page

7 |
8 |

This is where you could put an Admin page

9 |
10 |
11 | 12 | ) 13 | } -------------------------------------------------------------------------------- /app/appSite/admin/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {mount} from 'react-mounter' 3 | import AppLayout from '../layout/containers/AppLayout' 4 | import AdminLayout from './../layout/components/AdminLayout' 5 | import AdminSidebar from '../sidebar/containers/AdminSidebar' 6 | import AdminPage from './components/AdminPage' 7 | 8 | FlowRouter.route("/app/admin", { 9 | name: "Admin", 10 | action() { 11 | mount(AppLayout, {layout: } content={} />}) 12 | } 13 | }) -------------------------------------------------------------------------------- /app/appSite/dashboard/components/DashboardPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default (props) => { 4 | return ( 5 |
6 |

Dashboard

7 |
8 |

This is where you could put your Dashboard

9 |

TODO Put some sample content here

10 |
11 |
12 | 13 | ) 14 | } -------------------------------------------------------------------------------- /app/appSite/dashboard/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {mount} from 'react-mounter' 3 | import AppLayout from '../layout/containers/AppLayout' 4 | import AdminLayout from './../layout/components/AdminLayout' 5 | import AdminSidebar from '../sidebar/containers/AdminSidebar' 6 | import DashboardPage from './components/DashboardPage' 7 | 8 | FlowRouter.route("/app", { 9 | name: "Dashboard", 10 | action() { 11 | mount(AppLayout, {layout: } content={} />}) 12 | } 13 | }) -------------------------------------------------------------------------------- /app/appSite/layout/components/AdminLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 3 | 4 | export default (props) => { 5 | return ( 6 |
7 | {props.sidebar} 8 |
9 | 10 | {props.content} 11 | 12 |
13 |
14 | ) 15 | } -------------------------------------------------------------------------------- /app/appSite/layout/components/AppLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import GitHubRibbon from '../../../marketingSite/layout/components/GitHubRibbon' 3 | import {TrackingCode} from '../../../../imports/helpers/ga' 4 | import Header from './Header' 5 | 6 | export default (props) => { 7 | TrackingCode() 8 | return ( 9 |
10 | 11 |
12 |
13 | {props.layout} 14 |
15 |
16 | ) 17 | } -------------------------------------------------------------------------------- /app/appSite/layout/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default (props) => { 4 | return ( 5 |
6 | 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /app/appSite/layout/containers/AppLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {composeWithTracker} from 'react-komposer' 3 | import AppLayout from '../components/AppLayout' 4 | 5 | const composition = (props, onData) => { 6 | if (!Meteor.loggingIn() && !Meteor.user()) { 7 | setTimeout(() => { FlowRouter.go('/')}) 8 | }else{ 9 | onData(null, props) 10 | } 11 | 12 | } 13 | 14 | export default composeWithTracker(composition)(AppLayout) -------------------------------------------------------------------------------- /app/appSite/sidebar/components/AdminSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {isActiveRoute} from '../../../../imports/helpers/routeHelpers' 3 | 4 | export default (props) => { 5 | return ( 6 |
7 |
8 | 9 |

{props.username}

10 |
11 |
12 | 16 |
17 |
18 | ) 19 | } -------------------------------------------------------------------------------- /app/appSite/sidebar/containers/AdminSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {composeWithTracker} from 'react-komposer' 3 | import AdminSidebar from '../components/AdminSidebar' 4 | 5 | const signOut = (e) => { 6 | if (e) { 7 | e.preventDefault() 8 | } 9 | Meteor.logout() 10 | } 11 | 12 | const composition = (props, onData) => { 13 | let username = Meteor.user() ? Meteor.user().profile.name : '' 14 | let activeRoute = FlowRouter.getRouteName() 15 | onData(null, {username, signOut,activeRoute}) 16 | } 17 | 18 | export default composeWithTracker(composition)(AdminSidebar) -------------------------------------------------------------------------------- /app/appSite/styles/components/_card.scss: -------------------------------------------------------------------------------- 1 | .app-page{ 2 | .card{ 3 | background-color: #fff; 4 | padding: 20px; 5 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); 6 | min-height: 400px; 7 | } 8 | } -------------------------------------------------------------------------------- /app/appSite/styles/components/_content.scss: -------------------------------------------------------------------------------- 1 | .app-page { 2 | .layout { 3 | .content { 4 | flex: 1 1 100%; 5 | display: flex; 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /app/appSite/styles/components/_header.scss: -------------------------------------------------------------------------------- 1 | .app-page { 2 | .layout{ 3 | .header{ 4 | background-color: material-color('light-blue', '600'); 5 | padding: 25px; 6 | color: #fff; 7 | box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35); 8 | position:relative; 9 | z-index: 100; 10 | .logo{ 11 | font-size: 16px; 12 | } 13 | a:hover { 14 | color: #000; 15 | text-decoration: none; 16 | } 17 | } 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /app/appSite/styles/components/_layout.scss: -------------------------------------------------------------------------------- 1 | .app-page { 2 | background-color: material-color('grey', '200'); 3 | -webkit-font-smoothing: antialiased; 4 | .layout { 5 | display: flex; 6 | flex-direction: column; 7 | height: 100vh; 8 | .body{ 9 | position:relative; 10 | flex: 1; 11 | overflow-y: auto; 12 | overflow-x: hidden; 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /app/appSite/styles/components/_page.scss: -------------------------------------------------------------------------------- 1 | .app-page { 2 | .page { 3 | padding: 30px 30px; 4 | background-color: material-color('grey', '200'); 5 | .pageTitle { 6 | margin: 0px 0px 30px 20px; 7 | font-size: 15px; 8 | font-weight: 400; 9 | text-transform: uppercase; 10 | color: material-color('grey', '600'); 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /app/appSite/styles/components/_sidebar-nav.scss: -------------------------------------------------------------------------------- 1 | .app-page{ 2 | .layout { 3 | .content { 4 | .sidebar { 5 | .navigation{ 6 | padding-top: 20px; 7 | ul{ 8 | list-style: none; 9 | margin: 0px; 10 | padding: 0px; 11 | li{ 12 | &.active{ 13 | background-color: #eee; 14 | border-right: 2px solid material-color('light-blue', '700');; 15 | } 16 | &:hover{ 17 | background-color: #eee; 18 | } 19 | a{ 20 | display:block; 21 | padding: 10px 15px; 22 | font-weight: 500; 23 | font-size: 16px; 24 | &:hover{ 25 | text-decoration: none; 26 | } 27 | .fa{ 28 | padding-right: 10px; 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /app/appSite/styles/components/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .app-page { 2 | .layout { 3 | .content { 4 | .sidebar { 5 | flex: 0 1 275px; 6 | background-color: #fff; 7 | box-shadow: 0 0 10px rgba(51, 51, 51, 0.38); 8 | display: flex; 9 | flex-direction: column; 10 | z-index: 15; 11 | .profile-pane { 12 | min-height: 150px; 13 | background: rgb(174, 206, 175) url(/images/foxes.jpg) bottom; 14 | background-size: cover; 15 | position: relative; 16 | &:before{ 17 | content: ''; 18 | height: 100%; 19 | width: 100%; 20 | position: absolute; 21 | left: 0; 22 | top: 0; 23 | background-color: rgba(44,51,64,.2); 24 | } 25 | a{ 26 | color: #fff; 27 | position:absolute; 28 | bottom: 0px; 29 | right: 10px; 30 | font-size:16px; 31 | z-index: 2; 32 | line-height: 32px; 33 | } 34 | h2 { 35 | color: #fff; 36 | position:absolute; 37 | text-align: left; 38 | background-color: rgba(0,0,0,0.3); 39 | margin: 0px; 40 | width: 100%; 41 | bottom: 0px; 42 | padding: 10px 20px; 43 | font-size: 14px; 44 | font-weight: 400; 45 | } 46 | } 47 | 48 | } 49 | 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /app/appSite/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import '{}/node_modules/sass-material-colors/sass/sass-material-colors'; 2 | //@import '{}/node_modules/sass-material-colors/sass/sass-material-colors-classes'; 3 | 4 | @import './components/layout'; 5 | @import './components/header'; 6 | @import './components/content'; 7 | @import './components/sidebar'; 8 | @import './components/page'; 9 | @import './components/card'; 10 | @import './components/sidebar-nav'; 11 | 12 | @import './pages/page-animation'; 13 | 14 | -------------------------------------------------------------------------------- /app/appSite/styles/pages/_page-animation.scss: -------------------------------------------------------------------------------- 1 | .app-page{ 2 | 3 | .page-enter{ 4 | //opacity: 0; 5 | transition: all 300ms ease-in; 6 | transform: translateX(200%); 7 | opacity:1; 8 | position: absolute; 9 | top: 0px; 10 | left: 0px; 11 | right: 0px; 12 | z-index: 9; 13 | } 14 | 15 | .page-enter-active{ 16 | opacity: 1; 17 | transform: translateX(0%); 18 | } 19 | 20 | .page-leave{ 21 | position:absolute; 22 | top: 0px; 23 | left: 0px; 24 | right: 0px; 25 | transition: all 300ms ease-out 200ms, transform 500ms ease-in; 26 | opacity: 1; 27 | transform: scale(1) translateY(0%) translateX(0%); 28 | } 29 | 30 | .page-leave-active{ 31 | opacity:0; 32 | transform: translateY(0) scale(0.9) translateX(0) ; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /app/common/accounts/layout/components/GuestFooter.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class GuestFooter extends React.Component { 4 | render() { 5 | return ( 6 |
7 | Made with by Meteorkits 8 |
9 | ) 10 | } 11 | } 12 | 13 | export default GuestFooter -------------------------------------------------------------------------------- /app/common/accounts/layout/components/LoginLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {LandingNavigation, LandingPageBrand} from './../../../../marketingSite/layout/components/LandingNavigation' 3 | import GitHubRibbon from './../../../../marketingSite/layout/components/GitHubRibbon' 4 | import {TrackingCode} from '../../../../../imports/helpers/ga' 5 | 6 | class LoginLayout extends React.Component { 7 | render() { 8 | TrackingCode() 9 | return ( 10 |
11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 |

{this.props.title}

20 |

{this.props.subTitle}

21 |
22 | { this.props.content } 23 | { this.props.footer } 24 |
25 |
26 |
27 | ) 28 | } 29 | } 30 | 31 | export default LoginLayout -------------------------------------------------------------------------------- /app/common/accounts/router.jsx: -------------------------------------------------------------------------------- 1 | import {FlowRouter} from 'meteor/kadira:flow-router-ssr' 2 | import React from 'react' 3 | import {mount} from 'react-mounter' 4 | import LoginLayout from './layout/components/LoginLayout' 5 | import SignIn from './sign-in/controller' 6 | import SignUp from './sign-up/controller' 7 | 8 | import GuestFooter from './layout/components/GuestFooter' 9 | 10 | 11 | FlowRouter.route("/sign-in", { 12 | name: "SignIn", 13 | action(){ 14 | mount(LoginLayout, {content: , title: "Hello You!", subTitle: "Just sign in", footer: }) 15 | } 16 | }) 17 | 18 | FlowRouter.route("/sign-up", { 19 | name: "SignUp", 20 | action() { 21 | mount(LoginLayout, {content: , title: "To infinity & BEYOND!", subTitle: "Almost there, just sign up", footer: }) 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /app/common/accounts/sign-in/components/SignIn.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 3 | import SignInWithService from './SignInWithService' 4 | import NoSSR from 'react-no-ssr' 5 | class SignIn extends React.Component { 6 | renderError() { 7 | if (this.props.state.hasError) { 8 | return ( 9 | 10 |
{this.props.state.errorMessage}
11 |
12 | ) 13 | } 14 | } 15 | 16 | render() { 17 | return ( 18 |
19 | {this.renderError()} 20 | 21 |
22 | 23 | 24 | Sign In 25 | 26 | 27 | 28 | {this.props.state.loginServices.length > 0 ? (
OR
) : null} 29 | {this.props.state.loginServices.map((service) => { 30 | return ( 31 | 32 | ) 33 | })} 34 |
35 |
36 |
37 |
38 | ) 39 | } 40 | 41 | signInWithPassword(event) { 42 | if (event && event.preventDefault) { 43 | event.preventDefault() 44 | } 45 | 46 | let values = { 47 | username: this.refs.username.value, 48 | password: this.refs.password.value 49 | } 50 | 51 | this.props.controller.signInWithPassword(values); 52 | } 53 | } 54 | 55 | export default SignIn 56 | 57 | 58 | -------------------------------------------------------------------------------- /app/common/accounts/sign-in/components/SignInWithService.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class SignInWithService extends React.Component { 4 | signIn() { 5 | this.props.controller.signInWith(this.props.service) 6 | } 7 | render() { 8 | let classNames = `fa ${this.props.icon}` 9 | return ( 10 | {this.props.label} 11 | ) 12 | } 13 | } 14 | 15 | export default SignInWithService -------------------------------------------------------------------------------- /app/common/accounts/sign-in/controller.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {composeWithTracker} from 'react-komposer' 3 | import SignIn from './components/SignIn' 4 | import _ from 'lodash' 5 | 6 | export class SignInController { 7 | constructor() { 8 | this._state = new ReactiveDict() 9 | this._state.set({loginServices: []}) 10 | let loginServices = Accounts.loginServiceConfiguration.find().fetch() 11 | this._state.set("loginServices", loginServices) 12 | } 13 | 14 | get state() { 15 | 16 | return { 17 | errorMessage: this._state.get("errorMessage"), 18 | hasError: this._state.get("errorMessage") != null, 19 | loginServices: this._state.get("loginServices") 20 | } 21 | } 22 | 23 | signInWith(service) { 24 | Meteor[`loginWith${_.capitalize(service)}`]((err) => { 25 | if (err) { 26 | this._state.set("errorMessage", "Login Failed") 27 | } else { 28 | FlowRouter.go("Dashboard") 29 | } 30 | }) 31 | } 32 | 33 | signInWithPassword(values) { 34 | if (this._valid(values)) { 35 | this._state.set("errorMessage", null) 36 | Meteor.loginWithPassword({username: values.username}, values.password, (err, resp) => { 37 | if (err) { 38 | this._state.set("errorMessage", "Login Failed") 39 | } else { 40 | FlowRouter.go("Dashboard") 41 | } 42 | }) 43 | } else { 44 | this._state.set("errorMessage", "Please enter a username and password") 45 | } 46 | } 47 | 48 | _valid(values) { 49 | return (values.username && values.password) 50 | } 51 | 52 | cleanUp() { 53 | this._state.clear() 54 | } 55 | 56 | } 57 | 58 | let controller = null 59 | 60 | function composer(props, onData) { 61 | if (!controller) controller = new SignInController() 62 | 63 | const state = controller.state 64 | 65 | onData(null, {controller, state}) 66 | 67 | return () => { 68 | controller.cleanUp() 69 | controller = null 70 | } 71 | } 72 | 73 | export default composeWithTracker(composer)(SignIn) -------------------------------------------------------------------------------- /app/common/accounts/sign-up/components/SignUp.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 3 | 4 | class SignUp extends React.Component{ 5 | renderError() { 6 | if (this.props.state.hasError) { 7 | return ( 8 | 9 |
{this.props.state.errorMessage}
10 |
11 | ) 12 | } 13 | } 14 | render() { 15 | return ( 16 |
17 | {this.renderError()} 18 | 19 |
20 | 21 | 22 | 23 | Sign Up 24 | 25 | 26 |
27 |
28 | ) 29 | } 30 | signUpWithPassword(event) { 31 | if (event && event.preventDefault) { 32 | event.preventDefault() 33 | } 34 | 35 | let values = { 36 | username: this.refs.username.value, 37 | password: this.refs.password.value, 38 | password_confirmation: this.refs.password_confirmation.value 39 | } 40 | 41 | this.props.controller.signUpWithPassword(values); 42 | } 43 | } 44 | 45 | export default SignUp -------------------------------------------------------------------------------- /app/common/accounts/sign-up/controller.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {composeWithTracker} from 'react-komposer' 3 | import SignUp from './components/SignUp' 4 | 5 | class SignUpController{ 6 | constructor() { 7 | this._state = new ReactiveDict 8 | } 9 | get state() { 10 | return { 11 | errorMessage: this._state.get("errorMessage"), 12 | hasError: this._state.get("errorMessage") != null 13 | 14 | } 15 | } 16 | 17 | signUpWithPassword(values){ 18 | if (this._validate(values)){ 19 | this._state.clear() 20 | Accounts.createUser(values, (err) => { 21 | if (err){ 22 | this._state.set("errorMessage", err.message); 23 | } else { 24 | FlowRouter.go('home') 25 | } 26 | }) 27 | } 28 | } 29 | 30 | _validate(values){ 31 | if (!values.username || !values.password || !values.password_confirmation){ 32 | this._state.set("errorMessage", "Please enter your desired username/email and password (twice).") 33 | return false 34 | } 35 | if (values.password !== values.password_confirmation){ 36 | this._state.set("errorMessage", "Password and confirmation don't match, try again.") 37 | return false; 38 | } 39 | 40 | return true 41 | } 42 | 43 | cleanUp() { 44 | this._state.clear() 45 | } 46 | } 47 | 48 | 49 | let controller = null 50 | 51 | function composer (props, onData) { 52 | if (!controller) controller = new SignUpController() 53 | const state = controller.state 54 | onData(null, {controller, state}) 55 | 56 | return () => { 57 | controller.cleanUp() 58 | } 59 | } 60 | 61 | export default composeWithTracker(composer)(SignUp) -------------------------------------------------------------------------------- /app/common/accounts/styles/_accounts.scss: -------------------------------------------------------------------------------- 1 | .accounts-page { 2 | display: flex; 3 | flex-direction: column; 4 | header { 5 | flex: 0 0 100px; 6 | } 7 | .accounts-content { 8 | //background-color: #f6f6f6; 9 | flex: 1 1; 10 | h1 { 11 | 12 | font-size: 50px; 13 | font-weight: 300; 14 | font-family: 'Amatic SC', cursive; 15 | color: #fff; 16 | text-align: center; 17 | position: relative; 18 | margin: 30px 0px 0px; 19 | } 20 | h2 { 21 | font-size: 18px; 22 | font-weight: 100; 23 | color: #fff; 24 | text-align: center; 25 | position: relative; 26 | margin: 5px; 27 | margin-bottom: 50px; 28 | } 29 | & > div { 30 | 31 | position: relative; 32 | //top: -200px; 33 | } 34 | } 35 | .sign-in-form { 36 | max-width: 500px; 37 | margin: auto; 38 | padding: 50px; 39 | //min-height: 400px; 40 | background-color: #fff; 41 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); 42 | input { 43 | width: 100%; 44 | padding: 10px 0px; 45 | font-size: 18px; 46 | margin-bottom: 30px; 47 | border: 0; 48 | border-bottom: 2px solid #ccc; 49 | transition: border 300ms ease-in; 50 | border-radius: 0; 51 | outline: none; 52 | &:active, &:focus { 53 | outline: none; 54 | border-bottom: 2px solid $accent-color; 55 | } 56 | &.btn { 57 | transition: all 300ms ease-in; 58 | background-color: $accent-color; 59 | border-radius: 3px; 60 | border: 0; 61 | color: #fff; 62 | text-transform: uppercase; 63 | font-weight: bold; 64 | &:hover { 65 | background-color: darken($accent-color, 10%); 66 | } 67 | } 68 | } 69 | a.btn { 70 | transition: all 300ms ease-in; 71 | padding: 10px 0px; 72 | background-color: $accent-color2; 73 | border-radius: 3px; 74 | font-size: 18px; 75 | border: 0; 76 | color: #fff; 77 | text-transform: uppercase; 78 | font-weight: bold; 79 | width: 100%; 80 | margin-top: 30px; 81 | position: relative; 82 | .fa { 83 | position: absolute; 84 | left: 0px; 85 | top: 0px; 86 | bottom: 0px; 87 | width: 40px; 88 | line-height: 100%; 89 | border-right: 1px solid rgba(255, 255, 255, 1); 90 | background-color: darken($accent-color2, 10%); 91 | border-top-left-radius: 3px; 92 | border-bottom-left-radius: 3px; 93 | &:before { 94 | top: 14px; 95 | left: 1px; 96 | position: relative; 97 | } 98 | } 99 | &:hover { 100 | background-color: darken($accent-color2, 10%); 101 | } 102 | } 103 | a.btn-primary{ 104 | margin-bottom: 0; 105 | margin-top:5px; 106 | background-color: $accent-color; 107 | &:hover { 108 | background-color: darken($accent-color, 10%); 109 | } 110 | .fa{ 111 | background-color: darken($accent-color, 10%); 112 | } 113 | } 114 | .or { 115 | margin: 0px -50px; 116 | margin-bottom: 0px; 117 | margin-top: 30px; 118 | padding: 0 5px; 119 | position: relative; 120 | top: -9px; 121 | text-align: center; 122 | border-bottom: 1px solid #ccc; 123 | span { 124 | font-weight: bold; 125 | color: #ccc; 126 | background-color: #fff; 127 | padding: 0px 30px; 128 | position: relative; 129 | top: 9px; 130 | } 131 | } 132 | .alert { 133 | margin: -50px; 134 | margin-bottom: 30px; 135 | border-radius: 0px; 136 | position: relative; 137 | border: 0px; 138 | text-align: center; 139 | color: darken($accent-color, 25%); 140 | background-color: lighten($accent-color, 25%); 141 | 142 | &.alert-appear { 143 | opacity: 0; 144 | transition: all 100ms ease-out; 145 | transform: scale(0.1); 146 | } 147 | &.alert-appear-active { 148 | opacity: 1; 149 | transform: scale(1); 150 | 151 | } 152 | } 153 | } 154 | } -------------------------------------------------------------------------------- /app/marketingSite/elements/components/Buttons.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Buttons = (props) => { 4 | return ( 5 |
6 |

Buttons

7 |

Awesome buttons from http://unicorn-ui.com/buttons/

8 | 9 |
10 | 11 |
12 |

Flat Buttons

13 |

All shapes & sizes

14 |
15 | 16 | Go 17 | Go 18 | Go 19 | 20 | 21 | 22 |
23 | Go 24 | Go 25 | Go 26 | 27 | 28 | 29 |
30 | Go 31 | Go 32 | Go 33 | 34 | 35 | 36 |
37 | Go 38 | Go 39 | Go 40 | 41 | 42 | 43 |
44 | Go 45 | Go 46 | Go 47 | 48 | 49 | 50 |
51 | Go 52 | Go 53 | Go 54 | 55 | 56 | 57 | 58 |
59 |

3D Buttons

60 |

Realistic!

61 |
62 | 63 | 64 | Check out the new site! 65 | Visit Us! 66 | 67 | Go 68 | Say Hi! 69 |
70 | 71 |

Wrapped Buttons

72 |

Fancy!

73 |
74 | 75 | 76 | 79 | 80 | 81 | 82 | 85 | 86 | 87 | 88 | Go 89 | 90 | 91 | Go 92 | 93 |
94 |
95 |
96 |
97 | ) 98 | } 99 | 100 | export default Buttons -------------------------------------------------------------------------------- /app/marketingSite/elements/components/Elements.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Buttons from './Buttons' 3 | import Typography from './Typography' 4 | import Grid from './Grid' 5 | 6 | class Elements extends React.Component { 7 | render() { 8 | return ( 9 |
10 | 11 | 12 | 13 |

TODO : Add bootstrap components here...

14 |
15 | ) 16 | } 17 | } 18 | 19 | export default Elements 20 | -------------------------------------------------------------------------------- /app/marketingSite/elements/components/Grid.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default () => { 4 | return ( 5 |
6 |

Grid Layout

7 |

Flexible and Responsive!

8 | 9 |
10 |
11 |
12 |
13 |
14 | .col-md-12 15 |
16 |
17 |
18 |
19 |
20 |
21 | .col-md-11 22 |
23 |
24 |
25 |
26 | .col-md-1 27 |
28 |
29 |
30 |
31 |
32 |
33 | .col-md-10 34 |
35 |
36 |
37 |
38 | .col-md-2 39 |
40 |
41 |
42 |
43 |
44 |
45 | .col-md-9 46 |
47 |
48 |
49 |
50 | .col-md-3 51 |
52 |
53 |
54 |
55 |
56 |
57 | .col-md-8 58 |
59 |
60 |
61 |
62 | .col-md-4 63 |
64 |
65 |
66 |
67 |
68 |
69 | .col-md-7 70 |
71 |
72 |
73 |
74 | .col-md-5 75 |
76 |
77 |
78 |
79 |
80 |
81 | .col-md-6 82 |
83 |
84 |
85 |
86 | .col-md-6 87 |
88 |
89 |
90 |
91 |
92 |
93 | .col-md-5 94 |
95 |
96 |
97 |
98 | .col-md-7 99 |
100 |
101 |
102 |
103 |
104 |
105 | .col-md-4 106 |
107 |
108 |
109 |
110 | .col-md-8 111 |
112 |
113 |
114 |
115 |
116 |
117 | .col-md-3 118 |
119 |
120 |
121 |
122 | .col-md-9 123 |
124 |
125 |
126 |
127 |
128 |
129 | .col-md-2 130 |
131 |
132 |
133 |
134 | .col-md-10 135 |
136 |
137 |
138 |
139 |
140 |
141 | .col-md-1 142 |
143 |
144 |
145 |
146 | .col-md-11 147 |
148 |
149 |
150 |
151 |
152 |
153 | .col-md-2 154 |
155 |
156 |
157 |
158 | .col-md-3 159 |
160 |
161 |
162 |
163 | .col-md-4 164 |
165 |
166 |
167 |
168 | .col-md-2 169 |
170 |
171 |
172 |
173 | .col-md-1 174 |
175 |
176 |
177 |
178 |
179 |
180 | ) 181 | } -------------------------------------------------------------------------------- /app/marketingSite/elements/components/Typography.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Typography = (props) => { 4 | return ( 5 |
6 |

Typography

7 |

Read with pleasure

8 | 9 |
10 |
11 |

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

12 |

h1. Bootstrap heading

13 |

h2. Bootstrap heading

14 |

h3. Bootstrap heading

15 |

h4. Bootstrap heading

16 |
h5. Bootstrap heading
17 |
h6. Bootstrap heading
18 |
19 | Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. 20 | 21 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 38 | 44 | 45 | 46 | 47 | 51 | 56 | 57 | 58 | 59 | 63 | 68 | 69 | 70 | 71 | 75 | 80 | 81 | 82 | 83 | 87 | 92 | 93 | 94 | 95 | 99 | 104 | 105 | 106 | 107 | 111 | 114 | 115 | 116 | 117 | 121 | 124 | 125 | 126 |
#Text TypeExample
1 35 |
MARKED TEXT
36 |

Use the <mark> tag.

37 |
39 |

You can use the mark tag to 40 | highlight 41 | text. 42 |

43 |
2 48 |
DELETED TEXT
49 |

Use the <del> tag.

50 |
52 |

53 | This line of text is meant to be treated as deleted text. 54 |

55 |
3 60 |
STRIKETHROUGH TEXT
61 |

Use the <s> tag.

62 |
64 |

65 | This line of text is meant to be treated as no longer accurate. 66 |

67 |
4 72 |
INSERTED TEXT
73 |

Use the <ins> tag.

74 |
76 |

77 | This line of text is meant to be treated as an addition to the document. 78 |

79 |
5 84 |
UNDERLINED TEXT
85 |

Use the <u> tag.

86 |
88 |

89 | This line of text will render as underlined 90 |

91 |
6 96 |
SMALL TEXT
97 |

Use the <small> tag.

98 |
100 |

101 | This line of text is meant to be treated as fine print. 102 |

103 |
7 108 |
BOLD
109 |

Use the <strong> tag.

110 |
112 |

The following snippet of text is rendered as bold text.

113 |
8 118 |
ITALICS
119 |

Use the <em> tag.

120 |
122 |

The following snippet of text is rendered as italicized text.

123 |
127 |
128 |
129 |
130 |
131 |

Alignment Classes

132 |
133 |
134 |

Add class .text-left, .text-center, .text-right, .text-justify, .text-nowrap to make it.

135 |

Left aligned text.

136 |

Center aligned text.

137 |

Right aligned text.

138 |

Justified text.

139 |

No wrap text.

140 |
141 |
142 |
143 |
144 |
145 |
146 |

Transformation Classes

147 |
148 |
149 |

Add class .text-lowercase, .text-uppercase, .text-capitalize to make it.

150 |

Lowercased text.

151 |

Uppercased text.

152 |

Capitalized text.

153 |
154 |
155 |
156 |
157 |
158 |
159 |

ABBREVIATIONS

160 |
161 |
162 |

Use the <abbr> tag.

163 |
BASIC ABBREVIATION
164 |

An abbreviation of the word attribute is attr.

165 |
INITIALISM
166 |

Add .initialism to an abbreviation for a slightly smaller font-size.

167 |

HTML is the best thing since sliced bread.

168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 | ) 176 | } 177 | 178 | export default Typography -------------------------------------------------------------------------------- /app/marketingSite/elements/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {mount} from 'react-mounter' 3 | import Elements from './components/Elements' 4 | import LandingLayout from '../layout/components/LandingLayout' 5 | 6 | FlowRouter.route("/elements", { 7 | name: "Elements", 8 | action() { 9 | mount(LandingLayout, {content: }) 10 | } 11 | }) -------------------------------------------------------------------------------- /app/marketingSite/features/components/Features.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import KitFeatures from './StarterKitFeatures' 3 | import KitLinks from './KitLinks' 4 | 5 | class Features extends React.Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 |

This starter kit is ready to use in your next Meteor project, please make sure you contribute back to this project by submitting pull requests on the Github project.

12 | Bootstrap Components 13 |
14 |
15 | ) 16 | } 17 | } 18 | 19 | export default Features 20 | -------------------------------------------------------------------------------- /app/marketingSite/features/components/KitLinks.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default (props) => { 4 | return ( 5 |
6 |
7 | 8 | 9 |
10 |
11 | ) 12 | } -------------------------------------------------------------------------------- /app/marketingSite/features/components/StarterKitFeatures.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default (props) => { 4 | return ( 5 |
6 |

Starter Kit (ReactJS Edition)

7 |

Jump start your next Meteor/React project

8 |
9 |
10 |
    11 |
  • Meteor 1.3
  • 12 |
  • ReactJS 15
  • 13 |
  • Sass
  • 14 |
  • React-Komposer
  • 15 |
  • FlowRouterSSR
  • 16 |
17 |
18 |
19 |
    20 |
  • Clean project Structure
  • 21 |
  • Containers/Controllers
  • 22 |
  • React accounts UI
  • 23 |
  • Marketing Site & App Site
  • 24 |
  • Server Side Rendering
  • 25 |
26 |
27 |
28 |
    29 |
  • Beautiful modern design
  • 30 |
  • Free & Open Source
  • 31 |
  • Used in a production app
  • 32 |
  • Actively Maintained
  • 33 |
  • ES2015 Syntax
  • 34 |
35 |
36 |
37 |
38 | ) 39 | } -------------------------------------------------------------------------------- /app/marketingSite/features/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {mount} from 'react-mounter' 3 | import Features from './components/Features' 4 | import LandingLayout from '../layout/components/LandingLayout' 5 | 6 | FlowRouter.route("/features", { 7 | name: "Features", 8 | action() { 9 | mount(LandingLayout, {content: }) 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /app/marketingSite/home/components/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {DocHead} from 'meteor/kadira:dochead' 3 | 4 | class Home extends React.Component{ 5 | render() { 6 | var metaInfo = {name: "description", content: "Meteor application with SSR and React components"}; 7 | DocHead.addMeta(metaInfo); 8 | DocHead.setTitle("Shoot for the stars") 9 | return ( 10 |
11 |

Shoot for the stars

12 |

Meteor is the future and It's happening right now!

13 | Get Started 14 |
15 | ) 16 | } 17 | } 18 | 19 | export default Home -------------------------------------------------------------------------------- /app/marketingSite/home/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {mount} from 'react-mounter' 3 | import Home from './components/Home' 4 | import LandingLayout from '../layout/components/LandingLayout' 5 | 6 | FlowRouter.route("/", { 7 | name: "home", 8 | action() { 9 | mount(LandingLayout, {content: }) 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /app/marketingSite/layout/components/FourOhFour.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {DocHead} from 'meteor/kadira:dochead' 3 | 4 | class FourOhFour extends React.Component{ 5 | render() { 6 | DocHead.setTitle("404 Page Not Found") 7 | 8 | return ( 9 |
10 |

404

11 |

The page your trying to visit is on vacation, please try again later.

12 |
13 | ) 14 | } 15 | } 16 | 17 | export default FourOhFour -------------------------------------------------------------------------------- /app/marketingSite/layout/components/GitHubRibbon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default (props) => { 4 | return ( 5 | 8 | ) 9 | } -------------------------------------------------------------------------------- /app/marketingSite/layout/components/LandingLayout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {LandingPageBrand} from "./LandingNavigation" 3 | import LandingNavigation from "../controllers/LandingNavigation" 4 | import GitHubRibbon from './GitHubRibbon' 5 | import {TrackingCode} from '../../../../imports/helpers/ga' 6 | 7 | class LandingLayout extends React.Component { 8 | render() { 9 | TrackingCode() 10 | return ( 11 |
12 | 13 |
14 |
15 | 16 | 17 |
18 | { this.props.content } 19 |
20 | ) 21 | } 22 | } 23 | 24 | export default LandingLayout -------------------------------------------------------------------------------- /app/marketingSite/layout/components/LandingNavigation.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class LandingNavigation extends React.Component { 4 | activeClass(routeName) { 5 | 6 | return FlowRouter.getRouteName() === routeName ? "active" : "" 7 | } 8 | 9 | guestNavigation() { 10 | return ( 11 | 28 | ) 29 | } 30 | 31 | navigation(username) { 32 | return ( 33 | 48 | ) 49 | } 50 | 51 | render() { 52 | if (this.props.user) { 53 | return this.navigation(this.props.user.profile.name) 54 | } else { 55 | return this.guestNavigation() 56 | } 57 | } 58 | 59 | signOut(event) { 60 | if (event && event.preventDefault) { 61 | event.preventDefault() 62 | } 63 | 64 | this.props.logout() 65 | return false; 66 | } 67 | 68 | 69 | } 70 | 71 | class LandingPageBrand extends React.Component { 72 | render() { 73 | return ( 74 |

ACME INC

75 | ) 76 | } 77 | } 78 | 79 | 80 | export {LandingNavigation, LandingPageBrand} -------------------------------------------------------------------------------- /app/marketingSite/layout/controllers/LandingNavigation.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {composeWithTracker} from 'react-komposer' 3 | import {LandingNavigation} from '../components/LandingNavigation' 4 | 5 | const logout = () => { 6 | Meteor.logout((err) => { 7 | FlowRouter.go("home") 8 | }) 9 | } 10 | 11 | function composer(props, onData) { 12 | let user = Meteor.user() 13 | let activeRoute = FlowRouter.getRouteName() 14 | onData(null, {user, logout, activeRoute}) 15 | } 16 | 17 | export default composeWithTracker(composer)(LandingNavigation) -------------------------------------------------------------------------------- /app/marketingSite/layout/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {mount} from 'react-mounter' 3 | import LandingLayout from './components/LandingLayout.jsx' 4 | import FourOhFour from './components/FourOhFour' 5 | 6 | FlowRouter.notFound = { 7 | action(){ 8 | mount(LandingLayout, {content: }) 9 | } 10 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/components/_404.scss: -------------------------------------------------------------------------------- 1 | @import "../helpers/colors"; 2 | 3 | .not-found{ 4 | position: relative; 5 | color: #fff; 6 | flex: 1 1; 7 | width: 1000px; 8 | text-align: center; 9 | margin: auto; 10 | display:flex; 11 | flex-direction: column; 12 | padding-top: 10vh; 13 | align-items: center; 14 | h1{ 15 | font-size: 30em; 16 | font-weight: 700; 17 | text-transform: uppercase; 18 | color: $accent-color; 19 | .muted{ 20 | color: #9a9da2; 21 | } 22 | } 23 | h2{ 24 | font-weight: 100; 25 | } 26 | 27 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | /*! @license 2 | * 3 | * Buttons 4 | * Copyright 2012-2014 Alex Wolfe and Rob Levin 5 | * 6 | * Licensed under the Apache License, Version 2.0 (the "License"); 7 | * you may not use this file except in compliance with the License. 8 | * You may obtain a copy of the License at 9 | * http://www.apache.org/licenses/LICENSE-2.0 10 | * 11 | * Unless required by applicable law or agreed to in writing, software 12 | * distributed under the License is distributed on an "AS IS" BASIS, 13 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 14 | * See the License for the specific language governing permissions and 15 | * limitations under the License. 16 | */ 17 | /* 18 | * Compass (optional) 19 | * 20 | * We recommend the use of autoprefixer instead of Compass 21 | * when using buttons. However, buttons does support Compass. 22 | * simply change $ubtn-use-compass to true and uncomment the 23 | * @import 'compass' code below to use Compass. 24 | */ 25 | /* 26 | * Required Files 27 | * 28 | * These files include the variables and options 29 | * and base css styles that are required to generate buttons. 30 | */ 31 | /* 32 | * $ubtn prefix (reserved) 33 | * 34 | * This prefix stands for Unicorn Button - ubtn 35 | * We provide a prefix to the Sass Variables to 36 | * prevent namespace collisions that could occur if 37 | * you import buttons as part of your Sass build process. 38 | * We kindly ask you not to use the prefix $ubtn in your project 39 | * in order to avoid possilbe name conflicts. Thanks! 40 | */ 41 | /* 42 | * Button Namespace (ex .button or .btn) 43 | * 44 | */ 45 | /* 46 | * Button Defaults 47 | * 48 | * Some default settings that are used throughout the button library. 49 | * Changes to these settings will be picked up by all of the other modules. 50 | * The colors used here are the default colors for the base button (gray). 51 | * The font size and height are used to set the base size for the buttons. 52 | * The size values will be used to calculate the larger and smaller button sizes. 53 | */ 54 | /* 55 | * Button Colors 56 | * 57 | * $ubtn-colors is used to generate the different button colors. 58 | * Edit or add colors to the list below and recompile. 59 | * Each block contains the (name, background, color) 60 | * The class is generated using the name: (ex .button-primary) 61 | */ 62 | /* 63 | * Button Shapes 64 | * 65 | * $ubtn-shapes is used to generate the different button shapes. 66 | * Edit or add shapes to the list below and recompile. 67 | * Each block contains the (name, border-radius). 68 | * The class is generated using the name: (ex .button-square). 69 | */ 70 | /* 71 | * Button Sizes 72 | * 73 | * $ubtn-sizes is used to generate the different button sizes. 74 | * Edit or add colors to the list below and recompile. 75 | * Each block contains the (name, size multiplier). 76 | * The class is generated using the name: (ex .button-giant). 77 | */ 78 | /* 79 | * Color Mixin 80 | * 81 | * Iterates through the list of colors and creates 82 | * 83 | */ 84 | /* 85 | * No Animation 86 | * 87 | * Sets animation property to none 88 | */ 89 | /* 90 | * Clearfix 91 | * 92 | * Clears floats inside the container 93 | */ 94 | /* 95 | * Base Button Style 96 | * 97 | * The default values for the .button class 98 | */ 99 | .button { 100 | color: #666666; 101 | background-color: #eeeeee; 102 | border-color: #eeeeee; 103 | font-weight: 300; 104 | font-size: 16px; 105 | font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 106 | text-decoration: none; 107 | text-align: center; 108 | line-height: 40px; 109 | height: 40px; 110 | padding: 0 40px; 111 | margin: 0; 112 | display: inline-block; 113 | appearance: none; 114 | cursor: pointer; 115 | border: none; 116 | -webkit-box-sizing: border-box; 117 | -moz-box-sizing: border-box; 118 | box-sizing: border-box; 119 | -webkit-transition-property: all; 120 | transition-property: all; 121 | -webkit-transition-duration: .3s; 122 | transition-duration: .3s; 123 | /* 124 | * Disabled State 125 | * 126 | * The disabled state uses the class .disabled, is-disabled, 127 | * and the form attribute disabled="disabled". 128 | * The use of !important is only added because this is a state 129 | * that must be applied to all buttons when in a disabled state. 130 | */ 131 | } 132 | 133 | .button:visited { 134 | color: #666666; 135 | } 136 | 137 | .button:hover, .button:focus { 138 | background-color: #f6f6f6; 139 | text-decoration: none; 140 | outline: none; 141 | } 142 | 143 | .button:active, .button.active, .button.is-active { 144 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); 145 | text-decoration: none; 146 | background-color: #eeeeee; 147 | border-color: #cfcfcf; 148 | color: #d4d4d4; 149 | -webkit-transition-duration: 0s; 150 | transition-duration: 0s; 151 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); 152 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); 153 | } 154 | 155 | .button.disabled, .button.is-disabled, .button:disabled { 156 | top: 0 !important; 157 | background: #EEE !important; 158 | border: 1px solid #DDD !important; 159 | text-shadow: 0 1px 1px white !important; 160 | color: #CCC !important; 161 | cursor: default !important; 162 | appearance: none !important; 163 | } 164 | 165 | .button.disabled else, .button.is-disabled else, .button:disabled else { 166 | -webkit-box-shadow: none !important; 167 | box-shadow: none !important; 168 | opacity: .8 !important; 169 | } 170 | 171 | /* 172 | * Base Button Tyography 173 | * 174 | */ 175 | .button-uppercase { 176 | text-transform: uppercase; 177 | } 178 | 179 | .button-lowercase { 180 | text-transform: lowercase; 181 | } 182 | 183 | .button-capitalize { 184 | text-transform: capitalize; 185 | } 186 | 187 | .button-small-caps { 188 | font-variant: small-caps; 189 | } 190 | 191 | .button-icon-txt-large { 192 | font-size: 36px !important; 193 | } 194 | 195 | /* 196 | * Base padding 197 | * 198 | */ 199 | .button-width-small { 200 | padding: 0 10px !important; 201 | } 202 | 203 | /* 204 | * Base Colors 205 | * 206 | * Create colors for buttons 207 | * (.button-primary, .button-secondary, etc.) 208 | */ 209 | .button-primary, 210 | .button-primary-flat { 211 | background-color: #1b9af7; 212 | border-color: #1b9af7; 213 | color: white; 214 | } 215 | 216 | .button-primary:visited, 217 | .button-primary-flat:visited { 218 | color: white; 219 | } 220 | 221 | .button-primary:hover, .button-primary:focus, 222 | .button-primary-flat:hover, 223 | .button-primary-flat:focus { 224 | background-color: #4cb0f9; 225 | border-color: #4cb0f9; 226 | color: white; 227 | } 228 | 229 | .button-primary:active, .button-primary.active, .button-primary.is-active, 230 | .button-primary-flat:active, 231 | .button-primary-flat.active, 232 | .button-primary-flat.is-active { 233 | background-color: #2798eb; 234 | border-color: #2798eb; 235 | color: #0880d7; 236 | } 237 | 238 | .button-plain, 239 | .button-plain-flat { 240 | background-color: white; 241 | border-color: white; 242 | color: #1b9af7; 243 | } 244 | 245 | .button-plain:visited, 246 | .button-plain-flat:visited { 247 | color: #1b9af7; 248 | } 249 | 250 | .button-plain:hover, .button-plain:focus, 251 | .button-plain-flat:hover, 252 | .button-plain-flat:focus { 253 | background-color: white; 254 | border-color: white; 255 | color: #1b9af7; 256 | } 257 | 258 | .button-plain:active, .button-plain.active, .button-plain.is-active, 259 | .button-plain-flat:active, 260 | .button-plain-flat.active, 261 | .button-plain-flat.is-active { 262 | background-color: white; 263 | border-color: white; 264 | color: #e6e6e6; 265 | } 266 | 267 | .button-inverse, 268 | .button-inverse-flat { 269 | background-color: #222222; 270 | border-color: #222222; 271 | color: #eeeeee; 272 | } 273 | 274 | .button-inverse:visited, 275 | .button-inverse-flat:visited { 276 | color: #eeeeee; 277 | } 278 | 279 | .button-inverse:hover, .button-inverse:focus, 280 | .button-inverse-flat:hover, 281 | .button-inverse-flat:focus { 282 | background-color: #3c3c3c; 283 | border-color: #3c3c3c; 284 | color: #eeeeee; 285 | } 286 | 287 | .button-inverse:active, .button-inverse.active, .button-inverse.is-active, 288 | .button-inverse-flat:active, 289 | .button-inverse-flat.active, 290 | .button-inverse-flat.is-active { 291 | background-color: #222222; 292 | border-color: #222222; 293 | color: #090909; 294 | } 295 | 296 | .button-action, 297 | .button-action-flat { 298 | background-color: #a5de37; 299 | border-color: #a5de37; 300 | color: white; 301 | } 302 | 303 | .button-action:visited, 304 | .button-action-flat:visited { 305 | color: white; 306 | } 307 | 308 | .button-action:hover, .button-action:focus, 309 | .button-action-flat:hover, 310 | .button-action-flat:focus { 311 | background-color: #b9e563; 312 | border-color: #b9e563; 313 | color: white; 314 | } 315 | 316 | .button-action:active, .button-action.active, .button-action.is-active, 317 | .button-action-flat:active, 318 | .button-action-flat.active, 319 | .button-action-flat.is-active { 320 | background-color: #a1d243; 321 | border-color: #a1d243; 322 | color: #8bc220; 323 | } 324 | 325 | .button-highlight, 326 | .button-highlight-flat { 327 | background-color: #feae1b; 328 | border-color: #feae1b; 329 | color: white; 330 | } 331 | 332 | .button-highlight:visited, 333 | .button-highlight-flat:visited { 334 | color: white; 335 | } 336 | 337 | .button-highlight:hover, .button-highlight:focus, 338 | .button-highlight-flat:hover, 339 | .button-highlight-flat:focus { 340 | background-color: #fec04e; 341 | border-color: #fec04e; 342 | color: white; 343 | } 344 | 345 | .button-highlight:active, .button-highlight.active, .button-highlight.is-active, 346 | .button-highlight-flat:active, 347 | .button-highlight-flat.active, 348 | .button-highlight-flat.is-active { 349 | background-color: #f3ab26; 350 | border-color: #f3ab26; 351 | color: #e59501; 352 | } 353 | 354 | .button-caution, 355 | .button-caution-flat { 356 | background-color: #ff4351; 357 | border-color: #ff4351; 358 | color: white; 359 | } 360 | 361 | .button-caution:visited, 362 | .button-caution-flat:visited { 363 | color: white; 364 | } 365 | 366 | .button-caution:hover, .button-caution:focus, 367 | .button-caution-flat:hover, 368 | .button-caution-flat:focus { 369 | background-color: #ff7680; 370 | border-color: #ff7680; 371 | color: white; 372 | } 373 | 374 | .button-caution:active, .button-caution.active, .button-caution.is-active, 375 | .button-caution-flat:active, 376 | .button-caution-flat.active, 377 | .button-caution-flat.is-active { 378 | background-color: #f64c59; 379 | border-color: #f64c59; 380 | color: #ff1022; 381 | } 382 | 383 | .button-royal, 384 | .button-royal-flat { 385 | background-color: #7b72e9; 386 | border-color: #7b72e9; 387 | color: white; 388 | } 389 | 390 | .button-royal:visited, 391 | .button-royal-flat:visited { 392 | color: white; 393 | } 394 | 395 | .button-royal:hover, .button-royal:focus, 396 | .button-royal-flat:hover, 397 | .button-royal-flat:focus { 398 | background-color: #a49ef0; 399 | border-color: #a49ef0; 400 | color: white; 401 | } 402 | 403 | .button-royal:active, .button-royal.active, .button-royal.is-active, 404 | .button-royal-flat:active, 405 | .button-royal-flat.active, 406 | .button-royal-flat.is-active { 407 | background-color: #827ae1; 408 | border-color: #827ae1; 409 | color: #5246e2; 410 | } 411 | 412 | /* 413 | * Base Layout Styles 414 | * 415 | * Very Miminal Layout Styles 416 | */ 417 | .button-block, 418 | .button-stacked { 419 | display: block; 420 | } 421 | 422 | /* 423 | * Button Types (optional) 424 | * 425 | * All of the files below represent the various button 426 | * types (including shapes & sizes). None of these files 427 | * are required. Simple remove the uneeded type below and 428 | * the button type will be excluded from the final build 429 | */ 430 | /* 431 | * Button Shapes 432 | * 433 | * This file creates the various button shapes 434 | * (ex. Circle, Rounded, Pill) 435 | */ 436 | .button-square { 437 | border-radius: 0; 438 | } 439 | 440 | .button-box { 441 | border-radius: 10px; 442 | } 443 | 444 | .button-rounded { 445 | border-radius: 4px; 446 | } 447 | 448 | .button-pill { 449 | border-radius: 200px; 450 | } 451 | 452 | .button-circle { 453 | border-radius: 100%; 454 | } 455 | 456 | /* 457 | * Size Adjustment for equal height & widht buttons 458 | * 459 | * Remove padding and set a fixed width. 460 | */ 461 | .button-circle, 462 | .button-box, 463 | .button-square { 464 | padding: 0 !important; 465 | width: 40px; 466 | } 467 | 468 | .button-circle.button-giant, 469 | .button-box.button-giant, 470 | .button-square.button-giant { 471 | width: 70px; 472 | } 473 | 474 | .button-circle.button-jumbo, 475 | .button-box.button-jumbo, 476 | .button-square.button-jumbo { 477 | width: 60px; 478 | } 479 | 480 | .button-circle.button-large, 481 | .button-box.button-large, 482 | .button-square.button-large { 483 | width: 50px; 484 | } 485 | 486 | .button-circle.button-normal, 487 | .button-box.button-normal, 488 | .button-square.button-normal { 489 | width: 40px; 490 | } 491 | 492 | .button-circle.button-small, 493 | .button-box.button-small, 494 | .button-square.button-small { 495 | width: 30px; 496 | } 497 | 498 | .button-circle.button-tiny, 499 | .button-box.button-tiny, 500 | .button-square.button-tiny { 501 | width: 24px; 502 | } 503 | 504 | /* 505 | * Border Buttons 506 | * 507 | * These buttons have no fill they only have a 508 | * border to define their hit target. 509 | */ 510 | .button-border, .button-border-thin, .button-border-thick { 511 | background: none; 512 | border-width: 2px; 513 | border-style: solid; 514 | line-height: 36px; 515 | } 516 | 517 | .button-border:hover, .button-border-thin:hover, .button-border-thick:hover { 518 | background-color: rgba(255, 255, 255, 0.9); 519 | } 520 | 521 | .button-border:active, .button-border-thin:active, .button-border-thick:active, .button-border.active, .active.button-border-thin, .active.button-border-thick, .button-border.is-active, .is-active.button-border-thin, .is-active.button-border-thick { 522 | -webkit-box-shadow: none; 523 | box-shadow: none; 524 | text-shadow: none; 525 | -webkit-transition-property: all; 526 | transition-property: all; 527 | -webkit-transition-duration: .3s; 528 | transition-duration: .3s; 529 | } 530 | 531 | /* 532 | * Border Optional Sizes 533 | * 534 | * A slight variation in border thickness 535 | */ 536 | .button-border-thin { 537 | border-width: 1px; 538 | } 539 | 540 | .button-border-thick { 541 | border-width: 3px; 542 | } 543 | 544 | /* 545 | * Border Button Colors 546 | * 547 | * Create colors for buttons 548 | * (.button-primary, .button-secondary, etc.) 549 | */ 550 | .button-border, .button-border-thin, .button-border-thick, 551 | .button-border-thin, 552 | .button-border-thick { 553 | /* 554 | * Border Button Size Adjustment 555 | * 556 | * The line-height must be adjusted to compinsate for 557 | * the width of the border. 558 | */ 559 | } 560 | 561 | .button-border.button-primary, .button-primary.button-border-thin, .button-primary.button-border-thick, 562 | .button-border-thin.button-primary, 563 | .button-border-thick.button-primary { 564 | color: #1b9af7; 565 | } 566 | 567 | .button-border.button-primary:hover, .button-primary.button-border-thin:hover, .button-primary.button-border-thick:hover, .button-border.button-primary:focus, .button-primary.button-border-thin:focus, .button-primary.button-border-thick:focus, 568 | .button-border-thin.button-primary:hover, 569 | .button-border-thin.button-primary:focus, 570 | .button-border-thick.button-primary:hover, 571 | .button-border-thick.button-primary:focus { 572 | background-color: rgba(76, 176, 249, 0.9); 573 | color: rgba(255, 255, 255, 0.9); 574 | } 575 | 576 | .button-border.button-primary:active, .button-primary.button-border-thin:active, .button-primary.button-border-thick:active, .button-border.button-primary.active, .button-primary.active.button-border-thin, .button-primary.active.button-border-thick, .button-border.button-primary.is-active, .button-primary.is-active.button-border-thin, .button-primary.is-active.button-border-thick, 577 | .button-border-thin.button-primary:active, 578 | .button-border-thin.button-primary.active, 579 | .button-border-thin.button-primary.is-active, 580 | .button-border-thick.button-primary:active, 581 | .button-border-thick.button-primary.active, 582 | .button-border-thick.button-primary.is-active { 583 | background-color: rgba(39, 152, 235, 0.7); 584 | color: rgba(255, 255, 255, 0.5); 585 | opacity: .3; 586 | } 587 | 588 | .button-border.button-plain, .button-plain.button-border-thin, .button-plain.button-border-thick, 589 | .button-border-thin.button-plain, 590 | .button-border-thick.button-plain { 591 | color: white; 592 | } 593 | 594 | .button-border.button-plain:hover, .button-plain.button-border-thin:hover, .button-plain.button-border-thick:hover, .button-border.button-plain:focus, .button-plain.button-border-thin:focus, .button-plain.button-border-thick:focus, 595 | .button-border-thin.button-plain:hover, 596 | .button-border-thin.button-plain:focus, 597 | .button-border-thick.button-plain:hover, 598 | .button-border-thick.button-plain:focus { 599 | background-color: rgba(255, 255, 255, 0.9); 600 | color: rgba(27, 154, 247, 0.9); 601 | } 602 | 603 | .button-border.button-plain:active, .button-plain.button-border-thin:active, .button-plain.button-border-thick:active, .button-border.button-plain.active, .button-plain.active.button-border-thin, .button-plain.active.button-border-thick, .button-border.button-plain.is-active, .button-plain.is-active.button-border-thin, .button-plain.is-active.button-border-thick, 604 | .button-border-thin.button-plain:active, 605 | .button-border-thin.button-plain.active, 606 | .button-border-thin.button-plain.is-active, 607 | .button-border-thick.button-plain:active, 608 | .button-border-thick.button-plain.active, 609 | .button-border-thick.button-plain.is-active { 610 | background-color: rgba(255, 255, 255, 0.7); 611 | color: rgba(27, 154, 247, 0.5); 612 | opacity: .3; 613 | } 614 | 615 | .button-border.button-inverse, .button-inverse.button-border-thin, .button-inverse.button-border-thick, 616 | .button-border-thin.button-inverse, 617 | .button-border-thick.button-inverse { 618 | color: #222222; 619 | } 620 | 621 | .button-border.button-inverse:hover, .button-inverse.button-border-thin:hover, .button-inverse.button-border-thick:hover, .button-border.button-inverse:focus, .button-inverse.button-border-thin:focus, .button-inverse.button-border-thick:focus, 622 | .button-border-thin.button-inverse:hover, 623 | .button-border-thin.button-inverse:focus, 624 | .button-border-thick.button-inverse:hover, 625 | .button-border-thick.button-inverse:focus { 626 | background-color: rgba(60, 60, 60, 0.9); 627 | color: rgba(238, 238, 238, 0.9); 628 | } 629 | 630 | .button-border.button-inverse:active, .button-inverse.button-border-thin:active, .button-inverse.button-border-thick:active, .button-border.button-inverse.active, .button-inverse.active.button-border-thin, .button-inverse.active.button-border-thick, .button-border.button-inverse.is-active, .button-inverse.is-active.button-border-thin, .button-inverse.is-active.button-border-thick, 631 | .button-border-thin.button-inverse:active, 632 | .button-border-thin.button-inverse.active, 633 | .button-border-thin.button-inverse.is-active, 634 | .button-border-thick.button-inverse:active, 635 | .button-border-thick.button-inverse.active, 636 | .button-border-thick.button-inverse.is-active { 637 | background-color: rgba(34, 34, 34, 0.7); 638 | color: rgba(238, 238, 238, 0.5); 639 | opacity: .3; 640 | } 641 | 642 | .button-border.button-action, .button-action.button-border-thin, .button-action.button-border-thick, 643 | .button-border-thin.button-action, 644 | .button-border-thick.button-action { 645 | color: #a5de37; 646 | } 647 | 648 | .button-border.button-action:hover, .button-action.button-border-thin:hover, .button-action.button-border-thick:hover, .button-border.button-action:focus, .button-action.button-border-thin:focus, .button-action.button-border-thick:focus, 649 | .button-border-thin.button-action:hover, 650 | .button-border-thin.button-action:focus, 651 | .button-border-thick.button-action:hover, 652 | .button-border-thick.button-action:focus { 653 | background-color: rgba(185, 229, 99, 0.9); 654 | color: rgba(255, 255, 255, 0.9); 655 | } 656 | 657 | .button-border.button-action:active, .button-action.button-border-thin:active, .button-action.button-border-thick:active, .button-border.button-action.active, .button-action.active.button-border-thin, .button-action.active.button-border-thick, .button-border.button-action.is-active, .button-action.is-active.button-border-thin, .button-action.is-active.button-border-thick, 658 | .button-border-thin.button-action:active, 659 | .button-border-thin.button-action.active, 660 | .button-border-thin.button-action.is-active, 661 | .button-border-thick.button-action:active, 662 | .button-border-thick.button-action.active, 663 | .button-border-thick.button-action.is-active { 664 | background-color: rgba(161, 210, 67, 0.7); 665 | color: rgba(255, 255, 255, 0.5); 666 | opacity: .3; 667 | } 668 | 669 | .button-border.button-highlight, .button-highlight.button-border-thin, .button-highlight.button-border-thick, 670 | .button-border-thin.button-highlight, 671 | .button-border-thick.button-highlight { 672 | color: #feae1b; 673 | } 674 | 675 | .button-border.button-highlight:hover, .button-highlight.button-border-thin:hover, .button-highlight.button-border-thick:hover, .button-border.button-highlight:focus, .button-highlight.button-border-thin:focus, .button-highlight.button-border-thick:focus, 676 | .button-border-thin.button-highlight:hover, 677 | .button-border-thin.button-highlight:focus, 678 | .button-border-thick.button-highlight:hover, 679 | .button-border-thick.button-highlight:focus { 680 | background-color: rgba(254, 192, 78, 0.9); 681 | color: rgba(255, 255, 255, 0.9); 682 | } 683 | 684 | .button-border.button-highlight:active, .button-highlight.button-border-thin:active, .button-highlight.button-border-thick:active, .button-border.button-highlight.active, .button-highlight.active.button-border-thin, .button-highlight.active.button-border-thick, .button-border.button-highlight.is-active, .button-highlight.is-active.button-border-thin, .button-highlight.is-active.button-border-thick, 685 | .button-border-thin.button-highlight:active, 686 | .button-border-thin.button-highlight.active, 687 | .button-border-thin.button-highlight.is-active, 688 | .button-border-thick.button-highlight:active, 689 | .button-border-thick.button-highlight.active, 690 | .button-border-thick.button-highlight.is-active { 691 | background-color: rgba(243, 171, 38, 0.7); 692 | color: rgba(255, 255, 255, 0.5); 693 | opacity: .3; 694 | } 695 | 696 | .button-border.button-caution, .button-caution.button-border-thin, .button-caution.button-border-thick, 697 | .button-border-thin.button-caution, 698 | .button-border-thick.button-caution { 699 | color: #ff4351; 700 | } 701 | 702 | .button-border.button-caution:hover, .button-caution.button-border-thin:hover, .button-caution.button-border-thick:hover, .button-border.button-caution:focus, .button-caution.button-border-thin:focus, .button-caution.button-border-thick:focus, 703 | .button-border-thin.button-caution:hover, 704 | .button-border-thin.button-caution:focus, 705 | .button-border-thick.button-caution:hover, 706 | .button-border-thick.button-caution:focus { 707 | background-color: rgba(255, 118, 128, 0.9); 708 | color: rgba(255, 255, 255, 0.9); 709 | } 710 | 711 | .button-border.button-caution:active, .button-caution.button-border-thin:active, .button-caution.button-border-thick:active, .button-border.button-caution.active, .button-caution.active.button-border-thin, .button-caution.active.button-border-thick, .button-border.button-caution.is-active, .button-caution.is-active.button-border-thin, .button-caution.is-active.button-border-thick, 712 | .button-border-thin.button-caution:active, 713 | .button-border-thin.button-caution.active, 714 | .button-border-thin.button-caution.is-active, 715 | .button-border-thick.button-caution:active, 716 | .button-border-thick.button-caution.active, 717 | .button-border-thick.button-caution.is-active { 718 | background-color: rgba(246, 76, 89, 0.7); 719 | color: rgba(255, 255, 255, 0.5); 720 | opacity: .3; 721 | } 722 | 723 | .button-border.button-royal, .button-royal.button-border-thin, .button-royal.button-border-thick, 724 | .button-border-thin.button-royal, 725 | .button-border-thick.button-royal { 726 | color: #7b72e9; 727 | } 728 | 729 | .button-border.button-royal:hover, .button-royal.button-border-thin:hover, .button-royal.button-border-thick:hover, .button-border.button-royal:focus, .button-royal.button-border-thin:focus, .button-royal.button-border-thick:focus, 730 | .button-border-thin.button-royal:hover, 731 | .button-border-thin.button-royal:focus, 732 | .button-border-thick.button-royal:hover, 733 | .button-border-thick.button-royal:focus { 734 | background-color: rgba(164, 158, 240, 0.9); 735 | color: rgba(255, 255, 255, 0.9); 736 | } 737 | 738 | .button-border.button-royal:active, .button-royal.button-border-thin:active, .button-royal.button-border-thick:active, .button-border.button-royal.active, .button-royal.active.button-border-thin, .button-royal.active.button-border-thick, .button-border.button-royal.is-active, .button-royal.is-active.button-border-thin, .button-royal.is-active.button-border-thick, 739 | .button-border-thin.button-royal:active, 740 | .button-border-thin.button-royal.active, 741 | .button-border-thin.button-royal.is-active, 742 | .button-border-thick.button-royal:active, 743 | .button-border-thick.button-royal.active, 744 | .button-border-thick.button-royal.is-active { 745 | background-color: rgba(130, 122, 225, 0.7); 746 | color: rgba(255, 255, 255, 0.5); 747 | opacity: .3; 748 | } 749 | 750 | .button-border.button-giant, .button-giant.button-border-thin, .button-giant.button-border-thick, 751 | .button-border-thin.button-giant, 752 | .button-border-thick.button-giant { 753 | line-height: 66px; 754 | } 755 | 756 | .button-border.button-jumbo, .button-jumbo.button-border-thin, .button-jumbo.button-border-thick, 757 | .button-border-thin.button-jumbo, 758 | .button-border-thick.button-jumbo { 759 | line-height: 56px; 760 | } 761 | 762 | .button-border.button-large, .button-large.button-border-thin, .button-large.button-border-thick, 763 | .button-border-thin.button-large, 764 | .button-border-thick.button-large { 765 | line-height: 46px; 766 | } 767 | 768 | .button-border.button-normal, .button-normal.button-border-thin, .button-normal.button-border-thick, 769 | .button-border-thin.button-normal, 770 | .button-border-thick.button-normal { 771 | line-height: 36px; 772 | } 773 | 774 | .button-border.button-small, .button-small.button-border-thin, .button-small.button-border-thick, 775 | .button-border-thin.button-small, 776 | .button-border-thick.button-small { 777 | line-height: 26px; 778 | } 779 | 780 | .button-border.button-tiny, .button-tiny.button-border-thin, .button-tiny.button-border-thick, 781 | .button-border-thin.button-tiny, 782 | .button-border-thick.button-tiny { 783 | line-height: 20px; 784 | } 785 | 786 | /* 787 | * Border Buttons 788 | * 789 | * These buttons have no fill they only have a 790 | * border to define their hit target. 791 | */ 792 | .button-borderless { 793 | background: none; 794 | border: none; 795 | padding: 0 8px !important; 796 | color: #eeeeee; 797 | font-size: 20.8px; 798 | font-weight: 200; 799 | /* 800 | * Borderless Button Colors 801 | * 802 | * Create colors for buttons 803 | * (.button-primary, .button-secondary, etc.) 804 | */ 805 | /* 806 | * Borderles Size Adjustment 807 | * 808 | * The font-size must be large to compinsate for 809 | * the lack of a hit target. 810 | */ 811 | } 812 | 813 | .button-borderless:hover, .button-borderless:focus { 814 | background: none; 815 | } 816 | 817 | .button-borderless:active, .button-borderless.active, .button-borderless.is-active { 818 | -webkit-box-shadow: none; 819 | box-shadow: none; 820 | text-shadow: none; 821 | -webkit-transition-property: all; 822 | transition-property: all; 823 | -webkit-transition-duration: .3s; 824 | transition-duration: .3s; 825 | opacity: .3; 826 | } 827 | 828 | .button-borderless.button-primary { 829 | color: #1b9af7; 830 | } 831 | 832 | .button-borderless.button-plain { 833 | color: white; 834 | } 835 | 836 | .button-borderless.button-inverse { 837 | color: #222222; 838 | } 839 | 840 | .button-borderless.button-action { 841 | color: #a5de37; 842 | } 843 | 844 | .button-borderless.button-highlight { 845 | color: #feae1b; 846 | } 847 | 848 | .button-borderless.button-caution { 849 | color: #ff4351; 850 | } 851 | 852 | .button-borderless.button-royal { 853 | color: #7b72e9; 854 | } 855 | 856 | .button-borderless.button-giant { 857 | font-size: 36.4px; 858 | height: 52.4px; 859 | line-height: 52.4px; 860 | } 861 | 862 | .button-borderless.button-jumbo { 863 | font-size: 31.2px; 864 | height: 47.2px; 865 | line-height: 47.2px; 866 | } 867 | 868 | .button-borderless.button-large { 869 | font-size: 26px; 870 | height: 42px; 871 | line-height: 42px; 872 | } 873 | 874 | .button-borderless.button-normal { 875 | font-size: 20.8px; 876 | height: 36.8px; 877 | line-height: 36.8px; 878 | } 879 | 880 | .button-borderless.button-small { 881 | font-size: 15.6px; 882 | height: 31.6px; 883 | line-height: 31.6px; 884 | } 885 | 886 | .button-borderless.button-tiny { 887 | font-size: 12.48px; 888 | height: 28.48px; 889 | line-height: 28.48px; 890 | } 891 | 892 | /* 893 | * Raised Buttons 894 | * 895 | * A classic looking button that offers 896 | * great depth and affordance. 897 | */ 898 | .button-raised { 899 | border-color: #e1e1e1; 900 | border-style: solid; 901 | border-width: 1px; 902 | line-height: 38px; 903 | background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e1e1e1)); 904 | background: linear-gradient(#f6f6f6, #e1e1e1); 905 | -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); 906 | box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15); 907 | } 908 | 909 | .button-raised:hover, .button-raised:focus { 910 | background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro)); 911 | background: linear-gradient(top, white, gainsboro); 912 | } 913 | 914 | .button-raised:active, .button-raised.active, .button-raised.is-active { 915 | background: #eeeeee; 916 | -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; 917 | box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white; 918 | } 919 | 920 | /* 921 | * Raised Button Colors 922 | * 923 | * Create colors for raised buttons 924 | */ 925 | .button-raised.button-primary { 926 | border-color: #088ef0; 927 | background: -webkit-gradient(linear, left top, left bottom, from(#34a5f8), to(#088ef0)); 928 | background: linear-gradient(#34a5f8, #088ef0); 929 | } 930 | 931 | .button-raised.button-primary:hover, .button-raised.button-primary:focus { 932 | background: -webkit-gradient(linear, left top, left bottom, from(#42abf8), to(#0888e6)); 933 | background: linear-gradient(top, #42abf8, #0888e6); 934 | } 935 | 936 | .button-raised.button-primary:active, .button-raised.button-primary.active, .button-raised.button-primary.is-active { 937 | border-color: #0880d7; 938 | background: #2798eb; 939 | } 940 | 941 | .button-raised.button-plain { 942 | border-color: #f2f2f2; 943 | background: -webkit-gradient(linear, left top, left bottom, from(white), to(#f2f2f2)); 944 | background: linear-gradient(white, #f2f2f2); 945 | } 946 | 947 | .button-raised.button-plain:hover, .button-raised.button-plain:focus { 948 | background: -webkit-gradient(linear, left top, left bottom, from(white), to(#ededed)); 949 | background: linear-gradient(top, white, #ededed); 950 | } 951 | 952 | .button-raised.button-plain:active, .button-raised.button-plain.active, .button-raised.button-plain.is-active { 953 | border-color: #e6e6e6; 954 | background: white; 955 | } 956 | 957 | .button-raised.button-inverse { 958 | border-color: #151515; 959 | background: -webkit-gradient(linear, left top, left bottom, from(#2f2f2f), to(#151515)); 960 | background: linear-gradient(#2f2f2f, #151515); 961 | } 962 | 963 | .button-raised.button-inverse:hover, .button-raised.button-inverse:focus { 964 | background: -webkit-gradient(linear, left top, left bottom, from(#363636), to(#101010)); 965 | background: linear-gradient(top, #363636, #101010); 966 | } 967 | 968 | .button-raised.button-inverse:active, .button-raised.button-inverse.active, .button-raised.button-inverse.is-active { 969 | border-color: #090909; 970 | background: #222222; 971 | } 972 | 973 | .button-raised.button-action { 974 | border-color: #9ad824; 975 | background: -webkit-gradient(linear, left top, left bottom, from(#afe24d), to(#9ad824)); 976 | background: linear-gradient(#afe24d, #9ad824); 977 | } 978 | 979 | .button-raised.button-action:hover, .button-raised.button-action:focus { 980 | background: -webkit-gradient(linear, left top, left bottom, from(#b5e45a), to(#94cf22)); 981 | background: linear-gradient(top, #b5e45a, #94cf22); 982 | } 983 | 984 | .button-raised.button-action:active, .button-raised.button-action.active, .button-raised.button-action.is-active { 985 | border-color: #8bc220; 986 | background: #a1d243; 987 | } 988 | 989 | .button-raised.button-highlight { 990 | border-color: #fea502; 991 | background: -webkit-gradient(linear, left top, left bottom, from(#feb734), to(#fea502)); 992 | background: linear-gradient(#feb734, #fea502); 993 | } 994 | 995 | .button-raised.button-highlight:hover, .button-raised.button-highlight:focus { 996 | background: -webkit-gradient(linear, left top, left bottom, from(#febc44), to(#f49f01)); 997 | background: linear-gradient(top, #febc44, #f49f01); 998 | } 999 | 1000 | .button-raised.button-highlight:active, .button-raised.button-highlight.active, .button-raised.button-highlight.is-active { 1001 | border-color: #e59501; 1002 | background: #f3ab26; 1003 | } 1004 | 1005 | .button-raised.button-caution { 1006 | border-color: #ff2939; 1007 | background: -webkit-gradient(linear, left top, left bottom, from(#ff5c69), to(#ff2939)); 1008 | background: linear-gradient(#ff5c69, #ff2939); 1009 | } 1010 | 1011 | .button-raised.button-caution:hover, .button-raised.button-caution:focus { 1012 | background: -webkit-gradient(linear, left top, left bottom, from(#ff6c77), to(#ff1f30)); 1013 | background: linear-gradient(top, #ff6c77, #ff1f30); 1014 | } 1015 | 1016 | .button-raised.button-caution:active, .button-raised.button-caution.active, .button-raised.button-caution.is-active { 1017 | border-color: #ff1022; 1018 | background: #f64c59; 1019 | } 1020 | 1021 | .button-raised.button-royal { 1022 | border-color: #665ce6; 1023 | background: -webkit-gradient(linear, left top, left bottom, from(#9088ec), to(#665ce6)); 1024 | background: linear-gradient(#9088ec, #665ce6); 1025 | } 1026 | 1027 | .button-raised.button-royal:hover, .button-raised.button-royal:focus { 1028 | background: -webkit-gradient(linear, left top, left bottom, from(#9c95ef), to(#5e53e4)); 1029 | background: linear-gradient(top, #9c95ef, #5e53e4); 1030 | } 1031 | 1032 | .button-raised.button-royal:active, .button-raised.button-royal.active, .button-raised.button-royal.is-active { 1033 | border-color: #5246e2; 1034 | background: #827ae1; 1035 | } 1036 | 1037 | /* 1038 | * 3D Buttons 1039 | * 1040 | * These buttons have a heavy three dimensional 1041 | * style that mimics the visual appearance of a 1042 | * real life button. 1043 | */ 1044 | .button-3d { 1045 | position: relative; 1046 | top: 0; 1047 | -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); 1048 | box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); 1049 | } 1050 | 1051 | .button-3d:hover, .button-3d:focus { 1052 | -webkit-box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); 1053 | box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgba(0, 0, 0, 0.2); 1054 | } 1055 | 1056 | .button-3d:active, .button-3d.active, .button-3d.is-active { 1057 | top: 5px; 1058 | -webkit-transition-property: all; 1059 | transition-property: all; 1060 | -webkit-transition-duration: .15s; 1061 | transition-duration: .15s; 1062 | -webkit-box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); 1063 | box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgba(0, 0, 0, 0.2); 1064 | } 1065 | 1066 | /* 1067 | * 3D Button Colors 1068 | * 1069 | * Create colors for buttons 1070 | * (.button-primary, .button-secondary, etc.) 1071 | */ 1072 | .button-3d.button-primary { 1073 | -webkit-box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); 1074 | box-shadow: 0 7px 0 #0880d7, 0 8px 3px rgba(0, 0, 0, 0.3); 1075 | } 1076 | 1077 | .button-3d.button-primary:hover, .button-3d.button-primary:focus { 1078 | -webkit-box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); 1079 | box-shadow: 0 7px 0 #077ace, 0 8px 3px rgba(0, 0, 0, 0.3); 1080 | } 1081 | 1082 | .button-3d.button-primary:active, .button-3d.button-primary.active, .button-3d.button-primary.is-active { 1083 | -webkit-box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); 1084 | box-shadow: 0 2px 0 #0662a6, 0 3px 3px rgba(0, 0, 0, 0.2); 1085 | } 1086 | 1087 | .button-3d.button-plain { 1088 | -webkit-box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3); 1089 | box-shadow: 0 7px 0 #e6e6e6, 0 8px 3px rgba(0, 0, 0, 0.3); 1090 | } 1091 | 1092 | .button-3d.button-plain:hover, .button-3d.button-plain:focus { 1093 | -webkit-box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3); 1094 | box-shadow: 0 7px 0 #e0e0e0, 0 8px 3px rgba(0, 0, 0, 0.3); 1095 | } 1096 | 1097 | .button-3d.button-plain:active, .button-3d.button-plain.active, .button-3d.button-plain.is-active { 1098 | -webkit-box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2); 1099 | box-shadow: 0 2px 0 #cccccc, 0 3px 3px rgba(0, 0, 0, 0.2); 1100 | } 1101 | 1102 | .button-3d.button-inverse { 1103 | -webkit-box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3); 1104 | box-shadow: 0 7px 0 #090909, 0 8px 3px rgba(0, 0, 0, 0.3); 1105 | } 1106 | 1107 | .button-3d.button-inverse:hover, .button-3d.button-inverse:focus { 1108 | -webkit-box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3); 1109 | box-shadow: 0 7px 0 #030303, 0 8px 3px rgba(0, 0, 0, 0.3); 1110 | } 1111 | 1112 | .button-3d.button-inverse:active, .button-3d.button-inverse.active, .button-3d.button-inverse.is-active { 1113 | -webkit-box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2); 1114 | box-shadow: 0 2px 0 black, 0 3px 3px rgba(0, 0, 0, 0.2); 1115 | } 1116 | 1117 | .button-3d.button-action { 1118 | -webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); 1119 | box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3); 1120 | } 1121 | 1122 | .button-3d.button-action:hover, .button-3d.button-action:focus { 1123 | -webkit-box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); 1124 | box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3); 1125 | } 1126 | 1127 | .button-3d.button-action:active, .button-3d.button-action.active, .button-3d.button-action.is-active { 1128 | -webkit-box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); 1129 | box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2); 1130 | } 1131 | 1132 | .button-3d.button-highlight { 1133 | -webkit-box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3); 1134 | box-shadow: 0 7px 0 #e59501, 0 8px 3px rgba(0, 0, 0, 0.3); 1135 | } 1136 | 1137 | .button-3d.button-highlight:hover, .button-3d.button-highlight:focus { 1138 | -webkit-box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3); 1139 | box-shadow: 0 7px 0 #db8e01, 0 8px 3px rgba(0, 0, 0, 0.3); 1140 | } 1141 | 1142 | .button-3d.button-highlight:active, .button-3d.button-highlight.active, .button-3d.button-highlight.is-active { 1143 | -webkit-box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2); 1144 | box-shadow: 0 2px 0 #b27401, 0 3px 3px rgba(0, 0, 0, 0.2); 1145 | } 1146 | 1147 | .button-3d.button-caution { 1148 | -webkit-box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3); 1149 | box-shadow: 0 7px 0 #ff1022, 0 8px 3px rgba(0, 0, 0, 0.3); 1150 | } 1151 | 1152 | .button-3d.button-caution:hover, .button-3d.button-caution:focus { 1153 | -webkit-box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3); 1154 | box-shadow: 0 7px 0 #ff0618, 0 8px 3px rgba(0, 0, 0, 0.3); 1155 | } 1156 | 1157 | .button-3d.button-caution:active, .button-3d.button-caution.active, .button-3d.button-caution.is-active { 1158 | -webkit-box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2); 1159 | box-shadow: 0 2px 0 #dc0010, 0 3px 3px rgba(0, 0, 0, 0.2); 1160 | } 1161 | 1162 | .button-3d.button-royal { 1163 | -webkit-box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3); 1164 | box-shadow: 0 7px 0 #5246e2, 0 8px 3px rgba(0, 0, 0, 0.3); 1165 | } 1166 | 1167 | .button-3d.button-royal:hover, .button-3d.button-royal:focus { 1168 | -webkit-box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3); 1169 | box-shadow: 0 7px 0 #493de1, 0 8px 3px rgba(0, 0, 0, 0.3); 1170 | } 1171 | 1172 | .button-3d.button-royal:active, .button-3d.button-royal.active, .button-3d.button-royal.is-active { 1173 | -webkit-box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2); 1174 | box-shadow: 0 2px 0 #2f21d4, 0 3px 3px rgba(0, 0, 0, 0.2); 1175 | } 1176 | 1177 | /* 1178 | * Glowing Buttons 1179 | * 1180 | * A pulse like glow that appears 1181 | * rythmically around the edges of 1182 | * a button. 1183 | */ 1184 | /* 1185 | * Glow animation mixin for Compass users 1186 | * 1187 | */ 1188 | /* 1189 | * Glowing Keyframes 1190 | * 1191 | */ 1192 | @-webkit-keyframes glowing { 1193 | from { 1194 | -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 1195 | box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 1196 | } 1197 | 1198 | 50% { 1199 | -webkit-box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); 1200 | box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); 1201 | } 1202 | 1203 | to { 1204 | -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 1205 | box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 1206 | } 1207 | } 1208 | 1209 | @keyframes glowing { 1210 | from { 1211 | -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 1212 | box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 1213 | } 1214 | 1215 | 50% { 1216 | -webkit-box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); 1217 | box-shadow: 0 0 20px rgba(44, 154, 219, 0.8); 1218 | } 1219 | 1220 | to { 1221 | -webkit-box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 1222 | box-shadow: 0 0 0 rgba(44, 154, 219, 0.3); 1223 | } 1224 | } 1225 | 1226 | /* 1227 | * Glowing Keyframes for various colors 1228 | * 1229 | */ 1230 | @-webkit-keyframes glowing-primary { 1231 | from { 1232 | -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 1233 | box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 1234 | } 1235 | 1236 | 50% { 1237 | -webkit-box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); 1238 | box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); 1239 | } 1240 | 1241 | to { 1242 | -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 1243 | box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 1244 | } 1245 | } 1246 | 1247 | @keyframes glowing-primary { 1248 | from { 1249 | -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 1250 | box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 1251 | } 1252 | 1253 | 50% { 1254 | -webkit-box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); 1255 | box-shadow: 0 0 20px rgba(27, 154, 247, 0.8); 1256 | } 1257 | 1258 | to { 1259 | -webkit-box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 1260 | box-shadow: 0 0 0 rgba(27, 154, 247, 0.3); 1261 | } 1262 | } 1263 | 1264 | @-webkit-keyframes glowing-plain { 1265 | from { 1266 | -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 1267 | box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 1268 | } 1269 | 1270 | 50% { 1271 | -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 1272 | box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 1273 | } 1274 | 1275 | to { 1276 | -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 1277 | box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 1278 | } 1279 | } 1280 | 1281 | @keyframes glowing-plain { 1282 | from { 1283 | -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 1284 | box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 1285 | } 1286 | 1287 | 50% { 1288 | -webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 1289 | box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 1290 | } 1291 | 1292 | to { 1293 | -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 1294 | box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); 1295 | } 1296 | } 1297 | 1298 | @-webkit-keyframes glowing-inverse { 1299 | from { 1300 | -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 1301 | box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 1302 | } 1303 | 1304 | 50% { 1305 | -webkit-box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); 1306 | box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); 1307 | } 1308 | 1309 | to { 1310 | -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 1311 | box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 1312 | } 1313 | } 1314 | 1315 | @keyframes glowing-inverse { 1316 | from { 1317 | -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 1318 | box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 1319 | } 1320 | 1321 | 50% { 1322 | -webkit-box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); 1323 | box-shadow: 0 0 20px rgba(34, 34, 34, 0.8); 1324 | } 1325 | 1326 | to { 1327 | -webkit-box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 1328 | box-shadow: 0 0 0 rgba(34, 34, 34, 0.3); 1329 | } 1330 | } 1331 | 1332 | @-webkit-keyframes glowing-action { 1333 | from { 1334 | -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 1335 | box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 1336 | } 1337 | 1338 | 50% { 1339 | -webkit-box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); 1340 | box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); 1341 | } 1342 | 1343 | to { 1344 | -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 1345 | box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 1346 | } 1347 | } 1348 | 1349 | @keyframes glowing-action { 1350 | from { 1351 | -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 1352 | box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 1353 | } 1354 | 1355 | 50% { 1356 | -webkit-box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); 1357 | box-shadow: 0 0 20px rgba(165, 222, 55, 0.8); 1358 | } 1359 | 1360 | to { 1361 | -webkit-box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 1362 | box-shadow: 0 0 0 rgba(165, 222, 55, 0.3); 1363 | } 1364 | } 1365 | 1366 | @-webkit-keyframes glowing-highlight { 1367 | from { 1368 | -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 1369 | box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 1370 | } 1371 | 1372 | 50% { 1373 | -webkit-box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); 1374 | box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); 1375 | } 1376 | 1377 | to { 1378 | -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 1379 | box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 1380 | } 1381 | } 1382 | 1383 | @keyframes glowing-highlight { 1384 | from { 1385 | -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 1386 | box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 1387 | } 1388 | 1389 | 50% { 1390 | -webkit-box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); 1391 | box-shadow: 0 0 20px rgba(254, 174, 27, 0.8); 1392 | } 1393 | 1394 | to { 1395 | -webkit-box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 1396 | box-shadow: 0 0 0 rgba(254, 174, 27, 0.3); 1397 | } 1398 | } 1399 | 1400 | @-webkit-keyframes glowing-caution { 1401 | from { 1402 | -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 1403 | box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 1404 | } 1405 | 1406 | 50% { 1407 | -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); 1408 | box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); 1409 | } 1410 | 1411 | to { 1412 | -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 1413 | box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 1414 | } 1415 | } 1416 | 1417 | @keyframes glowing-caution { 1418 | from { 1419 | -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 1420 | box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 1421 | } 1422 | 1423 | 50% { 1424 | -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); 1425 | box-shadow: 0 0 20px rgba(255, 67, 81, 0.8); 1426 | } 1427 | 1428 | to { 1429 | -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 1430 | box-shadow: 0 0 0 rgba(255, 67, 81, 0.3); 1431 | } 1432 | } 1433 | 1434 | @-webkit-keyframes glowing-royal { 1435 | from { 1436 | -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 1437 | box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 1438 | } 1439 | 1440 | 50% { 1441 | -webkit-box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); 1442 | box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); 1443 | } 1444 | 1445 | to { 1446 | -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 1447 | box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 1448 | } 1449 | } 1450 | 1451 | @keyframes glowing-royal { 1452 | from { 1453 | -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 1454 | box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 1455 | } 1456 | 1457 | 50% { 1458 | -webkit-box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); 1459 | box-shadow: 0 0 20px rgba(123, 114, 233, 0.8); 1460 | } 1461 | 1462 | to { 1463 | -webkit-box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 1464 | box-shadow: 0 0 0 rgba(123, 114, 233, 0.3); 1465 | } 1466 | } 1467 | 1468 | /* 1469 | * Glowing Buttons Base Styes 1470 | * 1471 | * A pulse like glow that appears 1472 | * rythmically around the edges of 1473 | * a button. 1474 | */ 1475 | .button-glow { 1476 | -webkit-animation-duration: 3s; 1477 | animation-duration: 3s; 1478 | -webkit-animation-iteration-count: infinite; 1479 | animation-iteration-count: infinite; 1480 | -webkit-animation-name: glowing; 1481 | animation-name: glowing; 1482 | } 1483 | 1484 | .button-glow:active, .button-glow.active, .button-glow.is-active { 1485 | -webkit-animation-name: none; 1486 | animation-name: none; 1487 | } 1488 | 1489 | /* 1490 | * Glowing Button Colors 1491 | * 1492 | * Create colors for glowing buttons 1493 | */ 1494 | .button-glow.button-primary { 1495 | -webkit-animation-name: glowing-primary; 1496 | animation-name: glowing-primary; 1497 | } 1498 | 1499 | .button-glow.button-plain { 1500 | -webkit-animation-name: glowing-plain; 1501 | animation-name: glowing-plain; 1502 | } 1503 | 1504 | .button-glow.button-inverse { 1505 | -webkit-animation-name: glowing-inverse; 1506 | animation-name: glowing-inverse; 1507 | } 1508 | 1509 | .button-glow.button-action { 1510 | -webkit-animation-name: glowing-action; 1511 | animation-name: glowing-action; 1512 | } 1513 | 1514 | .button-glow.button-highlight { 1515 | -webkit-animation-name: glowing-highlight; 1516 | animation-name: glowing-highlight; 1517 | } 1518 | 1519 | .button-glow.button-caution { 1520 | -webkit-animation-name: glowing-caution; 1521 | animation-name: glowing-caution; 1522 | } 1523 | 1524 | .button-glow.button-royal { 1525 | -webkit-animation-name: glowing-royal; 1526 | animation-name: glowing-royal; 1527 | } 1528 | 1529 | /* 1530 | * Dropdown menu buttons 1531 | * 1532 | * A dropdown menu appears 1533 | * when a button is pressed 1534 | */ 1535 | /* 1536 | * Dropdown Container 1537 | * 1538 | */ 1539 | .button-dropdown { 1540 | position: relative; 1541 | overflow: visible; 1542 | display: inline-block; 1543 | } 1544 | 1545 | /* 1546 | * Dropdown List Style 1547 | * 1548 | */ 1549 | .button-dropdown-list { 1550 | display: none; 1551 | position: absolute; 1552 | padding: 0; 1553 | margin: 0; 1554 | top: 0; 1555 | left: 0; 1556 | z-index: 1000; 1557 | min-width: 100%; 1558 | list-style-type: none; 1559 | background: rgba(255, 255, 255, 0.95); 1560 | border-style: solid; 1561 | border-width: 1px; 1562 | border-color: #d4d4d4; 1563 | font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 1564 | -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); 1565 | box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); 1566 | border-radius: 3px; 1567 | -webkit-box-sizing: border-box; 1568 | -moz-box-sizing: border-box; 1569 | box-sizing: border-box; 1570 | /* 1571 | * Dropdown Below 1572 | * 1573 | */ 1574 | /* 1575 | * Dropdown Above 1576 | * 1577 | */ 1578 | } 1579 | 1580 | .button-dropdown-list.is-below { 1581 | top: 100%; 1582 | border-top: none; 1583 | border-radius: 0 0 3px 3px; 1584 | } 1585 | 1586 | .button-dropdown-list.is-above { 1587 | bottom: 100%; 1588 | top: auto; 1589 | border-bottom: none; 1590 | border-radius: 3px 3px 0 0; 1591 | -webkit-box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); 1592 | box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.2); 1593 | } 1594 | 1595 | /* 1596 | * Dropdown Buttons 1597 | * 1598 | */ 1599 | .button-dropdown-list > li { 1600 | padding: 0; 1601 | margin: 0; 1602 | display: block; 1603 | } 1604 | 1605 | .button-dropdown-list > li > a { 1606 | display: block; 1607 | line-height: 40px; 1608 | font-size: 12.8px; 1609 | padding: 5px 10px; 1610 | float: none; 1611 | color: #666666; 1612 | text-decoration: none; 1613 | } 1614 | 1615 | .button-dropdown-list > li > a:hover { 1616 | color: #5e5e5e; 1617 | background: #f6f6f6; 1618 | text-decoration: none; 1619 | } 1620 | 1621 | .button-dropdown-divider { 1622 | border-top: 1px solid #e6e6e6; 1623 | } 1624 | 1625 | /* 1626 | * Dropdown Colors 1627 | * 1628 | * Create colors for buttons 1629 | * (.button-primary, .button-secondary, etc.) 1630 | */ 1631 | .button-dropdown.button-dropdown-primary .button-dropdown-list { 1632 | background: rgba(27, 154, 247, 0.95); 1633 | border-color: #0880d7; 1634 | } 1635 | 1636 | .button-dropdown.button-dropdown-primary .button-dropdown-list .button-dropdown-divider { 1637 | border-color: #0888e6; 1638 | } 1639 | 1640 | .button-dropdown.button-dropdown-primary .button-dropdown-list > li > a { 1641 | color: white; 1642 | } 1643 | 1644 | .button-dropdown.button-dropdown-primary .button-dropdown-list > li > a:hover { 1645 | color: #f2f2f2; 1646 | background: #088ef0; 1647 | } 1648 | 1649 | .button-dropdown.button-dropdown-plain .button-dropdown-list { 1650 | background: rgba(255, 255, 255, 0.95); 1651 | border-color: #e6e6e6; 1652 | } 1653 | 1654 | .button-dropdown.button-dropdown-plain .button-dropdown-list .button-dropdown-divider { 1655 | border-color: #ededed; 1656 | } 1657 | 1658 | .button-dropdown.button-dropdown-plain .button-dropdown-list > li > a { 1659 | color: #1b9af7; 1660 | } 1661 | 1662 | .button-dropdown.button-dropdown-plain .button-dropdown-list > li > a:hover { 1663 | color: #088ef0; 1664 | background: #f2f2f2; 1665 | } 1666 | 1667 | .button-dropdown.button-dropdown-inverse .button-dropdown-list { 1668 | background: rgba(34, 34, 34, 0.95); 1669 | border-color: #090909; 1670 | } 1671 | 1672 | .button-dropdown.button-dropdown-inverse .button-dropdown-list .button-dropdown-divider { 1673 | border-color: #101010; 1674 | } 1675 | 1676 | .button-dropdown.button-dropdown-inverse .button-dropdown-list > li > a { 1677 | color: #eeeeee; 1678 | } 1679 | 1680 | .button-dropdown.button-dropdown-inverse .button-dropdown-list > li > a:hover { 1681 | color: #e1e1e1; 1682 | background: #151515; 1683 | } 1684 | 1685 | .button-dropdown.button-dropdown-action .button-dropdown-list { 1686 | background: rgba(165, 222, 55, 0.95); 1687 | border-color: #8bc220; 1688 | } 1689 | 1690 | .button-dropdown.button-dropdown-action .button-dropdown-list .button-dropdown-divider { 1691 | border-color: #94cf22; 1692 | } 1693 | 1694 | .button-dropdown.button-dropdown-action .button-dropdown-list > li > a { 1695 | color: white; 1696 | } 1697 | 1698 | .button-dropdown.button-dropdown-action .button-dropdown-list > li > a:hover { 1699 | color: #f2f2f2; 1700 | background: #9ad824; 1701 | } 1702 | 1703 | .button-dropdown.button-dropdown-highlight .button-dropdown-list { 1704 | background: rgba(254, 174, 27, 0.95); 1705 | border-color: #e59501; 1706 | } 1707 | 1708 | .button-dropdown.button-dropdown-highlight .button-dropdown-list .button-dropdown-divider { 1709 | border-color: #f49f01; 1710 | } 1711 | 1712 | .button-dropdown.button-dropdown-highlight .button-dropdown-list > li > a { 1713 | color: white; 1714 | } 1715 | 1716 | .button-dropdown.button-dropdown-highlight .button-dropdown-list > li > a:hover { 1717 | color: #f2f2f2; 1718 | background: #fea502; 1719 | } 1720 | 1721 | .button-dropdown.button-dropdown-caution .button-dropdown-list { 1722 | background: rgba(255, 67, 81, 0.95); 1723 | border-color: #ff1022; 1724 | } 1725 | 1726 | .button-dropdown.button-dropdown-caution .button-dropdown-list .button-dropdown-divider { 1727 | border-color: #ff1f30; 1728 | } 1729 | 1730 | .button-dropdown.button-dropdown-caution .button-dropdown-list > li > a { 1731 | color: white; 1732 | } 1733 | 1734 | .button-dropdown.button-dropdown-caution .button-dropdown-list > li > a:hover { 1735 | color: #f2f2f2; 1736 | background: #ff2939; 1737 | } 1738 | 1739 | .button-dropdown.button-dropdown-royal .button-dropdown-list { 1740 | background: rgba(123, 114, 233, 0.95); 1741 | border-color: #5246e2; 1742 | } 1743 | 1744 | .button-dropdown.button-dropdown-royal .button-dropdown-list .button-dropdown-divider { 1745 | border-color: #5e53e4; 1746 | } 1747 | 1748 | .button-dropdown.button-dropdown-royal .button-dropdown-list > li > a { 1749 | color: white; 1750 | } 1751 | 1752 | .button-dropdown.button-dropdown-royal .button-dropdown-list > li > a:hover { 1753 | color: #f2f2f2; 1754 | background: #665ce6; 1755 | } 1756 | 1757 | /* 1758 | * Buton Groups 1759 | * 1760 | * A group of related buttons 1761 | * displayed edge to edge 1762 | */ 1763 | .button-group { 1764 | *zoom: 1; 1765 | position: relative; 1766 | display: inline-block; 1767 | } 1768 | 1769 | .button-group:after, .button-group:before { 1770 | content: '.'; 1771 | clear: both; 1772 | display: block; 1773 | overflow: hidden; 1774 | visibility: hidden; 1775 | font-size: 0; 1776 | line-height: 0; 1777 | width: 0; 1778 | height: 0; 1779 | } 1780 | 1781 | .button-group .button, 1782 | .button-group .button-dropdown { 1783 | float: left; 1784 | } 1785 | 1786 | .button-group .button:not(:first-child):not(:last-child), 1787 | .button-group .button-dropdown:not(:first-child):not(:last-child) { 1788 | border-radius: 0; 1789 | border-right: none; 1790 | } 1791 | 1792 | .button-group .button:first-child, 1793 | .button-group .button-dropdown:first-child { 1794 | border-top-right-radius: 0; 1795 | border-bottom-right-radius: 0; 1796 | border-right: none; 1797 | } 1798 | 1799 | .button-group .button:last-child, 1800 | .button-group .button-dropdown:last-child { 1801 | border-top-left-radius: 0; 1802 | border-bottom-left-radius: 0; 1803 | } 1804 | 1805 | /* 1806 | * Button Wrapper 1807 | * 1808 | * A wrap around effect to highlight 1809 | * the shape of the button and offer 1810 | * a subtle visual effect. 1811 | */ 1812 | .button-wrap { 1813 | border: 1px solid #e3e3e3; 1814 | display: inline-block; 1815 | padding: 9px; 1816 | background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(white)); 1817 | background: linear-gradient(#f2f2f2, white); 1818 | border-radius: 200px; 1819 | -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); 1820 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); 1821 | } 1822 | 1823 | /* 1824 | * Long Shadow Buttons 1825 | * 1826 | * A visual effect adding a flat shadow to the text of a button 1827 | */ 1828 | /* 1829 | * Long Shadow Function 1830 | * 1831 | * Loops $length times building a long shadow. Defaults downward right 1832 | */ 1833 | /* 1834 | * LONG SHADOW MIXIN 1835 | * 1836 | */ 1837 | /* 1838 | * Shadow Right 1839 | * 1840 | */ 1841 | .button-longshadow, 1842 | .button-longshadow-right { 1843 | overflow: hidden; 1844 | } 1845 | 1846 | .button-longshadow.button-primary, 1847 | .button-longshadow-right.button-primary { 1848 | text-shadow: 0px 0px #0880d7, 1px 1px #0880d7, 2px 2px #0880d7, 3px 3px #0880d7, 4px 4px #0880d7, 5px 5px #0880d7, 6px 6px #0880d7, 7px 7px #0880d7, 8px 8px #0880d7, 9px 9px #0880d7, 10px 10px #0880d7, 11px 11px #0880d7, 12px 12px #0880d7, 13px 13px #0880d7, 14px 14px #0880d7, 15px 15px #0880d7, 16px 16px #0880d7, 17px 17px #0880d7, 18px 18px #0880d7, 19px 19px #0880d7, 20px 20px #0880d7, 21px 21px #0880d7, 22px 22px #0880d7, 23px 23px #0880d7, 24px 24px #0880d7, 25px 25px #0880d7, 26px 26px #0880d7, 27px 27px #0880d7, 28px 28px #0880d7, 29px 29px #0880d7, 30px 30px #0880d7, 31px 31px #0880d7, 32px 32px #0880d7, 33px 33px #0880d7, 34px 34px #0880d7, 35px 35px #0880d7, 36px 36px #0880d7, 37px 37px #0880d7, 38px 38px #0880d7, 39px 39px #0880d7, 40px 40px #0880d7, 41px 41px #0880d7, 42px 42px #0880d7, 43px 43px #0880d7, 44px 44px #0880d7, 45px 45px #0880d7, 46px 46px #0880d7, 47px 47px #0880d7, 48px 48px #0880d7, 49px 49px #0880d7, 50px 50px #0880d7, 51px 51px #0880d7, 52px 52px #0880d7, 53px 53px #0880d7, 54px 54px #0880d7, 55px 55px #0880d7, 56px 56px #0880d7, 57px 57px #0880d7, 58px 58px #0880d7, 59px 59px #0880d7, 60px 60px #0880d7, 61px 61px #0880d7, 62px 62px #0880d7, 63px 63px #0880d7, 64px 64px #0880d7, 65px 65px #0880d7, 66px 66px #0880d7, 67px 67px #0880d7, 68px 68px #0880d7, 69px 69px #0880d7, 70px 70px #0880d7, 71px 71px #0880d7, 72px 72px #0880d7, 73px 73px #0880d7, 74px 74px #0880d7, 75px 75px #0880d7, 76px 76px #0880d7, 77px 77px #0880d7, 78px 78px #0880d7, 79px 79px #0880d7, 80px 80px #0880d7, 81px 81px #0880d7, 82px 82px #0880d7, 83px 83px #0880d7, 84px 84px #0880d7, 85px 85px #0880d7; 1849 | } 1850 | 1851 | .button-longshadow.button-primary:active, .button-longshadow.button-primary.active, .button-longshadow.button-primary.is-active, 1852 | .button-longshadow-right.button-primary:active, 1853 | .button-longshadow-right.button-primary.active, 1854 | .button-longshadow-right.button-primary.is-active { 1855 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1856 | } 1857 | 1858 | .button-longshadow.button-plain, 1859 | .button-longshadow-right.button-plain { 1860 | text-shadow: 0px 0px #e6e6e6, 1px 1px #e6e6e6, 2px 2px #e6e6e6, 3px 3px #e6e6e6, 4px 4px #e6e6e6, 5px 5px #e6e6e6, 6px 6px #e6e6e6, 7px 7px #e6e6e6, 8px 8px #e6e6e6, 9px 9px #e6e6e6, 10px 10px #e6e6e6, 11px 11px #e6e6e6, 12px 12px #e6e6e6, 13px 13px #e6e6e6, 14px 14px #e6e6e6, 15px 15px #e6e6e6, 16px 16px #e6e6e6, 17px 17px #e6e6e6, 18px 18px #e6e6e6, 19px 19px #e6e6e6, 20px 20px #e6e6e6, 21px 21px #e6e6e6, 22px 22px #e6e6e6, 23px 23px #e6e6e6, 24px 24px #e6e6e6, 25px 25px #e6e6e6, 26px 26px #e6e6e6, 27px 27px #e6e6e6, 28px 28px #e6e6e6, 29px 29px #e6e6e6, 30px 30px #e6e6e6, 31px 31px #e6e6e6, 32px 32px #e6e6e6, 33px 33px #e6e6e6, 34px 34px #e6e6e6, 35px 35px #e6e6e6, 36px 36px #e6e6e6, 37px 37px #e6e6e6, 38px 38px #e6e6e6, 39px 39px #e6e6e6, 40px 40px #e6e6e6, 41px 41px #e6e6e6, 42px 42px #e6e6e6, 43px 43px #e6e6e6, 44px 44px #e6e6e6, 45px 45px #e6e6e6, 46px 46px #e6e6e6, 47px 47px #e6e6e6, 48px 48px #e6e6e6, 49px 49px #e6e6e6, 50px 50px #e6e6e6, 51px 51px #e6e6e6, 52px 52px #e6e6e6, 53px 53px #e6e6e6, 54px 54px #e6e6e6, 55px 55px #e6e6e6, 56px 56px #e6e6e6, 57px 57px #e6e6e6, 58px 58px #e6e6e6, 59px 59px #e6e6e6, 60px 60px #e6e6e6, 61px 61px #e6e6e6, 62px 62px #e6e6e6, 63px 63px #e6e6e6, 64px 64px #e6e6e6, 65px 65px #e6e6e6, 66px 66px #e6e6e6, 67px 67px #e6e6e6, 68px 68px #e6e6e6, 69px 69px #e6e6e6, 70px 70px #e6e6e6, 71px 71px #e6e6e6, 72px 72px #e6e6e6, 73px 73px #e6e6e6, 74px 74px #e6e6e6, 75px 75px #e6e6e6, 76px 76px #e6e6e6, 77px 77px #e6e6e6, 78px 78px #e6e6e6, 79px 79px #e6e6e6, 80px 80px #e6e6e6, 81px 81px #e6e6e6, 82px 82px #e6e6e6, 83px 83px #e6e6e6, 84px 84px #e6e6e6, 85px 85px #e6e6e6; 1861 | } 1862 | 1863 | .button-longshadow.button-plain:active, .button-longshadow.button-plain.active, .button-longshadow.button-plain.is-active, 1864 | .button-longshadow-right.button-plain:active, 1865 | .button-longshadow-right.button-plain.active, 1866 | .button-longshadow-right.button-plain.is-active { 1867 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1868 | } 1869 | 1870 | .button-longshadow.button-inverse, 1871 | .button-longshadow-right.button-inverse { 1872 | text-shadow: 0px 0px #090909, 1px 1px #090909, 2px 2px #090909, 3px 3px #090909, 4px 4px #090909, 5px 5px #090909, 6px 6px #090909, 7px 7px #090909, 8px 8px #090909, 9px 9px #090909, 10px 10px #090909, 11px 11px #090909, 12px 12px #090909, 13px 13px #090909, 14px 14px #090909, 15px 15px #090909, 16px 16px #090909, 17px 17px #090909, 18px 18px #090909, 19px 19px #090909, 20px 20px #090909, 21px 21px #090909, 22px 22px #090909, 23px 23px #090909, 24px 24px #090909, 25px 25px #090909, 26px 26px #090909, 27px 27px #090909, 28px 28px #090909, 29px 29px #090909, 30px 30px #090909, 31px 31px #090909, 32px 32px #090909, 33px 33px #090909, 34px 34px #090909, 35px 35px #090909, 36px 36px #090909, 37px 37px #090909, 38px 38px #090909, 39px 39px #090909, 40px 40px #090909, 41px 41px #090909, 42px 42px #090909, 43px 43px #090909, 44px 44px #090909, 45px 45px #090909, 46px 46px #090909, 47px 47px #090909, 48px 48px #090909, 49px 49px #090909, 50px 50px #090909, 51px 51px #090909, 52px 52px #090909, 53px 53px #090909, 54px 54px #090909, 55px 55px #090909, 56px 56px #090909, 57px 57px #090909, 58px 58px #090909, 59px 59px #090909, 60px 60px #090909, 61px 61px #090909, 62px 62px #090909, 63px 63px #090909, 64px 64px #090909, 65px 65px #090909, 66px 66px #090909, 67px 67px #090909, 68px 68px #090909, 69px 69px #090909, 70px 70px #090909, 71px 71px #090909, 72px 72px #090909, 73px 73px #090909, 74px 74px #090909, 75px 75px #090909, 76px 76px #090909, 77px 77px #090909, 78px 78px #090909, 79px 79px #090909, 80px 80px #090909, 81px 81px #090909, 82px 82px #090909, 83px 83px #090909, 84px 84px #090909, 85px 85px #090909; 1873 | } 1874 | 1875 | .button-longshadow.button-inverse:active, .button-longshadow.button-inverse.active, .button-longshadow.button-inverse.is-active, 1876 | .button-longshadow-right.button-inverse:active, 1877 | .button-longshadow-right.button-inverse.active, 1878 | .button-longshadow-right.button-inverse.is-active { 1879 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1880 | } 1881 | 1882 | .button-longshadow.button-action, 1883 | .button-longshadow-right.button-action { 1884 | text-shadow: 0px 0px #8bc220, 1px 1px #8bc220, 2px 2px #8bc220, 3px 3px #8bc220, 4px 4px #8bc220, 5px 5px #8bc220, 6px 6px #8bc220, 7px 7px #8bc220, 8px 8px #8bc220, 9px 9px #8bc220, 10px 10px #8bc220, 11px 11px #8bc220, 12px 12px #8bc220, 13px 13px #8bc220, 14px 14px #8bc220, 15px 15px #8bc220, 16px 16px #8bc220, 17px 17px #8bc220, 18px 18px #8bc220, 19px 19px #8bc220, 20px 20px #8bc220, 21px 21px #8bc220, 22px 22px #8bc220, 23px 23px #8bc220, 24px 24px #8bc220, 25px 25px #8bc220, 26px 26px #8bc220, 27px 27px #8bc220, 28px 28px #8bc220, 29px 29px #8bc220, 30px 30px #8bc220, 31px 31px #8bc220, 32px 32px #8bc220, 33px 33px #8bc220, 34px 34px #8bc220, 35px 35px #8bc220, 36px 36px #8bc220, 37px 37px #8bc220, 38px 38px #8bc220, 39px 39px #8bc220, 40px 40px #8bc220, 41px 41px #8bc220, 42px 42px #8bc220, 43px 43px #8bc220, 44px 44px #8bc220, 45px 45px #8bc220, 46px 46px #8bc220, 47px 47px #8bc220, 48px 48px #8bc220, 49px 49px #8bc220, 50px 50px #8bc220, 51px 51px #8bc220, 52px 52px #8bc220, 53px 53px #8bc220, 54px 54px #8bc220, 55px 55px #8bc220, 56px 56px #8bc220, 57px 57px #8bc220, 58px 58px #8bc220, 59px 59px #8bc220, 60px 60px #8bc220, 61px 61px #8bc220, 62px 62px #8bc220, 63px 63px #8bc220, 64px 64px #8bc220, 65px 65px #8bc220, 66px 66px #8bc220, 67px 67px #8bc220, 68px 68px #8bc220, 69px 69px #8bc220, 70px 70px #8bc220, 71px 71px #8bc220, 72px 72px #8bc220, 73px 73px #8bc220, 74px 74px #8bc220, 75px 75px #8bc220, 76px 76px #8bc220, 77px 77px #8bc220, 78px 78px #8bc220, 79px 79px #8bc220, 80px 80px #8bc220, 81px 81px #8bc220, 82px 82px #8bc220, 83px 83px #8bc220, 84px 84px #8bc220, 85px 85px #8bc220; 1885 | } 1886 | 1887 | .button-longshadow.button-action:active, .button-longshadow.button-action.active, .button-longshadow.button-action.is-active, 1888 | .button-longshadow-right.button-action:active, 1889 | .button-longshadow-right.button-action.active, 1890 | .button-longshadow-right.button-action.is-active { 1891 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1892 | } 1893 | 1894 | .button-longshadow.button-highlight, 1895 | .button-longshadow-right.button-highlight { 1896 | text-shadow: 0px 0px #e59501, 1px 1px #e59501, 2px 2px #e59501, 3px 3px #e59501, 4px 4px #e59501, 5px 5px #e59501, 6px 6px #e59501, 7px 7px #e59501, 8px 8px #e59501, 9px 9px #e59501, 10px 10px #e59501, 11px 11px #e59501, 12px 12px #e59501, 13px 13px #e59501, 14px 14px #e59501, 15px 15px #e59501, 16px 16px #e59501, 17px 17px #e59501, 18px 18px #e59501, 19px 19px #e59501, 20px 20px #e59501, 21px 21px #e59501, 22px 22px #e59501, 23px 23px #e59501, 24px 24px #e59501, 25px 25px #e59501, 26px 26px #e59501, 27px 27px #e59501, 28px 28px #e59501, 29px 29px #e59501, 30px 30px #e59501, 31px 31px #e59501, 32px 32px #e59501, 33px 33px #e59501, 34px 34px #e59501, 35px 35px #e59501, 36px 36px #e59501, 37px 37px #e59501, 38px 38px #e59501, 39px 39px #e59501, 40px 40px #e59501, 41px 41px #e59501, 42px 42px #e59501, 43px 43px #e59501, 44px 44px #e59501, 45px 45px #e59501, 46px 46px #e59501, 47px 47px #e59501, 48px 48px #e59501, 49px 49px #e59501, 50px 50px #e59501, 51px 51px #e59501, 52px 52px #e59501, 53px 53px #e59501, 54px 54px #e59501, 55px 55px #e59501, 56px 56px #e59501, 57px 57px #e59501, 58px 58px #e59501, 59px 59px #e59501, 60px 60px #e59501, 61px 61px #e59501, 62px 62px #e59501, 63px 63px #e59501, 64px 64px #e59501, 65px 65px #e59501, 66px 66px #e59501, 67px 67px #e59501, 68px 68px #e59501, 69px 69px #e59501, 70px 70px #e59501, 71px 71px #e59501, 72px 72px #e59501, 73px 73px #e59501, 74px 74px #e59501, 75px 75px #e59501, 76px 76px #e59501, 77px 77px #e59501, 78px 78px #e59501, 79px 79px #e59501, 80px 80px #e59501, 81px 81px #e59501, 82px 82px #e59501, 83px 83px #e59501, 84px 84px #e59501, 85px 85px #e59501; 1897 | } 1898 | 1899 | .button-longshadow.button-highlight:active, .button-longshadow.button-highlight.active, .button-longshadow.button-highlight.is-active, 1900 | .button-longshadow-right.button-highlight:active, 1901 | .button-longshadow-right.button-highlight.active, 1902 | .button-longshadow-right.button-highlight.is-active { 1903 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1904 | } 1905 | 1906 | .button-longshadow.button-caution, 1907 | .button-longshadow-right.button-caution { 1908 | text-shadow: 0px 0px #ff1022, 1px 1px #ff1022, 2px 2px #ff1022, 3px 3px #ff1022, 4px 4px #ff1022, 5px 5px #ff1022, 6px 6px #ff1022, 7px 7px #ff1022, 8px 8px #ff1022, 9px 9px #ff1022, 10px 10px #ff1022, 11px 11px #ff1022, 12px 12px #ff1022, 13px 13px #ff1022, 14px 14px #ff1022, 15px 15px #ff1022, 16px 16px #ff1022, 17px 17px #ff1022, 18px 18px #ff1022, 19px 19px #ff1022, 20px 20px #ff1022, 21px 21px #ff1022, 22px 22px #ff1022, 23px 23px #ff1022, 24px 24px #ff1022, 25px 25px #ff1022, 26px 26px #ff1022, 27px 27px #ff1022, 28px 28px #ff1022, 29px 29px #ff1022, 30px 30px #ff1022, 31px 31px #ff1022, 32px 32px #ff1022, 33px 33px #ff1022, 34px 34px #ff1022, 35px 35px #ff1022, 36px 36px #ff1022, 37px 37px #ff1022, 38px 38px #ff1022, 39px 39px #ff1022, 40px 40px #ff1022, 41px 41px #ff1022, 42px 42px #ff1022, 43px 43px #ff1022, 44px 44px #ff1022, 45px 45px #ff1022, 46px 46px #ff1022, 47px 47px #ff1022, 48px 48px #ff1022, 49px 49px #ff1022, 50px 50px #ff1022, 51px 51px #ff1022, 52px 52px #ff1022, 53px 53px #ff1022, 54px 54px #ff1022, 55px 55px #ff1022, 56px 56px #ff1022, 57px 57px #ff1022, 58px 58px #ff1022, 59px 59px #ff1022, 60px 60px #ff1022, 61px 61px #ff1022, 62px 62px #ff1022, 63px 63px #ff1022, 64px 64px #ff1022, 65px 65px #ff1022, 66px 66px #ff1022, 67px 67px #ff1022, 68px 68px #ff1022, 69px 69px #ff1022, 70px 70px #ff1022, 71px 71px #ff1022, 72px 72px #ff1022, 73px 73px #ff1022, 74px 74px #ff1022, 75px 75px #ff1022, 76px 76px #ff1022, 77px 77px #ff1022, 78px 78px #ff1022, 79px 79px #ff1022, 80px 80px #ff1022, 81px 81px #ff1022, 82px 82px #ff1022, 83px 83px #ff1022, 84px 84px #ff1022, 85px 85px #ff1022; 1909 | } 1910 | 1911 | .button-longshadow.button-caution:active, .button-longshadow.button-caution.active, .button-longshadow.button-caution.is-active, 1912 | .button-longshadow-right.button-caution:active, 1913 | .button-longshadow-right.button-caution.active, 1914 | .button-longshadow-right.button-caution.is-active { 1915 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1916 | } 1917 | 1918 | .button-longshadow.button-royal, 1919 | .button-longshadow-right.button-royal { 1920 | text-shadow: 0px 0px #5246e2, 1px 1px #5246e2, 2px 2px #5246e2, 3px 3px #5246e2, 4px 4px #5246e2, 5px 5px #5246e2, 6px 6px #5246e2, 7px 7px #5246e2, 8px 8px #5246e2, 9px 9px #5246e2, 10px 10px #5246e2, 11px 11px #5246e2, 12px 12px #5246e2, 13px 13px #5246e2, 14px 14px #5246e2, 15px 15px #5246e2, 16px 16px #5246e2, 17px 17px #5246e2, 18px 18px #5246e2, 19px 19px #5246e2, 20px 20px #5246e2, 21px 21px #5246e2, 22px 22px #5246e2, 23px 23px #5246e2, 24px 24px #5246e2, 25px 25px #5246e2, 26px 26px #5246e2, 27px 27px #5246e2, 28px 28px #5246e2, 29px 29px #5246e2, 30px 30px #5246e2, 31px 31px #5246e2, 32px 32px #5246e2, 33px 33px #5246e2, 34px 34px #5246e2, 35px 35px #5246e2, 36px 36px #5246e2, 37px 37px #5246e2, 38px 38px #5246e2, 39px 39px #5246e2, 40px 40px #5246e2, 41px 41px #5246e2, 42px 42px #5246e2, 43px 43px #5246e2, 44px 44px #5246e2, 45px 45px #5246e2, 46px 46px #5246e2, 47px 47px #5246e2, 48px 48px #5246e2, 49px 49px #5246e2, 50px 50px #5246e2, 51px 51px #5246e2, 52px 52px #5246e2, 53px 53px #5246e2, 54px 54px #5246e2, 55px 55px #5246e2, 56px 56px #5246e2, 57px 57px #5246e2, 58px 58px #5246e2, 59px 59px #5246e2, 60px 60px #5246e2, 61px 61px #5246e2, 62px 62px #5246e2, 63px 63px #5246e2, 64px 64px #5246e2, 65px 65px #5246e2, 66px 66px #5246e2, 67px 67px #5246e2, 68px 68px #5246e2, 69px 69px #5246e2, 70px 70px #5246e2, 71px 71px #5246e2, 72px 72px #5246e2, 73px 73px #5246e2, 74px 74px #5246e2, 75px 75px #5246e2, 76px 76px #5246e2, 77px 77px #5246e2, 78px 78px #5246e2, 79px 79px #5246e2, 80px 80px #5246e2, 81px 81px #5246e2, 82px 82px #5246e2, 83px 83px #5246e2, 84px 84px #5246e2, 85px 85px #5246e2; 1921 | } 1922 | 1923 | .button-longshadow.button-royal:active, .button-longshadow.button-royal.active, .button-longshadow.button-royal.is-active, 1924 | .button-longshadow-right.button-royal:active, 1925 | .button-longshadow-right.button-royal.active, 1926 | .button-longshadow-right.button-royal.is-active { 1927 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1928 | } 1929 | 1930 | /* 1931 | * Shadow Left 1932 | * 1933 | */ 1934 | .button-longshadow-left { 1935 | overflow: hidden; 1936 | } 1937 | 1938 | .button-longshadow-left.button-primary { 1939 | text-shadow: 0px 0px #0880d7, -1px 1px #0880d7, -2px 2px #0880d7, -3px 3px #0880d7, -4px 4px #0880d7, -5px 5px #0880d7, -6px 6px #0880d7, -7px 7px #0880d7, -8px 8px #0880d7, -9px 9px #0880d7, -10px 10px #0880d7, -11px 11px #0880d7, -12px 12px #0880d7, -13px 13px #0880d7, -14px 14px #0880d7, -15px 15px #0880d7, -16px 16px #0880d7, -17px 17px #0880d7, -18px 18px #0880d7, -19px 19px #0880d7, -20px 20px #0880d7, -21px 21px #0880d7, -22px 22px #0880d7, -23px 23px #0880d7, -24px 24px #0880d7, -25px 25px #0880d7, -26px 26px #0880d7, -27px 27px #0880d7, -28px 28px #0880d7, -29px 29px #0880d7, -30px 30px #0880d7, -31px 31px #0880d7, -32px 32px #0880d7, -33px 33px #0880d7, -34px 34px #0880d7, -35px 35px #0880d7, -36px 36px #0880d7, -37px 37px #0880d7, -38px 38px #0880d7, -39px 39px #0880d7, -40px 40px #0880d7, -41px 41px #0880d7, -42px 42px #0880d7, -43px 43px #0880d7, -44px 44px #0880d7, -45px 45px #0880d7, -46px 46px #0880d7, -47px 47px #0880d7, -48px 48px #0880d7, -49px 49px #0880d7, -50px 50px #0880d7, -51px 51px #0880d7, -52px 52px #0880d7, -53px 53px #0880d7, -54px 54px #0880d7, -55px 55px #0880d7, -56px 56px #0880d7, -57px 57px #0880d7, -58px 58px #0880d7, -59px 59px #0880d7, -60px 60px #0880d7, -61px 61px #0880d7, -62px 62px #0880d7, -63px 63px #0880d7, -64px 64px #0880d7, -65px 65px #0880d7, -66px 66px #0880d7, -67px 67px #0880d7, -68px 68px #0880d7, -69px 69px #0880d7, -70px 70px #0880d7, -71px 71px #0880d7, -72px 72px #0880d7, -73px 73px #0880d7, -74px 74px #0880d7, -75px 75px #0880d7, -76px 76px #0880d7, -77px 77px #0880d7, -78px 78px #0880d7, -79px 79px #0880d7, -80px 80px #0880d7, -81px 81px #0880d7, -82px 82px #0880d7, -83px 83px #0880d7, -84px 84px #0880d7, -85px 85px #0880d7; 1940 | } 1941 | 1942 | .button-longshadow-left.button-primary:active, .button-longshadow-left.button-primary.active, .button-longshadow-left.button-primary.is-active { 1943 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1944 | } 1945 | 1946 | .button-longshadow-left.button-plain { 1947 | text-shadow: 0px 0px #e6e6e6, -1px 1px #e6e6e6, -2px 2px #e6e6e6, -3px 3px #e6e6e6, -4px 4px #e6e6e6, -5px 5px #e6e6e6, -6px 6px #e6e6e6, -7px 7px #e6e6e6, -8px 8px #e6e6e6, -9px 9px #e6e6e6, -10px 10px #e6e6e6, -11px 11px #e6e6e6, -12px 12px #e6e6e6, -13px 13px #e6e6e6, -14px 14px #e6e6e6, -15px 15px #e6e6e6, -16px 16px #e6e6e6, -17px 17px #e6e6e6, -18px 18px #e6e6e6, -19px 19px #e6e6e6, -20px 20px #e6e6e6, -21px 21px #e6e6e6, -22px 22px #e6e6e6, -23px 23px #e6e6e6, -24px 24px #e6e6e6, -25px 25px #e6e6e6, -26px 26px #e6e6e6, -27px 27px #e6e6e6, -28px 28px #e6e6e6, -29px 29px #e6e6e6, -30px 30px #e6e6e6, -31px 31px #e6e6e6, -32px 32px #e6e6e6, -33px 33px #e6e6e6, -34px 34px #e6e6e6, -35px 35px #e6e6e6, -36px 36px #e6e6e6, -37px 37px #e6e6e6, -38px 38px #e6e6e6, -39px 39px #e6e6e6, -40px 40px #e6e6e6, -41px 41px #e6e6e6, -42px 42px #e6e6e6, -43px 43px #e6e6e6, -44px 44px #e6e6e6, -45px 45px #e6e6e6, -46px 46px #e6e6e6, -47px 47px #e6e6e6, -48px 48px #e6e6e6, -49px 49px #e6e6e6, -50px 50px #e6e6e6, -51px 51px #e6e6e6, -52px 52px #e6e6e6, -53px 53px #e6e6e6, -54px 54px #e6e6e6, -55px 55px #e6e6e6, -56px 56px #e6e6e6, -57px 57px #e6e6e6, -58px 58px #e6e6e6, -59px 59px #e6e6e6, -60px 60px #e6e6e6, -61px 61px #e6e6e6, -62px 62px #e6e6e6, -63px 63px #e6e6e6, -64px 64px #e6e6e6, -65px 65px #e6e6e6, -66px 66px #e6e6e6, -67px 67px #e6e6e6, -68px 68px #e6e6e6, -69px 69px #e6e6e6, -70px 70px #e6e6e6, -71px 71px #e6e6e6, -72px 72px #e6e6e6, -73px 73px #e6e6e6, -74px 74px #e6e6e6, -75px 75px #e6e6e6, -76px 76px #e6e6e6, -77px 77px #e6e6e6, -78px 78px #e6e6e6, -79px 79px #e6e6e6, -80px 80px #e6e6e6, -81px 81px #e6e6e6, -82px 82px #e6e6e6, -83px 83px #e6e6e6, -84px 84px #e6e6e6, -85px 85px #e6e6e6; 1948 | } 1949 | 1950 | .button-longshadow-left.button-plain:active, .button-longshadow-left.button-plain.active, .button-longshadow-left.button-plain.is-active { 1951 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1952 | } 1953 | 1954 | .button-longshadow-left.button-inverse { 1955 | text-shadow: 0px 0px #090909, -1px 1px #090909, -2px 2px #090909, -3px 3px #090909, -4px 4px #090909, -5px 5px #090909, -6px 6px #090909, -7px 7px #090909, -8px 8px #090909, -9px 9px #090909, -10px 10px #090909, -11px 11px #090909, -12px 12px #090909, -13px 13px #090909, -14px 14px #090909, -15px 15px #090909, -16px 16px #090909, -17px 17px #090909, -18px 18px #090909, -19px 19px #090909, -20px 20px #090909, -21px 21px #090909, -22px 22px #090909, -23px 23px #090909, -24px 24px #090909, -25px 25px #090909, -26px 26px #090909, -27px 27px #090909, -28px 28px #090909, -29px 29px #090909, -30px 30px #090909, -31px 31px #090909, -32px 32px #090909, -33px 33px #090909, -34px 34px #090909, -35px 35px #090909, -36px 36px #090909, -37px 37px #090909, -38px 38px #090909, -39px 39px #090909, -40px 40px #090909, -41px 41px #090909, -42px 42px #090909, -43px 43px #090909, -44px 44px #090909, -45px 45px #090909, -46px 46px #090909, -47px 47px #090909, -48px 48px #090909, -49px 49px #090909, -50px 50px #090909, -51px 51px #090909, -52px 52px #090909, -53px 53px #090909, -54px 54px #090909, -55px 55px #090909, -56px 56px #090909, -57px 57px #090909, -58px 58px #090909, -59px 59px #090909, -60px 60px #090909, -61px 61px #090909, -62px 62px #090909, -63px 63px #090909, -64px 64px #090909, -65px 65px #090909, -66px 66px #090909, -67px 67px #090909, -68px 68px #090909, -69px 69px #090909, -70px 70px #090909, -71px 71px #090909, -72px 72px #090909, -73px 73px #090909, -74px 74px #090909, -75px 75px #090909, -76px 76px #090909, -77px 77px #090909, -78px 78px #090909, -79px 79px #090909, -80px 80px #090909, -81px 81px #090909, -82px 82px #090909, -83px 83px #090909, -84px 84px #090909, -85px 85px #090909; 1956 | } 1957 | 1958 | .button-longshadow-left.button-inverse:active, .button-longshadow-left.button-inverse.active, .button-longshadow-left.button-inverse.is-active { 1959 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1960 | } 1961 | 1962 | .button-longshadow-left.button-action { 1963 | text-shadow: 0px 0px #8bc220, -1px 1px #8bc220, -2px 2px #8bc220, -3px 3px #8bc220, -4px 4px #8bc220, -5px 5px #8bc220, -6px 6px #8bc220, -7px 7px #8bc220, -8px 8px #8bc220, -9px 9px #8bc220, -10px 10px #8bc220, -11px 11px #8bc220, -12px 12px #8bc220, -13px 13px #8bc220, -14px 14px #8bc220, -15px 15px #8bc220, -16px 16px #8bc220, -17px 17px #8bc220, -18px 18px #8bc220, -19px 19px #8bc220, -20px 20px #8bc220, -21px 21px #8bc220, -22px 22px #8bc220, -23px 23px #8bc220, -24px 24px #8bc220, -25px 25px #8bc220, -26px 26px #8bc220, -27px 27px #8bc220, -28px 28px #8bc220, -29px 29px #8bc220, -30px 30px #8bc220, -31px 31px #8bc220, -32px 32px #8bc220, -33px 33px #8bc220, -34px 34px #8bc220, -35px 35px #8bc220, -36px 36px #8bc220, -37px 37px #8bc220, -38px 38px #8bc220, -39px 39px #8bc220, -40px 40px #8bc220, -41px 41px #8bc220, -42px 42px #8bc220, -43px 43px #8bc220, -44px 44px #8bc220, -45px 45px #8bc220, -46px 46px #8bc220, -47px 47px #8bc220, -48px 48px #8bc220, -49px 49px #8bc220, -50px 50px #8bc220, -51px 51px #8bc220, -52px 52px #8bc220, -53px 53px #8bc220, -54px 54px #8bc220, -55px 55px #8bc220, -56px 56px #8bc220, -57px 57px #8bc220, -58px 58px #8bc220, -59px 59px #8bc220, -60px 60px #8bc220, -61px 61px #8bc220, -62px 62px #8bc220, -63px 63px #8bc220, -64px 64px #8bc220, -65px 65px #8bc220, -66px 66px #8bc220, -67px 67px #8bc220, -68px 68px #8bc220, -69px 69px #8bc220, -70px 70px #8bc220, -71px 71px #8bc220, -72px 72px #8bc220, -73px 73px #8bc220, -74px 74px #8bc220, -75px 75px #8bc220, -76px 76px #8bc220, -77px 77px #8bc220, -78px 78px #8bc220, -79px 79px #8bc220, -80px 80px #8bc220, -81px 81px #8bc220, -82px 82px #8bc220, -83px 83px #8bc220, -84px 84px #8bc220, -85px 85px #8bc220; 1964 | } 1965 | 1966 | .button-longshadow-left.button-action:active, .button-longshadow-left.button-action.active, .button-longshadow-left.button-action.is-active { 1967 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1968 | } 1969 | 1970 | .button-longshadow-left.button-highlight { 1971 | text-shadow: 0px 0px #e59501, -1px 1px #e59501, -2px 2px #e59501, -3px 3px #e59501, -4px 4px #e59501, -5px 5px #e59501, -6px 6px #e59501, -7px 7px #e59501, -8px 8px #e59501, -9px 9px #e59501, -10px 10px #e59501, -11px 11px #e59501, -12px 12px #e59501, -13px 13px #e59501, -14px 14px #e59501, -15px 15px #e59501, -16px 16px #e59501, -17px 17px #e59501, -18px 18px #e59501, -19px 19px #e59501, -20px 20px #e59501, -21px 21px #e59501, -22px 22px #e59501, -23px 23px #e59501, -24px 24px #e59501, -25px 25px #e59501, -26px 26px #e59501, -27px 27px #e59501, -28px 28px #e59501, -29px 29px #e59501, -30px 30px #e59501, -31px 31px #e59501, -32px 32px #e59501, -33px 33px #e59501, -34px 34px #e59501, -35px 35px #e59501, -36px 36px #e59501, -37px 37px #e59501, -38px 38px #e59501, -39px 39px #e59501, -40px 40px #e59501, -41px 41px #e59501, -42px 42px #e59501, -43px 43px #e59501, -44px 44px #e59501, -45px 45px #e59501, -46px 46px #e59501, -47px 47px #e59501, -48px 48px #e59501, -49px 49px #e59501, -50px 50px #e59501, -51px 51px #e59501, -52px 52px #e59501, -53px 53px #e59501, -54px 54px #e59501, -55px 55px #e59501, -56px 56px #e59501, -57px 57px #e59501, -58px 58px #e59501, -59px 59px #e59501, -60px 60px #e59501, -61px 61px #e59501, -62px 62px #e59501, -63px 63px #e59501, -64px 64px #e59501, -65px 65px #e59501, -66px 66px #e59501, -67px 67px #e59501, -68px 68px #e59501, -69px 69px #e59501, -70px 70px #e59501, -71px 71px #e59501, -72px 72px #e59501, -73px 73px #e59501, -74px 74px #e59501, -75px 75px #e59501, -76px 76px #e59501, -77px 77px #e59501, -78px 78px #e59501, -79px 79px #e59501, -80px 80px #e59501, -81px 81px #e59501, -82px 82px #e59501, -83px 83px #e59501, -84px 84px #e59501, -85px 85px #e59501; 1972 | } 1973 | 1974 | .button-longshadow-left.button-highlight:active, .button-longshadow-left.button-highlight.active, .button-longshadow-left.button-highlight.is-active { 1975 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1976 | } 1977 | 1978 | .button-longshadow-left.button-caution { 1979 | text-shadow: 0px 0px #ff1022, -1px 1px #ff1022, -2px 2px #ff1022, -3px 3px #ff1022, -4px 4px #ff1022, -5px 5px #ff1022, -6px 6px #ff1022, -7px 7px #ff1022, -8px 8px #ff1022, -9px 9px #ff1022, -10px 10px #ff1022, -11px 11px #ff1022, -12px 12px #ff1022, -13px 13px #ff1022, -14px 14px #ff1022, -15px 15px #ff1022, -16px 16px #ff1022, -17px 17px #ff1022, -18px 18px #ff1022, -19px 19px #ff1022, -20px 20px #ff1022, -21px 21px #ff1022, -22px 22px #ff1022, -23px 23px #ff1022, -24px 24px #ff1022, -25px 25px #ff1022, -26px 26px #ff1022, -27px 27px #ff1022, -28px 28px #ff1022, -29px 29px #ff1022, -30px 30px #ff1022, -31px 31px #ff1022, -32px 32px #ff1022, -33px 33px #ff1022, -34px 34px #ff1022, -35px 35px #ff1022, -36px 36px #ff1022, -37px 37px #ff1022, -38px 38px #ff1022, -39px 39px #ff1022, -40px 40px #ff1022, -41px 41px #ff1022, -42px 42px #ff1022, -43px 43px #ff1022, -44px 44px #ff1022, -45px 45px #ff1022, -46px 46px #ff1022, -47px 47px #ff1022, -48px 48px #ff1022, -49px 49px #ff1022, -50px 50px #ff1022, -51px 51px #ff1022, -52px 52px #ff1022, -53px 53px #ff1022, -54px 54px #ff1022, -55px 55px #ff1022, -56px 56px #ff1022, -57px 57px #ff1022, -58px 58px #ff1022, -59px 59px #ff1022, -60px 60px #ff1022, -61px 61px #ff1022, -62px 62px #ff1022, -63px 63px #ff1022, -64px 64px #ff1022, -65px 65px #ff1022, -66px 66px #ff1022, -67px 67px #ff1022, -68px 68px #ff1022, -69px 69px #ff1022, -70px 70px #ff1022, -71px 71px #ff1022, -72px 72px #ff1022, -73px 73px #ff1022, -74px 74px #ff1022, -75px 75px #ff1022, -76px 76px #ff1022, -77px 77px #ff1022, -78px 78px #ff1022, -79px 79px #ff1022, -80px 80px #ff1022, -81px 81px #ff1022, -82px 82px #ff1022, -83px 83px #ff1022, -84px 84px #ff1022, -85px 85px #ff1022; 1980 | } 1981 | 1982 | .button-longshadow-left.button-caution:active, .button-longshadow-left.button-caution.active, .button-longshadow-left.button-caution.is-active { 1983 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1984 | } 1985 | 1986 | .button-longshadow-left.button-royal { 1987 | text-shadow: 0px 0px #5246e2, -1px 1px #5246e2, -2px 2px #5246e2, -3px 3px #5246e2, -4px 4px #5246e2, -5px 5px #5246e2, -6px 6px #5246e2, -7px 7px #5246e2, -8px 8px #5246e2, -9px 9px #5246e2, -10px 10px #5246e2, -11px 11px #5246e2, -12px 12px #5246e2, -13px 13px #5246e2, -14px 14px #5246e2, -15px 15px #5246e2, -16px 16px #5246e2, -17px 17px #5246e2, -18px 18px #5246e2, -19px 19px #5246e2, -20px 20px #5246e2, -21px 21px #5246e2, -22px 22px #5246e2, -23px 23px #5246e2, -24px 24px #5246e2, -25px 25px #5246e2, -26px 26px #5246e2, -27px 27px #5246e2, -28px 28px #5246e2, -29px 29px #5246e2, -30px 30px #5246e2, -31px 31px #5246e2, -32px 32px #5246e2, -33px 33px #5246e2, -34px 34px #5246e2, -35px 35px #5246e2, -36px 36px #5246e2, -37px 37px #5246e2, -38px 38px #5246e2, -39px 39px #5246e2, -40px 40px #5246e2, -41px 41px #5246e2, -42px 42px #5246e2, -43px 43px #5246e2, -44px 44px #5246e2, -45px 45px #5246e2, -46px 46px #5246e2, -47px 47px #5246e2, -48px 48px #5246e2, -49px 49px #5246e2, -50px 50px #5246e2, -51px 51px #5246e2, -52px 52px #5246e2, -53px 53px #5246e2, -54px 54px #5246e2, -55px 55px #5246e2, -56px 56px #5246e2, -57px 57px #5246e2, -58px 58px #5246e2, -59px 59px #5246e2, -60px 60px #5246e2, -61px 61px #5246e2, -62px 62px #5246e2, -63px 63px #5246e2, -64px 64px #5246e2, -65px 65px #5246e2, -66px 66px #5246e2, -67px 67px #5246e2, -68px 68px #5246e2, -69px 69px #5246e2, -70px 70px #5246e2, -71px 71px #5246e2, -72px 72px #5246e2, -73px 73px #5246e2, -74px 74px #5246e2, -75px 75px #5246e2, -76px 76px #5246e2, -77px 77px #5246e2, -78px 78px #5246e2, -79px 79px #5246e2, -80px 80px #5246e2, -81px 81px #5246e2, -82px 82px #5246e2, -83px 83px #5246e2, -84px 84px #5246e2, -85px 85px #5246e2; 1988 | } 1989 | 1990 | .button-longshadow-left.button-royal:active, .button-longshadow-left.button-royal.active, .button-longshadow-left.button-royal.is-active { 1991 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 1992 | } 1993 | 1994 | /* 1995 | * Button Sizes 1996 | * 1997 | * This file creates the various button sizes 1998 | * (ex. .button-large, .button-small, etc.) 1999 | */ 2000 | .button-giant { 2001 | font-size: 28px; 2002 | height: 70px; 2003 | line-height: 70px; 2004 | padding: 0 70px; 2005 | } 2006 | 2007 | .button-jumbo { 2008 | font-size: 24px; 2009 | height: 60px; 2010 | line-height: 60px; 2011 | padding: 0 60px; 2012 | } 2013 | 2014 | .button-large { 2015 | font-size: 20px; 2016 | height: 50px; 2017 | line-height: 50px; 2018 | padding: 0 50px; 2019 | } 2020 | 2021 | .button-normal { 2022 | font-size: 16px; 2023 | height: 40px; 2024 | line-height: 40px; 2025 | padding: 0 40px; 2026 | } 2027 | 2028 | .button-small { 2029 | font-size: 12px; 2030 | height: 30px; 2031 | line-height: 30px; 2032 | padding: 0 30px; 2033 | } 2034 | 2035 | .button-tiny { 2036 | font-size: 9.6px; 2037 | height: 24px; 2038 | line-height: 24px; 2039 | padding: 0 24px; 2040 | } 2041 | 2042 | .btn-go { 2043 | border: 1px solid #fff; 2044 | background-color: transparent; 2045 | padding: 10px 20px; 2046 | display: inline-block; 2047 | color: #fff; 2048 | font-size: 2em; 2049 | margin: 40px; 2050 | border-radius: 3px; 2051 | text-transform: uppercase; 2052 | 2053 | &:hover { 2054 | text-decoration: none; 2055 | background-color: white; 2056 | color: #2c3e50; // #e86767; 2057 | } 2058 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/components/_cta.scss: -------------------------------------------------------------------------------- 1 | .cta{ 2 | color: #fff; 3 | flex: 1 1; 4 | width: $screen-md-max; 5 | text-align: center; 6 | margin: auto; 7 | display:flex; 8 | flex-direction: column; 9 | padding-top: 25vh; 10 | align-items: center; 11 | position: relative; 12 | @media (max-width: $screen-md-max) { 13 | width: 100%; 14 | } 15 | h1{ 16 | font-size: 5em; 17 | font-weight: 700; 18 | text-transform: uppercase; 19 | } 20 | h2{ 21 | font-weight: 100; 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /app/marketingSite/styles/components/_footer.scss: -------------------------------------------------------------------------------- 1 | .landing-page, .accounts-page { 2 | .footer { 3 | text-align: center; 4 | margin: 25px; 5 | color: #a6a6a6; 6 | text-transform: uppercase; 7 | .fa { 8 | color: lighten($accent-color, 15%); 9 | } 10 | a { 11 | &:hover { 12 | color: $accent-color; 13 | text-decoration: none; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/components/_github_ribbon.scss: -------------------------------------------------------------------------------- 1 | // Credit Dmitry Filimonov (@Petethepig) https://github.com/petethepig/github-ribbons-css (MIT) 2 | 3 | @import url(http://fonts.googleapis.com/css?family=Cabin+Condensed:500&text=Fork%20me%20on%20GitHub); 4 | 5 | 6 | .ribbon{ 7 | position: absolute; 8 | top: 42px; 9 | width: 200px; 10 | padding: 1px 0; 11 | background: #000; 12 | color: #eee; 13 | z-index: 500; 14 | -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); 15 | -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); 16 | box-shadow: 0 0 10px rgba(0,0,0,0.5); 17 | } 18 | 19 | .ribbon.left{ 20 | left: -42px; 21 | -moz-transform: rotate(-45deg); 22 | -webkit-transform: rotate(-45deg); 23 | -o-transform: rotate(-45deg); 24 | -ms-transform: rotate(-45deg); 25 | transform: rotate(-45deg); 26 | } 27 | 28 | .ribbon.right{ 29 | right: -42px; 30 | -moz-transform: rotate(45deg); 31 | -webkit-transform: rotate(45deg); 32 | -o-transform: rotate(45deg); 33 | -ms-transform: rotate(45deg); 34 | transform: rotate(45deg); 35 | } 36 | 37 | .ribbon a, 38 | .ribbon a:visited, 39 | .ribbon a:active, 40 | .ribbon a:hover{ 41 | display: block; 42 | padding: 1px 0; 43 | height: 24px; 44 | line-height: 20px; 45 | 46 | color: inherit; 47 | text-align: center; 48 | text-decoration: none; 49 | font-family: 'Cabin Condensed', sans-serif; 50 | font-size: 16px; 51 | font-weight: 500; 52 | 53 | border: 1px solid rgba(255,255,255,0.3); 54 | 55 | -moz-text-shadow: 0 0 10px rgba(0,0,0,0.31); 56 | -webkit-text-shadow: 0 0 10px rgba(0,0,0,0.31); 57 | text-shadow: 0 0 10px rgba(0,0,0,0.31); 58 | } 59 | 60 | .ribbon.black{ 61 | background: #000; 62 | } 63 | 64 | .ribbon.red{ 65 | background: #c00; 66 | } 67 | 68 | .ribbon.blue{ 69 | background: #09e; 70 | } 71 | 72 | .ribbon.green{ 73 | background: #0a0; 74 | } 75 | 76 | .ribbon.orange{ 77 | background: #d80; 78 | } 79 | 80 | .ribbon.purple{ 81 | background: #c0c; 82 | } 83 | 84 | .ribbon.grey{ 85 | background: #888; 86 | } 87 | 88 | .ribbon.white{ 89 | background: #eee; 90 | color: black; 91 | } 92 | .ribbon.white a{ 93 | border: 2px dotted rgba(100,100,100,0.2); 94 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/components/_header.scss: -------------------------------------------------------------------------------- 1 | @import "../helpers/colors"; 2 | @import "../helpers/reset"; 3 | .landing-page, .accounts-page { 4 | header { 5 | color: $accent-color; 6 | position: relative; 7 | display: flex; 8 | margin: auto; 9 | width: $screen-lg-min; 10 | justify-content: space-between; 11 | @media (max-width: $screen-md-max) { 12 | width: 100%; 13 | } 14 | a { 15 | color: $accent-color; 16 | h1 { 17 | font-size: 40px; 18 | font-weight: bold; 19 | font-family: 'Amatic SC', cursive; 20 | padding: 20px 0; 21 | margin: 0 0 0 20px; 22 | span.muted { 23 | color: #9a9da2; 24 | } 25 | } 26 | &:hover { 27 | color: $accent-color; 28 | text-decoration: none; 29 | } 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/components/_layout.scss: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Amatic+SC:300,700); 2 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,400italic,600,700); 3 | 4 | body{ 5 | overflow-x: hidden; 6 | font-family: 'Open Sans', sans-serif; 7 | 8 | .landing-page, .accounts-page{ 9 | display: flex; 10 | flex-direction: column; 11 | .hero { 12 | background: #efefef url(images/bg.jpg) no-repeat bottom right fixed; 13 | background-size: cover; 14 | position: fixed; 15 | top: 0px; 16 | bottom:0px; 17 | left: 0px; 18 | right:0px; 19 | &:before { 20 | content: ''; 21 | height: 100%; 22 | width: 100%; 23 | position: absolute; 24 | top: 0px; 25 | left: 0px; 26 | background-color: rgba(44, 51, 64, 0.7); 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/components/_nav.scss: -------------------------------------------------------------------------------- 1 | @import "../helpers/colors"; 2 | 3 | .nav-primary{ 4 | position: relative; 5 | padding: 20px 0; 6 | ul{ 7 | margin: 0; 8 | padding: 0; 9 | list-style: none; 10 | li{ 11 | float: left; 12 | margin: 0 20px 0 10px ; 13 | position: relative; 14 | a{ 15 | font-size: 13px; 16 | font-weight: 700; 17 | line-height: 1; 18 | text-transform: uppercase; 19 | display: inline-block; 20 | padding: 15px 0 12px; 21 | color: #fff; 22 | color: hsla(0,0%,100%,.7); 23 | &:hover{ 24 | text-decoration: none; 25 | } 26 | span.line{ 27 | background-color: $accent-color; 28 | position: absolute; 29 | left: 50%; 30 | top: 100%; 31 | border-radius: 10px; 32 | opacity: 0; 33 | height: 1px; 34 | 35 | -webkit-transition: all .15s linear 0s; 36 | transition: all 200ms linear; 37 | width: 0; 38 | } 39 | } 40 | &:hover, &.active{ 41 | span.line{ 42 | width: 100%; 43 | left: 0; 44 | top:100%; 45 | opacity: 1; 46 | height: 3px; 47 | 48 | } 49 | } 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/helpers/_colors.scss: -------------------------------------------------------------------------------- 1 | $accent-color: #e86767; 2 | $accent-color2: #0576aa; -------------------------------------------------------------------------------- /app/marketingSite/styles/helpers/_reset.scss: -------------------------------------------------------------------------------- 1 | a{ 2 | &:active, &:visited, &:focus{ 3 | text-decoration: none; 4 | outline: none; 5 | color: inherit; 6 | } 7 | } 8 | 9 | ::-webkit-input-placeholder { 10 | font-weight: 100; 11 | } 12 | 13 | :-moz-placeholder { /* Firefox 18- */ 14 | font-weight: 100; 15 | } 16 | 17 | ::-moz-placeholder { /* Firefox 19+ */ 18 | font-weight: 100; 19 | } 20 | 21 | :-ms-input-placeholder { 22 | font-weight: 100; 23 | } 24 | 25 | $screen-sm-min: 768px; 26 | $screen-xs-max: ($screen-sm-min - 1); 27 | $screen-md-min: 992px; 28 | $screen-sm-max: ($screen-md-min - 1); 29 | $screen-lg-min: 1200px; 30 | $screen-md-max: ($screen-lg-min - 1); 31 | 32 | -------------------------------------------------------------------------------- /app/marketingSite/styles/main.scss: -------------------------------------------------------------------------------- 1 | 2 | @import '{reywood:bootstrap3-sass}/bootstrap'; 3 | @import "components/buttons"; 4 | @import "helpers/reset"; 5 | 6 | @import "components/layout"; 7 | @import "components/header"; 8 | @import "components/cta"; 9 | @import "components/nav"; 10 | @import "components/404"; 11 | @import "../../common/accounts/styles/accounts"; 12 | @import "components/footer"; 13 | @import "components/github_ribbon"; 14 | 15 | @import "pages/page-features"; 16 | @import "pages/page-elements"; 17 | 18 | -------------------------------------------------------------------------------- /app/marketingSite/styles/pages/_page-elements.scss: -------------------------------------------------------------------------------- 1 | .page-elements{ 2 | position: relative; 3 | width: $screen-md-max; 4 | margin: auto; 5 | padding: 20px; 6 | text-align: center; 7 | @media (max-width: $screen-md-max) { 8 | width: 100%; 9 | } 10 | > div > h1, > h1 { 11 | 12 | font-size: 50px; 13 | font-weight: 300; 14 | font-family: 'Amatic SC', cursive; 15 | color: #fff; 16 | text-align: center; 17 | position: relative; 18 | margin: 30px 0px 0px; 19 | } 20 | > div > h2, > h2 { 21 | font-size: 18px; 22 | font-weight: 100; 23 | color: #fff; 24 | text-align: center; 25 | position: relative; 26 | margin: 5px; 27 | margin-bottom: 50px; 28 | } 29 | .wrapper { 30 | margin: 40px 0; 31 | padding: 0px 0; 32 | background-color: #e1e1e1; 33 | min-height: 200px; 34 | position: relative; 35 | z-index: 20; 36 | color: #161616; 37 | padding-bottom: 75px; 38 | &:before { 39 | content: ' '; 40 | background-color: #e1e1e1; 41 | position: absolute; 42 | left: -1000px; 43 | z-index: 2; 44 | top: 0; 45 | right: 100%; 46 | height: 100%; 47 | } 48 | &:after { 49 | content: ' '; 50 | background-color: #e1e1e1; 51 | position: absolute; 52 | right: -1000px; 53 | z-index: 2; 54 | top: 0; 55 | left: 100%; 56 | height: 100%; 57 | } 58 | .buttons { 59 | h1 { 60 | font-weight: 100; 61 | padding-top: 75px; 62 | } 63 | h2 { 64 | font-weight: 100; 65 | font-size: 20px; 66 | margin-bottom: 40px; 67 | } 68 | .button, .button-wrap { 69 | margin: 5px; 70 | } 71 | } 72 | 73 | &.white { 74 | background-color: #fff; 75 | &:before, &:after { 76 | background-color: #fff; 77 | } 78 | } 79 | &.left { 80 | text-align: left; 81 | } 82 | .typography { 83 | padding: 40px 0; 84 | .text { 85 | padding: 20px 0; 86 | } 87 | } 88 | .widget { 89 | border: 1px solid #e6e6e6; 90 | border-radius: 4px; 91 | .widget-heading { 92 | padding: 15px 20px; 93 | border-bottom: 1px solid #e6e6e6; 94 | .widget-title { 95 | margin: 0; 96 | font-weight: 400; 97 | font-size: 18px; 98 | color: #282947; 99 | } 100 | } 101 | .widget-body { 102 | padding: 20px; 103 | } 104 | } 105 | .grid { 106 | padding-top: 75px; 107 | .grid-pane { 108 | padding: 15px; 109 | background: #F4F4F4 !important; 110 | border: solid thin rgba(0, 0, 0, 0.13); 111 | border-radius: 0; 112 | margin-bottom: 20px; 113 | 114 | } 115 | } 116 | 117 | } 118 | .starter-features { 119 | h3 { 120 | text-align: left; 121 | color: #fff; 122 | } 123 | ul { 124 | text-align: left; 125 | color: #fff; 126 | li{ 127 | font-size: 24px; 128 | padding-bottom: 10px; 129 | .fa{ 130 | padding-right: 5px; 131 | color: #9ad824; 132 | } 133 | } 134 | 135 | } 136 | } 137 | } -------------------------------------------------------------------------------- /app/marketingSite/styles/pages/_page-features.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/reset'; 2 | 3 | .page-features { 4 | 5 | position: relative; 6 | width: $screen-md-max; 7 | margin: auto; 8 | padding: 20px; 9 | text-align: center; 10 | 11 | @media (max-width: $screen-md-max) { 12 | width: 100%; 13 | } 14 | > div > h1, > h1 { 15 | 16 | font-size: 50px; 17 | font-weight: 300; 18 | font-family: 'Amatic SC', cursive; 19 | color: #fff; 20 | text-align: center; 21 | position: relative; 22 | margin: 30px 0px 0px; 23 | .muted{ 24 | color: #9a9da2; 25 | } 26 | } 27 | > div > h2, > h2 { 28 | font-size: 18px; 29 | font-weight: 100; 30 | color: #fff; 31 | text-align: center; 32 | position: relative; 33 | margin: 5px; 34 | margin-bottom: 50px; 35 | } 36 | .wrapper { 37 | margin: 40px 0; 38 | padding: 0px 0; 39 | background-color: #e1e1e1; 40 | min-height: 200px; 41 | position: relative; 42 | z-index: 20; 43 | color: #161616; 44 | padding-bottom: 75px; 45 | &:before { 46 | content: ' '; 47 | background-color: #e1e1e1; 48 | position: absolute; 49 | left: -1000px; 50 | z-index: 2; 51 | top: 0; 52 | right: 100%; 53 | height: 100%; 54 | } 55 | &:after { 56 | content: ' '; 57 | background-color: #e1e1e1; 58 | position: absolute; 59 | right: -1000px; 60 | z-index: 2; 61 | top: 0; 62 | left: 100%; 63 | height: 100%; 64 | } 65 | .buttons { 66 | h1 { 67 | font-weight: 100; 68 | padding-top: 75px; 69 | 70 | } 71 | h2 { 72 | font-weight: 100; 73 | font-size: 20px; 74 | margin-bottom: 40px; 75 | } 76 | .button, .button-wrap { 77 | margin: 5px; 78 | } 79 | } 80 | 81 | &.white { 82 | background-color: #fff; 83 | &:before, &:after { 84 | background-color: #fff; 85 | } 86 | } 87 | &.left { 88 | text-align: left; 89 | } 90 | .typography { 91 | padding: 40px 0; 92 | .text { 93 | padding: 20px 0; 94 | } 95 | } 96 | .widget { 97 | border: 1px solid #e6e6e6; 98 | border-radius: 4px; 99 | .widget-heading { 100 | padding: 15px 20px; 101 | border-bottom: 1px solid #e6e6e6; 102 | .widget-title { 103 | margin: 0; 104 | font-weight: 400; 105 | font-size: 18px; 106 | color: #282947; 107 | } 108 | } 109 | .widget-body { 110 | padding: 20px; 111 | } 112 | } 113 | .grid { 114 | padding-top: 75px; 115 | .grid-pane { 116 | padding: 15px; 117 | background: #F4F4F4 !important; 118 | border: solid thin rgba(0, 0, 0, 0.13); 119 | border-radius: 0; 120 | margin-bottom: 20px; 121 | 122 | } 123 | } 124 | 125 | } 126 | .cta{ 127 | padding-top: 75px; 128 | max-width: 700px; 129 | p{ 130 | font-size: 18px; 131 | } 132 | } 133 | .starter-features { 134 | color: #fff; 135 | 136 | h3 { 137 | text-align: left; 138 | color: #fff; 139 | } 140 | 141 | ul { 142 | text-align: left; 143 | color: #fff; 144 | li{ 145 | font-size: 24px; 146 | padding-bottom: 10px; 147 | .fa{ 148 | padding-right: 5px; 149 | color: #9ad824; 150 | } 151 | } 152 | 153 | } 154 | } 155 | } -------------------------------------------------------------------------------- /imports/helpers/ga.js: -------------------------------------------------------------------------------- 1 | var ga_id = 'UA-xxx-yy'; // ADD YOUR GOOGLE ANALYTICS CODE HERE 2 | 3 | var ga_set = () => { return ga_id !== 'UA-xxx-yy' }; 4 | 5 | Meteor.startup(() => { 6 | if (!ga_set() && console){ 7 | console.log("NO GOOGLE ANALYTICS TRACKING CODE FOUND! ADD YOURS HERE: (/imports/helpers/ga.js)") 8 | } 9 | }) 10 | 11 | export let TrackingCode = () => { 12 | if (ga_set() && typeof document !== 'undefined') { 13 | if(!document.querySelectorAll('[dochead="1"]')){ 14 | var gaScript = 'https://www.google-analytics.com/analytics.js' 15 | DocHead.loadScript(gaScript, function () { 16 | ga('create', ga_id, 'auto') 17 | ga('send', 'pageview') 18 | }) 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /imports/helpers/routeHelpers.js: -------------------------------------------------------------------------------- 1 | const isActiveRoute = (routeName) => { 2 | return FlowRouter.getRouteName() === routeName 3 | } 4 | 5 | export {isActiveRoute} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "meteorkits-starterkit", 3 | "private": true, 4 | "version": "0.0.1", 5 | "scripts": { 6 | "start": "meteor run" 7 | }, 8 | "dependencies": { 9 | "lodash": "^4.9.0", 10 | "lodash.camelcase": "^4.1.0", 11 | "meteor-node-stubs": "~0.2.0", 12 | "react": "^15.0.0", 13 | "react-addons-css-transition-group": "^15.0.0", 14 | "react-dom": "^15.0.0", 15 | "react-komposer": "^1.8.0", 16 | "react-mounter": "^1.2.0", 17 | "react-no-ssr": "^1.1.0" 18 | }, 19 | "keywords": [], 20 | "author": "Floyd Price", 21 | "license": "MIT", 22 | "description": "", 23 | "devDependencies": { 24 | "sass-material-colors": "0.0.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /public/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MeteorKits/starter-kit-react/077676d314e618419734c733599ab8510654242b/public/images/bg.jpg -------------------------------------------------------------------------------- /public/images/foxes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MeteorKits/starter-kit-react/077676d314e618419734c733599ab8510654242b/public/images/foxes.jpg -------------------------------------------------------------------------------- /public/images/sidebar-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MeteorKits/starter-kit-react/077676d314e618419734c733599ab8510654242b/public/images/sidebar-bg.jpg -------------------------------------------------------------------------------- /server/accounts.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | Meteor.users.deny({ 4 | update() { 5 | return true; 6 | } 7 | }); 8 | 9 | Accounts.onCreateUser((options, user) => { 10 | if (options.profile) { 11 | user.profile = options.profile 12 | } else { 13 | user.profile = { 14 | name: user.username 15 | } 16 | } 17 | return user 18 | }) -------------------------------------------------------------------------------- /server/config/security.js: -------------------------------------------------------------------------------- 1 | 2 | function setupBrowserPolicy(BrowserPolicy){ 3 | BrowserPolicy.content.allowOriginForAll("*.googleapis.com"); 4 | BrowserPolicy.content.allowOriginForAll("*.gstatic.com"); 5 | BrowserPolicy.content.allowOriginForAll("*.bootstrapcdn.com"); 6 | BrowserPolicy.content.allowFontDataUrl(); 7 | } 8 | 9 | export default setupBrowserPolicy; 10 | -------------------------------------------------------------------------------- /server/config/social_accounts.js: -------------------------------------------------------------------------------- 1 | 2 | function setupSocialAccounts(){ 3 | ServiceConfiguration.configurations.upsert({ 4 | service: "google" 5 | }, { 6 | $set: { 7 | clientId: 'XXX', 8 | secret: 'XXX' 9 | } 10 | }) 11 | 12 | ServiceConfiguration.configurations.upsert({ 13 | service: "facebook" 14 | }, { 15 | $set: { 16 | appId: 'XXX', 17 | secret: 'XXX' 18 | } 19 | }) 20 | } 21 | 22 | export default setupSocialAccounts; 23 | -------------------------------------------------------------------------------- /server/entry.js: -------------------------------------------------------------------------------- 1 | import setupBrowserPolicy from './config/security.js'; 2 | import setupSocialAccounts from './config/social_accounts.js'; 3 | import setupDefaultUsers from './loaders/users.js'; 4 | 5 | setupBrowserPolicy(BrowserPolicy); 6 | 7 | Meteor.startup(() => { 8 | setupDefaultUsers(); 9 | // setupSocialAccounts(); 10 | }); 11 | -------------------------------------------------------------------------------- /server/loaders/users.js: -------------------------------------------------------------------------------- 1 | 2 | const users = [ 3 | { 4 | username: 'admin', 5 | email: 'admin@test.com', 6 | password: 'supersecret', 7 | admin: true 8 | }, 9 | { 10 | username: 'testuser', 11 | email: 'test@test.com', 12 | password: 'testpassword' 13 | } 14 | ]; 15 | 16 | function setupDefaultUsers(){ 17 | users.forEach(function (user) { 18 | if (typeof Meteor.users.findOne({ username : user.username }) !== 'object') { 19 | let userid = Accounts.createUser(user); 20 | if(user.admin){ 21 | Roles.addUsersToRoles(userid, ['admin'], Roles.GLOBAL_GROUP); 22 | } 23 | } 24 | }); 25 | } 26 | 27 | export default setupDefaultUsers; 28 | -------------------------------------------------------------------------------- /server/router.js: -------------------------------------------------------------------------------- 1 | import {FlowRouter} from 'meteor/kadira:flow-router-ssr' 2 | FlowRouter.setDeferScriptLoading(true); 3 | 4 | var timeInMillis = 1000 * 10; // 10s 5 | FlowRouter.setPageCacheTimeout(0) //timeInMillis) --------------------------------------------------------------------------------