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

package/app/styles/_thumb-carousel.scss

@@ -0,0 +1,247 @@
+@use "mixins";
+@use "variables/colors";
+@use "variables/dimensions";
+
+:root {
+    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 80%, 0.2);
+    --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.2);
+    --sd-thumb-carousel__colour-bg: hsla(214, 13%, 100%, 1);
+    --sd-thumb-carousel__colour-img-bg: hsla(214, 13%, 12%, 1);
+    --sd-thumb-carousel__colour-txt: hsla(214, 13%, 10%, 1);
+    --sd-thumb-carousel__border-radius: 4px;
+    --sd-thumb-carousel__colour-btn: hsla(214, 13%, 100%, 1);
+    --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 1);
+}
+
+[data-theme="dark-ui"] {
+    --sd-thumb-carousel__shadow-line: hsla(214, 13%, 60%, 0.5);
+    --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.2), 0 1px 4px hsla(0, 0%, 0%, 0.4);
+    --sd-thumb-carousel__colour-bg: hsla(214, 13%, 25%, 1);
+    --sd-thumb-carousel__colour-txt: hsla(214, 13%, 96%, 1);
+    --sd-thumb-carousel__colour-btn: hsla(214, 13%, 60%, 1);
+    --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 0.5);
+}
+
+.sd-thumb-carousel,
+.p-carousel {
+    display: flex;
+    flex-direction: column;
+    color: var(--sd-thumb-carousel__colour-txt);
+    box-shadow: var(--sd-thumb-carousel__shadow);
+    background-color: var(--sd-thumb-carousel__colour-bg);
+    border-radius: var(--sd-thumb-carousel__border-radius);
+    // min-height: 100px;
+    // min-width: 300px;
+    // max-width: 600px;
+    margin-block-end: 16px;
+}
+
+.sd-thumb-carousel__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 2.4rem;
+    padding: 12px 8px 12px 16px;
+
+    time {
+        font-size: 1.2rem;
+        color: var(--sd-thumb-carousel__colour-txt);
+        opacity: 0.75;
+        @include mixins.text-overflow;
+        padding-inline-start: 16px;
+    }
+}
+
+.sd-thumb-carousel__heading {
+    flex-grow: 0;
+    font-size: 1.6rem;
+    font-weight: 600;
+    margin-inline-end: 8px;
+}
+
+.sd-thumb-carousel__header-block--r {
+    margin-inline-start:auto;
+    display: flex;
+    align-items: center;
+
+    & > * + * {
+        margin-inline-start: 8px;
+    }
+}
+
+.sd-thumb-carousel__content,
+.p-carousel-content {
+    display: flex;
+    flex-direction: column;
+    overflow: visible;
+}
+
+.sd-thumb-carousel__container {
+    display: flex;
+    flex-direction: row;
+}
+
+.sd-thumb-carousel__description {
+    padding: var(--space--2);
+    flex-grow: 0;
+    font-size: 1.4rem;
+    line-height: 150%;
+    opacity: 0.75;
+    font-weight: 400;
+    padding-block-start: 2px;
+}
+
+.sd-thumb-carousel__items-content {
+    overflow: hidden;
+    width: 100%;
+}
+
+.sd-thumb-carousel__items-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.sd-thumb-carousel__item {
+    display: flex;
+    flex-direction: column;
+    height: 134px;
+    flex: 1 0 33.333333333333336%;
+    position: relative;
+}
+
+.sd-thumb-carousel__item-inner {
+    margin: 5px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background-color: var(--sd-thumb-carousel__colour-img-bg);
+    box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.12), 0 1px 4px hsla(0, 0%, 0%, 0.20);
+    border-radius: dimensions.$border-radius__base--small;
+    overflow: hidden;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+        height: auto;
+        margin: auto;
+        pointer-events: none;
+    }
+}
+
+.sd-thumb-carousel__indicators {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 8px;
+}
+
+.sd-thumb-carousel__indicator,
+.p-carousel-indicator {
+    margin: 4px;
+
+    > button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 8px;
+        height: 8px;
+        transition: all 0.2s ease;
+        border-radius: dimensions.$border-radius__base--full;
+        opacity: 1;
+        background-color: var(--sd-thumb-carousel__colour-indicator);
+        padding: 0;
+        margin: 0;
+
+        &:hover {
+            opacity: 0.6;
+        }
+    }
+}
+
+.sd-thumb-carousel__indicator--highlight, .sd-thumb-carousel__indicator.p-highlight {
+    > button {
+        width: 16px;
+        background-color: var(--sd-colour-interactive);
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+}
+
+.sd-thumb-carousel__btn--prev, .sd-thumb-carousel__btn--next,
+.p-carousel-prev, .p-carousel-next {
+    @extend .icn-btn !optional;
+    display: flex;
+    align-self: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+    z-index: 2;
+    background-color: var(--sd-thumb-carousel__colour-btn);
+    box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.12), 0 2px 6px hsla(0, 0%, 0%, 0.20);
+    opacity: 0.8;
+    transition: all 0.2 ease !important;
+    color: hsla(214, 13%, 20%, 0.6);
+
+    &:hover {
+        opacity: 1;
+        background-color: var(--sd-thumb-carousel__colour-btn);
+        box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.16), 0 4px 12px hsla(0, 0%, 0%, 0.24);
+        color: hsla(214, 13%, 10%, 1);
+    }
+
+    &:active {
+        opacity: 1;
+        background-color: var(--sd-colour-interactive) !important;
+        box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 2px hsla(0, 0%, 0%, 0.12);
+        color: colors.$white;
+    }
+
+    &:focus {
+        opacity: 1;
+        background-color: var(--sd-thumb-carousel__colour-btn);
+    }
+
+    &.sd-disabled, &.p-disabled {
+        visibility: hidden;
+        pointer-events: none;
+    }
+}
+
+.sd-thumb-carousel__btn--prev, .p-carousel-prev {
+    inset-inline-start: -16px;
+    margin-inline-end: -26px;
+}
+
+.sd-thumb-carousel__btn--next, .p-carousel-next{
+    inset-inline-end: -16px;
+    margin-inline-start: -26px;
+}
+
+.sd-thumb-carousel__cover-image-icon {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: colors.$white;
+    border-radius: dimensions.$border-radius__base--full;
+    color: var(--sd-thumb-carousel__colour-indicator--highlight);
+    position: absolute;
+    inset-block-start: 12px;
+    inset-inline-start: 12px;
+    z-index: 1;
+
+    i {
+        color: var(--sd-thumb-carousel__colour-indicator--highlight) !important;
+        margin-block-start: -2px;
+    }
+}

