superdesk-ui-framework 2.4.21 → 3.0.0-rc12

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;
@@ -22,37 +23,38 @@ $icon-color: $grayDark !default;
 }
 
 @mixin big-icon-base {
-  display: inline-block;
-  width: 26px;
-  height: 26px;
-  line-height: 26px;
-  font-family: 'sd_big-icons';
-  font-size: 26px;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
+    --big-icon-size: 26px;
+    font-family: 'sd_big-icons';
+    display: inline-block;
+    width: var(--big-icon-size);
+    height: var(--big-icon-size);
+    line-height: var(--big-icon-size);
+    font-size: var(--big-icon-size);
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
 }
 
 [class^="big-icon--"],
 [class*=" big-icon--"] {
-  @include big-icon-base;
-  color: $icon-color;
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    @include big-icon-base;
+    color: var(--color-icon-default);
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .big-icon--blue {
-  color: $sd-blue;
+    color: $sd-colour-interactive;
 }
 .big-icon--white {
-  color: $white !important;
+    color: $white !important;
 }
 [class*=big-icon--].red,
 .big-icon--red {
-  color: $fireBrick;
+    color: $fireBrick;
 }
 
 // Icons definition
@@ -110,14 +112,53 @@ $sd-big-icon-font: (
     suggestion: "\e632",
     publisher: "\e633",
     tag: "\e634",
+    rundown: "\e635",
+    checkmark-circle: "\e636",
 );
 
 @each $name, $value in $sd-big-icon-font {
-  &.big-icon--#{$name}:before {
-    content: $value;
-  }
+    &.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;
+        }
+
+        &.scale--2x {
+            --big-icon-size: 52px
+        }
+        &.scale--3x {
+            --big-icon-size: 78px
+        }
+        &.scale--4x {
+            --big-icon-size: 104px
+        }
+    }
+    &.big-icon--#{$name}:before {
+        content: $value;
+    }
 }
 
 :export {
-  icon: map-keys($sd-big-icon-font);
+    icon: map-keys($sd-big-icon-font);
 }

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;
 
@@ -10,12 +20,9 @@ $boxed-list-palette: $sd-basic-palette;
     grid-template-columns: [mediaCol] auto [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
     position: relative;
     flex-direction: row;
-    min-height: 3.2rem;
-    border-radius: 3px;
-    margin-bottom: 0.8rem;
-    @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);
+    border-radius: var(--b-radius--small);
+    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 +39,31 @@ $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);
+    }
+    &--unread {
+        box-shadow: var(--sd-shadow__item--unread);
     }
     &--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;
@@ -69,6 +78,22 @@ $boxed-list-palette: $sd-basic-palette;
             }
         }
     }
+    &--disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+    &--comfortable {
+        min-height: 3.2rem;
+        @include sd-padding('1-5');
+    }
+    &--compact {
+        min-height: none;
+        padding: $sd-base-increment $sd-base-increment $sd-base-increment $sd-base-increment * 0.5;
+    }
+    &--loose {
+        min-height: 4.8rem;
+        @include sd-padding('2');
+    }
 }
 
 .boxed-list__item-media {
@@ -85,6 +110,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 +137,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,30 +150,34 @@ $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;
     align-items: center;
     flex-grow: 0;
+    gap: 2px;
     .icn-btn {
-        margin: -0.6rem -0.6rem 0.4rem 0;
+        margin: 0 -0.6rem 0 0;
     }
 }
 
-.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 +192,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 {
@@ -163,4 +202,12 @@ $boxed-list-palette: $sd-basic-palette;
             opacity: 1;
         }
     }
+}
+.boxed-list__item {
+    &.boxed-list__item--align-center {
+        .boxed-list__item-content {
+            justify-content: center;
+        }
+        
+    }
 }