Security - convert LESS to SASS (#25079) (#25158)

* convert security less to sass

* remove unused less styles from xpack_main

x-pack/plugins/security/public/index.scss

@@ -5,3 +5,6 @@
 
 // Login styles
 @import './views/login/index';
+
+// Management styles
+@import './views/management/index';

x-pack/plugins/security/public/views/account/account.js

@@ -9,7 +9,6 @@ import { toastNotifications } from 'ui/notify';
 import routes from 'ui/routes';
 import template from './account.html';
 import '../management/change_password_form/change_password_form';
-import './account.less';
 import '../../services/shield_user';
 import { GateKeeperProvider } from 'plugins/xpack_main/services/gate_keeper';
 

x-pack/plugins/security/public/views/logout/logout.js

@@ -5,7 +5,6 @@
  */
 
 import chrome from 'ui/chrome';
-import 'plugins/security/views/logout/logout.less';
 
 chrome
   .setVisible(false)

x-pack/plugins/security/public/views/management/change_password_form/change_password_form.html

@@ -18,11 +18,11 @@
     <!-- Changing password -->
     <div
       ng-show="changePasswordController.isFormVisible"
-      class="kuiFormPanel"
+      class="kuiFormPanel mgtForm__panel"
     >
       <!-- Current password -->
       <div class="kuiFormSection" ng-if="requireCurrentPassword">
-        <label for="password" class="kuiFormSubLabel">
+        <label for="password" class="kuiFormSubLabel mgtForm__subLabel">
           Current password
         </label>
         <input
@@ -45,7 +45,7 @@
 
       <!-- New password -->
       <div class="kuiFormSection">
-        <label for="newPassword" class="kuiFormSubLabel">
+        <label for="newPassword" class="kuiFormSubLabel mgtForm__subLabel">
           New password
         </label>
         <input
@@ -69,7 +69,7 @@
 
       <!-- New password confirmation -->
       <div class="kuiFormSection">
-        <label for="confirmPassword" class="kuiFormSubLabel">
+        <label for="confirmPassword" class="kuiFormSubLabel mgtForm__subLabel">
           Confirm password
         </label>
         <input
@@ -99,7 +99,7 @@
       </div>
 
       <!-- Form actions -->
-      <div class="kuiFormFooter">
+      <div class="kuiFormFooter mgtForm__footer">
         <button
           type="button"
           class="kuiButton kuiButton--primary"

x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.less → x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.scss

@@ -1,4 +1,4 @@
 .collapsiblePanel__logo {
-  margin-right: 8px;
+  margin-right: $euiSizeS;
   vertical-align: text-bottom;
-}
+}

x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.tsx

@@ -14,7 +14,6 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import React, { Component, Fragment } from 'react';
-import './collapsible_panel.less';
 
 interface Props {
   iconType: string | any;

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.less → x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.scss

@@ -1,3 +1,7 @@
 .showImpactedSpaces--flyout--footer, .showImpactedSpaces {
   text-align: right;
 }
+
+.showImpactedSpaces {
+  margin-top: $euiSize;
+}

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/impacted_spaces_flyout.tsx

@@ -21,7 +21,6 @@ import { UserProfile } from '../../../../../../../../xpack_main/public/services/
 import { KibanaPrivilege } from '../../../../../../../common/model/kibana_privilege';
 import { Role } from '../../../../../../../common/model/role';
 import { NO_PRIVILEGE_VALUE } from '../../../lib/constants';
-import './impacted_spaces_flyout.less';
 
 interface Props {
   role: Role;

x-pack/plugins/security/public/views/management/edit_role/edit_role.scss

@@ -0,0 +1,4 @@
+#editRoleReactRoot {
+  background: $euiColorLightestShade;
+  min-height: calc(100vh - 70px);
+}

x-pack/plugins/security/public/views/management/edit_role/index.js

@@ -9,7 +9,6 @@ import chrome from 'ui/chrome';
 import routes from 'ui/routes';
 import { fatalError } from 'ui/notify';
 import template from 'plugins/security/views/management/edit_role/edit_role.html';
-import 'plugins/security/views/management/edit_role/edit_role.less';
 import 'angular-ui-select';
 import 'plugins/security/services/application_privilege';
 import 'plugins/security/services/shield_user';

x-pack/plugins/security/public/views/management/index.scss

@@ -0,0 +1,42 @@
+// Edit role styles
+@import './edit_role/components/privileges/kibana/impacted_spaces_flyout';
+@import './edit_role/components/collapsible_panel';
+@import './edit_role/edit_role';
+
+
+$securityFormWidth: 460px;
+
+// Management styles
+.mgtForm__panel {
+  max-width: $securityFormWidth;
+
+  .mgtForm__subLabel {
+    margin-bottom: $euiSizeS;
+  }
+}
+
+.mgtForm__footer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .kuiButton + .kuiButton {
+    margin-left: $euiSizeS;
+  }
+}
+
+.mgtUsersEditPage,
+.mgtUsersListingPage {
+  min-height: calc(100vh - 70px);
+}
+
+.mgtUsersListingPage__content {
+  flex-grow: 0;
+}
+
+.mgtUsersEditPage__content {
+  max-width: $securityFormWidth;
+  margin-left: auto;
+  margin-right: auto;
+  flex-grow: 0;
+}

x-pack/plugins/security/public/views/management/management.js

@@ -10,7 +10,6 @@ import 'plugins/security/views/management/users';
 import 'plugins/security/views/management/roles';
 import 'plugins/security/views/management/edit_user';
 import 'plugins/security/views/management/edit_role/index';
-import 'plugins/security/views/management/management.less';
 import routes from 'ui/routes';
 import { XPackInfoProvider } from 'plugins/xpack_main/services/xpack_info';
 import '../../services/shield_user';

x-pack/plugins/xpack_main/public/components/telemetry/telemetry_form.js

@@ -18,7 +18,6 @@ import {
 } from '@elastic/eui';
 import { CONFIG_TELEMETRY_DESC, PRIVACY_STATEMENT_URL } from '../../../common/constants';
 import { OptInExampleFlyout } from './opt_in_details_component';
-import './telemetry_form.less';
 import { Field } from 'ui/management';
 
 const SEARCH_TERMS = ['telemetry', 'usage', 'data', 'usage data'];