superdesk-ui-framework 2.4.20 → 3.0.1-beta.1

package/app/styles/_badge.scss

@@ -1,13 +1,11 @@
-/// @group badge
 
-/// Default background color for badges.
-$badge-background: $gray !default;
 
-/// Default text color for badges.
-$badge-color: $white !default;
 
-/// Alternate text color for badges.
-$badge-color-alt: $gray !default;
+/// Default colors for badges.
+$badge-background: var(--sd-colour-bg--08) !default;
+$badge-background-translucent: var(--sd-colour-bg-translucent--08);
+$badge-color: var(--color-text--inverse) !default;
+$badge-color-alt: var(--sd-colour-btn-txt-neutral) !default;
 
 /// Coloring classes. A map of classes to output in the CSS.
 $badge-palette: $sd-basic-palette !default;
@@ -15,11 +13,9 @@ $badge-palette: $sd-basic-palette !default;
 /// Default padding inside badges.
 $badge-padding: 0.4em 0.5em 0.3em!default;
 
-/// Minimum width of a badge.
+
 $badge-minwidth: 1.8em !default;
 
-/// Default radius of a badge.
-$badge-radius: 1em !default;
 
 /// Default font size and line height for badges.
 $badge-font-size: 1rem !default;
@@ -30,35 +26,68 @@ $badge-lineheight: 1.1em !default;
     display: inline-block;
     min-width: $badge-minwidth;
     padding: $badge-padding;
-    border-radius: $badge-radius;
+    border-radius: $border-radius__base--full;
     font-size: $badge-font-size;
     line-height: $badge-lineheight;
     text-align: center;
     text-transform: uppercase;
     font-weight: 400;
+    --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;
+    }
 }
 
 .badge {
     @include badge;
-
-    background: $badge-background;
-    color: $badge-color;
-
-    @each $name, $color in $badge-palette {
-        &.badge--#{$name} {
-        background: $color;
-        //color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
-        }
+    &.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
-    &--light {
-        background-color: #ddd;
-        background-color: scale-color($grayNeutral, $alpha: -80%);
-        color: $grayDark;
+    &.badge--light {
+        background-color: var(--sd-colour-bg-translucent--08);
+        color: $sd-text;
         font-weight: 500;
     }
-    &--square {
-        border-radius: 2px;
+}
+
+// Element with badge
+.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;
     }
 }
+.btn + .element-with-badge {
+    margin-left: 1.2rem;
+    vertical-align: top;
+}
+
 

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

@@ -6,6 +6,7 @@
 // of .i and are then given a unique class to add width, height,
 // and font specification. Your resulting HTML will look like
 // <i class="icon-ok"></i>.
+
 @import 'variables/colors';
 
 $icon-color: $grayDark !default;
@@ -45,7 +46,7 @@ $icon-color: $grayDark !default;
 }
 
 .big-icon--blue {
-  color: $sd-blue;
+  color: $sd-colour-interactive;
 }
 .big-icon--white {
   color: $white !important;

package/app/styles/_boxed-list.scss

@@ -1,6 +1,16 @@
 // Boxed lists
 // Simpler version of the list item.
 // ---------------------------------------------
+.boxed-list {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: $sd-base-increment * 1.5;
+    margin-bottom: $sd-base-increment * 2;
+    &--comfortable {
+        gap: $sd-base-increment * 2;
+    }
+}
 
 $boxed-list-palette: $sd-basic-palette;
 
@@ -11,11 +21,10 @@ $boxed-list-palette: $sd-basic-palette;
     position: relative;
     flex-direction: row;
     min-height: 3.2rem;
-    border-radius: 3px;
-    margin-bottom: 0.8rem;
+    border-radius: var(--b-radius--small);
     @include sd-padding('1-5');
-    background-color: var(--color-contrast-bg);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
+    background-color: var(--sd-item__main-Bg);
+    box-shadow: $shadow__base--z1;
     transition: all 0.2s ease-in-out;
     @each $name, $color in $boxed-list-palette {
         &.boxed-list__item--#{$name} {
@@ -32,29 +41,28 @@ $boxed-list-palette: $sd-basic-palette;
             }
         }
     }
-    &--selcted {
-        box-shadow: inset 0 0 0 1px rgba(94, 169, 197, 0.6), 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
-        background-color: var(--color-selected-bg);
+    &--selected {
+        box-shadow: var(--sd-shadow__item--selected);
     }
     &--clickable {
         &:hover {
             cursor: pointer;
-            background-color: var(--color-contrast-bg--hover);
-            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24), 0 0 1px rgba(0, 0, 0, 0.2), 0 0 4px rgba(0,0,0,0.2);
+            box-shadow: $shadow__base--z3;
         }
     }
     &--blank {
         background-color: transparent !important;
         box-shadow: none;
     }
-    &.boxed-list__item--selcted.boxed-list__item--clickable {
+    &.boxed-list__item--selected.boxed-list__item--clickable {
         &:hover {
-            box-shadow: inset 0 0 0 1px rgba(94, 169, 197, 0.75), 0 1px 4px rgba(0, 0, 0, 0.24), 0 0 1px rgba(0, 0, 0, 0.2);
-            background-color: var(--color-selected-bg--hover);
+            box-shadow: var(--sd-shadow__item--selected);
+            background-color: var(--color-selected-bg--hover) !important;
         }
     }
     &:hover {
-        .boxed-list__slide-in-actions {
+        .boxed-list__slide-in-actions,
+        .boxed-list__actions--slide-in {
             padding-left: 0.6rem;
             width: auto;
             max-width: 32px;
@@ -85,6 +93,15 @@ $boxed-list-palette: $sd-basic-palette;
         color: var(--color-text);
         opacity: 0.5;
     }
+    [class^="icon-"],
+    [class*="icon-"] {
+        color: var(--color-text);
+        opacity: 0.5;
+        width: 3.2rem;
+        height: 3.2rem;
+        font-size: 3.2rem;
+        line-height: 1;
+    }
 }
 
 .boxed-list__item-content {
@@ -103,7 +120,7 @@ $boxed-list-palette: $sd-basic-palette;
 .boxed-list__item-content-row {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: baseline;
     justify-content: flex-start;
     &--fixed {
         align-items: baseline;
@@ -116,19 +133,21 @@ $boxed-list-palette: $sd-basic-palette;
     display: flex;
     flex-direction: row;
     align-items: center;
-    @include sd-padding('1-5');
-    margin-top: 1rem;
+    padding: 0.8rem 0.8rem 0 0.8rem;
+    margin-top: 0.8rem;
     &--allign-baseline {
         align-items: baseline;
     }
 }
 
 .boxed-list__item-content-row + .boxed-list__item-content-row  {
-    margin-top: 0.6rem;
+    margin-top: 0.8rem;
 }
 
 .boxed-list__slide-in-actions,
-.boxed-list__static-actions {
+.boxed-list__static-actions,
+.boxed-list__actions--slide-in,
+.boxed-list__actions--static {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -139,7 +158,8 @@ $boxed-list-palette: $sd-basic-palette;
     }
 }
 
-.boxed-list__slide-in-actions {
+.boxed-list__slide-in-actions,
+.boxed-list__actions--slide-in {
     grid-column: actionsHidden;
     grid-row: mainRow;
     width: 0;
@@ -154,7 +174,8 @@ $boxed-list-palette: $sd-basic-palette;
     }
 }
 
-.boxed-list__static-actions {
+.boxed-list__static-actions,
+.boxed-list__actions--static  {
     grid-column: actionsVisible;
     grid-row: mainRow;
     .icn-btn {