QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: scss architecture.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-03-25 21:27:52 +02:00
parent edd8693450
commit ae29d20cc9
20 changed files with 1156 additions and 911 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
client/src/components/MenuItem.js Normal file
View File

@@ -0,0 +1,260 @@
/*
* Copyright 2015 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import classNames from "classnames";
import React, {useState} from "react";
// import {
// ,
// } from "@bluprintjs/core/src/components/common";
// import { DISPLAYNAME_PREFIX } from "../../common/props";
import {
Icon,
Popover,
PopoverInteractionKind,
Text,
Menu,
Classes, Position,
AbstractPureComponent2,
DISPLAYNAME_PREFIX,
Collapse
} from "@blueprintjs/core";
// export interface IMenuItemProps extends IActionProps, ILinkProps {
// // override from IActionProps to make it required
// /** Item text, required for usability. */
// text: React.ReactNode;
// /** Whether this menu item should appear with an active state. */
// active?: boolean;
// /**
// * Children of this component will be rendered in a __submenu__ that appears when hovering or
// * clicking on this menu item.
// *
// * Use `text` prop for the content of the menu item itself.
// */
// children?: React.ReactNode;
// /**
// * Whether this menu item is non-interactive. Enabling this prop will ignore `href`, `tabIndex`,
// * and mouse event handlers (in particular click, down, enter, leave).
// */
// disabled?: boolean;
// /**
// * Right-aligned label text content, useful for displaying hotkeys.
// *
// * This prop actually supports JSX elements, but TypeScript will throw an error because
// * `HTMLAttributes` only allows strings. Use `labelElement` to supply a JSX element in TypeScript.
// */
// label?: string;
// /**
// * A space-delimited list of class names to pass along to the right-aligned label wrapper element.
// */
// labelClassName?: string;
// /**
// * Right-aligned label content, useful for displaying hotkeys.
// */
// labelElement?: React.ReactNode;
// /**
// * Whether the text should be allowed to wrap to multiple lines.
// * If `false`, text will be truncated with an ellipsis when it reaches `max-width`.
// * @default false
// */
// multiline?: boolean;
// /**
// * Props to spread to `Popover`. Note that `content` and `minimal` cannot be
// * changed and `usePortal` defaults to `false` so all submenus will live in
// * the same container.
// */
// popoverProps?: Partial<IPopoverProps>;
// /**
// * Whether an enabled item without a submenu should automatically close its parent popover when clicked.
// * @default true
// */
// shouldDismissPopover?: boolean;
// /**
// * Name of the HTML tag that wraps the MenuItem.
// * @default "a"
// */
// tagName?: keyof JSX.IntrinsicElements;
// /**
// * A space-delimited list of class names to pass along to the text wrapper element.
// */
// textClassName?: string;
// }
export default class MenuItem extends AbstractPureComponent2 {
static get defaultProps() {
return {
disabled: false,
multiline: false,
popoverProps: {},
shouldDismissPopover: true,
text: "",
dropdownType: 'popover',
};
};
static get displayName() {
return `${DISPLAYNAME_PREFIX}.MenuItem`;
}
constructor(props) {
super(props);
this.state = {
isCollapseActive: false,
};
}
render() {
const {
active,
className,
children,
disabled,
icon,
intent,
labelClassName,
labelElement,
multiline,
popoverProps,
shouldDismissPopover,
text,
textClassName,
tagName = "a",
dropdownType,
...htmlProps
} = this.props;
const hasSubmenu = children != null;
const intentClass = Classes.intentClass(intent);
const anchorClasses = classNames(
Classes.MENU_ITEM,
intentClass,
{
[Classes.ACTIVE]: active,
[Classes.INTENT_PRIMARY]: active && intentClass == null,
[Classes.DISABLED]: disabled,
// prevent popover from closing when clicking on submenu trigger or disabled item
[Classes.POPOVER_DISMISS]: shouldDismissPopover && !disabled && !hasSubmenu,
},
className,
);
const handleAnchorClick = () => {
if (dropdownType === 'collapse') {
this.setState({ isCollapseActive: !this.state.isCollapseActive });
}
};
const target = React.createElement(
tagName,
{
...htmlProps,
...(disabled ? DISABLED_PROPS : {}),
className: anchorClasses,
onClick: handleAnchorClick,
},
<Icon icon={icon} />,
<Text className={classNames(Classes.FILL, textClassName)} ellipsize={!multiline}>
{text}
</Text>,
this.maybeRenderLabel(labelElement),
hasSubmenu ? <Icon icon="caret-right" /> : undefined,
);
const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu });
return <li className={liClasses}>{
(dropdownType === 'collapse') ?
this.maybeRenderCollapse(target, children) :
this.maybeRenderPopover(target, children)
}</li>;
}
maybeRenderLabel(labelElement) {
const { label, labelClassName } = this.props;
if (label == null && labelElement == null) {
return null;
}
return (
<span className={classNames(Classes.MENU_ITEM_LABEL, labelClassName)}>
{label}
{labelElement}
</span>
);
}
maybeRenderCollapse(target, children) {
if (children == null) {
return target;
}
return (
<>
{target}
<Collapse isOpen={this.state.isCollapseActive}>{ children }</Collapse>
</>
);
}
maybeRenderPopover(target, children) {
if (children == null) {
return target;
}
const { disabled, popoverProps } = this.props;
return (
<Popover
autoFocus={false}
captureDismiss={false}
disabled={disabled}
enforceFocus={false}
hoverCloseDelay={0}
interactionKind={PopoverInteractionKind.HOVER}
modifiers={SUBMENU_POPOVER_MODIFIERS}
position={Position.RIGHT_TOP}
usePortal={false}
{...popoverProps}
content={<Menu>{children}</Menu>}
minimal={true}
popoverClassName={classNames(Classes.MENU_SUBMENU, popoverProps.popoverClassName)}
target={target}
/>
);
}
}
const SUBMENU_POPOVER_MODIFIERS = {
// 20px padding - scrollbar width + a bit
flip: { boundariesElement: "viewport", padding: 20 },
// shift popover up 5px so MenuItems align
offset: { offset: -5 },
preventOverflow: { boundariesElement: "viewport", padding: 20 },
};
// props to ignore when disabled
const DISABLED_PROPS = {
href: undefined,
onClick: undefined,
onMouseDown: undefined,
onMouseEnter: undefined,
onMouseLeave: undefined,
tabIndex: -1,
};

