aligned with established project structure
This commit is contained in:
87
package.json
87
package.json
@@ -3,18 +3,91 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^1.2.28",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^5.13.0",
|
||||||
|
"@fortawesome/react-fontawesome": "^0.1.9",
|
||||||
|
"@svgr/webpack": "4.3.3",
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.5.0",
|
"@testing-library/react": "^9.5.0",
|
||||||
"@testing-library/user-event": "^7.2.1",
|
"@testing-library/user-event": "^7.2.1",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^2.10.0",
|
||||||
|
"@typescript-eslint/parser": "^2.10.0",
|
||||||
|
"babel-eslint": "10.1.0",
|
||||||
|
"babel-jest": "^24.9.0",
|
||||||
|
"babel-loader": "8.1.0",
|
||||||
|
"babel-plugin-named-asset-import": "^0.3.6",
|
||||||
|
"babel-preset-react-app": "^9.1.2",
|
||||||
|
"bootstrap": "^4.4.1",
|
||||||
|
"camelcase": "^5.3.1",
|
||||||
|
"case-sensitive-paths-webpack-plugin": "2.3.0",
|
||||||
|
"css-loader": "3.4.2",
|
||||||
|
"dotenv": "8.2.0",
|
||||||
|
"dotenv-expand": "5.1.0",
|
||||||
|
"eslint": "^6.6.0",
|
||||||
|
"eslint-config-react-app": "^5.2.1",
|
||||||
|
"eslint-loader": "3.0.3",
|
||||||
|
"eslint-plugin-flowtype": "4.6.0",
|
||||||
|
"eslint-plugin-import": "2.20.1",
|
||||||
|
"eslint-plugin-jsx-a11y": "6.2.3",
|
||||||
|
"eslint-plugin-react": "7.19.0",
|
||||||
|
"eslint-plugin-react-hooks": "^1.6.1",
|
||||||
|
"file-loader": "4.3.0",
|
||||||
|
"fs-extra": "^8.1.0",
|
||||||
|
"gapi-script": "^1.0.2",
|
||||||
|
"html-webpack-plugin": "4.0.0-beta.11",
|
||||||
|
"identity-obj-proxy": "3.0.0",
|
||||||
|
"jest": "24.9.0",
|
||||||
|
"jest-environment-jsdom-fourteen": "1.0.1",
|
||||||
|
"jest-resolve": "24.9.0",
|
||||||
|
"jest-watch-typeahead": "0.4.2",
|
||||||
|
"jquery": "^3.4.1",
|
||||||
|
"mini-css-extract-plugin": "0.9.0",
|
||||||
|
"node-sass": "^4.13.1",
|
||||||
|
"optimize-css-assets-webpack-plugin": "5.0.3",
|
||||||
|
"pnp-webpack-plugin": "1.6.4",
|
||||||
|
"postcss-flexbugs-fixes": "4.1.0",
|
||||||
|
"postcss-loader": "3.0.0",
|
||||||
|
"postcss-normalize": "8.0.1",
|
||||||
|
"postcss-preset-env": "6.7.0",
|
||||||
|
"postcss-safe-parser": "4.0.1",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
|
"react-app-polyfill": "^1.0.6",
|
||||||
|
"react-dev-utils": "^10.2.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-scripts": "3.4.1"
|
"react-input-range": "^1.3.0",
|
||||||
|
"react-loadable": "^5.5.0",
|
||||||
|
"react-modal": "^3.11.2",
|
||||||
|
"react-redux": "^7.2.0",
|
||||||
|
"react-router-dom": "^5.1.2",
|
||||||
|
"react-test-renderer": "^16.13.1",
|
||||||
|
"redux": "^4.0.5",
|
||||||
|
"redux-actions": "^2.6.5",
|
||||||
|
"redux-analytics": "^0.3.1",
|
||||||
|
"redux-thunk": "^2.3.0",
|
||||||
|
"reselect": "^4.0.0",
|
||||||
|
"reselect-immutable-helpers": "^1.2.2",
|
||||||
|
"resolve": "1.15.0",
|
||||||
|
"resolve-url-loader": "3.1.1",
|
||||||
|
"sass-loader": "8.0.2",
|
||||||
|
"semver": "6.3.0",
|
||||||
|
"style-loader": "0.23.1",
|
||||||
|
"terser-webpack-plugin": "2.3.5",
|
||||||
|
"ts-pnp": "1.1.6",
|
||||||
|
"typescript": "^3.8.3",
|
||||||
|
"url-loader": "2.3.0",
|
||||||
|
"webpack": "4.42.0",
|
||||||
|
"webpack-dev-server": "3.10.3",
|
||||||
|
"webpack-manifest-plugin": "2.2.0",
|
||||||
|
"workbox-webpack-plugin": "4.3.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject",
|
||||||
|
"generate": "plop",
|
||||||
|
"predeploy": "npm run build",
|
||||||
|
"deploy": "gh-pages -d build"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "react-app"
|
"extends": "react-app"
|
||||||
@@ -30,5 +103,15 @@
|
|||||||
"last 1 firefox version",
|
"last 1 firefox version",
|
||||||
"last 1 safari version"
|
"last 1 safari version"
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/cli": "^7.8.4",
|
||||||
|
"@babel/core": "^7.9.0",
|
||||||
|
"@babel/plugin-transform-react-jsx": "^7.9.4",
|
||||||
|
"@babel/preset-env": "^7.9.0",
|
||||||
|
"@babel/preset-react": "^7.9.4",
|
||||||
|
"body-parser": "^1.19.0",
|
||||||
|
"gh-pages": "^2.2.0",
|
||||||
|
"plop": "^2.6.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
3
plop-templates/Component/Component.component.scss.hbs
Normal file
3
plop-templates/Component/Component.component.scss.hbs
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
.c-{{pascalCase name}} {
|
||||||
|
|
||||||
|
}
|
||||||
20
plop-templates/Component/Component.jsx.hbs
Normal file
20
plop-templates/Component/Component.jsx.hbs
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import './{{pascalCase name}}.component.scss';
|
||||||
|
|
||||||
|
const {{pascalCase name}} = props => {
|
||||||
|
return (
|
||||||
|
<div className='c-{{pascalCase name}}'>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
{{pascalCase name}}.defaultProps = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
{{pascalCase name}}.propTypes = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {{pascalCase name}};
|
||||||
8
plop-templates/Component/Component.test.js.hbs
Normal file
8
plop-templates/Component/Component.test.js.hbs
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {{pascalCase name}} from './{{pascalCase name}}';
|
||||||
|
|
||||||
|
describe('{{pascalCase name}}', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
plop-templates/Component/index.js.hbs
Normal file
3
plop-templates/Component/index.js.hbs
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import {{pascalCase name}} from './{{pascalCase name}}.jsx';
|
||||||
|
|
||||||
|
export default {{pascalCase name}};
|
||||||
20
plop-templates/Page/Page.jsx.hbs
Normal file
20
plop-templates/Page/Page.jsx.hbs
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import './{{pascalCase name}}.module.scss';
|
||||||
|
|
||||||
|
const {{pascalCase name}} = props => {
|
||||||
|
return (
|
||||||
|
<div className={styles.root}>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
{{pascalCase name}}.defaultProps = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
{{pascalCase name}}.propTypes = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {{pascalCase name}};
|
||||||
3
plop-templates/Page/Page.module.scss.hbs
Normal file
3
plop-templates/Page/Page.module.scss.hbs
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
.c-{{pascalCase name}} {
|
||||||
|
|
||||||
|
}
|
||||||
8
plop-templates/Page/Page.test.js.hbs
Normal file
8
plop-templates/Page/Page.test.js.hbs
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {{pascalCase name}} from './{{pascalCase name}}';
|
||||||
|
|
||||||
|
describe('{{pascalCase name}}', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
plop-templates/Page/index.js.hbs
Normal file
3
plop-templates/Page/index.js.hbs
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import {{pascalCase name}} from './{{pascalCase name}}.jsx';
|
||||||
|
|
||||||
|
export default {{pascalCase name}};
|
||||||
5
plop-templates/hook.js.hbs
Normal file
5
plop-templates/hook.js.hbs
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
const {{camelCase name}} = () => {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {{camelCase name}};
|
||||||
5
plop-templates/injectable-index.js.hbs
Normal file
5
plop-templates/injectable-index.js.hbs
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
/* PLOP_INJECT_IMPORT */
|
||||||
|
|
||||||
|
export {
|
||||||
|
/* PLOP_INJECT_EXPORT */
|
||||||
|
}
|
||||||
17
plop-templates/service.js.hbs
Normal file
17
plop-templates/service.js.hbs
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
const create{{pascalCase name}} = () => {
|
||||||
|
let examplePrivateVariable = 0
|
||||||
|
|
||||||
|
return {
|
||||||
|
getExamplePrivateVariable: () => {
|
||||||
|
return examplePrivateVariable
|
||||||
|
},
|
||||||
|
setExamplePrivateVariable: (n) => {
|
||||||
|
examplePrivateVariable = n
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const singleton = create{{pascalCase name}}();
|
||||||
|
Object.freeze(singleton);
|
||||||
|
|
||||||
|
export default singleton;
|
||||||
192
plopfile.js
Normal file
192
plopfile.js
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
module.exports = plop => {
|
||||||
|
plop.setGenerator('component', {
|
||||||
|
description: 'Create a component',
|
||||||
|
// User input prompts provided as arguments to the template
|
||||||
|
prompts: [
|
||||||
|
{
|
||||||
|
// Raw text input
|
||||||
|
type: 'input',
|
||||||
|
// Variable name for this input
|
||||||
|
name: 'name',
|
||||||
|
// Prompt to display on command line
|
||||||
|
message: 'What is your component name?'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
// Plop will create directories for us if they do not exist
|
||||||
|
// so it's okay to add files in nested locations.
|
||||||
|
path: 'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.jsx',
|
||||||
|
templateFile:
|
||||||
|
'plop-templates/Component/Component.jsx.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.test.js',
|
||||||
|
templateFile:
|
||||||
|
'plop-templates/Component/Component.test.js.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path:
|
||||||
|
'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.component.scss',
|
||||||
|
templateFile:
|
||||||
|
'plop-templates/Component/Component.component.scss.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/components/molecules/{{pascalCase name}}/index.js',
|
||||||
|
templateFile: 'plop-templates/Component/index.js.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// Adds an index.js file if it does not already exist
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/components/index.js',
|
||||||
|
templateFile: 'plop-templates/injectable-index.js.hbs',
|
||||||
|
// If index.js already exists in this location, skip this action
|
||||||
|
skipIfExists: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// Action type 'append' injects a template into an existing file
|
||||||
|
type: 'append',
|
||||||
|
path: 'src/app/components/index.js',
|
||||||
|
// Pattern tells plop where in the file to inject the template
|
||||||
|
pattern: `/* PLOP_INJECT_IMPORT */`,
|
||||||
|
template: `import {{pascalCase name}} from './molecules/{{pascalCase name}}';`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'append',
|
||||||
|
path: 'src/app/components/index.js',
|
||||||
|
pattern: `/* PLOP_INJECT_EXPORT */`,
|
||||||
|
template: `\t{{pascalCase name}},`,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
plop.setGenerator('page', {
|
||||||
|
description: 'Create a page',
|
||||||
|
prompts: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
name: 'name',
|
||||||
|
message: 'What is your page name?',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.jsx',
|
||||||
|
templateFile:
|
||||||
|
'plop-templates/Page/Page.jsx.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.test.js',
|
||||||
|
templateFile:
|
||||||
|
'plop-templates/Page/Page.test.js.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path:
|
||||||
|
'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.module.scss',
|
||||||
|
templateFile:
|
||||||
|
'plop-templates/Page/Page.module.scss.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/pages/{{pascalCase name}}/index.js',
|
||||||
|
templateFile: 'plop-templates/Page/index.js.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/pages/index.js',
|
||||||
|
templateFile: 'plop-templates/injectable-index.js.hbs',
|
||||||
|
skipIfExists: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'append',
|
||||||
|
path: 'src/app/pages/index.js',
|
||||||
|
pattern: `/* PLOP_INJECT_IMPORT */`,
|
||||||
|
template: `import {{pascalCase name}} from './{{pascalCase name}}';`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'append',
|
||||||
|
path: 'src/app/pages/index.js',
|
||||||
|
pattern: `/* PLOP_INJECT_EXPORT */`,
|
||||||
|
template: `\t{{pascalCase name}},`,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
plop.setGenerator('service', {
|
||||||
|
description: 'Create service',
|
||||||
|
prompts: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
name: 'name',
|
||||||
|
message: 'What is your service name?',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/services/{{camelCase name}}.js',
|
||||||
|
templateFile: 'plop-templates/service.js.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/services/index.js',
|
||||||
|
templateFile: 'plop-templates/injectable-index.js.hbs',
|
||||||
|
skipIfExists: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'append',
|
||||||
|
path: 'src/app/services/index.js',
|
||||||
|
pattern: `/* PLOP_INJECT_IMPORT */`,
|
||||||
|
template: `import {{camelCase name}} from './{{camelCase name}}';`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'append',
|
||||||
|
path: 'src/app/services/index.js',
|
||||||
|
pattern: `/* PLOP_INJECT_EXPORT */`,
|
||||||
|
template: `\t{{camelCase name}},`,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
plop.setGenerator('hook', {
|
||||||
|
description: 'Create a custom react hook',
|
||||||
|
prompts: [
|
||||||
|
{
|
||||||
|
type: 'input',
|
||||||
|
name: 'name',
|
||||||
|
message: 'What is your hook name?',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/hooks/{{camelCase name}}.js',
|
||||||
|
templateFile: 'plop-templates/hook.js.hbs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'add',
|
||||||
|
path: 'src/app/hooks/index.js',
|
||||||
|
templateFile: 'plop-templates/injectable-index.js.hbs',
|
||||||
|
skipIfExists: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'append',
|
||||||
|
path: 'src/app/hooks/index.js',
|
||||||
|
pattern: `/* PLOP_INJECT_IMPORT */`,
|
||||||
|
template: `import {{camelCase name}} from './{{camelCase name}}';`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'append',
|
||||||
|
path: 'src/app/hooks/index.js',
|
||||||
|
pattern: `/* PLOP_INJECT_EXPORT */`,
|
||||||
|
template: `\t{{camelCase name}},`,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
})
|
||||||
|
};
|
||||||
38
src/App.css
38
src/App.css
@@ -1,38 +0,0 @@
|
|||||||
.App {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-logo {
|
|
||||||
height: 40vmin;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.App-logo {
|
|
||||||
animation: App-logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-header {
|
|
||||||
background-color: #282c34;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: calc(10px + 2vmin);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-link {
|
|
||||||
color: #61dafb;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes App-logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
26
src/App.js
26
src/App.js
@@ -1,26 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import logo from './logo.svg';
|
|
||||||
import './App.css';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<header className="App-header">
|
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
|
||||||
<p>
|
|
||||||
Edit <code>src/App.js</code> and save to reload.
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
className="App-link"
|
|
||||||
href="https://reactjs.org"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Learn React
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { render } from '@testing-library/react';
|
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
test('renders learn react link', () => {
|
|
||||||
const { getByText } = render(<App />);
|
|
||||||
const linkElement = getByText(/learn react/i);
|
|
||||||
expect(linkElement).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
2
src/app/actions.js
Normal file
2
src/app/actions.js
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export const initializeApp = () => {
|
||||||
|
}
|
||||||
61
src/app/components/index.js
Normal file
61
src/app/components/index.js
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
/* PLOP_INJECT_IMPORT */
|
||||||
|
import SortTool from './molecules/SortTool';
|
||||||
|
import FilterTool from './molecules/FilterTool';
|
||||||
|
import ProductContainerWithTools from './molecules/ProductContainerWithTools';
|
||||||
|
import Modal from './molecules/Modal';
|
||||||
|
import QuantityControlWidget from './molecules/QuantityControlWidget';
|
||||||
|
import ItemPrice from './molecules/ItemPrice';
|
||||||
|
import SectionLoader from './molecules/SectionLoader';
|
||||||
|
import CartSummary from './molecules/CartSummary';
|
||||||
|
import CartItem from './molecules/CartItem';
|
||||||
|
import CartList from './molecules/CartList';
|
||||||
|
import Footer from './molecules/Footer';
|
||||||
|
import ProductTile from './molecules/ProductTile';
|
||||||
|
import ProductContainer from './molecules/ProductContainer';
|
||||||
|
import FilterModal from './molecules/FilterModal';
|
||||||
|
import SortModal from './molecules/SortModal';
|
||||||
|
import SortAndFilterPanel from './molecules/SortAndFilterPanel';
|
||||||
|
import CartIcon from './molecules/CartIcon';
|
||||||
|
import Search from './molecules/Search';
|
||||||
|
import Jumbotron from './molecules/common/Jumbotron';
|
||||||
|
import FormFieldContainer from './molecules/common/FormFieldContainer';
|
||||||
|
import Form from './molecules/common/Form';
|
||||||
|
import SocialLogin from './molecules/SocialLogin';
|
||||||
|
import LoginForm from './molecules/LoginForm';
|
||||||
|
import PageLoader from './molecules/PageLoader';
|
||||||
|
import Header from './molecules/Header'
|
||||||
|
import Button from './atoms/Button';
|
||||||
|
import InputField from './atoms/InputField';
|
||||||
|
import SelectOption from './atoms/SelectOption';
|
||||||
|
|
||||||
|
export {
|
||||||
|
/* PLOP_INJECT_EXPORT */
|
||||||
|
SortTool,
|
||||||
|
FilterTool,
|
||||||
|
ProductContainerWithTools,
|
||||||
|
Modal,
|
||||||
|
QuantityControlWidget,
|
||||||
|
ItemPrice,
|
||||||
|
SectionLoader,
|
||||||
|
CartSummary,
|
||||||
|
CartItem,
|
||||||
|
CartList,
|
||||||
|
Footer,
|
||||||
|
ProductTile,
|
||||||
|
ProductContainer,
|
||||||
|
FilterModal,
|
||||||
|
SortModal,
|
||||||
|
Button,
|
||||||
|
SortAndFilterPanel,
|
||||||
|
CartIcon,
|
||||||
|
Search,
|
||||||
|
Jumbotron,
|
||||||
|
FormFieldContainer,
|
||||||
|
Form,
|
||||||
|
Header,
|
||||||
|
SocialLogin,
|
||||||
|
LoginForm,
|
||||||
|
SelectOption,
|
||||||
|
InputField,
|
||||||
|
PageLoader,
|
||||||
|
}
|
||||||
19
src/app/components/molecules/Footer/Footer.component.scss
Normal file
19
src/app/components/molecules/Footer/Footer.component.scss
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
@import './../../../styles/variables';
|
||||||
|
|
||||||
|
.c-Footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: $brand-color;
|
||||||
|
color: $font-color-light;
|
||||||
|
padding: 0.7em;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/app/components/molecules/Footer/Footer.jsx
Normal file
21
src/app/components/molecules/Footer/Footer.jsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import styles from './Footer.component.scss';
|
||||||
|
|
||||||
|
const Footer = props => {
|
||||||
|
return (
|
||||||
|
<footer className='c-Footer'>
|
||||||
|
<p>@Copyright</p>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Footer.defaultProps = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
Footer.propTypes = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
8
src/app/components/molecules/Footer/Footer.test.js
Normal file
8
src/app/components/molecules/Footer/Footer.test.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Footer from './Footer';
|
||||||
|
|
||||||
|
describe('Footer', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
src/app/components/molecules/Footer/index.js
Normal file
3
src/app/components/molecules/Footer/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import Footer from './Footer.jsx';
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
65
src/app/components/molecules/Header/Header.component.scss
Normal file
65
src/app/components/molecules/Header/Header.component.scss
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
@import './../../../styles/variables';
|
||||||
|
|
||||||
|
.c-Header {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
height: $header-height;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: $brand-color;
|
||||||
|
color: $neutral-00;
|
||||||
|
padding: 1em 1em;
|
||||||
|
z-index: 2;
|
||||||
|
transition: transform 0.4s;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
justify-content: space-between;
|
||||||
|
.c-Header__cartIconContainer--aligner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*='col-'] {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&.c-Header--margin-right {
|
||||||
|
margin-right: 0.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-Header__logo-main {
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-Header__iconClass {
|
||||||
|
transform: rotateX(18deg) rotateZ(10deg) scale(2);
|
||||||
|
color: yellow;
|
||||||
|
// margin: 6px 0px 3px 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-icon {
|
||||||
|
font-size: $bigger-font-size;
|
||||||
|
&:hover {
|
||||||
|
color: $light-accent-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
[class*='col-'] {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
.c-Header__logo-main {
|
||||||
|
justify-content: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
58
src/app/components/molecules/Header/Header.jsx
Normal file
58
src/app/components/molecules/Header/Header.jsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import React, {useEffect} from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { faStar } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
|
import Search from './../Search'
|
||||||
|
import CartIcon from './../CartIcon'
|
||||||
|
|
||||||
|
const Header = props => {
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const body = document.body;
|
||||||
|
const scrollUp = "scroll-up";
|
||||||
|
const scrollDown = "scroll-down";
|
||||||
|
let lastScroll = 0;
|
||||||
|
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
const currentScroll = window.pageYOffset;
|
||||||
|
if (currentScroll === 0) {
|
||||||
|
body.classList.remove(scrollUp);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
|
||||||
|
// down
|
||||||
|
body.classList.remove(scrollUp);
|
||||||
|
body.classList.add(scrollDown);
|
||||||
|
} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
|
||||||
|
// up
|
||||||
|
body.classList.remove(scrollDown);
|
||||||
|
body.classList.add(scrollUp);
|
||||||
|
}
|
||||||
|
lastScroll = currentScroll;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className='c-Header'>
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-1 c-Header--margin-right"><Link to="/view/plp" className="c-Header__logo-main"><FontAwesomeIcon className="c-Header__iconClass" icon={faStar} /></Link></div>
|
||||||
|
<div className={`${props.inCart ? "col-10" : "col-9 c-Header--margin-right"}`}><Search inCart={props.inCart} /></div>
|
||||||
|
<div className="col-1 c-Header__cartIconContainer--aligner">{!props.inCart && <CartIcon />}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Header.defaultProps = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
Header.propTypes = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
8
src/app/components/molecules/Header/Header.test.js
Normal file
8
src/app/components/molecules/Header/Header.test.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Header from './Header';
|
||||||
|
|
||||||
|
describe('Header', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
src/app/components/molecules/Header/index.js
Normal file
3
src/app/components/molecules/Header/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import Header from './Header.jsx';
|
||||||
|
|
||||||
|
export default Header;
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
.c-LoginForm {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
29
src/app/components/molecules/LoginForm/LoginForm.js
Normal file
29
src/app/components/molecules/LoginForm/LoginForm.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import loginFormFields from './../../../config/forms-meta/login-form.json'
|
||||||
|
import Form from './../common/Form'
|
||||||
|
|
||||||
|
const LoginForm = props => {
|
||||||
|
return (
|
||||||
|
<div className='c-LoginForm'>
|
||||||
|
<Form
|
||||||
|
metaData={loginFormFields}
|
||||||
|
context="login"
|
||||||
|
updateFormValues={props.updateFormValues}
|
||||||
|
updateFormErrors={props.updateFormErrors}
|
||||||
|
formErrors={props.formErrors}
|
||||||
|
formValues={props.formValues}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LoginForm.propTypes = {
|
||||||
|
updateFormValues: PropTypes.func,
|
||||||
|
updateFormErrors: PropTypes.func,
|
||||||
|
formValues: PropTypes.object,
|
||||||
|
formErrors: PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoginForm;
|
||||||
8
src/app/components/molecules/LoginForm/LoginForm.test.js
Normal file
8
src/app/components/molecules/LoginForm/LoginForm.test.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import LoginForm from './LoginForm';
|
||||||
|
|
||||||
|
describe('LoginForm', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
src/app/components/molecules/LoginForm/index.js
Normal file
3
src/app/components/molecules/LoginForm/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import LoginForm from './LoginForm';
|
||||||
|
|
||||||
|
export default LoginForm;
|
||||||
@@ -0,0 +1,125 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
|
||||||
|
|
||||||
|
.c-PageLoader {
|
||||||
|
// margin-top: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top:0px;
|
||||||
|
left:0px;
|
||||||
|
z-index: 20;
|
||||||
|
|
||||||
|
// .is-animate {
|
||||||
|
// background: #ffb200;
|
||||||
|
// box-sizing: border-box;
|
||||||
|
// font-size: 66px;
|
||||||
|
// display: -webkit-inline-box;
|
||||||
|
// padding: 14px;
|
||||||
|
// border-radius: 7px;
|
||||||
|
// }
|
||||||
|
// .is-animate > div {
|
||||||
|
// animation-name: style;
|
||||||
|
// display: -webkit-inline-box;
|
||||||
|
// color: #fff;
|
||||||
|
// padding: 9px;
|
||||||
|
// background: #ffb200;
|
||||||
|
// font-family: 'Indie Flower', cursive;
|
||||||
|
// box-shadow: 2px 2px 9px 2px;
|
||||||
|
// }
|
||||||
|
// .l{
|
||||||
|
// animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .is-animate > div {
|
||||||
|
// animation-duration: 1s;
|
||||||
|
// animation-fill-mode: both;
|
||||||
|
// animation-iteration-count: infinite;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .is-animate > div:nth-child(1) { animation-delay: 0.0s }
|
||||||
|
// .is-animate > div:nth-child(2) { animation-delay: 0.1s }
|
||||||
|
// .is-animate > div:nth-child(3) { animation-delay: 0.2s }
|
||||||
|
// .is-animate > div:nth-child(4) { animation-delay: 0.3s }
|
||||||
|
// .is-animate > div:nth-child(5) { animation-delay: 0.4s }
|
||||||
|
// .is-animate > div:nth-child(6) { animation-delay: 0.5s }
|
||||||
|
// .is-animate > div:nth-child(7) { animation-delay: 0.6s }
|
||||||
|
|
||||||
|
|
||||||
|
// @keyframes style {
|
||||||
|
// from {
|
||||||
|
// transform: scale3d(1, 1, 1);
|
||||||
|
// }
|
||||||
|
// 30% {
|
||||||
|
// box-shadow: 0px 0px 0px 0px;
|
||||||
|
// transform: scale3d(1.25, 0.75, 1);
|
||||||
|
// }
|
||||||
|
// 40% {
|
||||||
|
// transform: scale3d(0.75, 1.25, 1);
|
||||||
|
// }
|
||||||
|
// 50% {
|
||||||
|
// transform: scale3d(1.15, 0.85, 1);
|
||||||
|
// }
|
||||||
|
// 65% {
|
||||||
|
// transform: scale3d(.95, 1.05, 1);
|
||||||
|
// }
|
||||||
|
// 75% {
|
||||||
|
// transform: scale3d(1.05, .95, 1);
|
||||||
|
// }
|
||||||
|
// to {
|
||||||
|
// transform: scale3d(1, 1, 1);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// @keyframes letterspacing {
|
||||||
|
// 0% {
|
||||||
|
// filter: blur(0.1rem);
|
||||||
|
// }
|
||||||
|
// 100% {
|
||||||
|
// filter: blur(0.5rem);
|
||||||
|
// }
|
||||||
|
// to {
|
||||||
|
// letter-spacing: none;
|
||||||
|
// filter: blur(0rem);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
.c-PageLoader__lds-ripple {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
border: 4px solid #fff;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
||||||
|
&:nth-child(2) {
|
||||||
|
animation-delay: -0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes lds-ripple {
|
||||||
|
0% {
|
||||||
|
top: 36px;
|
||||||
|
left: 36px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
33
src/app/components/molecules/PageLoader/PageLoader.jsx
Normal file
33
src/app/components/molecules/PageLoader/PageLoader.jsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const PageLoader = props => {
|
||||||
|
return (
|
||||||
|
<div className='c-PageLoader'>
|
||||||
|
<div className="c-PageLoader__lds-ripple">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
// <div className='c-PageLoader'>
|
||||||
|
// <div className='is-animate'>
|
||||||
|
// <div className='l'>l</div>
|
||||||
|
// <div className='l'>o</div>
|
||||||
|
// <div className='l'>a</div>
|
||||||
|
// <div className='l'>d</div>
|
||||||
|
// <div className='l'>i</div>
|
||||||
|
// <div className='l'>n</div>
|
||||||
|
// <div className='l'>g</div>
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
};
|
||||||
|
|
||||||
|
PageLoader.defaultProps = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
PageLoader.propTypes = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageLoader;
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PageLoader from './PageLoader';
|
||||||
|
|
||||||
|
describe('PageLoader', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
src/app/components/molecules/PageLoader/index.js
Normal file
3
src/app/components/molecules/PageLoader/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import PageLoader from './PageLoader.jsx';
|
||||||
|
|
||||||
|
export default PageLoader;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
.c-SocialLogin {
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.abcRioButtonBlue {
|
||||||
|
background: white;
|
||||||
|
color: #585f6b;
|
||||||
|
}
|
||||||
|
}
|
||||||
68
src/app/components/molecules/SocialLogin/SocialLogin.jsx
Normal file
68
src/app/components/molecules/SocialLogin/SocialLogin.jsx
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {withRouter} from 'react-router-dom'
|
||||||
|
import {gapi} from 'gapi-script'
|
||||||
|
|
||||||
|
class SocialLogin extends React.Component{
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.width = 254
|
||||||
|
this.height = 50
|
||||||
|
this.onSuccess = this.onSuccess.bind(this)
|
||||||
|
this.onFailure = this.onFailure.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
gapi && gapi.signin2 && gapi.signin2.render('g-signin2', {
|
||||||
|
'scope': 'profile email',
|
||||||
|
'width': this.width,
|
||||||
|
'height': this.height,
|
||||||
|
'longtitle': true,
|
||||||
|
'theme': 'dark',
|
||||||
|
'onsuccess': this.onSuccess,
|
||||||
|
'onfailure': this.onFailure
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onSuccess(googleUser) {
|
||||||
|
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
|
||||||
|
this.props.history.push('/view/plp')
|
||||||
|
}
|
||||||
|
|
||||||
|
onFailure(error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='c-SocialLogin'>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="g-signin2" id="g-signin2"></div>
|
||||||
|
</div>
|
||||||
|
<div className="col-12">
|
||||||
|
<div
|
||||||
|
className="fb-login-button"
|
||||||
|
data-width={this.width}
|
||||||
|
data-height={this.height}
|
||||||
|
data-size="large"
|
||||||
|
data-button-type="continue_with"
|
||||||
|
data-auto-logout-link="false"
|
||||||
|
data-use-continue-as="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SocialLogin.defaultProps = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
SocialLogin.propTypes = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withRouter(SocialLogin)
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import SocialLogin from './SocialLogin';
|
||||||
|
|
||||||
|
describe('SocialLogin', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
src/app/components/molecules/SocialLogin/index.js
Normal file
3
src/app/components/molecules/SocialLogin/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import SocialLogin from './SocialLogin.jsx';
|
||||||
|
|
||||||
|
export default SocialLogin;
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
.c-Form {
|
||||||
|
padding: 15px;
|
||||||
|
background: #ddd;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
91
src/app/components/molecules/common/Form/Form.js
Normal file
91
src/app/components/molecules/common/Form/Form.js
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import FormFieldContainer from '../FormFieldContainer';
|
||||||
|
|
||||||
|
class Form extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
name: '',
|
||||||
|
greeting: ''
|
||||||
|
};
|
||||||
|
this.handleChange = this.handleChange.bind(this);
|
||||||
|
this.handleSubmit = this.handleSubmit.bind(this);
|
||||||
|
this.onFocusHandler = this.onFocusHandler.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange(event) {
|
||||||
|
this.setState({ name: event.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSubmit(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
// fetch(`/api/greeting?name=${encodeURIComponent(this.state.name)}`)
|
||||||
|
// .then(response => response.json())
|
||||||
|
// .then(state => this.setState(state));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onFocusHandler() {
|
||||||
|
console.log('Parent, on focus handler')
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
context,
|
||||||
|
fieldValues,
|
||||||
|
formErrors,
|
||||||
|
formValues,
|
||||||
|
metaData,
|
||||||
|
updateFormErrors,
|
||||||
|
updateFormValues
|
||||||
|
} = this.props
|
||||||
|
// const jsonData = this.props && this.props.metaData
|
||||||
|
const inputList = metaData && context ? Object.keys(metaData[context]) : []
|
||||||
|
|
||||||
|
let inputListSection =
|
||||||
|
inputList &&
|
||||||
|
inputList.map((item, index) => {
|
||||||
|
const formFieldObject = metaData[context][item]
|
||||||
|
const formField = formFieldObject ? (
|
||||||
|
<FormFieldContainer
|
||||||
|
propsData={formFieldObject}
|
||||||
|
key={index}
|
||||||
|
onFocus={this.onFocusHandler}
|
||||||
|
value={fieldValues && fieldValues[item]}
|
||||||
|
formErrors={formErrors}
|
||||||
|
formValues={formValues}
|
||||||
|
updateFormErrors={updateFormErrors}
|
||||||
|
updateFormValues={updateFormValues}
|
||||||
|
/>
|
||||||
|
) : null
|
||||||
|
return formField
|
||||||
|
})
|
||||||
|
|
||||||
|
inputListSection = inputListSection.filter((formFieldObject) => {
|
||||||
|
return formFieldObject !== null
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form className='c-Form' onSubmit={this.handleSubmit}>
|
||||||
|
<fieldset>{inputListSection}</fieldset>
|
||||||
|
<button type="submit" className="btn btn-primary btn-block" style={{marginTop: '15px', background: 'black'}}>Submit</button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Form.propTypes = {
|
||||||
|
context: PropTypes.string,
|
||||||
|
customBlurHandler: PropTypes.func,
|
||||||
|
customBlurFormatter: PropTypes.func,
|
||||||
|
metaData: PropTypes.object.isRequired,
|
||||||
|
className: PropTypes.string,
|
||||||
|
fieldValues: PropTypes.object,
|
||||||
|
formErrors: PropTypes.object,
|
||||||
|
formValues: PropTypes.object,
|
||||||
|
updateFormErrors: PropTypes.func,
|
||||||
|
updateFormValues: PropTypes.func
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Form
|
||||||
8
src/app/components/molecules/common/Form/Form.test.js
Normal file
8
src/app/components/molecules/common/Form/Form.test.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Form from './Form';
|
||||||
|
|
||||||
|
describe('Form', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
src/app/components/molecules/common/Form/index.js
Normal file
3
src/app/components/molecules/common/Form/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import Form from './Form';
|
||||||
|
|
||||||
|
export default Form;
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
.c-FormFieldContainer {
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,181 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
|
||||||
|
import InputField from '../../../atoms/InputField'
|
||||||
|
import SelectOption from '../../../atoms/SelectOption'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INSERT_DESCRIPTION_HERE
|
||||||
|
*/
|
||||||
|
|
||||||
|
class FormFieldContainer extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
const componentKey = this.props.propsData && this.props.propsData.id
|
||||||
|
const passedValue = this.props.value || (this.props.propsData && this.props.propsData.value)
|
||||||
|
this.state = {
|
||||||
|
error: false,
|
||||||
|
errorMessage: null
|
||||||
|
}
|
||||||
|
this.props.updateFormValues({
|
||||||
|
formValues: {
|
||||||
|
// ...this.props.formValues,
|
||||||
|
[componentKey]: passedValue ? passedValue : ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.props.updateFormErrors({
|
||||||
|
formErrors: {
|
||||||
|
// ...this.props.formErrors,
|
||||||
|
[componentKey]: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.onChangeHandler = this.onChangeHandler.bind(this)
|
||||||
|
this.onBlurHandler = this.onBlurHandler.bind(this)
|
||||||
|
this.onFocusHandler = this.onFocusHandler.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* validateFormField - validates the input field values
|
||||||
|
* @param {object} event js event object
|
||||||
|
* @param {object} validationObj fieldinput data as props
|
||||||
|
*/
|
||||||
|
validateFormField(e, validationObj) {
|
||||||
|
const {propsData, formErrors, formValues, updateFormErrors, updateFormValues} = this.props
|
||||||
|
const inputValue = e.target.value && e.target.value
|
||||||
|
let error = false
|
||||||
|
let errorMessage = ''
|
||||||
|
const componentKey = propsData.id
|
||||||
|
const validRegex =
|
||||||
|
validationObj.dataRuleRegex &&
|
||||||
|
new RegExp(validationObj.dataRuleRegex.regex).test(inputValue)
|
||||||
|
const poValidRegex =
|
||||||
|
e.target.id === 'address1' &&
|
||||||
|
validationObj.dataRuleRegex.po_regex &&
|
||||||
|
new RegExp(validationObj.dataRuleRegex.po_regex, 'i').test(inputValue)
|
||||||
|
|
||||||
|
if (e.target.tagName && e.target.tagName === 'SELECT') {
|
||||||
|
if (
|
||||||
|
validationObj.required.isRequired &&
|
||||||
|
e.target.selectedIndex === 0 &&
|
||||||
|
!validationObj.required.preSelected
|
||||||
|
) {
|
||||||
|
error = true
|
||||||
|
errorMessage = validationObj.required.error_message
|
||||||
|
}
|
||||||
|
} else if (e.target.tagName && e.target.tagName === 'INPUT') {
|
||||||
|
if (validationObj.required.isRequired) {
|
||||||
|
if (inputValue.trim('') === '') {
|
||||||
|
error = true
|
||||||
|
errorMessage = validationObj.required.error_message
|
||||||
|
} else if (validationObj.dataRuleRegex && !validRegex) {
|
||||||
|
error = true
|
||||||
|
errorMessage = validationObj.dataRuleRegex.error_message
|
||||||
|
} else if (validationObj.dataRuleRegex && poValidRegex) {
|
||||||
|
error = true
|
||||||
|
errorMessage = validationObj.dataRuleRegex.po_error_message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
error = false
|
||||||
|
errorMessage = null
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
error
|
||||||
|
})
|
||||||
|
|
||||||
|
updateFormErrors({
|
||||||
|
formErrors: {
|
||||||
|
...formErrors,
|
||||||
|
[componentKey]: errorMessage
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
updateFormValues({
|
||||||
|
formValues: {
|
||||||
|
...formValues,
|
||||||
|
[componentKey]: inputValue
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return error
|
||||||
|
}
|
||||||
|
|
||||||
|
onChangeHandler(event) {
|
||||||
|
const value = event.target.value
|
||||||
|
this.setState({
|
||||||
|
value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onFocusHandler(event) {
|
||||||
|
this.setState({
|
||||||
|
oldValue: event.target.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onBlurHandler(validation, customBlurHandler, e) {
|
||||||
|
e.oldValue = this.state.oldValue
|
||||||
|
const {customBlurFormatter} = this.props
|
||||||
|
const isError = this.validateFormField(e, validation)
|
||||||
|
if (!isError) {
|
||||||
|
if (customBlurHandler && typeof customBlurHandler === 'function') {
|
||||||
|
customBlurHandler(e)
|
||||||
|
}
|
||||||
|
if (customBlurFormatter && typeof customBlurFormatter === 'function') {
|
||||||
|
this.setState({value: customBlurFormatter(e)})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {customBlurHandler, formErrors, propsData} = this.props
|
||||||
|
const {elementType} = propsData
|
||||||
|
const errorMessage = formErrors && formErrors[propsData.id]
|
||||||
|
const meta = {
|
||||||
|
...this.props.propsData,
|
||||||
|
className: this.state.error ? 'error' : '',
|
||||||
|
error: this.state.error || errorMessage,
|
||||||
|
errorMessage,
|
||||||
|
handlers: {
|
||||||
|
onBlurHandler: this.onBlurHandler,
|
||||||
|
customBlurHandler,
|
||||||
|
onChangeHandler: this.onChangeHandler,
|
||||||
|
onFocusHandler: this.onFocusHandler
|
||||||
|
},
|
||||||
|
fieldValues: {
|
||||||
|
propsValue: this.props.value,
|
||||||
|
stateValue: this.state.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* switch function - returns HTML Tag depending upon the requirement
|
||||||
|
* @param {string} elementType - element type e.g. input,select
|
||||||
|
*/
|
||||||
|
switch (elementType) {
|
||||||
|
case 'input':
|
||||||
|
return <InputField meta={meta} />
|
||||||
|
case 'select':
|
||||||
|
return <SelectOption meta={meta} />
|
||||||
|
default:
|
||||||
|
return <input />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FormFieldContainer.propTypes = {
|
||||||
|
propsData: PropTypes.object.isRequired,
|
||||||
|
className: PropTypes.string,
|
||||||
|
customBlurHandler: PropTypes.func,
|
||||||
|
customBlurFormatter: PropTypes.func,
|
||||||
|
onFocus: PropTypes.func,
|
||||||
|
value: PropTypes.string,
|
||||||
|
formValues: PropTypes.object,
|
||||||
|
formErrors: PropTypes.object,
|
||||||
|
selectedCreditCard: PropTypes.object,
|
||||||
|
updateFormValues: PropTypes.func,
|
||||||
|
updateFormErrors: PropTypes.func
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FormFieldContainer
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import FormFieldContainer from './FormFieldContainer';
|
||||||
|
|
||||||
|
describe('FormFieldContainer', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
import FormFieldContainer from './FormFieldContainer';
|
||||||
|
|
||||||
|
export default FormFieldContainer;
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
.c-Jumbotron {
|
||||||
|
padding: 1rem;
|
||||||
|
background: #222;
|
||||||
|
color: #bbbbbb;
|
||||||
|
margin-bottom: 0;
|
||||||
|
.my-4 {
|
||||||
|
border-color: #bbb;
|
||||||
|
}
|
||||||
|
}
|
||||||
27
src/app/components/molecules/common/Jumbotron/Jumbotron.jsx
Normal file
27
src/app/components/molecules/common/Jumbotron/Jumbotron.jsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import {Link} from 'react-router-dom'
|
||||||
|
|
||||||
|
const Jumbotron = props => {
|
||||||
|
return (
|
||||||
|
<div className='c-Jumbotron'>
|
||||||
|
<h1 className="display-4">{props.jumboText}</h1>
|
||||||
|
<p className="lead">{props.subText}</p>
|
||||||
|
<hr className='my-4' />
|
||||||
|
<p>{props.jumboDescription}</p>
|
||||||
|
<p className="lead">
|
||||||
|
<Link className="btn btn-primary btn-lg" to="/view/plp" role="button">Go To PLP</Link>
|
||||||
|
<Link className="btn btn-primary btn-lg float-right" to="#" role="button" style={{marginLeft: '15px'}}>{props.furtherLink}</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Jumbotron.propTypes = {
|
||||||
|
furtherLink: PropTypes.string,
|
||||||
|
jumboDescription: PropTypes.string,
|
||||||
|
jumboText: PropTypes.string,
|
||||||
|
subText: PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Jumbotron;
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Jumbotron from './Jumbotron.jsx';
|
||||||
|
|
||||||
|
describe('Jumbotron', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
3
src/app/components/molecules/common/Jumbotron/index.js
Normal file
3
src/app/components/molecules/common/Jumbotron/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import Jumbotron from './Jumbotron.jsx';
|
||||||
|
|
||||||
|
export default Jumbotron;
|
||||||
53
src/app/config/forms-meta/login-form.json
Normal file
53
src/app/config/forms-meta/login-form.json
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
{
|
||||||
|
"login": {
|
||||||
|
"email": {
|
||||||
|
"label": "Email ID",
|
||||||
|
"placeholder": "Email ID",
|
||||||
|
"type": "text",
|
||||||
|
"id": "email",
|
||||||
|
"elementType": "input",
|
||||||
|
"validation": {
|
||||||
|
"required": {
|
||||||
|
"isRequired": "true",
|
||||||
|
"error_message": "This field is required."
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"minlength": 6,
|
||||||
|
"maxlength": 50
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"password": {
|
||||||
|
"label": "Password",
|
||||||
|
"placeholder": "Password",
|
||||||
|
"type": "password",
|
||||||
|
"id": "password",
|
||||||
|
"elementType": "input",
|
||||||
|
"validation": {
|
||||||
|
"required": {
|
||||||
|
"isRequired": "true",
|
||||||
|
"error_message": "This field is required."
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"search": {
|
||||||
|
"search": {
|
||||||
|
"placeholder": "Search..",
|
||||||
|
"type": "text",
|
||||||
|
"id": "search",
|
||||||
|
"elementType": "input",
|
||||||
|
"validation": {
|
||||||
|
"required": {
|
||||||
|
"isRequired": "false"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
21
src/app/index.scss
Normal file
21
src/app/index.scss
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
@charset 'UTF-8';
|
||||||
|
|
||||||
|
@import 'styles/variables';
|
||||||
|
@import 'styles/base';
|
||||||
|
@import 'styles/utilities';
|
||||||
|
@import 'styles/pages';
|
||||||
|
@import 'styles/components';
|
||||||
|
|
||||||
|
.abcRioButtonBlue {
|
||||||
|
background-color: white!important;
|
||||||
|
color: #585f6b!important;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.g-signin2, .fb-login-button {
|
||||||
|
display: flex!important;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
26
src/app/main.js
Normal file
26
src/app/main.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import thunk from 'redux-thunk'
|
||||||
|
import Immutable from 'immutable'
|
||||||
|
import {createStore, applyMiddleware, compose} from 'redux'
|
||||||
|
// import * as serviceWorker from '../serviceWorker';
|
||||||
|
import Router from './router';
|
||||||
|
import reducer from './reducer'
|
||||||
|
import ReactModal from 'react-modal'
|
||||||
|
import './index.scss'
|
||||||
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||||
|
|
||||||
|
const composeEnhancers =
|
||||||
|
typeof window === 'object' &&
|
||||||
|
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
|
||||||
|
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
|
||||||
|
serialize: { // prettier-ignore
|
||||||
|
immutable: Immutable
|
||||||
|
}
|
||||||
|
}) : compose;
|
||||||
|
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))
|
||||||
|
|
||||||
|
ReactModal.setAppElement('#root');
|
||||||
|
ReactDOM.render(<Router store={store} />, document.getElementById('root'));
|
||||||
|
|
||||||
|
// serviceWorker.unregister();
|
||||||
84
src/app/pages/Login/Login.jsx
Normal file
84
src/app/pages/Login/Login.jsx
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import styles from './Login.module.scss'
|
||||||
|
import {connect} from 'react-redux'
|
||||||
|
import {createPropsSelector} from 'reselect-immutable-helpers'
|
||||||
|
|
||||||
|
import * as actions from './actions'
|
||||||
|
import {getLogin, getFormErrors, getFormValues} from './selectors'
|
||||||
|
import LoginForm from '../../components/molecules/LoginForm'
|
||||||
|
import SocialLogin from '../../components/molecules/SocialLogin'
|
||||||
|
import Jumbotron from '../../components/molecules/common/Jumbotron'
|
||||||
|
|
||||||
|
class Login extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.pageType = 'login'
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const {initializeLogin} = this.props
|
||||||
|
initializeLogin()
|
||||||
|
}
|
||||||
|
|
||||||
|
clicked() {
|
||||||
|
console.log('login handler')
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {updateFormErrors, updateFormValues, formErrors, formValues} = this.props
|
||||||
|
return (
|
||||||
|
<div className={`${styles.Login} container`} onClick={this.clicked}>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12 col-lg-8">
|
||||||
|
<Jumbotron
|
||||||
|
jumboText="Adobe - Joules to Watts assignment"
|
||||||
|
subText="PLP and Cart Page Demo"
|
||||||
|
jumboDescription="This app is build using React JS and routing is added using custom solutions to work on GH Pages. Login is optional and can be skipped."
|
||||||
|
furtherLink="Learn more"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-12 col-lg-4">
|
||||||
|
<div className={styles.loginContainer}>
|
||||||
|
<p className={styles['c-login-intimation']}>Let's get to know each other, shall we!</p>
|
||||||
|
<LoginForm
|
||||||
|
updateFormValues={updateFormValues}
|
||||||
|
updateFormErrors={updateFormErrors}
|
||||||
|
formErrors={formErrors}
|
||||||
|
formValues={formValues}
|
||||||
|
/>
|
||||||
|
<p className={styles.loginSplitter}>OR</p>
|
||||||
|
<SocialLogin />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Login.propTypes = {
|
||||||
|
initializeLogin: PropTypes.func,
|
||||||
|
dataState: PropTypes.object,
|
||||||
|
updateFormValues: PropTypes.func,
|
||||||
|
updateFormErrors: PropTypes.func,
|
||||||
|
formValues: PropTypes.object,
|
||||||
|
formErrors: PropTypes.object
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = createPropsSelector({
|
||||||
|
dataState: getLogin,
|
||||||
|
formErrors: getFormErrors,
|
||||||
|
formValues: getFormValues
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapDispatchToProps = {
|
||||||
|
initializeLogin: actions.initializeLogin,
|
||||||
|
updateFormErrors: actions.updateFormErrors,
|
||||||
|
updateFormValues: actions.updateFormValues
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps
|
||||||
|
)(Login)
|
||||||
32
src/app/pages/Login/Login.module.scss
Normal file
32
src/app/pages/Login/Login.module.scss
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
.Login {
|
||||||
|
background: #222;
|
||||||
|
max-width: unset;
|
||||||
|
@media only screen and (max-width: 1140px) {
|
||||||
|
padding-left: unset;
|
||||||
|
padding-right: unset;
|
||||||
|
margin-right: unset;
|
||||||
|
margin-left: unset;
|
||||||
|
}
|
||||||
|
.loginContainer {
|
||||||
|
border: 2px solid grey;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
margin: 1rem;
|
||||||
|
background: #eee;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
.c-login-intimation {
|
||||||
|
padding: 15px 5px 15px 15px;
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.loginSplitter {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bolder;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
8
src/app/pages/Login/Login.test.js
Normal file
8
src/app/pages/Login/Login.test.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Login from './Login';
|
||||||
|
|
||||||
|
describe('Login', () => {
|
||||||
|
it('renders without error', () => {
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
28
src/app/pages/Login/actions.js
Normal file
28
src/app/pages/Login/actions.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
export const LOGIN_DATA_STATE_RECEIVED = 'LOGIN_DATA_STATE_RECEIVED'
|
||||||
|
export const UPDATE_FORM_VALUES = 'UPDATE_BILLING_FORM_VALUES'
|
||||||
|
export const UPDATE_FORM_ERRORS = 'UPDATE_BILLING_FORM_ERRORS'
|
||||||
|
|
||||||
|
export const updateLoginDataState = (payload) => ({type: LOGIN_DATA_STATE_RECEIVED, payload})
|
||||||
|
|
||||||
|
export const initializeLogin = () => (dispatch) => {
|
||||||
|
// return Promise.all([
|
||||||
|
// dispatch(initializeApp())
|
||||||
|
// ])
|
||||||
|
// .then(() => ({statusCode: 200}))
|
||||||
|
// .catch((err) => ({statusCode: err.statusCode || 500}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export const updateFormValues = (formValues) => {
|
||||||
|
return {
|
||||||
|
type: UPDATE_FORM_VALUES,
|
||||||
|
payload: formValues
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const updateFormErrors = (formErrors) => {
|
||||||
|
return {
|
||||||
|
type: UPDATE_FORM_ERRORS,
|
||||||
|
payload: formErrors
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
3
src/app/pages/Login/index.js
Normal file
3
src/app/pages/Login/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import Login from './Login.jsx';
|
||||||
|
|
||||||
|
export default Login;
|
||||||
18
src/app/pages/Login/reducer.js
Normal file
18
src/app/pages/Login/reducer.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import Immutable from 'immutable'
|
||||||
|
|
||||||
|
import {LOGIN_DATA_STATE_RECEIVED, UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from './actions'
|
||||||
|
|
||||||
|
const initialState = Immutable.Map()
|
||||||
|
|
||||||
|
const reducer = (state = initialState, action) => {
|
||||||
|
switch (action.type) {
|
||||||
|
case LOGIN_DATA_STATE_RECEIVED:
|
||||||
|
case UPDATE_FORM_ERRORS:
|
||||||
|
case UPDATE_FORM_VALUES:
|
||||||
|
return state.mergeDeep(action.payload)
|
||||||
|
default:
|
||||||
|
return state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default reducer
|
||||||
14
src/app/pages/Login/selectors.js
Normal file
14
src/app/pages/Login/selectors.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import {createSelector} from 'reselect'
|
||||||
|
import {createGetSelector} from 'reselect-immutable-helpers'
|
||||||
|
|
||||||
|
const getData = ({data}) => data
|
||||||
|
|
||||||
|
export const getLogin = createSelector(
|
||||||
|
getData,
|
||||||
|
(dataState) => {
|
||||||
|
return dataState.pages.login
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export const getFormValues = createGetSelector(getLogin, 'formValues')
|
||||||
|
export const getFormErrors = createGetSelector(getLogin, 'formErrors')
|
||||||
11
src/app/pages/index.js
Normal file
11
src/app/pages/index.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/* PLOP_INJECT_IMPORT */
|
||||||
|
import Cart from './Cart';
|
||||||
|
import Login from './Login';
|
||||||
|
import Plp from './PLP';
|
||||||
|
|
||||||
|
export {
|
||||||
|
/* PLOP_INJECT_EXPORT */
|
||||||
|
Cart,
|
||||||
|
Login,
|
||||||
|
Plp,
|
||||||
|
}
|
||||||
15
src/app/reducer.js
Normal file
15
src/app/reducer.js
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import {combineReducers} from 'redux'
|
||||||
|
|
||||||
|
import loginReducer from './pages/Login/reducer'
|
||||||
|
import plpReducer from './pages/PLP/reducer'
|
||||||
|
import cartReducer from './pages/Cart/reducer'
|
||||||
|
|
||||||
|
export default combineReducers({
|
||||||
|
data: combineReducers({
|
||||||
|
pages: combineReducers({
|
||||||
|
login: loginReducer,
|
||||||
|
plp: plpReducer,
|
||||||
|
cart: cartReducer
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
37
src/app/router.jsx
Normal file
37
src/app/router.jsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import PropTypes from 'prop-types'
|
||||||
|
import {Provider} from 'react-redux'
|
||||||
|
import {BrowserRouter, Route} from 'react-router-dom';
|
||||||
|
import PageLoader from './components/molecules/PageLoader'
|
||||||
|
import Loadable from 'react-loadable'
|
||||||
|
|
||||||
|
export const LoadableLogin = Loadable({
|
||||||
|
loader: () => import('./pages/Login'),
|
||||||
|
loading: PageLoader
|
||||||
|
})
|
||||||
|
|
||||||
|
export const LoadableTCAssignmentHome = Loadable({
|
||||||
|
loader: () => import('./pages/TCAssignmentHome'),
|
||||||
|
loading: PageLoader
|
||||||
|
})
|
||||||
|
|
||||||
|
class Router extends React.Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {store} = this.props
|
||||||
|
return (
|
||||||
|
<Provider store={store}>
|
||||||
|
<BrowserRouter basename="/adobeassignment">
|
||||||
|
<Route path="/login" component={LoadableLogin} />
|
||||||
|
<Route path="/view/plp" component={LoadableTCAssignmentHome} />
|
||||||
|
</BrowserRouter>
|
||||||
|
</Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Router.propTypes = {
|
||||||
|
store: PropTypes.object
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Router
|
||||||
0
src/app/selectors.js
Normal file
0
src/app/selectors.js
Normal file
8
src/app/styles/_base.scss
Normal file
8
src/app/styles/_base.scss
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
@import 'base/animations';
|
||||||
|
@import 'base/forms';
|
||||||
|
@import 'base/general';
|
||||||
|
@import 'base/lists';
|
||||||
|
@import 'base/material';
|
||||||
|
@import 'base/mixins';
|
||||||
|
@import 'base/tables';
|
||||||
|
@import 'base/typography';
|
||||||
11
src/app/styles/_components.scss
Normal file
11
src/app/styles/_components.scss
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
// Components
|
||||||
|
// ===
|
||||||
|
@import '../components/atoms/InputField/InputField.component';
|
||||||
|
@import '../components/atoms/SelectOption/SelectOption.component';
|
||||||
|
@import '../components/molecules/common/Form/Form.component';
|
||||||
|
@import '../components/molecules/common/FormFieldContainer/FormFieldContainer.component';
|
||||||
|
@import '../components/molecules/common/Jumbotron/Jumbotron.component';
|
||||||
|
@import '../components/molecules/Header/Header.component';
|
||||||
|
@import '../components/molecules/LoginForm/LoginForm.component';
|
||||||
|
@import '../components/molecules/PageLoader/PageLoader.component';
|
||||||
|
@import '../components/molecules/SocialLogin/SocialLogin.component';
|
||||||
4
src/app/styles/_pages.scss
Normal file
4
src/app/styles/_pages.scss
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
// Pages
|
||||||
|
// ===
|
||||||
|
|
||||||
|
@import '../pages/Login/Login.module';
|
||||||
25
src/app/styles/_utilities.scss
Normal file
25
src/app/styles/_utilities.scss
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
// Utilities
|
||||||
|
// ===
|
||||||
|
//
|
||||||
|
// Use wrap-at-root mixin to allow overriding existing styles with extreme
|
||||||
|
// specificity while keeping source code clean and readable. Does not override
|
||||||
|
// !important or inline styles; those must be dealt with separately.
|
||||||
|
|
||||||
|
@import 'base/mixins';
|
||||||
|
|
||||||
|
|
||||||
|
@include wrap-at-root("#app", 1) {
|
||||||
|
@import 'utilities/border';
|
||||||
|
@import 'utilities/box-shadow';
|
||||||
|
@import 'utilities/color';
|
||||||
|
@import 'utilities/flexbox';
|
||||||
|
@import 'utilities/heading';
|
||||||
|
@import 'utilities/layout';
|
||||||
|
@import 'utilities/margin';
|
||||||
|
@import 'utilities/padding';
|
||||||
|
@import 'utilities/text-content';
|
||||||
|
@import 'utilities/text';
|
||||||
|
@import 'utilities/display';
|
||||||
|
@import 'utilities/visibility';
|
||||||
|
@import 'utilities/z-index';
|
||||||
|
}
|
||||||
238
src/app/styles/_variables.scss
Normal file
238
src/app/styles/_variables.scss
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
// Project-Wide Variables
|
||||||
|
// ===
|
||||||
|
//
|
||||||
|
// Edit these as needed. Some guidelines:
|
||||||
|
//
|
||||||
|
// - Names should be lowercase and dash-separated;
|
||||||
|
// - Qualifiers should be added to the beginning of related variables: use
|
||||||
|
// `$small-font-size`, not `$font-size-small`;
|
||||||
|
// - Numeric scales should use increments of 10; these numbers are arbitrary and
|
||||||
|
// should not map to actual values. If really necessary, additional values can
|
||||||
|
// be added in between, e.g. $neutral-15 between 10 and 20.
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// Table of Contents
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// [AAA] Basic Layout
|
||||||
|
// [BBB] Responsive Layout
|
||||||
|
// [CCC] Typography
|
||||||
|
// [DDD] Color Palette
|
||||||
|
// [EEE] Appearance
|
||||||
|
// [FFF] Z-Index
|
||||||
|
// [GGG] Shorthands
|
||||||
|
|
||||||
|
|
||||||
|
// [AAA] Basic Layout
|
||||||
|
// ---
|
||||||
|
|
||||||
|
// Basic unit for spacing and alignment; 6 to 12px recommended. Apply in whole
|
||||||
|
// or half multiples.
|
||||||
|
$sub-unit: 4px;
|
||||||
|
$unit: 8px;
|
||||||
|
|
||||||
|
// Standard tap-target size
|
||||||
|
$tap-size: 44px;
|
||||||
|
|
||||||
|
// Container max-width.
|
||||||
|
$max-width: 1280px;
|
||||||
|
|
||||||
|
// Content Height Calculations
|
||||||
|
$header-height: 64px;
|
||||||
|
$footer-height: 173px;
|
||||||
|
$content-height: calc(100vh - #{$header-height} - #{$footer-height});
|
||||||
|
|
||||||
|
// [BBB] Responsive Layout
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Media query breakpoints and grid setup. Please see Mobify's Responsive Best
|
||||||
|
// Practices doc here: https://bit.ly/2tmRnEi, and our Responsive Grid
|
||||||
|
// documentation here: http://docs.mobify.com/latest/guides/responsive-grid/
|
||||||
|
//
|
||||||
|
// Note: $small-breakpoint isn't needed, since it is 0px
|
||||||
|
|
||||||
|
$medium-breakpoint: 600px;
|
||||||
|
$large-breakpoint: 960px;
|
||||||
|
$xlarge-breakpoint: $max-width;
|
||||||
|
|
||||||
|
$susy: (
|
||||||
|
// Add color to show the columns and gutters
|
||||||
|
'svg-grid-colors': hsl(0, 0%, 95%),
|
||||||
|
'columns': susy-repeat(4),
|
||||||
|
'gutters': 12px
|
||||||
|
);
|
||||||
|
|
||||||
|
$medium-layout: (
|
||||||
|
'svg-grid-colors': hsl(0, 0%, 95%),
|
||||||
|
'columns': susy-repeat(12),
|
||||||
|
'gutters': 12px
|
||||||
|
);
|
||||||
|
|
||||||
|
$large-layout: (
|
||||||
|
'svg-grid-colors': hsl(0, 0%, 95%),
|
||||||
|
'columns': susy-repeat(12),
|
||||||
|
'gutters': 24px
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
// [CCC] Typography
|
||||||
|
// ---
|
||||||
|
// $font-family: 'San Francisco', 'Roboto', 'Fira Sans', 'Segoe UI', sans-serif;
|
||||||
|
$font-family: Verdana, Geneva, sans-serif;
|
||||||
|
$header-font-family: 'Avenir Next Condensed', 'Roboto Condensed', 'Helvetica Neue', 'Roboto', sans-serif;
|
||||||
|
$loaded-header-font-family: 'Roboto', $header-font-family;
|
||||||
|
|
||||||
|
// Line height
|
||||||
|
$huge-line-height: 32px;
|
||||||
|
$bigger-line-height: 28px;
|
||||||
|
$big-line-height: 24px;
|
||||||
|
$line-height: 20px;
|
||||||
|
$small-line-height: 16px;
|
||||||
|
$smaller-line-height: 12px;
|
||||||
|
$tiny-line-height: 8px;
|
||||||
|
|
||||||
|
// Font sizes
|
||||||
|
$huge-font-size: 28px;
|
||||||
|
$bigger-font-size: 24px;
|
||||||
|
$big-font-size: 20px;
|
||||||
|
$font-size: 16px;
|
||||||
|
$small-font-size: 14px;
|
||||||
|
$smaller-font-size: 12px;
|
||||||
|
$tiny-font-size: 10px;
|
||||||
|
$smallest-font-size: 8px;
|
||||||
|
|
||||||
|
// Font weight
|
||||||
|
$thin-font-weight: 100;
|
||||||
|
$extra-light-font-weight: 200;
|
||||||
|
$light-font-weight: 300;
|
||||||
|
$regular-font-weight: 400;
|
||||||
|
$medium-font-weight: 500;
|
||||||
|
$semi-bold-font-weight: 600;
|
||||||
|
$bold-font-weight: 700;
|
||||||
|
|
||||||
|
// [DDD] Color Palette
|
||||||
|
// ---
|
||||||
|
|
||||||
|
// Neutrals
|
||||||
|
$neutral-00: #fff;
|
||||||
|
$neutral-10: #f7f7f7;
|
||||||
|
$neutral-12: #f1f3f6;
|
||||||
|
$neutral-15: #eee;
|
||||||
|
$neutral-17: #e1e1e1;
|
||||||
|
$neutral-20: #d5d5d5;
|
||||||
|
$neutral-30: #bfbfbf;
|
||||||
|
$neutral-40: #999;
|
||||||
|
$neutral-50: #696969;
|
||||||
|
$neutral-60: #333;
|
||||||
|
$neutral-70: #000;
|
||||||
|
|
||||||
|
// Brand colors
|
||||||
|
// $brand-color: #017e9b; // blue
|
||||||
|
$brand-color: #4471ea; // blue
|
||||||
|
// $secondary-brand-color: #005569;
|
||||||
|
$secondary-brand-color: #fafafa;
|
||||||
|
$tertiary-brand-color: #83bdcb;
|
||||||
|
$quaternary-brand-color: #bfdfe6;
|
||||||
|
|
||||||
|
// UI Kit colors
|
||||||
|
$ui-brand-color: #005c83; // dark blue
|
||||||
|
|
||||||
|
// Accent colors
|
||||||
|
$accent-color: #ff852c; // orange
|
||||||
|
$light-accent-color: lighten($accent-color, 15%);
|
||||||
|
$dark-accent-color: darken($accent-color, 15%);
|
||||||
|
|
||||||
|
// Primary Action
|
||||||
|
$primary-action-color: #dc0a3c;
|
||||||
|
$light-primary-action-color: lighten($primary-action-color, 15%);
|
||||||
|
$dark-primary-action-color: darken($primary-action-color, 15%);
|
||||||
|
|
||||||
|
// Secondary Action
|
||||||
|
$secondary-action-color: #ff852c;
|
||||||
|
$light-secondary-action-color: lighten($secondary-action-color, 15%);
|
||||||
|
$dark-secondary-action-color: darken($secondary-action-color, 15%);
|
||||||
|
|
||||||
|
// Success colors
|
||||||
|
$success-color: #037b30;
|
||||||
|
$light-success-color: lighten($success-color, 15%);
|
||||||
|
$dark-success-color: darken($success-color, 15%);
|
||||||
|
|
||||||
|
// Error colors
|
||||||
|
$error-color: #c70936;
|
||||||
|
$light-error-color: lighten($error-color, 15%);
|
||||||
|
$feedback-error-color: #f8e7eb;
|
||||||
|
$dark-error-color: darken($error-color, 15%);
|
||||||
|
|
||||||
|
// Sale color
|
||||||
|
$sale-color: $error-color;
|
||||||
|
$prominent-color: $error-color;
|
||||||
|
|
||||||
|
// Social colors
|
||||||
|
$facebook-color: #3a5a93;
|
||||||
|
$twitter-color: #55aace;
|
||||||
|
$instagram-color: #405de6;
|
||||||
|
$pinterest-color: #bd081c;
|
||||||
|
$youtube-color: #e52d27;
|
||||||
|
$google-plus-color: #dd4b39;
|
||||||
|
$yelp-color: #af0606;
|
||||||
|
|
||||||
|
|
||||||
|
// [EEE] Appearance
|
||||||
|
// ---
|
||||||
|
|
||||||
|
$font-color: $neutral-60;
|
||||||
|
$font-color-light: $neutral-12;
|
||||||
|
|
||||||
|
$link-color: $ui-brand-color;
|
||||||
|
$active-link-color: $dark-accent-color;
|
||||||
|
|
||||||
|
$focus-color: $brand-color;
|
||||||
|
|
||||||
|
$border-color: $neutral-20;
|
||||||
|
$border-radius: 4px;
|
||||||
|
|
||||||
|
$input-background-color: $neutral-00;
|
||||||
|
$input-border-color: $border-color;
|
||||||
|
$focused-input-border-color: $secondary-brand-color;
|
||||||
|
$disabled-input-color: $neutral-40;
|
||||||
|
$disabled-input-background-color: $neutral-15;
|
||||||
|
$disabled-button-background-color: $neutral-15;
|
||||||
|
$add-to-cart-button-background-color: #f7ae3a;
|
||||||
|
$horizontal-input-padding: $unit;
|
||||||
|
$vertical-input-padding: $unit;
|
||||||
|
|
||||||
|
$background-color: $neutral-12;
|
||||||
|
$overlay-color: rgba($neutral-00, 0.85);
|
||||||
|
|
||||||
|
|
||||||
|
// [FFF] Z-Index
|
||||||
|
// ---
|
||||||
|
|
||||||
|
// Organizes z-index usage by name. Values can be incremented/decremented
|
||||||
|
// slightly as necessary. eg. $z1-layer + 1;
|
||||||
|
|
||||||
|
$z1-depth: 1; // background
|
||||||
|
$z2-depth: 10; // icon or other ui element
|
||||||
|
$z3-depth: 100; // modal shade or similar
|
||||||
|
$z4-depth: 1000; // modal dialog or similar
|
||||||
|
|
||||||
|
|
||||||
|
// [GGG] Shorthands
|
||||||
|
// ---
|
||||||
|
|
||||||
|
$border: 1px solid $border-color;
|
||||||
|
$light-border: 1px solid $neutral-15;
|
||||||
|
$input-padding: $vertical-input-padding $horizontal-input-padding;
|
||||||
|
|
||||||
|
$box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
$large-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
$inset-box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.3), inset 0 -2px 2px -2px rgba(0, 0, 0, 0.3);
|
||||||
|
$input-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
$themeColor-Light: #f3e2c7;
|
||||||
|
$themeColor-Dark:#252525;
|
||||||
|
$theme-font: verdana, sans-serif;
|
||||||
|
$theme-supplementer: #f39c12;
|
||||||
|
$font-size-desktop-h5: 1.25em;
|
||||||
|
$font-size-mobile-h5: 0.8em;
|
||||||
|
$font-size-desktop-p: 1.1em;
|
||||||
|
$font-size-mobile-p: 0.7em;
|
||||||
23
src/app/styles/base/_animations.scss
Normal file
23
src/app/styles/base/_animations.scss
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
// Animations
|
||||||
|
// ===
|
||||||
|
//
|
||||||
|
// Background Shimmer
|
||||||
|
// ---
|
||||||
|
|
||||||
|
@keyframes background-shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: 150vw 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: -150vw 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-down .c-Header {
|
||||||
|
transform: translate3d(0, -100%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-up .c-Header {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
333
src/app/styles/base/_forms.scss
Normal file
333
src/app/styles/base/_forms.scss
Normal file
@@ -0,0 +1,333 @@
|
|||||||
|
// Forms
|
||||||
|
// ===
|
||||||
|
|
||||||
|
$base__radio-checkmark: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M18.8 6l-9.1 9.2-4.3-4.3L4 12.3 9.7 18 20.2 7.4z"/></svg>';
|
||||||
|
|
||||||
|
|
||||||
|
// General Form Elements
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||||
|
// the UA stylesheet.
|
||||||
|
// 2. Remove padding so people aren’t caught out if they zero out fieldsets.
|
||||||
|
// 3. Remove inner padding and border in Firefox 4+.
|
||||||
|
// 4. Correct color not being inherited. Known issue: affects color of disabled
|
||||||
|
// elements.
|
||||||
|
// 5. Correct font properties not being inherited.
|
||||||
|
// 6. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||||
|
// 7. Set font-size to 16px to avoid zooming in on iOS (https://stackoverflow.com/questions/11064237/prevent-iphone-from-zooming-form)
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 0; // 6
|
||||||
|
|
||||||
|
color: inherit; // 4
|
||||||
|
font: inherit; // 5
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size + 2; // 7
|
||||||
|
line-height: normal; // 1
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
padding: 0; // 3
|
||||||
|
border: 0; // 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
margin: 0; // 6
|
||||||
|
|
||||||
|
color: inherit; // 4
|
||||||
|
font: inherit; // 5
|
||||||
|
}
|
||||||
|
|
||||||
|
label,
|
||||||
|
textarea {
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: $unit / 2;
|
||||||
|
|
||||||
|
font-weight: $semi-bold-font-weight;
|
||||||
|
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
color: $active-link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
textarea,
|
||||||
|
[type="text"],
|
||||||
|
[type="search"],
|
||||||
|
[type="password"],
|
||||||
|
[type="tel"],
|
||||||
|
[type="url"],
|
||||||
|
[type="number"],
|
||||||
|
[type="email"] {
|
||||||
|
width: 100%;
|
||||||
|
min-height: $tap-size;
|
||||||
|
padding: $input-padding;
|
||||||
|
border: $border;
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: $input-background-color;
|
||||||
|
|
||||||
|
line-height: $line-height;
|
||||||
|
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
|
&::-webkit-input-placeholder {
|
||||||
|
color: $neutral-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
border-color: $focus-color;
|
||||||
|
|
||||||
|
box-shadow: $input-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
padding: 0; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Search input
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// These properties must be set with a slightly higher specificity for search
|
||||||
|
// inputs because Normalize's defaults are a bit too specific
|
||||||
|
//
|
||||||
|
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||||
|
// 2. Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||||
|
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||||
|
// padding (and `textfield` appearance).
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
-webkit-appearance: none; // 1
|
||||||
|
|
||||||
|
&::-webkit-search-cancel-button,
|
||||||
|
&::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none; // 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// 1. Restore browser default styling. If you’re taking full control of select
|
||||||
|
// styling, remove both these lines.
|
||||||
|
// 2. Simulate the position of the down-arrow as if it were a Icon component in
|
||||||
|
// a button.
|
||||||
|
// 3. Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||||
|
// All other form control elements do not inherit `text-transform` values.
|
||||||
|
// Correct `button` style inheritance in Firefox and Opera. Correct `select`
|
||||||
|
// style inheritance in Firefox.
|
||||||
|
// 4. Correct color not being inherited. Known issue: affects color of disabled
|
||||||
|
// elements.
|
||||||
|
// 5. Set font-size to 16px to avoid zooming in on iOS (https://stackoverflow.com/questions/11064237/prevent-iphone-from-zooming-form)
|
||||||
|
// 6. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||||
|
|
||||||
|
select {
|
||||||
|
height: $tap-size; // 1
|
||||||
|
margin: 0; // 6
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
color: $brand-color;
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size + 2; // 5
|
||||||
|
text-transform: none; // 3
|
||||||
|
|
||||||
|
&,
|
||||||
|
&[disabled] {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: calc(100% - 14px) center; // 2
|
||||||
|
background-size: 12px 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
optgroup {
|
||||||
|
margin: 0; // 6
|
||||||
|
|
||||||
|
color: inherit; // 4
|
||||||
|
font: inherit; // 5
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Checkbox and Radios
|
||||||
|
// ---
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
width: $unit*3;
|
||||||
|
height: $unit*3;
|
||||||
|
margin-right: $unit;
|
||||||
|
border: $border;
|
||||||
|
|
||||||
|
background: $neutral-00;
|
||||||
|
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: $neutral-30;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
background: $brand-color;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
background: rgba($neutral-20, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="radio"] {
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
top: $unit;
|
||||||
|
right: $unit;
|
||||||
|
bottom: $unit;
|
||||||
|
left: $unit;
|
||||||
|
|
||||||
|
border-radius: 50%;
|
||||||
|
background: $neutral-00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="checkbox"] {
|
||||||
|
&:checked {
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
width: $unit*3;
|
||||||
|
height: $unit*3;
|
||||||
|
|
||||||
|
background: url($base__radio-checkmark);
|
||||||
|
|
||||||
|
color: $neutral-00;
|
||||||
|
line-height: 0;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// 1. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||||
|
// 2. Correct color not being inherited. Known issue: affects color of disabled
|
||||||
|
// elements.
|
||||||
|
// 3. Correct font properties not being inherited.
|
||||||
|
// 4. Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||||
|
// All other form control elements do not inherit `text-transform` values.
|
||||||
|
// Correct `button` style inheritance in Firefox and Opera. Correct `select`
|
||||||
|
// style inheritance in Firefox.
|
||||||
|
// 5. Remove inner padding and border in Firefox 4+.
|
||||||
|
// 6. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||||
|
// and `video` controls.
|
||||||
|
// 7. Correct inability to style clickable `input` types in iOS.
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="submit"] {
|
||||||
|
display: block;
|
||||||
|
margin: 0; // 1
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
background: $neutral-15;
|
||||||
|
|
||||||
|
color: inherit; // 2
|
||||||
|
font: inherit; // 3
|
||||||
|
line-height: $line-height;
|
||||||
|
text-transform: none; // 4
|
||||||
|
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
padding: 0; // 5
|
||||||
|
border: 0; // 5
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: $neutral-30;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html input[type="button"],
|
||||||
|
// 6
|
||||||
|
input[type="reset"] {
|
||||||
|
-webkit-appearance: button; // 7
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Disabled
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// 1. web-kit default disabled style
|
||||||
|
// 2. Disabled style for button, checkbox, radio, input and select
|
||||||
|
// 3. Checkbox and Radio style
|
||||||
|
|
||||||
|
[disabled] {
|
||||||
|
opacity: 1;
|
||||||
|
background: $disabled-input-background-color;
|
||||||
|
|
||||||
|
color: $disabled-input-color;
|
||||||
|
|
||||||
|
-webkit-text-fill-color: $disabled-input-color; // 1
|
||||||
|
|
||||||
|
// 2
|
||||||
|
&:active,
|
||||||
|
&:checked {
|
||||||
|
border-color: $disabled-input-color;
|
||||||
|
|
||||||
|
background: $disabled-input-background-color;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
color: $disabled-input-color; // 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[type="radio"]:after {
|
||||||
|
background-color: $disabled-input-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
136
src/app/styles/base/_general.scss
Normal file
136
src/app/styles/base/_general.scss
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
// General
|
||||||
|
// ===
|
||||||
|
|
||||||
|
// Document
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// 1. Applying styles to *::before or *::after is a performance issue on some
|
||||||
|
// legacy Android devices (4.1.x). As such, these are disabled by default.
|
||||||
|
// 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||||
|
// user zoom.
|
||||||
|
// 3. Remove default margin in all browsers.
|
||||||
|
|
||||||
|
|
||||||
|
// *::before, // 1
|
||||||
|
// *::after, // 1
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
color: $font-color;
|
||||||
|
background-color: $neutral-12;
|
||||||
|
font-family: $font-family;
|
||||||
|
font-size: $font-size;
|
||||||
|
line-height: $line-height;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-ms-text-size-adjust: 100%; // 2
|
||||||
|
-webkit-text-size-adjust: 100%; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grouping content
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// 1. Address margin not present in Safari.
|
||||||
|
// 2. Contain overflow in all browsers.
|
||||||
|
// 3. Address odd `em`-unit font size rendering in all browsers.The duplication
|
||||||
|
// of `monospace` is intentional
|
||||||
|
// ([Source](http://en.wikipedia.org/wiki/User:Davidgothberg/Test59)).
|
||||||
|
|
||||||
|
figure {
|
||||||
|
// margin: 1em 40px; // 1
|
||||||
|
margin: 0 0 1rem; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
overflow: auto; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; // 3
|
||||||
|
font-size: 1em; // 3
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// New HTML5 elements
|
||||||
|
// ---
|
||||||
|
|
||||||
|
// Correct `block` display not defined for `main` in mobile Safari 6 and
|
||||||
|
// Android 4.3.
|
||||||
|
//
|
||||||
|
// Correct `block` display not defined for `menu`.
|
||||||
|
|
||||||
|
main,
|
||||||
|
menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Normalize vertical alignment of `progress` in Chrome and Firefox.
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
progress,
|
||||||
|
video {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevent modern browsers from displaying `audio` without controls.
|
||||||
|
// Remove excess height in iOS 5 devices.
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide the `template` element in mobile Safari.
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Hidden
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Hide visually and from screen readers. `u-visually-hidden` class is preferred
|
||||||
|
// to ensure that it's working in all conditions.
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
.c-Plp .container {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
40
src/app/styles/base/_lists.scss
Normal file
40
src/app/styles/base/_lists.scss
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
// Lists
|
||||||
|
// ===
|
||||||
|
|
||||||
|
|
||||||
|
// Ordered and Unordered Lists
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// We default to unstyled lists because they seem to be a more common usecase.
|
||||||
|
// Use the extensions to re-add the defaults back in.
|
||||||
|
//
|
||||||
|
// It is our recommendation that instead of styling the ul and ol directly that
|
||||||
|
// you create a list component that can be added to lists when needed.
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Definition Lists
|
||||||
|
// ---
|
||||||
|
|
||||||
|
dl {
|
||||||
|
margin-bottom: $unit;
|
||||||
|
|
||||||
|
line-height: $line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
margin-top: $unit;
|
||||||
|
|
||||||
|
font-weight: $semi-bold-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
12
src/app/styles/base/_material.scss
Normal file
12
src/app/styles/base/_material.scss
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
|
||||||
|
.material-icons {
|
||||||
|
&.md-18 { font-size: 18px; }
|
||||||
|
&.md-24 { font-size: 24px; }
|
||||||
|
&.md-36 { font-size: 36px; }
|
||||||
|
&.md-48 { font-size: 48px; }
|
||||||
|
&.md-dark { color: rgba(0, 0, 0, 0.54); }
|
||||||
|
&.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
|
||||||
|
&.md-light { color: rgba(255, 255, 255, 1); }
|
||||||
|
&.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
|
||||||
|
&.orange600 { color: #FB8C00; }
|
||||||
|
}
|
||||||
81
src/app/styles/base/_mixins.scss
Normal file
81
src/app/styles/base/_mixins.scss
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
// Mixins
|
||||||
|
// ===
|
||||||
|
//
|
||||||
|
// Background Shimmer
|
||||||
|
// ---
|
||||||
|
|
||||||
|
@mixin background-shimmer() {
|
||||||
|
overflow: hidden;
|
||||||
|
background: $neutral-10;
|
||||||
|
background-image: linear-gradient(to right,
|
||||||
|
$neutral-10 0%, scale-color($neutral-15, $lightness: -5%) 50%, $neutral-10 100%);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100vw 100vh;
|
||||||
|
animation: 1.5s linear infinite background-shimmer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Visually Hidden
|
||||||
|
// ---
|
||||||
|
|
||||||
|
@mixin visually-hidden() {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Wrap At Root
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Wraps the nested blocks in the `$selector` of your choice, and at the root
|
||||||
|
// level. Specificity of the selector can be increased by increasing the
|
||||||
|
// `$degree` to a higher number than the default `1`.
|
||||||
|
|
||||||
|
// Examples:
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Default:
|
||||||
|
//
|
||||||
|
// @include wrap-at-root("#app") {
|
||||||
|
// .u-border-red { border: 1px solid red; }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// Output: #app .u-border-red { border: 1px solid red; }
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// Custom:
|
||||||
|
//
|
||||||
|
// @include wrap-at-root("#app", 3) {
|
||||||
|
// .u-border-red { border: 1px solid red; }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// Output: #app#app#app .u-border-red { border: 1px solid red; }
|
||||||
|
|
||||||
|
|
||||||
|
// Parameters
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// @param $selector [String]: ID selector.
|
||||||
|
// @param $degree [Number]: Effectively the number of id-level selectors you
|
||||||
|
// need to override.
|
||||||
|
|
||||||
|
@mixin wrap-at-root($selector, $degree: 1) {
|
||||||
|
$selector-chain: '';
|
||||||
|
|
||||||
|
// Build an id selector by chaining the same id onto itself once more than
|
||||||
|
// the specified degree. So if degree: 3, we get #id#id#id.
|
||||||
|
|
||||||
|
@for $i from 1 through $degree {
|
||||||
|
$selector-chain: $selector-chain + $selector;
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root #{$selector-chain} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
26
src/app/styles/base/_tables.scss
Normal file
26
src/app/styles/base/_tables.scss
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
// Tables
|
||||||
|
// ===
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin: $unit 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
padding: $unit 0;
|
||||||
|
|
||||||
|
font-weight: $semi-bold-font-weight;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: $unit 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr,
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
117
src/app/styles/base/_typography.scss
Normal file
117
src/app/styles/base/_typography.scss
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
// Typography
|
||||||
|
// ===
|
||||||
|
|
||||||
|
// Headers
|
||||||
|
// ---
|
||||||
|
@import url('https://use.fontawesome.com/releases/v5.1.0/css/all.css');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=McLaren&display=swap" rel="stylesheet');
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
font-family: $header-font-family;
|
||||||
|
font-weight: $regular-font-weight;
|
||||||
|
line-height: 1.25;
|
||||||
|
|
||||||
|
// Added with webfontloader. See loadFonts() in app/container.js
|
||||||
|
.wf-active & {
|
||||||
|
font-family: $loaded-header-font-family;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
%h1 {
|
||||||
|
font-weight: $light-font-weight;
|
||||||
|
font-size: $huge-font-size;
|
||||||
|
line-height: $huge-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
%h2 {
|
||||||
|
font-size: $bigger-font-size;
|
||||||
|
line-height: $bigger-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
%h3,
|
||||||
|
h4,
|
||||||
|
%h4 {
|
||||||
|
font-size: $big-font-size;
|
||||||
|
line-height: $big-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5,
|
||||||
|
%h5 {
|
||||||
|
font-size: $font-size + 2;
|
||||||
|
line-height: $line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
%h6 {
|
||||||
|
font-size: $font-size;
|
||||||
|
line-height: $line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Text Elements
|
||||||
|
// ---
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-color;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
color: $active-link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: $semi-bold-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Miscellaneous Elements
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// 1. Address differences between Firefox and other browsers.
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; // 1
|
||||||
|
height: 0; // 1
|
||||||
|
margin: ($unit * 2) 0;
|
||||||
|
border: $border;
|
||||||
|
border-width: 0 0 1px;
|
||||||
|
|
||||||
|
-moz-box-sizing: content-box; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: ($unit * 2) 0;
|
||||||
|
padding-left: $unit;
|
||||||
|
border-left: 2px solid $border-color;
|
||||||
|
|
||||||
|
color: lighten($font-color, 15);
|
||||||
|
}
|
||||||
61
src/app/styles/utilities/_border.scss
Normal file
61
src/app/styles/utilities/_border.scss
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
// Border
|
||||||
|
// ===
|
||||||
|
|
||||||
|
// Border (Width and Color)
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-border {
|
||||||
|
border: $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-0 {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-top {
|
||||||
|
border-top: $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-end {
|
||||||
|
border-right: $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-bottom {
|
||||||
|
border-bottom: $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-start {
|
||||||
|
border-left: $border;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Light Border (Width and Color)
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-border-light {
|
||||||
|
border: $light-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-light-top {
|
||||||
|
border-top: $light-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-light-end {
|
||||||
|
border-right: $light-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-light-bottom {
|
||||||
|
border-bottom: $light-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-border-light-start {
|
||||||
|
border-left: $light-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Border (Other)
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-border-radius {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
18
src/app/styles/utilities/_box-shadow.scss
Normal file
18
src/app/styles/utilities/_box-shadow.scss
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
// Box Shadow
|
||||||
|
// ===
|
||||||
|
|
||||||
|
.u-box-shadow {
|
||||||
|
box-shadow: $box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-box-shadow-inset {
|
||||||
|
box-shadow: $inset-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-box-shadow-lg {
|
||||||
|
box-shadow: $large-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-box-shadow-input {
|
||||||
|
box-shadow: $input-box-shadow;
|
||||||
|
}
|
||||||
177
src/app/styles/utilities/_color.scss
Normal file
177
src/app/styles/utilities/_color.scss
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
// Color
|
||||||
|
// ===
|
||||||
|
|
||||||
|
// Neutral Colors
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-color-neutral-00 {
|
||||||
|
color: $neutral-00;
|
||||||
|
|
||||||
|
fill: $neutral-00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-neutral-10 {
|
||||||
|
color: $neutral-10;
|
||||||
|
|
||||||
|
fill: $neutral-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-neutral-15 {
|
||||||
|
color: $neutral-15;
|
||||||
|
|
||||||
|
fill: $neutral-15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-neutral-20 {
|
||||||
|
color: $neutral-20;
|
||||||
|
|
||||||
|
fill: $neutral-20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-neutral-30 {
|
||||||
|
color: $neutral-30;
|
||||||
|
|
||||||
|
fill: $neutral-30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-neutral-40 {
|
||||||
|
color: $neutral-40;
|
||||||
|
|
||||||
|
fill: $neutral-40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-neutral-50 {
|
||||||
|
color: $neutral-50;
|
||||||
|
|
||||||
|
fill: $neutral-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-neutral-60 {
|
||||||
|
color: $neutral-60;
|
||||||
|
|
||||||
|
fill: $neutral-60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-neutral-70 {
|
||||||
|
color: $neutral-70;
|
||||||
|
|
||||||
|
fill: $neutral-70;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Other Colors
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-color-brand {
|
||||||
|
color: $brand-color;
|
||||||
|
|
||||||
|
fill: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-accent {
|
||||||
|
color: $accent-color;
|
||||||
|
|
||||||
|
fill: $accent-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-primary-action {
|
||||||
|
color: $primary-action-color;
|
||||||
|
|
||||||
|
fill: $primary-action-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-secondary-action {
|
||||||
|
color: $secondary-action-color;
|
||||||
|
|
||||||
|
fill: $secondary-action-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-success {
|
||||||
|
color: $success-color;
|
||||||
|
|
||||||
|
fill: $success-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-error {
|
||||||
|
color: $error-color;
|
||||||
|
|
||||||
|
fill: $error-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-color-sale {
|
||||||
|
color: $sale-color;
|
||||||
|
|
||||||
|
fill: $sale-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Background Colors
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-bg-color-neutral-00 {
|
||||||
|
background-color: $neutral-00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-neutral-10 {
|
||||||
|
background-color: $neutral-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-neutral-15 {
|
||||||
|
background-color: $neutral-15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-neutral-20 {
|
||||||
|
background-color: $neutral-20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-neutral-30 {
|
||||||
|
background-color: $neutral-30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-neutral-40 {
|
||||||
|
background-color: $neutral-40;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-neutral-50 {
|
||||||
|
background-color: $neutral-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-neutral-60 {
|
||||||
|
background-color: $neutral-60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-neutral-70 {
|
||||||
|
background-color: $neutral-70;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Other Background Colors
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-bg-color-brand {
|
||||||
|
background-color: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-accent {
|
||||||
|
background-color: $accent-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-primary-action {
|
||||||
|
background-color: $primary-action-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-secondary-action {
|
||||||
|
background-color: $secondary-action-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-success {
|
||||||
|
background-color: $success-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-error {
|
||||||
|
background-color: $error-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-bg-color-sale {
|
||||||
|
background-color: $sale-color;
|
||||||
|
}
|
||||||
42
src/app/styles/utilities/_display.scss
Normal file
42
src/app/styles/utilities/_display.scss
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
// Display
|
||||||
|
// ===
|
||||||
|
|
||||||
|
|
||||||
|
// Display: Block
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-display-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Display: Inline Block
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-display-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Display: Inline
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-display-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Dispaly: Inline Table
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-display-inline-table {
|
||||||
|
display: inline-table;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Display: None
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-display-none {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
158
src/app/styles/utilities/_flexbox.scss
Normal file
158
src/app/styles/utilities/_flexbox.scss
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
// Flexbox
|
||||||
|
// ===
|
||||||
|
//
|
||||||
|
// Flexbox and align a row of items with a lot of control. Provides a
|
||||||
|
// declarative, robust cross-browser way of using flexbox.
|
||||||
|
|
||||||
|
|
||||||
|
// Flex (Grow)
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Ensures that the flex child will grow to fill the available space.
|
||||||
|
//
|
||||||
|
// Note! This utility class should come **BEFORE** the `u-flexbox` class in
|
||||||
|
// order to ensure that an element with both classes inherits only the
|
||||||
|
// `display: flex` property.
|
||||||
|
// 1. Ensure inline elements are treated as block-level.
|
||||||
|
// 2. Prevent width collapsing in old implementations.
|
||||||
|
|
||||||
|
.u-flex {
|
||||||
|
display: block; // 1
|
||||||
|
flex: 1 1 auto;
|
||||||
|
width: 100%; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Flex (Shrink)
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// 1. Ensure width collapses in old implementations.
|
||||||
|
|
||||||
|
|
||||||
|
.u-flex-shrink {
|
||||||
|
flex: initial;
|
||||||
|
width: auto; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Flex (None)
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Neither grow nor shrink!
|
||||||
|
|
||||||
|
.u-flex-none {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Flexbox
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Includes gutters, for grid-like functionality.
|
||||||
|
//
|
||||||
|
// Note! This should come **AFTER** the `u-flex` utility class in order to
|
||||||
|
// ensure an element that has both classes inherits `display: flex`!
|
||||||
|
// 1. Remove default styles present on common root elements.
|
||||||
|
// 2. Ensure in iOS 5 and 6 that flex-direction isn't inherited from
|
||||||
|
// any flexbox parents that has flex-direction set to row-reverse
|
||||||
|
|
||||||
|
|
||||||
|
.u-flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row; // 2
|
||||||
|
margin: 0; // 1
|
||||||
|
padding: 0; // 1
|
||||||
|
|
||||||
|
list-style: none; // 1
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Directions
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-direction-column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-direction-column-reverse {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-direction-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-direction-row-reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Align Items
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-align-top {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-align-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-align-bottom {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Justify Content
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-justify-start {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-justify-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-justify-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-justify-around {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Order
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Re-arrange the display order of up to six items. Add additional modifiers in
|
||||||
|
// your own stylesheet to re-order more.
|
||||||
|
|
||||||
|
.u-order-1 {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-order-2 {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-order-3 {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-order-4 {
|
||||||
|
order: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-order-5 {
|
||||||
|
order: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-order-6 {
|
||||||
|
order: 6;
|
||||||
|
}
|
||||||
26
src/app/styles/utilities/_heading.scss
Normal file
26
src/app/styles/utilities/_heading.scss
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
// Heading
|
||||||
|
// ===
|
||||||
|
|
||||||
|
.u-h1 {
|
||||||
|
@extend %h1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-h2 {
|
||||||
|
@extend %h2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-h3 {
|
||||||
|
@extend %h3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-h4 {
|
||||||
|
@extend %h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-h5 {
|
||||||
|
@extend %h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-h6 {
|
||||||
|
@extend %h6;
|
||||||
|
}
|
||||||
97
src/app/styles/utilities/_layout.scss
Normal file
97
src/app/styles/utilities/_layout.scss
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
// Layout utils
|
||||||
|
// ===
|
||||||
|
|
||||||
|
// Floats
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Writing-direction independent floats. For RTL stylesheets, re-define
|
||||||
|
// these styles with the opposite direction. Templates need not be changed.
|
||||||
|
|
||||||
|
.u-float-start {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-float-end {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Contain floats
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Contain all floated children and their margins.
|
||||||
|
//
|
||||||
|
// 1. Avoid an Opera bug when the contenteditable attribute is included anywhere
|
||||||
|
// else in the document.
|
||||||
|
// 2. Contain the the first child’s top margin. Ensures rendering is consistent
|
||||||
|
// with the other common clearfix method, `overflow: hidden`.
|
||||||
|
|
||||||
|
.u-clearfix {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: ' '; // 1
|
||||||
|
|
||||||
|
display: table; // 2
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Positioning relative
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Create a new positioning context.
|
||||||
|
|
||||||
|
.u-position-relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Positioning absolute
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Create a new positioning context.
|
||||||
|
|
||||||
|
.u-position-absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Positioning fixed
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Create a new positioning context.
|
||||||
|
|
||||||
|
.u-position-fixed {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Positioning coordinate
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-position-top {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-position-right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-position-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-position-left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-position-full {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
159
src/app/styles/utilities/_margin.scss
Normal file
159
src/app/styles/utilities/_margin.scss
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
// Margin
|
||||||
|
// ===
|
||||||
|
|
||||||
|
// Miscellanous
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-margin-0 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-center {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-all {
|
||||||
|
margin-top: $unit;
|
||||||
|
margin-right: $unit;
|
||||||
|
margin-bottom: $unit;
|
||||||
|
margin-left: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Vertical Margins
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Granular control over vertical spacing independent of a component. Includes
|
||||||
|
// values based on global spacing.
|
||||||
|
//
|
||||||
|
// Suffixes:
|
||||||
|
// 0: none
|
||||||
|
// sm: small
|
||||||
|
// md: medium
|
||||||
|
// lg: large
|
||||||
|
|
||||||
|
.u-margin-top-0 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-top {
|
||||||
|
margin-top: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-top-sm {
|
||||||
|
margin-top: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-top-md {
|
||||||
|
margin-top: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-top-lg {
|
||||||
|
margin-top: $unit * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-bottom-0 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-bottom {
|
||||||
|
margin-bottom: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-bottom-sm {
|
||||||
|
margin-bottom: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-bottom-md {
|
||||||
|
margin-bottom: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-bottom-lg {
|
||||||
|
margin-bottom: $unit * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Horizontal Margins
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Granular control over horizontal spacing independent of a component. Includes
|
||||||
|
// values based on global spacing, and adds values based on relative typographic
|
||||||
|
// sizes.
|
||||||
|
//
|
||||||
|
// `start` and `end` are writing-direction independent forms for `left` and
|
||||||
|
// `right`. For right-to-left localizations, create an alternate version of this
|
||||||
|
// stylesheet with the property directions reversed.
|
||||||
|
//
|
||||||
|
// Suffixes:
|
||||||
|
//
|
||||||
|
// 0: none
|
||||||
|
// th: thick space (about 1.5× a “normal” word space)
|
||||||
|
// en: en space (half an em)
|
||||||
|
// em: em space
|
||||||
|
// sm: small
|
||||||
|
// md: medium
|
||||||
|
// lg: large
|
||||||
|
|
||||||
|
.u-margin-start-0 {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-start {
|
||||||
|
margin-left: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-start-th {
|
||||||
|
margin-left: 0.333em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-start-en {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-start-em {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-start-sm {
|
||||||
|
margin-left: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-start-md {
|
||||||
|
margin-left: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-start-lg {
|
||||||
|
margin-left: $unit * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-end-0 {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-end {
|
||||||
|
margin-right: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-end-th {
|
||||||
|
margin-right: 0.333em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-end-en {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-end-em {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-end-sm {
|
||||||
|
margin-right: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-end-md {
|
||||||
|
margin-right: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-margin-end-lg {
|
||||||
|
margin-right: $unit * 2;
|
||||||
|
}
|
||||||
164
src/app/styles/utilities/_padding.scss
Normal file
164
src/app/styles/utilities/_padding.scss
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
// Padding
|
||||||
|
// ===
|
||||||
|
|
||||||
|
// Miscellanous
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-padding-0 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding {
|
||||||
|
padding: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-sm {
|
||||||
|
padding: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-md {
|
||||||
|
padding: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-lg {
|
||||||
|
padding: $unit * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical Padding
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Granular control over vertical spacing independent of a component. Includes
|
||||||
|
// values based on global spacing.
|
||||||
|
//
|
||||||
|
// Suffixes:
|
||||||
|
// 0: none
|
||||||
|
// sm: small
|
||||||
|
// md: medium
|
||||||
|
// lg: large
|
||||||
|
|
||||||
|
.u-padding-top-0 {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-top {
|
||||||
|
padding-top: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-top-sm {
|
||||||
|
padding-top: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-top-md {
|
||||||
|
padding-top: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-top-lg {
|
||||||
|
padding-top: $unit * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-bottom-0 {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-bottom {
|
||||||
|
padding-bottom: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-bottom-sm {
|
||||||
|
padding-bottom: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-bottom-md {
|
||||||
|
padding-bottom: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-bottom-lg {
|
||||||
|
padding-bottom: $unit * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Horizontal Padding
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Granular control over horizontal spacing independent of a component. Includes
|
||||||
|
// values based on global spacing, and adds values based on relative typographic
|
||||||
|
// sizes.
|
||||||
|
//
|
||||||
|
// `start` and `end` are writing-direction independent forms for `left` and
|
||||||
|
// `right`. For right-to-left localizations, create an alternate version of this
|
||||||
|
// stylesheet with the property directions reversed.
|
||||||
|
//
|
||||||
|
// Suffixes:
|
||||||
|
//
|
||||||
|
// 0: none
|
||||||
|
// th: thick space (about 1.5× a “normal” word space)
|
||||||
|
// en: en space (half an em)
|
||||||
|
// em: em space
|
||||||
|
// sm: small
|
||||||
|
// md: medium
|
||||||
|
// lg: large
|
||||||
|
|
||||||
|
.u-padding-start-0 {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-start {
|
||||||
|
padding-left: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-start-th {
|
||||||
|
padding-left: 0.333em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-start-en {
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-start-em {
|
||||||
|
padding-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-start-sm {
|
||||||
|
padding-left: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-start-md {
|
||||||
|
padding-left: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-start-lg {
|
||||||
|
padding-left: $unit * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-end-0 {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-end {
|
||||||
|
padding-right: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-end-th {
|
||||||
|
padding-right: 0.333em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-end-en {
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-end-em {
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-end-sm {
|
||||||
|
padding-right: ($unit / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-end-md {
|
||||||
|
padding-right: $unit * 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-padding-end-lg {
|
||||||
|
padding-right: $unit * 2;
|
||||||
|
}
|
||||||
|
|
||||||
27
src/app/styles/utilities/_text-content.scss
Normal file
27
src/app/styles/utilities/_text-content.scss
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
// Text Content
|
||||||
|
// ===
|
||||||
|
//
|
||||||
|
// This is used to apply text-based-content styles to a container. Think of a
|
||||||
|
// blog post as an example of text content.
|
||||||
|
|
||||||
|
.u-text-content {
|
||||||
|
.u-h1 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-h2 {
|
||||||
|
font-weight: $semi-bold-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-h3 {
|
||||||
|
color: $brand-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-h4 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
p + p {
|
||||||
|
margin-top: $unit;
|
||||||
|
}
|
||||||
|
}
|
||||||
206
src/app/styles/utilities/_text.scss
Normal file
206
src/app/styles/utilities/_text.scss
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
// Text utils
|
||||||
|
// ===
|
||||||
|
|
||||||
|
|
||||||
|
// Font-Family
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-text-family {
|
||||||
|
font-family: $font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-family-header {
|
||||||
|
font-family: $header-font-family;
|
||||||
|
|
||||||
|
// Added with webfontloader. See loadFonts() in app/container.js
|
||||||
|
.wf-active & {
|
||||||
|
font-family: $loaded-header-font-family;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-family-loaded {
|
||||||
|
font-family: $loaded-header-font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Weights & Style
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-text-weight-thin {
|
||||||
|
font-weight: $thin-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-weight-extra-light {
|
||||||
|
font-weight: $extra-light-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-weight-light {
|
||||||
|
font-weight: $light-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-weight-regular {
|
||||||
|
font-weight: $regular-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-weight-medium {
|
||||||
|
font-weight: $medium-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-weight-semi-bold {
|
||||||
|
font-weight: $semi-bold-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-weight-bold {
|
||||||
|
font-weight: $bold-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-style-italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-quiet {
|
||||||
|
color: $neutral-50;
|
||||||
|
font-size: $small-font-size;
|
||||||
|
|
||||||
|
fill: $neutral-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Size
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-text-size-smaller {
|
||||||
|
font-size: $smaller-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-size-small {
|
||||||
|
font-size: $small-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-size-base {
|
||||||
|
font-size: $font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-size-big {
|
||||||
|
font-size: $big-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-size-bigger {
|
||||||
|
font-size: $bigger-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-size-huge {
|
||||||
|
font-size: $huge-font-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Line Height
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-text-height-0 {
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-height-tiny {
|
||||||
|
line-height: $tiny-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-height-smaller {
|
||||||
|
line-height: $smaller-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-height-small {
|
||||||
|
line-height: $small-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-height-base {
|
||||||
|
line-height: $line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-height-big {
|
||||||
|
line-height: $big-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-height-bigger {
|
||||||
|
line-height: $bigger-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-height-huge {
|
||||||
|
line-height: $huge-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Letter Spacing
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-text-letter-spacing-small {
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-letter-spacing-normal {
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Text Alignment
|
||||||
|
// ---
|
||||||
|
|
||||||
|
.u-text-align-start {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-align-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-align-end {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-align-middle {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-text-align-baseline {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// All Caps
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Set text uppercase, letterspaced for legibility.
|
||||||
|
|
||||||
|
.u-text-uppercase {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Capitalize Text
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Capitalize first letter of string.
|
||||||
|
|
||||||
|
.u-text-capitalize {
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Lowercase Text
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Lowercase all text in string.
|
||||||
|
|
||||||
|
.u-text-lowercase {
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Strikethrough Text
|
||||||
|
// ---
|
||||||
|
//
|
||||||
|
// Strikethrough all text in string.
|
||||||
|
|
||||||
|
.u-text-strikethrough {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
8
src/app/styles/utilities/_visibility.scss
Normal file
8
src/app/styles/utilities/_visibility.scss
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
// Visibility Utils
|
||||||
|
// ===
|
||||||
|
//
|
||||||
|
// Remove from flow but leave available to screen readers.
|
||||||
|
|
||||||
|
.u-visually-hidden {
|
||||||
|
@include visually-hidden();
|
||||||
|
}
|
||||||
18
src/app/styles/utilities/_z-index.scss
Normal file
18
src/app/styles/utilities/_z-index.scss
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
// Z-Index
|
||||||
|
// ===
|
||||||
|
|
||||||
|
.u-z-index-1 {
|
||||||
|
z-index: $z1-depth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-z-index-2 {
|
||||||
|
z-index: $z2-depth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-z-index-3 {
|
||||||
|
z-index: $z3-depth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-z-index-4 {
|
||||||
|
z-index: $z4-depth;
|
||||||
|
}
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
||||||
sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
||||||
monospace;
|
|
||||||
}
|
|
||||||
17
src/index.js
17
src/index.js
@@ -1,17 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import './index.css';
|
|
||||||
import App from './App';
|
|
||||||
import * as serviceWorker from './serviceWorker';
|
|
||||||
|
|
||||||
ReactDOM.render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<App />
|
|
||||||
</React.StrictMode>,
|
|
||||||
document.getElementById('root')
|
|
||||||
);
|
|
||||||
|
|
||||||
// If you want your app to work offline and load faster, you can change
|
|
||||||
// unregister() to register() below. Note this comes with some pitfalls.
|
|
||||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
|
||||||
serviceWorker.unregister();
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
|
||||||
<g fill="#61DAFB">
|
|
||||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
|
||||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
|
||||||
<path d="M520.5 78.1z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
Reference in New Issue
Block a user