@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Components/ErrorInfoNote/style.scss

@@ -1,7 +1,7 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 .error-container {
-  width: 100%;
+  width: max-content;
   margin-bottom: $CAP_SPACE_08;
   margin-top: $CAP_SPACE_12;
   background-color: $CAP_COLOR_05;
@@ -9,246 +9,8 @@
   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;
@@ -298,25 +60,6 @@
   }
 }
 
-// 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;
@@ -340,24 +83,4 @@
 .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;
-    }
-  }
-}
+}