superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

package/app/styles/_alerts.scss

@@ -1,49 +1,33 @@
 /// @group sd-alert
 
-/// Default background color for labels.
-$sd-alert-background: scale-color($grayLight, $alpha: -80%) !default;
-
-/// Default text color for sd-alerts.
-$sd-alert-color: inherit !default;
-
-/// Alternate text color for sd-alerts.
-$sd-alert-color-alt: $grayNeutral !default;
-
-/// Coloring classes. A map of classes to output in the CSS.
-$sd-alert-palette: $sd-extended-palette;
-
 /// Default padding inside sd-alerts.
-$sd-alert-padding: 1.8rem 3rem 1.8rem 2rem !default;
-
-$sd-alert-padding-small: 0.8rem 2.4rem 0.8rem 1.2rem;
-
 $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: 4px !default;
+$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);
 
-
-/// Removes background fill for hollow buttons.
-@mixin sd-alert-hollow-style($color: $sd-alert-color-alt) {
-    border: 1px solid $color;
-    // background-color: scale-color($color, $lightness: 95%);
-    background-color: scale-color($color, $alpha: -95%);
-    color: $color;
-}
-
 /// 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;
 
-//$sd-info-btn-hover: scale-color($button-background, $lightness: -85%) !default;
-
-/// Generates base styles for a sd-alert.
 @mixin sd-alert {
-    padding: $sd-alert-padding;
+    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;
@@ -52,47 +36,14 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     font-weight: 400;
     position: relative;
     box-shadow: $sd-alert-shadow;
+    background-color: var(--sd-alert-bg);
+    display: flex;
+    gap: $sd-base-increment * 2;
     & strong {
         font-weight: 500;
     }
-}
-
-
-.sd-alert {
-    @include sd-alert;
-    margin-bottom: 2rem;
-    background: $sd-alert-background;
-    color: $sd-alert-color;
-    max-height: 20rem;
-    max-width: 100%;
-    height:auto;
-    transition: all linear 100ms;
-    display: flex;
-        @each $name, $color in $sd-alert-palette {
-        &.sd-alert--#{$name} {
-            background: $color;
-            color: white;
-        }
-    }
-    &.sd-alert--hollow {
-        @include sd-alert-hollow-style;
-        @each $name, $color in $sd-alert-palette {
-            &.sd-alert--#{$name} {
-                @include sd-alert-hollow-style($color);
-            }
-        }
-    }
-    p {
-        font-size: 1.4rem;
-        color: inherit;
-        margin-bottom: 1em;
-    }
-    & p:last-child,
-    & p:only-child {
-        margin-bottom: 0;
-    }
     &--hidden {
-        opacity:0;
+        opacity: 0;
         max-height: 0.1rem;
         max-width: 10%;
         padding:0;
@@ -102,9 +53,12 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     }
     &--small {
         font-size: 1.3rem;
-        padding: $sd-alert-padding-small;
+        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: $sd-base-increment * 1;
     }
     &--marg-b12 {
         margin-bottom: 1.2rem;
@@ -112,12 +66,158 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     &--no-margin {
         margin-bottom: 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-light);
+    --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;
+        }
+    }
+    &--primary, &--info, &--success, &--warning, &--alert, &--highlight, &--sd-green {
+        color: $white;
+    }
+    &--primary, &--info {
+        --sd-alert-bg: var(--sd-colour-info);
+    }
+    
+    &--success {
+        --sd-alert-bg: var(--sd-colour-success);
+    }
+    
+    &--warning {
+        --sd-alert-bg: var(--sd-colour-warning);
+    }
+    
+    &--alert {
+        --sd-alert-bg: var(--sd-colour-alert);
+    }
+    
+    &--highlight {
+        --sd-alert-bg: var(--sd-colour-highlight);
+    }
+    
+    &--sd-green {
+        --sd-alert-bg: var(--sd-colour-superdesk);
+    }
+    &.sd-alert--hollow {
+        --sd-alert-hs: 214, 13%;
+        --sd-alert-border: var(--sd-colour-line--strong);
+        --sd-alert-color: var(--color-text-light);
+        @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__content {
+    display: flex;
+    align-items: center;
 }
 
 .sd-alert__close {
     position: absolute;
-    top: 0.3rem;
-    right: 0.3rem;
+    inset-block-start: 0.3rem;
+    inset-inline: auto 0.3rem;
     width: 2.1rem;
     height: 2.1rem;
     padding: 0;
@@ -125,7 +225,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     opacity: .2;
     line-height: 2.1rem;
     color: inherit;
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     &::after {
         font-family: sd_icons;
         font-size: 16px;
@@ -145,16 +245,17 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     }
     &:hover {
         opacity: .8;
-        background-color: rgba(255,255,255,.3);
+        background-color: hsla(0, 0%, 100%, 0.3);
     }
     &:active {
         opacity: 1;
-        background-color: rgba(255,255,255,.5);
+        background-color: hsla(0, 0%, 100%, 0.5);
     }
 }
+
 .sd-alert--small {
     .sd-alert__close {
-        top: 0.4rem;
+        inset-block-start: 0.4rem;
     }
 }
 
@@ -166,15 +267,6 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     justify-content: flex-end;
 }
 
