superdesk-ui-framework 3.0.42 → 3.0.44

package/app/styles/_avatar.scss

@@ -7,6 +7,7 @@
             outline: 2px solid var(--sd-colour-avatar-outline--offline);
             outline-offset: 2px;
         }
+
         &.sd-avatar--x-small,
         &.sd-avatar--small {
             .sd-avatar-content {
@@ -20,6 +21,7 @@
             outline: 2px solid var(--sd-colour-avatar-outline--online);
             outline-offset: 2px;
         }
+
         &.sd-avatar--x-small,
         &.sd-avatar--small {
             .sd-avatar-content {
@@ -28,130 +30,6 @@
         }
     }
 
-    &--indicator-admin {
-        border-radius: $border-radius__base--full;
-        position: absolute;
-        inset-block-start: -4px;
-        inset-inline-start: -4px;
-        inset-inline-end: auto;
-        z-index: 1;
-        color: #FF5722 !important;
-
-        &:after {
-            content: '';
-            display: block;
-            position: absolute;
-            inset-block-start: 4px;
-            left: 4px;
-            background: var(--sd-colour-background__base--00);
-            width: 8px;
-            height: 8px;
-            z-index: -1;
-            border-radius: $border-radius__base--full;
-        }
-    }
-
-    &--x-small {
-        height: 20px;
-        width: 20px;
-        font-size: 1rem;
-
-        .sd-avatar--indicator-admin {
-            inset-block-start: -4px;
-            left: -6px;
-        }
-    }
-
-    &--small {
-        height: 24px;
-        width: 24px;
-        font-size: 1rem;
-
-        .sd-avatar--indicator-admin {
-            inset-block-start: -4px;
-            left: -6px;
-        }
-    }
-
-    &--medium {
-        height: 30px;
-        width: 30px;
-        font-size: 1.4rem;
-    }
-
-    &--large {
-        height: 48px;
-        width: 48px;
-        font-size: 1.8rem;
-
-        .sd-avatar--indicator-status--offline,
-        .sd-avatar--indicator-status--online {
-            height: 12px;
-            width: 12px;
-            inset-block-end: -1px;
-            inset-inline-end: -4px;
-            inset-inline-start: auto;
-        }
-        .sd-avatar--indicator-admin {
-            inset-block-start: -2px;
-            inset-inline-start: -4px;
-            inset-inline-end: auto;
-        }
-    }
-    &--x-large {
-        height: 96px;
-        width: 96px;
-        font-size: 3.2rem;
-
-        .sd-avatar--indicator-status--offline,
-        .sd-avatar--indicator-status--online {
-            height: 16px;
-            width: 16px;
-            inset-block-end: -2px;
-            inset-inline-end: 4px;
-        }
-        .sd-avatar--indicator-admin {
-            inset-block-start: 2px;
-            inset-inline-start: 0;
-            width: 24px;
-            height: 24px;
-            font-size: 24px;
-            &:after {
-                height: 14px;
-                width: 14px;
-                inset-block-start: 1px;
-                left: 5px;
-            }
-        }
-    }
-    &--xx-large {
-        height: 120px;
-        width: 120px;
-        font-size: 4rem;
-
-        .sd-avatar--indicator-status--offline,
-        .sd-avatar--indicator-status--online {
-            height: 18px;
-            width: 18px;
-            inset-block-end: -2px;
-            inset-inline-end: 8px;
-        }
-        .sd-avatar--indicator-admin {
-            inset-block-start: 4px;
-            inset-inline-start: 4px;
-            inset-inline-end: auto;
-            width: 24px;
-            height: 24px;
-            font-size: 24px;
-            &:after {
-                height: 14px;
-                width: 14px;
-                inset-block-start: 1px;
-                inset-inline-start: 5px;
-            }
-        }
-    }
-
     .sd-avatar-content {
         display: flex;
         width: 100%;
@@ -168,18 +46,6 @@
             width: 100%;
         }
 
-        &--text {
-            background-color: var(--sd-colour-avatar-bg);
-        }
-
-        &--dummy-img {
-            background-color: var(--sd-colour-avatar-bg);
-            background-image: url('~../../images/avatar_dummy.svg');
-            background-repeat: no-repeat;
-            background-size: cover;
-            border: 1px solid var(--sd-colour-avatar-border);
-            //box-shadow: inset 0 0 0 1px #005b7f;
-        }
         &.sd-avatar-content--add-item {
             background-color: var(--sd-colour-avatar-bg--light);
             border: 1px dashed var(--sd-colour-avatar-border--light);
@@ -224,6 +90,19 @@
         }
     }
 
