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

package/app/styles/components/_sd-loader.scss

@@ -0,0 +1,39 @@
+// Animated loader
+
+.sd-loader--inline {
+    display: inline-flex;
+    width: 100%;
+    min-width: 90px;
+    height: 100%;
+    min-height: 30px;
+
+    // inlining img/three-dots.svg as base64 encoded URL to have loader ready on application start
+    // otherwise, loader image would only start downloading when it already needs to be shown
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMTIwIDMwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM3YjdiN2IiPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjYwIiBjeT0iMTUiIHI9IjkiIGZpbGwtb3BhY2l0eT0iMC4zIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSI5IiB0bz0iOSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iOTsxNTs5IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjAuNSIgdG89IjAuNSIgYmVnaW49IjBzIiBkdXI9IjAuOHMiIHZhbHVlcz0iLjU7MTsuNSIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMTA1IiBjeT0iMTUiIHI9IjE1Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBmcm9tPSIxNSIgdG89IjE1IiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxNTs5OzE1IiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJmaWxsLW9wYWNpdHkiIGZyb209IjEiIHRvPSIxIiBiZWdpbj0iMHMiIGR1cj0iMC44cyIgdmFsdWVzPSIxOy41OzEiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPjwvY2lyY2xlPjwvc3ZnPg==");
+
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 60px;
+    background-color: var(--sd-colour-overlay-actioning);
+}
+
+.sd-loader {
+    @extend .sd-loader--inline;
+    content: '';
+    display: block;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    z-index: 99999;
+    &.sd-loader--small {
+        background-size: 30px;
+    }
+    &.sd-loader--medium {
+        background-size: 40px;
+    }
+    &.sd-loader--large {
+        background-size: 60px;
+    }
+}

package/app/styles/components/_sd-media-carousel.scss

