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

package/app/styles/_tables.scss

@@ -0,0 +1,150 @@
+// TABLES : tables.scss
+
+$sd-tableBgColor: var(--sd-item__main-Bg);
+$sd-tableBorderColor: var(--sd-colour-line--medium);
+
+.table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0px;
+    border-block-start: 1px solid $sd-tableBorderColor;
+    border-block-end: 1px solid $sd-tableBorderColor;
+
+    th, td {
+        padding: 1.2rem 0.8rem;
+        text-align: start;
+        vertical-align: top;
+        border-block-end: 1px solid $sd-tableBorderColor;
+        font-weight: 500;
+    }
+
+    tr:last-child {
+        td {
+            border-block-end: none;
+        }
+    }
+
+    th {
+        font-weight: 600;
+        border-block-end: 2px solid $sd-tableBorderColor;
+    }
+
+    // Bottom align for column headings
+    thead th {
+        vertical-align: bottom;
+    }
+}
+
+.table-inside { // separate class in order to avoid putting a class directly on editor3 content
+    table {
+        @extend .table;
+    }
+}
+
+.sd-table--shadowed {
+    background-color: $sd-tableBgColor;
+    box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
+    border: none;
+}
+
+.sd-table {
+    td {
+        vertical-align: middle;
+    }
+    
+    th {
+        vertical-align: top;
+    }
+}
+
+.sd-table--action-hover {
+    td,
+    .sd-display-table__cell,
+    .sd-flex-table__row:not(.sd-flex-table--head) .sd-flex-table__cell {
+        .icn-btn {
+            visibility: hidden;
+        }
+    }
+
+    tr:hover td,
+    .sd-display-table__row:hover .sd-display-table__cell,
+    .sd-flex-table__row:not(.sd-flex-table--head):hover .sd-flex-table__cell {
+        .icn-btn {
+            visibility: visible;
+        }
+    }
+}
+
+.sd-table-two-rows {
+    padding: 0.8rem;
+    vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+
+    span + span {
+        margin-inline-start: .4rem;
+    }
+}
+
+// Div table
+.sd-display-table {
+    display: table;
+    width: 100%;
+}
+
+.sd-display-table__head {
+    display: table-row-group;
+
+    .sd-display-table__cell {
+        font-weight: 600;
+        border-block-end: 2px solid var(--sd-colour-line--light);
+    }
+}
+
+.sd-display-table__body {
+    display: table-row-group;
+}
+
+.sd-display-table__row {
+    display: table-row;
+}
+
+.sd-display-table__cell {
+    display: table-cell;
+    padding: 1.2rem 0.8rem;
+    border-block-end: 1px solid var(--sd-colour-line--light);
+    font-weight: 500;
+    text-align: start;
+
+    &.sd-table-two-rows {
+        padding: 0.8rem;
+    }
+}
+
+// Flex table
+.sd-flex-table {
+    display: flex;
+    flex-direction: column;
+}
+
+.sd-flex-table__row {
+    display: flex;
+    flex-direction: row;
+}
+
+.sd-flex-table__cell {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    padding: 1.2rem 0.8rem;
+    border-block-end: 1px solid var(--sd-colour-line--light);
+    font-weight: 500;
+    text-align: start;
+    min-width: 120px;
+}
+
+.sd-flex-table--head .sd-flex-table__cell {
+    font-weight: 600;
+    border-block-end: 2px solid var(--sd-colour-line--light);
+}

package/app/styles/_tabs-vertical.scss

