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

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

@@ -0,0 +1,276 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+// Large Searchbar
+// Large searchbar is usualy used inside the 'subnav' component, hence the flex-grow property;
+
+.sd-searchbar {
+    flex-grow: 1;
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    background-color: transparent;
+    transition: all 0.2s ease-out;
+    height: 100%; // adapts to the height of the parent element, usually .subnav.
+    min-height: dimensions.$height-input--default;
+    max-height: dimensions.$subnav-height;
+}
+
+.sd-searchbar--focused {
+    background-color: var(--sd-colour-bg__searchbar);
+    box-shadow:
+        inset 0 0 0 1px var(--sd-colour-interactive--alpha-50),
+        inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
+}
+
+.sd-searchbar--border-r {
+    border-inline-end: 1px solid var(--sd-colour-line--x-light);
+}
+
+.sd-searchbar--border-l {
+    border-inline-start: 1px solid var(--sd-colour-line--x-light);
+}
+
+.sd-searchbar--border-l-r {
+    border-inline-end: 1px solid var(--sd-colour-line--x-light);
+    border-inline-start: 1px solid var(--sd-colour-line--x-light);
+}
+
+.sd-searchbar--border-bottom {
+    border-block-end: 1px solid var(--sd-colour-line--light);
+}
+
+.sd-searchbar--small {
+    height: 3.6rem;
+}
+
+.sd-searchbar--boxed {
+    height: 4rem;
+    border-radius: dimensions.$border-radius__base--medium;
+    border: 1px solid var(--color-border-line--medium);
+    background-color: var(--sd-colour-bg__searchbar);
+    box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.14);
+    transition: box-shadow 0.2s ease-out;
+
+    &:hover {
+        border-color: rgba(123, 123, 123, 0.6);
+    }
+
+    &.sd-searchbar--focused,
+    &:focus-within {
+        transition: box-shadow 0.2s ease-out;
+        border-color: var(--sd-colour-interactive--alpha-70);
+        box-shadow:
+            inset 0 0 0 1px var(--sd-colour-interactive--alpha-50),
+            inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
+    }
+
+    &.sd-searchbar--invalid {
+        border-color: rgba(229, 28, 35, 0.75);
+        box-shadow:
+            inset 0 0 0 1px rgba(229, 28, 35, 0.1),
+            inset 0 0 0 4px rgba(229, 28, 35, 0.1);
+    }
+
+    &.sd-searchbar--disabled {
+        opacity: 0.5;
+        cursor: not-allowed !important;
+
+        .sd-searchbar__input {
+            cursor: not-allowed !important;
+        }
+
+        &:hover {
+            border-color: rgba(123, 123, 123, 0.4);
+        }
+    }
+
+    .dropdown {
+        background-color: var(--sd-colour-bg__searchbar);
+        border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
+        border-inline-end: 1px solid var(--color-border-line--medium);
+        margin-inline-end: 1px;
+        transition: box-shadow 0.2s ease-out;
+        .dropdown__toggle {
+            height: 100%;
+            padding-inline: var(--space--1-5);
+        }
+    }
+    .sd-input {
+        height: 100%;
+        border-inline-end: 1px solid var(--color-border-line--medium);
+        z-index: 1;
+        position: relative;
+        background-color: var(--sd-colour-bg__searchbar);
+        border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
+        transition: box-shadow 0.2s ease-out;
+        .sd-input__input {
+            background-color: transparent;
+            border: none;
+        }
+    }
+    &.sd-searchbar--focused,
+    &:focus-within {
+        .dropdown,
+        .sd-input {
+            border-inline-end-color: var(--sd-colour-interactive--alpha-50);
+            box-shadow:
+                inset 0 0 0 1px var(--sd-colour-interactive--alpha-50),
+                3px 0 0 var(--sd-colour-interactive--alpha-10);
+        }
+    }
+}
+
+.sd-searchbar__input,
+input[type="text"].sd-searchbar__input,
+input[type="search"].sd-searchbar__input {
+    flex-grow: 1;
+    flex-shrink: 1;
+    font-size: 1.4rem;
+    padding: 0;
+    color: var(--color-text);
+    align-self: auto;
+    background-color: transparent;
+    border: 0;
+    box-shadow: none !important;
+    padding-inline-end: 1rem;
+    height: auto;
+
+    &::placeholder {
+        color: var(--color-text-muted);
+        font-weight: 300;
+        letter-spacing: 0.03rem;
+    }
+}
+
+.sd-searchbar__icon {
+    flex-grow: 0;
+    flex-shrink: 1;
+    align-self: auto;
+    width: dimensions.$subnav-height;
+    position: relative;
+    opacity: 0.4;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+        content: "\e618";
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        font-family: "sd_icons";
+        font-size: 16px;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        color: colors.$sd-text;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+.sd-searchbar--boxed {
+    .sd-searchbar__icon {
+        width: 4rem;
+        margin-inline-end: 0;
+    }
+}
+
+.sd-searchbar__search-btn {
+    height: 2.8rem;
+    width: 2.8rem;
+    flex-grow: 0;
+    flex-shrink: 0;
+    align-self: center;
+    margin: 0;
+    margin-inline-end: 0.8rem;
+    padding: 0;
+    opacity: 0.8;
+    transition: all 0.2s ease-out;
+    background-color: var(--sd-colour-interactive--alpha-30);
+    border-radius: var(--b-radius--full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    i {
+        transition: color 0.2s ease-out;
+        color: var(--sd-colour-interactive);
+    }
+
+    &:hover {
+        background-color: var(--sd-colour-interactive--alpha-80);
+        i {
+            color: var(--color-text-ondark);
+        }
+    }
+
+    &:active {
+        background-color: var(--sd-colour-interactive);
+        opacity: 1;
+        i {
+            color: var(--color-text-ondark);
+        }
+    }
+}
+
+.sd-searchbar__search-btn--active {
+    background-color: var(--sd-colour-interactive);
+    opacity: 1;
+
+    i {
+        color: var(--color-text-ondark);
+    }
+}
+
+[dir="rtl"] {
+    .sd-searchbar__search-btn {
+        i.icon-chevron-right-thin {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.sd-searchbar__cancel {
+    height: 1.6rem;
+    width: 1.6rem;
+    align-self: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin: 0;
+    margin-inline-end: 1rem;
+    padding: 0;
+    opacity: 0.35;
+    transition: opacity 0.2s ease-out;
+    color: currentColor;
+
+    i {
+        color: var(--color-text);
+    }
+
+    &:hover {
+        opacity: 0.7;
+    }
+
+    &:active {
+        opacity: 1;
+    }
+}
+.sd-searchbar__message-box {
+    font-size: 1.3rem;
+    line-height: 1.4rem;
+    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+    color: var(--color-text-muted);
+    font-weight: 300;
+    margin: 0.5rem 0;
+    letter-spacing: 0.03em;
+    display: block;
+    margin-block-start: 8px;
+
+    .sd-searchbar__message {
+        color: var(--color-alert-text);
+    }
+}

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

@@ -0,0 +1,226 @@
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+$sd-toast-height: 4rem !default;
+$sd-toast-min-width: 32rem !default;
+$sd-toast-max-width: 56rem !default;
+$sd-toast-margin: 2rem !default;
+
+$sd-toast-position-top: 5.6rem;
+$sd-toast-z-index: 9999;
+
+$sd-toast-colour-bg:   var(--sd-colour-panel-bg--000);
+$sd-toast-colour-text: colors.$sd-text-light;
+$sd-toast-shadow: var(--sd-shadow__toast);
+
+$toast-palette: colors.$sd-basic-palette;
+$sd-toast-position-top: 5.6rem;
+$sd-toast-z-index: 9999;
+
+$toast-sizes: (
+    fixed-s: 32rem,
+    fixed-m: 40rem,
+    fixed-l: 48rem,
+    fixed-xl: 56rem,
+);
+
+.sd-toast__container {
+    display: flex!important;
+    flex-direction: column;
+    align-items: center;
+    position: fixed;
+    inset-inline-end: 0;
+    inset-inline-start: 0;
+    z-index: $sd-toast-z-index;
+    overflow: hidden;
+    padding: 0 20px 20px;
+    pointer-events: none;
+
+    &.sd-toast__container--top {
+        inset-block-start: $sd-toast-position-top;
+        inset-block-end: auto;
+    }
+
+    &.sd-toast__container--top-left {
+        inset-block-start: $sd-toast-position-top;
+        inset-block-end: auto;
+        align-items: flex-start;
+    }
+
+    &.sd-toast__container--top-right {
+        inset-block-start: $sd-toast-position-top;
+        inset-block-end: auto;
+        align-items: flex-end;
+    }
+
+    &.sd-toast__container--bottom {
+        flex-direction: column-reverse;
+        inset-block-start: auto;
+        inset-block-end: 0;
+    }
+
+    &.sd-toast__container--bottom-left {
+        flex-direction: column-reverse;
+        inset-block-start: auto;
+        inset-block-end: 0;
+        align-items: flex-start;
+    }
+
+    &.sd-toast__container--bottom-right {
+        flex-direction: column-reverse;
+        inset-block-start: auto;
+        inset-block-end: 0;
+        align-items: flex-end;
+    }
+}
+
+.sd-toast {
+    padding: var(--space--1-5);
+	display: flex;
+	align-items: flex-start;
+	position: relative!important;
+    margin: 2rem 0 0;
+    border-radius: dimensions.$border-radius__base--medium;
+    overflow: hidden;
+	box-shadow: $sd-toast-shadow;
+	background-color: $sd-toast-colour-bg;
+	min-width: $sd-toast-min-width;
+    max-width: $sd-toast-max-width;
+    pointer-events: all;
+
+    &.sd-toast--appear ~ .sd-toast,
+    &.sd-toast--enter ~ .sd-toast {
+        transform: translateY(-40px);
+    }
+
+    .sd-toast__icon {
+        [class^="icon-"] {
+            color: inherit;
+            display: block;
+            margin: 0.6rem 0.4rem 0.6rem 0.6rem;
+        }
+    }
+
+    &.sd-toast--exit ~ .sd-toast {
+        transform: translateY(0);
+    }
+
+    &.sd-toast--exit-active ~ .sd-toast {
+        transform: translateY(-40px);
+        transition-property: transform;
+        transition-duration: .1s;
+        transition-timing-function: cubic-bezier(.4, 1, .75, .9);
+        transition-delay: 50ms;
+    }
+
+    @each $name, $color in $toast-palette {
+        &.sd-toast--#{$name} {
+            &::before {
+                content: "";
+                width: 4px;
+                height: 100%;
+                position: absolute;
+                inset-block-start: 0px;
+                inset-inline-start: 0px;
+                background-color: $color;
+            }
+
+            .sd-toast__icon {
+                color: $color;
+            }
+        }
+    }
+    @each $name, $size in $toast-sizes {
+        &.sd-toast--#{$name} {
+            width: $size;
+        }
+    }
+}
+
+.sd-toast--appear,
+.sd-toast--enter {
+    transform: translateY(-40px); 
+    height: 0px;  
+}
+
+.sd-toast--appear-active,
+.sd-toast--enter-active {
+    transform: translateY(0);
+    transition-property: transform, height;
+    transition-duration:.3s;
+    transition-timing-function: cubic-bezier(.54, 1.12, .38, 1.11);
+    transition-delay: 0;
+    -webkit-transition-delay: 0;
+}
+
+.sd-toast--exit {
+    opacity: 1;
+    -webkit-filter: blur(0);
+    filter: blur(0);
+}
+
+.sd-toast--exit-active {
+    opacity: 0;
+    filter: blur(10px);
+    transition-property: opacity, filter;
+    transition-duration: .3s;
+    transition-timing-function: cubic-bezier(.4, 1, .75, .9);
+    transition-delay: 0;
+}
+
+.sd-toast__message {
+    flex: 1 1 auto;
+    padding: 0.4rem 1.2rem 0.4rem 1.2rem;
+    font-size: 1.4rem;
+    line-height: 150%;
+    color: $sd-toast-colour-text;
+
+    p + p {
+        margin-block-start: 0.8rem;
+    }
+}
+
+.sd-toast__message-header {
+    display: flex;
+    flex-direction: row;
+    margin-block-end: 0.2rem;
+    color: colors.$sd-text;
+
+    time {
+        font-size: 1.2rem;
+        color: $sd-toast-colour-text;
+        margin-inline-end: 0.2rem;
+    }
+
+    .sd-toast__heading {
+        flex-grow: 1;   
+    }
+}
+
+.sd-toast__heading, h4 {
+    font-size: inherit;
+    font-weight: 600;
+}
+
+.sd-toast__actions {
+    flex: 0 0 auto;
+    opacity: 0.4;
+    margin: -0.2rem -0.4rem 0 0;
+}
+
+.sd-toast__icon {
+    flex: 0 0 auto;
+}
+
+.sd-toast__avatar {
+    flex: 0 0 auto;
+    margin: 0.6rem 0.4rem 0.6rem 0.6rem;
+}
+
+.sd-toast__container--bottom .sd-toast, .sd-toast__container--bottom-left .sd-toast, .sd-toast__container--bottom-right .sd-toast {
+    &.sd-toast--enter:not(.sd-toast--enter-active),
+    &.sd-toast--enter:not(.sd-toast--enter-active) ~ .sd-toast,
+    &.sd-toast--leave-active ~ .sd-toast {
+        transform: translateY($sd-toast-margin + $sd-toast-height);
+    }
+}