AO-874: Changed logos and auth modal body position

OpenLMIS-Angola · Jul 12, 2024 · 72bdf8a · 72bdf8a
1 parent 048714b
commit 72bdf8a
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 0 deletions.
diff --git a/src/branding-angola/logo-header.png b/src/branding-angola/logo-header.png
diff --git a/src/branding-angola/logo.png b/src/branding-angola/logo.png
diff --git a/src/openlmis-auth/_auth-modal.scss b/src/openlmis-auth/_auth-modal.scss
@@ -0,0 +1,95 @@
+.auth-modal {
+    background-color: $dark-gray;
+
+    .modal-content {
+        background-image: linear-gradient(to bottom, $white 0%, $white 48%, $light-gray 100%);
+    }
+
+    .modal-dialog {
+        margin-top: 15%;
+        @media screen and (min-width: $res-md) {
+            width: 700px;
+        }
+        @media screen and (max-width: $res-md) {
+            margin-right: 3%;
+            margin-left: 3%;
+        }
+        max-width: 700px;
+    }
+
+    .modal-header {
+        align-items: center;
+        background-image: linear-gradient(to bottom, $white 30%, $light-gray 100%);
+        border-bottom: 1px solid $light-gray;
+        border-radius: $border-radius $border-radius 0 0;
+        display: flex;
+        padding: 0.5em 1em !important;
+        overflow: hidden;
+
+        & > h1 {
+            margin-right: auto;
+            word-break: normal !important;
+        }
+
+        button {
+            margin: 0px 1em;
+            min-width: 92px;
+            @media screen and (max-width: $res-xs) {
+                display: flex;
+                min-width: 12px;
+            }
+        }
+    }
+
+    .modal-body {
+        background-image: url("../assets/common/openlmis-logo-stacked.svg");
+        background-size: 40% auto;
+        background-position: 2em 45%;
+        background-repeat: no-repeat;
+        @media screen and (max-width: $res-sm) {
+            background-size: 30% auto;
+        }
+        // AO-874: Changed auth modal body position
+        padding: 20% 25% 1em 25% !important;
+        // AO-874: ends here
+        & > .form-desc,
+        & > form > fieldset {
+            width: 100%;
+        }
+
+        & > form > .alert {
+            flex: initial;
+        }
+        & > form > .input-control{
+            width: 100%;
+        }
+        .form-group .input-control{
+            @media screen and (max-width: $res-sm) {
+                width: 100%;
+            }
+        }
+
+        .button-group {
+            @media screen and (max-width: $res-sm) {
+                overflow: hidden;
+                display: grid;
+            }
+            @media screen and (max-width: $res-xs) {
+                position: relative;
+                right: 0px;
+                bottom: 0px;
+            }
+        }
+    }
+
+    .modal-footer {
+        border-top: none;
+        text-align: right;
+        padding: 0 !important;
+        margin: 0;
+        display: flex;
+        justify-content: flex-end;
+
+        color: $gray;
+    }
+}