test-bentoweb-ui 1.0.25 → 1.0.27

package/src/assets/styles/_breadcrumb.scss

@@ -1,22 +0,0 @@
-.breadcrumb {
-  border-radius: rem(8);
-  background-color: $breadcrumb-bg;
-  padding: rem(6) rem(10);
-}
-
-.breadcrumb-item{
-  color: $breadcrumb-color;
-  font-weight: 700;
-  + .breadcrumb-item{
-    &::before {
-      color: $breadcrumb-color;
-    }
-  }
-  a{
-    text-decoration: none;
-    color: $breadcrumb-color;
-  }
-  &.active {
-    color: $breadcrumb-active-color;
-  }
-}

package/src/assets/styles/_btwstyles.scss

@@ -1,102 +0,0 @@
-/* You can also add additional global styles */
-body{background-color: $body-bg; font-family: $body-font; font-weight: 400; font-size: rem(16); color: $body-color;}
-
-
-.btw-layout {display: grid; grid-template-areas: "sidebar main"; grid-template-columns: 1fr 4fr; gap: 1.5rem; padding-left: 0; padding-right: 0;}
-.btw-main{padding-top: rem(20); padding-bottom: rem(100); display: flex; justify-content: center;}
-
-/*Deshboard*/
-.header-date{background: url(/img/line-gradient.png) no-repeat left bottom; overflow: hidden; background-size: contain;}
-.hide-bar{position: fixed; bottom: rem(20); right: rem(20); z-index: 1; font-size: rem(25); padding: 10px 16px;
-    i{vertical-align: middle;}
-}
-.caret-off {
-    .dropdown-toggle::after { display: none;}
-    .icon-option{margin-right: 0!important;}
-}
-.dropdown-width{
-    .dropdown-toggle{width: 100%; text-align: left;}
-}
-
-.border-bottom{
-    &.border-lastchild-none{
-        &:last-child{border-bottom: none!important;}
-    }
-}
-
-.task-viwe-sec{
-    .table{margin-bottom: 0; 
-        th,td{border-width: rem(1); font-size: rem(20);
-            &:first-child{border-left-width: 0;}
-            &:last-child{border-right-width: 0;}
-            &:nth-child(2),&:nth-child(3){background-color: $text-light;}
-        }
-        td{color: $text-dark; font-weight: 700;}
-        tr{
-            &.highlight{
-                td{background-color: $bg-dim-danger;
-                    &:nth-child(2),&:nth-child(3){background-color: #FFE1DB;}
-                    &:nth-child(4),&:nth-child(5),&:nth-child(6){color: $text-danger;}
-                }
-            }
-            &:last-child{
-                td{border-bottom-width: 0;}
-            }    
-        }
-    }
-}
-
-/*Packing Step*/
-.header-packing{display: grid; grid-template-columns: 5fr 2fr; gap: 6rem;  padding-top: rem(15); padding-bottom: rem(15);}
-.btw-packing {display: grid; grid-template-columns: 5fr 2fr; gap: 1.5rem; padding-right: 0;
-    .sidebar{display: flex; flex-direction: column; justify-content: space-between; background-color: white; padding: rem(20); height: 100vh; position: sticky; top: 0;}
-}
-
-.packing-badge{
-    &.active{color: $text-primary;}
-}
-.packing-item{ display: grid; grid-template-columns: 200px 7fr; gap: rem(20); 
-    .packing-amount{ background-color: $bg-100; display: flex; justify-content: center; align-items: center; height: 100%; font-size: rem(40); font-weight: 700; color: $gray-300;}
-    .action-check{font-size: rem(30); color: $text-success!important; padding: 0;
-        &.checked{color: $text-primary!important;}
-    }
-    &.active{border:rem(4) solid $text-primary; background-color: $bg-dim-primary!important;
-        .packing-amount{background-color: white; color: $text-dark;}
-        h6.size25{color: $text-dark!important;}
-    }
-}
-.packing-step{font-weight: 700; color: $gray-200; font-size:rem(25); border-radius: rem(8); background-color: $text-secondary; padding: rem(15) rem(20); margin-bottom: rem(20);
-    .svg-colored{filter: brightness(0) saturate(100%) invert(64%) sepia(11%) saturate(16%) hue-rotate(23deg) brightness(88%) contrast(97%);}
-    &.active{color: white; background-color: $text-primary;
-        .svg-colored{filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(7%) hue-rotate(168deg) brightness(102%) contrast(106%);}
-        &.process-vdo{background-color: $bg-dim-primary; color: $text-primary;
-            .svg-colored{filter: brightness(0) saturate(100%) invert(14%) sepia(90%) saturate(7164%) hue-rotate(334deg) brightness(91%) contrast(107%);}
-        }
-    }
-}
-
-.svg-color-primary{filter: brightness(0) saturate(100%) invert(14%) sepia(90%) saturate(7164%) hue-rotate(334deg) brightness(91%) contrast(107%);}
-
-/* Plugin
-  vue-select*/
-.v-select{padding: 0; height: rem(42);
-    .vs__selected{
-        .image-option{ 
-            .option-img{width: rem(30);}
-        }
-    }
-    
-}
-.vs__dropdown-toggle{
-    height: 100%;
-    border-width: 0;
-}
-.vs__search::placeholder { color: $input-placeholder-color!important;}
-
-
-/*Container*/
-@media (min-width: 1400px) {
-    .container {
-        max-width: 1140px;
-    }
-}

package/src/assets/styles/_buttons.scss

@@ -1,99 +0,0 @@
-@import '_mixins.scss';
-
-/*==================== 
-    Function: button hover
-=======================*/
-@mixin button-variant($color, $bg, $border, $hover-background, $hover-border){
-    color:$color; background-color: $bg; border-color: $border;
-    &:not(:disabled):not(.disabled):active{box-shadow: none; background-color: darken($hover-background, 7.5%); border-color: darken($hover-border, 10%);}
-}
-
-.btn{font-size: rem(14); font-weight: 700; border-radius: rem(8); padding: rem(8) rem(12); white-space: nowrap;
-    &:focus{box-shadow: none; border-color: transparent;}
-    &.btn-primary{
-        @include button-variant(white, $text-primary, $text-primary, $text-primary, $text-primary);
-    }
-    &.btn-secondary{
-        @include button-variant($text-dark, $text-secondary, $text-secondary, $text-secondary, $text-secondary);
-        &:disabled, &.disabled{color: white;}
-    }
-    &.btn-danger{
-        @include button-variant(white, $text-danger, $text-danger, $text-danger, $text-danger);
-    }
-    &.btn-success{
-        @include button-variant(white, $text-success, $text-success, $text-success, $text-success);
-    }
-    &.btn-light{
-        @include button-variant($text-dark, $text-light, $text-light, $text-light, $text-light);
-    }
-    &.btn-white{
-        @include button-variant($text-dark, white, white, white, white);
-    }
-    &.btn-info{
-        @include button-variant(white!important, $blue-100, $blue-100, $blue-100, $blue-100);
-    }
-    &.btn-outline-primary{border:rem(2) solid $text-primary;
-        @include button-variant($text-primary, white, $text-primary,  $text-primary, $text-primary);
-    }
-    &.btn-outline-danger{border:rem(2) solid $text-danger;
-        @include button-variant($text-danger, white, $text-danger,  $text-danger, $text-danger);
-    }
-    &.btn-dim-success{
-        @include button-variant($text-success, $bg-dim-success, $bg-dim-success, $bg-dim-success, $bg-dim-success);
-    }
-    &.btn-dim-danger{
-        @include button-variant($text-danger, $bg-dim-danger, $bg-dim-danger, $bg-dim-danger, $bg-dim-danger);
-    }
-    &.btn-text-link{
-        @include button-variant($text-primary, transparent, transparent, transparent, transparent);
-        padding
-        &:disabled, &.disabled{color: $gray-300;opacity: 1;}
-    }
-    &.btn-disabled{
-        @include button-variant(white, $bg-disable, $bg-disable, $bg-disable, $bg-disable);
-    }
-    &:first-child{margin-left: 0;}
-    i +.me-2{margin-left: rem(5);}
-}
-.btn-link {font-family: $font-tahoma; font-weight: normal; text-decoration: none; color: $text-link; padding-left: 0; padding-right: 0;}
-.btn-link-primary{color: $text-primary!important; font-weight: 600; font-family: $font-primary; text-decoration: none; border-width: 0!important;}
-
-.btn-dim-success{
-    @include button-variant($text-success, $bg-dim-success, $bg-dim-success, $bg-dim-success, $bg-dim-success);
-}
-.btn-dim-danger{
-    @include button-variant($text-danger, $bg-dim-danger, $bg-dim-danger, $bg-dim-danger, $text-primary);
-}
-  
-.btn-icon{padding-left: 0; padding-right: 0;
-    &:active{border-color: transparent!important;}
-}
-.btn-sm{padding: rem(5) rem(10);}
-.btn-md{font-size: rem(16);}
-.btn-lg{font-size: rem(18); padding: rem(8) rem(10);
-    i{line-height: rem(27)!important;}
-}
-.btn-icon{line-height: 1;}
-
-.btn-block{width: 100%; display: block;}
-
-/*==================== 
-    Function: Dropdown
-=======================*/
-.dropdown-toggle{display: flex; align-items: center;
-    &::after{border: none; content: "\e90e" !important; font-family: "bentowebicon" !important; vertical-align: middle; margin-left: auto;}
-}
-
-/*==================== 
-    Badge
-=======================*/
-.badge{font-size: rem(14); padding: rem(6) rem(18);}
-.text-bg-primary{background-color: $bg-dim-primary!important; color: $text-primary!important;}
-.text-bg-warning{background-color: $text-warning!important; color: white!important;}
-.text-bg-success{background-color: $bg-dim-success!important; color: $text-success!important}
-
-.text-bg-dim-danger{background-color: $bg-dim-danger; color: $text-danger;}
-.text-bg-light-border{background-color: $text-light; color: $text-dark; border:rem(1) solid $border-color;}
-
-.text-bg-outline-success{background-color: $bg-dim-success!important; color: $text-success!important; border:rem(2) solid $text-success;}
-.text-bg-outline-danger{background-color: $bg-dim-danger!important; color: $text-danger!important; border:rem(2) solid $text-danger;}

package/src/assets/styles/_card.scss

@@ -1,3 +0,0 @@
-.card{margin-top: rem(20);
-    &:first-child{margin-top: rem(0);}
-}

package/src/assets/styles/_forms.scss

@@ -1,57 +0,0 @@
-input{
-    &:focus{
-        box-shadow:none!important;
-    }
-}
-
-.form-control,
-.form-select{border-width: rem(2); border-color: $input-border-color;}
-.form-control::placeholder {color: $input-placeholder-color!important; }
-
-.form-label,
-.col-form-label{
-    font-weight: $form-text-font-weight;
-}
-
-.form-label,
-.col-form-label,
-.form-check-label{
-    font-size: rem(16);
-}
-
-.form-check-input[type=radio]{border-width: rem(2); font-size: rem(16); border-color:$form-check-input-radio-color;
-    &:checked {
-        background-color: $form-check-input-radio-bg-color;
-        border-color: $form-check-input-radio-border-color;
-    }
-}
-.form-check-input[type=checkbox]{border-width: rem(2); font-size: rem(16); border-color:$form-check-input-radio-border-color;
-    &:checked {
-        background-color: $form-check-input-checked-bg-color;
-        border-color: $form-check-input-checked-border-color;
-    }
-}
-.form-check-label{
-    &:hover{cursor: pointer;}
-}
-
-/*vue3datepicke : Light mode configuration*/
-.dp__input_icon{
-    .input-group-text{
-        background-color: $input-group-bg-color;
-        color: $input-group-icon-color;
-        height: rem(38);
-        border-width: 0;
-        border-top-left-radius: rem(4);
-        border-bottom-left-radius: rem(4);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        padding: rem(16) rem(10);
-    }
-}
-
-.dp__input{
-    border-color: $input-group-bg-color;
-    border-width: rem(2)!important;
-    padding-left: rem(45)!important;
-}

package/src/assets/styles/_mixins.scss

@@ -1,103 +0,0 @@
-@use "sass:math"; 
-//PX to REM
-$html-font-size: 16px;
-// @function stripUnit($value) {
-//     @return $value / ($value * 0 + 1);
-// }
-// @function rem($pxValue) {
-//   //@return #{stripUnit($pxValue) / stripUnit($html-font-size)}rem;
-// }
-@function stripUnit($value) {
-  @return math.div($value, ($value * 0 + 1));
-}
-@function rem($pxValue) {
-   @return calc(stripUnit($pxValue) / stripUnit($html-font-size))+rem;
-}
-
-//Transitions
-@mixin transition($x...){
-  -webkit-transition: $x;
-  -moz-transition: $x;
-  -ms-transition: $x;
-  -o-transition: $x;
-  transition: $x;
-}
-
-@mixin boxShadow($shadow) {
-  box-shadow: $shadow;
-  -webkit-box-shadow: $shadow;
-  -moz-box-shadow: $shadow;
-  -ms-box-shadow: $shadow;
-  -o-box-shadow: $shadow;
-}
-
-//Border Radius
-@mixin border-radius($radius) {
-  -webkit-border-radius: $radius;
-  border-radius: $radius;
-  background-clip: padding-box;  
-}
-@mixin border-top-radius($radius) {
-  -webkit-border-top-right-radius: $radius;
-  border-top-right-radius: $radius;
-   -webkit-border-top-left-radius: $radius;
-   border-top-left-radius: $radius;
-   background-clip: padding-box;
-}
-@mixin border-right-radius($radius) {
-  -webkit-border-bottom-right-radius: $radius;
-  border-bottom-right-radius: $radius;
-     -webkit-border-top-right-radius: $radius;
-     border-top-right-radius: $radius;
-     background-clip: padding-box;
-}
-@mixin border-bottom-radius($radius) {
-  -webkit-border-bottom-right-radius: $radius;
-  border-bottom-right-radius: $radius;
-   -webkit-border-bottom-left-radius: $radius;
-   border-bottom-left-radius: $radius;
-   background-clip: padding-box;
-}
-@mixin border-left-radius($radius) {
-  -webkit-border-bottom-left-radius: $radius;
-  border-bottom-left-radius: $radius;
-     -webkit-border-top-left-radius: $radius;
-     border-top-left-radius: $radius;
-     background-clip: padding-box;
-}
-
-/*TEXT*/
-@mixin text-overflow{
-    word-break: break-word;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-/*Position center*/
-@mixin position-center{
-   top: 50%; 
-   left: 50%; 
-   transform: translate(-50%, -50%);
-    /* Backward compatibility */
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-}
-
-/*shadow*/
-@mixin shadow-basic{
-  box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.1);
-  -webkit-box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.1);
-  -moz-box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.1);
-}
-
-/*transform*/
-@mixin transform($transform) {
-  -webkit-transform: $transform;
-  -moz-transform: $transform;
-  -ms-transform: $transform;
-  -o-transform: $transform;
-  transform: $transform;
-}

