superdesk-ui-framework 3.0.1-beta.2 → 3.0.1-beta.3

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "qcode"
+    ]
+}

package/app/img/SD-logo.svg

@@ -0,0 +1,52 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="154px" height="48px" viewBox="0 0 154 48" enable-background="new 0 0 154 48" xml:space="preserve">
+<path fill="#1EB06C" d="M80.711,16.993h-0.057c-0.707-0.933-2.375-1.641-3.564-1.641c-3.79,0-5.883,3.62-5.883,7.241
+	c0,4.582,1.98,8.034,5.883,8.034c1.584,0,2.743-0.65,3.988-1.867l0.17,1.584h2.97V9.922h-3.507V16.993z M80.711,26.497
+	c-0.736,0.565-1.217,1.301-2.715,1.301c-2.093,0-3.28-1.698-3.28-4.809c0-3.112,1.187-4.809,3.28-4.809
+	c1.131,0,2.008,0.594,2.715,1.245V26.497z M59.814,27.629l-2.546-1.585c-0.876,1.019-1.64,1.755-3.281,1.755
+	c-1.641,0-2.999-1.188-3.056-4.243h8.882v-1.443c0-3.536-2.15-6.788-5.996-6.76c-3.988,0-6.393,2.97-6.393,7.638
+	c0,4.667,2.404,7.637,6.222,7.637C56.476,30.628,58.456,29.722,59.814,27.629z M53.761,17.955c1.697,0,2.772,1.188,2.828,3.225
+	h-5.658C50.988,19.144,52.063,17.955,53.761,17.955z M65.75,18.153h-0.057v-2.517H62.47v14.708h3.507v-8.939
+	c0-0.367,1.527-2.375,3.281-2.375c0.254,0,0.453,0,0.622,0.028v-3.706C67.787,15.41,66.6,16.4,65.75,18.153z M126.495,15.636h-4.016
+	l-4.327,5.685h-0.113V9.922h-3.507v20.423h3.507v-4.527l1.782-2.065l3.253,6.592h3.733l-4.639-9.221L126.495,15.636z M92.927,30.628
+	c2.828,0,4.808-0.906,6.165-2.999l-2.545-1.585c-0.877,1.019-1.641,1.755-3.281,1.755c-1.641,0-2.998-1.188-3.055-4.243h8.881
+	v-1.443c0-3.536-2.149-6.788-5.996-6.76c-3.988,0-6.392,2.97-6.392,7.638C86.705,27.657,89.109,30.628,92.927,30.628z M93.04,17.955
+	c1.697,0,2.772,1.188,2.828,3.225h-5.657C90.268,19.144,91.343,17.955,93.04,17.955z M4.272,14.957c0-1.584,1.215-2.262,2.912-2.262
+	c1.838,0,3.055,1.075,3.649,2.658l3.564-1.102C13.18,11.28,10.465,9.64,7.184,9.64c-3.536,0-6.589,2.065-6.589,5.713
+	c0,6.28,10.521,5.488,10.521,9.504c0,1.98-1.499,2.715-3.451,2.715c-2.291,0-3.507-1.272-4.441-3.196L0,25.79
+	c1.16,2.971,4.3,4.838,7.637,4.838c4.525,0,7.156-2.093,7.156-6.281C14.793,17.729,4.272,18.464,4.272,14.957z M25.707,26.242
+	c-0.594,0.68-1.754,1.557-3.281,1.557c-1.188,0-1.81-0.623-1.81-2.603v-9.56h-3.507v10.068c0,3,1.414,4.923,4.356,4.923
+	c1.725,0,3.225-0.962,4.525-1.867v1.584h3.224V15.636h-3.507V26.242z M39.96,15.353c-1.584,0-2.743,0.651-3.762,1.641v-1.357h-3.366
+	v20.082h3.507v-6.732h0.057c0.707,0.934,2.376,1.641,3.564,1.641c3.79,0,5.883-3.621,5.883-7.242
+	C45.843,18.803,43.863,15.353,39.96,15.353z M39.055,27.799c-1.132,0-2.009-0.595-2.716-1.245v-7.071
+	c0.735-0.566,1.217-1.301,2.716-1.301c2.093,0,3.281,1.697,3.281,4.809C42.336,26.1,41.148,27.799,39.055,27.799z M111.762,26.214
+	c0-5.373-7.354-4.299-7.354-6.815c0-0.877,0.623-1.443,1.98-1.443c1.103,0,2.036,0.791,2.743,1.556l2.206-1.923
+	c-1.273-1.499-3.224-2.235-5.176-2.235c-2.545,0-4.865,1.527-4.865,4.272c0,5.12,7.354,4.214,7.354,6.732
+	c0,0.989-0.849,1.669-2.093,1.669c-1.499,0-2.602-0.99-3.422-2.122l-2.348,1.754c1.301,1.924,3.225,2.971,5.572,2.971
+	C109.442,30.628,111.762,29.27,111.762,26.214z M140.611,0l-11.523,3.955l14.217,5.386l-5.218,14.094l9.686-5.538L154,5.063
+	L140.611,0z M51.918,42.583c0-0.549,0.42-0.783,1.007-0.783c0.636,0,1.057,0.372,1.262,0.92l1.232-0.382
+	c-0.42-1.027-1.359-1.595-2.494-1.595c-1.222,0-2.279,0.714-2.279,1.976c0,2.171,3.639,1.897,3.639,3.286
+	c0,0.684-0.518,0.939-1.194,0.939c-0.792,0-1.212-0.439-1.535-1.105l-1.115,0.489c0.4,1.027,1.486,1.672,2.64,1.672
+	c1.565,0,2.475-0.723,2.475-2.171C55.557,43.54,51.918,43.794,51.918,42.583z M97.907,40.831l-2.034,7.071h1.34l0.42-1.525h2.23
+	l0.392,1.525h1.34l-2.005-7.071H97.907z M97.927,45.262l0.831-3.071h0.02l0.792,3.071H97.927z M107.042,44.176
+	c0.773-0.303,1.076-0.87,1.076-1.604c-0.078-1.261-0.988-1.731-2.397-1.731h-2.621v7.062h2.602c1.8,0,2.573-0.763,2.573-1.858
+	C108.275,44.969,107.962,44.548,107.042,44.176z M104.451,41.936h1.35c0.646,0,0.969,0.372,0.969,0.861
+	c0,0.489-0.323,0.861-0.969,0.861h-1.35V41.936z M105.8,46.807h-1.35v-2.054h1.35c0.783,0,1.125,0.352,1.125,1.027
+	C106.926,46.455,106.583,46.807,105.8,46.807z M115.19,42.934c-0.009-1.164-0.655-2.093-2.259-2.093h-2.817v7.062h1.35v-2.875h1.164
+	l1.331,2.875h1.496l-1.555-3.149C114.76,44.509,115.2,43.805,115.19,42.934z M112.461,43.932h-0.998v-1.996h1.232
+	c0.743,0,1.144,0.333,1.144,0.998C113.84,43.599,113.517,43.932,112.461,43.932z M117.195,47.902h1.35v-7.062h-1.35V47.902z
+	 M59.811,40.743c-1.927,0-2.963,1.32-2.963,3.628c0,2.308,1.036,3.629,2.963,3.629c1.927,0,2.964-1.32,2.964-3.629
+	C62.775,42.063,61.738,40.743,59.811,40.743z M59.811,46.866c-1.115,0-1.633-0.841-1.613-2.494c0-1.652,0.509-2.493,1.613-2.493
+	c1.106,0,1.614,0.841,1.614,2.493C61.425,46.025,60.917,46.866,59.811,46.866z M91.129,47.902h1.35v-3.11h2.358v-1.134h-2.358
+	v-1.682h3.15v-1.135h-4.499V47.902z M123.112,46.866c-1.017,0-1.506-0.841-1.486-2.494c0-1.652,0.548-2.493,1.447-2.493
+	c0.665,0,1.086,0.42,1.281,1.016l1.222-0.293c-0.332-1.252-1.115-1.858-2.465-1.858c-1.8,0-2.836,1.32-2.836,3.628
+	c0,2.308,1.036,3.629,2.836,3.629c1.291,0,2.211-0.625,2.631-1.848l-1.252-0.333C124.091,46.65,123.719,46.866,123.112,46.866z
+	 M76.488,42.934c-0.01-1.164-0.655-2.093-2.259-2.093h-2.816v7.062h1.35v-2.875h1.164l1.33,2.875h1.496l-1.555-3.149
+	C76.057,44.509,76.497,43.805,76.488,42.934z M73.759,43.932h-0.998v-1.996h1.232c0.743,0,1.145,0.333,1.145,0.998
+	C75.138,43.599,74.815,43.932,73.759,43.932z M68.262,45.321c0,1.144-0.45,1.545-1.36,1.545c-0.909,0-1.359-0.402-1.359-1.545v-4.48
+	h-1.35v4.421c0,2.063,1.271,2.738,2.709,2.738c1.438,0,2.71-0.675,2.71-2.738v-4.421h-1.35V45.321z M86.112,44.792h2.415v-1.134
+	h-2.415v-1.682h3.325v-1.135h-4.675v7.062h4.783v-1.134h-3.433V44.792z M80.684,46.866c-1.018,0-1.506-0.841-1.487-2.494
+	c0-1.652,0.548-2.493,1.447-2.493c0.665,0,1.085,0.42,1.281,1.016l1.223-0.293c-0.333-1.252-1.115-1.858-2.464-1.858
+	c-1.799,0-2.837,1.32-2.837,3.628c0,2.308,1.037,3.629,2.837,3.629c1.291,0,2.21-0.625,2.631-1.848l-1.252-0.333
+	C81.661,46.65,81.29,46.866,80.684,46.866z"/>
+</svg>