40
client/src/components/Sidebar/SidebarMenu.js
View File

@@ -1,23 +1,37 @@
import React from 'react';
import {Menu, MenuItem, MenuDivider} from "@blueprintjs/core";
import React, { useState } from 'react';
import {Menu, MenuDivider, Collapse} from "@blueprintjs/core";
import {useHistory} from 'react-router-dom';
import sidebarMenuList from 'config/sidebarMenu';
import Icon from 'components/Icon';
import MenuItem from 'components/MenuItem';
export default function SidebarMenu() {
let history = useHistory();
const items = sidebarMenuList.map((item) =>
(item.divider) ?
<MenuDivider
title={item.title} /> :
<MenuItem
icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
text={item.text}
label={item.label}
disabled={item.disabled}
onClick={() => { history.push(item.href); }} />
);
const menuItemsMapper = (list) => {
return list.map((item, index) => {
const children = Array.isArray(item.children) ? menuItemsMapper(item.children) : null;
return (
(item.divider) ?
<MenuDivider
title={item.title} /> :
<MenuItem
icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
text={item.text}
label={item.label}
disabled={item.disabled}
children={children}
dropdownType={item.dropdownType || 'collapse'}
onClick={() => {
history.push(item.href);
}} />
);
});
};
const items = menuItemsMapper(sidebarMenuList);
return (
<Menu className="sidebar-menu">
{items}

118
client/src/config/sidebarMenu.js
View File

@@ -4,13 +4,6 @@ export default [
{
divider: true,
},
{
icon: 'homepage',
iconSize: 20,
text: 'Items List',
disabled: false,
href: '/dashboard/items/list',
},
{
icon: 'homepage',
iconSize: 20,
@@ -21,6 +14,24 @@ export default [
{
divider: true,
},
{
icon: 'homepage',
iconSize: 20,
text: 'Items',
children: [
{
text: 'Items List',
href: '/dashboard/accounts',
},
{
text: 'New Item',
href: '/dashboard/accounts',
},
]
},
{
divider: true,
},
{
icon: 'balance-scale',
iconSize: 20,
@@ -28,26 +39,12 @@ export default [
href: '/dashboard/accounts',
children: [
{
text: 'cut',
label: '⌘C',
disabled: false,
},
{
text: 'cut',
label: '⌘C',
disabled: false,
text: 'Accounts Chart',
href: '/dashboard/accounts',
},
{
text: 'cut',
label: '⌘C',
disabled: false,
},
{
text: 'cut',
label: '⌘C',
disabled: false,
text: 'Make Journal',
href: '/dashboard/accounting/make-journal-entry'
},
]
},
@@ -57,12 +54,7 @@ export default [
text: 'Banking',
href: '/dashboard/accounts',
children: [
{
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false,
}
]
},
{
@@ -71,12 +63,7 @@ export default [
text: 'Sales',
href: '/dashboard/accounts',
children: [
{
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false,
}
]
},
{
@@ -100,36 +87,41 @@ export default [
href: '/dashboard/accounts',
children: [
{
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false,
}
text: 'Balance Sheet',
href: '/dashboard/accounting/balance-sheet',
},
{
text: 'Trial Balance Sheet',
href: '/dashboard/accounting/trial-balance-sheet',
},
{
text: 'Journal',
href: '/dashboard/accounting/journal-sheet',
},
{
text: 'General Ledger',
href: '/dashboard/accounting/general-ledger',
},
{
text: 'Profit Loss Sheet',
href: '/dashboard/accounting/profit-loss-sheet',
},
]
},
{
text: 'Expenses',
href: '/dashboard/expenses',
},
{
text: 'New Expenses',
href: '/dashboard/expenses/new',
},
{
text: 'Make Journal',
href: '/dashboard/accounting/make-journal-entry'
},
{
text: 'Balance Sheet',
href: '/dashboard/accounting/balance-sheet',
},
{
text: 'Trial Balance Sheet',
href: '/dashboard/accounting/trial-balance-sheet',
},
{
text: 'Journal',
href: '/dashboard/accounting/journal-sheet',
icon: 'receipt',
iconSize: 18,
children: [
{
text: 'Expenses List',
href: '/dashboard/expenses',
},
{
text: 'New Expenses',
href: '/dashboard/expenses/new',
},
]
},
{
divider: true,

4
client/src/static/json/icons.js
View File

@@ -62,5 +62,9 @@ export default {
"filter": {
path: ['M91,32.1H8c-2.5,0-4.6-2.1-4.6-4.6s2.1-4.6,4.6-4.6H91c2.5,0,4.6,2.1,4.6,4.6S93.5,32.1,91,32.1z M21.9,45.9 h55.3c2.5,0,4.6,2.1,4.6,4.6c0,2.5-2.1,4.6-4.6,4.6H21.9c-2.5,0-4.6-2.1-4.6-4.6C17.2,48,19.3,45.9,21.9,45.9z M35.7,68.9h27.6 c2.5,0,4.6,2.1,4.6,4.6s-2.1,4.6-4.6,4.6H35.7c-2.5,0-4.6-2.1-4.6-4.6S33.1,68.9,35.7,68.9z'],
viewBox: '0 0 91 91',
},
"receipt": {
path: ['M344 288H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zM400.8 5.7L357.3 37 318.7 9.2c-16.8-12.1-39.2-12.1-56.1 0L224 37 185.4 9.2a47.888 47.888 0 0 0-56.1 0L90.7 37 47.2 5.7C27.4-8.5 0 5.6 0 29.9v452.3c0 23.8 27.1 38.6 47.2 24.2L90.7 475l38.6 27.8c16.8 12.1 39.2 12.1 56.1 0L224 475l38.6 27.8c16.8 12.1 39.3 12.1 56.1 0l38.6-27.8 43.5 31.3c19.8 14.2 47.2.1 47.2-24.1V29.9C448 6 420.9-8.7 400.8 5.7zm-.8 440.8l-42.7-30.7-66.7 48-66.7-48-66.7 48-66.7-48L48 446.5v-381l42.7 30.7 66.7-48 66.7 48 66.7-48 66.7 48L400 65.5v381zM344 176H104c-4.4 0-8 3.6-8 8v32c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-32c0-4.4-3.6-8-8-8zz'],
viewBox: '0 0 448 512',
}
}

853
client/src/style/App.scss
View File

@@ -9,851 +9,34 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22,
$menu-item-color-hover: $light-gray4;
$menu-item-color-active: $light-gray3;
// Blueprint framework.
@import "@blueprintjs/core/src/blueprint.scss";
@import "@blueprintjs/table/src/table.scss";
@import "@blueprintjs/datetime/src/blueprint-datetime.scss";
@import "basscss";
@import "pages/authentication.scss";
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
// Objects
@import "objects/form";
@import "objects/typography";
// Breadcrumbs component.
.#{$ns}-breadcrumbs-collapsed{
background: $light-gray3;
// Components
@import "components/data-table";
@import "components/dialog";
&:hover{
background: $light-gray2;
}
}
// Pages
@import "pages/dashboard";
@import "pages/accounts-chart";
@import "pages/authentication";
@import "pages/expense-form";
@import "pages/financial-statements";
@import "pages/make-journal-entries";
@import "pages/preferences";
@import "pages/view-form";
// Tabs component.
.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{
height: 2px;
}
.#{$ns}-large > .#{$ns}-tab{
line-height: 50px;
font-size: 15px;
}
// Views
@import "views/filter-dropdown";
@import "views/sidebar";
.dashboard{
display: flex;
height: 100vh;
&__topbar{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #F2EFEF;
&-right,
&-left{
display: flex;
}
&-actions{
}
&-sidebar-toggle{
display: flex;
align-items: center;
margin-left: 4px;
.#{$ns}-button{
color: #8E8E8E;
&,
&:hover,
&:focus{
border-radius: 0;
box-shadow: none;
background-color: transparent;
border: 0;
}
}
}
&-navbar{
display: flex;
align-items: center;
margin-right: 18px;
.#{$ns}-button{
color: #1552C8;
font-weight: 5000;
font-size: 14px;
&:hover,
&:focus{
background-color: rgba(178, 220, 253, 0.15);
}
.#{$ns}-icon{
color: #1552C8;
}
}
}
&-user{
display: flex;
align-items: center;
margin-right: 28px;
.#{$ns}-button{
background-size: contain;
border-radius: 50%;
height: 40px;
width: 40px;
&,
&:hover,
&:focus{
background-color: transparent;
border: 0;
box-shadow: none;
background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400);
}
}
}
}
&__breadcrumbs{
display: flex;
margin-left: 16px;
align-items: center;
}
&__actions-bar{
border-bottom: 2px solid #EAEAEA;
.#{$ns}-navbar{
box-shadow: none;
&,
&-group{
height: 44px;
}
.#{$ns}-navbar-divider{
margin-left: 0;
margin-right: 0;
}
.#{$ns}-button{
color: #5C5C5C;
padding: 8px 12px;
&:hover{
background: rgba(167, 182, 194, 0.12);
color: #5C5C5C;
}
.#{$ns}-icon{
color: #666;
margin-right: 7px;
}
}
.button--table-views{
.#{$ns}-icon{
color: #1183DA;
}
}
}
}
&__breadcrumbs{
display: flex;
align-items: center;
margin-left: 1rem;
}
&__title{
align-items: center;;
display: flex;
margin-left: 6px;
h1{
font-size: 26px;
font-weight: 100;
margin: 0;
}
.sep{
margin-left: 12px;
margin-right: 12px;
color: #999;
border-left: 1px solid #d9d9d9;
width: 1px;
height: 25px;
}
h3{
font-size: 16px;
font-weight: 300;
color: #777;
margin: 0;
}
}
&-content{
width: calc(100% - 220px);
display: flex;
flex-direction: column;
}
&__insider{
height: 100%;
&--loading{
display: flex;
align-items: center;
justify-content: center;
}
}
&__page-content{
// padding: 22px;
}
&__preferences-topbar{
border-bottom: 1px solid #E5E5E5;
height: 70px;
padding: 0 22px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
h2{
font-size: 22px;
font-weight: 200;
margin: 0;
}
}
}
$sidebar-background: #01194E;
$sidebar-text-color: #fff;
$sidebar-width: 220px;
$sidebar-menu-item-color: #E9EBF7;
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
.sidebar{
background: $sidebar-background;
color: $sidebar-text-color;
width: $sidebar-width;
&__head{
padding: 16px 10px;
&-company-meta{
.company-name{
font-size: 16px;
font-weight: 200;
margin-bottom: 5px;
}
.company-meta{
color: #A7AFC2;
font-size: 12px;
}
}
}
&-menu{
background: transparent;
padding: 0;
min-width: $sidebar-width;
border-radius: 0;
.#{$ns}-menu-item{
color: $sidebar-menu-item-color;
border-radius: 0;
padding: 10px 16px;
font-size: 15px;
font-weight: 200;
&:hover{
background: #012470;
}
&:focus,
&:active{
background: #01143e;
}
> .#{$ns}-icon{
color: #767B9B;
margin-right: 12px;
margin-top: 0;
}
> .#{$ns}-icon-caret-right{
margin-right: -2px;
margin-top: 2px;
color: #767B9B;
}
}
.#{$ns}-submenu{
.#{$ns}-menu{
padding: 10px 0;
margin: 0;
background: $sidebar-popover-submenu-bg;
border-radius: 0;
&-item{
padding-top: 7px;
padding-bottom: 7px;
padding-left: 16px;
padding-right: 16px;
font-size: 14px;
&,
&:hover,
&:active,
&:focus{
color: #fff;
background: transparent;
}
}
}
.#{$ns}-popover{
padding: 0;
&-content{
box-shadow: 0 0 0;
}
}
}
.#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{
color: $sidebar-menu-item-color;
}
.#{$ns}-menu-divider{
border-top-color: #183C86;
margin-left: 0;
margin-right: 0;
}
}
}
.navbar--dashboard-views{
box-shadow: 0 0 0;
border-bottom: 1px solid #EAEAEA;
}
.tabs--dashboard-views{
.#{$ns}-tab{
color: #5C5C5C;
font-size: 14px;
line-height: 50px;
font-weight: 400;
padding: 0 14px;
margin-right: 0;
}
.#{$ns}-tab-indicator-wrapper{
.#{$ns}-tab-indicator{
height: 2px;
}
}
.button--new-view{
margin: 0;
height: 50px;
&,
&:hover,
&:active,
&:focus{
background: transparent;
border: 0;
box-shadow: 0 0 0;
}
.#{$ns}-icon{
color: #A7A7A7;
}
}
}
// Dialog
.#{$ns}-dialog{
background: #fff;
&-header{
background: #ebf1f5;
}
}
// Form
label{
font-weight: 400;
}
.#{$ns}-input{
box-shadow: 0 0 0 0 rgba(19, 124, 189, 0),
0 0 0 0 rgba(19, 124, 189, 0),
inset 0 0 0 1px rgba(16, 22, 26, 0.1),
inset 0 1px 1px rgba(16, 22, 26, 0.15);
}
.#{$ns}-heading{
font-weight: 300;
}
// Dialog Account Form.
.dialog--account-form{
.#{$ns}-form-group{
.#{$ns}-label{
width: 130px;
}
}
}
.divider{
border-top: 1px solid #e8e8e8;
height: 1px;
}
.view-form{
&--name-section{
padding: 35px 28px;
background: #fbfafa;
margin-bottom: 22px;
.bp3-form-group.bp3-inline{
margin-bottom: 0;
}
}
&--logic-expression-section{
padding: 20px 25px;
margin: 1rem -25px 1.5rem;
background: #fbfafa;
.#{$ns}-form-group{
margin-bottom: 0;
}
}
.condition-number{
color: #666;
}
.#{$ns}-form-group.#{$ns}-inline{
.#{$ns}-label{
width: 200px;
}
.#{$ns}-form-content{
width: 100%;
}
}
.new-conditional-btn{
}
.dragable-columns{
&__items{
border: 1px solid #e1e1e1;
padding: 10px 8px;
height: 300px;
overflow: auto;
}
&__title{
color: #666;
}
}
.dragable-columns{
&__column{
.bp3-input-group .bp3-input{
border-radius: 3px 3px 0 0;
}
}
&__arrows{
text-align: center;
margin-top: 140px;
}
}
.dragable-resource-columns{
}
&__role-conditional{
margin-top: 1rem;
}
}
.preferences{
&__inside-content--tabable{
margin-left: -25px;
margin-right: -25px;
}
&__inside-content{
.#{$ns}-tab-list{
border-bottom: 1px solid #E5E5E5;
padding-left: 15px;
.#{$ns}-tab{
font-weight: 300;
}
}
}
}
.preferences__sidebar{
background: #fdfdfd;
min-width: 210px;
max-width: 210px;
&-head{
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #E5E5E5;
height: 70px;
padding: 0 22px;
h2{
font-size: 22px;
font-weight: 200;
margin: 0;
}
}
&-menu{
padding: 0;
background: transparent;
.#{$ns}-menu-item{
padding: 10px 18px;
font-size: 15px;
font-weight: 300;
color: #333;
}
}
}
#root{
// Essential JS 2 Datatable.
.e-grid{
border-left: 0;
border-right: 0;
.e-headercell,
.e-detailheadercell{
background-color: #F8FAFA;
height: 48px;
line-height: 48px;
}
.e-headercelldiv{
font-size: 14px;
color: #666;
}
.e-rowcell{
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
}
.e-rowcell:not(.e-editedbatchcell),
.e-detailrowcollapse:not(.e-editedbatchcell),
.e-detailrowexpand:not(.e-editedbatchcell),
.e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell),
.e-emptyrow:not(.e-editedbatchcell){
color: #333;
}
&.e-gridhover tr[role="row"]:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
&.e-gridhover tr[role="row"]:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
&.e-gridhover tr[role="row"]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
&.e-rtl .e-gridhover tr[role="row"]:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
&.e-gridhover tr[role="row"]:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell){
background: #F8FAFA;
color: #333;
}
}
.e-spinner-pane .e-spinner-inner .e-spin-material {
stroke: #999;
}
.e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop){
color: #666;
}
.#{$ns}-button--action{
background: #E6EFFB;
border: 0;
box-shadow: 0 0 0;
padding: 5px 15px;
}
}
.dashboard__insider--accounts-chart{
.e-grid{
.e-gridheader{
border-top: 0;
}
.account-normal{
.#{$ns}-icon{
color: #666;
padding-left: 15px;
}
}
.checkbox-row{
width: 0;
.#{$ns}-control{
margin: 0;
}
}
}
}
.dashboard__insider--expense-form{
padding: 40px 20px;
.#{$ns}-form-group{
margin-bottom: 22px;
.#{$ns}-label{
min-width: 130px;
}
.#{$ns}-form-content{
width: 300px;
}
}
}
.form{
&__floating-footer{
position: fixed;
bottom: 0;
left: 220px;
right: 0;
background: #fff;
padding: 14px 16px;
border-top: 1px solid #ececec;
}
}
.dashboard__insider--view-form{
padding-left: 25px;
padding-right: 25px;
.view-form--name-section{
margin-left: -25px;
margin-right: -25px;
}
}
.#{$ns}-form-group{
&.#{$ns}-intent-danger{
select{
box-shadow: 0 0 0 0 rgba(219, 55, 55, 0),
0 0 0 0 rgba(219, 55, 55, 0),
inset 0 0 0 1px #db3737,
inset 0 0 0 1px rgba(16, 22, 26, 0.15),
inset 0 1px 1px rgba(16, 22, 26, 0.2);
}
}
}
.bigcapital-datatable{
table {
text-align: left;
border-spacing: 0;
width: 100%;
thead{
th{
height: 48px;
padding: 0.5rem 1.5rem;
background: #F8FAFA;
font-size: 14px;
color: #666;
font-weight: 500;
border-bottom: 1px solid rgb(224, 224, 224);
}
}
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 0.5rem;
:last-child {
border-right: 0;
}
}
}
}
.financial-statement{
&__header{
padding: 30px;
background: #FDFDFD;
}
}
.make-journal-entries{
&__header{
padding: 25px 40px;
background: #fbfbfb;
}
&__table{
.bp3-form-group{
margin-bottom: 0;
}
table{
border: 1px solid transparent;
thead{
th.index{ width: 3%; }
th.account{ width: 22%; }
th.note{ width: 40%; }
th.credit{ width: 17.5%; }
th.debit{ width: 17.5%; }
}
th,
td{
border-right: 1px dotted #999;
}
th{
color: #444;
font-weight: 600;
border-bottom: 1px dotted #666;
}
td{
border-bottom: 1px dotted #999;
}
}
}
}
.financial-statement{
&__body{
padding-left: 20px;
padding-right: 20px;
}
}
.financial-sheet{
border: 1px solid #E2E2E2;
min-width: 640px;
width: 0;
margin-left: auto;
margin-right: auto;
padding: 20px;
margin-top: 40px;
&__title{
font-weight: 200;
font-size: 22px;
color: #222;
text-align: center;
}
&__sheet-type{
text-align: center;
}
&__date{
text-align: center;
}
&__table{
}
&__accounting-basis{
}
}
.filter-dropdown{
width: 500px;
&__body{
padding: 12px;
}
&__condition{
display: flex;
&:not(:first-of-type) {
padding-top: 8px;
border-top: 1px solid #e6e6e6;
margin-top: 8px;
}
}
.bp3-form-group{
padding-right: 16px;
margin-bottom: 0;
&:not(:last-of-type) {
padding-right: 15px;
}
}
&__footer{
border-top: 1px solid #e8e8e8;
padding: 5px 10px;
}
.form-group{
&--condition{ width: 25%; }
&--field{ width: 45%; }
&--compatator{ width: 30%; }
&--value{ width: 25%; }
}
}

