superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.10

package/app/img/themes/theme-contrast.svg

@@ -0,0 +1,45 @@
+<svg height="94" viewBox="0 0 156 94" width="156" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path id="a" d="m22 22h134v22h-134z"/>
+        <filter id="b" height="109.1%" width="100.7%" x="-.4%" y="-2.3%">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feColorMatrix in="shadowOffsetOuter1" type="matrix" values="0 0 0 0 0.556862745   0 0 0 0 0.556862745   0 0 0 0 0.556862745  0 0 0 1 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d="m0 0h156v94h-156z" fill="#fff"/>
+        <path d="m22 65h134v29h-134z" fill="#fff"/>
+        <use fill="#000" filter="url(#b)" xlink:href="#a"/>
+        <use fill="#fff" fill-rule="evenodd" xlink:href="#a"/>
+        <circle cx="144" cy="33" fill="#647182" r="4"/>
+        <rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="52"/>
+        <rect fill="#222" height="3" rx="1.5" width="9" x="37" y="58"/>
+        <rect fill="#222" height="3" rx="1.5" width="11" x="68" y="58"/>
+        <rect fill="#222" height="3" rx="1.5" width="18" x="48" y="58"/>
+        <rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="71"/>
+        <rect fill="#222" height="3" rx="1.5" width="9" x="37" y="77"/>
+        <rect fill="#222" height="3" rx="1.5" width="11" x="68" y="77"/>
+        <rect fill="#222" height="3" rx="1.5" width="18" x="48" y="77"/>
+        <rect fill="#0021ff" height="15" rx="2" width="58" x="91" y="71"/>
+        <rect fill="#fff" height="3" rx="1.5" width="9" x="99" y="77"/>
+        <rect fill="#fff" height="3" rx="1.5" width="11" x="130" y="77"/>
+        <rect fill="#fff" height="3" rx="1.5" width="18" x="110" y="77"/>
+        <rect fill="#c1c8d1" height="15" rx="2" width="58" x="91" y="52"/>
+        <g fill="#222"><rect height="3" rx="1.5" width="9" x="99" y="58"/>
+            <rect height="3" rx="1.5" width="11" x="130" y="58"/>
+            <rect height="3" rx="1.5" width="18" x="110" y="58"/>
+            <rect height="4" rx="2" width="11" x="29" y="31"/>
+            <rect height="4" rx="2" width="14" x="70" y="31"/>
+            <rect height="4" rx="2" width="23" x="43" y="31"/>
+        </g>
+        <path d="m0 22h22v72h-22z" fill="#bfc3ca"/>
+        <circle cx="11" cy="34" fill="#647182" opacity=".803154" r="6"/>
+        <circle cx="11" cy="52" fill="#0021ff" r="6"/>
+        <circle cx="11" cy="70" fill="#647182" opacity=".803154" r="6"/>
+        <path d="m0 0h156v22h-156z" fill="#1b1e23"/>
+        <rect fill="#c1c8d1" height="4" rx="2" width="11" x="31" y="9"/>
+        <rect fill="#c1c8d1" height="4" rx="2" width="23" x="45" y="9"/>
+        <path d="m0 0h22v22h-22z" fill="#121417"/>
+        <path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/>
+    </g>
+</svg>

package/app/img/themes/theme-dark.svg

