monkey-style-guide 2.0.211 → 21.0.0

package/assets/scss/partials/_helper-classes.scss

@@ -0,0 +1,373 @@
+/**************************
+* Copyright Monkey Exchange. All Rights Reserved
+* This style guide was developed by Monkey Exchange Team
+* MIT Licence
+**************************/
+/* stylelint-disable color-no-hex */
+/* stylelint-disable selector-class-pattern */
+@use 'variables' as *;
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--mecx-color-white);
+}
+
+:root {
+  background-color: var(--mecx-color-white);
+
+  @each $key, $value in $mecx-error {
+    --mecx-color-error-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-warning {
+    --mecx-color-warning-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-success {
+    --mecx-color-success-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-question {
+    --mecx-color-question-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-support {
+    --mecx-color-support-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-gray {
+    --mecx-color-gray-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-spaces {
+    --mecx-spaces-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-weight {
+    --mecx-fw-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-lh {
+    --mecx-lh-#{$key}: #{$value};
+  }
+
+  @each $key, $value in $mecx-sizes {
+    --mecx-fs-#{$key}: #{$value};
+  }
+
+  --mecx-color-box-shadow: #00000029;
+  --mecx-color-info: #003687;
+  --mecx-color-link: #06c;
+  --mecx-color-white: #fff;
+  --mecx-color-overlay: #00000052;
+}
+
+@each $key, $value in $mecx-gray {
+  .text-gray-#{$key} {
+    color: $value !important;
+  }
+
+  .bg-gray-#{$key} {
+    background-color: $value !important;
+  }
+}
+
+@each $key, $value in $mecx-weight {
+  .fw-#{$key} {
+    font-weight: $value !important;
+  }
+}
+
+@each $key, $value in $mecx-lh {
+  .lh-#{$key} {
+    line-height: $value !important;
+  }
+}
+
+@each $key, $value in $mecx-sizes {
+  .fs-#{$key} {
+    font-size: $value !important;
+  }
+}
+
+@each $key, $value in $mecx-theme {
+  .text-theme-#{$key} {
+    color: $value !important;
+  }
+
+  .bg-theme-#{$key} {
+    background-color: $value !important;
+  }
+}
+
+@each $key, $value in $mecx-success {
+  .text-success-#{$key} {
+    color: $value !important;
+  }
+
+  .bg-success-#{$key} {
+    background-color: $value !important;
+  }
+}
+
+@each $key, $value in $mecx-error {
+  .text-error-#{$key} {
+    color: $value !important;
+  }
+
+  .bg-error-#{$key} {
+    background-color: $value !important;
+  }
+}
+
+@each $key, $value in $mecx-warning {
+  .text-warning-#{$key} {
+    color: $value !important;
+  }
+
+  .bg-warning-#{$key} {
+    background-color: $value !important;
+  }
+}
+
+@each $key, $value in $mecx-question {
+  .text-question-#{$key} {
+    color: $value !important;
+  }
+
+  .bg-question-#{$key} {
+    background-color: $value !important;
+  }
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-justify {
+  text-align: justify !important;
+}
+
+.text-upper {
+  text-transform: uppercase !important;
+}
+
+.text-lower {
+  text-transform: lowercase !important;
+}
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-underline {
+  text-decoration: underline !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+
+.opacity-0 {
+  opacity: 0 !important;
+}
+
+.opacity-25 {
+  opacity: 0.25 !important;
+}
+
+.opacity-50 {
+  opacity: 0.5 !important;
+}
+
+.opacity-75 {
+  opacity: 0.75 !important;
+}
+
+.opacity-100 {
+  opacity: 1 !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+.overflow-x-auto {
+  overflow-x: auto !important;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden !important;
+}
+
+.overflow-x-visible {
+  overflow-x: visible !important;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll !important;
+}
+
+.overflow-y-auto {
+  overflow-y: auto !important;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden !important;
+}
+
+.overflow-y-visible {
+  overflow-y: visible !important;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll !important;
+}
+
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: sticky !important;
+}
+
+.w-25 {
+  width: 25% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+.mw-100 {
+  max-width: 100% !important;
+}
+
+.vw-100 {
+  width: 100vw !important;
+}
+
+.min-vw-100 {
+  min-width: 100vw !important;
+}
+
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+.mh-100 {
+  max-height: 100% !important;
+}
+
+.vh-100 {
+  height: 100vh !important;
+}
+
+.min-vh-100 {
+  min-height: 100vh !important;
+}
+
+.gap-0 {
+  gap: 0 !important;
+}
+
+.gap-1 {
+  gap: 0.25rem !important;
+}
+
+.gap-2 {
+  gap: 0.5rem !important;
+}
+
+.gap-3 {
+  gap: 1rem !important;
+}
+
+.gap-4 {
+  gap: 1.5rem !important;
+}
+
+.gap-5 {
+  gap: 3rem !important;
+}

package/assets/scss/partials/_index.scss

@@ -1,12 +1,13 @@
 /**************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
+ * MIT Licence
 **************************/
-@import 'style-reset';
-@import 'variables.scss';
-//@import 'icons.scss';
-@import 'forms.scss';
-@import 'typography.scss';
-@import 'loading.scss';
-@import 'components';
+@use 'style-reset';
+@use 'variables';
+@use 'breakpoints';
+@use 'grid-system';
+@use 'scrollbars';
+@use 'skeleton-loading';
+@use 'helper-classes';
+@use 'popover';

package/assets/scss/partials/_popover.scss

@@ -0,0 +1,3 @@
+monkey-popover-content {
+  margin-top: 3px;
+}

package/assets/scss/partials/_scrollbars.scss

@@ -0,0 +1,29 @@
+/* stylelint-disable color-no-hex */
+
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+**************************/
+body:not(.is-mobile) {
+  ::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    background-color: #0000;
+  }
+
+  ::-webkit-scrollbar:hover {
+    background-color: #0000001f;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    box-shadow: inset 0 0 0 12px #0000005e;
+    border-radius: 12px;
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    box-shadow: inset 0 0 0 12px #0000008a;
+    border-radius: 12px;
+  }
+}

package/assets/scss/partials/_skeleton-loading.scss

@@ -0,0 +1,95 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+**************************/
+%skeleton {
+  animation: skeleton-loading 1s linear infinite alternate;
+  display: block;
+  border-radius: 4px;
+  width: 100%;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: hsl(200deg 20% 85%);
+  }
+
+  100% {
+    background-color: hsl(200deg 20% 95%);
+  }
+}
+
+.text-loading-xxs {
+  @extend %skeleton;
+
+  border-radius: 2px;
+  margin: 2px 0;
+  height: 8px;
+}
+
+.text-loading-xs {
+  @extend %skeleton;
+
+  border-radius: 2px;
+  margin: 2px 0;
+  height: 9px;
+}
+
+.text-loading-sm {
+  @extend %skeleton;
+
+  border-radius: 2px;
+  margin: 2px 0;
+  height: 10px;
+}
+
+.text-loading-md {
+  @extend %skeleton;
+
+  border-radius: 2px;
+  margin: 2px 0;
+  height: 12px;
+}
+
+.text-loading-lg {
+  @extend %skeleton;
+
+  margin: 2px 0;
+  height: 20px;
+}
+
+.text-loading-xl {
+  @extend %skeleton;
+
+  margin: 2px 0;
+  height: 28px;
+}
+
+.text-loading-xxl {
+  @extend %skeleton;
+
+  margin: 2px 0;
+  height: 44px;
+}
+
+.loading-sm {
+  @extend %skeleton;
+
+  border-radius: 12px;
+  height: 32px;
+}
+
+.loading-md {
+  @extend %skeleton;
+
+  border-radius: 12px;
+  height: 40px;
+}
+
+.loading-lg {
+  @extend %skeleton;
+
+  border-radius: 12px;
+  height: 48px;
+}

package/assets/scss/partials/_style-reset.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable color-no-hex */
+
 /*
 html5doctor.com Reset Stylesheet
 v1.6.1
@@ -111,11 +113,11 @@ q {
   quotes: none;
 }
 
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: '';
   content: none;
 }
 
@@ -162,7 +164,7 @@ hr {
   display: block;
   height: 1px;
   border: 0;
-  border-top: 1px solid #cccccc;
+  border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0;
 }
@@ -178,6 +180,10 @@ select:focus {
   outline: none;
 }
 
+button {
+  border: none;
+}
+
 button:focus,
 button:active,
 button:hover {