mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
feat: Financial statements enhancement.
This commit is contained in:
Ahmed Bouhuolia
@@ -6,6 +6,11 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
|
||||
@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;
|
||||
|
||||
@@ -118,3 +123,13 @@ body.authentication {
|
||||
.bp3-datepicker-caption .bp3-html-select::after{
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
|
||||
.hint{
|
||||
color: #a1b2c5;
|
||||
margin-left: 6px;
|
||||
|
||||
.bp3-icon{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -254,10 +254,16 @@
|
||||
border-top: 1px solid #666;
|
||||
border-bottom: 1px solid #666;
|
||||
|
||||
padding: 10px 0.4rem;
|
||||
padding: 8px 0.4rem;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
.tbody{
|
||||
.tr .td{
|
||||
border-bottom: 1px dotted #BBB;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
$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;
|
||||
|
||||
@@ -9,7 +10,7 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
|
||||
left: 220px;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 14px 16px;
|
||||
padding: 14px 18px;
|
||||
border-top: 1px solid #ececec;
|
||||
|
||||
.has-mini-sidebar &{
|
||||
@@ -48,7 +49,7 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
|
||||
|
||||
&.#{$ns}-intent-danger{
|
||||
select{
|
||||
box-shadow: 0 0 0 0 rgba(219, 55, 55, 0),
|
||||
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),
|
||||
@@ -285,13 +286,13 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
|
||||
}
|
||||
input:checked ~ .#{$ns}-control-indicator {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||
border-color: #137cbd;
|
||||
background-color: #137cbd;
|
||||
border-color: $form-check-input-checked-bg-color;
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
}
|
||||
input:indeterminate ~ .#{$ns}-control-indicator {
|
||||
background-image: escape-svg($form-check-input-indeterminate-bg-image);
|
||||
border-color: #137cbd;
|
||||
background-color: #137cbd;
|
||||
border-color: $form-check-input-checked-bg-color;
|
||||
background-color: $form-check-input-checked-bg-color;
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
@@ -314,8 +315,6 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
|
||||
Styleguide radio
|
||||
*/
|
||||
&.#{$ns}-radio {
|
||||
|
||||
|
||||
.#{$ns}-control-indicator{
|
||||
border: 2px solid #cecece;
|
||||
|
||||
@@ -326,10 +325,10 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
|
||||
}
|
||||
|
||||
input:checked ~ .#{$ns}-control-indicator{
|
||||
border-color: #137cbd;
|
||||
border-color: $form-check-input-checked-bg-color;
|
||||
|
||||
&::before {
|
||||
background-image: radial-gradient(#137cbd 40%, transparent 40%);
|
||||
background-image: radial-gradient($form-check-input-checked-bg-color 40%, transparent 40%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -68,8 +68,8 @@
|
||||
background-size: contain;
|
||||
background-color: #EED1F2;
|
||||
border-radius: 50%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
|
||||
.user-text {
|
||||
font-size: 12px;
|
||||
@@ -156,6 +156,19 @@
|
||||
background: rgba(219, 55, 55, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.button--blue-highlight{
|
||||
background-color: #ebfaff;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: darken(#ebfaff, 2.5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.button--gray-highlight{
|
||||
background-color: rgba(127, 189, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.button--table-views{
|
||||
|
||||
@@ -9,70 +9,49 @@
|
||||
width: 100%;
|
||||
.bp3-form-group {
|
||||
.bp3-label {
|
||||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
.bp3-form-content {
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
min-width: 300px;
|
||||
min-height: 32px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
}
|
||||
}
|
||||
.bp3-input-group {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
|
||||
}
|
||||
&.form-group--ref_no {
|
||||
.bp3-input-group .bp3-input {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--payment_account {
|
||||
.bp3-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 15px;
|
||||
|
||||
}
|
||||
.bp3-form-content {
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
min-width: 380px;
|
||||
min-height: 32px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-group--currency {
|
||||
.bp3-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 15px;
|
||||
|
||||
}
|
||||
.bp3-form-content {
|
||||
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
|
||||
min-width: 180px;
|
||||
min-height: 32px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
padding: 15px 25px 0;
|
||||
padding: 15px 15px 0;
|
||||
|
||||
.bp3-form-group {
|
||||
margin-bottom: 0;
|
||||
@@ -160,19 +139,9 @@
|
||||
}
|
||||
|
||||
&.row--total {
|
||||
.account.td,
|
||||
.debit.td,
|
||||
.credit.td {
|
||||
> span {
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
.debit.td,
|
||||
.credit.td {
|
||||
> span {
|
||||
font-weight: 600;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.td.amount{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -212,17 +181,17 @@
|
||||
.dropzone {
|
||||
width: 300px;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
margin-right: 20px;
|
||||
.expense-form-footer{
|
||||
display: flex;
|
||||
padding: 30px 25px 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.form-group--description {
|
||||
padding: 25px 27px 20px;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.bp3-label {
|
||||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
@@ -230,10 +199,32 @@
|
||||
.bp3-form-content {
|
||||
// width: 280px;
|
||||
textarea {
|
||||
width: 300px;
|
||||
height: 75px;
|
||||
margin-right: 20px;
|
||||
width: 450px;
|
||||
min-height: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dashboard__insider--expenses{
|
||||
|
||||
.bigcapital-datatable{
|
||||
|
||||
.tbody{
|
||||
.total_amount{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.description{
|
||||
.bp3-icon{
|
||||
color: #666;
|
||||
}
|
||||
.bp3-tooltip-indicator{
|
||||
cursor: initial;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -52,7 +52,8 @@
|
||||
}
|
||||
|
||||
.financial-sheet{
|
||||
border: 1px solid #EEE;
|
||||
border: 2px solid #F1F1F1;
|
||||
border-radius: 10px;
|
||||
min-width: 640px;
|
||||
width: auto;
|
||||
padding: 30px 20px;
|
||||
@@ -64,22 +65,22 @@
|
||||
|
||||
&__title{
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
color: #464646;
|
||||
text-align: center;
|
||||
}
|
||||
&__sheet-type{
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&__date{
|
||||
text-align: center;
|
||||
color: #888;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
&__table{
|
||||
@@ -93,11 +94,6 @@
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
.tbody{
|
||||
.code.td{
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
.tr.no-results{
|
||||
.td{
|
||||
flex-direction: column;
|
||||
@@ -130,23 +126,32 @@
|
||||
}
|
||||
&--trial-balance{
|
||||
min-width: 720px;
|
||||
|
||||
.financial-sheet__table{
|
||||
.tbody{
|
||||
.balance.td{
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&--general-ledger{
|
||||
.table .tbody{
|
||||
|
||||
.tr.row-type{
|
||||
.financial-sheet__table{
|
||||
.tbody{
|
||||
.tr.row-type{
|
||||
|
||||
&--opening_balance,
|
||||
&--closing_balance{
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
&--opening_balance,
|
||||
&--closing_balance{
|
||||
background-color: #fbfbfb;
|
||||
}
|
||||
|
||||
&--closing_balance .td{
|
||||
border-bottom-color: #666;
|
||||
}
|
||||
&--closing_balance .td{
|
||||
border-bottom-color: #666;
|
||||
}
|
||||
|
||||
&--account_name .td.name{
|
||||
font-weight: 500;
|
||||
&--account_name .td.name{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -188,6 +193,9 @@
|
||||
.account_code.td{
|
||||
color: #666;
|
||||
}
|
||||
.total.td {
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
|
||||
.row--income_total,
|
||||
.row--expense_total,
|
||||
@@ -201,4 +209,70 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--balance-sheet{
|
||||
.financial-sheet__table{
|
||||
.tbody{
|
||||
|
||||
.total.td{
|
||||
border-bottom-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--receivable-aging-summary{
|
||||
|
||||
.financial-sheet__table{
|
||||
.tbody{
|
||||
.row-type--total{
|
||||
font-weight: 600;
|
||||
|
||||
.td{
|
||||
background-color: #fafbff;
|
||||
border-bottom-color: #666;
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.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: -28px;
|
||||
}
|
||||
|
||||
&__item{
|
||||
width: 270px;
|
||||
margin-bottom: 40px;
|
||||
margin-left: 28px;
|
||||
border-top: 2px solid #DDD;
|
||||
padding-top: 16px;
|
||||
|
||||
.title{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.desc{
|
||||
color: rgb(31, 50, 85);
|
||||
line-height: 1.55;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
background-color: #F2F5FA;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
color: #1e1c3e;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -37,7 +37,8 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
padding: 16px 12px;
|
||||
|
||||
&-logo{
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
|
||||
svg{
|
||||
opacity: 0.5;
|
||||
@@ -59,7 +60,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
.#{$ns}-menu-item {
|
||||
color: $sidebar-menu-item-color;
|
||||
border-radius: 0;
|
||||
padding: 10px 16px;
|
||||
padding: 9px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
|
||||
@@ -81,7 +82,14 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
> .#{$ns}-icon-caret-right {
|
||||
margin-right: -4px;
|
||||
margin-top: 3px;
|
||||
color: #42547b;
|
||||
color: #354569;
|
||||
}
|
||||
&-label{
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 12px;
|
||||
padding: 4px 16px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,7 +127,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
color: $sidebar-menu-item-color;
|
||||
}
|
||||
.#{$ns}-menu-divider {
|
||||
border-top-color: #152a55;
|
||||
border-top-color: rgba(255, 255, 255, 0.1);
|
||||
color: #6b708c;
|
||||
margin: 4px 0;
|
||||
}
|
||||
@@ -134,39 +142,22 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
white-space: nowrap;
|
||||
width: 50px;
|
||||
|
||||
|
||||
// Hide text of bigcapital logo.
|
||||
.sidebar__head-logo{
|
||||
|
||||
.bp3-icon-bigcapital{
|
||||
path{
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
path:not(.path-1):not(.path-2) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hide text of menu items and right caret icon.
|
||||
.bp3-collapse,
|
||||
.bp3-icon-caret-right,
|
||||
.bp3-menu-item .bp3-text-overflow-ellipsis{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar__menu{
|
||||
|
||||
.bp3-menu{
|
||||
> li:not(.bp3-submenu):not(.bp3-menu-divider):not(.has-icon){
|
||||
|
||||
.bp3-menu-item{
|
||||
&:before{
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon='ellipsis-h' width='18' height='18' fill='%235c7080' viewBox='0 0 512 512'%3E%3Cdesc%3Eellipsis-h%3C/desc%3E%3Cpath d='M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z' class='path-1' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar__scroll-wrapper{
|
||||
@@ -185,17 +176,8 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-collapse,
|
||||
.bp3-icon-caret-right,
|
||||
.bp3-menu-item .bp3-text-overflow-ellipsis{
|
||||
display: block;
|
||||
}
|
||||
.sidebar__menu .bp3-menu > li:not(.bp3-submenu):not(.bp3-menu-divider) .bp3-menu-item{
|
||||
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
.sidebar__menu{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user