npm - monkey-style-guide - Versions diffs - 2.0.211 → 21.0.0 - Mend

monkey-style-guide 2.0.211 → 21.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (670) hide show

package/assets/scss/partials/components/_checkbox.scss DELETED Viewed

@@ -1,69 +0,0 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
-**************************/
-.mecx-check-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-check-container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-.mecx-check-mark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 16px;
-  width: 16px;
-  background-color: #eee;
-  border-radius: 6px;
-}
-.mecx-check-container:hover input ~ .mecx-check-mark {
-  background-color: #ccc;
-}
-.mecx-check-container input:checked ~ .mecx-check-mark {
-  background-color: map-get($mecx-theme, main);
-  color: map-get(map-get($mecx-theme, contrast), main);
-}
-.mecx-check-mark:after {
-  content: '';
-  position: absolute;
-  display: none;
-}
-.mecx-check-container input:checked ~ .mecx-check-mark:after {
-  display: block;
-}
-.mecx-check-container .mecx-check-mark:after {
-  left: 6px;
-  top: 2px;
-  width: 4px;
-  height: 9px;
-  border: solid map-get($mecx-theme, 0);
-  border-width: 0 2px 2px 0;
-  -webkit-transform: rotate(44deg);
-  -ms-transform: rotate(44deg);
-  transform: rotate(44deg);
-}

package/assets/scss/partials/components/_date-range-picker-v2.scss DELETED Viewed

@@ -1,303 +0,0 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
-**************************/
-@import '../variables';
-@import '../breakpoints.scss';
-monkey-date-range-picker-v2 {
-  background: #fafafa;
-  border-radius: 8px;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  @include media-breakpoint('xs') {
-    padding: 8px;
-  }
-  mecx-date-range-picker-group {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    mecx-date-range-picker-group-header {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-      @include media-breakpoint('xs') {
-        display: none;
-      }
-      label {
-        color: #4b4a53;
-        font-size: 18px;
-        line-height: 21px;
-        font-weight: 500;
-        text-align: left;
-      }
-      helper {
-        color: #adadad;
-        font-size: 12px;
-        line-height: 14px;
-        font-weight: 400;
-      }
-    }
-    mecx-date-range-picker-group-body {
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-      gap: 48px;
-      .first-date-range {
-        .calendar-next {
-          display: none;
-        }
-      }
-      @include media-breakpoint('xs') {
-        flex-direction: column;
-        .first-date-range {
-          .calendar-next {
-            display: inline-block;
-          }
-        }
-        .second-date-range {
-          display: none;
-        }
-      }
-    }
-    mecx-date-range-picker-group-info {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      color: #4b4a53;
-      font-size: 12px;
-      line-height: 16px;
-      height: 30px;
-      info {
-        color: #4b4a53;
-        text-align: left;
-      }
-      error {
-        color: map-get($mecx-error, main);
-        text-align: left;
-      }
-    }
-    mecx-date-range-picker-group-action {
-      display: flex;
-      justify-content: space-between;
-      border-top: 1px solid #d6d6d6;
-      padding-top: 16px;
-      align-items: flex-end;
-      @include media-breakpoint('xs') {
-        flex-direction: column;
-        padding-top: 12px;
-      }
-      &.error {
-        border-top: 1px solid #fa3838;
-      }
-      .action-days > * {
-        margin-right: 24px;
-        @include media-breakpoint('xs') {
-          margin-right: 8px;
-          display: none;
-        }
-      }
-      .action-days > * :last-child {
-        margin-top: 8px;
-      }
-      .actions-date {
-        @include media-breakpoint('xs') {
-          width: 100%;
-          padding-top: 8px;
-          button {
-            width: 50%;
-          }
-        }
-      }
-    }
-  }
-  mecx-date-range-picker-selected-dates {
-    display: flex;
-    border-bottom: 1px solid #d6d6d6;
-    margin-bottom: 8px;
-    @include media-breakpoint('xs') {
-      display: none;
-    }
-    .from,
-    .to {
-      display: flex;
-      flex-direction: column;
-      cursor: pointer;
-      .title {
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 24px;
-        color: #9c9ca6;
-        @include media-breakpoint('xs') {
-          font-size: 12px;
-        }
-      }
-      .data {
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 24px;
-        min-height: 24px;
-        color: #4b4a53;
-      }
-      &:first-child {
-        margin-right: 48px;
-      }
-      &.actual {
-        border-bottom: 1px solid #ec7000;
-      }
-    }
-  }
-  mecx-date-range-picker-header {
-    display: flex;
-    flex-direction: column;
-    .calendar-title {
-      align-items: center;
-      color: #4b4a53;
-      display: flex;
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 21px;
-      margin-bottom: 8px;
-      text-align: center;
-      .month-year-title {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-      }
-    }
-    .week {
-      display: flex;
-      justify-content: center;
-      .week-day {
-        align-items: center;
-        color: #4b4a53;
-        display: flex;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: normal;
-        justify-content: center;
-        line-height: 16px;
-        margin-bottom: 8px;
-        text-align: center;
-        height: 16px;
-        width: 40px;
-        @include media-breakpoint('xs') {
-          height: 20px;
-          width: 32px;
-        }
-      }
-    }
-  }
-  mecx-date-range-picker-body {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    .month-week {
-      display: flex;
-    }
-    .month-day {
-      align-items: center;
-      color: #4b4a53;
-      cursor: pointer;
-      display: flex;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: normal;
-      justify-content: center;
-      line-height: 16px;
-      margin-bottom: 8px;
-      text-align: center;
-      width: 40px;
-      height: 16px;
-      @include media-breakpoint('xs') {
-        font-size: 12px;
-        height: 20px;
-        width: 32px;
-      }
-      &.inactive {
-        cursor: not-allowed !important;
-        opacity: 0.5;
-      }
-      &.today {
-        color: map-get($mecx-theme, main);
-        font-weight: 700;
-      }
-    }
-    .selected {
-      background: #ebebeb;
-      color: map-get($mecx-theme, main);
-    }
-    .first-selected {
-      border-top-left-radius: 8px;
-      border-bottom-left-radius: 8px;
-    }
-    .last-selected {
-      border-top-right-radius: 8px;
-      border-bottom-right-radius: 8px;
-    }
-  }
-  monkey-button.calendar-previous,
-  monkey-button.calendar-next {
-    monkey-icon {
-      margin: 0;
-    }
-  }
-}

