@salesforcedevs/docs-components 0.0.11-edit → 0.0.13-chat

package/src/modules/doc/editFile/editFile.css

@@ -1,613 +0,0 @@
-/* Host container */
-:host {
-    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont,
-        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
-        sans-serif;
-    position: absolute;
-    top: 10px;
-    left: 50%;
-    z-index: 1000;
-}
-
-/* Edit File Trigger Button */
-.edit-file-trigger {
-    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
-    color: white;
-    border: none;
-    border-radius: 12px;
-    padding: 12px 16px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    box-shadow: 0 4px 16px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: 0.02em;
-    width: 150px;
-    justify-content: center;
-}
-
-.edit-file-trigger:hover:not(:disabled) {
-    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgb(1 118 211 / 35%), 0 4px 12px rgb(1 118 211 / 25%);
-}
-
-.edit-file-trigger:active:not(:disabled) {
-    transform: translateY(0);
-    box-shadow: 0 2px 8px rgb(1 118 211 / 30%);
-}
-
-.edit-file-trigger:disabled {
-    background: #d8dde6;
-    color: #706e6b;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
-}
-
-.edit-file-icon {
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-}
-
-.edit-file-trigger-text {
-    font-weight: 500;
-    white-space: nowrap;
-}
-
-/* Overlay */
-.edit-file-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(0 0 0 / 50%);
-    backdrop-filter: blur(4px);
-    z-index: 10000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-.edit-file-overlay_open {
-    opacity: 1;
-    visibility: visible;
-}
-
-/* Popover */
-.edit-file-popover {
-    background: white;
-    border-radius: 16px;
-    box-shadow: 0 20px 60px rgb(0 0 0 / 20%), 0 8px 24px rgb(0 0 0 / 15%);
-    width: 100%;
-    max-width: 900px;
-    max-height: 90vh;
-    display: flex;
-    flex-direction: column;
-    transform: scale(0.9) translateY(20px);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    overflow: hidden;
-}
-
-.edit-file-popover_open {
-    transform: scale(1) translateY(0);
-}
-
-/* Popover Header */
-.edit-file-header {
-    padding: 24px 24px 20px;
-    border-bottom: 1px solid #e5e7ea;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 16px;
-    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
-    position: relative;
-}
-
-.edit-file-title {
-    margin: 0;
-    font-size: 24px;
-    font-weight: 700;
-    color: #181818;
-    letter-spacing: -0.02em;
-}
-
-.edit-file-filename {
-    margin: 8px 0 0;
-    font-size: 14px;
-    color: #706e6b;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: 500;
-}
-
-.edit-file-file-icon {
-    width: 16px;
-    height: 16px;
-    color: #0176d3;
-}
-
-.edit-file-close {
-    width: 40px;
-    height: 40px;
-    border: none;
-    background: transparent;
-    border-radius: 10px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    color: #706e6b;
-    flex-shrink: 0;
-}
-
-.edit-file-close:hover {
-    background: #f3f3f3;
-    color: #181818;
-    transform: scale(1.05);
-}
-
-.edit-file-close-icon {
-    width: 20px;
-    height: 20px;
-}
-
-/* Popover Content */
-.edit-file-content {
-    flex: 1;
-    padding: 24px;
-    overflow-y: auto;
-    min-height: 0;
-}
-
-/* Loading State */
-.edit-file-loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 60px 20px;
-    gap: 16px;
-}
-
-.edit-file-spinner {
-    width: 32px;
-    height: 32px;
-    border: 3px solid #e5e7ea;
-    border-top: 3px solid #0176d3;
-    border-radius: 50%;
-    animation: edit-file-spin 1s linear infinite;
-}
-
-.edit-file-loading-text {
-    margin: 0;
-    color: #706e6b;
-    font-size: 16px;
-    font-weight: 500;
-}
-
-/* Error State */
-.edit-file-error {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px 20px;
-    background: #fef7f7;
-    border: 1px solid #fecaca;
-    border-radius: 12px;
-    color: #dc2626;
-    margin-bottom: 20px;
-}
-
-.edit-file-error-icon {
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-}
-
-.edit-file-error-text {
-    font-size: 14px;
-    font-weight: 500;
-}
-
-/* Success State */
-.edit-file-success {
-    display: flex;
-    align-items: flex-start;
-    gap: 16px;
-    padding: 20px;
-    background: #f0f9f4;
-    border: 1px solid #d1fae5;
-    border-radius: 12px;
-    margin-bottom: 24px;
-}
-
-.edit-file-success-icon {
-    width: 24px;
-    height: 24px;
-    color: #059669;
-    flex-shrink: 0;
-    margin-top: 2px;
-}
-
-.edit-file-success-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.edit-file-success-text {
-    font-size: 14px;
-    font-weight: 500;
-    color: #065f46;
-    line-height: 1.5;
-}
-
-.edit-file-pr-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    color: #0176d3;
-    text-decoration: none;
-    font-size: 14px;
-    font-weight: 500;
-    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.edit-file-pr-link:hover {
-    color: #005fb2;
-    text-decoration: underline;
-}
-
-.edit-file-pr-link:focus {
-    outline: 2px solid #0176d3;
-    outline-offset: 2px;
-    border-radius: 4px;
-}
-
-.edit-file-success-footer {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-}
-
-/* Editor */
-.edit-file-editor {
-    width: 100%;
-}
-
-.edit-file-editor_readonly {
-    opacity: 0.7;
-}
-
-.edit-file-label {
-    display: block;
-    margin-bottom: 8px;
-    font-size: 14px;
-    font-weight: 600;
-    color: #181818;
-}
-
-.edit-file-textarea {
-    width: 100%;
-    min-height: 400px;
-    padding: 16px;
-    border: 2px solid #e5e7ea;
-    border-radius: 12px;
-    font-family: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New",
-        monospace;
-    font-size: 14px;
-    line-height: 1.5;
-    resize: vertical;
-    outline: none;
-    background: #fafbfc;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    box-sizing: border-box;
-}
-
-.edit-file-textarea_readonly {
-    background: #f8f9fa;
-    border-color: #d1d5db;
-    color: #6b7280;
-    cursor: not-allowed;
-}
-
-.edit-file-textarea:focus {
-    border-color: #0176d3;
-    background: white;
-    box-shadow: 0 0 0 3px rgb(1 118 211 / 10%);
-}
-
-.edit-file-textarea_readonly:focus {
-    border-color: #d1d5db;
-    background: #f8f9fa;
-    box-shadow: none;
-}
-
-.edit-file-textarea::placeholder {
-    color: #9ca3af;
-}
-
-/* Popover Footer */
-.edit-file-footer {
-    padding: 20px 24px 24px;
-    border-top: 1px solid #e5e7ea;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
-}
-
-/* Status Indicators */
-.edit-file-status {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.edit-file-saving {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: #0176d3;
-}
-
-.edit-file-mini-spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid #e5e7ea;
-    border-top: 2px solid #0176d3;
-    border-radius: 50%;
-    animation: edit-file-spin 1s linear infinite;
-}
-
-.edit-file-unchanged {
-    color: #706e6b;
-}
-
-.edit-file-modified {
-    color: #059669;
-    position: relative;
-}
-
-.edit-file-modified::before {
-    content: "●";
-    margin-right: 6px;
-    color: #059669;
-}
-
-/* Action Buttons */
-.edit-file-actions {
-    display: flex;
-    gap: 12px;
-}
-
-.edit-file-button {
-    padding: 12px 24px;
-    border-radius: 10px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border: none;
-    white-space: nowrap;
-}
-
-.edit-file-button_secondary {
-    background: #f3f3f3;
-    color: #181818;
-    border: 1px solid #e5e7ea;
-}
-
-.edit-file-button_secondary:hover:not(:disabled) {
-    background: #e5e7ea;
-    transform: translateY(-1px);
-}
-
-.edit-file-button_primary {
-    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
-    color: white;
-}
-
-.edit-file-button_primary:hover:not(:disabled) {
-    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgb(1 118 211 / 25%);
-}
-
-.edit-file-button_disabled {
-    background: #d8dde6 !important;
-    color: #706e6b !important;
-    cursor: not-allowed !important;
-    transform: none !important;
-    box-shadow: none !important;
-}
-
-.edit-file-button:disabled {
-    background: #d8dde6;
-    color: #706e6b;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-.edit-file-button-spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid transparent;
-    border-top: 2px solid currentcolor;
-    border-radius: 50%;
-    animation: edit-file-spin 1s linear infinite;
-}
-
-/* Animations */
-@keyframes edit-file-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .edit-file-trigger {
-        padding: 10px 14px;
-        font-size: 13px;
-    }
-
-    .edit-file-trigger-text {
-        display: none;
-    }
-
-    .edit-file-overlay {
-        padding: 16px;
-    }
-
-    .edit-file-popover {
-        max-width: 100%;
-        max-height: 95vh;
-    }
-
-    .edit-file-header {
-        padding: 20px 20px 16px;
-    }
-
-    .edit-file-title {
-        font-size: 20px;
-    }
-
-    .edit-file-content {
-        padding: 20px;
-    }
-
-    .edit-file-textarea {
-        min-height: 300px;
-        font-size: 13px;
-    }
-
-    .edit-file-footer {
-        padding: 16px 20px 20px;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 12px;
-    }
-
-    .edit-file-actions {
-        width: 100%;
-        justify-content: stretch;
-    }
-
-    .edit-file-button {
-        flex: 1;
-        justify-content: center;
-    }
-}
-
-@media (max-width: 480px) {
-    .edit-file-trigger {
-        padding: 8px 12px;
-    }
-
-    .edit-file-overlay {
-        padding: 12px;
-    }
-
-    .edit-file-header {
-        padding: 16px;
-    }
-
-    .edit-file-title {
-        font-size: 18px;
-    }
-
-    .edit-file-content {
-        padding: 16px;
-    }
-
-    .edit-file-footer {
-        padding: 12px 16px 16px;
-    }
-
-    .edit-file-textarea {
-        min-height: 250px;
-        padding: 12px;
-    }
-
-    .edit-file-success {
-        padding: 12px;
-        gap: 8px;
-    }
-
-    .edit-file-success-icon {
-        width: 18px;
-        height: 18px;
-    }
-
-    .edit-file-success-content {
-        gap: 6px;
-    }
-
-    .edit-file-success-text {
-        font-size: 12px;
-    }
-
-    .edit-file-pr-link {
-        font-size: 12px;
-    }
-}
-
-/* Accessibility improvements */
-@media (prefers-reduced-motion: reduce) {
-    .edit-file-trigger,
-    .edit-file-overlay,
-    .edit-file-popover,
-    .edit-file-close,
-    .edit-file-button,
-    .edit-file-textarea {
-        transition: none;
-    }
-
-    .edit-file-spinner,
-    .edit-file-mini-spinner,
-    .edit-file-button-spinner {
-        animation: none;
-    }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-    .edit-file-trigger {
-        border: 2px solid;
-    }
-
-    .edit-file-popover {
-        border: 2px solid #000;
-    }
-
-    .edit-file-textarea {
-        border: 2px solid #000;
-    }
-
-    .edit-file-button {
-        border: 2px solid;
-    }
-}