monkey-style-guide 2.0.192 → 2.0.193

package/assets/scss/partials/components/_image-crop.scss

@@ -1,305 +1,305 @@
-$maxH: 1000px;
-@media (max-height: $maxH) {
-  .box-cut {
-    position: relative;
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100% !important;
-    max-height: $maxH - 400px !important;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    img.source-image {
-      width: 100%;
-      height: 100% !important;
-      max-height: $maxH - 400px !important;
-    }
-  }
-}
-
-$maxH: 900px;
-@media (max-height: $maxH) {
-  .box-cut {
-    position: relative;
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100% !important;
-    max-height: $maxH - 500px !important;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    img.source-image {
-      width: 100%;
-      height: 100% !important;
-      max-height: $maxH - 500px !important;
-    }
-  }
-}
-
-$maxH: 800px;
-@media (max-height: $maxH) {
-  .box-cut {
-    position: relative;
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100% !important;
-    max-height: $maxH - 200px !important;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    img.source-image {
-      width: 100%;
-      height: 100% !important;
-      max-height: $maxH - 200px !important;
-    }
-  }
-}
-
-$maxH: 700px;
-@media (max-height: $maxH) {
-  .box-cut {
-    position: relative;
-    width: 100% !important;
-    height: 100% !important;
-    max-width: 100% !important;
-    max-height: $maxH - 350px !important;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-    img.source-image {
-      width: 100%;
-      height: 100% !important;
-      max-height: $maxH - 350px !important;
-    }
-  }
-}
-
-monkey-image-crop {
-  width: 100%;
-
-  monkey-input {
-    width: 100%;
-  }
-}
-
-mecx-image-crop-upload-info {
-  width: 100%;
-  margin-top: -6px;
-  background-color: map-get($mecx-theme, 100);
-  z-index: 8;
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-  font-size: 10px;
-  display: flex;
-
-  & > span {
-    padding-top: 6px;
-    color: map-get(map-get($mecx-theme, contrast), main);
-    background: map-get($mecx-theme, main);
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
-}
-
-.box-cut-title {
-  font-style: normal;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 16px;
-  color: #9c9ca6;
-  max-width: 600px;
-  margin-bottom: 10px;
-}
-
-.box-cut-header {
-  display: flex;
-  justify-content: space-between;
-  max-width: 600px;
-  margin-bottom: 10px;
-}
-
-.cut {
-  position: absolute;
-  display: flex;
-  color: #53535c;
-  opacity: 1;
-  opacity: inherit !important;
-  touch-action: none;
-  z-index: 99;
-
-  .move {
-    width: 100%;
-    cursor: move;
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    background: #ebebeb;
-    opacity: 0.4;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 10px;
-    font-weight: 600;
-  }
-
-  .resize {
-    position: absolute;
-    display: inline-block;
-    line-height: 6px;
-    padding: 8px;
-    opacity: 0.85;
-    z-index: 99;
-
-    .square {
-      display: inline-block;
-      background: #53535c;
-      width: 6px;
-      height: 6px;
-      border: 1px solid rgba(255, 255, 255, 0.5);
-      box-sizing: content-box;
-    }
-
-    &.top-left {
-      top: -4px;
-      left: -4px;
-      cursor: nwse-resize;
-      border-top-style: solid !important;
-      border-top-color: #d6d6d6 !important;
-      border-top-width: 2px !important;
-      border-left-style: solid !important;
-      border-left-color: #d6d6d6 !important;
-      border-left-width: 2px !important;
-    }
-    &.top {
-      top: -4px;
-      left: calc(50% - 12px);
-      cursor: ns-resize;
-      border-top-style: solid !important;
-      border-top-color: #d6d6d6 !important;
-      border-top-width: 2px !important;
-    }
-    &.top-right {
-      top: -4px;
-      right: -4px;
-      cursor: nesw-resize;
-      border-top-style: solid !important;
-      border-top-color: #d6d6d6 !important;
-      border-top-width: 2px !important;
-      border-right-style: solid !important;
-      border-right-color: #d6d6d6 !important;
-      border-right-width: 2px !important;
-    }
-    &.right {
-      top: calc(50% - 12px);
-      right: -4px;
-      cursor: ew-resize;
-      border-right-style: solid !important;
-      border-right-color: #d6d6d6 !important;
-      border-right-width: 2px !important;
-    }
-    &.bottom-right {
-      bottom: -4px;
-      right: -4px;
-      cursor: nwse-resize;
-      border-bottom-style: solid !important;
-      border-bottom-color: #d6d6d6 !important;
-      border-bottom-width: 2px !important;
-      border-right-style: solid !important;
-      border-right-color: #d6d6d6 !important;
-      border-right-width: 2px !important;
-    }
-    &.bottom {
-      bottom: -4px;
-      left: calc(50% - 12px);
-      cursor: ns-resize;
-      border-bottom-style: solid !important;
-      border-bottom-color: #d6d6d6 !important;
-      border-bottom-width: 2px !important;
-    }
-    &.bottom-left {
-      bottom: -4px;
-      left: -4px;
-      cursor: nesw-resize;
-      border-bottom-style: solid !important;
-      border-bottom-color: #d6d6d6 !important;
-      border-bottom-width: 2px !important;
-      border-left-style: solid !important;
-      border-left-color: #d6d6d6 !important;
-      border-left-width: 2px !important;
-    }
-    &.left {
-      top: calc(50% - 12px);
-      left: -4px;
-      cursor: ew-resize;
-      border-left-style: solid !important;
-      border-left-color: #d6d6d6 !important;
-      border-left-width: 2px !important;
-    }
-  }
-  .resize-bar {
-    position: absolute;
-    z-index: 1;
-
-    &.top {
-      top: -11px;
-      left: 11px;
-      width: calc(100% - 22px);
-      height: 22px;
-      cursor: ns-resize;
-    }
-    &.right {
-      top: 11px;
-      right: -11px;
-      height: calc(100% - 22px);
-      width: 22px;
-      cursor: ew-resize;
-    }
-    &.bottom {
-      bottom: -11px;
-      left: 11px;
-      width: calc(100% - 22px);
-      height: 22px;
-      cursor: ns-resize;
-    }
-    &.left {
-      top: 11px;
-      left: -11px;
-      height: calc(100% - 22px);
-      width: 22px;
-      cursor: ew-resize;
-    }
-  }
-
-  &.rounded {
-    outline-color: transparent;
-
-    &:after {
-      border-radius: 100%;
-      box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.3);
-
-      @media (orientation: portrait) {
-        box-shadow: 0 0 0 100vh rgba(255, 255, 255, 0.3);
-      }
-    }
-    .move {
-      border-radius: 100%;
-    }
-  }
-}
-
-.list-files {
-  max-height: 100px !important;
-}
-
-.position-center {
-  align-content: center;
-  justify-content: center !important;
-  align-items: center !important;
-  text-align: center !important;
-}
-
-.max-h-60 {
-  min-height: 50px !important;
-}
+$maxH: 1000px;
+@media (max-height: $maxH) {
+  .box-cut {
+    position: relative;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: $maxH - 400px !important;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    img.source-image {
+      width: 100%;
+      height: 100% !important;
+      max-height: $maxH - 400px !important;
+    }
+  }
+}
+
+$maxH: 900px;
+@media (max-height: $maxH) {
+  .box-cut {
+    position: relative;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: $maxH - 500px !important;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    img.source-image {
+      width: 100%;
+      height: 100% !important;
+      max-height: $maxH - 500px !important;
+    }
+  }
+}
+
+$maxH: 800px;
+@media (max-height: $maxH) {
+  .box-cut {
+    position: relative;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: $maxH - 200px !important;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    img.source-image {
+      width: 100%;
+      height: 100% !important;
+      max-height: $maxH - 200px !important;
+    }
+  }
+}
+
+$maxH: 700px;
+@media (max-height: $maxH) {
+  .box-cut {
+    position: relative;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: $maxH - 350px !important;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    img.source-image {
+      width: 100%;
+      height: 100% !important;
+      max-height: $maxH - 350px !important;
+    }
+  }
+}
+
+monkey-image-crop {
+  width: 100%;
+
+  monkey-input {
+    width: 100%;
+  }
+}
+
+mecx-image-crop-upload-info {
+  width: 100%;
+  margin-top: -6px;
+  background-color: map-get($mecx-theme, 100);
+  z-index: 8;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  font-size: 10px;
+  display: flex;
+
+  & > span {
+    padding-top: 6px;
+    color: map-get(map-get($mecx-theme, contrast), main);
+    background: map-get($mecx-theme, main);
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+}
+
+.box-cut-title {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 16px;
+  color: #9c9ca6;
+  max-width: 600px;
+  margin-bottom: 10px;
+}
+
+.box-cut-header {
+  display: flex;
+  justify-content: space-between;
+  max-width: 600px;
+  margin-bottom: 10px;
+}
+
+.cut {
+  position: absolute;
+  display: flex;
+  color: #53535c;
+  opacity: 1;
+  opacity: inherit !important;
+  touch-action: none;
+  z-index: 99;
+
+  .move {
+    width: 100%;
+    cursor: move;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    background: #ebebeb;
+    opacity: 0.4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  .resize {
+    position: absolute;
+    display: inline-block;
+    line-height: 6px;
+    padding: 8px;
+    opacity: 0.85;
+    z-index: 99;
+
+    .square {
+      display: inline-block;
+      background: #53535c;
+      width: 6px;
+      height: 6px;
+      border: 1px solid rgba(255, 255, 255, 0.5);
+      box-sizing: content-box;
+    }
+
+    &.top-left {
+      top: -4px;
+      left: -4px;
+      cursor: nwse-resize;
+      border-top-style: solid !important;
+      border-top-color: #d6d6d6 !important;
+      border-top-width: 2px !important;
+      border-left-style: solid !important;
+      border-left-color: #d6d6d6 !important;
+      border-left-width: 2px !important;
+    }
+    &.top {
+      top: -4px;
+      left: calc(50% - 12px);
+      cursor: ns-resize;
+      border-top-style: solid !important;
+      border-top-color: #d6d6d6 !important;
+      border-top-width: 2px !important;
+    }
+    &.top-right {
+      top: -4px;
+      right: -4px;
+      cursor: nesw-resize;
+      border-top-style: solid !important;
+      border-top-color: #d6d6d6 !important;
+      border-top-width: 2px !important;
+      border-right-style: solid !important;
+      border-right-color: #d6d6d6 !important;
+      border-right-width: 2px !important;
+    }
+    &.right {
+      top: calc(50% - 12px);
+      right: -4px;
+      cursor: ew-resize;
+      border-right-style: solid !important;
+      border-right-color: #d6d6d6 !important;
+      border-right-width: 2px !important;
+    }
+    &.bottom-right {
+      bottom: -4px;
+      right: -4px;
+      cursor: nwse-resize;
+      border-bottom-style: solid !important;
+      border-bottom-color: #d6d6d6 !important;
+      border-bottom-width: 2px !important;
+      border-right-style: solid !important;
+      border-right-color: #d6d6d6 !important;
+      border-right-width: 2px !important;
+    }
+    &.bottom {
+      bottom: -4px;
+      left: calc(50% - 12px);
+      cursor: ns-resize;
+      border-bottom-style: solid !important;
+      border-bottom-color: #d6d6d6 !important;
+      border-bottom-width: 2px !important;
+    }
+    &.bottom-left {
+      bottom: -4px;
+      left: -4px;
+      cursor: nesw-resize;
+      border-bottom-style: solid !important;
+      border-bottom-color: #d6d6d6 !important;
+      border-bottom-width: 2px !important;
+      border-left-style: solid !important;
+      border-left-color: #d6d6d6 !important;
+      border-left-width: 2px !important;
+    }
+    &.left {
+      top: calc(50% - 12px);
+      left: -4px;
+      cursor: ew-resize;
+      border-left-style: solid !important;
+      border-left-color: #d6d6d6 !important;
+      border-left-width: 2px !important;
+    }
+  }
+  .resize-bar {
+    position: absolute;
+    z-index: 1;
+
+    &.top {
+      top: -11px;
+      left: 11px;
+      width: calc(100% - 22px);
+      height: 22px;
+      cursor: ns-resize;
+    }
+    &.right {
+      top: 11px;
+      right: -11px;
+      height: calc(100% - 22px);
+      width: 22px;
+      cursor: ew-resize;
+    }
+    &.bottom {
+      bottom: -11px;
+      left: 11px;
+      width: calc(100% - 22px);
+      height: 22px;
+      cursor: ns-resize;
+    }
+    &.left {
+      top: 11px;
+      left: -11px;
+      height: calc(100% - 22px);
+      width: 22px;
+      cursor: ew-resize;
+    }
+  }
+
+  &.rounded {
+    outline-color: transparent;
+
+    &:after {
+      border-radius: 100%;
+      box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.3);
+
+      @media (orientation: portrait) {
+        box-shadow: 0 0 0 100vh rgba(255, 255, 255, 0.3);
+      }
+    }
+    .move {
+      border-radius: 100%;
+    }
+  }
+}
+
+.list-files {
+  max-height: 100px !important;
+}
+
+.position-center {
+  align-content: center;
+  justify-content: center !important;
+  align-items: center !important;
+  text-align: center !important;
+}
+
+.max-h-60 {
+  min-height: 50px !important;
+}

package/assets/scss/partials/components/_index.scss

@@ -1,24 +1,24 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
-**************************/
-@import 'badge';
-@import 'input';
-@import 'input-phone';
-@import 'select';
-@import 'buttons';
-@import 'checkbox';
-@import 'date-range-picker';
-@import 'date-range-picker-v2';
-@import 'radiobutton';
-@import 'wizard';
-@import 'snackbar';
-@import 'progressbar';
-@import 'image-crop';
-@import 'modal';
-@import 'expansion';
-@import 'toggle';
-@import 'tab';
-@import 'table';
-@import 'stepper';
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+**************************/
+@import 'badge';
+@import 'input';
+@import 'input-phone';
+@import 'select';
+@import 'buttons';
+@import 'checkbox';
+@import 'date-range-picker';
+@import 'date-range-picker-v2';
+@import 'radiobutton';
+@import 'wizard';
+@import 'snackbar';
+@import 'progressbar';
+@import 'image-crop';
+@import 'modal';
+@import 'expansion';
+@import 'toggle';
+@import 'tab';
+@import 'table';
+@import 'stepper';