package/src/assets/styles/_modal.scss

@@ -1,55 +0,0 @@
-.modal-header{
-  display: flex;
-  justify-content: space-between;
-  .btn-close{
-    opacity: 1;
-    margin-left: rem(5);
-    background: none;
-    position: relative;
-    padding-right:rem(15);
-    &::before{
-      font-family: 'bentowebicon' !important;
-      content: "\e98a";
-      font-size: rem(20);
-      line-height: .5;
-    }
-  }
-}
-
-.modal-title{
-  font-size: rem(20);
-  font-weight: 700;
-}
-
-.modal {
-  display: block;
-  position: fixed;
-  z-index: 9;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  background-color: rgba(0, 0, 0, 0.5) !important;
-  backdrop-filter: blur(5px) !important;
-  -webkit-backdrop-filter: blur(5px) !important;
-  &.show {
-    opacity: 1;
-    transition: opacity 0.3s ease;
-  }
-}
-.modal-content {
-  background-color: white;
-  margin: 15% auto;
-  border: 1px solid #888;
-  .col-form-label{font-size: rem(14);}
-}
-.modal-body{
-  padding: 0;
-}
-.modal-lg{
-  max-width: $modal-lg;
-}
-.modal-md{
-  max-width: $modal-md;
-}

package/src/assets/styles/_pagination.scss

