superdesk-ui-framework 3.1.5 → 3.1.7

package/dist/superdesk-ui.bundle.css

@@ -11661,13 +11661,21 @@
   --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;
-  --gap--medium-small: 1.2rem;
-  --gap--medium: 1.6rem;
-  --gap--large: 2.4rem;
-  --gap--x-large: 3.2rem;
-  --gap--xx-large: 4rem;
+  --gap-0: 0;
+  --gap--x-small: calc(0.5 * var(--base-increment));
+  --gap-0-5: calc(0.5 * var(--base-increment));
+  --gap--small: calc(1 * var(--base-increment));
+  --gap-1: calc(1 * var(--base-increment));
+  --gap--medium-small: calc(1.5 * var(--base-increment));
+  --gap-1-5: calc(1.5 * var(--base-increment));
+  --gap--medium: calc(2 * var(--base-increment));
+  --gap-2: calc(2 * var(--base-increment));
+  --gap--large: calc(3 * var(--base-increment));
+  --gap-3: calc(3 * var(--base-increment));
+  --gap--x-large: calc(4 * var(--base-increment));
+  --gap-4: calc(4 * var(--base-increment));
+  --gap--xx-large: calc(5 * var(--base-increment));
+  --gap-5: calc(5 * var(--base-increment));
   --gap--auto: auto;
   --b-radius--x-small: 2px;
   --b-radius--small: 3px;
@@ -11690,10 +11698,13 @@
   --width__modal--large: 80rem;
   --width__modal--x-large: 80vw;
   --text-size--base: 1rem;
+  --text-size-xx-small: calc(var(--text-size--base) * 1);
   --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);
+  --text-size-x-large: calc(var(--text-size--base) * 2.4);
+  --text-size-xx-large: calc(var(--text-size--base) * 3.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);
@@ -12202,9 +12213,11 @@
   --sd-colour-background__base--20:     hsla(0, 0%, 80%, 1);
   --sd-colour-background__base--30:     hsla(0, 0%, 70%, 1);
   --color-text:                         hsla(214, 13%, 20%, 1);
-  --color-text--inverse:                hsla(214, 13%, 98%, 1);
   --color-text-light:                   hsla(214, 13%, 40%, 1);
+  --color-text-muted:                   hsla(214, 13%, 40%, 1);
   --color-text-lighter:                 hsla(214, 13%, 60%, 1);
+  --color-text-subdued:                 hsla(214, 13%, 60%, 1);
+  --color-text--inverse:                hsla(214, 13%, 98%, 1);
   --color-icon-default:                 hsla(214, 13%, 30%, 1);
   --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
   --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
@@ -12259,7 +12272,10 @@
   --sd-colour-background__base--30:     hsla(0, 0%, 30%, 1);
   --color-text:                         hsla(0, 0%, 96%, 1);
   --color-text-light:                   hsla(214, 13%, 76%, 1);
+  --color-text-muted:                   hsla(214, 13%, 76%, 1);
   --color-text-lighter:                 hsla(214, 13%, 56%, 1);
+  --color-text-subdued:                 hsla(214, 13%, 56%, 1);
+  --color-text--inverse:                hsla(214, 13%, 20%, 1);
   --color-icon-default:                 hsla(214, 13%, 90%, 1);
   --sd-slugline-color:                  hsla(197, 60%, 75%, 1) !important;
   --sd-time-schedule-color:             hsla(268, 60%, 65%, 1);
@@ -17374,103 +17390,6 @@ h6 {
   color: var(--color-text-light);
   letter-spacing: 0.025em; }
 