51
client/src/style/components/data-table.scss Normal file
View File

@@ -0,0 +1,51 @@
.bigcapital-datatable{
table {
text-align: left;
border-spacing: 0;
width: 100%;
thead{
th{
height: 48px;
padding: 0.5rem 1.5rem;
background: #F8FAFA;
font-size: 14px;
color: #666;
font-weight: 500;
border-bottom: 1px solid rgb(224, 224, 224);
}
}
tr {
:last-child {
td {
border-bottom: 0;
}
}
}
th,
td {
margin: 0;
padding: 0.5rem;
:last-child {
border-right: 0;
}
}
tbody{
.#{$ns}-button--action{
background: #E6EFFB;
border: 0;
box-shadow: 0 0 0;
padding: 5px 15px;
}
}
}
}

9
client/src/style/components/dialog.scss Normal file
View File

@@ -0,0 +1,9 @@
// Dialog
.#{$ns}-dialog{
background: #fff;
&-header{
background: #ebf1f5;
}
}

8
client/src/style/components/tabs.scss Normal file
View File

@@ -0,0 +1,8 @@
// Tabs component.
.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{
height: 2px;
}
.#{$ns}-large > .#{$ns}-tab{
line-height: 50px;
font-size: 15px;
}

39
client/src/style/objects/form.scss Normal file
View File

