superdesk-ui-framework 3.0.42 → 3.0.44

package/app/styles/_thumb-carousel.scss

@@ -8,6 +8,7 @@
     --sd-thumb-carousel__colour-btn: hsla(214, 13%, 100%, 1);
     --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 1);
 }
+
 [data-theme="dark-ui"] {
     --sd-thumb-carousel__shadow-line: hsla(214, 13%, 60%, 0.5);
     --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.2), 0 1px 4px hsla(0, 0%, 0%, 0.4);
@@ -20,6 +21,7 @@
         background-color: hsla(214, 13%, 40%, 1);
         color: hsla(214, 13%, 96%, 1);
     }
+
     .badge--light {
         background-color: hsla(214, 13%, 40%, 1);
         color: hsla(214, 13%, 96%, 1);
@@ -34,18 +36,19 @@
     box-shadow: var(--sd-thumb-carousel__shadow);
     background-color: var(--sd-thumb-carousel__colour-bg);
     border-radius: var(--sd-thumb-carousel__border-radius);
-
     // min-height: 100px;
     // min-width: 300px;
     // max-width: 600px;
     margin-bottom: 16px;
 }
+
 .sd-thumb-carousel__header {
     display: flex;
     flex-direction: row;
     align-items: center;
     min-height: 2.4rem;
     padding: 12px 8px 12px 16px;
+
     time {
         font-size: 1.2rem;
         color: var(--sd-thumb-carousel__colour-txt);
@@ -54,37 +57,43 @@
         padding-left: 16px;
     }
 }
+
 .sd-thumb-carousel__heading {
     flex-grow: 0;
     font-size: 1.6rem;
     font-weight: 600;
     margin-right: 8px;
 }
+
 .sd-thumb-carousel__header-block--r {
     margin-left:auto;
     display: flex;
     align-items: center;
+
     & > * + * {
         margin-left: 8px;
     }
 }
+
 .sd-thumb-carousel__content,
 .p-carousel-content {
     display: flex;
     flex-direction: column;
     overflow: visible;
 }
+
 .sd-thumb-carousel__container {
     display: flex;
     flex-direction: row;
 }
+
 .sd-thumb-carousel__description {
+    @include sd-padding('2');
     flex-grow: 0;
     font-size: 1.4rem;
     line-height: 150%;
     opacity: 0.75;
     font-weight: 400;
-    @include sd-padding('2');
     padding-top: 2px;
 }
 
@@ -97,6 +106,7 @@
     display: flex;
     flex-direction: row;
 }
+
 .sd-thumb-carousel__item {
     display: flex;
     flex-direction: column;
@@ -104,6 +114,7 @@
     flex: 1 0 33.333333333333336%;
     position: relative;
 }
+
 .sd-thumb-carousel__item-inner {
     margin: 5px;
     height: 100%;
@@ -115,6 +126,7 @@
     box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.12), 0 1px 4px hsla(0, 0%, 0%, 0.20);
     border-radius: $border-radius__base--small;
     overflow: hidden;
+
     img {
         max-width: 100%;
         max-height: 100%;
@@ -123,6 +135,7 @@
         pointer-events: none;
     }
 }
+
 .sd-thumb-carousel__indicators {
     display: flex;
     flex-direction: row;
@@ -130,9 +143,11 @@
     justify-content: center;
     padding: 8px;
 }
+
 .sd-thumb-carousel__indicator,
 .p-carousel-indicator {
     margin: 4px;
+
     > button {
         display: flex;
         align-items: center;
@@ -145,20 +160,23 @@
         background-color: var(--sd-thumb-carousel__colour-indicator);
         padding: 0;
         margin: 0;
+
         &:hover {
             opacity: 0.6;
         }
     }
-    &--highlight, &.p-highlight {
-        > button {
-            width: 16px;
-            background-color: var(--sd-colour-interactive);
-            &:hover {
-                opacity: 1;
-            }
+}
+
+.sd-thumb-carousel__indicator--highlight, .sd-thumb-carousel__indicator.p-highlight {
+    > button {
+        width: 16px;
+        background-color: var(--sd-colour-interactive);
+
+        &:hover {
+            opacity: 1;
         }
-        
     }
+    
 }
 
 .sd-thumb-carousel__btn--prev, .sd-thumb-carousel__btn--next,
@@ -178,35 +196,42 @@
     opacity: 0.8;
     transition: all 0.2 ease !important;
     color: hsla(214, 13%, 20%, 0.6);
+
     &:hover {
         opacity: 1;
         background-color: var(--sd-thumb-carousel__colour-btn);
         box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.16), 0 4px 12px hsla(0, 0%, 0%, 0.24);
         color: hsla(214, 13%, 10%, 1);
     }
+
     &:active {
         opacity: 1;
         background-color: var(--sd-colour-interactive) !important;
         box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 2px hsla(0, 0%, 0%, 0.12);
         color: $white;
     }
+
     &:focus {
         opacity: 1;
         background-color: var(--sd-thumb-carousel__colour-btn);
     }
+
     &.sd-disabled, &.p-disabled {
         visibility: hidden;
         pointer-events: none;
     }
 }
