ca-components 1.1.94 → 1.1.96

package/assets/scss/input-dropdown.scss

@@ -1040,86 +1040,6 @@
         }
       }
 
-      //------------------------ Load Broker Template ------------------------
-      .load-broker-template {
-        display: grid;
-        align-items: center;
-        grid-template-columns: 276px 92px;
-        -moz-column-gap: 29px;
-        column-gap: 29px;
-        &.hide-loads {
-          grid-template-columns: 333px 92px !important;
-        }
-        .load-broker-status-text {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          line-height: 18px;
-
-          .load-broker-status {
-            position: relative;
-            line-height: 17px;
-
-            &.dnu-status {
-              svg {
-                path {
-                  fill: #aaaaaa;
-                }
-              }
-            }
-          }
-
-          .load-broker-text {
-            &.disabled {
-              color: #6c6c6c;
-            }
-          }
-        }
-
-        .load-broker-progress-status {
-          height: 14px;
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          grid-gap: 4px;
-          gap: 4px;
-          text-align: center;
-
-          .progress-bar-price {
-            color: $bw5;
-            font-size: 11px;
-            font-weight: 400;
-          }
-
-          .progress-bar-line {
-            width: 24px;
-          }
-        }
-
-        .load-broker-load-counter {
-          max-width: -webkit-max-content;
-          max-width: -moz-max-content;
-          max-width: max-content;
-          height: 18px;
-          border-radius: 30px;
-          text-align: center;
-          font-size: 11px;
-          font-weight: 400;
-          color: $bw5;
-          background-color: rgb(145, 145, 145, 0.2);
-          padding: 1px 6px;
-
-          &.active {
-            color: #6f9ee0;
-            background-color: rgb(111, 158, 224, 0.2);
-          }
-
-          &.hasOneValue {
-            max-width: 19px !important;
-          }
-        }
-      }
-
       //------------------------ Load Shipper Contact Template -----------------------
       .load-shipper-template {
         display: grid;
@@ -1543,6 +1463,91 @@
   }
 }
 
+
+      //------------------------ Load Broker Template ------------------------
+      .load-broker-template {
+        &.in-option{
+          height: 22px;
+        }
+
+        display: grid;
+        align-items: center;
+        grid-template-columns: 276px 92px;
+        -moz-column-gap: 29px;
+        column-gap: 29px;
+        &.hide-loads {
+          grid-template-columns: 333px 92px !important;
+        }
+        .load-broker-status-text {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          line-height: 18px;
+
+          .load-broker-status {
+            position: relative;
+            line-height: 17px;
+
+            &.dnu-status {
+              svg {
+                path {
+                  fill: #aaaaaa;
+                }
+              }
+            }
+          }
+
+          .load-broker-text {
+            &.disabled {
+              color: #6c6c6c;
+            }
+          }
+        }
+
+        .load-broker-progress-status {
+          height: 14px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          grid-gap: 4px;
+          gap: 4px;
+          text-align: center;
+
+          .progress-bar-price {
+            color: $bw5;
+            font-size: 11px;
+            font-weight: 400;
+          }
+
+          .progress-bar-line {
+            width: 24px;
+          }
+        }
+
+        .load-broker-load-counter {
+          max-width: -webkit-max-content;
+          max-width: -moz-max-content;
+          max-width: max-content;
+          height: 18px;
+          border-radius: 30px;
+          text-align: center;
+          font-size: 11px;
+          font-weight: 400;
+          color: $bw5;
+          background-color: rgb(145, 145, 145, 0.2);
+          padding: 1px 6px;
+
+          &.active {
+            color: #6f9ee0;
+            background-color: rgb(111, 158, 224, 0.2);
+          }
+
+          &.hasOneValue {
+            max-width: 19px !important;
+          }
+        }
+      }
+
 // Selected Dropdown Card Preview
 .selected-item-container {
   height: 52px;
@@ -1880,3 +1885,100 @@
 .hide-after-arrow .dropdown-option.active::after {
   display: none !important;
 }
+
+
+
+//------------------------ Load Dispatches TTD Template ------------------------
+.load-dispatches-ttd-template {
+  display: grid;
+  grid-template-columns: repeat(3, 155px) 97px;
+  align-items: center;
+
+  .load-dispatches-container {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    position: relative;
+
+    .owner-avatar {
+      position: absolute;
+      left: 13px;
+      bottom: -3px;
+      width: 10px;
+      height: 10px;
+    }
+
+    .load-dispatch-driver,
+    .load-dispatch-truck,
+    .load-dispatch-trailer {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 116px;
+      max-width: -webkit-fit-content;
+      max-width: -moz-fit-content;
+      max-width: fit-content;
+      line-height: 18px;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    .load-dispatches-svg {
+      line-height: 16px;
+      svg {
+        width: 46px;
+        height: 16px;
+      }
+    }
+
+    .load-dipstaches-owner-flag {
+      position: absolute;
+      top: 44%;
+      right: 0;
+      transform: translateY(-50%);
+      svg {
+        path {
+          fill: #6f9ee0 !important;
+        }
+      }
+    }
+
+    &.trailerContainer {
+      width: -webkit-max-content !important;
+      width: -moz-max-content !important;
+      width: max-content !important;
+      padding: 0px !important;
+      margin: 0px !important;
+    }
+  }
+
+  .load-dispatch-driver-rate {
+    width: 130px;
+    text-align: right;
+    font-size: 11px;
+    font-weight: 400;
+    color: $bw5;
+    padding-bottom: 1px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &.active {
+      color: #6f9ee0;
+    }
+
+    &.driver-owner {
+      text-align: left;
+      width: 80px;
+    }
+  }
+
+  &.active {
+    .load-dispatch-driver-rate,
+    .load-dispatch-driver,
+    .load-dispatch-truck,
+    .load-dispatch-trailer {
+      font-weight: 700;
+    }
+  }
+}