@@ -0,0 +1,39 @@
.form{
&__floating-footer{
position: fixed;
bottom: 0;
left: 220px;
right: 0;
background: #fff;
padding: 14px 16px;
border-top: 1px solid #ececec;
}
}
// Form
label{
font-weight: 400;
}
.#{$ns}-input{
box-shadow: 0 0 0 0 rgba(19, 124, 189, 0),
0 0 0 0 rgba(19, 124, 189, 0),
inset 0 0 0 1px rgba(16, 22, 26, 0.1),
inset 0 1px 1px rgba(16, 22, 26, 0.15);
}
.#{$ns}-form-group{
&.#{$ns}-intent-danger{
select{
box-shadow: 0 0 0 0 rgba(219, 55, 55, 0),
0 0 0 0 rgba(219, 55, 55, 0),
inset 0 0 0 1px #db3737,
inset 0 0 0 1px rgba(16, 22, 26, 0.15),
inset 0 1px 1px rgba(16, 22, 26, 0.2);
}
}
}

9
client/src/style/objects/typography.scss Normal file
View File

@@ -0,0 +1,9 @@
.#{$ns}-heading{
font-weight: 300;
}
.divider{
border-top: 1px solid #e8e8e8;
height: 1px;
}

11
client/src/style/pages/account-form.scss Normal file
View File

