diff --git a/client/src/common/services/companies.service.js b/client/src/common/services/companies.service.js index 196589e..3fc7dee 100644 --- a/client/src/common/services/companies.service.js +++ b/client/src/common/services/companies.service.js @@ -1,28 +1,83 @@ -import { Observable } from '@reactivex/rxjs'; -import { API_COMPANIES_PATH } from 'client/src/common/api/constants'; -import { FETCH_COMPANIES, FETCH_COMPANY } from './constants'; -import { Company } from 'client/src/common/models/company.model'; - -export class CompaniesService { - static $inject = [ - 'APIService', - '$ngRedux' - ]; - - constructor(api, $ngRedux) { - this.api = api; - this.$ngRedux = $ngRedux; - } - - fetchCompanies() { - Observable.fromPromise(this.api.fetch(API_COMPANIES_PATH)) - .map(payload => ({ type: FETCH_COMPANIES, payload })) - .subscribe(action => this.$ngRedux.dispatch(action)); - } - - fetchCompany(id) { - Observable.fromPromise(this.api.fetch(API_COMPANIES_PATH + '/' + id)) - .map(payload => ({ type: FETCH_COMPANY, payload })) - .subscribe(action => this.$ngRedux.dispatch(action)); - } -} \ No newline at end of file +import { + ajax +} +from 'rxjs/Rx'; + +import { + API_BASE_URL, + API_COMPANIES_PATH +} +from 'client/src/common/api/constants'; + +import { + FETCH_COMPANIES, + FETCH_COMPANIES_FULFILLED, + FETCH_COMPANY, + FETCH_COMPANY_FULFILLED +} +from './constants'; + +// import { Company } from 'client/src/common/models/company.model'; + +// Action Creators +const fetchCompanies = payload => ({ + type: FETCH_COMPANIES, + payload +}); +const fetchCompaniesFullfilled = payload => ({ + type: FETCH_COMPANIES_FULLFILLED, + payload +}); + +const fetchCompany = company_id => ({ + type: FETCH_COMPANY, + payload: company_id +}); +const fetchCompanyFullfilled = payload => ({ + type: FETCH_COMPANY_FULLFILLED, + payload +}); + +// Epics +export function fetchCompaniesEpic (action$) { + return action$ + .ofType(FETCH_COMPANIES) + .mergeMap(action => + ajax.getJSON(`${API_BASE_URL}${API_COMPANIES_PATH}`) + .map(fetchCompaniesFullfilled) + ); +} + +export function fetchCompanyEpic (action$) { + return action$ + .ofType(FETCH_COMPANY) + .mergeMap(action => + ajax.getJSON(`${API_BASE_URL}${API_COMPANIES_PATH}/${action.payload}`) + .map(fetchCompanyFullfilled) + ); +} + +// export class CompaniesService { +// static $inject = [ +// 'APIService', +// '$ngRedux' +// ]; + +// constructor(api, $ngRedux) { +// this.api = api; +// this.$ngRedux = $ngRedux; +// } + +// fetchCompanies() { +// // Observable.fromPromise(this.api.fetch(API_COMPANIES_PATH)) +// // .filter(r => r.name === "Axial") +// // .map(payload => ({ type: FETCH_COMPANIES, payload })) +// // .subscribe(action => this.$ngRedux.dispatch(action)); +// } + +// fetchCompany(id) { +// // Observable.fromPromise(this.api.fetch(API_COMPANIES_PATH + '/' + id)) +// // .map(payload => ({ type: FETCH_COMPANY, payload })) +// // .subscribe(action => this.$ngRedux.dispatch(action)); +// } +// } \ No newline at end of file diff --git a/client/src/common/services/constants.js b/client/src/common/services/constants.js index 422e220..981442d 100644 --- a/client/src/common/services/constants.js +++ b/client/src/common/services/constants.js @@ -1,6 +1,9 @@ // Companies export const FETCH_COMPANIES = 'FETCH_COMPANIES'; +export const FETCH_COMPANIES_FULFILLED = 'FETCH_COMPANIES_FULFILLED'; + export const FETCH_COMPANY = 'FETCH_COMPANY'; +export const FETCH_COMPANY_FULFILLED = 'FETCH_COMPANY_FULFILLED'; // Members export const FETCH_MEMBERS = 'FETCH_MEMBERS'; diff --git a/client/src/common/services/rootEpic.js b/client/src/common/services/rootEpic.js new file mode 100644 index 0000000..e2cc589 --- /dev/null +++ b/client/src/common/services/rootEpic.js @@ -0,0 +1,13 @@ +/** + * Combine all epics in this file and export the combined epic. + */ + +import { combineEpics } from 'redux-observable'; + +// our custom data reducer for the data points +import { fetchCompaniesEpic, fetchCompanyEpic } from './companies.service'; + +export default combineEpics( + fetchCompaniesEpic, + fetchCompanyEpic +); \ No newline at end of file diff --git a/client/src/components/companies/companies.component.js b/client/src/components/companies/companies.component.js index 8d9aa93..bc58c32 100644 --- a/client/src/components/companies/companies.component.js +++ b/client/src/components/companies/companies.component.js @@ -1,4 +1,3 @@ -import { Observable } from '@reactivex/rxjs'; import { Component } from 'client/src/utils'; import template from './companies.html'; @@ -13,38 +12,35 @@ import './companies.scss'; export class CompaniesComponent { static $inject = [ - '$ngRedux', - 'CompaniesService' + '$ngRedux' ]; - constructor($ngRedux, CompaniesService) { + constructor($ngRedux) { this.$ngRedux = $ngRedux; - this.companiesService = CompaniesService; - this.list = Observable.from([]); - this.currentCompany = Observable.of({}); + // this.companiesService = CompaniesService; } $onInit() { // Connect to the store - this.disconnect = this.$ngRedux.connect(state => ({ - companies: state.companies, - currentCompany: state.currentCompany - }))((state, actions) => { - this.actions = actions; - this.list = state.companies; - this.currentCompany = state.currentCompany; - }); + // this.disconnect = this.$ngRedux.connect(state => ({ + // companies: state.companies, + // currentCompany: state.currentCompany + // }))((state, actions) => { + // this.actions = actions; + // this.list = state.companies; + // this.currentCompany = state.currentCompany; + // }); // Fetch Companies - this.companies = this.companiesService.fetchCompanies(); + // this.companies = this.companiesService.fetchCompanies(); } $onDestroy() { // Disconnect from the store - this.disconnect(); + // this.disconnect(); } onCompanySelected(company) { - this.companiesService.fetchCompany(company.id); + // this.companiesService.fetchCompany(company.id); } } \ No newline at end of file diff --git a/client/src/components/styles/index.js b/client/src/components/styles/index.js new file mode 100644 index 0000000..3ac08b8 --- /dev/null +++ b/client/src/components/styles/index.js @@ -0,0 +1 @@ +export * from './styles.component'; \ No newline at end of file diff --git a/client/src/components/styles/styles.component.js b/client/src/components/styles/styles.component.js new file mode 100644 index 0000000..41d5dfb --- /dev/null +++ b/client/src/components/styles/styles.component.js @@ -0,0 +1,12 @@ +import { Component } from 'client/src/utils'; + +import template from './styles.html'; + +import './styles.scss'; + +@Component({ + template, + controllerAs: 'stylesCtrl' +}) + +export class StylesComponent {} diff --git a/client/src/components/styles/styles.html b/client/src/components/styles/styles.html new file mode 100644 index 0000000..fa18e45 --- /dev/null +++ b/client/src/components/styles/styles.html @@ -0,0 +1,428 @@ +
+

+

ATOMS:

+
+ +

H1: Open Sans Light 36px

+

H2: Open Sans Light 36px

+

H2B: Open Sans Light 24px

+

H3: Open Sans Light 18px

+

H4: Open Sans Regular 16px

+
H5: Open Sans Semibold 14px
+
H6: Open Sans Bold 12px Uppercase
+ +