+    .sd-avatar-content--text {
+        background-color: var(--sd-colour-avatar-bg);
+    }
+
+    .sd-avatar-content--dummy-img {
+        background-color: var(--sd-colour-avatar-bg);
+        background-image: url('~../../images/avatar_dummy.svg');
+        background-repeat: no-repeat;
+        background-size: cover;
+        border: 1px solid var(--sd-colour-avatar-border);
+        //box-shadow: inset 0 0 0 1px #005b7f;
+    }
+
     &.sd-avatar--empty-light {
         .sd-avatar-content--dummy-img {
             background-color: var(--sd-colour-avatar-bg--light);
@@ -244,30 +123,35 @@
         }
 
     }
+
     &.sd-avatar--x-small {
         .sd-avatar__icon {
             inset-block-end: -4px;
             inset-inline-end: -10px;
         }
     }
+
     &.sd-avatar--small {
         .sd-avatar__icon {
             inset-block-end: -4px;
             inset-inline-end: -8px;
         }
     }
+
     &.sd-avatar--medium {
         .sd-avatar__icon {
             inset-block-end: -3px;
             inset-inline-end: -6px;
         }
     }
+
     &.sd-avatar--large {
         .sd-avatar__icon {
             inset-block-end: -1px;
             inset-inline-end: -4px;
         }
     }
+
     &.sd-avatar--x-large {
         .sd-avatar__icon {
             inset-block-end: -2px;
@@ -278,6 +162,7 @@
             }
         }
     }
+
     &.sd-avatar--xx-large {
         .sd-avatar__icon {
             inset-block-end: -1px;
@@ -290,27 +175,158 @@
     }
 }
 