package/app/styles/_time.scss

@@ -0,0 +1,113 @@
+.time-picker__input {
+    input[type="time"] {
+        -webkit-appearance: none;
+        -moz-appearance: textfield;
+        appearance: textfield;
+        &::-webkit-calendar-picker-indicator {
+            display: none;
+        }
+    }
+    position: relative;
+    &:has(.time-picker__icon-wrapper) {
+        .sd-input__input:not(.p-calendar) {
+            padding-inline-end: var(--space--4);
+        }
+    }
+    .time-picker__icon-wrapper {
+        position: relative;
+        height: 2.4rem;
+        width: 2.4rem;
+        position: absolute;
+        inset-block-start: var(--space--0-5);
+        inset-inline-end: var(--space--0-5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+        pointer-events: none;
+
+        .clear-time-picker {
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+            transition: opacity 0.2s ease;
+            z-index: 2;
+            opacity: 0;
+        }
+    }
+    &:has(.sd-input__input--can-clear) {
+        .icon-time {
+            opacity: 1;
+            transition: opacity 0.2s ease;
+        }
+        .time-picker__icon-wrapper {
+            pointer-events: all;
+        }
+        &:hover {
+            .icon-time {
+                opacity: 0;
+            }
+            .clear-time-picker {
+                opacity: 1;
+            }
+        }
+        &:focus-within {
+            .icon-time {
+                opacity: 0;
+            }
+            .clear-time-picker {
+                opacity: 1;
+            }
+        }
+    }
+}
+.time-picker--date-time { // only for the DateTimePicker component. Disable the clearing of the time input only.
+    .time-picker__input,
+    .time-picker__input:hover,
+    .time-picker__input:focus-within {
+        .time-picker__icon-wrapper {
+            pointer-events: none;
+        }
+        .clear-time-picker {
+            display: none;
+        }
+        .icon-time, {
+            opacity: 1;
+        }
+    }
+}
+
+
+.time-unit {
+    display: flex;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--b-radius--x-small);
+    font-weight: normal;
+    margin-inline-start: var(--gap--x-small);
+    margin-inline-end: var(--gap--x-small);
+    transition: var(--transition__menu-item);
+    transition: all ease 0.2s;
+
+    &:hover {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
+        cursor: pointer;
+    }
+
+    &:active {
+        background-color: var(--sd-colour-interactive--alpha-20);
+
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--sd-colour-interactive--alpha-40);
+    }
+
+    &.time-unit-highlight,
+    &.time-unit-highlight:hover {
+        background-color: var(--sd-colour-interactive);
+        color: var(--color-text-ondark);
+    }
+}

package/app/styles/_toggle-box.scss

