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

package/app/styles/_labels.scss

@@ -0,0 +1,184 @@
+@use "variables/colors";
+@use "variables/dimensions";
+
+
+$font-size__label--default: 0.9rem;
+$font-size__label--large: 1.2rem;
+
+/// Base styles for a label.
+@mixin label {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: dimensions.$padding-x__label--default;
+    vertical-align: middle;
+    border-radius: var(--b-radius--full);
+    text-transform: uppercase;
+    line-height: dimensions.$height__label--default;
+    height: dimensions.$height__label--default;
+    letter-spacing: 0.125em;
+    font-size: $font-size__label--default;
+    white-space: nowrap;
+    border: 1px solid transparent;
+    font-weight: 500;
+    color: var(--sd-lbl-fg);
+    background-color: var(--sd-lbl-bg);
+
+    &--large {
+        padding-block-start: dimensions.$padding-y__label--large;
+        padding-block-end: dimensions.$padding-y__label--large;
+        padding-inline: dimensions.$padding-x__label--large;
+        font-size: $font-size__label--large;
+        height: dimensions.$height__label--large;
+        line-height: dimensions.$height__label--large;
+    }
+}
+
+
+.label {
+    @include label;
+    --sd-lbl-bg: var(--buoyant-grey-600);
+    --sd-lbl-fg: var(--color-text-ondark);
+    &.label--success {
+        --sd-lbl-bg: var(--color-success-default);
+    }
+    &.label--warning {
+        --sd-lbl-bg: var(--color-warning-default);
+    }
+    &.label--alert {
+        --sd-lbl-bg: var(--color-alert-default);
+    }
+    &.label--highlight {
+        --sd-lbl-bg: var(--color-highlight-default);
+    }
+    &.label--primary {
+        --sd-lbl-bg: var(--color-primary-default);
+    }
+    &.label--info {
+        --sd-lbl-bg: var(--color-info-default);
+    }
+
+    &.label--hollow {
+        --sd-lbl-border: var(--color-text-subdued);
+        border: 1px solid var(--sd-lbl-border);
+        background-color: transparent !important;
+        --sd-lbl-fg: var(--color-text-muted);
+
+        &.label--success {
+            --sd-lbl-fg: var(--color-success-text);
+            --sd-lbl-border: var(--color-success-default);
+        }
+        &.label--warning {
+            --sd-lbl-fg: var(--color-warning-text);
+            --sd-lbl-border: var(--color-warning-default);
+        }
+        &.label--alert {
+            --sd-lbl-fg: var(--color-alert-text);
+            --sd-lbl-border: var(--color-alert-default);
+        }
+        &.label--highlight {
+            --sd-lbl-fg: var(--color-highlight-text);
+            --sd-lbl-border: var(--color-highlight-default);
+        }
+        &.label--primary {
+            --sd-lbl-fg: var(--color-primary-text);
+            --sd-lbl-border: var(--color-primary-default);
+        }
+        &.label--info {
+            --sd-lbl-fg: var(--color-info-text);
+            --sd-lbl-border: var(--color-info-default);
+        }
+    }
+
+    &.label--translucent {
+        --sd-lbl-bg: var(--buoyant-grey-400-a24);
+        --sd-lbl-fg: var(--color-text-muted);
+        &.label--success {
+            --sd-lbl-fg: var(--color-success-text);
+            --sd-lbl-bg: var(--color-success-translucent);
+        }
+        &.label--warning {
+            --sd-lbl-fg: var(--color-warning-text);
+            --sd-lbl-bg: var(--color-warning-translucent);
+        }
+        &.label--alert {
+            --sd-lbl-fg: var(--color-alert-text);
+            --sd-lbl-bg: var(--color-alert-translucent);
+        }
+        &.label--highlight {
+            --sd-lbl-fg: var(--color-highlight-text);
+            --sd-lbl-bg: var(--color-highlight-translucent);
+        }
+        &.label--primary {
+            --sd-lbl-fg: var(--color-primary-text);
+            --sd-lbl-bg: var(--color-primary-translucent);
+        }
+        &.label--info {
+            --sd-lbl-fg: var(--color-info-text);
+            --sd-lbl-bg: var(--color-info-translucent);
+        }
+    }
+}
+
+.label--annotation {
+    background-color: colors.$annotation-color;
+    color: colors.$grayMedium;
+}
+
+.label--comment {
+    background-color: colors.$comment-color;
+    color: colors.$grayMedium;
+}
+
+.label--no-transform {
+    text-transform: none;
+    letter-spacing: 0.04em;
+}
+
+// Link label
+a.label {
+    position: relative;
+    text-decoration: none;
+    cursor: pointer;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 0.8rem;
+    padding-inline-end: 1.8rem;
+    outline-color: transparent;
+    outline-offset: 1px;
+    transition: outline 0.12s ease;
+
+    &::before {
+        display: inline-block;
+        font-family: 'sd_icons';
+        content: '\e6b0';
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0.3rem;
+        width: 1.6rem;
+        height: 1.6rem;
+        font-size: 1.6rem;
+        font-family: 'sd_icons';
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+    }
+
+    &:hover, &:focus {
+        outline-offset: 1px;
+        outline: 1px solid var(--color-primary-default);
+    }
+}
+
+.label.label--hollow.label--darkBlue2 {
+    border: 1px solid var(--sd-navy-color);
+    color: var(--sd-navy-color);
+}
+
+.label.label--darkBlue2 {
+    background: var(--sd-navy-color);
+}

