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

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;
+        }
+        
+    }
 }