superdesk-ui-framework 6.1.0-dev1 → 7.0.0-dev-hg0

package/app/styles/_icon-font.scss

@@ -1,488 +0,0 @@
-@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

@@ -1,140 +0,0 @@
-@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;
-    }
-}