+
 .sd-thumb-carousel__btn--prev, .p-carousel-prev {
     left: -16px;
     margin-right: -26px;
 }
+
 .sd-thumb-carousel__btn--next, .p-carousel-next{
     right: -16px;
     margin-left: -26px;
 }
+
 .sd-thumb-carousel__cover-image-icon {
     width: 2rem;
     height: 2rem;
@@ -220,8 +245,9 @@
     top: 12px;
     left: 12px;
     z-index: 1;
+    
     i {
         color: var(--sd-thumb-carousel__colour-indicator--highlight) !important;
         margin-top: -2px;
     }
-}
+}

package/app/styles/_toggle-box.scss

@@ -1,50 +1,61 @@
 // Toggle box aka collapsible panel
-// ----
 
 .toggle-box {
     position: relative;
     align-self: stretch;
+
     &.hidden {
         .toggle-box__chevron {
             i {
                 transform: rotate(0);
             }
-            &--circle {
-                background-color: var(--sd-colour-btn-bg-neutral);
-                i {
-                    color: var(--color-text-light);
-                }
+        }
+
+        .toggle-box__chevron--circle {
+            background-color: var(--sd-colour-btn-bg-neutral);
+
+            i {
+                color: var(--color-text-light);
             }
         }
+
         .toggle-box__content-wraper {
             max-height: 0;
             transition: all ease-out .5s;
         }
+
         .toggle-box__header {
             margin-bottom: 0;
         }
     }
+
     // Stylings
     &.toggle-box--circle {
         .toggle-box__chevron {
             background-color: var(--sd-colour-btn-bg-neutral);
+
             i {
                 color: var(--sd-colour-btn-txt-neutral);
             }
         }
     }
+
     &.toggle-box--marg-b10 {
         margin-bottom: 1rem;
     }
+
     &.toggle-box--margin-none {
         margin-bottom: 0;
     }
+
     &.toggle-box--margin-small {
         margin-bottom: $sd-base-increment * 2;
     }
+
     &.toggle-box--margin-normal {
         margin-bottom: $sd-base-increment * 3;
     }
+
     &.toggle-box--margin-large {
         margin-bottom: $sd-base-increment * 4;
     }
@@ -74,36 +85,43 @@ a.toggle-box__header {
             transform: rotate(90deg);
         }
     }
+
     .toggle-box__label {
         font-size: 1.2rem;
         padding: 0 1rem 0 0.8rem;
         color: var(--color-label-text);
         text-transform: uppercase;
     }
+
     .toggle-box__line {
         flex: 1;
         height: 1px;
         margin: auto 0.4rem auto 0;
         background: var(--sd-colour-line--light);
     }
+
     &:hover {
         .toggle-box__label {
             color: var(--sd-colour-interactive);
             text-decoration: none !important;
         }
     }
+
     &:focus {
         background: none !important;
     }
+
     &:focus-visible {
         .toggle-box__chevron {
             box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
         }
+
         .toggle-box__label {
             color: var(--sd-colour-interactive);
         }
     }
-     * {
+
+    * {
         text-decoration: none !important;
     }
 }
@@ -120,11 +138,13 @@ a.toggle-box__header {
 .toggle-box__button {
     color: $grayLight;
     cursor: pointer;
+
     i {
         color: $grayLight;
         margin-right: 0.5rem;
         vertical-align: text-bottom;
     }
+    
     &:hover {
         text-decoration: none;
         color: $white;

package/app/styles/_toggle-button.scss

@@ -1,5 +1,6 @@
 .sd-toggle-button {
     @include sd-padding('1-5', 'x');
+    @include text-overflow;
     line-height: 1;
     border: 1px solid $checkButtonBorderColor;
     border-radius: $checkButtonBorderRadius;
@@ -10,28 +11,31 @@
     gap: 8px;
     height: $sd-base-increment * 4;
     color: var(--color-text);
-    @include text-overflow;
     cursor: pointer;
     text-decoration: none;
     font-size: 1.2rem;
     background: transparent;
     transition: all 0.2s ease-out;
+
     [class^="icon-"],
     [class*=" icon-"],
     .sd-toggle-button__icon {
         color: currentColor;
     }
+
     &:hover {
         border-color: $checkButtonBorderColorHover;
         box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
         color: var(--color-text);
     }
+
     &.sd-toggle--active {
         background-color: var(--sd-colour-interactive--active);
         border-color: var(--sd-colour-interactive--active);
         border-top-color: var(--sd-colour-interactive--darken-20);
         box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
         color: $white;
+        
         &:hover {
             color: $white;
             border-color: var(--sd-colour-interactive--active);