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

package/app/styles/components/_list-item.scss

@@ -0,0 +1,694 @@
+@use "sass:color";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// LIST ITEMS : components/list-items.scss
+
+//background color
+$sd-ListItem-background: var(--sd-item__main-Bg);
+$sd-ListItem-background-hover: var(--sd-item__main-Bg--hover);
+$sd-ListItem-background-selected: var(--sd-item__main-Bg--selected);
+$sd-ListItem-background-activated: var(--sd-item__main-Bg--activated);
+//column border color
+$sd-ListItem-column-border: var(--sd-colour-line--x-light);
+
+.sd-list-item {
+    display: flex;
+    position: relative;
+    min-height: dimensions.$sd-base-increment * 5;
+    flex-direction: row;
+    background-color: $sd-ListItem-background;
+    transition: background-color 0.2s linear;
+    flex-shrink: 0;
+    color: var(--color-text);
+
+    &:hover {
+        background-color: $sd-ListItem-background-hover;
+        cursor: pointer;
+    }
+
+    &.actioning {
+        &:hover {
+            //pointer-events: none;
+            //cursor: default !important;
+            cursor: progress;
+
+            .sd-list-item__action-menu {
+                padding: 0;
+                width: 0;
+                overflow: hidden;
+                opacity: 0;
+            }
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            inset-block-end: 0;
+            inset-inline-start: 0;
+            z-index: 3;
+            background-image: url(../img/three-dots.svg);
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 45px;
+            background-color: var(--sd-colour-overlay-actioning);
+            border-radius: var(--b-radius--small);
+        }
+    }
+
+    &.locked {
+        .sd-list-item__border {
+            background: colors.$red;
+        }
+    }
+
+    &.archived {
+        &:after {
+            content: "";
+            position: absolute;
+            inset-block-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: 20%;
+            width: 10rem;
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMTE2IiB2aWV3Qm94PSIwIDAgMTE2IDExNiI+PHBhdGggZmlsbD0iIzdCN0I3QiIgZD0iTTU4IDBDMjYgMCAwIDI2IDAgNThzMjYgNTggNTggNTggNTgtMjYgNTgtNThTOTAgMCA1OCAwem0zNy4xIDM4LjhMNDYuMyA4Ny42Yy0uNS41LTEuMi41LTEuNyAwTDE4LjkgNjEuOGMtLjUtLjUtLjUtMS4yIDAtMS43bDguMi04LjJjLjUtLjUgMS4yLS41IDEuNyAwTDQ1IDY4LjFjLjMuMy44LjMgMS4xIDBsMzkuMi0zOS4yYy41LS41IDEuMi0uNSAxLjcgMGw4LjIgOC4yYy40LjUuNCAxLjItLjEgMS43eiIvPjwvc3ZnPg==);
+            background-repeat:  no-repeat;
+            background-size: 6rem;
+            background-position: center center;
+            opacity: 0.16;
+        }
+    }
+
+    .avatar {
+        flex-shrink: 0;
+    }
+}
+
+.sd-list-item--active, .sd-list-item.active {
+    background-color: $sd-ListItem-background-activated;
+}
+
+.sd-list-item--selected, .sd-list-item--selected:hover, .sd-list-item.selected, .sd-list-item.selected:hover  {
+    background-color: $sd-ListItem-background-selected;
+    outline: 1px solid var(--sd-colour-interactive--alpha-50);
+}
+
+.sd-list-item--activated, .sd-list-item--activated:hover {
+    background-color: $sd-ListItem-background-activated;
+}
+
+.sd-list-item--no-bg {
+    background-color: transparent;
+}
+
+.sd-list-item--no-hover {
+    &:hover {
+        background-color: transparent;
+        cursor: default;
+    }
+}
+
+.sd-list-item--inactive {
+    background-color: transparent;
+    color: rgba(123, 123, 123, 0.75);
+}
+
+.sd-list-item--draggable {
+    &:hover {
+        cursor: move; /* fallback if grab is unsupported */
+        cursor: grab;
+        cursor: -moz-grab;
+        cursor: -webkit-grab;
+    }
+
+    &:active {
+        cursor: grabbing;
+        cursor: -moz-grabbing;
+        cursor: -webkit-grabbing;
+    }
+}
+
+.sd-list-item__border {
+    width: 0.4rem;
+    flex-grow: 0;
+    flex-shrink: 0;
+    background: transparent;
+}
+
+.sd-list-item__border--locked, .sd-list-item__border--error {
+    background: colors.$red;
+}
+
+.sd-list-item__border--success, .sd-list-item__border--active {
+    background: colors.$green;
+}
+
+.sd-list-item__border--idle {
+    background: colors.$orange;
+}
+
+.sd-list-item__border--dark-blue {
+    background: #4d646f;
+}
+
+.sd-list-item__dot {
+    content: '';
+    position: absolute;
+    inset-block-start: 6px;
+    inset-inline-start: 6px;
+    width: 6px;
+    height: 6px;
+    border-radius: dimensions.$border-radius__base--full;
+    background-color: transparent;
+}
+
+.sd-list-item__dot--locked, .sd-list-item__dot--error {
+    background: colors.$red;
+}
+
+.sd-list-item__dot--success, .sd-list-item__dot--active {
+    background: colors.$green;
+}
+
+.sd-list-item__dot--idle {
+    background: colors.$orange;
+}
+
+.sd-list-item__dot--dark-blue {
+    background: #4d646f;
+}
+
+.sd-list-item__column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-inline-end: 1px solid $sd-ListItem-column-border;
+    padding: 0 dimensions.$sd-base-increment * 1.5;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    &:last-child, &:last-of-type, &:only-child {
+        border:none;
+    }
+}
+
+.sd-list-item__column--no-border {
+    border:none;
+}
+
+.sd-list-item__column--large-padding {
+    padding: 0.8rem 1.6rem;
+}
+
+.sd-list-item__column--no-right-padding {
+    padding-inline-end: 0;
+}
+
+.sd-list-item__column--grow {
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.sd-list-item__column--shrink {
+    flex-shrink: 1;
+}
+
+.sd-list-item__column--has-check {
+    position: relative;
+
+    .sd-list-item__item-type {
+        opacity: 1;
+        margin-block-start: -0.2rem;
+        transition: opacity 0.1s linear;
+    }
+
+    .sd-list-item__checkbox-container {
+        position: absolute;
+        padding: 0 0.8rem;
+        inset-block-start: 0;
+        inset-block-end:0;
+        inset-inline-start:0;
+        inset-inline-end:0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        z-index: 2;
+        opacity: 0;
+        transition: opacity 0.2s linear;
+
+        .sd-check__wrapper {
+            height: 1.6rem;
+            width: 1.6rem;
+
+            .sd-checkbox {
+                display: block;
+            }
+        }
+    }
+
+    &:hover {
+        .sd-list-item__item-type {
+            opacity: 0;
+        }
+
+        .sd-list-item__checkbox-container {
+            opacity: 1;
+        }
+    }
+
+    &.sd-list-item__column--checked, &.sd-list-item__column--checked:hover {
+        .sd-list-item__item-type {
+            opacity: 0;
+        }
+
+        .sd-list-item__checkbox-container {
+            opacity: 1;
+        }
+    }
+}
+
+.sd-list-item__row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--gap--small);
+
+    &:first-child {
+        margin: 0.8rem 0 0.2rem;
+    }
+
+    &:last-child {
+        margin: 0.2rem 0 0.8rem;
+    }
+
+    &:only-child {
+        margin: 0.2rem 0;
+    }
+    &.sd-list-item__row--overflow-visible {
+        overflow: visible !important;
+    }
+
+}
+
+.sd-list-item__row--only-child {
+    margin: 0.2rem 0 !important;
+}
+
+.sd-list-item__row--wrap {
+    flex-wrap: wrap;
+}
+
+.sd-list-item__action-menu {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    justify-content: center;
+    padding: 0 0.6rem;
+    width: 0;
+    padding: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all ease-in 0.1s;
+    align-items: center;
+
+    > .dropdown__toggle {
+        line-height: 0;
+    }
+}
+
+.sd-list-item__action-menu--direction-row {
+    flex-direction: row;
+}
+
+.sd-list-item__thumbnail, figure.sd-list-item__thumbnail {
+    width: 6.4rem;
+    height: 4.2rem;
+    margin: auto 0.8rem;
+    flex-shrink: 0;
+    flex-grow: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(128,128,128,0.2);
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        height: auto;
+        margin: auto;
+        display: block;
+    }
+}
+
+.sd-list-item__serial-number {
+    font-size: 2rem;
+    font-weight: 300;
+    color: colors.$grayLight;
+}
+
+.sd-list-item:hover, .sd-list-item--activated {
+    .sd-list-item__action-menu {
+        padding: 0 0.6rem;
+        width: auto;
+        overflow: visible;
+        opacity: 1;
+    }
+}
+
+.sd-list-item--element-grow {
+    flex-grow: 1;
+}
+
+.sd-list-item {
+    time {
+        [class^="icon-"],
+        [class*=" icon-"] {
+            vertical-align: top;
+            margin-inline-end: 0.2rem;
+        }
+    }
+}
+
+// Text specific styles
+.sd-list-item {
+    time {
+        color: var(--color-text-muted);
+        font-size: 1.2rem;
+        letter-spacing: 0.025em;
+        flex-shrink: 0;
+    }
+
+    .sd-list-item__slugline {
+        color: colors.$sd-slugline;
+        font-weight: 500;
+        font-size: 1.2rem;
+        text-transform: uppercase;
+        flex-shrink: 0;
+    }
+
+    .sd-list-item__headline {
+        color: colors.$sd-text;
+        font-weight: 500;
+        font-size: 1.3rem;
+    }
+
+    .sd-list-item__normal {
+        color: colors.$sd-text;
+        font-weight: 300;
+    }
+
+    .sd-list-item__strong {
+        color: colors.$sd-text;
+        font-weight: 500;
+    }
+
+    .sd-list-item__text-label {
+        color: var(--color-text-muted);
+        font-weight: 400;
+        font-style: italic;
+    }
+
+    .sd-list-item__text-label--normal {
+        font-style: normal;
+    }
+
+    .sd-list-item__compound-text {
+        display: flex;
+        flex-direction: row;
+        gap: var(--gap--x-small);
+    }
+
+    .sd-list-item__inline-icon,
+    .sd-list-item__inline-text {
+        margin-inline-end: 0.6rem;
+    }
+
+    .sd-list-item__icon-group {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap--small);
+        min-height: 2rem;
+        margin-inline-end: 4px;
+
+        .sd-list-item__inline-icon {
+            margin: 0;
+        }
+    }
+
+    .sd-list-item__text-strong {
+        font-weight: 500;
+        color: colors.$sd-text;
+    }
+
+    .sd-list-item__element-rm-10 {
+        margin-inline-end: 1rem;
+    }
+
+    .sd-list-item__element-lm-10 {
+        margin-inline-start: 1rem;
+    }
+
+    .sd-list-item__location {
+        padding-inline-start: 1.6rem;
+        position: relative;
+
+        &::before {
+            position: absolute;
+            inset-inline-start: 0;
+            inset-block-start:0.1rem;
+            font-family: 'sd_icons';
+            content: "\e602";
+            display: inline-block;
+            width: 1.4rem;
+            height: 1.4rem;
+            line-height: 1.4rem;
+            font-size: 1.4rem;
+            font-style: normal;
+            font-weight: normal;
+            font-variant: normal;
+            text-transform: none;
+            color: color.scale(colors.$grayLight, $alpha: -20%);
+        }
+    }
+}
+
+
+.avatar {
+    display: inline-block;
+    height: 3rem;
+    width: 3rem;
+    background-color: colors.$avatarBG;
+    border-radius: dimensions.$border-radius__base--full;
+    margin-inline-end: 0.6rem;
+    color: colors.$white;
+    text-align: center;
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    line-height: 3.2rem;
+    letter-spacing: -0.03em;
+    vertical-align: middle;
+}
+
+.avatar--small {
+    height: 2.4rem;
+    width: 2.4rem;
+    font-size: 1rem;
+    line-height: 2.5rem;
+}
+
+.avatar--large {
+    height: 4.8rem;
+    width: 4.8rem;
+    font-size: 1.8rem;
+    line-height: 5rem;
+}
+
+.avatar--no-margin {
+    margin: 0;
+}
+
+.avatar--empty {
+    background-color: rgba(123, 123, 123, 0.05);
+    color: transparent;
+    border: 1px dashed rgba(123, 123, 123, 0.6);
+}
+
+.avatar--on-right {
+    margin-inline-end: 0;
+    margin-inline-start: 0.6rem;
+}
+
+.dropdown__toggle {
+    &:hover {
+        [class^="icon-"],
+        [class*=" icon-"] {
+            opacity: 1;
+        }
+    }
+
+    &:active {
+        [class^="icon-"],
+        [class*=" icon-"] {
+            opacity: 1;
+            color: colors.$sd-colour-interactive;
+        }
+    }
+}
+
+.sd-list-item--activated {
+.dropdown__toggle {
+        [class^="icon-"],
+        [class*=" icon-"] {
+            opacity: 1;
+            color: colors.$sd-colour-interactive;
+        }
+    }
+}
+
+
+// NESTED list items
+.sd-list-item-nested {
+    --parent-item-height: 58px;
+    display: grid;
+    grid-template-rows: var(--parent-item-height) 0fr;
+    transition: grid-template-rows 0.3s ease-out;
+    & > .sd-list-item {
+        max-height: var(--parent-item-height);
+        height: var(--parent-item-height);
+    }
+    .sd-list-item {
+        overflow: hidden;
+    }
+}
+
+.sd-list-item-nested__childs {
+    position: relative;
+    z-index: 0;
+    overflow: hidden !important;
+    display: grid;
+    grid-template-rows: 1fr;
+    margin-inline-start: 1rem;
+    transition: all 0.3s ease-out;
+
+    .sd-list-item {
+        margin-block-start: 0;
+        border-block-start: 1px solid var(--sd-colour-line--x-light);
+        overflow: hidden;
+    }
+    .sd-list-item-nested__childs-inner {
+        overflow: hidden;
+        opacity: 0;
+        transition: opacity 0.2s ease-out;
+    }
+}
+
+.sd-list-item-nested__parent {
+    position: relative;
+    z-index: 1;
+}
+
+.sd-list-item-nested--collapsed {
+    .sd-list-item-nested__childs {
+        opacity: 0;
+    }
+}
+
+.sd-list-item-nested--expanded {
+    grid-template-rows: var(--parent-item-height) 1fr;
+    .sd-list-item-nested__childs {
+        grid-template-rows: 1fr;
+        opacity: 1;
+        .sd-list-item-nested__childs-inner {
+            opacity: 1;
+        }
+    }
+}
+
+// sd list item GROUP
+.sd-list-item-group {
+    display: flex;
+    flex-direction: column;
+
+    .sd-list-item {
+        + .sd-list-item {
+            border-block-start: 1px solid var(--sd-colour-line--x-light);
+        }
+    }
+
+    .sd-list-item-nested {
+        + .sd-list-item {
+            border-block-start: 1px solid var(--sd-colour-line--x-light);
+        }
+    }
+}
+
+.sd-list-item-group--space-between-items {
+    gap: var(--gap--small);
+
+    .sd-list-item {
+        border-radius: var(--b-radius--small);
+
+        + .sd-list-item {
+            border-block-start: none;
+        }
+
+        .sd-list-item__border {
+            border-radius: var(--b-radius--small) 0 0 var(--b-radius--small);
+        }
+    }
+
+    .sd-list-item-nested {
+        + .sd-list-item {
+            border-block-start: none;
+        }
+    }
+}
+
+.sd-list-item-group--margin {
+    margin: 2rem;
+}
+
+.sd-list-header {
+    display: flex;
+    height: 2.4rem;
+    margin-block-end: dimensions.$sd-base-increment;
+    align-items: center;
+
+    .sd-list-header__name {
+        font-size: 1.1rem;
+        letter-spacing: .08em;
+        font-weight: 500;
+        text-transform: uppercase;
+        color: var(--color-text-muted);
+
+        a {
+            color: colors.$sd-colour-interactive;
+            text-decoration: none;
+            display: inline-block;
+            line-height: 1;
+
+            &:hover {
+                color: var(--sd-colour-interactive--darken-20);
+                border-block-end: 1px dotted currentColor;
+            }
+        }
+    }
+
+    .sd-list-header__number {
+        margin-inline-start: 1rem;
+    }
+
+    .sd-list-header__stretch-bar {
+        flex-grow: 1;
+        height: 1px;
+        background: transparent;
+        margin: auto 0;
+    }
+}
+
+.sd-list-header--m-top {
+    margin-block-start: 2.4rem;
+}
+

package/app/styles/components/_load-more-indicator.scss

@@ -0,0 +1,15 @@
+.load-more-indicator {
+    display: contents;
+    .sd-loader {
+        z-index: 10;
+    }
+    .load-more-indicator__text {
+        z-index: 11;
+    }
+}
+.load-more-indicator__text {
+    font-size: var(--text-size-small);
+    color: var(--color-text-subdued);
+    position: relative;
+    padding-left: 0.5rem;
+}