monkey-style-guide 2.0.83 → 2.0.88

package/README.md

@@ -1071,7 +1071,7 @@ export class AppComponent {
 [icon-screenshot1]: https://user-images.githubusercontent.com/10110065/111643849-0ddcdd80-87de-11eb-8161-fc5a20a1d237.png
 [icons-screenshot1]: https://user-images.githubusercontent.com/12416871/112203694-90580980-8bf1-11eb-969f-2ac21a7b9dee.png
 [radiobutton-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/radiobutton.png
-[buttons-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/buttons.png
+[buttons-screenshot]: https://user-images.githubusercontent.com/10110065/142933460-7a84ad76-b57f-40a0-b809-292af31c1e8f.png
 [settings-screenshot]: https://dev-monkey-emails.s3-us-west-2.amazonaws.com/monkey-style-guide/demos/images/style-settings-json.png
 [table-screenshot]: https://user-images.githubusercontent.com/12416871/119574643-29d79f00-bd8c-11eb-9747-2e6dc86410da.png
 [modal-screenshot]: https://user-images.githubusercontent.com/12416871/119838920-2c480f00-beda-11eb-9e44-e42262f39c34.png

package/assets/scss/partials/components/_buttons.scss

@@ -297,7 +297,7 @@ monkey-button[disabled] {
 
   &__theme {
     background-color: inherit;
-    color: map-get($mecx-theme, main);
+    color: map-get($mecx-theme, 500);
     box-sizing: border-box;
     background-position: center;
 
@@ -317,7 +317,7 @@ monkey-button[disabled] {
 
   &__error {
     background-color: inherit;
-    color: map-get($mecx-error, main);
+    color: map-get($mecx-error, 500);
     box-sizing: border-box;
     background-position: center;
 
@@ -337,7 +337,7 @@ monkey-button[disabled] {
 
   &__warning {
     background-color: inherit;
-    color: map-get($mecx-warning, main);
+    color: map-get($mecx-warning, 500);
     box-sizing: border-box;
     background-position: center;
 
@@ -357,7 +357,7 @@ monkey-button[disabled] {
 
   &__success {
     background-color: inherit;
-    color: map-get($mecx-success, main);
+    color: map-get($mecx-success, 500);
     box-sizing: border-box;
     background-position: center;
 
@@ -377,7 +377,7 @@ monkey-button[disabled] {
 
   &__question {
     background-color: inherit;
-    color: map-get($mecx-question, 700);
+    color: map-get($mecx-question, 500);
     box-sizing: border-box;
     background-position: center;
 

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

@@ -0,0 +1,204 @@
+/**************************
+ * 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%;
+
+    &.error {
+      border: 1px solid #fa3838;
+      padding: 4px;
+    }
+
+    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;
+
+      .action-days > * {
+        margin-right: 24px;
+      }
+
+      .action-days > * :last-child {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  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 {
+        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

@@ -5,9 +5,11 @@
 **************************/
 @import 'badge';
 @import 'input';
+@import 'input-phone';
 @import 'select';
 @import 'buttons';
 @import 'checkbox';
+@import 'date-range-picker';
 @import 'radiobutton';
 @import 'wizard';
 @import 'snackbar';

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

@@ -0,0 +1,17 @@
+/**************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence 
+**************************/
+@import '../variables';
+@import '../breakpoints.scss';
+
+monkey-input-phone {
+  mecx-form-field mecx-form-field-header {
+    display: none;
+  }
+
+  mecx-form-field mecx-form-field-footer {
+    display: none;
+  }
+}