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

package/app/styles/_carousel.scss

@@ -0,0 +1,232 @@
+@use "buttons";
+@use "variables/colors";
+@use "variables/dimensions";
+
+// Modal for onboarding pages. Includes support for slider and pagination.
+
+.sd-carousel {
+    position: fixed;
+    inset-inline-start: 40px;
+    inset-inline-end: 40px;
+    inset-block-start: 40px;
+    inset-block-end: 40px;
+    align-items: center;
+    flex-direction: row;
+    z-index: 1050;
+    display: flex;
+}
+
+.sd-carousel__dialog {
+    display: flex;
+    max-height: 100%;
+    flex: 0 1 auto;
+    margin: 0 auto;
+    max-width: 680px;
+    width: 100%;
+    position: relative;
+}
+
+.sd-carousel__content {
+    background: var(--color-modal-Bg);
+    background-clip: padding-box;
+    outline: 0;
+    box-shadow: 0 4px 24px hsla(0, 0%, 0%, 0.2), 0 10px 28px hsla(0, 0%, 0%, 0.35);
+    border-radius: 1rem 1rem 0.8rem 0.8rem;
+    min-height: 40rem;
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 100%;
+    max-height: 80rem;
+
+}
+
+.sd-carousel__page {
+    width:100%;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+}
+
+.sd-carousel__page-header {
+    width: 100%;
+    height: 200px;
+    border-radius: 0.8rem 0.8rem 0 0;
+    background-color: hsl(217, 28%, 26%);
+    flex-grow: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.sd-carousel__page-header--color-2 {
+    background-color: hsl(268, 22%, 53%);
+}
+
+.sd-carousel__page-header--color-3 {
+    background-color: hsl(184, 42%, 60%);
+}
+
+.sd-carousel__page-header-illustration {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-end: 0;
+    opacity: 0.65;
+}
+
+.sd-carousel__page-heading {
+    font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
+    font-weight: 700;
+    letter-spacing: .03em;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    z-index: 2;
+    color: colors.$white;
+    font-size: 3.2rem;
+    line-height: 1;
+    inset-block-start: calc(50% - 1.6rem);
+}
+
+.sd-carousel__page-text {
+    padding: 3rem;
+    flex-grow: 1;
+    font-size: 1.6rem;
+    line-height: 140%;
+    font-weight: 300;
+
+    p {
+        margin-block-end: 1em;
+        &:last-child, &:only-child {
+            margin-block-end: 0;
+        }
+    }
+
+    h3 {
+        font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
+        font-size: 2rem;
+        margin-block-end: 0.8em;
+        font-weight: 700;
+    }
+}
+
+.sd-carousel__page-footer {
+    text-align: center;
+    padding: 0 3rem 3rem;
+    flex-grow: 0;
+}
+
+@mixin modalNavButton-style(
+    $background: var(--sd-item__main-Bg),
+    $background-hover: var(--sd-item__main-Bg--hover),
+    $background-active: var(--sd-item__main-Bg--alternate)
+) {
+    border-radius: dimensions.$border-radius__base--full;
+    cursor: pointer;
+    height: 5.6rem;
+    line-height: 5.6rem;
+    position: absolute;
+    inset-block-start: calc(50% - 2.8rem);
+    width: 5.6rem;
+    box-shadow: 0 4px 24px rgba(0,0,0,.20), 0 10px 28px rgba(0,0,0,.35);
+    color: colors.$sd-green;
+    transition: buttons.$button-transition;
+    background-color: $background;
+
+    &:hover {
+        background-color: $background-hover;
+    }
+
+    &:active {
+        background-color: $background-active;
+    }
+
+    &::after {
+        content: " ";
+        font-family: 'sd_icons';
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        position: absolute;
+        inset-block-start:0;
+        text-align: center;
+        z-index: 2;
+        color: colors.$sd-green;
+        width: 5.6rem;
+        font-size: 2.4rem; 
+    }
+}
+
+.sd-carousel__nav-button {
+    @include modalNavButton-style;
+}
+
+.sd-carousel__nav-button--next {
+    inset-inline-end: -88px;
+    color: inherit;
+
+    &::after {
+        content: "\e643";
+    }
+}
+
+.sd-carousel__nav-button--prev {
+    inset-inline-start: -88px;
+    color: inherit;
+
+    &::after {
+        content: "\e642";
+    }
+}
+
+.sd-carousel__nav-button--end {
+    inset-inline-end: -88px;
+    background-color: var(--sd-colour-success);
+
+    &::after {
+        content: "\e61d";
+        color: colors.$white;
+    }
+
+    &:hover {
+        background-color: var(--sd-colour-success--hover);
+    }
+
+    &:active {
+        background-color: var(--sd-colour-success--active);
+    }
+}
+
+.sd-carousel__page-indication-bar {
+    inset-block-end: -3.6rem;
+    height: 2.6rem;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+}
+
+.sd-carousel__page-indicator {
+    background-color: rgba(255,255,255,.2);
+    border: 1px solid rgba(0,0,0,.4);
+    border-radius: dimensions.$border-radius__base--full;
+    cursor: pointer;
+    display: inline-block;
+    height: 1.4rem;
+    width: 1.4rem;
+    margin: 0.6rem;
+    transition: buttons.$button-transition;
+}
+
+.sd-carousel__page-indicator--selected {
+    background-color: rgba(255,255,255,0.8);
+    border-color: rgba(0,0,0,.6);
+}
+
+.sd-carousel__backdrop {
+    z-index: 1045;
+    background: rgba(0,0,0,.45);
+    position: fixed;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+}

package/app/styles/_content-divider.scss

@@ -0,0 +1,233 @@
+.sd-content-divider {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--color-text);
+    list-style: none;
+    border-block-end: 0;
+    border-inline-start: 0;
+    border-inline-end: 0;
+    border-block-start: 1px var(--sd-colour-line--medium);
+    border-style: solid;
+
+    &.sd-content-divider--with-text {
+        --text-size: var(--text-size-medium);
+        display: flex;
+        color: var(--color-text);
+        font-weight: 500;
+        font-size: var(--text-size);
+        white-space: nowrap;
+        text-align: center;
+        border-block-start: 0;
+        border-block-end: 0;
+        border-inline-start: 0;
+        border-inline-end: 0;
+        border-top-color: var(--sd-colour-line--medium);
+        border-style: solid;
+
+        &.sd-content-divider--text-x-small {
+            --text-size: 1.1rem;
+            text-transform: uppercase;
+            color: var(--color-text-muted);
+            font-weight: 500;
+            letter-spacing: 0.06em;
+        }
+        
+        &.sd-content-divider--text-small {
+            --text-size: var(--text-size-small);
+        }
+
+        &.sd-content-divider--text-medium {
+            --text-size: var(--text-size-medium);
+        }
+
+        &.sd-content-divider--text-large {
+            --text-size: var(--text-size-large);
+            font-weight: 700;
+            font-family: var(--font-secondary);
+        }
+    }
+
+    &.sd-content-divider--horizontal {
+        --margin-block: 0;
+        display: flex;
+        clear: both;
+        width: 100%;
+        min-width: 100%;
+
+        &.sd-content-divider--margin-x-small {
+            --margin-block: var(--space--1);
+        }
+
+        &.sd-content-divider--margin-small {
+            --margin-block: var(--space--2);
+        }
+
+        &.sd-content-divider--margin-medium {
+            --margin-block: var(--space--3);
+        }
+
+        &.sd-content-divider--margin-large {
+            --margin-block: var(--space--4);
+        }
+
+        &.sd-content-divider--margin-none {
+            --margin-block: 0;
+        }
+
+        margin-block: var(--margin-block);
+    }
+
+    &.sd-content-divider--horizontal.sd-content-divider--with-text {
+
+        &::before, &::after {
+            content: "";
+            position: relative;
+            inset-block-start: 50%;
+            width: 50%;
+            border-block-start: 1px transparent;
+            border-top-color: transparent;
+            border-top-color: inherit;
+            border-block-end: 0;
+            border-inline-start: 0;
+            border-inline-end: 0;
+            transform: translateY(50%);
+            border-style: inherit;
+        }
+
+        &.sd-content-divider--text-left {
+            &::before {
+                width: 5%;
+            }
+            &::after {
+                width: 95%;
+            }
+        }
+
+        &.sd-content-divider--text-right {
+            &::before {
+                width: 95%;
+            }
+            &::after {
+                width: 5%;
+            }
+        }
+
+        &.sd-content-divider--margin-x-small {
+            --margin-block: var(--space--1);
+        }
+
+        &.sd-content-divider--margin-small {
+            --margin-block: var(--space--2);
+        }
+
+        &.sd-content-divider--margin-medium {
+            --margin-block: var(--space--3);
+        }
+
+        &.sd-content-divider--margin-large {
+            --margin-block: var(--space--4);
+        }
+
+        &.sd-content-divider--margin-none {
+            --margin-block: var(--space--0-5);
+        }
+
+        margin-block: var(--margin-block);
+    }
+
+    &.sd-content-divider--vertical {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+        border-block-start: 0;
+        border-inline-start: 1px var(--sd-colour-line--medium);
+        border-style: solid;
+        flex-grow: 0;
+        align-self: stretch;
+        min-height: var(--space--2);
+
+        &.sd-content-divider--with-text {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            border-inline-start: 0;
+
+            .sd-content-divider__inner-text {
+                padding: var(--space--0-5) var(--space--2);
+            }
+
+            &::before, &::after {
+                content: "";
+                background-color: transparent;
+                position: relative;
+                height: 50%;
+                border-inline-start: 1px var(--sd-colour-line--medium);
+                border-inline-end: 0;
+                border-block-end: 0;
+                border-block-start: 0;
+                width: 1px;
+                border-style: solid;
+            }
+
+            &.sd-content-divider--dashed {
+                &::before, &::after {
+                    border-left-style: dashed;
+                }
+                
+            }
+
+            &.sd-content-divider--dotted {
+                &::before, &::after {
+                    border-style: dotted;
+                    border-color: var(--sd-colour-line--strong);
+                }
+            }
+        }
+
+        &.sd-content-divider--margin-x-small {
+            --margin-inline: var(--space--1);
+        }
+
+        &.sd-content-divider--margin-small {
+            --margin-inline: var(--space--2);
+        }
+
+        &.sd-content-divider--margin-medium {
+            --margin-inline: var(--space--3);
+        }
+
+        &.sd-content-divider--margin-large {
+            --margin-inline: var(--space--4);
+        }
+
+        &.sd-content-divider--margin-none {
+            --margin-inline: 0;
+        }
+        
+        margin-inline: var(--margin-inline);
+    }
+
+    &.sd-content-divider--dashed {
+        border-style: dashed;
+    }
+
+    &.sd-content-divider--dotted {
+        border-style: dotted;
+        border-color: var(--sd-colour-line--strong);
+    }
+
+    &.sd-content-divider--no-border {
+        border: 0 !important;
+        
+        &::before, &::after {
+            border: 0 !important;
+        }
+    }
+}
+
+.sd-content-divider__inner-text {
+    display: inline-block;
+    padding: 0 var(--space--1);
+}

