@seamapi/react 4.14.0 → 5.0.0

package/src/styles/_supported-device-table.scss

@@ -1,412 +0,0 @@
-@use 'sass:math';
-@use './colors';
-
-$row-height: 64px;
-$row-padding: 8px;
-$see-all-button-height: 30px;
-
-@mixin all {
-  .seam-supported-device-table-content-wrap {
-    background: colors.$white;
-  }
-
-  .seam-supported-device-table-filter-area {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-    padding: 16px;
-
-    .seam-filters-wrap {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      flex-direction: row;
-      gap: 8px;
-    }
-
-    .seam-supported-device-table-filter-area-search-bar-wrap {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: row;
-    }
-  }
-
-  .seam-supported-device-table-filter-menu {
-    width: 100%;
-    padding: 8px 16px;
-
-    .seam-filter-menu-row {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-direction: row;
-
-      &:not(:last-of-type) {
-        margin-bottom: 8px;
-      }
-
-      .seam-filter-checkbox-label {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-direction: row;
-      }
-
-      .seam-filter-checkbox {
-        appearance: checkbox;
-      }
-    }
-
-    .seam-supported-device-table-filter-menu-wrap {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-direction: row;
-
-      & button {
-        appearance: none;
-        padding: 4px 8px;
-        padding-right: 24px;
-        margin: 0;
-        border: 0;
-        box-shadow: none;
-        border-radius: 4px;
-        background-color: colors.$bg-b;
-        position: relative;
-        cursor: pointer;
-
-        &:hover {
-          background-color: colors.$bg-c;
-        }
-
-        & span {
-          font-size: 14px;
-          font-weight: 500;
-        }
-
-        & svg {
-          position: absolute;
-          top: 2px;
-        }
-      }
-    }
-  }
-
-  .seam-manufacturer-section {
-    margin-bottom: 32px;
-    position: relative;
-    display: flex;
-    padding: 8px 16px 16px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 10px;
-    align-self: stretch;
-
-    .seam-manufacturer-annotation-box {
-      display: flex;
-      padding: 8px;
-      align-items: center;
-      align-content: center;
-      gap: 0 8px;
-      align-self: stretch;
-      flex-wrap: wrap;
-      border-radius: 6px;
-      background-color: colors.$primary-transparent;
-
-      .seam-annotation {
-        display: flex;
-        align-items: flex-start;
-        align-content: flex-start;
-        gap: 2px;
-        flex: 1 0 0;
-        flex-wrap: wrap;
-        color: colors.$text-gray-1;
-        font-size: 14px;
-        line-height: 120%;
-      }
-    }
-
-    .seam-header {
-      display: flex;
-      align-items: center;
-      height: 64px;
-
-      .seam-manufacturer-image {
-        width: 48px;
-        height: 48px;
-        padding: 0 8px;
-        box-sizing: content-box;
-        margin-right: 8px;
-      }
-
-      .seam-manufacturer-name {
-        font-size: 21px;
-        line-height: 132%;
-        flex: 1;
-      }
-
-      .chevron {
-        transform: rotate(90deg);
-        margin-right: 24px;
-      }
-    }
-
-    .show-all-devices-button {
-      cursor: pointer;
-      background: colors.$white;
-      display: flex;
-      height: $see-all-button-height;
-      padding: 5px 24px 4px 16px;
-      align-items: center;
-      gap: 2px;
-      font-size: 14px;
-      line-height: 115%;
-      color: colors.$text-gray-1;
-      border-radius: 30px;
-      border: 0;
-      box-shadow:
-        0 1px 1px 0 rgb(16 27 37 / 10%),
-        0 1px 8px 0 rgb(46 69 82 / 12%);
-      position: absolute;
-      bottom: math.div(
-          -($row-height - $see-all-button-height - $row-padding),
-          2
-        )
-        or calc(-1 * ($row-height - $see-all-button-height - $row-padding) / 2);
-      left: 50%;
-      transform: translate(-50%, -47px);
-      z-index: 3;
-
-      svg {
-        transform: rotate(90deg);
-        font-size: 25px;
-      }
-    }
-
-    .hidden-devices-overlay {
-      background: linear-gradient(
-        180deg,
-        rgb(255 255 255 / 0%) 10.17%,
-        #fff 86.98%
-      );
-      position: absolute;
-      height: $row-height;
-      width: 100%;
-      bottom: 0;
-      z-index: 2;
-    }
-
-    &.can-expand {
-      .seam-header {
-        cursor: pointer;
-
-        &:hover {
-          background: colors.$bg-aa;
-        }
-      }
-    }
-
-    &.expanded {
-      margin-bottom: 96px; // 32px  (usual margin) + 64px (empty row)
-
-      .seam-header {
-        .chevron {
-          transform: rotate(270deg);
-        }
-      }
-
-      .show-all-devices-button {
-        transform: translate(-50%, 16px);
-
-        svg {
-          transform: rotate(270deg);
-        }
-      }
-    }
-  }
-
-  .seam-supported-device-table-content-state-block {
-    width: 100%;
-    background-color: colors.$bg-a;
-    padding: 32px 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .seam-supported-device-table-content-message-row {
-    height: auto !important;
-  }
-
-  .seam-supported-device-table-content-message {
-    width: 100%;
-    padding: 32px 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    text-align: center;
-    gap: 4px;
-
-    & p {
-      line-height: 1;
-      margin: 0;
-    }
-
-    & button {
-      cursor: pointer;
-      margin-top: 8px;
-    }
-  }
-
-  .seam-supported-device-table-content {
-    width: 100%;
-    overflow-x: auto;
-    table-layout: auto;
-    border-collapse: collapse;
-
-    .seam-row {
-      height: $row-height;
-      border-bottom: 1px solid colors.$bg-b;
-      display: flex;
-
-      &:first-child {
-        border-top: 1px solid colors.$bg-b;
-      }
-
-      .seam-col {
-        display: flex;
-        padding: 8px;
-      }
-    }
-
-    .seam-status-pill {
-      display: inline-flex;
-      padding: 4px 8px;
-      border-radius: 16px;
-
-      & span {
-        font-size: 11px;
-        line-height: 134%;
-        letter-spacing: 0.55px;
-      }
-
-      &.status-green {
-        background-color: colors.$pill-green-bg;
-        color: colors.$pill-green-text;
-      }
-
-      &.status-blue {
-        background-color: colors.$pill-blue-bg;
-        color: colors.$pill-blue-text;
-      }
-
-      &.status-unknown {
-        color: colors.$text-gray-1;
-        font-size: 12px;
-        line-height: 118%;
-      }
-
-      &:not(.status-unknown) {
-        font-weight: 600;
-      }
-    }
-
-    .seam-device-image-col {
-      align-items: center;
-
-      .seam-image-box {
-        width: 48px;
-        height: 48px;
-
-        img {
-          width: 100%;
-        }
-      }
-    }
-
-    .seam-model-col {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-      gap: 2px;
-
-      .seam-model-name {
-        font-size: 14px;
-
-        .seam-truncated-text {
-          width: 270px;
-        }
-      }
-
-      .seam-model-id {
-        color: colors.$text-gray-2;
-        font-size: 12px;
-
-        .seam-truncated-text {
-          width: 220px;
-        }
-
-        .seam-dot-divider {
-          margin: 0 4px;
-          color: colors.$text-gray-3;
-        }
-      }
-
-      @media only screen and (width >= 450px) {
-        .seam-model-name {
-          font-size: 16px;
-        }
-
-        .seam-model-id {
-          font-size: 14px;
-        }
-      }
-
-      @media only screen and (width >= 768px) {
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
-
-        .seam-model-name {
-          flex: 1;
-          font-size: 14px;
-        }
-
-        .seam-model-id {
-          flex: 0 0 40%;
-          font-size: 14px;
-          display: flex;
-          justify-content: flex-end;
-
-          .seam-truncated-text {
-            text-align: right;
-          }
-        }
-      }
-    }
-
-    .seam-status-col {
-      width: 70px;
-      text-align: center;
-      align-items: center;
-    }
-  }
-
-  .seam-supported-device-table-filter-menu-content {
-    max-height: 300px;
-    overflow: auto;
-  }
-}