fleet/frontend/components/forms/fields/InputFieldHiddenContent/_styles.scss
Roberto Dip aeb4810541
prevent input secret from overflowing (#14458)
this implements the exact same fix as the component in
`frontend/components/EnrollSecrets/SecretField/_styles.scss`

we should probably refactor the three different components we have:
`SecretField`, `InputFieldHiddenContent` and the ad-hoc component (which
has a TODO) we have inside `EnrollSecretRow`.

for now, adding the padding for #14416
2023-10-11 16:08:48 -03:00

65 lines
1.1 KiB
SCSS

.input-field-hidden-content {
&__secret {
display: flex;
align-items: center;
margin-bottom: $pad-medium;
}
.form-field {
margin-bottom: 0;
}
&__secret-input {
.form-field__label {
position: relative;
font-size: $x-small;
font-weight: $bold;
margin-bottom: 0;
// TODO: figure out width when pulling out to common component
height: 0;
min-height: 0;
}
.input-field {
padding-right: 16%;
&--disabled {
letter-spacing: 0;
}
&--password {
letter-spacing: 4px;
}
}
}
&__copy-message {
position: absolute;
right: 65px;
background-color: $ui-light-grey;
border: solid 1px #e2e4ea;
border-radius: 10px;
padding: 2px 6px;
}
.buttons {
display: flex;
align-items: center;
position: absolute;
right: 16px;
top: 12px;
height: 16px;
span {
font-weight: $regular;
}
}
&__show-secret-icon,
&__copy-secret-icon,
&__edit-secret-icon,
&__delete-secret-icon {
padding: 0 $pad-small;
margin-left: $pad-xsmall;
}
}