superdesk-ui-framework 3.0.18 → 3.0.20

package/dist/superdesk-ui.bundle.css

@@ -11011,7 +11011,20 @@
   --sd-colour-bg__desk-select: var(--sd-colour-interactive);
   --sd-colour-bg__desk-select--worspace: hsla(306, 25%, 49%, 1);
   --sd-colour__tag-label-Bg--inverse: var(--sd-colour-bg--08);
-  --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 98%, 1); }
+  --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 98%, 1);
+  --sd-colour-avatar-bg: hsl(197, 100%, 25%);
+  --sd-colour-avatar-border: var(--sd-colour-avatar-bg);
+  --sd-colour-avatar-bg--light: hsla(214, 13%, 90%, 1);
+  --sd-colour-avatar-border--light: hsla(214, 13%, 65%, 1);
+  --sd-colour-avatar-border--light-hover: hsla(214, 13%, 45%, 1);
+  --sd-colour-avatar-dummy: hsla(214, 13%, 75%, 0.60);
+  --sd-colour-avatar-add: hsla(214, 13%, 55%, 1);
+  --sd-colour-avatar-add--hover: hsla(214, 13%, 45%, 1);
+  --sd-colour-avatar-outline--offline: hsla(214, 13%, 85%, 1);
+  --sd-colour-avatar-outline--online: var(--sd-colour-success);
+  --sd-colour-state--default: var(--color-text-lighter);
+  --sd-colour-state--in-progress: var(--sd-colour-highlight);
+  --sd-colour-state--done: var(--sd-colour-success); }
 
 [data-theme="dark-ui"] {
   --sd-colour-interactive-hs:             160, 50%;
@@ -11119,7 +11132,18 @@
   --sd-colour-bg__desk-select: hsla(160, 50%, 50%, 0.20);
   --sd-colour-bg__desk-select--worspace: hsla(306, 25%, 49%, 0.28);
   --sd-colour__tag-label-Bg--inverse: hsla(214, 13%, 55%, 0.95);
-  --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 10%, 1); }
+  --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 10%, 1);
+  --sd-colour-avatar-bg: hsl(197, 100%, 25%);
+  --sd-colour-avatar-border: hsl(197, 100%, 25%);
+  --sd-colour-avatar-bg--light: hsla(214, 13%, 20%, 1);
+  --sd-colour-avatar-border--light: hsla(214, 13%, 45%, 1);
+  --sd-colour-avatar-border--light-hover: hsla(214, 13%, 65%, 1);
+  --sd-colour-avatar-dummy: hsla(214, 13%, 98%, 0.25);
+  --sd-colour-avatar-add: hsla(214, 13%, 65%, 1);
+  --sd-colour-avatar-add--hover: hsla(214, 13%, 90%, 1);
+  --sd-colour-state--default: var(--color-text-lighter);
+  --sd-colour-state--in-progress: var(--sd-colour-highlight);
+  --sd-colour-state--done: var(--sd-colour-success); }
 
 [data-theme="accessible-light-ui"],
 [data-theme="contrast-light-ui"] {
@@ -60981,22 +61005,16 @@ i.sd-sidetab-menu__helper-icon {
 .sd-avatar {
   display: inline-block;
   position: relative; }
-  .sd-avatar--indicator-status--offline, .sd-avatar--indicator-status--online {
-    display: block;
-    background-color: var(--sd-item__main-Bg);
-    height: 8px;
-    width: 8px;
-    border-radius: var(--b-radius--full);
-    position: absolute;
-    inset-block-end: -1px;
-    inset-inline-start: auto;
-    inset-inline-end: -4px;
-    box-shadow: 0px 0 0 2px var(--sd-item__main-Bg);
-    border: 1px solid #a2c59e;
-    box-sizing: border-box; }
-  .sd-avatar--indicator-status--online {
-    background-color: #67b461;
-    border: 1px solid #67b461; }
+  .sd-avatar.sd-avatar--indicator-status--offline .sd-avatar-content {
+    outline: 2px solid var(--sd-colour-avatar-outline--offline);
+    outline-offset: 2px; }
+  .sd-avatar.sd-avatar--indicator-status--offline.sd-avatar--x-small .sd-avatar-content, .sd-avatar.sd-avatar--indicator-status--offline.sd-avatar--small .sd-avatar-content {
+    outline: 1px solid var(--sd-colour-avatar-outline--offline); }
+  .sd-avatar.sd-avatar--indicator-status--online .sd-avatar-content {
+    outline: 2px solid var(--sd-colour-avatar-outline--online);
+    outline-offset: 2px; }
+  .sd-avatar.sd-avatar--indicator-status--online.sd-avatar--x-small .sd-avatar-content, .sd-avatar.sd-avatar--indicator-status--online.sd-avatar--small .sd-avatar-content {
+    outline: 1px solid var(--sd-colour-avatar-outline--online); }
   .sd-avatar--indicator-admin {
     border-radius: var(--b-radius--full);
     position: absolute;
@@ -61016,6 +61034,13 @@ i.sd-sidetab-menu__helper-icon {
       height: 8px;
       z-index: -1;
       border-radius: var(--b-radius--full); }
+  .sd-avatar--x-small {
+    height: 20px;
+    width: 20px;
+    font-size: 1rem; }
+    .sd-avatar--x-small .sd-avatar--indicator-admin {
+      inset-block-start: -4px;
+      left: -6px; }
   .sd-avatar--small {
     height: 24px;
     width: 24px;
@@ -61026,12 +61051,12 @@ i.sd-sidetab-menu__helper-icon {
   .sd-avatar--medium {
     height: 30px;
     width: 30px;
-    font-size: 1rem; }
+    font-size: 1.4rem; }
   .sd-avatar--large {
     height: 48px;
     width: 48px;
     font-size: 1.8rem; }
-    .sd-avatar--large .sd-avatar--indicator-status--offline, .sd-avatar--large .sd-avatar--indicator-status--online,
+    .sd-avatar--large .sd-avatar--indicator-status--offline,
     .sd-avatar--large .sd-avatar--indicator-status--online {
       height: 12px;
       width: 12px;
@@ -61046,7 +61071,7 @@ i.sd-sidetab-menu__helper-icon {
     height: 96px;
     width: 96px;
     font-size: 3.2rem; }
-    .sd-avatar--x-large .sd-avatar--indicator-status--offline, .sd-avatar--x-large .sd-avatar--indicator-status--online,
+    .sd-avatar--x-large .sd-avatar--indicator-status--offline,
     .sd-avatar--x-large .sd-avatar--indicator-status--online {
       height: 16px;
       width: 16px;
@@ -61067,7 +61092,7 @@ i.sd-sidetab-menu__helper-icon {
     height: 120px;
     width: 120px;
     font-size: 4rem; }
-    .sd-avatar--xx-large .sd-avatar--indicator-status--offline, .sd-avatar--xx-large .sd-avatar--indicator-status--online,
+    .sd-avatar--xx-large .sd-avatar--indicator-status--offline,
     .sd-avatar--xx-large .sd-avatar--indicator-status--online {
       height: 18px;
       width: 18px;
@@ -61099,13 +61124,83 @@ i.sd-sidetab-menu__helper-icon {
     .sd-avatar .sd-avatar-content > img {
       width: 100%; }
     .sd-avatar .sd-avatar-content--text {
-      background-color: #005b7f; }
-    .sd-avatar .sd-avatar-content--empty {
-      background-color: #005b7f;
-      background-image: url(avatar_64.png);
+      background-color: var(--sd-colour-avatar-bg); }
+    .sd-avatar .sd-avatar-content--dummy-img {
+      background-color: var(--sd-colour-avatar-bg);
+      background-image: url(avatar_dummy.svg);
       background-repeat: no-repeat;
       background-size: cover;
-      box-shadow: inset 0 0 0 1px #005b7f; }
+      border: 1px solid var(--sd-colour-avatar-border); }
+    .sd-avatar .sd-avatar-content.sd-avatar-content--add-item {
+      background-color: var(--sd-colour-avatar-bg--light);
+      border: 1px dashed var(--sd-colour-avatar-border--light);
+      background-image: linear-gradient(var(--sd-colour-avatar-add) 0 0), linear-gradient(var(--sd-colour-avatar-add) 0 0);
+      background-position: center;
+      background-size: 50% 2px,2px 50%;
+      /*thickness = 2px, length = 50% (25px)*/
+      background-repeat: no-repeat;
+      outline: 1px solid transparent;
+      outline-offset: 0px;
+      transition: all 0.2s ease; }
+    .sd-avatar .sd-avatar-content.sd-avatar-content--add-item--clickable:hover {
+      background-image: linear-gradient(var(--sd-colour-avatar-add--hover) 0 0), linear-gradient(var(--sd-colour-avatar-add--hover) 0 0);
+      cursor: pointer;
+      outline: 1px solid var(--sd-colour-interactive);
+      outline-offset: 2px; }
+    .sd-avatar .sd-avatar-content.sd-avatar-content--add-item--clickable:active {
+      background-image: linear-gradient(var(--sd-colour-avatar-add) 0 0), linear-gradient(var(--sd-colour-avatar-add) 0 0);
+      cursor: pointer;
+      outline: 2px solid var(--sd-colour-interactive); }
+    .sd-avatar .sd-avatar-content.sd-avatar-content--number {
+      background-color: var(--sd-colour-avatar-bg--light);
+      color: var(--color-text-light);
+      outline: 1px solid transparent;
+      outline-offset: 0px;
+      transition: all 0.2s ease; }
+      .sd-avatar .sd-avatar-content.sd-avatar-content--number:hover {
+        cursor: pointer;
+        outline: 1px solid var(--sd-colour-interactive);
+        outline-offset: 2px; }
+      .sd-avatar .sd-avatar-content.sd-avatar-content--number:active {
+        cursor: pointer;
+        outline: 2px solid var(--sd-colour-interactive); }
+  .sd-avatar.sd-avatar--empty-light .sd-avatar-content--dummy-img {
+    background-color: var(--sd-colour-avatar-bg--light);
+    border: 1px dashed var(--sd-colour-avatar-border--light); }
+  .sd-avatar .sd-avatar__icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    inset-block-end: -4px;
+    inset-inline-end: -4px; }
+    .sd-avatar .sd-avatar__icon [class^="icon-"], .sd-avatar .sd-avatar__icon [class*=" icon-"] {
+      text-shadow: -1px 1px 0 var(--sd-item__main-Bg), 1px 1px 0 var(--sd-item__main-Bg), 1px -1px 0 var(--sd-item__main-Bg), -1px -1px 0 var(--sd-item__main-Bg); }
+  .sd-avatar.sd-avatar--x-small .sd-avatar__icon {
+    inset-block-end: -4px;
+    inset-inline-end: -10px; }
+  .sd-avatar.sd-avatar--small .sd-avatar__icon {
+    inset-block-end: -4px;
+    inset-inline-end: -8px; }
+  .sd-avatar.sd-avatar--medium .sd-avatar__icon {
+    inset-block-end: -3px;
+    inset-inline-end: -6px; }
+  .sd-avatar.sd-avatar--large .sd-avatar__icon {
+    inset-block-end: -1px;
+    inset-inline-end: -4px; }
+  .sd-avatar.sd-avatar--x-large .sd-avatar__icon {
+    inset-block-end: -2px;
+    inset-inline-end: -4px; }
+    .sd-avatar.sd-avatar--x-large .sd-avatar__icon [class^="icon-"], .sd-avatar.sd-avatar--x-large .sd-avatar__icon [class*=" icon-"] {
+      --icon-base-size: 32px;
+      text-shadow: -2px 2px 0 var(--sd-item__main-Bg), 2px 2px 0 var(--sd-item__main-Bg), 2px -2px 0 var(--sd-item__main-Bg), -2px -2px 0 var(--sd-item__main-Bg); }
+  .sd-avatar.sd-avatar--xx-large .sd-avatar__icon {
+    inset-block-end: -1px;
+    inset-inline-end: -2px; }
+    .sd-avatar.sd-avatar--xx-large .sd-avatar__icon [class^="icon-"], .sd-avatar.sd-avatar--xx-large .sd-avatar__icon [class*=" icon-"] {
+      --icon-base-size: 32px;
+      text-shadow: -2px 2px 0 var(--sd-item__main-Bg), 2px 2px 0 var(--sd-item__main-Bg), 2px -2px 0 var(--sd-item__main-Bg), -2px -2px 0 var(--sd-item__main-Bg); }
 
 .sd-avatar-group {
   display: flex; }
@@ -61120,6 +61215,23 @@ i.sd-sidetab-menu__helper-icon {
         box-shadow: 0 0 0 2px var(--avatar-shadow); }
       .sd-avatar-group.sd-avatar-group--stacked > .sd-avatar--large {
         margin: 0 -1.2rem 0 0; }
+      .sd-avatar-group.sd-avatar-group--stacked > .sd-avatar:hover {
+        z-index: 100; }
+    .sd-avatar-group.sd-avatar-group--stacked.sd-avatar-group--stacked--gap-small {
+      gap: 0.4rem;
+      margin-inline-end: 0; }
+      .sd-avatar-group.sd-avatar-group--stacked.sd-avatar-group--stacked--gap-small > .sd-avatar {
+        margin: 0; }
+    .sd-avatar-group.sd-avatar-group--stacked.sd-avatar-group--stacked--gap-medium {
+      gap: 0.8rem;
+      margin-inline-end: 0; }
+      .sd-avatar-group.sd-avatar-group--stacked.sd-avatar-group--stacked--gap-medium > .sd-avatar {
+        margin: 0; }
+    .sd-avatar-group.sd-avatar-group--stacked.sd-avatar-group--stacked--gap-large {
+      gap: 1.2rem;
+      margin-inline-end: 0; }
+      .sd-avatar-group.sd-avatar-group--stacked.sd-avatar-group--stacked--gap-large > .sd-avatar {
+        margin: 0; }
   .sd-avatar-group.sd-avatar-group--grid {
     flex-wrap: wrap;
     justify-content: flex-start;