-.sd-alert__icon {
-    margin: 0.1rem 1.2rem 0 -0.5rem;
-    flex-shrink: 0;
-}
-.sd-alert--small {
-    .sd-alert__icon {
-        margin-left: 0;
-    }
-}
 .sd-alert__info-btn {
     cursor: pointer;
     height: 2.2rem; 
@@ -188,26 +280,17 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     color:white;
     text-align: center;
     display: inline-block;
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     flex-grow: 0;
     flex-shrink: 1;
-    transition: all linear 100ms 0.2s, background ease-in 200ms;
-    background: $sd-alert-color-alt;
+    transition: all linear 100ms 0.2s, background-color ease-in 200ms;
+    background-color: var(--sd-colour-neutral);
     & [class^="icon-"], & [class*=" icon-"] {
         color:inherit;
         margin-top: 0.3rem;
     }
     &:hover {
-        background: scale-color($sd-alert-color-alt, $lightness: -20%);
-    }
-    @each $name, $color in $sd-alert-palette {
-        &.sd-alert__info-btn--#{$name} {
-            background: $color;
-            color: white;
-            &:hover {
-                background: scale-color($color, $lightness: -20%);
-    }
-        }
+        background-color: var(--sd-colour-neutral--hover);
     }
     &--hidden {
         opacity: 0;
@@ -216,6 +299,47 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
         flex-shrink: 1;
         transition: all linear 100ms;
     }
+    &--primary, &--info {
+        background-color: var(--sd-colour-info);
+        &:hover {
+            background-color: var(--sd-colour-info--hover);
+        }
+    }
+    
+    &--success {
+        background-color: var(--sd-colour-success);
+        &:hover {
+            background-color: var(--sd-colour-success--hover);
+        }
+    }
+    
+    &--warning {
+        background-color: var(--sd-colour-warning);
+        &:hover {
+            background-color: var(--sd-colour-warning--hover);
+        }
+    }
+    
+    &--alert {
+        background-color: var(--sd-colour-alert);
+        &:hover {
+            background-color: var(--sd-colour-alert--hover);
+        }
+    }
+    
+    &--highlight {
+        background-color: var(--sd-colour-highlight);
+        &:hover {
+            background-color: var(--sd-colour-highlight--hover);
+        }
+    }
+    
+    &--sd-green {
+        background-color: var(--sd-colour-superdesk);
+        &:hover {
+            background-color: var(--sd-colour-superdesk--hover);
+        }
+    }
 
 }
 
@@ -225,4 +349,10 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     }
 }
 
-
+.side-panel__header {
+    .sd-alert {
+        box-shadow: none !important;
+        border-radius: unset !important;
+        margin-bottom: 0;
+    }
+}

package/app/styles/_avatar.scss