+ Paragraph Small: Opens Sans Regular 11px FS/ 16px LH/ .2 LS / bottom-padding:8px; + Eg., Bacon ipsum dolor amet fugiat tri-tip magna meatball est aute. Culpa sausage magna tenderloin ham, do meatloaf veniam meatball frankfurter kielbasa. +

+ +

+ Paragraph Small: Opens Sans Regular 13px FS/ 18px LH/ .2 LS / bottom-padding:8px; + Eg., Bacon ipsum dolor amet fugiat tri-tip magna meatball est aute. Culpa sausage magna tenderloin ham, do meatloaf veniam meatball frankfurter kielbasa. +

+ +

+ Paragraph Normal: Opens Sans Regular 14px FS/ 21px LH/ .2 LS / bottom-padding:8px; + Eg., Bacon ipsum dolor amet fugiat tri-tip magna meatball est aute. Culpa sausage magna tenderloin ham, do meatloaf veniam meatball frankfurter kielbasa. +

+ +

+ Paragraph Large: Opens Sans Regular 16px FS/ 24px LH/ .2 LS / bottom-padding:8px; + Eg., Bacon ipsum dolor amet fugiat tri-tip magna meatball est aute. Culpa sausage magna tenderloin ham, do meatloaf veniam meatball frankfurter kielbasa. +

+ +

+ Paragraph Large: Opens Sans Regular 16px FS/ 24px LH/ .2 LS / bottom-padding:8px; + Eg., Bacon ipsum dolor amet fugiat tri-tip magna meatball est aute. Culpa sausage magna tenderloin ham, do meatloaf veniam meatball frankfurter kielbasa. +

+ + +

+ Paragraph Normal: Opens Sans Regular 14px FS/ 21px LH/ .2 LS / bottom-padding:8px; + Eg., Bacon ipsum dolor amet fugiat tri-tip magna meatball est aute. Culpa sausage magna tenderloin ham, do meatloaf veniam meatball frankfurter kielbasa. +

+ +

+ Help text - Paragraph Small: Opens Sans Regular 13px FS/ 18px LH/ .2 LS / #828282 +

+ +

+ Help text - Paragraph X Small: Opens Sans Regular 11px FS/ 16px LH/ .2 LS / #828282 +

+ + + + + + + + + + + + + +
    +
  1. li:Opens Sans W Regular 13px FS/ 18px LH/ .2 LS/ no list-item
    2. +
+ +
    +
  1. li:Opens Sans W Regular 14px FS/ 21px LH/ .2 LS/ no list-item
    2. +
+ +
    +
  1. li:Opens Sans W Regular 16px FS/ 24px LH/ .2 LS/ no list-item
    2. +
+ +
    +
  1. li:Opens Sans W Regular 18px FS/ 27px LH/ .2 LS/ no list-item
    2. +
+ + a: Opens Sans W Regular 16px FS/ 24px LH/ .2 LS/ Color: rgba(25, 131, 179, 100) +

+ + + + + + + + + +
+ I'm the Header of the table +
+ I'm trapped in this table cell + + I'm trapped in this table cell +
+ +
+ +
+
+

Stylized List Signifiers

+
+
+ +
+ +
+
I'm Mr.Meseeks! Look at me!
+

+ Bacon ipsum dolor amet kevin pancetta tri-tip corned beef capicola rump tenderloin. Shoulder porchetta corned beef swine, alcatra landjaeger brisket meatloaf tongue bacon meatball picanha pork ball tip prosciutto. Chicken pancetta burgdoggen, pork chop salami corned beef turducken shank cow picanha. Pastrami kielbasa shank meatball rump drumstick sausage ham hock shankle tri-tip spare ribs brisket venison ribeye. Turkey cow brisket chicken tail chuck ribeye andouille shankle. Venison short ribs short loin, beef cupim corned beef pastrami brisket ham hock. +

+

+ Chuck shank andouille ball tip drumstick pancetta, leberkas porchetta ham hock brisket turkey. Rump pig sirloin beef ribs porchetta bresaola, meatloaf short loin kevin turkey swine ground round burgdoggen. Picanha prosciutto corned beef rump sausage pork belly. Short loin filet mignon boudin ribeye, meatball pork chop tail pork loin beef ribs porchetta. Drumstick prosciutto kevin chuck landjaeger. +

+
+ +
+ + + + + + +
+ +
+

Hey Hey Hey! Imma growler! BLAHRRRRRG!

+

+ +
+
+
Text Input Small
+ + +
+ +
+
Text Input Medium
+ + +
+ +
+
Text Input Large
+ + +
+ +
+
Text Input Large
+ + +
+ +
+
Text Input Perforated
+ + +
+ +
+
Text Input Error
+ + +
+ +
+
Text Input Warning
+ + +
+ +
+ pill + pill +
+ +
+
Select Input Base
+ + +
+ +
+
Text Area
+ + + textarea should autoexpand +
+ +
+
Text Area Edit
+ +
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+ +
108px

+
80px

+
64px

+
44px

+ +
Advisor
+
Investor
+
Lender
+
Buyer
+ +
Premium
+ +
44px

+
64px

+
88px

+
108px

+
132px

+
152px

+ +
+
+
+
+
+
+
+ + + 10 + + +
+ Motorhead + Anthrax + Sepultura + Cannibal Corpse +
+ + + + + +
+
+ + +
+
+
+

H2B: Open Sans Light 24px

+ +
+ +
+

Main container

+

+ We're no strangers to love. + You know the rules and so do I. + A full commitment's what I'm thinking of + You wouldn't get this from any other guy. +

+ +

+ I just want to tell you how I'm feeling + Gotta make you understand +

+ +

+ Never gonna give you up, never gonna let you down + Never gonna run around and desert you + Never gonna make you cry, never gonna say goodbye + Never gonna tell a lie and hurt you +

+ +

+ We've known each other for so long + Your heart's been aching but you're too shy to say it + Inside we both know what's been going on + We know the game and we're gonna play it + And if you ask me how I'm feeling + Don't tell me you're too blind to see +

+ +
+
+

Previous

+ Section Title +
+
+

Next

