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

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;

package/app/styles/_big-icon-font.scss

@@ -6,7 +6,7 @@
 // of .i and are then given a unique class to add width, height,
 // and font specification. Your resulting HTML will look like
 // <i class="icon-ok"></i>.
-@import 'variables/new-colors';
+
 @import 'variables/colors';
 
 $icon-color: $grayDark !default;
@@ -23,37 +23,38 @@ $icon-color: $grayDark !default;
 }
 
 @mixin big-icon-base {
-  display: inline-block;
-  width: 26px;
-  height: 26px;
-  line-height: 26px;
-  font-family: 'sd_big-icons';
-  font-size: 26px;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
+    --big-icon-size: 26px;
+    font-family: 'sd_big-icons';
+    display: inline-block;
+    width: var(--big-icon-size);
+    height: var(--big-icon-size);
+    line-height: var(--big-icon-size);
+    font-size: var(--big-icon-size);
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
 }
 
 [class^="big-icon--"],
 [class*=" big-icon--"] {
-  @include big-icon-base;
-  color: $icon-color;
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    @include big-icon-base;
+    color: $icon-color;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .big-icon--blue {
-  color: $sd-colour-interactive;
+    color: $sd-colour-interactive;
 }
 .big-icon--white {
-  color: $white !important;
+    color: $white !important;
 }
 [class*=big-icon--].red,
 .big-icon--red {
-  color: $fireBrick;
+    color: $fireBrick;
 }
 
 // Icons definition
@@ -111,14 +112,53 @@ $sd-big-icon-font: (
     suggestion: "\e632",
     publisher: "\e633",
     tag: "\e634",
+    rundown: "\e635",
+    checkmark-circle: "\e636",
 );
 
 @each $name, $value in $sd-big-icon-font {
-  &.big-icon--#{$name}:before {
-    content: $value;
-  }
+    &.big-icon--#{$name} {
+        content: $value;
+        &.color--default {
+            color: $icon-color;
+        }
+        &.color--primary {
+            color: var(--sd-colour-primary) !important;
+        }
+        &.color--success {
+            color: var(--sd-colour-success) !important;
+        }
+        &.color--warning {
+            color: var(--sd-colour-warning) !important;
+        }
+        &.color--alert {
+            color: var(--sd-colour-alert) !important;
+        }
+        &.color--highlight {
+            color: var(--sd-colour-highlight) !important;
+        }
+        &.color--light {
+            color: var(--color-text-lighter) !important;
+        }
+        &.color--white {
+            color: hsla(214, 13%, 90, 1) !important;
+        }
+
+        &.scale--2x {
+            --big-icon-size: 52px
+        }
+        &.scale--3x {
+            --big-icon-size: 78px
+        }
+        &.scale--4x {
+            --big-icon-size: 104px
+        }
+    }
+    &.big-icon--#{$name}:before {
+        content: $value;
+    }
 }
 
 :export {
-  icon: map-keys($sd-big-icon-font);
+    icon: map-keys($sd-big-icon-font);
 }