superdesk-ui-framework 6.1.0-dev1 → 7.0.0-dev-hg0

package/app/styles/_avatar.scss

@@ -1,526 +0,0 @@
-@use "variables/colors";
-@use "variables/dimensions";
-
-.sd-avatar {
-    display: block;
-    position: relative; // required for absolutely positioned indicators
-
-    &.sd-avatar--indicator-status--offline {
-        .sd-avatar-content {
-            outline: 2px solid var(--sd-colour-avatar-outline--offline);
-            outline-offset: 2px;
-        }
-
-        &.sd-avatar--x-small,
-        &.sd-avatar--small {
-            .sd-avatar-content {
-                outline: 1px solid var(--sd-colour-avatar-outline--offline);
-            }
-        }
-    }
-
-    &.sd-avatar--indicator-status--online {
-        .sd-avatar-content {
-            outline: 2px solid var(--sd-colour-avatar-outline--online);
-            outline-offset: 2px;
-        }
-
-        &.sd-avatar--x-small,
-        &.sd-avatar--small {
-            .sd-avatar-content {
-                outline: 1px solid var(--sd-colour-avatar-outline--online);
-            }
-        }
-    }
-
-    .sd-avatar-content {
-        display: flex;
-        width: 100%;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        border-radius: dimensions.$border-radius__base--full;
-        color: colors.$white;
-        text-transform: uppercase;
-        letter-spacing: -0.03em;
-        overflow: hidden;
-
-        > img {
-            width: 100%;
-        }
-
-        &.sd-avatar-content--add-item {
-            background-color: var(--sd-colour-avatar-bg--light);
-            border: 1px dashed var(--sd-colour-avatar-border--light);
-            background-image: linear-gradient(var(--sd-colour-avatar-add) 0 0), linear-gradient(var(--sd-colour-avatar-add) 0 0);
-            background-position:center;
-            background-size: 50% 2px,2px 50%; /*thickness = 2px, length = 50% (25px)*/
-            background-repeat:no-repeat;
-            outline: 1px solid transparent;
-            outline-offset: 0px;
-            transition: all 0.2s ease;
-        }
-
-        &.sd-avatar-content--add-item--clickable {
-            &:hover {
-                background-image: linear-gradient(var(--sd-colour-avatar-add--hover) 0 0), linear-gradient(var(--sd-colour-avatar-add--hover) 0 0);
-                cursor: pointer;
-                outline: 1px solid var(--sd-colour-interactive);
-                outline-offset: 2px;
-            }
-            &:active {
-                background-image: linear-gradient(var(--sd-colour-avatar-add) 0 0), linear-gradient(var(--sd-colour-avatar-add) 0 0);
-                cursor: pointer;
-                outline: 2px solid var(--sd-colour-interactive);
-            }
-        }
-
-        &.sd-avatar-content--number {
-            background-color: var(--sd-colour-avatar-bg--light);
-            color: var(--color-text-muted);
-            outline: 1px solid transparent;
-            outline-offset: 0px;
-            transition: all 0.2s ease;
-            &:hover {
-                cursor: pointer;
-                outline: 1px solid var(--sd-colour-interactive);
-                outline-offset: 2px;
-            }
-            &:active {
-                cursor: pointer;
-                outline: 2px solid var(--sd-colour-interactive);
-            }
-        }
-    }
-
-    .sd-avatar-content--text {
-        background-color: var(--sd-colour-avatar-bg);
-        cursor: default;
-        span {
-            pointer-events: none;
-        }
-    }
-
-    .sd-avatar-content--dummy-img {
-        background-color: var(--sd-colour-avatar-bg--empty);
-        background-image: url('~../../images/avatar_dummy.svg');
-        background-repeat: no-repeat;
-        background-size: cover;
-        pointer-events: none;
-    }
-
-    &.sd-avatar--empty-light {
-        .sd-avatar-content--dummy-img {
-            background-color: var(--sd-colour-avatar-bg--light);
-            border: 1px dashed var(--sd-colour-avatar-border--light);
-            svg {
-                opacity: 0.25;
-            }
-        }
-    }
-
-    .sd-avatar__icon {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1;
-        inset-block-end: -4px;
-        inset-inline-end: -4px;
-        opacity: 1;
-        color: var(--color-text-subdued);
-        pointer-events: none;
-        [class^="icon-"], [class*=" icon-"] {
-            color: inherit;
-            text-shadow: -1px 1px 0 var(--sd-item__main-Bg), 1px 1px 0 var(--sd-item__main-Bg), 1px -1px 0 var(--sd-item__main-Bg), -1px -1px 0 var(--sd-item__main-Bg);
-        }
-
-    }
-    .sd-avatar__coverage-state {
-        --dot-size: 6px;
-        display: flex;
-        height: var(--dot-size);
-        width: var(--dot-size);
-        position: absolute;
-        background-color: var(--sd-colour-coverage-state--default);
-        z-index: 2;
-        border-radius: var(--b-radius--full);
-        inset-block-end: -3px;
-        inset-inline-end: 3px;
-        box-shadow: 0 0 0 1px var(--sd-item__main-Bg);
-        pointer-events: none;
-    }
-
-    &.sd-avatar--x-small {
-        .sd-avatar__icon {
-            inset-block-end: -4px;
-            inset-inline-end: -10px;
-        }
-    }
-
-    &.sd-avatar--small {
-        .sd-avatar__icon {
-            inset-block-end: -4px;
-            inset-inline-end: -8px;
-        }
-    }
-
-    &.sd-avatar--medium {
-        .sd-avatar__icon {
-            inset-block-end: -3px;
-            inset-inline-end: -6px;
-        }
-    }
-
-    &.sd-avatar--large {
-        .sd-avatar__icon {
-            inset-block-end: -1px;
-            inset-inline-end: -4px;
-        }
-    }
-
-    &.sd-avatar--x-large {
-        .sd-avatar__icon {
-            inset-block-end: -2px;
-            inset-inline-end: -4px;
-            [class^="icon-"], [class*=" icon-"] {
-                --icon-base-size: 32px;
-                text-shadow: -2px 2px 0 var(--sd-item__main-Bg), 2px 2px 0 var(--sd-item__main-Bg), 2px -2px 0 var(--sd-item__main-Bg), -2px -2px 0 var(--sd-item__main-Bg);
-            }
-        }
-    }
-
-    &.sd-avatar--xx-large {
-        .sd-avatar__icon {
-            inset-block-end: -1px;
-            inset-inline-end: -2px;
-            [class^="icon-"], [class*=" icon-"] {
-                --icon-base-size: 32px;
-                text-shadow: -2px 2px 0 var(--sd-item__main-Bg), 2px 2px 0 var(--sd-item__main-Bg), 2px -2px 0 var(--sd-item__main-Bg), -2px -2px 0 var(--sd-item__main-Bg);
-            }
-        }
-    }
-}
-
-.sd-avatar--indicator-admin {
-    border-radius: dimensions.$border-radius__base--full;
-    position: absolute;
-    inset-block-start: -4px;
-    inset-inline-start: -4px;
-    inset-inline-end: auto;
-    z-index: 1;
-    color: #FF5722 !important;
-
-    &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        inset-block-start: 4px;
-        inset-inline-start: 4px;
-        background: var(--sd-colour-background__base--00);
-        width: 8px;
-        height: 8px;
-        z-index: -1;
-        border-radius: dimensions.$border-radius__base--full;
-    }
-}
-
-.sd-avatar--x-small {
-    height: 20px;
-    width: 20px;
-    font-size: 1rem;
-
-    .sd-avatar--indicator-admin {
-        inset-block-start: -4px;
-        inset-inline-start: -6px;
-    }
-}
-
-.sd-avatar--small {
-    height: 24px;
-    width: 24px;
-    font-size: 1rem;
-
-    .sd-avatar--indicator-admin {
-        inset-block-start: -4px;
-        inset-inline-start: -6px;
-    }
-}
-
-.sd-avatar--medium {
-    height: 30px;
-    width: 30px;
-    font-size: 1.4rem;
-}
-
-.sd-avatar--large {
-    height: 48px;
-    width: 48px;
-    font-size: 1.8rem;
-
-    .sd-avatar--indicator-status--offline,
-    .sd-avatar--indicator-status--online {
-        height: 12px;
-        width: 12px;
-        inset-block-end: -1px;
-        inset-inline-end: -4px;
-        inset-inline-start: auto;
-    }
-
-    .sd-avatar--indicator-admin {
-        inset-block-start: -2px;
-        inset-inline-start: -4px;
-        inset-inline-end: auto;
-    }
-}
-
-.sd-avatar--x-large {
-    height: 96px;
-    width: 96px;
-    font-size: 3.2rem;
-
-    .sd-avatar--indicator-status--offline,
-    .sd-avatar--indicator-status--online {
-        height: 16px;
-        width: 16px;
-        inset-block-end: -2px;
-        inset-inline-end: 4px;
-    }
-
-    .sd-avatar--indicator-admin {
-        inset-block-start: 2px;
-        inset-inline-start: 0;
-        width: 24px;
-        height: 24px;
-        font-size: 24px;
-        &:after {
-            height: 14px;
-            width: 14px;
-            inset-block-start: 1px;
-            inset-inline-start: 5px;
-        }
-    }
-}
-
-.sd-avatar--xx-large {
-    height: 120px;
-    width: 120px;
-    font-size: 4rem;
-
-    .sd-avatar--indicator-status--offline,
-    .sd-avatar--indicator-status--online {
-        height: 18px;
-        width: 18px;
-        inset-block-end: -2px;
-        inset-inline-end: 8px;
-    }
-
-    .sd-avatar--indicator-admin {
-        inset-block-start: 4px;
-        inset-inline-start: 4px;
-        inset-inline-end: auto;
-        width: 24px;
-        height: 24px;
-        font-size: 24px;
-        &:after {
-            height: 14px;
-            width: 14px;
-            inset-block-start: 1px;
-            inset-inline-start: 5px;
-        }
-    }
-}
-
-.sd-avatar-group {
-    display: flex;
-
-    &.sd-avatar-group--stacked {
-        flex-wrap: nowrap;
-        gap: 0;
-        margin-inline-end: 8px;
-
-        > .sd-avatar,
-        > .d-contents .sd-avatar {
-            margin: 0 calc(-1 * var(--space--1)) 0 0;
-            .sd-avatar-content {
-                --avatar-shadow: var(--sd-item__main-Bg);
-                box-shadow: 0 0 0 2px var(--avatar-shadow);
-            }
-            &:hover {
-                z-index: 100;
-            }
-        }
-
-        > .sd-avatar--large,
-        > .d-contents .sd-avatar--large {
-            margin: 0 calc(-1 * var(--space--1-5)) 0 0;
-        }
-
-        &.sd-avatar-group--stacked--gap-small {
-            gap: var(--gap-0-5);
-            > .sd-avatar,
-            > .d-contents .sd-avatar {
-                margin: 0;
-            }
-            margin-inline-end: 0;
-        }
-
-        &.sd-avatar-group--stacked--gap-medium {
-            gap: var(--gap-1);
-            > .sd-avatar,
-            > .d-contents .sd-avatar {
-                margin: 0;
-            }
-            margin-inline-end: 0;
-        }
-
-        &.sd-avatar-group--stacked--gap-large {
-            gap: var(--gap-1-5);
-            > .sd-avatar,
-            > .d-contents .sd-avatar {
-                margin: 0;
-            }
-            margin-inline-end: 0;
-        }
-    }
-    &.sd-avatar-group--grid {
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        gap: var(--gap-1-5);
-    }
-}
-
-.avatar-popup {
-    background-color: var(--color-dropdown-menu-Bg);
-    border-radius: var(--b-radius--large);
-    padding-block: var(--space--2);
-    padding-inline-start: var(--space--1-5);
-    padding-inline-end: var(--space--3);
-    box-shadow: var(--sd-shadow__dropdown);
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap-1-5);
-    overflow: auto;
-}
-
-// Inline avatar display mode (like Material Design Chip)
-.sd-avatar--inline {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--gap-1);
-    vertical-align: middle;
-    background-color: var(--color-surface-faded);
-    border-radius: var(--b-radius--full);
-
-
-    .sd-avatar--inline__text {
-        color: var(--color-text);
-        font-size: var(--name-font-size);
-        line-height: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        // max-width: 200px;
-
-    }
-    &:has(.sd-avatar--x-small) {
-        gap: var(--gap-0-5);
-        .sd-avatar--inline__text {
-            --name-font-size: var(--text-size-xx-small);
-            padding-inline-end: 1em;
-        }
-    }
-    &:has(.sd-avatar--small) {
-        gap: var(--gap-0-5);
-        .sd-avatar--inline__text {
-            --name-font-size: var(--text-size-x-small);
-            padding-inline-end: 1em;
-
-        }
-    }
-    &:has(.sd-avatar--medium) {
-        gap: var(--gap-1);
-        .sd-avatar--inline__text {
-            --name-font-size: var(--text-size-small);
-            padding-inline-end: 1em;
-        }
-    }
-    &:has(.sd-avatar--large) {
-        gap: var(--gap-1);
-        .sd-avatar--inline__text {
-            --name-font-size: var(--text-size-small);
-            padding-inline-end: 1.5em;
-        }
-    }
-    &:has(.sd-avatar--x-large) {
-        gap: var(--gap-2);
-        .sd-avatar--inline__text {
-            --name-font-size: var(--text-size-medium);
-            padding-inline-end: 2.25em;
-        }
-    }
-    &:has(.sd-avatar--xx-large) {
-        gap: var(--gap-3);
-        .sd-avatar--inline__text {
-            --name-font-size: var(--text-size-large);
-            padding-inline-end: 2.25em;
-        }
-    }
-
-    // Modifier for text-start positioning (text before avatar)
-    &.sd-avatar--inline--text-start {
-        flex-direction: row-reverse;
-
-        .sd-avatar--inline__text {
-            padding-inline-end: 0;
-            padding-inline-start: 1em;
-        }
-
-        &:has(.sd-avatar--x-small) {
-            .sd-avatar--inline__text {
-                padding-inline-start: 1em;
-            }
-        }
-        &:has(.sd-avatar--small) {
-            .sd-avatar--inline__text {
-                padding-inline-start: 1em;
-            }
-        }
-        &:has(.sd-avatar--medium) {
-            .sd-avatar--inline__text {
-                padding-inline-start: 1em;
-            }
-        }
-        &:has(.sd-avatar--large) {
-            .sd-avatar--inline__text {
-                padding-inline-start: 1.5em;
-            }
-        }
-        &:has(.sd-avatar--x-large) {
-            .sd-avatar--inline__text {
-                padding-inline-start: 2.25em;
-            }
-        }
-        &:has(.sd-avatar--xx-large) {
-            .sd-avatar--inline__text {
-                padding-inline-start: 2.25em;
-            }
-        }
-    }
-    &:not(.sd-avatar--inline--text-start) {
-        &:has(.sd-avatar--x-small) {
-            &:has(.sd-avatar__icon) {
-                .sd-avatar--inline__text {
-                    padding-inline-start: 0.5em;
-                }
-            }
-        }
-        &:has(.sd-avatar--small) {
-            &:has(.sd-avatar__icon) {
-                .sd-avatar--inline__text {
-                    padding-inline-start: 0.25em;
-                }
-            }
-        }
-    }
-}

