fleet/frontend/components/forms/fields/InputField/_styles.scss
Jacob Shandling 54bf64ada4
UI: Fix line height issue on error in registration flow via replacing InputFieldWithIcon with InputField (#8819)
* Replace InputFieldWithIcon with InputField on setup page

* same refactor on OrgDetails and FleetDetails

* Fix admin setup page spacing issue

* change file

* Remove redundant registration flow placeholders per style guide - info already in labels

* Update reg flow tests getByPlaceHolder ->  getByLabel

* update e2e tests with getByPlaceHolderText -> getByLabelText

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2022-12-16 10:32:10 -08:00

88 lines
1.6 KiB
SCSS

.input-field {
line-height: 1.5;
background-color: $ui-light-grey;
border: solid 1px $ui-fleet-blue-15;
border-radius: 4px;
font-size: $small;
padding: 7px 12px;
color: $core-fleet-blue;
font-family: "Nunito Sans", sans-serif;
box-sizing: border-box;
height: 40px;
transition: border-color 100ms;
width: 100%;
&::placeholder {
color: $ui-fleet-black-50;
}
&:focus {
outline: none;
border-color: $core-vibrant-blue;
}
&:hover {
box-shadow: none;
border: 1px solid $core-vibrant-blue;
}
&--disabled {
color: $ui-fleet-black-50;
}
&--error {
color: $core-vibrant-red;
border: 1px solid $core-vibrant-red;
box-sizing: border-box;
border-radius: 4px;
&:focus {
border-color: $ui-error;
background-color: $core-white;
color: $core-fleet-black;
}
}
&__textarea {
min-height: 100px;
max-width: 100%;
display: block;
}
&__label {
display: block;
font-size: $medium;
font-weight: $regular;
color: $core-fleet-black;
margin-bottom: $pad-xsmall;
&--error {
font-weight: $bold;
color: $ui-error;
}
}
&__wrapper {
margin-bottom: $pad-medium;
}
&__hint {
font-size: $x-small;
font-weight: $regular;
line-height: 1.57;
letter-spacing: 1px;
color: $core-fleet-blue;
code {
color: $core-vibrant-blue;
background-color: $ui-gray;
padding: $pad-xxsmall;
font-family: "SourceCodePro", $monospace;
}
}
}
// Removes arrows on Firefox number fields
input[type="number"] {
-moz-appearance: textfield;
}