@@ -1,40 +0,0 @@
-.pagination{margin-bottom: 0;}
-
-.page-link {
-  background-color: $pagination-bg;
-  border-width: 0;
-  color:$pagination-color;
-  font-weight: 700;
-  padding: rem(10);
-  &:hover {
-    color: $pagination-color;
-  }
-
-  &:focus {
-    box-shadow: none;
-    color: $pagination-color;
-  }
-}
-
-.page-item {
-  &.active .page-link {
-    background-color: $pagination-active-bg;
-    color: $pagination-active-color;
-  }
-
-  &.disabled .page-link {
-    color: $pagination-disabled-color;
-    background-color: $pagination-disabled-bg;
-  }
-}
-
-//
-// Sizing
-//
-
-.pagination-lg {
-  .page-link {font-size: rem(20);}
-}
-.pagination-sm {
-  .page-link {font-size: rem(13);}
-}

package/src/assets/styles/_sidebar.scss

@@ -1,25 +0,0 @@
-.btw-sidebar{
-    height: 100vh;
-    position: sticky;
-    top: 0;
-    .btw-link-group{
-        .btw-links-heading{
-            color: $sidebar-heading-color; 
-            font-size: rem(20); 
-            display: block;
-        }
-        .btw-links-link{
-            font-weight: 600; 
-            color: $sidebar-color; 
-            text-decoration: none; 
-            padding: rem(12) rem(10); 
-            display: block;
-            font-size: rem(18);
-            &.active{
-                background-color: $sidebar-active-bg; 
-                border-radius: rem(10); 
-                color: $sidebar-active-color;
-            }
-        }
-    }
-}

