$input-font-weight: $form-field-font-weight; $input-font-size: $form-field-font-size; $input-line-height: $form-field-line-height; $input-font-family: $form-field-font-family; .#{$prefix}form-item-no-label { .#{$prefix}form-empty-field { &::-webkit-input-placeholder, &::-moz-placeholder, &::-ms-input-placeholder { opacity: 1; } } } .#{$prefix}form-empty-field { &::-webkit-input-placeholder, &::-moz-placeholder, &::-ms-input-placeholder, &::-moz-placeholder { /* Chrome/Opera/Safari/Firefox 19+/IE 10+/Firefox 18- */ opacity: 0; } // .#{$prefix}input-el .#{$prefix}form-empty-field { &::focus { &::-webkit-input-placeholder, &::-moz-placeholder, &::-ms-input-placeholder { opacity: 1; transition: opacity .4s; } } } .#{$prefix}form-type-text, .#{$prefix}form-type-password{ .#{$prefix}form-item-label { margin-top: $form-item-label-margin; position: relative; height: $form-item-label-height; line-height: 0; } .#{$prefix}form-trigger-default { border-bottom: $form-text-default-border-bottom; } .#{$prefix}form-text-default { @include font($input-font-weight, $input-font-size, $input-line-height, $input-font-family); background-color: transparent; border: none; border-bottom: $form-text-default-border-bottom; outline: none; width: 100%; padding: $form-text-default-padding; box-shadow: none; box-sizing: content-box; @include transition-duration(0.3s); } .#{$prefix}form-file-wrap { .#{$prefix}form-trigger-wrap { .#{$prefix}form-text { height: $form-text-file-height; border: none; border-bottom: $form-text-default-border-bottom; } } } .#{$prefix}form-trigger-wrap-default { border: none; } .#{$prefix}form-trigger-wrap-invalid { .#{$prefix}form-text-default { @include transition-duration(0.7s); border-bottom: $form-trigger-wrap-invalid-border; } } .#{$prefix}form-text { .#{$prefix}webkit & { height: $webkit-form-text-height; } } .#{$prefix}form-type-text { position: relative; margin-top: $form-type-text-margin; } } .#{$prefix}colorpicker-field { input { padding-left: $form-colorpicker-field-padding-left !important; } } .#{$prefix}form-readonly, .#{$prefix}form-fieldcontainer, .#{$prefix}colorpicker-field, .#{$prefix}form-item[id*=slider], .#{$prefix}field-focus { .#{$prefix}form-item-label { @include transform(translateY(8px)); font-size: $form-item-label-font-size; } } .#{$prefix}form-type-checkbox, .#{$prefix}form-type-radio, .#{$prefix}form-checkboxgroup { .#{$prefix}form-item-label { @include transform(translateY(0px)); font-size: $form-item-label-font-size; } } .#{$prefix}form-item-label { &.#{$prefix}form-item-label-right, &.#{$prefix}form-item-label-left { @include transform(translateY(0px)); .#{$prefix}field-focus & { font-size: $form-focused-item-label-font-size; @include transform(translateY(0px)); } } } .#{$prefix}form-item-label { @include transition(all 0s ease-out 0s); @include transition-duration(0.3s); @include transform(translateY(32px)); .#{$prefix}field-focus &, .not-empty & { font-size: $form-item-label-font-size; @include transform(translateY(8px)); } .#{$prefix}field-focus & { @include transition-duration(0.3s); color: $base-color; } .#{$prefix}field-focus & { @include transition-duration(0.3s); } } .#{$prefix}field-focus { .#{$prefix}form-text-default, .#{$prefix}form-trigger-default { @include transition-duration(0.7s); border-bottom: $form-text-default-border; } } .#{$prefix}form-item-label-default { &.#{$prefix}form-item-label-top{ > .#{$prefix}form-item-label-inner { padding: $form-item-label-inner-padding; } } } .#{$prefix}form-item-label-default { padding: $form-item-label-padding; vertical-align: middle; } .#{$prefix}form-text-field-body-default { min-width: $form-text-field-body-default-min-width; max-width: none; } // wouldn't display full width with removing table-cell .#{$prefix}form-item-body { display: block; } .#{$prefix}ie11 { .#{$prefix}form-item-label-default { &.#{$prefix}form-item-label-top { display: inline; top: -5px; } } }