superdesk-ui-framework 3.0.0-beta.0 → 3.0.0

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

@@ -6,7 +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/new-colors';
+
 @import 'variables/colors';
 
 $icon-color: $grayDark !default;
@@ -23,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-colour-interactive;
+    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
@@ -111,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,10 +20,7 @@ $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');
+    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;
@@ -32,30 +39,31 @@ $boxed-list-palette: $sd-basic-palette;
             }
         }
     }
-    &--selcted {
+    &--selected {
         box-shadow: var(--sd-shadow__item--selected);
-        background-color: var(--sd-item__main-Bg--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;
@@ -70,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 {
@@ -86,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 {
@@ -104,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;
@@ -117,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;
@@ -155,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 {
@@ -164,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;
+        }
+        
+    }
 }