@@ -0,0 +1,11 @@
// Dialog Account Form.
.dialog--account-form{
.#{$ns}-form-group{
.#{$ns}-label{
width: 130px;
}
}
}

25
client/src/style/pages/accounts-chart.scss Normal file
View File

@@ -0,0 +1,25 @@
.dashboard__insider--accounts-chart{
.e-grid{
.e-gridheader{
border-top: 0;
}
.account-normal{
.#{$ns}-icon{
color: #666;
padding-left: 15px;
}
}
.checkbox-row{
width: 0;
.#{$ns}-control{
margin: 0;
}
}
}
}

246
client/src/style/pages/dashboard.scss
View File

@@ -0,0 +1,246 @@
.dashboard{
display: flex;
height: 100vh;
&__topbar{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #F2EFEF;
&-right,
&-left{
display: flex;
}
&-actions{
}
&-sidebar-toggle{
display: flex;
align-items: center;
margin-left: 4px;
.#{$ns}-button{
color: #8E8E8E;
&,
&:hover,
&:focus{
border-radius: 0;
box-shadow: none;
background-color: transparent;
border: 0;
}
}
}
&-navbar{
display: flex;
align-items: center;
margin-right: 18px;
.#{$ns}-button{
color: #1552C8;
font-weight: 5000;
font-size: 14px;
&:hover,
&:focus{
background-color: rgba(178, 220, 253, 0.15);
}
.#{$ns}-icon{
color: #1552C8;
}
}
}
&-user{
display: flex;
align-items: center;
margin-right: 28px;
.#{$ns}-button{
background-size: contain;
border-radius: 50%;
height: 40px;
width: 40px;
&,
&:hover,
&:focus{
background-color: transparent;
border: 0;
box-shadow: none;
background-image: url(http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=400);
}
}
}
}
&__breadcrumbs{
display: flex;
margin-left: 16px;
align-items: center;
// Breadcrumbs component.
.#{$ns}-breadcrumbs-collapsed{
background: $light-gray3;
&:hover{
background: $light-gray2;
}
}
}
&__actions-bar{
border-bottom: 2px solid #EAEAEA;
.#{$ns}-navbar{
box-shadow: none;
&,
&-group{
height: 44px;
}
.#{$ns}-navbar-divider{
margin-left: 0;
margin-right: 0;
}
.#{$ns}-button{
color: #5C5C5C;
padding: 8px 12px;
&:hover{
background: rgba(167, 182, 194, 0.12);
color: #5C5C5C;
}
.#{$ns}-icon{
color: #666;
margin-right: 7px;
}
}
.button--table-views{
.#{$ns}-icon{
color: #1183DA;
}
}
}
}
&__breadcrumbs{
display: flex;
align-items: center;
margin-left: 1rem;
}
&__title{
align-items: center;;
display: flex;
margin-left: 6px;
h1{
font-size: 26px;
font-weight: 100;
margin: 0;
}
.sep{
margin-left: 12px;
margin-right: 12px;
color: #999;
border-left: 1px solid #d9d9d9;
width: 1px;
height: 25px;
}
h3{
font-size: 16px;
font-weight: 300;
color: #777;
margin: 0;
}
}
&-content{
width: calc(100% - 220px);
display: flex;
flex-direction: column;
}
&__insider{
height: 100%;
&--loading{
display: flex;
align-items: center;
justify-content: center;
}
}
&__page-content{
// padding: 22px;
}
&__preferences-topbar{
border-bottom: 1px solid #E5E5E5;
height: 70px;
padding: 0 22px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
h2{
font-size: 22px;
font-weight: 200;
margin: 0;
}
}
}
.tabs--dashboard-views{
.#{$ns}-tab{
color: #5C5C5C;
font-size: 14px;
line-height: 50px;
font-weight: 400;
padding: 0 14px;
margin-right: 0;
}
.#{$ns}-tab-indicator-wrapper{
.#{$ns}-tab-indicator{
height: 2px;
}
}
.button--new-view{
margin: 0;
height: 50px;
&,
&:hover,
&:active,
&:focus{
background: transparent;
border: 0;
box-shadow: 0 0 0;
}
.#{$ns}-icon{
color: #A7A7A7;
}
}
}
.navbar--dashboard-views{
box-shadow: 0 0 0;
border-bottom: 1px solid #EAEAEA;
}

