superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/components/_overflow-stack.scss

@@ -0,0 +1,120 @@
+// Overflow Stack Component
+// A generic component for stacking items with overflow indicator
+
+.overflow-stack {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+
+    // Gap variations (for non-overlapping items)
+    &.overflow-stack--gap-compact {
+        gap: var(--gap-0-5); // 4px
+    }
+
+    &.overflow-stack--gap-loose {
+        gap: var(--gap-1); // 8px
+    }
+
+    &.overflow-stack--gap-none {
+        gap: 0; // no gap
+    }
+
+    // Overlapping mode (like avatars)
+    &.overflow-stack--overlap {
+        gap: 0;
+
+        .overflow-stack__item {
+            margin-inline-start: calc(var(--space--1) * -1);
+            transition: transform 0.2s ease, z-index 0.2s ease;
+            position: relative;
+            z-index: 1;
+
+            &:first-child {
+                margin-inline-start: 0;
+            }
+
+            &:hover {
+                transform: translateY(-2px);
+                z-index: 10;
+                > * {
+                    outline: 2px solid var(--color-surface-base);
+                }
+            }
+        }
+
+        .overflow-stack__indicator {
+            margin-inline-start: calc(var(--space--1) * -1);
+            z-index: 0;
+
+            &:hover {
+                transform: translateY(-2px);
+                z-index: 10;
+            }
+        }
+    }
+}
+
+.overflow-stack__item {
+    display: inline-flex;
+    align-items: center;
+}
+
+.overflow-stack__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 3.2rem;
+    height: 3.2rem;
+    padding: 0 var(--space--0-5);
+    background-color: var(--sd-colour-primary);
+    color: var(--white);
+    border: none;
+    border-radius: var(--border-radius--medium);
+    font-size: 1.3rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+    position: relative;
+
+    &:hover {
+        background-color: var(--sd-colour-primary--darker);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--sd-colour-primary);
+        outline-offset: 2px;
+    }
+}
+
+.overflow-stack__indicator-content {
+    font-size: var(--text-size--small);
+    color: var(--color-text-muted);
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    padding: var(--space--0-5);
+}
+
+.overflow-stack__popover {
+    background-color: var(--color-dropdown-menu-Bg);
+    border-radius: var(--b-radius--large);
+    padding: var(--space--1-5);
+    box-shadow: var(--sd-shadow__dropdown);
+    display: flex;
+    flex-direction: column;
+    min-width: max-content;
+    overflow-y: auto;
+}
+
+.overflow-stack__popover-item {
+    display: flex;
+    align-items: center;
+    padding-block: var(--space--0-5);
+    transition: all 0.2s ease;
+}

package/app/styles/components/_sd-circular-progress.scss