@@ -0,0 +1,408 @@
+@use "sass:color";
+@use "../buttons";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+.sd-media-carousel {
+    position: relative;
+    align-items: center;
+    flex-direction: row;
+    display: flex;
+}
+
+.sd-media-carousel__dialog {
+    display: flex;
+    max-height: 100%;
+    flex: 0 1 auto;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 900px;
+    width: 100%;
+    position: relative;
+}
+
+.sd-media-carousel__content {
+    background-clip: padding-box;
+    outline: 0;
+    box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 0 1px 1px rgba(0,0,0,.12);
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 100%;
+    position: relative;
+}
+
+.sd-media-carousel__page {
+    width:100%;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex-grow: 0;
+    flex-shrink: 0;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+
+    img, video {
+        max-height: 40em;
+        width: auto !important;
+        margin: 0 auto !important;
+    }
+}
+
+.sd-media-carousel__page-media {
+    width:100%;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex-grow: 0;
+    flex-shrink: 0;
+    align-items: center;
+    background-color: rgba(0,0,0,0.12);
+    color: #fff;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        height: auto;
+        margin: auto;
+    }
+}
+
+@mixin carouselNavButton-style(
+    $background: rgba(255,255,255,0.3),
+    $background-hover: color.scale($background, $alpha: 50%),
+    $background-active: color.scale($background, $alpha: 100%)) 
+{
+    border-radius: dimensions.$border-radius__base--full;
+    cursor: pointer;
+    height: 3.6rem;
+    line-height: 3.6rem;
+    position: absolute;
+    inset-block-start: calc(50% - 6.5rem);
+    width: 3.6rem;
+    box-shadow: 0 0 6px rgba(0,0,0,.25), 0 0 1px 1px rgba(0,0,0,.12);
+    color: colors.$sd-text;
+    transition: buttons.$button-transition;
+    background-color: $background;
+    z-index: 3;
+
+    &: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: inherit;
+        width: 3.6rem;
+        font-size: 2.4rem; 
+    }
+}
+
+.sd-media-carousel__nav-button {
+    @include carouselNavButton-style;
+    transition: opacity 0.2s ease-out;
+    opacity: 0;
+}
+
+.sd-media-carousel__nav-button--next {
+    inset-inline-end: -18px;
+    color: inherit;
+
+    &::after {
+        content: "\e643";
+    }
+}
+
+.sd-media-carousel__nav-button--prev {
+    inset-inline-start: -18px;
+    color: inherit;
+
+    &::after {
+        content: "\e642";
+    }
+}
+
+.sd-media-carousel__nav-button--next-inner {
+    inset-inline-end: 0;
+    color: colors.$sd-text;
+    border-radius: dimensions.$border-radius__base--full 0 0 dimensions.$border-radius__base--full;
+    box-shadow: none;
+
+    &::after {
+        content: "\e643";
+    }
+}
+
+.sd-media-carousel__nav-button--prev-inner {
+    inset-inline-start: 0;
+    color: colors.$sd-text;
+    border-radius: 0 dimensions.$border-radius__base--full dimensions.$border-radius__base--full 0;
+    box-shadow: none;
+
+    &::after {
+        content: "\e642";
+    }
+
+}
+
+.sd-media-carousel__nav-button--next-inner, .sd-media-carousel__nav-button--prev-inner {
+    &::after {
+        opacity: 0.5;
+        transition: opacity 0.2s ease-out;
+    }
+
+    &:hover {
+        &::after {
+            opacity: 1;
+            color: colors.$sd-text;
+        }
+    }
+}
+
+.sd-media-carousel__nav-button--next-inner, .sd-media-carousel__nav-button--prev-inner {
+    &:active {
+        &::after {
+            color: colors.$sd-colour-interactive;
+        }
+    }
+} 
+
+.sd-media-carousel__nav-button--disabled {
+    background-color: rgba(255,255,255,0.4) !important;
+    cursor: default;
+    opacity: 0.2;
+
+    &::after {
+        opacity: 0.75;
+        color: colors.$sd-text !important;
+    }
+}
+
+.sd-media-carousel__dialog {
+    &:hover {
+        .sd-media-carousel__nav-button {
+            opacity: 1;
+        }
+    }
+
+}
+
+.sd-media-carousel__page-indication-bar {
+    inset-block-end: -3.6rem;
+    height: 2.6rem;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+}
+
+.sd-media-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-media-carousel__page-indicator--selected {
+    background-color: rgba(255,255,255,0.8);
+    border-color: rgba(0,0,0,.6);
+}
+
+.sd-media-carousel__thumb-strip {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+    grid-gap: 1rem;
+    margin: 1.4rem 0;
+
+    i {
+        margin: auto;
+        color: inherit;
+    }
+}
+
+.sd-media-carousel__thumb-strip-item {
+    box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 0 1px 1px rgba(0,0,0,.1);
+    border: 1px solid rgba(255,255,255,0.2);
+    background-color: inherit;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    transition: all ease-in 0.2s;
+
+    &:hover {
+        box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 1px 1px rgba(0,0,0,.4);
+        border: 1px solid rgba(255,255,255,0.4);
+    }
+}
+
+.sd-media-carousel__thumb-strip-item--active {
+    outline: 1px solid colors.$sd-colour-interactive;
+    border: 1px solid rgba(255,255,255,0.8);
+    box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 1px 1px rgba(0,0,0,.4);
+    cursor: default;
+
+    .sd-media-carousel__thumb {
+        img {
+            filter: brightness(1) grayscale(100%);
+        }
+    }
+}
+
+.sd-media-carousel__thumb {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-direction: column;
+    align-items: center;
+    height: 6rem;
+    padding: 0;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    background-color: colors.$photoBG-dark;
+
+    img {
+        max-width: 100%;
+        max-height: 6rem;
+        object-fit: cover;
+        object-position: 50% 50%;
+    }
+
+    i {
+        font-size: 3.2rem;
+        line-height: 3.2rem;
+        width: 3.2rem;
+        height: 3.2rem;
+        margin: auto;
+        color: colors.$white;
+        opacity: .35;
+    }
+}
+
+.sd-media-carousel__thumb--add {
+    box-shadow: 0 1px 4px rgba(0,0,0,.25), 0 0 1px 1px rgba(0,0,0,.1);
+    border: 1px solid rgba(255,255,255,0.8);
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    transition: all ease-in 0.2s;
+
+    &:hover {
+        box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 1px 1px rgba(0,0,0,.4);
+        border: 1px solid rgba(255,255,255,1);
+    }
+}
+
+.sd-media-carousel__media-caption, .sd-media-carousel__media-title {
+    color: inherit;
+    position: relative;
+    padding: 1.2rem;
+    width: 100%;
+    font-size: 1.4rem;
+    text-align: start;
+    font-weight: 300;
+    line-height: 140%;
+    border: 1px solid transparent;
+    transition: all ease-in-out 0.2s;
+    background-color: transparent; 
+
+    &[contenteditable="true"],
+    &textarea:not(disabled) {
+        &:hover {
+            border-color: var(--sd-colour-interactive--alpha-60);
+        }
+
+        &:focus {
+            border-color: colors.$sd-colour-interactive;
+            box-shadow: inset 0 -1px 0 0 colors.$sd-colour-interactive;
+        }
+
+        &:empty {
+            &:before {
+                position: absolute;
+                content: attr(sd-placeholder) " ";
+                opacity: 0.55;
+                color: inherit;
+                font-weight: 300;
+                cursor: text;
+            }
+        }  
+    }
+    
+}
+
+textarea.sd-media-carousel__media-caption, 
+textarea.sd-media-carousel__media-title {
+    color: inherit;
+    position: relative;
+    padding: 1.2rem;
+    width: 100%;
+    font-size: 1.4rem;
+    text-align: start;
+    font-weight: 300;
+    line-height: 140%;
+    border: 1px solid transparent;
+    transition: all ease-in-out 0.2s;
+    background-color: transparent; 
+
+    &:not(disabled) {
+        &:hover {
+            border-color: var(--sd-colour-interactive--alpha-60);
+        }
+
+        &:focus {
+            border-color: colors.$sd-colour-interactive;
+            box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-30);
+        }
+
+        &:empty {
+            &:before {
+                position: absolute;
+                content: attr(sd-placeholder) " ";
+                opacity: 0.55;
+                color: inherit;
+                font-weight: 300;
+                cursor: text;
+            }
+        }  
+    }
+}
+
+.sd-media-carousel__media-caption {
+    min-height: 4rem;
+}
+
+.sd-media-carousel__media-title {
+    font-size: 1.5rem;
+    font-weight: 500;
+}
+
+.sd-editor--theme-blue, .sd-editor--theme-dark {
+    .sd-media-carousel__content {
+        outline: 1px solid rgba(255,255,255,.2);
+    }
+}

