feat: dashboard style.

2026-02-16 12:50:38 +00:00 · 2020-04-12 12:03:45 +02:00
parent 6dcff7e4c2
commit 37fb5a6f11
24 changed files with 517 additions and 201 deletions
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -17,6 +17,8 @@ $menu-item-color-active: $light-gray3;

 $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;

+@import "functions";
+
 // Objects
@import "objects/form";
@import "objects/typography";
@@ -36,6 +38,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
@import "pages/preferences";
@import "pages/view-form";
@import "pages/manual-journals";
+@import "pages/item-category";

 // Views
@import "views/filter-dropdown";
--- a/client/src/style/components/data-table.scss
+++ b/client/src/style/components/data-table.scss
@@ -19,10 +19,30 @@
        padding: 1rem 0.5rem;
        background: #F8FAFA;
        font-size: 14px;
-        color: #666;
+        color: #555;
        font-weight: 500;
        border-bottom: 1px solid rgb(224, 224, 224);
      }
+
+      .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 #888;
+        }
+        &--asc{
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 6px solid #888;
+        }
+      }
    }

    .tr {
@@ -43,7 +63,6 @@
      justify-content: flex-start;
      align-items: flex-start;
      display: flex;
-      
      margin: 0;
      padding: 0.5rem;

@@ -94,9 +113,14 @@
      .td.actions .#{$ns}-button{
        background: #E6EFFB;
        border: 0;
-        box-shadow: 0 0 0;
+        box-shadow: none;
        padding: 5px 15px;
        border-radius: 2px;
+
+        &:hover,
+        &:focus{
+          background-color: #CFDCEE;
+        }
      }
    }

--- a/client/src/style/functions.scss
+++ b/client/src/style/functions.scss
@@ -0,0 +1,41 @@
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<","%3c"),
+  (">","%3e"),
+  ("#","%23"),
+  ("(","%28"),
+  (")","%29"),
+) !default;
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+    
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+  @return $string;
+}
--- a/client/src/style/objects/buttons.scss
+++ b/client/src/style/objects/buttons.scss
@@ -6,7 +6,6 @@
    .bp3-popover-target{
      width: 100%;
    }
-  
    .bp3-button{
      width: 100%;
      justify-content: space-between;
@@ -18,7 +17,6 @@
 .form-group--select-list{

  .bp3-popover-open{
-
    .bp3-button{
      border-color: #80bdff;
    }
@@ -32,13 +30,18 @@
  color: #555555;
  box-shadow: 0 0 0 transparent;

+  &:hover,
+  &:focus{
+    background-color: #CFDCEE;
+  }
+
  &.bp3-small{
    font-size: 13px;
    min-height: 29px;
  }

  .form-group--select-list &{
-    border-radius: 0;
+    border-radius: 2px;

    &,
    &:hover{
@@ -47,6 +50,12 @@
      border: 1px solid #ced4da;
    }
  }
+  .form-group--select-list.bp3-intent-danger &{
+    
+    &{
+      border-color: #db3737;
+    }
+  }
 }

 .bp3-button{
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -1,3 +1,6 @@
+$form-check-input-checked-color: #fff;
+$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;

 .form{
  &__floating-footer{
@@ -12,14 +15,19 @@
 }

 // Form
-label{
+.bp3-label{
+  color: #353535;
  font-weight: 400;
+
+  .required{
+    color: red;
+  }
 }

 .#{$ns}-input{
  box-shadow: 0 0 0 transparent;
  border: 1px solid #ced4da;
-  border-radius: 0;
+  border-radius: 2px;
  height: 32px;
  line-height: 32px;
  color: #333;
@@ -44,7 +52,12 @@ label{
    }

    .bp3-input{
-      border-color: #db3737;
+      border-color: rgb(219, 55, 55);
+      box-shadow: 0 0 0 0 transparent;
+
+      &:focus{
+        box-shadow: 0 0 0 0.2rem rgba(219, 55, 55, 0.25);
+      }
    }
  }

@@ -107,12 +120,32 @@ label{
 }


+@mixin control-checked-colors($selector: ":checked") {
+  input#{$selector} ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color;
+    color: $white;
+  }

+  &:hover input#{$selector} ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color-hover;
+    border-color: $control-checked-background-color-active;
+  }
+
+  input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background-color: $control-checked-background-color-active;
+    border-color: $control-checked-background-color-active;
+  }
+
+  input:disabled#{$selector} ~ .#{$ns}-control-indicator {
+    box-shadow: none;
+    background: rgba($control-checked-background-color, 0.5);
+  }
+}

 ///@extend
-
-
-
 .#{$ns}-control {

  input:checked ~ .#{$ns}-control-indicator {
@@ -157,6 +190,8 @@ label{
    }
  }

+  
+
  &:hover .#{$ns}-control-indicator {
    background-color: transparent;
  }
@@ -165,7 +200,62 @@ label{
    box-shadow: 0 0 0 transparent;
    background: transparent;
  }
