adding polar bear

xaksis · Mar 11, 2021 · 68e500b · 68e500b
1 parent d88978e
commit 68e500b
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 7 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -24,8 +24,8 @@
         selectOnCheckboxOnly: false,
         disableSelectInfo: true,
       }"
-      theme="nocturnal"
-      styleClass="vgt-table bordered"
+      theme="polar-bear"
+      styleClass="vgt-table"
       :sort-options="{
         enabled: true,
         multipleColumns: false,

diff --git a/dev/remote-table.vue b/dev/remote-table.vue
@@ -15,7 +15,6 @@
       perPage: 5,
       perPageDropdown: [20, 50, 100, 200],
       dropdownAllowAll: false,
-      position: 'top',
     }"
     :search-options="{
       enabled: false,

diff --git a/src/styles/_table-footer.scss b/src/styles/_table-footer.scss
@@ -10,6 +10,8 @@ $footer-font-size: 1.1rem;
   border: 1px solid $border-color;
   background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
   .footer__row-count{
+    position: relative;
+    padding-right: 3px;
     &__label, &__select{
       display: inline-block;
       vertical-align: middle;
@@ -18,12 +20,43 @@ $footer-font-size: 1.1rem;
       font-size: $footer-font-size;
     }
     &__select{
-      width: auto;
       font-size: $footer-font-size;
+      background-color: transparent;
+      width: auto;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      height: auto;
       margin-left: 8px;
-      padding: 3px;
-      -webkit-appearance: listbox;
-      -moz-appearance: listbox;
+      color:  $text-color;
+      font-weight: bold;
+      -webkit-appearance: none; 
+      -moz-appearance: none;
+      appearance: none;
+      padding-right: 15px;
+      padding-left: 5px;
+      &::-ms-expand{
+        display: none;
+      }
+      &:focus{
+        outline: none;
+        border-color: $link-color;
+      }
+    }
+    &::after{
+      content: '';
+      display: block;
+      position: absolute;
+      height: 0px;
+      width: 0px;
+      right: 6px;
+      top: 50%;
+      margin-top: -1px;
+      border-top:  6px solid $text-color;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-bottom: none;
+      pointer-events: none
     }
   }
   .footer__navigation{

diff --git a/src/styles/polar-bear/_overrides.scss b/src/styles/polar-bear/_overrides.scss
@@ -0,0 +1,21 @@
+$thead-bg-color-1: #E4EBF3;
+$thead-bg-color-2: #E4EBF3;
+$thead-bg-color-3: #f7fafc;
+
+$header-color: darken(#8395aa, 10%);
+$text-color: #394567;
+$link-color: #5e72e4;
+$focus-color: #4D96FB;
+$text-color-td: #525f7f;
+$text-shadow-color: lighten(#2C394F, 10%);
+
+$secondary-text-color: rgb(152, 165, 185) ;
+$border-color: #e3e8ee;
+$border-color-td: #E4EBF3;
+
+$input-border-color: transparent;
+$input-bg: #34445f;
+
+$table-bg: #FFFFFF;
+$highlight-color:#fff;
+$white: #FFFFFF;
diff --git a/src/styles/polar-bear/polar-bear.scss b/src/styles/polar-bear/polar-bear.scss
@@ -0,0 +1,179 @@
+@import './overrides';
+// suggested by wifey
+.vgt-inner-wrap{
+  border-radius: 0.25rem;
+  // box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
+  box-shadow: 0 1px 3px 0 rgba(50,50,93,.1), 0 1px 2px 0 rgba(50,50,93,.06);
+}
+.vgt-table.polar-bear{
+  border-spacing: 0;
+  border-collapse: separate;
+  font-size: 1rem;
+  background-color: $white;
+  border: 1px solid $border-color;
+  border-bottom: none;
+  border-radius: 0.25rem;
+  // td
+  & td {
+    padding: 1em .75em 1em .75em;
+    border-bottom:  1px solid $border-color-td;
+    color: $text-color-td;
+    &.vgt-right-align{
+      text-align: right;
+    }
+  }
+
+  //th
+  & th.line-numbers, & th.vgt-checkbox-col {
+    color: $text-color;
+    border-right: 1px solid $border-color;
+    background: $thead-bg-color-3;
+  }
+  thead th{
+    color: $header-color;
+    font-weight: 600;
+    // text-shadow: 1px 1px $text-shadow-color;
+    border-bottom:  1px solid $border-color;
+    background: $thead-bg-color-3;
+    &.sorting-asc, &.sorting-desc {
+      color: $link-color;
+    }
+    &.sorting-desc{
+      &:before{
+        border-top: 5px solid lighten($link-color, 5%);
+      }
+    }
+    &.sorting-asc{
+      &:after{
+        border-bottom: 5px solid lighten($link-color, 5%);
+      }
+    }
+
+    .vgt-input, .vgt-select{
+      height: 2.75em;
+      box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
+      border: 1px solid $border-color-td;
+    }
+
+    .vgt-input:focus, .vgt-select:focus {
+      outline: 0;
+      border-color: lighten($focus-color, 25%);
+    }
+  }
+  thead tr:first-child{
+    th:first-child{
+      border-top-left-radius: 0.25rem;
+    }
+    th:last-child{
+      border-top-right-radius: 0.25rem;
+    }
+  }
+
+  //bordered
+  &.bordered td {
+    border: 1px solid $border-color;
+    background: $white;
+  }
+
+  &.bordered th {
+    // border: none;
+    border: 1px solid $border-color;
+  }
+}
+
+.vgt-wrap.polar-bear{
+  .vgt-wrap__footer{
+    color: $text-color;
+    border: 1px solid $border-color;
+    border-bottom: 0px;
+    border-top: 0px;
+    background: linear-gradient($thead-bg-color-3, $thead-bg-color-3);
+    .footer__row-count{
+      position: relative;
+      padding-right: 3px;
+      &__label{
+        color: $secondary-text-color;
+      }
+      &__select{
+        text-align: center;
+        color:  $text-color-td;
+        background: $table-bg;
+        border: none;
+        -webkit-appearance: none; 
+        -moz-appearance: none;
+        appearance: none;
+        padding: 5px;
+        padding-right: 30px;
+        border-radius: 3px;
+        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
+        border: 1px solid $border-color-td;
+        &::-ms-expand{
+          display: none;
+        }
+        &:focus{
+          border-color: $link-color;
+        }
+      }
+      &::after{
+        content: '';
+        display: block;
+        position: absolute;
+        height: 0px;
+        width: 0px;
+        right: 15px;
+        top: 50%;
+        margin-top: -3px;
+        border-top:  6px solid $text-color-td;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-bottom: none;
+        pointer-events: none
+      }
+    }
+    .footer__navigation{
+      &__page-btn{
+        color: $text-color;
+        &.disabled,
+        &.disabled:hover {
+          .chevron.left:after{
+            border-right-color: $text-color;
+          }
+          .chevron.right:after{
+            border-left-color: $text-color;
+          }
+        }
+      }
+      &__info, &__page-info{
+        color: $text-color;
+      }
+    }
+  }
+
+  // control bar
+  .vgt-global-search{
+    border:  1px solid $border-color;
+    border-bottom: 0px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    background: $thead-bg-color-3;
+  }
+  .vgt-global-search__input{
+    .input__icon{
+      .magnifying-glass{
+        border: 2px solid darken($border-color, 2%);
+        &:before{
+          background: darken($border-color, 2%);
+        }
+      }
+    }
+    .vgt-input, .vgt-select{
+      height: 2.75em;
+      box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
+      border: 1px solid $border-color-td;
+      &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+        color: $text-color;
+        opacity: 0.3; /* Firefox */
+      }
+    }
+  }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -24,3 +24,4 @@
 //themes
 @import './nocturnal/nocturnal';
 @import './black-rhino/black-rhino';
+@import './polar-bear/polar-bear';