diff --git a/changes/bug-7757-select-query-styling b/changes/bug-7757-select-query-styling new file mode 100644 index 0000000000..941615c59c --- /dev/null +++ b/changes/bug-7757-select-query-styling @@ -0,0 +1 @@ +- Fix styling of select a query modal on the host details page \ No newline at end of file diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index c4ba344a9d..d1b95c5d22 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -52,6 +52,16 @@ $base-class: "button"; outline: none; } + .transparent-text { + opacity: 0; + } + + .children-wrapper { + display: flex; + flex-direction: row; + align-items: center; + } + &--brand { @include button-variant( $core-vibrant-blue, @@ -324,6 +334,27 @@ $base-class: "button"; background-color: $ui-vibrant-blue-10; box-shadow: none; } + + .children-wrapper { + display: flex; + width: 100%; + flex-direction: column; + + .info { + &__header { + display: block; + width: 100%; + text-align: left; + } + &__data { + display: block; + width: 100%; + font-weight: normal; + text-align: left; + margin-top: 10px; + } + } + } } &--contextual-nav-item { @@ -331,14 +362,4 @@ $base-class: "button"; display: flex; justify-content: space-between; } - - .transparent-text { - opacity: 0; - } - - .children-wrapper { - display: flex; - flex-direction: row; - align-items: center; - } } diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss index 0c0c2e8a91..411f8243eb 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss +++ b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss @@ -5,27 +5,6 @@ width: 658px; padding: $pad-xxlarge; border-radius: $pad-small; - - .info { - display: flex; - flex-direction: column; - - &__header { - display: block; - color: $core-fleet-black; - font-weight: $bold; - font-size: $x-small; - text-align: left; - } - &__data { - display: block; - color: $core-fleet-black; - font-weight: normal; - font-size: $x-small; - text-align: left; - margin-top: 10px; - } - } } &__no-queries { @@ -72,6 +51,8 @@ } &__create-query { + display: flex; + span { margin: 15px; font-weight: bold; diff --git a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss index 976fbe691b..8932caeb30 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss +++ b/frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss @@ -7,24 +7,5 @@ &__policy-selection { padding: $pad-large 0; - - .children-wrapper { - display: block; - } - - .info { - display: flex; - - &__header { - display: block; - text-align: left; - } - &__data { - display: block; - font-weight: normal; - text-align: left; - margin-top: 10px; - } - } } }