monkey-style-guide 2.0.212 → 21.0.1

package/assets/scss/partials/components/_progressbar.scss

@@ -1,112 +0,0 @@
-.monkey-progress {
-  width: 100%;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: none;
-  height: 0.25em;
-  font-size: 16px;
-
-  &__theme {
-    color: map-get($mecx-theme, main);
-    background-color: map-get($mecx-theme, 200);
-  }
-
-  &__grey {
-    color: #c9cacc;
-    background-color: rgba(#c9cacc, 0.12);
-  }
-
-  &__grey-white {
-    color: #f2f3f5;
-    background-color: #ebebeb45;
-  }
-
-  &__determinate {
-    color: map-get($mecx-theme, main);
-    background-color: map-get($mecx-theme, 200);
-    border-radius: 8px;
-    height: 0.25em;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 25px;
-    line-height: 29px;
-    text-align: center;
-
-    & > div {
-      padding-top: 6px;
-      color: map-get(map-get($mecx-theme, contrast), main);
-      background: map-get($mecx-theme, main);
-    }
-  }
-}
-
-.monkey-progress::-webkit-progress-bar {
-  background-color: transparent;
-}
-
-.monkey-progress::-webkit-progress-value {
-  background-color: currentColor;
-  transition: all 0.2s;
-  border-radius: 8px;
-}
-
-.monkey-progress__determinate:after {
-  content: attr(value) ' / ' attr(max);
-}
-
-.monkey-progress__determinate-no-progress:after {
-  content: '';
-}
-
-.monkey-progress::-moz-progress-bar {
-  background-color: currentColor;
-  transition: all 0.2s;
-  border-radius: 8px;
-}
-
-.monkey-progress::-ms-fill {
-  border: none;
-  background-color: currentColor;
-  transition: all 0.2s;
-  border-radius: 8px;
-}
-
-.monkey-progress:indeterminate {
-  background-size: 200% 100%;
-  background-image: linear-gradient(
-    to right,
-    transparent 50%,
-    currentColor 50%,
-    currentColor 60%,
-    transparent 60%,
-    transparent 71.5%,
-    currentColor 71.5%,
-    currentColor 84%,
-    transparent 84%
-  );
-  animation: monkey-progress 2s infinite linear;
-}
-
-.monkey-progress:indeterminate::-moz-progress-bar {
-  background-color: transparent;
-}
-
-.monkey-progress:indeterminate::-ms-fill {
-  animation-name: none;
-}
-
-@keyframes monkey-progress {
-  0% {
-    background-size: 200% 100%;
-    background-position: left -31.25% top 0%;
-  }
-  50% {
-    background-size: 800% 100%;
-    background-position: left -49% top 0%;
-  }
-  100% {
-    background-size: 400% 100%;
-    background-position: left -102% top 0%;
-  }
-}

package/assets/scss/partials/components/_radiobutton.scss

@@ -1,66 +0,0 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-.mecx-radio-container {
-  display: flex;
-  position: relative;
-  height: 16px;
-  padding-left: 24px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 4px;
-}
-
-.mecx-radio-container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.mecx-radio-mark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 16px;
-  width: 16px;
-  background-color: #eee;
-  border-radius: 50%;
-}
-
-.mecx-radio-container:hover input ~ .mecx-radio-mark {
-  background-color: #ccc;
-}
-
-.mecx-radio-container input:checked ~ .mecx-radio-mark {
-  background-color: inherit;
-  border: 1px solid map-get($mecx-theme, main);
-}
-
-.mecx-radio-mark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-.mecx-radio-container input:checked ~ .mecx-radio-mark:after {
-  display: block;
-}
-
-.mecx-radio-container .mecx-radio-mark:after {
-  left: 2px;
-  top: 2px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: map-get($mecx-theme, main);
-}

package/assets/scss/partials/components/_select.scss

