WIP Financial statements.

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

@@ -1,5 +1,5 @@
 
-.bigcapital-datatable{  
+.bigcapital-datatable{
   display: block;
   overflow-x: auto;
   overflow-y: hidden;
@@ -138,8 +138,7 @@
     }
   }
 
-  .no-results{
-    
+  .no-results{    
     color: #666;
 
     .td{
@@ -149,6 +148,15 @@
     }
   }
 
+  &.has-sticky-header{
+
+    .thead{
+      .tr .th{
+        position: sticky;
+      }
+    }
+  }
+
   &--financial-report{
   
     .thead{

client/src/style/objects/buttons.scss

@@ -30,7 +30,7 @@
   min-height: 32px;
   background-color: #E6EFFB;
   color: #555555;
-  box-shadow: 0 0 0;
+  box-shadow: 0 0 0 transparent;
 
   .form-group--select-list &{
     border-radius: 0;
@@ -38,7 +38,7 @@
     &,
     &:hover{
       background: #fff;
-      box-shadow: 0 0 0;  
+      box-shadow: 0 0 0 transparent;  
       border: 1px solid #ced4da;
     }
   }
@@ -53,7 +53,7 @@
 
     &,
     &:hover{
-      box-shadow: 0 0 0;
+      box-shadow: 0 0 0 transparent;
     }    
   }
 }

client/src/style/objects/form.scss

@@ -94,4 +94,110 @@ label{
   .#{$ns}-icon-caret-down{
     color: #8D8D8D;
   }
+}
+
+
+
+
+///@extend
+
+
+
+.#{$ns}-control {
+
+  input:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-color: transparent;
+    background-image: none;
+  }
+  &:hover input:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-color: transparent;
+  }
+  input:not(:disabled):active:checked ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background: transparent;
+  }
+  input:disabled:checked ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background: transparent;
+  }
+
+  &.#{$ns}-disabled {
+    cursor: not-allowed;
+    color: $pt-text-color-disabled;
+  }
+
+  &.#{$ns}-inline {
+    display: inline-block;
+    margin-right: $pt-grid-size * 2;
+  }
+ 
+  .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background-clip: padding-box;
+    background-color: transparent;
+    background-image: none;
+    width: 18px;
+    height: 18px;
+    
+    &::before {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &:hover .#{$ns}-control-indicator {
+    background-color: transparent;
+  }
+
+  input:not(:disabled):active ~ .#{$ns}-control-indicator {
+    box-shadow: 0 0 0 transparent;
+    background: transparent;
+  }
+ 
+  /*
+    Radio
+
+    Markup:
+    <label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
+      <input type="radio" name="docs-radio-regular" {{:modifier}} />
+      <span class="#{$ns}-control-indicator"></span>
+      Radio
+    </label>
+
+    :checked  - Selected
+    :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+    .#{$ns}-align-right - Right-aligned indicator
+    .#{$ns}-large - Large
+
+    Styleguide radio
+  */
+  &.#{$ns}-radio {
+
+    .#{$ns}-control-indicator{
+      border: 2px solid #cecece;
+
+      &::before{
+        height: 14px;
+        width: 14px;
+      }
+    }
+
+    input:checked ~ .#{$ns}-control-indicator{
+      border-color: #137cbd;
+
+      &::before {
+        background-image: radial-gradient(#137cbd 40%, transparent 40%);
+      }
+    }
+
+    input:checked:disabled ~ .#{$ns}-control-indicator::before {
+      opacity: 0.5;
+    }
+
+    input:focus ~ .#{$ns}-control-indicator {
+      -moz-outline-radius: $control-indicator-size;
+    }
+  }
 }

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

@@ -7,26 +7,46 @@
     padding: 25px 26px 25px;
     background: #FDFDFD;
 
-    .bp3-form-group .bp3-label{
-      font-weight: 500;
-      font-size: 13px;
-      color: #444;
+    .bp3-form-group,
+    .radio-group---accounting-basis{
+      
+      .bp3-label{
+        font-weight: 500;
+        font-size: 13px;
+        color: #444;
+      }
+    }
+    .bp3-button.button--submit-filter{
+      min-height: 34px;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+    .radio-group---accounting-basis{
+      .bp3-label{
+        margin-bottom: 12px;
+      }
     }
   }
 
   &__body{
     padding-left: 20px;
     padding-right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 }
 
 .financial-sheet{
   border: 1px solid #E2E2E2;
   min-width: 640px;
-  width: 0;
-  padding: 20px;
-  padding-top: 30px;
+  width: auto;
+  padding: 30px 20px;
+  max-width: 100%;
   margin: 35px auto;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
 
   &__title{
     margin: 0;
@@ -57,14 +77,24 @@
       }
     }
   }
-  &__accounting-basis{
-
+  &__basis{
+    color: #888;
+    text-align: center;
+    margin-top: auto;
+    padding-top: 16px;
+    font-size: 12px;
+  }
+  .dashboard__loading-indicator{
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--expended{
+    width: auto;
   }
- 
   &--trial-balance{
     min-width: 720px;
   }
-
   &--general-ledger,
   &--journal{
     width: auto;
@@ -73,11 +103,8 @@
     margin-top: 10px;
     border-color: #EEEDED;
   }
-
   &--journal{
-
     .financial-sheet__table{
-
       .tbody{
         .tr .td{
           padding: 0.4rem;
@@ -96,4 +123,25 @@
       }
     }
   }
+
+  &--profit-loss-sheet{
+
+    .financial-sheet__table{
+      .tbody{
+        .account_code.td{
+          color: #666;
+        }
+        
+        .row--income_total,
+        .row--expense_total,
+        .row--net_income{
+          font-weight: 600;
+
+          .total.td{
+            border-bottom-color: #555;
+          }
+        }
+      }
+    }
+  }
 }