WIP financial statements.

client/src/style/App.scss

@@ -20,6 +20,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 // Objects
 @import "objects/form";
 @import "objects/typography";
+@import "objects/buttons";
 
 // Components
 @import "components/data-table";

client/src/style/components/data-table.scss

@@ -1,8 +1,6 @@
 
-.bigcapital-datatable{
-  
+.bigcapital-datatable{  
   display: block;
-  // max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
 
@@ -18,8 +16,6 @@
       overflow-x: hidden;
 
       .th{
-        
-
         padding: 1rem 1.5rem;
         background: #F8FAFA;
         font-size: 14px;
@@ -78,7 +74,7 @@
         .inner-resizer{
           height: 100%;
           width: 1px;
-          background: #ececec;
+          border-left: 1px solid #ececec;
           margin: 0 auto;
         }
 
@@ -104,6 +100,58 @@
         border-radius: 2px;
       }
     }
+
+    .tr .th.expander,
+    .tr .td.expander{
+      padding: 0;
+
+      .toggle{
+        cursor: pointer;
+        display: block;
+        padding: 14px 8px;
+        padding-left: 0;
+        margin-left: 4px;
+      }
+      
+      .arrow-right{
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: 8px solid #acacac;
+        display: block;
+      }
+
+      .arrow-down{
+        width: 0; 
+        height: 0; 
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 8px solid #acacac;
+        display: block;
+      }
+
+      + .td,
+      + .th{
+        padding-left: 0;
+      }
+    }
+  }
+
+
+  &--financial-report{
+  
+    .thead{
+      .tr .th{
+        background: transparent;
+        border-top: 1px solid #666;
+        border-bottom: 1px solid #666;
+
+        padding: 10px 1.5rem;
+        color: #222;
+      }
+    }
+  
   }
 }
 

client/src/style/objects/buttons.scss

@@ -0,0 +1,58 @@
+
+
+.form-group--select-list{
+
+  .bp3-button{
+    border-radius: 0;
+    
+
+    &,
+    &:hover{
+      background: #fff;
+      box-shadow: 0 0 0;  
+      border: 1px solid #ced4da;
+    }
+  }
+}
+
+.form-group--select-list.bp3-fill{
+
+  .bp3-popover-wrapper{
+    &,
+    .bp3-popover-target{
+      width: 100%;
+    }
+  
+    .bp3-button{
+      width: 100%;
+      justify-content: space-between;
+      color: #333;
+    }
+  }
+}
+
+.form-group--select-list{
+
+  .bp3-popover-open{
+
+    .bp3-button{
+      border-color: #80bdff;
+    }
+  }
+}
+
+.bp3-button{
+  min-width: 32px;
+  min-height: 32px;
+
+  &.bp3-intent-primary,
+  &.bp3-intent-success,
+  &.bp3-intent-danger,
+  &.bp3-intent-warning{
+     
+    &,
+    &:hover{
+      box-shadow: 0 0 0;
+    }
+  }
+}

client/src/style/objects/form.scss

@@ -17,15 +17,22 @@ label{
 }
 
 .#{$ns}-input{
-  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0),
-    0 0 0 0 rgba(19, 124, 189, 0),
-    inset 0 0 0 1px rgba(16, 22, 26, 0.1),
-    inset 0 1px 1px rgba(16, 22, 26, 0.15);
+  box-shadow: 0 0 0;
+  border: 1px solid #ced4da;
+  border-radius: 0;
+  height: 32px;
+  line-height: 32px;
+  color: #333;
+
+  &:focus,
+  &.bp3-active{
+    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); 
+    border-color: #80bdff;
+  }
 }
 
-
-
 .#{$ns}-form-group{
+  margin-bottom: 20px;
 
   &.#{$ns}-intent-danger{
     select{
@@ -36,4 +43,51 @@ label{
         inset 0 1px 1px rgba(16, 22, 26, 0.2);
     }
   }
+
+  .#{$ns}-label{
+    margin-bottom: 6px;
+
+    .#{$ns}-icon-info-circle{
+      margin-left: 3px;
+      position: relative;
+      top: -1px;
+      color: #A1B2C5;
+    }
+  }
 }
+
+.#{$ns}-button:not([class*=".#{$ns}-intent-"]) {
+  background-image: none;
+}
+
+.#{$ns}-html-select select,
+.#{$ns}-select select{
+  background-image: none;
+  border-radius: 0;
+  
+  &,
+  &:hover{
+    background: #fff;
+    box-shadow: 0 0 0;
+    border: 1px solid #ced4da;
+  }
+  &:focus{
+    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); 
+    border-color: #80bdff;
+  }
+}
+
+.bp3-datepicker-caption select{
+  
+  &,
+  &:hover{
+    border-color: transparent;
+  }
+}
+
+.form-group--select-list{
+
+  .#{$ns}-icon-caret-down{
+    color: #8D8D8D;
+  }
+}

client/src/style/objects/typography.scss

@@ -1,4 +1,9 @@
 
+
+body{
+  color: #212529;
+}
+
 .#{$ns}-heading{
   font-weight: 300;
 }

client/src/style/pages/financial-statements.scss

@@ -4,8 +4,14 @@
 .financial-statement{
 
   &__header{
-    padding: 30px;
+    padding: 25px 26px 25px;
     background: #FDFDFD;
+
+    .bp3-form-group .bp3-label{
+      font-weight: 500;
+      font-size: 13px;
+      color: #444;
+    }
   }
 
   &__body{
@@ -21,28 +27,44 @@
   margin-left: auto;
   margin-right: auto;
   padding: 20px;
-  margin-top: 40px;
+  padding-top: 30px;
+  margin-top: 35px;
 
   &__title{
+    margin: 0;
     font-weight: 200;
     font-size: 22px;
     color: #222;
     text-align: center;
   }
-
   &__sheet-type{
     text-align: center;
+    margin: 0;
+    font-size: 15px;
+    font-weight: 400;
+    color: #666;
+    margin-top: 6px;
   }
-
   &__date{
     text-align: center;
+    color: #888;
+    margin-top: 6px;
   }
-
   &__table{
+    margin-top: 24px;
 
+    .tbody{
+      .code.td{
+        color: #777;
+      }
+    }
   }
-
   &__accounting-basis{
 
   }
+
+  &--trial-balance{
+    min-width: 720px;
+  }
+
 }