@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.1

package/v2Components/ErrorInfoNote/style.scss

@@ -1,7 +1,7 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 .error-container {
-  width: max-content;
+  width: 100%;
   margin-bottom: $CAP_SPACE_08;
   margin-top: $CAP_SPACE_12;
   background-color: $CAP_COLOR_05;
@@ -9,8 +9,246 @@
   padding: $CAP_SPACE_08 $CAP_SPACE_12 $CAP_SPACE_08 $CAP_SPACE_08;
   gap: $CAP_SPACE_08;
   box-sizing: border-box;
+
+  // New tabbed interface styles
+  &--tabs {
+    padding: 0.5rem 0.75rem;
+  }
 }
 
+// Header with tabs and actions
+.error-info-note {
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__tabs {
+    flex: 1;
+    
+    // Override Ant Design Tabs styles
+    .ant-tabs-nav {
+      margin-bottom: 0;
+      
+      &::before {
+        border-bottom: none;
+      }
+    }
+
+    .ant-tabs-tab {
+      padding: 0.5rem 0;
+      margin-right: 1.5rem;
+      color: $CAP_G03;
+      font-size: 0.875rem;
+      font-weight: 500;
+      
+      &:hover {
+        color: $CAP_G01;
+      }
+
+      &.ant-tabs-tab-active {
+        .ant-tabs-tab-btn {
+          color: $CAP_G01;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .ant-tabs-ink-bar {
+      background-color: $CAP_G01;
+      height: 0.125rem;
+    }
+
+    .ant-tabs-content-holder {
+      padding-top: 0.5rem;
+    }
+  }
+
+  &__tab-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  &__tab-count {
+    color: inherit;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+    padding-top: 0.5rem;
+  }
+
+  &__liquid-doc {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: $CAP_BLUE;
+    font-size: 0.875rem;
+    font-weight: 500;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+
+    &:hover {
+      color: $CAP_BLUE01;
+    }
+
+    .cap-icon-v2 {
+      margin-left: 0.25rem;
+    }
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: $CAP_G03;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba($CAP_G01, 0.1);
+      color: $CAP_G01;
+    }
+
+    .anticon {
+      font-size: 0.875rem;
+    }
+  }
+
+  &__content {
+    max-height: 12.5rem;
+    overflow-y: auto;
+    padding-right: 0.25rem;
+
+    // Custom scrollbar
+    &::-webkit-scrollbar {
+      width: 0.375rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $CAP_G06;
+      border-radius: 0.1875rem;
+
+      &:hover {
+        background-color: $CAP_G04;
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.375rem 0;
+    border-bottom: 1px solid rgba($CAP_G06, 0.3);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--error {
+      .error-info-note__icon--error {
+        color: $CAP_RED;
+      }
+    }
+
+    &--warning {
+      .error-info-note__icon--warning {
+        color: $CAP_YELLOW;
+      }
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding-top: 0.125rem;
+  }
+
+  &__icon {
+    font-size: 0.875rem;
+
+    &--error {
+      color: $CAP_RED;
+    }
+
+    &--warning {
+      color: $CAP_YELLOW;
+    }
+  }
+
+  &__item-content {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    color: $CAP_G01;
+  }
+
+  &__item-message {
+    color: $CAP_G01;
+  }
+
+  &__item-location {
+    color: $CAP_G03;
+    white-space: nowrap;
+  }
+
+  &__item-rule {
+    color: $CAP_G04;
+    font-family: monospace;
+    font-size: 0.6875rem;
+  }
+
+  &__item-navigate {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: $CAP_G04;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba($CAP_G01, 0.1);
+      color: $CAP_G01;
+    }
+
+    .anticon {
+      font-size: 0.75rem;
+    }
+  }
+}
+
+// Legacy styles (kept for backwards compatibility)
 .error-header {
   width: 100%;
   height: $CAP_SPACE_32;
@@ -60,6 +298,25 @@
   }
 }
 
+// Legacy error list for platform-specific errors
+.error-list-legacy {
+  max-height: 10rem;
+  overflow-y: auto;
+  padding: 0;
+
+  &__item {
+    padding: $CAP_SPACE_04 0;
+  }
+
+  .cap-list-v2-error-item {
+    color: $CAP_G01;
+    font-size: $CAP_SPACE_12;
+    display: flex;
+    margin-left: $CAP_SPACE_04;
+    gap: $CAP_SPACE_04;
+  }
+}
+
 .liquid-divider {
   &.ant-divider.cap-divider-v2 {
     background: $FONT_COLOR_04;
@@ -83,4 +340,24 @@
 .error-header-sub-title {
   margin-left: $CAP_SPACE_04;
   font-weight: 500;
-}
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .error-info-note {
+    &__tabs {
+      .ant-tabs-tab {
+        margin-right: 1rem;
+        font-size: 0.8125rem;
+      }
+    }
+
+    &__content {
+      max-height: 10rem;
+    }
+
+    &__item-content {
+      font-size: 0.6875rem;
+    }
+  }
+}