monkey-style-guide 2.0.192 → 2.0.194

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

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