fleet/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
noahtalerman 98799fdff8
New styles for 404, 500, Login, User settings, and Confirm invite pages. (#108)
- Kolide404 and Kolide500 components renamed to Fleet404 and Fleet500
- Styling for Login and Confirm invite pages are consistent with the recent changes to the Setup page.
- Add "*" character to the 404 <Route />'s path property. Now the 404 page renders when there is no exact path match.
2020-12-08 17:45:08 -08:00

74 lines
1.2 KiB
SCSS

.input-icon-field {
margin-top: 16px;
position: relative;
width: 100%;
&__icon {
position: absolute;
right: 6px;
top: 28px;
font-size: 18px;
color: $core-medium-blue-grey;
&--active {
color: $core-blue;
}
&--error {
color: $alert;
}
}
&__input {
border: 1px solid $ui-borders;
background-color: $ui-light-grey;
border-radius: 4px;
padding: 9px 30px 9px 16px;
font-size: $small;
text-indent: 1px;
position: relative;
width: 100%;
box-sizing: border-box;
color: $core-dark-blue-grey;
font-weight: $regular;
::placeholder {
color: $core-medium-blue-grey;
}
&:focus {
outline: none;
}
&--error {
border-bottom-color: $alert;
}
}
&__label {
font-size: $x-small;
font-weight: $bold;
margin-bottom: 4px;
}
&__errors {
font-size: $x-small;
}
&__hint {
font-size: $x-small;
font-style: italic;
font-weight: $regular;
line-height: 20px;
display: inline-block;
margin-top: 8px;
code {
color: $core-blue;
background-color: $ui-light-grey;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
}
}
}