@@ -0,0 +1,58 @@
+// VERTICAL TABS
+
+.nav-tabs-vertical {
+    width: 3rem;
+    border-inline-end: 1px solid var(--sd-colour-line--medium);
+    transition: all .2s ease-out .3s; 
+    opacity: 1;
+}
+
+.nav-tabs-vertical__list {
+    width: 3rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.nav-tabs-vertical__tab {
+    display: inline-block;
+    width: 3rem;
+    line-height: 1rem;
+}
+
+.nav-tabs-vertical__tab--active {
+    .nav-tabs-vertical__link {
+        color: var(--color-text);                  
+    }
+}
+
+.nav-tabs-vertical__link {
+    display: inline-block;
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    white-space: nowrap;
+    margin: 10px 0;
+    padding: 0;
+    -webkit-transform: translateX(19px) rotate(90deg);
+    transform: translateX(20px) rotate(90deg);
+    transform-origin: 0 0;    
+
+    &:hover {
+        color: var(--color-text);
+    }
+
+    &:after {
+        content: "";
+        float: inline-start;
+        margin-block-start: 100%;
+    }
+}
+
+.nav-tabs-vertical--closed {
+    width: 0;
+    border: none;
+    opacity: 0;
+    transition: all .01s ease-out;
+}

package/app/styles/_tabs.scss

@@ -0,0 +1,232 @@
+@use "sass:math";
+@use "mixins";
+@use "variables/colors";
+@use "variables/dimensions";
+
+// TABS
+
+// Variables
+$nav-tabs-padding: 0.8rem;
+$nav-tabs-font-size: 1.4rem !default;
+$nav-tabs-font-size-small: 1.2rem;
+$nav-tabs-font-size-big: 1.6rem;
+
+$nav-tab-link-color: colors.$sd-text-light; // default text color
+$nav-tab-active-link-color: colors.$sd-text; // active state text color
+$nav-tab-link-border-color: var(--sd-colour-line--strong); // hover state, border bottom color
+$nav-tab-active-link-border-color: colors.$sd-colour-interactive;  // active state border bottom color
+
+// Mixins
+@mixin nav-tabs-base {
+    height: dimensions.$nav-height;
+    display: flex;
+    flex-shrink: 0;
+    padding-inline: 1rem 0;
+    box-shadow: 0 1px 0 0 var(--color-border-line--light);
+    gap: dimensions.$sd-base-increment;
+}
+
+@mixin nav-tab-link(
+    $link-color: $nav-tab-link-color,
+    $border-bottom-hover-color: $nav-tab-link-border-color
+) {
+    @include mixins.text-overflow();
+    margin: 0;
+    padding: 0;
+    padding-inline: $nav-tabs-padding;
+    height: dimensions.$nav-height;
+    line-height: 30px;
+    font-size: $nav-tabs-font-size;
+    color: $link-color;
+    background: none;
+    border:0;
+    border-block-end: 3px solid transparent;
+    text-decoration: none;
+
+    &:hover {
+        border-bottom-color: $border-bottom-hover-color;
+        background: none;
+        text-decoration: none;
+    }
+}
+
+@mixin nav-tab-link-active(
+    $active-link-color: colors.$sd-text,
+    $border-bottom-color: $nav-tab-active-link-border-color
+) {
+    background: none;
+    cursor: default;
+    border-bottom-color: $border-bottom-color;
+    color: $active-link-color;
+}
+
+// NEW
+@mixin nav-tabs-tab(
+    $border-bottom-hover-color: $nav-tab-link-border-color
+) {
+    @include mixins.text-overflow();
+    margin: 0;
+    padding: 0;
+    padding-inline: $nav-tabs-padding;
+    height: dimensions.$nav-height;
+    align-items: center;
+    justify-content: center;
+    font-size: $nav-tabs-font-size;
+    color: colors.$sd-text-light;
+    background: none;
+    border:0;
+    border-block-end: 3px solid transparent;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
+
+    span {
+        line-height: 1;
+        display: inline-block;
+        margin-block-start: 3px;
+    }
+
+    &:hover {
+        border-bottom-color: $border-bottom-hover-color;
+        background: none;
+        text-decoration: none;
+    }
+}
+
+@mixin nav-tabs-tab-active(
+    $border-bottom-color: $nav-tab-active-link-border-color
+) {
+    background: none;
+    cursor: default;
+    border-bottom-color: $border-bottom-color;
+    color: colors.$sd-text;
+
+    span {
+        opacity: 1;
+    }
+}
+
+.nav-tabs {
+    @include nav-tabs-base();
+}
+
+// single tab
+.nav-tabs__tab {
+    margin-block-end: -1px;
+    @include mixins.text-overflow();
+    display: flex;
+    flex-shrink: 1;
+}
+
+// active state
+.nav-tabs__tab--active,
+.nav-tabs__tab--active:hover {
+    flex-shrink: 0;
+
+    .nav-tabs__link {
+        @include nav-tab-link-active();
+    }
+}
+
+.nav-tabs__pane {
+    .subnav {
+        margin-block-start: 1px;
+    }
+}
+
+.nav-tabs__pane--padding {
+    padding: 2rem;
+}
+
+// tab link
+.nav-tabs__link {
+    @include nav-tab-link();
+}
+
+// Smaller nav tabs
+.nav-tabs--small {
+    padding: 0 .4rem;
+
+    .nav-tabs__link {
+        font-size: $nav-tabs-font-size-small;
+        margin: 0 .8rem;
+    }
+}
+
+// Bigger nav tabs
+.nav-tabs--big, .nav-tabs--large {
+    .nav-tabs__link {
+        font-size: $nav-tabs-font-size-big;
+    }
+
+}
+
+// Nav tabs content
+.nav-tabs__content {
+    padding: 2rem;
+    overflow: auto;
+}
+
+.nav-tabs__content--small {
+    padding: 1.2rem;
+}
+
+.sd-nav-tabs {
+    @include nav-tabs-base();
+    flex-grow: 1;
+
+    // Smaller nav tabs
+    &.sd-nav-tabs--small {
+        padding: 0 .4rem;
+        gap: math.div(dimensions.$sd-base-increment, 2);
+
+        .sd-nav-tabs__tab {
+            font-size: $nav-tabs-font-size-small;
+            letter-spacing: 0.025em;
+            margin: 0;
+        }
+    }
+
+    // Bigger nav tabs
+    &.sd-nav-tabs--big,
+    &.sd-nav-tabs--large {
+        gap: dimensions.$sd-base-increment * 1.5;
+
+        .sd-nav-tabs__tab {
+            font-size: $nav-tabs-font-size-big;
+        }
+    }
+}
+
+// single tab
+.sd-nav-tabs__tab {
+    @include nav-tabs-tab();
+    display: flex;
+    flex-shrink: 1;
+}
+
+// active state
+.sd-nav-tabs__tab--active,
+.sd-nav-tabs__tab--active:hover {
+    @include nav-tabs-tab-active();
+    flex-shrink: 0;
+}
+
+.sd-nav-tabs__pane {
+    .subnav {
+        margin-block-start: 1px;
+    }
+}
+
+.sd-nav-tabs__pane--padding {
+    padding: 2rem;
+}
+
+// Nav tabs content
+.sd-nav-tabs__content {
+    padding: 2rem;
+    overflow: auto;
+}
+
+.sd-nav-tabs__content--small {
+    padding: 1.2rem;
+}

package/app/styles/_tag-labels.scss

@@ -0,0 +1,210 @@
+@use "variables/colors";
+
+/// Default background color for badges.
+$tag-label-BG-default:      var(--sd-colour__tag-label-Bg--1);
+$tag-label-BG-darker:       var(--sd-colour__tag-label-Bg--2);
+$tag-label-BG-highlight-1:  var(--sd-colour__tag-label-Bg--highlight-1);
+$tag-label-BG-highlight-2:  var(--sd-colour__tag-label-Bg--highlight-2);
+$tag-label-BG-inverse:      var(--sd-colour__tag-label-Bg--inverse);
+$tag-label-Txt-inverse:     var(--sd-colour__tag-label-Txt--inverse);
+
+$tag-bg-colors: (
+    default: $tag-label-BG-default,
+    darker: $tag-label-BG-darker,
+    highlight1: $tag-label-BG-highlight-1,
+    highlight2: $tag-label-BG-highlight-2,
+);
+/// Coloring classes. A map of classes to output in the CSS.
+$tag-label-palette: $tag-bg-colors !default;
+
+:root {
+    --tag-label-height: calc(3 * var(--base-increment));
+    --tag-label-height-small: calc(2.25 * var(--base-increment));
+    --tag-label-padding: 1em 1em;
+    --tag-label-padding-small: 1em;
+
+    --tag-label-font-size: var(--text-size-small);
+    --tag-label-font-size-small: 1.1rem;    
+
+    --tag-label-minwidth: 1.8em;
+    --tag-label-radius: var(--b-radius--full);
+    --tag-label-lineheight: 1;
+}
+
+/// Generates the base styles for a badge.
+@mixin tag-label {
+    display: inline-flex;
+    align-items: center;
+    min-width: var(--tag-label-minwidth);
+    padding: 0;
+    padding-inline: var(--tag-label-padding);
+    border-radius: var(--tag-label-radius);
+    font-size: var(--tag-label-font-size);
+    line-height: var(--tag-label-lineheight);
+    position: relative;
+    text-align: center;
+    font-weight: 400;
+    transition: background-color .2s ease-out, opacity .1s ease-out;
+    height: var(--tag-label-height);
+    color: var(--color-text);
+}
+
+.tag-label {
+    @include tag-label;
+    background: var(--sd-colour__tag-label-Bg--1);
+    @each $name, $color in $tag-label-palette {
+        &.tag-label--#{$name} {
+            background: $color;
+        }
+    }
+
+    > span {
+        max-width: 235px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .tag-label__remove {
+        height: 1.8rem;
+        width: 1.8rem;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: inherit;
+        line-height: 1;
+        text-decoration: none;
+        text-align: center;
+        vertical-align: middle;
+        border-radius: var(--b-radius--full);
+        background-color: var(--sd-colour__tag-label-remove-Bg);
+        color: var(--color-text);
+        cursor: pointer;
+        transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
+        margin-inline-start: 0.8rem;
+        margin-inline-end: -1rem;
+
+        [class^="icon-"], [class*=" icon-"] {
+            color: var(--color-text-muted);
+            font-size: 1.6rem;
+            flex-grow: 0;
+            flex-shrink: 0;
+            margin-inline-start: 1px;
+            opacity: 0.4;
+            transition: color .1s ease-out, opacity .1s ease-out;
+        }
+
+        &:hover {
+            text-decoration: none;
+            background-color: var(--sd-colour__tag-label-remove-Bg--hover);
+
+            [class^="icon-"], [class*=" icon-"] {
+                opacity: 0.85;
+            }
+        }
+
+        &:active {
+            background-color: var(--sd-colour__tag-label-remove-Bg--hover);
+
+            [class^="icon-"], [class*=" icon-"] {
+                color: colors.$sd-colour-interactive;
+                opacity: 1;
+            }
+        }
+    }
+
+    &.tag-label--inverse {
+        color: var(--sd-colour__tag-label-Txt--inverse);
+        background-color: var(--sd-colour__tag-label-Bg--inverse);
+    }
+    .tag-label--text-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--gap-0-5);
+    }
+    .tag-label--text-label {
+        opacity: 0.7;
+    }
+    .tag-label--text {
+        pointer-events: none;
+    }
+
+    &.tag-label--small {
+        height: var(--tag-label-height-small);
+        font-size: var(--tag-label-font-size-small);
+        padding-inline: var(--tag-label-padding-small);
+        letter-spacing: 0.025em;
+        .tag-label__remove {
+            height: 1.4rem;
+            width: 1.4rem;
+            margin-inline-start: 0.6rem;
+            margin-inline-end: -0.9rem;
+    
+            [class^="icon-"], [class*=" icon-"] {
+                --icon-size: 1.2rem;
+                font-size: var(--icon-size);
+                height: var(--icon-size);
+                width: var(--icon-size);
+                line-height: 1;
+            }
+        }
+        &.tag-label--square {
+            padding-inline-start: var(--space--1);
+        }
+        &.tag-label--draggable {
+            border-radius: var(--b-radius--small);
+            padding-inline-start: 4px;
+            .drag-handle-wrapper {
+                margin-inline-end: 6px;
+            }
+        }
+    }
+}
+
+.tag-label--square {
+    border-radius: var(--b-radius--small);
+    padding-inline-start: var(--space--1);
+}
+
+.tag-label--draggable {
+    border-radius: var(--b-radius--small);
+    padding-inline-start: 6px;
+    .drag-handle-wrapper {
+        margin-inline-end: 6px;
+    }
+}
+
+// ----------------- SEARCH TAGS -----------------
+// -----------------------------------------------
+
+.sd-search-tags__bar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    padding-inline: var(--space--1);
+    box-shadow: 0 1px 1px 0 hsla(0, 0%, 0%, 0.12);
+    background-color: var(--sd-colour-bg-translucent--10);
+}
+
+.sd-search-tags__tag-list {
+    margin: 0.6rem 0;
+    &:empty {
+        padding: 0 !important;
+    }
+    .sd-search-tags__tag {
+        margin-inline-start: 2px !important;
+        margin-inline-end: 2px !important;
+    }
+}
+
+.sd-search-tags__tag-list:empty {
+    padding: 0 !important;
+}
+
+.sd-search-tags__tag {
+    font-size: 1.3rem;
+}
+