monkey-style-guide 21.2.7 → 21.2.8

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

@@ -1,373 +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;
-}
+/**************************
+* 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;
+}