+ Section Title +
+
+
+
+
+ + + + +
+
Accordion/ Expandable List Example
+ +
+ +
+ + + diff --git a/client/src/components/styles/styles.scss b/client/src/components/styles/styles.scss new file mode 100644 index 0000000..18c8925 --- /dev/null +++ b/client/src/components/styles/styles.scss @@ -0,0 +1,96 @@ +// Default for Styleguide purposes +.styleguide { + background-color: #F7F7F7; + + .color-examples > li { + float: left; + margin-left: 10px; + display: inline-block; + font-weight: bold; + color: #4a4a4a; + } + + .color-list { + width: auto; + padding-left: 8px; + color: #fff; + float: left; + display: inline-block; + } + + .color-list > li { + padding: 12px; + width: 200px; + font-weight: 600; + letter-spacing: .4px; + text-transform: uppercase; + float: left; + clear: left; + } + + .card-example { + max-width: 500px; + margin: 0 auto; + } +} + +.style-note { + margin-left:6em; + font-weight: 800; +} + +#border-example{ + + .border{ + margin: 12px; + } +} + +.Form-example > div { + margin-bottom: 12px; +} + +.user-tag { + margin:0 0 8px 0; +} + +nav > li { + position: relative; + display:inline-block; + width:auto; + float: left; + padding-right:5em; + text-align: center; +} + +#modal-header-eg { + margin: 12px 0; +} + +.Form-example h5 { + margin-bottom:.5rem; +} + +.expand-list-example { + width:600px; +} + +.expand-list-example h5 { + margin-bottom: 12px; +} + +// // LIVE STYLEGUIDE +// .styles { +// // COLORS +// ul.colors { +// font-size: 24px; + +// li { +// display: inline-block; +// width: 60px; +// height: 30px; +// font-size: .5rem; +// color: white; +// } +// } +// } \ No newline at end of file diff --git a/client/src/index.html b/client/src/index.html index 40f3974..7d38856 100644 --- a/client/src/index.html +++ b/client/src/index.html @@ -8,4 +8,5 @@ Loading the app... + \ No newline at end of file diff --git a/client/src/main.js b/client/src/main.js index e53af76..f21eb80 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -4,10 +4,10 @@ import ngRedux from 'ng-redux'; import ngReduxUiRouter from 'redux-ui-router'; // https://github.com/neilff/redux-ui-router#listener // Core -import { APIService } from './common/api/api-service'; +// import { APIService } from './common/api/api-service'; // Services -import { CompaniesService } from './common/services/companies.service'; +// import { CompaniesService } from './common/services/companies.service'; // Router import { routerConfig } from './routeConfig'; @@ -18,6 +18,7 @@ import reduxConfig from './reduxConfig'; // Components import { AppComponent } from './components/app'; import { CompanyItemComponent, CompanyDetailsComponent, CompaniesComponent } from './components/companies'; +import { StylesComponent } from './components/styles'; // Styles import './styles/styles.scss'; @@ -32,12 +33,14 @@ app.component('app', AppComponent); app.component('companyItem', CompanyItemComponent); app.component('companies', CompaniesComponent); app.component('companyDetails', CompanyDetailsComponent); +app.component('styles', StylesComponent); -app.service('APIService', APIService); -app.service('CompaniesService', CompaniesService); +// app.service('APIService', APIService); +// app.service('CompaniesService', CompaniesService); // Load config for ui-router app.config(routerConfig); // Load Redux store config -app.config(reduxConfig); \ No newline at end of file +app.config(reduxConfig); + diff --git a/client/src/reduxConfig.js b/client/src/reduxConfig.js index 26a7273..f3b3191 100644 --- a/client/src/reduxConfig.js +++ b/client/src/reduxConfig.js @@ -7,7 +7,10 @@ */ import createLogger from 'redux-logger'; +import { createEpicMiddleware } from 'redux-observable'; + import reducers from './common/stores/rootReducer'; +import epics from './common/services/rootEpic'; store.$inject = ['$ngReduxProvider']; @@ -18,7 +21,9 @@ export default function store($ngReduxProvider) { collapsed: true }); - const middlewares = ['ngUiRouterMiddleware', logger]; + const epicMiddleware = createEpicMiddleware(epics); + + const middlewares = [epicMiddleware, 'ngUiRouterMiddleware', logger]; const enhancers = [ window.devToolsExtension ? window.devToolsExtension() : f => f ]; diff --git a/client/src/routeConfig.js b/client/src/routeConfig.js index cd91ecc..cfb0913 100644 --- a/client/src/routeConfig.js +++ b/client/src/routeConfig.js @@ -50,9 +50,20 @@ export function routerConfig($stateProvider, $urlRouterProvider) { // } // } + var styleState = { + name: 'app.styles', + url: '/styles', + views: { + '@app': { + template: '' + } + } + } + $stateProvider.state(appState); $stateProvider.state(companiesState); // $stateProvider.state(companyState); + $stateProvider.state(styleState); $urlRouterProvider.otherwise('/companies'); } \ No newline at end of file diff --git a/client/src/styles/_settings.scss b/client/src/styles/_settings.scss deleted file mode 100644 index 1d8ad88..0000000 --- a/client/src/styles/_settings.scss +++ /dev/null @@ -1,60 +0,0 @@ -// FONTS -$font-family: 'Open Sans'; -$font-size: 1rem; -$base-ratio: .125; -$default-font-size: $font-size - $base-ratio; -$default-letter-spacing: .2px; - -$font-weight-light: 300; -$font-weight-regular: 400; -$font-weight-semibold: 500; -$font-weight-bold: 800; - -$h1-font-size: ($font-size + $base-ratio) * 2; -$h2-font-size: $font-size * (2 - (2 * $base-ratio)); -$h3-font-size: $font-size + ($base-ratio * 2); -$h4-font-size: $font-size; -$h5-font-size: $font-size - ($base-ratio * 2); -$h6-font-size: $font-size - ($base-ratio * 4); - -$h6-letter-spacing: .3px; - -$p-font-size: $font-size - $base-ratio; -$p-padding-bottom: 8px; - -// COLORS -$blue: (name: 'blue', r: 25, g: 131, b: 179, shade_count: 4); -$orange: (name: 'orange', r: 216, g: 89, b: 0, shade_count: 4); -$green: (name: 'green', r: 40, g: 120, b: 43, shade_count: 4); -$colors: $blue $orange $green; - -// Below generates color shades -@each $color in ($colors) { - .default-bkg-color-#{map-get($color, "name")}{ - background-color: rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")); - } - .default-color-#{map-get($color, "name")} { - color: rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")); - } - - @for $i from 1 through map-get($color, "shade_count") { - .lighter-bkg-color-#{map-get($color, "name")}-#{$i} { - background-color: lighten(rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")), ($i * 5)); - } - .lighter-color-#{map-get($color, "name")}-#{$i} { - color: lighten(rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")), ($i * 5)); - } - .darker-bkg-color-#{map-get($color, "name")}-#{$i} { - background-color: darken(rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")), ($i * 5)); - } - .darker-color-#{map-get($color, "name")}-#{$i} { - color: darken(rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")), ($i * 5)); - } - } -} - -$default-opacity: 100; - -$default-blue: rgb(map-get($blue, "r"), map-get($blue, "g"), map-get($blue, "b")); - -$a-default-color: $default-blue; \ No newline at end of file diff --git a/client/src/styles/atoms/_buttons.scss b/client/src/styles/atoms/_buttons.scss new file mode 100644 index 0000000..2936e94 --- /dev/null +++ b/client/src/styles/atoms/_buttons.scss @@ -0,0 +1,78 @@ +button{ + font-family: $font-family; + cursor: pointer; + transition: $hover-transition-default; + border-radius: $rounded-border-radius; + opacity: $default-opacity; + line-height: 1; + color: $base-white; + border: none; + outline:none; + + &.button-sm { + font-size: $button-text-small; + padding: .538em $font-size; + } + + &.button-med { + font-size: $button-text-medium; + padding: $button-text-medium * 0.75 $button-text-medium * 1.5; + } + + &.button-lrg { + font-size: $button-text-large; + padding: $button-text-large $button-text-large * 1.75; + } + + // States + + &.inactive { + opacity: $disabled-opacity; + } + + //Colors & Hovers + + &.green { + background-color: $base-green; + + &:hover { + background-color: darken($base-green, 10%); + } + } + + &.blue-steel { + background-color: $base-blue; + + &:hover { + background-color: darken($base-blue, 10%); + } + } + + &.blue-midnight { + background-color: $blue-midnight; + + &:hover { + background-color: darken($blue-midnight, 10%); + } + } + + &.orange { + background-color: $base-orange; + + &:hover { + background-color: darken($base-orange, 10%); + } + } + + &.grey-light { + background-color: $grey-light; + color:$text-default-color; + + &:hover { + background-color: darken($grey-light, 10%); + } + } + + + +} diff --git a/client/src/styles/atoms/_cards.scss b/client/src/styles/atoms/_cards.scss new file mode 100644 index 0000000..4cbed68 --- /dev/null +++ b/client/src/styles/atoms/_cards.scss @@ -0,0 +1,9 @@ +//Width based on column +.card { + box-shadow: $shadow-style-card; + background-color: $base-white; + padding: 1.25rem 1.25rem 2.5rem 1.25rem;//20px; + margin-bottom: 2.5em;//40px; + font-size: $default-font-size; +} + diff --git a/client/src/styles/atoms/_form-atoms.scss b/client/src/styles/atoms/_form-atoms.scss new file mode 100644 index 0000000..c0ee2af --- /dev/null +++ b/client/src/styles/atoms/_form-atoms.scss @@ -0,0 +1,222 @@ +input, +select, +textarea, +keygen { + display:block; + font-family: "Open Sans"; + letter-spacing: $default-letter-spacing; + color: $text-default-color; + border:$default-border; + background-color: transparent; + font-size: $default-font-size; + height:$font-size*2;/*32px*/ + padding:0 0.625em; /*10px*/ + transition:$border-color-transition, $border-width-transition; + box-sizing: $default-box-sizing; + + &:focus { + outline: none; + border: 2px solid $base-blue; + } + + &.inactive { + + } + + &.edit{ + border-style: dotted; + } + + &.edit:focus { + border-style: dotted; + } + + &.error, &.error:focus { + border: 1px solid $axial-red; + background-color: $error-background; + color:$axial-red; + } + + &.error:focus { + border-width: 2px; + background-color: $white; + //color:$text-default-color; + } + + &.warning { + border: 1px solid $orange-tiger; + } + + &.warning:focus { + border-width: 2px; + } + +} +input, +select, +input { + + font-size: $default-font-size; //$px-14; + + &.input-sm { + + } + + &.input-med { + font-size: inherit; + min-height: 2.429em;/*34px*/ + } + + &.input-lrg { + font-size: $large-text; + min-height: 2.250em;/*36px*/ + } + +} + + +//Labels +label{ + + font-size: $default-font-size; //$px-14; + display: inline-block; + + &.error{ + color:$axial-red; + } + + &.warning { + color:$orange-tiger; + } + + &.sm, &.label-sm{ + font-size: $small-text; + + } + //standard + &.med, &.label-med{ + font-size: inherit; + } + + &.lrg, &.label-lrg{ + font-size:$large-text; + } + + &.xl, &.label-xl{ + font-size:$x-large-text; + } + +} + +.check-box-button-style, +.check-box-list-style { + transition:$hover-transition-default, $border-color-transition; + position: relative; + display: inline-block; +} + +.check-box-button-style { + font-size: $large-text; + height:2em; + width:14.25em; + background-color: $white; + border: 1px solid $grey-mid-light; + border-radius: $rounded-border-radius; + + .check-box-button-style label { + text-align: $center; + vertical-align: middle; + line-height: 100%; + } + + &:hover { + background-color: $grey-mid-light; + border-color: transparent; + } + + &.checked, &.darkbutton, &.checked:hover { + background-color: $blue-midnight; + border-color: transparent; + color:$white; + } +} + +.check-box-list-style { + width:392px; + height:44px; + background-color: $grey-background; + border:none; + padding:15px 20px; + + &.checked, &:hover { + background:$blue-artic; + cursor: pointer; + color:$blue-midnight; + } + + &.checked label { + color:$blue-midnight; + } +} + + .check-box-list-style input, .check-box-button-style input { + position: absolute; + opacity:0; + width:100%; + height: 100%; + padding: 0; + margin: 0; + top:0; + left: 0; + cursor: pointer; + } + +.check-box-list-style label, .check-box-button-style label { + position: absolute; + line-height:1; + width:100%; + vertical-align: middle; +} + +.check-box-list-style label { + +} + +.check-box-button-style label { + text-align: center; + line-height: 2.2em; +} + + +textarea { + min-height: 5em; + display: block; + resize:auto; + box-sizing:padding-box; + overflow: hidden; + padding:.5em; +} + +.pill { + display: $inline-block; + width:auto; + min-width: 5em; + padding:0 8px; + line-height:$default-line-height + ($base-ratio*2); + text-transform: capitalize; + + &.sm { + font-size: $small-text; + } +} + +.validation-text { + &.green, &.valid { + color:$green-mint; + } + + &.red, &.error { + color:$axial-red; + } +} + diff --git a/client/src/styles/atoms/_growler.scss b/client/src/styles/atoms/_growler.scss new file mode 100644 index 0000000..6d9aec5 --- /dev/null +++ b/client/src/styles/atoms/_growler.scss @@ -0,0 +1,14 @@ +.growler { + //border-radius: $default-border-radius * 3; + padding: 1.5em; + box-shadow: $shadow-style-growler; + border-radius: $growler-border-radius; + width:21.438em;/*343 - 3.5columns */ + min-height:7.750em;/*124px;*/ + font-size:$default-font-size; + color:$white; + + &.green { + background-color: $base-green; + } +} \ No newline at end of file diff --git a/client/src/styles/atoms/_icons.scss b/client/src/styles/atoms/_icons.scss new file mode 100644 index 0000000..a4eb7c0 --- /dev/null +++ b/client/src/styles/atoms/_icons.scss @@ -0,0 +1,51 @@ +.material-icons { + font-family: 'Material Icons'; + font-weight: normal; + font-style: normal; + font-size: 24px; /* Preferred icon size */ + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; + + /* Support for all WebKit browsers. */ + -webkit-font-smoothing: antialiased; + /* Support for Safari and Chrome. */ + text-rendering: optimizeLegibility; + + /* Support for Firefox. */ + -moz-osx-font-smoothing: grayscale; + + /* Support for IE. */ + font-feature-settings: 'liga'; +} + +//Icon Sizes +.material-icons { + + &.md-16 { + font-size: 1rem; //xs + } + + &.md-20 { + font-size: 1.25rem; //sm + } + + &.md-24 { + font-size: 1.5rem; //med + } + + &.md-36 { + font-size: 2.25rem; //lrg + } + + &.md-48 { + font-size: 3rem; //x-lrg + } + +} + + diff --git a/client/src/styles/atoms/_logos.scss b/client/src/styles/atoms/_logos.scss new file mode 100644 index 0000000..bb2f553 --- /dev/null +++ b/client/src/styles/atoms/_logos.scss @@ -0,0 +1,73 @@ +// Logos +.logo-wrapper{ + + +} + + +.logo { + overflow: hidden; + box-sizing:inherit; + line-height: 0; + background-color: $white; + background-repeat: no-repeat; + background-color: $white; + background-repeat: no-repeat; + overflow: hidden; + display: block; + position: relative; + padding:4px; + + + &.xs { + width:2.750rem;//44px + height: 2.750rem;//44px + } + + &.sm { + width:4rem;//64px + height: 4rem;//64px + } + + &.med { + width:5.5rem;//88px; + height: 5.5rem;//88px; + } + + &.lrg { + width:6.750rem;//108px; + height: 6.750rem;//108px; + } + + &.x-lrg { + width:8.250rem;//132px; + height: 8.250rem;//132px; + } + + &.xx-lrg { + width:9.5rem;//152px; + height: 9.5rem;//152px; + } +} + +.logo a { + display: block; + height: 100%; + position: relative; +} + +.logo img { + width: 100%; + height: auto; + position: absolute; + top:0; + right:0; + bottom:0; + left:0; + margin: auto; + border:none; +} + +/* + Container is 8px greater in size on all ends in addition to logo size +*/ \ No newline at end of file diff --git a/client/src/styles/atoms/_modal.scss b/client/src/styles/atoms/_modal.scss new file mode 100644 index 0000000..1be2896 --- /dev/null +++ b/client/src/styles/atoms/_modal.scss @@ -0,0 +1,3 @@ +.modal { + +} \ No newline at end of file diff --git a/client/src/styles/atoms/_profiles.scss b/client/src/styles/atoms/_profiles.scss new file mode 100644 index 0000000..a891cef --- /dev/null +++ b/client/src/styles/atoms/_profiles.scss @@ -0,0 +1,39 @@ +//User Images + +.user-img { + display: block; + background-image: url('http://vignette3.wikia.nocookie.net/thebiglebowski/images/7/7e/The_Dude.jpeg/revision/latest?cb=20111216183045'); + background-origin: content-box; + background-repeat: no-repeat; + background-position-x: 50%; + background-position-y: 50%; + border-radius: $circle; + background-size: $bg-size-full; + box-shadow: $shadow-style-user-img; + width:auto; + height: 100%; + + &.sq { + border-radius:0; + } + + &.lrg { + width:6.750em;//108px; + height: 6.750em;//108px; + } + + &.med { + width:5em;//80px; + height: 5em;//80px; + } + + &.sm { + width:4em;//64px + height: 4em;//64px + } + + &.xs { + width:2.750em;//44px + height: 2.750em;//44px + } +} diff --git a/client/src/styles/atoms/_sidebar.scss b/client/src/styles/atoms/_sidebar.scss new file mode 100644 index 0000000..4402b44 --- /dev/null +++ b/client/src/styles/atoms/_sidebar.scss @@ -0,0 +1,31 @@ +.sidebar { + width:243px; + height: 100%; + overflow: hidden; + + &.left, &.sidebar-left { + box-shadow: $shadow-style-sidebar-left; + } + + &.blue { + background-color: $blue-sky; + } + + &.green { + background-color: $green-sea; + } + + &.grey { + background-color: $grey-mid-light; + } +} + + +.sidebar.blue li a, +.sidebar.green li a, { + color:$white; +} + +.sidebar-inner { + padding:1.25rem 1.25rem 2.5rem 1.25rem;//20px; +} \ No newline at end of file diff --git a/client/src/styles/atoms/_signifiers.scss b/client/src/styles/atoms/_signifiers.scss new file mode 100644 index 0000000..1772539 --- /dev/null +++ b/client/src/styles/atoms/_signifiers.scss @@ -0,0 +1,131 @@ +// Signifiers +// Global ornamental elements (e.g. borders, colors decorations) + +$default-border-color:$grey; +$default-border-size: 1px; +$default-border-style: solid; +$border-none:none; + + +$default-border: $default-border-size $default-border-style $default-border-color; + +hr { + height:1px; + border:$default-border; + border-top:$border-none; + border-right:$border-none; + border-left:$border-none; +} + +.border { + border:$default-border; + + &[data-btm]{ + border-top:$border-none; + border-right:$border-none; + border-left:$border-none; + } + + &[data-top]{ + border-bottom:$border-none; + border-right:$border-none; + border-left:$border-none; + } + + &[data-right]{ + border-top:$border-none; + border-bottom:$border-none; + border-left:$border-none; + } + + &[data-left]{ + border-top:$border-none; + border-right:$border-none; + border-bottom:$border-none; + } +} + +.cust-bullet { + width: 5px; + height: 5px; + border-radius: $circle; + display: inline-block; + background: #4a4a4a; + margin-right: .5rem; +} + +.blue-dot { + background-color: $blue-sky; + display: inline-block; + height: 11px; + width: 11px; + border-radius: $circle; + + &:after { + content: ""; + width: 1px; + height: 95px; + background-color: $grey; + display: flex; + margin: 19px auto; + } +} + +.beta { + font-size: $h6-font-size; + font-weight: $font-weight-bold; +} + +.counter { + display:block; + border-radius: $circle; + font-size: $x-small-text; + font-weight: $font-weight-bold; + text-align: $center; + color:$white; + line-height: 1.25rem; + width: 1.25rem; + background-color: $grey; + + &.orange { + background-color: $orange-melon; + } +} + +.nav-on { + height:3px; + content: ""; + display: block; + width:100%; + background-color:$orange-melon; + margin-top: 4px; +} + +.progress-wrapper { + display: inline-block; + border-bottom: 2px solid rgba(0,0,0,.28); +} + +.progress-bar-step { + padding: 2px .625em; + width:auto; + font-size: $small-text; + text-transform: $uppercase; + opacity: $disabled-opacity; + text-align: $center; + color:$grey-shadow; +} + +.progress-bar-step.active { + opacity: $default-opacity; + border-bottom: 2px $default-border-style $blue-navy; + color:$blue-navy; +} + +.previous > p { + text-align: left; +} + +.next > p { + text-align:right; +} \ No newline at end of file diff --git a/client/src/styles/atoms/_tags.scss b/client/src/styles/atoms/_tags.scss new file mode 100644 index 0000000..749c7c1 --- /dev/null +++ b/client/src/styles/atoms/_tags.scss @@ -0,0 +1,43 @@ +//Tags +.tag { + color:$white; + text-align: $center; + font-size: $h6-font-size; + background-color: $grey-medium; + + + &.user-tag { + line-height: 2em; + min-width:7.333em; + width:7.333em; + font-weight: $font-weight-bold; + text-transform: uppercase; + letter-spacing: $tag-letter-spacing; + + &[data-role="advisor"]{ + background-color: $orange-melon; + } + + &[data-role="lender"]{ + background-color: $green-sea; + } + + &[data-role="buyer"]{ + background-color: $blue-midnight; + } + + &[data-role="investor"]{ + background-color: $blue-sky; + } + } + + &.premium-tag { + background-color: $admin-gold; + font-weight: $font-weight-semibold; + min-width:6em; + width:6em; + } +} + + + diff --git a/client/src/styles/atoms/_typography.scss b/client/src/styles/atoms/_typography.scss new file mode 100644 index 0000000..0d80a7e --- /dev/null +++ b/client/src/styles/atoms/_typography.scss @@ -0,0 +1,203 @@ +body { + font-family: $font-family; + @include font-smoothing('antialiased'); + font-size: $default-font-size; + letter-spacing: $default-letter-spacing; + color:$text-default-color; + line-height: $default-line-height; +} + +h1, h2, h3,h4,h6,h6 { + margin:0; + line-height: $default-line-height; +} + +h1 { + font-size: $h1-font-size; + font-weight: $font-weight-light; +} + +h2 { + font-size: $h1-font-size; + font-weight: $font-weight-light; + + &.h2b{ + font-size: $h2-font-size; + } +} + +h3 { + font-size: $h3-font-size; + font-weight: $font-weight-light; +} + +h4 { + font-size: $h4-font-size; + font-weight: $font-weight-regular; +} + +h5 { + font-size: $h5-font-size; + font-weight: $font-weight-semibold; +} + +h6 { + font-size: $h6-font-size; + font-weight: $font-weight-bold; + text-transform: uppercase; + letter-spacing: $h6-letter-spacing; + margin:0 0 8px 0; +} + +th { + font-weight: $font-weight-bold; + font-size: $small-text; +} + +td { + font-size: $med-text; +} + + +.text-baseline { + font-size: $default-font-size; + line-height: $default-line-height; +} + +.text-xs { + font-size: $xx-small-text; + line-height: 1rem; + } + +.text-sm { + font-size: $small-text; //.813rem; + line-height: $font-size + $base-ratio; +} + +//Default +.text-med { + font-size: $default-font-size; +} + +.text-lrg { + font-size: $large-text;//16px; +} + +.text-xlrg { + font-size: $x-large-text; //18px +} + +p { + padding-bottom: $p-padding-bottom; + font-size: $default-font-size; + line-height: $default-line-height; + + &.text-lrg { + font-size: $large-text;//16px; + } + + &.text-sm { + font-size: $small-text; //.813rem + line-height: $font-size + $base-ratio; + } + + &.text-xs { + font-size: $xx-small-text; + line-height: 1rem; + } +} + +ul, ol { + + line-height: $default-line-height; + + &.ul-ol-sm li { + + list-style-type: none; + font-size: $small-text; + line-height: $font-size + $base-ratio; + } + + &.ul-ol-med li, + &.ul-ol li { + + list-style-type: none; + font-size: $default-font-size; + } + + &.ul-ol-lrg li { + + list-style-type: none; + font-size: $large-text; + } + + &.ul-ol-xlrg li { + + list-style-type: none; + font-size: $x-large-text; + } + + li { + list-style-type: none; + + &.text-xs { + line-height: 1.1em; + } + + &.text-sm { + line-height: $font-size + $base-ratio; + } + + &.text-med { + + } + + &.text-lrg { + + } + + } + + &.bullet-list li { + list-style-type: disc; + list-style-position:outside; + } + + &.bullet-list.bullet-list-indent li { + list-style-position:inside; + } +} + +ol { + li { + list-style-type: decimal; + } +} + +.tetx-italic { + font-style: $italic; +} + +.text-help { + font-size: $help-text-standard; + color: $grey-smoke; + + &.text-xs { + font-size: $help-text-x-small; + line-height: 1.1em; + } + +} + +.text-bold { + font-weight: $font-weight-semibold; +} + +.text-weight-normal { + font-weight:$font-weight-regular; +} + + + + + diff --git a/client/src/styles/experiments/_colors.generator.scss b/client/src/styles/experiments/_colors.generator.scss new file mode 100644 index 0000000..f12eaed --- /dev/null +++ b/client/src/styles/experiments/_colors.generator.scss @@ -0,0 +1,30 @@ + +// $blue: (name: 'blue', r: 25, g: 131, b: 179, shade_count: 4); +// $orange: (name: 'orange', r: 216, g: 89, b: 0, shade_count: 4); +// $green: (name: 'green', r: 40, g: 120, b: 43, shade_count: 4); +// $colors: $blue $orange $green; + +// Below generates color shades +// @each $color in ($colors) { +// .default-bkg-color-#{map-get($color, "name")}{ +// background-color: rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")); +// } +// .default-color-#{map-get($color, "name")} { +// color: rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")); +// } + +// @for $i from 1 through map-get($color, "shade_count") { +// .lighter-bkg-color-#{map-get($color, "name")}-#{$i} { +// background-color: lighten(rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")), ($i * 5)); +// } +// .lighter-color-#{map-get($color, "name")}-#{$i} { +// color: lighten(rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")), ($i * 5)); +// } +// .darker-bkg-color-#{map-get($color, "name")}-#{$i} { +// background-color: darken(rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")), ($i * 5)); +// } +// .darker-color-#{map-get($color, "name")}-#{$i} { +// color: darken(rgb(map-get($color, "r"), map-get($color, "g"), map-get($color, "b")), ($i * 5)); +// } +// } +// } \ No newline at end of file diff --git a/client/src/styles/images/muster.jpg b/client/src/styles/images/muster.jpg new file mode 100644 index 0000000..08a6a7b Binary files /dev/null and b/client/src/styles/images/muster.jpg differ diff --git a/client/src/styles/_mixins.scss b/client/src/styles/mixins/font-smoothing.scss similarity index 58% rename from client/src/styles/_mixins.scss rename to client/src/styles/mixins/font-smoothing.scss index 32e6642..6b34aea 100644 --- a/client/src/styles/_mixins.scss +++ b/client/src/styles/mixins/font-smoothing.scss @@ -7,9 +7,4 @@ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } -} - -// I wish they had computed properties in sass... -// @mixin generate-color($color, $opacity: 100) { -// rgba(map-get($color, "r"), map-get($color, "g"), map-get($color, "b"), $opacity); -// } +} \ No newline at end of file diff --git a/client/src/styles/molecules/_announcements.scss b/client/src/styles/molecules/_announcements.scss new file mode 100644 index 0000000..2850494 --- /dev/null +++ b/client/src/styles/molecules/_announcements.scss @@ -0,0 +1,11 @@ +.announcement { + margin-bottom: .5rem; +} + +.announcement .date { + padding-bottom: 3px; +} + +.announcement-title { + padding-bottom: 2px; +} \ No newline at end of file diff --git a/client/src/styles/molecules/_expand-list.scss b/client/src/styles/molecules/_expand-list.scss new file mode 100644 index 0000000..f7efd26 --- /dev/null +++ b/client/src/styles/molecules/_expand-list.scss @@ -0,0 +1,14 @@ +.expand-list { + width: 100%; +} + +.epxpand-list li, +.expand-li { + line-height: 2.25rem; + border-bottom: $default-border; + padding: 0 8px; + + &:first-child { + border-top: $default-border; + } +} \ No newline at end of file diff --git a/client/src/styles/molecules/_forms.scss b/client/src/styles/molecules/_forms.scss new file mode 100644 index 0000000..bddfad1 --- /dev/null +++ b/client/src/styles/molecules/_forms.scss @@ -0,0 +1,11 @@ +.form-block label { + margin-bottom: .25rem; +} + +.form-block input { + +} + +.form-block select { + +} \ No newline at end of file diff --git a/client/src/styles/molecules/_modal-elements.scss b/client/src/styles/molecules/_modal-elements.scss new file mode 100644 index 0000000..f2bab2d --- /dev/null +++ b/client/src/styles/molecules/_modal-elements.scss @@ -0,0 +1,67 @@ +.header{ + + &.modal-header { + height:3.750rem; + line-height:3.750rem; + width:100%; + padding:0 2rem; + } + + &.dark{ + background-color: $grey-shadow; + } + +} + + +.header .h2b { + color:$white; + vertical-align: middle; + line-height: inherit; +} + +.modal-content-nav { + margin-top:2.25rem; +} + +.modal-content-nav .previous p { + text-align: left; +} + +.modal-content-nav .next p { + text-align:right; +} + +//////////////////////////////////////////////////////////////////////////// +/*HELP MODAL --- E.G, CEO HP*/ +/////////////////////////////////////////////////////////////////////////// + +/*4 columns*/ + +.help-modal { + width:50%; + min-height: 510px; + height: 510px; + margin:0 auto; +} + +/*1 column TBD*/ +.help-modal-menu { + background-color: $blue-sky; + width:243px; +} + + +.help-modal .help-steps-list-item a { + +} + +.help-modal .help-content-container { + padding: 1.5rem; + width:485px;/*3 Col*/ +} + +.help-modal .help-content-container h2 { + color:$grey-shadow; + margin-bottom: 1rem; +} \ No newline at end of file diff --git a/client/src/styles/molecules/_sidebar-nav.scss b/client/src/styles/molecules/_sidebar-nav.scss new file mode 100644 index 0000000..b3d3093 --- /dev/null +++ b/client/src/styles/molecules/_sidebar-nav.scss @@ -0,0 +1,32 @@ +.sidebar h2, +.sidebar-nav h2 { + color:$white; + padding: 1.5rem; +} + +.sidebar-list li, +.sidebar-nav li { + line-height: 2.5em; + color:$white; + transition: $hover-transition-default; + + &:hover, &:active, &.on { + background-color: $blue-navy; + } + + &:hover { + + } +} + +.sidebar-list li a { + display:inline-block; + height: 100%; + width: 100%; + padding-left:1.5rem; +} + +.sidebar.blue .sidebar-list li a, +.sidebar.green .sidebar-list li a, { + color:$white; +} \ No newline at end of file diff --git a/client/src/styles/molecules/_text_icons.scss b/client/src/styles/molecules/_text_icons.scss new file mode 100644 index 0000000..e69de29 diff --git a/client/src/styles/settings/_colors.scss b/client/src/styles/settings/_colors.scss new file mode 100644 index 0000000..3f58023 --- /dev/null +++ b/client/src/styles/settings/_colors.scss @@ -0,0 +1,134 @@ +/**** +RGB SETTINGS +****/ + + +//Gray Scale (White to Black) +$white: (name: "white", r: 255, g: 255, b: 255); +$grey-very-light: (name: "grey-very-light", r: 247, g: 247, b: 247); +$grey-background: (name: "grey-background", r: 244, g: 244, b: 244); +$grey-light: (name: "grey-light", r: 238, g: 238, b: 238); +$grey-mid-light: (name:"grey-mid-light", r: 222, g: 222, b:222); +$grey: (name: "grey", r: 200, g: 200, b: 200); +$grey-medium: (name: "grey-medium", r: 164, g: 164, b: 164); +$grey-smoke: (name: "grey-smoke", r: 130, g: 130, b: 130); +$grey-dark: (name: "grey-dark", r: 102, g: 102, b: 102); +$grey-shadow: (name: "grey-shadow", r: 74, g: 74, b: 74); +$grey-dark-as-hell: (name: "grey-dark-as-hell", r: 51, g:51, b: 51); +$black: (name: "black", r: 0, g: 0, b: 0); + + +//Blues +$blue-midnight: (name: "blue-midnight", r: 12, g: 65, b: 89); +$blue-navy: (name: "blue-navy", r: 17, g: 91, b: 124); +$blue-steel: (name: "blue-steel", r: 25, g: 131, b: 179); +$blue-sky: (name: "blue-sky", r: 94, g: 168, b: 201); +$blue-glacier: (name: "blue-glacier", r: 140, g: 193, b: 217); +$blue-artic: (name: "blue-artic", r: 186, g: 218, b: 232); +$blue-highlight: (name: "blue-highlight", r: 220, g: 236, b: 243); +$blue-ice: (name: "blue-ice", r: 231, g: 239, b: 243); + +//Greens +$green-forest: (name: "green-forest", r: 19, g: 59, b: 21); +$green-leaf: (name: "green-leaf", r: 27, g: 83, b: 30); +$green-mint: (name: "green-mint", r: 40, g: 120, b: 43); +$green-sea: (name: "green-sea", r: 104, g: 160, b: 107); +$green-mist: (name: "green-mist", r: 147, g: 187, b: 149); +$green-haze: (name: "green-haze", r: 179, g: 207, b: 181); + + +//Oranges +$orange-rust: (name: "orange-rust", r: 107, g: 44, b: 0); +$orange-clay: (name: "orange-rust", r: 150, g: 62, b: 0); +$orange-tiger: (name: "orange-rust", r: 216, g: 89, b: 0); +$orange-melon: (name: "orange-rust", r: 227, g: 139, b: 77); +$orange-ginger: (name: "orange-rust", r: 235, g: 172, b: 128); + +//CUSTOM ONE-OFFS +$admin-teal: (name: "admin-teal", r: 18, g: 229, b: 252); +$admin-purple: (name: "admin-purple", r: 171, g: 54, b: 239); +$admin-gold: (name: "admin-gold", r: 255, g: 191, b: 0); +$axial-red: (name: "axial-red", r: 172, g: 13, b: 25); +$red: (name: "red", r: 226, g: 0, b: 26); +$error-background: (name: "error-background", r: 252, g: 243, b: 244); +$axial-blue-dark: (name: "axial-blue-dark", r: 0, g: 61, b: 118); +$axial-blue-light: (name: "axial-blue-light", r: 0, g: 74, b: 153); + + +//---------------------------------------------------------------------------------------------------// +// MAP RGB COLORS +//--------------------------------------------------------------------------------------------------// + +/*------------------------ +APP COLORS +-------------------------*/ + +//Gray Scale (White to Black) +$white: rgb(map-get($white, "r"), map-get($white, "g"), map-get($white, "b")); +$grey-very-light: rgb(map-get($grey-very-light, "r"), map-get($grey-very-light, "g"), map-get($grey-very-light, "b")); +$grey-background: rgb(map-get($grey-background, "r"), map-get($grey-background, "g"), map-get($grey-background, "b")); +$grey-light: rgb(map-get($grey-light, "r"), map-get($grey-light, "g"), map-get($grey-light, "b")); +$grey-mid-light: rgb(map-get($grey-mid-light, "r"), map-get($grey-mid-light, "g"), map-get($grey-mid-light, "b")); +$grey: rgb(map-get($grey, "r"), map-get($grey, "g"), map-get($grey, "b")); +$grey-medium: rgb(map-get($grey-medium, "r"), map-get($grey-medium, "g"), map-get($grey-medium, "b")); +$grey-smoke: rgb(map-get($grey-smoke, "r"), map-get($grey-smoke, "g"), map-get($grey-smoke, "b")); +$grey-dark: rgb(map-get($grey-dark, "r"), map-get($grey-dark, "g"), map-get($grey-dark, "b")); +$grey-shadow: rgb(map-get($grey-shadow, "r"), map-get($grey-shadow, "g"), map-get($grey-shadow, "b")); +$grey-dark-as-hell: rgb(map-get($grey-dark-as-hell, "r"), map-get($grey-dark-as-hell, "g"), map-get($grey-dark-as-hell, "b")); +$black: rgb(map-get($black, "r"), map-get($black, "g"), map-get($black, "b")); + +//BLUES +$blue-midnight: rgb(map-get($blue-midnight, "r"), map-get($blue-midnight, "g"), map-get($blue-midnight, "b")); +$blue-navy: rgb(map-get($blue-navy, "r"), map-get($blue-navy, "g"), map-get($blue-navy, "b")); +$blue-steel: rgb(map-get($blue-steel, "r"), map-get($blue-steel, "g"), map-get($blue-steel, "b")); +$blue-sky: rgb(map-get($blue-sky, "r"), map-get($blue-sky, "g"), map-get($blue-sky, "b")); +$blue-glacier: rgb(map-get($blue-glacier, "r"), map-get($blue-glacier, "g"), map-get($blue-glacier, "b")); +$blue-artic: rgb(map-get($blue-artic, "r"), map-get($blue-artic, "g"), map-get($blue-artic, "b")); +$blue-highlight: rgb(map-get($blue-highlight, "r"), map-get($blue-highlight, "g"), map-get($blue-highlight, "b")); +$blue-ice: rgb(map-get($blue-ice, "r"), map-get($blue-ice, "g"), map-get($blue-ice, "b")); + +//Greens +$green-forest: rgb(map-get($green-forest, "r"), map-get($green-forest, "g"), map-get($green-forest, "b")); +$green-leaf: rgb(map-get($green-leaf, "r"), map-get($green-leaf, "g"), map-get($green-leaf, "b")); +$green-mint: rgb(map-get($green-mint, "r"), map-get($green-mint, "g"), map-get($green-mint, "b")); +$green-sea: rgb(map-get($green-sea, "r"), map-get($green-sea, "g"), map-get($green-sea, "b")); +$green-mist: rgb(map-get($green-mist, "r"), map-get($green-mist, "g"), map-get($green-mist, "b")); +$green-haze: rgb(map-get($green-haze, "r"), map-get($green-haze, "g"), map-get($green-haze, "b")); + +//Oranges +$orange-rust: rgb(map-get($orange-rust, "r"), map-get($orange-rust, "g"), map-get($orange-rust, "b")); +$orange-clay: rgb(map-get($orange-clay, "r"), map-get($orange-clay, "g"), map-get($orange-clay, "b")); +$orange-tiger: rgb(map-get($orange-tiger, "r"), map-get($orange-tiger, "g"), map-get($orange-tiger, "b")); +$orange-melon: rgb(map-get($orange-melon, "r"), map-get($orange-melon, "g"), map-get($orange-melon, "b")); +$orange-ginger: rgb(map-get($orange-ginger, "r"), map-get($orange-ginger, "g"), map-get($orange-ginger, "b")); + + +//CUSTOM ONE-OFFS +$axial-red: rgb(map-get($axial-red, "r"), map-get($axial-red, "g"), map-get($axial-red, "b")); +$admin-gold: rgb(map-get($admin-gold, "r"), map-get($admin-gold, "g"), map-get($admin-gold, "b")); +$error-background: rgb(map-get($error-background, "r"), map-get($error-background, "g"), map-get($error-background, "b")); + +//DEFAULTS +$base-blue: $blue-steel; +$base-green: $green-sea; +$base-orange: $orange-tiger; +$base-white: $white; + +/*---------------- +TEXT COLORS +------------------*/ +$base-text-color: $grey-shadow; + + +/*---------------- +VARIABLE PROPERTIES +------------------*/ + +$text-default-color: $base-text-color;//#4a4a4a +$a-base-color: $base-blue; + + + + + + diff --git a/client/src/styles/settings/_font-settings.scss b/client/src/styles/settings/_font-settings.scss new file mode 100644 index 0000000..1f60719 --- /dev/null +++ b/client/src/styles/settings/_font-settings.scss @@ -0,0 +1,55 @@ +// FONTS +$font-family: "Open Sans"; +$font-size: 1rem; +$base-ratio: 0.125; +$default-font-size: $font-size - $base-ratio; +$default-letter-spacing: 0.2px; +$default-line-height: 1.5em; +$italic: italic; + +$font-weight-light: 300; +$font-weight-regular: 400; +$font-weight-semibold: 600; +$font-weight-bold: 700; +$font-weight-bolder: 800; + +$h1-font-size: ($font-size + $base-ratio) * 2; +$h2-font-size: $font-size * (2 - 4 * $base-ratio); +$h3-font-size: $font-size + $base-ratio; +$h4-font-size: $font-size; +$h5-font-size: $font-size - $base-ratio; +$h6-font-size: $font-size - $base-ratio * 2; + +$h6-letter-spacing: 0.3px; + +$xx-small-text: 0.688rem;//11px; +$x-small-text: $font-size - $base-ratio * 2;// .75rem; //12px +$small-text: 0.813rem;//13px +$med-text: $default-font-size;//14px +$baseline-text: $default-font-size;//14px +$large-text: $font-size; //16px +$x-large-text: $font-size + $base-ratio; //18px + +$button-text-small: $small-text; +$button-text-medium: $font-size; +$button-text-large: $font-size; + + +$p-font-size: $default-font-size;/*14px*/ + +$p-padding-bottom: 8px; + + +$tag-letter-spacing: .5px; + +$center: center; + +$uppercase: uppercase; + +$help-text-x-small: $xx-small-text; +$help-text-standard: $small-text; + + + + + diff --git a/client/src/styles/settings/_reset.scss b/client/src/styles/settings/_reset.scss new file mode 100644 index 0000000..9ff51eb --- /dev/null +++ b/client/src/styles/settings/_reset.scss @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/client/src/styles/settings/_settings.scss b/client/src/styles/settings/_settings.scss new file mode 100644 index 0000000..3d202c9 --- /dev/null +++ b/client/src/styles/settings/_settings.scss @@ -0,0 +1,103 @@ +////////////////////////////////////////////////////////////////////////////////////////////////// +/*Variables*/ +////////////////////////////////////////////////////////////////////////////////////////////////// + +//Element Properties +$default-box-sizing: border-box; + +$left: left; +$right: right; +$clear-fix: both; + +$inline-block: inline-block; + + +// Opacity +$default-opacity: 100; +$disabled-opacity: 0.3; +$secondary-opacity: 0.7; + +$modal-bg-opacity: $secondary-opacity; + +// Borders +$default-border-radius: 0px; +$rounded-border-radius: 3px; +$growler-border-radius: $rounded-border-radius * 2; +$pill-style-radius: $default-font-size; +$circle:50%; + +$default-border-color:$grey; +$default-border-size: 1px; +$default-border-style: solid; +$dotted-border-style: dotted; +$border-none:none; + + +$default-border: $default-border-size $default-border-style $default-border-color; + +//Cursor +$cursor-inactive:not-allowed; + +//Link Style + + +//Transitions +$hover-transition-default: background .25s ease-in-out; + +$border-color-transition: border-color .25s ease-in-out; + +$border-width-transition: border-size .005s ease-in-out; + +//SHADOWS +$shadow-style-card: 0px 41px 80px -55px rgba(0, 0, 0, 0.55), 0px 41px 80px -55px rgba(255, 255, 255, 0.55); +$shadow-style-card-back: 0px 2px 12px 15px rgba(0, 0, 0, 0.2); +$shadow-style-growler: 0px 3px 15px 0px rgba(0, 0, 0, 0.2); +$shadow-style-user-img: 0px 4px 15px 0px rgba(0,0,0,0.25); +$shadow-style-sidebar-right: -5px 0px 15px -5px rgba(0,0,0,0.25); +$shadow-style-sidebar-left: 5px 0px 15px -5px rgba(0, 0, 0, 0.25); + +//Full BG +$bg-size-full:cover; + + +////////////////////////////////////////////////////////////////////////////////////////////////// +/*Global Classes*/ +////////////////////////////////////////////////////////////////////////////////////////////////// + +div, section, article, figure, table, span, input, select, textarea +{ + box-sizing:$default-box-sizing; + //@include box-sizing(border-box); +} + +.left { + float: $left; +} + +.right { + float: $right +} + +.clear { + content: ""; + clear: $clear-fix; +} + +.pill, .tag { + display: block; + border-radius:$pill-style-radius; + line-height: 2em; + width:auto; + width:7.333em; + background-color: $grey-mid-light; + color: $grey-shadow; +} + +.truncate-toggle { + font-style: inherit; + color:$grey; +} + +.dotted { + border-style: $dotted-border-style; +} diff --git a/client/src/styles/settings/_states.scss b/client/src/styles/settings/_states.scss new file mode 100644 index 0000000..b695af5 --- /dev/null +++ b/client/src/styles/settings/_states.scss @@ -0,0 +1,15 @@ +.inactive { + opacity: $disabled-opacity; + cursor: $cursor-inactive; +} + +.fade { + opacity: $secondary-opacity; +} + +a, +a:visited, +a:hover { + color: $a-base-color; + cursor: pointer; +} \ No newline at end of file diff --git a/client/src/styles/styles-guide.js b/client/src/styles/styles-guide.js new file mode 100644 index 0000000..946c864 --- /dev/null +++ b/client/src/styles/styles-guide.js @@ -0,0 +1,13 @@ +var textarea = $('textarea'); + +textarea.addEventListener('keydown', autosize); + +function autosize(){ + var el = this; + setTimeout(function(){ + el.style.cssText = 'height:auto; padding:0'; + // for box-sizing other than "content-box" use: + // el.style.cssText = '-moz-box-sizing:content-box'; + el.style.cssText = 'height:' + el.scrollHeight + 'px'; + },0); +} \ No newline at end of file diff --git a/client/src/styles/styles.scss b/client/src/styles/styles.scss index ea4d0b2..395e54c 100644 --- a/client/src/styles/styles.scss +++ b/client/src/styles/styles.scss @@ -1,50 +1,29 @@ -@import - 'mixins', - 'settings'; +@import 'mixins/font-smoothing'; + +@import + 'settings/font-settings', + 'settings/colors', + 'settings/settings', + 'settings/states', + 'settings/reset'; + +@import 'atoms/typography', + 'atoms/buttons', + 'atoms/cards', + 'atoms/icons', + 'atoms/form-atoms', + 'atoms/profiles', + 'atoms/tags', + 'atoms/signifiers', + 'atoms/modal', + 'atoms/logos', + 'atoms/sidebar', + 'atoms/growler'; + +@import 'molecules/sidebar-nav', + 'molecules/modal-elements', + 'molecules/expand-list', + 'molecules/forms', + 'molecules/announcements'; -body { - font-family: $font-family; - @include font-smoothing('antialiased'); - font-size: $default-font-size; - letter-spacing: $default-letter-spacing; - h1 { - font-size: $h1-font-size; - font-weight: $font-weight-light; - } - h2 { - font-size: $h2-font-size; - font-weight: $font-weight-light; - } - h3 { - font-size: $h3-font-size; - font-weight: $font-weight-light; - } - h4 { - font-size: $h4-font-size; - font-weight: $font-weight-regular; - } - h5 { - font-size: $h5-font-size; - font-weight: $font-weight-semibold; - } - h6 { - font-size: $h6-font-size; - font-weight: $font-weight-bold; - text-transform: uppercase; - letter-spacing: $h6-letter-spacing; - } - p { - padding-bottom: $p-padding-bottom; - } - ul { - li { - list-style-type: none; - } - } - a, - a:visited, - a:hover { - color: $a-default-color; - } -} \ No newline at end of file diff --git a/package.json b/package.json index 7a1165f..d4fe1a9 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,13 @@ "main": "app.js", "dependencies": { "angular": "1.5.8", - "angular-ui-router": "^0.3.0", + "angular-ui-router": "^0.2.8", "ng-redux": "^3.4.0-beta.1", - "redux-ui-router": "^0.6.0", "redux": "^3.6.0", - "webpack": "^1.13.2", - "@reactivex/rxjs": "5.0.0-beta.12" + "redux-observable": "^0.12.0", + "redux-ui-router": "^0.6.0", + "rxjs": "^5.0.0-beta.12", + "webpack": "^1.13.2" }, "devDependencies": { "angular-mocks": "^1.5.8",