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

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

@@ -0,0 +1,586 @@
+@use "../mixins";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// Default sd-card  styling
+
+//color variables
+$card-item-header-bg-normal: var(--sd-card-header-bg-color--normal);
+$card-item-header-bg-inactive: var(--sd-card-header-bg-color--inactive);
+$card-item-header-bg-active: var(--sd-card-header-bg-color--active);
+$card-item-header-bg-light: var(--sd-card-header-bg-color--light);
+$card-item-header-bg-secondary: var(--sd-card-header-bg-color--secondary);
+$card-item-header-bg-gradient-1: var(--sd-card-header-bg-color--gradient-1);
+$card-item-top-border-height: 0.4rem;
+$card-item-rounded-radius: var(--b-radius--large);
+$card-item-default-radius: var(--b-radius--medium);
+
+//shadows
+$card-item-shadow: 0 1px 4px rgba(0,0,0,.1), 0 1px 5px rgba(0,0,0,.16);
+$card-item-shadow-hover: 0 1px 6px rgba(0,0,0,.16), 0 2px 12px rgba(0,0,0,.36);
+$card-item-shadow-active: 0 0 4px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.16);
+$card-item-shadow-hover-light: 0 1px 6px rgba(0,0,0,.1), 0 2px 12px rgba(31, 17, 17, 0.16);
+
+.sd-card {
+    position: relative;
+    border-radius: $card-item-default-radius;
+    box-shadow: $card-item-shadow;
+    background-color: var(--sd-item__main-Bg);
+    color: colors.$sd-text;
+    min-height: 12rem;
+    display: flex;
+    flex-direction: column;
+
+    .sd-card__actions   {
+        margin: 0.4rem 0.4rem 0 0;
+        visibility: hidden;
+    }
+
+    &:hover {
+        .sd-card__actions   {
+            visibility: visible;
+        }
+    }
+
+    .sd-card__actions-group {
+        display: flex;
+        align-items: center;
+        margin-inline-end: var(--gap--x-small);
+        gap: var(--gap--x-small);
+    }
+
+    .sd-card__header {
+        position: relative;
+        flex-grow: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;        
+        background-color: $card-item-header-bg-normal;
+        padding: 0;
+        min-height: dimensions.$sd-base-increment * 5 + $card-item-top-border-height;
+        color: colors.$white;
+        border-radius: $card-item-default-radius $card-item-default-radius 0 0;
+
+        &::before {
+            content: "";
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
+            height: $card-item-top-border-height;
+            background-color: rgba(0,0,0,.2);
+            border-radius: $card-item-default-radius $card-item-default-radius 0 0;
+        }
+    }
+
+    // use only for positioning, not for styling
+    .sd-card__header--empty {
+        height:8px;
+    }
+
+    .sd-card__header--light,
+    .sd-card__header--white  {
+        background-color: var(--sd-item__main-Bg);
+        color: colors.$sd-text;
+        box-shadow: 0 1px 0 var(--sd-colour-line--light);
+
+        &::before {
+            background-color: hsla(214, 13%, 50%, 0.5);
+        }
+    }
+
+    .sd-card__header--light {
+        background-color: $card-item-header-bg-light;
+
+        .sd-card__thumbnail {
+            background-color: var(--sd-item__thumb-Bg--light);
+        }
+    }
+
+    .sd-card__header--gradient-1 {
+        background: $card-item-header-bg-gradient-1;
+
+        .sd-card__thumbnail {
+            background-color: transparent;
+        }
+    }
+
+    .sd-card__header--blank {
+        background-color: transparent;
+
+        &::before {
+            background-color: transparent;
+        }
+
+        .sd-card__thumbnail {
+            background-color: transparent;
+        }
+    }
+
+    .sd-card__header--with-thumb {
+        position: relative;
+        flex-direction: column;
+
+        .sd-card__actions {
+            position: absolute;
+            inset-block-start: 0.4rem;
+            inset-inline-end:0;
+            z-index: 2;
+        }
+    }
+
+    .sd-card__header--padding {
+        padding: 1rem 0;
+    }
+
+    .sd-card__header--secondary-color {
+        background-color: $card-item-header-bg-secondary;
+    }
+    
+    // sd-card__heading should go inside sd-card__header
+    .sd-card__heading {
+        padding-inline: var(--space--1-5);
+        padding-block-start: $card-item-top-border-height;
+        flex-grow: 1;
+        font-size: 1.2rem;
+        line-height: 100%;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: inherit;
+    }
+
+    .sd-card__heading--editable {
+        padding: var(--gap--small) var(--gap--small) var(--gap--small);
+        text-transform: initial !important;
+        .sd-card__heading-dummy-input {
+            display: flex;
+            align-items: center;
+            height: 3.2rem;
+            border: 2px solid transparent;
+            border-radius: var(--b-radius--medium);
+            padding: 0 0.8rem;
+            transition: all 0.2s ease;
+            text-transform: initial !important;
+            font-size: 1.4rem;
+            font-weight: 400;
+            letter-spacing: 0;
+            line-height: 1;
+            &:hover {
+                border-color: var(--color-input-border);
+                cursor: text;
+            }
+        }
+    }
+
+    .sd-card__sub-header {
+        padding-inline: var(--space--1-5);
+        background-color: hsl(201, 15%, 67%);
+        display: flex;
+        align-items: center;
+        color: colors.$white;
+        font-size: 1.1rem;
+        font-weight: 400;
+        line-height: 100%;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        min-height: dimensions.$sd-base-increment * 3;
+    }
+
+    .sd-card__sub-header--success {
+        background-color: colors.$green;
+    }
+
+    .sd-card__btn-group {
+        margin: 14px 6px 0 0;
+
+        .btn {
+            background: transparent;
+            padding: 10px 2px;
+            color: colors.$white;
+            opacity: 0.4;
+
+            &:focus, &:hover {
+                box-shadow: none;
+                opacity: 1;
+            }
+
+            [class^="icon-"], 
+            [class*=" icon-"] {
+                color: colors.$white;
+            }
+        }
+    }
+    
+    .sd-card__btn-group--right {
+        float: inline-end;
+    }
+
+    .sd-card__thumbnail {
+        margin-block-start: 0.4rem;
+        line-height: 0;
+        background-color: var(--sd-item__thumb-Bg);
+
+        & + .sd-card__heading {
+            background-color: var(--sd-item__main-Bg);
+            font-weight: 500;
+            text-align: center;
+            color: colors.$sd-text;
+            padding: 1rem 1.6rem;
+            width: 100%;
+            box-shadow: 0 1px 0 var(--sd-colour-line--light);
+        }
+    }
+    .sd-card__content {
+        padding: var(--space--2);
+        flex-grow: 1;
+
+        h4 {
+            text-transform: uppercase;
+            font-size: 11px;
+            color: rgba(0,0,0,.5);
+            letter-spacing: 0.04em;
+            margin-block-end: 4px;
+            &.with-value {
+                margin-block-end: 0;
+            }
+
+            .label {
+                float: inline-end;
+                height: 15px;
+                margin: auto 0;
+                padding: 3px 5px 0;
+                border-radius: 8px;
+                color: rgba(255,255,255,1);
+                background: rgba(0,0,0,.25);
+                font-size: 10px;
+                line-height: 100%;
+                letter-spacing: .06em;
+                font-weight: 400;
+            }
+
+            .value-label {
+                float: inline-end;
+                font-size: 13px;
+                color: var(--color-text);
+                font-weight: 400;
+                text-transform: none;
+                letter-spacing: 0em;
+            }
+
+            &.sd-card__h4--normal-case {
+                font-size: 12px;
+                text-transform: initial;
+            }
+        }
+    }
+
+    .sd-card__content--scrollable {
+        min-height: 20vh;
+        max-height: 34vh;
+        overflow-y: auto;
+    }
+
+    .sd-card__content--padd-10 {
+        padding: 1rem;
+    }
+
+    .sd-card__content-heading, h4.sd-card__content-heading {
+        text-transform: none;
+        color: inherit;
+        font-size: 1.6rem;
+        letter-spacing: initial;
+        padding-block-end: dimensions.$sd-base-increment;
+    }
+
+    .sd-card__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-card__placeholder--cursorPointer {
+        cursor: pointer;
+    }
+
+    .sd-card__content-list {
+        margin: -16px;
+        padding: 0;
+        list-style: none;
+
+        li,
+        .sd-card__content-list-item {
+            padding: var(--gap--medium);
+            border-block-end: 1px solid var(--sd-colour-line--light);
+
+            .sd-card__content-list-inline-span {
+                display: inline-block;
+            }
+
+            &:last-child {
+                border: none;
+            }
+        }
+
+        .sd-card__content-list-item--inline {
+            display: flex;
+
+            h4 {
+                flex: 1 1;
+            }
+
+            span { 
+                flex: 1 1; 
+                text-align: end;
+            }
+        }
+
+        .sd-card__content-list-item--border-bottom {
+            &:last-child {
+                border-block-end: 1px solid var(--sd-colour-line--light);
+            }
+        }
+
+        .sd-card__content-list-item--small {
+            padding: var(--gap--small) var(--gap--small) var(--gap--small) var(--gap--medium);
+
+            h4 {
+                margin: 0;
+            }
+        }
+
+        .sd-card__content-list-item--no-padding {
+            padding: 0;
+        }
+
+        .creation-time {
+            display: block;
+            font-size: 12px;
+            color: var(--color-text-muted);
+
+            i {
+                display: inline-block;
+                opacity: 0.5;
+                margin-block-start: -2px;
+            }
+        }
+
+        .button__view-all {
+            border-block-end: 1px dotted var(--sd-colour-interactive);
+            color: var(--sd-colour-interactive);
+            cursor: pointer;
+        }
+
+        .sd-card__content-list-block-link {
+            display: block;
+            padding: .8rem 1.6rem;
+            color: var(--color-text);
+            text-decoration: none;
+
+            &:hover {
+                color: var(--color-text);
+            }
+        }
+
+        .sd-card__content-list-block-link--icon-hover {
+            display: flex;
+            justify-content: space-between;
+
+            i {
+                display: none;
+            }
+
+            &:hover {
+                background-color: var(--sd-colour-interactive--alpha-20);
+
+                i {
+                    display: inline-flex;
+                }
+            }
+        }
+    }
+
+    .sd-card__article-header {
+        padding: 16px;
+    }
+
+    .sd-card__time-date {
+        font-size: 11px;
+        color: var(--color-text-muted);
+        font-weight: 300;
+    }
+
+    .sd-card__time-date--reverse-color {
+        color: hsla(0, 0%, 100%, 0.7);
+    }
+
+    .sd-card__footer {
+        padding-inline: var(--space--1-5);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        min-height: dimensions.$sd-base-increment * 6;
+        background-color: var(--sd-item__main-Bg);
+        border-radius: 0 0 $card-item-default-radius $card-item-default-radius;
+        box-shadow: 0 -1px 0 0 var(--sd-colour-line--light);
+        gap: dimensions.$sd-base-increment;
+    }
+
+    .sd-card__footer--right-align {
+        justify-content: flex-end;
+    }
+
+    .sd-card__footer--spread {
+        justify-content: space-between;
+    }
+
+    .sd-card__full-click {
+        position: absolute;
+        inset-block-start:0;
+        inset-block-end:0;
+        inset-inline-end:0;
+        inset-inline-start:0;
+        z-index: 2;
+    }
+
+    .sd-card__thumbnail {
+        width: 100%;
+        position: relative;
+        height: 0;
+        padding-block-end: 75%;
+        overflow: hidden;
+        text-align: center;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+
+    .sd-card__thumbnail--size-xs {
+        padding-block-end: 35%;
+        .sd-card__thumbnail-heading {
+            font-size: 18px;
+        }
+    }
+
+    .sd-card__thumbnail--size-xxs {
+        padding-block-end: 16%;
+
+        .sd-card__thumbnail-heading {
+            font-size: 18px;
+        }
+    }
+
+    .sd-card__thumbnail--size-s {
+        padding-block-end: 50%;
+    }
+
+    .sd-card__thumbnail--size-m {
+        padding-block-end: 75%; // default value; 
+    }
+
+    .sd-card__thumbnail--size-l {
+        padding-block-end: 100%; // default value; 
+    }
+
+    .sd-card__thumbnail--size-xl {
+        padding-block-end: 125%; // default value; 
+    }
+
+    .sd-card__file-type-icn {
+        color: colors.$white;
+        font-size: 5.2rem;
+        height: 5.2rem;
+        width: 5.2rem;
+        position: absolute;
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+        margin: -2.6rem 0 0 -2.6rem;
+        line-height: 5.2rem;
+        opacity: 0.5;
+    }
+
+    .sd-card__thumbnail-heading {
+        font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
+        font-weight: 700;
+        font-size: 2.1rem; 
+        z-index: 2;
+        text-align: center;
+        color: colors.$white;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        margin: 0;
+        inset-block-end: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 120%;
+
+    }
+}
+
+.sd-card--with-click {
+    @include mixins.transition(all, 100ms, ease-in);
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        box-shadow: $card-item-shadow-hover;
+        transform: translate(0, -2px);
+    }
+
+    &:active {
+        box-shadow: $card-item-shadow-active;
+    }
+}
+
+.sd-card--rounded {
+    border-radius: $card-item-rounded-radius;
+
+    .sd-card__header {
+        border-radius: $card-item-rounded-radius $card-item-rounded-radius 0 0;
+
+        &::before {
+            border-radius: $card-item-rounded-radius $card-item-rounded-radius 0 0;
+        }
+    }
+}
+
+.sd-card--flex-grow {
+    flex-grow: 1;
+}
+
+.sd-card--auto-height {
+    min-height: 0;
+}
+
+.sd-card--blank {
+    background-color: transparent;
+    box-shadow: none;
+    
+    &:hover {
+        box-shadow: $card-item-shadow-hover-light;
+    }
+}
+
+.sd-card--active {
+    .sd-card__header {
+        background-color: $card-item-header-bg-active;
+    }
+}
+.sd-card--inactive {
+    .sd-card__header {
+        background-color: $card-item-header-bg-inactive;
+    }
+}