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

package/app/styles/components/_sd-grid-item.scss

@@ -0,0 +1,865 @@
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// Default sd-card  styling
+
+//border-radius
+$sd-grid-item-border-radius: dimensions.$border-radius__base--medium;
+
+//shadows
+$sd-grid-item-shadow: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 1px 5px hsla(0, 0%, 0%, 0.16);
+$sd-grid-item-shadow-hover: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 2px 8px hsla(0, 0%, 0%, 0.26);
+$sd-grid-item-shadow-selected: var(--sd-shadow__item--selected);
+$sd-grid-item-shadow-activated: 0 0 0 2px var(--sd-colour-interactive--alpha-50);
+
+.sd-grid-item {
+    @include mixins.transition(all, 100ms, ease-in);
+    position: relative;
+    border-radius: $sd-grid-item-border-radius;
+    box-shadow: $sd-grid-item-shadow;
+    background-color: var(--sd-item__main-Bg);
+    color: colors.$sd-text;
+    display: flex;
+    flex-direction: column;
+
+    &.actioning {
+        pointer-events: none;
+
+        &::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: 60px;
+            background-color: var(--sd-colour-overlay-actioning);
+            pointer-events: none;
+            border-radius: $sd-grid-item-border-radius;
+        }
+    }
+
+    .sd-grid-item__actions {
+        margin: 0;
+        visibility: hidden;
+    }
+
+    .sd-grid-item__actions--top {
+        position: absolute;
+        inset-block-start: 0.8rem;
+        inset-inline-end: 0.5rem;
+        z-index: 2;
+    }
+
+    .sd-grid-item__footer-actions {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-inline-start: dimensions.$sd-base-increment;
+        justify-content: flex-end;
+        visibility: hidden;
+        max-width: 0;
+        opacity: 0;
+        padding-inline-end: 0;
+        transition: all 0.2s ease;
+    }
+
+    .sd-grid-item__footer-actions--visible {
+        visibility: visible;
+        opacity: 0.5;
+    }
+
+    .sd-grid-item__top-actions {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        z-index: 2;
+        display: flex;
+        flex-direction: row;
+        visibility: hidden;
+        color: colors.$white;
+        padding-block-start: 4px;
+        padding-inline-end: 4px;
+
+        * {
+            opacity: 0.75;
+            transition: opacity 0.2s ease-in-out;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+
+    .sd-grid-item__remove {
+        margin: 0;
+        position: absolute;
+        inset-block-start: 0.3rem;
+        inset-inline-end: 0.3rem;
+        z-index: 2;
+        opacity: 0;
+        height: 2.8rem;
+        width: 2.8rem;
+        border-radius: dimensions.$border-radius__base--full;
+        background-color: rgba(0, 0, 0, 0.5);
+        transition: opacity ease-in-out 0.2;
+    }
+
+    .sd-grid-item__checkbox {
+        visibility: hidden;
+        position: absolute;
+        inset-block-start: 12px;
+        inset-inline-start: 12px;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, .15);
+        border-radius: dimensions.$border-radius__base--x-small;
+        z-index: 2;
+        height: 1.6rem;
+        width: 1.6rem;
+        border: 2px solid rgba(255, 255, 255, 0.4);
+        outline: 2px solid rgba(0, 0, 0, .25);
+
+        .sd-check__wrapper {
+            position: absolute;
+            height: 1.6rem;
+            width: 1.6rem;
+            margin: 0;
+            inset-block-start: -4px;
+            inset-inline-start: -2px;
+        }
+
+        >.sd-checkbox {
+            position: absolute;
+            height: 1.6rem;
+            width: 1.6rem;
+            margin: 0;
+            inset-block-start: -2px;
+            inset-inline-start: -2px;
+        }
+
+        .sd-check-new__wrapper {
+            visibility: hidden;
+            padding: 0;
+            position: absolute;
+            height: 1.6rem;
+            width: 1.6rem;
+            margin: 0;
+            inset-block-start: -2px;
+            inset-inline-start: -2px;
+
+            .sd-check-new {
+                position: absolute;
+                height: 1.6rem;
+                width: 1.6rem;
+                margin: 0;
+            }
+        }
+    }
+
+    .sd-grid-item__checkbox-wrapper {
+        position: absolute;
+        margin: 4px auto 0 4px;
+        padding: 0.2rem;
+        background: rgba(255, 255, 255, .15);
+        border-radius: dimensions.$border-radius__base--x-small;
+        z-index: 3;
+        height: 1.6rem;
+        width: 1.6rem;
+        border: 2px solid rgba(255, 255, 255, 0.4);
+        outline: 2px solid rgba(0, 0, 0, .25);
+
+        .sd-check__wrapper {
+            position: absolute;
+            height: 1.6rem;
+            width: 1.6rem;
+            margin: 0;
+            inset-block-start: -4px;
+            inset-inline-start: -2px;
+        }
+
+        >.sd-checkbox {
+            position: absolute;
+            height: 1.6rem;
+            width: 1.6rem;
+            margin: 0;
+            inset-block-start: -2px;
+            inset-inline-start: -2px;
+        }
+
+        .sd-check-new__wrapper {
+            padding: 0;
+            position: absolute;
+            height: 1.6rem;
+            width: 1.6rem;
+            margin: 0;
+            inset-block-start: -2px;
+            inset-inline-start: -2px;
+
+            .sd-check-new {
+                position: absolute;
+                height: 1.6rem;
+                width: 1.6rem;
+                margin: 0;
+            }
+        }
+    }
+
+    &:hover {
+        .sd-grid-item__actions {
+            visibility: visible;
+        }
+
+        .sd-grid-item__remove {
+            opacity: 0.5;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        .sd-grid-item__checkbox {
+            visibility: visible;
+
+            .sd-check-new__wrapper {
+                visibility: visible;
+            }
+
+        }
+
+        .sd-grid-item__footer-actions {
+            visibility: visible;
+            padding-inline-end: 0.4rem;
+            max-width: 32px;
+            margin-inline-start: auto;
+            opacity: 1;
+        }
+
+        .sd-grid-item__footer-actions--visible {
+            opacity: 1;
+        }
+
+        .sd-grid-item__top-actions {
+            visibility: visible;
+        }
+    }
+
+    &.sd-grid-item--selected,
+    &.selected {
+        .sd-grid-item__checkbox {
+            visibility: visible;
+
+            .sd-check-new__wrapper {
+                visibility: visible;
+            }
+        }
+
+        &:hover {
+            .sd-grid-item__checkbox {
+                visibility: visible;
+            }
+        }
+
+        .sd-grid-item__footer-actions {
+            visibility: visible;
+            padding-inline-end: 0.4rem;
+            max-width: 32px;
+            margin-inline-start: auto;
+            opacity: 1;
+        }
+
+        .sd-grid-item__footer-actions--visible {
+            opacity: 1;
+        }
+    }
+
+    &.sd-grid-item--overflow-v {
+        overflow: visible;
+
+        .sd-grid-item__thumb,
+        .sd-grid-item__media {
+            overflow: visible;
+        }
+    }
+
+    .sd-grid-item__thumb,
+    .sd-grid-item__media {
+        position: relative;
+        flex-grow: 0;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: var(--sd-item__thumb-Bg);
+        padding: 0;
+        min-height: 4rem;
+        color: colors.$white;
+        border-radius: $sd-grid-item-border-radius $sd-grid-item-border-radius 0 0;
+        width: 100%;
+        height: 14rem;
+        overflow: hidden;
+        text-align: center;
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+            ;
+            height: auto;
+            margin: auto;
+            pointer-events: none;
+            border-radius: $sd-grid-item-border-radius $sd-grid-item-border-radius 0 0;
+            transition: filter ease-in-out 0.3s;
+        }
+
+        .sd-grid-item__type-icon {
+            margin: auto;
+            height: 4.8rem;
+            width: 4.8rem;
+            font-size: 4.8rem;
+            line-height: 4.8rem;
+            color: currentColor;
+            opacity: 0.25;
+        }
+
+        &:hover {
+            img {
+                filter: brightness(40%);
+            }
+        }
+    }
+
+    .sd-grid-item__thumb--white,
+    .sd-grid-item__media--white {
+        background-color: colors.$white;
+        color: colors.$sd-text;
+        box-shadow: 0 1px 0 rgba(136, 136, 136, 0.25);
+    }
+
+    .sd-grid-item__thumb--uploading,
+    .sd-grid-item__media--uploading {
+        img {
+            filter: brightness(40%);
+        }
+    }
+
+    .sd-grid-item__progress {
+        z-index: 2;
+        position: absolute;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        height: 0.4rem;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .sd-grid-item__progress-circle {
+        z-index: 2;
+        position: absolute;
+        height: 5.6rem;
+        width: 5.6rem;
+        inset-block-start: 50%;
+        margin-block-start: -2.8rem;
+        border-radius: dimensions.$border-radius__base--full;
+        background-color: rgba(0, 0, 0, 0.3);
+        padding: 0.2rem;
+    }
+
+    .sd-grid-item__progress-bar {
+        display: block;
+        height: 0.4rem;
+        width: 0%;
+        background-color: colors.$green;
+        inset-block-start: 50
+    }
+
+    .sd-grid-item--element-grow {
+        flex-grow: 1;
+    }
+
+    .sd-grid-item__content-block {
+        flex-grow: 0;
+    }
+
+    .sd-grid-item__content {
+        padding: 1.2rem;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .sd-grid-item__content--scrollable {
+        max-height: 20vh;
+        overflow-y: auto;
+    }
+
+    .sd-grid-item__placeholder {
+        padding: 16px;
+        flex-grow: 1;
+        height: calc(100% - 48px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: colors.$grayLight;
+        font-weight: 300;
+        font-size: 1.2rem;
+    }
+
+    .sd-grid-item__placeholder--cursorPointer {
+        cursor: pointer;
+    }
+
+    .sd-grid-item__article-header {
+        padding: 1.6rem;
+    }
+
+    .sd-grid-item__time-date {
+        font-size: 11px;
+        color: #ababab;
+        font-weight: 300;
+    }
+
+    .sd-grid-item__time-date--reverse-color {
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    .sd-grid-item__footer {
+        padding: 0.4rem 0.2rem;
+        border-block-start: 1px solid var(--sd-colour-line--x-light);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-height: 3.7rem;
+        flex-shrink: 0;
+        border-radius: 0 0 $sd-grid-item-border-radius $sd-grid-item-border-radius;
+
+        .sd-grid-item__footer-block {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+
+        .sd-grid-item__footer-block--multi-l,
+        .sd-grid-item__footer-block--multi-r {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: dimensions.$sd-base-increment;
+        }
+
+        .sd-grid-item__footer-block--multi-l {
+            justify-content: flex-start;
+        }
+
+        .sd-grid-item__footer-block--multi-r {
+            justify-content: flex-end;
+        }
+
+        .sd-grid-item__footer-block--single-r {
+            flex-grow: 0;
+        }
+
+        .sd-grid-item__footer-block--left,
+        .sd-grid-item__footer-block--right {
+            gap: dimensions.$sd-base-increment;
+        }
+
+        .sd-grid-item__footer-block--left {
+            margin-inline-end: auto;
+            justify-content: flex-start;
+            padding-inline-start: dimensions.$sd-base-increment;
+        }
+
+        .sd-grid-item__footer-block--right {
+            margin-inline-start: auto;
+            justify-content: flex-end;
+        }
+
+        .sd-grid-item__footer-block-item {
+            flex-shrink: 0;
+        }
+
+        time {
+            display: inline-block;
+        }
+    }
+
+    .sd-grid-item__footer--light {
+        background-color: colors.$white;
+    }
+
+    .sd-grid-item__footer--right-align {
+        justify-content: flex-end;
+    }
+
+    .sd-grid-item__footer--spread {
+        justify-content: space-between;
+    }
+
+    .sd-grid-item__footer--padded {
+        padding: 0.4rem 1.2rem;
+    }
+
+    .sd-grid-item__full-click {
+        position: absolute;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
+        inset-inline-start: 0;
+        z-index: 2;
+    }
+
+    .sd-grid-item__file-type-icn {
+        color: colors.$white;
+        font-size: 5.2rem;
+        height: 5.2rem;
+        width: 5.2rem;
+        padding-block-start: 8.5rem;
+        opacity: 0.5;
+    }
+
+    .sd-grid-item__type-icn {
+        opacity: 0.75;
+        color: inherit;
+    }
+
+    .sd-grid-item__slugline {
+        color: colors.$sd-slugline;
+        font-weight: 500;
+        font-size: 1.1rem;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        margin-inline-end: 1em;
+    }
+
+    .sd-grid-item__title {
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        font-size: 1.4rem;
+        margin-block-end: 1rem;
+        word-break: break-word;
+    }
+
+    .sd-grid-item__text-light {
+        font-weight: 300;
+        font-size: 1.2rem;
+        letter-spacing: 0.04em;
+        opacity: 0.7;
+    }
+
+    time {
+        display: block;
+        color: var(--color-text-muted);
+        font-size: 1.2rem;
+        letter-spacing: 0.025em;
+        flex-shrink: 0;
+    }
+
+    p {
+        margin-block-end: 1rem;
+
+        &.error {
+            margin: auto;
+            padding: 1.2rem;
+            opacity: 0.75;
+            color: colors.$red;
+        }
+    }
+
+    .sd-grid-item__state-border {
+        height: 3px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        background: none;
+        border-radius: 0 0 $sd-grid-item-border-radius $sd-grid-item-border-radius;
+    }
+
+    .sd-grid-item__media {
+        &::before {
+            font-family: 'sd_icons';
+            content: "\e605";
+            position: absolute;
+            inset-block-start: 50%;
+            margin: auto;
+            margin-block-start: -2.4rem;
+            font-size: 4.8rem;
+            line-height: 4.8rem;
+            color: currentColor;
+            opacity: 0.25;
+            z-index: 0;
+        }
+
+        img {
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &.sd-grid-item__type--file {
+        .sd-grid-item__media {
+            &::before {
+                content: "\e605";
+            }
+        }
+    }
+
+    &.sd-grid-item__type--audio {
+        .sd-grid-item__media {
+            &::before {
+                content: "\e608";
+            }
+        }
+    }
+
+    &.sd-grid-item__type--composite {
+        .sd-grid-item__media {
+            &::before {
+                content: "\e607";
+            }
+        }
+    }
+
+    &.sd-grid-item__type--graphic {
+        .sd-grid-item__media {
+            &::before {
+                content: "\e66d";
+            }
+        }
+    }
+
+    &.sd-grid-item__type--photo {
+        .sd-grid-item__media {
+            &::before {
+                content: "\e600";
+            }
+        }
+    }
+
+    &.sd-grid-item__type--slideshow {
+        .sd-grid-item__media {
+            &::before {
+                content: "\e603";
+            }
+        }
+    }
+
+    &.sd-grid-item__type--text {
+        .sd-grid-item__media {
+            &::before {
+                content: "\e604";
+            }
+        }
+    }
+
+    &.sd-grid-item__type--video {
+        .sd-grid-item__media {
+            &::before {
+                content: "\e601";
+            }
+        }
+    }
+}
+
+.sd-grid-item.locked,
+.sd-grid-item--locked {
+    .sd-grid-item__state-border {
+        background: colors.$red;
+    }
+}
+
+.sd-grid-item.archived,
+.sd-grid-item--archived,
+.sd-grid-item.fetched,
+.sd-grid-item--fetched {
+    .sd-grid-item__content {
+        //position: relative;
+        
+        &:after {
+            content: "";
+            width: 8.2rem;
+            height: 9.2rem;
+            position: absolute;
+            overflow: hidden;
+            background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTYiIGhlaWdodD0iMTE2IiB2aWV3Qm94PSIwIDAgMTE2IDExNiI+PHBhdGggZmlsbD0iIzdCN0I3QiIgZD0iTTU4IDBDMjYgMCAwIDI2IDAgNThzMjYgNTggNTggNTggNTgtMjYgNTgtNThTOTAgMCA1OCAwem0zNy4xIDM4LjhMNDYuMyA4Ny42Yy0uNS41LTEuMi41LTEuNyAwTDE4LjkgNjEuOGMtLjUtLjUtLjUtMS4yIDAtMS43bDguMi04LjJjLjUtLjUgMS4yLS41IDEuNyAwTDQ1IDY4LjFjLjMuMy44LjMgMS4xIDBsMzkuMi0zOS4yYy41LS41IDEuMi0uNSAxLjcgMGw4LjIgOC4yYy40LjUuNCAxLjItLjEgMS43eiIvPjwvc3ZnPg==) no-repeat;
+            background-size: 9.6rem;
+            background-position: 0 0;
+            inset-block-end: 0;
+            inset-inline-end: 0rem;
+            opacity: 0.14;
+        }
+    }
+}
+
+.sd-grid-item--small {
+
+    .sd-grid-item__thumb,
+    .sd-grid-item__media {
+        height: 10rem;
+    }
+}
+
+.sd-grid-item--with-click {
+    @include mixins.transition(all, 100ms, ease-in);
+    cursor: pointer;
+
+    &:hover {
+        box-shadow: $sd-grid-item-shadow-hover;
+    }
+
+    &:active {
+        box-shadow: $sd-grid-item-shadow-activated;
+    }
+}
+
+.sd-grid-item--activated,
+.sd-grid-item--active,
+.sd-grid-item.active,
+.sd-grid-item.activated {
+    box-shadow: $sd-grid-item-shadow-activated;
+
+}
+
+.sd-grid-item--selected,
+.sd-grid-item.selected {
+    box-shadow: $sd-grid-item-shadow-selected;
+    background-color: var(--sd-colour-bg__grid-item--selected);
+
+    &:hover {
+        box-shadow: $sd-grid-item-shadow-selected;
+        background-color: var(--sd-colour-bg__grid-item--selected);
+    }
+}
+
+.sd-grid-item__text-label {
+    font-weight: 300;
+    font-style: italic;
+    margin-inline-end: 0.3rem;
+    opacity: 0.7;
+}
+
+.sd-grid-item__text-strong {
+    font-weight: 400;
+}
+
+
+.sd-grid-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    grid-gap: 2.4rem;
+    margin: 2.4rem;
+}
+
+.sd-grid-list--xx-small {
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+}
+
+.sd-grid-list--x-small {
+    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+}
+
+.sd-grid-list--small {
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+}
+
+.sd-grid-list--medium {
+    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
+}
+
+.sd-grid-list--large {
+    grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
+}
+
+.sd-grid-list--small-margin {
+    margin: 1rem;
+}
+
+.sd-grid-list--no-margin {
+    margin: 0;
+}
+
+.sd-grid-list--gap-s,
+.sd-grid-list--gap-small {
+    grid-gap: 1.6rem;
+}
+
+.sd-grid-list--gap-m,
+.sd-grid-list--gap-medium {
+    grid-gap: 2.4rem;
+}
+
+.sd-grid-list--gap-l,
+.sd-grid-list--gap-large {
+    grid-gap: 3.2rem;
+}
+
+.sd-grid-list--gap-xl,
+.sd-grid-list--gap-x-large {
+    grid-gap: 4rem;
+}
+
+.sd-grid-list--auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+
+.sd-grid-item-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.sd-grid-item-header {
+    padding: 4px 0;
+    margin-block-end: 6px;
+    border-block-end: 5px solid var(--sd-colour-neutral);
+    display: flex;
+}
+
+.sd-grid-item-header__heading {
+    color: var(--color-text);
+    font-size: 15px;
+    font-weight: 500;
+    flex-grow: 1;
+    min-height: 32px;
+
+    &+div {
+        margin-inline-start: 8px;
+    }
+
+    a {
+        text-decoration: none;
+        color: inherit;
+
+        span {
+            border-block-end: 1px dotted var(--sd-colour-interactive);
+        }
+
+        [class^="icon-"],
+        [class*=" icon-"] {
+            color: var(--sd-colour-interactive);
+            margin-inline-start: 8px;
+        }
+
+        &:hover {
+            span {
+                border-bottom-style: solid;
+            }
+        }
+    }
+}
+
+.dark-ui,
+[data-theme="dark-ui"] {
+    .sd-grid-item {
+        .sd-grid-item__text-label {
+            opacity: 0.4;
+        }
+
+        .sd-grid-item__text-strong {
+            opacity: 0.5;
+        }
+    }
+}