superdesk-ui-framework 3.0.74 → 3.0.76

package/dist/superdesk-ui.bundle.css

@@ -11548,6 +11548,9 @@
   --space--3: calc(3 * var(--base-increment));
   --space--4: calc(4 * var(--base-increment));
   --space--5: calc(5 * var(--base-increment));
+  --space--6: calc(6 * var(--base-increment));
+  --space--7: calc(7 * var(--base-increment));
+  --space--8: calc(8 * var(--base-increment));
   --gap--none: 0;
   --gap--x-small: 0.4rem;
   --gap--small: 0.8rem;
@@ -11578,6 +11581,10 @@
   --width__modal--large: 80rem;
   --width__modal--x-large: 80vw;
   --text-size--base: 1rem;
+  --text-size-x-small: calc(var(--text-size--base) * 1.2);
+  --text-size-small: calc(var(--text-size--base) * 1.4);
+  --text-size-medium: calc(var(--text-size--base) * 1.6);
+  --text-size-large: calc(var(--text-size--base) * 2);
   --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
   --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.16), 0 2px 6px hsla(0, 0%, 0%, 0.12), 0 0 1px hsla(0, 0%, 0%, 0.1);
   --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
@@ -11585,7 +11592,10 @@
   --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
   --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
   --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
-  --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1)); }
+  --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+  --form-element-height-small: var(--space--3);
+  --form-element-height-medium: var(--space--4);
+  --form-element-height-large: var(--space--5); }
 
 :root,
 [data-theme="light-ui"] {
@@ -18611,7 +18621,8 @@ h6 {
     border-inline-width: 0 1px; }
 
 .button-group--right, .button-group--end {
-  margin-inline-start: auto; }
+  margin-inline-start: auto;
+  justify-content: flex-end; }
 
 .button-group--center {
   margin-inline-start: auto;
@@ -18765,6 +18776,43 @@ h6 {
 .button-group .tag-label, .button-group .p-multiselect-token {
   margin: 0 !important; }
 
+.illustration-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space--1);
+  border-radius: var(--b-radius--large);
+  border: 1px solid var(--sd-colour-line--light);
+  padding-inline: var(--space--2);
+  padding-block-start: var(--space--2);
+  padding-block-end: var(--space--1-5);
+  box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 0, rgba(0, 0, 0, 0.16) 0px 6px 12px -6px, rgba(0, 0, 0, 0.4) 0px 2px 8px -8px;
+  transition: all 0.2s ease; }
+  .illustration-button:hover {
+    border: 1px solid var(--sd-colour-line--strong);
+    box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 0, rgba(0, 0, 0, 0.24) 0px 6px 12px -6px, rgba(0, 0, 0, 0.6) 0px 2px 8px -8px; }
+  .illustration-button:active {
+    border: 1px solid var(--sd-colour-interactive);
+    box-shadow: inset var(--sd-colour-interactive--alpha-30) 0px 0px 0px 4px; }
+  .illustration-button:focus-visible {
+    outline: 2px solid var(--sd-colour-interactive--alpha-60);
+    outline-offset: 1px; }
+  .illustration-button:disabled, .illustration-button.illustration-button--disabled {
+    box-shadow: none;
+    border: 1px solid var(--sd-colour-line--light);
+    pointer-events: none;
+    opacity: 0.6; }
+
+.illustration-button__illustration,
+.svg-icon-illustration {
+  display: inline-block; }
+
+.illustration-button__text-label {
+  font-size: var(--text-size-small);
+  font-weight: 500;
+  line-height: 1.2;
+  text-align: center; }
+
 .label {
   display: inline-flex;
   align-items: center;
@@ -35246,11 +35294,19 @@ a.label {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 0.8rem;
+    gap: var(--space--1);
     color: var(--color-text); }
     .simple-list .simple-list__item [class^="icon-"], .simple-list .simple-list__item [class*=" icon-"] {
       flex-grow: 0;
       flex-shrink: 0; }
+    .simple-list .simple-list__item.simple-list__item--gap-none {
+      gap: 0; }
+    .simple-list .simple-list__item.simple-list__item--gap-small {
+      gap: var(--space-0-5); }
+    .simple-list .simple-list__item.simple-list__item--gap-medium {
+      gap: var(--space-1); }
+    .simple-list .simple-list__item.simple-list__item--gap-large {
+      gap: var(--space-1-5); }
   .simple-list .simple-list__item--stacked {
     display: flex;
     flex-direction: column;
@@ -42122,6 +42178,8 @@ a.text-link {
     margin: 0.2rem 0 0.8rem; }
   .sd-list-item__row:only-child {
     margin: 0.2rem 0; }
+  .sd-list-item__row.sd-list-item__row--overflow-visible {
+    overflow: visible !important; }
 
 .sd-list-item__row--only-child {
   margin: 0.2rem 0 !important; }
@@ -43301,6 +43359,9 @@ a.text-link {
   grid-gap: 2.4rem;
   margin: 2.4rem; }
 
+.sd-grid-list--xx-small {
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
+
 .sd-grid-list--x-small {
   grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
 
@@ -49649,7 +49710,7 @@ textarea.sd-media-carousel__media-title {
   position: relative;
   display: block;
   position: relative;
-  padding-inline-end: 2rem;
+  padding-inline-end: var(--space--3);
   min-width: 5rem;
   cursor: pointer; }
   .sd-input__select::placeholder {
@@ -49722,25 +49783,60 @@ textarea.sd-media-carousel__media-title {
     grid-column: 2/4; }
   .sd-input.sd-input--is-select::after {
     position: relative;
-    z-index: 1;
+    font-family: 'sd_icons';
+    content: "\e64b";
     grid-row: 2/3;
     grid-column: 2/4;
+    --icon-base-size: 14px !important;
+    width: var(--icon-base-size);
+    height: var(--icon-base-size);
+    line-height: var(--icon-base-size);
+    font-size: var(--icon-base-size);
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    color: var(--color-icon-default);
+    -webkit-font-smoothing: antialiased;
     align-self: center;
     justify-self: flex-end;
     display: inline-block;
-    width: 0;
-    height: 0;
-    margin-inline-end: 1rem;
-    vertical-align: middle;
-    border-inline-start: 0.4rem solid transparent;
-    border-inline-end: 0.4rem solid transparent;
-    border-block-start: 0.4rem solid var(--color-text);
+    margin-inline-end: var(--space--1);
     pointer-events: none;
     opacity: 0.4;
-    content: "";
-    z-index: 0; }
+    z-index: 0;
+    transition: opacity 0.2s ease; }
   .sd-input.sd-input--is-select:hover::after {
     opacity: 0.6; }
+  .sd-input .sd-input__select-caret-wrapper {
+    position: relative;
+    display: block; }
+    .sd-input .sd-input__select-caret-wrapper::after {
+      --icon-base-size: 14px !important;
+      font-family: 'sd_icons';
+      content: "\e64b";
+      position: absolute;
+      inset-block-start: 10px;
+      inset-inline-end: 0;
+      width: var(--icon-base-size);
+      height: var(--icon-base-size);
+      line-height: var(--icon-base-size);
+      font-size: var(--icon-base-size);
+      speak: none;
+      font-style: normal;
+      font-weight: normal;
+      font-variant: normal;
+      text-transform: none;
+      color: var(--color-text);
+      -webkit-font-smoothing: antialiased;
+      margin-inline-end: var(--space--1);
+      pointer-events: none;
+      opacity: 0.6;
+      z-index: 0;
+      transition: opacity 0.2s ease; }
+    .sd-input .sd-input__select-caret-wrapper:hover::after {
+      opacity: 1; }
   .sd-input .sd-input__message-box {
     grid-row: 3/4;
     grid-column: 2/3; }