monkey-style-guide 2.0.192 → 2.0.194

package/assets/scss/partials/components/_snackbar.scss

@@ -1,204 +1,204 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-@import '../variables.scss';
-
-.mecx-snackbar {
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.mecx-snackbar-container {
-  @extend .mecx-snackbar;
-
-  &.center-top {
-    position: absolute;
-    z-index: 9999;
-    top: 0%;
-    left: 50%;
-    transform: translate(-50%, 0%);
-  }
-
-  &.left-top {
-    position: absolute;
-    z-index: 9999;
-    top: 0%;
-    left: 30px;
-  }
-
-  &.right-top {
-    position: absolute;
-    z-index: 9999;
-    top: 0%;
-    right: 30px;
-  }
-
-  &.center-bottom {
-    position: absolute;
-    z-index: 9999;
-    bottom: 0%;
-    left: 50%;
-    transform: translate(-50%, 0%);
-  }
-
-  &.left-bottom {
-    position: absolute;
-    z-index: 9999;
-    bottom: 0%;
-    left: 30px;
-  }
-
-  &.right-bottom {
-    position: absolute;
-    z-index: 9999;
-    bottom: 0%;
-    right: 30px;
-  }
-
-  &.normal {
-    color: #000000;
-    background: #f5f5f5;
-    border: 1px solid #d6d6d6;
-  }
-
-  &.warning {
-    color: map-get(map-get($mecx-warning, contrast), main);
-    border: 1px solid map-get($mecx-warning, main);
-    background: map-get($mecx-warning, 100);
-  }
-
-  &.success {
-    color: map-get(map-get($mecx-success, contrast), main);
-    border: 1px solid map-get($mecx-success, main);
-    background: map-get($mecx-success, 100);
-  }
-
-  &.error {
-    color: map-get(map-get($mecx-error, contrast), main);
-    border: 1px solid map-get($mecx-error, main);
-    background: map-get($mecx-error, 100);
-  }
-
-  &.question {
-    color: map-get(map-get($mecx-question, contrast), main);
-    border: 1px solid map-get($mecx-question, main);
-    background: map-get($mecx-question, 100);
-  }
-
-  &.loading {
-    color: #4d4d4d;
-    border: 1px solid map-get($mecx-warning, main);
-    background: #f1f1f1;
-
-    .circular-loader {
-      -webkit-animation: rotate 2s linear infinite;
-      animation: rotate 2s linear infinite;
-      -webkit-transform-origin: center center;
-      -ms-transform-origin: center center;
-      transform-origin: center center;
-      width: 25px;
-      margin: auto;
-    }
-
-    .loader-path {
-      stroke-dasharray: 150, 200;
-      stroke-dashoffset: -10;
-      -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-      animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-      stroke-linecap: round;
-    }
-
-    @-webkit-keyframes rotate {
-      100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-      }
-    }
-
-    @keyframes rotate {
-      100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
-      }
-    }
-  }
-
-  &.fade-out {
-    transition: 1s linear all;
-  }
-
-  &.hide {
-    opacity: 0;
-  }
-}
-
-.mecx-snackbar-container-body {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  align-self: flex-start;
-}
-
-.mecx-snackbar-container-body-icon {
-  width: 18px;
-  height: 18px;
-
-  monkey-icon {
-    position: absolute;
-  }
-}
-
-.mecx-snackbar-container-body-content {
-  position: relative;
-  margin-left: 10px;
-  width: 100%;
-}
-
-.mecx-snackbar-container-body-content-title {
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 19px;
-  color: #16151b;
-}
-
-.mecx-snackbar-container-body-content-message {
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 16px;
-  color: #16151b;
-  max-width: 450px;
-
-  .with-action {
-    margin-bottom: 30px;
-  }
-}
-
-.mecx-snackbar-container-body-content-action {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  width: 100%;
-  right: 0px;
-  bottom: 4px;
-  margin-top: 10px;
-  margin-right: 10px;
-
-  button {
-    text-align: center;
-    height: 32px;
-  }
-}
-
-.mecx-snackbar-container-body-content-action > *:first-child {
-  margin-right: 8px;
-}
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import '../variables.scss';
+
+.mecx-snackbar {
+  box-sizing: border-box;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.mecx-snackbar-container {
+  @extend .mecx-snackbar;
+
+  &.center-top {
+    position: absolute;
+    z-index: 9999;
+    top: 0%;
+    left: 50%;
+    transform: translate(-50%, 0%);
+  }
+
+  &.left-top {
+    position: absolute;
+    z-index: 9999;
+    top: 0%;
+    left: 30px;
+  }
+
+  &.right-top {
+    position: absolute;
+    z-index: 9999;
+    top: 0%;
+    right: 30px;
+  }
+
+  &.center-bottom {
+    position: absolute;
+    z-index: 9999;
+    bottom: 0%;
+    left: 50%;
+    transform: translate(-50%, 0%);
+  }
+
+  &.left-bottom {
+    position: absolute;
+    z-index: 9999;
+    bottom: 0%;
+    left: 30px;
+  }
+
+  &.right-bottom {
+    position: absolute;
+    z-index: 9999;
+    bottom: 0%;
+    right: 30px;
+  }
+
+  &.normal {
+    color: #000000;
+    background: #f5f5f5;
+    border: 1px solid #d6d6d6;
+  }
+
+  &.warning {
+    color: map-get(map-get($mecx-warning, contrast), main);
+    border: 1px solid map-get($mecx-warning, main);
+    background: map-get($mecx-warning, 100);
+  }
+
+  &.success {
+    color: map-get(map-get($mecx-success, contrast), main);
+    border: 1px solid map-get($mecx-success, main);
+    background: map-get($mecx-success, 100);
+  }
+
+  &.error {
+    color: map-get(map-get($mecx-error, contrast), main);
+    border: 1px solid map-get($mecx-error, main);
+    background: map-get($mecx-error, 100);
+  }
+
+  &.question {
+    color: map-get(map-get($mecx-question, contrast), main);
+    border: 1px solid map-get($mecx-question, main);
+    background: map-get($mecx-question, 100);
+  }
+
+  &.loading {
+    color: #4d4d4d;
+    border: 1px solid map-get($mecx-warning, main);
+    background: #f1f1f1;
+
+    .circular-loader {
+      -webkit-animation: rotate 2s linear infinite;
+      animation: rotate 2s linear infinite;
+      -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+      transform-origin: center center;
+      width: 25px;
+      margin: auto;
+    }
+
+    .loader-path {
+      stroke-dasharray: 150, 200;
+      stroke-dashoffset: -10;
+      -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+      animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+      stroke-linecap: round;
+    }
+
+    @-webkit-keyframes rotate {
+      100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes rotate {
+      100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+  }
+
+  &.fade-out {
+    transition: 1s linear all;
+  }
+
+  &.hide {
+    opacity: 0;
+  }
+}
+
+.mecx-snackbar-container-body {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-self: flex-start;
+}
+
+.mecx-snackbar-container-body-icon {
+  width: 18px;
+  height: 18px;
+
+  monkey-icon {
+    position: absolute;
+  }
+}
+
+.mecx-snackbar-container-body-content {
+  position: relative;
+  margin-left: 10px;
+  width: 100%;
+}
+
+.mecx-snackbar-container-body-content-title {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19px;
+  color: #16151b;
+}
+
+.mecx-snackbar-container-body-content-message {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 16px;
+  color: #16151b;
+  max-width: 450px;
+
+  .with-action {
+    margin-bottom: 30px;
+  }
+}
+
+.mecx-snackbar-container-body-content-action {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+  right: 0px;
+  bottom: 4px;
+  margin-top: 10px;
+  margin-right: 10px;
+
+  button {
+    text-align: center;
+    height: 32px;
+  }
+}
+
+.mecx-snackbar-container-body-content-action > *:first-child {
+  margin-right: 8px;
+}

package/assets/scss/partials/components/_stepper.scss

@@ -1,86 +1,86 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-@import '../variables.scss';
-
-.mecx-stepper {
-  width: 100%;
-  background-color: inherit;
-  padding: 0 8px;
-}
-
-monkey-stepper {
-  @extend .mecx-stepper;
-
-  .horizontal {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    align-self: center;
-    align-content: center;
-
-    .mecx-stepper-icon {
-      margin-left: 5px;
-      margin-right: 5px;
-    }
-  }
-
-  .vertical {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    align-self: center;
-    align-content: center;
-
-    .mecx-stepper-body {
-      flex-direction: column !important;
-    }
-  }
-
-  .mecx-stepper-option {
-    height: 8px;
-    width: 100%;
-    border-radius: 8px;
-
-    &__theme {
-      background: #d6d6d6;
-      box-sizing: border-box;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 14px;
-      line-height: 16px;
-      display: flex;
-      align-items: center;
-      text-align: center;
-
-      &.selected {
-        color: map-get(map-get($mecx-theme, contrast), main);
-        background: map-get($mecx-theme, main);
-      }
-
-      &.completed {
-        color: map-get(map-get($mecx-theme, contrast), main);
-        background: map-get($mecx-theme, 700);
-      }
-    }
-  }
-
-  .mecx-stepper-body {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    > * {
-      margin-right: 4px;
-    }
-  }
-}
-
-div.mecx-stepper-body:last-child .mecx-stepper-option-separator:last-child {
-  display: none;
-}
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import '../variables.scss';
+
+.mecx-stepper {
+  width: 100%;
+  background-color: inherit;
+  padding: 0 8px;
+}
+
+monkey-stepper {
+  @extend .mecx-stepper;
+
+  .horizontal {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-self: center;
+    align-content: center;
+
+    .mecx-stepper-icon {
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+  }
+
+  .vertical {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: center;
+    align-content: center;
+
+    .mecx-stepper-body {
+      flex-direction: column !important;
+    }
+  }
+
+  .mecx-stepper-option {
+    height: 8px;
+    width: 100%;
+    border-radius: 8px;
+
+    &__theme {
+      background: #d6d6d6;
+      box-sizing: border-box;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 14px;
+      line-height: 16px;
+      display: flex;
+      align-items: center;
+      text-align: center;
+
+      &.selected {
+        color: map-get(map-get($mecx-theme, contrast), main);
+        background: map-get($mecx-theme, main);
+      }
+
+      &.completed {
+        color: map-get(map-get($mecx-theme, contrast), main);
+        background: map-get($mecx-theme, 700);
+      }
+    }
+  }
+
+  .mecx-stepper-body {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > * {
+      margin-right: 4px;
+    }
+  }
+}
+
+div.mecx-stepper-body:last-child .mecx-stepper-option-separator:last-child {
+  display: none;
+}