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

package/app/styles/_avatar.scss

@@ -0,0 +1,526 @@
+@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

@@ -0,0 +1,106 @@
+@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;
+}