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

package/app/styles/form-elements/_inputs.scss

@@ -4,40 +4,26 @@
 // input, textarea, select {
 
 @mixin Line-input-base {
-    width: 100%;
     @include appearance-reset();
-    color: inherit;
-    border-radius: 0;
+    width: 100%;
+    color: var(--color-text);
     border: 0;
     border-bottom: 1px solid var(--color-input-border);
-    background-color: transparent;
-    padding: 0;
     font-size: 1.4rem;
-    height: 2.4rem;
-    transition: border linear 0.2s, box-shadow linear 0.2s;
-    display: inline;
+    background-color: var(--color-input-bg);
+    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+    padding: 0 0.8rem;
+    height: $form-input-height;
+    border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
+    display: block;
     &:hover {
         border-color: var(--color-input-border-hover);
-        background-color: transparent;
-    }
-    &:focus {
-        box-shadow: 0 1px 0 0 $sd-blue;
-        border-color: $sd-blue;
-        background-color: transparent;
-    }
-}
-@mixin Line-input-boxed {
-    @include Line-input-base;
-    border-radius: 2px;
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 0 1rem;
-    height: 3.2rem;
-    transition: border linear 0.2s, box-shadow linear 0.2s, background-color linear 0.2s;
-    &:hover {
-        background-color: rgba(0, 0, 0, 0.10);
+        background-color: var(--color-input-bg--hover);
     }
     &:focus {
-        background-color: rgba(0, 0, 0, 0.05);
+        box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
+        border-color: var(--sd-colour-interactive);
+        background-color: var(--sd-colour-interactive--alpha-20);
     }
 }
 
@@ -45,7 +31,7 @@
     display: inline-block;
     font-size: 1.1rem;
     margin: 0 0.5rem 0 0;
-    line-height: 2.6rem;
+    line-height: 1;
     color: var(--color-label-text);
     text-transform: uppercase;
     font-weight: 500;
