From 070de825987ce103ac89059e8c743daaf857dc58 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Tue, 9 Jan 2018 10:08:28 +0100
Subject: [PATCH] Adjust modal style to new design

---
 .../vue_shared/components/modal.vue           |  4 +--
 app/assets/stylesheets/framework/modal.scss   | 32 +++++++++++++++----
 .../framework/tw_bootstrap_variables.scss     |  4 +--
 .../stylesheets/framework/variables.scss      |  5 +++
 app/views/projects/blob/_new_dir.html.haml    |  2 +-
 app/views/projects/blob/_upload.html.haml     |  2 +-
 changelogs/unreleased/winh-style-modals.yml   |  5 +++
 7 files changed, 42 insertions(+), 12 deletions(-)
 create mode 100644 changelogs/unreleased/winh-style-modals.yml

diff --git a/app/assets/javascripts/vue_shared/components/modal.vue b/app/assets/javascripts/vue_shared/components/modal.vue
index c103c45c7d..8227428d8b 100644
--- a/app/assets/javascripts/vue_shared/components/modal.vue
+++ b/app/assets/javascripts/vue_shared/components/modal.vue
@@ -122,7 +122,7 @@
           >
             <button
               type="button"
-              class="btn pull-left"
+              class="btn"
               :class="btnCancelKindClass"
               @click="emitCancel($event)"
               data-dismiss="modal"
@@ -132,7 +132,7 @@
             <button
               v-if="primaryButtonLabel"
               type="button"
-              class="btn pull-right js-primary-button"
+              class="btn js-primary-button"
               :disabled="submitDisabled"
               :class="btnKindClass"
               @click="emitSubmit($event)"
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 1be66d0ab2..924472f2d7 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -1,4 +1,5 @@
 .modal-header {
+  background-color: $modal-body-bg;
   padding: #{3 * $grid-size} #{2 * $grid-size};
 
   .page-title {
@@ -8,6 +9,7 @@
 
 .modal-body {
   background-color: $modal-body-bg;
+  min-height: $modal-body-height;
   position: relative;
   padding: #{3 * $grid-size} #{2 * $grid-size};
 
@@ -20,6 +22,30 @@
   }
 }
 
+.modal-footer {
+  display: flex;
+  flex-direction: row;
+
+  .btn + .btn {
+    margin-left: $grid-size;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    flex-direction: column;
+
+    .btn + .btn {
+      margin-left: 0;
+      margin-top: $grid-size;
+    }
+  }
+
+  @media (min-width: $screen-sm-min) {
+    .btn:first-of-type {
+      margin-left: auto;
+    }
+  }
+}
+
 body.modal-open {
   overflow: hidden;
 }
@@ -32,12 +58,6 @@ body.modal-open {
   }
 }
 
-@media (min-width: $screen-md-min) {
-  .modal-dialog {
-    width: 860px;
-  }
-}
-
 @media (min-width: $screen-lg-min) {
   .modal-full {
     width: 98%;
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index a23131e081..d04e555769 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -194,6 +194,6 @@ $modal-body-bg: $white-light;
 //** Modal footer border color
 // $modal-footer-border-color:   $modal-header-border-color
 
-// $modal-lg:                    900px
-// $modal-md:                    600px
+$modal-lg: 860px;
+$modal-md: 540px;
 // $modal-sm:                    300px
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index ef1520f1f6..da18ddf78d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -733,3 +733,8 @@ $popup-box-shadow-color: rgba(90, 90, 90, 0.05);
 Multi file editor
 */
 $border-color-settings: #e1e1e1;
+
+/*
+Modals
+*/
+$modal-body-height: 134px;
diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml
index 03ab1bb59e..5d48a35dc4 100644
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@@ -1,5 +1,5 @@
 #modal-create-new-dir.modal
-  .modal-dialog
+  .modal-dialog.modal-lg
     .modal-content
       .modal-header
         %a.close{ href: "#", "data-dismiss" => "modal" } 脳
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 05b7dfe287..21b6aa4bad 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -1,5 +1,5 @@
 #modal-upload-blob.modal
-  .modal-dialog
+  .modal-dialog.modal-lg
     .modal-content
       .modal-header
         %a.close{ href: "#", "data-dismiss" => "modal" } 脳
diff --git a/changelogs/unreleased/winh-style-modals.yml b/changelogs/unreleased/winh-style-modals.yml
new file mode 100644
index 0000000000..b7d0293960
--- /dev/null
+++ b/changelogs/unreleased/winh-style-modals.yml
@@ -0,0 +1,5 @@
+---
+title: Adjust modal style to new design
+merge_request: 16310
+author:
+type: other
-- 
2.30.9