superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

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

@@ -0,0 +1,147 @@
+@use "sass:math";
+@use "../variables/colors";
+@use "../variables/dimensions";
+
+.input-wrap {
+    padding-block-start: 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: math.div(dimensions.$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-block-end: 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;
+    }
+}
+
+.input-wrap--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;
+        }
+    }
+}
+
+.input-wrap--required {
+    .sd-input__label::after  {
+        color:colors.$red;
+        content: "*";
+        vertical-align: top;
+        font-size: 1.2rem;
+        padding-inline-start: 0.3rem;
+    }
+
+    .sd-input__label.sd-input__label--boxed::after {
+        position: absolute;
+        inset-block-start: -4px;
+        inset-inline-end: -10px;
+    }
+}
+
+.input-wrap--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;
+    }
+}
+
+.input-wrap--no-label {
+    grid-template-rows: auto auto auto;
+}
+
+.input-wrap--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);
+            }
+        }
+    }
+}
+.input-wrap--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%;
+}