@@ -56,8 +42,9 @@
 .form-label {
     @include Form-label-base;
     min-width: 75px;
+    min-height: 1.6rem;
     &--light {
-        color: $grayLight;
+        color: var(--color-text-lighter);
         font-weight: 400;
     }
     &--marg-b10 {
@@ -88,19 +75,19 @@
 .form-label__info-block {
     color: inherit;
     font-size: 1.2rem;
-    text-align: right;
+    text-align: end;
     font-weight: 300;
 }
 
 .sd-line-input {
     margin: 0 0 1.8em 0;
-    padding-top: 1.4rem;
+    padding-top: 1.8rem;
     position: relative;
 
     &--flex-row {
         display: inline-flex;
         align-items: center;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+        border-bottom: 1px solid var(--color-input-border);
         width: 100%;
     }
     &__value {
@@ -147,15 +134,16 @@
             position: relative;
             z-index: 2;
             option {
-                color:$sd-text;
+                color: var(--color-text);
                 font-size: 1.4rem;
                 line-height: 2rem;
+                background-color: var(--color-dropdown-menu-Bg);
             }
         }
         cursor: pointer;
     }
     textarea.sd-line-input__input {
-      padding-top: 3px;
+      padding-top: 0.6rem;
       display: block;
     }
     .sd-line-input__info-left, .sd-line-input__info-right { // use for 1-2 letter info that appear inside inputs ("W" - for width; "H" - for height; px, mm - for units, etc.)
@@ -174,56 +162,14 @@
 
     .sd-line-input__icon-left, .sd-line-input__icon-right {
         position: absolute;
-        top: 0.8rem;
+        top: 1.6rem;
         cursor: pointer;
     }
     .sd-line-input__icon-right {
-        right: 0;
+        right: 0.2rem;
     }
     .sd-line-input__icon-left {
-        left: 0;
-    }
-
-    &--boxed {
-        padding-top: 1.8rem;
-        input, textarea {
-            &.sd-line-input__input {
-                @include Line-input-boxed;
-            }
-        }
-        textarea {
-            &.sd-line-input__input {
-                padding-top: 0.6rem;
-            }
-        }
-        select {
-            &.sd-line-input__select {
-                @include Line-input-boxed;
-            }
-        }
-        &.sd-line-input--disabled {
-            input, textarea {
-                &.sd-line-input__input {
-                    background-color: rgba(0, 0, 0, 0.03);
-                    border-bottom: 1px dotted $grayLight !important;
-                }
-            }
-            select {
-                &.sd-line-input__select, &.sd-line-input__select:hover {
-                    background-color: rgba(0, 0, 0, 0.03);
-                    border-bottom: 1px dotted $grayLight !important;
-                }
-            }
-        }
-        .sd-line-input__icon-right, .sd-line-input__icon-left {
-            top: 1.6rem;
-        }
-        .sd-line-input__icon-left {
-            left: 0.2rem;
-        }
-        .sd-line-input__icon-right {
-            right: 0.2rem;
-        }
+        left: 0.2rem;
     }
 
     &.sd-line-input--indent-l30 {
@@ -261,7 +207,7 @@
         font-size: 1.2rem;
         line-height: 1.4rem;
         transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-        color: grey;
+        color: var(--color-text-light);
         font-weight: 300;
         letter-spacing: 0.03em;
     }
@@ -291,16 +237,30 @@
         }
         input, textarea {
             &.sd-line-input__input {
+                background-color: rgba(229, 28, 38, 0.075);
                 border-color: $red;
+                &:hover {
+                    background-color: rgba(229, 28, 38, 0.12);
+                    border-color: $red;
+                }
                 &:focus {
+                    background-color: rgba(229, 28, 38, 0.16);
+                    border-color: $red;
                     box-shadow: 0 1px 0 0 $red;
                 }
             }
         }
         select {
             &.sd-line-input__select {
+                background-color: rgba(229, 28, 38, 0.075);
                 border-color: $red;
+                &:hover {
+                    background-color: rgba(229, 28, 38, 0.12);
+                    border-color: $red;
+                }
                 &:focus {
+                    background-color: rgba(229, 28, 38, 0.16);
+                    border-color: $red;
                     box-shadow: 0 1px 0 0 $red;
                 }
             }
@@ -309,15 +269,21 @@
 
     &.sd-line-input--disabled {
         input, textarea {
-            &.sd-line-input__input {
-                border-bottom: 1px dotted $sd-inputBorderColor;
-                cursor: not-allowed;
+            &.sd-line-input__input, &.sd-input__input:hover, &.sd-input__input:focus {
+                opacity: 0.5;
+                background-color: var(--color-input-bg);
+                border-bottom: 1px dotted var(--color-input-border);
+                cursor: not-allowed !important;
+                box-shadow: none;
             }
         }
         select {
-            &.sd-line-input__select {
-                border-bottom: 1px dotted $sd-inputBorderColor;
-                cursor: not-allowed;
+            &.sd-line-input__select, &.sd-line-input__select:hover, &.sd-line-input__select:focus {
+                opacity: 0.5;
+                background-color: var(--color-input-bg);
+                border-bottom: 1px dotted var(--color-input-border);
+                cursor: not-allowed !important;
+                box-shadow: none;
             }
         }
     }
@@ -326,45 +292,34 @@
     &.sd-line-input--is-select {
         &::after {
             position: absolute;
-            top: 2.6rem;
-            right: 0.4rem;
+            inset-block-start: 3.2rem;
+            inset-inline-end: 0.8rem;
             display: inline-block;
             width: 0;
             height: 0;
             vertical-align: middle;
             border-left: 0.4rem solid transparent;
             border-right: 0.4rem solid transparent;
-            border-top: 0.4rem solid #000;
-            @include opacity(30);
+            border-top: 0.4rem solid $sd-text;
+            opacity: 0.3;
             content: "";
             z-index: 0;
         }
         &:hover {
             &::after {
-                @include opacity(60);
+                opacity: 0.6;
             }
         }
         &.sd-line-input--disabled {
             &:hover {
                 &::after {
-                    @include opacity(30);
+                    opacity: 0.3;
                 }
             }
         }
-        &.sd-line-input--boxed {
-            &::after {
-                top: 3.2rem;
-                right: 0.8rem;
-            }
-        }
         &.sd-line-input--no-label {
             &::after {
-                top: 1.2rem;
-            }
-            &.sd-line-input--boxed {
-                &::after {
-                    top: 1.4rem;
-                }
+                top: 1.4rem;
             }
         }
         &.sd-line-input--label-left {
@@ -378,117 +333,6 @@
             line-height: 140%;
         }
     } 
-    // DARK UI
-    // modifications for dark background color
-
-    &--dark-ui {
-        input, textarea, textarea {
-            &.sd-line-input__input {
-                border-bottom-color: rgba($sd-inputBorderColor-darkUi, 0.2);
-                color: rgba($white, 0.8);
-                &:hover {
-                    border-bottom-color: $sd-inputBorderColor-darkUi;
-                }
-                &:focus {
-                    box-shadow: 0 1px 0 0 $sd-blue;
-                    border-color: $sd-blue;
-                }
-            }
-        }
-        select {
-            &.sd-line-input__select {
-                border-bottom-color: rgba($sd-inputBorderColor-darkUi, 0.2);
-                color: rgba($white, 0.8);
-                &:hover {
-                    border-bottom-color: $sd-inputBorderColor-darkUi;
-                }
-                &:focus {
-                    box-shadow: 0 1px 0 0 $sd-blue;
-                    border-color: $sd-blue;
-                }
-            }
-        }
-        .sd-line-input__label {
-            color: rgba(255,255,255,.4);
-        }
-        &.sd-line-input--disabled {
-            input, textarea {
-                &.sd-line-input__input {
-                    border-bottom: 1px dotted rgba($sd-inputBorderColor-darkUi, 0.2);
-                    &:focus, &:hover {
-                        border-bottom: 1px dotted rgba($sd-inputBorderColor-darkUi, 0.2);
-                        box-shadow: none;
-                    }
-                }
-            }
-            select {
-                &.sd-line-input__select {
-                    border-bottom: 1px dotted rgba($sd-inputBorderColor-darkUi, 0.2);
-                    &:focus, &:hover {
-                        border-bottom: 1px dotted rgba($sd-inputBorderColor-darkUi, 0.2);
-                        box-shadow: none;
-                    }
-                }
-            }
-        }
-        &.sd-line-input--boxed {
-            input, textarea, textarea {
-                &.sd-line-input__input {
-                    background-color: rgba(255, 255, 255, 0.05);
-                }
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
-                &:focus {
-                    background-color: rgba(255, 255, 255, 0.05);
-                }
-            }
-            select {
-                &.sd-line-input__select {
-                    background-color: rgba(255, 255, 255, 0.05);
-                }
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
-                &:focus {
-                    background-color: rgba(255, 255, 255, 0.05);
-                }
-            }
-            &.sd-line-input--disabled {
-                input, textarea, textarea {
-                    &.sd-line-input__input {
-                        background-color: rgba(255, 255, 255, 0.03);
-                        border-bottom-color: rgba($sd-inputBorderColor-darkUi, 0.2) !important;
-                    }
-                }
-                select {
-                    &.sd-line-input__select, &.sd-line-input__select:hover {
-                        background-color: rgba(255, 255, 255, 0.03);
-                        border-bottom-color: rgba($sd-inputBorderColor-darkUi, 0.2) !important;
-                    }
-                }
-            }
-        }
-
-        &.sd-line-input--invalid {
-            input, textarea {
-                &.sd-line-input__input {
-                    border-color: $red;
-                }
-            }
-            select {
-                &.sd-line-input__select {
-                    border-color: $red;
-                }
-            }
-        }
-        &.sd-line-input--is-select {
-            &::after {
-                border-top-color: #fff;
-            }
-        }
-    }
-     // End DARK UI
 
     &.sd-line-input--required {
         .sd-line-input__label::after {
@@ -537,7 +381,7 @@
             position: static;
             grid-row: 2/3;
             grid-column: 5/4;
-            text-align: right;
+            text-align: end;
             padding-left: 1.6rem;
         }
     }
@@ -568,9 +412,9 @@
         left: 0;
         height: 2.2rem;
         width: 2.2rem;
-        background-color: scale-color($sd-blue, $alpha: -25%);
+        background-color: var(--sd-colour-interactive--alpha-70);
         transition: $button-transition;
-        border-radius: 2px;
+        border-radius: $border-radius__base--x-small;
         cursor: pointer;
         text-align: center;
         &::before {
@@ -582,132 +426,12 @@
             -moz-osx-font-smoothing: grayscale;
         }
         &:hover {
-            background-color: $sd-blue;
+            background-color: $sd-colour-interactive;
         }
     }
 
 }
 
-// DARK UI ---------------------------------------------
-//------------------------------------------------------
-
-[class^="--dark-ui"],
-[class*="--dark-ui"],
-[class^="dark-ui"],
-[class*="dark-ui"] {
-    .form-label {
-        color: inherit;
-        opacity: 0.4;
-    }
-
-    .sd-line-input {
-        input, textarea, textarea {
-            &.sd-line-input__input {
-                border-bottom-color: rgba($sd-inputBorderColor-darkUi, 0.2);
-                color: rgba($white, 0.8);
-                &:hover {
-                    border-bottom-color: $sd-inputBorderColor-darkUi;
-                }
-                &:focus {
-                    box-shadow: 0 1px 0 0 $sd-blue;
-                    border-color: $sd-blue;
-                }
-            }
-        }
-        select {
-            &.sd-line-input__select {
-                border-bottom-color: rgba($sd-inputBorderColor-darkUi, 0.2);
-                color: rgba($white, 0.8);
-                &:hover {
-                    border-bottom-color: $sd-inputBorderColor-darkUi;
-                }
-                &:focus {
-                    box-shadow: 0 1px 0 0 $sd-blue;
-                    border-color: $sd-blue;
-                }
-            }
-        }
-        .sd-line-input__label {
-            color: rgba(255,255,255,.4);
-        }
-        &.sd-line-input--disabled {
-            input, textarea {
-                &.sd-line-input__input {
-                    border-bottom: 1px dotted rgba($sd-inputBorderColor-darkUi, 0.2);
-                    &:focus, &:hover {
-                        border-bottom: 1px dotted rgba($sd-inputBorderColor-darkUi, 0.2);
-                        box-shadow: none;
-                    }
-                }
-            }
-            select {
-                &.sd-line-input__select {
-                    border-bottom: 1px dotted rgba($sd-inputBorderColor-darkUi, 0.2);
-                    &:focus, &:hover {
-                        border-bottom: 1px dotted rgba($sd-inputBorderColor-darkUi, 0.2);
-                        box-shadow: none;
-                    }
-                }
-            }
-        }
-        &.sd-line-input--boxed {
-            input, textarea, textarea {
-                &.sd-line-input__input {
-                    background-color: rgba(255, 255, 255, 0.05);
-                }
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
-                &:focus {
-                    background-color: rgba(255, 255, 255, 0.05);
-                }
-            }
-            select {
-                &.sd-line-input__select {
-                    background-color: rgba(255, 255, 255, 0.05);
-                }
-                &:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
-                }
-                &:focus {
-                    background-color: rgba(255, 255, 255, 0.05);
-                }
-            }
-            &.sd-line-input--disabled {
-                input, textarea, textarea {
-                    &.sd-line-input__input {
-                        background-color: rgba(255, 255, 255, 0.03);
-                        border-bottom-color: rgba($sd-inputBorderColor-darkUi, 0.2) !important;
-                    }
-                }
-                select {
-                    &.sd-line-input__select, &.sd-line-input__select:hover {
-                        background-color: rgba(255, 255, 255, 0.03);
-                        border-bottom-color: rgba($sd-inputBorderColor-darkUi, 0.2) !important;
-                    }
-                }
-            }
-        }
-
-        &.sd-line-input--invalid {
-            input, textarea {
-                &.sd-line-input__input {
-                    border-color: $red;
-                }
-            }
-            select {
-                &.sd-line-input__select {
-                    border-color: $red;
-                }
-            }
-        }
-        &.sd-line-input--is-select {
-            &::after {
-                border-top-color: #fff;
-            }
-        }
-    }
-}
 
 /////////////////  -------------------- NEW INPUTS ---------------------  /////////////////
 
@@ -727,14 +451,14 @@
             transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
             padding: 0 0.8rem;
             height: $form-input-height;
-            border-radius: 2px 2px 0 0;
+            border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
             grid-row: 2/3;
             grid-column: 2/4;
             &:hover {
                 background-color: var(--color-input-bg--hover);
             }
             &:focus {
-                background-color: var(--color-input-bg--focus);
+                background-color: var(--sd-colour-interactive--alpha-20);
             }
         }
 
@@ -764,20 +488,22 @@
             transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
             padding: 0 0.8rem;
             height: $form-input-height;
-            border-radius: 2px 2px 0 0;
+            border-radius: $border-radius__base--x-small $border-radius__base--x-small$border-radius__base--x-small 0 0;
             grid-row: 2/3;
             grid-column: 2/4;
+            min-width: 5rem;
             &:hover {
                 background-color: var(--color-input-bg--hover);
             }
             &:focus {
-                background-color: var(--color-input-bg--focus);
+                background-color: var(--sd-colour-interactive--alpha-20);
             }
             option {
                 color:inherit;
                 font-size: 1.4rem;
                 line-height: 2rem;
-                background-color: var(--color-bg__select-option);
+                background-color: var(--color-dropdown-menu-Bg);
+                color: var(--color-dropdown-menu-text);
             }
         }
         cursor: pointer;
