Rename col-xs-* to col-*

app/assets/javascripts/ide/components/ide.vue

@@ -80,12 +80,12 @@ export default {
           class="ide-empty-state"
         >
           <div class="row js-empty-state">
-            <div class="col-xs-12">
+            <div class="col-12">
               <div class="svg-content svg-250">
                 <img :src="emptyStateSvgPath" />
               </div>
             </div>
-            <div class="col-xs-12">
+            <div class="col-12">
               <div class="text-content text-center">
                 <h4>
                   Welcome to the GitLab IDE

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -139,12 +139,12 @@ export default {
       v-else-if="!rightPanelCollapsed"
       class="row js-empty-state"
     >
-      <div class="col-xs-10 col-xs-offset-1">
+      <div class="col-10 col-offset-1">
         <div class="svg-content svg-80">
           <img :src="statusSvg" />
         </div>
       </div>
-      <div class="col-xs-10 col-xs-offset-1">
+      <div class="col-10 col-offset-1">
         <div
           class="text-content text-center"
           v-if="!lastCommitMsg"

app/assets/javascripts/issue_show/components/form.vue

@@ -84,7 +84,7 @@
       <div
         :class="{
           'col-sm-8 col-lg-9': hasIssuableTemplates,
-          'col-xs-12': !hasIssuableTemplates,
+          'col-12': !hasIssuableTemplates,
         }"
       >
         <title-field

app/assets/javascripts/pipelines/components/blank_state.vue

@@ -17,13 +17,13 @@
 
 <template>
   <div class="row empty-state">
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="svg-content">
         <img :src="svgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12 text-center">
+    <div class="col-12 text-center">
       <div class="text-content">
         <h4>{{ message }}</h4>
       </div>

app/assets/javascripts/pipelines/components/empty_state.vue

@@ -19,13 +19,13 @@
 </script>
 <template>
   <div class="row empty-state js-empty-state">
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="svg-content svg-250">
         <img :src="emptyStateSvgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12">
+    <div class="col-12">
       <div class="text-content">
 
         <template v-if="canSetCi">

app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue

@@ -18,10 +18,10 @@ export default {
 <template>
   <div class="mr-widget-body mr-widget-empty-state">
     <div class="row">
-      <div class="artwork col-sm-5 col-sm-push-7 col-xs-12 text-center">
+      <div class="artwork col-sm-5 col-sm-push-7 col-12 text-center">
         <span v-html="emptyStateSVG"></span>
       </div>
-      <div class="text col-sm-7 col-sm-pull-5 col-xs-12">
+      <div class="text col-sm-7 col-sm-pull-5 col-12">
         <span>
           Merge requests are a place to propose changes you have made to a project
           and discuss those changes with others.

app/views/ci/lints/show.html.haml

@@ -1,8 +1,8 @@
 .row.empty-state
-  .col-xs-12
+  .col-12
     .svg-content
       = image_tag 'illustrations/feature_moved.svg'
-  .col-xs-12
+  .col-12
     .text-content.text-center
       %h4= _("GitLab CI Linter has been moved")
       %p

app/views/import/gitlab_projects/new.html.haml

@@ -8,7 +8,7 @@
 
 = form_tag import_gitlab_project_path, class: 'new_project', multipart: true do
   .row
-    .form-group.col-xs-12.col-sm-6
+    .form-group.col-12.col-sm-6
       = label_tag :namespace_id, 'Project path', class: 'label-light'
       .form-group
         .input-group
@@ -21,7 +21,7 @@
             .input-group-addon.static-namespace.has-tooltip{ title: user_url(current_user.username) + '/' }
               #{user_url(current_user.username)}/
             = hidden_field_tag :namespace_id, value: current_user.namespace_id
-    .form-group.col-xs-12.col-sm-6.project-path
+    .form-group.col-12.col-sm-6.project-path
       = label_tag :path, 'Project name', class: 'label-light'
       = text_field_tag :path, @path, placeholder: "my-awesome-project", class: "js-path-name form-control", tabindex: 2, autofocus: true, required: true
 

app/views/projects/clusters/_empty_state.html.haml

@@ -1,7 +1,7 @@
 .row.empty-state
-  .col-xs-12
+  .col-12
     .svg-content= image_tag 'illustrations/clusters_empty.svg'
-  .col-xs-12
+  .col-12
     .text-content
       %h4.text-center= s_('ClusterIntegration|Integrate Kubernetes cluster automation')
       - link_to_help_page = link_to(_('Learn more about Kubernetes'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')

app/views/projects/cycle_analytics/show.html.haml

@@ -14,10 +14,10 @@
       .content-block
         .container-fluid
           .row
-            .col-sm-3.col-xs-12.column{ "v-for" => "item in state.summary" }
+            .col-sm-3.col-12.column{ "v-for" => "item in state.summary" }
               %h3.header {{ item.value }}
               %p.text {{ item.title }}
-            .col-sm-3.col-xs-12.column
+            .col-sm-3.col-12.column
               .dropdown.inline.js-ca-dropdown
                 %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
                   %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }}

app/views/projects/jobs/_empty_state.html.haml

@@ -5,10 +5,10 @@
 - action = local_assigns.fetch(:action, nil)
 
 .row.empty-state
-  .col-xs-12
+  .col-12
     .svg-content{ class: illustration_size }
       = image_tag illustration
-  .col-xs-12
+  .col-12
     .text-content
       %h4.text-center= title
       %p= content

app/views/projects/merge_requests/conflicts/_submit_form.html.haml

@@ -9,8 +9,8 @@
   .form-group
     .col-sm-offset-2.col-sm-10
       .row
-        .col-xs-6
+        .col-6
           %button.btn.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
             %span {{commitButtonText}}
-        .col-xs-6.text-right
+        .col-6.text-right
           = link_to "Cancel", project_merge_request_path(@merge_request.project, @merge_request), class: "btn btn-cancel"

app/views/projects/merge_requests/diffs/_diffs.html.haml

@@ -5,9 +5,9 @@
 
 - if @merge_request_diff&.empty?
   .row.empty-state.nothing-here-block
-    .col-xs-12
+    .col-12
       .svg-content= image_tag 'illustrations/merge_request_changes_empty.svg'
-    .col-xs-12
+    .col-12
       .text-content.text-center
         %p
           No changes between

app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml

@@ -18,22 +18,22 @@
 
 .help-form
   .form-group
-    = label_tag :display_name, 'Display name', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag :display_name, 'Display name', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.input-group
+    .col-sm-10.col-12.input-group
       = text_field_tag :display_name, "GitLab / #{@project.full_name}", class: 'form-control input-sm', readonly: 'readonly'
       .input-group-btn
         = clipboard_button(target: '#display_name')
 
   .form-group
-    = label_tag :description, 'Description', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag :description, 'Description', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.input-group
+    .col-sm-10.col-12.input-group
       = text_field_tag :description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
       .input-group-btn
         = clipboard_button(target: '#description')
 
   .form-group
-    = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.text-block
+    .col-sm-10.col-12.text-block
       %p Fill in the word that works best for your team.
       %p
         Suggestions:
@@ -42,44 +42,44 @@
         %code= @project.full_path
 
   .form-group
-    = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.input-group
+    .col-sm-10.col-12.input-group
       = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly'
       .input-group-btn
         = clipboard_button(target: '#request_url')
 
   .form-group
-    = label_tag nil, 'Request method', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag nil, 'Request method', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.text-block POST
+    .col-sm-10.col-12.text-block POST
 
   .form-group
-    = label_tag :response_username, 'Response username', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag :response_username, 'Response username', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.input-group
+    .col-sm-10.col-12.input-group
       = text_field_tag :response_username, 'GitLab', class: 'form-control input-sm', readonly: 'readonly'
       .input-group-btn
         = clipboard_button(target: '#response_username')
 
   .form-group
-    = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.input-group
+    .col-sm-10.col-12.input-group
       = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control input-sm', readonly: 'readonly'
       .input-group-btn
         = clipboard_button(target: '#response_icon')
 
   .form-group
-    = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.text-block Yes
+    .col-sm-10.col-12.text-block Yes
 
   .form-group
-    = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.input-group
+    .col-sm-10.col-12.input-group
       = text_field_tag :autocomplete_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly'
       .input-group-btn
         = clipboard_button(target: '#autocomplete_hint')
 
   .form-group
-    = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label'
+    = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 control-label'
-    .col-sm-10.col-xs-12.input-group
+    .col-sm-10.col-12.input-group
       = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
       .input-group-btn
         = clipboard_button(target: '#autocomplete_description')

app/views/projects/services/slack_slash_commands/_help.html.haml

@@ -26,8 +26,8 @@
 
     .help-form
       .form-group
-        = label_tag nil, 'Command', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag nil, 'Command', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.text-block
+        .col-sm-10.col-12.text-block
           %p Fill in the word that works best for your team.
           %p
             Suggestions:
@@ -36,50 +36,50 @@
             %code= @project.full_path
 
       .form-group
-        = label_tag :url, 'URL', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag :url, 'URL', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.input-group
+        .col-sm-10.col-12.input-group
           = text_field_tag :url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly'
           .input-group-btn
             = clipboard_button(target: '#url')
 
       .form-group
-        = label_tag nil, 'Method', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag nil, 'Method', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.text-block POST
+        .col-sm-10.col-12.text-block POST
 
       .form-group
-        = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.input-group
+        .col-sm-10.col-12.input-group
           = text_field_tag :customize_name, 'GitLab', class: 'form-control input-sm', readonly: 'readonly'
           .input-group-btn
             = clipboard_button(target: '#customize_name')
 
       .form-group
-        = label_tag nil, 'Customize icon', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag nil, 'Customize icon', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.text-block
+        .col-sm-10.col-12.text-block
           = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36)
           = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
 
       .form-group
-        = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.text-block Show this command in the autocomplete list
+        .col-sm-10.col-12.text-block Show this command in the autocomplete list
 
       .form-group
-        = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.input-group
+        .col-sm-10.col-12.input-group
           = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
           .input-group-btn
             = clipboard_button(target: '#autocomplete_description')
 
       .form-group
-        = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.input-group
+        .col-sm-10.col-12.input-group
           = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly'
           .input-group-btn
             = clipboard_button(target: '#autocomplete_usage_hint')
 
       .form-group
-        = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-xs-12 control-label'
+        = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-12 control-label'
-        .col-sm-10.col-xs-12.input-group
+        .col-sm-10.col-12.input-group
           = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control input-sm', readonly: 'readonly'
           .input-group-btn
             = clipboard_button(target: '#descriptive_label')

app/views/shared/empty_states/_issues.html.haml

@@ -3,10 +3,10 @@
 - has_button = button_path || project_select_button
 
 .row.empty-state
-  .col-xs-12
+  .col-12
     .svg-content
       = image_tag 'illustrations/issues.svg'
-  .col-xs-12
+  .col-12
     .text-content
       - if current_user
         %h4

app/views/shared/empty_states/_labels.html.haml

@@ -1,8 +1,8 @@
 .row.empty-state.labels
-  .col-xs-12
+  .col-12
     .svg-content
       = image_tag 'illustrations/labels.svg'
-  .col-xs-12
+  .col-12
     .text-content
       %h4= _("Labels can be applied to issues and merge requests to categorize them.")
       %p= _("You can also star a label to make it a priority label.")

app/views/shared/empty_states/_merge_requests.html.haml

@@ -3,10 +3,10 @@
 - has_button = button_path || project_select_button
 
 .row.empty-state.merge-requests
-  .col-xs-12
+  .col-12
     .svg-content
       = image_tag 'illustrations/merge_requests.svg'
-  .col-xs-12
+  .col-12
     .text-content
       - if has_button
         %h4