Skip to content

Commit 0a55a84

Browse files
author
Razvan Puscasu
committed
add react components and build
0 parents  commit 0a55a84

File tree

462 files changed

+27530
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

462 files changed

+27530
-0
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# mylocal-hq

basis/assets/fonts/gitkeep

Whitespace-only changes.

basis/assets/images/gitkeep

Whitespace-only changes.
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* color variables
3+
* color names based on http://chir.ag/projects/name-that-color
4+
* @pallete: https://assets.adobe.com/link/e9e85299-30e5-4386-4d2f-c3823eedc6e9
5+
*/
6+
$color-jungle-green: #28b67c; // http://chir.ag/projects/name-that-color/#28B67C
7+
$color-carnation: #f15a5a; // http://chir.ag/projects/name-that-color/#F15A5A
8+
$color-mariner: #2b7cc0; // http://chir.ag/projects/name-that-color/#2B7CC0
9+
$color-anakiwa: #a3d3fc; // http://chir.ag/projects/name-that-color/#A3D3FC
10+
$color-egg-white: #ffefc5; // http://chir.ag/projects/name-that-color/#FFEFC5
11+
$color-egg-sour: #fff5dc; // http://chir.ag/projects/name-that-color/#FFF5DC
12+
$color-lightning-yellow: #ffc323; // http://chir.ag/projects/name-that-color/#FFC323
13+
$color-algae-green: #7de0a7; // http://chir.ag/projects/name-that-color/#7DE0A7
14+
$color-chablis: #fff3f3; // http://chir.ag/projects/name-that-color/#FFF3F3
15+
$color-vivid-tangerine: #ff8686; // http://chir.ag/projects/name-that-color/#FF8686
16+
$color-quarter-pearl-lusta: #fffdf6; // http://chir.ag/projects/name-that-color/#FFFDF6
17+
$color-white: #fff; // http://chir.ag/projects/name-that-color/#FFFFFF
18+
$color-aero-blue: #cfffe4; // http://chir.ag/projects/name-that-color/#CFFFE4
19+
$color-malibu: #5cb4ff; // http://chir.ag/projects/name-that-color/#5CB4FF
20+
$color-mandy: #ea5151; // http://chir.ag/projects/name-that-color/#EA5151
21+
$color-azure-radiance: #018aff; // http://chir.ag/projects/name-that-color/#018AFF
22+
$color-solitude: #e9f5ff; // http://chir.ag/projects/name-that-color/#E9F5FF
23+
$color-black: #000; // you know black bro
24+
25+
// Gray colors
26+
$color-alto: #CECECE; // http://chir.ag/projects/name-that-color/#CECECE
27+
$color-mine-shaft: #262626; // http://chir.ag/projects/name-that-color/#262626
28+
$color-tundora: #404040; // http://chir.ag/projects/name-that-color/#404040
29+
$color-dove-gray: #6a6a6a; // http://chir.ag/projects/name-that-color/#6a6a6a
30+
$color-gray: #939393; // http://chir.ag/projects/name-that-color/#939393
31+
$color-silver: #c7c7c7; // http://chir.ag/projects/name-that-color/#c7c7c7
32+
$color-mercury: #e9e9e9; // http://chir.ag/projects/name-that-color/#e9e9e9
33+
$color-alabaster: #fbfbfb; // http://chir.ag/projects/name-that-color/#fbfbfb
34+
$color-wild-sand: #f6f6f6; // http://chir.ag/projects/name-that-color/#f6f6f6
35+
$color-gallery: #f0f0f0; // http://chir.ag/projects/name-that-color/#f0f0f0
36+
$color-cod-gray: #1d1d1d; // http://chir.ag/projects/name-that-color/#1d1d1d
37+
$color-mercury: #e4e4e4; // http://chir.ag/projects/name-that-color/#e4e4e4
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// ------------------------------------ //
2+
// VARIABLES / SETTINGS (project wide)
3+
// ------------------------------------ //
4+
5+
// base colors
6+
@import 'colors.scss';
7+
8+
// font families
9+
$font-main: 'Roboto', sans-serif;
10+
$font-secondary: 'Arial', sans-serif;
11+
12+
// @TODO: refactor this
13+
$fw-light: 300;
14+
$fw-normal: 400;
15+
$fw-medium: 500;
16+
$fw-bold: 700;
17+
$fw-bolder: 900;
18+
19+
$fs-xxs: 11px;
20+
$fs-xs: 12px;
21+
$fs-s: 13px;
22+
$fs-m: 14px;
23+
$fs-l: 18px;
24+
$fs-xl: 20px;
25+
$fs-xxl: 22px;
26+
$fs-xxxl: 24px;
27+
$fs-xxxll: 32px;
28+
29+
$item-color--selected: $color-azure-radiance;

