@basic-ui-components-stc/basic-ui-components 1.0.0

package/dist/assets/scss-old/angular-material/_form-field.scss

@@ -0,0 +1,665 @@
+//mat-form-field
+mat-form-field, .e-control{
+  --input-border-active: var(--black);
+  --input-border-focuse: var(--purple);
+  --input-border-invalid: var(--red);
+  --input-border-disabled: var(--dark-gray);
+  --input-radius: var(--box-radius);
+  --input-bg: white;
+  --input-bg-gray: var(--off-white);
+  --input-fc: var(--black);
+  --input-fc-active: var(--black);
+  --input-fc-focuse: var(--purple);
+  --input-fc-disabled: var(--dark-gray);
+  --input-height: 2.8125rem;
+  --input-width: 100%;
+  --input-fs: 0.875rem;
+  --input-fw: var(--font-regular);
+  --placeholder-fs: 1rem;
+  --placeholder-fw: var(--font-regular);
+  --placeholder-fc: var(--input-border);
+
+  --input-padding: 1rem;
+  --input-align: start;
+
+  --label-fs: 0.875rem;
+  --label-fw: var(--font-medium);
+  --label-fc: var(--black);
+
+  --select-bg: var(--off-white);
+  --select-gap: var(--off-white);
+}
+mat-form-field {
+
+  width: var(--input-width);
+  text-align: start !important;
+  font-size: var(--input-fs);
+  //display: flex;
+  //align-items: flex-end;
+  //height: var(--input-height);
+
+  //padding: 0 !important;
+
+
+  &.mat-form-field-should-float {
+    .mat-form-field-label-wrapper {
+      display: none !important;
+    }
+  }
+
+
+  .mat-form-field-underline {
+    display: none !important;
+  }
+
+  .mat-form-field-flex {
+    padding: 0 var(--input-padding);
+    align-items: center;
+    gap: calc(var(--input-padding)/ 2);
+    height: var(--input-height);
+    background-color: var(--input-bg);
+    border-radius: var(--input-radius);
+    border: 1px solid;
+    border-color: var(--input-border);
+    transition: border-color, color .2s linear;
+
+    .mat-form-field-prefix, .mat-form-field-suffix {
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      .mat-icon-button{
+        width: auto;
+        height: auto;
+      }
+    }
+
+
+    .mat-form-field-infix {
+      padding: 0 !important;
+      border: 0;
+      height: 100%;
+      display: flex;
+      .mat-form-content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        .mat-input-element {
+          color: var(--input-fc);
+          font-weight: var(--input-fw);
+          font-size: var(--input-fs);
+          line-height: 1.5;
+          border: none;
+          text-align: var(--input-align);
+          -moz-appearance: textfield;
+
+          &::placeholder{
+            --input-fc:var(--dark-gray);
+            --input-fw: var(--font-regular);
+          }
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+          &:-webkit-autofill,
+          &:-webkit-autofill:hover,
+          &:-webkit-autofill:focus,
+          &:-webkit-autofill,
+          &:-webkit-autofill:hover,
+          &:-webkit-autofill:focus,
+          &:-webkit-autofill,
+          &:-webkit-autofill:hover,
+          &:-webkit-autofill:focus {
+            background-color: transparent !important;
+            -webkit-box-shadow: 0 0 0 1000px transparent inset;
+          }
+        }
+
+        .mat-icon {
+          & + .mat-input-element {
+            padding: 0 var(--input-padding);
+          }
+        }
+
+
+      }
+
+
+      .mat-form-field-label-wrapper {
+        top: 0 !important;
+        padding-top: 0;
+
+        .mat-form-field-label {
+          top: 0;
+          height: 100%;
+          display: flex !important;
+          align-items: center;
+          transform: none;
+          font-weight: var(--placeholder-fw);
+          color: var(--placeholder-fc);
+          line-height: 1.5;
+          pointer-events: auto;
+
+          &:not(.mat-form-field-empty) {
+            display: none;
+          }
+        }
+      }
+
+      .mat-date-range-input{
+        line-height: var(--input-height);
+      }
+    }
+
+
+
+  }
+
+
+  &.mat-form-field-type-mat-date-range-input{
+    .mat-form-field-flex{
+      overflow: hidden;
+    }
+
+    .mat-date-range-input{
+      line-height: var(--input-height);
+    }
+
+    .mat-date-range-input input{
+      color: var(--input-fc);
+      font-weight: var(--input-fw);
+      font-size: var(--input-fs);
+      border: none;
+      text-align: var(--input-align);
+      -moz-appearance: textfield;
+      background: transparent;
+      padding: 0;
+    }
+  }
+
+
+
+
+
+  &.input-telephone{
+    &.mat-form-field-can-float {
+      &.mat-form-field-should-float {
+        .mat-form-field-flex {
+          .mat-form-field-infix {
+            .mat-form-field-label-wrapper {
+              .mat-form-field-label {
+                font-size: 0.75rem !important;
+                transform: translateY(-.7em) !important;
+                margin-left: 75px;
+                [dir=rtl] &{
+                  margin-left: 0;
+                  margin-right: 75px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .iti{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      .iti__flag-container{
+        background-color: transparent !important;
+        padding: 0;
+        padding-right: .5rem;
+        border-right: 1px solid var(--black);
+        position: static;
+        [dir=rtl] &{
+          padding-right: 0;
+          padding-left: .5rem;
+          border-right: 0;
+          border-left: 1px solid var(--black);
+        }
+
+        .iti__selected-flag{
+          background-color: transparent !important;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          z-index: 3;
+          .iti__arrow{
+            width: 10px;
+            height: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 0;
+            margin-left: .8rem;
+            [dir=rtl] &{
+              margin-right: .8rem;
+              margin-left: 0;
+            }
+            &:before{
+              //content: "\e90b";
+              //font-family: 'stc-font-icons';
+              //font-size: .7rem;
+              //color:var(--dark-gray);
+
+              content: '';
+              font-family: var(--font-icon);
+              font-size: 1rem;
+              color: var(--black);
+              transform: rotate(45deg);
+              padding: 4px;
+              border-width: 0 2px 2px 0 !important;
+              border-color: var(--black);
+              margin-top: -4px;
+              border-style: solid;
+            }
+            &.iti__arrow--up{
+              transform: rotate(180deg);
+            }
+          }
+        }
+
+
+      }
+      .mat-input-element{
+        height: calc(100%);
+        margin: 0;
+        padding: 0 10px;
+
+        [dir=rtl] &{
+          // margin: 0 3px;
+        }
+      }
+      .iti__country-list{
+        //max-width: 260px;
+        font-size: .8rem;
+        border-radius: var(--box-radius) !important;
+        box-shadow: var(--box-shadow) !important;
+        //white-space: normal;
+        margin: 0 -1rem;
+        z-index: 4;
+        .iti__divider{
+          display: none !important;
+        }
+        .iti__country{
+          border-bottom: 1px solid var(--light-gray);
+          background: transparent;
+          display: flex;
+          &:last-child{
+            border-bottom: 0;
+          }
+          &.iti__highlight{
+            background-color: var(--light-gray);
+          }
+        }
+      }
+    }
+  }
+
+
+
+  &.date-range{
+    .mat-date-range-input-start-wrapper, .mat-date-range-input-end-wrapper{
+      display: flex;
+      //&:before{
+      //  content: 'From';
+      //  color:var(--dark-gray);
+      //}
+      input{
+        position: relative;
+        //margin: 0 5px;
+      }
+    }
+
+    .mat-date-range-input-start-wrapper, .mat-date-range-input-end-wrapper{
+      overflow: visible;
+    }
+
+    //.mat-date-range-input-end-wrapper{
+    //  display: flex;
+    //  //&:before{
+    //  //  content: 'To';
+    //  //  color:var(--dark-gray);
+    //  //}
+    //  input{
+    //    position: relative;
+    //    margin: 0 5px;
+    //  }
+    //}
+    .mat-date-range-input-mirror{
+      display: none !important;
+    }
+
+    .mat-form-field-label-wrapper{
+      display: none !important;
+    }
+  }
+
+  &.mat-form-field-type-mat-select {
+    --input-bg: var(--select-bg);
+    --input-border: var(--select-bg);
+    --placeholder-fc: var(--dark-gray);
+    .mat-select {
+
+      .mat-select-trigger {
+        display: flex;
+        align-items: center;
+        gap: var(--select-gap);
+
+        .mat-select-value {
+          display: flex;
+          max-width: 100%;
+          flex-grow: 1;
+          line-height: var(--input-height);
+          .mat-select-placeholder, .mat-select-value-text{
+            font-weight: var(--input-fw);
+          }
+        }
+
+        .mat-select-arrow-wrapper {
+          display: flex;
+          align-items: center;
+
+          .mat-select-arrow {
+            width: 10px;
+            height: 10px;
+            border: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            @extend .arrow-down;
+
+            &:before {
+              content: "\ea2c";
+              color: var(--black);
+              font-family: var(--font-icon);
+
+              //content: '';
+              ////font-family: var(--font-icon);
+              //font-size: 1rem;
+              //color: var(--black);
+              //transform: rotate(45deg);
+              //padding: 4px;
+              //border-width: 0 2px 2px 0 !important;
+              //border-color: var(--black);
+              //margin-top: -4px;
+              //border-style: solid;
+            }
+          }
+        }
+      }
+      .mat-form-field-underline{
+        display: none;
+      }
+    }
+  }
+
+  &.gray-input {
+    --input-bg: var(--input-bg-gray);
+    --input-border: var(--input-bg-gray);
+    --placeholder-fc: var(--dark-gray);
+  }
+
+
+  &.custom-textarea {
+    &.h-95{
+      --input-height: 95px;
+    }
+    .mat-form-field-flex {
+
+      --input-height: 175px;
+      padding: var(--input-padding);
+
+      .mat-form-field-infix {
+        .mat-form-content {
+          textarea {
+            height: 100%;
+            resize: none;
+          }
+        }
+
+        .mat-form-field-label-wrapper {
+          .mat-form-field-label {
+            display: block !important;
+          }
+        }
+      }
+
+    }
+  }
+
+
+
+  .mat-input-element {
+    caret-color: var(--black)!important;
+  }
+
+  &.chips-autocomplete{
+    --input-min-height: var(--input-height);
+
+    .mat-form-field-flex{
+      height: auto;
+      min-height: var(--input-min-height);
+      padding: 0.3rem var(--input-padding);
+    }
+
+  }
+
+  &.h-auto{
+    --input-height: auto;
+  }
+
+  &.h-51{
+    --input-height: 51px;
+  }
+
+  &.h-40{
+    --input-height: 40px;
+  }
+
+  &.h-36{
+    --input-height: 36px;
+  }
+
+  &.no-padding{
+    min-width: var(--input-width, 100px);
+    .mat-form-field-wrapper{
+      padding-bottom: 0;
+    }
+  }
+
+  &.no-label {
+    .mat-form-field-label-wrapper {
+      display: none !important;
+    }
+  }
+
+  &.select-form-field {
+    --input-bg: var(--white);
+    --input-border: var(--white);
+    --placeholder-fc: var(--black);
+    --input-width: 110px;
+    --input-fs: 0.75rem;
+    --placeholder-fs: 0.75rem;
+
+    --label-fs: 0.75rem;
+    --label-fw: var(--font-regular);
+    --input-height: var(--default-size-sm);
+    --input-padding: .5rem;
+    font-size: .8rem;
+
+    box-shadow: var(--box-shadow);
+  }
+
+  &.select-datepicker{
+    --input-width: 125px;
+  }
+
+
+
+  &.mat-form-field-should-float{
+    --input-fw: var(--font-medium);
+    &:not(.select-form-field){
+      --input-border: var(--input-border-active);
+      --input-fc: var(--input-fc-active);
+    }
+  }
+
+  &.mat-focused.mat-form-field-should-float:not(.select-form-field){
+    --input-border: var(--input-border-focuse);
+    --input-fc: var(--input-fc-focuse);
+  }
+
+  &.mat-form-field-disabled , &.input-disabled {
+    &.mat-focused, &.bordered-input{
+      --input-border: var(--input-border-disabled);
+      --input-bg: var(--input-bg-gray);
+      --placeholder-fc: var(--input-fc-disabled);
+      --input-fc: var(--input-fc-disabled);
+      --input-fw: var(--font-medium);
+      --placeholder-fw: var(--font-medium);
+    }
+  }
+
+  &.mat-form-field-disabled , &.input-disabled {
+      --input-border: var(--input-border-disabled);
+      --input-bg: var(--input-bg-gray);
+      --placeholder-fc: var(--input-fc-disabled);
+      --input-fc: var(--input-fc-disabled);
+      --input-fw: var(--font-medium);
+      --placeholder-fw: var(--font-medium);
+  }
+
+  &.mat-primary.mat-form-field-invalid{
+    --placeholder-fc: var(--dark-gray);
+    --input-fc: var(--input-border-invalid);
+    --input-border: var(--input-border-invalid);
+  }
+}
+
+
+
+.e-control.e-datepicker{
+  .e-control-wrapper{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 0 0 .7rem !important;
+    padding: 0 !important;
+    background-color: var(--select-bg);
+    background-image: none !important;
+    height: var(--input-height);
+    border: 1px solid var(--select-bg) !important;
+    border-radius: var(--input-radius) !important;
+    transition: border-color, color .2s linear;
+    &:before, &:after{
+      display: none !important;
+    }
+    &.e-input-focus, &.e-valid-input{
+      //border-color: var(--black) !important;
+    }
+
+
+    &.e-disabled{
+      //background-color: var(--off-white) !important;
+      //border-color: var(--off-white) !important;
+      color: var(--input-fc-disabled);
+      -webkit-text-fill-color: var(--input-fc-disabled);
+      .e-date-icon{
+        &::before{
+          color: var(--input-fc-disabled);
+        }
+      }
+    }
+
+    .e-float-line{
+      display: none;
+    }
+
+    .e-float-text, input.e-lib{
+      padding: 0 var(--input-padding) !important;
+      font-weight: var(--font-medium) !important;
+      color: var(--input-fc-active);
+      font-size: var(--input-fs) !important;
+      line-height: 1.2 !important;
+    }
+
+
+    input.e-lib{
+      color: var(--input-fc)!important;
+      //margin-top: 14px;
+      -moz-appearance: textfield;
+      &::placeholder{
+        color: var(--dark-gray) !important;
+        font-weight: var(--font-regular);
+      }
+      &[disabled="disabled"]{
+        color: var(--input-fc-disabled) !important;
+        -webkit-text-fill-color: var(--input-fc-disabled);
+        &::placeholder{
+          color: var(--input-fc-disabled)!important;
+          font-weight: var(--font-regular);
+        }
+      }
+    }
+
+    .e-float-text{
+      color:var(--dark-gray) !important;
+      pointer-events: auto !important;
+      position: absolute !important;
+      transform: none !important;
+      top: auto !important;
+      transition: all .2s linear;
+
+      &.e-label-top{
+        font-size: 0.75rem !important;
+        top: 10px !important;
+      }
+    }
+
+    .e-date-icon{
+      padding: 0 var(--input-padding);
+      margin: 0;
+      &::before{
+        content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4IDE1Ljc1QzE4IDE2Ljk5MjcgMTYuOTkyNyAxOCAxNS43NSAxOEgwVjMuNzVDMCAyLjUwNzI1IDEuMDA3MjUgMS41IDIuMjUgMS41SDQuNVYwSDZWMS41SDEyVjBIMTMuNVYxLjVIMTUuNzVDMTYuOTkyNyAxLjUgMTggMi41MDcyNSAxOCAzLjc1VjE1Ljc1Wk0xNi41IDcuNUgxLjVWMTYuNUgxNS43NUMxNi4xNjQgMTYuNSAxNi41IDE2LjE2NCAxNi41IDE1Ljc1VjcuNVpNOS43NSAxMy41VjE1SDguMjVWMTMuNUg5Ljc1Wk0xMy41IDEzLjVWMTVIMTJWMTMuNUgxMy41Wk02IDEzLjVWMTVINC41VjEzLjVINlpNOS43NSA5LjM3NVYxMC44NzVIOC4yNVY5LjM3NUg5Ljc1Wk0xMy41IDkuMzc1VjEwLjg3NUgxMlY5LjM3NUgxMy41Wk02IDkuMzc1VjEwLjg3NUg0LjVWOS4zNzVINlpNNC41IDNIMi4yNUMxLjgzNiAzIDEuNSAzLjMzNiAxLjUgMy43NVY2SDE2LjVWMy43NUMxNi41IDMuMzM2IDE2LjE2NCAzIDE1Ljc1IDNIMTMuNVY0Ljg3NUgxMlYzSDZWNC44NzVINC41VjNWM1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=) !important;
+        //font-family: var(--font-icon) !important;
+        font-size: 1rem !important;
+        color:var(--black) !important;
+        cursor: pointer;
+      }
+      &::after{
+        display: none;
+      }
+    }
+  }
+}
+
+
+
+
+
+
+//form-label
+.form-label{
+  font-size: 0.875rem;
+  color: var(--black);
+  font-weight: var(--font-medium);
+  display: block;
+}
+
+.optional-input{
+  font-size: .875rem;
+  color: var(--dark-gray);
+  font-weight: var(--font-light);
+  font-style: italic;
+}
+
+
+
+