package/app/styles/_badge.scss

@@ -1,106 +0,0 @@
-@use "variables/colors";
-@use "variables/dimensions";
-
-/// Default colors for badges.
-$badge-background: var(--sd-colour-bg--08) !default;
-$badge-background-translucent: var(--sd-colour-bg-translucent--08);
-$badge-color: var(--color-text-ondark) !default;
-$badge-color-alt: var(--sd-colour-btn-txt-neutral) !default;
-
-/// Coloring classes. A map of classes to output in the CSS.
-$badge-palette: colors.$sd-basic-palette !default;
-
-/// Default padding inside badges.
-$badge-padding: 0.4em 0.5em 0.3em!default;
-
-$badge-minwidth: 1.8em !default;
-
-/// Default font size and line height for badges.
-$badge-font-size: 1rem !default;
-$badge-lineheight: 1.1em !default;
-
-[data-theme="dark-ui"] {
-    .badge--light {
-        background-color: var(--buoyant-grey-200-a40);
-    }
-}
-
-/// Generates the base styles for a badge.
-@mixin badge {
-    display: inline-block;
-    min-width: $badge-minwidth;
-    padding: $badge-padding;
-    border-radius: dimensions.$border-radius__base--full;
-    font-size: $badge-font-size;
-    line-height: $badge-lineheight;
-    text-align: center;
-    text-transform: uppercase;
-    font-weight: 400;
-    --sd-badge-bg: var(--sd-colour-bg--08);
-    background-color: var(--sd-badge-bg);
-    color: var(--color-text-ondark);
-
-    &--square {
-        border-radius: var(--b-radius--small);
-    }
-}
-
-.badge {
-    @include badge;
-
-    &.badge--primary {
-        --sd-badge-bg: var(--sd-colour-primary);
-    }
-
-    &.badge--success {
-        --sd-badge-bg: var(--sd-colour-success);
-    }
-
-    &.badge--warning {
-        --sd-badge-bg: var(--sd-colour-warning);
-    }
-
-    &.badge--alert {
-        --sd-badge-bg: var(--sd-colour-alert);
-    }
-
-    &.badge--highlight {
-        --sd-badge-bg: var(--sd-colour-highlight);
-    }
-
-    &.badge--sd-green {
-        --sd-badge-bg: var(--sd-colour-superdesk);
-    }
-
-    &.badge--secondary {
-        --sd-btn-bg: var(--sd-colour-secondary);
-    }
-
-    // light gray
-    &.badge--light {
-        background-color: var(--sd-colour-bg-translucent--08);
-        color: var(--color-text);
-        font-weight: 500;
-    }
-}
-
-// Element with badge
-.element-with-badge {
-    display: inline-block;
-    position: relative;
-
-    .badge {
-      position: absolute;
-      inset-block-start: -.5rem;
-      inset-inline-end: -.8rem;
-    }
-    
-    + .element-with-badge, + .btn {
-      margin-inline-start: 1.2rem;
-      vertical-align: top;
-    }
-}
-.btn + .element-with-badge {
-    margin-inline-start: 1.2rem;
-    vertical-align: top;
-}