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

package/app/styles/_icon-font.scss

@@ -0,0 +1,488 @@
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:map';
+
+// ICON FONT
+// Glyphs and icons for buttons, nav, and more
+
+// 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>.
+
+// For the white version of the icons, just add the icon--white modifier:
+// <i class="icon-ok icon--white"></i>
+
+/// Default color for icons.
+@use 'variables';
+@use "variables/colors";
+@use "variables/dimensions";
+
+$icon-color: var(--color-icon-default) !default;
+
+@font-face {
+    font-family: 'sd_icons';
+    src:url('../fonts/sd_icons.eot?-r9v51w');
+    src:url('../fonts/sd_icons.eot?#iefix-r9v51w') format('embedded-opentype'),
+        url('../fonts/sd_icons.woff?-r9v51w') format('woff'),
+        url('../fonts/sd_icons.ttf?-r9v51w') format('truetype'),
+        url('../fonts/sd_icons.svg?-r9v51w#sd_icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+$icon-base-size: 16px;
+
+@mixin icon-base {
+    --icon-base-size: 16px;
+    display: inline-block;
+    width: var(--icon-base-size);
+    height: var(--icon-base-size);
+    line-height: var(--icon-base-size);
+    font-size: var(--icon-base-size);
+    font-family: 'sd_icons';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+    @include icon-base;
+    color: var(--color-icon-default);
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon--2x {
+    width: $icon-base-size *2;
+    height: $icon-base-size *2;
+    line-height: $icon-base-size *2;
+    font-size: $icon-base-size *2;
+}
+
+.icon--light {
+    opacity: 0.5;
+}
+
+.icon--blue {
+    color: colors.$sd-colour-interactive !important;
+}
+
+.icon--white {
+    color: colors.$white !important;
+}
+
+.icon--light-blue {
+    color: #68abc8 !important;
+    opacity: 1 !important;
+}
+
+.icon--dark-blue-grey {
+    color: #31728e !important;
+    opacity: 1 !important;
+}
+
+[class*=icon-].red,
+.icon--red {
+    color: colors.$fireBrick !important;
+}
+
+.icon--orange {
+    color: colors.$orange !important;
+}
+
+.icon--green {
+    color: colors.$green !important;
+}
+
+.icon--full-opacity {
+    opacity: 1 !important;
+}
+
+.icon--disabled {
+    opacity: 0.2 !important;
+}
+
+// Icons definition
+$sd-icon-font: (
+    photo: "\e600",
+    video: "\e601",
+    map-marker: "\e602",
+    slideshow: "\e603",
+    text: "\e604",
+    file: "\e605",
+    calendar: "\e606",
+    composite: "\e607",
+    audio: "\e608",
+    stream: "\e609",
+    ingest: "\e60a",
+    archive: "\e60b",
+    time: "\e60c",
+    pin: "\e60d",
+    expand: "\e60e",
+    ascending: "\e60f",
+    descending: "\e60f",
+    th: "\e610",
+    grid-view: "\e610",
+    th-list: "\e611",
+    list-view: "\e611",
+    pencil: "\e612",
+    lock: "\e613",
+    retweet: "\e614",
+    unspike: "\e615",
+    fullscreen: "\e616",
+    fetch-as: "\e617",
+    search: "\e618",
+    star: "\e619",
+    star-empty: "\e61a",
+    multi-star: "\e61b",
+    th-large: "\e61c",
+    grid-view-large: "\e61c",
+    ok: "\e61d",
+    zoom-in: "\e61e",
+    zoom-out: "\e61f",
+    signal: "\e620",
+    filter-large: "\e621",
+    trash: "\e622",
+    user: "\e623",
+    download: "\e624",
+    upload: "\e625",
+    repeat: "\e626",
+    refresh: "\e627",
+    list-alt: "\e628",
+    plus-large: "\e629",
+    picture: "\e62a",
+    question-sign: "\e62b",
+    info-sign: "\e62c",
+    plus-sign: "\e62d",
+    minus-sign: "\e62e",
+    remove-sign: "\e62f",
+    share-alt: "\e630",
+    exclamation-sign: "\e631",
+    eye-open: "\e632",
+    copy: "\e633",
+    comment: "\e634",
+    warning-sign: "\e635",
+    adjust: "\e636",
+    folder-close: "\e637",
+    folder-open: "\e638",
+    download-alt: "\e639",
+    tasks: "\e63a",
+    globe: "\e63b",
+    link: "\e63c",
+    expand-thin: "\e63d",
+    assign: "\e63e",
+    dots: "\e63f",
+    dots-vertical: "\e63f",
+    backward-thin: "\e640",
+    forward-thin: "\e641",
+    chevron-left-thin:"\e642",
+    chevron-right-thin: "\e643",
+    switches: "\e644",
+    plus-small: "\e645",
+    minus-small: "\e646",
+    close-small: "\e647",
+    post: "\e648",
+    external: "\e649",
+    chevron-up-thin: "\e64a",
+    chevron-down-thin: "\e64b",
+    pick: "\e64c",
+    revert: "\e64d",
+    package-plus: "\e64e",
+    list-plus: "\e64f",
+    envelope: "\e650",
+    heart: "\e651",
+    home: "\e652",
+    print: "\e653",
+    font: "\e654",
+    bold: "\e655",
+    italic: "\e656",
+    underline: "\e657",
+    strikethrough: "\e658",
+    align-left: "\e659",
+    align-center: "\e65a",
+    align-right: "\e65b",
+    align-justify: "\e65c",
+    unordered-list: "\e65d",
+    indent-left: "\e65e",
+    indent-right: "\e65f",
+    ban-circle: "\e660",
+    bell: "\e661",
+    random: "\e662",
+    settings: "\e663",
+    package-create: "\e664",
+    list-menu: "\e665",
+    new-doc: "\e666",
+    edit-line: "\e667",
+    calendar-list: "\e668",
+    collapse: "\e669",
+    broadcast: "\e66a",
+    broadcast-create: "\e66b",
+    kill: "\e66c",
+    graphic: "\e66d",
+    close-thick: "\e66e",
+    move: "\e66f",
+    takes-package: "\e670",
+    highlight-package: "\e671",
+    preview-mode: "\e672",
+    unlocked: "\e673",
+    code: "\e674",
+    cut: "\e675",
+    paste: "\e676",
+    arrow-left:"\e677",
+    arrow-right: "\e678",
+    info-large: "\e679",
+    help-large: "\e67a",
+    attachment: "\e67b",
+    attachment-large: "\e67c",
+    table: "\e67d",
+    ordered-list: "\e67e",
+    heading-1: "\e67f",
+    heading-2: "\e680",
+    heading-3: "\e681",
+    heading-4: "\e682",
+    heading-5: "\e683",
+    heading-6: "\e684",
+    quote: "\e685",
+    multiedit: "\e686",
+    phone: "\e687",
+    mobile: "\e688",
+    twitter: "\e689",
+    facebook: "\e68a",
+    linked-in: "\e68b",
+    twitter-circle: "\e68c",
+    facebook-circle: "\e68d",
+    linked-in-circle: "\e68e",
+    recurring: "\e68f",
+    paragraph: "\e690",
+    suggestion: "\e691",
+    event: "\e692",
+    kanban-view: "\e693",
+    subscript: "\e694",
+    superscript: "\e695",
+    clear-format: "\e696",
+    preformatted: "\e697",
+    crop: "\e698",
+    flip-horizontal: "\e699",
+    flip-vertical: "\e69a",
+    rotate-right: "\e69b",
+    rotate-left: "\e69c",
+    business: "\e69d",
+    paywall: "\e69e",
+    analytics: "\e69f",
+    amp: "\e6a0",
+    undo: "\e6a1",
+    redo: "\e6a2",
+    instagram: "\e6a3",
+    play: "\e6a4",
+    stop: "\e6a5",
+    pause: "\e6a6",
+    fast_rewind: "\e6a7",
+    fast_forward: "\e6a8",
+    skip_previous: "\e6a9",
+    skip_next: "\e6aa",
+    add-image: "\e6ab",
+    add-gallery: "\e6ac",
+    text-format: "\e6ad",
+    to-uppercase: "\e6ae",
+    to-lowercase: "\e6af",
+    arrow-small: "\e6b0",
+    clear-all: "\e6b1",
+    rundown: "\e6b2",
+    photo-cancel: "\e6b3",
+    video-cancel: "\e6b4",
+    text-cancel: "\e6b5",
+    file-cancel: "\e6b6",
+    audio-cancel: "\e6b7",
+    list-alt-cancel: "\e6b8",
+    post-cancel: "\e6b9",
+    text-block: "\e6ba",
+    graphic-cancel: "\e6bb",
+    play-cancel: "\e6bc",
+    thumb-up: "\e6bd",
+    thumb-down: "\e6be",
+    open-ai: "\e6bf",
+);
+
+@each $name, $value in $sd-icon-font {
+    .icon-#{$name}:before {
+        content: $value;
+    }
+
+    .icon-#{$name} {
+        @if $name == descending {
+            transform: rotate(180deg);
+        }
+
+        @if $name == dots-vertical {
+            transform: rotate(90deg);
+        }
+
+        &.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--1\.5x {
+            --icon-base-size: 24px
+        }
+
+        &.scale--2x {
+            --icon-base-size: 32px
+        }
+
+        &.scale--3x {
+            --icon-base-size: 48px
+        }
+
+        &.scale--4x {
+            --icon-base-size: 64px
+        }
+    }
+}
+
+:export {
+    icon: map.keys($sd-icon-font);
+}
+
+// Combining 2 icons
+.icn-mix {
+    position: relative;
+    display: inline-flex !important;
+    font-size: $icon-base-size;
+    height: $icon-base-size;
+
+    .icn-mix__icn {
+        opacity: 0.6;
+    }
+
+    .icn-mix__sub-icn {
+        position:absolute;
+        font-size: 1.1rem;
+        box-sizing: content-box;
+        line-height: 100%;
+        color: colors.$purple;
+        inset-inline-end: -0.4rem;
+        inset-block-end: -0.6rem;
+        height: 1em;
+        width: 1em;
+        background-color: var(--sd-item__main-Bg) !important;
+        border-radius: dimensions.$border-radius__base--full;
+        padding: 1px;
+        z-index: 1;
+        opacity: 1 !important;
+    }
+}
+
+.icn-mix--2x {
+    font-size: $icon-base-size *2;
+    height: $icon-base-size *2;
+
+    .icn-mix__icn {
+        opacity: 0.6;
+        width: $icon-base-size *2;
+        height: $icon-base-size *2;
+        line-height: $icon-base-size *2;
+        font-size: $icon-base-size *2;
+    }
+
+    .icn-mix__sub-icn {
+        font-size: 1.6rem;
+        inset-inline-end: -0.6rem;
+        inset-block-end: -0.3rem;
+    }
+}
+
+.double-size-icn {
+    display: inline-block;
+    height: 3.2rem;
+    width: 3.2rem;
+
+    [class^="icon-"],
+    [class*=" icon-"] {
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 32px;
+    }
+}
+
+.double-size-icn--light {
+    [class^="icon-"],
+    [class*=" icon-"] {
+        opacity: 0.5;
+    }
+}
+
+.subnav {
+    .icn-mix__sub-icn {
+        background-color: colors.$subnav-background !important;
+    }
+}
+
+.subnav--darker {
+    .icn-mix__sub-icn {
+        background-color: colors.$subnav-background-darker !important;
+    }
+}
+
+.subnav--dark-blue-grey {
+    .icn-mix__sub-icn {
+        background-color: colors.$subnav-background-dark-blue-grey !important;
+        color: color.scale(colors.$purple, $lightness: 50%);
+    }
+
+    .icn-mix__icn {
+        color: inherit;
+        opacity: 1;
+    }
+}
+
+.side-panel__top-tools {
+    .icn-mix__sub-icn {
+        background-color: #f0f0f0;
+    }
+}
+
+.side-panel__top-tools--dark-blue-grey {
+    .icn-mix__sub-icn {
+        background-color: colors.$subnav-background-dark-blue-grey;
+        color: color.scale(colors.$purple, $lightness: 50%);
+    }
+
+    .icn-mix__icn {
+        color: inherit;
+        opacity: 1;
+    }
+}

package/app/styles/_icon-labels.scss

@@ -0,0 +1,140 @@
+@use "sass:color";
+@use "variables/colors";
+@use "variables/dimensions";
+
+/// Icon labels
+
+/// Default background color for icon labels.
+$label-icon-background: transparent !default;
+$label-icon-background-translucent: hsla(0, 0%, 48%, 0.16);
+
+/// Default text color for icon labels.
+$label-icon-color: var(--color-label-text);
+
+/// Alternate text color for icon labels.
+$label-icon-color-alt: colors.$white !default;
+
+/// Coloring classes. A map of classes to output in the CSS.
+$label-icon-palette: colors.$sd-basic-palette;
+
+/// Default padding inside labels.
+$label-icon-padding: 0.6rem !default;
+
+$label-height--default: 2.4rem;
+$label-height--large: 3.2rem;
+$label-height--small: 1.6rem;
+$icon-size--large: 2rem;
+$icon-size--small: 1.2rem;
+
+/// Generates base styles for a icon label.
+@mixin label-icon {
+    display: inline-flex;
+    padding: 0;
+    padding-inline-end: $label-icon-padding;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    font-size: 13px;
+    white-space: nowrap;
+    cursor: default;
+    line-height: 1;
+
+    [class^="icon-"], & [class*=" icon-"] {
+        color: $label-icon-color;
+        margin-inline-end: .4rem;
+        opacity: 1 !important;
+    }
+    
+}
+
+@mixin label-icon-translucent {
+    font-size: 12px;
+    height: $label-height--default;
+    border-radius: dimensions.$border-radius__base--full;
+    padding-inline: 1.2rem;
+    gap: 4px;
+
+    [class^="icon-"], & [class*=" icon-"] {
+        margin-inline-end: .2rem;
+        margin-inline-start: -4px;
+        line-height: 1;
+    }
+}
+
+
+.label-icon {
+    @include label-icon;
+    background: $label-icon-background;
+    color: $label-icon-color;
+
+    @each $name, $color in $label-icon-palette {
+        &.label-icon--#{$name} {
+            color: $color;
+
+            [class^="icon-"], & [class*=" icon-"] {
+                color: $color !important;
+            }
+        }
+    }
+
+    &.label-icon--translucent {
+        @include label-icon-translucent;
+        background-color: $label-icon-background-translucent;
+
+        @each $name, $color in $label-icon-palette {
+            &.label-icon--#{$name} {
+                background-color: color.scale($color, $alpha: -88%);
+            }
+        }
+
+        &.label-icon--large {
+            [class^="icon-"], & [class*=" icon-"] {
+                margin-inline-start: -4px;
+                height: $icon-size--large;
+                width: $icon-size--large;
+                font-size: $icon-size--large;
+                line-height: 1;
+            }
+        }
+
+        &.label-icon--small {
+            [class^="icon-"], & [class*=" icon-"] {
+                margin-inline-start: -3px;
+                height: $icon-size--small;
+                width: $icon-size--small;
+                font-size: $icon-size--small;
+                line-height: 1;
+            }
+        }
+    }
+
+    &.label-icon--large {
+        height: dimensions.$sd-base-increment * 4;
+        padding: 0 dimensions.$sd-base-increment * 2;
+        font-size: 1.4rem;
+        font-weight: 500;
+        line-height: inherit;
+    }
+
+    &.label-icon--small{
+        height: dimensions.$sd-base-increment * 2;
+        padding: 0 dimensions.$sd-base-increment * 1;
+        font-size: 1rem;
+        font-weight: 600;
+        line-height: inherit;
+        letter-spacing: 0.06em;
+        gap: 2px;
+
+        .label-icon--inner-label {
+            font-weight: 400;
+            letter-spacing: 0.06em;
+        }
+    }
+
+    .label-icon--inner-label {
+        font-weight: 300;
+        text-transform: uppercase;
+        line-height: inherit;
+    }
+}