ca-components 1.0.32 → 1.0.34

package/assets/scss/popover.scss

@@ -0,0 +1,158 @@
+@import 'theme/variables.scss';
+
+.pickup-delivery-popover {
+  top: -38px !important;
+  max-width: 340px !important;
+
+  &.bs-popover-top {
+    top: auto !important;
+    bottom: -38px !important;
+
+    .load-component {
+      .assigned-load-holder {
+        order: 3;
+
+        margin-top: 4px;
+        margin-bottom: 0 !important;
+      }
+
+      .statusBar {
+        order: 2;
+        
+        margin-top: 4px;
+      }
+
+      .animation-three-tabs {
+        order: 1;
+      }
+    }
+  }
+}
+
+.gps_dropdown_popover {
+  top: -38px;
+  max-width: 494px;
+
+  .popover-body {
+    padding: 0;
+  }
+}
+
+// Table Miles and Days Progress Popover
+.table-progress-popover {
+  background-color: unset !important;
+  margin-left: -10px;
+
+  .progress-dropdown {
+    margin-top: -6px;
+    width: 260px;
+    height: 200px;
+    background: $ta-black-2;
+    border-radius: 3px;
+    padding: 8px;
+    box-shadow: $box-shadow-3;
+    overflow: hidden;
+    -webkit-animation: progressAnimation 0.25s ease-in-out;
+    animation: progressAnimation 0.25s ease-in-out;
+
+    .progress-header {
+      .progress-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: $white;
+
+        span {
+          font-weight: 400;
+        }
+      }
+
+      .progress-total {
+        font-size: 14px;
+        line-height: 17px;
+        color: $white;
+      }
+    }
+
+    .table-progress-bar-container {
+      width: 100%;
+      height: 8px;
+      margin-top: 6px;
+      border-radius: 2px;
+      overflow: hidden;
+
+      .table-progress-bar {
+        height: 100%;
+      }
+    }
+
+    .progress-dropdown-body {
+      .progress-dual-info-container {
+        .progress-info-container {
+          width: 50%;
+        }
+      }
+
+      .progress-info-container {
+        margin-top: 10px;
+
+        .progress-info-title {
+          margin-bottom: 2px;
+          font-size: 11px;
+          font-weight: 700;
+          line-height: 14px;
+          color: $white-4;
+        }
+
+        .progress-info-text {
+          font-size: 14px;
+          line-height: 18px;
+          color: $white;
+        }
+      }
+    }
+
+    &.credit-dropdown {
+      height: 100px;
+    }
+  }
+
+  @-webkit-keyframes progressAnimation {
+    from {
+      height: 0px;
+    }
+    to {
+      height: 220px;
+    }
+  }
+
+  @keyframes progressAnimation {
+    from {
+      height: 0px;
+    }
+    to {
+      height: 220px;
+    }
+  }
+}
+
+// REMOVE POPOVER ARROW GLOBAL
+ngb-popover-window {
+  .popover-arrow {
+    display: none !important;
+  }
+
+  padding: unset !important;
+  border: unset !important;
+
+  .popover-body {
+    padding: unset !important;
+  }
+}
+
+.dispatch-note {
+  .popover-body {
+    position: relative;
+    top: -4px;
+    left: -4px;
+  }
+}

package/assets/scss/special-svgs.scss

