superdesk-ui-framework 4.0.66 → 4.0.68

package/dist/superdesk-ui.bundle.css

@@ -8386,16 +8386,22 @@ h6 {
       color: var(--sd-btn-txt); }
       .btn.btn--text-only.btn--primary .sd-spinner__path, .btn.btn--text-only.btn--success .sd-spinner__path, .btn.btn--text-only.btn--warning .sd-spinner__path, .btn.btn--text-only.btn--alert .sd-spinner__path, .btn.btn--text-only.btn--highlight .sd-spinner__path, .btn.btn--text-only.btn--sd-green .sd-spinner__path, .btn.btn--text-only.btn--secondary .sd-spinner__path {
         stroke: var(--sd-btn-txt); }
-  .btn.btn--icon-only [class^="icon-"], .btn.btn--icon-only [class*=" icon-"] {
-    margin: 0; }
-  .btn.btn--icon-only.btn--icon-only-circle {
-    border-radius: var(--b-radius--full);
-    padding: 0;
-    width: 3.2rem; }
-    .btn.btn--icon-only.btn--icon-only-circle.btn--small {
-      width: 2.4rem; }
-    .btn.btn--icon-only.btn--icon-only-circle.btn--large {
-      width: 4rem; }
+  .btn.btn--icon-only {
+    padding-inline: var(--space--1); }
+    .btn.btn--icon-only [class^="icon-"], .btn.btn--icon-only [class*=" icon-"] {
+      margin: 0; }
+    .btn.btn--icon-only.btn--small {
+      padding-inline: var(--space--0-5); }
+    .btn.btn--icon-only.btn--large {
+      padding-inline: var(--space--1-5); }
+    .btn.btn--icon-only.btn--icon-only-circle {
+      border-radius: var(--b-radius--full);
+      padding: 0;
+      width: 3.2rem; }
+      .btn.btn--icon-only.btn--icon-only-circle.btn--small {
+        width: 2.4rem; }
+      .btn.btn--icon-only.btn--icon-only-circle.btn--large {
+        width: 4rem; }
   .btn.btn--disabled, .btn[disabled] {
     opacity: 0.6;
     cursor: not-allowed;
@@ -39669,7 +39675,7 @@ textarea.sd-media-carousel__media-title {
   transition: background-color ease 0.2s; }
   .form-label--boxed.form-label--required::after {
     margin-inline-start: 0.2rem;
-    color: #e41b21;
+    color: var(--color-warning-default);
     content: "*";
     vertical-align: top;
     font-size: 1.2rem;
@@ -40260,7 +40266,7 @@ textarea.sd-media-carousel__media-title {
     grid-column: 2/4;
     min-width: min-content; }
   .sd-input .sd-input__input-container:has(input[type="time"]) {
-    min-width: 110px; }
+    min-width: min-content; }
   .sd-input textarea.sd-input__input {
     height: auto;
     min-height: 3.2rem; }
@@ -40270,6 +40276,12 @@ textarea.sd-media-carousel__media-title {
     font-size: 1.3rem; }
     .sd-input input[type="file"].sd-input__input:focus {
       outline: none; }
+  .sd-input input[type="time"].sd-input__input {
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+    appearance: textfield; }
+    .sd-input input[type="time"].sd-input__input::-webkit-calendar-picker-indicator {
+      display: none; }
   .sd-input .sd-input__select {
     grid-row: 2/3;
     grid-column: 2/4; }
@@ -54763,6 +54775,9 @@ i.sd-sidetab-menu__helper-icon {
   .p-datepicker table td > span:not(.p-highlight):not(.p-disabled):active {
     background-color: var(--sd-colour-interactive--alpha-20); }
 
+.p-datepicker table td > span:not(.p-disabled):focus-visible {
+  outline: 2px solid var(--sd-colour-interactive--alpha-40); }
+
 .p-datepicker table td > span {
   cursor: pointer;
   display: flex;
@@ -54832,6 +54847,8 @@ i.sd-sidetab-menu__helper-icon {
       background-color: var(--color-input-bg); }
       .p-calendar.sd-input--disabled:hover .p-calendar .p-calendar-icon {
         pointer-events: none; }
+  .p-calendar.sd-input__input {
+    padding-inline: 0; }
 
 .p-calendar-w-btn {
   width: 116px; }
@@ -55572,12 +55589,65 @@ i.sd-sidetab-menu__helper-icon {
   gap: var(--gap-1-5);
   overflow: auto; }
 
-.time-unit-highlight {
-  background-color: var(--sd-colour-interactive);
-  color: white; }
+.time-picker__input {
+  position: relative; }
+  .time-picker__input input[type="time"] {
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+    appearance: textfield; }
+    .time-picker__input input[type="time"]::-webkit-calendar-picker-indicator {
+      display: none; }
+  .time-picker__input:has(.time-picker__icon-wrapper) .sd-input__input:not(.p-calendar) {
+    padding-inline-end: var(--space--4); }
+  .time-picker__input .time-picker__icon-wrapper {
+    position: relative;
+    height: 2.4rem;
+    width: 2.4rem;
+    position: absolute;
+    inset-block-start: var(--space--0-5);
+    inset-inline-end: var(--space--0-5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    pointer-events: none; }
+    .time-picker__input .time-picker__icon-wrapper .clear-time-picker {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      transition: opacity 0.2s ease;
+      z-index: 2;
+      opacity: 0; }
+  .time-picker__input:has(.sd-input__input--has-value) .icon-time {
+    opacity: 1;
+    transition: opacity 0.2s ease; }
+  .time-picker__input:has(.sd-input__input--has-value) .time-picker__icon-wrapper {
+    pointer-events: all; }
+  .time-picker__input:has(.sd-input__input--has-value):hover .icon-time {
+    opacity: 0; }
+  .time-picker__input:has(.sd-input__input--has-value):hover .clear-time-picker {
+    opacity: 1; }
+  .time-picker__input:has(.sd-input__input--has-value):focus-within .icon-time {
+    opacity: 0; }
+  .time-picker__input:has(.sd-input__input--has-value):focus-within .clear-time-picker {
+    opacity: 1; }
+
+.time-picker--date-time .time-picker__input .time-picker__icon-wrapper,
+.time-picker--date-time .time-picker__input:hover .time-picker__icon-wrapper,
+.time-picker--date-time .time-picker__input:focus-within .time-picker__icon-wrapper {
+  pointer-events: none; }
+
+.time-picker--date-time .time-picker__input .clear-time-picker,
+.time-picker--date-time .time-picker__input:hover .clear-time-picker,
+.time-picker--date-time .time-picker__input:focus-within .clear-time-picker {
+  display: none; }
+
+.time-picker--date-time .time-picker__input .icon-time,
+.time-picker--date-time .time-picker__input:hover .icon-time,
+.time-picker--date-time .time-picker__input:focus-within .icon-time {
+  opacity: 1; }
 
 .time-unit {
-  transition: all ease 0.2s;
   display: flex;
   justify-content: center;
   width: 32px;
@@ -55586,10 +55656,16 @@ i.sd-sidetab-menu__helper-icon {
   font-weight: normal;
   margin-inline-start: var(--gap--x-small);
   margin-inline-end: var(--gap--x-small);
-  transition: var(--transition__menu-item); }
+  transition: var(--transition__menu-item);
+  transition: all ease 0.2s; }
   .time-unit:hover {
     background-color: var(--sd-colour-interactive--alpha-10);
     box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
     cursor: pointer; }
   .time-unit:active {
     background-color: var(--sd-colour-interactive--alpha-20); }
+  .time-unit:focus-visible {
+    outline: 2px solid var(--sd-colour-interactive--alpha-40); }
+  .time-unit.time-unit-highlight, .time-unit.time-unit-highlight:hover {
+    background-color: var(--sd-colour-interactive);
+    color: var(--color-text-ondark); }