package/app/styles/_design-tokens.scss

@@ -0,0 +1,6 @@
+@use 'design-tokens/primitives';
+@use 'design-tokens/brand-colors';
+@use 'design-tokens/semantic-colors';
+@use 'design-tokens/design-tokens-general';
+@use 'design-tokens/new-colors';
+@use 'design-tokens/component-tokens';

package/app/styles/_drag-drop.scss

@@ -0,0 +1,26 @@
+@use "variables/colors";
+@use "variables/dimensions";
+
+.basic-drag-block {
+    border: 2px dashed #cacaca;
+    background-color: var(--sd-colour-bg-translucent--10);
+    position: relative;
+    padding: 1.2rem;
+    color: colors.$grayText;
+    text-align: center;
+    border-radius: dimensions.$border-radius__base--x-small;
+
+    i {
+        opacity: 0.4;
+        vertical-align: bottom;
+        margin: -4px 4px -2px 0;
+    }
+
+    a {
+        display: inline-block;
+    }
+    
+    .basic-drag-block__text {
+        display: inline-block;
+    }
+}

package/app/styles/_drag-handle.scss

@@ -0,0 +1,48 @@
+
+.drag-handle-wrapper {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease;
+    outline: none;
+    color: var(--color-text);
+    background-color: transparent;
+    .drag-handle-dots {
+        transition: all 0.1s ease;
+        opacity: 0.55;
+    }
+    &:hover {
+        cursor: grab;
+        .drag-handle-dots {
+            opacity: 0.85;
+        }
+    }
+    &:active {
+        cursor: grabbing;
+        .drag-handle-dots {
+            opacity: 1;
+        }
+    }
+    &.drag-handle-wrapper--boxed {
+        padding: var(--drag-handle-boxed-padding);
+        background-color: var(--drag-handle-boxed-color-bg-normal);
+        border-radius: var(--drag-handle-boxed-radius);
+        &:hover {
+            background-color: var(--drag-handle-boxed-color-bg-hover);
+        }
+        &:active {
+            background-color: var(--drag-handle-boxed-color-bg-active);
+            color: white;
+        }
+    }
+}
+
+.drag-handle-dots {
+    mask-image: url(../img/OneDot.svg);
+    mask-repeat: repeat;
+    width: var(--handle-width);
+    height: var(--handle-height);
+    background-color: currentColor;
+    margin-block: auto;
+}
+

