styles.scss

// @import "~bootstrap/scss/_functions.scss";
// @import "~bootstrap/scss/_variables.scss";
// Documentation Manual 1.0 // 19-February-2018
// Editor: Visual Studio Code

// Colors
//Do not change the variables Name of these four:
$primary:#33cabb; // Do not EDIT here, Use REPLACE_ALL feature of the editor to change the static colors
$info:#48b0f7; // You can use RGBA values too
$danger:#f96868;
$secondary:#e4e7ea;

//more colors
$default-bg:#efefef;
$white:#fff;

// Font & Weight
$default-font:Roboto, sans-serif;
$default-font-weight:300;

//functions
@function dark-theme($value){
    @return $value - rgb(25, 25, 25);
    //The above color is a #33cabb with a slight light tint
} @function light-theme($value){
    @return $value + rgb(25, 25, 25);
    //The above color is a #33cabb with a slight dark tint
}
//mixins
    //box-shadow
@mixin box-shadow($shadow) {
    -webkit-box-shadow:$shadow;
            box-shadow:$shadow;
}
    //transition
@mixin transition($args...){ -webkit-transition:$args;-moz-transition:$args;-ms-transition:$args;-o-transition:$args;transition:$args; }
body{
    font-family:$default-font;
    font-weight:$default-font-weight;
    color:#4d5259;
    font-size:13px;
    line-height:24px;
    background-color:$default-bg;
}
body .main-container,
body>main{
    display:-webkit-box;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    flex-direction:column;
    min-height:100vh;
    @include transition(all 0.2s linear);
}
@media (max-width:991px){
  body .main-container,
  body>main{
    margin-left:0;
  }
}
@media print{
  body *{
    visibility:hidden;
  }
}
::-moz-selection{
    background:$primary;
    color:$white;
}
//Scrollbar
::-webkit-scrollbar{
    width:7px;
    height:5px;
    background-color:$default-bg;
    border-radius:10px;
}
::-webkit-scrollbar-thumb{
    background-color:$primary;
    border-radius:10px;
}
::-webkit-scrollbar-track{
    background-color:dark-theme($default-bg);
    border-radius:10px;
}
a{
    color:$primary;
    @include transition(all 0.2s linear);
    &:hover,
    &:focus{
        color:#4d5259;
        text-decoration:none;
        outline:none;
    }
    &[class*="text-"]:hover,
    &[class*="text-"]:focus{
        text-decoration:none;
    }
}
.ps-container{
    position:relative;
}
//Navigation ?
.menu{
    list-style:none;
    padding-left:0;
    margin-bottom:30px;
}
.menu-item{
    vertical-align:top;
    @include transition(all 0.2s linear);
}
.menu-link{
    height:56px;
    padding:0 12px;
    font-weight:$default-font-weight;
    display:-webkit-box;
    display:flex;
    -webkit-box-align:center;
    align-items:center;
    @include transition(all 0.2s linear);
}
.menu-category{
    position:relative;
    font-family:$default-font;
    display:block;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:1rem;
    font-weight:500;
    line-height:32px;
    padding:1rem 20px 0.5rem;
    color:$white;
    opacity:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.menu-category::after{
    content:'';
    position:absolute;
    width:100%;
    height:0;
    border-top:1px dashed $white;
    vertical-align:middle;
    margin-left:1.5rem;
    opacity:1;
    top:50%;
    margin-top:3px;
}
// Navigation Top 
.topbar-btn{
    display:inline-block;
    font-size:1.4rem;
    font-weight:$default-font-weight;
    line-height:64px;
    padding:0 12px;
    text-align:center;
    color:rgba(77, 82, 89, 0.7);
    cursor:pointer;
    min-width:48px;
    white-space:nowrap;
    border:none;
    border-top:1px solid transparent;
    @include transition(all 0.2s linear);
    position:relative;
    z-index:991;
    &:hover{
        color:#4d5259;
        border-top-color:$primary;
    }
}
.topbar-right{
    display:-webkit-box;
    display:flex;

    -webkit-box-align:center;
    align-items:center;
    
    -webkit-box-orient:horizontal;
    -webkit-box-direction:reverse;
    flex-direction:row-reverse;
    
    top:10px;
    right:0;
    position:fixed;
    
    z-index:999;
    opacity:1;
    background:$primary;
    height:45px;
    
    border-radius:8px 0 0 8px;
    box-shadow:0px 2px 2px -1px #555;
}
.topbar-left{
    @include transition(all 0.2s linear);
    display:none;
    -webkit-box-align:center;
    
    align-items:center;
    
    -webkit-box-orient:horizontal;
    -webkit-box-direction:reverse;
    flex-direction:row-reverse;
    
    top:10px;
    left:15%;
    position:fixed;
    
    z-index:999;
    opacity:1;
    .breadcrumb{
        background-color:$white;
    }
    body.inventory &{
        @include transition(all 0.2s linear);
        display:-webkit-box;
        display:flex;
    }
}
//make height fullscreen
.h-fullscreen{
    height:100vh !important;
}
label{
    font-weight:$default-font-weight;
    font-size:12px;
    letter-spacing:.5px;
}
.row.no-gutters{
    margin-left:0;
    margin-right:0;
}
.row.no-gutters>[class*="col-"]{
    padding-right:0;
    padding-left:0;
}
.bg-white{
    background-color:$white !important;
}
.bg-img{
    position:relative;
    border-bottom:none;
    background-position:center;
    -webkit-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    z-index:0;
}
[data-overlay]{
    position:relative;
}
[data-overlay]::before{
    position:absolute;
    content:'';
    
    top:0;
    left:0;
    right:0;
    bottom:0;
    
    background:#191919;
    z-index:-1;
    border-radius:inherit;
}
[data-overlay="5"]::before{
    opacity:.5;
}
.form-control:disabled,
.form-control[readonly]{
    background:#f7f7f7;
    color:$primary;
}
.min-h-fullscreen{
    min-height:100vh !important;
}
.py-30{
    padding-top:30px !important;
    padding-bottom:30px !important;
}
.pl-50{
    padding-left:50px !important;
}
.px-80{
    padding-right:80px !important;
    padding-left:80px !important;
}
//
small{
  font-family:$default-font;
  font-weight:$default-font-weight;
  font-size:11px;
  color:#8b95a5;
}
button, input, select{
  font-family:$default-font;
  font-weight:$default-font-weight;
}
h1, h4, h5, h6{
  font-family:$default-font;
  font-weight:$default-font-weight;
  color:#313944;
  line-height:1.5;
  letter-spacing:.5px;
}
h1 { font-size:33px; }
h4 { font-size:19px; }
h5 { font-size:16px; font-weight:$default-font-weight; }
h6 { font-size:14px; font-weight:$default-font-weight; }

@media ( max-width:991px ){
  html { font-size:16px; }
  h1{ font-size:31px; }
  h4{ font-size:18px; }
  h5{ font-size:15px; }
  h6{ font-size:13px; }
}
@media (max-width:767px){
  html { font-size:15px; }
  h1 { font-size:24px; }
  h4 { font-size:16px; }
}
//tables
.table th{
    border-top:0;
    font-weight:$default-font-weight;
}
.table thead th{
    border-bottom:1px solid #ebebeb;
}
.table-striped tbody tr:nth-of-type(odd){
    background-color:light-theme($default-bg);
}
.table-bordered{
    border:1px solid transparent !important;
}
//modals
.modal-content{
    border-radius:3px;
    border:none;
}
.modal-header{
    border-bottom-color:#f1f2f3;
}
.modal-title{
    font-family:$default-font;
    font-weight:$default-font-weight;
    letter-spacing:.5px;
}
.modal-footer{
    border:none;
    padding-top:0.75rem;
    padding-bottom:0.75rem;
}
.modal-center{
    -webkit-transform:scale(0);
    transform:scale(0);
    @include transition(all 0.2s linear);
}
.modal-center.show{
    -webkit-transform:scale(1);
    transform:scale(1);
}
.modal-center.show .modal-dialog{
    -webkit-transform:translate(-50%, 0) !important;
    transform:translate(-50%, 0) !important;
}
.modal-center .modal-dialog{
    margin:0;
    width:100%;
    position:absolute;
    bottom:50%;
    top:10%;
    left:50%;
    -webkit-transform:translate(-50%, 50%) !important;
    transform:translate(-50%, 50%) !important;
}
//buttons
.btn{
    font-size:14px;
    padding:5px 16px;
    line-height:inherit;
    color:#8b95a5;
    letter-spacing:1px;
    border-radius:2px;
    background-color:$white;
    border-color:#ebebeb;
    outline:none !important;
    @include transition(all 0.2s linear);
}
.btn:hover{
    cursor:pointer;
}
.btn:focus,
.btn:active{
    @include box-shadow(none);
}
.btn-bold{
    font-family:$default-font;
    text-transform:uppercase;
    font-weight:500;
    font-size:12px;
}
.btn-w-md{
    width:120px;
}

//Tupple function
$buttonConfig:'primary' $primary, 'info' $info, 'danger' $danger, 'secondary' $secondary;
@each $tuple in $buttonConfig{
  .btn-#{nth($tuple, 1)}{
    color:$white;
    background-color:nth($tuple, 2);
    border-color:nth($tuple, 2);
    //background-color:nth($tuple, 2);
    &:hover{
      background-color:dark-theme(nth($tuple, 2));
      border-color:dark-theme(nth($tuple, 2));
      color:$white;
    }
    &:disabled{
      background-color:light-theme(nth($tuple, 2));
      border-color:light-theme(nth($tuple, 2));
      opacity:0.5;
    }
    &:not([disabled]):not(.disabled):active{
      background-color:dark-theme(nth($tuple, 2));
      border-color:dark-theme(nth($tuple, 2));
      color:$white;
      @include box-shadow(none);
    }
  }
}

