re-structure to monorepo.

packages/webapp/src/style/components/Alert.scss

@@ -0,0 +1,7 @@
+.bp3-alert{
+  .bp3-alert-footer{
+    .bp3-button{
+      min-width: 70px;
+    }
+  }
+}

packages/webapp/src/style/components/BigAmount.scss

@@ -0,0 +1,21 @@
+
+.big-amount{
+  text-align: right;
+
+  &__label{
+    color: #5d6f90;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+  }
+  &__number{
+    margin: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+    margin-top: 6px;
+    color: #343463;
+    line-height: 1;
+    font-size: 34px;
+  }
+}

packages/webapp/src/style/components/BigcapitalLoading.scss

@@ -0,0 +1,21 @@
+.bigcapital-loading {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  display: flex;
+  background: #fff;
+  z-index: 999999;
+
+  .center {
+    width: auto;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .text {
+    margin-top: 12px;
+    opacity: 0.85;
+    display: none;
+  }
+}

packages/webapp/src/style/components/CloudSpinner.scss

@@ -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;
+  }
+}

packages/webapp/src/style/components/CustomScrollbar.scss

@@ -0,0 +1,53 @@
+.ScrollbarsCustom {
+  position: 'relative';
+  width: 100%;
+  height: 100%;
+}
+.ScrollbarsCustom-Wrapper {
+  position: 'absolute';
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.ScrollbarsCustom-Content {
+  box-sizing: 'border-box';
+}
+
+.ScrollbarsCustom-Track {
+  &.ScrollbarsCustom-TrackY,
+  &.ScrollbarsCustom-TrackX {
+    position: absolute;
+    overflow: hidden;
+    border-radius: 4px;
+    user-select: none;
+  }
+  &.ScrollbarsCustom-TrackX {
+    height: 10px;
+    width: calc(100% - 10px);
+    bottom: 0;
+    left: 5px;
+  }
+  &.ScrollbarsCustom-TrackY {
+    width: 10px;
+    height: calc(100% - 10px);
+    top: 5px;
+    right: 2px;
+  }
+}
+.ScrollbarsCustom-Thumb {
+  &.ScrollbarsCustom-ThumbX,
+  &.ScrollbarsCustom-ThumbY {
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  &.ScrollbarsCustom-ThumbX {
+    height: 100%;
+    width: 0px;
+  }
+  &.ScrollbarsCustom-ThumbY {
+    height: 100%;
+    width: 8px;
+  }
+}

packages/webapp/src/style/components/DataTable/DataTable.scss

@@ -0,0 +1,404 @@
+@import 'src/style/Base.scss';
+
+.bigcapital-datatable {
+  display: block;
+
+  .table {
+    text-align: left;
+    border-spacing: 0;
+    min-width: 100%;
+    display: block;
+
+    .thead .thead-inner,
+    .tbody .tbody-inner{
+      min-width: fit-content;
+    }
+
+    .thead {
+      overflow: hidden;
+
+      .th {
+        padding: 0.68rem 0.5rem;
+        background: #f5f5f5;
+        font-size: 14px;
+        color: #4E5B6F;
+        font-weight: 400;
+        border-bottom: 1px solid #d2dde2;
+
+        >div {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .sort-icon {
+        width: 0;
+        height: 0;
+        position: relative;
+        top: -2px;
+        display: inline-block;
+        margin-left: 5px;
+
+        &--desc {
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-bottom: 6px solid #666;
+        }
+
+        &--asc {
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 6px solid #666;
+        }
+      }
+    }
+
+    .tr {
+      display: flex;
+      flex: 1 0 auto;
+
+      &:last-child {
+        .td {
+          border-bottom: 0;
+        }
+      }
+
+      .bp3-context-menu-popover-target {
+        z-index: 100;
+      }
+
+      .tr-context {
+        display: flex;
+        flex: 1 0 auto;
+      }
+
+      &:hover .td.clickable {
+        cursor: pointer;
+      }
+    }
+
+    .th,
+    .td {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      justify-content: flex-start;
+      align-items: flex-start;
+      display: flex;
+      margin: 0;
+      padding: 0.5rem;
+
+      .cell-inner {
+        flex: 1 0 0;
+      }
+
+      &:last-child {
+        border-right: 0;
+      }
+
+      .bp3-control {
+        margin-bottom: 0;
+      }
+
+      .resizer {
+        display: inline-block;
+        background: transparent;
+        width: 10px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translateX(50%);
+        z-index: 1;
+        touch-action: none;
+
+        .inner-resizer {
+          height: 100%;
+          width: 1px;
+          border-left: 1px solid #e6e6e6;
+          margin: 0 auto;
+        }
+
+        &.isResizing .inner-resizer {
+          background: #1183da;
+        }
+      }
+
+      .bp3-control.bp3-checkbox .bp3-control-indicator {
+        cursor: auto;
+
+        &,
+        &:hover {
+          height: 15px;
+          width: 15px;
+        }
+      }
+
+      .bp3-control.bp3-checkbox {
+
+        input:checked~.bp3-control-indicator,
+        input:indeterminate~.bp3-control-indicator {
+          border-color: #0052ff;
+        }
+      }
+
+      .skeleton {
+        animation: skeleton-fade-in 0.3s linear forwards,
+          skeleton-glow 1s linear infinite alternate;
+
+        animation-delay: 0s, 0.3s;
+        height: 8px;
+        opacity: 1;
+        width: 65%;
+        margin: 10px 0;
+      }
+
+      &.align-right {
+        .skeleton {
+          margin-left: auto;
+        }
+      }
+
+      &.align-center {
+        .skeleton {
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+    }
+
+    .th {
+      .skeleton {
+        margin: 5px 0;
+      }
+    }
+
+    .tbody {
+      width: 100%;
+      overflow: auto;
+
+      .tbody-inner {
+        >.loading {
+          padding-top: 40px;
+        }
+      }
+
+      .tr .td {
+        border-bottom: 1px solid #e0e0e0;
+        align-items: center;
+        color: #101219;
+
+        .placeholder {
+          color: #a0a0a0;
+        }
+
+        .text-overview {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+
+        .bp3-form-group {
+          width: 100%;
+        }
+
+        &.is-text-overview {
+          .expend-padding {
+            display: flex;
+            width: 100%;
+          }
+        }
+      }
+
+      .tr:hover .td {
+        background: #f3f7fc;
+      }
+
+      .tr.is-context-menu-active .td {
+        background: #f3fafc;
+      }
+
+      .td.actions .#{$ns}-button {
+        background: #e6effb;
+        border: 0;
+        box-shadow: none;
+        padding: 5px 15px;
+        border-radius: 8px;
+
+        &:hover,
+        &:focus {
+          background-color: #cfdcee;
+        }
+
+        svg {
+          color: #425361;
+        }
+
+        .bp3-icon-more-h-16 {
+          margin-top: 2px;
+        }
+      }
+
+      .tr.no-results {
+        .td {
+          flex-direction: column;
+          padding: 18px 20px;
+          color: #777;
+          align-items: center;
+          font-size: 14px;
+          border-bottom: 0;
+
+          &:hover {
+            background: transparent;
+          }
+        }
+      }
+
+      >.loading {
+        padding-top: 50px;
+      }
+    }
+
+    .tr .th,
+    .tr .td {
+      .expand-toggle {
+        cursor: auto;
+        display: inline-block;
+        padding: 4px 8px;
+        padding-left: 0;
+        margin: auto 0;
+        margin-left: 4px;
+        vertical-align: top;
+
+        .expand-arrow {
+          width: 0;
+          height: 0;
+          border-top: 5px solid transparent;
+          border-bottom: 5px solid transparent;
+          border-left: 8px solid #acacac;
+          display: block;
+          transition: all 0.1s cubic-bezier(.4, 1, .75, .9);
+
+          &.is-expanded {
+            transform: rotate(90deg);
+          }
+        }
+
+        &:hover {
+          .expand-arrow {
+            border-left-color: #7d8593;
+          }
+        }
+      }
+    }
+
+    .tr-inner {
+      display: flex;
+      width: 100%;
+    }
+
+    &-size {
+
+      &--medium {
+        .tbody .tr {
+          background-size: red;
+          min-height: 46px;
+        }
+      }
+
+      &--small {
+        .tbody .tr {
+          min-height: 40px;
+        }
+      }
+    }
+  }
+
+  .no-results {
+    color: #666;
+
+    .td {
+      padding-top: 20px;
+      padding-bottom: 20px;
+      width: 100%;
+    }
+  }
+
+  &.has-sticky-header {
+    .thead {
+      .tr .th {
+        position: sticky;
+      }
+    }
+  }
+
+  &.has-sticky {
+
+    .thead,
+    .tfoot {
+      position: sticky;
+      z-index: 1;
+    }
+
+    .thead {
+      top: 0;
+    }
+
+    .tfoot {
+      bottom: 0;
+    }
+
+    .tbody {
+      position: relative;
+      z-index: 0;
+    }
+
+    [data-sticky-td] {
+      position: sticky;
+    }
+
+    [data-sticky-last-left-td] {
+
+    }
+
+    [data-sticky-first-right-td] {
+
+    }
+  }
+
+  &.has-virtualized-rows {
+    .tbody {
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+  }
+
+  .ReactVirtualized__Grid {
+    will-change: auto !important;
+  }
+}
+
+.table-constrant,
+.table--constrant {
+  .table {
+    .thead {
+      .tr:first-of-type .th {
+        border-top: 1px solid #000000;
+      }
+    }
+
+    .thead .th {
+      background: #fff;
+      color: #000;
+      border-bottom: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: #fff;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+      color: #000;
+    }
+  }
+}

packages/webapp/src/style/components/DataTable/DataTableEditable.scss

@@ -0,0 +1,249 @@
+.datatable-editor {
+  
+  .bp3-form-group {
+    margin-bottom: 0;
+  }
+  .table {
+    border: 1px solid #d2dce2;
+    border-left: transparent;
+    background-color: #FFF;
+
+    .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;
+        color: #415060;
+        border-bottom: 1px solid #d2dce2;
+
+        &.index > div {
+          width: 100%;
+        }
+      }
+    }
+
+    .tbody {
+      .tr .td {
+        padding: 4px;
+        border-bottom: 0;
+        border-top: 1px solid #d8d8d8;
+        min-height: 40px;
+
+        &.index {
+          background-color: #f0f2f8;
+          color: #718294;
+
+          > span {
+            margin-top: auto;
+            margin-bottom: auto;
+          }
+        }
+
+        &.landed-cost{
+          
+          .bp3-control{
+            margin-top: 0;
+            margin-left: 34px;
+          }
+          .bp3-control-indicator{
+            height: 18px;
+            width: 18px;
+            border-color: #dbdbdb;
+          }
+        }
+      }
+      .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;
+          }
+        }
+
+        .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;
+            }
+          }
+
+        }
+        .td {
+          &.note {
+            .bp3-form-group {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    .tfooter{
+      .td{
+        min-height: 38px;
+      }
+    }
+    .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;
+      }
+    }
+
+
+    .tbody,
+    .thead,
+    .tfooter{
+
+      // .total,
+      .quantity,
+      .rate,
+      .discount,
+      .total{
+
+        &,
+        input{
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .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;
+
+        &:hover{
+          background-color: #f8e4e4;
+        }
+      }
+    }
+  }
+
+  .tfooter{
+    .debit.td,
+    .credit.td {
+      > span {
+        font-weight: 600;
+        color: #444;
+      }
+    }
+    .td {
+      border-top-width: 2px;
+      border-top-color: #e9e9ef;
+      border-top-style: solid;
+      min-height: 40px;
+      font-weight: 500;
+
+
+      &:not(.index) {
+        background-color: #fcfcfd;
+      }
+
+      &:first-of-type{
+        background-color: #f0f2f8;
+      }
+
+
+      &.index span {
+        display: none;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/DataTable/DataTableEmptyStatus.module.scss

@@ -0,0 +1,39 @@
+.root {
+  max-width: 500px;
+  width: 100%;
+  margin: auto;
+  padding-bottom: 40px;
+  text-align: center;
+
+  &_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;
+
+    html[lang='ar'] & {
+      font-size: 22px;
+    }
+  }
+  &_desc {
+    font-size: 16px;
+    color: #1f3255;
+    opacity: 0.8;
+    line-height: 1.6;
+  }
+  &_actions {
+    margin-top: 26px;
+
+    :global .bp3-button {
+      min-height: 36px;
+
+      & + .bp3-button {
+        margin-left: 10px;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/DataTable/Pagination.scss

@@ -0,0 +1,118 @@
+
+.pagination{
+  display: flex;
+  padding: 20px 14px;
+  font-size: 13px;
+
+  .bp3-button{
+    background: transparent;
+    padding: 5px;
+  }
+
+  &__item{
+    min-width: 24px;
+    min-height: 24px;
+
+    &:not([class*="bp3-intent-"]){
+      color: #666666; 
+      border-radius: 5px;
+
+      &:hover{
+        background-color: #E6EFFB;
+      }
+    }
+
+    .bp3-icon{
+      margin-right: 4px;
+      color: #666666;
+    }
+
+    .pagination .pagination__buttons-group .bp3-button-group &{
+      border-radius: 5px;
+    }
+    &--next,
+    &--previous{
+
+      &.bp3-button{
+        padding-left: 10px;
+        padding-right: 10px;
+
+        .bp3-icon {
+
+          [dir="rtl"] & {
+            transform: scale(-1);
+          }
+        }
+
+      }
+    }
+
+    &.is-active{
+      &.bp3-intent-primary:disabled,
+      &.bp3-intent-primary.bp3-disabled{
+        background-color: #E6EFFB;
+      }
+
+      &:not([class*="bp3-intent-"]) {
+      }
+      .bp3-button-text{        
+        color: #000;
+      }
+    }
+
+    &--next{
+
+      .bp3-icon{
+        order: 1;
+        margin-right: 0;
+        margin-left: 4px;
+      }
+    }
+  }
+
+  &__info{
+    color: #888;
+    margin-left: 12px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__controls{
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+
+    .bp3-html-select{
+      margin-left: 6px;
+
+      select{
+        height: 24px;
+        width: auto;
+        padding: 0;
+        padding-right: 0px;
+        border: 1px solid #e8e8e8;
+        font-size: 13px;
+        border-radius: 3px;
+        color: #666;
+        padding-right: 14px;
+        padding-left: 8px;
+      }
+
+      &::after{
+        border-left-width: 3px;
+        border-right-width: 3px;
+        border-top-width: 4px;
+        margin-right: 6px;
+      }
+    } 
+  }
+
+  &__goto-control{
+    display: none;
+  }
+
+  &__pagesize-control{
+    margin-left: 12px;
+    color: #888;
+  }
+}

packages/webapp/src/style/components/Details.scss

@@ -0,0 +1,56 @@
+.details-menu {
+
+  &--vertical {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    .detail-item{
+      flex-direction: column;
+      flex-grow: 1;
+
+      &__content{
+        margin: 2px 0;
+      }
+    }
+  }
+
+  &--horizantal {
+    display: flex;
+    flex-direction: column;
+
+    .detail-item{
+      flex-direction: row;
+
+      &:not(:first-of-type){
+        margin-top: 12px;
+      }
+
+      &__label{
+        padding-right: 10px;
+      }
+
+      &__content{
+        width: 100%;
+      }
+    }
+  }
+
+  .detail-item {
+    line-height: 1.3rem;
+    display: flex;
+
+    &__label {
+      color: #727983;
+      font-weight: 500;
+    }
+
+    &__content {
+      text-transform: capitalize;
+    }
+  }
+
+  + .details-menu{
+    margin-top: 18px;
+  }
+}

packages/webapp/src/style/components/Dialog/Dialog.scss

@@ -0,0 +1,19 @@
+@import '../../Base.scss';
+
+// Dialog
+.#{$ns}-dialog{
+  background: #fff;
+
+  &-header{
+    background: #ebf1f5;
+  }
+
+  &-body{
+    &.is-loading{
+      .bp3-spinner{
+        padding-top: 10px;
+        margin-bottom: -10px;
+      } 
+    }
+  }
+}

packages/webapp/src/style/components/Drawer.scss

@@ -0,0 +1,67 @@
+@import '../Base.scss';
+
+.bp3-drawer {
+  .bp3-drawer-header {
+    margin-bottom: 2px;
+    background-color: #FFF;
+
+    .bp3-heading {
+      font-weight: 500;
+    }
+
+    .bp3-heading,
+    .bp3-icon {
+      color: #354152;
+    }
+  }
+}
+
+.drawer{
+  &__insider{
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    background-color: #fbfbfb;
+  }
+
+  &__main-tabs{
+    .bp3-tabs {
+      .bp3-tab-list {
+        position: relative;
+        background-color: #fff;
+  
+        &:before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          height: 2px;
+          background: #e1e2e8;
+        }
+  
+        > *:not(:last-child) {
+          margin-right: 25px;
+        }
+  
+        &.bp3-large > .bp3-tab {
+          font-size: 15px;
+          color: #555;
+          margin: 0 0.8rem;
+  
+          &[aria-selected='true'],
+          &:not([aria-disabled='true']):hover {
+            color: $pt-link-color;
+          }
+        }
+      }
+  
+      .bp3-tab-panel {
+        margin-top: 0;
+  
+        .card {
+          margin: 15px;
+        }
+      }
+    }  
+  }
+}

packages/webapp/src/style/components/Drawers/AccountDrawer.scss

@@ -0,0 +1,37 @@
+
+
+.account-drawer {
+  
+  .card-header{
+    margin: 15px;
+    padding: 22px 15px;
+  }
+
+  &__content-header {
+    
+    .detail-item{
+      flex-grow: 1;
+
+      .big-number {
+        font-size: 28px;
+        color: #c06361;
+        margin: 6px 0;
+        font-weight: 600;
+        margin-bottom: 0;
+      }
+
+      &--account-normal{
+
+        .bp3-icon{
+          position: relative;
+          top: -2px;
+          margin-left: 2px;
+  
+          svg{
+            fill: #6a7994;
+          }
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/BillDrawer.module.scss

@@ -0,0 +1,57 @@
+.root {}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+  }
+  &_header {}
+
+  &_table {
+    margin-top: 30px;
+
+    :global .bigcapital-datatable {
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+
+    :global .total_lines {
+      margin-left: auto;
+
+      &_line {
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount {
+          text-align: right;
+        }
+        .title{
+          padding-left: 0;
+        }
+      }
+    }
+
+    .total_line {
+      &_subtotal {
+        border-bottom: 1px solid #000;
+      }
+      &_total {
+        border-bottom: 3px double #000;
+        font-weight: 600;
+      }
+      &_dueAmount {
+        font-weight: 600;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/CashflowTransactionDrawer.scss

@@ -0,0 +1,99 @@
+.cashflow-drawer {
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
+  }
+
+  .card {
+    .amount {
+      font-size: 28px;
+      color: #c06361;
+      margin: 6px 0;
+      font-weight: 600;
+    }
+  }
+
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+
+    .thead,
+    .tbody {
+      .tr .td,
+      .tr .th {
+        &.credit,
+        &.debit {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &__content {
+    &-header {
+      margin-bottom: 35px;
+
+      .detail-item {
+        flex-grow: 1;
+
+        &--amount {
+          width: 20%;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+
+      .total-lines {
+        margin-left: auto;
+      }
+    }
+  }
+  .total-lines {
+    &__line {
+      display: flex;
+
+      > div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .credit,
+      .debit {
+        font-weight: 600;
+        width: 155px;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+      &--total {
+        border-bottom: 3px double #000;
+      }
+      &--subtotal,
+      &--total {
+        text-align: right;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/DrawerTemplate.scss

@@ -0,0 +1,138 @@
+#page-size {
+  margin: 0 auto;
+  background-color: transparent;
+  width: 680px;
+  // width: 21cm;
+  // height: 29.7cm;
+  padding-bottom: 20px;
+}
+
+.template {
+  background-color: transparent;
+  margin: 25px 20px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0px 35px 20px 5px;
+    &--title h1 {
+      font-weight: 600;
+      color: #1c4587;
+      margin: 0;
+    }
+    &--title p {
+      color: #666666;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-wrap: wrap;
+    border-bottom: 2px solid #1155cc;
+    padding: 2px 2px 30px;
+    &__info {
+      flex: 0 1 22%;
+      padding-left: 5px;
+      color: #999999;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 1.6rem;
+      margin-bottom: 10px;
+
+      .info-paragraph-amount {
+        margin-top: 8px;
+        color: #123163;
+        font-size: 26px;
+        font-weight: 500;
+      }
+
+      .info-paragraph {
+        font-size: 15px;
+        color: #000;
+      }
+    }
+  }
+
+  &__table {
+    display: flex;
+    flex-direction: column;
+    padding: 0px 5px;
+    margin: 5px 0px 20px 0px;
+
+    .bigcapital-datatable {
+      .table {
+        font-size: 15px;
+        color: #000;
+
+        .thead .tr .th .resizer {
+          display: none;
+        }
+        .thead .th,
+        .tbody .tr .td {
+          margin-bottom: 15px;
+          background: transparent;
+        }
+        .thead .th {
+          font-size: 16px;
+          font-weight: 400;
+          border-bottom: none;
+          color: #1155cc;
+          // padding-left: 1px;
+        }
+        .tbody .tr .td {
+          font-size: 15px;
+          padding: 10px;
+          // padding-left: 1px;
+          border-bottom: 1px solid #cecbcb;
+        }
+      }
+    }
+  }
+
+  &__terms {
+    padding: 0px 5px;
+    &__title h4 {
+      font-size: 16px;
+      font-weight: 400;
+      color: #666666;
+      margin-bottom: 5px;
+    }
+
+    ul {
+      list-style: none;
+    }
+    ul li {
+      color: #000;
+      font-size: 14px;
+    }
+    ul li::before {
+      content: '•';
+      color: #b7b7b7;
+      display: inline-block;
+      width: 1em;
+      margin-left: 0.7em;
+    }
+  }
+}
+
+.bp3-drawer.bp3-position-right {
+  bottom: 0;
+  right: 0;
+  top: 0;
+  overflow: auto;
+  height: 100%;
+
+  .bp3-drawer-header .bp3-heading {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+    flex: 1 1 auto;
+    line-height: inherit;
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #0d244a;
+  }
+}

packages/webapp/src/style/components/Drawers/EstimateDetails.module.scss

@@ -0,0 +1,69 @@
+
+.root{}
+
+.detail_panel {
+
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  } 
+
+  &_table{
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+  
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer{
+    :global .total_lines {
+      margin-left: auto;
+  
+      &_line {
+        .title{
+          padding-left: 0;
+        }
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount{
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  .total_line{
+    &_subtotal {
+      
+    }
+
+    &_total {
+      
+    }
+    &_dueAmount {
+      
+    }
+  }
+
+  &_note{
+
+    b{
+      color: #727983;
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ExpenseDrawer.scss

@@ -0,0 +1,107 @@
+.expense-drawer {
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
+
+    .amount {}
+  }
+
+  &__content-header {
+    margin-bottom: 30px;
+
+    .detail-item {
+      flex-grow: 1;
+
+      &--amount {
+        width: 20%;
+      }
+
+      .big-number {
+        font-size: 28px;
+        color: #c06361;
+        margin: 6px 0;
+        font-weight: 600;
+      }
+    }
+
+    .details-menu+.details-menu {
+      margin-top: 14px;
+    }
+
+    .details-menu--horizantal {
+
+      .detail-item {
+
+        &__label {
+          min-width: 120px;
+        }
+      }
+    }
+  }
+
+  &__content-footer {
+    display: flex;
+
+    .total-lines {
+      margin-left: auto;
+    }
+  }
+
+
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+  }
+
+
+  .total-lines {
+
+    &__line {
+      display: flex;
+
+      >div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .amount {
+        font-weight: 600;
+        width: 260px;
+      }
+
+      &--subtotal,
+      &--total {
+        text-align: right;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+
+      &--total {
+        border-bottom: 3px double #000;
+      }
+    }
+
+  }
+
+}

packages/webapp/src/style/components/Drawers/InventoryAdjustmentDrawer.module.scss

@@ -0,0 +1,24 @@
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  }
+
+  &_header {
+    margin-bottom: 30px;
+  }
+
+  &_table {
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+      .thead,
+      .tbody {
+        .quantity,
+        .cost,
+        .value {
+          text-align: right;
+        }
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ItemDrawer.scss

@@ -0,0 +1,41 @@
+.item-drawer {
+  .card {
+    margin: 15px;
+    padding: 22px 15px;
+  }
+
+  &__content {
+    .detail-item--name {
+      width: 30%;
+
+      .detail-item__content {
+        font-weight: 600;
+      }
+    }
+
+    .detail-item--quantity {
+      .detail-item__content {
+        font-weight: 600;
+
+        .mines {
+          color: #c23030;
+        }
+      }
+    }
+
+    .details-menu--vertical {
+      padding-bottom: 15px;
+      border-bottom: 1px solid #e2e2e2;
+    }
+
+    .details-menu--horizantal {
+      .detail-item:not(:first-of-type) {
+        margin-top: 16px;
+      }
+
+      .detail-item__label {
+        min-width: 180px;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ManualJournalDrawer.scss

@@ -0,0 +1,113 @@
+.journal-drawer {
+
+  .card {
+    margin: 15px;
+    padding: 25px 15px 35px;
+  }
+
+  .card {
+
+    .amount {
+      font-size: 28px;
+      color: #c06361;
+      margin: 6px 0;
+      font-weight: 600;
+    }
+  }
+
+  .table {
+    .thead .th {
+      background: transparent;
+      color: #222222;
+      border-bottom: 1px solid #000000;
+      border-top: 1px solid #000000;
+      padding: 0.5rem;
+    }
+
+    .tbody .tr .td {
+      background: transparent;
+      padding: 0.5rem 0.5rem;
+      border-bottom: 0;
+    }
+
+    .tbody .tr:last-child .td {
+      border-bottom: 1px solid #d2dce2;
+    }
+
+    .thead,
+    .tbody{
+      .tr .td,
+      .tr .th{
+        &.credit,
+        &.debit{
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &__content {
+
+    &-header {
+      margin-bottom: 35px;
+
+      .detail-item {
+        flex-grow: 1;
+
+        &--amount {
+          width: 20%;
+        }
+      }
+    }
+
+    &-footer {
+      display: flex;
+
+      .total-lines {
+        margin-left: auto;
+      }
+    }
+
+    &-description {
+      margin-top: 20px;
+
+      .title {
+        color: #727983;
+      }
+    }
+  }
+
+
+  .total-lines {
+
+    &__line {
+      display: flex;
+
+      >div {
+        padding: 7px 8px;
+      }
+
+      .title {
+        width: 220px;
+        font-weight: 600;
+      }
+
+      .credit,
+      .debit {
+        font-weight: 600;
+        width: 155px;
+      }
+
+      &--subtotal {
+        border-bottom: 1px solid #000;
+      }
+      &--total {
+        border-bottom: 3px double #000;
+      }
+      &--subtotal,
+      &--total{
+        text-align: right;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ReceiptDrawer.module.scss

@@ -0,0 +1,62 @@
+.root {}
+
+.detail_panel {
+    :global .card {
+        padding: 22px 15px;
+    }
+
+    &_header {}
+
+    &_table {
+        margin-top: 30px;
+
+        :global .bigcapital-datatable {
+
+            .thead,
+            .tbody {
+
+                .quantity,
+                .rate,
+                .amount {
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    &_footer {
+        display: flex;
+
+        :global .total_lines {
+            margin-left: auto;
+
+            &_line {
+
+                .amount,
+                .title {
+                    width: 180px;
+                }
+
+                .amount {
+                    text-align: right;
+                }
+            }
+        }
+
+        .total_line {
+            &_subtotal {
+                border-bottom: 1px solid #000;
+            }
+
+            &_total {
+                border-bottom: 3px double #000;
+                font-weight: 600;
+            }
+
+            &_dueAmount {
+                font-weight: 600;
+            }
+        }
+
+    }
+}

packages/webapp/src/style/components/Drawers/VendorCreditDetail.module.scss

@@ -0,0 +1,68 @@
+.root {
+}
+
+.detail_panel {
+  :global .card {
+    padding: 22px 15px;
+    margin: 15px;
+  }
+
+  &_table {
+    :global .bigcapital-datatable {
+      margin-top: 30px;
+
+      .thead,
+      .tbody {
+        .quantity,
+        .rate,
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    :global .total_lines {
+      margin-left: auto;
+
+      &_line {
+        .title {
+          padding-left: 0;
+        }
+        .amount,
+        .title {
+          width: 180px;
+        }
+        .amount {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  .total_line {
+    &_subtotal {
+      border-bottom: 1px solid #000;
+    }
+
+    &_total {
+      border-bottom: 3px double #000;
+      font-weight: 600;
+    }
+    &_dueAmount {
+      font-weight: 600;
+    }
+  }
+
+  &_note {
+    b {
+      color: #727983;
+    }
+  }
+}

packages/webapp/src/style/components/Drawers/ViewDetail/ViewDetail.scss

@@ -0,0 +1,68 @@
+@import '../../../Base.scss';
+
+.view-detail-drawer {
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+      background-color: #fff;
+
+      &:before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background: #e1e2e8;
+      }
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #555;
+        margin: 0 0.8rem;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: $pt-link-color;
+        }
+      }
+    }
+
+    .bp3-tab-panel {
+      margin-top: 0;
+
+      .card {
+        margin: 15px;
+      }
+    }
+  }
+
+  .datatable--landed-cost-transactions {
+    .table {
+      .tbody,
+      .tbody-inner {
+        height: auto;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+      .tbody {
+        .tr .td {
+          padding: 0.6rem;
+
+          &.amount {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+
+  .card {
+    margin: 15px;
+  }
+}

packages/webapp/src/style/components/Hint.scss

@@ -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;
+  }
+}

packages/webapp/src/style/components/MaterialProgressBar.scss

@@ -0,0 +1,149 @@
+// IONIC DEFAULT THEME COLORS
+$colors: (primary: #387ef5,
+  secondary: #32db64,
+  danger: #f53d3d,
+  light: #f4f4f4,
+  dark: #222);
+
+.progress,
+progress[value] {
+  width: 100%;
+  border: none;
+  margin: 5px 0;
+  height: 5px;
+  display: block;
+  appearance: none;
+  -webkit-appearance: none;
+
+  &::-webkit-progress-bar {
+    background-color: lighten(map-get($colors, primary), 35%);
+  }
+
+  &::-webkit-progress-value {
+    background-color: map-get($colors, primary);
+  }
+}
+
+.progress-materializecss {
+  position: absolute;
+  top: -1px;
+  height: 2px;
+  display: block;
+  width: 100%;
+  background-color: transparent;
+  margin: 0;
+  overflow: hidden;
+
+  .indeterminate {
+    background-color: #002fff;
+
+    &:before {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      animation: indeterminate-left 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      will-change: left, right;
+
+      [dir="rtl"] & {
+        animation: indeterminate-right 3.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      }
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      animation: indeterminate-short-left 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      animation-delay: 2.15s;
+
+      [dir="rtl"] & {
+        animation: indeterminate-short-right 3.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      }
+    }
+  }
+}
+
+@keyframes indeterminate-left {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+
+@keyframes indeterminate-short-left {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+
+
+@keyframes indeterminate-right {
+  0% {
+    right: -35%;
+    left: 100%;
+  }
+
+  60% {
+    right: 100%;
+    left: -90%;
+  }
+
+  100% {
+    right: 100%;
+    left: -90%;
+  }
+}
+
+@keyframes indeterminate-short-right {
+  0% {
+    right: -200%;
+    left: 100%;
+  }
+
+  60% {
+    right: 107%;
+    left: -8%;
+  }
+
+  100% {
+    right: 107%;
+    left: -8%;
+  }
+}
+
+.progress-container {
+  width: 100%;
+  position: relative;
+
+}
+
+//  IRRELEVANTS STYLES  //
+/////////////////////////

packages/webapp/src/style/components/Menu.scss

@@ -0,0 +1,7 @@
+.bp3-menu-item {
+
+    .menu-item-space {
+        width: 6px;
+        display: inline-block;
+    }
+}

packages/webapp/src/style/components/Overlay.scss

@@ -0,0 +1,6 @@
+
+
+
+.bp3-overlay-backdrop {
+    background-color: rgba(0, 10, 30, 0.7);
+  }

packages/webapp/src/style/components/PageForm.scss

@@ -0,0 +1,69 @@
+// .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 rgb(210, 221, 226);
+    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
+
+    .bp3-button-group{
+      
+      .bp3-button{
+        &:not(:last-child),
+        &.bp3-popover-wrapper:not(:last-child) {
+          border-right: 1px solid rgba(92, 112, 127, 0.3);
+          margin-right: 0;
+
+          &.bp3-intent-primary{
+            border-right: 1px solid rgba(255, 255, 255, 0.3);
+          }
+        }
+      }
+    }
+  }
+  &--strip {
+    #{$self}__header-fields {
+      width: 85%;
+
+      .bp3-form-group{
+        margin-bottom: 16px;
+      }
+
+      > .bp3-form-group:last-of-type{
+        margin-bottom: 0;
+      }
+    }
+    #{$self}__header {
+      background-color: #FFF;
+      padding: 25px 32px;
+      border-bottom: 1px solid #d2dce2;
+
+      .bp3-form-group.bp3-inline label.bp3-label {
+        font-weight: 500;
+      }
+    }
+
+    #{$self}__body {
+      padding: 18px 32px 0;
+    }
+
+    #{$self}__footer {
+      margin: 20px 0 0 0;
+      padding-left: 32px;
+      padding-right: 32px;
+
+      label.bp3-label{
+        font-weight: 500;
+      }
+    }
+  }
+}

packages/webapp/src/style/components/Postbox.scss

@@ -0,0 +1,48 @@
+.postbox {
+    border: 1px solid #d2dce2;
+    background: #FFF;
+
+    &__header {
+        border-bottom: 1px solid #d2dde2;
+        height: 38px;
+        padding-left: 18px;
+        align-items: center;
+        display: flex;
+    }
+
+    &__title {
+        vertical-align: middle;
+        font-weight: 600;
+        font-size: 14px;
+    }
+
+    &.is-toggable .postbox__header {
+        cursor: pointer;
+    }
+
+    &__toggle-indicator {
+        margin-left: auto;
+        width: 40px;
+        text-align: center;
+        display: flex;
+
+        &:before {
+            content: "";
+            width: 0;
+            height: 0;
+            border-left: 4px solid transparent;
+            border-right: 4px solid transparent;
+            border-bottom: 6px solid #8ca0b3;
+            margin: auto;
+        }
+    }
+
+    &__title {}
+
+    &__content {
+
+        &-inner {
+            padding: 20px;
+        }
+    }
+}

packages/webapp/src/style/components/SidebarOverlay.scss

@@ -0,0 +1,132 @@
+.sidebar-overlay {
+  background: #fff;
+  height: 100%;
+  width: 225px;
+  outline: 0;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  z-index: 15;
+
+  &__scroll-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);
+    }
+  }
+
+  .ScrollbarsCustom-Content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &:hover {
+    .ScrollbarsCustom-Thumb {
+
+      &.ScrollbarsCustom-ThumbX,
+      &.ScrollbarsCustom-ThumbY {
+        background: rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+
+  &__menu {
+    margin: 16px 0;
+  }
+
+  &__item {
+    font-size: 15px;
+    color: #00102b;
+
+    a {
+      color: inherit;
+      display: block;
+      padding: 10px 22px;
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        background: #f3f3f3;
+      }
+    }
+  }
+
+  &__divider {
+    height: 1px;
+    margin: 6px 0;
+    background: #e2e5ec;
+  }
+
+  &__label {
+    text-transform: uppercase;
+    font-size: 12px;
+    padding: 14px 20px 10px;
+    letter-spacing: 1px;
+    color: #707a85;
+    border-bottom: 1px solid #e2e5ec;
+    margin-bottom: 6px;
+
+    html[lang^="ar"] & {
+      font-size: 13px;
+      letter-spacing: 0;
+      font-weight: 500;
+    }
+  }
+
+  &__label+.sidebar-overlay__divider {
+    margin-top: 0;
+  }
+}
+
+.sidebar-overlay-transition {
+  transform: translateX(-100%);
+
+  &.bp3-overlay {
+
+    &-appear,
+    &-enter {
+      transform: translateX(-100%)
+    }
+
+    &-appear-active,
+    &-enter-active {
+      transform: translateX(0) !important;
+      transition: all 100ms ease-in-out;
+    }
+
+    &-appear-done,
+    &-enter-done {
+      transform: translateX(0) !important;
+    }
+
+    &-exit {
+      transform: translateX(0) !important;
+    }
+
+    &-exit-active {
+      transform: translateX(-100%) !important;
+      transition: all 100ms ease-in-out;
+    }
+
+    &-exit-done {
+      transform: translateX(-100%) !important;
+    }
+  }
+}
+
+.sidebar-overlay-backdrop {
+  background-color: rgba(0, 10, 30, 0.15);
+  z-index: 14;
+}

packages/webapp/src/style/components/Skeleton.scss

@@ -0,0 +1,26 @@
+
+
+@keyframes skeleton-glow {
+  0% {
+    background: rgba(206,217,224,.3);
+    border-color: rgba(206,217,224,.3);
+  }
+  to {
+    background: rgba(92,112,128,.3);
+    border-color: rgba(92,112,128,.3);
+  }
+}
+
+.skeleton{
+  animation: skeleton-glow 1s linear infinite alternate;
+  background: rgba(206,217,224,.3);
+  background-clip: padding-box;
+  border-color: rgba(206,217,224,.3);
+  border-radius: 2px;
+
+  box-shadow: none;
+  color: transparent;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+}

packages/webapp/src/style/components/Toast.scss

@@ -0,0 +1,3 @@
+.bp3-toast {
+  box-shadow: none;
+}

packages/webapp/src/style/components/Tooltip.scss

@@ -0,0 +1,11 @@
+
+
+.pt-tooltip {
+  .pt-popover-content {
+    max-width: 100px;
+  }
+}
+
+.#{$ns}-tooltip {
+  box-shadow: none;
+}

packages/webapp/src/style/components/UniversalSearch.scss

@@ -0,0 +1,207 @@
+.universal-search {
+  position: fixed;
+  filter: blur(0);
+  opacity: 1;
+  background-color: #fff;
+  border-radius: 3px;
+  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);
+  left: calc(50% - 250px);
+  top: 20vh;
+  width: 500px;
+  z-index: 20;
+
+  &.bp3-overlay-appear,
+  &.bp3-overlay-enter {
+    filter: blur(20px);
+    opacity: 0.2;
+  }
+
+  &.bp3-overlay-appear-active,
+  &.bp3-overlay-enter-active {
+    filter: blur(0);
+    opacity: 1;
+    transition-delay: 0;
+    transition-duration: 0.2s;
+    transition-property: filter, opacity;
+    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
+  }
+
+  &.bp3-overlay-exit {
+    filter: blur(0);
+    opacity: 1;
+  }
+
+  &.bp3-overlay-exit-active {
+    filter: blur(20px);
+    opacity: 0.2;
+    transition-delay: 0;
+    transition-duration: 0.2s;
+    transition-property: filter, opacity;
+    transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
+  }
+
+  &__omnibar {
+    .bp3-input-group {
+      .bp3-icon {
+        svg {
+          stroke: currentColor;
+          fill: none;
+          fill-rule: evenodd;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      }
+    }
+
+    .bp3-input-group .bp3-input {
+      border: 0;
+      box-shadow: 0 0 0 0;
+      height: 50px;
+      line-height: 50px;
+      font-size: 20px;
+    }
+
+    .bp3-input-group.bp3-large .bp3-input:not(:first-child) {
+      padding-left: 50px !important;
+    }
+    .bp3-input-group.bp3-large .bp3-input:not(:last-child) {
+      padding-right: 130px !important;
+    }
+
+    .bp3-input-group {
+      .bp3-icon {
+        margin: 16px;
+        color: #5c707f;
+
+        svg {
+          stroke-width: 2;
+          --text-opacity: 1;
+        }
+      }
+    }
+
+    .bp3-menu {
+      border-top: 1px solid #d3dce2;
+      max-height: calc(60vh - 20px);
+      overflow: auto;
+
+      .bp3-menu-item {
+        .bp3-text-muted {
+          font-size: 12px;
+
+          .bp3-icon {
+            color: #8499a7;
+          }
+        }
+        &.bp3-intent-primary {
+          &.bp3-active {
+            background-color: rgb(235, 241, 246);
+            color: #252b30;
+
+            .bp3-menu-item-label {
+              color: #5c7080;
+            }
+          }
+        }
+
+        &-label {
+          flex-direction: row;
+          text-align: right;
+        }
+      }
+    }
+
+    .bp3-input-action {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &__type-select-overlay {
+    .bp3-button {
+      margin: 0 !important;
+    }
+  }
+
+  &__footer {
+    padding: 12px 12px;
+    border-top: 1px solid #d3dce2;
+  }
+
+  &__actions {
+    display: flex;
+  }
+
+  &__action {
+    &:not(:first-of-type) {
+      margin-left: 14px;
+    }
+
+    .bp3-tag {
+      background: #708392;
+    }
+
+    &--arrows {
+      .bp3-tag {
+        padding: 0;
+        text-align: center;
+        line-height: 16px;
+        margin-left: 4px;
+
+        svg {
+          fill: #fff;
+          height: 100%;
+          display: block;
+          width: 100%;
+          padding: 2px;
+        }
+      }
+    }
+
+    .text {
+      margin-left: 6px;
+    }
+  }
+
+  &__footer {
+  }
+
+  &-input-right-elements {
+    display: flex;
+    margin: 10px;
+
+    .bp3-spinner {
+      margin-right: 6px;
+    }
+  }
+
+  &__item {
+    &--invoice,
+    &--estimate,
+    &--bill,
+    &--receipt {
+      .amount {
+        color: #252b30;
+      }
+
+      .status {
+        font-size: 13px;
+
+        &.status-warning {
+          color: rgb(236, 91, 10);
+        }
+
+        &.status-success {
+          color: #249017;
+        }
+      }
+    }
+  }
+}
+
+.universal-search-overlay .bp3-overlay-backdrop {
+  background: rgba(0, 10, 30, 0.3);
+}

packages/webapp/src/style/components/dragzone.scss

@@ -0,0 +1,77 @@
+.dropzone {
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 18px;
+  border-width: 1px;
+  border-color: #afafaf;
+  border-style: dashed;
+  color: #999;
+  outline: none;
+  transition: border 0.24s ease-in-out;
+  font-size: 14px;
+
+  p {
+    margin: auto;
+  }
+}
+
+.dropzone-container {
+  max-width: 250px;
+  margin-left: auto;
+}
+.dropzone-thumbs {
+  display: flex;
+  flex-direction: row;
+  margin-top: 15px;
+}
+
+.dropzone-thumb {
+  position: relative;
+  display: inline-block;
+  border-radius: 2px;
+  border: 1px solid #eaeaea;
+  margin-bottom: 8px;
+  margin-right: 8px;
+  width: 100px;
+  padding: 2px;
+
+  img {
+    display: block;
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+  }
+
+  button {
+    height: 16px;
+    width: 16px;
+    color: #fff;
+    background: #db3737;
+    border: 0;
+    border-radius: 15px;
+    display: inline-block;
+    padding: 0;
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    visibility: hidden;
+
+    .bp3-icon {
+      position: relative;
+      top: -3px;
+      left: 0px;
+    }
+  }
+
+  &:hover button {
+    visibility: visible;
+  }
+}
+
+.dropzone-hint {
+  font-size: 12px;
+  margin-bottom: 6px;
+  color: #777;
+}

packages/webapp/src/style/components/resizer.scss

@@ -0,0 +1,52 @@
+
+.Pane.Pane2 {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.Resizer {
+  background: #000;
+  z-index: 1;
+  box-sizing: border-box;
+  background-clip: padding-box;
+  position: relative;
+  z-index: 999;
+
+  &:hover {
+    transition: all 0.3s ease;
+  }
+
+  &.horizontal {
+    height: 4px;
+    margin: -2px 0;
+    opacity: 0;
+    border-top: 2px solid #1d9bd1;
+    border-bottom: 2px solid #1d9bd1;
+    cursor: row-resize;
+    width: 100%;
+
+    &:hover {
+      opacity: 1;      
+    }
+  }
+
+  &.vertical {
+    width: 4px;
+    margin: 0 -2px;
+    opacity: 0;
+    border-left: 2px solid #1d9bd1;
+    border-right: 2px solid #1d9bd1;
+    cursor: col-resize;
+
+    &:hover{
+      opacity: 1;      
+    }
+  }
+
+  &.disabled {    
+    &:hover{
+      border-color: transparent;
+    }
+  }
+}

packages/webapp/src/style/components/tabs.scss

@@ -0,0 +1,8 @@
+// Tabs component.
+.#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator{
+  height: 2px;
+}
+.#{$ns}-large > .#{$ns}-tab{
+  line-height: 50px;
+  font-size: 15px;
+}