package/app/styles/_accessibility.scss

@@ -7,6 +7,7 @@
     height: 0 !important;
     width: 0 !important;
     min-width: 0 !important;
+    min-height: 0 !important;
     overflow: hidden !important;
     font-size: 0.01px !important;
     padding: 0 !important;

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

@@ -140,6 +140,9 @@ $sd-big-icon-font: (
         &.color--light {
             color: var(--color-text-lighter) !important;
         }
+        &.color--white {
+            color: hsla(214, 13%, 90, 1) !important;
+        }
 
         &.scale--2x {
             --big-icon-size: 52px

package/app/styles/_boxed-list.scss

@@ -42,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;

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

@@ -384,7 +384,7 @@ p strong {
     font-weight: 500;
 }
 time {
-    color: $sd-text-lighter;
+    color: $sd-text-light;
     font-weight: 400;
     letter-spacing: .025em;
     &.small {
@@ -446,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,
@@ -948,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

package/app/styles/_icon-font.scss

@@ -319,6 +319,9 @@ $sd-icon-font: (
         &.color--light {
             color: var(--color-text-lighter) !important;
         }
+        &.color--white {
+            color: hsla(214, 13%, 90, 1) !important;
+        }
 
         &.scale--2x {
             --icon-base-size: 32px

package/app/styles/app.scss

@@ -34,6 +34,7 @@
 @import 'loaders';
 @import 'spinner';
 @import 'table-list';
+@import 'hamburger';
 
 // Interface elements
 @import 'interface-elements/side-panel';
@@ -67,6 +68,7 @@
 @import 'components/subnav';
 @import 'components/theme-selector';
 @import 'components/sd-dropzone';
+@import 'components/sd-notification-panel';
 
 // Dropdowns
 @import 'dropdowns/basic-dropdown';
@@ -89,6 +91,7 @@
 @import 'menus/sd-top-menu';
 @import 'menus/sd-left-navigation';
 @import 'menus/sd-content-navigation';
+@import 'menus/sd-bottom-tabs';
 
 // Editor
 @import 'editor/editor-themes';

package/app/styles/components/_sd-notification-panel.scss

@@ -0,0 +1,48 @@
+.sd-notification-panel {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+    position: fixed;
+    color: var(--color-text);
+    inset-block-start: $nav-height;
+    inset-block-end: 3.2rem;
+    inset-inline-end: -336px;
+    width: 32rem;
+    background: hsla(218, 13%, 12%, 0.82);
+    backdrop-filter: blur(6px);
+    box-shadow: 0 2px 12px hsla(0, 0%, 0%, 0.32), 0 1px 4px hsla(0, 0%, 0%, 0.32), 0 0 0 1px var(--sd-colour-line--light);
+    z-index: 100;
+    transition: inset-inline-end 0.2s ease;
+    border-radius: var(--b-radius--x-large);
+    margin: 12px 0;
+    &.sd-notification-panel--open {
+        inset-inline-end: 12px;
+    }
+}
+
+.sd-notification-panel__header {
+    grid-row: 1 / 2;
+    grid-column: 1 / 2;
+    height: $nav-height;
+    border-bottom: 1px solid var(--sd-colour-line--light);
+    padding-inline: $sd-base-increment * 2 $sd-base-increment;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.sd-notification-panel__title {
+    font-size: 16px;
+    color: var(--color-text);
+    font-weight: 300;
+    margin-inline-end: auto;
+    padding-inline-end: $sd-base-increment;
+}
+
+.sd-notification-panel__content {
+    grid-row: 2 / 2;
+    grid-column: 1 / 2;
+    overflow-y: auto;
+    position: relative;
+    padding: $sd-base-increment * 2;
+}

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -73,12 +73,9 @@
     --sd-shadow__menu-item--focus-inner: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20), inset 0 0 0 1px var(--sd-colour-interactive--alpha-50);
 }
 
-
-
-
 .sd-top-menu, #top-menu {
     .navbtn, .sd-navbtn {
-      --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
-      --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important;
+      --color-navbutton-border: hsla(214, 13%, 70%, 0.2) !important;
+      --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.2) !important;
     }
   }

package/app/styles/design-tokens/_new-colors.scss

@@ -277,6 +277,9 @@
     --sd-colour-top-menu:                   var(--sd-colour-bg--02);
     --sd-colour-top-menu__btn:              var(--sd-colour-bg--03);
     --sd-colour-bottom-bar:                 var(--sd-colour-bg--01);
+    --sd-colour-bottom-bar__item:           var(--sd-colour-bg--01);
+    --sd-colour-bottom-bar__item--hover:    var(--sd-colour-bg--02);
+    --sd-colour-bottom-bar__item--active:   var(--sd-colour-interactive--active);
 
     --sd-colour-line--x-light:              hsla(var(--sd-colour-cool-grey-l--20), 0.1);
     --sd-colour-line--light:                hsla(var(--sd-colour-cool-grey-l--20), 0.16);
@@ -310,6 +313,7 @@
     --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.07), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
     
     --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
+    --sd-shadow__item--unread:              0 0 0 1px var(--sd-colour-interactive--alpha-30), inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
     --sd-shadow__item--selected-thin:       0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
 
     // Webkit scrollbar colors
@@ -455,6 +459,7 @@
     --sd-shadow__subnav:                    0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.14), 0 2px 0 0 hsla(0, 0%, 0%, 0.12);
 
     --sd-shadow__item--selected:            0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
+    --sd-shadow__item--unread:              0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
     --sd-shadow__item--selected-thin:       0 0 0 1px var(--sd-colour-interactive), inset 0 0 0 2px var(--sd-colour-interactive--alpha-30);
 
     // Webkit scrollbar colors