basis/assets/styles/tools/mixins.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// ------------------------------------ //
2+
// Mixins - used globally
3+
// ------------------------------------ //
4+
5+
@import "mixins/effects";
6+
@import "mixins/position";
7+
@import "mixins/placeholder";
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// ------------------------------------ //
2+
// Common effects
3+
// ------------------------------------ //
4+
5+
@mixin container-shadow {
6+
$container-shadow-offsetX: 2.5px;
7+
$container-shadow-offsetY: 4.3px;
8+
$container-shadow-blur-radius: 5px;
9+
$container-shadow-bg: rgba(1, 1, 1, 0.1);
10+
11+
box-shadow: $container-shadow-offsetX
12+
$container-shadow-offsetY
13+
$container-shadow-blur-radius
14+
$container-shadow-bg;
15+
}
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// ------------------------------------ //
2+
// UI mixins
3+
// ------------------------------------ //
4+
5+
//
6+
// Input placeholder text color/size
7+
//
8+
@mixin input-placeholder($color, $size:"", $weight:"normal") {
9+
// do NOT group selectors!
10+
11+
// WebKit, Blink, Edge
12+
&::-webkit-input-placeholder {
13+
color: $color;
14+
@if $size != "" {
15+
font-size: $size;
16+
}
17+
@if $weight != "" {
18+
font-weight: $weight;
19+
}
20+
}
21+
22+
// Mozilla Firefox 4 to 18
23+
&:-moz-placeholder {
24+
color: $color;
25+
opacity: 1;
26+
@if $size != "" {
27+
font-size: $size;
28+
}
29+
@if $weight != "" {
30+
font-weight: $weight;
31+
}
32+
}
33+
34+
// Mozilla Firefox 19+
35+
&::-moz-placeholder {
36+
color: $color;
37+
opacity: 1;
38+
@if $size != "" {
39+
font-size: $size;
40+
}
41+
@if $weight != "" {
42+
font-weight: $weight;
43+
}
44+
}
45+
46+
// Internet Explorer 10-11
47+
&:-ms-input-placeholder {
48+
color: $color;
49+
@if $size != "" {
50+
font-size: $size;
51+
}
52+
@if $weight != "" {
53+
font-weight: $weight;
54+
}
55+
}
56+
}
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// ------------------------------------ //
2+
// HELPERS
3+
// ------------------------------------ //
4+
5+
//
6+
// Force Hardware Acceleration
7+
// (aka "null" transform hack)
8+
//
9+
@mixin noflicker {
10+
backface-visibility: hidden;
11+
transform: translate3d(0,0,0);
12+
}
13+
14+
//
15+
// Positioning helpers
16+
//
17+
18+
// Translate center
19+
@mixin translateCenter {
20+
position: absolute;
21+
top: 50%;
22+
left: 50%;
23+
transform: translate(-50%, -50%);
24+
}
25+
26+
// "Absolute margin auto" hack
27+
@mixin positionCenter {
28+
margin: auto;
29+
position: absolute;
30+
top: 0;
31+
right: 0;
32+
bottom: 0;
33+
left: 0;
34+
}
35+
36+
@mixin centerVertically() {
37+
&:before {
38+
content: '';
39+
display: inline-block;
40+
vertical-align: middle;
41+
height: 100%;
42+
}
43+
}

basis/lib/decorators/selectable.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { Component, PropTypes, cloneElement, createElement } from 'react';
2+
3+
export default function Selectable(ComposedComponent) {
4+
const Selectable = class SelectableComponent extends Component {
5+
6+
shouldComponentUpdate(nextProps) {
7+
const hasNextValue = nextProps.value && this.props.value !== nextProps.value;
8+
const hasNewName = this.props.name !== nextProps.name;
9+
const hasNewCheck = this.props.checked !== nextProps.checked;
10+
const hasNewPartial = this.props.isPartial !== nextProps.isPartial;
11+
const isDefaultSortBy = nextProps.sortBy === '';
12+
const hasSortableIsSorted = nextProps.sort && nextProps.sortable && this.props.sortBy !== nextProps.sortBy;
13+
return hasSortableIsSorted || (hasNewCheck || hasNextValue || hasNewName || hasNewPartial) || isDefaultSortBy;
14+
}
15+
16+
_onChanged(ev) {
17+
if (this.props.onChanged) {
18+
this.props.onChanged(typeof ev === 'boolean' ? ev : ev.target.checked, this.props.rowData);
19+
}
20+
}
21+
22+
render() {
23+
let selectableComponent = this.props.selectableComponent;
24+
if (selectableComponent) {
25+
const selectableReactComponent = typeof selectableComponent === 'function' ? createElement(selectableComponent) : selectableComponent;
26+
selectableComponent = cloneElement(selectableReactComponent, Object.assign({}, {
27+
onChange: this._onChanged.bind(this),
28+
checked: this.props.checked,
29+
isPartial: this.props.isPartial,
30+
disabled: selectableReactComponent.props.disabled,
31+
children: this.props.children,
32+
}));
33+
} else {
34+
selectableComponent = (
35+
<input
36+
type="checkbox"
37+
checked={this.props.checked}
38+
onChange={this._onChanged.bind(this)}/>
39+
);
40+
}
41+
42+
return (
43+
<ComposedComponent {...this.props}>
44+
{selectableComponent}
45+
</ComposedComponent>
46+
);
47+
}
48+
};
49+
50+
Selectable.defaultProps = {
51+
checked: false,
52+
isPartial: false,
53+
};
54+
55+
Selectable.propTypes = {
56+
children: PropTypes.node,
57+
checked: PropTypes.bool,
58+
isPartial: PropTypes.bool,
59+
selectable: PropTypes.bool,
60+
onChanged: PropTypes.func,
61+
sortBy: PropTypes.string,
62+
value: React.PropTypes.oneOfType([
63+
React.PropTypes.string,
64+
React.PropTypes.number,
65+
]),
66+
name: PropTypes.string,
67+
rowData: PropTypes.object,
68+
selectableComponent: PropTypes.any,
69+
};
70+
return Selectable;
71+
}

0 commit comments

Comments
 (0)