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

package/app/styles/primereact/_pr-datepicker.scss

@@ -0,0 +1,288 @@
+@use "../buttons";
+@use "../variables/colors";
+@use "../variables/dimensions";
+@use "pr-general";
+
+.p-datepicker {
+    @include pr-general.pr-dropdown-panel-base;
+    padding: 12px;
+    margin-block-start: 1px;
+
+    .p-datepicker-title {
+        text-transform: uppercase;
+        font-weight: bold;
+        line-height: 1;
+        margin: 0 auto;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .sd-datepicker__navigator-wrapper {
+            .tags-input,
+            .tags-input__tags {
+                border: none;
+                background: none;
+                padding: 0;
+                height: auto;
+                min-height: auto;
+
+                &:after {
+                    display: none;
+                }
+            }
+
+            transition:
+                all 0.2s ease-out,
+                color 0.1s ease-out;
+        }
+
+        .sd-datepicker__navigator-value {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            gap: dimensions.$sd-base-increment * 0.5;
+            font-size: 1.3rem;
+
+            &.sd-datepicker__navigator-month {
+                text-transform: uppercase;
+                font-weight: bold;
+            }
+
+            &.sd-datepicker__navigator-year {
+                font-weight: 400;
+                color: var(--color-text-light);
+            }
+        }
+    }
+
+    .p-datepicker-header {
+        position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        padding: .8em 4px;
+        min-height: 32px;
+        margin-block-end: 8px;
+
+        .p-datepicker-prev,
+        .p-datepicker-next {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--b-radius--full);
+            height: dimensions.$sd-base-increment * 4;
+            width: dimensions.$sd-base-increment * 4;
+            transition: all 0.2s ease-out, color 0.1s ease-out;
+
+            &:hover {
+                background-color: hsla(214, 13%, 55%, 0.2);
+            }
+
+            &:active {
+                background-color: hsla(214, 13%, 55%, 0.3);
+                color: var(--sd-colour-interactive);
+            }
+
+            &:focus-visible {
+                background-color: hsla(214, 13%, 55%, 0.2);
+                box-shadow: buttons.$icn-button-focus-box-shadow;
+                outline: none;
+
+                [class^="icon-"], [class*=" icon-"] {
+                    opacity: 1;
+                }
+            }
+
+        }
+
+        .datepicker-header-toolbar {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-block-end: 16px;
+            gap: dimensions.$sd-base-increment;
+
+            button {
+                flex: 1 1;
+            }
+        }
+    }
+
+    table {
+        border: none;
+    }
+}
+
+// display month and year on separate lines
+.p-datepicker-month,
+.p-datepicker-year {
+    display: block;
+    text-align: center;
+}
+
+.p-datepicker-year {
+    font-weight: 400;
+    margin-block-start: 4px;
+    color: var(--color-text-muted);
+}
+
+.p-datepicker {
+    td, th {
+        border: 0;
+        padding: 0
+    }
+
+    &.p-component {
+        display: block !important;
+    }
+}
+
+// add background when hovering a selectable date
+.p-datepicker table td > span {
+    &:not(.p-highlight):not(.p-disabled) {
+        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);
+        }
+
+        &:active {
+            background-color: var(--sd-colour-interactive--alpha-20);
+        }
+    }
+}
+.p-datepicker table td > span {
+    &:not(.p-disabled) {
+        &:focus-visible {
+            outline: 2px solid var(--sd-colour-interactive--alpha-40);
+        }
+    }
+}
+
+// styles for a day box
+.p-datepicker table td > span {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: dimensions.$border-radius__base--x-small;
+    font-weight: normal;
+    margin-inline-start: 4px;
+    margin-inline-end: 4px;
+    transition: dimensions.$sd-transition__menu-item;
+}
+
+.p-datepicker table thead th > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 24px;
+    text-align: center;
+    font-weight: normal;
+    margin-inline-start: 4px;
+    margin-inline-end: 4px;
+}
+
+// selected date style
+.p-datepicker .p-highlight {
+    background-color: colors.$sd-colour-interactive;
+    color: colors.$white;
+}
+
+// calendar icon button
+.p-datepicker-trigger {
+    @extend .p-inputtext;
+    font-size: 1.4em;
+    cursor: pointer;
+
+    .p-button-icon-left {
+        color: #7F7F7F;
+    }
+
+    &:not(.p-disabled) .p-button-icon-left:hover {
+        color: colors.$sd-colour-interactive;
+    }
+}
+
+.p-calendar {
+    @include pr-general.pr-input-item-base;
+
+    .p-inputtext {
+        color: var(--color-text);
+        height: dimensions.$height-input--default;
+        background-color: transparent;
+        border: none;
+        font-size: 1.4rem;
+        padding: 0.2rem 0.8rem 0;
+        width: 100%;
+    }
+    &.sd-input--disabled:hover {
+        opacity: 0.5;
+        cursor: not-allowed;
+        .p-calendar {
+            .p-calendar-icon {
+                pointer-events: none;
+            }
+            border-block-end: 1px dotted var(--color-input-border);
+            background-color: var(--color-input-bg);
+        }
+    }
+    &.sd-input__input {
+        padding-inline: 0;
+    }
+}
+
+.p-calendar-w-btn {
+    width: 116px;
+
+    .p-inputtext {
+        width: calc(100% - 24px);
+    }
+
+    .p-datepicker-trigger {
+        width: 2.4rem;
+        height: 2.4rem;
+        color: inherit;
+        margin: 0 4px 0 0;
+
+        [class^="icon-"],
+        [class*=" icon-"] {
+            color: var(--color-text);
+            margin-block-start: -2px;
+            opacity: 0.75;
+        }
+
+        &:hover {
+            [class^="icon-"],
+            [class*=" icon-"] {
+                opacity: 0.99;
+            }
+        }
+
+    }
+}
+
+.p-datepicker-calendar {
+    margin-block-end: 8px;
+}
+
+.p-datepicker-today > span {
+    background-color: var(--sd-colour-interactive--alpha-20);
+}
+
+.sd-input__input-container {
+    .p-calendar {
+        display: flex;
+        &.p-calendar-w-btn {
+            min-width: 116px;
+            width: auto;
+        }
+    }
+}

