├── .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 | [](https://floydprice.com/blog/introducing-meteor-cast-starter-kit/)
9 |
10 | ## Accounts
11 | [](https://floydprice.com/blog/introducing-meteor-cast-starter-kit/)
12 |
13 | ## Admin Home
14 | [](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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
70 |
71 |
Wrapped Buttons
72 |
Fancy!
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
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 | Text Type
28 | Example
29 |
30 |
31 |
32 |
33 | 1
34 |
35 | MARKED TEXT
36 | Use the <mark>
tag.
37 |
38 |
39 | You can use the mark tag to
40 | highlight
41 | text.
42 |
43 |
44 |
45 |
46 | 2
47 |
48 | DELETED TEXT
49 | Use the <del>
tag.
50 |
51 |
52 |
53 | This line of text is meant to be treated as deleted text.
54 |
55 |
56 |
57 |
58 | 3
59 |
60 | STRIKETHROUGH TEXT
61 | Use the <s>
tag.
62 |
63 |
64 |
65 | This line of text is meant to be treated as no longer accurate.
66 |
67 |
68 |
69 |
70 | 4
71 |
72 | INSERTED TEXT
73 | Use the <ins>
tag.
74 |
75 |
76 |
77 | This line of text is meant to be treated as an addition to the document.
78 |
79 |
80 |
81 |
82 | 5
83 |
84 | UNDERLINED TEXT
85 | Use the <u>
tag.
86 |
87 |
88 |
89 | This line of text will render as underlined
90 |
91 |
92 |
93 |
94 | 6
95 |
96 | SMALL TEXT
97 | Use the <small>
tag.
98 |
99 |
100 |
101 | This line of text is meant to be treated as fine print.
102 |
103 |
104 |
105 |
106 | 7
107 |
108 | BOLD
109 | Use the <strong>
tag.
110 |
111 |
112 | The following snippet of text is rendered as bold text .
113 |
114 |
115 |
116 | 8
117 |
118 | ITALICS
119 | Use the <em>
tag.
120 |
121 |
122 | The following snippet of text is rendered as italicized text .
123 |
124 |
125 |
126 |
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 |
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 |
40 4
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 |
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 |
12 |
27 |
28 | )
29 | }
30 |
31 | navigation(username) {
32 | return (
33 |
34 |
47 |
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)
--------------------------------------------------------------------------------