fleet/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
noahtalerman 7d9906e5ea
Update Fleet setup styles (#78)
This PR is part of the UI Refresh #38.

The goal of this PR is to update the styles of the Fleet setup (onboarding) flow.
2020-12-02 09:59:44 -05: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: 2px;
}
&__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;
}
}
}