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

package/app/styles/_alerts.scss

@@ -0,0 +1,392 @@
+@use "variables/colors";
+@use "variables/dimensions";
+
+/// @group sd-alert
+
+/// Default padding inside sd-alerts.
+$sd-alert-lineheight-large: 1;
+
+$sd-alert-padding-x: 2rem 3rem !default;
+$sd-alert-padding-y: 1.8rem !default;
+$sd-alert-padding-x-small: 1.2rem 2.4rem;
+$sd-alert-padding-y-small: 0.7rem;
+
+/// Default radius of sd-alerts.
+$sd-alert-radius: var(--b-radius--medium) !default;
+
+/// Default shadow for sd-alerts.
+$sd-alert-shadow: 0 1px 4px rgba(0,0,0,.2), 0 0 1px rgba(0,0,0,.1);
+$sd-alert-shadow-small: 0 1px 2px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.08);
+
+/// Transition between normal and hidden state
+$sd-alert-transition: font-size ease-out 300ms, padding ease-out 300ms, max-width ease-out 200ms, max-height ease-out 300ms, opacity ease-out 200ms;
+$sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max-width ease-out 100ms, max-height ease-out 80ms, opacity ease-out 160ms;
+
+@mixin sd-alert {
+    max-height: 20rem;
+    max-width: 100%;
+    height:auto;
+    transition: all linear 100ms;
+    display: flex;
+    padding-block-start: $sd-alert-padding-y;
+    padding-block-end: $sd-alert-padding-y;
+    padding-inline: $sd-alert-padding-x;
+    vertical-align: middle;
+    border-radius: $sd-alert-radius;
+    line-height: 1.4em;
+    font-size: 1.4rem;
+    border: 1px solid transparent;
+    font-weight: 400;
+    position: relative;
+    box-shadow: $sd-alert-shadow;
+    background-color: var(--sd-alert-bg);
+    display: flex;
+    gap: dimensions.$sd-base-increment * 2;
+
+    & strong {
+        font-weight: 500;
+    }
+
+    &--hidden {
+        opacity: 0;
+        max-height: 0.1rem;
+        max-width: 10%;
+        padding:0;
+        overflow:hidden;
+        font-size: 0.1rem;
+        transition: $sd-alert-transition;
+    }
+
+    &--small {
+        font-size: 1.3rem;
+        padding-block-start: $sd-alert-padding-y-small;
+        padding-block-end: $sd-alert-padding-y-small;
+        padding-inline: $sd-alert-padding-x-small;
+        box-shadow: $sd-alert-shadow-small;
+        transition: $sd-alert-transition-small;
+        gap: dimensions.$sd-base-increment * 1;
+    }
+
+    &--marg-b12 {
+        margin-block-end: 1.2rem;
+    }
+
+    &--no-margin {
+        margin-block-end: 0;
+    }
+
+    &--margin-none {
+        margin-block-end: 0;
+    }
+
+    &--margin-small {
+        margin-block-end: 1.6rem;
+    }
+
+    &--margin-normal {
+        margin-block-end: 2.4rem;
+    }
+
+    &--margin-large {
+        margin-block-end: 3.2rem;
+    }
+
+    &--banner-style {
+        margin: 0;
+        box-shadow: none !important;
+        border-radius: 0 !important;
+    }
+}
+
+@mixin sd-alert-hollow {
+    border: 1px solid var(--sd-alert-border);
+    background-color: var(--sd-alert-bg);
+    --sd-alert-hs: 214, 13%;
+    --sd-alert-l: var(--sd-alert-hs), 50%;
+    --sd-alert-txt: hsla(var(--sd-alert-l), 1);
+    --sd-alert-bg: hsla(var(--sd-alert-l), 0.05);
+
+    [class^="icon-"], [class*=" icon-"] {
+        color: var(--sd-alert-color);
+    }
+}
+
+
+.sd-alert {
+    @include sd-alert;
+    color: var(--color-text-muted);
+    --sd-alert-bg: var(--sd-colour-alert-bg-neutral);
+
+    p {
+        font-size: 1.4rem;
+        color: inherit;
+        margin-block-end: 1em;
+
+        &:last-child, &:only-child {
+            margin-block-end: 0;
+        }
+    }
+
+    &.sd-alert--hollow {
+        --sd-alert-hs: 214, 13%;
+        --sd-alert-border: var(--sd-colour-line--strong);
+        --sd-alert-color: var(--color-text-muted);
+        @include sd-alert-hollow;
+
+        &.sd-alert--primary {
+            --sd-alert-hs: var(--sd-colour-info-hs);
+            --sd-alert-border: var(--sd-colour-info);
+            --sd-alert-color: var(--sd-colour-info);
+            color: var(--sd-alert-color);
+        }
+        
+        &.sd-alert--success {
+            --sd-alert-hs: var(--sd-colour-success-hs);
+            --sd-alert-border: var(--sd-colour-success);
+            --sd-alert-color: var(--sd-colour-success);
+            color: var(--sd-alert-color);
+        }
+        
+        &.sd-alert--warning {
+            --sd-alert-hs: var(--sd-colour-warning-hs);
+            --sd-alert-border: var(--sd-colour-warning);
+            --sd-alert-color: var(--sd-colour-warning);
+            color: var(--sd-alert-color);
+        }
+    
+        &.sd-alert--alert {
+            --sd-alert-hs: var(--sd-colour-alert-hs);
+            --sd-alert-border: var(--sd-colour-alert);
+            --sd-alert-color: var(--sd-colour-alert);
+            color: var(--sd-alert-color);
+        }
+    
+        &.sd-alert--highlight {
+            --sd-alert-hs: var(--sd-colour-highlight-hs);
+            --sd-alert-border: var(--sd-colour-highlight);
+            --sd-alert-color: var(--sd-colour-highlight);
+            color: var(--sd-alert-color);
+        }
+    
+        &.sd-alert--sd-green {
+            --sd-alert-hs: var(--sd-colour-superdesk-hs);
+            --sd-alert-border: var(--sd-colour-superdesk);
+            --sd-alert-color: var(--sd-colour-superdesk);
+            color: var(--sd-alert-color);
+        }
+    }
+
+    .sd-alert__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 3.2rem;
+        height: 3.2rem;
+
+        [class^="icon-"], [class*=" icon-"] {
+            width: 3.2rem;
+            height: 3.2rem;
+            font-size: 3.2rem;
+            line-height: 1;
+            color: currentColor;
+        }
+    }
+
+    &.sd-alert--small {
+        .sd-alert__icon {
+            margin-block-start: 0px;
+            [class^="icon-"], [class*=" icon-"] {
+                width: 2.4rem;
+                height: 2.4rem;
+                font-size: 2.4rem;
+            }
+        }
+    }
+}
+
+.sd-alert--primary, .sd-alert--info, .sd-alert--success, .sd-alert--warning, .sd-alert--alert, .sd-alert--highlight, .sd-alert--sd-green {
+    color: colors.$white;
+}
+
+.sd-alert--primary, .sd-alert--info {
+    --sd-alert-bg: var(--sd-colour-info);
+}
+
+.sd-alert--success {
+    --sd-alert-bg: var(--sd-colour-success);
+}
+
+.sd-alert--warning {
+    --sd-alert-bg: var(--sd-colour-warning);
+}
+
+.sd-alert--alert {
+    --sd-alert-bg: var(--sd-colour-alert);
+}
+
+.sd-alert--highlight {
+    --sd-alert-bg: var(--sd-colour-highlight);
+}
+
+.sd-alert--sd-green {
+    --sd-alert-bg: var(--sd-colour-superdesk);
+}
+
+.sd-alert__content {
+    display: flex;
+    align-items: center;
+}
+
+.sd-alert__close {
+    position: absolute;
+    inset-block-start: 0.3rem;
+    inset-inline: auto 0.3rem;
+    width: 2.1rem;
+    height: 2.1rem;
+    padding: 0;
+    z-index: 1;
+    opacity: .2;
+    line-height: 2.1rem;
+    color: inherit;
+    border-radius: dimensions.$border-radius__base--full;
+
+    &::after {
+        font-family: sd_icons;
+        font-size: 16px;
+        content: "\e647";
+        width: 16px;
+        height:16px;
+        position: absolute;
+        inset-block-start:0;
+        inset-inline-start: 0.3rem;
+        line-height: inherit;
+        color: inherit;
+        font-style: normal;
+        font-weight: 400;
+        font-variant: normal;
+        text-transform: none;
+        -webkit-font-smoothing: antialiased;
+    }
+
+    &:hover {
+        opacity: .8;
+        background-color: hsla(0, 0%, 100%, 0.3);
+    }
+
+    &:active {
+        opacity: 1;
+        background-color: hsla(0, 0%, 100%, 0.5);
+    }
+}
+
+.sd-alert--small {
+    .sd-alert__close {
+        inset-block-start: 0.4rem;
+    }
+}
+
+.sd-alert__container {
+    position: relative;
+    min-height: 3rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+.sd-alert__info-btn {
+    cursor: pointer;
+    height: 2.2rem; 
+    width: 2.2rem;
+    font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
+    font-weight: 500;
+    font-style: italic;
+    line-height: 2.4rem;
+    font-size: 1.4rem;
+    letter-spacing: 0.1rem;
+    color:white;
+    text-align: center;
+    display: inline-block;
+    border-radius: dimensions.$border-radius__base--full;
+    flex-grow: 0;
+    flex-shrink: 1;
+    transition: all linear 100ms 0.2s, background-color ease-in 200ms;
+    background-color: var(--sd-colour-neutral);
+
+    & [class^="icon-"], & [class*=" icon-"] {
+        color:inherit;
+        margin-block-start: 0.3rem;
+    }
+
+    &:hover {
+        background-color: var(--sd-colour-neutral--hover);
+    }
+}
+
+.sd-alert__info-btn--hidden {
+    opacity: 0;
+    height:1px;
+    width:1px;
+    flex-shrink: 1;
+    transition: all linear 100ms;
+}
+
+.sd-alert__info-btn--primary, .sd-alert__info-btn--info {
+    background-color: var(--sd-colour-info);
+
+    &:hover {
+        background-color: var(--sd-colour-info--hover);
+    }
+}
+
+.sd-alert__info-btn--success {
+    background-color: var(--sd-colour-success);
+
+    &:hover {
+        background-color: var(--sd-colour-success--hover);
+    }
+}
+
+.sd-alert__info-btn--warning {
+    background-color: var(--sd-colour-warning);
+
+    &:hover {
+        background-color: var(--sd-colour-warning--hover);
+    }
+}
+
+.sd-alert__info-btn--alert {
+    background-color: var(--sd-colour-alert);
+    &:hover {
+        background-color: var(--sd-colour-alert--hover);
+    }
+}
+
+.sd-alert__info-btn--highlight {
+    background-color: var(--sd-colour-highlight);
+
+    &:hover {
+        background-color: var(--sd-colour-highlight--hover);
+    }
+}
+
+.sd-alert__info-btn--sd-green {
+    background-color: var(--sd-colour-superdesk);
+    
+    &:hover {
+        background-color: var(--sd-colour-superdesk--hover);
+    }
+}
+
+.sd-alert__container {
+    .sd-alert {
+        flex-grow: 1;
+    }
+}
+
+.side-panel__header {
+    .sd-alert {
+        box-shadow: none !important;
+        border-radius: unset !important;
+        margin-block-end: 0;
+    }
+}

package/app/styles/_animations.scss

@@ -0,0 +1,73 @@
+// Animation, TODO: Refactor
+.fade.ng-hide {
+	opacity: 0;
+}
+
+.fade.ng-hide-remove,
+.fade.ng-hide-add {
+	display: block !important;
+}
+
+.fade.ng-hide-remove {
+	transition: all linear 200ms;
+}
+
+.fade.ng-hide-add {
+	position: absolute;
+	transition: all linear 300ms;
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+
+	50% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes dropOut2 {
+	0% {
+		transform: translateY(-4.8rem);
+	}
+
+	100% {
+		transform: translateY(0);
+	}
+}
+
+.sd-card__thumbnail {
+	transition: all 0.2s ease-in;
+	height: 20rem;
+}
+
+.sd-card__thumbnail.ng-hide {
+	opacity: 0;
+	height: 0.1rem !important;
+}
+
+@keyframes appear {
+	from {
+		display: none;
+		opacity: 0;
+	}
+	to {
+		display: flex;
+		opacity: 1;
+	}
+}
+@keyframes vanish {
+	from {
+		display: flex;
+		opacity: 1;
+	}
+	to {
+		display: none;
+		opacity: 0;
+	}
+}