17 |
29 | );
30 | }
31 |
32 | componentDidMount()
33 | {
34 | registerUpdateAvailableHandler();
35 | registerPreferencesMenuControl();
36 | registerMarkNotificationAsReadSuccess();
37 | }
38 | };
39 |
40 | export default App;
--------------------------------------------------------------------------------
/src/js/View/Components/AppAlerts/Index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import AppAlert from './AppAlert';
5 |
6 | interface IAppAlertsProps
7 | {
8 | appAlerts?: IAppAlert[];
9 | };
10 |
11 | class AppAlerts extends React.Component
18 |
28 |
19 |
21 |
22 |
27 |
23 |
25 | {this.props.children}
26 |
17 | {this.props.appAlerts
18 | .map(a =>
21 | );
22 | }
23 | };
24 |
25 | export default connect<{}, {}, IAppAlertsProps>(
26 | (state: IState, props: IAppAlertsProps) => ({
27 | appAlerts : state.appAlerts.alerts
28 | })
29 | )(AppAlerts);
--------------------------------------------------------------------------------
/src/js/View/Components/AppBar/Account.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import createMenu from 'Electron/Menus/Accounts';
4 |
5 | import {
6 | Btn,
7 | ProfilePicture
8 | } from 'View/Ui/Index';
9 |
10 | interface IAppBarAccountProps
11 | {
12 | account: IStateAccountsAccount;
13 |
14 | currentAccountId: number;
15 |
16 | className?: string;
17 |
18 | onClick?(account: IStateAccountsAccount);
19 | };
20 |
21 | class AppBarAccount extends React.Component
47 |
49 |
37 |
70 | );
71 | }
72 | };
73 |
74 | export default connect(
75 | (state: IState, props: IAppBarProps) => ({
76 | app : state.app,
77 | accounts : Object.keys(state.accounts)
78 | .map(id => state.accounts[id])
79 |
80 | })
81 | )(AppBar as any);
82 |
--------------------------------------------------------------------------------
/src/js/View/Components/GenericError.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import {
4 | BtnTo,
5 | CenteredBox
6 | } from 'View/Ui/Index';
7 |
8 | interface IGenericErrorProps
9 | {
10 | title: string;
11 |
12 | description: string;
13 |
14 | buttonText: string;
15 |
16 | buttonUrl: string;
17 | };
18 |
19 | class GenericError extends React.Component
38 |
39 |
40 |
69 |
41 |
68 |
42 |
43 | {this.props.accounts
44 | .map((account, i, a) =>
45 | (
46 |
57 |
58 |
51 |
55 | ))}
56 |
59 |
67 |
60 |
62 |
65 |
66 | 26 | {this.props.title} 27 |
28 |29 | {this.props.description} 30 |
31 |24 | {'Welcome to Hawk Eye'} 25 |
26 |27 | {'Let\'s get started by adding a GitHub account.'} 28 |
29 |28 | {'Quiver Zero!'} 29 |
30 |31 | {'Hah, get it? But well done!'} 32 |
33 |
40 |
60 | );
61 | }
62 | };
63 |
64 | export default NotificationFilterRepositoryFilter;
--------------------------------------------------------------------------------
/src/js/View/Components/NotificationFilters/NotificationFilterStringFilter.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { Btn } from 'View/Ui/Index';
4 |
5 | interface INotificationFilterStringFilterProps
6 | {
7 | stringFilters: IGitHubNotificationFilterSetStringFilter[];
8 |
9 | className?: string;
10 |
11 | getTitle(): string;
12 |
13 | getFilterTitle(filter: IGitHubNotificationFilterSetStringFilter): string;
14 |
15 | getFilterIsActive(filter: IGitHubNotificationFilterSetStringFilter): boolean;
16 |
17 | onClick(filter: IGitHubNotificationFilterSetStringFilter): void;
18 | };
19 |
20 | class NotificationFilterStringFilter extends React.Component
41 |
42 |
43 | {this.props.repositoryFilters
44 | .map(filter =>
45 | (
46 |
48 |
54 | {this.props.getFilterTitle(filter)}
55 | {filter.count}
56 |
57 |
58 | ))}
59 |
26 |
45 | )
46 | }
47 | };
48 |
49 | export default NotificationFilterStringFilter;
--------------------------------------------------------------------------------
/src/js/View/Components/NotificationsList/Index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import {
4 | AutoSizer,
5 | Collection
6 | } from 'react-virtualized';
7 | import { Notification } from 'View/Ui/Index';
8 |
9 | interface INotificationsListProps
10 | {
11 | accountId: string;
12 |
13 | notifications: IGitHubNotification[];
14 |
15 | disableMarkAsRead?: boolean;
16 |
17 | onClick?(notification: IGitHubNotification);
18 |
19 | onDoubleClick?(notification: IGitHubNotification);
20 | };
21 |
22 | class NotificationsList extends React.Component
27 |
28 |
29 | {this.props.stringFilters
30 | .map(filter =>
31 | (
32 |
34 |
39 | {this.props.getFilterTitle(filter)}
40 | {filter.count}
41 |
42 |
43 | ))}
44 |
61 |
67 | );
68 | };
69 | };
70 |
71 | export default NotificationsList;
--------------------------------------------------------------------------------
/src/js/View/Components/ViewBar/Index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { Link } from 'react-router';
4 | import { Icon } from 'View/Ui/Index';
5 |
6 | interface IViewBarProps
7 | {
8 | title: string;
9 |
10 | backLink?: string;
11 |
12 | getLeftContent?(): any;
13 |
14 | getRightContent?(): any;
15 | };
16 |
17 | class ViewBar extends React.Component
23 |
50 | );
51 | }
52 | };
53 |
54 | export default ViewBar;
--------------------------------------------------------------------------------
/src/js/View/Container.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { connect } from 'react-redux';
3 | import { Provider } from 'react-redux';
4 | import { Router } from 'react-router';
5 |
6 | import { colorModes } from 'Constants/Models/Settings';
7 |
8 | import { AppLoading } from 'View/Ui/Index';
9 |
10 | interface IContainerProps
11 | {
12 | store: Redux.Store
24 |
46 |
25 | {typeof this.props.backLink === 'string'
26 | ?
28 |
45 |
33 | {this.props.getLeftContent()}
34 |
35 | : undefined}
36 | 37 | {this.props.title} 38 |
39 | {typeof this.props.getRightContent === 'function' 40 | ?
41 | {this.props.getRightContent()}
42 |
43 | : undefined}
44 |
47 | {this.props.children}
48 |
49 |
32 | {this.props.setup.isLoading
33 | ?
38 |
41 | )
42 | : undefined}
43 |
44 | );
45 | }
46 | };
47 |
48 | export default connect<{}, {}, IContainerProps>(
49 | (state: IState) => ({
50 | setup : state.setup,
51 | settings : state.settings
52 | })
53 | )(Container);
--------------------------------------------------------------------------------
/src/js/View/Settings/Index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 |
5 | import AppSection from './Sections/App';
6 | import SoundsSection from './Sections/Sounds';
7 | import AccountsSection from './Sections/Accounts';
8 | import FrequencySection from './Sections/Frequency';
9 | import NotificationsSection from './Sections/Notifications';
10 |
11 | import { Scroll } from 'View/Ui/Index';
12 | import ViewBar from 'View/Components/ViewBar/Index';
13 |
14 | interface ISettingsIndexProps
15 | {
16 | settings: IStateSettings;
17 | };
18 |
19 | class SettingsIndex extends React.Component
28 |
54 |
29 |
53 |
30 |
42 |
31 |
41 |
32 |
34 |
35 |
37 |
38 |
40 |
43 |
52 |
44 |
51 |
45 |
47 |
48 |
50 |
36 |
62 | );
63 | }
64 | };
65 |
66 | export default connect<{}, {}, IAccountsSettingsSectionProps>(
67 | (state: IState) => ({
68 | authentication : state.authentication,
69 | accounts : Object.keys(state.accounts)
70 | .map(id => state.accounts[id])
71 | })
72 | )(AccountsSettingsSection);
--------------------------------------------------------------------------------
/src/js/View/Settings/Sections/App.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { dispatch } from 'Helpers/State/Store';
4 | import { setColorMode } from 'Actions/Settings';
5 | import { colorModes } from 'Constants/Models/Settings';
6 |
7 | import { Toggle } from 'View/Ui/Index';
8 |
9 | interface IAppSettingsSectionProps
10 | {
11 | settings: IStateSettings;
12 | };
13 |
14 | class AppSettingsSection extends React.Component
37 |
38 | {this.props.accounts
39 | .map((acc, i) =>
40 | (
41 |
50 | {'@' + acc.gitHubUser.username}
51 |
52 | ))}
53 | 0
55 | ? ' btn--hard-top'
56 | : undefined)}
57 | onClick={this.handleClick.bind(this)}>
58 | {'Add Account'}
59 |
60 |
61 |
25 |
40 | );
41 | }
42 | };
43 |
44 | export default AppSettingsSection;
--------------------------------------------------------------------------------
/src/js/View/Settings/Sections/Frequency.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { dispatch } from 'Helpers/State/Store';
4 | import { cronPeriodPrettyNames } from 'Constants/Lang/Date';
5 | import { configurePollPeriod } from 'Actions/UIActions/Settings';
6 |
7 | import { Button } from 'View/Ui/Index';
8 |
9 | interface IFrequencySettingsSectionProps
10 | {
11 | settings: IStateSettings;
12 | };
13 |
14 | class FrequencySettingsSection extends React.Component
26 |
27 |
39 |
20 |
48 | );
49 | }
50 | };
51 |
52 | export default FrequencySettingsSection;
--------------------------------------------------------------------------------
/src/js/View/Settings/Sections/Sounds.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import {
4 | setNewItemsEnabled,
5 | setAlertErrorEnabled,
6 | setAlertSuccessEnabled
7 | } from 'Actions/Settings';
8 | import { dispatch } from 'Helpers/State/Store';
9 |
10 | import { Toggle } from 'View/Ui/Index';
11 |
12 | interface ISoundSettingsSectionProps
13 | {
14 | settings: IStateSettings;
15 | };
16 |
17 | class SoundSettingsSection extends React.Component
21 |
24 | {Object.keys(cronPeriodPrettyNames)
25 | .map((name, i, a) =>
26 | (
27 |
45 | ))}
46 |
47 |
34 |
64 | );
65 | }
66 | };
67 |
68 | export default SoundSettingsSection;
--------------------------------------------------------------------------------
/src/js/View/Ui/Anchor.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | interface IAnchorProps
4 | {
5 | className?: string;
6 |
7 | href?: string;
8 |
9 | preventDefault?: boolean;
10 |
11 | onClick?(): void;
12 |
13 | onContextMenu?(): void;
14 | };
15 |
16 | class Anchor extends React.Component
35 |
36 |
48 |
49 |
50 |
63 |
19 |
20 |
23 |
24 | );
25 |
26 | export default AppLoading;
--------------------------------------------------------------------------------
/src/js/View/Ui/Btn.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { Anchor } from './Index';
4 |
5 | interface IBtnProps
6 | {
7 | className?: string;
8 |
9 | children?: any;
10 |
11 | onClick?(): void;
12 |
13 | onContextMenu?(): void;
14 | };
15 |
16 | const Btn: React.SFC
13 |
20 | );
21 |
22 | export default CenteredBox;
--------------------------------------------------------------------------------
/src/js/View/Ui/Icon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | interface IIconProps
4 | {
5 | icon: string;
6 |
7 | className?: string;
8 | };
9 |
10 | const Icon: React.SFC
17 | {props.children}
18 |
19 |
19 | {'Loading'}
20 |
21 | );
22 |
23 | export default Loader;
--------------------------------------------------------------------------------
/src/js/View/Ui/ProfilePicture.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | interface IProfilePictureProps
4 | {
5 | picture: string;
6 | };
7 |
8 | const ProfilePicture: React.SFC
35 | {this.props.buttons
36 | .map((btn, i, a) =>
37 | {
38 | let className = (btn.className || '')
39 | + (hasMinItems(a, 1)
40 | && isFirstItem(i)
41 | ? ' btn--hard-bottom'
42 | : '')
43 | + (hasMinItems(a, 1)
44 | && isLastItem(a, i)
45 | ? ' btn--hard-top'
46 | : '')
47 | + (hasMinItems(a, 1)
48 | && !isFirstItem(i)
49 | && !isLastItem(a, i)
50 | ? ' btn--hard'
51 | : '')
52 |
53 | return (
54 |
57 | {btn.text}
58 |
59 | );
60 | })}
61 |
62 | );
63 | }
64 | };
65 |
66 | export default RoundedBtnSet;
--------------------------------------------------------------------------------
/src/js/View/Ui/Scroll.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | interface IScrollProps
4 | {
5 | className?: string;
6 |
7 | children?: any;
8 | };
9 |
10 | const Scroll: React.SFC
16 |
20 | );
21 |
22 | export default Scroll;
--------------------------------------------------------------------------------
/src/js/View/Ui/Toggle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | interface IToggleProps
4 | {
5 | value: any;
6 |
7 | options: IToggleOption[];
8 |
9 | className?: string;
10 |
11 | onChange?(value: any): void;
12 | };
13 |
14 | interface IToggleOption
15 | {
16 | index: number;
17 |
18 | text: string;
19 |
20 | value: any;
21 | };
22 |
23 | class Toggle extends React.Component
17 | {props.children}
18 |
19 |
39 | {this.props.options
40 | .sort((a, b) => a.index - b.index)
41 | .map((option, i, a)=>
42 | (
43 |
56 | {option.text}
57 |
58 | ))}
59 |
60 | );
61 | }
62 | };
63 |
64 | export default Toggle;
--------------------------------------------------------------------------------
/src/scss/base/_fonts.scss:
--------------------------------------------------------------------------------
1 | //@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,500,300);
2 | @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400, 700');
3 |
4 | /**
5 | * Themify Icon Font
6 | */
7 | @font-face {
8 | font-family: 'themify';
9 | src:url('./src/fonts/themify/themify.eot?-fvbane');
10 | src:url('./src/fonts/themify/themify.eot?#iefix-fvbane') format('embedded-opentype'),
11 | url('./src/fonts/themify/themify.woff?-fvbane') format('woff'),
12 | url('./src/fonts/themify/themify.ttf?-fvbane') format('truetype'),
13 | url('./src/fonts/themify/themify.svg?-fvbane#themify') format('svg');
14 |
15 | font-weight: normal;
16 | font-style: normal;
17 | }
--------------------------------------------------------------------------------
/src/scss/base/_form.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Form Base
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Base form/input styles
6 | */
7 |
8 | input, textarea, button {
9 | resize: none;
10 | outline: none;
11 | @include border-radius(0);
12 | }
--------------------------------------------------------------------------------
/src/scss/base/_images.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Images
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Base image styles
6 | */
7 |
8 | img {
9 | display: block;
10 | }
--------------------------------------------------------------------------------
/src/scss/base/_lists.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Base Lists
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Base list styles and standardising
6 | */
7 |
8 | /*
9 | * Reset lists and make them consistent
10 | */
11 | ul, ol {
12 | margin-bottom: 0;
13 | padding-left: 1em;
14 | }
15 |
16 | ul {
17 | list-style-type: disc;
18 | }
19 |
20 | ol {
21 | list-style-type: decimal;
22 |
23 | ol {
24 | list-style-type: lower-alpha;
25 | }
26 | }
27 |
28 | /*
29 | * Clean List, no funny business
30 | */
31 | .clean-list {
32 | padding-left: 0;
33 | list-style-type: none;
34 | }
35 |
36 | /**
37 | * Inline List
38 | */
39 | .inline-list li {
40 | display: inline;
41 | }
--------------------------------------------------------------------------------
/src/scss/base/_page.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Page Base
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Base page styles
6 | */
7 |
8 | * { @include box-sizing(border-box); }
9 |
10 | html, body {
11 | height: 100%;
12 | min-height: 100%;
13 | }
14 |
15 | body, input, textarea, button {
16 | font: {
17 | size: $base-font-size;
18 | family: $base-body-font;
19 | weight: $body-font-weight;
20 | }
21 |
22 | -webkit-font-smoothing: antialiased;
23 | }
24 |
25 | body {
26 | min-width: $min-page-width;
27 | }
28 |
29 | /*
30 | * Disable text selection across the app
31 | */
32 | :not(input):not(textarea),
33 | :not(input):not(textarea)::after,
34 | :not(input):not(textarea)::before {
35 | -webkit-user-select: none;
36 | user-select: none;
37 | cursor: default;
38 | }
39 | input, button, textarea, :focus {
40 | outline: none; // You should add some other style for :focus to help UX/a11y
41 | }
42 |
43 | a:not([draggable=true]), img:not([draggable=true]) {
44 | -webkit-user-drag: none;
45 | user-drag: none; /* Technically not supported in Electron yet */
46 |
47 | i {
48 | cursor: default;
49 | }
50 | }
51 | a[href^="http://"],
52 | a[href^="https://"],
53 | a[href^="ftp://"] {
54 | -webkit-user-drag: auto;
55 | user-drag: auto; /* Technically not supported in Electron yet */
56 | }
--------------------------------------------------------------------------------
/src/scss/base/_typography.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Typography
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Typography base
6 | */
7 |
8 | /*
9 | * Paragraphs
10 | */
11 | p {
12 | line-height: $text-line-height;
13 | }
14 |
15 | /*
16 | * Anchors
17 | */
18 | a {
19 | font-size: inherit;
20 | text-decoration: none;
21 |
22 | &:hover {
23 | cursor: pointer;
24 | }
25 | }
26 |
27 | /*
28 | * Headings
29 | */
30 | @include headings() {
31 | font-weight: $header-font-weight;
32 | line-height: $header-line-height;
33 | }
34 |
35 | h1 { font-size: get-font-size(alpha); }
36 | h2 { font-size: get-font-size(beta); }
37 | h3 { font-size: get-font-size(gamma); }
38 | h4 { font-size: get-font-size(delta); }
39 | h5 { font-size: get-font-size(epsilon); }
40 | h6 { font-size: get-font-size(zeta); }
41 |
42 | /*
43 | * Labels
44 | */
45 | label {
46 | display: block;
47 | font: {
48 | size: $label-size;
49 | weight: $label-font-weight;
50 | };
51 | text-transform: $label-text-transform;
52 | }
--------------------------------------------------------------------------------
/src/scss/components/_app-alert.scss:
--------------------------------------------------------------------------------
1 | .app-alert-container {
2 | left: 0;
3 | top: -25px;
4 | width: 100%;
5 | height: 25px;
6 | z-index: 9999999;
7 | position: absolute;
8 | }
9 |
10 | .app-alert {
11 | left: 0;
12 | top: 0px;
13 | width: 100%;
14 | height: 25px;
15 | padding: 0 10px;
16 | position: absolute;
17 | @include transition(top .25s ease);
18 | }
19 |
20 | .app-alert__inner {
21 | width: 100%;
22 | height: 25px;
23 | text-align: center;
24 | @include border-radius(0 0 5px 5px);
25 |
26 | p {
27 | color: white;
28 | font-size: 13px;
29 | line-height: 25px;
30 | font-weight: bold;
31 | }
32 | }
33 |
34 | .app-alert--show {
35 | top: 25px;
36 | }
37 |
38 | .app-alert-pad {
39 | padding: 0 10px; //@hack
40 | }
41 |
42 | // Statuses
43 | .app-alert--success .app-alert__inner { background: $background-success; }
44 | .app-alert--warning .app-alert__inner { background: $background-warning; }
45 | .app-alert--error .app-alert__inner { background: $background-error; }
46 |
47 | /*
48 | * Actions
49 | */
50 | .app-alert__inner__action {
51 | float: left;
52 | width: 25px;
53 | height: 25px;
54 | display: block;
55 | color: white;
56 | font-size: 12px;
57 | line-height: 25px;
58 | text-align: center;
59 | @include transition(background .25s ease);
60 |
61 | i {
62 |
63 | }
64 |
65 | &:hover {
66 | background: trans-dark(.2);
67 | }
68 | }
69 |
70 | .app-alert__inner__action--last {
71 | @include border-radius(0 0 5px 0);
72 | }
--------------------------------------------------------------------------------
/src/scss/components/_app.scss:
--------------------------------------------------------------------------------
1 | .app {
2 | width: 100%;
3 | height: 100%;
4 | position: relative;
5 | @include transition(background .25s ease);
6 | }
7 |
8 | .app__loading {
9 | top: 0;
10 | left: 0;
11 | opacity: 0;
12 | width: 100%;
13 | height: 100%;
14 | position: absolute;
15 | z-index: 9999999999; // lol
16 | background: $app-loading-background;
17 | @include transition(opacity .25s ease);
18 | }
19 |
20 | .app__loading--show {
21 | opacity: 1;
22 | }
23 |
24 | .app--dark { background: $app-dark-background; }
25 | .app--light { background: $app-light-background; }
--------------------------------------------------------------------------------
/src/scss/components/_btn.scss:
--------------------------------------------------------------------------------
1 | .btn {
2 | border: 0;
3 | margin: 0;
4 | width: 100%;
5 | display: block;
6 | text-align: center;
7 |
8 | cursor: pointer!important;
9 | font-size: $button-font-size;
10 | padding: $button-padding;
11 | text-shadow: $button-text-shadow;
12 | text-transform: $button-text-transform;
13 | @include border-radius($button-border-radius);
14 | @include transition(all $button-transition-speed);
15 | }
16 |
17 | /*
18 | * Square Sizes
19 | */
20 | @each $size-name, $size in $btn-square-sizes {
21 | .btn--square-#{$size-name} {
22 | padding: 0;
23 | width: $size;
24 | height: $size;
25 | line-height: $size;
26 | }
27 | }
28 |
29 | /*
30 | * Backgrounds
31 | */
32 | @each $bg-name, $bgs in $btn-backgrounds {
33 | .btn--#{$bg-name} {
34 | background: nth($bgs, 1);
35 |
36 | &:hover {
37 | background: nth($bgs, 2);
38 | }
39 | }
40 | }
41 |
42 | .btn--transparent {
43 | background: transparent;
44 |
45 | &:hover {
46 | background: transparent;
47 | }
48 | }
49 |
50 | .btn--error {
51 | color: white;
52 | }
53 |
54 | /*
55 | * Pill
56 | */
57 | .btn--pill {
58 | @extend .truncate;
59 | padding: $btn-pill-padding;
60 | font-size: $btn-pill-font-size;
61 | text-align: $btn-pill-text-align;
62 | text-transform: $btn-pill-text-transform;
63 | }
64 |
65 | .btn--pill-has-count {
66 | position: relative;
67 | padding-right: 60px;
68 | }
69 |
70 | .btn--pill__count {
71 | top: 3px;
72 | right: 20px;
73 | width: 25px;
74 | height: 17px;
75 | display: block;
76 | font-size: 10px;
77 | line-height: 17px;
78 | text-align: center;
79 | position: absolute;
80 | @include border-radius(10px);
81 | }
82 |
83 | /*
84 | * Small Icon
85 | */
86 | .btn--small-icon {
87 | padding: 0;
88 | width: 16px;
89 | height: 16px;
90 | text-align: center;
91 | @include border-radius(3px);
92 |
93 | i {
94 | font-size: 8px;
95 | line-height: 16px;
96 | font-weight: bold;
97 | }
98 | }
99 |
100 | /*
101 | * Hard Corners
102 | */
103 | .btn--hard { @include border-radius(0); }
104 | .btn--hard-top { @include border-radius(0 0 $button-border-radius $button-border-radius); }
105 | .btn--hard-bottom { @include border-radius($button-border-radius $button-border-radius 0 0); }
106 | .btn--hard-left { @include border-radius($button-border-radius 0 0 $button-border-radius); }
107 | .btn--hard-right { @include border-radius(0 $button-border-radius $button-border-radius 0); }
108 |
109 | /*
110 | * Mods
111 | */
112 | .btn .profile-picture {
113 | @include border-radius($button-border-radius - 1px);
114 | }
--------------------------------------------------------------------------------
/src/scss/components/_loader.scss:
--------------------------------------------------------------------------------
1 | .loader,
2 | .loader:after {
3 | width: 40px;
4 | height: 40px;
5 | @include border-radius(50%);
6 | }
7 | .loader {
8 | margin: 0 auto;
9 | font-size: 10px;
10 | position: relative;
11 | text-indent: -9999em;
12 |
13 | border-top-color: rgba(255, 255, 255, 0.2);
14 | border-right-color: rgba(255, 255, 255, 0.2);
15 | border-bottom-color: rgba(255, 255, 255, 0.2);
16 | border-left-color: white;
17 |
18 | border-top-width: 5px;
19 | border-right-width: 5px;
20 | border-bottom-width: 5px;
21 | border-left-width: 5px;
22 |
23 | border-top-style: solid;
24 | border-right-style: solid;
25 | border-bottom-style: solid;
26 | border-left-style: solid;
27 |
28 | -webkit-transform: translateZ(0);
29 | -ms-transform: translateZ(0);
30 | transform: translateZ(0);
31 | -webkit-animation: load8 1.1s infinite linear;
32 | animation: load8 1.1s infinite linear;
33 | }
34 |
35 | @-webkit-keyframes load8 {
36 | 0% {
37 | -webkit-transform: rotate(0deg);
38 | transform: rotate(0deg);
39 | }
40 | 100% {
41 | -webkit-transform: rotate(360deg);
42 | transform: rotate(360deg);
43 | }
44 | }
45 | @keyframes load8 {
46 | 0% {
47 | -webkit-transform: rotate(0deg);
48 | transform: rotate(0deg);
49 | }
50 | 100% {
51 | -webkit-transform: rotate(360deg);
52 | transform: rotate(360deg);
53 | }
54 | }
55 |
56 | @each $size-name, $size in $loader-sizes {
57 | .loader--#{$size-name},
58 | .loader--#{$size-name}:after {
59 | width: $size;
60 | height: $size;
61 | }
62 | }
63 |
64 | .loader--small {
65 | border-top-width: 2px;
66 | border-right-width: 2px;
67 | border-bottom-width: 2px;
68 | border-left-width: 2px;
69 | }
70 |
71 | .loader--default {
72 | border-top-color: rgba(255, 255, 255, 0.2)!important;
73 | border-right-color: rgba(255, 255, 255, 0.2)!important;
74 | border-bottom-color: rgba(255, 255, 255, 0.2)!important;
75 | border-left-color: white!important;
76 | }
--------------------------------------------------------------------------------
/src/scss/components/_no-outline.scss:
--------------------------------------------------------------------------------
1 | .no-outline * {
2 | outline: none!important;
3 | }
--------------------------------------------------------------------------------
/src/scss/components/_notification.scss:
--------------------------------------------------------------------------------
1 |
2 | .notification {
3 | width: 100%;
4 | height: 100%;
5 | position: relative;
6 | @include transition(background .25s ease);
7 | }
8 |
9 | .notification__text {
10 | display: block;
11 | display: -webkit-box;
12 |
13 | max-height: 14 * 1.5 * 2px;
14 | font-size: 14px;
15 | line-height: 1.3em;
16 | margin-bottom: 5px;
17 | -webkit-line-clamp: 2;
18 | -webkit-box-orient: vertical;
19 | overflow: hidden;
20 | text-overflow: ellipsis;
21 | }
22 |
23 | .notification-check {
24 | @include transition(color .25s ease);
25 | }
--------------------------------------------------------------------------------
/src/scss/components/_profile-picture.scss:
--------------------------------------------------------------------------------
1 | .profile-picture {
2 | @include border-radius(5px);
3 | }
--------------------------------------------------------------------------------
/src/scss/components/_toggle.scss:
--------------------------------------------------------------------------------
1 | .toggle {
2 | width: 100%;
3 | display: inline-block;
4 | @include border-radius($toggle-border-radius);
5 | }
6 |
7 | .toggle__option {
8 | width: 50%;
9 | text-align: center;
10 | font: {
11 | size: $toggle-option-font-size;
12 | weight: $toggle-option-font-weight;
13 | }
14 | display: inline-block;
15 | padding: $toggle-option-padding;
16 | text-transform: $toggle-option-text-transform;
17 | @include transition(all .25s ease);
18 | }
19 |
20 | .toggle__option--first {
21 | @include border-radius($toggle-border-radius 0 0 $toggle-border-radius);
22 | }
23 |
24 | .toggle__option--last {
25 | @include border-radius(0 $toggle-border-radius $toggle-border-radius 0);
26 | }
--------------------------------------------------------------------------------
/src/scss/components/_view-bar.scss:
--------------------------------------------------------------------------------
1 | //@todo: Variable this up
2 | .view-bar {
3 | width: 100%;
4 | height: 100%;
5 | position: relative;
6 | @extend .app-drag;
7 | }
8 |
9 | .view-bar__title {
10 | font-size: 14px;
11 | line-height: 40px;
12 | text-align: center;
13 |
14 | }
15 |
16 | .view-bar__back-link {
17 | top: 0;
18 | left: 0;
19 | width: 35px;
20 | height: 40px;
21 | text-align: right;
22 | position: absolute;
23 |
24 | i {
25 | width: 35px;
26 | height: 40px;
27 | font-size: 18px;
28 | line-height: 40px;
29 | }
30 | }
31 |
32 | .view-bar__left-content {
33 | top: 0;
34 | left: 0;
35 | width: 40px;
36 | height: 40px;
37 | position: absolute;
38 | }
39 |
40 | .view-bar__right-content {
41 | top: 0;
42 | right: 0;
43 | width: 40px;
44 | height: 40px;
45 | position: absolute;
46 | }
--------------------------------------------------------------------------------
/src/scss/directives/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Breakpoint Directives
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Methods and helpers for working
6 | * with our defined breakpoints.
7 | */
8 |
9 | @mixin breakpoint($breakpoint-name) {
10 |
11 | @if $breakpoint-name == mobile {
12 | @media (max-width: $mobile-max-breakpoint) {
13 | @content
14 | }
15 | }
16 |
17 | @else if $breakpoint-name == tablet {
18 | @media (min-width: $tablet-min-breakpoint) and (max-width: $tablet-max-breakpoint) {
19 | @content;
20 | }
21 | }
22 |
23 | @else if $breakpoint-name == desktop {
24 | @media (min-width: $desktop-min-breakpoint) {
25 | @content;
26 | }
27 | }
28 |
29 | @else if $breakpoint-name == max {
30 | @media (min-width: $max-min-breakpoint) {
31 | @content;
32 | }
33 | }
34 |
35 | }
36 |
37 | @function prefix-breakpoint-class($class-name) {
38 | @return $class-name + $breakpoint-separator;
39 | };
--------------------------------------------------------------------------------
/src/scss/directives/_font-sizes.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Font Size Directives
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Methods to associate with our
6 | * font-size values.
7 | */
8 |
9 | /*
10 | * get-font-size
11 | *
12 | * Retrive the font size for a font size name
13 | */
14 | @function get-font-size($size-name: 'alpha') {
15 | @return map-get($font-sizes, $size-name);
16 | }
--------------------------------------------------------------------------------
/src/scss/directives/_grid.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Grid Directives
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Helpers for grid methods
6 | */
7 |
8 | @function get-grid-gutter($gutter-name: default) {
9 | @return map-get($grid-gutters, $gutter-name);
10 | };
11 |
12 | @mixin silent-relative() {
13 | @if $grid-use-silent == true {
14 | position: relative;
15 | };
16 | };
--------------------------------------------------------------------------------
/src/scss/directives/_headings.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Headings Directives
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Headings directives
6 | */
7 |
8 | /**
9 | * headings-each
10 | *
11 | * Duplicate a block of code, for headings
12 | * from x to y.
13 | */
14 | @mixin headings-each($from: 1, $to: 6){
15 | @for $i from $from through $to{
16 | h#{$i}{
17 | @content;
18 | };
19 | };
20 | };
21 |
22 | /**
23 | * headings
24 | */
25 | @mixin headings() {
26 | h1, h2, h3,
27 | h4, h5, h6 {
28 | @content;
29 | }
30 | }
31 |
32 | @mixin heading($i) {
33 | h#{$i} {
34 | @content;
35 | }
36 | }
--------------------------------------------------------------------------------
/src/scss/directives/_keyframes.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Keyframes Directives
3 | * Jan 2106 - Andrew Hathaway
4 | *
5 | * Directives to help with keyframes
6 | */
7 |
8 | /**
9 | * Keyframes mixin
10 | *
11 | * Usage: @include keyframes([name], { CONTENT });
12 | */
13 | @mixin keyframes($name) {
14 | @-webkit-keyframes #{$name} {
15 | @content;
16 | }
17 |
18 | @-moz-keyframes #{$name} {
19 | @content;
20 | }
21 |
22 | @-ms-keyframes #{$name} {
23 | @content;
24 | }
25 |
26 | @-o-keyframes #{$name} {
27 | @content;
28 | }
29 |
30 | @keyframes #{$name} {
31 | @content;
32 | }
33 | }
--------------------------------------------------------------------------------
/src/scss/directives/_pushes.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Push Directives
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Methods associated with our values
6 | * for pushes.
7 | */
8 |
9 | /**
10 | * get-push-value
11 | *
12 | * Retreive the push value for a spacingName
13 | */
14 | @function get-push-value($spacing-name: 'alpha') {
15 | @return map-get($base-push-values, $spacing-name);
16 | }
--------------------------------------------------------------------------------
/src/scss/directives/_softs.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Soft Directives
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Methods associated with our values
6 | * for soft values.
7 | */
8 |
9 | /**
10 | * get-soft-value
11 | *
12 | * Retreive the sot value for a spacingName
13 | */
14 | @function get-soft-value($spacing-name: 'alpha') {
15 | @return map-get($base-soft-values, $spacing-name);
16 | }
--------------------------------------------------------------------------------
/src/scss/directives/_transparents.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Transparent Directives
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Methods to help with transparancies
6 | */
7 |
8 | /**
9 | * trans-dark
10 | *
11 | * Simple method to help with dark overlays etc
12 | */
13 | @function trans-dark($percentage: 0.5) {
14 | @return rgba(0, 0, 0, $percentage);
15 | }
16 |
17 | /**
18 | * trans-light
19 | *
20 | * Simple method to help with light overlays etc
21 | */
22 | @function trans-light($percentage: 0.5) {
23 | @return rgba(255, 255, 255, $percentage);
24 | }
--------------------------------------------------------------------------------
/src/scss/generic/_app-drag.scss:
--------------------------------------------------------------------------------
1 | .app-drag {
2 | -ms-overflow-style: scrollbar;
3 | -webkit-app-region:drag;
4 | }
5 |
6 | .app-drag--none {
7 | -webkit-app-region: no-drag;
8 | }
--------------------------------------------------------------------------------
/src/scss/generic/_backgrounds.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Backgrounds
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Background helpers
6 | */
7 |
8 | @mixin generate-backgrounds($pre-class-name: null) {
9 | .#{$pre-class-name}bg--none { background: transparent!important; }
10 | .#{$pre-class-name}bg--white { background: white!important; }
11 | .#{$pre-class-name}bg--black { background: black!important; }
12 |
13 | .#{$pre-class-name}bg--success { background: $background-success!important; }
14 | .#{$pre-class-name}bg--error { background: $background-error! important; }
15 | .#{$pre-class-name}bg--warning { background: $background-warning!important; }
16 |
17 | @each $name, $color in $backgrounds {
18 | .#{$pre-class-name}bg--#{$name} { background: $color!important; }
19 | }
20 | }
21 |
22 | /*
23 | * Generate defafult backgrounds
24 | */
25 | @include generate-backgrounds();
26 |
27 | /*
28 | * Generate backgrounds for any
29 | * breakpoints in the variables
30 | */
31 | @each $breakpoint-name in $breakpoint-backgrounds {
32 | @include breakpoint($breakpoint-name) {
33 | @include generate-backgrounds(prefix-breakpoint-class($breakpoint-name));
34 | }
35 | };
--------------------------------------------------------------------------------
/src/scss/generic/_borders.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Borders
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Border helpers
6 | */
7 |
8 | @mixin generate-borders($pre-class-name: null) {
9 | .#{$pre-class-name}border-solid { border-style: solid!important; }
10 | .#{$pre-class-name}border-dashed { border-style: dashed!important; }
11 |
12 | .#{$pre-class-name}border-single { border-width: 1px!important; }
13 |
14 | .#{$pre-class-name}border-top-single { border-top-width: 1px!important; }
15 | .#{$pre-class-name}border-bottom-single { border-bottom-width: 1px!important; }
16 |
17 | .#{$pre-class-name}border-mid-grey { border-color: #D6D6D6!important; }
18 | .#{$pre-class-name}border-light-grey { border-color: #EEE!important; }
19 | .#{$pre-class-name}border-black { border-color: black!important; }
20 | }
21 |
22 | /*
23 | * Generate defafult borders
24 | */
25 | @include generate-borders();
26 |
27 | /*
28 | * Generate borders for any
29 | * breakpoints in the variables
30 | */
31 | @each $breakpoint-name in $breakpoint-borders {
32 | @include breakpoint($breakpoint-name) {
33 | @include generate-borders(prefix-breakpoint-class($breakpoint-name));
34 | }
35 | };
--------------------------------------------------------------------------------
/src/scss/generic/_clearfix.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Clearfix
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * The clear fix object. Extend this
6 | * instead of having it appear in markup
7 | * majority of the time.
8 | */
9 |
10 | .clear {
11 |
12 | &:after {
13 | content: '';
14 | display: table;
15 | clear: both;
16 | }
17 |
18 | }
--------------------------------------------------------------------------------
/src/scss/generic/_displays.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Displays
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Display helpers
6 | */
7 |
8 | @mixin generate-displays($pre-class-name: null) {
9 | .#{$pre-class-name}display--hidden { display: none!important; }
10 | .#{$pre-class-name}display--block { display: block!important; }
11 | .#{$pre-class-name}display--inline { display: inline!important; }
12 | .#{$pre-class-name}display--inline-block { display: inline-block!important; }
13 | .#{$pre-class-name}display--table { display: table!important; }
14 | .#{$pre-class-name}display--table-cell { display: table-cell!important; }
15 | }
16 |
17 | /*
18 | * Generate default displays
19 | */
20 | @include generate-displays();
21 |
22 | /*
23 | * Generate displays for any breakpoints
24 | * setup in the variables.
25 | */
26 | @each $breakpoint-name in $breakpoint-displays {
27 | @include breakpoint($breakpoint-name) {
28 | @include generate-displays(prefix-breakpoint-class($breakpoint-name));
29 | };
30 | };
--------------------------------------------------------------------------------
/src/scss/generic/_floats.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Floats
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Float helpers
6 | */
7 |
8 | @mixin generate-floats($pre-class-name: null) {
9 | .#{$pre-class-name}float--left { float: left!important; }
10 | .#{$pre-class-name}float--right { float: right!important; }
11 | .#{$pre-class-name}float--none { float: none!important; }
12 | }
13 |
14 | /*
15 | * Generate default floats
16 | */
17 | @include generate-floats();
18 |
19 | /*
20 | * Generate floats for any breakpoints
21 | * setup in the variables.
22 | */
23 | @each $breakpoint-name in $breakpoint-floats {
24 | @include breakpoint($breakpoint-name) {
25 | @include generate-floats(prefix-breakpoint-class($breakpoint-name));
26 | }
27 | }
--------------------------------------------------------------------------------
/src/scss/generic/_hards.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Hards
3 | * March 2016 - Andrew Hathaway
4 | *
5 | * Generate hard (padding) rules for values.
6 | */
7 | @mixin generate-hard-rules($class-pre-name) {
8 | .#{$class-pre-name}hard { padding: 0!important; }
9 | .#{$class-pre-name}hard--top { padding-top: 0!important; }
10 | .#{$class-pre-name}hard--bottom { padding-bottom: 0!important; }
11 | .#{$class-pre-name}hard--left { padding-left: 0!important; }
12 | .#{$class-pre-name}hard--right { padding-right: 0!important; }
13 | .#{$class-pre-name}hard--ends { padding-top: 0!important;
14 | padding-bottom: 0!important; }
15 | .#{$class-pre-name}hard--sides { padding-left: 0!important;
16 | padding-right: 0!important; }
17 | };
18 |
19 | /*
20 | * Generate the standard hards
21 | */
22 | @include generate-hard-rules(null);
23 |
24 | /*
25 | * For each breakpoint, generate the hards.
26 | */
27 | @each $breakpoint-name in $breakpoint-hards {
28 | @include breakpoint($breakpoint-name) {
29 | @include generate-hard-rules(prefix-breakpoint-class($breakpoint-name));
30 | }
31 | };
--------------------------------------------------------------------------------
/src/scss/generic/_heights.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Heights
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Height helpers
6 | */
7 |
8 | @mixin generate-heights($pre-class-name: null) {
9 | /*
10 | * None-fractional heights
11 | */
12 |
13 | .#{$pre-class-name}height--full { height: 100%!important; }
14 | .#{$pre-class-name}height--auto { height: auto!important; }
15 |
16 | .#{$pre-class-name}height--20 { height: 20px!important; }
17 | .#{$pre-class-name}height--30 { height: 30px!important; }
18 | .#{$pre-class-name}height--40 { height: 40px!important; }
19 | .#{$pre-class-name}height--80 { height: 80px!important; }
20 | .#{$pre-class-name}height--90 { height: 90px!important; }
21 | .#{$pre-class-name}height--100 { height: 100px!important; }
22 | .#{$pre-class-name}height--300 { height: 300px!important; }
23 | .#{$pre-class-name}height--340 { height: 340px!important; }
24 | .#{$pre-class-name}height--400 { height: 400px!important; }
25 | }
26 |
27 | /*
28 | * Generate defafult heights
29 | */
30 | @include generate-heights();
31 |
32 | /*
33 | * Generate heights for any
34 | * breakpoints in the variables
35 | */
36 | @each $breakpoint-name in $breakpoint-heights {
37 | @include breakpoint($breakpoint-name) {
38 | @include generate-heights(prefix-breakpoint-class($breakpoint-name));
39 | }
40 | };
--------------------------------------------------------------------------------
/src/scss/generic/_highers.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Highers
3 | * March 2016 - Andrew Hathaway
4 | *
5 | * Generate z-index helpers
6 | */
7 | .higher { z-index: $higher; }
8 |
9 | @mixin generate-higher-rule($higher-name: 'alpha', $sizing-value: $higher) {
10 | .higher--#{$higher-name} { z-index: $sizing-value; }
11 | };
12 |
13 | @each $sizing-name, $sizing-value in $higher-sizes {
14 | @include generate-higher-rule($sizing-name, $sizing-value);
15 | };
--------------------------------------------------------------------------------
/src/scss/generic/_line-heights.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Line Heights
3 | * May 2016 - Andrew Hathaway
4 | *
5 | * Line Heights
6 | */
7 |
8 | @mixin generate-line-heights($pre-class-name: null) {
9 | .#{$pre-class-name}line-height--none { line-height: 1em!important; }
10 | .#{$pre-class-name}line-height--1-3 { line-height: 1.3em!important; }
11 |
12 | .#{$pre-class-name}line-height--20 { line-height: 20px!important; }
13 | .#{$pre-class-name}line-height--25 { line-height: 25px!important; }
14 | .#{$pre-class-name}line-height--30 { line-height: 30px!important; }
15 | .#{$pre-class-name}line-height--40 { line-height: 40px!important; }
16 | }
17 |
18 | @include generate-line-heights();
19 |
20 | @each $breakpoint-name in $breakpoint-line-heights {
21 | @include breakpoint($breakpoint-name) {
22 | @include generate-line-heights(prefix-breakpoint-class($breakpoint-name));
23 | }
24 | };
--------------------------------------------------------------------------------
/src/scss/generic/_max-widths.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Max Widths
3 | * Mar 2016 - Andrew Hathaway
4 | *
5 | * Max-Width helpers
6 | */
7 |
8 | @mixin generate-max-widths($pre-class-name: null) {
9 | /*
10 | * None-fractional max-widths
11 | */
12 | .#{$pre-class-name}max-width--200 { max-width: 200px!important; }
13 | .#{$pre-class-name}max-width--240 { max-width: 240px!important; }
14 | .#{$pre-class-name}max-width--290 { max-width: 290px!important; }
15 | .#{$pre-class-name}max-width--450 { max-width: 450px!important; }
16 | .#{$pre-class-name}max-width--540 { max-width: 540px!important; }
17 |
18 | .#{$pre-class-name}max-width--35p { max-width: 35%!important; }
19 | .#{$pre-class-name}max-width--50p { max-width: 50%!important; }
20 | .#{$pre-class-name}max-width--75p { max-width: 75%!important; }
21 | }
22 |
23 | /*
24 | * Generate defafult max-widths
25 | */
26 | @include generate-max-widths();
27 |
28 | /*
29 | * Generate max-widths for any
30 | * breakpoints in the variables
31 | */
32 | @each $breakpoint-name in $breakpoint-max-widths {
33 | @include breakpoint($breakpoint-name) {
34 | @include generate-max-widths(prefix-breakpoint-class($breakpoint-name));
35 | }
36 | };
--------------------------------------------------------------------------------
/src/scss/generic/_min-heights.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Min Height
3 | * Mar 2016 - Andrew Hathaway
4 | *
5 | * Min-Height helpers
6 | */
7 |
8 | @mixin generate-min-heights($pre-class-name: null) {
9 | /*
10 | * None-fractional min-heights
11 | */
12 | .#{$pre-class-name}min-height--full { min-height: 100%!important; }
13 | }
14 |
15 | /*
16 | * Generate defafult min-heights
17 | */
18 | @include generate-min-heights();
19 |
20 | /*
21 | * Generate min-heights for any
22 | * breakpoints in the variables
23 | */
24 | @each $breakpoint-name in $breakpoint-min-heights {
25 | @include breakpoint($breakpoint-name) {
26 | @include generate-min-heights(prefix-breakpoint-class($breakpoint-name));
27 | }
28 | };
--------------------------------------------------------------------------------
/src/scss/generic/_n-tops.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Negative Tops
3 | *
4 | */
5 |
6 | @mixin generate-n-tops($pre-class-name: null) {
7 | @each $name, $size in $n-top-sizes {
8 | .#{$pre-class-name}n-top--#{$name} { top: $size!important; }
9 | }
10 | };
11 |
12 | @include generate-n-tops();
13 |
14 | @each $breakpoint-name in $breakpoint-n-tops {
15 | @include breakpoint($breakpoint-name) {
16 | @include generate-n-tops(prefix-breakpoint-class($breakpoint-name));
17 | }
18 | }
--------------------------------------------------------------------------------
/src/scss/generic/_overflows.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Overflows
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Overflow helpers
6 | */
7 |
8 | @mixin generate-overflows($pre-class-name: null) {
9 | .#{$pre-class-name}overflow--visible { overflow: visible!important; }
10 | .#{$pre-class-name}overflow--hidden { overflow: hidden!important; }
11 | .#{$pre-class-name}overflow--scroll { overflow: scroll!important; }
12 | .#{$pre-class-name}overflow--xscroll { overflow-x: scroll!important; }
13 | .#{$pre-class-name}overflow--yscroll { overflow-y: scroll!important; }
14 | }
15 |
16 | /*
17 | * Generate default overflows
18 | */
19 | @include generate-overflows();
20 |
21 | /*
22 | * Generate overflows for any breakpoints
23 | * setup in the variables
24 | */
25 | @each $breakpoint-name in $breakpoint-overflows {
26 | @include breakpoint($breakpoint-name) {
27 | @include generate-overflows(prefix-breakpoint-class($breakpoint-name));
28 | };
29 | };
--------------------------------------------------------------------------------
/src/scss/generic/_positionings.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Positionings
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Generate position rules
6 | */
7 |
8 | @mixin generate-positionings($class-pre-name: null) {
9 | .#{$class-pre-name}position--static { position: static!important; }
10 | .#{$class-pre-name}position--fixed { position: fixed!important; }
11 | .#{$class-pre-name}position--relative { position: relative!important; }
12 | .#{$class-pre-name}position--absolute { position: absolute!important; }
13 | }
14 |
15 | /*
16 | * Generate default positionings
17 | */
18 | @include generate-positionings();
19 |
20 | /*
21 | * Generate positionings for any breakpoints
22 | * setup in the variables
23 | */
24 | @each $breakpoint-name in $breakpoint-positionings {
25 | @include breakpoint($breakpoint-name) {
26 | @include generate-positionings(prefix-breakpoint-class($breakpoint-name));
27 | }
28 | }
--------------------------------------------------------------------------------
/src/scss/generic/_pushes.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Pushes
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Generate push rules for required values
6 | */
7 |
8 | @mixin generate-push-rules($class-pre-name: null, $spacing-name: 'alpha') {
9 | .#{$class-pre-name}push-#{$spacing-name} { margin: get-push-value($spacing-name)!important; }
10 | .#{$class-pre-name}push-#{$spacing-name}--top { margin-top: get-push-value($spacing-name)!important; }
11 | .#{$class-pre-name}push-#{$spacing-name}--bottom { margin-bottom: get-push-value($spacing-name)!important; }
12 | .#{$class-pre-name}push-#{$spacing-name}--left { margin-left: get-push-value($spacing-name)!important; }
13 | .#{$class-pre-name}push-#{$spacing-name}--right { margin-right: get-push-value($spacing-name)!important; }
14 | .#{$class-pre-name}push-#{$spacing-name}--ends { margin-top: get-push-value($spacing-name)!important;
15 | margin-bottom: get-push-value($spacing-name)!important; }
16 | .#{$class-pre-name}push-#{$spacing-name}--sides { margin-left: get-push-value($spacing-name)!important;
17 | margin-right: get-push-value($spacing-name)!important; }
18 | }
19 |
20 | @mixin generate-push-autos($class-pre-name: null) {
21 | .#{$class-pre-name}push-auto--sides {
22 | margin-left: auto!important;
23 | margin-right: auto!important;
24 | }
25 | }
26 |
27 | /*
28 | * Generate a set of push rules for the
29 | * defined push-values.
30 | */
31 | @each $spacing-name, $spacing-value in $base-push-values {
32 | @include generate-push-rules(null, $spacing-name);
33 | }
34 |
35 | /*
36 | * Generate default push-auto rules
37 | */
38 | @include generate-push-autos();
39 |
40 | /*
41 | * Generate a set of push rules for the breakpoints
42 | * defined in each sets list. Wrap them in a breakpoint
43 | * and prefix the class with the breakpoint name and -.
44 | */
45 | @each $spacing-name, $breakpoint-list in $breakpoint-pushes {
46 | @each $breakpoint-name in $breakpoint-list {
47 | @include breakpoint($breakpoint-name) {
48 | @include generate-push-rules(prefix-breakpoint-class($breakpoint-name), $spacing-name);
49 | };
50 | };
51 | };
52 |
53 | /*
54 | * Generate the set of push autos for
55 | * breakpoints defined in the variables.
56 | */
57 | @each $breakpoint-name in $breakpoint-push-autos {
58 | @include breakpoint($breakpoint-name) {
59 | @include generate-push-autos(prefix-breakpoint-class($breakpoint-name));
60 | };
61 | };
--------------------------------------------------------------------------------
/src/scss/generic/_round.scss:
--------------------------------------------------------------------------------
1 | .round { @include border-radius($default-border-radius); }
--------------------------------------------------------------------------------
/src/scss/generic/_softs.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Softs
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Generate soft (padding) rules for
6 | * required values
7 | */
8 | @mixin generate-soft-rules($class-pre-name, $spacing-name: 'alpha') {
9 | .#{$class-pre-name}soft-#{$spacing-name} { padding: get-soft-value($spacing-name)!important; }
10 | .#{$class-pre-name}soft-#{$spacing-name}--top { padding-top: get-soft-value($spacing-name)!important; }
11 | .#{$class-pre-name}soft-#{$spacing-name}--bottom { padding-bottom: get-soft-value($spacing-name)!important; }
12 | .#{$class-pre-name}soft-#{$spacing-name}--left { padding-left: get-soft-value($spacing-name)!important; }
13 | .#{$class-pre-name}soft-#{$spacing-name}--right { padding-right: get-soft-value($spacing-name)!important; }
14 | .#{$class-pre-name}soft-#{$spacing-name}--ends { padding-top: get-soft-value($spacing-name)!important;
15 | padding-bottom: get-soft-value($spacing-name)!important; }
16 | .#{$class-pre-name}soft-#{$spacing-name}--sides { padding-left: get-soft-value($spacing-name)!important;
17 | padding-right: get-soft-value($spacing-name)!important; }
18 | }
19 |
20 | /*
21 | * Generate a set of soft rules for the
22 | * defined soft-values.
23 | */
24 | @each $spacing-name, $spacing-value in $base-soft-values {
25 | @include generate-soft-rules(null, $spacing-name);
26 | };
27 |
28 | /*
29 | * Generate a set of soft rules for the breakpoints
30 | * defined in each sets list. Wrap them in a breakpoint
31 | * and prefix the class with the breakpoint name and -.
32 | */
33 | @each $spacing-name, $breakpoint-list in $breakpoint-softs {
34 | @each $breakpoint-name in $breakpoint-list {
35 | @include breakpoint($breakpoint-name) {
36 | @include generate-soft-rules(prefix-breakpoint-class($breakpoint-name), $spacing-name);
37 | };
38 | };
39 | };
--------------------------------------------------------------------------------
/src/scss/generic/_text-aligns.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Text Aligns
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Text align helpers
6 | */
7 |
8 | @mixin generate-text-aligns($pre-class-name: null) {
9 | .#{$pre-class-name}text--center { text-align: center!important; }
10 | .#{$pre-class-name}text--left { text-align: left!important; }
11 | .#{$pre-class-name}text--right { text-align: right!important; }
12 | }
13 |
14 | /*
15 | * Generate default text aligns
16 | */
17 | @include generate-text-aligns();
18 |
19 | /*
20 | * Generate text aligns for any
21 | * breakpoints in the variables
22 | */
23 | @each $breakpoint-name in $breakpoint-text-aligns {
24 | @include breakpoint($breakpoint-name) {
25 | @include generate-text-aligns(prefix-breakpoint-class($breakpoint-name));
26 | };
27 | };
--------------------------------------------------------------------------------
/src/scss/generic/_text-colors.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Text Colors
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Text color helpers
6 | */
7 |
8 | @mixin generate-text-colors($pre-class-name: null) {
9 | .#{$pre-class-name}text--white { color: white!important; }
10 | .#{$pre-class-name}text--error { color: $background-error!important; }
11 | }
12 |
13 | /*
14 | * Generate default text aligns
15 | */
16 | @include generate-text-colors();
17 |
18 | /*
19 | * Generate text colors for any
20 | * breakpoints in the variables
21 | */
22 | @each $breakpoint-name in $breakpoint-text-colors {
23 | @include breakpoint($breakpoint-name) {
24 | @include generate-text-colors(prefix-breakpoint-class($breakpoint-name));
25 | };
26 | };
--------------------------------------------------------------------------------
/src/scss/generic/_text-emboss.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Text Embossings
3 | * May 2016 - Andrew Hathaway
4 | *
5 | * Text Embossings
6 | */
7 | @mixin generate-text-embossings($pre-class-name: null) {
8 | .#{$pre-class-name}text--emboss { text-shadow: 0 1px rgba(0, 0, 0, .4); }
9 | }
10 |
11 | @include generate-text-embossings();
12 |
13 | @each $breakpoint-name in $breakpoint-text-embossings {
14 | @include breakpoint($breakpoint-name) {
15 | @include generate-text-embossings(prefix-breakpoint-class($breakpoint-name));
16 | }
17 | };
--------------------------------------------------------------------------------
/src/scss/generic/_text-fonts.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Text Fonts
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Text font helpers
6 | */
7 |
8 | @mixin generate-text-fonts($pre-class-name: null) {
9 | .#{$pre-class-name}text--primary { font-family: $primary-font!important; }
10 | }
11 |
12 | /*
13 | * Generate default text fonts
14 | */
15 | @include generate-text-fonts();
16 |
17 | /*
18 | * Generate text fonts for any
19 | * breakpoints in the variables
20 | */
21 | @each $breakpoint-name in $breakpoint-text-fonts {
22 | @include breakpoint($breakpoint-name) {
23 | @include generate-text-fonts(prefix-breakpoint-class($breakpoint-name));
24 | };
25 | };
--------------------------------------------------------------------------------
/src/scss/generic/_text-sizes.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Text Sizes
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Text size helpers
6 | */
7 |
8 | @mixin generate-text-sizes($pre-class-name: null) {
9 | @each $size-name, $font-size in $font-sizes {
10 | .#{$pre-class-name}text--#{$size-name} { font-size: $font-size!important; }
11 | };
12 | };
13 |
14 | /*
15 | * Generate the default text sizes
16 | */
17 | @include generate-text-sizes();
18 |
19 | /*
20 | * Generate a set of text size rules for the breakpoints
21 | * defined in each sets list. Wrap them in a breakpoint
22 | * and prefix them with the class and the breakpoint name.
23 | */
24 | @each $space-name, $breakpoint-list in $breakpoint-font-sizes {
25 | @each $breakpoint-name in $breakpoint-list {
26 | @include breakpoint($breakpoint-name) {
27 | @include generate-text-sizes(prefix-breakpoint-class($breakpoint-name));
28 | };
29 | };
30 | };
--------------------------------------------------------------------------------
/src/scss/generic/_text-transforms.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Text Transforms
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Text font helpers
6 | */
7 |
8 | @mixin generate-text-transforms($pre-class-name: null) {
9 | .#{$pre-class-name}text--no-transform { text-transform: none!important; }
10 | .#{$pre-class-name}text--uppercase { text-transform: uppercase!important; }
11 | .#{$pre-class-name}text--lowercase { text-transform: lowercase!important; }
12 | .#{$pre-class-name}text--capitalize { text-transform: capitalize!important; }
13 | }
14 |
15 | /*
16 | * Generate default text transforms
17 | */
18 | @include generate-text-transforms();
19 |
20 | /*
21 | * Generate text transforms for any
22 | * breakpoints in the variables
23 | */
24 | @each $breakpoint-name in $breakpoint-text-transforms {
25 | @include breakpoint($breakpoint-name) {
26 | @include generate-text-transforms(prefix-breakpoint-class($breakpoint-name));
27 | };
28 | };
--------------------------------------------------------------------------------
/src/scss/generic/_text-weights.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Text Weights
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Text weight helpers
6 | */
7 |
8 | @mixin generate-text-weights($pre-class-name: null) {
9 | .#{$pre-class-name}text--bold { font-weight: bold!important; }
10 | .#{$pre-class-name}text--normal { font-weight: normal!important; }
11 | }
12 |
13 | /*
14 | * Generate default text weights
15 | */
16 | @include generate-text-weights();
17 |
18 | /*
19 | * Generate text weights for any
20 | * breakpoints in the variables
21 | */
22 | @each $breakpoint-name in $breakpoint-text-weights {
23 | @include breakpoint($breakpoint-name) {
24 | @include generate-text-weights(prefix-breakpoint-class($breakpoint-name));
25 | };
26 | };
--------------------------------------------------------------------------------
/src/scss/generic/_tops.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Negative Tops
3 | *
4 | */
5 |
6 | @mixin generate-tops($pre-class-name: null) {
7 | @each $name, $size in $top-sizes {
8 | .#{$pre-class-name}top--#{$name} { top: $size!important; }
9 | }
10 | };
11 |
12 | @include generate-tops();
13 |
14 | @each $breakpoint-name in $breakpoint-tops {
15 | @include breakpoint($breakpoint-name) {
16 | @include generate-tops(prefix-breakpoint-class($breakpoint-name));
17 | }
18 | }
--------------------------------------------------------------------------------
/src/scss/objects/_cover-height.scss:
--------------------------------------------------------------------------------
1 | .cover-height {
2 | width: 100%;
3 | overflow: hidden;
4 | max-height: 120px;
5 | @include transition(max-height .25s ease);
6 | }
7 |
8 | .cover-height--130 {
9 | max-height: 130px;
10 | }
11 |
12 | .cover-height--show {
13 | max-height: 9000px!important;
14 | }
15 |
16 | .cover-height--to-470.cover-height--show {
17 | max-height: 470px!important;
18 | }
--------------------------------------------------------------------------------
/src/scss/objects/_dialog.scss:
--------------------------------------------------------------------------------
1 |
2 | .dialog {
3 | width: 100%;
4 | height: 100%;
5 | display: table;
6 | }
7 |
8 | .dialog__cell {
9 | text-align: center;
10 | display: table-cell;
11 | vertical-align: middle;
12 | }
--------------------------------------------------------------------------------
/src/scss/objects/_dropdown.scss:
--------------------------------------------------------------------------------
1 | .dropdown {
2 | position: relative;
3 | }
4 |
5 | .dropdown__menu {
6 | top: 100%;
7 | right: 0;
8 | display: none;
9 | position: absolute;
10 | }
11 |
12 | .dropdown--open .dropdown__menu {
13 | display: block;
14 | }
15 |
16 | .dropdown__menu--center {
17 | left: 50%;
18 | right: auto;
19 | }
--------------------------------------------------------------------------------
/src/scss/objects/_fixed-overlay.scss:
--------------------------------------------------------------------------------
1 |
2 | .fixed-overlay {
3 | width: 100%;
4 | height: 100%;
5 | position: fixed;
6 | z-index: 99999999999999;
7 | }
--------------------------------------------------------------------------------
/src/scss/objects/_flexi-side.scss:
--------------------------------------------------------------------------------
1 | .flexi-side {
2 | width: 100%;
3 | display: table;
4 | position: relative;
5 | }
6 |
7 | .flexi-side__side,
8 | .flexi-side__content {
9 | display: table-cell;
10 | vertical-align: middle;
11 | }
12 |
13 | .flexi-side__side {
14 | height: 100%;
15 | }
16 |
17 | .flexi-side__content {
18 | width: 100%;
19 | }
--------------------------------------------------------------------------------
/src/scss/objects/_grid.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Grid System
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * Awesome grid system. Split out
6 | * from CSSWizardry Grids.
7 | */
8 |
9 | .grid {
10 | list-style: none;
11 | margin: 0;
12 | padding: 0;
13 | margin-left: get-grid-gutter() * -1;
14 | }
15 |
16 | @if $grid-use-markup-fix != true {
17 | /* Opera hack */
18 | .opera:-o-prefocus,
19 | .grid{
20 | word-spacing:-0.43em;
21 | }
22 | }
23 |
24 | .grid__item {
25 | display: inline-block;
26 | padding-left: get-grid-gutter();
27 | vertical-align: top;
28 |
29 | @if $grid-mobile-first == true {
30 | width: 100%;
31 | }
32 |
33 | @if $grid-use-markup-fix != true {
34 | letter-spacing: normal;
35 | word-spacing: normal;
36 | }
37 | }
38 |
39 | /**
40 | * Modifiers
41 | */
42 |
43 | /*
44 | * Reversed grids allow you to structure your source in the opposite order to
45 | * how your rendered layout will appear. Extends `.grid`.
46 | */
47 | .grid--rev {
48 | direction: rtl;
49 | text-align: left;
50 |
51 | > .grid__item {
52 | direction: ltr;
53 | text-align: left;
54 | }
55 | }
56 |
57 | /*
58 | * Gutterless grids have all the properties of regular grids, minus any spacing.
59 | * Extends `.grid`.
60 | */
61 | .grid--full {
62 | margin-left: 0;
63 |
64 | > .grid__item {
65 | padding-left: 0;
66 | }
67 | }
68 |
69 | /*
70 | * Align the entire grid to the right. Extends `.grid`.
71 | */
72 | .grid--right {
73 | text-align: right;
74 |
75 | > .grid__item {
76 | text-align: left;
77 | }
78 | }
79 |
80 | /*
81 | * Centered grids align grid items centrally without needing to use push or pull
82 | * classes. Extends `.grid`.
83 | */
84 | .grid--center {
85 | text-align: center;
86 |
87 | > .grid__item {
88 | text-align: left;
89 | }
90 | }
91 |
92 | /*
93 | * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
94 | * `.grid`.
95 | */
96 | .grid--middle {
97 | > .grid__item {
98 | vertical-align: middle;
99 | }
100 | }
101 |
102 | .grid--bottom {
103 | > .grid__item {
104 | vertical-align: bottom;
105 | }
106 | }
107 |
108 | /*
109 | * Generate gutter methods for any
110 | * others than the default.
111 | *
112 | * SIDENOTE: WHY CANNOT SASS JUST GET @CONTINUE
113 | */
114 | @each $gutter-name, $gutter-value in $grid-gutters {
115 | @if $gutter-name != default {
116 | .grid--#{$gutter-name} {
117 | margin-left: -$gutter-value;
118 |
119 | > .grid__item {
120 | padding-left: $gutter-value;
121 | }
122 | }
123 | }
124 | }
--------------------------------------------------------------------------------
/src/scss/objects/_hard-bottom.scss:
--------------------------------------------------------------------------------
1 | .hard-bottom {
2 | width: 100%;
3 | height: 100%;
4 | position: relative; //@todo: Mixin these rules? fullRelative()
5 | }
6 |
7 | .hard-bottom__bottom {
8 | bottom: 0;
9 | width: 100%;
10 | position: absolute;
11 | height: $hard-bottom-width;
12 | }
13 |
14 | .hard-bottom__content {
15 | width: 100%;
16 | height: 100%;
17 | padding-bottom: $hard-bottom-width;
18 | }
19 |
20 | @mixin generate-hard-bottoms($post-class-name: null) {
21 | .hard-bottom--#{$post-class-name} {
22 | > .hard-bottom__bottom { height: map-get($hard-bottom-sizes, $post-class-name); }
23 | > .hard-bottom__content { padding-bottom: map-get($hard-bottom-sizes, $post-class-name); }
24 | }
25 | };
26 |
27 | @each $hard-name, $hard-size in $hard-bottom-sizes {
28 | @include generate-hard-bottoms($hard-name);
29 | }
--------------------------------------------------------------------------------
/src/scss/objects/_hard-left.scss:
--------------------------------------------------------------------------------
1 | .hard-left {
2 | width: 100%;
3 | height: 100%;
4 | overflow: hidden;
5 | position: relative; //@todo: Mixin these rules? fullRelative()
6 | }
7 |
8 | .hard-left__left {
9 | top: 0;
10 | left: 0;
11 | bottom: 0;
12 | height: 100%;
13 | position: absolute;
14 | width: $hard-left-width;
15 | @include transition(left .25s ease-in-out);
16 | }
17 |
18 | .hard-left__content {
19 | width: 100%;
20 | height: 100%;
21 | padding-left: $hard-left-width;
22 | @include transition(padding-left .25s ease-in-out);
23 | }
24 |
25 | .hard-left--pull {
26 | > .hard-left__left { left: -$hard-left-width; }
27 | > .hard-left__content { padding-left: 0; }
28 | }
29 |
30 | @mixin generate-hards($post-class-name: null) {
31 | .hard-left--#{$post-class-name} {
32 | > .hard-left__left { width: map-get($hard-left-sizes, $post-class-name); }
33 | > .hard-left__content { padding-left: map-get($hard-left-sizes, $post-class-name)!important; }
34 |
35 | &.hard-left--pull {
36 | > .hard-left__left { left: -map-get($hard-left-sizes, $post-class-name); }
37 | > .hard-left__content { padding-left: 0; }
38 | }
39 | }
40 | };
41 |
42 | @each $hard-name, $hard-size in $hard-left-sizes {
43 | @include generate-hards($hard-name);
44 | }
--------------------------------------------------------------------------------
/src/scss/objects/_hard-right.scss:
--------------------------------------------------------------------------------
1 | .hard-right {
2 | width: 100%;
3 | height: 100%;
4 | overflow: hidden;
5 | position: relative; //@todo: Mixin these rules? fullRelative()
6 | }
7 |
8 | .hard-right--allow-overflow {
9 | overflow: visible;
10 | }
11 |
12 | .hard-right__right {
13 | top: 0;
14 | right: 0;
15 | bottom: 0;
16 | height: 100%;
17 | position: absolute;
18 | width: $hard-right-width;
19 | @include transition(right .25s ease-in-out);
20 | }
21 |
22 | .hard-right__content {
23 | width: 100%;
24 | height: 100%;
25 | padding-right: $hard-right-width;
26 | @include transition(padding-right .25s ease-in-out);
27 | }
28 |
29 | .hard-right--pull {
30 | overflow: hidden;
31 |
32 | > .hard-right__right { right: -$hard-right-width; }
33 | > .hard-right__content { padding-right: 0; }
34 | }
35 |
36 | @mixin generate-hards($post-class-name: null) {
37 | .hard-right--#{$post-class-name} {
38 | > .hard-right__right { width: map-get($hard-right-sizes, $post-class-name); }
39 | > .hard-right__content { padding-right: map-get($hard-right-sizes, $post-class-name)!important; }
40 |
41 | &.hard-right--pull {
42 | > .hard-right__right { right: map-get($hard-right-sizes, $post-class-name); }
43 | > .hard-right__content { padding-right: 0; }
44 | }
45 | }
46 | };
47 |
48 | @each $hard-name, $hard-size in $hard-right-sizes {
49 | @include generate-hards($hard-name);
50 | }
--------------------------------------------------------------------------------
/src/scss/objects/_hard-top.scss:
--------------------------------------------------------------------------------
1 | .hard-top {
2 | width: 100%;
3 | height: 100%;
4 | position: relative; //@todo: Mixin these rules? fullRelative()
5 | }
6 |
7 | .hard-top__top {
8 | top: 0;
9 | top: 0;
10 | bottom: 0;
11 | z-index: 9;
12 | width: 100%;
13 | position: absolute;
14 | height: $hard-top-width;
15 | }
16 |
17 | .hard-top__content {
18 | width: 100%;
19 | height: 100%;
20 | padding-top: $hard-top-width;
21 | }
22 |
23 | @mixin generate-hard-tops($post-class-name: null) {
24 | .hard-top--#{$post-class-name} {
25 | > .hard-top__top { height: map-get($hard-top-sizes, $post-class-name); }
26 | > .hard-top__content { padding-top: map-get($hard-top-sizes, $post-class-name); }
27 | }
28 | };
29 |
30 | @each $hard-name, $hard-size in $hard-top-sizes {
31 | @include generate-hard-tops($hard-name);
32 | }
33 |
34 | .hard-top--disable {
35 | .hard-top__top { display: none!important; }
36 | .hard-top__content { padding-top: 0px!important; }
37 | }
--------------------------------------------------------------------------------
/src/scss/objects/_hideable-left.scss:
--------------------------------------------------------------------------------
1 |
2 | .hideable-left {
3 | width: 100%;
4 | height: 100%;
5 | position: relative;
6 | }
7 |
8 | .hideable-left__left {
9 | top: 0;
10 | left: 0;
11 | bottom: 0;
12 | height: 100%;
13 | width: 200px;
14 | z-index: 9999;
15 | position: absolute;
16 | }
17 |
18 | .hideable-left__content {
19 | width: 100%;
20 | height: 100%;
21 | position: relative;
22 | padding-left: 200px;
23 | };
24 |
25 | @include breakpoint(mobile) {
26 | .hideable-left__content {
27 | padding-left: 0;
28 | }
29 | .hideable-left__left {
30 | display: none;
31 | }
32 | }
--------------------------------------------------------------------------------
/src/scss/objects/_img-scale.scss:
--------------------------------------------------------------------------------
1 | .img-scale {
2 | width: 100%;
3 | height: auto;
4 | }
--------------------------------------------------------------------------------
/src/scss/objects/_loading-overlay.scss:
--------------------------------------------------------------------------------
1 | .loading-overlay {
2 | position: relative;
3 | }
4 |
5 | .loading-overlay__overlay {
6 | top: 0;
7 | left: 0;
8 | z-index: 2;
9 | width: 100%;
10 | height: 100%;
11 | position: absolute;
12 | }
--------------------------------------------------------------------------------
/src/scss/objects/_media.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Media Object
3 | * Jan 2016 - Andrew Hathaway
4 | *
5 | * The media object:
6 | * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
7 | */
8 |
9 | .media {
10 | @extend .clear;
11 | @extend .display--block;
12 | }
13 |
14 | .media__img {
15 | float: left;
16 | margin-right: 20px; // @todo: replace
17 | }
18 |
19 | .media--right .media__img {
20 | float: right;
21 | margin-left: 20px; // @todo: replace
22 | margin-right: 0;
23 | }
24 |
25 | .media__body {
26 | overflow: hidden;
27 |
28 | &, & > :last-child {
29 | margin-bottom: 0;
30 | }
31 | }
--------------------------------------------------------------------------------
/src/scss/objects/_truncate.scss:
--------------------------------------------------------------------------------
1 | .truncate {
2 | width: 100%;
3 | white-space: nowrap;
4 | overflow: hidden;
5 | text-overflow: ellipsis;
6 | }
--------------------------------------------------------------------------------
/src/scss/objects/_vscroll.scss:
--------------------------------------------------------------------------------
1 | .vscroll {
2 | width: 100%;
3 | height: 100%;
4 | overflow-y: auto;
5 | position: relative;
6 | }
7 |
8 | .vscroll__content {
9 | top: 0;
10 | left: 0;
11 | right: 0;
12 | bottom: 0;
13 | width: 100%;
14 | height: 100%;
15 | position: absolute;
16 | }
--------------------------------------------------------------------------------
/src/scss/vendors/_virtualized.scss:
--------------------------------------------------------------------------------
1 | /* Collection default theme */
2 |
3 | .ReactVirtualized__Collection {
4 | }
5 |
6 | .ReactVirtualized__Collection__innerScrollContainer {
7 | }
8 |
9 | /* Grid default theme */
10 |
11 | .ReactVirtualized__Grid {
12 | }
13 |
14 | .ReactVirtualized__Grid__innerScrollContainer {
15 | }
16 |
17 | /* Table default theme */
18 |
19 | .ReactVirtualized__Table {
20 | }
21 |
22 | .ReactVirtualized__Table__Grid {
23 | }
24 |
25 | .ReactVirtualized__Table__headerRow {
26 | font-weight: 700;
27 | text-transform: uppercase;
28 | display: flex;
29 | flex-direction: row;
30 | align-items: center;
31 | }
32 | .ReactVirtualized__Table__row {
33 | display: flex;
34 | flex-direction: row;
35 | align-items: center;
36 | }
37 |
38 | .ReactVirtualized__Table__headerTruncatedText {
39 | display: inline-block;
40 | max-width: 100%;
41 | white-space: nowrap;
42 | text-overflow: ellipsis;
43 | overflow: hidden;
44 | }
45 |
46 | .ReactVirtualized__Table__headerColumn,
47 | .ReactVirtualized__Table__rowColumn {
48 | margin-right: 10px;
49 | min-width: 0px;
50 | }
51 | .ReactVirtualized__Table__rowColumn {
52 | text-overflow: ellipsis;
53 | white-space: nowrap;
54 | }
55 |
56 | .ReactVirtualized__Table__headerColumn:first-of-type,
57 | .ReactVirtualized__Table__rowColumn:first-of-type {
58 | margin-left: 10px;
59 | }
60 | .ReactVirtualized__Table__sortableHeaderColumn {
61 | cursor: pointer;
62 | }
63 |
64 | .ReactVirtualized__Table__sortableHeaderIconContainer {
65 | display: flex;
66 | align-items: center;
67 | }
68 | .ReactVirtualized__Table__sortableHeaderIcon {
69 | flex: 0 0 24px;
70 | height: 1em;
71 | width: 1em;
72 | fill: currentColor;
73 | }
74 |
75 | /* List default theme */
76 |
77 | .ReactVirtualized__List {
78 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions" : {
3 | "target" : "ES5",
4 | "sourceMap" : true,
5 | "module" : "commonjs",
6 | "jsx" : "react",
7 | "baseUrl" : "./src/js"
8 | },
9 | "exclude" : [
10 | "node_modules"
11 | ]
12 | }
--------------------------------------------------------------------------------
/tsconfig.main.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions" : {
3 | "target" : "ES5",
4 | "sourceMap" : true,
5 | "module" : "commonjs",
6 | "moduleResolution" : "node",
7 | "baseUrl" : "./src/js"
8 | },
9 | "exclude" : [
10 | "node_modules"
11 | ]
12 | }
--------------------------------------------------------------------------------
/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hawkeye",
3 | "dependencies": {
4 | "form-data": "registry:npm/form-data#1.0.0+20160812072516",
5 | "lodash": "registry:npm/lodash#4.0.0+20161015015725",
6 | "redux-persist": "registry:npm/redux-persist#3.2.2+20160817092816",
7 | "request": "registry:dt/request#0.0.0+20161128184003"
8 | },
9 | "globalDependencies": {
10 | "async": "registry:dt/async#2.0.1+20161211174247",
11 | "electron": "registry:dt/electron#1.4.8+20161220141501",
12 | "electron-window-state": "registry:dt/electron-window-state#2.0.0+20161102134001",
13 | "es2015-symbol": "registry:env/es2015-symbol#1.0.0+20160526151700",
14 | "es6-shim": "registry:dt/es6-shim#0.31.2+20160726072212",
15 | "history": "registry:dt/history#1.8.0+20160316155526",
16 | "moment": "registry:dt/moment#2.11.1+20161010105546",
17 | "node": "registry:dt/node#6.0.0+20161121110008",
18 | "node-schedule": "registry:dt/node-schedule#1.1.0+20161119044246",
19 | "object-assign": "registry:dt/object-assign#4.0.1+20161006140353",
20 | "query-string": "registry:dt/query-string#3.0.0+20161129181732",
21 | "react": "registry:dt/react#0.14.0+20161203201537",
22 | "react-dom": "registry:dt/react-dom#0.14.0+20160412154040",
23 | "react-redux": "registry:dt/react-redux#4.4.0+20160908183346",
24 | "react-router": "registry:dt/react-router#2.0.0+20161117134353",
25 | "react-router-redux": "registry:dt/react-router-redux#4.0.0+20160930121107",
26 | "react-router/history": "registry:dt/react-router/history#2.0.0+20160830150755",
27 | "react-virtualized": "registry:dt/react-virtualized#0.0.0+20161117143210",
28 | "redux": "registry:dt/redux#3.5.2+20160703092728",
29 | "redux-thunk": "registry:dt/redux-thunk#2.1.0+20160703120921",
30 | "whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20161120230953",
31 | "whatwg-streams": "registry:dt/whatwg-streams#0.0.0+20161214010628"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 |
4 | module.exports = {
5 | entry : './src/js/App.ts',
6 | output : {
7 | path : path.resolve('./'),
8 | filename : 'app.min.js'
9 | },
10 | resolve : {
11 | root : [
12 | path.resolve('./node_modules'),
13 | path.resolve('./src/js')
14 | ],
15 | extensions : [
16 | '',
17 | '.webpack.js',
18 | '.web.js',
19 | '.ts',
20 | '.js',
21 | '.tsx'
22 | ]
23 | },
24 | module : {
25 | loaders : [{
26 | test : /\.tsx?$/,
27 | loader : 'ts-loader?sourceMap=false&configFileName=tsconfig.json'
28 | }, {
29 | test : /\.css$/,
30 | loader : 'style!css'
31 | }, {
32 | test : /\.(otf|eot|svg|ttf|woff|woff2).*$/,
33 | loader : 'url?limit=8192'
34 | }]
35 | },
36 | plugins : [
37 | new webpack.ProvidePlugin({
38 | 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
39 | }),
40 | new webpack.optimize.UglifyJsPlugin({
41 | minimize : true,
42 | output : {
43 | comments : false
44 | },
45 | compress : {
46 | warnings: false
47 | }
48 | }),
49 | new webpack.DefinePlugin({
50 | 'process.env.NODE_ENV': '"production"'
51 | })
52 | ]
53 | };
--------------------------------------------------------------------------------
/webpack.dev.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 |
4 | module.exports = {
5 | entry : './src/js/App.ts',
6 | output : {
7 | path : path.resolve('./'),
8 | filename : 'app.js'
9 | },
10 | resolve : {
11 | root : [
12 | path.resolve('./node_modules'),
13 | path.resolve('./src/js')
14 | ],
15 | extensions : [
16 | '',
17 | '.webpack.js',
18 | '.web.js',
19 | '.ts',
20 | '.js',
21 | '.tsx'
22 | ]
23 | },
24 | module : {
25 | loaders : [{
26 | test : /\.tsx?$/,
27 | loader : 'ts-loader?sourceMap=false&configFileName=tsconfig.json'
28 | }, {
29 | test : /\.css$/,
30 | loader : 'style!css'
31 | }, {
32 | test : /\.(otf|eot|svg|ttf|woff|woff2).*$/,
33 | loader : 'url?limit=8192'
34 | }]
35 | },
36 | plugins : [
37 | new webpack.ProvidePlugin({
38 | 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
39 | }),
40 | new webpack.DefinePlugin({
41 | 'process.env.NODE_ENV': '"development"'
42 | })
43 | ]
44 | };
--------------------------------------------------------------------------------