17
client/src/style/pages/expense-form.scss Normal file
View File

@@ -0,0 +1,17 @@
.dashboard__insider--expense-form{
padding: 40px 20px;
.#{$ns}-form-group{
margin-bottom: 22px;
.#{$ns}-label{
min-width: 130px;
}
.#{$ns}-form-content{
width: 300px;
}
}
}

48
client/src/style/pages/financial-statements.scss Normal file
View File

@@ -0,0 +1,48 @@
.financial-statement{
&__header{
padding: 30px;
background: #FDFDFD;
}
&__body{
padding-left: 20px;
padding-right: 20px;
}
}
.financial-sheet{
border: 1px solid #E2E2E2;
min-width: 640px;
width: 0;
margin-left: auto;
margin-right: auto;
padding: 20px;
margin-top: 40px;
&__title{
font-weight: 200;
font-size: 22px;
color: #222;
text-align: center;
}
&__sheet-type{
text-align: center;
}
&__date{
text-align: center;
}
&__table{
}
&__accounting-basis{
}
}

39
client/src/style/pages/make-journal-entries.scss Normal file
View File

@@ -0,0 +1,39 @@
.make-journal-entries{
&__header{
padding: 25px 40px;
background: #fbfbfb;
}
&__table{
.bp3-form-group{
margin-bottom: 0;
}
table{
border: 1px solid transparent;
thead{
th.index{ width: 3%; }
th.account{ width: 22%; }
th.note{ width: 40%; }
th.credit{ width: 17.5%; }
th.debit{ width: 17.5%; }
}
th,
td{
border-right: 1px dotted #999;
}
th{
color: #444;
font-weight: 600;
border-bottom: 1px dotted #666;
}
td{
border-bottom: 1px dotted #999;
}
}
}
}

