monkey-style-guide 2.0.212 → 21.0.1

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

@@ -1,305 +0,0 @@
-$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 +0,0 @@
-/**************************
- * 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';

package/assets/scss/partials/components/_input-phone.scss

@@ -1,36 +0,0 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-@import '../variables';
-@import '../breakpoints.scss';
-//@import './select.scss';
-
-monkey-input-phone {
-  mecx-form-field mecx-form-field-body {
-    height: 48px;
-  }
-
-  monkey-select {
-    width: unset !important;
-
-    mecx-form-field mecx-form-field-body {
-      width: unset !important;
-      border: unset !important;
-      height: 46px !important;
-    }
-
-    mecx-form-field mecx-form-field-header {
-      display: none !important;
-    }
-
-    mecx-form-field mecx-form-field-footer {
-      display: none !important;
-    }
-  }
-
-  mecx-form-field mecx-form-field-body > input {
-    height: 46px !important;
-  }
-}

package/assets/scss/partials/components/_input.scss

@@ -1,65 +0,0 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-@import '../variables.scss';
-
-.mecx-input {
-  width: 100%;
-  background-color: inherit;
-  border: inherit;
-  padding: 0 8px;
-}
-
-monkey-input {
-  mecx-form-field mecx-form-field-body {
-    cursor: text;
-  }
-}
-
-input {
-  @extend .mecx-input;
-  color: #4b4a53;
-  font-weight: 500;
-  border: none;
-  font-size: 14px;
-}
-
-::-webkit-input-placeholder {
-  /* WebKit, Blink, Edge */
-  color: #4b4a53;
-}
-:-moz-placeholder {
-  /* Mozilla Firefox 4 to 18 */
-  color: #4b4a53;
-}
-::-moz-placeholder {
-  /* Mozilla Firefox 19+ */
-  color: #4b4a53;
-}
-:-ms-input-placeholder {
-  /* Internet Explorer 10-11 */
-  color: #4b4a53;
-}
-::-ms-input-placeholder {
-  /* Microsoft Edge */
-  color: #4b4a53;
-}
-::placeholder {
-  /* Most modern browsers support this now. */
-  color: #9c9ca6;
-  font-weight: 400;
-  font-size: 14px;
-}
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:active,
-input:-webkit-autofill:focus {
-  background-color: #f5f5f5 !important;
-  color: #4b4a53 !important;
-  box-shadow: 0 0 0 1000px #f5f5f5 inset !important;
-  -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;
-  -webkit-text-fill-color: #4b4a53 !important;
-}

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

@@ -1,285 +0,0 @@
-/**************************
- * 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;
-      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;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-left: auto;
-
-        &:hover {
-          background: #e4e4e4;
-          border-radius: 8px;
-          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;
-}