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

package/app/styles/dropdowns/_basic-dropdown.scss

@@ -109,6 +109,10 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
     border-radius: $dropdownMenuBorderRadius;
     text-align: start;
 
+    .dropdown {
+        width: 100%;
+    }
+
     // Links within the dropdown menu
     li, .dropdown__menu-item {
         a:not(.btn), button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
@@ -193,8 +197,10 @@ $focus-box-shadow:              0 0 0 3px $sd-colour--focus-shadow;
         }
         .dropdown__menu-body {
             overflow-y: auto;
+            overflow-x: hidden;
             flex: 0 1;
             padding: 0.6rem 0;
+            max-height: 320px;
         }
         .dropdown__menu-body:first-child {
             .dropdown__menu-label {

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,84 @@
     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;
+        align-self: flex-start;
+    }
+    .btn,
+    .icn-btn {
+        flex: 0 0 auto;
+        margin-top: $form-label-height;
+    }
+    .sd-text {
+        min-height: $form-input-height;
+        margin-block-start: $form-label-height;
+        line-height: $form-input-height;
+    }
+    &--condensed {
+        gap: $sd-base-increment;
+    }
+    &--relaxed {
+        gap: $sd-base-increment * 3;
+    }
+    &--mb-0 {
+        margin-bottom: 0;
+    }
+    &--mb-1 {
+        margin-bottom: $sd-base-increment;
+    }
+    &--mb-2 {
+        margin-bottom: $sd-base-increment * 2;
+    }
+    &--mb-3 {
+        margin-bottom: $sd-base-increment * 3;
+    }
+    &--mb-4 {
+        margin-bottom: $sd-base-increment * 4;
+    }
+    &--inline-labels {
+        .btn,
+        .icn-btn,
+        .sd-text {
+            margin-top: 0;
+        }
+    }
+    &--inline-labels {
+        .btn,
+        .icn-btn,
+        .sd-text {
+            margin-top: 0;
+        }
+    }
+
+}
+
+.form__group-new__wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    .form__group-new__label {
+        flex: 0 0 auto;
+        min-height: $form-label-height + 0.4rem;
+        display: inline-block;
+        font-size: 1.6rem;
+        margin: 0;
+        margin-bottom: $sd-base-increment * 1.5;
+        line-height: 1;
+        color: var(--color-label-text);
+        //text-transform: uppercase;
+        font-weight: 500;
+        letter-spacing: 0.02em;
+    }
+}

package/app/styles/form-elements/_input-wrap.scss

@@ -0,0 +1,138 @@
+
+.input-wrap {
+    padding-top: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-gap: 0;
+    position: relative;
+    align-self: stretch;
+    flex-grow: 1;
+    width: 100%;
+    row-gap: $sd-base-increment / 2;
+
+    .input-wrap__input-container,
+    .sd-input__input {
+        grid-row: 2/3;
+        grid-column: 2/4;
+    }
+
+    .input-wrap__message-box {
+        grid-row: 3/4;
+        grid-column: 2/3;
+    }
+
+    .input-wrap__icon-right {
+        grid-row: 2/3;
+        grid-column: 3/4;
+        z-index: 1;
+    }
+    .sd-input__char-count {
+        grid-row: 3/4;
+        grid-column: 3/4;
+        z-index: 1;
+        font-size: 1.1rem;
+        font-weight: 400;
+        font-style: italic;
+    }
+
+    .sd-input__label,
+    .form-label {
+        grid-row: 1/2;
+        grid-column: 2/3;
+        margin-bottom: 0 !important;
+        align-items: center;
+        justify-content: flex-start;
+    }
+    .form-label--boxed {
+        margin-block: 2px !important;
+    }
+    .icn-btn {
+        grid-row: 1/2;
+        grid-column: 3/4;
+    }
+
+    &--inline-label {
+        grid-template-columns: auto 1fr auto;
+        grid-template-rows: auto auto auto;
+        .sd-input__label,
+        .form-label {
+            grid-row: 2/3;
+            grid-column: 1/2;
+            padding-inline-end: 1rem;
+            padding-inline-start: 0;
+            padding-block-start: 0.4rem;
+            padding-block-end: 0;
+            position: relative;
+
+            max-width: 260px;
+            min-width: 100px;
+            text-align: end;
+            position: relative;
+            align-self: center;
+            line-height: 1.2;
+            &::after {
+                position: absolute;
+                z-index: 2;
+                inset-block-start: -2px;
+                inset-inline-end: 4px;
+            }
+        }
+    }
+
+    &--required {
+        .sd-input__label::after  {
+            color:$red;
+            content: "*";
+            vertical-align: top;
+            font-size: 1.2rem;
+            padding-left: 0.3rem;
+        }
+        .sd-input__label.sd-input__label--boxed::after {
+            position: absolute;
+            inset-block-start: -4px;
+            inset-inline-end: -10px;
+        }
+    }
+
+    &--disabled {
+        .sd-input__label, 
+        .sd-input__message-box, 
+        .sd-input__char-count {
+            opacity: 0.5 !important;
+            pointer-events: none !important;
+        }
+        .sd-input__hint,
+        .sd-input__message,
+        .sd-input__char-count {
+            pointer-events: none;
+        }
+    }
+
+    &--no-label {
+        grid-template-rows: auto auto auto;
+    }
+
+    &--medium {
+        &.sd-input--boxed-style {
+            .sd-input__input,
+            .sd-input__select {
+                border-radius: var(--b-radius--medium);
+                &:focus {
+                    box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
+                }
+            }
+        }
+    }
+    &--boxed {
+        //grid-template-columns: auto 1fr auto;
+        //grid-template-rows: auto auto auto;
+        // grid-gap: 0;
+        // position: relative;
+        // align-self: stretch;
+        // flex-grow: 1;
+        // width: 100%;
+
+    }
+}