@@ -0,0 +1,175 @@
+@use "variables/colors";
+@use "variables/dimensions";
+
+// Toggle box aka collapsible panel
+
+.toggle-box {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    transition: grid-template-rows 0.2s ease;
+    &.hidden {
+        grid-template-rows: auto 0fr auto;
+        transition: grid-template-rows 0.2s ease;
+        .toggle-box__chevron {
+            i {
+                transform: rotate(0);
+            }
+        }
+        .toggle-box__chevron--circle {
+            background-color: var(--sd-colour-btn-bg-neutral);
+            i {
+                color: var(--color-text-muted);
+            }
+        }
+        .toggle-box__content-wraper {
+            transition: all ease-out .5s;
+            overflow: hidden;
+        }
+    }
+
+    .toggle-box__content--animation {
+        animation: fadeIn 0.3s ease-in 0s 1;
+    }
+
+    // Stylings
+    &.toggle-box--circle {
+        .toggle-box__chevron {
+            background-color: var(--sd-colour-btn-bg-neutral);
+
+            i {
+                color: var(--sd-colour-btn-txt-neutral);
+            }
+        }
+    }
+    &.toggle-box--large-title {
+        .toggle-box__header,
+        a.toggle-box__header  {
+            .toggle-box__label {
+                font-size: var(--text-size-medium);
+                color: var(--color-text);
+                text-transform: none;
+                font-weight: 500;
+            }
+            &:hover {
+                .toggle-box__label {
+                    color: var(--sd-colour-interactive);
+                }
+            }
+        }
+    }
+
+    &.toggle-box--marg-b10 {
+        margin-block-end: 1rem;
+    }
+    &.toggle-box--margin-none {
+        margin-block-end: 0;
+    }
+    &.toggle-box--margin-small {
+        margin-block-end: dimensions.$sd-base-increment * 2;
+    }
+    &.toggle-box--margin-normal {
+        margin-block-end: dimensions.$sd-base-increment * 3;
+    }
+    &.toggle-box--margin-large {
+        margin-block-end: dimensions.$sd-base-increment * 4;
+    }
+}
+
+.toggle-box__chevron {
+    height: 2.4rem;
+    width: 2.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: var(--b-radius--full);
+}
+
+.toggle-box__header,
+a.toggle-box__header {
+    grid-row: 1 / 2;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    text-decoration: none !important;
+    align-self: flex-start;
+    .toggle-box__chevron {
+        i {
+            transition: all .3s;
+            transform: rotate(90deg);
+        }
+    }
+
+    .toggle-box__label {
+        font-size: var(--text-size-x-small);
+        padding: 0 var(--space--2) 0 var(--space--1);
+        color: var(--color-text-muted);
+        text-transform: uppercase;
+        transition: color 0.2s ease;
+    }
+
+    .toggle-box__line {
+        flex: 1;
+        height: 1px;
+        margin: auto 0.4rem auto 0;
+        background: var(--sd-colour-line--light);
+    }
+
+    &:hover {
+        .toggle-box__label,
+         {
+            color: var(--sd-colour-interactive);
+            text-decoration: none !important;
+        }
+    }
+
+    &:focus {
+        background: none !important;
+    }
+
+    &:focus-visible {
+        .toggle-box__chevron {
+            box-shadow: 0 0 0 3px colors.$sd-colour--focus-shadow;
+        }
+        .toggle-box__label {
+            color: var(--sd-colour-interactive);
+        }
+    }
+
+    * {
+        text-decoration: none !important;
+    }
+}
+
+.toggle-box__content-wraper {
+    grid-row: 2 / 3;
+    transition: all 0.2s ease;
+    transition-behavior: allow-discrete;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+}
+
+.toggle-box__content {
+    padding-block-start: 1.8rem;
+    flex:1;
+}
+
+// Buttons
+.toggle-box__button {
+    color: colors.$grayLight;
+    cursor: pointer;
+    i {
+        color: colors.$grayLight;
+        margin-inline-end: 0.5rem;
+        vertical-align: text-bottom;
+    }
+    &:hover {
+        text-decoration: none;
+        color: colors.$white;
+        i { color: colors.$white; }
+    }
+}

package/app/styles/_toggle-button.scss

@@ -0,0 +1,46 @@
+.sd-toggle-button {
+    padding-inline: var(--space--1-5);
+    @include text-overflow;
+    line-height: 1;
+    border: 1px solid $checkButtonBorderColor;
+    border-radius: $checkButtonBorderRadius;
+    transition: all 0.2s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: $sd-base-increment * 4;
+    color: var(--color-text);
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 1.2rem;
+    background: transparent;
+    transition: all 0.2s ease-out;
+
+    [class^="icon-"],
+    [class*=" icon-"],
+    .sd-toggle-button__icon {
+        color: currentColor;
+    }
+
+    &:hover {
+        border-color: $checkButtonBorderColorHover;
+        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
+        color: var(--color-text);
+    }
+
+    &.sd-toggle--active {
+        background-color: var(--sd-colour-interactive--active);
+        border-color: var(--sd-colour-interactive--active);
+        border-top-color: var(--sd-colour-interactive--darken-20);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        color: $white;
+        
+        &:hover {
+            color: $white;
+            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive--hover);
+            box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
+        }
+    }
+}