superdesk-ui-framework 3.0.41 → 3.0.43

package/app/styles/menus/_sd-top-menu.scss

@@ -10,7 +10,7 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
     z-index: $zindexFixedNavbar;
     margin-bottom: 0;
     transition: all 0.3s ease;
-    display:flex;
+    display: flex;
     flex-direction: row;
     align-items: center;
     color: $white;
@@ -28,23 +28,28 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
     box-shadow: 2px 0 5px 0 hsla(0, 0%, 0%, 0.35);
     position: relative;
     transition: all 0.3s ease;
+
     &:hover {
         background-color: hsl(0, 0%, 0%);
         cursor: pointer;
     }
+
     &.is-active {
         margin-inline-start: -$sd-sidebarMenu-width;
         background-color: hsla(0, 0%, 0%, 0.02);
         box-shadow: none;
+
         &:hover {
             background-color: hsla(0, 0%, 0%, 0.24);
         }
     }
-    &--disabled {
-        pointer-events: none !important;
-        opacity: 0.5;
-    }
 }
+
+.sd-top-menu__collapse-nav--disabled {
+    pointer-events: none !important;
+    opacity: 0.5;
+}
+
 .sd-top-menu__header {
     display: inline-block;
     height: $nav-height;
@@ -61,9 +66,11 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
     position: relative;
     padding: 0 10px;
     width: 48px;
+
     .avatar {
         border-radius: $border-radius__base--full;
     }
+
     .label {
         position: absolute;
         top: 3px;
@@ -73,21 +80,23 @@ $sd-topMenu-background: var(--sd-colour-top-menu);
 }
 
 .current-user-details--compact {
+    @include sd-padding('1');
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    @include sd-padding('1');
     color: $sd-text;
     min-width: 26rem;
 }
+
 .current-user-details__full-name {
     font-weight: 400;
     font-size: 1.8rem;
     margin: 16px 0 2px;
 
 }
+
 .current-user-details__username {
     opacity: 0.75;
     font-size: 1.4rem;
-}
+}

package/app/styles/primereact/_pr-autocomplete.scss

@@ -10,12 +10,14 @@
     @include pr-dropdown-panel-base;
     margin-top: 16px;
     padding: 1rem 0;
