@lancom/shared 0.0.62 → 0.0.66

package/assets/scss/ui_kit/_forms.scss

@@ -0,0 +1,625 @@
+@import "@/assets/scss/variables";
+@import "typography";
+$field-side-offset: 56px;
+$bp-extra-small-field-side-offset: 44px;
+$icon-width: 24px;
+$icon-margin: .2em;
+$icon-offset: calc(#{($field-side-offset - $icon-width) / 2)} - #{$icon-margin});
+$bp-extra-small-icon-offset: calc(#{($bp-extra-small-field-side-offset - $icon-width) / 2)} - #{$icon-margin});
+
+.form-row {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.form-row + .form-row,
+.form-actions + .form-row {
+  padding-top: 8px;
+  &.low-dense {
+    padding-top: 30px;
+  }
+}
+
+.form-row--cols {
+  @extend .form-row;
+  display: flex;
+}
+
+html[dir=ltr] {
+  .form-row--cols {
+    .form-col + .form-col {
+      margin-left: 26px;
+    }
+  }
+}
+
+html[dir=rtl] {
+  .form-row--cols {
+    .form-col + .form-col {
+      margin-right: 2px;
+    }
+  }
+}
+
+.form-col {
+  flex-grow: 1;
+  position: relative;
+
+  &.col-half {
+    flex-basis: 50%;
+  }
+
+  &.col-1 {
+    flex-basis: calc(100% / 3);
+  }
+
+  &.col-2 {
+    flex-basis: calc(2 * (100% / 3) - 8px);
+  }
+}
+
+.form-value {
+  font-size: 15px;
+  color: #292929;
+}
+
+.form-label {
+  color: $black;
+  transition: color .2s ease-in-out, font-weight .2s ease-in-out;
+  &:not(.label-inner) {
+    @extend .lc_medium18;
+    margin-bottom: 16px;
+    display: inline-block;
+  }
+}
+
+.form-label.label-inner {
+  font-style: normal;
+  font-size: 16px;
+  line-height: 170%;
+  color: $grey_2;
+  position: absolute;
+  top: 13px;
+  line-height: 27px;
+  transition: top .22s;
+  cursor: text;
+  transition: color .22s ease-in-out;
+}
+
+.form-row + .form-row .label-inner,
+.form-actions + .form-row .label-inner {
+  top: 21px;
+}
+
+.form-field:focus + .form-label.label-inner,
+.form-field.filled + .form-label.label-inner,
+.form-label.label-inner.label-top,
+.multiselect--active + .form-field + .form-label.label-inner,
+.form-label.label-inner.field-filled {
+  top: 6px;
+  font-size: 12px;
+  line-height: 130%;
+}
+.form-field:focus + .form-label.label-inner {
+  color: $grey_1;
+}
+
+.form-row + .form-row .form-field:focus + .form-label.label-inner,
+.form-row + .form-row .form-field.filled + .form-label.label-inner,
+.form-actions + .form-row .form-field.filled + .form-label.label-inner,
+.form-actions + .form-row .form-field:focus + .form-label.label-inner,
+.form-row + .form-row .form-label.label-inner.label-top,
+.form-actions + .form-row .form-label.label-inner.label-top,
+.form-row + .form-row .multiselect--active + .form-field + .form-label.label-inner,
+.form-row + .form-row .form-label.label-inner.field-filled {
+  top: 14px;
+}
+
+.form-row + .form-row--cols .label-inner,
+.form-row--cols + .form-row--cols .label-inner {
+  top: 17px;
+}
+
+.form-row + .form-row--cols .form-field:focus + .form-label.label-inner,
+.form-row + .form-row--cols .form-field.filled + .form-label.label-inner,
+.form-row--cols + .form-row--cols .form-field:focus + .form-label.label-inner,
+.form-row--cols + .form-row--cols .form-field.filled + .form-label.label-inner {
+  top: 0;
+}
+
+html[dir=ltr] .form-label.label-inner {
+  left: 20px;
+}
+html[dir=rtl] .form-label.label-inner {
+  right: 20px;
+}
+.form-icon {
+  &-left, &-right {
+    font-size: 24px;
+    color: rgba(0, 0, 0, 0.54);
+    position: absolute;
+    top: 28px;
+    transform: translateY(-50%);
+  }
+}
+html[dir=ltr] .form-icon-left,
+html[dir=rtl] .form-icon-right {
+  left: $icon-offset;
+  @media (max-width: $bp-extra-small-max) {
+    left: $bp-extra-small-icon-offset;
+  }
+}
+html[dir=ltr] .form-icon-right,
+html[dir=rtl] .form-icon-left {
+  right: $icon-offset;
+  @media (max-width: $bp-extra-small-max) {
+    right: $bp-extra-small-icon-offset;
+  }
+}
+
+.form-row + .form-row .form-icon {
+  &-left, &-right {
+    top: 48px;
+  }
+}
+.form-row + .form-row--cols .form-icon {
+  &-left, &-right {
+    top: 64px;
+  }
+}
+
+.form-field {
+  display: block;
+  width: 100%;
+  height: 50px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #EFF1F2;
+  border-radius: 5px;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 27px;
+  color: $black;
+  mix-blend-mode: normal;
+  -webkit-font-smoothing: antialiased;
+  background-color: #FFFFFF;
+  text-align: left;
+  outline: none;
+
+  &.is-danger {
+    border-color: $error;
+  }
+
+  &.icon-inside {
+    &-l, &-r, &-lr {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &::placeholder {
+    @extend .lc_subtitle1;
+    color: transparent !important;
+    transition: color .2s ease-in-out;
+  }
+  &.tiny-placeholder::placeholder {
+    font-size: 15px;
+    color: #6D859E;
+  }
+
+  &:focus::placeholder,
+  &.no-label::placeholder {
+   color: rgba(0, 0, 0, 0.3) !important; // 0.38 alpha * 0.8 opacity
+  }
+  // &:read-only {
+  //   background-color: rgba(224, 224, 224, 1);
+  //   color: rgba(0, 0, 0, 0.38);
+  //   border-bottom: none;
+  // }
+  &:disabled {
+    background-color: $grey_4;
+  }
+}
+.form-field:read-only + .form-label,
+.form-field:read-only.filled + .form-label {
+  color: rgba(0, 0, 0, 0.38);
+}
+.form-field.is-danger + .form-label,
+.form-field.is-danger:focus + .form-label,
+.form-label.is-danger {
+  color: $error;
+}
+html[dir=ltr] .form-field {
+  padding: 19px 3px 4px 20px;
+  text-align: left;
+  &.icon-inside-l { padding-left: $field-side-offset; }
+  &.icon-inside-r { padding-right: $field-side-offset; }
+  &.icon-inside-lr { padding-left: $field-side-offset; padding-right: $field-side-offset; }
+  &.icon-inside-l + .form-label,
+  &.icon-inside-lr + .form-label { left: $field-side-offset; }
+  &.centered {
+    text-align: center;
+  }
+  @media (max-width: $bp-extra-small-max) {
+    &.icon-inside-l { padding-left: $bp-extra-small-field-side-offset; }
+    &.icon-inside-r { padding-right: $bp-extra-small-field-side-offset; }
+    &.icon-inside-lr { padding-left: $bp-extra-small-field-side-offset; padding-right: $bp-extra-small-field-side-offset; }
+    &.icon-inside-l + .form-label,
+    &.icon-inside-lr + .form-label { left: $bp-extra-small-field-side-offset; }
+  }
+}
+html[dir=rtl] .form-field {
+  padding: 19px 20px 4px 3px;
+  text-align: right;
+  &.icon-inside-l { padding-right: $field-side-offset; }
+  &.icon-inside-r { padding-left: $field-side-offset; }
+  &.icon-inside-lr { padding-left: $field-side-offset; padding-right: $field-side-offset; }
+  &.icon-inside-l + .form-label,
+  &.icon-inside-lr + .form-label { right: $field-side-offset; }
+  &.centered {
+    text-align: center;
+  }
+  @media (max-width: $bp-extra-small-max) {
+    &.icon-inside-l { padding-right: $bp-extra-small-field-side-offset; }
+    &.icon-inside-r { padding-left: $bp-extra-small-field-side-offset; }
+    &.icon-inside-lr { padding-left: $bp-extra-small-field-side-offset; padding-right: $bp-extra-small-field-side-offset; }
+    &.icon-inside-l + .form-label,
+    &.icon-inside-lr + .form-label { right: $bp-extra-small-field-side-offset; }
+  }
+}
+html[dir=ltr] .form-field,
+html[dir=rtl] .form-field {
+  &.labelless {
+    padding-top: 12px;
+    padding-bottom: 13px;
+  }
+}
+
+.form-help {
+  display: block;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.4px;
+  margin-top: 4px;
+  transition: opacity .4s ease;
+
+  &.is-danger {
+    color: $error;
+  }
+}
+
+.form-actions + .form-help {
+  margin-top: 6px;
+}
+
+.form-hidden-validator {
+  display: none;
+}
+
+.form-textarea {
+  @extend .form-field;
+  height: 126px;
+  resize: none;
+  &--size2,
+  &--size3 {
+    @extend .form-textarea;
+  }
+  &.bordered {
+    border-width: 1px;
+    border-radius: 0;
+    box-shadow: $elevation0;
+    &:focus {
+      box-shadow: $elevation1;
+    }
+  }
+  @for $i from 2 through 3 {
+    &--size#{$i} {
+      height: calc((#{$i} * 50px) + (#{$i - 1} * 8px)); // n field heights - offsets between them
+    }
+  }
+}
+
+.form-textarea + .form-label {
+  // background-color: #FFF;
+}
+
+.form-actions {
+  margin-top: 19px;
+  display: flex;
+  &.no-gutter {
+    margin-top: 0;
+  }
+  &.full [class*=btn-] { width: 100%; }
+  &.center { justify-content: center; }
+  &.space-between { justify-content: space-between; }
+  &.space-around { justify-content: space-around; }
+  &.pull-right { justify-content: flex-end; }
+  &.pull-left { justify-content: flex-start; }
+  &.pull-down { align-items: flex-end; }
+  &.pull-top { align-items: flex-start; }
+}
+
+.textarea {
+  resize: none;
+  display: block;
+  width: 100%;
+  height: 68px;
+  padding: 3px 3px 3px 10px;
+  border: 1px solid #B4C0CB;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
+  border-radius: 8px;
+  font-size: 15px;
+  color: #253540;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+  background-color: #FFFFFF;
+  text-align: left;
+  outline: none;
+}
+html[dir=ltr] .textarea {
+  padding: 3px 3px 3px 10px;
+}
+html[dir=rtl] .textarea {
+  padding: 3px 10px 3px 3px;
+}
+
+.form-link {
+  color: #FFFFFF;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.form-col .label-inner,
+.form-col .label-inner {
+  top: 13px;
+}
+
+.form-col .form-field:focus + .form-label.label-inner,
+.form-col .form-field.filled + .form-label.label-inner {
+  top: 6px;
+}
+.form-radio-group {
+  display: flex;
+  flex-direction: column;
+  &.form-row {
+    padding-top: 14px;
+  }
+  &.horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+.multiselect {
+  min-height: 50px;
+  &--active + .form-field + .form-label {
+    z-index: 1002;
+  }
+  &__content-wrapper {
+    border-radius: 8px !important;
+    box-shadow: $elevation1;
+    border: none;
+    margin: 0;
+    padding: 5px 0;
+  }
+  &.limited-height &__content-wrapper {
+    max-height: 120px !important;
+  }
+  &-caret {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $link;
+    font-size: 24px;
+  }
+  &--active {
+    z-index: 1002;
+  }
+  &__tags {
+    min-height: 50px;
+    border: 1px solid #e5e5e5;
+    border-radius: 8px !important;
+    padding: 19px 3px 4px 20px;
+  }
+  &.labelless &__tags {
+    padding-top: 12px;
+    padding-bottom: 13px;
+  }
+  &--active &__tags {
+    border-bottom-width: 2px;
+    border-bottom-color: #DAC1B5;
+  }
+  &__single,
+  &__input {
+    margin-bottom: 0;
+    padding-left: 0;
+    height: 24px;
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 27px;
+    color: $gray;
+    mix-blend-mode: normal;
+    -webkit-font-smoothing: antialiased;
+    text-align: left;
+    outline: none;
+  }
+  &__single {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+  &__input::placeholder {
+    font-size: 15px;
+    color: #6D859E;
+  }
+  &__select {
+    height: 100%;
+    z-index: 1;
+  }
+  &__option {
+    padding: 8px 3px 8px 16px;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 27px;
+    color: $gray;
+    min-height: 32px;
+  }
+  &__option--highlight {
+    background-color: $light_gray;
+  }
+  &__option--selected:after,
+  &__option--highlight:after {
+    content: none !important;
+  }
+  &__option--selected {
+    // pointer-events: none;
+  }
+  &.is-danger &__tags {
+    border-color: $error;
+  }
+  &.field-label-less &__tags {
+    padding: 12px 40px 11px 16px;
+  }
+  &--disabled + .form-field + .form-label {
+    pointer-events: none;
+  }
+  &--disabled &__select,
+  &--disabled &__tags {
+    background-color: inherit;
+  }
+}
+.multiselect__option--selected.multiselect__option--highlight {
+  background: #f3f3f3 !important;
+  color: #35495e !important;
+  &:after {
+    background: $error;
+    content: '\00D7';
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 12px;
+    padding: 0 4px;
+    line-height: 14px;
+  }
+}
+html[dir=ltr] {
+  .multiselect {
+    &__option {
+      padding-left: 20px;
+    }
+    & + .form-hidden-validator + .form-label.label-inner {
+      left: 20px;
+    }
+    &-caret {
+      left: 12px;
+    }
+  }
+}
+html[dir=rtl] {
+  .multiselect {
+    &__option {
+      padding-right: 16px;
+    }
+    & + .form-hidden-validator + .form-label.label-inner {
+      right: 16px;
+    }
+    &-caret {
+      right: 12px;
+    }
+  }
+}
+
+.form-field[type=range] {
+  height: auto;
+  padding: 0 !important;
+  border: 0;
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 10px 0;
+  display: inline-block;
+  vertical-align: middle;
+  &:focus {
+    outline: none;
+    &::-webkit-slider-runnable-track,
+    &::-ms-fill-upper {
+      background: rgba(13, 13, 13, .2);
+    }
+    &::-ms-fill-lower {
+      background-color: #e5e5e5;
+    }
+  }
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background-color: #e5e5e5;
+    border-radius: 2px;
+    border: 0 solid #010101
+  }
+  &::-webkit-slider-thumb {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .07);
+    border: 1px solid #ccc;
+    background-color: #fff;
+    height: 24px;
+    width: 24px;
+    border-radius: 25px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -10px
+  }
+  &::-moz-range-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background-color: #e5e5e5;
+    border-radius: 2px;
+    border: 0 solid #010101
+  }
+  &::-moz-range-thumb {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .07);
+    border: 1px solid #ccc;
+    background-color: #fff;
+    height: 24px;
+    width: 24px;
+    border-radius: 25px;
+    cursor: pointer
+  }
+  &::-ms-track {
+    width: 100%;
+    height: 4px;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent
+  }
+  &::-ms-fill-lower,
+  &::-ms-fill-upper {
+    background-color: #e5e5e5;
+    border: 0;
+    border-radius: 50px
+  }
+  &::-ms-thumb {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .07);
+    border: 1px solid #ccc;
+    background-color: #fff;
+    height: 24px;
+    width: 24px;
+    border-radius: 25px;
+    cursor: pointer
+  }
+}