package/src/assets/styles/_tables.scss

@@ -1,20 +0,0 @@
-.table {
-  th,
-  td {
-    font-size: rem(14);
-    border-top-color: $table-border-color;
-    padding: rem(12) rem(5);
-    &:first-child{padding-left: rem(20);}
-    &:last-child{padding-right: rem(20);}
-  }
-
-  thead th {
-      border-top:rem(1) solid $table-border-color;
-      border-bottom-color:$table-border-color;
-      color: $table-th-color;
-  }
-
-  tbody + tbody {
-    border-top-color: $table-border-color;
-  }
-}

package/src/assets/styles/_tabs.scss

@@ -1,24 +0,0 @@
-.nav-tabs {
-  border-bottom-width: 0;
-  flex-wrap: wrap;
-  gap:20px;
-  .nav-item{
-    flex: 1;
-  }
-  .nav-link {
-    color: $nav-pills-color;
-    border-color: $nav-pills-border-color;
-    padding: 20px;
-    border-width: 3px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 100%;
-  }
-  .nav-link.active{
-    color:$nav-tabs-link-active-color;
-    background-color: $nav-tabs-link-active-bg;
-    border-color: $nav-tabs-link-active-border-color;
-    .text-muted{color:$nav-tabs-link-active-color!important;}
-  }
-}