-.sd-text__light,
-.sd-text--light {
-  font-weight: 300; }
-
-.sd-text__normal,
-.sd-text--normal {
-  font-weight: 400; }
-
-.sd-text--medium {
-  font-weight: 500; }
-
-.sd-text__strong,
-.sd-text--strong {
-  font-weight: 700; }
-
-.sd-text--bold {
-  font-weight: 700; }
-
-.sd-text__italic,
-.sd-text--italic {
-  font-style: italic; }
-
-.sd-text--non-italic {
-  font-style: normal; }
-
-.sd-text-align--left,
-.sd-text-align--start {
-  text-align: start; }
-
-.sd-text__center,
-.sd-text-align--center {
-  text-align: center; }
-
-.sd-text__right,
-.sd-text-align--right,
-.sd-text-align--end {
-  text-align: end; }
-
-.sd-text-align--justify {
-  text-align: justify; }
-
-.sd-text__serif,
-.sd-text--serif {
-  font-family: "Merriweather", Georgia, "Times New Roman", Times, serif; }
-
-.sd-text--sans {
-  font-family: "Roboto", Helvetica, Arial, sans-serif; }
-
-.sd-text--mono {
-  font-family: "Roboto Mono", "Consolas", "monaco", monospace; }
-
-.sd-word-break--normal {
-  overflow-wrap: normal;
-  word-break: normal; }
-
-.sd-word-break--words {
-  overflow-wrap: break-word; }
-
-.sd-word-break--all {
-  word-break: break-all; }
-
-.sd-whitespace--normal {
-  white-space: normal; }
-
-.sd-whitespace--nowrap {
-  white-space: nowrap; }
-
-.sd-whitespace--pre {
-  white-space: pre; }
-
-.sd-whitespace--pre-line {
-  white-space: pre-line; }
-
-.sd-whitespace--pre-wrap {
-  white-space: pre-wrap; }
-
-.sd-txt-transform--uppercase {
-  text-transform: uppercase; }
-
-.sd-txt-transform--lowercase {
-  text-transform: lowercase; }
-
-.sd-txt-transform--capitalize {
-  text-transform: capitalize; }
-
-.sd-txt-transform--none {
-  text-transform: none; }
-
-.sd-txt-decoration--underline {
-  text-decoration: underline; }
-
-.sd-txt-decoration--line-through {
-  text-decoration: line-through; }
-
-.sd-txt-decoration--none {
-  text-decoration: none; }
-
 .sd-line-clamp--1 {
   overflow: hidden;
   display: -webkit-box;
@@ -17574,12 +17493,18 @@ h6 {
 .sd-opacity--75 {
   opacity: 0.75 !important; }
 
+.m-auto,
+.sd-margin--auto {
+  margin: auto !important; }
+
 .ml-auto,
+.ms-auto,
 .sd-margin-l--auto,
 .sd-margin-s--auto {
   margin-inline-start: auto !important; }
 
 .mr-auto,
+.me-auto,
 .sd-margin-r--auto,
 .sd-margin-e--auto {
   margin-inline-end: auto !important; }
@@ -17593,17 +17518,16 @@ h6 {
   margin-block-end: auto !important; }
 
 .mlr-auto,
+.mx-auto,
 .sd-margin-x--auto {
   margin-inline-start: auto !important;
   margin-inline-end: auto !important; }
 
+.my-auto,
 .sd-margin-y--auto {
   margin-block-start: auto !important;
   margin-block-end: auto !important; }
 
-.sd-margin--auto {
-  margin: auto !important; }
-
 .m-0,
 .sd-margin--0 {
   margin: 0 !important; }
@@ -18012,7 +17936,7 @@ h6 {
 .sd-padding-t--5 {
   padding-block-start: calc(5 * var(--base-increment)) !important; }
 
-.pb--0,
+.pb-0,
 .sd-padding-b--0 {
   padding-block-end: 0 !important; }
 
@@ -18239,27 +18163,248 @@ h6 {
 .sd-border-width--3 {
   border-width: 3px; }
 
-.sd-font-size--x-small {
+.text-2xs {
+  font-size: calc(var(--text-size--base) * 1); }
+
+.sd-font-size--x-small,
+.text-xs {
   font-size: calc(var(--text-size--base) * 1.2); }
 
-.sd-font-size--small {
+.sd-font-size--small,
+.text-sm {
   font-size: calc(var(--text-size--base) * 1.4); }
 
-.sd-font-size--medium {
+.sd-font-size--medium,
+.text-md {
   font-size: calc(var(--text-size--base) * 1.6); }
 
-.sd-font-size--large {
+.sd-font-size--large,
+.text-lg {
   font-size: calc(var(--text-size--base) * 2); }
 
-.sd-text-color--lighter {
-  color: var(--color-text-lighter) !important; }
+.sd-font-size--x-large,
+.text-xl {
+  font-size: calc(var(--text-size--base) * 2.4); }
 
-.sd-text-color--light {
-  color: var(--color-text-light) !important; }
+.sd-font-size--x-large,
+.text-2xl {
+  font-size: calc(var(--text-size--base) * 3.2); }
 
-.sd-text-color--normal {
+.sd-text-color--normal,
+.text-color-normal {
   color: var(--color-text) !important; }
 
+.sd-text-color--light,
+.text-color-muted {
+  color: var(--color-text-light) !important; }
+
+.sd-text-color--lighter,
+.text-color-subdued {
+  color: var(--color-text-lighter) !important; }
+
+.sd-text-color--inverse,
+.text-color-inverse {
+  color: var(--color-text--inverse) !important; }
+
+.sd-text__light,
+.sd-text--light,
+.font-light {
+  font-weight: 300; }
+
+.sd-text__normal,
+.sd-text--normal,
+.font-normal {
+  font-weight: 400; }
+
+.sd-text--medium,
+.font-medium {
+  font-weight: 500; }
+
+.sd-text--medium,
+.font-semibold {
+  font-weight: 500; }
+
+.sd-text__strong,
+.sd-text--strong,
+.sd-text--bold,
+.font-bold {
+  font-weight: 700; }
+
+.font-black {
+  font-weight: 900; }
+
+.sd-text__italic,
+.sd-text--italic,
+.italic {
+  font-style: italic; }
+
+.sd-text--non-italic,
+.non-italic {
+  font-style: normal; }
+
+.sd-text-align--left,
+.sd-text-align--start,
+.text-start,
+.text-left {
+  text-align: start; }
+
+.sd-text__center,
+.sd-text-align--center,
+.text-center {
+  text-align: center; }
+
+.sd-text__right,
+.sd-text-align--right,
+.sd-text-align--end,
+.text-end {
+  text-align: end; }
+
+.sd-text-align--justify,
+.text-justify {
+  text-align: justify; }
+
+.sd-text__serif,
+.sd-text--serif {
+  font-family: "Merriweather", Georgia, "Times New Roman", Times, serif; }
+
+.sd-text--sans {
+  font-family: "Roboto", Helvetica, Arial, sans-serif; }
+
+.sd-text--mono {
+  font-family: "Roboto Mono", "Consolas", "monaco", monospace; }
+
+.sd-whitespace--normal,
+.whitespace-normal {
+  white-space: normal; }
+
+.sd-whitespace--nowrap,
+.whitespace-nowrap {
+  white-space: nowrap; }
+
+.sd-whitespace--pre,
+.whitespace-pre {
+  white-space: pre; }
+
+.sd-whitespace--pre-line,
+.whitespace-pre-line {
+  white-space: pre-line; }
+
+.sd-whitespace--pre-wrap,
+.whitespace-pre-wrap {
+  white-space: pre-wrap; }
+
+.whitespace-break-spaces {
+  white-space: break-spaces; }
+
+.sd-txt-transform--uppercase,
+.text-uppercase {
+  text-transform: uppercase; }
+
+.sd-txt-transform--lowercase,
+.text-lowercase {
+  text-transform: lowercase; }
+
+.sd-txt-transform--capitalize,
+.text-capitalize {
+  text-transform: capitalize; }
+
+.sd-txt-transform--none,
+.text-normal-case {
+  text-transform: none; }
+
+.sd-txt-decoration--underline,
+.text-underline {
+  text-decoration: underline; }
+
+.sd-txt-decoration--line-through,
+.text-line-through {
+  text-decoration: line-through; }
+
+.sd-txt-decoration--none,
+.text-no-underline {
+  text-decoration: none; }
+
+.sd-overflow-ellipsis,
+.sd-overflow--ellipsis,
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap; }
+
+.text-clip {
+  text-overflow: clip; }
+
+.text-wrap {
+  text-wrap: wrap; }
+
+.text-nowrap {
+  text-wrap: clip; }
+
+.text-balance {
+  text-wrap: balance; }
+
+.text-pretty {
+  text-wrap: pretty; }
+
+.sd-word-break--normal,
+.break-normal {
+  overflow-wrap: normal;
+  word-break: normal; }
+
+.sd-word-break--words,
+.break-words {
+  overflow-wrap: break-word; }
+
+.sd-word-break--all,
+.break-all {
+  word-break: break-all; }
+
+.sd-line-clamp--1,
+.line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1; }
+
+.sd-line-clamp--2,
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2; }
+
+.sd-line-clamp--3,
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3; }
+
+.sd-line-clamp--4,
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4; }
+
+.sd-line-clamp--5,
+.line-clamp-5 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5; }
+
+.sd-line-clamp--6,
+.line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6; }
+
+.sd-line-clamp--none,
+.line-clamp-none {
+  -webkit-line-clamp: none; }
+
 .sd-panel-bg--100 {
   background-color: var(--sd-colour-panel-bg--100); }
 
@@ -18326,9 +18471,60 @@ h6 {
 .sd-gap--auto {
   gap: var(--gap--auto); }
 
+.max-h-5 {
+  max-height: calc(5 * var(--base-increment)) !important; }
+
+.max-h-6 {
+  max-height: calc(6 * var(--base-increment)) !important; }
+
+.max-h-8 {
+  max-height: calc(8 * var(--base-increment)) !important; }
+
+.max-h-10 {
+  max-height: calc(10 * var(--base-increment)) !important; }
+
+.max-h-15 {
+  max-height: calc(15 * var(--base-increment)) !important; }
+
+.max-h-20 {
+  max-height: calc(20 * var(--base-increment)) !important; }
+
+.max-h-25 {
+  max-height: calc(25 * var(--base-increment)) !important; }
+
+.max-h-30 {
+  max-height: calc(30 * var(--base-increment)) !important; }
+
 .max-h-full {
   max-height: 100%; }
 
+.max-h-screen {
+  max-height: 100svh; }
+
+.gap-0 {
+  gap: var(--gap-0); }
+
+.gap-0-5 {
+  gap: var(--gap-0-5); }
+
+.gap-1 {
+  gap: var(--gap-1); }
+
+.gap-1-5 {
+  gap: var(--gap-1-5); }
+
+.gap-2 {
+  gap: var(--gap-2); }
+
+.gap-3 {
+  gap: var(--gap-3); }
+
+.gap-4 {
+  gap: var(--gap-4); }
+
+.gap-5 {
+  gap: var(--gap-5); }
+
 :root {
   --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14); }
 
@@ -38253,6 +38449,31 @@ input.sd-inset-search__input {
   background-color: currentColor;
   margin-block: auto; }
 
+.expand-button {
+  --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
+  --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
+  --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 3.2rem;
+  transition: all 0.2s ease;
+  outline: none;
+  padding-inline: var(--space--0-5);
+  background-color: var(--sd-btn-bg);
+  border-radius: 0 var(--b-radius--medium) var(--b-radius--medium) 0;
+  opacity: 0.75;
+  color: var(--color-text); }
+  .expand-button [class^="icon-"], .expand-button [class*=" icon-"] {
+    transition: transform 0.2s ease;
+    color: currentColor; }
+  .expand-button:hover {
+    padding-inline: var(--space--1); }
+  .expand-button:active {
+    opacity: 1; }
+  .expand-button.expand-button--expanded [class^="icon-"], .expand-button.expand-button--expanded [class*=" icon-"] {
+    transform: rotate(180deg); }
+
 .side-panel {
   margin: 0;
   display: grid;
@@ -38281,6 +38502,8 @@ input.sd-inset-search__input {
   .side-panel .side-panel__header--blueGreyDarker {
     background-color: var(--color-subnav-bg--blueGrey-10);
     color: white; }
+  .side-panel .side-panel__header--light {
+    background-color: var(--sd-colour-panel-bg--000); }
   .side-panel .side-panel__header--darker {
     background-color: var(--sd-colour-panel-bg--100); }
   .side-panel .side-panel__header-inner {
@@ -41378,7 +41601,8 @@ input.sd-inset-search__input {
   display: grid;
   grid-template-columns: [slideInLeft] auto [mainContent] 1fr [slideInRight] auto [overlayContainer] 0;
   grid-template-rows: [headerToolbar] auto [contentBlock] 1fr;
-  overflow: auto; }
+  overflow: auto;
+  height: 100%; }
 
 .sd-main-content-grid__header {
   grid-column: 1/4;
@@ -47664,7 +47888,8 @@ textarea.sd-media-carousel__media-title {
   z-index: 3;
   align-items: center;
   color: var(--color-text);
-  flex-shrink: 0; }
+  flex-shrink: 0;
+  flex-grow: 1; }
   .subnav .sd-check__group {
     padding: 0;
     display: flex;