mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 13:20:31 +00:00
feat: Optimize SCSS architecture.
This commit is contained in:
a.bouhuolia
@@ -1,129 +1,49 @@
|
||||
@import './normalize.scss';
|
||||
|
||||
$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
|
||||
0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
|
||||
|
||||
@import '@blueprintjs/core/src/common/_variables.scss';
|
||||
// @import "@blueprintjs/core/src/common/colors.scss";
|
||||
|
||||
$blue1: #0069ff;
|
||||
$blue2: #0052ff;
|
||||
$blue3: rgb(0, 82, 204);
|
||||
$pt-link-color: $blue3;
|
||||
$pt-intent-primary: $blue1;
|
||||
$menu-item-color-hover: $light-gray4;
|
||||
$menu-item-color-active: $light-gray3;
|
||||
|
||||
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
|
||||
|
||||
$sidebar-zindex: 15;
|
||||
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
|
||||
|
||||
$button-box-shadow: 0 0 0 !default;
|
||||
$button-box-shadow-active: 0 0 0 !default;
|
||||
$button-intent-box-shadow: 0 0 0 !default;
|
||||
$button-intent-box-shadow-active: 0 0 0 !default;
|
||||
|
||||
$button-background-color-disabled: #E9ECEF !default;
|
||||
$button-background-color: #E6EFFB !default;
|
||||
$button-background-color-hover: #CFDCEE !default;
|
||||
@import './Base.scss';
|
||||
|
||||
// Blueprint framework.
|
||||
@import '@blueprintjs/core/src/blueprint.scss';
|
||||
@import '@blueprintjs/datetime/src/blueprint-datetime.scss';
|
||||
|
||||
// Bootstrap
|
||||
// @import '~bootstrap/scss/bootstrap';
|
||||
|
||||
@import 'basscss';
|
||||
|
||||
@import 'functions';
|
||||
|
||||
// Objects
|
||||
@import 'objects/form';
|
||||
@import 'objects/typography';
|
||||
@import 'objects/buttons';
|
||||
@import 'objects/Bigcapital';
|
||||
|
||||
// Components
|
||||
@import 'components/data-table';
|
||||
@import 'components/dialog';
|
||||
@import 'components/custom-scrollbar';
|
||||
@import 'components/CustomScrollbar';
|
||||
@import 'components/dragzone';
|
||||
@import 'components/pagination';
|
||||
@import 'components/resizer';
|
||||
@import 'components/CloudSpinner';
|
||||
@import 'components/Alert';
|
||||
@import 'components/Card';
|
||||
@import 'components/Toast';
|
||||
@import 'components/PageForm';
|
||||
@import 'components/Tooltip';
|
||||
|
||||
// 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';
|
||||
@import 'pages/manual-journals';
|
||||
@import 'pages/item-category';
|
||||
@import 'pages/items';
|
||||
@import 'pages/items-categories';
|
||||
@import 'pages/invite-form';
|
||||
@import 'pages/currency';
|
||||
@import 'pages/invite-user';
|
||||
@import 'pages/exchange-rate';
|
||||
@import 'pages/customer';
|
||||
@import 'pages/billing';
|
||||
@import 'pages/register-wizard-page';
|
||||
@import 'pages/register-organizaton';
|
||||
@import 'pages/bills';
|
||||
@import 'pages/estimates';
|
||||
@import 'pages/invoice-form';
|
||||
@import 'pages/receipt-form';
|
||||
@import 'pages/payment-made';
|
||||
@import 'pages/payment-receive';
|
||||
|
||||
// Views
|
||||
@import 'views/filter-dropdown';
|
||||
@import 'views/sidebar';
|
||||
// @import 'pages/estimate';
|
||||
|
||||
|
||||
.App {
|
||||
min-width: 960px;
|
||||
}
|
||||
|
||||
.#{$ns}-tooltip {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-icon='bigcapital'] {
|
||||
path {
|
||||
fill: #004dd0;
|
||||
}
|
||||
.path-1,
|
||||
.path-13 {
|
||||
fill: #2d95fd;
|
||||
}
|
||||
}
|
||||
|
||||
.bigcapital--alt {
|
||||
svg {
|
||||
path,
|
||||
.path-13,
|
||||
.path-1 {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
// =======
|
||||
body.authentication {
|
||||
background-color: #fcfdff;
|
||||
}
|
||||
|
||||
body.hide-scrollbar .Pane2{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bp3-toast {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.select-list--fill-popover {
|
||||
position: relative;
|
||||
@@ -149,36 +69,12 @@ body.hide-scrollbar .Pane2{
|
||||
.bp3-datepicker-caption .bp3-html-select::after {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-left: 6px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
.bp3-icon {
|
||||
color: #a1b2c5;
|
||||
}
|
||||
|
||||
.bp3-popover-target:hover .bp3-icon {
|
||||
color: #90a1b5;
|
||||
}
|
||||
.bp3-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-select-popover .bp3-menu {
|
||||
max-height: 300px;
|
||||
max-width: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pt-tooltip {
|
||||
.pt-popover-content {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group .bp3-label {
|
||||
.hint {
|
||||
.bp3-popover-wrapper {
|
||||
@@ -196,408 +92,7 @@ body.hide-scrollbar .Pane2{
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
|
||||
.bigcapital-loading{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
||||
.center{
|
||||
width: auto;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text{
|
||||
margin-top: 12px;
|
||||
opacity: 0.85;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// .page-form
|
||||
// .page-form__header
|
||||
// .page-form__content
|
||||
// .page-form__floating-actions
|
||||
.page-form{
|
||||
$self: '.page-form';
|
||||
padding-bottom: 20px;
|
||||
|
||||
|
||||
&__floating-actions{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 14px 18px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&--strip{
|
||||
|
||||
#{$self}__header-fields{
|
||||
width: 85%;
|
||||
}
|
||||
#{$self}__body,
|
||||
#{$self}__footer{
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
#{$self}__header{
|
||||
background-color: #fbfbfb;
|
||||
padding: 30px 20px 0;
|
||||
border-bottom: 1px solid #d2dce2;
|
||||
|
||||
.bp3-form-group.bp3-inline label.bp3-label{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
#{$self}__body{
|
||||
padding-top: 15px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
#{$self}__footer{
|
||||
margin: 25px 0 0 0;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.datatable-editor{
|
||||
|
||||
.bp3-form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.table {
|
||||
border: 1px solid #d2dce2;
|
||||
border-left: transparent;
|
||||
|
||||
.th,
|
||||
.td {
|
||||
border-left: 1px solid #e2e2e2;
|
||||
|
||||
&.index {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
border-left: 1px solid #d2dce2;
|
||||
}
|
||||
}
|
||||
|
||||
.thead {
|
||||
.tr .th {
|
||||
padding: 10px 10px;
|
||||
background-color: #f0f2f8;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1c1940;
|
||||
|
||||
&.index > div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tbody {
|
||||
.tr .td {
|
||||
padding: 5px;
|
||||
border-bottom: 0;
|
||||
border-top: 1px dashed #AAA;
|
||||
min-height: 42px;
|
||||
|
||||
&.index {
|
||||
background-color: #f0f2f8;
|
||||
|
||||
> span {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tr {
|
||||
.bp3-form-group:not(.bp3-intent-danger) .bp3-input,
|
||||
.form-group--select-list .bp3-button {
|
||||
border-color: #ffffff;
|
||||
color: #222;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bp3-form-group:not(.bp3-intent-danger) .bp3-input{
|
||||
border-radius: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
|
||||
&:focus{
|
||||
box-shadow: 0 0 0 2px #116cd0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--select-list .bp3-button{
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--select-list,
|
||||
.bp3-form-group {
|
||||
&.bp3-intent-danger {
|
||||
.bp3-button:not(.bp3-minimal),
|
||||
.bp3-input {
|
||||
border-color: #F7B6B6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type{
|
||||
.td{
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.td {
|
||||
|
||||
.bp3-button,
|
||||
.bp3-input-group {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.td.actions {
|
||||
.bp3-button {
|
||||
background-color: transparent;
|
||||
color: #e66d6d;
|
||||
|
||||
&:hover {
|
||||
color: #c23030;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.row--total {
|
||||
|
||||
.account.td,
|
||||
.debit.td,
|
||||
.credit.td {
|
||||
> span {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
.debit.td,
|
||||
.credit.td {
|
||||
> span {
|
||||
font-weight: 600;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.td {
|
||||
&.note {
|
||||
.bp3-form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.th {
|
||||
color: #444;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px dotted #666;
|
||||
}
|
||||
|
||||
.td {
|
||||
border-bottom: 1px dotted #999;
|
||||
}
|
||||
|
||||
.actions.td {
|
||||
.bp3-button {
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table{
|
||||
.tbody{
|
||||
.tr .td.actions .bp3-button{
|
||||
background-color: transparent;
|
||||
color: #e66d6d;
|
||||
|
||||
svg{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions{
|
||||
margin-top: 12px;
|
||||
|
||||
.bp3-button{
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.button--clear-lines{
|
||||
|
||||
&.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
|
||||
background-color: #fcefef;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.has-total-row{
|
||||
|
||||
.table .tbody-inner .tr:last-of-type{
|
||||
|
||||
.td{
|
||||
border-top-width: 2px;
|
||||
border-top-color: #E9E9EF;
|
||||
border-top-style: solid;
|
||||
min-height: 40px;
|
||||
|
||||
&:not(.index) {
|
||||
background-color: #FCFCFD;
|
||||
}
|
||||
|
||||
&.index span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cloud-spinner{
|
||||
position: relative;
|
||||
|
||||
&.is-loading:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.bp3-spinner{
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
&:not(.is-loading) .bp3-spinner{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.big-amount{
|
||||
|
||||
&__label{
|
||||
color: #5d6f90;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
&__number{
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
margin-top: 6px;
|
||||
color: #343463;
|
||||
line-height: 1;
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bp3-alert{
|
||||
.bp3-alert-footer{
|
||||
.bp3-button{
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datatable-empty-status{
|
||||
max-width: 550px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 200px;
|
||||
|
||||
&__title{
|
||||
font-size: 20px;
|
||||
color: #2c3a5d;
|
||||
font-weight: 600;
|
||||
margin-left: auto;
|
||||
margin-bottom: 10px;
|
||||
margin-right: auto;
|
||||
margin-top: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
&__desc{
|
||||
font-size: 16px;
|
||||
color: #1f3255;
|
||||
opacity: 0.8;
|
||||
line-height: 1.6;
|
||||
}
|
||||
&__actions{
|
||||
margin-top: 26px;
|
||||
|
||||
.bp3-button{
|
||||
min-height: 36px;
|
||||
|
||||
& + .bp3-button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone-container{
|
||||
max-width: 250px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.card{
|
||||
background: #fff;
|
||||
border: 1px solid #d2dce2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.form-group--select-list{
|
||||
button{
|
||||
justify-content: start;
|
||||
|
||||
3
client/src/style/Base.scss
Normal file
3
client/src/style/Base.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
|
||||
@import 'variables';
|
||||
@import 'functions';
|
||||
7
client/src/style/components/Alert.scss
Normal file
7
client/src/style/components/Alert.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.bp3-alert{
|
||||
.bp3-alert-footer{
|
||||
.bp3-button{
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
client/src/style/components/BigAmount.scss
Normal file
20
client/src/style/components/BigAmount.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
|
||||
.big-amount{
|
||||
|
||||
&__label{
|
||||
color: #5d6f90;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
}
|
||||
&__number{
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 400;
|
||||
margin-top: 6px;
|
||||
color: #343463;
|
||||
line-height: 1;
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
19
client/src/style/components/BigcapitalLoading.scss
Normal file
19
client/src/style/components/BigcapitalLoading.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
.bigcapital-loading {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
||||
.center {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 12px;
|
||||
opacity: 0.85;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
5
client/src/style/components/Card.scss
Normal file
5
client/src/style/components/Card.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
|
||||
.card{
|
||||
background: #fff;
|
||||
border: 1px solid #d2dce2;
|
||||
}
|
||||
28
client/src/style/components/CloudSpinner.scss
Normal file
28
client/src/style/components/CloudSpinner.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
|
||||
|
||||
.cloud-spinner{
|
||||
position: relative;
|
||||
|
||||
&.is-loading:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.bp3-spinner{
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
&:not(.is-loading) .bp3-spinner{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,27 +1,26 @@
|
||||
@import 'src/style/Base.scss';
|
||||
|
||||
.bigcapital-datatable{
|
||||
.bigcapital-datatable {
|
||||
display: block;
|
||||
|
||||
.dashboard__page-content &{
|
||||
|
||||
.table .thead{
|
||||
.th{
|
||||
border-bottom-color: #D2DDE2;
|
||||
.dashboard__page-content & {
|
||||
.table .thead {
|
||||
.th {
|
||||
border-bottom-color: #d2dde2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
text-align: left;
|
||||
border-spacing: 0;
|
||||
min-width: 100%;
|
||||
display: block;
|
||||
|
||||
.thead{
|
||||
.thead {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.th{
|
||||
.th {
|
||||
padding: 0.6rem 0.5rem;
|
||||
background: #fafafa;
|
||||
font-size: 14px;
|
||||
@@ -29,7 +28,7 @@
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgb(224, 224, 224);
|
||||
}
|
||||
.sort-icon{
|
||||
.sort-icon {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: relative;
|
||||
@@ -37,12 +36,12 @@
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
|
||||
&--desc{
|
||||
&--desc {
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 6px solid #666;
|
||||
}
|
||||
&--asc{
|
||||
&--asc {
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 6px solid #666;
|
||||
@@ -53,7 +52,7 @@
|
||||
.tr {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
|
||||
|
||||
&:last-child {
|
||||
.td {
|
||||
border-bottom: 0;
|
||||
@@ -75,7 +74,7 @@
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.bp3-control{
|
||||
.bp3-control {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.resizer {
|
||||
@@ -88,94 +87,94 @@
|
||||
top: 0;
|
||||
transform: translateX(50%);
|
||||
z-index: 1;
|
||||
touch-action:none;
|
||||
touch-action: none;
|
||||
|
||||
&.isResizing {
|
||||
// background: red;
|
||||
}
|
||||
|
||||
.inner-resizer{
|
||||
.inner-resizer {
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
border-left: 1px solid #ececec;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&.isResizing .inner-resizer{
|
||||
background: #1183DA;
|
||||
&.isResizing .inner-resizer {
|
||||
background: #1183da;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-control.bp3-checkbox .bp3-control-indicator{
|
||||
.bp3-control.bp3-checkbox .bp3-control-indicator {
|
||||
border: 2px solid #d7d7d7;
|
||||
|
||||
&,
|
||||
&:hover{
|
||||
&:hover {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-control.bp3-checkbox{
|
||||
.bp3-control.bp3-checkbox {
|
||||
input:checked ~ .bp3-control-indicator,
|
||||
input:indeterminate ~ .bp3-control-indicator,{
|
||||
input:indeterminate ~ .bp3-control-indicator {
|
||||
border-color: #0052ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tbody{
|
||||
.tbody {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.tbody-inner{
|
||||
> .loading{
|
||||
.tbody-inner {
|
||||
> .loading {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.tr .td{
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
.tr .td {
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
align-items: center;
|
||||
color: #141720;
|
||||
|
||||
.placeholder{
|
||||
color: #A0A0A0;
|
||||
.placeholder {
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
.bp3-form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.tr:hover .td{
|
||||
}
|
||||
.tr:hover .td {
|
||||
background: #f3f7fc;
|
||||
}
|
||||
|
||||
.tr.is-context-menu-active .td{
|
||||
background: #F3FAFC;
|
||||
.tr.is-context-menu-active .td {
|
||||
background: #f3fafc;
|
||||
}
|
||||
.td.actions .#{$ns}-button{
|
||||
background: #E6EFFB;
|
||||
.td.actions .#{$ns}-button {
|
||||
background: #e6effb;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding: 5px 15px;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: #CFDCEE;
|
||||
&:focus {
|
||||
background-color: #cfdcee;
|
||||
}
|
||||
|
||||
svg{
|
||||
color: #425361
|
||||
svg {
|
||||
color: #425361;
|
||||
}
|
||||
|
||||
.bp3-icon-more-h-16{
|
||||
.bp3-icon-more-h-16 {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.tr.no-results{
|
||||
.td{
|
||||
.tr.no-results {
|
||||
.td {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
@@ -183,14 +182,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
> .loading{
|
||||
> .loading {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.tr .th,
|
||||
.tr .td{
|
||||
.expand-toggle{
|
||||
.tr .td {
|
||||
.expand-toggle {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 8px 0 0;
|
||||
@@ -198,7 +197,7 @@
|
||||
margin: auto 0;
|
||||
margin-left: 4px;
|
||||
|
||||
.arrow-right{
|
||||
.arrow-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
@@ -206,10 +205,10 @@
|
||||
border-left: 8px solid #acacac;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.arrow-down{
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
.arrow-down {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 8px solid #acacac;
|
||||
@@ -219,27 +218,25 @@
|
||||
}
|
||||
}
|
||||
|
||||
.no-results{
|
||||
.no-results {
|
||||
color: #666;
|
||||
|
||||
.td{
|
||||
.td {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-sticky-header{
|
||||
|
||||
.thead{
|
||||
.tr .th{
|
||||
&.has-sticky-header {
|
||||
.thead {
|
||||
.tr .th {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-sticky {
|
||||
|
||||
.thead,
|
||||
.tfoot {
|
||||
position: sticky;
|
||||
@@ -273,38 +270,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.has-virtualized-rows{
|
||||
.tbody{
|
||||
&.has-virtualized-rows {
|
||||
.tbody {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&--financial-report{
|
||||
|
||||
.table {
|
||||
.thead{
|
||||
.tr .th{
|
||||
background: transparent;
|
||||
border-top: 1px solid #666;
|
||||
border-bottom: 1px solid #666;
|
||||
|
||||
padding: 8px 0.4rem;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
.tbody{
|
||||
.tr .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tr:not(:first-child) .td{
|
||||
border-top: 1px dotted #CCC;
|
||||
}
|
||||
.tr:last-child .td{
|
||||
border-bottom: 1px dotted #CCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
207
client/src/style/components/DataTable/DataTableEditable.scss
Normal file
207
client/src/style/components/DataTable/DataTableEditable.scss
Normal file
@@ -0,0 +1,207 @@
|
||||
.datatable-editor {
|
||||
.bp3-form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.table {
|
||||
border: 1px solid #d2dce2;
|
||||
border-left: transparent;
|
||||
|
||||
.th,
|
||||
.td {
|
||||
border-left: 1px solid #e2e2e2;
|
||||
|
||||
&.index {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
border-left: 1px solid #d2dce2;
|
||||
}
|
||||
}
|
||||
|
||||
.thead {
|
||||
.tr .th {
|
||||
padding: 10px 10px;
|
||||
background-color: #f0f2f8;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1c1940;
|
||||
|
||||
&.index > div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tbody {
|
||||
.tr .td {
|
||||
padding: 5px;
|
||||
border-bottom: 0;
|
||||
border-top: 1px dashed #aaa;
|
||||
min-height: 42px;
|
||||
|
||||
&.index {
|
||||
background-color: #f0f2f8;
|
||||
|
||||
> span {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tr {
|
||||
.bp3-form-group:not(.bp3-intent-danger) .bp3-input,
|
||||
.form-group--select-list .bp3-button {
|
||||
border-color: #ffffff;
|
||||
color: #222;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.bp3-form-group:not(.bp3-intent-danger) .bp3-input {
|
||||
border-radius: 2px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px #116cd0;
|
||||
}
|
||||
}
|
||||
.form-group--select-list .bp3-button {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.form-group--select-list,
|
||||
.bp3-form-group {
|
||||
&.bp3-intent-danger {
|
||||
.bp3-button:not(.bp3-minimal),
|
||||
.bp3-input {
|
||||
border-color: #f7b6b6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
.td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.td {
|
||||
.bp3-button,
|
||||
.bp3-input-group {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.td.actions {
|
||||
.bp3-button {
|
||||
background-color: transparent;
|
||||
color: #e66d6d;
|
||||
|
||||
&:hover {
|
||||
color: #c23030;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.row--total {
|
||||
.account.td,
|
||||
.debit.td,
|
||||
.credit.td {
|
||||
> span {
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
.debit.td,
|
||||
.credit.td {
|
||||
> span {
|
||||
font-weight: 600;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
.td {
|
||||
&.note {
|
||||
.bp3-form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.th {
|
||||
color: #444;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px dotted #666;
|
||||
}
|
||||
|
||||
.td {
|
||||
border-bottom: 1px dotted #999;
|
||||
}
|
||||
|
||||
.actions.td {
|
||||
.bp3-button {
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
.tbody {
|
||||
.tr .td.actions .bp3-button {
|
||||
background-color: transparent;
|
||||
color: #e66d6d;
|
||||
|
||||
svg {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
margin-top: 12px;
|
||||
|
||||
.bp3-button {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.button--clear-lines {
|
||||
&.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
background-color: #fcefef;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-total-row {
|
||||
.table .tbody-inner .tr:last-of-type {
|
||||
.td {
|
||||
border-top-width: 2px;
|
||||
border-top-color: #e9e9ef;
|
||||
border-top-style: solid;
|
||||
min-height: 40px;
|
||||
|
||||
&:not(.index) {
|
||||
background-color: #fcfcfd;
|
||||
}
|
||||
|
||||
&.index span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.datatable-empty-status {
|
||||
max-width: 550px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
margin-top: 200px;
|
||||
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
color: #2c3a5d;
|
||||
font-weight: 600;
|
||||
margin-left: auto;
|
||||
margin-bottom: 10px;
|
||||
margin-right: auto;
|
||||
margin-top: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
&__desc {
|
||||
font-size: 16px;
|
||||
color: #1f3255;
|
||||
opacity: 0.8;
|
||||
line-height: 1.6;
|
||||
}
|
||||
&__actions {
|
||||
margin-top: 26px;
|
||||
|
||||
.bp3-button {
|
||||
min-height: 36px;
|
||||
|
||||
& + .bp3-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -94,9 +94,7 @@
|
||||
border-top-width: 4px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&__goto-control{
|
||||
@@ -1,3 +1,4 @@
|
||||
@import '../../Base.scss';
|
||||
|
||||
// Dialog
|
||||
.#{$ns}-dialog{
|
||||
16
client/src/style/components/Hint.scss
Normal file
16
client/src/style/components/Hint.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.hint {
|
||||
margin-left: 6px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
.bp3-icon {
|
||||
color: #a1b2c5;
|
||||
}
|
||||
|
||||
.bp3-popover-target:hover .bp3-icon {
|
||||
color: #90a1b5;
|
||||
}
|
||||
.bp3-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
49
client/src/style/components/PageForm.scss
Normal file
49
client/src/style/components/PageForm.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
// .page-form
|
||||
// > .page-form__header
|
||||
// > .page-form__content
|
||||
// > .page-form__floating-actions
|
||||
.page-form {
|
||||
$self: '.page-form';
|
||||
padding-bottom: 20px;
|
||||
|
||||
&__floating-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 14px 18px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
&--strip {
|
||||
#{$self}__header-fields {
|
||||
width: 85%;
|
||||
}
|
||||
#{$self}__body,
|
||||
#{$self}__footer {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
#{$self}__header {
|
||||
background-color: #fbfbfb;
|
||||
padding: 30px 20px 0;
|
||||
border-bottom: 1px solid #d2dce2;
|
||||
|
||||
.bp3-form-group.bp3-inline label.bp3-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
#{$self}__body {
|
||||
padding-top: 15px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
#{$self}__footer {
|
||||
margin: 25px 0 0 0;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
client/src/style/components/Toast.scss
Normal file
3
client/src/style/components/Toast.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.bp3-toast {
|
||||
box-shadow: none;
|
||||
}
|
||||
11
client/src/style/components/Tooltip.scss
Normal file
11
client/src/style/components/Tooltip.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
.pt-tooltip {
|
||||
.pt-popover-content {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-tooltip {
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -1,30 +1,33 @@
|
||||
|
||||
.dropzone{
|
||||
.dropzone {
|
||||
flex: 1 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 18px;
|
||||
border-width: 1px;
|
||||
border-color: #AFAFAF;
|
||||
border-color: #afafaf;
|
||||
border-style: dashed;
|
||||
color: #999;
|
||||
outline: none;
|
||||
transition: border .24s ease-in-out;
|
||||
transition: border 0.24s ease-in-out;
|
||||
font-size: 14px;
|
||||
|
||||
p{
|
||||
p {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone-thumbs{
|
||||
.dropzone-container {
|
||||
max-width: 250px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.dropzone-thumbs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.dropzone-thumb{
|
||||
.dropzone-thumb {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
@@ -34,14 +37,14 @@
|
||||
width: 100px;
|
||||
padding: 2px;
|
||||
|
||||
img{
|
||||
img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
button{
|
||||
button {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: #fff;
|
||||
@@ -55,20 +58,20 @@
|
||||
left: -5px;
|
||||
visibility: hidden;
|
||||
|
||||
.bp3-icon{
|
||||
.bp3-icon {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover button{
|
||||
&:hover button {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone-hint{
|
||||
.dropzone-hint {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,4 @@
|
||||
$sidebar-background: #01194e;
|
||||
$sidebar-text-color: #fff;
|
||||
$sidebar-width: 100%;
|
||||
$sidebar-menu-item-color: rgba(255, 255, 255, 0.9);
|
||||
$sidebar-menu-item-color-active: rgb(255, 255, 255);
|
||||
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
$sidebar-menu-label-color: rgba(255, 255, 255, 0.5);
|
||||
$sidebar-submenu-item-color: rgba(255, 255, 255, 0.6);
|
||||
$sidebar-submenu-item-hover-color: rgba(255, 255, 255, 0.85);
|
||||
$sidebar-logo-opacity: 0.55;
|
||||
$sidebar-submenu-item-bg-color: #01287d;
|
||||
@import 'src/style/Base.scss';
|
||||
|
||||
.sidebar {
|
||||
background: $sidebar-background;
|
||||
@@ -19,11 +9,11 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
|
||||
.ScrollbarsCustom-Track {
|
||||
&.ScrollbarsCustom-TrackY,
|
||||
&.ScrollbarsCustom-TrackX{
|
||||
&.ScrollbarsCustom-TrackX {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
.ScrollbarsCustom-Thumb{
|
||||
.ScrollbarsCustom-Thumb {
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
@@ -31,27 +21,29 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ScrollbarsCustom-Thumb{
|
||||
.ScrollbarsCustom-Thumb {
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__head{
|
||||
padding: 16px 12px;
|
||||
|
||||
&-logo{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
|
||||
svg{
|
||||
opacity: $sidebar-logo-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__head {
|
||||
padding: 18px;
|
||||
|
||||
&__scroll-wrapper{
|
||||
&-logo {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
|
||||
svg {
|
||||
opacity: $sidebar-logo-opacity;
|
||||
}
|
||||
}
|
||||
.sidebar__head-logo{
|
||||
transition: transform 0.05s ease-in-out;
|
||||
}
|
||||
}
|
||||
&__scroll-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -78,7 +70,6 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
&:active {
|
||||
background: #01143e;
|
||||
}
|
||||
|
||||
> .#{$ns}-icon {
|
||||
color: #767b9b;
|
||||
margin-right: 16px;
|
||||
@@ -89,22 +80,24 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
margin-top: 3px;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
&-labeler{
|
||||
&-labeler {
|
||||
display: block;
|
||||
color: $sidebar-menu-label-color;
|
||||
font-size: 12px;
|
||||
padding: 6px 18px;
|
||||
font-size: 11px;
|
||||
padding: 8px 18px;
|
||||
margin-top: 4px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
&:hover .bp3-button.menu-item__add-btn{
|
||||
&:hover .bp3-button.menu-item__add-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-submenu {
|
||||
.#{$ns}-collapse {
|
||||
|
||||
&-body {
|
||||
background-color: rgb(11, 34, 85);
|
||||
padding-bottom: 6px;
|
||||
@@ -120,7 +113,7 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
background: transparent;
|
||||
color: $sidebar-submenu-item-hover-color;
|
||||
}
|
||||
&.bp3-active{
|
||||
&.bp3-active {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -137,26 +130,30 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
color: $sidebar-menu-item-color;
|
||||
}
|
||||
.#{$ns}-menu-divider {
|
||||
border-top-color: rgba(255, 255, 255, 0.15);
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
color: #6b708c;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.#{$ns}-menu-spacer{
|
||||
.#{$ns}-menu-spacer {
|
||||
margin: 4px 0;
|
||||
height: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&--mini-sidebar{
|
||||
&--mini-sidebar {
|
||||
position: fixed;
|
||||
white-space: nowrap;
|
||||
width: 50px;
|
||||
|
||||
.sidebar__head{
|
||||
.sidebar__head-logo{
|
||||
transform: translate(-6px, 0);
|
||||
}
|
||||
}
|
||||
// Hide text of bigcapital logo.
|
||||
.sidebar__head-logo{
|
||||
|
||||
.bp3-icon-bigcapital{
|
||||
path{
|
||||
.sidebar__head-logo {
|
||||
.bp3-icon-bigcapital {
|
||||
path {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
path:not(.path-1):not(.path-2) {
|
||||
@@ -165,37 +162,38 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__menu{
|
||||
.sidebar__menu {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar__scroll-wrapper{
|
||||
.sidebar__scroll-wrapper {
|
||||
background: $sidebar-background;
|
||||
transition: min-width 0.15s ease-in-out;
|
||||
min-width: 50px;
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
min-width: 190px;
|
||||
|
||||
.sidebar__head-logo{
|
||||
|
||||
.bp3-icon-bigcapital{
|
||||
.sidebar__head-logo {
|
||||
transform: translate(0px, 0);
|
||||
|
||||
.bp3-icon-bigcapital {
|
||||
path:not(.path-1):not(.path-2) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar__menu{
|
||||
.sidebar__menu {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button.menu-item__add-btn{
|
||||
.bp3-button.menu-item__add-btn {
|
||||
width: auto;
|
||||
|
||||
|
||||
padding: 2px;
|
||||
margin-right: 0px;
|
||||
position: relative;
|
||||
@@ -204,28 +202,27 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
display: none;
|
||||
vertical-align: top;
|
||||
|
||||
&:not([class*="bp3-intent-"]):not(.bp3-minimal):not(:disabled){
|
||||
|
||||
.bp3-icon{
|
||||
&:not([class*='bp3-intent-']):not(.bp3-minimal):not(:disabled) {
|
||||
.bp3-icon {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
&,
|
||||
&:hover{
|
||||
&:hover {
|
||||
min-height: auto;
|
||||
min-width: auto;
|
||||
outline: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.12);
|
||||
|
||||
.bp3-icon{
|
||||
.bp3-icon {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bp3-icon{
|
||||
.bp3-icon {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
//
|
||||
// Financial sheet - Drawer header.
|
||||
// --------------------
|
||||
.financial-header-drawer {
|
||||
padding: 25px 26px 25px;
|
||||
position: absolute;
|
||||
top: 101px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.is-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.row {
|
||||
.col {
|
||||
max-width: 400px;
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-drawer {
|
||||
box-shadow: 0 0 0 transparent;
|
||||
max-height: 550px;
|
||||
height: 100%;
|
||||
padding-bottom: 49px;
|
||||
|
||||
> form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
height: 100%;
|
||||
}
|
||||
.bp3-drawer-backdrop {
|
||||
background-color: rgba(2, 9, 19, 0.65);
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group {
|
||||
margin-bottom: 22px;
|
||||
|
||||
label.bp3-label {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button.button--submit-filter {
|
||||
min-height: 34px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.radio-group---accounting-basis {
|
||||
.bp3-label {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tabs {
|
||||
height: 100%;
|
||||
|
||||
&.bp3-vertical > .bp3-tab-panel {
|
||||
flex: 1 0 0;
|
||||
border-top: 24px solid transparent;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tabs.bp3-vertical {
|
||||
flex: 1 0 0;
|
||||
|
||||
.bp3-tab-list {
|
||||
width: 220px;
|
||||
border-right: 1px solid #c3cdd5;
|
||||
padding-top: 10px;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.bp3-tab-indicator-wrapper {
|
||||
width: 100%;
|
||||
|
||||
.bp3-tab-indicator {
|
||||
border-left: 3px solid #0350f8;
|
||||
background-color: #edf5ff;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tab {
|
||||
color: #333;
|
||||
line-height: 45px;
|
||||
border-radius: 0;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tab-panel {
|
||||
}
|
||||
|
||||
&__footer {
|
||||
background-color: #ecf0f3;
|
||||
border-top: 1px solid #c3cdd5;
|
||||
padding: 8px;
|
||||
padding-left: 230px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: -0.85rem;
|
||||
margin-right: -0.85rem;
|
||||
|
||||
.col {
|
||||
padding-left: 0.85rem;
|
||||
padding-right: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
// Financial sheet.
|
||||
// -----------------------
|
||||
.financial-sheet {
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
min-width: 640px;
|
||||
width: auto;
|
||||
padding: 30px 18px;
|
||||
max-width: 100%;
|
||||
margin: 35px auto;
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #464646;
|
||||
text-align: center;
|
||||
}
|
||||
&__sheet-type {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&__date {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&__table {
|
||||
margin-top: 24px;
|
||||
|
||||
.table {
|
||||
.tbody,
|
||||
.thead {
|
||||
.tr .td,
|
||||
.tr .th {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tr.no-results {
|
||||
.td {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__inner {
|
||||
&.is-loading {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__basis {
|
||||
color: #888;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
padding-top: 18px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.dashboard__loading-indicator {
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
}
|
||||
&--expended {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&--minimal {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
|
||||
.financial-sheet {
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
&__title + .financial-sheet__date {
|
||||
margin-top: 8px;
|
||||
}
|
||||
&__table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-full-width {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.financial-statement {
|
||||
&__header {
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -22,7 +22,6 @@ $escaped-characters: (
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
|
||||
19
client/src/style/objects/Bigcapital.scss
Normal file
19
client/src/style/objects/Bigcapital.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
[data-icon='bigcapital'] {
|
||||
path {
|
||||
fill: #004dd0;
|
||||
}
|
||||
.path-1,
|
||||
.path-13 {
|
||||
fill: #4f5861;
|
||||
}
|
||||
}
|
||||
|
||||
.bigcapital--alt {
|
||||
svg {
|
||||
path,
|
||||
.path-13,
|
||||
.path-1 {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,91 +1,81 @@
|
||||
|
||||
.form-group--select-list{
|
||||
|
||||
.bp3-popover-target{
|
||||
|
||||
.bp3-icon{
|
||||
.form-group--select-list {
|
||||
.bp3-popover-target {
|
||||
.bp3-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 7px;
|
||||
|
||||
+ .bp3-button-text{
|
||||
+ .bp3-button-text {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button{
|
||||
.bp3-button {
|
||||
padding-left: 10px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--select-list{
|
||||
|
||||
.bp3-popover-open{
|
||||
.bp3-button{
|
||||
|
||||
.form-group--select-list {
|
||||
.bp3-popover-open {
|
||||
.bp3-button {
|
||||
border-color: #80bdff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button{
|
||||
.bp3-button {
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
|
||||
.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
color: #555555;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
|
||||
&.bp3-small{
|
||||
&.bp3-small {
|
||||
font-size: 13px;
|
||||
min-height: 29px;
|
||||
}
|
||||
.form-group--select-list &{
|
||||
.form-group--select-list & {
|
||||
border-radius: 2px;
|
||||
|
||||
&,
|
||||
&:hover{
|
||||
box-shadow: 0 0 0 transparent;
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
|
||||
&:not(:disabled) {
|
||||
background: #fff;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-group--select-list.bp3-intent-danger &{
|
||||
|
||||
&{
|
||||
.form-group--select-list.bp3-intent-danger & {
|
||||
& {
|
||||
border-color: #db3737;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button-group.bp3-minimal .bp3-button{
|
||||
.bp3-button-group.bp3-minimal .bp3-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bp3-button{
|
||||
|
||||
.bp3-button {
|
||||
&.bp3-intent-primary,
|
||||
&.bp3-intent-success,
|
||||
&.bp3-intent-danger,
|
||||
&.bp3-intent-warning{
|
||||
|
||||
&.bp3-intent-warning {
|
||||
&,
|
||||
&:hover{
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--secondary{
|
||||
|
||||
}
|
||||
.button--secondary {
|
||||
}
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
$form-check-input-checked-color: #fff;
|
||||
$form-check-input-checked-bg-color: $blue1;
|
||||
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
|
||||
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
|
||||
|
||||
.form{
|
||||
&__floating-footer{
|
||||
.form {
|
||||
&__floating-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
@@ -12,30 +8,30 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
|
||||
padding: 14px 18px;
|
||||
border-top: 1px solid #ececec;
|
||||
|
||||
.has-mini-sidebar &{
|
||||
.has-mini-sidebar & {
|
||||
left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form
|
||||
label.bp3-label{
|
||||
label.bp3-label {
|
||||
color: #353535;
|
||||
font-weight: 400;
|
||||
|
||||
.required{
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.bp3-form-group.bp3-inline &{
|
||||
.bp3-form-group.bp3-inline & {
|
||||
margin: 0 10px 0 0;
|
||||
line-height: 1.6;
|
||||
padding-top: calc(.3rem + 1px);
|
||||
padding-bottom: calc(.3rem + 1px);
|
||||
padding-top: calc(0.3rem + 1px);
|
||||
padding-bottom: calc(0.3rem + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-input{
|
||||
.#{$ns}-input {
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 2px;
|
||||
@@ -44,72 +40,69 @@ label.bp3-label{
|
||||
color: #333;
|
||||
|
||||
&:focus,
|
||||
&.bp3-active{
|
||||
box-shadow: 0 0 0 1px #116cd0;
|
||||
&.bp3-active {
|
||||
box-shadow: 0 0 0 1px #116cd0;
|
||||
border-color: #116cd0;
|
||||
}
|
||||
&.bp3-disabled,
|
||||
&:disabled{
|
||||
&:disabled {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.bp3-form-group.bp3-intent-danger &{
|
||||
.bp3-form-group.bp3-intent-danger & {
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border-color: #db3737;
|
||||
|
||||
&:focus,
|
||||
&.bp3-active{
|
||||
box-shadow: 0 0 0 1px #db3737;
|
||||
&.bp3-active {
|
||||
box-shadow: 0 0 0 1px #db3737;
|
||||
border-color: #db3737;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-form-group{
|
||||
.#{$ns}-form-group {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.#{$ns}-intent-danger{
|
||||
select{
|
||||
box-shadow: 0 0 0 0 rgba(228, 226, 226, 0),
|
||||
0 0 0 0 rgba(2, 2, 2, 0),
|
||||
inset 0 0 0 1px #db3737,
|
||||
inset 0 0 0 1px rgba(16, 22, 26, 0.15),
|
||||
&.#{$ns}-intent-danger {
|
||||
select {
|
||||
box-shadow: 0 0 0 0 rgba(228, 226, 226, 0), 0 0 0 0 rgba(2, 2, 2, 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);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-label{
|
||||
.#{$ns}-label {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-button:not([class*=".#{$ns}-intent-"]) {
|
||||
.#{$ns}-button:not([class*='.#{$ns}-intent-']) {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.#{$ns}-html-select select,
|
||||
.#{$ns}-select select{
|
||||
.#{$ns}-select select {
|
||||
background-image: none;
|
||||
border-radius: 2px;
|
||||
|
||||
|
||||
&,
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: #fff;
|
||||
box-shadow: none;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
&:focus{
|
||||
box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
||||
border-color: #80bdff;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend{
|
||||
|
||||
.input-group-text{
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .375rem .75rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin-bottom: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
@@ -119,46 +112,45 @@ label.bp3-label{
|
||||
white-space: nowrap;
|
||||
background-color: #e9ecef;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .25rem;
|
||||
border-radius: 0.25rem;
|
||||
height: 100%;
|
||||
|
||||
.bp3-form-group &{
|
||||
padding: .25rem .5rem;
|
||||
font-size: .875rem;
|
||||
.bp3-form-group & {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
border-radius: .2rem;
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
|
||||
.bp3-input-group{
|
||||
.bp3-form-group {
|
||||
.bp3-input-group {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.bp3-control-group{
|
||||
> .input-group-prepend:first-child .input-group-text{
|
||||
.bp3-control-group {
|
||||
> .input-group-prepend:first-child .input-group-text {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-html-select{
|
||||
.bp3-icon-double-caret-vertical{
|
||||
.#{$ns}-html-select {
|
||||
.bp3-icon-double-caret-vertical {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.bp3-datepicker-caption select{
|
||||
.bp3-datepicker-caption select {
|
||||
&,
|
||||
&:hover{
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown arrow to html select and select list.
|
||||
.#{$ns}-html-select::after,
|
||||
.form-group--select-list .#{$ns}-button::after{
|
||||
.form-group--select-list .#{$ns}-button::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
@@ -174,20 +166,19 @@ label.bp3-label{
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.form-group--select-list{
|
||||
|
||||
.#{$ns}-button{
|
||||
color: #8D8D8D;
|
||||
.form-group--select-list {
|
||||
.#{$ns}-button {
|
||||
color: #8d8d8d;
|
||||
position: relative;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
&.bp3-fill{
|
||||
&.bp3-fill {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.bp3-intent-danger{
|
||||
.bp3-button:not(.bp3-minimal){
|
||||
&.bp3-intent-danger {
|
||||
.bp3-button:not(.bp3-minimal) {
|
||||
border-color: #db3737;
|
||||
}
|
||||
}
|
||||
@@ -197,8 +188,7 @@ label.bp3-label{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@mixin control-checked-colors($selector: ":checked") {
|
||||
@mixin control-checked-colors($selector: ':checked') {
|
||||
input#{$selector} ~ .#{$ns}-control-indicator {
|
||||
box-shadow: none;
|
||||
background-color: $control-checked-background-color;
|
||||
@@ -225,7 +215,6 @@ label.bp3-label{
|
||||
|
||||
///@extend
|
||||
.#{$ns}-control {
|
||||
|
||||
input:checked ~ .#{$ns}-control-indicator {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
@@ -253,7 +242,7 @@ label.bp3-label{
|
||||
display: inline-block;
|
||||
margin-right: $pt-grid-size * 2;
|
||||
}
|
||||
|
||||
|
||||
.#{$ns}-control-indicator {
|
||||
box-shadow: 0 0 0 transparent;
|
||||
background-clip: padding-box;
|
||||
@@ -261,7 +250,7 @@ label.bp3-label{
|
||||
background-image: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
|
||||
&::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@@ -271,15 +260,13 @@ label.bp3-label{
|
||||
&.bp3-large .#{$ns}-control-indicator {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
|
||||
&::before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover .#{$ns}-control-indicator {
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -289,30 +276,29 @@ label.bp3-label{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
Checkbox
|
||||
|
||||
Markup:
|
||||
<label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
|
||||
<input type="checkbox" {{:modifier}} />
|
||||
<span class="#{$ns}-control-indicator"></span>
|
||||
/*
|
||||
Checkbox
|
||||
</label>
|
||||
|
||||
:checked - Checked
|
||||
:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
|
||||
:indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
|
||||
<code>input.indeterminate = true</code>.
|
||||
.#{$ns}-align-right - Right-aligned indicator
|
||||
.#{$ns}-large - Large
|
||||
Markup:
|
||||
<label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
|
||||
<input type="checkbox" {{:modifier}} />
|
||||
<span class="#{$ns}-control-indicator"></span>
|
||||
Checkbox
|
||||
</label>
|
||||
|
||||
Styleguide checkbox
|
||||
:checked - Checked
|
||||
:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
|
||||
:indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
|
||||
<code>input.indeterminate = true</code>.
|
||||
.#{$ns}-align-right - Right-aligned indicator
|
||||
.#{$ns}-large - Large
|
||||
|
||||
Styleguide checkbox
|
||||
*/
|
||||
|
||||
&.#{$ns}-checkbox {
|
||||
&:hover input:indeterminate ~ .#{$ns}-control-indicator {
|
||||
// box-shadow: 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin indicator-inline-icon($icon) {
|
||||
&::before {
|
||||
@@ -322,10 +308,10 @@ label.bp3-label{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include control-checked-colors(":checked");
|
||||
@include control-checked-colors(':checked');
|
||||
|
||||
// make :indeterminate look like :checked _for Checkbox only_
|
||||
@include control-checked-colors(":indeterminate");
|
||||
@include control-checked-colors(':indeterminate');
|
||||
|
||||
.#{$ns}-control-indicator {
|
||||
border: 1px solid #c6c6c6;
|
||||
@@ -363,21 +349,24 @@ label.bp3-label{
|
||||
Styleguide radio
|
||||
*/
|
||||
&.#{$ns}-radio {
|
||||
.#{$ns}-control-indicator{
|
||||
.#{$ns}-control-indicator {
|
||||
border: 2px solid #cecece;
|
||||
background-color: #fff;
|
||||
|
||||
&::before{
|
||||
&::before {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked ~ .#{$ns}-control-indicator{
|
||||
input:checked ~ .#{$ns}-control-indicator {
|
||||
border-color: $form-check-input-checked-bg-color;
|
||||
|
||||
&::before {
|
||||
background-image: radial-gradient($form-check-input-checked-bg-color 40%, transparent 40%);
|
||||
background-image: radial-gradient(
|
||||
$form-check-input-checked-bg-color 40%,
|
||||
transparent 40%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -391,24 +380,22 @@ label.bp3-label{
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bp3-menu-item::before, .bp3-menu-item > .bp3-icon{
|
||||
.bp3-menu-item::before,
|
||||
.bp3-menu-item > .bp3-icon {
|
||||
color: #4b5d6b;
|
||||
}
|
||||
|
||||
.bp3-control-group{
|
||||
|
||||
.input-prepend{
|
||||
|
||||
&:not(.bp3-fixed){
|
||||
.bp3-control-group {
|
||||
.input-prepend {
|
||||
&:not(.bp3-fixed) {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
&__text,
|
||||
&__button{
|
||||
&__button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .375rem .75rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
margin: 0;
|
||||
height: 32px;
|
||||
font-size: 1rem;
|
||||
@@ -421,9 +408,9 @@ label.bp3-label{
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
.bp3-icon{
|
||||
.bp3-icon {
|
||||
color: #848da0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
51
client/src/style/pages/Accounts/AccountFormDialog.scss
Normal file
51
client/src/style/pages/Accounts/AccountFormDialog.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
@import '../../Base.scss';
|
||||
|
||||
// Account Form Dialog.
|
||||
// ----------------------------
|
||||
.dialog--account-form {
|
||||
&:not(.dialog--loading) .bp3-dialog-body {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.bp3-dialog-body {
|
||||
.bp3-form-group.bp3-inline {
|
||||
.bp3-label {
|
||||
min-width: 140px;
|
||||
}
|
||||
.bp3-form-content {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&.form-group--description {
|
||||
.bp3-form-content {
|
||||
width: 280px;
|
||||
}
|
||||
textarea {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--account-code {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group--subaccount {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.bp3-icon-info-circle {
|
||||
color: #a1b2c5;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.form-group--description {
|
||||
textarea {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
68
client/src/style/pages/Accounts/List.scss
Normal file
68
client/src/style/pages/Accounts/List.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
@import '../../Base.scss';
|
||||
|
||||
.dashboard__insider--accounts-chart {
|
||||
.bigcapital-datatable {
|
||||
.normal {
|
||||
.#{$ns}-icon {
|
||||
color: #7f91a2;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
.tbody {
|
||||
.tr:not(.no-results) .td {
|
||||
padding-top: 0.3rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.tr.inactive .td {
|
||||
color: #646b82;
|
||||
|
||||
&.normal .#{$ns}-icon {
|
||||
color: #9eaab6;
|
||||
}
|
||||
}
|
||||
.account_name {
|
||||
.bp3-popover-wrapper--inactive-semafro {
|
||||
margin-left: 8px;
|
||||
margin-right: 6px;
|
||||
float: right;
|
||||
border: 0;
|
||||
}
|
||||
.bp3-popover-wrapper--account-desc {
|
||||
border-bottom-color: #bbb;
|
||||
}
|
||||
.inactive-semafro {
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
background: #bbb;
|
||||
display: inline-block;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.account-desc{
|
||||
font-size: 11px;
|
||||
color: hsl(0, 0%, 50%);
|
||||
margin-top: 2px;
|
||||
line-height: 1.25;
|
||||
padding-bottom: 2px;
|
||||
display: block;
|
||||
}
|
||||
.normal {
|
||||
.bp3-popover-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.bp3-tooltip-indicator {
|
||||
cursor: initial;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.actions {
|
||||
padding-right: 18px;
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
224
client/src/style/pages/Authentication/Auth.scss
Normal file
224
client/src/style/pages/Authentication/Auth.scss
Normal file
@@ -0,0 +1,224 @@
|
||||
|
||||
body.authentication {
|
||||
background-color: #fcfdff;
|
||||
}
|
||||
|
||||
.authentication-insider {
|
||||
width: 384px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40px;
|
||||
padding-top: 80px;
|
||||
|
||||
&__logo-section {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
.auth-copyright {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.bp3-icon-bigcapital {
|
||||
margin-top: 9px;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #a3a3a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.authTransition{
|
||||
|
||||
&-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
}
|
||||
|
||||
&-enter-done {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-exit-active {
|
||||
opacity: 0.5;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
}
|
||||
&-exit-active {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.authentication-page {
|
||||
&__goto-bigcapital {
|
||||
position: fixed;
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.bp3-input {
|
||||
min-height: 40px;
|
||||
}
|
||||
.bp3-form-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.bp3-form-group.has-password-revealer {
|
||||
.bp3-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.password-revealer {
|
||||
.text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button.bp3-fill.bp3-intent-primary {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__label-section {
|
||||
margin-bottom: 30px;
|
||||
color: #555;
|
||||
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: #2d2b43;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #0040bd;
|
||||
}
|
||||
}
|
||||
|
||||
&__form-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__footer-links {
|
||||
padding: 9px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-align: center;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
a {
|
||||
color: #0052cc;
|
||||
}
|
||||
}
|
||||
|
||||
&__loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(252, 253, 255, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__submit-button-wrap {
|
||||
margin: 0px 0px 24px 0px;
|
||||
|
||||
.bp3-button {
|
||||
background-color: #0052cc;
|
||||
min-height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
// Login Form
|
||||
// ------------------------------
|
||||
.login-form {
|
||||
// width: 690px;
|
||||
// margin: 0px auto;
|
||||
// padding: 85px 50px;
|
||||
|
||||
.checkbox {
|
||||
&--remember-me {
|
||||
margin: -6px 0 26px 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Register form
|
||||
// ----------------------------
|
||||
.register-form {
|
||||
|
||||
&__agreement-section {
|
||||
margin-top: -10px;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-button-wrap {
|
||||
margin: 25px 0px 25px 0px;
|
||||
|
||||
.bp3-button {
|
||||
min-height: 45px;
|
||||
background-color: #0052cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Send reset password
|
||||
// ----------------------------
|
||||
.send-reset-password {
|
||||
.form-group--crediential {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// Invite form.
|
||||
// ----------------
|
||||
.invite-form {
|
||||
|
||||
&__statement-section {
|
||||
margin-top: -10px;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
|
||||
.authentication-page__loading-overlay {
|
||||
background: rgba(252, 253, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,6 @@
|
||||
$self: '.page-form';
|
||||
|
||||
#{$self}__header{
|
||||
|
||||
display: flex;
|
||||
|
||||
&-fields{
|
||||
23
client/src/style/pages/Customers/List.scss
Normal file
23
client/src/style/pages/Customers/List.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
|
||||
|
||||
.dashboard__insider--customers-list{
|
||||
|
||||
.bigcapital-datatable{
|
||||
|
||||
.avatar.td{
|
||||
|
||||
.avatar{
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
background: #f3e2f6;
|
||||
border-radius: 50%;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #93639a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
@import '../../Base.scss';
|
||||
|
||||
|
||||
.page-form--customer{
|
||||
.page-form--customer {
|
||||
$self: '.page-form';
|
||||
padding: 20px;
|
||||
|
||||
#{$self}__header{
|
||||
#{$self}__header {
|
||||
padding: 0;
|
||||
}
|
||||
#{$self}__primary-section{
|
||||
#{$self}__primary-section {
|
||||
padding: 10px 0 0;
|
||||
margin: 0 0 20px;
|
||||
overflow: hidden;
|
||||
@@ -15,108 +15,105 @@
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
.bp3-form-group {
|
||||
max-width: 500px;
|
||||
|
||||
.bp3-control{
|
||||
.bp3-control {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&.bp3-inline{
|
||||
|
||||
.bp3-label{
|
||||
&.bp3-inline {
|
||||
.bp3-label {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
.bp3-form-content{
|
||||
.bp3-form-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--contact_name{
|
||||
.form-group--contact_name {
|
||||
max-width: 600px;
|
||||
|
||||
.bp3-control-group > *{
|
||||
.bp3-control-group > * {
|
||||
flex-shrink: unset;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: 10px;
|
||||
}
|
||||
&.input-group--salutation-list{
|
||||
&.input-group--salutation-list {
|
||||
width: 25%;
|
||||
}
|
||||
&.input-group--first-name,
|
||||
&.input-group--last-name{
|
||||
&.input-group--last-name {
|
||||
width: 37%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
.bp3-form-group {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.bp3-tab-panel{
|
||||
margin-top: 26px;
|
||||
.bp3-tab-panel {
|
||||
margin-top: 26px;
|
||||
}
|
||||
|
||||
.form-group--phone-number{
|
||||
|
||||
.bp3-control-group > *{
|
||||
.form-group--phone-number {
|
||||
.bp3-control-group > * {
|
||||
flex-shrink: unset;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
|
||||
&:first-child{
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child{
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$self}__tabs{
|
||||
#{$self}__tabs {
|
||||
margin-top: 20px;
|
||||
max-width: 1000px;
|
||||
|
||||
h4{
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
margin-bottom: 1.2rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
// Tab panels.
|
||||
.tab-panel{
|
||||
|
||||
&--address{
|
||||
.bp3-form-group{
|
||||
.tab-panel {
|
||||
&--address {
|
||||
.bp3-form-group {
|
||||
max-width: 440px;
|
||||
|
||||
&.bp3-inline{
|
||||
.bp3-label{
|
||||
&.bp3-inline {
|
||||
.bp3-label {
|
||||
min-width: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-content{
|
||||
.bp3-form-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea.bp3-input{
|
||||
textarea.bp3-input {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&--note{
|
||||
.form-group--note{
|
||||
.bp3-form-group{
|
||||
&--note {
|
||||
.form-group--note {
|
||||
.bp3-form-group {
|
||||
max-width: 600px;
|
||||
}
|
||||
textarea{
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
}
|
||||
@@ -124,34 +121,34 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone-container{
|
||||
.dropzone-container {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tabs{
|
||||
.bp3-tab-list{
|
||||
.bp3-tabs {
|
||||
.bp3-tab-list {
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #F0F0F0;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
> *:not(:last-child){
|
||||
> *:not(:last-child) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
&.bp3-large > .bp3-tab{
|
||||
&.bp3-large > .bp3-tab {
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
|
||||
&[aria-selected="true"],
|
||||
&:not([aria-disabled="true"]):hover{
|
||||
&[aria-selected='true'],
|
||||
&:not([aria-disabled='true']):hover {
|
||||
color: $pt-link-color;
|
||||
}
|
||||
}
|
||||
@@ -163,25 +160,3 @@
|
||||
margin-right: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__insider--customers-list{
|
||||
|
||||
.bigcapital-datatable{
|
||||
|
||||
.avatar.td{
|
||||
|
||||
.avatar{
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
background: #f3e2f6;
|
||||
border-radius: 50%;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #93639a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
@import '../../Base.scss';
|
||||
|
||||
|
||||
.dashboard{
|
||||
.dashboard {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
||||
&__topbar{
|
||||
&__topbar {
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
@@ -13,23 +13,21 @@
|
||||
border-bottom: 1px solid #dddee3;
|
||||
|
||||
&-right,
|
||||
&-left{
|
||||
&-left {
|
||||
display: flex;
|
||||
}
|
||||
&-actions{
|
||||
|
||||
}
|
||||
&-sidebar-toggle{
|
||||
&-actions {}
|
||||
&-sidebar-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 2px;
|
||||
|
||||
.#{$ns}-button{
|
||||
color: #6B8193;
|
||||
.#{$ns}-button {
|
||||
color: #6b8193;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus{
|
||||
&:focus {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
@@ -38,40 +36,40 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-navbar{
|
||||
&-navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
|
||||
.#{$ns}-button{
|
||||
color: #1552C8;
|
||||
.#{$ns}-button {
|
||||
color: #1552c8;
|
||||
font-weight: 5000;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
&:focus {
|
||||
background-color: rgba(178, 220, 253, 0.15);
|
||||
}
|
||||
.#{$ns}-icon{
|
||||
color: #1552C8;
|
||||
.#{$ns}-icon {
|
||||
color: #1552c8;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-navbar-divider{
|
||||
.bp3-navbar-divider {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-user{
|
||||
&-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
|
||||
.bp3-button:not([class*="bp3-intent-"]):not(.bp3-minimal){
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
padding: 0;
|
||||
background-size: contain;
|
||||
background-color: #EED1F2;
|
||||
background-color: #eed1f2;
|
||||
border-radius: 50%;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
@@ -82,8 +80,8 @@
|
||||
}
|
||||
&,
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: #EED1F2;
|
||||
&:focus {
|
||||
background-color: #eed1f2;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -91,19 +89,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__breadcrumbs{
|
||||
&__breadcrumbs {
|
||||
display: flex;
|
||||
margin-left: 16px;
|
||||
align-items: center;
|
||||
|
||||
// Breadcrumbs component.
|
||||
.#{$ns}-breadcrumbs-collapsed{
|
||||
.#{$ns}-breadcrumbs-collapsed {
|
||||
background: $light-gray3;
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: $light-gray2;
|
||||
}
|
||||
&::before{
|
||||
&::before {
|
||||
background: escape-svg($breadcrumbs-collapsed-icon) center center;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
@@ -111,112 +109,111 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__back-link{
|
||||
&__back-link {
|
||||
margin-left: 24px;
|
||||
display: flex;
|
||||
|
||||
a{
|
||||
a {
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions-bar{
|
||||
border-bottom: 2px solid #EAEAEA;
|
||||
&__actions-bar {
|
||||
border-bottom: 2px solid #eaeaea;
|
||||
|
||||
.#{$ns}-navbar{
|
||||
.#{$ns}-navbar {
|
||||
box-shadow: none;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
|
||||
&,
|
||||
&-group{
|
||||
&-group {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.#{$ns}-navbar-divider{
|
||||
.#{$ns}-navbar-divider {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.#{$ns}-button{
|
||||
.#{$ns}-button {
|
||||
color: #32304a;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: rgba(167, 182, 194, 0.12);
|
||||
color: #32304a;
|
||||
}
|
||||
&.bp3-minimal:active,
|
||||
&.bp3-minimal.bp3-active{
|
||||
&.bp3-minimal.bp3-active {
|
||||
background: #a7b6c21f;
|
||||
color: #32304a;
|
||||
}
|
||||
|
||||
&.has-active-filters{
|
||||
&.has-active-filters {
|
||||
&,
|
||||
&.bp3-active,
|
||||
&:active{
|
||||
&:active {
|
||||
background: #eafbe4;
|
||||
}
|
||||
}
|
||||
.#{$ns}-icon{
|
||||
.#{$ns}-icon {
|
||||
color: #32304a;
|
||||
margin-right: 7px;
|
||||
}
|
||||
&.#{$ns}-minimal.#{$ns}-intent-danger{
|
||||
&.#{$ns}-minimal.#{$ns}-intent-danger {
|
||||
color: #c23030;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
&:focus {
|
||||
background: rgba(219, 55, 55, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.button--blue-highlight{
|
||||
&.button--blue-highlight {
|
||||
background-color: #ebfaff;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
&:focus {
|
||||
background-color: darken(#ebfaff, 2.5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.button--gray-highlight{
|
||||
&.button--gray-highlight {
|
||||
background-color: rgba(127, 189, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.button--table-views{
|
||||
.#{$ns}-icon{
|
||||
color: #1183DA;
|
||||
.button--table-views {
|
||||
.#{$ns}-icon {
|
||||
color: #1183da;
|
||||
}
|
||||
.#{$ns}-button-text{
|
||||
.#{$ns}-button-text {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.#{$ns}-icon-caret-down{
|
||||
.#{$ns}-icon-caret-down {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__breadcrumbs{
|
||||
&__breadcrumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&__title{
|
||||
align-items: center;;
|
||||
&__title {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: 2px;
|
||||
|
||||
h1{
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
color: #48485c;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
h3{
|
||||
h3 {
|
||||
border-left: 1px solid #d9d9d9;
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
@@ -227,35 +224,31 @@
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.button--view-edit{
|
||||
|
||||
svg{
|
||||
.button--view-edit {
|
||||
svg {
|
||||
color: #929699;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
svg{
|
||||
&:focus {
|
||||
svg {
|
||||
color: #5c7080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__hint{
|
||||
|
||||
&__hint {
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__subtitle{
|
||||
|
||||
&__subtitle {
|
||||
}
|
||||
&__insider{
|
||||
|
||||
&__insider {
|
||||
}
|
||||
|
||||
&__offline-badge{
|
||||
&__offline-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0px 6px;
|
||||
@@ -269,63 +262,53 @@
|
||||
margin: auto;
|
||||
margin-left: 12px;
|
||||
}
|
||||
&-content{
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-width: 850px;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
height: 1px;
|
||||
background: #01194e;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar--mini-sidebar + &{
|
||||
.sidebar--mini-sidebar + & {
|
||||
margin-left: 50px;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
&__insider{
|
||||
&__insider {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
background-color: #FBFBFB;
|
||||
background-color: #fbfbfb;
|
||||
|
||||
> .dashboard__loading-indicator{
|
||||
> .dashboard__loading-indicator {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__page-content{
|
||||
&__page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
|
||||
.bigcapital-datatable{
|
||||
|
||||
.table{
|
||||
.bigcapital-datatable {
|
||||
.table {
|
||||
.thead,
|
||||
.tbody{
|
||||
.tbody {
|
||||
.th.selection,
|
||||
.td.selection{
|
||||
.td.selection {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__loading-indicator{
|
||||
.dashboard__loading-indicator {
|
||||
padding-top: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
&__datatable{
|
||||
&__datatable {
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
flex-direction: column;
|
||||
@@ -333,96 +316,95 @@
|
||||
margin: 20px;
|
||||
border: 1px solid #d2dce2;
|
||||
|
||||
.bigcapital-datatable{
|
||||
.bigcapital-datatable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
|
||||
.pagination{
|
||||
.pagination {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&:not(.has-pagination){
|
||||
&:not(.has-pagination) {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.datatable-empty-status{
|
||||
.datatable-empty-status {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__preferences-topbar{
|
||||
|
||||
&__preferences-topbar {
|
||||
}
|
||||
|
||||
&__footer{
|
||||
&__footer {
|
||||
margin-top: auto;
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid #ececec;
|
||||
|
||||
.footer-links{
|
||||
|
||||
.footer-links {
|
||||
text-align: center;
|
||||
|
||||
> div{
|
||||
> div {
|
||||
font-size: 12px;
|
||||
margin-right: 20px;
|
||||
display: inline;
|
||||
|
||||
a{
|
||||
a {
|
||||
color: #8c8c8c;
|
||||
|
||||
&:hover{
|
||||
&:hover {
|
||||
color: $blue2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card{
|
||||
&__card {
|
||||
border: 1px solid #d2dce2;
|
||||
background: #fff;
|
||||
|
||||
&--page{
|
||||
&--page {
|
||||
flex: 1 0 0;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__error-boundary{
|
||||
&__error-boundary {
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
|
||||
h1{
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin: 0px 0 10px;
|
||||
color: #2c3a5d;
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #1f3255;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.bp3-icon{
|
||||
.bp3-icon {
|
||||
margin-top: 6px;
|
||||
|
||||
path{
|
||||
path {
|
||||
fill: #a1afca;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs--dashboard-views{
|
||||
.tabs--dashboard-views {
|
||||
|
||||
.#{$ns}-tab{
|
||||
.#{$ns}-tab {
|
||||
color: #5b606d;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
@@ -437,37 +419,37 @@
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-tab-indicator-wrapper{
|
||||
.#{$ns}-tab-indicator{
|
||||
.#{$ns}-tab-indicator-wrapper {
|
||||
.#{$ns}-tab-indicator {
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.button--new-view{
|
||||
.button--new-view {
|
||||
margin: 0;
|
||||
height: 50px;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus{
|
||||
&:focus {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0;
|
||||
}
|
||||
|
||||
.#{$ns}-icon{
|
||||
color: #A7A7A7;
|
||||
.#{$ns}-icon {
|
||||
color: #a7a7a7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar--dashboard-views{
|
||||
.navbar--dashboard-views {
|
||||
box-shadow: 0 0 0;
|
||||
border-bottom: 1px solid #d2dce2;
|
||||
}
|
||||
|
||||
.navbar-omnibar{
|
||||
.navbar-omnibar {
|
||||
-webkit-filter: blur(0);
|
||||
filter: blur(0);
|
||||
opacity: 1;
|
||||
@@ -475,21 +457,17 @@
|
||||
left: calc(50% - 250px);
|
||||
z-index: 21;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
|
||||
0 4px 8px rgba(16, 22, 26, 0.2),
|
||||
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 4px 8px rgba(16, 22, 26, 0.2),
|
||||
0 18px 46px 6px rgba(16, 22, 26, 0.2);
|
||||
background-color: #fff;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
|
||||
.menu--logged-user-dropdown{
|
||||
|
||||
.menu-item--profile{
|
||||
|
||||
.org{
|
||||
.menu--logged-user-dropdown {
|
||||
.menu-item--profile {
|
||||
.org {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
.dialog--invite-user {
|
||||
|
||||
.dialog--exchangeRate-form {
|
||||
|
||||
.bp3-dialog-body {
|
||||
.bp3-form-group.bp3-inline {
|
||||
.bp3-label {
|
||||
@@ -9,4 +11,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
.financial-sheet{
|
||||
&--receivable-aging-summary{
|
||||
|
||||
.financial-sheet__table{
|
||||
|
||||
.bigcapital-datatable{
|
||||
.tbody,
|
||||
.thead{
|
||||
.tr .td.customer_name ~ .td,
|
||||
.tr .th.customer_name ~ .th{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
.tr .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tr:not(:first-child) .td{
|
||||
border-top: 1px solid #E8E8E8;
|
||||
}
|
||||
.tr.row-type--total{
|
||||
font-weight: 500;
|
||||
|
||||
.td{
|
||||
border-top: 1px solid #333;
|
||||
border-bottom: 3px double #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
client/src/style/pages/FinancialStatements/BalanceSheet.scss
Normal file
45
client/src/style/pages/FinancialStatements/BalanceSheet.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
|
||||
.financial-sheet{
|
||||
|
||||
&--balance-sheet{
|
||||
.financial-sheet__table{
|
||||
|
||||
.thead,
|
||||
.tbody{
|
||||
.tr .td.account_name ~ .td,
|
||||
.tr .th.account_name ~ .th{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
.tr .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tr.row_type--total-row .td{
|
||||
border-top: 1px solid #BBB;
|
||||
}
|
||||
.tr.row_type--total-row.row_type--assets .td,
|
||||
.tr.row_type--total-row.row_type--liabilities_equity .td{
|
||||
border-bottom: 3px double #333;
|
||||
}
|
||||
.tr.row_type--total-row{
|
||||
.total.td,
|
||||
.account_name.td,
|
||||
.total-period.td{
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tr.is-expanded{
|
||||
.td.total,
|
||||
.td.total-period{
|
||||
> span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.financial-reports {
|
||||
padding: 20px 25px;
|
||||
|
||||
.section-title {
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.6rem;
|
||||
font-size: 20px;
|
||||
color: rgb(31, 50, 85);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 270px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
border: 1px solid #d1dee2;
|
||||
border-top: 3px solid #d1dee2;
|
||||
padding-top: 16px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: rgb(31, 50, 85);
|
||||
line-height: 1.55;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
|
||||
.financial-sheet{
|
||||
&--general-ledger{
|
||||
.financial-sheet__table{
|
||||
.tbody{
|
||||
.tr.row-type{
|
||||
|
||||
&--opening_balance,
|
||||
&--closing_balance{
|
||||
.td{
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
.name,
|
||||
.amount,
|
||||
.balance{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&--closing_balance .td{
|
||||
border-bottom-color: #666;
|
||||
}
|
||||
&--account_name .td.name{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
31
client/src/style/pages/FinancialStatements/Journal.scss
Normal file
31
client/src/style/pages/FinancialStatements/Journal.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
|
||||
.financial-sheet{
|
||||
|
||||
&--journal{
|
||||
.financial-sheet__table{
|
||||
|
||||
.tbody{
|
||||
.tr:not(.no-results) .td{
|
||||
padding: 0.4rem;
|
||||
color: #000;
|
||||
border-bottom-color: transparent;
|
||||
min-height: 32px;
|
||||
border-left: 1px solid #ececec;
|
||||
|
||||
&:first-of-type{
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.financial-statement--journal{
|
||||
|
||||
.financial-header-drawer{
|
||||
.bp3-drawer{
|
||||
max-height: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
|
||||
.financial-sheet{
|
||||
&--profit-loss-sheet{
|
||||
.financial-sheet__table{
|
||||
.thead,
|
||||
.tbody{
|
||||
.tr .td:not(:first-child),
|
||||
.tr .th:not(:first-child) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
.tr .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.tr.row_type--total{
|
||||
font-weight: 500;
|
||||
}
|
||||
.tr.row_type--section_total .td{
|
||||
border-top: 1px solid #BBB
|
||||
}
|
||||
.tr.row_type--section_total + .tr .td{
|
||||
border-top: 1px solid #666;
|
||||
}
|
||||
.tr.row_type--net_income_total.row_type--total .td{
|
||||
border-bottom: 3px double #333;
|
||||
}
|
||||
|
||||
.tr.is-expanded{
|
||||
.td.total,
|
||||
.td.total-period{
|
||||
> span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
|
||||
.financial-sheet{
|
||||
|
||||
&--trial-balance{
|
||||
min-width: 720px;
|
||||
|
||||
.financial-sheet__table{
|
||||
|
||||
.tbody{
|
||||
.tr .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.balance.td{
|
||||
border-top-color: #000;
|
||||
}
|
||||
.tr.row_type--total .td{
|
||||
border-top: 1px solid #000;
|
||||
font-weight: 500;
|
||||
border-bottom: 3px double #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
client/src/style/pages/Items/List.scss
Normal file
27
client/src/style/pages/Items/List.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
// Blueprint framework.
|
||||
// @import '@blueprintjs/core/src/blueprint.scss';
|
||||
|
||||
.dashboard__insider--items-list {
|
||||
.bigcapital-datatable {
|
||||
.table {
|
||||
.tbody {
|
||||
.item_type.td {
|
||||
.bp3-tag {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.tr.inactive .td {
|
||||
color: #646b82;
|
||||
|
||||
&.normal .bp3-icon {
|
||||
color: #9eaab6;
|
||||
}
|
||||
}
|
||||
.quantity_on_hand {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -78,27 +78,3 @@
|
||||
border-bottom: 1px dashed #d0d0d0;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__insider--items-list {
|
||||
.bigcapital-datatable {
|
||||
.table {
|
||||
.tbody {
|
||||
.item_type.td {
|
||||
.bp3-tag {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.tr.inactive .td {
|
||||
color: #646b82;
|
||||
|
||||
&.normal .#{$ns}-icon {
|
||||
color: #9eaab6;
|
||||
}
|
||||
}
|
||||
.quantity_on_hand {
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
|
||||
.dialog--journal-number-settings{
|
||||
|
||||
.paragraph {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bp3-form-group{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bp3-dialog-footer-actions{
|
||||
.bp3-button{
|
||||
min-width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,34 +1,29 @@
|
||||
|
||||
|
||||
.dashboard__insider--manual-journals{
|
||||
|
||||
.bigcapital-datatable{
|
||||
|
||||
.thead{
|
||||
|
||||
.dashboard__insider--manual-journals {
|
||||
.bigcapital-datatable {
|
||||
.thead {
|
||||
}
|
||||
|
||||
.tbody{
|
||||
.td.amount{
|
||||
.bp3-popover-target{
|
||||
.tbody {
|
||||
.td.amount {
|
||||
.bp3-popover-target {
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
> span{
|
||||
> span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.note{
|
||||
.bp3-icon{
|
||||
.note {
|
||||
.bp3-icon {
|
||||
color: #666;
|
||||
}
|
||||
.bp3-tooltip-indicator{
|
||||
.bp3-tooltip-indicator {
|
||||
cursor: initial;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.status{
|
||||
.status {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,22 +29,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dialog--journal-number-settings{
|
||||
|
||||
.paragraph {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bp3-form-group{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bp3-dialog-footer-actions{
|
||||
.bp3-button{
|
||||
min-width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__insider{
|
||||
|
||||
&--make-journal-page{
|
||||
39
client/src/style/pages/Preferences/Accounting.scss
Normal file
39
client/src/style/pages/Preferences/Accounting.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
|
||||
// Accountant.
|
||||
// ---------------------------------
|
||||
.preferences-page__inside-content--accountant {
|
||||
.card {
|
||||
padding: 25px;
|
||||
|
||||
.card__footer {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e7ea;
|
||||
margin-top: 30px;
|
||||
|
||||
.bp3-button {
|
||||
min-width: 60px;
|
||||
|
||||
+ .bp3-button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--select-list{
|
||||
|
||||
button{
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
.bp3-form-group {
|
||||
|
||||
.bp3-form-helper-text{
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
label.bp3-label {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
11
client/src/style/pages/Preferences/CurrenciesList.scss
Normal file
11
client/src/style/pages/Preferences/CurrenciesList.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
// Currencies List.
|
||||
// ---------------------------------
|
||||
.preferences-page__inside-content--currencies{
|
||||
|
||||
.bigcapital-datatable {
|
||||
|
||||
.tr:last-child .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
35
client/src/style/pages/Preferences/GeneralForm.scss
Normal file
35
client/src/style/pages/Preferences/GeneralForm.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
|
||||
|
||||
// General page
|
||||
//---------------------------------
|
||||
.preferences-page__inside-content--general {
|
||||
.card {
|
||||
padding: 25px;
|
||||
|
||||
.card__footer {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e7ea;
|
||||
margin-top: 30px;
|
||||
|
||||
.bp3-button {
|
||||
min-width: 60px;
|
||||
|
||||
+ .bp3-button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group {
|
||||
max-width: 550px;
|
||||
|
||||
.bp3-label {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.bp3-form-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
71
client/src/style/pages/Preferences/Page.scss
Normal file
71
client/src/style/pages/Preferences/Page.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
@import '../../Base.scss';
|
||||
|
||||
.dashboard-content--preferences {
|
||||
flex-direction: row;
|
||||
flex: 1 0 0;
|
||||
min-width: auto;
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
.dashboard {
|
||||
&__preferences-content {
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.preferences-page {
|
||||
&__inside-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&--tabable {
|
||||
margin-left: -25px;
|
||||
margin-right: -25px;
|
||||
}
|
||||
.card{
|
||||
margin: 15px;
|
||||
}
|
||||
.bigcapital-datatable{
|
||||
|
||||
.table .tbody .tbody-inner > .loading{
|
||||
padding: 30px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__inside-content {
|
||||
.#{$ns}-tab-list {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
align-items: baseline;
|
||||
|
||||
.#{$ns}-tab {
|
||||
font-weight: 400;
|
||||
line-height: 44px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs-extra-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.preferences-page {
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
|
||||
&__content {
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 220px;
|
||||
|
||||
.dashboard__card {
|
||||
margin: 15px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
70
client/src/style/pages/Preferences/Sidebar.scss
Normal file
70
client/src/style/pages/Preferences/Sidebar.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
@import '../../Base.scss';
|
||||
|
||||
// Preferences sidebar.
|
||||
// -----------------------------
|
||||
.preferences-sidebar {
|
||||
background: #e5eaee;
|
||||
border-right: 1px solid #c6d0d9;
|
||||
min-width: 220px;
|
||||
max-width: 220px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
|
||||
&__wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
.ScrollbarsCustom-Track {
|
||||
&.ScrollbarsCustom-TrackY,
|
||||
&.ScrollbarsCustom-TrackX {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
.ScrollbarsCustom-Thumb {
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ScrollbarsCustom-Thumb {
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 0 22px;
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
color: #48485b;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
.#{$ns}-menu-item {
|
||||
padding: 10px 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
|
||||
&:hover,
|
||||
&.#{$ns}-active {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
62
client/src/style/pages/Preferences/Topbar.scss
Normal file
62
client/src/style/pages/Preferences/Topbar.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@import '../../Base.scss';
|
||||
|
||||
// Preferences topbar.
|
||||
// -----------------------------
|
||||
.preferences-topbar {
|
||||
border-bottom: 1px solid #d2dde2;
|
||||
min-height: 60px;
|
||||
flex: 60px 0 0;
|
||||
padding: 0 0 0 22px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
&__title {
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #48485b;
|
||||
}
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
padding: 0;
|
||||
background-size: contain;
|
||||
background-color: #eed1f2;
|
||||
border-radius: 50%;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
|
||||
.user-text {
|
||||
font-size: 12px;
|
||||
color: #804f87;
|
||||
}
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #eed1f2;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
margin-left: auto;
|
||||
padding-right: 15px;
|
||||
margin-right: 15px;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
|
||||
.bp3-button + .bp3-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
29
client/src/style/pages/Preferences/UsersList.scss
Normal file
29
client/src/style/pages/Preferences/UsersList.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
|
||||
// Users/Roles List.
|
||||
// ---------------------------------
|
||||
.preferences-page__inside-content--users{
|
||||
|
||||
.bigcapital-datatable {
|
||||
|
||||
.td{
|
||||
.avatar{
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
background: #b7bfc6;
|
||||
border-radius: 50%;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.td.status {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tr:last-child .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -24,8 +24,6 @@
|
||||
width: 120%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__table {
|
||||
padding: 15px 15px 0;
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
.bp3-form-content{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
margin-bottom: 18px;
|
||||
|
||||
30
client/src/style/pages/Setup/Congrats.scss
Normal file
30
client/src/style/pages/Setup/Congrats.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
.setup-congrats {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
|
||||
&__page {
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-top: 30px;
|
||||
|
||||
h1 {
|
||||
color: #2d2b43;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.paragraph {
|
||||
font-size: 15px;
|
||||
opacity: 0.85;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.bp3-button {
|
||||
height: 38px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
font-size: 15px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
client/src/style/pages/Setup/Initializing.scss
Normal file
41
client/src/style/pages/Setup/Initializing.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
// Setup initializing form
|
||||
.setup-initializing-form {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
padding: 16% 0 0;
|
||||
|
||||
.bp3-progress-bar {
|
||||
background: rgba(92, 112, 128, 0.2);
|
||||
border-radius: 40px;
|
||||
display: block;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
|
||||
.bp3-progress-meter {
|
||||
background-color: #809cb3;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
margin-top: 35px;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #454c59;
|
||||
margin-top: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
color: #2e4266;
|
||||
}
|
||||
}
|
||||
}
|
||||
64
client/src/style/pages/Setup/Organization.scss
Normal file
64
client/src/style/pages/Setup/Organization.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
|
||||
.setup-organization {
|
||||
width: 580px;
|
||||
margin: 0 auto;
|
||||
padding: 45px 0 20px;
|
||||
|
||||
&__title-wrap {
|
||||
margin-bottom: 32px;
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #565e6c;
|
||||
}
|
||||
.paragraph {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group {
|
||||
.bp3-input-group {
|
||||
.bp3-input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--language {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.bp3-text-muted {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.register-org-note {
|
||||
font-size: 13px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
margin-bottom: 1.75rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.register-org-button {
|
||||
.bp3-button {
|
||||
background-color: #0052cc;
|
||||
min-width: 175px;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -189,139 +189,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setup-organization {
|
||||
width: 580px;
|
||||
margin: 0 auto;
|
||||
padding: 45px 0 20px;
|
||||
|
||||
&__title-wrap {
|
||||
margin-bottom: 32px;
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #565e6c;
|
||||
}
|
||||
.paragraph {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group {
|
||||
.bp3-input-group {
|
||||
.bp3-input {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--language {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.bp3-text-muted {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.register-org-note {
|
||||
font-size: 13px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
margin-bottom: 1.75rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.register-org-button {
|
||||
.bp3-button {
|
||||
background-color: #0052cc;
|
||||
min-width: 175px;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Setup initializing form
|
||||
.setup-initializing-form {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
padding: 16% 0 0;
|
||||
|
||||
.bp3-progress-bar {
|
||||
background: rgba(92, 112, 128, 0.2);
|
||||
border-radius: 40px;
|
||||
display: block;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
|
||||
.bp3-progress-meter {
|
||||
background-color: #809cb3;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: center;
|
||||
margin-top: 35px;
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #454c59;
|
||||
margin-top: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
color: #2e4266;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setup-congrats {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding-top: 80px;
|
||||
|
||||
&__page {
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-top: 30px;
|
||||
|
||||
h1 {
|
||||
color: #2d2b43;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.paragraph {
|
||||
font-size: 15px;
|
||||
opacity: 0.85;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.bp3-button {
|
||||
height: 38px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
font-size: 15px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -18,3 +18,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog--invite-user {
|
||||
.bp3-dialog-body {
|
||||
.bp3-form-group.bp3-inline {
|
||||
.bp3-label {
|
||||
min-width: 140px;
|
||||
}
|
||||
.bp3-form-content {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
|
||||
|
||||
// Dialog Account Form.
|
||||
.dialog--account-form{
|
||||
|
||||
.#{$ns}-form-group{
|
||||
.#{$ns}-label{
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
|
||||
.dashboard__insider--accounts-chart{
|
||||
|
||||
.bigcapital-datatable{
|
||||
.normal{
|
||||
.#{$ns}-icon{
|
||||
color: #7f91a2;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.table{
|
||||
.tbody{
|
||||
.tr:not(.no-results) .td{
|
||||
padding-top: 0.3rem;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.tr.inactive .td{
|
||||
color: #646b82;
|
||||
|
||||
&.normal .#{$ns}-icon{
|
||||
color: #9eaab6;
|
||||
}
|
||||
}
|
||||
.account_name{
|
||||
.bp3-popover-wrapper--inactive-semafro{
|
||||
margin-left: 8px;
|
||||
margin-right: 6px;
|
||||
float: right;
|
||||
border: 0;
|
||||
}
|
||||
.bp3-popover-wrapper--account-desc{
|
||||
border-bottom-color: #BBB;
|
||||
}
|
||||
.inactive-semafro{
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
background: #BBB;
|
||||
display: inline-block;
|
||||
border-radius: 8px;
|
||||
|
||||
}
|
||||
}
|
||||
.normal{
|
||||
.bp3-popover-wrapper{
|
||||
width: 100%;
|
||||
}
|
||||
.bp3-tooltip-indicator{
|
||||
cursor: initial;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.actions{
|
||||
padding-right: 18px;
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Account Form Dialog.
|
||||
// ----------------------------
|
||||
.dialog--account-form{
|
||||
|
||||
&:not(.dialog--loading) .bp3-dialog-body{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.bp3-dialog-body{
|
||||
|
||||
.bp3-form-group.bp3-inline{
|
||||
|
||||
.bp3-label{
|
||||
min-width: 140px;
|
||||
}
|
||||
.bp3-form-content{
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&.form-group--description{
|
||||
|
||||
.bp3-form-content{
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
textarea{
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--account-code{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group--subaccount{
|
||||
margin-bottom: 16px;
|
||||
|
||||
.bp3-icon-info-circle{
|
||||
color: #A1B2C5;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.form-group--description{
|
||||
textarea{
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,221 +0,0 @@
|
||||
|
||||
|
||||
.authentication-insider {
|
||||
width: 384px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40px;
|
||||
padding-top: 80px;
|
||||
|
||||
&__logo-section {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
.auth-copyright {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.bp3-icon-bigcapital {
|
||||
margin-top: 9px;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #a3a3a3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.authTransition{
|
||||
|
||||
&-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
}
|
||||
|
||||
&-enter-done {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-exit-active {
|
||||
opacity: 0.5;
|
||||
transition: opacity 250ms ease-in-out;
|
||||
}
|
||||
&-exit-active {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.authentication-page {
|
||||
&__goto-bigcapital {
|
||||
position: fixed;
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.bp3-input {
|
||||
min-height: 40px;
|
||||
}
|
||||
.bp3-form-group {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.bp3-form-group.has-password-revealer {
|
||||
.bp3-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.password-revealer {
|
||||
.text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button.bp3-fill.bp3-intent-primary {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&__label-section {
|
||||
margin-bottom: 30px;
|
||||
color: #555;
|
||||
|
||||
h3 {
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: #2d2b43;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #0040bd;
|
||||
}
|
||||
}
|
||||
|
||||
&__form-wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__footer-links {
|
||||
padding: 9px;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
text-align: center;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
a {
|
||||
color: #0052cc;
|
||||
}
|
||||
}
|
||||
|
||||
&__loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(252, 253, 255, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__submit-button-wrap {
|
||||
margin: 0px 0px 24px 0px;
|
||||
|
||||
.bp3-button {
|
||||
background-color: #0052cc;
|
||||
min-height: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
// Login Form
|
||||
// ------------------------------
|
||||
.login-form {
|
||||
// width: 690px;
|
||||
// margin: 0px auto;
|
||||
// padding: 85px 50px;
|
||||
|
||||
.checkbox {
|
||||
&--remember-me {
|
||||
margin: -6px 0 26px 0px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Register form
|
||||
// ----------------------------
|
||||
.register-form {
|
||||
|
||||
&__agreement-section {
|
||||
margin-top: -10px;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit-button-wrap {
|
||||
margin: 25px 0px 25px 0px;
|
||||
|
||||
.bp3-button {
|
||||
min-height: 45px;
|
||||
background-color: #0052cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Send reset password
|
||||
// ----------------------------
|
||||
.send-reset-password {
|
||||
.form-group--crediential {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// Invite form.
|
||||
// ----------------
|
||||
.invite-form {
|
||||
|
||||
&__statement-section {
|
||||
margin-top: -10px;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
|
||||
.authentication-page__loading-overlay {
|
||||
background: rgba(252, 253, 255, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
.dashboard__insider--estimate-form{
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.page-form--estimate{
|
||||
$self: '.page-form';
|
||||
|
||||
#{$self}__header{
|
||||
display: flex;
|
||||
|
||||
&-fields{
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.bp3-label{
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.bp3-form-content{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
&.bp3-inline{
|
||||
max-width: 440px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#{$self}__footer{
|
||||
.form-group--customer_note,
|
||||
.form-group--terms_conditions{
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
|
||||
textarea{
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
.exchangeRate{
|
||||
|
||||
|
||||
&-menu {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog--exchangeRate-form {
|
||||
|
||||
|
||||
|
||||
.bp3-dialog-body {
|
||||
.bp3-form-group.bp3-inline {
|
||||
.bp3-label {
|
||||
min-width: 140px;
|
||||
}
|
||||
.bp3-form-content {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,461 +1,27 @@
|
||||
.form-group-display-columns-by{
|
||||
position: relative;
|
||||
}
|
||||
// .form-group-display-columns-by{
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
|
||||
.financial-statement{
|
||||
|
||||
&__header{
|
||||
|
||||
}
|
||||
|
||||
&__body{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.financial-header-drawer{
|
||||
padding: 25px 26px 25px;
|
||||
position: absolute;
|
||||
top: 101px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.is-hidden{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.row{
|
||||
.col{
|
||||
max-width: 400px;
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-drawer{
|
||||
box-shadow: 0 0 0 transparent;
|
||||
max-height: 550px;
|
||||
height: 100%;
|
||||
padding-bottom: 49px;
|
||||
|
||||
> form{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
height: 100%;
|
||||
}
|
||||
.bp3-drawer-backdrop{
|
||||
background-color: rgba(2, 9, 19, 0.65);
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
margin-bottom: 22px;
|
||||
|
||||
label.bp3-label{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button.button--submit-filter{
|
||||
min-height: 34px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.radio-group---accounting-basis{
|
||||
.bp3-label{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tabs{
|
||||
height: 100%;
|
||||
|
||||
&.bp3-vertical > .bp3-tab-panel{
|
||||
flex: 1 0 0;
|
||||
border-top: 24px solid transparent;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 24px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tabs.bp3-vertical{
|
||||
flex: 1 0 0;
|
||||
|
||||
.bp3-tab-list{
|
||||
width: 220px;
|
||||
border-right: 1px solid #c3cdd5;
|
||||
padding-top: 10px;
|
||||
|
||||
> *:not(:last-child){
|
||||
margin-right: 0;
|
||||
}
|
||||
.bp3-tab-indicator-wrapper{
|
||||
width: 100%;
|
||||
|
||||
.bp3-tab-indicator{
|
||||
border-left: 3px solid #0350f8;
|
||||
background-color: #edf5ff;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tab{
|
||||
color: #333;
|
||||
line-height: 45px;
|
||||
border-radius: 0;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-tab-panel{
|
||||
|
||||
}
|
||||
|
||||
&__footer{
|
||||
background-color: #ecf0f3;
|
||||
border-top: 1px solid #c3cdd5;
|
||||
padding: 8px;
|
||||
padding-left: 230px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row{
|
||||
margin-left: -0.85rem;
|
||||
margin-right: -0.85rem;
|
||||
|
||||
.col{
|
||||
padding-left: 0.85rem;
|
||||
padding-right: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.financial-sheet{
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
min-width: 640px;
|
||||
width: auto;
|
||||
padding: 30px 18px;
|
||||
max-width: 100%;
|
||||
margin: 35px auto;
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
&__title{
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
color: #464646;
|
||||
text-align: center;
|
||||
}
|
||||
&__sheet-type{
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&__date{
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&__table{
|
||||
margin-top: 24px;
|
||||
|
||||
.table{
|
||||
.tbody,
|
||||
.bigcapital-datatable{
|
||||
|
||||
&--financial-report{
|
||||
.table {
|
||||
.thead{
|
||||
.tr .td,
|
||||
.tr .th{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.tr.no-results{
|
||||
.td{
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__inner{
|
||||
&.is-loading{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&__basis{
|
||||
color: #888;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
padding-top: 18px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.dashboard__loading-indicator{
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&--expended{
|
||||
width: auto;
|
||||
}
|
||||
&--trial-balance{
|
||||
min-width: 720px;
|
||||
|
||||
.financial-sheet__table{
|
||||
.tbody{
|
||||
.balance.td{
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--general-ledger{
|
||||
.financial-sheet__table{
|
||||
.tbody{
|
||||
.tr.row-type{
|
||||
|
||||
&--opening_balance,
|
||||
&--closing_balance{
|
||||
.td{
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.name,
|
||||
.amount,
|
||||
.balance{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&--closing_balance .td{
|
||||
border-bottom-color: #666;
|
||||
}
|
||||
|
||||
&--account_name .td.name{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--general-ledger,
|
||||
&--journal{
|
||||
|
||||
}
|
||||
&--journal{
|
||||
.financial-sheet__table{
|
||||
|
||||
.tbody{
|
||||
.tr:not(.no-results) .td{
|
||||
padding: 0.4rem;
|
||||
color: #000;
|
||||
border-bottom-color: #DDD;
|
||||
min-height: 32px;
|
||||
border-left: 1px dotted #DDD;
|
||||
|
||||
&:first-of-type{
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--profit-loss-sheet{
|
||||
|
||||
.financial-sheet__table{
|
||||
.thead,
|
||||
.tbody{
|
||||
.tr .td:not(:first-child),
|
||||
.tr .th:not(:first-child) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
.tr .td:not(:first-child) {
|
||||
border-top-color: #000;
|
||||
}
|
||||
.tr.row_type--total{
|
||||
font-weight: 500;
|
||||
}
|
||||
.tr.row_type--section_total .td{
|
||||
border-top: 1px solid #BBB
|
||||
}
|
||||
.tr.row_type--section_total + .tr .td{
|
||||
background: transparent;
|
||||
border-top: 1px solid #666;
|
||||
}
|
||||
.tr.row_type--section_total:last-child .td{
|
||||
border-bottom: 1px solid #666;
|
||||
}
|
||||
|
||||
.tr.is-expanded{
|
||||
.td.total,
|
||||
.td.total-period{
|
||||
> span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--balance-sheet{
|
||||
.financial-sheet__table{
|
||||
|
||||
.thead,
|
||||
.tbody{
|
||||
.tr .td.account_name ~ .td,
|
||||
.tr .th.account_name ~ .th{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
.tr .total.td{
|
||||
border-top-color: #000;
|
||||
}
|
||||
.tr.row_type--total_row .td{
|
||||
border-top: 1px solid #BBB;
|
||||
}
|
||||
.tr.row_type--total_assets + .tr .td{
|
||||
border-top: 1px solid #666;
|
||||
}
|
||||
.tr.row_type--total_row{
|
||||
.total.td,
|
||||
.account_name.td,
|
||||
.total-period.td{
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tr.is-expanded{
|
||||
.td.total,
|
||||
.td.total-period{
|
||||
> span{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--receivable-aging-summary{
|
||||
|
||||
.financial-sheet__table{
|
||||
|
||||
.bigcapital-datatable{
|
||||
.tbody,
|
||||
.thead{
|
||||
.tr .td.customer_name ~ .td,
|
||||
.tr .th.customer_name ~ .th{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
|
||||
.row-type--total{
|
||||
font-weight: 600;
|
||||
|
||||
.td{
|
||||
border-top-color: #BBB;
|
||||
border-top-style: solid;
|
||||
border-bottom: 3px double #666;
|
||||
}
|
||||
}
|
||||
padding: 8px 0.4rem;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--minimal{
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
|
||||
.financial-sheet{
|
||||
&__title{
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
&__title + .financial-sheet__date{
|
||||
margin-top: 8px;
|
||||
}
|
||||
&__table{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-full-width{
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.financial-reports{
|
||||
padding: 20px 25px;
|
||||
|
||||
.section-title{
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.6rem;
|
||||
font-size: 20px;
|
||||
color: rgb(31, 50, 85);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&__list{
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
&__item{
|
||||
width: 270px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
border: 1px solid #d1dee2;
|
||||
border-top: 3px solid #d1dee2;
|
||||
padding-top: 16px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
|
||||
.title{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.desc{
|
||||
color: rgb(31, 50, 85);
|
||||
line-height: 1.55;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.financial-statement--journal{
|
||||
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
|
||||
|
||||
.dashboard__insider--items-categories{
|
||||
|
||||
.dashboard__actions-bar{
|
||||
border-bottom: 2px solid #EAEAEA;
|
||||
}
|
||||
}
|
||||
@@ -1,316 +0,0 @@
|
||||
.dashboard-content--preferences {
|
||||
flex-direction: row;
|
||||
flex: 1 0 0;
|
||||
min-width: auto;
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
.dashboard {
|
||||
&__preferences-content {
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.preferences-page {
|
||||
&__inside-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&--tabable {
|
||||
margin-left: -25px;
|
||||
margin-right: -25px;
|
||||
}
|
||||
|
||||
.card{
|
||||
margin: 15px;
|
||||
}
|
||||
.bigcapital-datatable{
|
||||
|
||||
.table .tbody .tbody-inner > .loading{
|
||||
padding: 30px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__inside-content {
|
||||
.#{$ns}-tab-list {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
align-items: baseline;
|
||||
|
||||
.#{$ns}-tab {
|
||||
font-weight: 400;
|
||||
line-height: 44px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs-extra-actions {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.preferences-page {
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
|
||||
&__content {
|
||||
flex: 1 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 220px;
|
||||
|
||||
.dashboard__card {
|
||||
margin: 15px;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Preferences topbar.
|
||||
// -----------------------------
|
||||
.preferences-topbar {
|
||||
border-bottom: 1px solid #d2dde2;
|
||||
min-height: 60px;
|
||||
flex: 60px 0 0;
|
||||
padding: 0 0 0 22px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
&__title {
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: #48485b;
|
||||
}
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 14px;
|
||||
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
padding: 0;
|
||||
background-size: contain;
|
||||
background-color: #eed1f2;
|
||||
border-radius: 50%;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
|
||||
.user-text {
|
||||
font-size: 12px;
|
||||
color: #804f87;
|
||||
}
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #eed1f2;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
margin-left: auto;
|
||||
padding-right: 15px;
|
||||
margin-right: 15px;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
|
||||
.bp3-button + .bp3-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Preferences sidebar.
|
||||
// -----------------------------
|
||||
.preferences-sidebar {
|
||||
background: #e5eaee;
|
||||
border-right: 1px solid #c6d0d9;
|
||||
min-width: 220px;
|
||||
max-width: 220px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
|
||||
&__wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ScrollbarsCustom-Track {
|
||||
&.ScrollbarsCustom-TrackY,
|
||||
&.ScrollbarsCustom-TrackX{
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
.ScrollbarsCustom-Thumb{
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ScrollbarsCustom-Thumb{
|
||||
&.ScrollbarsCustom-ThumbX,
|
||||
&.ScrollbarsCustom-ThumbY {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
padding: 0 22px;
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
color: #48485b;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
|
||||
.#{$ns}-menu-item {
|
||||
padding: 10px 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
|
||||
&:hover,
|
||||
&.#{$ns}-active {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// General page
|
||||
//---------------------------------
|
||||
.preferences-page__inside-content--general {
|
||||
.card {
|
||||
padding: 25px;
|
||||
|
||||
.card__footer {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e7ea;
|
||||
margin-top: 30px;
|
||||
|
||||
.bp3-button {
|
||||
min-width: 60px;
|
||||
|
||||
+ .bp3-button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group {
|
||||
max-width: 550px;
|
||||
|
||||
.bp3-label {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.bp3-form-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Users/Roles List.
|
||||
// ---------------------------------
|
||||
.preferences-page__inside-content--users{
|
||||
|
||||
.bigcapital-datatable {
|
||||
|
||||
.td{
|
||||
.avatar{
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
background: #b7bfc6;
|
||||
border-radius: 50%;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.td.status {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tr:last-child .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Currencies List.
|
||||
// ---------------------------------
|
||||
.preferences-page__inside-content--currencies{
|
||||
|
||||
.bigcapital-datatable {
|
||||
|
||||
.tr:last-child .td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accountant.
|
||||
// ---------------------------------
|
||||
.preferences-page__inside-content--accountant {
|
||||
.card {
|
||||
padding: 25px;
|
||||
|
||||
.card__footer {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e7ea;
|
||||
margin-top: 30px;
|
||||
|
||||
.bp3-button {
|
||||
min-width: 60px;
|
||||
|
||||
+ .bp3-button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--select-list{
|
||||
|
||||
button{
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-form-group {
|
||||
|
||||
.bp3-form-helper-text{
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
label.bp3-label {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
47
client/src/style/variables.scss
Normal file
47
client/src/style/variables.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
@import '@blueprintjs/core/src/common/_variables.scss';
|
||||
|
||||
$ns: bp3;
|
||||
|
||||
$pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
|
||||
0 2px 4px rgba(16, 22, 26, 0.1), 0 8px 24px rgba(16, 22, 26, 0.1);
|
||||
|
||||
$blue1: #0069ff;
|
||||
$blue2: #0052ff;
|
||||
$blue3: rgb(0, 82, 204);
|
||||
$pt-link-color: $blue3;
|
||||
$pt-intent-primary: $blue1;
|
||||
$menu-item-color-hover: $light-gray4;
|
||||
$menu-item-color-active: $light-gray3;
|
||||
|
||||
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
|
||||
|
||||
$sidebar-zindex: 15;
|
||||
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
|
||||
|
||||
$button-box-shadow: 0 0 0 !default;
|
||||
$button-box-shadow-active: 0 0 0 !default;
|
||||
$button-intent-box-shadow: 0 0 0 !default;
|
||||
$button-intent-box-shadow-active: 0 0 0 !default;
|
||||
|
||||
$button-background-color-disabled: #E9ECEF !default;
|
||||
$button-background-color: #E6EFFB !default;
|
||||
$button-background-color-hover: #CFDCEE !default;
|
||||
|
||||
|
||||
$sidebar-background: #01194e;
|
||||
$sidebar-text-color: #fff;
|
||||
$sidebar-width: 100%;
|
||||
$sidebar-menu-item-color: rgba(255, 255, 255, 0.9);
|
||||
$sidebar-menu-item-color-active: rgb(255, 255, 255);
|
||||
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
$sidebar-menu-label-color: rgba(255, 255, 255, 0.45);
|
||||
$sidebar-submenu-item-color: rgba(255, 255, 255, 0.6);
|
||||
$sidebar-submenu-item-hover-color: rgba(255, 255, 255, 0.85);
|
||||
$sidebar-logo-opacity: 0.55;
|
||||
$sidebar-submenu-item-bg-color: #01287d;
|
||||
|
||||
$form-check-input-checked-color: #fff;
|
||||
$form-check-input-checked-bg-color: $blue1;
|
||||
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
|
||||
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
|
||||
Reference in New Issue
Block a user