package/src/assets/styles/_toggleswitch.scss

@@ -1,89 +0,0 @@
-/* container for all of the switch elements 
-  - adjust "width" to fit the content accordingly 
-*/
-.switches-container {
-width: rem(100);
-  position: relative;
-  display: flex;
-  padding: 0;
-  position: relative;
-  background: $toggle-bg-color;
-  line-height: rem(38);
-  border-radius: rem(10);
-  margin-left: auto;
-  margin-right: auto;
-  input{/* input (radio) for toggling. hidden - use labels for clicking on */
-    visibility: hidden;
-    position: absolute;
-    top: 0;
-  }
-  label {/* labels for the input (radio) boxes - something to click on */
-    width: 50%;
-    padding: 0;
-    margin: 0;
-    text-align: center;
-    cursor: pointer;
-    color: $toggle-label-text;
-    font-weight: 600;
-    font-size: rem(14);
-  }
-}
-
-/* switch highlighters wrapper (sliding left / right) 
-  - need wrapper to enable the even margins around the highlight box
-*/
-.switch-wrapper {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 50%;
-  z-index: 3;
-  transition: transform .5s cubic-bezier(.77, 0, .175, 1);
-  /* transition: transform 1s; */
-}
-
-/* switch box highlighter */
-.switch {
-  border-radius: rem(10);
-  background: $toggle-active-bg;
-  height: 100%;
-  border:rem(2) solid $toggle-active-border;
-  div{
-    /* switch box labels
-      - default setup
-      - toggle afterwards based on radio:checked status 
-    */
-    width: 100%;
-    text-align: center;
-    opacity: 0;
-    display: block;
-    color: $toggle-active-text;
-    transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
-    will-change: opacity;
-    position: absolute;
-    top: 0;
-    left: 0;
-    font-weight: 600;
-    font-size: rem(14);
-  }
-}
-
-/* slide the switch box from right to left */
-.switches-container input:nth-of-type(1):checked~.switch-wrapper {
-  transform: translateX(0%);
-}
-
-/* slide the switch box from left to right */
-.switches-container input:nth-of-type(2):checked~.switch-wrapper {
-  transform: translateX(100%);
-}
-
-/* toggle the switch box labels - first checkbox:checked - show first switch div */
-.switches-container input:nth-of-type(1):checked~.switch-wrapper .switch div:nth-of-type(1) {
-  opacity: 1;
-}
-
-/* toggle the switch box labels - second checkbox:checked - show second switch div */
-.switches-container input:nth-of-type(2):checked~.switch-wrapper .switch div:nth-of-type(2) {
-  opacity: 1;
-}