.btn-float{
    display:-webkit-inline-box;
    display:inline-flex;
    -webkit-box-align:center;
    align-items:center;
    -webkit-box-pack:center;
    justify-content:center;
    width:56px;
    height:56px;
    padding:0;
    margin:0;
    font-size:24px;
    border-radius:100%;
    -webkit-box-shadow:0 6px 10px rgba(0, 0, 0, 0.15);
    box-shadow:0 6px 10px rgba(0, 0, 0, 0.15);
    &:active{
        @include box-shadow(none);
    }
}
.btn-pure{
    background-color:transparent !important;
    border-color:transparent !important;
}
.btn-pure.btn-primary{
    color:$primary;
}
.btn-pure.btn-primary:hover,
.btn-pure.btn-primary:not([disabled]):not(.disabled):active{
    color:#29a195;
    @include box-shadow(none);
}
.btn-pure.btn-secondary{
    color:#444;
}
.btn-pure.btn-secondary:hover,
.btn-pure.btn-secondary:not([disabled]):not(.disabled):active{
  color:#c7ced4;
  @include box-shadow(none);
}
.fab{
  position:relative;
  display:inline-block;
  z-index:9;
  &>.btn{
    position:relative;
    z-index:1;
  }
  &-fixed{
    position:fixed;
    right:20px;
    bottom:20px;
  }
}
.close{
    font-weight:$default-font-weight;
    outline:none !important;
    @include transition(all 0.2s linear);
}
.nav-action{
    color:#8b95a5;
    font-size:14px;
    opacity:0;
    margin:0 4px;
    &:hover{
        color:#4d5259;
    }
}
table.dataTable{
    width:100% !important;
}
//form-control
.form-control{
    background-color:$white;
    border:1px solid rgba(0, 0, 0, .35);
    border-color:#ebebeb;
    border-radius:2px;
    color:#8b95a5;
    padding:5px 12px;
    font-size:14px;
    line-height:inherit;
    @include transition(all 0.2s linear);
    &:disabled{
        color:#8b95a5;
    }
    &:focus{
        border-color:#83e0d7;
        color:#4d5259;
        -webkit-box-shadow:0 0 0 0.1rem rgba(51, 202, 187, 0.15);
        box-shadow:0 0 0 0.1rem rgba(51, 202, 187, 0.15);
    }
    &::-webkit-input-placeholder{
        color:#c9ccce;
    }
    &::-moz-placeholder{
        color:#c9ccce;
    }
    &:-ms-input-placeholder{
        color:#c9ccce;
    }
    &:-moz-placeholder{
        color:#c9ccce;
    }
}
select.form-control:not([size]):not([multiple]){
    height:36px;
}
.do-float label{
    top:-8px !important;
    font-size:12px !important;
    font-weight:$default-font-weight !important;
    opacity:.9;
}
.main-content{
    padding:30px 30px 0;
    -webkit-box-flex:1;
    flex:1 0 auto;
}
@media (max-width:767px){
    .main-content{
        padding-left:15px;
        padding-right:15px;
    }
}
.card{
    height:83vh;
    border:0;
    border-radius:0px;
    margin-bottom:30px;
    -webkit-box-shadow:0 2px 3px rgba(0, 0, 0, 0.03);
    box-shadow:0 2px 3px rgba(0, 0, 0, 0.03);
    @include transition(all 0.2s linear);
}
.card-body>*:last-child{
    margin-bottom:0;
}
.nav-action{
    opacity:1;
}
td.text-left a.nav-action:hover{
    cursor:pointer;
}