@@ -789,23 +515,23 @@
             grid-row: 2/3;
             grid-column: 2/4;
             align-self: center;
-            justify-self: right;
+            justify-self: flex-end;
             display: inline-block;
             width: 0;
             height: 0;
-            margin-right: 1rem;
+            margin-inline-end: 1rem;
             vertical-align: middle;
             border-left: 0.4rem solid transparent;
             border-right: 0.4rem solid transparent;
             border-top: 0.4rem solid var(--color-text);
             pointer-events: none;
-            @include opacity(40);
+            opacity: 0.4;
             content: "";
             z-index: 0;
         }
         &:hover {
             &::after {
-                @include opacity(60);
+                opacity: 0.6;
             }
         }
     }
@@ -824,7 +550,7 @@
         font-size: 1.2rem;
         line-height: 1.4rem;
         transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-        color: grey;
+        color: var(--color-text-light);
         font-weight: 300;
         margin: 0.5rem 0;
         letter-spacing: 0.03em;
@@ -853,7 +579,7 @@
             content: "*";
             vertical-align: top;
             font-size: 1.2rem;
-            padding-left: 0.3rem;
+            padding-inline-start: 0.3rem;
         }
     }
     &--inline-label {
@@ -862,7 +588,24 @@
         .sd-input__label {
             grid-row: 2/3;
             grid-column: 1/2;
-            padding: 1rem 1rem 0 0;
+            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;
+            }
         }
     }
     &--invalid {
@@ -942,4 +685,11 @@
             pointer-events: none;
         }
     }
+    &--no-label {
+        grid-template-rows: auto auto auto;
+    }
+    &--full-width {
+        flex-grow: 1;
+        width: 100%;
+    }
 }