@tuki-io/tuki-widgets 0.0.219-dev.0 → 0.0.220

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/site-upgrade-data-table/site-upgrade-data-table.component.scss

@@ -1,469 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Poppins:400,100,200,300,500,600,800,700,900");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
-
-.webex-action-menu {
-  box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1) !important;
-  border-radius: 0px !important;
-  width: 258px;
-  box-sizing: content-box;
-  cursor: pointer;
-}
-.webex-action-menu-row-disabled {
-  cursor: default !important;
-  opacity: 0.4;
-
-  .webex-action-menu-title {
-    color: #bababa !important;
-    line-height: 23px;
-  }
-}
-.app-progress-bar-container {
-  margin: 7px 20px 0 0;
-}
-.progress-bar-container {
-  min-width: 40px;
-}
-.webex-action-menu-row:hover {
-  background: #f5f5f5;
-}
-.webex-icon {
-  display: inline-block;
-  height: 25px;
-  width: 25px;
-  margin: 0 7px 0 0;
-}
-.webex-details-icon {
-  background-image: url("../../../assets/icons/details_d_icon.svg");
-}
-.webex-action-menu-row {
-  padding: 5px 15px;
-  display: flex;
-  justify-content: flex-start;
-
-  .webex-action-menu-title {
-    line-height: 23px;
-  }
-}
-.mat-menu-content:not(:empty) {
-  padding-top: 0 !important;
-}
-.mat-menu-panel {
-  min-height: auto !important;
-}
-
-#siteUpgradeTable {
-  font-family: "Inter", sans-serif !important;
-}
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.overlay {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(255, 255, 255, 0.4);
-  z-index: 200;
-}
-.mat-progress-spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -20px;
-  margin-left: -25px;
-  width: 50px;
-  height: 40px;
-  text-align: center;
-  font-size: 10px;
-}
-.mat-progress-spinner-td {
-  position: relative;
-
-  .mat-progress-spinner {
-    top: 28%;
-    left: 0;
-    margin: 0;
-    position: absolute;
-  }
-}
-.progress-percents {
-  font-weight: 500;
-  font-size: 12px;
-}
-
-:host ::ng-deep {
-  .mat-progress-spinner-td {
-    position: relative;
-  }
-  #siteUpgradeTable .mat-progress-spinner-td {
-    .mat-progress-spinner {
-      top: 28%;
-      left: 0;
-      margin: 0;
-    }
-  }
-}
-
-.site-upgrade-status-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex-wrap: wrap;
-  margin-bottom: 1rem;
-  align-items: stretch;
-}
-
-.site-upgrade-table {
-  width: 100%;
-  background: white;
-  border-radius: 8px;
-  overflow: hidden;
-  font-size: 14px;
-
-  .mat-header-row {
-    // background-color: #ededed;
-    font-size: 12px;
-    height: 35px;
-  }
-
-  .mat-cell {
-    border-bottom: 1px solid #d6d6d6;
-    font-family: "Inter", sans-serif !important;
-  }
-  .mat-header-cell {
-    border-bottom: 1px solid #afafaf;
-    font-family: "Inter", sans-serif !important;
-  }
-
-  // Site info styling
-  .site-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .site-indicator {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background-color: #1170cf;
-    }
-  }
-  .indicator-status-ready {
-    color: #1170cf !important;
-  }
-
-  // Device info styling
-  .device-info {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    .device-name-wrapper {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      // margin-bottom: 2px;
-
-      .device-name {
-        font-weight: 500;
-        color: #212121;
-      }
-
-      .device-indicator {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background-color: #f8cd00;
-      }
-    }
-
-    .device-model {
-      font-size: 12px;
-      color: #757575;
-    }
-  }
-
-  // Status indicators
-  .status-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .status-indicator {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-
-      &.ready {
-        background-color: #1170cf;
-      }
-
-      &.partial-ready {
-        background-color: #f8cd00;
-      }
-
-      &.not-ready {
-        background-color: #9e9e9e;
-      }
-
-      &.completed {
-        background-color: #1d805f;
-      }
-
-      &.failed {
-        background-color: #f23933;
-      }
-    }
-  }
-
-  // Dependencies styling
-  .dependencies-text {
-    font-size: 12px;
-    background-color: #ffe9e9;
-    padding: 0.25rem 0.5rem;
-    border-radius: 3px;
-    color: #000;
-  }
-
-  // Upgrade status cell
-  .upgrade-status-cell {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-  }
-
-  .flex-container {
-    display: flex;
-  }
-
-  .upgrade-button {
-    border-radius: 20px !important;
-    font-size: 14px !important;
-    font-style: normal !important;
-    font-weight: 400 !important;
-    height: 32px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-
-    border: 1px solid rgb(0, 0, 0) !important;
-    color: white !important;
-    background: rgb(0, 0, 0) !important;
-    border-radius: 20px !important;
-    font-size: 14px !important;
-    font-style: normal !important;
-    font-weight: 500 !important;
-    height: 32px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-
-    &:hover {
-      background-color: #000000b0 !important;
-    }
-  }
-
-  // User count info styling
-  .user-count-info {
-    .user-count {
-      font-weight: 500;
-      color: #212121;
-      // margin-bottom: 2px;
-    }
-
-    .user-label {
-      font-size: 12px;
-      color: #757575;
-    }
-  }
-
-  // Status icon cell styling
-  .status-icon-cell, .collect-icon-cell {
-    display: flex;
-    align-items: center;
-  }
-
-  .icon-play {
-    width: 24px;
-    height: 24px;
-    background-image: url("../../../assets/icons/icon_play.svg");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-  }
-  .collect-icon-cell {
-    cursor: pointer;
-  }
-}
-
-:host ::ng-deep .action-wrapper {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  justify-content: space-between;
-  gap: 1rem;
-  color: #555555;
-}
-
-.table-action-panel {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 1rem;
-}
-
-/// Play button
-// Pay Button Icon - Circle with right arrow triangle
-.pay-button-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border: 1px solid #2c355d; // Light grey border
-  background-color: #ffffff;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  position: relative;
-
-  // Blue right arrow triangle
-  &::after {
-    content: "";
-    width: 0;
-    height: 0;
-    border-left: 6px solid #2c355d; // Blue color
-    border-top: 4px solid transparent;
-    border-bottom: 4px solid transparent;
-    margin-left: 2px; // Slight offset to center visually
-  }
-
-  // Hover effects
-  &:hover {
-    border-color: #2c355d;
-    background-color: #f8fafc;
-    transform: scale(1.05);
-
-    &::after {
-      border-left-color: #2c355d; // Darker blue on hover
-    }
-  }
-
-  // Active/pressed state
-  &:active {
-    transform: scale(0.95);
-    background-color: #e2e8f0;
-  }
-
-  // Disabled state
-  &:disabled,
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    &:hover {
-      transform: none;
-      border-color: #d1d5db;
-      background-color: #ffffff;
-
-      &::after {
-        border-left-color: #2c355d;
-      }
-    }
-  }
-}
-
-// Size variations
-.pay-button-icon {
-  // Small size
-  &.small {
-    width: 32px;
-    height: 32px;
-    border-width: 1.5px;
-
-    &::after {
-      border-left-width: 6px;
-      border-top-width: 5px;
-      border-bottom-width: 5px;
-      margin-left: 1px;
-    }
-  }
-
-  // Large size
-  &.large {
-    width: 48px;
-    height: 48px;
-    border-width: 2.5px;
-
-    &::after {
-      border-left-width: 10px;
-      border-top-width: 7px;
-      border-bottom-width: 7px;
-      margin-left: 3px;
-    }
-  }
-
-  // Extra large size
-  &.xl {
-    width: 56px;
-    height: 56px;
-    border-width: 3px;
-
-    &::after {
-      border-left-width: 12px;
-      border-top-width: 8px;
-      border-bottom-width: 8px;
-      margin-left: 3px;
-    }
-  }
-}
-
-// Animation for loading state
-.pay-button-icon {
-  &.loading {
-    &::after {
-      display: none;
-    }
-
-    &::before {
-      content: "";
-      width: 16px;
-      height: 16px;
-      border: 2px solid #2c355d;
-      //border-top-color: #2563eb;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// Usage with button text
-.pay-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  color: #2c355d;
-  transition: color 0.3s ease;
-
-  .pay-button-icon {
-    margin: 0;
-  }
-}