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

package/v2Containers/WebPush/Create/components/_buttons.scss

@@ -1,246 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
-
-// Button components styles for Web Push Create
-
-.webpush-button-form {
-  border: 1px solid $CAP_G07;
-  border-radius: $CAP_SPACE_08;
-  padding: $CAP_SPACE_20;
-  margin-bottom: $CAP_SPACE_16;
-
-  .button-form-row {
-    margin-bottom: $CAP_SPACE_16;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .button-form-heading {
-    margin-bottom: $CAP_SPACE_08;
-    font-weight: 600;
-  }
-
-  .button-form-field {
-    position: relative;
-  }
-
-  .button-character-count-suffix {
-    font-size: $FONT_SIZE_S;
-    color: $FONT_COLOR_03;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .button-form-actions {
-    display: flex;
-    gap: $CAP_SPACE_12;
-    margin-top: $CAP_SPACE_20;
-
-    .button-form-save {
-      background-color: map-get($CAP_PRIMARY, base);
-      border-color: map-get($CAP_PRIMARY, base);
-      
-      &:hover:not(:disabled) {
-        background-color: map-get($CAP_PRIMARY, hover);
-        border-color: map-get($CAP_PRIMARY, hover);
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    }
-
-    .button-form-cancel {
-      background-color: $CAP_G12;
-      border-color: $CAP_COLOR_16;
-      color: $FONT_COLOR_01;
-      
-      &:hover {
-        background-color: $CAP_COLOR_16;
-        border-color: $CAP_G06;
-      }
-    }
-  }
-}
-
-.webpush-button-list {
-  .button-list-add-button {
-    margin-top: $CAP_SPACE_12;
-  }
-}
-
-.button-add-controls {
-  display: flex;
-  gap: $CAP_SPACE_12;
-  flex-wrap: wrap;
-  margin-top: $CAP_SPACE_16;
-}
-
-// High specificity selectors to override Cap UI library styles
-// Target both CapButton and Ant Design button classes that may be on the same element
-.button-add-controls button.button-add-trigger,
-.button-add-controls .button-add-trigger.cap-button,
-.button-add-controls .button-add-trigger.ant-btn,
-.button-add-controls .button-add-trigger.cap-button-flat,
-.button-add-controls .button-add-trigger.ant-btn-flat,
-.webpush-button-list button.button-add-trigger,
-.webpush-button-list .button-add-trigger.cap-button,
-.webpush-button-list .button-add-trigger.ant-btn,
-.webpush-button-list .button-add-trigger.cap-button-flat,
-.webpush-button-list .button-add-trigger.ant-btn-flat {
-  border: none;
-  background: transparent;
-  color: map-get($CAP_SECONDARY, base);
-  font-weight: $FONT_WEIGHT_MEDIUM;
-  border-radius: $CAP_SPACE_08;
-  padding: $CAP_SPACE_08 $CAP_SPACE_16;
-  display: inline-flex;
-  align-items: center;
-  gap: $CAP_SPACE_08;
-
-  &:hover:not(:disabled) {
-    background: $CAP_G09;
-  }
-
-  &:disabled {
-    color: $CAP_G05;
-    cursor: not-allowed;
-    background: transparent;
-  }
-}
-
-.button-inline-form {
-  margin-bottom: $CAP_SPACE_12;
-}
-
-.webpush-button-item {
-  border: 1px solid $CAP_G07;
-  border-radius: 0.571rem;
-  padding: 0.7rem 0.857rem;
-  margin-bottom: 0.857rem;
-  background: $CAP_WHITE;
-  transition: all 0.2s ease;
-  cursor: move;
-
-  &:hover {
-    border-color: map-get($CAP_SECONDARY, base);
-    box-shadow: 0 0.142rem 0.571rem rgba(0, 0, 0, 0.08);
-  }
-
-  &[draggable="true"] {
-    cursor: move;
-  }
-
-  .button-item-content {
-    align-items: center;
-  }
-
-  .button-item-drag-handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: move;
-    padding-right: $CAP_SPACE_08;
-
-    .drag-icon {
-      font-size: 1rem;
-      color: $FONT_COLOR_01;
-      font-weight: 700;
-      transform: rotate(90deg);
-      display: inline-block;
-    }
-  }
-
-  .button-item-icon {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding-right: $CAP_SPACE_08;
-
-    .link-icon {
-      font-size: $FONT_SIZE_L;
-      color: $FONT_COLOR_01;
-    }
-  }
-
-  .button-item-info {
-    display: flex;
-    align-items: center;
-    padding-right: $CAP_SPACE_12;
-
-    .button-item-text-row {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      .button-item-text {
-        font-size: 13px;
-        font-weight: $FONT_WEIGHT_MEDIUM;
-        color: $FONT_COLOR_01;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 100%;
-      }
-    }
-  }
-
-  .button-item-actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: $CAP_SPACE_12;
-
-    .button-item-url {
-      font-size: $FONT_SIZE_S;
-      color: $FONT_COLOR_03;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 12.857rem;
-      flex-shrink: 1;
-      margin-right: $CAP_SPACE_12;
-    }
-
-    .action-icons {
-      display: flex;
-      align-items: center;
-      gap: $CAP_SPACE_12;
-      flex-shrink: 0;
-
-      .action-icon {
-        font-size: $FONT_SIZE_L;
-        color: $FONT_COLOR_01;
-        cursor: pointer;
-        transition: color 0.2s ease;
-
-        &:hover {
-          color: map-get($CAP_SECONDARY, base);
-        }
-
-        &.delete-icon:hover {
-          color: $CAP_RED;
-        }
-      }
-    }
-  }
-
-  &.disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-.creatives-webpush-buttons-section {
-  margin-top: $CAP_SPACE_20;
-  margin-bottom: $CAP_SPACE_24;
-
-  .webpush-buttons-section-heading {
-    margin-bottom: $CAP_SPACE_16;
-    font-weight: 600;
-  }
-}
-