package/app/styles/primereact/_pr-dialog.scss

@@ -0,0 +1,399 @@
+@use "../buttons";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+.p-dialog-mask.p-component-overlay {
+    background-color: hsla(214, 13%, 16%, 0.5) !important;
+    backdrop-filter: blur(1px);
+    -webkit-backdrop-filter: blur(1px);
+    z-index: 1000;
+}
+
+.p-dialog-mask {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    background-color: transparent;
+    transition-property: background-color;
+}
+
+.p-dialog-visible {
+    display: flex;
+}
+
+.p-dialog-mask.p-component-overlay {
+    pointer-events: auto;
+}
+
+.p-dialog {
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    max-height: 90%;
+    transform: scale(1);
+
+    overflow: hidden;
+}
+
+.p-dialog-content {
+    overflow-y: auto;
+}
+
+.p-dialog-flex {
+    display: flex;
+}
+
+.p-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    height: dimensions.$height__modal-header;
+}
+
+.p-dialog-footer {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: dimensions.$height__modal-footer;
+}
+
+.p-dialog .p-dialog-header-icons {
+    display: flex;
+    align-items: center;
+}
+
+.p-dialog .p-dialog-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Fluid */
+.p-fluid .p-dialog-footer .p-button {
+    width: auto;
+}
+
+/* Animation */
+
+/* Center */
+.p-dialog-enter {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+.p-dialog-enter-active {
+    opacity: 1;
+    transform: scale(1);
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-dialog-enter-done {
+    transform: none;
+}
+
+.p-dialog-exit-active {
+    opacity: 0;
+    transform: scale(0.7);
+    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+/* Top, Bottom, Left, Right, Top* and Bottom* */
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-top-left .p-dialog,
+.p-dialog-top-right .p-dialog,
+.p-dialog-bottom-left .p-dialog,
+.p-dialog-bottom-right .p-dialog {
+    margin: .75em;
+    transition: all .3s ease-out;
+}
+
+.p-dialog-top .p-dialog-enter,
+.p-dialog-top .p-dialog-exit-active {
+    transform: translate3d(0px, -100%, 0px);
+}
+
+.p-dialog-bottom .p-dialog-enter,
+.p-dialog-bottom .p-dialog-exit-active {
+    transform: translate3d(0px, 100%, 0px);
+}
+
+.p-dialog-left .p-dialog-enter,
+.p-dialog-left .p-dialog-exit-active,
+.p-dialog-top-left .p-dialog-enter,
+.p-dialog-top-left .p-dialog-exit-active,
+.p-dialog-bottom-left .p-dialog-enter,
+.p-dialog-bottom-left .p-dialog-exit-active {
+    transform: translate3d(-100%, 0px, 0px);
+}
+
+.p-dialog-right .p-dialog-enter,
+.p-dialog-right .p-dialog-exit-active,
+.p-dialog-top-right .p-dialog-enter,
+.p-dialog-top-right .p-dialog-exit-active,
+.p-dialog-bottom-right .p-dialog-enter,
+.p-dialog-bottom-right .p-dialog-exit-active {
+    transform: translate3d(100%, 0px, 0px);
+}
+
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-top-left .p-dialog-enter-active,
+.p-dialog-bottom-left .p-dialog-enter-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-top-right .p-dialog-enter-active,
+.p-dialog-bottom-right .p-dialog-enter-active {
+    transform: translate3d(0px, 0px, 0px);
+}
+
+/* Maximize */
+.p-dialog-maximized {
+    -webkit-transition: none;
+    transition: none;
+    transform: none;
+    width: 100vw !important;
+    max-height: 100%;
+    height: 100%;
+}
+
+.p-dialog-maximized .p-dialog-content {
+    flex-grow: 1;
+    width: 100%;
+}
+
+/* Position */
+.p-dialog-left {
+    justify-content: flex-start;
+}
+
+.p-dialog-right {
+    justify-content: flex-end;
+}
+
+.p-dialog-top {
+    align-items: flex-start;
+}
+
+.p-dialog-top-left {
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.p-dialog-top-right {
+    justify-content: flex-end;
+    align-items: flex-start;
+}
+
+.p-dialog-bottom {
+    align-items: flex-end;
+}
+
+.p-dialog-bottom-left {
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+
+.p-dialog-bottom-right {
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+
+.p-dialog {
+    border-radius: dimensions.$border-radius__base--large;
+    box-shadow: var(--sd-shadow__modal);
+    border: 0 none;
+    background-color: var(--color-modal-Bg);
+}
+
+.p-dialog .p-dialog-header {
+    border-block-end: 0 none;
+    background: transparent;
+    position: relative;
+    z-index: 1012;
+    padding: 0.8rem 0.8rem 0.8rem 1.6rem;
+    border-top-right-radius: dimensions.$border-radius__base--large;
+    border-top-left-radius: dimensions.$border-radius__base--large;
+    box-shadow: 0 1px 0 var(--sd-colour-line--x-light);
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+    padding-inline-end: var(--space--2);
+    font-size: 1.8rem;
+    font-weight: 300;
+    line-height: 27px;
+    opacity: 0.8;
+}
+
+.p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2.4rem;
+    height: 2.4rem;
+    border: 0 none;
+    background: transparent;
+    border-radius: dimensions.$border-radius__base--full;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-inline-end: 0;
+}
+
+.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    border-color: transparent;
+
+}
+
+.p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: buttons.$icn-button-focus-box-shadow;
+}
+
+.p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-inline-end: 0;
+}
+
+.p-dialog .p-dialog-content {
+    font-size: 1.4rem;
+
+    p {
+        line-height: 1.5;
+    }
+}
+
+.p-dialog .p-dialog-footer {
+    border-block-start: 0 none;
+    background-color: transparent;
+    padding: 0.8rem 1.6rem;
+    text-align: end;
+    border-bottom-right-radius: dimensions.$border-radius__base--full;
+    border-bottom-left-radius: dimensions.$border-radius__base--full;
+    box-shadow: 0 -1px 0 var(--sd-colour-line--x-light);
+    position: relative;
+    z-index: 2;
+}
+
+.p-dialog .p-dialog-footer > button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+}
+
+.p-dialog-header-close {
+    .p-dialog-header-close-icon {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        font-size: 16px;
+        font-family: 'sd_icons';
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        color: var(--color-icon-default);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        opacity: 0.6;
+        transition: color .1s ease-out, opacity .1s ease-out;
+
+        &::before {
+            content: "\e647";
+        }
+    }
+
+    &:hover {
+        .p-dialog-header-close-icon {
+            opacity: 1;
+        }
+    }
+
+    &:active {
+        .p-dialog-header-close-icon {
+            color: colors.$sd-colour-interactive !important;
+            opacity: 1;
+        }
+    }
+}
+
+.p-dialog-content {
+    padding: var(--dialog-content-padding);
+    background-color: var(--dialog-content-bg);
+    .sd-main-content-grid {
+        height: 100% !important;
+    }
+}
+
+// size
+.p-dialog-content--small {
+    width: var(--width__modal--small);
+}
+
+.p-dialog-content--medium {
+    width: var(--width__modal--medium);
+}
+
+.p-dialog-content--large {
+    width: var(--width__modal--large);
+    min-height: 20rem;
+}
+
+.p-dialog-content--x-large {
+    width: var(--width__modal--x-large);
+    //min-height: 30rem;
+    height: calc(100vh - 200px);
+}
+
+// padding
+.p-dialog-content--0-padding,
+.p-dialog-content--padding-none  {
+    --dialog-content-padding: 0 !important;
+}
+
+.p-dialog-content--s-padding,
+.p-dialog-content--padding-small {
+    --dialog-content-padding: var(--space--2);
+}
+
+.p-dialog-content--m-padding,
+.p-dialog-content--padding-medium {
+    --dialog-content-padding: var(--space--3);
+}
+
+.p-dialog-content--l-padding,
+.p-dialog-content--padding-large, {
+    --dialog-content-padding: var(--space--4);
+}
+
+.p-dialog-content-bg--default {
+    --dialog-content-bg: var(--color-modal-Bg) !important;
+}
+
+.p-dialog-content-bg--dark {
+    --dialog-content-bg: var(--sd-colour-panel-bg--200) !important;
+}
+
+.p-dialog-content-bg--medium {
+    --dialog-content-bg: var(--sd-colour-panel-bg--100) !important;
+}
+
+.modal__sticky-header {
+    position: sticky;
+    inset-block-start: calc(-1 * var(--dialog-content-padding));
+    background-color: var(--dialog-content-bg);
+    padding-inline: var(--dialog-content-padding);
+    padding-block-start: var(--dialog-content-padding);
+    padding-block-end: var(--space--1);
+    z-index: 2;
+    margin: calc(-1 * var(--dialog-content-padding));
+    margin-block-end: 0;
+}