@@ -0,0 +1 @@
+<svg height="94" viewBox="0 0 156 94" width="156" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m22 22h134v22h-134z"/><filter id="b" height="109.1%" width="100.7%" x="-.4%" y="-2.3%"><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" type="matrix" values="0 0 0 0 0.235294118   0 0 0 0 0.254901961   0 0 0 0 0.28627451  0 0 0 1 0"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="m0 0h156v94h-156z" fill="#23282e"/><path d="m22 44h134v50h-134z" fill="#23282e"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><use fill="#23282e" fill-rule="evenodd" xlink:href="#a"/><circle cx="144" cy="33" fill="#647182" r="4"/><rect fill="#4d5865" height="15" rx="2" width="58" x="29" y="52"/><g fill="#bac1c8"><rect height="3" rx="1.5" width="9" x="37" y="58"/><rect height="3" rx="1.5" width="11" x="68" y="58"/><rect height="3" rx="1.5" width="18" x="48" y="58"/></g><rect fill="#4d5865" height="15" rx="2" width="58" x="29" y="71"/><rect fill="#bac1c8" height="3" rx="1.5" width="9" x="37" y="77"/><rect fill="#bac1c8" height="3" rx="1.5" width="11" x="68" y="77"/><rect fill="#bac1c8" height="3" rx="1.5" width="18" x="48" y="77"/><rect fill="#40bf95" height="15" rx="2" width="58" x="91" y="71"/><rect fill="#fff" height="3" rx="1.5" width="9" x="99" y="77"/><rect fill="#fff" height="3" rx="1.5" width="11" x="130" y="77"/><rect fill="#fff" height="3" rx="1.5" width="18" x="110" y="77"/><rect fill="#4d5865" height="15" rx="2" width="58" x="91" y="52"/><rect fill="#bac1c8" height="3" rx="1.5" width="9" x="99" y="58"/><rect fill="#bac1c8" height="3" rx="1.5" width="11" x="130" y="58"/><rect fill="#bac1c8" height="3" rx="1.5" width="18" x="110" y="58"/><rect fill="#c0c6cd" height="4" rx="2" width="11" x="29" y="31"/><rect fill="#c0c6cd" height="4" rx="2" width="14" x="70" y="31"/><rect fill="#c0c6cd" height="4" rx="2" width="23" x="43" y="31"/><path d="m0 22h22v72h-22z" fill="#373f48"/><circle cx="11" cy="34" fill="#959da7" opacity=".797982" r="6"/><circle cx="11" cy="52" fill="#40bf95" r="6"/><circle cx="11" cy="70" fill="#959da7" opacity=".797982" r="6"/><path d="m0 0h156v22h-156z" fill="#1b1e23"/><rect fill="#c1c8d1" height="4" opacity=".554382" rx="2" width="11" x="31" y="9"/><rect fill="#c1c8d1" height="4" opacity=".554382" rx="2" width="23" x="45" y="9"/><path d="m0 0h22v22h-22z" fill="#121417"/><path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/></g></svg>

package/app/img/themes/theme-light.svg

@@ -0,0 +1 @@
+<svg height="94" viewBox="0 0 156 94" width="156" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="m22 22h134v22h-134z"/><filter id="b" height="109.1%" width="100.7%" x="-.4%" y="-2.3%"><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix in="shadowOffsetOuter1" type="matrix" values="0 0 0 0 0.650980392   0 0 0 0 0.674509804   0 0 0 0 0.705882353  0 0 0 0.547072191 0"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="m0 0h156v94h-156z" fill="#fff"/><path d="m22 45h134v49h-134z" fill="#f3f5f6"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><use fill="#f3f5f6" fill-rule="evenodd" xlink:href="#a"/><rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="52"/><rect fill="#596473" height="3" rx="1.5" width="9" x="37" y="58"/><rect fill="#596473" height="3" rx="1.5" width="11" x="68" y="58"/><rect fill="#596473" height="3" rx="1.5" width="18" x="48" y="58"/><rect fill="#c1c8d1" height="15" rx="2" width="58" x="29" y="71"/><rect fill="#596473" height="3" rx="1.5" width="9" x="37" y="77"/><rect fill="#596473" height="3" rx="1.5" width="11" x="68" y="77"/><rect fill="#596473" height="3" rx="1.5" width="18" x="48" y="77"/><rect fill="#c1c8d1" height="15" rx="2" width="58" x="91" y="52"/><rect fill="#596473" height="3" rx="1.5" width="9" x="99" y="58"/><rect fill="#596473" height="3" rx="1.5" width="11" x="130" y="58"/><rect fill="#596473" height="3" rx="1.5" width="18" x="110" y="58"/><rect fill="#5ea9c8" height="15" rx="2" width="58" x="91" y="71"/><rect fill="#fff" height="3" rx="1.5" width="9" x="99" y="77"/><rect fill="#fff" height="3" rx="1.5" width="11" x="130" y="77"/><rect fill="#fff" height="3" rx="1.5" width="18" x="110" y="77"/><g fill="#647182"><rect height="4" rx="2" width="11" x="29" y="31"/><rect height="4" rx="2" width="14" x="70" y="31"/><circle cx="11" cy="33" opacity=".404886" r="6"/><rect height="4" rx="2" width="23" x="43" y="31"/></g><path d="m0 22h22v72h-22z" fill="#d4d8de"/><circle cx="144" cy="33" fill="#647182" opacity=".404886" r="4"/><circle cx="11" cy="52" fill="#5ea9c8" r="6"/><circle cx="11" cy="70" fill="#647182" opacity=".404886" r="6"/><circle cx="11" cy="34" fill="#647182" opacity=".404886" r="6"/><path d="m0 0h156v22h-156z" fill="#1b1e23"/><rect fill="#c1c8d1" height="4" rx="2" width="11" x="31" y="9"/><rect fill="#c1c8d1" height="4" rx="2" width="23" x="45" y="9"/><path d="m0 0h22v22h-22z" fill="#121417"/><path d="m15 13v1h-8v-1zm0-3v1h-8v-1zm0-3v1h-8v-1z" fill="#fff"/></g></svg>

