vbax-becky_thatcher 0.1.0

data/lib/vbax/sass/becky_thatcher/custom/_tables.scss

@@ -0,0 +1,248 @@
+.table{
+
+  > tbody > tr > td {
+    color: rgba(255, 255, 255, 0.7) !important;
+
+    .photo {
+      height: 30px;
+      width: 30px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin: 0 auto;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  > tbody > tr.table-success > td{
+    background-color: darken($success,10%);
+  }
+
+  > tbody > tr.table-info > td{
+    background-color: $info;
+  }
+
+  > tbody > tr.table-primary > td{
+    background-color: $primary;
+  }
+
+  > tbody > tr.table-warning > td{
+    background-color: $warning;
+  }
+  > tbody > tr.table-danger > td{
+    background-color: $danger;
+  }
+
+
+    .img-wrapper{
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin: 0 auto;
+    }
+
+    .img-row{
+      max-width: 60px;
+      width: 60px;
+    }
+
+    .form-check{
+        margin: 0;
+        margin-top: 5px;
+
+        & label .form-check-sign::before,
+        & label .form-check-sign::after{
+            top: -17px;
+            left: 4px;
+        }
+    }
+
+    .btn{
+        margin: 0;
+    }
+
+    small,.small{
+      font-weight: 300;
+    }
+
+    .card-tasks .card-body &{
+        margin-bottom: 0;
+
+        > thead > tr > th,
+        > tbody > tr > th,
+        > tfoot > tr > th,
+        > thead > tr > td,
+        > tbody > tr > td,
+        > tfoot > tr > td{
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+    }
+
+   > thead > tr > th{
+       border-bottom-width: 1px;
+       font-size: 12px;
+       text-transform: uppercase;
+       font-weight: $font-weight-extra-bold;
+       border: 0;
+       color: rgba($white, 0.7);
+   }
+
+   .radio,
+   .checkbox{
+       margin-top: 0;
+       margin-bottom: 0;
+       padding: 0;
+       width: 15px;
+
+       .icons{
+           position: relative;
+       }
+
+        label{
+            &:after,
+            &:before{
+                top: -17px;
+                left: -3px;
+            }
+        }
+   }
+   > thead > tr > th,
+   > tbody > tr > th,
+   > tfoot > tr > th,
+   > thead > tr > td,
+   > tbody > tr > td,
+   > tfoot > tr > td{
+       border-color: rgba(255, 255, 255, 0.1);
+       padding: 12px 7px;
+       vertical-align: middle;
+   }
+
+   &.table-shopping tbody tr:last-child td{
+      border: none;
+   }
+
+   .th-description{
+       max-width: 150px;
+   }
+   .td-price{
+       font-size: 26px;
+       font-weight: $font-weight-light;
+       margin-top: 5px;
+       position: relative;
+       top: 4px;
+       text-align: right;
+   }
+   .td-total{
+        font-weight: $font-weight-bold;
+        font-size: $h5-font-size;
+        padding-top: 20px;
+        text-align: right;
+    }
+
+   .td-actions .btn{
+    margin: 0px;
+    }
+
+    > tbody > tr{
+        position: relative;
+    }
+
+    > tfoot > tr {
+      color: hsla(0,0%,100%,.7);
+      text-transform: uppercase;
+    }
+
+}
+
+.table-shopping{
+    > thead > tr > th{
+        text-transform: uppercase;
+    }
+    > tbody > tr > td{
+        font-size: $font-paragraph;
+
+        b{
+            display: block;
+            margin-bottom: 5px;
+        }
+    }
+    .td-name{
+        font-weight: $font-weight-normal;
+        font-size: 1.5em;
+        small{
+            color: $dark-gray;
+            font-size: 0.75em;
+            font-weight: $font-weight-light;
+        }
+    }
+    .td-number{
+       font-weight: $font-weight-light;
+
+       .btn-group {
+         padding-right: 15px;
+       }
+   }
+    .td-name{
+        min-width: 200px;
+    }
+    .td-number{
+        text-align: right;
+        min-width: 170px;
+
+        small{
+            margin-right: 3px;
+        }
+    }
+
+    .img-container{
+        width: 120px;
+        max-height: 160px;
+        overflow: hidden;
+        display: block;
+
+        img{
+            width: 100%;
+        }
+    }
+}
+
+.table-responsive{
+  overflow: scroll;
+  padding-bottom: 10px;
+}
+
+#tables .table-responsive{
+    margin-bottom: 30px;
+}
+
+table.tablesorter thead tr .header{
+	background-image: url("../img/bg.gif");
+  background-repeat: no-repeat;
+  background-position: center right;
+  cursor: pointer;
+}
+
+table.tablesorter thead tr .headerSortUp {
+	background-image: url("../img/asc.gif");
+}
+table.tablesorter thead tr .headerSortDown {
+	background-image: url("../img/desc.gif");
+}
+
+
+// datatables
+
+
+.dataTables_wrapper {
+  .table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(0,0,0,.05);
+  }
+
+  .form-control-sm {
+    font-size: 10px;
+  }
+}

data/lib/vbax/sass/becky_thatcher/custom/_tabs.scss

@@ -0,0 +1,110 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+.nav-tabs {
+    border: 0;
+    padding: $padding-base-vertical $padding-base-horizontal;
+
+    > .nav-item{
+        > .nav-link{
+            color: $white;
+            margin: 0;
+            margin-right: 5px;
+            background-color: $transparent-bg;
+            border-radius: 30px;
+            padding: $padding-btn-vertical $padding-round-horizontal;
+            line-height: $line-height-sm;
+
+            &:hover {
+                background-color: $transparent-bg;
+                border: 1px solid darken($black,5%);
+                color: rgba($white, 0.8);
+            }
+
+            &.active{
+                border: 1px solid $white;
+                border-radius: 30px;
+            }
+
+            i.tim-icons{
+                font-size: 14px;
+                position: relative;
+                top: 1px;
+                margin-right: 3px;
+            }
+        }
+
+        &.disabled > .nav-link,
+        &.disabled > .nav-link:hover {
+            color: rgba(255,255,255,0.5);
+        }
+    }
+
+    &.nav-tabs-neutral{
+        > .nav-item{
+            > .nav-link{
+                color: $white;
+
+                &.active{
+                    border-color: $opacity-5;
+                    color: $white;
+                }
+            }
+        }
+    }
+
+    &.nav-tabs-primary{
+        > .nav-item{
+            > .nav-link{
+                &.active{
+                    border-color: $primary;
+                    color: $primary;
+                }
+            }
+        }
+    }
+
+    &.nav-tabs-info{
+        > .nav-item{
+            > .nav-link{
+                &.active{
+                    border-color: $info;
+                    color: $info;
+                }
+            }
+        }
+    }
+
+    &.nav-tabs-danger{
+        > .nav-item{
+            > .nav-link{
+                &.active{
+                    border-color: $danger;
+                    color: $danger;
+                }
+            }
+        }
+    }
+
+    &.nav-tabs-warning{
+        > .nav-item{
+            > .nav-link{
+                &.active{
+                    border-color: $warning;
+                    color: $warning;
+                }
+            }
+        }
+    }
+
+    &.nav-tabs-success{
+        > .nav-item{
+            > .nav-link{
+                &.active{
+                    border-color: $success;
+                    color: $success;
+                }
+            }
+        }
+    }
+
+}

data/lib/vbax/sass/becky_thatcher/custom/_timeline.scss

@@ -0,0 +1,251 @@
+.card.card-timeline{
+  .card-body {
+    padding-left: 0;
+    padding-right: 0;
+  }
+    .timeline {
+        list-style: none;
+        padding: 20px 0 20px;
+        position: relative;
+
+        &:before {
+            top: 0;
+            bottom: 0;
+            position: absolute;
+            content: " ";
+            width: 3px;
+            background-color: $black;
+            left: 50%;
+            margin-left: -1.5px;
+        }
+
+        .timeline-footer {
+          .btn{
+            margin: 0;
+
+            &.dropdown-toggle {
+              i {
+                top: -1px;
+                left: 10px;
+              }
+
+              &:after {
+                margin-left: 20px !important;
+              }
+            }
+          }
+        }
+
+        h6{
+            color: rgba($white,0.8);
+            font-weight: 400;
+            margin: 10px 0px 0px;
+        }
+
+        &.timeline-simple {
+
+            &:before {
+                left: 5%;
+            }
+
+            > li > .timeline-panel {
+                width: 86%;
+            }
+
+            > li > .timeline-badge {
+                left: 5%;
+            }
+        }
+
+        > li {
+            margin-bottom: 20px;
+            position: relative;
+
+            &:before,
+            &:after {
+                content: " ";
+                display: table;
+            }
+
+            &:after {
+                clear: both;
+            }
+
+        }
+
+        > li > .timeline-panel {
+            background: $card-black-background;
+            width: 45%;
+            float: left;
+            padding: 20px;
+            border-radius: $border-radius-sm;
+            box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1);
+            color: $black;
+            margin-bottom: 20px;
+            position: relative;
+
+            &:before {
+                position: absolute;
+                top: 26px;
+                right: -15px;
+                display: inline-block;
+                border-top: 15px solid transparent;
+                border-left: 15px solid $black;
+                border-right: 0 solid $black;
+                border-bottom: 15px solid transparent;
+                content: " ";
+            }
+
+            &:after {
+                position: absolute;
+                top: 27px;
+                right: -14px;
+                display: inline-block;
+                border-top: 14px solid transparent;
+                border-left: 14px solid $card-black-background;
+                border-right: 0 solid $card-black-background;
+                border-bottom: 14px solid transparent;
+                content: " ";
+            }
+
+            &.timeline-panel-white{
+              background: $white;
+              .timeline-body p{
+                color: $black-states;
+              }
+
+              &:after, &:before{
+                border-right-color: $white;
+                border-left-color: $white;
+              }
+            }
+        }
+
+
+
+        > li > .timeline-badge {
+            color: $white;
+            width: 50px;
+            height: 50px;
+            line-height: 51px;
+            font-size: 1.4em;
+            text-align: center;
+            position: absolute;
+            top: 16px;
+            left: 50%;
+            margin-left: -25px;
+            background-color: $dark-gray;
+            z-index: 100;
+            border-top-right-radius: 50%;
+            border-top-left-radius: 50%;
+            border-bottom-right-radius: 50%;
+            border-bottom-left-radius: 50%;
+
+            [class^="ti-"],
+            [class*=" ti-"]{
+                line-height: inherit;
+            }
+
+            .tim-icons{
+              width: 25px;
+              height: 21px;
+              text-align: center;
+            }
+        }
+
+
+
+        > li.timeline-inverted > .timeline-panel {
+            float: right;
+
+            &:before {
+                border-left-width: 0;
+                border-right-width: 15px;
+                left: -15px;
+                right: auto;
+            }
+
+            &:after {
+                border-left-width: 0;
+                border-right-width: 14px;
+                left: -14px;
+                right: auto;
+            }
+
+        }
+
+
+    }
+    .timeline-heading{
+        margin-bottom: 15px;
+    }
+    .timeline-badge.primary {
+      background-color: $info !important;
+    }
+    .timeline-badge.info {
+      background-color: $info !important;
+    }
+
+    .timeline-badge.success {
+      background-color: darken($success,10%) !important;
+    }
+
+    .timeline-badge.warning {
+      background-color: $warning !important;
+    }
+
+    .timeline-badge.danger {
+      background-color: $danger !important;
+    }
+
+
+    .timeline-title {
+      margin-top: 0;
+      color: inherit;
+    }
+
+    .timeline-body > p,
+    .timeline-body > ul {
+      margin-bottom: 0;
+      color: $white;
+    }
+
+    .timeline-body > p + p {
+      margin-top: 5px;
+    }
+
+
+}
+
+@include media-breakpoint-down(sm){
+  .card.card-timeline {
+    .timeline {
+        &:before {
+          left: 5%;
+        }
+
+        > li > .timeline-badge {
+            left: 5%;
+        }
+
+        > li > .timeline-panel{
+            float: right;
+            width: 83% !important;
+
+            &:before{
+                border-left-width: 0;
+                border-right-width: 15px;
+                left: -15px;
+                right: auto;
+            }
+
+            &:after{
+                border-left-width: 0;
+                border-right-width: 14px;
+                left: -14px;
+                right: auto;
+            }
+        }
+    }
+  }
+}