test-bentoweb-ui 1.0.24 → 1.0.26

package/src/assets/styles/_breadcrumb.scss

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,102 @@
+/* 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

@@ -0,0 +1,99 @@
+@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

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

package/src/assets/styles/_forms.scss

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,103 @@
+@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

@@ -0,0 +1,55 @@
+.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

@@ -0,0 +1,40 @@
+.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

@@ -0,0 +1,25 @@
+.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

@@ -0,0 +1,20 @@
+.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

@@ -0,0 +1,24 @@
+.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

@@ -0,0 +1,89 @@
+/* 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;
+}