//
.sidebar{
    position:fixed;
    top:0;
    bottom:0;
    width:15%;
    background-color:$primary;
    white-space:nowrap;
    display:-webkit-box;
    display:flex;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    flex-direction:column;
    z-index:997;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    @include transition(all 0.2s linear);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-perspective:1000;
    perspective:1000;
    will-change:transform;
}
.sidebar~main{
    margin-left:15%;
}
.sidebar-navigation{
    position:relative;
    overflow:hidden;
    -webkit-box-flex:1;
    flex:1 1 0%;
    box-shadow:-10px 0px 5px -10px #555 inset;
    & .menu-link{
        position:relative;
    }
    & .menu-link.active{
        background:$white;
        box-shadow:0px 0px 5px 0px #555;
    }
    & .menu-link{
        color:#000;
    }
    & .menu-item:hover>.menu-link{
        color:#111;
    }
    & .menu>.menu-item:hover>.menu-link{
        background-color:$white;
    }
}
.router-link-active {
    background:$white;
    box-shadow:0px 0px 5px 0px #555;
}
.nav-action{
    opacity:1;
}

//tables
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background-color:transparent;
    background:transparent;
    border-color:transparent;
}
td.text-left a.nav-action:hover{
    cursor:pointer;
}
.dataTables_filter,
.dataTables_length{
    width:50%;
}
.dataTables_filter label,
.dataTables_length label{
    display:block;
}
.dataTables_filter input,
.dataTables_length select{
    width:25%;
    display:inline-block;
}
.dataTables_length select{
    width:15%;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding:0px 7px;
    margin:7px 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    color:$white !important;
    background-color:$primary !important;
    background:$primary !important;
    border-color:$primary !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.prev,
.dataTables_wrapper .dataTables_paginate .paginate_button.next{
    border-color:$primary !important;
}
td.text-left a.btn{
    padding:2px 0 0 2px;
    box-shadow:5px 3px 15px 0px #ccc;
}
table.dataTable thead th,
table.dataTable thead td{
    padding:10px 5px;
}
.table-bordered td,
.table-bordered th,
table.dataTable.display tbody td{
    border:none;
}
.th-qty{
    width:6% !important;
}
.th-1, .th-date{
    width:8% !important;
}
.th-modify{
    width:9% !important;
}
.th-id{
    width:10% !important;
}
.th-act{
    width:11% !important;
}
.form-control, .dataTables_filter input, .dataTables_length select{
    background-color:$white;
    border:1px solid rgba(0, 0, 0, .45);
    border-color:#ebebeb;
    border-radius:2px;
    color:#8b95a5;
    padding:5px 12px;
    font-size:14px;
    line-height:inherit;
    @include transition(all 0.2s linear);
}
.btn-outline.btn-primary{
    color:$primary;
    background-color:transparent;
    border-color:$primary;
    &:hover{
        color:$white;
        background-color:$primary;
        //border-color:$primary;
    }
}
.btn-outline.btn-primary:not([disabled]):not(.disabled):active,
.btn-outline.btn-primary:not([disabled]):not(.disabled):active,
.show>.btn-outline.btn-primary.dropdown-toggle{
    background-color:dark-theme($primary);
    border-color:light-theme($primary);
    @include box-shadow(none);
}
.text-dark{
    color:#465161 !important;
}


//Visually hide an element
//SCSS

.col-form-label.text-danger + .form-control:focus{
    box-shadow:0px 3px 2px -5px #f44;
}


.frst{
    width:8%;
}.scnd{
    width:28%;
}.thrd{
    width:26%;
}.frth{
    width:26%;
}.ffth{
    width:12%;
}.brdr{
    border-right:1px solid #d1d1d1;
}.col-sm-4.brdr{
    height:70vh;
}
#vendor-items thead th{
    border:none
}// absolute and parent relative
.dropdown-menu{
    width:100%;
    max-height:220px;
    overflow-x:hidden;
    overflow-y:auto; 
    & .active a{
        background-color:$primary;
        &:hover{
            background-color:dark-theme($primary);
        }
    }
}.poAbs{
    position:absolute;
    width:95%;
    max-height:320px;
    overflow-x:hidden;
    overflow-y:auto;
    & .col-sm-12.p-0{
        width:94%;
        position:relative;
        left:0;
        top:0;
        &:hover{
            background:dark-theme($white);
        }
    }
}