package/app/styles/components/_sd-notification-panel.scss

@@ -0,0 +1,51 @@
+@use "../variables/dimensions";
+
+.sd-notification-panel {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    position: fixed;
+    color: var(--color-text);
+    inset-block-start: dimensions.$nav-height;
+    inset-block-end: 3.2rem;
+    inset-inline-end: -336px;
+    width: 32rem;
+    background: hsla(218, 13%, 12%, 0.82);
+    backdrop-filter: blur(6px);
+    box-shadow: 0 2px 12px hsla(0, 0%, 0%, 0.32), 0 1px 4px hsla(0, 0%, 0%, 0.32), 0 0 0 1px var(--sd-colour-line--light);
+    z-index: 100;
+    transition: inset-inline-end 0.2s ease;
+    border-radius: var(--b-radius--x-large);
+    margin: 12px 0;
+    
+    &.sd-notification-panel--open {
+        inset-inline-end: 12px;
+    }
+}
+
+.sd-notification-panel__header {
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+    height: dimensions.$nav-height;
+    border-block-end: 1px solid var(--sd-colour-line--light);
+    padding-inline: dimensions.$sd-base-increment * 2 dimensions.$sd-base-increment;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.sd-notification-panel__title {
+    font-size: 16px;
+    color: var(--color-text);
+    font-weight: 300;
+    margin-inline-end: auto;
+    padding-inline-end: dimensions.$sd-base-increment;
+}
+
+.sd-notification-panel__content {
+    grid-row: 2 / 2;
+    grid-column: 1 / 2;
+    overflow-y: auto;
+    position: relative;
+    padding: dimensions.$sd-base-increment * 2;
+}

package/app/styles/components/_sd-pagination.scss

@@ -0,0 +1,51 @@
+@use "../variables/dimensions";
+
+.sd-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap--small);
+}
+
+.sd-pagination--align-start {
+    justify-content: flex-start;
+}
+
+.sd-pagination--align-end {
+    justify-content: flex-end;
+}
+
+.sd-pagination__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: dimensions.$sd-base-increment * 4;
+    min-width: dimensions.$sd-base-increment * 4;
+    border-radius: var(--b-radius--full);
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+        border: 1px solid var(--sd-colour-interactive--alpha-30);
+    }
+
+    &:active {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        border: 1px solid var(--sd-colour-interactive);
+    }
+}
+
+.sd-pagination__item--active {
+    background-color: var(--sd-colour-interactive--alpha-10);
+    color: var(--sd-colour-interactive);
+}
+
+.sd-pagination__item:disabled,
+.sd-pagination__item--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.sd-pagination__item--more {
+    pointer-events: none;
+}