monkey-style-guide 2.0.109 → 2.0.110

package/assets/scss/partials/components/_modal.scss

@@ -1,282 +1,282 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-@import '../variables.scss';
-
-monkey-modal {
-  mecx-monkey-modal {
-    position: fixed;
-    width: 100%;
-    max-height: 80%;
-    z-index: 1000;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    padding: 12px;
-
-    .header {
-      text-align: center;
-      min-height: 40px;
-      max-height: 100px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .close {
-        font-style: normal;
-        font-weight: 600;
-        font-size: 20px;
-        line-height: 24px;
-        text-align: center;
-        color: #4b4a53;
-        cursor: pointer;
-        width: 25px;
-        height: 30px;
-        padding: 1px;
-
-        &:hover {
-          background: #e4e4e4;
-          border-radius: 14px;
-          box-shadow: 0px 4px 36px -8px rgba(88, 88, 88, 0.28);
-        }
-      }
-    }
-
-    .body {
-      max-height: 70vh;
-      overflow-y: auto;
-      overflow-x: hidden;
-      margin-bottom: 70px;
-    }
-
-    mecx-monkey-modal-footer {
-      bottom: 0;
-      background: #fafafa;
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
-      display: flex;
-      width: 100%;
-    }
-
-    .mecx-monkey-modal-footer {
-      &__theme {
-        background: #fafafa;
-      }
-
-      &__error {
-        background: map-get($mecx-error, 100);
-      }
-
-      &__warning {
-        background: map-get($mecx-warning, 100);
-      }
-
-      &__success {
-        background: map-get($mecx-success, 100);
-      }
-
-      &__question {
-        background: map-get($mecx-question, 100);
-      }
-
-      &__size-sm {
-        monkey-button:first-child {
-          width: 100%;
-          margin-left: 12px;
-          margin-right: 12px;
-
-          button {
-            text-align: center;
-            width: 100%;
-          }
-        }
-
-        monkey-button:last-child {
-          width: 100%;
-          margin-left: 12px;
-          margin-right: 12px;
-
-          button {
-            text-align: center;
-            width: 100%;
-          }
-        }
-
-        monkey-button:first-child {
-          margin-top: 12px !important;
-        }
-      }
-
-      &__size-md {
-        monkey-button {
-          width: 100%;
-          margin-bottom: 12px;
-
-          button {
-            text-align: center;
-            width: 100%;
-          }
-        }
-
-        monkey-button:not(:first-child) {
-          margin-left: 4px !important;
-        }
-
-        monkey-button:first-child {
-          margin-left: 26px !important;
-        }
-
-        monkey-button:last-child {
-          margin-right: 26px !important;
-        }
-      }
-
-      &__size-lg {
-        justify-content: flex-end;
-        monkey-button {
-          margin-bottom: 12px;
-
-          button {
-            text-align: center;
-            width: 100%;
-          }
-        }
-
-        monkey-button:first-child {
-          margin-left: 4px;
-          margin-right: 4px;
-
-          button {
-            text-align: center;
-            width: 100%;
-          }
-        }
-
-        monkey-button:last-child {
-          margin-left: 4px;
-          margin-right: 14px !important;
-
-          button {
-            text-align: center;
-            width: 100%;
-          }
-        }
-      }
-
-      &__row {
-        flex-direction: row;
-        margin-top: 4px;
-        position: inherit;
-        bottom: 0;
-        left: 0;
-
-        monkey-button:not(:first-child) {
-          margin-left: 4px !important;
-
-          button {
-            text-align: center;
-            width: 100%;
-          }
-        }
-      }
-
-      &__column {
-        flex-direction: column;
-        margin-top: 4px;
-        bottom: 0;
-        left: 0;
-
-        monkey-button {
-          margin-left: 0px !important;
-          margin-right: 0px !important;
-          margin-top: 4px;
-
-          button {
-            text-align: center;
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  .mecx-monkey-modal {
-    &__theme {
-      background: #fafafa;
-      border: 1px solid #d6d6d6;
-      box-sizing: border-box;
-      box-shadow: 0px 4px 36px -8px rgba(88, 88, 88, 0.28);
-      border-radius: 8px;
-    }
-
-    &__error {
-      background: map-get($mecx-error, 100);
-      border: 1px solid map-get($mecx-error, main);
-      box-sizing: border-box;
-      border-radius: 8px;
-    }
-
-    &__warning {
-      background: map-get($mecx-warning, 100);
-      border: 1px solid map-get($mecx-warning, main);
-      box-sizing: border-box;
-      border-radius: 8px;
-    }
-
-    &__success {
-      background: map-get($mecx-success, 100);
-      border: 1px solid map-get($mecx-success, main);
-      box-sizing: border-box;
-      border-radius: 8px;
-    }
-
-    &__question {
-      background: map-get($mecx-question, 100);
-      border: 1px solid map-get($mecx-question, main);
-      box-sizing: border-box;
-      border-radius: 8px;
-    }
-
-    &__size-sm {
-      max-width: 400px;
-
-      .body {
-        max-height: 55vh;
-        overflow-y: auto;
-        overflow-x: hidden;
-        margin-bottom: 0px !important;
-      }
-
-      monkey-modal mecx-monkey-modal mecx-monkey-modal-body {
-        margin-bottom: 150px !important;
-      }
-    }
-
-    &__size-md {
-      max-width: 700px;
-      //max-height: 80%;
-    }
-
-    &__size-lg {
-      width: 80%;
-      //max-height: 80%;
-    }
-  }
-}
-
-mecx-monkey-modal-background {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(27, 27, 27, 0.52);
-  backdrop-filter: blur(3px);
-  z-index: 900;
-}
-
-body.mecx-monkey-open {
-  overflow: hidden;
-}
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import '../variables.scss';
+
+monkey-modal {
+  mecx-monkey-modal {
+    position: fixed;
+    width: 100%;
+    max-height: 80%;
+    z-index: 1000;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    padding: 12px;
+
+    .header {
+      text-align: center;
+      min-height: 40px;
+      max-height: 100px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .close {
+        font-style: normal;
+        font-weight: 600;
+        font-size: 20px;
+        line-height: 24px;
+        text-align: center;
+        color: #4b4a53;
+        cursor: pointer;
+        width: 25px;
+        height: 30px;
+        padding: 1px;
+
+        &:hover {
+          background: #e4e4e4;
+          border-radius: 14px;
+          box-shadow: 0px 4px 36px -8px rgba(88, 88, 88, 0.28);
+        }
+      }
+    }
+
+    .body {
+      max-height: 70vh;
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-bottom: 70px;
+    }
+
+    mecx-monkey-modal-footer {
+      bottom: 0;
+      background: #fafafa;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+      display: flex;
+      width: 100%;
+    }
+
+    .mecx-monkey-modal-footer {
+      &__theme {
+        background: #fafafa;
+      }
+
+      &__error {
+        background: map-get($mecx-error, 100);
+      }
+
+      &__warning {
+        background: map-get($mecx-warning, 100);
+      }
+
+      &__success {
+        background: map-get($mecx-success, 100);
+      }
+
+      &__question {
+        background: map-get($mecx-question, 100);
+      }
+
+      &__size-sm {
+        monkey-button:first-child {
+          width: 100%;
+          margin-left: 12px;
+          margin-right: 12px;
+
+          button {
+            text-align: center;
+            width: 100%;
+          }
+        }
+
+        monkey-button:last-child {
+          width: 100%;
+          margin-left: 12px;
+          margin-right: 12px;
+
+          button {
+            text-align: center;
+            width: 100%;
+          }
+        }
+
+        monkey-button:first-child {
+          margin-top: 12px !important;
+        }
+      }
+
+      &__size-md {
+        monkey-button {
+          width: 100%;
+          margin-bottom: 12px;
+
+          button {
+            text-align: center;
+            width: 100%;
+          }
+        }
+
+        monkey-button:not(:first-child) {
+          margin-left: 4px !important;
+        }
+
+        monkey-button:first-child {
+          margin-left: 26px !important;
+        }
+
+        monkey-button:last-child {
+          margin-right: 26px !important;
+        }
+      }
+
+      &__size-lg {
+        justify-content: flex-end;
+        monkey-button {
+          margin-bottom: 12px;
+
+          button {
+            text-align: center;
+            width: 100%;
+          }
+        }
+
+        monkey-button:first-child {
+          margin-left: 4px;
+          margin-right: 4px;
+
+          button {
+            text-align: center;
+            width: 100%;
+          }
+        }
+
+        monkey-button:last-child {
+          margin-left: 4px;
+          margin-right: 14px !important;
+
+          button {
+            text-align: center;
+            width: 100%;
+          }
+        }
+      }
+
+      &__row {
+        flex-direction: row;
+        margin-top: 4px;
+        position: inherit;
+        bottom: 0;
+        left: 0;
+
+        monkey-button:not(:first-child) {
+          margin-left: 4px !important;
+
+          button {
+            text-align: center;
+            width: 100%;
+          }
+        }
+      }
+
+      &__column {
+        flex-direction: column;
+        margin-top: 4px;
+        bottom: 0;
+        left: 0;
+
+        monkey-button {
+          margin-left: 0px !important;
+          margin-right: 0px !important;
+          margin-top: 4px;
+
+          button {
+            text-align: center;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .mecx-monkey-modal {
+    &__theme {
+      background: #fafafa;
+      border: 1px solid #d6d6d6;
+      box-sizing: border-box;
+      box-shadow: 0px 4px 36px -8px rgba(88, 88, 88, 0.28);
+      border-radius: 8px;
+    }
+
+    &__error {
+      background: map-get($mecx-error, 100);
+      border: 1px solid map-get($mecx-error, main);
+      box-sizing: border-box;
+      border-radius: 8px;
+    }
+
+    &__warning {
+      background: map-get($mecx-warning, 100);
+      border: 1px solid map-get($mecx-warning, main);
+      box-sizing: border-box;
+      border-radius: 8px;
+    }
+
+    &__success {
+      background: map-get($mecx-success, 100);
+      border: 1px solid map-get($mecx-success, main);
+      box-sizing: border-box;
+      border-radius: 8px;
+    }
+
+    &__question {
+      background: map-get($mecx-question, 100);
+      border: 1px solid map-get($mecx-question, main);
+      box-sizing: border-box;
+      border-radius: 8px;
+    }
+
+    &__size-sm {
+      max-width: 400px;
+
+      .body {
+        max-height: 55vh;
+        overflow-y: auto;
+        overflow-x: hidden;
+        margin-bottom: 0px !important;
+      }
+
+      monkey-modal mecx-monkey-modal mecx-monkey-modal-body {
+        margin-bottom: 150px !important;
+      }
+    }
+
+    &__size-md {
+      max-width: 700px;
+      //max-height: 80%;
+    }
+
+    &__size-lg {
+      width: 80%;
+      //max-height: 80%;
+    }
+  }
+}
+
+mecx-monkey-modal-background {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(27, 27, 27, 0.52);
+  backdrop-filter: blur(3px);
+  z-index: 900;
+}
+
+body.mecx-monkey-open {
+  overflow: hidden;
+}