54
client/src/style/pages/preferences.scss
View File

@@ -0,0 +1,54 @@
.preferences{
&__inside-content--tabable{
margin-left: -25px;
margin-right: -25px;
}
&__inside-content{
.#{$ns}-tab-list{
border-bottom: 1px solid #E5E5E5;
padding-left: 15px;
.#{$ns}-tab{
font-weight: 300;
}
}
}
}
.preferences__sidebar{
background: #fdfdfd;
min-width: 210px;
max-width: 210px;
&-head{
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #E5E5E5;
height: 70px;
padding: 0 22px;
h2{
font-size: 22px;
font-weight: 200;
margin: 0;
}
}
&-menu{
padding: 0;
background: transparent;
.#{$ns}-menu-item{
padding: 10px 18px;
font-size: 15px;
font-weight: 300;
color: #333;
}
}
}

91
client/src/style/pages/view-form.scss
View File

@@ -0,0 +1,91 @@
.dashboard__insider--view-form{
padding-left: 25px;
padding-right: 25px;
.view-form--name-section{
margin-left: -25px;
margin-right: -25px;
}
}
.view-form{
&--name-section{
padding: 35px 28px;
background: #fbfafa;
margin-bottom: 22px;
.bp3-form-group.bp3-inline{
margin-bottom: 0;
}
}
&--logic-expression-section{
padding: 20px 25px;
margin: 1rem -25px 1.5rem;
background: #fbfafa;
.#{$ns}-form-group{
margin-bottom: 0;
}
}
.condition-number{
color: #666;
}
.#{$ns}-form-group.#{$ns}-inline{
.#{$ns}-label{
width: 200px;
}
.#{$ns}-form-content{
width: 100%;
}
}
.new-conditional-btn{
}
.dragable-columns{
&__items{
border: 1px solid #e1e1e1;
padding: 10px 8px;
height: 300px;
overflow: auto;
}
&__title{
color: #666;
}
}
.dragable-columns{
&__column{
.bp3-input-group .bp3-input{
border-radius: 3px 3px 0 0;
}
}
&__arrows{
text-align: center;
margin-top: 140px;
}
}
.dragable-resource-columns{
}
&__role-conditional{
margin-top: 1rem;
}
}