package/assets/scss/partials/components/_date-range-picker.scss DELETED Viewed

@@ -1,266 +0,0 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
-**************************/
-@import '../variables';
-@import '../breakpoints.scss';
-monkey-date-range-picker {
-  background: #fafafa;
-  border-radius: 8px;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  @include media-breakpoint('xs') {
-    padding: 16px;
-  }
-  mecx-date-range-picker-group {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    mecx-date-range-picker-group-header {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-      label {
-        color: #4b4a53;
-        font-size: 18px;
-        line-height: 21px;
-        font-weight: 500;
-        text-align: left;
-      }
-      helper {
-        color: #adadad;
-        font-size: 12px;
-        line-height: 14px;
-        font-weight: 400;
-      }
-    }
-    mecx-date-range-picker-group-body {
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-      gap: 48px;
-      .first-date-range {
-        .calendar-next {
-          display: none;
-        }
-      }
-      @include media-breakpoint('xs') {
-        flex-direction: column;
-        .first-date-range {
-          .calendar-next {
-            display: inline-block;
-          }
-        }
-        .second-date-range {
-          display: none;
-        }
-      }
-    }
-    mecx-date-range-picker-group-info {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
-      color: #4b4a53;
-      font-size: 12px;
-      line-height: 16px;
-      height: 30px;
-      info {
-        color: #4b4a53;
-        text-align: left;
-      }
-      error {
-        color: map-get($mecx-error, main);
-        text-align: left;
-      }
-    }
-    mecx-date-range-picker-group-action {
-      display: flex;
-      justify-content: space-between;
-      border-top: 1px solid #d6d6d6;
-      padding-top: 16px;
-      align-items: flex-end;
-      &.error {
-        border-top: 1px solid #fa3838;
-      }
-      .action-days > * {
-        margin-right: 24px;
-      }
-      .action-days > * :last-child {
-        margin-top: 8px;
-      }
-    }
-  }
-  mecx-date-range-picker-selected-dates {
-    display: flex;
-    border-bottom: 1px solid #d6d6d6;
-    margin-bottom: 8px;
-    .from,
-    .to {
-      display: flex;
-      flex-direction: column;
-      cursor: pointer;
-      .title {
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 24px;
-        color: #9c9ca6;
-      }
-      .data {
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 24px;
-        color: #4b4a53;
-      }
-      &:first-child {
-        margin-right: 48px;
-      }
-      &.actual {
-        border-bottom: 1px solid #ec7000;
-      }
-    }
-  }
-  mecx-date-range-picker-header {
-    display: flex;
-    flex-direction: column;
-    .calendar-title {
-      align-items: center;
-      color: #4b4a53;
-      display: flex;
-      font-size: 18px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 21px;
-      margin-bottom: 8px;
-      text-align: center;
-      .month-year-title {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-      }
-    }
-    .week {
-      display: flex;
-      justify-content: center;
-      .week-day {
-        align-items: center;
-        color: #4b4a53;
-        display: flex;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: normal;
-        justify-content: center;
-        line-height: 16px;
-        margin-bottom: 8px;
-        text-align: center;
-        height: 16px;
-        width: 40px;
-        @include media-breakpoint('xs') {
-          height: 42px;
-          width: 42px;
-        }
-      }
-    }
-  }
-  mecx-date-range-picker-body {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    .month-week {
-      display: flex;
-    }
-    .month-day {
-      align-items: center;
-      color: #4b4a53;
-      cursor: pointer;
-      display: flex;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: normal;
-      justify-content: center;
-      line-height: 16px;
-      margin-bottom: 8px;
-      text-align: center;
-      width: 40px;
-      height: 16px;
-      @include media-breakpoint('xs') {
-        height: 42px;
-        width: 42px;
-      }
-      &.inactive {
-        cursor: not-allowed !important;
-        opacity: 0.5;
-      }
-      &.today {
-        color: map-get($mecx-theme, main);
-        font-weight: 700;
-      }
-    }
-    .selected {
-      background: #ebebeb;
-      color: map-get($mecx-theme, main);
-    }
-    .first-selected {
-      border-top-left-radius: 8px;
-      border-bottom-left-radius: 8px;
-    }
-    .last-selected {
-      border-top-right-radius: 8px;
-      border-bottom-right-radius: 8px;
-    }
-  }
-  monkey-button.calendar-previous,
-  monkey-button.calendar-next {
-    monkey-icon {
-      margin: 0;
-    }
-  }
-}

package/assets/scss/partials/components/_expansion.scss DELETED Viewed

@@ -1,96 +0,0 @@
-/**************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
-**************************/
-@import '../variables.scss';
-monkey-expansion {
-  width: 100%;
-  mecx-monkey-expansion {
-    width: 100%;
-    background: #fafafa;
-    border: 1px solid #d6d6d6;
-    box-sizing: border-box;
-    border-radius: 8px;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 12px;
-    mecx-monkey-expansion-header {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      cursor: pointer;
-      align-items: center;
-      label {
-        font-style: normal;
-        font-weight: 600;
-        font-size: 18px;
-        line-height: 23px;
-        color: #4b4a53;
-        cursor: pointer;
-      }
-      helper {
-        cursor: pointer;
-        font-style: normal;
-        font-weight: normal;
-        font-size: 14px;
-        line-height: 23px;
-        color: #9c9ca6;
-        cursor: pointer;
-      }
-    }
-    mecx-monkey-expansion-body {
-      padding: 16px;
-      display: none !important;
-      &.open {
-        display: block !important;
-      }
-    }
-  }
-  .mecx-monkey-expansion {
-    &__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;
-    }
-  }
-}