monkey-style-guide 2.0.182 → 2.0.184

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

@@ -0,0 +1,302 @@
+/**************************
+ * 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;
+
+      .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/_index.scss

@@ -1,7 +1,7 @@
 /**************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
- * MIT Licence 
+ * MIT Licence
 **************************/
 @import 'badge';
 @import 'input';
@@ -10,6 +10,7 @@
 @import 'buttons';
 @import 'checkbox';
 @import 'date-range-picker';
+@import 'date-range-picker-v2';
 @import 'radiobutton';
 @import 'wizard';
 @import 'snackbar';