fleet/frontend/components/FileUploader/_styles.scss
RachelElysia 1c1ebef4ef
20404: Edit packages feature (#21812)
## Issue
Cerra #20404

## Description
- Add frontend/API backend for editing software packages. GitOps will be
a separate PR.

## More
- Please see subtasks for change lists
  - #21611 
  - #21613

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

<!-- 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.
- [x] Input data is properly validated, `SELECT *` is avoided, SQL
injection is prevented (using placeholders for values in statements)
- [x] Manual QA for all new/changed functionality

Automated tests will follow in another PR.

---------

Co-authored-by: Ian Littman <iansltx@gmail.com>
Co-authored-by: Luke Heath <luke@fleetdm.com>
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: Victor Lyuboslavsky <victor.lyuboslavsky@gmail.com>
2024-09-17 08:40:47 -05:00

54 lines
1 KiB
SCSS

.file-uploader {
display: flex;
flex-direction: column;
align-items: center;
border-radius: $border-radius-medium;
background-color: $ui-fleet-blue-10;
border: 1px solid $ui-fleet-black-10;
padding: $pad-xlarge $pad-large;
font-size: $x-small;
text-align: center;
gap: $pad-small;
// when the file preview is showing, we want the padding to be
// slightly smaller on the top and bottom.
&__file-preview {
padding: $pad-medium $pad-large;
}
&__graphics {
display: flex;
align-items: center;
gap: $pad-medium;
}
&__message {
margin: 0;
color: $ui-fleet-black-75;
}
&__additional-info {
margin: 0;
color: $ui-fleet-black-50;
}
input {
display: none;
}
&__upload-button {
// we handle the padding in the label so the entire button is clickable
padding: 0;
label {
padding: $pad-small $pad-medium;
display: flex;
align-items: center;
justify-content: center;
gap: $pad-small;
&:hover {
cursor: pointer;
}
}
}
}