#inner_remaining {
    background-color:#fff;
    position:absolute;
    top:0px;
    bottom:0;
    width:100%; 
}
.nav-tabs{
    border-bottom-color:#ebebeb;
    margin-bottom:1rem
}.nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-item.show .nav-link:focus,
        .nav-tabs .nav-item.show .nav-link:hover{
    color:#4d5259
}.nav-tabs .nav-link{
    position:relative;
    border:none;
    font-size:13px;
    text-align:center;
    color:#8b95a5;
    border-bottom:2px solid transparent;
    padding:10px 16px;
    border-radius:0;
    -webkit-transition:0.5s;
    transition:0.5s
}
@media (max-width: 767px){
    .nav-tabs .nav-link{
        padding:8px 12px
    }
}
.nav-tabs .nav-link:hover,
    .nav-tabs .nav-link.active,
        .nav-tabs .nav-link.active:focus,
            .nav-tabs .nav-link.active:hover{
                color:#4d5259;
                border-color:#33cabb
}
.nav-tabs .nav-link .icon{
    margin-right:4px
}
.nav-tabs .nav-link .close{
    width:12px;
    height:12px;
    margin-top:6px;
    font-size:20px;
    opacity:0;
    -webkit-transform:translateX(10px);
    transform:translateX(10px)
}
.nav-tabs .nav-link .close span{
    display:inline-block;
    width:inherit;
    height:inherit
}.nav-tabs .nav-link:hover .close{
    opacity:.25
}.nav-tabs.nav-tabs-primary .nav-link:hover,
    .nav-tabs.nav-tabs-primary .nav-link.active,
        .nav-tabs.nav-tabs-primary .nav-link.active:focus,
            .nav-tabs.nav-tabs-primary .nav-link.active:hover{
                border-color:#33cabb
}
.nav-tabs.nav-tabs-secondary .nav-link:hover,
    .nav-tabs.nav-tabs-secondary .nav-link.active,
        .nav-tabs.nav-tabs-secondary .nav-link.active:focus,
            .nav-tabs.nav-tabs-secondary .nav-link.active:hover{
                border-color:#e4e7ea
}
.dropdown-menu.show .dropdown-item.active, .dropdown-menu.show .dropdown-item:active, .dropdown-menu.show .dropdown-item:focus, .dropdown-menu.show .dropdown-item:hover {
    background-color:#33cabb !important;
}
.posrt40 {
    position:relative;
    top:-40px;
}.posrt32 {
    position:relative;
    top:-32px;
}