mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 21:47:20 +00:00
35c172dcfd
relates to #21559 This adds the ability for end users to enrol their own device in fleet mdm. > NOTE: this new byod HTML page is a separate HTML asset that contains all styles and scripts needed for the page to work. We do not send the fleet UI assets and this drastically cuts down the response time to the users who will be visiting this page on mobile devices There are two sides included in this: **Adding a new add host modal ios and iPad section for IT admins**  **delivering a new byod HTML page to end users that will allow end users to download the config profile to enrol into fleet mdm**  <!-- Note that API documentation changes are now addressed by the product design team. --> - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. See [Changes files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files) for more information. - [ ] Added/updated tests - [x] Manual QA for all new/changed functionality
136 lines
2.5 KiB
SCSS
136 lines
2.5 KiB
SCSS
.input-field {
|
|
line-height: 1.5;
|
|
background-color: $ui-light-grey;
|
|
border: solid 1px $ui-fleet-black-10;
|
|
border-radius: 4px;
|
|
font-size: $small;
|
|
padding: 7px 12px;
|
|
color: $core-fleet-blue;
|
|
font-family: "Inter", 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 &:not(.input-field--read-only) {
|
|
box-shadow: none;
|
|
border: 1px solid $core-vibrant-blue;
|
|
}
|
|
|
|
&--disabled {
|
|
color: $ui-fleet-black-50;
|
|
|
|
.form-field__label,
|
|
.form-field__help-text {
|
|
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;
|
|
}
|
|
|
|
&__help-text {
|
|
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;
|
|
}
|
|
}
|
|
|
|
&__copy-wrapper-outside {
|
|
position: relative;
|
|
}
|
|
|
|
&__copy-wrapper-inside {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 12px;
|
|
}
|
|
|
|
|
|
&__input-container.copy-enabled {
|
|
&.copy-outside {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $pad-medium;
|
|
}
|
|
|
|
&.copy-inside {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
&__copied-confirmation {
|
|
font-size: $x-small;
|
|
position: absolute;
|
|
background-color: $ui-light-grey;
|
|
border: solid 1px $ui-fleet-black-10;
|
|
border-radius: $border-radius-xlarge;
|
|
padding: $pad-xxsmall 6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
&__copied-confirmation-inside {
|
|
right: 24px;
|
|
}
|
|
|
|
&__copied-confirmation-outside {
|
|
left: -90px;
|
|
}
|
|
}
|
|
|
|
// Removes arrows on Firefox number fields
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|