fleet/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss
Jacob Shandling 07366e9497
UI – remove problematic legacy .body-wrap, apply UI-standard .core-wrapper and .main-content to DUP (#16310)
## More global solution to #16277, cleanup to prevent similar bugs

- Swap out [localized
solution](https://github.com/fleetdm/fleet/pull/16287) for standard
`.main-content` containing desired padding
- Apply `.core-wrapper` class to parent, in line with all other UI pages
- Remove problematic legacy `.body-wrap`
  - spot check all places this class was being applied:
    - PlatformWrapper
    - LiveQuery –> SelectTargets (was causing excess padding here)
    - PackQueriesTable (caused excess padding here)
    - TeamManagementPage (excess padding was being locally negated)
    - EditQueryPage
    - LiveQueryPage
    - DeviceUserPage
  - Remove local styles meant to negate `.body-wrap`'s styles

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2024-01-25 18:48:38 +00:00

124 lines
2.1 KiB
SCSS

@import "../../../../../../../node_modules/react-tabs/style/react-tabs.scss";
.platform-wrapper {
padding: 0; // different to pad sticky subnav properly
.react-tabs {
&__tab-list {
margin: 0 0 1.25rem;
}
}
h1 {
margin-bottom: $pad-small;
}
p {
margin: 0;
}
.input-field {
&__textarea {
min-height: 88px;
}
&__textarea,
&--disabled {
font-family: "SourceCodePro", $monospace;
font-weight: $bold;
font-size: 13px;
color: $core-fleet-blue;
line-height: 20px;
padding: 12px $pad-large 12px $pad-medium;
}
}
&__advanced--installer {
.input-field {
height: 105px;
}
}
&__installer-copy-icon {
color: $core-vibrant-blue;
margin-left: $pad-small;
margin-right: $pad-medium;
}
&__copy-message {
font-weight: $regular;
vertical-align: top;
background-color: $ui-light-grey;
border: solid 1px #e2e4ea;
border-radius: 10px;
padding: 2px 6px;
}
.buttons {
display: flex;
flex-direction: row-reverse;
align-items: center;
position: relative;
top: 28px;
right: 16px;
// prevent this element from affecting the parent label's height
height: 0;
gap: $pad-small;
a {
display: flex;
align-items: center;
}
img {
width: 16px;
height: 16px;
}
}
&__certificate-loading {
color: $ui-fleet-black-50;
padding-top: $pad-xsmall;
}
&__certificate-error {
span,
em {
display: block;
padding: $pad-xsmall 0;
}
em {
color: $ui-error;
font-style: normal;
}
}
&__advanced--heading,
&__chromeos--heading {
font-weight: $bold;
}
&__chromeos--info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
&__chromeos-policy-for-extension {
height: 230px;
.input-field--disabled {
height: 190px;
}
}
.download-certificate--tooltip {
margin-bottom: 0;
}
&__copy-message {
background-color: $ui-light-grey;
border: solid 1px #e2e4ea;
border-radius: 10px;
padding: 2px 6px;
}
}