- 
+
+   /*
+  Checkbox
+
+  Markup:
+  <label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
+    <input type="checkbox" {{:modifier}} />
+    <span class="#{$ns}-control-indicator"></span>
+    Checkbox
+  </label>
+
+  :checked  - Checked
+  :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+  :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
+                   <code>input.indeterminate = true</code>.
+  .#{$ns}-align-right - Right-aligned indicator
+  .#{$ns}-large - Large
+
+  Styleguide checkbox
+  */
+
+  &.#{$ns}-checkbox {
+    &:hover input:indeterminate ~ .#{$ns}-control-indicator {
+      // box-shadow: 0 0 0 transparent;
+    } 
+
+    @mixin indicator-inline-icon($icon) {
+      &::before {
+        // embed SVG icon image as backgroud-image above gradient.
+        // the SVG image content is inlined into the CSS, so use this sparingly.
+        height: 100%;
+        width: 100%;
+      }
+    }
+    @include control-checked-colors(":checked");
+
+    // make :indeterminate look like :checked _for Checkbox only_
+    @include control-checked-colors(":indeterminate");
+
+    .#{$ns}-control-indicator {
+      border: 1px solid #c6c6c6;
+      border-radius: $pt-border-radius;
+    }
+    input:checked ~ .#{$ns}-control-indicator {
+      background-image: escape-svg($form-check-input-checked-bg-image);
+      border-color: #137cbd;
+      background-color: #137cbd;
+    }
+    input:indeterminate ~ .#{$ns}-control-indicator {
+      background-image: escape-svg($form-check-input-indeterminate-bg-image);
+      border-color: #137cbd;
+      background-color: #137cbd;
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
  /*
    Radio

@@ -184,6 +274,7 @@ label{
    Styleguide radio
  */
  &.#{$ns}-radio {
+    

    .#{$ns}-control-indicator{
      border: 2px solid #cecece;
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -9,4 +9,58 @@
      }
    }
  }
+}
+
+// Account Form Dialog.
+// ----------------------------
+.dialog--account-form{
+
+  &:not(.dialog--loading) .bp3-dialog-body{
+    margin-bottom: 25px;
+  }
+
+  .bp3-dialog-body{
+    
+    .bp3-form-group.bp3-inline{
+
+      .bp3-label{
+        min-width: 140px;
+      }
+      .bp3-form-content{
+        width: 250px;
+      }
+
+      &.form-group--description{
+
+        .bp3-form-content{
+          width: 280px;
+
+          textarea{
+            min-width: 100%;
+            max-width: 100%;
+            width: 100%;
+            max-height: 120px;
+          }
+        }
+      }
+    }
+
+    .form-group--parent-account{
+      margin-bottom: 35px;
+    }
+
+    .form-group--account-code{
+      margin-bottom: 16px;
+    }
+    .form-group--subaccount{
+      margin-bottom: 16px;
+
+      .bp3-icon-info-circle{
+        color: #A1B2C5;
+        position: relative;
+        top: -2px;
+        margin-left: 2px;
+      }
+    }    
+  }
 }
--- a/client/src/style/pages/item-category.scss
+++ b/client/src/style/pages/item-category.scss
@@ -0,0 +1,30 @@
+
+
+.dialog--category-form{
+
+  .bp3-dialog-body{    
+    .bp3-form-group.bp3-inline{
+
+      .bp3-label{
+        min-width: 140px;
+      }
+      .bp3-form-content{
+        width: 250px;
+      }
+
+      &.form-group--description{
+
+        .bp3-form-content{
+          width: 280px;
+
+          textarea{
+            min-width: 100%;
+            max-width: 100%;
+            width: 100%;
+            max-height: 120px;
+          }
+        }
+      }
+    }
+  }
+}
--- a/client/src/style/views/Sidebar.scss
+++ b/client/src/style/views/Sidebar.scss
@@ -2,7 +2,7 @@
 $sidebar-background: #01194E;
 $sidebar-text-color: #fff;
 $sidebar-width: 220px;
-$sidebar-menu-item-color: #E9EBF7;
+$sidebar-menu-item-color: #a8b1c7;

 $sidebar-popover-submenu-bg: rgb(1, 20, 62);

@@ -29,9 +29,10 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
        font-size: 16px;
        font-weight: 200;
        margin-bottom: 5px;
+        color: rgba(255, 255, 255, 0.75);
      }
      .company-meta{
-        color: #A7AFC2;
+        color: rgba(255, 255, 255, 0.4);
        font-size: 12px;
      }
    }
@@ -49,10 +50,11 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
      border-radius: 0;
      padding: 10px 16px;
      font-size: 15px;
-      font-weight: 200;
+      font-weight: 400; 

      &:hover{
        background: #012470;
+        color: #b2bbd0;
      }
      &:focus,
      &:active{
@@ -60,21 +62,21 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
      }

      > .#{$ns}-icon{
-        color: #767B9B;
-        margin-right: 12px;
+        color: #767b9b;
+        margin-right: 14px;
        margin-top: 0;
      }
-
      > .#{$ns}-icon-caret-right{
        margin-right: -4px;
        margin-top: 3px;
-        color: #5B5F7B;
+        color: #42547b;
      }
    }

    .#{$ns}-submenu{

      .#{$ns}-collapse{
+        border-left: 2px solid rgba(255, 255, 255, 0.15);

        &-body{
          background-color: rgb(11, 34, 85);
@@ -85,11 +87,11 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
        .#{$ns}-menu-item{
          padding: 7px 16px 7px 18px;
          font-size: 15px;
-          color: #C5CBE3;
+          color: #8a95b6;

          &:hover{
            background: transparent;
-            color: #fff;
+            color: #C5CBE3;
          }
        }
      }
@@ -105,7 +107,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
      color: $sidebar-menu-item-color;
    }
    .#{$ns}-menu-divider{
-      border-top-color: #183C86;
+      border-top-color: #1D366A;
      color: #6B708C;
      margin: 4px 0;
    }