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

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

@@ -1,4 +1,7 @@
-.p-dropdown {
+@import './../tag-labels';
+@import './../form-elements/checkbox';
+
+.p-dropdown, .p-multiselect {
     @include pr-input-item-base;
     padding-block-start: 6px;
     padding-block-end: 6px;
@@ -7,13 +10,16 @@
     color: $sd-text;
 }
 
-.p-dropdown-clear-icon {
+.p-dropdown-clear-icon,
+.p-multiselect-clear-icon {
     position: static;
     margin: 0;
 }
 
 .p-dropdown-clear-icon,
-.p-dropdown-trigger-icon {
+.p-multiselect-clear-icon,
+.p-dropdown-trigger-icon,
+.p-multiselect-trigger-icon {
     margin-inline-start: 8px;
 }
 
@@ -21,17 +27,18 @@
     @include pr-menu-item-base;
 }
 
-.p-dropdown-panel {
+.p-dropdown-panel,
+.p-multiselect-panel {
     @include pr-dropdown-panel-base;
 }
 
-.p-dropdown-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-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);
     border-radius: $border-radius__base--small;
@@ -47,16 +54,156 @@
     }
 }
 
-.p-dropdown-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-dropdown-empty-message, .p-multiselect-empty-message {
     padding-block-start: 6px;
     padding-block-end: 6px;
     padding-inline-start: 8px;
     padding-inline-end: 8px;
 }
+
+.p-multiselect-label {
+    display: flex;
+    align-items: center;
+}
+
+.p-multiselect-token {
+    @extend .tag-label;
+    cursor: default;
+ 
+    .pi-times-circle {
+        overflow: inherit;
+        cursor: default;
+        height: 1.8rem;
+        width: 1.8rem;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: inherit;
+        line-height: 1;
+        text-decoration: none;
+        text-align: center;
+        vertical-align: middle;
+        border-radius: var(--b-radius--full);
+        background-color: var(--sd-colour__tag-label-remove-Bg);
+        color: var(--color-text);
+        cursor: pointer;
+        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: "";
+            color: var(--color-text-light);
+            font-size: 1.6rem;
+            flex-grow: 0;
+            flex-shrink: 0;
+            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-"] {
+                    opacity: 0.85;
+                }
+            }
+        }   
+    }
+    
+    
+    
+}   
+
+.p-checkbox {
+    @extend .sd-checkbox;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+       
+    .p-checkbox-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &:hover {
+        border-color: $checkBoxBorderColorHover;
+        cursor: pointer;
+    }
+
+    .p-highlight {
+        background-color: var(--sd-colour-interactive--hover);
+        border: 2px solid var(--sd-colour-interactive--hover);
+        border-radius: $border-radius__base--x-small;
+        width: 1.6rem;
+        height: 1.6rem;
+    }
+    
+}
+
+.p-multiselect-header, .p-multiselect-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    display: flex;
+    align-items: center;
+
+    >span{
+        padding: 8px;
+    }
+}
+
+.p-multiselect-header {
+    box-shadow: 0 1px 0 var(--sd-colour-line--light);
+}
+
+.p-multiselect-filter-icon {
+    display: none;
+}
+
+.p-multiselect-close {
+    display: none;
+}
+
+.p-multiselect-filter-container {
+    box-shadow: none;
+}
+
+.p-multiselect-items {
+    li.p-highlight {
+        >span {
+            color: var(--sd-colour-interactive--hover);
+        }
+    }
+}
+
+.p-multiselect-header{
+    .p-checkbox{
+        display: none;
+    }
+}
+
+.p-multiselect-panel:not(.showSelectAll):not(.showFilter) {
+    .p-multiselect-header {
+        display: none !important;
+    }
+}
+
+.showSelectAll {
+    .p-multiselect-header{
+        .p-checkbox{
+            display: flex !important;
+        }
+    }
+}

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

@@ -1,5 +1,7 @@
 // GENERAL STYLES & MIXINS
 
+@import './../icon-font';
+
 @mixin pr-menu-item-base {
     display: block;
     font-weight: normal;
@@ -61,3 +63,5 @@ border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
 .p-disabled {
     opacity: 0.5;
 }
+
+

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

@@ -0,0 +1,35 @@
+.p-skeleton {
+    position: relative;
+    overflow: hidden;
+    background-color: #e9ecef;
+}
+
+.p-skeleton::after {
+    content: "";
+    animation: p-skeleton-animation 1.2s infinite;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateX(-100%);
+    z-index: 1;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+}
+
+.p-skeleton-circle {
+    border-radius: 50%;
+}
+
+.p-skeleton-none::after {
+    animation: none;
+}
+
+@keyframes p-skeleton-animation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}

