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

package/app/styles/_boxed-list.scss

@@ -20,9 +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: var(--b-radius--small);
-    @include sd-padding('1-5');
     background-color: var(--sd-item__main-Bg);
     box-shadow: $shadow__base--z1;
     transition: all 0.2s ease-in-out;
@@ -44,6 +42,9 @@ $boxed-list-palette: $sd-basic-palette;
     &--selected {
         box-shadow: var(--sd-shadow__item--selected);
     }
+    &--unread {
+        box-shadow: var(--sd-shadow__item--unread);
+    }
     &--clickable {
         &:hover {
             cursor: pointer;
@@ -77,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 {
@@ -153,8 +170,9 @@ $boxed-list-palette: $sd-basic-palette;
     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;
     }
 }
 
@@ -184,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;
+        }
+        
+    }
 }

package/app/styles/_buttons.scss

@@ -603,6 +603,10 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
     background: transparent;
     vertical-align: top;
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0px solid var(--sd-colour-line--x-light);
+    border-inline-width: 1px 0;
     .circle {
         display: inline-block;
         text-align: center;

package/app/styles/_hamburger.scss

@@ -0,0 +1,160 @@
+// Settings
+// ==================================================
+$hamburger-layer-width         : 18px !default;
+$hamburger-layer-height        : 3px !default;
+$hamburger-layer-spacing       : 3px !default;
+$hamburger-layer-color         : #fff !default;
+$hamburger-layer-border-radius : 1px !default;
+$hamburger-hover-opacity       : 0.7 !default;
+$hamburger-active-layer-color  : $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+
+// Hamburger
+// ==================================================
+.hamburger {
+    cursor: pointer;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: linear;
+
+    &:hover {
+        opacity: $hamburger-hover-opacity;
+    }
+  
+    &.is-active {
+        opacity: 0.5;
+      &:hover {
+          opacity: $hamburger-active-hover-opacity;
+      }
+  
+      .hamburger__inner,
+      .hamburger__inner::before,
+      .hamburger__inner::after {
+        background-color: $hamburger-active-layer-color;
+      }
+    }
+  }
+  
+  .hamburger__box {
+    width: $hamburger-layer-width;
+    height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+    display: inline-block;
+    position: relative;
+  }
+  
+  .hamburger__inner {
+    display: block;
+    top: 50%;
+    margin-top: $hamburger-layer-height / -2;
+  
+    &,
+    &::before,
+    &::after {
+      width: $hamburger-layer-width;
+      height: $hamburger-layer-height;
+      background-color: $hamburger-layer-color;
+      border-radius: $hamburger-layer-border-radius;
+      position: absolute;
+      transition-property: transform;
+      transition-duration: 0.15s;
+      transition-timing-function: ease;
+    }
+  
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+    }
+  
+    &::before {
+      top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+    }
+  
+    &::after {
+      bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+    }
+  }
+  
+
+// Hamburger animation
+// ==================================================
+
+/* Spin */
+.hamburger--spin {
+    .hamburger__inner {
+        transition-duration: 0.22s;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &::before {
+            transition: top 0.1s 0.25s ease-in,
+                        opacity 0.1s ease-in;
+        }
+
+        &::after {
+            transition: bottom 0.1s 0.25s ease-in,
+                        transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        }
+    }
+
+    &.is-active {
+        .hamburger__inner {
+            transform: rotate(225deg);
+            transition-delay: 0.12s;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &::before {
+            top: 0;
+            opacity: 0;
+            transition: top 0.1s ease-out,
+                        opacity 0.1s 0.12s ease-out;
+            }
+
+            &::after {
+            bottom: 0;
+            transform: rotate(-90deg);
+            transition: bottom 0.1s ease-out,
+                        transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }
+}
+
+/* Squeeze */
+.hamburger--squeeze {
+    .hamburger__inner {
+        transition-duration: 0.075s;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &::before {
+            transition: top 0.075s 0.12s ease,
+                        opacity 0.075s ease;
+        }
+
+        &::after {
+            transition: bottom 0.075s 0.12s ease,
+                        transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        }
+    }
+
+    &.is-active {
+        .hamburger__inner {
+            transform: rotate(45deg);
+            transition-delay: 0.12s;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &::before {
+                top: 0;
+                opacity: 0;
+                transition: top 0.075s ease,
+                            opacity 0.075s 0.12s ease;
+            }
+
+            &::after {
+                bottom: 0;
+                transform: rotate(-90deg);
+                transition: bottom 0.075s ease,
+                            transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }
+}

package/app/styles/_helpers.scss

@@ -302,6 +302,7 @@
 // --------------------------------------------------
 
 $sd-shadowProperties: (
+    'z0': (none),
     'z1': (0 1px 3px rgba(0,0,0,.16), 0 0 1px rgba(0,0,0,.1)),
     'z2': (0 1px 4px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.1)),
     'z3': (0 1px 6px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.24), 0 0 1px rgba(0,0,0,.1)),
@@ -383,8 +384,8 @@ p strong {
     font-weight: 500;
 }
 time {
-    color: $sd-text-lighter;
-    font-weight: 300;
+    color: $sd-text-light;
+    font-weight: 400;
     letter-spacing: .025em;
     &.small {
         font-size: calc(100% - 0.1rem);
@@ -445,6 +446,13 @@ h1, h2, h3, h4, h5, h6 {
     line-height: 1.4;
 }
 
+.sd-time {
+    font-size: 1.2rem;
+    display: inline-block;
+    color: var(--color-text-light);
+    letter-spacing: 0.025em;
+}
+
 // Font weights 
 
 .sd-text__light,
@@ -605,14 +613,14 @@ h1, h2, h3, h4, h5, h6 {
 
 .sd-text__date-time {
     color: var(--color-text-light);
-    font-weight: 300;
+    font-weight: 400;
     letter-spacing: .025em;
     &--small {
         font-size: 1.2rem;
     }
 }
 .sd-text__date-and-author {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
 }
 .sd-text__author {
     font-weight: 500;
@@ -947,16 +955,16 @@ $sd-properties: (padding, margin); // It's generating these properties
 
 // Font size
 .sd-font-size--x-small {
-    font-size: calc(var(--text-size--base) * 1.2); // 14px;
+    font-size: calc(var(--text-size--base) * 1.2); // 12px;
 }
 .sd-font-size--small {
     font-size: calc(var(--text-size--base) * 1.4); // 14px;
 }
 .sd-font-size--medium {
-    font-size: calc(var(--text-size--base) * 1.6); // 14px;
+    font-size: calc(var(--text-size--base) * 1.6); // 16px;
 }
 .sd-font-size--large {
-    font-size: calc(var(--text-size--base) * 2); // 14px;
+    font-size: calc(var(--text-size--base) * 2); // 20px;
 }
 
 // Text colour