superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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

@@ -1,7 +1,7 @@
 
-$sd-sidebarMenu-background: var(--color-bg-150);
-$sd-sidebarMenu-secondLevel-background: #b7bec1;
-$sd-sideTabMenu-background: var(--color-bg-200);
+$sd-sidebarMenu-background: var(--sd-colour-sidebar-menu--00);
+$sd-sidebarMenu-secondLevel-background: var(--sd-colour-sidebar-menu--10);
+$sd-sideTabMenu-background: var(--sd-colour-sidebar-menu--20);
 
 .sd-sidebar-menu {
   position: absolute;
@@ -30,14 +30,14 @@ $sd-sideTabMenu-background: var(--color-bg-200);
 .sd-sidebar-menu__spacer {
   width: $sd-sidebarMenu-width / 2;
   margin: 1.8rem auto;
-  border-top: 1px dotted #9b9b9b;
+  border-top: 1px dotted var(--sd-colour-line--medium);
   border-bottom: 0;
 }
 
 .sd-sidebar-menu__btn {
   display: block;
   margin: 0.6rem auto;
-  border-radius: 50%;
+  border-radius: $border-radius__base--full;
   height:3.6rem;
   width: 3.6rem;
   opacity: .7;
@@ -47,14 +47,14 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   cursor: pointer;
   &:hover {
     opacity: 1;
-    background-color: rgba(255, 255, 255, .6);
+    background-color: var(--sd-colour-sidebar-menu--10);
   }
   &:active {
-    background-color: $sd-blue;
+    background-color: var(--sd-colour-interactive--active);
     opacity: 1;
   }
   &--active, &--active:hover {
-    background-color: darken($sd-blue, 11%);
+    background-color: var(--sd-colour-interactive--active);
     opacity: 1;
 
     .sd-sidebar-menu__main-icon {
@@ -123,6 +123,7 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   background-color: $sd-sideTabMenu-background;
   z-index: 16;
   transition: all .3s ease;
+  overflow-y: auto;
   &--right {
     right: 0;
     box-shadow: inset 4px 0 5px -3px rgba(0, 0, 0, 0.25);
@@ -131,35 +132,53 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   &--static {
     position: static;
   }
+  .badge {
+    position: absolute;
+    inset-block-start: 3px;
+    inset-inline-end: 3px;
+    z-index: 1;
+  }
 }
 
 .sd-sidetab-menu__btn {
-  display:block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   width: 100%;
   height: $sd-sidebarMenu-width;
   text-align: center;
   padding: 0;
   margin:0;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
+  box-shadow: 0 1px 0 var(--sd-colour-line--x-light);
   border-width: 0 0 1px 0;
   background: none;
   &:hover {
-    background: rgba(255,255,255,0.15);
+    background: hsla(0, 0%, 0%, 0.1);
     cursor: pointer;
   }
 }
 
 .sd-sidetab-menu__helper-icon,
 .sd-sidetab-menu__main-icon {
+  color: $sd-text-light;
   position: absolute;
-  top: 10px;
-  left: 10px;
+  inset-block-start: 1rem;
+  inset-inline-start: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  i {
+    color: $sd-text-light;
+  }
 }
-.sd-sidetab-menu__helper-icon {
+
+.sd-sidetab-menu__helper-icon,
+i.sd-sidetab-menu__helper-icon {
   opacity: 0;
   margin: 0;
-  left: 1.2rem;
+  inset-block-start: 1.2rem;
+  inset-inline-start: 1.2rem;
   width: 2.4rem;
   height: 2.4rem;
   font-size: 2.4rem;
@@ -167,7 +186,8 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   z-index: 2;
   transition: all 0.4s 0s, transform 0.3s 0s;
 }
-.sd-sidetab-menu__main-icon {
+.sd-sidetab-menu__main-icon,
+.sd-sidetab-menu__main-icon i {
   opacity: 1;
   transition: all 0.2s, transform 0.2s;
 }
@@ -183,8 +203,7 @@ $sd-sideTabMenu-background: var(--color-bg-200);
 
 .active {
   .sd-sidetab-menu__btn {
-    background: rgba(255,255,255,0.2);
-    border-color: rgba(0,0,0,0.18);
+    background: hsla(0, 0%, 0%, 0.2);
   }
   .sd-sidetab-menu__btn:hover {
     .sd-sidetab-menu__helper-icon {
@@ -198,28 +217,43 @@ $sd-sideTabMenu-background: var(--color-bg-200);
       width:0.8rem;
       left: 2.0rem;
       font-size: 8px;
+      i {
+        opacity: 0;
+        height:0.8rem;
+        width:0.8rem;
+        left: 2.0rem;
+        font-size: 8px;
+      }
     }
   }
 }
 
 .sd-sidetab-menu__btn--active {
-  background: rgba(255,255,255,0.2);
-  border-color: rgba(0,0,0,0.18);
-  .sd-sidetab-menu__main-icon {
-    color: darken($sd-blue, 16%) !important;
+  background: hsla(0, 0%, 100%, 0.24);
+  .sd-sidetab-menu__main-icon,
+  .sd-sidetab-menu__main-icon i {
+    color: var(--sd-colour-interactive--active) !important;
   }
   &:hover {
-    .sd-sidetab-menu__helper-icon {
+    .sd-sidetab-menu__helper-icon,
+    .sd-sidetab-menu__helper-icon i {
       opacity: 1;
       transform: rotate(180deg);
       transition: all 0.3s 0.2s, transform 0.2s 0.2s;
     }
     .sd-sidetab-menu__main-icon {
       opacity: 0;
-      height:0.8rem;
-      width:0.8rem;
-      left: 2.0rem;
+      //height:0.8rem;
+      //width:0.8rem;
+      //left: 2.0rem;
       font-size: 8px;
+      i {
+        opacity: 0;
+        height:0.8rem !important;
+        width:0.8rem !important;
+        font-size: 8px !important;
+        //left: 2.0rem
+      }
     }
   }
 }
@@ -230,7 +264,7 @@ $sd-sideTabMenu-background: var(--color-bg-200);
 .sd-side-menu__btn {
   display: block;
   margin: 0.6rem auto;
-  border-radius: 50%;
+  border-radius: $border-radius__base--full;
   height:3.6rem;
   width: 3.6rem;
   opacity: .7;
@@ -239,14 +273,14 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   position: relative;
   &:hover {
     opacity: 1;
-    background-color: rgba(255, 255, 255, .6);
+    background-color: var(--sd-colour__side-menu--hover);
   }
   &:active {
-    background-color: $sd-blue;
+    background-color: $sd-colour-interactive;
     opacity: 1;
   }
   &--active, &--active:hover {
-    background-color: darken($sd-blue, 11%);
+    background-color: var(--sd-colour-interactive--active);
     opacity: 1;
   }
 }
@@ -323,3 +357,63 @@ $sd-sideTabMenu-background: var(--color-bg-200);
   }
 }
 
+.sd-quickbar-menu {
+  width: $sd-sidebarMenu-width;
+  background-color: var(--sd-colour-panel-bg--050);
+  z-index: 1;
+  overflow-y: auto;
+  position: relative;
+  ul {
+    margin-top: 24px;
+  }
+  &__list-item--active {
+    .sd-quickbar__btn, .sd-quickbar__btn:hover  {
+          background-color: var(--sd-colour-interactive--alpha-10);
+          border-inline-end-color: var(--sd-colour-interactive);
+    }
+}
+}
+.sd-quickbar__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: $sd-sidebarMenu-width;
+  height: $sd-sidebarMenu-width;
+  text-align: center;
+  padding: 0;
+  margin:0;
+  border: 2px solid transparent;
+  border-width: 0 2px;
+  transition: all .3s ease;
+  i {
+    color: var(--color-text-light);
+    opacity: 0.75;
+  }
+  &:hover {
+    background-color: var(--sd-colour-panel-bg--200);
+    cursor: pointer;
+    i {
+      opacity: 1;
+    }
+  }
+  &--active {
+    background-color: var(--sd-colour-interactive--alpha-10);
+    border-inline-end-color: var(--sd-colour-interactive);
+    i {
+      opacity: 1;
+      color: var(--sd-colour-interactive);
+    }
+  }
+}
+.sd-quickbar-menu {
+  &--right {
+    .sd-quickbar__btn--active {
+      border-inline-end-color: transparent;
+      border-inline-start-color: var(--sd-colour-interactive);
+    }
+
+  }
+}
+
+

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

@@ -1,4 +1,4 @@
-$sd-topMenu-background: var(--color-bg-800);
+$sd-topMenu-background: var(--sd-colour-top-menu);
 
 .sd-top-menu {
     background: $sd-topMenu-background;
@@ -17,19 +17,33 @@ $sd-topMenu-background: var(--color-bg-800);
 }
 
 .sd-top-menu__collapse-nav {
-    display: inline-block;
     height: $nav-height;
-    line-height: $nav-height + 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: $sd-sidebarMenu-width;
     text-align: center;
     padding: 0;
-    background-color: #101010;
-    box-shadow: 2px 0 5px 0 rgba(0,0,0,.35);
+    background-color: var(--sd-colour-top-menu__btn);
+    box-shadow: 2px 0 5px 0 hsla(0, 0%, 0%, 0.35);
     position: relative;
+    transition: all 0.3s ease;
     &:hover {
-        background: #000;
+        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__header {
     display: inline-block;
@@ -38,7 +52,7 @@ $sd-topMenu-background: var(--color-bg-800);
     font-size: 1.5rem;
     text-align: center;
     padding: 0 2rem;
-    color: #aaa;
+    color: hsl(214, 13%, 75%);
     margin: 0;
 }
 
@@ -48,7 +62,7 @@ $sd-topMenu-background: var(--color-bg-800);
     padding: 0 10px;
     width: 48px;
     .avatar {
-        @include border-radius(50%);
+        border-radius: $border-radius__base--full;
     }
     .label {
         position: absolute;

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

@@ -6,14 +6,45 @@
         text-transform: uppercase;
         font-weight: bold;
         line-height: 1;
-        margin: 0 2.3em;
+        margin: 0 auto;
         text-align: center;
     }
 
     .p-datepicker-header {
         position: relative;
+        display: flex;
         flex-wrap: wrap;
-        padding: .5em 0;
+        padding: .8em 4px;
+        min-height: 32px;
+        margin-bottom: 8px;
+        .p-datepicker-prev,
+        .p-datepicker-next {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--b-radius--full);
+            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;
+                }
+            }
+
+        }
     }
 
     table {
@@ -23,8 +54,14 @@
 
 // display month and year on separate lines
 .p-datepicker-month,
-p-datepicker-year {
+.p-datepicker-year {
     display: block;
+    text-align: center;
+}
+.p-datepicker-year {
+    font-weight: 400;
+    margin-top: 4px;
+    color: var(--color-text-light);
 }
 
 .p-datepicker {
@@ -41,11 +78,13 @@ p-datepicker-year {
 // add background when hovering a selectable date
 .p-datepicker table td > span {
     &:not(.p-highlight):not(.p-disabled) {
+        transition: all ease 0.2s;
         &:hover {
-            background-color: $sd-colour-background__menu-item--hover;
+            background-color: var(--sd-colour-interactive--alpha-10);
+            box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
         }
         &:active {
-            background-color: $sd-colour-background__menu-item--active;
+            background-color: var(--sd-colour-interactive--alpha-20);
         }
     }
 }
@@ -56,19 +95,30 @@ p-datepicker-year {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 28px;
-    height: 28px;
+    width: 32px;
+    height: 32px;
     border-radius: $border-radius__base--x-small;
     font-weight: normal;
-    margin-left: 3px;
-    margin-right: 3px;
+    margin-left: 4px;
+    margin-right: 4px;
     transition: $sd-transition__menu-item;
 }
 
+.p-datepicker table thead th > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 24px;
+    text-align: center;
+    font-weight: normal;
+    margin-left: 4px;
+    margin-right: 4px;
+}
 
 // selected date style
 .p-datepicker .p-highlight {
-    background-color: $sd-colour-interactive__base;
+    background-color: $sd-colour-interactive;
     color: $white;
 }
 
@@ -85,7 +135,7 @@ p-datepicker-year {
     }
 
     &:not(.p-disabled) .p-button-icon-left:hover {
-        color: $sd-colour-interactive__base;
+        color: $sd-colour-interactive;
     }
 }
 
@@ -128,4 +178,7 @@ p-datepicker-year {
         }
 
     }
+}
+.p-datepicker-calendar {
+    margin-bottom: 8px;
 }

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

@@ -1,3 +1,12 @@
+.p-dialog-mask.p-component-overlay {
+    background-color: hsla(214, 13%, 16%, 0.5) !important;
+    backdrop-filter: blur(1px);
+    -webkit-backdrop-filter: blur(1px);
+    z-index: 1000;
+}
+
+
+
 .p-dialog-mask {
     position: fixed;
     top: 0;
@@ -26,21 +35,32 @@
     pointer-events: auto;
     max-height: 90%;
     transform: scale(1);
+    
+    overflow: hidden;
 }
 
 .p-dialog-content {
     overflow-y: auto;
 }
 
+.p-dialog-flex {
+    display: flex;
+}
+
 .p-dialog-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
+    height: $height__modal-header;
 }
 
 .p-dialog-footer {
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: $height__modal-footer;
 }
 
 .p-dialog .p-dialog-header-icons {
@@ -189,46 +209,50 @@
 
 
 .p-dialog {
-    border-radius: 3px;
-    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border-radius: $border-radius__base--large;
+    box-shadow: var(--sd-shadow__modal);
     border: 0 none;
+    background-color: var(--color-modal-Bg);
 }
 
 .p-dialog .p-dialog-header {
     border-bottom: 0 none;
-    background: #ffffff;
-    color: #495057;
-    padding: 1.5rem;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
+    background: transparent;
+    position: relative;
+    z-index: 1012;
+    padding: 0.8rem 0.8rem 0.8rem 1.6rem;
+    border-top-right-radius: $border-radius__base--large;
+    border-top-left-radius: $border-radius__base--large;
+    box-shadow: 0 1px 0 var(--sd-colour-line--x-light);
 }
 
 .p-dialog .p-dialog-header .p-dialog-title {
-    font-weight: 600;
-    font-size: 1.25rem;
+    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 {
-    width: 2rem;
-    height: 2rem;
-    color: #6c757d;
+    width: 2.4rem;
+    height: 2.4rem;
     border: 0 none;
     background: transparent;
-    border-radius: 50%;
+    border-radius: $border-radius__base--full;
     transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-    margin-right: 0.5rem;
+    margin-right: 0;
 }
 
 .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
-    color: #495057;
     border-color: transparent;
-    background: #e9ecef;
+
 }
 
-.p-dialog .p-dialog-header .p-dialog-header-icon:focus {
+.p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    box-shadow: $icn-button-focus-box-shadow;
 }
 
 .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
@@ -236,19 +260,23 @@
 }
 
 .p-dialog .p-dialog-content {
-    background: #ffffff;
-    color: #495057;
-    padding: 0 1.5rem 2rem 1.5rem;
+    background-color: transparent;
+    font-size: 1.4rem;
+    p {
+        line-height: 1.5;
+    }
 }
 
 .p-dialog .p-dialog-footer {
     border-top: 0 none;
-    background: #ffffff;
-    color: #495057;
-    padding: 0 1.5rem 1.5rem 1.5rem;
-    text-align: right;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
+    background-color: transparent;
+    padding: 0.8rem 1.6rem;
+    text-align: end;
+    border-bottom-right-radius: $border-radius__base--full;
+    border-bottom-left-radius: $border-radius__base--full;
+    box-shadow: 0 -1px 0 var(--sd-colour-line--x-light);
+    position: relative;
+    z-index: 2;
 }
 
 .p-dialog .p-dialog-footer button {
@@ -256,6 +284,84 @@
     width: auto;
 }
 
-.p-dialog-mask.p-component-overlay {
-    background-color: rgba(0, 0, 0, 0.4);
-}
+.p-dialog-header-close {
+    .p-dialog-header-close-icon {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        font-size: 16px;
+        font-family: 'sd_icons';
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        color: var(--color-icon-default);
+        -webkit-font-smoothing: antialiased;
+        -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;
+            opacity: 1;
+        }
+    }
+}
+
+.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;
+    }
+    &--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;
+    }
+}
+
+.p-dialog-content {
+    //max-height: 100%;
+    .sd-main-content-grid {
+        height: 100% !important;
+    }
+}