@@ -0,0 +1,239 @@
+@use '../variables/_colors.scss';
+@use "../variables/dimensions";
+
+// extra small
+$circular-progress-size-xs: 20px;
+$circular-progress-stroke-xs: 2;
+
+// small
+$circular-progress-size-s: 28px;
+$circular-progress-stroke-s: 2;
+
+// medium
+$circular-progress-size-m: 52px;
+$circular-progress-stroke-m: 4;
+
+// large
+$circular-progress-size-l: 68px;
+$circular-progress-stroke-l: 4;
+
+// extra large
+$circular-progress-size-xl: 102px;
+$circular-progress-stroke-xl: 6;
+
+.progress-bar-container {
+    display: inline-block;
+    position: relative;
+
+    .progress-text {
+        -moz-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+        position: absolute;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+        font-size: 1.8rem;
+        font-family: arial;
+        color: #666;
+        z-index: 1;
+        line-height: 1;
+    }
+
+    .progress-text em {
+        font-size: 1rem;
+        font-style: normal;
+    }
+}
+
+.progress-svg {
+    width: 20px;
+    height: 20px;
+    transform: rotate(-90deg);
+    display: block;
+
+    circle {
+        stroke: rgba(123, 123, 123, 0.4);
+        stroke-width: 2;
+        fill: transparent;
+    }
+
+    .progressbar {
+        stroke: colors.$green;
+        fill: transparent;
+    }
+
+    .error & {
+        .progressbar {
+            stroke: transparent !important;
+        }
+    }
+}
+
+.progress-done {
+    display: flex;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    color: colors.$green;
+    border-radius: dimensions.$border-radius__base--full;
+    box-shadow: inset 0 0 0 0 currentColor;
+    transition: box-shadow 0.3s ease-in-out;
+    z-index: 2;
+
+    i {
+        color: colors.$white;
+        text-align: center;
+        margin: auto;
+        align-content: center;
+        transform: scale(0); 
+        opacity: 0;
+        transition: all .14s ease-in;
+        transition-delay: .2s;
+    }
+
+    &.progress-done--completed {
+        box-shadow: inset 0 0 0 50px currentColor;
+
+        i {
+            transform: scale(1);
+            opacity: 1; 
+        }
+    }
+
+    &.progress-done--error {
+        color: colors.$red;
+        box-shadow: inset 0 0 0 50px currentColor;
+
+        i {
+            transform: scale(1);
+            opacity: 1; 
+        }
+    }
+}
+
+.sd-circular-progress--xs {
+    .progress-svg {
+        width: $circular-progress-size-xs;
+        height: $circular-progress-size-xs;
+
+        circle {
+            stroke-width: $circular-progress-stroke-xs;
+        }
+    }
+
+    .progress-text {
+        display: none;
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-xs - 1px;
+
+        i {
+            transition-duration: .12s;
+        }
+
+        &.progress-done--completed, &.progress-done--error {
+            box-shadow: inset 0 0 0 10px currentColor;
+
+            i {
+              transform: scale(0.8);  
+            }
+        }
+    }
+}
+
+.sd-circular-progress--s {
+    .progress-svg {
+        width: $circular-progress-size-s;
+        height: $circular-progress-size-s;
+
+        circle {
+            stroke-width: $circular-progress-stroke-s;
+        }
+    }
+
+    .progress-text {
+        display: none;
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-s - 1px;
+
+        i {
+            transition-duration: .12s;
+        }
+
+        &.progress-done--completed, &.progress-done--error {
+            box-shadow: inset 0 0 0 16px currentColor;
+        }
+    }
+}
+
+.sd-circular-progress--m {
+    .progress-svg {
+        width: $circular-progress-size-m;
+        height: $circular-progress-size-m;
+
+        circle {
+            stroke-width: $circular-progress-stroke-m;
+        }
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-m - 1px;
+
+        &.progress-done--completed, &.progress-done--error {
+            box-shadow: inset 0 0 0 26px currentColor;
+
+            i {
+                transform: scale(1.4);
+            }
+        }
+    }
+}
+
+.sd-circular-progress--l {
+    .progress-svg {
+        width: $circular-progress-size-l;
+        height: $circular-progress-size-l;
+
+        circle {
+            stroke-width: $circular-progress-stroke-l;
+        }
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-l - 1px;
+
+        &.progress-done--completed, &.progress-done--error {
+            i {
+                transform: scale(2);
+            }
+            
+        }
+    }
+}
+
+.sd-circular-progress--xl {
+    .progress-svg {
+        width: $circular-progress-size-xl;
+        height: $circular-progress-size-xl;
+
+        circle {
+            stroke-width: $circular-progress-stroke-xl;
+        }
+    }
+
+    .progress-done {
+        margin: $circular-progress-stroke-xl - 1px;
+        
+        &.progress-done--completed, &.progress-done--error  {
+            i {
+                transform: scale(2.4);
+            }
+        }
+    }
+}

package/app/styles/components/_sd-collapse-box.scss