+
     .p-autocomplete-items {
         padding: 0;
     }
 
     .p-autocomplete-list-item, .p-autocomplete-item {
         @include pr-menu-item-base;
+        
         b {
             font-weight: 600;
         }

package/app/styles/primereact/_pr-datepicker.scss

@@ -2,6 +2,7 @@
     @include pr-dropdown-panel-base;
     padding: 12px;
     margin-top: 1px;
+
     .p-datepicker-title {
         text-transform: uppercase;
         font-weight: bold;
@@ -17,6 +18,7 @@
         padding: .8em 4px;
         min-height: 32px;
         margin-bottom: 8px;
+
         .p-datepicker-prev,
         .p-datepicker-next {
             display: flex;
@@ -27,23 +29,28 @@
             height: $sd-base-increment * 4;
             width: $sd-base-increment * 4;
             transition: all 0.2s ease-out, color 0.1s ease-out;
+
             &:hover {
                 background-color: hsla(214, 13%, 55%, 0.2);
             }
+
             &:active {
                 background-color: hsla(214, 13%, 55%, 0.3);
                 color: var(--sd-colour-interactive);
             }
+
             &:focus-visible {
                 background-color: hsla(214, 13%, 55%, 0.2);
                 box-shadow: $icn-button-focus-box-shadow;
                 outline: none;
+
                 [class^="icon-"], [class*=" icon-"] {
                     opacity: 1;
                 }
             }
 
         }
+
         .datepicker-header-toolbar {
             width: 100%;
             display: flex;
@@ -69,6 +76,7 @@
     display: block;
     text-align: center;
 }
+
 .p-datepicker-year {
     font-weight: 400;
     margin-top: 4px;
@@ -90,10 +98,12 @@
 .p-datepicker table td > span {
     &:not(.p-highlight):not(.p-disabled) {
         transition: all ease 0.2s;
+
         &:hover {
             background-color: var(--sd-colour-interactive--alpha-10);
             box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
         }
+
         &:active {
             background-color: var(--sd-colour-interactive--alpha-20);
         }
@@ -133,14 +143,12 @@
     color: $white;
 }
 
-
 // calendar icon button
 .p-datepicker-trigger {
     @extend .p-inputtext;
     font-size: 1.4em;
     cursor: pointer;
 
-
     .p-button-icon-left {
         color: #7F7F7F;
     }
@@ -152,6 +160,7 @@
 
 .p-calendar {
     @include pr-input-item-base;
+
     .p-inputtext {
         color: var(--color-text);
         height: $height-input--default;
@@ -164,12 +173,14 @@
     &.sd-input--disabled:hover {
         opacity: 0.5;
         cursor: not-allowed;
+        .p-calendar {
+            .p-calendar-icon {
+                pointer-events: none;
+            }
+            border-bottom: 1px dotted var(--color-input-border);
+            background-color: var(--color-input-bg);
+        }
     }
-    .p-calendar-icon {
-        pointer-events: none;
-    }
-    border-bottom: 1px dotted var(--color-input-border);
-    background-color: var(--color-input-bg);
 }
 
 .p-calendar-w-btn {
@@ -184,12 +195,14 @@
         height: 2.4rem;
         color: inherit;
         margin: 0 4px 0 0;
+
         [class^="icon-"],
         [class*=" icon-"] {
             color: var(--color-text);
             margin-top: -2px;
             opacity: 0.75;
         }
+
         &:hover {
             [class^="icon-"],
             [class*=" icon-"] {

package/app/styles/primereact/_pr-dialog.scss

@@ -5,8 +5,6 @@
     z-index: 1000;
 }
 
-
-
 .p-dialog-mask {
     position: fixed;
     top: 0;
@@ -35,7 +33,7 @@
     pointer-events: auto;
     max-height: 90%;
     transform: scale(1);
-    
+
     overflow: hidden;
 }
 
@@ -82,6 +80,7 @@
 }
 
 /* Animation */
+
 /* Center */
 .p-dialog-enter {
     opacity: 0;
@@ -228,11 +227,11 @@
 }
 
 .p-dialog .p-dialog-header .p-dialog-title {
+    @include sd-padding('2', 'right');
     font-size: 1.8rem;
     font-weight: 300;
     line-height: 27px;
     opacity: 0.8;
-    @include sd-padding('2', 'right');
 }
 
 .p-dialog .p-dialog-header .p-dialog-header-icon {
@@ -263,6 +262,7 @@
 .p-dialog .p-dialog-content {
     background-color: transparent;
     font-size: 1.4rem;
+
     p {
         line-height: 1.5;
     }
@@ -302,15 +302,18 @@
         -moz-osx-font-smoothing: grayscale;
         opacity: 0.6;
         transition: color .1s ease-out, opacity .1s ease-out;
+
         &::before {
             content: "\e647";
         }
     }
+
     &:hover {
         .p-dialog-header-close-icon {
             opacity: 1;
         }
     }
+
     &:active {
         .p-dialog-header-close-icon {
             color: $sd-colour-interactive !important;
@@ -320,52 +323,57 @@
 }
 
 .p-dialog-content {
-    // size
-    &--small {
-        width: var(--width__modal--small);
-    }
-    &--medium {
-        width: var(--width__modal--medium);
-    }
-    &--large {
-        width: var(--width__modal--large);
-        min-height: 20rem;
-    }
-    &--x-large {
-        width: var(--width__modal--x-large);
-        //min-height: 30rem;
-        height: calc(100vh - 200px);
-    }
-    // padding
-    &--0-padding {
-        padding: 0 !important;
-    }
-    &--s-padding {
-        padding: $sd-base-increment * 2;
-    }
-    &--m-padding {
-        padding: $sd-base-increment * 3
-    }
-    &--l-padding {
-        padding: $sd-base-increment * 4;
+    //max-height: 100%;
+    .sd-main-content-grid {
+        height: 100% !important;
     }
 }
 
-.p-dialog-content-bg {
-    &--default {
-        background-color: transparent !important;
-    }
-    &--dark {
-        background-color: var(--sd-colour-panel-bg--200) !important;
-    }
-    &--medium {
-        background-color: var(--sd-colour-panel-bg--100) !important;
-    }
+// size
+.p-dialog-content--small {
+    width: var(--width__modal--small);
 }
 
-.p-dialog-content {
-    //max-height: 100%;
-    .sd-main-content-grid {
-        height: 100% !important;
-    }
+.p-dialog-content--medium {
+    width: var(--width__modal--medium);
+}
+
+.p-dialog-content--large {
+    width: var(--width__modal--large);
+    min-height: 20rem;
+}
+
+.p-dialog-content--x-large {
+    width: var(--width__modal--x-large);
+    //min-height: 30rem;
+    height: calc(100vh - 200px);
+}
+
+// padding
+.p-dialog-content--0-padding {
+    padding: 0 !important;
+}
+
+.p-dialog-content--s-padding {
+    padding: $sd-base-increment * 2;
+}
+
+.p-dialog-content--m-padding {
+    padding: $sd-base-increment * 3
+}
+
+.p-dialog-content--l-padding {
+    padding: $sd-base-increment * 4;
+}
+
+.p-dialog-content-bg--default {
+    background-color: transparent !important;
+}
+
+.p-dialog-content-bg--dark {
+    background-color: var(--sd-colour-panel-bg--200) !important;
+}
+
+.p-dialog-content-bg--medium {
+    background-color: var(--sd-colour-panel-bg--100) !important;
 }

package/app/styles/primereact/_pr-dropdown.scss

@@ -40,15 +40,17 @@
     @include pr-dropdown-panel-base;
 }
 
-.p-dropdown-filter-container, .p-multiselect-filter-container {
+.p-dropdown-filter-container,
+.p-multiselect-filter-container {
     border-radius: $border-radius__base--small $border-radius__base--small 0 0;
     padding: 8px;
     box-shadow: 0 1px 0 var(--sd-colour-line--light);
 }
 
-.p-dropdown-filter, .p-multiselect-filter {
+.p-dropdown-filter,
+.p-multiselect-filter {
     border: 1px solid var(--sd-colour-line--strong);
-    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.12);
+    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.12);
     border-radius: $border-radius__base--small;
     padding-inline-end: 20px;
     padding: 4px;
@@ -56,20 +58,23 @@
     transition: all ease 0.2s;
     background-color: var(--sd-colour-bg__searchbar);
     color: $sd-text;
+
     &:focus {
         border: 1px solid $sd-colour-interactive;
         box-shadow: inset var(--sd-colour-interactive--alpha-20) 0px 0px 0px 0.2rem;
     }
 }
 
-.p-dropdown-loader-icon, .p-multiselect-loader-icon {
+.p-dropdown-loader-icon,
+.p-multiselect-loader-icon {
     position: absolute;
     inset-block-start: 50%;
     margin-block-start: -6px;
     inset-inline-end: 12px;
 }
 
-.p-dropdown-empty-message, .p-multiselect-empty-message {
+.p-dropdown-empty-message,
+.p-multiselect-empty-message {
     padding-block-start: 6px;
     padding-block-end: 6px;
     padding-inline-start: 8px;
@@ -92,7 +97,7 @@
     @extend .tag-label;
     cursor: default;
     margin: 0 !important;
- 
+
     .pi-times-circle {
         overflow: inherit;
         cursor: default;
@@ -114,7 +119,7 @@
         transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
         margin-inline-start: 0.8rem;
         margin-inline-end: -1rem;
-        
+
         &::before {
             font-family: "sd_icons";
             content: "";
@@ -125,21 +130,21 @@
             margin-left: 1px;
             opacity: 0.4;
             transition: color .1s ease-out, opacity .1s ease-out;
+
             &:hover {
                 cursor: pointer;
                 text-decoration: none;
                 background-color: red;
                 //background-color: var(--sd-colour__tag-label-remove-Bg--hover);
-                [class^="icon-"], [class*=" icon-"] {
+
+                [class^="icon-"],
+                [class*=" icon-"] {
                     opacity: 0.85;
                 }
             }
-        }   
+        }
     }
-    
-    
-    
-}   
+}
 
 .p-checkbox {
     @extend .sd-checkbox;
@@ -147,7 +152,7 @@
     align-items: center;
     justify-content: center;
     color: white;
-       
+
     .p-checkbox-box {
         display: flex;
         align-items: center;
@@ -166,16 +171,16 @@
         width: 1.6rem;
         height: 1.6rem;
     }
-    
 }
 
-.p-multiselect-header, .p-multiselect-item {
+.p-multiselect-header,
+.p-multiselect-item {
     padding: 0.75rem 1.25rem;
     margin: 0;
     display: flex;
     align-items: center;
 
-    >span{
+    >span {
         padding: 8px;
     }
 }
@@ -204,8 +209,8 @@
     }
 }
 
-.p-multiselect-header{
-    .p-checkbox{
+.p-multiselect-header {
+    .p-checkbox {
         display: none;
     }
 }
@@ -217,9 +222,9 @@
 }
 
 .showSelectAll {
-    .p-multiselect-header{
-        .p-checkbox{
+    .p-multiselect-header {
+        .p-checkbox {
             display: flex !important;
         }
     }
-}
+}

package/app/styles/primereact/_pr-general.scss

@@ -19,6 +19,7 @@
     text-decoration: none;
     text-align: start;
     transition: $sd-transition__menu-item;
+
     &:hover,
     &:focus,
     &.p-highlight {
@@ -26,6 +27,7 @@
         text-decoration: none;
         cursor: pointer;
     }
+
     &:active {
         background-color: $sd-colour-background__menu-item--active;
     }
@@ -46,6 +48,7 @@
         background-color: var(--color-input-bg--hover);
         border-color: var(--color-input-border-hover);
     }
+    
     &:focus, &:focus-within, &.p-focus {
         background-color: var(--sd-colour-interactive--alpha-20);
         box-shadow: 0 1px 0 0 $sd-colour-interactive;

package/app/styles/primereact/_pr-menu.scss

@@ -29,8 +29,9 @@
     &:hover, &:focus-visible {
         background: $sd-colour-background__menu-item--hover;
     }
+    
     .p-menuitem-icon {
         margin-right: 0.8rem;
         color: var(--color-icon-default);
     }
-}
+}

package/app/styles/primereact/_pr-skeleton.scss

@@ -29,6 +29,7 @@
     from {
         transform: translateX(-100%);
     }
+    
     to {
         transform: translateX(100%);
     }

package/app/styles/primereact/_pr-tag-input.scss

@@ -21,6 +21,7 @@
 .p-chips-token-icon {
     color: var(--color-text-lighter);
     font-size: 20px;
+    
     &:hover {
         cursor: pointer;
         color: var(--color-text-light);