107
client/src/style/views/Sidebar.scss
View File

@@ -0,0 +1,107 @@
$sidebar-background: #01194E;
$sidebar-text-color: #fff;
$sidebar-width: 220px;
$sidebar-menu-item-color: #E9EBF7;
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
.sidebar{
background: $sidebar-background;
color: $sidebar-text-color;
width: $sidebar-width;
&__head{
padding: 16px 10px;
&-company-meta{
.company-name{
font-size: 16px;
font-weight: 200;
margin-bottom: 5px;
}
.company-meta{
color: #A7AFC2;
font-size: 12px;
}
}
}
&-menu{
background: transparent;
padding: 0;
min-width: $sidebar-width;
border-radius: 0;
.#{$ns}-menu-item{
color: $sidebar-menu-item-color;
border-radius: 0;
padding: 10px 16px;
font-size: 15px;
font-weight: 200;
&:hover{
background: #012470;
}
&:focus,
&:active{
background: #01143e;
}
> .#{$ns}-icon{
color: #767B9B;
margin-right: 12px;
margin-top: 0;
}
> .#{$ns}-icon-caret-right{
margin-right: -2px;
margin-top: 2px;
color: #767B9B;
}
}
.#{$ns}-submenu{
.#{$ns}-menu{
padding: 10px 0;
margin: 0;
background: $sidebar-popover-submenu-bg;
border-radius: 0;
&-item{
padding-top: 7px;
padding-bottom: 7px;
padding-left: 16px;
padding-right: 16px;
font-size: 14px;
&,
&:hover,
&:active,
&:focus{
color: #fff;
background: transparent;
}
}
}
.#{$ns}-popover{
padding: 0;
&-content{
box-shadow: 0 0 0;
}
}
}
.#{$ns}-popover-target.#{$ns}-popover-open .#{$ns}-menu-item{
color: $sidebar-menu-item-color;
}
.#{$ns}-menu-divider{
border-top-color: #183C86;
margin-left: 0;
margin-right: 0;
}
}
}

38
client/src/style/views/filter-dropdown.scss Normal file
View File

@@ -0,0 +1,38 @@
.filter-dropdown{
width: 500px;
&__body{
padding: 12px;
}
&__condition{
display: flex;
&:not(:first-of-type) {
padding-top: 8px;
border-top: 1px solid #e6e6e6;
margin-top: 8px;
}
}
.bp3-form-group{
padding-right: 16px;
margin-bottom: 0;
&:not(:last-of-type) {
padding-right: 15px;
}
}
&__footer{
border-top: 1px solid #e8e8e8;
padding: 5px 10px;
}
.form-group{
&--condition{ width: 25%; }
&--field{ width: 45%; }
&--compatator{ width: 30%; }
&--value{ width: 25%; }
}
}