package/app/index.js

@@ -27,7 +27,7 @@ export {
     Switch,
     SwitchGroup,
     Loader,
-    Radio,
+    RadioGroup,
     CheckBox,
     RadioButton,
     CheckboxButton,

package/app/scripts/modals.js

@@ -4,12 +4,12 @@ sdModal.$inject = ['$document', '$rootScope'];
 function sdModal($document, $rootScope) {
     return {
         template:
-`<div class="modal" data-theme="{{theme}}" data-backdrop="static" data-test-id="{{testId}}">
-    <div class="modal__dialog" ng-if="model">
-        <div class="modal__content" ng-transclude></div>
-    </div>
-</div>
-<div class="modal__backdrop fade in" ng-if="model"></div>`,
+            `<div class="modal" data-theme="{{theme}}" data-backdrop="static" data-test-id="{{testId}}">
+                <div class="modal__dialog" ng-if="model">
+                    <div class="modal__content" ng-transclude></div>
+                </div>
+            </div>
+            <div class="modal__backdrop fade in" ng-if="model"></div>`,
         transclude: true,
         scope: {
             model: '=',
@@ -31,25 +31,38 @@ function sdModal($document, $rootScope) {
                         content[0].style = 'z-index: ' + (1050 + $rootScope.modals);
                         content[1].style = 'z-index: ' + (1049 + $rootScope.modals);
                         _initialized = true;
+                        console.log(content);
                     }
                     content.show().addClass('in');
                     $document.find('body').addClass('modal-open');
                     $rootScope.modals++;
                 } else if (initialized()) {
                     content.hide().removeClass('in');
-                    $document.find('body').removeClass('modal-open');
+                    
+                    // If multiple modals are opened,
+                    // remove modal class only when last one is closed
+                    if ($rootScope.modals === 1) {
+                        $document.find('body').removeClass('modal-open');
+                    }
+
                     closeModal();
                 }
             });
 
             var closeModal = function () {
                 scope.model = false;
-                $rootScope.modals--;
+
+                if ($rootScope.modals > 0) {
+                    $rootScope.modals--;
+                }
+                
                 scope.$evalAsync();
             };
 
             $document.bind('keydown', (evt) => {
-                if (evt.which === 27) {
+                if (evt.which === 27 && $rootScope.modals > 0) {
+                    evt.preventDefault();
+
                     closeModal();
                 }
             });

package/app/styles/_accessibility.scss

@@ -3,7 +3,315 @@
     top: 0;
     z-index: -1;
     pointer-events: none;
-    opacity: 0;
-    height: 1px;
-    overflow: hidden;
-}
+    opacity: 0 !important;
+    height: 0 !important;
+    width: 0 !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    overflow: hidden !important;
+    font-size: 0.01px !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+[data-theme="accessible-light-ui"],
+[data-theme="contrast-light-ui"] {
+
+    --font-size-large: 1.5rem;
+  
+    --color-accessible-text:              hsla(0, 0%, 7%, 1);
+    --sd-slugline-color:                  hsla(241, 100%, 50%, 1);
+  
+    --color-input-bg:                     hsla(0, 0%, 0%, 0.05);
+    --color-input-bg--hover:              hsla(0, 0%, 0%, 0.08);
+    --color-input-bg--focus:              hsla(198, 49%, 58%, 0.14);
+    --color-label-text:                   hsla(0, 0%, 25%, 1);
+  
+    --color-input-border:                 hsla(0, 0%, 0%, 0.35);
+    --color-input-border-hover:           hsla(0, 0%, 0%, 0.8);
+  
+    --color-form-bg:                      hsla(0, 0%, 100%, 0);
+    --color-text:                         hsla(0, 0%, 0%, 1);
+  
+    --color-selected-bg:                  hsla(196, 35%, 94%, 1);
+    --color-selected-bg--hover:           hsl(198, 36%, 91%, 1);
+  
+    --color-bg-00:                        hsla(0, 0%, 100%, 1);
+    --color-bg-50:                        hsla(0, 0%, 97%, 1);
+    --color-bg-100:                       hsla(0, 0%, 93%, 1);
+    --color-bg-150:                       hsla(0, 0%, 87%, 1);
+    --color-bg-200:                       hsla(0, 0%, 63%, 1);
+  
+    --color-bg-800:                       hsla(0, 0%, 17%, 1);
+  
+  
+    --color-accessible-primary:           hsla(241, 100%, 50%, 1);
+  
+    [class^="icon-"],
+    [class*=" icon-"],
+    [class^="big-icon--"],
+    [class*=" big-icon--"] {
+      color:                              hsla(0, 0%, 0%, 1);
+    }
+  
+    .sd-checkbox--button-style {
+      color:                              hsla(0, 0%, 7%, 1);
+    }
+    .sd-checkbox--button-style.checked,
+    .sd-checkbox--button-style[checked="checked"] {
+      background-color:                   var(--color-accessible-primary);
+      border-color:                       var(--color-accessible-primary);
+      border-top-color:                   hsla(241, 98%, 17%, 1);
+      color:                              hsla(0, 0%, 100%, 1);
+      &:hover {
+        background-color:                 hsla(241, 98%, 20%, 1);
+        border-color:                     hsla(241, 98%, 20%, 1);
+        border-top-color:                 hsla(241, 100%, 11%, 1);
+      }
+    }
+    .sd-create-btn .circle {
+      background-color:                   var(--color-accessible-primary);
+    }
+  
+    .navbtn.navbtn--active {
+      background-color:                   hsla(0, 0%, 27%, 1);
+      color:                              $white;
+    }
+    .btn {
+      color: var(--color-accessible-text);
+      font-weight: 600;
+      font-size: 1.4rem;
+      &.btn--primary {
+        background-color:                 var(--color-accessible-primary);
+        color:                            $white;
+      }
+      &.btn--hollow {
+        background-color:                 $white;
+      }
+    }
+  
+    .sd-list-item {
+      font-size: 1.5rem;
+      .sd-list-item__slugline {
+        font-size: 1.3rem;
+      }
+      time {
+        color:                            hsla(0, 0%, 28%, 1);
+        font-weight: 400;
+      }
+    }
+    .badge {
+      font-size: 1.2rem;
+      line-height: 1.1em;
+      font-weight: 600;
+    }
+    .side-panel {
+      background-color: $white;
+      color: var(--color-accessible-text);
+      .side-panel__header {
+        background-color:               $white;
+      }
+      .side-panel__heading {
+        font-weight: 500;
+        color:                          var(--color-accessible-text);
+      }
+      p {
+        font-size: 1.6rem;
+        line-height: 1.5;
+        color:                          var(--color-accessible-text);
+      }
+      .sd-text__date-and-author {
+        font-size: 1.4rem;
+        time {
+          font-weight: 400;
+          color:                        hsla(0, 0%, 35%, 1);
+        }
+      }
+      &.side-panel--dark-ui {
+        background-color: var(--color-bg-800);
+        color: $white;
+       i[class^="icon-"] {
+          color:                        $white;
+        }
+        .side-panel__header {
+          background-color:             var(--color-bg-800);
+          color:                        $white !important;
+          i[class^="icon-"] {
+            color:                      $white !important;
+          }
+          
+        }
+      }
+    }
+  
+    .sd-input {
+      .sd-input__label {
+        font-weight: 600;
+        font-size: 1.2rem;
+      }
+      .sd-input__input,
+      .sd-input__select {
+        font-size: 1.5rem;
+      }
+      .sd-input__hint,
+      .sd-input__message {
+        font-size: 1.4rem;
+        margin: 0.8rem 0;
+      }
+      .sd-input__hint {
+        color:                          hsla(0, 0%, 27%, 1);
+      }
+    }
+  
+    .form-label {
+      font-size: 1.2rem;
+      font-weight: 500;
+      &.form-label--light {
+        color:                          hsla(0, 0%, 32%, 1);
+      }
+    }
+  
+    .navbtn {
+      color: #111;
+      [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+      }
+    }
+  
+    .dropdown__menu-label {
+      font-size: 1.2rem;
+      color:                            hsla(0, 0%, 35%, 1);
+    }
+    .dropdown__toggle:active,
+    .dropdown.open .dropdown__toggle {
+      color: var(--color-accessible-primary);
+    }
+    .dropdown__menu li a:not(.btn),
+    .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
+    .dropdown__menu .dropdown__menu-item a:not(.btn), 
+    .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
+      font-size: 1.5rem;
+      font-weight: 500;
+      color:                            currentColor;
+    }
+    .dropdown__menu li a:not(.btn):hover,
+    .dropdown__menu li a:not(.btn):focus,
+    .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
+    .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
+    .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
+    .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
+    .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
+    .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
+      background:                       var(--color-accessible-primary);
+      color:                            $white;
+       > i[class^="icon-"] {
+        color:                          $white;
+      }
+    }
+    .dropdown.open .navbtn > i {
+      color:                            var(--color-accessible-primary);
+    }
+  
+    .sd-text__slugline,
+    p.sd-text__slugline {
+      color:                            var(--color-accessible-primary) !important;
+    }
+  
+    .toggle-box--circle .toggle-box__chevron {
+      background-color:                 hsla(0, 0%, 48%, 0.5);
+      height: 2rem;
+      width: 2rem;
+    }
+    .toggle-box__label {
+      font-size: 1.4rem;
+      color:                            var(--color-label-text);
+      font-weight: 500;
+    }
+  
+    .sd-grid-item {
+      time {
+        color:                          hsla(0, 0%, 28%, 1);
+        font-size: 1.3rem;
+        font-weight: 400;
+      }
+      .sd-grid-item__slugline {
+        font-size: 1.2rem;
+      }
+    }
+    .nav-tabs {
+      .nav-tabs__link {
+        font-size: 1.6rem;
+        font-weight: 500;
+      }
+      &--big {
+        .nav-tabs__link {
+          font-size: 2rem;
+        }
+      }
+    }
+  
+    .nav-tabs__tab--active, 
+    .nav-tabs__tab--active:hover {
+      .nav-tabs__link {
+        border-bottom-color:          var(--color-accessible-primary);
+        color:                        var(--color-accessible-text);
+      }
+    }
+  
+    .side-panel.side-panel--dark-ui {
+      .nav-tabs__tab {
+          .nav-tabs__link {
+            border-bottom-color: transparent;
+            color:                    $white;
+            opacity: 0.6;
+        }
+        &:hover {
+          .nav-tabs__link {
+            border-bottom-color:      hsla(0, 0%, 100%, 0.25);
+            opacity: 1;
+          }
+        }
+        &.nav-tabs__tab--active,
+        &.nav-tabs__tab--active:hover {
+          .nav-tabs__link {
+            border-bottom-color:      hsla(240, 100%, 65%, 1);
+            color:                    $white;
+            opacity: 1;
+          }
+        }
+      }
+  
+      .toggle-box__label {
+        color:                        $white;
+      }
+  
+      .sd-line-input .sd-line-input__label {
+        color:                        $white;
+        opacity: 0.7;
+      }
+  
+      a.text-link.text-link--white {
+        color:                        $white;
+        opacity: 0.75;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+    .badge {
+      &.badge--primary {
+        background-color: var(--color-accessible-primary);
+      }
+      &.badge--success {
+        background-color:             hsla(133, 100%, 19%, 1);
+      }
+      &.badge--warning {
+        background-color:             hsla(33, 100%, 26%, 1);
+      }
+    }
+    .sd-sidebar-menu__btn--active,
+    .sd-sidebar-menu__btn--active:hover {
+      background-color:               var(--color-accessible-primary);
+  
+    }
+}

package/app/styles/_alerts.scss

@@ -1,18 +1,12 @@
 /// @group sd-alert
 
 /// 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: 1.8rem 3rem 1.8rem 2rem !default;
-$sd-alert-padding-small: 0.8rem 2.4rem 0.8rem 1.2rem;
-
 $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.8rem;
-
+$sd-alert-padding-y-small: 0.7rem;
 
 /// Default radius of sd-alerts.
 $sd-alert-radius: var(--b-radius--medium) !default;
@@ -43,7 +37,8 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
     position: relative;
     box-shadow: $sd-alert-shadow;
     background-color: var(--sd-alert-bg);
-    margin-bottom: 2rem;
+    display: flex;
+    gap: $sd-base-increment * 2;
     & strong {
         font-weight: 500;
     }
@@ -63,6 +58,7 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
         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;
@@ -70,6 +66,23 @@ $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);
@@ -170,7 +183,35 @@ $sd-alert-transition-small: font-size ease-out 20ms, padding ease-out 200ms, max
         }
 
     }
- 
+    .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 {
@@ -226,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; 
@@ -317,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,5 +1,5 @@
 .sd-avatar {
-    display: block;
+    display: inline-block;
     position: relative; // required for absolutely positioned indicators
 
     &--indicator-status--offline {
@@ -165,3 +165,27 @@
         }
     }
 }
+
+.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;
+    }
+}

package/app/styles/_badge.scss

@@ -77,8 +77,8 @@ $badge-lineheight: 1.1em !default;
     position: relative;
     .badge {
       position: absolute;
-      top: -.9rem;
-      right: -.9rem;
+      top: -.5rem;
+      right: -.8rem;
     }
     + .element-with-badge, + .btn {
       margin-left: 1.2rem;