@@ -1,33 +1,34 @@
 .sd-avatar {
-    display: block;
+    display: inline-block;
     position: relative; // required for absolutely positioned indicators
 
     &--indicator-status--offline {
         display: block;
-        background-color: #fff;
+        background-color: var(--sd-item__main-Bg);
         height: 8px;
         width: 8px;
-        border-radius: 50%;
+        border-radius: $border-radius__base--full;
         position: absolute;
-        bottom: -1px;
-        right: -4px;
-        box-shadow: 0px 0 0 2px #fff;
+        inset-block-end: -1px;
+        inset-inline-start: auto;
+        inset-inline-end: -4px;
+        box-shadow: 0px 0 0 2px var(--sd-item__main-Bg);
         border: 1px solid #a2c59e;
         box-sizing: border-box;
     }
 
     &--indicator-status--online {
         @extend .sd-avatar--indicator-status--offline;
-    
         background-color: #67b461;
         border: 1px solid #67b461;
     }
 
     &--indicator-admin {
-        @include border-radius(50%);
+        border-radius: $border-radius__base--full;
         position: absolute;
-        top: -4px;
-        left: -4px;
+        inset-block-start: -4px;
+        inset-inline-start: -4px;
+        inset-inline-end: auto;
         z-index: 1;
         color: #FF5722 !important;
 
@@ -35,14 +36,13 @@
             content: '';
             display: block;
             position: absolute;
-            top: 4px;
+            inset-block-start: 4px;
             left: 4px;
-            background: #fff;
+            background: var(--sd-colour-background__base--00);
             width: 8px;
             height: 8px;
             z-index: -1;
-            border-radius: 50%;
-            
+            border-radius: $border-radius__base--full;
         }
     }
 
@@ -52,7 +52,7 @@
         font-size: 1rem;
 
         .sd-avatar--indicator-admin {
-            top: -4px;
+            inset-block-start: -4px;
             left: -6px;
         }
     }
@@ -72,12 +72,14 @@
         .sd-avatar--indicator-status--online {
             height: 12px;
             width: 12px;
-            bottom: -1px;
-            right: -4px;
+            inset-block-end: -1px;
+            inset-inline-end: -4px;
+            inset-inline-start: auto;
         }
         .sd-avatar--indicator-admin {
-            top: -2px;
-            left: -4px;
+            inset-block-start: -2px;
+            inset-inline-start: -4px;
+            inset-inline-end: auto;
         }
     }
     &--x-large {
@@ -89,19 +91,19 @@
         .sd-avatar--indicator-status--online {
             height: 16px;
             width: 16px;
-            bottom: -2px;
-            right: 4px;
+            inset-block-end: -2px;
+            inset-inline-end: 4px;
         }
         .sd-avatar--indicator-admin {
-            top: 2px;
-            left: 0;
+            inset-block-start: 2px;
+            inset-inline-start: 0;
             width: 24px;
             height: 24px;
             font-size: 24px;
             &:after {
                 height: 14px;
                 width: 14px;
-                top: 1px;
+                inset-block-start: 1px;
                 left: 5px;
             }
         }
@@ -115,20 +117,21 @@
         .sd-avatar--indicator-status--online {
             height: 18px;
             width: 18px;
-            bottom: -2px;
-            right: 8px;
+            inset-block-end: -2px;
+            inset-inline-end: 8px;
         }
         .sd-avatar--indicator-admin {
-            top: 4px;
-            left: 4px;
+            inset-block-start: 4px;
+            inset-inline-start: 4px;
+            inset-inline-end: auto;
             width: 24px;
             height: 24px;
             font-size: 24px;
             &:after {
                 height: 14px;
                 width: 14px;
-                top: 1px;
-                left: 5px;
+                inset-block-start: 1px;
+                inset-inline-start: 5px;
             }
         }
     }
@@ -139,12 +142,11 @@
         height: 100%;
         align-items: center;
         justify-content: center;
-        border-radius: 50%;
+        border-radius: $border-radius__base--full;
         color: $white;
         text-transform: uppercase;
         letter-spacing: -0.03em;
         overflow: hidden;
-        border-radius: 50%;
     
         > img {
             width: 100%;
@@ -159,6 +161,31 @@
             background-image: url('~../../images/avatar_64.png');
             background-repeat: no-repeat;
             background-size: cover;
+            box-shadow: inset 0 0 0 1px #005b7f;
         }
     }
-}
+}
+
+.sd-avatar-group {
+    display: flex;
+    &.sd-avatar-group--stacked {
+        flex-wrap: nowrap;
+        gap: 0;
+        > .sd-avatar {
+            margin: 0 -0.8rem 0 0;
+            .sd-avatar-content {
+                --avatar-shadow: var(--sd-item__main-Bg);
+                box-shadow: 0 0 0 2px var(--avatar-shadow);
+            }
+            &--large {
+                margin: 0 -1.2rem 0 0;
+            }
+        }
+        margin-inline-end: 8px;
+    }
+    &.sd-avatar-group--grid {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        gap: $sd-base-increment * 1.5;
+    }
+}