package/app/styles/_loaders.scss

@@ -0,0 +1,29 @@
+.sd-loading-overlay {
+    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: var(--b-radius--medium);
+}
+
+.sd-loading-overlay--plain {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--sd-colour-overlay-actioning);
+    pointer-events: none;
+}

package/app/styles/_master-desk.scss

@@ -0,0 +1,323 @@
+@use "sass:math";
+@use "variables/colors";
+@use "variables/dimensions";
+
+$board-header-border-color: var(--color-kanban-border);
+
+.sd-board {
+    display: grid;
+    grid-template-rows: auto 1fr;
+}
+
+.sd-board__header {
+    padding-block-end: var(--space--0-5);
+    grid-row: 1/2;
+    position: relative;
+    min-height: 2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-block-end: 4px solid $board-header-border-color;
+}
+
+.sd-board__header--clickable {
+    transition: border-color ease-in-out .2s;
+    cursor: pointer;
+
+    &:hover {
+       border-bottom-color: colors.$sd-colour-interactive;
+    }
+}
+
+.sd-board__header-title {
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    letter-spacing: .08em;
+    font-weight: 500;
+    flex-grow: 1;
+    color: var(--color-text);
+}
+
+.sd-board__content {
+    grid-row: 2/3;
+}
+
+.sd-board__content-block {
+    box-shadow: var(--sd-shadow--z2);
+    border-radius: dimensions.$border-radius__base--x-small;
+    background-color: var(--sd-item__main-Bg);
+    display: flex;
+    flex-direction: column;
+}
+
+.sd-board__content-block--clickable {
+    transition: box-shadow ease-in-out .2s;
+    cursor: pointer;
+
+    &:hover {
+       box-shadow: var(--sd-shadow--z3);
+       outline: 1px solid var(--sd-colour-interactive--alpha-50);
+    }
+}
+
+.sd-board__list {
+    display: flex;
+    flex-direction: column;
+}
+
+.sd-board__list-item {
+    padding-inline: var(--space--1-5);
+    padding-block: var(--space--1);
+    border-block-end: 1px solid var(--sd-colour-line--light);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &:last-child {
+        border-block-end: none;
+    }
+}
+
+.sd-board__list-item-title {
+    flex-grow: 1;
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    color: var(--color-text-muted);
+
+    &.sd-board__list-item-title--to-do {
+        color: var(--color-assignment-to-do);
+    }
+
+    &.sd-board__list-item-title--progress {
+        color: var(--color-assignment-progress);
+    }
+
+    &.sd-board__list-item-title--completed {
+        color: var(--color-assignment-completed);
+    }
+
+    &.sd-board__list-item-title--to-do,
+    &.sd-board__list-item-title--progress,
+    &.sd-board__list-item-title--completed {
+        font-weight: 500;
+    }
+}
+
+.sd-board__list-item-badge {
+    margin-inline-end: var(--space--0-5);
+}
+
+.sd-board__item-count--large {
+    margin-inline-end: var(--space--1);
+    color: var(--color-text-muted);
+    font-size: 3.6rem;
+    font-weight: 300;
+    line-height: 4rem;
+}
+
+.sd-board__count-label {
+    font-size: 1.1rem;
+    line-height: 1.4;
+    text-transform: uppercase;
+    font-weight: 400;
+    color: var(--sd-colour-bg--10);
+    max-width: 10rem;
+
+    strong {
+        font-weight: 500;
+        color: var(--sd-colour-bg--07);
+        font-size: 1.3rem;
+    }
+}
+
+.sd-board__count-label--l {
+    max-width: 14rem;
+}
+
+.sd-board__doughnut-chart {
+    position: relative;
+    height: 4rem;
+    width: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin-inline-start: auto;
+    margin-inline-end: - math.div(dimensions.$sd-base-increment, 2);
+}
+
+.sd-board__doughnut-chart-number {
+    position: absolute;
+    height: 2.4rem;
+    width: 2.4rem;
+    font-size: 1.1rem;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    font-weight: 600;
+    text-align: center;
+}
+
+.sd-inset-search {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    background-color: var(--color-inset-search-bg);
+    border-radius: 3px;
+    transition: all 0.2s ease-out;
+    height: 4rem;
+    border: 1px solid var(--sd-colour-line--medium);
+    color: inherit;
+    box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.12);
+
+    &:hover {
+        border-color: var(--sd-colour-line--strong);
+        box-shadow: inset 0 1px 3px 0 hsla(0, 0%, 0%, 0.18);
+    }
+
+    &:focus-within {
+        border-color: var(--sd-colour-interactive);
+        box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
+    }
+
+    &::before {
+        content: "\e618";
+        z-index: 1;
+        pointer-events: none;
+        position: absolute;
+        inset-block-start: 1.2rem;
+        inset-inline-start: 0.8rem;
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        font-size: 16px;
+        font-family: 'sd_icons';
+        opacity: 0.4;
+    }
+}
+
+.sd-inset-search__input,
+input.sd-inset-search__input {
+    flex-grow: 1;
+    flex-shrink: 1;
+    font-size: 1.4rem;
+    padding: 0;
+    color: inherit;
+    align-self: auto;
+    background-color: transparent !important;
+    border: 0;
+    box-shadow: none !important;
+    padding: 0 1rem 0 3rem;
+    height: auto;
+    color: inherit;
+
+    &::-ms-clear {
+        display: none;
+    }
+
+    &:focus {
+        box-shadow: unset !important;
+    }
+
+    &::placeholder {
+        opacity: 0.8;
+        font-weight: 300;
+    }
+
+}
+
+.sd-inset-search__cancel {
+    height: 1.6rem;
+    width: 1.6rem;
+    align-self: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin: 0 1.2rem 0 0;
+    padding: 0;
+    opacity: 0.35;
+    transition: opacity 0.2s ease-out;
+
+    i {
+        color: inherit;
+    }
+
+    &:hover {
+        opacity: 0.75;
+    }
+
+    &:active {
+        opacity: 1;
+    }
+}
+
+.sd-board__subheader {
+    padding-block-end: var(--space--0-5);
+    position: relative;
+    min-height: 2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.sd-board__subheader--clickable {
+    transition: border-color ease-in-out .2s;
+    cursor: pointer;
+
+    &:hover {
+       border-bottom-color: colors.$sd-colour-interactive;
+    }
+}
+
+.sd-board__subheader-title {
+    text-transform: uppercase;
+    font-size: 1.1rem;
+    letter-spacing: .08em;
+    font-weight: 500;
+    flex-grow: 1;
+    color: var(--color-text);
+    opacity: 0.75;
+}
+
+.sd-list-item-group + .sd-board__subheader {
+    margin-block-start: var(--space--2);
+}
+
+.sd-kanban-list {
+    .sd-board {
+        flex: 1 1 0;
+        margin: 0 1.2rem;
+        min-width: 24rem;
+    }
+
+    .sd-board__content {
+        padding: 0.6rem 0.3rem 0.6rem 0.3rem;
+        overflow-y: auto;
+    }
+}
+
+.user-items--locked {
+    color: #c4170b;
+
+    i {
+        color: #c4170b;
+        font-size: 1.2rem;
+        width: 1.2rem;
+        height: 1.2rem;
+        opacity: 1 !important;
+    }
+}
+
+.user-items--assigned {
+    color: #009688;
+
+    i {
+        color: #009688;
+        font-size: 1.4rem;
+        width: 1.4rem;
+        height: 1.4rem;
+        opacity: 1 !important;
+    }
+}

package/app/styles/_mixins.scss

@@ -0,0 +1,164 @@
+@use "sass:math";
+@use "variables";
+@use "variables/colors";
+@use "variables/dimensions";
+
+// Re-export variables for global availability when this file is imported
+@forward "variables";
+@forward "variables/colors";
+@forward "variables/dimensions";
+
+@mixin clearfix {
+    *zoom: 1;
+
+    &:before,
+        &:after {
+        display: table;
+        content: "";
+    }
+
+    &:after {
+        clear: both;
+    }
+}
+
+// Border radius
+@mixin border-radius($radius) {
+    border-radius: $radius;
+}
+
+@mixin box-shadow-both($shadow1 , $shadow2) {
+    box-shadow: $shadow1, $shadow2;
+}
+
+// Text overflow ellipsis
+@mixin text-overflow() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+// Font weight
+@mixin text-light() {
+    font-weight: 300;
+}
+
+@mixin text-normal() {
+    font-weight: 400;
+}
+
+@mixin text-semibold() {
+    font-weight: 500;
+}
+
+@mixin text-bold() {
+    font-weight: 700;
+}
+
+@mixin text-extrabold() {
+    font-weight: 800;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+    box-sizing: $boxmodel;
+}
+
+@mixin border-box() {
+    @include box-sizing(border-box);
+}
+
+// Opacity
+@mixin opacity($opacity: 100) {
+    opacity: math.div($opacity, 100);
+    filter: "alpha(opacity=#{$opacity})";
+}
+
+// Box shadow
+@mixin box-shadow($top, $left, $blur, $spread, $color, $inset: false) {
+    @if $inset {
+        -webkit-box-shadow:inset $top $left $blur $spread $color;
+        -moz-box-shadow:inset $top $left $blur $spread $color;
+        box-shadow:inset $top $left $blur $spread $color;
+    } @else {
+        -webkit-box-shadow: $top $left $blur $spread $color;
+        -moz-box-shadow: $top $left $blur $spread $color;
+        box-shadow: $top $left $blur $spread $color;
+    }
+}
+
+// Transition -- example: @include transition(padding, 1s, ease-in-out);
+@mixin transition($transition-property, $transition-time, $method) {
+	-webkit-transition: $transition-property $transition-time $method;
+	-moz-transition: $transition-property $transition-time $method;
+	-ms-transition: $transition-property $transition-time $method;
+	-o-transition: $transition-property $transition-time $method;
+	transition: $transition-property $transition-time $method;
+}
+
+@mixin appearance-reset() {
+   -webkit-appearance: none;
+   -moz-appearance: none;
+   appearance: none;
+}
+
+@mixin sliding-toolbar {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    z-index: 3;
+    padding: 0 dimensions.$sd-base-increment * 2;
+    color: colors.$sd-colour-text__base;
+    animation: dropOut2 .3s cubic-bezier(.695,.105,.285,1.275) 1;
+    background-color: var(--sd-colour-bg__sliding-toolbar);
+    box-shadow: var(--sd-shadow__sliding-toolbar);
+    gap: dimensions.$sd-base-increment;
+    height: dimensions.$nav-height;
+
+    &--right {
+        text-align: end;
+        justify-content: flex-end;
+    }
+
+    .sliding-toolbar__inner {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        gap: dimensions.$sd-base-increment;
+
+        &--right {
+            text-align: end;
+        }
+    }
+
+    .sliding-toolbar__info-text {
+        font-weight: 400;
+        opacity: 0.75;
+        font-size: 1.4rem;
+    }
+}
+
+.sliding-toolbar {
+    @include sliding-toolbar();
+
+    &--static {
+        position: static;
+        animation: none;
+    }
+}
+
+// User select
+// For selecting text on the page
+@mixin user-select($select) {
+    -webkit-user-select: $select;
+    -moz-user-select: $select;
+    -o-user-select: $select;
+    user-select: $select;
+    -webkit-touch-callout: $select;
+    -khtml-user-select: $select;
+    -ms-user-select: $select;
+}