mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 05:10:31 +00:00
feat: apply new cards design system.
feat: empty status datatables. fix: edit account.
This commit is contained in:
Ahmed Bouhuolia
@@ -204,17 +204,20 @@ body.authentication {
|
||||
}
|
||||
|
||||
|
||||
// .page-form
|
||||
// .page-form__header
|
||||
// .page-form__content
|
||||
// .page-form__floating-actions
|
||||
.page-form{
|
||||
|
||||
&__header{
|
||||
padding: 20px;
|
||||
&__header{
|
||||
background-color: #fbfbfb;
|
||||
padding: 30px 20px 20px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
&__primary-section{
|
||||
background-color: #fbfbfb;
|
||||
padding: 30px 20px 20px;
|
||||
margin: -20px;
|
||||
padding-bottom: 6px;
|
||||
|
||||
}
|
||||
|
||||
&__header-fields{
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
.table .thead{
|
||||
.th{
|
||||
border-bottom-color: #eaeaea;
|
||||
border-bottom-color: #D2DDE2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,11 +25,10 @@
|
||||
padding: 0.6rem 0.5rem;
|
||||
background: #fafafa;
|
||||
font-size: 14px;
|
||||
color: #445165;
|
||||
color: #58667b;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgb(224, 224, 224);
|
||||
}
|
||||
|
||||
.sort-icon{
|
||||
width: 0;
|
||||
height: 0;
|
||||
@@ -145,7 +144,7 @@
|
||||
}
|
||||
}
|
||||
.tr:hover .td{
|
||||
background: #fafafa;
|
||||
background: #f3f7fc;
|
||||
}
|
||||
|
||||
.tr.is-context-menu-active .td{
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
|
||||
.Pane.Pane2 {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.Resizer {
|
||||
|
||||
@@ -19,13 +19,20 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
|
||||
}
|
||||
|
||||
// Form
|
||||
.bp3-label{
|
||||
label.bp3-label{
|
||||
color: #353535;
|
||||
font-weight: 400;
|
||||
|
||||
.required{
|
||||
color: red;
|
||||
}
|
||||
|
||||
.bp3-form-group.bp3-inline &{
|
||||
margin: 0 10px 0 0;
|
||||
line-height: 1.6;
|
||||
padding-top: calc(.3rem + 1px);
|
||||
padding-bottom: calc(.3rem + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-input{
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
|
||||
.dashboard__insider--bill-form{
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.page-form--bill{
|
||||
$self: '.page-form';
|
||||
|
||||
@@ -8,9 +8,11 @@
|
||||
padding: 0;
|
||||
}
|
||||
#{$self}__primary-section{
|
||||
padding: 30px 22px 0;
|
||||
margin: -20px -20px 14px;
|
||||
padding: 10px 0 0;
|
||||
margin: 0 0 20px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.bp3-form-group{
|
||||
@@ -41,7 +43,6 @@
|
||||
&:not(:last-child) {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&.input-group--salutation-list{
|
||||
width: 25%;
|
||||
}
|
||||
@@ -158,8 +159,8 @@
|
||||
}
|
||||
|
||||
#{$self}__floating-actions {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
|
||||
|
||||
&__topbar{
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #F2EFEF;
|
||||
|
||||
&-right,
|
||||
@@ -121,7 +121,7 @@
|
||||
|
||||
&,
|
||||
&-group{
|
||||
height: 42px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.#{$ns}-navbar-divider{
|
||||
@@ -138,7 +138,7 @@
|
||||
}
|
||||
&.bp3-minimal:active,
|
||||
&.bp3-minimal.bp3-active{
|
||||
background: rgba(167, 182, 194, 0.12);
|
||||
background: #a7b6c21f;
|
||||
color: #32304a;
|
||||
}
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
}
|
||||
}
|
||||
.#{$ns}-icon{
|
||||
color: #2A293D;
|
||||
color: #32304a;
|
||||
margin-right: 7px;
|
||||
}
|
||||
&.#{$ns}-minimal.#{$ns}-intent-danger{
|
||||
@@ -203,7 +203,7 @@
|
||||
|
||||
h1{
|
||||
font-size: 22px;
|
||||
color: #333363;
|
||||
color: #48485c;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -233,13 +233,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__hint{
|
||||
display: inline-block;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__subtitle{
|
||||
|
||||
}
|
||||
&__insider{
|
||||
margin-bottom: 40px;
|
||||
flex: 1 0 0;
|
||||
|
||||
}
|
||||
|
||||
&__offline-badge{
|
||||
@@ -260,6 +264,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-width: 850px;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
@@ -279,7 +284,9 @@
|
||||
&__insider{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
flex: 1 0 0;
|
||||
background-color: #FBFBFB;
|
||||
|
||||
> .dashboard__loading-indicator{
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
@@ -313,6 +320,23 @@
|
||||
display: flex;
|
||||
flex: 1 0 0;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
margin: 20px;
|
||||
border: 1px solid #d2dce2;
|
||||
|
||||
.bigcapital-datatable{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 0;
|
||||
|
||||
.pagination{
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&:not(.has-pagination){
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.datatable-empty-status{
|
||||
margin-top: auto;
|
||||
@@ -323,7 +347,6 @@
|
||||
|
||||
&__preferences-topbar{
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
// height: 70px;
|
||||
height: 65px;
|
||||
padding: 0 0 0 22px;
|
||||
display: flex;
|
||||
@@ -362,6 +385,43 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card{
|
||||
border: 1px solid #d2dce2;
|
||||
background: #fff;
|
||||
|
||||
&--page{
|
||||
flex: 1 0 0;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__error-boundary{
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
|
||||
h1{
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
margin: 0px 0 10px;
|
||||
color: #2c3a5d;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 16px;
|
||||
color: #1f3255;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.bp3-icon{
|
||||
margin-top: 6px;
|
||||
|
||||
path{
|
||||
fill: #a1afca;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs--dashboard-views{
|
||||
@@ -408,7 +468,7 @@
|
||||
|
||||
.navbar--dashboard-views{
|
||||
box-shadow: 0 0 0;
|
||||
border-bottom: 1px solid #EAEAEA;
|
||||
border-bottom: 1px solid #d2dce2;
|
||||
}
|
||||
|
||||
.navbar-omnibar{
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
.dashboard__insider--estimate-form{
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.estimate-form {
|
||||
padding-bottom: 30px;
|
||||
display: flex;
|
||||
@@ -185,195 +189,3 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// .estimate-form {
|
||||
// padding-bottom: 30px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
|
||||
// .bp3-form-group {
|
||||
// margin: 25px 20px 15px;
|
||||
// width: 100%;
|
||||
// .bp3-label {
|
||||
// font-weight: 500;
|
||||
// font-size: 13px;
|
||||
// color: #444;
|
||||
// width: 130px;
|
||||
// }
|
||||
// .bp3-form-content {
|
||||
// // width: 400px;
|
||||
// width: 45%;
|
||||
// }
|
||||
// }
|
||||
// // .expense-form-footer {
|
||||
// // display: flex;
|
||||
// // padding: 30px 25px 0;
|
||||
// // justify-content: space-between;
|
||||
// // }
|
||||
|
||||
// &__primary-section {
|
||||
// background: #fbfbfb;
|
||||
// }
|
||||
// &__table {
|
||||
// padding: 15px 15px 0;
|
||||
|
||||
// .bp3-form-group {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// .table {
|
||||
// border: 1px dotted rgb(195, 195, 195);
|
||||
// border-bottom: transparent;
|
||||
// border-left: transparent;
|
||||
|
||||
// .th,
|
||||
// .td {
|
||||
// border-left: 1px dotted rgb(195, 195, 195);
|
||||
|
||||
// &.index {
|
||||
// > span,
|
||||
// > div {
|
||||
// text-align: center;
|
||||
// width: 100%;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .thead {
|
||||
// .tr .th {
|
||||
// padding: 10px 10px;
|
||||
// background-color: #f2f5fa;
|
||||
// font-size: 14px;
|
||||
// font-weight: 500;
|
||||
// color: #333;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .tbody {
|
||||
// .tr .td {
|
||||
// padding: 7px;
|
||||
// border-bottom: 1px dotted rgb(195, 195, 195);
|
||||
// min-height: 46px;
|
||||
|
||||
// &.index {
|
||||
// background-color: #f2f5fa;
|
||||
// text-align: center;
|
||||
|
||||
// > span {
|
||||
// margin-top: auto;
|
||||
// margin-bottom: auto;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .tr {
|
||||
// .bp3-form-group .bp3-input,
|
||||
// .form-group--select-list .bp3-button {
|
||||
// border-radius: 3px;
|
||||
// padding-left: 8px;
|
||||
// padding-right: 8px;
|
||||
// }
|
||||
|
||||
// .bp3-form-group:not(.bp3-intent-danger) .bp3-input,
|
||||
// .form-group--select-list:not(.bp3-intent-danger) .bp3-button {
|
||||
// border-color: #e5e5e5;
|
||||
// }
|
||||
|
||||
// &:last-of-type {
|
||||
// .td {
|
||||
// border-bottom: transparent;
|
||||
|
||||
// .bp3-button,
|
||||
// .bp3-input-group {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .td.actions {
|
||||
// .bp3-button {
|
||||
// background-color: transparent;
|
||||
// color: #e68f8e;
|
||||
|
||||
// &:hover {
|
||||
// color: #c23030;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &.row--total {
|
||||
// .td.amount {
|
||||
// font-weight: bold;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .th {
|
||||
// color: #444;
|
||||
// font-weight: 600;
|
||||
// border-bottom: 1px dotted #666;
|
||||
// }
|
||||
|
||||
// .td {
|
||||
// border-bottom: 1px dotted #999;
|
||||
|
||||
// &.description {
|
||||
// .bp3-form-group {
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .actions.td {
|
||||
// .bp3-button {
|
||||
// background: transparent;
|
||||
// margin: 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &__floating-footer {
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// width: 100%;
|
||||
// background: #fff;
|
||||
// padding: 18px 18px;
|
||||
// border-top: 1px solid #ececec;
|
||||
|
||||
// .has-mini-sidebar & {
|
||||
// left: 50px;
|
||||
// }
|
||||
// }
|
||||
// .bp3-button {
|
||||
// &.button--clear-lines {
|
||||
// background-color: #fcefef;
|
||||
// }
|
||||
// }
|
||||
// .button--clear-lines,
|
||||
// .button--new-line {
|
||||
// padding-left: 14px;
|
||||
// padding-right: 14px;
|
||||
// }
|
||||
// .dropzone-container {
|
||||
// margin-top: 0;
|
||||
// align-self: flex-end;
|
||||
// }
|
||||
// .dropzone {
|
||||
// width: 300px;
|
||||
// height: 75px;
|
||||
// }
|
||||
|
||||
// .form-group--description {
|
||||
// .bp3-label {
|
||||
// font-weight: 500;
|
||||
// font-size: 13px;
|
||||
// color: #444;
|
||||
// }
|
||||
// .bp3-form-content {
|
||||
// // width: 280px;
|
||||
// textarea {
|
||||
// width: 450px;
|
||||
// min-height: 75px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
.dashboard__insider--estimate-form{
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.page-form--estimate{
|
||||
$self: '.page-form';
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
&__header {
|
||||
padding: 25px 27px 20px;
|
||||
|
||||
@@ -285,15 +285,18 @@
|
||||
&__list{
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
margin-left: -28px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
&__item{
|
||||
width: 270px;
|
||||
margin-bottom: 40px;
|
||||
margin-left: 28px;
|
||||
border-top: 2px solid #DDD;
|
||||
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;
|
||||
@@ -303,6 +306,7 @@
|
||||
color: rgb(31, 50, 85);
|
||||
line-height: 1.55;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
|
||||
.dashboard__insider--invoice-form{
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.page-form--invoice{
|
||||
$self: '.page-form';
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
|
||||
|
||||
.page-form--item{
|
||||
$self: '.page-form';
|
||||
padding: 20px;
|
||||
@@ -8,9 +7,12 @@
|
||||
padding: 0;
|
||||
}
|
||||
#{$self}__primary-section{
|
||||
padding: 30px 22px 0;
|
||||
margin: -20px -20px 24px;
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
padding-bottom: 5px;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
#{$self}__body{
|
||||
@@ -65,8 +67,8 @@
|
||||
}
|
||||
|
||||
#{$self}__floating-actions{
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
|
||||
.form-group--active{
|
||||
display: inline-block;
|
||||
|
||||
@@ -58,4 +58,11 @@
|
||||
min-width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__insider{
|
||||
|
||||
&--make-journal-page{
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
@@ -9,8 +9,13 @@
|
||||
}
|
||||
|
||||
.tbody{
|
||||
.amount > span{
|
||||
font-weight: 600;
|
||||
.td.amount{
|
||||
.bp3-popover-target{
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
> span{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.note{
|
||||
.bp3-icon{
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
|
||||
.dashboard__insider--payment-made{
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.page-form--payment-made {
|
||||
$self: '.page-form';
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
.dashboard__insider--payment-receive-form{
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.page-form--payment-receive {
|
||||
$self: '.page-form';
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
|
||||
.dashboard__insider--receipt-form{
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.page-form--receipt{
|
||||
$self: '.page-form';
|
||||
|
||||
@@ -107,7 +107,7 @@ $sidebar-submenu-item-bg-color: #01287d;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.#{$ns}-menu-item {
|
||||
padding: 7px 16px;
|
||||
padding: 8px 16px;
|
||||
font-size: 15px;
|
||||
color: $sidebar-submenu-item-color;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user