@@ -0,0 +1,292 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+.sd-collapse-box {
+    display: flex;
+    flex-direction: column;
+    border-radius: dimensions.$border-radius__base--small;
+    position: relative;
+    margin-block-end: 1rem;
+    border: 1px solid var(--sd-colour--shadow-line--m);
+
+    .sd-collapse-box__header {
+        display: block;
+        flex-grow: 0;
+        position: relative;
+        min-height: 3.8rem;
+        animation: fadeIn 0.3s ease-in 0s 1;    
+    }
+
+    .sd-collapse-box__tools {
+        position: absolute;
+        inset-inline-end: 1rem;
+        inset-block-start: 0.8rem;
+        z-index: 2;
+        color: var(--color-icon-default);
+
+        .sd-collapse-box__collapse-btn {
+            flex-grow: 1;
+            color: var(--color-icon-default);
+
+            &:hover {
+                .icn-btn {
+                    background-color: hsla(214, 13%, 60%, 0.25);
+                    color: colors.$white;
+                    opacity: 1;
+                }
+            }
+
+            &:active {
+                .icn-btn {
+                    background-color: hsla(214, 13%, 70%, 0.25);
+                    color: colors.$sd-colour-interactive;
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .sd-collapse-box__tools--flex {
+        position: relative;
+        inset-inline-end: 0;
+        inset-block-start: 0;
+        display: flex;
+        flex-direction: row;
+        margin: -1.4rem -1rem;
+    }
+
+    .sd-collapse-box__content-wraper {
+        flex-grow: 1;
+        position: relative;
+        transition: all ease-in-out .4s;
+        max-height: 0;
+    }
+
+    .sd-collapse-box__content {
+        padding: 2rem;
+        display: none;
+        animation: fadeIn 0.3s ease-in 0s 1;
+    }
+
+    .sd-collapse-box__content--border-locked {
+        border-inline-start: 4px solid colors.$red;
+    }
+
+    .sd-collapse-box__content--border-success {
+        border-inline-start: 4px solid colors.$green;
+    }
+
+    .sd-collapse-box__content-block { // place inside .sd-collapse-box__content
+        padding: 1rem;
+        margin: 0 -2rem 3rem -2rem;
+    }
+
+    .sd-collapse-box__content-block--top {
+        margin-block-start: 2.2rem;
+    }
+}
+
+.sd-collapse-box--open {
+    .sd-collapse-box__content-wraper {
+        max-height: 80rem;
+    }
+
+    .sd-collapse-box__content {
+        display: block;
+        animation: fadeIn 0.3s ease-in 0s 1;
+    }
+
+    .sd-collapse-box__header {
+        display: none;
+        animation: fadeIn 0.3s ease-in 0s 1;    
+    }
+}
+
+.sd-collapse-box--margin-small {
+    margin-block-end: 0.5rem;
+}
+
+.sd-collapse-box__content, .sd-collapse-box__content-block {
+    .form__row:last-of-type {
+        padding-block-end: 0;
+    }
+}
+
+.sd-collapse-box__sliding-toolbar-wrapper {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    height: 4.6rem;
+    overflow: hidden;
+    border-radius: dimensions.$border-radius__base--x-small dimensions.$border-radius__base--x-small 0 0;
+}
+
+.sd-collapse-box__sliding-toolbar {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    inset-block-start: 0;
+    height: 4.2rem;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: 3;
+    padding: 0 16px;
+    color: var(--color-text);
+    animation: dropOut2 0.3s cubic-bezier(0.695, 0.105, 0.285, 1.275) 1;
+    background-color: var(--sd-colour-bg__sliding-toolbar);
+    box-shadow: var(--sd-shadow__sliding-toolbar);
+    
+    .sliding-toolbar__inner {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+    }
+}
+
+// NEW COLLAPSE BOX
+.new-collapse-box {
+    --collapse-box-clor-bg: var(--sd-colour-panel-bg--100);
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 0fr auto;
+    border-radius: var(--b-radius--small);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    outline: 1px solid var(--sd-colour-line--x-light);
+
+    .toggle-box__content--animation {
+        animation: fadeIn 0.3s ease-in 0s 1;
+    }
+}
+.new-collapse-box__header {
+    grid-row: 1 / 2;
+    height: auto;
+    padding: 0;
+    overflow: hidden;
+    transition: all 0.2s ease;
+    .hide-on-open {
+        display: none;
+    }
+}
+.new-collapse-box__content {
+    grid-row: 2 / 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    overflow: hidden;
+    padding-block: 0;
+    background-color: var(--sd-colour-panel-bg--100);
+    transition: grid-template-rows 0.2s ease;
+}
+.new-collapse-box {
+    &.new-collapse-box--open {
+        grid-template-rows: auto 1fr auto;
+        .new-collapse-box__content {
+            > .new-collapse-box__content-inner {
+                overflow-y: auto;
+                .new-collapse-box { // Nested -- collapse-box inside a parent collapse-box
+                    &.new-collapse-box--open {
+                        .new-collapse-box__content {
+                            .new-collapse-box__content-inner {
+                                animation: fadeIn2 0.3s ease-in 0s 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &:focus-within {
+            outline-color: var(--sd-colour-interactive);
+        }
+    }
+    .sd-list-item {
+        border-radius: var(--b-radius--small) var(--b-radius--small) 0 0;
+
+        + .sd-list-item {
+            border-block-start: none;
+        }
+
+        .sd-list-item__border {
+            border-radius: var(--b-radius--small) 0 0 0;
+        }
+    }
+}
+.new-collapse-box__divider {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-width: 100%;
+    background: linear-gradient(to bottom, transparent 50%, var(--collapse-box-clor-bg) 50%);
+    padding-inline: 0;
+    margin-inline: 0;
+    margin-block-start: -9px;
+    margin-block-end: 8px;
+    border-block-start: 0;
+    border-block-end: 0;
+    border-inline-start: 0;
+    border-inline-end: 0;
+    border-block-start-color: var(--sd-colour-line--light);
+    border-style: solid;
+    &::before,
+    &::after {
+        content: "";
+        position: relative;
+        inset-block-start: 50%;
+        width: 50%;
+        border-block-start: 1px solid transparent;
+        border-top-color: transparent;
+        border-top-color: inherit;
+        border-block-end: 0;
+        border-inline-start: 0;
+        border-inline-end: 0;
+        transform: translateY(50%);
+        border-style: inherit;
+    }
+    .new-collapse-box__divider-label {
+        background-color: var(--collapse-box-button-color-bg-default);
+        color: var(--collapse-box-button-color-fg-default);
+        transition: all 0.2s ease;
+    }
+    &:hover {
+        border-block-start-color: var(--sd-colour-line--medium);
+        .new-collapse-box__divider-label {
+            background-color: var(--collapse-box-button-color-bg-hover);
+            color: var(--collapse-box-button-color-fg-hover);
+            transition: all 0.2s ease;
+        }           
+    }
+}
+
+.new-collapse-box {
+    > .new-collapse-box__header  {
+        .new-collapse-box__header-inner {
+           transition: all .2s ease;
+           min-height: auto;
+           .hide-on-open {
+                animation: appear .2s;
+                display: flex;
+                opacity: 1;
+           }
+       }
+   }
+    &.new-collapse-box--open {
+        > .new-collapse-box__header  {
+             .new-collapse-box__header-inner {
+                min-height: var(--space--4);
+                background-color: var(--sd-item__main-Bg);
+                .hide-on-open {
+                    display: none;
+                    opacity: 0;
+                    animation: vanish .2s;
+                }
+            }
+        }
+    }
+}
+

package/app/styles/components/_sd-comment-box.scss

@@ -0,0 +1,42 @@
+@use "../variables/dimensions";
+
+.comment-box__reply-item {
+    border-block-end: 1px solid var(--sd-colour-line--light);
+}
+
+.comment-box__input {
+    padding: 0.4rem;
+    border-radius: dimensions.$border-radius__base--small;
+    border: 1px solid var(--sd-colour-line--light);
+    height: 2.8rem;
+    resize: none;
+}
+
+.comment-box__reply-toolbar {
+    display: none;
+    padding-block-start: 1rem;
+}
+
+.comment-box__reply-toolbar--active {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--gap--small);
+}
+
+.comment-box__button-toolbar {
+    margin-block-start: 1.2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--gap--small);
+}
+
+.comment-box__button-toolbar--right {
+    justify-content: flex-end;
+}
+
+.comment-box__button-toolbar--small {
+    margin-block-start: 0.6rem;
+}