package/app/styles/_empty-states.scss

@@ -0,0 +1,81 @@
+.content-state--empty {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.content-state--empty-container,
+.content-state__empty-container {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.content-state__empty-container--absolute {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+}
+
+.content-state__empty-info {
+    padding-inline: var(--space--2);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 16px auto 32px;
+    flex-grow: 1;
+}
+
+.content-state__heading {
+    margin-block-end: var(--space--1);
+    font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
+    font-size: 1.8rem;
+    line-height: 1.4;
+    color: inherit;
+    text-align: center;
+    font-weight: 900;
+    opacity: 0.75;
+    max-width: 30ch;
+    margin: 0 auto;
+}
+
+.content-state__description {
+    text-align: center;
+    color: inherit;
+    font-size: 1.5rem;
+    font-weight: 400;
+    line-height: 1.5;
+    max-width: 48ch;
+    opacity: 0.65;
+    margin: 0 auto;
+}
+
+.content-state__image {
+    padding-inline: var(--space--1);
+    margin-block-end: var(--space--2);
+    display: block;
+    height: auto;
+    padding: 0;
+    width: 100%;
+
+    img {
+        max-width: 100%;
+        width: 100%;
+        height: auto;
+    }
+
+    &.content-state__image--small {
+        max-width: 24rem;
+    }
+
+    &.content-state__image--large {
+        max-width: 48rem;
+    }
+}

package/app/styles/_expand-button.scss

@@ -0,0 +1,31 @@
+.expand-button {
+    --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
+    --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
+    --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    height: 3.2rem;
+    transition: all 0.2s ease;
+    outline: none;
+    padding-inline: var(--space--0-5);
+    background-color: var(--sd-btn-bg);
+    border-radius: 0 var(--b-radius--medium) var(--b-radius--medium) 0;
+    opacity: 0.75;
+    color: var(--color-text);
+    [class^="icon-"], [class*=" icon-"] {
+        transition: transform 0.2s ease;
+        color: currentColor;
+    }
+    &:hover {
+        padding-inline: var(--space--1);
+    }
+    &:active {
+        opacity: 1;
+    }
+    &.expand-button--expanded {
+        [class^="icon-"], [class*=" icon-"] {
+            transform: rotate(180deg);
+        }
+    }
+}