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

package/app/styles/components/_subnav.scss

@@ -277,94 +277,101 @@ $navbutton-focus-box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-
       }
     }
   }
+  .sd-create-btn {
+    background-color: var(--color-dropdown-menu-Bg);
+    position: relative;
+    box-shadow: 0 8px 0 0px var(--color-dropdown-menu-Bg), -2px -1px 8px -2px rgba(0, 0, 0, 0.24), 3px -1px 8px -2px rgba(0, 0, 0, 0.24);
+    border-color: transparent !important;
+    z-index: 1001;
+  }
 }
   
 .navbtn {
-    position: relative;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    height: $subnav-height;
-    width: 4.8rem;
-    padding: 0;
-    background: transparent;
-    color: $sd-text;
-    text-align: center;
-    text-decoration: none;
-    border: 0px solid transparent;
-    border-color: $navbutton-border-color;
-    border-inline-width: 1px 0;
-    cursor:pointer;
-    background: transparent;
-    transition: background-color 0.2s ease-out, color 0.1s ease-out;
-    i {
-        opacity: 0.75;
-        vertical-align: baseline !important;
-        transition: opacity 0.2s ease-out;
-    }
-    [class^="big-icon--"],
-    [class*=" big-icon--"] {
-        line-height: 1;
-        color: $sd-text;
-        display: block;
-    }
-    .big-icon--send-to {
-        margin-left: 0.3rem;
-    }
-    [class^="icon-"],
-    [class*=" icon-"] {
-        color: $sd-text;
-    }
-    &:hover {
-        background: var(--color-navbutton-bg-hover);
-        > i {
-            opacity: 1;
-        }
-    }
-    &.navbtn--left {
-        border-inline-width: 0 1px;
-    }
-    &.navbtn--blue {
-        background: $sd-colour-interactive;
-        border-color: var(--sd-colour-interactive--lighten-10);
-        color: $white;
-        &.disabled {
-            background: var(--sd-colour-interactive--lighten-30);
-        }
-    }
-    &.navbtn--text-only {
-      width: auto;
-      line-height: $subnav-height;
-      padding: 0 20px;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: $subnav-height;
+  width: 4.8rem;
+  padding: 0;
+  background: transparent;
+  color: $sd-text;
+  text-align: center;
+  text-decoration: none;
+  border: 0px solid transparent;
+  border-color: $navbutton-border-color;
+  border-inline-width: 1px 0;
+  cursor:pointer;
+  background: transparent;
+  transition: background-color 0.2s ease-out, color 0.1s ease-out;
+  i {
+      opacity: 0.75;
+      vertical-align: baseline !important;
+      transition: opacity 0.2s ease-out;
+  }
+  [class^="big-icon--"],
+  [class*=" big-icon--"] {
+      line-height: 1;
+      color: $sd-text;
+      display: block;
+  }
+  .big-icon--send-to {
+      margin-left: 0.3rem;
+  }
+  [class^="icon-"],
+  [class*=" icon-"] {
+      color: $sd-text;
+  }
+  &:hover {
+      background: var(--color-navbutton-bg-hover);
+      > i {
+          opacity: 1;
+      }
+  }
+  &.navbtn--left {
       border-inline-width: 0 1px;
-      font-size: 1.5rem;
-    }
-    &.navbtn--border-r {
-      border-inline-end: 1px !important;
-    }
-    &.navbtn--highlighted {
-      background-color: $purple !important;
-      transition: all 0.3s;
-      padding: 0 0 0 9px;
+  }
+  &.navbtn--blue {
+      background: $sd-colour-interactive;
+      border-color: var(--sd-colour-interactive--lighten-10);
       color: $white;
-      &:hover {
-        background-color: darken($purple, 10%);
-      }
-    }
-    &.navbtn--darker {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    &.navbtn--active {
-      background-color: $sd-colour-interactive;
-        > i {
-          opacity: 1;
-          color: $white;
+      &.disabled {
+          background: var(--sd-colour-interactive--lighten-30);
       }
+  }
+  &.navbtn--text-only {
+    width: auto;
+    line-height: $subnav-height;
+    padding: 0 20px;
+    border-inline-width: 0 1px;
+    font-size: 1.5rem;
+  }
+  &.navbtn--border-r {
+    border-inline-end: 1px !important;
+  }
+  &.navbtn--highlighted {
+    background-color: $purple !important;
+    transition: all 0.3s;
+    padding: 0 0 0 9px;
+    color: $white;
+    &:hover {
+      background-color: darken($purple, 10%);
     }
-    &.navbtn--publish {
-      background-color: rgba(0, 0, 0, 0.05);
+  }
+  &.navbtn--darker {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  &.navbtn--active {
+    background-color: $sd-colour-interactive;
+      > i {
+        opacity: 1;
+        color: $white;
     }
+  }
+  &.navbtn--publish {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
 }
 
 .dropdown.open {

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

@@ -2,6 +2,13 @@
 // ====================================================
 :root {
     // GENERAL
+    --gap--x-small:   0.4rem;  // 4px
+    --gap--small:     0.8rem;  // 8px
+    --gap--medium:    1.6rem;  // 16px
+    --gap--large:     2.4rem;  // 24px;
+    --gap--x-large:   3.2rem;  // 32px;
+    --gap--xx-large:  4rem;    // 40px;
+    --gap--auto:      auto;
 
     // BORDER RADIUS
     --b-radius--x-small: 2px;
@@ -66,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,8 @@
     --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
     --sd-colour__webkit-scrollbar--hover:       hsla(214, 13%, 50%, 0.24);
@@ -445,7 +450,7 @@
     --sd-colour-bg__sliding-toolbar:        var(--sd-colour-interactive--darken-30);
     --sd-colour-bg__searchbar:              var(--sd-colour-bg--02);
 
-    --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--20), 0.85);
+    --sd-colour-overlay-actioning:          hsla(var(--sd-colour-cool-grey-l--15), 0.85);
 
     --color-dropdown-menu-Bg:               var(--sd-colour-bg--05);
 
@@ -454,6 +459,8 @@
     --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
     --sd-colour__webkit-scrollbar--hover:       hsla(214, 13%, 30%, 0.24);
@@ -556,7 +563,7 @@
     --color-text-light:                   hsla(214, 13%, 30%, 0.75);
     --color-text-lighter:                 hsla(214, 13%, 30%, 0.55);
     --color-icon-default:                 hsla(214, 13%, 30%, 1);
-    --sd-slugline-color:                  hsla(197, 100%, 5%, 1) !important;
+    --sd-slugline-color:                  hsla(197, 100%, 15%, 1) !important;
     --sd-time-schedule-color:             hsla(268, 100%, 25%, 1);
     --sd-navy-color:                      hsla(240, 100%, 25%, 1);
     
@@ -572,7 +579,7 @@
     --color-checkbox-border-hover:        hsla(0, 0%, 0%, 0.4);
   
     --color-selected-bg:                  hsla(196, 35%, 94%, 1);
-    --color-selected-bg--hover:           var(--sd-colour-interactive--alpha-10);
+    --color-selected-bg--hover:           hsla(196, 35%, 93%, 1);
   
     --color-bg-00:                        hsla(0, 0%, 100%, 1);
     --color-bg-50:                        hsla(0, 0%, 97%, 1);

package/app/styles/form-elements/_forms-general.scss

@@ -81,13 +81,6 @@
              margin-bottom: 1rem;
              margin-right: 0;
          }
-         & + div {
-             margin-top: .4rem;
-
-             .label {
-                 margin-bottom: .3rem;
-             }
-         }
     }
 }
 .label--active {
@@ -260,3 +253,25 @@
     background-color: var(--color-form-bg);
     color: var(--color-text);
 }
+
+
+/// ---------------------------- NEW FORM LAYOUT TEST---------------------------- ///
+
+
+
+.form__group-new {
+    display: flex;
+    flex-direction: row;
+    width:100%;
+    align-items: flex-start;
+    gap: $sd-base-increment * 2;
+    .sd-input {
+        flex: 1 1 0;
+        min-width: 12rem;
+        margin: 0;
+    }
+    .btn {
+        flex: 0 0 auto;
+        margin-top: $form-label-height;
+    }
+}