@@ -1,356 +0,0 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
-**************************/
-@import '../variables.scss';
-
-.mecx-select {
-  width: 100%;
-  background-color: inherit;
-  padding: 0 8px;
-}
-
-mecx-select-wrapper {
-  position: relative;
-  user-select: none;
-  width: 100%;
-}
-
-mecx-select {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  transition: all 0;
-  padding-left: 16px;
-  padding-right: 16px;
-
-  &.trigger {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  &.open {
-    width: 100%;
-    transition: all 0;
-
-    mecx-select-options {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: all;
-      border-radius: 8px;
-      z-index: 11;
-    }
-  }
-}
-
-mecx-select-inside {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  transition: all 0;
-  left: 0;
-
-  &.trigger {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  &.open {
-    width: 100%;
-    transition: all 0;
-
-    mecx-select-options {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: all;
-      border-radius: 8px;
-      z-index: 11;
-    }
-  }
-}
-
-mecx-select__trigger {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 16px;
-  padding-right: 16px;
-  font-size: 14px;
-  cursor: pointer;
-  color: #4b4a53;
-  font-weight: 500;
-
-  &:disabled {
-    color: #9c9ca6 !important;
-  }
-
-  input {
-    padding: 0px;
-  }
-
-  monkey-icon {
-    margin-left: 4px;
-  }
-}
-
-mecx-select-options {
-  position: absolute;
-  display: block;
-  top: 100%;
-  margin-top: -4px;
-  left: 0;
-  right: 0;
-  border-top: 0;
-  background: #fafafa;
-  box-shadow: 0px 25px 52px 8px rgb(177 177 177 / 88%);
-  transition: all 0.5s;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  z-index: 11;
-  color: #4b4a53;
-  font-weight: 500;
-
-  padding-top: 0;
-  padding-bottom: 0;
-  max-height: 256px;
-  min-width: 100%;
-  border-radius: 4px;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.mecx-option {
-  position: relative;
-  display: block;
-  padding: 0 8px 0 8px;
-  font-size: 14px;
-  line-height: 20px;
-  cursor: pointer;
-  transition: all 0.5s;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  height: 48px;
-
-  &:hover {
-    cursor: pointer;
-    background-color: map-get($mecx-theme, 100);
-  }
-
-  &.selected {
-    color: #ffffff;
-    background-color: map-get($mecx-theme, main);
-  }
-}
-
-monkey-select {
-  width: 100%;
-
-  mecx-form-field mecx-form-field-body {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-    cursor: pointer;
-    height: 48px;
-  }
-}
-
-monkey-select-multiple {
-  width: 100%;
-
-  mecx-form-field mecx-form-field-body {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-    cursor: pointer;
-    height: 48px;
-  }
-}
-
-monkey-select-search {
-  width: 100%;
-
-  mecx-form-field mecx-form-field-body {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-    cursor: pointer;
-    height: 48px;
-  }
-}
-
-monkey-select-filter {
-  width: 100%;
-  border-radius: 48px;
-
-  mecx-form-field-body {
-    cursor: pointer;
-    height: 48px;
-  }
-
-  &:hover {
-    color: #4b4a53;
-    background-position: center;
-    transition: background 0.8s;
-    background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
-  }
-
-  &:active {
-    color: #4b4a53;
-    background-color: #f5f5f5;
-    background-size: 100%;
-    transition: background 0s;
-  }
-}
-
-mecx-select-filter {
-  background: #f5f5f5;
-  border: none;
-  box-sizing: border-box;
-  border-radius: 120px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  height: 40px;
-  cursor: pointer;
-  transition: all 0;
-
-  mecx-form-field-body {
-    cursor: pointer;
-    height: 40px;
-  }
-
-  &.trigger {
-    padding: 12px;
-
-    &:hover {
-      color: #4b4a53;
-      background-position: center;
-      transition: background 0.8s;
-      background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
-    }
-
-    &:active {
-      color: #4b4a53;
-      background-color: #f5f5f5;
-      background-size: 100%;
-      transition: background 0s;
-    }
-  }
-
-  &.open {
-    width: 100%;
-    transition: all 0;
-
-    mecx-select-options {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: all;
-      border-radius: 8px;
-      z-index: 11;
-    }
-  }
-
-  &:hover {
-    color: #4b4a53;
-    background-position: center;
-    transition: background 0.8s;
-    background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
-  }
-
-  &:active {
-    color: #4b4a53;
-    background-color: #f5f5f5;
-    background-size: 100%;
-    transition: background 0s;
-  }
-
-  &.none {
-    background: inherit !important;
-    border: none;
-    border-radius: 48px;
-
-    mecx-select__trigger {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 14px;
-      cursor: pointer;
-      color: #4b4a53;
-      font-weight: 500;
-
-      span {
-        margin-right: 10px;
-      }
-
-      &:disabled {
-        color: #9c9ca6 !important;
-      }
-
-      input {
-        padding: 0px;
-      }
-    }
-
-    &:hover {
-      color: #4b4a53;
-      background-position: center;
-      transition: background 0.8s;
-      background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
-    }
-
-    &:active {
-      color: #4b4a53;
-      background-color: #f5f5f5;
-      background-size: 100%;
-      transition: background 0s;
-    }
-  }
-
-  &.border {
-    background: inherit !important;
-    border: none;
-    border-radius: 48px;
-    border: 1px solid #d6d6d6;
-
-    mecx-select__trigger {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 8px;
-      font-size: 14px;
-      cursor: pointer;
-      color: #4b4a53;
-      font-weight: 500;
-
-      span {
-        margin-right: 10px;
-      }
-
-      &:disabled {
-        color: #9c9ca6 !important;
-      }
-    }
-
-    &:hover {
-      color: #4b4a53;
-      background-position: center;
-      transition: background 0.8s;
-      background: #f5f5f5 radial-gradient(circle, transparent 1%, #f5f5f5 1%) center/15000%;
-    }
-
-    &:active {
-      color: #4b4a53;
-      background-color: #f5f5f5;
-      background-size: 100%;
-      transition: background 0s;
-    }
-  }
-}

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

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