Swap style rule .toggle-wrapper with utility classes

Also swaps .project-feature-controls .select-wrapper with utility class.

app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue

@@ -73,11 +73,12 @@ export default {
   <div :data-for="name" class="project-feature-controls">
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <project-feature-toggle
+      class="gl-flex-grow-0 gl-mr-3"
       :value="featureEnabled"
       :disabled-input="disabledInput"
       @change="toggleFeature"
     />
-    <div class="select-wrapper">
+    <div class="select-wrapper gl-flex-fill-1">
       <select
         :disabled="displaySelectInput"
         class="form-control project-repo-select select-control"

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -299,7 +299,7 @@ export default {
         :label="s__('ProjectSettings|Project visibility')"
       >
         <div class="project-feature-controls">
-          <div class="select-wrapper">
+          <div class="select-wrapper gl-flex-fill-1">
             <select
               v-model="visibilityLevel"
               :disabled="!canChangeVisibilityLevel"
@@ -517,7 +517,7 @@ export default {
         "
       >
         <div class="project-feature-controls">
-          <div class="select-wrapper">
+          <div class="select-wrapper gl-flex-fill-1">
             <select
               v-model="metricsDashboardAccessLevel"
               :disabled="metricsOptionsDropdownEnabled"

app/assets/javascripts/vue_shared/components/toggle_button.vue

@@ -59,7 +59,7 @@ export default {
 </script>
 
 <template>
-  <label class="toggle-wrapper">
+  <label class="gl-mt-2">
     <input v-if="name" :name="name" :value="value" type="hidden" />
     <button
       type="button"

app/assets/stylesheets/pages/projects.scss

@@ -59,14 +59,6 @@
   }
 }
 
-.toggle-wrapper {
-  margin-top: 5px;
-}
-
-.project-feature-row > .toggle-wrapper {
-  margin: 10px 0;
-}
-
 .project-visibility-setting,
 .project-feature-settings {
   border: 1px solid $border-color;
@@ -106,15 +98,6 @@
   align-items: center;
   margin: $gl-padding-8 0;
   max-width: 432px;
-
-  .toggle-wrapper {
-    flex: 0;
-    margin-right: 10px;
-  }
-
-  .select-wrapper {
-    flex: 1;
-  }
 }
 
 .project-feature-setting-group {

ee/app/views/groups/saml_providers/_form.html.haml

@@ -2,12 +2,12 @@
   = form_for [group, saml_provider], url: group_saml_providers_path do |f|
     .form-group
       = form_errors(saml_provider)
-      %label.toggle-wrapper.mb-0.js-group-saml-enabled-toggle-area
+      %label.gl-mt-2.mb-0.js-group-saml-enabled-toggle-area
         = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enabled?, label: s_("GroupSAML|Toggle SAML authentication"), class_list: "js-project-feature-toggle project-feature-toggle d-inline" do
           = f.hidden_field :enabled, { class: 'js-group-saml-enabled-input js-project-feature-toggle-input'}
         %span.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Enable SAML authentication for this group.')
     .form-group
-      %label.toggle-wrapper.mb-0.js-group-saml-enforced-sso-toggle-area
+      %label.gl-mt-2.mb-0.js-group-saml-enforced-sso-toggle-area
         = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enforced_sso, disabled: !saml_provider.enabled?, label: s_("GroupSAML|Enforced SSO"), class_list: "js-project-feature-toggle js-group-saml-enforced-sso-toggle project-feature-toggle d-inline", data: { qa_selector: 'enforced_sso_toggle_button' } do
           = f.hidden_field :enforced_sso, { class: 'js-group-saml-enforced-sso-input js-project-feature-toggle-input'}
         %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Enforce SSO-only authentication for this group.')
@@ -16,7 +16,7 @@
           = s_('GroupSAML|To be able to enable enforced SSO, you first need to enable SAML authentication.')
     - if Feature.enabled?(:group_managed_accounts, group)
       .form-group
-        %label.toggle-wrapper.mb-0.js-group-saml-enforced-group-managed-accounts-toggle-area
+        %label.gl-mt-2.mb-0.js-group-saml-enforced-group-managed-accounts-toggle-area
           = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enforced_group_managed_accounts, disabled: !saml_provider.enforced_sso?, label: s_("GroupSAML|Enforced SSO"), class_list: "js-project-feature-toggle js-group-saml-enforced-group-managed-accounts-toggle project-feature-toggle d-inline", data: { qa_selector: 'group_managed_accounts_toggle_button' } do
             = f.hidden_field :enforced_group_managed_accounts, { class: 'js-group-saml-enforced-group-managed-accounts-input js-project-feature-toggle-input'}
           %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Enforce users to have dedicated group managed accounts for this group.')
@@ -24,7 +24,7 @@
           %span
             = s_('GroupSAML|To be able to enable group managed accounts, you first need to enable enforced SSO.')
       .form-group
-        %label.toggle-wrapper.mb-0.js-group-saml-prohibited-outer-forks-toggle-area
+        %label.gl-mt-2.mb-0.js-group-saml-prohibited-outer-forks-toggle-area
           = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.prohibited_outer_forks, disabled: !saml_provider.enforced_group_managed_accounts?, label: s_("GroupSAML|Prohibit outer forks"), class_list: "js-project-feature-toggle js-group-saml-prohibited-outer-forks-toggle project-feature-toggle d-inline", data: { qa_selector: 'prohibited_outer_forks_toggle_button' } do
             = f.hidden_field :prohibited_outer_forks, { class: 'js-group-saml-prohibited-outer-forks-input js-project-feature-toggle-input'}
           %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Prohibit outer forks for this group.')