package/app/styles/variables/_colors.scss

@@ -160,7 +160,7 @@ $sd-inputBorderColor-darkUi:          $transparent-white;
 
 
 $sd-basic-palette: (
-  default: rgba(128,128,128,1),
+  default: hsla(214, 13%, 60%, 1),
   primary: $sd-blue,
   success: $green,
   warning: $orange,
@@ -270,454 +270,4 @@ $baseColors: (
   .text-#{$color} { 
     color: $value;
   }
-}
-
-.sd-top-menu, #top-menu {
-  .navbtn, .sd-navbtn {
-    --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
-    --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important;
-  }
-}
-
-// CSS variables for default (light) theme
-
-
-[data-theme="accessible-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);
-
-  }
-}
-
-//TEMP
-.test-div {
-  height: 4rem;
-  display:flex;
-  flex-direction: row;
-  div {
-    flex-grow: 1;
-    height: 100%;
-  }
-} 
-
-
-.test-div--1 {
-  background-color: var(--sd-colour-neutral);
-}
-.test-div--2 {
-  background-color: var(--sd-colour-neutral--hover);
-}
-.test-div--3 {
-  background-color: var(--sd-colour-neutral--active);
-}
-
-.test-div--4 {
-  background-color: var(--sd-colour-primary);
-}
-.test-div--5 {
-  background-color: var(--sd-colour-primary--hover);
-}
-.test-div--6 {
-  background-color: var(--sd-colour-primary--active);
-}
-
-.test-div--7 {
-  background-color: var(--sd-colour-success);
-}
-.test-div--8 {
-  background-color: var(--sd-colour-success--hover);
-}
-.test-div--9 {
-  background-color: var(--sd-colour-success--active);
-}
-
-.test-div--10 {
-  background-color: var(--sd-colour-alert);
-}
-.test-div--11 {
-  background-color: var(--sd-colour-alert--hover);
-}
-.test-div--12 {
-  background-color: var(--sd-colour-alert--active);
-}
-
-.test-div--13 {
-  background-color: var(--sd-colour-warning);
-}
-.test-div--14 {
-  background-color: var(--sd-colour-warning--hover);
-}
-.test-div--15 {
-  background-color: var(--sd-colour-warning--active);
-}
-
-.test-div--16 {
-  background-color: var(--sd-colour-highlight);
-}
-.test-div--17 {
-  background-color: var(--sd-colour-highlight--hover);
-}
-.test-div--18 {
-  background-color: var(--sd-colour-highlight--active);
-}
-
-
-.test-div--19-1 {
-  background-color:   $ref-color-light-grey--00;
-}
-.test-div--19-2 {
-  background-color:   var(--sd-colour-bg--00);
-}
-// --
-.test-div--20-1 {
-  background-color:   $ref-color-light-grey--01;
-}
-.test-div--20-2 {
-  background-color:   var(--sd-colour-bg--01);
-}
-// --
-.test-div--21-1 {
-  background-color:   $ref-color-light-grey--02;
-}
-.test-div--21-2 {
-  background-color:   var(--sd-colour-bg--02);
-}
-// --
-.test-div--22-1 {
-  background-color:   $ref-color-light-grey--03;
-}
-.test-div--22-2 {
-  background-color:   var(--sd-colour-bg--03);
-}
-// --
-.test-div--23-1 {
-  background-color:   $ref-color-light-grey--04;
-}
-.test-div--23-2 {
-  background-color:   var(--sd-colour-bg--04);
-}
-
-.test-div--24-1 {
-  background-color:   $ref-color-light-grey--05;
-}
-.test-div--24-2 {
-  background-color:   var(--sd-colour-bg--05);
-}
-
-.test-div--25-1 {
-  background-color:   $ref-color-light-grey--06;
-}
-.test-div--25-2 {
-  background-color:   var(--sd-colour-bg--06);
-}
-
-.test-div--26-1 {
-  background-color:   $ref-color-light-grey--07;
-}
-.test-div--26-2 {
-  background-color:   var(--sd-colour-bg--07);
-}
-
-.test-div--27-1 {
-  background-color:   $ref-color-light-grey--08;
-}
-.test-div--27-2 {
-  background-color:   var(--sd-colour-bg--08);
-}
-
-
-
+}