+.sd-avatar--indicator-admin {
+    border-radius: $border-radius__base--full;
+    position: absolute;
+    inset-block-start: -4px;
+    inset-inline-start: -4px;
+    inset-inline-end: auto;
+    z-index: 1;
+    color: #FF5722 !important;
 
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        inset-block-start: 4px;
+        left: 4px;
+        background: var(--sd-colour-background__base--00);
+        width: 8px;
+        height: 8px;
+        z-index: -1;
+        border-radius: $border-radius__base--full;
+    }
+}
+
+.sd-avatar--x-small {
+    height: 20px;
+    width: 20px;
+    font-size: 1rem;
+
+    .sd-avatar--indicator-admin {
+        inset-block-start: -4px;
+        left: -6px;
+    }
+}
+
+.sd-avatar--small {
+    height: 24px;
+    width: 24px;
+    font-size: 1rem;
+
+    .sd-avatar--indicator-admin {
+        inset-block-start: -4px;
+        left: -6px;
+    }
+}
+
+.sd-avatar--medium {
+    height: 30px;
+    width: 30px;
+    font-size: 1.4rem;
+}
+
+.sd-avatar--large {
+    height: 48px;
+    width: 48px;
+    font-size: 1.8rem;
+
+    .sd-avatar--indicator-status--offline,
+    .sd-avatar--indicator-status--online {
+        height: 12px;
+        width: 12px;
+        inset-block-end: -1px;
+        inset-inline-end: -4px;
+        inset-inline-start: auto;
+    }
+
+    .sd-avatar--indicator-admin {
+        inset-block-start: -2px;
+        inset-inline-start: -4px;
+        inset-inline-end: auto;
+    }
+}
+
+.sd-avatar--x-large {
+    height: 96px;
+    width: 96px;
+    font-size: 3.2rem;
+
+    .sd-avatar--indicator-status--offline,
+    .sd-avatar--indicator-status--online {
+        height: 16px;
+        width: 16px;
+        inset-block-end: -2px;
+        inset-inline-end: 4px;
+    }
+
+    .sd-avatar--indicator-admin {
+        inset-block-start: 2px;
+        inset-inline-start: 0;
+        width: 24px;
+        height: 24px;
+        font-size: 24px;
+        &:after {
+            height: 14px;
+            width: 14px;
+            inset-block-start: 1px;
+            left: 5px;
+        }
+    }
+}
+
+.sd-avatar--xx-large {
+    height: 120px;
+    width: 120px;
+    font-size: 4rem;
+
+    .sd-avatar--indicator-status--offline,
+    .sd-avatar--indicator-status--online {
+        height: 18px;
+        width: 18px;
+        inset-block-end: -2px;
+        inset-inline-end: 8px;
+    }
+
+    .sd-avatar--indicator-admin {
+        inset-block-start: 4px;
+        inset-inline-start: 4px;
+        inset-inline-end: auto;
+        width: 24px;
+        height: 24px;
+        font-size: 24px;
+        &:after {
+            height: 14px;
+            width: 14px;
+            inset-block-start: 1px;
+            inset-inline-start: 5px;
+        }
+    }
+}
 
 .sd-avatar-group {
     display: flex;
+
     &.sd-avatar-group--stacked {
         flex-wrap: nowrap;
         gap: 0;
+        margin-inline-end: 8px;
+
         > .sd-avatar {
             margin: 0 -0.8rem 0 0;
             .sd-avatar-content {
                 --avatar-shadow: var(--sd-item__main-Bg);
                 box-shadow: 0 0 0 2px var(--avatar-shadow);
             }
-            &--large {
-                margin: 0 -1.2rem 0 0;
-            }
             &:hover {
                 z-index: 100;
             }
         }
-        margin-inline-end: 8px;
+
+        > .sd-avatar--large {
+            margin: 0 -1.2rem 0 0;
+        }
+
         &.sd-avatar-group--stacked--gap-small {
             gap: $sd-base-increment * 0.5;
             > .sd-avatar {
@@ -318,6 +334,7 @@
             }
             margin-inline-end: 0;
         }
+
         &.sd-avatar-group--stacked--gap-medium {
             gap: $sd-base-increment * 1;
             > .sd-avatar {
@@ -325,6 +342,7 @@
             }
             margin-inline-end: 0;
         }
+
         &.sd-avatar-group--stacked--gap-large {
             gap: $sd-base-increment * 1.5;
             > .sd-avatar {
@@ -333,6 +351,7 @@
             margin-inline-end: 0;
         }
     }
+    
     &.sd-avatar-group--grid {
         flex-wrap: wrap;
         justify-content: flex-start;

package/app/styles/_badge.scss

@@ -1,6 +1,3 @@
-
-
-
 /// Default colors for badges.
 $badge-background: var(--sd-colour-bg--08) !default;
 $badge-background-translucent: var(--sd-colour-bg-translucent--08);
@@ -13,10 +10,8 @@ $badge-palette: $sd-basic-palette !default;
 /// Default padding inside badges.
 $badge-padding: 0.4em 0.5em 0.3em!default;
 
-
 $badge-minwidth: 1.8em !default;
 
-
 /// Default font size and line height for badges.
 $badge-font-size: 1rem !default;
 $badge-lineheight: 1.1em !default;
@@ -35,6 +30,7 @@ $badge-lineheight: 1.1em !default;
     --sd-badge-bg: var(--sd-colour-bg--08);
     background-color: var(--sd-badge-bg);
     color: var(--color-text--inverse);
+
     &--square {
         border-radius: $border-radius__base--x-small;
     }
@@ -42,27 +38,35 @@ $badge-lineheight: 1.1em !default;
 
 .badge {
     @include badge;
+
     &.badge--primary {
         --sd-badge-bg: var(--sd-colour-primary);
     }
+
     &.badge--success {
         --sd-badge-bg: var(--sd-colour-success);
     }
+
     &.badge--warning {
         --sd-badge-bg: var(--sd-colour-warning);
     }
+
     &.badge--alert {
         --sd-badge-bg: var(--sd-colour-alert);
     }
+
     &.badge--highlight {
         --sd-badge-bg: var(--sd-colour-highlight);
     }
+
     &.badge--sd-green {
         --sd-badge-bg: var(--sd-colour-superdesk);
     }
+
     &.badge--secondary {
         --sd-btn-bg: var(--sd-colour-secondary);
     }
+
     // light gray
     &.badge--light {
         background-color: var(--sd-colour-bg-translucent--08);
@@ -75,11 +79,13 @@ $badge-lineheight: 1.1em !default;
 .element-with-badge {
     display: inline-block;
     position: relative;
+
     .badge {
       position: absolute;
       top: -.5rem;
       right: -.8rem;
     }
+    
     + .element-with-badge, + .btn {
       margin-left: 1.2rem;
       vertical-align: top;

package/app/styles/_big-icon-font.scss

@@ -1,6 +1,5 @@
 // BIG ICON FONT
 // Icons for the left and right sidebar and large action buttons in the top subnavigation bar
-// -------------------------------------------
 
 // All icons receive the styles of the <i> tag with a base class
 // of .i and are then given a unique class to add width, height,
@@ -12,14 +11,14 @@
 $icon-color: $grayDark !default;
 
 @font-face {
-  font-family: 'sd_big-icons';
-  src:  url('../fonts/sd_big-icons.eot?v4j36k');
-  src:  url('../fonts/sd_big-icons.eot?v4j36k#iefix') format('embedded-opentype'),
-    url('../fonts/sd_big-icons.ttf?v4j36k') format('truetype'),
-    url('../fonts/sd_big-icons.woff?v4j36k') format('woff'),
-    url('../fonts/sd_big-icons.svg?v4j36k#sd_big-icons') format('svg');
-  font-weight: normal;
-  font-style: normal;
+	font-family: 'sd_big-icons';
+	src:  url('../fonts/sd_big-icons.eot?v4j36k');
+	src:  url('../fonts/sd_big-icons.eot?v4j36k#iefix') format('embedded-opentype'),
+		url('../fonts/sd_big-icons.ttf?v4j36k') format('truetype'),
+		url('../fonts/sd_big-icons.woff?v4j36k') format('woff'),
+		url('../fonts/sd_big-icons.svg?v4j36k#sd_big-icons') format('svg');
+	font-weight: normal;
+	font-style: normal;
 }
 
 @mixin big-icon-base {
@@ -49,9 +48,11 @@ $icon-color: $grayDark !default;
 .big-icon--blue {
     color: $sd-colour-interactive;
 }
+
 .big-icon--white {
     color: $white !important;
 }
+
 [class*=big-icon--].red,
 .big-icon--red {
     color: $fireBrick;
@@ -119,27 +120,35 @@ $sd-big-icon-font: (
 @each $name, $value in $sd-big-icon-font {
     &.big-icon--#{$name} {
         content: $value;
+
         &.color--default {
             color: $icon-color;
         }
+
         &.color--primary {
             color: var(--sd-colour-primary) !important;
         }
+
         &.color--success {
             color: var(--sd-colour-success) !important;
         }
+
         &.color--warning {
             color: var(--sd-colour-warning) !important;
         }
+
         &.color--alert {
             color: var(--sd-colour-alert) !important;
         }
+
         &.color--highlight {
             color: var(--sd-colour-highlight) !important;
         }
+
         &.color--light {
             color: var(--color-text-lighter) !important;
         }
+
         &.color--white {
             color: hsla(214, 13%, 90, 1) !important;
         }
@@ -147,13 +156,16 @@ $sd-big-icon-font: (
         &.scale--2x {
             --big-icon-size: 52px
         }
+
         &.scale--3x {
             --big-icon-size: 78px
         }
+
         &.scale--4x {
             --big-icon-size: 104px
         }
     }
+	
     &.big-icon--#{$name}:before {
         content: $value;
     }