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

package/app/styles/_big-icon-font.scss

@@ -0,0 +1,182 @@
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:map';
+
+// BIG ICON FONT
+// Icons for the left and right sidebar and large action buttons in the top subnavigation bar
+
+// All icons receive the styles of the <i> tag with a base class
+// of .i and are then given a unique class to add width, height,
+// and font specification. Your resulting HTML will look like
+// <i class="icon-ok"></i>.
+
+@use 'variables/colors';
+
+$icon-color: colors.$grayDark !default;
+
+@font-face {
+	font-family: 'sd_big-icons';
+	src:  url('../fonts/sd_big-icons.eot?v4j36k');
+	src:  url('../fonts/sd_big-icons.eot?v4j36k#iefix') format('embedded-opentype'),
+		url('../fonts/sd_big-icons.ttf?v4j36k') format('truetype'),
+		url('../fonts/sd_big-icons.woff?v4j36k') format('woff'),
+		url('../fonts/sd_big-icons.svg?v4j36k#sd_big-icons') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@mixin big-icon-base {
+    --big-icon-size: 26px;
+    font-family: 'sd_big-icons';
+    display: inline-block;
+    width: var(--big-icon-size);
+    height: var(--big-icon-size);
+    line-height: var(--big-icon-size);
+    font-size: var(--big-icon-size);
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+}
+
+[class^="big-icon--"],
+[class*=" big-icon--"] {
+    @include big-icon-base;
+    color: var(--color-icon-default);
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.big-icon--blue {
+    color: colors.$sd-colour-interactive;
+}
+
+.big-icon--white {
+    color: colors.$white !important;
+}
+
+[class*=big-icon--].red,
+.big-icon--red {
+    color: colors.$fireBrick;
+}
+
+// Icons definition
+$sd-big-icon-font: (
+    dashboard: "\e600",
+    view: "\e601",
+    tasks: "\e602",
+    calendar: "\e603",
+    marked-star: "\e604",
+    archive: "\e605",
+    spike: "\e606",
+    unspike: "\e607",
+    personal: "\e608",
+    global-search: "\e609",
+    analytics: "\e60a",
+    web: "\e60b",
+    cog: "\e60c",
+    send-to: "\e60d",
+    info: "\e60e",
+    find-replace: "\e60f",
+    comments: "\e610",
+    history: "\e611",
+    package: "\e612",
+    create-package: "\e613",
+    add-to-package: "\e614",
+    fetch: "\e615",
+    fetch-as: "\e616",
+    macro: "\e617",
+    related: "\e618",
+    minimize: "\e619",
+    settings: "\e61a",
+    multiedit: "\e61b",
+    export: "\e61c",
+    create-list: "\e61d",
+    add-to-list: "\e61e",
+    text: "\e61f",
+    desk: "\e620",
+    chevron-left: "\e621",
+    chevron-right: "\e622",
+    dashboard-alt: "\e623",
+    master: "\e624",
+    attachment: "\e625",
+    upload-alt: "\e626",
+    document-default: "\e627",
+    document-pdf: "\e628",
+    document-doc: "\e629",
+    semantics: "\e62a",
+    picture: "\e62b",
+    manage-package: "\e62c",
+    live: "\e62d",
+    live-alt: "\e62e",
+    meta-search: "\e62f",
+    chat: "\e630",
+    annotation: "\e631",
+    suggestion: "\e632",
+    publisher: "\e633",
+    tag: "\e634",
+    rundown: "\e635",
+    checkmark-circle: "\e636",
+    open-ai: "\e637",
+    general-ai: "\e638",
+    user: "\e639",
+    user-ok: "\e63a",
+);
+
+@each $name, $value in $sd-big-icon-font {
+    .big-icon--#{$name} {
+        &.color--default {
+            color: $icon-color;
+        }
+
+        &.color--primary {
+            color: var(--sd-colour-primary) !important;
+        }
+
+        &.color--success {
+            color: var(--sd-colour-success) !important;
+        }
+
+        &.color--warning {
+            color: var(--sd-colour-warning) !important;
+        }
+
+        &.color--alert {
+            color: var(--sd-colour-alert) !important;
+        }
+
+        &.color--highlight {
+            color: var(--sd-colour-highlight) !important;
+        }
+
+        &.color--light {
+            color: var(--color-text-subdued) !important;
+        }
+
+        &.color--white {
+            color: hsla(214, 13%, 90%, 1) !important;
+        }
+
+        &.scale--2x {
+            --big-icon-size: 52px
+        }
+
+        &.scale--3x {
+            --big-icon-size: 78px
+        }
+
+        &.scale--4x {
+            --big-icon-size: 104px
+        }
+
+        &:before {
+            content: $value;
+        }
+    }
+}
+
+:export {
+    icon: map.keys($sd-big-icon-font);
+}

package/app/styles/_boxed-list.scss

@@ -0,0 +1,284 @@
+@use "variables/dimensions";
+
+// Boxed lists
+// Simpler version of the list item.
+.boxed-list {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: var(--space--1);
+    margin-block-end: var(--space--2);
+}
+
+.boxed-list--compact {
+    gap: var(--space--1);
+}
+
+.boxed-list--comfortable {
+    gap: var(--space--1-5);
+}
+
+.boxed-list__item {
+    --item-bg-color: var(--sd-item__main-Bg);
+    --item-border-color: transparent;
+    --item-radius: var(--b-radius--small);
+    display: grid;
+    grid-template-rows: [mainRow] 1fr [footerRow] auto;
+    grid-template-columns: [mediaCol] auto [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
+    position: relative;
+    flex-direction: row;
+    border-radius: var(--item-radius);
+    background-color: var(--item-bg-color);
+    box-shadow: var(--sd-shadow--z1);
+    transition: all 0.2s ease-in-out;
+    flex-shrink: 0;
+    &::before {
+        content: "";
+        width: 4px;
+        height: 100%;
+        position: absolute;
+        inset-block-start: 0px;
+        inset-inline-start: 0px;
+        background-color: var(--item-border-color);
+        z-index: 1;
+        border-radius: var(--item-radius) 0 0 var(--item-radius);
+    }
+    &.boxed-list__item--default {
+        --item-border-color: var(--color-neutral-medium-default);
+    }
+    &.boxed-list__item--primary {
+        --item-border-color: var(--color-primary-highlight);
+    }
+    &.boxed-list__item--success {
+        --item-border-color: var(--color-success-highlight);
+    }
+    &.boxed-list__item--alert {
+        --item-border-color: var(--color-alert-highlight);
+    }
+    &.boxed-list__item--warning {
+        --item-border-color: var(--color-warning-highlight);
+    }
+    &.boxed-list__item--highlight {
+        --item-border-color: var(--color-highlight-highlight);
+    }
+
+    &.boxed-list__item--selected.boxed-list__item--clickable {
+        &:hover {
+            box-shadow: var(--sd-shadow__item--selected);
+            background-color: var(--color-selected-bg--hover) !important;
+        }
+    }
+
+    &:hover {
+        .boxed-list__slide-in-actions,
+        .boxed-list__actions--slide-in {
+            padding-inline-start: 0.6rem;
+            width: auto;
+            max-width: 32px;
+            overflow: visible;
+            opacity: 1;
+            transition: all ease-in 0.1s;
+
+            .icn-btn {
+                opacity: 0.4;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    &.boxed-list__item--colored-bg {
+        &.boxed-list__item--primary {
+            background-color: var(--color-primary-translucent);
+            outline: 1px solid var(--color-primary-translucent);
+        }
+        &.boxed-list__item--success {
+            background-color: var(--color-success-translucent);
+            outline: 1px solid var(--color-success-translucent);
+        }
+        &.boxed-list__item--alert {
+            background-color: var(--color-alert-translucent);
+            outline: 1px solid var(--color-alert-translucent);
+        }
+        &.boxed-list__item--warning {
+            background-color: var(--color-warning-translucent);
+            outline: 1px solid var(--color-warning-translucent);
+        }
+        &.boxed-list__item--highlight {
+            background-color: var(--color-highlight-translucent);
+            outline: 1px solid var(--color-highlight-translucent);
+        }
+    }
+}
+
+.boxed-list__item--selected {
+    box-shadow: var(--sd-shadow__item--selected);
+}
+
+.boxed-list__item--unread {
+    box-shadow: var(--sd-shadow__item--unread);
+}
+
+.boxed-list__item--clickable {
+    &:hover {
+        cursor: pointer;
+        box-shadow: dimensions.$shadow__base--z2;
+    }
+    &:active {
+        box-shadow: 0 0 2px 1px hsla(0, 0%, 0%, 0.12);
+    }
+}
+
+.boxed-list__item--blank {
+    background-color: transparent !important;
+    box-shadow: none;
+}
+
+.boxed-list__item--disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.boxed-list__item--comfortable {
+    min-height: 3.2rem;
+    padding: var(--space--1-5);
+}
+
+.boxed-list__item--compact {
+    min-height: none;
+    padding: dimensions.$sd-base-increment dimensions.$sd-base-increment dimensions.$sd-base-increment dimensions.$sd-base-increment * 0.5;
+}
+
+.boxed-list__item--loose {
+    min-height: 4.8rem;
+    padding: var(--space--2);
+}
+
+.boxed-list__item-media {
+    grid-column: mediaCol;
+    grid-row: mainRow;
+    display: flex;
+    flex-direction: column;
+    padding: 0 0.2rem 0 0.2rem;
+    flex: 0 1 auto;
+
+    [class^="icon-"],
+    [class*="icon-"],
+    [class^="big-icon--"],
+    [class*=" big-icon--"] {
+        color: var(--color-text);
+        opacity: 0.5;
+    }
+
+    [class^="icon-"],
+    [class*="icon-"] {
+        color: var(--color-text);
+        opacity: 0.5;
+        width: 3.2rem;
+        height: 3.2rem;
+        font-size: 3.2rem;
+        line-height: 1;
+    }
+}
+
+.boxed-list__item-content {
+    grid-column: contentCol;
+    grid-row: mainRow;
+    display: flex;
+    flex-direction: column;
+    padding: 0 0.8rem 0 0.8rem;
+    overflow: hidden;
+    position: relative;
+}
+
+.boxed-list__item-content--centered {
+    align-items: center;
+    justify-content: center;
+}
+
+.boxed-list__item-content-row {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: flex-start;
+}
+
+.boxed-list__item-content-row--fixed {
+    align-items: baseline;
+    white-space: nowrap;
+}
+
+.boxed-list__item-footer {
+    grid-column: 1/-1;
+    grid-row: footerRow;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.8rem 0.8rem 0 0.8rem;
+    margin-block-start: 0.8rem;
+}
+
+.boxed-list__item-footer--allign-baseline {
+    align-items: baseline;
+}
+
+.boxed-list__item-content-row + .boxed-list__item-content-row  {
+    margin-block-start: 0.8rem;
+}
+
+.boxed-list__slide-in-actions,
+.boxed-list__static-actions,
+.boxed-list__actions--slide-in,
+.boxed-list__actions--static {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    flex-grow: 0;
+    gap: 2px;
+
+    .icn-btn {
+        margin: 0 -0.6rem 0 0;
+    }
+}
+
+.boxed-list__slide-in-actions,
+.boxed-list__actions--slide-in {
+    grid-column: actionsHidden;
+    grid-row: mainRow;
+    width: 0;
+    max-width: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all ease-in-out 0.2s;
+
+    .icn-btn {
+        flex: 0 0 auto;
+        opacity: 0;
+        transition: all ease-in-out 0.2s;
+    }
+}
+
+.boxed-list__static-actions,
+.boxed-list__actions--static  {
+    grid-column: actionsVisible;
+    grid-row: mainRow;
+
+    .icn-btn {
+        opacity: 0.4;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.boxed-list__item {
+    &.boxed-list__item--align-center {
+        .boxed-list__item-content {
+            justify-content: center;
+        }
+
+    }
+}