add modal global style, fix some modal

4 files changed, 84 insertions, 5 deletions

diff --git a/src/assets/images/_sila/chevron-down.svg b/src/assets/images/_sila/chevron-down.svg
new file mode 100644
index 00000000..ee70185f
--- /dev/null
+++ b/src/assets/images/_sila/chevron-down.svg
@@ -0,0 +1,9 @@
+<svg version="1.1" id="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<polygon points="16,22 6,12 7.4,10.6 16,19.2 24.6,10.6 26,12 "/>
+<rect id="_x3C_Transparent_Rectangle_x3E_" class="st0" width="32" height="32"/>
+</svg>
+
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 9288bb42..79d1726f 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -40,6 +40,11 @@
   }
 }
 
+.custom-select {
+  background-image: url('~@/assets/images/_sila/chevron-down.svg');
+  background-size: 18px;
+}
+
 .form-control::-webkit-outer-spin-button,
 .form-control::-webkit-inner-spin-button {
   -webkit-appearance: none;
diff --git a/src/assets/styles/bmc/_sila/_modal.scss b/src/assets/styles/bmc/_sila/_modal.scss
index e2fa0cd8..91412338 100644
--- a/src/assets/styles/bmc/_sila/_modal.scss
+++ b/src/assets/styles/bmc/_sila/_modal.scss
@@ -1,12 +1,77 @@
+.modal-dialog {
+  margin: 20vh auto 0;
+}
+
+.modal-content {
+  border-radius: $border-radius;
+}
+
 .modal-header {
+  border-bottom: none;
+
   .close {
+    padding: 0 1.4rem 0 0;
+    margin-top: -2rem;
     font-weight: normal;
     color: theme-color("dark");
     opacity: 1;
-  }
+    &:hover {
+      background-color: none;
+    }
+    }
   .modal-title {
-    font-size: 1.25rem;
-    font-weight: normal;
+    font-size: 1.25rem !important;
+    font-weight: 500;
     line-height: 1.3;
   }
 }
+
+.modal-header {
+  align-items: center;
+}
+
+.modal-body {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.file-input_container >
+.custom-file {
+  height: 100%;
+}
+
+  .custom-file-input ~ .custom-file-label {
+    background-color: transparent;
+  border: 1px dashed rgba(12, 28, 41, 0.6);
+  box-sizing: border-box;
+  border-radius: $border-radius;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: normal;
+  justify-content: center;
+}
+
+
+.custom-file-input ~ .custom-file-label::after {
+  display: none;
+}
+
+#modal-reset {
+  .modal-body {
+    flex-direction: column;
+  }
+  .modal-footer {
+    flex-wrap: nowrap;
+  }
+}
+
+#modal-dns,
+#configure-connection {
+  .modal-body {
+    > form {
+      width: 100%;
+    }
+  }
+} 
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index c87c4e0c..fe57012b 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -17,8 +17,8 @@ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
 $grid-breakpoints: (
   xs: 0,
-  sm: 480px,
-  md: 640px,
+  sm: 576px,
+  md: 768px,
   lg: 992px,
   xl: 1920px
 );
\ No newline at end of file