| /* |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| @import '../../../public/stylesheets/variables'; |
| |
| .theme--ignite { |
| [ignite-icon='info'], .tipLabel { |
| color: $ignite-brand-success; |
| } |
| |
| .ignite-form-field { |
| width: 100%; |
| |
| &.radio--ignite { |
| width: auto; |
| |
| } |
| |
| &.ignite-form-field-dropdown { |
| .ignite-form-field__control button { |
| display: inline-block; |
| overflow: hidden !important; |
| text-overflow: ellipsis; |
| } |
| } |
| |
| [ignite-icon='info'], .tipLabel { |
| margin-left: 4px; |
| flex: 0 0 auto; |
| } |
| |
| |
| label.required { |
| content: '*'; |
| margin-left: 0.25em; |
| } |
| |
| .ignite-form-field__control { |
| width: 100%; |
| |
| .input-tip { |
| display: flex; |
| overflow: visible; |
| |
| & > input, |
| & > button { |
| overflow: visible; |
| |
| box-sizing: border-box; |
| width: 100%; |
| max-width: initial; |
| height: 36px; |
| padding: 0 10px; |
| margin-right: 0; |
| |
| border: solid 1px #c5c5c5; |
| border-radius: 4px; |
| background-color: #ffffff; |
| box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2); |
| |
| color: $text-color; |
| line-height: 36px; |
| |
| &.ng-invalid:not(.ng-pristine), |
| &.ng-invalid.ng-touched { |
| border-color: $ignite-brand-primary; |
| box-shadow: inset 0 1px 3px 0 rgba($ignite-brand-primary, .5); |
| } |
| |
| &:focus { |
| border-color: $ignite-brand-success; |
| box-shadow: inset 0 1px 3px 0 rgba($ignite-brand-success, .5); |
| } |
| |
| &:disabled { |
| opacity: .5; |
| } |
| |
| |
| &:focus { |
| border-color: $ignite-brand-success; |
| box-shadow: inset 0 1px 3px 0 rgba($ignite-brand-success, .5); |
| } |
| |
| &:disabled { |
| opacity: .5; |
| } |
| } |
| |
| & > input[type='number'] { |
| text-align: left; |
| } |
| } |
| |
| .tipField { |
| line-height: 36px; |
| } |
| } |
| } |
| .ignite-form-field__label { |
| float: left; |
| width: 100%; |
| margin: 0 0 2px; |
| padding: 0 10px; |
| height: 16px; |
| display: inline-flex; |
| align-items: center; |
| |
| color: $gray-light; |
| font-size: 12px; |
| line-height: 12px; |
| |
| &-disabled { |
| opacity: 0.5; |
| } |
| } |
| .ignite-form-field__errors { |
| color: $ignite-brand-primary; |
| padding: 5px 10px 0; |
| line-height: 14px; |
| font-size: 12px; |
| clear: both; |
| |
| &:empty { |
| display: none; |
| } |
| |
| [ng-message] + [ng-message] { |
| margin-top: 10px; |
| } |
| } |
| @keyframes error-pulse { |
| from { |
| color: $ignite-brand-primary; |
| } |
| 50% { |
| color: transparent; |
| } |
| to { |
| color: $ignite-brand-primary; |
| } |
| } |
| .ignite-form-field__error-blink { |
| .ignite-form-field__errors { |
| animation-name: error-pulse; |
| animation-iteration-count: 2; |
| animation-duration: 500ms; |
| } |
| } |
| |
| .ignite-form-field.form-field-checkbox { |
| input[disabled] ~ * { |
| opacity: 0.5; |
| } |
| } |
| } |
| |
| .form-field { |
| position: relative; |
| width: 100%; |
| |
| &__label { |
| display: flex; |
| margin: 0 0 4px; |
| |
| color: #424242; |
| font-size: 14px; |
| line-height: 1.25; |
| |
| .icon-help { |
| line-height: 14px; |
| } |
| |
| &.required:after { |
| content: ''; |
| } |
| |
| i { |
| font-style: normal; |
| color: $gray-light; |
| } |
| |
| svg { |
| flex: 0 0 auto; |
| margin-left: 4px; |
| } |
| |
| [ignite-icon='info'] { |
| position: relative; |
| top: 1px; |
| |
| color: $ignite-brand-success; |
| } |
| } |
| |
| &__control { |
| overflow: visible; |
| display: flex; |
| flex-direction: row; |
| width: 100%; |
| |
| & > input::placeholder, |
| & > button.select-toggle.placeholder { |
| color: rgba(66, 66, 66, 0.5); |
| text-align: left; |
| } |
| |
| & > input, |
| & > button:not(.btn-ignite) { |
| outline: none; |
| overflow: visible; |
| |
| box-sizing: border-box; |
| width: 100%; |
| max-width: initial; |
| min-width: 0; |
| height: 36px; |
| padding: 9px 10px; |
| margin-right: 0; |
| |
| border: solid 1px #c5c5c5; |
| border-radius: 4px; |
| background-color: #ffffff; |
| box-shadow: none; |
| |
| color: $text-color; |
| font-size: 14px; |
| text-align: left; |
| line-height: 16px; |
| |
| &.ng-invalid:not(.ng-pristine), |
| &.ng-invalid.ng-touched { |
| border-color: #c5c5c5; |
| box-shadow: none; |
| } |
| |
| &.ng-invalid:focus, |
| &:focus { |
| border-color: $ignite-brand-success; |
| box-shadow: none; |
| } |
| } |
| |
| &--postfix::after { |
| content: attr(data-postfix); |
| display: inline-flex; |
| align-self: center; |
| margin-left: 10px; |
| } |
| |
| // Added right offset to appearance of input for invalid password |
| & > input[type='email'].ng-invalid.ng-touched, |
| & > input[type='text'].ng-invalid.ng-touched, |
| & > input[type='password'].ng-invalid.ng-touched { |
| padding-right: 36px; |
| } |
| |
| // Added right offset to appearance of dropdown for invalid data |
| & > button.select-toggle.ng-invalid.ng-touched { |
| &:after { |
| right: 36px; |
| } |
| } |
| } |
| |
| &__control-group { |
| input { |
| min-width: 0; |
| margin-right: -1px; |
| |
| border-top-right-radius: 0 !important; |
| border-bottom-right-radius: 0 !important; |
| |
| &:focus { |
| z-index: 1; |
| } |
| } |
| |
| input + * { |
| border-top-left-radius: 0 !important; |
| border-bottom-left-radius: 0 !important; |
| flex: 0 0 auto; |
| width: 60px !important; |
| } |
| } |
| |
| &__errors { |
| position: absolute; |
| right: 0; |
| bottom: 0; |
| |
| display: flex; |
| |
| [ng-message] { |
| // TODO: remove after replace all fields to new |
| overflow: visible !important; |
| animation: none !important; |
| } |
| } |
| |
| &__control--postfix + &__errors::after { |
| content: attr(data-postfix); |
| margin-left: 10px; |
| visibility: hidden; |
| } |
| |
| &__error { |
| z-index: 2; |
| position: relative; |
| width: 0; |
| height: 36px; |
| float: right; |
| |
| color: $brand-primary; |
| line-height: $input-height; |
| pointer-events: initial; |
| text-align: center; |
| |
| &:before { |
| position: absolute; |
| right: 0; |
| width: 38px; |
| } |
| |
| div:first-child { |
| display: none; |
| } |
| |
| [bs-tooltip] { |
| z-index: 1; |
| position: absolute; |
| top: 0; |
| right: 0; |
| width: 36px; |
| height: 36px; |
| } |
| |
| [ignite-icon] { |
| position: absolute; |
| top: 10px; |
| right: 0; |
| width: 38px; |
| } |
| } |
| |
| [disabled] { |
| opacity: .5; |
| } |
| } |
| |
| .theme--ignite-errors-horizontal { |
| .form-field__control { |
| // Reset offset to appearance of input for invalid password |
| & > input[type='email'].ng-invalid.ng-touched, |
| & > input[type='text'].ng-invalid.ng-touched, |
| & > input[type='password'].ng-invalid.ng-touched { |
| padding-right: 0; |
| } |
| // Reset offset to appearance of dropdown for invalid data |
| & > button.select-toggle.ng-invalid.ng-touched { |
| &:after { |
| right: 10px; |
| } |
| } |
| } |
| |
| .form-field__errors { |
| position: relative; |
| |
| padding: 5px 10px 0px; |
| |
| color: $ignite-brand-primary; |
| font-size: 12px; |
| line-height: 14px; |
| |
| &:empty { |
| display: none; |
| } |
| |
| [ng-message] + [ng-message] { |
| margin-top: 10px; |
| } |
| } |
| |
| .form-field__error { |
| float: none; |
| width: auto; |
| height: auto; |
| position: static; |
| |
| text-align: left; |
| line-height: 14px; |
| |
| div:first-child { |
| display: block; |
| } |
| |
| [bs-tooltip], |
| [ignite-icon] { |
| display: none; |
| } |
| } |
| |
| .form-field__error + .form-field__error { |
| margin-top: 10px; |
| } |
| |
| .form-field__checkbox { |
| flex-wrap: wrap; |
| |
| .form-field__errors { |
| margin-left: -10px; |
| flex-basis: 100%; |
| |
| .form-field__error { |
| width: auto; |
| |
| div { |
| width: auto; |
| } |
| } |
| } |
| } |
| } |
| |
| .form-field__radio, |
| .form-field__checkbox { |
| $errorSize: 16px; |
| display: inline-flex; |
| width: auto; |
| |
| сursor: pointer; |
| |
| .form-field { |
| &__label { |
| order: 1; |
| margin: 0; |
| cursor: pointer; |
| } |
| |
| &__control { |
| width: auto; |
| margin-right: 10px; |
| padding: 3px 0; |
| flex: 0 0 auto; |
| |
| input { |
| width: auto; |
| height: auto; |
| margin: 0; |
| border-radius: 0; |
| } |
| } |
| |
| &__errors { |
| position: static; |
| right: initial; |
| bottom: initial; |
| order: 3; |
| margin-left: 5px; |
| |
| .form-field__error { |
| width: $errorSize; |
| height: $errorSize; |
| |
| div { |
| // Required to correctly position error popover |
| top: -10px; |
| height: 36px; |
| |
| width: $errorSize; |
| } |
| |
| [ignite-icon] { |
| width: $errorSize; |
| top: 0; |
| } |
| } |
| } |
| } |
| } |
| |
| .form-field__radio { |
| .form-field__control { |
| padding: 2px 0; |
| } |
| |
| .form-field__control > input[type='radio'] { |
| -webkit-appearance: none; |
| |
| width: 13px; |
| height: 13px; |
| padding: 0; |
| |
| background: white; |
| border: none; |
| border-radius: 50%; |
| box-shadow: inset 0 0 0 1px rgb(197, 197, 197); |
| |
| &:focus { |
| outline: none; |
| border: none; |
| box-shadow: 0 0 0 2px rgba(0, 103, 185, .3), |
| inset 0 0 0 1px rgb(197, 197, 197); |
| } |
| |
| &:checked { |
| border: none; |
| box-shadow: inset 0 0 0 5px rgba(0, 103, 185, 1); |
| |
| &:focus { |
| box-shadow: 0 0 0 2px rgba(0, 103, 185, .3), |
| inset 0 0 0 5px rgba(0, 103, 185, 1); |
| } |
| } |
| } |
| } |
| |
| .form-field__checkbox { |
| .form-field__control > input[type='checkbox'] { |
| border-radius: 2px; |
| |
| background-image: url(/images/checkbox.svg); |
| width: 12px !important; |
| height: 12px !important; |
| -webkit-appearance: none; |
| -moz-appearance: none; |
| appearance: none; |
| background-repeat: no-repeat; |
| background-size: 100%; |
| padding: 0; |
| border: none; |
| |
| &:checked { |
| background-image: url(/images/checkbox-active.svg); |
| } |
| |
| &:disabled { |
| opacity: 0.5; |
| } |
| |
| &:focus { |
| outline: none; |
| box-shadow: 0 0 0 2px rgba(0, 103, 185, .3); |
| } |
| } |
| } |
| |
| .form-field--inline { |
| display: inline-block; |
| width: auto; |
| |
| .form-field { |
| display: flex; |
| align-items: baseline; |
| } |
| |
| .form-field__label { |
| white-space: nowrap; |
| } |
| |
| form-field-size, |
| .form-field__text { |
| .form-field__control { |
| margin-left: 10px; |
| } |
| } |
| |
| .form-field__dropdown, |
| .form-field__datepicker, |
| .form-field__timepicker { |
| .form-field__control { |
| width: auto; |
| |
| input, |
| button { |
| color: transparent; |
| |
| text-shadow: 0 0 0 $ignite-brand-success; |
| |
| border: none; |
| box-shadow: none; |
| |
| background: linear-gradient(to right, rgb(0, 103, 185), transparent) 0px 25px / 0px, |
| linear-gradient(to right, rgb(0, 103, 185) 70%, transparent 0%) 0% 0% / 8px 1px repeat-x, |
| 0% 0% / 0px, 0% 0% / 4px; |
| background-size: 0, 8px 1px, 0, 0; |
| background-position: 1px 25px; |
| |
| padding-left: 0px; |
| padding-right: 0px; |
| margin-left: 10px; |
| margin-right: 10px; |
| |
| &:hover, &:focus { |
| text-shadow: 0 0 0 change-color($ignite-brand-success, $lightness: 26%); |
| } |
| } |
| } |
| } |
| |
| .form-field__dropdown { |
| button::after { |
| display: none; |
| } |
| } |
| } |
| |
| .form-field__password { |
| // Validation error notification will overlap with visibility button if it's not moved more to the left |
| input[type='password'].ng-invalid.ng-touched, |
| input[type='password'].ng-invalid.ng-touched + input { |
| padding-right: 62px; |
| } |
| |
| // Extra space for visibility button |
| input { |
| padding-right: 36px; |
| } |
| |
| // Distance between error notification and visibility button |
| .form-field__errors { |
| right: 26px; |
| } |
| |
| password-visibility-toggle-button { |
| position: absolute; |
| right: 0; |
| height: 36px; |
| } |
| } |
| |
| .form-field__dropdown { |
| .form-field__control { |
| > button:not(.btn-ignite) { |
| padding-top: 10px; |
| } |
| } |
| } |
| |
| .form-field__ace { |
| .ace_editor { |
| width: 100%; |
| min-height: 70px; |
| margin: 0; |
| |
| border: solid 1px #c5c5c5; |
| border-radius: 4px; |
| background-color: #ffffff; |
| box-shadow: none; |
| |
| .ace_content { |
| padding-left: 2px; |
| } |
| |
| &.ace_focus { |
| border-color: $ignite-brand-success; |
| box-shadow: none; |
| } |
| } |
| } |
| |
| .form-field.ignite-form-field label.required { |
| margin-left: 0 !important; |
| } |
| |
| .form-fieldset { |
| padding: 10px; |
| |
| border: 1px solid hsla(0, 0%, 77%, .5); |
| border-radius: 4px; |
| |
| legend { |
| width: auto; |
| margin: 0 -5px; |
| padding: 0 5px; |
| |
| border: 0; |
| |
| color: #393939; |
| font-size: 14px; |
| line-height: 1.42857; |
| } |
| |
| legend + * { |
| margin-top: 0 !important; |
| } |
| |
| & > *:last-child { |
| margin-bottom: 0 !important; |
| } |
| } |