@@ -0,0 +1,282 @@
+@import 'theme/variables.scss';
+
+.trucks,
+.trailers {
+  &.semitruck,
+  &.semisleeper,
+  &.flatbed,
+  &.stepdeck,
+  &.lowboyrgn,
+  &.chassis,
+  &.conestoga,
+  &.sidekit,
+  &.container {
+    svg {
+      path {
+        fill: $ta-blue-19;
+      }
+    }
+  }
+
+  &.boxtruck,
+  &.reefertruck,
+  &.cargovan,
+  &.dryvan,
+  &.reefer {
+    svg {
+      path {
+        fill: $ta-yellow-4;
+      }
+    }
+  }
+
+  &.dumptruck,
+  &.cementtruck,
+  &.garbagetruck,
+  &.enddump,
+  &.bottomdump,
+  &.hopper,
+  &.tanker,
+  &.pneumatictanker {
+    svg {
+      path {
+        fill: $ta-red-13;
+      }
+    }
+  }
+
+  &.towtruck,
+  &.carhauler,
+  &.spotter,
+  &.carhauler,
+  &.carhaulerstigner {
+    svg {
+      path {
+        fill: $ta-green-4;
+      }
+    }
+  }
+
+  .svgtext-template-text {
+    color: $white-2;
+    transition: color 0.3s ease-in-out;
+  }
+}
+
+// --------------------- Colors ---------------------
+.colors {
+  .black {
+    svg {
+      #droplet {
+        fill: $bw6-2;
+      }
+    }
+  }
+  .brown {
+    svg {
+      #droplet {
+        fill: $bw-11;
+      }
+    }
+  }
+  .darkgreen {
+    svg {
+      #droplet {
+        fill: $green-3;
+      }
+    }
+  }
+  .lightgreen {
+    svg {
+      #droplet {
+        fill: $green-14;
+      }
+    }
+  }
+  .darkblue {
+    svg {
+      #droplet {
+        fill: $blue-16;
+      }
+    }
+  }
+  .lightblue {
+    svg {
+      #droplet {
+        fill: $blue-17;
+      }
+    }
+  }
+  .gray {
+    svg {
+      #droplet {
+        fill: $grey-3;
+      }
+    }
+  }
+  .purple {
+    svg {
+      #droplet {
+        fill: $purple-6;
+      }
+    }
+  }
+  .gold {
+    svg {
+      #droplet {
+        fill: $yellow-8;
+      }
+    }
+  }
+  .silver {
+    svg {
+      #droplet {
+        fill: $bw-9;
+      }
+    }
+  }
+  .red {
+    svg {
+      #droplet {
+        fill: $red-12;
+      }
+    }
+  }
+  .pink {
+    svg {
+      #droplet {
+        fill: $pink-2;
+      }
+    }
+  }
+  .white {
+    svg {
+      #droplet {
+        fill: $ca-white;
+      }
+    }
+  }
+  .orange {
+    svg {
+      #droplet {
+        fill: $orange;
+      }
+    }
+  }
+  .yellow {
+    svg {
+      #droplet {
+        fill: $yellow-9;
+      }
+    }
+  }
+
+  &:hover {
+    transition: all 0.3s ease-in-out;
+    .black {
+      svg {
+        #droplet {
+          fill: $ta-light-grey-3;
+        }
+      }
+    }
+    .brown {
+      svg {
+        #droplet {
+          fill: $brown;
+        }
+      }
+    }
+    .darkgreen {
+      svg {
+        #droplet {
+          fill: $ta-review-green-2;
+        }
+      }
+    }
+    .lightgreen {
+      svg {
+        #droplet {
+          fill: $green-15;
+        }
+      }
+    }
+    .darkblue {
+      svg {
+        #droplet {
+          fill: $blue-18;
+        }
+      }
+    }
+    .lightblue {
+      svg {
+        #droplet {
+          fill: $blue-20;
+        }
+      }
+    }
+    .gray {
+      svg {
+        #droplet {
+          fill: $muted;
+        }
+      }
+    }
+    .purple {
+      svg {
+        #droplet {
+          fill: $special-filter-purple-2;
+        }
+      }
+    }
+    .gold {
+      svg {
+        #droplet {
+          fill: $yellow-11;
+        }
+      }
+    }
+    .silver {
+      svg {
+        #droplet {
+          fill: $bw4;
+        }
+      }
+    }
+    .red {
+      svg {
+        #droplet {
+          fill: $red-4;
+        }
+      }
+    }
+    .pink {
+      svg {
+        #droplet {
+          fill: $pink-3;
+        }
+      }
+    }
+    .white {
+      svg {
+        #droplet {
+          fill: $white-2;
+        }
+      }
+    }
+    .orange {
+      svg {
+        #droplet {
+          fill: $ta-orange-1;
+        }
+      }
+    }
+    .yellow {
+      svg {
+        #droplet {
+          fill: $yellow-10;
+        }
+      }
+    }
+  }
+}

package/assets/scss/styles.scss

@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import '../theme/variables.scss';
+
+@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css');
+@import './font-family.scss';
+@import './font-weight.scss';
+@import './popover.scss';
+@import './input-dropdown.scss';
+@import './tooltip.scss';
+@import './custompickers.scss';
+@import './special-svgs.scss';
+
+/* You can add global styles to this file, and also import other style files */
+
+* {
+    margin: 0;
+    font-family: Montserrat, sans-serif;
+}
+
+html {
+    scroll-behavior: auto !important;
+}
+
+.gm-style-iw-chr,
+.gm-style-iw-tc {
+    display: none;
+}
+
+.gm-style .gm-style-iw-c {
+    border-radius: 0;
+}
+
+.gm-style-iw {
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+.gm-style-iw > div {
+    overflow: visible !important;
+}
+.infoWindow {
+    overflow: hidden !important;
+}
+
+.gm-style-iw-d {
+    max-height: 350px !important;
+}
+.gm-style-iw.gm-style-iw-c {
+    max-height: 350px !important;
+}